@descope/web-components-ui 1.0.245 → 1.0.247

Sign up to get free protection for your applications and to get access to all the features.
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
package/dist/cjs/index.cjs.js CHANGED
@@ -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;