@descope/web-components-ui 1.0.233 → 1.0.235

Sign up to get free protection for your applications and to get access to all the features.
Files changed (110) hide show
  1. package/dist/cjs/index.cjs.js +133 -15
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +212 -84
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/umd/{4513.js → 1721.js} +1 -1
  6. package/dist/umd/2481.js +1 -1
  7. package/dist/umd/3003.js +1 -1
  8. package/dist/umd/3092.js +23 -18
  9. package/dist/umd/322.js +90 -0
  10. package/dist/umd/4201.js +1 -1
  11. package/dist/umd/4226.js +1 -1
  12. package/dist/umd/4447.js +1 -2
  13. package/dist/umd/4803.js +1 -1
  14. package/dist/umd/5345.js +1 -1
  15. package/dist/umd/5517.js +2 -0
  16. package/dist/umd/5806.js +3 -3
  17. package/dist/umd/5977.js +18 -13
  18. package/dist/umd/6091.js +1 -1
  19. package/dist/umd/6542.js +22 -22
  20. package/dist/umd/6770.js +2 -2
  21. package/dist/umd/7531.js +77 -6
  22. package/dist/umd/849.js +744 -0
  23. package/dist/umd/849.js.LICENSE.txt +11 -0
  24. package/dist/umd/8623.js +2 -0
  25. package/dist/umd/8725.js +2 -2
  26. package/dist/umd/{1990.js → 9092.js} +21 -17
  27. package/dist/umd/9211.js +33 -19
  28. package/dist/umd/{7514.js → 9558.js} +128 -110
  29. package/dist/umd/boolean-fields-descope-checkbox-index-js.js +1 -1
  30. package/dist/umd/boolean-fields-descope-switch-toggle-index-js.js +1 -1
  31. package/dist/umd/descope-button-index-js.js +1 -1
  32. package/dist/umd/descope-button-selection-group-descope-button-selection-group-item-index-js.js +1 -1
  33. package/dist/umd/descope-button-selection-group-index-js.js +1 -1
  34. package/dist/umd/descope-combo-box-index-js.js +1 -1
  35. package/dist/umd/descope-date-picker-index-js.js +1 -1
  36. package/dist/umd/descope-divider-index-js.js +1 -1
  37. package/dist/umd/descope-email-field-index-js.js +1 -1
  38. package/dist/umd/descope-grid-descope-grid-selection-column-index-js.js +1 -1
  39. package/dist/umd/descope-grid-descope-grid-status-column-index-js.js +1 -1
  40. package/dist/umd/descope-grid-descope-grid-text-column-index-js.js +1 -1
  41. package/dist/umd/descope-grid-index-js.js +1 -1
  42. package/dist/umd/descope-link-index-js.js +1 -1
  43. package/dist/umd/descope-new-password-descope-new-password-internal-index-js.js +1 -1
  44. package/dist/umd/descope-number-field-index-js.js +1 -1
  45. package/dist/umd/descope-passcode-descope-passcode-internal-index-js.js +1 -1
  46. package/dist/umd/descope-passcode-index-js.js +1 -1
  47. package/dist/umd/descope-text-area-index-js.js +1 -1
  48. package/dist/umd/descope-text-field-index-js.js +1 -1
  49. package/dist/umd/descope-text-index-js.js +1 -1
  50. package/dist/umd/descope-upload-file-index-js.js +1 -1
  51. package/dist/umd/index.js +1 -1
  52. package/dist/umd/phone-fields-descope-phone-field-index-js.js +1 -1
  53. package/dist/umd/phone-fields-descope-phone-input-box-field-index-js.js +1 -1
  54. package/package.json +14 -13
  55. package/src/components/boolean-fields/commonStyles.js +1 -1
  56. package/src/components/boolean-fields/descope-checkbox/CheckboxClass.js +7 -2
  57. package/src/components/boolean-fields/descope-switch-toggle/SwitchToggleClass.js +6 -1
  58. package/src/components/descope-button/ButtonClass.js +5 -1
  59. package/src/components/descope-button-selection-group/ButtonSelectionGroupClass.js +3 -0
  60. package/src/components/descope-button-selection-group/descope-button-selection-group-item/ButtonSelectionGroupItemClass.js +4 -0
  61. package/src/components/descope-combo-box/ComboBoxClass.js +14 -0
  62. package/src/components/descope-divider/DividerClass.js +4 -0
  63. package/src/components/descope-email-field/EmailFieldClass.js +3 -1
  64. package/src/components/descope-link/LinkClass.js +1 -0
  65. package/src/components/descope-new-password/NewPasswordClass.js +10 -2
  66. package/src/components/descope-new-password/descope-new-password-internal/NewPasswordInternal.js +6 -1
  67. package/src/components/descope-number-field/NumberFieldClass.js +2 -0
  68. package/src/components/descope-passcode/PasscodeClass.js +3 -0
  69. package/src/components/descope-passcode/descope-passcode-internal/PasscodeInternal.js +5 -0
  70. package/src/components/descope-password/PasswordClass.js +8 -2
  71. package/src/components/descope-text/TextClass.js +1 -0
  72. package/src/components/descope-text-area/TextAreaClass.js +4 -1
  73. package/src/components/descope-text-field/TextFieldClass.js +3 -1
  74. package/src/components/descope-text-field/textFieldMappings.js +1 -0
  75. package/src/components/descope-upload-file/UploadFileClass.js +6 -0
  76. package/src/components/phone-fields/descope-phone-field/PhoneFieldClass.js +4 -2
  77. package/src/components/phone-fields/descope-phone-input-box-field/PhoneFieldInputBoxClass.js +4 -2
  78. package/src/helpers/themeHelpers/resetHelpers.js +28 -0
  79. package/src/theme/components/button.js +1 -0
  80. package/src/theme/components/buttonSelectionGroup/buttonSelectionGroup.js +1 -0
  81. package/src/theme/components/buttonSelectionGroup/buttonSelectionGroupItem.js +1 -0
  82. package/src/theme/components/checkbox.js +1 -0
  83. package/src/theme/components/comboBox.js +3 -0
  84. package/src/theme/components/divider.js +2 -0
  85. package/src/theme/components/emailField.js +1 -0
  86. package/src/theme/components/inputWrapper.js +2 -0
  87. package/src/theme/components/link.js +1 -0
  88. package/src/theme/components/newPassword.js +1 -0
  89. package/src/theme/components/numberField.js +1 -0
  90. package/src/theme/components/passcode.js +1 -0
  91. package/src/theme/components/password.js +1 -0
  92. package/src/theme/components/phoneField.js +1 -0
  93. package/src/theme/components/phoneInputBoxField.js +1 -0
  94. package/src/theme/components/switchToggle.js +1 -0
  95. package/src/theme/components/text.js +1 -0
  96. package/src/theme/components/textArea.js +1 -0
  97. package/src/theme/components/textField.js +1 -0
  98. package/src/theme/components/uploadFile.js +1 -0
  99. package/src/theme/globals.js +3 -0
  100. package/dist/umd/2873.js +0 -738
  101. package/dist/umd/2873.js.LICENSE.txt +0 -21
  102. package/dist/umd/446.js +0 -92
  103. package/dist/umd/729.js +0 -1
  104. package/dist/umd/9629.js +0 -2
  105. package/dist/umd/9671.js +0 -1
  106. /package/dist/umd/{4447.js.LICENSE.txt → 322.js.LICENSE.txt} +0 -0
  107. /package/dist/umd/{446.js.LICENSE.txt → 5517.js.LICENSE.txt} +0 -0
  108. /package/dist/umd/{9629.js.LICENSE.txt → 8623.js.LICENSE.txt} +0 -0
  109. /package/dist/umd/{1990.js.LICENSE.txt → 9092.js.LICENSE.txt} +0 -0
  110. /package/dist/umd/{7514.js.LICENSE.txt → 9558.js.LICENSE.txt} +0 -0
@@ -350,6 +350,8 @@ const genColors = (colors) => {
350
350
  }, {});
351
351
  };
352
352
 
353
+ const direction = 'ltr';
354
+
353
355
  const colors = genColors({
354
356
  surface: {
355
357
  main: 'lightgray',
@@ -495,6 +497,7 @@ const globals = {
495
497
  radius,
496
498
  shadow,
497
499
  fonts,
500
+ direction,
498
501
  };
499
502
  const vars$u = getThemeVars(globals);
500
503
 
@@ -2412,8 +2415,9 @@ let loadingIndicatorStyles;
2412
2415
  const ButtonClass = compose(
2413
2416
  createStyleMixin({
2414
2417
  mappings: {
2415
- hostWidth: { ...host$g, property: 'width' },
2418
+ hostWidth: { property: 'width' },
2416
2419
  hostHeight: { property: 'height' },
2420
+ hostDirection: { ...host$g, property: 'direction' },
2417
2421
  fontSize: {},
2418
2422
  fontFamily: {},
2419
2423
 
@@ -2452,6 +2456,9 @@ const ButtonClass = compose(
2452
2456
  :host {
2453
2457
  padding: calc(var(${ButtonClass.cssVarList.outlineWidth}) + var(${ButtonClass.cssVarList.outlineOffset}));
2454
2458
  }
2459
+ :host([full-width="true"]) {
2460
+ width: var(${ButtonClass.cssVarList.hostWidth});
2461
+ }
2455
2462
  vaadin-button {
2456
2463
  height: calc(var(${ButtonClass.cssVarList.hostHeight}) - var(${ButtonClass.cssVarList.outlineWidth}) - var(${ButtonClass.cssVarList.outlineOffset}));
2457
2464
  }
@@ -2519,6 +2526,7 @@ const button = {
2519
2526
  [compVars$4.cursor]: 'pointer',
2520
2527
  [compVars$4.hostHeight]: '3em',
2521
2528
  [compVars$4.hostWidth]: 'auto',
2529
+ [compVars$4.hostDirection]: globalRefs$f.direction,
2522
2530
 
2523
2531
  [compVars$4.borderRadius]: globalRefs$f.radius.sm,
2524
2532
  [compVars$4.borderWidth]: globalRefs$f.border.xs,
@@ -2636,6 +2644,7 @@ var textFieldMappings = {
2636
2644
 
2637
2645
  hostWidth: { ...host$f, property: 'width' },
2638
2646
  hostMinWidth: { ...host$f, property: 'min-width' },
2647
+ hostDirection: { ...host$f, property: 'direction' },
2639
2648
 
2640
2649
  inputBackgroundColor: { ...inputField$5, property: 'background-color' },
2641
2650
 
@@ -2772,6 +2781,34 @@ const resetInputOverrides = (name, cssVarList) => `
2772
2781
  ${resetInputFieldUnderlayingBorder(name)}
2773
2782
  `;
2774
2783
 
2784
+ // This function is used to support RTL correctly for input components.
2785
+ // It also fixes the error message to be displayed LTR since we currently
2786
+ // don't support RTL for error messages.
2787
+ const resetInputLabelPosition = (name) => `
2788
+ :host ::part(error-message) {
2789
+ direction: ltr;
2790
+ }
2791
+ :host([required]) ::part(required-indicator) {
2792
+ width: 1em;
2793
+ display: inline-flex;
2794
+ }
2795
+ :host([required]) ::part(required-indicator)::after {
2796
+ position: static;
2797
+ }
2798
+ :host([has-label]) ::part(label) {
2799
+ padding-right: 0;
2800
+ padding-bottom: 0;
2801
+ display: flex;
2802
+ width: 100%;
2803
+ }
2804
+ ${name} [slot="label"] {
2805
+ max-width: calc(100% - 1em);
2806
+ overflow: hidden;
2807
+ text-overflow: ellipsis;
2808
+ padding-bottom: 0.5em;
2809
+ }
2810
+ `;
2811
+
2775
2812
  const componentName$z = getComponentName('text-field');
2776
2813
 
2777
2814
  const observedAttrs = ['type'];
@@ -2815,8 +2852,9 @@ const TextFieldClass = compose(
2815
2852
  padding: calc(var(${TextFieldClass.cssVarList.inputOutlineWidth}) + var(${
2816
2853
  TextFieldClass.cssVarList.inputOutlineOffset
2817
2854
  }));
2818
- box-sizing: border-box;
2855
+ box-sizing: border-box;
2819
2856
  }
2857
+ ${resetInputLabelPosition('vaadin-text-field')}
2820
2858
  ${useHostExternalPadding(TextFieldClass.cssVarList)}
2821
2859
  ${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
2822
2860
  `,
@@ -2855,6 +2893,8 @@ const [theme$1, refs, vars$s] = createHelperVars(
2855
2893
 
2856
2894
  fontFamily: globalRefs$e.fonts.font1.family,
2857
2895
 
2896
+ direction: globalRefs$e.direction,
2897
+
2858
2898
  size: {
2859
2899
  xs: { fontSize: '12px' },
2860
2900
  sm: { fontSize: '14px' },
@@ -2905,6 +2945,7 @@ const vars$r = TextFieldClass.cssVarList;
2905
2945
  const textField = {
2906
2946
  [vars$r.hostWidth]: refs.width,
2907
2947
  [vars$r.hostMinWidth]: refs.minWidth,
2948
+ [vars$r.hostDirection]: refs.direction,
2908
2949
  [vars$r.fontSize]: refs.fontSize,
2909
2950
  [vars$r.fontFamily]: refs.fontFamily,
2910
2951
  [vars$r.labelTextColor]: refs.labelTextColor,
@@ -2997,6 +3038,7 @@ const PasswordClass = compose(
2997
3038
  mappings: {
2998
3039
  hostWidth: { ...host$e, property: 'width' },
2999
3040
  hostMinWidth: { ...host$e, property: 'min-width' },
3041
+ hostDirection: { ...host$e, property: 'direction' },
3000
3042
  fontSize: [{}, host$e],
3001
3043
  fontFamily: [label$7, inputField$4, errorMessage$9, helperText$7],
3002
3044
  inputHeight: { ...inputField$4, property: 'height' },
@@ -3049,10 +3091,11 @@ const PasswordClass = compose(
3049
3091
  display: inline-block;
3050
3092
  max-width: 100%;
3051
3093
  min-width: 10em;
3052
- box-sizing: border-box;
3094
+ box-sizing: border-box;
3053
3095
  }
3054
3096
  ${useHostExternalPadding(PasswordClass.cssVarList)}
3055
3097
  ${resetInputCursor('vaadin-password-field')}
3098
+ ${resetInputLabelPosition('vaadin-password-field')}
3056
3099
 
3057
3100
  vaadin-password-field {
3058
3101
  width: 100%;
@@ -3104,6 +3147,7 @@ const vars$q = PasswordClass.cssVarList;
3104
3147
 
3105
3148
  const password = {
3106
3149
  [vars$q.hostWidth]: refs.width,
3150
+ [vars$q.hostDirection]: refs.direction,
3107
3151
  [vars$q.fontSize]: refs.fontSize,
3108
3152
  [vars$q.fontFamily]: refs.fontFamily,
3109
3153
  [vars$q.labelTextColor]: refs.labelTextColor,
@@ -3153,6 +3197,7 @@ const NumberFieldClass = compose(
3153
3197
  NumberFieldClass.cssVarList.inputOutlineOffset
3154
3198
  }));
3155
3199
  }
3200
+ ${resetInputLabelPosition('vaadin-number-field')}
3156
3201
  ${useHostExternalPadding(NumberFieldClass.cssVarList)}
3157
3202
  ${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
3158
3203
  `,
@@ -3166,6 +3211,7 @@ const vars$p = NumberFieldClass.cssVarList;
3166
3211
  const numberField = {
3167
3212
  [vars$p.hostWidth]: refs.width,
3168
3213
  [vars$p.hostMinWidth]: refs.minWidth,
3214
+ [vars$p.hostDirection]: refs.direction,
3169
3215
  [vars$p.fontSize]: refs.fontSize,
3170
3216
  [vars$p.fontFamily]: refs.fontFamily,
3171
3217
  [vars$p.labelTextColor]: refs.labelTextColor,
@@ -3220,8 +3266,9 @@ const EmailFieldClass = compose(
3220
3266
  padding: calc(var(${EmailFieldClass.cssVarList.inputOutlineWidth}) + var(${
3221
3267
  EmailFieldClass.cssVarList.inputOutlineOffset
3222
3268
  }));
3223
- box-sizing: border-box;
3269
+ box-sizing: border-box;
3224
3270
  }
3271
+ ${resetInputLabelPosition('vaadin-email-field')}
3225
3272
  ${useHostExternalPadding(EmailFieldClass.cssVarList)}
3226
3273
  ${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
3227
3274
  `,
@@ -3235,6 +3282,7 @@ const vars$o = EmailFieldClass.cssVarList;
3235
3282
  const emailField = {
3236
3283
  [vars$o.hostWidth]: refs.width,
3237
3284
  [vars$o.hostMinWidth]: refs.minWidth,
3285
+ [vars$o.hostDirection]: refs.direction,
3238
3286
  [vars$o.fontSize]: refs.fontSize,
3239
3287
  [vars$o.fontFamily]: refs.fontFamily,
3240
3288
  [vars$o.labelTextColor]: refs.labelTextColor,
@@ -3288,6 +3336,7 @@ const TextAreaClass = compose(
3288
3336
  mappings: {
3289
3337
  hostWidth: { ...host$d, property: 'width' },
3290
3338
  hostMinWidth: { ...host$d, property: 'min-width' },
3339
+ hostDirection: { ...host$d, property: 'direction' },
3291
3340
  fontSize: [host$d, textArea$2],
3292
3341
  fontFamily: [label$6, inputField$3, helperText$6, errorMessage$8],
3293
3342
  labelTextColor: [
@@ -3322,11 +3371,12 @@ const TextAreaClass = compose(
3322
3371
  :host {
3323
3372
  display: inline-block;
3324
3373
  max-width: 100%;
3325
- box-sizing: border-box;
3374
+ box-sizing: border-box;
3326
3375
  }
3327
3376
  textarea {
3328
3377
  height: 100%;
3329
3378
  }
3379
+ ${resetInputLabelPosition('vaadin-text-area')}
3330
3380
  ${useHostExternalPadding(TextAreaClass.cssVarList)}
3331
3381
  ${resetInputContainer('vaadin-text-area')}
3332
3382
  ${resetInputField('vaadin-text-area')}
@@ -3344,6 +3394,7 @@ const vars$n = TextAreaClass.cssVarList;
3344
3394
  const textArea = {
3345
3395
  [vars$n.hostWidth]: refs.width,
3346
3396
  [vars$n.hostMinWidth]: refs.minWidth,
3397
+ [vars$n.hostDirection]: refs.direction,
3347
3398
  [vars$n.fontSize]: refs.fontSize,
3348
3399
  [vars$n.fontFamily]: refs.fontFamily,
3349
3400
  [vars$n.labelTextColor]: refs.labelTextColor,
@@ -3466,7 +3517,7 @@ vaadin-checkbox [slot="label"] {
3466
3517
  padding: 0;
3467
3518
  }
3468
3519
  [required] vaadin-checkbox [slot="label"]:not(:empty) {
3469
- padding-right: 1em;
3520
+ padding-inline-end: 1em;
3470
3521
  }
3471
3522
  descope-boolean-field-internal {
3472
3523
  -webkit-mask-image: none;
@@ -3500,12 +3551,13 @@ const CheckboxClass = compose(
3500
3551
  createStyleMixin({
3501
3552
  mappings: {
3502
3553
  hostWidth: { ...host$c, property: 'width' },
3554
+ hostDirection: { ...host$c, property: 'direction' },
3503
3555
 
3504
3556
  fontSize: [host$c, checkboxElement, checkboxLabel$1],
3505
3557
  fontFamily: [checkboxLabel$1, helperText$5, errorMessage$7],
3506
3558
 
3507
3559
  labelTextColor: { ...checkboxLabel$1, property: 'color' },
3508
- labelSpacing: { ...checkboxLabel$1, property: 'padding-left' },
3560
+ labelSpacing: { ...checkboxLabel$1, property: 'padding-inline-start' },
3509
3561
  labelLineHeight: { ...checkboxLabel$1, property: 'line-height' },
3510
3562
  labelFontWeight: { ...checkboxLabel$1, property: 'font-weight' },
3511
3563
  labelRequiredIndicator: { ...requiredIndicator$7, property: 'content' },
@@ -3545,12 +3597,16 @@ const CheckboxClass = compose(
3545
3597
  style: () => `
3546
3598
  ${commonStyles}
3547
3599
  ${useHostExternalPadding(CheckboxClass.cssVarList)}
3548
-
3600
+
3549
3601
  :host {
3550
3602
  display: inline-flex;
3551
3603
  max-width: 100%;
3552
3604
  }
3553
3605
 
3606
+ :host ::part(error-message) {
3607
+ direction: ltr;
3608
+ }
3609
+
3554
3610
  vaadin-text-field {
3555
3611
  width: 100%;
3556
3612
  }
@@ -3584,6 +3640,7 @@ const checkboxSize = '1.35em';
3584
3640
 
3585
3641
  const checkbox = {
3586
3642
  [vars$m.hostWidth]: refs.width,
3643
+ [vars$m.hostDirection]: refs.direction,
3587
3644
  [vars$m.fontSize]: refs.fontSize,
3588
3645
  [vars$m.fontFamily]: refs.fontFamily,
3589
3646
  [vars$m.labelTextColor]: refs.labelTextColor,
@@ -3644,12 +3701,13 @@ const SwitchToggleClass = compose(
3644
3701
  createStyleMixin({
3645
3702
  mappings: {
3646
3703
  hostWidth: { ...host$b, property: 'width' },
3704
+ hostDirection: { ...host$b, property: 'direction' },
3647
3705
 
3648
3706
  fontSize: [component, checkboxLabel, checkboxLabel],
3649
3707
  fontFamily: [checkboxLabel, helperText$4, errorMessage$6],
3650
3708
 
3651
3709
  labelTextColor: { ...checkboxLabel, property: 'color' },
3652
- labelSpacing: { ...checkboxLabel, property: 'padding-left' },
3710
+ labelSpacing: { ...checkboxLabel, property: 'padding-inline-start' },
3653
3711
  labelLineHeight: { ...checkboxLabel, property: 'line-height' },
3654
3712
  labelFontWeight: { ...checkboxLabel, property: 'font-weight' },
3655
3713
  labelRequiredIndicator: { ...requiredIndicator$6, property: 'content' },
@@ -3701,6 +3759,10 @@ const SwitchToggleClass = compose(
3701
3759
  max-width: 100%;
3702
3760
  }
3703
3761
 
3762
+ :host ::part(error-message) {
3763
+ direction: ltr;
3764
+ }
3765
+
3704
3766
  vaadin-text-field {
3705
3767
  width: 100%;
3706
3768
  }
@@ -3757,6 +3819,7 @@ const vars$l = SwitchToggleClass.cssVarList;
3757
3819
 
3758
3820
  const switchToggle = {
3759
3821
  [vars$l.hostWidth]: refs.width,
3822
+ [vars$l.hostDirection]: refs.direction,
3760
3823
  [vars$l.fontSize]: refs.fontSize,
3761
3824
  [vars$l.fontFamily]: refs.fontFamily,
3762
3825
 
@@ -4123,6 +4186,7 @@ const TextClass = compose(
4123
4186
  createStyleMixin({
4124
4187
  mappings: {
4125
4188
  hostWidth: { selector: () => ':host', property: 'width' },
4189
+ hostDirection: { selector: () => ':host', property: 'direction' },
4126
4190
  fontSize: {},
4127
4191
  textColor: { property: 'color' },
4128
4192
  textLineHeight: { property: 'line-height' },
@@ -4147,6 +4211,7 @@ const globalRefs$9 = getThemeRefs(globals);
4147
4211
  const vars$h = TextClass.cssVarList;
4148
4212
 
4149
4213
  const text$2 = {
4214
+ [vars$h.hostDirection]: globalRefs$9.direction,
4150
4215
  [vars$h.textLineHeight]: '1.35em',
4151
4216
  [vars$h.textAlign]: 'left',
4152
4217
  [vars$h.textColor]: globalRefs$9.colors.surface.dark,
@@ -4286,6 +4351,7 @@ const LinkClass = compose(
4286
4351
  createStyleMixin({
4287
4352
  mappings: {
4288
4353
  hostWidth: { ...host$a, property: 'width' },
4354
+ hostDirection: { ...text$1, property: 'direction' },
4289
4355
  textAlign: wrapper$1,
4290
4356
  textColor: [
4291
4357
  { ...anchor, property: 'color' },
@@ -4302,6 +4368,7 @@ const globalRefs$8 = getThemeRefs(globals);
4302
4368
  const vars$g = LinkClass.cssVarList;
4303
4369
 
4304
4370
  const link = {
4371
+ [vars$g.hostDirection]: globalRefs$8.direction,
4305
4372
  [vars$g.cursor]: 'pointer',
4306
4373
 
4307
4374
  [vars$g.textColor]: globalRefs$8.colors.primary.main,
@@ -4384,6 +4451,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$l, baseS
4384
4451
  }
4385
4452
  }
4386
4453
 
4454
+ const textVars$3 = TextClass.cssVarList;
4387
4455
  const { host: host$9, before, after: after$1, text } = {
4388
4456
  host: { selector: () => ':host' },
4389
4457
  before: { selector: '::before' },
@@ -4396,11 +4464,13 @@ const DividerClass = compose(
4396
4464
  mappings: {
4397
4465
  hostWidth: { ...host$9, property: 'width' },
4398
4466
  hostPadding: { ...host$9, property: 'padding' },
4467
+ hostDirection: { ...text, property: 'direction' },
4399
4468
 
4400
4469
  minHeight: {},
4401
4470
  alignItems: {},
4402
4471
  alignSelf: {},
4403
4472
  flexDirection: {},
4473
+ textAlign: { ...text, property: textVars$3.textAlign },
4404
4474
 
4405
4475
  labelTextWidth: { ...text, property: 'width' },
4406
4476
  labelTextMaxWidth: { ...text, property: 'max-width' },
@@ -4449,6 +4519,7 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
4449
4519
  const divider = {
4450
4520
  ...helperTheme$1,
4451
4521
 
4522
+ [compVars$2.hostDirection]: globalRefs$7.direction,
4452
4523
  [compVars$2.alignItems]: 'center',
4453
4524
  [compVars$2.flexDirection]: 'row',
4454
4525
  [compVars$2.alignSelf]: 'stretch',
@@ -4459,6 +4530,7 @@ const divider = {
4459
4530
  [compVars$2.labelTextWidth]: 'fit-content',
4460
4531
  [compVars$2.labelTextMaxWidth]: 'calc(100% - 100px)',
4461
4532
  [compVars$2.labelTextHorizontalSpacing]: helperRefs$1.spacing,
4533
+ [compVars$2.textAlign]: 'center',
4462
4534
 
4463
4535
  _vertical: {
4464
4536
  [compVars$2.minHeight]: '200px',
@@ -4557,6 +4629,7 @@ const PasscodeClass = compose(
4557
4629
  mappings: {
4558
4630
  fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$8],
4559
4631
  hostWidth: { property: 'width' },
4632
+ hostDirection: { ...host$8, property: 'direction' },
4560
4633
  fontFamily: [host$8, { ...label$5 }],
4561
4634
  labelTextColor: [
4562
4635
  { ...label$5, property: 'color' },
@@ -4653,6 +4726,7 @@ const PasscodeClass = compose(
4653
4726
  box-shadow: none;
4654
4727
  }
4655
4728
 
4729
+ ${resetInputLabelPosition('vaadin-text-field')}
4656
4730
  ${resetInputCursor('vaadin-text-field')}
4657
4731
  `,
4658
4732
  excludeAttrsSync: ['tabindex'],
@@ -4663,6 +4737,7 @@ const PasscodeClass = compose(
4663
4737
  const vars$e = PasscodeClass.cssVarList;
4664
4738
 
4665
4739
  const passcode = {
4740
+ [vars$e.hostDirection]: refs.direction,
4666
4741
  [vars$e.fontFamily]: refs.fontFamily,
4667
4742
  [vars$e.fontSize]: refs.fontSize,
4668
4743
  [vars$e.labelTextColor]: refs.labelTextColor,
@@ -5147,6 +5222,7 @@ const ComboBoxClass = compose(
5147
5222
  createStyleMixin({
5148
5223
  mappings: {
5149
5224
  hostWidth: { ...host$6, property: 'width' },
5225
+ hostDirection: { ...host$6, property: 'direction' },
5150
5226
  // we apply font-size also on the host so we can set its width with em
5151
5227
  fontSize: [{}, host$6],
5152
5228
  fontFamily: [label$4, placeholder, inputField$2, helperText$3, errorMessage$4],
@@ -5190,6 +5266,12 @@ const ComboBoxClass = compose(
5190
5266
  overlayFontFamily: { property: () => ComboBoxClass.cssVarList.overlay.fontFamily },
5191
5267
  overlayCursor: { property: () => ComboBoxClass.cssVarList.overlay.cursor },
5192
5268
  overlayItemBoxShadow: { property: () => ComboBoxClass.cssVarList.overlay.itemBoxShadow },
5269
+ overlayItemPaddingInlineStart: {
5270
+ property: () => ComboBoxClass.cssVarList.overlay.itemPaddingInlineStart,
5271
+ },
5272
+ overlayItemPaddingInlineEnd: {
5273
+ property: () => ComboBoxClass.cssVarList.overlay.itemPaddingInlineEnd,
5274
+ },
5193
5275
  },
5194
5276
  }),
5195
5277
  draggableMixin,
@@ -5204,6 +5286,11 @@ const ComboBoxClass = compose(
5204
5286
  fontFamily: { selector: 'vaadin-combo-box-item' },
5205
5287
  fontSize: { selector: 'vaadin-combo-box-item' },
5206
5288
  itemBoxShadow: { selector: 'vaadin-combo-box-item', property: 'box-shadow' },
5289
+ itemPaddingInlineStart: {
5290
+ selector: 'vaadin-combo-box-item',
5291
+ property: 'padding-inline-start',
5292
+ },
5293
+ itemPaddingInlineEnd: { selector: 'vaadin-combo-box-item', property: 'padding-inline-end' },
5207
5294
  },
5208
5295
  forward: {
5209
5296
  include: false,
@@ -5245,6 +5332,7 @@ const ComboBoxClass = compose(
5245
5332
  padding: 0;
5246
5333
  box-shadow: none;
5247
5334
  }
5335
+ ${resetInputLabelPosition('vaadin-combo-box')}
5248
5336
  `,
5249
5337
  // Note: we exclude `size` to avoid overriding Vaadin's ComboBox property
5250
5338
  // with the same name. Including it will cause Vaadin to calculate NaN size,
@@ -5261,6 +5349,7 @@ const vars$b = ComboBoxClass.cssVarList;
5261
5349
 
5262
5350
  const comboBox = {
5263
5351
  [vars$b.hostWidth]: refs.width,
5352
+ [vars$b.hostDirection]: refs.direction,
5264
5353
  [vars$b.fontSize]: refs.fontSize,
5265
5354
  [vars$b.fontFamily]: refs.fontFamily,
5266
5355
  [vars$b.labelTextColor]: refs.labelTextColor,
@@ -5283,6 +5372,8 @@ const comboBox = {
5283
5372
  [vars$b.inputDropdownButtonCursor]: 'pointer',
5284
5373
  [vars$b.inputDropdownButtonSize]: refs.toggleButtonSize,
5285
5374
  [vars$b.inputDropdownButtonOffset]: globalRefs$4.spacing.xs,
5375
+ [vars$b.overlayItemPaddingInlineStart]: globalRefs$4.spacing.xs,
5376
+ [vars$b.overlayItemPaddingInlineEnd]: globalRefs$4.spacing.lg,
5286
5377
 
5287
5378
  _readonly: {
5288
5379
  [vars$b.inputDropdownButtonCursor]: 'default',
@@ -6672,6 +6763,7 @@ const PhoneFieldClass = compose(
6672
6763
  { ...phoneInput$1, property: 'width' },
6673
6764
  { ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
6674
6765
  ],
6766
+ hostDirection: { ...host$5, property: 'direction' },
6675
6767
 
6676
6768
  inputBorderStyle: [
6677
6769
  { ...inputField$1, property: 'border-style' },
@@ -6755,16 +6847,15 @@ const PhoneFieldClass = compose(
6755
6847
  }
6756
6848
  vaadin-text-field::part(input-field) {
6757
6849
  padding: 0;
6758
- min-height: 0;
6759
6850
  background: transparent;
6760
6851
  overflow: hidden;
6761
6852
  }
6762
6853
  descope-phone-field-internal {
6763
6854
  -webkit-mask-image: none;
6764
6855
  padding: 0;
6765
- min-height: 0;
6766
6856
  width: 100%;
6767
6857
  height: 100%;
6858
+ direction: ltr;
6768
6859
  }
6769
6860
  descope-phone-field-internal > div {
6770
6861
  width: 100%;
@@ -6795,6 +6886,7 @@ const PhoneFieldClass = compose(
6795
6886
  vaadin-text-field::part(input-field)::after {
6796
6887
  border: none;
6797
6888
  }
6889
+ ${resetInputLabelPosition('vaadin-text-field')}
6798
6890
  `,
6799
6891
  excludeAttrsSync: ['tabindex'],
6800
6892
  componentName: componentName$d,
@@ -6805,6 +6897,7 @@ const vars$9 = PhoneFieldClass.cssVarList;
6805
6897
 
6806
6898
  const phoneField = {
6807
6899
  [vars$9.hostWidth]: refs.width,
6900
+ [vars$9.hostDirection]: refs.direction,
6808
6901
  [vars$9.fontSize]: refs.fontSize,
6809
6902
  [vars$9.fontFamily]: refs.fontFamily,
6810
6903
  [vars$9.labelTextColor]: refs.labelTextColor,
@@ -6904,6 +6997,7 @@ const PhoneFieldInputBoxClass = compose(
6904
6997
  fontFamily: [label$2, errorMessage$2, helperText$1],
6905
6998
  hostWidth: { ...host$4, property: 'width' },
6906
6999
  hostMinWidth: { ...host$4, property: 'min-width' },
7000
+ hostDirection: { ...host$4, property: 'direction' },
6907
7001
 
6908
7002
  inputBorderStyle: { ...inputField, property: 'border-style' },
6909
7003
  inputBorderWidth: { ...inputField, property: 'border-width' },
@@ -6959,7 +7053,6 @@ const PhoneFieldInputBoxClass = compose(
6959
7053
  }
6960
7054
  vaadin-text-field::part(input-field) {
6961
7055
  padding: 0;
6962
- min-height: 0;
6963
7056
  background: transparent;
6964
7057
  overflow: hidden;
6965
7058
  -webkit-mask-image: none;
@@ -6967,7 +7060,6 @@ const PhoneFieldInputBoxClass = compose(
6967
7060
  descope-phone-field-internal-input-box {
6968
7061
  -webkit-mask-image: none;
6969
7062
  padding: 0;
6970
- min-height: 0;
6971
7063
  width: 100%;
6972
7064
  height: 100%;
6973
7065
  }
@@ -6986,6 +7078,7 @@ const PhoneFieldInputBoxClass = compose(
6986
7078
  ${textVars.inputOutlineOffset}: 0;
6987
7079
  ${textVars.inputBorderWidth}: 0;
6988
7080
  ${textVars.inputBorderRadius}: 0;
7081
+ direction: ltr;
6989
7082
  }
6990
7083
  vaadin-text-field[readonly] > input:placeholder-shown {
6991
7084
  opacity: 1;
@@ -6993,6 +7086,7 @@ const PhoneFieldInputBoxClass = compose(
6993
7086
  vaadin-text-field::part(input-field)::after {
6994
7087
  border: none;
6995
7088
  }
7089
+ ${resetInputLabelPosition('vaadin-text-field')}
6996
7090
  `,
6997
7091
  excludeAttrsSync: ['tabindex'],
6998
7092
  componentName: componentName$b,
@@ -7004,6 +7098,7 @@ const vars$8 = PhoneFieldInputBoxClass.cssVarList;
7004
7098
  const phoneInputBoxField = {
7005
7099
  [vars$8.hostWidth]: '16em',
7006
7100
  [vars$8.hostMinWidth]: refs.minWidth,
7101
+ [vars$8.hostDirection]: refs.direction,
7007
7102
  [vars$8.fontSize]: refs.fontSize,
7008
7103
  [vars$8.fontFamily]: refs.fontFamily,
7009
7104
  [vars$8.labelTextColor]: refs.labelTextColor,
@@ -7072,12 +7167,13 @@ const customMixin$2 = (superclass) =>
7072
7167
  }
7073
7168
  };
7074
7169
 
7075
- const { host: host$3, label: label$1, internalInputsWrapper, errorMessage: errorMessage$1, helperText } = {
7170
+ const { host: host$3, label: label$1, internalInputsWrapper, errorMessage: errorMessage$1, helperText, passwordInput } = {
7076
7171
  host: { selector: () => ':host' },
7077
7172
  label: { selector: '::part(label)' },
7078
7173
  internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' },
7079
7174
  helperText: { selector: '::part(helper-text)' },
7080
7175
  errorMessage: { selector: '::part(error-message)' },
7176
+ passwordInput: { selector: 'descope-password' },
7081
7177
  };
7082
7178
 
7083
7179
  const NewPasswordClass = compose(
@@ -7095,6 +7191,10 @@ const NewPasswordClass = compose(
7095
7191
  errorMessageTextColor: { ...errorMessage$1, property: 'color' },
7096
7192
  hostWidth: { ...host$3, property: 'width' },
7097
7193
  hostMinWidth: { ...host$3, property: 'min-width' },
7194
+ hostDirection: [
7195
+ { ...host$3, property: 'direction' },
7196
+ { ...passwordInput, property: PasswordClass.cssVarList.hostDirection },
7197
+ ],
7098
7198
  inputsRequiredIndicator: { ...host$3, property: 'content' },
7099
7199
  spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
7100
7200
  },
@@ -7112,6 +7212,9 @@ const NewPasswordClass = compose(
7112
7212
  max-width: 100%;
7113
7213
  box-sizing: border-box;
7114
7214
  }
7215
+ :host ::part(error-message) {
7216
+ direction: ltr;
7217
+ }
7115
7218
  ${useHostExternalPadding(PasswordClass.cssVarList)}
7116
7219
  vaadin-text-field {
7117
7220
  padding: 0;
@@ -7147,7 +7250,7 @@ const NewPasswordClass = compose(
7147
7250
  }
7148
7251
  descope-new-password-internal vaadin-password-field::before {
7149
7252
  height: initial;
7150
- },
7253
+ }
7151
7254
  `,
7152
7255
  excludeAttrsSync: ['tabindex'],
7153
7256
  componentName: componentName$9,
@@ -7159,6 +7262,7 @@ const vars$7 = NewPasswordClass.cssVarList;
7159
7262
  const newPassword = {
7160
7263
  [vars$7.hostWidth]: refs.width,
7161
7264
  [vars$7.hostMinWidth]: refs.minWidth,
7265
+ [vars$7.hostDirection]: refs.direction,
7162
7266
  [vars$7.fontSize]: refs.fontSize,
7163
7267
  [vars$7.fontFamily]: refs.fontFamily,
7164
7268
  [vars$7.spaceBetweenInputs]: '1em',
@@ -7376,6 +7480,7 @@ class RawUploadFile extends BaseInputClass {
7376
7480
  }
7377
7481
  }
7378
7482
 
7483
+ const buttonVars = ButtonClass.cssVarList;
7379
7484
  const { host: host$2, wrapper, icon, title, description, requiredIndicator: requiredIndicator$1 } = {
7380
7485
  host: { selector: () => ':host' },
7381
7486
  wrapper: { selector: () => ':host > div' },
@@ -7398,6 +7503,10 @@ const UploadFileClass = compose(
7398
7503
  hostHeight: { ...host$2, property: 'height' },
7399
7504
  hostWidth: { ...host$2, property: 'width' },
7400
7505
  hostPadding: { property: 'padding' },
7506
+ hostDirection: [
7507
+ { ...host$2, property: 'direction' },
7508
+ { selector: () => ButtonClass.componentName, property: buttonVars.hostDirection },
7509
+ ],
7401
7510
  gap: { ...wrapper },
7402
7511
  lineHeight: { ...wrapper, property: 'line-height' },
7403
7512
  titleFontSize: { ...title, property: 'font-size' },
@@ -7418,6 +7527,7 @@ const UploadFileClass = compose(
7418
7527
  const vars$6 = UploadFileClass.cssVarList;
7419
7528
 
7420
7529
  const uploadFile = {
7530
+ [vars$6.hostDirection]: refs.direction,
7421
7531
  [vars$6.labelTextColor]: refs.labelTextColor,
7422
7532
  [vars$6.fontFamily]: refs.fontFamily,
7423
7533
 
@@ -7552,6 +7662,10 @@ class RawSelectItem extends createBaseClass({
7552
7662
  const ButtonSelectionGroupItemClass = compose(
7553
7663
  createStyleMixin({
7554
7664
  mappings: {
7665
+ hostDirection: {
7666
+ selector: () => ButtonClass.componentName,
7667
+ property: ButtonClass.cssVarList.hostDirection,
7668
+ },
7555
7669
  backgroundColor: {
7556
7670
  selector: () => ButtonClass.componentName,
7557
7671
  property: ButtonClass.cssVarList.backgroundColor,
@@ -7583,6 +7697,7 @@ const globalRefs$3 = getThemeRefs(globals);
7583
7697
  const vars$5 = ButtonSelectionGroupItemClass.cssVarList;
7584
7698
 
7585
7699
  const buttonSelectionGroupItem = {
7700
+ [vars$5.hostDirection]: 'inherit',
7586
7701
  [vars$5.backgroundColor]: globalRefs$3.colors.surface.light,
7587
7702
  [vars$5.labelTextColor]: globalRefs$3.colors.surface.contrast,
7588
7703
  [vars$5.borderColor]: globalRefs$3.colors.surface.main,
@@ -7863,6 +7978,7 @@ const ButtonSelectionGroupClass = compose(
7863
7978
  createStyleMixin({
7864
7979
  mappings: {
7865
7980
  hostWidth: { ...host$1, property: 'width' },
7981
+ hostDirection: { ...host$1, property: 'direction' },
7866
7982
  fontFamily: host$1,
7867
7983
  labelTextColor: [
7868
7984
  { ...label, property: 'color' },
@@ -7932,6 +8048,7 @@ const ButtonSelectionGroupClass = compose(
7932
8048
  box-shadow: none;
7933
8049
  }
7934
8050
 
8051
+ ${resetInputLabelPosition('vaadin-text-field')}
7935
8052
  ${resetInputCursor('vaadin-text-field')}
7936
8053
  `,
7937
8054
  excludeAttrsSync: ['tabindex'],
@@ -7943,6 +8060,7 @@ const globalRefs$2 = getThemeRefs(globals);
7943
8060
  const vars$4 = ButtonSelectionGroupClass.cssVarList;
7944
8061
 
7945
8062
  const buttonSelectionGroup = {
8063
+ [vars$4.hostDirection]: refs.direction,
7946
8064
  [vars$4.fontFamily]: refs.fontFamily,
7947
8065
  [vars$4.labelTextColor]: refs.labelTextColor,
7948
8066
  [vars$4.labelRequiredIndicator]: refs.requiredIndicator,