@navikt/ds-css 3.0.0 → 3.1.0

package/dist/component/index.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /**
  * Do not edit directly
- * Generated on Tue, 09 May 2023 11:07:48 GMT
+ * Generated on Wed, 10 May 2023 11:36:34 GMT
  */
 :root, :host {
   --a-spacing-05: 0.125rem;
@@ -1362,10 +1362,16 @@ body,
 
   padding: var(--ac-button-padding-icon-only-xsmall, var(--__ac-button-padding));
 }
-.navds-button:focus {
+.navds-button:focus-visible {
   outline: none;
   box-shadow: var(--a-shadow-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-button:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
 .navds-button__icon {
   --ac-button-icon-margin: -4px;
 
@@ -1402,9 +1408,14 @@ body,
 .navds-button--primary:active {
   background-color: var(--ac-button-primary-active-bg, var(--a-surface-action-active));
 }
-.navds-button--primary:focus {
+.navds-button--primary:focus-visible {
   box-shadow: inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-button--primary:focus {
+    box-shadow: inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
+  }
+}
 .navds-button--primary:hover:where(:disabled, .navds-button--disabled),
 .navds-button--primary:active:where(:disabled, .navds-button--disabled) {
   background-color: var(--ac-button-primary-bg, var(--a-surface-action));
@@ -1422,9 +1433,14 @@ body,
 .navds-button--primary-neutral:active {
   background-color: var(--ac-button-primary-neutral-active-bg, var(--a-surface-neutral-active));
 }
-.navds-button--primary-neutral:focus {
+.navds-button--primary-neutral:focus-visible {
   box-shadow: inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-button--primary-neutral:focus {
+    box-shadow: inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
+  }
+}
 .navds-button--primary-neutral:hover:where(:disabled, .navds-button--disabled),
 .navds-button--primary-neutral:active:where(:disabled, .navds-button--disabled) {
   background-color: var(--ac-button-primary-neutral-bg, var(--a-surface-neutral));
@@ -1441,17 +1457,27 @@ body,
   color: var(--ac-button-secondary-hover-text, var(--a-text-action-on-action-subtle));
   background-color: var(--ac-button-secondary-hover-bg, var(--a-surface-action-subtle-hover));
 }
-.navds-button--secondary:focus {
+.navds-button--secondary:focus-visible {
   box-shadow: inset 0 0 0 2px var(--ac-button-secondary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-button--secondary:focus {
+    box-shadow: inset 0 0 0 2px var(--ac-button-secondary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
+  }
+}
 .navds-button--secondary:active {
   color: var(--ac-button-secondary-active-text, var(--a-text-on-action));
   background-color: var(--ac-button-secondary-active-bg, var(--a-surface-action-active));
   box-shadow: none;
 }
-.navds-button--secondary:focus:active {
+.navds-button--secondary:focus-visible:active {
   box-shadow: inset 0 0 0 1px var(--ac-button-secondary-active-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-button--secondary:focus:active {
+    box-shadow: inset 0 0 0 1px var(--ac-button-secondary-active-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
+  }
+}
 .navds-button--secondary:where(:disabled, .navds-button--disabled),
 .navds-button--secondary:hover:where(:disabled, .navds-button--disabled) {
   color: var(--ac-button-secondary-text, var(--a-text-action));
@@ -1469,19 +1495,31 @@ body,
 .navds-button--secondary-neutral:hover {
   background-color: var(--ac-button-secondary-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
 }
-.navds-button--secondary-neutral:focus {
+.navds-button--secondary-neutral:focus-visible {
   color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
   box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-button--secondary-neutral:focus {
+    color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
+    box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
+  }
+}
 .navds-button--secondary-neutral:active {
   color: var(--ac-button-secondary-neutral-active-text, var(--a-text-on-neutral));
   background-color: var(--ac-button-secondary-neutral-active-bg, var(--a-surface-neutral-active));
   box-shadow: none;
 }
-.navds-button--secondary-neutral:focus:active {
+.navds-button--secondary-neutral:focus-visible:active {
   box-shadow: inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)),
     var(--a-shadow-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-button--secondary-neutral:focus:active {
+    box-shadow: inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)),
+      var(--a-shadow-focus);
+  }
+}
 .navds-button--secondary-neutral:where(:disabled, .navds-button--disabled),
 .navds-button--secondary-neutral:hover:where(:disabled, .navds-button--disabled) {
   color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
@@ -1499,9 +1537,14 @@ body,
   color: var(--ac-button-tertiary-hover-text, var(--a-text-action-on-action-subtle));
   background-color: var(--ac-button-tertiary-hover-bg, var(--a-surface-action-subtle-hover));
 }
-.navds-button--tertiary:focus {
+.navds-button--tertiary:focus-visible {
   box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-button--tertiary:focus {
+    box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
+  }
+}
 .navds-button--tertiary:active {
   color: var(--ac-button-tertiary-active-text, var(--a-text-on-action));
   background-color: var(--ac-button-tertiary-active-bg, var(--a-surface-action-active));
@@ -1510,9 +1553,14 @@ body,
 .navds-button--tertiary:active:hover {
   background-color: var(--ac-button-tertiary-active-hover-bg, var(--a-surface-action-active));
 }
-.navds-button--tertiary:active:focus {
+.navds-button--tertiary:focus-visible:active {
   box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-button--tertiary:focus:active {
+    box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+  }
+}
 .navds-button--tertiary:where(:disabled, .navds-button--disabled),
 .navds-button--tertiary:hover:where(:disabled, .navds-button--disabled),
 .navds-button--tertiary:active:where(:disabled, .navds-button--disabled),
@@ -1531,9 +1579,14 @@ body,
   color: var(--ac-button-tertiary-neutral-hover-text, var(--a-text-default));
   background-color: var(--ac-button-tertiary-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
 }
-.navds-button--tertiary-neutral:focus {
+.navds-button--tertiary-neutral:focus-visible {
   box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-button--tertiary-neutral:focus {
+    box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
+  }
+}
 .navds-button--tertiary-neutral:active {
   color: var(--ac-button-tertiary-neutral-active-text, var(--a-text-on-neutral));
   background-color: var(--ac-button-tertiary-neutral-active-bg, var(--a-surface-neutral-active));
@@ -1542,9 +1595,14 @@ body,
 .navds-button--tertiary-neutral:active:hover {
   background-color: var(--ac-button-tertiary-neutral-active-hover-bg, var(--a-surface-neutral-active));
 }
-.navds-button--tertiary-neutral:active:focus {
+.navds-button--tertiary-neutral:focus-visible:active {
   box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-button--tertiary-neutral:focus:active {
+    box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+  }
+}
 .navds-button--tertiary-neutral:where(:disabled, .navds-button--disabled),
 .navds-button--tertiary-neutral:hover:where(:disabled, .navds-button--disabled),
 .navds-button--tertiary-neutral:active:where(:disabled, .navds-button--disabled),
@@ -1566,9 +1624,14 @@ body,
 .navds-button--danger:active {
   background-color: var(--ac-button-danger-active-bg, var(--a-surface-danger-active));
 }
-.navds-button--danger:focus {
+.navds-button--danger:focus-visible {
   box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-button--danger:focus {
+    box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+  }
+}
 .navds-button--danger:active:where(:disabled, .navds-button--disabled),
 .navds-button--danger:hover:where(:disabled, .navds-button--disabled) {
   background-color: var(--ac-button-danger-bg, var(--a-surface-danger));
@@ -1651,10 +1714,6 @@ body,
   flex-direction: column;
   gap: var(--a-spacing-2);
 }
-.navds-chat__bubble:focus {
-  box-shadow: var(--a-shadow-focus);
-  outline: none;
-}
 .navds-chat--right .navds-chat__bubble {
   border-radius: var(--a-border-radius-xlarge);
   border-bottom-right-radius: 2px;
@@ -1738,6 +1797,17 @@ body,
 .navds-chips__toggle:active:focus-visible {
   box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
 }
+@supports not selector(:focus-visible) {
+  .navds-chips__toggle:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
+  }
+
+  .navds-chips__toggle[aria-pressed="true"]:focus,
+  .navds-chips__toggle:active:focus {
+    box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
+  }
+}
 .navds-chips__removable {
   gap: 0;
 }
@@ -1782,6 +1852,17 @@ body,
 .navds-chips__removable--neutral:focus-visible {
   box-shadow: 0 0 0 2px var(--a-border-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-chips__removable--action:focus {
+    outline: none;
+    box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--a-border-focus);
+  }
+
+  .navds-chips__removable--neutral:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--a-border-focus);
+  }
+}
 .navds-chips__removable--action:hover {
   background-color: var(--ac-chip-removable-action-hover-bg, var(--a-surface-action-selected-hover));
 }
@@ -1905,12 +1986,16 @@ body,
 .navds-expansioncard__header-button:hover > :where(.navds-expansioncard__header-chevron) {
   transform: translateY(1px);
 }
-.navds-expansioncard__header-button:focus {
-  outline: none;
-}
 .navds-expansioncard__header-button:focus-visible {
+  outline: none;
   box-shadow: var(--a-shadow-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-expansioncard__header-button:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
 .navds-expansioncard--open :where(.navds-expansioncard__header-button):hover :where(.navds-expansioncard__header-chevron) {
   transform: translateY(-1px) rotate(180deg);
 }
@@ -2039,7 +2124,7 @@ body,
   margin-top: var(--a-spacing-2);
 }
 .navds-fieldset > .navds-fieldset__description:not(:empty) {
-  margin-top: var(--a-spacing-1);
+  margin-top: 0.125rem;
 }
 /* Applied when hideLegend is applied to fieldset */
 .navds-fieldset > .navds-sr-only + :not(:first-child):not(:empty) {
@@ -2058,7 +2143,7 @@ body,
   gap: var(--a-spacing-2);
 }
 .navds-form-field__description {
-  margin-top: -4px;
+  margin-top: -6px;
 }
 .navds-form-field .navds-error-message,
 .navds-fieldset .navds-error-message {
@@ -2076,6 +2161,9 @@ body,
 .navds-form-field__error:empty {
   display: none;
 }
+.navds-form-field__subdescription {
+  color: var(--ac-form-subdescription, var(--a-text-subtle));
+}
 .navds-error-summary {
   background-color: var(--ac-error-summary-bg, var(--a-surface-default));
   padding: var(--a-spacing-5);
@@ -2084,10 +2172,16 @@ body,
 .navds-error-summary--small {
   padding: var(--a-spacing-3);
 }
-.navds-error-summary:focus {
+.navds-error-summary:focus-visible {
   box-shadow: var(--a-shadow-focus);
   outline: none;
 }
+@supports not selector(:focus-visible) {
+  .navds-error-summary:focus {
+    box-shadow: var(--a-shadow-focus);
+    outline: none;
+  }
+}
 .navds-error-summary__list {
   margin: var(--a-spacing-3) 0;
   display: flex;
@@ -2166,7 +2260,7 @@ body,
 .navds-radio__content {
   display: flex;
   flex-direction: column;
-  gap: var(--a-spacing-1);
+  gap: 0.125rem;
 }
 .navds-checkbox--small > .navds-checkbox__input,
 .navds-radio--small > .navds-radio__input {
@@ -2184,14 +2278,26 @@ body,
   width: 1.25rem;
   height: 1.25rem;
 }
-.navds-checkbox__input:focus + .navds-checkbox__label::before,
-.navds-radio__input:focus + .navds-radio__label::before {
+.navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
+.navds-radio__input:focus-visible + .navds-radio__label::before {
   box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
 }
-.navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
-.navds-radio__input:hover:focus + .navds-radio__label::before {
+@supports not selector(:focus-visible) {
+  .navds-checkbox__input:focus + .navds-checkbox__label::before,
+  .navds-radio__input:focus + .navds-radio__label::before {
+    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
+  }
+}
+.navds-checkbox__input:hover:focus-visible + .navds-checkbox__label::before,
+.navds-radio__input:hover:focus-visible + .navds-radio__label::before {
   box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), var(--a-shadow-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
+  .navds-radio__input:hover:focus + .navds-radio__label::before {
+    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), var(--a-shadow-focus);
+  }
+}
 .navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
   box-shadow: none;
   background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
@@ -2221,27 +2327,46 @@ body,
 .navds-checkbox--small > .navds-checkbox__input:checked + .navds-checkbox__label::before {
   background-position: 4px center;
 }
-.navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
-.navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
+.navds-checkbox__input:indeterminate:focus-visible + .navds-checkbox__label::before,
+.navds-checkbox__input:checked:focus-visible + .navds-checkbox__label::before {
   box-shadow: inset 0 0 0 1px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
+  .navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
+    box-shadow: inset 0 0 0 1px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
+  }
+}
 .navds-radio__input:checked + .navds-radio__label::before {
   box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
     inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default));
   background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
 }
-.navds-radio__input:checked:focus + .navds-radio__label::before {
+.navds-radio__input:checked:focus-visible + .navds-radio__label::before {
   box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
     inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-radio__input:checked:focus + .navds-radio__label::before {
+    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+      inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
+  }
+}
 .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
 .navds-radio__input:hover:not(:disabled) + .navds-radio__label {
   color: var(--ac-radio-checkbox-action, var(--a-surface-action));
 }
-.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus) + .navds-checkbox__label::before,
-.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
+.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus-visible)
+  + .navds-checkbox__label::before,
+.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
   box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
 }
+@supports not selector(:focus-visible) {
+  .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus) + .navds-checkbox__label::before,
+  .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
+    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
+  }
+}
 .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate) + .navds-checkbox__label::before,
 .navds-radio__input:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
   background-color: var(--ac-radio-checkbox-action-hover-bg, var(--a-surface-action-subtle));
@@ -2253,25 +2378,50 @@ body,
   box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
 }
 .navds-checkbox--error
-  > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
+  > .navds-checkbox__input:focus-visible:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
   + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
+.navds-radio--error > .navds-radio__input:focus-visible:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
   box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-checkbox--error
+    > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
+    + .navds-checkbox__label::before,
+  .navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
+    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+  }
+}
 .navds-checkbox--error
-  > .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
+  > .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus-visible)
   + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
+.navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
   background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
   box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
 }
 .navds-checkbox--error
-  > .navds-checkbox__input:focus:hover:not(:disabled):not(:checked):not(:indeterminate)
+  > .navds-checkbox__input:focus-visible:hover:not(:disabled):not(:checked):not(:indeterminate)
   + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
+.navds-radio--error > .navds-radio__input:focus-visible:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
   background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
   box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-checkbox--error
+    > .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
+    + .navds-checkbox__label::before,
+  .navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
+    background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
+    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
+  }
+
+  .navds-checkbox--error
+    > .navds-checkbox__input:focus:hover:not(:disabled):not(:checked):not(:indeterminate)
+    + .navds-checkbox__label::before,
+  .navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
+    background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
+    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+  }
+}
 .navds-checkbox--disabled,
 .navds-radio--disabled {
   opacity: 0.3;
@@ -2299,10 +2449,16 @@ body,
 .navds-select__input:hover {
   border-color: var(--ac-select-hover-bg, var(--a-border-action));
 }
-.navds-select__input:focus {
+.navds-select__input:focus-visible {
   outline: none;
   box-shadow: var(--a-shadow-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-select__input:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
 .navds-select__container {
   position: relative;
   display: flex;
@@ -2381,7 +2537,7 @@ body,
 .navds-switch__content {
   display: flex;
   flex-direction: column;
-  gap: var(--a-spacing-1);
+  gap: 0.125rem;
   padding: 0.75rem 0 0.75rem 3.25rem;
 }
 .navds-switch--right > .navds-switch__label-wrapper > .navds-switch__content {
@@ -2438,9 +2594,14 @@ body,
 .navds-switch__input:checked:disabled ~ .navds-switch__track {
   background-color: var(--ac-switch-checked-bg, var(--a-border-success));
 }
-.navds-switch__input:focus ~ .navds-switch__track {
+.navds-switch__input:focus-visible ~ .navds-switch__track {
   box-shadow: 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-switch__input:focus ~ .navds-switch__track {
+    box-shadow: 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+  }
+}
 /* Thumb */
 .navds-switch__thumb {
   background-color: var(--ac-switch-thumb-bg, var(--a-surface-default));
@@ -2514,10 +2675,16 @@ body,
 .navds-text-field__input:hover {
   border-color: var(--ac-textfield-hover-border, var(--a-border-action));
 }
-.navds-text-field__input:focus {
+.navds-text-field__input:focus-visible {
   outline: none;
   box-shadow: var(--a-shadow-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-text-field__input:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
 /**
   Error handling
 */
@@ -2525,9 +2692,14 @@ body,
   border-color: var(--ac-textfield-error-border, var(--a-border-danger));
   box-shadow: 0 0 0 1px var(--ac-textfield-error-border, var(--a-border-danger));
 }
-.navds-text-field--error > .navds-text-field__input:focus:not(:hover):not(:disabled) {
+.navds-text-field--error > .navds-text-field__input:focus-visible:not(:hover):not(:disabled) {
   box-shadow: 0 0 0 1px var(--a-border-danger), var(--a-shadow-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-text-field--error > .navds-text-field__input:focus:not(:hover):not(:disabled) {
+    box-shadow: 0 0 0 1px var(--a-border-danger), var(--a-shadow-focus);
+  }
+}
 /* Disabled handling */
 .navds-text-field__input:disabled {
   background-color: var(--ac-textfield-bg, var(--a-surface-default));
@@ -2574,10 +2746,16 @@ body,
 .navds-textarea__input:hover {
   border-color: var(--ac-textarea-hover-border, var(--a-border-action));
 }
-.navds-textarea__input:focus {
+.navds-textarea__input:focus-visible {
   outline: none;
   box-shadow: var(--a-shadow-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-textarea__input:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
 .navds-form-field--small .navds-textarea__input {
   padding: 6px;
 }
@@ -2603,10 +2781,16 @@ body,
 /**
   Error handling
 */
-.navds-textarea--error .navds-textarea__input:not(:hover):not(:focus):not(:disabled) {
+.navds-textarea--error .navds-textarea__input:not(:hover):not(:focus-visible):not(:disabled) {
   box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--a-border-danger));
   border-color: var(--ac-textarea-error-border, var(--a-border-danger));
 }
+@supports not selector(:focus-visible) {
+  .navds-textarea--error .navds-textarea__input:not(:hover):not(:focus):not(:disabled) {
+    box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--a-border-danger));
+    border-color: var(--ac-textarea-error-border, var(--a-border-danger));
+  }
+}
 .navds-textarea__input:disabled {
   background-color: var(--ac-textarea-bg, var(--a-surface-default));
   border-color: var(--ac-textarea-border, var(--a-border-default));
@@ -2686,10 +2870,16 @@ body,
 .navds-search__button-clear:hover {
   color: var(--ac-search-clear-icon-hover, var(--a-text-action));
 }
-.navds-search__button-clear:focus {
+.navds-search__button-clear:focus-visible {
   box-shadow: var(--a-shadow-focus);
   outline: none;
 }
+@supports not selector(:focus-visible) {
+  .navds-search__button-clear:focus {
+    box-shadow: var(--a-shadow-focus);
+    outline: none;
+  }
+}
 .navds-search__button-search {
   flex-shrink: 0;
   min-width: 64px;
@@ -2719,29 +2909,52 @@ body,
 .navds-search__wrapper-inner:focus-within + .navds-search__button-search.navds-button--secondary:hover {
   z-index: auto;
 }
-.navds-search__button-search.navds-button--secondary:focus {
+.navds-search__button-search.navds-button--secondary:focus-visible {
   box-shadow: 0 0 0 1px var(--ac-search-button-border, var(--a-border-default)) inset, var(--a-shadow-focus);
 }
-.navds-search__button-search.navds-button--secondary:focus:hover {
+.navds-search__button-search.navds-button--secondary:focus-visible:hover {
   box-shadow: 0 0 0 1px var(--ac-search-button-border-hover, var(--a-border-action)) inset, var(--a-shadow-focus);
 }
-.navds-search__button-search.navds-button--secondary:focus:active {
+.navds-search__button-search.navds-button--secondary:focus-visible:active {
   box-shadow: 0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset, var(--a-shadow-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-search__button-search.navds-button--secondary:focus {
+    box-shadow: 0 0 0 1px var(--ac-search-button-border, var(--a-border-default)) inset, var(--a-shadow-focus);
+  }
+
+  .navds-search__button-search.navds-button--secondary:focus:hover {
+    box-shadow: 0 0 0 1px var(--ac-search-button-border-hover, var(--a-border-action)) inset, var(--a-shadow-focus);
+  }
+
+  .navds-search__button-search.navds-button--secondary:focus:active {
+    box-shadow: 0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset, var(--a-shadow-focus);
+  }
+}
 /* Error-handling */
 .navds-search--error .navds-search__input:not(:hover):not(:disabled) {
   border-color: var(--ac-search-error-border, var(--a-border-danger));
   box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--a-border-danger));
 }
-.navds-search--error .navds-search__input:focus:not(:hover):not(:disabled) {
+.navds-search--error .navds-search__input:focus-visible:not(:hover):not(:disabled) {
   box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--a-border-danger)), var(--a-shadow-focus);
 }
 /* Focus layering */
-.navds-search__input:focus,
+.navds-search__input:focus-visible,
 .navds-search__button-clear,
-.navds-search__button-search:focus {
+.navds-search__button-search:focus-visible {
   z-index: 1;
 }
+@supports not selector(:focus-visible) {
+  .navds-search--error .navds-search__input:focus:not(:hover):not(:disabled) {
+    box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+  }
+
+  .navds-search__input:focus,
+  .navds-search__button-search:focus {
+    z-index: 1;
+  }
+}
 .navds-help-text__button {
   margin: 0;
   padding: 0;
@@ -2755,10 +2968,15 @@ body,
   color: var(--ac-help-text-button-color, var(--a-surface-action));
   font-size: 1.5rem;
 }
-.navds-help-text__button:focus {
-  outline: none;
+.navds-help-text__button:focus-visible {
   box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-help-text__button:focus {
+    outline: none;
+    box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
+  }
+}
 .navds-help-text__icon {
   border-radius: var(--a-border-radius-full);
 }
@@ -2774,12 +2992,21 @@ body,
 .navds-help-text__icon--filled {
   display: none;
 }
-.navds-help-text__button:where(:hover, :focus, [aria-expanded="true"]) > .navds-help-text__icon {
+.navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon {
   display: none;
 }
-.navds-help-text__button:where(:hover, :focus, [aria-expanded="true"]) > .navds-help-text__icon--filled {
+.navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon--filled {
   display: inherit;
 }
+@supports not selector(:focus-visible) {
+  .navds-help-text__button:where(:focus) > .navds-help-text__icon {
+    display: none;
+  }
+
+  .navds-help-text__button:where(:focus) > .navds-help-text__icon--filled {
+    display: inherit;
+  }
+}
 .navds-link {
   color: var(--ac-link-text, var(--a-text-action));
   text-decoration: underline;
@@ -2794,13 +3021,22 @@ body,
 .navds-link:hover {
   text-decoration: none;
 }
-.navds-link:focus {
+.navds-link:focus-visible {
   outline: none;
   color: var(--ac-link-focus-text, var(--a-text-on-action));
   text-decoration: none;
   background-color: var(--ac-link-focus-bg, var(--a-border-focus));
   box-shadow: 0 0 0 2px var(--ac-link-focus-border, var(--a-border-focus));
 }
+@supports not selector(:focus-visible) {
+  .navds-link:focus {
+    outline: none;
+    color: var(--ac-link-focus-text, var(--a-text-on-action));
+    text-decoration: none;
+    background-color: var(--ac-link-focus-bg, var(--a-border-focus));
+    box-shadow: 0 0 0 2px var(--ac-link-focus-border, var(--a-border-focus));
+  }
+}
 .navds-link:active {
   outline: none;
   color: var(--ac-link-active-text, var(--a-text-on-action));
@@ -2923,11 +3159,18 @@ body,
 .navds-modal__content {
   padding: var(--a-spacing-4);
 }
-.navds-modal:focus,
+.navds-modal:focus-visible,
 .navds-modal--focus {
   box-shadow: var(--a-shadow-focus);
   outline: none;
 }
+@supports not selector(:focus-visible) {
+  .navds-modal:focus,
+  .navds-modal--focus {
+    box-shadow: var(--a-shadow-focus);
+    outline: none;
+  }
+}
 .navds-modal__overlay {
   position: fixed;
   z-index: var(--a-z-index-modal);
@@ -2991,9 +3234,14 @@ body,
   background-color: var(--ac-pagination-selected-bg, var(--a-surface-action-selected));
   color: var(--ac-pagination-selected-text, var(--a-text-on-action));
 }
-.navds-pagination__item[aria-current="true"]:focus {
+.navds-pagination__item[aria-current="true"]:focus-visible {
   box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-pagination__item[aria-current="true"]:focus {
+    box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+  }
+}
 .navds-pagination__prev-next {
   display: flex;
   align-items: center;
@@ -3024,10 +3272,16 @@ body,
 .navds-popover--hidden {
   display: none;
 }
-.navds-popover:focus {
+.navds-popover:focus-visible {
   outline: none;
   box-shadow: var(--a-shadow-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-popover:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
 .navds-popover__arrow {
   position: absolute;
   z-index: -1;
@@ -3117,14 +3371,26 @@ body,
 .navds-date .rdp-day_range_start.rdp-day_range_end {
   border-radius: var(--a-border-radius-xlarge);
 }
-.navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus,
-.navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus {
+.navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus-visible,
+.navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus-visible {
   box-shadow: var(--a-shadow-focus);
 }
-.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus,
-.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus {
+@supports not selector(:focus-visible) {
+  .navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus,
+  .navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus {
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus-visible,
+.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus-visible {
   box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-date .rdp-button.rdp-day_selected:not([disabled]):focus,
+  .navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus {
+    box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+  }
+}
 /* Monthpicker */
 .navds-date__month-button {
   all: unset;
@@ -3135,11 +3401,18 @@ body,
   border-radius: var(--a-border-radius-medium);
   cursor: pointer;
 }
-.navds-date__month-button:focus,
-.navds-monthpicker__caption-button:focus {
+.navds-date__month-button:focus-visible,
+.navds-monthpicker__caption-button:focus-visible {
   box-shadow: var(--a-shadow-focus);
   z-index: 1;
 }
+@supports not selector(:focus-visible) {
+  .navds-date__month-button:focus,
+  .navds-monthpicker__caption-button:focus {
+    box-shadow: var(--a-shadow-focus);
+    z-index: 1;
+  }
+}
 .navds-date__year-label {
   display: flex;
   align-items: center;
@@ -3162,10 +3435,15 @@ body,
   width: fit-content;
 }
 /* Focus layering */
-.navds-date__field-input:focus,
+.navds-date__field-input:focus-visible,
 .navds-date__field-button {
   z-index: 1;
 }
+@supports not selector(:focus-visible) {
+  .navds-date__field-input:focus {
+    z-index: 1;
+  }
+}
 .navds-date .rdp-day_selected,
 .navds-monthpicker__month--selected {
   color: var(--ac-date-selected-text, var(--a-text-on-action));
@@ -3209,9 +3487,14 @@ body,
   border-color: var(--ac-date-input-error-border, var(--a-border-danger));
   box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger));
 }
-.navds-date__field--error .navds-date__field-input:focus:not(:hover):not(:disabled) {
+.navds-date__field--error .navds-date__field-input:focus-visible:not(:hover):not(:disabled) {
   box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)), var(--a-shadow-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-date__field--error .navds-date__field-input:focus:not(:hover):not(:disabled) {
+    box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+  }
+}
 .navds-date__field-button {
   position: absolute;
   right: var(--a-spacing-2);
@@ -3428,17 +3711,34 @@ body,
   background-color: var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
   color: var(--ac-toggle-group-button-neutral-hover-text, var(--a-text-default));
 }
-.navds-toggle-group__button:focus {
+.navds-toggle-group__button:focus-visible {
   outline: none;
   box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
 }
-.navds-toggle-group__button:focus:hover[aria-pressed="false"] {
+@supports not selector(:focus-visible) {
+  .navds-toggle-group__button:focus {
+    outline: none;
+    box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
+  }
+}
+.navds-toggle-group__button:focus-visible:hover[aria-pressed="false"] {
   box-shadow: 0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)), 0 0 0 4px var(--a-border-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
+    box-shadow: 0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)), 0 0 0 4px var(--a-border-focus);
+  }
+}
 .navds-toggle-group--neutral > .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
   box-shadow: 0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
     0 0 0 4px var(--a-border-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-toggle-group--neutral > .navds-toggle-group__button:focus-visible:hover[aria-pressed="false"] {
+    box-shadow: 0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
+      0 0 0 4px var(--a-border-focus);
+  }
+}
 .navds-toggle-group__button-inner {
   display: flex;
   align-items: center;
@@ -3493,10 +3793,16 @@ body,
   box-shadow: var(--a-shadow-medium);
   border-color: var(--ac-link-panel-hover-border, var(--a-border-action));
 }
-.navds-link-panel:focus {
+.navds-link-panel:focus-visible {
   box-shadow: var(--a-shadow-focus);
   outline: none;
 }
+@supports not selector(:focus-visible) {
+  .navds-link-panel:focus {
+    box-shadow: var(--a-shadow-focus);
+    outline: none;
+  }
+}
 .navds-link-panel__chevron {
   flex-shrink: 0;
   font-size: 1.5rem;
@@ -3531,10 +3837,16 @@ body,
 .navds-read-more__button:active {
   background-color: var(--ac-read-more-active-bg, var(--a-surface-active));
 }
-.navds-read-more__button:focus {
+.navds-read-more__button:focus-visible {
   outline: none;
   box-shadow: var(--a-shadow-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-read-more__button:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
 .navds-read-more__content {
   margin-top: var(--a-spacing-1);
   border-left: 2px solid var(--ac-read-more-line, var(--a-border-divider));
@@ -3635,11 +3947,18 @@ button.navds-stepper__step {
   color: var(--ac-stepper-non-interactive, var(--a-text-subtle));
   cursor: default;
 }
-:where(.navds-stepper__step):focus {
+:where(.navds-stepper__step):focus-visible {
   outline: none;
   box-shadow: var(--a-shadow-focus);
   isolation: isolate;
 }
+@supports not selector(:focus-visible) {
+  .navds-stepper__step:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+    isolation: isolate;
+  }
+}
 .navds-stepper__circle {
   grid-column: circle;
   display: inline-grid;
@@ -3871,10 +4190,16 @@ button.navds-stepper__step {
 .navds-table__sort-button:hover {
   background-color: var(--ac-table-sort-button-hover-bg, var(--a-bg-subtle));
 }
-.navds-table__sort-button:focus {
+.navds-table__sort-button:focus-visible {
   outline: none;
   box-shadow: inset 0 0 0 2px var(--a-border-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-table__sort-button:focus {
+    outline: none;
+    box-shadow: inset 0 0 0 2px var(--a-border-focus);
+  }
+}
 .navds-table__header-cell[aria-sort="ascending"] .navds-table__sort-button,
 .navds-table__header-cell[aria-sort="descending"] .navds-table__sort-button {
   background-color: var(--ac-table-sort-button-sorted-bg, var(--a-surface-selected));
@@ -3920,9 +4245,14 @@ button.navds-stepper__step {
 .navds-table--small .navds-table__toggle-expand-button {
   padding: var(--a-spacing-2);
 }
-.navds-table__toggle-expand-button:focus {
+.navds-table__toggle-expand-button:focus-visible {
   box-shadow: inset var(--a-shadow-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-table__toggle-expand-button:focus {
+    box-shadow: inset var(--a-shadow-focus);
+  }
+}
 .navds-table__expandable-icon {
   font-size: 1.5rem;
 }
@@ -4007,11 +4337,18 @@ button.navds-stepper__step {
   box-shadow: inset 0 -3px 0 0 var(--ac-tabs-selected-border, var(--a-border-action));
   color: var(--ac-tabs-selected-text, var(--a-text-default));
 }
-.navds-tabs__tab:focus {
+.navds-tabs__tab:focus-visible {
   outline: none;
   box-shadow: inset var(--a-shadow-focus);
   color: var(--ac-tabs-focus-text, var(--a-text-default));
 }
+@supports not selector(:focus-visible) {
+  .navds-tabs__tab:focus {
+    outline: none;
+    box-shadow: inset var(--a-shadow-focus);
+    color: var(--ac-tabs-focus-text, var(--a-text-default));
+  }
+}
 .navds-tabs__tab-inner {
   display: flex;
   align-items: center;
@@ -4048,6 +4385,12 @@ button.navds-stepper__step {
   outline: none;
   box-shadow: inset 0 0 0 2px var(--a-border-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-tabs__tabpanel:focus {
+    outline: none;
+    box-shadow: inset 0 0 0 2px var(--a-border-focus);
+  }
+}
 .navds-list ul,
 .navds-list ol {
   padding: 0;