@descope/web-components-ui 1.0.258 → 1.0.260

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.
@@ -526,10 +526,9 @@ const globals = {
526
526
  fonts,
527
527
  direction,
528
528
  };
529
- const vars$x = getThemeVars(globals);
529
+ const vars$y = getThemeVars(globals);
530
530
 
531
- const createCssVarFallback = (first, ...rest) =>
532
- `var(${first}${rest.length ? ` , ${createCssVarFallback(...rest)}` : ''})`;
531
+ const createCssVar = (varName, fallback) => `var(${varName}${fallback ? `, ${fallback}` : ''})`;
533
532
 
534
533
  const createCssSelector = (baseSelector = '', relativeSelectorOrSelectorFn = '') =>
535
534
  isFunction(relativeSelectorOrSelectorFn)
@@ -582,13 +581,15 @@ const createStyle = (componentName, baseSelector, mappings) => {
582
581
 
583
582
  const cssVarName = getCssVarName(componentName, attr);
584
583
 
585
- attrConfig.forEach(({ selector: relativeSelectorOrSelectorFn, property, important }) => {
586
- style.add(
587
- createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
588
- isFunction(property) ? property() : property,
589
- createCssVarFallback(cssVarName) + (important ? '!important' : '')
590
- );
591
- });
584
+ attrConfig.forEach(
585
+ ({ selector: relativeSelectorOrSelectorFn, property, important, fallback }) => {
586
+ style.add(
587
+ createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
588
+ isFunction(property) ? property() : property,
589
+ createCssVar(cssVarName, fallback) + (important ? '!important' : '')
590
+ );
591
+ }
592
+ );
592
593
  });
593
594
 
594
595
  return style.toString();
@@ -2413,7 +2414,7 @@ const clickableMixin = (superclass) =>
2413
2414
  }
2414
2415
  };
2415
2416
 
2416
- const componentName$E = getComponentName('button');
2417
+ const componentName$F = getComponentName('button');
2417
2418
 
2418
2419
  const resetStyles = `
2419
2420
  :host {
@@ -2432,7 +2433,6 @@ const resetStyles = `
2432
2433
  box-shadow: none;
2433
2434
  }
2434
2435
  vaadin-button::part(label) {
2435
- justify-content: center;
2436
2436
  padding: 0;
2437
2437
  width: 100%;
2438
2438
  }
@@ -2486,7 +2486,7 @@ const ButtonClass = compose(
2486
2486
  labelTextColor: { property: 'color' },
2487
2487
  labelTextDecoration: { ...label$a, property: 'text-decoration' },
2488
2488
  labelSpacing: { ...label$a, property: 'gap' },
2489
- textAlign: { ...label$a, property: 'justify-content', important: true },
2489
+ textAlign: { ...label$a, property: 'justify-content', fallback: 'center' },
2490
2490
  },
2491
2491
  }),
2492
2492
  clickableMixin,
@@ -2516,7 +2516,7 @@ const ButtonClass = compose(
2516
2516
  }
2517
2517
  `,
2518
2518
  excludeAttrsSync: ['tabindex'],
2519
- componentName: componentName$E,
2519
+ componentName: componentName$F,
2520
2520
  })
2521
2521
  );
2522
2522
 
@@ -2564,7 +2564,7 @@ const mode = {
2564
2564
  surface: globalRefs$i.colors.surface,
2565
2565
  };
2566
2566
 
2567
- const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$E);
2567
+ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$F);
2568
2568
 
2569
2569
  const button = {
2570
2570
  ...helperTheme$3,
@@ -2669,7 +2669,7 @@ const button = {
2669
2669
  },
2670
2670
  };
2671
2671
 
2672
- const vars$w = {
2672
+ const vars$x = {
2673
2673
  ...compVars$4,
2674
2674
  ...helperVars$3,
2675
2675
  };
@@ -2677,7 +2677,7 @@ const vars$w = {
2677
2677
  var button$1 = /*#__PURE__*/Object.freeze({
2678
2678
  __proto__: null,
2679
2679
  default: button,
2680
- vars: vars$w
2680
+ vars: vars$x
2681
2681
  });
2682
2682
 
2683
2683
  const { host: host$g, label: label$9, placeholder: placeholder$3, requiredIndicator: requiredIndicator$b, inputField: inputField$6, input, helperText: helperText$9, errorMessage: errorMessage$b } =
@@ -2864,7 +2864,7 @@ const resetInputLabelPosition = (name) => `
2864
2864
  }
2865
2865
  `;
2866
2866
 
2867
- const componentName$D = getComponentName('text-field');
2867
+ const componentName$E = getComponentName('text-field');
2868
2868
 
2869
2869
  const observedAttrs = ['type'];
2870
2870
 
@@ -2914,14 +2914,14 @@ const TextFieldClass = compose(
2914
2914
  ${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
2915
2915
  `,
2916
2916
  excludeAttrsSync: ['tabindex'],
2917
- componentName: componentName$D,
2917
+ componentName: componentName$E,
2918
2918
  })
2919
2919
  );
2920
2920
 
2921
- const componentName$C = getComponentName('input-wrapper');
2921
+ const componentName$D = getComponentName('input-wrapper');
2922
2922
  const globalRefs$h = getThemeRefs(globals);
2923
2923
 
2924
- const [theme$1, refs, vars$v] = createHelperVars(
2924
+ const [theme$1, refs, vars$w] = createHelperVars(
2925
2925
  {
2926
2926
  labelTextColor: globalRefs$h.colors.surface.contrast,
2927
2927
  valueTextColor: globalRefs$h.colors.surface.contrast,
@@ -2987,44 +2987,44 @@ const [theme$1, refs, vars$v] = createHelperVars(
2987
2987
  backgroundColor: globalRefs$h.colors.surface.main,
2988
2988
  },
2989
2989
  },
2990
- componentName$C
2990
+ componentName$D
2991
2991
  );
2992
2992
 
2993
2993
  var inputWrapper = /*#__PURE__*/Object.freeze({
2994
2994
  __proto__: null,
2995
2995
  default: theme$1,
2996
2996
  refs: refs,
2997
- vars: vars$v
2997
+ vars: vars$w
2998
2998
  });
2999
2999
 
3000
- const vars$u = TextFieldClass.cssVarList;
3000
+ const vars$v = TextFieldClass.cssVarList;
3001
3001
 
3002
3002
  const textField = {
3003
- [vars$u.hostWidth]: refs.width,
3004
- [vars$u.hostMinWidth]: refs.minWidth,
3005
- [vars$u.hostDirection]: refs.direction,
3006
- [vars$u.fontSize]: refs.fontSize,
3007
- [vars$u.fontFamily]: refs.fontFamily,
3008
- [vars$u.labelTextColor]: refs.labelTextColor,
3009
- [vars$u.labelRequiredIndicator]: refs.requiredIndicator,
3010
- [vars$u.errorMessageTextColor]: refs.errorMessageTextColor,
3011
- [vars$u.inputValueTextColor]: refs.valueTextColor,
3012
- [vars$u.inputPlaceholderColor]: refs.placeholderTextColor,
3013
- [vars$u.inputBorderWidth]: refs.borderWidth,
3014
- [vars$u.inputBorderStyle]: refs.borderStyle,
3015
- [vars$u.inputBorderColor]: refs.borderColor,
3016
- [vars$u.inputBorderRadius]: refs.borderRadius,
3017
- [vars$u.inputOutlineWidth]: refs.outlineWidth,
3018
- [vars$u.inputOutlineStyle]: refs.outlineStyle,
3019
- [vars$u.inputOutlineColor]: refs.outlineColor,
3020
- [vars$u.inputOutlineOffset]: refs.outlineOffset,
3021
- [vars$u.inputBackgroundColor]: refs.backgroundColor,
3022
- [vars$u.inputHeight]: refs.inputHeight,
3023
- [vars$u.inputHorizontalPadding]: refs.horizontalPadding,
3003
+ [vars$v.hostWidth]: refs.width,
3004
+ [vars$v.hostMinWidth]: refs.minWidth,
3005
+ [vars$v.hostDirection]: refs.direction,
3006
+ [vars$v.fontSize]: refs.fontSize,
3007
+ [vars$v.fontFamily]: refs.fontFamily,
3008
+ [vars$v.labelTextColor]: refs.labelTextColor,
3009
+ [vars$v.labelRequiredIndicator]: refs.requiredIndicator,
3010
+ [vars$v.errorMessageTextColor]: refs.errorMessageTextColor,
3011
+ [vars$v.inputValueTextColor]: refs.valueTextColor,
3012
+ [vars$v.inputPlaceholderColor]: refs.placeholderTextColor,
3013
+ [vars$v.inputBorderWidth]: refs.borderWidth,
3014
+ [vars$v.inputBorderStyle]: refs.borderStyle,
3015
+ [vars$v.inputBorderColor]: refs.borderColor,
3016
+ [vars$v.inputBorderRadius]: refs.borderRadius,
3017
+ [vars$v.inputOutlineWidth]: refs.outlineWidth,
3018
+ [vars$v.inputOutlineStyle]: refs.outlineStyle,
3019
+ [vars$v.inputOutlineColor]: refs.outlineColor,
3020
+ [vars$v.inputOutlineOffset]: refs.outlineOffset,
3021
+ [vars$v.inputBackgroundColor]: refs.backgroundColor,
3022
+ [vars$v.inputHeight]: refs.inputHeight,
3023
+ [vars$v.inputHorizontalPadding]: refs.horizontalPadding,
3024
3024
  textAlign: {
3025
- right: { [vars$u.inputTextAlign]: 'right' },
3026
- left: { [vars$u.inputTextAlign]: 'left' },
3027
- center: { [vars$u.inputTextAlign]: 'center' },
3025
+ right: { [vars$v.inputTextAlign]: 'right' },
3026
+ left: { [vars$v.inputTextAlign]: 'left' },
3027
+ center: { [vars$v.inputTextAlign]: 'center' },
3028
3028
  },
3029
3029
  };
3030
3030
 
@@ -3032,7 +3032,7 @@ var textField$1 = /*#__PURE__*/Object.freeze({
3032
3032
  __proto__: null,
3033
3033
  default: textField,
3034
3034
  textField: textField,
3035
- vars: vars$u
3035
+ vars: vars$v
3036
3036
  });
3037
3037
 
3038
3038
  const passwordDraggableMixin = (superclass) =>
@@ -3069,7 +3069,7 @@ const passwordDraggableMixin = (superclass) =>
3069
3069
  }
3070
3070
  };
3071
3071
 
3072
- const componentName$B = getComponentName('password');
3072
+ const componentName$C = getComponentName('password');
3073
3073
 
3074
3074
  const {
3075
3075
  host: host$f,
@@ -3200,45 +3200,45 @@ const PasswordClass = compose(
3200
3200
  }
3201
3201
  `,
3202
3202
  excludeAttrsSync: ['tabindex'],
3203
- componentName: componentName$B,
3203
+ componentName: componentName$C,
3204
3204
  })
3205
3205
  );
3206
3206
 
3207
3207
  const globalRefs$g = getThemeRefs(globals);
3208
- const vars$t = PasswordClass.cssVarList;
3208
+ const vars$u = PasswordClass.cssVarList;
3209
3209
 
3210
3210
  const password = {
3211
- [vars$t.hostWidth]: refs.width,
3212
- [vars$t.hostDirection]: refs.direction,
3213
- [vars$t.fontSize]: refs.fontSize,
3214
- [vars$t.fontFamily]: refs.fontFamily,
3215
- [vars$t.labelTextColor]: refs.labelTextColor,
3216
- [vars$t.errorMessageTextColor]: refs.errorMessageTextColor,
3217
- [vars$t.inputHorizontalPadding]: refs.horizontalPadding,
3218
- [vars$t.inputHeight]: refs.inputHeight,
3219
- [vars$t.inputBackgroundColor]: refs.backgroundColor,
3220
- [vars$t.labelRequiredIndicator]: refs.requiredIndicator,
3221
- [vars$t.inputValueTextColor]: refs.valueTextColor,
3222
- [vars$t.inputPlaceholderTextColor]: refs.placeholderTextColor,
3223
- [vars$t.inputBorderWidth]: refs.borderWidth,
3224
- [vars$t.inputBorderStyle]: refs.borderStyle,
3225
- [vars$t.inputBorderColor]: refs.borderColor,
3226
- [vars$t.inputBorderRadius]: refs.borderRadius,
3227
- [vars$t.inputOutlineWidth]: refs.outlineWidth,
3228
- [vars$t.inputOutlineStyle]: refs.outlineStyle,
3229
- [vars$t.inputOutlineColor]: refs.outlineColor,
3230
- [vars$t.inputOutlineOffset]: refs.outlineOffset,
3231
- [vars$t.revealButtonOffset]: globalRefs$g.spacing.md,
3232
- [vars$t.revealButtonSize]: refs.toggleButtonSize,
3211
+ [vars$u.hostWidth]: refs.width,
3212
+ [vars$u.hostDirection]: refs.direction,
3213
+ [vars$u.fontSize]: refs.fontSize,
3214
+ [vars$u.fontFamily]: refs.fontFamily,
3215
+ [vars$u.labelTextColor]: refs.labelTextColor,
3216
+ [vars$u.errorMessageTextColor]: refs.errorMessageTextColor,
3217
+ [vars$u.inputHorizontalPadding]: refs.horizontalPadding,
3218
+ [vars$u.inputHeight]: refs.inputHeight,
3219
+ [vars$u.inputBackgroundColor]: refs.backgroundColor,
3220
+ [vars$u.labelRequiredIndicator]: refs.requiredIndicator,
3221
+ [vars$u.inputValueTextColor]: refs.valueTextColor,
3222
+ [vars$u.inputPlaceholderTextColor]: refs.placeholderTextColor,
3223
+ [vars$u.inputBorderWidth]: refs.borderWidth,
3224
+ [vars$u.inputBorderStyle]: refs.borderStyle,
3225
+ [vars$u.inputBorderColor]: refs.borderColor,
3226
+ [vars$u.inputBorderRadius]: refs.borderRadius,
3227
+ [vars$u.inputOutlineWidth]: refs.outlineWidth,
3228
+ [vars$u.inputOutlineStyle]: refs.outlineStyle,
3229
+ [vars$u.inputOutlineColor]: refs.outlineColor,
3230
+ [vars$u.inputOutlineOffset]: refs.outlineOffset,
3231
+ [vars$u.revealButtonOffset]: globalRefs$g.spacing.md,
3232
+ [vars$u.revealButtonSize]: refs.toggleButtonSize,
3233
3233
  };
3234
3234
 
3235
3235
  var password$1 = /*#__PURE__*/Object.freeze({
3236
3236
  __proto__: null,
3237
3237
  default: password,
3238
- vars: vars$t
3238
+ vars: vars$u
3239
3239
  });
3240
3240
 
3241
- const componentName$A = getComponentName('number-field');
3241
+ const componentName$B = getComponentName('number-field');
3242
3242
 
3243
3243
  const NumberFieldClass = compose(
3244
3244
  createStyleMixin({
@@ -3264,43 +3264,43 @@ const NumberFieldClass = compose(
3264
3264
  ${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
3265
3265
  `,
3266
3266
  excludeAttrsSync: ['tabindex'],
3267
- componentName: componentName$A,
3267
+ componentName: componentName$B,
3268
3268
  })
3269
3269
  );
3270
3270
 
3271
- const vars$s = NumberFieldClass.cssVarList;
3271
+ const vars$t = NumberFieldClass.cssVarList;
3272
3272
 
3273
3273
  const numberField = {
3274
- [vars$s.hostWidth]: refs.width,
3275
- [vars$s.hostMinWidth]: refs.minWidth,
3276
- [vars$s.hostDirection]: refs.direction,
3277
- [vars$s.fontSize]: refs.fontSize,
3278
- [vars$s.fontFamily]: refs.fontFamily,
3279
- [vars$s.labelTextColor]: refs.labelTextColor,
3280
- [vars$s.errorMessageTextColor]: refs.errorMessageTextColor,
3281
- [vars$s.inputValueTextColor]: refs.valueTextColor,
3282
- [vars$s.inputPlaceholderColor]: refs.placeholderTextColor,
3283
- [vars$s.inputBorderWidth]: refs.borderWidth,
3284
- [vars$s.inputBorderStyle]: refs.borderStyle,
3285
- [vars$s.inputBorderColor]: refs.borderColor,
3286
- [vars$s.inputBorderRadius]: refs.borderRadius,
3287
- [vars$s.inputOutlineWidth]: refs.outlineWidth,
3288
- [vars$s.inputOutlineStyle]: refs.outlineStyle,
3289
- [vars$s.inputOutlineColor]: refs.outlineColor,
3290
- [vars$s.inputOutlineOffset]: refs.outlineOffset,
3291
- [vars$s.inputBackgroundColor]: refs.backgroundColor,
3292
- [vars$s.labelRequiredIndicator]: refs.requiredIndicator,
3293
- [vars$s.inputHorizontalPadding]: refs.horizontalPadding,
3294
- [vars$s.inputHeight]: refs.inputHeight,
3274
+ [vars$t.hostWidth]: refs.width,
3275
+ [vars$t.hostMinWidth]: refs.minWidth,
3276
+ [vars$t.hostDirection]: refs.direction,
3277
+ [vars$t.fontSize]: refs.fontSize,
3278
+ [vars$t.fontFamily]: refs.fontFamily,
3279
+ [vars$t.labelTextColor]: refs.labelTextColor,
3280
+ [vars$t.errorMessageTextColor]: refs.errorMessageTextColor,
3281
+ [vars$t.inputValueTextColor]: refs.valueTextColor,
3282
+ [vars$t.inputPlaceholderColor]: refs.placeholderTextColor,
3283
+ [vars$t.inputBorderWidth]: refs.borderWidth,
3284
+ [vars$t.inputBorderStyle]: refs.borderStyle,
3285
+ [vars$t.inputBorderColor]: refs.borderColor,
3286
+ [vars$t.inputBorderRadius]: refs.borderRadius,
3287
+ [vars$t.inputOutlineWidth]: refs.outlineWidth,
3288
+ [vars$t.inputOutlineStyle]: refs.outlineStyle,
3289
+ [vars$t.inputOutlineColor]: refs.outlineColor,
3290
+ [vars$t.inputOutlineOffset]: refs.outlineOffset,
3291
+ [vars$t.inputBackgroundColor]: refs.backgroundColor,
3292
+ [vars$t.labelRequiredIndicator]: refs.requiredIndicator,
3293
+ [vars$t.inputHorizontalPadding]: refs.horizontalPadding,
3294
+ [vars$t.inputHeight]: refs.inputHeight,
3295
3295
  };
3296
3296
 
3297
3297
  var numberField$1 = /*#__PURE__*/Object.freeze({
3298
3298
  __proto__: null,
3299
3299
  default: numberField,
3300
- vars: vars$s
3300
+ vars: vars$t
3301
3301
  });
3302
3302
 
3303
- const componentName$z = getComponentName('email-field');
3303
+ const componentName$A = getComponentName('email-field');
3304
3304
 
3305
3305
  const customMixin$5 = (superclass) =>
3306
3306
  class EmailFieldMixinClass extends superclass {
@@ -3335,43 +3335,43 @@ const EmailFieldClass = compose(
3335
3335
  ${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
3336
3336
  `,
3337
3337
  excludeAttrsSync: ['tabindex'],
3338
- componentName: componentName$z,
3338
+ componentName: componentName$A,
3339
3339
  })
3340
3340
  );
3341
3341
 
3342
- const vars$r = EmailFieldClass.cssVarList;
3342
+ const vars$s = EmailFieldClass.cssVarList;
3343
3343
 
3344
3344
  const emailField = {
3345
- [vars$r.hostWidth]: refs.width,
3346
- [vars$r.hostMinWidth]: refs.minWidth,
3347
- [vars$r.hostDirection]: refs.direction,
3348
- [vars$r.fontSize]: refs.fontSize,
3349
- [vars$r.fontFamily]: refs.fontFamily,
3350
- [vars$r.labelTextColor]: refs.labelTextColor,
3351
- [vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
3352
- [vars$r.inputValueTextColor]: refs.valueTextColor,
3353
- [vars$r.labelRequiredIndicator]: refs.requiredIndicator,
3354
- [vars$r.inputPlaceholderColor]: refs.placeholderTextColor,
3355
- [vars$r.inputBorderWidth]: refs.borderWidth,
3356
- [vars$r.inputBorderStyle]: refs.borderStyle,
3357
- [vars$r.inputBorderColor]: refs.borderColor,
3358
- [vars$r.inputBorderRadius]: refs.borderRadius,
3359
- [vars$r.inputOutlineWidth]: refs.outlineWidth,
3360
- [vars$r.inputOutlineStyle]: refs.outlineStyle,
3361
- [vars$r.inputOutlineColor]: refs.outlineColor,
3362
- [vars$r.inputOutlineOffset]: refs.outlineOffset,
3363
- [vars$r.inputBackgroundColor]: refs.backgroundColor,
3364
- [vars$r.inputHorizontalPadding]: refs.horizontalPadding,
3365
- [vars$r.inputHeight]: refs.inputHeight,
3345
+ [vars$s.hostWidth]: refs.width,
3346
+ [vars$s.hostMinWidth]: refs.minWidth,
3347
+ [vars$s.hostDirection]: refs.direction,
3348
+ [vars$s.fontSize]: refs.fontSize,
3349
+ [vars$s.fontFamily]: refs.fontFamily,
3350
+ [vars$s.labelTextColor]: refs.labelTextColor,
3351
+ [vars$s.errorMessageTextColor]: refs.errorMessageTextColor,
3352
+ [vars$s.inputValueTextColor]: refs.valueTextColor,
3353
+ [vars$s.labelRequiredIndicator]: refs.requiredIndicator,
3354
+ [vars$s.inputPlaceholderColor]: refs.placeholderTextColor,
3355
+ [vars$s.inputBorderWidth]: refs.borderWidth,
3356
+ [vars$s.inputBorderStyle]: refs.borderStyle,
3357
+ [vars$s.inputBorderColor]: refs.borderColor,
3358
+ [vars$s.inputBorderRadius]: refs.borderRadius,
3359
+ [vars$s.inputOutlineWidth]: refs.outlineWidth,
3360
+ [vars$s.inputOutlineStyle]: refs.outlineStyle,
3361
+ [vars$s.inputOutlineColor]: refs.outlineColor,
3362
+ [vars$s.inputOutlineOffset]: refs.outlineOffset,
3363
+ [vars$s.inputBackgroundColor]: refs.backgroundColor,
3364
+ [vars$s.inputHorizontalPadding]: refs.horizontalPadding,
3365
+ [vars$s.inputHeight]: refs.inputHeight,
3366
3366
  };
3367
3367
 
3368
3368
  var emailField$1 = /*#__PURE__*/Object.freeze({
3369
3369
  __proto__: null,
3370
3370
  default: emailField,
3371
- vars: vars$r
3371
+ vars: vars$s
3372
3372
  });
3373
3373
 
3374
- const componentName$y = getComponentName('text-area');
3374
+ const componentName$z = getComponentName('text-area');
3375
3375
 
3376
3376
  const {
3377
3377
  host: host$e,
@@ -3447,54 +3447,54 @@ const TextAreaClass = compose(
3447
3447
  ${resetInputCursor('vaadin-text-area')}
3448
3448
  `,
3449
3449
  excludeAttrsSync: ['tabindex'],
3450
- componentName: componentName$y,
3450
+ componentName: componentName$z,
3451
3451
  })
3452
3452
  );
3453
3453
 
3454
3454
  const globalRefs$f = getThemeRefs(globals);
3455
- const vars$q = TextAreaClass.cssVarList;
3455
+ const vars$r = TextAreaClass.cssVarList;
3456
3456
 
3457
3457
  const textArea = {
3458
- [vars$q.hostWidth]: refs.width,
3459
- [vars$q.hostMinWidth]: refs.minWidth,
3460
- [vars$q.hostDirection]: refs.direction,
3461
- [vars$q.fontSize]: refs.fontSize,
3462
- [vars$q.fontFamily]: refs.fontFamily,
3463
- [vars$q.labelTextColor]: refs.labelTextColor,
3464
- [vars$q.labelRequiredIndicator]: refs.requiredIndicator,
3465
- [vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
3466
- [vars$q.inputBackgroundColor]: refs.backgroundColor,
3467
- [vars$q.inputValueTextColor]: refs.valueTextColor,
3468
- [vars$q.inputPlaceholderTextColor]: refs.placeholderTextColor,
3469
- [vars$q.inputBorderRadius]: refs.borderRadius,
3470
- [vars$q.inputBorderWidth]: refs.borderWidth,
3471
- [vars$q.inputBorderStyle]: refs.borderStyle,
3472
- [vars$q.inputBorderColor]: refs.borderColor,
3473
- [vars$q.inputOutlineWidth]: refs.outlineWidth,
3474
- [vars$q.inputOutlineStyle]: refs.outlineStyle,
3475
- [vars$q.inputOutlineColor]: refs.outlineColor,
3476
- [vars$q.inputOutlineOffset]: refs.outlineOffset,
3477
- [vars$q.inputResizeType]: 'vertical',
3478
- [vars$q.inputMinHeight]: '5em',
3458
+ [vars$r.hostWidth]: refs.width,
3459
+ [vars$r.hostMinWidth]: refs.minWidth,
3460
+ [vars$r.hostDirection]: refs.direction,
3461
+ [vars$r.fontSize]: refs.fontSize,
3462
+ [vars$r.fontFamily]: refs.fontFamily,
3463
+ [vars$r.labelTextColor]: refs.labelTextColor,
3464
+ [vars$r.labelRequiredIndicator]: refs.requiredIndicator,
3465
+ [vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
3466
+ [vars$r.inputBackgroundColor]: refs.backgroundColor,
3467
+ [vars$r.inputValueTextColor]: refs.valueTextColor,
3468
+ [vars$r.inputPlaceholderTextColor]: refs.placeholderTextColor,
3469
+ [vars$r.inputBorderRadius]: refs.borderRadius,
3470
+ [vars$r.inputBorderWidth]: refs.borderWidth,
3471
+ [vars$r.inputBorderStyle]: refs.borderStyle,
3472
+ [vars$r.inputBorderColor]: refs.borderColor,
3473
+ [vars$r.inputOutlineWidth]: refs.outlineWidth,
3474
+ [vars$r.inputOutlineStyle]: refs.outlineStyle,
3475
+ [vars$r.inputOutlineColor]: refs.outlineColor,
3476
+ [vars$r.inputOutlineOffset]: refs.outlineOffset,
3477
+ [vars$r.inputResizeType]: 'vertical',
3478
+ [vars$r.inputMinHeight]: '5em',
3479
3479
  textAlign: {
3480
- right: { [vars$q.inputTextAlign]: 'right' },
3481
- left: { [vars$q.inputTextAlign]: 'left' },
3482
- center: { [vars$q.inputTextAlign]: 'center' },
3480
+ right: { [vars$r.inputTextAlign]: 'right' },
3481
+ left: { [vars$r.inputTextAlign]: 'left' },
3482
+ center: { [vars$r.inputTextAlign]: 'center' },
3483
3483
  },
3484
3484
 
3485
3485
  _disabled: {
3486
- [vars$q.inputBackgroundColor]: globalRefs$f.colors.surface.light,
3486
+ [vars$r.inputBackgroundColor]: globalRefs$f.colors.surface.light,
3487
3487
  },
3488
3488
 
3489
3489
  _readonly: {
3490
- [vars$q.inputResizeType]: 'none',
3490
+ [vars$r.inputResizeType]: 'none',
3491
3491
  },
3492
3492
  };
3493
3493
 
3494
3494
  var textArea$1 = /*#__PURE__*/Object.freeze({
3495
3495
  __proto__: null,
3496
3496
  default: textArea,
3497
- vars: vars$q
3497
+ vars: vars$r
3498
3498
  });
3499
3499
 
3500
3500
  const createBaseInputClass = (...args) =>
@@ -3505,9 +3505,9 @@ const createBaseInputClass = (...args) =>
3505
3505
  inputEventsDispatchingMixin
3506
3506
  )(createBaseClass(...args));
3507
3507
 
3508
- const componentName$x = getComponentName('boolean-field-internal');
3508
+ const componentName$y = getComponentName('boolean-field-internal');
3509
3509
 
3510
- createBaseInputClass({ componentName: componentName$x, baseSelector: 'div' });
3510
+ createBaseInputClass({ componentName: componentName$y, baseSelector: 'div' });
3511
3511
 
3512
3512
  const booleanFieldMixin = (superclass) =>
3513
3513
  class BooleanFieldMixinClass extends superclass {
@@ -3516,14 +3516,14 @@ const booleanFieldMixin = (superclass) =>
3516
3516
 
3517
3517
  const template = document.createElement('template');
3518
3518
  template.innerHTML = `
3519
- <${componentName$x}
3519
+ <${componentName$y}
3520
3520
  tabindex="-1"
3521
3521
  slot="input"
3522
- ></${componentName$x}>
3522
+ ></${componentName$y}>
3523
3523
  `;
3524
3524
 
3525
3525
  this.baseElement.appendChild(template.content.cloneNode(true));
3526
- this.inputElement = this.shadowRoot.querySelector(componentName$x);
3526
+ this.inputElement = this.shadowRoot.querySelector(componentName$y);
3527
3527
  this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
3528
3528
 
3529
3529
  forwardAttrs(this, this.inputElement, {
@@ -3593,7 +3593,7 @@ descope-boolean-field-internal {
3593
3593
  }
3594
3594
  `;
3595
3595
 
3596
- const componentName$w = getComponentName('checkbox');
3596
+ const componentName$x = getComponentName('checkbox');
3597
3597
 
3598
3598
  const {
3599
3599
  host: host$d,
@@ -3699,51 +3699,51 @@ const CheckboxClass = compose(
3699
3699
  }
3700
3700
  `,
3701
3701
  excludeAttrsSync: ['label', 'tabindex'],
3702
- componentName: componentName$w,
3702
+ componentName: componentName$x,
3703
3703
  })
3704
3704
  );
3705
3705
 
3706
- const vars$p = CheckboxClass.cssVarList;
3706
+ const vars$q = CheckboxClass.cssVarList;
3707
3707
  const checkboxSize = '1.35em';
3708
3708
 
3709
3709
  const checkbox = {
3710
- [vars$p.hostWidth]: refs.width,
3711
- [vars$p.hostDirection]: refs.direction,
3712
- [vars$p.fontSize]: refs.fontSize,
3713
- [vars$p.fontFamily]: refs.fontFamily,
3714
- [vars$p.labelTextColor]: refs.labelTextColor,
3715
- [vars$p.labelRequiredIndicator]: refs.requiredIndicator,
3716
- [vars$p.labelFontWeight]: '400',
3717
- [vars$p.labelLineHeight]: checkboxSize,
3718
- [vars$p.labelSpacing]: '1em',
3719
- [vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
3720
- [vars$p.inputOutlineWidth]: refs.outlineWidth,
3721
- [vars$p.inputOutlineOffset]: refs.outlineOffset,
3722
- [vars$p.inputOutlineColor]: refs.outlineColor,
3723
- [vars$p.inputOutlineStyle]: refs.outlineStyle,
3724
- [vars$p.inputBorderRadius]: refs.borderRadius,
3725
- [vars$p.inputBorderColor]: refs.borderColor,
3726
- [vars$p.inputBorderWidth]: refs.borderWidth,
3727
- [vars$p.inputBorderStyle]: refs.borderStyle,
3728
- [vars$p.inputBackgroundColor]: refs.backgroundColor,
3729
- [vars$p.inputSize]: checkboxSize,
3710
+ [vars$q.hostWidth]: refs.width,
3711
+ [vars$q.hostDirection]: refs.direction,
3712
+ [vars$q.fontSize]: refs.fontSize,
3713
+ [vars$q.fontFamily]: refs.fontFamily,
3714
+ [vars$q.labelTextColor]: refs.labelTextColor,
3715
+ [vars$q.labelRequiredIndicator]: refs.requiredIndicator,
3716
+ [vars$q.labelFontWeight]: '400',
3717
+ [vars$q.labelLineHeight]: checkboxSize,
3718
+ [vars$q.labelSpacing]: '1em',
3719
+ [vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
3720
+ [vars$q.inputOutlineWidth]: refs.outlineWidth,
3721
+ [vars$q.inputOutlineOffset]: refs.outlineOffset,
3722
+ [vars$q.inputOutlineColor]: refs.outlineColor,
3723
+ [vars$q.inputOutlineStyle]: refs.outlineStyle,
3724
+ [vars$q.inputBorderRadius]: refs.borderRadius,
3725
+ [vars$q.inputBorderColor]: refs.borderColor,
3726
+ [vars$q.inputBorderWidth]: refs.borderWidth,
3727
+ [vars$q.inputBorderStyle]: refs.borderStyle,
3728
+ [vars$q.inputBackgroundColor]: refs.backgroundColor,
3729
+ [vars$q.inputSize]: checkboxSize,
3730
3730
 
3731
3731
  _checked: {
3732
- [vars$p.inputValueTextColor]: refs.valueTextColor,
3732
+ [vars$q.inputValueTextColor]: refs.valueTextColor,
3733
3733
  },
3734
3734
 
3735
3735
  _disabled: {
3736
- [vars$p.labelTextColor]: refs.labelTextColor,
3736
+ [vars$q.labelTextColor]: refs.labelTextColor,
3737
3737
  },
3738
3738
  };
3739
3739
 
3740
3740
  var checkbox$1 = /*#__PURE__*/Object.freeze({
3741
3741
  __proto__: null,
3742
3742
  default: checkbox,
3743
- vars: vars$p
3743
+ vars: vars$q
3744
3744
  });
3745
3745
 
3746
- const componentName$v = getComponentName('switch-toggle');
3746
+ const componentName$w = getComponentName('switch-toggle');
3747
3747
 
3748
3748
  const {
3749
3749
  host: host$c,
@@ -3875,7 +3875,7 @@ const SwitchToggleClass = compose(
3875
3875
  }
3876
3876
  `,
3877
3877
  excludeAttrsSync: ['label', 'tabindex'],
3878
- componentName: componentName$v,
3878
+ componentName: componentName$w,
3879
3879
  })
3880
3880
  );
3881
3881
 
@@ -3883,75 +3883,75 @@ const knobMargin = '2px';
3883
3883
  const checkboxHeight = '1.25em';
3884
3884
 
3885
3885
  const globalRefs$e = getThemeRefs(globals);
3886
- const vars$o = SwitchToggleClass.cssVarList;
3886
+ const vars$p = SwitchToggleClass.cssVarList;
3887
3887
 
3888
3888
  const switchToggle = {
3889
- [vars$o.hostWidth]: refs.width,
3890
- [vars$o.hostDirection]: refs.direction,
3891
- [vars$o.fontSize]: refs.fontSize,
3892
- [vars$o.fontFamily]: refs.fontFamily,
3893
-
3894
- [vars$o.inputOutlineWidth]: refs.outlineWidth,
3895
- [vars$o.inputOutlineOffset]: refs.outlineOffset,
3896
- [vars$o.inputOutlineColor]: refs.outlineColor,
3897
- [vars$o.inputOutlineStyle]: refs.outlineStyle,
3898
-
3899
- [vars$o.trackBorderStyle]: refs.borderStyle,
3900
- [vars$o.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
3901
- [vars$o.trackBorderColor]: refs.borderColor,
3902
- [vars$o.trackBackgroundColor]: 'none',
3903
- [vars$o.trackBorderRadius]: globalRefs$e.radius.md,
3904
- [vars$o.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
3905
- [vars$o.trackHeight]: checkboxHeight,
3906
-
3907
- [vars$o.knobSize]: `calc(1em - ${knobMargin})`,
3908
- [vars$o.knobRadius]: '50%',
3909
- [vars$o.knobTopOffset]: '1px',
3910
- [vars$o.knobLeftOffset]: knobMargin,
3911
- [vars$o.knobColor]: refs.valueTextColor,
3912
- [vars$o.knobTransitionDuration]: '0.3s',
3913
-
3914
- [vars$o.labelTextColor]: refs.labelTextColor,
3915
- [vars$o.labelFontWeight]: '400',
3916
- [vars$o.labelLineHeight]: '1.35em',
3917
- [vars$o.labelSpacing]: '1em',
3918
- [vars$o.labelRequiredIndicator]: refs.requiredIndicator,
3919
- [vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
3889
+ [vars$p.hostWidth]: refs.width,
3890
+ [vars$p.hostDirection]: refs.direction,
3891
+ [vars$p.fontSize]: refs.fontSize,
3892
+ [vars$p.fontFamily]: refs.fontFamily,
3893
+
3894
+ [vars$p.inputOutlineWidth]: refs.outlineWidth,
3895
+ [vars$p.inputOutlineOffset]: refs.outlineOffset,
3896
+ [vars$p.inputOutlineColor]: refs.outlineColor,
3897
+ [vars$p.inputOutlineStyle]: refs.outlineStyle,
3898
+
3899
+ [vars$p.trackBorderStyle]: refs.borderStyle,
3900
+ [vars$p.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
3901
+ [vars$p.trackBorderColor]: refs.borderColor,
3902
+ [vars$p.trackBackgroundColor]: 'none',
3903
+ [vars$p.trackBorderRadius]: globalRefs$e.radius.md,
3904
+ [vars$p.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
3905
+ [vars$p.trackHeight]: checkboxHeight,
3906
+
3907
+ [vars$p.knobSize]: `calc(1em - ${knobMargin})`,
3908
+ [vars$p.knobRadius]: '50%',
3909
+ [vars$p.knobTopOffset]: '1px',
3910
+ [vars$p.knobLeftOffset]: knobMargin,
3911
+ [vars$p.knobColor]: refs.valueTextColor,
3912
+ [vars$p.knobTransitionDuration]: '0.3s',
3913
+
3914
+ [vars$p.labelTextColor]: refs.labelTextColor,
3915
+ [vars$p.labelFontWeight]: '400',
3916
+ [vars$p.labelLineHeight]: '1.35em',
3917
+ [vars$p.labelSpacing]: '1em',
3918
+ [vars$p.labelRequiredIndicator]: refs.requiredIndicator,
3919
+ [vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
3920
3920
 
3921
3921
  _checked: {
3922
- [vars$o.trackBorderColor]: refs.borderColor,
3923
- [vars$o.trackBackgroundColor]: refs.backgroundColor,
3924
- [vars$o.knobLeftOffset]: `calc(100% - var(${vars$o.knobSize}) - ${knobMargin})`,
3925
- [vars$o.knobColor]: refs.valueTextColor,
3926
- [vars$o.knobTextColor]: refs.valueTextColor,
3922
+ [vars$p.trackBorderColor]: refs.borderColor,
3923
+ [vars$p.trackBackgroundColor]: refs.backgroundColor,
3924
+ [vars$p.knobLeftOffset]: `calc(100% - var(${vars$p.knobSize}) - ${knobMargin})`,
3925
+ [vars$p.knobColor]: refs.valueTextColor,
3926
+ [vars$p.knobTextColor]: refs.valueTextColor,
3927
3927
  },
3928
3928
 
3929
3929
  _disabled: {
3930
- [vars$o.knobColor]: globalRefs$e.colors.surface.light,
3931
- [vars$o.trackBorderColor]: globalRefs$e.colors.surface.main,
3932
- [vars$o.trackBackgroundColor]: globalRefs$e.colors.surface.main,
3933
- [vars$o.labelTextColor]: refs.labelTextColor,
3930
+ [vars$p.knobColor]: globalRefs$e.colors.surface.light,
3931
+ [vars$p.trackBorderColor]: globalRefs$e.colors.surface.main,
3932
+ [vars$p.trackBackgroundColor]: globalRefs$e.colors.surface.main,
3933
+ [vars$p.labelTextColor]: refs.labelTextColor,
3934
3934
  _checked: {
3935
- [vars$o.knobColor]: globalRefs$e.colors.surface.light,
3936
- [vars$o.trackBackgroundColor]: globalRefs$e.colors.surface.main,
3935
+ [vars$p.knobColor]: globalRefs$e.colors.surface.light,
3936
+ [vars$p.trackBackgroundColor]: globalRefs$e.colors.surface.main,
3937
3937
  },
3938
3938
  },
3939
3939
 
3940
3940
  _invalid: {
3941
- [vars$o.trackBorderColor]: globalRefs$e.colors.error.main,
3942
- [vars$o.knobColor]: globalRefs$e.colors.error.main,
3941
+ [vars$p.trackBorderColor]: globalRefs$e.colors.error.main,
3942
+ [vars$p.knobColor]: globalRefs$e.colors.error.main,
3943
3943
  },
3944
3944
  };
3945
3945
 
3946
3946
  var switchToggle$1 = /*#__PURE__*/Object.freeze({
3947
3947
  __proto__: null,
3948
3948
  default: switchToggle,
3949
- vars: vars$o
3949
+ vars: vars$p
3950
3950
  });
3951
3951
 
3952
- const componentName$u = getComponentName('container');
3952
+ const componentName$v = getComponentName('container');
3953
3953
 
3954
- class RawContainer extends createBaseClass({ componentName: componentName$u, baseSelector: 'slot' }) {
3954
+ class RawContainer extends createBaseClass({ componentName: componentName$v, baseSelector: 'slot' }) {
3955
3955
  constructor() {
3956
3956
  super();
3957
3957
 
@@ -4025,7 +4025,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
4025
4025
  horizontalAlignment,
4026
4026
  shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
4027
4027
  },
4028
- componentName$u
4028
+ componentName$v
4029
4029
  );
4030
4030
 
4031
4031
  const { shadowColor: shadowColor$1 } = helperRefs$2;
@@ -4110,7 +4110,7 @@ const container = {
4110
4110
  },
4111
4111
  };
4112
4112
 
4113
- const vars$n = {
4113
+ const vars$o = {
4114
4114
  ...compVars$3,
4115
4115
  ...helperVars$2,
4116
4116
  };
@@ -4118,7 +4118,7 @@ const vars$n = {
4118
4118
  var container$1 = /*#__PURE__*/Object.freeze({
4119
4119
  __proto__: null,
4120
4120
  default: container,
4121
- vars: vars$n
4121
+ vars: vars$o
4122
4122
  });
4123
4123
 
4124
4124
  const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
@@ -4171,41 +4171,61 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
4171
4171
  return CssVarImageClass;
4172
4172
  };
4173
4173
 
4174
- const componentName$t = getComponentName('logo');
4174
+ const componentName$u = getComponentName('logo');
4175
4175
 
4176
4176
  const LogoClass = createCssVarImageClass({
4177
+ componentName: componentName$u,
4178
+ varName: 'url',
4179
+ fallbackVarName: 'fallbackUrl',
4180
+ });
4181
+
4182
+ const vars$n = LogoClass.cssVarList;
4183
+
4184
+ const logo$2 = {
4185
+ [vars$n.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
4186
+ };
4187
+
4188
+ var logo$3 = /*#__PURE__*/Object.freeze({
4189
+ __proto__: null,
4190
+ default: logo$2,
4191
+ vars: vars$n
4192
+ });
4193
+
4194
+ const componentName$t = getComponentName('totp-image');
4195
+
4196
+ const TotpImageClass = createCssVarImageClass({
4177
4197
  componentName: componentName$t,
4178
4198
  varName: 'url',
4179
4199
  fallbackVarName: 'fallbackUrl',
4180
4200
  });
4181
4201
 
4182
- const vars$m = LogoClass.cssVarList;
4202
+ const vars$m = TotpImageClass.cssVarList;
4183
4203
 
4184
4204
  const logo$1 = {
4185
- [vars$m.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
4205
+ [vars$m.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
4186
4206
  };
4187
4207
 
4188
- var logo$2 = /*#__PURE__*/Object.freeze({
4208
+ var totpImage = /*#__PURE__*/Object.freeze({
4189
4209
  __proto__: null,
4190
4210
  default: logo$1,
4191
4211
  vars: vars$m
4192
4212
  });
4193
4213
 
4194
- const componentName$s = getComponentName('totp-image');
4214
+ const componentName$s = getComponentName('notp-image');
4195
4215
 
4196
- const TotpImageClass = createCssVarImageClass({
4216
+ const NotpImageClass = createCssVarImageClass({
4197
4217
  componentName: componentName$s,
4198
4218
  varName: 'url',
4199
4219
  fallbackVarName: 'fallbackUrl',
4200
4220
  });
4201
4221
 
4202
- const vars$l = TotpImageClass.cssVarList;
4222
+ const vars$l = NotpImageClass.cssVarList;
4203
4223
 
4204
4224
  const logo = {
4205
- [vars$l.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
4225
+ [vars$l.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
4206
4226
  };
4207
4227
 
4208
- var totpImage = /*#__PURE__*/Object.freeze({
4228
+ var notpImage = /*#__PURE__*/Object.freeze({
4209
4229
  __proto__: null,
4210
4230
  default: logo,
4211
4231
  vars: vars$l
@@ -9761,8 +9781,9 @@ const components = {
9761
9781
  checkbox: checkbox$1,
9762
9782
  switchToggle: switchToggle$1,
9763
9783
  container: container$1,
9764
- logo: logo$2,
9784
+ logo: logo$3,
9765
9785
  totpImage,
9786
+ notpImage,
9766
9787
  text: text$3,
9767
9788
  link: link$1,
9768
9789
  divider: divider$1,
@@ -9796,7 +9817,7 @@ const vars = Object.keys(components).reduce(
9796
9817
  );
9797
9818
 
9798
9819
  const defaultTheme = { globals, components: theme };
9799
- const themeVars = { globals: vars$x, components: vars };
9820
+ const themeVars = { globals: vars$y, components: vars };
9800
9821
 
9801
9822
  const componentName$1 = getComponentName('recaptcha');
9802
9823
 
@@ -10070,6 +10091,7 @@ exports.ModalClass = ModalClass;
10070
10091
  exports.MultiSelectComboBoxClass = MultiSelectComboBoxClass;
10071
10092
  exports.NewPasswordClass = NewPasswordClass;
10072
10093
  exports.NotificationClass = NotificationClass;
10094
+ exports.NotpImageClass = NotpImageClass;
10073
10095
  exports.NumberFieldClass = NumberFieldClass;
10074
10096
  exports.PasscodeClass = PasscodeClass;
10075
10097
  exports.PasswordClass = PasswordClass;