@descope/web-components-ui 1.0.387 → 1.0.389

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