Version Packages (#1970)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/aksel-icons
 
+## 3.1.0
+
 ## 3.0.1
 
 ## 3.0.0

@navikt/aksel-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-icons",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/ikoner",
   "repository": {

@navikt/aksel/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @navikt/aksel
 
+## 3.1.0
+
+### Patch Changes
+
+- Updated dependencies [[`9d2cd9e7f`](https://github.com/navikt/aksel/commit/9d2cd9e7fffb3cf6310c88229ee39ea85db19bca), [`f1c4c46eb`](https://github.com/navikt/aksel/commit/f1c4c46ebb0522561483f18e3b86b190cf9cc372)]:
+  - @navikt/ds-css@3.1.0
+
 ## 3.0.1
 
 ### Patch Changes

@navikt/aksel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "Aksel command line interface. Handles css-imports, codemods and more",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -29,7 +29,7 @@
   },
   "homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
   "dependencies": {
-    "@navikt/ds-css": "3.0.1",
+    "@navikt/ds-css": "3.1.0",
     "axios": "1.3.6",
     "chalk": "4.1.0",
     "clipboardy": "^2.3.0",

@navikt/codemod/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-codemod
 
+## 3.1.0
+
 ## 3.0.1
 
 ## 3.0.0

@navikt/codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-codemod",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "Aksel codemods for NAVs designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",

@navikt/community/navno/package.json

@@ -40,8 +40,8 @@
     "build-pict": "svgr --silent --index-template index-template.js --out-dir src/pictograms pictograms"
   },
   "dependencies": {
-    "@navikt/ds-icons": "^3.0.1",
-    "@navikt/ds-react": "^3.0.1",
+    "@navikt/ds-icons": "^3.1.0",
+    "@navikt/ds-react": "^3.1.0",
     "clsx": "^1.1.1"
   },
   "devDependencies": {

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @navikt/ds-css
 
+## 3.1.0
+
+### Minor Changes
+
+- [#1966](https://github.com/navikt/aksel/pull/1966) [`f1c4c46eb`](https://github.com/navikt/aksel/commit/f1c4c46ebb0522561483f18e3b86b190cf9cc372) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :lipstick: Alle komponenter bruker nå default `:focus-visible` for fokusmarkering.
+  (Alle komponenter som bruker `:focus-visible` har også en fallback for `:focus`)
+
+### Patch Changes
+
+- [#1967](https://github.com/navikt/aksel/pull/1967) [`9d2cd9e7f`](https://github.com/navikt/aksel/commit/9d2cd9e7fffb3cf6310c88229ee39ea85db19bca) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :lipstick: Oppdatert Label og Description spacing for skjemakomponenter
+
 ## 3.0.1
 
 ## 3.0.0

@navikt/core/css/button.css

@@ -63,11 +63,18 @@
   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;
 
@@ -114,10 +121,16 @@
   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));
@@ -140,10 +153,16 @@
   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));
@@ -164,20 +183,32 @@
   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));
@@ -199,22 +230,36 @@
   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));
@@ -236,10 +281,16 @@
   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));
@@ -250,10 +301,16 @@
   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),
@@ -276,10 +333,16 @@
   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));
@@ -290,10 +353,16 @@
   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),
@@ -320,10 +389,16 @@
   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));

@navikt/core/css/chat.css

@@ -56,11 +56,6 @@
   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;

@navikt/core/css/chips.css

@@ -63,6 +63,18 @@
   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;
 }
@@ -117,6 +129,18 @@
   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));
 }

@navikt/core/css/date.css

@@ -73,16 +73,30 @@
   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;
@@ -94,12 +108,20 @@
   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;
@@ -126,11 +148,17 @@
 }
 
 /* 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));
@@ -183,10 +211,16 @@
   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);

@navikt/core/css/expansioncard.css

@@ -123,12 +123,16 @@
   transform: translateY(1px);
 }
 
-.navds-expansioncard__header-button:focus {
+.navds-expansioncard__header-button:focus-visible {
   outline: none;
+  box-shadow: var(--a-shadow-focus);
 }
 
-.navds-expansioncard__header-button:focus-visible {
-  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) {

@navikt/core/css/form/error-summary.css

@@ -8,11 +8,18 @@
   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;

@navikt/core/css/form/fieldset.css

@@ -10,7 +10,7 @@
 }
 
 .navds-fieldset > .navds-fieldset__description:not(:empty) {
-  margin-top: var(--a-spacing-1);
+  margin-top: 0.125rem;
 }
 
 /* Applied when hideLegend is applied to fieldset */

@navikt/core/css/form/form.css

@@ -5,7 +5,7 @@
 }
 
 .navds-form-field__description {
-  margin-top: -4px;
+  margin-top: -6px;
 }
 
 .navds-form-field .navds-error-message,
@@ -27,3 +27,7 @@
 .navds-form-field__error:empty {
   display: none;
 }
+
+.navds-form-field__subdescription {
+  color: var(--ac-form-subdescription, var(--a-text-subtle));
+}

@navikt/core/css/form/radio-checkbox.css

@@ -43,7 +43,7 @@
 .navds-radio__content {
   display: flex;
   flex-direction: column;
-  gap: var(--a-spacing-1);
+  gap: 0.125rem;
 }
 
 .navds-checkbox--small > .navds-checkbox__input,
@@ -65,16 +65,30 @@
   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));
@@ -109,32 +123,54 @@
   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));
@@ -148,28 +184,55 @@
 }
 
 .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;

@navikt/core/css/form/search.css

@@ -86,11 +86,18 @@
   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;
@@ -126,31 +133,56 @@
   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;
+  }
+}

@navikt/core/css/form/select.css

@@ -17,11 +17,18 @@
   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;

@navikt/core/css/form/switch.css

@@ -38,7 +38,7 @@
 .navds-switch__content {
   display: flex;
   flex-direction: column;
-  gap: var(--a-spacing-1);
+  gap: 0.125rem;
   padding: 0.75rem 0 0.75rem 3.25rem;
 }
 
@@ -110,10 +110,16 @@
   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));

@navikt/core/css/form/text-field.css

@@ -35,11 +35,18 @@
   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
 */
@@ -48,10 +55,16 @@
   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));

@navikt/core/css/form/textarea.css

@@ -38,11 +38,18 @@
   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;
 }
@@ -73,11 +80,18 @@
 /**
   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));

@navikt/core/css/help-text.css

@@ -12,11 +12,17 @@
   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);
 }
@@ -36,10 +42,20 @@
   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;
+  }
+}

@navikt/core/css/link-panel.css

@@ -17,11 +17,18 @@
   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;

@navikt/core/css/link.css

@@ -15,7 +15,7 @@
   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;
@@ -23,6 +23,16 @@
   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));

@navikt/core/css/modal.css

@@ -15,12 +15,20 @@
   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);

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "CSS for NAV Designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -27,7 +27,7 @@
     "css:get-version": "node config/get-version.js"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^3.0.1",
+    "@navikt/ds-tokens": "^3.1.0",
     "cssnano": "6.0.0",
     "fast-glob": "3.2.11",
     "lodash": "4.17.21",

@navikt/core/css/pagination.css

@@ -35,10 +35,16 @@
   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;

@navikt/core/css/popover.css

@@ -15,11 +15,18 @@
   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;

@navikt/core/css/read-more.css

@@ -24,11 +24,18 @@
   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));

@navikt/core/css/stepper.css

@@ -80,12 +80,20 @@ button.navds-stepper__step {
   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;

@navikt/core/css/table.css

@@ -119,11 +119,18 @@
   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));
@@ -181,10 +188,16 @@
   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;
 }

@navikt/core/css/tabs.css

@@ -62,12 +62,20 @@
   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;
@@ -112,3 +120,10 @@
   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);
+  }
+}

@navikt/core/css/toggle-group.css

@@ -49,20 +49,40 @@
   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;

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @navikt/ds-react
 
+## 3.1.0
+
+### Patch Changes
+
+- [#1967](https://github.com/navikt/aksel/pull/1967) [`9d2cd9e7f`](https://github.com/navikt/aksel/commit/9d2cd9e7fffb3cf6310c88229ee39ea85db19bca) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :lipstick: Oppdatert Label og Description spacing for skjemakomponenter
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@3.1.0
+
 ## 3.0.1
 
 ### Patch Changes

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.17.0",
-    "@navikt/aksel-icons": "^3.0.1",
+    "@navikt/aksel-icons": "^3.1.0",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

@navikt/core/react/src/form/Fieldset/Fieldset.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { FieldsetHTMLAttributes, forwardRef, useContext } from "react";
-import { BodyLong, Detail, Label, ErrorMessage, omit } from "../..";
+import { BodyShort, ErrorMessage, Label, omit } from "../..";
 import { FormFieldProps } from "../useFormField";
 import { useFieldset } from "./useFieldset";
 
@@ -104,30 +104,18 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
           >
             {legend}
           </Label>
-          {!!description &&
-            (size === "medium" ? (
-              <BodyLong
-                className={cl("navds-fieldset__description", {
-                  "navds-sr-only": !!hideLegend,
-                })}
-                id={inputDescriptionId}
-                size="small"
-                as="div"
-              >
-                {props.description}
-              </BodyLong>
-            ) : (
-              <Detail
-                className={cl("navds-fieldset__description", {
-                  "navds-sr-only": !!hideLegend,
-                })}
-                id={inputDescriptionId}
-                size="small"
-                as="div"
-              >
-                {props.description}
-              </Detail>
-            ))}
+          {!!description && (
+            <BodyShort
+              className={cl("navds-fieldset__description", {
+                "navds-sr-only": !!hideLegend,
+              })}
+              id={inputDescriptionId}
+              size={size ?? "medium"}
+              as="div"
+            >
+              {props.description}
+            </BodyShort>
+          )}
           {children}
           <div
             id={errorId}

@navikt/core/react/src/form/Select.tsx

@@ -1,8 +1,8 @@
-import React, { forwardRef, SelectHTMLAttributes } from "react";
 import cl from "clsx";
+import React, { forwardRef, SelectHTMLAttributes } from "react";
 
 import { ChevronDownIcon } from "@navikt/aksel-icons";
-import { BodyLong, Label, ErrorMessage, omit, Detail } from "..";
+import { BodyShort, ErrorMessage, Label, omit } from "..";
 import { FormFieldProps, useFormField } from "./useFormField";
 
 export interface SelectProps
@@ -74,31 +74,16 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
           {label}
         </Label>
         {!!description && (
-          <>
-            {size === "medium" ? (
-              <BodyLong
-                className={cl("navds-form-field__description", {
-                  "navds-sr-only": hideLabel,
-                })}
-                id={inputDescriptionId}
-                size="small"
-                as="div"
-              >
-                {description}
-              </BodyLong>
-            ) : (
-              <Detail
-                className={cl("navds-form-field__description", {
-                  "navds-sr-only": hideLabel,
-                })}
-                id={inputDescriptionId}
-                size="small"
-                as="div"
-              >
-                {description}
-              </Detail>
-            )}
-          </>
+          <BodyShort
+            className={cl("navds-form-field__description", {
+              "navds-sr-only": hideLabel,
+            })}
+            id={inputDescriptionId}
+            size={size}
+            as="div"
+          >
+            {description}
+          </BodyShort>
         )}
         <div className="navds-select__container" style={style}>
           <select

@navikt/core/react/src/form/Switch.tsx

@@ -5,7 +5,7 @@ import React, {
   useEffect,
   useState,
 } from "react";
-import { BodyShort, Detail, Loader, omit } from "..";
+import { BodyShort, Loader, omit } from "..";
 import { FormFieldProps, useFormField } from "./useFormField";
 
 const SelectedIcon = () => (
@@ -71,8 +71,6 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
       ...rest
     } = props;
 
-    const Description = size === "medium" ? BodyShort : Detail;
-
     const [checked, setChecked] = useState(
       defaultChecked ?? checkedProp ?? false
     );
@@ -130,13 +128,13 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
               {children}
             </BodyShort>
             {description && (
-              <Description
+              <BodyShort
+                size={size}
                 as="div"
-                size="small"
-                className="navds-switch__description"
+                className="navds-form-field__subdescription navds-switch__description"
               >
                 {description}
-              </Description>
+              </BodyShort>
             )}
           </div>
         </label>

@navikt/core/react/src/form/TextField.tsx

@@ -1,6 +1,6 @@
-import React, { forwardRef, InputHTMLAttributes } from "react";
 import cl from "clsx";
-import { BodyLong, Detail, Label, ErrorMessage, omit } from "..";
+import React, { forwardRef, InputHTMLAttributes } from "react";
+import { BodyShort, ErrorMessage, Label, omit } from "..";
 import { FormFieldProps, useFormField } from "./useFormField";
 
 export interface TextFieldProps
@@ -78,31 +78,16 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
         </Label>
 
         {!!description && (
-          <>
-            {size === "medium" ? (
-              <BodyLong
-                className={cl("navds-form-field__description", {
-                  "navds-sr-only": hideLabel,
-                })}
-                id={inputDescriptionId}
-                size="small"
-                as="div"
-              >
-                {description}
-              </BodyLong>
-            ) : (
-              <Detail
-                className={cl("navds-form-field__description", {
-                  "navds-sr-only": hideLabel,
-                })}
-                id={inputDescriptionId}
-                size="small"
-                as="div"
-              >
-                {description}
-              </Detail>
-            )}
-          </>
+          <BodyShort
+            className={cl("navds-form-field__description", {
+              "navds-sr-only": hideLabel,
+            })}
+            id={inputDescriptionId}
+            size={size}
+            as="div"
+          >
+            {description}
+          </BodyShort>
         )}
         <input
           {...omit(rest, ["error", "errorId", "size"])}

@navikt/core/react/src/form/Textarea.tsx

@@ -1,9 +1,8 @@
-import React, { forwardRef, useState } from "react";
 import cl from "clsx";
-import { BodyShort, BodyLong, Label, ErrorMessage, omit, Detail } from "..";
-import { FormFieldProps, useFormField } from "./useFormField";
-import { useId } from "..";
+import React, { forwardRef, useState } from "react";
+import { BodyShort, ErrorMessage, Label, omit, useId } from "..";
 import TextareaAutosize from "../util/TextareaAutoSize";
+import { FormFieldProps, useFormField } from "./useFormField";
 
 /**
  * TODO: Mulighet for lokalisering av sr-only/counter text
@@ -120,31 +119,16 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           {label}
         </Label>
         {!!description && (
-          <>
-            {size === "medium" ? (
-              <BodyLong
-                className={cl("navds-form-field__description", {
-                  "navds-sr-only": hideLabel,
-                })}
-                id={inputDescriptionId}
-                size="small"
-                as="div"
-              >
-                {description}
-              </BodyLong>
-            ) : (
-              <Detail
-                className={cl("navds-form-field__description", {
-                  "navds-sr-only": hideLabel,
-                })}
-                id={inputDescriptionId}
-                size="small"
-                as="div"
-              >
-                {description}
-              </Detail>
-            )}
-          </>
+          <BodyShort
+            className={cl("navds-form-field__description", {
+              "navds-sr-only": hideLabel,
+            })}
+            id={inputDescriptionId}
+            size={size}
+            as="div"
+          >
+            {description}
+          </BodyShort>
         )}
         <div className="navds-textarea__wrapper">
           <TextareaAutosize

@navikt/core/react/src/form/checkbox/Checkbox.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef, InputHTMLAttributes } from "react";
-import { BodyLong, BodyShort, Detail } from "../../typography";
+import { BodyShort } from "../../typography";
 import { omit } from "../../util";
 import { FormFieldProps } from "../useFormField";
 import useCheckbox from "./useCheckbox";
@@ -44,8 +44,6 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
   (props, ref) => {
     const { inputProps, hasError, size } = useCheckbox(props);
 
-    const Description = size === "medium" ? BodyLong : Detail;
-
     return (
       <div
         className={cl(
@@ -94,9 +92,13 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
               {props.children}
             </BodyShort>
             {props.description && (
-              <Description as="span" className="navds-checkbox__description">
+              <BodyShort
+                as="span"
+                size={size}
+                className="navds-form-field__subdescription navds-checkbox__description"
+              >
                 {props.description}
-              </Description>
+              </BodyShort>
             )}
           </span>
         </label>

@navikt/core/react/src/form/radio/Radio.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef, InputHTMLAttributes } from "react";
-import { BodyLong, BodyShort, Detail } from "../../typography";
+import { BodyShort } from "../../typography";
 import { omit } from "../../util";
 import { FormFieldProps } from "../useFormField";
 import { useRadio } from "./useRadio";
@@ -25,8 +25,6 @@ export interface RadioProps
 export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
   const { inputProps, size, hasError } = useRadio(props);
 
-  const Description = size === "medium" ? BodyLong : Detail;
-
   return (
     <div
       className={cl(props.className, "navds-radio", `navds-radio--${size}`, {
@@ -46,9 +44,13 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
             {props.children}
           </BodyShort>
           {props.description && (
-            <Description as="span" className="navds-radio__description">
+            <BodyShort
+              as="span"
+              size={size}
+              className="navds-form-field__subdescription navds-radio__description"
+            >
               {props.description}
-            </Description>
+            </BodyShort>
           )}
         </span>
       </label>

@navikt/core/react/src/form/radio/radio.stories.tsx

@@ -86,7 +86,9 @@ export const GroupDescription = () => (
     defaultValue="tekst2"
     description="Group description"
   >
-    <Radio value="tekst">Radiotekst</Radio>
+    <Radio value="tekst" description="textdesc">
+      Radiotekst
+    </Radio>
     <Radio value="tekst2">Radiotekst</Radio>
   </RadioGroup>
 );

@navikt/core/react/src/form/search/Search.tsx

@@ -181,12 +181,12 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
         </Label>
         {!!description && (
           <BodyShort
-            as="div"
             className={cl("navds-form-field__description", {
               "navds-sr-only": hideLabel,
             })}
             id={inputDescriptionId}
             size={size}
+            as="div"
           >
             {description}
           </BodyShort>

@navikt/core/tailwind/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-tailwind
 
+## 3.1.0
+
 ## 3.0.1
 
 ## 3.0.0

@navikt/core/tailwind/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tailwind",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "Tailwind config based on @navikt/ds-tokens",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -22,7 +22,7 @@
     "directory": "@navikt/core/tailwind"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^3.0.1",
+    "@navikt/ds-tokens": "^3.1.0",
     "@types/jest": "^29.0.0",
     "color": "4.2.3",
     "jest": "^29.0.0",

@navikt/core/tokens/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-tokens
 
+## 3.1.0
+
 ## 3.0.1
 
 ## 3.0.0

@navikt/core/tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tokens",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "Design-tokens for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [

@navikt/icons/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-icons
 
+## 3.1.0
+
 ## 3.0.1
 
 ## 3.0.0

@navikt/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "Aksel icons for NAV",
   "author": "Aksel | NAV designsystem team",
   "repository": {

@navikt/internal/css/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @navikt/ds-css-internal
 
+## 3.1.0
+
+### Minor Changes
+
+- [#1966](https://github.com/navikt/aksel/pull/1966) [`f1c4c46eb`](https://github.com/navikt/aksel/commit/f1c4c46ebb0522561483f18e3b86b190cf9cc372) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :lipstick: Alle komponenter bruker nå default `:focus-visible` for fokusmarkering.
+  (Alle komponenter som bruker `:focus-visible` har også en fallback for `:focus`)
+
 ## 3.0.1
 
 ## 3.0.0

@navikt/internal/css/dropdown.css

@@ -63,6 +63,13 @@
   box-shadow: inset 0 0 0 2px var(--a-border-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navdsi-dropdown__item:focus {
+    outline: none;
+    box-shadow: inset 0 0 0 2px var(--a-border-focus);
+  }
+}
+
 .navdsi-dropdown__item:disabled {
   color: var(--ac-dropdown-item-text, var(--a-text-action));
   opacity: 0.3;

@navikt/internal/css/header.css

@@ -59,12 +59,20 @@ button.navdsi-header__title:hover,
   background-color: var(--ac-header-hover-bg, var(--a-surface-inverted-hover));
 }
 
-.navdsi-header__title:focus,
-.navdsi-header__button:focus {
+.navdsi-header__title:focus-visible,
+.navdsi-header__button:focus-visible {
   box-shadow: var(--navdsi-header-focus);
   outline: none;
 }
 
+@supports not selector(:focus-visible) {
+  .navdsi-header__title:focus,
+  .navdsi-header__button:focus {
+    box-shadow: var(--navdsi-header-focus);
+    outline: none;
+  }
+}
+
 a.navdsi-header__title:active,
 button.navdsi-header__title:active,
 .navdsi-header__button:active {

@navikt/internal/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css-internal",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "CSS for NAV internal Designsystem-components",
   "author": "Aksel | NAV designsystem team",
   "keywords": [

@navikt/internal/css/timeline.css

@@ -190,7 +190,7 @@
   top: calc(-12.5px + 3.5px);
 }
 
-.navdsi-timeline__pin-button:focus {
+.navdsi-timeline__pin-button:focus-visible {
   box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
     0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)), 0 0 0 4px var(--a-surface-default),
     0 0 0 6px var(--a-border-focus);
@@ -202,12 +202,27 @@
     0 0 0 4px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)), 0 0 0 5px var(--a-surface-default);
 }
 
-.navdsi-timeline__pin-button:hover:focus {
+.navdsi-timeline__pin-button:hover:focus-visible {
   box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
     0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)), 0 0 0 4px var(--a-surface-default),
     0 0 0 6px var(--a-border-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navdsi-timeline__pin-button:focus {
+    box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+      0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)), 0 0 0 4px var(--a-surface-default),
+      0 0 0 6px var(--a-border-focus);
+    outline: none;
+  }
+
+  .navdsi-timeline__pin-button:hover:focus {
+    box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+      0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)), 0 0 0 4px var(--a-surface-default),
+      0 0 0 6px var(--a-border-focus);
+  }
+}
+
 .navdsi-timeline__pin-wrapper::before {
   content: "";
   top: var(--navdsc-timeline-pin-size);
@@ -255,13 +270,13 @@
   color: var(--ac-timeline-zoom-selected-text, var(--a-text-on-inverted));
 }
 
-.navdsi-timeline__period:focus {
+.navdsi-timeline__period:focus-visible {
   outline: none;
   z-index: 4;
   box-shadow: 0 0 0 2px var(--a-border-focus);
 }
 
-.navdsi-timeline__period--selected:focus {
+.navdsi-timeline__period--selected:focus-visible {
   box-shadow: inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
     0 0 0 2px var(--a-border-focus);
   z-index: 3;
@@ -271,12 +286,36 @@
   z-index: var(--a-z-index-focus);
 }
 
-.navdsi-timeline__zoom-button:focus {
+.navdsi-timeline__zoom-button:focus-visible {
   box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 3px var(--a-border-focus);
   border-width: 1px;
 }
 
-.navdsi-timeline__zoom li:not(:last-child) .navdsi-timeline__zoom-button:focus {
+.navdsi-timeline__zoom li:not(:last-child) .navdsi-timeline__zoom-button:focus-visible {
   margin-right: 2px;
   padding-right: 6px;
 }
+
+@supports not selector(:focus-visible) {
+  .navdsi-timeline__period:focus {
+    outline: none;
+    z-index: 4;
+    box-shadow: 0 0 0 2px var(--a-border-focus);
+  }
+
+  .navdsi-timeline__period--selected:focus {
+    box-shadow: inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
+      0 0 0 2px var(--a-border-focus);
+    z-index: 3;
+  }
+
+  .navdsi-timeline__zoom-button:focus {
+    box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 3px var(--a-border-focus);
+    border-width: 1px;
+  }
+
+  .navdsi-timeline__zoom li:not(:last-child) .navdsi-timeline__zoom-button:focus {
+    margin-right: 2px;
+    padding-right: 6px;
+  }
+}

@navikt/internal/react/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @navikt/ds-react-internal
 
+## 3.1.0
+
+### Patch Changes
+
+- Updated dependencies [[`9d2cd9e7f`](https://github.com/navikt/aksel/commit/9d2cd9e7fffb3cf6310c88229ee39ea85db19bca)]:
+  - @navikt/ds-react@3.1.0
+  - @navikt/aksel-icons@3.1.0
+
 ## 3.0.1
 
 ### Patch Changes

@navikt/internal/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react-internal",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "Aksel react components for internal UIs in NAV",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -36,8 +36,8 @@
     "watch": "tsc --watch -p tsconfig.esm.json"
   },
   "dependencies": {
-    "@navikt/aksel-icons": "^3.0.1",
-    "@navikt/ds-react": "^3.0.1",
+    "@navikt/aksel-icons": "^3.1.0",
+    "@navikt/ds-react": "^3.1.0",
     "clsx": "^1.1.1",
     "copy-to-clipboard": "^3.3.1"
   },

aksel.nav.no/package.json

@@ -15,15 +15,15 @@
     "website"
   ],
   "dependencies": {
-    "@navikt/aksel-icons": "^3.0.1",
-    "@navikt/ds-codemod": "^3.0.1",
-    "@navikt/ds-css": "^3.0.1",
-    "@navikt/ds-css-internal": "^3.0.1",
-    "@navikt/ds-icons": "^3.0.1",
-    "@navikt/ds-react": "^3.0.1",
-    "@navikt/ds-react-internal": "^3.0.1",
-    "@navikt/ds-tailwind": "^3.0.1",
-    "@navikt/ds-tokens": "^3.0.1"
+    "@navikt/aksel-icons": "^3.1.0",
+    "@navikt/ds-codemod": "^3.1.0",
+    "@navikt/ds-css": "^3.1.0",
+    "@navikt/ds-css-internal": "^3.1.0",
+    "@navikt/ds-icons": "^3.1.0",
+    "@navikt/ds-react": "^3.1.0",
+    "@navikt/ds-react-internal": "^3.1.0",
+    "@navikt/ds-tailwind": "^3.1.0",
+    "@navikt/ds-tokens": "^3.1.0"
   },
   "devDependencies": {
     "prettier-plugin-tailwindcss": "^0.2.3"

examples/shadow-dom/package.json

@@ -10,8 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@navikt/ds-css": "3.0.1",
-    "@navikt/ds-react": "3.0.1",
+    "@navikt/ds-css": "3.1.0",
+    "@navikt/ds-react": "3.1.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },