Version Packages (#2916 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
refactor: removed unsplash plugin from sanity media input (#2921 )
2026-10-13 17:22:02 +00:00 · 2024-05-14 15:29:55 +02:00 · 2024-05-14 11:31:45 +02:00 · 2024-05-14 10:15:52 +02:00 · 2024-05-14 10:14:35 +02:00 · 2024-05-14 09:40:59 +02:00
686 changed files with 24152 additions and 14647 deletions
@@ -19,6 +19,7 @@ add links to project-tasks, slack discussions etc here
 - 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`
+- Check that component is exported from `@navikt/core/react/package.json`
 - 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 vitest.
@@ -14,12 +14,18 @@ jobs:
      contents: "read"
      id-token: "write"
    steps:
+      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: "20"
-      - uses: actions/checkout@v3
+          cache: yarn
+      - name: set-env for yarn install to @navikt scope
+        shell: bash
+        run: echo "NPM_AUTH_TOKEN=${{ secrets.READER_TOKEN }}" >> $GITHUB_ENV
+
      - name: add tokens to .env
        run: |
+          echo "SLACK_BOT_TOKEN=${{ secrets.SLACK_BOT_TOKEN }}" >> aksel.nav.no/website/.env
          echo "SANITY_WRITE_KEY=${{ secrets.SANITY_FEEDBACK_WRITE_KEY }}" >> aksel.nav.no/website/.env
          echo "SANITY_PREVIEW_TOKEN=${{ secrets.SANITY_PREVIEW_TOKEN }}" >> aksel.nav.no/website/.env
          echo "SANITY_PRIVATE_NO_DRAFTS=${{ secrets.SANITY_PRIVATE_NO_DRAFTS }}" >> aksel.nav.no/website/.env
@@ -29,14 +35,6 @@ jobs:
        run: |
          echo "User-agent: *\nDisallow: /" > aksel.nav.no/website/public/robots.txt

-      - name: Restore cache
-        uses: actions/cache@v3
-        with:
-          path: "**/node_modules"
-          key: ${{ runner.os }}-dev-${{ github.sha }}
-          restore-keys: |
-            ${{ runner.os }}-dev-
-
      - name: Install dependencies
        run: yarn

@@ -46,11 +44,13 @@ jobs:
          yarn workspace aksel.nav.no build:next

      - name: Upload static files to NAV CDN
-        uses: navikt/frontend/actions/cdn-upload/v1@main
+        uses: nais/deploy/actions/cdn-upload/v2@master
        with:
-          cdn-team-name: aksel
+          team: designsystem
          source: ./aksel.nav.no/website/.next/static
          destination: "/website/_next"
+          project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}
+          identity_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}

      - name: Get complete tag
        run: echo "TAG=DEV-$( date +%s )" >> $GITHUB_ENV
@@ -14,22 +14,20 @@ jobs:
    name: Update component data
    runs-on: ubuntu-latest
    steps:
+      - uses: actions/checkout@v3
+
      - uses: actions/setup-node@v3
        with:
          node-version: "20"
-      - uses: actions/checkout@v3
+          cache: yarn
+      - name: set-env for yarn install to @navikt scope
+        shell: bash
+        run: echo "NPM_AUTH_TOKEN=${{ secrets.READER_TOKEN }}" >> $GITHUB_ENV
+
      - name: add tokens to .env
        run: |
          echo "SANITY_WRITE_KEY=${{ secrets.SANITY_FEEDBACK_WRITE_KEY }}" >> aksel.nav.no/website/.env

-      - name: Restore cache
-        uses: actions/cache@v3
-        with:
-          path: "**/node_modules"
-          key: ${{ runner.os }}-prod-${{ github.sha }}
-          restore-keys: |
-            ${{ runner.os }}-prod-
-
      - name: Install dependencies
        run: yarn

@@ -49,25 +47,24 @@ jobs:
      contents: "read"
      id-token: "write"
    steps:
+      - uses: actions/checkout@v3
+
      - uses: actions/setup-node@v3
        with:
          node-version: "20"
-      - uses: actions/checkout@v3
+          cache: yarn
+      - name: set-env for yarn install to @navikt scope
+        shell: bash
+        run: echo "NPM_AUTH_TOKEN=${{ secrets.READER_TOKEN }}" >> $GITHUB_ENV
+
      - name: add tokens to .env
        run: |
+          echo "SLACK_BOT_TOKEN=${{ secrets.SLACK_BOT_TOKEN }}" >> aksel.nav.no/website/.env
          echo "SANITY_WRITE_KEY=${{ secrets.SANITY_FEEDBACK_WRITE_KEY }}" >> aksel.nav.no/website/.env
          echo "SANITY_PREVIEW_TOKEN=${{ secrets.SANITY_PREVIEW_TOKEN }}" >> aksel.nav.no/website/.env
          echo "SANITY_PRIVATE_NO_DRAFTS=${{ secrets.SANITY_PRIVATE_NO_DRAFTS }}" >> aksel.nav.no/website/.env
          echo "USE_CDN_ASSETS=true" >> aksel.nav.no/website/.env

-      - name: Restore cache
-        uses: actions/cache@v3
-        with:
-          path: "**/node_modules"
-          key: ${{ runner.os }}-prod-${{ github.sha }}
-          restore-keys: |
-            ${{ runner.os }}-prod-
-
      - name: Install dependencies
        run: yarn

@@ -81,11 +78,13 @@ jobs:
        run: yarn workspace aksel.nav.no build:next

      - name: Upload static files to NAV CDN
-        uses: navikt/frontend/actions/cdn-upload/v1@main
+        uses: nais/deploy/actions/cdn-upload/v2@master
        with:
-          cdn-team-name: aksel
+          team: designsystem
          source: ./aksel.nav.no/website/.next/static
          destination: "/website/_next"
+          project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}
+          identity_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}

      - name: Get complete tag
        run: echo "TAG=PROD-$( date +%s )" >> $GITHUB_ENV
@@ -11,17 +11,15 @@ jobs:
      - uses: actions/checkout@v3
        with:
          fetch-depth: 0 # Required to retrieve git history
+
      - uses: actions/setup-node@v3
        with:
          node-version: "20"
+          cache: yarn
+      - name: set-env for yarn install to @navikt scope
+        shell: bash
+        run: echo "NPM_AUTH_TOKEN=${{ secrets.READER_TOKEN }}" >> $GITHUB_ENV

-      - name: Restore cache
-        uses: actions/cache@v3
-        with:
-          path: "**/node_modules"
-          key: ${{ runner.os }}-build-${{ github.sha }}
-          restore-keys: |
-            ${{ runner.os }}-build-
      - name: Install dependencies
        run: cd aksel.nav.no/website && yarn

@@ -24,14 +24,9 @@ jobs:
        with:
          node-version: "20"
          cache: yarn
-
-      - name: Restore cache
-        uses: actions/cache@v3
-        with:
-          path: "**/node_modules"
-          key: ${{ runner.os }}-test-${{ github.sha }}
-          restore-keys: |
-            ${{ runner.os }}-test
+      - name: set-env for yarn install to @navikt scope
+        shell: bash
+        run: echo "NPM_AUTH_TOKEN=${{ secrets.READER_TOKEN }}" >> $GITHUB_ENV

      - name: Install dependencies
        run: yarn
@@ -19,6 +19,10 @@ jobs:
      - uses: actions/setup-node@v3
        with:
          node-version: "20"
+          cache: yarn
+      - name: set-env for yarn install to @navikt scope
+        shell: bash
+        run: echo "NPM_AUTH_TOKEN=${{ secrets.READER_TOKEN }}" >> $GITHUB_ENV

      - name: add tokens to .env
        run: |
@@ -26,14 +30,6 @@ jobs:
          echo "SANITY_PREVIEW_TOKEN=${{ secrets.SANITY_PREVIEW_TOKEN }}" >> aksel.nav.no/website/.env
          echo "SANITY_PRIVATE_NO_DRAFTS=${{ secrets.SANITY_PRIVATE_NO_DRAFTS }}" >> aksel.nav.no/website/.env

-      - name: Restore cache
-        uses: actions/cache@v3
-        with:
-          path: "**/node_modules"
-          key: ${{ runner.os }}-e2e-${{ github.sha }}
-          restore-keys: |
-            ${{ runner.os }}-e2e-
-
      - name: Install dependencies
        run: yarn

@@ -20,11 +20,13 @@ jobs:
      - uses: "actions/checkout@v3"

      - id: upload
-        uses: navikt/frontend/actions/cdn-upload/v1@main
+        uses: nais/deploy/actions/cdn-upload/v2@master
        with:
-          cdn-team-name: aksel
+          team: aksel
          source: ./fonts
          destination: "" # uploads folder to team root
+          project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}
+          identity_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}

      - run: echo uploaded file ${{ steps.upload.outputs.uploaded }}
        shell: bash
@@ -30,19 +30,14 @@ jobs:
        with:
          node-version: "20"
          cache: yarn
+      - name: set-env for yarn install to @navikt scope
+        shell: bash
+        run: echo "NPM_AUTH_TOKEN=${{ secrets.READER_TOKEN }}" >> $GITHUB_ENV

      - uses: denoland/setup-deno@v1
        with:
          deno-version: v1.x

-      - name: Restore cache
-        uses: actions/cache@v3
-        with:
-          path: "**/node_modules"
-          key: ${{ runner.os }}-prod-${{ github.sha }}
-          restore-keys: |
-            ${{ runner.os }}-prod
-
      - name: Install dependencies
        run: yarn

@@ -85,11 +80,13 @@ jobs:

      - name: Upload updated icon.zip to NAV CDN
        if: steps.changesets.outputs.published == 'true'
-        uses: navikt/frontend/actions/cdn-upload/v1@main
+        uses: nais/deploy/actions/cdn-upload/v2@master
        with:
-          cdn-team-name: aksel
+          team: aksel
          source: ./@navikt/aksel-icons/aksel-icons.zip
          destination: "/icons/zip"
+          project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}
+          identity_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}

      - name: Get @navikt/ds-css version
        run: |
@@ -99,8 +96,10 @@ jobs:

      - name: Upload CSS to NAV CDN
        if: steps.changesets.outputs.published == 'true'
-        uses: navikt/frontend/actions/cdn-upload/v1@main
+        uses: nais/deploy/actions/cdn-upload/v2@master
        with:
-          cdn-team-name: aksel
+          team: aksel
          source: ./@navikt/core/css/dist/version/${{env.version}}
          destination: "@navikt/ds-css"
+          project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}
+          identity_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}
@@ -1,16 +1,12 @@
-import { mergeConfig } from "vite";
 import turbosnap from "vite-plugin-turbosnap";

 export default {
  staticDirs: ["./public"],

-  stories: () => [
-    "../@navikt/**/*.stories.@(js|jsx|ts|tsx|mdx)",
-    "./*.stories.mdx",
-  ],
+  stories: () => ["../@navikt/**/*.stories.@(js|jsx|ts|tsx|mdx)", "./*.mdx"],
  addons: [
    "@storybook/addon-a11y",
-    "@xfinx/storybook-addon-html",
+    "@whitespace/storybook-addon-html",
    "@storybook/addon-interactions",
    {
      name: "@storybook/addon-storysource",
@@ -35,9 +31,6 @@ export default {
    name: "@storybook/react-vite",
    options: {},
  },
-  features: {
-    storyStoreV7: true,
-  },
  docs: {
    autodocs: "tag",
  },
@@ -48,6 +41,7 @@ export default {
  },

  async viteFinal(config, { configType }) {
+    const { mergeConfig } = await import("vite");
    return mergeConfig(config, {
      plugins:
        configType === "PRODUCTION"
@@ -2,6 +2,12 @@ enableImmutableInstalls: false

 nodeLinker: node-modules

+npmScopes:
+  navikt:
+    npmAlwaysAuth: true
+    npmAuthToken: "${NPM_AUTH_TOKEN:-}"
+    npmRegistryServer: "https://npm.pkg.github.com"
+
 plugins:
  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
    spec: "@yarnpkg/plugin-workspace-tools"
@@ -1,5 +1,43 @@
 # @navikt/aksel-icons

+## 6.8.0
+
+## 6.7.1
+
+## 6.7.0
+
+## 6.6.1
+
+## 6.6.0
+
+## 6.5.0
+
+## 6.4.1
+
+## 6.4.0
+
+## 6.3.6
+
+## 6.3.5
+
+## 6.3.4
+
+## 6.3.3
+
+## 6.3.2
+
+## 6.3.1
+
+## 6.3.0
+
+## 6.2.0
+
+### Minor Changes
+
+- Ikoner: Nytt ikon `archive` ([#2772](https://github.com/navikt/aksel/pull/2772))
+
+- Ikoner: Nytt ikon `opensource` ([#2787](https://github.com/navikt/aksel/pull/2787))
+
 ## 6.1.1

 ## 6.1.0
@@ -6,5 +6,8 @@
  "ui": "dist/index.html",
  "capabilities": [],
  "enableProposedApi": false,
-  "editorType": ["figma", "figjam"]
+  "editorType": ["figma", "figjam"],
+  "networkAccess": {
+    "allowedDomains": ["none"]
+  }
 }
@@ -28,7 +28,7 @@
    "postcss": "^8.4.31",
    "postcss-url": "^10.1.3",
    "typescript": "^5.1.6",
-    "vite": "^5.0.12",
+    "vite": "^5.1.7",
    "vite-plugin-singlefile": "^1.0.0",
    "vite-plugin-svgr": "^4.2.0"
  }
@@ -3,12 +3,12 @@ import React from "react";
 import * as AkselIcons from "@navikt/aksel-icons";
 import { StarFillIcon } from "@navikt/aksel-icons";

-const meta = {
+const meta: Meta<typeof StarFillIcon> = {
  title: "aksel-icons/Icons",
-} satisfies Meta<typeof StarFillIcon>;
-
+};
 export default meta;
-type Story = StoryObj<typeof meta>;
+
+type Story = StoryObj<typeof StarFillIcon>;

 export const Icons: Story = {
  render: () => {
@@ -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="M3.25 4C3.25 3.58579 3.58579 3.25 4 3.25H20C20.4142 3.25 20.75 3.58579 20.75 4V8C20.75 8.41421 20.4142 8.75 20 8.75H19.75V19C19.75 19.9665 18.9665 20.75 18 20.75H6C5.0335 20.75 4.25 19.9665 4.25 19V8.75H4C3.58579 8.75 3.25 8.41421 3.25 8V4ZM5.75 8.75H18.25V19C18.25 19.1381 18.1381 19.25 18 19.25H6C5.86193 19.25 5.75 19.1381 5.75 19V8.75ZM4.75 4.75V7.25H19.25V4.75H4.75ZM14 13.25C14.4142 13.25 14.75 12.9142 14.75 12.5C14.75 12.0858 14.4142 11.75 14 11.75H10C9.58579 11.75 9.25 12.0858 9.25 12.5C9.25 12.9142 9.58579 13.25 10 13.25H14Z" fill="#23262A"/>
+</svg>
@@ -0,0 +1,10 @@
+name: Archive
+category: Interface
+sub_category: Communication
+keywords:
+  - arkiv
+  - box
+  - boks
+variant: Stroke
+updated_at: 22.02.2024
+created_at: 22.02.2024
@@ -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="M4 3.25C3.58579 3.25 3.25 3.58579 3.25 4V7.5C3.25 7.91421 3.58579 8.25 4 8.25H20C20.4142 8.25 20.75 7.91421 20.75 7.5V4C20.75 3.58579 20.4142 3.25 20 3.25H4ZM19.5 9.25C19.6381 9.25 19.75 9.36193 19.75 9.5V19C19.75 19.9665 18.9665 20.75 18 20.75H6C5.0335 20.75 4.25 19.9665 4.25 19V9.5C4.25 9.36193 4.36193 9.25 4.5 9.25H19.5ZM14.75 12.5C14.75 12.9142 14.4142 13.25 14 13.25H10C9.58579 13.25 9.25 12.9142 9.25 12.5C9.25 12.0858 9.58579 11.75 10 11.75H14C14.4142 11.75 14.75 12.0858 14.75 12.5Z" fill="#23262A"/>
+</svg>
@@ -0,0 +1,10 @@
+name: ArchiveFill
+category: Interface
+sub_category: Communication
+keywords:
+  - arkiv
+  - box
+  - boks
+variant: Fill
+updated_at: 22.02.2024
+created_at: 22.02.2024
@@ -13,5 +13,5 @@ keywords:
  - reload
  - oppdater
 variant: Stroke
-updated_at: 04.12.2023
+updated_at: 14.02.2024
 created_at: 07.03.2023
@@ -9,5 +9,5 @@ keywords:
  - nivå
  - innrykk
 variant: Stroke
-updated_at: 04.12.2023
+updated_at: 16.01.2024
 created_at: 04.12.2023
@@ -13,5 +13,5 @@ keywords:
  - forward
  - videresend
 variant: Stroke
-updated_at: 04.12.2023
+updated_at: 23.02.2024
 created_at: 07.03.2023
@@ -13,5 +13,5 @@ keywords:
  - oppfrisking
  - oppdatering
 variant: Stroke
-updated_at: 04.12.2023
+updated_at: 29.02.2024
 created_at: 07.03.2023
@@ -9,5 +9,5 @@ keywords:
  - sortering
  - sorting
 variant: Stroke
-updated_at: 04.12.2023
+updated_at: 22.02.2024
 created_at: 07.03.2023
@@ -15,5 +15,5 @@ keywords:
  - Sammenføye
  - Kildekontroll
 variant: Stroke
-updated_at: 04.12.2023
+updated_at: 18.01.2024
 created_at: 07.03.2023
@@ -5,5 +5,5 @@ keywords:
  - ned
  - down
 variant: Stroke
-updated_at: 04.12.2023
+updated_at: 25.01.2024
 created_at: 07.03.2023
@@ -5,5 +5,5 @@ keywords:
  - left
  - venstre
 variant: Stroke
-updated_at: 04.12.2023
+updated_at: 11.03.2024
 created_at: 07.03.2023
@@ -5,5 +5,5 @@ keywords:
  - opp
  - up
 variant: Stroke
-updated_at: 04.12.2023
+updated_at: 25.01.2024
 created_at: 07.03.2023
@@ -8,5 +8,5 @@ keywords:
  - Utvide/skjule
  - vise/skjule
 variant: Stroke
-updated_at: 04.12.2023
+updated_at: 04.03.2024
 created_at: 07.03.2023
@@ -15,5 +15,5 @@ keywords:
  - markup-språk
  - kildekode
 variant: Stroke
-updated_at: 04.12.2023
+updated_at: 01.03.2024
 created_at: 07.03.2023
@@ -7,5 +7,5 @@ keywords:
  - downloading
  - last ned
 variant: Stroke
-updated_at: 04.12.2023
+updated_at: 08.03.2024
 created_at: 07.03.2023
@@ -5,5 +5,5 @@ keywords:
  - trapp
  - rulletrapp
 variant: Stroke
-updated_at: 04.12.2023
+updated_at: 12.03.2024
 created_at: 07.03.2023
@@ -9,5 +9,5 @@ keywords:
  - open
  - åpne
 variant: Stroke
-updated_at: 04.12.2023
+updated_at: 24.01.2024
 created_at: 07.03.2023
@@ -13,5 +13,5 @@ keywords:
  - fremdrift
  - nedtelling
 variant: Stroke
-updated_at: 04.12.2023
+updated_at: 21.02.2024
 created_at: 07.03.2023
@@ -13,5 +13,5 @@ keywords:
  - fremdrift
  - nedtelling
 variant: Stroke
-updated_at: 04.12.2023
+updated_at: 22.01.2024
 created_at: 07.03.2023
@@ -13,5 +13,5 @@ keywords:
  - fremdrift
  - nedtelling
 variant: Stroke
-updated_at: 04.12.2023
+updated_at: 16.01.2024
 created_at: 07.03.2023
@@ -8,5 +8,5 @@ keywords:
  - replace
  - new version
 variant: Stroke
-updated_at: 04.12.2023
+updated_at: 18.01.2024
 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="M6.06458 4.26481C7.76736 2.95822 9.85369 2.25 12 2.25C14.1463 2.25 16.2326 2.95821 17.9354 4.2648C19.6382 5.57139 20.8623 7.40334 21.4178 9.47651C21.9733 11.5497 21.8292 13.7482 21.0078 15.7312C20.1865 17.7141 18.7338 19.3706 16.875 20.4437C16.7027 20.5432 16.498 20.5702 16.3059 20.5187C16.1138 20.4672 15.9499 20.3415 15.8505 20.1692L12.7005 14.7133C12.601 14.541 12.5741 14.3363 12.6256 14.1442C12.677 13.952 12.8027 13.7882 12.975 13.6887C13.3468 13.4741 13.6373 13.1428 13.8016 12.7462C13.9658 12.3496 13.9947 11.9099 13.8836 11.4953C13.7725 11.0807 13.5276 10.7143 13.1871 10.453C12.8465 10.1916 12.4293 10.05 12 10.05C11.5707 10.05 11.1535 10.1916 10.8129 10.453C10.4724 10.7143 10.2275 11.0807 10.1164 11.4953C10.0053 11.9099 10.0342 12.3496 10.1984 12.7462C10.3627 13.1428 10.6533 13.4741 11.025 13.6887C11.1973 13.7882 11.323 13.952 11.3744 14.1442C11.4259 14.3363 11.399 14.541 11.2995 14.7133L8.14952 20.1692C8.05007 20.3415 7.88625 20.4672 7.69412 20.5187C7.50198 20.5702 7.29727 20.5432 7.125 20.4437C5.26625 19.3706 3.81354 17.7141 2.99218 15.7312C2.17082 13.7482 2.02672 11.5497 2.58223 9.47652C3.13773 7.40334 4.3618 5.5714 6.06458 4.26481ZM12 3.75C10.1839 3.75 8.41854 4.34926 6.97772 5.45484C5.53691 6.56041 4.50116 8.11052 4.03112 9.86474C3.56107 11.619 3.683 13.4793 4.378 15.1571C4.97686 16.6029 5.97237 17.8436 7.24256 18.7401L9.66674 14.5413C9.29868 14.2034 9.00613 13.7874 8.81262 13.3203C8.52199 12.6186 8.471 11.8407 8.66756 11.1071C8.86412 10.3735 9.29725 9.72526 9.89978 9.26293C10.5023 8.8006 11.2405 8.55 12 8.55C12.7595 8.55 13.4977 8.8006 14.1002 9.26293C14.7028 9.72526 15.1359 10.3735 15.3324 11.1071C15.529 11.8407 15.478 12.6186 15.1874 13.3203C14.9939 13.7874 14.7013 14.2034 14.3333 14.5413L16.7574 18.7401C18.0276 17.8436 19.0231 16.6029 19.622 15.1571C20.317 13.4793 20.4389 11.619 19.9689 9.86474C19.4988 8.11052 18.4631 6.56041 17.0223 5.45483C15.5815 4.34926 13.8161 3.75 12 3.75Z" fill="#23262A"/>
+</svg>
@@ -0,0 +1,19 @@
+name: OpenSource
+category: Development
+sub_category: Development
+keywords:
+  - location
+  - tracking
+  - identification
+  - signaling
+  - broadcasting
+  - detection
+  - lokalisering
+  - sporing
+  - identifikasjon
+  - signalisering
+  - kringkasting
+  - deteksjon
+variant: Stroke
+updated_at: 08.03.2024
+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="M6.06458 4.26481C7.76736 2.95822 9.85369 2.25 12 2.25C14.1463 2.25 16.2326 2.95821 17.9354 4.2648C19.6382 5.57139 20.8623 7.40334 21.4178 9.47651C21.9733 11.5497 21.8292 13.7482 21.0078 15.7312C20.1865 17.7141 18.7338 19.3706 16.875 20.4437C16.7027 20.5432 16.498 20.5702 16.3059 20.5187C16.1138 20.4672 15.9499 20.3415 15.8505 20.1692L12.7005 14.7133C12.601 14.541 12.5741 14.3363 12.6256 14.1442C12.677 13.952 12.8027 13.7882 12.975 13.6887C13.3468 13.4741 13.6373 13.1428 13.8016 12.7462C13.9658 12.3496 13.9947 11.9099 13.8836 11.4953C13.7725 11.0807 13.5276 10.7143 13.1871 10.453C12.8465 10.1916 12.4293 10.05 12 10.05C11.5707 10.05 11.1535 10.1916 10.8129 10.453C10.4724 10.7143 10.2275 11.0807 10.1164 11.4953C10.0053 11.9099 10.0342 12.3496 10.1984 12.7462C10.3627 13.1428 10.6533 13.4741 11.025 13.6887C11.1973 13.7882 11.323 13.952 11.3744 14.1442C11.4259 14.3363 11.399 14.541 11.2995 14.7133L8.14952 20.1692C8.05007 20.3415 7.88625 20.4672 7.69412 20.5187C7.50198 20.5702 7.29727 20.5432 7.125 20.4437C5.26625 19.3706 3.81354 17.7141 2.99218 15.7312C2.17082 13.7482 2.02672 11.5497 2.58223 9.47652C3.13773 7.40334 4.3618 5.5714 6.06458 4.26481Z" fill="#23262A"/>
+</svg>
@@ -0,0 +1,19 @@
+name: OpenSourceFill
+category: Development
+sub_category: Development
+keywords:
+  - location
+  - tracking
+  - identification
+  - signaling
+  - broadcasting
+  - detection
+  - lokalisering
+  - sporing
+  - identifikasjon
+  - signalisering
+  - kringkasting
+  - deteksjon
+variant: Fill
+updated_at: 08.03.2024
+created_at: 07.03.2023
@@ -9,5 +9,5 @@ keywords:
  - hidden
  - show/hide
 variant: Stroke
-updated_at: 04.12.2023
+updated_at: 18.01.2024
 created_at: 07.03.2023
@@ -1,3 +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="M12.4445 6.61612C12.679 6.3817 12.9969 6.25 13.3284 6.25H17.5C17.6381 6.25 17.75 6.36193 17.75 6.5V10.6716C17.75 11.0031 17.6183 11.321 17.3839 11.5555L9.17678 19.7626C9.07915 19.8602 8.92086 19.8602 8.82322 19.7626L4.23744 15.1768C4.13981 15.0791 4.13981 14.9209 4.23744 14.8232L12.4445 6.61612ZM13.3284 4.75C12.5991 4.75 11.8996 5.03973 11.3839 5.55546L3.17678 13.7626C2.49336 14.446 2.49336 15.554 3.17678 16.2374L7.76256 20.8232C8.44598 21.5066 9.55402 21.5066 10.2374 20.8232L18.4445 12.6161C18.9603 12.1004 19.25 11.4009 19.25 10.6716V6.5C19.25 5.5335 18.4665 4.75 17.5 4.75H13.3284ZM14.5 11C15.3284 11 16 10.3284 16 9.5C16 8.67157 15.3284 8 14.5 8C13.6716 8 13 8.67157 13 9.5C13 10.3284 13.6716 11 14.5 11Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.4403 5.61612C13.6748 5.3817 13.9927 5.25 14.3242 5.25H18.4958C18.6339 5.25 18.7458 5.36193 18.7458 5.5V9.67157C18.7458 10.0031 18.6141 10.321 18.3797 10.5555L10.1726 18.7626C10.0749 18.8602 9.91664 18.8602 9.81901 18.7626L5.23323 14.1768C5.1356 14.0791 5.1356 13.9209 5.23323 13.8232L13.4403 5.61612ZM14.3242 3.75C13.5949 3.75 12.8954 4.03973 12.3797 4.55546L4.17257 12.7626C3.48915 13.446 3.48915 14.554 4.17257 15.2374L8.75835 19.8232C9.44177 20.5066 10.5498 20.5066 11.2332 19.8232L19.4403 11.6161C19.9561 11.1004 20.2458 10.4009 20.2458 9.67157V5.5C20.2458 4.5335 19.4623 3.75 18.4958 3.75H14.3242ZM15.4958 10C16.3242 10 16.9958 9.32843 16.9958 8.5C16.9958 7.67157 16.3242 7 15.4958 7C14.6674 7 13.9958 7.67157 13.9958 8.5C13.9958 9.32843 14.6674 10 15.4958 10Z" fill="#23262A"/>
 </svg>
@@ -12,5 +12,5 @@ keywords:
  - organisering
  - identifisering
 variant: Stroke
-updated_at: 12.12.2023
+updated_at: 13.03.2024
 created_at: 07.03.2023
@@ -1,3 +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="M13.3284 4.75C12.5991 4.75 11.8996 5.03973 11.3839 5.55546L3.17678 13.7626C2.49336 14.446 2.49336 15.554 3.17678 16.2374L7.76256 20.8232C8.44598 21.5066 9.55402 21.5066 10.2374 20.8232L18.4445 12.6161C18.9603 12.1004 19.25 11.4009 19.25 10.6716V6.5C19.25 5.5335 18.4665 4.75 17.5 4.75H13.3284ZM14.5 11C15.3284 11 16 10.3284 16 9.5C16 8.67157 15.3284 8 14.5 8C13.6716 8 13 8.67157 13 9.5C13 10.3284 13.6716 11 14.5 11Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.3242 3.75C13.5949 3.75 12.8954 4.03973 12.3797 4.55546L4.17257 12.7626C3.48915 13.446 3.48915 14.554 4.17257 15.2374L8.75835 19.8232C9.44177 20.5066 10.5498 20.5066 11.2332 19.8232L19.4403 11.6161C19.9561 11.1004 20.2458 10.4009 20.2458 9.67157V5.5C20.2458 4.5335 19.4623 3.75 18.4958 3.75H14.3242ZM15.4958 10C16.3242 10 16.9958 9.32843 16.9958 8.5C16.9958 7.67157 16.3242 7 15.4958 7C14.6674 7 13.9958 7.67157 13.9958 8.5C13.9958 9.32843 14.6674 10 15.4958 10Z" fill="#23262A"/>
 </svg>
@@ -12,5 +12,5 @@ keywords:
  - organisering
  - identifisering
 variant: Fill
-updated_at: 12.12.2023
+updated_at: 13.03.2024
 created_at: 07.03.2023
@@ -6,5 +6,5 @@ keywords:
  - vektløfting
  - tungt
 variant: Stroke
-updated_at: 04.12.2023
+updated_at: 11.03.2024
 created_at: 07.03.2023
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-icons",
-  "version": "6.1.1",
+  "version": "6.8.0",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -1,5 +1,37 @@
 # @navikt/aksel-stylelint

+## 6.8.0
+
+## 6.7.1
+
+## 6.7.0
+
+## 6.6.1
+
+## 6.6.0
+
+## 6.5.0
+
+## 6.4.1
+
+## 6.4.0
+
+## 6.3.6
+
+## 6.3.5
+
+## 6.3.4
+
+## 6.3.3
+
+## 6.3.2
+
+## 6.3.1
+
+## 6.3.0
+
+## 6.2.0
+
 ## 6.1.1

 ## 6.1.0
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-stylelint",
-  "version": "6.1.1",
+  "version": "6.8.0",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
  "repository": {
@@ -35,8 +35,8 @@
    "dev": "yarn watch:lint"
  },
  "devDependencies": {
-    "@navikt/ds-css": "^6.1.1",
-    "@navikt/ds-tokens": "^6.1.1",
+    "@navikt/ds-css": "^6.8.0",
+    "@navikt/ds-tokens": "^6.8.0",
    "concurrently": "7.2.1",
    "postcss-selector-parser": "^6.0.13",
    "postcss-value-parser": "^4.2.0",
@@ -1,5 +1,119 @@
 # @navikt/aksel

+## 6.8.0
+
+### Patch Changes
+
+- Updated dependencies [[`bd482c5d3`](https://github.com/navikt/aksel/commit/bd482c5d3ea9c7f84114d1199e73594c7b593154), [`7becf3e4c`](https://github.com/navikt/aksel/commit/7becf3e4cf47b119e4b456a066b53e6077669bcd)]:
+  - @navikt/ds-css@6.8.0
+
+## 6.7.1
+
+### Patch Changes
+
+- Updated dependencies [[`0c06fa12d`](https://github.com/navikt/aksel/commit/0c06fa12d0de4f3015be045d4e65e149ebd2c141)]:
+  - @navikt/ds-css@6.7.1
+
+## 6.7.0
+
+### Patch Changes
+
+- Updated dependencies [[`db9c85815`](https://github.com/navikt/aksel/commit/db9c85815392528e59ef5082397ec14b1aa36e7a), [`277525f39`](https://github.com/navikt/aksel/commit/277525f39ff94c7ded1accf6031957efa3bdeb8b), [`b21015bf5`](https://github.com/navikt/aksel/commit/b21015bf54b4e19673b2849756c608ae323a9f70)]:
+  - @navikt/ds-css@6.7.0
+
+## 6.6.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@6.6.1
+
+## 6.6.0
+
+### Patch Changes
+
+- Aksel CLI: Fjernet deprecated komponenter fra css oversikt. ([#2860](https://github.com/navikt/aksel/pull/2860))
+
+- Updated dependencies [[`3a73a029f`](https://github.com/navikt/aksel/commit/3a73a029f6272f76e10cb6baefbaa2040feaef6b)]:
+  - @navikt/ds-css@6.6.0
+
+## 6.5.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@6.5.0
+
+## 6.4.1
+
+### Patch Changes
+
+- Updated dependencies [[`5250b47ca`](https://github.com/navikt/aksel/commit/5250b47ca410f9cd57c5350bacc77b1b2ec9b2c0)]:
+  - @navikt/ds-css@6.4.1
+
+## 6.4.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@6.4.0
+
+## 6.3.6
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@6.3.6
+
+## 6.3.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@6.3.5
+
+## 6.3.4
+
+### Patch Changes
+
+- Updated dependencies [[`a2af9bcc3`](https://github.com/navikt/aksel/commit/a2af9bcc37eb12cc7cf3a1596d57dc0421898657)]:
+  - @navikt/ds-css@6.3.4
+
+## 6.3.3
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@6.3.3
+
+## 6.3.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@6.3.2
+
+## 6.3.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@6.3.1
+
+## 6.3.0
+
+### Patch Changes
+
+- Updated dependencies [[`25e0d15d6`](https://github.com/navikt/aksel/commit/25e0d15d67cebd36ee58aa3b7d9f1c7104d92de6)]:
+  - @navikt/ds-css@6.3.0
+
+## 6.2.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@6.2.0
+
 ## 6.1.1

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

+## 6.8.0
+
+### Minor Changes
+
+- :sparkles: Ny komponent: FormProgress ([#2855](https://github.com/navikt/aksel/pull/2855))
+
+### Patch Changes
+
+- HGrid: forenklet CSS. ([#2917](https://github.com/navikt/aksel/pull/2917))
+
+## 6.7.1
+
+### Patch Changes
+
+- Progressbar: Tweak API, examples, stories and css ([#2892](https://github.com/navikt/aksel/pull/2892))
+
+## 6.7.0
+
+### Minor Changes
+
+- :sparkles: Ny komponent: ProgressBar ([#2845](https://github.com/navikt/aksel/pull/2845))
+
+### Patch Changes
+
+- Checkbox, Radio: Erstatter `:focus-visible` med `:focus` for bedre UX brukt sammen med ErrorSummary. ([#2893](https://github.com/navikt/aksel/pull/2893))
+
+- :lipstick: tweak CSS for timeline pins. ([#2889](https://github.com/navikt/aksel/pull/2889))
+
+## 6.6.1
+
+## 6.6.0
+
+### Minor Changes
+
+- :sparkles: Ny komponent FormSummary ([#2802](https://github.com/navikt/aksel/pull/2802))
+
+## 6.5.0
+
+## 6.4.1
+
+### Patch Changes
+
+- FileUpload: Item-illustrasjon er nå radius-full ([#2834](https://github.com/navikt/aksel/pull/2834))
+
+## 6.4.0
+
+## 6.3.6
+
+## 6.3.5
+
+## 6.3.4
+
+### Patch Changes
+
+- ReadMore: Padding-right på button er bumpet noen px ([#2806](https://github.com/navikt/aksel/pull/2806))
+
+## 6.3.3
+
+## 6.3.2
+
+## 6.3.1
+
+## 6.3.0
+
+### Minor Changes
+
+- FileUpload: Ny komponent `FileUpload` for å håndtere opplasting av filer, Dropzone og fil-visning ([#2504](https://github.com/navikt/aksel/pull/2504))
+
+## 6.2.0
+
 ## 6.1.1

 ### Patch Changes
@@ -1,6 +1,6 @@
 /* https://web.dev/prefers-reduced-motion/ */
@media (prefers-reduced-motion: reduce) {
-  *:not(.navds-loader *):not(.navds-loader),
+  *:not(.navds-loader *):not(.navds-loader):not(.navds-progress-bar *):not(.navds-progress-bar),
  ::before,
  ::after {
    animation-delay: -1ms !important;
@@ -97,10 +97,6 @@ const StyleMappings = {
      main: formCss,
      dependencies: [typoCss],
    },
-    {
-      component: "ContentContainer",
-      main: "content-container.css",
-    },
    {
      component: "CopyButton",
      main: "copybutton.css",
@@ -120,7 +116,11 @@ const StyleMappings = {
      dependencies: [typoCss],
    },
    { component: "Fieldset", main: formCss, dependencies: [typoCss] },
-    { component: "Grid", main: "grid.css", dependencies: [typoCss] },
+    {
+      component: "FileUpload",
+      main: formCss,
+      dependencies: [typoCss, "button.css", "loader.css", "link.css"],
+    },
    {
      component: "GuidePanel",
      main: "guide-panel.css",
@@ -159,6 +159,7 @@ const StyleMappings = {
    },
    { component: "Panel", main: "panel.css" },
    { component: "Popover", main: "popover.css" },
+    { component: "ProgressBar", main: "progress-bar.css" },
    { component: "Provider", main: "" },
    { component: "Radio", main: formCss, dependencies: [typoCss] },
    { component: "RadioGroup", main: formCss, dependencies: [typoCss] },
@@ -173,6 +174,22 @@ const StyleMappings = {
    { component: "Tag", main: "tag.css", dependencies: [typoCss] },
    { component: "TextField", main: formCss, dependencies: [typoCss] },
    { component: "Textarea", main: formCss, dependencies: [typoCss] },
+    {
+      component: "FormSummary",
+      main: formCss,
+      dependencies: [typoCss, "link.css"],
+    },
+    {
+      component: "FormProgress",
+      main: formCss,
+      dependencies: [
+        typoCss,
+        "progress-bar.css",
+        "button.css",
+        primitivesCss,
+        "stepper.css",
+      ],
+    },
    {
      component: "ToggleGroup",
      main: "toggle-group.css",
@@ -0,0 +1,230 @@
+/**
+* Makes it easier for user to use FileItem in semantic lists
+*/
+.navds-file-upload :is(ul, li) {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/**
+ * FileUpload.Dropzone
+ */
+
+.navds-dropzone__area {
+  --__ac-dropzone-background: var(--a-surface-subtle);
+  --__ac-dropzone-text-color: var(--a-text-default);
+  --__ac-dropzone-padding: var(--a-spacing-6);
+  --__ac-dropzone-icon-padding: var(--a-spacing-2);
+  --__ac-dropzone-animation-length-long: 0.6s;
+  --__ac-dropzone-animation-length-short: 250ms;
+  --__ac-dropzone-animation-ease-out: cubic-bezier(0.3, 1, 0.3, 1);
+  --__ac-dropzone-animation-over-under: cubic-bezier(0.3, 1.4, 0.3, 1);
+
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: var(--a-spacing-4);
+  text-align: center;
+  padding: var(--__ac-dropzone-padding);
+  outline: 1px dashed var(--a-border-subtle);
+  outline-offset: -1px;
+  border-radius: var(--a-border-radius-large);
+  background-color: var(--__ac-dropzone-background);
+  color: var(--__ac-dropzone-text-color);
+  transition: background-color var(--__ac-dropzone-animation-length-short) var(--__ac-dropzone-animation-ease-out);
+  cursor: pointer;
+}
+
+.navds-dropzone__area:hover {
+  box-shadow: inset 0 2px 4px 1px rgb(11 11 11/ 0.05);
+  outline-color: var(--a-border-default);
+}
+
+.navds-dropzone--disabled > .navds-dropzone__area:hover {
+  outline-color: var(--a-border-subtle);
+  box-shadow: initial;
+  cursor: default;
+}
+
+.navds-dropzone--dragging > .navds-dropzone__area {
+  --__ac-dropzone-background: var(--a-surface-action-subtle-hover);
+}
+
+.navds-dropzone--dragging > .navds-dropzone__area::after {
+  outline: 1px dashed var(--a-border-subtle);
+  outline-offset: -1px;
+  color: var(--a-text-action-selected);
+  background-color: var(--a-surface-hover);
+  content: "";
+  inset: 0;
+  position: absolute;
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+  box-shadow: inset 0 2px 7px 3px rgb(11 11 11/ 0.1);
+  border-radius: var(--a-border-radius-large);
+  animation: akselDropzoneDragoverAnimation var(--__ac-dropzone-animation-length-short) var(--__ac-dropzone-animation-ease-out);
+}
+
+@keyframes akselDropzoneDragoverAnimation {
+  0% {
+    -webkit-backdrop-filter: blur(0);
+    backdrop-filter: blur(0);
+    background-color: var(--a-surface-transparent);
+  }
+
+  70% {
+    -webkit-backdrop-filter: blur(8px);
+    backdrop-filter: blur(8px);
+  }
+
+  100% {
+    background-color: var(--a-surface-hover);
+  }
+}
+
+.navds-dropzone__area-icon {
+  display: grid;
+  padding: var(--__ac-dropzone-icon-padding);
+  visibility: hidden;
+}
+
+.navds-dropzone--error:where(:not(.navds-dropzone--dragging)) > .navds-dropzone__area {
+  outline-color: var(--a-surface-danger);
+  outline-width: 2px;
+}
+
+.navds-dropzone__area:hover > .navds-dropzone__area-button {
+  color: var(--ac-button-secondary-hover-text, var(--__ac-button-secondary-hover-text, var(--a-text-action-on-action-subtle)));
+  background-color: var(
+    --ac-button-secondary-hover-bg,
+    var(--__ac-button-secondary-hover-bg, var(--a-surface-action-subtle-hover))
+  );
+}
+
+.navds-dropzone__area:active .navds-dropzone__area-button {
+  color: var(--ac-button-secondary-active-text, var(--__ac-button-secondary-active-text, var(--a-text-on-action)));
+  background-color: var(--ac-button-secondary-active-bg, var(--__ac-button-secondary-active-bg, var(--a-surface-action-active)));
+  box-shadow: none;
+}
+
+.navds-dropzone__area-release {
+  top: var(--__ac-dropzone-padding);
+  display: grid;
+  position: absolute;
+  z-index: 1;
+  pointer-events: none;
+  transition:
+    top var(--__ac-dropzone-animation-length-long) var(--__ac-dropzone-animation-over-under),
+    transform var(--__ac-dropzone-animation-length-long) var(--__ac-dropzone-animation-over-under);
+}
+
+.navds-dropzone__area-release__icon {
+  display: grid;
+  padding: var(--__ac-dropzone-icon-padding);
+  border-radius: var(--a-border-radius-full);
+  background-color: var(--a-surface-neutral-subtle);
+  transition:
+    background-color 300ms var(--__ac-dropzone-animation-ease-out),
+    font-size 300ms var(--__ac-dropzone-animation-ease-out);
+  font-size: 1.5rem;
+}
+
+.navds-dropzone--dragging .navds-dropzone__area-release > .navds-dropzone__area-release__icon {
+  background-color: transparent;
+  font-size: 2rem;
+}
+
+.navds-dropzone__area-release__text {
+  visibility: hidden;
+}
+
+.navds-dropzone--dragging .navds-dropzone__area-release > .navds-dropzone__area-release__text {
+  transition: visibility var(--__ac-dropzone-animation-length-long) var(--__ac-dropzone-animation-over-under);
+  visibility: visible;
+}
+
+.navds-dropzone--dragging .navds-dropzone__area-release {
+  color: var(--a-text-action-selected);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.navds-dropzone__area-disabled {
+  color: var(--a-text-subtle);
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: var(--a-spacing-2);
+}
+
+/**
+ * FileUpload.Item
+ */
+
+.navds-file-item__inner {
+  outline: 1px solid var(--a-border-subtle);
+  outline-offset: -1px;
+  transition: outline-color 250ms cubic-bezier(0, 0.3, 0.15, 1);
+  border-radius: var(--a-border-radius-large);
+  padding: var(--a-spacing-3);
+  display: flex;
+  gap: var(--a-spacing-3);
+  align-items: flex-start;
+}
+
+.navds-file-item--error > .navds-file-item__inner {
+  outline: 2px solid var(--a-surface-danger);
+}
+
+.navds-file-item__icon {
+  background-color: var(--a-surface-neutral-subtle);
+  color: var(--a-icon-default);
+  border-radius: var(--a-border-radius-full);
+  min-height: 3rem;
+  min-width: 3rem;
+  display: grid;
+  place-content: center;
+  transition: background-color 250ms cubic-bezier(0, 0.3, 0.15, 1);
+}
+
+.navds-file-item__icon--loading {
+  background-color: transparent;
+}
+
+.navds-file-item__file-info {
+  word-break: break-word;
+}
+
+.navds-file-item__button {
+  margin-left: auto;
+}
+
+.navds-file-item__error {
+  color: var(--a-text-danger);
+  display: grid;
+  transition-property: grid-template-rows, padding-top;
+  transition-duration: 250ms;
+  transition-timing-function: cubic-bezier(0, 0.3, 0.15, 1);
+  overflow: hidden;
+  grid-template-rows: 0fr;
+}
+
+.navds-file-item--error .navds-file-item__error {
+  grid-template-rows: 1fr;
+  padding-top: var(--a-spacing-1);
+}
+
+.navds-file-item__error-content > svg {
+  flex-shrink: 0;
+  height: 1rem;
+  margin-top: 0.1rem;
+}
+
+.navds-file-item__error-content {
+  min-height: 0;
+  display: flex;
+  gap: var(--a-spacing-1);
+}
@@ -0,0 +1,52 @@
+.navds-form-progress__bar {
+  margin-bottom: var(--a-spacing-2);
+}
+
+.navds-form-progress__button[data-state="closed"] .navds-form-progress__btn-txt-hide,
+.navds-form-progress__button[data-state="open"] .navds-form-progress__btn-txt-show {
+  display: none;
+}
+
+.navds-form-progress__button:hover svg {
+  transform: translateY(1px);
+}
+
+.navds-form-progress__button[data-state="open"] svg {
+  transform: rotate(-180deg);
+}
+
+.navds-form-progress__button[data-state="open"]:hover svg {
+  transform: translateY(-1px) rotate(-180deg);
+}
+
+.navds-form-progress__collapsible {
+  display: grid;
+  grid-template-rows: 0fr;
+  overflow: hidden;
+  transition: grid-template-rows 0.3s cubic-bezier(0.3, 0, 0.15, 1);
+}
+
+.navds-form-progress__collapsible[hidden] {
+  display: grid;
+}
+
+.navds-form-progress__collapsible[data-state="open"] {
+  grid-template-rows: 1fr;
+}
+
+.navds-form-progress__collapsible-content {
+  min-height: 0;
+  transition: visibility 0.3s;
+  visibility: hidden;
+}
+
+.navds-form-progress__collapsible[data-state="open"] .navds-form-progress__collapsible-content {
+  visibility: visible;
+}
+
+.navds-form-progress__stepper {
+  border: 2px solid var(--a-border-subtle);
+  border-radius: var(--a-border-radius-large);
+  padding: var(--a-spacing-2) var(--a-spacing-4) 0;
+  margin-top: var(--a-spacing-1);
+}
@@ -0,0 +1,77 @@
+.navds-form-summary {
+  overflow: hidden;
+  border: 1px solid var(--a-border-subtle);
+  border-radius: var(--a-border-radius-large);
+}
+
+.navds-form-summary__header {
+  background-color: var(--a-surface-subtle);
+  padding: var(--a-spacing-4) var(--a-spacing-6);
+  display: flex;
+  justify-content: space-between;
+  gap: 0 var(--a-spacing-2);
+}
+
+@media (max-width: 479px) {
+  .navds-form-summary__header {
+    padding: var(--a-spacing-3) var(--a-spacing-4);
+    flex-direction: column;
+  }
+}
+
+.navds-form-summary__edit {
+  flex-shrink: 0;
+  margin-top: var(--a-spacing-1);
+  align-self: flex-start;
+}
+
+.navds-form-summary > .navds-form-summary__answers {
+  border-top: 1px solid var(--a-border-subtle);
+}
+
+.navds-form-summary__answers {
+  padding: var(--a-spacing-5) var(--a-spacing-6) var(--a-spacing-6);
+  margin: 0;
+}
+
+@media (max-width: 479px) {
+  .navds-form-summary__answers {
+    padding: var(--a-spacing-4);
+  }
+}
+
+.navds-form-summary__answer:not(:last-child) {
+  margin-bottom: var(--a-spacing-4);
+  padding-bottom: var(--a-spacing-4);
+  border-bottom: 1px solid var(--a-border-divider);
+}
+
+.navds-form-summary__answer:has(.navds-form-summary__answer) {
+  padding-bottom: var(--a-spacing-6);
+}
+
+.navds-form-summary__answer:has(.navds-form-summary__answer):last-child {
+  padding-bottom: 0;
+}
+
+@media (max-width: 479px) {
+  .navds-form-summary__answer:not(:last-child) {
+    margin-bottom: var(--a-spacing-3);
+    padding-bottom: var(--a-spacing-3);
+  }
+
+  .navds-form-summary__answer:has(.navds-form-summary__answer) {
+    padding-bottom: var(--a-spacing-5);
+  }
+}
+
+.navds-form-summary__value:first-of-type {
+  margin-top: var(--a-spacing-1);
+}
+
+.navds-form-summary__value :where(.navds-form-summary__answers) {
+  margin-top: var(--a-spacing-2);
+  padding: var(--a-spacing-4);
+  background: var(--a-surface-selected);
+  border-radius: var(--a-border-radius-large);
+}
@@ -18,13 +18,15 @@
 }

 .navds-form-field .navds-error-message,
-.navds-fieldset .navds-error-message {
+.navds-fieldset .navds-error-message,
+.navds-file-item .navds-error-message {
  display: flex;
  gap: var(--a-spacing-2);
 }

 .navds-form-field .navds-error-message::before,
-.navds-fieldset .navds-error-message::before {
+.navds-fieldset .navds-error-message::before,
+.navds-file-item .navds-error-message::before {
  content: "•";
 }

@@ -2,6 +2,7 @@
  Order matters; rearrange with care
 */
@import "fieldset.css";
+@import "file-upload.css";
@import "form.css";
@import "error-summary.css";
@import "confirmation-panel.css";
@@ -12,3 +13,5 @@
@import "textarea.css";
@import "search.css";
@import "combobox.css";
+@import "form-summary.css";
+@import "form-progress.css";
@@ -70,8 +70,8 @@
  height: calc(1.25rem - 0.25rem);
 }

-.navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
-.navds-radio__input:focus-visible + .navds-radio__label::before {
+.navds-checkbox__input:focus + .navds-checkbox__label::before,
+.navds-radio__input:focus + .navds-radio__label::before {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow:
@@ -80,33 +80,13 @@
    0 0 0 4px var(--a-border-focus);
 }

-@supports not selector(:focus-visible) {
-  .navds-checkbox__input:focus + .navds-checkbox__label::before,
-  .navds-radio__input:focus + .navds-radio__label::before {
-    outline: 2px solid transparent;
-    outline-offset: 2px;
-    box-shadow:
-      0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)),
-      0 0 0 4px var(--a-border-focus);
-  }
-}
-
-.navds-checkbox__input:hover:focus-visible + .navds-checkbox__label::before,
-.navds-radio__input:hover:focus-visible + .navds-radio__label::before {
+.navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
+.navds-radio__input:hover:focus + .navds-radio__label::before {
  box-shadow:
    0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover)),
    0 0 0 4px var(--a-border-focus);
 }

-@supports not selector(:focus-visible) {
-  .navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
-  .navds-radio__input:hover:focus + .navds-radio__label::before {
-    box-shadow:
-      0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover)),
-      0 0 0 4px var(--a-border-focus);
-  }
-}
-
 .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
  content: "";
  position: absolute;
@@ -163,24 +143,14 @@
  background-position: 0.25rem center;
 }

-.navds-checkbox__input:indeterminate:focus-visible + .navds-checkbox__label::before,
-.navds-checkbox__input:checked:focus-visible + .navds-checkbox__label::before {
+.navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
+.navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
  box-shadow:
    0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
    0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
    0 0 0 4px var(--a-border-focus);
 }

-@supports not selector(:focus-visible) {
-  .navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
-  .navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
-    box-shadow:
-      0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
-      0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
-      0 0 0 4px var(--a-border-focus);
-  }
-}
-
 .navds-radio__input:checked + .navds-radio__label::before {
  box-shadow:
    0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
@@ -188,40 +158,23 @@
  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action-selected));
 }

-.navds-radio__input:checked:focus-visible + .navds-radio__label::before {
+.navds-radio__input:checked:focus + .navds-radio__label::before {
  box-shadow:
    0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
    inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
    0 0 0 4px var(--a-border-focus);
 }

-@supports not selector(:focus-visible) {
-  .navds-radio__input:checked:focus + .navds-radio__label::before {
-    box-shadow:
-      0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
-      inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
-      0 0 0 4px var(--a-border-focus);
-  }
-}
-
 .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
 .navds-radio__input:hover:not(:disabled) + .navds-radio__label {
  color: var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
 }

-.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus-visible)
-  + .navds-checkbox__label::before,
-.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
+.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus) + .navds-checkbox__label::before,
+.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
 }

-@supports not selector(:focus-visible) {
-  .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus) + .navds-checkbox__label::before,
-  .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
-    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
-  }
-}
-
 .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate) + .navds-checkbox__label::before,
 .navds-radio__input:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
  background-color: var(--ac-radio-checkbox-action-hover-bg, var(--a-surface-action-subtle));
@@ -235,63 +188,32 @@
 }

 .navds-checkbox--error
-  > .navds-checkbox__input:focus-visible:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
+  > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
  + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:focus-visible:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
+.navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
  box-shadow:
    0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
    0 0 0 4px var(--a-border-focus);
 }

-@supports not selector(:focus-visible) {
-  .navds-checkbox--error
-    > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
-    + .navds-checkbox__label::before,
-  .navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
-    box-shadow:
-      0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
-      0 0 0 4px var(--a-border-focus);
-  }
-}
-
 .navds-checkbox--error
-  > .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus-visible)
+  > .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
  + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
+.navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
 }

 .navds-checkbox--error
-  > .navds-checkbox__input:focus-visible:hover:not(:disabled):not(:checked):not(:indeterminate)
+  > .navds-checkbox__input:focus:hover:not(:disabled):not(:checked):not(:indeterminate)
  + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:focus-visible:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
+.navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
  box-shadow:
    0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
    0 0 0 4px var(--a-border-focus);
 }

-@supports not selector(:focus-visible) {
-  .navds-checkbox--error
-    > .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
-    + .navds-checkbox__label::before,
-  .navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
-    background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
-    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
-  }
-
-  .navds-checkbox--error
-    > .navds-checkbox__input:focus:hover:not(:disabled):not(:checked):not(:indeterminate)
-    + .navds-checkbox__label::before,
-  .navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
-    background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
-    box-shadow:
-      0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
-      0 0 0 4px var(--a-border-focus);
-  }
-}
-
 .navds-checkbox--disabled,
 .navds-radio--disabled {
  opacity: 0.3;
@@ -323,16 +245,16 @@
  > .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__input:hover:not(:checked):not(:indeterminate):not(:focus)
  + .navds-checkbox__label::before,
 .navds-radio--readonly > .navds-radio__input:not(:disabled):not(:checked) + .navds-radio__label::before,
-.navds-radio--readonly > .navds-radio__input:hover:not(:checked):not(:focus-visible) + .navds-radio__label::before {
+.navds-radio--readonly > .navds-radio__input:hover:not(:checked):not(:focus) + .navds-radio__label::before {
  background-color: var(--__ac-radio-checkbox-readonly-bg);
  box-shadow: 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 {
+.navds-checkbox--readonly > .navds-checkbox__input:focus + .navds-checkbox__label::before,
+.navds-radio--readonly > .navds-radio__input:focus + .navds-radio__label::before {
  --__ac-radio-checkbox-readonly-border: var(--a-border-subtle), var(--a-shadow-focus);
 }

@@ -362,8 +284,8 @@
 }

@media (forced-colors: active) {
-  .navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
-  .navds-radio__input:focus-visible + .navds-radio__label::before {
+  .navds-checkbox__input:focus + .navds-checkbox__label::before,
+  .navds-radio__input:focus + .navds-radio__label::before {
    outline-color: highlight;
  }

@@ -395,7 +317,7 @@
    background-color: var(--__ac-radio-checkbox-high-contrast-text);
  }

-  .navds-radio__input:checked:focus-visible + .navds-radio__label::before {
+  .navds-radio__input:checked:focus + .navds-radio__label::before {
    border: 1px solid var(--__ac-radio-checkbox-high-contrast-bg);
    outline: 2px solid highlight;
    outline-offset: 2px;
@@ -406,7 +328,7 @@
    color: highlight;
  }

-  .navds-checkbox__input:focus-visible + .navds-checkbox__label::before {
+  .navds-checkbox__input:focus + .navds-checkbox__label::before {
    outline: 2px solid var(--__ac-radio-checkbox-high-contrast-highlight);
  }

@@ -26,6 +26,7 @@
@import "panel.css";
@import "link-panel.css";
@import "read-more.css";
+@import "progress-bar.css";
@import "skeleton.css";
@import "stepper.css";
@import "table.css";
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "6.1.1",
+  "version": "6.8.0",
  "description": "CSS for NAV Designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -27,7 +27,7 @@
    "css:get-version": "node config/get-version.js"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^6.1.1",
+    "@navikt/ds-tokens": "^6.8.0",
    "cssnano": "6.0.0",
    "fast-glob": "3.2.11",
    "lodash": "4.17.21",
@@ -1,17 +1,17 @@
 .navds-hgrid {
  --__ac-hgrid-columns-xs: initial;
-  --__ac-hgrid-columns-sm: initial;
-  --__ac-hgrid-columns-md: initial;
-  --__ac-hgrid-columns-lg: initial;
-  --__ac-hgrid-columns-xl: initial;
-  --__ac-hgrid-columns-2xl: initial;
+  --__ac-hgrid-columns-sm: var(--__ac-hgrid-columns-xs);
+  --__ac-hgrid-columns-md: var(--__ac-hgrid-columns-sm);
+  --__ac-hgrid-columns-lg: var(--__ac-hgrid-columns-md);
+  --__ac-hgrid-columns-xl: var(--__ac-hgrid-columns-lg);
+  --__ac-hgrid-columns-2xl: var(--__ac-hgrid-columns-xl);
  --__ac-hgrid-columns: var(--__ac-hgrid-columns-xs);
  --__ac-hgrid-gap-xs: initial;
-  --__ac-hgrid-gap-sm: initial;
-  --__ac-hgrid-gap-md: initial;
-  --__ac-hgrid-gap-lg: initial;
-  --__ac-hgrid-gap-xl: initial;
-  --__ac-hgrid-gap-2xl: initial;
+  --__ac-hgrid-gap-sm: var(--__ac-hgrid-gap-xs);
+  --__ac-hgrid-gap-md: var(--__ac-hgrid-gap-sm);
+  --__ac-hgrid-gap-lg: var(--__ac-hgrid-gap-md);
+  --__ac-hgrid-gap-xl: var(--__ac-hgrid-gap-lg);
+  --__ac-hgrid-gap-2xl: var(--__ac-hgrid-gap-xl);
  --__ac-hgrid-gap: var(--__ac-hgrid-gap-xs);
  --__ac-hgrid-align: initial;

@@ -23,56 +23,35 @@

@media (min-width: 480px) {
  .navds-hgrid {
-    --__ac-hgrid-columns: var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs));
-    --__ac-hgrid-gap: var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs));
+    --__ac-hgrid-columns: var(--__ac-hgrid-columns-sm);
+    --__ac-hgrid-gap: var(--__ac-hgrid-gap-sm);
  }
 }

@media (min-width: 768px) {
  .navds-hgrid {
-    --__ac-hgrid-columns: var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs)));
-    --__ac-hgrid-gap: var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs)));
+    --__ac-hgrid-columns: var(--__ac-hgrid-columns-md);
+    --__ac-hgrid-gap: var(--__ac-hgrid-gap-md);
  }
 }

@media (min-width: 1024px) {
  .navds-hgrid {
-    --__ac-hgrid-columns: var(
-      --__ac-hgrid-columns-lg,
-      var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs)))
-    );
-    --__ac-hgrid-gap: var(--__ac-hgrid-gap-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))));
+    --__ac-hgrid-columns: var(--__ac-hgrid-columns-lg);
+    --__ac-hgrid-gap: var(--__ac-hgrid-gap-lg);
  }
 }

@media (min-width: 1280px) {
  .navds-hgrid {
-    --__ac-hgrid-columns: var(
-      --__ac-hgrid-columns-xl,
-      var(--__ac-hgrid-columns-lg, var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs))))
-    );
-    --__ac-hgrid-gap: var(
-      --__ac-hgrid-gap-xl,
-      var(--__ac-hgrid-gap-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))))
-    );
+    --__ac-hgrid-columns: var(--__ac-hgrid-columns-xl);
+    --__ac-hgrid-gap: var(--__ac-hgrid-gap-xl);
  }
 }

@media (min-width: 1440px) {
  .navds-hgrid {
-    --__ac-hgrid-columns: var(
-      --__ac-hgrid-columns-2xl,
-      var(
-        --__ac-hgrid-columns-xl,
-        var(--__ac-hgrid-columns-lg, var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs))))
-      )
-    );
-    --__ac-hgrid-gap: var(
-      --__ac-hgrid-gap-2xl,
-      var(
-        --__ac-hgrid-gap-xl,
-        var(--__ac-hgrid-gap-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))))
-      )
-    );
+    --__ac-hgrid-columns: var(--__ac-hgrid-columns-2xl);
+    --__ac-hgrid-gap: var(--__ac-hgrid-gap-2xl);
  }
 }
@@ -0,0 +1,108 @@
+.navds-progress-bar {
+  background: var(--a-surface-neutral-subtle);
+  position: relative;
+  border-radius: var(--a-border-radius-full);
+  overflow: hidden;
+  box-shadow:
+    inset 0 1px 3px 0 rgba(0 0 0 / 0.15),
+    inset 0 0 1px 0 rgba(0 0 0 / 0.2);
+}
+
+.navds-progress-bar--small {
+  height: 12px;
+  min-width: 12px;
+}
+
+.navds-progress-bar--medium {
+  height: 16px;
+  min-width: 16px;
+}
+
+.navds-progress-bar--large {
+  height: 24px;
+  min-width: 24px;
+}
+
+.navds-progress-bar__foreground {
+  --__ac-progress-bar-translate: initial;
+
+  transform: translateX(var(--__ac-progress-bar-translate));
+  background: var(--ac-progress-bar-fg, var(--a-surface-alt-3));
+  transform-origin: left;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  border-radius: inherit;
+  transition: transform 0.2s ease;
+}
+
+.navds-progress-bar__foreground--indeterminate {
+  --__ac-progress-bar-simulated: initial;
+
+  animation-name: navds-progress-bar-indeterminate-grow, navds-progress-bar-indeterminate;
+  animation-timing-function: ease-in-out, ease-in-out;
+  animation-duration: var(--__ac-progress-bar-simulated), 2500ms;
+  animation-fill-mode: forwards, none;
+  animation-iteration-count: 1, infinite;
+  animation-delay: 0s, var(--__ac-progress-bar-simulated);
+}
+
+/* navds-progress-bar-indeterminate wave animation */
+@keyframes navds-progress-bar-indeterminate {
+  0% {
+    left: -50%;
+    width: 50%;
+    transform: translateX(0%);
+  }
+
+  50% {
+    animation-direction: reverse;
+    left: 100%;
+    transform: translateX(0%);
+    width: 50%;
+  }
+
+  100% {
+    left: -50%;
+    transform: translateX(0%);
+    width: 50%;
+  }
+}
+
+@keyframes navds-progress-bar-indeterminate-grow {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  20% {
+    transform: translateX(-80%);
+  }
+
+  30% {
+    transform: translateX(-40%);
+  }
+
+  50% {
+    transform: translateX(-20%);
+  }
+
+  75% {
+    transform: translateX(-10%);
+  }
+
+  100% {
+    transform: translateX(-10%);
+  }
+}
+
+@media (forced-colors: active) {
+  .navds-progress-bar__foreground {
+    background: Highlight;
+  }
+
+  .navds-progress-bar {
+    outline: 1px solid transparent;
+  }
+}
@@ -8,12 +8,12 @@
  gap: var(--a-spacing-05);
  color: var(--ac-read-more-text, var(--a-text-action));
  border-radius: var(--a-border-radius-small);
-  padding: var(--a-spacing-1) var(--a-spacing-1) var(--a-spacing-1) var(--a-spacing-05);
+  padding: var(--a-spacing-1) var(--a-spacing-2) var(--a-spacing-1) var(--a-spacing-05);
  text-align: start;
 }

 .navds-read-more--small .navds-read-more__button {
-  padding: var(--a-spacing-05) var(--a-spacing-1) var(--a-spacing-05) var(--a-spacing-05);
+  padding: var(--a-spacing-05) var(--a-spacing-1-alt) var(--a-spacing-05) var(--a-spacing-05);
 }

@media (forced-colors: active) {
@@ -79,7 +79,8 @@
 }

 .navds-read-more__button:hover > .navds-read-more__expand-icon {
-  transform: translateY(1px);
+  position: relative;
+  top: 1px;
 }

 .navds-read-more--open > .navds-read-more__button > .navds-read-more__expand-icon {
@@ -87,5 +88,5 @@
 }

 .navds-read-more--open > .navds-read-more__button:hover > .navds-read-more__expand-icon {
-  transform: translateY(-1px) rotate(-180deg);
+  top: -1px;
 }
@@ -7,7 +7,7 @@
 .navds-tabs__tablist {
  display: flex;
  max-width: 100%;
-  width: auto;
+  width: 100%;
  scroll-behavior: smooth;
  -ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: none; /* for Firefox */
@@ -83,6 +83,10 @@
  gap: var(--a-spacing-1);
 }

+.navds-tabs__tab-inner > * {
+  display: inline-flex;
+}
+
 .navds-tabs__tab-inner svg {
  flex-shrink: 0;
 }
@@ -117,6 +121,10 @@
  font-size: 1.5rem;
 }

+.navds-tabs__tab--fill {
+  flex: 1 1 100%;
+}
+
 .navds-tabs__tabpanel:focus-visible {
  outline: 2px solid transparent;
  box-shadow: inset 0 0 0 2px var(--a-border-focus);
@@ -245,7 +245,7 @@
 .navds-timeline__pin-wrapper::before {
  content: "";
  top: var(--navdsc-timeline-pin-size);
-  height: calc(88% - var(--navdsc-timeline-pin-size));
+  height: calc(100% - var(--navdsc-timeline-pin-size) * 2);
  width: 1px;
  margin: 0 auto;
  background: var(--a-surface-inverted);
@@ -4,6 +4,10 @@
  gap: var(--a-spacing-2);
 }

+.navds-toggle-group__wrapper--fill {
+  justify-items: initial;
+}
+
 .navds-toggle-group {
  border-radius: var(--a-border-radius-medium);
  background-color: var(--ac-toggle-group-bg, var(--a-surface-transparent));
@@ -217,6 +217,9 @@
    "--ac-popover-bg": "--a-surface-default",
    "--ac-popover-border": "--a-border-default"
  },
+  "progress-bar": {
+    "--ac-progress-bar-fg": "--a-surface-alt-3"
+  },
  "readmore": {
    "--ac-read-more-text": "--a-text-action",
    "--ac-read-more-hover-bg": "--a-surface-hover",
@@ -1,5 +1,201 @@
 # @navikt/ds-react

+## 6.8.0
+
+### Minor Changes
+
+- :sparkles: Ny komponent: FormProgress ([#2855](https://github.com/navikt/aksel/pull/2855))
+
+### Patch Changes
+
+- Stepper.Step: Set aria-current to "step" instead of true ([#2920](https://github.com/navikt/aksel/pull/2920))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@6.8.0
+  - @navikt/aksel-icons@6.8.0
+
+## 6.7.1
+
+### Patch Changes
+
+- Progressbar: Tweak API, examples, stories and css ([#2892](https://github.com/navikt/aksel/pull/2892))
+
+- Combobox: Remove 'Ingen søketreff' when custom options allowed ([#2895](https://github.com/navikt/aksel/pull/2895))
+
+- Datepicker, MonthPicker: Rekkefølgen på årstall i Select er reversert slik at siste år er øverst. Dette er endret for å være bedre tilpasset ekspertsystemer der de mest relevante årene ble vist lengst unna musepeker ved klikk. ([#2882](https://github.com/navikt/aksel/pull/2882))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@6.7.1
+  - @navikt/aksel-icons@6.7.1
+
+## 6.7.0
+
+### Minor Changes
+
+- :sparkles: Ny komponent: ProgressBar ([#2845](https://github.com/navikt/aksel/pull/2845))
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@6.7.0
+  - @navikt/aksel-icons@6.7.0
+
+## 6.6.1
+
+### Patch Changes
+
+- Spacer: Er nå `span` (tidligere `div`). ([#2874](https://github.com/navikt/aksel/pull/2874))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@6.6.1
+  - @navikt/aksel-icons@6.6.1
+
+## 6.6.0
+
+### Minor Changes
+
+- :sparkles: Ny komponent FormSummary ([#2802](https://github.com/navikt/aksel/pull/2802))
+
+### Patch Changes
+
+- Combobox: Prevents "Enter" while Combobox is focused from submitting form. ([#2861](https://github.com/navikt/aksel/pull/2861))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@6.6.0
+  - @navikt/aksel-icons@6.6.0
+
+## 6.5.0
+
+### Minor Changes
+
+- Tabs: Ny prop `lazy` som rendrer innhold i TabPanel selv når panel er skjult (har fortsatt display:none) ([#2621](https://github.com/navikt/aksel/pull/2621))
+
+- ToggleGroup: Erstattet bruk av dependency `@radix-ui/react-toggle-group` med egen implementasjon. ([#2620](https://github.com/navikt/aksel/pull/2620))
+
+- Tabs: La til ny prop `fill` som lar Tabs.Tab-elementer strekke seg over tilgjengelig bredde. ([#2621](https://github.com/navikt/aksel/pull/2621))
+
+- Tabs: Erstattet bruk av dependency `@radix-ui/react-tabs` med egen implementasjon. ([#2621](https://github.com/navikt/aksel/pull/2621))
+
+### Patch Changes
+
+- DatePicker/MonthPicker: Valgte datoer får nå `aria-pressed` for å bedre indikere valg for skjermleser. ([#2838](https://github.com/navikt/aksel/pull/2838))
+
+- DatePicker/MonthPicker: `required`-prop stoppet ikke de-select av allerede valgt dato. ([#2838](https://github.com/navikt/aksel/pull/2838))
+
+- ToggleGroup: La til ny prop `fill` som strekker ToggleGroup til å ta opp all tilgjengelig bredde. ([#2620](https://github.com/navikt/aksel/pull/2620))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@6.5.0
+  - @navikt/aksel-icons@6.5.0
+
+## 6.4.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@6.4.1
+  - @navikt/aksel-icons@6.4.1
+
+## 6.4.0
+
+### Minor Changes
+
+- FileUpload.Item: :boom: Endret API og støtte for å sette ID på knappen ([#2824](https://github.com/navikt/aksel/pull/2824))
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@6.4.0
+  - @navikt/aksel-icons@6.4.0
+
+## 6.3.6
+
+### Patch Changes
+
+- DatePicker: Fjernet role gridcell fra dato-knapper. ([#2826](https://github.com/navikt/aksel/pull/2826))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@6.3.6
+  - @navikt/aksel-icons@6.3.6
+
+## 6.3.5
+
+### Patch Changes
+
+- Modal: Fjern tomt element ([#2819](https://github.com/navikt/aksel/pull/2819))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@6.3.5
+  - @navikt/aksel-icons@6.3.5
+
+## 6.3.4
+
+### Patch Changes
+
+- Switch: Fikset edgecase der checked Switch var visuelt unchecked ([#2810](https://github.com/navikt/aksel/pull/2810))
+
+- FileUpload.Dropzone: id prop settes på button ([#2817](https://github.com/navikt/aksel/pull/2817))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@6.3.4
+  - @navikt/aksel-icons@6.3.4
+
+## 6.3.3
+
+### Patch Changes
+
+- FileUpload.Dropzone: Fiks feil med duplisert id ([#2805](https://github.com/navikt/aksel/pull/2805))
+
+- useDatePicker: `isInvalid`-key i onValidate var hadde flipper boolean i noen tilfeller ([#2809](https://github.com/navikt/aksel/pull/2809))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@6.3.3
+  - @navikt/aksel-icons@6.3.3
+
+## 6.3.2
+
+### Patch Changes
+
+- FileUpload: Fiks feil ved import av json ([#2803](https://github.com/navikt/aksel/pull/2803))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@6.3.2
+  - @navikt/aksel-icons@6.3.2
+
+## 6.3.1
+
+### Patch Changes
+
+- FileUpload: Disabled dropzone stopper opplasting ([#2798](https://github.com/navikt/aksel/pull/2798))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@6.3.1
+  - @navikt/aksel-icons@6.3.1
+
+## 6.3.0
+
+### Minor Changes
+
+- Allow Combobox options as objects to support separate display text and value ([#2716](https://github.com/navikt/aksel/pull/2716))
+
+- FileUpload: Ny komponent `FileUpload` for å håndtere opplasting av filer, Dropzone og fil-visning ([#2504](https://github.com/navikt/aksel/pull/2504))
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@6.3.0
+  - @navikt/aksel-icons@6.3.0
+
+## 6.2.0
+
+### Patch Changes
+
+- Select: Fjern 'multiple' fra SelectProps ([#2782](https://github.com/navikt/aksel/pull/2782))
+
+- Updated dependencies [[`331b4c4c0`](https://github.com/navikt/aksel/commit/331b4c4c00c323ad7a212bcd45889d2b80c09dee), [`dc5ea3b84`](https://github.com/navikt/aksel/commit/dc5ea3b8420a02690bc88dbbbb97eefe4ee7564d)]:
+  - @navikt/aksel-icons@6.2.0
+  - @navikt/ds-tokens@6.2.0
+
 ## 6.1.1

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "6.1.1",
+  "version": "6.8.0",
  "description": "React components from the Norwegian Labour and Welfare Administration.",
  "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
  "license": "MIT",
@@ -24,7 +24,8 @@
    "/cjs",
    "/esm",
    "/src",
-    "!**/*.tsbuildinfo"
+    "!**/*.tsbuildinfo",
+    "!**/*.stories.*"
  ],
  "main": "./cjs/index.js",
  "module": "./esm/index.js",
@@ -309,6 +310,16 @@
        "default": "./cjs/popover/index.js"
      }
    },
+    "./ProgressBar": {
+      "import": {
+        "types": "./esm/progress-bar/index.d.ts",
+        "default": "./esm/progress-bar/index.js"
+      },
+      "require": {
+        "types": "./cjs/progress-bar/index.d.ts",
+        "default": "./cjs/progress-bar/index.js"
+      }
+    },
    "./Provider": {
      "import": {
        "types": "./esm/provider/index.d.ts",
@@ -539,6 +550,36 @@
        "default": "./cjs/form/textfield/index.js"
      }
    },
+    "./FileUpload": {
+      "import": {
+        "types": "./esm/form/file-upload/index.d.ts",
+        "default": "./esm/form/file-upload/index.js"
+      },
+      "require": {
+        "types": "./cjs/form/file-upload/index.d.ts",
+        "default": "./cjs/form/file-upload/index.js"
+      }
+    },
+    "./FormSummary": {
+      "import": {
+        "types": "./esm/form/form-summary/index.d.ts",
+        "default": "./esm/form/form-summary/index.js"
+      },
+      "require": {
+        "types": "./cjs/form/form-summary/index.d.ts",
+        "default": "./cjs/form/form-summary/index.js"
+      }
+    },
+    "./FormProgress": {
+      "import": {
+        "types": "./esm/form/form-progress/index.d.ts",
+        "default": "./esm/form/form-progress/index.js"
+      },
+      "require": {
+        "types": "./cjs/form/form-progress/index.d.ts",
+        "default": "./cjs/form/form-progress/index.js"
+      }
+    },
    "./package.json": "./package.json"
  },
  "scripts": {
@@ -552,18 +593,17 @@
  },
  "dependencies": {
    "@floating-ui/react": "0.25.4",
-    "@navikt/aksel-icons": "^6.1.1",
-    "@navikt/ds-tokens": "^6.1.1",
-    "@radix-ui/react-tabs": "1.0.0",
-    "@radix-ui/react-toggle-group": "1.0.0",
+    "@floating-ui/react-dom": "^2.0.9",
+    "@navikt/aksel-icons": "^6.8.0",
+    "@navikt/ds-tokens": "^6.8.0",
    "clsx": "^2.1.0",
    "date-fns": "^3.0.0",
    "react-day-picker": "8.10.0"
  },
  "devDependencies": {
-    "@testing-library/dom": "8.13.0",
+    "@testing-library/dom": "9.3.4",
    "@testing-library/jest-dom": "^5.16.0",
-    "@testing-library/react": "^13.3.0",
+    "@testing-library/react": "^15.0.7",
    "@testing-library/user-event": "^14.2.0",
    "@types/faker": "5.5.8",
    "concurrently": "7.2.1",
@@ -31,11 +31,11 @@ interface AccordionComponent

 export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
  /**
-   * @default 'default'
+   * @default "default"
   */
  variant?: "default" | "neutral";
  /**
-   * @default 'small'
+   * @default "small"
   */
  headingSize?: "large" | "medium" | "small" | "xsmall";
  /**
@@ -43,12 +43,12 @@ export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
   */
  size?: "large" | "medium" | "small";
  /**
-   * Whether to indent content or not
+   * Whether to indent content or not.
   * @default true
   */
  indent?: boolean;
  /**
-   * Instances of Accordion.Item
+   * Instances of `Accordion.Item`.
   */
  children: React.ReactNode;
 }
@@ -162,9 +162,7 @@ export const Variants: Story = {

 export const ControlledState: Story = {
  render: () => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
    const [open, setOpen] = useState(false);
-    // eslint-disable-next-line react-hooks/rules-of-hooks
    const [open2, setOpen2] = useState(false);

    return (
@@ -12,37 +12,39 @@ import { BodyLong } from "../typography";

 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
  /**
-   * Alert content
+   * Alert content.
   */
  children: React.ReactNode;
  /**
-   * Changes colors and icon usage when changed
+   * Changes colors and icon usage when changed.
   */
  variant: "error" | "warning" | "info" | "success";
  /**
-   * Changes padding and font-sizes
-   * @default medium
+   * Changes padding and font-sizes.
+   * @default "medium"
   */
  size?: "medium" | "small";
  /**
-   * Removes border-radius
+   * Removes `border-radius`.
   * @default false
   */
  fullWidth?: boolean;
  /**
-   * Removes background from Alert
+   * Removes background from Alert.
   * @default false
   */
  inline?: boolean;
  /**
-   * Removes close-button(X) when false
-   * Requires onClose to be set
+   * 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
+   * Callback for alert wanting to close.
+   *
+   * **Requires closeButton to be true**.
   */
  onClose?: () => void;
 }
@@ -11,11 +11,11 @@ import { OverridableComponent } from "../util/types";
 export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  /**
-   * Button content
+   * Button content.
   */
  children?: React.ReactNode;
  /**
-   * Changes design and interaction-visuals
+   * Changes design and interaction-visuals.
   * @default "primary"
   */
  variant?:
@@ -27,26 +27,27 @@ export interface ButtonProps
    | "tertiary-neutral"
    | "danger";
  /**
-   * Changes padding, height and font-size
-   * @default medium
+   * Changes padding, height, and font-size.
+   * @default "medium"
   */
  size?: "medium" | "small" | "xsmall";
  /**
+   * **Avoid using if possible for accessibility purposes**.
+   *
   * Prevent the user from interacting with the button: it cannot be pressed or focused.
-   * @note Avoid using if possible for accessibility purposes
   */
  disabled?: boolean;
  /**
-   * Replaces button content with a Loader component, keeps width
+   * Replaces button content with a Loader component, keeps width.
   * @default false
   */
  loading?: boolean;
  /**
-   * Button Icon
+   * Button Icon.
   */
  icon?: React.ReactNode;
  /**
-   * Icon position in Button
+   * Icon position in Button.
   * @default "left"
   */
  iconPosition?: "left" | "right";
@@ -183,3 +183,10 @@ export const Chromatic: Story = {
    chromatic: { disable: false },
  },
 };
+
+export const ChromaticForcedColors: Story = {
+  render: Chromatic.render,
+  parameters: {
+    chromatic: { disable: false, forcedColors: "active" },
+  },
+};
@@ -3,20 +3,21 @@ import React, { HTMLAttributes, forwardRef } from "react";
 import { BodyLong } from "../typography";
 import Bubble from "./Bubble";

+export const VARIANTS = ["subtle", "info", "neutral"] as const;
 export const POSITIONS = ["left", "right"] as const;
 export const SIZES = ["medium", "small"] as const;

 export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
  /**
-   * Children of type <Chat.Bubble />
+   * Children of type `<Chat.Bubble />`.
   */
  children: React.ReactNode;
  /**
-   * Chat-message name
+   * Chat-message name.
   */
  name?: string;
  /**
-   * Timestamp for sent message
+   * Timestamp for sent message.
   */
  timestamp?: string;
  /**
@@ -28,19 +29,19 @@ export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
   * Avoid using the same background as the surface behind Chat.
   * @default "neutral"
   */
-  variant?: "subtle" | "info" | "neutral";
+  variant?: (typeof VARIANTS)[number];
  /**
-   * Positions avatar and bubbles
+   * Positions avatar and bubbles.
   * @default "left"
   */
  position?: (typeof POSITIONS)[number];
  /**
-   * Hoizontal position of toptext
+   * Horizontal position of toptext.
   * @default Same as position
   */
  toptextPosition?: (typeof POSITIONS)[number];
  /**
-   * Affects padding and font size in bubbles
+   * Affects padding and font size in bubbles.
   * @default "medium"
   */
  size?: (typeof SIZES)[number];
@@ -1,25 +1,11 @@
 import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { VStack } from "../layout/stack";
-import Chat, { POSITIONS, SIZES } from "./Chat";
+import Chat, { POSITIONS, SIZES, VARIANTS } from "./Chat";

 export default {
  title: "ds-react/Chat",
  component: Chat,
-  argTypes: {
-    position: {
-      control: { type: "radio" },
-      options: POSITIONS,
-    },
-    toptextPosition: {
-      control: { type: "radio" },
-      options: POSITIONS,
-    },
-    size: {
-      control: { type: "radio" },
-      options: SIZES,
-    },
-  },
  parameters: {
    chromatic: { disable: true },
  },
@@ -48,43 +34,49 @@ export const Controls: Story = {
    timestamp: "01.01.21 14:00",
    avatar: "ON",
  },
+  argTypes: {
+    position: {
+      control: { type: "radio" },
+      options: [...POSITIONS], // TypeScript does not like using readonly typed arrays here
+    },
+    toptextPosition: {
+      control: { type: "radio" },
+      options: [...POSITIONS],
+    },
+    size: {
+      control: { type: "radio" },
+      options: [...SIZES],
+    },
+    variant: {
+      control: { type: "radio" },
+      options: [...VARIANTS],
+    },
+  },
 };

 export const Size: Story = {
  render: () => (
    <VStack gap="4">
-      <h3>Medium</h3>
-      <Chat
-        avatar="ON"
-        name="Ola Normann"
-        timestamp="01.01.21 14:00"
-        size="medium"
-      >
-        <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>
-      <h3>Small</h3>
-      <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>
+      {SIZES.map((size) => (
+        <>
+          <h3>{size}</h3>
+          <Chat
+            avatar="ON"
+            name="Ola Normann"
+            timestamp="01.01.21 14:00"
+            size={size}
+          >
+            <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>
+        </>
+      ))}
    </VStack>
  ),
 };
@@ -92,35 +84,21 @@ export const Size: Story = {
 export const Variants: Story = {
  render: () => (
    <VStack gap="4">
-      <h3>Info</h3>
-      <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>
-      <h3>Neutral</h3>
-      <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>
-      <h3>Subtle</h3>
-      <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>
+      {VARIANTS.map((variant) => (
+        <>
+          <h3>{variant}</h3>
+          <Chat
+            avatar="NAV"
+            name="NAV"
+            timestamp="01.01.21 14:00"
+            variant={variant}
+          >
+            <Chat.Bubble>
+              Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+            </Chat.Bubble>
+          </Chat>
+        </>
+      ))}
    </VStack>
  ),
 };
@@ -131,8 +109,7 @@ export const Position: Story = {
      <h3>Default</h3>
      <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.
+          Reprehenderit pariatur officia exercitation laboris.
        </Chat.Bubble>
      </Chat>
      <h3>Right</h3>
@@ -159,10 +136,7 @@ export const Position: Story = {
        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.
+          Reprehenderit pariatur officia exercitation laboris.
        </Chat.Bubble>
      </Chat>
    </VStack>
@@ -171,8 +145,8 @@ export const Position: Story = {

 export const ToptextPosition: Story = {
  render: () => (
-    <VStack gap="4">
-      <h3>Right</h3>
+    <VStack gap="4" style={{ width: 500 }}>
+      <h3>All right</h3>
      <Chat
        avatar="ON"
        name="Ola Normann"
@@ -180,20 +154,31 @@ export const ToptextPosition: Story = {
        toptextPosition="right"
      >
        <Chat.Bubble>
-          Adipisicing laborum est eu laborum est sit in commodo enim sint
-          laboris labore nisi ut.
+          Reprehenderit pariatur officia exercitation laboris.
        </Chat.Bubble>
      </Chat>
-      <h3>Left</h3>
-      <Chat avatar="ON" name="Ola Normann" timestamp="01.01.21 15:00">
-        <Chat.Bubble toptextPosition="left">
-          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.
+      <h3>Single bubble right</h3>
+      <Chat avatar="ON" name="Ola Normann" timestamp="01.01.21 14:00">
+        <Chat.Bubble>
+          Reprehenderit pariatur officia exercitation laboris.
+        </Chat.Bubble>
+        <Chat.Bubble timestamp="14:02" toptextPosition="right">
+          Enim velit deserunt do quis.
        </Chat.Bubble>
      </Chat>
-      <h3>Left</h3>
+
+      <h3>All left</h3>
+      <Chat
+        avatar="ON"
+        name="Ola Normann"
+        timestamp="01.01.21 15:00"
+        toptextPosition="left"
+      >
+        <Chat.Bubble>
+          Reprehenderit pariatur officia exercitation laboris.
+        </Chat.Bubble>
+      </Chat>
+      <h3>All left, position right</h3>
      <Chat
        name="Kari Høyli"
        timestamp="01.01.21 14:32"
@@ -203,25 +188,6 @@ export const ToptextPosition: Story = {
        <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>
-      <h3>Right</h3>
-      <Chat
-        name="Kari Høyli"
-        timestamp="01.01.21 14:32"
-        position="right"
-        toptextPosition="right"
-      >
-        <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>
    </VStack>
  ),
@@ -7,7 +7,7 @@ import ToggleChips, { ChipsToggleProps } from "./Toggle";
 export interface ChipsProps extends HTMLAttributes<HTMLUListElement> {
  children: React.ReactNode;
  /**
-   * Changes padding and font-sizes
+   * Changes padding and font-sizes.
   * @default "medium"
   */
  size?: "medium" | "small";
@@ -24,7 +24,7 @@ interface ChipsComponent
   */
  Toggle: OverridableComponent<ChipsToggleProps, HTMLButtonElement>;
  /**
-   * Remove filter or the likes on click
+   * Remove filter or the likes on click.
   * @see 🏷️ {@link RemovableChipsProps}
   * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
   */
@@ -0,0 +1,32 @@
+import { createContext } from "../util/create-context";
+import { CollapsibleBaseProps } from "./Collapsible.types";
+
+export type CollapsibleContextProps = Pick<CollapsibleBaseProps, "open"> & {
+  /**
+   * Allows connecting trigger to content
+   */
+  contentId: string;
+  /**
+   * Allows connecting content to trigger
+   */
+  triggerId: string;
+  /**
+   * Callback for toggling open state
+   */
+  onOpenToggle: () => void;
+  /**
+   * Allows always rendering children in content when closed
+   */
+  lazy: boolean;
+  /**
+   * Utility for getting state as string. Usefull for data-attributes.
+   */
+  state: "open" | "closed";
+};
+
+export const [CollapsibleContextProvider, useCollapsibleContext] =
+  createContext<CollapsibleContextProps>({
+    name: "CollapsibleContext",
+    errorMessage:
+      "<Collapsible.Trigger> and <Collapsible.Content> must be used within a <Collapsible>",
+  });
@@ -0,0 +1,222 @@
+import { Meta, StoryFn, StoryObj } from "@storybook/react";
+import React, { useState } from "react";
+import { ChevronDownIcon, ChevronUpIcon } from "@navikt/aksel-icons";
+import { Button } from "../button";
+import { Box } from "../layout/box";
+import { HStack, VStack } from "../layout/stack";
+import { Collapsible } from "./Collapsible";
+
+const meta: Meta<typeof Collapsible> = {
+  title: "Utilities/Collapsible",
+  component: Collapsible,
+  parameters: {
+    chromatic: { disable: true },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Collapsible>;
+
+export const Default: Story = {
+  render: (...props) => (
+    <Collapsible {...props}>
+      <Collapsible.Trigger>Trigger</Collapsible.Trigger>
+      <Collapsible.Content>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae
+        corporis maxime aliquam, voluptates nobis numquam, non odit optio
+        architecto iure laborum possimus! Quibusdam sit ullam, consequatur sunt
+        tempore optio aliquid!
+      </Collapsible.Content>
+    </Collapsible>
+  ),
+  args: {
+    open: false,
+    defaultOpen: false,
+  },
+};
+
+export const InContext: StoryFn<typeof Collapsible> = () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <Collapsible open={open} onOpenChange={setOpen}>
+      <HStack justify="space-between" gap="4" align="center">
+        Steg 1 av 8{" "}
+        <Collapsible.Trigger asChild>
+          <Button
+            size="small"
+            variant="tertiary"
+            iconPosition="right"
+            icon={
+              open ? (
+                <ChevronUpIcon aria-hidden />
+              ) : (
+                <ChevronDownIcon aria-hidden />
+              )
+            }
+          >
+            Vis steg
+          </Button>
+        </Collapsible.Trigger>
+      </HStack>
+      <Collapsible.Content>
+        <p>Lorem ipsum dolor sit</p>
+      </Collapsible.Content>
+    </Collapsible>
+  );
+};
+
+export const Animated: StoryFn<typeof Collapsible> = () => (
+  <Collapsible lazy>
+    <Collapsible.Trigger asChild>
+      <Button size="small" variant="secondary">
+        Animer open/lukk
+      </Button>
+    </Collapsible.Trigger>
+    <Collapsible.Content className="collapsible">
+      <div className="collapsibleContent">
+        <Box padding="8" background="surface-alt-3-subtle">
+          <div>lorem ipsum</div>
+        </Box>
+      </div>
+    </Collapsible.Content>
+  </Collapsible>
+);
+
+Animated.decorators = [
+  (Story) => (
+    <div style={{ height: 300 }}>
+      <style>{`
+      .collapsible {
+        display: grid;
+        grid-template-rows: 0fr;
+        overflow: hidden;
+        transition: grid-template-rows 1s ease-in-out;
+      }
+
+      .collapsible[data-state="closed"] {
+        width: 0;
+      }
+
+      .collapsible[data-state="open"] {
+        grid-template-rows: 1fr;
+      }
+
+      .collapsibleContent {
+        min-height: 0;
+        transition: visibility 1s;
+        visibility: hidden;
+      }
+
+      .collapsible[data-state="open"] .collapsibleContent {
+        visibility: visible;
+      }
+
+  `}</style>
+      {Story()}
+    </div>
+  ),
+];
+
+export const Lazy: StoryFn<typeof Collapsible> = () => (
+  <Collapsible lazy>
+    <Collapsible.Trigger>Trigger</Collapsible.Trigger>
+    <Collapsible.Content>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae
+      corporis maxime aliquam, voluptates nobis numquam, non odit optio
+      architecto iure laborum possimus! Quibusdam sit ullam, consequatur sunt
+      tempore optio aliquid!
+    </Collapsible.Content>
+  </Collapsible>
+);
+
+export const AsChild: StoryFn<typeof Collapsible> = () => (
+  <Collapsible>
+    <Collapsible.Trigger asChild>
+      <Button>Button</Button>
+    </Collapsible.Trigger>
+    <Collapsible.Content asChild>
+      <Box padding="4" background="surface-alt-3-subtle">
+        <div>lorem ipsum</div>
+      </Box>
+    </Collapsible.Content>
+  </Collapsible>
+);
+
+export const DefaultOpen: StoryFn<typeof Collapsible> = () => (
+  <Collapsible defaultOpen>
+    <Collapsible.Trigger asChild>
+      <Button>Button</Button>
+    </Collapsible.Trigger>
+    <Collapsible.Content asChild>
+      <Box padding="4" background="surface-alt-3-subtle">
+        <div>lorem ipsum</div>
+      </Box>
+    </Collapsible.Content>
+  </Collapsible>
+);
+
+export const ControlledOpen: StoryFn<typeof Collapsible> = () => (
+  <Collapsible open>
+    <Collapsible.Trigger asChild>
+      <Button>Button</Button>
+    </Collapsible.Trigger>
+    <Collapsible.Content asChild>
+      <Box padding="4" background="surface-alt-3-subtle">
+        <div>lorem ipsum</div>
+      </Box>
+    </Collapsible.Content>
+  </Collapsible>
+);
+
+export const Disabled: StoryFn<typeof Collapsible> = ({ open = false }) => (
+  <Collapsible open={open}>
+    <Collapsible.Trigger asChild disabled>
+      <Button>Button</Button>
+    </Collapsible.Trigger>
+    <Collapsible.Content asChild>
+      <Box padding="4" background="surface-alt-3-subtle">
+        <div>lorem ipsum</div>
+      </Box>
+    </Collapsible.Content>
+  </Collapsible>
+);
+
+export const Chromatic: Story = {
+  render: () => (
+    <VStack gap="8">
+      <div>
+        <h2>In context</h2>
+        <InContext />
+      </div>
+      <div>
+        <h2>Animated</h2>
+        <Animated />
+      </div>
+      <div>
+        <h2>Lazy</h2>
+        <Lazy />
+      </div>
+      <div>
+        <h2>AsChild</h2>
+        <AsChild />
+      </div>
+      <div>
+        <h2>DefaultOpen</h2>
+        <DefaultOpen />
+      </div>
+      <div>
+        <h2>ControlledOpen</h2>
+        <ControlledOpen />
+      </div>
+      <div>
+        <h2>Disabled</h2>
+        <Disabled />
+        <Disabled open />
+      </div>
+    </VStack>
+  ),
+  parameters: {
+    chromatic: { disable: false },
+  },
+};
@@ -0,0 +1,100 @@
+import React, { forwardRef, useCallback } from "react";
+import { useControllableState, useId } from "../util/hooks";
+import { CollapsibleContextProvider } from "./Collapsible.context";
+import { CollapsibleBaseProps } from "./Collapsible.types";
+import CollapsibleContent from "./parts/Collapsible.Content";
+import CollapsibleTrigger from "./parts/Collapsible.Trigger";
+
+export interface CollapsibleProps
+  extends CollapsibleBaseProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+interface CollapsibleComponent
+  extends React.ForwardRefExoticComponent<
+    CollapsibleProps & React.RefAttributes<HTMLDivElement>
+  > {
+  /**
+   * @see 🏷️ {@link CollapsibleTriggerProps}
+   */
+  Trigger: typeof CollapsibleTrigger;
+  /**
+   * @see 🏷️ {@link CollapsibleContentProps}
+   */
+  Content: typeof CollapsibleContent;
+}
+
+/**
+ * Collapsible is a component that allows you to toggle visibility of content.
+ *
+ * @example
+ * ```jsx
+ * <Collapsible>
+ *   <Collapsible.Trigger>Trigger</Collapsible.Trigger>
+ *   <Collapsible.Content>
+ *     Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae
+ *     corporis maxime aliquam, voluptates nobis numquam, non odit optio
+ *     architecto iure laborum possimus! Quibusdam sit ullam, consequatur sunt
+ *     tempore optio aliquid!
+ *   </Collapsible.Content>
+ * </Collapsible>
+ * ```
+ *
+ * @example With asChild
+ * ```jsx
+ * <Collapsible>
+ *   <Collapsible.Trigger asChild>
+ *     <Button>Button</Button>
+ *   </Collapsible.Trigger>
+ *   <Collapsible.Content asChild>
+ *     <Box padding="4" background="surface-alt-3-subtle">
+ *       <div>lorem ipsum</div>
+ *     </Box>
+ *   </Collapsible.Content>
+ * </Collapsible>
+ * ```
+ */
+export const Collapsible = forwardRef<HTMLDivElement, CollapsibleProps>(
+  (
+    {
+      children,
+      open,
+      defaultOpen = false,
+      onOpenChange,
+      lazy = false,
+      ...rest
+    },
+    ref,
+  ) => {
+    const [_open, setOpen] = useControllableState({
+      value: open,
+      defaultValue: defaultOpen,
+      onChange: onOpenChange,
+    });
+
+    const internalId = useId();
+    const state = _open ? "open" : "closed";
+
+    return (
+      <CollapsibleContextProvider
+        open={_open}
+        onOpenToggle={useCallback(
+          () => setOpen((prevOpen) => !prevOpen),
+          [setOpen],
+        )}
+        contentId={`collapsible-content-${internalId}`}
+        triggerId={`collapsible-trigger-${internalId}`}
+        lazy={lazy}
+        state={state}
+      >
+        <div ref={ref} data-state={state} {...rest}>
+          {children}
+        </div>
+      </CollapsibleContextProvider>
+    );
+  },
+) as CollapsibleComponent;
+
+Collapsible.Trigger = CollapsibleTrigger;
+Collapsible.Content = CollapsibleContent;
+
+export default Collapsible;
@@ -0,0 +1,19 @@
+export interface CollapsibleBaseProps {
+  /**
+   * The open state of the collapsible when it is initially rendered. Use when you do not need to control its open state.
+   */
+  defaultOpen?: boolean;
+  /**
+   * The controlled open state of the collapsible. Must be used in conjunction with onOpenChange.
+   */
+  open?: boolean;
+  /**
+   * Event handler called when the open state of the collapsible changes.
+   */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * Render the collapsible content lazily. This means that the content will not be rendered until the collapsible is open.
+   * @default false
+   */
+  lazy?: boolean;
+}
@@ -0,0 +1,10 @@
+"use client";
+export { default as Collapsible, type CollapsibleProps } from "./Collapsible";
+export {
+  default as CollapsibleTrigger,
+  type CollapsibleTriggerProps,
+} from "./parts/Collapsible.Trigger";
+export {
+  default as CollapsibleContent,
+  type CollapsibleContentProps,
+} from "./parts/Collapsible.Content";
@@ -0,0 +1,39 @@
+import React, { forwardRef } from "react";
+import { Slot } from "../../util/Slot";
+import { useCollapsibleContext } from "../Collapsible.context";
+
+export interface CollapsibleContentProps
+  extends Omit<
+    React.HTMLAttributes<HTMLDivElement>,
+    "hidden" | "aria-controls" | "id"
+  > {
+  /**
+   * When true, will render element as its child. This merges classes, styles and event handlers.
+   * @default false
+   */
+  asChild?: boolean;
+}
+
+export const CollapsibleContent = forwardRef<
+  HTMLDivElement,
+  CollapsibleContentProps
+>(({ children, asChild, ...rest }, ref) => {
+  const ctx = useCollapsibleContext();
+
+  const Comp = asChild ? Slot : "div";
+
+  return (
+    <Comp
+      ref={ref}
+      {...rest}
+      data-state={ctx.state}
+      hidden={!ctx.open}
+      aria-controls={ctx.open ? ctx.triggerId : undefined}
+      id={ctx.contentId}
+    >
+      {ctx.lazy || ctx.open ? children : null}
+    </Comp>
+  );
+});
+
+export default CollapsibleContent;
@@ -0,0 +1,46 @@
+import React, { forwardRef } from "react";
+import { Slot } from "../../util/Slot";
+import { composeEventHandlers } from "../../util/composeEventHandlers";
+import { useCollapsibleContext } from "../Collapsible.context";
+
+export interface CollapsibleTriggerProps
+  extends Omit<
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    "id" | "aria-controls" | "aria-expanded"
+  > {
+  /**
+   * When true, will render element as its child. This merges classes, styles and event handlers.
+   * @default false
+   */
+  asChild?: boolean;
+  /**
+   * You may disable aria-expanded if the accessable name of the trigger is changed when toggled, e.g. "Show"/"Hide".
+   */
+  "aria-expanded"?: undefined;
+}
+
+export const CollapsibleTrigger = forwardRef<
+  HTMLButtonElement,
+  CollapsibleTriggerProps
+>(({ children, asChild, onClick, ...rest }, ref) => {
+  const ctx = useCollapsibleContext();
+
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      ref={ref}
+      type="button"
+      data-state={ctx.state}
+      onClick={composeEventHandlers(onClick, ctx.onOpenToggle)}
+      aria-expanded={ctx.open}
+      {...rest}
+      id={ctx.triggerId}
+      aria-controls={ctx.open ? ctx.contentId : undefined}
+    >
+      {children}
+    </Comp>
+  );
+});
+
+export default CollapsibleTrigger;
@@ -14,7 +14,7 @@ import copy from "../util/copy";
 export interface CopyButtonProps
  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
  /**
-   * 'xsmall' should only be used in tables
+   * `"xsmall"` should _only_ be used in tables.
   * @default "medium"
   */
  size?: "medium" | "small" | "xsmall";
@@ -23,49 +23,52 @@ export interface CopyButtonProps
   */
  variant?: "action" | "neutral";
  /**
-   * Text to copy to clipboard
+   * Text to copy to clipboard.
   */
  copyText: string;
  /**
-   *  Optional text in button
+   *  Optional text in button.
   */
  text?: string;
  /**
   * Text shown when button is clicked.
   * Only set if used with `text`-prop.
+   * @default "Kopiert!"
   */
  activeText?: string;
  /**
-   * Callback when 'copied'-state is active
+   * Callback that is called when internal copy-state changes.
+   *
+   * @param state `true` when copy-state is activated, `false` when copy-state is deactivated.
   */
  onActiveChange?: (state: boolean) => void;
  /**
-   *  Icon shown when button is not clicked
+   *  Icon shown when button is not clicked.
   * @default <FilesIcon />
   */
  icon?: React.ReactNode;
  /**
-   * Icon shown when active
+   * Icon shown when active.
   * @default <CheckmarkIcon />
   */
  activeIcon?: React.ReactNode;
  /**
-   * Timeout duration in milliseconds
+   * Timeout duration in milliseconds.
   * @default 2000
   */
  activeDuration?: number;
  /**
-   * Accessible label for icon (ignored if text is set)
-   * @default 'Kopier'
+   * Accessible label for icon (ignored if text is set).
+   * @default "Kopier"
   */
  title?: string;
  /**
-   * Accessible label for icon in active-state (ignored if text is set)
-   * @default 'Kopiert'
+   * Accessible label for icon in active-state (ignored if text is set).
+   * @default "Kopiert"
   */
  activeTitle?: string;
  /**
-   * Icon position in button
+   * Icon position in button.
   * @default "left"
   */
  iconPosition?: "left" | "right";
@@ -1,5 +1,5 @@
-/* eslint-disable react-hooks/rules-of-hooks */
 import { Meta, StoryObj } from "@storybook/react";
+import { expect, userEvent, within } from "@storybook/test";
 import { isSameDay } from "date-fns";
 import React, { useId, useState } from "react";
 import { Button } from "../../button";
@@ -161,6 +161,7 @@ export const UseDatepicker = () => {
    fromDate: new Date("Aug 23 2019"),
    toDate: new Date("Feb 23 2024"),
    onDateChange: console.log,
+    onValidate: console.log,
  });

  return (
@@ -440,6 +441,39 @@ export const WeekDayClick = () => {
  );
 };

+export const Required = {
+  render: () => {
+    const { datepickerProps } = useDatepicker({
+      defaultSelected: new Date("Apr 10 2024"),
+      required: true,
+    });
+
+    return (
+      <div style={{ height: "20rem" }}>
+        <DatePicker.Standalone {...datepickerProps} />
+      </div>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const button10 = canvas.getByRole("button", { pressed: true });
+
+    await userEvent.click(button10);
+
+    expect(button10.ariaPressed).toBe("true");
+
+    const button17 = canvas.getByText("17").closest("button");
+
+    expect(button17?.ariaPressed).toBe("false");
+
+    button17 && (await userEvent.click(button17));
+
+    expect(button17?.ariaPressed).toBe("true");
+    expect(button10.ariaPressed).toBe("false");
+  },
+};
+
 export const ModalDemo = () => {
  const { datepickerProps, inputProps } = useDatepicker({
    fromDate: new Date("Aug 23 2019"),
@@ -20,8 +20,11 @@ const DayButton = (props: DayProps) => {
      name="day"
      ref={buttonRef}
      {...dayRender.buttonProps}
+      role={undefined}
      aria-label={dateTime}
      aria-hidden={dayRender.activeModifiers.outside}
+      aria-selected={undefined}
+      aria-pressed={!!dayRender.activeModifiers.selected}
    />
  );
 };
@@ -37,7 +37,11 @@ export const DropdownCaption = ({ displayMonth, id }: CaptionProps) => {
  const handleMonthChange: React.ChangeEventHandler<HTMLSelectElement> = (e) =>
    goToMonth(setMonth(startOfMonth(displayMonth), Number(e.target.value)));

-  const years = getYears(fromDate, toDate, displayMonth.getFullYear());
+  const years = getYears(
+    fromDate,
+    toDate,
+    displayMonth.getFullYear(),
+  ).reverse();
  const months = getMonths(fromDate, toDate, displayMonth);

  const previousLabel = labelPrevious(previousMonth, { locale });
@@ -16,7 +16,7 @@ export type MultipleMode = {
  min?: number;
  max?: number;
  /**
-   * Allows selecting a week at a time. Only used with mode="multiple".
+   * Allows selecting a week at a time. Only used with `mode` is set to "multiple".
   */
  onWeekNumberClick?: DayPickerBase["onWeekNumberClick"];
 };
@@ -83,21 +83,22 @@ export interface DatePickerDefaultProps
   */
  showWeekNumber?: boolean;
  /**
-   * Open state for user-controlled state. Component controlled by default
+   * Open state for user-controlled state. Component controlled by default.
   */
  open?: boolean;
  /**
-   * onClose callback for user-controlled state
+   * onClose callback for user-controlled state.
   */
  onClose?: () => void;
  /**
-   * onOpenToggle callback for user-controlled state. Only called if `<DatePicker.Input />` is used
+   * onOpenToggle callback for user-controlled state. Only called if `<DatePicker.Input />` is used.
   */
  onOpenToggle?: () => void;
  /**
-   * Avoid using if possible!
+   * **Avoid using if possible!**
+   *
   * Changes what CSS position property to use.
-   * You want to use "fixed" if parent wrapper has position relative, but you want popover to escape
+   * You want to use "fixed" if parent wrapper has position relative, but you want popover to escape.
   * @default See Popover
   */
  strategy?: "absolute" | "fixed";
@@ -49,10 +49,11 @@ export interface UseDatepickerOptions
   */
  onValidate?: (val: DateValidationT) => void;
  /**
-   * Allows input of with 'yy' year format.
+   * Allows input of with `yy` year format.
+   *
+   * Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th.
+   * e.g. In 2024 this equals to 1944 - 2043.
   * @default true
-   * @Note Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th.
-   * In 2024 this equals to 1944 - 2043
   */
  allowTwoDigitYear?: boolean;
 }
@@ -228,12 +229,16 @@ export const useDatepicker = (

  /* Only allow de-selecting if not required */
  const handleDayClick: DayClickEventHandler = (day, { selected }) => {
+    if (selected && required) {
+      return;
+    }
+
    if (day && !selected) {
      handleOpen(false);
      anchorRef?.focus();
    }

-    if (!required && selected) {
+    if (selected) {
      updateDate(undefined);
      setInputValue("");
      updateValidation({ isValidDate: false, isEmpty: true });
@@ -271,7 +276,7 @@ export const useDatepicker = (
    ) {
      updateDate(undefined);
      updateValidation({
-        isInvalid: isValidDate(day),
+        isInvalid: !isValidDate(day),
        isWeekend: disableWeekends && isWeekend(day),
        isDisabled: disabled && isMatch(day, disabled),
        isValidDate: false,
@@ -36,10 +36,11 @@ export interface UseMonthPickerOptions
   */
  defaultYear?: Date;
  /**
-   * Allows input of with 'yy' year format.
-   * @default true
-   * @Note Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th.
+   * Allows input of with `yy` year format.
+   *
+   * Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th.
   * In 2024 this equals to 1944 - 2043
+   * @default true
   */
  allowTwoDigitYear?: boolean;
 }
@@ -224,13 +225,17 @@ export const useMonthpicker = (

  /* Only allow de-selecting if not required */
  const handleMonthClick = (month?: Date) => {
+    if (!month && required) {
+      return;
+    }
+
    if (month) {
      handleOpen(false);
      setYear(month);
      anchorRef?.focus();
    }

-    if (!required && !month) {
+    if (!month) {
      updateMonth(undefined);
      updateValidation({ isValidMonth: false, isEmpty: true });
      setInputValue("");
@@ -66,6 +66,7 @@ export const MonthButton = ({
      type="button"
      onClick={() => onSelect(isSelected ? undefined : month)}
      disabled={isDisabled}
+      aria-pressed={!!isSelected}
      className={cl("navds-date__month-button", {
        "rdp-day_today": dateIsInCurrentMonth(month, year),
        "rdp-day_selected": isSelected,
@@ -35,7 +35,7 @@ export const MonthCaption = () => {
    if (!years.map((x) => x.getFullYear()).includes(year.getFullYear())) {
      years.push(setYear(startOfYear(new Date()), year.getFullYear()));
    }
-    years.sort((a, b) => a.getFullYear() - b.getFullYear());
+    years.sort((a, b) => b.getFullYear() - a.getFullYear());
  }

  const handleYearChange = (e) =>
@@ -1,4 +1,5 @@
 import { Meta, StoryFn, StoryObj } from "@storybook/react";
+import { expect, userEvent, within } from "@storybook/test";
 import { setYear } from "date-fns";
 import React, { useId, useState } from "react";
 import { Button } from "../../button";
@@ -121,25 +122,37 @@ export const UseMonthpickerFormat = () => {
  );
 };

-export const Required = () => {
-  const { inputProps, monthpickerProps } = useMonthpicker({
-    locale: "nb",
-    defaultSelected: new Date(),
-    disabled: [new Date("Apr 1 2022")],
-    required: true,
-  });
+export const Required = {
+  render: () => {
+    const { monthpickerProps } = useMonthpicker({
+      defaultSelected: new Date("Apr 10 2024"),
+      required: true,
+    });

-  return (
-    <div style={{ height: "20rem" }}>
-      <MonthPicker {...monthpickerProps}>
-        <MonthPicker.Input
-          {...inputProps}
-          label="Velg måned"
-          variant="monthpicker"
-        />
-      </MonthPicker>
-    </div>
-  );
+    return (
+      <div style={{ height: "20rem" }}>
+        <MonthPicker.Standalone {...monthpickerProps} />
+      </div>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const buttonApr = canvas.getByRole("button", { pressed: true });
+
+    await userEvent.click(buttonApr);
+
+    expect(buttonApr.ariaPressed).toBe("true");
+
+    const buttonSep = canvas.getByText("september").closest("button");
+
+    expect(buttonSep?.ariaPressed).toBe("false");
+
+    buttonSep && (await userEvent.click(buttonSep));
+
+    expect(buttonSep?.ariaPressed).toBe("true");
+    expect(buttonApr.ariaPressed).toBe("false");
+  },
 };

 export const UserControlled = () => {
@@ -193,7 +206,6 @@ export const Chromatic: Story = {
      <DisabledMonths />
      <UseMonthpicker />
      <UseMonthpickerFormat />
-      <Required />
      <UserControlled />
      <FollowYear />
    </div>
@@ -69,7 +69,8 @@ export interface MonthPickerProps extends React.HTMLAttributes<HTMLDivElement> {
   */
  onYearChange?: (y?: Date) => void;
  /**
-   * Avoid using if possible!
+   * **Avoid using if possible!**
+   *
   * Changes what CSS position property to use
   * You want to use "fixed" if parent wrapper has position relative, but you want popover to escape
   * @default "absolute"
@@ -21,7 +21,7 @@ export interface DateInputProps
  hideLabel?: boolean;
  /**
   * Changes padding and font-sizes
-   * @default medium
+   * @default "medium"
   */
  size?: "medium" | "small";
  /**
@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React, { useState } from "react";
 import { Button } from "../button";
 import Dropdown from "./Dropdown";
@@ -6,10 +6,15 @@ import Dropdown from "./Dropdown";
 export default {
  title: "ds-react/Dropdown",
  component: Dropdown,
-} as Meta;
+  parameters: {
+    chromatic: { disable: true },
+  },
+} satisfies Meta<typeof Dropdown>;

-export const Default = () => {
-  return (
+type Story = StoryObj<typeof Dropdown>;
+
+export const Default: Story = {
+  render: () => (
    <Dropdown onSelect={(event) => console.log(event)}>
      <Dropdown.Toggle>Toggle</Dropdown.Toggle>
      <Dropdown.Menu strategy="fixed">
@@ -33,10 +38,10 @@ export const Default = () => {
        </Dropdown.Menu.List>
      </Dropdown.Menu>
    </Dropdown>
-  );
+  ),
 };

-export const DefaultOpen = {
+export const DefaultOpen: Story = {
  render: () => (
    <Dropdown onSelect={(event) => console.log(event)} defaultOpen>
      <Button as={Dropdown.Toggle}>Toggle</Button>
@@ -57,20 +62,41 @@ export const DefaultOpen = {
      </Dropdown.Menu>
    </Dropdown>
  ),
-  args: { chromatic: { delay: 300 } },
 };

-export const ControlledOpen = () => {
-  const [openState, setOpenState] = useState(true);
-  return (
-    <Dropdown onSelect={(event) => console.log(event)} open={openState}>
-      <Button as={Dropdown.Toggle} onClick={() => setOpenState(!openState)}>
-        Toggle
-      </Button>
-      <Dropdown.Menu
-        strategy="fixed"
-        onClose={() => console.log("ONCLOSE CONTROLLED")}
-      >
+export const ControlledOpen: Story = {
+  render: () => {
+    const [openState, setOpenState] = useState(true);
+    return (
+      <Dropdown onSelect={(event) => console.log(event)} open={openState}>
+        <Button as={Dropdown.Toggle} onClick={() => setOpenState(!openState)}>
+          Toggle
+        </Button>
+        <Dropdown.Menu
+          strategy="fixed"
+          onClose={() => console.log("ONCLOSE CONTROLLED")}
+        >
+          <Dropdown.Menu.GroupedList>
+            <Dropdown.Menu.GroupedList.Heading>
+              Systemer og oppslagsverk
+            </Dropdown.Menu.GroupedList.Heading>
+            <Dropdown.Menu.GroupedList.Item
+              onClick={() => console.log("GroupedList.Item-click")}
+            >
+              Gosys
+            </Dropdown.Menu.GroupedList.Item>
+          </Dropdown.Menu.GroupedList>
+        </Dropdown.Menu>
+      </Dropdown>
+    );
+  },
+};
+
+export const Chromatic: Story = {
+  render: () => (
+    <Dropdown onSelect={(event) => console.log(event)} open>
+      <Dropdown.Toggle>Toggle</Dropdown.Toggle>
+      <Dropdown.Menu strategy="fixed">
        <Dropdown.Menu.GroupedList>
          <Dropdown.Menu.GroupedList.Heading>
            Systemer og oppslagsverk
@@ -81,8 +107,18 @@ export const ControlledOpen = () => {
            Gosys
          </Dropdown.Menu.GroupedList.Item>
        </Dropdown.Menu.GroupedList>
+        <Dropdown.Menu.Divider />
+        <Dropdown.Menu.List>
+          <Dropdown.Menu.List.Item onClick={() => console.log("Item-click")}>
+            Gosys
+          </Dropdown.Menu.List.Item>
+          <Dropdown.Menu.List.Item>Psys</Dropdown.Menu.List.Item>
+          <Dropdown.Menu.List.Item disabled>Infotrygd</Dropdown.Menu.List.Item>
+        </Dropdown.Menu.List>
      </Dropdown.Menu>
    </Dropdown>
-  );
+  ),
+  parameters: {
+    chromatic: { disable: false, delay: 300 },
+  },
 };
-ControlledOpen.args = { chromatic: { delay: 300 } };