Version Packages (#2071 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
✨ Oppdaterte shadow-tokens (#2041 )
2026-10-14 09:42:02 +00:00 · 2023-06-22 15:23:42 +02:00 · 2023-06-22 15:12:42 +02:00 · 2023-06-22 15:10:03 +02:00 · 2023-06-21 17:10:43 +02:00 · 2023-06-21 13:48:45 +02:00
325 changed files with 9678 additions and 5549 deletions
@@ -0,0 +1,17 @@
+### :memo: PR Checklist
+
+<!-- Remove non-relevant fields -->
+
+- [ ] :sparkles: New component? Add CSS-mappings to `@navikt/core/css/config/_mappings.js`.
+
+- [ ] :wastebasket: Are you deprecating a CSS class? (are you removing the last known reference to a CSS class?). Add it to `@navikt/aksel-stylelint/src/deprecations.ts` with a suitable description.
+
+- [ ] :balance_scale: Is the feature/component/code sufficiently complex to warrant tests? Add some unit-tests :test_tube:
+
+- [ ] :balance_scale: Does the feature/component add some complex user-interactions? Consider adding some [interaction-tests with storybook](https://storybook.js.org/docs/react/writing-tests/interaction-testing) :test_tube:
+
+- [ ] :boom: Are there breaking changes? Consider adding a codemod for easier migration.
+
+- [ ] :test_tube: Are all variations and cases shown in the storybook stories? Stories are used for [visual regression testing](https://www.chromatic.com/docs/), so make sure they are complete.
+
+- [ ] Run `yarn changeset` for version and changelog generation
@@ -13,7 +13,7 @@ jobs:
  playwright:
    runs-on: ubuntu-latest
    container:
-      image: mcr.microsoft.com/playwright:v1.33.0-focal
+      image: mcr.microsoft.com/playwright:v1.35.1-jammy
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
@@ -28,6 +28,10 @@ jobs:
          node-version: 16.13.0
          cache: yarn

+      - uses: denoland/setup-deno@v1
+        with:
+          deno-version: v1.x
+
      - name: Restore cache
        uses: actions/cache@v3
        with:
@@ -14,7 +14,7 @@ jobs:
    name: Smoketest Aksel
    runs-on: ubuntu-latest
    container:
-      image: mcr.microsoft.com/playwright:v1.33.0-focal
+      image: mcr.microsoft.com/playwright:v1.35.1-jammy
    steps:
      - uses: actions/setup-node@v3
        with:
@@ -150,4 +150,5 @@ playwright-report/
 /test-results/
 backup-*.tar.gz
 sitemap-urls.json
-*.tar.gz
+*.tar.gz
+searchindex.json
@@ -1,5 +1,34 @@
 # @navikt/aksel-icons

+## 4.4.0
+
+## 4.3.0
+
+## 4.2.0
+
+## 4.1.7
+
+## 4.1.6
+
+## 4.1.5
+
+### Patch Changes
+
+- [#2054](https://github.com/navikt/aksel/pull/2054) [`8f16d1571`](https://github.com/navikt/aksel/commit/8f16d1571ec7cf452c09618a9a918ee2a634c75a) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: Nye ikoner
+
+  - ChevronRightLast
+  - ChevronLeftLast
+
+## 4.1.4
+
+## 4.1.3
+
+## 4.1.2
+
+## 4.1.1
+
+## 4.1.0
+
 ## 4.0.0

 ## 3.4.2
@@ -15,5 +15,5 @@ keywords:
  - Sammenføye
  - Kildekontroll
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 24.05.2023
 created_at: 07.03.2023
@@ -5,5 +5,5 @@ keywords:
  - left
  - venstre
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 14.06.2023
 created_at: 07.03.2023
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 6.25C7.5 5.83579 7.16421 5.5 6.75 5.5C6.33579 5.5 6 5.83579 6 6.25V17.75C6 18.1642 6.33579 18.5 6.75 18.5C7.16421 18.5 7.5 18.1642 7.5 17.75V6.25ZM17.7803 7.03033C18.0732 6.73744 18.0732 6.26256 17.7803 5.96967C17.4874 5.67678 17.0126 5.67678 16.7197 5.96967L11.2197 11.4697C11.079 11.6103 11 11.8011 11 12C11 12.1989 11.079 12.3897 11.2197 12.5303L16.7197 18.0303C17.0126 18.3232 17.4874 18.3232 17.7803 18.0303C18.0732 17.7374 18.0732 17.2626 17.7803 16.9697L12.8107 12L17.7803 7.03033Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,12 @@
+name: ChevronLeftFirst
+category: Arrows
+sub_category: Chevron
+keywords:
+  - left
+  - venstre
+  - side
+  - first
+  - først
+variant: Stroke
+updated_at: 15.06.2023
+created_at: 15.06.2023
@@ -6,5 +6,5 @@ keywords:
  - høyre
  - side
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 09.06.2023
 created_at: 07.03.2023
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 6.25C18 5.83579 17.6642 5.5 17.25 5.5C16.8358 5.5 16.5 5.83579 16.5 6.25V17.75C16.5 18.1642 16.8358 18.5 17.25 18.5C17.6642 18.5 18 18.1642 18 17.75V6.25ZM7.28033 6.21967C6.98744 5.92678 6.51256 5.92678 6.21967 6.21967C5.92678 6.51256 5.92678 6.98744 6.21967 7.28033L11.1893 12.25L6.21967 17.2197C5.92678 17.5126 5.92678 17.9874 6.21967 18.2803C6.51256 18.5732 6.98744 18.5732 7.28033 18.2803L12.7803 12.7803C13.0732 12.4874 13.0732 12.0126 12.7803 11.7197L7.28033 6.21967Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,10 @@
+name: ChevronRightLast
+category: Arrows
+sub_category: Chevron
+keywords:
+  - right
+  - høyre
+  - side
+variant: Stroke
+updated_at: 15.06.2023
+created_at: 15.06.2023
@@ -15,5 +15,5 @@ keywords:
  - markup-språk
  - kildekode
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 24.05.2023
 created_at: 07.03.2023
@@ -13,5 +13,5 @@ keywords:
  - dra og slippe
  - skifte
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 26.05.2023
 created_at: 07.03.2023
@@ -23,5 +23,5 @@ keywords:
  - milepæler
  - hendelser
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 31.05.2023
 created_at: 07.03.2023
@@ -7,5 +7,5 @@ keywords:
  - delete
  - slett
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 24.05.2023
 created_at: 07.03.2023
@@ -6,5 +6,5 @@ keywords:
  - uploading
  - send
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 08.06.2023
 created_at: 07.03.2023
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-icons",
-  "version": "4.0.0",
+  "version": "4.4.0",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -1,5 +1,44 @@
 # @navikt/aksel-stylelint

+## 4.4.0
+
+## 4.3.0
+
+## 4.2.0
+
+### Minor Changes
+
+- [#2048](https://github.com/navikt/aksel/pull/2048) [`b1625ba38`](https://github.com/navikt/aksel/commit/b1625ba3882b430d678d0623922d7fb56aa724b3) Thanks [@HalvorHaugan](https://github.com/HalvorHaugan)! - Oppdatert Chat
+
+  - :sparkles: Ny prop `size` som kan settes til "small" for en mer kompakt layout
+  - :sparkles: Ny prop `variant` som erstatter `backgroundColor` og `avatarBgColor`
+  - :sparkles: `avatar` er nå valgfritt
+  - :wheelchair: Forbedret UU
+  - :lipstick: Oppdatert utseende
+
+## 4.1.7
+
+## 4.1.6
+
+## 4.1.5
+
+## 4.1.4
+
+## 4.1.3
+
+## 4.1.2
+
+## 4.1.1
+
+## 4.1.0
+
+### Minor Changes
+
+- [#2035](https://github.com/navikt/aksel/pull/2035) [`7b42f536a`](https://github.com/navikt/aksel/commit/7b42f536aa90c1b5dbe2b19f1bbe292701546420) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: Oppdatert Chips
+
+  - Toggle Chips har nå varianter: neutral og action
+  - Toggle Chips har nå en ny prop: `checkmark` som slår av/på checkmark ved selected-state
+
 ## 4.0.0

 ## 3.4.2
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-stylelint",
-  "version": "4.0.0",
+  "version": "4.4.0",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
  "repository": {
@@ -35,8 +35,8 @@
    "dev": "yarn watch:lint"
  },
  "devDependencies": {
-    "@navikt/ds-css": "^4.0.0",
-    "@navikt/ds-tokens": "^4.0.0",
+    "@navikt/ds-css": "^4.4.0",
+    "@navikt/ds-tokens": "^4.4.0",
    "@types/jest": "^29.0.0",
    "concurrently": "7.2.1",
    "copyfiles": "2.4.1",
@@ -20,4 +20,9 @@ export const deprecations: DeprecatedList = [
      "Class were moved to '@navikt/ds-css' and renamed with 'navds'-prefix in v4.0.0. Docs: https://aksel.nav.no/grunnleggende/kode/endringslogg#h728704adeb59.",
    deprecatePrefix: true,
  },
+  {
+    classes: ["navds-chips--icon-left"],
+    message:
+      "In v4.1.0 Chips. Toggle no longer handles special alignment for checkmark-icon, thus removing this class",
+  },
 ];
@@ -1,5 +1,82 @@
 # @navikt/aksel

+## 4.4.0
+
+### Patch Changes
+
+- Updated dependencies [[`de3626958`](https://github.com/navikt/aksel/commit/de3626958266d1271840fa341c36500ab66b573d)]:
+  - @navikt/ds-css@4.4.0
+
+## 4.3.0
+
+### Patch Changes
+
+- Updated dependencies [[`99c08b8e4`](https://github.com/navikt/aksel/commit/99c08b8e4ab33acd20a21719986452652ffe3c57), [`d39ed906c`](https://github.com/navikt/aksel/commit/d39ed906c61149ac823ebab2e8974a105e592163)]:
+  - @navikt/ds-css@4.3.0
+
+## 4.2.0
+
+### Patch Changes
+
+- Updated dependencies [[`b1625ba38`](https://github.com/navikt/aksel/commit/b1625ba3882b430d678d0623922d7fb56aa724b3)]:
+  - @navikt/ds-css@4.2.0
+
+## 4.1.7
+
+### Patch Changes
+
+- Updated dependencies [[`42b5af64a`](https://github.com/navikt/aksel/commit/42b5af64ab35d0f2d126d41f8fc3e61fe2834b36)]:
+  - @navikt/ds-css@4.1.7
+
+## 4.1.6
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@4.1.6
+
+## 4.1.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@4.1.5
+
+## 4.1.4
+
+### Patch Changes
+
+- Updated dependencies [[`e06096105`](https://github.com/navikt/aksel/commit/e060961050c75ec815e5c125001f1ff99106e298)]:
+  - @navikt/ds-css@4.1.4
+
+## 4.1.3
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@4.1.3
+
+## 4.1.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@4.1.2
+
+## 4.1.1
+
+### Patch Changes
+
+- Updated dependencies [[`91343563c`](https://github.com/navikt/aksel/commit/91343563c916a554d8ade5401c28ab4c3b3e26af)]:
+  - @navikt/ds-css@4.1.1
+
+## 4.1.0
+
+### Patch Changes
+
+- Updated dependencies [[`7b42f536a`](https://github.com/navikt/aksel/commit/7b42f536aa90c1b5dbe2b19f1bbe292701546420), [`c028f36e2`](https://github.com/navikt/aksel/commit/c028f36e2bc58223ebf8b655980dde7eafb30add), [`b2f796d68`](https://github.com/navikt/aksel/commit/b2f796d681f1c1d76d26d1fd743268c8c618a854), [`db8c38a09`](https://github.com/navikt/aksel/commit/db8c38a094cd183db54aebecb62d5b223920a040)]:
+  - @navikt/ds-css@4.1.0
+
 ## 4.0.0

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

+## 4.4.0
+
+### Minor Changes
+
+- [#2041](https://github.com/navikt/aksel/pull/2041) [`de3626958`](https://github.com/navikt/aksel/commit/de3626958266d1271840fa341c36500ab66b573d) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Shadow-tokens er oppdatert til mer tydeligere varianter
+
+## 4.3.0
+
+### Minor Changes
+
+- [#2069](https://github.com/navikt/aksel/pull/2069) [`99c08b8e4`](https://github.com/navikt/aksel/commit/99c08b8e4ab33acd20a21719986452652ffe3c57) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Popover og Helptext har nå luft mot siden av skjerm på mindre flater
+
+### Patch Changes
+
+- [#2067](https://github.com/navikt/aksel/pull/2067) [`d39ed906c`](https://github.com/navikt/aksel/commit/d39ed906c61149ac823ebab2e8974a105e592163) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Nested ExpansionCard fikk styling fra parent
+
+## 4.2.0
+
+### Minor Changes
+
+- [#2048](https://github.com/navikt/aksel/pull/2048) [`b1625ba38`](https://github.com/navikt/aksel/commit/b1625ba3882b430d678d0623922d7fb56aa724b3) Thanks [@HalvorHaugan](https://github.com/HalvorHaugan)! - Oppdatert Chat
+
+  - :sparkles: Ny prop `size` som kan settes til "small" for en mer kompakt layout
+  - :sparkles: Ny prop `variant` som erstatter `backgroundColor` og `avatarBgColor`
+  - :sparkles: `avatar` er nå valgfritt
+  - :wheelchair: Forbedret UU
+  - :lipstick: Oppdatert utseende
+
+## 4.1.7
+
+### Patch Changes
+
+- [`42b5af64a`](https://github.com/navikt/aksel/commit/42b5af64ab35d0f2d126d41f8fc3e61fe2834b36) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset jsdom-problemer ved rendring av Timeline
+
+## 4.1.6
+
+## 4.1.5
+
+## 4.1.4
+
+### Patch Changes
+
+- [#2049](https://github.com/navikt/aksel/pull/2049) [`e06096105`](https://github.com/navikt/aksel/commit/e060961050c75ec815e5c125001f1ff99106e298) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Subtle-description på form-elementer brakk bruk av Readmore
+
+## 4.1.3
+
+## 4.1.2
+
+## 4.1.1
+
+### Patch Changes
+
+- [`91343563c`](https://github.com/navikt/aksel/commit/91343563c916a554d8ade5401c28ab4c3b3e26af) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Fikset markering av tekst i skeleton.
+
+## 4.1.0
+
+### Minor Changes
+
+- [#2035](https://github.com/navikt/aksel/pull/2035) [`7b42f536a`](https://github.com/navikt/aksel/commit/7b42f536aa90c1b5dbe2b19f1bbe292701546420) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: Oppdatert Chips
+
+  - Toggle Chips har nå varianter: neutral og action
+  - Toggle Chips har nå en ny prop: `checkmark` som slår av/på checkmark ved selected-state
+
+- [#2036](https://github.com/navikt/aksel/pull/2036) [`b2f796d68`](https://github.com/navikt/aksel/commit/b2f796d681f1c1d76d26d1fd743268c8c618a854) Thanks [@KenAJoh](https://github.com/KenAJoh)! - - Oppdatert text-subtle og icon-subtle tokens til 700-skala (tidligere 600).
+
+  - Icon-subtle bruker nå grayalpha.
+  - Alle description-felter på fieldsets har nå text-subtle som farge.
+
+- [#1821](https://github.com/navikt/aksel/pull/1821) [`db8c38a09`](https://github.com/navikt/aksel/commit/db8c38a094cd183db54aebecb62d5b223920a040) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: Ny komponent Skeleton!
+
+  - varianter: text, circle, rounded og rectangle
+
+### Patch Changes
+
+- [#2027](https://github.com/navikt/aksel/pull/2027) [`c028f36e2`](https://github.com/navikt/aksel/commit/c028f36e2bc58223ebf8b655980dde7eafb30add) Thanks [@JulianNymark](https://github.com/JulianNymark)! - :sparkles: La til `indent`-prop på Accordion
+
 ## 4.0.0

 ### Major Changes
@@ -141,11 +141,16 @@
 /*************************
 * Content *
 *************************/
+
 .navds-accordion__content {
-  padding: 0 var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-11);
+  padding: 0 var(--a-spacing-3) var(--a-spacing-5);
  animation: fadeAccordionContent 250ms ease;
 }

+.navds-accordion--indent > :where(.navds-accordion__item) > :where(.navds-accordion__content) {
+  padding: 0 var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-11);
+}
+
 .navds-accordion__content--closed {
  display: none;
 }
@@ -1,14 +1,12 @@
 .navds-chat {
  display: flex;
  align-items: flex-end;
-  gap: var(--a-spacing-4);
-  padding-right: var(--a-spacing-16);
+  gap: var(--a-spacing-3);
+  max-width: 40.75rem;
 }

 .navds-chat--right {
  flex-direction: row-reverse;
-  padding-right: 0;
-  padding-left: var(--a-spacing-16);
 }

 .navds-chat__bubble-wrapper {
@@ -26,15 +24,19 @@

 .navds-chat__avatar {
  align-items: center;
-  background: var(--ac-chat-avatar-bg, var(--a-bg-subtle));
-  color: var(--ac-chat-avatar-color, var(--a-text-default));
+  box-shadow: var(--a-shadow-xsmall);
+  background-color: var(--ac-chat-avatar-bg, var(--a-surface-neutral-subtle));
+  border: 1px solid var(--ac-chat-border-color, var(--a-border-subtle));
  border-radius: var(--a-border-radius-full);
+  color: var(--ac-chat-avatar-color, var(--a-text-default));
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  overflow: hidden;
-  height: 3rem;
-  width: 3rem;
+  height: 2.5rem;
+  width: 2.5rem;
+  font-size: 1.06rem;
+  letter-spacing: 0.024rem;
 }

 .navds-chat__avatar svg {
@@ -44,11 +46,11 @@
 }

 .navds-chat__bubble {
-  padding: 1rem;
-  box-shadow: var(--a-shadow-small);
+  padding: var(--a-spacing-4);
+  box-shadow: var(--a-shadow-xsmall);
  width: fit-content;
-  max-width: 37.5rem;
-  background-color: var(--ac-chat-bubble-bg, var(--a-bg-subtle));
+  background-color: var(--ac-chat-bubble-bg, var(--a-surface-neutral-subtle));
+  border: 1px solid var(--ac-chat-border-color, var(--a-border-subtle));
  border-radius: var(--a-border-radius-xlarge);
  border-bottom-left-radius: 2px;
  display: flex;
@@ -61,11 +63,27 @@
  border-bottom-right-radius: 2px;
 }

+.navds-chat--small .navds-chat__bubble {
+  padding: var(--a-spacing-3);
+}
+
+.navds-chat--info .navds-chat__bubble,
+.navds-chat--info .navds-chat__avatar {
+  background-color: var(--a-surface-info-subtle);
+}
+
+.navds-chat--neutral .navds-chat__bubble,
+.navds-chat--neutral .navds-chat__avatar {
+  background-color: var(--a-surface-default);
+}
+
 .navds-chat__top-text {
  color: var(--ac-chat-top-text, var(--a-text-default));
  display: flex;
  gap: var(--a-spacing-2);
  align-items: baseline;
+  font-weight: normal;
+  margin: 0;
 }

 .navds-chat--right .navds-chat__top-text {
@@ -87,7 +105,3 @@
 .navds-chat--right .navds-chat__top-text--left {
  align-self: flex-start;
 }
-
-.navds-chat__name {
-  font-weight: var(--a-font-weight-bold);
-}
@@ -20,7 +20,7 @@
  cursor: pointer;
  align-items: center;
  justify-content: center;
-  gap: var(--a-spacing-05);
+  gap: var(--a-spacing-1);
  margin: 0;
  padding: 0 var(--a-spacing-3);
  text-decoration: none;
@@ -34,14 +34,14 @@
 }

 .navds-chips__toggle {
-  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-border, var(--a-border-default));
-  background-color: var(--ac-chip-toggle-bg, var(--a-surface-neutral-subtle));
+  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-border, var(--a-border-subtle));
+  background-color: var(--ac-chip-toggle-bg, var(--a-surface-action-subtle));
  color: var(--ac-chip-toggle-text, var(--a-text-default));
 }

 .navds-chips__toggle:hover {
-  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-hover-border, var(--a-border-strong));
-  background-color: var(--ac-chip-toggle-hover-bg, var(--a-surface-neutral-subtle-hover));
+  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-hover-border, var(--a-border-subtle-hover));
+  background-color: var(--ac-chip-toggle-hover-bg, var(--a-surface-action-subtle-hover));
 }

 .navds-chips__toggle[aria-pressed="true"] {
@@ -54,6 +54,28 @@
  background-color: var(--ac-chip-toggle-pressed-hover-bg, var(--a-surface-action-selected-hover));
 }

+/* Toggle variant neutral */
+.navds-chips__toggle--neutral {
+  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-neutral-border, var(--a-border-subtle));
+  background-color: var(--ac-chip-toggle-neutral-bg, var(--a-surface-neutral-subtle));
+  color: var(--ac-chip-toggle-neutral-text, var(--a-text-default));
+}
+
+.navds-chips__toggle--neutral:hover {
+  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-neutral-hover-border, var(--a-border-subtle-hover));
+  background-color: var(--ac-chip-toggle-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
+}
+
+.navds-chips__toggle--neutral[aria-pressed="true"] {
+  box-shadow: none;
+  background-color: var(--ac-chip-toggle-neutral-pressed-bg, var(--a-surface-neutral-selected));
+  color: var(--ac-chip-toggle-neutral-pressed-text, var(--a-text-on-neutral));
+}
+
+.navds-chips__toggle--neutral[aria-pressed="true"]:hover {
+  background-color: var(--ac-chip-toggle-neutral-pressed-hover-bg, var(--a-surface-neutral-selected));
+}
+
 .navds-chips__toggle:focus-visible {
  box-shadow: 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
 }
@@ -99,19 +121,6 @@
  border-radius: var(--a-border-radius-full);
 }

-.navds-chips__toggle-icon {
-  width: 1.5rem;
-  height: 1.5rem;
-  display: grid;
-  place-items: center;
-  border-radius: var(--a-border-radius-full);
-}
-
-.navds-chips--small .navds-chips__toggle-icon {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
 .navds-chips--small .navds-chips__removable-icon {
  width: 1.25rem;
  height: 1.25rem;
@@ -161,7 +170,3 @@
 .navds-chips--small .navds-chips--icon-right {
  padding-right: var(--a-spacing-05);
 }
-
-.navds-chips--small .navds-chips--icon-left {
-  padding-left: 0.375rem;
-}
@@ -127,6 +127,7 @@ const StyleMappings = {
    { component: "ReadMore", main: "read-more.css", dependencies: [typoCss] },
    { component: "Search", main: formCss, dependencies: [typoCss] },
    { component: "Select", main: formCss, dependencies: [typoCss] },
+    { component: "Skeleton", main: "skeleton.css", dependencies: [] },
    { component: "Stepper", main: "stepper.css", dependencies: [typoCss] },
    { component: "Switch", main: formCss, dependencies: [typoCss] },
    { component: "Table", main: "table.css", dependencies: [typoCss] },
@@ -278,3 +278,7 @@
  visibility: hidden;
  pointer-events: none;
 }
+
+.navds-date__popover:where(.navds-popover) {
+  border: none;
+}
@@ -77,7 +77,7 @@
  margin-top: var(--a-spacing-1);
 }

-.navds-expansioncard--small :where(.navds-expansioncard__title--small) {
+.navds-expansioncard--small > :where(.navds-expansioncard__header) :where(.navds-expansioncard__title--small) {
  margin-top: var(--a-spacing-05);
 }

@@ -115,7 +115,7 @@
  transition: transform 150ms ease-in-out;
 }

-.navds-expansioncard--open :where(.navds-expansioncard__header-chevron) {
+.navds-expansioncard--open > :where(.navds-expansioncard__header) :where(.navds-expansioncard__header-chevron) {
  transform: translateY(0) rotate(180deg);
 }

@@ -135,7 +135,10 @@
  }
 }

-.navds-expansioncard--open :where(.navds-expansioncard__header-button):hover :where(.navds-expansioncard__header-chevron) {
+.navds-expansioncard--open
+  > :where(.navds-expansioncard__header)
+  > :where(.navds-expansioncard__header-button):hover
+  :where(.navds-expansioncard__header-chevron) {
  transform: translateY(-1px) rotate(180deg);
 }

@@ -1,3 +1,7 @@
+[data-theme="dark"] {
+  --ac-form-description: var(--a-text-on-inverted);
+}
+
 .navds-fieldset {
  margin: 0;
  padding: 0;
@@ -9,6 +13,10 @@
  margin-top: var(--a-spacing-2);
 }

+.navds-fieldset__description {
+  color: var(--ac-form-description, var(--a-text-subtle));
+}
+
 .navds-fieldset > .navds-fieldset__description:not(:empty) {
  margin-top: 0.125rem;
 }
@@ -1,3 +1,7 @@
+[data-theme="dark"] {
+  --ac-form-description: var(--a-text-on-inverted);
+}
+
 .navds-form-field {
  display: grid;
  justify-items: start;
@@ -6,6 +10,7 @@

 .navds-form-field__description {
  margin-top: -6px;
+  color: var(--ac-form-description, var(--a-text-subtle));
 }

 .navds-form-field .navds-error-message,
@@ -33,7 +33,7 @@

 .navds-help-text__popover.navds-popover {
  background-color: var(--ac-help-text-popover-bg, var(--a-surface-info-subtle));
-  max-width: 65ch;
+  max-width: min(65ch, calc(100vw - 1.5rem));

  --ac-popover-border: var(--a-border-info);
 }
@@ -28,6 +28,7 @@
@import "panel.css";
@import "link-panel.css";
@import "read-more.css";
+@import "skeleton.css";
@import "stepper.css";
@import "table.css";
@import "tabs.css";
@@ -13,7 +13,7 @@
 }

 .navds-link-panel:hover {
-  box-shadow: var(--a-shadow-medium);
+  box-shadow: var(--a-shadow-small);
  border-color: var(--ac-link-panel-hover-border, var(--a-border-action));
 }

@@ -9,6 +9,7 @@
  position: relative;
  overflow: auto;
  max-height: 100%;
+  box-shadow: var(--a-shadow-xlarge);
 }

 .navds-modal__content {
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "4.0.0",
+  "version": "4.4.0",
  "description": "CSS for NAV Designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -27,7 +27,7 @@
    "css:get-version": "node config/get-version.js"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^4.0.0",
+    "@navikt/ds-tokens": "^4.4.0",
    "cssnano": "6.0.0",
    "fast-glob": "3.2.11",
    "lodash": "4.17.21",
@@ -5,6 +5,7 @@
  border: 1px solid;
  border-color: var(--ac-popover-border, var(--a-border-default));
  border-radius: var(--a-border-radius-medium);
+  max-width: calc(100vw - var(--a-spacing-6));
 }

 .navds-popover__content {
@@ -41,6 +41,7 @@
  border-left: 2px solid var(--ac-read-more-line, var(--a-border-divider));
  margin-left: 13px;
  padding-left: 13px;
+  color: var(--a-text-default);
 }

 .navds-read-more--small .navds-read-more__content {
@@ -0,0 +1,56 @@
+.navds-skeleton {
+  display: block;
+  background-color: var(--ac-skeleton-bg, var(--a-surface-neutral-moderate));
+  height: 1.3em;
+  animation: akselSkeletonAnimation 0.8s linear infinite alternate;
+  pointer-events: none;
+}
+
+.navds-skeleton--has-children {
+  color: transparent;
+}
+
+.navds-skeleton--has-children > * {
+  visibility: hidden;
+}
+
+.navds-skeleton--has-children.navds-skeleton--no-height {
+  height: auto;
+}
+
+.navds-skeleton--has-children.navds-skeleton--no-width {
+  width: fit-content;
+}
+
+.navds-skeleton--text {
+  height: auto;
+  transform-origin: 0 55%;
+  transform: scale(1, 0.6);
+  border-radius: var(--a-border-radius-medium);
+}
+
+.navds-skeleton--text:empty::before {
+  content: "\00a0";
+}
+
+.navds-skeleton--circle {
+  border-radius: var(--a-border-radius-full);
+}
+
+.navds-skeleton--rectangle {
+  border-radius: 0;
+}
+
+.navds-skeleton--rounded {
+  border-radius: var(--a-border-radius-xlarge);
+}
+
+@keyframes akselSkeletonAnimation {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0.4;
+  }
+}
@@ -61,6 +61,10 @@
  list-style-type: none;
 }

+.navds-timeline__row-periods:focus {
+  outline: none;
+}
+
 .navds-timeline__period {
  height: 100%;
  border-radius: var(--a-border-radius-full);
@@ -80,20 +80,29 @@
    "--ac-button-tertiary-neutral-active-hover-bg": "--a-surface-neutral-active"
  },
  "chat": {
-    "--ac-chat-avatar-bg": "--a-bg-subtle",
+    "--ac-chat-border-color": "--a-border-subtle",
+    "--ac-chat-avatar-bg": "--a-surface-neutral-subtle",
    "--ac-chat-avatar-color": "--a-text-default",
-    "--ac-chat-bubble-bg": "--a-bg-subtle",
+    "--ac-chat-bubble-bg": "--a-surface-neutral-subtle",
    "--ac-chat-top-text": "--a-text-default"
  },
  "chips": {
-    "--ac-chip-toggle-border": "--a-border-default",
-    "--ac-chip-toggle-bg": "--a-surface-neutral-subtle",
+    "--ac-chip-toggle-border": "--a-border-subtle",
+    "--ac-chip-toggle-bg": "--a-surface-action-subtle",
    "--ac-chip-toggle-text": "--a-text-default",
-    "--ac-chip-toggle-hover-border": "--a-border-strong",
-    "--ac-chip-toggle-hover-bg": "--a-surface-neutral-subtle-hover",
+    "--ac-chip-toggle-hover-border": "--a-border-subtle-hover",
+    "--ac-chip-toggle-hover-bg": "--a-surface-action-subtle-hover",
    "--ac-chip-toggle-pressed-bg": "--a-surface-action-selected",
    "--ac-chip-toggle-pressed-text": "--a-text-on-action",
    "--ac-chip-toggle-pressed-hover-bg": "--a-surface-action-selected-hover",
+    "--ac-chip-toggle-neutral-border": "--a-border-subtle",
+    "--ac-chip-toggle-neutral-bg": "--a-surface-neutral-subtle",
+    "--ac-chip-toggle-neutral-text": "--a-text-default",
+    "--ac-chip-toggle-neutral-hover-border": "--a-border-subtle-hover",
+    "--ac-chip-toggle-neutral-hover-bg": "--a-surface-neutral-subtle-hover",
+    "--ac-chip-toggle-neutral-pressed-bg": "--a-surface-neutral-selected",
+    "--ac-chip-toggle-neutral-pressed-text": "--a-text-on-neutral",
+    "--ac-chip-toggle-neutral-pressed-hover-bg": "--a-surface-neutral-selected",
    "--ac-chip-toggle-focus": "--a-border-focus",
    "--ac-chip-removable-action-bg": "--a-surface-action-selected",
    "--ac-chip-removable-action-text": "--a-text-on-action",
@@ -206,6 +215,9 @@
    "--ac-read-more-active-bg": "--a-surface-active",
    "--ac-read-more-line": "--a-border-divider"
  },
+  "skeleton": {
+    "--ac-skeleton-bg": "--a-surface-neutral-moderate"
+  },
  "stepper": {
    "--ac-stepper-text": "--a-surface-action",
    "--ac-stepper-line": "--a-border-default",
@@ -349,6 +361,10 @@
    "--ac-radio-checkbox-error-border": "--a-border-danger",
    "--ac-radio-checkbox-error-hover-bg": "--a-surface-danger-subtle"
  },
+  "forms": {
+    "--ac-form-description": "--a-text-subtle",
+    "--ac-form-subdescription": "--a-text-subtle"
+  },
  "search": {
    "--ac-search-button-border": "--a-border-default",
    "--ac-search-button-border-hover": "--a-border-action",
@@ -1,5 +1,129 @@
 # @navikt/ds-react

+## 4.4.0
+
+### Minor Changes
+
+- [#2041](https://github.com/navikt/aksel/pull/2041) [`de3626958`](https://github.com/navikt/aksel/commit/de3626958266d1271840fa341c36500ab66b573d) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Shadow-tokens er oppdatert til mer tydeligere varianter
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@4.4.0
+
+## 4.3.0
+
+### Minor Changes
+
+- [#2069](https://github.com/navikt/aksel/pull/2069) [`99c08b8e4`](https://github.com/navikt/aksel/commit/99c08b8e4ab33acd20a21719986452652ffe3c57) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Popover og Helptext har nå luft mot siden av skjerm på mindre flater
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@4.3.0
+
+## 4.2.0
+
+### Minor Changes
+
+- [#2048](https://github.com/navikt/aksel/pull/2048) [`b1625ba38`](https://github.com/navikt/aksel/commit/b1625ba3882b430d678d0623922d7fb56aa724b3) Thanks [@HalvorHaugan](https://github.com/HalvorHaugan)! - Oppdatert Chat
+
+  - :sparkles: Ny prop `size` som kan settes til "small" for en mer kompakt layout
+  - :sparkles: Ny prop `variant` som erstatter `backgroundColor` og `avatarBgColor`
+  - :sparkles: `avatar` er nå valgfritt
+  - :wheelchair: Forbedret UU
+  - :lipstick: Oppdatert utseende
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@4.2.0
+
+## 4.1.7
+
+### Patch Changes
+
+- [`42b5af64a`](https://github.com/navikt/aksel/commit/42b5af64ab35d0f2d126d41f8fc3e61fe2834b36) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset jsdom-problemer ved rendring av Timeline
+
+- [#2056](https://github.com/navikt/aksel/pull/2056) [`dfbbe92a6`](https://github.com/navikt/aksel/commit/dfbbe92a63210278d9dd4d154c01f116ad921fc1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - La til `wrapperClassname`-prop for HelpText
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@4.1.7
+
+## 4.1.6
+
+### Patch Changes
+
+- [`9a8bb26c3`](https://github.com/navikt/aksel/commit/9a8bb26c36cfbb1a95cf28a043d2df3dbfe7185d) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Timeline-period brakk ved bruk av jsdom-tester
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@4.1.6
+
+## 4.1.5
+
+### Patch Changes
+
+- [#2051](https://github.com/navikt/aksel/pull/2051) [`925aa7a14`](https://github.com/navikt/aksel/commit/925aa7a140bc0cd63e8884bea0bd478838c1aa17) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: OverridableComponent fungerer nå med komponenter som allerede bruker 'as'-prop
+
+- [#2052](https://github.com/navikt/aksel/pull/2052) [`7c17e40ca`](https://github.com/navikt/aksel/commit/7c17e40cac6703f00ce756276e9616deb73f6098) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: floating-ui sendte ikke escape-events opp gjennom dom-treet
+
+- Updated dependencies [[`8f16d1571`](https://github.com/navikt/aksel/commit/8f16d1571ec7cf452c09618a9a918ee2a634c75a)]:
+  - @navikt/aksel-icons@4.1.5
+
+## 4.1.4
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@4.1.4
+
+## 4.1.3
+
+### Patch Changes
+
+- [`44a75acb6`](https://github.com/navikt/aksel/commit/44a75acb6b904d614a01344f42111761a48cb7e2) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Classname ble ikke riktig forwardet til ikke-klikkbar Period i Timeline
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@4.1.3
+
+## 4.1.2
+
+### Patch Changes
+
+- [`30068dca3`](https://github.com/navikt/aksel/commit/30068dca3fcdf4bf7bbfbfb3d09baa9fee003962) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Jsdoc for Skeleton-komponent
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@4.1.2
+
+## 4.1.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@4.1.1
+
+## 4.1.0
+
+### Minor Changes
+
+- [#2035](https://github.com/navikt/aksel/pull/2035) [`7b42f536a`](https://github.com/navikt/aksel/commit/7b42f536aa90c1b5dbe2b19f1bbe292701546420) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: Oppdatert Chips
+
+  - Toggle Chips har nå varianter: neutral og action
+  - Toggle Chips har nå en ny prop: `checkmark` som slår av/på checkmark ved selected-state
+
+- [#1821](https://github.com/navikt/aksel/pull/1821) [`db8c38a09`](https://github.com/navikt/aksel/commit/db8c38a094cd183db54aebecb62d5b223920a040) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: Ny komponent Skeleton!
+
+  - varianter: text, circle, rounded og rectangle
+
+### Patch Changes
+
+- [#2034](https://github.com/navikt/aksel/pull/2034) [`17d92c9ed`](https://github.com/navikt/aksel/commit/17d92c9ed5f82a80f99a1512989744343edf60b3) Thanks [@JulianNymark](https://github.com/JulianNymark)! - Add JSDoc typings
+
+- [#2027](https://github.com/navikt/aksel/pull/2027) [`c028f36e2`](https://github.com/navikt/aksel/commit/c028f36e2bc58223ebf8b655980dde7eafb30add) Thanks [@JulianNymark](https://github.com/JulianNymark)! - :sparkles: La til `indent`-prop på Accordion
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@4.1.0
+
 ## 4.0.0

 ### Major Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "4.0.0",
+  "version": "4.4.0",
  "description": "Aksel react-components for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -38,7 +38,7 @@
  },
  "dependencies": {
    "@floating-ui/react": "0.24.1",
-    "@navikt/aksel-icons": "^4.0.0",
+    "@navikt/aksel-icons": "^4.4.0",
    "@radix-ui/react-tabs": "1.0.0",
    "@radix-ui/react-toggle-group": "1.0.0",
    "clsx": "^1.2.1",
@@ -1,17 +1,32 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import AccordionItem, { AccordionItemType } from "./AccordionItem";
-import AccordionContent, { AccordionContentType } from "./AccordionContent";
-import AccordionHeader, { AccordionHeaderType } from "./AccordionHeader";
+import AccordionItem, { AccordionItemProps } from "./AccordionItem";
+import AccordionContent, { AccordionContentProps } from "./AccordionContent";
+import AccordionHeader, { AccordionHeaderProps } from "./AccordionHeader";
 import { AccordionContext } from "./AccordionContext";

 interface AccordionComponent
  extends React.ForwardRefExoticComponent<
    AccordionProps & React.RefAttributes<HTMLDivElement>
  > {
-  Item: AccordionItemType;
-  Header: AccordionHeaderType;
-  Content: AccordionContentType;
+  /**
+   * @see 🏷️ {@link AccordionItemProps}
+   */
+  Item: React.ForwardRefExoticComponent<
+    AccordionItemProps & React.RefAttributes<HTMLDivElement>
+  >;
+  /**
+   * @see 🏷️ {@link AccordionHeaderProps}
+   */
+  Header: React.ForwardRefExoticComponent<
+    AccordionHeaderProps & React.RefAttributes<HTMLButtonElement>
+  >;
+  /**
+   * @see 🏷️ {@link AccordionContentProps}
+   */
+  Content: React.ForwardRefExoticComponent<
+    AccordionContentProps & React.RefAttributes<HTMLDivElement>
+  >;
 }

 export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -27,12 +42,37 @@ export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
   * @default "medium"
   */
  size?: "large" | "medium" | "small";
+  /**
+   * Whether to indent content or not
+   * @default true
+   */
+  indent?: boolean;
  /**
   * Instances of Accordion.Item
   */
  children: React.ReactNode;
 }

+/**
+ * A component that displays collapsible content sections.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/accordion)
+ * @see 🏷️ {@link AccordionProps}
+ *
+ * @example
+ * ```jsx
+ * <Accordion>
+ *   <Accordion.Item>
+ *     <Accordion.Header>Section 1</Accordion.Header>
+ *     <Accordion.Content>Content 1</Accordion.Content>
+ *   </Accordion.Item>
+ *   <Accordion.Item>
+ *     <Accordion.Header>Section 2</Accordion.Header>
+ *     <Accordion.Content>Content 2</Accordion.Content>
+ *   </Accordion.Item>
+ * </Accordion>
+ * ```
+ */
 export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
  (
    {
@@ -40,6 +80,7 @@ export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
      variant = "default",
      headingSize = "small",
      size = "medium",
+      indent = true,
      ...rest
    },
    ref
@@ -57,7 +98,8 @@ export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
          className={cl(
            "navds-accordion",
            className,
-            `navds-accordion--${size}`
+            `navds-accordion--${size}`,
+            { "navds-accordion--indent": indent }
          )}
          ref={ref}
        />
@@ -11,11 +11,7 @@ export interface AccordionContentProps
  children: React.ReactNode;
 }

-export type AccordionContentType = React.ForwardRefExoticComponent<
-  AccordionContentProps & React.RefAttributes<HTMLDivElement>
->;
-
-const AccordionContent: AccordionContentType = forwardRef(
+const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(
  ({ children, className, ...rest }, ref) => {
    const context = useContext(AccordionItemContext);

@@ -13,11 +13,7 @@ export interface AccordionHeaderProps
  children: React.ReactNode;
 }

-export type AccordionHeaderType = React.ForwardRefExoticComponent<
-  AccordionHeaderProps & React.RefAttributes<HTMLButtonElement>
->;
-
-const AccordionHeader: AccordionHeaderType = forwardRef(
+const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(
  ({ children, className, onClick, ...rest }, ref) => {
    const itemContext = useContext(AccordionItemContext);
    const accordionContext = useContext(AccordionContext);
@@ -27,10 +27,6 @@ export interface AccordionItemProps
  defaultOpen?: boolean;
 }

-export type AccordionItemType = React.ForwardRefExoticComponent<
-  AccordionItemProps & React.RefAttributes<HTMLDivElement>
->;
-
 export interface AccordionItemContextProps {
  open: boolean;
  toggleOpen: () => void;
@@ -39,7 +35,7 @@ export interface AccordionItemContextProps {
 export const AccordionItemContext =
  createContext<AccordionItemContextProps | null>(null);

-const AccordionItem: AccordionItemType = forwardRef(
+const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
  (
    { children, className, open, defaultOpen = false, onClick, id, ...rest },
    ref
@@ -114,11 +114,12 @@ export const Default = {
  },

  args: {
-    controlled: "false",
+    controlled: false,
    nItems: 2,
    variant: "default",
    headingSize: "medium",
    size: "medium",
+    indent: true,
  },
 };

@@ -137,7 +138,7 @@ export const DefaultOpen = {

  args: {
    openItems: [1, 2],
-    controlled: "false",
+    controlled: false,
    nItems: 5,
    variant: "neutral",
    headingSize: "large",
@@ -251,6 +252,7 @@ export const WithTable = {
  args: {
    variant: "default",
    headingSize: "large",
+    indent: false,
  },
 };

@@ -53,6 +53,15 @@ export interface AlertContextProps {
  size: "medium" | "small";
 }

+/**
+ * A component for displaying alerts
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/alert)
+ * @see 🏷️ {@link AlertProps}
+ * @example
+ * ```jsx
+ * <Alert variant="error">Dette er en feilmelding</Alert>
+ * ```
+ */
 export const Alert = forwardRef<HTMLDivElement, AlertProps>(
  (
    {
@@ -47,6 +47,16 @@ export interface ButtonProps
  iconPosition?: "left" | "right";
 }

+/**
+ * A button component
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/button)
+ * @see 🏷️ {@link ButtonProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ * @example
+ * ```jsx
+ * <Button>Klikk meg</Button>
+ * ```
+ */
 export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
  forwardRef(
    (
@@ -17,6 +17,7 @@ export interface BubbleProps extends HTMLAttributes<HTMLDivElement> {
  timestamp?: string;
  /**
   * Background color on bubble
+   * @deprecated Use `variant` on Chat instead
   */
  backgroundColor?: string;
  /**
@@ -25,11 +26,7 @@ export interface BubbleProps extends HTMLAttributes<HTMLDivElement> {
  toptextPosition?: "left" | "right";
 }

-export type BubbleType = React.ForwardRefExoticComponent<
-  BubbleProps & React.RefAttributes<HTMLDivElement>
->;
-
-const Bubble: BubbleType = forwardRef(
+const Bubble = forwardRef<HTMLDivElement, BubbleProps>(
  (
    {
      children,
@@ -50,17 +47,20 @@ const Bubble: BubbleType = forwardRef(
        {...rest}
      >
        {(timestamp || name) && (
-          <div
+          <h3
            className={cl(
              `navds-chat__top-text`,
              toptextPosition && `navds-chat__top-text--${toptextPosition}`
            )}
          >
-            {name && <Detail className="navds-chat__name">{name}</Detail>}
-            {timestamp && (
-              <Detail className="navds-chat__timestamp">{timestamp}</Detail>
+            {name && <Detail as="span">{name}</Detail>}
+            {name && timestamp && (
+              <Detail as="span" aria-hidden>
+                &bull;
+              </Detail>
            )}
-          </div>
+            {timestamp && <Detail as="span">{timestamp}</Detail>}
+          </h3>
        )}
        {children}
      </div>
@@ -1,7 +1,10 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "clsx";
-import Bubble, { BubbleType } from "./Bubble";
-import { BodyLong, BodyShort } from "../typography";
+import Bubble from "./Bubble";
+import { BodyLong } from "../typography";
+
+export const POSITIONS = ["left", "right"] as const;
+export const SIZES = ["medium", "small"] as const;

 export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
  /**
@@ -17,36 +20,69 @@ export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
   */
  timestamp?: string;
  /**
-   * Avatar for messenger. Regular text for initials works to
+   * Avatar for messenger. Regular text for initials works too, but it will be hidden for screen readers.
   */
-  avatar: React.ReactNode;
+  avatar?: React.ReactNode;
+  /**
+   * Changes background color on avatar and bubbles.
+   * Avoid using the same background as the surface behind Chat.
+   * @default "subtle"
+   */
+  variant?: "subtle" | "info" | "neutral";
  /**
   * Background color on bubbles
+   * @deprecated Use `variant` instead
   */
  backgroundColor?: string;
  /**
   * Background color for avatar
+   * @deprecated Use `variant` instead
   */
  avatarBgColor?: string;
  /**
-   * Positions avatar and Bubbles
+   * Positions avatar and bubbles
   * @default "left"
   */
-  position?: "left" | "right";
+  position?: (typeof POSITIONS)[number];
  /**
   * Hoizontal position of toptext
-   * @default Same as chat
+   * @default Same as position
   */
-  toptextPosition?: "left" | "right";
+  toptextPosition?: (typeof POSITIONS)[number];
+  /**
+   * Affects padding and font size in bubbles
+   * @default "medium"
+   */
+  size?: (typeof SIZES)[number];
 }

 interface ChatComponent
  extends React.ForwardRefExoticComponent<
    ChatProps & React.RefAttributes<HTMLDivElement>
  > {
-  Bubble: BubbleType;
+  /**
+   * @see 🏷️ {@link BubbleProps}
+   */
+  Bubble: typeof Bubble;
 }

+/**
+ * A component for communicating dialogs between two parties.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/chat)
+ * @see 🏷️ {@link ChatProps}
+ *
+ * @example
+ * ```jsx
+ * <Chat avatar="A" name="Alice" timestamp="01.01.21 14:00">
+ *   <Chat.Bubble>Hello!</Chat.Bubble>
+ *   <Chat.Bubble>How can I help you?</Chat.Bubble>
+ * </Chat>
+ * <Chat avatar="B" name="Bob" timestamp="01.01.21 14:01" position="right">
+ *   <Chat.Bubble>Hi there!</Chat.Bubble>
+ * </Chat>
+ * ```
+ */
 export const Chat = forwardRef<HTMLDivElement, ChatProps>(
  (
    {
@@ -56,51 +92,54 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
      timestamp,
      avatar,
      position = "left",
+      variant = "subtle",
      avatarBgColor,
      backgroundColor,
      toptextPosition,
+      size = "medium",
      ...rest
-    },
+    }: ChatProps,
    ref
-  ) => {
-    return (
-      <div
-        ref={ref}
-        className={cl(
-          "navds-chat",
-          className,
-          `navds-chat--${position} navds-chat--top-text-${
-            toptextPosition ?? position
-          }`
-        )}
-        {...rest}
-      >
-        <BodyShort
-          as="div"
+  ) => (
+    <div
+      ref={ref}
+      className={cl(
+        "navds-chat",
+        className,
+        `navds-chat--${position}`,
+        `navds-chat--top-text-${toptextPosition ?? position}`,
+        `navds-chat--${size}`,
+        `navds-chat--${variant}`
+      )}
+      {...rest}
+    >
+      {avatar && (
+        <div
          className="navds-chat__avatar"
+          aria-hidden
          style={{ backgroundColor: avatarBgColor }}
        >
          {avatar}
-        </BodyShort>
-        <ol className="navds-chat__bubble-wrapper">
-          {React.Children.map(children, (child, i) => {
-            if (React.isValidElement(child)) {
-              return (
-                <BodyLong as="li">
-                  {React.cloneElement(child, {
-                    name: name && i === 0 ? name : undefined,
-                    timestamp: timestamp && i === 0 ? timestamp : undefined,
-                    backgroundColor,
-                    ...child.props,
-                  })}
-                </BodyLong>
-              );
-            }
-          })}
-        </ol>
-      </div>
-    );
-  }
+        </div>
+      )}
+      <ol className="navds-chat__bubble-wrapper">
+        {React.Children.map(children, (child, i) => {
+          if (React.isValidElement(child)) {
+            return (
+              <BodyLong as="li" size={size}>
+                {React.cloneElement(child, {
+                  name: name && i === 0 ? name : undefined,
+                  timestamp: timestamp && i === 0 ? timestamp : undefined,
+                  backgroundColor,
+                  ...child.props,
+                })}
+              </BodyLong>
+            );
+          }
+        })}
+      </ol>
+    </div>
+  )
 ) as ChatComponent;

 Chat.Bubble = Bubble;
@@ -1,6 +1,7 @@
 import React from "react";
 import { Chat } from "../index";
 import { Meta } from "@storybook/react";
+import { POSITIONS, SIZES } from "./Chat";

 export default {
  title: "ds-react/Chat",
@@ -16,19 +17,25 @@ export default {
        type: "text",
      },
    },
+    position: {
+      control: { type: "radio" },
+      options: POSITIONS,
+    },
+    toptextPosition: {
+      control: { type: "radio" },
+      options: POSITIONS,
+    },
+    size: {
+      control: { type: "radio" },
+      options: SIZES,
+    },
  },
-} as Meta;
+} satisfies Meta<typeof Chat>;

 export const Default = {
  render: (props) => {
    return (
-      <Chat
-        avatar={props?.avatar ?? "ON"}
-        name={props?.name ?? "Ola Normann"}
-        timestamp={props?.timestamp ?? "01.01.21 14:00"}
-        avatarBgColor={props?.avatarBgColor}
-        backgroundColor={props?.backgroundColor}
-      >
+      <Chat {...props}>
        <Chat.Bubble>
          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
        </Chat.Bubble>
@@ -48,141 +55,156 @@ export const Default = {
  },
 };

-export const Farger = () => {
-  return (
+export const Small = () => (
+  <Chat avatar="ON" name="Ola Normann" timestamp="01.01.21 14:00" size="small">
+    <Chat.Bubble>
+      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+    </Chat.Bubble>
+    <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
+    <Chat.Bubble>
+      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+      labore nisi ut.
+    </Chat.Bubble>
+  </Chat>
+);
+
+export const Colors = () => (
+  <Chat
+    avatar="NAV"
+    name="NAV"
+    timestamp="01.01.21 14:00"
+    avatarBgColor="var(--a-surface-alt-1-subtle)"
+    backgroundColor="var(--a-surface-warning-subtle)"
+  >
+    <Chat.Bubble>
+      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+    </Chat.Bubble>
+    <Chat.Bubble backgroundColor="lightYellow">
+      Tempor fugiat amet eu sint in in ullamco.
+    </Chat.Bubble>
+    <Chat.Bubble>
+      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+      labore nisi ut.
+    </Chat.Bubble>
+  </Chat>
+);
+
+export const Variants = () => (
+  <div className="colgap">
+    <Chat avatar="NAV" name="NAV" timestamp="01.01.21 14:00" variant="info">
+      <Chat.Bubble>
+        Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+      </Chat.Bubble>
+    </Chat>
+    <Chat
+      avatar="KN"
+      name="Kari Nordmann"
+      timestamp="01.01.21 14:03"
+      variant="neutral"
+      position="right"
+    >
+      <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
+    </Chat>
+    <Chat
+      avatar="ON"
+      name="Ola Nordmann"
+      timestamp="01.01.21 14:07"
+      variant="subtle"
+      position="right"
+    >
+      <Chat.Bubble>
+        Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+        labore nisi ut.
+      </Chat.Bubble>
+    </Chat>
+  </div>
+);
+
+export const Position = () => (
+  <div className="colgap">
+    <Chat avatar="ON" name="Ola Normann" timestamp="01.01.21 14:00">
+      <Chat.Bubble>
+        Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+        labore nisi ut.
+      </Chat.Bubble>
+    </Chat>
+    <Chat
+      avatar="KH"
+      name="Kari Høyli"
+      timestamp="01.01.21 14:32"
+      position="right"
+      variant="info"
+    >
+      <Chat.Bubble>
+        Reprehenderit pariatur officia exercitation laboris.
+      </Chat.Bubble>
+      <Chat.Bubble>
+        Enim velit deserunt do quis. Eu fugiat magna esse dolore ad sunt sit est
+        dolore incididunt. Occaecat cupidatat magna.
+      </Chat.Bubble>
+    </Chat>
+    <Chat avatar="ON" name="Ola Normann" timestamp="01.01.21 15:00">
+      <Chat.Bubble>
+        Exercitation irure Lorem cupidatat culpa anim cillum esse ullamco qui
+        dolore laborum et Lorem. Labore sunt duis id Lorem voluptate commodo ea
+        esse. Dolore esse aliqua proident ea ad commodo ut dolore voluptate
+        labore sunt aute.
+      </Chat.Bubble>
+    </Chat>
+  </div>
+);
+
+export const ToptextPosition = () => (
+  <div className="colgap">
    <Chat
      avatar="ON"
      name="Ola Normann"
      timestamp="01.01.21 14:00"
-      avatarBgColor="var(--a-lightblue-200)"
-      backgroundColor="var(--a-lightblue-100)"
+      toptextPosition="right"
    >
-      <Chat.Bubble>
-        Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-      </Chat.Bubble>
-      <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
      <Chat.Bubble>
        Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
        labore nisi ut.
      </Chat.Bubble>
    </Chat>
-  );
-};
-
-export const Position = () => {
-  return (
-    <div className="colgap">
-      <Chat
-        avatar="ON"
-        name="Ola Normann"
-        timestamp="01.01.21 14:00"
-        backgroundColor="rgba(255, 249, 240, 1)"
-        avatarBgColor="rgba(255, 236, 204, 1)"
-      >
-        <Chat.Bubble>
-          Adipisicing laborum est eu laborum est sit in commodo enim sint
-          laboris labore nisi ut.
-        </Chat.Bubble>
-      </Chat>
-      <Chat
-        avatar="KH"
-        name="Kari Høyli"
-        timestamp="01.01.21 14:32"
-        position="right"
-        backgroundColor="rgba(230, 240, 255, 1)"
-        avatarBgColor="rgba(204, 225, 255, 1)"
-      >
-        <Chat.Bubble>
-          Reprehenderit pariatur officia exercitation laboris.
-        </Chat.Bubble>
-        <Chat.Bubble>
-          Enim velit deserunt do quis. Eu fugiat magna esse dolore ad sunt sit
-          est dolore incididunt. Occaecat cupidatat magna.
-        </Chat.Bubble>
-      </Chat>
-      <Chat
-        avatar="ON"
-        name="Ola Normann"
-        timestamp="01.01.21 15:00"
-        backgroundColor="rgba(255, 249, 240, 1)"
-        avatarBgColor="rgba(255, 236, 204, 1)"
-      >
-        <Chat.Bubble>
-          Exercitation irure Lorem cupidatat culpa anim cillum esse ullamco qui
-          dolore laborum et Lorem. Labore sunt duis id Lorem voluptate commodo
-          ea esse. Dolore esse aliqua proident ea ad commodo ut dolore voluptate
-          labore sunt aute.
-        </Chat.Bubble>
-      </Chat>
-    </div>
-  );
-};
-
-export const ToptextPosition = () => {
-  return (
-    <div className="colgap">
-      <Chat
-        avatar="ON"
-        name="Ola Normann"
-        timestamp="01.01.21 14:00"
-        backgroundColor="rgba(255, 249, 240, 1)"
-        avatarBgColor="rgba(255, 236, 204, 1)"
-        toptextPosition="right"
-      >
-        <Chat.Bubble>
-          Adipisicing laborum est eu laborum est sit in commodo enim sint
-          laboris labore nisi ut.
-        </Chat.Bubble>
-      </Chat>
-      <Chat
-        avatar="KH"
-        name="Kari Høyli"
-        timestamp="01.01.21 14:32"
-        position="right"
-        backgroundColor="rgba(230, 240, 255, 1)"
-        avatarBgColor="rgba(204, 225, 255, 1)"
-        toptextPosition="left"
-      >
-        <Chat.Bubble>
-          Reprehenderit pariatur officia exercitation laboris.
-        </Chat.Bubble>
-        <Chat.Bubble>
-          Enim velit deserunt do quis. Eu fugiat magna esse dolore ad sunt sit
-          est dolore incididunt. Occaecat cupidatat magna.
-        </Chat.Bubble>
-      </Chat>
-      <Chat
-        avatar="ON"
-        name="Ola Normann"
-        timestamp="01.01.21 15:00"
-        backgroundColor="rgba(255, 249, 240, 1)"
-        avatarBgColor="rgba(255, 236, 204, 1)"
-      >
-        <Chat.Bubble toptextPosition="right">
-          Exercitation irure Lorem cupidatat culpa anim cillum esse ullamco qui
-          dolore laborum et Lorem. Labore sunt duis id Lorem voluptate commodo
-          ea esse. Dolore esse aliqua proident ea ad commodo ut dolore voluptate
-          labore sunt aute.
-        </Chat.Bubble>
-      </Chat>
-    </div>
-  );
-};
-
-export const Avatar = () => {
-  return (
-    <Chat avatar={<Illustration />} timestamp="01.01.21 14:00">
+    <Chat
+      name="Kari Høyli"
+      timestamp="01.01.21 14:32"
+      position="right"
+      variant="info"
+      toptextPosition="left"
+    >
      <Chat.Bubble>
-        Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+        Reprehenderit pariatur officia exercitation laboris.
      </Chat.Bubble>
-      <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
      <Chat.Bubble>
-        Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
-        labore nisi ut.
+        Enim velit deserunt do quis. Eu fugiat magna esse dolore ad sunt sit est
+        dolore incididunt. Occaecat cupidatat magna.
      </Chat.Bubble>
    </Chat>
-  );
-};
+    <Chat avatar="ON" name="Ola Normann" timestamp="01.01.21 15:00">
+      <Chat.Bubble toptextPosition="right">
+        Exercitation irure Lorem cupidatat culpa anim cillum esse ullamco qui
+        dolore laborum et Lorem. Labore sunt duis id Lorem voluptate commodo ea
+        esse. Dolore esse aliqua proident ea ad commodo ut dolore voluptate
+        labore sunt aute.
+      </Chat.Bubble>
+    </Chat>
+  </div>
+);
+
+export const Avatar = () => (
+  <Chat avatar={<Illustration />} timestamp="01.01.21 14:00">
+    <Chat.Bubble>
+      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+    </Chat.Bubble>
+    <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
+    <Chat.Bubble>
+      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+      labore nisi ut.
+    </Chat.Bubble>
+  </Chat>
+);

 const Illustration = () => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 93">
@@ -1,7 +1,8 @@
 import cl from "clsx";
 import React, { forwardRef, HTMLAttributes } from "react";
-import ToggleChips, { ToggleChipsType } from "./Toggle";
-import RemovableChips, { RemovableChipsType } from "./Removable";
+import ToggleChips, { ToggleChipsProps } from "./Toggle";
+import RemovableChips, { RemovableChipsProps } from "./Removable";
+import { OverridableComponent } from "../util/OverridableComponent";

 export interface ChipsProps extends HTMLAttributes<HTMLUListElement> {
  children: React.ReactNode;
@@ -16,10 +17,47 @@ interface ChipsComponent
  extends React.ForwardRefExoticComponent<
    ChipsProps & React.RefAttributes<HTMLUListElement>
  > {
-  Toggle: ToggleChipsType;
-  Removable: RemovableChipsType;
+  /**
+   * Toggle between selected-states.
+   * @see 🏷️ {@link ToggleChipsProps}
+   * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+   */
+  Toggle: OverridableComponent<ToggleChipsProps, HTMLButtonElement>;
+  /**
+   * Remove filter or the likes on click
+   * @see 🏷️ {@link RemovableChipsProps}
+   * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+   */
+  Removable: OverridableComponent<RemovableChipsProps, HTMLButtonElement>;
 }

+/**
+ * A component that displays a list of items as chips.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/chips)
+ * @see 🏷️ {@link ChipsProps}
+ *
+ * @example
+ * ```jsx
+      <Chips size="small">
+        {options.map((c) => (
+          <Chips.Toggle
+            selected={selected.includes(c)}
+            key={c}
+            onClick={() =>
+              setSelected(
+                selected.includes(c)
+                  ? selected.filter((x) => x !== c)
+                  : [...selected, c]
+              )
+            }
+          >
+            {c}
+          </Chips.Toggle>
+        ))}
+      </Chips>
+ * ```
+ */
 export const Chips: ChipsComponent = forwardRef<HTMLUListElement, ChipsProps>(
  ({ className, size = "medium", children, ...rest }, ref) => {
    return (
@@ -22,9 +22,6 @@ export interface RemovableChipsProps
  onDelete?: () => void;
 }

-export interface RemovableChipsType
-  extends OverridableComponent<RemovableChipsProps, HTMLButtonElement> {}
-
 export const RemovableChips: OverridableComponent<
  RemovableChipsProps,
  HTMLButtonElement
@@ -63,6 +60,6 @@ export const RemovableChips: OverridableComponent<
      </Component>
    );
  }
-) as RemovableChipsType;
+);

 export default RemovableChips;
@@ -1,4 +1,3 @@
-import { CheckmarkIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { OverridableComponent } from "../util/OverridableComponent";
@@ -10,27 +9,64 @@ export interface ToggleChipsProps
   * Toggles aria-pressed and visual-changes
   */
  selected?: boolean;
+  /**
+   * Chip-variants
+   * @default "action"
+   */
+  variant?: "action" | "neutral";
+  /**
+   * Toggles display of checkmark on selected
+   * @default true
+   */
+  checkmark?: boolean;
 }

-export interface ToggleChipsType
-  extends OverridableComponent<ToggleChipsProps, HTMLButtonElement> {}
-
-export const ToggleChips: ToggleChipsType = forwardRef(
+export const ToggleChips: OverridableComponent<
+  ToggleChipsProps,
+  HTMLButtonElement
+> = forwardRef(
  (
-    { className, children, selected, as: Component = "button", ...rest },
+    {
+      className,
+      children,
+      selected,
+      variant = "action",
+      checkmark = true,
+      as: Component = "button",
+      ...rest
+    },
    ref
  ) => {
    return (
      <Component
        {...rest}
        ref={ref}
-        className={cl("navds-chips__chip navds-chips__toggle", className, {
-          "navds-chips--icon-left": selected,
-        })}
+        className={cl(
+          "navds-chips__chip navds-chips__toggle",
+          className,
+          `navds-chips__toggle--${variant}`
+        )}
        aria-pressed={selected}
      >
-        {selected && (
-          <CheckmarkIcon aria-hidden className="navds-chips__toggle-icon" />
+        {selected && checkmark && (
+          <svg
+            aria-hidden
+            className="navds-chips__toggle-icon"
+            width="10"
+            height="8"
+            viewBox="0 0 10 8"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            focusable={false}
+            role="img"
+          >
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M9.51894 0.45851C9.81799 0.745107 9.8281 1.21987 9.5415 1.51893L3.7915 7.51893C3.51247 7.81009 3.05315 7.82848 2.75174 7.56056L0.501735 5.56056C0.192148 5.28537 0.164263 4.81132 0.439451 4.50173C0.71464 4.19214 1.18869 4.16426 1.49828 4.43944L3.20835 5.95951L8.45852 0.481072C8.74511 0.182015 9.21988 0.171913 9.51894 0.45851Z"
+              fill="currentColor"
+            />
+          </svg>
        )}
        <span className="navds-chips__chip-text">{children}</span>
      </Component>
@@ -66,25 +66,78 @@ export const Default = {
 };

 export const Toggle = () => {
-  const [selected, setSelected] = useState<number[]>([]);
+  const [selected, setSelected] = useState<number[]>([2, 4]);
  return (
-    <Chips>
-      {options.map((c, y) => (
-        <Chips.Toggle
-          selected={selected.includes(y)}
-          onClick={() =>
-            setSelected(
-              selected.includes(y)
-                ? selected.filter((x) => x !== y)
-                : [...selected, y]
-            )
-          }
-          key={y}
-        >
-          {c}
-        </Chips.Toggle>
-      ))}
-    </Chips>
+    <div className="colgap">
+      <Chips>
+        {options.map((c, y) => (
+          <Chips.Toggle
+            selected={selected.includes(y)}
+            onClick={() =>
+              setSelected(
+                selected.includes(y)
+                  ? selected.filter((x) => x !== y)
+                  : [...selected, y]
+              )
+            }
+            key={y}
+          >
+            {c}
+          </Chips.Toggle>
+        ))}
+      </Chips>
+      <Chips>
+        {options.map((c, y) => (
+          <Chips.Toggle
+            variant="neutral"
+            selected={selected.includes(y)}
+            onClick={() =>
+              setSelected(
+                selected.includes(y)
+                  ? selected.filter((x) => x !== y)
+                  : [...selected, y]
+              )
+            }
+            key={y}
+          >
+            {c}
+          </Chips.Toggle>
+        ))}
+      </Chips>
+    </div>
+  );
+};
+
+export const ToggleNoCheckmark = () => {
+  const [selected, setSelected] = useState<number>(2);
+  return (
+    <div className="colgap">
+      <Chips>
+        {options.map((c, y) => (
+          <Chips.Toggle
+            selected={selected === y}
+            checkmark={false}
+            onClick={() => setSelected(y)}
+            key={y}
+          >
+            {c}
+          </Chips.Toggle>
+        ))}
+      </Chips>
+      <Chips>
+        {options.map((c, y) => (
+          <Chips.Toggle
+            variant="neutral"
+            selected={selected === y}
+            checkmark={false}
+            onClick={() => setSelected(y)}
+            key={y}
+          >
+            {c}
+          </Chips.Toggle>
+        ))}
+      </Chips>
+    </div>
  );
 };

@@ -108,7 +161,7 @@ export const Removable = () => {
 };

 export const Regular = () => {
-  const [selected, setSelected] = useState<number[]>([]);
+  const [selected, setSelected] = useState<number[]>([2]);
  return (
    <div className="colgap">
      <Chips>
@@ -138,7 +191,7 @@ export const Regular = () => {
 };

 export const Small = () => {
-  const [selected, setSelected] = useState<number[]>([]);
+  const [selected, setSelected] = useState<number[]>([2, 4]);
  return (
    <div className="colgap">
      <Chips size="small">
@@ -65,6 +65,17 @@ export interface CopyButtonProps
  activeTitle?: string;
 }

+/**
+ * A button component that copies text to the clipboard when clicked.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/copybutton)
+ * @see 🏷️ {@link CopyButtonProps}
+ *
+ * @example
+ * ```jsx
+      <CopyButton copyText="3.14" />
+ * ```
+ */
 export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
  (
    {
@@ -28,131 +28,121 @@ export interface DateInputProps
  variant?: "datepicker" | "monthpicker";
 }

-export type DateInputType = React.ForwardRefExoticComponent<
-  DateInputProps & React.RefAttributes<HTMLInputElement>
->;
+const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
+  const {
+    className,
+    hideLabel = false,
+    label,
+    description,
+    variant = "datepicker",
+    ...rest
+  } = props;

-const DateInput: DateInputType = forwardRef<HTMLInputElement, DateInputProps>(
-  (props, ref) => {
-    const {
-      className,
-      hideLabel = false,
-      label,
-      description,
-      variant = "datepicker",
-      ...rest
-    } = props;
+  const isDatepickerVariant = variant === "datepicker";

-    const isDatepickerVariant = variant === "datepicker";
+  const conditionalVariables = {
+    prefix: isDatepickerVariant ? "datepicker-input" : "monthpicker-input",
+    iconTitle: {
+      open: isDatepickerVariant ? "Åpne datovelger" : "Åpne månedsvelger",
+      close: isDatepickerVariant ? "Lukk datovelger" : "Lukk månedsvelger",
+    },
+  };

-    const conditionalVariables = {
-      prefix: isDatepickerVariant ? "datepicker-input" : "monthpicker-input",
-      iconTitle: {
-        open: isDatepickerVariant ? "Åpne datovelger" : "Åpne månedsvelger",
-        close: isDatepickerVariant ? "Lukk datovelger" : "Lukk månedsvelger",
-      },
-    };
+  const { onOpen, ariaId, open } = useDateInputContext();

-    const { onOpen, ariaId, open } = useDateInputContext();
+  const {
+    inputProps,
+    size = "medium",
+    inputDescriptionId,
+    errorId,
+    showErrorMsg,
+    hasError,
+  } = useFormField(props, conditionalVariables.prefix);

-    const {
-      inputProps,
-      size = "medium",
-      inputDescriptionId,
-      errorId,
-      showErrorMsg,
-      hasError,
-    } = useFormField(props, conditionalVariables.prefix);
-
-    return (
-      <div
-        className={cl(
-          className,
-          "navds-form-field",
-          `navds-form-field--${size}`,
-          "navds-date__field",
-          {
-            "navds-text-field--error": hasError,
-            "navds-date__field--error": hasError,
-            "navds-form-field--disabled": !!inputProps.disabled,
-            "navds-text-field--disabled": !!inputProps.disabled,
-          }
-        )}
+  return (
+    <div
+      className={cl(
+        className,
+        "navds-form-field",
+        `navds-form-field--${size}`,
+        "navds-date__field",
+        {
+          "navds-text-field--error": hasError,
+          "navds-date__field--error": hasError,
+          "navds-form-field--disabled": !!inputProps.disabled,
+          "navds-text-field--disabled": !!inputProps.disabled,
+        }
+      )}
+    >
+      <Label
+        htmlFor={inputProps.id}
+        size={size}
+        className={cl("navds-form-field__label", {
+          "navds-sr-only": hideLabel,
+        })}
      >
-        <Label
-          htmlFor={inputProps.id}
-          size={size}
-          className={cl("navds-form-field__label", {
+        {label}
+      </Label>
+      {!!description && (
+        <BodyShort
+          as="div"
+          className={cl("navds-form-field__description", {
            "navds-sr-only": hideLabel,
          })}
+          id={inputDescriptionId}
+          size={size}
        >
-          {label}
-        </Label>
-        {!!description && (
-          <BodyShort
-            as="div"
-            className={cl("navds-form-field__description", {
-              "navds-sr-only": hideLabel,
-            })}
-            id={inputDescriptionId}
-            size={size}
-          >
-            {description}
-          </BodyShort>
-        )}
-        <div className="navds-date__field-wrapper">
-          <input
-            ref={ref}
-            {...omit(rest, ["error", "errorId", "size"])}
-            {...inputProps}
-            autoComplete="off"
-            aria-controls={ariaId}
-            className={cl(
-              "navds-date__field-input",
-              "navds-text-field__input",
-              "navds-body-short",
-              `navds-body-${size}`
-            )}
-            size={14}
-          />
-          <button
-            disabled={inputProps.disabled}
-            tabIndex={open ? -1 : 0}
-            onClick={() => onOpen()}
-            type="button"
-            className="navds-date__field-button"
-          >
-            <CalendarIcon
-              pointerEvents="none"
-              title={
-                open
-                  ? conditionalVariables.iconTitle.close
-                  : conditionalVariables.iconTitle.open
-              }
-            />
-          </button>
-        </div>
-        <div
-          className="navds-form-field__error"
-          id={errorId}
-          aria-relevant="additions removals"
-          aria-live="polite"
-        >
-          {showErrorMsg && (
-            <ErrorMessage size={size}>{props.error}</ErrorMessage>
+          {description}
+        </BodyShort>
+      )}
+      <div className="navds-date__field-wrapper">
+        <input
+          ref={ref}
+          {...omit(rest, ["error", "errorId", "size"])}
+          {...inputProps}
+          autoComplete="off"
+          aria-controls={ariaId}
+          className={cl(
+            "navds-date__field-input",
+            "navds-text-field__input",
+            "navds-body-short",
+            `navds-body-${size}`
          )}
-        </div>
+          size={14}
+        />
+        <button
+          disabled={inputProps.disabled}
+          tabIndex={open ? -1 : 0}
+          onClick={() => onOpen()}
+          type="button"
+          className="navds-date__field-button"
+        >
+          <CalendarIcon
+            pointerEvents="none"
+            title={
+              open
+                ? conditionalVariables.iconTitle.close
+                : conditionalVariables.iconTitle.open
+            }
+          />
+        </button>
      </div>
-    );
-  }
+      <div
+        className="navds-form-field__error"
+        id={errorId}
+        aria-relevant="additions removals"
+        aria-live="polite"
+      >
+        {showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
+      </div>
+    </div>
+  );
+});
+
+export const DatePickerInput = forwardRef<HTMLInputElement, DateInputProps>(
+  (props, ref) => <DateInput {...props} ref={ref} />
 );

-export const DatePickerInput: DateInputType = forwardRef<
-  HTMLInputElement,
-  DateInputProps
->((props, ref) => <DateInput {...props} ref={ref} />);
-
-export const MonthPickerInput: DateInputType = forwardRef<
-  HTMLInputElement,
-  DateInputProps
->((props, ref) => <DateInput {...props} variant="monthpicker" ref={ref} />);
+export const MonthPickerInput = forwardRef<HTMLInputElement, DateInputProps>(
+  (props, ref) => <DateInput {...props} variant="monthpicker" ref={ref} />
+);
@@ -12,7 +12,7 @@ import {
  SelectSingleEventHandler,
 } from "react-day-picker";
 import { omit, Popover, useId } from "../..";
-import { DateInputType, DatePickerInput } from "../DateInput";
+import { DateInputProps, DatePickerInput } from "../DateInput";
 import { DateContext } from "../context";
 import { getLocaleFromString, labels } from "../utils";
 import { Caption, DropdownCaption } from "./caption";
@@ -114,16 +114,59 @@ export interface DatePickerDefaultProps
   * @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;
 }

 export type DatePickerProps = DatePickerDefaultProps & ConditionalModeProps;

 interface DatePickerComponent
  extends React.ForwardRefExoticComponent<DatePickerProps> {
+  /**
+   * @example
+   * ```jsx
+   * <DatePicker.Standalone
+   *   dropdownCaption
+   *   fromDate={new Date("2020-10-01")}
+   *   toDate={new Date("2024-10-01")}
+   * />
+   * ```
+   */
  Standalone: DatePickerStandaloneType;
-  Input: DateInputType;
+  /**
+   * Custom TextField for DatePicker
+   * @see 🏷️ {@link DateInputProps}
+   */
+  Input: React.ForwardRefExoticComponent<
+    DateInputProps & React.RefAttributes<HTMLInputElement>
+  >;
 }

+/**
+ * A component that allows users to select a date from a calendar.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/datepicker)
+ * @see 🏷️ {@link DatePickerProps}
+ *
+ * @example
+ * ```jsx
+ *  const { inputProps, datepickerProps } = useMonthpicker({
+ *    onMonthChange: console.log,
+ *  });
+ *
+ *  return (
+ *     <DatePicker {...datepickerProps} dropdownCaption>
+ *       <DatePicker.Input
+ *         {...inputProps}
+ *         label="Velg dato"
+ *       />
+ *     </DatePicker>
+ *  );
+ * ```
+ */
 export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
  (
    {
@@ -142,6 +185,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
      onClose,
      onOpenToggle,
      strategy = "absolute",
+      bubbleEscape = false,
      ...rest
    },
    ref
@@ -213,6 +257,8 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
              role="dialog"
              ref={ref}
              strategy={strategy}
+              className="navds-date__popover"
+              bubbleEscape={bubbleEscape}
            >
              <DayPicker
                locale={getLocaleFromString(locale)}
@@ -113,6 +113,19 @@ const getValidationMessage = (val = {}): DateValidationT => ({
  ...val,
 });

+/**
+ *
+ * @see 🏷️ {@link UseDatepickerOptions}
+ * @see 🏷️ {@link UseDatepickerValue}
+ * @see 🏷️ {@link DateValidationT}
+ * @example
+ * const { datepickerProps, inputProps } = useDatepicker({
+ *   fromDate: new Date("Aug 23 2019"),
+ *   toDate: new Date("Feb 23 2024"),
+ *   onDateChange: console.log,
+ *   onValidate: console.log,
+ * });
+ */
 export const useDatepicker = (
  opt: UseDatepickerOptions = {}
 ): UseDatepickerValue => {
@@ -306,6 +319,7 @@ export const useDatepicker = (
    onOpenToggle: () => handleOpen(!open),
    disabled,
    disableWeekends,
+    bubbleEscape: true,
    ref: setDaypickerRef,
  };

@@ -110,6 +110,19 @@ const getIsAfter = (opt: { toDate?: Date; date?: Date }) =>
    (opt.toDate.getFullYear() === opt.date.getFullYear() &&
      opt.toDate.getMonth() < opt.date.getMonth()));

+/**
+ *
+ * @see 🏷️ {@link UseMonthPickerOptions}
+ * @see 🏷️ {@link UseMonthPickerValue}
+ * @see 🏷️ {@link MonthValidationT}
+ * @example
+ * const { monthpickerProps, inputProps } = useMonthpicker({
+ *   fromDate: new Date("Aug 23 2019"),
+ *   toDate: new Date("Feb 23 2024"),
+ *   onMonthChange: console.log,
+ *   onValidate: console.log,
+ * });
+ */
 export const useMonthpicker = (
  opt: UseMonthPickerOptions = {}
 ): UseMonthPickerValue => {
@@ -299,6 +312,7 @@ export const useMonthpicker = (
    open,
    onOpenToggle: () => handleOpen(!open),
    disabled,
+    bubbleEscape: true,
    ref: setMonthpickerRef,
  };

@@ -102,7 +102,7 @@ const RANGE = {
  TO: "TO",
 } as const;

-type RangeT = typeof RANGE[keyof typeof RANGE];
+type RangeT = (typeof RANGE)[keyof typeof RANGE];

 const fromValidation = (day: Date, opt?: UseRangeDatepickerOptions) => {
  const isBefore =
@@ -190,6 +190,18 @@ const initialValidation = (
  return getValidationMessage({ ...fromVal }, { ...toVal });
 };

+/**
+ *
+ * @see 🏷️ {@link UseRangeDatepickerOptions}
+ * @see 🏷️ {@link UseRangeDatepickerValue}
+ * @see 🏷️ {@link RangeValidationT}
+ * @example
+ * const { datepickerProps, fromInputProps, toInputProps } = useRangeDatepicker({
+ *   fromDate: new Date("Aug 23 2019"),
+ *   onRangeChange: console.log,
+ *   onValidate: console.log,
+ * });
+ */
 export const useRangeDatepicker = (
  opt: UseRangeDatepickerOptions = {}
 ): UseRangeDatepickerValue => {
@@ -532,6 +544,7 @@ export const useRangeDatepicker = (
    onOpenToggle: () => setOpen((x) => !x),
    disabled,
    disableWeekends,
+    bubbleEscape: true,
    ref: setDaypickerRef,
  };

@@ -2,7 +2,7 @@ import cl from "clsx";
 import React, { forwardRef, useRef, useState } from "react";
 import { RootProvider } from "react-day-picker";
 import { Popover, useId } from "../..";
-import { DateInputType, MonthPickerInput } from "../DateInput";
+import { DateInputProps, MonthPickerInput } from "../DateInput";
 import { DateContext, SharedMonthProvider } from "../context";
 import { getLocaleFromString, Matcher } from "../utils";
 import MonthCaption from "./MonthCaption";
@@ -86,20 +86,57 @@ 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;
 }

 interface MonthPickerComponent
  extends React.ForwardRefExoticComponent<MonthPickerProps> {
  /**
-   * Variant without popover
+   * @example
+   * ```jsx
+   * <MonthPicker.Standalone
+   *   dropdownCaption
+   *   fromDate={new Date("1 Oct 2020")}
+   *   toDate={new Date("1 Oct 2024")}
+   * />
+   * ```
   */
  Standalone: MonthPickerStandaloneType;
  /**
-   * Built-in Inputfield
+   * Custom TextField for MonthPicker
+   * @see 🏷️ {@link DateInputProps}
   */
-  Input: DateInputType;
+  Input: React.ForwardRefExoticComponent<
+    DateInputProps & React.RefAttributes<HTMLInputElement>
+  >;
 }

+/**
+ * A component that displays a month picker.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/monthpicker)
+ * @see 🏷️ {@link MonthPickerProps}
+ *
+ * @example
+ * ```jsx
+ *  const { inputProps, monthpickerProps } = useMonthpicker({
+ *    onMonthChange: console.log,
+ *  });
+ *
+ *  return (
+ *     <MonthPicker {...monthpickerProps} dropdownCaption>
+ *       <MonthPicker.Input
+ *         {...inputProps}
+ *         label="Velg måned"
+ *       />
+ *     </MonthPicker>
+ *  );
+ * ```
+ */
 export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
  (
    {
@@ -121,6 +158,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
      year,
      onYearChange,
      strategy = "absolute",
+      bubbleEscape = false,
    },
    ref
  ) => {
@@ -170,8 +208,9 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
              role="dialog"
              ref={ref}
              id={ariaId}
-              className="navds-date"
+              className="navds-date navds-date__popover"
              strategy={strategy}
+              bubbleEscape={bubbleEscape}
            >
              <RootProvider
                locale={getLocaleFromString(locale)}
@@ -1,5 +1,5 @@
 import React, { createContext, useState } from "react";
-import Toggle, { ToggleType } from "./Toggle";
+import Toggle, { ToggleProps } from "./Toggle";
 import Menu, { MenuType } from "./Menu";

 export interface DropdownProps {
@@ -24,7 +24,15 @@ export interface DropdownProps {
 }

 export interface DropdownType extends React.FC<DropdownProps> {
-  Toggle: ToggleType;
+  /**
+   * @see 🏷️ {@link ToggleProps}
+   */
+  Toggle: React.ForwardRefExoticComponent<
+    ToggleProps & React.RefAttributes<HTMLButtonElement>
+  >;
+  /**
+   * @see 🏷️ {@link MenuType}
+   */
  Menu: MenuType;
 }

@@ -38,6 +46,37 @@ export interface DropdownContextType {

 export const DropdownContext = createContext<DropdownContextType | null>(null);

+/**
+ * A component that displays a dropdown menu when the user clicks on its toggle button.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/dropdown)
+ * @see 🏷️ {@link DropdownProps}
+ *
+ * @example
+ * ```jsx
+ * <Dropdown>
+ *   <Button as={Dropdown.Toggle}>Toggle</Button>
+ *   <Dropdown.Menu>
+ *     <Dropdown.Menu.GroupedList>
+ *       <Dropdown.Menu.GroupedList.Heading>
+ *         Systemer og oppslagsverk
+ *       </Dropdown.Menu.GroupedList.Heading>
+ *       <Dropdown.Menu.GroupedList.Item>
+ *         Gosys
+ *       </Dropdown.Menu.GroupedList.Item>
+ *       <Dropdown.Menu.GroupedList.Item>
+ *         Infotrygd
+ *       </Dropdown.Menu.GroupedList.Item>
+ *     </Dropdown.Menu.GroupedList>
+ *     <Dropdown.Menu.Divider />
+ *     <Dropdown.Menu.List>
+ *       <Dropdown.Menu.List.Item>Gosys</Dropdown.Menu.List.Item>
+ *       <Dropdown.Menu.List.Item>Infotrygd</Dropdown.Menu.List.Item>
+ *     </Dropdown.Menu.List>
+ *   </Dropdown.Menu>
+ * </Dropdown>
+ * ```
+ */
 export const Dropdown = (({
  children,
  onSelect,
@@ -1,18 +1,15 @@
 import React, { forwardRef } from "react";
 import cl from "clsx";

-export type DividerType = React.ForwardRefExoticComponent<
-  React.HTMLAttributes<HTMLHRElement> & React.RefAttributes<HTMLHRElement>
->;
-
-export const Divider: DividerType = forwardRef(
-  ({ className, ...rest }, ref) => (
-    <hr
-      {...rest}
-      ref={ref}
-      className={cl("navds-dropdown__divider", className)}
-    />
-  )
-);
+export const Divider = forwardRef<
+  HTMLHRElement,
+  React.HTMLAttributes<HTMLHRElement>
+>(({ className, ...rest }, ref) => (
+  <hr
+    {...rest}
+    ref={ref}
+    className={cl("navds-dropdown__divider", className)}
+  />
+));

 export default Divider;
@@ -9,23 +9,20 @@ export interface GroupedHeadingProps
  children: React.ReactNode;
 }

-export type GroupedHeadingType = React.ForwardRefExoticComponent<
-  GroupedHeadingProps & React.RefAttributes<HTMLElement>
->;
-
-export const GroupedHeading: GroupedHeadingType = forwardRef(
-  ({ className, ...rest }, ref) => (
-    <dt
-      {...rest}
-      ref={ref}
-      className={cl(
-        "navds-dropdown__list-heading",
-        "navds-heading",
-        "navds-heading--xsmall",
-        className
-      )}
-    />
-  )
-);
+export const GroupedHeading = forwardRef<
+  HTMLDetailsElement,
+  GroupedHeadingProps
+>(({ className, ...rest }, ref) => (
+  <dt
+    {...rest}
+    ref={ref}
+    className={cl(
+      "navds-dropdown__list-heading",
+      "navds-heading",
+      "navds-heading--xsmall",
+      className
+    )}
+  />
+));

 export default GroupedHeading;
@@ -11,35 +11,31 @@ export interface GroupedItemProps
  children: React.ReactNode;
 }

-export type GroupedItemType = OverridableComponent<
+export const GroupedItem: OverridableComponent<
  GroupedItemProps,
  HTMLButtonElement
->;
+> = forwardRef(({ as: Component = "button", className, ...rest }, ref) => {
+  const context = useContext(DropdownContext);

-export const GroupedItem: GroupedItemType = forwardRef(
-  ({ as: Component = "button", className, ...rest }, ref) => {
-    const context = useContext(DropdownContext);
-
-    return (
-      <dd className="navds-dropdown__list-item">
-        <Component
-          {...rest}
-          value={rest.children}
-          onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
-            context?.onSelect?.(event);
-            rest?.onClick?.(event);
-          }}
-          ref={ref}
-          className={cl(
-            "navds-dropdown__item",
-            "navds-body-short",
-            "navds-body-short--small",
-            className
-          )}
-        />
-      </dd>
-    );
-  }
-);
+  return (
+    <dd className="navds-dropdown__list-item">
+      <Component
+        {...rest}
+        value={rest.children}
+        onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+          context?.onSelect?.(event);
+          rest?.onClick?.(event);
+        }}
+        ref={ref}
+        className={cl(
+          "navds-dropdown__item",
+          "navds-body-short",
+          "navds-body-short--small",
+          className
+        )}
+      />
+    </dd>
+  );
+});

 export default GroupedItem;
@@ -1,7 +1,8 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
-import GroupedHeading, { GroupedHeadingType } from "./Heading";
-import GroupedItem, { GroupedItemType } from "./Item";
+import React, { forwardRef } from "react";
+import { OverridableComponent } from "../../../util/OverridableComponent";
+import GroupedHeading, { GroupedHeadingProps } from "./Heading";
+import GroupedItem, { GroupedItemProps } from "./Item";

 export interface GroupedListProps
  extends React.HTMLAttributes<HTMLDListElement> {
@@ -15,8 +16,17 @@ export interface GroupedListType
  extends React.ForwardRefExoticComponent<
    GroupedListProps & React.RefAttributes<HTMLDListElement>
  > {
-  Heading: GroupedHeadingType;
-  Item: GroupedItemType;
+  /**
+   * @see 🏷️ {@link GroupedHeadingProps}
+   */
+  Heading: React.ForwardRefExoticComponent<
+    GroupedHeadingProps & React.RefAttributes<HTMLDetailsElement>
+  >;
+  /**
+   * @see 🏷️ {@link GroupedItemProps}
+   * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+   */
+  Item: OverridableComponent<GroupedItemProps, HTMLButtonElement>;
 }

 export const DescriptionList = forwardRef(
@@ -10,13 +10,8 @@ export interface ListItemProps extends React.ButtonHTMLAttributes<HTMLElement> {
  children: React.ReactNode;
 }

-export type ListItemType = OverridableComponent<
-  ListItemProps,
-  HTMLButtonElement
->;
-
-export const ListItem: ListItemType = forwardRef(
-  ({ as: Component = "button", className, ...rest }, ref) => {
+export const ListItem: OverridableComponent<ListItemProps, HTMLButtonElement> =
+  forwardRef(({ as: Component = "button", className, ...rest }, ref) => {
    const context = useContext(DropdownContext);

    return (
@@ -38,7 +33,6 @@ export const ListItem: ListItemType = forwardRef(
        />
      </li>
    );
-  }
-);
+  });

 export default ListItem;
@@ -1,6 +1,7 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
-import ListItem, { ListItemType } from "./Item";
+import React, { forwardRef } from "react";
+import { OverridableComponent } from "../../../util/OverridableComponent";
+import ListItem, { ListItemProps } from "./Item";

 export interface ListProps extends React.HTMLAttributes<HTMLUListElement> {
  /**
@@ -13,7 +14,11 @@ export interface ListType
  extends React.ForwardRefExoticComponent<
    ListProps & React.RefAttributes<HTMLUListElement>
  > {
-  Item: ListItemType;
+  /**
+   * @see 🏷️ {@link ListItemProps}
+   * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+   */
+  Item: OverridableComponent<ListItemProps, HTMLButtonElement>;
 }

 export const List = forwardRef(({ className, children, ...rest }, ref) => (
@@ -1,8 +1,8 @@
-import { Popover } from "../../popover";
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
+import { Popover } from "../../popover";
 import { DropdownContext } from "../Dropdown";
-import Divider, { DividerType } from "./Divider";
+import Divider from "./Divider";
 import GroupedList, { GroupedListType } from "./GroupedList";
 import List, { ListType } from "./List";

@@ -43,9 +43,20 @@ export interface MenuType<Props = MenuProps>
  extends React.ForwardRefExoticComponent<
    Props & React.RefAttributes<HTMLDivElement>
  > {
+  /**
+   * @see 🏷️ {@link ListType}
+   */
  List: ListType;
+  /**
+   * @see 🏷️ {@link GroupedListType}
+   */
  GroupedList: GroupedListType;
-  Divider: DividerType;
+  /**
+   * @see 🏷️ {@link React.HTMLAttributes<HTMLHRElement>}
+   */
+  Divider: React.ForwardRefExoticComponent<
+    React.HTMLAttributes<HTMLHRElement> & React.RefAttributes<HTMLHRElement>
+  >;
 }

 export const Menu = forwardRef<HTMLDivElement, MenuProps>(
@@ -10,11 +10,7 @@ export interface ToggleProps
  children: React.ReactNode;
 }

-export type ToggleType = React.ForwardRefExoticComponent<
-  ToggleProps & React.RefAttributes<HTMLButtonElement>
->;
-
-export const Toggle: ToggleType = forwardRef(
+export const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(
  ({ className, onClick, ...rest }, ref) => {
    const context = useContext(DropdownContext);

@@ -1,28 +1,48 @@
 import cl from "clsx";
 import React, { createContext, forwardRef, useRef, useState } from "react";
+import { OverridableComponent } from "../util/OverridableComponent";
 import ExpansionCardContent, {
-  ExpansionCardContentType,
+  ExpansionCardContentProps,
 } from "./ExpansionCardContent";
 import {
  ExpansionCardDescription,
-  ExpansionCardDescriptionType,
+  ExpansionCardDescriptionProps,
 } from "./ExpansionCardDescription";
 import ExpansionCardHeader, {
-  ExpansionCardHeaderType,
+  ExpansionCardHeaderProps,
 } from "./ExpansionCardHeader";
 import {
  ExpansionCardTitle,
-  ExpansionCardTitleType,
+  ExpansionCardTitleProps,
 } from "./ExpansionCardTitle";

 interface ExpansionCardComponent
  extends React.ForwardRefExoticComponent<
    ExpansionCardProps & React.RefAttributes<HTMLDivElement>
  > {
-  Header: ExpansionCardHeaderType;
-  Title: ExpansionCardTitleType;
-  Description: ExpansionCardDescriptionType;
-  Content: ExpansionCardContentType;
+  /**
+   * @see 🏷️ {@link ExpansionCardHeaderProps}
+   */
+  Header: React.ForwardRefExoticComponent<
+    ExpansionCardHeaderProps & React.RefAttributes<HTMLDivElement>
+  >;
+  /**
+   * @see 🏷️ {@link ExpansionCardTitleProps}
+   * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+   */
+  Title: OverridableComponent<ExpansionCardTitleProps, HTMLHeadingElement>;
+  /**
+   * @see 🏷️ {@link ExpansionCardDescriptionProps}
+   */
+  Description: React.ForwardRefExoticComponent<
+    ExpansionCardDescriptionProps & React.RefAttributes<HTMLParagraphElement>
+  >;
+  /**
+   * @see 🏷️ {@link ExpansionCardContentProps}
+   */
+  Content: React.ForwardRefExoticComponent<
+    ExpansionCardContentProps & React.RefAttributes<HTMLDivElement>
+  >;
 }

 interface ExpansionCardCommonProps
@@ -77,6 +97,24 @@ export const ExpansionCardContext = createContext<ExpansionCardContextProps>({
 export type ExpansionCardProps = ExpansionCardCommonProps &
  ExpansionCardConditionalProps;

+/**
+ * A component that displays an expandable card.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/expansioncard)
+ * @see 🏷️ {@link ExpansionCardProps}
+ *
+ * @example
+ * ```jsx
+ * <ExpansionCard aria-label="default-demo">
+ *   <ExpansionCard.Header>
+ *     <ExpansionCard.Title>Utbetaling av sykepenger</ExpansionCard.Title>
+ *   </ExpansionCard.Header>
+ *   <ExpansionCard.Content>
+ *     <Innhold />
+ *   </ExpansionCard.Content>
+ * </ExpansionCard>
+ * ```
+ */
 export const ExpansionCard = forwardRef<HTMLDivElement, ExpansionCardProps>(
  (
    {
@@ -8,36 +8,33 @@ export interface ExpansionCardContentProps
  children: React.ReactNode;
 }

-export type ExpansionCardContentType = React.ForwardRefExoticComponent<
-  ExpansionCardContentProps & React.RefAttributes<HTMLDivElement>
->;
+const ExpansionCardContent = forwardRef<
+  HTMLDivElement,
+  ExpansionCardContentProps
+>(({ children, className, ...rest }, ref) => {
+  const panelContext = useContext(ExpansionCardContext);

-const ExpansionCardContent: ExpansionCardContentType = forwardRef(
-  ({ children, className, ...rest }, ref) => {
-    const panelContext = useContext(ExpansionCardContext);
-
-    if (panelContext === null) {
-      console.error(
-        "<ExpansionCard.Content> has to be used within an <ExpansionCard>"
-      );
-      return null;
-    }
-
-    return (
-      <BodyLong
-        {...rest}
-        ref={ref}
-        as="div"
-        className={cl("navds-expansioncard__content", className, {
-          "navds-expansioncard__content--closed": !panelContext.open,
-        })}
-        aria-hidden={!panelContext.open}
-        size={panelContext.size}
-      >
-        <div className="navds-expansioncard__content-inner">{children}</div>
-      </BodyLong>
+  if (panelContext === null) {
+    console.error(
+      "<ExpansionCard.Content> has to be used within an <ExpansionCard>"
    );
+    return null;
  }
-);
+
+  return (
+    <BodyLong
+      {...rest}
+      ref={ref}
+      as="div"
+      className={cl("navds-expansioncard__content", className, {
+        "navds-expansioncard__content--closed": !panelContext.open,
+      })}
+      aria-hidden={!panelContext.open}
+      size={panelContext.size}
+    >
+      <div className="navds-expansioncard__content-inner">{children}</div>
+    </BodyLong>
+  );
+});

 export default ExpansionCardContent;
@@ -3,33 +3,31 @@ import cl from "clsx";
 import { BodyLong } from "../typography/BodyLong";
 import { ExpansionCardContext } from "./ExpansionCard";

-interface ExpansionCardDescriptionProps
+export interface ExpansionCardDescriptionProps
  extends React.HTMLAttributes<HTMLParagraphElement> {
  children: React.ReactNode;
 }

-export type ExpansionCardDescriptionType = React.ForwardRefExoticComponent<
-  ExpansionCardDescriptionProps & React.RefAttributes<HTMLParagraphElement>
->;
+export const ExpansionCardDescription = forwardRef<
+  HTMLParagraphElement,
+  ExpansionCardDescriptionProps
+>(({ className, ...rest }, ref) => {
+  const panelContext = useContext(ExpansionCardContext);

-export const ExpansionCardDescription: ExpansionCardDescriptionType =
-  forwardRef(({ className, ...rest }, ref) => {
-    const panelContext = useContext(ExpansionCardContext);
-
-    if (panelContext === null) {
-      console.error(
-        "<ExpansionCard.Description> has to be used within an <ExpansionCard>"
-      );
-      return null;
-    }
-
-    return (
-      <BodyLong
-        {...rest}
-        as="p"
-        ref={ref}
-        className={cl("navds-link-panel__description", className)}
-        size={panelContext.size}
-      />
+  if (panelContext === null) {
+    console.error(
+      "<ExpansionCard.Description> has to be used within an <ExpansionCard>"
    );
-  });
+    return null;
+  }
+
+  return (
+    <BodyLong
+      {...rest}
+      as="p"
+      ref={ref}
+      className={cl("navds-link-panel__description", className)}
+      size={panelContext.size}
+    />
+  );
+});
@@ -8,43 +8,40 @@ export interface ExpansionCardHeaderProps
  children: React.ReactNode;
 }

-export type ExpansionCardHeaderType = React.ForwardRefExoticComponent<
-  ExpansionCardHeaderProps & React.RefAttributes<HTMLDivElement>
->;
+const ExpansionCardHeader = forwardRef<
+  HTMLDivElement,
+  ExpansionCardHeaderProps
+>(({ children, className, ...rest }, ref) => {
+  const panelContext = useContext(ExpansionCardContext);

-const ExpansionCardHeader: ExpansionCardHeaderType = forwardRef(
-  ({ children, className, ...rest }, ref) => {
-    const panelContext = useContext(ExpansionCardContext);
-
-    if (panelContext === null) {
-      console.error(
-        "<ExpansionCard.Header> has to be used within an <ExpansionCard>"
-      );
-      return null;
-    }
-
-    return (
-      <div
-        ref={ref}
-        {...rest}
-        className={cl("navds-expansioncard__header", className)}
-      >
-        <div className="navds-expansioncard__header-content">{children}</div>
-
-        <button
-          className="navds-expansioncard__header-button"
-          onClick={() => panelContext.toggleOpen()}
-          type="button"
-          aria-expanded={panelContext.open}
-        >
-          <ChevronDownIcon
-            className="navds-expansioncard__header-chevron"
-            title="Vis mer"
-          />
-        </button>
-      </div>
+  if (panelContext === null) {
+    console.error(
+      "<ExpansionCard.Header> has to be used within an <ExpansionCard>"
    );
+    return null;
  }
-);
+
+  return (
+    <div
+      ref={ref}
+      {...rest}
+      className={cl("navds-expansioncard__header", className)}
+    >
+      <div className="navds-expansioncard__header-content">{children}</div>
+
+      <button
+        className="navds-expansioncard__header-button"
+        onClick={() => panelContext.toggleOpen()}
+        type="button"
+        aria-expanded={panelContext.open}
+      >
+        <ChevronDownIcon
+          className="navds-expansioncard__header-chevron"
+          title="Vis mer"
+        />
+      </button>
+    </div>
+  );
+});

 export default ExpansionCardHeader;
@@ -2,7 +2,7 @@ import React, { forwardRef } from "react";
 import cl from "clsx";
 import { OverridableComponent } from "../util/OverridableComponent";

-interface ExpansionCardTitleProps
+export interface ExpansionCardTitleProps
  extends React.HTMLAttributes<HTMLHeadingElement> {
  children: React.ReactNode;
  /**
@@ -12,12 +12,10 @@ interface ExpansionCardTitleProps
  size?: "large" | "medium" | "small";
 }

-export type ExpansionCardTitleType = OverridableComponent<
+export const ExpansionCardTitle: OverridableComponent<
  ExpansionCardTitleProps,
  HTMLHeadingElement
->;
-
-export const ExpansionCardTitle: ExpansionCardTitleType = forwardRef(
+> = forwardRef(
  ({ className, as: Component = "h3", size = "medium", ...rest }, ref) => (
    <Component
      {...rest}
@@ -26,6 +26,24 @@ export interface ConfirmationPanelProps
  errorId?: string;
 }

+/**
+ * A component that displays a confirmation checkbox with a label.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/confirmationpanel)
+ * @see 🏷️ {@link ConfirmationPanelProps}
+ *
+ * @example
+ * ```jsx
+      <ConfirmationPanel
+        checked={state}
+        label="Ja, jeg samtykker."
+        onChange={() => setState((x) => !x)}
+      >
+        For å komme videre må du gi oss lov til å hente inn og bruke opplysninger
+        om deg.
+      </ConfirmationPanel>
+ * ```
+ */
 export const ConfirmationPanel = forwardRef<
  HTMLInputElement,
  ConfirmationPanelProps
@@ -30,6 +30,22 @@ export interface SelectProps
  style?: React.CSSProperties;
 }

+/**
+ * A component that displays a select input field.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/select)
+ * @see 🏷️ {@link SelectProps}
+ *
+ * @example
+ * ```jsx
+ * <Select label="Hvilket land har du bosted i.">
+ *   <option value="">Velg land</option>
+ *   <option value="norge">Norge</option>
+ *   <option value="sverige">Sverige</option>
+ *   <option value="danmark">Danmark</option>
+ * </Select>
+ * ```
+ */
 export const Select = forwardRef<HTMLSelectElement, SelectProps>(
  (props, ref) => {
    const {
@@ -55,6 +55,17 @@ export interface SwitchProps
  description?: string;
 }

+/**
+ * A component that displays a switch input field.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/switch)
+ * @see 🏷️ {@link SwitchProps}
+ *
+ * @example
+ * ```jsx
+ * <Switch>Slå på notifikasjoner</Switch>
+ * ```
+ */
 export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
  (props, ref) => {
    const { inputProps, size } = useFormField(props, "switch");
@@ -33,6 +33,17 @@ export interface TextFieldProps
  type?: "email" | "number" | "password" | "tel" | "text" | "url";
 }

+/**
+ * A component that displays a text input field with a label.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/textfield)
+ * @see 🏷️ {@link TextFieldProps}
+ *
+ * @example
+ * ```jsx
+ * <TextField label="Har du noen tilbakemeldinger?" />
+ * ```
+ */
 export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
  (props, ref) => {
    const {
@@ -55,6 +55,17 @@ export interface TextareaProps
  };
 }

+/**
+ * A component that displays a textarea input field with a label.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/textarea)
+ * @see 🏷️ {@link TextareaProps}
+ *
+ * @example
+ * ```jsx
+ * <Textarea label="Har du noen tilbakemeldinger?" />
+ * ```
+ */
 export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
  (props, ref) => {
    const {
@@ -35,6 +35,21 @@ export interface CheckboxGroupProps
  onChange?: (value: any[]) => void;
 }

+/**
+ * A component that allows users to select one or more options from a list.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/checkbox)
+ * @see 🏷️ {@link CheckboxProps}
+ *
+ * @example
+ * ```jsx
+ * <CheckboxGroup legend="Hvor vil du sitte?">
+ *   <Checkbox value="Bakerst">Bakerst</Checkbox>
+ *   <Checkbox value="Midterst">Midterst</Checkbox>
+ *   <Checkbox value="Fremst">Fremst</Checkbox>
+ * </CheckboxGroup>
+ * ```
+ */
 export const CheckboxGroup = forwardRef<
  HTMLFieldSetElement,
  CheckboxGroupProps
@@ -29,9 +29,39 @@ interface ErrorSummaryComponent
  extends React.ForwardRefExoticComponent<
    ErrorSummaryProps & React.RefAttributes<HTMLDivElement>
  > {
+  /**
+   * Link to error
+   *
+   * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+   *
+   * @example
+   * ```jsx
+   * <ErrorSummary.Item href="#1">
+   *   Felt må fylles ut med alder
+   * </ErrorSummary.Item>
+   * ```
+   */
  Item: ErrorSummaryItemType;
 }

+/**
+ * A component that displays a summary of errors.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/errorsummary)
+ * @see 🏷️ {@link ErrorSummaryProps}
+ *
+ * @example
+ * ```jsx
+ * <ErrorSummary heading="Du må fikse disse feilene før du kan sende inn søknad.">
+ *   <ErrorSummary.Item href="#1">
+ *     Felt må fylles ut med alder
+ *   </ErrorSummary.Item>
+ *   <ErrorSummary.Item href="#2">
+ *     Tekstfeltet må ha en godkjent e-mail
+ *   </ErrorSummary.Item>
+ * </ErrorSummary>
+ * ```
+ */
 export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
  (
    {
@@ -8,6 +8,10 @@ export interface ErrorSummaryItemProps
   * Link text
   */
  children: React.ReactNode;
+  /**
+   * Link to errormessage
+   */
+  href?: string;
 }

 export type ErrorSummaryItemType = OverridableComponent<
@@ -47,8 +47,8 @@ export interface RadioGroupProps

 /**
 * Form radio group
- * @see https://aksel.nav.no/komponenter/core/radio
- * @see {@link RadioGroupProps}
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/radio)
+ * @see 🏷️ {@link RadioGroupProps}
 * @example
 * <RadioGroup legend="Får du AAP nå?">
 *    <Radio value="ja">Ja</Radio>
@@ -91,6 +91,19 @@ export const SearchContext = React.createContext<SearchContextProps | null>(
  null
 );

+/**
+ * A component that displays a search input field.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/search)
+ * @see 🏷️ {@link SearchProps}
+ *
+ * @example
+ * ```jsx
+ * <form>
+ *   <Search label="Søk alle NAV sine sider" variant="primary" />
+ * </form>
+ * ```
+ */
 export const Search = forwardRef<HTMLInputElement, SearchProps>(
  (props, ref) => {
    const {
@@ -18,6 +18,21 @@ export interface GuidePanelProps extends HTMLAttributes<HTMLDivElement> {
  poster?: boolean;
 }

+/**
+ * A component that displays a guide panel.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/guidepanel)
+ * @see 🏷️ {@link GuidePanelProps}
+ *
+ * @example
+ * ```jsx
+ * <GuidePanel>
+ *   Saksbehandlingstiden varierer fra kommune til kommune. Hvis det går mer
+ *   enn X måneder siden du søkte, skal du få brev om at saksbehandlingstiden
+ *   er forlenget.
+ * </GuidePanel>
+ * ```
+ */
 export const GuidePanel = forwardRef<HTMLDivElement, GuidePanelProps>(
  (
    { children, className, illustration, poster = false, color, ...rest },
@@ -29,8 +29,25 @@ export interface HelpTextProps
    | "right-end"
    | "left-start"
    | "left-end";
+  /**
+   * Classname for wrapper
+   */
+  wrapperClassName?: string;
 }

+/**
+ * A component that displays a help text button with a popover.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/helptext)
+ * @see 🏷️ {@link HelpTextProps}
+ *
+ * @example
+ * ```jsx
+ * <HelpText title="Hvor kommer dette fra?">
+ *   Informasjonen er hentet fra X sin statistikk fra 2021
+ * </HelpText>
+ * ```
+ */
 export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
  (
    {
@@ -40,6 +57,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
      strategy = "absolute",
      title = "hjelp",
      onClick,
+      wrapperClassName,
      ...rest
    },
    ref
@@ -49,7 +67,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
    const [open, setOpen] = useState(false);

    return (
-      <div className="navds-help-text">
+      <div className={cl("navds-help-text", wrapperClassName)}>
        <button
          {...rest}
          ref={mergedRef}
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from "react";
-import { HelpText } from "..";
+import { BodyLong, Heading, HelpText } from "..";

 export default {
  title: "ds-react/HelpText",
@@ -65,3 +65,36 @@ export const Open = () => {
    </HelpText>
  );
 };
+
+export const WrapperClassName = {
+  render: () => {
+    return (
+      <div>
+        <BodyLong spacing>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
+          perspiciatis vero voluptatum, asperiores cumque, deserunt accusantium
+          ullam ipsa accusamus officia cupiditate quae unde esse culpa, ratione
+          ab quam ea quas?
+        </BodyLong>
+
+        <Heading level="2" size="medium">
+          67 år og 1 måneder øklasdjkl askdak døkasøk daøkdkølasøkld asølkdøka
+          <HelpText wrapperClassName="testClass">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
+            perspiciatis vero voluptatum, asperiores cumque, deserunt
+            accusantium ullam ipsa accusamus officia cupiditate quae unde esse
+            culpa, ratione ab quam ea quas?
+          </HelpText>
+          <style>{`.testClass {display: inline-block; margin-left: 0.5rem; vertical-align: middle;}`}</style>
+        </Heading>
+
+        <BodyLong spacing>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
+          perspiciatis vero voluptatum, asperiores cumque, deserunt accusantium
+          ullam ipsa accusamus officia cupiditate quae unde esse culpa, ratione
+          ab quam ea quas?
+        </BodyLong>
+      </div>
+    );
+  },
+};
@@ -22,6 +22,7 @@ export * from "./panel";
 export * from "./popover";
 export * from "./provider";
 export * from "./read-more";
+export * from "./skeleton";
 export * from "./stepper";
 export * from "./table";
 export * from "./tabs";
@@ -1,17 +1,18 @@
+import cl from "clsx";
 import React, { forwardRef, HTMLAttributes } from "react";
+import { OverridableComponent } from "../util/OverridableComponent";
+import InternalHeaderButton, {
+  InternalHeaderButtonProps,
+} from "./InternalHeaderButton";
 import InternalHeaderTitle, {
-  InternalHeaderTitleType,
+  InternalHeaderTitleProps,
 } from "./InternalHeaderTitle";
 import InternalHeaderUser, {
-  InternalHeaderUserType,
+  InternalHeaderUserProps,
 } from "./InternalHeaderUser";
-import InternalHeaderButton, {
-  InternalHeaderButtonType,
-} from "./InternalHeaderButton";
 import InternalHeaderUserButton, {
-  InternalHeaderUserButtonType,
+  InternalHeaderUserButtonProps,
 } from "./InternalHeaderUserButton";
-import cl from "clsx";

 export interface InternalHeaderProps extends HTMLAttributes<HTMLElement> {
  children: React.ReactNode;
@@ -21,12 +22,60 @@ interface InternalHeaderComponent
  extends React.ForwardRefExoticComponent<
    InternalHeaderProps & React.RefAttributes<HTMLElement>
  > {
-  Title: InternalHeaderTitleType;
-  User: InternalHeaderUserType;
-  Button: InternalHeaderButtonType;
-  UserButton: InternalHeaderUserButtonType;
+  /**
+   * @see 🏷️ {@link InternalHeaderTitleProps}
+   * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+   */
+  Title: OverridableComponent<InternalHeaderTitleProps, HTMLAnchorElement>;
+  /**
+   * @see 🏷️ {@link InternalHeaderUserProps}
+   */
+  User: React.ForwardRefExoticComponent<
+    InternalHeaderUserProps & React.RefAttributes<HTMLDivElement>
+  >;
+  /**
+   * @see 🏷️ {@link InternalHeaderButtonProps}
+   * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+   */
+  Button: OverridableComponent<InternalHeaderButtonProps, HTMLButtonElement>;
+  /**
+   * @see 🏷️ {@link InternalHeaderUserButtonProps}
+   * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+   */
+  UserButton: OverridableComponent<
+    InternalHeaderUserButtonProps,
+    HTMLButtonElement
+  >;
 }

+/**
+ * Simple Header for internal pages and systems.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/i-header)
+ * @see 🏷️ {@link InternalHeaderProps}
+ *
+ * @example
+ * ```jsx
+ * <InternalHeader>
+ *   <InternalHeader.Title as="h1">Sykepenger</InternalHeader.Title>
+ *   <InternalHeader.User name="Ola Normann" className="ml-auto" />
+ * </InternalHeader>
+ * ```
+ * @example
+ * ```jsx
+ * <InternalHeader >
+ *  <InternalHeader.Title href="/#home">Tittel med lenke</InternalHeader.Title>
+ *  <Dropdown>
+ *    <InternalHeader.Button
+ *      as={Dropdown.Toggle}
+ *    >
+ *      <MenuGridIcon title="MenuGridIconer og oppslagsverk" />
+ *    </InternalHeader.Button>
+ *    <Dropdown.Menu />
+ *  </Dropdown>
+ * </InternalHeader>
+ * ```
+ */
 export const InternalHeader = forwardRef(({ className, ...rest }, ref) => (
  <header
    data-theme="dark"
@@ -9,20 +9,15 @@ export interface InternalHeaderButtonProps
   */
  children: React.ReactNode;
 }
-
-export type InternalHeaderButtonType = OverridableComponent<
+export const InternalHeaderButton: OverridableComponent<
  InternalHeaderButtonProps,
  HTMLButtonElement
->;
-
-export const InternalHeaderButton: InternalHeaderButtonType = forwardRef(
-  ({ as: Component = "button", className, ...rest }, ref) => (
-    <Component
-      {...rest}
-      ref={ref}
-      className={cl("navds-internalheader__button", className)}
-    />
-  )
-);
+> = forwardRef(({ as: Component = "button", className, ...rest }, ref) => (
+  <Component
+    {...rest}
+    ref={ref}
+    className={cl("navds-internalheader__button", className)}
+  />
+));

 export default InternalHeaderButton;
@@ -10,26 +10,18 @@ export interface InternalHeaderTitleProps
  children: React.ReactNode;
 }

-export type InternalHeaderTitleType = OverridableComponent<
+export const InternalHeaderTitle: OverridableComponent<
  InternalHeaderTitleProps,
  HTMLAnchorElement
->;
-
-export const InternalHeaderTitle: InternalHeaderTitleType = forwardRef(
-  ({ as: Component = "a", children, className, ...rest }, ref) => (
-    <Component
-      {...rest}
-      ref={ref}
-      size="xsmall"
-      className={cl(
-        "navds-internalheader__title",
-        "navds-body-short",
-        className
-      )}
-    >
-      <span>{children}</span>
-    </Component>
-  )
-);
+> = forwardRef(({ as: Component = "a", children, className, ...rest }, ref) => (
+  <Component
+    {...rest}
+    ref={ref}
+    size="xsmall"
+    className={cl("navds-internalheader__title", "navds-body-short", className)}
+  >
+    <span>{children}</span>
+  </Component>
+));

 export default InternalHeaderTitle;
@@ -14,10 +14,6 @@ export interface InternalHeaderUserProps
  description?: string;
 }

-export type InternalHeaderUserType = React.ForwardRefExoticComponent<
-  InternalHeaderUserProps & React.RefAttributes<HTMLDivElement>
->;
-
 export const InternalHeaderUser = forwardRef<
  HTMLDivElement,
  InternalHeaderUserProps
@@ -17,27 +17,24 @@ export interface InternalHeaderUserButtonProps
  description?: string;
 }

-export type InternalHeaderUserButtonType = OverridableComponent<
+export const InternalHeaderUserButton: OverridableComponent<
  InternalHeaderUserButtonProps,
  HTMLButtonElement
->;
-
-export const InternalHeaderUserButton: InternalHeaderUserButtonType =
-  forwardRef(({ as, name, description, className, ...rest }, ref) => (
-    <InternalHeaderButton
-      {...rest}
-      as={as}
-      ref={ref}
-      className={cl("navds-internalheader__user-button", className)}
-    >
-      <div>
-        <BodyShort size="small" as="div">
-          {name}
-        </BodyShort>
-        {description && <Detail as="div">{description}</Detail>}
-      </div>
-      <ChevronDownIcon title="vis meny" />
-    </InternalHeaderButton>
-  ));
+> = forwardRef(({ as, name, description, className, ...rest }, ref) => (
+  <InternalHeaderButton
+    {...rest}
+    as={as}
+    ref={ref}
+    className={cl("navds-internalheader__user-button", className)}
+  >
+    <div>
+      <BodyShort size="small" as="div">
+        {name}
+      </BodyShort>
+      {description && <Detail as="div">{description}</Detail>}
+    </div>
+    <ChevronDownIcon title="vis meny" />
+  </InternalHeaderButton>
+));

 export default InternalHeaderUserButton;
@@ -2,10 +2,10 @@ import React, { forwardRef } from "react";
 import { Panel, OverridableComponent } from "..";

 import cl from "clsx";
-import { LinkPanelTitle, LinkPanelTitleType } from "./LinkPanelTitle";
+import { LinkPanelTitle, LinkPanelTitleProps } from "./LinkPanelTitle";
 import {
  LinkPanelDescription,
-  LinkPanelDescriptionType,
+  LinkPanelDescriptionProps,
 } from "./LinkPanelDescription";
 import { ChevronRightIcon } from "@navikt/aksel-icons";

@@ -24,10 +24,36 @@ export interface LinkPanelProps

 interface LinkPanelComponentType
  extends OverridableComponent<LinkPanelProps, HTMLAnchorElement> {
-  Title: LinkPanelTitleType;
-  Description: LinkPanelDescriptionType;
+  /**
+   * @see 🏷️ {@link LinkPanelDescriptionProps}
+   * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+   */
+  Title: OverridableComponent<LinkPanelTitleProps, HTMLDivElement>;
+  /**
+   * @see 🏷️ {@link LinkPanelDescriptionProps}
+   */
+  Description: React.ForwardRefExoticComponent<
+    LinkPanelDescriptionProps & React.RefAttributes<HTMLDivElement>
+  >;
 }

+/**
+ * A component that displays a link panel.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/linkpanel)
+ * @see 🏷️ {@link LinkPanelProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * ```jsx
+ * <LinkPanel href="#" border>
+ *   <LinkPanel.Title>Arbeidssøker eller permittert</LinkPanel.Title>
+ *   <LinkPanel.Description>
+ *     Om jobb, registrering, CV, dagpenger og feriepenger av dagpenger
+ *   </LinkPanel.Description>
+ * </LinkPanel>
+ * ```
+ */
 export const LinkPanelComponent: OverridableComponent<
  LinkPanelProps,
  HTMLAnchorElement
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot]	e32dbe5c5d	Version Packages (#2071 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-06-22 15:23:42 +02:00
Ken	de36269582	✨ Oppdaterte shadow-tokens (#2041 )	2023-06-22 15:12:42 +02:00
Julian Nymark	6cb6c52770	Changelog generator script (#2046 )	2023-06-22 15:10:03 +02:00
Ken	a877d24ed0	🐛 Fikset corder-bleed på komponentside-header	2023-06-21 17:10:43 +02:00
github-actions[bot]andgithub-actions[bot]	a1b6332fa1	Version Packages (#2070 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-06-21 13:48:45 +02:00
Ken	99c08b8e4a	Fikset bug i Popover/Helptext der popover gikk helt ut i kantene (#2069 )	2023-06-21 13:44:59 +02:00
Ken	d39ed906c6	🐛 Fikset ExpansionCard bug ved nesting (#2067 )	2023-06-21 13:40:48 +02:00
github-actions[bot]andgithub-actions[bot]	3b31bd3d75	Version Packages (#2066 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-06-21 11:59:33 +02:00
Halvor HauganandKen	b1625ba388	✨ Chat: ny small-variant, justert design, forbedret UU (#2048 ) Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>	2023-06-21 09:40:50 +02:00
Ken	269d06c277	📝 ErrorSummary prop-dokumentasjon	2023-06-20 15:47:52 +02:00
Ken	0c56273f3b	🐛 Fikset rekkefølge på button-stories	2023-06-20 15:41:13 +02:00
Ken	ab6a96aed7	♻️ Oppdatert komponent demoer (#2063 )	2023-06-20 11:46:45 +02:00
Ken	9ee8a72082	🔥 Fjernet død kode, lazy-loader sanity-moduler bare brukt for preview	2023-06-19 19:53:50 +02:00
Ken	c2e5a92d8e	🎉 Oppdatert søk (#2062 )	2023-06-19 18:28:24 +02:00
Ken	6059aa59aa	🐛 Oppdatert playwright-config for mindre flaky tester	2023-06-19 16:21:13 +02:00
Ken	b877ada408	🐛 Fikset playwright-tester	2023-06-19 15:11:59 +02:00
Ken	4e339f183e	🔊 Oppdatert amplitude (#2061 )	2023-06-19 14:09:08 +02:00
Ken	1d62bf26ff	🛠️ Diverse småjustering for Aksel (#2060 )	2023-06-19 13:19:57 +02:00
github-actions[bot]andgithub-actions[bot]	da0fbc3299	Version Packages (#2057 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-06-19 13:02:23 +02:00
Ken	9f59e67e2a	⚡ Lazy-loading date-fns: sparer ~10kB first-load (#2058 )	2023-06-19 12:53:28 +02:00
Ken	ed7aafcac8	🎨 Oppdatert deploy image (#2059 )	2023-06-19 12:53:08 +02:00
Ken	dfbbe92a63	🎨 Helptext har nå en prop for wrapperClassName (#2056 )	2023-06-19 11:48:53 +02:00
Ken	42b5af64ab	🐛 Timeline Period brakk ved bruk av JSODOM	2023-06-17 10:25:45 +02:00
Ken	329119fa04	💄 DoDont-ikon er nå høyrestilt	2023-06-16 16:21:19 +02:00
Ken	0fc80f45cb	♿ Fikset regression der sanity ikke lengre støttet skjermlesere	2023-06-16 16:07:37 +02:00
Ken	337b9fda13	🐛 Fikset inlinecode bruk i heading	2023-06-16 12:58:26 +02:00
github-actions[bot]andgithub-actions[bot]	659e835da9	Version Packages (#2055 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-06-15 16:38:08 +02:00
Ken	e10f4375b1	Merge branch 'main' of https://github.com/navikt/aksel	2023-06-15 16:34:25 +02:00
Ken	9a8bb26c36	🐛 Timeline brakk ved bruk av JSDOM-tester	2023-06-15 16:33:40 +02:00
github-actions[bot]andgithub-actions[bot]	69aea38784	Version Packages (#2053 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-06-15 15:55:48 +02:00
Ken	8f16d1571e	🎨 Oppdatert ikoner (#2054 )	2023-06-15 15:51:47 +02:00
Marianne Røsvik	e2265c9a78	Added two new icons (#2047 )	2023-06-15 15:06:48 +02:00
Ken	925aa7a140	🐛 OverridableComponent omitter nå 'as' (#2051 )	2023-06-15 14:46:34 +02:00
Ken	7c17e40cac	🐛 Datepicker og Monthpicker lukker nå popover ved escape (#2052 )	2023-06-15 14:46:07 +02:00
github-actions[bot]andgithub-actions[bot]	3c8889ea88	Version Packages (#2050 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-06-13 16:49:54 +02:00
Ken	e060961050	🐛 Fikset bruk av text-subtle på skjemaelementer (#2049 )	2023-06-13 16:45:35 +02:00
Ken	18aa4ee7fb	Merge branch 'main' of https://github.com/navikt/aksel	2023-06-09 14:36:38 +02:00
Ken	f44edd76a2	Merge branch 'next'	2023-06-09 14:31:11 +02:00
github-actions[bot]andgithub-actions[bot]	1fa636bdd5	Version Packages (#2044 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-06-09 14:16:43 +02:00
Ken	44a75acb6b	🐛 className ble ikke riktig forwardet til period	2023-06-09 14:14:15 +02:00
Ken	550faee900	💄 Checkboard-pattern for transparent visning av tokens	2023-06-09 13:53:29 +02:00
Karl O	88b6174b0b	📝 La til next-logger så backend logging får rett log-level (#2042 )	2023-06-09 13:34:31 +02:00
Ken	fbf016b3bd	✨ Forbedringer for Aksel.nav.no UI (#2043 )	2023-06-09 13:05:59 +02:00
Julian Nymark Ken Ken	09fa503b98	initial template for PR (#2019 ) * initial template for PR * update template * update template * 📝 Oppdatert template --------- Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> Co-authored-by: Ken <ken.aleksander@gmail.com>	2023-06-09 09:55:28 +02:00
Ken	f5688485f5	⬆️ Oppdatert Sanity	2023-06-08 18:43:14 +02:00
github-actions[bot]andgithub-actions[bot]	6385c4686e	Version Packages (#2039 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-06-08 16:07:32 +02:00
Ken	30068dca3f	📝 La til jsdoc for skeleton-komponent	2023-06-08 16:03:27 +02:00
github-actions[bot]andgithub-actions[bot]	3aa04d2375	Version Packages (#2038 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-06-08 15:25:09 +02:00
Ken	91343563c9	🐛 Fikset markering av tekst internt i Skeleton-komponent	2023-06-08 15:21:52 +02:00
Ken	d5c8112339	📝 Fikset typo i skeleton-docs	2023-06-08 15:02:24 +02:00
github-actions[bot]andgithub-actions[bot]	e6cc9d1b4f	Version Packages (#2031 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-06-08 14:49:16 +02:00
Ken	db8c38a094	[Ny komponent] Skeleton (#1821 )	2023-06-08 14:44:08 +02:00
Ken	35041e64eb	Update README.md	2023-06-08 08:17:20 +02:00
Ken	690422d824	🐛 Fikset darkmode for skjemakomponenter	2023-06-07 20:10:28 +02:00
Ken	b54bebd308	⚡ Forbedret søk	2023-06-07 16:11:40 +02:00
Ken	8db194170c	🐛 Fikset chips.css bug etter merge	2023-06-07 15:45:00 +02:00
Ken	7b42f536aa	🎨 Oppdatert Chips-komponent (#2035 )	2023-06-07 15:39:11 +02:00
Ken	b2f796d681	💄 Text-subtle, icon-subtle til 700 nivå, form-description farger(#2036 )	2023-06-07 15:22:02 +02:00
Julian Nymark Ken Ken	17d92c9ed5	add jsdoc (it's mostly copilot + some tweaks) (#2034 ) * 📝 add jsdoc (it's mostly copilot + some tweaks) * 😂 emojis * 🏷️ add jsdoc for overridableComponents * 🏷️ Oppdatert docgen for nestede komponenter * 🎨 Oppdatert chat * 🏷️ Dokumentert date-hooks * 🏷️ Expansioncard-props * 🏷️ Stepper.step jsdoc * 🏷️ Tabs jsdoc * 🏷️ Linkpaneltypes * 🏷️ List jsdoc * 🏷️ list jsdoc * 🏷️ InternalHeader-docs * 🏷️ jsdoc for dropdown * 🏷️ Timeline jsdoc --------- Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> Co-authored-by: Ken <ken.aleksander@gmail.com>	2023-06-07 14:19:34 +02:00
Ken	7bae5dce88	🎨 Fikset søketreff for CSS + overflow av ikonsøk-form	2023-06-06 15:43:38 +02:00
Ken	6aca0a4b6a	🎨 Data-tokens (#2032 )	2023-06-06 13:49:31 +02:00
Ken	4f7fde22a3	🐛 Regex-fix for sanity-url er	2023-06-06 13:45:34 +02:00
Ken	0dad69a8df	💄 Fadein frontpage-cards	2023-06-05 22:34:37 +02:00
Julian Nymark	c028f36e2b	Indent prop added to accordion (#2027 )	2023-06-05 19:38:44 +02:00
Ken	988fb36619	📝 Nettside-readme	2023-06-05 17:25:09 +02:00
Ken	f61cd88627	📝 Oppdatert readme	2023-06-05 17:10:26 +02:00