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

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 +41 -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
@@ -643,25 +643,35 @@ ol.utrecht-breadcrumb__list {
643
643
 
644
644
  .utrecht-button--focus-visible {
645
645
  /* 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);
646
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
647
647
  outline-color: var(--utrecht-focus-outline-color, transparent);
648
648
  outline-offset: var(--utrecht-focus-outline-offset, 0);
649
649
  outline-style: var(--utrecht-focus-outline-style, solid);
650
650
  outline-width: var(--utrecht-focus-outline-width, 0);
651
651
  }
652
652
 
653
- .utrecht-button--focus {
653
+ .utrecht-button--focus:not(.utrecht-button--disabled) {
654
654
  background-color: var(--_utrecht-button-focus-background-color);
655
655
  border-color: var(--_utrecht-button-focus-border-color);
656
656
  color: var(--_utrecht-button-focus-color);
657
657
  }
658
658
 
659
+ .utrecht-button:focus {
660
+ /* Show focus ring even for disabled :focus-visible buttons. *
661
+ /* For example: <button disabled tabindex="0"> */
662
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
663
+ outline-color: var(--utrecht-focus-outline-color, transparent);
664
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
665
+ outline-style: var(--utrecht-focus-outline-style, solid);
666
+ outline-width: var(--utrecht-focus-outline-width, 0);
667
+ }
668
+
659
669
  .utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
660
670
  background-color: var(--_utrecht-button-focus-background-color);
661
671
  border-color: var(--_utrecht-button-focus-border-color);
662
672
  color: var(--_utrecht-button-focus-color);
663
673
  /* 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);
674
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
665
675
  outline-color: var(--utrecht-focus-outline-color, transparent);
666
676
  outline-offset: var(--utrecht-focus-outline-offset, 0);
667
677
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -676,7 +686,7 @@ ol.utrecht-breadcrumb__list {
676
686
  outline-style: none;
677
687
  }
678
688
 
679
- .utrecht-button--hover:not(:disabled),
689
+ .utrecht-button--hover:not(:disabled):not(.utrecht-button--disabled),
680
690
  .utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
681
691
  background-color: var(--_utrecht-button-hover-background-color);
682
692
  border-color: var(--_utrecht-button-hover-border-color);
@@ -1351,7 +1361,7 @@ ol.utrecht-breadcrumb__list {
1351
1361
 
1352
1362
  .utrecht-button-link--focus-visible {
1353
1363
  /* 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);
1364
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
1355
1365
  outline-color: var(--utrecht-focus-outline-color, transparent);
1356
1366
  outline-offset: var(--utrecht-focus-outline-offset, 0);
1357
1367
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -1372,7 +1382,7 @@ ol.utrecht-breadcrumb__list {
1372
1382
  }
1373
1383
  .utrecht-button-link--html-a:focus-visible {
1374
1384
  /* 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);
1385
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
1376
1386
  outline-color: var(--utrecht-focus-outline-color, transparent);
1377
1387
  outline-offset: var(--utrecht-focus-outline-offset, 0);
1378
1388
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -1485,7 +1495,7 @@ ol.utrecht-breadcrumb__list {
1485
1495
  }
1486
1496
 
1487
1497
  .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);
1498
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
1489
1499
  outline-color: var(--utrecht-focus-outline-color, transparent);
1490
1500
  outline-offset: var(--utrecht-focus-outline-offset, 0);
1491
1501
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -1496,7 +1506,7 @@ ol.utrecht-breadcrumb__list {
1496
1506
  cursor: var(--utrecht-action-disabled-cursor);
1497
1507
  }
1498
1508
  .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);
1509
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
1500
1510
  outline-color: var(--utrecht-focus-outline-color, transparent);
1501
1511
  outline-offset: var(--utrecht-focus-outline-offset, 0);
1502
1512
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -1590,7 +1600,7 @@ ol.utrecht-breadcrumb__list {
1590
1600
  }
1591
1601
 
1592
1602
  .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);
1603
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
1594
1604
  outline-color: var(--utrecht-focus-outline-color, transparent);
1595
1605
  outline-offset: var(--utrecht-focus-outline-offset, 0);
1596
1606
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -1616,7 +1626,7 @@ ol.utrecht-breadcrumb__list {
1616
1626
  border-width: var(--utrecht-custom-checkbox-focus-border-width, var(--utrecht-custom-checkbox-border-width));
1617
1627
  }
1618
1628
  .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);
1629
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
1620
1630
  outline-color: var(--utrecht-focus-outline-color, transparent);
1621
1631
  outline-offset: var(--utrecht-focus-outline-offset, 0);
1622
1632
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -1708,7 +1718,7 @@ ol.utrecht-breadcrumb__list {
1708
1718
  }
1709
1719
 
1710
1720
  .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);
1721
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
1712
1722
  outline-color: var(--utrecht-focus-outline-color, transparent);
1713
1723
  outline-offset: var(--utrecht-focus-outline-offset, 0);
1714
1724
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -1756,7 +1766,7 @@ ol.utrecht-breadcrumb__list {
1756
1766
  color: var(--utrecht-custom-radio-button-focus-color, var(--utrecht-custom-radio-button-color));
1757
1767
  }
1758
1768
  .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);
1769
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
1760
1770
  outline-color: var(--utrecht-focus-outline-color, transparent);
1761
1771
  outline-offset: var(--utrecht-focus-outline-offset, 0);
1762
1772
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -2734,7 +2744,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
2734
2744
  }
2735
2745
 
2736
2746
  .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);
2747
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
2738
2748
  outline-color: var(--utrecht-focus-outline-color, transparent);
2739
2749
  outline-offset: var(--utrecht-focus-outline-offset, 0);
2740
2750
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -2787,7 +2797,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
2787
2797
  }
2788
2798
 
2789
2799
  .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);
2800
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
2791
2801
  outline-color: var(--utrecht-focus-outline-color, transparent);
2792
2802
  outline-offset: var(--utrecht-focus-outline-offset, 0);
2793
2803
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -2955,7 +2965,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
2955
2965
  }
2956
2966
 
2957
2967
  .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);
2968
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
2959
2969
  outline-color: var(--utrecht-focus-outline-color, transparent);
2960
2970
  outline-offset: var(--utrecht-focus-outline-offset, 0);
2961
2971
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -2969,7 +2979,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
2969
2979
  text-decoration-skip: none;
2970
2980
  text-decoration-skip-ink: none;
2971
2981
  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);
2982
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
2973
2983
  outline-color: var(--utrecht-focus-outline-color, transparent);
2974
2984
  outline-offset: var(--utrecht-focus-outline-offset, 0);
2975
2985
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -3090,7 +3100,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
3090
3100
  }
3091
3101
 
3092
3102
  .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);
3103
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
3094
3104
  outline-color: var(--utrecht-focus-outline-color, transparent);
3095
3105
  outline-offset: var(--utrecht-focus-outline-offset, 0);
3096
3106
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -3188,7 +3198,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
3188
3198
  }
3189
3199
 
3190
3200
  .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);
3201
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
3192
3202
  outline-color: var(--utrecht-focus-outline-color, transparent);
3193
3203
  outline-offset: var(--utrecht-focus-outline-offset, 0);
3194
3204
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -3282,7 +3292,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
3282
3292
  }
3283
3293
 
3284
3294
  .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);
3295
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
3286
3296
  outline-color: var(--utrecht-focus-outline-color, transparent);
3287
3297
  outline-offset: var(--utrecht-focus-outline-offset, 0);
3288
3298
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -3453,7 +3463,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
3453
3463
  }
3454
3464
 
3455
3465
  .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);
3466
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
3457
3467
  outline-color: var(--utrecht-focus-outline-color, transparent);
3458
3468
  outline-offset: var(--utrecht-focus-outline-offset, 0);
3459
3469
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -3630,7 +3640,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
3630
3640
  */
3631
3641
  .utrecht-pagination__page-link:focus,
3632
3642
  .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);
3643
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
3634
3644
  outline-color: var(--utrecht-focus-outline-color, transparent);
3635
3645
  outline-offset: var(--utrecht-focus-outline-offset, 0);
3636
3646
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -3727,7 +3737,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
3727
3737
 
3728
3738
  .utrecht-pagination__page-link:focus,
3729
3739
  .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);
3740
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
3731
3741
  outline-color: var(--utrecht-focus-outline-color, transparent);
3732
3742
  outline-offset: var(--utrecht-focus-outline-offset, 0);
3733
3743
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -3832,7 +3842,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
3832
3842
  }
3833
3843
 
3834
3844
  .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);
3845
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
3836
3846
  outline-color: var(--utrecht-focus-outline-color, transparent);
3837
3847
  outline-offset: var(--utrecht-focus-outline-offset, 0);
3838
3848
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -3843,7 +3853,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
3843
3853
  cursor: var(--utrecht-action-disabled-cursor);
3844
3854
  }
3845
3855
  .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);
3856
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
3847
3857
  outline-color: var(--utrecht-focus-outline-color, transparent);
3848
3858
  outline-offset: var(--utrecht-focus-outline-offset, 0);
3849
3859
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -3955,7 +3965,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
3955
3965
  }
3956
3966
 
3957
3967
  .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);
3968
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
3959
3969
  outline-color: var(--utrecht-focus-outline-color, transparent);
3960
3970
  outline-offset: var(--utrecht-focus-outline-offset, 0);
3961
3971
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -3982,7 +3992,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
3982
3992
  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
3993
  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
3994
  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);
3995
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
3986
3996
  outline-color: var(--utrecht-focus-outline-color, transparent);
3987
3997
  outline-offset: var(--utrecht-focus-outline-offset, 0);
3988
3998
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -4087,7 +4097,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
4087
4097
  .utrecht-skip-link--focus,
4088
4098
  .utrecht-skip-link:focus,
4089
4099
  .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);
4100
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
4091
4101
  outline-color: var(--utrecht-focus-outline-color, transparent);
4092
4102
  outline-offset: var(--utrecht-focus-outline-offset, 0);
4093
4103
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -4282,7 +4292,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
4282
4292
  }
4283
4293
 
4284
4294
  .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);
4295
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
4286
4296
  outline-color: var(--utrecht-focus-outline-color, transparent);
4287
4297
  outline-offset: var(--utrecht-focus-outline-offset, 0);
4288
4298
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -4310,7 +4320,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
4310
4320
  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
4321
  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
4322
  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);
4323
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
4314
4324
  outline-color: var(--utrecht-focus-outline-color, transparent);
4315
4325
  outline-offset: var(--utrecht-focus-outline-offset, 0);
4316
4326
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -4398,7 +4408,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
4398
4408
  }
4399
4409
 
4400
4410
  .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);
4411
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
4402
4412
  outline-color: var(--utrecht-focus-outline-color, transparent);
4403
4413
  outline-offset: var(--utrecht-focus-outline-offset, 0);
4404
4414
  outline-style: var(--utrecht-focus-outline-style, solid);
@@ -4440,7 +4450,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
4440
4450
  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
4451
  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
4452
  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);
4453
+ box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
4444
4454
  outline-color: var(--utrecht-focus-outline-color, transparent);
4445
4455
  outline-offset: var(--utrecht-focus-outline-offset, 0);
4446
4456
  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.357",
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": "b6f4451b41ec66fa37f594626f12c60453f2bba8"
30
30
  }