radio focus

digdir · Jun 7, 2024 · 661a9e8 · 661a9e8
1 parent 7554be9
commit 661a9e8
Showing 1 changed file with 22 additions and 9 deletions.
diff --git a/packages/css/radio.css b/packages/css/radio.css
@@ -45,7 +45,7 @@
   }
 
   .ds-radio__label {
-    min-height: var(--ds-sizing-10);
+    /* min-height: var(--ds-sizing-10); */
     min-width: min-content;
     display: inline-flex;
     flex-direction: row;
@@ -78,14 +78,20 @@
   }
 
   .ds-radio__input:focus-visible {
-    outline-offset: var(--ds-spacing-1);
-    outline: var(--dsc-radio-focus-border-width) solid var(--ds-focus-outer);
     box-shadow:
       inset 0 0 0 2px var(--dsc-radio-border-color),
-      inset 0 0 0 var(--dsc-radio-focus-border-width) var(--ds-focus-inner),
       inset 0 0 0 6px var(--dsc-radio-background);
   }
 
+  .ds-radio:has(.ds-radio__input:focus-visible) {
+    --dsc-focus-border-width: 3px;
+
+    outline: var(--dsc-focus-border-width) solid var(--ds-focus-outer);
+    outline-offset: var(--dsc-focus-border-width);
+    box-shadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-focus-inner);
+    border-radius: var(--ds-border-radius-md);
+  }
+
   .ds-radio__input:checked {
     --dsc-radio-border-color: var(--ds-color-accent-base-default);
 
@@ -119,15 +125,15 @@
       color: var(--ds-color-accent-text-subtle);
     }
 
-    .ds-radio:not(.ds-radio--readonly) > .ds-radio__input:hover:not(:checked, :disabled) {
+    .ds-radio:not(.ds-radio--readonly) > .ds-radio__input:hover:not(:checked, :disabled, :focus-visible) {
       --dsc-radio-border-color: var(--ds-color-accent-border-strong);
 
       box-shadow:
         var(--dsc-radio-border__hover),
         inset 0 0 0 2px var(--dsc-radio-border-color);
     }
 
-    .ds-radio:not(.ds-radio--readonly) > .ds-radio__input:hover:checked:not(:disabled) {
+    .ds-radio:not(.ds-radio--readonly) > .ds-radio__input:hover:checked:not(:disabled, :focus-visible) {
       box-shadow:
         var(--dsc-radio-border__hover),
         inset 0 0 0 2px var(--dsc-radio-border-color),
@@ -140,20 +146,27 @@
   .ds-radio--sm {
     --dsc-radio-size: var(--ds-sizing-5);
 
-    min-height: var(--ds-sizing-10);
+    /* min-height: var(--ds-sizing-10); */
   }
 
   .ds-radio--md {
     --dsc-radio-size: var(--ds-sizing-6);
     --dsc-radio-border__hover--size: var(--ds-spacing-1);
 
-    min-height: var(--ds-sizing-11);
+    /* min-height: var(--ds-sizing-11); */
   }
 
   .ds-radio--lg {
     --dsc-radio-size: var(--ds-sizing-7);
 
-    min-height: var(--ds-sizing-12);
+    /* min-height: var(--ds-sizing-12); */
+  }
+
+  .ds-radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ds-spacing-3);
+    width: fit-content;
   }
 
   .ds-radio-group--horizontal {