@descope/web-components-ui 1.0.50 → 1.0.52

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.esm.js CHANGED
@@ -108,80 +108,111 @@ const matchHostStyle = (mappingObj = {}) => [
108
108
  ];
109
109
 
110
110
  const createStyleMixin =
111
- ({ mappings = {} }) =>
112
- (superclass) => {
113
- const styleAttributes = Object.keys(mappings).map((key) =>
114
- kebabCaseJoin('st', key)
115
- );
116
- return class CustomStyleMixinClass extends superclass {
117
- static get observedAttributes() {
118
- const superAttrs = superclass.observedAttributes || [];
119
- return [...superAttrs, ...styleAttributes];
120
- }
111
+ ({ mappings = {}, nestedMappings = {} }) =>
112
+ (superclass) => {
113
+ const styleAttributes = Object.keys(mappings).map((key) =>
114
+ kebabCaseJoin('st', key)
115
+ );
116
+ return class CustomStyleMixinClass extends superclass {
117
+ static get observedAttributes() {
118
+ const superAttrs = superclass.observedAttributes || [];
119
+ return [...superAttrs, ...styleAttributes];
120
+ }
121
121
 
122
- static get cssVarList() {
123
- return createCssVarsList(superclass.componentName, mappings);
124
- }
122
+ static get cssVarList() {
123
+ return createCssVarsList(superclass.componentName, mappings);
124
+ }
125
125
 
126
- #styleEle = null;
126
+ #styleEle = null;
127
127
 
128
- constructor() {
129
- super();
128
+ constructor() {
129
+ super();
130
130
 
131
- this.#createComponentStyle();
132
- this.#createAttrOverrideStyle();
133
- }
131
+ this.#createComponentStyle();
132
+ this.#createAttrOverrideStyle();
133
+ }
134
134
 
135
- #createAttrOverrideStyle() {
136
- this.#styleEle = document.createElement('style');
137
- this.#styleEle.id = 'style-mixin-overrides';
135
+ #createAttrOverrideStyle() {
136
+ this.#styleEle = document.createElement('style');
137
+ this.#styleEle.id = 'style-mixin-overrides';
138
138
 
139
- this.#styleEle.innerText = '* {}';
140
- this.shadowRoot.prepend(this.#styleEle);
141
- }
139
+ this.#styleEle.innerText = '* {}';
140
+ this.shadowRoot.prepend(this.#styleEle);
141
+ }
142
142
 
143
- #updateAttrOverrideStyle(attrName, value) {
144
- const style = this.#styleEle.sheet.cssRules[0].style;
145
- const varName = getCssVarName(
146
- superclass.componentName,
147
- attrName.replace(/^st-/, '')
148
- );
143
+ #updateAttrOverrideStyle(attrName, value) {
144
+ const style = this.#styleEle.sheet?.cssRules[0].style;
145
+ const varName = getCssVarName(
146
+ superclass.componentName,
147
+ attrName.replace(/^st-/, '')
148
+ );
149
149
 
150
- if (value) style.setProperty(varName, value);
151
- else style.removeProperty(varName);
152
- }
150
+ if (value) style?.setProperty(varName, value);
151
+ else style?.removeProperty(varName);
152
+ }
153
153
 
154
- #createComponentStyle() {
155
- const themeStyle = document.createElement('style');
156
- themeStyle.id = 'style-mixin-component';
157
- themeStyle.innerHTML = createStyle(
158
- superclass.componentName,
159
- this.baseSelector,
160
- mappings
161
- );
162
- this.shadowRoot.prepend(themeStyle);
163
- }
154
+ #createComponentStyle() {
155
+ const themeStyle = document.createElement('style');
156
+ themeStyle.id = 'style-mixin-component';
157
+ themeStyle.innerHTML = createStyle(
158
+ superclass.componentName,
159
+ this.baseSelector,
160
+ mappings
161
+ );
162
+ this.shadowRoot.prepend(themeStyle);
163
+ }
164
+
165
+ #createComponentNestingStyle() {
166
+ // we need these selectors to be more specific from the theme selectors
167
+ // in order to do it, we are repeating the class name for specificity
168
+ const numOfClassNameSpecifier = 3;
169
+
170
+ const rootNode = this.shadowRoot.host.getRootNode();
171
+ const styleId = `${superclass.componentName}-style-mixin-component`;
164
172
 
165
- attributeChangedCallback(attrName, oldValue, newValue) {
166
- super.attributeChangedCallback?.(attrName, oldValue, newValue);
173
+ const className = superclass.componentName;
174
+ this.shadowRoot.host.classList.add(className);
167
175
 
168
- if (styleAttributes.includes(attrName)) {
169
- this.#updateAttrOverrideStyle(attrName, newValue);
176
+ if(rootNode.querySelector(`style#${styleId}`)) return;
177
+
178
+ const themeStyle = document.createElement('style');
179
+ themeStyle.id = styleId;
180
+ themeStyle.innerHTML = createStyle(
181
+ superclass.componentName,
182
+ `${superclass.componentName}${Array(numOfClassNameSpecifier).fill(`.${className}`).join('')}`,
183
+ nestedMappings
184
+ );
185
+
186
+ // rootNode can be either a shadow DOM or a light DOM
187
+ if (rootNode.nodeName === '#document') {
188
+ rootNode.head.append(themeStyle);
189
+ } else {
190
+ rootNode.append(themeStyle);
191
+ }
170
192
  }
171
- }
172
193
 
173
- connectedCallback() {
174
- super.connectedCallback?.();
175
- if (this.shadowRoot.isConnected) {
176
- Array.from(this.attributes).forEach(attr => {
177
- if (styleAttributes.includes(attr.nodeName)) {
178
- this.#updateAttrOverrideStyle(attr.nodeName, attr.value);
179
- }
180
- });
181
- }
182
- }
194
+ attributeChangedCallback(attrName, oldValue, newValue) {
195
+ super.attributeChangedCallback?.(attrName, oldValue, newValue);
196
+
197
+ if (styleAttributes.includes(attrName)) {
198
+ this.#updateAttrOverrideStyle(attrName, newValue);
199
+ }
200
+ }
201
+
202
+ connectedCallback() {
203
+ super.connectedCallback?.();
204
+ if (this.shadowRoot.isConnected) {
205
+ this.#createComponentNestingStyle();
206
+
207
+ Array.from(this.attributes).forEach(attr => {
208
+ if (styleAttributes.includes(attr.nodeName)) {
209
+ this.#updateAttrOverrideStyle(attr.nodeName, attr.value);
210
+ }
211
+ });
212
+ }
213
+ }
214
+ };
183
215
  };
184
- };
185
216
 
186
217
  const draggableMixin = (superclass) =>
187
218
  class DraggableMixinClass extends superclass {
@@ -288,9 +319,9 @@ const createProxy = ({
288
319
  this.setAttribute('tabindex', '0');
289
320
 
290
321
  // we want to focus on the proxy element when focusing our WC
291
- this.onfocus = (e) => {
322
+ this.addEventListener('focus', () => {
292
323
  this.proxyElement.focus();
293
- };
324
+ });
294
325
 
295
326
  // `onkeydown` is set on `proxyElement` support proper tab-index navigation
296
327
  // this support is needed since both proxy host and element catch `focus`/`blur` event
@@ -316,8 +347,7 @@ const createProxy = ({
316
347
  this.proxyElement.addEventListener('mouseover', this.mouseoverCbRef);
317
348
 
318
349
  // sync events
319
- this.addEventListener = this.proxyElement.addEventListener;
320
-
350
+ this.addEventListener = (...args) => this.proxyElement.addEventListener(...args);
321
351
  syncAttrs(this.proxyElement, this.hostElement, excludeAttrsSync);
322
352
  }
323
353
  }
@@ -392,40 +422,40 @@ const inputMixin = (superclass) =>
392
422
  }
393
423
 
394
424
  connectedCallback() {
395
- this.baseEle = this.shadowRoot.querySelector(this.baseSelector);
396
425
  super.connectedCallback?.();
397
426
 
427
+ this.baseEle = this.shadowRoot.querySelector(this.baseSelector);
428
+
398
429
  // this is needed in order to make sure the form input validation is working
399
430
  if (!this.hasAttribute('tabindex')) {
400
431
  this.setAttribute('tabindex', 0);
401
432
  }
402
433
 
403
- const input =
404
- this.baseEle.querySelector('input') ||
405
- this.baseEle.querySelector('textarea');
406
- if (!input) throw Error('no input was found');
434
+ this.inputElement ??= this.baseEle.shadowRoot.querySelector('slot[name="input"]')?.assignedElements()[0] ||
435
+ this.baseEle.shadowRoot.querySelector('slot[name="textarea"]')?.assignedElements()[0];
436
+ if (!this.inputElement) throw Error('no input was found');
407
437
 
408
438
  // sync properties
409
- propertyObserver(this, input, 'value');
410
- this.setSelectionRange = input.setSelectionRange.bind(input);
439
+ propertyObserver(this, this.inputElement, 'value');
440
+ this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
411
441
 
412
- this.validity = input.validity;
442
+ this.validity = this.inputElement.validity;
413
443
 
414
444
  this.setValidity = () => {
415
- this.#internals.setValidity(input.validity, input.validationMessage);
445
+ this.#internals.setValidity(this.inputElement.validity, this.inputElement.validationMessage);
416
446
  };
417
447
 
418
- input.oninput = () => {
419
- this.value = input.value;
448
+ this.inputElement.oninput = () => {
449
+ this.value = this.inputElement.value;
420
450
  this.setValidity();
421
451
  };
422
452
 
423
453
  this.onfocus = () => {
424
- setTimeout(() => input.reportValidity(), 0);
454
+ setTimeout(() => this.inputElement.reportValidity(), 0);
425
455
  this.validate();
426
456
  };
427
457
 
428
- input.oninvalid = () => {
458
+ this.inputElement.oninvalid = () => {
429
459
  this.validate();
430
460
  };
431
461
  }
@@ -464,7 +494,7 @@ const compose =
464
494
  (val) =>
465
495
  fns.reduceRight((res, fn) => fn(res), val);
466
496
 
467
- const componentName$b = getComponentName('button');
497
+ const componentName$e = getComponentName('button');
468
498
 
469
499
  const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
470
500
  const resetStyles = `
@@ -518,7 +548,7 @@ const Button = compose(
518
548
  style: () =>
519
549
  `${resetStyles} ${editorOverrides} ${iconStyles} ${loadingIndicatorStyles}`,
520
550
  excludeAttrsSync: ['tabindex'],
521
- componentName: componentName$b
551
+ componentName: componentName$e
522
552
  })
523
553
  );
524
554
 
@@ -551,7 +581,7 @@ const loadingIndicatorStyles = `
551
581
  }
552
582
  `;
553
583
 
554
- customElements.define(componentName$b, Button);
584
+ customElements.define(componentName$e, Button);
555
585
 
556
586
  const selectors$1 = {
557
587
  label: '::part(label)',
@@ -588,9 +618,9 @@ var textFieldMappings = {
588
618
  placeholderColor: { selector: selectors$1.placeholder, property: 'color' }
589
619
  };
590
620
 
591
- const componentName$a = getComponentName('text-field');
621
+ const componentName$d = getComponentName('text-field');
592
622
 
593
- let overrides$5 = ``;
623
+ let overrides$6 = ``;
594
624
 
595
625
  const TextField = compose(
596
626
  createStyleMixin({
@@ -603,13 +633,13 @@ const TextField = compose(
603
633
  createProxy({
604
634
  slots: ['prefix', 'suffix'],
605
635
  wrappedEleName: 'vaadin-text-field',
606
- style: () => overrides$5,
636
+ style: () => overrides$6,
607
637
  excludeAttrsSync: ['tabindex'],
608
- componentName: componentName$a
638
+ componentName: componentName$d
609
639
  })
610
640
  );
611
641
 
612
- overrides$5 = `
642
+ overrides$6 = `
613
643
  :host {
614
644
  display: inline-block;
615
645
  }
@@ -650,11 +680,11 @@ overrides$5 = `
650
680
  }
651
681
  `;
652
682
 
653
- customElements.define(componentName$a, TextField);
683
+ customElements.define(componentName$d, TextField);
654
684
 
655
685
  const template = document.createElement('template');
656
686
 
657
- const componentName$9 = getComponentName('combo');
687
+ const componentName$c = getComponentName('combo');
658
688
 
659
689
  template.innerHTML = `
660
690
  <descope-button></descope-button>
@@ -671,11 +701,11 @@ class Combo extends HTMLElement {
671
701
  }
672
702
  }
673
703
 
674
- customElements.define(componentName$9, Combo);
704
+ customElements.define(componentName$c, Combo);
675
705
 
676
- const componentName$8 = getComponentName('number-field');
706
+ const componentName$b = getComponentName('number-field');
677
707
 
678
- let overrides$4 = ``;
708
+ let overrides$5 = ``;
679
709
 
680
710
  const NumberField = compose(
681
711
  createStyleMixin({
@@ -690,13 +720,13 @@ const NumberField = compose(
690
720
  createProxy({
691
721
  slots: ['prefix', 'suffix'],
692
722
  wrappedEleName: 'vaadin-number-field',
693
- style: () => overrides$4,
723
+ style: () => overrides$5,
694
724
  excludeAttrsSync: ['tabindex'],
695
- componentName: componentName$8
725
+ componentName: componentName$b
696
726
  })
697
727
  );
698
728
 
699
- overrides$4 = `
729
+ overrides$5 = `
700
730
  :host {
701
731
  display: inline-block;
702
732
  }
@@ -736,11 +766,11 @@ overrides$4 = `
736
766
  }
737
767
  `;
738
768
 
739
- customElements.define(componentName$8, NumberField);
769
+ customElements.define(componentName$b, NumberField);
740
770
 
741
- const componentName$7 = getComponentName('email-field');
771
+ const componentName$a = getComponentName('email-field');
742
772
 
743
- let overrides$3 = ``;
773
+ let overrides$4 = ``;
744
774
 
745
775
  const EmailField = compose(
746
776
  createStyleMixin({
@@ -755,13 +785,13 @@ const EmailField = compose(
755
785
  createProxy({
756
786
  slots: ['suffix'],
757
787
  wrappedEleName: 'vaadin-email-field',
758
- style: () => overrides$3,
788
+ style: () => overrides$4,
759
789
  excludeAttrsSync: ['tabindex'],
760
- componentName: componentName$7
790
+ componentName: componentName$a
761
791
  })
762
792
  );
763
793
 
764
- overrides$3 = `
794
+ overrides$4 = `
765
795
  :host {
766
796
  display: inline-block;
767
797
  }
@@ -801,11 +831,11 @@ overrides$3 = `
801
831
  }
802
832
  `;
803
833
 
804
- customElements.define(componentName$7, EmailField);
834
+ customElements.define(componentName$a, EmailField);
805
835
 
806
- const componentName$6 = getComponentName('password-field');
836
+ const componentName$9 = getComponentName('password-field');
807
837
 
808
- let overrides$2 = ``;
838
+ let overrides$3 = ``;
809
839
 
810
840
  const PasswordField = compose(
811
841
  createStyleMixin({
@@ -827,13 +857,13 @@ const PasswordField = compose(
827
857
  createProxy({
828
858
  slots: ['suffix'],
829
859
  wrappedEleName: 'vaadin-password-field',
830
- style: () => overrides$2,
860
+ style: () => overrides$3,
831
861
  excludeAttrsSync: ['tabindex'],
832
- componentName: componentName$6
862
+ componentName: componentName$9
833
863
  })
834
864
  );
835
865
 
836
- overrides$2 = `
866
+ overrides$3 = `
837
867
  :host {
838
868
  display: inline-block;
839
869
  }
@@ -873,9 +903,9 @@ overrides$2 = `
873
903
  }
874
904
  `;
875
905
 
876
- customElements.define(componentName$6, PasswordField);
906
+ customElements.define(componentName$9, PasswordField);
877
907
 
878
- const componentName$5 = getComponentName('text-area');
908
+ const componentName$8 = getComponentName('text-area');
879
909
 
880
910
  const selectors = {
881
911
  label: '::part(label)',
@@ -883,7 +913,7 @@ const selectors = {
883
913
  required: '::part(required-indicator)::after'
884
914
  };
885
915
 
886
- let overrides$1 = ``;
916
+ let overrides$2 = ``;
887
917
 
888
918
  const TextArea = compose(
889
919
  createStyleMixin({
@@ -908,13 +938,13 @@ const TextArea = compose(
908
938
  createProxy({
909
939
  slots: [],
910
940
  wrappedEleName: 'vaadin-text-area',
911
- style: () => overrides$1,
941
+ style: () => overrides$2,
912
942
  excludeAttrsSync: ['tabindex'],
913
- componentName: componentName$5
943
+ componentName: componentName$8
914
944
  })
915
945
  );
916
946
 
917
- overrides$1 = `
947
+ overrides$2 = `
918
948
  :host {
919
949
  display: inline-block;
920
950
  }
@@ -935,29 +965,29 @@ overrides$1 = `
935
965
  }
936
966
  `;
937
967
 
938
- customElements.define(componentName$5, TextArea);
968
+ customElements.define(componentName$8, TextArea);
939
969
 
940
- const componentName$4 = getComponentName('date-picker');
970
+ const componentName$7 = getComponentName('date-picker');
941
971
 
942
972
  const DatePicker = compose(
943
973
  draggableMixin,
944
974
  componentNameValidationMixin
945
975
  )(
946
976
  createProxy({
947
- componentName: componentName$4,
977
+ componentName: componentName$7,
948
978
  slots: ['prefix', 'suffix'],
949
979
  wrappedEleName: 'vaadin-date-picker',
950
980
  style: ``
951
981
  })
952
982
  );
953
983
 
954
- customElements.define(componentName$4, DatePicker);
984
+ customElements.define(componentName$7, DatePicker);
955
985
 
956
- const componentName$3 = getComponentName('container');
986
+ const componentName$6 = getComponentName('container');
957
987
 
958
988
  class RawContainer extends HTMLElement {
959
989
  static get componentName() {
960
- return componentName$3;
990
+ return componentName$6;
961
991
  }
962
992
  constructor() {
963
993
  super();
@@ -987,7 +1017,7 @@ const Container = compose(
987
1017
  { property: 'padding-right' }
988
1018
  ],
989
1019
 
990
- display: {},
1020
+ display: {}, // maybe this should be hardcoded to flex
991
1021
  flexDirection: {},
992
1022
  justifyContent: {},
993
1023
  alignItems: {},
@@ -1007,7 +1037,45 @@ const Container = compose(
1007
1037
  componentNameValidationMixin
1008
1038
  )(RawContainer);
1009
1039
 
1010
- customElements.define(componentName$3, Container);
1040
+ customElements.define(componentName$6, Container);
1041
+
1042
+ const componentName$5 = getComponentName('text');
1043
+
1044
+ class RawText extends HTMLElement {
1045
+ static get componentName() {
1046
+ return componentName$5;
1047
+ }
1048
+ constructor() {
1049
+ super();
1050
+ const template = document.createElement('template');
1051
+ template.innerHTML = `<slot></slot>`;
1052
+
1053
+ this.attachShadow({ mode: 'open' });
1054
+ this.shadowRoot.appendChild(template.content.cloneNode(true));
1055
+
1056
+ this.baseSelector = ':host > slot';
1057
+ }
1058
+ }
1059
+
1060
+ const Text = compose(
1061
+ createStyleMixin({
1062
+ mappings: {
1063
+ fontFamily: {},
1064
+ lineHeight: {},
1065
+ fontStyle: {},
1066
+ fontSize: {},
1067
+ fontWeight: {},
1068
+ width: {},
1069
+ color: {},
1070
+ textAlign: matchHostStyle(),
1071
+ display: matchHostStyle()
1072
+ }
1073
+ }),
1074
+ draggableMixin,
1075
+ componentNameValidationMixin
1076
+ )(RawText);
1077
+
1078
+ customElements.define(componentName$5, Text);
1011
1079
 
1012
1080
  const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
1013
1081
 
@@ -1156,21 +1224,47 @@ const colors = genColors({
1156
1224
  error: 'red'
1157
1225
  });
1158
1226
 
1227
+ const fonts = {
1228
+ font1: ['Roboto', 'sans-serif'],
1229
+ font2: ['Oswald', 'serif']
1230
+ };
1231
+ const fontsRef = getThemeRefs({ fonts }).fonts;
1232
+
1159
1233
  const typography = {
1160
1234
  h1: {
1161
- font: ['Courier New', 'Arial', 'sans-serif'],
1162
- weight: '700',
1235
+ font: fontsRef.font1,
1236
+ weight: '900',
1163
1237
  size: '48px'
1164
1238
  },
1165
1239
  h2: {
1166
- font: ['Courier New', 'sans-serif'],
1167
- weight: '500',
1240
+ font: fontsRef.font1,
1241
+ weight: '800',
1168
1242
  size: '38px'
1169
1243
  },
1170
1244
  h3: {
1171
- font: ['Courier New', 'sans-serif'],
1172
- weight: '300',
1245
+ font: fontsRef.font1,
1246
+ weight: '600',
1173
1247
  size: '28px'
1248
+ },
1249
+ subtitle1: {
1250
+ font: fontsRef.font2,
1251
+ weight: '500',
1252
+ size: '22px'
1253
+ },
1254
+ subtitle2: {
1255
+ font: fontsRef.font2,
1256
+ weight: '400',
1257
+ size: '20px'
1258
+ },
1259
+ body1: {
1260
+ font: fontsRef.font1,
1261
+ weight: '300',
1262
+ size: '16px'
1263
+ },
1264
+ body2: {
1265
+ font: fontsRef.font1,
1266
+ weight: '200',
1267
+ size: '14px'
1174
1268
  }
1175
1269
  };
1176
1270
 
@@ -1195,20 +1289,20 @@ const radius = {
1195
1289
  };
1196
1290
 
1197
1291
  const shadow = {
1198
- wide: {
1199
- sm: '0 2px 3px -0.5px',
1200
- md: '0 4px 6px -1px',
1201
- lg: '0 10px 15px -3px',
1202
- xl: '0 20px 25px -5px',
1203
- '2xl': '0 25px 50px -12px',
1204
- },
1205
- narrow: {
1206
- sm: '0 1px 2px -1px',
1207
- md: '0 2px 4px -2px',
1208
- lg: '0 4px 6px -4px',
1209
- xl: '0 8px 10px -6px',
1210
- '2xl': '0 16px 16px -8px',
1211
- }
1292
+ wide: {
1293
+ sm: '0 2px 3px -0.5px',
1294
+ md: '0 4px 6px -1px',
1295
+ lg: '0 10px 15px -3px',
1296
+ xl: '0 20px 25px -5px',
1297
+ '2xl': '0 25px 50px -12px'
1298
+ },
1299
+ narrow: {
1300
+ sm: '0 1px 2px -1px',
1301
+ md: '0 2px 4px -2px',
1302
+ lg: '0 4px 6px -4px',
1303
+ xl: '0 8px 10px -6px',
1304
+ '2xl': '0 16px 16px -8px'
1305
+ }
1212
1306
  };
1213
1307
 
1214
1308
  var globals = {
@@ -1217,153 +1311,154 @@ var globals = {
1217
1311
  spacing,
1218
1312
  border,
1219
1313
  radius,
1220
- shadow
1314
+ shadow,
1315
+ fonts
1221
1316
  };
1222
1317
 
1223
- const globalRefs$3 = getThemeRefs(globals);
1224
- const vars$7 = Button.cssVarList;
1318
+ const globalRefs$4 = getThemeRefs(globals);
1319
+ const vars$8 = Button.cssVarList;
1225
1320
 
1226
1321
  const mode = {
1227
- primary: globalRefs$3.colors.primary,
1228
- secondary: globalRefs$3.colors.secondary,
1229
- success: globalRefs$3.colors.success,
1230
- error: globalRefs$3.colors.error,
1231
- surface: globalRefs$3.colors.surface
1322
+ primary: globalRefs$4.colors.primary,
1323
+ secondary: globalRefs$4.colors.secondary,
1324
+ success: globalRefs$4.colors.success,
1325
+ error: globalRefs$4.colors.error,
1326
+ surface: globalRefs$4.colors.surface
1232
1327
  };
1233
1328
 
1234
- const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$b);
1329
+ const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$e);
1235
1330
 
1236
1331
  const button = {
1237
1332
  ...helperTheme$1,
1238
1333
 
1239
1334
  size: {
1240
1335
  xs: {
1241
- [vars$7.height]: '10px',
1242
- [vars$7.fontSize]: '10px',
1243
- [vars$7.padding]: `0 ${globalRefs$3.spacing.xs}`
1336
+ [vars$8.height]: '10px',
1337
+ [vars$8.fontSize]: '10px',
1338
+ [vars$8.padding]: `0 ${globalRefs$4.spacing.xs}`
1244
1339
  },
1245
1340
  sm: {
1246
- [vars$7.height]: '20px',
1247
- [vars$7.fontSize]: '10px',
1248
- [vars$7.padding]: `0 ${globalRefs$3.spacing.sm}`
1341
+ [vars$8.height]: '20px',
1342
+ [vars$8.fontSize]: '10px',
1343
+ [vars$8.padding]: `0 ${globalRefs$4.spacing.sm}`
1249
1344
  },
1250
1345
  md: {
1251
- [vars$7.height]: '30px',
1252
- [vars$7.fontSize]: '14px',
1253
- [vars$7.padding]: `0 ${globalRefs$3.spacing.md}`
1346
+ [vars$8.height]: '30px',
1347
+ [vars$8.fontSize]: '14px',
1348
+ [vars$8.padding]: `0 ${globalRefs$4.spacing.md}`
1254
1349
  },
1255
1350
  lg: {
1256
- [vars$7.height]: '40px',
1257
- [vars$7.fontSize]: '20px',
1258
- [vars$7.padding]: `0 ${globalRefs$3.spacing.lg}`
1351
+ [vars$8.height]: '40px',
1352
+ [vars$8.fontSize]: '20px',
1353
+ [vars$8.padding]: `0 ${globalRefs$4.spacing.lg}`
1259
1354
  },
1260
1355
  xl: {
1261
- [vars$7.height]: '50px',
1262
- [vars$7.fontSize]: '25px',
1263
- [vars$7.padding]: `0 ${globalRefs$3.spacing.xl}`
1356
+ [vars$8.height]: '50px',
1357
+ [vars$8.fontSize]: '25px',
1358
+ [vars$8.padding]: `0 ${globalRefs$4.spacing.xl}`
1264
1359
  }
1265
1360
  },
1266
1361
 
1267
- [vars$7.borderRadius]: globalRefs$3.radius.lg,
1268
- [vars$7.cursor]: 'pointer',
1269
- [vars$7.borderWidth]: '2px',
1270
- [vars$7.borderStyle]: 'solid',
1271
- [vars$7.borderColor]: 'transparent',
1362
+ [vars$8.borderRadius]: globalRefs$4.radius.lg,
1363
+ [vars$8.cursor]: 'pointer',
1364
+ [vars$8.borderWidth]: '2px',
1365
+ [vars$8.borderStyle]: 'solid',
1366
+ [vars$8.borderColor]: 'transparent',
1272
1367
 
1273
1368
  _fullWidth: {
1274
- [vars$7.width]: '100%'
1369
+ [vars$8.width]: '100%'
1275
1370
  },
1276
1371
  _loading: {
1277
- [vars$7.cursor]: 'wait'
1372
+ [vars$8.cursor]: 'wait'
1278
1373
  },
1279
1374
 
1280
1375
  variant: {
1281
1376
  contained: {
1282
- [vars$7.color]: helperRefs$1.contrast,
1283
- [vars$7.backgroundColor]: helperRefs$1.main,
1377
+ [vars$8.color]: helperRefs$1.contrast,
1378
+ [vars$8.backgroundColor]: helperRefs$1.main,
1284
1379
  _hover: {
1285
- [vars$7.backgroundColor]: helperRefs$1.dark
1380
+ [vars$8.backgroundColor]: helperRefs$1.dark
1286
1381
  },
1287
1382
  _loading: {
1288
- [vars$7.backgroundColor]: helperRefs$1.main
1383
+ [vars$8.backgroundColor]: helperRefs$1.main
1289
1384
  }
1290
1385
  },
1291
1386
  outline: {
1292
- [vars$7.color]: helperRefs$1.main,
1293
- [vars$7.borderColor]: helperRefs$1.main,
1387
+ [vars$8.color]: helperRefs$1.main,
1388
+ [vars$8.borderColor]: helperRefs$1.main,
1294
1389
  _hover: {
1295
- [vars$7.color]: helperRefs$1.dark,
1296
- [vars$7.borderColor]: helperRefs$1.dark,
1390
+ [vars$8.color]: helperRefs$1.dark,
1391
+ [vars$8.borderColor]: helperRefs$1.dark,
1297
1392
  _error: {
1298
- [vars$7.color]: helperRefs$1.error
1393
+ [vars$8.color]: helperRefs$1.error
1299
1394
  }
1300
1395
  }
1301
1396
  },
1302
1397
  link: {
1303
- [vars$7.color]: helperRefs$1.main,
1304
- [vars$7.padding]: 0,
1305
- [vars$7.margin]: 0,
1306
- [vars$7.lineHeight]: helperRefs$1.height,
1307
- [vars$7.borderRadius]: 0,
1398
+ [vars$8.color]: helperRefs$1.main,
1399
+ [vars$8.padding]: 0,
1400
+ [vars$8.margin]: 0,
1401
+ [vars$8.lineHeight]: helperRefs$1.height,
1402
+ [vars$8.borderRadius]: 0,
1308
1403
  _hover: {
1309
- [vars$7.color]: helperRefs$1.main,
1310
- [vars$7.textDecoration]: 'underline'
1404
+ [vars$8.color]: helperRefs$1.main,
1405
+ [vars$8.textDecoration]: 'underline'
1311
1406
  }
1312
1407
  }
1313
1408
  }
1314
1409
  };
1315
1410
 
1316
- const globalRefs$2 = getThemeRefs(globals);
1411
+ const globalRefs$3 = getThemeRefs(globals);
1317
1412
 
1318
- const vars$6 = TextField.cssVarList;
1413
+ const vars$7 = TextField.cssVarList;
1319
1414
 
1320
1415
  const textField = (vars) => ({
1321
1416
  size: {
1322
1417
  xs: {
1323
1418
  [vars.height]: '14px',
1324
1419
  [vars.fontSize]: '8px',
1325
- [vars.padding]: `0 ${globalRefs$2.spacing.xs}`
1420
+ [vars.padding]: `0 ${globalRefs$3.spacing.xs}`
1326
1421
  },
1327
1422
  sm: {
1328
1423
  [vars.height]: '20px',
1329
1424
  [vars.fontSize]: '10px',
1330
- [vars.padding]: `0 ${globalRefs$2.spacing.sm}`
1425
+ [vars.padding]: `0 ${globalRefs$3.spacing.sm}`
1331
1426
  },
1332
1427
  md: {
1333
1428
  [vars.height]: '30px',
1334
1429
  [vars.fontSize]: '14px',
1335
- [vars.padding]: `0 ${globalRefs$2.spacing.md}`
1430
+ [vars.padding]: `0 ${globalRefs$3.spacing.md}`
1336
1431
  },
1337
1432
  lg: {
1338
1433
  [vars.height]: '40px',
1339
1434
  [vars.fontSize]: '16px',
1340
- [vars.padding]: `0 ${globalRefs$2.spacing.lg}`
1435
+ [vars.padding]: `0 ${globalRefs$3.spacing.lg}`
1341
1436
  },
1342
1437
  xl: {
1343
1438
  [vars.height]: '50px',
1344
1439
  [vars.fontSize]: '25px',
1345
- [vars.padding]: `0 ${globalRefs$2.spacing.xl}`
1440
+ [vars.padding]: `0 ${globalRefs$3.spacing.xl}`
1346
1441
  }
1347
1442
  },
1348
1443
 
1349
- [vars.color]: globalRefs$2.colors.surface.contrast,
1350
- [vars.placeholderColor]: globalRefs$2.colors.surface.contrast,
1444
+ [vars.color]: globalRefs$3.colors.surface.contrast,
1445
+ [vars.placeholderColor]: globalRefs$3.colors.surface.contrast,
1351
1446
 
1352
- [vars.backgroundColor]: globalRefs$2.colors.surface.light,
1447
+ [vars.backgroundColor]: globalRefs$3.colors.surface.light,
1353
1448
 
1354
1449
  [vars.borderWidth]: '1px',
1355
1450
  [vars.borderStyle]: 'solid',
1356
1451
  [vars.borderColor]: 'transparent',
1357
- [vars.borderRadius]: globalRefs$2.radius.sm,
1452
+ [vars.borderRadius]: globalRefs$3.radius.sm,
1358
1453
 
1359
1454
  _borderOffset: {
1360
1455
  [vars.outlineOffset]: '2px'
1361
1456
  },
1362
1457
 
1363
1458
  _disabled: {
1364
- [vars.color]: globalRefs$2.colors.surface.dark,
1365
- [vars.placeholderColor]: globalRefs$2.colors.surface.light,
1366
- [vars.backgroundColor]: globalRefs$2.colors.surface.main
1459
+ [vars.color]: globalRefs$3.colors.surface.dark,
1460
+ [vars.placeholderColor]: globalRefs$3.colors.surface.light,
1461
+ [vars.backgroundColor]: globalRefs$3.colors.surface.main
1367
1462
  },
1368
1463
 
1369
1464
  _fullWidth: {
@@ -1371,27 +1466,27 @@ const textField = (vars) => ({
1371
1466
  },
1372
1467
 
1373
1468
  _focused: {
1374
- [vars.outline]: `2px solid ${globalRefs$2.colors.surface.main}`
1469
+ [vars.outline]: `2px solid ${globalRefs$3.colors.surface.main}`
1375
1470
  },
1376
1471
 
1377
1472
  _bordered: {
1378
- [vars.borderColor]: globalRefs$2.colors.surface.main
1473
+ [vars.borderColor]: globalRefs$3.colors.surface.main
1379
1474
  },
1380
1475
 
1381
1476
  _hasErrorMessage: {
1382
- [vars.borderColor]: globalRefs$2.colors.error.main,
1383
- [vars.color]: globalRefs$2.colors.error.main,
1384
- [vars.placeholderColor]: globalRefs$2.colors.error.light
1477
+ [vars.borderColor]: globalRefs$3.colors.error.main,
1478
+ [vars.color]: globalRefs$3.colors.error.main,
1479
+ [vars.placeholderColor]: globalRefs$3.colors.error.light
1385
1480
  }
1386
1481
  });
1387
1482
 
1388
- var textField$1 = textField(vars$6);
1483
+ var textField$1 = textField(vars$7);
1389
1484
 
1390
- const vars$5 = PasswordField.cssVarList;
1485
+ const vars$6 = PasswordField.cssVarList;
1391
1486
 
1392
1487
  const passwordField = {
1393
- ...textField(vars$5),
1394
- [vars$5.revealCursor]: 'pointer'
1488
+ ...textField(vars$6),
1489
+ [vars$6.revealCursor]: 'pointer'
1395
1490
  };
1396
1491
 
1397
1492
  const numberField = {
@@ -1402,45 +1497,45 @@ const emailField = {
1402
1497
  ...textField(EmailField.cssVarList)
1403
1498
  };
1404
1499
 
1405
- const globalRefs$1 = getThemeRefs(globals);
1406
- const vars$4 = TextArea.cssVarList;
1500
+ const globalRefs$2 = getThemeRefs(globals);
1501
+ const vars$5 = TextArea.cssVarList;
1407
1502
 
1408
1503
  const textArea = {
1409
- [vars$4.color]: globalRefs$1.colors.primary.main,
1410
- [vars$4.backgroundColor]: globalRefs$1.colors.surface.light,
1411
- [vars$4.resize]: 'vertical',
1504
+ [vars$5.color]: globalRefs$2.colors.primary.main,
1505
+ [vars$5.backgroundColor]: globalRefs$2.colors.surface.light,
1506
+ [vars$5.resize]: 'vertical',
1412
1507
 
1413
- [vars$4.borderRadius]: globalRefs$1.radius.sm,
1414
- [vars$4.borderWidth]: '1px',
1415
- [vars$4.borderStyle]: 'solid',
1416
- [vars$4.borderColor]: 'transparent',
1508
+ [vars$5.borderRadius]: globalRefs$2.radius.sm,
1509
+ [vars$5.borderWidth]: '1px',
1510
+ [vars$5.borderStyle]: 'solid',
1511
+ [vars$5.borderColor]: 'transparent',
1417
1512
 
1418
1513
  _borderOffset: {
1419
- [vars$4.outlineOffset]: '2px'
1514
+ [vars$5.outlineOffset]: '2px'
1420
1515
  },
1421
1516
 
1422
1517
  _bordered: {
1423
- [vars$4.borderColor]: globalRefs$1.colors.surface.main
1518
+ [vars$5.borderColor]: globalRefs$2.colors.surface.main
1424
1519
  },
1425
1520
 
1426
1521
  _focused: {
1427
- [vars$4.outline]: `2px solid ${globalRefs$1.colors.surface.main}`
1522
+ [vars$5.outline]: `2px solid ${globalRefs$2.colors.surface.main}`
1428
1523
  },
1429
1524
 
1430
1525
  _fullWidth: {
1431
- [vars$4.width]: '100%'
1526
+ [vars$5.width]: '100%'
1432
1527
  },
1433
1528
 
1434
1529
  _disabled: {
1435
- [vars$4.cursor]: 'not-allowed'
1530
+ [vars$5.cursor]: 'not-allowed'
1436
1531
  },
1437
1532
 
1438
1533
  _invalid: {
1439
- [vars$4.outline]: `2px solid ${globalRefs$1.colors.error.main}`
1534
+ [vars$5.outline]: `2px solid ${globalRefs$2.colors.error.main}`
1440
1535
  }
1441
1536
  };
1442
1537
 
1443
- const componentName$2 = getComponentName('checkbox');
1538
+ const componentName$4 = getComponentName('checkbox');
1444
1539
 
1445
1540
  const Checkbox = compose(
1446
1541
  createStyleMixin({
@@ -1462,19 +1557,19 @@ const Checkbox = compose(
1462
1557
  }
1463
1558
  `,
1464
1559
  excludeAttrsSync: ['tabindex'],
1465
- componentName: componentName$2
1560
+ componentName: componentName$4
1466
1561
  })
1467
1562
  );
1468
1563
 
1469
- const vars$3 = Checkbox.cssVarList;
1564
+ const vars$4 = Checkbox.cssVarList;
1470
1565
 
1471
1566
  const checkbox = {
1472
- [vars$3.cursor]: 'pointer'
1567
+ [vars$4.cursor]: 'pointer'
1473
1568
  };
1474
1569
 
1475
- const componentName$1 = getComponentName('switch-toggle');
1570
+ const componentName$3 = getComponentName('switch-toggle');
1476
1571
 
1477
- let overrides = ``;
1572
+ let overrides$1 = ``;
1478
1573
 
1479
1574
  const SwitchToggle = compose(
1480
1575
  createStyleMixin({
@@ -1490,13 +1585,13 @@ const SwitchToggle = compose(
1490
1585
  createProxy({
1491
1586
  slots: [],
1492
1587
  wrappedEleName: 'vaadin-checkbox',
1493
- style: () => overrides,
1588
+ style: () => overrides$1,
1494
1589
  excludeAttrsSync: ['tabindex'],
1495
- componentName: componentName$1
1590
+ componentName: componentName$3
1496
1591
  })
1497
1592
  );
1498
1593
 
1499
- overrides = `
1594
+ overrides$1 = `
1500
1595
  :host {
1501
1596
  display: inline-block;
1502
1597
  }
@@ -1546,16 +1641,16 @@ overrides = `
1546
1641
  }
1547
1642
  `;
1548
1643
 
1549
- const vars$2 = SwitchToggle.cssVarList;
1644
+ const vars$3 = SwitchToggle.cssVarList;
1550
1645
 
1551
1646
  const swtichToggle = {
1552
- [vars$2.width]: '70px',
1553
- [vars$2.cursor]: [{}, { selector: '> label' }]
1647
+ [vars$3.width]: '70px',
1648
+ [vars$3.cursor]: [{}, { selector: '> label' }]
1554
1649
  };
1555
1650
 
1556
- const globalRefs = getThemeRefs(globals);
1651
+ const globalRefs$1 = getThemeRefs(globals);
1557
1652
 
1558
- const vars$1 = Container.cssVarList;
1653
+ const vars$2 = Container.cssVarList;
1559
1654
 
1560
1655
  const verticalAlignment = {
1561
1656
  start: { verticalAlignment: 'start' },
@@ -1578,31 +1673,31 @@ const [helperTheme, helperRefs, helperVars] =
1578
1673
 
1579
1674
  const container = {
1580
1675
  ...helperTheme,
1581
- [vars$1.display]: 'flex',
1676
+ [vars$2.display]: 'flex',
1582
1677
  verticalPadding: {
1583
- sm: { [vars$1.verticalPadding]: '5px' },
1584
- md: { [vars$1.verticalPadding]: '10px' },
1585
- lg: { [vars$1.verticalPadding]: '20px' },
1678
+ sm: { [vars$2.verticalPadding]: '5px' },
1679
+ md: { [vars$2.verticalPadding]: '10px' },
1680
+ lg: { [vars$2.verticalPadding]: '20px' },
1586
1681
  },
1587
1682
  horizontalPadding: {
1588
- sm: { [vars$1.horizontalPadding]: '5px' },
1589
- md: { [vars$1.horizontalPadding]: '10px' },
1590
- lg: { [vars$1.horizontalPadding]: '20px' },
1683
+ sm: { [vars$2.horizontalPadding]: '5px' },
1684
+ md: { [vars$2.horizontalPadding]: '10px' },
1685
+ lg: { [vars$2.horizontalPadding]: '20px' },
1591
1686
  },
1592
1687
  direction: {
1593
1688
  row: {
1594
- [vars$1.flexDirection]: 'row',
1595
- [vars$1.alignItems]: helperRefs.verticalAlignment,
1596
- [vars$1.justifyContent]: helperRefs.horizontalAlignment,
1689
+ [vars$2.flexDirection]: 'row',
1690
+ [vars$2.alignItems]: helperRefs.verticalAlignment,
1691
+ [vars$2.justifyContent]: helperRefs.horizontalAlignment,
1597
1692
  horizontalAlignment: {
1598
1693
  spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' },
1599
1694
  }
1600
1695
  },
1601
1696
 
1602
1697
  column: {
1603
- [vars$1.flexDirection]: 'column',
1604
- [vars$1.alignItems]: helperRefs.horizontalAlignment,
1605
- [vars$1.justifyContent]: helperRefs.verticalAlignment,
1698
+ [vars$2.flexDirection]: 'column',
1699
+ [vars$2.alignItems]: helperRefs.horizontalAlignment,
1700
+ [vars$2.justifyContent]: helperRefs.verticalAlignment,
1606
1701
  verticalAlignment: {
1607
1702
  spaceBetween: { [helperVars.verticalAlignment]: 'space-between' }
1608
1703
  }
@@ -1611,56 +1706,56 @@ const container = {
1611
1706
 
1612
1707
  spaceBetween: {
1613
1708
  sm: {
1614
- [vars$1.gap]: '10px'
1709
+ [vars$2.gap]: '10px'
1615
1710
  },
1616
1711
  md: {
1617
- [vars$1.gap]: '20px'
1712
+ [vars$2.gap]: '20px'
1618
1713
  },
1619
1714
  lg: {
1620
- [vars$1.gap]: '30px'
1715
+ [vars$2.gap]: '30px'
1621
1716
  }
1622
1717
  },
1623
1718
 
1624
1719
  shadow: {
1625
1720
  sm: {
1626
- [vars$1.boxShadow]: `${globalRefs.shadow.wide.sm} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.sm} ${helperRefs.shadowColor}`
1721
+ [vars$2.boxShadow]: `${globalRefs$1.shadow.wide.sm} ${helperRefs.shadowColor}, ${globalRefs$1.shadow.narrow.sm} ${helperRefs.shadowColor}`
1627
1722
  },
1628
1723
  md: {
1629
- [vars$1.boxShadow]: `${globalRefs.shadow.wide.md} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.md} ${helperRefs.shadowColor}`
1724
+ [vars$2.boxShadow]: `${globalRefs$1.shadow.wide.md} ${helperRefs.shadowColor}, ${globalRefs$1.shadow.narrow.md} ${helperRefs.shadowColor}`
1630
1725
  },
1631
1726
  lg: {
1632
- [vars$1.boxShadow]: `${globalRefs.shadow.wide.lg} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.lg} ${helperRefs.shadowColor}`
1727
+ [vars$2.boxShadow]: `${globalRefs$1.shadow.wide.lg} ${helperRefs.shadowColor}, ${globalRefs$1.shadow.narrow.lg} ${helperRefs.shadowColor}`
1633
1728
  },
1634
1729
  xl: {
1635
- [vars$1.boxShadow]: `${globalRefs.shadow.wide.xl} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.xl} ${helperRefs.shadowColor}`
1730
+ [vars$2.boxShadow]: `${globalRefs$1.shadow.wide.xl} ${helperRefs.shadowColor}, ${globalRefs$1.shadow.narrow.xl} ${helperRefs.shadowColor}`
1636
1731
  },
1637
1732
  '2xl': {
1638
1733
  [helperVars.shadowColor]: '#00000050',
1639
- [vars$1.boxShadow]: `${globalRefs.shadow.wide['2xl']} ${helperRefs.shadowColor}`
1734
+ [vars$2.boxShadow]: `${globalRefs$1.shadow.wide['2xl']} ${helperRefs.shadowColor}`
1640
1735
  },
1641
1736
  },
1642
1737
 
1643
1738
  borderRadius: {
1644
1739
  sm: {
1645
- [vars$1.borderRadius]: globalRefs.radius.sm
1740
+ [vars$2.borderRadius]: globalRefs$1.radius.sm
1646
1741
  },
1647
1742
  md: {
1648
- [vars$1.borderRadius]: globalRefs.radius.md
1743
+ [vars$2.borderRadius]: globalRefs$1.radius.md
1649
1744
  },
1650
1745
  lg: {
1651
- [vars$1.borderRadius]: globalRefs.radius.lg
1746
+ [vars$2.borderRadius]: globalRefs$1.radius.lg
1652
1747
  },
1653
1748
  }
1654
1749
  };
1655
1750
 
1656
- const componentName = getComponentName('logo');
1751
+ const componentName$2 = getComponentName('logo');
1657
1752
 
1658
1753
  let style;
1659
1754
  const getStyle = () => style;
1660
1755
 
1661
1756
  class RawLogo extends HTMLElement {
1662
1757
  static get componentName() {
1663
- return componentName;
1758
+ return componentName$2;
1664
1759
  }
1665
1760
  constructor() {
1666
1761
  super();
@@ -1701,10 +1796,217 @@ style = `
1701
1796
  }
1702
1797
  `;
1703
1798
 
1704
- const vars = Logo.cssVarList;
1799
+ const vars$1 = Logo.cssVarList;
1705
1800
 
1706
1801
  const logo = {
1707
- [vars.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
1802
+ [vars$1.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
1803
+ };
1804
+
1805
+ const globalRefs = getThemeRefs(globals);
1806
+
1807
+ const vars = Text.cssVarList;
1808
+
1809
+ const text = {
1810
+ [vars.lineHeight]: '1em',
1811
+ [vars.display]: 'inline-block',
1812
+ [vars.textAlign]: 'left',
1813
+ [vars.color]: globalRefs.colors.surface.dark,
1814
+ variant: {
1815
+ h1: {
1816
+ [vars.fontSize]: globalRefs.typography.h1.size,
1817
+ [vars.fontWeight]: globalRefs.typography.h1.weight,
1818
+ [vars.fontFamily]: globalRefs.typography.h1.font
1819
+ },
1820
+ h2: {
1821
+ [vars.fontSize]: globalRefs.typography.h2.size,
1822
+ [vars.fontWeight]: globalRefs.typography.h2.weight,
1823
+ [vars.fontFamily]: globalRefs.typography.h2.font
1824
+ },
1825
+ h3: {
1826
+ [vars.fontSize]: globalRefs.typography.h3.size,
1827
+ [vars.fontWeight]: globalRefs.typography.h3.weight,
1828
+ [vars.fontFamily]: globalRefs.typography.h3.font
1829
+ },
1830
+ subtitle1: {
1831
+ [vars.fontSize]: globalRefs.typography.subtitle1.size,
1832
+ [vars.fontWeight]: globalRefs.typography.subtitle1.weight,
1833
+ [vars.fontFamily]: globalRefs.typography.subtitle1.font
1834
+ },
1835
+ subtitle2: {
1836
+ [vars.fontSize]: globalRefs.typography.subtitle2.size,
1837
+ [vars.fontWeight]: globalRefs.typography.subtitle2.weight,
1838
+ [vars.fontFamily]: globalRefs.typography.subtitle2.font
1839
+ },
1840
+ body1: {
1841
+ [vars.fontSize]: globalRefs.typography.body1.size,
1842
+ [vars.fontWeight]: globalRefs.typography.body1.weight,
1843
+ [vars.fontFamily]: globalRefs.typography.body1.font
1844
+ },
1845
+ body2: {
1846
+ [vars.fontSize]: globalRefs.typography.body2.size,
1847
+ [vars.fontWeight]: globalRefs.typography.body2.weight,
1848
+ [vars.fontFamily]: globalRefs.typography.body2.font
1849
+ }
1850
+ },
1851
+ mode: {
1852
+ primary: {
1853
+ [vars.color]: globalRefs.colors.primary.main
1854
+ },
1855
+ secondary: {
1856
+ [vars.color]: globalRefs.colors.secondary.main
1857
+ },
1858
+ error: {
1859
+ [vars.color]: globalRefs.colors.error.main
1860
+ },
1861
+ success: {
1862
+ [vars.color]: globalRefs.colors.success.main
1863
+ }
1864
+ },
1865
+ textAlign: {
1866
+ right: { [vars.textAlign]: 'right' },
1867
+ left: { [vars.textAlign]: 'left' },
1868
+ center: { [vars.textAlign]: 'center' }
1869
+ },
1870
+ _fullWidth: {
1871
+ [vars.width]: '100%',
1872
+ [vars.display]: 'block'
1873
+ },
1874
+ _italic: {
1875
+ [vars.fontStyle]: 'italic'
1876
+ }
1877
+ };
1878
+
1879
+ const componentName$1 = getComponentName('passcode-internal');
1880
+
1881
+ const componentName = getComponentName('passcode');
1882
+
1883
+ const customMixin = (superclass) =>
1884
+ class DraggableMixinClass extends superclass {
1885
+ constructor() {
1886
+ super();
1887
+ }
1888
+
1889
+ get digits() {
1890
+ return Number.parseInt(this.getAttribute('digits')) || 6
1891
+ }
1892
+
1893
+ connectedCallback() {
1894
+ super.connectedCallback?.();
1895
+ const template = document.createElement('template');
1896
+
1897
+ //forward required & pattern TODO use forwardAttrs
1898
+ template.innerHTML = `
1899
+ <${componentName$1}
1900
+ bordered="true"
1901
+ name="code"
1902
+ tabindex="0"
1903
+ slot="input"
1904
+ required="${this.shadowRoot.host.getAttribute('required')}"
1905
+ pattern="${this.shadowRoot.host.getAttribute('pattern')}"
1906
+ ></${componentName$1}>
1907
+ `;
1908
+
1909
+ // we are adding a slot under vaadin-text-field, it should reflect all descope-passcode children to be under vaadin-text-field, this is why it has a name & slot
1910
+ const slotEle = Object.assign(document.createElement('slot'), { name: 'input', slot: 'input', part: 'input' });
1911
+ this.proxyElement.appendChild(slotEle);
1912
+
1913
+ // we want to control when the element is out of focus
1914
+ // so the validations will be triggered blur event is dispatched from descope-passcode internal (and not every time focusing a digit)
1915
+ this.proxyElement._setFocused = () => { };
1916
+
1917
+ this.shadowRoot.host.appendChild(template.content.cloneNode(true));
1918
+ this.inputElement = this.querySelector(componentName$1);
1919
+
1920
+ // we want to trigger validation only when dispatching a blur event from the descope-passcode-internal
1921
+ this.inputElement.addEventListener('blur', () => {
1922
+ this.proxyElement.validate();
1923
+ });
1924
+ }
1925
+ };
1926
+
1927
+ const { borderStyle, borderWidth, ...restTextFieldMappings } = textFieldMappings;
1928
+
1929
+ const Passcode = compose(
1930
+ createStyleMixin({
1931
+ mappings: {
1932
+ ...restTextFieldMappings,
1933
+ },
1934
+ nestedMappings: {
1935
+ borderColor: {
1936
+ selector: ` ${TextField.componentName}`,
1937
+ property: TextField.cssVarList.borderColor
1938
+ }
1939
+ }
1940
+ }),
1941
+ draggableMixin,
1942
+ inputMixin,
1943
+ componentNameValidationMixin,
1944
+ customMixin
1945
+ )(
1946
+ createProxy({
1947
+ slots: [],
1948
+ wrappedEleName: 'vaadin-text-field',
1949
+ style: () => `
1950
+ :host {
1951
+ --vaadin-field-default-width: auto;
1952
+ }
1953
+
1954
+ ::slotted([slot='input']) {
1955
+ -webkit-mask-image: none;
1956
+ display: flex;
1957
+ gap: 2px;
1958
+ align-items: center;
1959
+ padding: 0;
1960
+ }
1961
+
1962
+ vaadin-text-field::part(input-field) {
1963
+ background-color: transparent;
1964
+ padding: 0;
1965
+ }
1966
+
1967
+ ${overrides}
1968
+ `,
1969
+ excludeAttrsSync: ['tabindex'],
1970
+ componentName
1971
+ })
1972
+ );
1973
+
1974
+ const overrides = `
1975
+ :host {
1976
+ display: inline-block;
1977
+ }
1978
+
1979
+ vaadin-text-field {
1980
+ margin: 0;
1981
+ padding: 0;
1982
+ }
1983
+ vaadin-text-field::part(input-field) {
1984
+ overflow: hidden;
1985
+ }
1986
+ vaadin-text-field[readonly] > input:placeholder-shown {
1987
+ opacity: 1;
1988
+ }
1989
+
1990
+ vaadin-text-field > label,
1991
+ vaadin-text-field::part(input-field) {
1992
+ cursor: pointer;
1993
+ color: var(${Passcode.cssVarList.color});
1994
+ }
1995
+ vaadin-text-field::part(input-field):focus {
1996
+ cursor: text;
1997
+ }
1998
+ vaadin-text-field[required]::part(required-indicator)::after {
1999
+ font-size: "12px";
2000
+ content: "*";
2001
+ color: var(${Passcode.cssVarList.color});
2002
+ }
2003
+ vaadin-text-field[readonly]::part(input-field)::after {
2004
+ border: 0 solid;
2005
+ }
2006
+ `;
2007
+
2008
+ const passcode = {
2009
+ ...textField(Passcode.cssVarList),
1708
2010
  };
1709
2011
 
1710
2012
  var components = {
@@ -1717,7 +2019,9 @@ var components = {
1717
2019
  checkbox,
1718
2020
  switchToggle: swtichToggle,
1719
2021
  container,
1720
- logo
2022
+ logo,
2023
+ text,
2024
+ passcode
1721
2025
  };
1722
2026
 
1723
2027
  var index = { globals, components };