@descope/web-components-ui 1.0.40 → 1.0.42

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.
Files changed (36) hide show
  1. package/dist/cjs/index.cjs.js +35 -18
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +416 -343
  4. package/dist/index.esm.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/components/descope-button/index.js +3 -3
  7. package/src/components/descope-checkbox/index.js +2 -2
  8. package/src/components/descope-combo/index.js +12 -12
  9. package/src/components/descope-container/Container.js +57 -51
  10. package/src/components/descope-container/index.js +1 -1
  11. package/src/components/descope-date-picker/index.js +13 -7
  12. package/src/components/descope-email-field/index.js +2 -2
  13. package/src/components/descope-number-field/index.js +2 -2
  14. package/src/components/descope-password-field/index.js +2 -2
  15. package/src/components/descope-switch-toggle/index.js +2 -2
  16. package/src/components/descope-text-area/index.js +2 -2
  17. package/src/components/descope-text-field/index.js +3 -3
  18. package/src/componentsHelpers/componentNameValidationMixin.js +21 -17
  19. package/src/componentsHelpers/createProxy/helpers.js +31 -27
  20. package/src/componentsHelpers/createStyleMixin/helpers.js +65 -47
  21. package/src/componentsHelpers/createStyleMixin/index.js +76 -55
  22. package/src/componentsHelpers/draggableMixin.js +25 -26
  23. package/src/constants.js +1 -1
  24. package/src/dev/index.js +4 -3
  25. package/src/helpers.js +8 -6
  26. package/src/index.cjs.js +1 -1
  27. package/src/index.js +13 -13
  28. package/src/index.umd.js +11 -5
  29. package/src/theme/components/button.js +37 -37
  30. package/src/theme/components/container.js +10 -12
  31. package/src/theme/components/textArea.js +3 -3
  32. package/src/theme/components/textField.js +1 -1
  33. package/src/theme/globals.js +44 -36
  34. package/src/theme/index.js +2 -2
  35. package/src/themeHelpers/index.js +45 -30
  36. package/src/themeHelpers/processColors.js +10 -7
package/dist/index.esm.js CHANGED
@@ -11,202 +11,247 @@ import Color from 'color';
11
11
 
12
12
  const DESCOPE_PREFIX = 'descope';
13
13
 
14
- const kebabCase = str => str
15
- .replace(/([a-z])([A-Z])/g, "$1-$2")
16
- .replace(/[\s_.]+/g, '-')
17
- .toLowerCase();
14
+ const kebabCase = (str) =>
15
+ str
16
+ .replace(/([a-z])([A-Z])/g, '$1-$2')
17
+ .replace(/[\s_.]+/g, '-')
18
+ .toLowerCase();
18
19
 
19
20
  const kebabCaseJoin = (...args) => kebabCase(args.join('-'));
20
21
 
21
- const getCssVarName = (...args) => `--${kebabCaseJoin(...args.filter(arg => !!arg))}`;
22
+ const getCssVarName = (...args) =>
23
+ `--${kebabCaseJoin(...args.filter((arg) => !!arg))}`;
22
24
 
23
- const createCssVarFallback = (first, ...rest) => `var(${first}${rest.length ? ` , ${createCssVarFallback(...rest)}` : ''})`;
25
+ const createCssVarFallback = (first, ...rest) =>
26
+ `var(${first}${rest.length ? ` , ${createCssVarFallback(...rest)}` : ''})`;
24
27
 
25
- const createCssSelector = (baseSelector = '', relativeSelectorOrSelectorFn = '') =>
26
- typeof relativeSelectorOrSelectorFn === 'function' ?
27
- relativeSelectorOrSelectorFn(baseSelector) :
28
- `${baseSelector}${relativeSelectorOrSelectorFn}`;
28
+ const createCssSelector = (
29
+ baseSelector = '',
30
+ relativeSelectorOrSelectorFn = ''
31
+ ) =>
32
+ typeof relativeSelectorOrSelectorFn === 'function'
33
+ ? relativeSelectorOrSelectorFn(baseSelector)
34
+ : `${baseSelector}${relativeSelectorOrSelectorFn}`;
29
35
 
30
36
  class StyleBuilder {
31
- constructor() {
32
- this.styleMap = new Map();
33
- }
34
-
35
- add(selector, property, value) {
36
- if (!this.styleMap.has(selector)) {
37
- this.styleMap.set(selector, []);
38
- }
39
-
40
- this.styleMap.set(selector, [...this.styleMap.get(selector), { property, value }]);
41
- }
42
-
43
- toString() {
44
- return Array.from(this.styleMap.entries()).reduce((style, [selector, propValArr]) =>
45
- style += `${selector} { \n${propValArr.map(({ property, value }) => `${property}: ${value}`).join(';\n')} \n}\n\n`
46
- , '')
47
- }
37
+ constructor() {
38
+ this.styleMap = new Map();
39
+ }
40
+
41
+ add(selector, property, value) {
42
+ if (!this.styleMap.has(selector)) {
43
+ this.styleMap.set(selector, []);
44
+ }
45
+
46
+ this.styleMap.set(selector, [
47
+ ...this.styleMap.get(selector),
48
+ { property, value }
49
+ ]);
50
+ }
51
+
52
+ toString() {
53
+ return Array.from(this.styleMap.entries()).reduce(
54
+ (style, [selector, propValArr]) =>
55
+ (style += `${selector} { \n${propValArr
56
+ .map(({ property, value }) => `${property}: ${value}`)
57
+ .join(';\n')} \n}\n\n`),
58
+ ''
59
+ );
60
+ }
48
61
  }
49
62
 
50
63
  const normalizeConfig = (attr, config) => {
51
- const defaultMapping = { selector: '', property: kebabCase(attr) };
64
+ const defaultMapping = { selector: '', property: kebabCase(attr) };
52
65
 
53
- if (!config || !Object.keys(config).length) return [defaultMapping];
66
+ if (!config || !Object.keys(config).length) return [defaultMapping];
54
67
 
55
- if (Array.isArray(config)) return config.map(entry => Object.assign({}, defaultMapping, entry));
68
+ if (Array.isArray(config))
69
+ return config.map((entry) => Object.assign({}, defaultMapping, entry));
56
70
 
57
- return [Object.assign({}, defaultMapping, config)];
71
+ return [Object.assign({}, defaultMapping, config)];
58
72
  };
59
73
 
60
74
  const createStyle = (componentName, baseSelector, mappings) => {
61
- const style = new StyleBuilder();
75
+ const style = new StyleBuilder();
62
76
 
63
- Object.keys(mappings).forEach((attr) => {
64
- const attrConfig = normalizeConfig(attr, mappings[attr]);
77
+ Object.keys(mappings).forEach((attr) => {
78
+ const attrConfig = normalizeConfig(attr, mappings[attr]);
65
79
 
66
- const cssVarName = getCssVarName(componentName, attr);
80
+ const cssVarName = getCssVarName(componentName, attr);
67
81
 
68
- attrConfig.forEach(({ selector: relativeSelectorOrSelectorFn, property }) => {
69
- style.add(
70
- createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
71
- property,
72
- createCssVarFallback(cssVarName)
73
- );
74
- });
75
- });
82
+ attrConfig.forEach(
83
+ ({ selector: relativeSelectorOrSelectorFn, property }) => {
84
+ style.add(
85
+ createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
86
+ property,
87
+ createCssVarFallback(cssVarName)
88
+ );
89
+ }
90
+ );
91
+ });
76
92
 
77
- return style.toString();
93
+ return style.toString();
78
94
  };
79
95
 
80
96
  const createCssVarsList = (componentName, mappings) =>
81
- Object.keys(mappings).reduce(
82
- (acc, attr) => Object.assign(acc, { [attr]: getCssVarName(componentName, attr) }),
83
- {}
84
- );
97
+ Object.keys(mappings).reduce(
98
+ (acc, attr) =>
99
+ Object.assign(acc, { [attr]: getCssVarName(componentName, attr) }),
100
+ {}
101
+ );
85
102
 
86
103
  // match the host selector with the inner element selector
87
104
  // e.g. when we want to set the same size for the host & the inner element this can be useful
88
- const matchHostStyle = (mappingObj) => [mappingObj, {...mappingObj, selector: () => `:host${mappingObj.selector || ''}`}];
89
-
90
- const createStyleMixin = ({ mappings = {} }) => (superclass) => {
91
- const styleAttributes = Object.keys(mappings).map(key => kebabCaseJoin('st', key));
92
- return class CustomStyleMixinClass extends superclass {
93
- static get observedAttributes() {
94
- const superAttrs = superclass.observedAttributes || [];
95
- return [...superAttrs, ...styleAttributes]
96
- }
97
-
98
- static get cssVarList() {
99
- return createCssVarsList(superclass.componentName, mappings)
100
- }
101
-
102
- #styleEle = null;
103
-
104
- constructor() {
105
- super();
106
-
107
- this.#createComponentStyle();
108
- this.#createAttrOverrideStyle();
109
- }
110
-
111
- #createAttrOverrideStyle() {
112
- this.#styleEle = document.createElement('style');
113
- this.#styleEle.id = 'style-mixin-overrides';
114
-
115
- this.#styleEle.innerText = '* {}';
116
- this.shadowRoot.prepend(this.#styleEle);
117
- }
118
-
119
- #updateAttrOverrideStyle(attrName, value) {
120
- const style = this.#styleEle.sheet.cssRules[0].style;
121
- const varName = getCssVarName(superclass.componentName, attrName.replace(/^st-/, ''));
122
-
123
- if (value)
124
- style.setProperty(varName, value);
125
- else
126
- style.removeProperty(varName);
127
- }
128
-
129
- #createComponentStyle() {
130
- const themeStyle = document.createElement('style');
131
- themeStyle.id = 'style-mixin-component';
132
- themeStyle.innerHTML = createStyle(superclass.componentName, this.baseSelector, mappings);
133
- this.shadowRoot.prepend(themeStyle);
134
- }
135
-
136
- attributeChangedCallback(attrName, oldValue, newValue) {
137
- super.attributeChangedCallback?.(attrName, oldValue, newValue);
138
-
139
- if (styleAttributes.includes(attrName)) {
140
- this.#updateAttrOverrideStyle(attrName, newValue);
141
- }
142
- }
143
- }
144
- };
105
+ const matchHostStyle = (mappingObj) => [
106
+ mappingObj,
107
+ { ...mappingObj, selector: () => `:host${mappingObj.selector || ''}` }
108
+ ];
109
+
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
+ }
121
+
122
+ static get cssVarList() {
123
+ return createCssVarsList(superclass.componentName, mappings);
124
+ }
125
+
126
+ #styleEle = null;
127
+
128
+ constructor() {
129
+ super();
130
+
131
+ this.#createComponentStyle();
132
+ this.#createAttrOverrideStyle();
133
+ }
134
+
135
+ #createAttrOverrideStyle() {
136
+ this.#styleEle = document.createElement('style');
137
+ this.#styleEle.id = 'style-mixin-overrides';
138
+
139
+ this.#styleEle.innerText = '* {}';
140
+ this.shadowRoot.prepend(this.#styleEle);
141
+ }
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
+ );
149
+
150
+ if (value) style.setProperty(varName, value);
151
+ else style.removeProperty(varName);
152
+ }
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
+ }
164
+
165
+ attributeChangedCallback(attrName, oldValue, newValue) {
166
+ super.attributeChangedCallback?.(attrName, oldValue, newValue);
167
+
168
+ if (styleAttributes.includes(attrName)) {
169
+ this.#updateAttrOverrideStyle(attrName, newValue);
170
+ }
171
+ }
172
+
173
+ // we need to see if this is needed
174
+ // connectedCallback() {
175
+ // super.connectedCallback?.();
176
+ // if (this.shadowRoot.isConnected) {
177
+ // Array.from(this.attributes).forEach(attr => {
178
+ // if (styleAttributes.includes(attr.nodeName)) {
179
+ // this.#updateAttrOverrideStyle(attr.nodeName, attr.value)
180
+ // }
181
+ // });
182
+ // }
183
+ // }
184
+ };
185
+ };
145
186
 
146
187
  const draggableMixin = (superclass) =>
147
- class DraggableMixinClass extends superclass {
148
-
149
- #styleEle = null;
150
-
151
- static get observedAttributes() {
152
- const superAttrs = superclass.observedAttributes || [];
153
- return [...superAttrs, 'draggable']
154
- }
155
-
156
- constructor() {
157
- super();
158
-
159
- this.#styleEle = document.createElement('style');
160
- this.#styleEle.innerText = `${this.baseSelector} { cursor: inherit }`;
161
- }
162
-
163
- #handleDraggableStyle(isDraggable) {
164
- if (isDraggable) {
165
- this.shadowRoot.appendChild(this.#styleEle);
166
- } else {
167
- this.#styleEle.remove();
168
- }
169
- }
170
-
171
- attributeChangedCallback(attrName, oldValue, newValue) {
172
- super.attributeChangedCallback?.(attrName, oldValue, newValue);
173
- if (attrName === 'draggable') {
174
- this.#handleDraggableStyle(newValue === 'true');
175
- }
176
- }
177
- };
188
+ class DraggableMixinClass extends superclass {
189
+ #styleEle = null;
190
+
191
+ static get observedAttributes() {
192
+ const superAttrs = superclass.observedAttributes || [];
193
+ return [...superAttrs, 'draggable'];
194
+ }
195
+
196
+ constructor() {
197
+ super();
198
+
199
+ this.#styleEle = document.createElement('style');
200
+ this.#styleEle.innerText = `${this.baseSelector} { cursor: inherit }`;
201
+ }
202
+
203
+ #handleDraggableStyle(isDraggable) {
204
+ if (isDraggable) {
205
+ this.shadowRoot.appendChild(this.#styleEle);
206
+ } else {
207
+ this.#styleEle.remove();
208
+ }
209
+ }
210
+
211
+ attributeChangedCallback(attrName, oldValue, newValue) {
212
+ super.attributeChangedCallback?.(attrName, oldValue, newValue);
213
+ if (attrName === 'draggable') {
214
+ this.#handleDraggableStyle(newValue === 'true');
215
+ }
216
+ }
217
+ };
178
218
 
179
219
  const observeAttributes = (ele, callback, excludeAttrs) => {
180
- // sync all attrs on init
181
- callback(...Array.from(ele.attributes).map(attr => attr.name));
182
-
183
- const observer = new MutationObserver((mutationsList) => {
184
- for (const mutation of mutationsList) {
185
- if (mutation.type === "attributes" && !excludeAttrs.includes(mutation.attributeName)) {
186
- callback(mutation.attributeName);
187
- }
188
- }
189
- });
190
-
191
- observer.observe(ele, { attributes: true });
192
- };
220
+ // sync all attrs on init
221
+ callback(...Array.from(ele.attributes).map((attr) => attr.name));
222
+
223
+ const observer = new MutationObserver((mutationsList) => {
224
+ for (const mutation of mutationsList) {
225
+ if (
226
+ mutation.type === 'attributes' &&
227
+ !excludeAttrs.includes(mutation.attributeName)
228
+ ) {
229
+ callback(mutation.attributeName);
230
+ }
231
+ }
232
+ });
193
233
 
194
- const createSyncAttrsCb = (srcEle, targetEle) => (...attrNames) => {
195
- attrNames.forEach(attrName => {
196
- const srcAttrVal = srcEle.getAttribute(attrName);
197
- if (srcAttrVal !== null) {
198
- if (targetEle.getAttribute(attrName) !== srcAttrVal) {
199
- targetEle.setAttribute(attrName, srcAttrVal);
200
- }
201
- } else {
202
- targetEle.removeAttribute(attrName);
203
- }
204
- });
234
+ observer.observe(ele, { attributes: true });
205
235
  };
206
236
 
237
+ const createSyncAttrsCb =
238
+ (srcEle, targetEle) =>
239
+ (...attrNames) => {
240
+ attrNames.forEach((attrName) => {
241
+ const srcAttrVal = srcEle.getAttribute(attrName);
242
+ if (srcAttrVal !== null) {
243
+ if (targetEle.getAttribute(attrName) !== srcAttrVal) {
244
+ targetEle.setAttribute(attrName, srcAttrVal);
245
+ }
246
+ } else {
247
+ targetEle.removeAttribute(attrName);
248
+ }
249
+ });
250
+ };
251
+
207
252
  const syncAttrs = (ele1, ele2, excludeAttrs) => {
208
- observeAttributes(ele1, createSyncAttrsCb(ele1, ele2), excludeAttrs);
209
- observeAttributes(ele2, createSyncAttrsCb(ele2, ele1), excludeAttrs);
253
+ observeAttributes(ele1, createSyncAttrsCb(ele1, ele2), excludeAttrs);
254
+ observeAttributes(ele2, createSyncAttrsCb(ele2, ele1), excludeAttrs);
210
255
  };
211
256
 
212
257
  const createProxy = ({
@@ -341,26 +386,30 @@ const inputMixin = (superclass) =>
341
386
  };
342
387
 
343
388
  const componentNameValidationMixin = (superclass) =>
344
- class DraggableMixinClass extends superclass {
345
- #checkComponentName() {
346
- const currentComponentName = this.shadowRoot.host.tagName.toLowerCase();
347
-
348
- if (!superclass.componentName) {
349
- throw Error(`component name is not defined on super class, make sure you have a static get for "componentName"`)
350
- }
351
-
352
- if (currentComponentName !== superclass.componentName) {
353
- throw Error(`component name mismatch, expected "${superclass.componentName}", current "${currentComponentName}"`)
354
- }
355
- }
356
-
357
- connectedCallback() {
358
- super.connectedCallback?.();
359
- if (this.shadowRoot.isConnected) {
360
- this.#checkComponentName();
361
- }
362
- }
363
- };
389
+ class DraggableMixinClass extends superclass {
390
+ #checkComponentName() {
391
+ const currentComponentName = this.shadowRoot.host.tagName.toLowerCase();
392
+
393
+ if (!superclass.componentName) {
394
+ throw Error(
395
+ `component name is not defined on super class, make sure you have a static get for "componentName"`
396
+ );
397
+ }
398
+
399
+ if (currentComponentName !== superclass.componentName) {
400
+ throw Error(
401
+ `component name mismatch, expected "${superclass.componentName}", current "${currentComponentName}"`
402
+ );
403
+ }
404
+ }
405
+
406
+ connectedCallback() {
407
+ super.connectedCallback?.();
408
+ if (this.shadowRoot.isConnected) {
409
+ this.#checkComponentName();
410
+ }
411
+ }
412
+ };
364
413
 
365
414
  const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
366
415
 
@@ -552,7 +601,7 @@ customElements.define(componentName$9, TextField);
552
601
 
553
602
  const template = document.createElement('template');
554
603
 
555
- const componentName$8 = getComponentName("combo");
604
+ const componentName$8 = getComponentName('combo');
556
605
 
557
606
  template.innerHTML = `
558
607
  <descope-button></descope-button>
@@ -560,13 +609,13 @@ template.innerHTML = `
560
609
  `;
561
610
 
562
611
  class Combo extends HTMLElement {
563
- constructor() {
564
- super();
612
+ constructor() {
613
+ super();
565
614
 
566
- this.attachShadow({ mode: 'open' }).appendChild(
567
- template.content.cloneNode(true)
568
- );
569
- }
615
+ this.attachShadow({ mode: 'open' }).appendChild(
616
+ template.content.cloneNode(true)
617
+ );
618
+ }
570
619
  }
571
620
 
572
621
  customElements.define(componentName$8, Combo);
@@ -822,7 +871,7 @@ overrides$1 = `
822
871
 
823
872
  customElements.define(componentName$4, TextArea);
824
873
 
825
- const componentName$3 = getComponentName("date-picker");
874
+ const componentName$3 = getComponentName('date-picker');
826
875
 
827
876
  const DatePicker = compose(
828
877
  draggableMixin,
@@ -830,66 +879,66 @@ const DatePicker = compose(
830
879
  )(
831
880
  createProxy({
832
881
  componentName: componentName$3,
833
- slots: ["prefix", "suffix"],
834
- wrappedEleName: "vaadin-date-picker",
835
- style: ``,
882
+ slots: ['prefix', 'suffix'],
883
+ wrappedEleName: 'vaadin-date-picker',
884
+ style: ``
836
885
  })
837
886
  );
838
887
 
839
888
  customElements.define(componentName$3, DatePicker);
840
889
 
841
- const componentName$2 = getComponentName("container");
890
+ const componentName$2 = getComponentName('container');
842
891
 
843
892
  class RawContainer extends HTMLElement {
844
- static get componentName() {
845
- return componentName$2
846
- }
847
- constructor() {
848
- super();
849
- const template = document.createElement('template');
850
- template.innerHTML = `<slot></slot>`;
851
-
852
- this.attachShadow({ mode: 'open' });
853
- this.shadowRoot.appendChild(template.content.cloneNode(true));
854
-
855
- this.baseSelector = ':host > slot';
856
- }
893
+ static get componentName() {
894
+ return componentName$2;
895
+ }
896
+ constructor() {
897
+ super();
898
+ const template = document.createElement('template');
899
+ template.innerHTML = `<slot></slot>`;
900
+
901
+ this.attachShadow({ mode: 'open' });
902
+ this.shadowRoot.appendChild(template.content.cloneNode(true));
903
+
904
+ this.baseSelector = ':host > slot';
905
+ }
857
906
  }
858
907
 
859
908
  const Container = compose(
860
- createStyleMixin({
861
- // todo: do we want to change the mapping structure to this? ['aa', 'aaa', {'color': [{ selector: '::part(label)' }]}],
862
- mappings: {
863
- 'height': {},
864
- 'width': {},
865
-
866
- 'verticalPadding': [
867
- { property: 'padding-top' },
868
- { property: 'padding-bottom' }
869
- ],
870
- 'horizontalPadding': [
871
- { property: 'padding-left' },
872
- { property: 'padding-right' }
873
- ],
874
-
875
- 'display': {},
876
- 'flexDirection': {},
877
- 'justifyContent': {},
878
- 'alignItems': {},
879
- 'gap': {},
880
-
881
- 'backgroundColor': {},
882
- 'borderRadius': {},
883
-
884
- 'borderColor': {},
885
- 'borderStyle': {},
886
- 'borderWidth': {},
887
-
888
- 'boxShadow': {},
889
- },
890
- }),
891
- draggableMixin,
892
- componentNameValidationMixin,
909
+ createStyleMixin({
910
+ // todo: do we want to change the mapping structure to this? ['aa', 'aaa', {'color': [{ selector: '::part(label)' }]}],
911
+ mappings: {
912
+ height: {},
913
+ width: {},
914
+
915
+ verticalPadding: [
916
+ { property: 'padding-top' },
917
+ { property: 'padding-bottom' }
918
+ ],
919
+ horizontalPadding: [
920
+ { property: 'padding-left' },
921
+ { property: 'padding-right' }
922
+ ],
923
+
924
+ display: {},
925
+ flexDirection: {},
926
+ justifyContent: {},
927
+ alignItems: {},
928
+ gap: {},
929
+
930
+ backgroundColor: {},
931
+ borderRadius: {},
932
+
933
+ borderColor: {},
934
+ borderStyle: {},
935
+ borderWidth: {},
936
+
937
+ boxShadow: {}
938
+ }
939
+ }),
940
+ draggableMixin,
941
+ componentNameValidationMixin
893
942
  )(RawContainer);
894
943
 
895
944
  customElements.define(componentName$2, Container);
@@ -906,21 +955,25 @@ const transformTheme = (theme, path, getTransformation) => {
906
955
  }, {});
907
956
  };
908
957
 
909
- const stringifyArray = (strArr) => strArr.map((str) => (str.includes(" ") ? `"${str}"` : str)).join(", ");
958
+ const stringifyArray = (strArr) =>
959
+ strArr.map((str) => (str.includes(' ') ? `"${str}"` : str)).join(', ');
910
960
 
911
961
  const themeToCSSVarsObj = (theme) =>
912
962
  transformTheme(theme, [], (path, val) => ({
913
- [getVarName(path)]: Array.isArray(val) ? stringifyArray(val) : val,
963
+ [getVarName(path)]: Array.isArray(val) ? stringifyArray(val) : val
914
964
  }));
915
965
 
916
966
  const getThemeRefs = (theme, prefix) =>
917
- transformTheme(theme, [], (path) => set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`));
967
+ transformTheme(theme, [], (path) =>
968
+ set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
969
+ );
918
970
 
919
971
  const globalsThemeToStyle = (theme, themeName = '') => `
920
972
  *[data-theme="${themeName}"] {
921
973
  ${Object.entries(themeToCSSVarsObj(theme)).reduce(
922
- (acc, entry) => (acc += `${entry.join(":")};\n`), ''
923
- )}
974
+ (acc, entry) => (acc += `${entry.join(':')};\n`),
975
+ ''
976
+ )}
924
977
  }
925
978
  `;
926
979
 
@@ -933,16 +986,22 @@ const componentsThemeToStyleObj = (componentsTheme) =>
933
986
  // starts with underscore -> attribute selector
934
987
 
935
988
  const attrsSelector = restPath.reduce((acc, section, idx) => {
936
- if (section.startsWith('_')) return acc += `[${kebabCase(section.replace(/^_/, ''))}]`;
989
+ if (section.startsWith('_'))
990
+ return (acc += `[${kebabCase(section.replace(/^_/, ''))}="true"]`);
937
991
 
938
992
  const nextSection = restPath[idx + 1];
939
993
 
940
994
  if (typeof nextSection !== 'string' || nextSection.startsWith('_')) {
941
- console.error('theme generator', `your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`);
995
+ console.error(
996
+ 'theme generator',
997
+ `your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`
998
+ );
942
999
  return acc;
943
1000
  }
944
1001
 
945
- return acc += `[${kebabCase(section)}="${restPath.splice(idx + 1, 1).join('')}"]`;
1002
+ return (acc += `[${kebabCase(section)}="${restPath
1003
+ .splice(idx + 1, 1)
1004
+ .join('')}"]`);
946
1005
  }, '');
947
1006
 
948
1007
  let selector = `${getComponentName(component)}${attrsSelector}`;
@@ -951,12 +1010,17 @@ const componentsThemeToStyleObj = (componentsTheme) =>
951
1010
  [selector]: {
952
1011
  [property]: val
953
1012
  }
954
- }
1013
+ };
955
1014
  });
956
1015
 
957
1016
  const componentsThemeToStyle = (componentsTheme, themeName = '') =>
958
1017
  Object.entries(componentsThemeToStyleObj(componentsTheme)).reduce(
959
- (acc, [selector, vars]) => (acc += `*[data-theme="${themeName}"] ${selector} { \n${Object.entries(vars).map(([key, val]) => `${key}: ${val}`).join(';\n')} \n}\n\n`),
1018
+ (acc, [selector, vars]) =>
1019
+ (acc += `*[data-theme="${themeName}"] ${selector} { \n${Object.entries(
1020
+ vars
1021
+ )
1022
+ .map(([key, val]) => `${key}: ${val}`)
1023
+ .join(';\n')} \n}\n\n`),
960
1024
  ''
961
1025
  );
962
1026
 
@@ -965,7 +1029,7 @@ ${globalsThemeToStyle(globals, themeName)}
965
1029
  ${componentsThemeToStyle(components, themeName)}
966
1030
  `;
967
1031
 
968
- const useVar = varName => `var(${varName})`;
1032
+ const useVar = (varName) => `var(${varName})`;
969
1033
 
970
1034
  const createHelperVars = (theme, prefix) => {
971
1035
  const res = transformTheme(theme, [], (path, value) => {
@@ -977,17 +1041,20 @@ const createHelperVars = (theme, prefix) => {
977
1041
  const theme = set({}, [...modifiedPath, varName], value);
978
1042
  const useVars = { [property]: useVar(varName) };
979
1043
 
980
- return { theme, useVars, vars }
1044
+ return { theme, useVars, vars };
981
1045
  });
982
1046
 
983
- return [res.theme, res.useVars, res.vars]
1047
+ return [res.theme, res.useVars, res.vars];
984
1048
  };
985
1049
 
986
1050
  const genDark = (c, percentage = 0.5) => c.darken(percentage).hex();
987
1051
  const genLight = (c, percentage = 0.5) => c.lighten(percentage).hex();
988
1052
  const genContrast = (c, percentage = 0.9) => {
989
1053
  const isDark = c.isDark();
990
- return c.mix(Color(isDark ? 'white' : 'black'), percentage).saturate(1).hex();
1054
+ return c
1055
+ .mix(Color(isDark ? 'white' : 'black'), percentage)
1056
+ .saturate(1)
1057
+ .hex();
991
1058
  };
992
1059
 
993
1060
  const genColor = (color) => {
@@ -997,8 +1064,8 @@ const genColor = (color) => {
997
1064
  main: mainColor.hex(),
998
1065
  dark: color.dark || genDark(mainColor),
999
1066
  light: color.light || genLight(mainColor),
1000
- contrast: color.contrast || genContrast(mainColor),
1001
- }
1067
+ contrast: color.contrast || genContrast(mainColor)
1068
+ };
1002
1069
  };
1003
1070
 
1004
1071
  const genColors = (colors) => {
@@ -1006,68 +1073,76 @@ const genColors = (colors) => {
1006
1073
  const currentColor = colors[colorName];
1007
1074
 
1008
1075
  return Object.assign(acc, {
1009
- [colorName]: genColor(currentColor),
1010
- })
1076
+ [colorName]: genColor(currentColor)
1077
+ });
1011
1078
  }, {});
1012
1079
  };
1013
1080
 
1014
1081
  const colors = genColors({
1015
1082
  surface: {
1016
- main: "lightgray",
1017
- light: "#fff",
1018
- dark: "#000",
1083
+ main: 'lightgray',
1084
+ light: '#fff',
1085
+ dark: '#000'
1019
1086
  },
1020
- primary: "#0082B5",
1021
- secondary: "#7D14EB",
1022
- success: "green",
1023
- error: "red",
1087
+ primary: '#0082B5',
1088
+ secondary: '#7D14EB',
1089
+ success: 'green',
1090
+ error: 'red'
1024
1091
  });
1025
1092
 
1026
1093
  const typography = {
1027
1094
  h1: {
1028
- font: ["Courier New", "Arial", "sans-serif"],
1029
- weight: "700",
1030
- size: "48px",
1095
+ font: ['Courier New', 'Arial', 'sans-serif'],
1096
+ weight: '700',
1097
+ size: '48px'
1031
1098
  },
1032
1099
  h2: {
1033
- font: ["Courier New", "sans-serif"],
1034
- weight: "500",
1035
- size: "38px",
1100
+ font: ['Courier New', 'sans-serif'],
1101
+ weight: '500',
1102
+ size: '38px'
1036
1103
  },
1037
1104
  h3: {
1038
- font: ["Courier New", "sans-serif"],
1039
- weight: "300",
1040
- size: "28px",
1041
- },
1105
+ font: ['Courier New', 'sans-serif'],
1106
+ weight: '300',
1107
+ size: '28px'
1108
+ }
1042
1109
  };
1043
1110
 
1044
1111
  const spacing = {
1045
- xs: "2px",
1046
- sm: "4px",
1047
- md: "8px",
1048
- lg: "16px",
1049
- xl: "32px",
1112
+ xs: '2px',
1113
+ sm: '4px',
1114
+ md: '8px',
1115
+ lg: '16px',
1116
+ xl: '32px'
1050
1117
  };
1051
1118
 
1052
1119
  const border = {
1053
- sm: "1px",
1054
- md: "2px",
1055
- lg: "3px",
1120
+ sm: '1px',
1121
+ md: '2px',
1122
+ lg: '3px'
1056
1123
  };
1057
1124
 
1058
1125
  const radius = {
1059
- sm: "5px",
1060
- md: "25px",
1061
- lg: "50px",
1126
+ sm: '5px',
1127
+ md: '25px',
1128
+ lg: '50px'
1062
1129
  };
1063
1130
 
1064
1131
  const shadow = {
1065
- color: colors.primary.main,
1066
- size: {
1067
- sm: `0 0 10px`,
1068
- md: `0 0 20px`,
1069
- lg: `0 0 30px`,
1070
- },
1132
+ wide: {
1133
+ sm: '0 2px 3px -0.5px',
1134
+ md: '0 4px 6px -1px',
1135
+ lg: '0 10px 15px -3px',
1136
+ xl: '0 20px 25px -5px',
1137
+ '2xl': '0 25px 50px -12px',
1138
+ },
1139
+ narrow: {
1140
+ sm: '0 1px 2px -1px',
1141
+ md: '0 2px 4px -2px',
1142
+ lg: '0 4px 6px -4px',
1143
+ xl: '0 8px 10px -6px',
1144
+ '2xl': '0 16px 16px -8px',
1145
+ }
1071
1146
  };
1072
1147
 
1073
1148
  var globals = {
@@ -1076,7 +1151,7 @@ var globals = {
1076
1151
  spacing,
1077
1152
  border,
1078
1153
  radius,
1079
- shadow,
1154
+ shadow
1080
1155
  };
1081
1156
 
1082
1157
  const globalRefs$3 = getThemeRefs(globals);
@@ -1087,7 +1162,7 @@ const mode = {
1087
1162
  secondary: globalRefs$3.colors.secondary,
1088
1163
  success: globalRefs$3.colors.success,
1089
1164
  error: globalRefs$3.colors.error,
1090
- surface: globalRefs$3.colors.surface,
1165
+ surface: globalRefs$3.colors.surface
1091
1166
  };
1092
1167
 
1093
1168
  const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$a);
@@ -1097,43 +1172,43 @@ const button = {
1097
1172
 
1098
1173
  size: {
1099
1174
  xs: {
1100
- [vars$6.height]: "10px",
1101
- [vars$6.fontSize]: "10px",
1102
- [vars$6.padding]: `0 ${globalRefs$3.spacing.xs}`,
1175
+ [vars$6.height]: '10px',
1176
+ [vars$6.fontSize]: '10px',
1177
+ [vars$6.padding]: `0 ${globalRefs$3.spacing.xs}`
1103
1178
  },
1104
1179
  sm: {
1105
- [vars$6.height]: "20px",
1106
- [vars$6.fontSize]: "10px",
1107
- [vars$6.padding]: `0 ${globalRefs$3.spacing.sm}`,
1180
+ [vars$6.height]: '20px',
1181
+ [vars$6.fontSize]: '10px',
1182
+ [vars$6.padding]: `0 ${globalRefs$3.spacing.sm}`
1108
1183
  },
1109
1184
  md: {
1110
- [vars$6.height]: "30px",
1111
- [vars$6.fontSize]: "14px",
1112
- [vars$6.padding]: `0 ${globalRefs$3.spacing.md}`,
1185
+ [vars$6.height]: '30px',
1186
+ [vars$6.fontSize]: '14px',
1187
+ [vars$6.padding]: `0 ${globalRefs$3.spacing.md}`
1113
1188
  },
1114
1189
  lg: {
1115
- [vars$6.height]: "40px",
1116
- [vars$6.fontSize]: "20px",
1117
- [vars$6.padding]: `0 ${globalRefs$3.spacing.lg}`,
1190
+ [vars$6.height]: '40px',
1191
+ [vars$6.fontSize]: '20px',
1192
+ [vars$6.padding]: `0 ${globalRefs$3.spacing.lg}`
1118
1193
  },
1119
1194
  xl: {
1120
- [vars$6.height]: "50px",
1121
- [vars$6.fontSize]: "25px",
1122
- [vars$6.padding]: `0 ${globalRefs$3.spacing.xl}`,
1123
- },
1195
+ [vars$6.height]: '50px',
1196
+ [vars$6.fontSize]: '25px',
1197
+ [vars$6.padding]: `0 ${globalRefs$3.spacing.xl}`
1198
+ }
1124
1199
  },
1125
1200
 
1126
1201
  [vars$6.borderRadius]: globalRefs$3.radius.lg,
1127
- [vars$6.cursor]: "pointer",
1128
- [vars$6.borderWidth]: "2px",
1129
- [vars$6.borderStyle]: "solid",
1130
- [vars$6.borderColor]: "transparent",
1202
+ [vars$6.cursor]: 'pointer',
1203
+ [vars$6.borderWidth]: '2px',
1204
+ [vars$6.borderStyle]: 'solid',
1205
+ [vars$6.borderColor]: 'transparent',
1131
1206
 
1132
- _fullwidth: {
1133
- [vars$6.width]: "100%",
1207
+ _fullWidth: {
1208
+ [vars$6.width]: '100%'
1134
1209
  },
1135
1210
  _loading: {
1136
- [vars$6.cursor]: "wait",
1211
+ [vars$6.cursor]: 'wait'
1137
1212
  },
1138
1213
 
1139
1214
  variant: {
@@ -1141,11 +1216,11 @@ const button = {
1141
1216
  [vars$6.color]: helperRefs$1.contrast,
1142
1217
  [vars$6.backgroundColor]: helperRefs$1.main,
1143
1218
  _hover: {
1144
- [vars$6.backgroundColor]: helperRefs$1.dark,
1219
+ [vars$6.backgroundColor]: helperRefs$1.dark
1145
1220
  },
1146
1221
  _loading: {
1147
- [vars$6.backgroundColor]: helperRefs$1.main,
1148
- },
1222
+ [vars$6.backgroundColor]: helperRefs$1.main
1223
+ }
1149
1224
  },
1150
1225
  outline: {
1151
1226
  [vars$6.color]: helperRefs$1.main,
@@ -1154,9 +1229,9 @@ const button = {
1154
1229
  [vars$6.color]: helperRefs$1.dark,
1155
1230
  [vars$6.borderColor]: helperRefs$1.dark,
1156
1231
  _error: {
1157
- [vars$6.color]: helperRefs$1.error,
1158
- },
1159
- },
1232
+ [vars$6.color]: helperRefs$1.error
1233
+ }
1234
+ }
1160
1235
  },
1161
1236
  link: {
1162
1237
  [vars$6.color]: helperRefs$1.main,
@@ -1166,10 +1241,10 @@ const button = {
1166
1241
  [vars$6.borderRadius]: 0,
1167
1242
  _hover: {
1168
1243
  [vars$6.color]: helperRefs$1.main,
1169
- [vars$6.textDecoration]: "underline",
1170
- },
1171
- },
1172
- },
1244
+ [vars$6.textDecoration]: 'underline'
1245
+ }
1246
+ }
1247
+ }
1173
1248
  };
1174
1249
 
1175
1250
  const globalRefs$2 = getThemeRefs(globals);
@@ -1231,7 +1306,7 @@ const textField = (vars) => ({
1231
1306
  [vars.backgroundColor]: globalRefs$2.colors.surface.main
1232
1307
  },
1233
1308
 
1234
- _fullwidth: {
1309
+ _fullWidth: {
1235
1310
  [vars.width]: '100%'
1236
1311
  },
1237
1312
 
@@ -1274,12 +1349,12 @@ const textArea = {
1274
1349
  [vars$3.borderStyle]: 'solid',
1275
1350
  [vars$3.borderColor]: 'transparent',
1276
1351
 
1277
- _borderoffset: {
1352
+ _borderOffset: {
1278
1353
  [vars$3.outlineOffset]: '2px'
1279
1354
  },
1280
1355
 
1281
1356
  _bordered: {
1282
- [vars$3.inputBorderColor]: globalRefs$1.colors.surface.main
1357
+ [vars$3.borderColor]: globalRefs$1.colors.surface.main
1283
1358
  },
1284
1359
 
1285
1360
  _focused: {
@@ -1287,7 +1362,7 @@ const textArea = {
1287
1362
  [vars$3.outline]: `2px solid ${globalRefs$1.colors.surface.main}`
1288
1363
  },
1289
1364
 
1290
- _fullwidth: {
1365
+ _fullWidth: {
1291
1366
  [vars$3.width]: '100%'
1292
1367
  },
1293
1368
 
@@ -1421,10 +1496,8 @@ const horizontalAlignment = {
1421
1496
  end: { horizontalAlignment: 'end' }
1422
1497
  };
1423
1498
 
1424
- const [helperTheme, helperRefs, helperVars] = createHelperVars(
1425
- { verticalAlignment, horizontalAlignment },
1426
- 'container'
1427
- );
1499
+ const [helperTheme, helperVars, helperRefs] =
1500
+ createHelperVars({ verticalAlignment, horizontalAlignment }, 'container');
1428
1501
 
1429
1502
  const container = {
1430
1503
  ...helperTheme,
@@ -1475,15 +1548,15 @@ const container = {
1475
1548
  },
1476
1549
 
1477
1550
  shadow: {
1478
- sm: {
1479
- [vars.boxShadow]: `${globalRefs.shadow.size.sm} ${globalRefs.shadow.color}`
1551
+ sm: {
1552
+ [vars.boxShadow]: `${globalRefs.shadow.size.sm} ${globalRefs.shadow.color}`
1553
+ },
1554
+ md: {
1555
+ [vars.boxShadow]: `${globalRefs.shadow.size.md} ${globalRefs.shadow.color}`
1556
+ },
1557
+ lg: {
1558
+ [vars.boxShadow]: `${globalRefs.shadow.size.lg} ${globalRefs.shadow.color}`
1480
1559
  },
1481
- md: {
1482
- [vars.boxShadow]: `${globalRefs.shadow.size.md} ${globalRefs.shadow.color}`
1483
- },
1484
- lg: {
1485
- [vars.boxShadow]: `${globalRefs.shadow.size.lg} ${globalRefs.shadow.color}`
1486
- }
1487
1560
  },
1488
1561
 
1489
1562
  borderRadius: {