@utrecht/component-library-css 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 (7) hide show
  1. package/dist/bem.css +21 -25
  2. package/dist/html.css +21 -37
  3. package/dist/index.css +43 -63
  4. package/dist/root-theme.css +1 -1
  5. package/package.json +3 -3
  6. package/src/bem.scss +2 -3
  7. package/src/html.scss +0 -1
package/dist/bem.css CHANGED
@@ -14,12 +14,6 @@
14
14
  * Will become:
15
15
  * @import "@utrecht/blockquote/index";
16
16
  */
17
- /**
18
- * @license EUPL-1.2
19
- * Copyright (c) 2021 Robbert Broersma
20
- */
21
- /* stylelint-disable-next-line block-no-empty */
22
- /* stylelint-disable-next-line block-no-empty */
23
17
  /**
24
18
  * @license EUPL-1.2
25
19
  * Copyright (c) 2021 Robbert Broersma
@@ -383,7 +377,7 @@ ol.utrecht-breadcrumb__list {
383
377
  /* the pseudo-class for `:focus-visible` is implemented via the mixin */
384
378
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
385
379
  outline-color: var(--utrecht-focus-outline-color, transparent);
386
- outline-offset: 0;
380
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
387
381
  outline-style: var(--utrecht-focus-outline-style, solid);
388
382
  outline-width: var(--utrecht-focus-outline-width, 0);
389
383
  }
@@ -436,7 +430,7 @@ ol.utrecht-breadcrumb__list {
436
430
  .utrecht-checkbox--focus-visible {
437
431
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
438
432
  outline-color: var(--utrecht-focus-outline-color, transparent);
439
- outline-offset: 0;
433
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
440
434
  outline-style: var(--utrecht-focus-outline-style, solid);
441
435
  outline-width: var(--utrecht-focus-outline-width, 0);
442
436
  }
@@ -444,7 +438,7 @@ ol.utrecht-breadcrumb__list {
444
438
  .utrecht-checkbox--html-input:focus {
445
439
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
446
440
  outline-color: var(--utrecht-focus-outline-color, transparent);
447
- outline-offset: 0;
441
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
448
442
  outline-style: var(--utrecht-focus-outline-style, solid);
449
443
  outline-width: var(--utrecht-focus-outline-width, 0);
450
444
  }
@@ -484,7 +478,7 @@ ol.utrecht-breadcrumb__list {
484
478
  .utrecht-checkbox--focus-visible {
485
479
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
486
480
  outline-color: var(--utrecht-focus-outline-color, transparent);
487
- outline-offset: 0;
481
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
488
482
  outline-style: var(--utrecht-focus-outline-style, solid);
489
483
  outline-width: var(--utrecht-focus-outline-width, 0);
490
484
  }
@@ -492,7 +486,7 @@ ol.utrecht-breadcrumb__list {
492
486
  .utrecht-checkbox--html-input:focus {
493
487
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
494
488
  outline-color: var(--utrecht-focus-outline-color, transparent);
495
- outline-offset: 0;
489
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
496
490
  outline-style: var(--utrecht-focus-outline-style, solid);
497
491
  outline-width: var(--utrecht-focus-outline-width, 0);
498
492
  }
@@ -595,7 +589,7 @@ ol.utrecht-breadcrumb__list {
595
589
  .utrecht-custom-checkbox__box--focus-visible {
596
590
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
597
591
  outline-color: var(--utrecht-focus-outline-color, transparent);
598
- outline-offset: 0;
592
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
599
593
  outline-style: var(--utrecht-focus-outline-style, solid);
600
594
  outline-width: var(--utrecht-focus-outline-width, 0);
601
595
  }
@@ -603,7 +597,7 @@ ol.utrecht-breadcrumb__list {
603
597
  .utrecht-custom-checkbox__input:focus ~ .utrecht-custom-checkbox__box {
604
598
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
605
599
  outline-color: var(--utrecht-focus-outline-color, transparent);
606
- outline-offset: 0;
600
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
607
601
  outline-style: var(--utrecht-focus-outline-style, solid);
608
602
  outline-width: var(--utrecht-focus-outline-width, 0);
609
603
  }
@@ -1274,7 +1268,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1274
1268
  text-underline-offset: var(--utrecht-link-text-underline-offset);
1275
1269
  }
1276
1270
 
1277
- .utrecht-link-icon-left {
1271
+ .utrecht-link--icon-left {
1278
1272
  background-image: var(--utrecht-link-icon-left-background-image, none);
1279
1273
  background-position: 0 0.25em;
1280
1274
  background-repeat: no-repeat;
@@ -1314,7 +1308,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1314
1308
  .utrecht-link--focus-visible, .utrecht-link:focus {
1315
1309
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1316
1310
  outline-color: var(--utrecht-focus-outline-color, transparent);
1317
- outline-offset: 0;
1311
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
1318
1312
  outline-style: var(--utrecht-focus-outline-style, solid);
1319
1313
  outline-width: var(--utrecht-focus-outline-width, 0);
1320
1314
  }
@@ -1331,6 +1325,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
1331
1325
  white-space: nowrap;
1332
1326
  }
1333
1327
 
1328
+ /* stylelint-disable-next-line block-no-empty */
1329
+ /* stylelint-disable-next-line block-no-empty */
1334
1330
  /**
1335
1331
  * @license EUPL-1.2
1336
1332
  * Copyright (c) 2021 Robbert Broersma
@@ -1415,7 +1411,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1415
1411
  .utrecht-mapcontrolbutton--focus-visible, .utrecht-mapcontrolbutton:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-mapcontrolbutton--disabled) {
1416
1412
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1417
1413
  outline-color: var(--utrecht-focus-outline-color, transparent);
1418
- outline-offset: 0;
1414
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
1419
1415
  outline-style: var(--utrecht-focus-outline-style, solid);
1420
1416
  outline-width: var(--utrecht-focus-outline-width, 0);
1421
1417
  }
@@ -1487,7 +1483,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1487
1483
  .utrecht-menulijst__link--focus-visible, .utrecht-menulijst__link:focus {
1488
1484
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1489
1485
  outline-color: var(--utrecht-focus-outline-color, transparent);
1490
- outline-offset: 0;
1486
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
1491
1487
  outline-style: var(--utrecht-focus-outline-style, solid);
1492
1488
  outline-width: var(--utrecht-focus-outline-width, 0);
1493
1489
  }
@@ -1568,7 +1564,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1568
1564
  .utrecht-topnav__link--focus-visible, .utrecht-topnav__link:focus {
1569
1565
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1570
1566
  outline-color: var(--utrecht-focus-outline-color, transparent);
1571
- outline-offset: 0;
1567
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
1572
1568
  outline-style: var(--utrecht-focus-outline-style, solid);
1573
1569
  outline-width: var(--utrecht-focus-outline-width, 0);
1574
1570
  }
@@ -1662,7 +1658,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1662
1658
  .utrecht-sidenav__link--focus-visible, .utrecht-sidenav__link:focus {
1663
1659
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1664
1660
  outline-color: var(--utrecht-focus-outline-color, transparent);
1665
- outline-offset: 0;
1661
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
1666
1662
  outline-style: var(--utrecht-focus-outline-style, solid);
1667
1663
  outline-width: var(--utrecht-focus-outline-width, 0);
1668
1664
  }
@@ -1833,7 +1829,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1833
1829
  .utrecht-topnav__link--focus-visible, .utrecht-topnav__link:focus {
1834
1830
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1835
1831
  outline-color: var(--utrecht-focus-outline-color, transparent);
1836
- outline-offset: 0;
1832
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
1837
1833
  outline-style: var(--utrecht-focus-outline-style, solid);
1838
1834
  outline-width: var(--utrecht-focus-outline-width, 0);
1839
1835
  }
@@ -2063,7 +2059,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
2063
2059
  .utrecht-pagination__relative-link:focus {
2064
2060
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
2065
2061
  outline-color: var(--utrecht-focus-outline-color, transparent);
2066
- outline-offset: 0;
2062
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
2067
2063
  outline-style: var(--utrecht-focus-outline-style, solid);
2068
2064
  outline-width: var(--utrecht-focus-outline-width, 0);
2069
2065
  }
@@ -2149,7 +2145,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
2149
2145
  .utrecht-radio-button--focus-visible, .utrecht-radio-button--html-input:focus {
2150
2146
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
2151
2147
  outline-color: var(--utrecht-focus-outline-color, transparent);
2152
- outline-offset: 0;
2148
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
2153
2149
  outline-style: var(--utrecht-focus-outline-style, solid);
2154
2150
  outline-width: var(--utrecht-focus-outline-width, 0);
2155
2151
  }
@@ -2247,7 +2243,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
2247
2243
  .utrecht-select--focus-visible, .utrecht-select--html-select:focus {
2248
2244
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
2249
2245
  outline-color: var(--utrecht-focus-outline-color, transparent);
2250
- outline-offset: 0;
2246
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
2251
2247
  outline-style: var(--utrecht-focus-outline-style, solid);
2252
2248
  outline-width: var(--utrecht-focus-outline-width, 0);
2253
2249
  }
@@ -2446,7 +2442,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
2446
2442
  .utrecht-textarea--focus-visible, .utrecht-textarea--html-textarea:focus {
2447
2443
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
2448
2444
  outline-color: var(--utrecht-focus-outline-color, transparent);
2449
- outline-offset: 0;
2445
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
2450
2446
  outline-style: var(--utrecht-focus-outline-style, solid);
2451
2447
  outline-width: var(--utrecht-focus-outline-width, 0);
2452
2448
  }
@@ -2518,7 +2514,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
2518
2514
  .utrecht-textbox--focus-visible, .utrecht-textbox--html-input:focus {
2519
2515
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
2520
2516
  outline-color: var(--utrecht-focus-outline-color, transparent);
2521
- outline-offset: 0;
2517
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
2522
2518
  outline-style: var(--utrecht-focus-outline-style, solid);
2523
2519
  outline-width: var(--utrecht-focus-outline-width, 0);
2524
2520
  }
package/dist/html.css CHANGED
@@ -4,16 +4,6 @@
4
4
  * Copyright (c) 2021 Gemeente Utrecht
5
5
  */
6
6
  /* Collection of all semantic HTML styles in the component library */
7
- /**
8
- * @license EUPL-1.2
9
- * Copyright (c) 2021 Robbert Broersma
10
- */
11
- /**
12
- * @license EUPL-1.2
13
- * Copyright (c) 2021 Robbert Broersma
14
- */
15
- /* stylelint-disable-next-line block-no-empty */
16
- /* stylelint-disable-next-line block-no-empty */
17
7
  /**
18
8
  * @license EUPL-1.2
19
9
  * Copyright (c) 2021 Robbert Broersma
@@ -149,7 +139,7 @@
149
139
  /* the pseudo-class for `:focus-visible` is implemented via the mixin */
150
140
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
151
141
  outline-color: var(--utrecht-focus-outline-color, transparent);
152
- outline-offset: 0;
142
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
153
143
  outline-style: var(--utrecht-focus-outline-style, solid);
154
144
  outline-width: var(--utrecht-focus-outline-width, 0);
155
145
  }
@@ -217,7 +207,7 @@
217
207
  .utrecht-checkbox--focus-visible {
218
208
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
219
209
  outline-color: var(--utrecht-focus-outline-color, transparent);
220
- outline-offset: 0;
210
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
221
211
  outline-style: var(--utrecht-focus-outline-style, solid);
222
212
  outline-width: var(--utrecht-focus-outline-width, 0);
223
213
  }
@@ -225,7 +215,7 @@
225
215
  .utrecht-checkbox--html-input:focus, .utrecht-html input[type=checkbox i]:focus {
226
216
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
227
217
  outline-color: var(--utrecht-focus-outline-color, transparent);
228
- outline-offset: 0;
218
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
229
219
  outline-style: var(--utrecht-focus-outline-style, solid);
230
220
  outline-width: var(--utrecht-focus-outline-width, 0);
231
221
  }
@@ -521,16 +511,6 @@
521
511
  * Copyright (c) 2021 Robbert Broersma
522
512
  */
523
513
  /* Collection of all semantic HTML styles in the component library */
524
- /**
525
- * @license EUPL-1.2
526
- * Copyright (c) 2021 Robbert Broersma
527
- */
528
- /**
529
- * @license EUPL-1.2
530
- * Copyright (c) 2021 Robbert Broersma
531
- */
532
- /* stylelint-disable-next-line block-no-empty */
533
- /* stylelint-disable-next-line block-no-empty */
534
514
  /**
535
515
  * @license EUPL-1.2
536
516
  * Copyright (c) 2021 Robbert Broersma
@@ -666,7 +646,7 @@
666
646
  /* the pseudo-class for `:focus-visible` is implemented via the mixin */
667
647
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
668
648
  outline-color: var(--utrecht-focus-outline-color, transparent);
669
- outline-offset: 0;
649
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
670
650
  outline-style: var(--utrecht-focus-outline-style, solid);
671
651
  outline-width: var(--utrecht-focus-outline-width, 0);
672
652
  }
@@ -734,7 +714,7 @@
734
714
  .utrecht-checkbox--focus-visible {
735
715
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
736
716
  outline-color: var(--utrecht-focus-outline-color, transparent);
737
- outline-offset: 0;
717
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
738
718
  outline-style: var(--utrecht-focus-outline-style, solid);
739
719
  outline-width: var(--utrecht-focus-outline-width, 0);
740
720
  }
@@ -742,7 +722,7 @@
742
722
  .utrecht-checkbox--html-input:focus, .utrecht-html input[type=checkbox i]:focus {
743
723
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
744
724
  outline-color: var(--utrecht-focus-outline-color, transparent);
745
- outline-offset: 0;
725
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
746
726
  outline-style: var(--utrecht-focus-outline-style, solid);
747
727
  outline-width: var(--utrecht-focus-outline-width, 0);
748
728
  }
@@ -1086,7 +1066,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1086
1066
  text-underline-offset: var(--utrecht-link-text-underline-offset);
1087
1067
  }
1088
1068
 
1089
- .utrecht-link-icon-left {
1069
+ .utrecht-link--icon-left {
1090
1070
  background-image: var(--utrecht-link-icon-left-background-image, none);
1091
1071
  background-position: 0 0.25em;
1092
1072
  background-repeat: no-repeat;
@@ -1129,7 +1109,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1129
1109
  .utrecht-link--focus-visible, .utrecht-html a:focus, .utrecht-link:focus {
1130
1110
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1131
1111
  outline-color: var(--utrecht-focus-outline-color, transparent);
1132
- outline-offset: 0;
1112
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
1133
1113
  outline-style: var(--utrecht-focus-outline-style, solid);
1134
1114
  outline-width: var(--utrecht-focus-outline-width, 0);
1135
1115
  }
@@ -1146,6 +1126,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
1146
1126
  white-space: nowrap;
1147
1127
  }
1148
1128
 
1129
+ /* stylelint-disable-next-line block-no-empty */
1130
+ /* stylelint-disable-next-line block-no-empty */
1149
1131
  .utrecht-html a:focus:not(:focus-visible) {
1150
1132
  /* undo focus ring */
1151
1133
  box-shadow: none;
@@ -1244,7 +1226,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1244
1226
  .utrecht-radio-button--focus-visible, .utrecht-radio-button--html-input:focus, .utrecht-html input[type=radio i]:focus {
1245
1227
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1246
1228
  outline-color: var(--utrecht-focus-outline-color, transparent);
1247
- outline-offset: 0;
1229
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
1248
1230
  outline-style: var(--utrecht-focus-outline-style, solid);
1249
1231
  outline-width: var(--utrecht-focus-outline-width, 0);
1250
1232
  }
@@ -1436,7 +1418,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1436
1418
  .utrecht-textarea--focus-visible, .utrecht-textarea--html-textarea:focus, .utrecht-html textarea:focus {
1437
1419
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1438
1420
  outline-color: var(--utrecht-focus-outline-color, transparent);
1439
- outline-offset: 0;
1421
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
1440
1422
  outline-style: var(--utrecht-focus-outline-style, solid);
1441
1423
  outline-width: var(--utrecht-focus-outline-width, 0);
1442
1424
  }
@@ -1584,7 +1566,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1584
1566
  .utrecht-html input[type=week i]:focus {
1585
1567
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1586
1568
  outline-color: var(--utrecht-focus-outline-color, transparent);
1587
- outline-offset: 0;
1569
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
1588
1570
  outline-style: var(--utrecht-focus-outline-style, solid);
1589
1571
  outline-width: var(--utrecht-focus-outline-width, 0);
1590
1572
  }
@@ -1794,7 +1776,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1794
1776
  text-underline-offset: var(--utrecht-link-text-underline-offset);
1795
1777
  }
1796
1778
 
1797
- .utrecht-link-icon-left {
1779
+ .utrecht-link--icon-left {
1798
1780
  background-image: var(--utrecht-link-icon-left-background-image, none);
1799
1781
  background-position: 0 0.25em;
1800
1782
  background-repeat: no-repeat;
@@ -1837,7 +1819,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1837
1819
  .utrecht-link--focus-visible, .utrecht-link:focus, .utrecht-html a:focus {
1838
1820
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1839
1821
  outline-color: var(--utrecht-focus-outline-color, transparent);
1840
- outline-offset: 0;
1822
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
1841
1823
  outline-style: var(--utrecht-focus-outline-style, solid);
1842
1824
  outline-width: var(--utrecht-focus-outline-width, 0);
1843
1825
  }
@@ -1854,6 +1836,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
1854
1836
  white-space: nowrap;
1855
1837
  }
1856
1838
 
1839
+ /* stylelint-disable-next-line block-no-empty */
1840
+ /* stylelint-disable-next-line block-no-empty */
1857
1841
  .utrecht-html a:focus:not(:focus-visible) {
1858
1842
  /* undo focus ring */
1859
1843
  box-shadow: none;
@@ -1952,7 +1936,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1952
1936
  .utrecht-radio-button--focus-visible, .utrecht-radio-button--html-input:focus, .utrecht-html input[type=radio i]:focus {
1953
1937
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1954
1938
  outline-color: var(--utrecht-focus-outline-color, transparent);
1955
- outline-offset: 0;
1939
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
1956
1940
  outline-style: var(--utrecht-focus-outline-style, solid);
1957
1941
  outline-width: var(--utrecht-focus-outline-width, 0);
1958
1942
  }
@@ -2020,7 +2004,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
2020
2004
  .utrecht-select--focus-visible, .utrecht-select--html-select:focus, .utrecht-html select:focus {
2021
2005
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
2022
2006
  outline-color: var(--utrecht-focus-outline-color, transparent);
2023
- outline-offset: 0;
2007
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
2024
2008
  outline-style: var(--utrecht-focus-outline-style, solid);
2025
2009
  outline-width: var(--utrecht-focus-outline-width, 0);
2026
2010
  }
@@ -2221,7 +2205,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
2221
2205
  .utrecht-textarea--focus-visible, .utrecht-textarea--html-textarea:focus, .utrecht-html textarea:focus {
2222
2206
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
2223
2207
  outline-color: var(--utrecht-focus-outline-color, transparent);
2224
- outline-offset: 0;
2208
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
2225
2209
  outline-style: var(--utrecht-focus-outline-style, solid);
2226
2210
  outline-width: var(--utrecht-focus-outline-width, 0);
2227
2211
  }
@@ -2369,7 +2353,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
2369
2353
  .utrecht-html input[type=week i]:focus {
2370
2354
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
2371
2355
  outline-color: var(--utrecht-focus-outline-color, transparent);
2372
- outline-offset: 0;
2356
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
2373
2357
  outline-style: var(--utrecht-focus-outline-style, solid);
2374
2358
  outline-width: var(--utrecht-focus-outline-width, 0);
2375
2359
  }
package/dist/index.css CHANGED
@@ -23,12 +23,6 @@
23
23
  * Will become:
24
24
  * @import "@utrecht/blockquote/index";
25
25
  */
26
- /**
27
- * @license EUPL-1.2
28
- * Copyright (c) 2021 Robbert Broersma
29
- */
30
- /* stylelint-disable-next-line block-no-empty */
31
- /* stylelint-disable-next-line block-no-empty */
32
26
  /**
33
27
  * @license EUPL-1.2
34
28
  * Copyright (c) 2021 Robbert Broersma
@@ -411,7 +405,7 @@ ol.utrecht-breadcrumb__list {
411
405
  /* the pseudo-class for `:focus-visible` is implemented via the mixin */
412
406
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
413
407
  outline-color: var(--utrecht-focus-outline-color, transparent);
414
- outline-offset: 0;
408
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
415
409
  outline-style: var(--utrecht-focus-outline-style, solid);
416
410
  outline-width: var(--utrecht-focus-outline-width, 0);
417
411
  }
@@ -473,7 +467,7 @@ ol.utrecht-breadcrumb__list {
473
467
  .utrecht-checkbox--focus-visible {
474
468
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
475
469
  outline-color: var(--utrecht-focus-outline-color, transparent);
476
- outline-offset: 0;
470
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
477
471
  outline-style: var(--utrecht-focus-outline-style, solid);
478
472
  outline-width: var(--utrecht-focus-outline-width, 0);
479
473
  }
@@ -481,7 +475,7 @@ ol.utrecht-breadcrumb__list {
481
475
  .utrecht-checkbox--html-input:focus, .utrecht-html input[type=checkbox i]:focus {
482
476
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
483
477
  outline-color: var(--utrecht-focus-outline-color, transparent);
484
- outline-offset: 0;
478
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
485
479
  outline-style: var(--utrecht-focus-outline-style, solid);
486
480
  outline-width: var(--utrecht-focus-outline-width, 0);
487
481
  }
@@ -521,7 +515,7 @@ ol.utrecht-breadcrumb__list {
521
515
  .utrecht-checkbox--focus-visible {
522
516
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
523
517
  outline-color: var(--utrecht-focus-outline-color, transparent);
524
- outline-offset: 0;
518
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
525
519
  outline-style: var(--utrecht-focus-outline-style, solid);
526
520
  outline-width: var(--utrecht-focus-outline-width, 0);
527
521
  }
@@ -529,7 +523,7 @@ ol.utrecht-breadcrumb__list {
529
523
  .utrecht-checkbox--html-input:focus, .utrecht-html input[type=checkbox i]:focus {
530
524
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
531
525
  outline-color: var(--utrecht-focus-outline-color, transparent);
532
- outline-offset: 0;
526
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
533
527
  outline-style: var(--utrecht-focus-outline-style, solid);
534
528
  outline-width: var(--utrecht-focus-outline-width, 0);
535
529
  }
@@ -632,7 +626,7 @@ ol.utrecht-breadcrumb__list {
632
626
  .utrecht-custom-checkbox__box--focus-visible {
633
627
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
634
628
  outline-color: var(--utrecht-focus-outline-color, transparent);
635
- outline-offset: 0;
629
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
636
630
  outline-style: var(--utrecht-focus-outline-style, solid);
637
631
  outline-width: var(--utrecht-focus-outline-width, 0);
638
632
  }
@@ -640,7 +634,7 @@ ol.utrecht-breadcrumb__list {
640
634
  .utrecht-custom-checkbox__input:focus ~ .utrecht-custom-checkbox__box {
641
635
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
642
636
  outline-color: var(--utrecht-focus-outline-color, transparent);
643
- outline-offset: 0;
637
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
644
638
  outline-style: var(--utrecht-focus-outline-style, solid);
645
639
  outline-width: var(--utrecht-focus-outline-width, 0);
646
640
  }
@@ -1311,7 +1305,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1311
1305
  text-underline-offset: var(--utrecht-link-text-underline-offset);
1312
1306
  }
1313
1307
 
1314
- .utrecht-link-icon-left {
1308
+ .utrecht-link--icon-left {
1315
1309
  background-image: var(--utrecht-link-icon-left-background-image, none);
1316
1310
  background-position: 0 0.25em;
1317
1311
  background-repeat: no-repeat;
@@ -1354,7 +1348,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1354
1348
  .utrecht-link--focus-visible, .utrecht-html a:focus, .utrecht-link:focus {
1355
1349
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1356
1350
  outline-color: var(--utrecht-focus-outline-color, transparent);
1357
- outline-offset: 0;
1351
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
1358
1352
  outline-style: var(--utrecht-focus-outline-style, solid);
1359
1353
  outline-width: var(--utrecht-focus-outline-width, 0);
1360
1354
  }
@@ -1371,6 +1365,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
1371
1365
  white-space: nowrap;
1372
1366
  }
1373
1367
 
1368
+ /* stylelint-disable-next-line block-no-empty */
1369
+ /* stylelint-disable-next-line block-no-empty */
1374
1370
  /**
1375
1371
  * @license EUPL-1.2
1376
1372
  * Copyright (c) 2021 Robbert Broersma
@@ -1455,7 +1451,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1455
1451
  .utrecht-mapcontrolbutton--focus-visible, .utrecht-mapcontrolbutton:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-mapcontrolbutton--disabled) {
1456
1452
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1457
1453
  outline-color: var(--utrecht-focus-outline-color, transparent);
1458
- outline-offset: 0;
1454
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
1459
1455
  outline-style: var(--utrecht-focus-outline-style, solid);
1460
1456
  outline-width: var(--utrecht-focus-outline-width, 0);
1461
1457
  }
@@ -1527,7 +1523,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1527
1523
  .utrecht-menulijst__link--focus-visible, .utrecht-menulijst__link:focus {
1528
1524
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1529
1525
  outline-color: var(--utrecht-focus-outline-color, transparent);
1530
- outline-offset: 0;
1526
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
1531
1527
  outline-style: var(--utrecht-focus-outline-style, solid);
1532
1528
  outline-width: var(--utrecht-focus-outline-width, 0);
1533
1529
  }
@@ -1608,7 +1604,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1608
1604
  .utrecht-topnav__link--focus-visible, .utrecht-topnav__link:focus {
1609
1605
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1610
1606
  outline-color: var(--utrecht-focus-outline-color, transparent);
1611
- outline-offset: 0;
1607
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
1612
1608
  outline-style: var(--utrecht-focus-outline-style, solid);
1613
1609
  outline-width: var(--utrecht-focus-outline-width, 0);
1614
1610
  }
@@ -1702,7 +1698,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1702
1698
  .utrecht-sidenav__link--focus-visible, .utrecht-sidenav__link:focus {
1703
1699
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1704
1700
  outline-color: var(--utrecht-focus-outline-color, transparent);
1705
- outline-offset: 0;
1701
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
1706
1702
  outline-style: var(--utrecht-focus-outline-style, solid);
1707
1703
  outline-width: var(--utrecht-focus-outline-width, 0);
1708
1704
  }
@@ -1873,7 +1869,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1873
1869
  .utrecht-topnav__link--focus-visible, .utrecht-topnav__link:focus {
1874
1870
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1875
1871
  outline-color: var(--utrecht-focus-outline-color, transparent);
1876
- outline-offset: 0;
1872
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
1877
1873
  outline-style: var(--utrecht-focus-outline-style, solid);
1878
1874
  outline-width: var(--utrecht-focus-outline-width, 0);
1879
1875
  }
@@ -2103,7 +2099,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
2103
2099
  .utrecht-pagination__relative-link:focus {
2104
2100
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
2105
2101
  outline-color: var(--utrecht-focus-outline-color, transparent);
2106
- outline-offset: 0;
2102
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
2107
2103
  outline-style: var(--utrecht-focus-outline-style, solid);
2108
2104
  outline-width: var(--utrecht-focus-outline-width, 0);
2109
2105
  }
@@ -2189,7 +2185,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
2189
2185
  .utrecht-radio-button--focus-visible, .utrecht-radio-button--html-input:focus, .utrecht-html input[type=radio i]:focus {
2190
2186
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
2191
2187
  outline-color: var(--utrecht-focus-outline-color, transparent);
2192
- outline-offset: 0;
2188
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
2193
2189
  outline-style: var(--utrecht-focus-outline-style, solid);
2194
2190
  outline-width: var(--utrecht-focus-outline-width, 0);
2195
2191
  }
@@ -2287,7 +2283,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
2287
2283
  .utrecht-select--focus-visible, .utrecht-select--html-select:focus, .utrecht-html select:focus {
2288
2284
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
2289
2285
  outline-color: var(--utrecht-focus-outline-color, transparent);
2290
- outline-offset: 0;
2286
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
2291
2287
  outline-style: var(--utrecht-focus-outline-style, solid);
2292
2288
  outline-width: var(--utrecht-focus-outline-width, 0);
2293
2289
  }
@@ -2491,7 +2487,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
2491
2487
  .utrecht-textarea--focus-visible, .utrecht-textarea--html-textarea:focus, .utrecht-html textarea:focus {
2492
2488
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
2493
2489
  outline-color: var(--utrecht-focus-outline-color, transparent);
2494
- outline-offset: 0;
2490
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
2495
2491
  outline-style: var(--utrecht-focus-outline-style, solid);
2496
2492
  outline-width: var(--utrecht-focus-outline-width, 0);
2497
2493
  }
@@ -2635,7 +2631,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
2635
2631
  .utrecht-html input[type=week i]:focus {
2636
2632
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
2637
2633
  outline-color: var(--utrecht-focus-outline-color, transparent);
2638
- outline-offset: 0;
2634
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
2639
2635
  outline-style: var(--utrecht-focus-outline-style, solid);
2640
2636
  outline-width: var(--utrecht-focus-outline-width, 0);
2641
2637
  }
@@ -2776,16 +2772,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
2776
2772
  * Copyright (c) 2021 Gemeente Utrecht
2777
2773
  */
2778
2774
  /* Collection of all semantic HTML styles in the component library */
2779
- /**
2780
- * @license EUPL-1.2
2781
- * Copyright (c) 2021 Robbert Broersma
2782
- */
2783
- /**
2784
- * @license EUPL-1.2
2785
- * Copyright (c) 2021 Robbert Broersma
2786
- */
2787
- /* stylelint-disable-next-line block-no-empty */
2788
- /* stylelint-disable-next-line block-no-empty */
2789
2775
  /**
2790
2776
  * @license EUPL-1.2
2791
2777
  * Copyright (c) 2021 Robbert Broersma
@@ -2921,7 +2907,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
2921
2907
  /* the pseudo-class for `:focus-visible` is implemented via the mixin */
2922
2908
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
2923
2909
  outline-color: var(--utrecht-focus-outline-color, transparent);
2924
- outline-offset: 0;
2910
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
2925
2911
  outline-style: var(--utrecht-focus-outline-style, solid);
2926
2912
  outline-width: var(--utrecht-focus-outline-width, 0);
2927
2913
  }
@@ -2989,7 +2975,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
2989
2975
  .utrecht-checkbox--focus-visible {
2990
2976
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
2991
2977
  outline-color: var(--utrecht-focus-outline-color, transparent);
2992
- outline-offset: 0;
2978
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
2993
2979
  outline-style: var(--utrecht-focus-outline-style, solid);
2994
2980
  outline-width: var(--utrecht-focus-outline-width, 0);
2995
2981
  }
@@ -2997,7 +2983,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
2997
2983
  .utrecht-checkbox--html-input:focus, .utrecht-html input[type=checkbox i]:focus {
2998
2984
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
2999
2985
  outline-color: var(--utrecht-focus-outline-color, transparent);
3000
- outline-offset: 0;
2986
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
3001
2987
  outline-style: var(--utrecht-focus-outline-style, solid);
3002
2988
  outline-width: var(--utrecht-focus-outline-width, 0);
3003
2989
  }
@@ -3293,16 +3279,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
3293
3279
  * Copyright (c) 2021 Robbert Broersma
3294
3280
  */
3295
3281
  /* Collection of all semantic HTML styles in the component library */
3296
- /**
3297
- * @license EUPL-1.2
3298
- * Copyright (c) 2021 Robbert Broersma
3299
- */
3300
- /**
3301
- * @license EUPL-1.2
3302
- * Copyright (c) 2021 Robbert Broersma
3303
- */
3304
- /* stylelint-disable-next-line block-no-empty */
3305
- /* stylelint-disable-next-line block-no-empty */
3306
3282
  /**
3307
3283
  * @license EUPL-1.2
3308
3284
  * Copyright (c) 2021 Robbert Broersma
@@ -3438,7 +3414,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
3438
3414
  /* the pseudo-class for `:focus-visible` is implemented via the mixin */
3439
3415
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
3440
3416
  outline-color: var(--utrecht-focus-outline-color, transparent);
3441
- outline-offset: 0;
3417
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
3442
3418
  outline-style: var(--utrecht-focus-outline-style, solid);
3443
3419
  outline-width: var(--utrecht-focus-outline-width, 0);
3444
3420
  }
@@ -3506,7 +3482,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
3506
3482
  .utrecht-checkbox--focus-visible {
3507
3483
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
3508
3484
  outline-color: var(--utrecht-focus-outline-color, transparent);
3509
- outline-offset: 0;
3485
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
3510
3486
  outline-style: var(--utrecht-focus-outline-style, solid);
3511
3487
  outline-width: var(--utrecht-focus-outline-width, 0);
3512
3488
  }
@@ -3514,7 +3490,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
3514
3490
  .utrecht-checkbox--html-input:focus, .utrecht-html input[type=checkbox i]:focus {
3515
3491
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
3516
3492
  outline-color: var(--utrecht-focus-outline-color, transparent);
3517
- outline-offset: 0;
3493
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
3518
3494
  outline-style: var(--utrecht-focus-outline-style, solid);
3519
3495
  outline-width: var(--utrecht-focus-outline-width, 0);
3520
3496
  }
@@ -3858,7 +3834,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
3858
3834
  text-underline-offset: var(--utrecht-link-text-underline-offset);
3859
3835
  }
3860
3836
 
3861
- .utrecht-link-icon-left {
3837
+ .utrecht-link--icon-left {
3862
3838
  background-image: var(--utrecht-link-icon-left-background-image, none);
3863
3839
  background-position: 0 0.25em;
3864
3840
  background-repeat: no-repeat;
@@ -3901,7 +3877,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
3901
3877
  .utrecht-link--focus-visible, .utrecht-html a:focus, .utrecht-link:focus {
3902
3878
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
3903
3879
  outline-color: var(--utrecht-focus-outline-color, transparent);
3904
- outline-offset: 0;
3880
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
3905
3881
  outline-style: var(--utrecht-focus-outline-style, solid);
3906
3882
  outline-width: var(--utrecht-focus-outline-width, 0);
3907
3883
  }
@@ -3918,6 +3894,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
3918
3894
  white-space: nowrap;
3919
3895
  }
3920
3896
 
3897
+ /* stylelint-disable-next-line block-no-empty */
3898
+ /* stylelint-disable-next-line block-no-empty */
3921
3899
  .utrecht-html a:focus:not(:focus-visible) {
3922
3900
  /* undo focus ring */
3923
3901
  box-shadow: none;
@@ -4016,7 +3994,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
4016
3994
  .utrecht-radio-button--focus-visible, .utrecht-radio-button--html-input:focus, .utrecht-html input[type=radio i]:focus {
4017
3995
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
4018
3996
  outline-color: var(--utrecht-focus-outline-color, transparent);
4019
- outline-offset: 0;
3997
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
4020
3998
  outline-style: var(--utrecht-focus-outline-style, solid);
4021
3999
  outline-width: var(--utrecht-focus-outline-width, 0);
4022
4000
  }
@@ -4208,7 +4186,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
4208
4186
  .utrecht-textarea--focus-visible, .utrecht-textarea--html-textarea:focus, .utrecht-html textarea:focus {
4209
4187
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
4210
4188
  outline-color: var(--utrecht-focus-outline-color, transparent);
4211
- outline-offset: 0;
4189
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
4212
4190
  outline-style: var(--utrecht-focus-outline-style, solid);
4213
4191
  outline-width: var(--utrecht-focus-outline-width, 0);
4214
4192
  }
@@ -4356,7 +4334,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
4356
4334
  .utrecht-html input[type=week i]:focus {
4357
4335
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
4358
4336
  outline-color: var(--utrecht-focus-outline-color, transparent);
4359
- outline-offset: 0;
4337
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
4360
4338
  outline-style: var(--utrecht-focus-outline-style, solid);
4361
4339
  outline-width: var(--utrecht-focus-outline-width, 0);
4362
4340
  }
@@ -4566,7 +4544,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
4566
4544
  text-underline-offset: var(--utrecht-link-text-underline-offset);
4567
4545
  }
4568
4546
 
4569
- .utrecht-link-icon-left {
4547
+ .utrecht-link--icon-left {
4570
4548
  background-image: var(--utrecht-link-icon-left-background-image, none);
4571
4549
  background-position: 0 0.25em;
4572
4550
  background-repeat: no-repeat;
@@ -4609,7 +4587,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
4609
4587
  .utrecht-link--focus-visible, .utrecht-link:focus, .utrecht-html a:focus {
4610
4588
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
4611
4589
  outline-color: var(--utrecht-focus-outline-color, transparent);
4612
- outline-offset: 0;
4590
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
4613
4591
  outline-style: var(--utrecht-focus-outline-style, solid);
4614
4592
  outline-width: var(--utrecht-focus-outline-width, 0);
4615
4593
  }
@@ -4626,6 +4604,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
4626
4604
  white-space: nowrap;
4627
4605
  }
4628
4606
 
4607
+ /* stylelint-disable-next-line block-no-empty */
4608
+ /* stylelint-disable-next-line block-no-empty */
4629
4609
  .utrecht-html a:focus:not(:focus-visible) {
4630
4610
  /* undo focus ring */
4631
4611
  box-shadow: none;
@@ -4724,7 +4704,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
4724
4704
  .utrecht-radio-button--focus-visible, .utrecht-radio-button--html-input:focus, .utrecht-html input[type=radio i]:focus {
4725
4705
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
4726
4706
  outline-color: var(--utrecht-focus-outline-color, transparent);
4727
- outline-offset: 0;
4707
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
4728
4708
  outline-style: var(--utrecht-focus-outline-style, solid);
4729
4709
  outline-width: var(--utrecht-focus-outline-width, 0);
4730
4710
  }
@@ -4792,7 +4772,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
4792
4772
  .utrecht-select--focus-visible, .utrecht-select--html-select:focus, .utrecht-html select:focus {
4793
4773
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
4794
4774
  outline-color: var(--utrecht-focus-outline-color, transparent);
4795
- outline-offset: 0;
4775
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
4796
4776
  outline-style: var(--utrecht-focus-outline-style, solid);
4797
4777
  outline-width: var(--utrecht-focus-outline-width, 0);
4798
4778
  }
@@ -4993,7 +4973,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
4993
4973
  .utrecht-textarea--focus-visible, .utrecht-textarea--html-textarea:focus, .utrecht-html textarea:focus {
4994
4974
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
4995
4975
  outline-color: var(--utrecht-focus-outline-color, transparent);
4996
- outline-offset: 0;
4976
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
4997
4977
  outline-style: var(--utrecht-focus-outline-style, solid);
4998
4978
  outline-width: var(--utrecht-focus-outline-width, 0);
4999
4979
  }
@@ -5141,7 +5121,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
5141
5121
  .utrecht-html input[type=week i]:focus {
5142
5122
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
5143
5123
  outline-color: var(--utrecht-focus-outline-color, transparent);
5144
- outline-offset: 0;
5124
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
5145
5125
  outline-style: var(--utrecht-focus-outline-style, solid);
5146
5126
  outline-width: var(--utrecht-focus-outline-width, 0);
5147
5127
  }
@@ -5279,7 +5259,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
5279
5259
  /* Collection of CSS variables for Utrecht theme applied to `:root` */
5280
5260
  /**
5281
5261
  * Do not edit directly
5282
- * Generated on Mon, 25 Apr 2022 15:59:15 GMT
5262
+ * Generated on Fri, 29 Apr 2022 14:35:16 GMT
5283
5263
  */
5284
5264
  :root {
5285
5265
  --utrecht-toptask-nav-link-grid-max-inline-size: 240px;
package/dist/root-theme.css CHANGED
@@ -5,7 +5,7 @@
5
5
  /* Collection of CSS variables for Utrecht theme applied to `:root` */
6
6
  /**
7
7
  * Do not edit directly
8
- * Generated on Mon, 25 Apr 2022 15:59:15 GMT
8
+ * Generated on Fri, 29 Apr 2022 14:35:16 GMT
9
9
  */
10
10
  :root {
11
11
  --utrecht-toptask-nav-link-grid-max-inline-size: 240px;
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.0.0-alpha.196",
2
+ "version": "1.0.0-alpha.199",
3
3
  "author": "Community for NL Design System",
4
4
  "description": "Component library bundle for the Municipality of Utrecht based on the NL Design System architecture",
5
5
  "license": "EUPL-1.2",
@@ -16,7 +16,7 @@
16
16
  "url": "git@github.com:nl-design-system/utrecht.git"
17
17
  },
18
18
  "devDependencies": {
19
- "@utrecht/design-tokens": "1.0.0-alpha.189",
19
+ "@utrecht/design-tokens": "1.0.0-alpha.192",
20
20
  "node-sass-package-importer": "5.3.2",
21
21
  "rimraf": "3.0.2",
22
22
  "sass": "1.50.1"
@@ -26,5 +26,5 @@
26
26
  "build": "sass src/:dist/ --load-path=../../node_modules/ --no-source-map",
27
27
  "clean": "rimraf dist/"
28
28
  },
29
- "gitHead": "738d89ed7d63db3455f924c79c668c832a8777f4"
29
+ "gitHead": "f8bf4deac60729a83c2fa7cbb3712d5be21181c1"
30
30
  }
package/src/bem.scss CHANGED
@@ -16,7 +16,6 @@
16
16
  * @import "@utrecht/blockquote/index";
17
17
  */
18
18
 
19
- @import "../../../components/alternate-lang-link/bem";
20
19
  @import "../../../components/article/bem";
21
20
  @import "../../../components/badge-counter/bem";
22
21
  @import "../../../components/badge-data/bem";
@@ -47,7 +46,7 @@
47
46
  @import "../../../components/heading-6/bem";
48
47
  @import "../../../components/link-list/bem";
49
48
  @import "../../../components/link-social/bem";
50
- @import "../../../components/link/bem";
49
+ @import "../../../components/link/css";
51
50
  @import "../../../components/logo-button/bem";
52
51
  @import "../../../components/logo/bem";
53
52
  @import "../../../components/mapcontrolbutton/bem";
@@ -61,7 +60,7 @@
61
60
  @import "../../../components/page-header/bem";
62
61
  @import "../../../components/page/bem";
63
62
  @import "../../../components/pagination/bem";
64
- @import "../../../components/paragraph/bem";
63
+ @import "../../../components/paragraph/css";
65
64
  @import "../../../components/pre-heading/bem";
66
65
  @import "../../../components/radio-button/bem";
67
66
  @import "../../../components/search-bar/bem";
package/src/html.scss CHANGED
@@ -5,7 +5,6 @@
5
5
 
6
6
  /* Collection of all semantic HTML styles in the component library */
7
7
 
8
- @import "../../../components/alternate-lang-link/html";
9
8
  @import "../../../components/article/html";
10
9
  @import "../../../components/blockquote/html";
11
10
  @import "../../../components/button/html";