Version Packages (#1977 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
💄 Oppdatert ToggleGroup (#1976 )
2026-10-13 01:02:02 +00:00 · 2023-05-11 15:57:52 +02:00 · 2023-05-11 15:55:30 +02:00 · 2023-05-11 12:35:10 +02:00 · 2023-05-10 22:19:00 +02:00 · 2023-05-10 16:03:09 +02:00
66 changed files with 894 additions and 294 deletions
@@ -1,5 +1,13 @@
 # @navikt/aksel-icons

+## 3.1.3
+
+## 3.1.2
+
+## 3.1.1
+
+## 3.1.0
+
 ## 3.0.1

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

+## 3.1.3
+
+### Patch Changes
+
+- Updated dependencies [[`e8ecf309a`](https://github.com/navikt/aksel/commit/e8ecf309a910e47fd3cea6c54cd993ab1196910f)]:
+  - @navikt/ds-css@3.1.3
+
+## 3.1.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@3.1.2
+
+## 3.1.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@3.1.1
+
+## 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
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel",
-  "version": "3.0.1",
+  "version": "3.1.3",
  "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.3",
    "axios": "1.3.6",
    "chalk": "4.1.0",
    "clipboardy": "^2.3.0",
@@ -1,5 +1,13 @@
 # @navikt/ds-codemod

+## 3.1.3
+
+## 3.1.2
+
+## 3.1.1
+
+## 3.1.0
+
 ## 3.0.1

 ## 3.0.0
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-codemod",
-  "version": "3.0.1",
+  "version": "3.1.3",
  "description": "Aksel codemods for NAVs designsystem",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -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.3",
+    "@navikt/ds-react": "^3.1.3",
    "clsx": "^1.1.1"
  },
  "devDependencies": {
@@ -1,5 +1,29 @@
 # @navikt/ds-css

+## 3.1.3
+
+### Patch Changes
+
+- [#1976](https://github.com/navikt/aksel/pull/1976) [`e8ecf309a`](https://github.com/navikt/aksel/commit/e8ecf309a910e47fd3cea6c54cd993ab1196910f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :lipstick: Oppdatert utseende for ToggleGroup
+
+  - Medium og Small er begge 10px lavere
+  - Mindre border-radius
+
+## 3.1.2
+
+## 3.1.1
+
+## 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
@@ -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));
@@ -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;
@@ -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));
 }
@@ -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);
@@ -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) {
@@ -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;
@@ -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 */
@@ -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));
+}
@@ -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;
@@ -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;
+  }
+}
@@ -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;
@@ -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));
@@ -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));
@@ -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));
@@ -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;
+  }
+}
@@ -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;
@@ -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));
@@ -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);
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "3.0.1",
+  "version": "3.1.3",
  "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.3",
    "cssnano": "6.0.0",
    "fast-glob": "3.2.11",
    "lodash": "4.17.21",
@@ -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;
@@ -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;
@@ -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));
@@ -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;
@@ -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;
 }
@@ -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);
+  }
+}
@@ -5,7 +5,7 @@
 }

 .navds-toggle-group {
-  border-radius: 9px;
+  border-radius: var(--a-border-radius-medium);
  background-color: var(--ac-toggle-group-bg, var(--a-surface-transparent));
  box-shadow: inset 0 0 0 1px var(--ac-toggle-group-border, var(--a-border-default));
  padding: calc(var(--a-spacing-1) + 1px);
@@ -15,6 +15,10 @@
  grid-auto-columns: 1fr;
 }

+.navds-toggle-group--small {
+  padding: calc(var(--a-spacing-05) + 1px);
+}
+
 .navds-toggle-group--neutral {
  background-color: var(--ac-toggle-group-neutral-bg, var(--a-surface-transparent));
  box-shadow: inset 0 0 0 1px var(--ac-toggle-group-neutral-border, var(--a-border-default));
@@ -24,14 +28,25 @@
  display: inline-flex;
  align-items: center;
  justify-content: center;
-  padding: var(--a-spacing-3);
-  min-height: 48px;
+  padding: var(--a-spacing-1) var(--a-spacing-3);
+  min-height: 38px;
  border: none;
  cursor: pointer;
  background-color: var(--ac-toggle-group-button-bg, var(--a-surface-transparent));
  color: var(--ac-toggle-group-button-text, var(--a-text-default));
-  border-radius: var(--a-border-radius-medium);
+  border-radius: 2px;
  min-width: fit-content;
+  font-weight: var(--a-font-weight-regular);
+}
+
+.navds-toggle-group--medium > :where(.navds-toggle-group__button:first-of-type:focus-visible) {
+  border-start-start-radius: 1px;
+  border-end-start-radius: 1px;
+}
+
+.navds-toggle-group--medium > :where(.navds-toggle-group__button:last-of-type:focus-visible) {
+  border-start-end-radius: 1px;
+  border-end-end-radius: 1px;
 }

 .navds-toggle-group--neutral > .navds-toggle-group__button {
@@ -41,7 +56,7 @@

 .navds-toggle-group__button:hover {
  background-color: var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle));
-  color: var(--ac-toggle-group-button-hover-text, var(--a-text-action-on-action-subtle));
+  color: var(--ac-toggle-group-button-hover-text, var(--a-text-default));
 }

 .navds-toggle-group--neutral > .navds-toggle-group__button:hover {
@@ -49,24 +64,45 @@
  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;
  gap: var(--a-spacing-2);
+  font-weight: inherit;
 }

 .navds-toggle-group__button-inner > * {
@@ -77,17 +113,18 @@
 .navds-toggle-group__button[aria-checked="true"] {
  background-color: var(--ac-toggle-group-selected-bg, var(--a-surface-action-selected));
  color: var(--ac-toggle-group-selected-text, var(--a-text-on-action));
+  font-weight: var(--a-font-weight-bold);
 }

 .navds-toggle-group--neutral > .navds-toggle-group__button[aria-pressed="true"],
 .navds-toggle-group--neutral > .navds-toggle-group__button[aria-checked="true"] {
-  background-color: var(--ac-toggle-group-neutral-selected-bg, var(--a-surface-neutral));
+  background-color: var(--ac-toggle-group-neutral-selected-bg, var(--a-surface-neutral-selected));
  color: var(--ac-toggle-group-neutral-selected-text, var(--a-text-on-neutral));
 }

 .navds-toggle-group--small > .navds-toggle-group__button {
-  padding: 0.375rem;
-  min-height: 32px;
+  padding: var(--a-spacing-05) var(--a-spacing-3);
+  min-height: 26px;
  min-width: fit-content;
 }

@@ -277,14 +277,14 @@
    "--ac-toggle-group-button-bg": "--a-surface-transparent",
    "--ac-toggle-group-button-text": "--a-text-default",
    "--ac-toggle-group-button-hover-bg": "--a-surface-action-subtle",
-    "--ac-toggle-group-button-hover-text": "--a-text-action-on-action-subtle",
+    "--ac-toggle-group-button-hover-text": "--a-text-default",
    "--ac-toggle-group-selected-bg": "--a-surface-action-selected",
    "--ac-toggle-group-selected-text": "--a-text-on-action",
    "--ac-toggle-group-button-neutral-bg": "--a-surface-transparent",
    "--ac-toggle-group-button-neutral-text": "--a-text-default",
    "--ac-toggle-group-button-neutral-hover-bg": "--a-surface-neutral-subtle-hover",
    "--ac-toggle-group-button-neutral-hover-text": "--a-text-default",
-    "--ac-toggle-group-neutral-selected-bg": "--a-surface-neutral",
+    "--ac-toggle-group-neutral-selected-bg": "--a-surface-neutral-selected",
    "--ac-toggle-group-neutral-selected-text": "--a-text-on-neutral"
  },
  "tooltip": {
@@ -1,5 +1,40 @@
 # @navikt/ds-react

+## 3.1.3
+
+### Patch Changes
+
+- [#1976](https://github.com/navikt/aksel/pull/1976) [`e8ecf309a`](https://github.com/navikt/aksel/commit/e8ecf309a910e47fd3cea6c54cd993ab1196910f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :lipstick: Oppdatert utseende for ToggleGroup
+
+  - Medium og Small er begge 10px lavere
+  - Mindre border-radius
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@3.1.3
+
+## 3.1.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@3.1.2
+
+## 3.1.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@3.1.1
+
+## 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
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "3.0.1",
+  "version": "3.1.3",
  "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.3",
    "@radix-ui/react-tabs": "1.0.0",
    "@radix-ui/react-toggle-group": "1.0.0",
    "clsx": "^1.2.1",
@@ -46,17 +46,20 @@ interface ExpansionCardCommonProps
   * @default "medium"
   */
  size?: "medium" | "small";
-  /**
-   * Since ExpansionCard is a section-element, accessible name is required.
-   */
 }

 type ExpansionCardConditionalProps =
  | {
-      ["aria-label"]: string;
+      /**
+       * Should be set if not using 'aria-labelledby'
+       */
+      "aria-label": string;
    }
  | {
-      ["aria-labelledby"]: string;
+      /**
+       * Should be set if not using 'aria-label'
+       */
+      "aria-labelledby": string;
    };

 export type ExpansionCardContextProps = {
@@ -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}
@@ -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
@@ -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>
@@ -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"])}
@@ -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
@@ -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>
@@ -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>
@@ -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>
 );
@@ -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>
@@ -1,6 +1,6 @@
 import React, { forwardRef, useContext } from "react";
 import cl from "clsx";
-import { Label } from "..";
+import { BodyShort } from "../typography/BodyShort";
 import * as RadixToggleGroup from "@radix-ui/react-toggle-group";
 import { ToggleGroupContext } from "./ToggleGroup";

@@ -30,13 +30,13 @@ const ToggleItem = forwardRef<HTMLButtonElement, ToggleItemProps>(
        ref={ref}
        className={cl("navds-toggle-group__button", className)}
      >
-        <Label
+        <BodyShort
          as="span"
          className="navds-toggle-group__button-inner"
          size={context?.size}
        >
          {children}
-        </Label>
+        </BodyShort>
      </RadixToggleGroup.Item>
    );
  }
@@ -1,5 +1,13 @@
 # @navikt/ds-tailwind

+## 3.1.3
+
+## 3.1.2
+
+## 3.1.1
+
+## 3.1.0
+
 ## 3.0.1

 ## 3.0.0
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tailwind",
-  "version": "3.0.1",
+  "version": "3.1.3",
  "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.3",
    "@types/jest": "^29.0.0",
    "color": "4.2.3",
    "jest": "^29.0.0",
@@ -1,5 +1,13 @@
 # @navikt/ds-tokens

+## 3.1.3
+
+## 3.1.2
+
+## 3.1.1
+
+## 3.1.0
+
 ## 3.0.1

 ## 3.0.0
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "3.0.1",
+  "version": "3.1.3",
  "description": "Design-tokens for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -1,5 +1,13 @@
 # @navikt/ds-icons

+## 3.1.3
+
+## 3.1.2
+
+## 3.1.1
+
+## 3.1.0
+
 ## 3.0.1

 ## 3.0.0
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-icons",
-  "version": "3.0.1",
+  "version": "3.1.3",
  "description": "Aksel icons for NAV",
  "author": "Aksel | NAV designsystem team",
  "repository": {
@@ -1,5 +1,26 @@
 # @navikt/ds-css-internal

+## 3.1.3
+
+## 3.1.2
+
+### Patch Changes
+
+- [`5e79234ef`](https://github.com/navikt/aksel/commit/5e79234effb8c8fc73c9bb0c34737e99fab1510b) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Fikset pin alignment for Timeline
+
+## 3.1.1
+
+### Patch Changes
+
+- [`14379a02c`](https://github.com/navikt/aksel/commit/14379a02c3d32091a8c33061464160d7de9f3f2e) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Timeline håndterte ikke SVG ikoner riktig
+
+## 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
@@ -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;
@@ -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 {
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css-internal",
-  "version": "3.0.1",
+  "version": "3.1.3",
  "description": "CSS for NAV internal Designsystem-components",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -12,7 +12,6 @@
  height: 1rem;
  box-sizing: content-box;
  grid-column: 2;
-  margin-left: var(--a-spacing-8);
 }

 .navdsi-timeline__row-label {
@@ -40,7 +39,6 @@
  display: flex;
  background: var(--ac-timeline-row-bg, var(--a-surface-subtle));
  margin: var(--a-spacing-4) 0;
-  padding-left: var(--a-spacing-8);
  grid-column: 2;
 }

@@ -85,6 +83,10 @@
  align-items: center;
 }

+.navdsi-timeline__period--inner svg {
+  flex-shrink: 0;
+}
+
 .navdsi-timeline__period--clickable {
  cursor: pointer;
 }
@@ -190,7 +192,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 +204,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 +272,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 +288,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;
+  }
+}
@@ -1,5 +1,39 @@
 # @navikt/ds-react-internal

+## 3.1.3
+
+### Patch Changes
+
+- Updated dependencies [[`e8ecf309a`](https://github.com/navikt/aksel/commit/e8ecf309a910e47fd3cea6c54cd993ab1196910f)]:
+  - @navikt/ds-react@3.1.3
+  - @navikt/aksel-icons@3.1.3
+
+## 3.1.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@3.1.2
+  - @navikt/aksel-icons@3.1.2
+
+## 3.1.1
+
+### Patch Changes
+
+- [`14379a02c`](https://github.com/navikt/aksel/commit/14379a02c3d32091a8c33061464160d7de9f3f2e) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Timeline håndterte ikke SVG ikoner riktig
+
+- Updated dependencies []:
+  - @navikt/ds-react@3.1.1
+  - @navikt/aksel-icons@3.1.1
+
+## 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
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react-internal",
-  "version": "3.0.1",
+  "version": "3.1.3",
  "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.3",
+    "@navikt/ds-react": "^3.1.3",
    "clsx": "^1.1.1",
    "copy-to-clipboard": "^3.3.1"
  },
@@ -72,7 +72,7 @@ const ClickablePeriod = React.memo(
            initiate(index);
          }}
        >
-          <div className="navdsi-timeline__period--inner">{icon}</div>
+          <span className="navdsi-timeline__period--inner">{icon}</span>
        </button>
        {children && (
          <Popover
@@ -33,10 +33,12 @@ const NonClickablePeriod = ({
        [direction]: `${left}%`,
      }}
    >
-      <div className="navdsi-timeline__period--inner">
+      <span className="navdsi-timeline__period--inner">
        {icon}
-        <p className="sr-only">{ariaLabel(start, end, status, statusLabel)}</p>
-      </div>
+        <span className="sr-only">
+          {ariaLabel(start, end, status, statusLabel)}
+        </span>
+      </span>
    </div>
  );
 };
@@ -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.3",
+    "@navikt/ds-codemod": "^3.1.3",
+    "@navikt/ds-css": "^3.1.3",
+    "@navikt/ds-css-internal": "^3.1.3",
+    "@navikt/ds-icons": "^3.1.3",
+    "@navikt/ds-react": "^3.1.3",
+    "@navikt/ds-react-internal": "^3.1.3",
+    "@navikt/ds-tailwind": "^3.1.3",
+    "@navikt/ds-tokens": "^3.1.3"
  },
  "devDependencies": {
    "prettier-plugin-tailwindcss": "^0.2.3"
@@ -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.3",
+    "@navikt/ds-react": "3.1.3",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
@@ -3885,7 +3885,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@navikt/aksel-icons@^2.9.8, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
+"@navikt/aksel-icons@^3.0.1, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
  version: 0.0.0-use.local
  resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons"
  dependencies:
@@ -3912,7 +3912,7 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "@navikt/aksel@workspace:@navikt/aksel"
  dependencies:
-    "@navikt/ds-css": 2.9.8
+    "@navikt/ds-css": 3.0.1
    "@types/inquirer": ^9.0.3
    "@types/jest": ^29.0.0
    axios: 1.3.6
@@ -3936,7 +3936,7 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-codemod@^2.9.8, @navikt/ds-codemod@workspace:@navikt/codemod":
+"@navikt/ds-codemod@^3.0.1, @navikt/ds-codemod@workspace:@navikt/codemod":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-codemod@workspace:@navikt/codemod"
  dependencies:
@@ -3963,7 +3963,7 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-css-internal@^2.9.8, @navikt/ds-css-internal@workspace:@navikt/internal/css":
+"@navikt/ds-css-internal@^3.0.1, @navikt/ds-css-internal@workspace:@navikt/internal/css":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-css-internal@workspace:@navikt/internal/css"
  dependencies:
@@ -3974,11 +3974,11 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-css@2.9.8, @navikt/ds-css@^2.9.8, @navikt/ds-css@workspace:@navikt/core/css":
+"@navikt/ds-css@3.0.1, @navikt/ds-css@^3.0.1, @navikt/ds-css@workspace:@navikt/core/css":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-css@workspace:@navikt/core/css"
  dependencies:
-    "@navikt/ds-tokens": ^2.9.8
+    "@navikt/ds-tokens": ^3.0.1
    cssnano: 6.0.0
    fast-glob: 3.2.11
    lodash: 4.17.21
@@ -3991,7 +3991,7 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-icons@^2.9.8, @navikt/ds-icons@workspace:@navikt/icons":
+"@navikt/ds-icons@^3.0.1, @navikt/ds-icons@workspace:@navikt/icons":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-icons@workspace:@navikt/icons"
  dependencies:
@@ -4027,8 +4027,8 @@ __metadata:
    "@babel/preset-env": 7.19.4
    "@babel/preset-react": 7.18.6
    "@babel/preset-typescript": 7.18.6
-    "@navikt/ds-icons": ^2.9.8
-    "@navikt/ds-react": ^2.9.8
+    "@navikt/ds-icons": ^3.0.1
+    "@navikt/ds-react": ^3.0.1
    "@rollup/plugin-babel": 6.0.2
    "@rollup/plugin-commonjs": 23.0.2
    "@rollup/plugin-node-resolve": ^15.0.1
@@ -4053,12 +4053,12 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-react-internal@^2.9.8, @navikt/ds-react-internal@workspace:@navikt/internal/react":
+"@navikt/ds-react-internal@^3.0.1, @navikt/ds-react-internal@workspace:@navikt/internal/react":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-react-internal@workspace:@navikt/internal/react"
  dependencies:
-    "@navikt/aksel-icons": ^2.9.8
-    "@navikt/ds-react": ^2.9.8
+    "@navikt/aksel-icons": ^3.0.1
+    "@navikt/ds-react": ^3.0.1
    clsx: ^1.1.1
    concurrently: 7.2.1
    copy-to-clipboard: ^3.3.1
@@ -4074,13 +4074,12 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-react@2.9.8, @navikt/ds-react@^2.9.8, @navikt/ds-react@workspace:@navikt/core/react":
+"@navikt/ds-react@3.0.1, @navikt/ds-react@^3.0.1, @navikt/ds-react@workspace:@navikt/core/react":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-react@workspace:@navikt/core/react"
  dependencies:
    "@floating-ui/react": 0.17.0
-    "@navikt/aksel-icons": ^2.9.8
-    "@navikt/ds-icons": ^2.9.8
+    "@navikt/aksel-icons": ^3.0.1
    "@radix-ui/react-tabs": 1.0.0
    "@radix-ui/react-toggle-group": 1.0.0
    "@testing-library/dom": 8.13.0
@@ -4116,11 +4115,11 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-tailwind@^2.9.8, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
+"@navikt/ds-tailwind@^3.0.1, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind"
  dependencies:
-    "@navikt/ds-tokens": ^2.9.8
+    "@navikt/ds-tokens": ^3.0.1
    "@types/jest": ^29.0.0
    color: 4.2.3
    jest: ^29.0.0
@@ -4131,7 +4130,7 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-tokens@^2.9.8, @navikt/ds-tokens@workspace:@navikt/core/tokens":
+"@navikt/ds-tokens@^3.0.1, @navikt/ds-tokens@workspace:@navikt/core/tokens":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
  dependencies:
@@ -8094,15 +8093,15 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "aksel.nav.no@workspace:aksel.nav.no"
  dependencies:
-    "@navikt/aksel-icons": ^2.9.8
-    "@navikt/ds-codemod": ^2.9.8
-    "@navikt/ds-css": ^2.9.8
-    "@navikt/ds-css-internal": ^2.9.8
-    "@navikt/ds-icons": ^2.9.8
-    "@navikt/ds-react": ^2.9.8
-    "@navikt/ds-react-internal": ^2.9.8
-    "@navikt/ds-tailwind": ^2.9.8
-    "@navikt/ds-tokens": ^2.9.8
+    "@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
    prettier-plugin-tailwindcss: ^0.2.3
  languageName: unknown
  linkType: soft
@@ -23124,8 +23123,8 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "shadow-dom@workspace:examples/shadow-dom"
  dependencies:
-    "@navikt/ds-css": 2.9.8
-    "@navikt/ds-react": 2.9.8
+    "@navikt/ds-css": 3.0.1
+    "@navikt/ds-react": 3.0.1
    "@types/react": ^18.0.0
    "@types/react-dom": ^18.0.0
    "@vitejs/plugin-react": ^2.1.0
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot]	c818a92355	Version Packages (#1977 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-05-11 15:57:52 +02:00
Ken	e8ecf309a9	💄 Oppdatert ToggleGroup (#1976 )	2023-05-11 15:55:30 +02:00
Ken	060d4f3c7c	📝 Bedre props-dokumentasjon for ExpansionCard	2023-05-11 12:35:10 +02:00
github-actions[bot]andgithub-actions[bot]	1871038837	Version Packages (#1974 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-05-10 22:19:00 +02:00
Ken	5e79234eff	🐛 Timeline pin var ikke riktig alignet	2023-05-10 16:03:09 +02:00
github-actions[bot]andgithub-actions[bot]	b8bebace11	Version Packages (#1971 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-05-10 14:10:55 +02:00
Ken	14379a02c3	🐛 Timeline håndterte ikke SVG-ikoner riktig	2023-05-10 13:56:20 +02:00
github-actions[bot]andgithub-actions[bot]	d716ebbc40	Version Packages (#1970 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-05-10 13:33:21 +02:00
Ken	f1c4c46ebb	💄 Focus-visible (#1966 )	2023-05-10 13:04:29 +02:00
Ken	9d2cd9e7ff	💄 Oppdatert label/description for skjemakomponenter (#1967 )	2023-05-10 12:54:29 +02:00