@utrecht/component-library-css 1.0.0-alpha.356 → 1.0.0-alpha.358

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 (3) hide show
  1. package/dist/html.css +7 -7
  2. package/dist/index.css +99 -31
  3. package/package.json +2 -2
package/dist/html.css CHANGED
@@ -644,7 +644,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
644
644
  }
645
645
  .utrecht-html button:focus-visible {
646
646
  /* the pseudo-class for `:focus-visible` is implemented via the mixin */
647
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
647
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
648
648
  outline-color: var(--utrecht-focus-outline-color, transparent);
649
649
  outline-offset: var(--utrecht-focus-outline-offset, 0);
650
650
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -660,7 +660,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
660
660
  cursor: var(--utrecht-action-disabled-cursor);
661
661
  }
662
662
  .utrecht-html input[type=checkbox i]:focus {
663
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
663
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
664
664
  outline-color: var(--utrecht-focus-outline-color, transparent);
665
665
  outline-offset: var(--utrecht-focus-outline-offset, 0);
666
666
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -873,7 +873,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
873
873
  text-decoration-skip: none;
874
874
  text-decoration-skip-ink: none;
875
875
  text-decoration-thickness: max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
876
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
876
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
877
877
  outline-color: var(--utrecht-focus-outline-color, transparent);
878
878
  outline-offset: var(--utrecht-focus-outline-offset, 0);
879
879
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -940,7 +940,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
940
940
  cursor: var(--utrecht-action-disabled-cursor);
941
941
  }
942
942
  .utrecht-html input[type=radio i]:focus {
943
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
943
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
944
944
  outline-color: var(--utrecht-focus-outline-color, transparent);
945
945
  outline-offset: var(--utrecht-focus-outline-offset, 0);
946
946
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -988,7 +988,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
988
988
  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))));
989
989
  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))));
990
990
  color: var(--utrecht-select-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
991
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
991
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
992
992
  outline-color: var(--utrecht-focus-outline-color, transparent);
993
993
  outline-offset: var(--utrecht-focus-outline-offset, 0);
994
994
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -1137,7 +1137,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1137
1137
  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))));
1138
1138
  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))));
1139
1139
  color: var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
1140
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1140
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
1141
1141
  outline-color: var(--utrecht-focus-outline-color, transparent);
1142
1142
  outline-offset: var(--utrecht-focus-outline-offset, 0);
1143
1143
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -1229,7 +1229,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1229
1229
  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))));
1230
1230
  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))));
1231
1231
  color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
1232
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1232
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
1233
1233
  outline-color: var(--utrecht-focus-outline-color, transparent);
1234
1234
  outline-offset: var(--utrecht-focus-outline-offset, 0);
1235
1235
  outline-style: var(--utrecht-focus-outline-style, solid);
package/dist/index.css CHANGED
@@ -29,6 +29,64 @@
29
29
  * Will become:
30
30
  * @import "@utrecht/blockquote/index";
31
31
  */
32
+ /**
33
+ * @license EUPL-1.2
34
+ * Copyright (c) 2020-2022 Gemeente Utrecht
35
+ * Copyright (c) 2020-2022 Frameless B.V.
36
+ */
37
+ /**
38
+ * @license EUPL-1.2
39
+ * Copyright (c) 2020-2022 Gemeente Utrecht
40
+ * Copyright (c) 2020-2022 Frameless B.V.
41
+ */
42
+ .utrecht-alert {
43
+ background-color: var(--_utrecht-alert-background-color, var(--utrecht-alert-background-color));
44
+ color: var(--_utrecht-alert-color, var(--utrecht-alert-color));
45
+ display: grid;
46
+ gap: var(--utrecht-alert-icon-gap);
47
+ grid-template-areas: "icon message";
48
+ grid-template-columns: 0fr 100fr;
49
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-end, 0));
50
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-start, 0));
51
+ padding-block-end: var(--utrecht-alert-padding-block-end);
52
+ padding-block-start: var(--utrecht-alert-padding-block-start);
53
+ padding-inline-end: var(--utrecht-alert-padding-inline-end);
54
+ padding-inline-start: var(--utrecht-alert-padding-inline-start);
55
+ }
56
+
57
+ .utrecht-alert__icon {
58
+ --utrecht-icon-color: var(--_utrecht-alert-icon-color, var(--utrecht-alert-icon-color));
59
+ grid-area: icon;
60
+ }
61
+
62
+ .utrecht-alert__message {
63
+ grid-area: message;
64
+ }
65
+
66
+ .utrecht-alert--info {
67
+ --_utrecht-alert-icon-color: var(--utrecht-alert-icon-info-color);
68
+ --_utrecht-alert-background-color: var(--utrecht-alert-info-background-color);
69
+ --_utrecht-alert-color: var(--utrecht-alert-info-color);
70
+ }
71
+
72
+ .utrecht-alert--ok {
73
+ --_utrecht-alert-icon-color: var(--utrecht-alert-icon-ok-color);
74
+ --_utrecht-alert-background-color: var(--utrecht-alert-ok-background-color);
75
+ --_utrecht-alert-color: var(--utrecht-alert-ok-color);
76
+ }
77
+
78
+ .utrecht-alert--warning {
79
+ --_utrecht-alert-icon-color: var(--utrecht-alert-icon-warning-color);
80
+ --_utrecht-alert-background-color: var(--utrecht-alert-warning-background-color);
81
+ --_utrecht-alert-color: var(--utrecht-alert-warning-color);
82
+ }
83
+
84
+ .utrecht-alert--error {
85
+ --_utrecht-alert-icon-color: var(--utrecht-alert-icon-error-color);
86
+ --_utrecht-alert-background-color: var(--utrecht-alert-error-background-color);
87
+ --_utrecht-alert-color: var(--utrecht-alert-error-color);
88
+ }
89
+
32
90
  /**
33
91
  * @license EUPL-1.2
34
92
  * Copyright (c) 2020-2022 Gemeente Utrecht
@@ -643,25 +701,35 @@ ol.utrecht-breadcrumb__list {
643
701
 
644
702
  .utrecht-button--focus-visible {
645
703
  /* the pseudo-class for `:focus-visible` is implemented via the mixin */
646
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
704
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
647
705
  outline-color: var(--utrecht-focus-outline-color, transparent);
648
706
  outline-offset: var(--utrecht-focus-outline-offset, 0);
649
707
  outline-style: var(--utrecht-focus-outline-style, solid);
650
708
  outline-width: var(--utrecht-focus-outline-width, 0);
651
709
  }
652
710
 
653
- .utrecht-button--focus {
711
+ .utrecht-button--focus:not(.utrecht-button--disabled) {
654
712
  background-color: var(--_utrecht-button-focus-background-color);
655
713
  border-color: var(--_utrecht-button-focus-border-color);
656
714
  color: var(--_utrecht-button-focus-color);
657
715
  }
658
716
 
717
+ .utrecht-button:focus {
718
+ /* Show focus ring even for disabled :focus-visible buttons. *
719
+ /* For example: <button disabled tabindex="0"> */
720
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
721
+ outline-color: var(--utrecht-focus-outline-color, transparent);
722
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
723
+ outline-style: var(--utrecht-focus-outline-style, solid);
724
+ outline-width: var(--utrecht-focus-outline-width, 0);
725
+ }
726
+
659
727
  .utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
660
728
  background-color: var(--_utrecht-button-focus-background-color);
661
729
  border-color: var(--_utrecht-button-focus-border-color);
662
730
  color: var(--_utrecht-button-focus-color);
663
731
  /* the pseudo-class for `:focus-visible` is implemented via the mixin */
664
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
732
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
665
733
  outline-color: var(--utrecht-focus-outline-color, transparent);
666
734
  outline-offset: var(--utrecht-focus-outline-offset, 0);
667
735
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -676,7 +744,7 @@ ol.utrecht-breadcrumb__list {
676
744
  outline-style: none;
677
745
  }
678
746
 
679
- .utrecht-button--hover:not(:disabled),
747
+ .utrecht-button--hover:not(:disabled):not(.utrecht-button--disabled),
680
748
  .utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
681
749
  background-color: var(--_utrecht-button-hover-background-color);
682
750
  border-color: var(--_utrecht-button-hover-border-color);
@@ -1351,7 +1419,7 @@ ol.utrecht-breadcrumb__list {
1351
1419
 
1352
1420
  .utrecht-button-link--focus-visible {
1353
1421
  /* the pseudo-class for `:focus-visible` is implemented via the mixin */
1354
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1422
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
1355
1423
  outline-color: var(--utrecht-focus-outline-color, transparent);
1356
1424
  outline-offset: var(--utrecht-focus-outline-offset, 0);
1357
1425
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -1372,7 +1440,7 @@ ol.utrecht-breadcrumb__list {
1372
1440
  }
1373
1441
  .utrecht-button-link--html-a:focus-visible {
1374
1442
  /* the pseudo-class for `:focus-visible` is implemented via the mixin */
1375
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1443
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
1376
1444
  outline-color: var(--utrecht-focus-outline-color, transparent);
1377
1445
  outline-offset: var(--utrecht-focus-outline-offset, 0);
1378
1446
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -1485,7 +1553,7 @@ ol.utrecht-breadcrumb__list {
1485
1553
  }
1486
1554
 
1487
1555
  .utrecht-checkbox--focus-visible {
1488
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1556
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
1489
1557
  outline-color: var(--utrecht-focus-outline-color, transparent);
1490
1558
  outline-offset: var(--utrecht-focus-outline-offset, 0);
1491
1559
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -1496,7 +1564,7 @@ ol.utrecht-breadcrumb__list {
1496
1564
  cursor: var(--utrecht-action-disabled-cursor);
1497
1565
  }
1498
1566
  .utrecht-checkbox--html-input:focus {
1499
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1567
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
1500
1568
  outline-color: var(--utrecht-focus-outline-color, transparent);
1501
1569
  outline-offset: var(--utrecht-focus-outline-offset, 0);
1502
1570
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -1590,7 +1658,7 @@ ol.utrecht-breadcrumb__list {
1590
1658
  }
1591
1659
 
1592
1660
  .utrecht-custom-checkbox--focus-visible {
1593
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1661
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
1594
1662
  outline-color: var(--utrecht-focus-outline-color, transparent);
1595
1663
  outline-offset: var(--utrecht-focus-outline-offset, 0);
1596
1664
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -1616,7 +1684,7 @@ ol.utrecht-breadcrumb__list {
1616
1684
  border-width: var(--utrecht-custom-checkbox-focus-border-width, var(--utrecht-custom-checkbox-border-width));
1617
1685
  }
1618
1686
  .utrecht-custom-checkbox--html-input:focus-visible {
1619
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1687
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
1620
1688
  outline-color: var(--utrecht-focus-outline-color, transparent);
1621
1689
  outline-offset: var(--utrecht-focus-outline-offset, 0);
1622
1690
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -1708,7 +1776,7 @@ ol.utrecht-breadcrumb__list {
1708
1776
  }
1709
1777
 
1710
1778
  .utrecht-custom-radio-button--focus-visible {
1711
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1779
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
1712
1780
  outline-color: var(--utrecht-focus-outline-color, transparent);
1713
1781
  outline-offset: var(--utrecht-focus-outline-offset, 0);
1714
1782
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -1756,7 +1824,7 @@ ol.utrecht-breadcrumb__list {
1756
1824
  color: var(--utrecht-custom-radio-button-focus-color, var(--utrecht-custom-radio-button-color));
1757
1825
  }
1758
1826
  .utrecht-custom-radio-button--html-input:focus-visible {
1759
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1827
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
1760
1828
  outline-color: var(--utrecht-focus-outline-color, transparent);
1761
1829
  outline-offset: var(--utrecht-focus-outline-offset, 0);
1762
1830
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -2734,7 +2802,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
2734
2802
  }
2735
2803
 
2736
2804
  .utrecht-link-button--focus-visible, .utrecht-link-button--html-button:focus-visible {
2737
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
2805
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
2738
2806
  outline-color: var(--utrecht-focus-outline-color, transparent);
2739
2807
  outline-offset: var(--utrecht-focus-outline-offset, 0);
2740
2808
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -2787,7 +2855,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
2787
2855
  }
2788
2856
 
2789
2857
  .utrecht-link-social:focus-visible {
2790
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
2858
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
2791
2859
  outline-color: var(--utrecht-focus-outline-color, transparent);
2792
2860
  outline-offset: var(--utrecht-focus-outline-offset, 0);
2793
2861
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -2955,7 +3023,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
2955
3023
  }
2956
3024
 
2957
3025
  .utrecht-link--focus-visible {
2958
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
3026
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
2959
3027
  outline-color: var(--utrecht-focus-outline-color, transparent);
2960
3028
  outline-offset: var(--utrecht-focus-outline-offset, 0);
2961
3029
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -2969,7 +3037,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
2969
3037
  text-decoration-skip: none;
2970
3038
  text-decoration-skip-ink: none;
2971
3039
  text-decoration-thickness: max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
2972
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
3040
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
2973
3041
  outline-color: var(--utrecht-focus-outline-color, transparent);
2974
3042
  outline-offset: var(--utrecht-focus-outline-offset, 0);
2975
3043
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -3090,7 +3158,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
3090
3158
  }
3091
3159
 
3092
3160
  .utrecht-mapcontrolbutton--focus-visible, .utrecht-mapcontrolbutton:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-mapcontrolbutton--disabled) {
3093
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
3161
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
3094
3162
  outline-color: var(--utrecht-focus-outline-color, transparent);
3095
3163
  outline-offset: var(--utrecht-focus-outline-offset, 0);
3096
3164
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -3188,7 +3256,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
3188
3256
  }
3189
3257
 
3190
3258
  .utrecht-menulijst__link--focus-visible, .utrecht-menulijst__link:focus {
3191
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
3259
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
3192
3260
  outline-color: var(--utrecht-focus-outline-color, transparent);
3193
3261
  outline-offset: var(--utrecht-focus-outline-offset, 0);
3194
3262
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -3282,7 +3350,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
3282
3350
  }
3283
3351
 
3284
3352
  .utrecht-sidenav__link--focus-visible, .utrecht-sidenav__link:focus {
3285
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
3353
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
3286
3354
  outline-color: var(--utrecht-focus-outline-color, transparent);
3287
3355
  outline-offset: var(--utrecht-focus-outline-offset, 0);
3288
3356
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -3453,7 +3521,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
3453
3521
  }
3454
3522
 
3455
3523
  .utrecht-topnav__link--focus-visible, .utrecht-topnav__link:focus {
3456
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
3524
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
3457
3525
  outline-color: var(--utrecht-focus-outline-color, transparent);
3458
3526
  outline-offset: var(--utrecht-focus-outline-offset, 0);
3459
3527
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -3630,7 +3698,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
3630
3698
  */
3631
3699
  .utrecht-pagination__page-link:focus,
3632
3700
  .utrecht-pagination__relative-link:focus {
3633
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
3701
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
3634
3702
  outline-color: var(--utrecht-focus-outline-color, transparent);
3635
3703
  outline-offset: var(--utrecht-focus-outline-offset, 0);
3636
3704
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -3727,7 +3795,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
3727
3795
 
3728
3796
  .utrecht-pagination__page-link:focus,
3729
3797
  .utrecht-pagination__relative-link:focus {
3730
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
3798
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
3731
3799
  outline-color: var(--utrecht-focus-outline-color, transparent);
3732
3800
  outline-offset: var(--utrecht-focus-outline-offset, 0);
3733
3801
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -3832,7 +3900,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
3832
3900
  }
3833
3901
 
3834
3902
  .utrecht-radio-button--focus-visible {
3835
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
3903
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
3836
3904
  outline-color: var(--utrecht-focus-outline-color, transparent);
3837
3905
  outline-offset: var(--utrecht-focus-outline-offset, 0);
3838
3906
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -3843,7 +3911,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
3843
3911
  cursor: var(--utrecht-action-disabled-cursor);
3844
3912
  }
3845
3913
  .utrecht-radio-button--html-input:focus {
3846
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
3914
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
3847
3915
  outline-color: var(--utrecht-focus-outline-color, transparent);
3848
3916
  outline-offset: var(--utrecht-focus-outline-offset, 0);
3849
3917
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -3955,7 +4023,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
3955
4023
  }
3956
4024
 
3957
4025
  .utrecht-select--focus-visible {
3958
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
4026
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
3959
4027
  outline-color: var(--utrecht-focus-outline-color, transparent);
3960
4028
  outline-offset: var(--utrecht-focus-outline-offset, 0);
3961
4029
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -3982,7 +4050,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
3982
4050
  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))));
3983
4051
  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))));
3984
4052
  color: var(--utrecht-select-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
3985
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
4053
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
3986
4054
  outline-color: var(--utrecht-focus-outline-color, transparent);
3987
4055
  outline-offset: var(--utrecht-focus-outline-offset, 0);
3988
4056
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -4087,7 +4155,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
4087
4155
  .utrecht-skip-link--focus,
4088
4156
  .utrecht-skip-link:focus,
4089
4157
  .utrecht-skip-link:focus-visible {
4090
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
4158
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
4091
4159
  outline-color: var(--utrecht-focus-outline-color, transparent);
4092
4160
  outline-offset: var(--utrecht-focus-outline-offset, 0);
4093
4161
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -4282,7 +4350,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
4282
4350
  }
4283
4351
 
4284
4352
  .utrecht-textarea--focus-visible {
4285
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
4353
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
4286
4354
  outline-color: var(--utrecht-focus-outline-color, transparent);
4287
4355
  outline-offset: var(--utrecht-focus-outline-offset, 0);
4288
4356
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -4310,7 +4378,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
4310
4378
  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))));
4311
4379
  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))));
4312
4380
  color: var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
4313
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
4381
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
4314
4382
  outline-color: var(--utrecht-focus-outline-color, transparent);
4315
4383
  outline-offset: var(--utrecht-focus-outline-offset, 0);
4316
4384
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -4398,7 +4466,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
4398
4466
  }
4399
4467
 
4400
4468
  .utrecht-textbox--focus-visible {
4401
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
4469
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
4402
4470
  outline-color: var(--utrecht-focus-outline-color, transparent);
4403
4471
  outline-offset: var(--utrecht-focus-outline-offset, 0);
4404
4472
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -4440,7 +4508,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
4440
4508
  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))));
4441
4509
  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))));
4442
4510
  color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
4443
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
4511
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
4444
4512
  outline-color: var(--utrecht-focus-outline-color, transparent);
4445
4513
  outline-offset: var(--utrecht-focus-outline-offset, 0);
4446
4514
  outline-style: var(--utrecht-focus-outline-style, solid);
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.0.0-alpha.356",
2
+ "version": "1.0.0-alpha.358",
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",
@@ -26,5 +26,5 @@
26
26
  "clean": "rimraf dist/"
27
27
  },
28
28
  "main": "dist/index.css",
29
- "gitHead": "bcd00ea1e4c2eb7745095d4a95ab2e524707cf9e"
29
+ "gitHead": "12f79709a38e54d3bad3942d34dd3c802553fa1e"
30
30
  }