@descope/web-components-ui 1.0.218 → 1.0.220

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.
@@ -2380,7 +2380,7 @@ const iconStyles = `
2380
2380
 
2381
2381
  const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
2382
2382
 
2383
- const { host: host$f, label: label$b } = {
2383
+ const { host: host$f, label: label$9 } = {
2384
2384
  host: { selector: () => ':host' },
2385
2385
  label: { selector: '::part(label)' },
2386
2386
  };
@@ -2411,8 +2411,8 @@ const ButtonClass = compose(
2411
2411
  verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
2412
2412
 
2413
2413
  labelTextColor: { property: 'color' },
2414
- labelTextDecoration: { ...label$b, property: 'text-decoration' },
2415
- labelSpacing: { ...label$b, property: 'gap' },
2414
+ labelTextDecoration: { ...label$9, property: 'text-decoration' },
2415
+ labelSpacing: { ...label$9, property: 'gap' },
2416
2416
  },
2417
2417
  }),
2418
2418
  clickableMixin,
@@ -2588,7 +2588,7 @@ var button$1 = /*#__PURE__*/Object.freeze({
2588
2588
  vars: vars$q
2589
2589
  });
2590
2590
 
2591
- const { host: host$e, label: label$a, placeholder: placeholder$2, requiredIndicator: requiredIndicator$a, inputField: inputField$5, input, helperText: helperText$8, errorMessage: errorMessage$a } =
2591
+ const { host: host$e, label: label$8, placeholder: placeholder$2, requiredIndicator: requiredIndicator$a, inputField: inputField$5, input, helperText: helperText$8, errorMessage: errorMessage$a } =
2592
2592
  {
2593
2593
  host: { selector: () => ':host' },
2594
2594
  label: { selector: '::part(label)' },
@@ -2603,7 +2603,7 @@ const { host: host$e, label: label$a, placeholder: placeholder$2, requiredIndica
2603
2603
  var textFieldMappings = {
2604
2604
  // we apply font-size also on the host so we can set its width with em
2605
2605
  fontSize: [{}, host$e],
2606
- fontFamily: [label$a, inputField$5, helperText$8, errorMessage$a],
2606
+ fontFamily: [label$8, inputField$5, helperText$8, errorMessage$a],
2607
2607
 
2608
2608
  hostWidth: { ...host$e, property: 'width' },
2609
2609
  hostMinWidth: { ...host$e, property: 'min-width' },
@@ -2611,7 +2611,7 @@ var textFieldMappings = {
2611
2611
  inputBackgroundColor: { ...inputField$5, property: 'background-color' },
2612
2612
 
2613
2613
  labelTextColor: [
2614
- { ...label$a, property: 'color' },
2614
+ { ...label$8, property: 'color' },
2615
2615
  { ...requiredIndicator$a, property: 'color' },
2616
2616
  ],
2617
2617
  errorMessageTextColor: { ...errorMessage$a, property: 'color' },
@@ -2946,7 +2946,7 @@ const {
2946
2946
  inputElementPlaceholder,
2947
2947
  revealButtonContainer,
2948
2948
  revealButtonIcon,
2949
- label: label$9,
2949
+ label: label$7,
2950
2950
  requiredIndicator: requiredIndicator$9,
2951
2951
  errorMessage: errorMessage$9,
2952
2952
  helperText: helperText$7,
@@ -2969,7 +2969,7 @@ const PasswordClass = compose(
2969
2969
  hostWidth: { ...host$d, property: 'width' },
2970
2970
  hostMinWidth: { ...host$d, property: 'min-width' },
2971
2971
  fontSize: [{}, host$d],
2972
- fontFamily: [label$9, inputField$4, errorMessage$9, helperText$7],
2972
+ fontFamily: [label$7, inputField$4, errorMessage$9, helperText$7],
2973
2973
  inputHeight: { ...inputField$4, property: 'height' },
2974
2974
  inputHorizontalPadding: [
2975
2975
  { ...inputElement$1, property: 'padding-left' },
@@ -2988,7 +2988,7 @@ const PasswordClass = compose(
2988
2988
  inputOutlineWidth: { ...inputField$4, property: 'outline-width' },
2989
2989
 
2990
2990
  labelTextColor: [
2991
- { ...label$9, property: 'color' },
2991
+ { ...label$7, property: 'color' },
2992
2992
  { ...requiredIndicator$9, property: 'color' },
2993
2993
  ],
2994
2994
  labelRequiredIndicator: { ...requiredIndicator$9, property: 'content' },
@@ -3236,7 +3236,7 @@ const componentName$q = getComponentName('text-area');
3236
3236
 
3237
3237
  const {
3238
3238
  host: host$c,
3239
- label: label$8,
3239
+ label: label$6,
3240
3240
  placeholder: placeholder$1,
3241
3241
  inputField: inputField$3,
3242
3242
  textArea: textArea$2,
@@ -3260,9 +3260,9 @@ const TextAreaClass = compose(
3260
3260
  hostWidth: { ...host$c, property: 'width' },
3261
3261
  hostMinWidth: { ...host$c, property: 'min-width' },
3262
3262
  fontSize: [host$c, textArea$2],
3263
- fontFamily: [label$8, inputField$3, helperText$6, errorMessage$8],
3263
+ fontFamily: [label$6, inputField$3, helperText$6, errorMessage$8],
3264
3264
  labelTextColor: [
3265
- { ...label$8, property: 'color' },
3265
+ { ...label$6, property: 'color' },
3266
3266
  { ...requiredIndicator$8, property: 'color' },
3267
3267
  ],
3268
3268
  labelRequiredIndicator: { ...requiredIndicator$8, property: 'content' },
@@ -3398,7 +3398,6 @@ ${resetInputFieldDefaultWidth()}
3398
3398
  display: flex;
3399
3399
  box-sizing: border-box;
3400
3400
  }
3401
-
3402
3401
  vaadin-text-field {
3403
3402
  position: relative;
3404
3403
  padding: 0;
@@ -3410,8 +3409,8 @@ vaadin-text-field::before {
3410
3409
  margin: 0;
3411
3410
  }
3412
3411
  vaadin-text-field::part(label) {
3413
- position: absolute;
3414
- top: 0;
3412
+ position: absolute;
3413
+ top: 0;
3415
3414
  }
3416
3415
  vaadin-text-field::part(input-field) {
3417
3416
  padding: 0;
@@ -3419,38 +3418,22 @@ vaadin-text-field::part(input-field) {
3419
3418
  min-height: 0;
3420
3419
  }
3421
3420
  vaadin-text-field::part(input-field)::after {
3422
- background: none;
3421
+ background: none;
3423
3422
  }
3424
3423
  vaadin-text-field[focus-ring]::part(input-field) {
3425
3424
  box-shadow: none;
3426
3425
  }
3427
3426
 
3428
3427
  vaadin-checkbox [slot="label"] {
3429
- align-self: flex-start;
3430
- opacity: 0;
3431
- padding: 0;
3428
+ align-self: flex-start;
3429
+ padding: 0;
3432
3430
  }
3433
- [required] vaadin-checkbox [slot="label"] {
3431
+ [required] vaadin-checkbox [slot="label"]:not(:empty) {
3434
3432
  padding-right: 1em;
3435
3433
  }
3436
- vaadin-checkbox::part(checkbox) {
3437
- margin: 0;
3438
- }
3439
- vaadin-checkbox[focus-ring]::part(checkbox) {
3440
- box-shadow: none;
3441
- }
3442
-
3443
3434
  descope-boolean-field-internal {
3444
- -webkit-mask-image: none;
3445
- min-height: 0;
3446
- padding: 0;
3447
- }
3448
-
3449
- [slot="label"],
3450
- vaadin-checkbox,
3451
- vaadin-checkbox::part(checkbox) {
3452
- height: 100%;
3453
- cursor: pointer;
3435
+ -webkit-mask-image: none;
3436
+ min-height: initial;
3454
3437
  }
3455
3438
  `;
3456
3439
 
@@ -3461,19 +3444,17 @@ const {
3461
3444
  component: component$1,
3462
3445
  checkboxElement,
3463
3446
  checkboxSurface,
3464
- checkboxHiddenLabel: checkboxHiddenLabel$1,
3465
- label: label$7,
3447
+ checkboxLabel: checkboxLabel$1,
3466
3448
  requiredIndicator: requiredIndicator$7,
3467
3449
  helperText: helperText$5,
3468
3450
  errorMessage: errorMessage$7,
3469
3451
  } = {
3470
3452
  host: { selector: () => ':host' },
3471
- label: { selector: '::part(label)' },
3472
- requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
3453
+ requiredIndicator: { selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::after' },
3473
3454
  component: { selector: 'vaadin-checkbox' },
3474
3455
  checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
3475
3456
  checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
3476
- checkboxHiddenLabel: { selector: 'vaadin-checkbox [slot="label"]' },
3457
+ checkboxLabel: { selector: 'vaadin-checkbox [slot="label"]:not(:empty)' },
3477
3458
  helperText: { selector: '::part(helper-text)' },
3478
3459
  errorMessage: { selector: '::part(error-message)' },
3479
3460
  };
@@ -3483,25 +3464,17 @@ const CheckboxClass = compose(
3483
3464
  mappings: {
3484
3465
  hostWidth: { ...host$b, property: 'width' },
3485
3466
 
3486
- fontSize: [host$b, checkboxElement, label$7, checkboxHiddenLabel$1],
3487
- fontFamily: [label$7, checkboxHiddenLabel$1, helperText$5, errorMessage$7],
3467
+ fontSize: [host$b, checkboxElement, checkboxLabel$1],
3468
+ fontFamily: [checkboxLabel$1, helperText$5, errorMessage$7],
3488
3469
 
3489
- labelTextColor: [
3490
- { ...label$7, property: 'color' },
3491
- { ...requiredIndicator$7, property: 'color' },
3492
- { ...label$7, property: '-webkit-text-fill-color' },
3493
- ],
3470
+ labelTextColor: { ...checkboxLabel$1, property: 'color' },
3471
+ labelSpacing: { ...checkboxLabel$1, property: 'padding-left' },
3472
+ labelLineHeight: { ...checkboxLabel$1, property: 'line-height' },
3473
+ labelFontWeight: { ...checkboxLabel$1, property: 'font-weight' },
3494
3474
  labelRequiredIndicator: { ...requiredIndicator$7, property: 'content' },
3475
+
3495
3476
  errorMessageTextColor: { ...errorMessage$7, property: 'color' },
3496
3477
 
3497
- labelFontWeight: [
3498
- { ...label$7, property: 'font-weight' },
3499
- { ...checkboxHiddenLabel$1, property: 'font-weight' },
3500
- ],
3501
- labelSpacing: [
3502
- { ...label$7, property: 'left' },
3503
- { ...checkboxHiddenLabel$1, property: 'padding-left' },
3504
- ],
3505
3478
  inputValueTextColor: { ...checkboxSurface, property: 'color' },
3506
3479
  inputBackgroundColor: { ...checkboxElement, property: 'background-color' },
3507
3480
 
@@ -3521,9 +3494,6 @@ const CheckboxClass = compose(
3521
3494
  { ...checkboxElement, property: 'height' },
3522
3495
  { ...checkboxSurface, property: 'font-size' },
3523
3496
  { ...component$1, property: 'font-size' },
3524
- { ...checkboxHiddenLabel$1, property: 'line-height' },
3525
- { ...label$7, property: 'margin-left' },
3526
- { ...label$7, property: 'line-height' },
3527
3497
  ],
3528
3498
  },
3529
3499
  }),
@@ -3537,22 +3507,39 @@ const CheckboxClass = compose(
3537
3507
  wrappedEleName: 'vaadin-text-field',
3538
3508
  style: () => `
3539
3509
  ${commonStyles}
3540
- vaadin-checkbox::part(checkbox)::after {
3541
- top: 0;
3542
- left: 0;
3543
- }
3510
+ ${useHostExternalPadding(CheckboxClass.cssVarList)}
3511
+
3512
+ :host {
3513
+ display: inline-flex;
3514
+ max-width: 100%;
3515
+ }
3544
3516
 
3545
- vaadin-text-field::part(label) {
3546
- width: calc(100% - var(${CheckboxClass.cssVarList.inputSize}))
3517
+ vaadin-text-field {
3518
+ width: 100%;
3547
3519
  }
3548
- ${useHostExternalPadding(CheckboxClass.cssVarList)}
3549
- `,
3550
- excludeAttrsSync: ['tabindex'],
3520
+
3521
+ descope-boolean-field-internal {
3522
+ padding: 0;
3523
+ width: 100%;
3524
+ height: 100%;
3525
+ }
3526
+
3527
+ vaadin-checkbox::part(checkbox) {
3528
+ margin: 0;
3529
+ }
3530
+
3531
+ vaadin-checkbox::part(checkbox)::after {
3532
+ top: 0;
3533
+ left: 0;
3534
+ }
3535
+ `,
3536
+ excludeAttrsSync: ['label', 'tabindex'],
3551
3537
  componentName: componentName$o,
3552
3538
  })
3553
3539
  );
3554
3540
 
3555
3541
  const vars$j = CheckboxClass.cssVarList;
3542
+ const checkboxSize = '1.35em';
3556
3543
 
3557
3544
  const checkbox = {
3558
3545
  [vars$j.hostWidth]: refs.width,
@@ -3561,7 +3548,8 @@ const checkbox = {
3561
3548
  [vars$j.labelTextColor]: refs.labelTextColor,
3562
3549
  [vars$j.labelRequiredIndicator]: refs.requiredIndicator,
3563
3550
  [vars$j.labelFontWeight]: '400',
3564
- [vars$j.labelSpacing]: '0.75em',
3551
+ [vars$j.labelLineHeight]: checkboxSize,
3552
+ [vars$j.labelSpacing]: '1em',
3565
3553
  [vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
3566
3554
  [vars$j.inputOutlineWidth]: refs.outlineWidth,
3567
3555
  [vars$j.inputOutlineOffset]: refs.outlineOffset,
@@ -3572,7 +3560,7 @@ const checkbox = {
3572
3560
  [vars$j.inputBorderWidth]: refs.borderWidth,
3573
3561
  [vars$j.inputBorderStyle]: refs.borderStyle,
3574
3562
  [vars$j.inputBackgroundColor]: refs.backgroundColor,
3575
- [vars$j.inputSize]: '2em',
3563
+ [vars$j.inputSize]: checkboxSize,
3576
3564
 
3577
3565
  _checked: {
3578
3566
  [vars$j.inputValueTextColor]: refs.valueTextColor,
@@ -3596,19 +3584,17 @@ const {
3596
3584
  component,
3597
3585
  checkboxElement: track,
3598
3586
  checkboxSurface: knob,
3599
- checkboxHiddenLabel,
3600
- label: label$6,
3587
+ checkboxLabel,
3601
3588
  requiredIndicator: requiredIndicator$6,
3602
3589
  helperText: helperText$4,
3603
3590
  errorMessage: errorMessage$6,
3604
3591
  } = {
3605
3592
  host: { selector: () => ':host' },
3606
- label: { selector: '::part(label)' },
3607
- requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
3593
+ requiredIndicator: { selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::after' },
3608
3594
  component: { selector: 'vaadin-checkbox' },
3609
3595
  checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
3610
3596
  checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
3611
- checkboxHiddenLabel: { selector: 'vaadin-checkbox [slot="label"]' },
3597
+ checkboxLabel: { selector: 'vaadin-checkbox [slot="label"]:not(:empty)' },
3612
3598
  helperText: { selector: '::part(helper-text)' },
3613
3599
  errorMessage: { selector: '::part(error-message)' },
3614
3600
  };
@@ -3617,8 +3603,18 @@ const SwitchToggleClass = compose(
3617
3603
  createStyleMixin({
3618
3604
  mappings: {
3619
3605
  hostWidth: { ...host$a, property: 'width' },
3620
- fontSize: [component, label$6, checkboxHiddenLabel],
3621
- fontFamily: [label$6, helperText$4, errorMessage$6],
3606
+
3607
+ fontSize: [component, checkboxLabel, checkboxLabel],
3608
+ fontFamily: [checkboxLabel, helperText$4, errorMessage$6],
3609
+
3610
+ labelTextColor: { ...checkboxLabel, property: 'color' },
3611
+ labelSpacing: { ...checkboxLabel, property: 'padding-left' },
3612
+ labelLineHeight: { ...checkboxLabel, property: 'line-height' },
3613
+ labelFontWeight: { ...checkboxLabel, property: 'font-weight' },
3614
+ labelRequiredIndicator: { ...requiredIndicator$6, property: 'content' },
3615
+
3616
+ errorMessageTextColor: { ...errorMessage$6, property: 'color' },
3617
+
3622
3618
  trackBorderWidth: { ...track, property: 'border-width' },
3623
3619
  trackBorderStyle: { ...track, property: 'border-style' },
3624
3620
  trackBorderColor: { ...track, property: 'border-color' },
@@ -3641,25 +3637,6 @@ const SwitchToggleClass = compose(
3641
3637
  knobTopOffset: { ...knob, property: 'top' },
3642
3638
  knobLeftOffset: { ...knob, property: 'left' },
3643
3639
 
3644
- labelSpacing: [
3645
- { ...label$6, property: 'padding-left' },
3646
- { ...checkboxHiddenLabel, property: 'padding-left' },
3647
- ],
3648
- labelLineHeight: [
3649
- { ...label$6, property: 'line-height' },
3650
- { ...checkboxHiddenLabel, property: 'line-height' },
3651
- ],
3652
- labelFontWeight: [
3653
- { ...label$6, property: 'font-weight' },
3654
- { ...checkboxHiddenLabel, property: 'font-weight' },
3655
- ],
3656
- labelTextColor: [
3657
- { ...label$6, property: 'color' },
3658
- { ...requiredIndicator$6, property: 'color' },
3659
- { ...label$6, property: '-webkit-text-fill-color' },
3660
- ],
3661
- labelRequiredIndicator: { ...requiredIndicator$6, property: 'content' },
3662
- errorMessageTextColor: { ...errorMessage$6, property: 'color' },
3663
3640
  inputOutlineWidth: { ...track, property: 'outline-width' },
3664
3641
  inputOutlineOffset: { ...track, property: 'outline-offset' },
3665
3642
  inputOutlineColor: { ...track, property: 'outline-color' },
@@ -3677,21 +3654,48 @@ const SwitchToggleClass = compose(
3677
3654
  style: () => `
3678
3655
  ${commonStyles}
3679
3656
  ${useHostExternalPadding(SwitchToggleClass.cssVarList)}
3680
- vaadin-text-field::part(label) {
3681
- left: calc(var(${SwitchToggleClass.cssVarList.trackWidth}) + var(${
3682
- SwitchToggleClass.cssVarList.trackBorderWidth
3683
- }) * 2);
3657
+
3658
+ :host {
3659
+ display: inline-flex;
3660
+ max-width: 100%;
3661
+ }
3662
+
3663
+ descope-boolean-field-internal {
3664
+ padding: 0;
3665
+ width: 100%;
3666
+ }
3667
+
3668
+ vaadin-text-field::part(input-field) {
3669
+ cursor: pointer;
3670
+ }
3671
+
3672
+ vaadin-checkbox {
3673
+ cursor: pointer;
3674
+ }
3675
+
3676
+ vaadin-checkbox [slot="label"]:not(:empty) {
3677
+ cursor: pointer;
3684
3678
  }
3685
- vaadin-checkbox[active]::part(checkbox) {
3679
+
3680
+ vaadin-checkbox::part(checkbox) {
3681
+ margin: 0;
3682
+ }
3683
+
3684
+ vaadin-checkbox::part(checkbox)::before {
3685
+ content: '';
3686
+ }
3687
+
3688
+ vaadin-checkbox[active]::part(checkbox) {
3686
3689
  transform: none;
3687
3690
  }
3688
- vaadin-checkbox::part(checkbox)::after {
3691
+
3692
+ vaadin-checkbox::part(checkbox)::after {
3689
3693
  position: absolute;
3690
3694
  opacity: 1;
3691
3695
  content: '';
3692
3696
  }
3693
3697
  `,
3694
- excludeAttrsSync: ['tabindex'],
3698
+ excludeAttrsSync: ['label', 'tabindex'],
3695
3699
  componentName: componentName$n,
3696
3700
  })
3697
3701
  );
@@ -3703,6 +3707,7 @@ const globalRefs$9 = getThemeRefs(globals);
3703
3707
  const vars$i = SwitchToggleClass.cssVarList;
3704
3708
 
3705
3709
  const switchToggle = {
3710
+ [vars$i.hostWidth]: refs.width,
3706
3711
  [vars$i.fontSize]: refs.fontSize,
3707
3712
  [vars$i.fontFamily]: refs.fontFamily,
3708
3713
 
@@ -3728,13 +3733,11 @@ const switchToggle = {
3728
3733
 
3729
3734
  [vars$i.labelTextColor]: refs.labelTextColor,
3730
3735
  [vars$i.labelFontWeight]: '400',
3731
- [vars$i.labelLineHeight]: `calc(${checkboxHeight} + 0.25em)`,
3732
- [vars$i.labelSpacing]: '0.25em',
3736
+ [vars$i.labelLineHeight]: '1.35em',
3737
+ [vars$i.labelSpacing]: '1em',
3733
3738
  [vars$i.labelRequiredIndicator]: refs.requiredIndicator,
3734
3739
  [vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
3735
3740
 
3736
- [vars$i.hostWidth]: refs.width,
3737
-
3738
3741
  _checked: {
3739
3742
  [vars$i.trackBorderColor]: refs.borderColor,
3740
3743
  [vars$i.trackBackgroundColor]: refs.backgroundColor,
@@ -4095,7 +4098,7 @@ const globalRefs$7 = getThemeRefs(globals);
4095
4098
  const vars$e = TextClass.cssVarList;
4096
4099
 
4097
4100
  const text$2 = {
4098
- [vars$e.textLineHeight]: '1em',
4101
+ [vars$e.textLineHeight]: '1.35em',
4099
4102
  [vars$e.textAlign]: 'left',
4100
4103
  [vars$e.textColor]: globalRefs$7.colors.surface.dark,
4101
4104
  variant: {
@@ -4456,13 +4459,13 @@ const customMixin$4 = (superclass) =>
4456
4459
  const template = document.createElement('template');
4457
4460
 
4458
4461
  template.innerHTML = `
4459
- <${componentName$g}
4460
- bordered="true"
4461
- name="code"
4462
- tabindex="-1"
4463
- slot="input"
4464
- ><slot></slot></${componentName$g}>
4465
- `;
4462
+ <${componentName$g}
4463
+ bordered="true"
4464
+ name="code"
4465
+ tabindex="-1"
4466
+ slot="input"
4467
+ ><slot></slot></${componentName$g}>
4468
+ `;
4466
4469
 
4467
4470
  this.baseElement.appendChild(template.content.cloneNode(true));
4468
4471
 
@@ -7847,7 +7850,7 @@ const ButtonSelectionGroupClass = compose(
7847
7850
  padding: 0;
7848
7851
  width: 100%;
7849
7852
  height: 100%;
7850
- display:inline-block;
7853
+ display: inline-block;
7851
7854
  min-height: initial;
7852
7855
  }
7853
7856