Version Packages (#2118 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
🐛 Fikset datepicker-bug for dynamsik oppdatering av 'month' (#2117 )
2026-10-13 01:02:02 +00:00 · 2023-07-19 20:14:53 +02:00 · 2023-07-19 20:12:14 +02:00 · 2023-07-19 17:45:55 +02:00 · 2023-07-17 22:35:24 +02:00 · 2023-07-17 22:32:16 +02:00
424 changed files with 13625 additions and 8506 deletions
@@ -1,6 +1,9 @@
 {
  "$schema": "https://unpkg.com/@changesets/config@2.2.0/schema.json",
-  "changelog": ["@changesets/changelog-github", { "repo": "navikt/aksel" }],
+  "changelog": [
+    "@svitejs/changesets-changelog-github-compact",
+    { "repo": "navikt/aksel" }
+  ],
  "commit": false,
  "fixed": [
    [
@@ -0,0 +1,44 @@
+### Description
+
+<!-- PR description/motivation
+add links to project-tasks, slack discussions etc here
+-->
+
+### Change summary
+
+<!-- Short summary of changes in PR
+- added variant x
+- fixed bug in y
+-->
+
+### PR Checklist 📝 (Remove fields after check!)
+
+#### New component? ✨
+
+- Check that component-styling is correctly configured in `@navikt/core/css/config/_mappings.js`. This is needed for correct build and CDN upload.
+- Check that styling is correctly exported from `@navikt/core/css/index.css`
+- Check that correct tokens for component is documented in `@navikt/core/css/tokens.json`
+- Check that only needed components and types are exported from `@navikt/core/react/src/index.ts`
+- Add JSDoc to component (see other components for reference)
+- Create storybook-stories for relevant component variations and compositions. Stories are used for [visual regression testing](https://www.chromatic.com/docs/), so make sure they are complete.
+- Is the component sufficiently complex to warrant tests? Add some unit-tests for jest.
+
+#### Component-updates 🎉
+
+- Revalidate if everything under `New component` is still accounted for
+- Deprecating/removing a CSS class? Add it to `@navikt/aksel-stylelint/src/deprecations.ts` with a suitable description. This helps stylelint-users keep their code clean and bug-free.
+
+#### Documentation 📝
+
+- Add/update component-demos for component `aksel.nav.no/website/pages/eksempler`
+- Create/Update documentation in sanity if needed
+  Note: Props, tokens and examples only updates to sanity on merge to main
+
+#### Versioning 🏷️
+
+- Run `yarn changeset` to generate a version-entry for change.
+- - Bug/hotfix: Patch
+- - New feature: Minor
+- - Breaking change: Major
+- Adding breaking changes? Consider adding a codemod for easier migration.
+- Breaking changes also needs documentation under "Migration"-page on website
@@ -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
@@ -4,7 +4,7 @@ import "./layout.css";
 export const parameters = {
  options: {
    storySort: {
-      method: "",
+      method: "alphabetical",
      order: ["Intro", "ds-react", ["form"], ["Default"], "ds-icons"],
      locales: "",
    },
@@ -1,208 +1,99 @@
 # @navikt/aksel-icons

-## 4.0.0
+## 4.7.1

-## 3.4.2
+## 4.7.0

-## 3.4.1
+## 4.6.1

-## 3.4.0
+## 4.6.0

-## 3.3.1
+## 4.5.0

-## 3.3.0
+## 4.4.2

-## 3.2.4
+## 4.4.1
+
+## 4.1.5
+
+### Patch Changes
+
+- Nye ikoner `ChevronRightLast` og `ChevronLeftLast` ([PR](https://github.com/navikt/aksel/pull/2054))

 ## 3.2.3

 ### Patch Changes

- [#1998](https://github.com/navikt/aksel/pull/1998) [`53c98181c`](https://github.com/navikt/aksel/commit/53c98181c327ead3406bec3487c10232af7d463a) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: Nye ikoner!
-
-  - :sparkles: FileParagraph
-  - :sparkles: FilePlus
-
-## 3.2.2
-
-## 3.2.1
-
-## 3.2.0
-
-## 3.1.3
-
-## 3.1.2
-
-## 3.1.1
-
-## 3.1.0
-
-## 3.0.1
-
-## 3.0.0
+- Nye ikoner `FileParagraph` og `FilePlus` ([PR](https://github.com/navikt/aksel/pull/1998))

 ## 2.9.8

 ### Patch Changes

- [#1959](https://github.com/navikt/aksel/pull/1959) [`8790c5997`](https://github.com/navikt/aksel/commit/8790c5997e0d647419bdb5080c86781d08c196b8) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :lipstick: Statusikoner er nå tydeligere og mer konsistente.
+- Oppdatert Statusikoner til å være tydeligere og mer konsistente. ([PR](https://github.com/navikt/aksel/pull/1959))

 ## 2.9.7

 ### Patch Changes

- :bug: CheckmarkIcon
+- Fikset `CheckmarkIcon`-bug

 ## 2.9.6

 ### Patch Changes

- [#1956](https://github.com/navikt/aksel/pull/1956) [`8c8559009`](https://github.com/navikt/aksel/commit/8c8559009982911bc4402913656ba4cc6a223dd1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Fikset CheckmarkCircleIcon
-
-## 2.9.5
-
-## 2.9.4
+- Fikset `CheckmarkCircleIcon`-bug ([PR](https://github.com/navikt/aksel/pull/1956))

 ## 2.9.3

 ### Patch Changes

- [#1950](https://github.com/navikt/aksel/pull/1950) [`c03d53d5a`](https://github.com/navikt/aksel/commit/c03d53d5aa2dc7f06a223d48069fa21ee39bb396) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Nye ikoner
-
-  - :tada: BulletList
-  - :tada: NumberList
-
-## 2.9.2
-
-## 2.9.1
-
-## 2.9.0
-
-## 2.8.16
+- Nye ikoner `BulletList` og `NumberList` ([PR](https://github.com/navikt/aksel/pull/1950))

 ## 2.8.15

 ### Patch Changes

- [#1928](https://github.com/navikt/aksel/pull/1928) [`dfe923582`](https://github.com/navikt/aksel/commit/dfe923582a57b41c77cfb4fbfa7c56be047ef2b0) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: Lagt til nye ikoner :tada:
-
-  - HandKnot.svg
-  - HandKnotFilled.svg
-
- [#1930](https://github.com/navikt/aksel/pull/1930) [`6682be1c8`](https://github.com/navikt/aksel/commit/6682be1c8e6562213c64e5be4bed70fef54ab865) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Alle pakker implementerer nå npm provenance (beta)
-
-## 2.8.14
+- :tada: Nye ikoner `HandKnot` og `HandKnotFilled` ([PR](https://github.com/navikt/aksel/pull/1928))

 ## 2.8.13

 ### Patch Changes

- [#1921](https://github.com/navikt/aksel/pull/1921) [`ecd6241e5`](https://github.com/navikt/aksel/commit/ecd6241e5751519fbda800a5f41a613957dbf77c) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Oppdatert ikoner :tada:
-
-## 2.8.12
+- Oppdatert `InformationSquare`-ikon ([PR](https://github.com/navikt/aksel/pull/1921))

 ## 2.8.11

 ### Patch Changes

- [#1909](https://github.com/navikt/aksel/pull/1909) [`270427910`](https://github.com/navikt/aksel/commit/2704279107a5fbf93048de37d014e78f6721438f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Oppdatert ikoner
-
-## 2.8.10
-
-## 2.8.9
+- Oppdatert `VideoSlack`, `Questionmark` og `Information`-ikoner ([PR](https://github.com/navikt/aksel/pull/1909))

 ## 2.8.8

 ### Patch Changes

- [`ed8e28454`](https://github.com/navikt/aksel/commit/ed8e284540a9e3a5be7d1d5e393f31db86962613) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Nye ikoner
-
-  - :tada: VideoSlash
-  - :tada: VideoSlashFill
-
-## 2.8.7
-
-## 2.8.6
-
-## 2.8.5
+- Nye ikoner `VideoSlash` og `VideoSlashFill`

 ## 2.8.4

 ### Patch Changes

- Fikset Sourcemap-bug i Aksel-icons
-
-## 2.8.3
-
-## 2.8.2
-
-## 2.8.1
-
-## 2.8.0
-
-## 2.7.8
+- Fikset Sourcemap-bug

 ## 2.7.7

 ### Patch Changes

- [`a22ac3eb7`](https://github.com/navikt/aksel/commit/a22ac3eb78135bf93d4771802475396849809c03) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :Sparkles: Nye ikoner
-
-  - :tada: CaretUpDownFilledDown
-  - :tada: CaretUpDownFilledUp
-  - :tada: CloudDown
-  - :tada: CloudDownFill
-  - :tada: CloudUp
-  - :tada: CloudUpFill
-  - :tada: HddDown
-  - :tada: HddDownFill
-  - :tada: HddUp
-  - :tada: HddUpFill
-  - :tada: Inbox
-  - :tada: InboxDown
-  - :tada: InboxDownFill
-  - :tada: InboxFill
-  - :tada: InboxUp
-  - :tada: InboxUpFill
-  - :tada: ShoppingBasket
-  - :tada: ShoppingBasketFill
-
-## 2.7.6
-
-## 2.7.5
+- Nye ikoner `CaretUpDownFilledDown`, `CaretUpDownFilledUp`, `CloudDown`, `CloudDownFill`, `CloudUp`, `CloudUpFill`, `HddDown`, `HddDownFill`, `HddUp`, `HddUpFill`, `Inbox`, `InboxDown`, `InboxDownFill`, `InboxFill`, `InboxUp`, `InboxUpFill`, `ShoppingBasket`, `ShoppingBasketFill`

 ## 2.7.4

 ### Patch Changes

- [#1852](https://github.com/navikt/aksel/pull/1852) [`a4fd1dd22`](https://github.com/navikt/aksel/commit/a4fd1dd227b9b56b747f962aa0c2b2dc9b4e30a4) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Oppdatert ikonpakke med nye ikoner :rocket:
-
-  - :tada: CaretDownFill
-  - :tada: CaretLeft
-  - :tada: CaretLeftFill
-  - :tada: CaretLeftRight
-  - :tada: CaretLeftRightFill
-  - :tada: CaretRight
-  - :tada: CaretRightFill
-  - :tada: CaretUpDownFill
-  - :tada: CaretUpFill
-  - :tada: Escalator
-  - :tada: Moon
-  - :tada: MoonFill
-  - :fire: EscalatorStroke
-
-## 2.7.3
-
-## 2.7.2
-
-## 2.7.1
-
-### Patch Changes
-
- [`7d9517cf9`](https://github.com/navikt/aksel/commit/7d9517cf90331b57441a0787a04eef66efd1b9b0) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Public-access for ny ikonpakke i GPR
+- Nye ikoner, `CaretDownFill`, `CaretLeft`, `CaretLeftFill`, `CaretLeftRight`, `CaretLeftRightFill`, `CaretRight`, `CaretRightFill`, `CaretUpDownFill`, `CaretUpFill`, `Escalator`, `Moon`, `MoonFill`. Fjernet `EscalatorStroke` ([PR](https://github.com/navikt/aksel/pull/1852))

 ## 2.7.0

 ### Minor Changes

- [#1847](https://github.com/navikt/aksel/pull/1847) [`de291a972`](https://github.com/navikt/aksel/commit/de291a9722c262d40fecaec7be55b71f86e60160) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Ny ikonpakke med for core icons 3! `@navikt/aksel-icons`
+- Ny ikonpakke med for core icons 3! `@navikt/aksel-icons` ([PR](https://github.com/navikt/aksel/pull/1847))
@@ -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.7.1",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -1,21 +1,39 @@
 # @navikt/aksel-stylelint

-## 4.0.0
+## 4.7.1
+
+## 4.7.0
+
+## 4.6.1
+
+## 4.6.0
+
+## 4.5.0
+
+## 4.4.2
+
+## 4.4.1
+
+## 4.1.0
+
+### Minor Changes
+
+- Deprecated klassenavn `navds-chips--icon-left` ([PR](https://github.com/navikt/aksel/pull/2035))

 ## 3.4.2

 ### Patch Changes

- [#2017](https://github.com/navikt/aksel/pull/2017) [`7615dbbb5`](https://github.com/navikt/aksel/commit/7615dbbb54c7c96e2252366188547b27b2ac1142) Thanks [@JulianNymark](https://github.com/JulianNymark)! - add missing dependency
+- La til riktige dependencies ([PR](https://github.com/navikt/aksel/pull/2017))

 ## 3.4.1

 ### Patch Changes

- :bug: Stylelint hotfix, inkluderer nå dist-mappe (kanskje..)
+- Inkluderer nå dist-mappe i release

 ## 3.4.0

 ### Minor Changes

- [#1973](https://github.com/navikt/aksel/pull/1973) [`61c411421`](https://github.com/navikt/aksel/commit/61c4114214841ec42f48e1abd0d72d2a42d265ab) Thanks [@JulianNymark](https://github.com/JulianNymark)! - add stylelint plugin
+- Stylelint-pakke for Aksel ([PR](https://github.com/navikt/aksel/pull/1973))
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-stylelint",
-  "version": "4.0.0",
+  "version": "4.7.1",
  "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.7.1",
+    "@navikt/ds-tokens": "^4.7.1",
    "@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,215 +1,64 @@
 # @navikt/aksel

+## 4.7.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@4.7.1
+
+## 4.7.0
+
+### Patch Changes
+
+- Updated dependencies [[`e3027cc19`](https://github.com/navikt/aksel/commit/e3027cc1966623433cfc2d28915273486c7bf611)]:
+  - @navikt/ds-css@4.7.0
+
+## 4.6.1
+
+### Patch Changes
+
+- Updated dependencies [[`28430f134`](https://github.com/navikt/aksel/commit/28430f13455a8ecc10447e5e1ad75625d29c4bcb)]:
+  - @navikt/ds-css@4.6.1
+
+## 4.6.0
+
+### Patch Changes
+
+- Updated dependencies [[`ae70bfa71`](https://github.com/navikt/aksel/commit/ae70bfa7192db46d8dea0dfb0222a857efc46be5)]:
+  - @navikt/ds-css@4.6.0
+
+## 4.5.0
+
+### Patch Changes
+
+- Updated dependencies [[`b05958863`](https://github.com/navikt/aksel/commit/b05958863b1adadb1b6a3fcceb4477e7411b66b5), [`b05958863`](https://github.com/navikt/aksel/commit/b05958863b1adadb1b6a3fcceb4477e7411b66b5)]:
+  - @navikt/ds-css@4.5.0
+
+## 4.4.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@4.4.2
+
+## 4.4.1
+
+### Patch Changes
+
+- Updated dependencies [[`415632675`](https://github.com/navikt/aksel/commit/4156326752eaf7a97855b33653850362dada8788)]:
+  - @navikt/ds-css@4.4.1
+
 ## 4.0.0

 ### Major Changes

- [#2026](https://github.com/navikt/aksel/pull/2026) [`895bdc08e`](https://github.com/navikt/aksel/commit/895bdc08e50647d9b9186cbf0e9ab069323de56c) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :test-tube: Datepicker og Monthpicker er nå ute av beta. Kjør codemod for migrering, eller `cmd/ctrl + shift + f` og erstatt `UNSAFE_` med ``
+- Codemod for migrering av Datepicker/Monthpicker ut av Beta. `npx @navikt/aksel codemod v4-date` ([PR](https://github.com/navikt/aksel/pull/2026))

-  - UNSAFE-prefix er fjernet fra Datepicker og Monthpicker
-
-  ```bash
-  npx @navikt/aksel codemod v4-date
-  ```
-
- [#2026](https://github.com/navikt/aksel/pull/2026) [`895bdc08e`](https://github.com/navikt/aksel/commit/895bdc08e50647d9b9186cbf0e9ab069323de56c) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :truck: Komponenter i `@navikt/ds-react-internal` er flyttet over til `@navikt/ds-react`
-
-  - `<Header />` er renamet til `<InternalHeader />`
-  - Dropdown, Timeline og InternalHeader(Header) er flyttet over til `@navikt/ds-react`
-  - All styling fra `@navikt/ds-css-internal` er flyttet til `@navikt/ds-css` og classname-prefix er endret fra `navdsi` -> `navds` for flyttede komponenter. Sett opp [stylelint med configen vår](https://aksel.nav.no/grunnleggende/kode/stylelint), så vil du få feilmelding om du bruker gamle klassenavn.
-  - Fikset cascading-problem mellom dropdown og popover. Dropdown blir ikke lengre påvirket av import-rekkefølge av popover.
-  - Styling for flyttede komponenter finnes nå på CDN (https://aksel.nav.no/grunnleggende/kode/css-import)
-
-  Kjør codemod for migrering:
-
-  ```bash
-  // React
-  npx @navikt/aksel codemod v4-internal-react
-
-  // CSS
-  npx @navikt/aksel codemod v4-internal-css
-  ```
-
-### Patch Changes
-
- Updated dependencies [[`895bdc08e`](https://github.com/navikt/aksel/commit/895bdc08e50647d9b9186cbf0e9ab069323de56c), [`895bdc08e`](https://github.com/navikt/aksel/commit/895bdc08e50647d9b9186cbf0e9ab069323de56c)]:
-  - @navikt/ds-css@4.0.0
-
-## 3.4.2
-
-### Patch Changes
-
- Updated dependencies []:
-  - @navikt/ds-css@3.4.2
-
-## 3.4.1
-
-### Patch Changes
-
- Updated dependencies []:
-  - @navikt/ds-css@3.4.1
-
-## 3.4.0
-
-### Patch Changes
-
- Updated dependencies [[`b958d41a2`](https://github.com/navikt/aksel/commit/b958d41a20c66327658514fcf24ae20893c9531a)]:
-  - @navikt/ds-css@3.4.0
-
-## 3.3.1
-
-### Patch Changes
-
- Updated dependencies []:
-  - @navikt/ds-css@3.3.1
-
-## 3.3.0
-
-### Patch Changes
-
- Updated dependencies []:
-  - @navikt/ds-css@3.3.0
-
-## 3.2.4
-
-### Patch Changes
-
- Updated dependencies [[`30eee0dac`](https://github.com/navikt/aksel/commit/30eee0dac4e3e5a1379033283a6885e646e80458)]:
-  - @navikt/ds-css@3.2.4
-
-## 3.2.3
-
-### Patch Changes
-
- Updated dependencies [[`475e994f4`](https://github.com/navikt/aksel/commit/475e994f494b2080ffc05eb1684b6a244e3e2969), [`444e905e0`](https://github.com/navikt/aksel/commit/444e905e01965fd5cac40ff20c5225b072e67221)]:
-  - @navikt/ds-css@3.2.3
-
-## 3.2.2
-
-### Patch Changes
-
- Updated dependencies []:
-  - @navikt/ds-css@3.2.2
-
-## 3.2.1
-
-### Patch Changes
-
- Updated dependencies []:
-  - @navikt/ds-css@3.2.1
-
-## 3.2.0
-
-### Patch Changes
-
- Updated dependencies [[`affcab14c`](https://github.com/navikt/aksel/commit/affcab14c3d536929dfa64a36f5b43f9d0e8c3b7)]:
-  - @navikt/ds-css@3.2.0
-
-## 3.1.3
-
-### Patch Changes
-
- Updated dependencies [[`e8ecf309a`](https://github.com/navikt/aksel/commit/e8ecf309a910e47fd3cea6c54cd993ab1196910f)]:
-  - @navikt/ds-css@3.1.3
-
-## 3.1.2
-
-### Patch Changes
-
- Updated dependencies []:
-  - @navikt/ds-css@3.1.2
-
-## 3.1.1
-
-### Patch Changes
-
- Updated dependencies []:
-  - @navikt/ds-css@3.1.1
-
-## 3.1.0
-
-### Patch Changes
-
- Updated dependencies [[`9d2cd9e7f`](https://github.com/navikt/aksel/commit/9d2cd9e7fffb3cf6310c88229ee39ea85db19bca), [`f1c4c46eb`](https://github.com/navikt/aksel/commit/f1c4c46ebb0522561483f18e3b86b190cf9cc372)]:
-  - @navikt/ds-css@3.1.0
-
-## 3.0.1
-
-### Patch Changes
-
- Updated dependencies []:
-  - @navikt/ds-css@3.0.1
-
-## 3.0.0
-
-### Patch Changes
-
- Updated dependencies [[`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f), [`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f)]:
-  - @navikt/ds-css@3.0.0
-
-## 2.9.8
-
-### Patch Changes
-
- Updated dependencies []:
-  - @navikt/ds-css@2.9.8
-
-## 2.9.7
-
-### Patch Changes
-
- Updated dependencies []:
-  - @navikt/ds-css@2.9.7
-
-## 2.9.6
-
-### Patch Changes
-
- Updated dependencies []:
-  - @navikt/ds-css@2.9.6
-
-## 2.9.5
-
-### Patch Changes
-
- Updated dependencies []:
-  - @navikt/ds-css@2.9.5
+- Codemods for migrering fra `@navikt/ds-react-internal` til `@navikt/ds-react` [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h3b8538e1981d) ([PR](https://github.com/navikt/aksel/pull/2026))

 ## 2.9.4

 ### Patch Changes

- [#1952](https://github.com/navikt/aksel/pull/1952) [`27b2b4a11`](https://github.com/navikt/aksel/commit/27b2b4a11caf5ca05c96c686c453653d8a900e5f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :truck: Flyttet Codemods from `@navikt/ds-codemods` -> `@navikt/aksel`.
-
-  - `@navikt/ds-codemods` vil bli deprecated ettehvert.
-
- Updated dependencies []:
-  - @navikt/ds-css@2.9.4
-
-## 2.9.3
-
-### Patch Changes
-
- Updated dependencies []:
-  - @navikt/ds-css@2.9.3
-
-## 2.9.2
-
-### Patch Changes
-
- Updated dependencies []:
-  - @navikt/ds-css@2.9.2
-
-## 2.9.1
-
-### Patch Changes
-
- Updated dependencies []:
-  - @navikt/ds-css@2.9.1
-
-## 2.9.0
-
-### Patch Changes
-
- Updated dependencies [[`657b7f3f3`](https://github.com/navikt/aksel/commit/657b7f3f3e62c5ce3173e6c95a29fcd237ce7343)]:
-  - @navikt/ds-css@2.9.0
+- :truck: Flyttet Codemods fra `@navikt/ds-codemods` -> `@navikt/aksel`. `@navikt/ds-codemods` regnes nå som deprecated ([PR](https://github.com/navikt/aksel/pull/1952))
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel",
-  "version": "4.0.0",
+  "version": "4.7.1",
  "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.7.1",
    "axios": "1.3.6",
    "chalk": "4.1.0",
    "clipboardy": "^2.3.0",
@@ -1,452 +1,283 @@
 # @navikt/ds-css

+## 4.7.1
+
+## 4.7.0
+
+### Minor Changes
+
+- Ny komponent Combobox! ([#1868](https://github.com/navikt/aksel/pull/1868))
+
+## 4.6.1
+
+### Patch Changes
+
+- Skjema: Labels og Legends bruker nå inline-flex når readOnly er satt ([#2089](https://github.com/navikt/aksel/pull/2089))
+
+## 4.6.0
+
+### Minor Changes
+
+- Skjema: De fleste skjemakomponenter har nå styling for `readOnly`-state ([#2080](https://github.com/navikt/aksel/pull/2080))
+
+## 4.5.0
+
+### Minor Changes
+
+- - Alert: La til `closeButton`-prop ([#2079](https://github.com/navikt/aksel/pull/2079))
+
+### Patch Changes
+
+- - Button: Fikset outline-bug i tertiary-variant ved `:active`-state ([#2079](https://github.com/navikt/aksel/pull/2079))
+
+## 4.4.2
+
+## 4.4.1
+
+### Patch Changes
+
+- :lipstick: Chat: fjernet border, satt avatar svg til 24x24px, byttet om "subtle" og "neutral" ([#2077](https://github.com/navikt/aksel/pull/2077))
+
+## 4.4.0
+
+### Minor Changes
+
+- Shadow-tokens er oppdatert: Datepicker har nå ikke border, Modal bruker shadow-xlarge, LinkCard bruker shadow-xsmall ([PR](https://github.com/navikt/aksel/pull/2041))
+
+## 4.3.0
+
+### Minor Changes
+
+- Popover/Helptext: Maksbredde på 100vw - 1.5rem. Treffer ikke lengre kanten på skjermen. ([PR](https://github.com/navikt/aksel/pull/2069))
+
+### Patch Changes
+
+- ExpansionCard: Ved nesting av komponetene fikk man styling fra parent ([PR](https://github.com/navikt/aksel/pull/2067))
+
+## 4.2.0
+
+### Minor Changes
+
+- Chat: `small`-size, innebygde varianter for farge og oppdatert utseende. ([PR](https://github.com/navikt/aksel/pull/2048))
+
+## 4.1.4
+
+### Patch Changes
+
+- Readmore: setter nå eksplisitt color for å ikke arve text-subtle fra parent. ([PR](https://github.com/navikt/aksel/pull/2049))
+
+## 4.1.1
+
+### Patch Changes
+
+- :bug: Fikset cursor-markering av tekst i skeleton.
+
+## 4.1.0
+
+### Minor Changes
+
+- Chips: `neutral` og `action`-varianter av Chips.Toggle. Opt-out mulighet for Checkmark. Oppdatert checkmark-ikon ([PR](https://github.com/navikt/aksel/pull/2035))
+
+- Alle description-felter på fieldsets har nå `text-subtle` som farge. ([PR](https://github.com/navikt/aksel/pull/2036))
+
 ## 4.0.0

 ### Major Changes

- [#2026](https://github.com/navikt/aksel/pull/2026) [`895bdc08e`](https://github.com/navikt/aksel/commit/895bdc08e50647d9b9186cbf0e9ab069323de56c) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :test-tube: Datepicker og Monthpicker er nå ute av beta. Kjør codemod for migrering, eller `cmd/ctrl + shift + f` og erstatt `UNSAFE_` med ``
+- All styling fra `@navikt/ds-css-internal` er flyttet til `@navikt/ds-css`. ([PR](https://github.com/navikt/aksel/pull/2026))

-  - UNSAFE-prefix er fjernet fra Datepicker og Monthpicker
+- classname-prefix er endret fra `navdsi` -> `navds` for flyttede komponenter.

-  ```bash
-  npx @navikt/aksel codemod v4-date
-  ```
+- Fikset cascading-problem mellom dropdown og popover. Dropdown blir ikke lengre påvirket av import-rekkefølge av popover.

- [#2026](https://github.com/navikt/aksel/pull/2026) [`895bdc08e`](https://github.com/navikt/aksel/commit/895bdc08e50647d9b9186cbf0e9ab069323de56c) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :truck: Komponenter i `@navikt/ds-react-internal` er flyttet over til `@navikt/ds-react`
-
-  - `<Header />` er renamet til `<InternalHeader />`
-  - Dropdown, Timeline og InternalHeader(Header) er flyttet over til `@navikt/ds-react`
-  - All styling fra `@navikt/ds-css-internal` er flyttet til `@navikt/ds-css` og classname-prefix er endret fra `navdsi` -> `navds` for flyttede komponenter. Sett opp [stylelint med configen vår](https://aksel.nav.no/grunnleggende/kode/stylelint), så vil du få feilmelding om du bruker gamle klassenavn.
-  - Fikset cascading-problem mellom dropdown og popover. Dropdown blir ikke lengre påvirket av import-rekkefølge av popover.
-  - Styling for flyttede komponenter finnes nå på CDN (https://aksel.nav.no/grunnleggende/kode/css-import)
-
-  Kjør codemod for migrering:
-
-  ```bash
-  // React
-  npx @navikt/aksel codemod v4-internal-react
-
-  // CSS
-  npx @navikt/aksel codemod v4-internal-css
-  ```
-
-## 3.4.2
-
-## 3.4.1
+- Styling for flyttede komponenter finnes nå på CDN [Guide](https://aksel.nav.no/grunnleggende/kode/css-import)

 ## 3.4.0

 ### Minor Changes

- [#2010](https://github.com/navikt/aksel/pull/2010) [`b958d41a2`](https://github.com/navikt/aksel/commit/b958d41a20c66327658514fcf24ae20893c9531a) Thanks [@HalvorHaugan](https://github.com/HalvorHaugan)! - Ny variant "moderate" i Tag
-
-## 3.3.1
-
-## 3.3.0
-
-## 3.2.4
-
-### Patch Changes
-
- [#2000](https://github.com/navikt/aksel/pull/2000) [`30eee0dac`](https://github.com/navikt/aksel/commit/30eee0dac4e3e5a1379033283a6885e646e80458) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Search støtter nå htmlSize-prop
+- Tag: `moderate`-variant ([PR](https://github.com/navikt/aksel/pull/2010))

 ## 3.2.3

 ### Patch Changes

- [#1993](https://github.com/navikt/aksel/pull/1993) [`475e994f4`](https://github.com/navikt/aksel/commit/475e994f494b2080ffc05eb1684b6a244e3e2969) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Fikset small-variant av datepicker-input
+- Datepicker: Fikset small-variant av datepicker-input. ([PR](https://github.com/navikt/aksel/pull/1993))

-  - :recycle: Refactored Datepicker.Input-button for bugfix
-
- [#1994](https://github.com/navikt/aksel/pull/1994) [`444e905e0`](https://github.com/navikt/aksel/commit/444e905e01965fd5cac40ff20c5225b072e67221) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: CopyButton har nå en `xsmall`-variant
-
-  - Kan nå lettere brukes i tabeller
-
-## 3.2.2
-
-## 3.2.1
-
-## 3.2.0
-
-### Minor Changes
-
- [#1982](https://github.com/navikt/aksel/pull/1982) [`affcab14c`](https://github.com/navikt/aksel/commit/affcab14c3d536929dfa64a36f5b43f9d0e8c3b7) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Ny komponent `<CopyButton />`!
-
-  - Erstatter `<CopyToClipboard />` fra `@navikt/ds-react-internal`
-  - CopyToClipboard er markert som deprecated. Den vil fortsatt fungere, men noen lintere vil kunne ende opp med å klage på den.
+- CopyButton: `xsmall`-size for bruk i tabeller ([PR](https://github.com/navikt/aksel/pull/1994))

 ## 3.1.3

 ### Patch Changes

- [#1976](https://github.com/navikt/aksel/pull/1976) [`e8ecf309a`](https://github.com/navikt/aksel/commit/e8ecf309a910e47fd3cea6c54cd993ab1196910f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :lipstick: Oppdatert utseende for ToggleGroup
-
-  - Medium og Small er begge 10px lavere
-  - Mindre border-radius
-
-## 3.1.2
-
-## 3.1.1
+- :lipstick: Oppdatert utseende for ToggleGroup. `Medium` og `Small`-size er begge 10px lavere, mindre border-radius ([PR](https://github.com/navikt/aksel/pull/1976))

 ## 3.1.0

 ### Minor Changes

- [#1966](https://github.com/navikt/aksel/pull/1966) [`f1c4c46eb`](https://github.com/navikt/aksel/commit/f1c4c46ebb0522561483f18e3b86b190cf9cc372) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :lipstick: Alle komponenter bruker nå default `:focus-visible` for fokusmarkering.
-  (Alle komponenter som bruker `:focus-visible` har også en fallback for `:focus`)
+- Alle komponenter bruker nå default `:focus-visible` for fokusmarkering. Medfølger også fallback for `:focus` ([PR](https://github.com/navikt/aksel/pull/1966))

 ### Patch Changes

- [#1967](https://github.com/navikt/aksel/pull/1967) [`9d2cd9e7f`](https://github.com/navikt/aksel/commit/9d2cd9e7fffb3cf6310c88229ee39ea85db19bca) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :lipstick: Oppdatert Label og Description spacing for skjemakomponenter
-
-## 3.0.1
+- Oppdatert Label og Description spacing for skjemakomponenter ([PR](https://github.com/navikt/aksel/pull/1967))

 ## 3.0.0

 ### Major Changes

- [#1964](https://github.com/navikt/aksel/pull/1964) [`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - **Accordion**
-
-  - Accordion oppdatet til å ha chevron left-aligned.
-  - Neutral-variant lagt til
-  - Diverse nye size-options for heading og paddinger.
-  - Deler av Accordion-CSS er refaktorert. Dette vil kunne brekke overskrevne stiler.
-
- [#1964](https://github.com/navikt/aksel/pull/1964) [`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Aksels løsninger bruker nå `@navikt/aksel-icons`
-
-  **Sideeffects av ikonendringer**
-
-  - Komponenter som tidligere brukte Expand-ikon har fått oppdatert animasjon (table, readmore og accordion)
-  - Alert bruker samme ikonstørrelse for alle størrelser
-  - Chips har justert padding/ikonstørrelser
-  - Datepicker hover-bug på knapper er fikset
-  - Helptekst bruker nå et custom-ikon.
-  - Select har fått justert padding rundt ikon
-  - Switch bruker samme checkmark som checkbox, er nå avrundet
-  - ReadMore har justert margin for alignment med ikon, fjernet content-animasjon
-  - Tabs bruker default text-default nå
-  - Stepper har endret hvordan den styler checkmark-ikon.
-
-## 2.9.8
-
-## 2.9.7
-
-## 2.9.6
-
-## 2.9.5
-
-## 2.9.4
-
-## 2.9.3
-
-## 2.9.2
-
-## 2.9.1
+- Accordion: Chevron er left-aligned, deler av styling er refaktorert, `size`-props og `neutral`-variant ([PR](https://github.com/navikt/aksel/pull/1964))

 ## 2.9.0

 ### Minor Changes

- [#1941](https://github.com/navikt/aksel/pull/1941) [`657b7f3f3`](https://github.com/navikt/aksel/commit/657b7f3f3e62c5ce3173e6c95a29fcd237ce7343) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: CSS nå tilgjengelig som separate filer
-
-  - Kan lastest fra CDN
-  - Tilbys nå i minified-versjoner
-  - Kommandoline: `npx @navikt/aksel css-imports` for å raskt komme i gang med CSS-optimalisering
-
-## 2.8.16
-
-## 2.8.15
-
-### Patch Changes
-
- [#1930](https://github.com/navikt/aksel/pull/1930) [`6682be1c8`](https://github.com/navikt/aksel/commit/6682be1c8e6562213c64e5be4bed70fef54ab865) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Alle pakker implementerer nå npm provenance (beta)
-
-## 2.8.14
-
-### Patch Changes
-
- [`f0d9a8853`](https://github.com/navikt/aksel/commit/f0d9a8853f56854a4049bd3f6cc34968e9d6c380) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fixes shown month on open in Datepicker/MonthPicker, better handling of out-of-range 'today'
-
-## 2.8.13
-
-## 2.8.12
-
-## 2.8.11
-
-## 2.8.10
+- CSS nå tilgjengelig som separate filer: Kan lastest fra CDN, minified-versjoner tilgjengelig ([PR](https://github.com/navikt/aksel/pull/1941))

 ## 2.8.9

 ### Patch Changes

- [#1905](https://github.com/navikt/aksel/pull/1905) [`212194964`](https://github.com/navikt/aksel/commit/212194964c4dd576e1ffc031316dff8cbe5016a2) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Padding/border-radius tokens for button.css
-
-## 2.8.8
+- Button: Padding/border-radius tokens ([PR](https://github.com/navikt/aksel/pull/1905))

 ## 2.8.7

 ### Patch Changes

- [`7f3f025db`](https://github.com/navikt/aksel/commit/7f3f025db2ad605df4240605a733d10d08db753a) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset typografi for radio, checkbox. Button token for tertiary
+- Button: token for tertiary

 ## 2.8.6

 ### Patch Changes

- [`2eb358ad8`](https://github.com/navikt/aksel/commit/2eb358ad888979d21c385b3900973946f3f466be) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Alert, Chips og ErrorSummary har nå bedre utvalg av tokens
+- Alert, Chips og ErrorSummary har nå bedre utvalg av tokens

 ## 2.8.5

 ### Patch Changes

- [`f66437082`](https://github.com/navikt/aksel/commit/f664370826ed51bda7ad681e1f1799c26d2c1f0a) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :art: Accordion-tokens for header bakgrunn
+- Accordion: tokens for header-bakgrunn

- [#1879](https://github.com/navikt/aksel/pull/1879) [`55b585618`](https://github.com/navikt/aksel/commit/55b585618341a4d8bf26ed9b9e129d897b1600dc) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Fikset tekstfarge i select på iphone
-
-## 2.8.4
-
-## 2.8.3
+- Select: Fikset tekstfarge på iphone ([PR](https://github.com/navikt/aksel/pull/1879))

 ## 2.8.2

 ### Patch Changes

- [#1870](https://github.com/navikt/aksel/pull/1870) [`9c495cf50`](https://github.com/navikt/aksel/commit/9c495cf5037a7453e51e273ab93e4232576f4958) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Oppdatert typografi for ExpansioCard
-
-## 2.8.1
-
-## 2.8.0
-
-### Minor Changes
-
- [#1820](https://github.com/navikt/aksel/pull/1820) [`c6d51a019`](https://github.com/navikt/aksel/commit/c6d51a01902e4fd7916a422e17ed175f39acd458) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: Ny komponent! ExpansionCard. Oppfølger fra gammel Ekspanderbartpanel.
+- ExpansioCard: Oppdatert typografi ([PR](https://github.com/navikt/aksel/pull/1870))

 ## 2.7.8

 ### Patch Changes

- [#1863](https://github.com/navikt/aksel/pull/1863) [`7ace69f21`](https://github.com/navikt/aksel/commit/7ace69f215760bbb5bf997670c897403d8ee558d) Thanks [@it-vegard](https://github.com/it-vegard)! - Added focus indicator for tabpanel
-
-## 2.7.7
-
-## 2.7.6
+- Tabs: La til focus-markering for Tabs.Panel ([PR](https://github.com/navikt/aksel/pull/1863))

 ## 2.7.5

 ### Patch Changes

- :bug: Fikset token-bug i togglegroup
-
-## 2.7.4
-
-## 2.7.3
-
-## 2.7.2
-
-## 2.7.1
-
-## 2.7.0
-
-## 2.6.2
-
-## 2.6.1
-
-## 2.6.0
-
-## 2.5.1
-
-## 2.5.0
+- ToggleGroup: Fikset token-bug

 ## 2.4.3

 ### Patch Changes

- [`f962bc781`](https://github.com/navikt/aksel/commit/f962bc7816027c24e334d9754c3e07cda951cf56) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset disabled-opacity bug i select for Chrome
+- Select: Fikset disabled + opacity bug for Chrome

 ## 2.4.2

 ### Patch Changes

- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
-
-## 2.4.1
-
-## 2.4.0
-
-### Minor Changes
-
- [#1807](https://github.com/navikt/aksel/pull/1807) [`70eeb24b3`](https://github.com/navikt/aksel/commit/70eeb24b38ac871c7f2e31e1621b949669c401b6) Thanks [@kschieren](https://github.com/kschieren)! - Added List component
+- List: La til støtte for nesting ([PR](https://github.com/navikt/aksel/pull/1823))

 ## 2.3.1

 ### Patch Changes

- [`241b2e678`](https://github.com/navikt/aksel/commit/241b2e678f1f40909e2d36fe095dcbce8673f174) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset feil bruk av fallback-tokens i textarea, timeline
+- Fikset feil bruk av fallback-tokens i Textarea og Timeline

 ## 2.3.0

 ### Minor Changes

- [#1813](https://github.com/navikt/aksel/pull/1813) [`7702c6527`](https://github.com/navikt/aksel/commit/7702c65275a4d86a8260852d091e6dd4cfe9217c) Thanks [@ingfo](https://github.com/ingfo)! - Fiksa sentrering av tekst i Select i Firefox
+- Select: Fikset sentrering av tekst i Firefox ([PR](https://github.com/navikt/aksel/pull/1813))

 ### Patch Changes

- [`51b62cca7`](https://github.com/navikt/aksel/commit/51b62cca7b857e92669cd0b09e620b131faf80e5) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Select small 34px høyde -> 32px
+- Select: `small`-variant er nå 32px (var 34px)

 ## 2.2.0

 ### Minor Changes

- [#1789](https://github.com/navikt/aksel/pull/1789) [`c0929a534`](https://github.com/navikt/aksel/commit/c0929a534dc8effece5435f8be550cb7931a52b1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Button og ToggleGroup har nå en neutral-variant, oppdatert neutral-tokens
+- ToggleGroup: `Neutral`-variant. ([PR](https://github.com/navikt/aksel/pull/1789))

-## 2.1.7
-
-## 2.1.6
-
-## 2.1.5
-
-## 2.1.4
-
-## 2.1.3
+- Button: `Neutral`-variant.

 ## 2.1.2

 ### Patch Changes

- [`62f36da5e`](https://github.com/navikt/aksel/commit/62f36da5e74fc7f53414d42b310c3b57597795bc) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Small textfield har nå 8px horisontal padding (4px før)
-
-## 2.1.1
-
-## 2.1.0
-
-## 2.0.18
-
-## 2.0.17
-
-## 2.0.16
-
-## 2.0.15
-
-### Patch Changes
-
- [#1748](https://github.com/navikt/aksel/pull/1748) [`22dfd8e60`](https://github.com/navikt/aksel/commit/22dfd8e60315c421749394d35e41f412a00a7593) Thanks [@KenAJoh](https://github.com/KenAJoh)! - toptextPosition prop i Chat for horisontal plassering av navn og dato.
-
-## 2.0.14
-
-## 2.0.13
+- TextField: `small`-variant har nå 8px horisontal padding (før 4px)

 ## 2.0.12

 ### Patch Changes

- [#1737](https://github.com/navikt/aksel/pull/1737) [`8a1ef5e7e`](https://github.com/navikt/aksel/commit/8a1ef5e7e2c066cb80c13e14329e1585e2c427f8) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Fikset default visuell error-state for radio
-
-## 2.0.11
-
-## 2.0.10
-
-## 2.0.9
-
-## 2.0.8
-
-## 2.0.7
-
-## 2.0.6
+- Radio: Fikset default visuell error-state ([PR](https://github.com/navikt/aksel/pull/1737))

 ## 2.0.5

 ### Patch Changes

- Reverserte border-width endrind i button
-
-## 2.0.4
-
-## 2.0.3
-
-## 2.0.2
+- Button: Reverserte border-width endrinder (var 1.5px, nå 2px)

 ## 2.0.1

 ### Patch Changes

- [`e8007328d`](https://github.com/navikt/aksel/commit/e8007328db3f6d5be696cf24f03304c79be0f3f7) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bugfixer ved bruk av tokens
+- Bugfixer ved bruk av tokens oppdatert i v2.0.0

 ## 2.0.0

 ### Major Changes

- [`6b96e4833`](https://github.com/navikt/aksel/commit/6b96e48330c2e013a1acee85cefccd9ccc1aece4) Thanks [@KenAJoh](https://github.com/KenAJoh)! - v2: Tokens update and font-loading
+- Fontlasting: Fonter lastes nå fra NAV-CDN

-## 1.5.10
+- Tokens: Alle komponenter bruker nå semantiske tokens for som standard, med innebygd støtte for komponent-spesifikke tokens.

 ## 1.5.9

 ### Patch Changes

- 4px -> 2px gap chips-toggle active
-
-## 1.5.8
-
-## 1.5.7
-
-## 1.5.6
-
-## 1.5.5
-
-## 1.5.4
-
-### Patch Changes
-
- [#1709](https://github.com/navikt/aksel/pull/1709) [`77302a30b`](https://github.com/navikt/aksel/commit/77302a30b8eef8dc00b2d2e9c904a3f57da81a11) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Oppdatert ikoner
+- Chips: 4px -> 2px gap mellom checkmark i Chips.Toggle

 ## 1.5.3

 ### Patch Changes

- Byttet om på alt-farge rekkefølge
-
-## 1.5.2
-
-### Patch Changes
-
- :memo: Rename FilterChips to ToggleChips
+- Tokens: Byttet om på rekkefølge av alt-farger

 ## 1.5.1

 ### Patch Changes

- Flex-wrap chips.css
+- Chips. Bruker nå standard flex-wrap

 ## 1.5.0

 ### Minor Changes

- [#1684](https://github.com/navikt/aksel/pull/1684) [`e19bf67b3`](https://github.com/navikt/aksel/commit/e19bf67b337dea39989c68b5e9c2591cf0d5b40f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Oppdaterte tag-varianter
-
- [#1668](https://github.com/navikt/aksel/pull/1668) [`97c5f60e9`](https://github.com/navikt/aksel/commit/97c5f60e9111da7e08f55c8d0aa29581f0a9b1ca) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Chips komponent :sparkles:
-
-## 1.4.4
-
-## 1.4.3
-
-### Patch Changes
-
- :sparkles: Validering og inputFormat i Date-komponenter
-
-## 1.4.2
-
-## 1.4.1
-
-### Patch Changes
-
- [`3c08651df`](https://github.com/navikt/aksel/commit/3c08651df28c3e19dd8c8a7a1d0032200bec473d) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Date-komponenter følger språkrådets dato-formatering for måneder.
-
-## 1.4.0
+- Tag: `filled`-varianter ([PR](https://github.com/navikt/aksel/pull/1684))

 ## 1.3.39

 ### Patch Changes

- [`40f0b3340`](https://github.com/navikt/aksel/commit/40f0b3340d01bf85fecc04f2f3a8e8b2acf996f1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bump for latest-tag
+- Fikset bruk av `:watch` for diverse parsere (less, parcel)

-## 1.3.38
+## 1.3.24
+
+### Patch Changes
+
+- Tokens tilgjengeligjøres nå også på `:host`. Dette lar shadow-dom brukere konsumere tokens direkte.
@@ -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;
 }
@@ -24,6 +24,7 @@
  font-size: 1.5rem;
  align-self: flex-start;
  height: var(--a-font-line-height-xlarge);
+  margin: var(--a-spacing-1);
  background: radial-gradient(circle, var(--a-surface-default) 50%, 0, transparent);
 }

@@ -73,3 +74,11 @@
  border: none;
  padding: 0;
 }
+
+.navds-alert__button-wrapper {
+  align-self: flex-start;
+  flex: 1;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-end;
+}
@@ -294,7 +294,6 @@
 .navds-button--tertiary:active {
  color: var(--ac-button-tertiary-active-text, var(--a-text-on-action));
  background-color: var(--ac-button-tertiary-active-bg, var(--a-surface-action-active));
-  box-shadow: inset 0 0 0 1px var(--a-surface-default);
 }

 .navds-button--tertiary:active:hover {
@@ -346,7 +345,6 @@
 .navds-button--tertiary-neutral:active {
  color: var(--ac-button-tertiary-neutral-active-text, var(--a-text-on-neutral));
  background-color: var(--ac-button-tertiary-neutral-active-bg, var(--a-surface-neutral-active));
-  box-shadow: inset 0 0 0 1px var(--a-surface-default);
 }

 .navds-button--tertiary-neutral:active:hover {
@@ -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,29 +24,33 @@

 .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-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;
+  line-height: 2.5rem; /* Makes text properly vertically centered in Chrome */
+  font-size: 1.06rem;
+  letter-spacing: 0.024rem;
 }

 .navds-chat__avatar svg {
  align-self: center;
-  height: 100%;
  width: 100%;
+  max-width: 1.5rem;
+  max-height: 1.5rem;
 }

 .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-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--subtle .navds-chat__bubble,
+.navds-chat--subtle .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;
-}
@@ -54,6 +54,11 @@ const StyleMappings = {
    { component: "Checkbox", main: formCss, dependencies: [typoCss] },
    { component: "CheckboxGroup", main: formCss, dependencies: [typoCss] },
    { component: "Chips", main: "chips.css", dependencies: [typoCss] },
+    {
+      component: "UNSAFE_Combobox",
+      main: "combobox.css",
+      dependencies: [typoCss],
+    },
    {
      component: "ConfirmationPanel",
      main: formCss,
@@ -127,6 +132,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,13 @@
  visibility: hidden;
  pointer-events: none;
 }
+
+.navds-date__popover:where(.navds-popover) {
+  border: none;
+}
+
+/* Readonly */
+
+.navds-date__field--readonly .navds-date__field-button {
+  cursor: default;
+}
@@ -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);
 }

@@ -0,0 +1,287 @@
+.navds-combobox__wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  position: relative;
+}
+
+.navds-combobox__wrapper-inner {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  border: 1px solid black;
+}
+
+.navds-combobox__wrapper-inner > :first-child {
+  flex: 2;
+}
+
+.navds-combobox__wrapper-inner > :last-child {
+  display: flex;
+  flex-flow: row nowrap;
+}
+
+.navds-form-field--small .navds-combobox__wrapper-inner {
+  padding: var(--a-spacing-1) calc(var(--a-spacing-3) / 2);
+}
+
+.navds-combobox__wrapper-inner:hover {
+  cursor: text;
+}
+
+.navds-combobox__selected-options {
+  gap: var(--a-spacing-2);
+}
+
+.navds-combobox__selected-options > li {
+  margin: auto 0;
+  border-radius: var(--a-border-radius-full);
+}
+
+.navds-combobox__selected-options > li:last-of-type {
+  display: flex;
+  flex: 1;
+}
+
+.navds-combobox__selected-options--no-bg {
+  font-family: inherit;
+  font-size: var(--a-font-size-large);
+  font-weight: var(--a-font-weight-regular);
+  letter-spacing: 0;
+  line-height: var(--a-font-line-height-large);
+  margin: 0;
+  padding-left: calc(0.5rem - 4px);
+}
+
+.navds-combobox__input-wrapper {
+  width: 100%;
+}
+
+.navds-combobox__input {
+  z-index: 1;
+  flex: 1;
+  border: none;
+  padding: 0;
+  margin: 0;
+  min-width: 10ch;
+  width: 100%;
+}
+
+.navds-combobox__input:focus-visible {
+  outline: none;
+  border: none;
+  box-shadow: none;
+}
+
+.navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
+  box-shadow: 0 0 0 1px var(--a-surface-default) inset, var(--a-shadow-focus);
+  box-shadow: var(--a-shadow-focus);
+}
+
+.navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible).navds-combobox__wrapper-inner--virtually-unfocused {
+  box-shadow: none;
+}
+
+@supports not selector(:focus-visible) {
+  .navds-combobox__input:focus-visible {
+    outline: none;
+    border: none;
+    box-shadow: none;
+  }
+
+  .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus) {
+    box-shadow: 0 0 0 1px var(--a-surface-default) inset, var(--a-shadow-focus);
+    box-shadow: var(--a-shadow-focus);
+  }
+
+  .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus).navds-combobox__wrapper-inner--virtually-unfocused {
+    box-shadow: none;
+  }
+}
+
+.navds-combobox__button-clear {
+  border-radius: var(--a-border-radius-medium);
+  color: var(--ac-combobox-clear-icon, var(--a-text-subtle));
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  background: none;
+  border: none;
+  font-size: 1rem;
+  padding: 0;
+}
+
+.navds-combobox__button-clear svg {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.navds-combobox__input::-webkit-search-cancel-button {
+  display: none;
+}
+
+.navds-combobox__button-toggle-list {
+  border-radius: var(--a-border-radius-medium);
+  color: var(--a-text-default);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  background: none;
+  border: none;
+  font-size: 1rem;
+  padding: 0;
+}
+
+.navds-combobox__button-clear:active:hover,
+.navds-combobox__button-toggle-list:active:hover {
+  color: var(--ac-combobox-clear-icon-active, var(--a-text-action));
+}
+
+.navds-combobox__button-clear:hover,
+.navds-combobox__button-toggle-list:hover {
+  color: var(--ac-combobox-clear-icon-hover, var(--a-text-action-selected));
+}
+
+.navds-combobox__button-toggle-list:focus-visible {
+  box-shadow: 0 0 0 1px var(--a-surface-default) inset, var(--a-shadow-focus);
+  box-shadow: var(--a-shadow-focus);
+  outline: none;
+}
+
+@supports not selector(:focus-visible) {
+  .navds-combobox__button-toggle-list:focus {
+    box-shadow: 0 0 0 1px var(--a-surface-default) inset, var(--a-shadow-focus);
+    box-shadow: var(--a-shadow-focus);
+    outline: none;
+  }
+}
+
+.navds-combobox__button-toggle-list svg {
+  width: 1.5rem;
+  height: 1.5rem;
+  pointer-events: none;
+}
+
+.navds-form-field--small .navds-combobox__button-toggle-list svg,
+.navds-form-field--small .navds-combobox__button-clear svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+/* dropdown list */
+
+.navds-combobox__list {
+  max-height: 290px;
+  overflow-y: auto;
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 9999;
+  top: calc(100% + var(--a-spacing-2));
+  list-style: none;
+  margin: 0;
+  border: 1px solid var(--ac-combobox-list-border-color, var(--a-border-divider));
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0;
+  box-shadow: var(--a-shadow-small);
+  border-radius: 4px;
+  gap: 4px 0;
+  background-color: var(--ac-combobox-list-bg, var(--a-surface-default));
+  color: var(--ac-combobox-list-text, var(--a-text-default));
+}
+
+.navds-combobox__list--closed {
+  display: none;
+}
+
+.navds-combobox__list svg {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.navds-combobox__list-item,
+.navds-combobox__list-item__no-options,
+.navds-combobox__list-item__new-option {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--a-spacing-3);
+  width: 100%;
+  background-color: var(--ac-combobox-list-item-bg, var(--a-surface-default));
+}
+
+.navds-form-field--small .navds-combobox__list-item,
+.navds-form-field--small .navds-combobox__list-item__no-options,
+.navds-form-field--small .navds-combobox__list-item__new-option {
+  padding: calc(var(--a-spacing-3) / 2) var(--a-spacing-2);
+}
+
+.navds-combobox__list-item--loading {
+  display: flex;
+  justify-content: center;
+  padding: var(--a-spacing-3);
+  background-color: var(--ac-combobox-list-item-loading-bg, var(--a-surface-default));
+  width: 100%;
+}
+
+.navds-combobox__list-item--focus,
+.navds-combobox__list-item:hover {
+  background-color: var(--ac-combobox-list-item-hover-bg, var(--a-surface-hover));
+  cursor: pointer;
+  border-left: 4px solid var(--ac-combobox-list-item-hover-border-left, var(--a-border-strong));
+  padding-left: calc(var(--a-spacing-3) - 4px);
+}
+
+.navds-combobox__list-item--selected {
+  background-color: var(--ac-combobox-list-item-selected-bg, var(--a-surface-selected));
+}
+
+.navds-combobox__list-item--selected.navds-combobox__list-item--focus,
+.navds-combobox__list-item--selected:hover {
+  background-color: var(--ac-combobox-list-item-selected-hover-bg, var(--a-surface-action-subtle-hover));
+  border-left: 4px solid var(--ac-combobox-list-item-selected-hover-border-left, var(--a-border-focus));
+  padding-left: calc(var(--a-spacing-3) - 4px);
+}
+
+.navds-combobox__list-item__new-option {
+  border-bottom: 1px solid var(--a-border-divider);
+  background: var(--a-surface-neutral-subtle);
+  cursor: pointer;
+  justify-content: flex-start;
+  gap: 0.25rem;
+}
+
+.navds-combobox__list-item__new-option:hover {
+  border-bottom: 1px solid var(--a-border-divider);
+  background: var(--a-surface-neutral-subtle-hover);
+}
+
+.navds-combobox__list-item__new-option--focus {
+  box-shadow: var(--a-shadow-focus) inset, var(--a-border-action) 0 0 0 5px inset;
+  border-radius: 3px;
+}
+
+/* Mobile */
+
+@media (max-width: 479px) {
+  .navds-combobox__button-toggle-list {
+    right: 0.5rem;
+  }
+
+  /* add bigger click area for input */
+  .navds-combobox__input {
+    min-width: min-content;
+    padding: 0.75rem 0;
+  }
+
+  .navds-combobox__selected-options {
+    gap: var(--a-spacing-1);
+  }
+}
@@ -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;
 }
@@ -22,6 +30,10 @@
  padding: 0;
 }

+.navds-fieldset--readonly > :where(.navds-fieldset__legend) {
+  display: inline-flex;
+}
+
 .navds-fieldset:disabled > .navds-fieldset__legend,
 .navds-fieldset:disabled > .navds-fieldset__description {
  opacity: 0.3;
@@ -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,
@@ -31,3 +36,14 @@
 .navds-form-field__subdescription {
  color: var(--ac-form-subdescription, var(--a-text-subtle));
 }
+
+.navds-form-field--readonly > :where(.navds-form-field__label) {
+  display: inline-flex;
+}
+
+.navds-form-field__readonly-icon {
+  margin-top: var(--a-spacing-05);
+  margin-right: var(--a-spacing-2);
+  flex-shrink: 0;
+  align-self: flex-start;
+}
@@ -11,3 +11,4 @@
@import "text-field.css";
@import "textarea.css";
@import "search.css";
+@import "combobox.css";
@@ -22,6 +22,9 @@
  cursor: pointer;
  display: flex;
  gap: var(--a-spacing-2);
+
+  --__ac-radio-checkbox-readonly-bg: var(--a-surface-subtle);
+  --__ac-radio-checkbox-readonly-border: var(--a-border-subtle);
 }

 .navds-checkbox__label::before,
@@ -102,7 +105,7 @@
  background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
  width: 0.75rem;
  height: 0.25rem;
-  border-radius: 1px; /* Custom value OK */
+  border-radius: 1px;
  flex-shrink: 0;
 }

@@ -244,3 +247,57 @@
 .navds-radio--disabled > .navds-radio__label {
  cursor: not-allowed;
 }
+
+/* Readonly */
+.navds-checkbox--readonly > :where(.navds-checkbox__input, .navds-checkbox__label),
+.navds-radio--readonly > :where(.navds-radio__input, .navds-radio__label) {
+  cursor: default;
+}
+
+.navds-checkbox--readonly .navds-checkbox__label-text {
+  display: inline-flex;
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:hover + .navds-checkbox__label,
+.navds-radio--readonly > .navds-radio__input:hover + .navds-radio__label {
+  color: var(--a-text-default);
+}
+
+.navds-checkbox--readonly
+  > .navds-checkbox__input:not(:disabled):not(:checked):not(:indeterminate)
+  + .navds-checkbox__label::before,
+.navds-checkbox--readonly
+  > .navds-checkbox__input:hover:not(:checked):not(:indeterminate):not(:focus-visible)
+  + .navds-checkbox__label::before,
+.navds-radio--readonly > .navds-radio__input:not(:disabled):not(:checked):not(:indeterminate) + .navds-radio__label::before,
+.navds-radio--readonly
+  > .navds-radio__input:hover:not(:checked):not(:indeterminate):not(:focus-visible)
+  + .navds-radio__label::before {
+  background-color: var(--__ac-radio-checkbox-readonly-bg);
+  box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
+.navds-radio--readonly > .navds-radio__input:focus-visible + .navds-radio__label::before {
+  --__ac-radio-checkbox-readonly-border: var(--a-border-subtle), var(--a-shadow-focus);
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label::before {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSJyZ2JhKDAsIDAsIDAsIDAuNjUpIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
+  box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
+  background-color: var(--__ac-radio-checkbox-readonly-bg);
+}
+
+.navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border), inset 0 0 0 4px var(--__ac-radio-checkbox-readonly-bg);
+  background-color: var(--a-icon-subtle);
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
+  box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
+  background-color: var(--__ac-radio-checkbox-readonly-bg);
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+  background-color: var(--a-icon-subtle);
+}
@@ -79,3 +79,9 @@
 .navds-select__input:disabled > option {
  color: var(--a-text-default);
 }
+
+.navds-select--readonly .navds-select__input {
+  background-color: var(--a-surface-subtle);
+  border-color: var(--a-border-subtle);
+  cursor: default;
+}
@@ -178,3 +178,44 @@
 .navds-switch__input:disabled ~ .navds-switch__label-wrapper {
  cursor: not-allowed;
 }
+
+/* Readonly */
+.navds-switch--readonly > .navds-switch__track,
+.navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__track,
+.navds-switch--readonly > .navds-switch__input:checked ~ .navds-switch__track,
+.navds-switch--readonly > .navds-switch__input:checked:hover ~ .navds-switch__track {
+  background-color: var(--a-surface-neutral-moderate);
+}
+
+.navds-switch--readonly > .navds-switch__label-wrapper,
+.navds-switch--readonly > .navds-switch__input {
+  cursor: default;
+}
+
+.navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__label-wrapper,
+.navds-switch--readonly .navds-switch__label-wrapper:hover {
+  color: var(--a-text-default);
+}
+
+.navds-switch--readonly .navds-switch__label {
+  display: inline-flex;
+}
+
+.navds-switch--readonly .navds-switch__thumb {
+  background-color: var(--a-surface-subtle);
+  box-shadow: 0 0 0 2px var(--a-border-default);
+}
+
+.navds-switch--readonly > .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+  color: var(--a-icon-subtle);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
+    transform: translateX(0);
+  }
+
+  .navds-switch--readonly > .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
+    transform: translateX(20px);
+  }
+}
@@ -73,11 +73,10 @@
  cursor: not-allowed;
 }

-.navds-text-field__input[readonly] {
-  background-color: var(--ac-textfield-bg, var(--a-surface-default));
-  border-color: var(--ac-textfield-border, var(--a-border-default));
-  box-shadow: none;
-  cursor: not-allowed;
+.navds-text-field--readonly .navds-text-field__input {
+  background-color: var(--a-surface-subtle);
+  border-color: var(--a-border-subtle);
+  cursor: default;
 }

 /**
@@ -99,9 +99,8 @@
  cursor: not-allowed;
 }

-.navds-textarea__input[readonly] {
-  background-color: var(--ac-textarea-bg, var(--a-surface-default));
-  border-color: var(--ac-textarea-border, var(--a-border-default));
-  box-shadow: none;
-  cursor: not-allowed;
+.navds-textarea--readonly .navds-textarea__input {
+  background-color: var(--a-surface-subtle);
+  border-color: var(--a-border-subtle);
+  cursor: default;
 }
@@ -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.7.1",
  "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.7.1",
    "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,28 @@
    "--ac-button-tertiary-neutral-active-hover-bg": "--a-surface-neutral-active"
  },
  "chat": {
-    "--ac-chat-avatar-bg": "--a-bg-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 +214,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 +360,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",
@@ -357,6 +372,21 @@
    "--ac-search-button-focus-active-border": "--a-surface-default",
    "--ac-search-error-border": "--a-border-danger"
  },
+  "combobox": {
+    "--ac-combobox-clear-icon": "--a-text-subtle",
+    "--ac-combobox-clear-icon-hover": "--a-text-action-selected",
+    "--ac-combobox-clear-icon-active": "--a-text-action",
+    "--ac-combobox-list-bg": "--a-surface-default",
+    "--ac-combobox-list-text": "--a-text-default",
+    "--ac-combobox-list-border-color": "--a-border-divider",
+    "--ac-combobox-list-item-bg": "--a-surface-default",
+    "--ac-combobox-list-item-hover-bg": "--a-surface-hover",
+    "--ac-combobox-list-item-selected-bg": "--a-surface-default",
+    "--ac-combobox-list-item-selected-hover-bg": "--a-surface-action-subtle-hover",
+    "--ac-combobox-list-item-loading-bg": "--a-surface-default",
+    "--ac-combobox-list-item-hover-border-left": "--a-border-strong",
+    "--ac-combobox-list-item-selected-hover-border-left": "--a-border-focus"
+  },
  "select": {
    "--ac-select-bg": "--a-surface-default",
    "--ac-select-text": "--a-text-default",
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "4.0.0",
+  "version": "4.7.1",
  "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.7.1",
    "@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,
  },
 };

@@ -3,10 +3,12 @@ import {
  CheckmarkCircleFillIcon,
  ExclamationmarkTriangleFillIcon,
  XMarkOctagonFillIcon,
+  XMarkIcon,
 } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { BodyLong } from "../typography/BodyLong";
+import { Button } from "../button";

 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
  /**
@@ -32,6 +34,17 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
   * @default false
   */
  inline?: boolean;
+  /**
+   * Removes close-button(X) when false
+   * Requires onClose to be set
+   * @default true
+   */
+  closeButton?: boolean;
+  /**
+   * Callback for alert wanting to close
+   * requires closeButton to be true
+   */
+  onClose?: () => void;
 }

 const Icon = ({ variant, ...props }) => {
@@ -53,6 +66,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>(
  (
    {
@@ -62,27 +84,45 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
      size = "medium",
      fullWidth = false,
      inline = false,
+      closeButton = false,
+      onClose,
      ...rest
    },
    ref
-  ) => (
-    <div
-      {...rest}
-      ref={ref}
-      className={cl(
-        className,
-        "navds-alert",
-        `navds-alert--${variant}`,
-        `navds-alert--${size}`,
-        { "navds-alert--full-width": fullWidth, "navds-alert--inline": inline }
-      )}
-    >
-      <Icon variant={variant} className="navds-alert__icon" />
-      <BodyLong as="div" size={size} className="navds-alert__wrapper">
-        {children}
-      </BodyLong>
-    </div>
-  )
+  ) => {
+    return (
+      <div
+        {...rest}
+        ref={ref}
+        className={cl(
+          className,
+          "navds-alert",
+          `navds-alert--${variant}`,
+          `navds-alert--${size}`,
+          {
+            "navds-alert--full-width": fullWidth,
+            "navds-alert--inline": inline,
+          }
+        )}
+      >
+        <Icon variant={variant} className="navds-alert__icon" />
+        <BodyLong as="div" size={size} className="navds-alert__wrapper">
+          {children}
+        </BodyLong>
+        {closeButton && !inline && (
+          <div className="navds-alert__button-wrapper">
+            <Button
+              className="navds-alert__button"
+              size="small"
+              variant="tertiary-neutral"
+              onClick={onClose}
+              icon={<XMarkIcon title="Lukk Alert" />}
+            />
+          </div>
+        )}
+      </div>
+    );
+  }
 );

 export default Alert;
@@ -2,6 +2,8 @@ import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { Alert } from ".";
 import { BodyLong, Heading as DsHeading, Link } from "..";
+import { within, userEvent } from "@storybook/testing-library";
+import { expect } from "@storybook/jest";

 const meta: Meta<typeof Alert> = {
  title: "ds-react/Alert",
@@ -20,22 +22,14 @@ const variants: Array<"error" | "warning" | "info" | "success"> = [
 ];

 export const Default: Story = {
-  render: (props) => (
-    <Alert
-      variant={props.variant}
-      size={props.size}
-      fullWidth={props.fullWidth}
-      inline={props.inline}
-    >
-      {props.children}
-    </Alert>
-  ),
+  render: (props) => <Alert {...props} />,

  args: {
    children: "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
    fullWidth: false,
    variant: "info",
    size: "medium",
+    closeButton: false,
  },
  argTypes: {
    variant: {
@@ -50,21 +44,39 @@ export const Default: Story = {
      },
      options: ["medium", "small"],
    },
+    closeButton: {
+      type: "boolean",
+    },
  },
 };

-export const Small = () => {
-  return (
-    <div className="colgap">
-      {variants.map((variant, i) => (
-        <Alert key={variant} variant={variant} size="small">
-          {new Array(i + 1).fill(
-            "Id elit esse enim reprehenderit enim nisi veniam nostrud."
-          )}
-        </Alert>
-      ))}
-    </div>
-  );
+export const Small = {
+  render: (props) => {
+    return (
+      <div className="colgap">
+        {variants.map((variant, i) => (
+          <Alert
+            key={variant}
+            variant={variant}
+            size="small"
+            closeButton={props.closeButton}
+          >
+            {new Array(i + 1).fill(
+              "Id elit esse enim reprehenderit enim nisi veniam nostrud."
+            )}
+          </Alert>
+        ))}
+      </div>
+    );
+  },
+  args: {
+    closeButton: false,
+  },
+  argtypes: {
+    closeButton: {
+      type: "boolean",
+    },
+  },
 };

 export const FullWidth = () => {
@@ -147,3 +159,44 @@ export const Links = () => {
    </div>
  );
 };
+
+const AlertWithCloseButton = ({ children }: { children?: React.ReactNode }) => {
+  let [show, setShow] = React.useState(true);
+
+  return (
+    show && (
+      <Alert variant="success" closeButton onClose={() => setShow(false)}>
+        {children || "Content"}
+      </Alert>
+    )
+  );
+};
+
+export const WithCloseButton: Story = {
+  render: () => {
+    return (
+      <div className="colgap">
+        <AlertWithCloseButton />
+        <AlertWithCloseButton>
+          <BodyLong>
+            Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
+            laboris ex. Labore ex occaecat proident qui qui fugiat magna. Fugiat
+            sint commodo consequat eu aute.
+          </BodyLong>
+          <Link href="#">Id elit esse enim reprehenderit</Link>
+        </AlertWithCloseButton>
+      </div>
+    );
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const buttons = canvas.getAllByTitle("Lukk Alert");
+
+    await step("click button", async () => {
+      await userEvent.click(buttons[0]);
+    });
+
+    const buttonsAfter = canvas.getAllByTitle("Lukk Alert");
+    expect(buttonsAfter.length).toBe(1);
+  },
+};
@@ -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 "neutral"
+   */
+  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 = "neutral",
      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 (
@@ -32,7 +70,7 @@ export const Chips: ChipsComponent = forwardRef<HTMLUListElement, ChipsProps>(
        })}
      >
        {React.Children.map(children, (chip, index) => {
-          return <li key={index + (chip?.toString() ?? "")}>{chip}</li>;
+          return <li key={chip?.toString() || index}>{chip}</li>;
        })}
      </ul>
    );
@@ -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>(
  (
    {
@@ -4,6 +4,7 @@ import React, { forwardRef, InputHTMLAttributes } from "react";
 import { BodyShort, ErrorMessage, Label, omit } from "..";
 import { FormFieldProps, useFormField } from "../form/useFormField";
 import { useDateInputContext } from "./context";
+import { ReadOnlyIcon } from "../form/ReadOnlyIcon";

 export interface DateInputProps
  extends FormFieldProps,
@@ -28,131 +29,127 @@ 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,
+    readOnly,
+  } = 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,
+          "navds-form-field--readonly": readOnly,
+          "navds-text-field--readonly": readOnly,
+          "navds-date__field--readonly": readOnly,
+        }
+      )}
+    >
+      <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", {
+        <ReadOnlyIcon readOnly={readOnly} />
+        {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}
+          readOnly={readOnly}
+          className={cl(
+            "navds-date__field-input",
+            "navds-text-field__input",
+            "navds-body-short",
+            `navds-body-${size}`
          )}
-        </div>
+          size={14}
+        />
+        <button
+          disabled={inputProps.disabled || readOnly}
+          tabIndex={readOnly ? -1 : 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)}
@@ -341,3 +341,25 @@ export const Size = () => {
    </div>
  );
 };
+
+export const Readonly = () => {
+  const { datepickerProps, inputProps } = useDatepicker({
+    fromDate: new Date("Aug 23 2019"),
+    toDate: new Date("Feb 23 2024"),
+    onDateChange: console.log,
+  });
+
+  return (
+    <div style={{ display: "flex", gap: "1rem" }}>
+      <DatePicker {...datepickerProps} dropdownCaption>
+        <DatePicker.Input
+          size="medium"
+          {...inputProps}
+          value="01.02.2021"
+          label="Velg dato"
+          readOnly
+        />
+      </DatePicker>
+    </div>
+  );
+};
@@ -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 => {
@@ -153,8 +166,7 @@ export const useDatepicker = (
  const handleOpen = useCallback(
    (open: boolean) => {
      setOpen(open);
-      !open &&
-        setMonth(selectedDay ?? defaultSelected ?? defaultMonth ?? today);
+      open && setMonth(selectedDay ?? defaultSelected ?? defaultMonth ?? today);
    },
    [defaultMonth, defaultSelected, selectedDay, today]
  );
@@ -191,6 +203,9 @@ export const useDatepicker = (
  };

  const handleFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
+    if (e.target.readOnly) {
+      return;
+    }
    !open && openOnFocus && handleOpen(true);
    let day = parseDate(
      e.target.value,
@@ -306,6 +321,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 => {
@@ -150,8 +163,7 @@ export const useMonthpicker = (
  const handleOpen = useCallback(
    (open: boolean) => {
      setOpen(open);
-      !open &&
-        setYear(selectedMonth ?? defaultSelected ?? defaultYear ?? today);
+      open && setYear(selectedMonth ?? defaultSelected ?? defaultYear ?? today);
    },
    [defaultSelected, defaultYear, selectedMonth, today]
  );
@@ -188,6 +200,9 @@ export const useMonthpicker = (
  };

  const handleFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
+    if (e.target.readOnly) {
+      return;
+    }
    !open && openOnFocus && handleOpen(true);
    let day = parseDate(
      e.target.value,
@@ -299,6 +314,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 => {
@@ -309,6 +321,9 @@ export const useRangeDatepicker = (
  };

  const handleFocus = (e, src: RangeT) => {
+    if (e.target.readOnly) {
+      return;
+    }
    !open && openOnFocus && setOpen(true);
    let day = parseDate(
      e.target.value,
@@ -532,6 +547,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}
@@ -6,7 +6,7 @@ import { useFormField } from "./useFormField";
 export interface ConfirmationPanelProps
  extends Omit<
    CheckboxProps,
-    "children" | "indeterminate" | "hideLabel" | "error"
+    "children" | "indeterminate" | "hideLabel" | "error" | "readOnly"
  > {
  /**
   * Additional information on panel
@@ -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
@@ -3,6 +3,7 @@ import React, { FieldsetHTMLAttributes, forwardRef, useContext } from "react";
 import { BodyShort, ErrorMessage, Label, omit } from "../..";
 import { FormFieldProps } from "../useFormField";
 import { useFieldset } from "./useFieldset";
+import { ReadOnlyIcon } from "../ReadOnlyIcon";

 export type FieldsetContextProps = {
  /**
@@ -21,6 +22,10 @@ export type FieldsetContextProps = {
   * Sets fieldset and all form-children to disabled
   */
  disabled: boolean;
+  /**
+   * Read only-state
+   */
+  readOnly?: boolean;
 };

 export const FieldsetContext = React.createContext<FieldsetContextProps | null>(
@@ -47,6 +52,7 @@ export interface FieldsetProps
   * @default true
   */
  errorPropagation?: boolean;
+  nativeReadOnly?: boolean;
 }

 export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
@@ -57,6 +63,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
      showErrorMsg,
      hasError,
      size,
+      readOnly,
      inputDescriptionId,
    } = useFieldset(props);

@@ -69,6 +76,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
      legend,
      description,
      hideLegend,
+      nativeReadOnly = true,
      ...rest
    } = props;

@@ -82,17 +90,21 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
          }),
          size,
          disabled: props.disabled ?? false,
+          readOnly,
        }}
      >
        <fieldset
-          {...omit(rest, ["errorId", "error", "size"])}
+          {...omit(rest, ["errorId", "error", "size", "readOnly"])}
          {...inputProps}
          ref={ref}
          className={cl(
            className,
            "navds-fieldset",
            `navds-fieldset--${size}`,
-            { "navds-fieldset--error": hasError }
+            {
+              "navds-fieldset--error": hasError,
+              "navds-fieldset--readonly": readOnly,
+            }
          )}
        >
          <Label
@@ -102,6 +114,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
              "navds-sr-only": !!hideLegend,
            })}
          >
+            <ReadOnlyIcon readOnly={readOnly} nativeReadOnly={nativeReadOnly} />
            {legend}
          </Label>
          {!!description && (
@@ -0,0 +1,20 @@
+import { PadlockLockedFillIcon } from "@navikt/aksel-icons";
+import React from "react";
+
+export const ReadOnlyIcon = ({
+  readOnly,
+  nativeReadOnly = true,
+}: {
+  readOnly?: boolean;
+  nativeReadOnly?: boolean;
+}) => {
+  if (readOnly) {
+    return (
+      <PadlockLockedFillIcon
+        {...(nativeReadOnly ? { "aria-hidden": true } : { title: "readonly" })}
+        className="navds-form-field__readonly-icon"
+      />
+    );
+  }
+  return null;
+};
@@ -4,6 +4,7 @@ import React, { forwardRef, SelectHTMLAttributes } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
 import { BodyShort, ErrorMessage, Label, omit } from "..";
 import { FormFieldProps, useFormField } from "./useFormField";
+import { ReadOnlyIcon } from "./ReadOnlyIcon";

 export interface SelectProps
  extends FormFieldProps,
@@ -30,6 +31,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 {
@@ -39,7 +56,8 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
      hasError,
      size,
      inputDescriptionId,
-    } = useFormField(props, "textField");
+      readOnly,
+    } = useFormField(props, "select");

    const {
      children,
@@ -52,6 +70,27 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
      ...rest
    } = props;

+    const readOnlyEventHandlers = {
+      onMouseDown: (evt) => {
+        // NOTE: does not prevent click
+        if (readOnly) {
+          evt.preventDefault();
+          // focus on the element as per readonly input behavior
+          evt.target.focus();
+        }
+      },
+      onKeyDown: (evt) => {
+        if (
+          readOnly &&
+          ["ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft", " "].includes(
+            evt.key
+          )
+        ) {
+          evt.preventDefault();
+        }
+      },
+    };
+
    return (
      <div
        className={cl(
@@ -60,7 +99,9 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
          `navds-form-field--${size}`,
          {
            "navds-form-field--disabled": !!inputProps.disabled,
+            "navds-form-field--readonly": readOnly,
            "navds-select--error": hasError,
+            "navds-select--readonly": readOnly,
          }
        )}
      >
@@ -71,6 +112,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
            "navds-sr-only": hideLabel,
          })}
        >
+          <ReadOnlyIcon readOnly={readOnly} nativeReadOnly={false} />
          {label}
        </Label>
        {!!description && (
@@ -87,8 +129,9 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
        )}
        <div className="navds-select__container" style={style}>
          <select
-            {...omit(rest, ["error", "errorId", "size"])}
+            {...omit(rest, ["error", "errorId", "size", "readOnly"])}
            {...inputProps}
+            {...readOnlyEventHandlers}
            ref={ref}
            className={cl(
              "navds-select__input",
@@ -7,6 +7,7 @@ import React, {
 } from "react";
 import { BodyShort, Loader, omit } from "..";
 import { FormFieldProps, useFormField } from "./useFormField";
+import { ReadOnlyIcon } from "./ReadOnlyIcon";

 const SelectedIcon = () => (
  <svg
@@ -55,9 +56,20 @@ 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>Varsle med SMS</Switch>
+ * ```
+ */
 export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
  (props, ref) => {
-    const { inputProps, size } = useFormField(props, "switch");
+    const { inputProps, size, readOnly } = useFormField(props, "switch");

    const {
      children,
@@ -79,11 +91,6 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
      checkedProp !== undefined && setChecked(checkedProp);
    }, [checkedProp]);

-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      setChecked(e.target.checked);
-      props.onChange && props.onChange(e);
-    };
-
    return (
      <div
        className={cl(
@@ -94,18 +101,32 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
          {
            "navds-switch--loading": loading,
            "navds-switch--disabled": inputProps.disabled ?? loading,
+            "navds-switch--readonly": readOnly,
          }
        )}
      >
        <input
-          {...omit(rest, ["size"])}
+          {...omit(rest, ["size", "readOnly"])}
          {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
          disabled={inputProps.disabled ?? loading}
          checked={checkedProp}
          defaultChecked={defaultChecked}
          ref={ref}
          type="checkbox"
-          onChange={(e) => handleChange(e)}
+          onChange={(e) => {
+            if (readOnly) {
+              return;
+            }
+            setChecked(e.target.checked);
+            props.onChange && props.onChange(e);
+          }}
+          onClick={(e) => {
+            if (readOnly) {
+              e.preventDefault();
+              return;
+            }
+            props?.onClick?.(e);
+          }}
          className={cl(className, "navds-switch__input")}
        />
        <span className="navds-switch__track">
@@ -125,6 +146,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
            })}
          >
            <BodyShort as="div" size={size} className="navds-switch__label">
+              <ReadOnlyIcon readOnly={readOnly} nativeReadOnly={false} />
              {children}
            </BodyShort>
            {description && (
@@ -1,6 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef, InputHTMLAttributes } from "react";
 import { BodyShort, ErrorMessage, Label, omit } from "..";
+import { ReadOnlyIcon } from "./ReadOnlyIcon";
 import { FormFieldProps, useFormField } from "./useFormField";

 export interface TextFieldProps
@@ -33,6 +34,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 {
@@ -51,6 +63,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
      htmlSize,
      hideLabel = false,
      type = "text",
+      readOnly,
      ...rest
    } = props;

@@ -60,10 +73,13 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
          className,
          "navds-form-field",
          `navds-form-field--${size}`,
+
          {
            "navds-text-field--error": hasError,
            "navds-text-field--disabled": !!inputProps.disabled,
            "navds-form-field--disabled": !!inputProps.disabled,
+            "navds-form-field--readonly": readOnly,
+            "navds-text-field--readonly": readOnly,
          }
        )}
      >
@@ -74,6 +90,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
            "navds-sr-only": hideLabel,
          })}
        >
+          <ReadOnlyIcon readOnly={readOnly} />
          {label}
        </Label>

@@ -94,6 +111,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
          {...inputProps}
          ref={ref}
          type={type}
+          readOnly={readOnly}
          className={cl(
            "navds-text-field__input",
            "navds-body-short",
@@ -3,6 +3,7 @@ import React, { forwardRef, useState } from "react";
 import { BodyShort, ErrorMessage, Label, omit, useId } from "..";
 import TextareaAutosize from "../util/TextareaAutoSize";
 import { FormFieldProps, useFormField } from "./useFormField";
+import { ReadOnlyIcon } from "./ReadOnlyIcon";

 /**
 * TODO: Mulighet for lokalisering av sr-only/counter text
@@ -55,6 +56,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 {
@@ -74,6 +86,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
      hideLabel = false,
      resize,
      i18n,
+      readOnly,
      ...rest
    } = props;

@@ -104,6 +117,8 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
          `navds-form-field--${size}`,
          {
            "navds-form-field--disabled": !!inputProps.disabled,
+            "navds-form-field--readonly": readOnly,
+            "navds-textarea--readonly": readOnly,
            "navds-textarea--error": hasError,
            "navds-textarea--resize": resize,
          }
@@ -116,6 +131,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
            "navds-sr-only": hideLabel,
          })}
        >
+          <ReadOnlyIcon readOnly={readOnly} />
          {label}
        </Label>
        {!!description && (
@@ -141,6 +157,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
            }
            minRows={getMinRows()}
            ref={ref}
+            readOnly={readOnly}
            className={cl(
              "navds-textarea__input",
              "navds-body-short",
@@ -192,8 +209,8 @@ export const Counter = ({ maxLength, currentLength, size, i18n }) => {
      size={size}
    >
      {difference < 0
-        ? `${Math.abs(difference)} ${i18n?.counterLeft ?? "tegn for mye"}`
-        : `${difference} ${i18n?.counterTooMuch ?? "tegn igjen"}`}
+        ? `${Math.abs(difference)} ${i18n?.counterTooMuch ?? "tegn for mye"}`
+        : `${difference} ${i18n?.counterLeft ?? "tegn igjen"}`}
    </BodyShort>
  );
 };
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot]	93975bc935	Version Packages (#2118 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-07-19 20:14:53 +02:00
Ken	3a0dac3997	🐛 Fikset datepicker-bug for dynamsik oppdatering av 'month' (#2117 )	2023-07-19 20:12:14 +02:00
Andreas Nordahl	1d43710af0	Remove preconnect link to fonts.googleapis.com(#2114 )	2023-07-19 17:45:55 +02:00
github-actions[bot]andgithub-actions[bot]	6df7c78e3c	Version Packages (#2111 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-07-17 22:35:24 +02:00
Andreas NordahlandKen	476d79e487	Expose timeline axis label templates as a prop (#2109 ) Co-authored-by: Ken <ken.aleksander@gmail.com>	2023-07-17 22:32:16 +02:00
dependabot[bot]andLars Eirik Korsgaard Hansen	238a715c92	⬆️ Bump semver from 5.7.1 to 5.7.2 (#2107 ) Bumps [semver](https://github.com/npm/node-semver) from 5.7.1 to 5.7.2. - [Release notes](https://github.com/npm/node-semver/releases) - [Changelog](https://github.com/npm/node-semver/blob/v5.7.2/CHANGELOG.md) - [Commits](https://github.com/npm/node-semver/compare/v5.7.1...v5.7.2) --- updated-dependencies: - dependency-name: semver dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Lars Eirik Korsgaard Hansen <71271458+larseirikhansen@users.noreply.github.com>	2023-07-14 15:06:55 +02:00
Lars Eirik Korsgaard Hansen	0fadd33e3e	Combobox fixes (#2112 ) Combobox post-release tweaks * Add dynamic height to examples because of the dropdown * Examples were not working: remove controlled prop for uncontrolled Comboboxes * Add an example with controlled Combobox	2023-07-14 11:08:47 +02:00
Ken	eadc0bce13	📝 Oppdatert changeset for bedre endringslogg	2023-07-13 15:50:29 +02:00
Lars Eirik Korsgaard Hansen	678db9b11b	Update spotty-onions-cough.md	2023-07-13 15:39:40 +02:00
Lars Eirik Korsgaard Hansen	e3027cc196	✨ Ny komponent: Combobox (#1868 ) ✨Ny komponent: Combobox 🎉 Combobox er en ny komponent som kombinerer tekstfelt og nedtrekksliste. - Velg mellom predefinerte alternativer i nedtrekkslisten - Bruk input-feltet som filter for alternativene i nedtrekkslisten. - Legg inn nye svar, hvis svaret du ikke finnes i listen - Velg mellom SingleSelect eller MultiSelect-versjon for henholdsvis ett og flere valg. - Autocomplete svar i inputfeltet når man velger SingleSelect Dokumentasjonen finner du på https://aksel.nav.no/komponenter/core/combobox	2023-07-13 15:17:05 +02:00
Ken	ac0fd790e3	⚰️ Fjernet ubrukt metrics-løsning (#2098 )	2023-07-06 17:42:38 +02:00
SjurandKen	c344c9beb4	Update removable.tsx (#2101 ) Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>	2023-07-06 17:22:24 +02:00
SjurandKen	5cb5dea4ff	Update toggle-neutral.tsx (#2100 ) Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>	2023-07-06 14:42:51 +02:00
Sjur	054c63b161	Update toggle.tsx (#2099 )	2023-07-06 14:42:12 +02:00
Julian Nymark	f60ba32f97	split default example into separate examples (#2097 ) * split default example into separate examples * also keep the default * remove unnecessary div wrapper for single elements	2023-07-06 13:28:26 +02:00
Ken	54811b394d	✨ Eksterne sider åpnes nå i ny fane	2023-07-06 13:14:33 +02:00
Ken	c6b0570c4c	🔇 Fjernet API-access for tilbakemeldinger	2023-07-06 11:21:05 +02:00
Ken	8baa1ab0b4	🔒 Fjernet kommentarfelt på aksel	2023-07-05 09:24:10 +02:00
Ken	06ceeb3e6f	🐛 Fikset rouge ';' i preview	2023-07-04 21:55:21 +02:00
Ken	02f19858c7	🐛 Fikset sanity-auth for preview og edit-knapp	2023-07-04 21:51:21 +02:00
Ken	799e26a628	🐛 Fikset lenker på komponentside	2023-07-04 17:11:53 +02:00
Ken	f5e5843916	Oppdatert sanity, Lister opp alle utdaterte artikler for forfatter (#2091 )	2023-07-04 13:59:33 +02:00
github-actions[bot]andgithub-actions[bot]	4b8ed30554	Version Packages (#2090 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-07-03 14:38:52 +02:00
Ken	28430f1345	🐛 Fikset layout-bug i skjemakomponenter (#2089 )	2023-07-03 14:34:50 +02:00
github-actions[bot]andgithub-actions[bot]	d242325863	Version Packages (#2087 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-07-03 13:22:31 +02:00
Ken	ae70bfa719	ReadOnly for skjemakomponenter (#2080 )	2023-07-03 12:37:48 +02:00
Ken	0aef861622	📝 Readme-oppdatering	2023-06-30 14:33:58 +02:00
Ken	525b021e0f	📝 Oppdatert Switch-eksempler	2023-06-30 11:23:22 +02:00
Ken	761344c34e	🎨 Oppdatert sidebar-config for sanity	2023-06-30 10:34:39 +02:00
github-actions[bot]andgithub-actions[bot]	a67f61c33f	Version Packages (#2084 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-06-29 15:23:12 +02:00
Julian NymarkandKen	b05958863b	add close button to alert (#2079 ) Co-authored-by: Ken <ken.aleksander@gmail.com>	2023-06-29 13:43:10 +02:00
Ken	883ae00dfa	💄 Fikset sidebar :before-element	2023-06-29 13:25:17 +02:00
github-actions[bot]andgithub-actions[bot]	6eb8a79092	Version Packages (#2082 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-06-28 11:35:27 +02:00
Ken	718b3204d8	🐛 Fikset i18n for textarea	2023-06-28 11:25:32 +02:00
Ken	45970ac0fb	🐛 UU dukket ikke opp i søk	2023-06-28 10:39:54 +02:00
Ken	fe5e8ada74	🐛 Fikset capitalize på god-praksis tagger	2023-06-28 10:39:07 +02:00
Ken	3e625a5cb5	🐛 Underline brakk på windows for forside-kort	2023-06-28 10:06:23 +02:00
Ken	edc3495ce6	🐛 Fikset text-decoration for windows på aksel.nav.no	2023-06-27 20:26:59 +02:00
Ken	2520bc7ff5	🎨 Fikset lenker brukt på Aksel.nav.no 🎨 Intro-cards shadows 💄 Komponentoversikt-cards 💄 Oppdatert lenkevisning for cards på aksel.nav.no	2023-06-27 15:25:06 +02:00
github-actions[bot]andgithub-actions[bot]	44446e753a	Version Packages (#2078 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-06-26 13:38:24 +02:00
Halvor Haugan	4156326752	Chat: fjern border, gjør svg mindre, bytt om "subtle" og "neutral" (#2077 )	2023-06-26 13:27:25 +02:00
Ken	23970486ed	🐛 fikset date-handling for preview av god-praksis	2023-06-26 12:31:36 +02:00
Ken	a8f1069650	🎉 Automatisk changelog på aksel.nav.no 🔥 Fjernet unified fra dependencies 🐛 Fikset changelog-format, la inn støtte for emojies	2023-06-23 18:30:03 +02:00
Julian Nymark	f9c8320b74	sort + reverse the semver entries (#2074 )	2023-06-23 11:01:33 +02:00
Ken	c4839a12ed	📝 Oppdatert PR-template, Changelog-cleanup (#2073 )	2023-06-23 10:43:53 +02:00
Halvor Haugan	60f64d7f70	📝 Dropdown: Better Item examples (#2072 )	2023-06-22 17:21:12 +02:00
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