@navikt/ds-css 5.7.4 → 5.7.5

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 (12) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/component/form.css +38 -33
  3. package/dist/component/form.min.css +1 -1
  4. package/dist/component/index.css +39 -34
  5. package/dist/component/index.min.css +1 -1
  6. package/dist/components.css +38 -33
  7. package/dist/components.min.css +1 -1
  8. package/dist/global/tokens.css +1 -1
  9. package/dist/index.css +39 -34
  10. package/dist/index.min.css +1 -1
  11. package/form/radio-checkbox.css +38 -33
  12. package/package.json +2 -2
package/dist/components.css CHANGED
@@ -2679,11 +2679,13 @@
2679
2679
  .navds-radio__label::before {
2680
2680
  content: "";
2681
2681
  background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
2682
- box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default));
2683
- width: 1.5rem;
2684
- height: 1.5rem;
2685
- border-radius: var(--a-border-radius-medium);
2682
+ border-radius: var(--a-border-radius-small);
2686
2683
  flex-shrink: 0;
2684
+ box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default));
2685
+ width: calc(1.5rem - 0.25rem);
2686
+ height: calc(1.5rem - 0.25rem);
2687
+ margin-block: 2px;
2688
+ margin-inline: 2px;
2687
2689
  }
2688
2690
 
2689
2691
  .navds-radio__label::before {
@@ -2712,36 +2714,37 @@
2712
2714
 
2713
2715
  .navds-checkbox--small > .navds-checkbox__label::before,
2714
2716
  .navds-radio--small > .navds-radio__label::before {
2715
- width: 1.25rem;
2716
- height: 1.25rem;
2717
+ width: calc(1.25rem - 0.25rem);
2718
+ height: calc(1.25rem - 0.25rem);
2717
2719
  }
2718
2720
 
2719
2721
  .navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
2720
2722
  .navds-radio__input:focus-visible + .navds-radio__label::before {
2721
- box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
2723
+ box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)),
2724
+ 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
2722
2725
  }
2723
2726
 
2724
2727
  @supports not selector(:focus-visible) {
2725
2728
  .navds-checkbox__input:focus + .navds-checkbox__label::before,
2726
2729
  .navds-radio__input:focus + .navds-radio__label::before {
2727
- box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
2730
+ box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), 0 0 0 4px var(--a-border-focus);
2728
2731
  }
2729
2732
  }
2730
2733
 
2731
2734
  .navds-checkbox__input:hover:focus-visible + .navds-checkbox__label::before,
2732
2735
  .navds-radio__input:hover:focus-visible + .navds-radio__label::before {
2733
- box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), var(--a-shadow-focus);
2736
+ box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), 0 0 0 4px var(--a-border-focus);
2734
2737
  }
2735
2738
 
2736
2739
  @supports not selector(:focus-visible) {
2737
2740
  .navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
2738
2741
  .navds-radio__input:hover:focus + .navds-radio__label::before {
2739
- box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), var(--a-shadow-focus);
2742
+ box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), 0 0 0 4px var(--a-border-focus);
2740
2743
  }
2741
2744
  }
2742
2745
 
2743
2746
  .navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
2744
- box-shadow: none;
2747
+ box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
2745
2748
  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
2746
2749
  }
2747
2750
 
@@ -2762,7 +2765,7 @@
2762
2765
  }
2763
2766
 
2764
2767
  .navds-checkbox__input:checked + .navds-checkbox__label::before {
2765
- box-shadow: none;
2768
+ box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
2766
2769
  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
2767
2770
  }
2768
2771
 
@@ -2795,31 +2798,33 @@
2795
2798
 
2796
2799
  .navds-checkbox__input:indeterminate:focus-visible + .navds-checkbox__label::before,
2797
2800
  .navds-checkbox__input:checked:focus-visible + .navds-checkbox__label::before {
2798
- box-shadow: inset 0 0 0 1px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
2801
+ box-shadow: 0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action)),
2802
+ 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
2799
2803
  }
2800
2804
 
2801
2805
  @supports not selector(:focus-visible) {
2802
2806
  .navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
2803
2807
  .navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
2804
- box-shadow: inset 0 0 0 1px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
2808
+ box-shadow: 0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action)),
2809
+ 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
2805
2810
  }
2806
2811
  }
2807
2812
 
2808
2813
  .navds-radio__input:checked + .navds-radio__label::before {
2809
- box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
2810
- inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default));
2814
+ box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
2815
+ inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default));
2811
2816
  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
2812
2817
  }
2813
2818
 
2814
2819
  .navds-radio__input:checked:focus-visible + .navds-radio__label::before {
2815
- box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
2816
- inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
2820
+ box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
2821
+ inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
2817
2822
  }
2818
2823
 
2819
2824
  @supports not selector(:focus-visible) {
2820
2825
  .navds-radio__input:checked:focus + .navds-radio__label::before {
2821
- box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
2822
- inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
2826
+ box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
2827
+ inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
2823
2828
  }
2824
2829
  }
2825
2830
 
@@ -2831,13 +2836,13 @@
2831
2836
  .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus-visible)
2832
2837
  + .navds-checkbox__label::before,
2833
2838
  .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
2834
- box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
2839
+ box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
2835
2840
  }
2836
2841
 
2837
2842
  @supports not selector(:focus-visible) {
2838
2843
  .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus) + .navds-checkbox__label::before,
2839
2844
  .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
2840
- box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
2845
+ box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
2841
2846
  }
2842
2847
  }
2843
2848
 
@@ -2850,14 +2855,14 @@
2850
2855
  > .navds-checkbox__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
2851
2856
  + .navds-checkbox__label::before,
2852
2857
  .navds-radio--error > .navds-radio__input:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
2853
- box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
2858
+ box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
2854
2859
  }
2855
2860
 
2856
2861
  .navds-checkbox--error
2857
2862
  > .navds-checkbox__input:focus-visible:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
2858
2863
  + .navds-checkbox__label::before,
2859
2864
  .navds-radio--error > .navds-radio__input:focus-visible:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
2860
- box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
2865
+ box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
2861
2866
  }
2862
2867
 
2863
2868
  @supports not selector(:focus-visible) {
@@ -2865,7 +2870,7 @@
2865
2870
  > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
2866
2871
  + .navds-checkbox__label::before,
2867
2872
  .navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
2868
- box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
2873
+ box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
2869
2874
  }
2870
2875
  }
2871
2876
 
@@ -2874,7 +2879,7 @@
2874
2879
  + .navds-checkbox__label::before,
2875
2880
  .navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
2876
2881
  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
2877
- box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
2882
+ box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
2878
2883
  }
2879
2884
 
2880
2885
  .navds-checkbox--error
@@ -2882,7 +2887,7 @@
2882
2887
  + .navds-checkbox__label::before,
2883
2888
  .navds-radio--error > .navds-radio__input:focus-visible:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
2884
2889
  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
2885
- box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
2890
+ box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
2886
2891
  }
2887
2892
 
2888
2893
  @supports not selector(:focus-visible) {
@@ -2891,7 +2896,7 @@
2891
2896
  + .navds-checkbox__label::before,
2892
2897
  .navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
2893
2898
  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
2894
- box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
2899
+ box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
2895
2900
  }
2896
2901
 
2897
2902
  .navds-checkbox--error
@@ -2899,7 +2904,7 @@
2899
2904
  + .navds-checkbox__label::before,
2900
2905
  .navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
2901
2906
  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
2902
- box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
2907
+ box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
2903
2908
  }
2904
2909
  }
2905
2910
 
@@ -2940,7 +2945,7 @@
2940
2945
  .navds-radio--readonly > .navds-radio__input:not(:disabled):not(:checked) + .navds-radio__label::before,
2941
2946
  .navds-radio--readonly > .navds-radio__input:hover:not(:checked):not(:focus-visible) + .navds-radio__label::before {
2942
2947
  background-color: var(--__ac-radio-checkbox-readonly-bg);
2943
- box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
2948
+ box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
2944
2949
  }
2945
2950
 
2946
2951
  .navds-checkbox--readonly > .navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
@@ -2949,8 +2954,8 @@
2949
2954
  }
2950
2955
 
2951
2956
  .navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label::before {
2952
- box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
2953
2957
  background-color: var(--__ac-radio-checkbox-readonly-bg);
2958
+ box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
2954
2959
  }
2955
2960
 
2956
2961
  .navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
@@ -2958,12 +2963,12 @@
2958
2963
  }
2959
2964
 
2960
2965
  .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
2961
- box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border), inset 0 0 0 4px var(--__ac-radio-checkbox-readonly-bg);
2962
2966
  background-color: var(--a-icon-subtle);
2967
+ box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border), inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-bg);
2963
2968
  }
2964
2969
 
2965
2970
  .navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
2966
- box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
2971
+ box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
2967
2972
  background-color: var(--__ac-radio-checkbox-readonly-bg);
2968
2973
  }
2969
2974