@utrecht/web-component-library-stencil 1.0.0-alpha.196 → 1.0.0-alpha.199

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 (63) hide show
  1. package/dist/cjs/utrecht-breadcrumb.cjs.entry.js +1 -1
  2. package/dist/cjs/utrecht-button_2.cjs.entry.js +1 -1
  3. package/dist/cjs/utrecht-checkbox.cjs.entry.js +1 -1
  4. package/dist/cjs/utrecht-contact-card-template.cjs.entry.js +1 -1
  5. package/dist/cjs/utrecht-custom-checkbox.cjs.entry.js +1 -1
  6. package/dist/cjs/utrecht-form-field-checkbox.cjs.entry.js +1 -1
  7. package/dist/cjs/utrecht-form-field-textarea.cjs.entry.js +1 -1
  8. package/dist/cjs/utrecht-form-field-textbox.cjs.entry.js +1 -1
  9. package/dist/cjs/utrecht-heading-2_3.cjs.entry.js +6 -6
  10. package/dist/cjs/utrecht-html-content.cjs.entry.js +1 -1
  11. package/dist/cjs/utrecht-pagination.cjs.entry.js +1 -1
  12. package/dist/cjs/utrecht-sidenav.cjs.entry.js +1 -1
  13. package/dist/cjs/utrecht-textbox.cjs.entry.js +1 -1
  14. package/dist/collection/breadcrumb/stencil.css +1 -1
  15. package/dist/collection/button/stencil.css +1 -1
  16. package/dist/collection/checkbox/stencil.css +2 -2
  17. package/dist/collection/collection-manifest.json +1 -1
  18. package/dist/collection/custom-checkbox/stencil.css +4 -4
  19. package/dist/collection/form-field-checkbox/stencil.css +2 -2
  20. package/dist/collection/form-field-textarea/stencil.css +1 -1
  21. package/dist/collection/form-field-textbox/stencil.css +1 -1
  22. package/dist/collection/html-content/stencil.css +7 -7
  23. package/dist/collection/navigatie sidenav/bem.css +1 -1
  24. package/dist/collection/pagination/stencil.css +1 -1
  25. package/dist/collection/paragraph/{bem.js → css/template.js} +5 -0
  26. package/dist/collection/paragraph/html/template.js +11 -0
  27. package/dist/collection/paragraph/{stencil.css → web-component/index.css} +0 -0
  28. package/dist/collection/paragraph/{stencil.js → web-component/index.stencil.js} +2 -2
  29. package/dist/collection/paragraph/web-component/template.js +12 -0
  30. package/dist/collection/templates/contact-card-template/stencil.css +1 -1
  31. package/dist/collection/textbox/stencil.css +1 -1
  32. package/dist/custom-elements/index.js +120 -120
  33. package/dist/esm/utrecht-breadcrumb.entry.js +1 -1
  34. package/dist/esm/utrecht-button_2.entry.js +1 -1
  35. package/dist/esm/utrecht-checkbox.entry.js +1 -1
  36. package/dist/esm/utrecht-contact-card-template.entry.js +1 -1
  37. package/dist/esm/utrecht-custom-checkbox.entry.js +1 -1
  38. package/dist/esm/utrecht-form-field-checkbox.entry.js +1 -1
  39. package/dist/esm/utrecht-form-field-textarea.entry.js +1 -1
  40. package/dist/esm/utrecht-form-field-textbox.entry.js +1 -1
  41. package/dist/esm/utrecht-heading-2_3.entry.js +6 -6
  42. package/dist/esm/utrecht-html-content.entry.js +1 -1
  43. package/dist/esm/utrecht-pagination.entry.js +1 -1
  44. package/dist/esm/utrecht-sidenav.entry.js +1 -1
  45. package/dist/esm/utrecht-textbox.entry.js +1 -1
  46. package/dist/types/paragraph/{stencil.d.ts → web-component/index.stencil.d.ts} +0 -0
  47. package/dist/utrecht/p-0bd956aa.entry.js +1 -0
  48. package/dist/utrecht/p-206407ec.entry.js +1 -0
  49. package/dist/utrecht/{p-bace480b.entry.js → p-24f6df95.entry.js} +1 -1
  50. package/dist/utrecht/{p-8422d09c.entry.js → p-494a2de2.entry.js} +1 -1
  51. package/dist/utrecht/{p-62c9e7c0.entry.js → p-52b840b4.entry.js} +1 -1
  52. package/dist/utrecht/{p-cc6ea231.entry.js → p-7a694b68.entry.js} +1 -1
  53. package/dist/utrecht/{p-f43fc7ea.entry.js → p-aa7f0306.entry.js} +1 -1
  54. package/dist/utrecht/{p-0efec1ca.entry.js → p-c1cefe13.entry.js} +1 -1
  55. package/dist/utrecht/{p-7c4f1d4e.entry.js → p-c7c1b303.entry.js} +1 -1
  56. package/dist/utrecht/{p-84188382.entry.js → p-cf06abf1.entry.js} +1 -1
  57. package/dist/utrecht/{p-332a8b95.entry.js → p-e425fabc.entry.js} +1 -1
  58. package/dist/utrecht/p-f430397a.entry.js +1 -0
  59. package/dist/utrecht/utrecht.esm.js +1 -1
  60. package/package.json +2 -2
  61. package/dist/utrecht/p-29dedac9.entry.js +0 -1
  62. package/dist/utrecht/p-83d1b80d.entry.js +0 -1
  63. package/dist/utrecht/p-df7b5348.entry.js +0 -1
package/dist/collection/button/stencil.css CHANGED
@@ -70,7 +70,7 @@
70
70
  /* the pseudo-class for `:focus-visible` is implemented via the mixin */
71
71
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
72
72
  outline-color: var(--utrecht-focus-outline-color, transparent);
73
- outline-offset: 0;
73
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
74
74
  outline-style: var(--utrecht-focus-outline-style, solid);
75
75
  outline-width: var(--utrecht-focus-outline-width, 0);
76
76
  }
package/dist/collection/checkbox/stencil.css CHANGED
@@ -28,7 +28,7 @@
28
28
  .utrecht-checkbox--focus-visible {
29
29
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
30
30
  outline-color: var(--utrecht-focus-outline-color, transparent);
31
- outline-offset: 0;
31
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
32
32
  outline-style: var(--utrecht-focus-outline-style, solid);
33
33
  outline-width: var(--utrecht-focus-outline-width, 0);
34
34
  }
@@ -36,7 +36,7 @@
36
36
  .utrecht-checkbox--html-input:focus {
37
37
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
38
38
  outline-color: var(--utrecht-focus-outline-color, transparent);
39
- outline-offset: 0;
39
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
40
40
  outline-style: var(--utrecht-focus-outline-style, solid);
41
41
  outline-width: var(--utrecht-focus-outline-width, 0);
42
42
  }
package/dist/collection/collection-manifest.json CHANGED
@@ -58,7 +58,7 @@
58
58
  "./page-footer/stencil.js",
59
59
  "./page-header/stencil.js",
60
60
  "./pagination/stencil.js",
61
- "./paragraph/stencil.js",
61
+ "./paragraph/web-component/index.stencil.js",
62
62
  "./separator/stencil.js",
63
63
  "./templates/contact-card-template/stencil.js",
64
64
  "./textbox/stencil.js"
package/dist/collection/custom-checkbox/stencil.css CHANGED
@@ -32,7 +32,7 @@
32
32
  .utrecht-checkbox--focus-visible {
33
33
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
34
34
  outline-color: var(--utrecht-focus-outline-color, transparent);
35
- outline-offset: 0;
35
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
36
36
  outline-style: var(--utrecht-focus-outline-style, solid);
37
37
  outline-width: var(--utrecht-focus-outline-width, 0);
38
38
  }
@@ -40,7 +40,7 @@
40
40
  .utrecht-checkbox--html-input:focus {
41
41
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
42
42
  outline-color: var(--utrecht-focus-outline-color, transparent);
43
- outline-offset: 0;
43
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
44
44
  outline-style: var(--utrecht-focus-outline-style, solid);
45
45
  outline-width: var(--utrecht-focus-outline-width, 0);
46
46
  }
@@ -143,7 +143,7 @@
143
143
  .utrecht-custom-checkbox__box--focus-visible {
144
144
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
145
145
  outline-color: var(--utrecht-focus-outline-color, transparent);
146
- outline-offset: 0;
146
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
147
147
  outline-style: var(--utrecht-focus-outline-style, solid);
148
148
  outline-width: var(--utrecht-focus-outline-width, 0);
149
149
  }
@@ -151,7 +151,7 @@
151
151
  .utrecht-custom-checkbox__input:focus ~ .utrecht-custom-checkbox__box {
152
152
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
153
153
  outline-color: var(--utrecht-focus-outline-color, transparent);
154
- outline-offset: 0;
154
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
155
155
  outline-style: var(--utrecht-focus-outline-style, solid);
156
156
  outline-width: var(--utrecht-focus-outline-width, 0);
157
157
  }
package/dist/collection/form-field-checkbox/stencil.css CHANGED
@@ -79,7 +79,7 @@
79
79
  .utrecht-checkbox--focus-visible {
80
80
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
81
81
  outline-color: var(--utrecht-focus-outline-color, transparent);
82
- outline-offset: 0;
82
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
83
83
  outline-style: var(--utrecht-focus-outline-style, solid);
84
84
  outline-width: var(--utrecht-focus-outline-width, 0);
85
85
  }
@@ -87,7 +87,7 @@
87
87
  .utrecht-checkbox--html-input:focus {
88
88
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
89
89
  outline-color: var(--utrecht-focus-outline-color, transparent);
90
- outline-offset: 0;
90
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
91
91
  outline-style: var(--utrecht-focus-outline-style, solid);
92
92
  outline-width: var(--utrecht-focus-outline-width, 0);
93
93
  }
package/dist/collection/form-field-textarea/stencil.css CHANGED
@@ -98,7 +98,7 @@
98
98
  .utrecht-textarea--focus-visible, .utrecht-textarea--html-textarea:focus {
99
99
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
100
100
  outline-color: var(--utrecht-focus-outline-color, transparent);
101
- outline-offset: 0;
101
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
102
102
  outline-style: var(--utrecht-focus-outline-style, solid);
103
103
  outline-width: var(--utrecht-focus-outline-width, 0);
104
104
  }
package/dist/collection/form-field-textbox/stencil.css CHANGED
@@ -90,7 +90,7 @@
90
90
  .utrecht-textbox--focus-visible, .utrecht-textbox--html-input:focus {
91
91
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
92
92
  outline-color: var(--utrecht-focus-outline-color, transparent);
93
- outline-offset: 0;
93
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
94
94
  outline-style: var(--utrecht-focus-outline-style, solid);
95
95
  outline-width: var(--utrecht-focus-outline-width, 0);
96
96
  }
package/dist/collection/html-content/stencil.css CHANGED
@@ -143,7 +143,7 @@
143
143
  /* the pseudo-class for `:focus-visible` is implemented via the mixin */
144
144
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
145
145
  outline-color: var(--utrecht-focus-outline-color, transparent);
146
- outline-offset: 0;
146
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
147
147
  outline-style: var(--utrecht-focus-outline-style, solid);
148
148
  outline-width: var(--utrecht-focus-outline-width, 0);
149
149
  }
@@ -211,7 +211,7 @@
211
211
  .utrecht-checkbox--focus-visible {
212
212
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
213
213
  outline-color: var(--utrecht-focus-outline-color, transparent);
214
- outline-offset: 0;
214
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
215
215
  outline-style: var(--utrecht-focus-outline-style, solid);
216
216
  outline-width: var(--utrecht-focus-outline-width, 0);
217
217
  }
@@ -219,7 +219,7 @@
219
219
  .utrecht-checkbox--html-input:focus, .utrecht-html input[type=checkbox i]:focus {
220
220
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
221
221
  outline-color: var(--utrecht-focus-outline-color, transparent);
222
- outline-offset: 0;
222
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
223
223
  outline-style: var(--utrecht-focus-outline-style, solid);
224
224
  outline-width: var(--utrecht-focus-outline-width, 0);
225
225
  }
@@ -606,7 +606,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
606
606
  .utrecht-link--focus-visible, .utrecht-html a:focus, .utrecht-link:focus {
607
607
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
608
608
  outline-color: var(--utrecht-focus-outline-color, transparent);
609
- outline-offset: 0;
609
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
610
610
  outline-style: var(--utrecht-focus-outline-style, solid);
611
611
  outline-width: var(--utrecht-focus-outline-width, 0);
612
612
  }
@@ -723,7 +723,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
723
723
  .utrecht-radio-button--focus-visible, .utrecht-radio-button--html-input:focus, .utrecht-html input[type=radio i]:focus {
724
724
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
725
725
  outline-color: var(--utrecht-focus-outline-color, transparent);
726
- outline-offset: 0;
726
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
727
727
  outline-style: var(--utrecht-focus-outline-style, solid);
728
728
  outline-width: var(--utrecht-focus-outline-width, 0);
729
729
  }
@@ -915,7 +915,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
915
915
  .utrecht-textarea--focus-visible, .utrecht-textarea--html-textarea:focus, .utrecht-html textarea:focus {
916
916
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
917
917
  outline-color: var(--utrecht-focus-outline-color, transparent);
918
- outline-offset: 0;
918
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
919
919
  outline-style: var(--utrecht-focus-outline-style, solid);
920
920
  outline-width: var(--utrecht-focus-outline-width, 0);
921
921
  }
@@ -1063,7 +1063,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1063
1063
  .utrecht-html input[type=week i]:focus {
1064
1064
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1065
1065
  outline-color: var(--utrecht-focus-outline-color, transparent);
1066
- outline-offset: 0;
1066
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
1067
1067
  outline-style: var(--utrecht-focus-outline-style, solid);
1068
1068
  outline-width: var(--utrecht-focus-outline-width, 0);
1069
1069
  }
package/dist/collection/navigatie sidenav/bem.css CHANGED
@@ -81,7 +81,7 @@
81
81
  .utrecht-sidenav__link--focus-visible, .utrecht-sidenav__link:focus {
82
82
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
83
83
  outline-color: var(--utrecht-focus-outline-color, transparent);
84
- outline-offset: 0;
84
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
85
85
  outline-style: var(--utrecht-focus-outline-style, solid);
86
86
  outline-width: var(--utrecht-focus-outline-width, 0);
87
87
  }
package/dist/collection/pagination/stencil.css CHANGED
@@ -97,7 +97,7 @@
97
97
  .utrecht-pagination__relative-link:focus {
98
98
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
99
99
  outline-color: var(--utrecht-focus-outline-color, transparent);
100
- outline-offset: 0;
100
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
101
101
  outline-style: var(--utrecht-focus-outline-style, solid);
102
102
  outline-width: var(--utrecht-focus-outline-width, 0);
103
103
  }
package/dist/collection/paragraph/{bem.js → css/template.js} RENAMED
@@ -15,3 +15,8 @@ export const Paragraph = ({ distanced = false, textContent = '', lead = false })
15
15
  'utrecht-paragraph--distanced': distanced,
16
16
  'utrecht-paragraph--lead': lead,
17
17
  })}">${textContent}</p>`;
18
+
19
+ export const Paragraphs = ({ textContent = '' }) =>
20
+ `<p class="utrecht-paragraph utrecht-paragraph--lead">${textContent}</p>
21
+ <p class="utrecht-paragraph">${textContent}</p>
22
+ <p class="utrecht-paragraph">${textContent}</p>`;
package/dist/collection/paragraph/html/template.js ADDED
@@ -0,0 +1,11 @@
1
+ export const Paragraph = ({ textContent = '', lead = false }) =>
2
+ `<section class="utrecht-html">
3
+ <p${lead ? ' class="lead"' : ''}>${textContent}</p>
4
+ </section>`;
5
+
6
+ export const Paragraphs = ({ textContent = '' }) =>
7
+ `<section class="utrecht-html">
8
+ <p class="lead">${textContent}</p>
9
+ <p>${textContent}</p>
10
+ <p>${textContent}</p>
11
+ </section>`;
package/dist/collection/paragraph/{stencil.js → web-component/index.stencil.js} RENAMED
@@ -8,10 +8,10 @@ export class Paragraph {
8
8
  static get is() { return "utrecht-paragraph"; }
9
9
  static get encapsulation() { return "shadow"; }
10
10
  static get originalStyleUrls() { return {
11
- "$": ["stencil.scss"]
11
+ "$": ["index.scss"]
12
12
  }; }
13
13
  static get styleUrls() { return {
14
- "$": ["stencil.css"]
14
+ "$": ["index.css"]
15
15
  }; }
16
16
  static get properties() { return {
17
17
  "lead": {
package/dist/collection/paragraph/web-component/template.js ADDED
@@ -0,0 +1,12 @@
1
+ export const defaultArgs = {
2
+ lead: false,
3
+ textContent: '',
4
+ };
5
+
6
+ export const Paragraph = ({ lead = false, textContent = '' }) =>
7
+ `<utrecht-paragraph ${lead ? 'lead="true"' : ''}">${textContent}</p>`;
8
+
9
+ export const Paragraphs = ({ textContent = '' }) =>
10
+ `<utrecht-paragraph lead="true">${textContent}</utrecht-paragraph>
11
+ <utrecht-paragraph">${textContent}</utrecht-paragraph>
12
+ <utrecht-paragraph">${textContent}</utrecht-paragraph>`;
package/dist/collection/templates/contact-card-template/stencil.css CHANGED
@@ -117,7 +117,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
117
117
  .utrecht-link--focus-visible, .utrecht-link:focus {
118
118
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
119
119
  outline-color: var(--utrecht-focus-outline-color, transparent);
120
- outline-offset: 0;
120
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
121
121
  outline-style: var(--utrecht-focus-outline-style, solid);
122
122
  outline-width: var(--utrecht-focus-outline-width, 0);
123
123
  }
package/dist/collection/textbox/stencil.css CHANGED
@@ -53,7 +53,7 @@
53
53
  .utrecht-textbox--focus-visible, .utrecht-textbox--html-input:focus {
54
54
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
55
55
  outline-color: var(--utrecht-focus-outline-color, transparent);
56
- outline-offset: 0;
56
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
57
57
  outline-style: var(--utrecht-focus-outline-style, solid);
58
58
  outline-width: var(--utrecht-focus-outline-width, 0);
59
59
  }