Version Packages (#2515 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
🐛 Synket date-fns versioner i Repo
2026-10-15 02:02:02 +00:00 · 2023-11-24 19:40:44 +01:00 · 2023-11-24 18:56:08 +01:00 · 2023-11-24 11:04:24 +01:00 · 2023-11-23 14:16:48 +01:00 · 2023-11-23 13:57:06 +01:00
733 changed files with 14416 additions and 9709 deletions
@@ -0,0 +1,22 @@
+name: Eksempel på bruk
+description: Send et eksempel på ting fra Aksel som er brukt i det fri (tokens, komponenter, maler, etc)
+title: "[Eksempel på bruk]: "
+labels: ["dokumentasjon 📖"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Takk for at du bidrar til Aksel!
+  - type: input
+    id: title
+    attributes:
+      label: Lenke til side
+      description: Lenke til siden hvor eksemplet er
+      placeholder:
+    validations:
+      required: true
+  - type: textarea
+    id: examples
+    attributes:
+      label: Forklaring
+      description: Forklar om det er noe man må gjøre for å se eksemplet, eller hvor på siden det ligger
@@ -2,8 +2,6 @@ name: Ny komponent
 description: Send et ønske om en eller flere nye komponenter
 title: "[Ny komponent]: "
 labels: ["nytt ✨", "forespørsel 🥰", "komponenter 🧩"]
-assignees:
-  - KenAJoh
 body:
  - type: markdown
    attributes:
@@ -2,8 +2,6 @@ name: Nytt ikon
 description: Send et ønske om et eller flere nye ikoner
 title: "[Nytt ikon]: "
 labels: ["nytt ✨", "ikoner 🖼", "forespørsel 🥰"]
-assignees:
-  - KenAJoh
 body:
  - type: markdown
    attributes:
@@ -2,8 +2,6 @@ name: Innspill til komponent
 description: Send inn innspill til komponent
 title: "[Innspill til komponent]: "
 labels: ["forespørsel 🥰", "komponenter 🧩", "nytt ✨", "beta 🧪"]
-assignees:
-  - KenAJoh
 body:
  - type: markdown
    attributes:
@@ -2,8 +2,6 @@ name: Innspill til ikon
 description: Send inn innspill til ikon
 title: "[Tilbakemelding på ikon]: "
 labels: ["forespørsel 🥰", "ikoner 🖼️"]
-assignees:
-  - KenAJoh
 body:
  - type: markdown
    attributes:
@@ -151,4 +151,5 @@ playwright-report/
 backup-*.tar.gz
 sitemap-urls.json
 *.tar.gz
-searchindex.json
+searchindex.json
+aksel.nav.no/website/public/rss
@@ -1,5 +1,31 @@
 # @navikt/aksel-icons

+## 5.11.2
+
+## 5.11.1
+
+## 5.11.0
+
+### Minor Changes
+
+- Ikoner: Nytt ikon `PushPin` ([#2503](https://github.com/navikt/aksel/pull/2503))
+
+## 5.10.4
+
+## 5.10.3
+
+## 5.10.2
+
+## 5.10.1
+
+## 5.10.0
+
+## 5.9.2
+
+## 5.9.1
+
+## 5.9.0
+
 ## 5.8.0

 ## 5.7.6
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.3117 3.25101C15.5796 2.51892 14.3754 2.57898 13.7198 3.38029L10.1358 7.76072C10.1008 7.80356 10.0525 7.83356 9.99854 7.84601L5.5894 8.8635C4.25008 9.17258 3.77354 10.8342 4.74547 11.8061L7.93934 15L3.46967 19.4697C3.17678 19.7626 3.17678 20.2374 3.46967 20.5303C3.76256 20.8232 4.23744 20.8232 4.53033 20.5303L9 16.0607L12.1939 19.2545C13.1658 20.2265 14.8274 19.7499 15.1365 18.4106L16.154 14.0015C16.1664 13.9475 16.1964 13.8992 16.2393 13.8642L20.6197 10.2802C21.421 9.62457 21.4811 8.42042 20.749 7.68833L16.3117 3.25101ZM9.53033 14.4697L13.2545 18.1939C13.3934 18.3327 13.6308 18.2646 13.6749 18.0733L14.6924 13.6642C14.7795 13.2866 14.9895 12.9486 15.2894 12.7032L19.6699 9.11925C19.7843 9.02559 19.7929 8.85357 19.6883 8.74899L15.251 4.31167C15.1464 4.20709 14.9744 4.21567 14.8807 4.33014L11.2968 8.71058C11.0514 9.01048 10.7134 9.22046 10.3358 9.3076L5.92669 10.3251C5.73536 10.3692 5.66728 10.6066 5.80613 10.7455L9.53033 14.4697Z" fill="#23262A"/>
+</svg>
@@ -0,0 +1,9 @@
+name: PushPin
+category: Home
+sub_category: Hosehold items
+keywords:
+  - pinn
+  - tegnestift
+variant: Stroke
+updated_at: 23.11.2023
+created_at: 23.11.2023
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.3117 3.25101C15.5796 2.51892 14.3754 2.57898 13.7198 3.38029L10.1358 7.76072C10.1008 7.80356 10.0525 7.83356 9.99856 7.84601L5.58942 8.8635C4.2501 9.17258 3.77356 10.8342 4.74548 11.8061L12.1939 19.2545C13.1658 20.2265 14.8274 19.7499 15.1365 18.4106L16.154 14.0015C16.1665 13.9475 16.1965 13.8992 16.2393 13.8642L20.6197 10.2802C21.421 9.62457 21.4811 8.42042 20.749 7.68833L16.3117 3.25101ZM4.53033 20.5303L8.06066 17L7 15.9393L3.46967 19.4697C3.17678 19.7626 3.17678 20.2374 3.46967 20.5303C3.76256 20.8232 4.23744 20.8232 4.53033 20.5303Z" fill="#23262A"/>
+</svg>
@@ -0,0 +1,9 @@
+name: PushPinFill
+category: Home
+sub_category: Hosehold items
+keywords:
+  - pinn
+  - tegnestift
+variant: Fill
+updated_at: 23.11.2023
+created_at: 23.11.2023
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-icons",
-  "version": "5.8.0",
+  "version": "5.11.2",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -1,5 +1,27 @@
 # @navikt/aksel-stylelint

+## 5.11.2
+
+## 5.11.1
+
+## 5.11.0
+
+## 5.10.4
+
+## 5.10.3
+
+## 5.10.2
+
+## 5.10.1
+
+## 5.10.0
+
+## 5.9.2
+
+## 5.9.1
+
+## 5.9.0
+
 ## 5.8.0

 ## 5.7.6
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-stylelint",
-  "version": "5.8.0",
+  "version": "5.11.2",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
  "repository": {
@@ -35,8 +35,8 @@
    "dev": "yarn watch:lint"
  },
  "devDependencies": {
-    "@navikt/ds-css": "^5.8.0",
-    "@navikt/ds-tokens": "^5.8.0",
+    "@navikt/ds-css": "^5.11.2",
+    "@navikt/ds-tokens": "^5.11.2",
    "@types/jest": "^29.0.0",
    "concurrently": "7.2.1",
    "copyfiles": "2.4.1",
@@ -1,5 +1,82 @@
 # @navikt/aksel

+## 5.11.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.11.2
+
+## 5.11.1
+
+### Patch Changes
+
+- Updated dependencies [[`10bbdb730`](https://github.com/navikt/aksel/commit/10bbdb730ba79544fa65e1aacebd865be8672a05)]:
+  - @navikt/ds-css@5.11.1
+
+## 5.11.0
+
+### Patch Changes
+
+- Updated dependencies [[`b7d03bfc8`](https://github.com/navikt/aksel/commit/b7d03bfc89dddb679c49a075bd45d675aacc7a71), [`9dafbeb4e`](https://github.com/navikt/aksel/commit/9dafbeb4eb802532cb9c6ad50ab5bf502e1bd5b4), [`16cad2637`](https://github.com/navikt/aksel/commit/16cad263787ad12978c191e2fb45816d2015ef0c)]:
+  - @navikt/ds-css@5.11.0
+
+## 5.10.4
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.10.4
+
+## 5.10.3
+
+### Patch Changes
+
+- Updated dependencies [[`d3c0052c3`](https://github.com/navikt/aksel/commit/d3c0052c3300189798d04f17c2c2892f7c304277)]:
+  - @navikt/ds-css@5.10.3
+
+## 5.10.2
+
+### Patch Changes
+
+- Updated dependencies [[`79bddd9ca`](https://github.com/navikt/aksel/commit/79bddd9caa9467b60e1e0c1c15b16f76dccbc304)]:
+  - @navikt/ds-css@5.10.2
+
+## 5.10.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.10.1
+
+## 5.10.0
+
+### Patch Changes
+
+- Updated dependencies [[`60d348130`](https://github.com/navikt/aksel/commit/60d34813009377a1a7d84bed6627c60524849957)]:
+  - @navikt/ds-css@5.10.0
+
+## 5.9.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.9.2
+
+## 5.9.1
+
+### Patch Changes
+
+- Updated dependencies [[`925450cb7`](https://github.com/navikt/aksel/commit/925450cb73cd792cd3b6ad3ebf9f38ba022ee4df)]:
+  - @navikt/ds-css@5.9.1
+
+## 5.9.0
+
+### Patch Changes
+
+- Updated dependencies [[`51eee7f01`](https://github.com/navikt/aksel/commit/51eee7f011aa016973bb952313cf65a1c55aa382), [`51eee7f01`](https://github.com/navikt/aksel/commit/51eee7f011aa016973bb952313cf65a1c55aa382), [`51eee7f01`](https://github.com/navikt/aksel/commit/51eee7f011aa016973bb952313cf65a1c55aa382), [`51eee7f01`](https://github.com/navikt/aksel/commit/51eee7f011aa016973bb952313cf65a1c55aa382)]:
+  - @navikt/ds-css@5.9.0
+
 ## 5.8.0

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel",
-  "version": "5.8.0",
+  "version": "5.11.2",
  "description": "Aksel command line interface. Handles css-imports, codemods and more",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -29,8 +29,8 @@
  },
  "homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
  "dependencies": {
-    "@navikt/ds-css": "5.8.0",
-    "axios": "1.3.6",
+    "@navikt/ds-css": "5.11.2",
+    "axios": "1.6.0",
    "chalk": "4.1.0",
    "clipboardy": "^2.3.0",
    "commander": "10.0.1",
@@ -38,7 +38,7 @@
    "fast-glob": "3.2.11",
    "figlet": "1.6.0",
    "is-git-clean": "1.1.0",
-    "jscodeshift": "0.13.1",
+    "jscodeshift": "^0.15.1",
    "jscodeshift-add-imports": "1.0.10",
    "lodash": "4.17.21",
    "react-scanner": "^1.1.0"
@@ -1,5 +1,67 @@
 # @navikt/ds-css

+## 5.11.2
+
+## 5.11.1
+
+### Patch Changes
+
+- Switch: Byttet success-farger med action npr checked ([#2511](https://github.com/navikt/aksel/pull/2511))
+
+## 5.11.0
+
+### Minor Changes
+
+- :sparkles: Textarea: Mulighet for å sette resize-retning ([#2494](https://github.com/navikt/aksel/pull/2494))
+
+- :sparkles: Textarea: Eksperimentell støtte for automatisk scrollbar ([#2457](https://github.com/navikt/aksel/pull/2457))
+
+### Patch Changes
+
+- :wheelchair: Textarea: Forsinkelse ved live-opplesning av gjenstående tegn ([#2502](https://github.com/navikt/aksel/pull/2502))
+
+## 5.10.4
+
+## 5.10.3
+
+### Patch Changes
+
+- :bug: Textarea: Teller flyttet ut av tekstfeltet for å unngå overlapp og misforståelser ([#2483](https://github.com/navikt/aksel/pull/2483))
+
+## 5.10.2
+
+### Patch Changes
+
+- Primtives: CSS-import for primitives er nå mer spesifikk ([#2469](https://github.com/navikt/aksel/pull/2469))
+
+## 5.10.1
+
+## 5.10.0
+
+### Minor Changes
+
+- Primitives: Ny komponent `Page` og `Page.Block` ([#2456](https://github.com/navikt/aksel/pull/2456))
+
+## 5.9.2
+
+## 5.9.1
+
+### Patch Changes
+
+- :lipstick: Modal: Bedre håndtering av mobiler i landskapsmodus ([#2444](https://github.com/navikt/aksel/pull/2444))
+
+## 5.9.0
+
+### Minor Changes
+
+- Datepicker/Monthpicker: Hvis man bruker komponentene i Modal vil Popover bli erstattet med Modal uansett om man er på desktop eller mobil. ([#2419](https://github.com/navikt/aksel/pull/2419))
+
+- Datepicker/Monthpicker/Popover: Fjernet `bubbleEscape`-prop. ([#2419](https://github.com/navikt/aksel/pull/2419))
+
+- useDatepicker/useMonthPicker/useRangedpicker: Fjernet `openOnFocus`-prop, kan nå bare åpnes ved klikk på date-knapp i input. ([#2419](https://github.com/navikt/aksel/pull/2419))
+
+- Datepicker/Monthpicker: Bytter nå automatisk til Modalvisning på mobil. ([#2419](https://github.com/navikt/aksel/pull/2419))
+
 ## 5.8.0

 ### Patch Changes
@@ -35,6 +35,10 @@ const StyleMappings = {
      component: "Box",
      main: primitivesCss,
    },
+    {
+      component: "Page",
+      main: primitivesCss,
+    },
    {
      component: "HGrid",
      main: primitivesCss,
@@ -183,7 +187,7 @@ const StyleMappings = {
    {
      component: "DatePicker",
      main: "date.css",
-      dependencies: [typoCss, primitivesCss, "button.css", "popover.css"],
+      dependencies: [typoCss, "button.css", "popover.css", primitivesCss],
    },
    {
      component: "MonthPicker",
@@ -149,18 +149,6 @@
  width: fit-content;
 }

-/* Focus layering */
-.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));
@@ -201,11 +189,11 @@
 }

 .navds-date__field-input {
-  padding-right: var(--a-spacing-14);
+  padding-right: var(--a-spacing-12);
 }

 .navds-form-field--small .navds-date__field-input {
-  padding-right: var(--a-spacing-10);
+  padding-right: var(--a-spacing-8);
 }

 /* Error-handling */
@@ -282,10 +270,6 @@
  pointer-events: none;
 }

-.navds-date__popover:where(.navds-popover) {
-  border: none;
-}
-
 /* Readonly */
 .navds-date__field--readonly .navds-date__field-button {
  cursor: default;
@@ -310,11 +294,35 @@
  margin: 0;
 }

+.navds-date__modal.navds-date {
+  padding: 0;
+}
+
+.navds-date__modal-body {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  padding: var(--a-spacing-4);
+  gap: var(--a-spacing-2);
+}
+
+.navds-date__modal-body > .navds-date {
+  padding: 0;
+}
+
+.navds-date__popover:where(.navds-popover) {
+  border: none;
+}
+
@media (min-width: 480px) {
  .navds-date {
    padding: var(--a-spacing-5) var(--a-spacing-4);
  }

+  .navds-date__modal-body {
+    padding: var(--a-spacing-6);
+  }
+
  .navds-date__caption {
    gap: var(--a-spacing-2);
  }
@@ -61,7 +61,7 @@

 .navds-switch__input:hover ~ .navds-switch__label-wrapper,
 .navds-switch__label-wrapper:hover {
-  color: var(--ac-switch-action, var(--a-surface-action));
+  color: var(--ac-switch-action, var(--a-surface-action-selected));
 }

 .navds-switch__input:disabled:hover ~ .navds-switch__label-wrapper {
@@ -91,7 +91,7 @@
 }

 .navds-switch__input:checked ~ .navds-switch__track {
-  background-color: var(--ac-switch-checked-bg, var(--a-surface-success));
+  background-color: var(--ac-switch-checked-bg, var(--a-surface-action-selected));
 }

 .navds-switch__input:hover ~ .navds-switch__track {
@@ -99,7 +99,7 @@
 }

 .navds-switch__input:hover:checked ~ .navds-switch__track {
-  background-color: var(--ac-switch-checked-hover-bg, var(--a-surface-success-hover));
+  background-color: var(--ac-switch-checked-hover-bg, var(--a-surface-action-selected-hover));
 }

 .navds-switch__input:disabled ~ .navds-switch__track {
@@ -107,7 +107,7 @@
 }

 .navds-switch__input:checked:disabled ~ .navds-switch__track {
-  background-color: var(--ac-switch-checked-bg, var(--a-border-success));
+  background-color: var(--ac-switch-checked-bg, var(--a-border-action-selected));
 }

 .navds-switch__input:focus-visible ~ .navds-switch__track {
@@ -139,7 +139,7 @@

 .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
  transform: translateX(1.25rem);
-  color: var(--ac-switch-thumb-icon-checked, var(--a-icon-success));
+  color: var(--ac-switch-thumb-icon-checked, var(--a-icon-action-selected));
 }

@media (hover: hover) and (pointer: fine) {
@@ -160,11 +160,6 @@
  transform: translateX(1.25rem);
 }

-/* Loader */
-.navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb .navds-loader__foreground {
-  stroke: var(--ac-switch-thumb-icon-checked, var(--a-icon-success));
-}
-
 /* Disabled */
 .navds-switch__input:disabled {
  appearance: none;
@@ -22,7 +22,7 @@

 .navds-textarea__wrapper {
  position: relative;
-  width: 100%;
+  min-width: 100%;
 }

 .navds-textarea__input {
@@ -37,10 +37,6 @@
  color: var(--ac-textarea-text, var(--__ac-textarea-text, var(--a-text-default)));
 }

-.navds-textarea--counter {
-  padding-bottom: var(--a-spacing-8);
-}
-
 .navds-textarea__input::placeholder {
  color: var(--ac-textarea-placeholder, var(--__ac-textarea-placeholder, var(--a-text-subtle)));
 }
@@ -65,27 +61,51 @@
  padding: var(--a-spacing-1-alt);
 }

-.navds-form-field--small .navds-textarea--counter.navds-textarea__input {
-  padding-bottom: var(--a-spacing-7);
-}
-
 .navds-textarea__counter {
-  pointer-events: none;
+  margin-top: var(--a-spacing-05);
  color: var(--ac-textarea-counter-text, var(--__ac-textarea-counter-text, var(--a-text-subtle)));
-  font-style: italic;
-  position: absolute;
-  text-align: left;
-  left: 0.0625rem;
-  bottom: 0.0625rem;
-  padding: var(--a-spacing-1) var(--a-spacing-2);
 }

 .navds-textarea__counter--error {
  color: var(--ac-textarea-counter-error-text, var(--__ac-textarea-counter-error-text, var(--a-text-danger)));
 }

-.navds-textarea--resize .navds-textarea__input {
+.navds-textarea__sr-counter {
+  display: none;
+}
+
+.navds-textarea__wrapper:focus-within .navds-textarea__sr-counter {
+  display: initial;
+}
+
+.navds-textarea--resize-both .navds-textarea__input {
  resize: both;
+  border-end-end-radius: 0;
+}
+
+.navds-textarea--resize-horizontal .navds-textarea__input {
+  resize: horizontal;
+  border-end-end-radius: 0;
+}
+
+.navds-textarea--resize-vertical .navds-textarea__input {
+  resize: vertical;
+  border-end-end-radius: 0;
+}
+
+.navds-textarea--autoscrollbar,
+.navds-textarea--autoscrollbar .navds-textarea__wrapper {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  /* Makes the box-shadow visible even though overflow is hidden: */
+  padding: 3px;
+  margin: -3px;
+}
+
+.navds-textarea--autoscrollbar .navds-textarea__input {
+  scrollbar-gutter: stable; /* Needed to prevent scrollbar from appearing too early */
 }

 /**
@@ -1,7 +1,6 @@
@charset "UTF-8";
@import "baseline/index.css";
@import "typography.css";
-@import "primitives/index.css";
@import "grid.css";
@import "accordion.css";
@import "alert.css";
@@ -34,3 +33,4 @@
@import "table.css";
@import "tabs.css";
@import "list.css";
+@import "primitives/index.css";
@@ -59,12 +59,17 @@

@media (min-width: 480px) {
  .navds-modal {
-    max-width: calc((100% - 6px) - 2em);
-    max-height: calc((100% - 6px) - 2em);
+    max-width: calc(100% - 6px - 2em);
  }

  .navds-modal--autowidth {
-    max-width: min(700px, calc((100% - 6px) - 2em));
+    max-width: min(700px, calc(100% - 6px - 2em));
+  }
+}
+
+@media (min-height: 480px) {
+  .navds-modal {
+    max-height: calc(100% - 6px - 2em);
  }
 }

@@ -130,6 +135,14 @@
  margin-left: auto;
 }

+/* When Datepicker is used nested inside a Modal */
+.navds-modal--polyfilled .navds-modal--polyfilled.navds-date__nested-modal {
+  min-width: fit-content;
+  max-width: 100vw;
+  max-height: 100vh;
+  animation: none;
+}
+
@keyframes akselModalFadeIn {
  from {
    opacity: 0;
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "5.8.0",
+  "version": "5.11.2",
  "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": "^5.8.0",
+    "@navikt/ds-tokens": "^5.11.2",
    "cssnano": "6.0.0",
    "fast-glob": "3.2.11",
    "lodash": "4.17.21",
@@ -1,5 +1,6 @@
@import "box.css";
@import "bleed.css";
+@import "page.css";
@import "hgrid.css";
@import "stack.css";
@import "responsive.css";
@@ -0,0 +1,50 @@
+.navds-page {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  min-height: 100lvh;
+
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+  background-color: var(--__ac-page-background);
+}
+
+/* Page.Block */
+.navds-pageblock {
+  margin-inline: auto;
+  width: 100%;
+}
+
+.navds-page__content--grow {
+  flex-grow: 1;
+}
+
+.navds-page__content--fullheight {
+  min-height: 100vh;
+  min-height: 100lvh;
+}
+
+.navds-page__content--padding {
+  padding-block-end: var(--a-spacing-8);
+}
+
+.navds-pageblock--lg {
+  max-width: 1024px;
+}
+
+.navds-pageblock--xl {
+  max-width: 1280px;
+}
+
+.navds-pageblock--2xl {
+  max-width: 1440px;
+}
+
+.navds-pageblock--gutters {
+  padding-inline: var(--a-spacing-4);
+}
+
+@media (min-width: 1024px) {
+  .navds-pageblock--gutters {
+    padding-inline: var(--a-spacing-12);
+  }
+}
@@ -401,14 +401,14 @@
    "--ac-select-error-border": "--a-surface-danger"
  },
  "switch": {
-    "--ac-switch-action": "--a-surface-action",
+    "--ac-switch-action": "--a-surface-action-selected",
    "--ac-switch-bg": "--a-surface-neutral",
-    "--ac-switch-checked-bg": "--a-surface-success",
+    "--ac-switch-checked-bg": "--a-surface-action-selected",
    "--ac-switch-hover-bg": "--a-surface-neutral-hover",
-    "--ac-switch-checked-hover-bg": "--a-surface-success-hover",
+    "--ac-switch-checked-hover-bg": "--a-surface-action-selected-hover",
    "--ac-switch-thumb-bg": "--a-surface-default",
    "--ac-switch-thumb-icon": "--a-icon-subtle",
-    "--ac-switch-thumb-icon-checked": "--a-icon-success"
+    "--ac-switch-thumb-icon-checked": "--a-icon-action-selected"
  },
  "textfield": {
    "--ac-textfield-bg": "--a-surface-default",
@@ -1,5 +1,135 @@
 # @navikt/ds-react

+## 5.11.2
+
+### Patch Changes
+
+- ⬆️ upgrade date-fns version & make it minor-version agnostic ([#2514](https://github.com/navikt/aksel/pull/2514))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.11.2
+  - @navikt/aksel-icons@5.11.2
+
+## 5.11.1
+
+### Patch Changes
+
+- Switch: Byttet success-farger med action npr checked ([#2511](https://github.com/navikt/aksel/pull/2511))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.11.1
+  - @navikt/aksel-icons@5.11.1
+
+## 5.11.0
+
+### Minor Changes
+
+- :sparkles: Textarea: Mulighet for å sette resize-retning ([#2494](https://github.com/navikt/aksel/pull/2494))
+
+- :sparkles: Textarea: Eksperimentell støtte for automatisk scrollbar ([#2457](https://github.com/navikt/aksel/pull/2457))
+
+### Patch Changes
+
+- :wheelchair: Textarea: Forsinkelse ved live-opplesning av gjenstående tegn ([#2502](https://github.com/navikt/aksel/pull/2502))
+
+- Updated dependencies [[`bc259f5b3`](https://github.com/navikt/aksel/commit/bc259f5b306319c0e08397d5300596fc1d43353e)]:
+  - @navikt/aksel-icons@5.11.0
+  - @navikt/ds-tokens@5.11.0
+
+## 5.10.4
+
+### Patch Changes
+
+- Gjør lukknapp i Alert til type button ([#2497](https://github.com/navikt/aksel/pull/2497))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.10.4
+  - @navikt/aksel-icons@5.10.4
+
+## 5.10.3
+
+### Patch Changes
+
+- :wheelchair: Textarea: Byttet fra `aria-live` til `role=status` på telleren for bedre semantikk ([#2483](https://github.com/navikt/aksel/pull/2483))
+
+- :bug: Textarea: Teller flyttet ut av tekstfeltet for å unngå overlapp og misforståelser ([#2483](https://github.com/navikt/aksel/pull/2483))
+
+- ErrorSummary: Gjør det mulig å rendre ErrorSummary.Item conditionally ([#2484](https://github.com/navikt/aksel/pull/2484))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.10.3
+  - @navikt/aksel-icons@5.10.3
+
+## 5.10.2
+
+### Patch Changes
+
+- OverridableComponent: Fungerer nå bedre ved bruk av typeof <komponent> ([#2474](https://github.com/navikt/aksel/pull/2474))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.10.2
+  - @navikt/aksel-icons@5.10.2
+
+## 5.10.1
+
+### Patch Changes
+
+- Table: Håndterer nå sjekk for interaktive elementer i ExpandableRow bedre ([#2461](https://github.com/navikt/aksel/pull/2461))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.10.1
+  - @navikt/aksel-icons@5.10.1
+
+## 5.10.0
+
+### Minor Changes
+
+- Primitives: Ny komponent `Page` og `Page.Block` ([#2456](https://github.com/navikt/aksel/pull/2456))
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.10.0
+  - @navikt/aksel-icons@5.10.0
+
+## 5.9.2
+
+### Patch Changes
+
+- :bug: Datepicker lukker ikke lenger modalen den er i ([#2451](https://github.com/navikt/aksel/pull/2451))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.9.2
+  - @navikt/aksel-icons@5.9.2
+
+## 5.9.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.9.1
+  - @navikt/aksel-icons@5.9.1
+
+## 5.9.0
+
+### Minor Changes
+
+- Datepicker/Monthpicker: Hvis man bruker komponentene i Modal vil Popover bli erstattet med Modal uansett om man er på desktop eller mobil. ([#2419](https://github.com/navikt/aksel/pull/2419))
+
+- Datepicker/Monthpicker/Popover: Fjernet `bubbleEscape`-prop. ([#2419](https://github.com/navikt/aksel/pull/2419))
+
+- useDatepicker/useMonthPicker/useRangedpicker: Fjernet `openOnFocus`-prop, kan nå bare åpnes ved klikk på date-knapp i input. ([#2419](https://github.com/navikt/aksel/pull/2419))
+
+- Datepicker/Monthpicker: Bytter nå automatisk til Modalvisning på mobil. ([#2419](https://github.com/navikt/aksel/pull/2419))
+
+### Patch Changes
+
+- Added useVirtualFocus hook - used in Combobox for now ([#2394](https://github.com/navikt/aksel/pull/2394))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.9.0
+  - @navikt/aksel-icons@5.9.0
+
 ## 5.8.0

 ### Minor Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "5.8.0",
+  "version": "5.11.2",
  "description": "Aksel react-components for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -38,12 +38,12 @@
  },
  "dependencies": {
    "@floating-ui/react": "0.25.4",
-    "@navikt/aksel-icons": "^5.8.0",
-    "@navikt/ds-tokens": "^5.8.0",
+    "@navikt/aksel-icons": "^5.11.2",
+    "@navikt/ds-tokens": "^5.11.2",
    "@radix-ui/react-tabs": "1.0.0",
    "@radix-ui/react-toggle-group": "1.0.0",
    "clsx": "^1.2.1",
-    "date-fns": "2.29.3",
+    "date-fns": "^2.30.0",
    "react-day-picker": "8.3.4"
  },
  "devDependencies": {
@@ -117,6 +117,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
              size="small"
              variant="tertiary-neutral"
              onClick={onClose}
+              type="button"
              icon={<XMarkIcon title="Lukk Alert" />}
            />
          </div>
@@ -13,13 +13,13 @@ interface DateContextContextProps {
   * Aria-connected ID
   */
  ariaId?: string;
+  /**
+   * Flag for enabled-check
+   */
+  defined: boolean;
 }

-export const DateContext = createContext<DateContextContextProps>({
-  open: false,
-  onOpen: () => null,
-  ariaId: undefined,
-});
+export const DateContext = createContext<DateContextContextProps | null>(null);

 export const useDateInputContext = () => {
  const context = useContext(DateContext);
@@ -1,11 +1,11 @@
 import cl from "clsx";
 import isWeekend from "date-fns/isWeekend";
-import React, { forwardRef, useRef, useState } from "react";
+import React, { forwardRef, useMemo, useRef, useState } from "react";
 import { DateRange, DayPicker, isMatch } from "react-day-picker";
-import { Popover } from "../../popover";
-import { omit, useId } from "../../util";
-import { DatePickerInput } from "../DateInput";
+import { mergeRefs, omit, useId } from "../../util";
 import { DateContext } from "../context";
+import { DatePickerInput } from "../parts/DateInput";
+import { DateWrapper } from "../parts/DateWrapper";
 import { getLocaleFromString, labels } from "../utils";
 import DatePickerStandalone from "./DatePickerStandalone";
 import Caption from "./parts/Caption";
@@ -79,7 +79,6 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
      onClose,
      onOpenToggle,
      strategy,
-      bubbleEscape = false,
      onWeekNumberClick,
      ...rest
    },
@@ -89,6 +88,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
    const [open, setOpen] = useState(_open ?? false);

    const wrapperRef = useRef<HTMLDivElement | null>(null);
+    const mergedRef = useMemo(() => mergeRefs([wrapperRef, ref]), [ref]);

    const [selectedDates, setSelectedDates] = React.useState<
      Date | Date[] | DateRange | undefined
@@ -110,6 +110,44 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
      rest?.onSelect?.(newSelected);
    };

+    const DatePickerComponent = (
+      <DayPicker
+        locale={getLocaleFromString(locale)}
+        mode={mode}
+        onSelect={handleSelect}
+        selected={selected ?? selectedDates}
+        components={{
+          Caption: dropdownCaption ? DropdownCaption : Caption,
+          Head: TableHead,
+          HeadRow,
+          WeekNumber,
+          Row,
+          Day: DayButton,
+        }}
+        className={cl("navds-date", className)}
+        classNames={{
+          vhidden: "navds-sr-only",
+        }}
+        disabled={(day) => {
+          return (disableWeekends && isWeekend(day)) || isMatch(day, disabled);
+        }}
+        weekStartsOn={1}
+        initialFocus={false}
+        labels={labels as any}
+        modifiers={{
+          weekend: (day) => disableWeekends && isWeekend(day),
+        }}
+        modifiersClassNames={{
+          weekend: "rdp-day__weekend",
+        }}
+        showWeekNumber={showWeekNumber}
+        onWeekNumberClick={mode === "multiple" ? onWeekNumberClick : undefined}
+        fixedWeeks
+        showOutsideDays
+        {...omit(rest, ["onSelect"])}
+      />
+    );
+
    return (
      <DateContext.Provider
        value={{
@@ -119,72 +157,27 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
            onOpenToggle?.();
          },
          ariaId,
+          defined: true,
        }}
      >
        <div
-          ref={wrapperRef}
+          ref={mergedRef}
          className={cl("navds-date__wrapper", wrapperClassName)}
        >
          {children}
-          {(_open ?? open) && (
-            <Popover
-              arrow={false}
-              anchorEl={wrapperRef.current}
-              open={_open ?? open}
-              onClose={() => {
-                onClose?.() ?? setOpen(false);
-              }}
-              placement="bottom-start"
-              id={ariaId}
-              role="dialog"
-              ref={ref}
-              strategy={strategy}
-              className="navds-date__popover"
-              bubbleEscape={bubbleEscape}
-              flip={false}
-            >
-              <DayPicker
-                locale={getLocaleFromString(locale)}
-                mode={mode}
-                onSelect={handleSelect}
-                selected={selected ?? selectedDates}
-                components={{
-                  Caption: dropdownCaption ? DropdownCaption : Caption,
-                  Head: TableHead,
-                  HeadRow,
-                  WeekNumber,
-                  Row,
-                  Day: DayButton,
-                }}
-                className={cl("navds-date", className)}
-                classNames={{
-                  vhidden: "navds-sr-only",
-                }}
-                disabled={(day) => {
-                  return (
-                    (disableWeekends && isWeekend(day)) ||
-                    isMatch(day, disabled)
-                  );
-                }}
-                weekStartsOn={1}
-                initialFocus={false}
-                labels={labels as any}
-                modifiers={{
-                  weekend: (day) => disableWeekends && isWeekend(day),
-                }}
-                modifiersClassNames={{
-                  weekend: "rdp-day__weekend",
-                }}
-                showWeekNumber={showWeekNumber}
-                onWeekNumberClick={
-                  mode === "multiple" ? onWeekNumberClick : undefined
-                }
-                fixedWeeks
-                showOutsideDays
-                {...omit(rest, ["onSelect"])}
-              />
-            </Popover>
-          )}
+          <DateWrapper
+            open={_open ?? open}
+            anchor={wrapperRef.current}
+            onClose={() => onClose?.() ?? setOpen(false)}
+            locale={locale}
+            variant={mode}
+            popoverProps={{
+              id: ariaId,
+              strategy,
+            }}
+          >
+            {DatePickerComponent}
+          </DateWrapper>
        </div>
      </DateContext.Provider>
    );
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import isSameDay from "date-fns/isSameDay";
 import React, { useId, useState } from "react";
 import { useDatepicker, useRangeDatepicker } from "..";
-import { BodyLong, Button, HGrid, HStack, Modal, VStack } from "../..";
+import { BodyLong, Button, HGrid, Modal, VStack } from "../..";
 import DatePicker, { DatePickerProps } from "./DatePicker";

 const disabledDays = [
@@ -18,7 +18,6 @@ export default {

 type DefaultStoryProps = DatePickerProps & {
  size: "medium" | "small";
-  openOnFocus: boolean;
  inputfield: boolean;
  standalone: boolean;
 };
@@ -30,13 +29,11 @@ export const Default: StoryObj<DefaultStoryProps> = {
    const rangeCtx = useRangeDatepicker({
      fromDate: new Date("Aug 23 2020"),
      toDate: new Date("Aug 23 2023"),
-      openOnFocus: props.openOnFocus,
    });

    const singleCtx = useDatepicker({
      fromDate: new Date("Aug 23 2020"),
      toDate: new Date("Aug 23 2023"),
-      openOnFocus: props.openOnFocus,
    });

    const newProps = {
@@ -111,7 +108,6 @@ export const Default: StoryObj<DefaultStoryProps> = {
    disableWeekends: false,
    showWeekNumber: false,
    mode: "single",
-    openOnFocus: true,
    inputfield: true,
    standalone: false,
  },
@@ -186,21 +182,6 @@ export const UseRangedDatepicker = () => {
  );
 };

-export const OpenOnFocus = () => {
-  const { datepickerProps, inputProps } = useDatepicker({
-    onDateChange: console.log,
-    openOnFocus: false,
-  });
-
-  return (
-    <div style={{ display: "flex", gap: "1rem" }}>
-      <DatePicker {...datepickerProps}>
-        <DatePicker.Input {...inputProps} label="Velg dato" />
-      </DatePicker>
-    </div>
-  );
-};
-
 export const NB = () => (
  <DatePicker.Standalone locale="nb" today={new Date("2006-07-01")} />
 );
@@ -333,15 +314,32 @@ export const Size = () => {
    fromDate: new Date("Aug 23 2019"),
    toDate: new Date("Feb 23 2024"),
    onDateChange: console.log,
+    defaultSelected: new Date("Feb 23 2023"),
+  });
+  const { datepickerProps: d2, inputProps: i2 } = useDatepicker({
+    fromDate: new Date("Aug 23 2019"),
+    toDate: new Date("Feb 23 2024"),
+    onDateChange: console.log,
+    defaultSelected: new Date("Feb 23 2023"),
  });

  return (
    <div style={{ display: "flex", gap: "1rem" }}>
      <DatePicker {...datepickerProps} dropdownCaption>
-        <DatePicker.Input size="medium" {...inputProps} label="Velg dato" />
+        <DatePicker.Input
+          placeholder="10/10/2023"
+          size="medium"
+          {...inputProps}
+          label="Velg dato"
+        />
      </DatePicker>
-      <DatePicker {...datepickerProps} dropdownCaption>
-        <DatePicker.Input size="small" {...inputProps} label="Velg dato" />
+      <DatePicker {...d2} dropdownCaption>
+        <DatePicker.Input
+          placeholder="10/10/2023"
+          size="small"
+          {...i2}
+          label="Velg dato"
+        />
      </DatePicker>
    </div>
  );
@@ -439,35 +437,36 @@ export const ModalDemo = () => {
    toDate: new Date("Feb 23 2024"),
    onDateChange: console.log,
  });
+  const [open, setOpen] = useState(true);

  return (
-    <Modal open header={{ heading: "Modal-demo" }} width="1024px">
-      <Modal.Body style={{ position: "relative" }}>
-        <BodyLong>
-          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maiores nisi
-          incidunt ipsum cupiditate nostrum nesciunt, corrupti nihil at atque
-          animi ab aut. Quam iusto harum eligendi magnam nulla repudiandae
-          molestias.
-        </BodyLong>
+    <>
+      <Button onClick={() => setOpen(!open)}>Open modal</Button>
+      <Modal
+        open={open}
+        onClose={() => setOpen(false)}
+        header={{ heading: "Modal-demo" }}
+      >
+        <Modal.Body style={{ position: "relative" }}>
+          <BodyLong spacing>
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+          </BodyLong>

-        <HGrid gap="6" columns={{ xs: 1, lg: 2 }}>
-          <HStack justify="center" align="start">
-            <DatePicker.Standalone
-              fromDate={new Date("Aug 23 2019")}
-              toDate={new Date("Feb 23 2024")}
-            />
-          </HStack>
          <DatePicker {...datepickerProps} dropdownCaption>
-            <DatePicker.Input {...inputProps} label="Velg dato" />
-          </DatePicker>
-          <HStack justify="center">
-            <DatePicker.Standalone
-              fromDate={new Date("Aug 23 2019")}
-              toDate={new Date("Feb 23 2024")}
+            <DatePicker.Input
+              {...inputProps}
+              label="Velg dato"
+              description="Format: dd.mm.yyyy"
            />
-          </HStack>
-        </HGrid>
-      </Modal.Body>
-    </Modal>
+          </DatePicker>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button>Neste</Button>
+          <Button variant="secondary">Tilbake</Button>
+          <Button variant="tertiary">Avbryt</Button>
+        </Modal.Footer>
+      </Modal>
+    </>
  );
 };
+ModalDemo.parameters = { chromatic: { pauseAnimationAtEnd: true } };
@@ -101,9 +101,4 @@ export interface DatePickerDefaultProps
   * @default See Popover
   */
  strategy?: "absolute" | "fixed";
-  /**
-   * Bubbles Escape keydown-event up trough DOM-tree. This is set to false by default to prevent closing components like Modal on Escape
-   * @default false
-   */
-  bubbleEscape?: boolean;
 }
@@ -1,17 +1,15 @@
 import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
 import isWeekend from "date-fns/isWeekend";
-import React, { useCallback, useRef, useState } from "react";
+import React, { useCallback, useState } from "react";
 import { DayClickEventHandler, isMatch } from "react-day-picker";
-import { DateInputProps } from "../DateInput";
 import { DatePickerProps } from "../datepicker/DatePicker";
+import { DateInputProps } from "../parts/DateInput";
 import {
  formatDateForInput,
  getLocaleFromString,
  isValidDate,
  parseDate,
 } from "../utils";
-import { useEscape } from "./useEscape";
-import { useOutsideClickHandler } from "./useOutsideClickHandler";

 export interface UseDatepickerOptions
  extends Pick<
@@ -59,10 +57,10 @@ export interface UseDatepickerOptions
   */
  allowTwoDigitYear?: boolean;
  /**
-   * Opens datepicker on input-focus
-   * @default true
+   * Will be removed in a future major-version
+   * @deprecated
   */
-  openOnFocus?: boolean;
+  openOnFocus?: false;
 }

 interface UseDatepickerValue {
@@ -76,7 +74,14 @@ interface UseDatepickerValue {
  inputProps: Pick<
    DateInputProps,
    "onChange" | "onFocus" | "onBlur" | "value"
-  > & { ref: React.RefObject<HTMLInputElement> };
+  > & {
+    /**
+     * @private
+     */
+    setAnchorRef: React.Dispatch<
+      React.SetStateAction<HTMLButtonElement | null>
+    >;
+  };
  /**
   * Resets all states (callback)
   */
@@ -143,14 +148,11 @@ export const useDatepicker = (
    onValidate,
    defaultMonth,
    allowTwoDigitYear = true,
-    openOnFocus = true,
  } = opt;

+  const [anchorRef, setAnchorRef] = useState<HTMLButtonElement | null>(null);
  const locale = getLocaleFromString(_locale);

-  const inputRef = useRef<HTMLInputElement>(null);
-  const [daypickerRef, setDaypickerRef] = useState<HTMLDivElement>();
-
  const [defaultSelected, setDefaultSelected] = useState(_defaultSelected);

  // Initialize states
@@ -172,14 +174,6 @@ export const useDatepicker = (
    [defaultMonth, defaultSelected, selectedDay, today]
  );

-  useOutsideClickHandler(open, handleOpen, [
-    daypickerRef,
-    inputRef.current,
-    inputRef.current?.nextSibling,
-  ]);
-
-  useEscape(open, handleOpen, inputRef);
-
  const updateDate = (date?: Date) => {
    onDateChange?.(date);
    setSelectedDay(date);
@@ -207,7 +201,6 @@ export const useDatepicker = (
    if (e.target.readOnly) {
      return;
    }
-    !open && openOnFocus && handleOpen(true);
    const day = parseDate(
      e.target.value,
      today,
@@ -243,7 +236,7 @@ export const useDatepicker = (
  const handleDayClick: DayClickEventHandler = (day, { selected }) => {
    if (day && !selected) {
      handleOpen(false);
-      inputRef.current && inputRef.current.focus();
+      anchorRef?.focus();
    }

    if (!required && selected) {
@@ -319,11 +312,13 @@ export const useDatepicker = (
    toDate,
    today,
    open,
+    onClose: () => {
+      handleOpen(false);
+      anchorRef?.focus();
+    },
    onOpenToggle: () => handleOpen(!open),
    disabled,
    disableWeekends,
-    bubbleEscape: true,
-    ref: setDaypickerRef,
  };

  const inputProps = {
@@ -331,7 +326,7 @@ export const useDatepicker = (
    onFocus: handleFocus,
    onBlur: handleBlur,
    value: inputValue,
-    ref: inputRef,
+    setAnchorRef,
  };

  return { datepickerProps, inputProps, reset, selectedDay, setSelected };
@@ -1,30 +0,0 @@
-import { useCallback, useEffect, RefObject } from "react";
-
-export const useEscape = (
-  open: boolean,
-  setOpen: (openState: boolean) => void,
-  focusRef: RefObject<HTMLElement>
-) => {
-  const handleClose = useCallback(() => {
-    setOpen(false);
-    focusRef?.current && focusRef.current.focus();
-  }, [focusRef, setOpen]);
-
-  const escape = useCallback(
-    (event: KeyboardEvent) => {
-      if (open && event.key === "Escape") {
-        event.preventDefault(); // This prevents modal from closing when using datepicker inside modal
-        handleClose();
-      }
-    },
-    [handleClose, open]
-  );
-
-  useEffect(() => {
-    window.addEventListener("keydown", escape, false);
-
-    return () => {
-      window.removeEventListener("keydown", escape, false);
-    };
-  }, [escape]);
-};
@@ -1,6 +1,6 @@
-import React, { useCallback, useMemo, useRef, useState } from "react";
-import { DateInputProps } from "../DateInput";
+import React, { useCallback, useMemo, useState } from "react";
 import { MonthPickerProps } from "../monthpicker/types";
+import { DateInputProps } from "../parts/DateInput";
 import {
  formatDateForInput,
  getLocaleFromString,
@@ -8,8 +8,6 @@ import {
  isValidDate,
  parseDate,
 } from "../utils";
-import { useEscape } from "./useEscape";
-import { useOutsideClickHandler } from "./useOutsideClickHandler";

 export interface UseMonthPickerOptions
  extends Pick<
@@ -45,8 +43,8 @@ export interface UseMonthPickerOptions
   */
  allowTwoDigitYear?: boolean;
  /**
-   * Opens datepicker on input-focus
-   * @default true
+   * Will be removed in a future major-version
+   * @deprecated
   */
  openOnFocus?: boolean;
 }
@@ -60,7 +58,12 @@ interface UseMonthPickerValue {
   * Use: <MonthPicker.Input {...inputProps} />
   */
  inputProps: Pick<DateInputProps, "onChange" | "onFocus" | "value"> & {
-    ref: React.RefObject<HTMLInputElement>;
+    /**
+     * @private
+     */
+    setAnchorRef: React.Dispatch<
+      React.SetStateAction<HTMLButtonElement | null>
+    >;
  };
  /**
   * Currently selected Date
@@ -138,17 +141,14 @@ export const useMonthpicker = (
    onValidate,
    defaultYear,
    allowTwoDigitYear = true,
-    openOnFocus = true,
  } = opt;

+  const [anchorRef, setAnchorRef] = useState<HTMLButtonElement | null>(null);
  const [defaultSelected, setDefaultSelected] = useState(_defaultSelected);

  const today = useMemo(() => new Date(), []);
  const locale = getLocaleFromString(_locale);

-  const inputRef = useRef<HTMLInputElement>(null);
-  const [monthpickerRef, setMonthpickerRef] = useState<HTMLDivElement>();
-
  // Initialize states
  const [year, setYear] = useState(defaultSelected ?? defaultYear ?? today);
  const [selectedMonth, setSelectedMonth] = useState(defaultSelected);
@@ -169,14 +169,6 @@ export const useMonthpicker = (
    [defaultSelected, defaultYear, selectedMonth, today]
  );

-  useOutsideClickHandler(open, handleOpen, [
-    monthpickerRef,
-    inputRef.current,
-    inputRef.current?.nextSibling,
-  ]);
-
-  useEscape(open, handleOpen, inputRef);
-
  const updateMonth = (date?: Date) => {
    onMonthChange?.(date);
    setSelectedMonth(date);
@@ -204,7 +196,7 @@ export const useMonthpicker = (
    if (e.target.readOnly) {
      return;
    }
-    !open && openOnFocus && handleOpen(true);
+
    const day = parseDate(
      e.target.value,
      today,
@@ -239,8 +231,8 @@ export const useMonthpicker = (
  const handleMonthClick = (month?: Date) => {
    if (month) {
      handleOpen(false);
-      inputRef.current && inputRef.current.focus();
      setYear(month);
+      anchorRef?.focus();
    }

    if (!required && !month) {
@@ -314,9 +306,11 @@ export const useMonthpicker = (
    toDate,
    open,
    onOpenToggle: () => handleOpen(!open),
+    onClose: () => {
+      handleOpen(false);
+      anchorRef?.focus();
+    },
    disabled,
-    bubbleEscape: true,
-    ref: setMonthpickerRef,
  };

  const inputProps = {
@@ -324,7 +318,7 @@ export const useMonthpicker = (
    onFocus: handleFocus,
    onBlur: handleBlur,
    value: inputValue,
-    ref: inputRef,
+    setAnchorRef,
  };

  return { monthpickerProps, inputProps, reset, selectedMonth, setSelected };
@@ -1,34 +0,0 @@
-import { useCallback, useEffect } from "react";
-
-export const useOutsideClickHandler = (
-  open: boolean,
-  setOpen: (openState: boolean) => void,
-  refs: Array<any>
-) => {
-  const handleFocusIn = useCallback(
-    (e) => {
-      const composed = e.composedPath?.()?.[0];
-      if (!e?.target || !e?.target?.nodeType || !composed) {
-        return;
-      }
-      if (
-        !refs.some(
-          (element) =>
-            element?.contains(e.target) || element?.contains(composed)
-        )
-      ) {
-        open && setOpen(false);
-      }
-    },
-    [open, refs, setOpen]
-  );
-
-  useEffect(() => {
-    window.addEventListener("focusin", handleFocusIn);
-    window.addEventListener("pointerdown", handleFocusIn);
-    return () => {
-      window?.removeEventListener?.("focusin", handleFocusIn);
-      window?.removeEventListener?.("pointerdown", handleFocusIn);
-    };
-  }, [handleFocusIn]);
-};
@@ -1,10 +1,10 @@
 import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
 import checkIsBefore from "date-fns/isBefore";
 import isWeekend from "date-fns/isWeekend";
-import React, { useRef, useState } from "react";
+import React, { useState } from "react";
 import { DateRange, isMatch } from "react-day-picker";
-import { DateInputProps } from "../DateInput";
 import { DatePickerProps } from "../datepicker/DatePicker";
+import { DateInputProps } from "../parts/DateInput";
 import {
  formatDateForInput,
  getLocaleFromString,
@@ -12,8 +12,6 @@ import {
  parseDate,
 } from "../utils";
 import { DateValidationT, UseDatepickerOptions } from "./useDatepicker";
-import { useEscape } from "./useEscape";
-import { useOutsideClickHandler } from "./useOutsideClickHandler";

 export type RangeValidationT = {
  from: DateValidationT;
@@ -74,14 +72,28 @@ interface UseRangeDatepickerValue {
  fromInputProps: Pick<
    DateInputProps,
    "onChange" | "onFocus" | "onBlur" | "value"
-  > & { ref: React.RefObject<HTMLInputElement> };
+  > & {
+    /**
+     * @private
+     */
+    setAnchorRef: React.Dispatch<
+      React.SetStateAction<HTMLButtonElement | null>
+    >;
+  };
  /**
   * Use: <DatePicker.Input label="to" {...toInputProps}/>
   */
  toInputProps: Pick<
    DateInputProps,
    "onChange" | "onFocus" | "onBlur" | "value"
-  > & { ref: React.RefObject<HTMLInputElement> };
+  > & {
+    /**
+     * @private
+     */
+    setAnchorRef?: React.Dispatch<
+      React.SetStateAction<HTMLButtonElement | null>
+    >;
+  };
  /**
   * Resets all states (callback)
   */
@@ -218,14 +230,11 @@ export const useRangeDatepicker = (
    onValidate,
    defaultMonth,
    allowTwoDigitYear = true,
-    openOnFocus = true,
  } = opt;

-  const locale = getLocaleFromString(_locale);
+  const [anchorRef, setAnchorRef] = useState<HTMLButtonElement | null>(null);

-  const inputRefTo = useRef<HTMLInputElement>(null);
-  const inputRefFrom = useRef<HTMLInputElement>(null);
-  const [daypickerRef, setDaypickerRef] = useState<HTMLDivElement>();
+  const locale = getLocaleFromString(_locale);

  const [defaultSelected, setDefaultSelected] = useState(_defaultSelected);

@@ -255,20 +264,6 @@ export const useRangeDatepicker = (

  const [open, setOpen] = useState(false);

-  useOutsideClickHandler(open, setOpen, [
-    daypickerRef,
-    inputRefTo.current,
-    inputRefFrom.current,
-    inputRefTo.current?.nextSibling,
-    inputRefFrom.current?.nextSibling,
-  ]);
-
-  useEscape(
-    open,
-    setOpen,
-    selectedRange?.from && !selectedRange?.to ? inputRefTo : inputRefFrom
-  );
-
  const updateRange = (range?: DateRange) => {
    onRangeChange?.(range);
    setSelectedRange(range);
@@ -324,7 +319,6 @@ export const useRangeDatepicker = (
    if (e.target.readOnly) {
      return;
    }
-    !open && openOnFocus && setOpen(true);
    const day = parseDate(
      e.target.value,
      today,
@@ -378,6 +372,7 @@ export const useRangeDatepicker = (
  const handleSelect = (range) => {
    if (range?.from && range?.to) {
      setOpen(false);
+      anchorRef?.focus();
    }
    const prevToRange =
      !selectedRange?.from && selectedRange?.to ? selectedRange?.to : range?.to;
@@ -545,10 +540,12 @@ export const useRangeDatepicker = (
    mode: "range" as const,
    open,
    onOpenToggle: () => setOpen((x) => !x),
+    onClose: () => {
+      setOpen(false);
+      anchorRef?.focus();
+    },
    disabled,
    disableWeekends,
-    bubbleEscape: true,
-    ref: setDaypickerRef,
  };

  const fromInputProps = {
@@ -556,7 +553,7 @@ export const useRangeDatepicker = (
    onFocus: (e) => handleFocus(e, RANGE.FROM),
    onBlur: (e) => handleBlur(e, RANGE.FROM),
    value: fromInputValue,
-    ref: inputRefFrom,
+    setAnchorRef,
  };

  const toInputProps = {
@@ -564,7 +561,7 @@ export const useRangeDatepicker = (
    onFocus: (e) => handleFocus(e, RANGE.TO),
    onBlur: (e) => handleBlur(e, RANGE.TO),
    value: toInputValue,
-    ref: inputRefTo,
+    setAnchorRef,
  };

  return {
@@ -1,4 +1,3 @@
-export { type DateInputProps } from "./DateInput";
 export {
  default as DatePicker,
  type DatePickerProps,
@@ -15,3 +14,4 @@ export {
 export { default as MonthPicker } from "./monthpicker/MonthPicker";
 export { type MonthPickerStandaloneProps } from "./monthpicker/MonthPickerStandalone";
 export { type MonthPickerProps } from "./monthpicker/types";
+export { type DateInputProps } from "./parts/DateInput";
@@ -1,10 +1,10 @@
 import cl from "clsx";
-import React, { forwardRef, useRef, useState } from "react";
+import React, { forwardRef, useMemo, useRef, useState } from "react";
 import { RootProvider } from "react-day-picker";
-import { Popover } from "../../popover";
-import { useId } from "../../util";
-import { MonthPickerInput } from "../DateInput";
+import { mergeRefs, useId } from "../../util";
 import { DateContext, SharedMonthProvider } from "../context";
+import { MonthPickerInput } from "../parts/DateInput";
+import { DateWrapper } from "../parts/DateWrapper";
 import { getLocaleFromString } from "../utils";
 import MonthCaption from "./MonthCaption";
 import MonthPickerStandalone from "./MonthPickerStandalone";
@@ -74,7 +74,6 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
      year,
      onYearChange,
      strategy = "absolute",
-      bubbleEscape = false,
    },
    ref
  ) => {
@@ -82,6 +81,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
    const [open, setOpen] = useState(_open ?? false);

    const wrapperRef = useRef<HTMLDivElement | null>(null);
+    const mergedRef = useMemo(() => mergeRefs([wrapperRef, ref]), [ref]);

    const [selectedMonth, setSelectedMonth] = useState<Date | undefined>(
      defaultSelected
@@ -107,51 +107,47 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
            onOpenToggle?.();
          },
          ariaId,
+          defined: true,
        }}
      >
        <div
-          ref={wrapperRef}
+          ref={mergedRef}
          className={cl("navds-date__wrapper", wrapperClassName)}
        >
          {children}
-          {(_open ?? open) && (
-            <Popover
-              arrow={false}
-              anchorEl={wrapperRef.current}
-              open={_open ?? open}
-              onClose={() => onClose?.() ?? setOpen(false)}
-              placement="bottom-start"
-              role="dialog"
-              ref={ref}
-              id={ariaId}
-              className="navds-date navds-date__popover"
-              strategy={strategy}
-              bubbleEscape={bubbleEscape}
-              flip={false}
+          <DateWrapper
+            open={_open ?? open}
+            anchor={wrapperRef.current}
+            onClose={() => onClose?.() ?? setOpen(false)}
+            locale={locale}
+            variant="month"
+            popoverProps={{
+              id: ariaId,
+              strategy,
+            }}
+          >
+            <RootProvider
+              locale={getLocaleFromString(locale)}
+              selected={selected ?? selectedMonth}
+              toDate={toDate}
+              fromDate={fromDate}
+              month={selected ?? selectedMonth}
            >
-              <RootProvider
-                locale={getLocaleFromString(locale)}
-                selected={selected ?? selectedMonth}
-                toDate={toDate}
-                fromDate={fromDate}
-                month={selected ?? selectedMonth}
-              >
-                <div className={cl("rdp-month", className)}>
-                  <SharedMonthProvider
-                    dropdownCaption={dropdownCaption}
-                    disabled={disabled}
-                    selected={selected ?? selectedMonth}
-                    onSelect={handleSelect}
-                    year={year}
-                    onYearChange={onYearChange}
-                  >
-                    <MonthCaption />
-                    <MonthSelector />
-                  </SharedMonthProvider>
-                </div>
-              </RootProvider>
-            </Popover>
-          )}
+              <div className={cl("rdp-month", className)}>
+                <SharedMonthProvider
+                  dropdownCaption={dropdownCaption}
+                  disabled={disabled}
+                  selected={selected ?? selectedMonth}
+                  onSelect={handleSelect}
+                  year={year}
+                  onYearChange={onYearChange}
+                >
+                  <MonthCaption />
+                  <MonthSelector />
+                </SharedMonthProvider>
+              </div>
+            </RootProvider>
+          </DateWrapper>
        </div>
      </DateContext.Provider>
    );
@@ -75,9 +75,4 @@ export interface MonthPickerProps extends React.HTMLAttributes<HTMLDivElement> {
   * @default "absolute"
   */
  strategy?: "absolute" | "fixed";
-  /**
-   * Bubbles Escape keydown-event up trough DOM-tree. This is set to false by default to prevent closing components like Modal on Escape
-   * @default false
-   */
-  bubbleEscape?: boolean;
 }
@@ -1,11 +1,11 @@
 import { CalendarIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
-import React, { forwardRef, InputHTMLAttributes } from "react";
-import { FormFieldProps, useFormField } from "../form/useFormField";
-import { useDateInputContext } from "./context";
-import { ReadOnlyIcon } from "../form/ReadOnlyIcon";
-import { BodyShort, ErrorMessage, Label } from "../typography";
-import { omit } from "../util";
+import React, { forwardRef, InputHTMLAttributes, useRef } from "react";
+import { ReadOnlyIcon } from "../../form/ReadOnlyIcon";
+import { FormFieldProps, useFormField } from "../../form/useFormField";
+import { BodyShort, ErrorMessage, Label } from "../../typography";
+import { omit } from "../../util";
+import { useDateInputContext } from "../context";

 export interface DateInputProps
  extends FormFieldProps,
@@ -28,6 +28,10 @@ export interface DateInputProps
   * @private
   */
  variant?: "datepicker" | "monthpicker";
+  /**
+   * @private
+   */
+  setAnchorRef?: React.Dispatch<React.SetStateAction<HTMLButtonElement | null>>;
 }

 const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
@@ -37,9 +41,12 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
    label,
    description,
    variant = "datepicker",
+    setAnchorRef,
    ...rest
  } = props;

+  const buttonRef = useRef<HTMLButtonElement>(null);
+
  const isDatepickerVariant = variant === "datepicker";

  const conditionalVariables = {
@@ -50,7 +57,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
    },
  };

-  const { onOpen, ariaId, open } = useDateInputContext();
+  const context = useDateInputContext();

  const {
    inputProps,
@@ -108,7 +115,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
          {...omit(rest, ["error", "errorId", "size"])}
          {...inputProps}
          autoComplete="off"
-          aria-controls={open ? ariaId : undefined}
+          aria-controls={context?.open ? context.ariaId : undefined}
          readOnly={readOnly}
          className={cl(
            "navds-date__field-input",
@@ -116,19 +123,23 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
            "navds-body-short",
            `navds-body-short--${size}`
          )}
-          size={isDatepickerVariant ? 10 : 14}
+          size={isDatepickerVariant ? 11 : 14}
        />
        <button
          disabled={inputProps.disabled || readOnly}
-          tabIndex={readOnly ? -1 : open ? -1 : 0}
-          onClick={() => onOpen()}
+          tabIndex={readOnly ? -1 : context?.open ? -1 : 0}
+          onClick={() => {
+            context?.onOpen();
+            setAnchorRef?.(buttonRef.current);
+          }}
          type="button"
          className="navds-date__field-button"
+          ref={buttonRef}
        >
          <CalendarIcon
            pointerEvents="none"
            title={
-              open
+              context?.open
                ? conditionalVariables.iconTitle.close
                : conditionalVariables.iconTitle.open
            }
@@ -0,0 +1,83 @@
+import cl from "clsx";
+import React, { useContext, useRef } from "react";
+import { Button } from "../../button";
+import { Modal } from "../../modal";
+import { ModalContext } from "../../modal/ModalContext";
+import { Popover } from "../../popover";
+import { useMedia } from "../../util/useMedia";
+import { modalCloseButtonLabel, modalLabel } from "../utils/labels";
+
+type DateWrapperProps = {
+  open: boolean;
+  children: React.ReactNode;
+  onClose: () => void;
+  anchor: HTMLDivElement | null;
+  locale: "nb" | "nn" | "en";
+  variant: "single" | "multiple" | "range" | "month";
+  popoverProps: {
+    id?: string;
+    strategy?: "absolute" | "fixed";
+  };
+};
+
+export const DateWrapper = ({
+  open,
+  children,
+  onClose,
+  anchor,
+  locale,
+  variant,
+  popoverProps,
+}: DateWrapperProps) => {
+  const modalRef = useRef<HTMLDialogElement>(null);
+  const isInModal = useContext(ModalContext) !== null;
+  const hideModal =
+    useMedia("screen and (min-width: 768px)", true) && !isInModal;
+
+  if (hideModal) {
+    return (
+      <Popover
+        arrow={false}
+        anchorEl={anchor}
+        open={open}
+        onClose={onClose}
+        placement="bottom-start"
+        role="dialog"
+        className={cl("navds-date__popover", {
+          "navds-date": variant === "month",
+        })}
+        flip={false}
+        {...popoverProps}
+      >
+        {children}
+      </Popover>
+    );
+  }
+  return (
+    <Modal
+      ref={modalRef}
+      open={open}
+      onClose={(event) => {
+        event.stopPropagation();
+        onClose();
+      }}
+      aria-label={modalLabel(locale, variant)}
+      className={cl("navds-date__modal", {
+        "navds-date__nested-modal": isInModal,
+        "navds-date": variant === "month",
+      })}
+      closeOnBackdropClick
+    >
+      <div className="navds-date__modal-body">
+        {children}
+        <Button
+          variant="tertiary"
+          onClick={() => modalRef?.current?.close()}
+          size="small"
+        >
+          {modalCloseButtonLabel(locale)}
+        </Button>
+      </div>
+    </Modal>
+  );
+};
@@ -133,3 +133,86 @@ export const labelWeek = (localeCode?: string): string => {
      return `Uke:`;
  }
 };
+
+const modalLabelSingle = (localeCode?: string): string => {
+  switch (localeCode) {
+    case "nb":
+      return `Velg dato`;
+    case "nn":
+      return `Vel dato`;
+    case "en-GB":
+      return `Pick a date`;
+    default:
+      return `Velg dato`;
+  }
+};
+
+const modalLabelMultiple = (localeCode?: string): string => {
+  switch (localeCode) {
+    case "nb":
+      return `Velg datoer`;
+    case "nn":
+      return `Vel datoar`;
+    case "en-GB":
+      return `Pick dates`;
+    default:
+      return `Velg datoer`;
+  }
+};
+
+const modalLabelRanged = (localeCode?: string): string => {
+  switch (localeCode) {
+    case "nb":
+      return `Velg start- og sluttdato`;
+    case "nn":
+      return `Vel start- og sluttdato`;
+    case "en-GB":
+      return `Pick a start and end date`;
+    default:
+      return `Velg start- og sluttdato`;
+  }
+};
+
+const modalLabelMonth = (localeCode?: string): string => {
+  switch (localeCode) {
+    case "nb":
+      return `Velg måned`;
+    case "nn":
+      return `Vel månad`;
+    case "en-GB":
+      return `Pick a month`;
+    default:
+      return `Velg måned`;
+  }
+};
+
+export const modalLabel = (
+  localeCode: string,
+  variant: "single" | "multiple" | "range" | "month"
+) => {
+  switch (variant) {
+    case "single":
+      return modalLabelSingle(localeCode);
+    case "multiple":
+      return modalLabelMultiple(localeCode);
+    case "range":
+      return modalLabelRanged(localeCode);
+    case "month":
+      return modalLabelMonth(localeCode);
+    default:
+      return modalLabelSingle(localeCode);
+  }
+};
+
+export const modalCloseButtonLabel = (localeCode?: string): string => {
+  switch (localeCode) {
+    case "nb":
+      return `Lukk`;
+    case "nn":
+      return `Lukk`;
+    case "en-GB":
+      return `Close`;
+    default:
+      return `Lukk`;
+  }
+};
@@ -5,11 +5,11 @@ import React, {
  useEffect,
  useState,
 } from "react";
-import { FormFieldProps, useFormField } from "./useFormField";
-import { ReadOnlyIcon } from "./ReadOnlyIcon";
 import { Loader } from "../loader";
 import { BodyShort } from "../typography";
 import { omit } from "../util";
+import { ReadOnlyIcon } from "./ReadOnlyIcon";
+import { FormFieldProps, useFormField } from "./useFormField";

 const SelectedIcon = () => (
  <svg
@@ -134,7 +134,11 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
        <span className="navds-switch__track">
          <span className="navds-switch__thumb">
            {loading ? (
-              <Loader size="xsmall" aria-live="polite" />
+              <Loader
+                size="xsmall"
+                aria-live="polite"
+                variant={checked ? "interaction" : "neutral"}
+              />
            ) : checked ? (
              <SelectedIcon />
            ) : null}
@@ -1,10 +1,11 @@
 import cl from "clsx";
 import React, { forwardRef, useState } from "react";
 import { BodyShort, ErrorMessage, Label } from "../typography";
-import TextareaAutosize from "../util/TextareaAutoSize";
-import { FormFieldProps, useFormField } from "./useFormField";
-import { ReadOnlyIcon } from "./ReadOnlyIcon";
 import { omit, useId } from "../util";
+import TextareaAutosize from "../util/TextareaAutoSize";
+import { ReadOnlyIcon } from "./ReadOnlyIcon";
+import Counter from "./TextareaCounter";
+import { FormFieldProps, useFormField } from "./useFormField";

 /**
 * TODO: Mulighet for lokalisering av sr-only/counter text
@@ -27,7 +28,6 @@ export interface TextareaProps
  defaultValue?: string;
  /**
   * Maximum number of character rows to display.
-   * @bug Internal scrolling with `maxLength` scrolls over maxLength-text
   */
  maxRows?: number;
  /**
@@ -45,12 +45,18 @@ export interface TextareaProps
  /**
   * Enables resizing of field
   */
-  resize?: boolean;
+  resize?: boolean | "vertical" | "horizontal";
+  /**
+   * Textarea will stop growing and get a scrollbar when there's no more room to grow.
+   * Requires `display:flex` on the parent.
+   * Experimental feature that may be removed or get breaking changes in a minor version.
+   */
+  UNSAFE_autoScrollbar?: boolean;
  /**
   * i18n-translations for counter-text
   */
  i18n?: {
-    /** @default Antall tegn igjen */
+    /** @default tegn igjen */
    counterLeft?: string;
    /** @default tegn for mye */
    counterTooMuch?: string;
@@ -86,6 +92,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
      maxLength,
      hideLabel = false,
      resize,
+      UNSAFE_autoScrollbar,
      i18n,
      readOnly,
      ...rest
@@ -121,7 +128,9 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
            "navds-form-field--readonly": readOnly,
            "navds-textarea--readonly": readOnly,
            "navds-textarea--error": hasError,
-            "navds-textarea--resize": resize,
+            "navds-textarea--autoscrollbar": UNSAFE_autoScrollbar,
+            [`navds-textarea--resize-${resize === true ? "both" : resize}`]:
+              resize,
          }
        )}
      >
@@ -157,19 +166,17 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
                : setControlledValue(e.target.value)
            }
            minRows={getMinRows()}
+            autoScrollbar={UNSAFE_autoScrollbar}
            ref={ref}
            readOnly={readOnly}
            className={cl(
              "navds-textarea__input",
              "navds-body-short",
-              `navds-body-short--${size ?? "medium"}`,
-              {
-                "navds-textarea--counter": hasMaxLength,
-              }
+              `navds-body-short--${size ?? "medium"}`
            )}
            {...(describedBy ? { "aria-describedby": describedBy } : {})}
          />
-          {hasMaxLength && (
+          {hasMaxLength && !readOnly && !inputProps.disabled && (
            <>
              <span id={maxLengthId} className="navds-sr-only">
                {`Tekstområde med plass til ${maxLength} tegn.`}
@@ -198,22 +205,4 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
  }
 );

-export const Counter = ({ maxLength, currentLength, size, i18n }) => {
-  const difference = maxLength - currentLength;
-
-  return (
-    <BodyShort
-      className={cl("navds-textarea__counter", {
-        "navds-textarea__counter--error": difference < 0,
-      })}
-      aria-live={difference < 20 ? "polite" : "off"}
-      size={size}
-    >
-      {difference < 0
-        ? `${Math.abs(difference)} ${i18n?.counterTooMuch ?? "tegn for mye"}`
-        : `${difference} ${i18n?.counterLeft ?? "tegn igjen"}`}
-    </BodyShort>
-  );
-};
-
 export default Textarea;
@@ -0,0 +1,58 @@
+import cl from "clsx";
+import React, { useEffect, useState } from "react";
+import { BodyShort } from "../typography";
+import debounce from "../util/debounce";
+import type { TextareaProps } from "./Textarea";
+
+interface Props {
+  maxLength: number;
+  currentLength: number;
+  size: TextareaProps["size"];
+  i18n: TextareaProps["i18n"];
+}
+
+const TextareaCounter = ({ maxLength, currentLength, size, i18n }: Props) => {
+  const difference = maxLength - currentLength;
+
+  const [debouncedDiff, setDebouncedDiff] = useState(difference);
+
+  useEffect(() => {
+    const debounceFunc = debounce(() => {
+      setDebouncedDiff(difference);
+    }, 2000);
+    debounceFunc();
+
+    return () => {
+      debounceFunc.clear();
+    };
+  }, [difference]);
+
+  return (
+    <>
+      {difference < 20 && (
+        <span
+          role="status"
+          className="navds-textarea__sr-counter navds-sr-only"
+        >
+          {getCounterText(debouncedDiff, i18n)}
+        </span>
+      )}
+
+      <BodyShort
+        className={cl("navds-textarea__counter", {
+          "navds-textarea__counter--error": difference < 0,
+        })}
+        size={size}
+      >
+        {getCounterText(difference, i18n)}
+      </BodyShort>
+    </>
+  );
+};
+
+const getCounterText = (difference: number, i18n: TextareaProps["i18n"]) =>
+  difference < 0
+    ? `${Math.abs(difference)} ${i18n?.counterTooMuch ?? "tegn for mye"}`
+    : `${difference} ${i18n?.counterLeft ?? "tegn igjen"}`;
+
+export default TextareaCounter;
@@ -33,7 +33,7 @@ export const Combobox = forwardRef<

  const toggleListButtonRef = useRef<HTMLButtonElement>(null);

-  const { currentOption, toggleIsListOpen } = useFilteredOptionsContext();
+  const { activeDecendantId, toggleIsListOpen } = useFilteredOptionsContext();
  const { selectedOptions } = useSelectedOptionsContext();

  const {
@@ -92,7 +92,7 @@ export const Combobox = forwardRef<
            "navds-combobox__wrapper-inner navds-text-field__input",
            {
              "navds-combobox__wrapper-inner--virtually-unfocused":
-                currentOption !== null,
+                activeDecendantId !== null,
            }
          )}
          onClick={focusInput}
@@ -65,7 +65,7 @@ const ComboboxProvider = forwardRef<HTMLInputElement, ComboboxProps>(
          size,
        }}
      >
-        <CustomOptionsProvider>
+        <CustomOptionsProvider value={{ isMultiSelect }}>
          <SelectedOptionsProvider
            value={{
              allowNewValues,
@@ -81,7 +81,6 @@ const ComboboxProvider = forwardRef<HTMLInputElement, ComboboxProps>(
                filteredOptions,
                isListOpen,
                isLoading,
-                isMultiSelect,
                options,
              }}
            >
@@ -6,6 +6,7 @@ import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsCon
 import { useInputContext } from "../Input/inputContext";
 import { Loader } from "../../../loader";
 import { BodyShort, Label } from "../../../typography";
+import filteredOptionsUtil from "./filtered-options-util";

 const FilteredOptions = () => {
  const {
@@ -18,25 +19,25 @@ const FilteredOptions = () => {
    isLoading,
    isListOpen,
    filteredOptions,
-    filteredOptionsIndex,
-    filteredOptionsRef,
+    setFilteredOptionsRef,
    isMouseLastUsedInputDevice,
    setIsMouseLastUsedInputDevice,
    isValueNew,
-    setFilteredOptionsIndex,
    toggleIsListOpen,
+    activeDecendantId,
+    virtualFocus,
  } = useFilteredOptionsContext();
  const { isMultiSelect, selectedOptions, toggleOption } =
    useSelectedOptionsContext();

  return (
    <ul
-      ref={filteredOptionsRef}
+      ref={setFilteredOptionsRef}
      className={cl("navds-combobox__list", {
        "navds-combobox__list--closed": !isListOpen,
        "navds-combobox__list--with-hover": isMouseLastUsedInputDevice,
      })}
-      id={`${id}-filtered-options`}
+      id={filteredOptionsUtil.getFilteredOptionsId(id)}
      role="listbox"
      tabIndex={-1}
    >
@@ -45,7 +46,8 @@ const FilteredOptions = () => {
          className="navds-combobox__list-item--loading"
          role="option"
          aria-selected={false}
-          id={`${id}-is-loading`}
+          id={filteredOptionsUtil.getIsLoadingId(id)}
+          data-no-focus="true"
        >
          <Loader aria-label="Søker..." />
        </li>
@@ -54,8 +56,12 @@ const FilteredOptions = () => {
        <li
          tabIndex={-1}
          onMouseMove={() => {
-            if (filteredOptionsIndex !== -1) {
-              setFilteredOptionsIndex(-1);
+            if (
+              activeDecendantId !== filteredOptionsUtil.getAddNewOptionId(id)
+            ) {
+              virtualFocus.moveFocusToElement(
+                filteredOptionsUtil.getAddNewOptionId(id)
+              );
              setIsMouseLastUsedInputDevice(true);
            }
          }}
@@ -64,10 +70,10 @@ const FilteredOptions = () => {
            if (!isMultiSelect && !selectedOptions.includes(value))
              toggleIsListOpen(false);
          }}
-          id={`${id}-combobox-new-option`}
+          id={filteredOptionsUtil.getAddNewOptionId(id)}
          className={cl("navds-combobox__list-item__new-option", {
            "navds-combobox__list-item__new-option--focus":
-              filteredOptionsIndex === -1,
+              activeDecendantId === filteredOptionsUtil.getAddNewOptionId(id),
          })}
          role="option"
          aria-selected={false}
@@ -86,24 +92,30 @@ const FilteredOptions = () => {
          className="navds-combobox__list-item__no-options"
          role="option"
          aria-selected={false}
-          id={`${id}-no-hits`}
+          id={filteredOptionsUtil.getNoHitsId(id)}
+          data-no-focus="true"
        >
          Ingen søketreff
        </li>
      )}
-      {filteredOptions.map((option, index) => (
+      {filteredOptions.map((option) => (
        <li
          className={cl("navds-combobox__list-item", {
-            "navds-combobox__list-item--focus": index === filteredOptionsIndex,
+            "navds-combobox__list-item--focus":
+              activeDecendantId === filteredOptionsUtil.getOptionId(id, option),
            "navds-combobox__list-item--selected":
              selectedOptions.includes(option),
          })}
-          id={`${id}-option-${option.replace(" ", "-")}`}
+          id={filteredOptionsUtil.getOptionId(id, option)}
          key={option}
          tabIndex={-1}
          onMouseMove={() => {
-            if (filteredOptionsIndex !== index) {
-              setFilteredOptionsIndex(index);
+            if (
+              activeDecendantId !== filteredOptionsUtil.getOptionId(id, option)
+            ) {
+              virtualFocus.moveFocusToElement(
+                filteredOptionsUtil.getOptionId(id, option)
+              );
              setIsMouseLastUsedInputDevice(true);
            }
          }}
@@ -0,0 +1,38 @@
+const normalizeText = (text: string): string =>
+  typeof text === "string" ? text.toLocaleLowerCase().trim() : "";
+
+const isPartOfText = (value, text) =>
+  normalizeText(text).startsWith(normalizeText(value ?? ""));
+
+const isValueInList = (value, list) =>
+  list?.find((listItem) => normalizeText(value) === normalizeText(listItem));
+
+const getMatchingValuesFromList = (value, list) =>
+  list?.filter((listItem) => isPartOfText(value, listItem));
+
+const getFilteredOptionsId = (comboboxId: string) =>
+  `${comboboxId}-filtered-options`;
+
+const getOptionId = (comboboxId: string, option: string) =>
+  `${comboboxId.toLocaleLowerCase()}-option-${option
+    .replace(" ", "-")
+    .toLocaleLowerCase()}`;
+
+const getAddNewOptionId = (comboboxId: string) =>
+  `${comboboxId}-combobox-new-option`;
+
+const getIsLoadingId = (comboboxId: string) => `${comboboxId}-is-loading`;
+
+const getNoHitsId = (comboboxId: string) => `${comboboxId}-no-hits`;
+
+export default {
+  normalizeText,
+  isPartOfText,
+  isValueInList,
+  getMatchingValuesFromList,
+  getFilteredOptionsId,
+  getAddNewOptionId,
+  getOptionId,
+  getIsLoadingId,
+  getNoHitsId,
+};
@@ -1,11 +1,9 @@
 import React, {
  useState,
-  useEffect,
  useMemo,
  createContext,
  useContext,
  useCallback,
-  useRef,
  SetStateAction,
 } from "react";
 import cl from "clsx";
@@ -13,26 +11,29 @@ import { useCustomOptionsContext } from "../customOptionsContext";
 import { useInputContext } from "../Input/inputContext";
 import usePrevious from "../../../util/usePrevious";
 import { useClientLayoutEffect } from "../../../util";
+import filteredOptionsUtils from "./filtered-options-util";
+import useVirtualFocus, { VirtualFocusType } from "./useVirtualFocus";
+import { ComboboxProps } from "../types";

-const normalizeText = (text: string): string =>
-  typeof text === "string" ? `${text}`.toLowerCase().trim() : "";
-
-const isPartOfText = (value, text) =>
-  normalizeText(text).startsWith(normalizeText(value ?? ""));
-
-const isValueInList = (value, list) =>
-  list?.find((listItem) => normalizeText(value) === normalizeText(listItem));
-
-const getMatchingValuesFromList = (value, list) =>
-  list?.filter((listItem) => isPartOfText(value, listItem));
+type FilteredOptionsProps = {
+  children: any;
+  value: Pick<
+    ComboboxProps,
+    | "allowNewValues"
+    | "filteredOptions"
+    | "isListOpen"
+    | "isLoading"
+    | "options"
+  >;
+};

 type FilteredOptionsContextType = {
  activeDecendantId?: string;
  allowNewValues?: boolean;
  ariaDescribedBy?: string;
-  filteredOptionsRef: React.RefObject<HTMLUListElement>;
-  filteredOptionsIndex: number | null;
-  setFilteredOptionsIndex: (index: number) => void;
+  setFilteredOptionsRef: React.Dispatch<
+    React.SetStateAction<HTMLUListElement | null>
+  >;
  isListOpen: boolean;
  isLoading?: boolean;
  filteredOptions: string[];
@@ -40,19 +41,18 @@ type FilteredOptionsContextType = {
  setIsMouseLastUsedInputDevice: React.Dispatch<SetStateAction<boolean>>;
  isValueNew: boolean;
  toggleIsListOpen: (newState?: boolean) => void;
-  currentOption: string | null;
-  resetFilteredOptionsIndex: () => void;
-  moveFocusUp: () => void;
-  moveFocusDown: () => void;
-  moveFocusToInput: () => void;
-  moveFocusToEnd: () => void;
+  currentOption?: string;
  shouldAutocomplete?: boolean;
+  virtualFocus: VirtualFocusType;
 };
 const FilteredOptionsContext = createContext<FilteredOptionsContextType>(
  {} as FilteredOptionsContextType
 );

-export const FilteredOptionsProvider = ({ children, value: props }) => {
+export const FilteredOptionsProvider = ({
+  children,
+  value: props,
+}: FilteredOptionsProps) => {
  const {
    allowNewValues,
    filteredOptions: externalFilteredOptions,
@@ -60,7 +60,9 @@ export const FilteredOptionsProvider = ({ children, value: props }) => {
    isLoading,
    options,
  } = props;
-  const filteredOptionsRef = useRef<HTMLUListElement | null>(null);
+  const [filteredOptionsRef, setFilteredOptionsRef] =
+    useState<HTMLUListElement | null>(null);
+  const virtualFocus = useVirtualFocus(filteredOptionsRef);
  const {
    inputProps: { "aria-describedby": partialAriaDescribedBy, id },
    value,
@@ -70,9 +72,6 @@ export const FilteredOptionsProvider = ({ children, value: props }) => {
    shouldAutocomplete,
  } = useInputContext();

-  const [filteredOptionsIndex, setFilteredOptionsIndex] = useState<
-    number | null
-  >(null);
  const [isInternalListOpen, setInternalListOpen] = useState(false);
  const { customOptions } = useCustomOptionsContext();

@@ -81,8 +80,7 @@ export const FilteredOptionsProvider = ({ children, value: props }) => {
      return externalFilteredOptions;
    }
    const opts = [...customOptions, ...options];
-    setFilteredOptionsIndex(null);
-    return getMatchingValuesFromList(searchTerm, opts);
+    return filteredOptionsUtils.getMatchingValuesFromList(searchTerm, opts);
  }, [customOptions, externalFilteredOptions, options, searchTerm]);

  const previousSearchTerm = usePrevious(searchTerm);
@@ -90,10 +88,26 @@ export const FilteredOptionsProvider = ({ children, value: props }) => {
  const [isMouseLastUsedInputDevice, setIsMouseLastUsedInputDevice] =
    useState(false);

+  const filteredOptionsMap = useMemo(
+    () =>
+      options.reduce(
+        (map, _option) => ({
+          ...map,
+          [filteredOptionsUtils.getOptionId(id, _option)]: _option,
+        }),
+        {
+          [filteredOptionsUtils.getAddNewOptionId(id)]: allowNewValues
+            ? value
+            : undefined,
+        }
+      ),
+    [allowNewValues, id, options, value]
+  );
+
  useClientLayoutEffect(() => {
    if (
      shouldAutocomplete &&
-      normalizeText(searchTerm) !== "" &&
+      filteredOptionsUtils.normalizeText(searchTerm) !== "" &&
      (previousSearchTerm?.length || 0) < searchTerm.length &&
      filteredOptions.length > 0
    ) {
@@ -115,29 +129,30 @@ export const FilteredOptionsProvider = ({ children, value: props }) => {
    return isExternalListOpen ?? isInternalListOpen;
  }, [isExternalListOpen, isInternalListOpen]);

-  const toggleIsListOpen = useCallback((newState?: boolean) => {
-    setFilteredOptionsIndex(null);
-    setInternalListOpen((oldState) => newState ?? !oldState);
-  }, []);
-
-  const isValueNew = useMemo(
-    () => Boolean(value) && !isValueInList(value, filteredOptions),
-    [value, filteredOptions]
+  const toggleIsListOpen = useCallback(
+    (newState?: boolean) => {
+      virtualFocus.moveFocusToTop();
+      setInternalListOpen((oldState) => newState ?? !oldState);
+    },
+    [virtualFocus]
  );

-  const getMinimumIndex = useCallback(() => {
-    return isValueNew && allowNewValues ? -1 : 0;
-  }, [allowNewValues, isValueNew]);
+  const isValueNew = useMemo(
+    () =>
+      Boolean(value) &&
+      !filteredOptionsMap[filteredOptionsUtils.getOptionId(id, value)],
+    [filteredOptionsMap, id, value]
+  );

  const ariaDescribedBy = useMemo(() => {
    let activeOption;
    if (!isLoading && filteredOptions.length === 0) {
-      activeOption = `${id}-no-hits`;
+      activeOption = filteredOptionsUtils.getNoHitsId(id);
    } else if ((value && value !== "") || isLoading) {
      if (shouldAutocomplete && filteredOptions[0]) {
-        activeOption = `${id}-option-${filteredOptions[0].replace(" ", "-")}`;
+        activeOption = filteredOptionsUtils.getOptionId(id, filteredOptions[0]);
      } else if (isListOpen && isLoading) {
-        activeOption = `${id}-is-loading`;
+        activeOption = filteredOptionsUtils.getIsLoadingId(id);
      }
    }
    return cl(activeOption, partialAriaDescribedBy) || undefined;
@@ -151,102 +166,21 @@ export const FilteredOptionsProvider = ({ children, value: props }) => {
    id,
  ]);

-  const currentOption = useMemo(() => {
-    if (filteredOptionsIndex == null) {
-      return null;
-    }
-    if (filteredOptionsIndex === -1) {
-      return value;
-    }
-    return filteredOptions[filteredOptionsIndex];
-  }, [filteredOptionsIndex, filteredOptions, value]);
+  const currentOption = useMemo(
+    () =>
+      filteredOptionsMap[virtualFocus.activeElement?.getAttribute("id") || -1],
+    [filteredOptionsMap, virtualFocus]
+  );

-  const resetFilteredOptionsIndex = () => {
-    setFilteredOptionsIndex(getMinimumIndex());
-  };
-
-  const scrollToOption = useCallback((newIndex: number) => {
-    if (
-      filteredOptionsRef.current &&
-      filteredOptionsRef.current.children[newIndex]
-    ) {
-      const child = filteredOptionsRef.current.children[newIndex];
-      const { top, bottom } = child.getBoundingClientRect();
-      const parentRect = filteredOptionsRef.current.getBoundingClientRect();
-      if (top < parentRect.top || bottom > parentRect.bottom) {
-        child.scrollIntoView({ block: "nearest" });
-      }
-    }
-  }, []);
-
-  useEffect(() => {
-    if (filteredOptionsIndex !== null && isListOpen) {
-      scrollToOption(filteredOptionsIndex);
-    }
-  }, [filteredOptionsIndex, isListOpen, scrollToOption]);
-
-  const moveFocusToInput = useCallback(() => {
-    setFilteredOptionsIndex(null);
-    toggleIsListOpen(false);
-  }, [toggleIsListOpen]);
-
-  const moveFocusToEnd = useCallback(() => {
-    const lastIndex = filteredOptions.length - 1;
-    toggleIsListOpen(true);
-    setFilteredOptionsIndex(lastIndex);
-  }, [filteredOptions.length, toggleIsListOpen]);
-
-  const moveFocusUp = useCallback(() => {
-    if (filteredOptionsIndex === null) {
-      return;
-    }
-    if (filteredOptionsIndex === getMinimumIndex()) {
-      toggleIsListOpen(false);
-      setFilteredOptionsIndex(null);
-    } else {
-      const newIndex = Math.max(getMinimumIndex(), filteredOptionsIndex - 1);
-      setFilteredOptionsIndex(newIndex);
-    }
-  }, [filteredOptionsIndex, getMinimumIndex, toggleIsListOpen]);
-
-  const moveFocusDown = useCallback(() => {
-    if (filteredOptionsIndex === null || !isListOpen) {
-      toggleIsListOpen(true);
-      if (allowNewValues || filteredOptions.length >= 1) {
-        setFilteredOptionsIndex(getMinimumIndex());
-      }
-      return;
-    }
-    const newIndex = Math.min(
-      filteredOptionsIndex + 1,
-      Math.max(getMinimumIndex(), filteredOptions.length - 1)
-    );
-    setFilteredOptionsIndex(newIndex);
-  }, [
-    allowNewValues,
-    filteredOptions.length,
-    filteredOptionsIndex,
-    getMinimumIndex,
-    isListOpen,
-    toggleIsListOpen,
-  ]);
-
-  const activeDecendantId = useMemo(() => {
-    if (filteredOptionsIndex === null) {
-      return undefined;
-    } else if (filteredOptionsIndex === -1) {
-      return `${id}-combobox-new-option`;
-    } else {
-      return `${id}-option-${currentOption?.replace(" ", "-")}`;
-    }
-  }, [filteredOptionsIndex, currentOption, id]);
+  const activeDecendantId = useMemo(
+    () => virtualFocus.activeElement?.getAttribute("id") || undefined,
+    [virtualFocus.activeElement]
+  );

  const filteredOptionsState = {
    activeDecendantId,
    allowNewValues,
-    filteredOptionsRef,
-    filteredOptionsIndex,
-    setFilteredOptionsIndex,
+    setFilteredOptionsRef,
    shouldAutocomplete,
    isListOpen,
    isLoading,
@@ -256,11 +190,7 @@ export const FilteredOptionsProvider = ({ children, value: props }) => {
    isValueNew,
    toggleIsListOpen,
    currentOption,
-    resetFilteredOptionsIndex,
-    moveFocusUp,
-    moveFocusDown,
-    moveFocusToInput,
-    moveFocusToEnd,
+    virtualFocus,
    ariaDescribedBy,
  };

@@ -0,0 +1,87 @@
+import { Dispatch, SetStateAction, useState } from "react";
+
+export type VirtualFocusType = {
+  activeElement: HTMLElement | undefined;
+  getElementById: (id: string) => HTMLElement | undefined;
+  isFocusOnTheTop: boolean;
+  isFocusOnTheBottom: boolean;
+  setIndex: Dispatch<SetStateAction<number>>;
+  moveFocusUp: () => void;
+  moveFocusDown: () => void;
+  moveFocusToElement: (id: string) => void;
+  moveFocusToTop: () => void;
+  moveFocusToBottom: () => void;
+};
+
+const useVirtualFocus = (
+  containerRef: HTMLElement | null
+): VirtualFocusType => {
+  const [index, setIndex] = useState(-1);
+
+  const listOfAllChildren: Array<HTMLElement> = containerRef?.children
+    ? Array.prototype.slice.call(containerRef?.children)
+    : [];
+  const elementsAbleToReceiveFocus = listOfAllChildren.filter(
+    (child) => child.getAttribute("data-no-focus") !== "true"
+  );
+
+  const activeElement = elementsAbleToReceiveFocus[index];
+  const getElementById = (id: string) =>
+    listOfAllChildren.find((element) => element.id === id);
+  const isFocusOnTheTop = index === 0;
+  const isFocusOnTheBottom = index === elementsAbleToReceiveFocus.length - 1;
+
+  const scrollToOption = (newIndex: number) => {
+    const indexOfElementToScrollTo = Math.min(
+      Math.max(newIndex, 0),
+      containerRef?.children.length || 0
+    );
+    if (containerRef?.children[indexOfElementToScrollTo]) {
+      const child = containerRef.children[indexOfElementToScrollTo];
+      const { top, bottom } = child.getBoundingClientRect();
+      const parentRect = containerRef.getBoundingClientRect();
+      if (top < parentRect.top || bottom > parentRect.bottom) {
+        child.scrollIntoView({ block: "nearest" });
+      }
+    }
+  };
+
+  const _moveFocusAndScrollTo = (_index: number) => {
+    setIndex(_index);
+    scrollToOption(_index);
+  };
+  const moveFocusUp = () => _moveFocusAndScrollTo(Math.max(index - 1, -1));
+  const moveFocusDown = () =>
+    _moveFocusAndScrollTo(
+      Math.min(index + 1, elementsAbleToReceiveFocus.length - 1)
+    );
+  const moveFocusToTop = () => _moveFocusAndScrollTo(-1);
+  const moveFocusToBottom = () =>
+    _moveFocusAndScrollTo(elementsAbleToReceiveFocus.length - 1);
+  const moveFocusToElement = (id: string) => {
+    const thisElement = elementsAbleToReceiveFocus.find(
+      (_element) => _element.getAttribute("id") === id
+    );
+    const indexOfElement = thisElement
+      ? elementsAbleToReceiveFocus.indexOf(thisElement)
+      : -1;
+    if (indexOfElement >= 0) {
+      setIndex(indexOfElement);
+    }
+  };
+
+  return {
+    activeElement,
+    getElementById,
+    isFocusOnTheTop,
+    isFocusOnTheBottom,
+    setIndex,
+    moveFocusUp,
+    moveFocusDown,
+    moveFocusToElement,
+    moveFocusToTop,
+    moveFocusToBottom,
+  };
+};
+
+export default useVirtualFocus;
@@ -9,6 +9,7 @@ import cl from "clsx";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsContext";
 import { useInputContext } from "./inputContext";
+import filteredOptionsUtil from "../FilteredOptions/filtered-options-util";

 interface InputProps
  extends Omit<InputHTMLAttributes<HTMLInputElement>, "value"> {
@@ -34,15 +35,10 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
      isValueNew,
      toggleIsListOpen,
      isListOpen,
-      filteredOptionsIndex,
-      moveFocusUp,
-      moveFocusDown,
      ariaDescribedBy,
-      moveFocusToInput,
-      moveFocusToEnd,
-      setFilteredOptionsIndex,
      setIsMouseLastUsedInputDevice,
      shouldAutocomplete,
+      virtualFocus,
    } = useFilteredOptionsContext();

    const onEnter = useCallback(
@@ -57,8 +53,9 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
          event.preventDefault();
          // Selecting a value from the dropdown / FilteredOptions
          toggleOption(currentOption, event);
-          if (!isMultiSelect && !isTextInSelectedOptions(currentOption))
+          if (!isMultiSelect && !isTextInSelectedOptions(currentOption)) {
            toggleIsListOpen(false);
+          }
        } else if (shouldAutocomplete && isTextInSelectedOptions(value)) {
          event.preventDefault();
          // Trying to set the same value that is already set, so just clearing the input
@@ -104,10 +101,10 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
          onEnter(e);
          break;
        case "Home":
-          moveFocusToInput();
+          virtualFocus.moveFocusToTop();
          break;
        case "End":
-          moveFocusToEnd();
+          virtualFocus.moveFocusToBottom();
          break;
        default:
          break;
@@ -128,14 +125,20 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
          // so we don't interfere with text editing
          if (e.target.selectionStart === value?.length) {
            e.preventDefault();
-            moveFocusDown();
+            if (virtualFocus.activeElement === null || !isListOpen) {
+              toggleIsListOpen(true);
+            }
+            virtualFocus.moveFocusDown();
          }
        } else if (e.key === "ArrowUp") {
          // Check that the FilteredOptions list is open and has virtual focus.
          // Otherwise ignore keystrokes, so it doesn't interfere with text editing
-          if (isListOpen && filteredOptionsIndex !== null) {
+          if (isListOpen && activeDecendantId) {
            e.preventDefault();
-            moveFocusUp();
+            if (virtualFocus.isFocusOnTheTop) {
+              toggleIsListOpen(false);
+            }
+            virtualFocus.moveFocusUp();
          }
        }
      },
@@ -143,11 +146,11 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
        value,
        selectedOptions,
        removeSelectedOption,
-        moveFocusDown,
        isListOpen,
-        filteredOptionsIndex,
-        moveFocusUp,
+        activeDecendantId,
        setIsMouseLastUsedInputDevice,
+        toggleIsListOpen,
+        virtualFocus,
      ]
    );

@@ -159,13 +162,14 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
        } else if (filteredOptions.length === 0) {
          toggleIsListOpen(false);
        }
+        virtualFocus.moveFocusToTop();
        onChange(event);
      },
-      [filteredOptions.length, onChange, toggleIsListOpen]
+      [filteredOptions.length, virtualFocus, onChange, toggleIsListOpen]
    );

    const onBlur = () => {
-      setFilteredOptionsIndex(-1);
+      virtualFocus.moveFocusToTop();
    };

    return (
@@ -180,7 +184,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
        onBlur={onBlur}
        onKeyUp={handleKeyUp}
        onKeyDown={handleKeyDown}
-        aria-controls={`${inputProps.id}-filtered-options`}
+        aria-controls={filteredOptionsUtil.getFilteredOptionsId(inputProps.id)}
        aria-expanded={!!isListOpen}
        autoComplete="off"
        aria-autocomplete={shouldAutocomplete ? "both" : "list"}
@@ -1,6 +1,5 @@
 import React, { useState, useCallback, createContext, useContext } from "react";
 import { useInputContext } from "./Input/inputContext";
-import { useSelectedOptionsContext } from "./SelectedOptions/selectedOptionsContext";

 type CustomOptionsContextType = {
  customOptions: string[];
@@ -13,13 +12,19 @@ const CustomOptionsContext = createContext<CustomOptionsContextType>(
  {} as CustomOptionsContextType
 );

-export const CustomOptionsProvider = ({ children }) => {
+export const CustomOptionsProvider = ({
+  children,
+  value,
+}: {
+  children: any;
+  value: { isMultiSelect?: boolean };
+}) => {
  const [customOptions, setCustomOptions] = useState<string[]>([]);
  const { focusInput } = useInputContext();
-  const { isMultiSelect } = useSelectedOptionsContext();
+  const { isMultiSelect } = value;

  const removeCustomOption = useCallback(
-    (option) => {
+    (option: string) => {
      setCustomOptions((prevCustomOptions) =>
        prevCustomOptions.filter((o) => o !== option)
      );
@@ -29,7 +34,7 @@ export const CustomOptionsProvider = ({ children }) => {
  );

  const addCustomOption = useCallback(
-    (option) => {
+    (option: string) => {
      if (isMultiSelect) {
        setCustomOptions((prevOptions) => [...prevOptions, option]);
      } else {
@@ -1,4 +1,4 @@
-import React, { forwardRef, HTMLAttributes } from "react";
+import React, { forwardRef, HTMLAttributes, isValidElement } from "react";
 import cl from "clsx";
 import { Heading, BodyShort } from "../../typography";
 import ErrorSummaryItem, { ErrorSummaryItemType } from "./ErrorSummaryItem";
@@ -100,7 +100,10 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
        </Heading>
        <BodyShort as="ul" size={size} className="navds-error-summary__list">
          {React.Children.map(children, (child) => {
-            return <li key={child?.toString()}>{child}</li>;
+            if (!isValidElement(child)) {
+              return null;
+            }
+            return <li key={child.toString()}>{child}</li>;
          })}
        </BodyShort>
      </section>
@@ -1,15 +1,20 @@
+export {
+  default as ConfirmationPanel,
+  type ConfirmationPanelProps,
+} from "./ConfirmationPanel";
+export { Fieldset, FieldsetContext, type FieldsetProps } from "./Fieldset";
+export { default as Select, type SelectProps } from "./Select";
+export { default as Switch, type SwitchProps } from "./Switch";
+export { default as TextField, type TextFieldProps } from "./TextField";
+export { default as Textarea, type TextareaProps } from "./Textarea";
 export {
  Checkbox,
  CheckboxGroup,
  type CheckboxGroupProps,
  type CheckboxProps,
 } from "./checkbox";
-export {
-  type ConfirmationPanelProps,
-  default as ConfirmationPanel,
-} from "./ConfirmationPanel";
+export { Combobox as UNSAFE_Combobox, type ComboboxProps } from "./combobox";
 export { ErrorSummary, type ErrorSummaryProps } from "./error-summary";
-export { Fieldset, FieldsetContext, type FieldsetProps } from "./Fieldset";
 export {
  Radio,
  RadioGroup,
@@ -17,8 +22,3 @@ export {
  type RadioProps,
 } from "./radio";
 export { Search, type SearchClearEvent, type SearchProps } from "./search";
-export { Combobox as UNSAFE_Combobox, type ComboboxProps } from "./combobox";
-export { default as Select, type SelectProps } from "./Select";
-export { default as Switch, type SwitchProps } from "./Switch";
-export { Counter, default as Textarea, type TextareaProps } from "./Textarea";
-export { default as TextField, type TextFieldProps } from "./TextField";
@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
+import { Button } from "../../button";
 import { Textarea } from "../index";

 const meta: Meta<typeof Textarea> = {
@@ -14,12 +15,15 @@ export const Default: StoryObj<typeof Textarea> = {
  },

  args: {
-    maxLength: 100,
+    maxLength: 0,
    label: "Ipsum enim quis culpa",
-    resize: false,
  },

  argTypes: {
+    resize: {
+      control: { type: "radio" },
+      options: [true, "vertical", "horizontal"],
+    },
    size: {
      control: { type: "radio" },
      options: ["medium", "small"],
@@ -28,6 +32,7 @@ export const Default: StoryObj<typeof Textarea> = {
    error: { type: "string" },
    hideLabel: { type: "boolean" },
    disabled: { type: "boolean" },
+    readOnly: { type: "boolean" },
    maxRows: { type: "number" },
    minRows: { type: "number" },
  },
@@ -66,6 +71,20 @@ export const Error = () => {
        error="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
        size="small"
      />
+
+      <Textarea
+        label="Ipsum enim quis culpa"
+        error="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
+        maxLength={20}
+      />
+
+      <Textarea
+        label="Ipsum enim quis culpa"
+        error="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
+        value="Sed dignissim sollicitudin porta."
+        maxLength={20}
+        size="small"
+      />
    </div>
  );
 };
@@ -84,7 +103,7 @@ export const HideLabel = () => {
 };

 export const MaxLength = () => {
-  return <Textarea maxLength={200} label="Ipsum enim quis culpa" />;
+  return <Textarea maxLength={50} label="Ipsum enim quis culpa" />;
 };

 export const MinRows = () => {
@@ -123,3 +142,35 @@ export const Readonly = () => {
    </div>
  );
 };
+
+export const AutoScrollbar = (props) => (
+  <div
+    style={{
+      border: "1px solid lightGreen",
+      height: "90vh",
+      display: "flex",
+      flexDirection: "column",
+    }}
+  >
+    <div style={{ border: "1px dashed gray" }}>
+      <h1>Header</h1>
+    </div>
+    <Textarea
+      resize
+      label="Textarea with autoScrollbar"
+      description="Description"
+      maxLength={30}
+      UNSAFE_autoScrollbar
+      {...props}
+    />
+    <div style={{ border: "1px dashed gray" }}>
+      <Button>Send</Button>
+    </div>
+  </div>
+);
+AutoScrollbar.argTypes = {
+  error: { type: "string" },
+  hideLabel: { type: "boolean" },
+  maxRows: { type: "number" },
+  minRows: { type: "number" },
+};
@@ -1,7 +1,7 @@
+import { InformationIcon } from "@navikt/aksel-icons";
+import { Meta } from "@storybook/react";
 import React from "react";
 import { BodyLong, GuidePanel, VStack } from "../index";
-import { Meta } from "@storybook/react";
-import { InformationIcon } from "@navikt/aksel-icons";

 export default {
  title: "ds-react/GuidePanel",
@@ -38,3 +38,4 @@ export * from "./layout/stack";
 export * from "./layout/grid";
 export * from "./layout/content-container";
 export * from "./layout/responsive";
+export * from "./layout/page";
@@ -1,8 +1,8 @@
-import React from "react";
 import type { Meta } from "@storybook/react";
+import React from "react";
+import { Box, HStack, VStack } from "../..";
 import { BodyLong } from "../../typography";
 import { Bleed } from "./Bleed";
-import { Box, HStack, VStack } from "../..";

 export default {
  title: "ds-react/Primitives/Bleed",
@@ -0,0 +1,271 @@
+import bgColors from "@navikt/ds-tokens/src/colors-bg.json";
+import type { Meta, StoryFn } from "@storybook/react";
+import React, { useEffect } from "react";
+import { Box } from "../box";
+import { HGrid } from "../grid";
+import Page from "./Page";
+import { widths } from "./parts/PageBlock";
+
+const meta: Meta = {
+  title: "ds-react/Primitives/Page",
+  component: Page,
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export default meta;
+
+export const Default: StoryFn = ({
+  belowFold,
+  background,
+  width,
+  gutters,
+  contentBlockPadding,
+}) => (
+  <Page
+    footer={<Footer width={width} gutters={gutters} />}
+    footerPosition={belowFold ? "belowFold" : undefined}
+    background={background}
+    contentBlockPadding={contentBlockPadding}
+  >
+    <Header width={width} gutters={gutters} />
+    <Content width={width} gutters={gutters} />
+  </Page>
+);
+
+Default.argTypes = {
+  width: {
+    control: "radio",
+    options: widths,
+  },
+  background: {
+    control: "radio",
+    options: Object.keys(bgColors.a),
+  },
+  belowFold: {
+    control: "boolean",
+  },
+  gutters: {
+    control: "boolean",
+  },
+  contentBlockPadding: {
+    control: "radio",
+    options: ["end", "none"],
+  },
+};
+
+Default.args = {
+  belowFold: false,
+  gutters: false,
+  contentBlockPadding: "end",
+};
+
+export const BelowFold: StoryFn = () => (
+  <Page
+    footer={<Footer />}
+    footerPosition="belowFold"
+    contentBlockPadding="end"
+  >
+    <Header />
+    <Content />
+  </Page>
+);
+
+export const Background: StoryFn = () => (
+  <HGrid columns={2} gap="4">
+    <Page
+      background="bg-default"
+      footer={<div>footer</div>}
+      contentBlockPadding="end"
+    >
+      <div>header</div>
+      <div>content</div>
+    </Page>
+    <Page
+      background="bg-subtle"
+      footer={<div>footer</div>}
+      contentBlockPadding="end"
+    >
+      <div>header</div>
+      <div>content</div>
+    </Page>
+  </HGrid>
+);
+
+export const ContentBlockPadding: StoryFn = () => (
+  <HGrid columns={2} gap="6" align="start">
+    <Page
+      footer={<Footer width="lg" gutters />}
+      contentBlockPadding="end"
+      background="bg-subtle"
+    >
+      <Header width="lg" gutters />
+      <Page.Block width="lg" gutters as="main">
+        <Box background="surface-alt-3-subtle" style={{ height: "80vh" }}>
+          Main
+        </Box>
+      </Page.Block>
+    </Page>
+    <Page
+      footer={<Footer width="lg" gutters />}
+      contentBlockPadding="none"
+      background="bg-subtle"
+    >
+      <Header width="lg" gutters />
+      <Page.Block width="lg" gutters as="main">
+        <Box background="surface-alt-3-subtle" style={{ height: "80vh" }}>
+          Main
+        </Box>
+      </Page.Block>
+    </Page>
+  </HGrid>
+);
+
+export const Gutters: StoryFn = () => (
+  <HGrid columns={2} gap="6" align="start">
+    <Page footer={<Footer width="lg" gutters />} background="bg-subtle">
+      <Header width="lg" gutters />
+      <Page.Block width="lg" gutters as="main">
+        <Box background="surface-alt-3-subtle" style={{ height: "80vh" }}>
+          Main
+        </Box>
+      </Page.Block>
+    </Page>
+    <Page footer={<Footer width="lg" />} background="bg-subtle">
+      <Header width="lg" />
+      <Page.Block width="lg" as="main">
+        <Box background="surface-alt-3-subtle" style={{ height: "80vh" }}>
+          Main
+        </Box>
+      </Page.Block>
+    </Page>
+  </HGrid>
+);
+
+Gutters.parameters = {
+  chromatic: {
+    modes: {
+      mobile_portrait: {
+        viewport: {
+          width: 400,
+          height: 850,
+        },
+      },
+      desktop: {
+        viewport: {
+          width: 1280,
+          height: 960,
+        },
+      },
+    },
+  },
+};
+
+const MILJO_URL = "https://www.nav.no/dekoratoren";
+
+export const WithDecorator: StoryFn = () => {
+  return (
+    <Page
+      contentBlockPadding="end"
+      footerPosition="belowFold"
+      footer={<div id="decorator-footer"></div>}
+    >
+      <div id="decorator-header"></div>
+      <Content width="lg" gutters />
+      <div
+        id="decorator-env"
+        data-src={`${MILJO_URL}/env?context=privatperson`}
+      ></div>
+    </Page>
+  );
+};
+
+WithDecorator.decorators = [
+  (Story) => {
+    useEffect(() => {
+      const script = document.createElement("script");
+      script.src = `${MILJO_URL}/client.js`;
+      script.async = true;
+      document.body.appendChild(script);
+
+      const styles = document.createElement("link");
+      styles.href = `${MILJO_URL}/css/client.css`;
+      styles.rel = "stylesheet";
+      document.head.appendChild(styles);
+
+      return () => {
+        document.body.removeChild(script);
+        document.head.removeChild(styles);
+      };
+    }, []);
+
+    return <Story />;
+  },
+];
+
+WithDecorator.parameters = {
+  chromatic: {
+    disable: true,
+  },
+};
+
+export const OutsideBackground = () => {
+  return (
+    <Page
+      contentBlockPadding="end"
+      footer={
+        <Box
+          background="surface-alt-3-subtle"
+          style={{ height: 100 }}
+          as="footer"
+        >
+          <Page.Block width="lg" gutters>
+            Footer
+          </Page.Block>
+        </Box>
+      }
+    >
+      <Box background="surface-alt-1-subtle" style={{ height: 64 }} as="header">
+        <Page.Block width="lg" gutters>
+          Header
+        </Page.Block>
+      </Box>
+      <Box background="surface-alt-2-subtle" style={{ height: 300 }} as="main">
+        <Page.Block width="lg" gutters>
+          main
+        </Page.Block>
+      </Box>
+    </Page>
+  );
+};
+
+function Header({ width = "lg", gutters = false }: any) {
+  return (
+    <Page.Block as="header" width={width} gutters={gutters}>
+      <Box background="surface-alt-3-subtle" style={{ height: 64 }}>
+        Header
+      </Box>
+    </Page.Block>
+  );
+}
+
+function Content({ width = "lg", gutters = false }: any) {
+  return (
+    <Page.Block width={width} gutters={gutters} as="main">
+      <Box background="surface-alt-3-subtle" style={{ height: 300 }}>
+        Main
+      </Box>
+    </Page.Block>
+  );
+}
+
+function Footer({ width = "lg", gutters = false }: any) {
+  return (
+    <Page.Block width={width} gutters={gutters} as="footer">
+      <Box background="surface-alt-3-subtle" style={{ height: 100 }}>
+        Footer
+      </Box>
+    </Page.Block>
+  );
+}
@@ -0,0 +1,115 @@
+import bgColors from "@navikt/ds-tokens/src/colors-bg.json";
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import { OverridableComponent } from "../../util";
+import { PageBlock } from "./parts/PageBlock";
+
+export interface PageProps extends React.HTMLAttributes<HTMLElement> {
+  /**
+   * Overrides html-tag
+   * @default "div"
+   */
+  as?: "div" | "body";
+  /**
+   * Background color. Accepts a color token.
+   * @default bg-default
+   */
+  background?: keyof typeof bgColors.a;
+  /**
+   * Allows better positioning of footer
+   */
+  footer?: React.ReactNode;
+  /**
+   * Places footer below page-fold
+   */
+  footerPosition?: "belowFold";
+  /**
+   * Adds a standardised padding of 4rem between content and footer
+   * @default block-end
+   */
+  contentBlockPadding?: "end" | "none";
+}
+
+interface PageComponentType
+  extends OverridableComponent<PageProps, HTMLElement> {
+  Block: typeof PageBlock;
+}
+
+export const PageComponent: OverridableComponent<PageProps, HTMLElement> =
+  forwardRef(
+    (
+      {
+        as: Component = "div",
+        className,
+        style: _style,
+        footer,
+        children,
+        footerPosition,
+        background = "bg-default",
+        contentBlockPadding = "end",
+        ...rest
+      },
+      ref
+    ) => {
+      const style: React.CSSProperties = {
+        ..._style,
+        "--__ac-page-background": `var(--a-${background})`,
+      };
+
+      const belowFold = footerPosition === "belowFold";
+
+      return (
+        <Component
+          {...rest}
+          className={cl("navds-page", className)}
+          ref={ref}
+          style={style}
+        >
+          <div
+            className={cl({
+              "navds-page__content--fullheight": belowFold,
+              "navds-page__content--grow": !belowFold,
+              "navds-page__content--padding": contentBlockPadding === "end",
+            })}
+          >
+            {children}
+          </div>
+          {footer}
+        </Component>
+      );
+    }
+  );
+
+/**
+ * Page helps with establishing a top-level layout for your page
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/page)
+ * @see 🏷️ {@link PageProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * ```jsx
+ * <Page
+ *   footer={<Page.Block width="xl" gutters />}
+ * >
+ *   <Page.Block width="xl" gutters />// Header
+ *   <Page.Block width="xl" gutters />// Content
+ * </Page>
+ * ```
+ * @example
+ * Footer placed below page-fold
+ * ```jsx
+ * <Page
+ *   footer={<Page.Block width="xl" gutters />}
+ *   footerPosition="belowFold"
+ * >
+ *   <Page.Block width="xl" gutters />// Header
+ *   <Page.Block width="xl" gutters />// Content
+ * </Page>
+ * ```
+ */
+const Page = PageComponent as PageComponentType;
+
+Page.Block = PageBlock;
+
+export default Page;
@@ -0,0 +1,2 @@
+export { default as Page, type PageProps } from "./Page";
+export { type PageBlockProps } from "./parts/PageBlock";
@@ -0,0 +1,72 @@
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import { OverridableComponent } from "../../../util/OverridableComponent";
+
+export const widths = ["lg", "xl", "2xl"] as const;
+
+export interface PageBlockProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Predefined max-width
+   * @example
+   * lg:  1024px
+   * xl:  1280px
+   * 2xl: 1440px
+   * @default max-width: 100%;
+   */
+  width?: (typeof widths)[number];
+  /**
+   * Adds a standardised responsive padding-inline
+   * @example
+   * 3rem on > md
+   * 1rem on < md
+   * @default false
+   */
+  gutters?: boolean;
+}
+
+/**
+ * Acts as a top-level container for defining max-width, gutters and horizontal centering
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/page)
+ * @see 🏷️ {@link PageBlockProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * ```jsx
+ * <Page
+ *   footer={<Page.Block width="xl" gutters />}
+ * >
+ *   <Page.Block width="xl" gutters />// Header
+ *   <Page.Block width="xl" gutters />// Content
+ * </Page>
+ * ```
+ * @example
+ * With background bleed
+ * Wrapping `Page.Block` with `Box` allows the background-color to use full screen-width
+ * ```jsx
+ * <Page
+ *   footer={<Box background="..."><Page.Block width="xl" gutters /></Box>}
+ *   footerPosition="belowFold"
+ * >
+ *   <Box background="..."><Page.Block width="xl" gutters /></Box>//Header
+ *   <Box background="..."><Page.Block width="xl" gutters /></Box>//Content
+ * </Page>
+ * ```
+ */
+export const PageBlock: OverridableComponent<PageBlockProps, HTMLDivElement> =
+  forwardRef(
+    ({ as: Component = "div", gutters, className, width, ...rest }, ref) => {
+      return (
+        <Component
+          {...rest}
+          className={cl(
+            "navds-pageblock",
+            `navds-pageblock--${width}`,
+            className,
+            { "navds-pageblock--gutters": gutters }
+          )}
+          ref={ref}
+        />
+      );
+    }
+  );
@@ -1,13 +1,14 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
+import React, { forwardRef } from "react";
 import { OverridableComponent } from "../util/OverridableComponent";

 export interface LinkProps
  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
  /**
   * Inverts when the underline appears. If this is false,
-   * the underline does not appear by default, but does appear when the link is hovered.
-   * This makes it more suitable for use when inlined in text.
+   * the underline only appears on hover.
+   *
+   * **NB: Underline can only be removed in menus etc. where it's obvious that it's a link.**
   * @default true
   */
  underline?: boolean;
@@ -8,6 +8,7 @@ import React, {
  useRef,
 } from "react";
 import { createPortal } from "react-dom";
+import { DateContext } from "../date/context";
 import { useProvider } from "../provider";
 import { Detail, Heading } from "../typography";
 import { mergeRefs, useId } from "../util";
@@ -99,7 +100,9 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
    const rootElement = useProvider()?.rootElement;
    const portalNode = useFloatingPortalNode({ root: rootElement });

-    if (useContext(ModalContext)) {
+    const dateContext = useContext(DateContext);
+    const modalContext = useContext(ModalContext);
+    if (modalContext && !dateContext) {
      console.error("Modals should not be nested");
    }

@@ -1,17 +1,19 @@
 import { FileIcon } from "@navikt/aksel-icons";
+import { Meta, StoryFn } from "@storybook/react";
 import React, { useRef, useState } from "react";
 import { BodyLong, Button, Heading, Tooltip } from "..";
 import Modal from "./Modal";

-export default {
+const meta: Meta<typeof Modal> = {
  title: "ds-react/Modal",
  component: Modal,
  parameters: {
    chromatic: { pauseAnimationAtEnd: true },
  },
 };
+export default meta;

-export const WithUseRef = () => {
+export const WithUseRef: StoryFn = () => {
  const ref = useRef<HTMLDialogElement>(null);
  const ref2 = useRef<HTMLDialogElement>(null);

@@ -87,7 +89,7 @@ export const WithUseRef = () => {
 };
 WithUseRef.storyName = "With useRef";

-export const WithUseState = () => {
+export const WithUseState: StoryFn = () => {
  const [open, setOpen] = useState(true);
  const [open2, setOpen2] = useState(false);

@@ -140,36 +142,43 @@ export const WithUseState = () => {
 };
 WithUseState.storyName = "With useState";

-export const EmptyHeader = () => (
-  <div style={{ minWidth: "800px", minHeight: "600px" } /* For Chromatic */}>
-    <Modal open>
-      <Modal.Header />
-      <Modal.Body>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
-        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
-        mollit anim id est laborum.
-      </Modal.Body>
-    </Modal>
-  </div>
+export const EmptyHeader: StoryFn = () => (
+  <Modal open>
+    <Modal.Header />
+    <Modal.Body>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+      est laborum.
+    </Modal.Body>
+  </Modal>
 );

-export const Small = () => (
+export const Small: StoryFn = () => (
  <Modal open width="small" header={{ heading: "Simple header" }}>
    <Modal.Body>Lorem ipsum dolor sit amet.</Modal.Body>
  </Modal>
 );
+Small.storyName = "Size = Small";

-export const MediumWithPortal = () => (
+export const MediumWithPortal: StoryFn = () => (
  <Modal open portal width="medium" header={{ heading: "Simple header" }}>
    <Modal.Body>Lorem ipsum dolor sit amet.</Modal.Body>
  </Modal>
 );
+MediumWithPortal.storyName = "Size = Medium (with portal)";

-export const WithTooltip = () => {
+export const Large800: StoryFn = () => (
+  <Modal open width={800} header={{ heading: "Simple header" }}>
+    <Modal.Body>Lorem ipsum dolor sit amet.</Modal.Body>
+  </Modal>
+);
+Large800.storyName = "Size = 800px";
+
+export const WithTooltip: StoryFn = () => {
  const ref = useRef<HTMLDialogElement>(null);

  return (
@@ -193,3 +202,66 @@ export const WithTooltip = () => {
    </div>
  );
 };
+
+export const ChromaticViewportTesting: StoryFn = () => (
+  <div id="modal-story-wrapper" style={{ width: "100vw", height: "100vh" }}>
+    <style>{`#storybook-root { padding: 0 !important }`}</style>
+    <Modal
+      open
+      header={{ heading: "Chromatic Viewports Testing", label: "Test" }}
+    >
+      <Modal.Body>
+        <BodyLong spacing>
+          This story is tailored for testing the breakpoints with Chromatic.
+        </BodyLong>
+        <BodyLong spacing>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat.
+        </BodyLong>
+        <BodyLong spacing>
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+          dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+          proident, sunt in culpa qui officia deserunt mollit anim id est
+          laborum.
+        </BodyLong>
+        <BodyLong>
+          Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+          accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
+          ab illo inventore veritatis et quasi architecto beatae vitae dicta
+          sunt explicabo.
+        </BodyLong>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button>Primary</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button variant="tertiary">Tertiary</Button>
+      </Modal.Footer>
+    </Modal>
+  </div>
+);
+ChromaticViewportTesting.parameters = {
+  chromatic: {
+    modes: {
+      mobile_portrait: {
+        viewport: {
+          width: 400,
+          height: 850,
+        },
+      },
+      mobile_landscape: {
+        viewport: {
+          width: 850,
+          height: 400,
+        },
+      },
+      desktop: {
+        viewport: {
+          width: 1280,
+          height: 960,
+        },
+      },
+    },
+  },
+};
@@ -18,6 +18,7 @@ import React, {
  useMemo,
  useRef,
 } from "react";
+import { DateContext } from "../date/context";
 import { ModalContext } from "../modal/ModalContext";
 import { mergeRefs, useClientLayoutEffect, useEventListener } from "../util";
 import PopoverContent, { PopoverContentType } from "./PopoverContent";
@@ -73,11 +74,6 @@ export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
   * @default "absolute"
   */
  strategy?: "absolute" | "fixed";
-  /**
-   * Bubbles Escape keydown-event up trough DOM-tree. This is set to false by default to prevent closing components like Modal on Escape
-   * @default false
-   */
-  bubbleEscape?: boolean;
  /**
   * Changes placement of the floating element in order to keep it in view.
   * @default true
@@ -124,7 +120,6 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
      placement = "top",
      offset,
      strategy: userStrategy,
-      bubbleEscape = false,
      flip: _flip = true,
      ...rest
    },
@@ -132,8 +127,9 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
  ) => {
    const arrowRef = useRef<HTMLDivElement | null>(null);
    const isInModal = useContext(ModalContext) !== null;
+    const isInDatepicker = useContext(DateContext) !== null;
    const chosenStrategy = userStrategy ?? (isInModal ? "fixed" : "absolute");
-    const chosenFlip = isInModal ? true : _flip;
+    const chosenFlip = isInDatepicker ? false : _flip;

    const {
      x,
@@ -160,11 +156,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(

    const { getFloatingProps } = useInteractions([
      useClick(context),
-      useDismiss(context, {
-        bubbles: {
-          escapeKey: bubbleEscape,
-        },
-      }),
+      useDismiss(context),
    ]);

    useClientLayoutEffect(() => {
@@ -81,11 +81,8 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
      e.stopPropagation();
    };

-    const onRowClick = (e) => {
-      if (e.target.nodeName === "TD" || e.target.nodeName === "TH") {
-        expansionHandler(e);
-      }
-    };
+    const onRowClick = (e) =>
+      !isInteractiveTarget(e.target) && expansionHandler(e);

    return (
      <>
@@ -143,4 +140,19 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
  }
 );

+function isInteractiveTarget(elm: HTMLElement) {
+  if (elm.nodeName === "TD" || elm.nodeName === "TH" || !elm.parentElement) {
+    return false;
+  }
+  if (
+    ["BUTTON", "DETAILS", "LABEL", "SELECT", "TEXTAREA", "INPUT", "A"].includes(
+      elm.nodeName
+    )
+  ) {
+    return true;
+  }
+
+  return isInteractiveTarget(elm.parentElement);
+}
+
 export default ExpandableRow;
@@ -0,0 +1,100 @@
+import { expect, jest } from "@storybook/jest";
+import { userEvent, within } from "@storybook/testing-library";
+import React from "react";
+import { Table } from "../..";
+
+export default {
+  title: "ds-react/Table/Tests",
+  component: Table,
+};
+
+export const ClickableRowTest = {
+  render: ({ onOpenChange }) => {
+    return (
+      <>
+        <Table zebraStripes>
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell aria-hidden />
+              <Table.HeaderCell aria-hidden />
+              <Table.HeaderCell aria-hidden />
+              <Table.HeaderCell aria-hidden />
+              <Table.HeaderCell aria-hidden />
+              <Table.HeaderCell aria-hidden />
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            <Table.ExpandableRow
+              content={<div>placeholder row 2</div>}
+              togglePlacement="right"
+              data-testid="row1"
+              expandOnRowClick
+              onOpenChange={onOpenChange}
+            >
+              <Table.DataCell>
+                <div data-testid="cell1">Should be clickable</div>
+              </Table.DataCell>
+              <Table.DataCell data-testid="cell2">
+                Should also be clickable
+              </Table.DataCell>
+
+              <Table.DataCell>
+                <button data-testid="cell3">Should not be clickable</button>
+              </Table.DataCell>
+              <Table.DataCell>
+                <div>
+                  <div>
+                    <button data-testid="cell4">
+                      Nested should not be clickable
+                    </button>
+                  </div>
+                </div>
+              </Table.DataCell>
+              <Table.DataCell>
+                <div>
+                  <div>
+                    <button data-testid="cell4">
+                      <span>2x nested should not be clickable</span>
+                    </button>
+                  </div>
+                </div>
+              </Table.DataCell>
+            </Table.ExpandableRow>
+          </Table.Body>
+        </Table>
+      </>
+    );
+  },
+  args: {
+    onOpenChange: jest.fn(),
+  },
+  play: async ({ canvasElement, args }) => {
+    args.onOpenChange.mockClear();
+    const canvas = within(canvasElement);
+
+    const cell1 = canvas.getByText("Should be clickable");
+    const cell2 = canvas.getByText("Should also be clickable");
+    const cell3 = canvas.getByText("Should not be clickable");
+    const cell4 = canvas.getByText("Nested should not be clickable");
+    const cell5 = canvas.getByText("2x nested should not be clickable");
+
+    await userEvent.click(cell1);
+    expect(args.onOpenChange.mock.calls).toHaveLength(1);
+    await userEvent.click(cell1);
+    expect(args.onOpenChange.mock.calls).toHaveLength(2);
+
+    await userEvent.click(cell2);
+    expect(args.onOpenChange.mock.calls).toHaveLength(3);
+    await userEvent.click(cell2);
+    expect(args.onOpenChange.mock.calls).toHaveLength(4);
+
+    await userEvent.click(cell3);
+    expect(args.onOpenChange.mock.calls).toHaveLength(4);
+
+    await userEvent.click(cell4);
+    expect(args.onOpenChange.mock.calls).toHaveLength(4);
+
+    await userEvent.click(cell5);
+    expect(args.onOpenChange.mock.calls).toHaveLength(4);
+  },
+};
@@ -1,11 +1,28 @@
 import React from "react";

+/**
+ * This interface represents a component that can be overridden with different props and elements.
+ * @template Component The type of the props for the component.
+ * @template Element The type of the HTML element that the component renders.
+ */
 export interface OverridableComponent<Component, Element extends HTMLElement> {
+  /**
+   * This is a function type that takes props and returns a React functional component.
+   * @param props The props for the component, which are a combination of the Component type and React.RefAttributes for the Element type.
+   * @returns A React functional component.
+   */
  (props: Component & React.RefAttributes<Element>): ReturnType<React.FC>;

+  /**
+   * This is a function type that takes props and returns a React functional component.
+   * It allows for the 'as' prop to override the type of element that the component renders.
+   * @template As The type of the element that the component should render as.
+   * @param props The props for the component, which are a combination of the Component type, the 'as' prop, and any other props that are not part of the Component type or the 'as' prop.
+   * @returns A React functional component.
+   */
  <As extends React.ElementType>(
    props: {
-      as: As;
+      as?: As;
    } & Component &
      Omit<React.ComponentPropsWithRef<As>, keyof Component | "as">
  ): ReturnType<React.FC>;
@@ -1,19 +1,57 @@
-/* https://github.com/mui/material-ui/blob/master/packages/mui-base/src/TextareaAutosize/TextareaAutosize.js */
+/* https://github.com/mui/material-ui/blob/master/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx */
 import React, { forwardRef, useEffect, useMemo, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 import { debounce, mergeRefs, useClientLayoutEffect } from "../util";

+type State = {
+  outerHeightStyle: number;
+  overflow?: boolean | undefined;
+};
+
+const updateState = (
+  prevState: State,
+  newState: State,
+  renders: React.MutableRefObject<number>
+) => {
+  const { outerHeightStyle, overflow } = newState;
+  // Need a large enough difference to update the height.
+  // This prevents infinite rendering loop.
+  if (
+    renders.current < 20 &&
+    ((outerHeightStyle > 0 &&
+      Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1) ||
+      prevState.overflow !== overflow)
+  ) {
+    renders.current += 1;
+    return {
+      overflow,
+      outerHeightStyle,
+    };
+  }
+  if (process.env.NODE_ENV !== "production") {
+    if (renders.current === 20) {
+      console.error(
+        [
+          "Textarea: Too many re-renders. The layout is unstable.",
+          "TextareaAutosize limits the number of renders to prevent an infinite loop.",
+        ].join("\n")
+      );
+    }
+  }
+  return prevState;
+};
+
 /**
- * https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/ownerDocument.ts
- * https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/ownerWindow.ts
+ * https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/ownerDocument/ownerDocument.ts
+ * https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/ownerWindow/ownerWindow.ts
 */
-const ownerWindow = (node: Node | null): Window => {
+const ownerWindow = (node: Node | undefined): Window => {
  const doc = (node && node.ownerDocument) || document;
  return doc.defaultView || window;
 };

-function getStyleValue(computedStyle, property) {
-  return parseInt(computedStyle[property], 10) || 0;
+function getStyleValue(value: string) {
+  return parseInt(value, 10) || 0;
 }

 interface TextareaAutosizeProps
@@ -30,34 +68,46 @@ interface TextareaAutosizeProps
   * @default 1
   */
  minRows?: number;
+  /**
+   * If true, textarea will never get `overflow:hidden`
+   */
+  autoScrollbar?: boolean;
 }

 const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
  (
-    { className, onChange, maxRows, minRows = 1, style, value, ...other },
+    {
+      className,
+      onChange,
+      maxRows,
+      minRows = 1,
+      autoScrollbar,
+      style,
+      value,
+      ...other
+    }: TextareaAutosizeProps,
    ref
  ) => {
    const { current: isControlled } = useRef(value != null);
-    const inputRef = useRef<HTMLTextAreaElement | null>(null);
+    const inputRef = useRef<HTMLTextAreaElement>(null);
    const handleRef = useMemo(() => mergeRefs([inputRef, ref]), [ref]);
-    const shadowRef = useRef<HTMLTextAreaElement | null>(null);
+    const shadowRef = useRef<HTMLTextAreaElement>(null);
    const renders = useRef(0);
-    const [state, setState] = useState<any>({});
+    const [state, setState] = useState<State>({ outerHeightStyle: 0 });

    const getUpdatedState = React.useCallback(() => {
-      if (!inputRef.current || !shadowRef.current) return;
-      const input = inputRef.current;
+      const input = inputRef.current!;
      const containerWindow = ownerWindow(input);
      const computedStyle = containerWindow.getComputedStyle(input);

      // If input's width is shrunk and it's not visible, don't sync height.
      if (computedStyle.width === "0px") {
-        return;
+        return { outerHeightStyle: 0 };
      }

-      const inputShallow = shadowRef.current;
+      const inputShallow = shadowRef.current!;
      inputShallow.style.width = computedStyle.width;
-      inputShallow.value = input.value || other?.placeholder || "x";
+      inputShallow.value = input.value || other.placeholder || "x";
      if (inputShallow.value.slice(-1) === "\n") {
        // Certain fonts which overflow the line height will cause the textarea
        // to report a different scrollHeight depending on whether the last line
@@ -65,13 +115,13 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
        inputShallow.value += " ";
      }

-      const boxSizing = computedStyle["box-sizing"];
+      const boxSizing = computedStyle.boxSizing;
      const padding =
-        getStyleValue(computedStyle, "padding-bottom") +
-        getStyleValue(computedStyle, "padding-top");
+        getStyleValue(computedStyle.paddingBottom) +
+        getStyleValue(computedStyle.paddingTop);
      const border =
-        getStyleValue(computedStyle, "border-bottom-width") +
-        getStyleValue(computedStyle, "border-top-width");
+        getStyleValue(computedStyle.borderBottomWidth) +
+        getStyleValue(computedStyle.borderTopWidth);

      // The height of the inner content
      const innerHeight = inputShallow.scrollHeight - padding;
@@ -97,7 +147,7 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
      const overflow = Math.abs(outerHeight - innerHeight) <= 1;

      return { outerHeightStyle, overflow };
-    }, [maxRows, minRows, other?.placeholder]);
+    }, [maxRows, minRows, other.placeholder]);

    const syncHeight = React.useCallback(() => {
      const newState = getUpdatedState();
@@ -106,85 +156,52 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
        return;
      }

-      setState((prevState) => {
-        return updateState(prevState, newState);
-      });
+      setState((prevState) => updateState(prevState, newState, renders));
    }, [getUpdatedState]);

-    const updateState = (prevState, newState) => {
-      const { outerHeightStyle, overflow } = newState;
-      // Need a large enough difference to update the height.
-      // This prevents infinite rendering loop.
-      if (
-        renders.current < 20 &&
-        ((outerHeightStyle > 0 &&
-          Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1) ||
-          prevState.overflow !== overflow)
-      ) {
-        renders.current += 1;
-        return {
-          overflow,
-          outerHeightStyle,
-        };
-      }
-      if (process.env.NODE_ENV !== "production") {
-        if (renders.current === 20) {
-          console.error(
-            [
-              "Textarea: Too many re-renders. The layout is unstable.",
-              "TextareaAutosize limits the number of renders to prevent an infinite loop.",
-            ].join("\n")
-          );
+    useClientLayoutEffect(() => {
+      const syncHeightWithFlushSync = () => {
+        const newState = getUpdatedState();
+
+        if (isEmpty(newState)) {
+          return;
        }
-      }
-      return prevState;
-    };

-    const withFlushSync = () => {
-      const newState = getUpdatedState();
-
-      if (isEmpty(newState)) {
-        return;
-      }
-
-      // In React 18, state updates in a ResizeObserver's callback are happening after the paint which causes flickering
-      // when doing some visual updates in it. Using flushSync ensures that the dom will be painted after the states updates happen
-      // Related issue - https://github.com/facebook/react/issues/24331
-      ReactDOM.flushSync(() => {
-        setState((prevState) => {
-          return updateState(prevState, newState);
+        // In React 18, state updates in a ResizeObserver's callback are happening after
+        // the paint, this leads to an infinite rendering.
+        //
+        // Using flushSync ensures that the states is updated before the next pain.
+        // Related issue - https://github.com/facebook/react/issues/24331
+        ReactDOM.flushSync(() => {
+          setState((prevState) => updateState(prevState, newState, renders));
        });
-      });
-    };
+      };

-    React.useEffect(() => {
-      const handleResize = debounce(() => {
+      const handleResize = () => {
        renders.current = 0;
+        syncHeightWithFlushSync();
+      };

-        if (inputRef.current) {
-          withFlushSync();
-        }
-      });
-      let resizeObserver: ResizeObserver;
-
+      const debounceHandleResize = debounce(handleResize);
      const input = inputRef.current!;
      const containerWindow = ownerWindow(input);

-      containerWindow.addEventListener("resize", handleResize);
+      containerWindow.addEventListener("resize", debounceHandleResize);

+      let resizeObserver: ResizeObserver;
      if (typeof ResizeObserver !== "undefined") {
        resizeObserver = new ResizeObserver(handleResize);
        resizeObserver.observe(input);
      }

      return () => {
-        handleResize.clear();
-        containerWindow.removeEventListener("resize", handleResize);
+        debounceHandleResize.clear();
+        containerWindow.removeEventListener("resize", debounceHandleResize);
        if (resizeObserver) {
          resizeObserver.disconnect();
        }
      };
-    });
+    }, [getUpdatedState]);

    useClientLayoutEffect(() => {
      syncHeight();
@@ -194,7 +211,7 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
      renders.current = 0;
    }, [value]);

-    const handleChange = (event) => {
+    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
      renders.current = 0;

      if (!isControlled) {
@@ -218,7 +235,7 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
            height: state.outerHeightStyle,
            // Need a large enough difference to allow scrolling.
            // This prevents infinite rendering loop.
-            ...(state.overflow ? { overflow: "hidden" } : {}),
+            overflow: state.overflow && !autoScrollbar ? "hidden" : undefined,
            ...style,
          }}
          {...other}
@@ -250,12 +267,12 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
  }
 );

-function isEmpty(obj: any) {
+function isEmpty(obj: State) {
  return (
    obj === undefined ||
    obj === null ||
    Object.keys(obj).length === 0 ||
-    (obj?.outerHeightStyle === 0 && !obj?.overflow)
+    (obj.outerHeightStyle === 0 && !obj.overflow)
  );
 }

@@ -0,0 +1,19 @@
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import { useMedia } from "../useMedia";
+
+function TestComponent({ fallback }: { fallback?: boolean }) {
+  const media = useMedia("screen and (min-width: 1024px)", fallback);
+  return <div data-testid="media-id">{`${media}`}</div>;
+}
+
+describe("useMedia", () => {
+  test("Should return 'undefined' when no fallback is given", async () => {
+    render(<TestComponent />);
+    expect(screen.getByTestId("media-id").innerHTML).toEqual("undefined");
+  });
+  test("Should return fallback", async () => {
+    render(<TestComponent fallback={true} />);
+    expect(screen.getByTestId("media-id").innerHTML).toEqual("true");
+  });
+});
@@ -0,0 +1,38 @@
+import { useEffect, useState } from "react";
+
+export const noMatchMedia =
+  typeof window !== "undefined" && window.matchMedia === undefined;
+
+/**
+ * @example useMedia("screen and (min-width: 1024px)")
+ * @param media string
+ * @param fallback boolean
+ * @returns boolean | undefined
+ */
+export const useMedia = (
+  media: string,
+  fallback?: boolean
+): boolean | undefined => {
+  const [matches, setMatches] = useState(fallback);
+
+  useEffect(() => {
+    if (noMatchMedia) {
+      return;
+    }
+    const mediaQueryList = window.matchMedia(media);
+
+    setMatches(mediaQueryList.matches);
+
+    const listener = (evt: MediaQueryListEvent) => {
+      setMatches(evt.matches);
+    };
+
+    mediaQueryList.addEventListener("change", listener);
+
+    return () => {
+      mediaQueryList.removeEventListener("change", listener);
+    };
+  }, [media]);
+
+  return matches;
+};
@@ -1,2 +1,3 @@
 src/tokens.ts
-tailwind.config.js
+tailwind.config.js
+!tailwind.config.d.ts
@@ -1,5 +1,31 @@
 # @navikt/ds-tailwind

+## 5.11.2
+
+## 5.11.1
+
+## 5.11.0
+
+## 5.10.4
+
+## 5.10.3
+
+### Patch Changes
+
+- typescript types for tailwind preset ([#2486](https://github.com/navikt/aksel/pull/2486))
+
+## 5.10.2
+
+## 5.10.1
+
+## 5.10.0
+
+## 5.9.2
+
+## 5.9.1
+
+## 5.9.0
+
 ## 5.8.0

 ## 5.7.6
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tailwind",
-  "version": "5.8.0",
+  "version": "5.11.2",
  "description": "Tailwind config based on @navikt/ds-tokens",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -8,9 +8,11 @@
    "design-tokens"
  ],
  "main": "tailwind.config.js",
+  "types": "tailwind.config.d.ts",
  "license": "MIT",
  "files": [
-    "tailwind.config.js"
+    "tailwind.config.js",
+    "tailwind.config.d.ts"
  ],
  "scripts": {
    "build": "ts-node ./src",
@@ -22,11 +24,12 @@
    "directory": "@navikt/core/tailwind"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^5.8.0",
+    "@navikt/ds-tokens": "^5.11.2",
    "@types/jest": "^29.0.0",
    "color": "4.2.3",
    "jest": "^29.0.0",
    "lodash": "^4.17.21",
+    "tailwindcss": "^3.3.3",
    "ts-jest": "^29.0.0",
    "ts-node": "^10.9.1",
    "typescript": "^5.1.6"
@@ -0,0 +1,5 @@
+import type { Config } from "tailwindcss";
+
+declare const preset: Partial<Config>;
+
+export default preset;
@@ -1,5 +1,27 @@
 # @navikt/ds-tokens

+## 5.11.2
+
+## 5.11.1
+
+## 5.11.0
+
+## 5.10.4
+
+## 5.10.3
+
+## 5.10.2
+
+## 5.10.1
+
+## 5.10.0
+
+## 5.9.2
+
+## 5.9.1
+
+## 5.9.0
+
 ## 5.8.0

 ## 5.7.6
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "5.8.0",
+  "version": "5.11.2",
  "description": "Design-tokens for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -4,7 +4,7 @@ ENV NODE_ENV production

 WORKDIR /app
 COPY aksel.nav.no/website/.next/standalone ./
-COPY aksel.nav.no/website/next-logger.config.js ./
+COPY aksel.nav.no/website/config/next-logger.config.js ./

 ENV NODE_OPTIONS '-r next-logger'

@@ -19,7 +19,7 @@ Det publiserte studioet finner man på [aksel.nav.no/admin](https://aksel.nav.no

 ### Bidrag

-Branch `main` blir pusher rett til prod -> aksel.nav.no. For å utvikle nye features kan branch `next` brukes, som ved push publiseres til devmiljø https://aksel.ekstern.dev.nav.no/. Kan også publisere andre branches til dev ved bruk av workflow-dispatch.
+Branch `main` pusher rett til prod -> aksel.nav.no. For å utvikle nye features kan branch `next` brukes, som ved push publiseres til devmiljø https://aksel.ekstern.dev.nav.no/. Kan også publisere andre branches til dev ved bruk av workflow-dispatch.

 ## Kode-eksempler

@@ -12,14 +12,15 @@
    "test": "yarn workspace website test"
  },
  "workspaces": [
-    "website"
+    "website",
+    "playroom"
  ],
  "dependencies": {
-    "@navikt/aksel-icons": "^5.8.0",
-    "@navikt/ds-css": "^5.8.0",
-    "@navikt/ds-react": "^5.8.0",
-    "@navikt/ds-tailwind": "^5.8.0",
-    "@navikt/ds-tokens": "^5.8.0"
+    "@navikt/aksel-icons": "^5.11.2",
+    "@navikt/ds-css": "^5.11.2",
+    "@navikt/ds-react": "^5.11.2",
+    "@navikt/ds-tailwind": "^5.11.2",
+    "@navikt/ds-tokens": "^5.11.2"
  },
  "devDependencies": {
    "prettier-plugin-tailwindcss": "^0.2.3"
@@ -0,0 +1,5 @@
+# playroom
+
+https://github.com/seek-oss/playroom
+
+This is the playroom / code sandbox that is built as a standalone static app, and then it's added to the aksel website through an iframe.
@@ -0,0 +1,49 @@
+/**
+ * @type {import('@babel/core').TransformOptions}
+ */
+module.exports = function (api) {
+  const envName = api.env();
+  const development = envName === "development" || envName === "test";
+  return {
+    presets: [
+      [
+        "@babel/preset-env",
+        { useBuiltIns: "entry", corejs: "3.0", bugfixes: true },
+      ],
+      ["@babel/preset-typescript"],
+      ["@babel/preset-react", { development, useBuiltIns: true }],
+    ],
+    assumptions: {
+      setPublicClassFields: true,
+      privateFieldsAsProperties: true,
+      // nothing accesses `document.all`:
+      noDocumentAll: true,
+      // nothing relies on class constructors invoked without `new` throwing:
+      noClassCalls: true,
+      // nothing should be relying on tagged template strings being frozen:
+      mutableTemplateObject: true,
+      // nothing is relying on Function.prototype.length:
+      ignoreFunctionLength: true,
+      // nothing is relying on mutable re-exported bindings:
+      constantReexports: true,
+      // don't bother marking Module records non-enumerable:
+      enumerableModuleMeta: true,
+      // nothing uses [[Symbol.toPrimitive]]:
+      // (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive)
+      ignoreToPrimitiveHint: true,
+      // nothing relies on spread copying Symbol keys:  ({...{ [Symbol()]: 1 }})
+      objectRestNoSymbols: true,
+      // nothing relies on `new (() => {})` throwing:
+      noNewArrows: true,
+      // transpile object spread to assignment instead of defineProperty():
+      setSpreadProperties: true,
+      // nothing should be using custom iterator protocol:
+      skipForOfIteratorClosing: true,
+      // nothing inherits from a constructor function with explicit return value:
+      superIsCallableConstructor: true,
+      // nothing relies on CJS-transpiled namespace imports having all properties prior to module execution completing:
+      noIncompleteNsImportDetection: true,
+    },
+    babelrcRoots: ["."],
+  };
+};
@@ -0,0 +1,22 @@
+{
+  "name": "playroom",
+  "scripts": {
+    "start": "playroom start",
+    "build:playroom": "playroom build"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.2",
+    "@navikt/ds-css": "^5.9.2",
+    "@navikt/ds-react": "^5.9.2",
+    "babel-loader": "^9.1.3",
+    "babel-plugin-preval": "^5.1.0",
+    "css-loader": "^6.8.1",
+    "playroom": "^0.32.1",
+    "style-loader": "^3.3.3"
+  },
+  "dependencies": {
+    "react": "^18.0.0"
+  }
+}
@@ -0,0 +1,62 @@
+// Note: Hot module reloading for dev has been turned off for this environment
+// Why? We embed playroom in an iframe, and that iframe is loaded from the public asset folder
+// So we need to build into that public asset folder. Hence no dev mode and HMR
+// Workaround: restart the next dev server after each change to the playroom config and associated files.
+
+const path = require("path");
+
+module.exports = {
+  baseUrl: "./",
+  components: path.resolve("./src/components.ts"),
+  outputPath: path.resolve("./dist"),
+  // Optional:
+  title: "Aksel Sandbox",
+  snippets: path.resolve("./src/snippets.ts"),
+  widths: [320, 480, 768, 1024, 1280, 1440],
+  defaultWidths: [320, 1280], // will be supported if this PR is merged: https://github.com/seek-oss/playroom/pull/302
+  port: 9000,
+  frameComponent: path.resolve("./src/FrameComponent.tsx"),
+  useScope: path.resolve("./src/useScope.tsx"),
+  openBrowser: false,
+  paramType: "search", // default is 'hash'
+  iframeSandbox: "allow-scripts allow-same-origin",
+  exampleCode: `
+  <Heading>This is a sandbox!</Heading>
+  <HStack gap="10">
+    <Box> box 1</Box> <Box> box 2</Box> <Box> box 3</Box>
+  </HStack>
+  <Button>test</Button>
+  <BodyShort>This is a bodyshort</BodyShort>
+  `,
+  webpackConfig: () => ({
+    module: {
+      rules: [
+        {
+          test: /\.(js|ts|tsx)$/,
+          include: [path.resolve("./")],
+          use: [
+            {
+              loader: require.resolve("babel-loader"),
+              options: {
+                presets: [
+                  [
+                    require.resolve("@babel/preset-env"),
+                    { shippedProposals: true },
+                  ],
+                  require.resolve("@babel/preset-react"),
+                  require.resolve("@babel/preset-typescript"),
+                ],
+                plugins: [require.resolve("babel-plugin-preval")],
+              },
+            },
+          ],
+        },
+        {
+          test: /\.css$/i,
+          include: [require.resolve("@navikt/ds-css")],
+          use: ["style-loader", "css-loader"],
+        },
+      ],
+    },
+  }),
+};
@@ -0,0 +1,8 @@
+import "@navikt/ds-css";
+import * as React from "react";
+
+const FrameComponent = ({ children }: { children: React.ReactNode }) => {
+  return <div id="sandbox-wrapper">{children}</div>;
+};
+
+export default FrameComponent;
@@ -0,0 +1,2 @@
+export * from "@navikt/aksel-icons";
+export * from "@navikt/ds-react";
@@ -0,0 +1,29 @@
+const snippets = [
+  {
+    group: "Templates",
+    name: "Single Component",
+    code: `<Button variant="primary">Button</Button>`,
+  },
+  {
+    group: "Templates",
+    name: "Multiple Components",
+    code: ` <Button variant="primary">First</Button>
+  <Button>Second</Button>`,
+  },
+  {
+    group: "Templates",
+    name: "Component with state",
+    code: `{
+  (() => {
+    const [count, setCount] = React.useState(0);
+
+    return (
+      <Button variant="primary" onClick={() => setCount(count + 1)}>Count: {count}</Button>
+    )
+  })()
+}
+    `,
+  },
+];
+
+export default snippets;
@@ -0,0 +1,2 @@
+public/sandbox
+test-results/
@@ -1,8 +1,7 @@
-import type { StorybookConfig } from "@storybook/nextjs";
-
-import { readFileSync } from "fs";
-import { join, dirname } from "path";
 import { loadCsf } from "@storybook/csf-tools";
+import type { StorybookConfig } from "@storybook/nextjs";
+import { readFileSync } from "fs";
+import { dirname, join, resolve } from "path";

 /**
 * This function is used to resolve the absolute path of a package.
@@ -66,5 +65,74 @@ const config: StorybookConfig = {
  docs: {
    autodocs: "tag",
  },
+  webpackFinal: async (sbConfig: any) => {
+    if (!sbConfig.resolve.alias) {
+      return sbConfig;
+    }
+    // Add path aliases
+    sbConfig.resolve.alias["@/sb-util"] = resolve(__dirname, "./utils.tsx");
+    sbConfig.resolve.alias["@/types"] = resolve(
+      __dirname,
+      "../components/types/index.ts"
+    );
+    sbConfig.resolve.alias["@/sanity-block"] = resolve(
+      __dirname,
+      "../components/website-modules/SanityBlockContent.tsx"
+    );
+    sbConfig.resolve.alias["@/hooks"] = resolve(
+      __dirname,
+      "../components/hooks/"
+    );
+    sbConfig.resolve.alias["@/logging"] = resolve(
+      __dirname,
+      "../components/logging/index.ts"
+    );
+    sbConfig.resolve.alias["@/utils"] = resolve(
+      __dirname,
+      "../components/utils/index.ts"
+    );
+    sbConfig.resolve.alias["@/utils"] = resolve(
+      __dirname,
+      "../components/utils/index.ts"
+    );
+    sbConfig.resolve.alias["@/layout"] = resolve(
+      __dirname,
+      "../components/layout/"
+    );
+    sbConfig.resolve.alias["@/assets"] = resolve(
+      __dirname,
+      "../components/assets/"
+    );
+    sbConfig.resolve.alias["@/web"] = resolve(
+      __dirname,
+      "../components/website-modules/"
+    );
+    sbConfig.resolve.alias["@/cms"] = resolve(
+      __dirname,
+      "../components/sanity-modules/"
+    );
+    sbConfig.resolve.alias["@/error-boundary"] = resolve(
+      __dirname,
+      "../components/website-modules/ErrorBoundary.tsx"
+    );
+    sbConfig.resolve.alias["@/sanity/config"] = resolve(
+      __dirname,
+      "../sanity/config.ts"
+    );
+    sbConfig.resolve.alias["@/sanity/client.server"] = resolve(
+      __dirname,
+      "../sanity/interface/client.server.js"
+    );
+    sbConfig.resolve.alias["@/sanity/interface"] = resolve(
+      __dirname,
+      "../sanity/interface/interface.ts"
+    );
+    sbConfig.resolve.alias["@/sanity/queries"] = resolve(
+      __dirname,
+      "../sanity/interface/queries.js"
+    );
+
+    return sbConfig;
+  },
 };
 export default config;
@@ -1,73 +0,0 @@
-import { getClient } from "@/sanity/client.server";
-import { useLiveQuery, LiveQueryProvider } from "next-sanity/preview";
-import { useMemo, ComponentType } from "react";
-import dynamic from "next/dynamic";
-import { useCheckAuth } from "components/website-modules/utils/useCheckAuth";
-
-export const PreviewBanner = dynamic(
-  () => import("components/website-modules/PreviewBanner"),
-  {
-    ssr: false,
-  }
-);
-
-function PreviewProvider({ children }: { children: React.ReactNode }) {
-  const client = useMemo(() => {
-    return getClient().withConfig({
-      useCdn: false,
-      ignoreBrowserTokenWarning: true,
-      perspective: "previewDrafts",
-    });
-  }, []);
-  return <LiveQueryProvider client={client}>{children}</LiveQueryProvider>;
-}
-
-function LiveQuery({
-  comp: Comp,
-  query,
-  params,
-  props,
-  validUser,
-}: {
-  comp: ComponentType;
-  query: string;
-  props: any;
-  params?: any;
-  validUser: boolean;
-}) {
-  const [data, loading] = useLiveQuery(props, query, params);
-
-  return (
-    <>
-      <PreviewBanner loading={loading} validUser={validUser} />
-      <Comp {...props} {...data} />
-    </>
-  );
-}
-
-const WithPreview = ({
-  comp,
-  query,
-  params,
-  props,
-}: {
-  comp;
-  query: string;
-  props: any;
-  params?: any;
-}) => {
-  const validUser = useCheckAuth();
-  return (
-    <PreviewProvider>
-      <LiveQuery
-        props={props}
-        query={query}
-        params={params}
-        comp={comp}
-        validUser={validUser}
-      />
-    </PreviewProvider>
-  );
-};
-
-export default WithPreview;
@@ -199,3 +199,20 @@ export const StorybookIcon = ({ ...props }) => (
    </g>
  </svg>
 );
+
+export const CodeSandboxLogo = ({ ...props }) => (
+  <svg
+    width="24"
+    height="24"
+    fill="none"
+    viewBox="8 3 24 24"
+    aria-hidden="true"
+    focusable="false"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M20.54 25a.681.681 0 00.158-.074l6.174-3.69c.734-.438 1.128-.885 1.128-2.084v-6.444c0-.248-.016-.447-.063-.629l-7.397 4.434zm-8.477-12.921l7.397 4.434V25a.514.514 0 01-.15-.074l-6.182-3.69c-.726-.438-1.128-.885-1.128-2.084v-6.444c0-.248.016-.447.063-.629zM20.004 7c.443 0 .9.143 1.359.406l.068.04 5.567 3.326c.155.088.284.177.394.282l.04.04-7.428 4.426-7.436-4.425c.11-.109.233-.198.378-.286l.063-.037 4.07-2.442h.002l1.488-.883c.434-.262.868-.415 1.296-.443l.071-.003z"
+    ></path>
+  </svg>
+);
@@ -1,6 +1,6 @@
 import React from "react";

-const Logo = (props) => (
+const AkselLogo = (props) => (
  <svg
    width="119"
    height="26"
@@ -43,4 +43,4 @@ const Logo = (props) => (
  </svg>
 );

-export default Logo;
+export default AkselLogo;
@@ -1 +0,0 @@
-export * from "./Icons";