@descope/web-components-ui 1.0.387 → 1.0.388

Sign up to get free protection for your applications and to get access to all the features.
Files changed (24) hide show
  1. package/dist/cjs/index.cjs.js +1280 -1178
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +1258 -1155
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/umd/DescopeDev.js +1 -1
  6. package/dist/umd/boolean-fields-descope-checkbox-index-js.js +1 -1
  7. package/dist/umd/boolean-fields-descope-switch-toggle-index-js.js +1 -1
  8. package/dist/umd/descope-apps-list-index-js.js +1 -1
  9. package/dist/umd/descope-grid-descope-grid-selection-column-index-js.js +1 -1
  10. package/dist/umd/descope-grid-index-js.js +1 -1
  11. package/dist/umd/descope-scopes-list-index-js.js +2 -0
  12. package/dist/umd/descope-scopes-list-index-js.js.LICENSE.txt +5 -0
  13. package/dist/umd/index.js +1 -1
  14. package/package.json +1 -1
  15. package/src/components/boolean-fields/commonStyles.js +1 -2
  16. package/src/components/boolean-fields/descope-checkbox/CheckboxClass.js +6 -0
  17. package/src/components/descope-scopes-list/ScopesListClass.js +111 -0
  18. package/src/components/descope-scopes-list/index.js +7 -0
  19. package/src/index.cjs.js +1 -0
  20. package/src/index.js +1 -0
  21. package/src/mixins/createDynamicDataMixin.js +9 -28
  22. package/src/theme/components/checkbox.js +1 -8
  23. package/src/theme/components/index.js +2 -0
  24. package/src/theme/components/scopesList.js +15 -0
package/dist/cjs/index.cjs.js CHANGED
@@ -643,7 +643,7 @@ const globals = {
643
643
  fonts,
644
644
  direction,
645
645
  };
646
- const vars$O = getThemeVars(globals);
646
+ const vars$P = getThemeVars(globals);
647
647
 
648
648
  const createCssVar = (varName, fallback) => `var(${varName}${fallback ? `, ${fallback}` : ''})`;
649
649
 
@@ -2935,9 +2935,9 @@ const createIcon = async (src) => {
2935
2935
 
2936
2936
  /* eslint-disable no-use-before-define */
2937
2937
 
2938
- const componentName$X = getComponentName('icon');
2938
+ const componentName$Y = getComponentName('icon');
2939
2939
 
2940
- class RawIcon extends createBaseClass({ componentName: componentName$X, baseSelector: 'slot' }) {
2940
+ class RawIcon extends createBaseClass({ componentName: componentName$Y, baseSelector: 'slot' }) {
2941
2941
  static get observedAttributes() {
2942
2942
  return ['src'];
2943
2943
  }
@@ -3022,7 +3022,7 @@ const clickableMixin = (superclass) =>
3022
3022
  }
3023
3023
  };
3024
3024
 
3025
- const componentName$W = getComponentName('button');
3025
+ const componentName$X = getComponentName('button');
3026
3026
 
3027
3027
  const resetStyles = `
3028
3028
  :host {
@@ -3138,7 +3138,7 @@ const ButtonClass = compose(
3138
3138
  }
3139
3139
  `,
3140
3140
  excludeAttrsSync: ['tabindex'],
3141
- componentName: componentName$W,
3141
+ componentName: componentName$X,
3142
3142
  })
3143
3143
  );
3144
3144
 
@@ -3186,7 +3186,7 @@ const mode = {
3186
3186
  surface: globalRefs$x.colors.surface,
3187
3187
  };
3188
3188
 
3189
- const [helperTheme$4, helperRefs$4, helperVars$4] = createHelperVars({ mode }, componentName$W);
3189
+ const [helperTheme$4, helperRefs$4, helperVars$4] = createHelperVars({ mode }, componentName$X);
3190
3190
 
3191
3191
  const button = {
3192
3192
  ...helperTheme$4,
@@ -3298,7 +3298,7 @@ const button = {
3298
3298
  },
3299
3299
  };
3300
3300
 
3301
- const vars$N = {
3301
+ const vars$O = {
3302
3302
  ...compVars$6,
3303
3303
  ...helperVars$4,
3304
3304
  };
@@ -3306,7 +3306,7 @@ const vars$N = {
3306
3306
  var button$1 = /*#__PURE__*/Object.freeze({
3307
3307
  __proto__: null,
3308
3308
  default: button,
3309
- vars: vars$N
3309
+ vars: vars$O
3310
3310
  });
3311
3311
 
3312
3312
  const {
@@ -3599,7 +3599,7 @@ const inputFloatingLabelStyle = () => {
3599
3599
  `;
3600
3600
  };
3601
3601
 
3602
- const componentName$V = getComponentName('text-field');
3602
+ const componentName$W = getComponentName('text-field');
3603
3603
 
3604
3604
  const observedAttrs$2 = ['type', 'label-type', 'copy-to-clipboard'];
3605
3605
 
@@ -3721,14 +3721,14 @@ const TextFieldClass = compose(
3721
3721
  }
3722
3722
  `,
3723
3723
  excludeAttrsSync: ['tabindex'],
3724
- componentName: componentName$V,
3724
+ componentName: componentName$W,
3725
3725
  })
3726
3726
  );
3727
3727
 
3728
- const componentName$U = getComponentName('input-wrapper');
3728
+ const componentName$V = getComponentName('input-wrapper');
3729
3729
  const globalRefs$w = getThemeRefs(globals);
3730
3730
 
3731
- const [theme$1, refs, vars$M] = createHelperVars(
3731
+ const [theme$1, refs, vars$N] = createHelperVars(
3732
3732
  {
3733
3733
  labelTextColor: globalRefs$w.colors.surface.dark,
3734
3734
  labelFontSize: '14px', // not taken from globals as it is fixed in all inputs
@@ -3840,70 +3840,70 @@ const [theme$1, refs, vars$M] = createHelperVars(
3840
3840
  backgroundColor: globalRefs$w.colors.surface.main,
3841
3841
  },
3842
3842
  },
3843
- componentName$U
3843
+ componentName$V
3844
3844
  );
3845
3845
 
3846
3846
  var inputWrapper = /*#__PURE__*/Object.freeze({
3847
3847
  __proto__: null,
3848
3848
  default: theme$1,
3849
3849
  refs: refs,
3850
- vars: vars$M
3850
+ vars: vars$N
3851
3851
  });
3852
3852
 
3853
3853
  const globalRefs$v = getThemeRefs(globals);
3854
- const vars$L = TextFieldClass.cssVarList;
3854
+ const vars$M = TextFieldClass.cssVarList;
3855
3855
 
3856
3856
  const textField$1 = {
3857
- [vars$L.hostWidth]: refs.width,
3858
- [vars$L.hostMinWidth]: refs.minWidth,
3859
- [vars$L.hostDirection]: refs.direction,
3860
- [vars$L.fontSize]: refs.fontSize,
3861
- [vars$L.fontFamily]: refs.fontFamily,
3862
- [vars$L.labelFontSize]: refs.labelFontSize,
3863
- [vars$L.labelFontWeight]: refs.labelFontWeight,
3864
- [vars$L.labelTextColor]: refs.labelTextColor,
3865
- [vars$L.labelRequiredIndicator]: refs.requiredIndicator,
3866
- [vars$L.errorMessageTextColor]: refs.errorMessageTextColor,
3867
- [vars$L.inputValueTextColor]: refs.valueTextColor,
3868
- [vars$L.inputPlaceholderColor]: refs.placeholderTextColor,
3869
- [vars$L.inputBorderWidth]: refs.borderWidth,
3870
- [vars$L.inputBorderStyle]: refs.borderStyle,
3871
- [vars$L.inputBorderColor]: refs.borderColor,
3872
- [vars$L.inputBorderRadius]: refs.borderRadius,
3873
- [vars$L.inputOutlineWidth]: refs.outlineWidth,
3874
- [vars$L.inputOutlineStyle]: refs.outlineStyle,
3875
- [vars$L.inputOutlineColor]: refs.outlineColor,
3876
- [vars$L.inputOutlineOffset]: refs.outlineOffset,
3877
- [vars$L.inputBackgroundColor]: refs.backgroundColor,
3878
- [vars$L.inputHeight]: refs.inputHeight,
3879
- [vars$L.inputHorizontalPadding]: refs.horizontalPadding,
3880
- [vars$L.helperTextColor]: refs.helperTextColor,
3881
- [vars$L.textAlign]: refs.textAlign,
3857
+ [vars$M.hostWidth]: refs.width,
3858
+ [vars$M.hostMinWidth]: refs.minWidth,
3859
+ [vars$M.hostDirection]: refs.direction,
3860
+ [vars$M.fontSize]: refs.fontSize,
3861
+ [vars$M.fontFamily]: refs.fontFamily,
3862
+ [vars$M.labelFontSize]: refs.labelFontSize,
3863
+ [vars$M.labelFontWeight]: refs.labelFontWeight,
3864
+ [vars$M.labelTextColor]: refs.labelTextColor,
3865
+ [vars$M.labelRequiredIndicator]: refs.requiredIndicator,
3866
+ [vars$M.errorMessageTextColor]: refs.errorMessageTextColor,
3867
+ [vars$M.inputValueTextColor]: refs.valueTextColor,
3868
+ [vars$M.inputPlaceholderColor]: refs.placeholderTextColor,
3869
+ [vars$M.inputBorderWidth]: refs.borderWidth,
3870
+ [vars$M.inputBorderStyle]: refs.borderStyle,
3871
+ [vars$M.inputBorderColor]: refs.borderColor,
3872
+ [vars$M.inputBorderRadius]: refs.borderRadius,
3873
+ [vars$M.inputOutlineWidth]: refs.outlineWidth,
3874
+ [vars$M.inputOutlineStyle]: refs.outlineStyle,
3875
+ [vars$M.inputOutlineColor]: refs.outlineColor,
3876
+ [vars$M.inputOutlineOffset]: refs.outlineOffset,
3877
+ [vars$M.inputBackgroundColor]: refs.backgroundColor,
3878
+ [vars$M.inputHeight]: refs.inputHeight,
3879
+ [vars$M.inputHorizontalPadding]: refs.horizontalPadding,
3880
+ [vars$M.helperTextColor]: refs.helperTextColor,
3881
+ [vars$M.textAlign]: refs.textAlign,
3882
3882
  textAlign: {
3883
- right: { [vars$L.inputTextAlign]: 'right' },
3884
- left: { [vars$L.inputTextAlign]: 'left' },
3885
- center: { [vars$L.inputTextAlign]: 'center' },
3883
+ right: { [vars$M.inputTextAlign]: 'right' },
3884
+ left: { [vars$M.inputTextAlign]: 'left' },
3885
+ center: { [vars$M.inputTextAlign]: 'center' },
3886
3886
  },
3887
- [vars$L.labelPosition]: refs.labelPosition,
3888
- [vars$L.labelTopPosition]: refs.labelTopPosition,
3889
- [vars$L.labelHorizontalPosition]: refs.labelHorizontalPosition,
3890
- [vars$L.inputTransformY]: refs.inputTransformY,
3891
- [vars$L.inputTransition]: refs.inputTransition,
3892
- [vars$L.marginInlineStart]: refs.marginInlineStart,
3893
- [vars$L.placeholderOpacity]: refs.placeholderOpacity,
3894
- [vars$L.inputVerticalAlignment]: refs.inputVerticalAlignment,
3895
- [vars$L.valueInputHeight]: refs.valueInputHeight,
3896
- [vars$L.valueInputMarginBottom]: refs.valueInputMarginBottom,
3897
- [vars$L.inputIconOffset]: globalRefs$v.spacing.md,
3898
- [vars$L.inputIconSize]: refs.inputIconSize,
3899
- [vars$L.inputIconColor]: refs.placeholderTextColor,
3887
+ [vars$M.labelPosition]: refs.labelPosition,
3888
+ [vars$M.labelTopPosition]: refs.labelTopPosition,
3889
+ [vars$M.labelHorizontalPosition]: refs.labelHorizontalPosition,
3890
+ [vars$M.inputTransformY]: refs.inputTransformY,
3891
+ [vars$M.inputTransition]: refs.inputTransition,
3892
+ [vars$M.marginInlineStart]: refs.marginInlineStart,
3893
+ [vars$M.placeholderOpacity]: refs.placeholderOpacity,
3894
+ [vars$M.inputVerticalAlignment]: refs.inputVerticalAlignment,
3895
+ [vars$M.valueInputHeight]: refs.valueInputHeight,
3896
+ [vars$M.valueInputMarginBottom]: refs.valueInputMarginBottom,
3897
+ [vars$M.inputIconOffset]: globalRefs$v.spacing.md,
3898
+ [vars$M.inputIconSize]: refs.inputIconSize,
3899
+ [vars$M.inputIconColor]: refs.placeholderTextColor,
3900
3900
  };
3901
3901
 
3902
3902
  var textField$2 = /*#__PURE__*/Object.freeze({
3903
3903
  __proto__: null,
3904
3904
  default: textField$1,
3905
3905
  textField: textField$1,
3906
- vars: vars$L
3906
+ vars: vars$M
3907
3907
  });
3908
3908
 
3909
3909
  const passwordDraggableMixin = (superclass) =>
@@ -3945,7 +3945,7 @@ const passwordDraggableMixin = (superclass) =>
3945
3945
  }
3946
3946
  };
3947
3947
 
3948
- const componentName$T = getComponentName('password');
3948
+ const componentName$U = getComponentName('password');
3949
3949
 
3950
3950
  const customMixin$b = (superclass) =>
3951
3951
  class PasswordFieldMixinClass extends superclass {
@@ -4220,58 +4220,58 @@ const PasswordClass = compose(
4220
4220
  }
4221
4221
  `,
4222
4222
  excludeAttrsSync: ['tabindex'],
4223
- componentName: componentName$T,
4223
+ componentName: componentName$U,
4224
4224
  })
4225
4225
  );
4226
4226
 
4227
4227
  const globalRefs$u = getThemeRefs(globals);
4228
- const vars$K = PasswordClass.cssVarList;
4228
+ const vars$L = PasswordClass.cssVarList;
4229
4229
 
4230
4230
  const password = {
4231
- [vars$K.hostWidth]: refs.width,
4232
- [vars$K.hostMinWidth]: refs.minWidth,
4233
- [vars$K.hostDirection]: refs.direction,
4234
- [vars$K.fontSize]: refs.fontSize,
4235
- [vars$K.fontFamily]: refs.fontFamily,
4236
- [vars$K.labelFontSize]: refs.labelFontSize,
4237
- [vars$K.labelFontWeight]: refs.labelFontWeight,
4238
- [vars$K.labelTextColor]: refs.labelTextColor,
4239
- [vars$K.errorMessageTextColor]: refs.errorMessageTextColor,
4240
- [vars$K.inputHorizontalPadding]: refs.horizontalPadding,
4241
- [vars$K.inputHeight]: refs.inputHeight,
4242
- [vars$K.inputBackgroundColor]: refs.backgroundColor,
4243
- [vars$K.labelRequiredIndicator]: refs.requiredIndicator,
4244
- [vars$K.inputValueTextColor]: refs.valueTextColor,
4245
- [vars$K.inputPlaceholderTextColor]: refs.placeholderTextColor,
4246
- [vars$K.inputBorderWidth]: refs.borderWidth,
4247
- [vars$K.inputBorderStyle]: refs.borderStyle,
4248
- [vars$K.inputBorderColor]: refs.borderColor,
4249
- [vars$K.inputBorderRadius]: refs.borderRadius,
4250
- [vars$K.inputOutlineWidth]: refs.outlineWidth,
4251
- [vars$K.inputOutlineStyle]: refs.outlineStyle,
4252
- [vars$K.inputOutlineColor]: refs.outlineColor,
4253
- [vars$K.inputOutlineOffset]: refs.outlineOffset,
4254
- [vars$K.revealButtonOffset]: globalRefs$u.spacing.md,
4255
- [vars$K.revealButtonSize]: refs.toggleButtonSize,
4256
- [vars$K.revealButtonColor]: refs.placeholderTextColor,
4257
- [vars$K.labelPosition]: refs.labelPosition,
4258
- [vars$K.labelTopPosition]: refs.labelTopPosition,
4259
- [vars$K.labelHorizontalPosition]: refs.labelHorizontalPosition,
4260
- [vars$K.inputTransformY]: refs.inputTransformY,
4261
- [vars$K.inputTransition]: refs.inputTransition,
4262
- [vars$K.marginInlineStart]: refs.marginInlineStart,
4263
- [vars$K.placeholderOpacity]: refs.placeholderOpacity,
4264
- [vars$K.inputVerticalAlignment]: refs.inputVerticalAlignment,
4265
- [vars$K.valueInputHeight]: refs.valueInputHeight,
4231
+ [vars$L.hostWidth]: refs.width,
4232
+ [vars$L.hostMinWidth]: refs.minWidth,
4233
+ [vars$L.hostDirection]: refs.direction,
4234
+ [vars$L.fontSize]: refs.fontSize,
4235
+ [vars$L.fontFamily]: refs.fontFamily,
4236
+ [vars$L.labelFontSize]: refs.labelFontSize,
4237
+ [vars$L.labelFontWeight]: refs.labelFontWeight,
4238
+ [vars$L.labelTextColor]: refs.labelTextColor,
4239
+ [vars$L.errorMessageTextColor]: refs.errorMessageTextColor,
4240
+ [vars$L.inputHorizontalPadding]: refs.horizontalPadding,
4241
+ [vars$L.inputHeight]: refs.inputHeight,
4242
+ [vars$L.inputBackgroundColor]: refs.backgroundColor,
4243
+ [vars$L.labelRequiredIndicator]: refs.requiredIndicator,
4244
+ [vars$L.inputValueTextColor]: refs.valueTextColor,
4245
+ [vars$L.inputPlaceholderTextColor]: refs.placeholderTextColor,
4246
+ [vars$L.inputBorderWidth]: refs.borderWidth,
4247
+ [vars$L.inputBorderStyle]: refs.borderStyle,
4248
+ [vars$L.inputBorderColor]: refs.borderColor,
4249
+ [vars$L.inputBorderRadius]: refs.borderRadius,
4250
+ [vars$L.inputOutlineWidth]: refs.outlineWidth,
4251
+ [vars$L.inputOutlineStyle]: refs.outlineStyle,
4252
+ [vars$L.inputOutlineColor]: refs.outlineColor,
4253
+ [vars$L.inputOutlineOffset]: refs.outlineOffset,
4254
+ [vars$L.revealButtonOffset]: globalRefs$u.spacing.md,
4255
+ [vars$L.revealButtonSize]: refs.toggleButtonSize,
4256
+ [vars$L.revealButtonColor]: refs.placeholderTextColor,
4257
+ [vars$L.labelPosition]: refs.labelPosition,
4258
+ [vars$L.labelTopPosition]: refs.labelTopPosition,
4259
+ [vars$L.labelHorizontalPosition]: refs.labelHorizontalPosition,
4260
+ [vars$L.inputTransformY]: refs.inputTransformY,
4261
+ [vars$L.inputTransition]: refs.inputTransition,
4262
+ [vars$L.marginInlineStart]: refs.marginInlineStart,
4263
+ [vars$L.placeholderOpacity]: refs.placeholderOpacity,
4264
+ [vars$L.inputVerticalAlignment]: refs.inputVerticalAlignment,
4265
+ [vars$L.valueInputHeight]: refs.valueInputHeight,
4266
4266
  };
4267
4267
 
4268
4268
  var password$1 = /*#__PURE__*/Object.freeze({
4269
4269
  __proto__: null,
4270
4270
  default: password,
4271
- vars: vars$K
4271
+ vars: vars$L
4272
4272
  });
4273
4273
 
4274
- const componentName$S = getComponentName('number-field');
4274
+ const componentName$T = getComponentName('number-field');
4275
4275
 
4276
4276
  const NumberFieldClass = compose(
4277
4277
  createStyleMixin({
@@ -4305,55 +4305,55 @@ const NumberFieldClass = compose(
4305
4305
  }
4306
4306
  `,
4307
4307
  excludeAttrsSync: ['tabindex'],
4308
- componentName: componentName$S,
4308
+ componentName: componentName$T,
4309
4309
  })
4310
4310
  );
4311
4311
 
4312
- const vars$J = NumberFieldClass.cssVarList;
4312
+ const vars$K = NumberFieldClass.cssVarList;
4313
4313
 
4314
4314
  const numberField = {
4315
- [vars$J.hostWidth]: refs.width,
4316
- [vars$J.hostMinWidth]: refs.minWidth,
4317
- [vars$J.hostDirection]: refs.direction,
4318
- [vars$J.fontSize]: refs.fontSize,
4319
- [vars$J.fontFamily]: refs.fontFamily,
4320
- [vars$J.labelFontSize]: refs.labelFontSize,
4321
- [vars$J.labelFontWeight]: refs.labelFontWeight,
4322
- [vars$J.labelTextColor]: refs.labelTextColor,
4323
- [vars$J.errorMessageTextColor]: refs.errorMessageTextColor,
4324
- [vars$J.inputValueTextColor]: refs.valueTextColor,
4325
- [vars$J.inputPlaceholderColor]: refs.placeholderTextColor,
4326
- [vars$J.inputBorderWidth]: refs.borderWidth,
4327
- [vars$J.inputBorderStyle]: refs.borderStyle,
4328
- [vars$J.inputBorderColor]: refs.borderColor,
4329
- [vars$J.inputBorderRadius]: refs.borderRadius,
4330
- [vars$J.inputOutlineWidth]: refs.outlineWidth,
4331
- [vars$J.inputOutlineStyle]: refs.outlineStyle,
4332
- [vars$J.inputOutlineColor]: refs.outlineColor,
4333
- [vars$J.inputOutlineOffset]: refs.outlineOffset,
4334
- [vars$J.inputBackgroundColor]: refs.backgroundColor,
4335
- [vars$J.labelRequiredIndicator]: refs.requiredIndicator,
4336
- [vars$J.inputHorizontalPadding]: refs.horizontalPadding,
4337
- [vars$J.inputHeight]: refs.inputHeight,
4338
- [vars$J.labelPosition]: refs.labelPosition,
4339
- [vars$J.labelTopPosition]: refs.labelTopPosition,
4340
- [vars$J.labelHorizontalPosition]: refs.labelHorizontalPosition,
4341
- [vars$J.inputTransformY]: refs.inputTransformY,
4342
- [vars$J.inputTransition]: refs.inputTransition,
4343
- [vars$J.marginInlineStart]: refs.marginInlineStart,
4344
- [vars$J.placeholderOpacity]: refs.placeholderOpacity,
4345
- [vars$J.inputVerticalAlignment]: refs.inputVerticalAlignment,
4346
- [vars$J.valueInputHeight]: refs.valueInputHeight,
4347
- [vars$J.valueInputMarginBottom]: refs.valueInputMarginBottom,
4315
+ [vars$K.hostWidth]: refs.width,
4316
+ [vars$K.hostMinWidth]: refs.minWidth,
4317
+ [vars$K.hostDirection]: refs.direction,
4318
+ [vars$K.fontSize]: refs.fontSize,
4319
+ [vars$K.fontFamily]: refs.fontFamily,
4320
+ [vars$K.labelFontSize]: refs.labelFontSize,
4321
+ [vars$K.labelFontWeight]: refs.labelFontWeight,
4322
+ [vars$K.labelTextColor]: refs.labelTextColor,
4323
+ [vars$K.errorMessageTextColor]: refs.errorMessageTextColor,
4324
+ [vars$K.inputValueTextColor]: refs.valueTextColor,
4325
+ [vars$K.inputPlaceholderColor]: refs.placeholderTextColor,
4326
+ [vars$K.inputBorderWidth]: refs.borderWidth,
4327
+ [vars$K.inputBorderStyle]: refs.borderStyle,
4328
+ [vars$K.inputBorderColor]: refs.borderColor,
4329
+ [vars$K.inputBorderRadius]: refs.borderRadius,
4330
+ [vars$K.inputOutlineWidth]: refs.outlineWidth,
4331
+ [vars$K.inputOutlineStyle]: refs.outlineStyle,
4332
+ [vars$K.inputOutlineColor]: refs.outlineColor,
4333
+ [vars$K.inputOutlineOffset]: refs.outlineOffset,
4334
+ [vars$K.inputBackgroundColor]: refs.backgroundColor,
4335
+ [vars$K.labelRequiredIndicator]: refs.requiredIndicator,
4336
+ [vars$K.inputHorizontalPadding]: refs.horizontalPadding,
4337
+ [vars$K.inputHeight]: refs.inputHeight,
4338
+ [vars$K.labelPosition]: refs.labelPosition,
4339
+ [vars$K.labelTopPosition]: refs.labelTopPosition,
4340
+ [vars$K.labelHorizontalPosition]: refs.labelHorizontalPosition,
4341
+ [vars$K.inputTransformY]: refs.inputTransformY,
4342
+ [vars$K.inputTransition]: refs.inputTransition,
4343
+ [vars$K.marginInlineStart]: refs.marginInlineStart,
4344
+ [vars$K.placeholderOpacity]: refs.placeholderOpacity,
4345
+ [vars$K.inputVerticalAlignment]: refs.inputVerticalAlignment,
4346
+ [vars$K.valueInputHeight]: refs.valueInputHeight,
4347
+ [vars$K.valueInputMarginBottom]: refs.valueInputMarginBottom,
4348
4348
  };
4349
4349
 
4350
4350
  var numberField$1 = /*#__PURE__*/Object.freeze({
4351
4351
  __proto__: null,
4352
4352
  default: numberField,
4353
- vars: vars$J
4353
+ vars: vars$K
4354
4354
  });
4355
4355
 
4356
- const componentName$R = getComponentName('email-field');
4356
+ const componentName$S = getComponentName('email-field');
4357
4357
 
4358
4358
  const defaultPattern = "^[\\w\\.\\%\\+\\-']+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$";
4359
4359
  const defaultAutocomplete = 'username';
@@ -4421,55 +4421,55 @@ const EmailFieldClass = compose(
4421
4421
  }
4422
4422
  `,
4423
4423
  excludeAttrsSync: ['tabindex'],
4424
- componentName: componentName$R,
4424
+ componentName: componentName$S,
4425
4425
  })
4426
4426
  );
4427
4427
 
4428
- const vars$I = EmailFieldClass.cssVarList;
4428
+ const vars$J = EmailFieldClass.cssVarList;
4429
4429
 
4430
4430
  const emailField = {
4431
- [vars$I.hostWidth]: refs.width,
4432
- [vars$I.hostMinWidth]: refs.minWidth,
4433
- [vars$I.hostDirection]: refs.direction,
4434
- [vars$I.fontSize]: refs.fontSize,
4435
- [vars$I.fontFamily]: refs.fontFamily,
4436
- [vars$I.labelFontSize]: refs.labelFontSize,
4437
- [vars$I.labelFontWeight]: refs.labelFontWeight,
4438
- [vars$I.labelTextColor]: refs.labelTextColor,
4439
- [vars$I.errorMessageTextColor]: refs.errorMessageTextColor,
4440
- [vars$I.inputValueTextColor]: refs.valueTextColor,
4441
- [vars$I.labelRequiredIndicator]: refs.requiredIndicator,
4442
- [vars$I.inputPlaceholderColor]: refs.placeholderTextColor,
4443
- [vars$I.inputBorderWidth]: refs.borderWidth,
4444
- [vars$I.inputBorderStyle]: refs.borderStyle,
4445
- [vars$I.inputBorderColor]: refs.borderColor,
4446
- [vars$I.inputBorderRadius]: refs.borderRadius,
4447
- [vars$I.inputOutlineWidth]: refs.outlineWidth,
4448
- [vars$I.inputOutlineStyle]: refs.outlineStyle,
4449
- [vars$I.inputOutlineColor]: refs.outlineColor,
4450
- [vars$I.inputOutlineOffset]: refs.outlineOffset,
4451
- [vars$I.inputBackgroundColor]: refs.backgroundColor,
4452
- [vars$I.inputHorizontalPadding]: refs.horizontalPadding,
4453
- [vars$I.inputHeight]: refs.inputHeight,
4454
- [vars$I.labelPosition]: refs.labelPosition,
4455
- [vars$I.labelTopPosition]: refs.labelTopPosition,
4456
- [vars$I.labelHorizontalPosition]: refs.labelHorizontalPosition,
4457
- [vars$I.inputTransformY]: refs.inputTransformY,
4458
- [vars$I.inputTransition]: refs.inputTransition,
4459
- [vars$I.marginInlineStart]: refs.marginInlineStart,
4460
- [vars$I.placeholderOpacity]: refs.placeholderOpacity,
4461
- [vars$I.inputVerticalAlignment]: refs.inputVerticalAlignment,
4462
- [vars$I.valueInputHeight]: refs.valueInputHeight,
4463
- [vars$I.valueInputMarginBottom]: refs.valueInputMarginBottom,
4431
+ [vars$J.hostWidth]: refs.width,
4432
+ [vars$J.hostMinWidth]: refs.minWidth,
4433
+ [vars$J.hostDirection]: refs.direction,
4434
+ [vars$J.fontSize]: refs.fontSize,
4435
+ [vars$J.fontFamily]: refs.fontFamily,
4436
+ [vars$J.labelFontSize]: refs.labelFontSize,
4437
+ [vars$J.labelFontWeight]: refs.labelFontWeight,
4438
+ [vars$J.labelTextColor]: refs.labelTextColor,
4439
+ [vars$J.errorMessageTextColor]: refs.errorMessageTextColor,
4440
+ [vars$J.inputValueTextColor]: refs.valueTextColor,
4441
+ [vars$J.labelRequiredIndicator]: refs.requiredIndicator,
4442
+ [vars$J.inputPlaceholderColor]: refs.placeholderTextColor,
4443
+ [vars$J.inputBorderWidth]: refs.borderWidth,
4444
+ [vars$J.inputBorderStyle]: refs.borderStyle,
4445
+ [vars$J.inputBorderColor]: refs.borderColor,
4446
+ [vars$J.inputBorderRadius]: refs.borderRadius,
4447
+ [vars$J.inputOutlineWidth]: refs.outlineWidth,
4448
+ [vars$J.inputOutlineStyle]: refs.outlineStyle,
4449
+ [vars$J.inputOutlineColor]: refs.outlineColor,
4450
+ [vars$J.inputOutlineOffset]: refs.outlineOffset,
4451
+ [vars$J.inputBackgroundColor]: refs.backgroundColor,
4452
+ [vars$J.inputHorizontalPadding]: refs.horizontalPadding,
4453
+ [vars$J.inputHeight]: refs.inputHeight,
4454
+ [vars$J.labelPosition]: refs.labelPosition,
4455
+ [vars$J.labelTopPosition]: refs.labelTopPosition,
4456
+ [vars$J.labelHorizontalPosition]: refs.labelHorizontalPosition,
4457
+ [vars$J.inputTransformY]: refs.inputTransformY,
4458
+ [vars$J.inputTransition]: refs.inputTransition,
4459
+ [vars$J.marginInlineStart]: refs.marginInlineStart,
4460
+ [vars$J.placeholderOpacity]: refs.placeholderOpacity,
4461
+ [vars$J.inputVerticalAlignment]: refs.inputVerticalAlignment,
4462
+ [vars$J.valueInputHeight]: refs.valueInputHeight,
4463
+ [vars$J.valueInputMarginBottom]: refs.valueInputMarginBottom,
4464
4464
  };
4465
4465
 
4466
4466
  var emailField$1 = /*#__PURE__*/Object.freeze({
4467
4467
  __proto__: null,
4468
4468
  default: emailField,
4469
- vars: vars$I
4469
+ vars: vars$J
4470
4470
  });
4471
4471
 
4472
- const componentName$Q = getComponentName('text-area');
4472
+ const componentName$R = getComponentName('text-area');
4473
4473
 
4474
4474
  const {
4475
4475
  host: host$l,
@@ -4545,49 +4545,49 @@ const TextAreaClass = compose(
4545
4545
  ${resetInputCursor('vaadin-text-area')}
4546
4546
  `,
4547
4547
  excludeAttrsSync: ['tabindex'],
4548
- componentName: componentName$Q,
4548
+ componentName: componentName$R,
4549
4549
  })
4550
4550
  );
4551
4551
 
4552
- const vars$H = TextAreaClass.cssVarList;
4552
+ const vars$I = TextAreaClass.cssVarList;
4553
4553
 
4554
4554
  const textArea = {
4555
- [vars$H.hostWidth]: refs.width,
4556
- [vars$H.hostMinWidth]: refs.minWidth,
4557
- [vars$H.hostDirection]: refs.direction,
4558
- [vars$H.fontSize]: refs.fontSize,
4559
- [vars$H.fontFamily]: refs.fontFamily,
4560
- [vars$H.labelTextColor]: refs.labelTextColor,
4561
- [vars$H.labelRequiredIndicator]: refs.requiredIndicator,
4562
- [vars$H.errorMessageTextColor]: refs.errorMessageTextColor,
4563
- [vars$H.inputBackgroundColor]: refs.backgroundColor,
4564
- [vars$H.inputValueTextColor]: refs.valueTextColor,
4565
- [vars$H.inputPlaceholderTextColor]: refs.placeholderTextColor,
4566
- [vars$H.inputBorderRadius]: refs.borderRadius,
4567
- [vars$H.inputBorderWidth]: refs.borderWidth,
4568
- [vars$H.inputBorderStyle]: refs.borderStyle,
4569
- [vars$H.inputBorderColor]: refs.borderColor,
4570
- [vars$H.inputOutlineWidth]: refs.outlineWidth,
4571
- [vars$H.inputOutlineStyle]: refs.outlineStyle,
4572
- [vars$H.inputOutlineColor]: refs.outlineColor,
4573
- [vars$H.inputOutlineOffset]: refs.outlineOffset,
4574
- [vars$H.inputResizeType]: 'vertical',
4575
- [vars$H.inputMinHeight]: '5em',
4555
+ [vars$I.hostWidth]: refs.width,
4556
+ [vars$I.hostMinWidth]: refs.minWidth,
4557
+ [vars$I.hostDirection]: refs.direction,
4558
+ [vars$I.fontSize]: refs.fontSize,
4559
+ [vars$I.fontFamily]: refs.fontFamily,
4560
+ [vars$I.labelTextColor]: refs.labelTextColor,
4561
+ [vars$I.labelRequiredIndicator]: refs.requiredIndicator,
4562
+ [vars$I.errorMessageTextColor]: refs.errorMessageTextColor,
4563
+ [vars$I.inputBackgroundColor]: refs.backgroundColor,
4564
+ [vars$I.inputValueTextColor]: refs.valueTextColor,
4565
+ [vars$I.inputPlaceholderTextColor]: refs.placeholderTextColor,
4566
+ [vars$I.inputBorderRadius]: refs.borderRadius,
4567
+ [vars$I.inputBorderWidth]: refs.borderWidth,
4568
+ [vars$I.inputBorderStyle]: refs.borderStyle,
4569
+ [vars$I.inputBorderColor]: refs.borderColor,
4570
+ [vars$I.inputOutlineWidth]: refs.outlineWidth,
4571
+ [vars$I.inputOutlineStyle]: refs.outlineStyle,
4572
+ [vars$I.inputOutlineColor]: refs.outlineColor,
4573
+ [vars$I.inputOutlineOffset]: refs.outlineOffset,
4574
+ [vars$I.inputResizeType]: 'vertical',
4575
+ [vars$I.inputMinHeight]: '5em',
4576
4576
  textAlign: {
4577
- right: { [vars$H.inputTextAlign]: 'right' },
4578
- left: { [vars$H.inputTextAlign]: 'left' },
4579
- center: { [vars$H.inputTextAlign]: 'center' },
4577
+ right: { [vars$I.inputTextAlign]: 'right' },
4578
+ left: { [vars$I.inputTextAlign]: 'left' },
4579
+ center: { [vars$I.inputTextAlign]: 'center' },
4580
4580
  },
4581
4581
 
4582
4582
  _readonly: {
4583
- [vars$H.inputResizeType]: 'none',
4583
+ [vars$I.inputResizeType]: 'none',
4584
4584
  },
4585
4585
  };
4586
4586
 
4587
4587
  var textArea$1 = /*#__PURE__*/Object.freeze({
4588
4588
  __proto__: null,
4589
4589
  default: textArea,
4590
- vars: vars$H
4590
+ vars: vars$I
4591
4591
  });
4592
4592
 
4593
4593
  const createBaseInputClass = (...args) =>
@@ -4598,9 +4598,9 @@ const createBaseInputClass = (...args) =>
4598
4598
  inputEventsDispatchingMixin
4599
4599
  )(createBaseClass(...args));
4600
4600
 
4601
- const componentName$P = getComponentName('boolean-field-internal');
4601
+ const componentName$Q = getComponentName('boolean-field-internal');
4602
4602
 
4603
- createBaseInputClass({ componentName: componentName$P, baseSelector: 'div' });
4603
+ createBaseInputClass({ componentName: componentName$Q, baseSelector: 'div' });
4604
4604
 
4605
4605
  const booleanFieldMixin = (superclass) =>
4606
4606
  class BooleanFieldMixinClass extends superclass {
@@ -4609,14 +4609,14 @@ const booleanFieldMixin = (superclass) =>
4609
4609
 
4610
4610
  const template = document.createElement('template');
4611
4611
  template.innerHTML = `
4612
- <${componentName$P}
4612
+ <${componentName$Q}
4613
4613
  tabindex="-1"
4614
4614
  slot="input"
4615
- ></${componentName$P}>
4615
+ ></${componentName$Q}>
4616
4616
  `;
4617
4617
 
4618
4618
  this.baseElement.appendChild(template.content.cloneNode(true));
4619
- this.inputElement = this.shadowRoot.querySelector(componentName$P);
4619
+ this.inputElement = this.shadowRoot.querySelector(componentName$Q);
4620
4620
  this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
4621
4621
 
4622
4622
  forwardAttrs(this, this.inputElement, {
@@ -4654,8 +4654,7 @@ vaadin-text-field {
4654
4654
  align-items: flex-start;
4655
4655
  }
4656
4656
  vaadin-text-field::before {
4657
- height: 0;
4658
- margin: 0;
4657
+ content: unset;
4659
4658
  }
4660
4659
  vaadin-text-field::part(label) {
4661
4660
  position: absolute;
@@ -4686,7 +4685,7 @@ descope-boolean-field-internal {
4686
4685
  }
4687
4686
  `;
4688
4687
 
4689
- const componentName$O = getComponentName('checkbox');
4688
+ const componentName$P = getComponentName('checkbox');
4690
4689
 
4691
4690
  const {
4692
4691
  host: host$k,
@@ -4762,6 +4761,7 @@ const CheckboxClass = compose(
4762
4761
  :host {
4763
4762
  display: inline-flex;
4764
4763
  max-width: 100%;
4764
+ margin: 1px;
4765
4765
  }
4766
4766
 
4767
4767
  :host ::part(error-message) {
@@ -4785,6 +4785,11 @@ const CheckboxClass = compose(
4785
4785
  vaadin-checkbox::part(checkbox)::after {
4786
4786
  top: 0;
4787
4787
  left: 0;
4788
+ -webkit-text-fill-color: initial;
4789
+ }
4790
+
4791
+ vaadin-checkbox label {
4792
+ -webkit-text-fill-color: initial;
4788
4793
  }
4789
4794
 
4790
4795
  vaadin-text-field::part(input-field)::after {
@@ -4792,51 +4797,44 @@ const CheckboxClass = compose(
4792
4797
  }
4793
4798
  `,
4794
4799
  excludeAttrsSync: ['label', 'tabindex'],
4795
- componentName: componentName$O,
4800
+ componentName: componentName$P,
4796
4801
  })
4797
4802
  );
4798
4803
 
4799
- const vars$G = CheckboxClass.cssVarList;
4804
+ const vars$H = CheckboxClass.cssVarList;
4800
4805
  const checkboxSize = '1.35em';
4801
4806
 
4802
4807
  const checkbox = {
4803
- [vars$G.hostWidth]: refs.width,
4804
- [vars$G.hostDirection]: refs.direction,
4805
- [vars$G.fontSize]: refs.fontSize,
4806
- [vars$G.fontFamily]: refs.fontFamily,
4807
- [vars$G.labelTextColor]: refs.labelTextColor,
4808
- [vars$G.labelRequiredIndicator]: refs.requiredIndicator,
4809
- [vars$G.labelFontWeight]: '400',
4810
- [vars$G.labelLineHeight]: checkboxSize,
4811
- [vars$G.labelSpacing]: '1em',
4812
- [vars$G.errorMessageTextColor]: refs.errorMessageTextColor,
4813
- [vars$G.inputOutlineWidth]: refs.outlineWidth,
4814
- [vars$G.inputOutlineOffset]: refs.outlineOffset,
4815
- [vars$G.inputOutlineColor]: refs.outlineColor,
4816
- [vars$G.inputOutlineStyle]: refs.outlineStyle,
4817
- [vars$G.inputBorderRadius]: refs.borderRadius,
4818
- [vars$G.inputBorderColor]: refs.borderColor,
4819
- [vars$G.inputBorderWidth]: refs.borderWidth,
4820
- [vars$G.inputBorderStyle]: refs.borderStyle,
4821
- [vars$G.inputBackgroundColor]: refs.backgroundColor,
4822
- [vars$G.inputSize]: checkboxSize,
4823
-
4824
- _checked: {
4825
- [vars$G.inputValueTextColor]: refs.valueTextColor,
4826
- },
4827
-
4828
- _disabled: {
4829
- [vars$G.labelTextColor]: refs.labelTextColor,
4830
- },
4808
+ [vars$H.hostWidth]: refs.width,
4809
+ [vars$H.hostDirection]: refs.direction,
4810
+ [vars$H.fontSize]: refs.fontSize,
4811
+ [vars$H.fontFamily]: refs.fontFamily,
4812
+ [vars$H.labelTextColor]: refs.labelTextColor,
4813
+ [vars$H.labelRequiredIndicator]: refs.requiredIndicator,
4814
+ [vars$H.labelFontWeight]: '400',
4815
+ [vars$H.labelLineHeight]: checkboxSize,
4816
+ [vars$H.labelSpacing]: '1em',
4817
+ [vars$H.errorMessageTextColor]: refs.errorMessageTextColor,
4818
+ [vars$H.inputOutlineWidth]: refs.outlineWidth,
4819
+ [vars$H.inputOutlineOffset]: refs.outlineOffset,
4820
+ [vars$H.inputOutlineColor]: refs.outlineColor,
4821
+ [vars$H.inputOutlineStyle]: refs.outlineStyle,
4822
+ [vars$H.inputBorderRadius]: refs.borderRadius,
4823
+ [vars$H.inputBorderColor]: refs.borderColor,
4824
+ [vars$H.inputBorderWidth]: refs.borderWidth,
4825
+ [vars$H.inputBorderStyle]: refs.borderStyle,
4826
+ [vars$H.inputBackgroundColor]: refs.backgroundColor,
4827
+ [vars$H.inputSize]: checkboxSize,
4828
+ [vars$H.inputValueTextColor]: refs.valueTextColor,
4831
4829
  };
4832
4830
 
4833
4831
  var checkbox$1 = /*#__PURE__*/Object.freeze({
4834
4832
  __proto__: null,
4835
4833
  default: checkbox,
4836
- vars: vars$G
4834
+ vars: vars$H
4837
4835
  });
4838
4836
 
4839
- const componentName$N = getComponentName('switch-toggle');
4837
+ const componentName$O = getComponentName('switch-toggle');
4840
4838
 
4841
4839
  const {
4842
4840
  host: host$j,
@@ -4968,7 +4966,7 @@ const SwitchToggleClass = compose(
4968
4966
  }
4969
4967
  `,
4970
4968
  excludeAttrsSync: ['label', 'tabindex'],
4971
- componentName: componentName$N,
4969
+ componentName: componentName$O,
4972
4970
  })
4973
4971
  );
4974
4972
 
@@ -4976,74 +4974,74 @@ const knobMargin = '2px';
4976
4974
  const checkboxHeight = '1.25em';
4977
4975
 
4978
4976
  const globalRefs$t = getThemeRefs(globals);
4979
- const vars$F = SwitchToggleClass.cssVarList;
4977
+ const vars$G = SwitchToggleClass.cssVarList;
4980
4978
 
4981
4979
  const switchToggle = {
4982
- [vars$F.hostWidth]: refs.width,
4983
- [vars$F.hostDirection]: refs.direction,
4984
- [vars$F.fontSize]: refs.fontSize,
4985
- [vars$F.fontFamily]: refs.fontFamily,
4986
-
4987
- [vars$F.inputOutlineWidth]: refs.outlineWidth,
4988
- [vars$F.inputOutlineOffset]: refs.outlineOffset,
4989
- [vars$F.inputOutlineColor]: refs.outlineColor,
4990
- [vars$F.inputOutlineStyle]: refs.outlineStyle,
4991
-
4992
- [vars$F.trackBorderStyle]: refs.borderStyle,
4993
- [vars$F.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
4994
- [vars$F.trackBorderColor]: refs.borderColor,
4995
- [vars$F.trackBackgroundColor]: refs.backgroundColor,
4996
- [vars$F.trackBorderRadius]: globalRefs$t.radius.md,
4997
- [vars$F.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
4998
- [vars$F.trackHeight]: checkboxHeight,
4999
-
5000
- [vars$F.knobSize]: `calc(1em - ${knobMargin})`,
5001
- [vars$F.knobRadius]: '50%',
5002
- [vars$F.knobTopOffset]: '1px',
5003
- [vars$F.knobLeftOffset]: knobMargin,
5004
- [vars$F.knobColor]: refs.labelTextColor,
5005
- [vars$F.knobTransitionDuration]: '0.3s',
5006
-
5007
- [vars$F.labelTextColor]: refs.labelTextColor,
5008
- [vars$F.labelFontWeight]: '400',
5009
- [vars$F.labelLineHeight]: '1.35em',
5010
- [vars$F.labelSpacing]: '1em',
5011
- [vars$F.labelRequiredIndicator]: refs.requiredIndicator,
5012
- [vars$F.errorMessageTextColor]: refs.errorMessageTextColor,
4980
+ [vars$G.hostWidth]: refs.width,
4981
+ [vars$G.hostDirection]: refs.direction,
4982
+ [vars$G.fontSize]: refs.fontSize,
4983
+ [vars$G.fontFamily]: refs.fontFamily,
4984
+
4985
+ [vars$G.inputOutlineWidth]: refs.outlineWidth,
4986
+ [vars$G.inputOutlineOffset]: refs.outlineOffset,
4987
+ [vars$G.inputOutlineColor]: refs.outlineColor,
4988
+ [vars$G.inputOutlineStyle]: refs.outlineStyle,
4989
+
4990
+ [vars$G.trackBorderStyle]: refs.borderStyle,
4991
+ [vars$G.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
4992
+ [vars$G.trackBorderColor]: refs.borderColor,
4993
+ [vars$G.trackBackgroundColor]: refs.backgroundColor,
4994
+ [vars$G.trackBorderRadius]: globalRefs$t.radius.md,
4995
+ [vars$G.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
4996
+ [vars$G.trackHeight]: checkboxHeight,
4997
+
4998
+ [vars$G.knobSize]: `calc(1em - ${knobMargin})`,
4999
+ [vars$G.knobRadius]: '50%',
5000
+ [vars$G.knobTopOffset]: '1px',
5001
+ [vars$G.knobLeftOffset]: knobMargin,
5002
+ [vars$G.knobColor]: refs.labelTextColor,
5003
+ [vars$G.knobTransitionDuration]: '0.3s',
5004
+
5005
+ [vars$G.labelTextColor]: refs.labelTextColor,
5006
+ [vars$G.labelFontWeight]: '400',
5007
+ [vars$G.labelLineHeight]: '1.35em',
5008
+ [vars$G.labelSpacing]: '1em',
5009
+ [vars$G.labelRequiredIndicator]: refs.requiredIndicator,
5010
+ [vars$G.errorMessageTextColor]: refs.errorMessageTextColor,
5013
5011
 
5014
5012
  _checked: {
5015
- [vars$F.trackBorderColor]: refs.borderColor,
5016
- [vars$F.knobLeftOffset]: `calc(100% - var(${vars$F.knobSize}) - ${knobMargin})`,
5017
- [vars$F.knobColor]: refs.valueTextColor,
5018
- [vars$F.knobTextColor]: refs.valueTextColor,
5013
+ [vars$G.trackBorderColor]: refs.borderColor,
5014
+ [vars$G.knobLeftOffset]: `calc(100% - var(${vars$G.knobSize}) - ${knobMargin})`,
5015
+ [vars$G.knobColor]: refs.valueTextColor,
5016
+ [vars$G.knobTextColor]: refs.valueTextColor,
5019
5017
  },
5020
5018
 
5021
5019
  _disabled: {
5022
- [vars$F.knobColor]: globalRefs$t.colors.surface.light,
5023
- [vars$F.trackBorderColor]: globalRefs$t.colors.surface.light,
5024
- [vars$F.trackBackgroundColor]: globalRefs$t.colors.surface.main,
5025
- [vars$F.labelTextColor]: refs.labelTextColor,
5020
+ [vars$G.knobColor]: globalRefs$t.colors.surface.light,
5021
+ [vars$G.trackBorderColor]: globalRefs$t.colors.surface.light,
5022
+ [vars$G.trackBackgroundColor]: globalRefs$t.colors.surface.main,
5023
+ [vars$G.labelTextColor]: refs.labelTextColor,
5026
5024
  _checked: {
5027
- [vars$F.knobColor]: globalRefs$t.colors.surface.light,
5028
- [vars$F.trackBackgroundColor]: globalRefs$t.colors.surface.main,
5025
+ [vars$G.knobColor]: globalRefs$t.colors.surface.light,
5026
+ [vars$G.trackBackgroundColor]: globalRefs$t.colors.surface.main,
5029
5027
  },
5030
5028
  },
5031
5029
 
5032
5030
  _invalid: {
5033
- [vars$F.trackBorderColor]: globalRefs$t.colors.error.main,
5034
- [vars$F.knobColor]: globalRefs$t.colors.error.main,
5031
+ [vars$G.trackBorderColor]: globalRefs$t.colors.error.main,
5032
+ [vars$G.knobColor]: globalRefs$t.colors.error.main,
5035
5033
  },
5036
5034
  };
5037
5035
 
5038
5036
  var switchToggle$1 = /*#__PURE__*/Object.freeze({
5039
5037
  __proto__: null,
5040
5038
  default: switchToggle,
5041
- vars: vars$F
5039
+ vars: vars$G
5042
5040
  });
5043
5041
 
5044
- const componentName$M = getComponentName('container');
5042
+ const componentName$N = getComponentName('container');
5045
5043
 
5046
- class RawContainer extends createBaseClass({ componentName: componentName$M, baseSelector: 'slot' }) {
5044
+ class RawContainer extends createBaseClass({ componentName: componentName$N, baseSelector: 'slot' }) {
5047
5045
  constructor() {
5048
5046
  super();
5049
5047
 
@@ -5118,7 +5116,7 @@ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars(
5118
5116
  horizontalAlignment,
5119
5117
  shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
5120
5118
  },
5121
- componentName$M
5119
+ componentName$N
5122
5120
  );
5123
5121
 
5124
5122
  const { shadowColor: shadowColor$3 } = helperRefs$3;
@@ -5205,7 +5203,7 @@ const container = {
5205
5203
  },
5206
5204
  };
5207
5205
 
5208
- const vars$E = {
5206
+ const vars$F = {
5209
5207
  ...compVars$5,
5210
5208
  ...helperVars$3,
5211
5209
  };
@@ -5213,7 +5211,7 @@ const vars$E = {
5213
5211
  var container$1 = /*#__PURE__*/Object.freeze({
5214
5212
  __proto__: null,
5215
5213
  default: container,
5216
- vars: vars$E
5214
+ vars: vars$F
5217
5215
  });
5218
5216
 
5219
5217
  const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
@@ -5266,69 +5264,69 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
5266
5264
  return CssVarImageClass;
5267
5265
  };
5268
5266
 
5269
- const componentName$L = getComponentName('logo');
5267
+ const componentName$M = getComponentName('logo');
5270
5268
 
5271
5269
  const LogoClass = createCssVarImageClass({
5272
- componentName: componentName$L,
5270
+ componentName: componentName$M,
5273
5271
  varName: 'url',
5274
5272
  fallbackVarName: 'fallbackUrl',
5275
5273
  });
5276
5274
 
5277
- const vars$D = LogoClass.cssVarList;
5275
+ const vars$E = LogoClass.cssVarList;
5278
5276
 
5279
5277
  const logo$2 = {
5280
- [vars$D.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
5278
+ [vars$E.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
5281
5279
  };
5282
5280
 
5283
5281
  var logo$3 = /*#__PURE__*/Object.freeze({
5284
5282
  __proto__: null,
5285
5283
  default: logo$2,
5286
- vars: vars$D
5284
+ vars: vars$E
5287
5285
  });
5288
5286
 
5289
- const componentName$K = getComponentName('totp-image');
5287
+ const componentName$L = getComponentName('totp-image');
5290
5288
 
5291
5289
  const TotpImageClass = createCssVarImageClass({
5292
- componentName: componentName$K,
5290
+ componentName: componentName$L,
5293
5291
  varName: 'url',
5294
5292
  fallbackVarName: 'fallbackUrl',
5295
5293
  });
5296
5294
 
5297
- const vars$C = TotpImageClass.cssVarList;
5295
+ const vars$D = TotpImageClass.cssVarList;
5298
5296
 
5299
5297
  const logo$1 = {
5300
- [vars$C.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
5298
+ [vars$D.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
5301
5299
  };
5302
5300
 
5303
5301
  var totpImage = /*#__PURE__*/Object.freeze({
5304
5302
  __proto__: null,
5305
5303
  default: logo$1,
5306
- vars: vars$C
5304
+ vars: vars$D
5307
5305
  });
5308
5306
 
5309
- const componentName$J = getComponentName('notp-image');
5307
+ const componentName$K = getComponentName('notp-image');
5310
5308
 
5311
5309
  const NotpImageClass = createCssVarImageClass({
5312
- componentName: componentName$J,
5310
+ componentName: componentName$K,
5313
5311
  varName: 'url',
5314
5312
  fallbackVarName: 'fallbackUrl',
5315
5313
  });
5316
5314
 
5317
- const vars$B = NotpImageClass.cssVarList;
5315
+ const vars$C = NotpImageClass.cssVarList;
5318
5316
 
5319
5317
  const logo = {
5320
- [vars$B.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
5318
+ [vars$C.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
5321
5319
  };
5322
5320
 
5323
5321
  var notpImage = /*#__PURE__*/Object.freeze({
5324
5322
  __proto__: null,
5325
5323
  default: logo,
5326
- vars: vars$B
5324
+ vars: vars$C
5327
5325
  });
5328
5326
 
5329
- const componentName$I = getComponentName('text');
5327
+ const componentName$J = getComponentName('text');
5330
5328
 
5331
- class RawText extends createBaseClass({ componentName: componentName$I, baseSelector: ':host > slot' }) {
5329
+ class RawText extends createBaseClass({ componentName: componentName$J, baseSelector: ':host > slot' }) {
5332
5330
  constructor() {
5333
5331
  super();
5334
5332
 
@@ -5386,94 +5384,94 @@ const TextClass = compose(
5386
5384
  )(RawText);
5387
5385
 
5388
5386
  const globalRefs$r = getThemeRefs(globals);
5389
- const vars$A = TextClass.cssVarList;
5387
+ const vars$B = TextClass.cssVarList;
5390
5388
 
5391
5389
  const text$2 = {
5392
- [vars$A.hostDirection]: globalRefs$r.direction,
5393
- [vars$A.textLineHeight]: '1.35em',
5394
- [vars$A.textAlign]: 'left',
5395
- [vars$A.textColor]: globalRefs$r.colors.surface.dark,
5390
+ [vars$B.hostDirection]: globalRefs$r.direction,
5391
+ [vars$B.textLineHeight]: '1.35em',
5392
+ [vars$B.textAlign]: 'left',
5393
+ [vars$B.textColor]: globalRefs$r.colors.surface.dark,
5396
5394
 
5397
5395
  variant: {
5398
5396
  h1: {
5399
- [vars$A.fontSize]: globalRefs$r.typography.h1.size,
5400
- [vars$A.fontWeight]: globalRefs$r.typography.h1.weight,
5401
- [vars$A.fontFamily]: globalRefs$r.typography.h1.font,
5397
+ [vars$B.fontSize]: globalRefs$r.typography.h1.size,
5398
+ [vars$B.fontWeight]: globalRefs$r.typography.h1.weight,
5399
+ [vars$B.fontFamily]: globalRefs$r.typography.h1.font,
5402
5400
  },
5403
5401
  h2: {
5404
- [vars$A.fontSize]: globalRefs$r.typography.h2.size,
5405
- [vars$A.fontWeight]: globalRefs$r.typography.h2.weight,
5406
- [vars$A.fontFamily]: globalRefs$r.typography.h2.font,
5402
+ [vars$B.fontSize]: globalRefs$r.typography.h2.size,
5403
+ [vars$B.fontWeight]: globalRefs$r.typography.h2.weight,
5404
+ [vars$B.fontFamily]: globalRefs$r.typography.h2.font,
5407
5405
  },
5408
5406
  h3: {
5409
- [vars$A.fontSize]: globalRefs$r.typography.h3.size,
5410
- [vars$A.fontWeight]: globalRefs$r.typography.h3.weight,
5411
- [vars$A.fontFamily]: globalRefs$r.typography.h3.font,
5407
+ [vars$B.fontSize]: globalRefs$r.typography.h3.size,
5408
+ [vars$B.fontWeight]: globalRefs$r.typography.h3.weight,
5409
+ [vars$B.fontFamily]: globalRefs$r.typography.h3.font,
5412
5410
  },
5413
5411
  subtitle1: {
5414
- [vars$A.fontSize]: globalRefs$r.typography.subtitle1.size,
5415
- [vars$A.fontWeight]: globalRefs$r.typography.subtitle1.weight,
5416
- [vars$A.fontFamily]: globalRefs$r.typography.subtitle1.font,
5412
+ [vars$B.fontSize]: globalRefs$r.typography.subtitle1.size,
5413
+ [vars$B.fontWeight]: globalRefs$r.typography.subtitle1.weight,
5414
+ [vars$B.fontFamily]: globalRefs$r.typography.subtitle1.font,
5417
5415
  },
5418
5416
  subtitle2: {
5419
- [vars$A.fontSize]: globalRefs$r.typography.subtitle2.size,
5420
- [vars$A.fontWeight]: globalRefs$r.typography.subtitle2.weight,
5421
- [vars$A.fontFamily]: globalRefs$r.typography.subtitle2.font,
5417
+ [vars$B.fontSize]: globalRefs$r.typography.subtitle2.size,
5418
+ [vars$B.fontWeight]: globalRefs$r.typography.subtitle2.weight,
5419
+ [vars$B.fontFamily]: globalRefs$r.typography.subtitle2.font,
5422
5420
  },
5423
5421
  body1: {
5424
- [vars$A.fontSize]: globalRefs$r.typography.body1.size,
5425
- [vars$A.fontWeight]: globalRefs$r.typography.body1.weight,
5426
- [vars$A.fontFamily]: globalRefs$r.typography.body1.font,
5422
+ [vars$B.fontSize]: globalRefs$r.typography.body1.size,
5423
+ [vars$B.fontWeight]: globalRefs$r.typography.body1.weight,
5424
+ [vars$B.fontFamily]: globalRefs$r.typography.body1.font,
5427
5425
  },
5428
5426
  body2: {
5429
- [vars$A.fontSize]: globalRefs$r.typography.body2.size,
5430
- [vars$A.fontWeight]: globalRefs$r.typography.body2.weight,
5431
- [vars$A.fontFamily]: globalRefs$r.typography.body2.font,
5427
+ [vars$B.fontSize]: globalRefs$r.typography.body2.size,
5428
+ [vars$B.fontWeight]: globalRefs$r.typography.body2.weight,
5429
+ [vars$B.fontFamily]: globalRefs$r.typography.body2.font,
5432
5430
  },
5433
5431
  },
5434
5432
 
5435
5433
  mode: {
5436
5434
  primary: {
5437
- [vars$A.textColor]: globalRefs$r.colors.surface.contrast,
5435
+ [vars$B.textColor]: globalRefs$r.colors.surface.contrast,
5438
5436
  },
5439
5437
  secondary: {
5440
- [vars$A.textColor]: globalRefs$r.colors.surface.dark,
5438
+ [vars$B.textColor]: globalRefs$r.colors.surface.dark,
5441
5439
  },
5442
5440
  error: {
5443
- [vars$A.textColor]: globalRefs$r.colors.error.main,
5441
+ [vars$B.textColor]: globalRefs$r.colors.error.main,
5444
5442
  },
5445
5443
  success: {
5446
- [vars$A.textColor]: globalRefs$r.colors.success.main,
5444
+ [vars$B.textColor]: globalRefs$r.colors.success.main,
5447
5445
  },
5448
5446
  },
5449
5447
 
5450
5448
  textAlign: {
5451
- right: { [vars$A.textAlign]: 'right' },
5452
- left: { [vars$A.textAlign]: 'left' },
5453
- center: { [vars$A.textAlign]: 'center' },
5449
+ right: { [vars$B.textAlign]: 'right' },
5450
+ left: { [vars$B.textAlign]: 'left' },
5451
+ center: { [vars$B.textAlign]: 'center' },
5454
5452
  },
5455
5453
 
5456
5454
  _fullWidth: {
5457
- [vars$A.hostWidth]: '100%',
5455
+ [vars$B.hostWidth]: '100%',
5458
5456
  },
5459
5457
 
5460
5458
  _italic: {
5461
- [vars$A.fontStyle]: 'italic',
5459
+ [vars$B.fontStyle]: 'italic',
5462
5460
  },
5463
5461
 
5464
5462
  _uppercase: {
5465
- [vars$A.textTransform]: 'uppercase',
5463
+ [vars$B.textTransform]: 'uppercase',
5466
5464
  },
5467
5465
 
5468
5466
  _lowercase: {
5469
- [vars$A.textTransform]: 'lowercase',
5467
+ [vars$B.textTransform]: 'lowercase',
5470
5468
  },
5471
5469
  };
5472
5470
 
5473
5471
  var text$3 = /*#__PURE__*/Object.freeze({
5474
5472
  __proto__: null,
5475
5473
  default: text$2,
5476
- vars: vars$A
5474
+ vars: vars$B
5477
5475
  });
5478
5476
 
5479
5477
  const disableRules = [
@@ -5500,9 +5498,9 @@ const decodeHTML = (html) => {
5500
5498
  /* eslint-disable no-param-reassign */
5501
5499
 
5502
5500
 
5503
- const componentName$H = getComponentName('enriched-text');
5501
+ const componentName$I = getComponentName('enriched-text');
5504
5502
 
5505
- class EnrichedText extends createBaseClass({ componentName: componentName$H, baseSelector: ':host > div' }) {
5503
+ class EnrichedText extends createBaseClass({ componentName: componentName$I, baseSelector: ':host > div' }) {
5506
5504
  #origLinkRenderer;
5507
5505
 
5508
5506
  #origEmRenderer;
@@ -5698,9 +5696,9 @@ const EnrichedTextClass = compose(
5698
5696
  componentNameValidationMixin
5699
5697
  )(EnrichedText);
5700
5698
 
5701
- const componentName$G = getComponentName('link');
5699
+ const componentName$H = getComponentName('link');
5702
5700
 
5703
- class RawLink extends createBaseClass({ componentName: componentName$G, baseSelector: ':host a' }) {
5701
+ class RawLink extends createBaseClass({ componentName: componentName$H, baseSelector: ':host a' }) {
5704
5702
  constructor() {
5705
5703
  super();
5706
5704
 
@@ -5765,37 +5763,37 @@ const LinkClass = compose(
5765
5763
  )(RawLink);
5766
5764
 
5767
5765
  const globalRefs$q = getThemeRefs(globals);
5768
- const vars$z = LinkClass.cssVarList;
5766
+ const vars$A = LinkClass.cssVarList;
5769
5767
 
5770
5768
  const link$1 = {
5771
- [vars$z.hostDirection]: globalRefs$q.direction,
5772
- [vars$z.cursor]: 'pointer',
5769
+ [vars$A.hostDirection]: globalRefs$q.direction,
5770
+ [vars$A.cursor]: 'pointer',
5773
5771
 
5774
- [vars$z.textColor]: globalRefs$q.colors.primary.main,
5772
+ [vars$A.textColor]: globalRefs$q.colors.primary.main,
5775
5773
 
5776
5774
  textAlign: {
5777
- right: { [vars$z.textAlign]: 'right' },
5778
- left: { [vars$z.textAlign]: 'left' },
5779
- center: { [vars$z.textAlign]: 'center' },
5775
+ right: { [vars$A.textAlign]: 'right' },
5776
+ left: { [vars$A.textAlign]: 'left' },
5777
+ center: { [vars$A.textAlign]: 'center' },
5780
5778
  },
5781
5779
 
5782
5780
  _fullWidth: {
5783
- [vars$z.hostWidth]: '100%',
5781
+ [vars$A.hostWidth]: '100%',
5784
5782
  },
5785
5783
 
5786
5784
  _hover: {
5787
- [vars$z.textDecoration]: 'underline',
5785
+ [vars$A.textDecoration]: 'underline',
5788
5786
  },
5789
5787
 
5790
5788
  mode: {
5791
5789
  secondary: {
5792
- [vars$z.textColor]: globalRefs$q.colors.secondary.main,
5790
+ [vars$A.textColor]: globalRefs$q.colors.secondary.main,
5793
5791
  },
5794
5792
  error: {
5795
- [vars$z.textColor]: globalRefs$q.colors.error.main,
5793
+ [vars$A.textColor]: globalRefs$q.colors.error.main,
5796
5794
  },
5797
5795
  success: {
5798
- [vars$z.textColor]: globalRefs$q.colors.success.main,
5796
+ [vars$A.textColor]: globalRefs$q.colors.success.main,
5799
5797
  },
5800
5798
  },
5801
5799
  };
@@ -5803,37 +5801,37 @@ const link$1 = {
5803
5801
  var link$2 = /*#__PURE__*/Object.freeze({
5804
5802
  __proto__: null,
5805
5803
  default: link$1,
5806
- vars: vars$z
5804
+ vars: vars$A
5807
5805
  });
5808
5806
 
5809
5807
  const globalRefs$p = getThemeRefs(globals);
5810
- const vars$y = EnrichedTextClass.cssVarList;
5808
+ const vars$z = EnrichedTextClass.cssVarList;
5811
5809
 
5812
5810
  const enrichedText = {
5813
- [vars$y.hostDirection]: globalRefs$p.direction,
5814
- [vars$y.hostWidth]: useVar(vars$A.hostWidth),
5811
+ [vars$z.hostDirection]: globalRefs$p.direction,
5812
+ [vars$z.hostWidth]: useVar(vars$B.hostWidth),
5815
5813
 
5816
- [vars$y.textLineHeight]: useVar(vars$A.textLineHeight),
5817
- [vars$y.textColor]: useVar(vars$A.textColor),
5818
- [vars$y.textAlign]: useVar(vars$A.textAlign),
5814
+ [vars$z.textLineHeight]: useVar(vars$B.textLineHeight),
5815
+ [vars$z.textColor]: useVar(vars$B.textColor),
5816
+ [vars$z.textAlign]: useVar(vars$B.textAlign),
5819
5817
 
5820
- [vars$y.fontSize]: useVar(vars$A.fontSize),
5821
- [vars$y.fontWeight]: useVar(vars$A.fontWeight),
5822
- [vars$y.fontFamily]: useVar(vars$A.fontFamily),
5818
+ [vars$z.fontSize]: useVar(vars$B.fontSize),
5819
+ [vars$z.fontWeight]: useVar(vars$B.fontWeight),
5820
+ [vars$z.fontFamily]: useVar(vars$B.fontFamily),
5823
5821
 
5824
- [vars$y.linkColor]: useVar(vars$z.textColor),
5825
- [vars$y.linkTextDecoration]: 'none',
5826
- [vars$y.linkHoverTextDecoration]: 'underline',
5822
+ [vars$z.linkColor]: useVar(vars$A.textColor),
5823
+ [vars$z.linkTextDecoration]: 'none',
5824
+ [vars$z.linkHoverTextDecoration]: 'underline',
5827
5825
 
5828
- [vars$y.fontWeightBold]: '900',
5829
- [vars$y.minWidth]: '0.25em',
5830
- [vars$y.minHeight]: '1.35em',
5826
+ [vars$z.fontWeightBold]: '900',
5827
+ [vars$z.minWidth]: '0.25em',
5828
+ [vars$z.minHeight]: '1.35em',
5831
5829
 
5832
- [vars$y.hostDisplay]: 'inline-block',
5830
+ [vars$z.hostDisplay]: 'inline-block',
5833
5831
 
5834
5832
  _empty: {
5835
5833
  _hideWhenEmpty: {
5836
- [vars$y.hostDisplay]: 'none',
5834
+ [vars$z.hostDisplay]: 'none',
5837
5835
  },
5838
5836
  },
5839
5837
  };
@@ -5841,11 +5839,11 @@ const enrichedText = {
5841
5839
  var enrichedText$1 = /*#__PURE__*/Object.freeze({
5842
5840
  __proto__: null,
5843
5841
  default: enrichedText,
5844
- vars: vars$y
5842
+ vars: vars$z
5845
5843
  });
5846
5844
 
5847
- const componentName$F = getComponentName('divider');
5848
- class RawDivider extends createBaseClass({ componentName: componentName$F, baseSelector: ':host > div' }) {
5845
+ const componentName$G = getComponentName('divider');
5846
+ class RawDivider extends createBaseClass({ componentName: componentName$G, baseSelector: ':host > div' }) {
5849
5847
  constructor() {
5850
5848
  super();
5851
5849
 
@@ -5952,7 +5950,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
5952
5950
  thickness: '2px',
5953
5951
  spacing: '10px',
5954
5952
  },
5955
- componentName$F
5953
+ componentName$G
5956
5954
  );
5957
5955
 
5958
5956
  const divider = {
@@ -5983,7 +5981,7 @@ const divider = {
5983
5981
  },
5984
5982
  };
5985
5983
 
5986
- const vars$x = {
5984
+ const vars$y = {
5987
5985
  ...compVars$4,
5988
5986
  ...helperVars$2,
5989
5987
  };
@@ -5991,18 +5989,18 @@ const vars$x = {
5991
5989
  var divider$1 = /*#__PURE__*/Object.freeze({
5992
5990
  __proto__: null,
5993
5991
  default: divider,
5994
- vars: vars$x
5992
+ vars: vars$y
5995
5993
  });
5996
5994
 
5997
5995
  /* eslint-disable no-param-reassign */
5998
5996
 
5999
- const componentName$E = getComponentName('passcode-internal');
5997
+ const componentName$F = getComponentName('passcode-internal');
6000
5998
 
6001
- createBaseInputClass({ componentName: componentName$E, baseSelector: 'div' });
5999
+ createBaseInputClass({ componentName: componentName$F, baseSelector: 'div' });
6002
6000
 
6003
- const componentName$D = getComponentName('loader-radial');
6001
+ const componentName$E = getComponentName('loader-radial');
6004
6002
 
6005
- class RawLoaderRadial extends createBaseClass({ componentName: componentName$D, baseSelector: ':host > div' }) {
6003
+ class RawLoaderRadial extends createBaseClass({ componentName: componentName$E, baseSelector: ':host > div' }) {
6006
6004
  constructor() {
6007
6005
  super();
6008
6006
 
@@ -6046,7 +6044,7 @@ const LoaderRadialClass = compose(
6046
6044
  componentNameValidationMixin
6047
6045
  )(RawLoaderRadial);
6048
6046
 
6049
- const componentName$C = getComponentName('passcode');
6047
+ const componentName$D = getComponentName('passcode');
6050
6048
 
6051
6049
  const observedAttributes$3 = ['digits'];
6052
6050
 
@@ -6065,17 +6063,17 @@ const customMixin$9 = (superclass) =>
6065
6063
  const template = document.createElement('template');
6066
6064
 
6067
6065
  template.innerHTML = `
6068
- <${componentName$E}
6066
+ <${componentName$F}
6069
6067
  bordered="true"
6070
6068
  name="code"
6071
6069
  tabindex="-1"
6072
6070
  slot="input"
6073
- ><slot></slot></${componentName$E}>
6071
+ ><slot></slot></${componentName$F}>
6074
6072
  `;
6075
6073
 
6076
6074
  this.baseElement.appendChild(template.content.cloneNode(true));
6077
6075
 
6078
- this.inputElement = this.shadowRoot.querySelector(componentName$E);
6076
+ this.inputElement = this.shadowRoot.querySelector(componentName$F);
6079
6077
 
6080
6078
  forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
6081
6079
  }
@@ -6227,56 +6225,56 @@ const PasscodeClass = compose(
6227
6225
  ${resetInputCursor('vaadin-text-field')}
6228
6226
  `,
6229
6227
  excludeAttrsSync: ['tabindex'],
6230
- componentName: componentName$C,
6228
+ componentName: componentName$D,
6231
6229
  })
6232
6230
  );
6233
6231
 
6234
- const vars$w = PasscodeClass.cssVarList;
6232
+ const vars$x = PasscodeClass.cssVarList;
6235
6233
 
6236
6234
  const passcode = {
6237
- [vars$w.hostDirection]: refs.direction,
6238
- [vars$w.fontFamily]: refs.fontFamily,
6239
- [vars$w.fontSize]: refs.fontSize,
6240
- [vars$w.labelTextColor]: refs.labelTextColor,
6241
- [vars$w.labelRequiredIndicator]: refs.requiredIndicator,
6242
- [vars$w.errorMessageTextColor]: refs.errorMessageTextColor,
6243
- [vars$w.digitValueTextColor]: refs.valueTextColor,
6244
- [vars$w.digitPadding]: '0',
6245
- [vars$w.digitTextAlign]: 'center',
6246
- [vars$w.digitSpacing]: '4px',
6247
- [vars$w.hostWidth]: refs.width,
6248
- [vars$w.digitOutlineColor]: 'transparent',
6249
- [vars$w.digitOutlineWidth]: refs.outlineWidth,
6250
- [vars$w.focusedDigitFieldOutlineColor]: refs.outlineColor,
6251
- [vars$w.digitSize]: refs.inputHeight,
6235
+ [vars$x.hostDirection]: refs.direction,
6236
+ [vars$x.fontFamily]: refs.fontFamily,
6237
+ [vars$x.fontSize]: refs.fontSize,
6238
+ [vars$x.labelTextColor]: refs.labelTextColor,
6239
+ [vars$x.labelRequiredIndicator]: refs.requiredIndicator,
6240
+ [vars$x.errorMessageTextColor]: refs.errorMessageTextColor,
6241
+ [vars$x.digitValueTextColor]: refs.valueTextColor,
6242
+ [vars$x.digitPadding]: '0',
6243
+ [vars$x.digitTextAlign]: 'center',
6244
+ [vars$x.digitSpacing]: '4px',
6245
+ [vars$x.hostWidth]: refs.width,
6246
+ [vars$x.digitOutlineColor]: 'transparent',
6247
+ [vars$x.digitOutlineWidth]: refs.outlineWidth,
6248
+ [vars$x.focusedDigitFieldOutlineColor]: refs.outlineColor,
6249
+ [vars$x.digitSize]: refs.inputHeight,
6252
6250
 
6253
6251
  size: {
6254
- xs: { [vars$w.spinnerSize]: '15px' },
6255
- sm: { [vars$w.spinnerSize]: '20px' },
6256
- md: { [vars$w.spinnerSize]: '20px' },
6257
- lg: { [vars$w.spinnerSize]: '20px' },
6252
+ xs: { [vars$x.spinnerSize]: '15px' },
6253
+ sm: { [vars$x.spinnerSize]: '20px' },
6254
+ md: { [vars$x.spinnerSize]: '20px' },
6255
+ lg: { [vars$x.spinnerSize]: '20px' },
6258
6256
  },
6259
6257
 
6260
6258
  _hideCursor: {
6261
- [vars$w.digitCaretTextColor]: 'transparent',
6259
+ [vars$x.digitCaretTextColor]: 'transparent',
6262
6260
  },
6263
6261
 
6264
6262
  _loading: {
6265
- [vars$w.overlayOpacity]: refs.overlayOpacity,
6263
+ [vars$x.overlayOpacity]: refs.overlayOpacity,
6266
6264
  },
6267
6265
  };
6268
6266
 
6269
6267
  var passcode$1 = /*#__PURE__*/Object.freeze({
6270
6268
  __proto__: null,
6271
6269
  default: passcode,
6272
- vars: vars$w
6270
+ vars: vars$x
6273
6271
  });
6274
6272
 
6275
- const componentName$B = getComponentName('loader-linear');
6273
+ const componentName$C = getComponentName('loader-linear');
6276
6274
 
6277
- class RawLoaderLinear extends createBaseClass({ componentName: componentName$B, baseSelector: ':host > div' }) {
6275
+ class RawLoaderLinear extends createBaseClass({ componentName: componentName$C, baseSelector: ':host > div' }) {
6278
6276
  static get componentName() {
6279
- return componentName$B;
6277
+ return componentName$C;
6280
6278
  }
6281
6279
 
6282
6280
  constructor() {
@@ -6338,48 +6336,48 @@ const LoaderLinearClass = compose(
6338
6336
  )(RawLoaderLinear);
6339
6337
 
6340
6338
  const globalRefs$n = getThemeRefs(globals);
6341
- const vars$v = LoaderLinearClass.cssVarList;
6339
+ const vars$w = LoaderLinearClass.cssVarList;
6342
6340
 
6343
6341
  const loaderLinear = {
6344
- [vars$v.hostDisplay]: 'inline-block',
6345
- [vars$v.hostWidth]: '100%',
6342
+ [vars$w.hostDisplay]: 'inline-block',
6343
+ [vars$w.hostWidth]: '100%',
6346
6344
 
6347
- [vars$v.barColor]: globalRefs$n.colors.surface.contrast,
6348
- [vars$v.barWidth]: '20%',
6345
+ [vars$w.barColor]: globalRefs$n.colors.surface.contrast,
6346
+ [vars$w.barWidth]: '20%',
6349
6347
 
6350
- [vars$v.barBackgroundColor]: globalRefs$n.colors.surface.light,
6351
- [vars$v.barBorderRadius]: '4px',
6348
+ [vars$w.barBackgroundColor]: globalRefs$n.colors.surface.light,
6349
+ [vars$w.barBorderRadius]: '4px',
6352
6350
 
6353
- [vars$v.animationDuration]: '2s',
6354
- [vars$v.animationTimingFunction]: 'linear',
6355
- [vars$v.animationIterationCount]: 'infinite',
6356
- [vars$v.verticalPadding]: '0.25em',
6351
+ [vars$w.animationDuration]: '2s',
6352
+ [vars$w.animationTimingFunction]: 'linear',
6353
+ [vars$w.animationIterationCount]: 'infinite',
6354
+ [vars$w.verticalPadding]: '0.25em',
6357
6355
 
6358
6356
  size: {
6359
- xs: { [vars$v.barHeight]: '2px' },
6360
- sm: { [vars$v.barHeight]: '4px' },
6361
- md: { [vars$v.barHeight]: '6px' },
6362
- lg: { [vars$v.barHeight]: '8px' },
6357
+ xs: { [vars$w.barHeight]: '2px' },
6358
+ sm: { [vars$w.barHeight]: '4px' },
6359
+ md: { [vars$w.barHeight]: '6px' },
6360
+ lg: { [vars$w.barHeight]: '8px' },
6363
6361
  },
6364
6362
 
6365
6363
  mode: {
6366
6364
  primary: {
6367
- [vars$v.barColor]: globalRefs$n.colors.primary.main,
6365
+ [vars$w.barColor]: globalRefs$n.colors.primary.main,
6368
6366
  },
6369
6367
  secondary: {
6370
- [vars$v.barColor]: globalRefs$n.colors.secondary.main,
6368
+ [vars$w.barColor]: globalRefs$n.colors.secondary.main,
6371
6369
  },
6372
6370
  },
6373
6371
 
6374
6372
  _hidden: {
6375
- [vars$v.hostDisplay]: 'none',
6373
+ [vars$w.hostDisplay]: 'none',
6376
6374
  },
6377
6375
  };
6378
6376
 
6379
6377
  var loaderLinear$1 = /*#__PURE__*/Object.freeze({
6380
6378
  __proto__: null,
6381
6379
  default: loaderLinear,
6382
- vars: vars$v
6380
+ vars: vars$w
6383
6381
  });
6384
6382
 
6385
6383
  const globalRefs$m = getThemeRefs(globals);
@@ -6397,7 +6395,7 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
6397
6395
  },
6398
6396
  },
6399
6397
  },
6400
- componentName$D
6398
+ componentName$E
6401
6399
  );
6402
6400
 
6403
6401
  const loaderRadial = {
@@ -6426,7 +6424,7 @@ const loaderRadial = {
6426
6424
  [compVars$3.hostDisplay]: 'none',
6427
6425
  },
6428
6426
  };
6429
- const vars$u = {
6427
+ const vars$v = {
6430
6428
  ...compVars$3,
6431
6429
  ...helperVars$1,
6432
6430
  };
@@ -6434,10 +6432,10 @@ const vars$u = {
6434
6432
  var loaderRadial$1 = /*#__PURE__*/Object.freeze({
6435
6433
  __proto__: null,
6436
6434
  default: loaderRadial,
6437
- vars: vars$u
6435
+ vars: vars$v
6438
6436
  });
6439
6437
 
6440
- const componentName$A = getComponentName('combo-box');
6438
+ const componentName$B = getComponentName('combo-box');
6441
6439
 
6442
6440
  const ComboBoxMixin = (superclass) =>
6443
6441
  class ComboBoxMixinClass extends superclass {
@@ -6882,83 +6880,83 @@ const ComboBoxClass = compose(
6882
6880
  // and reset items to an empty array, and opening the list box with no items
6883
6881
  // to display.
6884
6882
  excludeAttrsSync: ['tabindex', 'size', 'data'],
6885
- componentName: componentName$A,
6883
+ componentName: componentName$B,
6886
6884
  includeForwardProps: ['items', 'renderer', 'selectedItem'],
6887
6885
  })
6888
6886
  );
6889
6887
 
6890
6888
  const globalRefs$l = getThemeRefs(globals);
6891
- const vars$t = ComboBoxClass.cssVarList;
6889
+ const vars$u = ComboBoxClass.cssVarList;
6892
6890
 
6893
6891
  const comboBox = {
6894
- [vars$t.hostWidth]: refs.width,
6895
- [vars$t.hostDirection]: refs.direction,
6896
- [vars$t.fontSize]: refs.fontSize,
6897
- [vars$t.fontFamily]: refs.fontFamily,
6898
- [vars$t.labelFontSize]: refs.labelFontSize,
6899
- [vars$t.labelFontWeight]: refs.labelFontWeight,
6900
- [vars$t.labelTextColor]: refs.labelTextColor,
6901
- [vars$t.errorMessageTextColor]: refs.errorMessageTextColor,
6902
- [vars$t.inputBorderColor]: refs.borderColor,
6903
- [vars$t.inputBorderWidth]: refs.borderWidth,
6904
- [vars$t.inputBorderStyle]: refs.borderStyle,
6905
- [vars$t.inputBorderRadius]: refs.borderRadius,
6906
- [vars$t.inputOutlineColor]: refs.outlineColor,
6907
- [vars$t.inputOutlineOffset]: refs.outlineOffset,
6908
- [vars$t.inputOutlineWidth]: refs.outlineWidth,
6909
- [vars$t.inputOutlineStyle]: refs.outlineStyle,
6910
- [vars$t.labelRequiredIndicator]: refs.requiredIndicator,
6911
- [vars$t.inputValueTextColor]: refs.valueTextColor,
6912
- [vars$t.inputPlaceholderTextColor]: refs.placeholderTextColor,
6913
- [vars$t.inputBackgroundColor]: refs.backgroundColor,
6914
- [vars$t.inputHorizontalPadding]: refs.horizontalPadding,
6915
- [vars$t.inputHeight]: refs.inputHeight,
6916
- [vars$t.inputDropdownButtonColor]: globalRefs$l.colors.surface.dark,
6917
- [vars$t.inputDropdownButtonCursor]: 'pointer',
6918
- [vars$t.inputDropdownButtonSize]: refs.toggleButtonSize,
6919
- [vars$t.inputDropdownButtonOffset]: globalRefs$l.spacing.xs,
6920
- [vars$t.overlayItemPaddingInlineStart]: globalRefs$l.spacing.xs,
6921
- [vars$t.overlayItemPaddingInlineEnd]: globalRefs$l.spacing.lg,
6922
- [vars$t.labelPosition]: refs.labelPosition,
6923
- [vars$t.labelTopPosition]: refs.labelTopPosition,
6924
- [vars$t.labelHorizontalPosition]: refs.labelHorizontalPosition,
6925
- [vars$t.inputTransformY]: refs.inputTransformY,
6926
- [vars$t.inputTransition]: refs.inputTransition,
6927
- [vars$t.marginInlineStart]: refs.marginInlineStart,
6928
- [vars$t.placeholderOpacity]: refs.placeholderOpacity,
6929
- [vars$t.inputVerticalAlignment]: refs.inputVerticalAlignment,
6930
- [vars$t.valueInputHeight]: refs.valueInputHeight,
6931
- [vars$t.valueInputMarginBottom]: refs.valueInputMarginBottom,
6892
+ [vars$u.hostWidth]: refs.width,
6893
+ [vars$u.hostDirection]: refs.direction,
6894
+ [vars$u.fontSize]: refs.fontSize,
6895
+ [vars$u.fontFamily]: refs.fontFamily,
6896
+ [vars$u.labelFontSize]: refs.labelFontSize,
6897
+ [vars$u.labelFontWeight]: refs.labelFontWeight,
6898
+ [vars$u.labelTextColor]: refs.labelTextColor,
6899
+ [vars$u.errorMessageTextColor]: refs.errorMessageTextColor,
6900
+ [vars$u.inputBorderColor]: refs.borderColor,
6901
+ [vars$u.inputBorderWidth]: refs.borderWidth,
6902
+ [vars$u.inputBorderStyle]: refs.borderStyle,
6903
+ [vars$u.inputBorderRadius]: refs.borderRadius,
6904
+ [vars$u.inputOutlineColor]: refs.outlineColor,
6905
+ [vars$u.inputOutlineOffset]: refs.outlineOffset,
6906
+ [vars$u.inputOutlineWidth]: refs.outlineWidth,
6907
+ [vars$u.inputOutlineStyle]: refs.outlineStyle,
6908
+ [vars$u.labelRequiredIndicator]: refs.requiredIndicator,
6909
+ [vars$u.inputValueTextColor]: refs.valueTextColor,
6910
+ [vars$u.inputPlaceholderTextColor]: refs.placeholderTextColor,
6911
+ [vars$u.inputBackgroundColor]: refs.backgroundColor,
6912
+ [vars$u.inputHorizontalPadding]: refs.horizontalPadding,
6913
+ [vars$u.inputHeight]: refs.inputHeight,
6914
+ [vars$u.inputDropdownButtonColor]: globalRefs$l.colors.surface.dark,
6915
+ [vars$u.inputDropdownButtonCursor]: 'pointer',
6916
+ [vars$u.inputDropdownButtonSize]: refs.toggleButtonSize,
6917
+ [vars$u.inputDropdownButtonOffset]: globalRefs$l.spacing.xs,
6918
+ [vars$u.overlayItemPaddingInlineStart]: globalRefs$l.spacing.xs,
6919
+ [vars$u.overlayItemPaddingInlineEnd]: globalRefs$l.spacing.lg,
6920
+ [vars$u.labelPosition]: refs.labelPosition,
6921
+ [vars$u.labelTopPosition]: refs.labelTopPosition,
6922
+ [vars$u.labelHorizontalPosition]: refs.labelHorizontalPosition,
6923
+ [vars$u.inputTransformY]: refs.inputTransformY,
6924
+ [vars$u.inputTransition]: refs.inputTransition,
6925
+ [vars$u.marginInlineStart]: refs.marginInlineStart,
6926
+ [vars$u.placeholderOpacity]: refs.placeholderOpacity,
6927
+ [vars$u.inputVerticalAlignment]: refs.inputVerticalAlignment,
6928
+ [vars$u.valueInputHeight]: refs.valueInputHeight,
6929
+ [vars$u.valueInputMarginBottom]: refs.valueInputMarginBottom,
6932
6930
 
6933
6931
  _readonly: {
6934
- [vars$t.inputDropdownButtonCursor]: 'default',
6932
+ [vars$u.inputDropdownButtonCursor]: 'default',
6935
6933
  },
6936
6934
 
6937
6935
  // Overlay theme exposed via the component:
6938
- [vars$t.overlayFontSize]: refs.fontSize,
6939
- [vars$t.overlayFontFamily]: refs.fontFamily,
6940
- [vars$t.overlayCursor]: 'pointer',
6941
- [vars$t.overlayItemBoxShadow]: 'none',
6942
- [vars$t.overlayBackground]: refs.backgroundColor,
6943
- [vars$t.overlayTextColor]: refs.valueTextColor,
6936
+ [vars$u.overlayFontSize]: refs.fontSize,
6937
+ [vars$u.overlayFontFamily]: refs.fontFamily,
6938
+ [vars$u.overlayCursor]: 'pointer',
6939
+ [vars$u.overlayItemBoxShadow]: 'none',
6940
+ [vars$u.overlayBackground]: refs.backgroundColor,
6941
+ [vars$u.overlayTextColor]: refs.valueTextColor,
6944
6942
 
6945
6943
  // Overlay direct theme:
6946
- [vars$t.overlay.minHeight]: '400px',
6947
- [vars$t.overlay.margin]: '0',
6944
+ [vars$u.overlay.minHeight]: '400px',
6945
+ [vars$u.overlay.margin]: '0',
6948
6946
  };
6949
6947
 
6950
6948
  var comboBox$1 = /*#__PURE__*/Object.freeze({
6951
6949
  __proto__: null,
6952
6950
  comboBox: comboBox,
6953
6951
  default: comboBox,
6954
- vars: vars$t
6952
+ vars: vars$u
6955
6953
  });
6956
6954
 
6957
6955
  const observedAttributes$2 = ['src', 'alt'];
6958
6956
 
6959
- const componentName$z = getComponentName('image');
6957
+ const componentName$A = getComponentName('image');
6960
6958
 
6961
- const BaseClass$1 = createBaseClass({ componentName: componentName$z, baseSelector: ':host > img' });
6959
+ const BaseClass$1 = createBaseClass({ componentName: componentName$A, baseSelector: ':host > img' });
6962
6960
  class RawImage extends BaseClass$1 {
6963
6961
  static get observedAttributes() {
6964
6962
  return observedAttributes$2.concat(BaseClass$1.observedAttributes || []);
@@ -6998,14 +6996,14 @@ const ImageClass = compose(
6998
6996
  draggableMixin
6999
6997
  )(RawImage);
7000
6998
 
7001
- const vars$s = ImageClass.cssVarList;
6999
+ const vars$t = ImageClass.cssVarList;
7002
7000
 
7003
7001
  const image = {};
7004
7002
 
7005
7003
  var image$1 = /*#__PURE__*/Object.freeze({
7006
7004
  __proto__: null,
7007
7005
  default: image,
7008
- vars: vars$s
7006
+ vars: vars$t
7009
7007
  });
7010
7008
 
7011
7009
  var CountryCodes = [
@@ -8224,14 +8222,14 @@ var CountryCodes = [
8224
8222
  ].sort((a, b) => (a.name < b.name ? -1 : 1)),
8225
8223
  ];
8226
8224
 
8227
- const componentName$y = getComponentName('phone-field-internal');
8225
+ const componentName$z = getComponentName('phone-field-internal');
8228
8226
 
8229
- createBaseInputClass({ componentName: componentName$y, baseSelector: 'div' });
8227
+ createBaseInputClass({ componentName: componentName$z, baseSelector: 'div' });
8230
8228
 
8231
8229
  const textVars$1 = TextFieldClass.cssVarList;
8232
8230
  const comboVars = ComboBoxClass.cssVarList;
8233
8231
 
8234
- const componentName$x = getComponentName('phone-field');
8232
+ const componentName$y = getComponentName('phone-field');
8235
8233
 
8236
8234
  const customMixin$8 = (superclass) =>
8237
8235
  class PhoneFieldMixinClass extends superclass {
@@ -8245,15 +8243,15 @@ const customMixin$8 = (superclass) =>
8245
8243
  const template = document.createElement('template');
8246
8244
 
8247
8245
  template.innerHTML = `
8248
- <${componentName$y}
8246
+ <${componentName$z}
8249
8247
  tabindex="-1"
8250
8248
  slot="input"
8251
- ></${componentName$y}>
8249
+ ></${componentName$z}>
8252
8250
  `;
8253
8251
 
8254
8252
  this.baseElement.appendChild(template.content.cloneNode(true));
8255
8253
 
8256
- this.inputElement = this.shadowRoot.querySelector(componentName$y);
8254
+ this.inputElement = this.shadowRoot.querySelector(componentName$z);
8257
8255
 
8258
8256
  forwardAttrs(this.shadowRoot.host, this.inputElement, {
8259
8257
  includeAttrs: [
@@ -8475,36 +8473,36 @@ const PhoneFieldClass = compose(
8475
8473
  ${resetInputLabelPosition('vaadin-text-field')}
8476
8474
  `,
8477
8475
  excludeAttrsSync: ['tabindex'],
8478
- componentName: componentName$x,
8476
+ componentName: componentName$y,
8479
8477
  })
8480
8478
  );
8481
8479
 
8482
- const vars$r = PhoneFieldClass.cssVarList;
8480
+ const vars$s = PhoneFieldClass.cssVarList;
8483
8481
 
8484
8482
  const phoneField = {
8485
- [vars$r.hostWidth]: refs.width,
8486
- [vars$r.hostDirection]: refs.direction,
8487
- [vars$r.fontSize]: refs.fontSize,
8488
- [vars$r.fontFamily]: refs.fontFamily,
8489
- [vars$r.labelTextColor]: refs.labelTextColor,
8490
- [vars$r.labelRequiredIndicator]: refs.requiredIndicator,
8491
- [vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
8492
- [vars$r.inputValueTextColor]: refs.valueTextColor,
8493
- [vars$r.inputPlaceholderTextColor]: refs.placeholderTextColor,
8494
- [vars$r.inputBorderStyle]: refs.borderStyle,
8495
- [vars$r.inputBorderWidth]: refs.borderWidth,
8496
- [vars$r.inputBorderColor]: refs.borderColor,
8497
- [vars$r.inputBorderRadius]: refs.borderRadius,
8498
- [vars$r.inputOutlineStyle]: refs.outlineStyle,
8499
- [vars$r.inputOutlineWidth]: refs.outlineWidth,
8500
- [vars$r.inputOutlineColor]: refs.outlineColor,
8501
- [vars$r.inputOutlineOffset]: refs.outlineOffset,
8502
- [vars$r.phoneInputWidth]: refs.minWidth,
8503
- [vars$r.countryCodeInputWidth]: '5em',
8504
- [vars$r.countryCodeDropdownWidth]: '20em',
8505
- [vars$r.marginInlineStart]: '-0.25em',
8506
- [vars$r.valueInputHeight]: refs.valueInputHeight,
8507
- [vars$r.valueInputMarginBottom]: refs.valueInputMarginBottom,
8483
+ [vars$s.hostWidth]: refs.width,
8484
+ [vars$s.hostDirection]: refs.direction,
8485
+ [vars$s.fontSize]: refs.fontSize,
8486
+ [vars$s.fontFamily]: refs.fontFamily,
8487
+ [vars$s.labelTextColor]: refs.labelTextColor,
8488
+ [vars$s.labelRequiredIndicator]: refs.requiredIndicator,
8489
+ [vars$s.errorMessageTextColor]: refs.errorMessageTextColor,
8490
+ [vars$s.inputValueTextColor]: refs.valueTextColor,
8491
+ [vars$s.inputPlaceholderTextColor]: refs.placeholderTextColor,
8492
+ [vars$s.inputBorderStyle]: refs.borderStyle,
8493
+ [vars$s.inputBorderWidth]: refs.borderWidth,
8494
+ [vars$s.inputBorderColor]: refs.borderColor,
8495
+ [vars$s.inputBorderRadius]: refs.borderRadius,
8496
+ [vars$s.inputOutlineStyle]: refs.outlineStyle,
8497
+ [vars$s.inputOutlineWidth]: refs.outlineWidth,
8498
+ [vars$s.inputOutlineColor]: refs.outlineColor,
8499
+ [vars$s.inputOutlineOffset]: refs.outlineOffset,
8500
+ [vars$s.phoneInputWidth]: refs.minWidth,
8501
+ [vars$s.countryCodeInputWidth]: '5em',
8502
+ [vars$s.countryCodeDropdownWidth]: '20em',
8503
+ [vars$s.marginInlineStart]: '-0.25em',
8504
+ [vars$s.valueInputHeight]: refs.valueInputHeight,
8505
+ [vars$s.valueInputMarginBottom]: refs.valueInputMarginBottom,
8508
8506
 
8509
8507
  // '@overlay': {
8510
8508
  // overlayItemBackgroundColor: 'red'
@@ -8514,16 +8512,16 @@ const phoneField = {
8514
8512
  var phoneField$1 = /*#__PURE__*/Object.freeze({
8515
8513
  __proto__: null,
8516
8514
  default: phoneField,
8517
- vars: vars$r
8515
+ vars: vars$s
8518
8516
  });
8519
8517
 
8520
- const componentName$w = getComponentName('phone-field-internal-input-box');
8518
+ const componentName$x = getComponentName('phone-field-internal-input-box');
8521
8519
 
8522
- createBaseInputClass({ componentName: componentName$w, baseSelector: 'div' });
8520
+ createBaseInputClass({ componentName: componentName$x, baseSelector: 'div' });
8523
8521
 
8524
8522
  const textVars = TextFieldClass.cssVarList;
8525
8523
 
8526
- const componentName$v = getComponentName('phone-input-box-field');
8524
+ const componentName$w = getComponentName('phone-input-box-field');
8527
8525
 
8528
8526
  const customMixin$7 = (superclass) =>
8529
8527
  class PhoneInputBoxFieldMixinClass extends superclass {
@@ -8537,15 +8535,15 @@ const customMixin$7 = (superclass) =>
8537
8535
  const template = document.createElement('template');
8538
8536
 
8539
8537
  template.innerHTML = `
8540
- <${componentName$w}
8538
+ <${componentName$x}
8541
8539
  tabindex="-1"
8542
8540
  slot="input"
8543
- ></${componentName$w}>
8541
+ ></${componentName$x}>
8544
8542
  `;
8545
8543
 
8546
8544
  this.baseElement.appendChild(template.content.cloneNode(true));
8547
8545
 
8548
- this.inputElement = this.shadowRoot.querySelector(componentName$w);
8546
+ this.inputElement = this.shadowRoot.querySelector(componentName$x);
8549
8547
 
8550
8548
  forwardAttrs(this.shadowRoot.host, this.inputElement, {
8551
8549
  includeAttrs: [
@@ -8722,68 +8720,68 @@ const PhoneFieldInputBoxClass = compose(
8722
8720
  ${inputFloatingLabelStyle()}
8723
8721
  `,
8724
8722
  excludeAttrsSync: ['tabindex'],
8725
- componentName: componentName$v,
8723
+ componentName: componentName$w,
8726
8724
  })
8727
8725
  );
8728
8726
 
8729
- const vars$q = PhoneFieldInputBoxClass.cssVarList;
8727
+ const vars$r = PhoneFieldInputBoxClass.cssVarList;
8730
8728
 
8731
8729
  const phoneInputBoxField = {
8732
- [vars$q.hostWidth]: '16em',
8733
- [vars$q.hostMinWidth]: refs.minWidth,
8734
- [vars$q.hostDirection]: refs.direction,
8735
- [vars$q.fontSize]: refs.fontSize,
8736
- [vars$q.fontFamily]: refs.fontFamily,
8737
- [vars$q.labelFontSize]: refs.labelFontSize,
8738
- [vars$q.labelFontWeight]: refs.labelFontWeight,
8739
- [vars$q.labelTextColor]: refs.labelTextColor,
8740
- [vars$q.labelRequiredIndicator]: refs.requiredIndicator,
8741
- [vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
8742
- [vars$q.inputValueTextColor]: refs.valueTextColor,
8743
- [vars$q.inputPlaceholderTextColor]: refs.placeholderTextColor,
8744
- [vars$q.inputBorderStyle]: refs.borderStyle,
8745
- [vars$q.inputBorderWidth]: refs.borderWidth,
8746
- [vars$q.inputBorderColor]: refs.borderColor,
8747
- [vars$q.inputBorderRadius]: refs.borderRadius,
8748
- [vars$q.inputOutlineStyle]: refs.outlineStyle,
8749
- [vars$q.inputOutlineWidth]: refs.outlineWidth,
8750
- [vars$q.inputOutlineColor]: refs.outlineColor,
8751
- [vars$q.inputOutlineOffset]: refs.outlineOffset,
8752
- [vars$q.labelPosition]: refs.labelPosition,
8753
- [vars$q.labelTopPosition]: refs.labelTopPosition,
8754
- [vars$q.labelHorizontalPosition]: refs.labelHorizontalPosition,
8755
- [vars$q.inputTransformY]: refs.inputTransformY,
8756
- [vars$q.inputTransition]: refs.inputTransition,
8757
- [vars$q.marginInlineStart]: refs.marginInlineStart,
8758
- [vars$q.valueInputHeight]: refs.valueInputHeight,
8759
- [vars$q.valueInputMarginBottom]: refs.valueInputMarginBottom,
8760
- [vars$q.inputHorizontalPadding]: '0',
8730
+ [vars$r.hostWidth]: '16em',
8731
+ [vars$r.hostMinWidth]: refs.minWidth,
8732
+ [vars$r.hostDirection]: refs.direction,
8733
+ [vars$r.fontSize]: refs.fontSize,
8734
+ [vars$r.fontFamily]: refs.fontFamily,
8735
+ [vars$r.labelFontSize]: refs.labelFontSize,
8736
+ [vars$r.labelFontWeight]: refs.labelFontWeight,
8737
+ [vars$r.labelTextColor]: refs.labelTextColor,
8738
+ [vars$r.labelRequiredIndicator]: refs.requiredIndicator,
8739
+ [vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
8740
+ [vars$r.inputValueTextColor]: refs.valueTextColor,
8741
+ [vars$r.inputPlaceholderTextColor]: refs.placeholderTextColor,
8742
+ [vars$r.inputBorderStyle]: refs.borderStyle,
8743
+ [vars$r.inputBorderWidth]: refs.borderWidth,
8744
+ [vars$r.inputBorderColor]: refs.borderColor,
8745
+ [vars$r.inputBorderRadius]: refs.borderRadius,
8746
+ [vars$r.inputOutlineStyle]: refs.outlineStyle,
8747
+ [vars$r.inputOutlineWidth]: refs.outlineWidth,
8748
+ [vars$r.inputOutlineColor]: refs.outlineColor,
8749
+ [vars$r.inputOutlineOffset]: refs.outlineOffset,
8750
+ [vars$r.labelPosition]: refs.labelPosition,
8751
+ [vars$r.labelTopPosition]: refs.labelTopPosition,
8752
+ [vars$r.labelHorizontalPosition]: refs.labelHorizontalPosition,
8753
+ [vars$r.inputTransformY]: refs.inputTransformY,
8754
+ [vars$r.inputTransition]: refs.inputTransition,
8755
+ [vars$r.marginInlineStart]: refs.marginInlineStart,
8756
+ [vars$r.valueInputHeight]: refs.valueInputHeight,
8757
+ [vars$r.valueInputMarginBottom]: refs.valueInputMarginBottom,
8758
+ [vars$r.inputHorizontalPadding]: '0',
8761
8759
 
8762
8760
  _fullWidth: {
8763
- [vars$q.hostWidth]: refs.width,
8761
+ [vars$r.hostWidth]: refs.width,
8764
8762
  },
8765
8763
  };
8766
8764
 
8767
8765
  var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
8768
8766
  __proto__: null,
8769
8767
  default: phoneInputBoxField,
8770
- vars: vars$q
8768
+ vars: vars$r
8771
8769
  });
8772
8770
 
8773
- const componentName$u = getComponentName('new-password-internal');
8771
+ const componentName$v = getComponentName('new-password-internal');
8774
8772
 
8775
8773
  const interpolateString = (template, values) =>
8776
8774
  template.replace(/{{(\w+)+}}/g, (match, key) => values?.[key] || match);
8777
8775
 
8778
8776
  // eslint-disable-next-line max-classes-per-file
8779
8777
 
8780
- const componentName$t = getComponentName('policy-validation');
8778
+ const componentName$u = getComponentName('policy-validation');
8781
8779
 
8782
8780
  const overrideAttrs = ['data-password-policy-value-minlength'];
8783
8781
  const dataAttrs = ['data', 'active-policies', 'overrides', ...overrideAttrs];
8784
8782
  const policyAttrs = ['label', 'value', ...dataAttrs];
8785
8783
 
8786
- class RawPolicyValidation extends createBaseClass({ componentName: componentName$t, baseSelector: ':host > div' }) {
8784
+ class RawPolicyValidation extends createBaseClass({ componentName: componentName$u, baseSelector: ':host > div' }) {
8787
8785
  #availablePolicies;
8788
8786
 
8789
8787
  #activePolicies = [];
@@ -8991,7 +8989,7 @@ const PolicyValidationClass = compose(
8991
8989
  componentNameValidationMixin
8992
8990
  )(RawPolicyValidation);
8993
8991
 
8994
- const componentName$s = getComponentName('new-password');
8992
+ const componentName$t = getComponentName('new-password');
8995
8993
 
8996
8994
  const policyPreviewVars = PolicyValidationClass.cssVarList;
8997
8995
 
@@ -9005,18 +9003,18 @@ const customMixin$6 = (superclass) =>
9005
9003
  const externalInputAttr = this.getAttribute('external-input');
9006
9004
 
9007
9005
  template.innerHTML = `
9008
- <${componentName$u}
9006
+ <${componentName$v}
9009
9007
  name="new-password"
9010
9008
  tabindex="-1"
9011
9009
  slot="input"
9012
9010
  external-input="${externalInputAttr}"
9013
9011
  >
9014
- </${componentName$u}>
9012
+ </${componentName$v}>
9015
9013
  `;
9016
9014
 
9017
9015
  this.baseElement.appendChild(template.content.cloneNode(true));
9018
9016
 
9019
- this.inputElement = this.shadowRoot.querySelector(componentName$u);
9017
+ this.inputElement = this.shadowRoot.querySelector(componentName$v);
9020
9018
 
9021
9019
  if (this.getAttribute('external-input') === 'true') {
9022
9020
  this.initExternalInput();
@@ -9192,40 +9190,40 @@ const NewPasswordClass = compose(
9192
9190
  }
9193
9191
  `,
9194
9192
  excludeAttrsSync: ['tabindex'],
9195
- componentName: componentName$s,
9193
+ componentName: componentName$t,
9196
9194
  })
9197
9195
  );
9198
9196
 
9199
9197
  const globalRefs$k = getThemeRefs(globals);
9200
- const vars$p = NewPasswordClass.cssVarList;
9198
+ const vars$q = NewPasswordClass.cssVarList;
9201
9199
 
9202
9200
  const newPassword = {
9203
- [vars$p.hostWidth]: refs.width,
9204
- [vars$p.hostMinWidth]: refs.minWidth,
9205
- [vars$p.hostDirection]: refs.direction,
9206
- [vars$p.fontSize]: refs.fontSize,
9207
- [vars$p.fontFamily]: refs.fontFamily,
9208
- [vars$p.labelFontSize]: refs.labelFontSize,
9209
- [vars$p.labelFontWeight]: refs.labelFontWeight,
9210
- [vars$p.labelTextColor]: refs.labelTextColor,
9211
- [vars$p.spaceBetweenInputs]: '1em',
9212
- [vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
9213
- [vars$p.policyPreviewBackgroundColor]: 'none',
9214
- [vars$p.policyPreviewPadding]: globalRefs$k.spacing.lg,
9215
- [vars$p.valueInputHeight]: refs.valueInputHeight,
9201
+ [vars$q.hostWidth]: refs.width,
9202
+ [vars$q.hostMinWidth]: refs.minWidth,
9203
+ [vars$q.hostDirection]: refs.direction,
9204
+ [vars$q.fontSize]: refs.fontSize,
9205
+ [vars$q.fontFamily]: refs.fontFamily,
9206
+ [vars$q.labelFontSize]: refs.labelFontSize,
9207
+ [vars$q.labelFontWeight]: refs.labelFontWeight,
9208
+ [vars$q.labelTextColor]: refs.labelTextColor,
9209
+ [vars$q.spaceBetweenInputs]: '1em',
9210
+ [vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
9211
+ [vars$q.policyPreviewBackgroundColor]: 'none',
9212
+ [vars$q.policyPreviewPadding]: globalRefs$k.spacing.lg,
9213
+ [vars$q.valueInputHeight]: refs.valueInputHeight,
9216
9214
 
9217
9215
  _required: {
9218
9216
  // NewPassword doesn't pass `required` attribute to its Password components.
9219
9217
  // That's why we fake the required indicator on each input.
9220
9218
  // We do that by injecting `::after` element, and populating it with requiredIndicator content.
9221
- [vars$p.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
9219
+ [vars$q.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
9222
9220
  },
9223
9221
  };
9224
9222
 
9225
9223
  var newPassword$1 = /*#__PURE__*/Object.freeze({
9226
9224
  __proto__: null,
9227
9225
  default: newPassword,
9228
- vars: vars$p
9226
+ vars: vars$q
9229
9227
  });
9230
9228
 
9231
9229
  const getFileBase64 = (fileObj) => {
@@ -9240,7 +9238,7 @@ const getFilename = (fileObj) => {
9240
9238
  return fileObj.name.replace(/^.*\\/, '');
9241
9239
  };
9242
9240
 
9243
- const componentName$r = getComponentName('upload-file');
9241
+ const componentName$s = getComponentName('upload-file');
9244
9242
 
9245
9243
  const observedAttributes$1 = [
9246
9244
  'title',
@@ -9255,7 +9253,7 @@ const observedAttributes$1 = [
9255
9253
  'icon',
9256
9254
  ];
9257
9255
 
9258
- const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$r, baseSelector: ':host > div' });
9256
+ const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$s, baseSelector: ':host > div' });
9259
9257
 
9260
9258
  class RawUploadFile extends BaseInputClass$2 {
9261
9259
  static get observedAttributes() {
@@ -9470,77 +9468,77 @@ const UploadFileClass = compose(
9470
9468
  componentNameValidationMixin
9471
9469
  )(RawUploadFile);
9472
9470
 
9473
- const vars$o = UploadFileClass.cssVarList;
9471
+ const vars$p = UploadFileClass.cssVarList;
9474
9472
 
9475
9473
  const uploadFile = {
9476
- [vars$o.hostDirection]: refs.direction,
9477
- [vars$o.labelTextColor]: refs.labelTextColor,
9478
- [vars$o.fontFamily]: refs.fontFamily,
9474
+ [vars$p.hostDirection]: refs.direction,
9475
+ [vars$p.labelTextColor]: refs.labelTextColor,
9476
+ [vars$p.fontFamily]: refs.fontFamily,
9479
9477
 
9480
- [vars$o.iconSize]: '2em',
9478
+ [vars$p.iconSize]: '2em',
9481
9479
 
9482
- [vars$o.hostPadding]: '0.75em',
9483
- [vars$o.gap]: '0.5em',
9480
+ [vars$p.hostPadding]: '0.75em',
9481
+ [vars$p.gap]: '0.5em',
9484
9482
 
9485
- [vars$o.fontSize]: '16px',
9486
- [vars$o.titleFontWeight]: '500',
9487
- [vars$o.lineHeight]: '1em',
9483
+ [vars$p.fontSize]: '16px',
9484
+ [vars$p.titleFontWeight]: '500',
9485
+ [vars$p.lineHeight]: '1em',
9488
9486
 
9489
- [vars$o.borderWidth]: refs.borderWidth,
9490
- [vars$o.borderColor]: refs.borderColor,
9491
- [vars$o.borderRadius]: refs.borderRadius,
9492
- [vars$o.borderStyle]: 'dashed',
9487
+ [vars$p.borderWidth]: refs.borderWidth,
9488
+ [vars$p.borderColor]: refs.borderColor,
9489
+ [vars$p.borderRadius]: refs.borderRadius,
9490
+ [vars$p.borderStyle]: 'dashed',
9493
9491
 
9494
9492
  _required: {
9495
- [vars$o.requiredIndicator]: refs.requiredIndicator,
9493
+ [vars$p.requiredIndicator]: refs.requiredIndicator,
9496
9494
  },
9497
9495
 
9498
9496
  size: {
9499
9497
  xs: {
9500
- [vars$o.hostHeight]: '196px',
9501
- [vars$o.hostWidth]: '200px',
9502
- [vars$o.titleFontSize]: '0.875em',
9503
- [vars$o.descriptionFontSize]: '0.875em',
9504
- [vars$o.lineHeight]: '1.25em',
9498
+ [vars$p.hostHeight]: '196px',
9499
+ [vars$p.hostWidth]: '200px',
9500
+ [vars$p.titleFontSize]: '0.875em',
9501
+ [vars$p.descriptionFontSize]: '0.875em',
9502
+ [vars$p.lineHeight]: '1.25em',
9505
9503
  },
9506
9504
  sm: {
9507
- [vars$o.hostHeight]: '216px',
9508
- [vars$o.hostWidth]: '230px',
9509
- [vars$o.titleFontSize]: '1em',
9510
- [vars$o.descriptionFontSize]: '0.875em',
9511
- [vars$o.lineHeight]: '1.25em',
9505
+ [vars$p.hostHeight]: '216px',
9506
+ [vars$p.hostWidth]: '230px',
9507
+ [vars$p.titleFontSize]: '1em',
9508
+ [vars$p.descriptionFontSize]: '0.875em',
9509
+ [vars$p.lineHeight]: '1.25em',
9512
9510
  },
9513
9511
  md: {
9514
- [vars$o.hostHeight]: '256px',
9515
- [vars$o.hostWidth]: '312px',
9516
- [vars$o.titleFontSize]: '1.125em',
9517
- [vars$o.descriptionFontSize]: '1em',
9518
- [vars$o.lineHeight]: '1.5em',
9512
+ [vars$p.hostHeight]: '256px',
9513
+ [vars$p.hostWidth]: '312px',
9514
+ [vars$p.titleFontSize]: '1.125em',
9515
+ [vars$p.descriptionFontSize]: '1em',
9516
+ [vars$p.lineHeight]: '1.5em',
9519
9517
  },
9520
9518
  lg: {
9521
- [vars$o.hostHeight]: '280px',
9522
- [vars$o.hostWidth]: '336px',
9523
- [vars$o.titleFontSize]: '1.125em',
9524
- [vars$o.descriptionFontSize]: '1.125em',
9525
- [vars$o.lineHeight]: '1.75em',
9519
+ [vars$p.hostHeight]: '280px',
9520
+ [vars$p.hostWidth]: '336px',
9521
+ [vars$p.titleFontSize]: '1.125em',
9522
+ [vars$p.descriptionFontSize]: '1.125em',
9523
+ [vars$p.lineHeight]: '1.75em',
9526
9524
  },
9527
9525
  },
9528
9526
 
9529
9527
  _fullWidth: {
9530
- [vars$o.hostWidth]: refs.width,
9528
+ [vars$p.hostWidth]: refs.width,
9531
9529
  },
9532
9530
  };
9533
9531
 
9534
9532
  var uploadFile$1 = /*#__PURE__*/Object.freeze({
9535
9533
  __proto__: null,
9536
9534
  default: uploadFile,
9537
- vars: vars$o
9535
+ vars: vars$p
9538
9536
  });
9539
9537
 
9540
- const componentName$q = getComponentName('button-selection-group-item');
9538
+ const componentName$r = getComponentName('button-selection-group-item');
9541
9539
 
9542
9540
  class RawSelectItem extends createBaseClass({
9543
- componentName: componentName$q,
9541
+ componentName: componentName$r,
9544
9542
  baseSelector: ':host > descope-button',
9545
9543
  }) {
9546
9544
  get size() {
@@ -9649,37 +9647,37 @@ const ButtonSelectionGroupItemClass = compose(
9649
9647
 
9650
9648
  const globalRefs$j = getThemeRefs(globals);
9651
9649
 
9652
- const vars$n = ButtonSelectionGroupItemClass.cssVarList;
9650
+ const vars$o = ButtonSelectionGroupItemClass.cssVarList;
9653
9651
 
9654
9652
  const buttonSelectionGroupItem = {
9655
- [vars$n.hostDirection]: 'inherit',
9656
- [vars$n.backgroundColor]: globalRefs$j.colors.surface.main,
9657
- [vars$n.labelTextColor]: globalRefs$j.colors.surface.contrast,
9658
- [vars$n.borderColor]: globalRefs$j.colors.surface.light,
9659
- [vars$n.borderStyle]: 'solid',
9660
- [vars$n.borderRadius]: globalRefs$j.radius.sm,
9661
- [vars$n.outlineColor]: 'transparent',
9662
- [vars$n.borderWidth]: globalRefs$j.border.xs,
9653
+ [vars$o.hostDirection]: 'inherit',
9654
+ [vars$o.backgroundColor]: globalRefs$j.colors.surface.main,
9655
+ [vars$o.labelTextColor]: globalRefs$j.colors.surface.contrast,
9656
+ [vars$o.borderColor]: globalRefs$j.colors.surface.light,
9657
+ [vars$o.borderStyle]: 'solid',
9658
+ [vars$o.borderRadius]: globalRefs$j.radius.sm,
9659
+ [vars$o.outlineColor]: 'transparent',
9660
+ [vars$o.borderWidth]: globalRefs$j.border.xs,
9663
9661
 
9664
9662
  _hover: {
9665
- [vars$n.backgroundColor]: globalRefs$j.colors.surface.highlight,
9663
+ [vars$o.backgroundColor]: globalRefs$j.colors.surface.highlight,
9666
9664
  },
9667
9665
 
9668
9666
  _focused: {
9669
- [vars$n.outlineColor]: globalRefs$j.colors.surface.light,
9667
+ [vars$o.outlineColor]: globalRefs$j.colors.surface.light,
9670
9668
  },
9671
9669
 
9672
9670
  _selected: {
9673
- [vars$n.borderColor]: globalRefs$j.colors.surface.contrast,
9674
- [vars$n.backgroundColor]: globalRefs$j.colors.surface.contrast,
9675
- [vars$n.labelTextColor]: globalRefs$j.colors.surface.main,
9671
+ [vars$o.borderColor]: globalRefs$j.colors.surface.contrast,
9672
+ [vars$o.backgroundColor]: globalRefs$j.colors.surface.contrast,
9673
+ [vars$o.labelTextColor]: globalRefs$j.colors.surface.main,
9676
9674
  },
9677
9675
  };
9678
9676
 
9679
9677
  var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
9680
9678
  __proto__: null,
9681
9679
  default: buttonSelectionGroupItem,
9682
- vars: vars$n
9680
+ vars: vars$o
9683
9681
  });
9684
9682
 
9685
9683
  const createBaseButtonSelectionGroupInternalClass = (componentName) => {
@@ -9778,10 +9776,10 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
9778
9776
  return BaseButtonSelectionGroupInternalClass;
9779
9777
  };
9780
9778
 
9781
- const componentName$p = getComponentName('button-selection-group-internal');
9779
+ const componentName$q = getComponentName('button-selection-group-internal');
9782
9780
 
9783
9781
  class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
9784
- componentName$p
9782
+ componentName$q
9785
9783
  ) {
9786
9784
  getSelectedNode() {
9787
9785
  return this.items.find((item) => item.hasAttribute('selected'));
@@ -10013,7 +10011,7 @@ const buttonSelectionGroupStyles = `
10013
10011
  ${resetInputCursor('vaadin-text-field')}
10014
10012
  `;
10015
10013
 
10016
- const componentName$o = getComponentName('button-selection-group');
10014
+ const componentName$p = getComponentName('button-selection-group');
10017
10015
 
10018
10016
  const buttonSelectionGroupMixin = (superclass) =>
10019
10017
  class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -10022,19 +10020,19 @@ const buttonSelectionGroupMixin = (superclass) =>
10022
10020
  const template = document.createElement('template');
10023
10021
 
10024
10022
  template.innerHTML = `
10025
- <${componentName$p}
10023
+ <${componentName$q}
10026
10024
  name="button-selection-group"
10027
10025
  slot="input"
10028
10026
  tabindex="-1"
10029
10027
  part="internal-component"
10030
10028
  >
10031
10029
  <slot></slot>
10032
- </${componentName$p}>
10030
+ </${componentName$q}>
10033
10031
  `;
10034
10032
 
10035
10033
  this.baseElement.appendChild(template.content.cloneNode(true));
10036
10034
 
10037
- this.inputElement = this.shadowRoot.querySelector(componentName$p);
10035
+ this.inputElement = this.shadowRoot.querySelector(componentName$q);
10038
10036
 
10039
10037
  forwardAttrs(this, this.inputElement, {
10040
10038
  includeAttrs: ['size', 'default-value', 'allow-deselect'],
@@ -10059,7 +10057,7 @@ const ButtonSelectionGroupClass = compose(
10059
10057
  wrappedEleName: 'vaadin-text-field',
10060
10058
  style: () => buttonSelectionGroupStyles,
10061
10059
  excludeAttrsSync: ['tabindex'],
10062
- componentName: componentName$o,
10060
+ componentName: componentName$p,
10063
10061
  })
10064
10062
  );
10065
10063
 
@@ -10075,22 +10073,22 @@ const createBaseButtonSelectionGroupMappings = (vars) => ({
10075
10073
  [vars.hostWidth]: refs.width,
10076
10074
  });
10077
10075
 
10078
- const vars$m = ButtonSelectionGroupClass.cssVarList;
10076
+ const vars$n = ButtonSelectionGroupClass.cssVarList;
10079
10077
 
10080
10078
  const buttonSelectionGroup = {
10081
- ...createBaseButtonSelectionGroupMappings(vars$m),
10079
+ ...createBaseButtonSelectionGroupMappings(vars$n),
10082
10080
  };
10083
10081
 
10084
10082
  var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
10085
10083
  __proto__: null,
10086
10084
  default: buttonSelectionGroup,
10087
- vars: vars$m
10085
+ vars: vars$n
10088
10086
  });
10089
10087
 
10090
- const componentName$n = getComponentName('button-multi-selection-group-internal');
10088
+ const componentName$o = getComponentName('button-multi-selection-group-internal');
10091
10089
 
10092
10090
  class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
10093
- componentName$n
10091
+ componentName$o
10094
10092
  ) {
10095
10093
  #getSelectedNodes() {
10096
10094
  return this.items.filter((item) => item.hasAttribute('selected'));
@@ -10193,7 +10191,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
10193
10191
  }
10194
10192
  }
10195
10193
 
10196
- const componentName$m = getComponentName('button-multi-selection-group');
10194
+ const componentName$n = getComponentName('button-multi-selection-group');
10197
10195
 
10198
10196
  const buttonMultiSelectionGroupMixin = (superclass) =>
10199
10197
  class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -10202,19 +10200,19 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
10202
10200
  const template = document.createElement('template');
10203
10201
 
10204
10202
  template.innerHTML = `
10205
- <${componentName$n}
10203
+ <${componentName$o}
10206
10204
  name="button-selection-group"
10207
10205
  slot="input"
10208
10206
  tabindex="-1"
10209
10207
  part="internal-component"
10210
10208
  >
10211
10209
  <slot></slot>
10212
- </${componentName$n}>
10210
+ </${componentName$o}>
10213
10211
  `;
10214
10212
 
10215
10213
  this.baseElement.appendChild(template.content.cloneNode(true));
10216
10214
 
10217
- this.inputElement = this.shadowRoot.querySelector(componentName$n);
10215
+ this.inputElement = this.shadowRoot.querySelector(componentName$o);
10218
10216
 
10219
10217
  forwardAttrs(this, this.inputElement, {
10220
10218
  includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
@@ -10239,23 +10237,23 @@ const ButtonMultiSelectionGroupClass = compose(
10239
10237
  wrappedEleName: 'vaadin-text-field',
10240
10238
  style: () => buttonSelectionGroupStyles,
10241
10239
  excludeAttrsSync: ['tabindex'],
10242
- componentName: componentName$m,
10240
+ componentName: componentName$n,
10243
10241
  })
10244
10242
  );
10245
10243
 
10246
- const vars$l = ButtonMultiSelectionGroupClass.cssVarList;
10244
+ const vars$m = ButtonMultiSelectionGroupClass.cssVarList;
10247
10245
 
10248
10246
  const buttonMultiSelectionGroup = {
10249
- ...createBaseButtonSelectionGroupMappings(vars$l),
10247
+ ...createBaseButtonSelectionGroupMappings(vars$m),
10250
10248
  };
10251
10249
 
10252
10250
  var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
10253
10251
  __proto__: null,
10254
10252
  default: buttonMultiSelectionGroup,
10255
- vars: vars$l
10253
+ vars: vars$m
10256
10254
  });
10257
10255
 
10258
- const componentName$l = getComponentName('modal');
10256
+ const componentName$m = getComponentName('modal');
10259
10257
 
10260
10258
  const customMixin$5 = (superclass) =>
10261
10259
  class ModalMixinClass extends superclass {
@@ -10354,7 +10352,7 @@ const ModalClass = compose(
10354
10352
  wrappedEleName: 'vaadin-dialog',
10355
10353
  style: () => ``,
10356
10354
  excludeAttrsSync: ['tabindex', 'opened'],
10357
- componentName: componentName$l,
10355
+ componentName: componentName$m,
10358
10356
  })
10359
10357
  );
10360
10358
 
@@ -10368,14 +10366,14 @@ const modal = {
10368
10366
  [compVars$2.overlayWidth]: '540px',
10369
10367
  };
10370
10368
 
10371
- const vars$k = {
10369
+ const vars$l = {
10372
10370
  ...compVars$2,
10373
10371
  };
10374
10372
 
10375
10373
  var modal$1 = /*#__PURE__*/Object.freeze({
10376
10374
  __proto__: null,
10377
10375
  default: modal,
10378
- vars: vars$k
10376
+ vars: vars$l
10379
10377
  });
10380
10378
 
10381
10379
  const isValidDataType = (data) => {
@@ -10451,7 +10449,7 @@ const defaultRowDetailsRenderer = (item, itemLabelsMapping) => {
10451
10449
  `;
10452
10450
  };
10453
10451
 
10454
- const componentName$k = getComponentName('grid');
10452
+ const componentName$l = getComponentName('grid');
10455
10453
 
10456
10454
  const GridMixin = (superclass) =>
10457
10455
  class GridMixinClass extends superclass {
@@ -10805,52 +10803,52 @@ const GridClass = compose(
10805
10803
  /*!css*/
10806
10804
  `,
10807
10805
  excludeAttrsSync: ['columns', 'tabindex'],
10808
- componentName: componentName$k,
10806
+ componentName: componentName$l,
10809
10807
  })
10810
10808
  );
10811
10809
 
10812
10810
  const globalRefs$g = getThemeRefs(globals);
10813
- const vars$j = GridClass.cssVarList;
10811
+ const vars$k = GridClass.cssVarList;
10814
10812
 
10815
10813
  const grid = {
10816
- [vars$j.hostWidth]: '100%',
10817
- [vars$j.hostHeight]: '100%',
10818
- [vars$j.hostMinHeight]: '400px',
10819
- [vars$j.fontWeight]: '400',
10820
- [vars$j.backgroundColor]: globalRefs$g.colors.surface.main,
10821
-
10822
- [vars$j.fontSize]: refs.fontSize,
10823
- [vars$j.fontFamily]: refs.fontFamily,
10824
-
10825
- [vars$j.sortIndicatorsColor]: globalRefs$g.colors.surface.light,
10826
- [vars$j.activeSortIndicator]: globalRefs$g.colors.surface.dark,
10827
- [vars$j.resizeHandleColor]: globalRefs$g.colors.surface.light,
10828
-
10829
- [vars$j.borderWidth]: refs.borderWidth,
10830
- [vars$j.borderStyle]: refs.borderStyle,
10831
- [vars$j.borderRadius]: refs.borderRadius,
10832
- [vars$j.borderColor]: 'transparent',
10833
-
10834
- [vars$j.headerRowTextColor]: globalRefs$g.colors.surface.dark,
10835
- [vars$j.separatorColor]: globalRefs$g.colors.surface.light,
10836
-
10837
- [vars$j.valueTextColor]: globalRefs$g.colors.surface.contrast,
10838
- [vars$j.selectedBackgroundColor]: globalRefs$g.colors.surface.highlight,
10839
- [vars$j.hostDirection]: globalRefs$g.direction,
10840
-
10841
- [vars$j.toggleDetailsPanelButtonSize]: '1em',
10842
- [vars$j.toggleDetailsPanelButtonOpenedColor]: globalRefs$g.colors.surface.contrast,
10843
- [vars$j.toggleDetailsPanelButtonClosedColor]: globalRefs$g.colors.surface.light,
10844
- [vars$j.toggleDetailsPanelButtonCursor]: 'pointer',
10845
- [vars$j.detailsPanelBackgroundColor]: globalRefs$g.colors.surface.highlight,
10846
- [vars$j.detailsPanelBorderTopColor]: globalRefs$g.colors.surface.light,
10847
- [vars$j.detailsPanelLabelsColor]: globalRefs$g.colors.surface.dark,
10848
- [vars$j.detailsPanelLabelsFontSize]: '0.8em',
10849
- [vars$j.detailsPanelItemsGap]: '2em',
10850
- [vars$j.detailsPanelPadding]: '12px 0',
10814
+ [vars$k.hostWidth]: '100%',
10815
+ [vars$k.hostHeight]: '100%',
10816
+ [vars$k.hostMinHeight]: '400px',
10817
+ [vars$k.fontWeight]: '400',
10818
+ [vars$k.backgroundColor]: globalRefs$g.colors.surface.main,
10819
+
10820
+ [vars$k.fontSize]: refs.fontSize,
10821
+ [vars$k.fontFamily]: refs.fontFamily,
10822
+
10823
+ [vars$k.sortIndicatorsColor]: globalRefs$g.colors.surface.light,
10824
+ [vars$k.activeSortIndicator]: globalRefs$g.colors.surface.dark,
10825
+ [vars$k.resizeHandleColor]: globalRefs$g.colors.surface.light,
10826
+
10827
+ [vars$k.borderWidth]: refs.borderWidth,
10828
+ [vars$k.borderStyle]: refs.borderStyle,
10829
+ [vars$k.borderRadius]: refs.borderRadius,
10830
+ [vars$k.borderColor]: 'transparent',
10831
+
10832
+ [vars$k.headerRowTextColor]: globalRefs$g.colors.surface.dark,
10833
+ [vars$k.separatorColor]: globalRefs$g.colors.surface.light,
10834
+
10835
+ [vars$k.valueTextColor]: globalRefs$g.colors.surface.contrast,
10836
+ [vars$k.selectedBackgroundColor]: globalRefs$g.colors.surface.highlight,
10837
+ [vars$k.hostDirection]: globalRefs$g.direction,
10838
+
10839
+ [vars$k.toggleDetailsPanelButtonSize]: '1em',
10840
+ [vars$k.toggleDetailsPanelButtonOpenedColor]: globalRefs$g.colors.surface.contrast,
10841
+ [vars$k.toggleDetailsPanelButtonClosedColor]: globalRefs$g.colors.surface.light,
10842
+ [vars$k.toggleDetailsPanelButtonCursor]: 'pointer',
10843
+ [vars$k.detailsPanelBackgroundColor]: globalRefs$g.colors.surface.highlight,
10844
+ [vars$k.detailsPanelBorderTopColor]: globalRefs$g.colors.surface.light,
10845
+ [vars$k.detailsPanelLabelsColor]: globalRefs$g.colors.surface.dark,
10846
+ [vars$k.detailsPanelLabelsFontSize]: '0.8em',
10847
+ [vars$k.detailsPanelItemsGap]: '2em',
10848
+ [vars$k.detailsPanelPadding]: '12px 0',
10851
10849
 
10852
10850
  _bordered: {
10853
- [vars$j.borderColor]: refs.borderColor,
10851
+ [vars$k.borderColor]: refs.borderColor,
10854
10852
  },
10855
10853
  };
10856
10854
 
@@ -10858,10 +10856,10 @@ var grid$1 = /*#__PURE__*/Object.freeze({
10858
10856
  __proto__: null,
10859
10857
  default: grid,
10860
10858
  grid: grid,
10861
- vars: vars$j
10859
+ vars: vars$k
10862
10860
  });
10863
10861
 
10864
- const componentName$j = getComponentName('notification-card');
10862
+ const componentName$k = getComponentName('notification-card');
10865
10863
 
10866
10864
  const notificationCardMixin = (superclass) =>
10867
10865
  class NotificationCardMixinClass extends superclass {
@@ -10969,54 +10967,54 @@ const NotificationCardClass = compose(
10969
10967
  }
10970
10968
  `,
10971
10969
  excludeAttrsSync: ['tabindex'],
10972
- componentName: componentName$j,
10970
+ componentName: componentName$k,
10973
10971
  })
10974
10972
  );
10975
10973
 
10976
10974
  const globalRefs$f = getThemeRefs(globals);
10977
- const vars$i = NotificationCardClass.cssVarList;
10975
+ const vars$j = NotificationCardClass.cssVarList;
10978
10976
 
10979
10977
  const shadowColor$2 = '#00000020';
10980
10978
 
10981
10979
  const notification = {
10982
- [vars$i.hostMinWidth]: '415px',
10983
- [vars$i.fontFamily]: globalRefs$f.fonts.font1.family,
10984
- [vars$i.fontSize]: globalRefs$f.typography.body1.size,
10985
- [vars$i.backgroundColor]: globalRefs$f.colors.surface.main,
10986
- [vars$i.textColor]: globalRefs$f.colors.surface.contrast,
10987
- [vars$i.boxShadow]: `${globalRefs$f.shadow.wide.xl} ${shadowColor$2}, ${globalRefs$f.shadow.narrow.xl} ${shadowColor$2}`,
10988
- [vars$i.verticalPadding]: '0.625em',
10989
- [vars$i.horizontalPadding]: '1.5em',
10990
- [vars$i.borderRadius]: globalRefs$f.radius.xs,
10980
+ [vars$j.hostMinWidth]: '415px',
10981
+ [vars$j.fontFamily]: globalRefs$f.fonts.font1.family,
10982
+ [vars$j.fontSize]: globalRefs$f.typography.body1.size,
10983
+ [vars$j.backgroundColor]: globalRefs$f.colors.surface.main,
10984
+ [vars$j.textColor]: globalRefs$f.colors.surface.contrast,
10985
+ [vars$j.boxShadow]: `${globalRefs$f.shadow.wide.xl} ${shadowColor$2}, ${globalRefs$f.shadow.narrow.xl} ${shadowColor$2}`,
10986
+ [vars$j.verticalPadding]: '0.625em',
10987
+ [vars$j.horizontalPadding]: '1.5em',
10988
+ [vars$j.borderRadius]: globalRefs$f.radius.xs,
10991
10989
 
10992
10990
  _bordered: {
10993
- [vars$i.borderWidth]: globalRefs$f.border.sm,
10994
- [vars$i.borderStyle]: 'solid',
10995
- [vars$i.borderColor]: 'transparent',
10991
+ [vars$j.borderWidth]: globalRefs$f.border.sm,
10992
+ [vars$j.borderStyle]: 'solid',
10993
+ [vars$j.borderColor]: 'transparent',
10996
10994
  },
10997
10995
 
10998
10996
  size: {
10999
- xs: { [vars$i.fontSize]: '12px' },
11000
- sm: { [vars$i.fontSize]: '14px' },
11001
- md: { [vars$i.fontSize]: '16px' },
11002
- lg: { [vars$i.fontSize]: '18px' },
10997
+ xs: { [vars$j.fontSize]: '12px' },
10998
+ sm: { [vars$j.fontSize]: '14px' },
10999
+ md: { [vars$j.fontSize]: '16px' },
11000
+ lg: { [vars$j.fontSize]: '18px' },
11003
11001
  },
11004
11002
 
11005
11003
  mode: {
11006
11004
  primary: {
11007
- [vars$i.backgroundColor]: globalRefs$f.colors.primary.main,
11008
- [vars$i.textColor]: globalRefs$f.colors.primary.contrast,
11009
- [vars$i.borderColor]: globalRefs$f.colors.primary.light,
11005
+ [vars$j.backgroundColor]: globalRefs$f.colors.primary.main,
11006
+ [vars$j.textColor]: globalRefs$f.colors.primary.contrast,
11007
+ [vars$j.borderColor]: globalRefs$f.colors.primary.light,
11010
11008
  },
11011
11009
  success: {
11012
- [vars$i.backgroundColor]: globalRefs$f.colors.success.main,
11013
- [vars$i.textColor]: globalRefs$f.colors.success.contrast,
11014
- [vars$i.borderColor]: globalRefs$f.colors.success.light,
11010
+ [vars$j.backgroundColor]: globalRefs$f.colors.success.main,
11011
+ [vars$j.textColor]: globalRefs$f.colors.success.contrast,
11012
+ [vars$j.borderColor]: globalRefs$f.colors.success.light,
11015
11013
  },
11016
11014
  error: {
11017
- [vars$i.backgroundColor]: globalRefs$f.colors.error.main,
11018
- [vars$i.textColor]: globalRefs$f.colors.error.contrast,
11019
- [vars$i.borderColor]: globalRefs$f.colors.error.light,
11015
+ [vars$j.backgroundColor]: globalRefs$f.colors.error.main,
11016
+ [vars$j.textColor]: globalRefs$f.colors.error.contrast,
11017
+ [vars$j.borderColor]: globalRefs$f.colors.error.light,
11020
11018
  },
11021
11019
  },
11022
11020
  };
@@ -11024,10 +11022,10 @@ const notification = {
11024
11022
  var notificationCard = /*#__PURE__*/Object.freeze({
11025
11023
  __proto__: null,
11026
11024
  default: notification,
11027
- vars: vars$i
11025
+ vars: vars$j
11028
11026
  });
11029
11027
 
11030
- const componentName$i = getComponentName('multi-select-combo-box');
11028
+ const componentName$j = getComponentName('multi-select-combo-box');
11031
11029
 
11032
11030
  const multiSelectComboBoxMixin = (superclass) =>
11033
11031
  class MultiSelectComboBoxMixinClass extends superclass {
@@ -11661,93 +11659,93 @@ const MultiSelectComboBoxClass = compose(
11661
11659
  // Note: we exclude `placeholder` because the vaadin component observes it and
11662
11660
  // tries to override it, causing us to lose the user set placeholder.
11663
11661
  excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],
11664
- componentName: componentName$i,
11662
+ componentName: componentName$j,
11665
11663
  includeForwardProps: ['items', 'renderer', 'selectedItems'],
11666
11664
  })
11667
11665
  );
11668
11666
 
11669
11667
  const globalRefs$e = getThemeRefs(globals);
11670
- const vars$h = MultiSelectComboBoxClass.cssVarList;
11668
+ const vars$i = MultiSelectComboBoxClass.cssVarList;
11671
11669
 
11672
11670
  const multiSelectComboBox = {
11673
- [vars$h.hostWidth]: refs.width,
11674
- [vars$h.hostDirection]: refs.direction,
11675
- [vars$h.fontSize]: refs.fontSize,
11676
- [vars$h.fontFamily]: refs.fontFamily,
11677
- [vars$h.labelFontSize]: refs.labelFontSize,
11678
- [vars$h.labelFontWeight]: refs.labelFontWeight,
11679
- [vars$h.labelTextColor]: refs.labelTextColor,
11680
- [vars$h.errorMessageTextColor]: refs.errorMessageTextColor,
11681
- [vars$h.inputBorderColor]: refs.borderColor,
11682
- [vars$h.inputBorderWidth]: refs.borderWidth,
11683
- [vars$h.inputBorderStyle]: refs.borderStyle,
11684
- [vars$h.inputBorderRadius]: refs.borderRadius,
11685
- [vars$h.inputOutlineColor]: refs.outlineColor,
11686
- [vars$h.inputOutlineOffset]: refs.outlineOffset,
11687
- [vars$h.inputOutlineWidth]: refs.outlineWidth,
11688
- [vars$h.inputOutlineStyle]: refs.outlineStyle,
11689
- [vars$h.labelRequiredIndicator]: refs.requiredIndicator,
11690
- [vars$h.inputValueTextColor]: refs.valueTextColor,
11691
- [vars$h.inputPlaceholderTextColor]: refs.placeholderTextColor,
11692
- [vars$h.inputBackgroundColor]: refs.backgroundColor,
11693
- [vars$h.inputHorizontalPadding]: refs.horizontalPadding,
11694
- [vars$h.inputVerticalPadding]: refs.verticalPadding,
11695
- [vars$h.inputHeight]: refs.inputHeight,
11696
- [vars$h.inputDropdownButtonColor]: globalRefs$e.colors.surface.dark,
11697
- [vars$h.inputDropdownButtonCursor]: 'pointer',
11698
- [vars$h.inputDropdownButtonSize]: refs.toggleButtonSize,
11699
- [vars$h.inputDropdownButtonOffset]: globalRefs$e.spacing.xs,
11700
- [vars$h.overlayItemPaddingInlineStart]: globalRefs$e.spacing.xs,
11701
- [vars$h.overlayItemPaddingInlineEnd]: globalRefs$e.spacing.lg,
11702
- [vars$h.chipFontSize]: refs.chipFontSize,
11703
- [vars$h.chipTextColor]: globalRefs$e.colors.surface.contrast,
11704
- [vars$h.chipBackgroundColor]: globalRefs$e.colors.surface.light,
11705
- [vars$h.labelPosition]: refs.labelPosition,
11706
- [vars$h.labelTopPosition]: refs.labelTopPosition,
11707
- [vars$h.labelLeftPosition]: refs.labelLeftPosition,
11708
- [vars$h.labelHorizontalPosition]: refs.labelHorizontalPosition,
11709
- [vars$h.inputTransformY]: refs.inputTransformY,
11710
- [vars$h.inputTransition]: refs.inputTransition,
11711
- [vars$h.marginInlineStart]: refs.marginInlineStart,
11712
- [vars$h.placeholderOpacity]: refs.placeholderOpacity,
11713
- [vars$h.inputVerticalAlignment]: refs.inputVerticalAlignment,
11671
+ [vars$i.hostWidth]: refs.width,
11672
+ [vars$i.hostDirection]: refs.direction,
11673
+ [vars$i.fontSize]: refs.fontSize,
11674
+ [vars$i.fontFamily]: refs.fontFamily,
11675
+ [vars$i.labelFontSize]: refs.labelFontSize,
11676
+ [vars$i.labelFontWeight]: refs.labelFontWeight,
11677
+ [vars$i.labelTextColor]: refs.labelTextColor,
11678
+ [vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
11679
+ [vars$i.inputBorderColor]: refs.borderColor,
11680
+ [vars$i.inputBorderWidth]: refs.borderWidth,
11681
+ [vars$i.inputBorderStyle]: refs.borderStyle,
11682
+ [vars$i.inputBorderRadius]: refs.borderRadius,
11683
+ [vars$i.inputOutlineColor]: refs.outlineColor,
11684
+ [vars$i.inputOutlineOffset]: refs.outlineOffset,
11685
+ [vars$i.inputOutlineWidth]: refs.outlineWidth,
11686
+ [vars$i.inputOutlineStyle]: refs.outlineStyle,
11687
+ [vars$i.labelRequiredIndicator]: refs.requiredIndicator,
11688
+ [vars$i.inputValueTextColor]: refs.valueTextColor,
11689
+ [vars$i.inputPlaceholderTextColor]: refs.placeholderTextColor,
11690
+ [vars$i.inputBackgroundColor]: refs.backgroundColor,
11691
+ [vars$i.inputHorizontalPadding]: refs.horizontalPadding,
11692
+ [vars$i.inputVerticalPadding]: refs.verticalPadding,
11693
+ [vars$i.inputHeight]: refs.inputHeight,
11694
+ [vars$i.inputDropdownButtonColor]: globalRefs$e.colors.surface.dark,
11695
+ [vars$i.inputDropdownButtonCursor]: 'pointer',
11696
+ [vars$i.inputDropdownButtonSize]: refs.toggleButtonSize,
11697
+ [vars$i.inputDropdownButtonOffset]: globalRefs$e.spacing.xs,
11698
+ [vars$i.overlayItemPaddingInlineStart]: globalRefs$e.spacing.xs,
11699
+ [vars$i.overlayItemPaddingInlineEnd]: globalRefs$e.spacing.lg,
11700
+ [vars$i.chipFontSize]: refs.chipFontSize,
11701
+ [vars$i.chipTextColor]: globalRefs$e.colors.surface.contrast,
11702
+ [vars$i.chipBackgroundColor]: globalRefs$e.colors.surface.light,
11703
+ [vars$i.labelPosition]: refs.labelPosition,
11704
+ [vars$i.labelTopPosition]: refs.labelTopPosition,
11705
+ [vars$i.labelLeftPosition]: refs.labelLeftPosition,
11706
+ [vars$i.labelHorizontalPosition]: refs.labelHorizontalPosition,
11707
+ [vars$i.inputTransformY]: refs.inputTransformY,
11708
+ [vars$i.inputTransition]: refs.inputTransition,
11709
+ [vars$i.marginInlineStart]: refs.marginInlineStart,
11710
+ [vars$i.placeholderOpacity]: refs.placeholderOpacity,
11711
+ [vars$i.inputVerticalAlignment]: refs.inputVerticalAlignment,
11714
11712
 
11715
11713
  labelType: {
11716
11714
  floating: {
11717
- [vars$h.inputHorizontalPadding]: '0.25em',
11715
+ [vars$i.inputHorizontalPadding]: '0.25em',
11718
11716
  _hasValue: {
11719
- [vars$h.inputHorizontalPadding]: '0.45em',
11717
+ [vars$i.inputHorizontalPadding]: '0.45em',
11720
11718
  },
11721
11719
  },
11722
11720
  },
11723
11721
 
11724
11722
  _readonly: {
11725
- [vars$h.inputDropdownButtonCursor]: 'default',
11723
+ [vars$i.inputDropdownButtonCursor]: 'default',
11726
11724
  },
11727
11725
 
11728
11726
  // Overlay theme exposed via the component:
11729
- [vars$h.overlayFontSize]: refs.fontSize,
11730
- [vars$h.overlayFontFamily]: refs.fontFamily,
11731
- [vars$h.overlayCursor]: 'pointer',
11732
- [vars$h.overlayItemBoxShadow]: 'none',
11733
- [vars$h.overlayBackground]: refs.backgroundColor,
11734
- [vars$h.overlayTextColor]: refs.valueTextColor,
11727
+ [vars$i.overlayFontSize]: refs.fontSize,
11728
+ [vars$i.overlayFontFamily]: refs.fontFamily,
11729
+ [vars$i.overlayCursor]: 'pointer',
11730
+ [vars$i.overlayItemBoxShadow]: 'none',
11731
+ [vars$i.overlayBackground]: refs.backgroundColor,
11732
+ [vars$i.overlayTextColor]: refs.valueTextColor,
11735
11733
 
11736
11734
  // Overlay direct theme:
11737
- [vars$h.overlay.minHeight]: '400px',
11738
- [vars$h.overlay.margin]: '0',
11735
+ [vars$i.overlay.minHeight]: '400px',
11736
+ [vars$i.overlay.margin]: '0',
11739
11737
  };
11740
11738
 
11741
11739
  var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
11742
11740
  __proto__: null,
11743
11741
  default: multiSelectComboBox,
11744
11742
  multiSelectComboBox: multiSelectComboBox,
11745
- vars: vars$h
11743
+ vars: vars$i
11746
11744
  });
11747
11745
 
11748
- const componentName$h = getComponentName('badge');
11746
+ const componentName$i = getComponentName('badge');
11749
11747
 
11750
- class RawBadge extends createBaseClass({ componentName: componentName$h, baseSelector: ':host > div' }) {
11748
+ class RawBadge extends createBaseClass({ componentName: componentName$i, baseSelector: ':host > div' }) {
11751
11749
  constructor() {
11752
11750
  super();
11753
11751
 
@@ -11799,65 +11797,65 @@ const BadgeClass = compose(
11799
11797
  )(RawBadge);
11800
11798
 
11801
11799
  const globalRefs$d = getThemeRefs(globals);
11802
- const vars$g = BadgeClass.cssVarList;
11800
+ const vars$h = BadgeClass.cssVarList;
11803
11801
 
11804
11802
  const badge$2 = {
11805
- [vars$g.hostWidth]: 'fit-content',
11806
- [vars$g.hostDirection]: globalRefs$d.direction,
11803
+ [vars$h.hostWidth]: 'fit-content',
11804
+ [vars$h.hostDirection]: globalRefs$d.direction,
11807
11805
 
11808
- [vars$g.textAlign]: 'center',
11806
+ [vars$h.textAlign]: 'center',
11809
11807
 
11810
- [vars$g.fontFamily]: globalRefs$d.fonts.font1.family,
11811
- [vars$g.fontWeight]: '400',
11808
+ [vars$h.fontFamily]: globalRefs$d.fonts.font1.family,
11809
+ [vars$h.fontWeight]: '400',
11812
11810
 
11813
- [vars$g.verticalPadding]: '0.25em',
11814
- [vars$g.horizontalPadding]: '0.5em',
11811
+ [vars$h.verticalPadding]: '0.25em',
11812
+ [vars$h.horizontalPadding]: '0.5em',
11815
11813
 
11816
- [vars$g.borderWidth]: globalRefs$d.border.xs,
11817
- [vars$g.borderRadius]: globalRefs$d.radius.xs,
11818
- [vars$g.borderColor]: 'transparent',
11819
- [vars$g.borderStyle]: 'solid',
11814
+ [vars$h.borderWidth]: globalRefs$d.border.xs,
11815
+ [vars$h.borderRadius]: globalRefs$d.radius.xs,
11816
+ [vars$h.borderColor]: 'transparent',
11817
+ [vars$h.borderStyle]: 'solid',
11820
11818
 
11821
11819
  _fullWidth: {
11822
- [vars$g.hostWidth]: '100%',
11820
+ [vars$h.hostWidth]: '100%',
11823
11821
  },
11824
11822
 
11825
11823
  size: {
11826
- xs: { [vars$g.fontSize]: '12px' },
11827
- sm: { [vars$g.fontSize]: '14px' },
11828
- md: { [vars$g.fontSize]: '16px' },
11829
- lg: { [vars$g.fontSize]: '18px' },
11824
+ xs: { [vars$h.fontSize]: '12px' },
11825
+ sm: { [vars$h.fontSize]: '14px' },
11826
+ md: { [vars$h.fontSize]: '16px' },
11827
+ lg: { [vars$h.fontSize]: '18px' },
11830
11828
  },
11831
11829
 
11832
11830
  mode: {
11833
11831
  default: {
11834
- [vars$g.textColor]: globalRefs$d.colors.surface.dark,
11832
+ [vars$h.textColor]: globalRefs$d.colors.surface.dark,
11835
11833
  _bordered: {
11836
- [vars$g.borderColor]: globalRefs$d.colors.surface.light,
11834
+ [vars$h.borderColor]: globalRefs$d.colors.surface.light,
11837
11835
  },
11838
11836
  },
11839
11837
  primary: {
11840
- [vars$g.textColor]: globalRefs$d.colors.primary.main,
11838
+ [vars$h.textColor]: globalRefs$d.colors.primary.main,
11841
11839
  _bordered: {
11842
- [vars$g.borderColor]: globalRefs$d.colors.primary.light,
11840
+ [vars$h.borderColor]: globalRefs$d.colors.primary.light,
11843
11841
  },
11844
11842
  },
11845
11843
  secondary: {
11846
- [vars$g.textColor]: globalRefs$d.colors.secondary.main,
11844
+ [vars$h.textColor]: globalRefs$d.colors.secondary.main,
11847
11845
  _bordered: {
11848
- [vars$g.borderColor]: globalRefs$d.colors.secondary.light,
11846
+ [vars$h.borderColor]: globalRefs$d.colors.secondary.light,
11849
11847
  },
11850
11848
  },
11851
11849
  error: {
11852
- [vars$g.textColor]: globalRefs$d.colors.error.main,
11850
+ [vars$h.textColor]: globalRefs$d.colors.error.main,
11853
11851
  _bordered: {
11854
- [vars$g.borderColor]: globalRefs$d.colors.error.light,
11852
+ [vars$h.borderColor]: globalRefs$d.colors.error.light,
11855
11853
  },
11856
11854
  },
11857
11855
  success: {
11858
- [vars$g.textColor]: globalRefs$d.colors.success.main,
11856
+ [vars$h.textColor]: globalRefs$d.colors.success.main,
11859
11857
  _bordered: {
11860
- [vars$g.borderColor]: globalRefs$d.colors.success.light,
11858
+ [vars$h.borderColor]: globalRefs$d.colors.success.light,
11861
11859
  },
11862
11860
  },
11863
11861
  },
@@ -11866,11 +11864,11 @@ const badge$2 = {
11866
11864
  var badge$3 = /*#__PURE__*/Object.freeze({
11867
11865
  __proto__: null,
11868
11866
  default: badge$2,
11869
- vars: vars$g
11867
+ vars: vars$h
11870
11868
  });
11871
11869
 
11872
- const componentName$g = getComponentName('avatar');
11873
- class RawAvatar extends createBaseClass({ componentName: componentName$g, baseSelector: ':host > .wrapper' }) {
11870
+ const componentName$h = getComponentName('avatar');
11871
+ class RawAvatar extends createBaseClass({ componentName: componentName$h, baseSelector: ':host > .wrapper' }) {
11874
11872
  constructor() {
11875
11873
  super();
11876
11874
 
@@ -12009,21 +12007,21 @@ const avatar = {
12009
12007
  },
12010
12008
  };
12011
12009
 
12012
- const vars$f = {
12010
+ const vars$g = {
12013
12011
  ...compVars$1,
12014
12012
  };
12015
12013
 
12016
12014
  var avatar$1 = /*#__PURE__*/Object.freeze({
12017
12015
  __proto__: null,
12018
12016
  default: avatar,
12019
- vars: vars$f
12017
+ vars: vars$g
12020
12018
  });
12021
12019
 
12022
- const componentName$f = getComponentName('mappings-field-internal');
12020
+ const componentName$g = getComponentName('mappings-field-internal');
12023
12021
 
12024
- createBaseInputClass({ componentName: componentName$f, baseSelector: 'div' });
12022
+ createBaseInputClass({ componentName: componentName$g, baseSelector: 'div' });
12025
12023
 
12026
- const componentName$e = getComponentName('mappings-field');
12024
+ const componentName$f = getComponentName('mappings-field');
12027
12025
 
12028
12026
  const customMixin$4 = (superclass) =>
12029
12027
  class MappingsFieldMixinClass extends superclass {
@@ -12052,14 +12050,14 @@ const customMixin$4 = (superclass) =>
12052
12050
  const template = document.createElement('template');
12053
12051
 
12054
12052
  template.innerHTML = `
12055
- <${componentName$f}
12053
+ <${componentName$g}
12056
12054
  tabindex="-1"
12057
- ></${componentName$f}>
12055
+ ></${componentName$g}>
12058
12056
  `;
12059
12057
 
12060
12058
  this.baseElement.appendChild(template.content.cloneNode(true));
12061
12059
 
12062
- this.inputElement = this.shadowRoot.querySelector(componentName$f);
12060
+ this.inputElement = this.shadowRoot.querySelector(componentName$g);
12063
12061
 
12064
12062
  forwardAttrs(this, this.inputElement, {
12065
12063
  includeAttrs: [
@@ -12191,47 +12189,47 @@ const MappingsFieldClass = compose(
12191
12189
  'options',
12192
12190
  'error-message',
12193
12191
  ],
12194
- componentName: componentName$e,
12192
+ componentName: componentName$f,
12195
12193
  })
12196
12194
  );
12197
12195
 
12198
12196
  const globalRefs$b = getThemeRefs(globals);
12199
12197
 
12200
- const vars$e = MappingsFieldClass.cssVarList;
12198
+ const vars$f = MappingsFieldClass.cssVarList;
12201
12199
 
12202
12200
  const mappingsField = {
12203
- [vars$e.hostWidth]: refs.width,
12204
- [vars$e.hostDirection]: refs.direction,
12205
- [vars$e.fontSize]: refs.fontSize,
12206
- [vars$e.fontFamily]: refs.fontFamily,
12207
- [vars$e.separatorFontSize]: '14px',
12208
- [vars$e.labelsFontSize]: '14px',
12209
- [vars$e.labelsLineHeight]: '1',
12210
- [vars$e.labelsMarginBottom]: '6px',
12211
- [vars$e.labelTextColor]: refs.labelTextColor,
12212
- [vars$e.itemMarginBottom]: '1em',
12201
+ [vars$f.hostWidth]: refs.width,
12202
+ [vars$f.hostDirection]: refs.direction,
12203
+ [vars$f.fontSize]: refs.fontSize,
12204
+ [vars$f.fontFamily]: refs.fontFamily,
12205
+ [vars$f.separatorFontSize]: '14px',
12206
+ [vars$f.labelsFontSize]: '14px',
12207
+ [vars$f.labelsLineHeight]: '1',
12208
+ [vars$f.labelsMarginBottom]: '6px',
12209
+ [vars$f.labelTextColor]: refs.labelTextColor,
12210
+ [vars$f.itemMarginBottom]: '1em',
12213
12211
  // To be positioned correctly, the min width has to match the text field min width
12214
- [vars$e.valueLabelMinWidth]: refs.minWidth,
12212
+ [vars$f.valueLabelMinWidth]: refs.minWidth,
12215
12213
  // To be positioned correctly, the min width has to match the combo box field min width
12216
- [vars$e.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$b.border.xs})`,
12217
- [vars$e.separatorWidth]: '70px',
12218
- [vars$e.removeButtonWidth]: '60px',
12214
+ [vars$f.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$b.border.xs})`,
12215
+ [vars$f.separatorWidth]: '70px',
12216
+ [vars$f.removeButtonWidth]: '60px',
12219
12217
  };
12220
12218
 
12221
12219
  var mappingsField$1 = /*#__PURE__*/Object.freeze({
12222
12220
  __proto__: null,
12223
12221
  default: mappingsField,
12224
12222
  mappingsField: mappingsField,
12225
- vars: vars$e
12223
+ vars: vars$f
12226
12224
  });
12227
12225
 
12228
12226
  var deleteIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEgMTZDMSAxNy4xIDEuOSAxOCAzIDE4SDExQzEyLjEgMTggMTMgMTcuMSAxMyAxNlY0SDFWMTZaTTMgNkgxMVYxNkgzVjZaTTEwLjUgMUw5LjUgMEg0LjVMMy41IDFIMFYzSDE0VjFIMTAuNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
12229
12227
 
12230
12228
  var editIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjAwMDIgMC45OTIxNDlDMTAuMDAwMiAxLjAxNjE1IDEwLjAwMDIgMS4wMTYxNSAxMC4wMDAyIDEuMDE2MTVMOC4yMjQxOSAzLjAwODE1SDIuOTkyMTlDMi40NjQxOSAzLjAwODE1IDIuMDA4MTkgMy40NDAxNSAyLjAwODE5IDMuOTkyMTVWMTIuMDA4MkMyLjAwODE5IDEyLjUzNjIgMi40NDAxOSAxMi45OTIyIDIuOTkyMTkgMTIuOTkyMkg1LjUzNjE5QzUuODQ4MTkgMTMuMDQwMiA2LjE2MDE5IDEzLjA0MDIgNi40NzIxOSAxMi45OTIySDExLjAwODJDMTEuNTM2MiAxMi45OTIyIDExLjk5MjIgMTIuNTYwMiAxMS45OTIyIDEyLjAwODJWNy43ODQxNkwxMy45MzYyIDUuNjI0MTVMMTQuMDA4MiA1LjY3MjE1VjExLjk4NDJDMTQuMDA4MiAxMy42NjQyIDEyLjY2NDIgMTUuMDA4MiAxMS4wMDgyIDE1LjAwODJIMy4wMTYxOUMxLjMzNjE5IDE1LjAwODIgLTAuMDA3ODEyNSAxMy42NjQyIC0wLjAwNzgxMjUgMTEuOTg0MlYzLjk5MjE1Qy0wLjAwNzgxMjUgMi4zMzYxNSAxLjMzNjE5IDAuOTkyMTQ5IDMuMDE2MTkgMC45OTIxNDlIMTAuMDAwMlpNMTEuMjcyMiAyLjYyNDE1TDEyLjYxNjIgNC4xMTIxNUw3LjcyMDE5IDkuNjgwMTZDNy41MDQxOSA5LjkyMDE2IDYuODMyMTkgMTAuMjMyMiA1LjY4MDE5IDEwLjYxNjJDNS42NTYxOSAxMC42NDAyIDUuNjA4MTkgMTAuNjQwMiA1LjU2MDE5IDEwLjYxNjJDNS40NjQxOSAxMC41OTIyIDUuMzkyMTkgMTAuNDcyMiA1LjQ0MDE5IDEwLjM3NjJDNS43NTIxOSA5LjI0ODE2IDYuMDQwMTkgOC41NTIxNiA2LjI1NjE5IDguMzEyMTZMMTEuMjcyMiAyLjYyNDE1Wk0xMS45MjAyIDEuODU2MTVMMTMuMjg4MiAwLjMyMDE0OUMxMy42NDgyIC0wLjA4Nzg1MTYgMTQuMjcyMiAtMC4xMTE4NTIgMTQuNjgwMiAwLjI3MjE0OUMxNS4wODgyIDAuNjMyMTQ5IDE1LjExMjIgMS4yODAxNSAxNC43NTIyIDEuNjg4MTVMMTMuMjY0MiAzLjM2ODE1TDExLjkyMDIgMS44NTYxNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
12231
12229
 
12232
- const componentName$d = getComponentName('user-attribute');
12230
+ const componentName$e = getComponentName('user-attribute');
12233
12231
  class RawUserAttribute extends createBaseClass({
12234
- componentName: componentName$d,
12232
+ componentName: componentName$e,
12235
12233
  baseSelector: ':host > .root',
12236
12234
  }) {
12237
12235
  constructor() {
@@ -12466,31 +12464,31 @@ const UserAttributeClass = compose(
12466
12464
  )(RawUserAttribute);
12467
12465
 
12468
12466
  const globalRefs$a = getThemeRefs(globals);
12469
- const vars$d = UserAttributeClass.cssVarList;
12467
+ const vars$e = UserAttributeClass.cssVarList;
12470
12468
 
12471
12469
  const userAttribute = {
12472
- [vars$d.hostDirection]: globalRefs$a.direction,
12473
- [vars$d.labelTextWidth]: '150px',
12474
- [vars$d.valueTextWidth]: '200px',
12475
- [vars$d.badgeMaxWidth]: '85px',
12476
- [vars$d.itemsGap]: '16px',
12477
- [vars$d.hostMinWidth]: '530px',
12470
+ [vars$e.hostDirection]: globalRefs$a.direction,
12471
+ [vars$e.labelTextWidth]: '150px',
12472
+ [vars$e.valueTextWidth]: '200px',
12473
+ [vars$e.badgeMaxWidth]: '85px',
12474
+ [vars$e.itemsGap]: '16px',
12475
+ [vars$e.hostMinWidth]: '530px',
12478
12476
  _fullWidth: {
12479
- [vars$d.hostWidth]: '100%',
12477
+ [vars$e.hostWidth]: '100%',
12480
12478
  },
12481
12479
  };
12482
12480
 
12483
12481
  var userAttribute$1 = /*#__PURE__*/Object.freeze({
12484
12482
  __proto__: null,
12485
12483
  default: userAttribute,
12486
- vars: vars$d
12484
+ vars: vars$e
12487
12485
  });
12488
12486
 
12489
12487
  var greenVIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMEMzLjYgMCAwIDMuNiAwIDhDMCAxMi40IDMuNiAxNiA4IDE2QzEyLjQgMTYgMTYgMTIuNCAxNiA4QzE2IDMuNiAxMi40IDAgOCAwWk03LjEgMTEuN0wyLjkgNy42TDQuMyA2LjJMNyA4LjlMMTIgNEwxMy40IDUuNEw3LjEgMTEuN1oiIGZpbGw9IiM0Q0FGNTAiLz4KPC9zdmc+Cg==";
12490
12488
 
12491
- const componentName$c = getComponentName('user-auth-method');
12489
+ const componentName$d = getComponentName('user-auth-method');
12492
12490
  class RawUserAuthMethod extends createBaseClass({
12493
- componentName: componentName$c,
12491
+ componentName: componentName$d,
12494
12492
  baseSelector: ':host > .root',
12495
12493
  }) {
12496
12494
  constructor() {
@@ -12683,30 +12681,30 @@ const UserAuthMethodClass = compose(
12683
12681
  )(RawUserAuthMethod);
12684
12682
 
12685
12683
  const globalRefs$9 = getThemeRefs(globals);
12686
- const vars$c = UserAuthMethodClass.cssVarList;
12684
+ const vars$d = UserAuthMethodClass.cssVarList;
12687
12685
 
12688
12686
  const userAuthMethod = {
12689
- [vars$c.hostDirection]: globalRefs$9.direction,
12690
- [vars$c.labelTextWidth]: '200px',
12691
- [vars$c.itemsGap]: '16px',
12692
- [vars$c.hostMinWidth]: '530px',
12693
- [vars$c.iconSize]: '24px',
12687
+ [vars$d.hostDirection]: globalRefs$9.direction,
12688
+ [vars$d.labelTextWidth]: '200px',
12689
+ [vars$d.itemsGap]: '16px',
12690
+ [vars$d.hostMinWidth]: '530px',
12691
+ [vars$d.iconSize]: '24px',
12694
12692
  _fullWidth: {
12695
- [vars$c.hostWidth]: '100%',
12693
+ [vars$d.hostWidth]: '100%',
12696
12694
  },
12697
12695
  };
12698
12696
 
12699
12697
  var userAuthMethod$1 = /*#__PURE__*/Object.freeze({
12700
12698
  __proto__: null,
12701
12699
  default: userAuthMethod,
12702
- vars: vars$c
12700
+ vars: vars$d
12703
12701
  });
12704
12702
 
12705
- const componentName$b = getComponentName('saml-group-mappings-internal');
12703
+ const componentName$c = getComponentName('saml-group-mappings-internal');
12706
12704
 
12707
- createBaseInputClass({ componentName: componentName$b, baseSelector: '' });
12705
+ createBaseInputClass({ componentName: componentName$c, baseSelector: '' });
12708
12706
 
12709
- const componentName$a = getComponentName('saml-group-mappings');
12707
+ const componentName$b = getComponentName('saml-group-mappings');
12710
12708
 
12711
12709
  const customMixin$3 = (superclass) =>
12712
12710
  class SamlGroupMappingsMixinClass extends superclass {
@@ -12716,14 +12714,14 @@ const customMixin$3 = (superclass) =>
12716
12714
  const template = document.createElement('template');
12717
12715
 
12718
12716
  template.innerHTML = `
12719
- <${componentName$b}
12717
+ <${componentName$c}
12720
12718
  tabindex="-1"
12721
- ></${componentName$b}>
12719
+ ></${componentName$c}>
12722
12720
  `;
12723
12721
 
12724
12722
  this.baseElement.appendChild(template.content.cloneNode(true));
12725
12723
 
12726
- this.inputElement = this.shadowRoot.querySelector(componentName$b);
12724
+ this.inputElement = this.shadowRoot.querySelector(componentName$c);
12727
12725
 
12728
12726
  forwardAttrs(this, this.inputElement, {
12729
12727
  includeAttrs: [
@@ -12800,61 +12798,61 @@ const SamlGroupMappingsClass = compose(
12800
12798
  'options',
12801
12799
  'error-message',
12802
12800
  ],
12803
- componentName: componentName$a,
12801
+ componentName: componentName$b,
12804
12802
  })
12805
12803
  );
12806
12804
 
12807
- const vars$b = SamlGroupMappingsClass.cssVarList;
12805
+ const vars$c = SamlGroupMappingsClass.cssVarList;
12808
12806
 
12809
12807
  const samlGroupMappings = {
12810
- [vars$b.hostWidth]: refs.width,
12811
- [vars$b.hostDirection]: refs.direction,
12812
- [vars$b.groupNameInputMarginBottom]: '1em',
12808
+ [vars$c.hostWidth]: refs.width,
12809
+ [vars$c.hostDirection]: refs.direction,
12810
+ [vars$c.groupNameInputMarginBottom]: '1em',
12813
12811
  };
12814
12812
 
12815
12813
  var samlGroupMappings$1 = /*#__PURE__*/Object.freeze({
12816
12814
  __proto__: null,
12817
12815
  default: samlGroupMappings,
12818
12816
  samlGroupMappings: samlGroupMappings,
12819
- vars: vars$b
12817
+ vars: vars$c
12820
12818
  });
12821
12819
 
12822
12820
  const globalRefs$8 = getThemeRefs(globals);
12823
- const vars$a = PolicyValidationClass.cssVarList;
12821
+ const vars$b = PolicyValidationClass.cssVarList;
12824
12822
 
12825
12823
  const policyValidation = {
12826
- [vars$a.fontFamily]: refs.fontFamily,
12827
- [vars$a.fontSize]: refs.labelFontSize,
12828
- [vars$a.textColor]: refs.labelTextColor,
12829
- [vars$a.borderWidth]: refs.borderWidth,
12830
- [vars$a.borderStyle]: refs.borderStyle,
12831
- [vars$a.borderColor]: refs.borderColor,
12832
- [vars$a.borderRadius]: globalRefs$8.radius.sm,
12833
- [vars$a.backgroundColor]: 'none',
12834
- [vars$a.padding]: '0px',
12835
- [vars$a.labelMargin]: globalRefs$8.spacing.sm,
12836
- [vars$a.itemsSpacing]: globalRefs$8.spacing.lg,
12837
- [vars$a.itemSymbolDefault]: "'\\2022'", // "•"
12838
- [vars$a.itemSymbolSuccess]: "'\\2713'", // "✓"
12839
- [vars$a.itemSymbolError]: "'\\2A09'", // "⨉"
12840
- [vars$a.itemSymbolSuccessColor]: globalRefs$8.colors.success.main,
12841
- [vars$a.itemSymbolErrorColor]: globalRefs$8.colors.error.main,
12824
+ [vars$b.fontFamily]: refs.fontFamily,
12825
+ [vars$b.fontSize]: refs.labelFontSize,
12826
+ [vars$b.textColor]: refs.labelTextColor,
12827
+ [vars$b.borderWidth]: refs.borderWidth,
12828
+ [vars$b.borderStyle]: refs.borderStyle,
12829
+ [vars$b.borderColor]: refs.borderColor,
12830
+ [vars$b.borderRadius]: globalRefs$8.radius.sm,
12831
+ [vars$b.backgroundColor]: 'none',
12832
+ [vars$b.padding]: '0px',
12833
+ [vars$b.labelMargin]: globalRefs$8.spacing.sm,
12834
+ [vars$b.itemsSpacing]: globalRefs$8.spacing.lg,
12835
+ [vars$b.itemSymbolDefault]: "'\\2022'", // "•"
12836
+ [vars$b.itemSymbolSuccess]: "'\\2713'", // "✓"
12837
+ [vars$b.itemSymbolError]: "'\\2A09'", // "⨉"
12838
+ [vars$b.itemSymbolSuccessColor]: globalRefs$8.colors.success.main,
12839
+ [vars$b.itemSymbolErrorColor]: globalRefs$8.colors.error.main,
12842
12840
  };
12843
12841
 
12844
12842
  var policyValidation$1 = /*#__PURE__*/Object.freeze({
12845
12843
  __proto__: null,
12846
12844
  default: policyValidation,
12847
- vars: vars$a
12845
+ vars: vars$b
12848
12846
  });
12849
12847
 
12850
- const vars$9 = IconClass.cssVarList;
12848
+ const vars$a = IconClass.cssVarList;
12851
12849
 
12852
12850
  const icon = {};
12853
12851
 
12854
12852
  var icon$1 = /*#__PURE__*/Object.freeze({
12855
12853
  __proto__: null,
12856
12854
  default: icon,
12857
- vars: vars$9
12855
+ vars: vars$a
12858
12856
  });
12859
12857
 
12860
12858
  const decode = (input) => {
@@ -12867,9 +12865,9 @@ const tpl = (input, inline) => {
12867
12865
  return inline ? input : `<pre>${input}</pre>`;
12868
12866
  };
12869
12867
 
12870
- const componentName$9 = getComponentName('code-snippet');
12868
+ const componentName$a = getComponentName('code-snippet');
12871
12869
 
12872
- let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$9, baseSelector: ':host > code' }) {
12870
+ let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$a, baseSelector: ':host > code' }) {
12873
12871
  static get observedAttributes() {
12874
12872
  return ['lang', 'inline'];
12875
12873
  }
@@ -13101,7 +13099,7 @@ const CodeSnippetClass = compose(
13101
13099
 
13102
13100
  const globalRefs$7 = getThemeRefs(globals);
13103
13101
 
13104
- const vars$8 = CodeSnippetClass.cssVarList;
13102
+ const vars$9 = CodeSnippetClass.cssVarList;
13105
13103
 
13106
13104
  const light = {
13107
13105
  color1: '#fa0',
@@ -13136,50 +13134,50 @@ const dark = {
13136
13134
  };
13137
13135
 
13138
13136
  const CodeSnippet = {
13139
- [vars$8.rootBgColor]: globalRefs$7.colors.surface.main,
13140
- [vars$8.rootTextColor]: globalRefs$7.colors.surface.contrast,
13141
- [vars$8.docTagTextColor]: light.color2,
13142
- [vars$8.keywordTextColor]: light.color2,
13143
- [vars$8.metaKeywordTextColor]: light.color2,
13144
- [vars$8.templateTagTextColor]: light.color2,
13145
- [vars$8.templateVariableTextColor]: light.color2,
13146
- [vars$8.typeTextColor]: light.color2,
13147
- [vars$8.variableLanguageTextColor]: light.color2,
13148
- [vars$8.titleTextColor]: light.color3,
13149
- [vars$8.titleClassTextColor]: light.color3,
13150
- [vars$8.titleClassInheritedTextColor]: light.color3,
13151
- [vars$8.titleFunctionTextColor]: light.color3,
13152
- [vars$8.attrTextColor]: light.color4,
13153
- [vars$8.attributeTextColor]: light.color4,
13154
- [vars$8.literalTextColor]: light.color4,
13155
- [vars$8.metaTextColor]: light.color4,
13156
- [vars$8.numberTextColor]: light.color4,
13157
- [vars$8.operatorTextColor]: light.color4,
13158
- [vars$8.variableTextColor]: light.color4,
13159
- [vars$8.selectorAttrTextColor]: light.color4,
13160
- [vars$8.selectorClassTextColor]: light.color4,
13161
- [vars$8.selectorIdTextColor]: light.color4,
13162
- [vars$8.regexpTextColor]: light.color13,
13163
- [vars$8.stringTextColor]: light.color13,
13164
- [vars$8.metaStringTextColor]: light.color13,
13165
- [vars$8.builtInTextColor]: light.color5,
13166
- [vars$8.symbolTextColor]: light.color5,
13167
- [vars$8.commentTextColor]: light.color6,
13168
- [vars$8.codeTextColor]: light.color6,
13169
- [vars$8.formulaTextColor]: light.color6,
13170
- [vars$8.nameTextColor]: light.color7,
13171
- [vars$8.quoteTextColor]: light.color7,
13172
- [vars$8.selectorTagTextColor]: light.color7,
13173
- [vars$8.selectorPseudoTextColor]: light.color7,
13174
- [vars$8.substTextColor]: light.color8,
13175
- [vars$8.sectionTextColor]: light.color4,
13176
- [vars$8.bulletTextColor]: light.color9,
13177
- [vars$8.emphasisTextColor]: light.color8,
13178
- [vars$8.strongTextColor]: light.color8,
13179
- [vars$8.additionTextColor]: light.color7,
13180
- [vars$8.additionBgColor]: light.color10,
13181
- [vars$8.deletionTextColor]: light.color2,
13182
- [vars$8.deletionBgColor]: light.color10,
13137
+ [vars$9.rootBgColor]: globalRefs$7.colors.surface.main,
13138
+ [vars$9.rootTextColor]: globalRefs$7.colors.surface.contrast,
13139
+ [vars$9.docTagTextColor]: light.color2,
13140
+ [vars$9.keywordTextColor]: light.color2,
13141
+ [vars$9.metaKeywordTextColor]: light.color2,
13142
+ [vars$9.templateTagTextColor]: light.color2,
13143
+ [vars$9.templateVariableTextColor]: light.color2,
13144
+ [vars$9.typeTextColor]: light.color2,
13145
+ [vars$9.variableLanguageTextColor]: light.color2,
13146
+ [vars$9.titleTextColor]: light.color3,
13147
+ [vars$9.titleClassTextColor]: light.color3,
13148
+ [vars$9.titleClassInheritedTextColor]: light.color3,
13149
+ [vars$9.titleFunctionTextColor]: light.color3,
13150
+ [vars$9.attrTextColor]: light.color4,
13151
+ [vars$9.attributeTextColor]: light.color4,
13152
+ [vars$9.literalTextColor]: light.color4,
13153
+ [vars$9.metaTextColor]: light.color4,
13154
+ [vars$9.numberTextColor]: light.color4,
13155
+ [vars$9.operatorTextColor]: light.color4,
13156
+ [vars$9.variableTextColor]: light.color4,
13157
+ [vars$9.selectorAttrTextColor]: light.color4,
13158
+ [vars$9.selectorClassTextColor]: light.color4,
13159
+ [vars$9.selectorIdTextColor]: light.color4,
13160
+ [vars$9.regexpTextColor]: light.color13,
13161
+ [vars$9.stringTextColor]: light.color13,
13162
+ [vars$9.metaStringTextColor]: light.color13,
13163
+ [vars$9.builtInTextColor]: light.color5,
13164
+ [vars$9.symbolTextColor]: light.color5,
13165
+ [vars$9.commentTextColor]: light.color6,
13166
+ [vars$9.codeTextColor]: light.color6,
13167
+ [vars$9.formulaTextColor]: light.color6,
13168
+ [vars$9.nameTextColor]: light.color7,
13169
+ [vars$9.quoteTextColor]: light.color7,
13170
+ [vars$9.selectorTagTextColor]: light.color7,
13171
+ [vars$9.selectorPseudoTextColor]: light.color7,
13172
+ [vars$9.substTextColor]: light.color8,
13173
+ [vars$9.sectionTextColor]: light.color4,
13174
+ [vars$9.bulletTextColor]: light.color9,
13175
+ [vars$9.emphasisTextColor]: light.color8,
13176
+ [vars$9.strongTextColor]: light.color8,
13177
+ [vars$9.additionTextColor]: light.color7,
13178
+ [vars$9.additionBgColor]: light.color10,
13179
+ [vars$9.deletionTextColor]: light.color2,
13180
+ [vars$9.deletionBgColor]: light.color10,
13183
13181
  /* purposely ignored */
13184
13182
  // [vars.charEscapeTextColor]: '',
13185
13183
  // [vars.linkTextColor]: '',
@@ -13191,50 +13189,50 @@ const CodeSnippet = {
13191
13189
 
13192
13190
  const codeSnippetDarkThemeOverrides = {
13193
13191
  codeSnippet: {
13194
- [vars$8.rootBgColor]: globalRefs$7.colors.surface.main,
13195
- [vars$8.rootTextColor]: globalRefs$7.colors.surface.contrast,
13196
- [vars$8.docTagTextColor]: dark.color2,
13197
- [vars$8.keywordTextColor]: dark.color2,
13198
- [vars$8.metaKeywordTextColor]: dark.color2,
13199
- [vars$8.templateTagTextColor]: dark.color2,
13200
- [vars$8.templateVariableTextColor]: dark.color2,
13201
- [vars$8.typeTextColor]: dark.color2,
13202
- [vars$8.variableLanguageTextColor]: dark.color2,
13203
- [vars$8.titleTextColor]: dark.color3,
13204
- [vars$8.titleClassTextColor]: dark.color3,
13205
- [vars$8.titleClassInheritedTextColor]: dark.color3,
13206
- [vars$8.titleFunctionTextColor]: dark.color3,
13207
- [vars$8.attrTextColor]: dark.color4,
13208
- [vars$8.attributeTextColor]: dark.color4,
13209
- [vars$8.literalTextColor]: dark.color4,
13210
- [vars$8.metaTextColor]: dark.color4,
13211
- [vars$8.numberTextColor]: dark.color4,
13212
- [vars$8.operatorTextColor]: dark.color4,
13213
- [vars$8.variableTextColor]: dark.color4,
13214
- [vars$8.selectorAttrTextColor]: dark.color4,
13215
- [vars$8.selectorClassTextColor]: dark.color4,
13216
- [vars$8.selectorIdTextColor]: dark.color4,
13217
- [vars$8.regexpTextColor]: dark.color13,
13218
- [vars$8.stringTextColor]: dark.color13,
13219
- [vars$8.metaStringTextColor]: dark.color13,
13220
- [vars$8.builtInTextColor]: dark.color5,
13221
- [vars$8.symbolTextColor]: dark.color5,
13222
- [vars$8.commentTextColor]: dark.color6,
13223
- [vars$8.codeTextColor]: dark.color6,
13224
- [vars$8.formulaTextColor]: dark.color6,
13225
- [vars$8.nameTextColor]: dark.color7,
13226
- [vars$8.quoteTextColor]: dark.color7,
13227
- [vars$8.selectorTagTextColor]: dark.color7,
13228
- [vars$8.selectorPseudoTextColor]: dark.color7,
13229
- [vars$8.substTextColor]: dark.color8,
13230
- [vars$8.sectionTextColor]: dark.color4,
13231
- [vars$8.bulletTextColor]: dark.color9,
13232
- [vars$8.emphasisTextColor]: dark.color8,
13233
- [vars$8.strongTextColor]: dark.color8,
13234
- [vars$8.additionTextColor]: dark.color7,
13235
- [vars$8.additionBgColor]: dark.color10,
13236
- [vars$8.deletionTextColor]: dark.color2,
13237
- [vars$8.deletionBgColor]: dark.color10,
13192
+ [vars$9.rootBgColor]: globalRefs$7.colors.surface.main,
13193
+ [vars$9.rootTextColor]: globalRefs$7.colors.surface.contrast,
13194
+ [vars$9.docTagTextColor]: dark.color2,
13195
+ [vars$9.keywordTextColor]: dark.color2,
13196
+ [vars$9.metaKeywordTextColor]: dark.color2,
13197
+ [vars$9.templateTagTextColor]: dark.color2,
13198
+ [vars$9.templateVariableTextColor]: dark.color2,
13199
+ [vars$9.typeTextColor]: dark.color2,
13200
+ [vars$9.variableLanguageTextColor]: dark.color2,
13201
+ [vars$9.titleTextColor]: dark.color3,
13202
+ [vars$9.titleClassTextColor]: dark.color3,
13203
+ [vars$9.titleClassInheritedTextColor]: dark.color3,
13204
+ [vars$9.titleFunctionTextColor]: dark.color3,
13205
+ [vars$9.attrTextColor]: dark.color4,
13206
+ [vars$9.attributeTextColor]: dark.color4,
13207
+ [vars$9.literalTextColor]: dark.color4,
13208
+ [vars$9.metaTextColor]: dark.color4,
13209
+ [vars$9.numberTextColor]: dark.color4,
13210
+ [vars$9.operatorTextColor]: dark.color4,
13211
+ [vars$9.variableTextColor]: dark.color4,
13212
+ [vars$9.selectorAttrTextColor]: dark.color4,
13213
+ [vars$9.selectorClassTextColor]: dark.color4,
13214
+ [vars$9.selectorIdTextColor]: dark.color4,
13215
+ [vars$9.regexpTextColor]: dark.color13,
13216
+ [vars$9.stringTextColor]: dark.color13,
13217
+ [vars$9.metaStringTextColor]: dark.color13,
13218
+ [vars$9.builtInTextColor]: dark.color5,
13219
+ [vars$9.symbolTextColor]: dark.color5,
13220
+ [vars$9.commentTextColor]: dark.color6,
13221
+ [vars$9.codeTextColor]: dark.color6,
13222
+ [vars$9.formulaTextColor]: dark.color6,
13223
+ [vars$9.nameTextColor]: dark.color7,
13224
+ [vars$9.quoteTextColor]: dark.color7,
13225
+ [vars$9.selectorTagTextColor]: dark.color7,
13226
+ [vars$9.selectorPseudoTextColor]: dark.color7,
13227
+ [vars$9.substTextColor]: dark.color8,
13228
+ [vars$9.sectionTextColor]: dark.color4,
13229
+ [vars$9.bulletTextColor]: dark.color9,
13230
+ [vars$9.emphasisTextColor]: dark.color8,
13231
+ [vars$9.strongTextColor]: dark.color8,
13232
+ [vars$9.additionTextColor]: dark.color7,
13233
+ [vars$9.additionBgColor]: dark.color10,
13234
+ [vars$9.deletionTextColor]: dark.color2,
13235
+ [vars$9.deletionBgColor]: dark.color10,
13238
13236
  },
13239
13237
  };
13240
13238
 
@@ -13242,10 +13240,10 @@ var codeSnippet = /*#__PURE__*/Object.freeze({
13242
13240
  __proto__: null,
13243
13241
  codeSnippetDarkThemeOverrides: codeSnippetDarkThemeOverrides,
13244
13242
  default: CodeSnippet,
13245
- vars: vars$8
13243
+ vars: vars$9
13246
13244
  });
13247
13245
 
13248
- const componentName$8 = getComponentName('radio-button');
13246
+ const componentName$9 = getComponentName('radio-button');
13249
13247
 
13250
13248
  const customMixin$2 = (superclass) =>
13251
13249
  class CustomMixin extends superclass {
@@ -13310,11 +13308,11 @@ const RadioButtonClass = compose(
13310
13308
  wrappedEleName: 'vaadin-radio-button',
13311
13309
  excludeAttrsSync: ['tabindex', 'data'],
13312
13310
  includeForwardProps: ['checked', 'name', 'disabled'],
13313
- componentName: componentName$8,
13311
+ componentName: componentName$9,
13314
13312
  })
13315
13313
  );
13316
13314
 
13317
- const componentName$7 = getComponentName('radio-group');
13315
+ const componentName$8 = getComponentName('radio-group');
13318
13316
 
13319
13317
  const RadioGroupMixin = (superclass) =>
13320
13318
  class RadioGroupMixinClass extends superclass {
@@ -13329,12 +13327,12 @@ const RadioGroupMixin = (superclass) =>
13329
13327
 
13330
13328
  // we are overriding vaadin children getter so it will run on our custom elements
13331
13329
  Object.defineProperty(this.baseElement, 'children', {
13332
- get: () => this.querySelectorAll(componentName$8),
13330
+ get: () => this.querySelectorAll(componentName$9),
13333
13331
  });
13334
13332
 
13335
13333
  // we are overriding vaadin __filterRadioButtons so it will run on our custom elements
13336
13334
  this.baseElement.__filterRadioButtons = (nodes) => {
13337
- return nodes.filter((node) => node.localName === componentName$8);
13335
+ return nodes.filter((node) => node.localName === componentName$9);
13338
13336
  };
13339
13337
 
13340
13338
  // vaadin radio group missing some input properties
@@ -13484,38 +13482,38 @@ const RadioGroupClass = compose(
13484
13482
  `,
13485
13483
 
13486
13484
  excludeAttrsSync: ['tabindex', 'size', 'data', 'direction'],
13487
- componentName: componentName$7,
13485
+ componentName: componentName$8,
13488
13486
  includeForwardProps: ['value'],
13489
13487
  })
13490
13488
  );
13491
13489
 
13492
- const vars$7 = RadioGroupClass.cssVarList;
13490
+ const vars$8 = RadioGroupClass.cssVarList;
13493
13491
  const globalRefs$6 = getThemeRefs(globals);
13494
13492
 
13495
13493
  const radioGroup = {
13496
- [vars$7.buttonsRowGap]: '9px',
13497
- [vars$7.hostWidth]: refs.width,
13498
- [vars$7.hostDirection]: refs.direction,
13499
- [vars$7.fontSize]: refs.fontSize,
13500
- [vars$7.fontFamily]: refs.fontFamily,
13501
- [vars$7.labelTextColor]: refs.labelTextColor,
13502
- [vars$7.labelRequiredIndicator]: refs.requiredIndicator,
13503
- [vars$7.errorMessageTextColor]: refs.errorMessageTextColor,
13504
- [vars$7.helperTextColor]: refs.helperTextColor,
13505
- [vars$7.itemsLabelColor]: globalRefs$6.colors.surface.contrast,
13494
+ [vars$8.buttonsRowGap]: '9px',
13495
+ [vars$8.hostWidth]: refs.width,
13496
+ [vars$8.hostDirection]: refs.direction,
13497
+ [vars$8.fontSize]: refs.fontSize,
13498
+ [vars$8.fontFamily]: refs.fontFamily,
13499
+ [vars$8.labelTextColor]: refs.labelTextColor,
13500
+ [vars$8.labelRequiredIndicator]: refs.requiredIndicator,
13501
+ [vars$8.errorMessageTextColor]: refs.errorMessageTextColor,
13502
+ [vars$8.helperTextColor]: refs.helperTextColor,
13503
+ [vars$8.itemsLabelColor]: globalRefs$6.colors.surface.contrast,
13506
13504
 
13507
13505
  textAlign: {
13508
- right: { [vars$7.inputTextAlign]: 'right' },
13509
- left: { [vars$7.inputTextAlign]: 'left' },
13510
- center: { [vars$7.inputTextAlign]: 'center' },
13506
+ right: { [vars$8.inputTextAlign]: 'right' },
13507
+ left: { [vars$8.inputTextAlign]: 'left' },
13508
+ center: { [vars$8.inputTextAlign]: 'center' },
13511
13509
  },
13512
13510
 
13513
13511
  _fullWidth: {
13514
- [vars$7.buttonsSpacing]: 'space-between',
13512
+ [vars$8.buttonsSpacing]: 'space-between',
13515
13513
  },
13516
13514
 
13517
13515
  _disabled: {
13518
- [vars$7.itemsLabelColor]: globalRefs$6.colors.surface.light,
13516
+ [vars$8.itemsLabelColor]: globalRefs$6.colors.surface.light,
13519
13517
  },
13520
13518
  };
13521
13519
 
@@ -13523,24 +13521,24 @@ var radioGroup$1 = /*#__PURE__*/Object.freeze({
13523
13521
  __proto__: null,
13524
13522
  default: radioGroup,
13525
13523
  radioGroup: radioGroup,
13526
- vars: vars$7
13524
+ vars: vars$8
13527
13525
  });
13528
13526
 
13529
- const vars$6 = RadioButtonClass.cssVarList;
13527
+ const vars$7 = RadioButtonClass.cssVarList;
13530
13528
  const globalRefs$5 = getThemeRefs(globals);
13531
13529
 
13532
13530
  const radioButton = {
13533
- [vars$6.fontFamily]: refs.fontFamily,
13534
- [vars$6.radioSize]: 'calc(1em + 6px)',
13535
- [vars$6.radioMargin]: 'auto 4px',
13536
- [vars$6.radioCheckedSize]: `calc(var(${vars$6.radioSize})/5)`,
13537
- [vars$6.radioCheckedColor]: globalRefs$5.colors.surface.light,
13538
- [vars$6.radioBackgroundColor]: globalRefs$5.colors.surface.light,
13539
- [vars$6.radioBorderColor]: 'none',
13540
- [vars$6.radioBorderWidth]: 0,
13531
+ [vars$7.fontFamily]: refs.fontFamily,
13532
+ [vars$7.radioSize]: 'calc(1em + 6px)',
13533
+ [vars$7.radioMargin]: 'auto 4px',
13534
+ [vars$7.radioCheckedSize]: `calc(var(${vars$7.radioSize})/5)`,
13535
+ [vars$7.radioCheckedColor]: globalRefs$5.colors.surface.light,
13536
+ [vars$7.radioBackgroundColor]: globalRefs$5.colors.surface.light,
13537
+ [vars$7.radioBorderColor]: 'none',
13538
+ [vars$7.radioBorderWidth]: 0,
13541
13539
 
13542
13540
  _checked: {
13543
- [vars$6.radioBackgroundColor]: globalRefs$5.colors.surface.contrast,
13541
+ [vars$7.radioBackgroundColor]: globalRefs$5.colors.surface.contrast,
13544
13542
  },
13545
13543
 
13546
13544
  _hover: {
@@ -13549,16 +13547,16 @@ const radioButton = {
13549
13547
 
13550
13548
  size: {
13551
13549
  xs: {
13552
- [vars$6.fontSize]: '12px',
13550
+ [vars$7.fontSize]: '12px',
13553
13551
  },
13554
13552
  sm: {
13555
- [vars$6.fontSize]: '14px',
13553
+ [vars$7.fontSize]: '14px',
13556
13554
  },
13557
13555
  md: {
13558
- [vars$6.fontSize]: '16px',
13556
+ [vars$7.fontSize]: '16px',
13559
13557
  },
13560
13558
  lg: {
13561
- [vars$6.fontSize]: '18px',
13559
+ [vars$7.fontSize]: '18px',
13562
13560
  },
13563
13561
  },
13564
13562
  };
@@ -13567,7 +13565,7 @@ var radioButton$1 = /*#__PURE__*/Object.freeze({
13567
13565
  __proto__: null,
13568
13566
  default: radioButton,
13569
13567
  radioButton: radioButton,
13570
- vars: vars$6
13568
+ vars: vars$7
13571
13569
  });
13572
13570
 
13573
13571
  const SUPPORTED_FORMATS = ['MM/DD/YYYY', 'DD/MM/YYYY', 'YYYY/MM/DD'];
@@ -13885,7 +13883,7 @@ const nextMonth = (timestamp) => {
13885
13883
  return date;
13886
13884
  };
13887
13885
 
13888
- const componentName$6 = getComponentName('calendar');
13886
+ const componentName$7 = getComponentName('calendar');
13889
13887
 
13890
13888
  const observedAttrs$1 = [
13891
13889
  'initial-value',
@@ -13902,7 +13900,7 @@ const observedAttrs$1 = [
13902
13900
 
13903
13901
  const calendarUiAttrs = ['calendar-label-submit', 'calendar-label-cancel'];
13904
13902
 
13905
- const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$6, baseSelector: 'div' });
13903
+ const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$7, baseSelector: 'div' });
13906
13904
 
13907
13905
  class RawCalendar extends BaseInputClass$1 {
13908
13906
  static get observedAttributes() {
@@ -14517,92 +14515,92 @@ const CalendarClass = compose(
14517
14515
 
14518
14516
  const globalRefs$4 = getThemeRefs(globals);
14519
14517
 
14520
- const vars$5 = CalendarClass.cssVarList;
14518
+ const vars$6 = CalendarClass.cssVarList;
14521
14519
 
14522
14520
  const calendar = {
14523
- [vars$5.fontFamily]: refs.fontFamily,
14524
- [vars$5.fontSize]: refs.fontSize,
14525
- [vars$5.hostDirection]: refs.direction,
14521
+ [vars$6.fontFamily]: refs.fontFamily,
14522
+ [vars$6.fontSize]: refs.fontSize,
14523
+ [vars$6.hostDirection]: refs.direction,
14526
14524
 
14527
- [vars$5.calendarPadding]: '1em',
14525
+ [vars$6.calendarPadding]: '1em',
14528
14526
 
14529
- [vars$5.topNavVerticalPadding]: '1em',
14530
- [vars$5.topNavAlignment]: 'space-between',
14531
- [vars$5.topNavGap]: '0',
14532
- [vars$5.topNavSelectorsGap]: '0.5em',
14527
+ [vars$6.topNavVerticalPadding]: '1em',
14528
+ [vars$6.topNavAlignment]: 'space-between',
14529
+ [vars$6.topNavGap]: '0',
14530
+ [vars$6.topNavSelectorsGap]: '0.5em',
14533
14531
 
14534
- [vars$5.bottomNavVerticalPadding]: '0.75em',
14535
- [vars$5.bottomNavHorizontalPadding]: '1.5em',
14536
- [vars$5.bottomNavAlignment]: 'space-between',
14537
- [vars$5.bottomNavGap]: '0.5em',
14532
+ [vars$6.bottomNavVerticalPadding]: '0.75em',
14533
+ [vars$6.bottomNavHorizontalPadding]: '1.5em',
14534
+ [vars$6.bottomNavAlignment]: 'space-between',
14535
+ [vars$6.bottomNavGap]: '0.5em',
14538
14536
 
14539
- [vars$5.navMarginBottom]: '0.75em',
14540
- [vars$5.navBorderBottomWidth]: '1px',
14541
- [vars$5.navBorderBottomColor]: globalRefs$4.colors.surface.highlight,
14542
- [vars$5.navBorderBottomStyle]: 'solid',
14537
+ [vars$6.navMarginBottom]: '0.75em',
14538
+ [vars$6.navBorderBottomWidth]: '1px',
14539
+ [vars$6.navBorderBottomColor]: globalRefs$4.colors.surface.highlight,
14540
+ [vars$6.navBorderBottomStyle]: 'solid',
14543
14541
 
14544
- [vars$5.yearInputWidth]: '6em',
14545
- [vars$5.monthInputWidth]: '8em',
14542
+ [vars$6.yearInputWidth]: '6em',
14543
+ [vars$6.monthInputWidth]: '8em',
14546
14544
 
14547
- [vars$5.navButtonSize]: '24px',
14548
- [vars$5.navButtonCursor]: 'pointer',
14545
+ [vars$6.navButtonSize]: '24px',
14546
+ [vars$6.navButtonCursor]: 'pointer',
14549
14547
 
14550
- [vars$5.weekdayFontSize]: '0.875em',
14551
- [vars$5.weekdayFontWeight]: '500',
14548
+ [vars$6.weekdayFontSize]: '0.875em',
14549
+ [vars$6.weekdayFontWeight]: '500',
14552
14550
 
14553
14551
  // day table cell
14554
- [vars$5.dayHeight]: '3.125em',
14552
+ [vars$6.dayHeight]: '3.125em',
14555
14553
 
14556
14554
  // day value
14557
- [vars$5.daySize]: '2.125em',
14558
- [vars$5.dayFontSize]: '1em',
14559
- [vars$5.dayRadius]: '50%',
14560
- [vars$5.dayTextAlign]: 'center',
14561
- [vars$5.dayPadding]: '0',
14562
- [vars$5.dayTextColor]: globalRefs$4.colors.surface.contrast,
14563
- [vars$5.dayFontWeight]: '500',
14564
- [vars$5.dayBackgroundColor]: 'transparent',
14565
- [vars$5.dayCursor]: 'pointer',
14566
- [vars$5.dayBackgroundColorHover]: globalRefs$4.colors.primary.highlight,
14555
+ [vars$6.daySize]: '2.125em',
14556
+ [vars$6.dayFontSize]: '1em',
14557
+ [vars$6.dayRadius]: '50%',
14558
+ [vars$6.dayTextAlign]: 'center',
14559
+ [vars$6.dayPadding]: '0',
14560
+ [vars$6.dayTextColor]: globalRefs$4.colors.surface.contrast,
14561
+ [vars$6.dayFontWeight]: '500',
14562
+ [vars$6.dayBackgroundColor]: 'transparent',
14563
+ [vars$6.dayCursor]: 'pointer',
14564
+ [vars$6.dayBackgroundColorHover]: globalRefs$4.colors.primary.highlight,
14567
14565
 
14568
14566
  // selected day
14569
- [vars$5.daySelectedBackgroundColor]: globalRefs$4.colors.primary.main,
14570
- [vars$5.daySelectedTextdColor]: globalRefs$4.colors.primary.contrast,
14567
+ [vars$6.daySelectedBackgroundColor]: globalRefs$4.colors.primary.main,
14568
+ [vars$6.daySelectedTextdColor]: globalRefs$4.colors.primary.contrast,
14571
14569
 
14572
14570
  // disabled day (out of min/max range)
14573
- [vars$5.dayDisabledTextdColor]: globalRefs$4.colors.surface.light,
14571
+ [vars$6.dayDisabledTextdColor]: globalRefs$4.colors.surface.light,
14574
14572
 
14575
14573
  // today
14576
- [vars$5.currentDayBorderColor]: globalRefs$4.colors.surface.light,
14577
- [vars$5.currentDayBorderWidth]: '1px',
14578
- [vars$5.currentDayBorderStyle]: 'solid',
14574
+ [vars$6.currentDayBorderColor]: globalRefs$4.colors.surface.light,
14575
+ [vars$6.currentDayBorderWidth]: '1px',
14576
+ [vars$6.currentDayBorderStyle]: 'solid',
14579
14577
 
14580
14578
  size: {
14581
- xs: { [vars$5.fontSize]: '12px' },
14582
- sm: { [vars$5.fontSize]: '14px' },
14583
- md: { [vars$5.fontSize]: '16px' },
14584
- lg: { [vars$5.fontSize]: '18px' },
14579
+ xs: { [vars$6.fontSize]: '12px' },
14580
+ sm: { [vars$6.fontSize]: '14px' },
14581
+ md: { [vars$6.fontSize]: '16px' },
14582
+ lg: { [vars$6.fontSize]: '18px' },
14585
14583
  },
14586
14584
 
14587
- [vars$5.navButtonRotation]: 'rotate(180deg)',
14585
+ [vars$6.navButtonRotation]: 'rotate(180deg)',
14588
14586
 
14589
14587
  _disabled: {
14590
- [vars$5.navButtonOpacity]: '0.5',
14591
- [vars$5.dayBackgroundColorHover]: 'none',
14592
- [vars$5.navButtonCursor]: 'default',
14593
- [vars$5.dayCursor]: 'default',
14588
+ [vars$6.navButtonOpacity]: '0.5',
14589
+ [vars$6.dayBackgroundColorHover]: 'none',
14590
+ [vars$6.navButtonCursor]: 'default',
14591
+ [vars$6.dayCursor]: 'default',
14594
14592
  },
14595
14593
 
14596
14594
  _fullWidth: {
14597
- [vars$5.hostWidth]: '100%',
14598
- [vars$5.dayBlockAlign]: '0 auto',
14595
+ [vars$6.hostWidth]: '100%',
14596
+ [vars$6.dayBlockAlign]: '0 auto',
14599
14597
  },
14600
14598
  };
14601
14599
 
14602
14600
  var calendar$1 = /*#__PURE__*/Object.freeze({
14603
14601
  __proto__: null,
14604
14602
  default: calendar,
14605
- vars: vars$5
14603
+ vars: vars$6
14606
14604
  });
14607
14605
 
14608
14606
  const patterns = {
@@ -14736,12 +14734,12 @@ class DateCounter {
14736
14734
  }
14737
14735
  }
14738
14736
 
14739
- const componentName$5 = getComponentName('date-field');
14737
+ const componentName$6 = getComponentName('date-field');
14740
14738
 
14741
14739
  // we set baseSelector to `vaadin-popover` as a temporary hack, so our portalMixin will
14742
14740
  // be able to process this component's overlay. The whole process needs refactoring as soon as possible.
14743
14741
  const BASE_SELECTOR = 'vaadin-popover';
14744
- const BaseInputClass = createBaseInputClass({ componentName: componentName$5, baseSelector: BASE_SELECTOR });
14742
+ const BaseInputClass = createBaseInputClass({ componentName: componentName$6, baseSelector: BASE_SELECTOR });
14745
14743
 
14746
14744
  const dateFieldAttrs = ['format', 'opened', 'initial-value', 'readonly'];
14747
14745
  const calendarAttrs = ['years-range', 'calendar-months', 'calendar-weekdays'];
@@ -15413,28 +15411,28 @@ const globalRefs$3 = getThemeRefs(globals);
15413
15411
  const shadowColor$1 = '#00000020';
15414
15412
  const { shadow } = globalRefs$3;
15415
15413
 
15416
- const vars$4 = DateFieldClass.cssVarList;
15414
+ const vars$5 = DateFieldClass.cssVarList;
15417
15415
 
15418
15416
  const dateField = {
15419
- [vars$4.hostWidth]: refs.width,
15420
- [vars$4.hostDirection]: refs.direction,
15421
- [vars$4.iconMargin]: '0.375em',
15422
-
15423
- [vars$4.overlay.marginTop]: `calc(${refs.outlineWidth} + 1px)`,
15424
- [vars$4.overlay.backgroundColor]: refs.backgroundColor,
15425
- [vars$4.overlay.backdropBackgroundColor]: 'transparent',
15426
- [vars$4.overlay.backdropPointerEvents]: 'all',
15427
- [vars$4.overlay.boxShadow]: `${shadow.wide.xl} ${shadowColor$1}, ${shadow.narrow.xl} ${shadowColor$1}`,
15428
- [vars$4.overlay.outlineWidth]: '0',
15429
- [vars$4.overlay.outlineColor]: 'transparent',
15430
- [vars$4.overlay.outlineStyle]: 'none',
15431
- [vars$4.overlay.padding]: '0',
15417
+ [vars$5.hostWidth]: refs.width,
15418
+ [vars$5.hostDirection]: refs.direction,
15419
+ [vars$5.iconMargin]: '0.375em',
15420
+
15421
+ [vars$5.overlay.marginTop]: `calc(${refs.outlineWidth} + 1px)`,
15422
+ [vars$5.overlay.backgroundColor]: refs.backgroundColor,
15423
+ [vars$5.overlay.backdropBackgroundColor]: 'transparent',
15424
+ [vars$5.overlay.backdropPointerEvents]: 'all',
15425
+ [vars$5.overlay.boxShadow]: `${shadow.wide.xl} ${shadowColor$1}, ${shadow.narrow.xl} ${shadowColor$1}`,
15426
+ [vars$5.overlay.outlineWidth]: '0',
15427
+ [vars$5.overlay.outlineColor]: 'transparent',
15428
+ [vars$5.overlay.outlineStyle]: 'none',
15429
+ [vars$5.overlay.padding]: '0',
15432
15430
  };
15433
15431
 
15434
15432
  var dateField$1 = /*#__PURE__*/Object.freeze({
15435
15433
  __proto__: null,
15436
15434
  default: dateField,
15437
- vars: vars$4
15435
+ vars: vars$5
15438
15436
  });
15439
15437
 
15440
15438
  const activeableMixin = (superclass) =>
@@ -15452,7 +15450,7 @@ const activeableMixin = (superclass) =>
15452
15450
  }
15453
15451
  };
15454
15452
 
15455
- const componentName$4 = getComponentName('list-item');
15453
+ const componentName$5 = getComponentName('list-item');
15456
15454
 
15457
15455
  const customMixin$1 = (superclass) =>
15458
15456
  class ListItemMixinClass extends superclass {
@@ -15501,11 +15499,11 @@ const ListItemClass = compose(
15501
15499
  componentNameValidationMixin,
15502
15500
  customMixin$1,
15503
15501
  activeableMixin
15504
- )(createBaseClass({ componentName: componentName$4, baseSelector: 'slot' }));
15502
+ )(createBaseClass({ componentName: componentName$5, baseSelector: 'slot' }));
15505
15503
 
15506
- const componentName$3 = getComponentName('list');
15504
+ const componentName$4 = getComponentName('list');
15507
15505
 
15508
- class RawList extends createBaseClass({ componentName: componentName$3, baseSelector: '.wrapper' }) {
15506
+ class RawList extends createBaseClass({ componentName: componentName$4, baseSelector: '.wrapper' }) {
15509
15507
  static get observedAttributes() {
15510
15508
  return ['variant', 'readonly'];
15511
15509
  }
@@ -15658,7 +15656,7 @@ const compVars = ListClass.cssVarList;
15658
15656
 
15659
15657
  const [helperTheme, helperRefs, helperVars] = createHelperVars(
15660
15658
  { shadowColor: '#00000020' },
15661
- componentName$3
15659
+ componentName$4
15662
15660
  );
15663
15661
 
15664
15662
  const { shadowColor } = helperRefs;
@@ -15698,7 +15696,7 @@ const list$1 = {
15698
15696
  },
15699
15697
  };
15700
15698
 
15701
- const vars$3 = {
15699
+ const vars$4 = {
15702
15700
  ...compVars,
15703
15701
  ...helperVars,
15704
15702
  };
@@ -15706,49 +15704,49 @@ const vars$3 = {
15706
15704
  var list$2 = /*#__PURE__*/Object.freeze({
15707
15705
  __proto__: null,
15708
15706
  default: list$1,
15709
- vars: vars$3
15707
+ vars: vars$4
15710
15708
  });
15711
15709
 
15712
15710
  const globalRefs$1 = getThemeRefs(globals);
15713
15711
 
15714
- const vars$2 = ListItemClass.cssVarList;
15712
+ const vars$3 = ListItemClass.cssVarList;
15715
15713
 
15716
15714
  const list = {
15717
- [vars$2.backgroundColor]: globalRefs$1.colors.surface.main,
15718
- [vars$2.padding]: globalRefs$1.spacing.lg,
15719
- [vars$2.gap]: globalRefs$1.spacing.md,
15720
- [vars$2.borderStyle]: 'solid',
15721
- [vars$2.borderWidth]: globalRefs$1.border.xs,
15722
- [vars$2.borderColor]: globalRefs$1.colors.surface.main,
15723
- [vars$2.borderRadius]: globalRefs$1.radius.sm,
15724
- [vars$2.cursor]: 'pointer',
15725
- [vars$2.alignItems]: 'center',
15726
- [vars$2.flexDirection]: 'row',
15727
- [vars$2.transition]: 'border-color 0.2s, background-color 0.2s',
15715
+ [vars$3.backgroundColor]: globalRefs$1.colors.surface.main,
15716
+ [vars$3.padding]: globalRefs$1.spacing.lg,
15717
+ [vars$3.gap]: globalRefs$1.spacing.md,
15718
+ [vars$3.borderStyle]: 'solid',
15719
+ [vars$3.borderWidth]: globalRefs$1.border.xs,
15720
+ [vars$3.borderColor]: globalRefs$1.colors.surface.main,
15721
+ [vars$3.borderRadius]: globalRefs$1.radius.sm,
15722
+ [vars$3.cursor]: 'pointer',
15723
+ [vars$3.alignItems]: 'center',
15724
+ [vars$3.flexDirection]: 'row',
15725
+ [vars$3.transition]: 'border-color 0.2s, background-color 0.2s',
15728
15726
 
15729
15727
  variant: {
15730
15728
  tile: {
15731
- [vars$2.alignItems]: 'flex-start',
15732
- [vars$2.flexDirection]: 'column',
15733
- [vars$2.borderColor]: globalRefs$1.colors.surface.light,
15729
+ [vars$3.alignItems]: 'flex-start',
15730
+ [vars$3.flexDirection]: 'column',
15731
+ [vars$3.borderColor]: globalRefs$1.colors.surface.light,
15734
15732
  },
15735
15733
  },
15736
15734
 
15737
15735
  _hover: {
15738
- [vars$2.backgroundColor]: globalRefs$1.colors.surface.highlight,
15736
+ [vars$3.backgroundColor]: globalRefs$1.colors.surface.highlight,
15739
15737
  },
15740
15738
 
15741
15739
  _active: {
15742
- [vars$2.backgroundColor]: globalRefs$1.colors.surface.main,
15743
- [vars$2.borderColor]: globalRefs$1.colors.primary.light,
15744
- [vars$2.outline]: `1px solid ${globalRefs$1.colors.primary.light}`,
15740
+ [vars$3.backgroundColor]: globalRefs$1.colors.surface.main,
15741
+ [vars$3.borderColor]: globalRefs$1.colors.primary.light,
15742
+ [vars$3.outline]: `1px solid ${globalRefs$1.colors.primary.light}`,
15745
15743
  },
15746
15744
  };
15747
15745
 
15748
15746
  var listItem = /*#__PURE__*/Object.freeze({
15749
15747
  __proto__: null,
15750
15748
  default: list,
15751
- vars: vars$2
15749
+ vars: vars$3
15752
15750
  });
15753
15751
 
15754
15752
  const defaultValidateSchema = () => true;
@@ -15826,18 +15824,14 @@ const createDynamicDataMixin =
15826
15824
  init() {
15827
15825
  super.init?.();
15828
15826
 
15829
- if (rerenderAttrsList.length) {
15830
- observeAttributes(
15831
- this,
15832
- (attrs) => {
15833
- if (attrs.includes('data')) this.#handleDataAttr();
15834
- if (attrs.some((attr) => attr !== 'data')) this.#renderItems();
15835
- },
15836
- { includeAttrs: [...rerenderAttrsList, 'data'] }
15837
- );
15838
- } else {
15839
- this.#renderItems();
15840
- }
15827
+ observeAttributes(
15828
+ this,
15829
+ (attrs) => {
15830
+ if (attrs.includes('data')) this.#handleDataAttr();
15831
+ else this.#renderItems();
15832
+ },
15833
+ { includeAttrs: [...rerenderAttrsList, 'data'] }
15834
+ );
15841
15835
  }
15842
15836
 
15843
15837
  #handleDataAttr() {
@@ -15846,30 +15840,15 @@ const createDynamicDataMixin =
15846
15840
  if (!dataAttr) return;
15847
15841
 
15848
15842
  try {
15849
- this.#data = JSON.parse(dataAttr);
15843
+ this.data = JSON.parse(dataAttr);
15850
15844
  } catch (e) {
15851
15845
  // eslint-disable-next-line no-console
15852
15846
  console.warn('Invalid JSON data', dataAttr);
15853
15847
  }
15854
15848
  }
15855
-
15856
- attributeChangedCallback(name, oldValue, newValue) {
15857
- super.attributeChangedCallback?.(name, oldValue, newValue);
15858
-
15859
- if (newValue === oldValue) return;
15860
-
15861
- if (name === 'data') {
15862
- try {
15863
- this.data = JSON.parse(newValue);
15864
- } catch (e) {
15865
- // eslint-disable-next-line no-console
15866
- console.warn('Invalid JSON data', newValue);
15867
- }
15868
- }
15869
- }
15870
15849
  };
15871
15850
 
15872
- const componentName$2 = getComponentName('apps-list');
15851
+ const componentName$3 = getComponentName('apps-list');
15873
15852
 
15874
15853
  const limitAbbreviation = (str, limit = 2) =>
15875
15854
  str
@@ -15879,7 +15858,7 @@ const limitAbbreviation = (str, limit = 2) =>
15879
15858
  .map((s) => s[0]?.toUpperCase())
15880
15859
  .join('');
15881
15860
 
15882
- const itemRenderer = ({ name, icon, url }, _, ref) => `
15861
+ const itemRenderer$1 = ({ name, icon, url }, _, ref) => `
15883
15862
  <a ${url ? `href="${url}" title="${url}"` : ''} target="_blank">
15884
15863
  <descope-list-item>
15885
15864
  <descope-avatar
@@ -15922,7 +15901,7 @@ const AppsListClass = compose(
15922
15901
  },
15923
15902
  },
15924
15903
  }),
15925
- createDynamicDataMixin({ itemRenderer, rerenderAttrsList: ['size'] }),
15904
+ createDynamicDataMixin({ itemRenderer: itemRenderer$1, rerenderAttrsList: ['size'] }),
15926
15905
  draggableMixin,
15927
15906
  componentNameValidationMixin,
15928
15907
  customMixin
@@ -15931,7 +15910,7 @@ const AppsListClass = compose(
15931
15910
  slots: ['empty-state'],
15932
15911
  wrappedEleName: 'descope-list',
15933
15912
  excludeAttrsSync: ['tabindex', 'class', 'empty'],
15934
- componentName: componentName$2,
15913
+ componentName: componentName$3,
15935
15914
  style: () => `
15936
15915
  :host {
15937
15916
  width: 100%;
@@ -15956,33 +15935,33 @@ const AppsListClass = compose(
15956
15935
  })
15957
15936
  );
15958
15937
 
15959
- const vars$1 = AppsListClass.cssVarList;
15938
+ const vars$2 = AppsListClass.cssVarList;
15960
15939
  const globalRefs = getThemeRefs(globals);
15961
15940
 
15962
15941
  const defaultHeight = '400px';
15963
15942
 
15964
15943
  const appsList = {
15965
- [vars$1.itemsFontWeight]: 'normal',
15966
- [vars$1.itemsTextAlign]: 'start',
15967
- [vars$1.hostDirection]: globalRefs.direction,
15968
- [vars$1.maxHeight]: defaultHeight,
15944
+ [vars$2.itemsFontWeight]: 'normal',
15945
+ [vars$2.itemsTextAlign]: 'start',
15946
+ [vars$2.hostDirection]: globalRefs.direction,
15947
+ [vars$2.maxHeight]: defaultHeight,
15969
15948
 
15970
15949
  _empty: {
15971
- [vars$1.minHeight]: defaultHeight,
15950
+ [vars$2.minHeight]: defaultHeight,
15972
15951
  },
15973
15952
 
15974
15953
  size: {
15975
15954
  xs: {
15976
- [vars$1.itemsFontSize]: '14px',
15955
+ [vars$2.itemsFontSize]: '14px',
15977
15956
  },
15978
15957
  sm: {
15979
- [vars$1.itemsFontSize]: '14px',
15958
+ [vars$2.itemsFontSize]: '14px',
15980
15959
  },
15981
15960
  md: {
15982
- [vars$1.itemsFontSize]: '16px',
15961
+ [vars$2.itemsFontSize]: '16px',
15983
15962
  },
15984
15963
  lg: {
15985
- [vars$1.itemsFontSize]: '20px',
15964
+ [vars$2.itemsFontSize]: '20px',
15986
15965
  },
15987
15966
  },
15988
15967
  };
@@ -15990,6 +15969,127 @@ const appsList = {
15990
15969
  var appsList$1 = /*#__PURE__*/Object.freeze({
15991
15970
  __proto__: null,
15992
15971
  default: appsList,
15972
+ vars: vars$2
15973
+ });
15974
+
15975
+ const componentName$2 = getComponentName('scopes-list');
15976
+ const variants = ['checkbox', 'switch'];
15977
+
15978
+ const itemRenderer = ({ id, desc, required = false }, _, ref) => {
15979
+ const ComponentClass = ref.variant === 'checkbox' ? CheckboxClass : SwitchToggleClass;
15980
+
15981
+ return `
15982
+ <${ComponentClass.componentName}
15983
+ bordered="true"
15984
+ size=${ref.size}
15985
+ label="${desc}"
15986
+ data-id="${id}"
15987
+ readonly="${required || ref.isReadOnly}"
15988
+ required="${required}"
15989
+ checked="true"
15990
+ ></${ComponentClass.componentName}>
15991
+ `;
15992
+ };
15993
+
15994
+ class RawScopesList extends createBaseClass({ componentName: componentName$2, baseSelector: 'div' }) {
15995
+ constructor() {
15996
+ super();
15997
+
15998
+ this.attachShadow({ mode: 'open' }).innerHTML = `
15999
+ <style>
16000
+ :host {
16001
+ display: inline-flex;
16002
+ }
16003
+
16004
+ div {
16005
+ display: flex;
16006
+ flex-direction: column;
16007
+ }
16008
+
16009
+ </style>
16010
+ <div></div>
16011
+ `;
16012
+ }
16013
+
16014
+ get isReadOnly() {
16015
+ return this.getAttribute('readonly') === 'true';
16016
+ }
16017
+
16018
+ get size() {
16019
+ return this.getAttribute('size') || 'sm';
16020
+ }
16021
+
16022
+ get value() {
16023
+ return Array.from(this.shadowRoot.querySelector('div').children).reduce(
16024
+ (acc, el) => ({ ...acc, [el.getAttribute('data-id')]: el.checked }),
16025
+ {}
16026
+ );
16027
+ }
16028
+
16029
+ get variant() {
16030
+ const variant = this.getAttribute('variant');
16031
+
16032
+ return variants.includes(variant) ? variant : variants[0];
16033
+ }
16034
+ }
16035
+
16036
+ const ScopesListClass = compose(
16037
+ createStyleMixin({
16038
+ mappings: {
16039
+ hostWidth: { selector: () => ':host', property: 'width' },
16040
+ hostDirection: [
16041
+ { selector: () => ':host', property: 'direction' },
16042
+ {
16043
+ selector: () => CheckboxClass.componentName,
16044
+ property: CheckboxClass.cssVarList.hostDirection,
16045
+ },
16046
+ {
16047
+ selector: () => SwitchToggleClass.componentName,
16048
+ property: SwitchToggleClass.cssVarList.hostDirection,
16049
+ },
16050
+ ],
16051
+ gap: { selector: () => 'div', property: 'gap' },
16052
+ requiredInputBorderColor: [
16053
+ {
16054
+ selector: `${CheckboxClass.componentName}[required="true"]`,
16055
+ property: CheckboxClass.cssVarList.inputBorderColor,
16056
+ },
16057
+ {
16058
+ selector: `${SwitchToggleClass.componentName}[required="true"]`,
16059
+ property: SwitchToggleClass.cssVarList.inputBorderColor,
16060
+ },
16061
+ ],
16062
+ requiredInputValueTextColor: [
16063
+ {
16064
+ selector: `${CheckboxClass.componentName}[required="true"]`,
16065
+ property: CheckboxClass.cssVarList.inputValueTextColor,
16066
+ },
16067
+ {
16068
+ selector: `${SwitchToggleClass.componentName}[required="true"]`,
16069
+ property: SwitchToggleClass.cssVarList.knobColor,
16070
+ },
16071
+ ],
16072
+ },
16073
+ }),
16074
+ createDynamicDataMixin({ itemRenderer, rerenderAttrsList: ['size', 'variant'] }),
16075
+ draggableMixin,
16076
+ componentNameValidationMixin
16077
+ )(RawScopesList);
16078
+
16079
+ const vars$1 = ScopesListClass.cssVarList;
16080
+
16081
+ const scopesList = {
16082
+ [vars$1.requiredInputBorderColor]: theme$1._disabled[vars$N.borderColor],
16083
+ [vars$1.requiredInputValueTextColor]: theme$1._disabled[vars$N.valueTextColor],
16084
+ [vars$1.hostWidth]: '280px',
16085
+ _fullWidth: {
16086
+ [vars$1.hostWidth]: '100%',
16087
+ },
16088
+ };
16089
+
16090
+ var scopesList$1 = /*#__PURE__*/Object.freeze({
16091
+ __proto__: null,
16092
+ default: scopesList,
15993
16093
  vars: vars$1
15994
16094
  });
15995
16095
 
@@ -16043,6 +16143,7 @@ const components = {
16043
16143
  list: list$2,
16044
16144
  listItem,
16045
16145
  appsList: appsList$1,
16146
+ scopesList: scopesList$1,
16046
16147
  };
16047
16148
 
16048
16149
  const theme = Object.keys(components).reduce(
@@ -16055,7 +16156,7 @@ const vars = Object.keys(components).reduce(
16055
16156
  );
16056
16157
 
16057
16158
  const defaultTheme = { globals, components: theme };
16058
- const themeVars = { globals: vars$O, components: vars };
16159
+ const themeVars = { globals: vars$P, components: vars };
16059
16160
 
16060
16161
  const colors = {
16061
16162
  surface: {
@@ -16434,6 +16535,7 @@ exports.RadioButtonClass = RadioButtonClass;
16434
16535
  exports.RadioGroupClass = RadioGroupClass;
16435
16536
  exports.RecaptchaClass = RecaptchaClass;
16436
16537
  exports.SamlGroupMappingsClass = SamlGroupMappingsClass;
16538
+ exports.ScopesListClass = ScopesListClass;
16437
16539
  exports.SwitchToggleClass = SwitchToggleClass;
16438
16540
  exports.TextAreaClass = TextAreaClass;
16439
16541
  exports.TextClass = TextClass;