@descope/web-components-ui 1.0.295 → 1.0.297

Sign up to get free protection for your applications and to get access to all the features.
Files changed (213) hide show
  1. package/dist/cjs/index.cjs.js +586 -359
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/index.d.ts +2 -1
  4. package/dist/index.esm.js +569 -341
  5. package/dist/index.esm.js.map +1 -1
  6. package/dist/umd/1224.js +1 -1
  7. package/dist/umd/1438.js +16 -9
  8. package/dist/umd/1438.js.LICENSE.txt +12 -0
  9. package/dist/umd/1612.js +338 -0
  10. package/dist/umd/1621.js +2 -2
  11. package/dist/umd/2362.js +129 -0
  12. package/dist/umd/3830.js +2 -0
  13. package/dist/umd/{3003.js.LICENSE.txt → 3830.js.LICENSE.txt} +12 -0
  14. package/dist/umd/3951.js +116 -4
  15. package/dist/umd/3951.js.LICENSE.txt +18 -0
  16. package/dist/umd/{9211.js → 4024.js} +5 -5
  17. package/dist/umd/{2775.js → 4028.js} +10 -10
  18. package/dist/umd/4028.js.LICENSE.txt +23 -0
  19. package/dist/umd/4052.js +338 -0
  20. package/dist/umd/4392.js +1 -0
  21. package/dist/umd/4569.js +1 -0
  22. package/dist/umd/4746.js +124 -0
  23. package/dist/umd/{6091.js.LICENSE.txt → 4746.js.LICENSE.txt} +6 -0
  24. package/dist/umd/4978.js +1 -0
  25. package/dist/umd/{4595.js → 5135.js} +93 -5
  26. package/dist/umd/{2775.js.LICENSE.txt → 5135.js.LICENSE.txt} +2 -2
  27. package/dist/umd/5517.js +1 -1
  28. package/dist/umd/5806.js +4 -4
  29. package/dist/umd/5910.js +1 -1
  30. package/dist/umd/63.js +147 -1
  31. package/dist/umd/63.js.LICENSE.txt +13 -1
  32. package/dist/umd/6594.js +2 -0
  33. package/dist/umd/{1940.js.LICENSE.txt → 6594.js.LICENSE.txt} +1 -1
  34. package/dist/umd/6770.js +4 -4
  35. package/dist/umd/7056.js +376 -5
  36. package/dist/umd/7056.js.LICENSE.txt +6 -0
  37. package/dist/umd/7164.js +148 -0
  38. package/dist/umd/{2106.js.LICENSE.txt → 7164.js.LICENSE.txt} +1 -7
  39. package/dist/umd/7531.js +2 -2
  40. package/dist/umd/7911.js +4 -4
  41. package/dist/umd/7911.js.LICENSE.txt +6 -0
  42. package/dist/umd/{3092.js → 8191.js} +40 -5
  43. package/dist/umd/8866.js +97 -5
  44. package/dist/umd/8866.js.LICENSE.txt +12 -0
  45. package/dist/umd/9092.js +440 -12
  46. package/dist/umd/9092.js.LICENSE.txt +6 -0
  47. package/dist/umd/{1940.js → 9314.js} +126 -7
  48. package/dist/umd/9314.js.LICENSE.txt +11 -0
  49. package/dist/umd/9423.js +608 -0
  50. package/dist/umd/9423.js.LICENSE.txt +23 -0
  51. package/dist/umd/9562.js +338 -0
  52. package/dist/umd/9562.js.LICENSE.txt +11 -0
  53. package/dist/umd/DescopeDev.js +1 -0
  54. package/dist/umd/boolean-fields-descope-boolean-field-internal-index-js.js +1 -1
  55. package/dist/umd/boolean-fields-descope-checkbox-index-js.js +2 -1
  56. package/dist/umd/boolean-fields-descope-switch-toggle-index-js.js +2 -1
  57. package/dist/umd/button-selection-group-fields-descope-button-multi-selection-group-index-js.js +1 -1
  58. package/dist/umd/button-selection-group-fields-descope-button-multi-selection-group-internal-index-js.js +1 -1
  59. package/dist/umd/button-selection-group-fields-descope-button-selection-group-index-js.js +1 -1
  60. package/dist/umd/button-selection-group-fields-descope-button-selection-group-internal-index-js.js +1 -1
  61. package/dist/umd/button-selection-group-fields-descope-button-selection-group-item-index-js.js +1 -1
  62. package/dist/umd/descope-avatar-index-js.js +1 -1
  63. package/dist/umd/descope-badge-index-js.js +1 -1
  64. package/dist/umd/descope-button-index-js.js +338 -1
  65. package/dist/umd/descope-button-index-js.js.LICENSE.txt +11 -0
  66. package/dist/umd/descope-combo-box-index-js.js +113 -1
  67. package/dist/umd/descope-container-index-js.js +1 -1
  68. package/dist/umd/descope-date-picker-index-js.js +1 -1
  69. package/dist/umd/descope-divider-index-js.js +1 -1
  70. package/dist/umd/descope-email-field-index-js.js +54 -1
  71. package/dist/umd/descope-email-field-index-js.js.LICENSE.txt +11 -0
  72. package/dist/umd/descope-grid-descope-grid-custom-column-index-js.js +90 -1
  73. package/dist/umd/{1735.js.LICENSE.txt → descope-grid-descope-grid-custom-column-index-js.js.LICENSE.txt} +2 -2
  74. package/dist/umd/descope-grid-descope-grid-selection-column-index-js.js +2 -1
  75. package/dist/umd/descope-grid-descope-grid-selection-column-index-js.js.LICENSE.txt +17 -0
  76. package/dist/umd/descope-grid-descope-grid-text-column-index-js.js +90 -1
  77. package/dist/umd/descope-grid-descope-grid-text-column-index-js.js.LICENSE.txt +17 -0
  78. package/dist/umd/descope-grid-index-js.js +1 -1
  79. package/dist/umd/descope-image-index-js.js +1 -1
  80. package/dist/umd/descope-link-index-js.js +1 -1
  81. package/dist/umd/descope-loader-linear-index-js.js +1 -1
  82. package/dist/umd/descope-loader-radial-index-js.js +1 -1
  83. package/dist/umd/descope-logo-index-js.js +1 -1
  84. package/dist/umd/descope-modal-index-js.js +1 -1
  85. package/dist/umd/descope-multi-select-combo-box-index-js.js +1 -1
  86. package/dist/umd/descope-new-password-descope-new-password-internal-index-js.js +1 -1
  87. package/dist/umd/descope-new-password-index-js.js +1 -1
  88. package/dist/umd/descope-notification-descope-notification-card-index-js.js +1 -1
  89. package/dist/umd/descope-notification-index-js.js +1 -1
  90. package/dist/umd/descope-notp-image-index-js.js +1 -1
  91. package/dist/umd/descope-number-field-index-js.js +1 -1
  92. package/dist/umd/descope-passcode-descope-passcode-internal-index-js.js +1 -1
  93. package/dist/umd/descope-passcode-index-js.js +37 -1
  94. package/dist/umd/descope-passcode-index-js.js.LICENSE.txt +11 -0
  95. package/dist/umd/descope-password-index-js.js +1 -1
  96. package/dist/umd/descope-policy-validation-index-js.js +1 -1
  97. package/dist/umd/descope-recaptcha-index-js.js +1 -1
  98. package/dist/umd/descope-text-area-index-js.js +1 -1
  99. package/dist/umd/descope-text-field-index-js.js +37 -1
  100. package/dist/umd/descope-text-field-index-js.js.LICENSE.txt +11 -0
  101. package/dist/umd/descope-totp-image-index-js.js +1 -1
  102. package/dist/umd/descope-upload-file-index-js.js +1 -1
  103. package/dist/umd/descope-user-attribute-index-js.js +1 -1
  104. package/dist/umd/descope-user-auth-method-index-js.js +1 -1
  105. package/dist/umd/index.js +1 -1
  106. package/dist/umd/mapping-fields-descope-mappings-field-descope-mapping-item-index-js.js +1 -1
  107. package/dist/umd/mapping-fields-descope-mappings-field-descope-mappings-field-internal-index-js.js +1 -1
  108. package/dist/umd/mapping-fields-descope-mappings-field-index-js.js +1 -126
  109. package/dist/umd/mapping-fields-descope-saml-group-mappings-descope-saml-group-mappings-internal-index-js.js +1 -1
  110. package/dist/umd/mapping-fields-descope-saml-group-mappings-index-js.js +1 -1
  111. package/dist/umd/phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js +1 -1
  112. package/dist/umd/phone-fields-descope-phone-field-index-js.js +1 -1
  113. package/dist/umd/phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js.js +37 -1
  114. package/dist/umd/phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js.js.LICENSE.txt +11 -0
  115. package/dist/umd/phone-fields-descope-phone-input-box-field-index-js.js +1 -1
  116. package/dist/umd/text-components-descope-markdown-content-index-js.js +1 -0
  117. package/dist/umd/text-components-descope-text-index-js.js +1 -0
  118. package/package.json +4 -2
  119. package/src/components/descope-divider/DividerClass.js +1 -1
  120. package/src/components/descope-divider/index.js +1 -1
  121. package/src/components/descope-link/LinkClass.js +1 -1
  122. package/src/components/descope-link/index.js +1 -1
  123. package/src/components/descope-user-attribute/UserAttributeClass.js +1 -1
  124. package/src/components/descope-user-attribute/index.js +1 -1
  125. package/src/components/descope-user-auth-method/UserAuthMethodClass.js +3 -2
  126. package/src/components/descope-user-auth-method/index.js +1 -1
  127. package/src/components/mapping-fields/descope-mappings-field/MappingsFieldClass.js +1 -1
  128. package/src/components/mapping-fields/descope-mappings-field/index.js +1 -1
  129. package/src/components/text-components/createBaseTextClass.js +26 -0
  130. package/src/components/text-components/descope-markdown-content/MarkdownContentClass.js +98 -0
  131. package/src/components/text-components/descope-markdown-content/helpers.js +41 -0
  132. package/src/components/text-components/descope-markdown-content/index.js +5 -0
  133. package/src/components/text-components/descope-text/TextClass.js +34 -0
  134. package/src/components/text-components/hideWhenEmptyMixin.js +17 -0
  135. package/src/dev/index.js +1 -0
  136. package/src/index.cjs.js +2 -1
  137. package/src/index.d.ts +2 -1
  138. package/src/index.js +2 -1
  139. package/src/mixins/normalizeBooleanAttributesMixin.js +1 -1
  140. package/src/theme/components/index.js +2 -0
  141. package/src/theme/components/markdownContent.js +84 -0
  142. package/src/theme/components/text.js +1 -1
  143. package/dist/umd/1000.js +0 -1
  144. package/dist/umd/1037.js +0 -2
  145. package/dist/umd/1721.js +0 -1
  146. package/dist/umd/1735.js +0 -73
  147. package/dist/umd/2066.js +0 -2
  148. package/dist/umd/2106.js +0 -73
  149. package/dist/umd/2269.js +0 -2
  150. package/dist/umd/2269.js.LICENSE.txt +0 -5
  151. package/dist/umd/2481.js +0 -1
  152. package/dist/umd/262.js +0 -2
  153. package/dist/umd/262.js.LICENSE.txt +0 -5
  154. package/dist/umd/3003.js +0 -2
  155. package/dist/umd/3208.js +0 -2
  156. package/dist/umd/3208.js.LICENSE.txt +0 -5
  157. package/dist/umd/322.js +0 -90
  158. package/dist/umd/322.js.LICENSE.txt +0 -5
  159. package/dist/umd/3249.js +0 -2
  160. package/dist/umd/3249.js.LICENSE.txt +0 -5
  161. package/dist/umd/3373.js +0 -2
  162. package/dist/umd/3373.js.LICENSE.txt +0 -5
  163. package/dist/umd/3585.js +0 -1
  164. package/dist/umd/3878.js +0 -1
  165. package/dist/umd/4201.js +0 -1
  166. package/dist/umd/422.js +0 -2
  167. package/dist/umd/422.js.LICENSE.txt +0 -5
  168. package/dist/umd/4226.js +0 -114
  169. package/dist/umd/4447.js +0 -1
  170. package/dist/umd/4567.js +0 -1
  171. package/dist/umd/4577.js +0 -1
  172. package/dist/umd/4595.js.LICENSE.txt +0 -11
  173. package/dist/umd/4803.js +0 -1
  174. package/dist/umd/4905.js +0 -2
  175. package/dist/umd/4905.js.LICENSE.txt +0 -5
  176. package/dist/umd/4946.js +0 -2
  177. package/dist/umd/4946.js.LICENSE.txt +0 -5
  178. package/dist/umd/6091.js +0 -124
  179. package/dist/umd/6606.js +0 -17
  180. package/dist/umd/6687.js +0 -9
  181. package/dist/umd/6687.js.LICENSE.txt +0 -5
  182. package/dist/umd/6977.js +0 -2
  183. package/dist/umd/6977.js.LICENSE.txt +0 -5
  184. package/dist/umd/7044.js +0 -1
  185. package/dist/umd/7583.js +0 -113
  186. package/dist/umd/8623.js +0 -2
  187. package/dist/umd/8623.js.LICENSE.txt +0 -5
  188. package/dist/umd/8725.js +0 -37
  189. package/dist/umd/9189.js +0 -2
  190. package/dist/umd/9189.js.LICENSE.txt +0 -5
  191. package/dist/umd/9211.js.LICENSE.txt +0 -5
  192. package/dist/umd/9214.js +0 -1
  193. package/dist/umd/9320.js +0 -2
  194. package/dist/umd/9320.js.LICENSE.txt +0 -5
  195. package/dist/umd/9383.js +0 -94
  196. package/dist/umd/9434.js +0 -1
  197. package/dist/umd/9437.js +0 -19
  198. package/dist/umd/9437.js.LICENSE.txt +0 -5
  199. package/dist/umd/9680.js +0 -2
  200. package/dist/umd/9680.js.LICENSE.txt +0 -5
  201. package/dist/umd/9789.js +0 -1
  202. package/dist/umd/descope-text-index-js.js +0 -1
  203. package/dist/umd/mapping-fields-descope-mappings-field-index-js.js.LICENSE.txt +0 -5
  204. package/src/components/descope-text/TextClass.js +0 -67
  205. /package/dist/umd/{3092.js.LICENSE.txt → 1612.js.LICENSE.txt} +0 -0
  206. /package/dist/umd/{6606.js.LICENSE.txt → 2362.js.LICENSE.txt} +0 -0
  207. /package/dist/umd/{4226.js.LICENSE.txt → 4024.js.LICENSE.txt} +0 -0
  208. /package/dist/umd/{8725.js.LICENSE.txt → 4052.js.LICENSE.txt} +0 -0
  209. /package/dist/umd/{9383.js.LICENSE.txt → 8191.js.LICENSE.txt} +0 -0
  210. /package/dist/umd/{1037.js.LICENSE.txt → boolean-fields-descope-checkbox-index-js.js.LICENSE.txt} +0 -0
  211. /package/dist/umd/{2066.js.LICENSE.txt → boolean-fields-descope-switch-toggle-index-js.js.LICENSE.txt} +0 -0
  212. /package/dist/umd/{7583.js.LICENSE.txt → descope-combo-box-index-js.js.LICENSE.txt} +0 -0
  213. /package/src/components/{descope-text → text-components/descope-text}/index.js +0 -0
@@ -2,6 +2,7 @@
2
2
 
3
3
  var merge = require('lodash.merge');
4
4
  var Color = require('color');
5
+ var markdownit = require('markdown-it');
5
6
 
6
7
  const DESCOPE_PREFIX = 'descope';
7
8
  const CSS_SELECTOR_SPECIFIER_MULTIPLY = 3;
@@ -630,7 +631,7 @@ const globals = {
630
631
  fonts,
631
632
  direction,
632
633
  };
633
- const vars$E = getThemeVars(globals);
634
+ const vars$F = getThemeVars(globals);
634
635
 
635
636
  const createCssVar = (varName, fallback) => `var(${varName}${fallback ? `, ${fallback}` : ''})`;
636
637
 
@@ -1045,7 +1046,7 @@ const normalizeBooleanAttributesMixin = (superclass) =>
1045
1046
  }
1046
1047
  } else if (!attrVal) {
1047
1048
  // eslint-disable-next-line no-console
1048
- console.warn(
1049
+ console.debug(
1049
1050
  `attribute "${attr}" has no value, should it be added to the boolean attributes list?`
1050
1051
  );
1051
1052
  }
@@ -2576,7 +2577,7 @@ const clickableMixin = (superclass) =>
2576
2577
  }
2577
2578
  };
2578
2579
 
2579
- const componentName$N = getComponentName('button');
2580
+ const componentName$O = getComponentName('button');
2580
2581
 
2581
2582
  const resetStyles = `
2582
2583
  :host {
@@ -2678,7 +2679,7 @@ const ButtonClass = compose(
2678
2679
  }
2679
2680
  `,
2680
2681
  excludeAttrsSync: ['tabindex'],
2681
- componentName: componentName$N,
2682
+ componentName: componentName$O,
2682
2683
  })
2683
2684
  );
2684
2685
 
@@ -2715,31 +2716,31 @@ loadingIndicatorStyles = `
2715
2716
  }
2716
2717
  `;
2717
2718
 
2718
- const globalRefs$n = getThemeRefs(globals);
2719
+ const globalRefs$o = getThemeRefs(globals);
2719
2720
  const compVars$5 = ButtonClass.cssVarList;
2720
2721
 
2721
2722
  const mode = {
2722
- primary: globalRefs$n.colors.primary,
2723
- secondary: globalRefs$n.colors.secondary,
2724
- success: globalRefs$n.colors.success,
2725
- error: globalRefs$n.colors.error,
2726
- surface: globalRefs$n.colors.surface,
2723
+ primary: globalRefs$o.colors.primary,
2724
+ secondary: globalRefs$o.colors.secondary,
2725
+ success: globalRefs$o.colors.success,
2726
+ error: globalRefs$o.colors.error,
2727
+ surface: globalRefs$o.colors.surface,
2727
2728
  };
2728
2729
 
2729
- const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$N);
2730
+ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$O);
2730
2731
 
2731
2732
  const button = {
2732
2733
  ...helperTheme$3,
2733
2734
 
2734
- [compVars$5.fontFamily]: globalRefs$n.fonts.font1.family,
2735
+ [compVars$5.fontFamily]: globalRefs$o.fonts.font1.family,
2735
2736
 
2736
2737
  [compVars$5.cursor]: 'pointer',
2737
2738
  [compVars$5.hostHeight]: '3em',
2738
2739
  [compVars$5.hostWidth]: 'auto',
2739
- [compVars$5.hostDirection]: globalRefs$n.direction,
2740
+ [compVars$5.hostDirection]: globalRefs$o.direction,
2740
2741
 
2741
- [compVars$5.borderRadius]: globalRefs$n.radius.sm,
2742
- [compVars$5.borderWidth]: globalRefs$n.border.xs,
2742
+ [compVars$5.borderRadius]: globalRefs$o.radius.sm,
2743
+ [compVars$5.borderWidth]: globalRefs$o.border.xs,
2743
2744
  [compVars$5.borderStyle]: 'solid',
2744
2745
  [compVars$5.borderColor]: 'transparent',
2745
2746
 
@@ -2782,10 +2783,10 @@ const button = {
2782
2783
  },
2783
2784
 
2784
2785
  _disabled: {
2785
- [helperVars$3.main]: globalRefs$n.colors.surface.light,
2786
- [helperVars$3.dark]: globalRefs$n.colors.surface.dark,
2787
- [helperVars$3.light]: globalRefs$n.colors.surface.light,
2788
- [helperVars$3.contrast]: globalRefs$n.colors.surface.main,
2786
+ [helperVars$3.main]: globalRefs$o.colors.surface.light,
2787
+ [helperVars$3.dark]: globalRefs$o.colors.surface.dark,
2788
+ [helperVars$3.light]: globalRefs$o.colors.surface.light,
2789
+ [helperVars$3.contrast]: globalRefs$o.colors.surface.main,
2789
2790
  },
2790
2791
 
2791
2792
  variant: {
@@ -2833,7 +2834,7 @@ const button = {
2833
2834
  },
2834
2835
  };
2835
2836
 
2836
- const vars$D = {
2837
+ const vars$E = {
2837
2838
  ...compVars$5,
2838
2839
  ...helperVars$3,
2839
2840
  };
@@ -2841,7 +2842,7 @@ const vars$D = {
2841
2842
  var button$1 = /*#__PURE__*/Object.freeze({
2842
2843
  __proto__: null,
2843
2844
  default: button,
2844
- vars: vars$D
2845
+ vars: vars$E
2845
2846
  });
2846
2847
 
2847
2848
  const {
@@ -3049,7 +3050,7 @@ const resetInputLabelPosition = (name) => `
3049
3050
  }
3050
3051
  `;
3051
3052
 
3052
- const componentName$M = getComponentName('text-field');
3053
+ const componentName$N = getComponentName('text-field');
3053
3054
 
3054
3055
  const observedAttrs = ['type'];
3055
3056
 
@@ -3099,29 +3100,29 @@ const TextFieldClass = compose(
3099
3100
  ${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
3100
3101
  `,
3101
3102
  excludeAttrsSync: ['tabindex'],
3102
- componentName: componentName$M,
3103
+ componentName: componentName$N,
3103
3104
  })
3104
3105
  );
3105
3106
 
3106
- const componentName$L = getComponentName('input-wrapper');
3107
- const globalRefs$m = getThemeRefs(globals);
3107
+ const componentName$M = getComponentName('input-wrapper');
3108
+ const globalRefs$n = getThemeRefs(globals);
3108
3109
 
3109
- const [theme$1, refs, vars$C] = createHelperVars(
3110
+ const [theme$1, refs, vars$D] = createHelperVars(
3110
3111
  {
3111
- labelTextColor: globalRefs$m.colors.surface.dark,
3112
+ labelTextColor: globalRefs$n.colors.surface.dark,
3112
3113
  labelFontSize: '14px', // not taken from globals as it is fixed in all inputs
3113
- valueTextColor: globalRefs$m.colors.surface.contrast,
3114
- placeholderTextColor: globalRefs$m.colors.surface.dark,
3114
+ valueTextColor: globalRefs$n.colors.surface.contrast,
3115
+ placeholderTextColor: globalRefs$n.colors.surface.dark,
3115
3116
  requiredIndicator: "'*'",
3116
- helperTextColor: globalRefs$m.colors.surface.dark,
3117
- errorMessageTextColor: globalRefs$m.colors.error.main,
3118
- successMessageTextColor: globalRefs$m.colors.success.main,
3117
+ helperTextColor: globalRefs$n.colors.surface.dark,
3118
+ errorMessageTextColor: globalRefs$n.colors.error.main,
3119
+ successMessageTextColor: globalRefs$n.colors.success.main,
3119
3120
 
3120
- borderWidth: globalRefs$m.border.xs,
3121
- borderRadius: globalRefs$m.radius.xs,
3121
+ borderWidth: globalRefs$n.border.xs,
3122
+ borderRadius: globalRefs$n.radius.xs,
3122
3123
  borderColor: 'transparent',
3123
3124
 
3124
- outlineWidth: globalRefs$m.border.sm,
3125
+ outlineWidth: globalRefs$n.border.sm,
3125
3126
  outlineStyle: 'solid',
3126
3127
  outlineColor: 'transparent',
3127
3128
  outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
@@ -3132,11 +3133,11 @@ const [theme$1, refs, vars$C] = createHelperVars(
3132
3133
  horizontalPadding: '0.5em',
3133
3134
  verticalPadding: '0.5em',
3134
3135
 
3135
- backgroundColor: globalRefs$m.colors.surface.main,
3136
+ backgroundColor: globalRefs$n.colors.surface.main,
3136
3137
 
3137
- fontFamily: globalRefs$m.fonts.font1.family,
3138
+ fontFamily: globalRefs$n.fonts.font1.family,
3138
3139
 
3139
- direction: globalRefs$m.direction,
3140
+ direction: globalRefs$n.direction,
3140
3141
 
3141
3142
  overlayOpacity: '0.3',
3142
3143
 
@@ -3152,69 +3153,69 @@ const [theme$1, refs, vars$C] = createHelperVars(
3152
3153
  },
3153
3154
 
3154
3155
  _focused: {
3155
- outlineColor: globalRefs$m.colors.surface.light,
3156
+ outlineColor: globalRefs$n.colors.surface.light,
3156
3157
  _invalid: {
3157
- outlineColor: globalRefs$m.colors.error.main,
3158
+ outlineColor: globalRefs$n.colors.error.main,
3158
3159
  },
3159
3160
  },
3160
3161
 
3161
3162
  _bordered: {
3162
- outlineWidth: globalRefs$m.border.xs,
3163
- borderColor: globalRefs$m.colors.surface.light,
3163
+ outlineWidth: globalRefs$n.border.xs,
3164
+ borderColor: globalRefs$n.colors.surface.light,
3164
3165
  borderStyle: 'solid',
3165
3166
  _invalid: {
3166
- borderColor: globalRefs$m.colors.error.main,
3167
+ borderColor: globalRefs$n.colors.error.main,
3167
3168
  },
3168
3169
  },
3169
3170
 
3170
3171
  _disabled: {
3171
- labelTextColor: globalRefs$m.colors.surface.light,
3172
- borderColor: globalRefs$m.colors.surface.light,
3173
- valueTextColor: globalRefs$m.colors.surface.light,
3174
- placeholderTextColor: globalRefs$m.colors.surface.light,
3175
- helperTextColor: globalRefs$m.colors.surface.light,
3176
- backgroundColor: globalRefs$m.colors.surface.main,
3172
+ labelTextColor: globalRefs$n.colors.surface.light,
3173
+ borderColor: globalRefs$n.colors.surface.light,
3174
+ valueTextColor: globalRefs$n.colors.surface.light,
3175
+ placeholderTextColor: globalRefs$n.colors.surface.light,
3176
+ helperTextColor: globalRefs$n.colors.surface.light,
3177
+ backgroundColor: globalRefs$n.colors.surface.main,
3177
3178
  },
3178
3179
  },
3179
- componentName$L
3180
+ componentName$M
3180
3181
  );
3181
3182
 
3182
3183
  var inputWrapper = /*#__PURE__*/Object.freeze({
3183
3184
  __proto__: null,
3184
3185
  default: theme$1,
3185
3186
  refs: refs,
3186
- vars: vars$C
3187
+ vars: vars$D
3187
3188
  });
3188
3189
 
3189
- const vars$B = TextFieldClass.cssVarList;
3190
+ const vars$C = TextFieldClass.cssVarList;
3190
3191
 
3191
3192
  const textField$1 = {
3192
- [vars$B.hostWidth]: refs.width,
3193
- [vars$B.hostMinWidth]: refs.minWidth,
3194
- [vars$B.hostDirection]: refs.direction,
3195
- [vars$B.fontSize]: refs.fontSize,
3196
- [vars$B.fontFamily]: refs.fontFamily,
3197
- [vars$B.labelTextColor]: refs.labelTextColor,
3198
- [vars$B.labelRequiredIndicator]: refs.requiredIndicator,
3199
- [vars$B.errorMessageTextColor]: refs.errorMessageTextColor,
3200
- [vars$B.inputValueTextColor]: refs.valueTextColor,
3201
- [vars$B.inputPlaceholderColor]: refs.placeholderTextColor,
3202
- [vars$B.inputBorderWidth]: refs.borderWidth,
3203
- [vars$B.inputBorderStyle]: refs.borderStyle,
3204
- [vars$B.inputBorderColor]: refs.borderColor,
3205
- [vars$B.inputBorderRadius]: refs.borderRadius,
3206
- [vars$B.inputOutlineWidth]: refs.outlineWidth,
3207
- [vars$B.inputOutlineStyle]: refs.outlineStyle,
3208
- [vars$B.inputOutlineColor]: refs.outlineColor,
3209
- [vars$B.inputOutlineOffset]: refs.outlineOffset,
3210
- [vars$B.inputBackgroundColor]: refs.backgroundColor,
3211
- [vars$B.inputHeight]: refs.inputHeight,
3212
- [vars$B.inputHorizontalPadding]: refs.horizontalPadding,
3213
- [vars$B.helperTextColor]: refs.helperTextColor,
3193
+ [vars$C.hostWidth]: refs.width,
3194
+ [vars$C.hostMinWidth]: refs.minWidth,
3195
+ [vars$C.hostDirection]: refs.direction,
3196
+ [vars$C.fontSize]: refs.fontSize,
3197
+ [vars$C.fontFamily]: refs.fontFamily,
3198
+ [vars$C.labelTextColor]: refs.labelTextColor,
3199
+ [vars$C.labelRequiredIndicator]: refs.requiredIndicator,
3200
+ [vars$C.errorMessageTextColor]: refs.errorMessageTextColor,
3201
+ [vars$C.inputValueTextColor]: refs.valueTextColor,
3202
+ [vars$C.inputPlaceholderColor]: refs.placeholderTextColor,
3203
+ [vars$C.inputBorderWidth]: refs.borderWidth,
3204
+ [vars$C.inputBorderStyle]: refs.borderStyle,
3205
+ [vars$C.inputBorderColor]: refs.borderColor,
3206
+ [vars$C.inputBorderRadius]: refs.borderRadius,
3207
+ [vars$C.inputOutlineWidth]: refs.outlineWidth,
3208
+ [vars$C.inputOutlineStyle]: refs.outlineStyle,
3209
+ [vars$C.inputOutlineColor]: refs.outlineColor,
3210
+ [vars$C.inputOutlineOffset]: refs.outlineOffset,
3211
+ [vars$C.inputBackgroundColor]: refs.backgroundColor,
3212
+ [vars$C.inputHeight]: refs.inputHeight,
3213
+ [vars$C.inputHorizontalPadding]: refs.horizontalPadding,
3214
+ [vars$C.helperTextColor]: refs.helperTextColor,
3214
3215
  textAlign: {
3215
- right: { [vars$B.inputTextAlign]: 'right' },
3216
- left: { [vars$B.inputTextAlign]: 'left' },
3217
- center: { [vars$B.inputTextAlign]: 'center' },
3216
+ right: { [vars$C.inputTextAlign]: 'right' },
3217
+ left: { [vars$C.inputTextAlign]: 'left' },
3218
+ center: { [vars$C.inputTextAlign]: 'center' },
3218
3219
  },
3219
3220
  };
3220
3221
 
@@ -3222,7 +3223,7 @@ var textField$2 = /*#__PURE__*/Object.freeze({
3222
3223
  __proto__: null,
3223
3224
  default: textField$1,
3224
3225
  textField: textField$1,
3225
- vars: vars$B
3226
+ vars: vars$C
3226
3227
  });
3227
3228
 
3228
3229
  const passwordDraggableMixin = (superclass) =>
@@ -3259,7 +3260,7 @@ const passwordDraggableMixin = (superclass) =>
3259
3260
  }
3260
3261
  };
3261
3262
 
3262
- const componentName$K = getComponentName('password');
3263
+ const componentName$L = getComponentName('password');
3263
3264
 
3264
3265
  const {
3265
3266
  host: host$l,
@@ -3388,46 +3389,46 @@ const PasswordClass = compose(
3388
3389
  }
3389
3390
  `,
3390
3391
  excludeAttrsSync: ['tabindex'],
3391
- componentName: componentName$K,
3392
+ componentName: componentName$L,
3392
3393
  })
3393
3394
  );
3394
3395
 
3395
- const globalRefs$l = getThemeRefs(globals);
3396
- const vars$A = PasswordClass.cssVarList;
3396
+ const globalRefs$m = getThemeRefs(globals);
3397
+ const vars$B = PasswordClass.cssVarList;
3397
3398
 
3398
3399
  const password = {
3399
- [vars$A.hostWidth]: refs.width,
3400
- [vars$A.hostDirection]: refs.direction,
3401
- [vars$A.fontSize]: refs.fontSize,
3402
- [vars$A.fontFamily]: refs.fontFamily,
3403
- [vars$A.labelTextColor]: refs.labelTextColor,
3404
- [vars$A.errorMessageTextColor]: refs.errorMessageTextColor,
3405
- [vars$A.inputHorizontalPadding]: refs.horizontalPadding,
3406
- [vars$A.inputHeight]: refs.inputHeight,
3407
- [vars$A.inputBackgroundColor]: refs.backgroundColor,
3408
- [vars$A.labelRequiredIndicator]: refs.requiredIndicator,
3409
- [vars$A.inputValueTextColor]: refs.valueTextColor,
3410
- [vars$A.inputPlaceholderTextColor]: refs.placeholderTextColor,
3411
- [vars$A.inputBorderWidth]: refs.borderWidth,
3412
- [vars$A.inputBorderStyle]: refs.borderStyle,
3413
- [vars$A.inputBorderColor]: refs.borderColor,
3414
- [vars$A.inputBorderRadius]: refs.borderRadius,
3415
- [vars$A.inputOutlineWidth]: refs.outlineWidth,
3416
- [vars$A.inputOutlineStyle]: refs.outlineStyle,
3417
- [vars$A.inputOutlineColor]: refs.outlineColor,
3418
- [vars$A.inputOutlineOffset]: refs.outlineOffset,
3419
- [vars$A.revealButtonOffset]: globalRefs$l.spacing.md,
3420
- [vars$A.revealButtonSize]: refs.toggleButtonSize,
3421
- [vars$A.revealButtonColor]: refs.placeholderTextColor,
3400
+ [vars$B.hostWidth]: refs.width,
3401
+ [vars$B.hostDirection]: refs.direction,
3402
+ [vars$B.fontSize]: refs.fontSize,
3403
+ [vars$B.fontFamily]: refs.fontFamily,
3404
+ [vars$B.labelTextColor]: refs.labelTextColor,
3405
+ [vars$B.errorMessageTextColor]: refs.errorMessageTextColor,
3406
+ [vars$B.inputHorizontalPadding]: refs.horizontalPadding,
3407
+ [vars$B.inputHeight]: refs.inputHeight,
3408
+ [vars$B.inputBackgroundColor]: refs.backgroundColor,
3409
+ [vars$B.labelRequiredIndicator]: refs.requiredIndicator,
3410
+ [vars$B.inputValueTextColor]: refs.valueTextColor,
3411
+ [vars$B.inputPlaceholderTextColor]: refs.placeholderTextColor,
3412
+ [vars$B.inputBorderWidth]: refs.borderWidth,
3413
+ [vars$B.inputBorderStyle]: refs.borderStyle,
3414
+ [vars$B.inputBorderColor]: refs.borderColor,
3415
+ [vars$B.inputBorderRadius]: refs.borderRadius,
3416
+ [vars$B.inputOutlineWidth]: refs.outlineWidth,
3417
+ [vars$B.inputOutlineStyle]: refs.outlineStyle,
3418
+ [vars$B.inputOutlineColor]: refs.outlineColor,
3419
+ [vars$B.inputOutlineOffset]: refs.outlineOffset,
3420
+ [vars$B.revealButtonOffset]: globalRefs$m.spacing.md,
3421
+ [vars$B.revealButtonSize]: refs.toggleButtonSize,
3422
+ [vars$B.revealButtonColor]: refs.placeholderTextColor,
3422
3423
  };
3423
3424
 
3424
3425
  var password$1 = /*#__PURE__*/Object.freeze({
3425
3426
  __proto__: null,
3426
3427
  default: password,
3427
- vars: vars$A
3428
+ vars: vars$B
3428
3429
  });
3429
3430
 
3430
- const componentName$J = getComponentName('number-field');
3431
+ const componentName$K = getComponentName('number-field');
3431
3432
 
3432
3433
  const NumberFieldClass = compose(
3433
3434
  createStyleMixin({
@@ -3453,43 +3454,43 @@ const NumberFieldClass = compose(
3453
3454
  ${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
3454
3455
  `,
3455
3456
  excludeAttrsSync: ['tabindex'],
3456
- componentName: componentName$J,
3457
+ componentName: componentName$K,
3457
3458
  })
3458
3459
  );
3459
3460
 
3460
- const vars$z = NumberFieldClass.cssVarList;
3461
+ const vars$A = NumberFieldClass.cssVarList;
3461
3462
 
3462
3463
  const numberField = {
3463
- [vars$z.hostWidth]: refs.width,
3464
- [vars$z.hostMinWidth]: refs.minWidth,
3465
- [vars$z.hostDirection]: refs.direction,
3466
- [vars$z.fontSize]: refs.fontSize,
3467
- [vars$z.fontFamily]: refs.fontFamily,
3468
- [vars$z.labelTextColor]: refs.labelTextColor,
3469
- [vars$z.errorMessageTextColor]: refs.errorMessageTextColor,
3470
- [vars$z.inputValueTextColor]: refs.valueTextColor,
3471
- [vars$z.inputPlaceholderColor]: refs.placeholderTextColor,
3472
- [vars$z.inputBorderWidth]: refs.borderWidth,
3473
- [vars$z.inputBorderStyle]: refs.borderStyle,
3474
- [vars$z.inputBorderColor]: refs.borderColor,
3475
- [vars$z.inputBorderRadius]: refs.borderRadius,
3476
- [vars$z.inputOutlineWidth]: refs.outlineWidth,
3477
- [vars$z.inputOutlineStyle]: refs.outlineStyle,
3478
- [vars$z.inputOutlineColor]: refs.outlineColor,
3479
- [vars$z.inputOutlineOffset]: refs.outlineOffset,
3480
- [vars$z.inputBackgroundColor]: refs.backgroundColor,
3481
- [vars$z.labelRequiredIndicator]: refs.requiredIndicator,
3482
- [vars$z.inputHorizontalPadding]: refs.horizontalPadding,
3483
- [vars$z.inputHeight]: refs.inputHeight,
3464
+ [vars$A.hostWidth]: refs.width,
3465
+ [vars$A.hostMinWidth]: refs.minWidth,
3466
+ [vars$A.hostDirection]: refs.direction,
3467
+ [vars$A.fontSize]: refs.fontSize,
3468
+ [vars$A.fontFamily]: refs.fontFamily,
3469
+ [vars$A.labelTextColor]: refs.labelTextColor,
3470
+ [vars$A.errorMessageTextColor]: refs.errorMessageTextColor,
3471
+ [vars$A.inputValueTextColor]: refs.valueTextColor,
3472
+ [vars$A.inputPlaceholderColor]: refs.placeholderTextColor,
3473
+ [vars$A.inputBorderWidth]: refs.borderWidth,
3474
+ [vars$A.inputBorderStyle]: refs.borderStyle,
3475
+ [vars$A.inputBorderColor]: refs.borderColor,
3476
+ [vars$A.inputBorderRadius]: refs.borderRadius,
3477
+ [vars$A.inputOutlineWidth]: refs.outlineWidth,
3478
+ [vars$A.inputOutlineStyle]: refs.outlineStyle,
3479
+ [vars$A.inputOutlineColor]: refs.outlineColor,
3480
+ [vars$A.inputOutlineOffset]: refs.outlineOffset,
3481
+ [vars$A.inputBackgroundColor]: refs.backgroundColor,
3482
+ [vars$A.labelRequiredIndicator]: refs.requiredIndicator,
3483
+ [vars$A.inputHorizontalPadding]: refs.horizontalPadding,
3484
+ [vars$A.inputHeight]: refs.inputHeight,
3484
3485
  };
3485
3486
 
3486
3487
  var numberField$1 = /*#__PURE__*/Object.freeze({
3487
3488
  __proto__: null,
3488
3489
  default: numberField,
3489
- vars: vars$z
3490
+ vars: vars$A
3490
3491
  });
3491
3492
 
3492
- const componentName$I = getComponentName('email-field');
3493
+ const componentName$J = getComponentName('email-field');
3493
3494
 
3494
3495
  const customMixin$7 = (superclass) =>
3495
3496
  class EmailFieldMixinClass extends superclass {
@@ -3524,43 +3525,43 @@ const EmailFieldClass = compose(
3524
3525
  ${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
3525
3526
  `,
3526
3527
  excludeAttrsSync: ['tabindex'],
3527
- componentName: componentName$I,
3528
+ componentName: componentName$J,
3528
3529
  })
3529
3530
  );
3530
3531
 
3531
- const vars$y = EmailFieldClass.cssVarList;
3532
+ const vars$z = EmailFieldClass.cssVarList;
3532
3533
 
3533
3534
  const emailField = {
3534
- [vars$y.hostWidth]: refs.width,
3535
- [vars$y.hostMinWidth]: refs.minWidth,
3536
- [vars$y.hostDirection]: refs.direction,
3537
- [vars$y.fontSize]: refs.fontSize,
3538
- [vars$y.fontFamily]: refs.fontFamily,
3539
- [vars$y.labelTextColor]: refs.labelTextColor,
3540
- [vars$y.errorMessageTextColor]: refs.errorMessageTextColor,
3541
- [vars$y.inputValueTextColor]: refs.valueTextColor,
3542
- [vars$y.labelRequiredIndicator]: refs.requiredIndicator,
3543
- [vars$y.inputPlaceholderColor]: refs.placeholderTextColor,
3544
- [vars$y.inputBorderWidth]: refs.borderWidth,
3545
- [vars$y.inputBorderStyle]: refs.borderStyle,
3546
- [vars$y.inputBorderColor]: refs.borderColor,
3547
- [vars$y.inputBorderRadius]: refs.borderRadius,
3548
- [vars$y.inputOutlineWidth]: refs.outlineWidth,
3549
- [vars$y.inputOutlineStyle]: refs.outlineStyle,
3550
- [vars$y.inputOutlineColor]: refs.outlineColor,
3551
- [vars$y.inputOutlineOffset]: refs.outlineOffset,
3552
- [vars$y.inputBackgroundColor]: refs.backgroundColor,
3553
- [vars$y.inputHorizontalPadding]: refs.horizontalPadding,
3554
- [vars$y.inputHeight]: refs.inputHeight,
3535
+ [vars$z.hostWidth]: refs.width,
3536
+ [vars$z.hostMinWidth]: refs.minWidth,
3537
+ [vars$z.hostDirection]: refs.direction,
3538
+ [vars$z.fontSize]: refs.fontSize,
3539
+ [vars$z.fontFamily]: refs.fontFamily,
3540
+ [vars$z.labelTextColor]: refs.labelTextColor,
3541
+ [vars$z.errorMessageTextColor]: refs.errorMessageTextColor,
3542
+ [vars$z.inputValueTextColor]: refs.valueTextColor,
3543
+ [vars$z.labelRequiredIndicator]: refs.requiredIndicator,
3544
+ [vars$z.inputPlaceholderColor]: refs.placeholderTextColor,
3545
+ [vars$z.inputBorderWidth]: refs.borderWidth,
3546
+ [vars$z.inputBorderStyle]: refs.borderStyle,
3547
+ [vars$z.inputBorderColor]: refs.borderColor,
3548
+ [vars$z.inputBorderRadius]: refs.borderRadius,
3549
+ [vars$z.inputOutlineWidth]: refs.outlineWidth,
3550
+ [vars$z.inputOutlineStyle]: refs.outlineStyle,
3551
+ [vars$z.inputOutlineColor]: refs.outlineColor,
3552
+ [vars$z.inputOutlineOffset]: refs.outlineOffset,
3553
+ [vars$z.inputBackgroundColor]: refs.backgroundColor,
3554
+ [vars$z.inputHorizontalPadding]: refs.horizontalPadding,
3555
+ [vars$z.inputHeight]: refs.inputHeight,
3555
3556
  };
3556
3557
 
3557
3558
  var emailField$1 = /*#__PURE__*/Object.freeze({
3558
3559
  __proto__: null,
3559
3560
  default: emailField,
3560
- vars: vars$y
3561
+ vars: vars$z
3561
3562
  });
3562
3563
 
3563
- const componentName$H = getComponentName('text-area');
3564
+ const componentName$I = getComponentName('text-area');
3564
3565
 
3565
3566
  const {
3566
3567
  host: host$k,
@@ -3636,49 +3637,49 @@ const TextAreaClass = compose(
3636
3637
  ${resetInputCursor('vaadin-text-area')}
3637
3638
  `,
3638
3639
  excludeAttrsSync: ['tabindex'],
3639
- componentName: componentName$H,
3640
+ componentName: componentName$I,
3640
3641
  })
3641
3642
  );
3642
3643
 
3643
- const vars$x = TextAreaClass.cssVarList;
3644
+ const vars$y = TextAreaClass.cssVarList;
3644
3645
 
3645
3646
  const textArea = {
3646
- [vars$x.hostWidth]: refs.width,
3647
- [vars$x.hostMinWidth]: refs.minWidth,
3648
- [vars$x.hostDirection]: refs.direction,
3649
- [vars$x.fontSize]: refs.fontSize,
3650
- [vars$x.fontFamily]: refs.fontFamily,
3651
- [vars$x.labelTextColor]: refs.labelTextColor,
3652
- [vars$x.labelRequiredIndicator]: refs.requiredIndicator,
3653
- [vars$x.errorMessageTextColor]: refs.errorMessageTextColor,
3654
- [vars$x.inputBackgroundColor]: refs.backgroundColor,
3655
- [vars$x.inputValueTextColor]: refs.valueTextColor,
3656
- [vars$x.inputPlaceholderTextColor]: refs.placeholderTextColor,
3657
- [vars$x.inputBorderRadius]: refs.borderRadius,
3658
- [vars$x.inputBorderWidth]: refs.borderWidth,
3659
- [vars$x.inputBorderStyle]: refs.borderStyle,
3660
- [vars$x.inputBorderColor]: refs.borderColor,
3661
- [vars$x.inputOutlineWidth]: refs.outlineWidth,
3662
- [vars$x.inputOutlineStyle]: refs.outlineStyle,
3663
- [vars$x.inputOutlineColor]: refs.outlineColor,
3664
- [vars$x.inputOutlineOffset]: refs.outlineOffset,
3665
- [vars$x.inputResizeType]: 'vertical',
3666
- [vars$x.inputMinHeight]: '5em',
3647
+ [vars$y.hostWidth]: refs.width,
3648
+ [vars$y.hostMinWidth]: refs.minWidth,
3649
+ [vars$y.hostDirection]: refs.direction,
3650
+ [vars$y.fontSize]: refs.fontSize,
3651
+ [vars$y.fontFamily]: refs.fontFamily,
3652
+ [vars$y.labelTextColor]: refs.labelTextColor,
3653
+ [vars$y.labelRequiredIndicator]: refs.requiredIndicator,
3654
+ [vars$y.errorMessageTextColor]: refs.errorMessageTextColor,
3655
+ [vars$y.inputBackgroundColor]: refs.backgroundColor,
3656
+ [vars$y.inputValueTextColor]: refs.valueTextColor,
3657
+ [vars$y.inputPlaceholderTextColor]: refs.placeholderTextColor,
3658
+ [vars$y.inputBorderRadius]: refs.borderRadius,
3659
+ [vars$y.inputBorderWidth]: refs.borderWidth,
3660
+ [vars$y.inputBorderStyle]: refs.borderStyle,
3661
+ [vars$y.inputBorderColor]: refs.borderColor,
3662
+ [vars$y.inputOutlineWidth]: refs.outlineWidth,
3663
+ [vars$y.inputOutlineStyle]: refs.outlineStyle,
3664
+ [vars$y.inputOutlineColor]: refs.outlineColor,
3665
+ [vars$y.inputOutlineOffset]: refs.outlineOffset,
3666
+ [vars$y.inputResizeType]: 'vertical',
3667
+ [vars$y.inputMinHeight]: '5em',
3667
3668
  textAlign: {
3668
- right: { [vars$x.inputTextAlign]: 'right' },
3669
- left: { [vars$x.inputTextAlign]: 'left' },
3670
- center: { [vars$x.inputTextAlign]: 'center' },
3669
+ right: { [vars$y.inputTextAlign]: 'right' },
3670
+ left: { [vars$y.inputTextAlign]: 'left' },
3671
+ center: { [vars$y.inputTextAlign]: 'center' },
3671
3672
  },
3672
3673
 
3673
3674
  _readonly: {
3674
- [vars$x.inputResizeType]: 'none',
3675
+ [vars$y.inputResizeType]: 'none',
3675
3676
  },
3676
3677
  };
3677
3678
 
3678
3679
  var textArea$1 = /*#__PURE__*/Object.freeze({
3679
3680
  __proto__: null,
3680
3681
  default: textArea,
3681
- vars: vars$x
3682
+ vars: vars$y
3682
3683
  });
3683
3684
 
3684
3685
  const createBaseInputClass = (...args) =>
@@ -3689,9 +3690,9 @@ const createBaseInputClass = (...args) =>
3689
3690
  inputEventsDispatchingMixin
3690
3691
  )(createBaseClass(...args));
3691
3692
 
3692
- const componentName$G = getComponentName('boolean-field-internal');
3693
+ const componentName$H = getComponentName('boolean-field-internal');
3693
3694
 
3694
- createBaseInputClass({ componentName: componentName$G, baseSelector: 'div' });
3695
+ createBaseInputClass({ componentName: componentName$H, baseSelector: 'div' });
3695
3696
 
3696
3697
  const booleanFieldMixin = (superclass) =>
3697
3698
  class BooleanFieldMixinClass extends superclass {
@@ -3700,14 +3701,14 @@ const booleanFieldMixin = (superclass) =>
3700
3701
 
3701
3702
  const template = document.createElement('template');
3702
3703
  template.innerHTML = `
3703
- <${componentName$G}
3704
+ <${componentName$H}
3704
3705
  tabindex="-1"
3705
3706
  slot="input"
3706
- ></${componentName$G}>
3707
+ ></${componentName$H}>
3707
3708
  `;
3708
3709
 
3709
3710
  this.baseElement.appendChild(template.content.cloneNode(true));
3710
- this.inputElement = this.shadowRoot.querySelector(componentName$G);
3711
+ this.inputElement = this.shadowRoot.querySelector(componentName$H);
3711
3712
  this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
3712
3713
 
3713
3714
  forwardAttrs(this, this.inputElement, {
@@ -3777,7 +3778,7 @@ descope-boolean-field-internal {
3777
3778
  }
3778
3779
  `;
3779
3780
 
3780
- const componentName$F = getComponentName('checkbox');
3781
+ const componentName$G = getComponentName('checkbox');
3781
3782
 
3782
3783
  const {
3783
3784
  host: host$j,
@@ -3883,51 +3884,51 @@ const CheckboxClass = compose(
3883
3884
  }
3884
3885
  `,
3885
3886
  excludeAttrsSync: ['label', 'tabindex'],
3886
- componentName: componentName$F,
3887
+ componentName: componentName$G,
3887
3888
  })
3888
3889
  );
3889
3890
 
3890
- const vars$w = CheckboxClass.cssVarList;
3891
+ const vars$x = CheckboxClass.cssVarList;
3891
3892
  const checkboxSize = '1.35em';
3892
3893
 
3893
3894
  const checkbox = {
3894
- [vars$w.hostWidth]: refs.width,
3895
- [vars$w.hostDirection]: refs.direction,
3896
- [vars$w.fontSize]: refs.fontSize,
3897
- [vars$w.fontFamily]: refs.fontFamily,
3898
- [vars$w.labelTextColor]: refs.labelTextColor,
3899
- [vars$w.labelRequiredIndicator]: refs.requiredIndicator,
3900
- [vars$w.labelFontWeight]: '400',
3901
- [vars$w.labelLineHeight]: checkboxSize,
3902
- [vars$w.labelSpacing]: '1em',
3903
- [vars$w.errorMessageTextColor]: refs.errorMessageTextColor,
3904
- [vars$w.inputOutlineWidth]: refs.outlineWidth,
3905
- [vars$w.inputOutlineOffset]: refs.outlineOffset,
3906
- [vars$w.inputOutlineColor]: refs.outlineColor,
3907
- [vars$w.inputOutlineStyle]: refs.outlineStyle,
3908
- [vars$w.inputBorderRadius]: refs.borderRadius,
3909
- [vars$w.inputBorderColor]: refs.borderColor,
3910
- [vars$w.inputBorderWidth]: refs.borderWidth,
3911
- [vars$w.inputBorderStyle]: refs.borderStyle,
3912
- [vars$w.inputBackgroundColor]: refs.backgroundColor,
3913
- [vars$w.inputSize]: checkboxSize,
3895
+ [vars$x.hostWidth]: refs.width,
3896
+ [vars$x.hostDirection]: refs.direction,
3897
+ [vars$x.fontSize]: refs.fontSize,
3898
+ [vars$x.fontFamily]: refs.fontFamily,
3899
+ [vars$x.labelTextColor]: refs.labelTextColor,
3900
+ [vars$x.labelRequiredIndicator]: refs.requiredIndicator,
3901
+ [vars$x.labelFontWeight]: '400',
3902
+ [vars$x.labelLineHeight]: checkboxSize,
3903
+ [vars$x.labelSpacing]: '1em',
3904
+ [vars$x.errorMessageTextColor]: refs.errorMessageTextColor,
3905
+ [vars$x.inputOutlineWidth]: refs.outlineWidth,
3906
+ [vars$x.inputOutlineOffset]: refs.outlineOffset,
3907
+ [vars$x.inputOutlineColor]: refs.outlineColor,
3908
+ [vars$x.inputOutlineStyle]: refs.outlineStyle,
3909
+ [vars$x.inputBorderRadius]: refs.borderRadius,
3910
+ [vars$x.inputBorderColor]: refs.borderColor,
3911
+ [vars$x.inputBorderWidth]: refs.borderWidth,
3912
+ [vars$x.inputBorderStyle]: refs.borderStyle,
3913
+ [vars$x.inputBackgroundColor]: refs.backgroundColor,
3914
+ [vars$x.inputSize]: checkboxSize,
3914
3915
 
3915
3916
  _checked: {
3916
- [vars$w.inputValueTextColor]: refs.valueTextColor,
3917
+ [vars$x.inputValueTextColor]: refs.valueTextColor,
3917
3918
  },
3918
3919
 
3919
3920
  _disabled: {
3920
- [vars$w.labelTextColor]: refs.labelTextColor,
3921
+ [vars$x.labelTextColor]: refs.labelTextColor,
3921
3922
  },
3922
3923
  };
3923
3924
 
3924
3925
  var checkbox$1 = /*#__PURE__*/Object.freeze({
3925
3926
  __proto__: null,
3926
3927
  default: checkbox,
3927
- vars: vars$w
3928
+ vars: vars$x
3928
3929
  });
3929
3930
 
3930
- const componentName$E = getComponentName('switch-toggle');
3931
+ const componentName$F = getComponentName('switch-toggle');
3931
3932
 
3932
3933
  const {
3933
3934
  host: host$i,
@@ -4059,82 +4060,82 @@ const SwitchToggleClass = compose(
4059
4060
  }
4060
4061
  `,
4061
4062
  excludeAttrsSync: ['label', 'tabindex'],
4062
- componentName: componentName$E,
4063
+ componentName: componentName$F,
4063
4064
  })
4064
4065
  );
4065
4066
 
4066
4067
  const knobMargin = '2px';
4067
4068
  const checkboxHeight = '1.25em';
4068
4069
 
4069
- const globalRefs$k = getThemeRefs(globals);
4070
- const vars$v = SwitchToggleClass.cssVarList;
4070
+ const globalRefs$l = getThemeRefs(globals);
4071
+ const vars$w = SwitchToggleClass.cssVarList;
4071
4072
 
4072
4073
  const switchToggle = {
4073
- [vars$v.hostWidth]: refs.width,
4074
- [vars$v.hostDirection]: refs.direction,
4075
- [vars$v.fontSize]: refs.fontSize,
4076
- [vars$v.fontFamily]: refs.fontFamily,
4077
-
4078
- [vars$v.inputOutlineWidth]: refs.outlineWidth,
4079
- [vars$v.inputOutlineOffset]: refs.outlineOffset,
4080
- [vars$v.inputOutlineColor]: refs.outlineColor,
4081
- [vars$v.inputOutlineStyle]: refs.outlineStyle,
4082
-
4083
- [vars$v.trackBorderStyle]: refs.borderStyle,
4084
- [vars$v.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
4085
- [vars$v.trackBorderColor]: refs.borderColor,
4086
- [vars$v.trackBackgroundColor]: refs.backgroundColor,
4087
- [vars$v.trackBorderRadius]: globalRefs$k.radius.md,
4088
- [vars$v.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
4089
- [vars$v.trackHeight]: checkboxHeight,
4090
-
4091
- [vars$v.knobSize]: `calc(1em - ${knobMargin})`,
4092
- [vars$v.knobRadius]: '50%',
4093
- [vars$v.knobTopOffset]: '1px',
4094
- [vars$v.knobLeftOffset]: knobMargin,
4095
- [vars$v.knobColor]: refs.labelTextColor,
4096
- [vars$v.knobTransitionDuration]: '0.3s',
4097
-
4098
- [vars$v.labelTextColor]: refs.labelTextColor,
4099
- [vars$v.labelFontWeight]: '400',
4100
- [vars$v.labelLineHeight]: '1.35em',
4101
- [vars$v.labelSpacing]: '1em',
4102
- [vars$v.labelRequiredIndicator]: refs.requiredIndicator,
4103
- [vars$v.errorMessageTextColor]: refs.errorMessageTextColor,
4074
+ [vars$w.hostWidth]: refs.width,
4075
+ [vars$w.hostDirection]: refs.direction,
4076
+ [vars$w.fontSize]: refs.fontSize,
4077
+ [vars$w.fontFamily]: refs.fontFamily,
4078
+
4079
+ [vars$w.inputOutlineWidth]: refs.outlineWidth,
4080
+ [vars$w.inputOutlineOffset]: refs.outlineOffset,
4081
+ [vars$w.inputOutlineColor]: refs.outlineColor,
4082
+ [vars$w.inputOutlineStyle]: refs.outlineStyle,
4083
+
4084
+ [vars$w.trackBorderStyle]: refs.borderStyle,
4085
+ [vars$w.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
4086
+ [vars$w.trackBorderColor]: refs.borderColor,
4087
+ [vars$w.trackBackgroundColor]: refs.backgroundColor,
4088
+ [vars$w.trackBorderRadius]: globalRefs$l.radius.md,
4089
+ [vars$w.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
4090
+ [vars$w.trackHeight]: checkboxHeight,
4091
+
4092
+ [vars$w.knobSize]: `calc(1em - ${knobMargin})`,
4093
+ [vars$w.knobRadius]: '50%',
4094
+ [vars$w.knobTopOffset]: '1px',
4095
+ [vars$w.knobLeftOffset]: knobMargin,
4096
+ [vars$w.knobColor]: refs.labelTextColor,
4097
+ [vars$w.knobTransitionDuration]: '0.3s',
4098
+
4099
+ [vars$w.labelTextColor]: refs.labelTextColor,
4100
+ [vars$w.labelFontWeight]: '400',
4101
+ [vars$w.labelLineHeight]: '1.35em',
4102
+ [vars$w.labelSpacing]: '1em',
4103
+ [vars$w.labelRequiredIndicator]: refs.requiredIndicator,
4104
+ [vars$w.errorMessageTextColor]: refs.errorMessageTextColor,
4104
4105
 
4105
4106
  _checked: {
4106
- [vars$v.trackBorderColor]: refs.borderColor,
4107
- [vars$v.knobLeftOffset]: `calc(100% - var(${vars$v.knobSize}) - ${knobMargin})`,
4108
- [vars$v.knobColor]: refs.valueTextColor,
4109
- [vars$v.knobTextColor]: refs.valueTextColor,
4107
+ [vars$w.trackBorderColor]: refs.borderColor,
4108
+ [vars$w.knobLeftOffset]: `calc(100% - var(${vars$w.knobSize}) - ${knobMargin})`,
4109
+ [vars$w.knobColor]: refs.valueTextColor,
4110
+ [vars$w.knobTextColor]: refs.valueTextColor,
4110
4111
  },
4111
4112
 
4112
4113
  _disabled: {
4113
- [vars$v.knobColor]: globalRefs$k.colors.surface.light,
4114
- [vars$v.trackBorderColor]: globalRefs$k.colors.surface.light,
4115
- [vars$v.trackBackgroundColor]: globalRefs$k.colors.surface.main,
4116
- [vars$v.labelTextColor]: refs.labelTextColor,
4114
+ [vars$w.knobColor]: globalRefs$l.colors.surface.light,
4115
+ [vars$w.trackBorderColor]: globalRefs$l.colors.surface.light,
4116
+ [vars$w.trackBackgroundColor]: globalRefs$l.colors.surface.main,
4117
+ [vars$w.labelTextColor]: refs.labelTextColor,
4117
4118
  _checked: {
4118
- [vars$v.knobColor]: globalRefs$k.colors.surface.light,
4119
- [vars$v.trackBackgroundColor]: globalRefs$k.colors.surface.main,
4119
+ [vars$w.knobColor]: globalRefs$l.colors.surface.light,
4120
+ [vars$w.trackBackgroundColor]: globalRefs$l.colors.surface.main,
4120
4121
  },
4121
4122
  },
4122
4123
 
4123
4124
  _invalid: {
4124
- [vars$v.trackBorderColor]: globalRefs$k.colors.error.main,
4125
- [vars$v.knobColor]: globalRefs$k.colors.error.main,
4125
+ [vars$w.trackBorderColor]: globalRefs$l.colors.error.main,
4126
+ [vars$w.knobColor]: globalRefs$l.colors.error.main,
4126
4127
  },
4127
4128
  };
4128
4129
 
4129
4130
  var switchToggle$1 = /*#__PURE__*/Object.freeze({
4130
4131
  __proto__: null,
4131
4132
  default: switchToggle,
4132
- vars: vars$v
4133
+ vars: vars$w
4133
4134
  });
4134
4135
 
4135
- const componentName$D = getComponentName('container');
4136
+ const componentName$E = getComponentName('container');
4136
4137
 
4137
- class RawContainer extends createBaseClass({ componentName: componentName$D, baseSelector: 'slot' }) {
4138
+ class RawContainer extends createBaseClass({ componentName: componentName$E, baseSelector: 'slot' }) {
4138
4139
  constructor() {
4139
4140
  super();
4140
4141
 
@@ -4187,7 +4188,7 @@ const ContainerClass = compose(
4187
4188
  componentNameValidationMixin
4188
4189
  )(RawContainer);
4189
4190
 
4190
- const globalRefs$j = getThemeRefs(globals);
4191
+ const globalRefs$k = getThemeRefs(globals);
4191
4192
 
4192
4193
  const compVars$4 = ContainerClass.cssVarList;
4193
4194
 
@@ -4209,7 +4210,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
4209
4210
  horizontalAlignment,
4210
4211
  shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
4211
4212
  },
4212
- componentName$D
4213
+ componentName$E
4213
4214
  );
4214
4215
 
4215
4216
  const { shadowColor: shadowColor$1 } = helperRefs$2;
@@ -4219,10 +4220,10 @@ const container = {
4219
4220
 
4220
4221
  [compVars$4.hostWidth]: '100%',
4221
4222
  [compVars$4.boxShadow]: 'none',
4222
- [compVars$4.backgroundColor]: globalRefs$j.colors.surface.main,
4223
- [compVars$4.color]: globalRefs$j.colors.surface.contrast,
4223
+ [compVars$4.backgroundColor]: globalRefs$k.colors.surface.main,
4224
+ [compVars$4.color]: globalRefs$k.colors.surface.contrast,
4224
4225
  [compVars$4.borderRadius]: '0px',
4225
- [compVars$4.hostDirection]: globalRefs$j.direction,
4226
+ [compVars$4.hostDirection]: globalRefs$k.direction,
4226
4227
 
4227
4228
  verticalPadding: {
4228
4229
  sm: { [compVars$4.verticalPadding]: '5px' },
@@ -4268,34 +4269,34 @@ const container = {
4268
4269
 
4269
4270
  shadow: {
4270
4271
  sm: {
4271
- [compVars$4.boxShadow]: `${globalRefs$j.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$j.shadow.narrow.sm} ${shadowColor$1}`,
4272
+ [compVars$4.boxShadow]: `${globalRefs$k.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$k.shadow.narrow.sm} ${shadowColor$1}`,
4272
4273
  },
4273
4274
  md: {
4274
- [compVars$4.boxShadow]: `${globalRefs$j.shadow.wide.md} ${shadowColor$1}, ${globalRefs$j.shadow.narrow.md} ${shadowColor$1}`,
4275
+ [compVars$4.boxShadow]: `${globalRefs$k.shadow.wide.md} ${shadowColor$1}, ${globalRefs$k.shadow.narrow.md} ${shadowColor$1}`,
4275
4276
  },
4276
4277
  lg: {
4277
- [compVars$4.boxShadow]: `${globalRefs$j.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$j.shadow.narrow.lg} ${shadowColor$1}`,
4278
+ [compVars$4.boxShadow]: `${globalRefs$k.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$k.shadow.narrow.lg} ${shadowColor$1}`,
4278
4279
  },
4279
4280
  xl: {
4280
- [compVars$4.boxShadow]: `${globalRefs$j.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$j.shadow.narrow.xl} ${shadowColor$1}`,
4281
+ [compVars$4.boxShadow]: `${globalRefs$k.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$k.shadow.narrow.xl} ${shadowColor$1}`,
4281
4282
  },
4282
4283
  '2xl': {
4283
4284
  [helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
4284
- [compVars$4.boxShadow]: `${globalRefs$j.shadow.wide['2xl']} ${shadowColor$1}`,
4285
+ [compVars$4.boxShadow]: `${globalRefs$k.shadow.wide['2xl']} ${shadowColor$1}`,
4285
4286
  },
4286
4287
  },
4287
4288
 
4288
4289
  borderRadius: {
4289
- sm: { [compVars$4.borderRadius]: globalRefs$j.radius.sm },
4290
- md: { [compVars$4.borderRadius]: globalRefs$j.radius.md },
4291
- lg: { [compVars$4.borderRadius]: globalRefs$j.radius.lg },
4292
- xl: { [compVars$4.borderRadius]: globalRefs$j.radius.xl },
4293
- '2xl': { [compVars$4.borderRadius]: globalRefs$j.radius['2xl'] },
4294
- '3xl': { [compVars$4.borderRadius]: globalRefs$j.radius['3xl'] },
4290
+ sm: { [compVars$4.borderRadius]: globalRefs$k.radius.sm },
4291
+ md: { [compVars$4.borderRadius]: globalRefs$k.radius.md },
4292
+ lg: { [compVars$4.borderRadius]: globalRefs$k.radius.lg },
4293
+ xl: { [compVars$4.borderRadius]: globalRefs$k.radius.xl },
4294
+ '2xl': { [compVars$4.borderRadius]: globalRefs$k.radius['2xl'] },
4295
+ '3xl': { [compVars$4.borderRadius]: globalRefs$k.radius['3xl'] },
4295
4296
  },
4296
4297
  };
4297
4298
 
4298
- const vars$u = {
4299
+ const vars$v = {
4299
4300
  ...compVars$4,
4300
4301
  ...helperVars$2,
4301
4302
  };
@@ -4303,7 +4304,7 @@ const vars$u = {
4303
4304
  var container$1 = /*#__PURE__*/Object.freeze({
4304
4305
  __proto__: null,
4305
4306
  default: container,
4306
- vars: vars$u
4307
+ vars: vars$v
4307
4308
  });
4308
4309
 
4309
4310
  const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
@@ -4356,91 +4357,68 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
4356
4357
  return CssVarImageClass;
4357
4358
  };
4358
4359
 
4359
- const componentName$C = getComponentName('logo');
4360
+ const componentName$D = getComponentName('logo');
4360
4361
 
4361
4362
  const LogoClass = createCssVarImageClass({
4362
- componentName: componentName$C,
4363
+ componentName: componentName$D,
4363
4364
  varName: 'url',
4364
4365
  fallbackVarName: 'fallbackUrl',
4365
4366
  });
4366
4367
 
4367
- const vars$t = LogoClass.cssVarList;
4368
+ const vars$u = LogoClass.cssVarList;
4368
4369
 
4369
4370
  const logo$2 = {
4370
- [vars$t.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
4371
+ [vars$u.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
4371
4372
  };
4372
4373
 
4373
4374
  var logo$3 = /*#__PURE__*/Object.freeze({
4374
4375
  __proto__: null,
4375
4376
  default: logo$2,
4376
- vars: vars$t
4377
+ vars: vars$u
4377
4378
  });
4378
4379
 
4379
- const componentName$B = getComponentName('totp-image');
4380
+ const componentName$C = getComponentName('totp-image');
4380
4381
 
4381
4382
  const TotpImageClass = createCssVarImageClass({
4382
- componentName: componentName$B,
4383
+ componentName: componentName$C,
4383
4384
  varName: 'url',
4384
4385
  fallbackVarName: 'fallbackUrl',
4385
4386
  });
4386
4387
 
4387
- const vars$s = TotpImageClass.cssVarList;
4388
+ const vars$t = TotpImageClass.cssVarList;
4388
4389
 
4389
4390
  const logo$1 = {
4390
- [vars$s.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
4391
+ [vars$t.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
4391
4392
  };
4392
4393
 
4393
4394
  var totpImage = /*#__PURE__*/Object.freeze({
4394
4395
  __proto__: null,
4395
4396
  default: logo$1,
4396
- vars: vars$s
4397
+ vars: vars$t
4397
4398
  });
4398
4399
 
4399
- const componentName$A = getComponentName('notp-image');
4400
+ const componentName$B = getComponentName('notp-image');
4400
4401
 
4401
4402
  const NotpImageClass = createCssVarImageClass({
4402
- componentName: componentName$A,
4403
+ componentName: componentName$B,
4403
4404
  varName: 'url',
4404
4405
  fallbackVarName: 'fallbackUrl',
4405
4406
  });
4406
4407
 
4407
- const vars$r = NotpImageClass.cssVarList;
4408
+ const vars$s = NotpImageClass.cssVarList;
4408
4409
 
4409
4410
  const logo = {
4410
- [vars$r.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
4411
+ [vars$s.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
4411
4412
  };
4412
4413
 
4413
4414
  var notpImage = /*#__PURE__*/Object.freeze({
4414
4415
  __proto__: null,
4415
4416
  default: logo,
4416
- vars: vars$r
4417
+ vars: vars$s
4417
4418
  });
4418
4419
 
4419
- // eslint-disable-next-line max-classes-per-file
4420
-
4421
- const componentName$z = getComponentName('text');
4422
-
4423
- class RawText extends createBaseClass({ componentName: componentName$z, baseSelector: ':host > slot' }) {
4424
- constructor() {
4425
- super();
4426
-
4427
- this.attachShadow({ mode: 'open' }).innerHTML = `
4428
- <style>
4429
- :host {
4430
- display: inline-block;
4431
- }
4432
- :host > slot {
4433
- width: 100%;
4434
- display: inline-block;
4435
- }
4436
- </style>
4437
- <slot part="text-wrapper"></slot>
4438
- `;
4439
- }
4440
- }
4441
-
4442
- const customTextMixin = (superclass) =>
4443
- class CustomTextMixin extends superclass {
4420
+ const hideWhenEmptyMixin = (superclass) =>
4421
+ class HideWhenEmptyMixinClass extends superclass {
4444
4422
  get hideWhenEmpty() {
4445
4423
  return this.getAttribute('hide-when-empty') === 'true';
4446
4424
  }
@@ -4455,6 +4433,35 @@ const customTextMixin = (superclass) =>
4455
4433
  }
4456
4434
  };
4457
4435
 
4436
+ const createBaseTextClass = (componentName) => {
4437
+ class BaseText extends createBaseClass({ componentName, baseSelector: ':host > slot' }) {
4438
+ constructor() {
4439
+ super();
4440
+
4441
+ this.attachShadow({ mode: 'open' }).innerHTML = `
4442
+ <style>
4443
+ :host {
4444
+ display: inline-block;
4445
+ }
4446
+ :host > slot {
4447
+ width: 100%;
4448
+ display: inline-block;
4449
+ }
4450
+ </style>
4451
+ <slot part="text-wrapper"></slot>
4452
+ `;
4453
+
4454
+ this.textSlot = this.shadowRoot.querySelector('slot');
4455
+ }
4456
+ }
4457
+
4458
+ return BaseText;
4459
+ };
4460
+
4461
+ const componentName$A = getComponentName('text');
4462
+
4463
+ const BaseTextClass = createBaseTextClass(componentName$A);
4464
+
4458
4465
  const TextClass = compose(
4459
4466
  createStyleMixin({
4460
4467
  mappings: {
@@ -4477,17 +4484,261 @@ const TextClass = compose(
4477
4484
  }),
4478
4485
  draggableMixin,
4479
4486
  componentNameValidationMixin,
4480
- customTextMixin
4481
- )(RawText);
4487
+ hideWhenEmptyMixin
4488
+ )(BaseTextClass);
4482
4489
 
4483
- const globalRefs$i = getThemeRefs(globals);
4484
- const vars$q = TextClass.cssVarList;
4490
+ const globalRefs$j = getThemeRefs(globals);
4491
+ const vars$r = TextClass.cssVarList;
4485
4492
 
4486
4493
  const text$2 = {
4494
+ [vars$r.hostDirection]: globalRefs$j.direction,
4495
+ [vars$r.textLineHeight]: '1.35em',
4496
+ [vars$r.textAlign]: 'left',
4497
+ [vars$r.textColor]: globalRefs$j.colors.surface.dark,
4498
+ variant: {
4499
+ h1: {
4500
+ [vars$r.fontSize]: globalRefs$j.typography.h1.size,
4501
+ [vars$r.fontWeight]: globalRefs$j.typography.h1.weight,
4502
+ [vars$r.fontFamily]: globalRefs$j.typography.h1.font,
4503
+ },
4504
+ h2: {
4505
+ [vars$r.fontSize]: globalRefs$j.typography.h2.size,
4506
+ [vars$r.fontWeight]: globalRefs$j.typography.h2.weight,
4507
+ [vars$r.fontFamily]: globalRefs$j.typography.h2.font,
4508
+ },
4509
+ h3: {
4510
+ [vars$r.fontSize]: globalRefs$j.typography.h3.size,
4511
+ [vars$r.fontWeight]: globalRefs$j.typography.h3.weight,
4512
+ [vars$r.fontFamily]: globalRefs$j.typography.h3.font,
4513
+ },
4514
+ subtitle1: {
4515
+ [vars$r.fontSize]: globalRefs$j.typography.subtitle1.size,
4516
+ [vars$r.fontWeight]: globalRefs$j.typography.subtitle1.weight,
4517
+ [vars$r.fontFamily]: globalRefs$j.typography.subtitle1.font,
4518
+ },
4519
+ subtitle2: {
4520
+ [vars$r.fontSize]: globalRefs$j.typography.subtitle2.size,
4521
+ [vars$r.fontWeight]: globalRefs$j.typography.subtitle2.weight,
4522
+ [vars$r.fontFamily]: globalRefs$j.typography.subtitle2.font,
4523
+ },
4524
+ body1: {
4525
+ [vars$r.fontSize]: globalRefs$j.typography.body1.size,
4526
+ [vars$r.fontWeight]: globalRefs$j.typography.body1.weight,
4527
+ [vars$r.fontFamily]: globalRefs$j.typography.body1.font,
4528
+ },
4529
+ body2: {
4530
+ [vars$r.fontSize]: globalRefs$j.typography.body2.size,
4531
+ [vars$r.fontWeight]: globalRefs$j.typography.body2.weight,
4532
+ [vars$r.fontFamily]: globalRefs$j.typography.body2.font,
4533
+ },
4534
+ },
4535
+
4536
+ mode: {
4537
+ primary: {
4538
+ [vars$r.textColor]: globalRefs$j.colors.surface.contrast,
4539
+ },
4540
+ secondary: {
4541
+ [vars$r.textColor]: globalRefs$j.colors.surface.dark,
4542
+ },
4543
+ error: {
4544
+ [vars$r.textColor]: globalRefs$j.colors.error.main,
4545
+ },
4546
+ success: {
4547
+ [vars$r.textColor]: globalRefs$j.colors.success.main,
4548
+ },
4549
+ },
4550
+
4551
+ textAlign: {
4552
+ right: { [vars$r.textAlign]: 'right' },
4553
+ left: { [vars$r.textAlign]: 'left' },
4554
+ center: { [vars$r.textAlign]: 'center' },
4555
+ },
4556
+
4557
+ _fullWidth: {
4558
+ [vars$r.hostWidth]: '100%',
4559
+ },
4560
+
4561
+ _italic: {
4562
+ [vars$r.fontStyle]: 'italic',
4563
+ },
4564
+
4565
+ _uppercase: {
4566
+ [vars$r.textTransform]: 'uppercase',
4567
+ },
4568
+
4569
+ _lowercase: {
4570
+ [vars$r.textTransform]: 'lowercase',
4571
+ },
4572
+ };
4573
+
4574
+ var text$3 = /*#__PURE__*/Object.freeze({
4575
+ __proto__: null,
4576
+ default: text$2,
4577
+ vars: vars$r
4578
+ });
4579
+
4580
+ const customEleMap = {
4581
+ a: 'descope-link',
4582
+ };
4583
+
4584
+ const getTokenTag = (token) => customEleMap[token.tag] || token.tag;
4585
+
4586
+ const isImageToken = (token) => token?.children?.[0].type === 'image';
4587
+
4588
+ const enrichTokens = (tokens) =>
4589
+ tokens.map((token) => {
4590
+ const tag = getTokenTag(token);
4591
+
4592
+ if (isImageToken(token)) {
4593
+ token.children[0].attrs.push(['style', 'width:100%']);
4594
+ return {
4595
+ ...token,
4596
+ tag,
4597
+ };
4598
+ }
4599
+
4600
+ if (token?.children?.length > 0) {
4601
+ return {
4602
+ ...token,
4603
+ tag,
4604
+ children: enrichTokens(token.children),
4605
+ };
4606
+ }
4607
+
4608
+ return {
4609
+ ...token,
4610
+ tag,
4611
+ };
4612
+ });
4613
+
4614
+ const onClipboardCopy = (e) => {
4615
+ const selection = document.getSelection().toString();
4616
+ const clipdata = e.clipboardData || window.clipboardData;
4617
+ clipdata.setData('text/plain', selection);
4618
+ clipdata.setData('text/html', selection);
4619
+ e.preventDefault();
4620
+ };
4621
+
4622
+ const componentName$z = getComponentName('markdown-content');
4623
+
4624
+ const BaseMarkdownContentClass = createBaseTextClass(componentName$z);
4625
+
4626
+ const markdownContentMixin = (superclass) =>
4627
+ class MarkdownContentMixinClass extends superclass {
4628
+ static get observedAttributes() {
4629
+ return ['disabled-rules', 'line-break'];
4630
+ }
4631
+
4632
+ get lineBreak() {
4633
+ return this.getAttribute('line-break');
4634
+ }
4635
+
4636
+ get disabledRules() {
4637
+ return (this.getAttribute('disabled-rules') || '').split(',').filter(Boolean);
4638
+ }
4639
+
4640
+ init() {
4641
+ super.init();
4642
+ this.#initMarkdown();
4643
+ this.textSlot.addEventListener('slotchange', this.#parseChildren.bind(this));
4644
+ }
4645
+
4646
+ attributeChangedCallback(attrName, oldValue, newValue) {
4647
+ super.attributeChangedCallback?.(attrName, oldValue, newValue);
4648
+
4649
+ if (attrName === 'disabled-rules') {
4650
+ if (newValue !== oldValue) {
4651
+ this.#initMarkdown(newValue);
4652
+ this.#parseChildren();
4653
+ }
4654
+ }
4655
+ }
4656
+
4657
+ #initMarkdown() {
4658
+ this.markdown = markdownit({ breaks: this.lineBreak }).disable(this.disabledRules);
4659
+ }
4660
+
4661
+ #parseChildren() {
4662
+ const node = this.textSlot.assignedNodes({ flatten: true })?.[0];
4663
+
4664
+ if (node && node.nodeType === Node.TEXT_NODE) {
4665
+ const tokens = this.markdown.parse(node.textContent, { references: undefined });
4666
+ const result = this.markdown.renderer.render(enrichTokens(tokens), {
4667
+ breaks: this.lineBreak,
4668
+ });
4669
+
4670
+ if (result !== node.textContent) {
4671
+ const span = document.createElement('div');
4672
+ span.classList.add('markdown-wrapper');
4673
+ // eslint-disable-next-line no-use-before-define
4674
+ span.innerHTML = `${getStyleReset()}${result}`;
4675
+ span.addEventListener('copy', onClipboardCopy);
4676
+ node.parentNode.replaceChild(span, node);
4677
+ }
4678
+ }
4679
+ }
4680
+ };
4681
+
4682
+ const MarkdownContentClass = compose(
4683
+ createStyleMixin({
4684
+ mappings: {
4685
+ hostWidth: { selector: () => ':host', property: 'width' },
4686
+ hostDirection: { selector: () => ':host', property: 'direction' },
4687
+ fontSize: {},
4688
+ fontFamily: {},
4689
+ fontWeight: {},
4690
+ textColor: { property: 'color' },
4691
+ textLineHeight: { property: 'line-height' },
4692
+ marginReset: { selector: '*', property: 'margin' },
4693
+ textAlign: {},
4694
+ },
4695
+ }),
4696
+ draggableMixin,
4697
+ componentNameValidationMixin,
4698
+ markdownContentMixin,
4699
+ hideWhenEmptyMixin
4700
+ )(BaseMarkdownContentClass);
4701
+
4702
+ function getStyleReset() {
4703
+ return `
4704
+ <style>
4705
+ .markdown-wrapper > * { margin:0 }
4706
+ .markdown-wrapper > *:not(:only-child):not(:last-child) {
4707
+ margin-bottom: var(${MarkdownContentClass.cssVarList.textLineHeight})
4708
+ }
4709
+ </style>
4710
+ `;
4711
+ }
4712
+
4713
+ const globalRefs$i = getThemeRefs(globals);
4714
+ const vars$q = MarkdownContentClass.cssVarList;
4715
+
4716
+ const markdownContent = {
4487
4717
  [vars$q.hostDirection]: globalRefs$i.direction,
4718
+
4719
+ [vars$q.fontSize]: globalRefs$i.typography.body1.size,
4720
+ [vars$q.fontWeight]: globalRefs$i.typography.body1.weight,
4721
+ [vars$q.fontFamily]: globalRefs$i.typography.body1.font,
4722
+
4488
4723
  [vars$q.textLineHeight]: '1.35em',
4489
4724
  [vars$q.textAlign]: 'left',
4490
4725
  [vars$q.textColor]: globalRefs$i.colors.surface.dark,
4726
+
4727
+ mode: {
4728
+ primary: {
4729
+ [vars$q.textColor]: globalRefs$i.colors.surface.contrast,
4730
+ },
4731
+ secondary: {
4732
+ [vars$q.textColor]: globalRefs$i.colors.surface.dark,
4733
+ },
4734
+ error: {
4735
+ [vars$q.textColor]: globalRefs$i.colors.error.main,
4736
+ },
4737
+ success: {
4738
+ [vars$q.textColor]: globalRefs$i.colors.success.main,
4739
+ },
4740
+ },
4741
+
4491
4742
  variant: {
4492
4743
  h1: {
4493
4744
  [vars$q.fontSize]: globalRefs$i.typography.h1.size,
@@ -4526,21 +4777,6 @@ const text$2 = {
4526
4777
  },
4527
4778
  },
4528
4779
 
4529
- mode: {
4530
- primary: {
4531
- [vars$q.textColor]: globalRefs$i.colors.surface.contrast,
4532
- },
4533
- secondary: {
4534
- [vars$q.textColor]: globalRefs$i.colors.surface.dark,
4535
- },
4536
- error: {
4537
- [vars$q.textColor]: globalRefs$i.colors.error.main,
4538
- },
4539
- success: {
4540
- [vars$q.textColor]: globalRefs$i.colors.success.main,
4541
- },
4542
- },
4543
-
4544
4780
  textAlign: {
4545
4781
  right: { [vars$q.textAlign]: 'right' },
4546
4782
  left: { [vars$q.textAlign]: 'left' },
@@ -4550,23 +4786,11 @@ const text$2 = {
4550
4786
  _fullWidth: {
4551
4787
  [vars$q.hostWidth]: '100%',
4552
4788
  },
4553
-
4554
- _italic: {
4555
- [vars$q.fontStyle]: 'italic',
4556
- },
4557
-
4558
- _uppercase: {
4559
- [vars$q.textTransform]: 'uppercase',
4560
- },
4561
-
4562
- _lowercase: {
4563
- [vars$q.textTransform]: 'lowercase',
4564
- },
4565
4789
  };
4566
4790
 
4567
- var text$3 = /*#__PURE__*/Object.freeze({
4791
+ var markdownContent$1 = /*#__PURE__*/Object.freeze({
4568
4792
  __proto__: null,
4569
- default: text$2,
4793
+ default: markdownContent,
4570
4794
  vars: vars$q
4571
4795
  });
4572
4796
 
@@ -10914,6 +11138,7 @@ class RawUserAuthMethod extends createBaseClass({
10914
11138
 
10915
11139
  .hidden-btn {
10916
11140
  width: 0;
11141
+ overflow: hidden;
10917
11142
  }
10918
11143
 
10919
11144
  slot[name="method-icon"]{
@@ -10936,7 +11161,7 @@ class RawUserAuthMethod extends createBaseClass({
10936
11161
  <div class="fulfilled-indicator">
10937
11162
  <vaadin-icon src=${greenVIcon}></vaadin-icon>
10938
11163
  </div>
10939
- <descope-button class="hidden-btn"size="sm" variant="link" mode="primary"></descope-button>
11164
+ <descope-button class="hidden-btn" size="sm" variant="link" mode="primary"></descope-button>
10940
11165
  </div>
10941
11166
  </div>
10942
11167
  `;
@@ -11223,6 +11448,7 @@ const components = {
11223
11448
  totpImage,
11224
11449
  notpImage,
11225
11450
  text: text$3,
11451
+ markdownContent: markdownContent$1,
11226
11452
  link: link$1,
11227
11453
  divider: divider$1,
11228
11454
  passcode: passcode$1,
@@ -11261,7 +11487,7 @@ const vars = Object.keys(components).reduce(
11261
11487
  );
11262
11488
 
11263
11489
  const defaultTheme = { globals, components: theme };
11264
- const themeVars = { globals: vars$E, components: vars };
11490
+ const themeVars = { globals: vars$F, components: vars };
11265
11491
 
11266
11492
  const colors = {
11267
11493
  surface: {
@@ -11580,6 +11806,7 @@ exports.LoaderLinearClass = LoaderLinearClass;
11580
11806
  exports.LoaderRadialClass = LoaderRadialClass;
11581
11807
  exports.LogoClass = LogoClass;
11582
11808
  exports.MappingsFieldClass = MappingsFieldClass;
11809
+ exports.MarkdownContentClass = MarkdownContentClass;
11583
11810
  exports.ModalClass = ModalClass;
11584
11811
  exports.MultiSelectComboBoxClass = MultiSelectComboBoxClass;
11585
11812
  exports.NewPasswordClass = NewPasswordClass;