@descope/web-components-ui 1.0.245 → 1.0.247

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 (42) hide show
  1. package/dist/cjs/index.cjs.js +904 -674
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/index.d.ts +2 -1
  4. package/dist/index.esm.js +910 -677
  5. package/dist/index.esm.js.map +1 -1
  6. package/dist/umd/1000.js +1 -1
  7. package/dist/umd/9214.js +1 -0
  8. package/dist/umd/9434.js +1 -0
  9. package/dist/umd/button-selection-group-fields-descope-button-multi-selection-group-index-js.js +1 -0
  10. package/dist/umd/button-selection-group-fields-descope-button-multi-selection-group-internal-index-js.js +1 -0
  11. package/dist/umd/button-selection-group-fields-descope-button-selection-group-index-js.js +1 -0
  12. package/dist/umd/button-selection-group-fields-descope-button-selection-group-internal-index-js.js +1 -0
  13. package/dist/umd/button-selection-group-fields-descope-button-selection-group-item-index-js.js +1 -0
  14. package/dist/umd/index.js +1 -1
  15. package/package.json +1 -1
  16. package/src/components/{descope-button-selection-group/ButtonSelectionGroupClass.js → button-selection-group-fields/baseButtonSelectionGroup.js} +19 -70
  17. package/src/components/button-selection-group-fields/createBaseButtonSelectionGroupInternalClass.js +101 -0
  18. package/src/components/button-selection-group-fields/descope-button-multi-selection-group/ButtonMultiSelectionGroupClass.js +67 -0
  19. package/src/components/button-selection-group-fields/descope-button-multi-selection-group/index.js +7 -0
  20. package/src/components/button-selection-group-fields/descope-button-multi-selection-group-internal/ButtonMultiSelectionGroupInternalClass.js +106 -0
  21. package/src/components/button-selection-group-fields/descope-button-multi-selection-group-internal/index.js +8 -0
  22. package/src/components/button-selection-group-fields/descope-button-selection-group/ButtonSelectionGroupClass.js +67 -0
  23. package/src/components/{descope-button-selection-group → button-selection-group-fields/descope-button-selection-group}/index.js +2 -2
  24. package/src/components/button-selection-group-fields/descope-button-selection-group-internal/ButtonSelectionGroupInternalClass.js +77 -0
  25. package/src/components/descope-multi-select-combo-box/MultiSelectComboBoxClass.js +2 -2
  26. package/src/index.cjs.js +3 -2
  27. package/src/index.d.ts +2 -1
  28. package/src/index.js +2 -1
  29. package/src/mixins/inputValidationMixin.js +2 -2
  30. package/src/mixins/portalMixin.js +26 -15
  31. package/src/theme/components/buttonSelectionGroup/baseButtonSelectionGroup.js +15 -0
  32. package/src/theme/components/buttonSelectionGroup/buttonMultiSelectionGroup.js +11 -0
  33. package/src/theme/components/buttonSelectionGroup/buttonSelectionGroup.js +3 -12
  34. package/src/theme/components/buttonSelectionGroup/buttonSelectionGroupItem.js +1 -1
  35. package/src/theme/components/index.js +2 -0
  36. package/dist/umd/descope-button-selection-group-descope-button-selection-group-internal-index-js.js +0 -1
  37. package/dist/umd/descope-button-selection-group-descope-button-selection-group-item-index-js.js +0 -1
  38. package/dist/umd/descope-button-selection-group-index-js.js +0 -1
  39. package/src/components/descope-button-selection-group/descope-button-selection-group-internal/ButtonSelectionGroupInternalClass.js +0 -145
  40. /package/src/components/{descope-button-selection-group → button-selection-group-fields}/descope-button-selection-group-internal/index.js +0 -0
  41. /package/src/components/{descope-button-selection-group → button-selection-group-fields}/descope-button-selection-group-item/ButtonSelectionGroupItemClass.js +0 -0
  42. /package/src/components/{descope-button-selection-group → button-selection-group-fields}/descope-button-selection-group-item/index.js +0 -0
@@ -499,7 +499,7 @@ const globals = {
499
499
  fonts,
500
500
  direction,
501
501
  };
502
- const vars$w = getThemeVars(globals);
502
+ const vars$x = getThemeVars(globals);
503
503
 
504
504
  const createCssVarFallback = (first, ...rest) =>
505
505
  `var(${first}${rest.length ? ` , ${createCssVarFallback(...rest)}` : ''})`;
@@ -1888,11 +1888,11 @@ const inputValidationMixin = (superclass) =>
1888
1888
  }
1889
1889
 
1890
1890
  get defaultErrorMsgRangeUnderflow() {
1891
- return `At least ${this.minItemsSelection} items are required.`;
1891
+ return `At least ${this.getAttribute('min-items-selection')} items are required.`;
1892
1892
  }
1893
1893
 
1894
1894
  get defaultErrorMsgRangeOverflow() {
1895
- return `At most ${this.maxItemsSelection} items are allowed.`;
1895
+ return `At most ${this.getAttribute('max-items-selection')} items are allowed.`;
1896
1896
  }
1897
1897
 
1898
1898
  getErrorMessage(flags) {
@@ -2188,10 +2188,11 @@ const DISPLAY_NAME_SEPARATOR = '_';
2188
2188
 
2189
2189
  const sanitizeSelector = (selector) => selector.replace(/[^\w\s]/gi, '');
2190
2190
 
2191
- const withWaitForShadowRoot = (getRootElementFn) => (that) =>
2192
- new Promise((res) => {
2191
+ const withWaitForShadowRoot = (getRootElementFn) => async (that) => {
2192
+ const ele = await getRootElementFn(that);
2193
+
2194
+ return new Promise((res) => {
2193
2195
  const MAX_RETRIES = 20;
2194
- const ele = getRootElementFn(that);
2195
2196
  let counter = 0;
2196
2197
 
2197
2198
  const check = () => {
@@ -2204,11 +2205,12 @@ const withWaitForShadowRoot = (getRootElementFn) => (that) =>
2204
2205
 
2205
2206
  counter++;
2206
2207
 
2207
- if (!ele.shadowRoot) setTimeout(check);
2208
+ if (!ele?.shadowRoot) setTimeout(check);
2208
2209
  else res(ele.shadowRoot);
2209
2210
  };
2210
2211
  check();
2211
2212
  });
2213
+ };
2212
2214
 
2213
2215
  const portalMixin =
2214
2216
  ({ name, selector, mappings = {}, forward: { attributes = [], include = true } = {} }) =>
@@ -2234,35 +2236,44 @@ const portalMixin =
2234
2236
 
2235
2237
  constructor() {
2236
2238
  // we cannot use "this" before calling "super"
2237
- const getRootElement = (that) => {
2239
+ const getRootElement = async (that) => {
2238
2240
  const baseEle = that.shadowRoot.querySelector(that.baseSelector);
2239
- const portal = selector ? baseEle.shadowRoot.querySelector(selector) : baseEle;
2241
+ if (!selector) {
2242
+ return baseEle;
2243
+ }
2240
2244
 
2241
- return portal;
2245
+ // in case we have a selector, we should first wait for the base element shadow root
2246
+ // and then look for the internal element
2247
+ const baseEleShadowRoot = await withWaitForShadowRoot(() => baseEle)(that);
2248
+ return baseEleShadowRoot.querySelector(selector);
2242
2249
  };
2243
2250
 
2251
+ const getPortalElement = withWaitForShadowRoot(getRootElement);
2252
+
2244
2253
  super({
2245
- getRootElement: withWaitForShadowRoot(getRootElement),
2254
+ getRootElement: getPortalElement,
2246
2255
  componentNameSuffix: DISPLAY_NAME_SEPARATOR + eleDisplayName,
2247
2256
  themeSection: PORTAL_THEME_PREFIX + eleDisplayName,
2248
2257
  baseSelector: ':host',
2249
2258
  });
2250
2259
 
2251
- this.#portalEle = getRootElement(this);
2260
+ this.#portalEle = getPortalElement(this).then((ele) => ele.host);
2252
2261
  }
2253
2262
 
2254
- #handleHoverAttribute() {
2255
- this.#portalEle.onmouseenter = (e) => {
2263
+ async #handleHoverAttribute() {
2264
+ const portalEle = await this.#portalEle;
2265
+ portalEle.onmouseenter = (e) => {
2256
2266
  e.target.setAttribute('hover', 'true');
2257
2267
  };
2258
- this.#portalEle.onmouseleave = (e) => {
2268
+ portalEle.onmouseleave = (e) => {
2259
2269
  e.target.removeAttribute('hover');
2260
2270
  };
2261
2271
  }
2262
2272
 
2263
- init() {
2273
+ async init() {
2264
2274
  super.init?.();
2265
- forwardAttrs(this, this.#portalEle, {
2275
+ const portalEle = await this.#portalEle;
2276
+ forwardAttrs(this, portalEle, {
2266
2277
  [include ? 'includeAttrs' : 'excludeAttrs']: attributes,
2267
2278
  });
2268
2279
 
@@ -2374,7 +2385,7 @@ const clickableMixin = (superclass) =>
2374
2385
  }
2375
2386
  };
2376
2387
 
2377
- const componentName$C = getComponentName('button');
2388
+ const componentName$E = getComponentName('button');
2378
2389
 
2379
2390
  const resetStyles = `
2380
2391
  :host {
@@ -2475,7 +2486,7 @@ const ButtonClass = compose(
2475
2486
  }
2476
2487
  `,
2477
2488
  excludeAttrsSync: ['tabindex'],
2478
- componentName: componentName$C,
2489
+ componentName: componentName$E,
2479
2490
  })
2480
2491
  );
2481
2492
 
@@ -2523,7 +2534,7 @@ const mode = {
2523
2534
  surface: globalRefs$i.colors.surface,
2524
2535
  };
2525
2536
 
2526
- const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$C);
2537
+ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$E);
2527
2538
 
2528
2539
  const button = {
2529
2540
  ...helperTheme$3,
@@ -2621,7 +2632,7 @@ const button = {
2621
2632
  },
2622
2633
  };
2623
2634
 
2624
- const vars$v = {
2635
+ const vars$w = {
2625
2636
  ...compVars$4,
2626
2637
  ...helperVars$3,
2627
2638
  };
@@ -2629,7 +2640,7 @@ const vars$v = {
2629
2640
  var button$1 = /*#__PURE__*/Object.freeze({
2630
2641
  __proto__: null,
2631
2642
  default: button,
2632
- vars: vars$v
2643
+ vars: vars$w
2633
2644
  });
2634
2645
 
2635
2646
  const { host: host$g, label: label$9, placeholder: placeholder$3, requiredIndicator: requiredIndicator$b, inputField: inputField$6, input, helperText: helperText$9, errorMessage: errorMessage$b } =
@@ -2816,11 +2827,11 @@ const resetInputLabelPosition = (name) => `
2816
2827
  }
2817
2828
  `;
2818
2829
 
2819
- const componentName$B = getComponentName('text-field');
2830
+ const componentName$D = getComponentName('text-field');
2820
2831
 
2821
2832
  const observedAttrs = ['type'];
2822
2833
 
2823
- const customMixin$7 = (superclass) =>
2834
+ const customMixin$6 = (superclass) =>
2824
2835
  class TextFieldClass extends superclass {
2825
2836
  static get observedAttributes() {
2826
2837
  return observedAttrs.concat(superclass.observedAttributes || []);
@@ -2847,7 +2858,7 @@ const TextFieldClass = compose(
2847
2858
  draggableMixin,
2848
2859
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
2849
2860
  componentNameValidationMixin,
2850
- customMixin$7
2861
+ customMixin$6
2851
2862
  )(
2852
2863
  createProxy({
2853
2864
  slots: ['prefix', 'suffix'],
@@ -2866,14 +2877,14 @@ const TextFieldClass = compose(
2866
2877
  ${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
2867
2878
  `,
2868
2879
  excludeAttrsSync: ['tabindex'],
2869
- componentName: componentName$B,
2880
+ componentName: componentName$D,
2870
2881
  })
2871
2882
  );
2872
2883
 
2873
- const componentName$A = getComponentName('input-wrapper');
2884
+ const componentName$C = getComponentName('input-wrapper');
2874
2885
  const globalRefs$h = getThemeRefs(globals);
2875
2886
 
2876
- const [theme$1, refs, vars$u] = createHelperVars(
2887
+ const [theme$1, refs, vars$v] = createHelperVars(
2877
2888
  {
2878
2889
  labelTextColor: globalRefs$h.colors.surface.contrast,
2879
2890
  valueTextColor: globalRefs$h.colors.surface.contrast,
@@ -2939,47 +2950,47 @@ const [theme$1, refs, vars$u] = createHelperVars(
2939
2950
  backgroundColor: globalRefs$h.colors.surface.main,
2940
2951
  },
2941
2952
  },
2942
- componentName$A
2953
+ componentName$C
2943
2954
  );
2944
2955
 
2945
2956
  var inputWrapper = /*#__PURE__*/Object.freeze({
2946
2957
  __proto__: null,
2947
2958
  default: theme$1,
2948
2959
  refs: refs,
2949
- vars: vars$u
2960
+ vars: vars$v
2950
2961
  });
2951
2962
 
2952
- const vars$t = TextFieldClass.cssVarList;
2963
+ const vars$u = TextFieldClass.cssVarList;
2953
2964
 
2954
2965
  const textField = {
2955
- [vars$t.hostWidth]: refs.width,
2956
- [vars$t.hostMinWidth]: refs.minWidth,
2957
- [vars$t.hostDirection]: refs.direction,
2958
- [vars$t.fontSize]: refs.fontSize,
2959
- [vars$t.fontFamily]: refs.fontFamily,
2960
- [vars$t.labelTextColor]: refs.labelTextColor,
2961
- [vars$t.labelRequiredIndicator]: refs.requiredIndicator,
2962
- [vars$t.errorMessageTextColor]: refs.errorMessageTextColor,
2963
- [vars$t.inputValueTextColor]: refs.valueTextColor,
2964
- [vars$t.inputPlaceholderColor]: refs.placeholderTextColor,
2965
- [vars$t.inputBorderWidth]: refs.borderWidth,
2966
- [vars$t.inputBorderStyle]: refs.borderStyle,
2967
- [vars$t.inputBorderColor]: refs.borderColor,
2968
- [vars$t.inputBorderRadius]: refs.borderRadius,
2969
- [vars$t.inputOutlineWidth]: refs.outlineWidth,
2970
- [vars$t.inputOutlineStyle]: refs.outlineStyle,
2971
- [vars$t.inputOutlineColor]: refs.outlineColor,
2972
- [vars$t.inputOutlineOffset]: refs.outlineOffset,
2973
- [vars$t.inputBackgroundColor]: refs.backgroundColor,
2974
- [vars$t.inputHeight]: refs.inputHeight,
2975
- [vars$t.inputHorizontalPadding]: refs.horizontalPadding,
2966
+ [vars$u.hostWidth]: refs.width,
2967
+ [vars$u.hostMinWidth]: refs.minWidth,
2968
+ [vars$u.hostDirection]: refs.direction,
2969
+ [vars$u.fontSize]: refs.fontSize,
2970
+ [vars$u.fontFamily]: refs.fontFamily,
2971
+ [vars$u.labelTextColor]: refs.labelTextColor,
2972
+ [vars$u.labelRequiredIndicator]: refs.requiredIndicator,
2973
+ [vars$u.errorMessageTextColor]: refs.errorMessageTextColor,
2974
+ [vars$u.inputValueTextColor]: refs.valueTextColor,
2975
+ [vars$u.inputPlaceholderColor]: refs.placeholderTextColor,
2976
+ [vars$u.inputBorderWidth]: refs.borderWidth,
2977
+ [vars$u.inputBorderStyle]: refs.borderStyle,
2978
+ [vars$u.inputBorderColor]: refs.borderColor,
2979
+ [vars$u.inputBorderRadius]: refs.borderRadius,
2980
+ [vars$u.inputOutlineWidth]: refs.outlineWidth,
2981
+ [vars$u.inputOutlineStyle]: refs.outlineStyle,
2982
+ [vars$u.inputOutlineColor]: refs.outlineColor,
2983
+ [vars$u.inputOutlineOffset]: refs.outlineOffset,
2984
+ [vars$u.inputBackgroundColor]: refs.backgroundColor,
2985
+ [vars$u.inputHeight]: refs.inputHeight,
2986
+ [vars$u.inputHorizontalPadding]: refs.horizontalPadding,
2976
2987
  };
2977
2988
 
2978
2989
  var textField$1 = /*#__PURE__*/Object.freeze({
2979
2990
  __proto__: null,
2980
2991
  default: textField,
2981
2992
  textField: textField,
2982
- vars: vars$t
2993
+ vars: vars$u
2983
2994
  });
2984
2995
 
2985
2996
  const passwordDraggableMixin = (superclass) =>
@@ -3016,7 +3027,7 @@ const passwordDraggableMixin = (superclass) =>
3016
3027
  }
3017
3028
  };
3018
3029
 
3019
- const componentName$z = getComponentName('password');
3030
+ const componentName$B = getComponentName('password');
3020
3031
 
3021
3032
  const {
3022
3033
  host: host$f,
@@ -3147,45 +3158,45 @@ const PasswordClass = compose(
3147
3158
  }
3148
3159
  `,
3149
3160
  excludeAttrsSync: ['tabindex'],
3150
- componentName: componentName$z,
3161
+ componentName: componentName$B,
3151
3162
  })
3152
3163
  );
3153
3164
 
3154
3165
  const globalRefs$g = getThemeRefs(globals);
3155
- const vars$s = PasswordClass.cssVarList;
3166
+ const vars$t = PasswordClass.cssVarList;
3156
3167
 
3157
3168
  const password = {
3158
- [vars$s.hostWidth]: refs.width,
3159
- [vars$s.hostDirection]: refs.direction,
3160
- [vars$s.fontSize]: refs.fontSize,
3161
- [vars$s.fontFamily]: refs.fontFamily,
3162
- [vars$s.labelTextColor]: refs.labelTextColor,
3163
- [vars$s.errorMessageTextColor]: refs.errorMessageTextColor,
3164
- [vars$s.inputHorizontalPadding]: refs.horizontalPadding,
3165
- [vars$s.inputHeight]: refs.inputHeight,
3166
- [vars$s.inputBackgroundColor]: refs.backgroundColor,
3167
- [vars$s.labelRequiredIndicator]: refs.requiredIndicator,
3168
- [vars$s.inputValueTextColor]: refs.valueTextColor,
3169
- [vars$s.inputPlaceholderTextColor]: refs.placeholderTextColor,
3170
- [vars$s.inputBorderWidth]: refs.borderWidth,
3171
- [vars$s.inputBorderStyle]: refs.borderStyle,
3172
- [vars$s.inputBorderColor]: refs.borderColor,
3173
- [vars$s.inputBorderRadius]: refs.borderRadius,
3174
- [vars$s.inputOutlineWidth]: refs.outlineWidth,
3175
- [vars$s.inputOutlineStyle]: refs.outlineStyle,
3176
- [vars$s.inputOutlineColor]: refs.outlineColor,
3177
- [vars$s.inputOutlineOffset]: refs.outlineOffset,
3178
- [vars$s.revealButtonOffset]: globalRefs$g.spacing.md,
3179
- [vars$s.revealButtonSize]: refs.toggleButtonSize,
3169
+ [vars$t.hostWidth]: refs.width,
3170
+ [vars$t.hostDirection]: refs.direction,
3171
+ [vars$t.fontSize]: refs.fontSize,
3172
+ [vars$t.fontFamily]: refs.fontFamily,
3173
+ [vars$t.labelTextColor]: refs.labelTextColor,
3174
+ [vars$t.errorMessageTextColor]: refs.errorMessageTextColor,
3175
+ [vars$t.inputHorizontalPadding]: refs.horizontalPadding,
3176
+ [vars$t.inputHeight]: refs.inputHeight,
3177
+ [vars$t.inputBackgroundColor]: refs.backgroundColor,
3178
+ [vars$t.labelRequiredIndicator]: refs.requiredIndicator,
3179
+ [vars$t.inputValueTextColor]: refs.valueTextColor,
3180
+ [vars$t.inputPlaceholderTextColor]: refs.placeholderTextColor,
3181
+ [vars$t.inputBorderWidth]: refs.borderWidth,
3182
+ [vars$t.inputBorderStyle]: refs.borderStyle,
3183
+ [vars$t.inputBorderColor]: refs.borderColor,
3184
+ [vars$t.inputBorderRadius]: refs.borderRadius,
3185
+ [vars$t.inputOutlineWidth]: refs.outlineWidth,
3186
+ [vars$t.inputOutlineStyle]: refs.outlineStyle,
3187
+ [vars$t.inputOutlineColor]: refs.outlineColor,
3188
+ [vars$t.inputOutlineOffset]: refs.outlineOffset,
3189
+ [vars$t.revealButtonOffset]: globalRefs$g.spacing.md,
3190
+ [vars$t.revealButtonSize]: refs.toggleButtonSize,
3180
3191
  };
3181
3192
 
3182
3193
  var password$1 = /*#__PURE__*/Object.freeze({
3183
3194
  __proto__: null,
3184
3195
  default: password,
3185
- vars: vars$s
3196
+ vars: vars$t
3186
3197
  });
3187
3198
 
3188
- const componentName$y = getComponentName('number-field');
3199
+ const componentName$A = getComponentName('number-field');
3189
3200
 
3190
3201
  const NumberFieldClass = compose(
3191
3202
  createStyleMixin({
@@ -3211,45 +3222,45 @@ const NumberFieldClass = compose(
3211
3222
  ${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
3212
3223
  `,
3213
3224
  excludeAttrsSync: ['tabindex'],
3214
- componentName: componentName$y,
3225
+ componentName: componentName$A,
3215
3226
  })
3216
3227
  );
3217
3228
 
3218
- const vars$r = NumberFieldClass.cssVarList;
3229
+ const vars$s = NumberFieldClass.cssVarList;
3219
3230
 
3220
3231
  const numberField = {
3221
- [vars$r.hostWidth]: refs.width,
3222
- [vars$r.hostMinWidth]: refs.minWidth,
3223
- [vars$r.hostDirection]: refs.direction,
3224
- [vars$r.fontSize]: refs.fontSize,
3225
- [vars$r.fontFamily]: refs.fontFamily,
3226
- [vars$r.labelTextColor]: refs.labelTextColor,
3227
- [vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
3228
- [vars$r.inputValueTextColor]: refs.valueTextColor,
3229
- [vars$r.inputPlaceholderColor]: refs.placeholderTextColor,
3230
- [vars$r.inputBorderWidth]: refs.borderWidth,
3231
- [vars$r.inputBorderStyle]: refs.borderStyle,
3232
- [vars$r.inputBorderColor]: refs.borderColor,
3233
- [vars$r.inputBorderRadius]: refs.borderRadius,
3234
- [vars$r.inputOutlineWidth]: refs.outlineWidth,
3235
- [vars$r.inputOutlineStyle]: refs.outlineStyle,
3236
- [vars$r.inputOutlineColor]: refs.outlineColor,
3237
- [vars$r.inputOutlineOffset]: refs.outlineOffset,
3238
- [vars$r.inputBackgroundColor]: refs.backgroundColor,
3239
- [vars$r.labelRequiredIndicator]: refs.requiredIndicator,
3240
- [vars$r.inputHorizontalPadding]: refs.horizontalPadding,
3241
- [vars$r.inputHeight]: refs.inputHeight,
3232
+ [vars$s.hostWidth]: refs.width,
3233
+ [vars$s.hostMinWidth]: refs.minWidth,
3234
+ [vars$s.hostDirection]: refs.direction,
3235
+ [vars$s.fontSize]: refs.fontSize,
3236
+ [vars$s.fontFamily]: refs.fontFamily,
3237
+ [vars$s.labelTextColor]: refs.labelTextColor,
3238
+ [vars$s.errorMessageTextColor]: refs.errorMessageTextColor,
3239
+ [vars$s.inputValueTextColor]: refs.valueTextColor,
3240
+ [vars$s.inputPlaceholderColor]: refs.placeholderTextColor,
3241
+ [vars$s.inputBorderWidth]: refs.borderWidth,
3242
+ [vars$s.inputBorderStyle]: refs.borderStyle,
3243
+ [vars$s.inputBorderColor]: refs.borderColor,
3244
+ [vars$s.inputBorderRadius]: refs.borderRadius,
3245
+ [vars$s.inputOutlineWidth]: refs.outlineWidth,
3246
+ [vars$s.inputOutlineStyle]: refs.outlineStyle,
3247
+ [vars$s.inputOutlineColor]: refs.outlineColor,
3248
+ [vars$s.inputOutlineOffset]: refs.outlineOffset,
3249
+ [vars$s.inputBackgroundColor]: refs.backgroundColor,
3250
+ [vars$s.labelRequiredIndicator]: refs.requiredIndicator,
3251
+ [vars$s.inputHorizontalPadding]: refs.horizontalPadding,
3252
+ [vars$s.inputHeight]: refs.inputHeight,
3242
3253
  };
3243
3254
 
3244
3255
  var numberField$1 = /*#__PURE__*/Object.freeze({
3245
3256
  __proto__: null,
3246
3257
  default: numberField,
3247
- vars: vars$r
3258
+ vars: vars$s
3248
3259
  });
3249
3260
 
3250
- const componentName$x = getComponentName('email-field');
3261
+ const componentName$z = getComponentName('email-field');
3251
3262
 
3252
- const customMixin$6 = (superclass) =>
3263
+ const customMixin$5 = (superclass) =>
3253
3264
  class EmailFieldMixinClass extends superclass {
3254
3265
  init() {
3255
3266
  super.init?.();
@@ -3263,7 +3274,7 @@ const EmailFieldClass = compose(
3263
3274
  draggableMixin,
3264
3275
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
3265
3276
  componentNameValidationMixin,
3266
- customMixin$6
3277
+ customMixin$5
3267
3278
  )(
3268
3279
  createProxy({
3269
3280
  slots: ['', 'suffix'],
@@ -3282,43 +3293,43 @@ const EmailFieldClass = compose(
3282
3293
  ${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
3283
3294
  `,
3284
3295
  excludeAttrsSync: ['tabindex'],
3285
- componentName: componentName$x,
3296
+ componentName: componentName$z,
3286
3297
  })
3287
3298
  );
3288
3299
 
3289
- const vars$q = EmailFieldClass.cssVarList;
3300
+ const vars$r = EmailFieldClass.cssVarList;
3290
3301
 
3291
3302
  const emailField = {
3292
- [vars$q.hostWidth]: refs.width,
3293
- [vars$q.hostMinWidth]: refs.minWidth,
3294
- [vars$q.hostDirection]: refs.direction,
3295
- [vars$q.fontSize]: refs.fontSize,
3296
- [vars$q.fontFamily]: refs.fontFamily,
3297
- [vars$q.labelTextColor]: refs.labelTextColor,
3298
- [vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
3299
- [vars$q.inputValueTextColor]: refs.valueTextColor,
3300
- [vars$q.labelRequiredIndicator]: refs.requiredIndicator,
3301
- [vars$q.inputPlaceholderColor]: refs.placeholderTextColor,
3302
- [vars$q.inputBorderWidth]: refs.borderWidth,
3303
- [vars$q.inputBorderStyle]: refs.borderStyle,
3304
- [vars$q.inputBorderColor]: refs.borderColor,
3305
- [vars$q.inputBorderRadius]: refs.borderRadius,
3306
- [vars$q.inputOutlineWidth]: refs.outlineWidth,
3307
- [vars$q.inputOutlineStyle]: refs.outlineStyle,
3308
- [vars$q.inputOutlineColor]: refs.outlineColor,
3309
- [vars$q.inputOutlineOffset]: refs.outlineOffset,
3310
- [vars$q.inputBackgroundColor]: refs.backgroundColor,
3311
- [vars$q.inputHorizontalPadding]: refs.horizontalPadding,
3312
- [vars$q.inputHeight]: refs.inputHeight,
3303
+ [vars$r.hostWidth]: refs.width,
3304
+ [vars$r.hostMinWidth]: refs.minWidth,
3305
+ [vars$r.hostDirection]: refs.direction,
3306
+ [vars$r.fontSize]: refs.fontSize,
3307
+ [vars$r.fontFamily]: refs.fontFamily,
3308
+ [vars$r.labelTextColor]: refs.labelTextColor,
3309
+ [vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
3310
+ [vars$r.inputValueTextColor]: refs.valueTextColor,
3311
+ [vars$r.labelRequiredIndicator]: refs.requiredIndicator,
3312
+ [vars$r.inputPlaceholderColor]: refs.placeholderTextColor,
3313
+ [vars$r.inputBorderWidth]: refs.borderWidth,
3314
+ [vars$r.inputBorderStyle]: refs.borderStyle,
3315
+ [vars$r.inputBorderColor]: refs.borderColor,
3316
+ [vars$r.inputBorderRadius]: refs.borderRadius,
3317
+ [vars$r.inputOutlineWidth]: refs.outlineWidth,
3318
+ [vars$r.inputOutlineStyle]: refs.outlineStyle,
3319
+ [vars$r.inputOutlineColor]: refs.outlineColor,
3320
+ [vars$r.inputOutlineOffset]: refs.outlineOffset,
3321
+ [vars$r.inputBackgroundColor]: refs.backgroundColor,
3322
+ [vars$r.inputHorizontalPadding]: refs.horizontalPadding,
3323
+ [vars$r.inputHeight]: refs.inputHeight,
3313
3324
  };
3314
3325
 
3315
3326
  var emailField$1 = /*#__PURE__*/Object.freeze({
3316
3327
  __proto__: null,
3317
3328
  default: emailField,
3318
- vars: vars$q
3329
+ vars: vars$r
3319
3330
  });
3320
3331
 
3321
- const componentName$w = getComponentName('text-area');
3332
+ const componentName$y = getComponentName('text-area');
3322
3333
 
3323
3334
  const {
3324
3335
  host: host$e,
@@ -3393,49 +3404,49 @@ const TextAreaClass = compose(
3393
3404
  ${resetInputCursor('vaadin-text-area')}
3394
3405
  `,
3395
3406
  excludeAttrsSync: ['tabindex'],
3396
- componentName: componentName$w,
3407
+ componentName: componentName$y,
3397
3408
  })
3398
3409
  );
3399
3410
 
3400
3411
  const globalRefs$f = getThemeRefs(globals);
3401
- const vars$p = TextAreaClass.cssVarList;
3412
+ const vars$q = TextAreaClass.cssVarList;
3402
3413
 
3403
3414
  const textArea = {
3404
- [vars$p.hostWidth]: refs.width,
3405
- [vars$p.hostMinWidth]: refs.minWidth,
3406
- [vars$p.hostDirection]: refs.direction,
3407
- [vars$p.fontSize]: refs.fontSize,
3408
- [vars$p.fontFamily]: refs.fontFamily,
3409
- [vars$p.labelTextColor]: refs.labelTextColor,
3410
- [vars$p.labelRequiredIndicator]: refs.requiredIndicator,
3411
- [vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
3412
- [vars$p.inputBackgroundColor]: refs.backgroundColor,
3413
- [vars$p.inputValueTextColor]: refs.valueTextColor,
3414
- [vars$p.inputPlaceholderTextColor]: refs.placeholderTextColor,
3415
- [vars$p.inputBorderRadius]: refs.borderRadius,
3416
- [vars$p.inputBorderWidth]: refs.borderWidth,
3417
- [vars$p.inputBorderStyle]: refs.borderStyle,
3418
- [vars$p.inputBorderColor]: refs.borderColor,
3419
- [vars$p.inputOutlineWidth]: refs.outlineWidth,
3420
- [vars$p.inputOutlineStyle]: refs.outlineStyle,
3421
- [vars$p.inputOutlineColor]: refs.outlineColor,
3422
- [vars$p.inputOutlineOffset]: refs.outlineOffset,
3423
- [vars$p.inputResizeType]: 'vertical',
3424
- [vars$p.inputMinHeight]: '5em',
3415
+ [vars$q.hostWidth]: refs.width,
3416
+ [vars$q.hostMinWidth]: refs.minWidth,
3417
+ [vars$q.hostDirection]: refs.direction,
3418
+ [vars$q.fontSize]: refs.fontSize,
3419
+ [vars$q.fontFamily]: refs.fontFamily,
3420
+ [vars$q.labelTextColor]: refs.labelTextColor,
3421
+ [vars$q.labelRequiredIndicator]: refs.requiredIndicator,
3422
+ [vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
3423
+ [vars$q.inputBackgroundColor]: refs.backgroundColor,
3424
+ [vars$q.inputValueTextColor]: refs.valueTextColor,
3425
+ [vars$q.inputPlaceholderTextColor]: refs.placeholderTextColor,
3426
+ [vars$q.inputBorderRadius]: refs.borderRadius,
3427
+ [vars$q.inputBorderWidth]: refs.borderWidth,
3428
+ [vars$q.inputBorderStyle]: refs.borderStyle,
3429
+ [vars$q.inputBorderColor]: refs.borderColor,
3430
+ [vars$q.inputOutlineWidth]: refs.outlineWidth,
3431
+ [vars$q.inputOutlineStyle]: refs.outlineStyle,
3432
+ [vars$q.inputOutlineColor]: refs.outlineColor,
3433
+ [vars$q.inputOutlineOffset]: refs.outlineOffset,
3434
+ [vars$q.inputResizeType]: 'vertical',
3435
+ [vars$q.inputMinHeight]: '5em',
3425
3436
 
3426
3437
  _disabled: {
3427
- [vars$p.inputBackgroundColor]: globalRefs$f.colors.surface.light,
3438
+ [vars$q.inputBackgroundColor]: globalRefs$f.colors.surface.light,
3428
3439
  },
3429
3440
 
3430
3441
  _readonly: {
3431
- [vars$p.inputResizeType]: 'none',
3442
+ [vars$q.inputResizeType]: 'none',
3432
3443
  },
3433
3444
  };
3434
3445
 
3435
3446
  var textArea$1 = /*#__PURE__*/Object.freeze({
3436
3447
  __proto__: null,
3437
3448
  default: textArea,
3438
- vars: vars$p
3449
+ vars: vars$q
3439
3450
  });
3440
3451
 
3441
3452
  const createBaseInputClass = (...args) =>
@@ -3446,9 +3457,9 @@ const createBaseInputClass = (...args) =>
3446
3457
  inputEventsDispatchingMixin
3447
3458
  )(createBaseClass(...args));
3448
3459
 
3449
- const componentName$v = getComponentName('boolean-field-internal');
3460
+ const componentName$x = getComponentName('boolean-field-internal');
3450
3461
 
3451
- createBaseInputClass({ componentName: componentName$v, baseSelector: 'div' });
3462
+ createBaseInputClass({ componentName: componentName$x, baseSelector: 'div' });
3452
3463
 
3453
3464
  const booleanFieldMixin = (superclass) =>
3454
3465
  class BooleanFieldMixinClass extends superclass {
@@ -3457,14 +3468,14 @@ const booleanFieldMixin = (superclass) =>
3457
3468
 
3458
3469
  const template = document.createElement('template');
3459
3470
  template.innerHTML = `
3460
- <${componentName$v}
3471
+ <${componentName$x}
3461
3472
  tabindex="-1"
3462
3473
  slot="input"
3463
- ></${componentName$v}>
3474
+ ></${componentName$x}>
3464
3475
  `;
3465
3476
 
3466
3477
  this.baseElement.appendChild(template.content.cloneNode(true));
3467
- this.inputElement = this.shadowRoot.querySelector(componentName$v);
3478
+ this.inputElement = this.shadowRoot.querySelector(componentName$x);
3468
3479
  this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
3469
3480
 
3470
3481
  forwardAttrs(this, this.inputElement, {
@@ -3534,7 +3545,7 @@ descope-boolean-field-internal {
3534
3545
  }
3535
3546
  `;
3536
3547
 
3537
- const componentName$u = getComponentName('checkbox');
3548
+ const componentName$w = getComponentName('checkbox');
3538
3549
 
3539
3550
  const {
3540
3551
  host: host$d,
@@ -3640,51 +3651,51 @@ const CheckboxClass = compose(
3640
3651
  }
3641
3652
  `,
3642
3653
  excludeAttrsSync: ['label', 'tabindex'],
3643
- componentName: componentName$u,
3654
+ componentName: componentName$w,
3644
3655
  })
3645
3656
  );
3646
3657
 
3647
- const vars$o = CheckboxClass.cssVarList;
3658
+ const vars$p = CheckboxClass.cssVarList;
3648
3659
  const checkboxSize = '1.35em';
3649
3660
 
3650
3661
  const checkbox = {
3651
- [vars$o.hostWidth]: refs.width,
3652
- [vars$o.hostDirection]: refs.direction,
3653
- [vars$o.fontSize]: refs.fontSize,
3654
- [vars$o.fontFamily]: refs.fontFamily,
3655
- [vars$o.labelTextColor]: refs.labelTextColor,
3656
- [vars$o.labelRequiredIndicator]: refs.requiredIndicator,
3657
- [vars$o.labelFontWeight]: '400',
3658
- [vars$o.labelLineHeight]: checkboxSize,
3659
- [vars$o.labelSpacing]: '1em',
3660
- [vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
3661
- [vars$o.inputOutlineWidth]: refs.outlineWidth,
3662
- [vars$o.inputOutlineOffset]: refs.outlineOffset,
3663
- [vars$o.inputOutlineColor]: refs.outlineColor,
3664
- [vars$o.inputOutlineStyle]: refs.outlineStyle,
3665
- [vars$o.inputBorderRadius]: refs.borderRadius,
3666
- [vars$o.inputBorderColor]: refs.borderColor,
3667
- [vars$o.inputBorderWidth]: refs.borderWidth,
3668
- [vars$o.inputBorderStyle]: refs.borderStyle,
3669
- [vars$o.inputBackgroundColor]: refs.backgroundColor,
3670
- [vars$o.inputSize]: checkboxSize,
3662
+ [vars$p.hostWidth]: refs.width,
3663
+ [vars$p.hostDirection]: refs.direction,
3664
+ [vars$p.fontSize]: refs.fontSize,
3665
+ [vars$p.fontFamily]: refs.fontFamily,
3666
+ [vars$p.labelTextColor]: refs.labelTextColor,
3667
+ [vars$p.labelRequiredIndicator]: refs.requiredIndicator,
3668
+ [vars$p.labelFontWeight]: '400',
3669
+ [vars$p.labelLineHeight]: checkboxSize,
3670
+ [vars$p.labelSpacing]: '1em',
3671
+ [vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
3672
+ [vars$p.inputOutlineWidth]: refs.outlineWidth,
3673
+ [vars$p.inputOutlineOffset]: refs.outlineOffset,
3674
+ [vars$p.inputOutlineColor]: refs.outlineColor,
3675
+ [vars$p.inputOutlineStyle]: refs.outlineStyle,
3676
+ [vars$p.inputBorderRadius]: refs.borderRadius,
3677
+ [vars$p.inputBorderColor]: refs.borderColor,
3678
+ [vars$p.inputBorderWidth]: refs.borderWidth,
3679
+ [vars$p.inputBorderStyle]: refs.borderStyle,
3680
+ [vars$p.inputBackgroundColor]: refs.backgroundColor,
3681
+ [vars$p.inputSize]: checkboxSize,
3671
3682
 
3672
3683
  _checked: {
3673
- [vars$o.inputValueTextColor]: refs.valueTextColor,
3684
+ [vars$p.inputValueTextColor]: refs.valueTextColor,
3674
3685
  },
3675
3686
 
3676
3687
  _disabled: {
3677
- [vars$o.labelTextColor]: refs.labelTextColor,
3688
+ [vars$p.labelTextColor]: refs.labelTextColor,
3678
3689
  },
3679
3690
  };
3680
3691
 
3681
3692
  var checkbox$1 = /*#__PURE__*/Object.freeze({
3682
3693
  __proto__: null,
3683
3694
  default: checkbox,
3684
- vars: vars$o
3695
+ vars: vars$p
3685
3696
  });
3686
3697
 
3687
- const componentName$t = getComponentName('switch-toggle');
3698
+ const componentName$v = getComponentName('switch-toggle');
3688
3699
 
3689
3700
  const {
3690
3701
  host: host$c,
@@ -3816,7 +3827,7 @@ const SwitchToggleClass = compose(
3816
3827
  }
3817
3828
  `,
3818
3829
  excludeAttrsSync: ['label', 'tabindex'],
3819
- componentName: componentName$t,
3830
+ componentName: componentName$v,
3820
3831
  })
3821
3832
  );
3822
3833
 
@@ -3824,75 +3835,75 @@ const knobMargin = '2px';
3824
3835
  const checkboxHeight = '1.25em';
3825
3836
 
3826
3837
  const globalRefs$e = getThemeRefs(globals);
3827
- const vars$n = SwitchToggleClass.cssVarList;
3838
+ const vars$o = SwitchToggleClass.cssVarList;
3828
3839
 
3829
3840
  const switchToggle = {
3830
- [vars$n.hostWidth]: refs.width,
3831
- [vars$n.hostDirection]: refs.direction,
3832
- [vars$n.fontSize]: refs.fontSize,
3833
- [vars$n.fontFamily]: refs.fontFamily,
3834
-
3835
- [vars$n.inputOutlineWidth]: refs.outlineWidth,
3836
- [vars$n.inputOutlineOffset]: refs.outlineOffset,
3837
- [vars$n.inputOutlineColor]: refs.outlineColor,
3838
- [vars$n.inputOutlineStyle]: refs.outlineStyle,
3839
-
3840
- [vars$n.trackBorderStyle]: refs.borderStyle,
3841
- [vars$n.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
3842
- [vars$n.trackBorderColor]: refs.borderColor,
3843
- [vars$n.trackBackgroundColor]: 'none',
3844
- [vars$n.trackBorderRadius]: globalRefs$e.radius.md,
3845
- [vars$n.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
3846
- [vars$n.trackHeight]: checkboxHeight,
3847
-
3848
- [vars$n.knobSize]: `calc(1em - ${knobMargin})`,
3849
- [vars$n.knobRadius]: '50%',
3850
- [vars$n.knobTopOffset]: '1px',
3851
- [vars$n.knobLeftOffset]: knobMargin,
3852
- [vars$n.knobColor]: refs.valueTextColor,
3853
- [vars$n.knobTransitionDuration]: '0.3s',
3854
-
3855
- [vars$n.labelTextColor]: refs.labelTextColor,
3856
- [vars$n.labelFontWeight]: '400',
3857
- [vars$n.labelLineHeight]: '1.35em',
3858
- [vars$n.labelSpacing]: '1em',
3859
- [vars$n.labelRequiredIndicator]: refs.requiredIndicator,
3860
- [vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
3841
+ [vars$o.hostWidth]: refs.width,
3842
+ [vars$o.hostDirection]: refs.direction,
3843
+ [vars$o.fontSize]: refs.fontSize,
3844
+ [vars$o.fontFamily]: refs.fontFamily,
3845
+
3846
+ [vars$o.inputOutlineWidth]: refs.outlineWidth,
3847
+ [vars$o.inputOutlineOffset]: refs.outlineOffset,
3848
+ [vars$o.inputOutlineColor]: refs.outlineColor,
3849
+ [vars$o.inputOutlineStyle]: refs.outlineStyle,
3850
+
3851
+ [vars$o.trackBorderStyle]: refs.borderStyle,
3852
+ [vars$o.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
3853
+ [vars$o.trackBorderColor]: refs.borderColor,
3854
+ [vars$o.trackBackgroundColor]: 'none',
3855
+ [vars$o.trackBorderRadius]: globalRefs$e.radius.md,
3856
+ [vars$o.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
3857
+ [vars$o.trackHeight]: checkboxHeight,
3858
+
3859
+ [vars$o.knobSize]: `calc(1em - ${knobMargin})`,
3860
+ [vars$o.knobRadius]: '50%',
3861
+ [vars$o.knobTopOffset]: '1px',
3862
+ [vars$o.knobLeftOffset]: knobMargin,
3863
+ [vars$o.knobColor]: refs.valueTextColor,
3864
+ [vars$o.knobTransitionDuration]: '0.3s',
3865
+
3866
+ [vars$o.labelTextColor]: refs.labelTextColor,
3867
+ [vars$o.labelFontWeight]: '400',
3868
+ [vars$o.labelLineHeight]: '1.35em',
3869
+ [vars$o.labelSpacing]: '1em',
3870
+ [vars$o.labelRequiredIndicator]: refs.requiredIndicator,
3871
+ [vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
3861
3872
 
3862
3873
  _checked: {
3863
- [vars$n.trackBorderColor]: refs.borderColor,
3864
- [vars$n.trackBackgroundColor]: refs.backgroundColor,
3865
- [vars$n.knobLeftOffset]: `calc(100% - var(${vars$n.knobSize}) - ${knobMargin})`,
3866
- [vars$n.knobColor]: refs.valueTextColor,
3867
- [vars$n.knobTextColor]: refs.valueTextColor,
3874
+ [vars$o.trackBorderColor]: refs.borderColor,
3875
+ [vars$o.trackBackgroundColor]: refs.backgroundColor,
3876
+ [vars$o.knobLeftOffset]: `calc(100% - var(${vars$o.knobSize}) - ${knobMargin})`,
3877
+ [vars$o.knobColor]: refs.valueTextColor,
3878
+ [vars$o.knobTextColor]: refs.valueTextColor,
3868
3879
  },
3869
3880
 
3870
3881
  _disabled: {
3871
- [vars$n.knobColor]: globalRefs$e.colors.surface.light,
3872
- [vars$n.trackBorderColor]: globalRefs$e.colors.surface.main,
3873
- [vars$n.trackBackgroundColor]: globalRefs$e.colors.surface.main,
3874
- [vars$n.labelTextColor]: refs.labelTextColor,
3882
+ [vars$o.knobColor]: globalRefs$e.colors.surface.light,
3883
+ [vars$o.trackBorderColor]: globalRefs$e.colors.surface.main,
3884
+ [vars$o.trackBackgroundColor]: globalRefs$e.colors.surface.main,
3885
+ [vars$o.labelTextColor]: refs.labelTextColor,
3875
3886
  _checked: {
3876
- [vars$n.knobColor]: globalRefs$e.colors.surface.light,
3877
- [vars$n.trackBackgroundColor]: globalRefs$e.colors.surface.main,
3887
+ [vars$o.knobColor]: globalRefs$e.colors.surface.light,
3888
+ [vars$o.trackBackgroundColor]: globalRefs$e.colors.surface.main,
3878
3889
  },
3879
3890
  },
3880
3891
 
3881
3892
  _invalid: {
3882
- [vars$n.trackBorderColor]: globalRefs$e.colors.error.main,
3883
- [vars$n.knobColor]: globalRefs$e.colors.error.main,
3893
+ [vars$o.trackBorderColor]: globalRefs$e.colors.error.main,
3894
+ [vars$o.knobColor]: globalRefs$e.colors.error.main,
3884
3895
  },
3885
3896
  };
3886
3897
 
3887
3898
  var switchToggle$1 = /*#__PURE__*/Object.freeze({
3888
3899
  __proto__: null,
3889
3900
  default: switchToggle,
3890
- vars: vars$n
3901
+ vars: vars$o
3891
3902
  });
3892
3903
 
3893
- const componentName$s = getComponentName('container');
3904
+ const componentName$u = getComponentName('container');
3894
3905
 
3895
- class RawContainer extends createBaseClass({ componentName: componentName$s, baseSelector: 'slot' }) {
3906
+ class RawContainer extends createBaseClass({ componentName: componentName$u, baseSelector: 'slot' }) {
3896
3907
  constructor() {
3897
3908
  super();
3898
3909
 
@@ -3966,7 +3977,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
3966
3977
  horizontalAlignment,
3967
3978
  shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
3968
3979
  },
3969
- componentName$s
3980
+ componentName$u
3970
3981
  );
3971
3982
 
3972
3983
  const { shadowColor: shadowColor$1 } = helperRefs$2;
@@ -4051,7 +4062,7 @@ const container = {
4051
4062
  },
4052
4063
  };
4053
4064
 
4054
- const vars$m = {
4065
+ const vars$n = {
4055
4066
  ...compVars$3,
4056
4067
  ...helperVars$2,
4057
4068
  };
@@ -4059,7 +4070,7 @@ const vars$m = {
4059
4070
  var container$1 = /*#__PURE__*/Object.freeze({
4060
4071
  __proto__: null,
4061
4072
  default: container,
4062
- vars: vars$m
4073
+ vars: vars$n
4063
4074
  });
4064
4075
 
4065
4076
  const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
@@ -4112,51 +4123,51 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
4112
4123
  return CssVarImageClass;
4113
4124
  };
4114
4125
 
4115
- const componentName$r = getComponentName('logo');
4126
+ const componentName$t = getComponentName('logo');
4116
4127
 
4117
4128
  const LogoClass = createCssVarImageClass({
4118
- componentName: componentName$r,
4129
+ componentName: componentName$t,
4119
4130
  varName: 'url',
4120
4131
  fallbackVarName: 'fallbackUrl',
4121
4132
  });
4122
4133
 
4123
- const vars$l = LogoClass.cssVarList;
4134
+ const vars$m = LogoClass.cssVarList;
4124
4135
 
4125
4136
  const logo$1 = {
4126
- [vars$l.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
4137
+ [vars$m.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
4127
4138
  };
4128
4139
 
4129
4140
  var logo$2 = /*#__PURE__*/Object.freeze({
4130
4141
  __proto__: null,
4131
4142
  default: logo$1,
4132
- vars: vars$l
4143
+ vars: vars$m
4133
4144
  });
4134
4145
 
4135
- const componentName$q = getComponentName('totp-image');
4146
+ const componentName$s = getComponentName('totp-image');
4136
4147
 
4137
4148
  const TotpImageClass = createCssVarImageClass({
4138
- componentName: componentName$q,
4149
+ componentName: componentName$s,
4139
4150
  varName: 'url',
4140
4151
  fallbackVarName: 'fallbackUrl',
4141
4152
  });
4142
4153
 
4143
- const vars$k = TotpImageClass.cssVarList;
4154
+ const vars$l = TotpImageClass.cssVarList;
4144
4155
 
4145
4156
  const logo = {
4146
- [vars$k.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
4157
+ [vars$l.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
4147
4158
  };
4148
4159
 
4149
4160
  var totpImage = /*#__PURE__*/Object.freeze({
4150
4161
  __proto__: null,
4151
4162
  default: logo,
4152
- vars: vars$k
4163
+ vars: vars$l
4153
4164
  });
4154
4165
 
4155
4166
  // eslint-disable-next-line max-classes-per-file
4156
4167
 
4157
- const componentName$p = getComponentName('text');
4168
+ const componentName$r = getComponentName('text');
4158
4169
 
4159
- class RawText extends createBaseClass({ componentName: componentName$p, baseSelector: ':host > slot' }) {
4170
+ class RawText extends createBaseClass({ componentName: componentName$r, baseSelector: ':host > slot' }) {
4160
4171
  constructor() {
4161
4172
  super();
4162
4173
 
@@ -4217,98 +4228,98 @@ const TextClass = compose(
4217
4228
  )(RawText);
4218
4229
 
4219
4230
  const globalRefs$c = getThemeRefs(globals);
4220
- const vars$j = TextClass.cssVarList;
4231
+ const vars$k = TextClass.cssVarList;
4221
4232
 
4222
4233
  const text$2 = {
4223
- [vars$j.hostDirection]: globalRefs$c.direction,
4224
- [vars$j.textLineHeight]: '1.35em',
4225
- [vars$j.textAlign]: 'left',
4226
- [vars$j.textColor]: globalRefs$c.colors.surface.dark,
4234
+ [vars$k.hostDirection]: globalRefs$c.direction,
4235
+ [vars$k.textLineHeight]: '1.35em',
4236
+ [vars$k.textAlign]: 'left',
4237
+ [vars$k.textColor]: globalRefs$c.colors.surface.dark,
4227
4238
  variant: {
4228
4239
  h1: {
4229
- [vars$j.fontSize]: globalRefs$c.typography.h1.size,
4230
- [vars$j.fontWeight]: globalRefs$c.typography.h1.weight,
4231
- [vars$j.fontFamily]: globalRefs$c.typography.h1.font,
4240
+ [vars$k.fontSize]: globalRefs$c.typography.h1.size,
4241
+ [vars$k.fontWeight]: globalRefs$c.typography.h1.weight,
4242
+ [vars$k.fontFamily]: globalRefs$c.typography.h1.font,
4232
4243
  },
4233
4244
  h2: {
4234
- [vars$j.fontSize]: globalRefs$c.typography.h2.size,
4235
- [vars$j.fontWeight]: globalRefs$c.typography.h2.weight,
4236
- [vars$j.fontFamily]: globalRefs$c.typography.h2.font,
4245
+ [vars$k.fontSize]: globalRefs$c.typography.h2.size,
4246
+ [vars$k.fontWeight]: globalRefs$c.typography.h2.weight,
4247
+ [vars$k.fontFamily]: globalRefs$c.typography.h2.font,
4237
4248
  },
4238
4249
  h3: {
4239
- [vars$j.fontSize]: globalRefs$c.typography.h3.size,
4240
- [vars$j.fontWeight]: globalRefs$c.typography.h3.weight,
4241
- [vars$j.fontFamily]: globalRefs$c.typography.h3.font,
4250
+ [vars$k.fontSize]: globalRefs$c.typography.h3.size,
4251
+ [vars$k.fontWeight]: globalRefs$c.typography.h3.weight,
4252
+ [vars$k.fontFamily]: globalRefs$c.typography.h3.font,
4242
4253
  },
4243
4254
  subtitle1: {
4244
- [vars$j.fontSize]: globalRefs$c.typography.subtitle1.size,
4245
- [vars$j.fontWeight]: globalRefs$c.typography.subtitle1.weight,
4246
- [vars$j.fontFamily]: globalRefs$c.typography.subtitle1.font,
4255
+ [vars$k.fontSize]: globalRefs$c.typography.subtitle1.size,
4256
+ [vars$k.fontWeight]: globalRefs$c.typography.subtitle1.weight,
4257
+ [vars$k.fontFamily]: globalRefs$c.typography.subtitle1.font,
4247
4258
  },
4248
4259
  subtitle2: {
4249
- [vars$j.fontSize]: globalRefs$c.typography.subtitle2.size,
4250
- [vars$j.fontWeight]: globalRefs$c.typography.subtitle2.weight,
4251
- [vars$j.fontFamily]: globalRefs$c.typography.subtitle2.font,
4260
+ [vars$k.fontSize]: globalRefs$c.typography.subtitle2.size,
4261
+ [vars$k.fontWeight]: globalRefs$c.typography.subtitle2.weight,
4262
+ [vars$k.fontFamily]: globalRefs$c.typography.subtitle2.font,
4252
4263
  },
4253
4264
  body1: {
4254
- [vars$j.fontSize]: globalRefs$c.typography.body1.size,
4255
- [vars$j.fontWeight]: globalRefs$c.typography.body1.weight,
4256
- [vars$j.fontFamily]: globalRefs$c.typography.body1.font,
4265
+ [vars$k.fontSize]: globalRefs$c.typography.body1.size,
4266
+ [vars$k.fontWeight]: globalRefs$c.typography.body1.weight,
4267
+ [vars$k.fontFamily]: globalRefs$c.typography.body1.font,
4257
4268
  },
4258
4269
  body2: {
4259
- [vars$j.fontSize]: globalRefs$c.typography.body2.size,
4260
- [vars$j.fontWeight]: globalRefs$c.typography.body2.weight,
4261
- [vars$j.fontFamily]: globalRefs$c.typography.body2.font,
4270
+ [vars$k.fontSize]: globalRefs$c.typography.body2.size,
4271
+ [vars$k.fontWeight]: globalRefs$c.typography.body2.weight,
4272
+ [vars$k.fontFamily]: globalRefs$c.typography.body2.font,
4262
4273
  },
4263
4274
  },
4264
4275
 
4265
4276
  mode: {
4266
4277
  primary: {
4267
- [vars$j.textColor]: globalRefs$c.colors.primary.main,
4278
+ [vars$k.textColor]: globalRefs$c.colors.primary.main,
4268
4279
  },
4269
4280
  secondary: {
4270
- [vars$j.textColor]: globalRefs$c.colors.secondary.main,
4281
+ [vars$k.textColor]: globalRefs$c.colors.secondary.main,
4271
4282
  },
4272
4283
  error: {
4273
- [vars$j.textColor]: globalRefs$c.colors.error.main,
4284
+ [vars$k.textColor]: globalRefs$c.colors.error.main,
4274
4285
  },
4275
4286
  success: {
4276
- [vars$j.textColor]: globalRefs$c.colors.success.main,
4287
+ [vars$k.textColor]: globalRefs$c.colors.success.main,
4277
4288
  },
4278
4289
  },
4279
4290
 
4280
4291
  textAlign: {
4281
- right: { [vars$j.textAlign]: 'right' },
4282
- left: { [vars$j.textAlign]: 'left' },
4283
- center: { [vars$j.textAlign]: 'center' },
4292
+ right: { [vars$k.textAlign]: 'right' },
4293
+ left: { [vars$k.textAlign]: 'left' },
4294
+ center: { [vars$k.textAlign]: 'center' },
4284
4295
  },
4285
4296
 
4286
4297
  _fullWidth: {
4287
- [vars$j.hostWidth]: '100%',
4298
+ [vars$k.hostWidth]: '100%',
4288
4299
  },
4289
4300
 
4290
4301
  _italic: {
4291
- [vars$j.fontStyle]: 'italic',
4302
+ [vars$k.fontStyle]: 'italic',
4292
4303
  },
4293
4304
 
4294
4305
  _uppercase: {
4295
- [vars$j.textTransform]: 'uppercase',
4306
+ [vars$k.textTransform]: 'uppercase',
4296
4307
  },
4297
4308
 
4298
4309
  _lowercase: {
4299
- [vars$j.textTransform]: 'lowercase',
4310
+ [vars$k.textTransform]: 'lowercase',
4300
4311
  },
4301
4312
  };
4302
4313
 
4303
4314
  var text$3 = /*#__PURE__*/Object.freeze({
4304
4315
  __proto__: null,
4305
4316
  default: text$2,
4306
- vars: vars$j
4317
+ vars: vars$k
4307
4318
  });
4308
4319
 
4309
- const componentName$o = getComponentName('link');
4320
+ const componentName$q = getComponentName('link');
4310
4321
 
4311
- class RawLink extends createBaseClass({ componentName: componentName$o, baseSelector: ':host a' }) {
4322
+ class RawLink extends createBaseClass({ componentName: componentName$q, baseSelector: ':host a' }) {
4312
4323
  constructor() {
4313
4324
  super();
4314
4325
 
@@ -4374,36 +4385,36 @@ const LinkClass = compose(
4374
4385
  )(RawLink);
4375
4386
 
4376
4387
  const globalRefs$b = getThemeRefs(globals);
4377
- const vars$i = LinkClass.cssVarList;
4388
+ const vars$j = LinkClass.cssVarList;
4378
4389
 
4379
4390
  const link = {
4380
- [vars$i.hostDirection]: globalRefs$b.direction,
4381
- [vars$i.cursor]: 'pointer',
4391
+ [vars$j.hostDirection]: globalRefs$b.direction,
4392
+ [vars$j.cursor]: 'pointer',
4382
4393
 
4383
- [vars$i.textColor]: globalRefs$b.colors.primary.main,
4394
+ [vars$j.textColor]: globalRefs$b.colors.primary.main,
4384
4395
 
4385
4396
  textAlign: {
4386
- right: { [vars$i.textAlign]: 'right' },
4387
- left: { [vars$i.textAlign]: 'left' },
4388
- center: { [vars$i.textAlign]: 'center' },
4397
+ right: { [vars$j.textAlign]: 'right' },
4398
+ left: { [vars$j.textAlign]: 'left' },
4399
+ center: { [vars$j.textAlign]: 'center' },
4389
4400
  },
4390
4401
 
4391
4402
  _fullWidth: {
4392
- [vars$i.hostWidth]: '100%',
4403
+ [vars$j.hostWidth]: '100%',
4393
4404
  },
4394
4405
 
4395
4406
  mode: {
4396
4407
  primary: {
4397
- [vars$i.textColor]: globalRefs$b.colors.primary.main,
4408
+ [vars$j.textColor]: globalRefs$b.colors.primary.main,
4398
4409
  },
4399
4410
  secondary: {
4400
- [vars$i.textColor]: globalRefs$b.colors.secondary.main,
4411
+ [vars$j.textColor]: globalRefs$b.colors.secondary.main,
4401
4412
  },
4402
4413
  error: {
4403
- [vars$i.textColor]: globalRefs$b.colors.error.main,
4414
+ [vars$j.textColor]: globalRefs$b.colors.error.main,
4404
4415
  },
4405
4416
  success: {
4406
- [vars$i.textColor]: globalRefs$b.colors.success.main,
4417
+ [vars$j.textColor]: globalRefs$b.colors.success.main,
4407
4418
  },
4408
4419
  },
4409
4420
  };
@@ -4411,11 +4422,11 @@ const link = {
4411
4422
  var link$1 = /*#__PURE__*/Object.freeze({
4412
4423
  __proto__: null,
4413
4424
  default: link,
4414
- vars: vars$i
4425
+ vars: vars$j
4415
4426
  });
4416
4427
 
4417
- const componentName$n = getComponentName('divider');
4418
- class RawDivider extends createBaseClass({ componentName: componentName$n, baseSelector: ':host > div' }) {
4428
+ const componentName$p = getComponentName('divider');
4429
+ class RawDivider extends createBaseClass({ componentName: componentName$p, baseSelector: ':host > div' }) {
4419
4430
  constructor() {
4420
4431
  super();
4421
4432
 
@@ -4522,7 +4533,7 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
4522
4533
  thickness: '2px',
4523
4534
  spacing: '10px',
4524
4535
  },
4525
- componentName$n
4536
+ componentName$p
4526
4537
  );
4527
4538
 
4528
4539
  const divider = {
@@ -4553,7 +4564,7 @@ const divider = {
4553
4564
  },
4554
4565
  };
4555
4566
 
4556
- const vars$h = {
4567
+ const vars$i = {
4557
4568
  ...compVars$2,
4558
4569
  ...helperVars$1,
4559
4570
  };
@@ -4561,18 +4572,18 @@ const vars$h = {
4561
4572
  var divider$1 = /*#__PURE__*/Object.freeze({
4562
4573
  __proto__: null,
4563
4574
  default: divider,
4564
- vars: vars$h
4575
+ vars: vars$i
4565
4576
  });
4566
4577
 
4567
4578
  /* eslint-disable no-param-reassign */
4568
4579
 
4569
- const componentName$m = getComponentName('passcode-internal');
4580
+ const componentName$o = getComponentName('passcode-internal');
4570
4581
 
4571
- createBaseInputClass({ componentName: componentName$m, baseSelector: 'div' });
4582
+ createBaseInputClass({ componentName: componentName$o, baseSelector: 'div' });
4572
4583
 
4573
- const componentName$l = getComponentName('loader-radial');
4584
+ const componentName$n = getComponentName('loader-radial');
4574
4585
 
4575
- class RawLoaderRadial extends createBaseClass({ componentName: componentName$l, baseSelector: ':host > div' }) {
4586
+ class RawLoaderRadial extends createBaseClass({ componentName: componentName$n, baseSelector: ':host > div' }) {
4576
4587
  constructor() {
4577
4588
  super();
4578
4589
 
@@ -4616,11 +4627,11 @@ const LoaderRadialClass = compose(
4616
4627
  componentNameValidationMixin
4617
4628
  )(RawLoaderRadial);
4618
4629
 
4619
- const componentName$k = getComponentName('passcode');
4630
+ const componentName$m = getComponentName('passcode');
4620
4631
 
4621
4632
  const observedAttributes$3 = ['digits'];
4622
4633
 
4623
- const customMixin$5 = (superclass) =>
4634
+ const customMixin$4 = (superclass) =>
4624
4635
  class PasscodeMixinClass extends superclass {
4625
4636
  static get observedAttributes() {
4626
4637
  return observedAttributes$3.concat(superclass.observedAttributes || []);
@@ -4635,17 +4646,17 @@ const customMixin$5 = (superclass) =>
4635
4646
  const template = document.createElement('template');
4636
4647
 
4637
4648
  template.innerHTML = `
4638
- <${componentName$m}
4649
+ <${componentName$o}
4639
4650
  bordered="true"
4640
4651
  name="code"
4641
4652
  tabindex="-1"
4642
4653
  slot="input"
4643
- ><slot></slot></${componentName$m}>
4654
+ ><slot></slot></${componentName$o}>
4644
4655
  `;
4645
4656
 
4646
4657
  this.baseElement.appendChild(template.content.cloneNode(true));
4647
4658
 
4648
- this.inputElement = this.shadowRoot.querySelector(componentName$m);
4659
+ this.inputElement = this.shadowRoot.querySelector(componentName$o);
4649
4660
 
4650
4661
  forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
4651
4662
  }
@@ -4716,7 +4727,7 @@ const PasscodeClass = compose(
4716
4727
  draggableMixin,
4717
4728
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
4718
4729
  componentNameValidationMixin,
4719
- customMixin$5
4730
+ customMixin$4
4720
4731
  )(
4721
4732
  createProxy({
4722
4733
  slots: [],
@@ -4792,56 +4803,56 @@ const PasscodeClass = compose(
4792
4803
  ${resetInputCursor('vaadin-text-field')}
4793
4804
  `,
4794
4805
  excludeAttrsSync: ['tabindex'],
4795
- componentName: componentName$k,
4806
+ componentName: componentName$m,
4796
4807
  })
4797
4808
  );
4798
4809
 
4799
- const vars$g = PasscodeClass.cssVarList;
4810
+ const vars$h = PasscodeClass.cssVarList;
4800
4811
 
4801
4812
  const passcode = {
4802
- [vars$g.hostDirection]: refs.direction,
4803
- [vars$g.fontFamily]: refs.fontFamily,
4804
- [vars$g.fontSize]: refs.fontSize,
4805
- [vars$g.labelTextColor]: refs.labelTextColor,
4806
- [vars$g.labelRequiredIndicator]: refs.requiredIndicator,
4807
- [vars$g.errorMessageTextColor]: refs.errorMessageTextColor,
4808
- [vars$g.digitValueTextColor]: refs.valueTextColor,
4809
- [vars$g.digitPadding]: '0',
4810
- [vars$g.digitTextAlign]: 'center',
4811
- [vars$g.digitSpacing]: '4px',
4812
- [vars$g.hostWidth]: refs.width,
4813
- [vars$g.digitOutlineColor]: 'transparent',
4814
- [vars$g.digitOutlineWidth]: refs.outlineWidth,
4815
- [vars$g.focusedDigitFieldOutlineColor]: refs.outlineColor,
4816
- [vars$g.digitSize]: refs.inputHeight,
4813
+ [vars$h.hostDirection]: refs.direction,
4814
+ [vars$h.fontFamily]: refs.fontFamily,
4815
+ [vars$h.fontSize]: refs.fontSize,
4816
+ [vars$h.labelTextColor]: refs.labelTextColor,
4817
+ [vars$h.labelRequiredIndicator]: refs.requiredIndicator,
4818
+ [vars$h.errorMessageTextColor]: refs.errorMessageTextColor,
4819
+ [vars$h.digitValueTextColor]: refs.valueTextColor,
4820
+ [vars$h.digitPadding]: '0',
4821
+ [vars$h.digitTextAlign]: 'center',
4822
+ [vars$h.digitSpacing]: '4px',
4823
+ [vars$h.hostWidth]: refs.width,
4824
+ [vars$h.digitOutlineColor]: 'transparent',
4825
+ [vars$h.digitOutlineWidth]: refs.outlineWidth,
4826
+ [vars$h.focusedDigitFieldOutlineColor]: refs.outlineColor,
4827
+ [vars$h.digitSize]: refs.inputHeight,
4817
4828
 
4818
4829
  size: {
4819
- xs: { [vars$g.spinnerSize]: '15px' },
4820
- sm: { [vars$g.spinnerSize]: '20px' },
4821
- md: { [vars$g.spinnerSize]: '20px' },
4822
- lg: { [vars$g.spinnerSize]: '20px' },
4830
+ xs: { [vars$h.spinnerSize]: '15px' },
4831
+ sm: { [vars$h.spinnerSize]: '20px' },
4832
+ md: { [vars$h.spinnerSize]: '20px' },
4833
+ lg: { [vars$h.spinnerSize]: '20px' },
4823
4834
  },
4824
4835
 
4825
4836
  _hideCursor: {
4826
- [vars$g.digitCaretTextColor]: 'transparent',
4837
+ [vars$h.digitCaretTextColor]: 'transparent',
4827
4838
  },
4828
4839
 
4829
4840
  _loading: {
4830
- [vars$g.overlayOpacity]: refs.overlayOpacity,
4841
+ [vars$h.overlayOpacity]: refs.overlayOpacity,
4831
4842
  },
4832
4843
  };
4833
4844
 
4834
4845
  var passcode$1 = /*#__PURE__*/Object.freeze({
4835
4846
  __proto__: null,
4836
4847
  default: passcode,
4837
- vars: vars$g
4848
+ vars: vars$h
4838
4849
  });
4839
4850
 
4840
- const componentName$j = getComponentName('loader-linear');
4851
+ const componentName$l = getComponentName('loader-linear');
4841
4852
 
4842
- class RawLoaderLinear extends createBaseClass({ componentName: componentName$j, baseSelector: ':host > div' }) {
4853
+ class RawLoaderLinear extends createBaseClass({ componentName: componentName$l, baseSelector: ':host > div' }) {
4843
4854
  static get componentName() {
4844
- return componentName$j;
4855
+ return componentName$l;
4845
4856
  }
4846
4857
 
4847
4858
  constructor() {
@@ -4903,48 +4914,48 @@ const LoaderLinearClass = compose(
4903
4914
  )(RawLoaderLinear);
4904
4915
 
4905
4916
  const globalRefs$9 = getThemeRefs(globals);
4906
- const vars$f = LoaderLinearClass.cssVarList;
4917
+ const vars$g = LoaderLinearClass.cssVarList;
4907
4918
 
4908
4919
  const loaderLinear = {
4909
- [vars$f.hostDisplay]: 'inline-block',
4910
- [vars$f.hostWidth]: '100%',
4920
+ [vars$g.hostDisplay]: 'inline-block',
4921
+ [vars$g.hostWidth]: '100%',
4911
4922
 
4912
- [vars$f.barColor]: globalRefs$9.colors.surface.contrast,
4913
- [vars$f.barWidth]: '20%',
4923
+ [vars$g.barColor]: globalRefs$9.colors.surface.contrast,
4924
+ [vars$g.barWidth]: '20%',
4914
4925
 
4915
- [vars$f.barBackgroundColor]: globalRefs$9.colors.surface.main,
4916
- [vars$f.barBorderRadius]: '4px',
4926
+ [vars$g.barBackgroundColor]: globalRefs$9.colors.surface.main,
4927
+ [vars$g.barBorderRadius]: '4px',
4917
4928
 
4918
- [vars$f.animationDuration]: '2s',
4919
- [vars$f.animationTimingFunction]: 'linear',
4920
- [vars$f.animationIterationCount]: 'infinite',
4921
- [vars$f.verticalPadding]: '0.25em',
4929
+ [vars$g.animationDuration]: '2s',
4930
+ [vars$g.animationTimingFunction]: 'linear',
4931
+ [vars$g.animationIterationCount]: 'infinite',
4932
+ [vars$g.verticalPadding]: '0.25em',
4922
4933
 
4923
4934
  size: {
4924
- xs: { [vars$f.barHeight]: '2px' },
4925
- sm: { [vars$f.barHeight]: '4px' },
4926
- md: { [vars$f.barHeight]: '6px' },
4927
- lg: { [vars$f.barHeight]: '8px' },
4935
+ xs: { [vars$g.barHeight]: '2px' },
4936
+ sm: { [vars$g.barHeight]: '4px' },
4937
+ md: { [vars$g.barHeight]: '6px' },
4938
+ lg: { [vars$g.barHeight]: '8px' },
4928
4939
  },
4929
4940
 
4930
4941
  mode: {
4931
4942
  primary: {
4932
- [vars$f.barColor]: globalRefs$9.colors.primary.main,
4943
+ [vars$g.barColor]: globalRefs$9.colors.primary.main,
4933
4944
  },
4934
4945
  secondary: {
4935
- [vars$f.barColor]: globalRefs$9.colors.secondary.main,
4946
+ [vars$g.barColor]: globalRefs$9.colors.secondary.main,
4936
4947
  },
4937
4948
  },
4938
4949
 
4939
4950
  _hidden: {
4940
- [vars$f.hostDisplay]: 'none',
4951
+ [vars$g.hostDisplay]: 'none',
4941
4952
  },
4942
4953
  };
4943
4954
 
4944
4955
  var loaderLinear$1 = /*#__PURE__*/Object.freeze({
4945
4956
  __proto__: null,
4946
4957
  default: loaderLinear,
4947
- vars: vars$f
4958
+ vars: vars$g
4948
4959
  });
4949
4960
 
4950
4961
  const globalRefs$8 = getThemeRefs(globals);
@@ -4962,7 +4973,7 @@ const [helperTheme, helperRefs, helperVars] = createHelperVars(
4962
4973
  },
4963
4974
  },
4964
4975
  },
4965
- componentName$l
4976
+ componentName$n
4966
4977
  );
4967
4978
 
4968
4979
  const loaderRadial = {
@@ -4991,7 +5002,7 @@ const loaderRadial = {
4991
5002
  [compVars$1.hostDisplay]: 'none',
4992
5003
  },
4993
5004
  };
4994
- const vars$e = {
5005
+ const vars$f = {
4995
5006
  ...compVars$1,
4996
5007
  ...helperVars,
4997
5008
  };
@@ -4999,10 +5010,10 @@ const vars$e = {
4999
5010
  var loaderRadial$1 = /*#__PURE__*/Object.freeze({
5000
5011
  __proto__: null,
5001
5012
  default: loaderRadial,
5002
- vars: vars$e
5013
+ vars: vars$f
5003
5014
  });
5004
5015
 
5005
- const componentName$i = getComponentName('combo-box');
5016
+ const componentName$k = getComponentName('combo-box');
5006
5017
 
5007
5018
  const ComboBoxMixin = (superclass) =>
5008
5019
  class ComboBoxMixinClass extends superclass {
@@ -5366,69 +5377,69 @@ const ComboBoxClass = compose(
5366
5377
  // and reset items to an empty array, and opening the list box with no items
5367
5378
  // to display.
5368
5379
  excludeAttrsSync: ['tabindex', 'size', 'data'],
5369
- componentName: componentName$i,
5380
+ componentName: componentName$k,
5370
5381
  includeForwardProps: ['items', 'renderer', 'selectedItem'],
5371
5382
  })
5372
5383
  );
5373
5384
 
5374
5385
  const globalRefs$7 = getThemeRefs(globals);
5375
- const vars$d = ComboBoxClass.cssVarList;
5386
+ const vars$e = ComboBoxClass.cssVarList;
5376
5387
 
5377
5388
  const comboBox = {
5378
- [vars$d.hostWidth]: refs.width,
5379
- [vars$d.hostDirection]: refs.direction,
5380
- [vars$d.fontSize]: refs.fontSize,
5381
- [vars$d.fontFamily]: refs.fontFamily,
5382
- [vars$d.labelTextColor]: refs.labelTextColor,
5383
- [vars$d.errorMessageTextColor]: refs.errorMessageTextColor,
5384
- [vars$d.inputBorderColor]: refs.borderColor,
5385
- [vars$d.inputBorderWidth]: refs.borderWidth,
5386
- [vars$d.inputBorderStyle]: refs.borderStyle,
5387
- [vars$d.inputBorderRadius]: refs.borderRadius,
5388
- [vars$d.inputOutlineColor]: refs.outlineColor,
5389
- [vars$d.inputOutlineOffset]: refs.outlineOffset,
5390
- [vars$d.inputOutlineWidth]: refs.outlineWidth,
5391
- [vars$d.inputOutlineStyle]: refs.outlineStyle,
5392
- [vars$d.labelRequiredIndicator]: refs.requiredIndicator,
5393
- [vars$d.inputValueTextColor]: refs.valueTextColor,
5394
- [vars$d.inputPlaceholderTextColor]: refs.placeholderTextColor,
5395
- [vars$d.inputBackgroundColor]: refs.backgroundColor,
5396
- [vars$d.inputHorizontalPadding]: refs.horizontalPadding,
5397
- [vars$d.inputHeight]: refs.inputHeight,
5398
- [vars$d.inputDropdownButtonColor]: globalRefs$7.colors.surface.contrast,
5399
- [vars$d.inputDropdownButtonCursor]: 'pointer',
5400
- [vars$d.inputDropdownButtonSize]: refs.toggleButtonSize,
5401
- [vars$d.inputDropdownButtonOffset]: globalRefs$7.spacing.xs,
5402
- [vars$d.overlayItemPaddingInlineStart]: globalRefs$7.spacing.xs,
5403
- [vars$d.overlayItemPaddingInlineEnd]: globalRefs$7.spacing.lg,
5389
+ [vars$e.hostWidth]: refs.width,
5390
+ [vars$e.hostDirection]: refs.direction,
5391
+ [vars$e.fontSize]: refs.fontSize,
5392
+ [vars$e.fontFamily]: refs.fontFamily,
5393
+ [vars$e.labelTextColor]: refs.labelTextColor,
5394
+ [vars$e.errorMessageTextColor]: refs.errorMessageTextColor,
5395
+ [vars$e.inputBorderColor]: refs.borderColor,
5396
+ [vars$e.inputBorderWidth]: refs.borderWidth,
5397
+ [vars$e.inputBorderStyle]: refs.borderStyle,
5398
+ [vars$e.inputBorderRadius]: refs.borderRadius,
5399
+ [vars$e.inputOutlineColor]: refs.outlineColor,
5400
+ [vars$e.inputOutlineOffset]: refs.outlineOffset,
5401
+ [vars$e.inputOutlineWidth]: refs.outlineWidth,
5402
+ [vars$e.inputOutlineStyle]: refs.outlineStyle,
5403
+ [vars$e.labelRequiredIndicator]: refs.requiredIndicator,
5404
+ [vars$e.inputValueTextColor]: refs.valueTextColor,
5405
+ [vars$e.inputPlaceholderTextColor]: refs.placeholderTextColor,
5406
+ [vars$e.inputBackgroundColor]: refs.backgroundColor,
5407
+ [vars$e.inputHorizontalPadding]: refs.horizontalPadding,
5408
+ [vars$e.inputHeight]: refs.inputHeight,
5409
+ [vars$e.inputDropdownButtonColor]: globalRefs$7.colors.surface.contrast,
5410
+ [vars$e.inputDropdownButtonCursor]: 'pointer',
5411
+ [vars$e.inputDropdownButtonSize]: refs.toggleButtonSize,
5412
+ [vars$e.inputDropdownButtonOffset]: globalRefs$7.spacing.xs,
5413
+ [vars$e.overlayItemPaddingInlineStart]: globalRefs$7.spacing.xs,
5414
+ [vars$e.overlayItemPaddingInlineEnd]: globalRefs$7.spacing.lg,
5404
5415
 
5405
5416
  _readonly: {
5406
- [vars$d.inputDropdownButtonCursor]: 'default',
5417
+ [vars$e.inputDropdownButtonCursor]: 'default',
5407
5418
  },
5408
5419
 
5409
5420
  // Overlay theme exposed via the component:
5410
- [vars$d.overlayFontSize]: refs.fontSize,
5411
- [vars$d.overlayFontFamily]: refs.fontFamily,
5412
- [vars$d.overlayCursor]: 'pointer',
5413
- [vars$d.overlayItemBoxShadow]: 'none',
5421
+ [vars$e.overlayFontSize]: refs.fontSize,
5422
+ [vars$e.overlayFontFamily]: refs.fontFamily,
5423
+ [vars$e.overlayCursor]: 'pointer',
5424
+ [vars$e.overlayItemBoxShadow]: 'none',
5414
5425
 
5415
5426
  // Overlay direct theme:
5416
- [vars$d.overlay.minHeight]: '400px',
5417
- [vars$d.overlay.margin]: '0',
5427
+ [vars$e.overlay.minHeight]: '400px',
5428
+ [vars$e.overlay.margin]: '0',
5418
5429
  };
5419
5430
 
5420
5431
  var comboBox$1 = /*#__PURE__*/Object.freeze({
5421
5432
  __proto__: null,
5422
5433
  comboBox: comboBox,
5423
5434
  default: comboBox,
5424
- vars: vars$d
5435
+ vars: vars$e
5425
5436
  });
5426
5437
 
5427
5438
  const observedAttributes$2 = ['src', 'alt'];
5428
5439
 
5429
- const componentName$h = getComponentName('image');
5440
+ const componentName$j = getComponentName('image');
5430
5441
 
5431
- const BaseClass$1 = createBaseClass({ componentName: componentName$h, baseSelector: ':host > img' });
5442
+ const BaseClass$1 = createBaseClass({ componentName: componentName$j, baseSelector: ':host > img' });
5432
5443
  class RawImage extends BaseClass$1 {
5433
5444
  static get observedAttributes() {
5434
5445
  return observedAttributes$2.concat(BaseClass$1.observedAttributes || []);
@@ -5468,14 +5479,14 @@ const ImageClass = compose(
5468
5479
  draggableMixin
5469
5480
  )(RawImage);
5470
5481
 
5471
- const vars$c = ImageClass.cssVarList;
5482
+ const vars$d = ImageClass.cssVarList;
5472
5483
 
5473
5484
  const image = {};
5474
5485
 
5475
5486
  var image$1 = /*#__PURE__*/Object.freeze({
5476
5487
  __proto__: null,
5477
5488
  default: image,
5478
- vars: vars$c
5489
+ vars: vars$d
5479
5490
  });
5480
5491
 
5481
5492
  var CountryCodes = [
@@ -6691,16 +6702,16 @@ var CountryCodes = [
6691
6702
  },
6692
6703
  ].sort((a, b) => (a.name < b.name ? -1 : 1));
6693
6704
 
6694
- const componentName$g = getComponentName('phone-field-internal');
6705
+ const componentName$i = getComponentName('phone-field-internal');
6695
6706
 
6696
- createBaseInputClass({ componentName: componentName$g, baseSelector: 'div' });
6707
+ createBaseInputClass({ componentName: componentName$i, baseSelector: 'div' });
6697
6708
 
6698
6709
  const textVars$1 = TextFieldClass.cssVarList;
6699
6710
  const comboVars = ComboBoxClass.cssVarList;
6700
6711
 
6701
- const componentName$f = getComponentName('phone-field');
6712
+ const componentName$h = getComponentName('phone-field');
6702
6713
 
6703
- const customMixin$4 = (superclass) =>
6714
+ const customMixin$3 = (superclass) =>
6704
6715
  class PhoneFieldMixinClass extends superclass {
6705
6716
  static get CountryCodes() {
6706
6717
  return CountryCodes;
@@ -6712,15 +6723,15 @@ const customMixin$4 = (superclass) =>
6712
6723
  const template = document.createElement('template');
6713
6724
 
6714
6725
  template.innerHTML = `
6715
- <${componentName$g}
6726
+ <${componentName$i}
6716
6727
  tabindex="-1"
6717
6728
  slot="input"
6718
- ></${componentName$g}>
6729
+ ></${componentName$i}>
6719
6730
  `;
6720
6731
 
6721
6732
  this.baseElement.appendChild(template.content.cloneNode(true));
6722
6733
 
6723
- this.inputElement = this.shadowRoot.querySelector(componentName$g);
6734
+ this.inputElement = this.shadowRoot.querySelector(componentName$i);
6724
6735
 
6725
6736
  forwardAttrs(this.shadowRoot.host, this.inputElement, {
6726
6737
  includeAttrs: [
@@ -6840,7 +6851,7 @@ const PhoneFieldClass = compose(
6840
6851
  }),
6841
6852
  draggableMixin,
6842
6853
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
6843
- customMixin$4
6854
+ customMixin$3
6844
6855
  )(
6845
6856
  createProxy({
6846
6857
  slots: [],
@@ -6916,33 +6927,33 @@ const PhoneFieldClass = compose(
6916
6927
  ${resetInputLabelPosition('vaadin-text-field')}
6917
6928
  `,
6918
6929
  excludeAttrsSync: ['tabindex'],
6919
- componentName: componentName$f,
6930
+ componentName: componentName$h,
6920
6931
  })
6921
6932
  );
6922
6933
 
6923
- const vars$b = PhoneFieldClass.cssVarList;
6934
+ const vars$c = PhoneFieldClass.cssVarList;
6924
6935
 
6925
6936
  const phoneField = {
6926
- [vars$b.hostWidth]: refs.width,
6927
- [vars$b.hostDirection]: refs.direction,
6928
- [vars$b.fontSize]: refs.fontSize,
6929
- [vars$b.fontFamily]: refs.fontFamily,
6930
- [vars$b.labelTextColor]: refs.labelTextColor,
6931
- [vars$b.labelRequiredIndicator]: refs.requiredIndicator,
6932
- [vars$b.errorMessageTextColor]: refs.errorMessageTextColor,
6933
- [vars$b.inputValueTextColor]: refs.valueTextColor,
6934
- [vars$b.inputPlaceholderTextColor]: refs.placeholderTextColor,
6935
- [vars$b.inputBorderStyle]: refs.borderStyle,
6936
- [vars$b.inputBorderWidth]: refs.borderWidth,
6937
- [vars$b.inputBorderColor]: refs.borderColor,
6938
- [vars$b.inputBorderRadius]: refs.borderRadius,
6939
- [vars$b.inputOutlineStyle]: refs.outlineStyle,
6940
- [vars$b.inputOutlineWidth]: refs.outlineWidth,
6941
- [vars$b.inputOutlineColor]: refs.outlineColor,
6942
- [vars$b.inputOutlineOffset]: refs.outlineOffset,
6943
- [vars$b.phoneInputWidth]: refs.minWidth,
6944
- [vars$b.countryCodeInputWidth]: '5em',
6945
- [vars$b.countryCodeDropdownWidth]: '20em',
6937
+ [vars$c.hostWidth]: refs.width,
6938
+ [vars$c.hostDirection]: refs.direction,
6939
+ [vars$c.fontSize]: refs.fontSize,
6940
+ [vars$c.fontFamily]: refs.fontFamily,
6941
+ [vars$c.labelTextColor]: refs.labelTextColor,
6942
+ [vars$c.labelRequiredIndicator]: refs.requiredIndicator,
6943
+ [vars$c.errorMessageTextColor]: refs.errorMessageTextColor,
6944
+ [vars$c.inputValueTextColor]: refs.valueTextColor,
6945
+ [vars$c.inputPlaceholderTextColor]: refs.placeholderTextColor,
6946
+ [vars$c.inputBorderStyle]: refs.borderStyle,
6947
+ [vars$c.inputBorderWidth]: refs.borderWidth,
6948
+ [vars$c.inputBorderColor]: refs.borderColor,
6949
+ [vars$c.inputBorderRadius]: refs.borderRadius,
6950
+ [vars$c.inputOutlineStyle]: refs.outlineStyle,
6951
+ [vars$c.inputOutlineWidth]: refs.outlineWidth,
6952
+ [vars$c.inputOutlineColor]: refs.outlineColor,
6953
+ [vars$c.inputOutlineOffset]: refs.outlineOffset,
6954
+ [vars$c.phoneInputWidth]: refs.minWidth,
6955
+ [vars$c.countryCodeInputWidth]: '5em',
6956
+ [vars$c.countryCodeDropdownWidth]: '20em',
6946
6957
 
6947
6958
  // '@overlay': {
6948
6959
  // overlayItemBackgroundColor: 'red'
@@ -6952,18 +6963,18 @@ const phoneField = {
6952
6963
  var phoneField$1 = /*#__PURE__*/Object.freeze({
6953
6964
  __proto__: null,
6954
6965
  default: phoneField,
6955
- vars: vars$b
6966
+ vars: vars$c
6956
6967
  });
6957
6968
 
6958
- const componentName$e = getComponentName('phone-field-internal-input-box');
6969
+ const componentName$g = getComponentName('phone-field-internal-input-box');
6959
6970
 
6960
- createBaseInputClass({ componentName: componentName$e, baseSelector: 'div' });
6971
+ createBaseInputClass({ componentName: componentName$g, baseSelector: 'div' });
6961
6972
 
6962
6973
  const textVars = TextFieldClass.cssVarList;
6963
6974
 
6964
- const componentName$d = getComponentName('phone-input-box-field');
6975
+ const componentName$f = getComponentName('phone-input-box-field');
6965
6976
 
6966
- const customMixin$3 = (superclass) =>
6977
+ const customMixin$2 = (superclass) =>
6967
6978
  class PhoneInputBoxFieldMixinClass extends superclass {
6968
6979
  static get CountryCodes() {
6969
6980
  return CountryCodes;
@@ -6975,15 +6986,15 @@ const customMixin$3 = (superclass) =>
6975
6986
  const template = document.createElement('template');
6976
6987
 
6977
6988
  template.innerHTML = `
6978
- <${componentName$e}
6989
+ <${componentName$g}
6979
6990
  tabindex="-1"
6980
6991
  slot="input"
6981
- ></${componentName$e}>
6992
+ ></${componentName$g}>
6982
6993
  `;
6983
6994
 
6984
6995
  this.baseElement.appendChild(template.content.cloneNode(true));
6985
6996
 
6986
- this.inputElement = this.shadowRoot.querySelector(componentName$e);
6997
+ this.inputElement = this.shadowRoot.querySelector(componentName$g);
6987
6998
 
6988
6999
  forwardAttrs(this.shadowRoot.host, this.inputElement, {
6989
7000
  includeAttrs: [
@@ -7050,7 +7061,7 @@ const PhoneFieldInputBoxClass = compose(
7050
7061
  }),
7051
7062
  draggableMixin,
7052
7063
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
7053
- customMixin$3
7064
+ customMixin$2
7054
7065
  )(
7055
7066
  createProxy({
7056
7067
  slots: [],
@@ -7116,47 +7127,47 @@ const PhoneFieldInputBoxClass = compose(
7116
7127
  ${resetInputLabelPosition('vaadin-text-field')}
7117
7128
  `,
7118
7129
  excludeAttrsSync: ['tabindex'],
7119
- componentName: componentName$d,
7130
+ componentName: componentName$f,
7120
7131
  })
7121
7132
  );
7122
7133
 
7123
- const vars$a = PhoneFieldInputBoxClass.cssVarList;
7134
+ const vars$b = PhoneFieldInputBoxClass.cssVarList;
7124
7135
 
7125
7136
  const phoneInputBoxField = {
7126
- [vars$a.hostWidth]: '16em',
7127
- [vars$a.hostMinWidth]: refs.minWidth,
7128
- [vars$a.hostDirection]: refs.direction,
7129
- [vars$a.fontSize]: refs.fontSize,
7130
- [vars$a.fontFamily]: refs.fontFamily,
7131
- [vars$a.labelTextColor]: refs.labelTextColor,
7132
- [vars$a.labelRequiredIndicator]: refs.requiredIndicator,
7133
- [vars$a.errorMessageTextColor]: refs.errorMessageTextColor,
7134
- [vars$a.inputValueTextColor]: refs.valueTextColor,
7135
- [vars$a.inputPlaceholderTextColor]: refs.placeholderTextColor,
7136
- [vars$a.inputBorderStyle]: refs.borderStyle,
7137
- [vars$a.inputBorderWidth]: refs.borderWidth,
7138
- [vars$a.inputBorderColor]: refs.borderColor,
7139
- [vars$a.inputBorderRadius]: refs.borderRadius,
7140
- [vars$a.inputOutlineStyle]: refs.outlineStyle,
7141
- [vars$a.inputOutlineWidth]: refs.outlineWidth,
7142
- [vars$a.inputOutlineColor]: refs.outlineColor,
7143
- [vars$a.inputOutlineOffset]: refs.outlineOffset,
7137
+ [vars$b.hostWidth]: '16em',
7138
+ [vars$b.hostMinWidth]: refs.minWidth,
7139
+ [vars$b.hostDirection]: refs.direction,
7140
+ [vars$b.fontSize]: refs.fontSize,
7141
+ [vars$b.fontFamily]: refs.fontFamily,
7142
+ [vars$b.labelTextColor]: refs.labelTextColor,
7143
+ [vars$b.labelRequiredIndicator]: refs.requiredIndicator,
7144
+ [vars$b.errorMessageTextColor]: refs.errorMessageTextColor,
7145
+ [vars$b.inputValueTextColor]: refs.valueTextColor,
7146
+ [vars$b.inputPlaceholderTextColor]: refs.placeholderTextColor,
7147
+ [vars$b.inputBorderStyle]: refs.borderStyle,
7148
+ [vars$b.inputBorderWidth]: refs.borderWidth,
7149
+ [vars$b.inputBorderColor]: refs.borderColor,
7150
+ [vars$b.inputBorderRadius]: refs.borderRadius,
7151
+ [vars$b.inputOutlineStyle]: refs.outlineStyle,
7152
+ [vars$b.inputOutlineWidth]: refs.outlineWidth,
7153
+ [vars$b.inputOutlineColor]: refs.outlineColor,
7154
+ [vars$b.inputOutlineOffset]: refs.outlineOffset,
7144
7155
  _fullWidth: {
7145
- [vars$a.hostWidth]: refs.width,
7156
+ [vars$b.hostWidth]: refs.width,
7146
7157
  },
7147
7158
  };
7148
7159
 
7149
7160
  var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
7150
7161
  __proto__: null,
7151
7162
  default: phoneInputBoxField,
7152
- vars: vars$a
7163
+ vars: vars$b
7153
7164
  });
7154
7165
 
7155
- const componentName$c = getComponentName('new-password-internal');
7166
+ const componentName$e = getComponentName('new-password-internal');
7156
7167
 
7157
- const componentName$b = getComponentName('new-password');
7168
+ const componentName$d = getComponentName('new-password');
7158
7169
 
7159
- const customMixin$2 = (superclass) =>
7170
+ const customMixin$1 = (superclass) =>
7160
7171
  class NewPasswordMixinClass extends superclass {
7161
7172
  init() {
7162
7173
  super.init?.();
@@ -7164,16 +7175,16 @@ const customMixin$2 = (superclass) =>
7164
7175
  const template = document.createElement('template');
7165
7176
 
7166
7177
  template.innerHTML = `
7167
- <${componentName$c}
7178
+ <${componentName$e}
7168
7179
  name="new-password"
7169
7180
  tabindex="-1"
7170
7181
  slot="input"
7171
- ></${componentName$c}>
7182
+ ></${componentName$e}>
7172
7183
  `;
7173
7184
 
7174
7185
  this.baseElement.appendChild(template.content.cloneNode(true));
7175
7186
 
7176
- this.inputElement = this.shadowRoot.querySelector(componentName$c);
7187
+ this.inputElement = this.shadowRoot.querySelector(componentName$e);
7177
7188
 
7178
7189
  forwardAttrs(this, this.inputElement, {
7179
7190
  includeAttrs: [
@@ -7228,7 +7239,7 @@ const NewPasswordClass = compose(
7228
7239
  }),
7229
7240
  draggableMixin,
7230
7241
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
7231
- customMixin$2
7242
+ customMixin$1
7232
7243
  )(
7233
7244
  createProxy({
7234
7245
  slots: [],
@@ -7280,33 +7291,33 @@ const NewPasswordClass = compose(
7280
7291
  }
7281
7292
  `,
7282
7293
  excludeAttrsSync: ['tabindex'],
7283
- componentName: componentName$b,
7294
+ componentName: componentName$d,
7284
7295
  })
7285
7296
  );
7286
7297
 
7287
- const vars$9 = NewPasswordClass.cssVarList;
7298
+ const vars$a = NewPasswordClass.cssVarList;
7288
7299
 
7289
7300
  const newPassword = {
7290
- [vars$9.hostWidth]: refs.width,
7291
- [vars$9.hostMinWidth]: refs.minWidth,
7292
- [vars$9.hostDirection]: refs.direction,
7293
- [vars$9.fontSize]: refs.fontSize,
7294
- [vars$9.fontFamily]: refs.fontFamily,
7295
- [vars$9.spaceBetweenInputs]: '1em',
7296
- [vars$9.errorMessageTextColor]: refs.errorMessageTextColor,
7301
+ [vars$a.hostWidth]: refs.width,
7302
+ [vars$a.hostMinWidth]: refs.minWidth,
7303
+ [vars$a.hostDirection]: refs.direction,
7304
+ [vars$a.fontSize]: refs.fontSize,
7305
+ [vars$a.fontFamily]: refs.fontFamily,
7306
+ [vars$a.spaceBetweenInputs]: '1em',
7307
+ [vars$a.errorMessageTextColor]: refs.errorMessageTextColor,
7297
7308
 
7298
7309
  _required: {
7299
7310
  // NewPassword doesn't pass `required` attribute to its Password components.
7300
7311
  // That's why we fake the required indicator on each input.
7301
7312
  // We do that by injecting `::after` element, and populating it with requiredIndicator content.
7302
- [vars$9.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
7313
+ [vars$a.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
7303
7314
  },
7304
7315
  };
7305
7316
 
7306
7317
  var newPassword$1 = /*#__PURE__*/Object.freeze({
7307
7318
  __proto__: null,
7308
7319
  default: newPassword,
7309
- vars: vars$9
7320
+ vars: vars$a
7310
7321
  });
7311
7322
 
7312
7323
  const getFileBase64 = (fileObj) => {
@@ -7321,7 +7332,7 @@ const getFilename = (fileObj) => {
7321
7332
  return fileObj.name.replace(/^.*\\/, '');
7322
7333
  };
7323
7334
 
7324
- const componentName$a = getComponentName('upload-file');
7335
+ const componentName$c = getComponentName('upload-file');
7325
7336
 
7326
7337
  const observedAttributes$1 = [
7327
7338
  'title',
@@ -7336,7 +7347,7 @@ const observedAttributes$1 = [
7336
7347
  'icon',
7337
7348
  ];
7338
7349
 
7339
- const BaseInputClass = createBaseInputClass({ componentName: componentName$a, baseSelector: ':host > div' });
7350
+ const BaseInputClass = createBaseInputClass({ componentName: componentName$c, baseSelector: ':host > div' });
7340
7351
 
7341
7352
  class RawUploadFile extends BaseInputClass {
7342
7353
  static get observedAttributes() {
@@ -7551,77 +7562,77 @@ const UploadFileClass = compose(
7551
7562
  componentNameValidationMixin
7552
7563
  )(RawUploadFile);
7553
7564
 
7554
- const vars$8 = UploadFileClass.cssVarList;
7565
+ const vars$9 = UploadFileClass.cssVarList;
7555
7566
 
7556
7567
  const uploadFile = {
7557
- [vars$8.hostDirection]: refs.direction,
7558
- [vars$8.labelTextColor]: refs.labelTextColor,
7559
- [vars$8.fontFamily]: refs.fontFamily,
7568
+ [vars$9.hostDirection]: refs.direction,
7569
+ [vars$9.labelTextColor]: refs.labelTextColor,
7570
+ [vars$9.fontFamily]: refs.fontFamily,
7560
7571
 
7561
- [vars$8.iconSize]: '2em',
7572
+ [vars$9.iconSize]: '2em',
7562
7573
 
7563
- [vars$8.hostPadding]: '0.75em',
7564
- [vars$8.gap]: '0.5em',
7574
+ [vars$9.hostPadding]: '0.75em',
7575
+ [vars$9.gap]: '0.5em',
7565
7576
 
7566
- [vars$8.fontSize]: '16px',
7567
- [vars$8.titleFontWeight]: '500',
7568
- [vars$8.lineHeight]: '1em',
7577
+ [vars$9.fontSize]: '16px',
7578
+ [vars$9.titleFontWeight]: '500',
7579
+ [vars$9.lineHeight]: '1em',
7569
7580
 
7570
- [vars$8.borderWidth]: refs.borderWidth,
7571
- [vars$8.borderColor]: refs.borderColor,
7572
- [vars$8.borderRadius]: refs.borderRadius,
7573
- [vars$8.borderStyle]: 'dashed',
7581
+ [vars$9.borderWidth]: refs.borderWidth,
7582
+ [vars$9.borderColor]: refs.borderColor,
7583
+ [vars$9.borderRadius]: refs.borderRadius,
7584
+ [vars$9.borderStyle]: 'dashed',
7574
7585
 
7575
7586
  _required: {
7576
- [vars$8.requiredIndicator]: refs.requiredIndicator,
7587
+ [vars$9.requiredIndicator]: refs.requiredIndicator,
7577
7588
  },
7578
7589
 
7579
7590
  size: {
7580
7591
  xs: {
7581
- [vars$8.hostHeight]: '196px',
7582
- [vars$8.hostWidth]: '200px',
7583
- [vars$8.titleFontSize]: '0.875em',
7584
- [vars$8.descriptionFontSize]: '0.875em',
7585
- [vars$8.lineHeight]: '1.25em',
7592
+ [vars$9.hostHeight]: '196px',
7593
+ [vars$9.hostWidth]: '200px',
7594
+ [vars$9.titleFontSize]: '0.875em',
7595
+ [vars$9.descriptionFontSize]: '0.875em',
7596
+ [vars$9.lineHeight]: '1.25em',
7586
7597
  },
7587
7598
  sm: {
7588
- [vars$8.hostHeight]: '216px',
7589
- [vars$8.hostWidth]: '230px',
7590
- [vars$8.titleFontSize]: '1em',
7591
- [vars$8.descriptionFontSize]: '0.875em',
7592
- [vars$8.lineHeight]: '1.25em',
7599
+ [vars$9.hostHeight]: '216px',
7600
+ [vars$9.hostWidth]: '230px',
7601
+ [vars$9.titleFontSize]: '1em',
7602
+ [vars$9.descriptionFontSize]: '0.875em',
7603
+ [vars$9.lineHeight]: '1.25em',
7593
7604
  },
7594
7605
  md: {
7595
- [vars$8.hostHeight]: '256px',
7596
- [vars$8.hostWidth]: '312px',
7597
- [vars$8.titleFontSize]: '1.125em',
7598
- [vars$8.descriptionFontSize]: '1em',
7599
- [vars$8.lineHeight]: '1.5em',
7606
+ [vars$9.hostHeight]: '256px',
7607
+ [vars$9.hostWidth]: '312px',
7608
+ [vars$9.titleFontSize]: '1.125em',
7609
+ [vars$9.descriptionFontSize]: '1em',
7610
+ [vars$9.lineHeight]: '1.5em',
7600
7611
  },
7601
7612
  lg: {
7602
- [vars$8.hostHeight]: '280px',
7603
- [vars$8.hostWidth]: '336px',
7604
- [vars$8.titleFontSize]: '1.125em',
7605
- [vars$8.descriptionFontSize]: '1.125em',
7606
- [vars$8.lineHeight]: '1.75em',
7613
+ [vars$9.hostHeight]: '280px',
7614
+ [vars$9.hostWidth]: '336px',
7615
+ [vars$9.titleFontSize]: '1.125em',
7616
+ [vars$9.descriptionFontSize]: '1.125em',
7617
+ [vars$9.lineHeight]: '1.75em',
7607
7618
  },
7608
7619
  },
7609
7620
 
7610
7621
  _fullWidth: {
7611
- [vars$8.hostWidth]: refs.width,
7622
+ [vars$9.hostWidth]: refs.width,
7612
7623
  },
7613
7624
  };
7614
7625
 
7615
7626
  var uploadFile$1 = /*#__PURE__*/Object.freeze({
7616
7627
  __proto__: null,
7617
7628
  default: uploadFile,
7618
- vars: vars$8
7629
+ vars: vars$9
7619
7630
  });
7620
7631
 
7621
- const componentName$9 = getComponentName('button-selection-group-item');
7632
+ const componentName$b = getComponentName('button-selection-group-item');
7622
7633
 
7623
7634
  class RawSelectItem extends createBaseClass({
7624
- componentName: componentName$9,
7635
+ componentName: componentName$b,
7625
7636
  baseSelector: ':host > descope-button',
7626
7637
  }) {
7627
7638
  get size() {
@@ -7721,73 +7732,138 @@ const ButtonSelectionGroupItemClass = compose(
7721
7732
 
7722
7733
  const globalRefs$6 = getThemeRefs(globals);
7723
7734
 
7724
- const vars$7 = ButtonSelectionGroupItemClass.cssVarList;
7735
+ const vars$8 = ButtonSelectionGroupItemClass.cssVarList;
7725
7736
 
7726
7737
  const buttonSelectionGroupItem = {
7727
- [vars$7.hostDirection]: 'inherit',
7728
- [vars$7.backgroundColor]: globalRefs$6.colors.surface.light,
7729
- [vars$7.labelTextColor]: globalRefs$6.colors.surface.contrast,
7730
- [vars$7.borderColor]: globalRefs$6.colors.surface.main,
7731
- [vars$7.borderStyle]: 'solid',
7732
- [vars$7.borderRadius]: globalRefs$6.radius.sm,
7738
+ [vars$8.hostDirection]: 'inherit',
7739
+ [vars$8.backgroundColor]: globalRefs$6.colors.surface.light,
7740
+ [vars$8.labelTextColor]: globalRefs$6.colors.surface.contrast,
7741
+ [vars$8.borderColor]: globalRefs$6.colors.surface.main,
7742
+ [vars$8.borderStyle]: 'solid',
7743
+ [vars$8.borderRadius]: globalRefs$6.radius.sm,
7733
7744
 
7734
7745
  _hover: {
7735
- [vars$7.backgroundColor]: '#f4f5f5', // can we take it from the palette?
7746
+ [vars$8.backgroundColor]: '#f4f5f5', // can we take it from the palette?
7736
7747
  },
7737
7748
 
7738
7749
  _selected: {
7739
- [vars$7.borderColor]: globalRefs$6.colors.surface.contrast,
7740
- [vars$7.backgroundColor]: globalRefs$6.colors.surface.contrast,
7741
- [vars$7.labelTextColor]: globalRefs$6.colors.surface.light,
7750
+ [vars$8.borderColor]: globalRefs$6.colors.surface.contrast,
7751
+ [vars$8.backgroundColor]: globalRefs$6.colors.surface.contrast,
7752
+ [vars$8.labelTextColor]: globalRefs$6.colors.surface.light,
7742
7753
  },
7743
7754
  };
7744
7755
 
7745
7756
  var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
7746
7757
  __proto__: null,
7747
7758
  default: buttonSelectionGroupItem,
7748
- vars: vars$7
7759
+ vars: vars$8
7749
7760
  });
7750
7761
 
7751
- const componentName$8 = getComponentName('button-selection-group-internal');
7762
+ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
7763
+ class BaseButtonSelectionGroupInternalClass extends createBaseInputClass({
7764
+ componentName,
7765
+ baseSelector: 'slot',
7766
+ }) {
7767
+ constructor() {
7768
+ super();
7769
+
7770
+ this.innerHTML = `
7771
+ <style>
7772
+ slot {
7773
+ box-sizing: border-box;
7774
+ width: 100%;
7775
+ display: flex;
7776
+ flex-wrap: wrap;
7777
+ }
7778
+ </style>
7779
+ <slot part="wrapper"></slot>
7780
+ `;
7781
+ }
7752
7782
 
7753
- class ButtonSelectionGroupInternalClass extends createBaseInputClass({
7754
- componentName: componentName$8,
7755
- baseSelector: 'slot',
7756
- }) {
7757
- constructor() {
7758
- super();
7783
+ dispatchChange = createDispatchEvent.bind(this, 'change');
7759
7784
 
7760
- this.innerHTML = `
7761
- <style>
7762
- slot {
7763
- box-sizing: border-box;
7764
- width: 100%;
7765
- display: flex;
7766
- flex-wrap: wrap;
7785
+ get items() {
7786
+ return this.querySelector('slot').assignedElements();
7787
+ }
7788
+
7789
+ get isReadonly() {
7790
+ return this.getAttribute('readonly') === 'true';
7767
7791
  }
7768
- </style>
7769
- <slot part="wrapper"></slot>
7770
- `;
7771
- }
7772
7792
 
7773
- #dispatchChange = createDispatchEvent.bind(this, 'change');
7793
+ get size() {
7794
+ return this.getAttribute('size') || 'md';
7795
+ }
7774
7796
 
7775
- get items() {
7776
- return this.querySelector('slot').assignedElements();
7777
- }
7797
+ // eslint-disable-next-line getter-return, class-methods-use-this
7798
+ get value() {
7799
+ // eslint-disable-next-line no-console
7800
+ console.warn('get value', 'is not implemented');
7801
+ }
7802
+
7803
+ // eslint-disable-next-line class-methods-use-this
7804
+ set value(value) {
7805
+ // eslint-disable-next-line no-console
7806
+ console.warn('set value', 'is not implemented');
7807
+ }
7808
+
7809
+ onSizeChange() {
7810
+ this.items.forEach((item) => {
7811
+ item.setAttribute('size', this.size);
7812
+ });
7813
+ }
7814
+
7815
+ onReadOnlyChange() {
7816
+ this.querySelector('slot').toggleAttribute('inert', this.isReadonly);
7817
+ }
7818
+
7819
+ // eslint-disable-next-line class-methods-use-this
7820
+ getValidity() {
7821
+ // eslint-disable-next-line no-console
7822
+ console.warn('getValidity', 'is not implemented');
7823
+ }
7824
+
7825
+ onObservedAttributeChange(attrs) {
7826
+ attrs.forEach((attr) => {
7827
+ switch (attr) {
7828
+ case 'size':
7829
+ this.onSizeChange();
7830
+ break;
7831
+ case 'readonly':
7832
+ this.onReadOnlyChange();
7833
+ break;
7834
+ }
7835
+ });
7836
+ }
7837
+
7838
+ init() {
7839
+ // we are adding listeners before calling to super because it's stopping the events
7840
+ this.addEventListener('focus', (e) => {
7841
+ // we want to ignore focus events we are dispatching
7842
+ if (e.isTrusted) {
7843
+ this.items[0]?.focus();
7844
+ }
7845
+ });
7778
7846
 
7779
- get isReadonly() {
7780
- return this.getAttribute('readonly') === 'true';
7847
+ super.init?.();
7848
+
7849
+ observeAttributes(this, this.onObservedAttributeChange.bind(this), {
7850
+ includeAttrs: ['size', 'readonly'],
7851
+ });
7852
+ }
7781
7853
  }
7782
7854
 
7855
+ return BaseButtonSelectionGroupInternalClass;
7856
+ };
7857
+
7858
+ const componentName$a = getComponentName('button-selection-group-internal');
7859
+
7860
+ class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
7861
+ componentName$a
7862
+ ) {
7783
7863
  getSelectedNode() {
7784
7864
  return this.items.find((item) => item.hasAttribute('selected'));
7785
7865
  }
7786
7866
 
7787
- get size() {
7788
- return this.getAttribute('size') || 'md';
7789
- }
7790
-
7791
7867
  get allowDeselect() {
7792
7868
  return this.getAttribute('allow-deselect') === 'true';
7793
7869
  }
@@ -7803,7 +7879,7 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
7803
7879
  } else {
7804
7880
  this.setSelected(e.target);
7805
7881
  }
7806
- this.#dispatchChange();
7882
+ this.dispatchChange();
7807
7883
  }
7808
7884
  }
7809
7885
 
@@ -7814,15 +7890,6 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
7814
7890
  }
7815
7891
  }
7816
7892
 
7817
- get value() {
7818
- return this.getSelectedNode()?.value || '';
7819
- }
7820
-
7821
- set value(value) {
7822
- const node = this.items.find((child) => child.value === value);
7823
- this.setSelected(node);
7824
- }
7825
-
7826
7893
  get defaultValue() {
7827
7894
  return this.getAttribute('default-value');
7828
7895
  }
@@ -7837,14 +7904,13 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
7837
7904
  });
7838
7905
  }
7839
7906
 
7840
- onSizeChange() {
7841
- this.items.forEach((item) => {
7842
- item.setAttribute('size', this.size);
7843
- });
7907
+ get value() {
7908
+ return this.getSelectedNode()?.value || '';
7844
7909
  }
7845
7910
 
7846
- onReadOnlyChange() {
7847
- this.querySelector('slot').toggleAttribute('inert', this.isReadonly);
7911
+ set value(value) {
7912
+ const node = this.items.find((child) => child.value === value);
7913
+ this.setSelected(node);
7848
7914
  }
7849
7915
 
7850
7916
  getValidity() {
@@ -7855,42 +7921,16 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
7855
7921
  return {};
7856
7922
  }
7857
7923
 
7858
- onObservedAttributeChange(attrs) {
7859
- attrs.forEach((attr) => {
7860
- switch (attr) {
7861
- case 'size':
7862
- this.onSizeChange();
7863
- break;
7864
- case 'readonly':
7865
- this.onReadOnlyChange();
7866
- break;
7867
- }
7868
- });
7869
- }
7870
-
7871
7924
  init() {
7872
- // we are adding listeners before calling to super because it's stopping the events
7873
- this.addEventListener('focus', (e) => {
7874
- // we want to ignore focus events we are dispatching
7875
- if (e.isTrusted) {
7876
- this.items[0]?.focus();
7877
- }
7878
- });
7925
+ super.init();
7879
7926
 
7880
- super.init?.();
7881
7927
  this.setDefaultValue();
7882
7928
 
7883
- observeAttributes(this, this.onObservedAttributeChange.bind(this), {
7884
- includeAttrs: ['size', 'readonly'],
7885
- });
7886
-
7887
7929
  this.querySelector('slot').addEventListener('click', this.onClick.bind(this));
7888
7930
  }
7889
7931
  }
7890
7932
 
7891
- const componentName$7 = getComponentName('button-selection-group');
7892
-
7893
- const customMixin$1 = (superclass) =>
7933
+ const buttonSelectionGroupBaseMixin = (superclass) =>
7894
7934
  class ButtonSelectionGroupMixinClass extends superclass {
7895
7935
  // eslint-disable-next-line class-methods-use-this
7896
7936
  #renderItem = ({ value, label }) =>
@@ -7960,25 +8000,6 @@ const customMixin$1 = (superclass) =>
7960
8000
 
7961
8001
  init() {
7962
8002
  super.init?.();
7963
- const template = document.createElement('template');
7964
-
7965
- template.innerHTML = `
7966
- <${componentName$8}
7967
- name="button-selection-group"
7968
- slot="input"
7969
- tabindex="-1"
7970
- >
7971
- <slot></slot>
7972
- </${componentName$8}>
7973
- `;
7974
-
7975
- this.baseElement.appendChild(template.content.cloneNode(true));
7976
-
7977
- this.inputElement = this.shadowRoot.querySelector(componentName$8);
7978
-
7979
- forwardAttrs(this, this.inputElement, {
7980
- includeAttrs: ['size', 'default-value', 'allow-deselect'],
7981
- });
7982
8003
 
7983
8004
  this.renderItems();
7984
8005
 
@@ -7997,34 +8018,24 @@ const { host: host$2, label: label$1, requiredIndicator: requiredIndicator$1, in
7997
8018
  host: { selector: () => ':host' },
7998
8019
  label: { selector: '::part(label)' },
7999
8020
  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
8000
- internalWrapper: { selector: 'descope-button-selection-group-internal slot' },
8021
+ internalWrapper: { selector: () => ':host [part="internal-component"] slot' },
8001
8022
  errorMessage: { selector: '::part(error-message)' },
8002
8023
  };
8003
8024
 
8004
- const ButtonSelectionGroupClass = compose(
8005
- createStyleMixin({
8006
- mappings: {
8007
- hostWidth: { ...host$2, property: 'width' },
8008
- hostDirection: { ...host$2, property: 'direction' },
8009
- fontFamily: host$2,
8010
- labelTextColor: [
8011
- { ...label$1, property: 'color' },
8012
- { ...requiredIndicator$1, property: 'color' },
8013
- ],
8014
- labelRequiredIndicator: { ...requiredIndicator$1, property: 'content' },
8015
- errorMessageTextColor: { ...errorMessage$1, property: 'color' },
8016
- itemsSpacing: { ...internalWrapper, property: 'gap' },
8017
- },
8018
- }),
8019
- draggableMixin,
8020
- composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
8021
- componentNameValidationMixin,
8022
- customMixin$1
8023
- )(
8024
- createProxy({
8025
- slots: [],
8026
- wrappedEleName: 'vaadin-text-field',
8027
- style: () => `
8025
+ const buttonSelectionGroupMappings = {
8026
+ hostWidth: { ...host$2, property: 'width' },
8027
+ hostDirection: { ...host$2, property: 'direction' },
8028
+ fontFamily: host$2,
8029
+ labelTextColor: [
8030
+ { ...label$1, property: 'color' },
8031
+ { ...requiredIndicator$1, property: 'color' },
8032
+ ],
8033
+ labelRequiredIndicator: { ...requiredIndicator$1, property: 'content' },
8034
+ errorMessageTextColor: { ...errorMessage$1, property: 'color' },
8035
+ itemsSpacing: { ...internalWrapper, property: 'gap' },
8036
+ };
8037
+
8038
+ const buttonSelectionGroupStyles = `
8028
8039
  :host {
8029
8040
  display: inline-flex;
8030
8041
  max-width: 100%;
@@ -8037,7 +8048,7 @@ const ButtonSelectionGroupClass = compose(
8037
8048
  background-color: transparent;
8038
8049
  }
8039
8050
 
8040
- descope-button-selection-group-internal {
8051
+ [part="internal-component"] {
8041
8052
  -webkit-mask-image: none;
8042
8053
  padding: 0;
8043
8054
  width: 100%;
@@ -8077,28 +8088,245 @@ const ButtonSelectionGroupClass = compose(
8077
8088
 
8078
8089
  ${resetInputLabelPosition('vaadin-text-field')}
8079
8090
  ${resetInputCursor('vaadin-text-field')}
8080
- `,
8091
+ `;
8092
+
8093
+ const componentName$9 = getComponentName('button-selection-group');
8094
+
8095
+ const buttonSelectionGroupMixin = (superclass) =>
8096
+ class ButtonMultiSelectionGroupMixinClass extends superclass {
8097
+ init() {
8098
+ super.init?.();
8099
+ const template = document.createElement('template');
8100
+
8101
+ template.innerHTML = `
8102
+ <${componentName$a}
8103
+ name="button-selection-group"
8104
+ slot="input"
8105
+ tabindex="-1"
8106
+ part="internal-component"
8107
+ >
8108
+ <slot></slot>
8109
+ </${componentName$a}>
8110
+ `;
8111
+
8112
+ this.baseElement.appendChild(template.content.cloneNode(true));
8113
+
8114
+ this.inputElement = this.shadowRoot.querySelector(componentName$a);
8115
+
8116
+ forwardAttrs(this, this.inputElement, {
8117
+ includeAttrs: ['size', 'default-value', 'allow-deselect'],
8118
+ });
8119
+ }
8120
+ };
8121
+
8122
+ const ButtonSelectionGroupClass = compose(
8123
+ createStyleMixin({
8124
+ mappings: {
8125
+ ...buttonSelectionGroupMappings,
8126
+ },
8127
+ }),
8128
+ draggableMixin,
8129
+ composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
8130
+ componentNameValidationMixin,
8131
+ buttonSelectionGroupBaseMixin,
8132
+ buttonSelectionGroupMixin
8133
+ )(
8134
+ createProxy({
8135
+ slots: [],
8136
+ wrappedEleName: 'vaadin-text-field',
8137
+ style: () => buttonSelectionGroupStyles,
8081
8138
  excludeAttrsSync: ['tabindex'],
8082
- componentName: componentName$7,
8139
+ componentName: componentName$9,
8083
8140
  })
8084
8141
  );
8085
8142
 
8086
8143
  const globalRefs$5 = getThemeRefs(globals);
8087
- const vars$6 = ButtonSelectionGroupClass.cssVarList;
8144
+
8145
+ const createBaseButtonSelectionGroupMappings = (vars) => ({
8146
+ [vars.hostDirection]: refs.direction,
8147
+ [vars.fontFamily]: refs.fontFamily,
8148
+ [vars.labelTextColor]: refs.labelTextColor,
8149
+ [vars.labelRequiredIndicator]: refs.requiredIndicator,
8150
+ [vars.errorMessageTextColor]: refs.errorMessageTextColor,
8151
+ [vars.itemsSpacing]: globalRefs$5.spacing.sm,
8152
+ [vars.hostWidth]: refs.width,
8153
+ });
8154
+
8155
+ const vars$7 = ButtonSelectionGroupClass.cssVarList;
8088
8156
 
8089
8157
  const buttonSelectionGroup = {
8090
- [vars$6.hostDirection]: refs.direction,
8091
- [vars$6.fontFamily]: refs.fontFamily,
8092
- [vars$6.labelTextColor]: refs.labelTextColor,
8093
- [vars$6.labelRequiredIndicator]: refs.requiredIndicator,
8094
- [vars$6.errorMessageTextColor]: refs.errorMessageTextColor,
8095
- [vars$6.itemsSpacing]: globalRefs$5.spacing.sm,
8096
- [vars$6.hostWidth]: refs.width,
8158
+ ...createBaseButtonSelectionGroupMappings(vars$7),
8097
8159
  };
8098
8160
 
8099
8161
  var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
8100
8162
  __proto__: null,
8101
8163
  default: buttonSelectionGroup,
8164
+ vars: vars$7
8165
+ });
8166
+
8167
+ const componentName$8 = getComponentName('button-multi-selection-group-internal');
8168
+
8169
+ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
8170
+ componentName$8
8171
+ ) {
8172
+ #getSelectedNodes() {
8173
+ return this.items.filter((item) => item.hasAttribute('selected'));
8174
+ }
8175
+
8176
+ onClick(e) {
8177
+ if (e.target !== e.currentTarget) {
8178
+ if (this.#getSelectedNodes().includes(e.target)) {
8179
+ e.target.removeAttribute('selected');
8180
+ } else {
8181
+ e.target.setAttribute('selected', 'true');
8182
+ }
8183
+ this.dispatchChange();
8184
+ }
8185
+ }
8186
+
8187
+ get value() {
8188
+ return this.#getSelectedNodes().map((node) => node.value);
8189
+ }
8190
+
8191
+ set value(values) {
8192
+ this.items.forEach((item) => {
8193
+ if (values.includes(item.value)) {
8194
+ item.setAttribute('selected', 'true');
8195
+ }
8196
+ });
8197
+ }
8198
+
8199
+ get minItemsSelection() {
8200
+ return parseInt(this.getAttribute('min-items-selection'), 10) || 0;
8201
+ }
8202
+
8203
+ get maxItemsSelection() {
8204
+ return parseInt(this.getAttribute('max-items-selection'), 10) || 0;
8205
+ }
8206
+
8207
+ // eslint-disable-next-line class-methods-use-this
8208
+ #isValidDataType(data) {
8209
+ const isValid = Array.isArray(data);
8210
+ if (!isValid) {
8211
+ // eslint-disable-next-line no-console
8212
+ console.error('default-values must be an array, received:', data);
8213
+ }
8214
+
8215
+ return isValid;
8216
+ }
8217
+
8218
+ get defaultValues() {
8219
+ const defaultValuesAttr = this.getAttribute('default-values');
8220
+ if (defaultValuesAttr) {
8221
+ try {
8222
+ const defaultValues = JSON.parse(defaultValuesAttr);
8223
+ if (this.#isValidDataType(defaultValues)) {
8224
+ return defaultValues;
8225
+ }
8226
+ } catch (e) {
8227
+ // eslint-disable-next-line no-console
8228
+ console.error('could not parse data string from attribute "default-values" -', e.message);
8229
+ }
8230
+ }
8231
+ return [];
8232
+ }
8233
+
8234
+ setDefaultValues() {
8235
+ // we want to defer this action until all attributes are synced
8236
+ setTimeout(() => {
8237
+ if (this.defaultValues) {
8238
+ this.value = this.defaultValues;
8239
+ this.setCustomValidity();
8240
+ }
8241
+ });
8242
+ }
8243
+
8244
+ getValidity() {
8245
+ if (this.isRequired && !this.value.length) {
8246
+ return { valueMissing: true };
8247
+ }
8248
+ // If the field is not required, no minimum selection can be set
8249
+ if (this.isRequired && this.minItemsSelection && this.value.length < this.minItemsSelection) {
8250
+ return {
8251
+ rangeUnderflow: true,
8252
+ };
8253
+ }
8254
+ if (this.maxItemsSelection && this.value.length > this.maxItemsSelection) {
8255
+ return {
8256
+ rangeOverflow: true,
8257
+ };
8258
+ }
8259
+ return {};
8260
+ }
8261
+
8262
+ init() {
8263
+ super.init();
8264
+
8265
+ this.setDefaultValues();
8266
+
8267
+ this.querySelector('slot').addEventListener('click', this.onClick.bind(this));
8268
+ }
8269
+ }
8270
+
8271
+ const componentName$7 = getComponentName('button-multi-selection-group');
8272
+
8273
+ const buttonMultiSelectionGroupMixin = (superclass) =>
8274
+ class ButtonMultiSelectionGroupMixinClass extends superclass {
8275
+ init() {
8276
+ super.init?.();
8277
+ const template = document.createElement('template');
8278
+
8279
+ template.innerHTML = `
8280
+ <${componentName$8}
8281
+ name="button-selection-group"
8282
+ slot="input"
8283
+ tabindex="-1"
8284
+ part="internal-component"
8285
+ >
8286
+ <slot></slot>
8287
+ </${componentName$8}>
8288
+ `;
8289
+
8290
+ this.baseElement.appendChild(template.content.cloneNode(true));
8291
+
8292
+ this.inputElement = this.shadowRoot.querySelector(componentName$8);
8293
+
8294
+ forwardAttrs(this, this.inputElement, {
8295
+ includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
8296
+ });
8297
+ }
8298
+ };
8299
+
8300
+ const ButtonMultiSelectionGroupClass = compose(
8301
+ createStyleMixin({
8302
+ mappings: {
8303
+ ...buttonSelectionGroupMappings,
8304
+ },
8305
+ }),
8306
+ draggableMixin,
8307
+ composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
8308
+ componentNameValidationMixin,
8309
+ buttonSelectionGroupBaseMixin,
8310
+ buttonMultiSelectionGroupMixin
8311
+ )(
8312
+ createProxy({
8313
+ slots: [],
8314
+ wrappedEleName: 'vaadin-text-field',
8315
+ style: () => buttonSelectionGroupStyles,
8316
+ excludeAttrsSync: ['tabindex'],
8317
+ componentName: componentName$7,
8318
+ })
8319
+ );
8320
+
8321
+ const vars$6 = ButtonMultiSelectionGroupClass.cssVarList;
8322
+
8323
+ const buttonMultiSelectionGroup = {
8324
+ ...createBaseButtonSelectionGroupMappings(vars$6),
8325
+ };
8326
+
8327
+ var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
8328
+ __proto__: null,
8329
+ default: buttonMultiSelectionGroup,
8102
8330
  vars: vars$6
8103
8331
  });
8104
8332
 
@@ -8678,7 +8906,7 @@ var notificationCard = /*#__PURE__*/Object.freeze({
8678
8906
 
8679
8907
  const componentName$3 = getComponentName('multi-select-combo-box');
8680
8908
 
8681
- const MultiSelectComboBoxMixin = (superclass) =>
8909
+ const multiSelectComboBoxMixin = (superclass) =>
8682
8910
  class MultiSelectComboBoxMixinClass extends superclass {
8683
8911
  // eslint-disable-next-line class-methods-use-this
8684
8912
  #renderItem = ({ displayName, value, label }) => {
@@ -9101,7 +9329,7 @@ const MultiSelectComboBoxClass = compose(
9101
9329
  }),
9102
9330
  composedProxyInputMixin({ proxyProps: ['selectionStart'], inputEvent: 'selected-items-changed' }),
9103
9331
  componentNameValidationMixin,
9104
- MultiSelectComboBoxMixin
9332
+ multiSelectComboBoxMixin
9105
9333
  )(
9106
9334
  createProxy({
9107
9335
  slots: ['', 'prefix'],
@@ -9374,6 +9602,7 @@ const components = {
9374
9602
  uploadFile: uploadFile$1,
9375
9603
  buttonSelectionGroupItem: buttonSelectionGroupItem$1,
9376
9604
  buttonSelectionGroup: buttonSelectionGroup$1,
9605
+ buttonMultiSelectionGroup: buttonMultiSelectionGroup$1,
9377
9606
  modal: modal$1,
9378
9607
  grid: grid$1,
9379
9608
  notificationCard,
@@ -9391,7 +9620,7 @@ const vars = Object.keys(components).reduce(
9391
9620
  );
9392
9621
 
9393
9622
  const defaultTheme = { globals, components: theme };
9394
- const themeVars = { globals: vars$w, components: vars };
9623
+ const themeVars = { globals: vars$x, components: vars };
9395
9624
 
9396
9625
  const componentName$1 = getComponentName('recaptcha');
9397
9626
 
@@ -9648,6 +9877,7 @@ const NotificationClass = compose(
9648
9877
 
9649
9878
  exports.BadgeClass = BadgeClass;
9650
9879
  exports.ButtonClass = ButtonClass;
9880
+ exports.ButtonMultiSelectionGroupClass = ButtonMultiSelectionGroupClass;
9651
9881
  exports.ButtonSelectionGroupClass = ButtonSelectionGroupClass;
9652
9882
  exports.ButtonSelectionGroupItemClass = ButtonSelectionGroupItemClass;
9653
9883
  exports.CheckboxClass = CheckboxClass;