@descope/web-components-ui 1.0.319 → 1.0.321

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/dist/cjs/index.cjs.js +1390 -1010
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +1433 -1051
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/umd/1438.js +1 -1
  6. package/dist/umd/2362.js +1 -1
  7. package/dist/umd/3830.js +1 -1
  8. package/dist/umd/4028.js +1 -1
  9. package/dist/umd/5135.js +1 -1
  10. package/dist/umd/5806.js +1 -1
  11. package/dist/umd/602.js +170 -0
  12. package/dist/umd/{1621.js.LICENSE.txt → 602.js.LICENSE.txt} +0 -6
  13. package/dist/umd/6770.js +1 -1
  14. package/dist/umd/7056.js +2 -2
  15. package/dist/umd/7284.js +303 -0
  16. package/dist/umd/7284.js.LICENSE.txt +11 -0
  17. package/dist/umd/8137.js +452 -0
  18. package/dist/umd/8137.js.LICENSE.txt +17 -0
  19. package/dist/umd/8191.js +4 -4
  20. package/dist/umd/9092.js +2 -2
  21. package/dist/umd/DescopeDev.js +1 -1
  22. package/dist/umd/boolean-fields-descope-checkbox-index-js.js +1 -1
  23. package/dist/umd/boolean-fields-descope-switch-toggle-index-js.js +1 -1
  24. package/dist/umd/descope-email-field-index-js.js +1 -1
  25. package/dist/umd/descope-grid-descope-grid-selection-column-index-js.js +1 -1
  26. package/dist/umd/descope-new-password-descope-new-password-internal-index-js.js +1 -1
  27. package/dist/umd/descope-new-password-index-js.js +1 -1
  28. package/dist/umd/descope-passcode-index-js.js +1 -1
  29. package/dist/umd/descope-password-index-js.js +1 -1
  30. package/dist/umd/descope-radio-group-index-js.js +1 -0
  31. package/dist/umd/descope-text-field-index-js.js +1 -1
  32. package/dist/umd/index.js +1 -1
  33. package/dist/umd/phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js.js +1 -1
  34. package/package.json +2 -1
  35. package/src/components/descope-password/PasswordClass.js +56 -0
  36. package/src/components/descope-radio-group/RadioButtonClass.js +74 -0
  37. package/src/components/descope-radio-group/RadioGroupClass.js +192 -0
  38. package/src/components/descope-radio-group/index.js +8 -0
  39. package/src/index.cjs.js +2 -0
  40. package/src/index.js +1 -0
  41. package/src/theme/components/index.js +4 -0
  42. package/src/theme/components/radioGroup/radioButton.js +42 -0
  43. package/src/theme/components/radioGroup/radioGroup.js +37 -0
  44. package/dist/umd/1621.js +0 -620
@@ -632,7 +632,7 @@ const globals = {
632
632
  fonts,
633
633
  direction,
634
634
  };
635
- const vars$H = getThemeVars(globals);
635
+ const vars$J = getThemeVars(globals);
636
636
 
637
637
  const createCssVar = (varName, fallback) => `var(${varName}${fallback ? `, ${fallback}` : ''})`;
638
638
 
@@ -2578,9 +2578,9 @@ const inputEventsDispatchingMixin = (superclass) =>
2578
2578
 
2579
2579
  /* eslint-disable no-use-before-define */
2580
2580
 
2581
- const componentName$Q = getComponentName('icon');
2581
+ const componentName$S = getComponentName('icon');
2582
2582
 
2583
- class RawIcon extends createBaseClass({ componentName: componentName$Q, baseSelector: 'slot' }) {
2583
+ class RawIcon extends createBaseClass({ componentName: componentName$S, baseSelector: 'slot' }) {
2584
2584
  constructor() {
2585
2585
  super();
2586
2586
 
@@ -2649,7 +2649,7 @@ const clickableMixin = (superclass) =>
2649
2649
  }
2650
2650
  };
2651
2651
 
2652
- const componentName$P = getComponentName('button');
2652
+ const componentName$R = getComponentName('button');
2653
2653
 
2654
2654
  const resetStyles = `
2655
2655
  :host {
@@ -2755,7 +2755,7 @@ const ButtonClass = compose(
2755
2755
  }
2756
2756
  `,
2757
2757
  excludeAttrsSync: ['tabindex'],
2758
- componentName: componentName$P,
2758
+ componentName: componentName$R,
2759
2759
  })
2760
2760
  );
2761
2761
 
@@ -2792,31 +2792,31 @@ loadingIndicatorStyles = `
2792
2792
  }
2793
2793
  `;
2794
2794
 
2795
- const globalRefs$p = getThemeRefs(globals);
2795
+ const globalRefs$r = getThemeRefs(globals);
2796
2796
  const compVars$5 = ButtonClass.cssVarList;
2797
2797
 
2798
2798
  const mode = {
2799
- primary: globalRefs$p.colors.primary,
2800
- secondary: globalRefs$p.colors.secondary,
2801
- success: globalRefs$p.colors.success,
2802
- error: globalRefs$p.colors.error,
2803
- surface: globalRefs$p.colors.surface,
2799
+ primary: globalRefs$r.colors.primary,
2800
+ secondary: globalRefs$r.colors.secondary,
2801
+ success: globalRefs$r.colors.success,
2802
+ error: globalRefs$r.colors.error,
2803
+ surface: globalRefs$r.colors.surface,
2804
2804
  };
2805
2805
 
2806
- const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$P);
2806
+ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$R);
2807
2807
 
2808
2808
  const button = {
2809
2809
  ...helperTheme$3,
2810
2810
 
2811
- [compVars$5.fontFamily]: globalRefs$p.fonts.font1.family,
2811
+ [compVars$5.fontFamily]: globalRefs$r.fonts.font1.family,
2812
2812
 
2813
2813
  [compVars$5.cursor]: 'pointer',
2814
2814
  [compVars$5.hostHeight]: '3em',
2815
2815
  [compVars$5.hostWidth]: 'auto',
2816
- [compVars$5.hostDirection]: globalRefs$p.direction,
2816
+ [compVars$5.hostDirection]: globalRefs$r.direction,
2817
2817
 
2818
- [compVars$5.borderRadius]: globalRefs$p.radius.sm,
2819
- [compVars$5.borderWidth]: globalRefs$p.border.xs,
2818
+ [compVars$5.borderRadius]: globalRefs$r.radius.sm,
2819
+ [compVars$5.borderWidth]: globalRefs$r.border.xs,
2820
2820
  [compVars$5.borderStyle]: 'solid',
2821
2821
  [compVars$5.borderColor]: 'transparent',
2822
2822
 
@@ -2859,11 +2859,11 @@ const button = {
2859
2859
  },
2860
2860
 
2861
2861
  _disabled: {
2862
- [helperVars$3.main]: globalRefs$p.colors.surface.light,
2863
- [helperVars$3.dark]: globalRefs$p.colors.surface.dark,
2864
- [helperVars$3.light]: globalRefs$p.colors.surface.light,
2865
- [helperVars$3.contrast]: globalRefs$p.colors.surface.main,
2866
- [compVars$5.iconColor]: globalRefs$p.colors.surface.main,
2862
+ [helperVars$3.main]: globalRefs$r.colors.surface.light,
2863
+ [helperVars$3.dark]: globalRefs$r.colors.surface.dark,
2864
+ [helperVars$3.light]: globalRefs$r.colors.surface.light,
2865
+ [helperVars$3.contrast]: globalRefs$r.colors.surface.main,
2866
+ [compVars$5.iconColor]: globalRefs$r.colors.surface.main,
2867
2867
  },
2868
2868
 
2869
2869
  variant: {
@@ -2911,7 +2911,7 @@ const button = {
2911
2911
  },
2912
2912
  };
2913
2913
 
2914
- const vars$G = {
2914
+ const vars$I = {
2915
2915
  ...compVars$5,
2916
2916
  ...helperVars$3,
2917
2917
  };
@@ -2919,7 +2919,7 @@ const vars$G = {
2919
2919
  var button$1 = /*#__PURE__*/Object.freeze({
2920
2920
  __proto__: null,
2921
2921
  default: button,
2922
- vars: vars$G
2922
+ vars: vars$I
2923
2923
  });
2924
2924
 
2925
2925
  const {
@@ -3146,11 +3146,11 @@ const resetInputLabelPosition = (name) => `
3146
3146
  }
3147
3147
  `;
3148
3148
 
3149
- const componentName$O = getComponentName('text-field');
3149
+ const componentName$Q = getComponentName('text-field');
3150
3150
 
3151
3151
  const observedAttrs = ['type'];
3152
3152
 
3153
- const customMixin$9 = (superclass) =>
3153
+ const customMixin$a = (superclass) =>
3154
3154
  class TextFieldClass extends superclass {
3155
3155
  static get observedAttributes() {
3156
3156
  return observedAttrs.concat(superclass.observedAttributes || []);
@@ -3202,7 +3202,7 @@ const TextFieldClass = compose(
3202
3202
  draggableMixin,
3203
3203
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
3204
3204
  componentNameValidationMixin,
3205
- customMixin$9
3205
+ customMixin$a
3206
3206
  )(
3207
3207
  createProxy({
3208
3208
  slots: ['prefix', 'suffix'],
@@ -3224,29 +3224,29 @@ const TextFieldClass = compose(
3224
3224
  ${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
3225
3225
  `,
3226
3226
  excludeAttrsSync: ['tabindex'],
3227
- componentName: componentName$O,
3227
+ componentName: componentName$Q,
3228
3228
  })
3229
3229
  );
3230
3230
 
3231
- const componentName$N = getComponentName('input-wrapper');
3232
- const globalRefs$o = getThemeRefs(globals);
3231
+ const componentName$P = getComponentName('input-wrapper');
3232
+ const globalRefs$q = getThemeRefs(globals);
3233
3233
 
3234
- const [theme$1, refs, vars$F] = createHelperVars(
3234
+ const [theme$1, refs, vars$H] = createHelperVars(
3235
3235
  {
3236
- labelTextColor: globalRefs$o.colors.surface.dark,
3236
+ labelTextColor: globalRefs$q.colors.surface.dark,
3237
3237
  labelFontSize: '14px', // not taken from globals as it is fixed in all inputs
3238
- valueTextColor: globalRefs$o.colors.surface.contrast,
3239
- placeholderTextColor: globalRefs$o.colors.surface.dark,
3238
+ valueTextColor: globalRefs$q.colors.surface.contrast,
3239
+ placeholderTextColor: globalRefs$q.colors.surface.dark,
3240
3240
  requiredIndicator: "'*'",
3241
- helperTextColor: globalRefs$o.colors.surface.dark,
3242
- errorMessageTextColor: globalRefs$o.colors.error.main,
3243
- successMessageTextColor: globalRefs$o.colors.success.main,
3241
+ helperTextColor: globalRefs$q.colors.surface.dark,
3242
+ errorMessageTextColor: globalRefs$q.colors.error.main,
3243
+ successMessageTextColor: globalRefs$q.colors.success.main,
3244
3244
 
3245
- borderWidth: globalRefs$o.border.xs,
3246
- borderRadius: globalRefs$o.radius.xs,
3245
+ borderWidth: globalRefs$q.border.xs,
3246
+ borderRadius: globalRefs$q.radius.xs,
3247
3247
  borderColor: 'transparent',
3248
3248
 
3249
- outlineWidth: globalRefs$o.border.sm,
3249
+ outlineWidth: globalRefs$q.border.sm,
3250
3250
  outlineStyle: 'solid',
3251
3251
  outlineColor: 'transparent',
3252
3252
  outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
@@ -3257,11 +3257,11 @@ const [theme$1, refs, vars$F] = createHelperVars(
3257
3257
  horizontalPadding: '0.5em',
3258
3258
  verticalPadding: '0.5em',
3259
3259
 
3260
- backgroundColor: globalRefs$o.colors.surface.main,
3260
+ backgroundColor: globalRefs$q.colors.surface.main,
3261
3261
 
3262
- fontFamily: globalRefs$o.fonts.font1.family,
3262
+ fontFamily: globalRefs$q.fonts.font1.family,
3263
3263
 
3264
- direction: globalRefs$o.direction,
3264
+ direction: globalRefs$q.direction,
3265
3265
 
3266
3266
  overlayOpacity: '0.3',
3267
3267
 
@@ -3277,69 +3277,69 @@ const [theme$1, refs, vars$F] = createHelperVars(
3277
3277
  },
3278
3278
 
3279
3279
  _focused: {
3280
- outlineColor: globalRefs$o.colors.surface.light,
3280
+ outlineColor: globalRefs$q.colors.surface.light,
3281
3281
  _invalid: {
3282
- outlineColor: globalRefs$o.colors.error.main,
3282
+ outlineColor: globalRefs$q.colors.error.main,
3283
3283
  },
3284
3284
  },
3285
3285
 
3286
3286
  _bordered: {
3287
- outlineWidth: globalRefs$o.border.xs,
3288
- borderColor: globalRefs$o.colors.surface.light,
3287
+ outlineWidth: globalRefs$q.border.xs,
3288
+ borderColor: globalRefs$q.colors.surface.light,
3289
3289
  borderStyle: 'solid',
3290
3290
  _invalid: {
3291
- borderColor: globalRefs$o.colors.error.main,
3291
+ borderColor: globalRefs$q.colors.error.main,
3292
3292
  },
3293
3293
  },
3294
3294
 
3295
3295
  _disabled: {
3296
- labelTextColor: globalRefs$o.colors.surface.light,
3297
- borderColor: globalRefs$o.colors.surface.light,
3298
- valueTextColor: globalRefs$o.colors.surface.light,
3299
- placeholderTextColor: globalRefs$o.colors.surface.light,
3300
- helperTextColor: globalRefs$o.colors.surface.light,
3301
- backgroundColor: globalRefs$o.colors.surface.main,
3296
+ labelTextColor: globalRefs$q.colors.surface.light,
3297
+ borderColor: globalRefs$q.colors.surface.light,
3298
+ valueTextColor: globalRefs$q.colors.surface.light,
3299
+ placeholderTextColor: globalRefs$q.colors.surface.light,
3300
+ helperTextColor: globalRefs$q.colors.surface.light,
3301
+ backgroundColor: globalRefs$q.colors.surface.main,
3302
3302
  },
3303
3303
  },
3304
- componentName$N
3304
+ componentName$P
3305
3305
  );
3306
3306
 
3307
3307
  var inputWrapper = /*#__PURE__*/Object.freeze({
3308
3308
  __proto__: null,
3309
3309
  default: theme$1,
3310
3310
  refs: refs,
3311
- vars: vars$F
3311
+ vars: vars$H
3312
3312
  });
3313
3313
 
3314
- const vars$E = TextFieldClass.cssVarList;
3314
+ const vars$G = TextFieldClass.cssVarList;
3315
3315
 
3316
3316
  const textField$1 = {
3317
- [vars$E.hostWidth]: refs.width,
3318
- [vars$E.hostMinWidth]: refs.minWidth,
3319
- [vars$E.hostDirection]: refs.direction,
3320
- [vars$E.fontSize]: refs.fontSize,
3321
- [vars$E.fontFamily]: refs.fontFamily,
3322
- [vars$E.labelTextColor]: refs.labelTextColor,
3323
- [vars$E.labelRequiredIndicator]: refs.requiredIndicator,
3324
- [vars$E.errorMessageTextColor]: refs.errorMessageTextColor,
3325
- [vars$E.inputValueTextColor]: refs.valueTextColor,
3326
- [vars$E.inputPlaceholderColor]: refs.placeholderTextColor,
3327
- [vars$E.inputBorderWidth]: refs.borderWidth,
3328
- [vars$E.inputBorderStyle]: refs.borderStyle,
3329
- [vars$E.inputBorderColor]: refs.borderColor,
3330
- [vars$E.inputBorderRadius]: refs.borderRadius,
3331
- [vars$E.inputOutlineWidth]: refs.outlineWidth,
3332
- [vars$E.inputOutlineStyle]: refs.outlineStyle,
3333
- [vars$E.inputOutlineColor]: refs.outlineColor,
3334
- [vars$E.inputOutlineOffset]: refs.outlineOffset,
3335
- [vars$E.inputBackgroundColor]: refs.backgroundColor,
3336
- [vars$E.inputHeight]: refs.inputHeight,
3337
- [vars$E.inputHorizontalPadding]: refs.horizontalPadding,
3338
- [vars$E.helperTextColor]: refs.helperTextColor,
3317
+ [vars$G.hostWidth]: refs.width,
3318
+ [vars$G.hostMinWidth]: refs.minWidth,
3319
+ [vars$G.hostDirection]: refs.direction,
3320
+ [vars$G.fontSize]: refs.fontSize,
3321
+ [vars$G.fontFamily]: refs.fontFamily,
3322
+ [vars$G.labelTextColor]: refs.labelTextColor,
3323
+ [vars$G.labelRequiredIndicator]: refs.requiredIndicator,
3324
+ [vars$G.errorMessageTextColor]: refs.errorMessageTextColor,
3325
+ [vars$G.inputValueTextColor]: refs.valueTextColor,
3326
+ [vars$G.inputPlaceholderColor]: refs.placeholderTextColor,
3327
+ [vars$G.inputBorderWidth]: refs.borderWidth,
3328
+ [vars$G.inputBorderStyle]: refs.borderStyle,
3329
+ [vars$G.inputBorderColor]: refs.borderColor,
3330
+ [vars$G.inputBorderRadius]: refs.borderRadius,
3331
+ [vars$G.inputOutlineWidth]: refs.outlineWidth,
3332
+ [vars$G.inputOutlineStyle]: refs.outlineStyle,
3333
+ [vars$G.inputOutlineColor]: refs.outlineColor,
3334
+ [vars$G.inputOutlineOffset]: refs.outlineOffset,
3335
+ [vars$G.inputBackgroundColor]: refs.backgroundColor,
3336
+ [vars$G.inputHeight]: refs.inputHeight,
3337
+ [vars$G.inputHorizontalPadding]: refs.horizontalPadding,
3338
+ [vars$G.helperTextColor]: refs.helperTextColor,
3339
3339
  textAlign: {
3340
- right: { [vars$E.inputTextAlign]: 'right' },
3341
- left: { [vars$E.inputTextAlign]: 'left' },
3342
- center: { [vars$E.inputTextAlign]: 'center' },
3340
+ right: { [vars$G.inputTextAlign]: 'right' },
3341
+ left: { [vars$G.inputTextAlign]: 'left' },
3342
+ center: { [vars$G.inputTextAlign]: 'center' },
3343
3343
  },
3344
3344
  };
3345
3345
 
@@ -3347,7 +3347,7 @@ var textField$2 = /*#__PURE__*/Object.freeze({
3347
3347
  __proto__: null,
3348
3348
  default: textField$1,
3349
3349
  textField: textField$1,
3350
- vars: vars$E
3350
+ vars: vars$G
3351
3351
  });
3352
3352
 
3353
3353
  const passwordDraggableMixin = (superclass) =>
@@ -3452,9 +3452,9 @@ const applyExternalInputStyles = (sourceInputEle, targetInputEle) => {
3452
3452
  `;
3453
3453
  };
3454
3454
 
3455
- const componentName$M = getComponentName('password');
3455
+ const componentName$O = getComponentName('password');
3456
3456
 
3457
- const customMixin$8 = (superclass) =>
3457
+ const customMixin$9 = (superclass) =>
3458
3458
  class PasswordFieldMixinClass extends superclass {
3459
3459
  init() {
3460
3460
  super.init?.();
@@ -3475,6 +3475,8 @@ const customMixin$8 = (superclass) =>
3475
3475
  // create external input
3476
3476
  const externalInput = createExternalInputEle('external-input', this.getAutocompleteType());
3477
3477
 
3478
+ this.handlePasswordVisibility(externalInput);
3479
+
3478
3480
  // apply original input's styles to external input
3479
3481
  setTimeout(() => {
3480
3482
  applyExternalInputStyles(origInput, externalInput);
@@ -3485,6 +3487,7 @@ const customMixin$8 = (superclass) =>
3485
3487
 
3486
3488
  // sync input stateful attributes: `type` (for visibility state change) and `readonly`
3487
3489
  syncAttrs(origInput, externalInput, { includeAttrs: ['type', 'readonly'] });
3490
+ syncAttrs(this, externalInput, { includeAttrs: ['focused'] });
3488
3491
 
3489
3492
  origInput.addEventListener('focus', (e) => {
3490
3493
  e.preventDefault();
@@ -3502,6 +3505,59 @@ const customMixin$8 = (superclass) =>
3502
3505
  this.appendChild(externalInput);
3503
3506
  }
3504
3507
 
3508
+ // override vaadin's password visibility toggle.
3509
+ // we need this override in order to to resolve the external input `focus` race condition,
3510
+ // which is caused due to the focus sync between the two inputs.
3511
+ handlePasswordVisibility(externalInput) {
3512
+ // disable vaadin's `__boundRevealButtonMouseDown` mouse-down event lisetener
3513
+ const origBoundRevealButtonMouseDown = this.baseElement.__boundRevealButtonMouseDown;
3514
+ this.baseElement
3515
+ .querySelector('vaadin-password-field-button')
3516
+ .removeEventListener('mousedown', origBoundRevealButtonMouseDown);
3517
+
3518
+ // disable vaadin's `_passwordVisibleChanged` observer
3519
+ this.baseElement._passwordVisibleChanged = () => {};
3520
+
3521
+ // override vaadin's `_togglePasswordVisibility`
3522
+ this.baseElement._togglePasswordVisibility = () => {
3523
+ const currVisibility = externalInput.getAttribute('type');
3524
+ if (currVisibility === 'password') {
3525
+ this.showPasswordVisibility(externalInput);
3526
+ } else {
3527
+ this.hidePasswordVisibility(externalInput);
3528
+ }
3529
+ };
3530
+
3531
+ // on component blur, if password is revealed - hide it
3532
+ // this behaves differently from vaadin's focus handling, and checks if the blur takes the component out of focus
3533
+ // (which menas the click was made outside the component) or if the blur was called due to clicking the Reveal Button
3534
+ // and then focusing in the input again
3535
+ this.addEventListener('blur', () => {
3536
+ setTimeout(() => {
3537
+ const isHiddenAndFocused =
3538
+ externalInput.getAttribute('type') !== 'password' &&
3539
+ externalInput.getAttribute('focused') !== 'true';
3540
+ if (isHiddenAndFocused) {
3541
+ this.hidePasswordVisibility(externalInput);
3542
+ }
3543
+ });
3544
+ });
3545
+ }
3546
+
3547
+ hidePasswordVisibility(input) {
3548
+ // handle input element's type
3549
+ input.setAttribute('type', 'password');
3550
+ // handle vaadin's `password-visible` attribute
3551
+ this.setAttribute('password-visible', 'false');
3552
+ }
3553
+
3554
+ showPasswordVisibility(input) {
3555
+ // handle input element's type
3556
+ input.setAttribute('type', 'text');
3557
+ // handle vaadin's `password-visible` attribute
3558
+ this.setAttribute('password-visible', 'true');
3559
+ }
3560
+
3505
3561
  getAutocompleteType() {
3506
3562
  return this.getAttribute('autocomplete') || 'current-password';
3507
3563
  }
@@ -3596,7 +3652,7 @@ const PasswordClass = compose(
3596
3652
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
3597
3653
  componentNameValidationMixin,
3598
3654
  passwordDraggableMixin,
3599
- customMixin$8
3655
+ customMixin$9
3600
3656
  )(
3601
3657
  createProxy({
3602
3658
  slots: ['', 'suffix'],
@@ -3653,46 +3709,46 @@ const PasswordClass = compose(
3653
3709
  }
3654
3710
  `,
3655
3711
  excludeAttrsSync: ['tabindex'],
3656
- componentName: componentName$M,
3712
+ componentName: componentName$O,
3657
3713
  })
3658
3714
  );
3659
3715
 
3660
- const globalRefs$n = getThemeRefs(globals);
3661
- const vars$D = PasswordClass.cssVarList;
3716
+ const globalRefs$p = getThemeRefs(globals);
3717
+ const vars$F = PasswordClass.cssVarList;
3662
3718
 
3663
3719
  const password = {
3664
- [vars$D.hostWidth]: refs.width,
3665
- [vars$D.hostDirection]: refs.direction,
3666
- [vars$D.fontSize]: refs.fontSize,
3667
- [vars$D.fontFamily]: refs.fontFamily,
3668
- [vars$D.labelTextColor]: refs.labelTextColor,
3669
- [vars$D.errorMessageTextColor]: refs.errorMessageTextColor,
3670
- [vars$D.inputHorizontalPadding]: refs.horizontalPadding,
3671
- [vars$D.inputHeight]: refs.inputHeight,
3672
- [vars$D.inputBackgroundColor]: refs.backgroundColor,
3673
- [vars$D.labelRequiredIndicator]: refs.requiredIndicator,
3674
- [vars$D.inputValueTextColor]: refs.valueTextColor,
3675
- [vars$D.inputPlaceholderTextColor]: refs.placeholderTextColor,
3676
- [vars$D.inputBorderWidth]: refs.borderWidth,
3677
- [vars$D.inputBorderStyle]: refs.borderStyle,
3678
- [vars$D.inputBorderColor]: refs.borderColor,
3679
- [vars$D.inputBorderRadius]: refs.borderRadius,
3680
- [vars$D.inputOutlineWidth]: refs.outlineWidth,
3681
- [vars$D.inputOutlineStyle]: refs.outlineStyle,
3682
- [vars$D.inputOutlineColor]: refs.outlineColor,
3683
- [vars$D.inputOutlineOffset]: refs.outlineOffset,
3684
- [vars$D.revealButtonOffset]: globalRefs$n.spacing.md,
3685
- [vars$D.revealButtonSize]: refs.toggleButtonSize,
3686
- [vars$D.revealButtonColor]: refs.placeholderTextColor,
3720
+ [vars$F.hostWidth]: refs.width,
3721
+ [vars$F.hostDirection]: refs.direction,
3722
+ [vars$F.fontSize]: refs.fontSize,
3723
+ [vars$F.fontFamily]: refs.fontFamily,
3724
+ [vars$F.labelTextColor]: refs.labelTextColor,
3725
+ [vars$F.errorMessageTextColor]: refs.errorMessageTextColor,
3726
+ [vars$F.inputHorizontalPadding]: refs.horizontalPadding,
3727
+ [vars$F.inputHeight]: refs.inputHeight,
3728
+ [vars$F.inputBackgroundColor]: refs.backgroundColor,
3729
+ [vars$F.labelRequiredIndicator]: refs.requiredIndicator,
3730
+ [vars$F.inputValueTextColor]: refs.valueTextColor,
3731
+ [vars$F.inputPlaceholderTextColor]: refs.placeholderTextColor,
3732
+ [vars$F.inputBorderWidth]: refs.borderWidth,
3733
+ [vars$F.inputBorderStyle]: refs.borderStyle,
3734
+ [vars$F.inputBorderColor]: refs.borderColor,
3735
+ [vars$F.inputBorderRadius]: refs.borderRadius,
3736
+ [vars$F.inputOutlineWidth]: refs.outlineWidth,
3737
+ [vars$F.inputOutlineStyle]: refs.outlineStyle,
3738
+ [vars$F.inputOutlineColor]: refs.outlineColor,
3739
+ [vars$F.inputOutlineOffset]: refs.outlineOffset,
3740
+ [vars$F.revealButtonOffset]: globalRefs$p.spacing.md,
3741
+ [vars$F.revealButtonSize]: refs.toggleButtonSize,
3742
+ [vars$F.revealButtonColor]: refs.placeholderTextColor,
3687
3743
  };
3688
3744
 
3689
3745
  var password$1 = /*#__PURE__*/Object.freeze({
3690
3746
  __proto__: null,
3691
3747
  default: password,
3692
- vars: vars$D
3748
+ vars: vars$F
3693
3749
  });
3694
3750
 
3695
- const componentName$L = getComponentName('number-field');
3751
+ const componentName$N = getComponentName('number-field');
3696
3752
 
3697
3753
  const NumberFieldClass = compose(
3698
3754
  createStyleMixin({
@@ -3718,45 +3774,45 @@ const NumberFieldClass = compose(
3718
3774
  ${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
3719
3775
  `,
3720
3776
  excludeAttrsSync: ['tabindex'],
3721
- componentName: componentName$L,
3777
+ componentName: componentName$N,
3722
3778
  })
3723
3779
  );
3724
3780
 
3725
- const vars$C = NumberFieldClass.cssVarList;
3781
+ const vars$E = NumberFieldClass.cssVarList;
3726
3782
 
3727
3783
  const numberField = {
3728
- [vars$C.hostWidth]: refs.width,
3729
- [vars$C.hostMinWidth]: refs.minWidth,
3730
- [vars$C.hostDirection]: refs.direction,
3731
- [vars$C.fontSize]: refs.fontSize,
3732
- [vars$C.fontFamily]: refs.fontFamily,
3733
- [vars$C.labelTextColor]: refs.labelTextColor,
3734
- [vars$C.errorMessageTextColor]: refs.errorMessageTextColor,
3735
- [vars$C.inputValueTextColor]: refs.valueTextColor,
3736
- [vars$C.inputPlaceholderColor]: refs.placeholderTextColor,
3737
- [vars$C.inputBorderWidth]: refs.borderWidth,
3738
- [vars$C.inputBorderStyle]: refs.borderStyle,
3739
- [vars$C.inputBorderColor]: refs.borderColor,
3740
- [vars$C.inputBorderRadius]: refs.borderRadius,
3741
- [vars$C.inputOutlineWidth]: refs.outlineWidth,
3742
- [vars$C.inputOutlineStyle]: refs.outlineStyle,
3743
- [vars$C.inputOutlineColor]: refs.outlineColor,
3744
- [vars$C.inputOutlineOffset]: refs.outlineOffset,
3745
- [vars$C.inputBackgroundColor]: refs.backgroundColor,
3746
- [vars$C.labelRequiredIndicator]: refs.requiredIndicator,
3747
- [vars$C.inputHorizontalPadding]: refs.horizontalPadding,
3748
- [vars$C.inputHeight]: refs.inputHeight,
3784
+ [vars$E.hostWidth]: refs.width,
3785
+ [vars$E.hostMinWidth]: refs.minWidth,
3786
+ [vars$E.hostDirection]: refs.direction,
3787
+ [vars$E.fontSize]: refs.fontSize,
3788
+ [vars$E.fontFamily]: refs.fontFamily,
3789
+ [vars$E.labelTextColor]: refs.labelTextColor,
3790
+ [vars$E.errorMessageTextColor]: refs.errorMessageTextColor,
3791
+ [vars$E.inputValueTextColor]: refs.valueTextColor,
3792
+ [vars$E.inputPlaceholderColor]: refs.placeholderTextColor,
3793
+ [vars$E.inputBorderWidth]: refs.borderWidth,
3794
+ [vars$E.inputBorderStyle]: refs.borderStyle,
3795
+ [vars$E.inputBorderColor]: refs.borderColor,
3796
+ [vars$E.inputBorderRadius]: refs.borderRadius,
3797
+ [vars$E.inputOutlineWidth]: refs.outlineWidth,
3798
+ [vars$E.inputOutlineStyle]: refs.outlineStyle,
3799
+ [vars$E.inputOutlineColor]: refs.outlineColor,
3800
+ [vars$E.inputOutlineOffset]: refs.outlineOffset,
3801
+ [vars$E.inputBackgroundColor]: refs.backgroundColor,
3802
+ [vars$E.labelRequiredIndicator]: refs.requiredIndicator,
3803
+ [vars$E.inputHorizontalPadding]: refs.horizontalPadding,
3804
+ [vars$E.inputHeight]: refs.inputHeight,
3749
3805
  };
3750
3806
 
3751
3807
  var numberField$1 = /*#__PURE__*/Object.freeze({
3752
3808
  __proto__: null,
3753
3809
  default: numberField,
3754
- vars: vars$C
3810
+ vars: vars$E
3755
3811
  });
3756
3812
 
3757
- const componentName$K = getComponentName('email-field');
3813
+ const componentName$M = getComponentName('email-field');
3758
3814
 
3759
- const customMixin$7 = (superclass) =>
3815
+ const customMixin$8 = (superclass) =>
3760
3816
  class EmailFieldMixinClass extends superclass {
3761
3817
  init() {
3762
3818
  super.init?.();
@@ -3770,7 +3826,7 @@ const EmailFieldClass = compose(
3770
3826
  draggableMixin,
3771
3827
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
3772
3828
  componentNameValidationMixin,
3773
- customMixin$7
3829
+ customMixin$8
3774
3830
  )(
3775
3831
  createProxy({
3776
3832
  slots: ['', 'suffix'],
@@ -3789,43 +3845,43 @@ const EmailFieldClass = compose(
3789
3845
  ${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
3790
3846
  `,
3791
3847
  excludeAttrsSync: ['tabindex'],
3792
- componentName: componentName$K,
3848
+ componentName: componentName$M,
3793
3849
  })
3794
3850
  );
3795
3851
 
3796
- const vars$B = EmailFieldClass.cssVarList;
3852
+ const vars$D = EmailFieldClass.cssVarList;
3797
3853
 
3798
3854
  const emailField = {
3799
- [vars$B.hostWidth]: refs.width,
3800
- [vars$B.hostMinWidth]: refs.minWidth,
3801
- [vars$B.hostDirection]: refs.direction,
3802
- [vars$B.fontSize]: refs.fontSize,
3803
- [vars$B.fontFamily]: refs.fontFamily,
3804
- [vars$B.labelTextColor]: refs.labelTextColor,
3805
- [vars$B.errorMessageTextColor]: refs.errorMessageTextColor,
3806
- [vars$B.inputValueTextColor]: refs.valueTextColor,
3807
- [vars$B.labelRequiredIndicator]: refs.requiredIndicator,
3808
- [vars$B.inputPlaceholderColor]: refs.placeholderTextColor,
3809
- [vars$B.inputBorderWidth]: refs.borderWidth,
3810
- [vars$B.inputBorderStyle]: refs.borderStyle,
3811
- [vars$B.inputBorderColor]: refs.borderColor,
3812
- [vars$B.inputBorderRadius]: refs.borderRadius,
3813
- [vars$B.inputOutlineWidth]: refs.outlineWidth,
3814
- [vars$B.inputOutlineStyle]: refs.outlineStyle,
3815
- [vars$B.inputOutlineColor]: refs.outlineColor,
3816
- [vars$B.inputOutlineOffset]: refs.outlineOffset,
3817
- [vars$B.inputBackgroundColor]: refs.backgroundColor,
3818
- [vars$B.inputHorizontalPadding]: refs.horizontalPadding,
3819
- [vars$B.inputHeight]: refs.inputHeight,
3855
+ [vars$D.hostWidth]: refs.width,
3856
+ [vars$D.hostMinWidth]: refs.minWidth,
3857
+ [vars$D.hostDirection]: refs.direction,
3858
+ [vars$D.fontSize]: refs.fontSize,
3859
+ [vars$D.fontFamily]: refs.fontFamily,
3860
+ [vars$D.labelTextColor]: refs.labelTextColor,
3861
+ [vars$D.errorMessageTextColor]: refs.errorMessageTextColor,
3862
+ [vars$D.inputValueTextColor]: refs.valueTextColor,
3863
+ [vars$D.labelRequiredIndicator]: refs.requiredIndicator,
3864
+ [vars$D.inputPlaceholderColor]: refs.placeholderTextColor,
3865
+ [vars$D.inputBorderWidth]: refs.borderWidth,
3866
+ [vars$D.inputBorderStyle]: refs.borderStyle,
3867
+ [vars$D.inputBorderColor]: refs.borderColor,
3868
+ [vars$D.inputBorderRadius]: refs.borderRadius,
3869
+ [vars$D.inputOutlineWidth]: refs.outlineWidth,
3870
+ [vars$D.inputOutlineStyle]: refs.outlineStyle,
3871
+ [vars$D.inputOutlineColor]: refs.outlineColor,
3872
+ [vars$D.inputOutlineOffset]: refs.outlineOffset,
3873
+ [vars$D.inputBackgroundColor]: refs.backgroundColor,
3874
+ [vars$D.inputHorizontalPadding]: refs.horizontalPadding,
3875
+ [vars$D.inputHeight]: refs.inputHeight,
3820
3876
  };
3821
3877
 
3822
3878
  var emailField$1 = /*#__PURE__*/Object.freeze({
3823
3879
  __proto__: null,
3824
3880
  default: emailField,
3825
- vars: vars$B
3881
+ vars: vars$D
3826
3882
  });
3827
3883
 
3828
- const componentName$J = getComponentName('text-area');
3884
+ const componentName$L = getComponentName('text-area');
3829
3885
 
3830
3886
  const {
3831
3887
  host: host$k,
@@ -3901,49 +3957,49 @@ const TextAreaClass = compose(
3901
3957
  ${resetInputCursor('vaadin-text-area')}
3902
3958
  `,
3903
3959
  excludeAttrsSync: ['tabindex'],
3904
- componentName: componentName$J,
3960
+ componentName: componentName$L,
3905
3961
  })
3906
3962
  );
3907
3963
 
3908
- const vars$A = TextAreaClass.cssVarList;
3964
+ const vars$C = TextAreaClass.cssVarList;
3909
3965
 
3910
3966
  const textArea = {
3911
- [vars$A.hostWidth]: refs.width,
3912
- [vars$A.hostMinWidth]: refs.minWidth,
3913
- [vars$A.hostDirection]: refs.direction,
3914
- [vars$A.fontSize]: refs.fontSize,
3915
- [vars$A.fontFamily]: refs.fontFamily,
3916
- [vars$A.labelTextColor]: refs.labelTextColor,
3917
- [vars$A.labelRequiredIndicator]: refs.requiredIndicator,
3918
- [vars$A.errorMessageTextColor]: refs.errorMessageTextColor,
3919
- [vars$A.inputBackgroundColor]: refs.backgroundColor,
3920
- [vars$A.inputValueTextColor]: refs.valueTextColor,
3921
- [vars$A.inputPlaceholderTextColor]: refs.placeholderTextColor,
3922
- [vars$A.inputBorderRadius]: refs.borderRadius,
3923
- [vars$A.inputBorderWidth]: refs.borderWidth,
3924
- [vars$A.inputBorderStyle]: refs.borderStyle,
3925
- [vars$A.inputBorderColor]: refs.borderColor,
3926
- [vars$A.inputOutlineWidth]: refs.outlineWidth,
3927
- [vars$A.inputOutlineStyle]: refs.outlineStyle,
3928
- [vars$A.inputOutlineColor]: refs.outlineColor,
3929
- [vars$A.inputOutlineOffset]: refs.outlineOffset,
3930
- [vars$A.inputResizeType]: 'vertical',
3931
- [vars$A.inputMinHeight]: '5em',
3967
+ [vars$C.hostWidth]: refs.width,
3968
+ [vars$C.hostMinWidth]: refs.minWidth,
3969
+ [vars$C.hostDirection]: refs.direction,
3970
+ [vars$C.fontSize]: refs.fontSize,
3971
+ [vars$C.fontFamily]: refs.fontFamily,
3972
+ [vars$C.labelTextColor]: refs.labelTextColor,
3973
+ [vars$C.labelRequiredIndicator]: refs.requiredIndicator,
3974
+ [vars$C.errorMessageTextColor]: refs.errorMessageTextColor,
3975
+ [vars$C.inputBackgroundColor]: refs.backgroundColor,
3976
+ [vars$C.inputValueTextColor]: refs.valueTextColor,
3977
+ [vars$C.inputPlaceholderTextColor]: refs.placeholderTextColor,
3978
+ [vars$C.inputBorderRadius]: refs.borderRadius,
3979
+ [vars$C.inputBorderWidth]: refs.borderWidth,
3980
+ [vars$C.inputBorderStyle]: refs.borderStyle,
3981
+ [vars$C.inputBorderColor]: refs.borderColor,
3982
+ [vars$C.inputOutlineWidth]: refs.outlineWidth,
3983
+ [vars$C.inputOutlineStyle]: refs.outlineStyle,
3984
+ [vars$C.inputOutlineColor]: refs.outlineColor,
3985
+ [vars$C.inputOutlineOffset]: refs.outlineOffset,
3986
+ [vars$C.inputResizeType]: 'vertical',
3987
+ [vars$C.inputMinHeight]: '5em',
3932
3988
  textAlign: {
3933
- right: { [vars$A.inputTextAlign]: 'right' },
3934
- left: { [vars$A.inputTextAlign]: 'left' },
3935
- center: { [vars$A.inputTextAlign]: 'center' },
3989
+ right: { [vars$C.inputTextAlign]: 'right' },
3990
+ left: { [vars$C.inputTextAlign]: 'left' },
3991
+ center: { [vars$C.inputTextAlign]: 'center' },
3936
3992
  },
3937
3993
 
3938
3994
  _readonly: {
3939
- [vars$A.inputResizeType]: 'none',
3995
+ [vars$C.inputResizeType]: 'none',
3940
3996
  },
3941
3997
  };
3942
3998
 
3943
3999
  var textArea$1 = /*#__PURE__*/Object.freeze({
3944
4000
  __proto__: null,
3945
4001
  default: textArea,
3946
- vars: vars$A
4002
+ vars: vars$C
3947
4003
  });
3948
4004
 
3949
4005
  const createBaseInputClass = (...args) =>
@@ -3954,9 +4010,9 @@ const createBaseInputClass = (...args) =>
3954
4010
  inputEventsDispatchingMixin
3955
4011
  )(createBaseClass(...args));
3956
4012
 
3957
- const componentName$I = getComponentName('boolean-field-internal');
4013
+ const componentName$K = getComponentName('boolean-field-internal');
3958
4014
 
3959
- createBaseInputClass({ componentName: componentName$I, baseSelector: 'div' });
4015
+ createBaseInputClass({ componentName: componentName$K, baseSelector: 'div' });
3960
4016
 
3961
4017
  const booleanFieldMixin = (superclass) =>
3962
4018
  class BooleanFieldMixinClass extends superclass {
@@ -3965,14 +4021,14 @@ const booleanFieldMixin = (superclass) =>
3965
4021
 
3966
4022
  const template = document.createElement('template');
3967
4023
  template.innerHTML = `
3968
- <${componentName$I}
4024
+ <${componentName$K}
3969
4025
  tabindex="-1"
3970
4026
  slot="input"
3971
- ></${componentName$I}>
4027
+ ></${componentName$K}>
3972
4028
  `;
3973
4029
 
3974
4030
  this.baseElement.appendChild(template.content.cloneNode(true));
3975
- this.inputElement = this.shadowRoot.querySelector(componentName$I);
4031
+ this.inputElement = this.shadowRoot.querySelector(componentName$K);
3976
4032
  this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
3977
4033
 
3978
4034
  forwardAttrs(this, this.inputElement, {
@@ -4042,7 +4098,7 @@ descope-boolean-field-internal {
4042
4098
  }
4043
4099
  `;
4044
4100
 
4045
- const componentName$H = getComponentName('checkbox');
4101
+ const componentName$J = getComponentName('checkbox');
4046
4102
 
4047
4103
  const {
4048
4104
  host: host$j,
@@ -4148,51 +4204,51 @@ const CheckboxClass = compose(
4148
4204
  }
4149
4205
  `,
4150
4206
  excludeAttrsSync: ['label', 'tabindex'],
4151
- componentName: componentName$H,
4207
+ componentName: componentName$J,
4152
4208
  })
4153
4209
  );
4154
4210
 
4155
- const vars$z = CheckboxClass.cssVarList;
4211
+ const vars$B = CheckboxClass.cssVarList;
4156
4212
  const checkboxSize = '1.35em';
4157
4213
 
4158
4214
  const checkbox = {
4159
- [vars$z.hostWidth]: refs.width,
4160
- [vars$z.hostDirection]: refs.direction,
4161
- [vars$z.fontSize]: refs.fontSize,
4162
- [vars$z.fontFamily]: refs.fontFamily,
4163
- [vars$z.labelTextColor]: refs.labelTextColor,
4164
- [vars$z.labelRequiredIndicator]: refs.requiredIndicator,
4165
- [vars$z.labelFontWeight]: '400',
4166
- [vars$z.labelLineHeight]: checkboxSize,
4167
- [vars$z.labelSpacing]: '1em',
4168
- [vars$z.errorMessageTextColor]: refs.errorMessageTextColor,
4169
- [vars$z.inputOutlineWidth]: refs.outlineWidth,
4170
- [vars$z.inputOutlineOffset]: refs.outlineOffset,
4171
- [vars$z.inputOutlineColor]: refs.outlineColor,
4172
- [vars$z.inputOutlineStyle]: refs.outlineStyle,
4173
- [vars$z.inputBorderRadius]: refs.borderRadius,
4174
- [vars$z.inputBorderColor]: refs.borderColor,
4175
- [vars$z.inputBorderWidth]: refs.borderWidth,
4176
- [vars$z.inputBorderStyle]: refs.borderStyle,
4177
- [vars$z.inputBackgroundColor]: refs.backgroundColor,
4178
- [vars$z.inputSize]: checkboxSize,
4215
+ [vars$B.hostWidth]: refs.width,
4216
+ [vars$B.hostDirection]: refs.direction,
4217
+ [vars$B.fontSize]: refs.fontSize,
4218
+ [vars$B.fontFamily]: refs.fontFamily,
4219
+ [vars$B.labelTextColor]: refs.labelTextColor,
4220
+ [vars$B.labelRequiredIndicator]: refs.requiredIndicator,
4221
+ [vars$B.labelFontWeight]: '400',
4222
+ [vars$B.labelLineHeight]: checkboxSize,
4223
+ [vars$B.labelSpacing]: '1em',
4224
+ [vars$B.errorMessageTextColor]: refs.errorMessageTextColor,
4225
+ [vars$B.inputOutlineWidth]: refs.outlineWidth,
4226
+ [vars$B.inputOutlineOffset]: refs.outlineOffset,
4227
+ [vars$B.inputOutlineColor]: refs.outlineColor,
4228
+ [vars$B.inputOutlineStyle]: refs.outlineStyle,
4229
+ [vars$B.inputBorderRadius]: refs.borderRadius,
4230
+ [vars$B.inputBorderColor]: refs.borderColor,
4231
+ [vars$B.inputBorderWidth]: refs.borderWidth,
4232
+ [vars$B.inputBorderStyle]: refs.borderStyle,
4233
+ [vars$B.inputBackgroundColor]: refs.backgroundColor,
4234
+ [vars$B.inputSize]: checkboxSize,
4179
4235
 
4180
4236
  _checked: {
4181
- [vars$z.inputValueTextColor]: refs.valueTextColor,
4237
+ [vars$B.inputValueTextColor]: refs.valueTextColor,
4182
4238
  },
4183
4239
 
4184
4240
  _disabled: {
4185
- [vars$z.labelTextColor]: refs.labelTextColor,
4241
+ [vars$B.labelTextColor]: refs.labelTextColor,
4186
4242
  },
4187
4243
  };
4188
4244
 
4189
4245
  var checkbox$1 = /*#__PURE__*/Object.freeze({
4190
4246
  __proto__: null,
4191
4247
  default: checkbox,
4192
- vars: vars$z
4248
+ vars: vars$B
4193
4249
  });
4194
4250
 
4195
- const componentName$G = getComponentName('switch-toggle');
4251
+ const componentName$I = getComponentName('switch-toggle');
4196
4252
 
4197
4253
  const {
4198
4254
  host: host$i,
@@ -4324,82 +4380,82 @@ const SwitchToggleClass = compose(
4324
4380
  }
4325
4381
  `,
4326
4382
  excludeAttrsSync: ['label', 'tabindex'],
4327
- componentName: componentName$G,
4383
+ componentName: componentName$I,
4328
4384
  })
4329
4385
  );
4330
4386
 
4331
4387
  const knobMargin = '2px';
4332
4388
  const checkboxHeight = '1.25em';
4333
4389
 
4334
- const globalRefs$m = getThemeRefs(globals);
4335
- const vars$y = SwitchToggleClass.cssVarList;
4390
+ const globalRefs$o = getThemeRefs(globals);
4391
+ const vars$A = SwitchToggleClass.cssVarList;
4336
4392
 
4337
4393
  const switchToggle = {
4338
- [vars$y.hostWidth]: refs.width,
4339
- [vars$y.hostDirection]: refs.direction,
4340
- [vars$y.fontSize]: refs.fontSize,
4341
- [vars$y.fontFamily]: refs.fontFamily,
4342
-
4343
- [vars$y.inputOutlineWidth]: refs.outlineWidth,
4344
- [vars$y.inputOutlineOffset]: refs.outlineOffset,
4345
- [vars$y.inputOutlineColor]: refs.outlineColor,
4346
- [vars$y.inputOutlineStyle]: refs.outlineStyle,
4347
-
4348
- [vars$y.trackBorderStyle]: refs.borderStyle,
4349
- [vars$y.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
4350
- [vars$y.trackBorderColor]: refs.borderColor,
4351
- [vars$y.trackBackgroundColor]: refs.backgroundColor,
4352
- [vars$y.trackBorderRadius]: globalRefs$m.radius.md,
4353
- [vars$y.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
4354
- [vars$y.trackHeight]: checkboxHeight,
4355
-
4356
- [vars$y.knobSize]: `calc(1em - ${knobMargin})`,
4357
- [vars$y.knobRadius]: '50%',
4358
- [vars$y.knobTopOffset]: '1px',
4359
- [vars$y.knobLeftOffset]: knobMargin,
4360
- [vars$y.knobColor]: refs.labelTextColor,
4361
- [vars$y.knobTransitionDuration]: '0.3s',
4362
-
4363
- [vars$y.labelTextColor]: refs.labelTextColor,
4364
- [vars$y.labelFontWeight]: '400',
4365
- [vars$y.labelLineHeight]: '1.35em',
4366
- [vars$y.labelSpacing]: '1em',
4367
- [vars$y.labelRequiredIndicator]: refs.requiredIndicator,
4368
- [vars$y.errorMessageTextColor]: refs.errorMessageTextColor,
4394
+ [vars$A.hostWidth]: refs.width,
4395
+ [vars$A.hostDirection]: refs.direction,
4396
+ [vars$A.fontSize]: refs.fontSize,
4397
+ [vars$A.fontFamily]: refs.fontFamily,
4398
+
4399
+ [vars$A.inputOutlineWidth]: refs.outlineWidth,
4400
+ [vars$A.inputOutlineOffset]: refs.outlineOffset,
4401
+ [vars$A.inputOutlineColor]: refs.outlineColor,
4402
+ [vars$A.inputOutlineStyle]: refs.outlineStyle,
4403
+
4404
+ [vars$A.trackBorderStyle]: refs.borderStyle,
4405
+ [vars$A.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
4406
+ [vars$A.trackBorderColor]: refs.borderColor,
4407
+ [vars$A.trackBackgroundColor]: refs.backgroundColor,
4408
+ [vars$A.trackBorderRadius]: globalRefs$o.radius.md,
4409
+ [vars$A.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
4410
+ [vars$A.trackHeight]: checkboxHeight,
4411
+
4412
+ [vars$A.knobSize]: `calc(1em - ${knobMargin})`,
4413
+ [vars$A.knobRadius]: '50%',
4414
+ [vars$A.knobTopOffset]: '1px',
4415
+ [vars$A.knobLeftOffset]: knobMargin,
4416
+ [vars$A.knobColor]: refs.labelTextColor,
4417
+ [vars$A.knobTransitionDuration]: '0.3s',
4418
+
4419
+ [vars$A.labelTextColor]: refs.labelTextColor,
4420
+ [vars$A.labelFontWeight]: '400',
4421
+ [vars$A.labelLineHeight]: '1.35em',
4422
+ [vars$A.labelSpacing]: '1em',
4423
+ [vars$A.labelRequiredIndicator]: refs.requiredIndicator,
4424
+ [vars$A.errorMessageTextColor]: refs.errorMessageTextColor,
4369
4425
 
4370
4426
  _checked: {
4371
- [vars$y.trackBorderColor]: refs.borderColor,
4372
- [vars$y.knobLeftOffset]: `calc(100% - var(${vars$y.knobSize}) - ${knobMargin})`,
4373
- [vars$y.knobColor]: refs.valueTextColor,
4374
- [vars$y.knobTextColor]: refs.valueTextColor,
4427
+ [vars$A.trackBorderColor]: refs.borderColor,
4428
+ [vars$A.knobLeftOffset]: `calc(100% - var(${vars$A.knobSize}) - ${knobMargin})`,
4429
+ [vars$A.knobColor]: refs.valueTextColor,
4430
+ [vars$A.knobTextColor]: refs.valueTextColor,
4375
4431
  },
4376
4432
 
4377
4433
  _disabled: {
4378
- [vars$y.knobColor]: globalRefs$m.colors.surface.light,
4379
- [vars$y.trackBorderColor]: globalRefs$m.colors.surface.light,
4380
- [vars$y.trackBackgroundColor]: globalRefs$m.colors.surface.main,
4381
- [vars$y.labelTextColor]: refs.labelTextColor,
4434
+ [vars$A.knobColor]: globalRefs$o.colors.surface.light,
4435
+ [vars$A.trackBorderColor]: globalRefs$o.colors.surface.light,
4436
+ [vars$A.trackBackgroundColor]: globalRefs$o.colors.surface.main,
4437
+ [vars$A.labelTextColor]: refs.labelTextColor,
4382
4438
  _checked: {
4383
- [vars$y.knobColor]: globalRefs$m.colors.surface.light,
4384
- [vars$y.trackBackgroundColor]: globalRefs$m.colors.surface.main,
4439
+ [vars$A.knobColor]: globalRefs$o.colors.surface.light,
4440
+ [vars$A.trackBackgroundColor]: globalRefs$o.colors.surface.main,
4385
4441
  },
4386
4442
  },
4387
4443
 
4388
4444
  _invalid: {
4389
- [vars$y.trackBorderColor]: globalRefs$m.colors.error.main,
4390
- [vars$y.knobColor]: globalRefs$m.colors.error.main,
4445
+ [vars$A.trackBorderColor]: globalRefs$o.colors.error.main,
4446
+ [vars$A.knobColor]: globalRefs$o.colors.error.main,
4391
4447
  },
4392
4448
  };
4393
4449
 
4394
4450
  var switchToggle$1 = /*#__PURE__*/Object.freeze({
4395
4451
  __proto__: null,
4396
4452
  default: switchToggle,
4397
- vars: vars$y
4453
+ vars: vars$A
4398
4454
  });
4399
4455
 
4400
- const componentName$F = getComponentName('container');
4456
+ const componentName$H = getComponentName('container');
4401
4457
 
4402
- class RawContainer extends createBaseClass({ componentName: componentName$F, baseSelector: 'slot' }) {
4458
+ class RawContainer extends createBaseClass({ componentName: componentName$H, baseSelector: 'slot' }) {
4403
4459
  constructor() {
4404
4460
  super();
4405
4461
 
@@ -4452,7 +4508,7 @@ const ContainerClass = compose(
4452
4508
  componentNameValidationMixin
4453
4509
  )(RawContainer);
4454
4510
 
4455
- const globalRefs$l = getThemeRefs(globals);
4511
+ const globalRefs$n = getThemeRefs(globals);
4456
4512
 
4457
4513
  const compVars$4 = ContainerClass.cssVarList;
4458
4514
 
@@ -4474,7 +4530,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
4474
4530
  horizontalAlignment,
4475
4531
  shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
4476
4532
  },
4477
- componentName$F
4533
+ componentName$H
4478
4534
  );
4479
4535
 
4480
4536
  const { shadowColor: shadowColor$1 } = helperRefs$2;
@@ -4484,10 +4540,10 @@ const container = {
4484
4540
 
4485
4541
  [compVars$4.hostWidth]: '100%',
4486
4542
  [compVars$4.boxShadow]: 'none',
4487
- [compVars$4.backgroundColor]: globalRefs$l.colors.surface.main,
4488
- [compVars$4.color]: globalRefs$l.colors.surface.contrast,
4543
+ [compVars$4.backgroundColor]: globalRefs$n.colors.surface.main,
4544
+ [compVars$4.color]: globalRefs$n.colors.surface.contrast,
4489
4545
  [compVars$4.borderRadius]: '0px',
4490
- [compVars$4.hostDirection]: globalRefs$l.direction,
4546
+ [compVars$4.hostDirection]: globalRefs$n.direction,
4491
4547
 
4492
4548
  verticalPadding: {
4493
4549
  sm: { [compVars$4.verticalPadding]: '5px' },
@@ -4533,34 +4589,34 @@ const container = {
4533
4589
 
4534
4590
  shadow: {
4535
4591
  sm: {
4536
- [compVars$4.boxShadow]: `${globalRefs$l.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$l.shadow.narrow.sm} ${shadowColor$1}`,
4592
+ [compVars$4.boxShadow]: `${globalRefs$n.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$n.shadow.narrow.sm} ${shadowColor$1}`,
4537
4593
  },
4538
4594
  md: {
4539
- [compVars$4.boxShadow]: `${globalRefs$l.shadow.wide.md} ${shadowColor$1}, ${globalRefs$l.shadow.narrow.md} ${shadowColor$1}`,
4595
+ [compVars$4.boxShadow]: `${globalRefs$n.shadow.wide.md} ${shadowColor$1}, ${globalRefs$n.shadow.narrow.md} ${shadowColor$1}`,
4540
4596
  },
4541
4597
  lg: {
4542
- [compVars$4.boxShadow]: `${globalRefs$l.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$l.shadow.narrow.lg} ${shadowColor$1}`,
4598
+ [compVars$4.boxShadow]: `${globalRefs$n.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$n.shadow.narrow.lg} ${shadowColor$1}`,
4543
4599
  },
4544
4600
  xl: {
4545
- [compVars$4.boxShadow]: `${globalRefs$l.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$l.shadow.narrow.xl} ${shadowColor$1}`,
4601
+ [compVars$4.boxShadow]: `${globalRefs$n.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$n.shadow.narrow.xl} ${shadowColor$1}`,
4546
4602
  },
4547
4603
  '2xl': {
4548
4604
  [helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
4549
- [compVars$4.boxShadow]: `${globalRefs$l.shadow.wide['2xl']} ${shadowColor$1}`,
4605
+ [compVars$4.boxShadow]: `${globalRefs$n.shadow.wide['2xl']} ${shadowColor$1}`,
4550
4606
  },
4551
4607
  },
4552
4608
 
4553
4609
  borderRadius: {
4554
- sm: { [compVars$4.borderRadius]: globalRefs$l.radius.sm },
4555
- md: { [compVars$4.borderRadius]: globalRefs$l.radius.md },
4556
- lg: { [compVars$4.borderRadius]: globalRefs$l.radius.lg },
4557
- xl: { [compVars$4.borderRadius]: globalRefs$l.radius.xl },
4558
- '2xl': { [compVars$4.borderRadius]: globalRefs$l.radius['2xl'] },
4559
- '3xl': { [compVars$4.borderRadius]: globalRefs$l.radius['3xl'] },
4610
+ sm: { [compVars$4.borderRadius]: globalRefs$n.radius.sm },
4611
+ md: { [compVars$4.borderRadius]: globalRefs$n.radius.md },
4612
+ lg: { [compVars$4.borderRadius]: globalRefs$n.radius.lg },
4613
+ xl: { [compVars$4.borderRadius]: globalRefs$n.radius.xl },
4614
+ '2xl': { [compVars$4.borderRadius]: globalRefs$n.radius['2xl'] },
4615
+ '3xl': { [compVars$4.borderRadius]: globalRefs$n.radius['3xl'] },
4560
4616
  },
4561
4617
  };
4562
4618
 
4563
- const vars$x = {
4619
+ const vars$z = {
4564
4620
  ...compVars$4,
4565
4621
  ...helperVars$2,
4566
4622
  };
@@ -4568,7 +4624,7 @@ const vars$x = {
4568
4624
  var container$1 = /*#__PURE__*/Object.freeze({
4569
4625
  __proto__: null,
4570
4626
  default: container,
4571
- vars: vars$x
4627
+ vars: vars$z
4572
4628
  });
4573
4629
 
4574
4630
  const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
@@ -4621,69 +4677,69 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
4621
4677
  return CssVarImageClass;
4622
4678
  };
4623
4679
 
4624
- const componentName$E = getComponentName('logo');
4680
+ const componentName$G = getComponentName('logo');
4625
4681
 
4626
4682
  const LogoClass = createCssVarImageClass({
4627
- componentName: componentName$E,
4683
+ componentName: componentName$G,
4628
4684
  varName: 'url',
4629
4685
  fallbackVarName: 'fallbackUrl',
4630
4686
  });
4631
4687
 
4632
- const vars$w = LogoClass.cssVarList;
4688
+ const vars$y = LogoClass.cssVarList;
4633
4689
 
4634
4690
  const logo$2 = {
4635
- [vars$w.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
4691
+ [vars$y.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
4636
4692
  };
4637
4693
 
4638
4694
  var logo$3 = /*#__PURE__*/Object.freeze({
4639
4695
  __proto__: null,
4640
4696
  default: logo$2,
4641
- vars: vars$w
4697
+ vars: vars$y
4642
4698
  });
4643
4699
 
4644
- const componentName$D = getComponentName('totp-image');
4700
+ const componentName$F = getComponentName('totp-image');
4645
4701
 
4646
4702
  const TotpImageClass = createCssVarImageClass({
4647
- componentName: componentName$D,
4703
+ componentName: componentName$F,
4648
4704
  varName: 'url',
4649
4705
  fallbackVarName: 'fallbackUrl',
4650
4706
  });
4651
4707
 
4652
- const vars$v = TotpImageClass.cssVarList;
4708
+ const vars$x = TotpImageClass.cssVarList;
4653
4709
 
4654
4710
  const logo$1 = {
4655
- [vars$v.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
4711
+ [vars$x.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
4656
4712
  };
4657
4713
 
4658
4714
  var totpImage = /*#__PURE__*/Object.freeze({
4659
4715
  __proto__: null,
4660
4716
  default: logo$1,
4661
- vars: vars$v
4717
+ vars: vars$x
4662
4718
  });
4663
4719
 
4664
- const componentName$C = getComponentName('notp-image');
4720
+ const componentName$E = getComponentName('notp-image');
4665
4721
 
4666
4722
  const NotpImageClass = createCssVarImageClass({
4667
- componentName: componentName$C,
4723
+ componentName: componentName$E,
4668
4724
  varName: 'url',
4669
4725
  fallbackVarName: 'fallbackUrl',
4670
4726
  });
4671
4727
 
4672
- const vars$u = NotpImageClass.cssVarList;
4728
+ const vars$w = NotpImageClass.cssVarList;
4673
4729
 
4674
4730
  const logo = {
4675
- [vars$u.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
4731
+ [vars$w.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
4676
4732
  };
4677
4733
 
4678
4734
  var notpImage = /*#__PURE__*/Object.freeze({
4679
4735
  __proto__: null,
4680
4736
  default: logo,
4681
- vars: vars$u
4737
+ vars: vars$w
4682
4738
  });
4683
4739
 
4684
- const componentName$B = getComponentName('text');
4740
+ const componentName$D = getComponentName('text');
4685
4741
 
4686
- class RawText extends createBaseClass({ componentName: componentName$B, baseSelector: ':host > slot' }) {
4742
+ class RawText extends createBaseClass({ componentName: componentName$D, baseSelector: ':host > slot' }) {
4687
4743
  constructor() {
4688
4744
  super();
4689
4745
 
@@ -4740,94 +4796,94 @@ const TextClass = compose(
4740
4796
  componentNameValidationMixin
4741
4797
  )(RawText);
4742
4798
 
4743
- const globalRefs$k = getThemeRefs(globals);
4744
- const vars$t = TextClass.cssVarList;
4799
+ const globalRefs$m = getThemeRefs(globals);
4800
+ const vars$v = TextClass.cssVarList;
4745
4801
 
4746
4802
  const text$2 = {
4747
- [vars$t.hostDirection]: globalRefs$k.direction,
4748
- [vars$t.textLineHeight]: '1.35em',
4749
- [vars$t.textAlign]: 'left',
4750
- [vars$t.textColor]: globalRefs$k.colors.surface.dark,
4803
+ [vars$v.hostDirection]: globalRefs$m.direction,
4804
+ [vars$v.textLineHeight]: '1.35em',
4805
+ [vars$v.textAlign]: 'left',
4806
+ [vars$v.textColor]: globalRefs$m.colors.surface.dark,
4751
4807
  variant: {
4752
4808
  h1: {
4753
- [vars$t.fontSize]: globalRefs$k.typography.h1.size,
4754
- [vars$t.fontWeight]: globalRefs$k.typography.h1.weight,
4755
- [vars$t.fontFamily]: globalRefs$k.typography.h1.font,
4809
+ [vars$v.fontSize]: globalRefs$m.typography.h1.size,
4810
+ [vars$v.fontWeight]: globalRefs$m.typography.h1.weight,
4811
+ [vars$v.fontFamily]: globalRefs$m.typography.h1.font,
4756
4812
  },
4757
4813
  h2: {
4758
- [vars$t.fontSize]: globalRefs$k.typography.h2.size,
4759
- [vars$t.fontWeight]: globalRefs$k.typography.h2.weight,
4760
- [vars$t.fontFamily]: globalRefs$k.typography.h2.font,
4814
+ [vars$v.fontSize]: globalRefs$m.typography.h2.size,
4815
+ [vars$v.fontWeight]: globalRefs$m.typography.h2.weight,
4816
+ [vars$v.fontFamily]: globalRefs$m.typography.h2.font,
4761
4817
  },
4762
4818
  h3: {
4763
- [vars$t.fontSize]: globalRefs$k.typography.h3.size,
4764
- [vars$t.fontWeight]: globalRefs$k.typography.h3.weight,
4765
- [vars$t.fontFamily]: globalRefs$k.typography.h3.font,
4819
+ [vars$v.fontSize]: globalRefs$m.typography.h3.size,
4820
+ [vars$v.fontWeight]: globalRefs$m.typography.h3.weight,
4821
+ [vars$v.fontFamily]: globalRefs$m.typography.h3.font,
4766
4822
  },
4767
4823
  subtitle1: {
4768
- [vars$t.fontSize]: globalRefs$k.typography.subtitle1.size,
4769
- [vars$t.fontWeight]: globalRefs$k.typography.subtitle1.weight,
4770
- [vars$t.fontFamily]: globalRefs$k.typography.subtitle1.font,
4824
+ [vars$v.fontSize]: globalRefs$m.typography.subtitle1.size,
4825
+ [vars$v.fontWeight]: globalRefs$m.typography.subtitle1.weight,
4826
+ [vars$v.fontFamily]: globalRefs$m.typography.subtitle1.font,
4771
4827
  },
4772
4828
  subtitle2: {
4773
- [vars$t.fontSize]: globalRefs$k.typography.subtitle2.size,
4774
- [vars$t.fontWeight]: globalRefs$k.typography.subtitle2.weight,
4775
- [vars$t.fontFamily]: globalRefs$k.typography.subtitle2.font,
4829
+ [vars$v.fontSize]: globalRefs$m.typography.subtitle2.size,
4830
+ [vars$v.fontWeight]: globalRefs$m.typography.subtitle2.weight,
4831
+ [vars$v.fontFamily]: globalRefs$m.typography.subtitle2.font,
4776
4832
  },
4777
4833
  body1: {
4778
- [vars$t.fontSize]: globalRefs$k.typography.body1.size,
4779
- [vars$t.fontWeight]: globalRefs$k.typography.body1.weight,
4780
- [vars$t.fontFamily]: globalRefs$k.typography.body1.font,
4834
+ [vars$v.fontSize]: globalRefs$m.typography.body1.size,
4835
+ [vars$v.fontWeight]: globalRefs$m.typography.body1.weight,
4836
+ [vars$v.fontFamily]: globalRefs$m.typography.body1.font,
4781
4837
  },
4782
4838
  body2: {
4783
- [vars$t.fontSize]: globalRefs$k.typography.body2.size,
4784
- [vars$t.fontWeight]: globalRefs$k.typography.body2.weight,
4785
- [vars$t.fontFamily]: globalRefs$k.typography.body2.font,
4839
+ [vars$v.fontSize]: globalRefs$m.typography.body2.size,
4840
+ [vars$v.fontWeight]: globalRefs$m.typography.body2.weight,
4841
+ [vars$v.fontFamily]: globalRefs$m.typography.body2.font,
4786
4842
  },
4787
4843
  },
4788
4844
 
4789
4845
  mode: {
4790
4846
  primary: {
4791
- [vars$t.textColor]: globalRefs$k.colors.surface.contrast,
4847
+ [vars$v.textColor]: globalRefs$m.colors.surface.contrast,
4792
4848
  },
4793
4849
  secondary: {
4794
- [vars$t.textColor]: globalRefs$k.colors.surface.dark,
4850
+ [vars$v.textColor]: globalRefs$m.colors.surface.dark,
4795
4851
  },
4796
4852
  error: {
4797
- [vars$t.textColor]: globalRefs$k.colors.error.main,
4853
+ [vars$v.textColor]: globalRefs$m.colors.error.main,
4798
4854
  },
4799
4855
  success: {
4800
- [vars$t.textColor]: globalRefs$k.colors.success.main,
4856
+ [vars$v.textColor]: globalRefs$m.colors.success.main,
4801
4857
  },
4802
4858
  },
4803
4859
 
4804
4860
  textAlign: {
4805
- right: { [vars$t.textAlign]: 'right' },
4806
- left: { [vars$t.textAlign]: 'left' },
4807
- center: { [vars$t.textAlign]: 'center' },
4861
+ right: { [vars$v.textAlign]: 'right' },
4862
+ left: { [vars$v.textAlign]: 'left' },
4863
+ center: { [vars$v.textAlign]: 'center' },
4808
4864
  },
4809
4865
 
4810
4866
  _fullWidth: {
4811
- [vars$t.hostWidth]: '100%',
4867
+ [vars$v.hostWidth]: '100%',
4812
4868
  },
4813
4869
 
4814
4870
  _italic: {
4815
- [vars$t.fontStyle]: 'italic',
4871
+ [vars$v.fontStyle]: 'italic',
4816
4872
  },
4817
4873
 
4818
4874
  _uppercase: {
4819
- [vars$t.textTransform]: 'uppercase',
4875
+ [vars$v.textTransform]: 'uppercase',
4820
4876
  },
4821
4877
 
4822
4878
  _lowercase: {
4823
- [vars$t.textTransform]: 'lowercase',
4879
+ [vars$v.textTransform]: 'lowercase',
4824
4880
  },
4825
4881
  };
4826
4882
 
4827
4883
  var text$3 = /*#__PURE__*/Object.freeze({
4828
4884
  __proto__: null,
4829
4885
  default: text$2,
4830
- vars: vars$t
4886
+ vars: vars$v
4831
4887
  });
4832
4888
 
4833
4889
  const textRuleSet = {
@@ -4844,9 +4900,9 @@ const textRuleSet = {
4844
4900
  },
4845
4901
  };
4846
4902
 
4847
- const componentName$A = getComponentName('enriched-text');
4903
+ const componentName$C = getComponentName('enriched-text');
4848
4904
 
4849
- let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName: componentName$A, baseSelector: ':host > div' }) {
4905
+ let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName: componentName$C, baseSelector: ':host > div' }) {
4850
4906
  #origLinkRenderer;
4851
4907
 
4852
4908
  constructor() {
@@ -5007,9 +5063,9 @@ const EnrichedTextClass = compose(
5007
5063
  componentNameValidationMixin
5008
5064
  )(EnrichedText$2);
5009
5065
 
5010
- const componentName$z = getComponentName('link');
5066
+ const componentName$B = getComponentName('link');
5011
5067
 
5012
- class RawLink extends createBaseClass({ componentName: componentName$z, baseSelector: ':host a' }) {
5068
+ class RawLink extends createBaseClass({ componentName: componentName$B, baseSelector: ':host a' }) {
5013
5069
  constructor() {
5014
5070
  super();
5015
5071
 
@@ -5075,120 +5131,120 @@ const LinkClass = compose(
5075
5131
  componentNameValidationMixin
5076
5132
  )(RawLink);
5077
5133
 
5078
- const globalRefs$j = getThemeRefs(globals);
5079
- const vars$s = EnrichedTextClass.cssVarList;
5134
+ const globalRefs$l = getThemeRefs(globals);
5135
+ const vars$u = EnrichedTextClass.cssVarList;
5080
5136
 
5081
5137
  const EnrichedText = {
5082
- [vars$s.hostDirection]: globalRefs$j.direction,
5138
+ [vars$u.hostDirection]: globalRefs$l.direction,
5083
5139
 
5084
- [vars$s.fontSize]: globalRefs$j.typography.body1.size,
5085
- [vars$s.fontWeight]: globalRefs$j.typography.body1.weight,
5086
- [vars$s.fontFamily]: globalRefs$j.typography.body1.font,
5140
+ [vars$u.fontSize]: globalRefs$l.typography.body1.size,
5141
+ [vars$u.fontWeight]: globalRefs$l.typography.body1.weight,
5142
+ [vars$u.fontFamily]: globalRefs$l.typography.body1.font,
5087
5143
 
5088
- [vars$s.textLineHeight]: '1.35em',
5089
- [vars$s.textAlign]: 'left',
5090
- [vars$s.textColor]: globalRefs$j.colors.surface.dark,
5144
+ [vars$u.textLineHeight]: '1.35em',
5145
+ [vars$u.textAlign]: 'left',
5146
+ [vars$u.textColor]: globalRefs$l.colors.surface.dark,
5091
5147
 
5092
- [vars$s.linkColor]: `var(${LinkClass.cssVarList.textColor})`,
5148
+ [vars$u.linkColor]: `var(${LinkClass.cssVarList.textColor})`,
5093
5149
 
5094
5150
  mode: {
5095
5151
  primary: {
5096
- [vars$s.textColor]: globalRefs$j.colors.surface.contrast,
5152
+ [vars$u.textColor]: globalRefs$l.colors.surface.contrast,
5097
5153
  },
5098
5154
  secondary: {
5099
- [vars$s.textColor]: globalRefs$j.colors.surface.dark,
5155
+ [vars$u.textColor]: globalRefs$l.colors.surface.dark,
5100
5156
  },
5101
5157
  error: {
5102
- [vars$s.textColor]: globalRefs$j.colors.error.main,
5158
+ [vars$u.textColor]: globalRefs$l.colors.error.main,
5103
5159
  },
5104
5160
  success: {
5105
- [vars$s.textColor]: globalRefs$j.colors.success.main,
5161
+ [vars$u.textColor]: globalRefs$l.colors.success.main,
5106
5162
  },
5107
5163
  },
5108
5164
 
5109
5165
  variant: {
5110
5166
  h1: {
5111
- [vars$s.fontSize]: globalRefs$j.typography.h1.size,
5112
- [vars$s.fontWeight]: globalRefs$j.typography.h1.weight,
5113
- [vars$s.fontFamily]: globalRefs$j.typography.h1.font,
5167
+ [vars$u.fontSize]: globalRefs$l.typography.h1.size,
5168
+ [vars$u.fontWeight]: globalRefs$l.typography.h1.weight,
5169
+ [vars$u.fontFamily]: globalRefs$l.typography.h1.font,
5114
5170
  },
5115
5171
  h2: {
5116
- [vars$s.fontSize]: globalRefs$j.typography.h2.size,
5117
- [vars$s.fontWeight]: globalRefs$j.typography.h2.weight,
5118
- [vars$s.fontFamily]: globalRefs$j.typography.h2.font,
5172
+ [vars$u.fontSize]: globalRefs$l.typography.h2.size,
5173
+ [vars$u.fontWeight]: globalRefs$l.typography.h2.weight,
5174
+ [vars$u.fontFamily]: globalRefs$l.typography.h2.font,
5119
5175
  },
5120
5176
  h3: {
5121
- [vars$s.fontSize]: globalRefs$j.typography.h3.size,
5122
- [vars$s.fontWeight]: globalRefs$j.typography.h3.weight,
5123
- [vars$s.fontFamily]: globalRefs$j.typography.h3.font,
5177
+ [vars$u.fontSize]: globalRefs$l.typography.h3.size,
5178
+ [vars$u.fontWeight]: globalRefs$l.typography.h3.weight,
5179
+ [vars$u.fontFamily]: globalRefs$l.typography.h3.font,
5124
5180
  },
5125
5181
  subtitle1: {
5126
- [vars$s.fontSize]: globalRefs$j.typography.subtitle1.size,
5127
- [vars$s.fontWeight]: globalRefs$j.typography.subtitle1.weight,
5128
- [vars$s.fontFamily]: globalRefs$j.typography.subtitle1.font,
5182
+ [vars$u.fontSize]: globalRefs$l.typography.subtitle1.size,
5183
+ [vars$u.fontWeight]: globalRefs$l.typography.subtitle1.weight,
5184
+ [vars$u.fontFamily]: globalRefs$l.typography.subtitle1.font,
5129
5185
  },
5130
5186
  subtitle2: {
5131
- [vars$s.fontSize]: globalRefs$j.typography.subtitle2.size,
5132
- [vars$s.fontWeight]: globalRefs$j.typography.subtitle2.weight,
5133
- [vars$s.fontFamily]: globalRefs$j.typography.subtitle2.font,
5187
+ [vars$u.fontSize]: globalRefs$l.typography.subtitle2.size,
5188
+ [vars$u.fontWeight]: globalRefs$l.typography.subtitle2.weight,
5189
+ [vars$u.fontFamily]: globalRefs$l.typography.subtitle2.font,
5134
5190
  },
5135
5191
  body1: {
5136
- [vars$s.fontSize]: globalRefs$j.typography.body1.size,
5137
- [vars$s.fontWeight]: globalRefs$j.typography.body1.weight,
5138
- [vars$s.fontFamily]: globalRefs$j.typography.body1.font,
5192
+ [vars$u.fontSize]: globalRefs$l.typography.body1.size,
5193
+ [vars$u.fontWeight]: globalRefs$l.typography.body1.weight,
5194
+ [vars$u.fontFamily]: globalRefs$l.typography.body1.font,
5139
5195
  },
5140
5196
  body2: {
5141
- [vars$s.fontSize]: globalRefs$j.typography.body2.size,
5142
- [vars$s.fontWeight]: globalRefs$j.typography.body2.weight,
5143
- [vars$s.fontFamily]: globalRefs$j.typography.body2.font,
5197
+ [vars$u.fontSize]: globalRefs$l.typography.body2.size,
5198
+ [vars$u.fontWeight]: globalRefs$l.typography.body2.weight,
5199
+ [vars$u.fontFamily]: globalRefs$l.typography.body2.font,
5144
5200
  },
5145
5201
  },
5146
5202
 
5147
5203
  textAlign: {
5148
- right: { [vars$s.textAlign]: 'right' },
5149
- left: { [vars$s.textAlign]: 'left' },
5150
- center: { [vars$s.textAlign]: 'center' },
5204
+ right: { [vars$u.textAlign]: 'right' },
5205
+ left: { [vars$u.textAlign]: 'left' },
5206
+ center: { [vars$u.textAlign]: 'center' },
5151
5207
  },
5152
5208
 
5153
5209
  _fullWidth: {
5154
- [vars$s.hostWidth]: '100%',
5210
+ [vars$u.hostWidth]: '100%',
5155
5211
  },
5156
5212
  };
5157
5213
 
5158
5214
  var EnrichedText$1 = /*#__PURE__*/Object.freeze({
5159
5215
  __proto__: null,
5160
5216
  default: EnrichedText,
5161
- vars: vars$s
5217
+ vars: vars$u
5162
5218
  });
5163
5219
 
5164
- const globalRefs$i = getThemeRefs(globals);
5165
- const vars$r = LinkClass.cssVarList;
5220
+ const globalRefs$k = getThemeRefs(globals);
5221
+ const vars$t = LinkClass.cssVarList;
5166
5222
 
5167
5223
  const link$1 = {
5168
- [vars$r.hostDirection]: globalRefs$i.direction,
5169
- [vars$r.cursor]: 'pointer',
5224
+ [vars$t.hostDirection]: globalRefs$k.direction,
5225
+ [vars$t.cursor]: 'pointer',
5170
5226
 
5171
- [vars$r.textColor]: globalRefs$i.colors.primary.main,
5227
+ [vars$t.textColor]: globalRefs$k.colors.primary.main,
5172
5228
 
5173
5229
  textAlign: {
5174
- right: { [vars$r.textAlign]: 'right' },
5175
- left: { [vars$r.textAlign]: 'left' },
5176
- center: { [vars$r.textAlign]: 'center' },
5230
+ right: { [vars$t.textAlign]: 'right' },
5231
+ left: { [vars$t.textAlign]: 'left' },
5232
+ center: { [vars$t.textAlign]: 'center' },
5177
5233
  },
5178
5234
 
5179
5235
  _fullWidth: {
5180
- [vars$r.hostWidth]: '100%',
5236
+ [vars$t.hostWidth]: '100%',
5181
5237
  },
5182
5238
 
5183
5239
  mode: {
5184
5240
  secondary: {
5185
- [vars$r.textColor]: globalRefs$i.colors.secondary.main,
5241
+ [vars$t.textColor]: globalRefs$k.colors.secondary.main,
5186
5242
  },
5187
5243
  error: {
5188
- [vars$r.textColor]: globalRefs$i.colors.error.main,
5244
+ [vars$t.textColor]: globalRefs$k.colors.error.main,
5189
5245
  },
5190
5246
  success: {
5191
- [vars$r.textColor]: globalRefs$i.colors.success.main,
5247
+ [vars$t.textColor]: globalRefs$k.colors.success.main,
5192
5248
  },
5193
5249
  },
5194
5250
  };
@@ -5196,11 +5252,11 @@ const link$1 = {
5196
5252
  var link$2 = /*#__PURE__*/Object.freeze({
5197
5253
  __proto__: null,
5198
5254
  default: link$1,
5199
- vars: vars$r
5255
+ vars: vars$t
5200
5256
  });
5201
5257
 
5202
- const componentName$y = getComponentName('divider');
5203
- class RawDivider extends createBaseClass({ componentName: componentName$y, baseSelector: ':host > div' }) {
5258
+ const componentName$A = getComponentName('divider');
5259
+ class RawDivider extends createBaseClass({ componentName: componentName$A, baseSelector: ':host > div' }) {
5204
5260
  constructor() {
5205
5261
  super();
5206
5262
 
@@ -5299,7 +5355,7 @@ const DividerClass = compose(
5299
5355
  componentNameValidationMixin
5300
5356
  )(RawDivider);
5301
5357
 
5302
- const globalRefs$h = getThemeRefs(globals);
5358
+ const globalRefs$j = getThemeRefs(globals);
5303
5359
  const compVars$3 = DividerClass.cssVarList;
5304
5360
 
5305
5361
  const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
@@ -5307,18 +5363,18 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
5307
5363
  thickness: '2px',
5308
5364
  spacing: '10px',
5309
5365
  },
5310
- componentName$y
5366
+ componentName$A
5311
5367
  );
5312
5368
 
5313
5369
  const divider = {
5314
5370
  ...helperTheme$1,
5315
5371
 
5316
- [compVars$3.hostDirection]: globalRefs$h.direction,
5372
+ [compVars$3.hostDirection]: globalRefs$j.direction,
5317
5373
  [compVars$3.alignItems]: 'center',
5318
5374
  [compVars$3.flexDirection]: 'row',
5319
5375
  [compVars$3.alignSelf]: 'stretch',
5320
5376
  [compVars$3.hostWidth]: '100%',
5321
- [compVars$3.stripeColor]: globalRefs$h.colors.surface.light,
5377
+ [compVars$3.stripeColor]: globalRefs$j.colors.surface.light,
5322
5378
  [compVars$3.stripeColorOpacity]: '0.5',
5323
5379
  [compVars$3.stripeHorizontalThickness]: helperRefs$1.thickness,
5324
5380
  [compVars$3.labelTextWidth]: 'fit-content',
@@ -5338,7 +5394,7 @@ const divider = {
5338
5394
  },
5339
5395
  };
5340
5396
 
5341
- const vars$q = {
5397
+ const vars$s = {
5342
5398
  ...compVars$3,
5343
5399
  ...helperVars$1,
5344
5400
  };
@@ -5346,18 +5402,18 @@ const vars$q = {
5346
5402
  var divider$1 = /*#__PURE__*/Object.freeze({
5347
5403
  __proto__: null,
5348
5404
  default: divider,
5349
- vars: vars$q
5405
+ vars: vars$s
5350
5406
  });
5351
5407
 
5352
5408
  /* eslint-disable no-param-reassign */
5353
5409
 
5354
- const componentName$x = getComponentName('passcode-internal');
5410
+ const componentName$z = getComponentName('passcode-internal');
5355
5411
 
5356
- createBaseInputClass({ componentName: componentName$x, baseSelector: 'div' });
5412
+ createBaseInputClass({ componentName: componentName$z, baseSelector: 'div' });
5357
5413
 
5358
- const componentName$w = getComponentName('loader-radial');
5414
+ const componentName$y = getComponentName('loader-radial');
5359
5415
 
5360
- class RawLoaderRadial extends createBaseClass({ componentName: componentName$w, baseSelector: ':host > div' }) {
5416
+ class RawLoaderRadial extends createBaseClass({ componentName: componentName$y, baseSelector: ':host > div' }) {
5361
5417
  constructor() {
5362
5418
  super();
5363
5419
 
@@ -5401,11 +5457,11 @@ const LoaderRadialClass = compose(
5401
5457
  componentNameValidationMixin
5402
5458
  )(RawLoaderRadial);
5403
5459
 
5404
- const componentName$v = getComponentName('passcode');
5460
+ const componentName$x = getComponentName('passcode');
5405
5461
 
5406
5462
  const observedAttributes$3 = ['digits'];
5407
5463
 
5408
- const customMixin$6 = (superclass) =>
5464
+ const customMixin$7 = (superclass) =>
5409
5465
  class PasscodeMixinClass extends superclass {
5410
5466
  static get observedAttributes() {
5411
5467
  return observedAttributes$3.concat(superclass.observedAttributes || []);
@@ -5420,17 +5476,17 @@ const customMixin$6 = (superclass) =>
5420
5476
  const template = document.createElement('template');
5421
5477
 
5422
5478
  template.innerHTML = `
5423
- <${componentName$x}
5479
+ <${componentName$z}
5424
5480
  bordered="true"
5425
5481
  name="code"
5426
5482
  tabindex="-1"
5427
5483
  slot="input"
5428
- ><slot></slot></${componentName$x}>
5484
+ ><slot></slot></${componentName$z}>
5429
5485
  `;
5430
5486
 
5431
5487
  this.baseElement.appendChild(template.content.cloneNode(true));
5432
5488
 
5433
- this.inputElement = this.shadowRoot.querySelector(componentName$x);
5489
+ this.inputElement = this.shadowRoot.querySelector(componentName$z);
5434
5490
 
5435
5491
  forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
5436
5492
  }
@@ -5501,7 +5557,7 @@ const PasscodeClass = compose(
5501
5557
  draggableMixin,
5502
5558
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
5503
5559
  componentNameValidationMixin,
5504
- customMixin$6
5560
+ customMixin$7
5505
5561
  )(
5506
5562
  createProxy({
5507
5563
  slots: [],
@@ -5577,56 +5633,56 @@ const PasscodeClass = compose(
5577
5633
  ${resetInputCursor('vaadin-text-field')}
5578
5634
  `,
5579
5635
  excludeAttrsSync: ['tabindex'],
5580
- componentName: componentName$v,
5636
+ componentName: componentName$x,
5581
5637
  })
5582
5638
  );
5583
5639
 
5584
- const vars$p = PasscodeClass.cssVarList;
5640
+ const vars$r = PasscodeClass.cssVarList;
5585
5641
 
5586
5642
  const passcode = {
5587
- [vars$p.hostDirection]: refs.direction,
5588
- [vars$p.fontFamily]: refs.fontFamily,
5589
- [vars$p.fontSize]: refs.fontSize,
5590
- [vars$p.labelTextColor]: refs.labelTextColor,
5591
- [vars$p.labelRequiredIndicator]: refs.requiredIndicator,
5592
- [vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
5593
- [vars$p.digitValueTextColor]: refs.valueTextColor,
5594
- [vars$p.digitPadding]: '0',
5595
- [vars$p.digitTextAlign]: 'center',
5596
- [vars$p.digitSpacing]: '4px',
5597
- [vars$p.hostWidth]: refs.width,
5598
- [vars$p.digitOutlineColor]: 'transparent',
5599
- [vars$p.digitOutlineWidth]: refs.outlineWidth,
5600
- [vars$p.focusedDigitFieldOutlineColor]: refs.outlineColor,
5601
- [vars$p.digitSize]: refs.inputHeight,
5643
+ [vars$r.hostDirection]: refs.direction,
5644
+ [vars$r.fontFamily]: refs.fontFamily,
5645
+ [vars$r.fontSize]: refs.fontSize,
5646
+ [vars$r.labelTextColor]: refs.labelTextColor,
5647
+ [vars$r.labelRequiredIndicator]: refs.requiredIndicator,
5648
+ [vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
5649
+ [vars$r.digitValueTextColor]: refs.valueTextColor,
5650
+ [vars$r.digitPadding]: '0',
5651
+ [vars$r.digitTextAlign]: 'center',
5652
+ [vars$r.digitSpacing]: '4px',
5653
+ [vars$r.hostWidth]: refs.width,
5654
+ [vars$r.digitOutlineColor]: 'transparent',
5655
+ [vars$r.digitOutlineWidth]: refs.outlineWidth,
5656
+ [vars$r.focusedDigitFieldOutlineColor]: refs.outlineColor,
5657
+ [vars$r.digitSize]: refs.inputHeight,
5602
5658
 
5603
5659
  size: {
5604
- xs: { [vars$p.spinnerSize]: '15px' },
5605
- sm: { [vars$p.spinnerSize]: '20px' },
5606
- md: { [vars$p.spinnerSize]: '20px' },
5607
- lg: { [vars$p.spinnerSize]: '20px' },
5660
+ xs: { [vars$r.spinnerSize]: '15px' },
5661
+ sm: { [vars$r.spinnerSize]: '20px' },
5662
+ md: { [vars$r.spinnerSize]: '20px' },
5663
+ lg: { [vars$r.spinnerSize]: '20px' },
5608
5664
  },
5609
5665
 
5610
5666
  _hideCursor: {
5611
- [vars$p.digitCaretTextColor]: 'transparent',
5667
+ [vars$r.digitCaretTextColor]: 'transparent',
5612
5668
  },
5613
5669
 
5614
5670
  _loading: {
5615
- [vars$p.overlayOpacity]: refs.overlayOpacity,
5671
+ [vars$r.overlayOpacity]: refs.overlayOpacity,
5616
5672
  },
5617
5673
  };
5618
5674
 
5619
5675
  var passcode$1 = /*#__PURE__*/Object.freeze({
5620
5676
  __proto__: null,
5621
5677
  default: passcode,
5622
- vars: vars$p
5678
+ vars: vars$r
5623
5679
  });
5624
5680
 
5625
- const componentName$u = getComponentName('loader-linear');
5681
+ const componentName$w = getComponentName('loader-linear');
5626
5682
 
5627
- class RawLoaderLinear extends createBaseClass({ componentName: componentName$u, baseSelector: ':host > div' }) {
5683
+ class RawLoaderLinear extends createBaseClass({ componentName: componentName$w, baseSelector: ':host > div' }) {
5628
5684
  static get componentName() {
5629
- return componentName$u;
5685
+ return componentName$w;
5630
5686
  }
5631
5687
 
5632
5688
  constructor() {
@@ -5687,67 +5743,67 @@ const LoaderLinearClass = compose(
5687
5743
  componentNameValidationMixin
5688
5744
  )(RawLoaderLinear);
5689
5745
 
5690
- const globalRefs$g = getThemeRefs(globals);
5691
- const vars$o = LoaderLinearClass.cssVarList;
5746
+ const globalRefs$i = getThemeRefs(globals);
5747
+ const vars$q = LoaderLinearClass.cssVarList;
5692
5748
 
5693
5749
  const loaderLinear = {
5694
- [vars$o.hostDisplay]: 'inline-block',
5695
- [vars$o.hostWidth]: '100%',
5750
+ [vars$q.hostDisplay]: 'inline-block',
5751
+ [vars$q.hostWidth]: '100%',
5696
5752
 
5697
- [vars$o.barColor]: globalRefs$g.colors.surface.contrast,
5698
- [vars$o.barWidth]: '20%',
5753
+ [vars$q.barColor]: globalRefs$i.colors.surface.contrast,
5754
+ [vars$q.barWidth]: '20%',
5699
5755
 
5700
- [vars$o.barBackgroundColor]: globalRefs$g.colors.surface.light,
5701
- [vars$o.barBorderRadius]: '4px',
5756
+ [vars$q.barBackgroundColor]: globalRefs$i.colors.surface.light,
5757
+ [vars$q.barBorderRadius]: '4px',
5702
5758
 
5703
- [vars$o.animationDuration]: '2s',
5704
- [vars$o.animationTimingFunction]: 'linear',
5705
- [vars$o.animationIterationCount]: 'infinite',
5706
- [vars$o.verticalPadding]: '0.25em',
5759
+ [vars$q.animationDuration]: '2s',
5760
+ [vars$q.animationTimingFunction]: 'linear',
5761
+ [vars$q.animationIterationCount]: 'infinite',
5762
+ [vars$q.verticalPadding]: '0.25em',
5707
5763
 
5708
5764
  size: {
5709
- xs: { [vars$o.barHeight]: '2px' },
5710
- sm: { [vars$o.barHeight]: '4px' },
5711
- md: { [vars$o.barHeight]: '6px' },
5712
- lg: { [vars$o.barHeight]: '8px' },
5765
+ xs: { [vars$q.barHeight]: '2px' },
5766
+ sm: { [vars$q.barHeight]: '4px' },
5767
+ md: { [vars$q.barHeight]: '6px' },
5768
+ lg: { [vars$q.barHeight]: '8px' },
5713
5769
  },
5714
5770
 
5715
5771
  mode: {
5716
5772
  primary: {
5717
- [vars$o.barColor]: globalRefs$g.colors.primary.main,
5773
+ [vars$q.barColor]: globalRefs$i.colors.primary.main,
5718
5774
  },
5719
5775
  secondary: {
5720
- [vars$o.barColor]: globalRefs$g.colors.secondary.main,
5776
+ [vars$q.barColor]: globalRefs$i.colors.secondary.main,
5721
5777
  },
5722
5778
  },
5723
5779
 
5724
5780
  _hidden: {
5725
- [vars$o.hostDisplay]: 'none',
5781
+ [vars$q.hostDisplay]: 'none',
5726
5782
  },
5727
5783
  };
5728
5784
 
5729
5785
  var loaderLinear$1 = /*#__PURE__*/Object.freeze({
5730
5786
  __proto__: null,
5731
5787
  default: loaderLinear,
5732
- vars: vars$o
5788
+ vars: vars$q
5733
5789
  });
5734
5790
 
5735
- const globalRefs$f = getThemeRefs(globals);
5791
+ const globalRefs$h = getThemeRefs(globals);
5736
5792
  const compVars$2 = LoaderRadialClass.cssVarList;
5737
5793
 
5738
5794
  const [helperTheme, helperRefs, helperVars] = createHelperVars(
5739
5795
  {
5740
- spinnerColor: globalRefs$f.colors.surface.contrast,
5796
+ spinnerColor: globalRefs$h.colors.surface.contrast,
5741
5797
  mode: {
5742
5798
  primary: {
5743
- spinnerColor: globalRefs$f.colors.primary.main,
5799
+ spinnerColor: globalRefs$h.colors.primary.main,
5744
5800
  },
5745
5801
  secondary: {
5746
- spinnerColor: globalRefs$f.colors.secondary.main,
5802
+ spinnerColor: globalRefs$h.colors.secondary.main,
5747
5803
  },
5748
5804
  },
5749
5805
  },
5750
- componentName$w
5806
+ componentName$y
5751
5807
  );
5752
5808
 
5753
5809
  const loaderRadial = {
@@ -5776,7 +5832,7 @@ const loaderRadial = {
5776
5832
  [compVars$2.hostDisplay]: 'none',
5777
5833
  },
5778
5834
  };
5779
- const vars$n = {
5835
+ const vars$p = {
5780
5836
  ...compVars$2,
5781
5837
  ...helperVars,
5782
5838
  };
@@ -5784,10 +5840,10 @@ const vars$n = {
5784
5840
  var loaderRadial$1 = /*#__PURE__*/Object.freeze({
5785
5841
  __proto__: null,
5786
5842
  default: loaderRadial,
5787
- vars: vars$n
5843
+ vars: vars$p
5788
5844
  });
5789
5845
 
5790
- const componentName$t = getComponentName('combo-box');
5846
+ const componentName$v = getComponentName('combo-box');
5791
5847
 
5792
5848
  const ComboBoxMixin = (superclass) =>
5793
5849
  class ComboBoxMixinClass extends superclass {
@@ -6170,71 +6226,71 @@ const ComboBoxClass = compose(
6170
6226
  // and reset items to an empty array, and opening the list box with no items
6171
6227
  // to display.
6172
6228
  excludeAttrsSync: ['tabindex', 'size', 'data'],
6173
- componentName: componentName$t,
6229
+ componentName: componentName$v,
6174
6230
  includeForwardProps: ['items', 'renderer', 'selectedItem'],
6175
6231
  })
6176
6232
  );
6177
6233
 
6178
- const globalRefs$e = getThemeRefs(globals);
6179
- const vars$m = ComboBoxClass.cssVarList;
6234
+ const globalRefs$g = getThemeRefs(globals);
6235
+ const vars$o = ComboBoxClass.cssVarList;
6180
6236
 
6181
6237
  const comboBox = {
6182
- [vars$m.hostWidth]: refs.width,
6183
- [vars$m.hostDirection]: refs.direction,
6184
- [vars$m.fontSize]: refs.fontSize,
6185
- [vars$m.fontFamily]: refs.fontFamily,
6186
- [vars$m.labelTextColor]: refs.labelTextColor,
6187
- [vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
6188
- [vars$m.inputBorderColor]: refs.borderColor,
6189
- [vars$m.inputBorderWidth]: refs.borderWidth,
6190
- [vars$m.inputBorderStyle]: refs.borderStyle,
6191
- [vars$m.inputBorderRadius]: refs.borderRadius,
6192
- [vars$m.inputOutlineColor]: refs.outlineColor,
6193
- [vars$m.inputOutlineOffset]: refs.outlineOffset,
6194
- [vars$m.inputOutlineWidth]: refs.outlineWidth,
6195
- [vars$m.inputOutlineStyle]: refs.outlineStyle,
6196
- [vars$m.labelRequiredIndicator]: refs.requiredIndicator,
6197
- [vars$m.inputValueTextColor]: refs.valueTextColor,
6198
- [vars$m.inputPlaceholderTextColor]: refs.placeholderTextColor,
6199
- [vars$m.inputBackgroundColor]: refs.backgroundColor,
6200
- [vars$m.inputHorizontalPadding]: refs.horizontalPadding,
6201
- [vars$m.inputHeight]: refs.inputHeight,
6202
- [vars$m.inputDropdownButtonColor]: globalRefs$e.colors.surface.dark,
6203
- [vars$m.inputDropdownButtonCursor]: 'pointer',
6204
- [vars$m.inputDropdownButtonSize]: refs.toggleButtonSize,
6205
- [vars$m.inputDropdownButtonOffset]: globalRefs$e.spacing.xs,
6206
- [vars$m.overlayItemPaddingInlineStart]: globalRefs$e.spacing.xs,
6207
- [vars$m.overlayItemPaddingInlineEnd]: globalRefs$e.spacing.lg,
6238
+ [vars$o.hostWidth]: refs.width,
6239
+ [vars$o.hostDirection]: refs.direction,
6240
+ [vars$o.fontSize]: refs.fontSize,
6241
+ [vars$o.fontFamily]: refs.fontFamily,
6242
+ [vars$o.labelTextColor]: refs.labelTextColor,
6243
+ [vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
6244
+ [vars$o.inputBorderColor]: refs.borderColor,
6245
+ [vars$o.inputBorderWidth]: refs.borderWidth,
6246
+ [vars$o.inputBorderStyle]: refs.borderStyle,
6247
+ [vars$o.inputBorderRadius]: refs.borderRadius,
6248
+ [vars$o.inputOutlineColor]: refs.outlineColor,
6249
+ [vars$o.inputOutlineOffset]: refs.outlineOffset,
6250
+ [vars$o.inputOutlineWidth]: refs.outlineWidth,
6251
+ [vars$o.inputOutlineStyle]: refs.outlineStyle,
6252
+ [vars$o.labelRequiredIndicator]: refs.requiredIndicator,
6253
+ [vars$o.inputValueTextColor]: refs.valueTextColor,
6254
+ [vars$o.inputPlaceholderTextColor]: refs.placeholderTextColor,
6255
+ [vars$o.inputBackgroundColor]: refs.backgroundColor,
6256
+ [vars$o.inputHorizontalPadding]: refs.horizontalPadding,
6257
+ [vars$o.inputHeight]: refs.inputHeight,
6258
+ [vars$o.inputDropdownButtonColor]: globalRefs$g.colors.surface.dark,
6259
+ [vars$o.inputDropdownButtonCursor]: 'pointer',
6260
+ [vars$o.inputDropdownButtonSize]: refs.toggleButtonSize,
6261
+ [vars$o.inputDropdownButtonOffset]: globalRefs$g.spacing.xs,
6262
+ [vars$o.overlayItemPaddingInlineStart]: globalRefs$g.spacing.xs,
6263
+ [vars$o.overlayItemPaddingInlineEnd]: globalRefs$g.spacing.lg,
6208
6264
 
6209
6265
  _readonly: {
6210
- [vars$m.inputDropdownButtonCursor]: 'default',
6266
+ [vars$o.inputDropdownButtonCursor]: 'default',
6211
6267
  },
6212
6268
 
6213
6269
  // Overlay theme exposed via the component:
6214
- [vars$m.overlayFontSize]: refs.fontSize,
6215
- [vars$m.overlayFontFamily]: refs.fontFamily,
6216
- [vars$m.overlayCursor]: 'pointer',
6217
- [vars$m.overlayItemBoxShadow]: 'none',
6218
- [vars$m.overlayBackground]: refs.backgroundColor,
6219
- [vars$m.overlayTextColor]: refs.valueTextColor,
6270
+ [vars$o.overlayFontSize]: refs.fontSize,
6271
+ [vars$o.overlayFontFamily]: refs.fontFamily,
6272
+ [vars$o.overlayCursor]: 'pointer',
6273
+ [vars$o.overlayItemBoxShadow]: 'none',
6274
+ [vars$o.overlayBackground]: refs.backgroundColor,
6275
+ [vars$o.overlayTextColor]: refs.valueTextColor,
6220
6276
 
6221
6277
  // Overlay direct theme:
6222
- [vars$m.overlay.minHeight]: '400px',
6223
- [vars$m.overlay.margin]: '0',
6278
+ [vars$o.overlay.minHeight]: '400px',
6279
+ [vars$o.overlay.margin]: '0',
6224
6280
  };
6225
6281
 
6226
6282
  var comboBox$1 = /*#__PURE__*/Object.freeze({
6227
6283
  __proto__: null,
6228
6284
  comboBox: comboBox,
6229
6285
  default: comboBox,
6230
- vars: vars$m
6286
+ vars: vars$o
6231
6287
  });
6232
6288
 
6233
6289
  const observedAttributes$2 = ['src', 'alt'];
6234
6290
 
6235
- const componentName$s = getComponentName('image');
6291
+ const componentName$u = getComponentName('image');
6236
6292
 
6237
- const BaseClass$1 = createBaseClass({ componentName: componentName$s, baseSelector: ':host > img' });
6293
+ const BaseClass$1 = createBaseClass({ componentName: componentName$u, baseSelector: ':host > img' });
6238
6294
  class RawImage extends BaseClass$1 {
6239
6295
  static get observedAttributes() {
6240
6296
  return observedAttributes$2.concat(BaseClass$1.observedAttributes || []);
@@ -6274,14 +6330,14 @@ const ImageClass = compose(
6274
6330
  draggableMixin
6275
6331
  )(RawImage);
6276
6332
 
6277
- const vars$l = ImageClass.cssVarList;
6333
+ const vars$n = ImageClass.cssVarList;
6278
6334
 
6279
6335
  const image = {};
6280
6336
 
6281
6337
  var image$1 = /*#__PURE__*/Object.freeze({
6282
6338
  __proto__: null,
6283
6339
  default: image,
6284
- vars: vars$l
6340
+ vars: vars$n
6285
6341
  });
6286
6342
 
6287
6343
  var CountryCodes = [
@@ -7500,16 +7556,16 @@ var CountryCodes = [
7500
7556
  ].sort((a, b) => (a.name < b.name ? -1 : 1)),
7501
7557
  ];
7502
7558
 
7503
- const componentName$r = getComponentName('phone-field-internal');
7559
+ const componentName$t = getComponentName('phone-field-internal');
7504
7560
 
7505
- createBaseInputClass({ componentName: componentName$r, baseSelector: 'div' });
7561
+ createBaseInputClass({ componentName: componentName$t, baseSelector: 'div' });
7506
7562
 
7507
7563
  const textVars$1 = TextFieldClass.cssVarList;
7508
7564
  const comboVars = ComboBoxClass.cssVarList;
7509
7565
 
7510
- const componentName$q = getComponentName('phone-field');
7566
+ const componentName$s = getComponentName('phone-field');
7511
7567
 
7512
- const customMixin$5 = (superclass) =>
7568
+ const customMixin$6 = (superclass) =>
7513
7569
  class PhoneFieldMixinClass extends superclass {
7514
7570
  static get CountryCodes() {
7515
7571
  return CountryCodes;
@@ -7521,15 +7577,15 @@ const customMixin$5 = (superclass) =>
7521
7577
  const template = document.createElement('template');
7522
7578
 
7523
7579
  template.innerHTML = `
7524
- <${componentName$r}
7580
+ <${componentName$t}
7525
7581
  tabindex="-1"
7526
7582
  slot="input"
7527
- ></${componentName$r}>
7583
+ ></${componentName$t}>
7528
7584
  `;
7529
7585
 
7530
7586
  this.baseElement.appendChild(template.content.cloneNode(true));
7531
7587
 
7532
- this.inputElement = this.shadowRoot.querySelector(componentName$r);
7588
+ this.inputElement = this.shadowRoot.querySelector(componentName$t);
7533
7589
 
7534
7590
  forwardAttrs(this.shadowRoot.host, this.inputElement, {
7535
7591
  includeAttrs: [
@@ -7649,7 +7705,7 @@ const PhoneFieldClass = compose(
7649
7705
  }),
7650
7706
  draggableMixin,
7651
7707
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
7652
- customMixin$5
7708
+ customMixin$6
7653
7709
  )(
7654
7710
  createProxy({
7655
7711
  slots: [],
@@ -7725,33 +7781,33 @@ const PhoneFieldClass = compose(
7725
7781
  ${resetInputLabelPosition('vaadin-text-field')}
7726
7782
  `,
7727
7783
  excludeAttrsSync: ['tabindex'],
7728
- componentName: componentName$q,
7784
+ componentName: componentName$s,
7729
7785
  })
7730
7786
  );
7731
7787
 
7732
- const vars$k = PhoneFieldClass.cssVarList;
7788
+ const vars$m = PhoneFieldClass.cssVarList;
7733
7789
 
7734
7790
  const phoneField = {
7735
- [vars$k.hostWidth]: refs.width,
7736
- [vars$k.hostDirection]: refs.direction,
7737
- [vars$k.fontSize]: refs.fontSize,
7738
- [vars$k.fontFamily]: refs.fontFamily,
7739
- [vars$k.labelTextColor]: refs.labelTextColor,
7740
- [vars$k.labelRequiredIndicator]: refs.requiredIndicator,
7741
- [vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
7742
- [vars$k.inputValueTextColor]: refs.valueTextColor,
7743
- [vars$k.inputPlaceholderTextColor]: refs.placeholderTextColor,
7744
- [vars$k.inputBorderStyle]: refs.borderStyle,
7745
- [vars$k.inputBorderWidth]: refs.borderWidth,
7746
- [vars$k.inputBorderColor]: refs.borderColor,
7747
- [vars$k.inputBorderRadius]: refs.borderRadius,
7748
- [vars$k.inputOutlineStyle]: refs.outlineStyle,
7749
- [vars$k.inputOutlineWidth]: refs.outlineWidth,
7750
- [vars$k.inputOutlineColor]: refs.outlineColor,
7751
- [vars$k.inputOutlineOffset]: refs.outlineOffset,
7752
- [vars$k.phoneInputWidth]: refs.minWidth,
7753
- [vars$k.countryCodeInputWidth]: '5em',
7754
- [vars$k.countryCodeDropdownWidth]: '20em',
7791
+ [vars$m.hostWidth]: refs.width,
7792
+ [vars$m.hostDirection]: refs.direction,
7793
+ [vars$m.fontSize]: refs.fontSize,
7794
+ [vars$m.fontFamily]: refs.fontFamily,
7795
+ [vars$m.labelTextColor]: refs.labelTextColor,
7796
+ [vars$m.labelRequiredIndicator]: refs.requiredIndicator,
7797
+ [vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
7798
+ [vars$m.inputValueTextColor]: refs.valueTextColor,
7799
+ [vars$m.inputPlaceholderTextColor]: refs.placeholderTextColor,
7800
+ [vars$m.inputBorderStyle]: refs.borderStyle,
7801
+ [vars$m.inputBorderWidth]: refs.borderWidth,
7802
+ [vars$m.inputBorderColor]: refs.borderColor,
7803
+ [vars$m.inputBorderRadius]: refs.borderRadius,
7804
+ [vars$m.inputOutlineStyle]: refs.outlineStyle,
7805
+ [vars$m.inputOutlineWidth]: refs.outlineWidth,
7806
+ [vars$m.inputOutlineColor]: refs.outlineColor,
7807
+ [vars$m.inputOutlineOffset]: refs.outlineOffset,
7808
+ [vars$m.phoneInputWidth]: refs.minWidth,
7809
+ [vars$m.countryCodeInputWidth]: '5em',
7810
+ [vars$m.countryCodeDropdownWidth]: '20em',
7755
7811
 
7756
7812
  // '@overlay': {
7757
7813
  // overlayItemBackgroundColor: 'red'
@@ -7761,18 +7817,18 @@ const phoneField = {
7761
7817
  var phoneField$1 = /*#__PURE__*/Object.freeze({
7762
7818
  __proto__: null,
7763
7819
  default: phoneField,
7764
- vars: vars$k
7820
+ vars: vars$m
7765
7821
  });
7766
7822
 
7767
- const componentName$p = getComponentName('phone-field-internal-input-box');
7823
+ const componentName$r = getComponentName('phone-field-internal-input-box');
7768
7824
 
7769
- createBaseInputClass({ componentName: componentName$p, baseSelector: 'div' });
7825
+ createBaseInputClass({ componentName: componentName$r, baseSelector: 'div' });
7770
7826
 
7771
7827
  const textVars = TextFieldClass.cssVarList;
7772
7828
 
7773
- const componentName$o = getComponentName('phone-input-box-field');
7829
+ const componentName$q = getComponentName('phone-input-box-field');
7774
7830
 
7775
- const customMixin$4 = (superclass) =>
7831
+ const customMixin$5 = (superclass) =>
7776
7832
  class PhoneInputBoxFieldMixinClass extends superclass {
7777
7833
  static get CountryCodes() {
7778
7834
  return CountryCodes;
@@ -7784,15 +7840,15 @@ const customMixin$4 = (superclass) =>
7784
7840
  const template = document.createElement('template');
7785
7841
 
7786
7842
  template.innerHTML = `
7787
- <${componentName$p}
7843
+ <${componentName$r}
7788
7844
  tabindex="-1"
7789
7845
  slot="input"
7790
- ></${componentName$p}>
7846
+ ></${componentName$r}>
7791
7847
  `;
7792
7848
 
7793
7849
  this.baseElement.appendChild(template.content.cloneNode(true));
7794
7850
 
7795
- this.inputElement = this.shadowRoot.querySelector(componentName$p);
7851
+ this.inputElement = this.shadowRoot.querySelector(componentName$r);
7796
7852
 
7797
7853
  forwardAttrs(this.shadowRoot.host, this.inputElement, {
7798
7854
  includeAttrs: [
@@ -7859,7 +7915,7 @@ const PhoneFieldInputBoxClass = compose(
7859
7915
  }),
7860
7916
  draggableMixin,
7861
7917
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
7862
- customMixin$4
7918
+ customMixin$5
7863
7919
  )(
7864
7920
  createProxy({
7865
7921
  slots: [],
@@ -7925,56 +7981,56 @@ const PhoneFieldInputBoxClass = compose(
7925
7981
  ${resetInputLabelPosition('vaadin-text-field')}
7926
7982
  `,
7927
7983
  excludeAttrsSync: ['tabindex'],
7928
- componentName: componentName$o,
7984
+ componentName: componentName$q,
7929
7985
  })
7930
7986
  );
7931
7987
 
7932
- const vars$j = PhoneFieldInputBoxClass.cssVarList;
7988
+ const vars$l = PhoneFieldInputBoxClass.cssVarList;
7933
7989
 
7934
7990
  const phoneInputBoxField = {
7935
- [vars$j.hostWidth]: '16em',
7936
- [vars$j.hostMinWidth]: refs.minWidth,
7937
- [vars$j.hostDirection]: refs.direction,
7938
- [vars$j.fontSize]: refs.fontSize,
7939
- [vars$j.fontFamily]: refs.fontFamily,
7940
- [vars$j.labelTextColor]: refs.labelTextColor,
7941
- [vars$j.labelRequiredIndicator]: refs.requiredIndicator,
7942
- [vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
7943
- [vars$j.inputValueTextColor]: refs.valueTextColor,
7944
- [vars$j.inputPlaceholderTextColor]: refs.placeholderTextColor,
7945
- [vars$j.inputBorderStyle]: refs.borderStyle,
7946
- [vars$j.inputBorderWidth]: refs.borderWidth,
7947
- [vars$j.inputBorderColor]: refs.borderColor,
7948
- [vars$j.inputBorderRadius]: refs.borderRadius,
7949
- [vars$j.inputOutlineStyle]: refs.outlineStyle,
7950
- [vars$j.inputOutlineWidth]: refs.outlineWidth,
7951
- [vars$j.inputOutlineColor]: refs.outlineColor,
7952
- [vars$j.inputOutlineOffset]: refs.outlineOffset,
7991
+ [vars$l.hostWidth]: '16em',
7992
+ [vars$l.hostMinWidth]: refs.minWidth,
7993
+ [vars$l.hostDirection]: refs.direction,
7994
+ [vars$l.fontSize]: refs.fontSize,
7995
+ [vars$l.fontFamily]: refs.fontFamily,
7996
+ [vars$l.labelTextColor]: refs.labelTextColor,
7997
+ [vars$l.labelRequiredIndicator]: refs.requiredIndicator,
7998
+ [vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
7999
+ [vars$l.inputValueTextColor]: refs.valueTextColor,
8000
+ [vars$l.inputPlaceholderTextColor]: refs.placeholderTextColor,
8001
+ [vars$l.inputBorderStyle]: refs.borderStyle,
8002
+ [vars$l.inputBorderWidth]: refs.borderWidth,
8003
+ [vars$l.inputBorderColor]: refs.borderColor,
8004
+ [vars$l.inputBorderRadius]: refs.borderRadius,
8005
+ [vars$l.inputOutlineStyle]: refs.outlineStyle,
8006
+ [vars$l.inputOutlineWidth]: refs.outlineWidth,
8007
+ [vars$l.inputOutlineColor]: refs.outlineColor,
8008
+ [vars$l.inputOutlineOffset]: refs.outlineOffset,
7953
8009
  _fullWidth: {
7954
- [vars$j.hostWidth]: refs.width,
8010
+ [vars$l.hostWidth]: refs.width,
7955
8011
  },
7956
8012
  };
7957
8013
 
7958
8014
  var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
7959
8015
  __proto__: null,
7960
8016
  default: phoneInputBoxField,
7961
- vars: vars$j
8017
+ vars: vars$l
7962
8018
  });
7963
8019
 
7964
- const componentName$n = getComponentName('new-password-internal');
8020
+ const componentName$p = getComponentName('new-password-internal');
7965
8021
 
7966
8022
  const interpolateString = (template, values) =>
7967
8023
  template.replace(/{{(\w+)+}}/g, (match, key) => values?.[key] || match);
7968
8024
 
7969
8025
  // eslint-disable-next-line max-classes-per-file
7970
8026
 
7971
- const componentName$m = getComponentName('policy-validation');
8027
+ const componentName$o = getComponentName('policy-validation');
7972
8028
 
7973
8029
  const overrideAttrs = ['data-password-policy-value-minlength'];
7974
8030
  const dataAttrs = ['data', 'active-policies', 'overrides', ...overrideAttrs];
7975
8031
  const policyAttrs = ['label', 'value', ...dataAttrs];
7976
8032
 
7977
- class RawPolicyValidation extends createBaseClass({ componentName: componentName$m, baseSelector: ':host > div' }) {
8033
+ class RawPolicyValidation extends createBaseClass({ componentName: componentName$o, baseSelector: ':host > div' }) {
7978
8034
  #availablePolicies;
7979
8035
 
7980
8036
  #activePolicies = [];
@@ -8182,11 +8238,11 @@ const PolicyValidationClass = compose(
8182
8238
  componentNameValidationMixin
8183
8239
  )(RawPolicyValidation);
8184
8240
 
8185
- const componentName$l = getComponentName('new-password');
8241
+ const componentName$n = getComponentName('new-password');
8186
8242
 
8187
8243
  const policyPreviewVars = PolicyValidationClass.cssVarList;
8188
8244
 
8189
- const customMixin$3 = (superclass) =>
8245
+ const customMixin$4 = (superclass) =>
8190
8246
  class NewPasswordMixinClass extends superclass {
8191
8247
  init() {
8192
8248
  super.init?.();
@@ -8194,19 +8250,19 @@ const customMixin$3 = (superclass) =>
8194
8250
  const template = document.createElement('template');
8195
8251
 
8196
8252
  template.innerHTML = `
8197
- <${componentName$n}
8253
+ <${componentName$p}
8198
8254
  name="new-password"
8199
8255
  tabindex="-1"
8200
8256
  slot="input"
8201
8257
  >
8202
- </${componentName$n}>
8258
+ </${componentName$p}>
8203
8259
  `;
8204
8260
 
8205
8261
  this.setAttribute('external-input', 'true');
8206
8262
 
8207
8263
  this.baseElement.appendChild(template.content.cloneNode(true));
8208
8264
 
8209
- this.inputElement = this.shadowRoot.querySelector(componentName$n);
8265
+ this.inputElement = this.shadowRoot.querySelector(componentName$p);
8210
8266
 
8211
8267
  // get descope input components
8212
8268
  this.passwordInput = this.inputElement.querySelector('[data-id="password"]');
@@ -8302,7 +8358,7 @@ const NewPasswordClass = compose(
8302
8358
  }),
8303
8359
  draggableMixin,
8304
8360
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
8305
- customMixin$3
8361
+ customMixin$4
8306
8362
  )(
8307
8363
  createProxy({
8308
8364
  slots: [],
@@ -8361,36 +8417,36 @@ const NewPasswordClass = compose(
8361
8417
  }
8362
8418
  `,
8363
8419
  excludeAttrsSync: ['tabindex'],
8364
- componentName: componentName$l,
8420
+ componentName: componentName$n,
8365
8421
  })
8366
8422
  );
8367
8423
 
8368
- const globalRefs$d = getThemeRefs(globals);
8369
- const vars$i = NewPasswordClass.cssVarList;
8424
+ const globalRefs$f = getThemeRefs(globals);
8425
+ const vars$k = NewPasswordClass.cssVarList;
8370
8426
 
8371
8427
  const newPassword = {
8372
- [vars$i.hostWidth]: refs.width,
8373
- [vars$i.hostMinWidth]: refs.minWidth,
8374
- [vars$i.hostDirection]: refs.direction,
8375
- [vars$i.fontSize]: refs.fontSize,
8376
- [vars$i.fontFamily]: refs.fontFamily,
8377
- [vars$i.spaceBetweenInputs]: '1em',
8378
- [vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
8379
- [vars$i.policyPreviewBackgroundColor]: 'none',
8380
- [vars$i.policyPreviewPadding]: globalRefs$d.spacing.lg,
8428
+ [vars$k.hostWidth]: refs.width,
8429
+ [vars$k.hostMinWidth]: refs.minWidth,
8430
+ [vars$k.hostDirection]: refs.direction,
8431
+ [vars$k.fontSize]: refs.fontSize,
8432
+ [vars$k.fontFamily]: refs.fontFamily,
8433
+ [vars$k.spaceBetweenInputs]: '1em',
8434
+ [vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
8435
+ [vars$k.policyPreviewBackgroundColor]: 'none',
8436
+ [vars$k.policyPreviewPadding]: globalRefs$f.spacing.lg,
8381
8437
 
8382
8438
  _required: {
8383
8439
  // NewPassword doesn't pass `required` attribute to its Password components.
8384
8440
  // That's why we fake the required indicator on each input.
8385
8441
  // We do that by injecting `::after` element, and populating it with requiredIndicator content.
8386
- [vars$i.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
8442
+ [vars$k.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
8387
8443
  },
8388
8444
  };
8389
8445
 
8390
8446
  var newPassword$1 = /*#__PURE__*/Object.freeze({
8391
8447
  __proto__: null,
8392
8448
  default: newPassword,
8393
- vars: vars$i
8449
+ vars: vars$k
8394
8450
  });
8395
8451
 
8396
8452
  const getFileBase64 = (fileObj) => {
@@ -8405,7 +8461,7 @@ const getFilename = (fileObj) => {
8405
8461
  return fileObj.name.replace(/^.*\\/, '');
8406
8462
  };
8407
8463
 
8408
- const componentName$k = getComponentName('upload-file');
8464
+ const componentName$m = getComponentName('upload-file');
8409
8465
 
8410
8466
  const observedAttributes$1 = [
8411
8467
  'title',
@@ -8420,7 +8476,7 @@ const observedAttributes$1 = [
8420
8476
  'icon',
8421
8477
  ];
8422
8478
 
8423
- const BaseInputClass = createBaseInputClass({ componentName: componentName$k, baseSelector: ':host > div' });
8479
+ const BaseInputClass = createBaseInputClass({ componentName: componentName$m, baseSelector: ':host > div' });
8424
8480
 
8425
8481
  class RawUploadFile extends BaseInputClass {
8426
8482
  static get observedAttributes() {
@@ -8635,77 +8691,77 @@ const UploadFileClass = compose(
8635
8691
  componentNameValidationMixin
8636
8692
  )(RawUploadFile);
8637
8693
 
8638
- const vars$h = UploadFileClass.cssVarList;
8694
+ const vars$j = UploadFileClass.cssVarList;
8639
8695
 
8640
8696
  const uploadFile = {
8641
- [vars$h.hostDirection]: refs.direction,
8642
- [vars$h.labelTextColor]: refs.labelTextColor,
8643
- [vars$h.fontFamily]: refs.fontFamily,
8697
+ [vars$j.hostDirection]: refs.direction,
8698
+ [vars$j.labelTextColor]: refs.labelTextColor,
8699
+ [vars$j.fontFamily]: refs.fontFamily,
8644
8700
 
8645
- [vars$h.iconSize]: '2em',
8701
+ [vars$j.iconSize]: '2em',
8646
8702
 
8647
- [vars$h.hostPadding]: '0.75em',
8648
- [vars$h.gap]: '0.5em',
8703
+ [vars$j.hostPadding]: '0.75em',
8704
+ [vars$j.gap]: '0.5em',
8649
8705
 
8650
- [vars$h.fontSize]: '16px',
8651
- [vars$h.titleFontWeight]: '500',
8652
- [vars$h.lineHeight]: '1em',
8706
+ [vars$j.fontSize]: '16px',
8707
+ [vars$j.titleFontWeight]: '500',
8708
+ [vars$j.lineHeight]: '1em',
8653
8709
 
8654
- [vars$h.borderWidth]: refs.borderWidth,
8655
- [vars$h.borderColor]: refs.borderColor,
8656
- [vars$h.borderRadius]: refs.borderRadius,
8657
- [vars$h.borderStyle]: 'dashed',
8710
+ [vars$j.borderWidth]: refs.borderWidth,
8711
+ [vars$j.borderColor]: refs.borderColor,
8712
+ [vars$j.borderRadius]: refs.borderRadius,
8713
+ [vars$j.borderStyle]: 'dashed',
8658
8714
 
8659
8715
  _required: {
8660
- [vars$h.requiredIndicator]: refs.requiredIndicator,
8716
+ [vars$j.requiredIndicator]: refs.requiredIndicator,
8661
8717
  },
8662
8718
 
8663
8719
  size: {
8664
8720
  xs: {
8665
- [vars$h.hostHeight]: '196px',
8666
- [vars$h.hostWidth]: '200px',
8667
- [vars$h.titleFontSize]: '0.875em',
8668
- [vars$h.descriptionFontSize]: '0.875em',
8669
- [vars$h.lineHeight]: '1.25em',
8721
+ [vars$j.hostHeight]: '196px',
8722
+ [vars$j.hostWidth]: '200px',
8723
+ [vars$j.titleFontSize]: '0.875em',
8724
+ [vars$j.descriptionFontSize]: '0.875em',
8725
+ [vars$j.lineHeight]: '1.25em',
8670
8726
  },
8671
8727
  sm: {
8672
- [vars$h.hostHeight]: '216px',
8673
- [vars$h.hostWidth]: '230px',
8674
- [vars$h.titleFontSize]: '1em',
8675
- [vars$h.descriptionFontSize]: '0.875em',
8676
- [vars$h.lineHeight]: '1.25em',
8728
+ [vars$j.hostHeight]: '216px',
8729
+ [vars$j.hostWidth]: '230px',
8730
+ [vars$j.titleFontSize]: '1em',
8731
+ [vars$j.descriptionFontSize]: '0.875em',
8732
+ [vars$j.lineHeight]: '1.25em',
8677
8733
  },
8678
8734
  md: {
8679
- [vars$h.hostHeight]: '256px',
8680
- [vars$h.hostWidth]: '312px',
8681
- [vars$h.titleFontSize]: '1.125em',
8682
- [vars$h.descriptionFontSize]: '1em',
8683
- [vars$h.lineHeight]: '1.5em',
8735
+ [vars$j.hostHeight]: '256px',
8736
+ [vars$j.hostWidth]: '312px',
8737
+ [vars$j.titleFontSize]: '1.125em',
8738
+ [vars$j.descriptionFontSize]: '1em',
8739
+ [vars$j.lineHeight]: '1.5em',
8684
8740
  },
8685
8741
  lg: {
8686
- [vars$h.hostHeight]: '280px',
8687
- [vars$h.hostWidth]: '336px',
8688
- [vars$h.titleFontSize]: '1.125em',
8689
- [vars$h.descriptionFontSize]: '1.125em',
8690
- [vars$h.lineHeight]: '1.75em',
8742
+ [vars$j.hostHeight]: '280px',
8743
+ [vars$j.hostWidth]: '336px',
8744
+ [vars$j.titleFontSize]: '1.125em',
8745
+ [vars$j.descriptionFontSize]: '1.125em',
8746
+ [vars$j.lineHeight]: '1.75em',
8691
8747
  },
8692
8748
  },
8693
8749
 
8694
8750
  _fullWidth: {
8695
- [vars$h.hostWidth]: refs.width,
8751
+ [vars$j.hostWidth]: refs.width,
8696
8752
  },
8697
8753
  };
8698
8754
 
8699
8755
  var uploadFile$1 = /*#__PURE__*/Object.freeze({
8700
8756
  __proto__: null,
8701
8757
  default: uploadFile,
8702
- vars: vars$h
8758
+ vars: vars$j
8703
8759
  });
8704
8760
 
8705
- const componentName$j = getComponentName('button-selection-group-item');
8761
+ const componentName$l = getComponentName('button-selection-group-item');
8706
8762
 
8707
8763
  class RawSelectItem extends createBaseClass({
8708
- componentName: componentName$j,
8764
+ componentName: componentName$l,
8709
8765
  baseSelector: ':host > descope-button',
8710
8766
  }) {
8711
8767
  get size() {
@@ -8812,39 +8868,39 @@ const ButtonSelectionGroupItemClass = compose(
8812
8868
  componentNameValidationMixin
8813
8869
  )(RawSelectItem);
8814
8870
 
8815
- const globalRefs$c = getThemeRefs(globals);
8871
+ const globalRefs$e = getThemeRefs(globals);
8816
8872
 
8817
- const vars$g = ButtonSelectionGroupItemClass.cssVarList;
8873
+ const vars$i = ButtonSelectionGroupItemClass.cssVarList;
8818
8874
 
8819
8875
  const buttonSelectionGroupItem = {
8820
- [vars$g.hostDirection]: 'inherit',
8821
- [vars$g.backgroundColor]: globalRefs$c.colors.surface.main,
8822
- [vars$g.labelTextColor]: globalRefs$c.colors.surface.contrast,
8823
- [vars$g.borderColor]: globalRefs$c.colors.surface.light,
8824
- [vars$g.borderStyle]: 'solid',
8825
- [vars$g.borderRadius]: globalRefs$c.radius.sm,
8826
- [vars$g.outlineColor]: 'transparent',
8827
- [vars$g.borderWidth]: globalRefs$c.border.xs,
8876
+ [vars$i.hostDirection]: 'inherit',
8877
+ [vars$i.backgroundColor]: globalRefs$e.colors.surface.main,
8878
+ [vars$i.labelTextColor]: globalRefs$e.colors.surface.contrast,
8879
+ [vars$i.borderColor]: globalRefs$e.colors.surface.light,
8880
+ [vars$i.borderStyle]: 'solid',
8881
+ [vars$i.borderRadius]: globalRefs$e.radius.sm,
8882
+ [vars$i.outlineColor]: 'transparent',
8883
+ [vars$i.borderWidth]: globalRefs$e.border.xs,
8828
8884
 
8829
8885
  _hover: {
8830
- [vars$g.backgroundColor]: globalRefs$c.colors.surface.highlight,
8886
+ [vars$i.backgroundColor]: globalRefs$e.colors.surface.highlight,
8831
8887
  },
8832
8888
 
8833
8889
  _focused: {
8834
- [vars$g.outlineColor]: globalRefs$c.colors.surface.light,
8890
+ [vars$i.outlineColor]: globalRefs$e.colors.surface.light,
8835
8891
  },
8836
8892
 
8837
8893
  _selected: {
8838
- [vars$g.borderColor]: globalRefs$c.colors.surface.contrast,
8839
- [vars$g.backgroundColor]: globalRefs$c.colors.surface.contrast,
8840
- [vars$g.labelTextColor]: globalRefs$c.colors.surface.main,
8894
+ [vars$i.borderColor]: globalRefs$e.colors.surface.contrast,
8895
+ [vars$i.backgroundColor]: globalRefs$e.colors.surface.contrast,
8896
+ [vars$i.labelTextColor]: globalRefs$e.colors.surface.main,
8841
8897
  },
8842
8898
  };
8843
8899
 
8844
8900
  var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
8845
8901
  __proto__: null,
8846
8902
  default: buttonSelectionGroupItem,
8847
- vars: vars$g
8903
+ vars: vars$i
8848
8904
  });
8849
8905
 
8850
8906
  const createBaseButtonSelectionGroupInternalClass = (componentName) => {
@@ -8943,10 +8999,10 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
8943
8999
  return BaseButtonSelectionGroupInternalClass;
8944
9000
  };
8945
9001
 
8946
- const componentName$i = getComponentName('button-selection-group-internal');
9002
+ const componentName$k = getComponentName('button-selection-group-internal');
8947
9003
 
8948
9004
  class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
8949
- componentName$i
9005
+ componentName$k
8950
9006
  ) {
8951
9007
  getSelectedNode() {
8952
9008
  return this.items.find((item) => item.hasAttribute('selected'));
@@ -9178,7 +9234,7 @@ const buttonSelectionGroupStyles = `
9178
9234
  ${resetInputCursor('vaadin-text-field')}
9179
9235
  `;
9180
9236
 
9181
- const componentName$h = getComponentName('button-selection-group');
9237
+ const componentName$j = getComponentName('button-selection-group');
9182
9238
 
9183
9239
  const buttonSelectionGroupMixin = (superclass) =>
9184
9240
  class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -9187,19 +9243,19 @@ const buttonSelectionGroupMixin = (superclass) =>
9187
9243
  const template = document.createElement('template');
9188
9244
 
9189
9245
  template.innerHTML = `
9190
- <${componentName$i}
9246
+ <${componentName$k}
9191
9247
  name="button-selection-group"
9192
9248
  slot="input"
9193
9249
  tabindex="-1"
9194
9250
  part="internal-component"
9195
9251
  >
9196
9252
  <slot></slot>
9197
- </${componentName$i}>
9253
+ </${componentName$k}>
9198
9254
  `;
9199
9255
 
9200
9256
  this.baseElement.appendChild(template.content.cloneNode(true));
9201
9257
 
9202
- this.inputElement = this.shadowRoot.querySelector(componentName$i);
9258
+ this.inputElement = this.shadowRoot.querySelector(componentName$k);
9203
9259
 
9204
9260
  forwardAttrs(this, this.inputElement, {
9205
9261
  includeAttrs: ['size', 'default-value', 'allow-deselect'],
@@ -9224,11 +9280,11 @@ const ButtonSelectionGroupClass = compose(
9224
9280
  wrappedEleName: 'vaadin-text-field',
9225
9281
  style: () => buttonSelectionGroupStyles,
9226
9282
  excludeAttrsSync: ['tabindex'],
9227
- componentName: componentName$h,
9283
+ componentName: componentName$j,
9228
9284
  })
9229
9285
  );
9230
9286
 
9231
- const globalRefs$b = getThemeRefs(globals);
9287
+ const globalRefs$d = getThemeRefs(globals);
9232
9288
 
9233
9289
  const createBaseButtonSelectionGroupMappings = (vars) => ({
9234
9290
  [vars.hostDirection]: refs.direction,
@@ -9236,26 +9292,26 @@ const createBaseButtonSelectionGroupMappings = (vars) => ({
9236
9292
  [vars.labelTextColor]: refs.labelTextColor,
9237
9293
  [vars.labelRequiredIndicator]: refs.requiredIndicator,
9238
9294
  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
9239
- [vars.itemsSpacing]: globalRefs$b.spacing.sm,
9295
+ [vars.itemsSpacing]: globalRefs$d.spacing.sm,
9240
9296
  [vars.hostWidth]: refs.width,
9241
9297
  });
9242
9298
 
9243
- const vars$f = ButtonSelectionGroupClass.cssVarList;
9299
+ const vars$h = ButtonSelectionGroupClass.cssVarList;
9244
9300
 
9245
9301
  const buttonSelectionGroup = {
9246
- ...createBaseButtonSelectionGroupMappings(vars$f),
9302
+ ...createBaseButtonSelectionGroupMappings(vars$h),
9247
9303
  };
9248
9304
 
9249
9305
  var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
9250
9306
  __proto__: null,
9251
9307
  default: buttonSelectionGroup,
9252
- vars: vars$f
9308
+ vars: vars$h
9253
9309
  });
9254
9310
 
9255
- const componentName$g = getComponentName('button-multi-selection-group-internal');
9311
+ const componentName$i = getComponentName('button-multi-selection-group-internal');
9256
9312
 
9257
9313
  class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
9258
- componentName$g
9314
+ componentName$i
9259
9315
  ) {
9260
9316
  #getSelectedNodes() {
9261
9317
  return this.items.filter((item) => item.hasAttribute('selected'));
@@ -9358,7 +9414,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
9358
9414
  }
9359
9415
  }
9360
9416
 
9361
- const componentName$f = getComponentName('button-multi-selection-group');
9417
+ const componentName$h = getComponentName('button-multi-selection-group');
9362
9418
 
9363
9419
  const buttonMultiSelectionGroupMixin = (superclass) =>
9364
9420
  class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -9367,19 +9423,19 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
9367
9423
  const template = document.createElement('template');
9368
9424
 
9369
9425
  template.innerHTML = `
9370
- <${componentName$g}
9426
+ <${componentName$i}
9371
9427
  name="button-selection-group"
9372
9428
  slot="input"
9373
9429
  tabindex="-1"
9374
9430
  part="internal-component"
9375
9431
  >
9376
9432
  <slot></slot>
9377
- </${componentName$g}>
9433
+ </${componentName$i}>
9378
9434
  `;
9379
9435
 
9380
9436
  this.baseElement.appendChild(template.content.cloneNode(true));
9381
9437
 
9382
- this.inputElement = this.shadowRoot.querySelector(componentName$g);
9438
+ this.inputElement = this.shadowRoot.querySelector(componentName$i);
9383
9439
 
9384
9440
  forwardAttrs(this, this.inputElement, {
9385
9441
  includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
@@ -9404,25 +9460,25 @@ const ButtonMultiSelectionGroupClass = compose(
9404
9460
  wrappedEleName: 'vaadin-text-field',
9405
9461
  style: () => buttonSelectionGroupStyles,
9406
9462
  excludeAttrsSync: ['tabindex'],
9407
- componentName: componentName$f,
9463
+ componentName: componentName$h,
9408
9464
  })
9409
9465
  );
9410
9466
 
9411
- const vars$e = ButtonMultiSelectionGroupClass.cssVarList;
9467
+ const vars$g = ButtonMultiSelectionGroupClass.cssVarList;
9412
9468
 
9413
9469
  const buttonMultiSelectionGroup = {
9414
- ...createBaseButtonSelectionGroupMappings(vars$e),
9470
+ ...createBaseButtonSelectionGroupMappings(vars$g),
9415
9471
  };
9416
9472
 
9417
9473
  var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
9418
9474
  __proto__: null,
9419
9475
  default: buttonMultiSelectionGroup,
9420
- vars: vars$e
9476
+ vars: vars$g
9421
9477
  });
9422
9478
 
9423
- const componentName$e = getComponentName('modal');
9479
+ const componentName$g = getComponentName('modal');
9424
9480
 
9425
- const customMixin$2 = (superclass) =>
9481
+ const customMixin$3 = (superclass) =>
9426
9482
  class ModalMixinClass extends superclass {
9427
9483
  get opened() {
9428
9484
  return this.getAttribute('opened') === 'true';
@@ -9512,35 +9568,35 @@ const ModalClass = compose(
9512
9568
  }),
9513
9569
  draggableMixin,
9514
9570
  componentNameValidationMixin,
9515
- customMixin$2
9571
+ customMixin$3
9516
9572
  )(
9517
9573
  createProxy({
9518
9574
  slots: [''],
9519
9575
  wrappedEleName: 'vaadin-dialog',
9520
9576
  style: () => ``,
9521
9577
  excludeAttrsSync: ['tabindex', 'opened'],
9522
- componentName: componentName$e,
9578
+ componentName: componentName$g,
9523
9579
  })
9524
9580
  );
9525
9581
 
9526
- const globalRefs$a = getThemeRefs(globals);
9582
+ const globalRefs$c = getThemeRefs(globals);
9527
9583
 
9528
9584
  const compVars$1 = ModalClass.cssVarList;
9529
9585
 
9530
9586
  const modal = {
9531
- [compVars$1.overlayBackgroundColor]: globalRefs$a.colors.surface.main,
9532
- [compVars$1.overlayShadow]: globalRefs$a.shadow.wide['2xl'],
9587
+ [compVars$1.overlayBackgroundColor]: globalRefs$c.colors.surface.main,
9588
+ [compVars$1.overlayShadow]: globalRefs$c.shadow.wide['2xl'],
9533
9589
  [compVars$1.overlayWidth]: '540px',
9534
9590
  };
9535
9591
 
9536
- const vars$d = {
9592
+ const vars$f = {
9537
9593
  ...compVars$1,
9538
9594
  };
9539
9595
 
9540
9596
  var modal$1 = /*#__PURE__*/Object.freeze({
9541
9597
  __proto__: null,
9542
9598
  default: modal,
9543
- vars: vars$d
9599
+ vars: vars$f
9544
9600
  });
9545
9601
 
9546
9602
  const isValidDataType = (data) => {
@@ -9553,7 +9609,7 @@ const isValidDataType = (data) => {
9553
9609
  return isValid;
9554
9610
  };
9555
9611
 
9556
- const componentName$d = getComponentName('grid');
9612
+ const componentName$f = getComponentName('grid');
9557
9613
 
9558
9614
  const GridMixin = (superclass) =>
9559
9615
  class GridMixinClass extends superclass {
@@ -9789,40 +9845,40 @@ const GridClass = compose(
9789
9845
  }
9790
9846
  `,
9791
9847
  excludeAttrsSync: ['columns', 'tabindex'],
9792
- componentName: componentName$d,
9848
+ componentName: componentName$f,
9793
9849
  })
9794
9850
  );
9795
9851
 
9796
- const globalRefs$9 = getThemeRefs(globals);
9797
- const vars$c = GridClass.cssVarList;
9852
+ const globalRefs$b = getThemeRefs(globals);
9853
+ const vars$e = GridClass.cssVarList;
9798
9854
 
9799
9855
  const grid = {
9800
- [vars$c.hostWidth]: '100%',
9801
- [vars$c.hostHeight]: '100%',
9802
- [vars$c.hostMinHeight]: '400px',
9803
- [vars$c.fontWeight]: '400',
9804
- [vars$c.backgroundColor]: globalRefs$9.colors.surface.main,
9856
+ [vars$e.hostWidth]: '100%',
9857
+ [vars$e.hostHeight]: '100%',
9858
+ [vars$e.hostMinHeight]: '400px',
9859
+ [vars$e.fontWeight]: '400',
9860
+ [vars$e.backgroundColor]: globalRefs$b.colors.surface.main,
9805
9861
 
9806
- [vars$c.fontSize]: refs.fontSize,
9807
- [vars$c.fontFamily]: refs.fontFamily,
9862
+ [vars$e.fontSize]: refs.fontSize,
9863
+ [vars$e.fontFamily]: refs.fontFamily,
9808
9864
 
9809
- [vars$c.sortIndicatorsColor]: globalRefs$9.colors.surface.light,
9810
- [vars$c.activeSortIndicator]: globalRefs$9.colors.surface.dark,
9811
- [vars$c.resizeHandleColor]: globalRefs$9.colors.surface.light,
9865
+ [vars$e.sortIndicatorsColor]: globalRefs$b.colors.surface.light,
9866
+ [vars$e.activeSortIndicator]: globalRefs$b.colors.surface.dark,
9867
+ [vars$e.resizeHandleColor]: globalRefs$b.colors.surface.light,
9812
9868
 
9813
- [vars$c.borderWidth]: refs.borderWidth,
9814
- [vars$c.borderStyle]: refs.borderStyle,
9815
- [vars$c.borderRadius]: refs.borderRadius,
9816
- [vars$c.borderColor]: 'transparent',
9869
+ [vars$e.borderWidth]: refs.borderWidth,
9870
+ [vars$e.borderStyle]: refs.borderStyle,
9871
+ [vars$e.borderRadius]: refs.borderRadius,
9872
+ [vars$e.borderColor]: 'transparent',
9817
9873
 
9818
- [vars$c.headerRowTextColor]: globalRefs$9.colors.surface.dark,
9819
- [vars$c.separatorColor]: globalRefs$9.colors.surface.light,
9874
+ [vars$e.headerRowTextColor]: globalRefs$b.colors.surface.dark,
9875
+ [vars$e.separatorColor]: globalRefs$b.colors.surface.light,
9820
9876
 
9821
- [vars$c.valueTextColor]: globalRefs$9.colors.surface.contrast,
9822
- [vars$c.selectedBackgroundColor]: globalRefs$9.colors.surface.highlight,
9877
+ [vars$e.valueTextColor]: globalRefs$b.colors.surface.contrast,
9878
+ [vars$e.selectedBackgroundColor]: globalRefs$b.colors.surface.highlight,
9823
9879
 
9824
9880
  _bordered: {
9825
- [vars$c.borderColor]: refs.borderColor,
9881
+ [vars$e.borderColor]: refs.borderColor,
9826
9882
  },
9827
9883
  };
9828
9884
 
@@ -9830,10 +9886,10 @@ var grid$1 = /*#__PURE__*/Object.freeze({
9830
9886
  __proto__: null,
9831
9887
  default: grid,
9832
9888
  grid: grid,
9833
- vars: vars$c
9889
+ vars: vars$e
9834
9890
  });
9835
9891
 
9836
- const componentName$c = getComponentName('notification-card');
9892
+ const componentName$e = getComponentName('notification-card');
9837
9893
 
9838
9894
  const notificationCardMixin = (superclass) =>
9839
9895
  class NotificationCardMixinClass extends superclass {
@@ -9941,54 +9997,54 @@ const NotificationCardClass = compose(
9941
9997
  }
9942
9998
  `,
9943
9999
  excludeAttrsSync: ['tabindex'],
9944
- componentName: componentName$c,
10000
+ componentName: componentName$e,
9945
10001
  })
9946
10002
  );
9947
10003
 
9948
- const globalRefs$8 = getThemeRefs(globals);
9949
- const vars$b = NotificationCardClass.cssVarList;
10004
+ const globalRefs$a = getThemeRefs(globals);
10005
+ const vars$d = NotificationCardClass.cssVarList;
9950
10006
 
9951
10007
  const shadowColor = '#00000020';
9952
10008
 
9953
10009
  const notification = {
9954
- [vars$b.hostMinWidth]: '415px',
9955
- [vars$b.fontFamily]: globalRefs$8.fonts.font1.family,
9956
- [vars$b.fontSize]: globalRefs$8.typography.body1.size,
9957
- [vars$b.backgroundColor]: globalRefs$8.colors.surface.main,
9958
- [vars$b.textColor]: globalRefs$8.colors.surface.contrast,
9959
- [vars$b.boxShadow]: `${globalRefs$8.shadow.wide.xl} ${shadowColor}, ${globalRefs$8.shadow.narrow.xl} ${shadowColor}`,
9960
- [vars$b.verticalPadding]: '0.625em',
9961
- [vars$b.horizontalPadding]: '1.5em',
9962
- [vars$b.borderRadius]: globalRefs$8.radius.xs,
10010
+ [vars$d.hostMinWidth]: '415px',
10011
+ [vars$d.fontFamily]: globalRefs$a.fonts.font1.family,
10012
+ [vars$d.fontSize]: globalRefs$a.typography.body1.size,
10013
+ [vars$d.backgroundColor]: globalRefs$a.colors.surface.main,
10014
+ [vars$d.textColor]: globalRefs$a.colors.surface.contrast,
10015
+ [vars$d.boxShadow]: `${globalRefs$a.shadow.wide.xl} ${shadowColor}, ${globalRefs$a.shadow.narrow.xl} ${shadowColor}`,
10016
+ [vars$d.verticalPadding]: '0.625em',
10017
+ [vars$d.horizontalPadding]: '1.5em',
10018
+ [vars$d.borderRadius]: globalRefs$a.radius.xs,
9963
10019
 
9964
10020
  _bordered: {
9965
- [vars$b.borderWidth]: globalRefs$8.border.sm,
9966
- [vars$b.borderStyle]: 'solid',
9967
- [vars$b.borderColor]: 'transparent',
10021
+ [vars$d.borderWidth]: globalRefs$a.border.sm,
10022
+ [vars$d.borderStyle]: 'solid',
10023
+ [vars$d.borderColor]: 'transparent',
9968
10024
  },
9969
10025
 
9970
10026
  size: {
9971
- xs: { [vars$b.fontSize]: '12px' },
9972
- sm: { [vars$b.fontSize]: '14px' },
9973
- md: { [vars$b.fontSize]: '16px' },
9974
- lg: { [vars$b.fontSize]: '18px' },
10027
+ xs: { [vars$d.fontSize]: '12px' },
10028
+ sm: { [vars$d.fontSize]: '14px' },
10029
+ md: { [vars$d.fontSize]: '16px' },
10030
+ lg: { [vars$d.fontSize]: '18px' },
9975
10031
  },
9976
10032
 
9977
10033
  mode: {
9978
10034
  primary: {
9979
- [vars$b.backgroundColor]: globalRefs$8.colors.primary.main,
9980
- [vars$b.textColor]: globalRefs$8.colors.primary.contrast,
9981
- [vars$b.borderColor]: globalRefs$8.colors.primary.light,
10035
+ [vars$d.backgroundColor]: globalRefs$a.colors.primary.main,
10036
+ [vars$d.textColor]: globalRefs$a.colors.primary.contrast,
10037
+ [vars$d.borderColor]: globalRefs$a.colors.primary.light,
9982
10038
  },
9983
10039
  success: {
9984
- [vars$b.backgroundColor]: globalRefs$8.colors.success.main,
9985
- [vars$b.textColor]: globalRefs$8.colors.success.contrast,
9986
- [vars$b.borderColor]: globalRefs$8.colors.success.light,
10040
+ [vars$d.backgroundColor]: globalRefs$a.colors.success.main,
10041
+ [vars$d.textColor]: globalRefs$a.colors.success.contrast,
10042
+ [vars$d.borderColor]: globalRefs$a.colors.success.light,
9987
10043
  },
9988
10044
  error: {
9989
- [vars$b.backgroundColor]: globalRefs$8.colors.error.main,
9990
- [vars$b.textColor]: globalRefs$8.colors.error.contrast,
9991
- [vars$b.borderColor]: globalRefs$8.colors.error.light,
10045
+ [vars$d.backgroundColor]: globalRefs$a.colors.error.main,
10046
+ [vars$d.textColor]: globalRefs$a.colors.error.contrast,
10047
+ [vars$d.borderColor]: globalRefs$a.colors.error.light,
9992
10048
  },
9993
10049
  },
9994
10050
  };
@@ -9996,10 +10052,10 @@ const notification = {
9996
10052
  var notificationCard = /*#__PURE__*/Object.freeze({
9997
10053
  __proto__: null,
9998
10054
  default: notification,
9999
- vars: vars$b
10055
+ vars: vars$d
10000
10056
  });
10001
10057
 
10002
- const componentName$b = getComponentName('multi-select-combo-box');
10058
+ const componentName$d = getComponentName('multi-select-combo-box');
10003
10059
 
10004
10060
  const multiSelectComboBoxMixin = (superclass) =>
10005
10061
  class MultiSelectComboBoxMixinClass extends superclass {
@@ -10603,73 +10659,73 @@ const MultiSelectComboBoxClass = compose(
10603
10659
  // Note: we exclude `placeholder` because the vaadin component observes it and
10604
10660
  // tries to override it, causing us to lose the user set placeholder.
10605
10661
  excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],
10606
- componentName: componentName$b,
10662
+ componentName: componentName$d,
10607
10663
  includeForwardProps: ['items', 'renderer', 'selectedItems'],
10608
10664
  })
10609
10665
  );
10610
10666
 
10611
- const globalRefs$7 = getThemeRefs(globals);
10612
- const vars$a = MultiSelectComboBoxClass.cssVarList;
10667
+ const globalRefs$9 = getThemeRefs(globals);
10668
+ const vars$c = MultiSelectComboBoxClass.cssVarList;
10613
10669
 
10614
10670
  const multiSelectComboBox = {
10615
- [vars$a.hostWidth]: refs.width,
10616
- [vars$a.hostDirection]: refs.direction,
10617
- [vars$a.fontSize]: refs.fontSize,
10618
- [vars$a.fontFamily]: refs.fontFamily,
10619
- [vars$a.labelTextColor]: refs.labelTextColor,
10620
- [vars$a.errorMessageTextColor]: refs.errorMessageTextColor,
10621
- [vars$a.inputBorderColor]: refs.borderColor,
10622
- [vars$a.inputBorderWidth]: refs.borderWidth,
10623
- [vars$a.inputBorderStyle]: refs.borderStyle,
10624
- [vars$a.inputBorderRadius]: refs.borderRadius,
10625
- [vars$a.inputOutlineColor]: refs.outlineColor,
10626
- [vars$a.inputOutlineOffset]: refs.outlineOffset,
10627
- [vars$a.inputOutlineWidth]: refs.outlineWidth,
10628
- [vars$a.inputOutlineStyle]: refs.outlineStyle,
10629
- [vars$a.labelRequiredIndicator]: refs.requiredIndicator,
10630
- [vars$a.inputValueTextColor]: refs.valueTextColor,
10631
- [vars$a.inputPlaceholderTextColor]: refs.placeholderTextColor,
10632
- [vars$a.inputBackgroundColor]: refs.backgroundColor,
10633
- [vars$a.inputHorizontalPadding]: refs.horizontalPadding,
10634
- [vars$a.inputVerticalPadding]: refs.verticalPadding,
10635
- [vars$a.inputHeight]: refs.inputHeight,
10636
- [vars$a.inputDropdownButtonColor]: globalRefs$7.colors.surface.dark,
10637
- [vars$a.inputDropdownButtonCursor]: 'pointer',
10638
- [vars$a.inputDropdownButtonSize]: refs.toggleButtonSize,
10639
- [vars$a.inputDropdownButtonOffset]: globalRefs$7.spacing.xs,
10640
- [vars$a.overlayItemPaddingInlineStart]: globalRefs$7.spacing.xs,
10641
- [vars$a.overlayItemPaddingInlineEnd]: globalRefs$7.spacing.lg,
10642
- [vars$a.chipFontSize]: refs.chipFontSize,
10643
- [vars$a.chipTextColor]: globalRefs$7.colors.surface.contrast,
10644
- [vars$a.chipBackgroundColor]: globalRefs$7.colors.surface.light,
10671
+ [vars$c.hostWidth]: refs.width,
10672
+ [vars$c.hostDirection]: refs.direction,
10673
+ [vars$c.fontSize]: refs.fontSize,
10674
+ [vars$c.fontFamily]: refs.fontFamily,
10675
+ [vars$c.labelTextColor]: refs.labelTextColor,
10676
+ [vars$c.errorMessageTextColor]: refs.errorMessageTextColor,
10677
+ [vars$c.inputBorderColor]: refs.borderColor,
10678
+ [vars$c.inputBorderWidth]: refs.borderWidth,
10679
+ [vars$c.inputBorderStyle]: refs.borderStyle,
10680
+ [vars$c.inputBorderRadius]: refs.borderRadius,
10681
+ [vars$c.inputOutlineColor]: refs.outlineColor,
10682
+ [vars$c.inputOutlineOffset]: refs.outlineOffset,
10683
+ [vars$c.inputOutlineWidth]: refs.outlineWidth,
10684
+ [vars$c.inputOutlineStyle]: refs.outlineStyle,
10685
+ [vars$c.labelRequiredIndicator]: refs.requiredIndicator,
10686
+ [vars$c.inputValueTextColor]: refs.valueTextColor,
10687
+ [vars$c.inputPlaceholderTextColor]: refs.placeholderTextColor,
10688
+ [vars$c.inputBackgroundColor]: refs.backgroundColor,
10689
+ [vars$c.inputHorizontalPadding]: refs.horizontalPadding,
10690
+ [vars$c.inputVerticalPadding]: refs.verticalPadding,
10691
+ [vars$c.inputHeight]: refs.inputHeight,
10692
+ [vars$c.inputDropdownButtonColor]: globalRefs$9.colors.surface.dark,
10693
+ [vars$c.inputDropdownButtonCursor]: 'pointer',
10694
+ [vars$c.inputDropdownButtonSize]: refs.toggleButtonSize,
10695
+ [vars$c.inputDropdownButtonOffset]: globalRefs$9.spacing.xs,
10696
+ [vars$c.overlayItemPaddingInlineStart]: globalRefs$9.spacing.xs,
10697
+ [vars$c.overlayItemPaddingInlineEnd]: globalRefs$9.spacing.lg,
10698
+ [vars$c.chipFontSize]: refs.chipFontSize,
10699
+ [vars$c.chipTextColor]: globalRefs$9.colors.surface.contrast,
10700
+ [vars$c.chipBackgroundColor]: globalRefs$9.colors.surface.light,
10645
10701
 
10646
10702
  _readonly: {
10647
- [vars$a.inputDropdownButtonCursor]: 'default',
10703
+ [vars$c.inputDropdownButtonCursor]: 'default',
10648
10704
  },
10649
10705
 
10650
10706
  // Overlay theme exposed via the component:
10651
- [vars$a.overlayFontSize]: refs.fontSize,
10652
- [vars$a.overlayFontFamily]: refs.fontFamily,
10653
- [vars$a.overlayCursor]: 'pointer',
10654
- [vars$a.overlayItemBoxShadow]: 'none',
10655
- [vars$a.overlayBackground]: refs.backgroundColor,
10656
- [vars$a.overlayTextColor]: refs.valueTextColor,
10707
+ [vars$c.overlayFontSize]: refs.fontSize,
10708
+ [vars$c.overlayFontFamily]: refs.fontFamily,
10709
+ [vars$c.overlayCursor]: 'pointer',
10710
+ [vars$c.overlayItemBoxShadow]: 'none',
10711
+ [vars$c.overlayBackground]: refs.backgroundColor,
10712
+ [vars$c.overlayTextColor]: refs.valueTextColor,
10657
10713
 
10658
10714
  // Overlay direct theme:
10659
- [vars$a.overlay.minHeight]: '400px',
10660
- [vars$a.overlay.margin]: '0',
10715
+ [vars$c.overlay.minHeight]: '400px',
10716
+ [vars$c.overlay.margin]: '0',
10661
10717
  };
10662
10718
 
10663
10719
  var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
10664
10720
  __proto__: null,
10665
10721
  default: multiSelectComboBox,
10666
10722
  multiSelectComboBox: multiSelectComboBox,
10667
- vars: vars$a
10723
+ vars: vars$c
10668
10724
  });
10669
10725
 
10670
- const componentName$a = getComponentName('badge');
10726
+ const componentName$c = getComponentName('badge');
10671
10727
 
10672
- class RawBadge extends createBaseClass({ componentName: componentName$a, baseSelector: ':host > div' }) {
10728
+ class RawBadge extends createBaseClass({ componentName: componentName$c, baseSelector: ':host > div' }) {
10673
10729
  constructor() {
10674
10730
  super();
10675
10731
 
@@ -10720,66 +10776,66 @@ const BadgeClass = compose(
10720
10776
  componentNameValidationMixin
10721
10777
  )(RawBadge);
10722
10778
 
10723
- const globalRefs$6 = getThemeRefs(globals);
10724
- const vars$9 = BadgeClass.cssVarList;
10779
+ const globalRefs$8 = getThemeRefs(globals);
10780
+ const vars$b = BadgeClass.cssVarList;
10725
10781
 
10726
10782
  const badge$2 = {
10727
- [vars$9.hostWidth]: 'fit-content',
10728
- [vars$9.hostDirection]: globalRefs$6.direction,
10783
+ [vars$b.hostWidth]: 'fit-content',
10784
+ [vars$b.hostDirection]: globalRefs$8.direction,
10729
10785
 
10730
- [vars$9.textAlign]: 'center',
10786
+ [vars$b.textAlign]: 'center',
10731
10787
 
10732
- [vars$9.fontFamily]: globalRefs$6.fonts.font1.family,
10733
- [vars$9.fontWeight]: '400',
10788
+ [vars$b.fontFamily]: globalRefs$8.fonts.font1.family,
10789
+ [vars$b.fontWeight]: '400',
10734
10790
 
10735
- [vars$9.verticalPadding]: '0.25em',
10736
- [vars$9.horizontalPadding]: '0.5em',
10791
+ [vars$b.verticalPadding]: '0.25em',
10792
+ [vars$b.horizontalPadding]: '0.5em',
10737
10793
 
10738
- [vars$9.borderWidth]: globalRefs$6.border.xs,
10739
- [vars$9.borderRadius]: globalRefs$6.radius.xs,
10740
- [vars$9.borderColor]: 'transparent',
10741
- [vars$9.borderStyle]: 'solid',
10794
+ [vars$b.borderWidth]: globalRefs$8.border.xs,
10795
+ [vars$b.borderRadius]: globalRefs$8.radius.xs,
10796
+ [vars$b.borderColor]: 'transparent',
10797
+ [vars$b.borderStyle]: 'solid',
10742
10798
 
10743
10799
  _fullWidth: {
10744
- [vars$9.hostWidth]: '100%',
10800
+ [vars$b.hostWidth]: '100%',
10745
10801
  },
10746
10802
 
10747
10803
  size: {
10748
- xs: { [vars$9.fontSize]: '12px' },
10749
- sm: { [vars$9.fontSize]: '14px' },
10750
- md: { [vars$9.fontSize]: '16px' },
10751
- lg: { [vars$9.fontSize]: '18px' },
10804
+ xs: { [vars$b.fontSize]: '12px' },
10805
+ sm: { [vars$b.fontSize]: '14px' },
10806
+ md: { [vars$b.fontSize]: '16px' },
10807
+ lg: { [vars$b.fontSize]: '18px' },
10752
10808
  },
10753
10809
 
10754
10810
  mode: {
10755
10811
  default: {
10756
- [vars$9.textColor]: globalRefs$6.colors.surface.dark,
10812
+ [vars$b.textColor]: globalRefs$8.colors.surface.dark,
10757
10813
  _bordered: {
10758
- [vars$9.borderColor]: globalRefs$6.colors.surface.light,
10814
+ [vars$b.borderColor]: globalRefs$8.colors.surface.light,
10759
10815
  },
10760
10816
  },
10761
10817
  primary: {
10762
- [vars$9.textColor]: globalRefs$6.colors.primary.main,
10818
+ [vars$b.textColor]: globalRefs$8.colors.primary.main,
10763
10819
  _bordered: {
10764
- [vars$9.borderColor]: globalRefs$6.colors.primary.light,
10820
+ [vars$b.borderColor]: globalRefs$8.colors.primary.light,
10765
10821
  },
10766
10822
  },
10767
10823
  secondary: {
10768
- [vars$9.textColor]: globalRefs$6.colors.secondary.main,
10824
+ [vars$b.textColor]: globalRefs$8.colors.secondary.main,
10769
10825
  _bordered: {
10770
- [vars$9.borderColor]: globalRefs$6.colors.secondary.light,
10826
+ [vars$b.borderColor]: globalRefs$8.colors.secondary.light,
10771
10827
  },
10772
10828
  },
10773
10829
  error: {
10774
- [vars$9.textColor]: globalRefs$6.colors.error.main,
10830
+ [vars$b.textColor]: globalRefs$8.colors.error.main,
10775
10831
  _bordered: {
10776
- [vars$9.borderColor]: globalRefs$6.colors.error.light,
10832
+ [vars$b.borderColor]: globalRefs$8.colors.error.light,
10777
10833
  },
10778
10834
  },
10779
10835
  success: {
10780
- [vars$9.textColor]: globalRefs$6.colors.success.main,
10836
+ [vars$b.textColor]: globalRefs$8.colors.success.main,
10781
10837
  _bordered: {
10782
- [vars$9.borderColor]: globalRefs$6.colors.success.light,
10838
+ [vars$b.borderColor]: globalRefs$8.colors.success.light,
10783
10839
  },
10784
10840
  },
10785
10841
  },
@@ -10788,11 +10844,11 @@ const badge$2 = {
10788
10844
  var badge$3 = /*#__PURE__*/Object.freeze({
10789
10845
  __proto__: null,
10790
10846
  default: badge$2,
10791
- vars: vars$9
10847
+ vars: vars$b
10792
10848
  });
10793
10849
 
10794
- const componentName$9 = getComponentName('avatar');
10795
- class RawAvatar extends createBaseClass({ componentName: componentName$9, baseSelector: ':host > .wrapper' }) {
10850
+ const componentName$b = getComponentName('avatar');
10851
+ class RawAvatar extends createBaseClass({ componentName: componentName$b, baseSelector: ':host > .wrapper' }) {
10796
10852
  constructor() {
10797
10853
  super();
10798
10854
 
@@ -10893,16 +10949,16 @@ const AvatarClass = compose(
10893
10949
  componentNameValidationMixin
10894
10950
  )(RawAvatar);
10895
10951
 
10896
- const globalRefs$5 = getThemeRefs(globals);
10952
+ const globalRefs$7 = getThemeRefs(globals);
10897
10953
  const compVars = AvatarClass.cssVarList;
10898
10954
 
10899
10955
  const avatar = {
10900
- [compVars.hostDirection]: globalRefs$5.direction,
10901
- [compVars.editableIconColor]: globalRefs$5.colors.surface.dark,
10902
- [compVars.editableBorderColor]: globalRefs$5.colors.surface.dark,
10903
- [compVars.editableBackgroundColor]: globalRefs$5.colors.surface.main,
10904
- [compVars.avatarTextColor]: globalRefs$5.colors.surface.main,
10905
- [compVars.avatarBackgroundColor]: globalRefs$5.colors.surface.dark,
10956
+ [compVars.hostDirection]: globalRefs$7.direction,
10957
+ [compVars.editableIconColor]: globalRefs$7.colors.surface.dark,
10958
+ [compVars.editableBorderColor]: globalRefs$7.colors.surface.dark,
10959
+ [compVars.editableBackgroundColor]: globalRefs$7.colors.surface.main,
10960
+ [compVars.avatarTextColor]: globalRefs$7.colors.surface.main,
10961
+ [compVars.avatarBackgroundColor]: globalRefs$7.colors.surface.dark,
10906
10962
 
10907
10963
  _editable: {
10908
10964
  [compVars.cursor]: 'pointer',
@@ -10928,23 +10984,23 @@ const avatar = {
10928
10984
  },
10929
10985
  };
10930
10986
 
10931
- const vars$8 = {
10987
+ const vars$a = {
10932
10988
  ...compVars,
10933
10989
  };
10934
10990
 
10935
10991
  var avatar$1 = /*#__PURE__*/Object.freeze({
10936
10992
  __proto__: null,
10937
10993
  default: avatar,
10938
- vars: vars$8
10994
+ vars: vars$a
10939
10995
  });
10940
10996
 
10941
- const componentName$8 = getComponentName('mappings-field-internal');
10997
+ const componentName$a = getComponentName('mappings-field-internal');
10942
10998
 
10943
- createBaseInputClass({ componentName: componentName$8, baseSelector: 'div' });
10999
+ createBaseInputClass({ componentName: componentName$a, baseSelector: 'div' });
10944
11000
 
10945
- const componentName$7 = getComponentName('mappings-field');
11001
+ const componentName$9 = getComponentName('mappings-field');
10946
11002
 
10947
- const customMixin$1 = (superclass) =>
11003
+ const customMixin$2 = (superclass) =>
10948
11004
  class MappingsFieldMixinClass extends superclass {
10949
11005
  get defaultValues() {
10950
11006
  const defaultValuesAttr = this.getAttribute('default-values');
@@ -10971,14 +11027,14 @@ const customMixin$1 = (superclass) =>
10971
11027
  const template = document.createElement('template');
10972
11028
 
10973
11029
  template.innerHTML = `
10974
- <${componentName$8}
11030
+ <${componentName$a}
10975
11031
  tabindex="-1"
10976
- ></${componentName$8}>
11032
+ ></${componentName$a}>
10977
11033
  `;
10978
11034
 
10979
11035
  this.baseElement.appendChild(template.content.cloneNode(true));
10980
11036
 
10981
- this.inputElement = this.shadowRoot.querySelector(componentName$8);
11037
+ this.inputElement = this.shadowRoot.querySelector(componentName$a);
10982
11038
 
10983
11039
  forwardAttrs(this, this.inputElement, {
10984
11040
  includeAttrs: [
@@ -11060,7 +11116,7 @@ const MappingsFieldClass = compose(
11060
11116
  proxyParentValidation: true,
11061
11117
  }),
11062
11118
  componentNameValidationMixin,
11063
- customMixin$1
11119
+ customMixin$2
11064
11120
  )(
11065
11121
  createProxy({
11066
11122
  slots: [],
@@ -11107,47 +11163,47 @@ const MappingsFieldClass = compose(
11107
11163
  'options',
11108
11164
  'error-message',
11109
11165
  ],
11110
- componentName: componentName$7,
11166
+ componentName: componentName$9,
11111
11167
  })
11112
11168
  );
11113
11169
 
11114
- const globalRefs$4 = getThemeRefs(globals);
11170
+ const globalRefs$6 = getThemeRefs(globals);
11115
11171
 
11116
- const vars$7 = MappingsFieldClass.cssVarList;
11172
+ const vars$9 = MappingsFieldClass.cssVarList;
11117
11173
 
11118
11174
  const mappingsField = {
11119
- [vars$7.hostWidth]: refs.width,
11120
- [vars$7.hostDirection]: refs.direction,
11121
- [vars$7.fontSize]: refs.fontSize,
11122
- [vars$7.fontFamily]: refs.fontFamily,
11123
- [vars$7.separatorFontSize]: '14px',
11124
- [vars$7.labelsFontSize]: '14px',
11125
- [vars$7.labelsLineHeight]: '1',
11126
- [vars$7.labelsMarginBottom]: '6px',
11127
- [vars$7.labelTextColor]: refs.labelTextColor,
11128
- [vars$7.itemMarginBottom]: '1em',
11175
+ [vars$9.hostWidth]: refs.width,
11176
+ [vars$9.hostDirection]: refs.direction,
11177
+ [vars$9.fontSize]: refs.fontSize,
11178
+ [vars$9.fontFamily]: refs.fontFamily,
11179
+ [vars$9.separatorFontSize]: '14px',
11180
+ [vars$9.labelsFontSize]: '14px',
11181
+ [vars$9.labelsLineHeight]: '1',
11182
+ [vars$9.labelsMarginBottom]: '6px',
11183
+ [vars$9.labelTextColor]: refs.labelTextColor,
11184
+ [vars$9.itemMarginBottom]: '1em',
11129
11185
  // To be positioned correctly, the min width has to match the text field min width
11130
- [vars$7.valueLabelMinWidth]: refs.minWidth,
11186
+ [vars$9.valueLabelMinWidth]: refs.minWidth,
11131
11187
  // To be positioned correctly, the min width has to match the combo box field min width
11132
- [vars$7.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$4.border.xs})`,
11133
- [vars$7.separatorWidth]: '70px',
11134
- [vars$7.removeButtonWidth]: '60px',
11188
+ [vars$9.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$6.border.xs})`,
11189
+ [vars$9.separatorWidth]: '70px',
11190
+ [vars$9.removeButtonWidth]: '60px',
11135
11191
  };
11136
11192
 
11137
11193
  var mappingsField$1 = /*#__PURE__*/Object.freeze({
11138
11194
  __proto__: null,
11139
11195
  default: mappingsField,
11140
11196
  mappingsField: mappingsField,
11141
- vars: vars$7
11197
+ vars: vars$9
11142
11198
  });
11143
11199
 
11144
11200
  var deleteIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEgMTZDMSAxNy4xIDEuOSAxOCAzIDE4SDExQzEyLjEgMTggMTMgMTcuMSAxMyAxNlY0SDFWMTZaTTMgNkgxMVYxNkgzVjZaTTEwLjUgMUw5LjUgMEg0LjVMMy41IDFIMFYzSDE0VjFIMTAuNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
11145
11201
 
11146
11202
  var editIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjAwMDIgMC45OTIxNDlDMTAuMDAwMiAxLjAxNjE1IDEwLjAwMDIgMS4wMTYxNSAxMC4wMDAyIDEuMDE2MTVMOC4yMjQxOSAzLjAwODE1SDIuOTkyMTlDMi40NjQxOSAzLjAwODE1IDIuMDA4MTkgMy40NDAxNSAyLjAwODE5IDMuOTkyMTVWMTIuMDA4MkMyLjAwODE5IDEyLjUzNjIgMi40NDAxOSAxMi45OTIyIDIuOTkyMTkgMTIuOTkyMkg1LjUzNjE5QzUuODQ4MTkgMTMuMDQwMiA2LjE2MDE5IDEzLjA0MDIgNi40NzIxOSAxMi45OTIySDExLjAwODJDMTEuNTM2MiAxMi45OTIyIDExLjk5MjIgMTIuNTYwMiAxMS45OTIyIDEyLjAwODJWNy43ODQxNkwxMy45MzYyIDUuNjI0MTVMMTQuMDA4MiA1LjY3MjE1VjExLjk4NDJDMTQuMDA4MiAxMy42NjQyIDEyLjY2NDIgMTUuMDA4MiAxMS4wMDgyIDE1LjAwODJIMy4wMTYxOUMxLjMzNjE5IDE1LjAwODIgLTAuMDA3ODEyNSAxMy42NjQyIC0wLjAwNzgxMjUgMTEuOTg0MlYzLjk5MjE1Qy0wLjAwNzgxMjUgMi4zMzYxNSAxLjMzNjE5IDAuOTkyMTQ5IDMuMDE2MTkgMC45OTIxNDlIMTAuMDAwMlpNMTEuMjcyMiAyLjYyNDE1TDEyLjYxNjIgNC4xMTIxNUw3LjcyMDE5IDkuNjgwMTZDNy41MDQxOSA5LjkyMDE2IDYuODMyMTkgMTAuMjMyMiA1LjY4MDE5IDEwLjYxNjJDNS42NTYxOSAxMC42NDAyIDUuNjA4MTkgMTAuNjQwMiA1LjU2MDE5IDEwLjYxNjJDNS40NjQxOSAxMC41OTIyIDUuMzkyMTkgMTAuNDcyMiA1LjQ0MDE5IDEwLjM3NjJDNS43NTIxOSA5LjI0ODE2IDYuMDQwMTkgOC41NTIxNiA2LjI1NjE5IDguMzEyMTZMMTEuMjcyMiAyLjYyNDE1Wk0xMS45MjAyIDEuODU2MTVMMTMuMjg4MiAwLjMyMDE0OUMxMy42NDgyIC0wLjA4Nzg1MTYgMTQuMjcyMiAtMC4xMTE4NTIgMTQuNjgwMiAwLjI3MjE0OUMxNS4wODgyIDAuNjMyMTQ5IDE1LjExMjIgMS4yODAxNSAxNC43NTIyIDEuNjg4MTVMMTMuMjY0MiAzLjM2ODE1TDExLjkyMDIgMS44NTYxNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
11147
11203
 
11148
- const componentName$6 = getComponentName('user-attribute');
11204
+ const componentName$8 = getComponentName('user-attribute');
11149
11205
  class RawUserAttribute extends createBaseClass({
11150
- componentName: componentName$6,
11206
+ componentName: componentName$8,
11151
11207
  baseSelector: ':host > .root',
11152
11208
  }) {
11153
11209
  constructor() {
@@ -11377,32 +11433,32 @@ const UserAttributeClass = compose(
11377
11433
  componentNameValidationMixin
11378
11434
  )(RawUserAttribute);
11379
11435
 
11380
- const globalRefs$3 = getThemeRefs(globals);
11381
- const vars$6 = UserAttributeClass.cssVarList;
11436
+ const globalRefs$5 = getThemeRefs(globals);
11437
+ const vars$8 = UserAttributeClass.cssVarList;
11382
11438
 
11383
11439
  const userAttribute = {
11384
- [vars$6.hostDirection]: globalRefs$3.direction,
11385
- [vars$6.labelTextWidth]: '150px',
11386
- [vars$6.valueTextWidth]: '200px',
11387
- [vars$6.badgeMaxWidth]: '85px',
11388
- [vars$6.itemsGap]: '16px',
11389
- [vars$6.hostMinWidth]: '530px',
11440
+ [vars$8.hostDirection]: globalRefs$5.direction,
11441
+ [vars$8.labelTextWidth]: '150px',
11442
+ [vars$8.valueTextWidth]: '200px',
11443
+ [vars$8.badgeMaxWidth]: '85px',
11444
+ [vars$8.itemsGap]: '16px',
11445
+ [vars$8.hostMinWidth]: '530px',
11390
11446
  _fullWidth: {
11391
- [vars$6.hostWidth]: '100%',
11447
+ [vars$8.hostWidth]: '100%',
11392
11448
  },
11393
11449
  };
11394
11450
 
11395
11451
  var userAttribute$1 = /*#__PURE__*/Object.freeze({
11396
11452
  __proto__: null,
11397
11453
  default: userAttribute,
11398
- vars: vars$6
11454
+ vars: vars$8
11399
11455
  });
11400
11456
 
11401
11457
  var greenVIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMEMzLjYgMCAwIDMuNiAwIDhDMCAxMi40IDMuNiAxNiA4IDE2QzEyLjQgMTYgMTYgMTIuNCAxNiA4QzE2IDMuNiAxMi40IDAgOCAwWk03LjEgMTEuN0wyLjkgNy42TDQuMyA2LjJMNyA4LjlMMTIgNEwxMy40IDUuNEw3LjEgMTEuN1oiIGZpbGw9IiM0Q0FGNTAiLz4KPC9zdmc+Cg==";
11402
11458
 
11403
- const componentName$5 = getComponentName('user-auth-method');
11459
+ const componentName$7 = getComponentName('user-auth-method');
11404
11460
  class RawUserAuthMethod extends createBaseClass({
11405
- componentName: componentName$5,
11461
+ componentName: componentName$7,
11406
11462
  baseSelector: ':host > .root',
11407
11463
  }) {
11408
11464
  constructor() {
@@ -11594,33 +11650,33 @@ const UserAuthMethodClass = compose(
11594
11650
  componentNameValidationMixin
11595
11651
  )(RawUserAuthMethod);
11596
11652
 
11597
- const globalRefs$2 = getThemeRefs(globals);
11598
- const vars$5 = UserAuthMethodClass.cssVarList;
11653
+ const globalRefs$4 = getThemeRefs(globals);
11654
+ const vars$7 = UserAuthMethodClass.cssVarList;
11599
11655
 
11600
11656
  const userAuthMethod = {
11601
- [vars$5.hostDirection]: globalRefs$2.direction,
11602
- [vars$5.labelTextWidth]: '200px',
11603
- [vars$5.itemsGap]: '16px',
11604
- [vars$5.hostMinWidth]: '530px',
11605
- [vars$5.iconSize]: '24px',
11657
+ [vars$7.hostDirection]: globalRefs$4.direction,
11658
+ [vars$7.labelTextWidth]: '200px',
11659
+ [vars$7.itemsGap]: '16px',
11660
+ [vars$7.hostMinWidth]: '530px',
11661
+ [vars$7.iconSize]: '24px',
11606
11662
  _fullWidth: {
11607
- [vars$5.hostWidth]: '100%',
11663
+ [vars$7.hostWidth]: '100%',
11608
11664
  },
11609
11665
  };
11610
11666
 
11611
11667
  var userAuthMethod$1 = /*#__PURE__*/Object.freeze({
11612
11668
  __proto__: null,
11613
11669
  default: userAuthMethod,
11614
- vars: vars$5
11670
+ vars: vars$7
11615
11671
  });
11616
11672
 
11617
- const componentName$4 = getComponentName('saml-group-mappings-internal');
11673
+ const componentName$6 = getComponentName('saml-group-mappings-internal');
11618
11674
 
11619
- createBaseInputClass({ componentName: componentName$4, baseSelector: '' });
11675
+ createBaseInputClass({ componentName: componentName$6, baseSelector: '' });
11620
11676
 
11621
- const componentName$3 = getComponentName('saml-group-mappings');
11677
+ const componentName$5 = getComponentName('saml-group-mappings');
11622
11678
 
11623
- const customMixin = (superclass) =>
11679
+ const customMixin$1 = (superclass) =>
11624
11680
  class SamlGroupMappingsMixinClass extends superclass {
11625
11681
  init() {
11626
11682
  super.init?.();
@@ -11628,14 +11684,14 @@ const customMixin = (superclass) =>
11628
11684
  const template = document.createElement('template');
11629
11685
 
11630
11686
  template.innerHTML = `
11631
- <${componentName$4}
11687
+ <${componentName$6}
11632
11688
  tabindex="-1"
11633
- ></${componentName$4}>
11689
+ ></${componentName$6}>
11634
11690
  `;
11635
11691
 
11636
11692
  this.baseElement.appendChild(template.content.cloneNode(true));
11637
11693
 
11638
- this.inputElement = this.shadowRoot.querySelector(componentName$4);
11694
+ this.inputElement = this.shadowRoot.querySelector(componentName$6);
11639
11695
 
11640
11696
  forwardAttrs(this, this.inputElement, {
11641
11697
  includeAttrs: [
@@ -11677,7 +11733,7 @@ const SamlGroupMappingsClass = compose(
11677
11733
  proxyParentValidation: true,
11678
11734
  }),
11679
11735
  componentNameValidationMixin,
11680
- customMixin
11736
+ customMixin$1
11681
11737
  )(
11682
11738
  createProxy({
11683
11739
  slots: [],
@@ -11712,61 +11768,61 @@ const SamlGroupMappingsClass = compose(
11712
11768
  'options',
11713
11769
  'error-message',
11714
11770
  ],
11715
- componentName: componentName$3,
11771
+ componentName: componentName$5,
11716
11772
  })
11717
11773
  );
11718
11774
 
11719
- const vars$4 = SamlGroupMappingsClass.cssVarList;
11775
+ const vars$6 = SamlGroupMappingsClass.cssVarList;
11720
11776
 
11721
11777
  const samlGroupMappings = {
11722
- [vars$4.hostWidth]: refs.width,
11723
- [vars$4.hostDirection]: refs.direction,
11724
- [vars$4.groupNameInputMarginBottom]: '1em',
11778
+ [vars$6.hostWidth]: refs.width,
11779
+ [vars$6.hostDirection]: refs.direction,
11780
+ [vars$6.groupNameInputMarginBottom]: '1em',
11725
11781
  };
11726
11782
 
11727
11783
  var samlGroupMappings$1 = /*#__PURE__*/Object.freeze({
11728
11784
  __proto__: null,
11729
11785
  default: samlGroupMappings,
11730
11786
  samlGroupMappings: samlGroupMappings,
11731
- vars: vars$4
11787
+ vars: vars$6
11732
11788
  });
11733
11789
 
11734
- const globalRefs$1 = getThemeRefs(globals);
11735
- const vars$3 = PolicyValidationClass.cssVarList;
11790
+ const globalRefs$3 = getThemeRefs(globals);
11791
+ const vars$5 = PolicyValidationClass.cssVarList;
11736
11792
 
11737
11793
  const policyValidation = {
11738
- [vars$3.fontFamily]: refs.fontFamily,
11739
- [vars$3.fontSize]: refs.labelFontSize,
11740
- [vars$3.textColor]: refs.labelTextColor,
11741
- [vars$3.borderWidth]: refs.borderWidth,
11742
- [vars$3.borderStyle]: refs.borderStyle,
11743
- [vars$3.borderColor]: refs.borderColor,
11744
- [vars$3.borderRadius]: globalRefs$1.radius.sm,
11745
- [vars$3.backgroundColor]: 'none',
11746
- [vars$3.padding]: '0px',
11747
- [vars$3.labelMargin]: globalRefs$1.spacing.sm,
11748
- [vars$3.itemsSpacing]: globalRefs$1.spacing.lg,
11749
- [vars$3.itemSymbolDefault]: "'\\2022'", // "•"
11750
- [vars$3.itemSymbolSuccess]: "'\\2713'", // "✓"
11751
- [vars$3.itemSymbolError]: "'\\2A09'", // "⨉"
11752
- [vars$3.itemSymbolSuccessColor]: globalRefs$1.colors.success.main,
11753
- [vars$3.itemSymbolErrorColor]: globalRefs$1.colors.error.main,
11794
+ [vars$5.fontFamily]: refs.fontFamily,
11795
+ [vars$5.fontSize]: refs.labelFontSize,
11796
+ [vars$5.textColor]: refs.labelTextColor,
11797
+ [vars$5.borderWidth]: refs.borderWidth,
11798
+ [vars$5.borderStyle]: refs.borderStyle,
11799
+ [vars$5.borderColor]: refs.borderColor,
11800
+ [vars$5.borderRadius]: globalRefs$3.radius.sm,
11801
+ [vars$5.backgroundColor]: 'none',
11802
+ [vars$5.padding]: '0px',
11803
+ [vars$5.labelMargin]: globalRefs$3.spacing.sm,
11804
+ [vars$5.itemsSpacing]: globalRefs$3.spacing.lg,
11805
+ [vars$5.itemSymbolDefault]: "'\\2022'", // "•"
11806
+ [vars$5.itemSymbolSuccess]: "'\\2713'", // "✓"
11807
+ [vars$5.itemSymbolError]: "'\\2A09'", // "⨉"
11808
+ [vars$5.itemSymbolSuccessColor]: globalRefs$3.colors.success.main,
11809
+ [vars$5.itemSymbolErrorColor]: globalRefs$3.colors.error.main,
11754
11810
  };
11755
11811
 
11756
11812
  var policyValidation$1 = /*#__PURE__*/Object.freeze({
11757
11813
  __proto__: null,
11758
11814
  default: policyValidation,
11759
- vars: vars$3
11815
+ vars: vars$5
11760
11816
  });
11761
11817
 
11762
- const vars$2 = IconClass.cssVarList;
11818
+ const vars$4 = IconClass.cssVarList;
11763
11819
 
11764
11820
  const icon = {};
11765
11821
 
11766
11822
  var icon$1 = /*#__PURE__*/Object.freeze({
11767
11823
  __proto__: null,
11768
11824
  default: icon,
11769
- vars: vars$2
11825
+ vars: vars$4
11770
11826
  });
11771
11827
 
11772
11828
  const decode = (input) => {
@@ -11779,9 +11835,9 @@ const tpl = (input, inline) => {
11779
11835
  return inline ? input : `<pre>${input}</pre>`;
11780
11836
  };
11781
11837
 
11782
- const componentName$2 = getComponentName('code-snippet');
11838
+ const componentName$4 = getComponentName('code-snippet');
11783
11839
 
11784
- let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$2, baseSelector: ':host > code' }) {
11840
+ let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$4, baseSelector: ':host > code' }) {
11785
11841
  static get observedAttributes() {
11786
11842
  return ['lang', 'inline'];
11787
11843
  }
@@ -12011,9 +12067,9 @@ const CodeSnippetClass = compose(
12011
12067
  componentNameValidationMixin
12012
12068
  )(CodeSnippet$1);
12013
12069
 
12014
- const globalRefs = getThemeRefs(globals);
12070
+ const globalRefs$2 = getThemeRefs(globals);
12015
12071
 
12016
- const vars$1 = CodeSnippetClass.cssVarList;
12072
+ const vars$3 = CodeSnippetClass.cssVarList;
12017
12073
 
12018
12074
  const light = {
12019
12075
  color1: '#fa0',
@@ -12048,50 +12104,50 @@ const dark = {
12048
12104
  };
12049
12105
 
12050
12106
  const CodeSnippet = {
12051
- [vars$1.rootBgColor]: globalRefs.colors.surface.main,
12052
- [vars$1.rootTextColor]: globalRefs.colors.surface.contrast,
12053
- [vars$1.docTagTextColor]: light.color2,
12054
- [vars$1.keywordTextColor]: light.color2,
12055
- [vars$1.metaKeywordTextColor]: light.color2,
12056
- [vars$1.templateTagTextColor]: light.color2,
12057
- [vars$1.templateVariableTextColor]: light.color2,
12058
- [vars$1.typeTextColor]: light.color2,
12059
- [vars$1.variableLanguageTextColor]: light.color2,
12060
- [vars$1.titleTextColor]: light.color3,
12061
- [vars$1.titleClassTextColor]: light.color3,
12062
- [vars$1.titleClassInheritedTextColor]: light.color3,
12063
- [vars$1.titleFunctionTextColor]: light.color3,
12064
- [vars$1.attrTextColor]: light.color4,
12065
- [vars$1.attributeTextColor]: light.color4,
12066
- [vars$1.literalTextColor]: light.color4,
12067
- [vars$1.metaTextColor]: light.color4,
12068
- [vars$1.numberTextColor]: light.color4,
12069
- [vars$1.operatorTextColor]: light.color4,
12070
- [vars$1.variableTextColor]: light.color4,
12071
- [vars$1.selectorAttrTextColor]: light.color4,
12072
- [vars$1.selectorClassTextColor]: light.color4,
12073
- [vars$1.selectorIdTextColor]: light.color4,
12074
- [vars$1.regexpTextColor]: light.color13,
12075
- [vars$1.stringTextColor]: light.color13,
12076
- [vars$1.metaStringTextColor]: light.color13,
12077
- [vars$1.builtInTextColor]: light.color5,
12078
- [vars$1.symbolTextColor]: light.color5,
12079
- [vars$1.commentTextColor]: light.color6,
12080
- [vars$1.codeTextColor]: light.color6,
12081
- [vars$1.formulaTextColor]: light.color6,
12082
- [vars$1.nameTextColor]: light.color7,
12083
- [vars$1.quoteTextColor]: light.color7,
12084
- [vars$1.selectorTagTextColor]: light.color7,
12085
- [vars$1.selectorPseudoTextColor]: light.color7,
12086
- [vars$1.substTextColor]: light.color8,
12087
- [vars$1.sectionTextColor]: light.color4,
12088
- [vars$1.bulletTextColor]: light.color9,
12089
- [vars$1.emphasisTextColor]: light.color8,
12090
- [vars$1.strongTextColor]: light.color8,
12091
- [vars$1.additionTextColor]: light.color7,
12092
- [vars$1.additionBgColor]: light.color10,
12093
- [vars$1.deletionTextColor]: light.color2,
12094
- [vars$1.deletionBgColor]: light.color10,
12107
+ [vars$3.rootBgColor]: globalRefs$2.colors.surface.main,
12108
+ [vars$3.rootTextColor]: globalRefs$2.colors.surface.contrast,
12109
+ [vars$3.docTagTextColor]: light.color2,
12110
+ [vars$3.keywordTextColor]: light.color2,
12111
+ [vars$3.metaKeywordTextColor]: light.color2,
12112
+ [vars$3.templateTagTextColor]: light.color2,
12113
+ [vars$3.templateVariableTextColor]: light.color2,
12114
+ [vars$3.typeTextColor]: light.color2,
12115
+ [vars$3.variableLanguageTextColor]: light.color2,
12116
+ [vars$3.titleTextColor]: light.color3,
12117
+ [vars$3.titleClassTextColor]: light.color3,
12118
+ [vars$3.titleClassInheritedTextColor]: light.color3,
12119
+ [vars$3.titleFunctionTextColor]: light.color3,
12120
+ [vars$3.attrTextColor]: light.color4,
12121
+ [vars$3.attributeTextColor]: light.color4,
12122
+ [vars$3.literalTextColor]: light.color4,
12123
+ [vars$3.metaTextColor]: light.color4,
12124
+ [vars$3.numberTextColor]: light.color4,
12125
+ [vars$3.operatorTextColor]: light.color4,
12126
+ [vars$3.variableTextColor]: light.color4,
12127
+ [vars$3.selectorAttrTextColor]: light.color4,
12128
+ [vars$3.selectorClassTextColor]: light.color4,
12129
+ [vars$3.selectorIdTextColor]: light.color4,
12130
+ [vars$3.regexpTextColor]: light.color13,
12131
+ [vars$3.stringTextColor]: light.color13,
12132
+ [vars$3.metaStringTextColor]: light.color13,
12133
+ [vars$3.builtInTextColor]: light.color5,
12134
+ [vars$3.symbolTextColor]: light.color5,
12135
+ [vars$3.commentTextColor]: light.color6,
12136
+ [vars$3.codeTextColor]: light.color6,
12137
+ [vars$3.formulaTextColor]: light.color6,
12138
+ [vars$3.nameTextColor]: light.color7,
12139
+ [vars$3.quoteTextColor]: light.color7,
12140
+ [vars$3.selectorTagTextColor]: light.color7,
12141
+ [vars$3.selectorPseudoTextColor]: light.color7,
12142
+ [vars$3.substTextColor]: light.color8,
12143
+ [vars$3.sectionTextColor]: light.color4,
12144
+ [vars$3.bulletTextColor]: light.color9,
12145
+ [vars$3.emphasisTextColor]: light.color8,
12146
+ [vars$3.strongTextColor]: light.color8,
12147
+ [vars$3.additionTextColor]: light.color7,
12148
+ [vars$3.additionBgColor]: light.color10,
12149
+ [vars$3.deletionTextColor]: light.color2,
12150
+ [vars$3.deletionBgColor]: light.color10,
12095
12151
  /* purposely ignored */
12096
12152
  // [vars.charEscapeTextColor]: '',
12097
12153
  // [vars.linkTextColor]: '',
@@ -12103,50 +12159,50 @@ const CodeSnippet = {
12103
12159
 
12104
12160
  const codeSnippetDarkThemeOverrides = {
12105
12161
  codeSnippet: {
12106
- [vars$1.rootBgColor]: globalRefs.colors.surface.main,
12107
- [vars$1.rootTextColor]: globalRefs.colors.surface.contrast,
12108
- [vars$1.docTagTextColor]: dark.color2,
12109
- [vars$1.keywordTextColor]: dark.color2,
12110
- [vars$1.metaKeywordTextColor]: dark.color2,
12111
- [vars$1.templateTagTextColor]: dark.color2,
12112
- [vars$1.templateVariableTextColor]: dark.color2,
12113
- [vars$1.typeTextColor]: dark.color2,
12114
- [vars$1.variableLanguageTextColor]: dark.color2,
12115
- [vars$1.titleTextColor]: dark.color3,
12116
- [vars$1.titleClassTextColor]: dark.color3,
12117
- [vars$1.titleClassInheritedTextColor]: dark.color3,
12118
- [vars$1.titleFunctionTextColor]: dark.color3,
12119
- [vars$1.attrTextColor]: dark.color4,
12120
- [vars$1.attributeTextColor]: dark.color4,
12121
- [vars$1.literalTextColor]: dark.color4,
12122
- [vars$1.metaTextColor]: dark.color4,
12123
- [vars$1.numberTextColor]: dark.color4,
12124
- [vars$1.operatorTextColor]: dark.color4,
12125
- [vars$1.variableTextColor]: dark.color4,
12126
- [vars$1.selectorAttrTextColor]: dark.color4,
12127
- [vars$1.selectorClassTextColor]: dark.color4,
12128
- [vars$1.selectorIdTextColor]: dark.color4,
12129
- [vars$1.regexpTextColor]: dark.color13,
12130
- [vars$1.stringTextColor]: dark.color13,
12131
- [vars$1.metaStringTextColor]: dark.color13,
12132
- [vars$1.builtInTextColor]: dark.color5,
12133
- [vars$1.symbolTextColor]: dark.color5,
12134
- [vars$1.commentTextColor]: dark.color6,
12135
- [vars$1.codeTextColor]: dark.color6,
12136
- [vars$1.formulaTextColor]: dark.color6,
12137
- [vars$1.nameTextColor]: dark.color7,
12138
- [vars$1.quoteTextColor]: dark.color7,
12139
- [vars$1.selectorTagTextColor]: dark.color7,
12140
- [vars$1.selectorPseudoTextColor]: dark.color7,
12141
- [vars$1.substTextColor]: dark.color8,
12142
- [vars$1.sectionTextColor]: dark.color4,
12143
- [vars$1.bulletTextColor]: dark.color9,
12144
- [vars$1.emphasisTextColor]: dark.color8,
12145
- [vars$1.strongTextColor]: dark.color8,
12146
- [vars$1.additionTextColor]: dark.color7,
12147
- [vars$1.additionBgColor]: dark.color10,
12148
- [vars$1.deletionTextColor]: dark.color2,
12149
- [vars$1.deletionBgColor]: dark.color10,
12162
+ [vars$3.rootBgColor]: globalRefs$2.colors.surface.main,
12163
+ [vars$3.rootTextColor]: globalRefs$2.colors.surface.contrast,
12164
+ [vars$3.docTagTextColor]: dark.color2,
12165
+ [vars$3.keywordTextColor]: dark.color2,
12166
+ [vars$3.metaKeywordTextColor]: dark.color2,
12167
+ [vars$3.templateTagTextColor]: dark.color2,
12168
+ [vars$3.templateVariableTextColor]: dark.color2,
12169
+ [vars$3.typeTextColor]: dark.color2,
12170
+ [vars$3.variableLanguageTextColor]: dark.color2,
12171
+ [vars$3.titleTextColor]: dark.color3,
12172
+ [vars$3.titleClassTextColor]: dark.color3,
12173
+ [vars$3.titleClassInheritedTextColor]: dark.color3,
12174
+ [vars$3.titleFunctionTextColor]: dark.color3,
12175
+ [vars$3.attrTextColor]: dark.color4,
12176
+ [vars$3.attributeTextColor]: dark.color4,
12177
+ [vars$3.literalTextColor]: dark.color4,
12178
+ [vars$3.metaTextColor]: dark.color4,
12179
+ [vars$3.numberTextColor]: dark.color4,
12180
+ [vars$3.operatorTextColor]: dark.color4,
12181
+ [vars$3.variableTextColor]: dark.color4,
12182
+ [vars$3.selectorAttrTextColor]: dark.color4,
12183
+ [vars$3.selectorClassTextColor]: dark.color4,
12184
+ [vars$3.selectorIdTextColor]: dark.color4,
12185
+ [vars$3.regexpTextColor]: dark.color13,
12186
+ [vars$3.stringTextColor]: dark.color13,
12187
+ [vars$3.metaStringTextColor]: dark.color13,
12188
+ [vars$3.builtInTextColor]: dark.color5,
12189
+ [vars$3.symbolTextColor]: dark.color5,
12190
+ [vars$3.commentTextColor]: dark.color6,
12191
+ [vars$3.codeTextColor]: dark.color6,
12192
+ [vars$3.formulaTextColor]: dark.color6,
12193
+ [vars$3.nameTextColor]: dark.color7,
12194
+ [vars$3.quoteTextColor]: dark.color7,
12195
+ [vars$3.selectorTagTextColor]: dark.color7,
12196
+ [vars$3.selectorPseudoTextColor]: dark.color7,
12197
+ [vars$3.substTextColor]: dark.color8,
12198
+ [vars$3.sectionTextColor]: dark.color4,
12199
+ [vars$3.bulletTextColor]: dark.color9,
12200
+ [vars$3.emphasisTextColor]: dark.color8,
12201
+ [vars$3.strongTextColor]: dark.color8,
12202
+ [vars$3.additionTextColor]: dark.color7,
12203
+ [vars$3.additionBgColor]: dark.color10,
12204
+ [vars$3.deletionTextColor]: dark.color2,
12205
+ [vars$3.deletionBgColor]: dark.color10,
12150
12206
  },
12151
12207
  };
12152
12208
 
@@ -12154,6 +12210,326 @@ var codeSnippet = /*#__PURE__*/Object.freeze({
12154
12210
  __proto__: null,
12155
12211
  codeSnippetDarkThemeOverrides: codeSnippetDarkThemeOverrides,
12156
12212
  default: CodeSnippet,
12213
+ vars: vars$3
12214
+ });
12215
+
12216
+ const componentName$3 = getComponentName('radio-button');
12217
+
12218
+ const customMixin = (superclass) =>
12219
+ class CustomMixin extends superclass {
12220
+ constructor() {
12221
+ super();
12222
+
12223
+ this.baseElement.checkValidity = () => {};
12224
+ }
12225
+
12226
+ init() {
12227
+ // we are forwarding vaadin checked-changed event
12228
+ this.baseElement.addEventListener('checked-changed', (e) => {
12229
+ this.dispatchEvent(
12230
+ new CustomEvent(
12231
+ 'checked-changed',
12232
+ { detail: e.detail },
12233
+ { bubbles: true, composed: true }
12234
+ )
12235
+ );
12236
+ });
12237
+
12238
+ super.init?.();
12239
+
12240
+ observeChildren(this, this.renderLabel.bind(this));
12241
+ }
12242
+
12243
+ renderLabel() {
12244
+ this.baseElement.setAttribute('label', this.textContent);
12245
+ }
12246
+
12247
+ get value() {
12248
+ return this.getAttribute('value');
12249
+ }
12250
+ };
12251
+
12252
+ const RadioButtonClass = compose(
12253
+ createStyleMixin({
12254
+ mappings: {
12255
+ cursor: [{}, { selector: 'label' }],
12256
+ fontSize: [{ selector: 'label' }, {}],
12257
+ labelTextColor: { selector: 'label', property: 'color' },
12258
+ fontFamily: { selector: 'label' },
12259
+ radioSize: [
12260
+ { selector: '::part(radio)', property: 'height' },
12261
+ { selector: '::part(radio)', property: 'width' },
12262
+ ],
12263
+ radioBackgroundColor: { selector: '::part(radio)', property: 'background-color' },
12264
+ radioMargin: { selector: '::part(radio)', property: 'margin' },
12265
+ radioCheckedSize: { selector: '::part(radio)::after', property: 'border-width' },
12266
+ radioCheckedColor: { selector: '::part(radio)::after', property: 'border-color' },
12267
+ },
12268
+ }),
12269
+ composedProxyInputMixin({ proxyProps: ['setSelectionRange'] }),
12270
+ componentNameValidationMixin,
12271
+ customMixin
12272
+ )(
12273
+ createProxy({
12274
+ slots: [''],
12275
+ wrappedEleName: 'vaadin-radio-button',
12276
+ excludeAttrsSync: ['tabindex', 'data'],
12277
+ includeForwardProps: ['checked', 'name', 'disabled'],
12278
+ componentName: componentName$3,
12279
+ })
12280
+ );
12281
+
12282
+ const componentName$2 = getComponentName('radio-group');
12283
+
12284
+ const RadioGroupMixin = (superclass) =>
12285
+ class RadioGroupMixinClass extends superclass {
12286
+ // eslint-disable-next-line class-methods-use-this
12287
+ #renderItem = ({ value, label }) =>
12288
+ `<descope-radio-button value="${value}">${label}</descope-radio-button>`;
12289
+
12290
+ #data;
12291
+
12292
+ constructor() {
12293
+ super();
12294
+
12295
+ // we are overriding vaadin children getter so it will run on our custom elements
12296
+ Object.defineProperty(this.baseElement, 'children', {
12297
+ get: () => this.querySelectorAll(componentName$3),
12298
+ });
12299
+
12300
+ // we are overriding vaadin __filterRadioButtons so it will run on our custom elements
12301
+ this.baseElement.__filterRadioButtons = (nodes) => {
12302
+ return nodes.filter((node) => node.localName === componentName$3);
12303
+ };
12304
+
12305
+ // vaadin radio group missing some input properties
12306
+ this.baseElement.setCustomValidity = () => {};
12307
+ }
12308
+
12309
+ get items() {
12310
+ return this.shadowRoot.querySelector('slot').assignedElements();
12311
+ }
12312
+
12313
+ get size() {
12314
+ return this.getAttribute('size');
12315
+ }
12316
+
12317
+ get data() {
12318
+ if (this.#data) return this.#data;
12319
+
12320
+ const dataAttr = this.getAttribute('data');
12321
+
12322
+ if (dataAttr) {
12323
+ try {
12324
+ const data = JSON.parse(dataAttr);
12325
+ if (this.isValidDataType(data)) {
12326
+ return data;
12327
+ }
12328
+ } catch (e) {
12329
+ // eslint-disable-next-line no-console
12330
+ console.error('could not parse data string from attribute "data" - ', e.message);
12331
+ }
12332
+ }
12333
+
12334
+ return [];
12335
+ }
12336
+
12337
+ set data(data) {
12338
+ if (this.isValidDataType(data)) {
12339
+ this.#data = data;
12340
+ this.renderItems();
12341
+ }
12342
+ }
12343
+
12344
+ get defaultValue() {
12345
+ return this.getAttribute('default-value');
12346
+ }
12347
+
12348
+ // eslint-disable-next-line class-methods-use-this
12349
+ isValidDataType(data) {
12350
+ const isValid = Array.isArray(data);
12351
+ if (!isValid) {
12352
+ // eslint-disable-next-line no-console
12353
+ console.error('data must be an array, received:', data);
12354
+ }
12355
+
12356
+ return isValid;
12357
+ }
12358
+
12359
+ getItemsTemplate() {
12360
+ return this.data?.reduce?.((acc, item) => acc + (this.#renderItem?.(item || {}) || ''), '');
12361
+ }
12362
+
12363
+ renderItems() {
12364
+ const template = this.getItemsTemplate();
12365
+ if (template) this.innerHTML = template;
12366
+ }
12367
+
12368
+ init() {
12369
+ super.init?.();
12370
+
12371
+ this.inputElement = this.baseElement;
12372
+
12373
+ this.renderItems();
12374
+
12375
+ observeAttributes(this, this.renderItems.bind(this), { includeAttrs: ['data'] });
12376
+
12377
+ Object.defineProperty(this.baseElement, 'validity', {
12378
+ get: () => {
12379
+ return { valueMissing: !this.baseElement.checkValidity() };
12380
+ },
12381
+ });
12382
+
12383
+ forwardAttrs(this, this.baseElement, {
12384
+ includeAttrs: ['layout'],
12385
+ mapAttrs: { layout: 'theme' },
12386
+ });
12387
+
12388
+ setTimeout(() => {
12389
+ if (this.defaultValue) {
12390
+ this.value = this.defaultValue;
12391
+ }
12392
+ });
12393
+
12394
+ // we want new items to get the size
12395
+ observeChildren(this, ({ addedNodes }) => {
12396
+ addedNodes.forEach((node) => {
12397
+ node.setAttribute('size', this.size);
12398
+ });
12399
+ });
12400
+
12401
+ observeAttributes(
12402
+ this,
12403
+ () => {
12404
+ this.items.forEach((item) => {
12405
+ item.setAttribute('size', this.size);
12406
+ });
12407
+ },
12408
+ {
12409
+ includeAttrs: ['size'],
12410
+ }
12411
+ );
12412
+ }
12413
+ };
12414
+
12415
+ const RadioGroupClass = compose(
12416
+ createStyleMixin({
12417
+ mappings: {
12418
+ ...textFieldMappings,
12419
+ buttonsSpacing: { selector: '::part(group-field)', property: 'justify-content' },
12420
+ buttonsRowGap: { selector: '::part(group-field)', property: 'row-gap' },
12421
+ buttonsColumnGap: { selector: '::part(group-field)', property: 'column-gap' },
12422
+ itemsLabelColor: {
12423
+ selector: () => `::slotted(${RadioButtonClass.componentName})`,
12424
+ property: RadioButtonClass.cssVarList.labelTextColor,
12425
+ },
12426
+ },
12427
+ }),
12428
+ draggableMixin,
12429
+ composedProxyInputMixin({ proxyProps: ['setSelectionRange'] }),
12430
+ componentNameValidationMixin,
12431
+ RadioGroupMixin
12432
+ )(
12433
+ createProxy({
12434
+ slots: ['', 'prefix'],
12435
+ wrappedEleName: 'vaadin-radio-group',
12436
+ style: () => `
12437
+ :host {
12438
+ display: inline-block;
12439
+ max-width: 100%;
12440
+ box-sizing: border-box;
12441
+ }
12442
+
12443
+ vaadin-radio-group {
12444
+ padding: 0;
12445
+ width: 100%;
12446
+ }
12447
+
12448
+ ${resetInputLabelPosition('vaadin-radio-group')}
12449
+ `,
12450
+
12451
+ excludeAttrsSync: ['tabindex', 'size', 'data', 'direction'],
12452
+ componentName: componentName$2,
12453
+ includeForwardProps: ['value'],
12454
+ })
12455
+ );
12456
+
12457
+ const vars$2 = RadioGroupClass.cssVarList;
12458
+ const globalRefs$1 = getThemeRefs(globals);
12459
+
12460
+ const radioGroup = {
12461
+ [vars$2.buttonsRowGap]: '9px',
12462
+ [vars$2.hostWidth]: refs.width,
12463
+ [vars$2.hostDirection]: refs.direction,
12464
+ [vars$2.fontSize]: refs.fontSize,
12465
+ [vars$2.fontFamily]: refs.fontFamily,
12466
+ [vars$2.labelTextColor]: refs.labelTextColor,
12467
+ [vars$2.labelRequiredIndicator]: refs.requiredIndicator,
12468
+ [vars$2.errorMessageTextColor]: refs.errorMessageTextColor,
12469
+ [vars$2.helperTextColor]: refs.helperTextColor,
12470
+ [vars$2.itemsLabelColor]: globalRefs$1.colors.surface.contrast,
12471
+
12472
+ textAlign: {
12473
+ right: { [vars$2.inputTextAlign]: 'right' },
12474
+ left: { [vars$2.inputTextAlign]: 'left' },
12475
+ center: { [vars$2.inputTextAlign]: 'center' },
12476
+ },
12477
+
12478
+ _fullWidth: {
12479
+ [vars$2.buttonsSpacing]: 'space-between',
12480
+ },
12481
+
12482
+ _disabled: {
12483
+ [vars$2.itemsLabelColor]: globalRefs$1.colors.surface.light,
12484
+ },
12485
+ };
12486
+
12487
+ var radioGroup$1 = /*#__PURE__*/Object.freeze({
12488
+ __proto__: null,
12489
+ default: radioGroup,
12490
+ radioGroup: radioGroup,
12491
+ vars: vars$2
12492
+ });
12493
+
12494
+ const vars$1 = RadioButtonClass.cssVarList;
12495
+ const globalRefs = getThemeRefs(globals);
12496
+
12497
+ const radioButton = {
12498
+ [vars$1.fontFamily]: refs.fontFamily,
12499
+ [vars$1.radioSize]: 'calc(1em + 6px)',
12500
+ [vars$1.radioMargin]: 'auto 4px',
12501
+ [vars$1.radioCheckedSize]: `calc(var(${vars$1.radioSize})/5)`,
12502
+ [vars$1.radioCheckedColor]: globalRefs.colors.surface.light,
12503
+ [vars$1.radioBackgroundColor]: globalRefs.colors.surface.light,
12504
+
12505
+ _checked: {
12506
+ [vars$1.radioBackgroundColor]: globalRefs.colors.surface.contrast,
12507
+ },
12508
+
12509
+ _hover: {
12510
+ cursor: 'pointer',
12511
+ },
12512
+
12513
+ size: {
12514
+ xs: {
12515
+ [vars$1.fontSize]: '12px',
12516
+ },
12517
+ sm: {
12518
+ [vars$1.fontSize]: '14px',
12519
+ },
12520
+ md: {
12521
+ [vars$1.fontSize]: '16px',
12522
+ },
12523
+ lg: {
12524
+ [vars$1.fontSize]: '18px',
12525
+ },
12526
+ },
12527
+ };
12528
+
12529
+ var radioButton$1 = /*#__PURE__*/Object.freeze({
12530
+ __proto__: null,
12531
+ default: radioButton,
12532
+ radioButton: radioButton,
12157
12533
  vars: vars$1
12158
12534
  });
12159
12535
 
@@ -12200,6 +12576,8 @@ const components = {
12200
12576
  policyValidation: policyValidation$1,
12201
12577
  icon: icon$1,
12202
12578
  codeSnippet,
12579
+ radioGroup: radioGroup$1,
12580
+ radioButton: radioButton$1,
12203
12581
  };
12204
12582
 
12205
12583
  const theme = Object.keys(components).reduce(
@@ -12212,7 +12590,7 @@ const vars = Object.keys(components).reduce(
12212
12590
  );
12213
12591
 
12214
12592
  const defaultTheme = { globals, components: theme };
12215
- const themeVars = { globals: vars$H, components: vars };
12593
+ const themeVars = { globals: vars$J, components: vars };
12216
12594
 
12217
12595
  const colors = {
12218
12596
  surface: {
@@ -12565,6 +12943,8 @@ exports.PasswordClass = PasswordClass;
12565
12943
  exports.PhoneFieldClass = PhoneFieldClass;
12566
12944
  exports.PhoneFieldInputBoxClass = PhoneFieldInputBoxClass;
12567
12945
  exports.PolicyValidationClass = PolicyValidationClass;
12946
+ exports.RadioButtonClass = RadioButtonClass;
12947
+ exports.RadioGroupClass = RadioGroupClass;
12568
12948
  exports.RecaptchaClass = RecaptchaClass;
12569
12949
  exports.SamlGroupMappingsClass = SamlGroupMappingsClass;
12570
12950
  exports.SwitchToggleClass = SwitchToggleClass;