@descope/web-components-ui 1.0.222 → 1.0.223

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 +783 -642
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +771 -631
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/umd/1000.js +1 -1
  6. package/dist/umd/1037.js +2 -0
  7. package/dist/umd/1037.js.LICENSE.txt +5 -0
  8. package/dist/umd/1932.js +310 -0
  9. package/dist/umd/1932.js.LICENSE.txt +5 -0
  10. package/dist/umd/1990.js +1 -1
  11. package/dist/umd/262.js +2 -0
  12. package/dist/umd/262.js.LICENSE.txt +5 -0
  13. package/dist/umd/3660.js +17 -0
  14. package/dist/umd/3660.js.LICENSE.txt +23 -0
  15. package/dist/umd/3952.js +123 -0
  16. package/dist/umd/{1883.js → 4273.js} +5 -5
  17. package/dist/umd/5345.js +94 -0
  18. package/dist/umd/5345.js.LICENSE.txt +11 -0
  19. package/dist/umd/5806.js +1 -1
  20. package/dist/umd/6116.js +8 -8
  21. package/dist/umd/7056.js +1 -1
  22. package/dist/umd/7101.js +1 -1
  23. package/dist/umd/7196.js +360 -0
  24. package/dist/umd/{1852.js.LICENSE.txt → 7196.js.LICENSE.txt} +0 -12
  25. package/dist/umd/8725.js +2 -2
  26. package/dist/umd/9211.js +2 -2
  27. package/dist/umd/9437.js +1 -1
  28. package/dist/umd/9515.js +1 -1
  29. package/dist/umd/descope-combo-box-index-js.js +1 -1
  30. package/dist/umd/descope-modal-index-js.js +1 -0
  31. package/dist/umd/index.js +1 -1
  32. package/package.json +3 -2
  33. package/src/components/descope-modal/ModalClass.js +109 -0
  34. package/src/components/descope-modal/index.js +6 -0
  35. package/src/index.cjs.js +1 -0
  36. package/src/mixins/createStyleMixin/helpers.js +2 -2
  37. package/src/mixins/createStyleMixin/index.js +2 -2
  38. package/src/mixins/portalMixin.js +24 -4
  39. package/src/theme/components/index.js +2 -0
  40. package/src/theme/components/modal.js +16 -0
  41. package/dist/umd/1852.js +0 -375
  42. package/dist/umd/4767.js +0 -215
  43. /package/dist/umd/{4767.js.LICENSE.txt → 3952.js.LICENSE.txt} +0 -0
  44. /package/dist/umd/{1883.js.LICENSE.txt → 4273.js.LICENSE.txt} +0 -0
@@ -496,7 +496,7 @@ const globals = {
496
496
  shadow,
497
497
  fonts,
498
498
  };
499
- const vars$r = getThemeVars(globals);
499
+ const vars$s = getThemeVars(globals);
500
500
 
501
501
  const createCssVarFallback = (first, ...rest) =>
502
502
  `var(${first}${rest.length ? ` , ${createCssVarFallback(...rest)}` : ''})`;
@@ -552,11 +552,11 @@ const createStyle = (componentName, baseSelector, mappings) => {
552
552
 
553
553
  const cssVarName = getCssVarName(componentName, attr);
554
554
 
555
- attrConfig.forEach(({ selector: relativeSelectorOrSelectorFn, property }) => {
555
+ attrConfig.forEach(({ selector: relativeSelectorOrSelectorFn, property, important }) => {
556
556
  style.add(
557
557
  createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
558
558
  isFunction(property) ? property() : property,
559
- createCssVarFallback(cssVarName)
559
+ createCssVarFallback(cssVarName) + (important ? '!important' : '')
560
560
  );
561
561
  });
562
562
  });
@@ -713,10 +713,10 @@ const createStyleMixin =
713
713
  (this.#rootElement.classList || this.#rootElement.host.classList).add(className);
714
714
  }
715
715
 
716
- init() {
716
+ async init() {
717
717
  super.init?.();
718
718
  if (this.shadowRoot.isConnected) {
719
- this.#rootElement = this.#getRootElement?.(this) || this.shadowRoot;
719
+ this.#rootElement = (await this.#getRootElement?.(this)) || this.shadowRoot;
720
720
 
721
721
  this.#addClassName(componentName);
722
722
 
@@ -2176,7 +2176,27 @@ const DISPLAY_NAME_SEPARATOR = '_';
2176
2176
 
2177
2177
  const sanitizeSelector = (selector) => selector.replace(/[^\w\s]/gi, '');
2178
2178
 
2179
- const getDomNode = (maybeDomNode) => maybeDomNode.host || maybeDomNode;
2179
+ const withWaitForShadowRoot = (getRootElementFn) => (that) =>
2180
+ new Promise((res) => {
2181
+ const MAX_RETRIES = 20;
2182
+ const ele = getRootElementFn(that);
2183
+ let counter = 0;
2184
+
2185
+ const check = () => {
2186
+ if (counter > MAX_RETRIES) {
2187
+ // eslint-disable-next-line no-console
2188
+ console.error('could not get shadow root for element', ele);
2189
+ res(ele);
2190
+ return;
2191
+ }
2192
+
2193
+ counter++;
2194
+
2195
+ if (!ele.shadowRoot) setTimeout(check);
2196
+ else res(ele.shadowRoot);
2197
+ };
2198
+ check();
2199
+ });
2180
2200
 
2181
2201
  const portalMixin =
2182
2202
  ({ name, selector, mappings = {}, forward: { attributes = [], include = true } = {} }) =>
@@ -2206,17 +2226,17 @@ const portalMixin =
2206
2226
  const baseEle = that.shadowRoot.querySelector(that.baseSelector);
2207
2227
  const portal = selector ? baseEle.shadowRoot.querySelector(selector) : baseEle;
2208
2228
 
2209
- return portal.shadowRoot || portal;
2229
+ return portal;
2210
2230
  };
2211
2231
 
2212
2232
  super({
2213
- getRootElement,
2233
+ getRootElement: withWaitForShadowRoot(getRootElement),
2214
2234
  componentNameSuffix: DISPLAY_NAME_SEPARATOR + eleDisplayName,
2215
2235
  themeSection: PORTAL_THEME_PREFIX + eleDisplayName,
2216
2236
  baseSelector: ':host',
2217
2237
  });
2218
2238
 
2219
- this.#portalEle = getDomNode(getRootElement(this));
2239
+ this.#portalEle = getRootElement(this);
2220
2240
  }
2221
2241
 
2222
2242
  #handleHoverAttribute() {
@@ -2342,7 +2362,7 @@ const clickableMixin = (superclass) =>
2342
2362
  }
2343
2363
  };
2344
2364
 
2345
- const componentName$w = getComponentName('button');
2365
+ const componentName$x = getComponentName('button');
2346
2366
 
2347
2367
  const resetStyles = `
2348
2368
  :host {
@@ -2439,7 +2459,7 @@ const ButtonClass = compose(
2439
2459
  }
2440
2460
  `,
2441
2461
  excludeAttrsSync: ['tabindex'],
2442
- componentName: componentName$w,
2462
+ componentName: componentName$x,
2443
2463
  })
2444
2464
  );
2445
2465
 
@@ -2477,7 +2497,7 @@ loadingIndicatorStyles = `
2477
2497
  `;
2478
2498
 
2479
2499
  const globalRefs$d = getThemeRefs(globals);
2480
- const compVars$3 = ButtonClass.cssVarList;
2500
+ const compVars$4 = ButtonClass.cssVarList;
2481
2501
 
2482
2502
  const mode = {
2483
2503
  primary: globalRefs$d.colors.primary,
@@ -2487,51 +2507,51 @@ const mode = {
2487
2507
  surface: globalRefs$d.colors.surface,
2488
2508
  };
2489
2509
 
2490
- const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$w);
2510
+ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$x);
2491
2511
 
2492
2512
  const button = {
2493
2513
  ...helperTheme$3,
2494
2514
 
2495
- [compVars$3.fontFamily]: globalRefs$d.fonts.font1.family,
2515
+ [compVars$4.fontFamily]: globalRefs$d.fonts.font1.family,
2496
2516
 
2497
- [compVars$3.cursor]: 'pointer',
2498
- [compVars$3.hostHeight]: '3em',
2499
- [compVars$3.hostWidth]: 'auto',
2517
+ [compVars$4.cursor]: 'pointer',
2518
+ [compVars$4.hostHeight]: '3em',
2519
+ [compVars$4.hostWidth]: 'auto',
2500
2520
 
2501
- [compVars$3.borderRadius]: globalRefs$d.radius.sm,
2502
- [compVars$3.borderWidth]: globalRefs$d.border.xs,
2503
- [compVars$3.borderStyle]: 'solid',
2504
- [compVars$3.borderColor]: 'transparent',
2521
+ [compVars$4.borderRadius]: globalRefs$d.radius.sm,
2522
+ [compVars$4.borderWidth]: globalRefs$d.border.xs,
2523
+ [compVars$4.borderStyle]: 'solid',
2524
+ [compVars$4.borderColor]: 'transparent',
2505
2525
 
2506
- [compVars$3.labelSpacing]: '0.25em',
2526
+ [compVars$4.labelSpacing]: '0.25em',
2507
2527
 
2508
- [compVars$3.verticalPadding]: '1em',
2528
+ [compVars$4.verticalPadding]: '1em',
2509
2529
 
2510
- [compVars$3.outlineWidth]: globals.border.sm,
2511
- [compVars$3.outlineOffset]: '0px', // keep `px` unit for external calc
2512
- [compVars$3.outlineStyle]: 'solid',
2513
- [compVars$3.outlineColor]: 'transparent',
2530
+ [compVars$4.outlineWidth]: globals.border.sm,
2531
+ [compVars$4.outlineOffset]: '0px', // keep `px` unit for external calc
2532
+ [compVars$4.outlineStyle]: 'solid',
2533
+ [compVars$4.outlineColor]: 'transparent',
2514
2534
 
2515
2535
  size: {
2516
- xs: { [compVars$3.fontSize]: '12px' },
2517
- sm: { [compVars$3.fontSize]: '14px' },
2518
- md: { [compVars$3.fontSize]: '16px' },
2519
- lg: { [compVars$3.fontSize]: '18px' },
2536
+ xs: { [compVars$4.fontSize]: '12px' },
2537
+ sm: { [compVars$4.fontSize]: '14px' },
2538
+ md: { [compVars$4.fontSize]: '16px' },
2539
+ lg: { [compVars$4.fontSize]: '18px' },
2520
2540
  },
2521
2541
 
2522
2542
  _square: {
2523
- [compVars$3.hostHeight]: '3em',
2524
- [compVars$3.hostWidth]: '3em',
2525
- [compVars$3.verticalPadding]: '0',
2543
+ [compVars$4.hostHeight]: '3em',
2544
+ [compVars$4.hostWidth]: '3em',
2545
+ [compVars$4.verticalPadding]: '0',
2526
2546
  },
2527
2547
 
2528
2548
  _fullWidth: {
2529
- [compVars$3.hostWidth]: '100%',
2549
+ [compVars$4.hostWidth]: '100%',
2530
2550
  },
2531
2551
 
2532
2552
  _loading: {
2533
- [compVars$3.cursor]: 'wait',
2534
- [compVars$3.labelTextColor]: helperRefs$3.main,
2553
+ [compVars$4.cursor]: 'wait',
2554
+ [compVars$4.labelTextColor]: helperRefs$3.main,
2535
2555
  },
2536
2556
 
2537
2557
  _disabled: {
@@ -2543,56 +2563,56 @@ const button = {
2543
2563
 
2544
2564
  variant: {
2545
2565
  contained: {
2546
- [compVars$3.labelTextColor]: helperRefs$3.contrast,
2547
- [compVars$3.backgroundColor]: helperRefs$3.main,
2566
+ [compVars$4.labelTextColor]: helperRefs$3.contrast,
2567
+ [compVars$4.backgroundColor]: helperRefs$3.main,
2548
2568
  _hover: {
2549
- [compVars$3.backgroundColor]: helperRefs$3.dark,
2569
+ [compVars$4.backgroundColor]: helperRefs$3.dark,
2550
2570
  _loading: {
2551
- [compVars$3.backgroundColor]: helperRefs$3.main,
2571
+ [compVars$4.backgroundColor]: helperRefs$3.main,
2552
2572
  },
2553
2573
  },
2554
2574
  _active: {
2555
- [compVars$3.backgroundColor]: helperRefs$3.main,
2575
+ [compVars$4.backgroundColor]: helperRefs$3.main,
2556
2576
  },
2557
2577
  },
2558
2578
 
2559
2579
  outline: {
2560
- [compVars$3.labelTextColor]: helperRefs$3.main,
2561
- [compVars$3.borderColor]: 'currentColor',
2580
+ [compVars$4.labelTextColor]: helperRefs$3.main,
2581
+ [compVars$4.borderColor]: 'currentColor',
2562
2582
  _hover: {
2563
- [compVars$3.labelTextColor]: helperRefs$3.dark,
2583
+ [compVars$4.labelTextColor]: helperRefs$3.dark,
2564
2584
  },
2565
2585
  _active: {
2566
- [compVars$3.labelTextColor]: helperRefs$3.main,
2586
+ [compVars$4.labelTextColor]: helperRefs$3.main,
2567
2587
  },
2568
2588
  },
2569
2589
 
2570
2590
  link: {
2571
- [compVars$3.labelTextColor]: helperRefs$3.main,
2591
+ [compVars$4.labelTextColor]: helperRefs$3.main,
2572
2592
  _hover: {
2573
- [compVars$3.labelTextColor]: helperRefs$3.dark,
2574
- [compVars$3.labelTextDecoration]: 'underline',
2593
+ [compVars$4.labelTextColor]: helperRefs$3.dark,
2594
+ [compVars$4.labelTextDecoration]: 'underline',
2575
2595
  },
2576
2596
  _active: {
2577
- [compVars$3.labelTextColor]: helperRefs$3.dark,
2597
+ [compVars$4.labelTextColor]: helperRefs$3.dark,
2578
2598
  },
2579
2599
  },
2580
2600
  },
2581
2601
 
2582
2602
  _focused: {
2583
- [compVars$3.outlineColor]: globalRefs$d.colors.surface.main,
2603
+ [compVars$4.outlineColor]: globalRefs$d.colors.surface.main,
2584
2604
  },
2585
2605
  };
2586
2606
 
2587
- const vars$q = {
2588
- ...compVars$3,
2607
+ const vars$r = {
2608
+ ...compVars$4,
2589
2609
  ...helperVars$3,
2590
2610
  };
2591
2611
 
2592
2612
  var button$1 = /*#__PURE__*/Object.freeze({
2593
2613
  __proto__: null,
2594
2614
  default: button,
2595
- vars: vars$q
2615
+ vars: vars$r
2596
2616
  });
2597
2617
 
2598
2618
  const { host: host$e, label: label$8, placeholder: placeholder$2, requiredIndicator: requiredIndicator$a, inputField: inputField$5, input, helperText: helperText$8, errorMessage: errorMessage$a } =
@@ -2750,11 +2770,11 @@ const resetInputOverrides = (name, cssVarList) => `
2750
2770
  ${resetInputFieldUnderlayingBorder(name)}
2751
2771
  `;
2752
2772
 
2753
- const componentName$v = getComponentName('text-field');
2773
+ const componentName$w = getComponentName('text-field');
2754
2774
 
2755
2775
  const observedAttrs = ['type'];
2756
2776
 
2757
- const customMixin$6 = (superclass) =>
2777
+ const customMixin$7 = (superclass) =>
2758
2778
  class TextFieldClass extends superclass {
2759
2779
  static get observedAttributes() {
2760
2780
  return observedAttrs.concat(superclass.observedAttributes || []);
@@ -2781,7 +2801,7 @@ const TextFieldClass = compose(
2781
2801
  draggableMixin,
2782
2802
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
2783
2803
  componentNameValidationMixin,
2784
- customMixin$6
2804
+ customMixin$7
2785
2805
  )(
2786
2806
  createProxy({
2787
2807
  slots: ['prefix', 'suffix'],
@@ -2799,14 +2819,14 @@ const TextFieldClass = compose(
2799
2819
  ${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
2800
2820
  `,
2801
2821
  excludeAttrsSync: ['tabindex'],
2802
- componentName: componentName$v,
2822
+ componentName: componentName$w,
2803
2823
  })
2804
2824
  );
2805
2825
 
2806
- const componentName$u = getComponentName('input-wrapper');
2826
+ const componentName$v = getComponentName('input-wrapper');
2807
2827
  const globalRefs$c = getThemeRefs(globals);
2808
2828
 
2809
- const [theme$1, refs, vars$p] = createHelperVars(
2829
+ const [theme$1, refs, vars$q] = createHelperVars(
2810
2830
  {
2811
2831
  labelTextColor: globalRefs$c.colors.surface.contrast,
2812
2832
  valueTextColor: globalRefs$c.colors.surface.contrast,
@@ -2868,46 +2888,46 @@ const [theme$1, refs, vars$p] = createHelperVars(
2868
2888
  backgroundColor: globalRefs$c.colors.surface.main,
2869
2889
  },
2870
2890
  },
2871
- componentName$u
2891
+ componentName$v
2872
2892
  );
2873
2893
 
2874
2894
  var inputWrapper = /*#__PURE__*/Object.freeze({
2875
2895
  __proto__: null,
2876
2896
  default: theme$1,
2877
2897
  refs: refs,
2878
- vars: vars$p
2898
+ vars: vars$q
2879
2899
  });
2880
2900
 
2881
- const vars$o = TextFieldClass.cssVarList;
2901
+ const vars$p = TextFieldClass.cssVarList;
2882
2902
 
2883
2903
  const textField = {
2884
- [vars$o.hostWidth]: refs.width,
2885
- [vars$o.hostMinWidth]: refs.minWidth,
2886
- [vars$o.fontSize]: refs.fontSize,
2887
- [vars$o.fontFamily]: refs.fontFamily,
2888
- [vars$o.labelTextColor]: refs.labelTextColor,
2889
- [vars$o.labelRequiredIndicator]: refs.requiredIndicator,
2890
- [vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
2891
- [vars$o.inputValueTextColor]: refs.valueTextColor,
2892
- [vars$o.inputPlaceholderColor]: refs.placeholderTextColor,
2893
- [vars$o.inputBorderWidth]: refs.borderWidth,
2894
- [vars$o.inputBorderStyle]: refs.borderStyle,
2895
- [vars$o.inputBorderColor]: refs.borderColor,
2896
- [vars$o.inputBorderRadius]: refs.borderRadius,
2897
- [vars$o.inputOutlineWidth]: refs.outlineWidth,
2898
- [vars$o.inputOutlineStyle]: refs.outlineStyle,
2899
- [vars$o.inputOutlineColor]: refs.outlineColor,
2900
- [vars$o.inputOutlineOffset]: refs.outlineOffset,
2901
- [vars$o.inputBackgroundColor]: refs.backgroundColor,
2902
- [vars$o.inputHeight]: refs.inputHeight,
2903
- [vars$o.inputHorizontalPadding]: refs.horizontalPadding,
2904
+ [vars$p.hostWidth]: refs.width,
2905
+ [vars$p.hostMinWidth]: refs.minWidth,
2906
+ [vars$p.fontSize]: refs.fontSize,
2907
+ [vars$p.fontFamily]: refs.fontFamily,
2908
+ [vars$p.labelTextColor]: refs.labelTextColor,
2909
+ [vars$p.labelRequiredIndicator]: refs.requiredIndicator,
2910
+ [vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
2911
+ [vars$p.inputValueTextColor]: refs.valueTextColor,
2912
+ [vars$p.inputPlaceholderColor]: refs.placeholderTextColor,
2913
+ [vars$p.inputBorderWidth]: refs.borderWidth,
2914
+ [vars$p.inputBorderStyle]: refs.borderStyle,
2915
+ [vars$p.inputBorderColor]: refs.borderColor,
2916
+ [vars$p.inputBorderRadius]: refs.borderRadius,
2917
+ [vars$p.inputOutlineWidth]: refs.outlineWidth,
2918
+ [vars$p.inputOutlineStyle]: refs.outlineStyle,
2919
+ [vars$p.inputOutlineColor]: refs.outlineColor,
2920
+ [vars$p.inputOutlineOffset]: refs.outlineOffset,
2921
+ [vars$p.inputBackgroundColor]: refs.backgroundColor,
2922
+ [vars$p.inputHeight]: refs.inputHeight,
2923
+ [vars$p.inputHorizontalPadding]: refs.horizontalPadding,
2904
2924
  };
2905
2925
 
2906
2926
  var textField$1 = /*#__PURE__*/Object.freeze({
2907
2927
  __proto__: null,
2908
2928
  default: textField,
2909
2929
  textField: textField,
2910
- vars: vars$o
2930
+ vars: vars$p
2911
2931
  });
2912
2932
 
2913
2933
  const passwordDraggableMixin = (superclass) =>
@@ -2944,7 +2964,7 @@ const passwordDraggableMixin = (superclass) =>
2944
2964
  }
2945
2965
  };
2946
2966
 
2947
- const componentName$t = getComponentName('password');
2967
+ const componentName$u = getComponentName('password');
2948
2968
 
2949
2969
  const {
2950
2970
  host: host$d,
@@ -3073,44 +3093,44 @@ const PasswordClass = compose(
3073
3093
  }
3074
3094
  `,
3075
3095
  excludeAttrsSync: ['tabindex'],
3076
- componentName: componentName$t,
3096
+ componentName: componentName$u,
3077
3097
  })
3078
3098
  );
3079
3099
 
3080
3100
  const globalRefs$b = getThemeRefs(globals);
3081
- const vars$n = PasswordClass.cssVarList;
3101
+ const vars$o = PasswordClass.cssVarList;
3082
3102
 
3083
3103
  const password = {
3084
- [vars$n.hostWidth]: refs.width,
3085
- [vars$n.fontSize]: refs.fontSize,
3086
- [vars$n.fontFamily]: refs.fontFamily,
3087
- [vars$n.labelTextColor]: refs.labelTextColor,
3088
- [vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
3089
- [vars$n.inputHorizontalPadding]: refs.horizontalPadding,
3090
- [vars$n.inputHeight]: refs.inputHeight,
3091
- [vars$n.inputBackgroundColor]: refs.backgroundColor,
3092
- [vars$n.labelRequiredIndicator]: refs.requiredIndicator,
3093
- [vars$n.inputValueTextColor]: refs.valueTextColor,
3094
- [vars$n.inputPlaceholderTextColor]: refs.placeholderTextColor,
3095
- [vars$n.inputBorderWidth]: refs.borderWidth,
3096
- [vars$n.inputBorderStyle]: refs.borderStyle,
3097
- [vars$n.inputBorderColor]: refs.borderColor,
3098
- [vars$n.inputBorderRadius]: refs.borderRadius,
3099
- [vars$n.inputOutlineWidth]: refs.outlineWidth,
3100
- [vars$n.inputOutlineStyle]: refs.outlineStyle,
3101
- [vars$n.inputOutlineColor]: refs.outlineColor,
3102
- [vars$n.inputOutlineOffset]: refs.outlineOffset,
3103
- [vars$n.revealButtonOffset]: globalRefs$b.spacing.md,
3104
- [vars$n.revealButtonSize]: refs.toggleButtonSize,
3104
+ [vars$o.hostWidth]: refs.width,
3105
+ [vars$o.fontSize]: refs.fontSize,
3106
+ [vars$o.fontFamily]: refs.fontFamily,
3107
+ [vars$o.labelTextColor]: refs.labelTextColor,
3108
+ [vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
3109
+ [vars$o.inputHorizontalPadding]: refs.horizontalPadding,
3110
+ [vars$o.inputHeight]: refs.inputHeight,
3111
+ [vars$o.inputBackgroundColor]: refs.backgroundColor,
3112
+ [vars$o.labelRequiredIndicator]: refs.requiredIndicator,
3113
+ [vars$o.inputValueTextColor]: refs.valueTextColor,
3114
+ [vars$o.inputPlaceholderTextColor]: refs.placeholderTextColor,
3115
+ [vars$o.inputBorderWidth]: refs.borderWidth,
3116
+ [vars$o.inputBorderStyle]: refs.borderStyle,
3117
+ [vars$o.inputBorderColor]: refs.borderColor,
3118
+ [vars$o.inputBorderRadius]: refs.borderRadius,
3119
+ [vars$o.inputOutlineWidth]: refs.outlineWidth,
3120
+ [vars$o.inputOutlineStyle]: refs.outlineStyle,
3121
+ [vars$o.inputOutlineColor]: refs.outlineColor,
3122
+ [vars$o.inputOutlineOffset]: refs.outlineOffset,
3123
+ [vars$o.revealButtonOffset]: globalRefs$b.spacing.md,
3124
+ [vars$o.revealButtonSize]: refs.toggleButtonSize,
3105
3125
  };
3106
3126
 
3107
3127
  var password$1 = /*#__PURE__*/Object.freeze({
3108
3128
  __proto__: null,
3109
3129
  default: password,
3110
- vars: vars$n
3130
+ vars: vars$o
3111
3131
  });
3112
3132
 
3113
- const componentName$s = getComponentName('number-field');
3133
+ const componentName$t = getComponentName('number-field');
3114
3134
 
3115
3135
  const NumberFieldClass = compose(
3116
3136
  createStyleMixin({
@@ -3135,44 +3155,44 @@ const NumberFieldClass = compose(
3135
3155
  ${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
3136
3156
  `,
3137
3157
  excludeAttrsSync: ['tabindex'],
3138
- componentName: componentName$s,
3158
+ componentName: componentName$t,
3139
3159
  })
3140
3160
  );
3141
3161
 
3142
- const vars$m = NumberFieldClass.cssVarList;
3162
+ const vars$n = NumberFieldClass.cssVarList;
3143
3163
 
3144
3164
  const numberField = {
3145
- [vars$m.hostWidth]: refs.width,
3146
- [vars$m.hostMinWidth]: refs.minWidth,
3147
- [vars$m.fontSize]: refs.fontSize,
3148
- [vars$m.fontFamily]: refs.fontFamily,
3149
- [vars$m.labelTextColor]: refs.labelTextColor,
3150
- [vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
3151
- [vars$m.inputValueTextColor]: refs.valueTextColor,
3152
- [vars$m.inputPlaceholderColor]: refs.placeholderTextColor,
3153
- [vars$m.inputBorderWidth]: refs.borderWidth,
3154
- [vars$m.inputBorderStyle]: refs.borderStyle,
3155
- [vars$m.inputBorderColor]: refs.borderColor,
3156
- [vars$m.inputBorderRadius]: refs.borderRadius,
3157
- [vars$m.inputOutlineWidth]: refs.outlineWidth,
3158
- [vars$m.inputOutlineStyle]: refs.outlineStyle,
3159
- [vars$m.inputOutlineColor]: refs.outlineColor,
3160
- [vars$m.inputOutlineOffset]: refs.outlineOffset,
3161
- [vars$m.inputBackgroundColor]: refs.backgroundColor,
3162
- [vars$m.labelRequiredIndicator]: refs.requiredIndicator,
3163
- [vars$m.inputHorizontalPadding]: refs.horizontalPadding,
3164
- [vars$m.inputHeight]: refs.inputHeight,
3165
+ [vars$n.hostWidth]: refs.width,
3166
+ [vars$n.hostMinWidth]: refs.minWidth,
3167
+ [vars$n.fontSize]: refs.fontSize,
3168
+ [vars$n.fontFamily]: refs.fontFamily,
3169
+ [vars$n.labelTextColor]: refs.labelTextColor,
3170
+ [vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
3171
+ [vars$n.inputValueTextColor]: refs.valueTextColor,
3172
+ [vars$n.inputPlaceholderColor]: refs.placeholderTextColor,
3173
+ [vars$n.inputBorderWidth]: refs.borderWidth,
3174
+ [vars$n.inputBorderStyle]: refs.borderStyle,
3175
+ [vars$n.inputBorderColor]: refs.borderColor,
3176
+ [vars$n.inputBorderRadius]: refs.borderRadius,
3177
+ [vars$n.inputOutlineWidth]: refs.outlineWidth,
3178
+ [vars$n.inputOutlineStyle]: refs.outlineStyle,
3179
+ [vars$n.inputOutlineColor]: refs.outlineColor,
3180
+ [vars$n.inputOutlineOffset]: refs.outlineOffset,
3181
+ [vars$n.inputBackgroundColor]: refs.backgroundColor,
3182
+ [vars$n.labelRequiredIndicator]: refs.requiredIndicator,
3183
+ [vars$n.inputHorizontalPadding]: refs.horizontalPadding,
3184
+ [vars$n.inputHeight]: refs.inputHeight,
3165
3185
  };
3166
3186
 
3167
3187
  var numberField$1 = /*#__PURE__*/Object.freeze({
3168
3188
  __proto__: null,
3169
3189
  default: numberField,
3170
- vars: vars$m
3190
+ vars: vars$n
3171
3191
  });
3172
3192
 
3173
- const componentName$r = getComponentName('email-field');
3193
+ const componentName$s = getComponentName('email-field');
3174
3194
 
3175
- const customMixin$5 = (superclass) =>
3195
+ const customMixin$6 = (superclass) =>
3176
3196
  class EmailFieldMixinClass extends superclass {
3177
3197
  init() {
3178
3198
  super.init?.();
@@ -3186,7 +3206,7 @@ const EmailFieldClass = compose(
3186
3206
  draggableMixin,
3187
3207
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
3188
3208
  componentNameValidationMixin,
3189
- customMixin$5
3209
+ customMixin$6
3190
3210
  )(
3191
3211
  createProxy({
3192
3212
  slots: ['', 'suffix'],
@@ -3204,42 +3224,42 @@ const EmailFieldClass = compose(
3204
3224
  ${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
3205
3225
  `,
3206
3226
  excludeAttrsSync: ['tabindex'],
3207
- componentName: componentName$r,
3227
+ componentName: componentName$s,
3208
3228
  })
3209
3229
  );
3210
3230
 
3211
- const vars$l = EmailFieldClass.cssVarList;
3231
+ const vars$m = EmailFieldClass.cssVarList;
3212
3232
 
3213
3233
  const emailField = {
3214
- [vars$l.hostWidth]: refs.width,
3215
- [vars$l.hostMinWidth]: refs.minWidth,
3216
- [vars$l.fontSize]: refs.fontSize,
3217
- [vars$l.fontFamily]: refs.fontFamily,
3218
- [vars$l.labelTextColor]: refs.labelTextColor,
3219
- [vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
3220
- [vars$l.inputValueTextColor]: refs.valueTextColor,
3221
- [vars$l.labelRequiredIndicator]: refs.requiredIndicator,
3222
- [vars$l.inputPlaceholderColor]: refs.placeholderTextColor,
3223
- [vars$l.inputBorderWidth]: refs.borderWidth,
3224
- [vars$l.inputBorderStyle]: refs.borderStyle,
3225
- [vars$l.inputBorderColor]: refs.borderColor,
3226
- [vars$l.inputBorderRadius]: refs.borderRadius,
3227
- [vars$l.inputOutlineWidth]: refs.outlineWidth,
3228
- [vars$l.inputOutlineStyle]: refs.outlineStyle,
3229
- [vars$l.inputOutlineColor]: refs.outlineColor,
3230
- [vars$l.inputOutlineOffset]: refs.outlineOffset,
3231
- [vars$l.inputBackgroundColor]: refs.backgroundColor,
3232
- [vars$l.inputHorizontalPadding]: refs.horizontalPadding,
3233
- [vars$l.inputHeight]: refs.inputHeight,
3234
+ [vars$m.hostWidth]: refs.width,
3235
+ [vars$m.hostMinWidth]: refs.minWidth,
3236
+ [vars$m.fontSize]: refs.fontSize,
3237
+ [vars$m.fontFamily]: refs.fontFamily,
3238
+ [vars$m.labelTextColor]: refs.labelTextColor,
3239
+ [vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
3240
+ [vars$m.inputValueTextColor]: refs.valueTextColor,
3241
+ [vars$m.labelRequiredIndicator]: refs.requiredIndicator,
3242
+ [vars$m.inputPlaceholderColor]: refs.placeholderTextColor,
3243
+ [vars$m.inputBorderWidth]: refs.borderWidth,
3244
+ [vars$m.inputBorderStyle]: refs.borderStyle,
3245
+ [vars$m.inputBorderColor]: refs.borderColor,
3246
+ [vars$m.inputBorderRadius]: refs.borderRadius,
3247
+ [vars$m.inputOutlineWidth]: refs.outlineWidth,
3248
+ [vars$m.inputOutlineStyle]: refs.outlineStyle,
3249
+ [vars$m.inputOutlineColor]: refs.outlineColor,
3250
+ [vars$m.inputOutlineOffset]: refs.outlineOffset,
3251
+ [vars$m.inputBackgroundColor]: refs.backgroundColor,
3252
+ [vars$m.inputHorizontalPadding]: refs.horizontalPadding,
3253
+ [vars$m.inputHeight]: refs.inputHeight,
3234
3254
  };
3235
3255
 
3236
3256
  var emailField$1 = /*#__PURE__*/Object.freeze({
3237
3257
  __proto__: null,
3238
3258
  default: emailField,
3239
- vars: vars$l
3259
+ vars: vars$m
3240
3260
  });
3241
3261
 
3242
- const componentName$q = getComponentName('text-area');
3262
+ const componentName$r = getComponentName('text-area');
3243
3263
 
3244
3264
  const {
3245
3265
  host: host$c,
@@ -3312,48 +3332,48 @@ const TextAreaClass = compose(
3312
3332
  ${resetInputCursor('vaadin-text-area')}
3313
3333
  `,
3314
3334
  excludeAttrsSync: ['tabindex'],
3315
- componentName: componentName$q,
3335
+ componentName: componentName$r,
3316
3336
  })
3317
3337
  );
3318
3338
 
3319
3339
  const globalRefs$a = getThemeRefs(globals);
3320
- const vars$k = TextAreaClass.cssVarList;
3340
+ const vars$l = TextAreaClass.cssVarList;
3321
3341
 
3322
3342
  const textArea = {
3323
- [vars$k.hostWidth]: refs.width,
3324
- [vars$k.hostMinWidth]: refs.minWidth,
3325
- [vars$k.fontSize]: refs.fontSize,
3326
- [vars$k.fontFamily]: refs.fontFamily,
3327
- [vars$k.labelTextColor]: refs.labelTextColor,
3328
- [vars$k.labelRequiredIndicator]: refs.requiredIndicator,
3329
- [vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
3330
- [vars$k.inputBackgroundColor]: refs.backgroundColor,
3331
- [vars$k.inputValueTextColor]: refs.valueTextColor,
3332
- [vars$k.inputPlaceholderTextColor]: refs.placeholderTextColor,
3333
- [vars$k.inputBorderRadius]: refs.borderRadius,
3334
- [vars$k.inputBorderWidth]: refs.borderWidth,
3335
- [vars$k.inputBorderStyle]: refs.borderStyle,
3336
- [vars$k.inputBorderColor]: refs.borderColor,
3337
- [vars$k.inputOutlineWidth]: refs.outlineWidth,
3338
- [vars$k.inputOutlineStyle]: refs.outlineStyle,
3339
- [vars$k.inputOutlineColor]: refs.outlineColor,
3340
- [vars$k.inputOutlineOffset]: refs.outlineOffset,
3341
- [vars$k.inputResizeType]: 'vertical',
3342
- [vars$k.inputMinHeight]: '5em',
3343
+ [vars$l.hostWidth]: refs.width,
3344
+ [vars$l.hostMinWidth]: refs.minWidth,
3345
+ [vars$l.fontSize]: refs.fontSize,
3346
+ [vars$l.fontFamily]: refs.fontFamily,
3347
+ [vars$l.labelTextColor]: refs.labelTextColor,
3348
+ [vars$l.labelRequiredIndicator]: refs.requiredIndicator,
3349
+ [vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
3350
+ [vars$l.inputBackgroundColor]: refs.backgroundColor,
3351
+ [vars$l.inputValueTextColor]: refs.valueTextColor,
3352
+ [vars$l.inputPlaceholderTextColor]: refs.placeholderTextColor,
3353
+ [vars$l.inputBorderRadius]: refs.borderRadius,
3354
+ [vars$l.inputBorderWidth]: refs.borderWidth,
3355
+ [vars$l.inputBorderStyle]: refs.borderStyle,
3356
+ [vars$l.inputBorderColor]: refs.borderColor,
3357
+ [vars$l.inputOutlineWidth]: refs.outlineWidth,
3358
+ [vars$l.inputOutlineStyle]: refs.outlineStyle,
3359
+ [vars$l.inputOutlineColor]: refs.outlineColor,
3360
+ [vars$l.inputOutlineOffset]: refs.outlineOffset,
3361
+ [vars$l.inputResizeType]: 'vertical',
3362
+ [vars$l.inputMinHeight]: '5em',
3343
3363
 
3344
3364
  _disabled: {
3345
- [vars$k.inputBackgroundColor]: globalRefs$a.colors.surface.light,
3365
+ [vars$l.inputBackgroundColor]: globalRefs$a.colors.surface.light,
3346
3366
  },
3347
3367
 
3348
3368
  _readonly: {
3349
- [vars$k.inputResizeType]: 'none',
3369
+ [vars$l.inputResizeType]: 'none',
3350
3370
  },
3351
3371
  };
3352
3372
 
3353
3373
  var textArea$1 = /*#__PURE__*/Object.freeze({
3354
3374
  __proto__: null,
3355
3375
  default: textArea,
3356
- vars: vars$k
3376
+ vars: vars$l
3357
3377
  });
3358
3378
 
3359
3379
  const createBaseInputClass = (...args) =>
@@ -3364,9 +3384,9 @@ const createBaseInputClass = (...args) =>
3364
3384
  inputEventsDispatchingMixin
3365
3385
  )(createBaseClass(...args));
3366
3386
 
3367
- const componentName$p = getComponentName('boolean-field-internal');
3387
+ const componentName$q = getComponentName('boolean-field-internal');
3368
3388
 
3369
- createBaseInputClass({ componentName: componentName$p, baseSelector: 'div' });
3389
+ createBaseInputClass({ componentName: componentName$q, baseSelector: 'div' });
3370
3390
 
3371
3391
  const booleanFieldMixin = (superclass) =>
3372
3392
  class BooleanFieldMixinClass extends superclass {
@@ -3375,14 +3395,14 @@ const booleanFieldMixin = (superclass) =>
3375
3395
 
3376
3396
  const template = document.createElement('template');
3377
3397
  template.innerHTML = `
3378
- <${componentName$p}
3398
+ <${componentName$q}
3379
3399
  tabindex="-1"
3380
3400
  slot="input"
3381
- ></${componentName$p}>
3401
+ ></${componentName$q}>
3382
3402
  `;
3383
3403
 
3384
3404
  this.baseElement.appendChild(template.content.cloneNode(true));
3385
- this.inputElement = this.shadowRoot.querySelector(componentName$p);
3405
+ this.inputElement = this.shadowRoot.querySelector(componentName$q);
3386
3406
  this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
3387
3407
 
3388
3408
  forwardAttrs(this, this.inputElement, {
@@ -3444,7 +3464,7 @@ descope-boolean-field-internal {
3444
3464
  }
3445
3465
  `;
3446
3466
 
3447
- const componentName$o = getComponentName('checkbox');
3467
+ const componentName$p = getComponentName('checkbox');
3448
3468
 
3449
3469
  const {
3450
3470
  host: host$b,
@@ -3541,50 +3561,50 @@ const CheckboxClass = compose(
3541
3561
  }
3542
3562
  `,
3543
3563
  excludeAttrsSync: ['label', 'tabindex'],
3544
- componentName: componentName$o,
3564
+ componentName: componentName$p,
3545
3565
  })
3546
3566
  );
3547
3567
 
3548
- const vars$j = CheckboxClass.cssVarList;
3568
+ const vars$k = CheckboxClass.cssVarList;
3549
3569
  const checkboxSize = '1.35em';
3550
3570
 
3551
3571
  const checkbox = {
3552
- [vars$j.hostWidth]: refs.width,
3553
- [vars$j.fontSize]: refs.fontSize,
3554
- [vars$j.fontFamily]: refs.fontFamily,
3555
- [vars$j.labelTextColor]: refs.labelTextColor,
3556
- [vars$j.labelRequiredIndicator]: refs.requiredIndicator,
3557
- [vars$j.labelFontWeight]: '400',
3558
- [vars$j.labelLineHeight]: checkboxSize,
3559
- [vars$j.labelSpacing]: '1em',
3560
- [vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
3561
- [vars$j.inputOutlineWidth]: refs.outlineWidth,
3562
- [vars$j.inputOutlineOffset]: refs.outlineOffset,
3563
- [vars$j.inputOutlineColor]: refs.outlineColor,
3564
- [vars$j.inputOutlineStyle]: refs.outlineStyle,
3565
- [vars$j.inputBorderRadius]: refs.borderRadius,
3566
- [vars$j.inputBorderColor]: refs.borderColor,
3567
- [vars$j.inputBorderWidth]: refs.borderWidth,
3568
- [vars$j.inputBorderStyle]: refs.borderStyle,
3569
- [vars$j.inputBackgroundColor]: refs.backgroundColor,
3570
- [vars$j.inputSize]: checkboxSize,
3572
+ [vars$k.hostWidth]: refs.width,
3573
+ [vars$k.fontSize]: refs.fontSize,
3574
+ [vars$k.fontFamily]: refs.fontFamily,
3575
+ [vars$k.labelTextColor]: refs.labelTextColor,
3576
+ [vars$k.labelRequiredIndicator]: refs.requiredIndicator,
3577
+ [vars$k.labelFontWeight]: '400',
3578
+ [vars$k.labelLineHeight]: checkboxSize,
3579
+ [vars$k.labelSpacing]: '1em',
3580
+ [vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
3581
+ [vars$k.inputOutlineWidth]: refs.outlineWidth,
3582
+ [vars$k.inputOutlineOffset]: refs.outlineOffset,
3583
+ [vars$k.inputOutlineColor]: refs.outlineColor,
3584
+ [vars$k.inputOutlineStyle]: refs.outlineStyle,
3585
+ [vars$k.inputBorderRadius]: refs.borderRadius,
3586
+ [vars$k.inputBorderColor]: refs.borderColor,
3587
+ [vars$k.inputBorderWidth]: refs.borderWidth,
3588
+ [vars$k.inputBorderStyle]: refs.borderStyle,
3589
+ [vars$k.inputBackgroundColor]: refs.backgroundColor,
3590
+ [vars$k.inputSize]: checkboxSize,
3571
3591
 
3572
3592
  _checked: {
3573
- [vars$j.inputValueTextColor]: refs.valueTextColor,
3593
+ [vars$k.inputValueTextColor]: refs.valueTextColor,
3574
3594
  },
3575
3595
 
3576
3596
  _disabled: {
3577
- [vars$j.labelTextColor]: refs.labelTextColor,
3597
+ [vars$k.labelTextColor]: refs.labelTextColor,
3578
3598
  },
3579
3599
  };
3580
3600
 
3581
3601
  var checkbox$1 = /*#__PURE__*/Object.freeze({
3582
3602
  __proto__: null,
3583
3603
  default: checkbox,
3584
- vars: vars$j
3604
+ vars: vars$k
3585
3605
  });
3586
3606
 
3587
- const componentName$n = getComponentName('switch-toggle');
3607
+ const componentName$o = getComponentName('switch-toggle');
3588
3608
 
3589
3609
  const {
3590
3610
  host: host$a,
@@ -3703,7 +3723,7 @@ const SwitchToggleClass = compose(
3703
3723
  }
3704
3724
  `,
3705
3725
  excludeAttrsSync: ['label', 'tabindex'],
3706
- componentName: componentName$n,
3726
+ componentName: componentName$o,
3707
3727
  })
3708
3728
  );
3709
3729
 
@@ -3711,74 +3731,74 @@ const knobMargin = '2px';
3711
3731
  const checkboxHeight = '1.25em';
3712
3732
 
3713
3733
  const globalRefs$9 = getThemeRefs(globals);
3714
- const vars$i = SwitchToggleClass.cssVarList;
3734
+ const vars$j = SwitchToggleClass.cssVarList;
3715
3735
 
3716
3736
  const switchToggle = {
3717
- [vars$i.hostWidth]: refs.width,
3718
- [vars$i.fontSize]: refs.fontSize,
3719
- [vars$i.fontFamily]: refs.fontFamily,
3720
-
3721
- [vars$i.inputOutlineWidth]: refs.outlineWidth,
3722
- [vars$i.inputOutlineOffset]: refs.outlineOffset,
3723
- [vars$i.inputOutlineColor]: refs.outlineColor,
3724
- [vars$i.inputOutlineStyle]: refs.outlineStyle,
3725
-
3726
- [vars$i.trackBorderStyle]: refs.borderStyle,
3727
- [vars$i.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
3728
- [vars$i.trackBorderColor]: refs.borderColor,
3729
- [vars$i.trackBackgroundColor]: 'none',
3730
- [vars$i.trackBorderRadius]: globalRefs$9.radius.md,
3731
- [vars$i.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
3732
- [vars$i.trackHeight]: checkboxHeight,
3733
-
3734
- [vars$i.knobSize]: `calc(1em - ${knobMargin})`,
3735
- [vars$i.knobRadius]: '50%',
3736
- [vars$i.knobTopOffset]: '1px',
3737
- [vars$i.knobLeftOffset]: knobMargin,
3738
- [vars$i.knobColor]: refs.valueTextColor,
3739
- [vars$i.knobTransitionDuration]: '0.3s',
3740
-
3741
- [vars$i.labelTextColor]: refs.labelTextColor,
3742
- [vars$i.labelFontWeight]: '400',
3743
- [vars$i.labelLineHeight]: '1.35em',
3744
- [vars$i.labelSpacing]: '1em',
3745
- [vars$i.labelRequiredIndicator]: refs.requiredIndicator,
3746
- [vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
3737
+ [vars$j.hostWidth]: refs.width,
3738
+ [vars$j.fontSize]: refs.fontSize,
3739
+ [vars$j.fontFamily]: refs.fontFamily,
3740
+
3741
+ [vars$j.inputOutlineWidth]: refs.outlineWidth,
3742
+ [vars$j.inputOutlineOffset]: refs.outlineOffset,
3743
+ [vars$j.inputOutlineColor]: refs.outlineColor,
3744
+ [vars$j.inputOutlineStyle]: refs.outlineStyle,
3745
+
3746
+ [vars$j.trackBorderStyle]: refs.borderStyle,
3747
+ [vars$j.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
3748
+ [vars$j.trackBorderColor]: refs.borderColor,
3749
+ [vars$j.trackBackgroundColor]: 'none',
3750
+ [vars$j.trackBorderRadius]: globalRefs$9.radius.md,
3751
+ [vars$j.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
3752
+ [vars$j.trackHeight]: checkboxHeight,
3753
+
3754
+ [vars$j.knobSize]: `calc(1em - ${knobMargin})`,
3755
+ [vars$j.knobRadius]: '50%',
3756
+ [vars$j.knobTopOffset]: '1px',
3757
+ [vars$j.knobLeftOffset]: knobMargin,
3758
+ [vars$j.knobColor]: refs.valueTextColor,
3759
+ [vars$j.knobTransitionDuration]: '0.3s',
3760
+
3761
+ [vars$j.labelTextColor]: refs.labelTextColor,
3762
+ [vars$j.labelFontWeight]: '400',
3763
+ [vars$j.labelLineHeight]: '1.35em',
3764
+ [vars$j.labelSpacing]: '1em',
3765
+ [vars$j.labelRequiredIndicator]: refs.requiredIndicator,
3766
+ [vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
3747
3767
 
3748
3768
  _checked: {
3749
- [vars$i.trackBorderColor]: refs.borderColor,
3750
- [vars$i.trackBackgroundColor]: refs.backgroundColor,
3751
- [vars$i.knobLeftOffset]: `calc(100% - var(${vars$i.knobSize}) - ${knobMargin})`,
3752
- [vars$i.knobColor]: refs.valueTextColor,
3753
- [vars$i.knobTextColor]: refs.valueTextColor,
3769
+ [vars$j.trackBorderColor]: refs.borderColor,
3770
+ [vars$j.trackBackgroundColor]: refs.backgroundColor,
3771
+ [vars$j.knobLeftOffset]: `calc(100% - var(${vars$j.knobSize}) - ${knobMargin})`,
3772
+ [vars$j.knobColor]: refs.valueTextColor,
3773
+ [vars$j.knobTextColor]: refs.valueTextColor,
3754
3774
  },
3755
3775
 
3756
3776
  _disabled: {
3757
- [vars$i.knobColor]: globalRefs$9.colors.surface.light,
3758
- [vars$i.trackBorderColor]: globalRefs$9.colors.surface.main,
3759
- [vars$i.trackBackgroundColor]: globalRefs$9.colors.surface.main,
3760
- [vars$i.labelTextColor]: refs.labelTextColor,
3777
+ [vars$j.knobColor]: globalRefs$9.colors.surface.light,
3778
+ [vars$j.trackBorderColor]: globalRefs$9.colors.surface.main,
3779
+ [vars$j.trackBackgroundColor]: globalRefs$9.colors.surface.main,
3780
+ [vars$j.labelTextColor]: refs.labelTextColor,
3761
3781
  _checked: {
3762
- [vars$i.knobColor]: globalRefs$9.colors.surface.light,
3763
- [vars$i.trackBackgroundColor]: globalRefs$9.colors.surface.main,
3782
+ [vars$j.knobColor]: globalRefs$9.colors.surface.light,
3783
+ [vars$j.trackBackgroundColor]: globalRefs$9.colors.surface.main,
3764
3784
  },
3765
3785
  },
3766
3786
 
3767
3787
  _invalid: {
3768
- [vars$i.trackBorderColor]: globalRefs$9.colors.error.main,
3769
- [vars$i.knobColor]: globalRefs$9.colors.error.main,
3788
+ [vars$j.trackBorderColor]: globalRefs$9.colors.error.main,
3789
+ [vars$j.knobColor]: globalRefs$9.colors.error.main,
3770
3790
  },
3771
3791
  };
3772
3792
 
3773
3793
  var switchToggle$1 = /*#__PURE__*/Object.freeze({
3774
3794
  __proto__: null,
3775
3795
  default: switchToggle,
3776
- vars: vars$i
3796
+ vars: vars$j
3777
3797
  });
3778
3798
 
3779
- const componentName$m = getComponentName('container');
3799
+ const componentName$n = getComponentName('container');
3780
3800
 
3781
- class RawContainer extends createBaseClass({ componentName: componentName$m, baseSelector: ':host > slot' }) {
3801
+ class RawContainer extends createBaseClass({ componentName: componentName$n, baseSelector: ':host > slot' }) {
3782
3802
  constructor() {
3783
3803
  super();
3784
3804
 
@@ -3832,7 +3852,7 @@ const ContainerClass = compose(
3832
3852
 
3833
3853
  const globalRefs$8 = getThemeRefs(globals);
3834
3854
 
3835
- const compVars$2 = ContainerClass.cssVarList;
3855
+ const compVars$3 = ContainerClass.cssVarList;
3836
3856
 
3837
3857
  const verticalAlignment = {
3838
3858
  start: { verticalAlignment: 'start' },
@@ -3852,7 +3872,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
3852
3872
  horizontalAlignment,
3853
3873
  shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
3854
3874
  },
3855
- componentName$m
3875
+ componentName$n
3856
3876
  );
3857
3877
 
3858
3878
  const { shadowColor } = helperRefs$2;
@@ -3860,30 +3880,30 @@ const { shadowColor } = helperRefs$2;
3860
3880
  const container = {
3861
3881
  ...helperTheme$2,
3862
3882
 
3863
- [compVars$2.hostWidth]: '100%',
3864
- [compVars$2.boxShadow]: 'none',
3865
- [compVars$2.backgroundColor]: globalRefs$8.colors.surface.light,
3866
- [compVars$2.color]: globalRefs$8.colors.surface.contrast,
3867
- [compVars$2.borderRadius]: '0px',
3883
+ [compVars$3.hostWidth]: '100%',
3884
+ [compVars$3.boxShadow]: 'none',
3885
+ [compVars$3.backgroundColor]: globalRefs$8.colors.surface.light,
3886
+ [compVars$3.color]: globalRefs$8.colors.surface.contrast,
3887
+ [compVars$3.borderRadius]: '0px',
3868
3888
 
3869
3889
  verticalPadding: {
3870
- sm: { [compVars$2.verticalPadding]: '5px' },
3871
- md: { [compVars$2.verticalPadding]: '10px' },
3872
- lg: { [compVars$2.verticalPadding]: '20px' },
3890
+ sm: { [compVars$3.verticalPadding]: '5px' },
3891
+ md: { [compVars$3.verticalPadding]: '10px' },
3892
+ lg: { [compVars$3.verticalPadding]: '20px' },
3873
3893
  },
3874
3894
 
3875
3895
  horizontalPadding: {
3876
- sm: { [compVars$2.horizontalPadding]: '5px' },
3877
- md: { [compVars$2.horizontalPadding]: '10px' },
3878
- lg: { [compVars$2.horizontalPadding]: '20px' },
3896
+ sm: { [compVars$3.horizontalPadding]: '5px' },
3897
+ md: { [compVars$3.horizontalPadding]: '10px' },
3898
+ lg: { [compVars$3.horizontalPadding]: '20px' },
3879
3899
  },
3880
3900
 
3881
3901
  direction: {
3882
3902
  row: {
3883
- [compVars$2.flexDirection]: 'row',
3884
- [compVars$2.alignItems]: helperRefs$2.verticalAlignment,
3885
- [compVars$2.justifyContent]: helperRefs$2.horizontalAlignment,
3886
- [compVars$2.flexWrap]: 'wrap',
3903
+ [compVars$3.flexDirection]: 'row',
3904
+ [compVars$3.alignItems]: helperRefs$2.verticalAlignment,
3905
+ [compVars$3.justifyContent]: helperRefs$2.horizontalAlignment,
3906
+ [compVars$3.flexWrap]: 'wrap',
3887
3907
  horizontalAlignment: {
3888
3908
  spaceBetween: {
3889
3909
  [helperVars$2.horizontalAlignment]: 'space-between',
@@ -3891,9 +3911,9 @@ const container = {
3891
3911
  },
3892
3912
  },
3893
3913
  column: {
3894
- [compVars$2.flexDirection]: 'column',
3895
- [compVars$2.alignItems]: helperRefs$2.horizontalAlignment,
3896
- [compVars$2.justifyContent]: helperRefs$2.verticalAlignment,
3914
+ [compVars$3.flexDirection]: 'column',
3915
+ [compVars$3.alignItems]: helperRefs$2.horizontalAlignment,
3916
+ [compVars$3.justifyContent]: helperRefs$2.verticalAlignment,
3897
3917
  verticalAlignment: {
3898
3918
  spaceBetween: {
3899
3919
  [helperVars$2.verticalAlignment]: 'space-between',
@@ -3903,49 +3923,49 @@ const container = {
3903
3923
  },
3904
3924
 
3905
3925
  spaceBetween: {
3906
- sm: { [compVars$2.gap]: '10px' },
3907
- md: { [compVars$2.gap]: '20px' },
3908
- lg: { [compVars$2.gap]: '30px' },
3926
+ sm: { [compVars$3.gap]: '10px' },
3927
+ md: { [compVars$3.gap]: '20px' },
3928
+ lg: { [compVars$3.gap]: '30px' },
3909
3929
  },
3910
3930
 
3911
3931
  shadow: {
3912
3932
  sm: {
3913
- [compVars$2.boxShadow]: `${globalRefs$8.shadow.wide.sm} ${shadowColor}, ${globalRefs$8.shadow.narrow.sm} ${shadowColor}`,
3933
+ [compVars$3.boxShadow]: `${globalRefs$8.shadow.wide.sm} ${shadowColor}, ${globalRefs$8.shadow.narrow.sm} ${shadowColor}`,
3914
3934
  },
3915
3935
  md: {
3916
- [compVars$2.boxShadow]: `${globalRefs$8.shadow.wide.md} ${shadowColor}, ${globalRefs$8.shadow.narrow.md} ${shadowColor}`,
3936
+ [compVars$3.boxShadow]: `${globalRefs$8.shadow.wide.md} ${shadowColor}, ${globalRefs$8.shadow.narrow.md} ${shadowColor}`,
3917
3937
  },
3918
3938
  lg: {
3919
- [compVars$2.boxShadow]: `${globalRefs$8.shadow.wide.lg} ${shadowColor}, ${globalRefs$8.shadow.narrow.lg} ${shadowColor}`,
3939
+ [compVars$3.boxShadow]: `${globalRefs$8.shadow.wide.lg} ${shadowColor}, ${globalRefs$8.shadow.narrow.lg} ${shadowColor}`,
3920
3940
  },
3921
3941
  xl: {
3922
- [compVars$2.boxShadow]: `${globalRefs$8.shadow.wide.xl} ${shadowColor}, ${globalRefs$8.shadow.narrow.xl} ${shadowColor}`,
3942
+ [compVars$3.boxShadow]: `${globalRefs$8.shadow.wide.xl} ${shadowColor}, ${globalRefs$8.shadow.narrow.xl} ${shadowColor}`,
3923
3943
  },
3924
3944
  '2xl': {
3925
3945
  [helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
3926
- [compVars$2.boxShadow]: `${globalRefs$8.shadow.wide['2xl']} ${shadowColor}`,
3946
+ [compVars$3.boxShadow]: `${globalRefs$8.shadow.wide['2xl']} ${shadowColor}`,
3927
3947
  },
3928
3948
  },
3929
3949
 
3930
3950
  borderRadius: {
3931
- sm: { [compVars$2.borderRadius]: globalRefs$8.radius.sm },
3932
- md: { [compVars$2.borderRadius]: globalRefs$8.radius.md },
3933
- lg: { [compVars$2.borderRadius]: globalRefs$8.radius.lg },
3934
- xl: { [compVars$2.borderRadius]: globalRefs$8.radius.xl },
3935
- '2xl': { [compVars$2.borderRadius]: globalRefs$8.radius['2xl'] },
3936
- '3xl': { [compVars$2.borderRadius]: globalRefs$8.radius['3xl'] },
3951
+ sm: { [compVars$3.borderRadius]: globalRefs$8.radius.sm },
3952
+ md: { [compVars$3.borderRadius]: globalRefs$8.radius.md },
3953
+ lg: { [compVars$3.borderRadius]: globalRefs$8.radius.lg },
3954
+ xl: { [compVars$3.borderRadius]: globalRefs$8.radius.xl },
3955
+ '2xl': { [compVars$3.borderRadius]: globalRefs$8.radius['2xl'] },
3956
+ '3xl': { [compVars$3.borderRadius]: globalRefs$8.radius['3xl'] },
3937
3957
  },
3938
3958
  };
3939
3959
 
3940
- const vars$h = {
3941
- ...compVars$2,
3960
+ const vars$i = {
3961
+ ...compVars$3,
3942
3962
  ...helperVars$2,
3943
3963
  };
3944
3964
 
3945
3965
  var container$1 = /*#__PURE__*/Object.freeze({
3946
3966
  __proto__: null,
3947
3967
  default: container,
3948
- vars: vars$h
3968
+ vars: vars$i
3949
3969
  });
3950
3970
 
3951
3971
  const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
@@ -3998,51 +4018,51 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
3998
4018
  return CssVarImageClass;
3999
4019
  };
4000
4020
 
4001
- const componentName$l = getComponentName('logo');
4021
+ const componentName$m = getComponentName('logo');
4002
4022
 
4003
4023
  const LogoClass = createCssVarImageClass({
4004
- componentName: componentName$l,
4024
+ componentName: componentName$m,
4005
4025
  varName: 'url',
4006
4026
  fallbackVarName: 'fallbackUrl',
4007
4027
  });
4008
4028
 
4009
- const vars$g = LogoClass.cssVarList;
4029
+ const vars$h = LogoClass.cssVarList;
4010
4030
 
4011
4031
  const logo$1 = {
4012
- [vars$g.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
4032
+ [vars$h.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
4013
4033
  };
4014
4034
 
4015
4035
  var logo$2 = /*#__PURE__*/Object.freeze({
4016
4036
  __proto__: null,
4017
4037
  default: logo$1,
4018
- vars: vars$g
4038
+ vars: vars$h
4019
4039
  });
4020
4040
 
4021
- const componentName$k = getComponentName('totp-image');
4041
+ const componentName$l = getComponentName('totp-image');
4022
4042
 
4023
4043
  const TotpImageClass = createCssVarImageClass({
4024
- componentName: componentName$k,
4044
+ componentName: componentName$l,
4025
4045
  varName: 'url',
4026
4046
  fallbackVarName: 'fallbackUrl',
4027
4047
  });
4028
4048
 
4029
- const vars$f = TotpImageClass.cssVarList;
4049
+ const vars$g = TotpImageClass.cssVarList;
4030
4050
 
4031
4051
  const logo = {
4032
- [vars$f.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
4052
+ [vars$g.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
4033
4053
  };
4034
4054
 
4035
4055
  var totpImage = /*#__PURE__*/Object.freeze({
4036
4056
  __proto__: null,
4037
4057
  default: logo,
4038
- vars: vars$f
4058
+ vars: vars$g
4039
4059
  });
4040
4060
 
4041
4061
  // eslint-disable-next-line max-classes-per-file
4042
4062
 
4043
- const componentName$j = getComponentName('text');
4063
+ const componentName$k = getComponentName('text');
4044
4064
 
4045
- class RawText extends createBaseClass({ componentName: componentName$j, baseSelector: ':host > slot' }) {
4065
+ class RawText extends createBaseClass({ componentName: componentName$k, baseSelector: ':host > slot' }) {
4046
4066
  constructor() {
4047
4067
  super();
4048
4068
 
@@ -4102,97 +4122,97 @@ const TextClass = compose(
4102
4122
  )(RawText);
4103
4123
 
4104
4124
  const globalRefs$7 = getThemeRefs(globals);
4105
- const vars$e = TextClass.cssVarList;
4125
+ const vars$f = TextClass.cssVarList;
4106
4126
 
4107
4127
  const text$2 = {
4108
- [vars$e.textLineHeight]: '1.35em',
4109
- [vars$e.textAlign]: 'left',
4110
- [vars$e.textColor]: globalRefs$7.colors.surface.dark,
4128
+ [vars$f.textLineHeight]: '1.35em',
4129
+ [vars$f.textAlign]: 'left',
4130
+ [vars$f.textColor]: globalRefs$7.colors.surface.dark,
4111
4131
  variant: {
4112
4132
  h1: {
4113
- [vars$e.fontSize]: globalRefs$7.typography.h1.size,
4114
- [vars$e.fontWeight]: globalRefs$7.typography.h1.weight,
4115
- [vars$e.fontFamily]: globalRefs$7.typography.h1.font,
4133
+ [vars$f.fontSize]: globalRefs$7.typography.h1.size,
4134
+ [vars$f.fontWeight]: globalRefs$7.typography.h1.weight,
4135
+ [vars$f.fontFamily]: globalRefs$7.typography.h1.font,
4116
4136
  },
4117
4137
  h2: {
4118
- [vars$e.fontSize]: globalRefs$7.typography.h2.size,
4119
- [vars$e.fontWeight]: globalRefs$7.typography.h2.weight,
4120
- [vars$e.fontFamily]: globalRefs$7.typography.h2.font,
4138
+ [vars$f.fontSize]: globalRefs$7.typography.h2.size,
4139
+ [vars$f.fontWeight]: globalRefs$7.typography.h2.weight,
4140
+ [vars$f.fontFamily]: globalRefs$7.typography.h2.font,
4121
4141
  },
4122
4142
  h3: {
4123
- [vars$e.fontSize]: globalRefs$7.typography.h3.size,
4124
- [vars$e.fontWeight]: globalRefs$7.typography.h3.weight,
4125
- [vars$e.fontFamily]: globalRefs$7.typography.h3.font,
4143
+ [vars$f.fontSize]: globalRefs$7.typography.h3.size,
4144
+ [vars$f.fontWeight]: globalRefs$7.typography.h3.weight,
4145
+ [vars$f.fontFamily]: globalRefs$7.typography.h3.font,
4126
4146
  },
4127
4147
  subtitle1: {
4128
- [vars$e.fontSize]: globalRefs$7.typography.subtitle1.size,
4129
- [vars$e.fontWeight]: globalRefs$7.typography.subtitle1.weight,
4130
- [vars$e.fontFamily]: globalRefs$7.typography.subtitle1.font,
4148
+ [vars$f.fontSize]: globalRefs$7.typography.subtitle1.size,
4149
+ [vars$f.fontWeight]: globalRefs$7.typography.subtitle1.weight,
4150
+ [vars$f.fontFamily]: globalRefs$7.typography.subtitle1.font,
4131
4151
  },
4132
4152
  subtitle2: {
4133
- [vars$e.fontSize]: globalRefs$7.typography.subtitle2.size,
4134
- [vars$e.fontWeight]: globalRefs$7.typography.subtitle2.weight,
4135
- [vars$e.fontFamily]: globalRefs$7.typography.subtitle2.font,
4153
+ [vars$f.fontSize]: globalRefs$7.typography.subtitle2.size,
4154
+ [vars$f.fontWeight]: globalRefs$7.typography.subtitle2.weight,
4155
+ [vars$f.fontFamily]: globalRefs$7.typography.subtitle2.font,
4136
4156
  },
4137
4157
  body1: {
4138
- [vars$e.fontSize]: globalRefs$7.typography.body1.size,
4139
- [vars$e.fontWeight]: globalRefs$7.typography.body1.weight,
4140
- [vars$e.fontFamily]: globalRefs$7.typography.body1.font,
4158
+ [vars$f.fontSize]: globalRefs$7.typography.body1.size,
4159
+ [vars$f.fontWeight]: globalRefs$7.typography.body1.weight,
4160
+ [vars$f.fontFamily]: globalRefs$7.typography.body1.font,
4141
4161
  },
4142
4162
  body2: {
4143
- [vars$e.fontSize]: globalRefs$7.typography.body2.size,
4144
- [vars$e.fontWeight]: globalRefs$7.typography.body2.weight,
4145
- [vars$e.fontFamily]: globalRefs$7.typography.body2.font,
4163
+ [vars$f.fontSize]: globalRefs$7.typography.body2.size,
4164
+ [vars$f.fontWeight]: globalRefs$7.typography.body2.weight,
4165
+ [vars$f.fontFamily]: globalRefs$7.typography.body2.font,
4146
4166
  },
4147
4167
  },
4148
4168
 
4149
4169
  mode: {
4150
4170
  primary: {
4151
- [vars$e.textColor]: globalRefs$7.colors.primary.main,
4171
+ [vars$f.textColor]: globalRefs$7.colors.primary.main,
4152
4172
  },
4153
4173
  secondary: {
4154
- [vars$e.textColor]: globalRefs$7.colors.secondary.main,
4174
+ [vars$f.textColor]: globalRefs$7.colors.secondary.main,
4155
4175
  },
4156
4176
  error: {
4157
- [vars$e.textColor]: globalRefs$7.colors.error.main,
4177
+ [vars$f.textColor]: globalRefs$7.colors.error.main,
4158
4178
  },
4159
4179
  success: {
4160
- [vars$e.textColor]: globalRefs$7.colors.success.main,
4180
+ [vars$f.textColor]: globalRefs$7.colors.success.main,
4161
4181
  },
4162
4182
  },
4163
4183
 
4164
4184
  textAlign: {
4165
- right: { [vars$e.textAlign]: 'right' },
4166
- left: { [vars$e.textAlign]: 'left' },
4167
- center: { [vars$e.textAlign]: 'center' },
4185
+ right: { [vars$f.textAlign]: 'right' },
4186
+ left: { [vars$f.textAlign]: 'left' },
4187
+ center: { [vars$f.textAlign]: 'center' },
4168
4188
  },
4169
4189
 
4170
4190
  _fullWidth: {
4171
- [vars$e.hostWidth]: '100%',
4191
+ [vars$f.hostWidth]: '100%',
4172
4192
  },
4173
4193
 
4174
4194
  _italic: {
4175
- [vars$e.fontStyle]: 'italic',
4195
+ [vars$f.fontStyle]: 'italic',
4176
4196
  },
4177
4197
 
4178
4198
  _uppercase: {
4179
- [vars$e.textTransform]: 'uppercase',
4199
+ [vars$f.textTransform]: 'uppercase',
4180
4200
  },
4181
4201
 
4182
4202
  _lowercase: {
4183
- [vars$e.textTransform]: 'lowercase',
4203
+ [vars$f.textTransform]: 'lowercase',
4184
4204
  },
4185
4205
  };
4186
4206
 
4187
4207
  var text$3 = /*#__PURE__*/Object.freeze({
4188
4208
  __proto__: null,
4189
4209
  default: text$2,
4190
- vars: vars$e
4210
+ vars: vars$f
4191
4211
  });
4192
4212
 
4193
- const componentName$i = getComponentName('link');
4213
+ const componentName$j = getComponentName('link');
4194
4214
 
4195
- class RawLink extends createBaseClass({ componentName: componentName$i, baseSelector: ':host a' }) {
4215
+ class RawLink extends createBaseClass({ componentName: componentName$j, baseSelector: ':host a' }) {
4196
4216
  constructor() {
4197
4217
  super();
4198
4218
 
@@ -4257,35 +4277,35 @@ const LinkClass = compose(
4257
4277
  )(RawLink);
4258
4278
 
4259
4279
  const globalRefs$6 = getThemeRefs(globals);
4260
- const vars$d = LinkClass.cssVarList;
4280
+ const vars$e = LinkClass.cssVarList;
4261
4281
 
4262
4282
  const link = {
4263
- [vars$d.cursor]: 'pointer',
4283
+ [vars$e.cursor]: 'pointer',
4264
4284
 
4265
- [vars$d.textColor]: globalRefs$6.colors.primary.main,
4285
+ [vars$e.textColor]: globalRefs$6.colors.primary.main,
4266
4286
 
4267
4287
  textAlign: {
4268
- right: { [vars$d.textAlign]: 'right' },
4269
- left: { [vars$d.textAlign]: 'left' },
4270
- center: { [vars$d.textAlign]: 'center' },
4288
+ right: { [vars$e.textAlign]: 'right' },
4289
+ left: { [vars$e.textAlign]: 'left' },
4290
+ center: { [vars$e.textAlign]: 'center' },
4271
4291
  },
4272
4292
 
4273
4293
  _fullWidth: {
4274
- [vars$d.hostWidth]: '100%',
4294
+ [vars$e.hostWidth]: '100%',
4275
4295
  },
4276
4296
 
4277
4297
  mode: {
4278
4298
  primary: {
4279
- [vars$d.textColor]: globalRefs$6.colors.primary.main,
4299
+ [vars$e.textColor]: globalRefs$6.colors.primary.main,
4280
4300
  },
4281
4301
  secondary: {
4282
- [vars$d.textColor]: globalRefs$6.colors.secondary.main,
4302
+ [vars$e.textColor]: globalRefs$6.colors.secondary.main,
4283
4303
  },
4284
4304
  error: {
4285
- [vars$d.textColor]: globalRefs$6.colors.error.main,
4305
+ [vars$e.textColor]: globalRefs$6.colors.error.main,
4286
4306
  },
4287
4307
  success: {
4288
- [vars$d.textColor]: globalRefs$6.colors.success.main,
4308
+ [vars$e.textColor]: globalRefs$6.colors.success.main,
4289
4309
  },
4290
4310
  },
4291
4311
  };
@@ -4293,11 +4313,11 @@ const link = {
4293
4313
  var link$1 = /*#__PURE__*/Object.freeze({
4294
4314
  __proto__: null,
4295
4315
  default: link,
4296
- vars: vars$d
4316
+ vars: vars$e
4297
4317
  });
4298
4318
 
4299
- const componentName$h = getComponentName('divider');
4300
- class RawDivider extends createBaseClass({ componentName: componentName$h, baseSelector: ':host > div' }) {
4319
+ const componentName$i = getComponentName('divider');
4320
+ class RawDivider extends createBaseClass({ componentName: componentName$i, baseSelector: ':host > div' }) {
4301
4321
  constructor() {
4302
4322
  super();
4303
4323
 
@@ -4394,64 +4414,64 @@ const DividerClass = compose(
4394
4414
  )(RawDivider);
4395
4415
 
4396
4416
  const globalRefs$5 = getThemeRefs(globals);
4397
- const compVars$1 = DividerClass.cssVarList;
4417
+ const compVars$2 = DividerClass.cssVarList;
4398
4418
 
4399
4419
  const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
4400
4420
  {
4401
4421
  thickness: '2px',
4402
4422
  spacing: '10px',
4403
4423
  },
4404
- componentName$h
4424
+ componentName$i
4405
4425
  );
4406
4426
 
4407
4427
  const divider = {
4408
4428
  ...helperTheme$1,
4409
4429
 
4410
- [compVars$1.alignItems]: 'center',
4411
- [compVars$1.flexDirection]: 'row',
4412
- [compVars$1.alignSelf]: 'stretch',
4413
- [compVars$1.hostWidth]: '100%',
4414
- [compVars$1.stripeColor]: globalRefs$5.colors.surface.main,
4415
- [compVars$1.stripeColorOpacity]: '0.5',
4416
- [compVars$1.stripeHorizontalThickness]: helperRefs$1.thickness,
4417
- [compVars$1.labelTextWidth]: 'fit-content',
4418
- [compVars$1.labelTextMaxWidth]: 'calc(100% - 100px)',
4419
- [compVars$1.labelTextHorizontalSpacing]: helperRefs$1.spacing,
4430
+ [compVars$2.alignItems]: 'center',
4431
+ [compVars$2.flexDirection]: 'row',
4432
+ [compVars$2.alignSelf]: 'stretch',
4433
+ [compVars$2.hostWidth]: '100%',
4434
+ [compVars$2.stripeColor]: globalRefs$5.colors.surface.main,
4435
+ [compVars$2.stripeColorOpacity]: '0.5',
4436
+ [compVars$2.stripeHorizontalThickness]: helperRefs$1.thickness,
4437
+ [compVars$2.labelTextWidth]: 'fit-content',
4438
+ [compVars$2.labelTextMaxWidth]: 'calc(100% - 100px)',
4439
+ [compVars$2.labelTextHorizontalSpacing]: helperRefs$1.spacing,
4420
4440
 
4421
4441
  _vertical: {
4422
- [compVars$1.minHeight]: '200px',
4423
- [compVars$1.flexDirection]: 'column',
4424
- [compVars$1.hostWidth]: 'fit-content',
4425
- [compVars$1.hostPadding]: `0 calc(${helperRefs$1.thickness} * 3)`,
4426
- [compVars$1.stripeVerticalThickness]: helperRefs$1.thickness,
4427
- [compVars$1.labelTextWidth]: 'fit-content',
4428
- [compVars$1.labelTextMaxWidth]: '100%',
4429
- [compVars$1.labelTextVerticalSpacing]: helperRefs$1.spacing,
4442
+ [compVars$2.minHeight]: '200px',
4443
+ [compVars$2.flexDirection]: 'column',
4444
+ [compVars$2.hostWidth]: 'fit-content',
4445
+ [compVars$2.hostPadding]: `0 calc(${helperRefs$1.thickness} * 3)`,
4446
+ [compVars$2.stripeVerticalThickness]: helperRefs$1.thickness,
4447
+ [compVars$2.labelTextWidth]: 'fit-content',
4448
+ [compVars$2.labelTextMaxWidth]: '100%',
4449
+ [compVars$2.labelTextVerticalSpacing]: helperRefs$1.spacing,
4430
4450
  },
4431
4451
  };
4432
4452
 
4433
- const vars$c = {
4434
- ...compVars$1,
4453
+ const vars$d = {
4454
+ ...compVars$2,
4435
4455
  ...helperVars$1,
4436
4456
  };
4437
4457
 
4438
4458
  var divider$1 = /*#__PURE__*/Object.freeze({
4439
4459
  __proto__: null,
4440
4460
  default: divider,
4441
- vars: vars$c
4461
+ vars: vars$d
4442
4462
  });
4443
4463
 
4444
4464
  /* eslint-disable no-param-reassign */
4445
4465
 
4446
- const componentName$g = getComponentName('passcode-internal');
4466
+ const componentName$h = getComponentName('passcode-internal');
4447
4467
 
4448
- createBaseInputClass({ componentName: componentName$g, baseSelector: 'div' });
4468
+ createBaseInputClass({ componentName: componentName$h, baseSelector: 'div' });
4449
4469
 
4450
- const componentName$f = getComponentName('passcode');
4470
+ const componentName$g = getComponentName('passcode');
4451
4471
 
4452
4472
  const observedAttributes$3 = ['digits'];
4453
4473
 
4454
- const customMixin$4 = (superclass) =>
4474
+ const customMixin$5 = (superclass) =>
4455
4475
  class PasscodeMixinClass extends superclass {
4456
4476
  static get observedAttributes() {
4457
4477
  return observedAttributes$3.concat(superclass.observedAttributes || []);
@@ -4466,17 +4486,17 @@ const customMixin$4 = (superclass) =>
4466
4486
  const template = document.createElement('template');
4467
4487
 
4468
4488
  template.innerHTML = `
4469
- <${componentName$g}
4489
+ <${componentName$h}
4470
4490
  bordered="true"
4471
4491
  name="code"
4472
4492
  tabindex="-1"
4473
4493
  slot="input"
4474
- ><slot></slot></${componentName$g}>
4494
+ ><slot></slot></${componentName$h}>
4475
4495
  `;
4476
4496
 
4477
4497
  this.baseElement.appendChild(template.content.cloneNode(true));
4478
4498
 
4479
- this.inputElement = this.shadowRoot.querySelector(componentName$g);
4499
+ this.inputElement = this.shadowRoot.querySelector(componentName$h);
4480
4500
 
4481
4501
  forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
4482
4502
  }
@@ -4543,7 +4563,7 @@ const PasscodeClass = compose(
4543
4563
  draggableMixin,
4544
4564
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
4545
4565
  componentNameValidationMixin,
4546
- customMixin$4
4566
+ customMixin$5
4547
4567
  )(
4548
4568
  createProxy({
4549
4569
  slots: [],
@@ -4614,44 +4634,44 @@ const PasscodeClass = compose(
4614
4634
  ${resetInputCursor('vaadin-text-field')}
4615
4635
  `,
4616
4636
  excludeAttrsSync: ['tabindex'],
4617
- componentName: componentName$f,
4637
+ componentName: componentName$g,
4618
4638
  })
4619
4639
  );
4620
4640
 
4621
- const vars$b = PasscodeClass.cssVarList;
4641
+ const vars$c = PasscodeClass.cssVarList;
4622
4642
 
4623
4643
  const passcode = {
4624
- [vars$b.fontFamily]: refs.fontFamily,
4625
- [vars$b.fontSize]: refs.fontSize,
4626
- [vars$b.labelTextColor]: refs.labelTextColor,
4627
- [vars$b.labelRequiredIndicator]: refs.requiredIndicator,
4628
- [vars$b.errorMessageTextColor]: refs.errorMessageTextColor,
4629
- [vars$b.digitValueTextColor]: refs.valueTextColor,
4630
- [vars$b.digitPadding]: '0',
4631
- [vars$b.digitTextAlign]: 'center',
4632
- [vars$b.digitSpacing]: '4px',
4633
- [vars$b.hostWidth]: refs.width,
4634
- [vars$b.digitOutlineColor]: 'transparent',
4635
- [vars$b.digitOutlineWidth]: refs.outlineWidth,
4636
- [vars$b.focusedDigitFieldOutlineColor]: refs.outlineColor,
4637
- [vars$b.digitSize]: refs.inputHeight,
4644
+ [vars$c.fontFamily]: refs.fontFamily,
4645
+ [vars$c.fontSize]: refs.fontSize,
4646
+ [vars$c.labelTextColor]: refs.labelTextColor,
4647
+ [vars$c.labelRequiredIndicator]: refs.requiredIndicator,
4648
+ [vars$c.errorMessageTextColor]: refs.errorMessageTextColor,
4649
+ [vars$c.digitValueTextColor]: refs.valueTextColor,
4650
+ [vars$c.digitPadding]: '0',
4651
+ [vars$c.digitTextAlign]: 'center',
4652
+ [vars$c.digitSpacing]: '4px',
4653
+ [vars$c.hostWidth]: refs.width,
4654
+ [vars$c.digitOutlineColor]: 'transparent',
4655
+ [vars$c.digitOutlineWidth]: refs.outlineWidth,
4656
+ [vars$c.focusedDigitFieldOutlineColor]: refs.outlineColor,
4657
+ [vars$c.digitSize]: refs.inputHeight,
4638
4658
 
4639
4659
  _hideCursor: {
4640
- [vars$b.digitCaretTextColor]: 'transparent',
4660
+ [vars$c.digitCaretTextColor]: 'transparent',
4641
4661
  },
4642
4662
  };
4643
4663
 
4644
4664
  var passcode$1 = /*#__PURE__*/Object.freeze({
4645
4665
  __proto__: null,
4646
4666
  default: passcode,
4647
- vars: vars$b
4667
+ vars: vars$c
4648
4668
  });
4649
4669
 
4650
- const componentName$e = getComponentName('loader-linear');
4670
+ const componentName$f = getComponentName('loader-linear');
4651
4671
 
4652
- class RawLoaderLinear extends createBaseClass({ componentName: componentName$e, baseSelector: ':host > div' }) {
4672
+ class RawLoaderLinear extends createBaseClass({ componentName: componentName$f, baseSelector: ':host > div' }) {
4653
4673
  static get componentName() {
4654
- return componentName$e;
4674
+ return componentName$f;
4655
4675
  }
4656
4676
 
4657
4677
  constructor() {
@@ -4713,53 +4733,53 @@ const LoaderLinearClass = compose(
4713
4733
  )(RawLoaderLinear);
4714
4734
 
4715
4735
  const globalRefs$4 = getThemeRefs(globals);
4716
- const vars$a = LoaderLinearClass.cssVarList;
4736
+ const vars$b = LoaderLinearClass.cssVarList;
4717
4737
 
4718
4738
  const loaderLinear = {
4719
- [vars$a.hostDisplay]: 'inline-block',
4720
- [vars$a.hostWidth]: '100%',
4739
+ [vars$b.hostDisplay]: 'inline-block',
4740
+ [vars$b.hostWidth]: '100%',
4721
4741
 
4722
- [vars$a.barColor]: globalRefs$4.colors.surface.contrast,
4723
- [vars$a.barWidth]: '20%',
4742
+ [vars$b.barColor]: globalRefs$4.colors.surface.contrast,
4743
+ [vars$b.barWidth]: '20%',
4724
4744
 
4725
- [vars$a.barBackgroundColor]: globalRefs$4.colors.surface.main,
4726
- [vars$a.barBorderRadius]: '4px',
4745
+ [vars$b.barBackgroundColor]: globalRefs$4.colors.surface.main,
4746
+ [vars$b.barBorderRadius]: '4px',
4727
4747
 
4728
- [vars$a.animationDuration]: '2s',
4729
- [vars$a.animationTimingFunction]: 'linear',
4730
- [vars$a.animationIterationCount]: 'infinite',
4731
- [vars$a.verticalPadding]: '0.25em',
4748
+ [vars$b.animationDuration]: '2s',
4749
+ [vars$b.animationTimingFunction]: 'linear',
4750
+ [vars$b.animationIterationCount]: 'infinite',
4751
+ [vars$b.verticalPadding]: '0.25em',
4732
4752
 
4733
4753
  size: {
4734
- xs: { [vars$a.barHeight]: '2px' },
4735
- sm: { [vars$a.barHeight]: '4px' },
4736
- md: { [vars$a.barHeight]: '6px' },
4737
- lg: { [vars$a.barHeight]: '8px' },
4754
+ xs: { [vars$b.barHeight]: '2px' },
4755
+ sm: { [vars$b.barHeight]: '4px' },
4756
+ md: { [vars$b.barHeight]: '6px' },
4757
+ lg: { [vars$b.barHeight]: '8px' },
4738
4758
  },
4739
4759
 
4740
4760
  mode: {
4741
4761
  primary: {
4742
- [vars$a.barColor]: globalRefs$4.colors.primary.main,
4762
+ [vars$b.barColor]: globalRefs$4.colors.primary.main,
4743
4763
  },
4744
4764
  secondary: {
4745
- [vars$a.barColor]: globalRefs$4.colors.secondary.main,
4765
+ [vars$b.barColor]: globalRefs$4.colors.secondary.main,
4746
4766
  },
4747
4767
  },
4748
4768
 
4749
4769
  _hidden: {
4750
- [vars$a.hostDisplay]: 'none',
4770
+ [vars$b.hostDisplay]: 'none',
4751
4771
  },
4752
4772
  };
4753
4773
 
4754
4774
  var loaderLinear$1 = /*#__PURE__*/Object.freeze({
4755
4775
  __proto__: null,
4756
4776
  default: loaderLinear,
4757
- vars: vars$a
4777
+ vars: vars$b
4758
4778
  });
4759
4779
 
4760
- const componentName$d = getComponentName('loader-radial');
4780
+ const componentName$e = getComponentName('loader-radial');
4761
4781
 
4762
- class RawLoaderRadial extends createBaseClass({ componentName: componentName$d, baseSelector: ':host > div' }) {
4782
+ class RawLoaderRadial extends createBaseClass({ componentName: componentName$e, baseSelector: ':host > div' }) {
4763
4783
  constructor() {
4764
4784
  super();
4765
4785
 
@@ -4804,7 +4824,7 @@ const LoaderRadialClass = compose(
4804
4824
  )(RawLoaderRadial);
4805
4825
 
4806
4826
  const globalRefs$3 = getThemeRefs(globals);
4807
- const compVars = LoaderRadialClass.cssVarList;
4827
+ const compVars$1 = LoaderRadialClass.cssVarList;
4808
4828
 
4809
4829
  const [helperTheme, helperRefs, helperVars] = createHelperVars(
4810
4830
  {
@@ -4818,47 +4838,47 @@ const [helperTheme, helperRefs, helperVars] = createHelperVars(
4818
4838
  },
4819
4839
  },
4820
4840
  },
4821
- componentName$d
4841
+ componentName$e
4822
4842
  );
4823
4843
 
4824
4844
  const loaderRadial = {
4825
4845
  ...helperTheme,
4826
4846
 
4827
- [compVars.animationDuration]: '2s',
4828
- [compVars.animationTimingFunction]: 'linear',
4829
- [compVars.animationIterationCount]: 'infinite',
4830
- [compVars.spinnerBorderStyle]: 'solid',
4831
- [compVars.spinnerBorderWidth]: '0.2em',
4832
- [compVars.spinnerBorderRadius]: '50%',
4833
- [compVars.spinnerQuadrant1Color]: helperRefs.spinnerColor,
4834
- [compVars.spinnerQuadrant2Color]: 'transparent',
4835
- [compVars.spinnerQuadrant3Color]: helperRefs.spinnerColor,
4836
- [compVars.spinnerQuadrant4Color]: 'transparent',
4847
+ [compVars$1.animationDuration]: '2s',
4848
+ [compVars$1.animationTimingFunction]: 'linear',
4849
+ [compVars$1.animationIterationCount]: 'infinite',
4850
+ [compVars$1.spinnerBorderStyle]: 'solid',
4851
+ [compVars$1.spinnerBorderWidth]: '0.2em',
4852
+ [compVars$1.spinnerBorderRadius]: '50%',
4853
+ [compVars$1.spinnerQuadrant1Color]: helperRefs.spinnerColor,
4854
+ [compVars$1.spinnerQuadrant2Color]: 'transparent',
4855
+ [compVars$1.spinnerQuadrant3Color]: helperRefs.spinnerColor,
4856
+ [compVars$1.spinnerQuadrant4Color]: 'transparent',
4837
4857
 
4838
4858
  size: {
4839
- xs: { [compVars.spinnerSize]: '20px' },
4840
- sm: { [compVars.spinnerSize]: '30px' },
4841
- md: { [compVars.spinnerSize]: '40px' },
4842
- lg: { [compVars.spinnerSize]: '60px' },
4843
- xl: { [compVars.spinnerSize]: '80px' },
4859
+ xs: { [compVars$1.spinnerSize]: '20px' },
4860
+ sm: { [compVars$1.spinnerSize]: '30px' },
4861
+ md: { [compVars$1.spinnerSize]: '40px' },
4862
+ lg: { [compVars$1.spinnerSize]: '60px' },
4863
+ xl: { [compVars$1.spinnerSize]: '80px' },
4844
4864
  },
4845
4865
 
4846
4866
  _hidden: {
4847
- [compVars.hostDisplay]: 'none',
4867
+ [compVars$1.hostDisplay]: 'none',
4848
4868
  },
4849
4869
  };
4850
- const vars$9 = {
4851
- ...compVars,
4870
+ const vars$a = {
4871
+ ...compVars$1,
4852
4872
  ...helperVars,
4853
4873
  };
4854
4874
 
4855
4875
  var loaderRadial$1 = /*#__PURE__*/Object.freeze({
4856
4876
  __proto__: null,
4857
4877
  default: loaderRadial,
4858
- vars: vars$9
4878
+ vars: vars$a
4859
4879
  });
4860
4880
 
4861
- const componentName$c = getComponentName('combo-box');
4881
+ const componentName$d = getComponentName('combo-box');
4862
4882
 
4863
4883
  const ComboBoxMixin = (superclass) =>
4864
4884
  class ComboBoxMixinClass extends superclass {
@@ -5209,66 +5229,66 @@ const ComboBoxClass = compose(
5209
5229
  // and reset items to an empty array, and opening the list box with no items
5210
5230
  // to display.
5211
5231
  excludeAttrsSync: ['tabindex', 'size', 'data'],
5212
- componentName: componentName$c,
5232
+ componentName: componentName$d,
5213
5233
  includeForwardProps: ['items', 'renderer', 'selectedItem'],
5214
5234
  })
5215
5235
  );
5216
5236
 
5217
5237
  const globalRefs$2 = getThemeRefs(globals);
5218
- const vars$8 = ComboBoxClass.cssVarList;
5238
+ const vars$9 = ComboBoxClass.cssVarList;
5219
5239
 
5220
5240
  const comboBox = {
5221
- [vars$8.hostWidth]: refs.width,
5222
- [vars$8.fontSize]: refs.fontSize,
5223
- [vars$8.fontFamily]: refs.fontFamily,
5224
- [vars$8.labelTextColor]: refs.labelTextColor,
5225
- [vars$8.errorMessageTextColor]: refs.errorMessageTextColor,
5226
- [vars$8.inputBorderColor]: refs.borderColor,
5227
- [vars$8.inputBorderWidth]: refs.borderWidth,
5228
- [vars$8.inputBorderStyle]: refs.borderStyle,
5229
- [vars$8.inputBorderRadius]: refs.borderRadius,
5230
- [vars$8.inputOutlineColor]: refs.outlineColor,
5231
- [vars$8.inputOutlineOffset]: refs.outlineOffset,
5232
- [vars$8.inputOutlineWidth]: refs.outlineWidth,
5233
- [vars$8.inputOutlineStyle]: refs.outlineStyle,
5234
- [vars$8.labelRequiredIndicator]: refs.requiredIndicator,
5235
- [vars$8.inputValueTextColor]: refs.valueTextColor,
5236
- [vars$8.inputPlaceholderTextColor]: refs.placeholderTextColor,
5237
- [vars$8.inputBackgroundColor]: refs.backgroundColor,
5238
- [vars$8.inputHorizontalPadding]: refs.horizontalPadding,
5239
- [vars$8.inputHeight]: refs.inputHeight,
5240
- [vars$8.inputDropdownButtonColor]: globalRefs$2.colors.surface.contrast,
5241
- [vars$8.inputDropdownButtonCursor]: 'pointer',
5242
- [vars$8.inputDropdownButtonSize]: refs.toggleButtonSize,
5243
- [vars$8.inputDropdownButtonOffset]: globalRefs$2.spacing.xs,
5241
+ [vars$9.hostWidth]: refs.width,
5242
+ [vars$9.fontSize]: refs.fontSize,
5243
+ [vars$9.fontFamily]: refs.fontFamily,
5244
+ [vars$9.labelTextColor]: refs.labelTextColor,
5245
+ [vars$9.errorMessageTextColor]: refs.errorMessageTextColor,
5246
+ [vars$9.inputBorderColor]: refs.borderColor,
5247
+ [vars$9.inputBorderWidth]: refs.borderWidth,
5248
+ [vars$9.inputBorderStyle]: refs.borderStyle,
5249
+ [vars$9.inputBorderRadius]: refs.borderRadius,
5250
+ [vars$9.inputOutlineColor]: refs.outlineColor,
5251
+ [vars$9.inputOutlineOffset]: refs.outlineOffset,
5252
+ [vars$9.inputOutlineWidth]: refs.outlineWidth,
5253
+ [vars$9.inputOutlineStyle]: refs.outlineStyle,
5254
+ [vars$9.labelRequiredIndicator]: refs.requiredIndicator,
5255
+ [vars$9.inputValueTextColor]: refs.valueTextColor,
5256
+ [vars$9.inputPlaceholderTextColor]: refs.placeholderTextColor,
5257
+ [vars$9.inputBackgroundColor]: refs.backgroundColor,
5258
+ [vars$9.inputHorizontalPadding]: refs.horizontalPadding,
5259
+ [vars$9.inputHeight]: refs.inputHeight,
5260
+ [vars$9.inputDropdownButtonColor]: globalRefs$2.colors.surface.contrast,
5261
+ [vars$9.inputDropdownButtonCursor]: 'pointer',
5262
+ [vars$9.inputDropdownButtonSize]: refs.toggleButtonSize,
5263
+ [vars$9.inputDropdownButtonOffset]: globalRefs$2.spacing.xs,
5244
5264
 
5245
5265
  _readonly: {
5246
- [vars$8.inputDropdownButtonCursor]: 'default',
5266
+ [vars$9.inputDropdownButtonCursor]: 'default',
5247
5267
  },
5248
5268
 
5249
5269
  // Overlay theme exposed via the component:
5250
- [vars$8.overlayFontSize]: refs.fontSize,
5251
- [vars$8.overlayFontFamily]: refs.fontFamily,
5252
- [vars$8.overlayCursor]: 'pointer',
5253
- [vars$8.overlayItemBoxShadow]: 'none',
5270
+ [vars$9.overlayFontSize]: refs.fontSize,
5271
+ [vars$9.overlayFontFamily]: refs.fontFamily,
5272
+ [vars$9.overlayCursor]: 'pointer',
5273
+ [vars$9.overlayItemBoxShadow]: 'none',
5254
5274
 
5255
5275
  // Overlay direct theme:
5256
- [vars$8.overlay.minHeight]: '400px',
5257
- [vars$8.overlay.margin]: '0',
5276
+ [vars$9.overlay.minHeight]: '400px',
5277
+ [vars$9.overlay.margin]: '0',
5258
5278
  };
5259
5279
 
5260
5280
  var comboBox$1 = /*#__PURE__*/Object.freeze({
5261
5281
  __proto__: null,
5262
5282
  comboBox: comboBox,
5263
5283
  default: comboBox,
5264
- vars: vars$8
5284
+ vars: vars$9
5265
5285
  });
5266
5286
 
5267
5287
  const observedAttributes$2 = ['src', 'alt'];
5268
5288
 
5269
- const componentName$b = getComponentName('image');
5289
+ const componentName$c = getComponentName('image');
5270
5290
 
5271
- const BaseClass$1 = createBaseClass({ componentName: componentName$b, baseSelector: ':host > img' });
5291
+ const BaseClass$1 = createBaseClass({ componentName: componentName$c, baseSelector: ':host > img' });
5272
5292
  class RawImage extends BaseClass$1 {
5273
5293
  static get observedAttributes() {
5274
5294
  return observedAttributes$2.concat(BaseClass$1.observedAttributes || []);
@@ -5308,14 +5328,14 @@ const ImageClass = compose(
5308
5328
  draggableMixin
5309
5329
  )(RawImage);
5310
5330
 
5311
- const vars$7 = ImageClass.cssVarList;
5331
+ const vars$8 = ImageClass.cssVarList;
5312
5332
 
5313
5333
  const image = {};
5314
5334
 
5315
5335
  var image$1 = /*#__PURE__*/Object.freeze({
5316
5336
  __proto__: null,
5317
5337
  default: image,
5318
- vars: vars$7
5338
+ vars: vars$8
5319
5339
  });
5320
5340
 
5321
5341
  var CountryCodes = [
@@ -6531,16 +6551,16 @@ var CountryCodes = [
6531
6551
  },
6532
6552
  ].sort((a, b) => (a.name < b.name ? -1 : 1));
6533
6553
 
6534
- const componentName$a = getComponentName('phone-field-internal');
6554
+ const componentName$b = getComponentName('phone-field-internal');
6535
6555
 
6536
- createBaseInputClass({ componentName: componentName$a, baseSelector: 'div' });
6556
+ createBaseInputClass({ componentName: componentName$b, baseSelector: 'div' });
6537
6557
 
6538
6558
  const textVars$1 = TextFieldClass.cssVarList;
6539
6559
  const comboVars = ComboBoxClass.cssVarList;
6540
6560
 
6541
- const componentName$9 = getComponentName('phone-field');
6561
+ const componentName$a = getComponentName('phone-field');
6542
6562
 
6543
- const customMixin$3 = (superclass) =>
6563
+ const customMixin$4 = (superclass) =>
6544
6564
  class PhoneFieldMixinClass extends superclass {
6545
6565
  static get CountryCodes() {
6546
6566
  return CountryCodes;
@@ -6552,15 +6572,15 @@ const customMixin$3 = (superclass) =>
6552
6572
  const template = document.createElement('template');
6553
6573
 
6554
6574
  template.innerHTML = `
6555
- <${componentName$a}
6575
+ <${componentName$b}
6556
6576
  tabindex="-1"
6557
6577
  slot="input"
6558
- ></${componentName$a}>
6578
+ ></${componentName$b}>
6559
6579
  `;
6560
6580
 
6561
6581
  this.baseElement.appendChild(template.content.cloneNode(true));
6562
6582
 
6563
- this.inputElement = this.shadowRoot.querySelector(componentName$a);
6583
+ this.inputElement = this.shadowRoot.querySelector(componentName$b);
6564
6584
 
6565
6585
  forwardAttrs(this.shadowRoot.host, this.inputElement, {
6566
6586
  includeAttrs: [
@@ -6679,7 +6699,7 @@ const PhoneFieldClass = compose(
6679
6699
  }),
6680
6700
  draggableMixin,
6681
6701
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
6682
- customMixin$3
6702
+ customMixin$4
6683
6703
  )(
6684
6704
  createProxy({
6685
6705
  slots: [],
@@ -6755,32 +6775,32 @@ const PhoneFieldClass = compose(
6755
6775
  }
6756
6776
  `,
6757
6777
  excludeAttrsSync: ['tabindex'],
6758
- componentName: componentName$9,
6778
+ componentName: componentName$a,
6759
6779
  })
6760
6780
  );
6761
6781
 
6762
- const vars$6 = PhoneFieldClass.cssVarList;
6782
+ const vars$7 = PhoneFieldClass.cssVarList;
6763
6783
 
6764
6784
  const phoneField = {
6765
- [vars$6.hostWidth]: refs.width,
6766
- [vars$6.fontSize]: refs.fontSize,
6767
- [vars$6.fontFamily]: refs.fontFamily,
6768
- [vars$6.labelTextColor]: refs.labelTextColor,
6769
- [vars$6.labelRequiredIndicator]: refs.requiredIndicator,
6770
- [vars$6.errorMessageTextColor]: refs.errorMessageTextColor,
6771
- [vars$6.inputValueTextColor]: refs.valueTextColor,
6772
- [vars$6.inputPlaceholderTextColor]: refs.placeholderTextColor,
6773
- [vars$6.inputBorderStyle]: refs.borderStyle,
6774
- [vars$6.inputBorderWidth]: refs.borderWidth,
6775
- [vars$6.inputBorderColor]: refs.borderColor,
6776
- [vars$6.inputBorderRadius]: refs.borderRadius,
6777
- [vars$6.inputOutlineStyle]: refs.outlineStyle,
6778
- [vars$6.inputOutlineWidth]: refs.outlineWidth,
6779
- [vars$6.inputOutlineColor]: refs.outlineColor,
6780
- [vars$6.inputOutlineOffset]: refs.outlineOffset,
6781
- [vars$6.phoneInputWidth]: refs.minWidth,
6782
- [vars$6.countryCodeInputWidth]: '5em',
6783
- [vars$6.countryCodeDropdownWidth]: '20em',
6785
+ [vars$7.hostWidth]: refs.width,
6786
+ [vars$7.fontSize]: refs.fontSize,
6787
+ [vars$7.fontFamily]: refs.fontFamily,
6788
+ [vars$7.labelTextColor]: refs.labelTextColor,
6789
+ [vars$7.labelRequiredIndicator]: refs.requiredIndicator,
6790
+ [vars$7.errorMessageTextColor]: refs.errorMessageTextColor,
6791
+ [vars$7.inputValueTextColor]: refs.valueTextColor,
6792
+ [vars$7.inputPlaceholderTextColor]: refs.placeholderTextColor,
6793
+ [vars$7.inputBorderStyle]: refs.borderStyle,
6794
+ [vars$7.inputBorderWidth]: refs.borderWidth,
6795
+ [vars$7.inputBorderColor]: refs.borderColor,
6796
+ [vars$7.inputBorderRadius]: refs.borderRadius,
6797
+ [vars$7.inputOutlineStyle]: refs.outlineStyle,
6798
+ [vars$7.inputOutlineWidth]: refs.outlineWidth,
6799
+ [vars$7.inputOutlineColor]: refs.outlineColor,
6800
+ [vars$7.inputOutlineOffset]: refs.outlineOffset,
6801
+ [vars$7.phoneInputWidth]: refs.minWidth,
6802
+ [vars$7.countryCodeInputWidth]: '5em',
6803
+ [vars$7.countryCodeDropdownWidth]: '20em',
6784
6804
 
6785
6805
  // '@overlay': {
6786
6806
  // overlayItemBackgroundColor: 'red'
@@ -6790,18 +6810,18 @@ const phoneField = {
6790
6810
  var phoneField$1 = /*#__PURE__*/Object.freeze({
6791
6811
  __proto__: null,
6792
6812
  default: phoneField,
6793
- vars: vars$6
6813
+ vars: vars$7
6794
6814
  });
6795
6815
 
6796
- const componentName$8 = getComponentName('phone-field-internal-input-box');
6816
+ const componentName$9 = getComponentName('phone-field-internal-input-box');
6797
6817
 
6798
- createBaseInputClass({ componentName: componentName$8, baseSelector: 'div' });
6818
+ createBaseInputClass({ componentName: componentName$9, baseSelector: 'div' });
6799
6819
 
6800
6820
  const textVars = TextFieldClass.cssVarList;
6801
6821
 
6802
- const componentName$7 = getComponentName('phone-input-box-field');
6822
+ const componentName$8 = getComponentName('phone-input-box-field');
6803
6823
 
6804
- const customMixin$2 = (superclass) =>
6824
+ const customMixin$3 = (superclass) =>
6805
6825
  class PhoneInputBoxFieldMixinClass extends superclass {
6806
6826
  static get CountryCodes() {
6807
6827
  return CountryCodes;
@@ -6813,15 +6833,15 @@ const customMixin$2 = (superclass) =>
6813
6833
  const template = document.createElement('template');
6814
6834
 
6815
6835
  template.innerHTML = `
6816
- <${componentName$8}
6836
+ <${componentName$9}
6817
6837
  tabindex="-1"
6818
6838
  slot="input"
6819
- ></${componentName$8}>
6839
+ ></${componentName$9}>
6820
6840
  `;
6821
6841
 
6822
6842
  this.baseElement.appendChild(template.content.cloneNode(true));
6823
6843
 
6824
- this.inputElement = this.shadowRoot.querySelector(componentName$8);
6844
+ this.inputElement = this.shadowRoot.querySelector(componentName$9);
6825
6845
 
6826
6846
  forwardAttrs(this.shadowRoot.host, this.inputElement, {
6827
6847
  includeAttrs: [
@@ -6887,7 +6907,7 @@ const PhoneFieldInputBoxClass = compose(
6887
6907
  }),
6888
6908
  draggableMixin,
6889
6909
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
6890
- customMixin$2
6910
+ customMixin$3
6891
6911
  )(
6892
6912
  createProxy({
6893
6913
  slots: [],
@@ -6953,46 +6973,46 @@ const PhoneFieldInputBoxClass = compose(
6953
6973
  }
6954
6974
  `,
6955
6975
  excludeAttrsSync: ['tabindex'],
6956
- componentName: componentName$7,
6976
+ componentName: componentName$8,
6957
6977
  })
6958
6978
  );
6959
6979
 
6960
- const vars$5 = PhoneFieldInputBoxClass.cssVarList;
6980
+ const vars$6 = PhoneFieldInputBoxClass.cssVarList;
6961
6981
 
6962
6982
  const phoneInputBoxField = {
6963
- [vars$5.hostWidth]: '16em',
6964
- [vars$5.hostMinWidth]: refs.minWidth,
6965
- [vars$5.fontSize]: refs.fontSize,
6966
- [vars$5.fontFamily]: refs.fontFamily,
6967
- [vars$5.labelTextColor]: refs.labelTextColor,
6968
- [vars$5.labelRequiredIndicator]: refs.requiredIndicator,
6969
- [vars$5.errorMessageTextColor]: refs.errorMessageTextColor,
6970
- [vars$5.inputValueTextColor]: refs.valueTextColor,
6971
- [vars$5.inputPlaceholderTextColor]: refs.placeholderTextColor,
6972
- [vars$5.inputBorderStyle]: refs.borderStyle,
6973
- [vars$5.inputBorderWidth]: refs.borderWidth,
6974
- [vars$5.inputBorderColor]: refs.borderColor,
6975
- [vars$5.inputBorderRadius]: refs.borderRadius,
6976
- [vars$5.inputOutlineStyle]: refs.outlineStyle,
6977
- [vars$5.inputOutlineWidth]: refs.outlineWidth,
6978
- [vars$5.inputOutlineColor]: refs.outlineColor,
6979
- [vars$5.inputOutlineOffset]: refs.outlineOffset,
6983
+ [vars$6.hostWidth]: '16em',
6984
+ [vars$6.hostMinWidth]: refs.minWidth,
6985
+ [vars$6.fontSize]: refs.fontSize,
6986
+ [vars$6.fontFamily]: refs.fontFamily,
6987
+ [vars$6.labelTextColor]: refs.labelTextColor,
6988
+ [vars$6.labelRequiredIndicator]: refs.requiredIndicator,
6989
+ [vars$6.errorMessageTextColor]: refs.errorMessageTextColor,
6990
+ [vars$6.inputValueTextColor]: refs.valueTextColor,
6991
+ [vars$6.inputPlaceholderTextColor]: refs.placeholderTextColor,
6992
+ [vars$6.inputBorderStyle]: refs.borderStyle,
6993
+ [vars$6.inputBorderWidth]: refs.borderWidth,
6994
+ [vars$6.inputBorderColor]: refs.borderColor,
6995
+ [vars$6.inputBorderRadius]: refs.borderRadius,
6996
+ [vars$6.inputOutlineStyle]: refs.outlineStyle,
6997
+ [vars$6.inputOutlineWidth]: refs.outlineWidth,
6998
+ [vars$6.inputOutlineColor]: refs.outlineColor,
6999
+ [vars$6.inputOutlineOffset]: refs.outlineOffset,
6980
7000
  _fullWidth: {
6981
- [vars$5.hostWidth]: refs.width,
7001
+ [vars$6.hostWidth]: refs.width,
6982
7002
  },
6983
7003
  };
6984
7004
 
6985
7005
  var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
6986
7006
  __proto__: null,
6987
7007
  default: phoneInputBoxField,
6988
- vars: vars$5
7008
+ vars: vars$6
6989
7009
  });
6990
7010
 
6991
- const componentName$6 = getComponentName('new-password-internal');
7011
+ const componentName$7 = getComponentName('new-password-internal');
6992
7012
 
6993
- const componentName$5 = getComponentName('new-password');
7013
+ const componentName$6 = getComponentName('new-password');
6994
7014
 
6995
- const customMixin$1 = (superclass) =>
7015
+ const customMixin$2 = (superclass) =>
6996
7016
  class NewPasswordMixinClass extends superclass {
6997
7017
  init() {
6998
7018
  super.init?.();
@@ -7000,16 +7020,16 @@ const customMixin$1 = (superclass) =>
7000
7020
  const template = document.createElement('template');
7001
7021
 
7002
7022
  template.innerHTML = `
7003
- <${componentName$6}
7023
+ <${componentName$7}
7004
7024
  name="new-password"
7005
7025
  tabindex="-1"
7006
7026
  slot="input"
7007
- ></${componentName$6}>
7027
+ ></${componentName$7}>
7008
7028
  `;
7009
7029
 
7010
7030
  this.baseElement.appendChild(template.content.cloneNode(true));
7011
7031
 
7012
- this.inputElement = this.shadowRoot.querySelector(componentName$6);
7032
+ this.inputElement = this.shadowRoot.querySelector(componentName$7);
7013
7033
 
7014
7034
  forwardAttrs(this, this.inputElement, {
7015
7035
  includeAttrs: [
@@ -7059,7 +7079,7 @@ const NewPasswordClass = compose(
7059
7079
  }),
7060
7080
  draggableMixin,
7061
7081
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
7062
- customMixin$1
7082
+ customMixin$2
7063
7083
  )(
7064
7084
  createProxy({
7065
7085
  slots: [],
@@ -7108,32 +7128,32 @@ const NewPasswordClass = compose(
7108
7128
  },
7109
7129
  `,
7110
7130
  excludeAttrsSync: ['tabindex'],
7111
- componentName: componentName$5,
7131
+ componentName: componentName$6,
7112
7132
  })
7113
7133
  );
7114
7134
 
7115
- const vars$4 = NewPasswordClass.cssVarList;
7135
+ const vars$5 = NewPasswordClass.cssVarList;
7116
7136
 
7117
7137
  const newPassword = {
7118
- [vars$4.hostWidth]: refs.width,
7119
- [vars$4.hostMinWidth]: refs.minWidth,
7120
- [vars$4.fontSize]: refs.fontSize,
7121
- [vars$4.fontFamily]: refs.fontFamily,
7122
- [vars$4.spaceBetweenInputs]: '1em',
7123
- [vars$4.errorMessageTextColor]: refs.errorMessageTextColor,
7138
+ [vars$5.hostWidth]: refs.width,
7139
+ [vars$5.hostMinWidth]: refs.minWidth,
7140
+ [vars$5.fontSize]: refs.fontSize,
7141
+ [vars$5.fontFamily]: refs.fontFamily,
7142
+ [vars$5.spaceBetweenInputs]: '1em',
7143
+ [vars$5.errorMessageTextColor]: refs.errorMessageTextColor,
7124
7144
 
7125
7145
  _required: {
7126
7146
  // NewPassword doesn't pass `required` attribute to its Password components.
7127
7147
  // That's why we fake the required indicator on each input.
7128
7148
  // We do that by injecting `::after` element, and populating it with requiredIndicator content.
7129
- [vars$4.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
7149
+ [vars$5.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
7130
7150
  },
7131
7151
  };
7132
7152
 
7133
7153
  var newPassword$1 = /*#__PURE__*/Object.freeze({
7134
7154
  __proto__: null,
7135
7155
  default: newPassword,
7136
- vars: vars$4
7156
+ vars: vars$5
7137
7157
  });
7138
7158
 
7139
7159
  const getFileBase64 = (fileObj) => {
@@ -7148,7 +7168,7 @@ const getFilename = (fileObj) => {
7148
7168
  return fileObj.name.replace(/^.*\\/, '');
7149
7169
  };
7150
7170
 
7151
- const componentName$4 = getComponentName('upload-file');
7171
+ const componentName$5 = getComponentName('upload-file');
7152
7172
 
7153
7173
  const observedAttributes$1 = [
7154
7174
  'title',
@@ -7163,7 +7183,7 @@ const observedAttributes$1 = [
7163
7183
  'icon',
7164
7184
  ];
7165
7185
 
7166
- const BaseInputClass = createBaseInputClass({ componentName: componentName$4, baseSelector: ':host > div' });
7186
+ const BaseInputClass = createBaseInputClass({ componentName: componentName$5, baseSelector: ':host > div' });
7167
7187
 
7168
7188
  class RawUploadFile extends BaseInputClass {
7169
7189
  static get observedAttributes() {
@@ -7373,76 +7393,76 @@ const UploadFileClass = compose(
7373
7393
  componentNameValidationMixin
7374
7394
  )(RawUploadFile);
7375
7395
 
7376
- const vars$3 = UploadFileClass.cssVarList;
7396
+ const vars$4 = UploadFileClass.cssVarList;
7377
7397
 
7378
7398
  const uploadFile = {
7379
- [vars$3.labelTextColor]: refs.labelTextColor,
7380
- [vars$3.fontFamily]: refs.fontFamily,
7399
+ [vars$4.labelTextColor]: refs.labelTextColor,
7400
+ [vars$4.fontFamily]: refs.fontFamily,
7381
7401
 
7382
- [vars$3.iconSize]: '2em',
7402
+ [vars$4.iconSize]: '2em',
7383
7403
 
7384
- [vars$3.hostPadding]: '0.75em',
7385
- [vars$3.gap]: '0.5em',
7404
+ [vars$4.hostPadding]: '0.75em',
7405
+ [vars$4.gap]: '0.5em',
7386
7406
 
7387
- [vars$3.fontSize]: '16px',
7388
- [vars$3.titleFontWeight]: '500',
7389
- [vars$3.lineHeight]: '1em',
7407
+ [vars$4.fontSize]: '16px',
7408
+ [vars$4.titleFontWeight]: '500',
7409
+ [vars$4.lineHeight]: '1em',
7390
7410
 
7391
- [vars$3.borderWidth]: refs.borderWidth,
7392
- [vars$3.borderColor]: refs.borderColor,
7393
- [vars$3.borderRadius]: refs.borderRadius,
7394
- [vars$3.borderStyle]: 'dashed',
7411
+ [vars$4.borderWidth]: refs.borderWidth,
7412
+ [vars$4.borderColor]: refs.borderColor,
7413
+ [vars$4.borderRadius]: refs.borderRadius,
7414
+ [vars$4.borderStyle]: 'dashed',
7395
7415
 
7396
7416
  _required: {
7397
- [vars$3.requiredIndicator]: refs.requiredIndicator,
7417
+ [vars$4.requiredIndicator]: refs.requiredIndicator,
7398
7418
  },
7399
7419
 
7400
7420
  size: {
7401
7421
  xs: {
7402
- [vars$3.hostHeight]: '196px',
7403
- [vars$3.hostWidth]: '200px',
7404
- [vars$3.titleFontSize]: '0.875em',
7405
- [vars$3.descriptionFontSize]: '0.875em',
7406
- [vars$3.lineHeight]: '1.25em',
7422
+ [vars$4.hostHeight]: '196px',
7423
+ [vars$4.hostWidth]: '200px',
7424
+ [vars$4.titleFontSize]: '0.875em',
7425
+ [vars$4.descriptionFontSize]: '0.875em',
7426
+ [vars$4.lineHeight]: '1.25em',
7407
7427
  },
7408
7428
  sm: {
7409
- [vars$3.hostHeight]: '216px',
7410
- [vars$3.hostWidth]: '230px',
7411
- [vars$3.titleFontSize]: '1em',
7412
- [vars$3.descriptionFontSize]: '0.875em',
7413
- [vars$3.lineHeight]: '1.25em',
7429
+ [vars$4.hostHeight]: '216px',
7430
+ [vars$4.hostWidth]: '230px',
7431
+ [vars$4.titleFontSize]: '1em',
7432
+ [vars$4.descriptionFontSize]: '0.875em',
7433
+ [vars$4.lineHeight]: '1.25em',
7414
7434
  },
7415
7435
  md: {
7416
- [vars$3.hostHeight]: '256px',
7417
- [vars$3.hostWidth]: '312px',
7418
- [vars$3.titleFontSize]: '1.125em',
7419
- [vars$3.descriptionFontSize]: '1em',
7420
- [vars$3.lineHeight]: '1.5em',
7436
+ [vars$4.hostHeight]: '256px',
7437
+ [vars$4.hostWidth]: '312px',
7438
+ [vars$4.titleFontSize]: '1.125em',
7439
+ [vars$4.descriptionFontSize]: '1em',
7440
+ [vars$4.lineHeight]: '1.5em',
7421
7441
  },
7422
7442
  lg: {
7423
- [vars$3.hostHeight]: '280px',
7424
- [vars$3.hostWidth]: '336px',
7425
- [vars$3.titleFontSize]: '1.125em',
7426
- [vars$3.descriptionFontSize]: '1.125em',
7427
- [vars$3.lineHeight]: '1.75em',
7443
+ [vars$4.hostHeight]: '280px',
7444
+ [vars$4.hostWidth]: '336px',
7445
+ [vars$4.titleFontSize]: '1.125em',
7446
+ [vars$4.descriptionFontSize]: '1.125em',
7447
+ [vars$4.lineHeight]: '1.75em',
7428
7448
  },
7429
7449
  },
7430
7450
 
7431
7451
  _fullWidth: {
7432
- [vars$3.hostWidth]: refs.width,
7452
+ [vars$4.hostWidth]: refs.width,
7433
7453
  },
7434
7454
  };
7435
7455
 
7436
7456
  var uploadFile$1 = /*#__PURE__*/Object.freeze({
7437
7457
  __proto__: null,
7438
7458
  default: uploadFile,
7439
- vars: vars$3
7459
+ vars: vars$4
7440
7460
  });
7441
7461
 
7442
- const componentName$3 = getComponentName('button-selection-group-item');
7462
+ const componentName$4 = getComponentName('button-selection-group-item');
7443
7463
 
7444
7464
  class RawSelectItem extends createBaseClass({
7445
- componentName: componentName$3,
7465
+ componentName: componentName$4,
7446
7466
  baseSelector: ':host > descope-button',
7447
7467
  }) {
7448
7468
  get size() {
@@ -7538,36 +7558,36 @@ const ButtonSelectionGroupItemClass = compose(
7538
7558
 
7539
7559
  const globalRefs$1 = getThemeRefs(globals);
7540
7560
 
7541
- const vars$2 = ButtonSelectionGroupItemClass.cssVarList;
7561
+ const vars$3 = ButtonSelectionGroupItemClass.cssVarList;
7542
7562
 
7543
7563
  const buttonSelectionGroupItem = {
7544
- [vars$2.backgroundColor]: globalRefs$1.colors.surface.light,
7545
- [vars$2.labelTextColor]: globalRefs$1.colors.surface.contrast,
7546
- [vars$2.borderColor]: globalRefs$1.colors.surface.main,
7547
- [vars$2.borderStyle]: 'solid',
7548
- [vars$2.borderRadius]: globalRefs$1.radius.sm,
7564
+ [vars$3.backgroundColor]: globalRefs$1.colors.surface.light,
7565
+ [vars$3.labelTextColor]: globalRefs$1.colors.surface.contrast,
7566
+ [vars$3.borderColor]: globalRefs$1.colors.surface.main,
7567
+ [vars$3.borderStyle]: 'solid',
7568
+ [vars$3.borderRadius]: globalRefs$1.radius.sm,
7549
7569
 
7550
7570
  _hover: {
7551
- [vars$2.backgroundColor]: '#f4f5f5', // can we take it from the palette?
7571
+ [vars$3.backgroundColor]: '#f4f5f5', // can we take it from the palette?
7552
7572
  },
7553
7573
 
7554
7574
  _selected: {
7555
- [vars$2.borderColor]: globalRefs$1.colors.surface.contrast,
7556
- [vars$2.backgroundColor]: globalRefs$1.colors.surface.contrast,
7557
- [vars$2.labelTextColor]: globalRefs$1.colors.surface.light,
7575
+ [vars$3.borderColor]: globalRefs$1.colors.surface.contrast,
7576
+ [vars$3.backgroundColor]: globalRefs$1.colors.surface.contrast,
7577
+ [vars$3.labelTextColor]: globalRefs$1.colors.surface.light,
7558
7578
  },
7559
7579
  };
7560
7580
 
7561
7581
  var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
7562
7582
  __proto__: null,
7563
7583
  default: buttonSelectionGroupItem,
7564
- vars: vars$2
7584
+ vars: vars$3
7565
7585
  });
7566
7586
 
7567
- const componentName$2 = getComponentName('button-selection-group-internal');
7587
+ const componentName$3 = getComponentName('button-selection-group-internal');
7568
7588
 
7569
7589
  class ButtonSelectionGroupInternalClass extends createBaseInputClass({
7570
- componentName: componentName$2,
7590
+ componentName: componentName$3,
7571
7591
  baseSelector: 'slot',
7572
7592
  }) {
7573
7593
  constructor() {
@@ -7704,9 +7724,9 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
7704
7724
  }
7705
7725
  }
7706
7726
 
7707
- const componentName$1 = getComponentName('button-selection-group');
7727
+ const componentName$2 = getComponentName('button-selection-group');
7708
7728
 
7709
- const customMixin = (superclass) =>
7729
+ const customMixin$1 = (superclass) =>
7710
7730
  class ButtonSelectionGroupMixinClass extends superclass {
7711
7731
  // eslint-disable-next-line class-methods-use-this
7712
7732
  #renderItem = ({ value, label }) =>
@@ -7779,18 +7799,18 @@ const customMixin = (superclass) =>
7779
7799
  const template = document.createElement('template');
7780
7800
 
7781
7801
  template.innerHTML = `
7782
- <${componentName$2}
7802
+ <${componentName$3}
7783
7803
  name="button-selection-group"
7784
7804
  slot="input"
7785
7805
  tabindex="-1"
7786
7806
  >
7787
7807
  <slot></slot>
7788
- </${componentName$2}>
7808
+ </${componentName$3}>
7789
7809
  `;
7790
7810
 
7791
7811
  this.baseElement.appendChild(template.content.cloneNode(true));
7792
7812
 
7793
- this.inputElement = this.shadowRoot.querySelector(componentName$2);
7813
+ this.inputElement = this.shadowRoot.querySelector(componentName$3);
7794
7814
 
7795
7815
  forwardAttrs(this, this.inputElement, {
7796
7816
  includeAttrs: ['size', 'default-value', 'allow-deselect'],
@@ -7834,7 +7854,7 @@ const ButtonSelectionGroupClass = compose(
7834
7854
  draggableMixin,
7835
7855
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
7836
7856
  componentNameValidationMixin,
7837
- customMixin
7857
+ customMixin$1
7838
7858
  )(
7839
7859
  createProxy({
7840
7860
  slots: [],
@@ -7893,25 +7913,144 @@ const ButtonSelectionGroupClass = compose(
7893
7913
  ${resetInputCursor('vaadin-text-field')}
7894
7914
  `,
7895
7915
  excludeAttrsSync: ['tabindex'],
7896
- componentName: componentName$1,
7916
+ componentName: componentName$2,
7897
7917
  })
7898
7918
  );
7899
7919
 
7900
7920
  const globalRefs = getThemeRefs(globals);
7901
- const vars$1 = ButtonSelectionGroupClass.cssVarList;
7921
+ const vars$2 = ButtonSelectionGroupClass.cssVarList;
7902
7922
 
7903
7923
  const buttonSelectionGroup = {
7904
- [vars$1.fontFamily]: refs.fontFamily,
7905
- [vars$1.labelTextColor]: refs.labelTextColor,
7906
- [vars$1.labelRequiredIndicator]: refs.requiredIndicator,
7907
- [vars$1.errorMessageTextColor]: refs.errorMessageTextColor,
7908
- [vars$1.itemsSpacing]: globalRefs.spacing.sm,
7909
- [vars$1.hostWidth]: refs.width,
7924
+ [vars$2.fontFamily]: refs.fontFamily,
7925
+ [vars$2.labelTextColor]: refs.labelTextColor,
7926
+ [vars$2.labelRequiredIndicator]: refs.requiredIndicator,
7927
+ [vars$2.errorMessageTextColor]: refs.errorMessageTextColor,
7928
+ [vars$2.itemsSpacing]: globalRefs.spacing.sm,
7929
+ [vars$2.hostWidth]: refs.width,
7910
7930
  };
7911
7931
 
7912
7932
  var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
7913
7933
  __proto__: null,
7914
7934
  default: buttonSelectionGroup,
7935
+ vars: vars$2
7936
+ });
7937
+
7938
+ const componentName$1 = getComponentName('modal');
7939
+
7940
+ const customMixin = (superclass) =>
7941
+ class ModalMixinClass extends superclass {
7942
+ get opened() {
7943
+ return this.getAttribute('opened') === 'true';
7944
+ }
7945
+
7946
+ handleOpened() {
7947
+ forwardAttrs(this, this.baseElement, { includeAttrs: ['opened'] });
7948
+ if (this.opened) {
7949
+ this.style.display = '';
7950
+ } else {
7951
+ this.style.display = 'none';
7952
+ }
7953
+ }
7954
+
7955
+ init() {
7956
+ super.init?.();
7957
+ this.style.display = 'none';
7958
+
7959
+ // vaadin-dialog might not be loaded in time
7960
+ // in order to make sure it's loaded before this block is running
7961
+ // we are wrapping it with setTimeout
7962
+ setTimeout(() => {
7963
+ // we want to sync descope-modal content through vaadin-dialog into the overlay
7964
+ // so we are adding a slot to the overlay, which allows us to forward the content from
7965
+ // vaadin-dialog to vaadin-dialog-overlay
7966
+ this.baseElement.shadowRoot
7967
+ .querySelector('vaadin-dialog-overlay')
7968
+ .appendChild(document.createElement('slot'));
7969
+
7970
+ this.#overrideOverlaySettings();
7971
+
7972
+ // we need to always open the modal in `opened=false`
7973
+ // to prevent it from rendering outside the dialog
7974
+ // first, we have to run `overrideOverlaySettings` to setup
7975
+ // the component.
7976
+ this.handleOpened();
7977
+ });
7978
+ }
7979
+
7980
+ // the default vaadin behavior is to attach the overlay to the body when opened
7981
+ // we do not want that because it's difficult to style the overlay in this way
7982
+ // so we override it to open inside the shadow DOM
7983
+ #overrideOverlaySettings() {
7984
+ const overlay = this.baseElement.shadowRoot.querySelector('vaadin-dialog-overlay');
7985
+
7986
+ overlay._attachOverlay = () => {
7987
+ overlay.bringToFront();
7988
+ this.baseElement.setAttribute('style', 'display:flex!important;');
7989
+ };
7990
+ overlay._detachOverlay = () => {
7991
+ this.baseElement.style.display = 'none';
7992
+ };
7993
+ overlay._enterModalState = () => {};
7994
+
7995
+ overlay.close = () => false;
7996
+ }
7997
+ };
7998
+
7999
+ const ModalClass = compose(
8000
+ createStyleMixin({
8001
+ mappings: {
8002
+ overlayBackgroundColor: { property: () => ModalClass.cssVarList.overlay.backgroundColor },
8003
+ overlayShadow: { property: () => ModalClass.cssVarList.overlay.shadow },
8004
+ overlayWidth: { property: () => ModalClass.cssVarList.overlay.width },
8005
+ },
8006
+ }),
8007
+ portalMixin({
8008
+ name: 'overlay',
8009
+ selector: '',
8010
+ mappings: {
8011
+ hostDisplay: {
8012
+ selector: () => ':host(.descope-modal)',
8013
+ property: 'display',
8014
+ important: true,
8015
+ },
8016
+ backgroundColor: { selector: () => '::part(content)', property: 'background-color' },
8017
+ width: { selector: () => '::part(overlay)', property: 'width' },
8018
+ shadow: { selector: () => '::part(overlay)', property: 'box-shadow' },
8019
+ },
8020
+ forward: {
8021
+ include: false,
8022
+ attributes: ['opened'],
8023
+ },
8024
+ }),
8025
+ draggableMixin,
8026
+ componentNameValidationMixin,
8027
+ customMixin
8028
+ )(
8029
+ createProxy({
8030
+ slots: [''],
8031
+ wrappedEleName: 'vaadin-dialog',
8032
+ style: () => ``,
8033
+ excludeAttrsSync: ['tabindex', 'opened'],
8034
+ componentName: componentName$1,
8035
+ })
8036
+ );
8037
+
8038
+ const compVars = ModalClass.cssVarList;
8039
+
8040
+ const modal = {
8041
+ [compVars.hostWidth]: '400px',
8042
+ [compVars.hostHeight]: '400px',
8043
+ [compVars.overlayShadow]: 'none',
8044
+ [compVars.overlayWidth]: '700px',
8045
+ };
8046
+
8047
+ const vars$1 = {
8048
+ ...compVars,
8049
+ };
8050
+
8051
+ var modal$1 = /*#__PURE__*/Object.freeze({
8052
+ __proto__: null,
8053
+ default: modal,
7915
8054
  vars: vars$1
7916
8055
  });
7917
8056
 
@@ -7942,6 +8081,7 @@ const components = {
7942
8081
  uploadFile: uploadFile$1,
7943
8082
  buttonSelectionGroupItem: buttonSelectionGroupItem$1,
7944
8083
  buttonSelectionGroup: buttonSelectionGroup$1,
8084
+ modal: modal$1,
7945
8085
  };
7946
8086
 
7947
8087
  const theme = Object.keys(components).reduce(
@@ -7954,7 +8094,7 @@ const vars = Object.keys(components).reduce(
7954
8094
  );
7955
8095
 
7956
8096
  const defaultTheme = { globals, components: theme };
7957
- const themeVars = { globals: vars$r, components: vars };
8097
+ const themeVars = { globals: vars$s, components: vars };
7958
8098
 
7959
8099
  const componentName = getComponentName('recaptcha');
7960
8100
 
@@ -8125,6 +8265,7 @@ exports.LinkClass = LinkClass;
8125
8265
  exports.LoaderLinearClass = LoaderLinearClass;
8126
8266
  exports.LoaderRadialClass = LoaderRadialClass;
8127
8267
  exports.LogoClass = LogoClass;
8268
+ exports.ModalClass = ModalClass;
8128
8269
  exports.NewPasswordClass = NewPasswordClass;
8129
8270
  exports.NumberFieldClass = NumberFieldClass;
8130
8271
  exports.PasscodeClass = PasscodeClass;