@utrecht/web-component-library-stencil 1.0.0-alpha.385 → 1.0.0-alpha.387

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 (70) hide show
  1. package/dist/cjs/utrecht-breadcrumb.cjs.entry.js +1 -1
  2. package/dist/cjs/utrecht-button.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-html-content.cjs.entry.js +1 -1
  10. package/dist/cjs/utrecht-pagination.cjs.entry.js +1 -1
  11. package/dist/cjs/utrecht-sidenav.cjs.entry.js +1 -1
  12. package/dist/cjs/utrecht-textbox.cjs.entry.js +1 -1
  13. package/dist/collection/breadcrumb/index.css +23 -11
  14. package/dist/collection/button/index.css +34 -16
  15. package/dist/collection/checkbox/index.css +23 -11
  16. package/dist/collection/contact-card-template/index.css +23 -11
  17. package/dist/collection/custom-checkbox/index.css +22 -10
  18. package/dist/collection/form-field-checkbox/index.css +23 -11
  19. package/dist/collection/form-field-textarea/index.css +23 -11
  20. package/dist/collection/form-field-textbox/index.css +23 -11
  21. package/dist/collection/html-content/index.css +83 -41
  22. package/dist/collection/navigatie sidenav/index.css +12 -6
  23. package/dist/collection/pagination/index.css +24 -12
  24. package/dist/collection/textbox/index.css +23 -11
  25. package/dist/components/index.stencil.js +1 -1
  26. package/dist/components/utrecht-breadcrumb.js +1 -1
  27. package/dist/components/utrecht-checkbox.js +1 -1
  28. package/dist/components/utrecht-contact-card-template.js +1 -1
  29. package/dist/components/utrecht-custom-checkbox.js +1 -1
  30. package/dist/components/utrecht-form-field-checkbox.js +1 -1
  31. package/dist/components/utrecht-form-field-textarea.js +1 -1
  32. package/dist/components/utrecht-form-field-textbox.js +1 -1
  33. package/dist/components/utrecht-html-content.js +1 -1
  34. package/dist/components/utrecht-pagination.js +1 -1
  35. package/dist/components/utrecht-sidenav.js +1 -1
  36. package/dist/components/utrecht-textbox.js +1 -1
  37. package/dist/esm/utrecht-breadcrumb.entry.js +1 -1
  38. package/dist/esm/utrecht-button.entry.js +1 -1
  39. package/dist/esm/utrecht-checkbox.entry.js +1 -1
  40. package/dist/esm/utrecht-contact-card-template.entry.js +1 -1
  41. package/dist/esm/utrecht-custom-checkbox.entry.js +1 -1
  42. package/dist/esm/utrecht-form-field-checkbox.entry.js +1 -1
  43. package/dist/esm/utrecht-form-field-textarea.entry.js +1 -1
  44. package/dist/esm/utrecht-form-field-textbox.entry.js +1 -1
  45. package/dist/esm/utrecht-html-content.entry.js +1 -1
  46. package/dist/esm/utrecht-pagination.entry.js +1 -1
  47. package/dist/esm/utrecht-sidenav.entry.js +1 -1
  48. package/dist/esm/utrecht-textbox.entry.js +1 -1
  49. package/dist/utrecht/{p-70d62149.entry.js → p-0123438b.entry.js} +1 -1
  50. package/dist/utrecht/{p-d5db9d0f.entry.js → p-21242c43.entry.js} +1 -1
  51. package/dist/utrecht/p-2646939a.entry.js +1 -0
  52. package/dist/utrecht/{p-7201f969.entry.js → p-461cd578.entry.js} +1 -1
  53. package/dist/utrecht/{p-1756e449.entry.js → p-6ca82b5a.entry.js} +1 -1
  54. package/dist/utrecht/p-a64f97bf.entry.js +1 -0
  55. package/dist/utrecht/p-b5c193e7.entry.js +1 -0
  56. package/dist/utrecht/p-b8d93c79.entry.js +1 -0
  57. package/dist/utrecht/p-c266e8e5.entry.js +1 -0
  58. package/dist/utrecht/p-cb3ec1ba.entry.js +1 -0
  59. package/dist/utrecht/p-d7f08e6c.entry.js +1 -0
  60. package/dist/utrecht/p-edca18f2.entry.js +1 -0
  61. package/dist/utrecht/utrecht.esm.js +1 -1
  62. package/package.json +4 -4
  63. package/dist/utrecht/p-06aed2c0.entry.js +0 -1
  64. package/dist/utrecht/p-62f84f6c.entry.js +0 -1
  65. package/dist/utrecht/p-6d259a6d.entry.js +0 -1
  66. package/dist/utrecht/p-7e032f94.entry.js +0 -1
  67. package/dist/utrecht/p-8ce48f11.entry.js +0 -1
  68. package/dist/utrecht/p-b21d4628.entry.js +0 -1
  69. package/dist/utrecht/p-c7795b66.entry.js +0 -1
  70. package/dist/utrecht/p-e09d251e.entry.js +0 -1
package/dist/collection/custom-checkbox/index.css CHANGED
@@ -101,11 +101,17 @@
101
101
 
102
102
  .utrecht-checkbox--custom.utrecht-checkbox--focus-visible,
103
103
  .utrecht-custom-checkbox--focus-visible {
104
- box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
105
- outline-color: var(--utrecht-focus-outline-color, transparent);
106
- outline-offset: var(--utrecht-focus-outline-offset, 0);
107
- outline-style: var(--utrecht-focus-outline-style, solid);
108
- outline-width: var(--utrecht-focus-outline-width, 0);
104
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
105
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
106
+ * can combine it with the focus ring box shadow.
107
+ */
108
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
109
+ var(--utrecht-focus-inverse-outline-color, transparent);
110
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
111
+ outline-color: var(--utrecht-focus-outline-color, revert);
112
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
113
+ outline-style: var(--utrecht-focus-outline-style, revert);
114
+ outline-width: var(--utrecht-focus-outline-width, revert);
109
115
  }
110
116
 
111
117
  .utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled,
@@ -138,11 +144,17 @@
138
144
  }
139
145
  .utrecht-checkbox--custom.utrecht-checkbox--html-input:focus-visible,
140
146
  .utrecht-custom-checkbox--html-input:focus-visible {
141
- box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
142
- outline-color: var(--utrecht-focus-outline-color, transparent);
143
- outline-offset: var(--utrecht-focus-outline-offset, 0);
144
- outline-style: var(--utrecht-focus-outline-style, solid);
145
- outline-width: var(--utrecht-focus-outline-width, 0);
147
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
148
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
149
+ * can combine it with the focus ring box shadow.
150
+ */
151
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
152
+ var(--utrecht-focus-inverse-outline-color, transparent);
153
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
154
+ outline-color: var(--utrecht-focus-outline-color, revert);
155
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
156
+ outline-style: var(--utrecht-focus-outline-style, revert);
157
+ outline-width: var(--utrecht-focus-outline-width, revert);
146
158
  }
147
159
  .utrecht-checkbox--custom.utrecht-checkbox--html-input:invalid, .utrecht-checkbox--custom.utrecht-checkbox--html-input[aria-invalid=true],
148
160
  .utrecht-custom-checkbox--html-input:invalid,
package/dist/collection/form-field-checkbox/index.css CHANGED
@@ -181,27 +181,39 @@
181
181
  }
182
182
 
183
183
  .utrecht-checkbox--focus-visible {
184
- box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
185
- outline-color: var(--utrecht-focus-outline-color, transparent);
186
- outline-offset: var(--utrecht-focus-outline-offset, 0);
187
- outline-style: var(--utrecht-focus-outline-style, solid);
188
- outline-width: var(--utrecht-focus-outline-width, 0);
184
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
185
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
186
+ * can combine it with the focus ring box shadow.
187
+ */
188
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
189
+ var(--utrecht-focus-inverse-outline-color, transparent);
190
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
191
+ outline-color: var(--utrecht-focus-outline-color, revert);
192
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
193
+ outline-style: var(--utrecht-focus-outline-style, revert);
194
+ outline-width: var(--utrecht-focus-outline-width, revert);
189
195
  }
190
196
 
191
197
  .utrecht-checkbox--html-input:disabled {
192
198
  cursor: var(--utrecht-action-disabled-cursor, revert);
193
199
  }
194
200
  .utrecht-checkbox--html-input:focus {
195
- box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
196
- outline-color: var(--utrecht-focus-outline-color, transparent);
197
- outline-offset: var(--utrecht-focus-outline-offset, 0);
198
- outline-style: var(--utrecht-focus-outline-style, solid);
199
- outline-width: var(--utrecht-focus-outline-width, 0);
201
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
202
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
203
+ * can combine it with the focus ring box shadow.
204
+ */
205
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
206
+ var(--utrecht-focus-inverse-outline-color, transparent);
207
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
208
+ outline-color: var(--utrecht-focus-outline-color, revert);
209
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
210
+ outline-style: var(--utrecht-focus-outline-style, revert);
211
+ outline-width: var(--utrecht-focus-outline-width, revert);
200
212
  }
201
213
  .utrecht-checkbox--html-input:focus:not(:focus-visible) {
202
214
  /* undo focus ring */
203
215
  box-shadow: none;
204
- outline-style: none;
216
+ outline-style: revert;
205
217
  }
206
218
 
207
219
  :host {
package/dist/collection/form-field-textarea/index.css CHANGED
@@ -211,11 +211,17 @@
211
211
  }
212
212
 
213
213
  .utrecht-textarea--focus-visible {
214
- box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
215
- outline-color: var(--utrecht-focus-outline-color, transparent);
216
- outline-offset: var(--utrecht-focus-outline-offset, 0);
217
- outline-style: var(--utrecht-focus-outline-style, solid);
218
- outline-width: var(--utrecht-focus-outline-width, 0);
214
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
215
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
216
+ * can combine it with the focus ring box shadow.
217
+ */
218
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
219
+ var(--utrecht-focus-inverse-outline-color, transparent);
220
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
221
+ outline-color: var(--utrecht-focus-outline-color, revert);
222
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
223
+ outline-style: var(--utrecht-focus-outline-style, revert);
224
+ outline-width: var(--utrecht-focus-outline-width, revert);
219
225
  }
220
226
 
221
227
  .utrecht-textarea--read-only {
@@ -239,16 +245,22 @@
239
245
  background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
240
246
  border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
241
247
  color: var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
242
- box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
243
- outline-color: var(--utrecht-focus-outline-color, transparent);
244
- outline-offset: var(--utrecht-focus-outline-offset, 0);
245
- outline-style: var(--utrecht-focus-outline-style, solid);
246
- outline-width: var(--utrecht-focus-outline-width, 0);
248
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
249
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
250
+ * can combine it with the focus ring box shadow.
251
+ */
252
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
253
+ var(--utrecht-focus-inverse-outline-color, transparent);
254
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
255
+ outline-color: var(--utrecht-focus-outline-color, revert);
256
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
257
+ outline-style: var(--utrecht-focus-outline-style, revert);
258
+ outline-width: var(--utrecht-focus-outline-width, revert);
247
259
  }
248
260
  .utrecht-textarea--html-textarea:focus:not(:focus-visible) {
249
261
  /* undo focus ring */
250
262
  box-shadow: none;
251
- outline-style: none;
263
+ outline-style: revert;
252
264
  }
253
265
  .utrecht-textarea--html-textarea:invalid, .utrecht-textarea--html-textarea[aria-invalid=true] {
254
266
  background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
package/dist/collection/form-field-textbox/index.css CHANGED
@@ -102,11 +102,17 @@
102
102
  }
103
103
 
104
104
  .utrecht-textbox--focus-visible {
105
- box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
106
- outline-color: var(--utrecht-focus-outline-color, transparent);
107
- outline-offset: var(--utrecht-focus-outline-offset, 0);
108
- outline-style: var(--utrecht-focus-outline-style, solid);
109
- outline-width: var(--utrecht-focus-outline-width, 0);
105
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
106
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
107
+ * can combine it with the focus ring box shadow.
108
+ */
109
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
110
+ var(--utrecht-focus-inverse-outline-color, transparent);
111
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
112
+ outline-color: var(--utrecht-focus-outline-color, revert);
113
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
114
+ outline-style: var(--utrecht-focus-outline-style, revert);
115
+ outline-width: var(--utrecht-focus-outline-width, revert);
110
116
  }
111
117
 
112
118
  .utrecht-textbox--read-only {
@@ -145,16 +151,22 @@
145
151
  background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
146
152
  border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
147
153
  color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
148
- box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
149
- outline-color: var(--utrecht-focus-outline-color, transparent);
150
- outline-offset: var(--utrecht-focus-outline-offset, 0);
151
- outline-style: var(--utrecht-focus-outline-style, solid);
152
- outline-width: var(--utrecht-focus-outline-width, 0);
154
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
155
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
156
+ * can combine it with the focus ring box shadow.
157
+ */
158
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
159
+ var(--utrecht-focus-inverse-outline-color, transparent);
160
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
161
+ outline-color: var(--utrecht-focus-outline-color, revert);
162
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
163
+ outline-style: var(--utrecht-focus-outline-style, revert);
164
+ outline-width: var(--utrecht-focus-outline-width, revert);
153
165
  }
154
166
  .utrecht-textbox--html-input:focus:not(:focus-visible) {
155
167
  /* undo focus ring */
156
168
  box-shadow: none;
157
- outline-style: none;
169
+ outline-style: revert;
158
170
  }
159
171
  .utrecht-textbox--html-input:invalid, .utrecht-textbox--html-input[aria-invalid=true] {
160
172
  background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color))));
package/dist/collection/html-content/index.css CHANGED
@@ -667,11 +667,17 @@ however browsers don't seem to have implemented great looking supixel tweening y
667
667
  }
668
668
  .utrecht-html button:focus-visible {
669
669
  /* the pseudo-class for `:focus-visible` is implemented via the mixin */
670
- box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
671
- outline-color: var(--utrecht-focus-outline-color, transparent);
672
- outline-offset: var(--utrecht-focus-outline-offset, 0);
673
- outline-style: var(--utrecht-focus-outline-style, solid);
674
- outline-width: var(--utrecht-focus-outline-width, 0);
670
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
671
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
672
+ * can combine it with the focus ring box shadow.
673
+ */
674
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
675
+ var(--utrecht-focus-inverse-outline-color, transparent);
676
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
677
+ outline-color: var(--utrecht-focus-outline-color, revert);
678
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
679
+ outline-style: var(--utrecht-focus-outline-style, revert);
680
+ outline-width: var(--utrecht-focus-outline-width, revert);
675
681
  }
676
682
  .utrecht-html input[type=checkbox i] {
677
683
  margin-block-end: 0;
@@ -685,16 +691,22 @@ however browsers don't seem to have implemented great looking supixel tweening y
685
691
  cursor: var(--utrecht-action-disabled-cursor, revert);
686
692
  }
687
693
  .utrecht-html input[type=checkbox i]:focus {
688
- box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
689
- outline-color: var(--utrecht-focus-outline-color, transparent);
690
- outline-offset: var(--utrecht-focus-outline-offset, 0);
691
- outline-style: var(--utrecht-focus-outline-style, solid);
692
- outline-width: var(--utrecht-focus-outline-width, 0);
694
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
695
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
696
+ * can combine it with the focus ring box shadow.
697
+ */
698
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
699
+ var(--utrecht-focus-inverse-outline-color, transparent);
700
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
701
+ outline-color: var(--utrecht-focus-outline-color, revert);
702
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
703
+ outline-style: var(--utrecht-focus-outline-style, revert);
704
+ outline-width: var(--utrecht-focus-outline-width, revert);
693
705
  }
694
706
  .utrecht-html input[type=checkbox i]:focus:not(:focus-visible) {
695
707
  /* undo focus ring */
696
708
  box-shadow: none;
697
- outline-style: none;
709
+ outline-style: revert;
698
710
  }
699
711
  .utrecht-html body {
700
712
  /* reset `font-smoothing: antialiasing`, prefer automatic (`subpixel-antialiasing`) behavior for high-dpi screens */
@@ -922,16 +934,22 @@ however browsers don't seem to have implemented great looking supixel tweening y
922
934
  text-decoration-skip: none;
923
935
  text-decoration-skip-ink: none;
924
936
  text-decoration-thickness: max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
925
- box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
926
- outline-color: var(--utrecht-focus-outline-color, transparent);
927
- outline-offset: var(--utrecht-focus-outline-offset, 0);
928
- outline-style: var(--utrecht-focus-outline-style, solid);
929
- outline-width: var(--utrecht-focus-outline-width, 0);
937
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
938
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
939
+ * can combine it with the focus ring box shadow.
940
+ */
941
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
942
+ var(--utrecht-focus-inverse-outline-color, transparent);
943
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
944
+ outline-color: var(--utrecht-focus-outline-color, revert);
945
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
946
+ outline-style: var(--utrecht-focus-outline-style, revert);
947
+ outline-width: var(--utrecht-focus-outline-width, revert);
930
948
  }
931
949
  .utrecht-html a:focus:not(:focus-visible) {
932
950
  /* undo focus ring */
933
951
  box-shadow: none;
934
- outline-style: none;
952
+ outline-style: revert;
935
953
  }
936
954
  .utrecht-html a[href^="tel:" i] {
937
955
  white-space: nowrap;
@@ -992,16 +1010,22 @@ however browsers don't seem to have implemented great looking supixel tweening y
992
1010
  cursor: var(--utrecht-action-disabled-cursor, revert);
993
1011
  }
994
1012
  .utrecht-html input[type=radio i]:focus {
995
- box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
996
- outline-color: var(--utrecht-focus-outline-color, transparent);
997
- outline-offset: var(--utrecht-focus-outline-offset, 0);
998
- outline-style: var(--utrecht-focus-outline-style, solid);
999
- outline-width: var(--utrecht-focus-outline-width, 0);
1013
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
1014
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
1015
+ * can combine it with the focus ring box shadow.
1016
+ */
1017
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
1018
+ var(--utrecht-focus-inverse-outline-color, transparent);
1019
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
1020
+ outline-color: var(--utrecht-focus-outline-color, revert);
1021
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
1022
+ outline-style: var(--utrecht-focus-outline-style, revert);
1023
+ outline-width: var(--utrecht-focus-outline-width, revert);
1000
1024
  }
1001
1025
  .utrecht-html input[type=radio i]:focus:not(:focus-visible) {
1002
1026
  /* undo focus ring */
1003
1027
  box-shadow: none;
1004
- outline-style: none;
1028
+ outline-style: revert;
1005
1029
  }
1006
1030
  .utrecht-html select {
1007
1031
  -moz-appearance: none;
@@ -1040,16 +1064,22 @@ however browsers don't seem to have implemented great looking supixel tweening y
1040
1064
  background-color: var(--utrecht-select-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
1041
1065
  border-color: var(--utrecht-select-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
1042
1066
  color: var(--utrecht-select-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
1043
- box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
1044
- outline-color: var(--utrecht-focus-outline-color, transparent);
1045
- outline-offset: var(--utrecht-focus-outline-offset, 0);
1046
- outline-style: var(--utrecht-focus-outline-style, solid);
1047
- outline-width: var(--utrecht-focus-outline-width, 0);
1067
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
1068
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
1069
+ * can combine it with the focus ring box shadow.
1070
+ */
1071
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
1072
+ var(--utrecht-focus-inverse-outline-color, transparent);
1073
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
1074
+ outline-color: var(--utrecht-focus-outline-color, revert);
1075
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
1076
+ outline-style: var(--utrecht-focus-outline-style, revert);
1077
+ outline-width: var(--utrecht-focus-outline-width, revert);
1048
1078
  }
1049
1079
  .utrecht-html select:focus:not(:focus-visible) {
1050
1080
  /* undo focus ring */
1051
1081
  box-shadow: none;
1052
- outline-style: none;
1082
+ outline-style: revert;
1053
1083
  }
1054
1084
  .utrecht-html select[aria-invalid=true] {
1055
1085
  background-color: var(--utrecht-select-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
@@ -1192,16 +1222,22 @@ however browsers don't seem to have implemented great looking supixel tweening y
1192
1222
  background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
1193
1223
  border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
1194
1224
  color: var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
1195
- box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
1196
- outline-color: var(--utrecht-focus-outline-color, transparent);
1197
- outline-offset: var(--utrecht-focus-outline-offset, 0);
1198
- outline-style: var(--utrecht-focus-outline-style, solid);
1199
- outline-width: var(--utrecht-focus-outline-width, 0);
1225
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
1226
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
1227
+ * can combine it with the focus ring box shadow.
1228
+ */
1229
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
1230
+ var(--utrecht-focus-inverse-outline-color, transparent);
1231
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
1232
+ outline-color: var(--utrecht-focus-outline-color, revert);
1233
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
1234
+ outline-style: var(--utrecht-focus-outline-style, revert);
1235
+ outline-width: var(--utrecht-focus-outline-width, revert);
1200
1236
  }
1201
1237
  .utrecht-html textarea:focus:not(:focus-visible) {
1202
1238
  /* undo focus ring */
1203
1239
  box-shadow: none;
1204
- outline-style: none;
1240
+ outline-style: revert;
1205
1241
  }
1206
1242
  .utrecht-html textarea:invalid, .utrecht-html textarea[aria-invalid=true] {
1207
1243
  background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
@@ -1287,11 +1323,17 @@ however browsers don't seem to have implemented great looking supixel tweening y
1287
1323
  background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
1288
1324
  border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
1289
1325
  color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
1290
- box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
1291
- outline-color: var(--utrecht-focus-outline-color, transparent);
1292
- outline-offset: var(--utrecht-focus-outline-offset, 0);
1293
- outline-style: var(--utrecht-focus-outline-style, solid);
1294
- outline-width: var(--utrecht-focus-outline-width, 0);
1326
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
1327
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
1328
+ * can combine it with the focus ring box shadow.
1329
+ */
1330
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
1331
+ var(--utrecht-focus-inverse-outline-color, transparent);
1332
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
1333
+ outline-color: var(--utrecht-focus-outline-color, revert);
1334
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
1335
+ outline-style: var(--utrecht-focus-outline-style, revert);
1336
+ outline-width: var(--utrecht-focus-outline-width, revert);
1295
1337
  }
1296
1338
  .utrecht-html input:not([type]):focus:not(:focus-visible),
1297
1339
  .utrecht-html input[type=date i]:focus:not(:focus-visible),
@@ -1308,7 +1350,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1308
1350
  .utrecht-html input[type=week i]:focus:not(:focus-visible) {
1309
1351
  /* undo focus ring */
1310
1352
  box-shadow: none;
1311
- outline-style: none;
1353
+ outline-style: revert;
1312
1354
  }
1313
1355
  .utrecht-html input:not([type]):invalid, .utrecht-html input:not([type])[aria-invalid=true],
1314
1356
  .utrecht-html input[type=date i]:invalid,
package/dist/collection/navigatie sidenav/index.css CHANGED
@@ -83,11 +83,17 @@
83
83
  }
84
84
 
85
85
  .utrecht-sidenav__link--focus-visible, .utrecht-sidenav__link:focus {
86
- box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
87
- outline-color: var(--utrecht-focus-outline-color, transparent);
88
- outline-offset: var(--utrecht-focus-outline-offset, 0);
89
- outline-style: var(--utrecht-focus-outline-style, solid);
90
- outline-width: var(--utrecht-focus-outline-width, 0);
86
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
87
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
88
+ * can combine it with the focus ring box shadow.
89
+ */
90
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
91
+ var(--utrecht-focus-inverse-outline-color, transparent);
92
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
93
+ outline-color: var(--utrecht-focus-outline-color, revert);
94
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
95
+ outline-style: var(--utrecht-focus-outline-style, revert);
96
+ outline-width: var(--utrecht-focus-outline-width, revert);
91
97
  }
92
98
 
93
99
  /* Remove bottom padding form first item in list with children */
@@ -185,5 +191,5 @@
185
191
  .utrecht-sidenav__link:focus:not(:focus-visible) {
186
192
  /* undo focus ring */
187
193
  box-shadow: none;
188
- outline-style: none;
194
+ outline-style: revert;
189
195
  }
package/dist/collection/pagination/index.css CHANGED
@@ -18,18 +18,24 @@
18
18
  */
19
19
  .utrecht-pagination__page-link:focus,
20
20
  .utrecht-pagination__relative-link:focus {
21
- box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
22
- outline-color: var(--utrecht-focus-outline-color, transparent);
23
- outline-offset: var(--utrecht-focus-outline-offset, 0);
24
- outline-style: var(--utrecht-focus-outline-style, solid);
25
- outline-width: var(--utrecht-focus-outline-width, 0);
21
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
22
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
23
+ * can combine it with the focus ring box shadow.
24
+ */
25
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
26
+ var(--utrecht-focus-inverse-outline-color, transparent);
27
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
28
+ outline-color: var(--utrecht-focus-outline-color, revert);
29
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
30
+ outline-style: var(--utrecht-focus-outline-style, revert);
31
+ outline-width: var(--utrecht-focus-outline-width, revert);
26
32
  }
27
33
 
28
34
  .utrecht-pagination__page-link:focus:not(:focus-visible),
29
35
  .utrecht-pagination__relative-link:focus:not(:focus-visible) {
30
36
  /* undo focus ring */
31
37
  box-shadow: none;
32
- outline-style: none;
38
+ outline-style: revert;
33
39
  }
34
40
 
35
41
  .utrecht-pagination {
@@ -115,18 +121,24 @@
115
121
 
116
122
  .utrecht-pagination__page-link:focus,
117
123
  .utrecht-pagination__relative-link:focus {
118
- box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
119
- outline-color: var(--utrecht-focus-outline-color, transparent);
120
- outline-offset: var(--utrecht-focus-outline-offset, 0);
121
- outline-style: var(--utrecht-focus-outline-style, solid);
122
- outline-width: var(--utrecht-focus-outline-width, 0);
124
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
125
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
126
+ * can combine it with the focus ring box shadow.
127
+ */
128
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
129
+ var(--utrecht-focus-inverse-outline-color, transparent);
130
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
131
+ outline-color: var(--utrecht-focus-outline-color, revert);
132
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
133
+ outline-style: var(--utrecht-focus-outline-style, revert);
134
+ outline-width: var(--utrecht-focus-outline-width, revert);
123
135
  }
124
136
 
125
137
  .utrecht-pagination__page-link:focus:not(:focus-visible),
126
138
  .utrecht-pagination__relative-link:focus:not(:focus-visible) {
127
139
  /* undo focus ring */
128
140
  box-shadow: none;
129
- outline-style: none;
141
+ outline-style: revert;
130
142
  }
131
143
 
132
144
  :host {
package/dist/collection/textbox/index.css CHANGED
@@ -67,11 +67,17 @@
67
67
  }
68
68
 
69
69
  .utrecht-textbox--focus-visible {
70
- box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
71
- outline-color: var(--utrecht-focus-outline-color, transparent);
72
- outline-offset: var(--utrecht-focus-outline-offset, 0);
73
- outline-style: var(--utrecht-focus-outline-style, solid);
74
- outline-width: var(--utrecht-focus-outline-width, 0);
70
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
71
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
72
+ * can combine it with the focus ring box shadow.
73
+ */
74
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
75
+ var(--utrecht-focus-inverse-outline-color, transparent);
76
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
77
+ outline-color: var(--utrecht-focus-outline-color, revert);
78
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
79
+ outline-style: var(--utrecht-focus-outline-style, revert);
80
+ outline-width: var(--utrecht-focus-outline-width, revert);
75
81
  }
76
82
 
77
83
  .utrecht-textbox--read-only {
@@ -110,16 +116,22 @@
110
116
  background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
111
117
  border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
112
118
  color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
113
- box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
114
- outline-color: var(--utrecht-focus-outline-color, transparent);
115
- outline-offset: var(--utrecht-focus-outline-offset, 0);
116
- outline-style: var(--utrecht-focus-outline-style, solid);
117
- outline-width: var(--utrecht-focus-outline-width, 0);
119
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
120
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
121
+ * can combine it with the focus ring box shadow.
122
+ */
123
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
124
+ var(--utrecht-focus-inverse-outline-color, transparent);
125
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
126
+ outline-color: var(--utrecht-focus-outline-color, revert);
127
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
128
+ outline-style: var(--utrecht-focus-outline-style, revert);
129
+ outline-width: var(--utrecht-focus-outline-width, revert);
118
130
  }
119
131
  .utrecht-textbox--html-input:focus:not(:focus-visible) {
120
132
  /* undo focus ring */
121
133
  box-shadow: none;
122
- outline-style: none;
134
+ outline-style: revert;
123
135
  }
124
136
  .utrecht-textbox--html-input:invalid, .utrecht-textbox--html-input[aria-invalid=true] {
125
137
  background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color))));