Version Packages (#2775 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>
Fikset CDN deploy av Aksel og designsystem assets (#2789 )
2026-10-13 09:12:03 +00:00 · 2024-03-14 16:15:40 +01:00 · 2024-03-14 16:05:09 +01:00 · 2024-03-14 14:20:08 +01:00 · 2024-03-14 14:11:20 +01:00 · 2024-03-14 14:00:44 +01:00
284 changed files with 37501 additions and 35654 deletions
@@ -72,7 +72,6 @@ module.exports = {
          "error",
          "aksel.nav.no/website/pages/",
        ],
-        "@typescript-eslint/ban-ts-comment": "off", // Temporary
      },
    },
    {
@@ -14,10 +14,15 @@ 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 "SANITY_WRITE_KEY=${{ secrets.SANITY_FEEDBACK_WRITE_KEY }}" >> aksel.nav.no/website/.env
@@ -29,14 +34,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 +43,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,10 +47,16 @@ 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 "SANITY_WRITE_KEY=${{ secrets.SANITY_FEEDBACK_WRITE_KEY }}" >> aksel.nav.no/website/.env
@@ -60,14 +64,6 @@ jobs:
          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 +77,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 }}
@@ -4,10 +4,7 @@ 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",
@@ -29,14 +26,12 @@ export default {
        },
      },
    },
+    "storybook-addon-pseudo-states",
  ],
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
-  features: {
-    storyStoreV7: true,
-  },
  docs: {
    autodocs: "tag",
  },
@@ -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,15 @@
 # @navikt/aksel-icons

+## 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.0.0
@@ -6,5 +6,8 @@
  "ui": "dist/index.html",
  "capabilities": [],
  "enableProposedApi": false,
-  "editorType": ["figma", "figjam"]
+  "editorType": ["figma", "figjam"],
+  "networkAccess": {
+    "allowedDomains": ["none"]
+  }
 }
@@ -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.0",
+  "version": "6.2.0",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -1,5 +1,9 @@
 # @navikt/aksel-stylelint

+## 6.2.0
+
+## 6.1.1
+
 ## 6.1.0

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

+## 6.2.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@6.2.0
+
+## 6.1.1
+
+### Patch Changes
+
+- Updated dependencies [[`9510327ab`](https://github.com/navikt/aksel/commit/9510327abe96142943c6e92bd7c7da93a9721fd5), [`3d2eab4fd`](https://github.com/navikt/aksel/commit/3d2eab4fda07cac8071822e1f8e8fc5f69e7d234)]:
+  - @navikt/ds-css@6.1.1
+
 ## 6.1.0

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel",
-  "version": "6.1.0",
+  "version": "6.2.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.0",
+    "@navikt/ds-css": "6.2.0",
    "axios": "1.6.0",
    "chalk": "4.1.0",
    "clipboardy": "^2.3.0",
@@ -1,5 +1,15 @@
 # @navikt/ds-css

+## 6.2.0
+
+## 6.1.1
+
+### Patch Changes
+
+- Link: Fjern hover-farge ([#2767](https://github.com/navikt/aksel/pull/2767))
+
+- Modal: Får nå fokus når åpnes i Safari ([#2688](https://github.com/navikt/aksel/pull/2688))
+
 ## 6.1.0

 ## 6.0.0
@@ -20,7 +20,6 @@

 .navds-link:hover {
  text-decoration: none;
-  color: var(--ac-link-hover-text, var(--a-text-action-hover));
 }

 .navds-link.navds-link--remove-underline {
@@ -146,7 +146,7 @@

@keyframes akselModalFadeIn {
  from {
-    opacity: 0;
+    opacity: 0.0001; /* Safari will not set focus inside the modal when it opens if we set this to 0 */
    transform: translate3d(0, calc(5% + 4px), 0);
  }

@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "6.1.0",
+  "version": "6.2.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.0",
+    "@navikt/ds-tokens": "^6.2.0",
    "cssnano": "6.0.0",
    "fast-glob": "3.2.11",
    "lodash": "4.17.21",
@@ -174,7 +174,6 @@
  },
  "link": {
    "--ac-link-text": "--a-text-action",
-    "--ac-link-hover-text": "--a-text-action-hover",
    "--ac-link-focus-text": "--a-text-on-action",
    "--ac-link-focus-bg": "--a-border-focus",
    "--ac-link-focus-border": "--a-border-focus",
@@ -1,5 +1,27 @@
 # @navikt/ds-react

+## 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
+
+- Modal: Fikser uønsket lukking ved klikk-og-dra mellom backdrop og modal (f.eks. ved markering av tekst) dersom `closeOnBackdropClick` er `true`. ([#2752](https://github.com/navikt/aksel/pull/2752))
+
+- Modal: Endre title på lukkeknapp til bare 'Lukk' ([#2688](https://github.com/navikt/aksel/pull/2688))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@6.1.1
+  - @navikt/aksel-icons@6.1.1
+
 ## 6.1.0

 ### Minor Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "6.1.0",
+  "version": "6.2.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",
@@ -552,8 +552,8 @@
  },
  "dependencies": {
    "@floating-ui/react": "0.25.4",
-    "@navikt/aksel-icons": "^6.1.0",
-    "@navikt/ds-tokens": "^6.1.0",
+    "@navikt/aksel-icons": "^6.2.0",
+    "@navikt/ds-tokens": "^6.2.0",
    "@radix-ui/react-tabs": "1.0.0",
    "@radix-ui/react-toggle-group": "1.0.0",
    "clsx": "^2.1.0",
@@ -567,7 +567,6 @@
    "@testing-library/user-event": "^14.2.0",
    "@types/faker": "5.5.8",
    "concurrently": "7.2.1",
-    "copyfiles": "^2.4.1",
    "faker": "5.5.3",
    "fast-glob": "3.2.11",
    "jsdom": "24.0.0",
@@ -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";
@@ -8,15 +8,15 @@ 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;
  /**
@@ -30,17 +30,17 @@ export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
   */
  variant?: "subtle" | "info" | "neutral";
  /**
-   * 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];
@@ -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
   */
@@ -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,11 +23,11 @@ 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;
  /**
@@ -36,36 +36,38 @@ export interface CopyButtonProps
   */
  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,4 +1,3 @@
-/* eslint-disable react-hooks/rules-of-hooks */
 import { Meta, StoryObj } from "@storybook/react";
 import { isSameDay } from "date-fns";
 import React, { useId, useState } from "react";
@@ -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;
 }
@@ -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;
 }
@@ -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";
  /**
@@ -7,7 +7,7 @@ export interface ExpansionCardTitleProps
  children: React.ReactNode;
  /**
   * Changes text-sizing
-   * @default medium
+   * @default "medium"
   */
  size?: "large" | "medium" | "small";
 }
@@ -19,7 +19,7 @@ export interface CheckboxGroupProps
    "onChange" | "errorPropagation" | "defaultValue"
  > {
  /**
-   * Collection of <Checkbox/>
+   * Collection of `<Checkbox/>`.
   */
  children: React.ReactNode;
  /**
@@ -27,11 +27,11 @@ export interface CheckboxGroupProps
   */
  value?: any[];
  /**
-   * Default checked checkboxes on render
+   * Default checked checkboxes on render.
   */
  defaultValue?: any[];
  /**
-   * Returns current checked checkboxes in group
+   * Returns current checked checkboxes in group.
   */
  onChange?: (value: any[]) => void;
 }
@@ -5,12 +5,12 @@ export interface CheckboxProps
  extends FormFieldProps,
    Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "value"> {
  /**
-   * Adds error indication on checkbox
+   * Adds error indication on checkbox.
   * @default false
   */
  error?: boolean;
  /**
-   * Id for error resulting in checkbox having error
+   * Id for error resulting in checkbox having error.
   */
  errorId?: string;
  /**
@@ -26,12 +26,12 @@ export interface CheckboxProps
   */
  value?: any;
  /**
-   * Specify whether the Checkbox is in an indeterminate state
+   * Specify whether the Checkbox is in an indeterminate state.
   * @default false
   */
  indeterminate?: boolean;
  /**
-   * Adds a description to extend labling of Checkbox
+   * Adds a description to extend labling of Checkbox.
   */
  description?: string;
 }
@@ -16,11 +16,11 @@ export interface ComboboxProps
  extends FormFieldProps,
    Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "value"> {
  /**
-   * Combobox label
+   * Combobox label.
   */
  label: React.ReactNode;
  /**
-   * List of options to use for autocompletion
+   * List of options to use for autocompletion.
   */
  options: string[];
  /**
@@ -28,11 +28,11 @@ export interface ComboboxProps
   */
  allowNewValues?: boolean;
  /**
-   * If "true" adds a button to clear the value in the input field
+   * If `true` adds a button to clear the value in the input field
   */
  clearButton?: boolean;
  /**
-   * Custom name for the clear button. Requires "clearButton" to be "true".
+   * Custom name for the clear button. Requires `clearButton` to be `true`.
   *
   * @default "Tøm"
   */
@@ -59,13 +59,13 @@ export interface ComboboxProps
   */
  isListOpen?: boolean;
  /**
-   * Set to "true" when doing an async search and waiting for new filteredOptions.
+   * Set to `true` when doing an async search and waiting for new filteredOptions.
   *
   * Will show a spinner in the dropdown and announce to screen readers that it is loading.
   */
  isLoading?: boolean;
  /**
-   * Set to "true" to allow multiple selections
+   * Set to `true` to allow multiple selections.
   *
   * This will display selected values as a list of Chips in front of the input field, instead of a selection replacing the value of the input.
   *
@@ -82,18 +82,18 @@ export interface ComboboxProps
    value?: string,
  ) => void;
  /**
-   * Callback function triggered whenever the input field is cleared
+   * Callback function triggered whenever the input field is cleared.
   *
   * @param event
   * @returns
   */
  onClear?: (event: React.PointerEvent | React.KeyboardEvent) => void;
  /**
-   * Callback function triggered whenever an option is selected or de-selected
+   * Callback function triggered whenever an option is selected or de-selected.
   *
-   * @param option
-   * @param isSelected - Whether the option has been selected or unselected
-   * @param isCustomOption - Whether the option comes from user input, instead of from the list
+   * @param option The selected option.
+   * @param isSelected Whether the option has been selected or unselected.
+   * @param isCustomOption Whether the option comes from user input, instead of from the list.
   * @returns
   */
  onToggleSelected?: (
@@ -113,25 +113,25 @@ export interface ComboboxProps
   */
  maxSelected?: MaxSelected;
  /**
-   * Set to "true" to enable inline autocomplete.
+   * Set to `true` to enable inline autocomplete.
   *
   * @default false
   */
  shouldAutocomplete?: boolean;
  /**
-   * When set to "true" displays selected options as Chips before the input field
+   * When set to `true` displays selected options as Chips before the input field
   *
   * @default true
   */
  shouldShowSelectedOptions?: boolean;
  /**
-   * When set to "true" displays the toggle button for opening/closing the dropdown list
+   * When set to `true` displays the toggle button for opening/closing the dropdown list
   *
   * @default true
   */
  toggleListButton?: boolean;
  /**
-   * Custom name for the toggle list-button. Requires "toggleListButton" to be "true".
+   * Custom name for the toggle list-button. Requires "toggleListButton" to be `true`.
   *
   * @default "Alternativer"
   */
@@ -6,20 +6,20 @@ import ErrorSummaryItem, { ErrorSummaryItemType } from "./ErrorSummaryItem";

 export interface ErrorSummaryProps extends HTMLAttributes<HTMLDivElement> {
  /**
-   * Collectipn of ErrorSummary.Item
+   * Collection of `ErrorSummary.Item`.
   */
  children: React.ReactNode;
  /**
-   * Changes padding and font-sizes
+   * Changes padding and font-sizes.
   * @default "medium"
   */
  size?: "medium" | "small";
  /**
-   * Heading above links
+   * Heading above links.
   */
  heading?: React.ReactNode;
  /**
-   * Allows setting a different HTML h-tag
+   * Allows setting a different HTML h-tag.
   * @default "h2"
   */
  headingTag?: React.ElementType<any>;
@@ -30,7 +30,7 @@ interface ErrorSummaryComponent
    ErrorSummaryProps & React.RefAttributes<HTMLDivElement>
  > {
  /**
-   * Link to error
+   * Link to error.
   *
   * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
   *
@@ -21,7 +21,7 @@ export interface RadioGroupProps
    "onChange" | "errorPropagation" | "defaultValue"
  > {
  /**
-   * Collection of <Radio />-elements
+   * Collection of `<Radio />`-elements
   */
  children: React.ReactNode;
  /**
@@ -26,8 +26,9 @@ export interface SearchProps
    Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "type"> {
  children?: React.ReactNode;
  /**
-   * Search label
-   * @note Will be hidden by default, is required for accessibility reasons.
+   * Search label.
+   *
+   * Will be hidden by default, is required for accessibility reasons.
   */
  label: React.ReactNode;
  /**
@@ -8,27 +8,27 @@ import { FormFieldProps, useFormField } from "../useFormField";

 export interface SelectProps
  extends FormFieldProps,
-    Omit<SelectHTMLAttributes<HTMLSelectElement>, "size"> {
+    Omit<SelectHTMLAttributes<HTMLSelectElement>, "size" | "multiple"> {
  /**
-   * Collection of <option />-elements
+   * Collection of <option />-elements.
   */
  children: React.ReactNode;
  /**
-   * Exposes the HTML size attribute
+   * Exposes the HTML size attribute.
   */
  htmlSize?: number;
  /**
-   * Label for select
+   * Sets inline-style on select wrapper.
+   */
+  style?: React.CSSProperties;
+  /**
+   * Label for select.
   */
  label: React.ReactNode;
  /**
-   * If enabled shows the label and description for screenreaders only
+   * Shows label and description for screenreaders only.
   */
  hideLabel?: boolean;
-  /**
-   * Sets inline-style on select wrapper
-   */
-  style?: React.CSSProperties;
 }

 /**
@@ -1,36 +1,15 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryFn, StoryObj } from "@storybook/react";
 import React from "react";
-import Select from "./Select";
+import Select, { SelectProps } from "./Select";

-export default {
+const meta: Meta<typeof Select> = {
  title: "ds-react/Select",
  component: Select,
-  argTypes: {
-    size: {
-      control: {
-        type: "radio",
-        options: ["medium", "small"],
-      },
-    },
-    description: {
-      type: "string",
-    },
-    error: {
-      type: "string",
-    },
-    hideLabel: {
-      type: "boolean",
-    },
-    disabled: {
-      type: "boolean",
-    },
-  },
  parameters: {
    chromatic: { disable: true },
  },
-} as Meta;
-
-type Story = StoryObj<typeof Select>;
+};
+export default meta;

 const content = (
  <>
@@ -40,16 +19,32 @@ const content = (
  </>
 );

-export const Default = {
-  render: (props) => {
-    return (
-      <Select {...props} label="Ipsum enim quis culpa">
-        {content}
-      </Select>
-    );
+export const Default: StoryFn<Omit<SelectProps, "children">> = (props) => (
+  <Select {...props}>{content}</Select>
+);
+Default.args = {
+  label: "Ipsum enim quis culpa",
+};
+Default.argTypes = {
+  description: {
+    type: "string",
+  },
+  size: {
+    control: { type: "radio" },
+    options: ["medium", "small"],
+  },
+  error: {
+    type: "string",
+  },
+  hideLabel: {
+    type: "boolean",
+  },
+  disabled: {
+    type: "boolean",
+  },
+  readOnly: {
+    type: "boolean",
  },
-
-  args: {},
 };

 export const Small = () => {
@@ -138,12 +133,12 @@ export const Readonly = () => {
  );
 };

-export const Chromatic: Story = {
+export const Chromatic: StoryObj<typeof Select> = {
  render: () => (
    <div>
      <div>
        <h2>Default</h2>
-        {Default.render?.({ label: "Ipsum enim quis culpa" })}
+        <Default label="Ipsum enim quis culpa" />
      </div>
      <div>
        <h2>Small</h2>
@@ -36,24 +36,24 @@ export interface SwitchProps
  extends Omit<FormFieldProps, "error" | "errorId">,
    Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
  /**
-   * Switch-label
+   * Switch-label.
   */
  children: React.ReactNode;
  /**
-   * If enabled shows the label and description for screenreaders only
+   * If enabled shows the label and description for screenreaders only.
   */
  hideLabel?: boolean;
  /**
-   * Toggles loading state with loader-component on switch
+   * Toggles loading state with loader-component on switch.
   */
  loading?: boolean;
  /**
-   * Positions switch on left/right side of label
+   * Positions switch on left/right side of label.
   * @default "left"
   */
  position?: "left" | "right";
  /**
-   * Adds a description to extend labling of Switch
+   * Adds a description to extend labling of Switch.
   */
  description?: string;
 }
@@ -17,7 +17,8 @@ export interface TextareaProps
    React.TextareaHTMLAttributes<HTMLTextAreaElement> {
  /**
   * Allowed character-count for content
-   * @note This is just a visual indicator! You will need to handle actual character-limits/validation if needed
+   *
+   * This is just a visual indicator! You will still need to handle actual character-limits/validation if needed.
   */
  maxLength?: number;
  /**
@@ -37,15 +38,15 @@ export interface TextareaProps
   */
  minRows?: number;
  /**
-   * Textarea label
+   * Textarea label.
   */
  label: React.ReactNode;
  /**
-   * If enabled shows the label and description for screenreaders only
+   * If enabled shows the label and description for screenreaders only.
   */
  hideLabel?: boolean;
  /**
-   * Enables resizing of field
+   * Enables resizing of field.
   */
  resize?: boolean | "vertical" | "horizontal";
  /**
@@ -5,32 +5,34 @@ import { FieldsetContext } from "./fieldset/context";

 export interface FormFieldProps {
  /**
-   * Error message for element
+   * Adds a description to extend labling of the field.
+   * Error message for element.
   */
  error?: React.ReactNode;
  /**
-   * Override internal errorId
+   * Override internal errorId.
   */
  errorId?: string;
  /**
-   * Changes font-size, padding and gaps
+   * Changes font-size, padding and gaps.
   */
  size?: "medium" | "small";
  /**
-   * Disables element
-   * @note Avoid using if possible for accessibility purposes
+   * **Avoid using if possible for accessibility purposes**.
+   *
+   * Disables element.
   */
  disabled?: boolean;
  /**
-   * Adds a description to extend labling of a field
+   * Adds a description to extend labling of a field.
   */
  description?: React.ReactNode;
  /**
-   * Override internal id
+   * Override internal id.
   */
  id?: string;
  /**
-   * Read only-state
+   * Read-only state.
   */
  readOnly?: boolean;
 }
@@ -9,7 +9,11 @@ export type BleedSpacingBlock = "0" | "px" | SpacingScale;

 export interface BleedProps extends React.HTMLAttributes<HTMLDivElement> {
  /** **Negative** horizontal margin around children.
-   *  Accepts a spacing token or an object of spacing tokens for different breakpoints.
+   * Accepts a spacing token or an object of spacing tokens for different breakpoints.
+   *
+   * The `px` value is useful to nudge by just 1px.
+   * The `full` value is used to extend the margin to the full width of the parent.
+   *
   * @example
   * marginInline='4'
   * marginInline='4 5'
@@ -20,6 +24,10 @@ export interface BleedProps extends React.HTMLAttributes<HTMLDivElement> {
  >;
  /** **Negative** vertical margin around children.
   *  Accepts a spacing token or an object of spacing tokens for different breakpoints.
+   *
+   * The `px` value is useful to nudge by just 1px.
+   * This prop does **not** accept the `full` value.
+   *
   * @example
   * marginBlock='4'
   * marginBlock='4 5'
@@ -13,11 +13,11 @@ import {
 } from "../utilities/types";

 export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Background color. Accepts a color token. */
+  /** CSS `background-color` property. Accepts a color token. */
  background?: BackgroundToken;
-  /** Border color. Accepts a color token. */
+  /** CSS `border-color` property. Accepts a color token. */
  borderColor?: BorderColorToken;
-  /** Border radius. Accepts a radius token, or an object of radius tokens for different breakpoints.
+  /** CSS `border-radius` property. Accepts a radius token, or an object of radius tokens for different breakpoints.
   * @example
   * borderRadius='full'
   * borderRadius='0 full large small'
@@ -25,13 +25,13 @@ export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
   */
  borderRadius?: ResponsiveProp<SpaceDelimitedAttribute<BorderRadiiToken>>;
  /**
-   * Border-width. If this is not set there will be no border.
+   * CSS `border-width` property. If this is not set there will be no border.
   * @example
   * borderWidth='2'
   * borderWidth='1 2 3 4'
   */
  borderWidth?: SpaceDelimitedAttribute<"0" | "1" | "2" | "3" | "4" | "5">;
-  /** Spacing around children. Accepts a spacing token or an object of spacing tokens for different breakpoints.
+  /** Padding around children. Accepts a spacing token or an object of spacing tokens for different breakpoints.
   * @example
   * padding='4'
   * padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
@@ -6,13 +6,11 @@ import { ResponsiveProp, SpacingScale } from "../utilities/types";
 export interface HGridProps extends HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode;
  /**
-   * Number of columns to display. Can be a number, a string with a unit or tokens for spesific breakpoints.
+   * Number of columns to display. Can be a number, a string with a unit, or tokens for specific breakpoints.
   * Sets `grid-template-columns`, so `fr`, `minmax` etc. works.
   * @example
   * columns={{ sm: 1, md: 1, lg: "1fr auto", xl: "1fr auto"}}
-   * @example
   * columns={3}
-   * @example
   * columns="repeat(3, minmax(0, 1fr))"
   */
  columns?: ResponsiveProp<number | string>;
@@ -12,7 +12,7 @@ export interface PageProps extends React.HTMLAttributes<HTMLElement> {
  as?: "div" | "body";
  /**
   * Background color. Accepts a color token.
-   * @default bg-default
+   * @default "bg-default"
   */
  background?: keyof typeof bgColors.a | "surface-subtle";
  /**
@@ -25,7 +25,7 @@ export interface PageProps extends React.HTMLAttributes<HTMLElement> {
  footerPosition?: "belowFold";
  /**
   * Adds a standardised padding of 4rem between content and footer
-   * @default block-end
+   * @default "end"
   */
  contentBlockPadding?: "end" | "none";
 }
@@ -6,13 +6,11 @@ import { BreakpointsAlias } from "../utilities/types";
 export interface ResponsiveProps extends HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode;
  /**
-   * @example
-   * above='md'
+   * Will show/hide element above breakpoint (inclusive)
   */
  above?: Exclude<BreakpointsAlias, "xs">;
  /**
-   * @example
-   * below='md'
+   * Will show/hide element below breakpoint (inclusive)
   */
  below?: Exclude<BreakpointsAlias, "xs">;
  /**
@@ -7,7 +7,11 @@ import { ResponsiveProp, SpacingScale } from "../utilities/types";
 export interface StackProps extends HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode;
  /**
-   * Justify-content
+   * CSS `justify-content` property.
+   *
+   * @example
+   * justify='center'
+   * justify={{xs: 'start', sm: 'center', md: 'end', lg: 'space-around', xl: 'space-between'}}
   */
  justify?: ResponsiveProp<
    | "start"
@@ -18,22 +22,32 @@ export interface StackProps extends HTMLAttributes<HTMLDivElement> {
    | "space-evenly"
  >;
  /**
-   * Align-items
+   * CSS `align-items` property.
+   *
+   * @example
+   * align='center'
+   * align={{xs: 'start', sm: 'center', md: 'end', lg: 'baseline', xl: 'stretch'}}
   */
  align?: ResponsiveProp<"start" | "center" | "end" | "baseline" | "stretch">;
  /**
-   * flex-wrap
+   * Sets the CSS `flex-wrap` property.
   */
  wrap?: boolean;
  /**
+   * CSS `gap` property.
+   *
   * @example
   * gap='4'
   * gap={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
   */
  gap?: ResponsiveProp<SpacingScale>;
  /**
-   * flex-direction
+   * CSS `flex-direction` property.
   * @default "row"
+   *
+   * @example
+   * direction='row'
+   * direction={{xs: 'row', sm: 'column'}}
   */
  direction?: ResponsiveProp<"row" | "column">;
 }
@@ -1,15 +1,22 @@
+import { Meta } from "@storybook/react";
 import React from "react";
 import { PlusCircleFillIcon } from "@navikt/aksel-icons";
 import { Alert } from "../../alert";
 import { ConfirmationPanel } from "../../form/confirmation-panel";
+import { Box } from "../../layout/box";
+import { VStack } from "../../layout/stack";
 import { BodyLong } from "../../typography";
 import Link from "../Link";
 import { RandomIcon } from "./RandomIcon";

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

 const LinkWrapper = ({
  children = "Ex aliqua incididunt",
@@ -27,53 +34,38 @@ const LinkWrapper = ({
      variant={variant as "action" | "neutral" | "subtle"}
      inlineText={inlineText}
    >
-      {iconLeft && (
-        <>
-          <RandomIcon />{" "}
-        </>
-      )}
+      {iconLeft && <RandomIcon />}
      {children}
-      {iconRight && (
-        <>
-          {" "}
-          <RandomIcon />
-        </>
-      )}
+      {iconRight && <RandomIcon />}
    </Link>{" "}
  </>
 );

 export const Default = {
-  render: ({ icon, inline }) => {
+  render: ({ icon, inline, underline }) => {
    const LinkD = () => (
-      <>
-        {" "}
-        <Link href="#" underline={!inline} inlineText={inline}>
-          {icon && <PlusCircleFillIcon />}Ex aliqua incididunt
-          {icon && <PlusCircleFillIcon />}
-        </Link>{" "}
-      </>
+      <Link href="#" underline={underline} inlineText={inline}>
+        {icon && <PlusCircleFillIcon />}Ex aliqua incididunt
+        {icon && <PlusCircleFillIcon />}
+      </Link>
    );

    if (inline) {
      return (
-        <div
-          className="colgap"
-          style={{
-            width: "800px",
-            border: "1px solid black",
-            borderRadius: "8px",
-          }}
+        <Box
+          borderWidth="1"
+          borderRadius="large"
+          padding="4"
+          style={{ maxWidth: "800px" }}
        >
          <BodyLong>
-            Incididunt laborum nisi nisi Lorem
-            <LinkD />
-            in. Laborum aute fugiat officia adipisicing non veniam dolor nulla
-            non ex consectetur fugiat eiusmod aute. Culpa sit aute est duis
-            minim in in voluptate velit fugiat. Laboris est id deserunt ut ea
-            Lorem eu. Esse elit laboris aute commodo sint laborum fugiat aliqua.
+            Incididunt laborum nisi nisi Lorem <LinkD /> in. Laborum aute fugiat
+            officia adipisicing non veniam dolor nulla non ex consectetur fugiat
+            eiusmod aute. Culpa sit aute est duis minim in in voluptate velit
+            fugiat. Laboris est id deserunt ut ea Lorem eu. Esse elit laboris
+            aute commodo sint laborum fugiat aliqua.
          </BodyLong>
-        </div>
+        </Box>
      );
    }
    return <LinkD />;
@@ -82,22 +74,21 @@ export const Default = {
  args: {
    icon: false,
    inline: false,
+    underline: true,
  },
 };

 export const InlineInsideBodyLong = {
  render: ({ iconLeft, iconRight }) => {
    return (
-      <div
-        className="colgap"
-        style={{
-          width: "800px",
-          border: "1px solid black",
-          borderRadius: "8px",
-        }}
+      <Box
+        borderWidth="1"
+        borderRadius="large"
+        padding="4"
+        style={{ width: "800px" }}
      >
        <style>{`.storybook-custom-spacing { white-space: pre;}`}</style>
-        <BodyLong>
+        <BodyLong spacing>
          <LinkWrapper underline iconLeft={iconLeft} iconRight={iconRight} />
          Eiusmod aute.
          <LinkWrapper underline iconLeft={iconLeft} iconRight={iconRight} />
@@ -119,7 +110,7 @@ export const InlineInsideBodyLong = {
          </LinkWrapper>
          {"     "}spacing.
        </BodyLong>
-      </div>
+      </Box>
    );
  },
  args: {
@@ -128,86 +119,186 @@ export const InlineInsideBodyLong = {
  },
 };

-const DemoLink = () => (
+export const Varianter = {
+  render: ({ iconLeft, iconRight }) => {
+    return (
+      <VStack gap="3">
+        {["action", "neutral", "subtle"].map((variant) => (
+          <div key={variant}>
+            <LinkWrapper
+              iconLeft={iconLeft}
+              iconRight={iconRight}
+              variant={variant}
+            />
+          </div>
+        ))}
+      </VStack>
+    );
+  },
+  args: {
+    iconLeft: false,
+    iconRight: false,
+  },
+};
+
+const LinkWithIcon = () => (
  <Link href="#">
-    <PlusCircleFillIcon aria-hidden /> Ex aliqua incididunt{" "}
+    <PlusCircleFillIcon aria-hidden />
+    Ex aliqua incididunt
    <PlusCircleFillIcon aria-hidden />
  </Link>
 );

-export const Icon = () => <DemoLink />;
+export const Icon = () => <LinkWithIcon />;

-export const InAlert = () => {
-  return (
-    <div className="colgap">
-      <Alert variant="info">
-        <DemoLink />
-      </Alert>
-      <Alert variant="success">
-        <DemoLink />
-      </Alert>
-      <Alert variant="warning">
-        <DemoLink />
-      </Alert>
-      <Alert variant="error">
-        <DemoLink />
-      </Alert>
-    </div>
-  );
-};
-
-export const InConfirmationPanel = () => {
-  return (
-    <div className="colgap">
-      <ConfirmationPanel label="demo">
-        <DemoLink />
-      </ConfirmationPanel>
-      <ConfirmationPanel checked label="demo">
-        <DemoLink />
-      </ConfirmationPanel>
-      <ConfirmationPanel error="demo" label="demo">
-        <DemoLink />
-      </ConfirmationPanel>
-    </div>
-  );
-};
-
-export const Variants = {
-  render: ({ iconLeft, iconRight }) => {
-    return (
-      <div className="colgap">
-        {["action", "neutral", "subtle"].map((variant) => (
-          <>
-            <div>
-              <LinkWrapper
-                iconLeft={iconLeft}
-                iconRight={iconRight}
-                variant={variant}
-              />
-            </div>
-          </>
-        ))}
+const Variants = () => (
+  <VStack gap="3">
+    {["action", "neutral", "subtle"].map((variant) => (
+      <div key={variant}>
+        <LinkWrapper variant={variant} />
      </div>
-    );
-  },
-  args: {
-    iconLeft: false,
-    iconRight: false,
-  },
-};
+    ))}
+  </VStack>
+);

-export const InlineLink = {
-  render: () => (
-    <BodyLong>
-      Officia incididunt Culpa sit aute est duis minim in in voluptate velit
-      Incididunt laborum nisi nisi Lorem officia adipisicing non veniam{" "}
-      <Link href="#" inlineText={true}>
-        lenke til ny side
+export const Chromatic = () => (
+  <>
+    <h2>Default</h2>
+    <Link href="#">Ex aliqua incididunt</Link>
+
+    <h2>With icon</h2>
+    <LinkWithIcon />
+
+    <h2>Variants (no underline)</h2>
+    <Variants />
+
+    <h2>Inline</h2>
+    <BodyLong style={{ width: 500 }}>
+      Culpa sit aute est duis minim in in voluptate{" "}
+      <Link href="#" inlineText>
+        dette er en veldig lang lenke som brekker over flere linjer
        <PlusCircleFillIcon aria-hidden />
      </Link>{" "}
      Culpa sit aute est duis minim in in voluptate velit Incididunt laborum
-      nisi nisi Lorem officia adipisicing non veniam occaecat commodo id ad
-      aliquip.
+      nisi nisi{" "}
+      <Link href="#" inlineText>
+        dette er en veldig lang lenke som brekker over flere linjer
+      </Link>{" "}
+      Lorem officia adipisicing non veniam occaecat commodo id ad aliquip.
    </BodyLong>
-  ),
+
+    <h2>In Alert</h2>
+    <div className="colgap">
+      <Alert variant="info">
+        <LinkWithIcon />
+      </Alert>
+      <Alert variant="success">
+        <LinkWithIcon />
+      </Alert>
+      <Alert variant="warning">
+        <LinkWithIcon />
+      </Alert>
+      <Alert variant="error">
+        <LinkWithIcon />
+      </Alert>
+    </div>
+
+    <h2>In ConfirmationPanel</h2>
+    <div className="colgap">
+      <ConfirmationPanel label="demo">
+        <LinkWithIcon />
+      </ConfirmationPanel>
+      <ConfirmationPanel checked label="demo">
+        <LinkWithIcon />
+      </ConfirmationPanel>
+      <ConfirmationPanel error="demo" label="demo">
+        <LinkWithIcon />
+      </ConfirmationPanel>
+    </div>
+  </>
+);
+Chromatic.parameters = { chromatic: { disable: false } };
+
+export const ChromaticHover = () => (
+  <>
+    <h2>With icon</h2>
+    <LinkWithIcon />
+
+    <h2>Variants (no underline)</h2>
+    <Variants />
+
+    <h2>In Alert</h2>
+    <div className="colgap">
+      <Alert variant="info">
+        <LinkWithIcon />
+      </Alert>
+    </div>
+
+    <h2>In ConfirmationPanel</h2>
+    <div className="colgap">
+      <ConfirmationPanel checked label="demo">
+        <LinkWithIcon />
+      </ConfirmationPanel>
+    </div>
+  </>
+);
+ChromaticHover.parameters = {
+  chromatic: { disable: false },
+  pseudo: { hover: true },
+};
+
+export const ChromaticFocusVisible = () => (
+  <>
+    <h2>With icon</h2>
+    <LinkWithIcon />
+
+    <h2>Variants (no underline)</h2>
+    <Variants />
+
+    <h2>In Alert</h2>
+    <div className="colgap">
+      <Alert variant="info">
+        <LinkWithIcon />
+      </Alert>
+    </div>
+
+    <h2>In ConfirmationPanel</h2>
+    <div className="colgap">
+      <ConfirmationPanel checked label="demo">
+        <LinkWithIcon />
+      </ConfirmationPanel>
+    </div>
+  </>
+);
+ChromaticFocusVisible.parameters = {
+  chromatic: { disable: false },
+  pseudo: { focusVisible: true },
+};
+
+export const ChromaticActive = () => (
+  <>
+    <h2>With icon</h2>
+    <LinkWithIcon />
+
+    <h2>Variants (no underline)</h2>
+    <Variants />
+
+    <h2>In Alert</h2>
+    <div className="colgap">
+      <Alert variant="info">
+        <LinkWithIcon />
+      </Alert>
+    </div>
+
+    <h2>In ConfirmationPanel</h2>
+    <div className="colgap">
+      <ConfirmationPanel checked label="demo">
+        <LinkWithIcon />
+      </ConfirmationPanel>
+    </div>
+  </>
+);
+ChromaticActive.parameters = {
+  chromatic: { disable: false },
+  pseudo: { active: true },
 };
@@ -20,7 +20,7 @@ export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
  headingTag?: React.ElementType<any>;
  /**
   * Changes padding, height and font-size
-   * @default medium
+   * @default "medium"
   */
  size?: "medium" | "small";
 }
@@ -35,6 +35,7 @@ export interface LoaderProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
  /**
   * Allows getting a ref to the component instance.
   * Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
+   *
   * @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
   */
  ref?: React.Ref<SVGSVGElement>;
@@ -12,7 +12,12 @@ import { ModalContextProvider, useModalContext } from "./Modal.context";
 import ModalBody from "./ModalBody";
 import ModalFooter from "./ModalFooter";
 import ModalHeader from "./ModalHeader";
-import { getCloseHandler, useBodyScrollLock } from "./ModalUtils";
+import {
+  MouseCoordinates,
+  coordsAreInside,
+  getCloseHandler,
+  useBodyScrollLock,
+} from "./ModalUtils";
 import dialogPolyfill, { needPolyfill } from "./dialog-polyfill";
 import { ModalProps } from "./types";

@@ -86,6 +91,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
      "aria-labelledby": ariaLabelledby,
      style,
      onClick,
+      onMouseDown,
      ...rest
    }: ModalProps,
    ref,
@@ -146,22 +152,46 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
      ...(!isWidthPreset ? { width } : {}),
    };

+    const mouseClickStart = useRef<MouseCoordinates>({
+      clientX: 0,
+      clientY: 0,
+    });
+    const handleModalMouseDown: React.MouseEventHandler<HTMLDialogElement> = (
+      event,
+    ) => {
+      mouseClickStart.current = event;
+    };
+
+    const shouldHandleModalClick = closeOnBackdropClick && !needPolyfill;
+
    /**
-     * @note `closeOnBackdropClick` has issues on polyfill when nesting modals (DatePicker)
+     * `closeOnBackdropClick` has issues on polyfill when nesting modals (DatePicker)
     */
-    const handleModalClick = (event: React.MouseEvent<HTMLDialogElement>) => {
-      if (
-        closeOnBackdropClick &&
-        !needPolyfill &&
-        event.target === modalRef.current &&
-        (!onBeforeClose || onBeforeClose() !== false)
-      ) {
-        modalRef.current.close();
+    const handleModalClick = (
+      endEvent: React.MouseEvent<HTMLDialogElement>,
+    ) => {
+      if (endEvent.target !== modalRef.current) {
+        return;
      }
+
+      const modalRect = modalRef.current.getBoundingClientRect();
+
+      if (
+        coordsAreInside(mouseClickStart.current, modalRect) ||
+        coordsAreInside(endEvent, modalRect)
+      ) {
+        return;
+      }
+
+      if (onBeforeClose !== undefined && onBeforeClose() === false) {
+        return;
+      }
+
+      modalRef.current.close();
    };

    /**
-     * @note onCancel fires when you press `Esc`
+     * onCancel fires when you press `Esc`
     */
    const handleModalCancel = (
      event: React.SyntheticEvent<HTMLDialogElement, Event>,
@@ -182,7 +212,16 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
        className={mergedClassName}
        style={mergedStyle}
        onCancel={composeEventHandlers(onCancel, handleModalCancel)}
-        onClick={composeEventHandlers(onClick, handleModalClick)}
+        onClick={
+          shouldHandleModalClick
+            ? composeEventHandlers(onClick, handleModalClick)
+            : onClick
+        }
+        onMouseDown={
+          shouldHandleModalClick
+            ? composeEventHandlers(onMouseDown, handleModalMouseDown)
+            : onMouseDown
+        }
        aria-labelledby={mergedAriaLabelledBy}
      >
        <ModalContextProvider
@@ -26,7 +26,7 @@ const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(
            size="small"
            variant="tertiary-neutral"
            onClick={context.closeHandler}
-            icon={<XMarkIcon title="Lukk modalvindu" />}
+            icon={<XMarkIcon title="Lukk" />}
          />
        )}
        {children}
@@ -1,6 +1,20 @@
 import React from "react";
 import type { ModalProps } from "./types";

+export interface MouseCoordinates {
+  clientX: number;
+  clientY: number;
+}
+
+export const coordsAreInside = (
+  { clientX, clientY }: MouseCoordinates,
+  { left, top, right, bottom }: DOMRect,
+) => {
+  if (clientX < left || clientY < top) return false;
+  if (clientX > right || clientY > bottom) return false;
+  return true;
+};
+
 export function getCloseHandler(
  modalRef: React.RefObject<HTMLDialogElement>,
  header: ModalProps["header"],
@@ -1,25 +1,24 @@
 interface ModalPropsBase extends React.DialogHTMLAttributes<HTMLDialogElement> {
  /**
-   * Content for the header. Alteratively you can use <Modal.Header> instead for more control,
-   * but then you have to set `aria-label` or `aria-labelledby` on the modal manually.
+   * Content for the header. Alteratively you can use `<Modal.Header>` instead for more control, but then you have to set `aria-label` or `aria-labelledby` on the modal manually.
   */
  header?: {
    label?: string;
    icon?: React.ReactNode;
    heading: string;
    /**
-     * Heading size
+     * Heading size.
     * @default "medium"
     * */
    size?: "medium" | "small";
    /**
-     * Removes close-button (X) when false
+     * Removes close-button (X) when false.
     * @default true
     */
    closeButton?: boolean;
  };
  /**
-   * Modal content
+   * Modal content.
   */
  children: React.ReactNode;
  /**
@@ -36,12 +35,13 @@ interface ModalPropsBase extends React.DialogHTMLAttributes<HTMLDialogElement> {
   * Called when the user tries to close the modal by one of the built-in methods.
   * Used if you want to ask the user for confirmation before closing.
   * @warning Will not always be called when pressing Esc. See `onCancel` for more info.
-   * @returns Whether to close the modal
+   * @returns Whether to close the modal or not
   */
  onBeforeClose?: () => boolean;
  /**
-   * *Sometimes** called when the user presses the Esc key.
-   * @warning *Some browsers does not always trigger this event. Chrome only triggers it if you have
+   * _Sometimes*_ called when the user presses the Esc key.
+   *
+   *  *: Some browsers does not always trigger this event. Chrome only triggers it if you have
   *  interacted with the modal, and will not trigger it a second time if you press Esc twice in a row.
   */
  onCancel?: React.ReactEventHandler<HTMLDialogElement>;
@@ -9,8 +9,9 @@ import PaginationItem, {

 export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
  /**
-   * Current page
-   * @note Pagination indexing starts at 1
+   * Current page.
+   *
+   * Pagination indexing starts at 1.
   */
  page: number;
  /**
@@ -16,7 +16,7 @@ export interface PaginationItemProps extends ButtonProps {
  page: number;
  /**
   * Changes padding, height and font-size
-   * @default medium
+   * @default "medium"
   */
  size?: "medium" | "small" | "xsmall";
 }
@@ -42,7 +42,8 @@ export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
  onClose: () => void;
  /**
   * Default orientation of popover
-   * @note Try to keep general usage to "top", "bottom", "left", "right"
+   *
+   * Try to keep general usage to "top", "bottom", "left", "right".
   * @default "top"
   */
  placement?:
@@ -8,20 +8,20 @@ import { useControllableState } from "../util/hooks/useControllableState";
 export interface ReadMoreProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  /**
-   * Content inside ReadMore
+   * Content inside ReadMore.
   */
  children: React.ReactNode;
  /**
-   * ReadMore header content
+   * ReadMore header content.
   */
  header: React.ReactNode;
  /**
-   * Opens component if 'true', closes if 'false'
-   * Using this prop removes automatic control of open-state
+   * Opens component if `true`, closes if `false`.
+   * Using this prop removes automatic control of open-state.
   */
  open?: boolean;
  /**
-   * Initially open
+   * Initially open.
   * @default false
   */
  defaultOpen?: boolean;
@@ -30,8 +30,8 @@ export interface ReadMoreProps
   */
  onOpenChange?: (open: boolean) => void;
  /**
-   * Changes fontsize for content
-   * @default medium
+   * Changes fontsize for content.
+   * @default "medium"
   */
  size?: "medium" | "small";
 }
@@ -8,21 +8,21 @@ import { StepperContext } from "./context";
 export interface StepperStepProps
  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
  /**
-   * Text content by indicator
+   * Text content by indicator.
   */
  children: string;
  /**
-   * Handled by Stepper, overwriting may break component logic
+   * Handled by Stepper, overwriting may break component logic.
   * @private
   */
  unsafe_index?: number;
  /**
-   * Makes step-indicator a checkmark
+   * Makes step-indicator a checkmark.
   * @default false
   */
  completed?: boolean;
  /**
-   * Makes step non-interactive if false. Step will be set to a <div>, overriding `as`-prop
+   * Makes step non-interactive if false. Step will be set to a `<div>`, overriding `as`-prop.
   * @default true
   */
  interactive?: boolean;
Author	SHA1	Message	Date
github-actions[bot]github-actions[bot]Ken	6ac605dd48	Version Packages (#2775 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>	2024-03-14 16:15:40 +01:00
Ken	d293d44b30	Fikset CDN deploy av Aksel og designsystem assets (#2789 ) * 🐛 Oppdatert assetprefix * 🐛 Fikset cdn asset upload	2024-03-14 16:05:09 +01:00
Julian Nymark	5754a08f6c	👷 update workflow for prod (new NAV CDN)	2024-03-14 14:20:08 +01:00
Julian Nymark	924c63324c	👷 swap team `aksel` for team `designsystem` (used elsewhere within NAIS)	2024-03-14 14:11:20 +01:00
Julian Nymark	b78b818fea	👷 update workflow (new NAV CDN)	2024-03-14 14:00:44 +01:00
Ken	dc5ea3b842	[Ikoner] Nytt ikon OpenSource (#2787 ) * 🎉 Oppdatert ikonpakke * 📝 changeset	2024-03-13 18:59:41 +01:00
Halvor Haugan	bd315a239b	[aksel.nav.no] Fiks link til token-guide (#2786 )	2024-03-13 15:53:59 +01:00
Julian NymarkandKen <ken.aleksander@gmail.com>, Halvor	4469c641ed	💄 pretty up the props box on aksel.nav.no + typos (#2729 ) * 💄 pretty up the props box on aksel.nav.no + typos - also update some props docs here & there * ♻️ pull out component, lazy() it * 🔥 remove testing css * 🎨 add fallback with <Suspense> * 💬 correct @default strings * 💄 spacing in Props table * 🔥 @note is not a real JSDoc tag * ✨ docgen extracts example, render fancy example box * ✨ pretty @return and @params * 💄 improve table layout / CSS * 💄 + update CopyButton & Combobox jsdoc. * 📝 update jsdoc * 🎨 Oppdatert layout og visning av prop-table * 🎨 use more semantic html, better nested <dl> * ♿ add h4 to prop items * 👷 use production sanity data * ♿ revert nested <dl> so Axe tests pass * 🏷️ correct some types for tsc to pass * ♿ change from div -> ul * 👷 commit lockfile * 💄 make ul bottom rounded and align type with it\'s code block * ♿ set language tag for props written in english * 🏷️ type improvements for props section * 🙈 update .gitignore * 📝 jsdoc update * 💄 props section * ♻️ rename and less indentation (continues > ifs) * 💄 style changes for Prop section - breakpoint fail fix - breakpoint col / row flex for prop fields - padding tweaks * 📝 update example jsdoc --------- Co-authored-by: Ken <ken.aleksander@gmail.com>, Halvor <halvor.haugan@nav.no>	2024-03-12 13:59:35 +01:00
Halvor Haugan	b15218e1cb	Oppdatering av eksempler på Textarea (#2784 )	2024-03-12 09:11:18 +01:00
Ken	73a69f7048	🎉 Fikset search-bug der for god score fjernet resultat (#2783 )	2024-03-11 12:48:02 +01:00
Halvor Haugan	7dcd58ff76	Select: Justert eksempler, JSDOC og stories (#2782 )	2024-03-11 11:04:49 +01:00
Halvor Haugan	2f3c99f5f6	Justering av eksempel på Table med TextField (#2780 )	2024-03-08 09:35:00 +01:00
KenandJulian Nymark	8835291a78	[Aksel.nav.no] Auth på Aksel (#2757 ) * 🎉 Satt opp boilerplate for auth på Aksel * 🎉 Auth boilerplate * 🎨 Demo-setup for å teste auth i dev * 🚚 Flyttet auth til getserversideprops * 🔥 Fjernet authprovider fra _app * 🐛 revalidate er ikke valid key for getserversideprops i nextjs * 🚚 rename auth-dir * 🔥 Fjernet auth types * 🎉 Auth for api * 🎨 Oppdatert workflows med token * 🔥 Fjernet testing av auth på god-praksis sider * 🎨 La til sidecar på prod-deploy * 🐛 only return boolean in Promise<boolean> * ⬆️ Migrert til @navikt/oasis * 🏷️ Satt typer til strict for å kjøre tester * ⬆️ Yarn lock --------- Co-authored-by: Julian Nymark <julian.nymark@nav.no>	2024-03-06 11:53:30 +01:00
Halvor Haugan	2971129d1f	Oppgrader eslint-plugin-storybook (#2777 )	2024-03-05 16:34:36 +01:00
Ken	9915cf8232	🔥 Fjernet muligheten til å sette seg som anonym i sanity Nye forfattere blir anbefalt å bruke et alias eller bare fornavn hvis man ønsker. Ingen er satt som anonym i dag, slik at dette ikke vil påvirke noen forfattere	2024-03-05 14:34:20 +01:00
Halvor Haugan	fa00774b0d	Forberedelse for Storybook 8 (#2776 )	2024-03-05 14:33:58 +01:00
Ken	966de79621	[aksel.nav.no] Migrert editor-felt til variant med email (#2760 ) * 🎨 Satt opp migrering for editorsider * 🎨 Oppdatert initialvalues for mail og oppretting av nye artikler * 📝 Description på email-field * Update aksel.nav.no/website/sanity/schema/documents/editors.tsx * Update aksel.nav.no/website/sanity/schema/documents/editors.tsx * Update aksel.nav.no/website/sanity/schema/documents/editors.tsx * 🎨 Bedre validering av nav-mail i sanity * 🐛 Feilet etter ts oppdatering	2024-03-05 13:35:48 +01:00
KenandHalvor Haugan	0ce2300f92	[aksel.nav.no] Satt strict -> true i tsconfig (#2766 ) * 🏷️ sanity-video typer * 🏷️ Typer storybook * 🏷️ Typer usecheckauth * 🏷️ Typer formateddate * 🏷️ Typer useSanityDate * 🏷️ Typer footerlink * 🏷️ Typer ny gp * 🏷️ Typer layout * 🏷️ Typer logging * 🏷️ Typer logging av href * 🏷️ Typer codeexamples * 🏷️ Typer sanity-modules * 🏷️ Typer for alle sanity-modules * 🏷️ Typer resolvers * 🏷️ Typer serach * 🏷️ Typer search * 🏷️ Typer useToc * 🏷️ Typer _app * 🏷️ Typer pages * 🔥 Fjernet buildlogs fra tsc * ⬇️ Reversert til gammel logging av lenker * Update aksel.nav.no/website/pages/eksempler/timeline-intern/aria-controls.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * 🏷️ Bruker satisifies for array-type sjekk * 🏷️ Forenklet typer --------- Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>	2024-03-05 11:46:10 +01:00
Halvor Haugan	08e9876176	Sandbox: Alltid bruk siste versjon av DS-pakkene (#2774 )	2024-03-04 14:10:36 +01:00
Ken	331b4c4c00	🎉 Nytt ikon archive@ (#2772 )	2024-03-04 14:10:04 +01:00
Halvor Haugan	2b6e9c8798	Oppdater stories for Link (#2770 )	2024-03-01 20:00:18 +01:00
Ken	4065ee3987	💄 UXTweaks-hero på forside bruker Amber-farger Designer ønsket å gjøre hero mer tydelig da dagens 'violet' forsvant mellom elementene	2024-02-29 19:33:30 +01:00
github-actions[bot]andgithub-actions[bot]	59756f32f7	Version Packages (#2764 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-02-29 12:21:22 +01:00
Halvor Haugan	9510327abe	Link: Fjern hover-farge (#2767 )	2024-02-28 15:18:25 +01:00
Christian Skrøvseth	356119e074	Modal: Fiks lukking ved slipp av museknapp på backdrop (#2752 )	2024-02-27 15:02:02 +01:00
Halvor Haugan	3d2eab4fda	Modal: fiks fokus bug i Safari + endre title på lukkeknappen (#2688 )	2024-02-27 09:48:26 +01:00
Halvor Haugan	299c5f1db4	[aksel.nav.no] 🔨 Bytt ut cp med copyfiles (#2753 )	2024-02-26 13:28:46 +01:00
Halvor Haugan	6267d0c7fb	[aksel.nav.no] 🆙 Oppgradert start-server-and-test (#2759 )	2024-02-26 13:26:59 +01:00
Halvor Haugan	44ba2ef7e8	[aksel.nav.no] 🚨 Ikke tillat @ts-ignore (#2758 )	2024-02-26 13:07:30 +01:00
Ken	002f6a1b9e	[Sanity] Oppdatert sanity minor (#2733 ) * 🎉 Oppdatert sanity * 🐛 Oppdatert import av deprecated desktool i sanity * ⬆️ yarn sync * 🐛 IntentButton var oppdatert i ny sanity-versjon	2024-02-26 10:43:00 +01:00
Halvor Haugan	124c28eb0e	Oppdatering av eksempler på TextField (#2754 )	2024-02-26 10:05:46 +01:00
Halvor Haugan	ae7d4d5f07	Oppgradering av deps (#2756 )	2024-02-26 09:07:11 +01:00