Version Packages (#2084)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.changeset/config.json

@@ -1,6 +1,9 @@
 {
   "$schema": "https://unpkg.com/@changesets/config@2.2.0/schema.json",
-  "changelog": ["@changesets/changelog-github", { "repo": "navikt/aksel" }],
+  "changelog": [
+    "@svitejs/changesets-changelog-github-compact",
+    { "repo": "navikt/aksel" }
+  ],
   "commit": false,
   "fixed": [
     [

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,17 +1,44 @@
-### :memo: PR Checklist
+### Description
 
-<!-- Remove non-relevant fields -->
+<!-- PR description/motivation
+add links to project-tasks, slack discussions etc here
+-->
 
-- [ ] :sparkles: New component? Add CSS-mappings to `@navikt/core/css/config/_mappings.js`.
+### Change summary
 
-- [ ] :wastebasket: Are you deprecating a CSS class? (are you removing the last known reference to a CSS class?). Add it to `@navikt/aksel-stylelint/src/deprecations.ts` with a suitable description.
+<!-- Short summary of changes in PR
+- added variant x
+- fixed bug in y
+-->
 
-- [ ] :balance_scale: Is the feature/component/code sufficiently complex to warrant tests? Add some unit-tests :test_tube:
+### PR Checklist 📝 (Remove fields after check!)
 
-- [ ] :balance_scale: Does the feature/component add some complex user-interactions? Consider adding some [interaction-tests with storybook](https://storybook.js.org/docs/react/writing-tests/interaction-testing) :test_tube:
+#### New component? ✨
 
-- [ ] :boom: Are there breaking changes? Consider adding a codemod for easier migration.
+- Check that component-styling is correctly configured in `@navikt/core/css/config/_mappings.js`. This is needed for correct build and CDN upload.
+- Check that styling is correctly exported from `@navikt/core/css/index.css`
+- Check that correct tokens for component is documented in `@navikt/core/css/tokens.json`
+- Check that only needed components and types are exported from `@navikt/core/react/src/index.ts`
+- Add JSDoc to component (see other components for reference)
+- Create storybook-stories for relevant component variations and compositions. Stories are used for [visual regression testing](https://www.chromatic.com/docs/), so make sure they are complete.
+- Is the component sufficiently complex to warrant tests? Add some unit-tests for jest.
 
-- [ ] :test_tube: Are all variations and cases shown in the storybook stories? Stories are used for [visual regression testing](https://www.chromatic.com/docs/), so make sure they are complete.
+#### Component-updates 🎉
 
-- [ ] Run `yarn changeset` for version and changelog generation
+- Revalidate if everything under `New component` is still accounted for
+- Deprecating/removing a CSS class? Add it to `@navikt/aksel-stylelint/src/deprecations.ts` with a suitable description. This helps stylelint-users keep their code clean and bug-free.
+
+#### Documentation 📝
+
+- Add/update component-demos for component `aksel.nav.no/website/pages/eksempler`
+- Create/Update documentation in sanity if needed
+  Note: Props, tokens and examples only updates to sanity on merge to main
+
+#### Versioning 🏷️
+
+- Run `yarn changeset` to generate a version-entry for change.
+- - Bug/hotfix: Patch
+- - New feature: Minor
+- - Breaking change: Major
+- Adding breaking changes? Consider adding a codemod for easier migration.
+- Breaking changes also needs documentation under "Migration"-page on website

.github/workflows/e2e.yml

@@ -13,7 +13,7 @@ jobs:
   playwright:
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.33.0-focal
+      image: mcr.microsoft.com/playwright:v1.35.1-jammy
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3

.github/workflows/release.yml

@@ -28,6 +28,10 @@ jobs:
           node-version: 16.13.0
           cache: yarn
 
+      - uses: denoland/setup-deno@v1
+        with:
+          deno-version: v1.x
+
       - name: Restore cache
         uses: actions/cache@v3
         with:

.github/workflows/smoketest.yml

@@ -14,7 +14,7 @@ jobs:
     name: Smoketest Aksel
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.33.0-focal
+      image: mcr.microsoft.com/playwright:v1.35.1-jammy
     steps:
       - uses: actions/setup-node@v3
         with:

.gitignore

@@ -150,4 +150,5 @@ playwright-report/
 /test-results/
 backup-*.tar.gz
 sitemap-urls.json
-*.tar.gz
+*.tar.gz
+searchindex.json

@navikt/aksel-icons/CHANGELOG.md

@@ -1,227 +1,91 @@
 # @navikt/aksel-icons
 
+## 4.5.0
+
+## 4.4.2
+
+## 4.4.1
+
 ## 4.1.5
 
 ### Patch Changes
 
-- [#2054](https://github.com/navikt/aksel/pull/2054) [`8f16d1571`](https://github.com/navikt/aksel/commit/8f16d1571ec7cf452c09618a9a918ee2a634c75a) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: Nye ikoner
-
-  - ChevronRightLast
-  - ChevronLeftLast
-
-## 4.1.4
-
-## 4.1.3
-
-## 4.1.2
-
-## 4.1.1
-
-## 4.1.0
-
-## 4.0.0
-
-## 3.4.2
-
-## 3.4.1
-
-## 3.4.0
-
-## 3.3.1
-
-## 3.3.0
-
-## 3.2.4
+- Nye ikoner `ChevronRightLast` og `ChevronLeftLast` ([PR](https://github.com/navikt/aksel/pull/2054))
 
 ## 3.2.3
 
 ### Patch Changes
 
-- [#1998](https://github.com/navikt/aksel/pull/1998) [`53c98181c`](https://github.com/navikt/aksel/commit/53c98181c327ead3406bec3487c10232af7d463a) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: Nye ikoner!
-
-  - :sparkles: FileParagraph
-  - :sparkles: FilePlus
-
-## 3.2.2
-
-## 3.2.1
-
-## 3.2.0
-
-## 3.1.3
-
-## 3.1.2
-
-## 3.1.1
-
-## 3.1.0
-
-## 3.0.1
-
-## 3.0.0
+- Nye ikoner `FileParagraph` og `FilePlus` ([PR](https://github.com/navikt/aksel/pull/1998))
 
 ## 2.9.8
 
 ### Patch Changes
 
-- [#1959](https://github.com/navikt/aksel/pull/1959) [`8790c5997`](https://github.com/navikt/aksel/commit/8790c5997e0d647419bdb5080c86781d08c196b8) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :lipstick: Statusikoner er nå tydeligere og mer konsistente.
+- Oppdatert Statusikoner til å være tydeligere og mer konsistente. ([PR](https://github.com/navikt/aksel/pull/1959))
 
 ## 2.9.7
 
 ### Patch Changes
 
-- :bug: CheckmarkIcon
+- Fikset `CheckmarkIcon`-bug
 
 ## 2.9.6
 
 ### Patch Changes
 
-- [#1956](https://github.com/navikt/aksel/pull/1956) [`8c8559009`](https://github.com/navikt/aksel/commit/8c8559009982911bc4402913656ba4cc6a223dd1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Fikset CheckmarkCircleIcon
-
-## 2.9.5
-
-## 2.9.4
+- Fikset `CheckmarkCircleIcon`-bug ([PR](https://github.com/navikt/aksel/pull/1956))
 
 ## 2.9.3
 
 ### Patch Changes
 
-- [#1950](https://github.com/navikt/aksel/pull/1950) [`c03d53d5a`](https://github.com/navikt/aksel/commit/c03d53d5aa2dc7f06a223d48069fa21ee39bb396) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Nye ikoner
-
-  - :tada: BulletList
-  - :tada: NumberList
-
-## 2.9.2
-
-## 2.9.1
-
-## 2.9.0
-
-## 2.8.16
+- Nye ikoner `BulletList` og `NumberList` ([PR](https://github.com/navikt/aksel/pull/1950))
 
 ## 2.8.15
 
 ### Patch Changes
 
-- [#1928](https://github.com/navikt/aksel/pull/1928) [`dfe923582`](https://github.com/navikt/aksel/commit/dfe923582a57b41c77cfb4fbfa7c56be047ef2b0) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: Lagt til nye ikoner :tada:
-
-  - HandKnot.svg
-  - HandKnotFilled.svg
-
-- [#1930](https://github.com/navikt/aksel/pull/1930) [`6682be1c8`](https://github.com/navikt/aksel/commit/6682be1c8e6562213c64e5be4bed70fef54ab865) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Alle pakker implementerer nå npm provenance (beta)
-
-## 2.8.14
+- :tada: Nye ikoner `HandKnot` og `HandKnotFilled` ([PR](https://github.com/navikt/aksel/pull/1928))
 
 ## 2.8.13
 
 ### Patch Changes
 
-- [#1921](https://github.com/navikt/aksel/pull/1921) [`ecd6241e5`](https://github.com/navikt/aksel/commit/ecd6241e5751519fbda800a5f41a613957dbf77c) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Oppdatert ikoner :tada:
-
-## 2.8.12
+- Oppdatert `InformationSquare`-ikon ([PR](https://github.com/navikt/aksel/pull/1921))
 
 ## 2.8.11
 
 ### Patch Changes
 
-- [#1909](https://github.com/navikt/aksel/pull/1909) [`270427910`](https://github.com/navikt/aksel/commit/2704279107a5fbf93048de37d014e78f6721438f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Oppdatert ikoner
-
-## 2.8.10
-
-## 2.8.9
+- Oppdatert `VideoSlack`, `Questionmark` og `Information`-ikoner ([PR](https://github.com/navikt/aksel/pull/1909))
 
 ## 2.8.8
 
 ### Patch Changes
 
-- [`ed8e28454`](https://github.com/navikt/aksel/commit/ed8e284540a9e3a5be7d1d5e393f31db86962613) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Nye ikoner
-
-  - :tada: VideoSlash
-  - :tada: VideoSlashFill
-
-## 2.8.7
-
-## 2.8.6
-
-## 2.8.5
+- Nye ikoner `VideoSlash` og `VideoSlashFill`
 
 ## 2.8.4
 
 ### Patch Changes
 
-- Fikset Sourcemap-bug i Aksel-icons
-
-## 2.8.3
-
-## 2.8.2
-
-## 2.8.1
-
-## 2.8.0
-
-## 2.7.8
+- Fikset Sourcemap-bug
 
 ## 2.7.7
 
 ### Patch Changes
 
-- [`a22ac3eb7`](https://github.com/navikt/aksel/commit/a22ac3eb78135bf93d4771802475396849809c03) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :Sparkles: Nye ikoner
-
-  - :tada: CaretUpDownFilledDown
-  - :tada: CaretUpDownFilledUp
-  - :tada: CloudDown
-  - :tada: CloudDownFill
-  - :tada: CloudUp
-  - :tada: CloudUpFill
-  - :tada: HddDown
-  - :tada: HddDownFill
-  - :tada: HddUp
-  - :tada: HddUpFill
-  - :tada: Inbox
-  - :tada: InboxDown
-  - :tada: InboxDownFill
-  - :tada: InboxFill
-  - :tada: InboxUp
-  - :tada: InboxUpFill
-  - :tada: ShoppingBasket
-  - :tada: ShoppingBasketFill
-
-## 2.7.6
-
-## 2.7.5
+- Nye ikoner `CaretUpDownFilledDown`, `CaretUpDownFilledUp`, `CloudDown`, `CloudDownFill`, `CloudUp`, `CloudUpFill`, `HddDown`, `HddDownFill`, `HddUp`, `HddUpFill`, `Inbox`, `InboxDown`, `InboxDownFill`, `InboxFill`, `InboxUp`, `InboxUpFill`, `ShoppingBasket`, `ShoppingBasketFill`
 
 ## 2.7.4
 
 ### Patch Changes
 
-- [#1852](https://github.com/navikt/aksel/pull/1852) [`a4fd1dd22`](https://github.com/navikt/aksel/commit/a4fd1dd227b9b56b747f962aa0c2b2dc9b4e30a4) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Oppdatert ikonpakke med nye ikoner :rocket:
-
-  - :tada: CaretDownFill
-  - :tada: CaretLeft
-  - :tada: CaretLeftFill
-  - :tada: CaretLeftRight
-  - :tada: CaretLeftRightFill
-  - :tada: CaretRight
-  - :tada: CaretRightFill
-  - :tada: CaretUpDownFill
-  - :tada: CaretUpFill
-  - :tada: Escalator
-  - :tada: Moon
-  - :tada: MoonFill
-  - :fire: EscalatorStroke
-
-## 2.7.3
-
-## 2.7.2
-
-## 2.7.1
-
-### Patch Changes
-
-- [`7d9517cf9`](https://github.com/navikt/aksel/commit/7d9517cf90331b57441a0787a04eef66efd1b9b0) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Public-access for ny ikonpakke i GPR
+- Nye ikoner, `CaretDownFill`, `CaretLeft`, `CaretLeftFill`, `CaretLeftRight`, `CaretLeftRightFill`, `CaretRight`, `CaretRightFill`, `CaretUpDownFill`, `CaretUpFill`, `Escalator`, `Moon`, `MoonFill`. Fjernet `EscalatorStroke` ([PR](https://github.com/navikt/aksel/pull/1852))
 
 ## 2.7.0
 
 ### Minor Changes
 
-- [#1847](https://github.com/navikt/aksel/pull/1847) [`de291a972`](https://github.com/navikt/aksel/commit/de291a9722c262d40fecaec7be55b71f86e60160) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Ny ikonpakke med for core icons 3! `@navikt/aksel-icons`
+- Ny ikonpakke med for core icons 3! `@navikt/aksel-icons` ([PR](https://github.com/navikt/aksel/pull/1847))

@navikt/aksel-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-icons",
-  "version": "4.1.5",
+  "version": "4.5.0",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/ikoner",
   "repository": {

@navikt/aksel-stylelint/CHANGELOG.md

@@ -1,40 +1,31 @@
 # @navikt/aksel-stylelint
 
-## 4.1.5
+## 4.5.0
 
-## 4.1.4
+## 4.4.2
 
-## 4.1.3
-
-## 4.1.2
-
-## 4.1.1
+## 4.4.1
 
 ## 4.1.0
 
 ### Minor Changes
 
-- [#2035](https://github.com/navikt/aksel/pull/2035) [`7b42f536a`](https://github.com/navikt/aksel/commit/7b42f536aa90c1b5dbe2b19f1bbe292701546420) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: Oppdatert Chips
-
-  - Toggle Chips har nå varianter: neutral og action
-  - Toggle Chips har nå en ny prop: `checkmark` som slår av/på checkmark ved selected-state
-
-## 4.0.0
+- Deprecated klassenavn `navds-chips--icon-left` ([PR](https://github.com/navikt/aksel/pull/2035))
 
 ## 3.4.2
 
 ### Patch Changes
 
-- [#2017](https://github.com/navikt/aksel/pull/2017) [`7615dbbb5`](https://github.com/navikt/aksel/commit/7615dbbb54c7c96e2252366188547b27b2ac1142) Thanks [@JulianNymark](https://github.com/JulianNymark)! - add missing dependency
+- La til riktige dependencies ([PR](https://github.com/navikt/aksel/pull/2017))
 
 ## 3.4.1
 
 ### Patch Changes
 
-- :bug: Stylelint hotfix, inkluderer nå dist-mappe (kanskje..)
+- Inkluderer nå dist-mappe i release
 
 ## 3.4.0
 
 ### Minor Changes
 
-- [#1973](https://github.com/navikt/aksel/pull/1973) [`61c411421`](https://github.com/navikt/aksel/commit/61c4114214841ec42f48e1abd0d72d2a42d265ab) Thanks [@JulianNymark](https://github.com/JulianNymark)! - add stylelint plugin
+- Stylelint-pakke for Aksel ([PR](https://github.com/navikt/aksel/pull/1973))

@navikt/aksel-stylelint/package.json

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

@navikt/aksel/CHANGELOG.md

@@ -1,257 +1,36 @@
 # @navikt/aksel
 
-## 4.1.5
+## 4.5.0
+
+### Patch Changes
+
+- Updated dependencies [[`b05958863`](https://github.com/navikt/aksel/commit/b05958863b1adadb1b6a3fcceb4477e7411b66b5), [`b05958863`](https://github.com/navikt/aksel/commit/b05958863b1adadb1b6a3fcceb4477e7411b66b5)]:
+  - @navikt/ds-css@4.5.0
+
+## 4.4.2
 
 ### Patch Changes
 
 - Updated dependencies []:
-  - @navikt/ds-css@4.1.5
+  - @navikt/ds-css@4.4.2
 
-## 4.1.4
+## 4.4.1
 
 ### Patch Changes
 
-- Updated dependencies [[`e06096105`](https://github.com/navikt/aksel/commit/e060961050c75ec815e5c125001f1ff99106e298)]:
-  - @navikt/ds-css@4.1.4
-
-## 4.1.3
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @navikt/ds-css@4.1.3
-
-## 4.1.2
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @navikt/ds-css@4.1.2
-
-## 4.1.1
-
-### Patch Changes
-
-- Updated dependencies [[`91343563c`](https://github.com/navikt/aksel/commit/91343563c916a554d8ade5401c28ab4c3b3e26af)]:
-  - @navikt/ds-css@4.1.1
-
-## 4.1.0
-
-### Patch Changes
-
-- Updated dependencies [[`7b42f536a`](https://github.com/navikt/aksel/commit/7b42f536aa90c1b5dbe2b19f1bbe292701546420), [`c028f36e2`](https://github.com/navikt/aksel/commit/c028f36e2bc58223ebf8b655980dde7eafb30add), [`b2f796d68`](https://github.com/navikt/aksel/commit/b2f796d681f1c1d76d26d1fd743268c8c618a854), [`db8c38a09`](https://github.com/navikt/aksel/commit/db8c38a094cd183db54aebecb62d5b223920a040)]:
-  - @navikt/ds-css@4.1.0
+- Updated dependencies [[`415632675`](https://github.com/navikt/aksel/commit/4156326752eaf7a97855b33653850362dada8788)]:
+  - @navikt/ds-css@4.4.1
 
 ## 4.0.0
 
 ### Major Changes
 
-- [#2026](https://github.com/navikt/aksel/pull/2026) [`895bdc08e`](https://github.com/navikt/aksel/commit/895bdc08e50647d9b9186cbf0e9ab069323de56c) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :test-tube: Datepicker og Monthpicker er nå ute av beta. Kjør codemod for migrering, eller `cmd/ctrl + shift + f` og erstatt `UNSAFE_` med ``
+- Codemod for migrering av Datepicker/Monthpicker ut av Beta. `npx @navikt/aksel codemod v4-date` ([PR](https://github.com/navikt/aksel/pull/2026))
 
-  - UNSAFE-prefix er fjernet fra Datepicker og Monthpicker
-
-  ```bash
-  npx @navikt/aksel codemod v4-date
-  ```
-
-- [#2026](https://github.com/navikt/aksel/pull/2026) [`895bdc08e`](https://github.com/navikt/aksel/commit/895bdc08e50647d9b9186cbf0e9ab069323de56c) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :truck: Komponenter i `@navikt/ds-react-internal` er flyttet over til `@navikt/ds-react`
-
-  - `<Header />` er renamet til `<InternalHeader />`
-  - Dropdown, Timeline og InternalHeader(Header) er flyttet over til `@navikt/ds-react`
-  - All styling fra `@navikt/ds-css-internal` er flyttet til `@navikt/ds-css` og classname-prefix er endret fra `navdsi` -> `navds` for flyttede komponenter. Sett opp [stylelint med configen vår](https://aksel.nav.no/grunnleggende/kode/stylelint), så vil du få feilmelding om du bruker gamle klassenavn.
-  - Fikset cascading-problem mellom dropdown og popover. Dropdown blir ikke lengre påvirket av import-rekkefølge av popover.
-  - Styling for flyttede komponenter finnes nå på CDN (https://aksel.nav.no/grunnleggende/kode/css-import)
-
-  Kjør codemod for migrering:
-
-  ```bash
-  // React
-  npx @navikt/aksel codemod v4-internal-react
-
-  // CSS
-  npx @navikt/aksel codemod v4-internal-css
-  ```
-
-### Patch Changes
-
-- Updated dependencies [[`895bdc08e`](https://github.com/navikt/aksel/commit/895bdc08e50647d9b9186cbf0e9ab069323de56c), [`895bdc08e`](https://github.com/navikt/aksel/commit/895bdc08e50647d9b9186cbf0e9ab069323de56c)]:
-  - @navikt/ds-css@4.0.0
-
-## 3.4.2
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @navikt/ds-css@3.4.2
-
-## 3.4.1
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @navikt/ds-css@3.4.1
-
-## 3.4.0
-
-### Patch Changes
-
-- Updated dependencies [[`b958d41a2`](https://github.com/navikt/aksel/commit/b958d41a20c66327658514fcf24ae20893c9531a)]:
-  - @navikt/ds-css@3.4.0
-
-## 3.3.1
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @navikt/ds-css@3.3.1
-
-## 3.3.0
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @navikt/ds-css@3.3.0
-
-## 3.2.4
-
-### Patch Changes
-
-- Updated dependencies [[`30eee0dac`](https://github.com/navikt/aksel/commit/30eee0dac4e3e5a1379033283a6885e646e80458)]:
-  - @navikt/ds-css@3.2.4
-
-## 3.2.3
-
-### Patch Changes
-
-- Updated dependencies [[`475e994f4`](https://github.com/navikt/aksel/commit/475e994f494b2080ffc05eb1684b6a244e3e2969), [`444e905e0`](https://github.com/navikt/aksel/commit/444e905e01965fd5cac40ff20c5225b072e67221)]:
-  - @navikt/ds-css@3.2.3
-
-## 3.2.2
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @navikt/ds-css@3.2.2
-
-## 3.2.1
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @navikt/ds-css@3.2.1
-
-## 3.2.0
-
-### Patch Changes
-
-- Updated dependencies [[`affcab14c`](https://github.com/navikt/aksel/commit/affcab14c3d536929dfa64a36f5b43f9d0e8c3b7)]:
-  - @navikt/ds-css@3.2.0
-
-## 3.1.3
-
-### Patch Changes
-
-- Updated dependencies [[`e8ecf309a`](https://github.com/navikt/aksel/commit/e8ecf309a910e47fd3cea6c54cd993ab1196910f)]:
-  - @navikt/ds-css@3.1.3
-
-## 3.1.2
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @navikt/ds-css@3.1.2
-
-## 3.1.1
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @navikt/ds-css@3.1.1
-
-## 3.1.0
-
-### Patch Changes
-
-- Updated dependencies [[`9d2cd9e7f`](https://github.com/navikt/aksel/commit/9d2cd9e7fffb3cf6310c88229ee39ea85db19bca), [`f1c4c46eb`](https://github.com/navikt/aksel/commit/f1c4c46ebb0522561483f18e3b86b190cf9cc372)]:
-  - @navikt/ds-css@3.1.0
-
-## 3.0.1
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @navikt/ds-css@3.0.1
-
-## 3.0.0
-
-### Patch Changes
-
-- Updated dependencies [[`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f), [`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f)]:
-  - @navikt/ds-css@3.0.0
-
-## 2.9.8
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @navikt/ds-css@2.9.8
-
-## 2.9.7
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @navikt/ds-css@2.9.7
-
-## 2.9.6
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @navikt/ds-css@2.9.6
-
-## 2.9.5
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @navikt/ds-css@2.9.5
+- Codemods for migrering fra `@navikt/ds-react-internal` til `@navikt/ds-react` [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h3b8538e1981d) ([PR](https://github.com/navikt/aksel/pull/2026))
 
 ## 2.9.4
 
 ### Patch Changes
 
-- [#1952](https://github.com/navikt/aksel/pull/1952) [`27b2b4a11`](https://github.com/navikt/aksel/commit/27b2b4a11caf5ca05c96c686c453653d8a900e5f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :truck: Flyttet Codemods from `@navikt/ds-codemods` -> `@navikt/aksel`.
-
-  - `@navikt/ds-codemods` vil bli deprecated ettehvert.
-
-- Updated dependencies []:
-  - @navikt/ds-css@2.9.4
-
-## 2.9.3
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @navikt/ds-css@2.9.3
-
-## 2.9.2
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @navikt/ds-css@2.9.2
-
-## 2.9.1
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @navikt/ds-css@2.9.1
-
-## 2.9.0
-
-### Patch Changes
-
-- Updated dependencies [[`657b7f3f3`](https://github.com/navikt/aksel/commit/657b7f3f3e62c5ce3173e6c95a29fcd237ce7343)]:
-  - @navikt/ds-css@2.9.0
+- :truck: Flyttet Codemods fra `@navikt/ds-codemods` -> `@navikt/aksel`. `@navikt/ds-codemods` regnes nå som deprecated ([PR](https://github.com/navikt/aksel/pull/1952))

@navikt/aksel/package.json

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

@navikt/core/css/CHANGELOG.md

@@ -1,492 +1,263 @@
 # @navikt/ds-css
 
-## 4.1.5
+## 4.5.0
+
+### Minor Changes
+
+- - Alert: La til `closeButton`-prop ([#2079](https://github.com/navikt/aksel/pull/2079))
+
+### Patch Changes
+
+- - Button: Fikset outline-bug i tertiary-variant ved `:active`-state ([#2079](https://github.com/navikt/aksel/pull/2079))
+
+## 4.4.2
+
+## 4.4.1
+
+### Patch Changes
+
+- :lipstick: Chat: fjernet border, satt avatar svg til 24x24px, byttet om "subtle" og "neutral" ([#2077](https://github.com/navikt/aksel/pull/2077))
+
+## 4.4.0
+
+### Minor Changes
+
+- Shadow-tokens er oppdatert: Datepicker har nå ikke border, Modal bruker shadow-xlarge, LinkCard bruker shadow-xsmall ([PR](https://github.com/navikt/aksel/pull/2041))
+
+## 4.3.0
+
+### Minor Changes
+
+- Popover/Helptext: Maksbredde på 100vw - 1.5rem. Treffer ikke lengre kanten på skjermen. ([PR](https://github.com/navikt/aksel/pull/2069))
+
+### Patch Changes
+
+- ExpansionCard: Ved nesting av komponetene fikk man styling fra parent ([PR](https://github.com/navikt/aksel/pull/2067))
+
+## 4.2.0
+
+### Minor Changes
+
+- Chat: `small`-size, innebygde varianter for farge og oppdatert utseende. ([PR](https://github.com/navikt/aksel/pull/2048))
 
 ## 4.1.4
 
 ### Patch Changes
 
-- [#2049](https://github.com/navikt/aksel/pull/2049) [`e06096105`](https://github.com/navikt/aksel/commit/e060961050c75ec815e5c125001f1ff99106e298) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Subtle-description på form-elementer brakk bruk av Readmore
-
-## 4.1.3
-
-## 4.1.2
+- Readmore: setter nå eksplisitt color for å ikke arve text-subtle fra parent. ([PR](https://github.com/navikt/aksel/pull/2049))
 
 ## 4.1.1
 
 ### Patch Changes
 
-- [`91343563c`](https://github.com/navikt/aksel/commit/91343563c916a554d8ade5401c28ab4c3b3e26af) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Fikset markering av tekst i skeleton.
+- :bug: Fikset cursor-markering av tekst i skeleton.
 
 ## 4.1.0
 
 ### Minor Changes
 
-- [#2035](https://github.com/navikt/aksel/pull/2035) [`7b42f536a`](https://github.com/navikt/aksel/commit/7b42f536aa90c1b5dbe2b19f1bbe292701546420) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: Oppdatert Chips
+- Chips: `neutral` og `action`-varianter av Chips.Toggle. Opt-out mulighet for Checkmark. Oppdatert checkmark-ikon ([PR](https://github.com/navikt/aksel/pull/2035))
 
-  - Toggle Chips har nå varianter: neutral og action
-  - Toggle Chips har nå en ny prop: `checkmark` som slår av/på checkmark ved selected-state
-
-- [#2036](https://github.com/navikt/aksel/pull/2036) [`b2f796d68`](https://github.com/navikt/aksel/commit/b2f796d681f1c1d76d26d1fd743268c8c618a854) Thanks [@KenAJoh](https://github.com/KenAJoh)! - - Oppdatert text-subtle og icon-subtle tokens til 700-skala (tidligere 600).
-
-  - Icon-subtle bruker nå grayalpha.
-  - Alle description-felter på fieldsets har nå text-subtle som farge.
-
-- [#1821](https://github.com/navikt/aksel/pull/1821) [`db8c38a09`](https://github.com/navikt/aksel/commit/db8c38a094cd183db54aebecb62d5b223920a040) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: Ny komponent Skeleton!
-
-  - varianter: text, circle, rounded og rectangle
-
-### Patch Changes
-
-- [#2027](https://github.com/navikt/aksel/pull/2027) [`c028f36e2`](https://github.com/navikt/aksel/commit/c028f36e2bc58223ebf8b655980dde7eafb30add) Thanks [@JulianNymark](https://github.com/JulianNymark)! - :sparkles: La til `indent`-prop på Accordion
+- Alle description-felter på fieldsets har nå `text-subtle` som farge. ([PR](https://github.com/navikt/aksel/pull/2036))
 
 ## 4.0.0
 
 ### Major Changes
 
-- [#2026](https://github.com/navikt/aksel/pull/2026) [`895bdc08e`](https://github.com/navikt/aksel/commit/895bdc08e50647d9b9186cbf0e9ab069323de56c) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :test-tube: Datepicker og Monthpicker er nå ute av beta. Kjør codemod for migrering, eller `cmd/ctrl + shift + f` og erstatt `UNSAFE_` med ``
+- All styling fra `@navikt/ds-css-internal` er flyttet til `@navikt/ds-css`. ([PR](https://github.com/navikt/aksel/pull/2026))
 
-  - UNSAFE-prefix er fjernet fra Datepicker og Monthpicker
+- classname-prefix er endret fra `navdsi` -> `navds` for flyttede komponenter.
 
-  ```bash
-  npx @navikt/aksel codemod v4-date
-  ```
+- Fikset cascading-problem mellom dropdown og popover. Dropdown blir ikke lengre påvirket av import-rekkefølge av popover.
 
-- [#2026](https://github.com/navikt/aksel/pull/2026) [`895bdc08e`](https://github.com/navikt/aksel/commit/895bdc08e50647d9b9186cbf0e9ab069323de56c) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :truck: Komponenter i `@navikt/ds-react-internal` er flyttet over til `@navikt/ds-react`
-
-  - `<Header />` er renamet til `<InternalHeader />`
-  - Dropdown, Timeline og InternalHeader(Header) er flyttet over til `@navikt/ds-react`
-  - All styling fra `@navikt/ds-css-internal` er flyttet til `@navikt/ds-css` og classname-prefix er endret fra `navdsi` -> `navds` for flyttede komponenter. Sett opp [stylelint med configen vår](https://aksel.nav.no/grunnleggende/kode/stylelint), så vil du få feilmelding om du bruker gamle klassenavn.
-  - Fikset cascading-problem mellom dropdown og popover. Dropdown blir ikke lengre påvirket av import-rekkefølge av popover.
-  - Styling for flyttede komponenter finnes nå på CDN (https://aksel.nav.no/grunnleggende/kode/css-import)
-
-  Kjør codemod for migrering:
-
-  ```bash
-  // React
-  npx @navikt/aksel codemod v4-internal-react
-
-  // CSS
-  npx @navikt/aksel codemod v4-internal-css
-  ```
-
-## 3.4.2
-
-## 3.4.1
+- Styling for flyttede komponenter finnes nå på CDN [Guide](https://aksel.nav.no/grunnleggende/kode/css-import)
 
 ## 3.4.0
 
 ### Minor Changes
 
-- [#2010](https://github.com/navikt/aksel/pull/2010) [`b958d41a2`](https://github.com/navikt/aksel/commit/b958d41a20c66327658514fcf24ae20893c9531a) Thanks [@HalvorHaugan](https://github.com/HalvorHaugan)! - Ny variant "moderate" i Tag
-
-## 3.3.1
-
-## 3.3.0
-
-## 3.2.4
-
-### Patch Changes
-
-- [#2000](https://github.com/navikt/aksel/pull/2000) [`30eee0dac`](https://github.com/navikt/aksel/commit/30eee0dac4e3e5a1379033283a6885e646e80458) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Search støtter nå htmlSize-prop
+- Tag: `moderate`-variant ([PR](https://github.com/navikt/aksel/pull/2010))
 
 ## 3.2.3
 
 ### Patch Changes
 
-- [#1993](https://github.com/navikt/aksel/pull/1993) [`475e994f4`](https://github.com/navikt/aksel/commit/475e994f494b2080ffc05eb1684b6a244e3e2969) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Fikset small-variant av datepicker-input
+- Datepicker: Fikset small-variant av datepicker-input. ([PR](https://github.com/navikt/aksel/pull/1993))
 
-  - :recycle: Refactored Datepicker.Input-button for bugfix
-
-- [#1994](https://github.com/navikt/aksel/pull/1994) [`444e905e0`](https://github.com/navikt/aksel/commit/444e905e01965fd5cac40ff20c5225b072e67221) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: CopyButton har nå en `xsmall`-variant
-
-  - Kan nå lettere brukes i tabeller
-
-## 3.2.2
-
-## 3.2.1
-
-## 3.2.0
-
-### Minor Changes
-
-- [#1982](https://github.com/navikt/aksel/pull/1982) [`affcab14c`](https://github.com/navikt/aksel/commit/affcab14c3d536929dfa64a36f5b43f9d0e8c3b7) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Ny komponent `<CopyButton />`!
-
-  - Erstatter `<CopyToClipboard />` fra `@navikt/ds-react-internal`
-  - CopyToClipboard er markert som deprecated. Den vil fortsatt fungere, men noen lintere vil kunne ende opp med å klage på den.
+- CopyButton: `xsmall`-size for bruk i tabeller ([PR](https://github.com/navikt/aksel/pull/1994))
 
 ## 3.1.3
 
 ### Patch Changes
 
-- [#1976](https://github.com/navikt/aksel/pull/1976) [`e8ecf309a`](https://github.com/navikt/aksel/commit/e8ecf309a910e47fd3cea6c54cd993ab1196910f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :lipstick: Oppdatert utseende for ToggleGroup
-
-  - Medium og Small er begge 10px lavere
-  - Mindre border-radius
-
-## 3.1.2
-
-## 3.1.1
+- :lipstick: Oppdatert utseende for ToggleGroup. `Medium` og `Small`-size er begge 10px lavere, mindre border-radius ([PR](https://github.com/navikt/aksel/pull/1976))
 
 ## 3.1.0
 
 ### Minor Changes
 
-- [#1966](https://github.com/navikt/aksel/pull/1966) [`f1c4c46eb`](https://github.com/navikt/aksel/commit/f1c4c46ebb0522561483f18e3b86b190cf9cc372) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :lipstick: Alle komponenter bruker nå default `:focus-visible` for fokusmarkering.
-  (Alle komponenter som bruker `:focus-visible` har også en fallback for `:focus`)
+- Alle komponenter bruker nå default `:focus-visible` for fokusmarkering. Medfølger også fallback for `:focus` ([PR](https://github.com/navikt/aksel/pull/1966))
 
 ### Patch Changes
 
-- [#1967](https://github.com/navikt/aksel/pull/1967) [`9d2cd9e7f`](https://github.com/navikt/aksel/commit/9d2cd9e7fffb3cf6310c88229ee39ea85db19bca) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :lipstick: Oppdatert Label og Description spacing for skjemakomponenter
-
-## 3.0.1
+- Oppdatert Label og Description spacing for skjemakomponenter ([PR](https://github.com/navikt/aksel/pull/1967))
 
 ## 3.0.0
 
 ### Major Changes
 
-- [#1964](https://github.com/navikt/aksel/pull/1964) [`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - **Accordion**
-
-  - Accordion oppdatet til å ha chevron left-aligned.
-  - Neutral-variant lagt til
-  - Diverse nye size-options for heading og paddinger.
-  - Deler av Accordion-CSS er refaktorert. Dette vil kunne brekke overskrevne stiler.
-
-- [#1964](https://github.com/navikt/aksel/pull/1964) [`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Aksels løsninger bruker nå `@navikt/aksel-icons`
-
-  **Sideeffects av ikonendringer**
-
-  - Komponenter som tidligere brukte Expand-ikon har fått oppdatert animasjon (table, readmore og accordion)
-  - Alert bruker samme ikonstørrelse for alle størrelser
-  - Chips har justert padding/ikonstørrelser
-  - Datepicker hover-bug på knapper er fikset
-  - Helptekst bruker nå et custom-ikon.
-  - Select har fått justert padding rundt ikon
-  - Switch bruker samme checkmark som checkbox, er nå avrundet
-  - ReadMore har justert margin for alignment med ikon, fjernet content-animasjon
-  - Tabs bruker default text-default nå
-  - Stepper har endret hvordan den styler checkmark-ikon.
-
-## 2.9.8
-
-## 2.9.7
-
-## 2.9.6
-
-## 2.9.5
-
-## 2.9.4
-
-## 2.9.3
-
-## 2.9.2
-
-## 2.9.1
+- Accordion: Chevron er left-aligned, deler av styling er refaktorert, `size`-props og `neutral`-variant ([PR](https://github.com/navikt/aksel/pull/1964))
 
 ## 2.9.0
 
 ### Minor Changes
 
-- [#1941](https://github.com/navikt/aksel/pull/1941) [`657b7f3f3`](https://github.com/navikt/aksel/commit/657b7f3f3e62c5ce3173e6c95a29fcd237ce7343) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: CSS nå tilgjengelig som separate filer
-
-  - Kan lastest fra CDN
-  - Tilbys nå i minified-versjoner
-  - Kommandoline: `npx @navikt/aksel css-imports` for å raskt komme i gang med CSS-optimalisering
-
-## 2.8.16
-
-## 2.8.15
-
-### Patch Changes
-
-- [#1930](https://github.com/navikt/aksel/pull/1930) [`6682be1c8`](https://github.com/navikt/aksel/commit/6682be1c8e6562213c64e5be4bed70fef54ab865) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Alle pakker implementerer nå npm provenance (beta)
-
-## 2.8.14
-
-### Patch Changes
-
-- [`f0d9a8853`](https://github.com/navikt/aksel/commit/f0d9a8853f56854a4049bd3f6cc34968e9d6c380) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fixes shown month on open in Datepicker/MonthPicker, better handling of out-of-range 'today'
-
-## 2.8.13
-
-## 2.8.12
-
-## 2.8.11
-
-## 2.8.10
+- CSS nå tilgjengelig som separate filer: Kan lastest fra CDN, minified-versjoner tilgjengelig ([PR](https://github.com/navikt/aksel/pull/1941))
 
 ## 2.8.9
 
 ### Patch Changes
 
-- [#1905](https://github.com/navikt/aksel/pull/1905) [`212194964`](https://github.com/navikt/aksel/commit/212194964c4dd576e1ffc031316dff8cbe5016a2) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Padding/border-radius tokens for button.css
-
-## 2.8.8
+- Button: Padding/border-radius tokens ([PR](https://github.com/navikt/aksel/pull/1905))
 
 ## 2.8.7
 
 ### Patch Changes
 
-- [`7f3f025db`](https://github.com/navikt/aksel/commit/7f3f025db2ad605df4240605a733d10d08db753a) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset typografi for radio, checkbox. Button token for tertiary
+- Button: token for tertiary
 
 ## 2.8.6
 
 ### Patch Changes
 
-- [`2eb358ad8`](https://github.com/navikt/aksel/commit/2eb358ad888979d21c385b3900973946f3f466be) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Alert, Chips og ErrorSummary har nå bedre utvalg av tokens
+- Alert, Chips og ErrorSummary har nå bedre utvalg av tokens
 
 ## 2.8.5
 
 ### Patch Changes
 
-- [`f66437082`](https://github.com/navikt/aksel/commit/f664370826ed51bda7ad681e1f1799c26d2c1f0a) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :art: Accordion-tokens for header bakgrunn
+- Accordion: tokens for header-bakgrunn
 
-- [#1879](https://github.com/navikt/aksel/pull/1879) [`55b585618`](https://github.com/navikt/aksel/commit/55b585618341a4d8bf26ed9b9e129d897b1600dc) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Fikset tekstfarge i select på iphone
-
-## 2.8.4
-
-## 2.8.3
+- Select: Fikset tekstfarge på iphone ([PR](https://github.com/navikt/aksel/pull/1879))
 
 ## 2.8.2
 
 ### Patch Changes
 
-- [#1870](https://github.com/navikt/aksel/pull/1870) [`9c495cf50`](https://github.com/navikt/aksel/commit/9c495cf5037a7453e51e273ab93e4232576f4958) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Oppdatert typografi for ExpansioCard
-
-## 2.8.1
-
-## 2.8.0
-
-### Minor Changes
-
-- [#1820](https://github.com/navikt/aksel/pull/1820) [`c6d51a019`](https://github.com/navikt/aksel/commit/c6d51a01902e4fd7916a422e17ed175f39acd458) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: Ny komponent! ExpansionCard. Oppfølger fra gammel Ekspanderbartpanel.
+- ExpansioCard: Oppdatert typografi ([PR](https://github.com/navikt/aksel/pull/1870))
 
 ## 2.7.8
 
 ### Patch Changes
 
-- [#1863](https://github.com/navikt/aksel/pull/1863) [`7ace69f21`](https://github.com/navikt/aksel/commit/7ace69f215760bbb5bf997670c897403d8ee558d) Thanks [@it-vegard](https://github.com/it-vegard)! - Added focus indicator for tabpanel
-
-## 2.7.7
-
-## 2.7.6
+- Tabs: La til focus-markering for Tabs.Panel ([PR](https://github.com/navikt/aksel/pull/1863))
 
 ## 2.7.5
 
 ### Patch Changes
 
-- :bug: Fikset token-bug i togglegroup
-
-## 2.7.4
-
-## 2.7.3
-
-## 2.7.2
-
-## 2.7.1
-
-## 2.7.0
-
-## 2.6.2
-
-## 2.6.1
-
-## 2.6.0
-
-## 2.5.1
-
-## 2.5.0
+- ToggleGroup: Fikset token-bug
 
 ## 2.4.3
 
 ### Patch Changes
 
-- [`f962bc781`](https://github.com/navikt/aksel/commit/f962bc7816027c24e334d9754c3e07cda951cf56) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset disabled-opacity bug i select for Chrome
+- Select: Fikset disabled + opacity bug for Chrome
 
 ## 2.4.2
 
 ### Patch Changes
 
-- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
-
-## 2.4.1
-
-## 2.4.0
-
-### Minor Changes
-
-- [#1807](https://github.com/navikt/aksel/pull/1807) [`70eeb24b3`](https://github.com/navikt/aksel/commit/70eeb24b38ac871c7f2e31e1621b949669c401b6) Thanks [@kschieren](https://github.com/kschieren)! - Added List component
+- List: La til støtte for nesting ([PR](https://github.com/navikt/aksel/pull/1823))
 
 ## 2.3.1
 
 ### Patch Changes
 
-- [`241b2e678`](https://github.com/navikt/aksel/commit/241b2e678f1f40909e2d36fe095dcbce8673f174) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset feil bruk av fallback-tokens i textarea, timeline
+- Fikset feil bruk av fallback-tokens i Textarea og Timeline
 
 ## 2.3.0
 
 ### Minor Changes
 
-- [#1813](https://github.com/navikt/aksel/pull/1813) [`7702c6527`](https://github.com/navikt/aksel/commit/7702c65275a4d86a8260852d091e6dd4cfe9217c) Thanks [@ingfo](https://github.com/ingfo)! - Fiksa sentrering av tekst i Select i Firefox
+- Select: Fikset sentrering av tekst i Firefox ([PR](https://github.com/navikt/aksel/pull/1813))
 
 ### Patch Changes
 
-- [`51b62cca7`](https://github.com/navikt/aksel/commit/51b62cca7b857e92669cd0b09e620b131faf80e5) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Select small 34px høyde -> 32px
+- Select: `small`-variant er nå 32px (var 34px)
 
 ## 2.2.0
 
 ### Minor Changes
 
-- [#1789](https://github.com/navikt/aksel/pull/1789) [`c0929a534`](https://github.com/navikt/aksel/commit/c0929a534dc8effece5435f8be550cb7931a52b1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Button og ToggleGroup har nå en neutral-variant, oppdatert neutral-tokens
+- ToggleGroup: `Neutral`-variant. ([PR](https://github.com/navikt/aksel/pull/1789))
 
-## 2.1.7
-
-## 2.1.6
-
-## 2.1.5
-
-## 2.1.4
-
-## 2.1.3
+- Button: `Neutral`-variant.
 
 ## 2.1.2
 
 ### Patch Changes
 
-- [`62f36da5e`](https://github.com/navikt/aksel/commit/62f36da5e74fc7f53414d42b310c3b57597795bc) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Small textfield har nå 8px horisontal padding (4px før)
-
-## 2.1.1
-
-## 2.1.0
-
-## 2.0.18
-
-## 2.0.17
-
-## 2.0.16
-
-## 2.0.15
-
-### Patch Changes
-
-- [#1748](https://github.com/navikt/aksel/pull/1748) [`22dfd8e60`](https://github.com/navikt/aksel/commit/22dfd8e60315c421749394d35e41f412a00a7593) Thanks [@KenAJoh](https://github.com/KenAJoh)! - toptextPosition prop i Chat for horisontal plassering av navn og dato.
-
-## 2.0.14
-
-## 2.0.13
+- TextField: `small`-variant har nå 8px horisontal padding (før 4px)
 
 ## 2.0.12
 
 ### Patch Changes
 
-- [#1737](https://github.com/navikt/aksel/pull/1737) [`8a1ef5e7e`](https://github.com/navikt/aksel/commit/8a1ef5e7e2c066cb80c13e14329e1585e2c427f8) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Fikset default visuell error-state for radio
-
-## 2.0.11
-
-## 2.0.10
-
-## 2.0.9
-
-## 2.0.8
-
-## 2.0.7
-
-## 2.0.6
+- Radio: Fikset default visuell error-state ([PR](https://github.com/navikt/aksel/pull/1737))
 
 ## 2.0.5
 
 ### Patch Changes
 
-- Reverserte border-width endrind i button
-
-## 2.0.4
-
-## 2.0.3
-
-## 2.0.2
+- Button: Reverserte border-width endrinder (var 1.5px, nå 2px)
 
 ## 2.0.1
 
 ### Patch Changes
 
-- [`e8007328d`](https://github.com/navikt/aksel/commit/e8007328db3f6d5be696cf24f03304c79be0f3f7) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bugfixer ved bruk av tokens
+- Bugfixer ved bruk av tokens oppdatert i v2.0.0
 
 ## 2.0.0
 
 ### Major Changes
 
-- [`6b96e4833`](https://github.com/navikt/aksel/commit/6b96e48330c2e013a1acee85cefccd9ccc1aece4) Thanks [@KenAJoh](https://github.com/KenAJoh)! - v2: Tokens update and font-loading
+- Fontlasting: Fonter lastes nå fra NAV-CDN
 
-## 1.5.10
+- Tokens: Alle komponenter bruker nå semantiske tokens for som standard, med innebygd støtte for komponent-spesifikke tokens.
 
 ## 1.5.9
 
 ### Patch Changes
 
-- 4px -> 2px gap chips-toggle active
-
-## 1.5.8
-
-## 1.5.7
-
-## 1.5.6
-
-## 1.5.5
-
-## 1.5.4
-
-### Patch Changes
-
-- [#1709](https://github.com/navikt/aksel/pull/1709) [`77302a30b`](https://github.com/navikt/aksel/commit/77302a30b8eef8dc00b2d2e9c904a3f57da81a11) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Oppdatert ikoner
+- Chips: 4px -> 2px gap mellom checkmark i Chips.Toggle
 
 ## 1.5.3
 
 ### Patch Changes
 
-- Byttet om på alt-farge rekkefølge
-
-## 1.5.2
-
-### Patch Changes
-
-- :memo: Rename FilterChips to ToggleChips
+- Tokens: Byttet om på rekkefølge av alt-farger
 
 ## 1.5.1
 
 ### Patch Changes
 
-- Flex-wrap chips.css
+- Chips. Bruker nå standard flex-wrap
 
 ## 1.5.0
 
 ### Minor Changes
 
-- [#1684](https://github.com/navikt/aksel/pull/1684) [`e19bf67b3`](https://github.com/navikt/aksel/commit/e19bf67b337dea39989c68b5e9c2591cf0d5b40f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Oppdaterte tag-varianter
-
-- [#1668](https://github.com/navikt/aksel/pull/1668) [`97c5f60e9`](https://github.com/navikt/aksel/commit/97c5f60e9111da7e08f55c8d0aa29581f0a9b1ca) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Chips komponent :sparkles:
-
-## 1.4.4
-
-## 1.4.3
-
-### Patch Changes
-
-- :sparkles: Validering og inputFormat i Date-komponenter
-
-## 1.4.2
-
-## 1.4.1
-
-### Patch Changes
-
-- [`3c08651df`](https://github.com/navikt/aksel/commit/3c08651df28c3e19dd8c8a7a1d0032200bec473d) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Date-komponenter følger språkrådets dato-formatering for måneder.
-
-## 1.4.0
+- Tag: `filled`-varianter ([PR](https://github.com/navikt/aksel/pull/1684))
 
 ## 1.3.39
 
 ### Patch Changes
 
-- [`40f0b3340`](https://github.com/navikt/aksel/commit/40f0b3340d01bf85fecc04f2f3a8e8b2acf996f1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bump for latest-tag
+- Fikset bruk av `:watch` for diverse parsere (less, parcel)
 
-## 1.3.38
+## 1.3.24
+
+### Patch Changes
+
+- Tokens tilgjengeligjøres nå også på `:host`. Dette lar shadow-dom brukere konsumere tokens direkte.

@navikt/core/css/alert.css

@@ -24,6 +24,7 @@
   font-size: 1.5rem;
   align-self: flex-start;
   height: var(--a-font-line-height-xlarge);
+  margin: var(--a-spacing-1);
   background: radial-gradient(circle, var(--a-surface-default) 50%, 0, transparent);
 }
 
@@ -73,3 +74,11 @@
   border: none;
   padding: 0;
 }
+
+.navds-alert__button-wrapper {
+  align-self: flex-start;
+  flex: 1;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-end;
+}

@navikt/core/css/button.css

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

@navikt/core/css/chat.css

@@ -1,14 +1,12 @@
 .navds-chat {
   display: flex;
   align-items: flex-end;
-  gap: var(--a-spacing-4);
-  padding-right: var(--a-spacing-16);
+  gap: var(--a-spacing-3);
+  max-width: 40.75rem;
 }
 
 .navds-chat--right {
   flex-direction: row-reverse;
-  padding-right: 0;
-  padding-left: var(--a-spacing-16);
 }
 
 .navds-chat__bubble-wrapper {
@@ -26,29 +24,33 @@
 
 .navds-chat__avatar {
   align-items: center;
-  background: var(--ac-chat-avatar-bg, var(--a-bg-subtle));
-  color: var(--ac-chat-avatar-color, var(--a-text-default));
+  box-shadow: var(--a-shadow-xsmall);
+  background-color: var(--ac-chat-avatar-bg, var(--a-surface-neutral-subtle));
   border-radius: var(--a-border-radius-full);
+  color: var(--ac-chat-avatar-color, var(--a-text-default));
   display: flex;
   flex-shrink: 0;
   justify-content: center;
   overflow: hidden;
-  height: 3rem;
-  width: 3rem;
+  height: 2.5rem;
+  width: 2.5rem;
+  line-height: 2.5rem; /* Makes text properly vertically centered in Chrome */
+  font-size: 1.06rem;
+  letter-spacing: 0.024rem;
 }
 
 .navds-chat__avatar svg {
   align-self: center;
-  height: 100%;
   width: 100%;
+  max-width: 1.5rem;
+  max-height: 1.5rem;
 }
 
 .navds-chat__bubble {
-  padding: 1rem;
-  box-shadow: var(--a-shadow-small);
+  padding: var(--a-spacing-4);
+  box-shadow: var(--a-shadow-xsmall);
   width: fit-content;
-  max-width: 37.5rem;
-  background-color: var(--ac-chat-bubble-bg, var(--a-bg-subtle));
+  background-color: var(--ac-chat-bubble-bg, var(--a-surface-neutral-subtle));
   border-radius: var(--a-border-radius-xlarge);
   border-bottom-left-radius: 2px;
   display: flex;
@@ -61,11 +63,27 @@
   border-bottom-right-radius: 2px;
 }
 
+.navds-chat--small .navds-chat__bubble {
+  padding: var(--a-spacing-3);
+}
+
+.navds-chat--info .navds-chat__bubble,
+.navds-chat--info .navds-chat__avatar {
+  background-color: var(--a-surface-info-subtle);
+}
+
+.navds-chat--subtle .navds-chat__bubble,
+.navds-chat--subtle .navds-chat__avatar {
+  background-color: var(--a-surface-default);
+}
+
 .navds-chat__top-text {
   color: var(--ac-chat-top-text, var(--a-text-default));
   display: flex;
   gap: var(--a-spacing-2);
   align-items: baseline;
+  font-weight: normal;
+  margin: 0;
 }
 
 .navds-chat--right .navds-chat__top-text {
@@ -87,7 +105,3 @@
 .navds-chat--right .navds-chat__top-text--left {
   align-self: flex-start;
 }
-
-.navds-chat__name {
-  font-weight: var(--a-font-weight-bold);
-}

@navikt/core/css/date.css

@@ -278,3 +278,7 @@
   visibility: hidden;
   pointer-events: none;
 }
+
+.navds-date__popover:where(.navds-popover) {
+  border: none;
+}

@navikt/core/css/expansioncard.css

@@ -77,7 +77,7 @@
   margin-top: var(--a-spacing-1);
 }
 
-.navds-expansioncard--small :where(.navds-expansioncard__title--small) {
+.navds-expansioncard--small > :where(.navds-expansioncard__header) :where(.navds-expansioncard__title--small) {
   margin-top: var(--a-spacing-05);
 }
 
@@ -115,7 +115,7 @@
   transition: transform 150ms ease-in-out;
 }
 
-.navds-expansioncard--open :where(.navds-expansioncard__header-chevron) {
+.navds-expansioncard--open > :where(.navds-expansioncard__header) :where(.navds-expansioncard__header-chevron) {
   transform: translateY(0) rotate(180deg);
 }
 
@@ -135,7 +135,10 @@
   }
 }
 
-.navds-expansioncard--open :where(.navds-expansioncard__header-button):hover :where(.navds-expansioncard__header-chevron) {
+.navds-expansioncard--open
+  > :where(.navds-expansioncard__header)
+  > :where(.navds-expansioncard__header-button):hover
+  :where(.navds-expansioncard__header-chevron) {
   transform: translateY(-1px) rotate(180deg);
 }
 

@navikt/core/css/help-text.css

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

@navikt/core/css/link-panel.css

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

@navikt/core/css/modal.css

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

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "4.1.5",
+  "version": "4.5.0",
   "description": "CSS for NAV Designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -27,7 +27,7 @@
     "css:get-version": "node config/get-version.js"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^4.1.5",
+    "@navikt/ds-tokens": "^4.5.0",
     "cssnano": "6.0.0",
     "fast-glob": "3.2.11",
     "lodash": "4.17.21",

@navikt/core/css/popover.css

@@ -5,6 +5,7 @@
   border: 1px solid;
   border-color: var(--ac-popover-border, var(--a-border-default));
   border-radius: var(--a-border-radius-medium);
+  max-width: calc(100vw - var(--a-spacing-6));
 }
 
 .navds-popover__content {

@navikt/core/css/timeline.css

@@ -61,6 +61,10 @@
   list-style-type: none;
 }
 
+.navds-timeline__row-periods:focus {
+  outline: none;
+}
+
 .navds-timeline__period {
   height: 100%;
   border-radius: var(--a-border-radius-full);

@navikt/core/css/tokens.json

@@ -80,9 +80,9 @@
     "--ac-button-tertiary-neutral-active-hover-bg": "--a-surface-neutral-active"
   },
   "chat": {
-    "--ac-chat-avatar-bg": "--a-bg-subtle",
+    "--ac-chat-avatar-bg": "--a-surface-neutral-subtle",
     "--ac-chat-avatar-color": "--a-text-default",
-    "--ac-chat-bubble-bg": "--a-bg-subtle",
+    "--ac-chat-bubble-bg": "--a-surface-neutral-subtle",
     "--ac-chat-top-text": "--a-text-default"
   },
   "chips": {

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "4.1.5",
+  "version": "4.5.0",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.24.1",
-    "@navikt/aksel-icons": "^4.1.5",
+    "@navikt/aksel-icons": "^4.5.0",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

@navikt/core/react/src/alert/Alert.tsx

@@ -3,10 +3,12 @@ import {
   CheckmarkCircleFillIcon,
   ExclamationmarkTriangleFillIcon,
   XMarkOctagonFillIcon,
+  XMarkIcon,
 } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { BodyLong } from "../typography/BodyLong";
+import { Button } from "../button";
 
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
@@ -32,6 +34,17 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
    * @default false
    */
   inline?: boolean;
+  /**
+   * Removes close-button(X) when false
+   * Requires onClose to be set
+   * @default true
+   */
+  closeButton?: boolean;
+  /**
+   * Callback for alert wanting to close
+   * requires closeButton to be true
+   */
+  onClose?: () => void;
 }
 
 const Icon = ({ variant, ...props }) => {
@@ -71,27 +84,45 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
       size = "medium",
       fullWidth = false,
       inline = false,
+      closeButton = false,
+      onClose,
       ...rest
     },
     ref
-  ) => (
-    <div
-      {...rest}
-      ref={ref}
-      className={cl(
-        className,
-        "navds-alert",
-        `navds-alert--${variant}`,
-        `navds-alert--${size}`,
-        { "navds-alert--full-width": fullWidth, "navds-alert--inline": inline }
-      )}
-    >
-      <Icon variant={variant} className="navds-alert__icon" />
-      <BodyLong as="div" size={size} className="navds-alert__wrapper">
-        {children}
-      </BodyLong>
-    </div>
-  )
+  ) => {
+    return (
+      <div
+        {...rest}
+        ref={ref}
+        className={cl(
+          className,
+          "navds-alert",
+          `navds-alert--${variant}`,
+          `navds-alert--${size}`,
+          {
+            "navds-alert--full-width": fullWidth,
+            "navds-alert--inline": inline,
+          }
+        )}
+      >
+        <Icon variant={variant} className="navds-alert__icon" />
+        <BodyLong as="div" size={size} className="navds-alert__wrapper">
+          {children}
+        </BodyLong>
+        {closeButton && !inline && (
+          <div className="navds-alert__button-wrapper">
+            <Button
+              className="navds-alert__button"
+              size="small"
+              variant="tertiary-neutral"
+              onClick={onClose}
+              icon={<XMarkIcon title="Lukk Alert" />}
+            />
+          </div>
+        )}
+      </div>
+    );
+  }
 );
 
 export default Alert;

@navikt/core/react/src/alert/alert.stories.tsx

@@ -2,6 +2,8 @@ import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { Alert } from ".";
 import { BodyLong, Heading as DsHeading, Link } from "..";
+import { within, userEvent } from "@storybook/testing-library";
+import { expect } from "@storybook/jest";
 
 const meta: Meta<typeof Alert> = {
   title: "ds-react/Alert",
@@ -20,22 +22,14 @@ const variants: Array<"error" | "warning" | "info" | "success"> = [
 ];
 
 export const Default: Story = {
-  render: (props) => (
-    <Alert
-      variant={props.variant}
-      size={props.size}
-      fullWidth={props.fullWidth}
-      inline={props.inline}
-    >
-      {props.children}
-    </Alert>
-  ),
+  render: (props) => <Alert {...props} />,
 
   args: {
     children: "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
     fullWidth: false,
     variant: "info",
     size: "medium",
+    closeButton: false,
   },
   argTypes: {
     variant: {
@@ -50,21 +44,39 @@ export const Default: Story = {
       },
       options: ["medium", "small"],
     },
+    closeButton: {
+      type: "boolean",
+    },
   },
 };
 
-export const Small = () => {
-  return (
-    <div className="colgap">
-      {variants.map((variant, i) => (
-        <Alert key={variant} variant={variant} size="small">
-          {new Array(i + 1).fill(
-            "Id elit esse enim reprehenderit enim nisi veniam nostrud."
-          )}
-        </Alert>
-      ))}
-    </div>
-  );
+export const Small = {
+  render: (props) => {
+    return (
+      <div className="colgap">
+        {variants.map((variant, i) => (
+          <Alert
+            key={variant}
+            variant={variant}
+            size="small"
+            closeButton={props.closeButton}
+          >
+            {new Array(i + 1).fill(
+              "Id elit esse enim reprehenderit enim nisi veniam nostrud."
+            )}
+          </Alert>
+        ))}
+      </div>
+    );
+  },
+  args: {
+    closeButton: false,
+  },
+  argtypes: {
+    closeButton: {
+      type: "boolean",
+    },
+  },
 };
 
 export const FullWidth = () => {
@@ -147,3 +159,44 @@ export const Links = () => {
     </div>
   );
 };
+
+const AlertWithCloseButton = ({ children }: { children?: React.ReactNode }) => {
+  let [show, setShow] = React.useState(true);
+
+  return (
+    show && (
+      <Alert variant="success" closeButton onClose={() => setShow(false)}>
+        {children || "Content"}
+      </Alert>
+    )
+  );
+};
+
+export const WithCloseButton: Story = {
+  render: () => {
+    return (
+      <div className="colgap">
+        <AlertWithCloseButton />
+        <AlertWithCloseButton>
+          <BodyLong>
+            Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
+            laboris ex. Labore ex occaecat proident qui qui fugiat magna. Fugiat
+            sint commodo consequat eu aute.
+          </BodyLong>
+          <Link href="#">Id elit esse enim reprehenderit</Link>
+        </AlertWithCloseButton>
+      </div>
+    );
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const buttons = canvas.getAllByTitle("Lukk Alert");
+
+    await step("click button", async () => {
+      await userEvent.click(buttons[0]);
+    });
+
+    const buttonsAfter = canvas.getAllByTitle("Lukk Alert");
+    expect(buttonsAfter.length).toBe(1);
+  },
+};

@navikt/core/react/src/chat/Bubble.tsx

@@ -17,6 +17,7 @@ export interface BubbleProps extends HTMLAttributes<HTMLDivElement> {
   timestamp?: string;
   /**
    * Background color on bubble
+   * @deprecated Use `variant` on Chat instead
    */
   backgroundColor?: string;
   /**
@@ -46,17 +47,20 @@ const Bubble = forwardRef<HTMLDivElement, BubbleProps>(
         {...rest}
       >
         {(timestamp || name) && (
-          <div
+          <h3
             className={cl(
               `navds-chat__top-text`,
               toptextPosition && `navds-chat__top-text--${toptextPosition}`
             )}
           >
-            {name && <Detail className="navds-chat__name">{name}</Detail>}
-            {timestamp && (
-              <Detail className="navds-chat__timestamp">{timestamp}</Detail>
+            {name && <Detail as="span">{name}</Detail>}
+            {name && timestamp && (
+              <Detail as="span" aria-hidden>
+                &bull;
+              </Detail>
             )}
-          </div>
+            {timestamp && <Detail as="span">{timestamp}</Detail>}
+          </h3>
         )}
         {children}
       </div>

@navikt/core/react/src/chat/Chat.tsx

@@ -1,7 +1,10 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "clsx";
-import Bubble, { BubbleProps } from "./Bubble";
-import { BodyLong, BodyShort } from "../typography";
+import Bubble from "./Bubble";
+import { BodyLong } from "../typography";
+
+export const POSITIONS = ["left", "right"] as const;
+export const SIZES = ["medium", "small"] as const;
 
 export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -17,27 +20,40 @@ export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
    */
   timestamp?: string;
   /**
-   * Avatar for messenger. Regular text for initials works to
+   * Avatar for messenger. Regular text for initials works too, but it will be hidden for screen readers.
    */
-  avatar: React.ReactNode;
+  avatar?: React.ReactNode;
+  /**
+   * Changes background color on avatar and bubbles.
+   * Avoid using the same background as the surface behind Chat.
+   * @default "neutral"
+   */
+  variant?: "subtle" | "info" | "neutral";
   /**
    * Background color on bubbles
+   * @deprecated Use `variant` instead
    */
   backgroundColor?: string;
   /**
    * Background color for avatar
+   * @deprecated Use `variant` instead
    */
   avatarBgColor?: string;
   /**
-   * Positions avatar and Bubbles
+   * Positions avatar and bubbles
    * @default "left"
    */
-  position?: "left" | "right";
+  position?: (typeof POSITIONS)[number];
   /**
    * Hoizontal position of toptext
-   * @default Same as chat
+   * @default Same as position
    */
-  toptextPosition?: "left" | "right";
+  toptextPosition?: (typeof POSITIONS)[number];
+  /**
+   * Affects padding and font size in bubbles
+   * @default "medium"
+   */
+  size?: (typeof SIZES)[number];
 }
 
 interface ChatComponent
@@ -47,24 +63,23 @@ interface ChatComponent
   /**
    * @see 🏷️ {@link BubbleProps}
    */
-  Bubble: React.ForwardRefExoticComponent<
-    BubbleProps & React.RefAttributes<HTMLDivElement>
-  >;
+  Bubble: typeof Bubble;
 }
 
 /**
- * A component for displaying chat messages.
+ * A component for communicating dialogs between two parties.
  *
  * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/chat)
  * @see 🏷️ {@link ChatProps}
  *
  * @example
  * ```jsx
- * <Chat>
- *   <Chat.Bubble avatar="A" name="Alice">Hello!</Chat.Bubble>
+ * <Chat avatar="A" name="Alice" timestamp="01.01.21 14:00">
+ *   <Chat.Bubble>Hello!</Chat.Bubble>
+ *   <Chat.Bubble>How can I help you?</Chat.Bubble>
  * </Chat>
- * <Chat>
- *   <Chat.Bubble avatar="B" name="Bob">Hi there!</Chat.Bubble>
+ * <Chat avatar="B" name="Bob" timestamp="01.01.21 14:01" position="right">
+ *   <Chat.Bubble>Hi there!</Chat.Bubble>
  * </Chat>
  * ```
  */
@@ -77,51 +92,54 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
       timestamp,
       avatar,
       position = "left",
+      variant = "neutral",
       avatarBgColor,
       backgroundColor,
       toptextPosition,
+      size = "medium",
       ...rest
-    },
+    }: ChatProps,
     ref
-  ) => {
-    return (
-      <div
-        ref={ref}
-        className={cl(
-          "navds-chat",
-          className,
-          `navds-chat--${position} navds-chat--top-text-${
-            toptextPosition ?? position
-          }`
-        )}
-        {...rest}
-      >
-        <BodyShort
-          as="div"
+  ) => (
+    <div
+      ref={ref}
+      className={cl(
+        "navds-chat",
+        className,
+        `navds-chat--${position}`,
+        `navds-chat--top-text-${toptextPosition ?? position}`,
+        `navds-chat--${size}`,
+        `navds-chat--${variant}`
+      )}
+      {...rest}
+    >
+      {avatar && (
+        <div
           className="navds-chat__avatar"
+          aria-hidden
           style={{ backgroundColor: avatarBgColor }}
         >
           {avatar}
-        </BodyShort>
-        <ol className="navds-chat__bubble-wrapper">
-          {React.Children.map(children, (child, i) => {
-            if (React.isValidElement(child)) {
-              return (
-                <BodyLong as="li">
-                  {React.cloneElement(child, {
-                    name: name && i === 0 ? name : undefined,
-                    timestamp: timestamp && i === 0 ? timestamp : undefined,
-                    backgroundColor,
-                    ...child.props,
-                  })}
-                </BodyLong>
-              );
-            }
-          })}
-        </ol>
-      </div>
-    );
-  }
+        </div>
+      )}
+      <ol className="navds-chat__bubble-wrapper">
+        {React.Children.map(children, (child, i) => {
+          if (React.isValidElement(child)) {
+            return (
+              <BodyLong as="li" size={size}>
+                {React.cloneElement(child, {
+                  name: name && i === 0 ? name : undefined,
+                  timestamp: timestamp && i === 0 ? timestamp : undefined,
+                  backgroundColor,
+                  ...child.props,
+                })}
+              </BodyLong>
+            );
+          }
+        })}
+      </ol>
+    </div>
+  )
 ) as ChatComponent;
 
 Chat.Bubble = Bubble;

@navikt/core/react/src/chat/chat.stories.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Chat } from "../index";
 import { Meta } from "@storybook/react";
+import { POSITIONS, SIZES } from "./Chat";
 
 export default {
   title: "ds-react/Chat",
@@ -16,19 +17,25 @@ export default {
         type: "text",
       },
     },
+    position: {
+      control: { type: "radio" },
+      options: POSITIONS,
+    },
+    toptextPosition: {
+      control: { type: "radio" },
+      options: POSITIONS,
+    },
+    size: {
+      control: { type: "radio" },
+      options: SIZES,
+    },
   },
-} as Meta;
+} satisfies Meta<typeof Chat>;
 
 export const Default = {
   render: (props) => {
     return (
-      <Chat
-        avatar={props?.avatar ?? "ON"}
-        name={props?.name ?? "Ola Normann"}
-        timestamp={props?.timestamp ?? "01.01.21 14:00"}
-        avatarBgColor={props?.avatarBgColor}
-        backgroundColor={props?.backgroundColor}
-      >
+      <Chat {...props}>
         <Chat.Bubble>
           Aute minim nisi sunt mollit duis sunt nulla minim non proident.
         </Chat.Bubble>
@@ -48,141 +55,156 @@ export const Default = {
   },
 };
 
-export const Farger = () => {
-  return (
+export const Small = () => (
+  <Chat avatar="ON" name="Ola Normann" timestamp="01.01.21 14:00" size="small">
+    <Chat.Bubble>
+      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+    </Chat.Bubble>
+    <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
+    <Chat.Bubble>
+      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+      labore nisi ut.
+    </Chat.Bubble>
+  </Chat>
+);
+
+export const Colors = () => (
+  <Chat
+    avatar="NAV"
+    name="NAV"
+    timestamp="01.01.21 14:00"
+    avatarBgColor="var(--a-surface-alt-1-subtle)"
+    backgroundColor="var(--a-surface-warning-subtle)"
+  >
+    <Chat.Bubble>
+      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+    </Chat.Bubble>
+    <Chat.Bubble backgroundColor="lightYellow">
+      Tempor fugiat amet eu sint in in ullamco.
+    </Chat.Bubble>
+    <Chat.Bubble>
+      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+      labore nisi ut.
+    </Chat.Bubble>
+  </Chat>
+);
+
+export const Variants = () => (
+  <div className="colgap">
+    <Chat avatar="NAV" name="NAV" timestamp="01.01.21 14:00" variant="info">
+      <Chat.Bubble>
+        Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+      </Chat.Bubble>
+    </Chat>
+    <Chat
+      avatar="KN"
+      name="Kari Nordmann"
+      timestamp="01.01.21 14:03"
+      variant="neutral"
+      position="right"
+    >
+      <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
+    </Chat>
+    <Chat
+      avatar="ON"
+      name="Ola Nordmann"
+      timestamp="01.01.21 14:07"
+      variant="subtle"
+      position="right"
+    >
+      <Chat.Bubble>
+        Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+        labore nisi ut.
+      </Chat.Bubble>
+    </Chat>
+  </div>
+);
+
+export const Position = () => (
+  <div className="colgap">
+    <Chat avatar="ON" name="Ola Normann" timestamp="01.01.21 14:00">
+      <Chat.Bubble>
+        Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+        labore nisi ut.
+      </Chat.Bubble>
+    </Chat>
+    <Chat
+      avatar="KH"
+      name="Kari Høyli"
+      timestamp="01.01.21 14:32"
+      position="right"
+      variant="info"
+    >
+      <Chat.Bubble>
+        Reprehenderit pariatur officia exercitation laboris.
+      </Chat.Bubble>
+      <Chat.Bubble>
+        Enim velit deserunt do quis. Eu fugiat magna esse dolore ad sunt sit est
+        dolore incididunt. Occaecat cupidatat magna.
+      </Chat.Bubble>
+    </Chat>
+    <Chat avatar="ON" name="Ola Normann" timestamp="01.01.21 15:00">
+      <Chat.Bubble>
+        Exercitation irure Lorem cupidatat culpa anim cillum esse ullamco qui
+        dolore laborum et Lorem. Labore sunt duis id Lorem voluptate commodo ea
+        esse. Dolore esse aliqua proident ea ad commodo ut dolore voluptate
+        labore sunt aute.
+      </Chat.Bubble>
+    </Chat>
+  </div>
+);
+
+export const ToptextPosition = () => (
+  <div className="colgap">
     <Chat
       avatar="ON"
       name="Ola Normann"
       timestamp="01.01.21 14:00"
-      avatarBgColor="var(--a-lightblue-200)"
-      backgroundColor="var(--a-lightblue-100)"
+      toptextPosition="right"
     >
-      <Chat.Bubble>
-        Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-      </Chat.Bubble>
-      <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
       <Chat.Bubble>
         Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
         labore nisi ut.
       </Chat.Bubble>
     </Chat>
-  );
-};
-
-export const Position = () => {
-  return (
-    <div className="colgap">
-      <Chat
-        avatar="ON"
-        name="Ola Normann"
-        timestamp="01.01.21 14:00"
-        backgroundColor="rgba(255, 249, 240, 1)"
-        avatarBgColor="rgba(255, 236, 204, 1)"
-      >
-        <Chat.Bubble>
-          Adipisicing laborum est eu laborum est sit in commodo enim sint
-          laboris labore nisi ut.
-        </Chat.Bubble>
-      </Chat>
-      <Chat
-        avatar="KH"
-        name="Kari Høyli"
-        timestamp="01.01.21 14:32"
-        position="right"
-        backgroundColor="rgba(230, 240, 255, 1)"
-        avatarBgColor="rgba(204, 225, 255, 1)"
-      >
-        <Chat.Bubble>
-          Reprehenderit pariatur officia exercitation laboris.
-        </Chat.Bubble>
-        <Chat.Bubble>
-          Enim velit deserunt do quis. Eu fugiat magna esse dolore ad sunt sit
-          est dolore incididunt. Occaecat cupidatat magna.
-        </Chat.Bubble>
-      </Chat>
-      <Chat
-        avatar="ON"
-        name="Ola Normann"
-        timestamp="01.01.21 15:00"
-        backgroundColor="rgba(255, 249, 240, 1)"
-        avatarBgColor="rgba(255, 236, 204, 1)"
-      >
-        <Chat.Bubble>
-          Exercitation irure Lorem cupidatat culpa anim cillum esse ullamco qui
-          dolore laborum et Lorem. Labore sunt duis id Lorem voluptate commodo
-          ea esse. Dolore esse aliqua proident ea ad commodo ut dolore voluptate
-          labore sunt aute.
-        </Chat.Bubble>
-      </Chat>
-    </div>
-  );
-};
-
-export const ToptextPosition = () => {
-  return (
-    <div className="colgap">
-      <Chat
-        avatar="ON"
-        name="Ola Normann"
-        timestamp="01.01.21 14:00"
-        backgroundColor="rgba(255, 249, 240, 1)"
-        avatarBgColor="rgba(255, 236, 204, 1)"
-        toptextPosition="right"
-      >
-        <Chat.Bubble>
-          Adipisicing laborum est eu laborum est sit in commodo enim sint
-          laboris labore nisi ut.
-        </Chat.Bubble>
-      </Chat>
-      <Chat
-        avatar="KH"
-        name="Kari Høyli"
-        timestamp="01.01.21 14:32"
-        position="right"
-        backgroundColor="rgba(230, 240, 255, 1)"
-        avatarBgColor="rgba(204, 225, 255, 1)"
-        toptextPosition="left"
-      >
-        <Chat.Bubble>
-          Reprehenderit pariatur officia exercitation laboris.
-        </Chat.Bubble>
-        <Chat.Bubble>
-          Enim velit deserunt do quis. Eu fugiat magna esse dolore ad sunt sit
-          est dolore incididunt. Occaecat cupidatat magna.
-        </Chat.Bubble>
-      </Chat>
-      <Chat
-        avatar="ON"
-        name="Ola Normann"
-        timestamp="01.01.21 15:00"
-        backgroundColor="rgba(255, 249, 240, 1)"
-        avatarBgColor="rgba(255, 236, 204, 1)"
-      >
-        <Chat.Bubble toptextPosition="right">
-          Exercitation irure Lorem cupidatat culpa anim cillum esse ullamco qui
-          dolore laborum et Lorem. Labore sunt duis id Lorem voluptate commodo
-          ea esse. Dolore esse aliqua proident ea ad commodo ut dolore voluptate
-          labore sunt aute.
-        </Chat.Bubble>
-      </Chat>
-    </div>
-  );
-};
-
-export const Avatar = () => {
-  return (
-    <Chat avatar={<Illustration />} timestamp="01.01.21 14:00">
+    <Chat
+      name="Kari Høyli"
+      timestamp="01.01.21 14:32"
+      position="right"
+      variant="info"
+      toptextPosition="left"
+    >
       <Chat.Bubble>
-        Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+        Reprehenderit pariatur officia exercitation laboris.
       </Chat.Bubble>
-      <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
       <Chat.Bubble>
-        Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
-        labore nisi ut.
+        Enim velit deserunt do quis. Eu fugiat magna esse dolore ad sunt sit est
+        dolore incididunt. Occaecat cupidatat magna.
       </Chat.Bubble>
     </Chat>
-  );
-};
+    <Chat avatar="ON" name="Ola Normann" timestamp="01.01.21 15:00">
+      <Chat.Bubble toptextPosition="right">
+        Exercitation irure Lorem cupidatat culpa anim cillum esse ullamco qui
+        dolore laborum et Lorem. Labore sunt duis id Lorem voluptate commodo ea
+        esse. Dolore esse aliqua proident ea ad commodo ut dolore voluptate
+        labore sunt aute.
+      </Chat.Bubble>
+    </Chat>
+  </div>
+);
+
+export const Avatar = () => (
+  <Chat avatar={<Illustration />} timestamp="01.01.21 14:00">
+    <Chat.Bubble>
+      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+    </Chat.Bubble>
+    <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
+    <Chat.Bubble>
+      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+      labore nisi ut.
+    </Chat.Bubble>
+  </Chat>
+);
 
 const Illustration = () => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 93">

@navikt/core/react/src/date/datepicker/DatePicker.tsx

@@ -257,6 +257,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
               role="dialog"
               ref={ref}
               strategy={strategy}
+              className="navds-date__popover"
               bubbleEscape={bubbleEscape}
             >
               <DayPicker

@navikt/core/react/src/date/monthpicker/MonthPicker.tsx

@@ -208,7 +208,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
               role="dialog"
               ref={ref}
               id={ariaId}
-              className="navds-date"
+              className="navds-date navds-date__popover"
               strategy={strategy}
               bubbleEscape={bubbleEscape}
             >

@navikt/core/react/src/form/Textarea.tsx

@@ -203,8 +203,8 @@ export const Counter = ({ maxLength, currentLength, size, i18n }) => {
       size={size}
     >
       {difference < 0
-        ? `${Math.abs(difference)} ${i18n?.counterLeft ?? "tegn for mye"}`
-        : `${difference} ${i18n?.counterTooMuch ?? "tegn igjen"}`}
+        ? `${Math.abs(difference)} ${i18n?.counterTooMuch ?? "tegn for mye"}`
+        : `${difference} ${i18n?.counterLeft ?? "tegn igjen"}`}
     </BodyShort>
   );
 };

@navikt/core/react/src/form/error-summary/ErrorSummary.tsx

@@ -29,6 +29,18 @@ interface ErrorSummaryComponent
   extends React.ForwardRefExoticComponent<
     ErrorSummaryProps & React.RefAttributes<HTMLDivElement>
   > {
+  /**
+   * Link to error
+   *
+   * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+   *
+   * @example
+   * ```jsx
+   * <ErrorSummary.Item href="#1">
+   *   Felt må fylles ut med alder
+   * </ErrorSummary.Item>
+   * ```
+   */
   Item: ErrorSummaryItemType;
 }
 

@navikt/core/react/src/form/error-summary/ErrorSummaryItem.tsx

@@ -8,6 +8,10 @@ export interface ErrorSummaryItemProps
    * Link text
    */
   children: React.ReactNode;
+  /**
+   * Link to errormessage
+   */
+  href?: string;
 }
 
 export type ErrorSummaryItemType = OverridableComponent<

@navikt/core/react/src/help-text/HelpText.tsx

@@ -29,6 +29,10 @@ export interface HelpTextProps
     | "right-end"
     | "left-start"
     | "left-end";
+  /**
+   * Classname for wrapper
+   */
+  wrapperClassName?: string;
 }
 
 /**
@@ -53,6 +57,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
       strategy = "absolute",
       title = "hjelp",
       onClick,
+      wrapperClassName,
       ...rest
     },
     ref
@@ -62,7 +67,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
     const [open, setOpen] = useState(false);
 
     return (
-      <div className="navds-help-text">
+      <div className={cl("navds-help-text", wrapperClassName)}>
         <button
           {...rest}
           ref={mergedRef}

@navikt/core/react/src/help-text/help-text.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from "react";
-import { HelpText } from "..";
+import { BodyLong, Heading, HelpText } from "..";
 
 export default {
   title: "ds-react/HelpText",
@@ -65,3 +65,36 @@ export const Open = () => {
     </HelpText>
   );
 };
+
+export const WrapperClassName = {
+  render: () => {
+    return (
+      <div>
+        <BodyLong spacing>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
+          perspiciatis vero voluptatum, asperiores cumque, deserunt accusantium
+          ullam ipsa accusamus officia cupiditate quae unde esse culpa, ratione
+          ab quam ea quas?
+        </BodyLong>
+
+        <Heading level="2" size="medium">
+          67 år og 1 måneder øklasdjkl askdak døkasøk daøkdkølasøkld asølkdøka
+          <HelpText wrapperClassName="testClass">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
+            perspiciatis vero voluptatum, asperiores cumque, deserunt
+            accusantium ullam ipsa accusamus officia cupiditate quae unde esse
+            culpa, ratione ab quam ea quas?
+          </HelpText>
+          <style>{`.testClass {display: inline-block; margin-left: 0.5rem; vertical-align: middle;}`}</style>
+        </Heading>
+
+        <BodyLong spacing>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
+          perspiciatis vero voluptatum, asperiores cumque, deserunt accusantium
+          ullam ipsa accusamus officia cupiditate quae unde esse culpa, ratione
+          ab quam ea quas?
+        </BodyLong>
+      </div>
+    );
+  },
+};

@navikt/core/react/src/popover/Popover.tsx

@@ -1,8 +1,8 @@
 import {
-  arrow as flArrow,
   autoUpdate,
-  flip,
+  arrow as flArrow,
   offset as flOffset,
+  flip,
   shift,
   useClick,
   useDismiss,
@@ -11,8 +11,8 @@ import {
 } from "@floating-ui/react";
 import cl from "clsx";
 import React, {
-  forwardRef,
   HTMLAttributes,
+  forwardRef,
   useCallback,
   useMemo,
   useRef,
@@ -141,8 +141,8 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       onOpenChange: onClose,
       middleware: [
         flOffset(offset ?? (arrow ? 16 : 4)),
-        shift(),
         flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
+        shift({ padding: 12 }),
         flArrow({ element: arrowRef, padding: 8 }),
       ],
     });

@navikt/core/react/src/timeline/Pin.tsx

@@ -11,15 +11,9 @@ import {
   useHover,
   useInteractions,
 } from "@floating-ui/react";
-import { useEventListener, mergeRefs } from "../util";
 import { format } from "date-fns";
-import React, {
-  forwardRef,
-  useCallback,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import React, { forwardRef, useMemo, useRef, useState } from "react";
+import { mergeRefs } from "../util";
 import { useTimelineContext } from "./hooks/useTimelineContext";
 import { position } from "./utils/calc";
 import { TimelineComponentTypes } from "./utils/types.internal";
@@ -83,22 +77,6 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
       [ref, refs.setReference]
     );
 
-    useEventListener(
-      "focusin",
-      useCallback(
-        (e: FocusEvent) => {
-          if (
-            ![refs.domReference.current, refs?.floating?.current].some(
-              (element) => element?.contains(e.target as Node)
-            )
-          ) {
-            open && setOpen(false);
-          }
-        },
-        [open, refs.domReference, refs?.floating]
-      )
-    );
-
     const staticSide = {
       top: "bottom",
       right: "left",
@@ -139,6 +117,10 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
             ref={refs.setFloating}
             {...getFloatingProps({
               tabIndex: -1,
+              onBlur: (e) =>
+                e.target.previousSibling !== document.activeElement &&
+                open &&
+                setOpen(false),
             })}
             style={{
               ...floatingStyles,

@navikt/core/react/src/timeline/TimelineRow.tsx

@@ -72,6 +72,7 @@ export const TimelineRow = forwardRef<HTMLOListElement, TimelineRowProps>(
         >
           <ol
             {...rest}
+            tabIndex={-1}
             ref={ref}
             aria-label={
               periods.length === 0

@navikt/core/react/src/timeline/period/ClickablePeriod.tsx

@@ -11,9 +11,9 @@ import {
   useHover,
   useInteractions,
 } from "@floating-ui/react";
-import { useEventListener, mergeRefs } from "../../util";
 import cl from "clsx";
-import React, { useCallback, useMemo, useRef, useState } from "react";
+import React, { useMemo, useRef, useState } from "react";
+import { mergeRefs } from "../../util";
 import { usePeriodContext } from "../hooks/usePeriodContext";
 import { useRowContext } from "../hooks/useRowContext";
 import { useTimelineContext } from "../hooks/useTimelineContext";
@@ -85,22 +85,6 @@ const ClickablePeriod = React.memo(
       [periodRef, refs.setReference]
     );
 
-    useEventListener(
-      "focusin",
-      useCallback(
-        (e: FocusEvent) => {
-          if (
-            ![refs.domReference.current, refs?.floating?.current].some(
-              (element) => element?.contains(e.target as Node)
-            )
-          ) {
-            open && setOpen(false);
-          }
-        },
-        [open, refs.domReference, refs?.floating]
-      )
-    );
-
     const staticSide = {
       top: "bottom",
       right: "left",
@@ -165,6 +149,10 @@ const ClickablePeriod = React.memo(
             ref={refs.setFloating}
             {...getFloatingProps({
               tabIndex: -1,
+              onBlur: (e) =>
+                e.target.previousSibling !== document.activeElement &&
+                open &&
+                setOpen(false),
             })}
             style={{
               ...floatingStyles,

@navikt/core/tailwind/CHANGELOG.md

@@ -1,251 +1,33 @@
 # @navikt/ds-tailwind
 
-## 4.1.5
+## 4.5.0
 
-## 4.1.4
+## 4.4.2
 
-## 4.1.3
+## 4.4.1
 
-## 4.1.2
+## 4.4.0
 
-## 4.1.1
+### Minor Changes
+
+- Shadow-tokens er oppdatert ([PR](https://github.com/navikt/aksel/pull/2041))
+
+- Oppdatert text-subtle og icon-subtle tokens til 700-skala (tidligere 600). ([PR](https://github.com/navikt/aksel/pull/2036))
 
 ## 4.1.0
 
-## 4.0.0
+### Minor Changes
 
-## 3.4.2
-
-## 3.4.1
-
-## 3.4.0
-
-## 3.3.1
-
-## 3.3.0
-
-## 3.2.4
-
-## 3.2.3
-
-## 3.2.2
-
-## 3.2.1
-
-## 3.2.0
-
-## 3.1.3
-
-## 3.1.2
-
-## 3.1.1
-
-## 3.1.0
-
-## 3.0.1
-
-## 3.0.0
-
-## 2.9.8
-
-## 2.9.7
-
-## 2.9.6
-
-## 2.9.5
-
-## 2.9.4
-
-## 2.9.3
-
-## 2.9.2
-
-## 2.9.1
-
-## 2.9.0
-
-## 2.8.16
-
-## 2.8.15
-
-### Patch Changes
-
-- [#1930](https://github.com/navikt/aksel/pull/1930) [`6682be1c8`](https://github.com/navikt/aksel/commit/6682be1c8e6562213c64e5be4bed70fef54ab865) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Alle pakker implementerer nå npm provenance (beta)
-
-## 2.8.14
-
-## 2.8.13
-
-## 2.8.12
-
-## 2.8.11
-
-## 2.8.10
-
-## 2.8.9
-
-## 2.8.8
-
-## 2.8.7
-
-## 2.8.6
-
-## 2.8.5
-
-## 2.8.4
-
-## 2.8.3
-
-## 2.8.2
-
-## 2.8.1
-
-## 2.8.0
-
-## 2.7.8
-
-## 2.7.7
-
-## 2.7.6
-
-## 2.7.5
-
-## 2.7.4
-
-## 2.7.3
-
-## 2.7.2
-
-## 2.7.1
-
-## 2.7.0
-
-## 2.6.2
-
-## 2.6.1
-
-## 2.6.0
-
-## 2.5.1
+- :tada: Fargetokens for datavisualisering. ([PR](https://github.com/navikt/aksel/pull/2032))
 
 ## 2.5.0
 
 ### Minor Changes
 
-- [#1832](https://github.com/navikt/aksel/pull/1832) [`8893b5c82`](https://github.com/navikt/aksel/commit/8893b5c82daf7c23897019fda912e702a1f05eaa) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Breakpoint-tokens for ds-tokens og ds-tailwind
-
-## 2.4.3
-
-## 2.4.2
-
-### Patch Changes
-
-- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
-
-## 2.4.1
-
-## 2.4.0
-
-## 2.3.1
-
-## 2.3.0
-
-## 2.2.0
-
-## 2.1.7
-
-## 2.1.6
-
-## 2.1.5
-
-## 2.1.4
-
-## 2.1.3
-
-## 2.1.2
-
-## 2.1.1
-
-## 2.1.0
-
-## 2.0.18
-
-## 2.0.17
-
-## 2.0.16
-
-## 2.0.15
-
-## 2.0.14
-
-## 2.0.13
-
-## 2.0.12
-
-## 2.0.11
-
-## 2.0.10
-
-## 2.0.9
-
-## 2.0.8
-
-## 2.0.7
-
-## 2.0.6
-
-## 2.0.5
-
-## 2.0.4
-
-## 2.0.3
-
-## 2.0.2
-
-## 2.0.1
+- Breakpoint-tokens er lagt til. Overskriver native tailwind-breakpoints ([PR](https://github.com/navikt/aksel/pull/1832))
 
 ## 2.0.0
 
 ### Major Changes
 
-- [`6b96e4833`](https://github.com/navikt/aksel/commit/6b96e48330c2e013a1acee85cefccd9ccc1aece4) Thanks [@KenAJoh](https://github.com/KenAJoh)! - v2: Tokens update and font-loading
-
-## 1.5.10
-
-## 1.5.9
-
-## 1.5.8
-
-## 1.5.7
-
-## 1.5.6
-
-## 1.5.5
-
-## 1.5.4
-
-## 1.5.3
-
-## 1.5.2
-
-## 1.5.1
-
-## 1.5.0
-
-## 1.4.4
-
-## 1.4.3
-
-## 1.4.2
-
-## 1.4.1
-
-## 1.4.0
-
-## 1.3.39
-
-### Patch Changes
-
-- [`40f0b3340`](https://github.com/navikt/aksel/commit/40f0b3340d01bf85fecc04f2f3a8e8b2acf996f1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bump for latest-tag
-
-## 1.3.38
+- Alle token er oppdatert til nytt format. ([Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112))

@navikt/core/tailwind/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tailwind",
-  "version": "4.1.5",
+  "version": "4.5.0",
   "description": "Tailwind config based on @navikt/ds-tokens",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -22,7 +22,7 @@
     "directory": "@navikt/core/tailwind"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^4.1.5",
+    "@navikt/ds-tokens": "^4.5.0",
     "@types/jest": "^29.0.0",
     "color": "4.2.3",
     "jest": "^29.0.0",

@navikt/core/tokens/CHANGELOG.md

@@ -1,281 +1,47 @@
 # @navikt/ds-tokens
 
-## 4.1.5
+## 4.5.0
 
-## 4.1.4
+## 4.4.2
 
-## 4.1.3
+## 4.4.1
 
-## 4.1.2
+## 4.4.0
 
-## 4.1.1
+### Minor Changes
+
+- Shadow-tokens er oppdatert til mer tydeligere varianter ([PR](https://github.com/navikt/aksel/pull/2041))
 
 ## 4.1.0
 
 ### Minor Changes
 
-- [#2032](https://github.com/navikt/aksel/pull/2032) [`6aca0a4b6`](https://github.com/navikt/aksel/commit/6aca0a4b6aa063a2fdbb30f679c871898074dd74) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: Fargetokens for datavisualisering.
+- :tada: Fargetokens for datavisualisering. ([PR](https://github.com/navikt/aksel/pull/2032))
 
-  6 varianter for surface,surface-subtle og border.
-
-  ```css
-  background-color: var(--a-data-surface-1-subtle);
-  border-color: var(--a-data-1-border);
-  ```
-
-- [#2036](https://github.com/navikt/aksel/pull/2036) [`b2f796d68`](https://github.com/navikt/aksel/commit/b2f796d681f1c1d76d26d1fd743268c8c618a854) Thanks [@KenAJoh](https://github.com/KenAJoh)! - - Oppdatert text-subtle og icon-subtle tokens til 700-skala (tidligere 600).
-  - Icon-subtle bruker nå grayalpha.
-  - Alle description-felter på fieldsets har nå text-subtle som farge.
-
-## 4.0.0
-
-## 3.4.2
-
-## 3.4.1
-
-## 3.4.0
-
-### Minor Changes
-
-- [#2010](https://github.com/navikt/aksel/pull/2010) [`b958d41a2`](https://github.com/navikt/aksel/commit/b958d41a20c66327658514fcf24ae20893c9531a) Thanks [@HalvorHaugan](https://github.com/HalvorHaugan)! - Ny variant "moderate" i Tag
-
-## 3.3.1
-
-## 3.3.0
-
-## 3.2.4
-
-## 3.2.3
-
-## 3.2.2
-
-## 3.2.1
-
-## 3.2.0
-
-## 3.1.3
-
-## 3.1.2
-
-## 3.1.1
-
-## 3.1.0
-
-## 3.0.1
-
-## 3.0.0
-
-## 2.9.8
-
-## 2.9.7
-
-## 2.9.6
-
-## 2.9.5
-
-## 2.9.4
-
-## 2.9.3
-
-## 2.9.2
-
-## 2.9.1
-
-## 2.9.0
-
-## 2.8.16
-
-## 2.8.15
-
-### Patch Changes
-
-- [#1930](https://github.com/navikt/aksel/pull/1930) [`6682be1c8`](https://github.com/navikt/aksel/commit/6682be1c8e6562213c64e5be4bed70fef54ab865) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Alle pakker implementerer nå npm provenance (beta)
-
-## 2.8.14
-
-## 2.8.13
-
-## 2.8.12
-
-## 2.8.11
-
-## 2.8.10
-
-## 2.8.9
-
-## 2.8.8
-
-## 2.8.7
-
-## 2.8.6
-
-## 2.8.5
-
-## 2.8.4
-
-## 2.8.3
-
-## 2.8.2
-
-## 2.8.1
-
-## 2.8.0
-
-## 2.7.8
-
-## 2.7.7
-
-## 2.7.6
-
-## 2.7.5
-
-## 2.7.4
-
-## 2.7.3
-
-## 2.7.2
-
-## 2.7.1
-
-## 2.7.0
-
-## 2.6.2
-
-## 2.6.1
-
-## 2.6.0
-
-## 2.5.1
+- Oppdatert text-subtle og icon-subtle tokens til 700-skala (tidligere 600). ([PR](https://github.com/navikt/aksel/pull/2036))
 
 ## 2.5.0
 
 ### Minor Changes
 
-- [#1832](https://github.com/navikt/aksel/pull/1832) [`8893b5c82`](https://github.com/navikt/aksel/commit/8893b5c82daf7c23897019fda912e702a1f05eaa) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Breakpoint-tokens for ds-tokens og ds-tailwind
-
-## 2.4.3
-
-## 2.4.2
-
-### Patch Changes
-
-- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
-
-## 2.4.1
-
-## 2.4.0
-
-## 2.3.1
-
-## 2.3.0
+- Breakpoint-tokens lagt til ([PR](https://github.com/navikt/aksel/pull/1832))
 
 ## 2.2.0
 
 ### Minor Changes
 
-- [#1787](https://github.com/navikt/aksel/pull/1787) [`43463444b`](https://github.com/navikt/aksel/commit/43463444b8a2d178bf1435b88ad2d8719b41e65b) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Justeringer i semantiske fargetokens, statusfarger nå mer tydelig
+- Justeringer av semantiske fargetokens, statusfarger nå mer tydelig ([PR](https://github.com/navikt/aksel/pull/1787))
 
-- [#1789](https://github.com/navikt/aksel/pull/1789) [`c0929a534`](https://github.com/navikt/aksel/commit/c0929a534dc8effece5435f8be550cb7931a52b1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Button og ToggleGroup har nå en neutral-variant, oppdatert neutral-tokens
-
-## 2.1.7
-
-## 2.1.6
-
-## 2.1.5
-
-## 2.1.4
-
-## 2.1.3
-
-## 2.1.2
-
-## 2.1.1
+- Oppdatert neutral-tokens ([PR](https://github.com/navikt/aksel/pull/1789))
 
 ## 2.1.0
 
 ### Patch Changes
 
-- [#1665](https://github.com/navikt/aksel/pull/1665) [`6ab84e581`](https://github.com/navikt/aksel/commit/6ab84e581f8d3e850bcec340608354335506a051) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Ny Timeline-komponent for interne-flater
-  :bug: Fikset feil danger-hover token
-
-## 2.0.18
-
-## 2.0.17
-
-## 2.0.16
-
-## 2.0.15
-
-## 2.0.14
-
-## 2.0.13
-
-## 2.0.12
-
-## 2.0.11
-
-## 2.0.10
-
-## 2.0.9
-
-## 2.0.8
-
-## 2.0.7
-
-## 2.0.6
-
-## 2.0.5
-
-## 2.0.4
-
-## 2.0.3
-
-## 2.0.2
-
-## 2.0.1
+- Fikset feil danger-hover token ([PR](https://github.com/navikt/aksel/pull/1665))
 
 ## 2.0.0
 
 ### Major Changes
 
-- [`6b96e4833`](https://github.com/navikt/aksel/commit/6b96e48330c2e013a1acee85cefccd9ccc1aece4) Thanks [@KenAJoh](https://github.com/KenAJoh)! - v2: Tokens update and font-loading
-
-## 1.5.10
-
-## 1.5.9
-
-## 1.5.8
-
-## 1.5.7
-
-## 1.5.6
-
-## 1.5.5
-
-## 1.5.4
-
-## 1.5.3
-
-## 1.5.2
-
-## 1.5.1
-
-## 1.5.0
-
-## 1.4.4
-
-## 1.4.3
-
-## 1.4.2
-
-## 1.4.1
-
-## 1.4.0
-
-## 1.3.39
-
-### Patch Changes
-
-- [`40f0b3340`](https://github.com/navikt/aksel/commit/40f0b3340d01bf85fecc04f2f3a8e8b2acf996f1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bump for latest-tag
-
-## 1.3.38
+- Alle token er oppdatert til nytt format. ([Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112))

@navikt/core/tokens/docs.json

@@ -238,15 +238,15 @@
       "name": "--a-text-action-on-action-subtle",
       "value": "rgba(0, 86, 180, 1)"
     },
+    { "name": "--a-text-on-warning", "value": "rgba(38, 38, 38, 1)" },
+    { "name": "--a-text-on-info", "value": "rgba(38, 38, 38, 1)" },
+    { "name": "--a-text-on-alt-2", "value": "rgba(38, 38, 38, 1)" },
     { "name": "--a-text-on-inverted", "value": "rgba(255, 255, 255, 1)" },
     { "name": "--a-text-on-neutral", "value": "rgba(255, 255, 255, 1)" },
     { "name": "--a-text-on-action", "value": "rgba(255, 255, 255, 1)" },
     { "name": "--a-text-on-success", "value": "rgba(255, 255, 255, 1)" },
     { "name": "--a-text-on-danger", "value": "rgba(255, 255, 255, 1)" },
-    { "name": "--a-text-on-warning", "value": "rgba(38, 38, 38, 1)" },
-    { "name": "--a-text-on-info", "value": "rgba(38, 38, 38, 1)" },
     { "name": "--a-text-on-alt-1", "value": "rgba(255, 255, 255, 1)" },
-    { "name": "--a-text-on-alt-2", "value": "rgba(38, 38, 38, 1)" },
     { "name": "--a-text-on-alt-3", "value": "rgba(255, 255, 255, 1)" }
   ],
   "semantic-surface-default": [
@@ -317,15 +317,15 @@
   ],
   "semantic-surface-warning": [
     { "name": "--a-surface-warning-subtle", "value": "rgba(255, 236, 204, 1)" },
+    {
+      "name": "--a-surface-warning-subtle-hover",
+      "value": "rgba(255, 215, 153, 1)"
+    },
     {
       "name": "--a-surface-warning-moderate",
       "value": "rgba(255, 215, 153, 1)"
     },
-    { "name": "--a-surface-warning", "value": "rgba(255, 145, 0, 1)" },
-    {
-      "name": "--a-surface-warning-subtle-hover",
-      "value": "rgba(255, 215, 153, 1)"
-    }
+    { "name": "--a-surface-warning", "value": "rgba(255, 145, 0, 1)" }
   ],
   "semantic-surface-info": [
     { "name": "--a-surface-info-subtle", "value": "rgba(216, 249, 255, 1)" },
@@ -474,22 +474,25 @@
     { "name": "--a-border-radius-full", "value": "9999px" }
   ],
   "shadow": [
-    { "name": "--a-shadow-xsmall", "value": "0 1px 2px 0 rgba(0, 0, 0, 0.12)" },
+    {
+      "name": "--a-shadow-xsmall",
+      "value": "0px 1px 3px 0px rgba(0, 0, 0, 0.15), 0px 0px 1px 0px rgba(0, 0, 0, 0.20)"
+    },
     {
       "name": "--a-shadow-small",
-      "value": "0 1px 2px -1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1)"
+      "value": "0px 3px 8px 0px rgba(0, 0, 0, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 0px 1px 0px rgba(0, 0, 0, 0.18)"
     },
     {
       "name": "--a-shadow-medium",
-      "value": "0 2px 4px -2px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.1)"
+      "value": "0px 5px 12px 0px rgba(0, 0, 0, 0.13), 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 0px 1px 0px rgba(0, 0, 0, 0.15)"
     },
     {
       "name": "--a-shadow-large",
-      "value": "0 4px 6px -4px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1)"
+      "value": "0px 2px 5px 0px rgba(0, 0, 0, 0.15), 0px 10px 16px 0px rgba(0, 0, 0, 0.12), 0px 0px 1px 0px rgba(0, 0, 0, 0.12)"
     },
     {
       "name": "--a-shadow-xlarge",
-      "value": "0 8px 10px -6px rgba(0, 0, 0, 0.1), 0 25px 50px -5px rgba(0, 0, 0, 0.1)"
+      "value": "0px 2px 5px 0px rgba(0, 0, 0, 0.15), 0px 10px 24px 0px rgba(0, 0, 0, 0.18), 0px 0px 1px 0px rgba(0, 0, 0, 0.08)"
     },
     { "name": "--a-shadow-focus", "value": "0 0 0 3px rgba(0, 52, 125, 1)" },
     {

@navikt/core/tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tokens",
-  "version": "4.1.5",
+  "version": "4.5.0",
   "description": "Design-tokens for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [

@navikt/core/tokens/src/shadow.json

@@ -2,19 +2,19 @@
   "a": {
     "shadow": {
       "xsmall": {
-        "value": "0 1px 2px 0 rgba(0, 0, 0, 0.12)"
+        "value": "0px 1px 3px 0px rgba(0, 0, 0, 0.15), 0px 0px 1px 0px rgba(0, 0, 0, 0.20)"
       },
       "small": {
-        "value": "0 1px 2px -1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1)"
+        "value": "0px 3px 8px 0px rgba(0, 0, 0, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 0px 1px 0px rgba(0, 0, 0, 0.18)"
       },
       "medium": {
-        "value": "0 2px 4px -2px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.1)"
+        "value": "0px 5px 12px 0px rgba(0, 0, 0, 0.13), 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 0px 1px 0px rgba(0, 0, 0, 0.15)"
       },
       "large": {
-        "value": "0 4px 6px -4px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1)"
+        "value": "0px 2px 5px 0px rgba(0, 0, 0, 0.15), 0px 10px 16px 0px rgba(0, 0, 0, 0.12), 0px 0px 1px 0px rgba(0, 0, 0, 0.12)"
       },
       "xlarge": {
-        "value": "0 8px 10px -6px rgba(0, 0, 0, 0.1), 0 25px 50px -5px rgba(0, 0, 0, 0.1)"
+        "value": "0px 2px 5px 0px rgba(0, 0, 0, 0.15), 0px 10px 24px 0px rgba(0, 0, 0, 0.18), 0px 0px 1px 0px rgba(0, 0, 0, 0.08)"
       },
       "focus": {
         "inverted": {

@navikt/core/tokens/stories/shadows.stories.tsx

@@ -10,9 +10,8 @@ const Shadow = ({ token }) => (
     <div className="shadow" style={{ boxShadow: token }} />
     <style>{`
     .shadow {
-      width: 4rem;
-      height: 4rem;
-      background: #f7f7f7;
+      width: 12rem;
+      height: 6rem;
       border-radius: 16px;
     }
     `}</style>
@@ -23,7 +22,7 @@ export const XSmall = () => <Shadow token="var(--a-shadow-xsmall)" />;
 export const Small = () => <Shadow token="var(--a-shadow-small)" />;
 export const Medium = () => <Shadow token="var(--a-shadow-medium)" />;
 export const Large = () => <Shadow token="var(--a-shadow-large)" />;
-export const XxLarge = () => <Shadow token="var(--a-shadow-xlarge)" />;
+export const XLarge = () => <Shadow token="var(--a-shadow-xlarge)" />;
 export const Focus = () => <Shadow token="var(--a-shadow-focus)" />;
 export const FocusInverted = () => (
   <Shadow token="var(--a-shadow-focus-inverted)" />

CHANGELOG.md

@@ -0,0 +1,867 @@
+# Changelog
+
+## 4.5.0
+
+### @navikt/ds-react
+
+- - Alert: La til `closeButton`-prop ([#2079](https://github.com/navikt/aksel/pull/2079))
+
+### @navikt/ds-css
+
+- - Alert: La til `closeButton`-prop ([#2079](https://github.com/navikt/aksel/pull/2079))
+
+<!---->
+
+- - Button: Fikset outline-bug i tertiary-variant ved `:active`-state ([#2079](https://github.com/navikt/aksel/pull/2079))
+
+## 4.4.2
+
+### @navikt/ds-react
+
+- Textarea: Fikset i18n for counter ([`718b3204d`](https://github.com/navikt/aksel/commit/718b3204d8714c4fc515dcad484424214bdc0c77))
+
+## 4.4.1
+
+### @navikt/ds-css
+
+- :lipstick: Chat: fjernet border, satt avatar svg til 24x24px, byttet om "subtle" og "neutral" ([#2077](https://github.com/navikt/aksel/pull/2077))
+
+## 4.4.0
+
+### @navikt/ds-tailwind
+
+- Shadow-tokens er oppdatert ([PR](https://github.com/navikt/aksel/pull/2041))
+
+- Oppdatert text-subtle og icon-subtle tokens til 700-skala (tidligere 600). ([PR](https://github.com/navikt/aksel/pull/2036))
+
+### @navikt/ds-react
+
+- Fikset klassenavn brukt for popover i Datepicker og Monthpicker ([PR](https://github.com/navikt/aksel/pull/2041))
+
+### @navikt/ds-tokens
+
+- Shadow-tokens er oppdatert til mer tydeligere varianter ([PR](https://github.com/navikt/aksel/pull/2041))
+
+### @navikt/ds-css
+
+- Shadow-tokens er oppdatert: Datepicker har nå ikke border, Modal bruker shadow-xlarge, LinkCard bruker shadow-xsmall ([PR](https://github.com/navikt/aksel/pull/2041))
+
+## 4.3.0
+
+### @navikt/ds-react
+
+- Popover og Helptext har nå luft mot siden av skjerm på mindre flater ([PR](https://github.com/navikt/aksel/pull/2069))
+
+### @navikt/ds-css
+
+- Popover/Helptext: Maksbredde på 100vw - 1.5rem. Treffer ikke lengre kanten på skjermen. ([PR](https://github.com/navikt/aksel/pull/2069))
+
+<!---->
+
+- ExpansionCard: Ved nesting av komponetene fikk man styling fra parent ([PR](https://github.com/navikt/aksel/pull/2067))
+
+## 4.2.0
+
+### @navikt/ds-react
+
+- Oppdatert Chat: `size` og `variant`-prop, optional `avatar`, uu og ui-forbedringer ([PR](https://github.com/navikt/aksel/pull/2048))
+
+### @navikt/ds-css
+
+- Chat: `small`-size, innebygde varianter for farge og oppdatert utseende. ([PR](https://github.com/navikt/aksel/pull/2048))
+
+## 4.1.7
+
+### @navikt/ds-react
+
+- Fikset JSDom-problemer ved testing av Timeline
+
+- La til `wrapperClassname`-prop for HelpText ([PR](https://github.com/navikt/aksel/pull/2056))
+
+## 4.1.6
+
+### @navikt/ds-react
+
+- Timeline-period brakk ved bruk av JSDom i vitest og jest
+
+## 4.1.5
+
+### @navikt/ds-react
+
+- `OverridableComponent` fungerer nå med komponenter som allerede bruker 'as'-prop. ([PR](https://github.com/navikt/aksel/pull/2051))
+
+- Popover: `bubbleEscape`-prop tilbyr muligheten for escape-events til å sendes opp gjennom dom-treet. ([PR](https://github.com/navikt/aksel/pull/2052))
+
+### @navikt/aksel-icons
+
+- Nye ikoner `ChevronRightLast` og `ChevronLeftLast` ([PR](https://github.com/navikt/aksel/pull/2054))
+
+## 4.1.4
+
+### @navikt/ds-css
+
+- Readmore: setter nå eksplisitt color for å ikke arve text-subtle fra parent. ([PR](https://github.com/navikt/aksel/pull/2049))
+
+## 4.1.3
+
+### @navikt/ds-react
+
+- `className` ble ikke riktig forwardet til ikke-klikkbar Period i Timeline
+
+## 4.1.2
+
+### @navikt/ds-react
+
+- La til JSDoc for Skeleton-komponent
+
+## 4.1.1
+
+### @navikt/ds-css
+
+- :bug: Fikset cursor-markering av tekst i skeleton.
+
+## 4.1.0
+
+### @navikt/ds-tailwind
+
+- :tada: Fargetokens for datavisualisering. ([PR](https://github.com/navikt/aksel/pull/2032))
+
+### @navikt/ds-react
+
+- Chips: `neutral` og `action`-varianter for Chips.Toggle. `checkmark`-prop for Chips.Toggle ([PR](https://github.com/navikt/aksel/pull/2035))
+
+- Ny komponent Skeleton! ([PR](https://github.com/navikt/aksel/pull/1821))
+
+<!---->
+
+- La til JSDoc dokumentasjon for alle komponenter ([PR](https://github.com/navikt/aksel/pull/2034))
+
+- Accordion: La til `indent`-prop ([PR](https://github.com/navikt/aksel/pull/2027))
+
+### @navikt/ds-tokens
+
+- :tada: Fargetokens for datavisualisering. ([PR](https://github.com/navikt/aksel/pull/2032))
+
+- Oppdatert text-subtle og icon-subtle tokens til 700-skala (tidligere 600). ([PR](https://github.com/navikt/aksel/pull/2036))
+
+### @navikt/ds-css
+
+- Chips: `neutral` og `action`-varianter av Chips.Toggle. Opt-out mulighet for Checkmark. Oppdatert checkmark-ikon ([PR](https://github.com/navikt/aksel/pull/2035))
+
+- Alle description-felter på fieldsets har nå `text-subtle` som farge. ([PR](https://github.com/navikt/aksel/pull/2036))
+
+### @navikt/aksel-stylelint
+
+- Deprecated klassenavn `navds-chips--icon-left` ([PR](https://github.com/navikt/aksel/pull/2035))
+
+## 4.0.0
+
+### @navikt/ds-react
+
+- Datepicker og Monthpicker er ute av beta. [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h4ef68ae743b0) ([PR](https://github.com/navikt/aksel/pull/2026))
+
+- Komponenter i `@navikt/ds-react-internal` er flyttet over til `@navikt/ds-react`. [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h3b8538e1981d) ([PR](https://github.com/navikt/aksel/pull/2026))
+
+### @navikt/ds-css
+
+- All styling fra `@navikt/ds-css-internal` er flyttet til `@navikt/ds-css`. ([PR](https://github.com/navikt/aksel/pull/2026))
+
+- classname-prefix er endret fra `navdsi` -> `navds` for flyttede komponenter.
+
+- Fikset cascading-problem mellom dropdown og popover. Dropdown blir ikke lengre påvirket av import-rekkefølge av popover.
+
+- Styling for flyttede komponenter finnes nå på CDN [Guide](https://aksel.nav.no/grunnleggende/kode/css-import)
+
+### @navikt/aksel
+
+- Codemod for migrering av Datepicker/Monthpicker ut av Beta. `npx @navikt/aksel codemod v4-date` ([PR](https://github.com/navikt/aksel/pull/2026))
+
+- Codemods for migrering fra `@navikt/ds-react-internal` til `@navikt/ds-react` [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h3b8538e1981d) ([PR](https://github.com/navikt/aksel/pull/2026))
+
+## 3.4.2
+
+### @navikt/aksel-stylelint
+
+- La til riktige dependencies ([PR](https://github.com/navikt/aksel/pull/2017))
+
+## 3.4.1
+
+### @navikt/aksel-stylelint
+
+- Inkluderer nå dist-mappe i release
+
+## 3.4.0
+
+### @navikt/ds-react
+
+- Tag: `moderate`-variant ([PR](https://github.com/navikt/aksel/pull/2010))
+
+### @navikt/ds-css
+
+- Tag: `moderate`-variant ([PR](https://github.com/navikt/aksel/pull/2010))
+
+### @navikt/aksel-stylelint
+
+- Stylelint-pakke for Aksel ([PR](https://github.com/navikt/aksel/pull/1973))
+
+## 3.3.1
+
+### @navikt/ds-react
+
+- CopyButton: native `Clipboard API` ([PR](https://github.com/navikt/aksel/pull/2005))
+
+## 3.3.0
+
+### @navikt/ds-react
+
+- Timeline: popover/tooltip vises nå på hover, ikke onClick. ([PR](https://github.com/navikt/aksel/pull/1995))
+
+## 3.2.4
+
+### @navikt/ds-react
+
+- Search: Støtter nå htmlSize-prop ([PR](https://github.com/navikt/aksel/pull/2000))
+
+## 3.2.3
+
+### @navikt/ds-react
+
+- Datepicker: Oppdatert small-variant av Datepicker.Input. UI-oppdatert samtidig. ([PR](https://github.com/navikt/aksel/pull/1993))
+
+- CopyButton: `xsmall`-variant for bruk i tabeller ([PR](https://github.com/navikt/aksel/pull/1994))
+
+### @navikt/ds-css
+
+- Datepicker: Fikset small-variant av datepicker-input. ([PR](https://github.com/navikt/aksel/pull/1993))
+
+- CopyButton: `xsmall`-size for bruk i tabeller ([PR](https://github.com/navikt/aksel/pull/1994))
+
+### @navikt/aksel-icons
+
+- Nye ikoner `FileParagraph` og `FilePlus` ([PR](https://github.com/navikt/aksel/pull/1998))
+
+## 3.2.2
+
+### @navikt/ds-react
+
+- CopyButton: Fjernet use-client directive fra komponent. (warning i vite/rollup)
+
+## 3.2.0
+
+### @navikt/ds-react
+
+- Ny komponent CopyButton! Erstatter `CopyToClipboard` som nå er tagget som deprecated ([PR](https://github.com/navikt/aksel/pull/1982))
+
+## 3.1.3
+
+### @navikt/ds-css
+
+- :lipstick: Oppdatert utseende for ToggleGroup. `Medium` og `Small`-size er begge 10px lavere, mindre border-radius ([PR](https://github.com/navikt/aksel/pull/1976))
+
+## 3.1.0
+
+### @navikt/ds-react
+
+- Oppdatert Label og Description spacing for alle skjemakomponenter ([PR](https://github.com/navikt/aksel/pull/1967))
+
+### @navikt/ds-css
+
+- Alle komponenter bruker nå default `:focus-visible` for fokusmarkering. Medfølger også fallback for `:focus` ([PR](https://github.com/navikt/aksel/pull/1966))
+
+<!---->
+
+- Oppdatert Label og Description spacing for skjemakomponenter ([PR](https://github.com/navikt/aksel/pull/1967))
+
+## 3.0.1
+
+### @navikt/ds-react
+
+- Fjernet `@navikt/ds-icons` fra dependencies
+
+- Accordion: Oppdatert default headingSize brukt i i Accordion.Header
+
+## 3.0.0
+
+### @navikt/ds-react
+
+- Accordion: left-aligner chevron, `neutral`-variant, `size`-prop ([PR](https://github.com/navikt/aksel/pull/1964))
+
+- Bruker nå nå `@navikt/aksel-icons` for interne ikoner ([PR](https://github.com/navikt/aksel/pull/1964))
+
+### @navikt/ds-css
+
+- Accordion: Chevron er left-aligned, deler av styling er refaktorert, `size`-props og `neutral`-variant ([PR](https://github.com/navikt/aksel/pull/1964))
+
+## 2.9.8
+
+### @navikt/aksel-icons
+
+- Oppdatert Statusikoner til å være tydeligere og mer konsistente. ([PR](https://github.com/navikt/aksel/pull/1959))
+
+## 2.9.7
+
+### @navikt/aksel-icons
+
+- Fikset `CheckmarkIcon`-bug
+
+## 2.9.6
+
+### @navikt/aksel-icons
+
+- Fikset `CheckmarkCircleIcon`-bug ([PR](https://github.com/navikt/aksel/pull/1956))
+
+## 2.9.4
+
+### @navikt/aksel
+
+- :truck: Flyttet Codemods fra `@navikt/ds-codemods` -> `@navikt/aksel`. `@navikt/ds-codemods` regnes nå som deprecated ([PR](https://github.com/navikt/aksel/pull/1952))
+
+## 2.9.3
+
+### @navikt/aksel-icons
+
+- Nye ikoner `BulletList` og `NumberList` ([PR](https://github.com/navikt/aksel/pull/1950))
+
+## 2.9.1
+
+### @navikt/ds-react
+
+- ExpansionCard: Støtter nå `aria-labelledby` i tillegg til `aria-label` ([PR](https://github.com/navikt/aksel/pull/1944))
+
+## 2.9.0
+
+### @navikt/ds-css
+
+- CSS nå tilgjengelig som separate filer: Kan lastest fra CDN, minified-versjoner tilgjengelig ([PR](https://github.com/navikt/aksel/pull/1941))
+
+## 2.8.16
+
+### @navikt/ds-react
+
+- ExpansionCard: ExpansionCard.Content sendte ikke `className` videre
+
+- Datepicker. Bedre håndtering av visning for out-of-range-datoer ([PR](https://github.com/navikt/aksel/pull/1929))
+
+## 2.8.15
+
+### @navikt/aksel-icons
+
+- :tada: Nye ikoner `HandKnot` og `HandKnotFilled` ([PR](https://github.com/navikt/aksel/pull/1928))
+
+## 2.8.14
+
+### @navikt/ds-react
+
+- Datepicker/Monthpicker: Oppdaterer vist måneder ved popover åpne/lukk. Fikser out-of-range håndtering av `today`
+
+## 2.8.13
+
+### @navikt/aksel-icons
+
+- Oppdatert `InformationSquare`-ikon ([PR](https://github.com/navikt/aksel/pull/1921))
+
+## 2.8.11
+
+### @navikt/aksel-icons
+
+- Oppdatert `VideoSlack`, `Questionmark` og `Information`-ikoner ([PR](https://github.com/navikt/aksel/pull/1909))
+
+## 2.8.10
+
+### @navikt/ds-react
+
+- Datepicker/Monthpicker: refaktorert event-handling i hooks ([PR](https://github.com/navikt/aksel/pull/1907))
+
+## 2.8.9
+
+### @navikt/ds-css
+
+- Button: Padding/border-radius tokens ([PR](https://github.com/navikt/aksel/pull/1905))
+
+## 2.8.8
+
+### @navikt/aksel-icons
+
+- Nye ikoner `VideoSlash` og `VideoSlashFill`
+
+## 2.8.7
+
+### @navikt/ds-react
+
+- Fikset typografi-bruk for `Radio` og `Checkbox`.
+
+### @navikt/ds-css
+
+- Button: token for tertiary
+
+## 2.8.6
+
+### @navikt/ds-css
+
+- Alert, Chips og ErrorSummary har nå bedre utvalg av tokens
+
+## 2.8.5
+
+### @navikt/ds-css
+
+- Accordion: tokens for header-bakgrunn
+
+- Select: Fikset tekstfarge på iphone ([PR](https://github.com/navikt/aksel/pull/1879))
+
+## 2.8.4
+
+### @navikt/aksel-icons
+
+- Fikset Sourcemap-bug
+
+## 2.8.3
+
+### @navikt/ds-react
+
+- Textarea: oppdatert counter-tekst + mulighet for lokalisering ([PR](https://github.com/navikt/aksel/pull/1875))
+
+## 2.8.2
+
+### @navikt/ds-react
+
+- ExpansioCard: Oppdatert typografibruk ([PR](https://github.com/navikt/aksel/pull/1870))
+
+### @navikt/ds-css
+
+- ExpansioCard: Oppdatert typografi ([PR](https://github.com/navikt/aksel/pull/1870))
+
+## 2.8.1
+
+### @navikt/ds-react
+
+- ExpansionCard: Oppdaetrt standard title-size til `medium`
+
+## 2.8.0
+
+### @navikt/ds-react
+
+- Ny komponent ExpansionCard! ([PR](https://github.com/navikt/aksel/pull/1820))
+
+## 2.7.8
+
+### @navikt/ds-css
+
+- Tabs: La til focus-markering for Tabs.Panel ([PR](https://github.com/navikt/aksel/pull/1863))
+
+## 2.7.7
+
+### @navikt/aksel-icons
+
+- Nye ikoner `CaretUpDownFilledDown`, `CaretUpDownFilledUp`, `CloudDown`, `CloudDownFill`, `CloudUp`, `CloudUpFill`, `HddDown`, `HddDownFill`, `HddUp`, `HddUpFill`, `Inbox`, `InboxDown`, `InboxDownFill`, `InboxFill`, `InboxUp`, `InboxUpFill`, `ShoppingBasket`, `ShoppingBasketFill`
+
+## 2.7.5
+
+### @navikt/ds-css
+
+- ToggleGroup: Fikset token-bug
+
+## 2.7.4
+
+### @navikt/aksel-icons
+
+- Nye ikoner, `CaretDownFill`, `CaretLeft`, `CaretLeftFill`, `CaretLeftRight`, `CaretLeftRightFill`, `CaretRight`, `CaretRightFill`, `CaretUpDownFill`, `CaretUpFill`, `Escalator`, `Moon`, `MoonFill`. Fjernet `EscalatorStroke` ([PR](https://github.com/navikt/aksel/pull/1852))
+
+## 2.7.0
+
+### @navikt/aksel-icons
+
+- Ny ikonpakke med for core icons 3! `@navikt/aksel-icons` ([PR](https://github.com/navikt/aksel/pull/1847))
+
+## 2.6.2
+
+### @navikt/ds-react
+
+- Textarea: Fikset React v18 problem med `TextareaAutosize`
+
+## 2.6.1
+
+### @navikt/ds-react
+
+- Search: `onSearchClick`-prop for lettere submit-handling
+
+## 2.5.1
+
+### @navikt/ds-react
+
+- List: Refaktorert nestede lister
+
+## 2.5.0
+
+### @navikt/ds-tailwind
+
+- Breakpoint-tokens er lagt til. Overskriver native tailwind-breakpoints ([PR](https://github.com/navikt/aksel/pull/1832))
+
+### @navikt/ds-tokens
+
+- Breakpoint-tokens lagt til ([PR](https://github.com/navikt/aksel/pull/1832))
+
+## 2.4.3
+
+### @navikt/ds-css
+
+- Select: Fikset disabled + opacity bug for Chrome
+
+## 2.4.2
+
+### @navikt/ds-react
+
+- List: la til støtte for nestede lister ([PR](https://github.com/navikt/aksel/pull/1823))
+
+### @navikt/ds-css
+
+- List: La til støtte for nesting ([PR](https://github.com/navikt/aksel/pull/1823))
+
+## 2.4.1
+
+### @navikt/ds-react
+
+- Datepicker: la til `fixedWeeks`-prop for å alltid vise 6 uker i Datepicker.Standalone ([PR](https://github.com/navikt/aksel/pull/1827))
+
+## 2.4.0
+
+### @navikt/ds-react
+
+- Ny komponent List! ([PR](https://github.com/navikt/aksel/pull/1807))
+
+## 2.3.1
+
+### @navikt/ds-css
+
+- Fikset feil bruk av fallback-tokens i Textarea og Timeline
+
+## 2.3.0
+
+### @navikt/ds-css
+
+- Select: Fikset sentrering av tekst i Firefox ([PR](https://github.com/navikt/aksel/pull/1813))
+
+<!---->
+
+- Select: `small`-variant er nå 32px (var 34px)
+
+## 2.2.0
+
+### @navikt/ds-react
+
+- ToggleGroup: `neutral`-variant ([PR](https://github.com/navikt/aksel/pull/1789))
+
+- Button: `neutral`-variant ([PR](https://github.com/navikt/aksel/pull/1789))
+
+### @navikt/ds-tokens
+
+- Justeringer av semantiske fargetokens, statusfarger nå mer tydelig ([PR](https://github.com/navikt/aksel/pull/1787))
+
+- Oppdatert neutral-tokens ([PR](https://github.com/navikt/aksel/pull/1789))
+
+### @navikt/ds-css
+
+- ToggleGroup: `Neutral`-variant. ([PR](https://github.com/navikt/aksel/pull/1789))
+
+- Button: `Neutral`-variant.
+
+## 2.1.7
+
+### @navikt/ds-react
+
+- Datepicker: Fikset rekkefølge på `onValidate` og `onRangeChange` i useRangepicker-hook
+
+## 2.1.6
+
+### @navikt/ds-react
+
+- Datepicker/Monthpicker: `openOnFocus`-prop for manuell håndtering av popover ([PR](https://github.com/navikt/aksel/pull/1777))
+
+## 2.1.5
+
+### @navikt/ds-react
+
+- Datepicker: ESM import fra date-fns fungerer nå
+
+## 2.1.4
+
+### @navikt/ds-react
+
+- Datepicker: Fikset edgecase i `useRangepicker` der valg av startdato etter sluttdato ga feil output
+
+## 2.1.3
+
+### @navikt/ds-react
+
+- Monthpicker: håndterer visning av år riktig ([PR](https://github.com/navikt/aksel/pull/1771))
+
+## 2.1.2
+
+### @navikt/ds-css
+
+- TextField: `small`-variant har nå 8px horisontal padding (før 4px)
+
+## 2.1.1
+
+### @navikt/ds-react
+
+- Fikset `@types/react` v18 feil introdusert i v2.0.6 ([PR](https://github.com/navikt/aksel/pull/1759))
+
+## 2.1.0
+
+### @navikt/ds-react
+
+- Datepicker/Monthpicker: år med 2 siffer i input fungerer nå
+
+### @navikt/ds-tokens
+
+- Fikset feil danger-hover token ([PR](https://github.com/navikt/aksel/pull/1665))
+
+## 2.0.18
+
+### @navikt/ds-react
+
+- Datepicker: Bedre typer for `ref`
+
+## 2.0.15
+
+### @navikt/ds-react
+
+- Chat: `toptextPosition`-prop for horisontal plassering av navn og dato. ([PR](https://github.com/navikt/aksel/pull/1748))
+
+## 2.0.14
+
+### @navikt/ds-react
+
+- Oppdatert `@floating-ui/react`-versjon
+
+## 2.0.12
+
+### @navikt/ds-css
+
+- Radio: Fikset default visuell error-state ([PR](https://github.com/navikt/aksel/pull/1737))
+
+## 2.0.7
+
+### @navikt/ds-react
+
+- Monthpicker: Fikset keyboard-click
+
+## 2.0.6
+
+### @navikt/ds-react
+
+- Datepicker: Datepicker.Input satt `className` flere ganger
+
+## 2.0.5
+
+### @navikt/ds-css
+
+- Button: Reverserte border-width endrinder (var 1.5px, nå 2px)
+
+## 2.0.3
+
+### @navikt/ds-react
+
+- Datepicker: `strategi`-prop for layout-strategi av popover
+
+## 2.0.2
+
+### @navikt/ds-react
+
+- Datepicker: onClick-event fikset
+
+## 2.0.1
+
+### @navikt/ds-css
+
+- Bugfixer ved bruk av tokens oppdatert i v2.0.0
+
+## 2.0.0
+
+### @navikt/ds-tailwind
+
+- Alle token er oppdatert til nytt format. ([Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112))
+
+### @navikt/ds-react
+
+- Fonter blir bruk i all typografi blir nå lastet fra CDN
+
+### @navikt/ds-tokens
+
+- Alle token er oppdatert til nytt format. ([Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112))
+
+### @navikt/ds-css
+
+- Fontlasting: Fonter lastes nå fra NAV-CDN
+
+- Tokens: Alle komponenter bruker nå semantiske tokens for som standard, med innebygd støtte for komponent-spesifikke tokens.
+
+## 1.5.10
+
+### @navikt/ds-react
+
+- Modal: `parentSelector`-prop i Modal ([PR](https://github.com/navikt/aksel/pull/1717))
+
+## 1.5.9
+
+### @navikt/ds-css
+
+- Chips: 4px -> 2px gap mellom checkmark i Chips.Toggle
+
+## 1.5.7
+
+### @navikt/ds-react
+
+- Datepicker: `defaultMonth` og `Year` prop lagt til
+
+## 1.5.6
+
+### @navikt/ds-react
+
+- Datepicker: fungerer nå med `open` shadow-dom
+
+## 1.5.3
+
+### @navikt/ds-css
+
+- Tokens: Byttet om på rekkefølge av alt-farger
+
+## 1.5.2
+
+### @navikt/ds-react
+
+- Chips: `FilterChips` heter nå `ToggleChips`
+
+## 1.5.1
+
+### @navikt/ds-css
+
+- Chips. Bruker nå standard flex-wrap
+
+## 1.5.0
+
+### @navikt/ds-react
+
+- Tag: `filles`-varianter ([PR](https://github.com/navikt/aksel/pull/1684))
+
+- Ny komponent Chips! ([PR](https://github.com/navikt/aksel/pull/1668))
+
+### @navikt/ds-css
+
+- Tag: `filled`-varianter ([PR](https://github.com/navikt/aksel/pull/1684))
+
+## 1.4.4
+
+### @navikt/ds-react
+
+- Datepicker: Eksponerer `onValidation`-typer
+
+## 1.4.3
+
+### @navikt/ds-react
+
+- Datepicker: Validering og inputFormat funksjonalitet
+
+## 1.4.1
+
+### @navikt/ds-react
+
+- Datepicker: Følger språkrådets dato-formatering for måneder.
+
+## 1.4.0
+
+### @navikt/ds-react
+
+- Ny komponent Provider! For håndtering av global config på tvers av komponenter
+
+## 1.3.39
+
+### @navikt/ds-react
+
+- useId-bug fikset ved bruk i både react 17 og 18
+
+- Datepicker: Patchet UX-bugs ved navigering til fortid/nåtid
+
+- HelpText: Reverserte til å tillate bruk av `React.ReactNode` som children
+
+- DatePicker og MonthPicker er tilgjengelig som Beta
+
+- Modal: `overlayClassName`-prop lagt til
+
+- ConfirmationPanel: Checkbox lenker nå til innholdet i `aria-describedby`
+
+- Table: `shadeOnHover`-prop for å skru av/på hover-effekt
+
+- Table: `colSpan`-prop på `Table.ExpandableRow`
+
+- HelpText: har nå standard max-width på `65ch`
+
+- Stepper: `interactive` og `completed`-props for wizard-løsninger
+
+### @navikt/ds-css
+
+- Fikset bruk av `:watch` for diverse parsere (less, parcel)
+
+## 1.3.24
+
+### @navikt/ds-css
+
+- Tokens tilgjengeligjøres nå også på `:host`. Dette lar shadow-dom brukere konsumere tokens direkte.
+
+## 1.2.0
+
+### @navikt/ds-react
+
+- Dropdown: `closeOnSelect`-prop for å skru av/på lukking av dropdown ved valg
+
+## 1.1.0
+
+### @navikt/ds-react
+
+- Dropdown: `onSelect`-prop for callback ved valg av element
+
+## 1.0.0
+
+### @navikt/ds-react
+
+- Samversjonering: Alle pakker fra Aksel har nå, og vil i fremtiden ha samme versjonsnummer.
+
+- Accordion/ReadMore: `renderContentWhenClosed`-prop fjernet
+
+- Button: `icon` og `iconPosition`-prop for bedre ikonplassering
+
+- Tabs: `loop`-prop er flyttet fra `Tabs.Tablist` til `Tabs`. `iconPosition`-prop er flyttet fra `Tabs.Tab` til `Tabs`
+
+- Chat: `SpeechBubble`-komponent er renamet til `Chat`.
+
+- Chat: `topText` heter nå `name` og `timestamp`, `illustration` heter nå `avatar` og `illustrationBgColor` heter nå `avatarBgColor`
+
+- Pagination: `medium` -> `small`, `small` -> `xsmall`
+
+- Popover: `auto`, `auto-start` og `auto-end` er fjernet som `placement`-prop
+
+- CopyToClipboard: `iconPlacement` er renamet til `iconPosition`
+
+- ConfirmationPanel: `ref` er flyttet fra wrapper-div til checkbox
+
+- Stepper: `StepIndicator` er refaktorert og renamet til `Stepper`. `StepIndicator`-komponenten er fjernet
+
+- MicroCard: er deprecated
+
+- PageHeader: er deprecated
+
+- Menu: er deprecated
+
+- Divider: er deprecated og renamet til `Dropdown.Menu.Divider`
+
+- `@material/ui` er fjernet som dependency
+
+- `react-popper` og `@popperjs/core` er fjernet som dependency. Bruker nå `@floating-ui/react-dom-interactive`
+
+- `classnames` er byttet ut med `clsx` internt
+
+- `react-collapse` er fjernet som dependency
+
+- `uuid` er fjernet som dependency. Bruker nå intern løsning for id-håndtering
+
+- Label: er nå standard `label`-tag (tidligere p-tag)

aksel.nav.no/Dockerfile

@@ -1,21 +1,12 @@
-FROM node:18.1-alpine3.14
-RUN apk add --no-cache libc6-compat
+FROM gcr.io/distroless/nodejs:18 as runtime
 
 ENV NODE_ENV production
 
 WORKDIR /app
 COPY aksel.nav.no/website/.next/standalone ./
 COPY aksel.nav.no/website/next-logger.config.js ./
-# COPY aksel.nav.no/website/package.json .
-# COPY aksel.nav.no/website/.next/ .next/
-# COPY aksel.nav.no/website/public/ public
-# COPY aksel.nav.no/website/.env .
-# COPY aksel.nav.no/website/next.config.js .
-# COPY node_modules/ node_modules/
-# COPY @navikt/ @navikt/
-# CMD yarn start
 
 ENV NODE_OPTIONS '-r next-logger'
 
 EXPOSE 3000
-CMD ["node", "aksel.nav.no/website/server.js"]
+CMD ["aksel.nav.no/website/server.js"]

aksel.nav.no/nais-dev.yaml

@@ -17,14 +17,6 @@ spec:
     path: /api/isAlive
     initialDelay: 10
 
-  resources:
-    limits:
-      cpu: 2000m
-      memory: 2048Mi
-    requests:
-      cpu: 500m
-      memory: 1024Mi
-
   accessPolicy:
     outbound:
       external:
@@ -35,3 +27,7 @@ spec:
         - host: cdn.sanity.io
       rules: []
       env:
+  filesFrom:
+    - emptyDir:
+        medium: Memory
+      mountPath: /app/aksel.nav.no/website/.next/cache

aksel.nav.no/nais-prod.yaml

@@ -21,13 +21,6 @@ spec:
     path: /api/isAlive
     initialDelay: 20
     timeout: 1
-  resources:
-    limits:
-      cpu: 2000m
-      memory: 2048Mi
-    requests:
-      cpu: 500m
-      memory: 1024Mi
   accessPolicy:
     outbound:
       external:
@@ -46,3 +39,7 @@ spec:
           age: 7
           numNewerVersions: 3
           withState: ANY
+  filesFrom:
+    - emptyDir:
+        medium: Memory
+      mountPath: /app/aksel.nav.no/website/.next/cache

aksel.nav.no/package.json

@@ -15,11 +15,11 @@
     "website"
   ],
   "dependencies": {
-    "@navikt/aksel-icons": "^4.1.5",
-    "@navikt/ds-css": "^4.1.5",
-    "@navikt/ds-react": "^4.1.5",
-    "@navikt/ds-tailwind": "^4.1.5",
-    "@navikt/ds-tokens": "^4.1.5"
+    "@navikt/aksel-icons": "^4.5.0",
+    "@navikt/ds-css": "^4.5.0",
+    "@navikt/ds-react": "^4.5.0",
+    "@navikt/ds-tailwind": "^4.5.0",
+    "@navikt/ds-tokens": "^4.5.0"
   },
   "devDependencies": {
     "prettier-plugin-tailwindcss": "^0.2.3"

aksel.nav.no/website/components/SanityBlockContent.tsx

@@ -101,6 +101,7 @@ const serializers = {
               spacing
               level="4"
               size="small"
+              id={`h${node._key}`}
               {...textProps}
             />
           );

aksel.nav.no/website/components/StoryDecorator.tsx

@@ -1,13 +0,0 @@
-import "../dist/tw.css";
-import { Provider } from "@navikt/ds-react";
-import { IdContext } from "components/website-modules/utils/contexts";
-
-export const NextDecorator = ({ children }: { children: React.ReactNode }) => (
-  <Provider>
-    <IdContext.Provider value={{ id: "storybook-testid" }}>
-      <div id="__next" className="aksel antialiased">
-        {children}
-      </div>
-    </IdContext.Provider>
-  </Provider>
-);

aksel.nav.no/website/components/index.ts

@@ -13,15 +13,13 @@ export { default as PropTable } from "./sanity-modules/props/PropTabell";
 export { default as SideModul } from "./sanity-modules/SideModul";
 export { default as Tabell } from "./sanity-modules/Tabell";
 export { default as TastaturModul } from "./sanity-modules/TastaturTabell";
-export { default as Tips } from "./sanity-modules/tips";
+export { default as Tips } from "./sanity-modules/Tips";
 export { default as TokenTable } from "./sanity-modules/TokenTable";
 export * from "./sanity-modules/UuFeedback";
 export { default as Video } from "./sanity-modules/VideoEmbed";
 export * from "./website-modules/BreadCrumbs";
-export { default as EditButton } from "./website-modules/EditButton";
 export { default as Feedback } from "./website-modules/feedback";
 export * from "./website-modules/H2";
 export { default as PreviewBanner } from "./website-modules/PreviewBanner";
-export * from "./website-modules/TilToppen";
 export * from "./website-modules/TOC";
 export * from "./website-modules/utils";

aksel.nav.no/website/components/layout/WithSidebar.tsx

@@ -75,13 +75,13 @@ export const WithSidebar = ({
     <>
       <Header />
       <div className="bg-bg-default">
-        <div className="mx-auto mt-6 mb-24 flex w-full max-w-screen-2xl gap-6">
+        <div className="mx-auto mb-24 mt-6 flex w-full max-w-screen-2xl gap-6">
           <Sidebar kategori={pageType.type} links={sidebar} />
           <div className="relative w-full">
             <main
               tabIndex={-1}
               id="hovedinnhold"
-              className="min-h-screen-header md:max-w-screen-sidebar relative w-full px-4 focus:outline-none sm:pl-6 sm:pr-6 md:pl-0"
+              className="min-h-screen-header md:max-w-screen-sidebar relative z-0 w-full px-4 focus:outline-none sm:pl-6 sm:pr-6 md:pl-0"
             >
               <div
                 className={cl(
@@ -89,7 +89,9 @@ export const WithSidebar = ({
                   {
                     "bg-surface-subtle flex items-center justify-between":
                       variant === "page",
-                    "bg-deepblue-700 grid py-[4.25rem] pb-6":
+                    "bg-deepblue-700/70 grid py-[4.25rem] pb-6":
+                      variant !== "page",
+                    "before:from-deepblue-700 before:absolute before:inset-0 before:-z-10 before:rounded-xl before:bg-gradient-to-br before:via-blue-500 before:to-violet-700":
                       variant !== "page",
                   }
                 )}
@@ -115,18 +117,17 @@ export const WithSidebar = ({
                     size="xlarge"
                     className={cl({
                       "text-deepblue-800": variant === "page",
-                      "text-text-on-action bg-deepblue-700/80 w-fit":
-                        variant !== "page",
+                      "text-text-on-action  w-fit": variant !== "page",
                     })}
                   >
                     {pageType.title}
                   </Heading>
                   <div
                     className={cl({
-                      "bg-deepblue-700/80 w-fit": variant !== "page",
+                      "w-fit": variant !== "page",
                     })}
                   >
-                    {intro && intro}
+                    {intro}
                   </div>
                 </div>
                 {variant === "page" && pageProps.status?.bilde && (
@@ -149,17 +150,15 @@ export const WithSidebar = ({
                   </div>
                 )}
                 {variant === "landingPage" && (
-                  <div className="pointer-events-none absolute top-0 right-0 hidden sm:block">
-                    <HeaderCube className="text-deepblue-300 z-0 max-h-full" />
+                  <div className="pointer-events-none absolute right-0 top-0 hidden sm:block">
+                    <HeaderCube className="text-deepblue-300 z-[-1] max-h-full" />
                   </div>
                 )}
               </div>
+
               <div className={cl("sm:px-6 md:px-10", { flex: withToc })}>
                 {withToc && (
-                  <TableOfContentsv2
-                    changedState={pageProps["content"]}
-                    hideToc={false}
-                  />
+                  <TableOfContentsv2 changedState={pageProps["content"]} />
                 )}
                 <div className="w-full">
                   {children}

aksel.nav.no/website/components/layout/footer/Footer.tsx

@@ -2,8 +2,15 @@ import { BodyShort, Heading, Link } from "@navikt/ds-react";
 import { FigmaIcon, GithubIcon, SlackIcon } from "components/assets";
 import Logo from "components/assets/Logo";
 import { logNav } from "components/website-modules/utils/amplitude";
-import { EditButton } from "../..";
 import FooterForm from "./FooterForm";
+import dynamic from "next/dynamic";
+
+export const EditButton = dynamic(
+  () => import("components/website-modules/EditButton"),
+  {
+    ssr: false,
+  }
+);
 
 const Footer = () => {
   return (
@@ -109,7 +116,7 @@ function FooterLink({ children, href }) {
   return (
     <li>
       <Link
-        className="text-text-on-inverted focus:shadow-focus focus:text-text-default flex w-fit items-center gap-1 no-underline hover:underline focus:bg-blue-200 focus:shadow-blue-200"
+        className="text-text-on-inverted focus:shadow-focus focus:text-text-default flex w-fit items-center gap-1 underline hover:no-underline focus:bg-blue-200 focus:shadow-blue-200"
         href={href}
         onClick={(e) =>
           logNav(

aksel.nav.no/website/components/layout/header/Hamburger.tsx

@@ -66,7 +66,7 @@ export const Hamburger = () => {
           aria={{ modal: true }}
           overlayClassName={styles.modalOverlay}
           contentLabel="Meny"
-          className="bg-surface-default absolute left-4 top-0 right-4 block rounded py-14 px-11 sm:right-6 sm:left-auto sm:w-96 sm:max-w-[90%] lg:hidden"
+          className="bg-surface-default shadow-xlarge absolute left-4 right-4 top-0 block rounded px-11 py-14 sm:left-auto sm:right-6 sm:w-96 sm:max-w-[90%] lg:hidden"
         >
           <nav aria-label="hovedmeny">
             <ul>
@@ -75,7 +75,7 @@ export const Hamburger = () => {
                 onClick={() => setOpen(false)}
                 className={cl(
                   styles.akselTertiaryButton,
-                  "absolute top-2 right-2"
+                  "absolute right-2 top-2"
                 )}
                 icon={<XMarkIcon title="lukk meny" fontSize="1.5rem" />}
               />

aksel.nav.no/website/components/layout/header/Header.tsx

@@ -1,10 +1,33 @@
-import Logo from "components/assets/Logo";
-import Link from "next/link";
-import { logNav } from "../..";
 import cl from "clsx";
-import { useRouter } from "next/router";
+import Logo from "components/assets/Logo";
 import { Hamburger } from "components/layout/header/Hamburger";
-import { GlobalSearch } from "./search";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { logNav } from "../..";
+import { Button } from "@navikt/ds-react";
+import dynamic from "next/dynamic";
+import { MagnifyingGlassIcon } from "@navikt/aksel-icons";
+
+export const GlobalSearch = dynamic(() => import("./search"), {
+  loading: () => (
+    <Button
+      variant="primary"
+      className="hover:bg-deepblue-700 bg-deepblue-600 h-11"
+      aria-keyshortcuts="Control+b"
+      icon={
+        <MagnifyingGlassIcon
+          className="pointer-events-none -mt-[1px] shrink-0 text-2xl"
+          aria-label="Åpne meny"
+          aria-hidden
+        />
+      }
+      iconPosition="left"
+    >
+      Søk
+    </Button>
+  ),
+  ssr: false,
+});
 
 const LinkElement = ({ name, href, prefetch = undefined }) => {
   const { asPath } = useRouter();
@@ -59,7 +82,7 @@ export const Header = ({
             "mx-auto flex h-full max-w-screen-2xl items-center pr-4 lg:pr-6"
           )}
         >
-          <div className="flex h-11 items-center pr-4 pl-4 sm:pr-6 sm:pl-4">
+          <div className="flex h-11 items-center pl-4 pr-4 sm:pl-4 sm:pr-6">
             <Link
               href="/"
               passHref
@@ -88,7 +111,9 @@ export const Header = ({
               <LinkElement name="Bloggen" href="/produktbloggen" />
             </ul>
           </nav>
-          <GlobalSearch />
+          <div className="z-[1050] ml-auto mr-4 flex justify-center lg:ml-0 lg:mr-0">
+            <GlobalSearch />
+          </div>
           <div className="mr-2 h-full lg:hidden">
             <Hamburger />
           </div>

aksel.nav.no/website/components/layout/header/header.module.css

@@ -1,3 +1,4 @@
+/* stylelint-disable aksel/design-token-no-global-override */
 .modalOverlay {
   z-index: var(--a-z-index-modal);
   @apply bg-surface-backdrop fixed inset-0 grid place-items-center lg:hidden;
@@ -5,7 +6,7 @@
 
 .modalOverlaySearch {
   z-index: 3000;
-  @apply bg-surface-backdrop fixed inset-0 grid place-items-center;
+  @apply bg-deepblue-900/20 fixed inset-0 grid place-items-center;
 }
 
 .akselTertiaryButton {

aksel.nav.no/website/components/layout/header/search/Error.tsx

@@ -0,0 +1,36 @@
+import { searchOptions } from "@/types";
+import { Skeleton } from "@navikt/ds-react";
+import { useContext } from "react";
+import { SearchResultContext } from "./providers";
+
+export const Error = () => {
+  const { isValidating, error } = useContext(SearchResultContext);
+
+  if (error) {
+    return (
+      <p aria-live="assertive" className="mx-auto w-fit px-6 py-24">
+        Noe gikk galt! Last siden på nytt eller ta kontakt med Aksel.
+      </p>
+    );
+  }
+
+  if (!isValidating) {
+    return null;
+  }
+
+  return (
+    <div className="grid w-full gap-2 p-1">
+      <Skeleton height="3rem" variant="rounded" />
+
+      <div className="flex flex-wrap gap-2 px-4 pb-4 md:px-10">
+        {Object.keys(searchOptions)
+          .slice(0, Object.keys(searchOptions).length - 1)
+          .map((x) => (
+            <Skeleton variant="rounded" height="1.75rem">
+              {searchOptions[x].display}
+            </Skeleton>
+          ))}
+      </div>
+    </div>
+  );
+};

aksel.nav.no/website/components/layout/header/search/Form.tsx

@@ -0,0 +1,110 @@
+import { searchOptions } from "@/types";
+import { XMarkIcon } from "@navikt/aksel-icons";
+import { Button, Chips, Search } from "@navikt/ds-react";
+import { KBD } from "components/website-modules/KBD";
+import { useContext, useRef } from "react";
+import { useShortcut } from "./hooks";
+import {
+  SearchContext,
+  SearchNavigationContext,
+  SearchResultContext,
+} from "./providers";
+
+export const SearchForm = () => {
+  const { open, setOpen, tags, setTags, query, setQuery, os } =
+    useContext(SearchContext);
+  const { update, results, reset, isValidating, error } =
+    useContext(SearchResultContext);
+  const { close } = useContext(SearchNavigationContext);
+  const inputRef = useRef(null);
+
+  useShortcut(open, setOpen, inputRef);
+
+  const handleSearchStart = (value: string) => {
+    setQuery(value);
+    value === "" ? reset() : update(value, tags);
+  };
+
+  const noHits = (key: string) => {
+    return !Object.hasOwn(results?.groupedHits ?? {}, key);
+  };
+
+  const noHitsAndQuery = (key: string) => {
+    return query.length > 0 && !tags.find((x) => x === key);
+  };
+
+  if (isValidating || error) {
+    return null;
+  }
+
+  const chipsToShow = Object.entries(searchOptions)
+    .filter((x) => !x[1].hidden)
+    .filter(
+      ([key]) =>
+        !(noHitsAndQuery(key) && noHits(key) && results?.hits[key] === 0)
+    );
+
+  return (
+    <form
+      role="search"
+      onSubmit={(e) => e.preventDefault()}
+      className="bg-surface-default grid w-full gap-2"
+    >
+      <div className="flex flex-row-reverse items-center gap-1 p-1">
+        <Button
+          variant="tertiary-neutral"
+          icon={<XMarkIcon title="Lukk søk" />}
+          onClick={close}
+          type="button"
+        />
+        <Search
+          label={
+            <span className="flex items-center gap-2">
+              <span>Søk i hele Aksel</span>
+              {os === "mac" ? <KBD>CMD + B</KBD> : <KBD>CTRL + B</KBD>}
+            </span>
+          }
+          aria-autocomplete="both"
+          variant="simple"
+          value={query}
+          onChange={(v) => handleSearchStart(v)}
+          onClear={() => {
+            setQuery("");
+            reset();
+          }}
+          ref={inputRef}
+          autoComplete="off"
+          autoCorrect="off"
+          autoCapitalize="off"
+          spellCheck={false}
+          autoFocus
+          id="aksel-search-input"
+          clearButton={false}
+          placeholder="Søk gjennom hele aksel"
+          className="border-none pr-0 focus:shadow-none"
+        />
+      </div>
+      {chipsToShow.length !== 0 && (
+        <Chips className="px-4 pb-4 md:px-10">
+          {chipsToShow.map(([key, val]) => (
+            <Chips.Toggle
+              key={key}
+              variant="neutral"
+              selected={tags.includes(key as keyof typeof searchOptions)}
+              type="button"
+              onClick={() => {
+                const newTags = (tags as string[]).includes(key)
+                  ? tags.filter((y) => y !== key)
+                  : [...tags, key];
+                setTags(newTags as Array<keyof typeof searchOptions>);
+                update(query, newTags);
+              }}
+            >
+              {val.display}
+            </Chips.Toggle>
+          ))}
+        </Chips>
+      )}
+    </form>
+  );
+};

aksel.nav.no/website/components/layout/header/search/Group.tsx

@@ -1,109 +0,0 @@
-import { Label } from "@navikt/ds-react";
-import { GroupedHitsT, SearchHitT, searchOptions } from "@/types";
-import { Hit, IconHit, IconPageHit } from "./Hit";
-import React from "react";
-
-export function Group({
-  groups,
-  query,
-  startIndex,
-  logSuccess,
-}: {
-  groups: GroupedHitsT;
-  query: string;
-  startIndex: number;
-  logSuccess: (index: number, url: string) => void;
-}) {
-  if (Object.keys(groups).length === 0) {
-    return null;
-  }
-
-  return (
-    <>
-      {Object.entries(groups)
-        .sort((a, b) => searchOptions[a[0]].index - searchOptions[b[0]].index)
-        .map(([key, val], index, arr) => {
-          const prev = arr.slice(0, index);
-          const total =
-            prev.reduce((prev, cur) => prev + cur[1].length, 0) + startIndex;
-
-          return (
-            <GroupComponent
-              logSuccess={logSuccess}
-              startIndex={total}
-              key={key}
-              heading={`${searchOptions[key].display} (${val.length})`}
-              hits={val}
-              query={query}
-            />
-          );
-        })}
-    </>
-  );
-}
-
-export function GroupComponent({
-  heading,
-  hits,
-  query,
-  startIndex,
-  logSuccess,
-}: {
-  heading: React.ReactNode;
-  hits: SearchHitT[];
-  query: string;
-  startIndex: number;
-  logSuccess: (index: number, url: string) => void;
-}) {
-  return (
-    <div>
-      <div className="z-10 mt-4 rounded bg-teal-100 p-2">
-        <Label className="text-text-default" as="h3">
-          {heading}
-        </Label>
-      </div>
-      <ul className="mt-2">
-        {hits.map((x, xi) => {
-          switch (x.item._type) {
-            case "icon":
-              return (
-                <React.Fragment key={x.item.name + xi}>
-                  <IconHit
-                    key={x.item.name}
-                    hit={x}
-                    query={query}
-                    index={startIndex + xi}
-                    logSuccess={logSuccess}
-                  />
-                </React.Fragment>
-              );
-            case "icon_page":
-              return (
-                <React.Fragment key={x.item.heading + xi}>
-                  <IconPageHit
-                    key={x.item.heading}
-                    hit={x}
-                    query={query}
-                    index={startIndex + xi}
-                    logSuccess={logSuccess}
-                  />
-                </React.Fragment>
-              );
-            default:
-              return (
-                <React.Fragment key={x.item._id}>
-                  <Hit
-                    key={x.item._id}
-                    hit={x}
-                    query={query}
-                    index={startIndex + xi}
-                    logSuccess={logSuccess}
-                  />
-                </React.Fragment>
-              );
-          }
-        })}
-      </ul>
-    </div>
-  );
-}

aksel.nav.no/website/components/layout/header/search/Hit.tsx

@@ -1,212 +1,145 @@
-import { isNew } from "@/utils";
-import { Tag } from "@navikt/ds-react";
-import cl from "classnames";
-import Image from "next/legacy/image";
-import { StatusTag } from "components/website-modules/StatusTag";
-import { SearchHitT } from "@/types";
-import NextLink from "next/link";
 import { urlFor } from "@/sanity/interface";
+import { SearchHitT, searchOptions } from "@/types";
+import { ChevronRightIcon } from "@navikt/aksel-icons";
+import { Chips } from "@navikt/ds-react";
+import cl from "clsx";
+import { Tag } from "components/sanity-modules/frontpage-blocks/Tag";
+import { StatusTag } from "components/website-modules/StatusTag";
+import Image from "next/legacy/image";
+import { default as Link, default as NextLink } from "next/link";
+import { forwardRef, useContext } from "react";
+import { SearchContext, SearchLoggingContext } from "./providers";
+import { highlightMatches, highlightStr } from "./utils";
 
-export function Hit({
-  hit,
-  query,
-  index,
-  logSuccess,
-}: {
-  hit: SearchHitT;
-  query: string;
-  index: number;
-  logSuccess: (index: number, url: string) => void;
-}) {
-  if (hit.item._type === "icon" || hit.item._type === "icon_page") {
-    return;
+export const Hit = forwardRef<
+  HTMLLIElement,
+  {
+    hit: SearchHitT | Omit<SearchHitT, "score" | "anchor">;
+    index: number;
+    simple?: boolean;
+    tag?: Partial<keyof typeof searchOptions>;
   }
+>(({ hit, index, simple = false, tag }, ref) => {
+  const { query } = useContext(SearchContext);
+  const { logSuccess } = useContext(SearchLoggingContext);
+
+  const getHref = () => {
+    if ("anchor" in hit) {
+      return `/${hit.item.slug}${hit?.anchor ? `#h${hit.anchor}` : ""}`;
+    }
+    return `/${hit.item.slug}`;
+  };
 
   return (
     <li
+      ref={ref}
       className={cl(
-        "focus-within:shadow-focus border-border-subtle group relative flex cursor-pointer scroll-mt-12 items-center justify-between gap-4 rounded border-b px-2 last-of-type:border-b-0 focus-within:z-10 hover:bg-gray-100"
+        "border-border-subtle relative flex scroll-my-10  items-center justify-between gap-3 border-b px-2 last-of-type:border-b-0"
       )}
     >
-      <div className="px-2 py-6">
-        <NextLink
-          href={`/${hit.item.slug}`}
-          passHref
-          onClick={() => logSuccess(index, `/${(hit.item as any).slug}`)}
-          className="flex items-center gap-2 text-xl font-semibold after:absolute after:inset-0 focus:outline-none"
-        >
-          <span className="group-hover:underline">
-            {highlightStr(hit.item.heading, query)}
-          </span>
-          <StatusTag status={hit?.item?.status?.tag} aria-hidden />
-        </NextLink>
-        <span className="font-regular text-text-subtle text-lg" aria-hidden>
-          {hit.highlight.shouldHightlight ? (
-            <div>{highlightStr(hit.highlight.description, query)}</div>
-          ) : (
-            <div>{hit.highlight.description}</div>
-          )}
-        </span>
-        <span className="mt-4 flex gap-2 empty:mt-0">
-          {hit.item?.tema &&
-            hit.item?.tema.map((x) => (
-              <Tag variant="neutral-moderate" size="xsmall" key={x}>
-                {x}
-              </Tag>
-            ))}
-        </span>
-      </div>
-
-      <div className="hidden aspect-square w-24 sm:block">
-        {hit.item?.status?.bilde && (
-          <Image
-            src={urlFor(hit.item.status.bilde).auto("format").url()}
-            decoding="sync"
-            width="96"
-            height="96"
-            layout="fixed"
-            objectFit="contain"
-            alt={hit.item?.heading + " thumbnail"}
-            aria-hidden
-          />
-        )}
-      </div>
-    </li>
-  );
-}
-
-export function IconHit({
-  hit,
-  query,
-  index,
-  logSuccess,
-}: {
-  hit: SearchHitT;
-  query: string;
-  index: number;
-  logSuccess: (index: number, url: string) => void;
-}) {
-  if (hit.item._type !== "icon") {
-    return;
-  }
-
-  return (
-    <li
-      className={cl(
-        "focus-within:shadow-focus border-border-subtle group relative flex cursor-pointer scroll-mt-12 items-center justify-between gap-4 rounded border-b px-2 last-of-type:border-b-0 focus-within:z-10 hover:bg-gray-100"
-      )}
-    >
-      <div className="px-2 py-2">
-        <NextLink
-          href={`/ikoner/${hit.item.name}`}
-          passHref
-          onClick={() => logSuccess(index, `/${(hit.item as any).name}`)}
-          className="flex items-center gap-2 text-xl font-semibold after:absolute after:inset-0 focus:outline-none"
-        >
-          <span className="group-hover:underline">
-            {highlightStr(`${hit.item.name}Icon`, query)}
-          </span>
-          {isNew(hit.item?.created_at ?? "") && (
-            <Tag variant="info" size="small" aria-hidden>
-              Ny
-            </Tag>
-          )}
-        </NextLink>
-        <span className="font-regular text-text-subtle text-lg" aria-hidden>
-          <div>{highlightStr(hit.item.sub_category, query)}</div>
-        </span>
-      </div>
-
-      <div className="hidden aspect-square w-24 place-content-center sm:grid">
-        <Image
-          src={`https://raw.githubusercontent.com/navikt/aksel/main/%40navikt/aksel-icons/icons/${hit.item.name}.svg`}
-          decoding="sync"
-          width="24"
-          height="24"
-          layout="fixed"
-          objectFit="contain"
-          alt={hit.item.name + " thumbnail"}
-          aria-hidden
-        />
-      </div>
-    </li>
-  );
-}
-
-export function IconPageHit({
-  hit,
-  query,
-  index,
-  logSuccess,
-}: {
-  hit: SearchHitT;
-  query: string;
-  index: number;
-  logSuccess: (index: number, url: string) => void;
-}) {
-  if (hit.item._type !== "icon_page") {
-    return;
-  }
-
-  return (
-    <li
-      className={cl(
-        "focus-within:shadow-focus border-border-subtle group relative flex cursor-pointer scroll-mt-12 items-center justify-between gap-4 rounded border-b px-2 last-of-type:border-b-0 focus-within:z-10 hover:bg-gray-100"
-      )}
-    >
-      <div className="px-2 py-2">
-        <NextLink
-          href="/ikoner"
-          passHref
-          onClick={() => logSuccess(index, `/ikoner`)}
-          className="flex items-center gap-2 text-xl font-semibold after:absolute after:inset-0 focus:outline-none"
-        >
-          <span className="group-hover:underline">
-            {highlightStr(`Ikoner`, query)}
-          </span>
-        </NextLink>
-        <span className="font-regular text-text-subtle text-lg" aria-hidden>
-          <div>{highlightStr(hit.item.description, query)}</div>
-        </span>
-      </div>
-
-      <div className="hidden aspect-square place-items-center sm:grid">
-        <Image
-          src="/images/thumbnail/ikoner/thumbnail.svg"
-          decoding="sync"
-          width="96"
-          height="96"
-          layout="fixed"
-          objectFit="contain"
-          alt=""
-          aria-hidden
-        />
-      </div>
-    </li>
-  );
-}
-
-function splitStr(str: string, query: string) {
-  const regexStr = query.split(" ").join("|");
-  return str.split(new RegExp(`(${regexStr})`, "gi"));
-}
-
-function highlightStr(str: string, query: string) {
-  return (
-    <span>
-      {splitStr(str, query).map((part, i) => (
+      <div className="w-full truncate px-2 py-4">
         <span
-          key={i}
           className={cl({
-            "text-text-default bg-teal-200/80": query
-              .split(" ")
-              .map((x) => x.toLowerCase())
-              .includes(part.toLowerCase()),
+            "flex flex-col gap-1": simple,
+            "flex items-center gap-2": !simple,
           })}
         >
-          {part}
+          <NextLink
+            href={getHref()}
+            onClick={() => logSuccess(index, `/${(hit.item as any).slug}`)}
+            className="focus-visible:shadow-focus focus-visible:bg-border-focus focus-visible:text-text-on-action group scroll-my-32 text-xl font-semibold focus:outline-none"
+          >
+            <span className="group-hover:underline">
+              {highlightStr(hit.item.heading, query, tag)}
+            </span>
+          </NextLink>
+          {simple ? (
+            <Tag
+              type={hit.item._type}
+              size="xsmall"
+              text={hit.item.tema ? hit.item.tema[0] : undefined}
+              inline
+              aria-hidden
+            />
+          ) : (
+            <StatusTag status={hit?.item?.status?.tag} aria-hidden />
+          )}
         </span>
-      ))}
-    </span>
+
+        {!simple && <HeadingLinks index={index} hit={hit} />}
+      </div>
+
+      {!simple && (
+        <div className="hidden aspect-square w-24 sm:block">
+          {hit.item?.status?.bilde && (
+            <Image
+              src={urlFor(hit.item.status.bilde).auto("format").url()}
+              decoding="sync"
+              width="96"
+              height="96"
+              layout="fixed"
+              objectFit="contain"
+              alt={hit.item?.heading + " thumbnail"}
+              aria-hidden
+            />
+          )}
+        </div>
+      )}
+    </li>
   );
+});
+
+const highlightedHeadings = ["eksempler", "props", "tokens", "retningslinjer"];
+
+function HeadingLinks({
+  hit,
+  index,
+}: {
+  hit: SearchHitT | Omit<SearchHitT, "score" | "anchor">;
+  index: number;
+}) {
+  const { logSuccess } = useContext(SearchLoggingContext);
+
+  const Description = () => {
+    if (hit.matches[0].key !== "heading") {
+      return highlightMatches(hit.matches[0]);
+    }
+
+    return (
+      <span className="font-regular text-text-subtle max-w-full text-lg">
+        {hit.description}
+      </span>
+    );
+  };
+
+  if (hit.item._type === "komponent_artikkel") {
+    return (
+      <>
+        <Description />
+        <Chips className="mt-3" size="small">
+          {hit.item.lvl2
+            .filter(
+              (x) =>
+                !!x.id && highlightedHeadings.includes(x.text.toLowerCase())
+            )
+            .map((x) => (
+              <Link
+                prefetch={false}
+                key={x.text}
+                href={`/${hit.item.slug}${`#h${x.id}`}`}
+                onClick={() =>
+                  logSuccess(index, `/${(hit.item as any).slug}`, x.text)
+                }
+                className="min-h-6 bg-surface-neutral-subtle focus-visible:shadow-focus hover:bg-surface-neutral-subtle-hover ring-border-subtle flex items-center justify-center rounded-full px-2 ring-1 ring-inset focus:outline-none"
+              >
+                <span>{x.text}</span>
+                <ChevronRightIcon aria-hidden className="-mr-1" />
+              </Link>
+            ))}
+        </Chips>
+      </>
+    );
+  }
+
+  return <Description />;
 }

aksel.nav.no/website/components/layout/header/search/HitCollection.tsx

@@ -0,0 +1,132 @@
+import { GroupedHitsT, SearchHitT, searchOptions } from "@/types";
+import { Heading } from "@navikt/ds-react";
+import { Tag } from "components/sanity-modules/frontpage-blocks/Tag";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Hit } from "./Hit";
+import cl from "clsx";
+
+export function CollectionMapper({
+  groups,
+  startIndex,
+}: {
+  groups: GroupedHitsT;
+  startIndex: number;
+}) {
+  if (Object.keys(groups).length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      {Object.entries(groups)
+        .sort((a, b) => searchOptions[a[0]].index - searchOptions[b[0]].index)
+        .map(
+          (
+            [key, val]: [key: keyof typeof searchOptions, val: SearchHitT[]],
+            index,
+            arr
+          ) => {
+            const prev = arr.slice(0, index);
+            const total =
+              prev.reduce((prev, cur) => prev + cur[1].length, 0) + startIndex;
+
+            return (
+              <Collection
+                startIndex={total}
+                key={key}
+                heading={`${searchOptions[key].display} (${val.length})`}
+                tag={key}
+                hits={val}
+              />
+            );
+          }
+        )}
+    </>
+  );
+}
+
+export function Collection({
+  heading,
+  hits,
+  startIndex,
+  simple = false,
+  tag,
+}: {
+  heading?: React.ReactNode;
+  hits: SearchHitT[] | Omit<SearchHitT, "score" | "anchor">[];
+  simple?: boolean;
+  startIndex: number;
+  tag?: Partial<keyof typeof searchOptions>;
+}) {
+  const [intersected, setIntersected] = useState(false);
+  const item = useRef(null);
+
+  const split = useMemo(() => {
+    if (hits.length <= (simple ? 20 : 5)) {
+      return { initial: hits, lazy: null };
+    }
+
+    return { initial: hits.slice(0, 4), lazy: hits.slice(4 + 1) };
+  }, [hits, simple]);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(([entry]) => {
+      entry.isIntersecting && setIntersected(entry.isIntersecting);
+    });
+    item.current && observer.observe(item.current);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div>
+      {heading && tag && (
+        <h3
+          className={cl("sticky top-0 z-10 p-2 px-4 md:px-10", {
+            "bg-deepblue-50": ["komponent_artikkel", "ds_artikkel"].includes(
+              tag
+            ),
+            "bg-violet-50": ["aksel_prinsipp", "aksel_standalone"].includes(
+              tag
+            ),
+            "bg-teal-50": tag === "aksel_artikkel",
+            "bg-pink-50": tag === "aksel_blogg",
+          })}
+        >
+          <Tag hTag="span" type={tag} size="small" inline count={hits.length} />
+        </h3>
+      )}
+      {heading && !tag && (
+        <Heading
+          className="bg-surface-subtle sticky top-0 z-10 p-2 px-4  md:px-10"
+          size="small"
+          level="3"
+        >
+          {heading}
+        </Heading>
+      )}
+      <ul className="mt-2 px-0 md:px-6">
+        {split.initial.map((x, xi) => (
+          <Hit
+            key={xi}
+            hit={x}
+            index={startIndex + xi}
+            ref={xi === split.initial.length - 1 ? item : null}
+            simple={simple}
+            tag={tag}
+          />
+        ))}
+        {split.lazy &&
+          intersected &&
+          split.lazy.map((x, xi) => (
+            <Hit
+              key={xi}
+              hit={x}
+              index={startIndex + xi}
+              simple={simple}
+              tag={tag}
+            />
+          ))}
+      </ul>
+    </div>
+  );
+}

aksel.nav.no/website/components/layout/header/search/Results.tsx

@@ -0,0 +1,89 @@
+import { searchOptions } from "@/types";
+import { ChangeLogIconOutline } from "components/assets";
+import { useContext } from "react";
+import { Collection, CollectionMapper } from "./HitCollection";
+import { SearchContext, SearchResultContext } from "./providers";
+import { Heading, Label } from "@navikt/ds-react";
+
+export const Results = () => {
+  const { tags, query } = useContext(SearchContext);
+  const { results, isValidating, error, mostResent } =
+    useContext(SearchResultContext);
+
+  if (isValidating || error) {
+    return null;
+  }
+
+  return (
+    <div className="flex h-full flex-col overflow-y-auto">
+      {!results && mostResent && (
+        <div id="aksel-search-results" aria-label="Nyeste artikler">
+          <Collection
+            startIndex={0}
+            heading={
+              <span className="flex items-center gap-2">
+                Nyeste artikler
+                <ChangeLogIconOutline className="shrink-0" aria-hidden />
+              </span>
+            }
+            simple
+            hits={mostResent}
+          />
+        </div>
+      )}
+      {!results?.totalHits && query && (
+        <Heading
+          size="medium"
+          as="p"
+          className="mx-auto w-fit px-6 py-24"
+          aria-live="polite"
+          aria-atomic
+        >
+          <span className="text-text-subtle">{`Ingen treff på "`}</span>
+          <span className="break-all">{query}</span>
+          <span className="text-text-subtle">"</span>
+          {tags.length > 0 && (
+            <span className="text-text-subtle">{` i ${tags
+              .map((x) => searchOptions[x].display.toLowerCase())
+              .join(", ")}`}</span>
+          )}
+        </Heading>
+      )}
+      {results?.totalHits > 0 && (
+        <div id="aksel-search-results" aria-label="Søkeresultater">
+          <Label as="p" className="sr-only" aria-live="polite">
+            {`${results?.totalHits} treff på "${results.query}"${
+              tags.length > 0
+                ? ` i ${tags
+                    .map((x) => searchOptions[x].display.toLowerCase())
+                    .join(", ")}`
+                : ""
+            }`}
+          </Label>
+          <div className="pb-4">
+            {results?.topResults.length > 0 && (
+              <Collection
+                startIndex={1}
+                heading={
+                  <span className="flex items-center gap-2">
+                    Beste treff
+                    <ChangeLogIconOutline className="shrink-0" />
+                  </span>
+                }
+                hits={results?.topResults}
+              />
+            )}
+            <CollectionMapper
+              startIndex={
+                results.topResults.length > 0
+                  ? results.topResults.length + 1
+                  : 1
+              }
+              groups={results.groupedHits}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

aksel.nav.no/website/components/layout/header/search/Search.tsx

@@ -0,0 +1,53 @@
+import { MagnifyingGlassIcon } from "@navikt/aksel-icons";
+import { Button } from "@navikt/ds-react";
+import cl from "clsx";
+import { useContext, useEffect } from "react";
+import ReactModal from "react-modal";
+import styles from "../header.module.css";
+import { Error } from "./Error";
+import { SearchForm } from "./Form";
+import { Results } from "./Results";
+import { SearchContext, SearchNavigationContext } from "./providers";
+
+export const Search = () => {
+  const { open, setOpen } = useContext(SearchContext);
+  const { close } = useContext(SearchNavigationContext);
+
+  useEffect(() => {
+    ReactModal.setAppElement("#__next");
+  }, []);
+
+  return (
+    <>
+      <Button
+        variant="primary"
+        className="hover:bg-deepblue-700 bg-deepblue-600 h-11"
+        aria-keyshortcuts="Control+b"
+        icon={
+          <MagnifyingGlassIcon
+            className="pointer-events-none -mt-[1px] shrink-0 text-2xl"
+            aria-label="Åpne meny"
+            aria-hidden
+          />
+        }
+        iconPosition="left"
+        onClick={() => setOpen(true)}
+      >
+        Søk
+      </Button>
+      <ReactModal
+        isOpen={open}
+        onRequestClose={close}
+        aria={{ modal: true }}
+        contentLabel="Søk"
+        className="bg-surface-default focus-visible:shadow-focus animate-searchModal shadow-xlarge absolute inset-0 mx-auto my-auto flex h-[90%] max-h-[52rem] w-full max-w-[90%] flex-col overflow-x-hidden rounded-lg focus:outline-none md:h-[80%] lg:max-w-4xl"
+        overlayClassName={cl(styles.modalOverlaySearch, "backdrop-blur-[2px]")}
+        htmlOpenClassName="overflow-hidden"
+      >
+        <Error />
+        <SearchForm />
+        <Results />
+      </ReactModal>
+    </>
+  );
+};

aksel.nav.no/website/components/layout/header/search/__tests__/group-results.test.ts

@@ -0,0 +1,102 @@
+import { SearchResultsT } from "@/types";
+import { createSearchResult } from "../utils";
+
+describe("createSearchResult", () => {
+  let result;
+  let rawResults;
+
+  beforeEach(() => {
+    result = [
+      {
+        item: { _type: "komponent_artikkel" },
+        score: 0.05,
+        matches: [],
+      },
+      {
+        item: { _type: "aksel_artikkel" },
+        score: 0.1,
+        matches: [],
+      },
+      {
+        item: { _type: "ds_artikkel" },
+        score: 0.15,
+        matches: [],
+      },
+      {
+        item: { _type: "aksel_blogg" },
+        score: 0.2,
+        matches: [],
+      },
+      {
+        item: { _type: "aksel_prinsipp" },
+        score: 0.25,
+        matches: [],
+      },
+      {
+        item: { _type: "aksel_standalone" },
+        score: 0.3,
+        matches: [],
+      },
+    ];
+    rawResults = [
+      { item: { _type: "komponent_artikkel" }, score: 0.05 },
+      { item: { _type: "aksel_artikkel" }, score: 0.1 },
+      { item: { _type: "ds_artikkel" }, score: 0.15 },
+      { item: { _type: "aksel_blogg" }, score: 0.2 },
+      { item: { _type: "aksel_prinsipp" }, score: 0.25 },
+      { item: { _type: "aksel_standalone" }, score: 0.3 },
+    ];
+  });
+
+  it("should group hits by type", () => {
+    const expected = {
+      komponent_artikkel: [
+        { item: { _type: "komponent_artikkel" }, score: 0.05, matches: [] },
+      ],
+      aksel_artikkel: [
+        { item: { _type: "aksel_artikkel" }, score: 0.1, matches: [] },
+      ],
+      ds_artikkel: [
+        { item: { _type: "ds_artikkel" }, score: 0.15, matches: [] },
+      ],
+      aksel_blogg: [
+        { item: { _type: "aksel_blogg" }, score: 0.2, matches: [] },
+      ],
+      aksel_prinsipp: [
+        { item: { _type: "aksel_prinsipp" }, score: 0.25, matches: [] },
+      ],
+      aksel_standalone: [
+        { item: { _type: "aksel_standalone" }, score: 0.3, matches: [] },
+      ],
+    };
+    const actual: SearchResultsT = createSearchResult(result, rawResults);
+    expect(actual.groupedHits).toEqual(expected);
+  });
+
+  it("should return top 3 results with score < 0.1", () => {
+    const expected = [
+      { item: { _type: "komponent_artikkel" }, score: 0.05, matches: [] },
+    ];
+    const actual: SearchResultsT = createSearchResult(result, rawResults);
+    expect(actual.topResults).toEqual(expected);
+  });
+
+  it("should return total number of hits", () => {
+    const expected = 6;
+    const actual: SearchResultsT = createSearchResult(result, rawResults);
+    expect(actual.totalHits).toEqual(expected);
+  });
+
+  it("should return number of hits by type", () => {
+    const expected = {
+      komponent_artikkel: 1,
+      aksel_artikkel: 1,
+      ds_artikkel: 1,
+      aksel_blogg: 1,
+      aksel_prinsipp: 1,
+      aksel_standalone: 1,
+    };
+    const actual: SearchResultsT = createSearchResult(result, rawResults);
+    expect(actual.hits).toEqual(expected);
+  });
+});

aksel.nav.no/website/components/layout/header/search/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from "./useSearch";
+export * from "./useShortcut";

aksel.nav.no/website/components/layout/header/search/hooks/useSearch.ts

@@ -0,0 +1,56 @@
+import { allArticleDocuments } from "@/sanity/config";
+import { SearchResultsT } from "@/types";
+import { useMemo, useState } from "react";
+import useSWRImmutable from "swr/immutable";
+import { createSearchResult, formatResults, fuseSearch } from "../utils";
+import { debounce } from "@navikt/ds-react";
+import { logSearch } from "@/utils";
+
+export const useSearch = () => {
+  const [fuseResults, setFuseResults] = useState<SearchResultsT>(null);
+
+  const { data, error, isValidating } = useSWRImmutable(
+    `/searchindex.json`,
+    (query) => fetch(query).then((res) => res.json())
+  );
+
+  const updateResults = useMemo(
+    () =>
+      debounce((value: string, tags: string[]) => {
+        if (!value) {
+          return;
+        }
+
+        const rawResults = fuseSearch(data, value);
+
+        const formatedResults = formatResults(
+          rawResults.filter((x) =>
+            (tags.length > 0 ? tags : allArticleDocuments).includes(
+              x.item._type
+            )
+          )
+        );
+
+        setFuseResults({
+          ...createSearchResult(formatedResults, rawResults),
+          query: value,
+        });
+        logSearch({
+          type: "standard",
+          searchedFromUrl: window.location.pathname,
+          query: value,
+          filter: tags,
+        });
+      }),
+    [data]
+  );
+
+  return {
+    results: fuseResults,
+    update: updateResults,
+    error,
+    isValidating,
+    reset: () => setFuseResults(null),
+    rawData: data,
+  };
+};

aksel.nav.no/website/components/layout/header/search/hooks/useShortcut.ts

@@ -0,0 +1,28 @@
+import { MutableRefObject, useEffect } from "react";
+
+export const useShortcut = (
+  open: boolean,
+  setOpen: (value: boolean) => void,
+  inputRef: MutableRefObject<HTMLInputElement>
+) => {
+  useEffect(() => {
+    const listener = (event: KeyboardEvent) => {
+      if (
+        event.key === "b" &&
+        (event.metaKey || event.ctrlKey) &&
+        !event.shiftKey
+      ) {
+        event.preventDefault();
+        if (open) {
+          inputRef.current?.focus();
+        } else {
+          setOpen(true);
+        }
+      }
+    };
+
+    document.addEventListener("keydown", listener);
+
+    return () => document.removeEventListener("keydown", listener);
+  }, [inputRef, open, setOpen]);
+};

aksel.nav.no/website/components/layout/header/search/index.tsx

@@ -1,370 +1,21 @@
-import { SearchLogT, SearchResultsT, searchOptions } from "@/types";
-import { logSearch, useDebounce } from "@/utils";
-import { MagnifyingGlassIcon } from "@navikt/aksel-icons";
+import { Search } from "./Search";
 import {
-  Button,
-  Checkbox,
-  CheckboxGroup,
-  Loader,
-  Search,
-} from "@navikt/ds-react";
-import { ChangeLogIconOutline } from "components/assets";
-import { KBD } from "components/website-modules/KBD";
-import { useRouter } from "next/router";
-import { useCallback, useEffect, useRef, useState } from "react";
-import ReactModal from "react-modal";
-import styles from "../header.module.css";
-import { Group, GroupComponent } from "./Group";
+  SearchProvider,
+  SearchResultProvider,
+  SearchLoggingProvider,
+  SearchNavigationProvider,
+} from "./providers";
 
-/**
- * https://www.figma.com/file/71Sm1h6VV23lbBbQ3CJJ9t/Aksel-v2?node-id=1861%3A186079&t=ARKgZcA6B7ysmG3V-0
- * TODO:
- * - Oppdatere url-query basert på query + filter: ?search=abcd&filter=god_praksis
- * - Oppdatere søkefelt og filter basert på url.
+const GlobalSearch = () => (
+  <SearchProvider>
+    <SearchLoggingProvider>
+      <SearchResultProvider>
+        <SearchNavigationProvider>
+          <Search />
+        </SearchNavigationProvider>
+      </SearchResultProvider>
+    </SearchLoggingProvider>
+  </SearchProvider>
+);
 
- */
-export const GlobalSearch = () => {
-  const [results, setResults] = useState<SearchResultsT>(null);
-  const [loading, setLoading] = useState(false);
-  const [open, setOpen] = useState(false);
-  const [activeTags, setTags] = useState<Array<keyof typeof searchOptions>>([]);
-  const [os, setOs] = useState<"mac" | "windows">("windows");
-  const inputRef = useRef(null);
-
-  const session = useRef<{ retires: number; queries: string[] }>({
-    retires: 0,
-    queries: [],
-  });
-  const firstSearch = useRef<boolean>(true);
-  const prevSearch = useRef<string>("");
-
-  const router = useRouter();
-
-  const [query, setQuery] = useState("");
-  const debouncedSearchTerm = useDebounce(query);
-
-  useEffect(() => {
-    ReactModal.setAppElement("#__next");
-    navigator.userAgent?.indexOf("Mac OS X") !== -1
-      ? setOs("mac")
-      : setOs("windows");
-  }, []);
-
-  const logSearchAttempt = useCallback(
-    (hits: number, type: SearchLogT["type"]) => {
-      const data: SearchLogT = {
-        type,
-        searchedFromUrl: router.asPath,
-        hits: hits ?? 0,
-        retries: session.current.retires,
-        retriedQueries: session.current.queries,
-        query: debouncedSearchTerm,
-        filter: activeTags,
-      };
-
-      logSearch(data);
-    },
-    [router.asPath, debouncedSearchTerm, activeTags]
-  );
-
-  const logSuccessSearchAttempt = useCallback(
-    (index: number, url: string) => {
-      const data: SearchLogT = {
-        type: "suksess",
-        searchedFromUrl: router.asPath,
-        hits: results?.totalHits ?? 0,
-        retries: session.current.retires,
-        retriedQueries: session.current.queries,
-        query: debouncedSearchTerm,
-        filter: activeTags,
-
-        index,
-        url,
-        accuracy: (100 - index / results?.totalHits).toFixed(0),
-        topResult: index <= results?.topResults?.length,
-      };
-      logSearch(data);
-    },
-    [
-      router.asPath,
-      results?.totalHits,
-      results?.topResults,
-      debouncedSearchTerm,
-      activeTags,
-    ]
-  );
-
-  useEffect(() => {
-    if (debouncedSearchTerm && open) {
-      setLoading(true);
-      fetch(
-        `/api/search/v1?q=${encodeURIComponent(debouncedSearchTerm)}${
-          activeTags.length > 0 ? `&doc=${activeTags.join(",")}` : ""
-        }`
-      )
-        .then((x) => x.json())
-        .then((res) => {
-          setResults(res);
-          logSearchAttempt(res?.hits?.totalHits ?? 0, "standard");
-          setLoading(false);
-        })
-        .catch(() => {
-          setResults(null);
-          setLoading(false);
-        });
-      window.scrollTo(0, 0);
-    } else {
-      setLoading(false);
-      setResults(null);
-    }
-  }, [debouncedSearchTerm, activeTags, open, logSearchAttempt]);
-
-  useEffect(() => {
-    if (debouncedSearchTerm && open && !firstSearch.current) {
-      session.current = {
-        queries: [...session.current.queries, prevSearch.current],
-        retires: session.current.retires + 1,
-      };
-      prevSearch.current = debouncedSearchTerm;
-    } else if (debouncedSearchTerm && open) {
-      firstSearch.current = false;
-      prevSearch.current = debouncedSearchTerm;
-    }
-  }, [debouncedSearchTerm, activeTags, open]);
-
-  useEffect(() => {
-    const listener = (event: KeyboardEvent) => {
-      if (
-        event.key === "b" &&
-        (event.metaKey || event.ctrlKey) &&
-        !event.shiftKey
-      ) {
-        event.preventDefault();
-        if (open) {
-          inputRef.current?.focus();
-        } else {
-          setOpen(true);
-        }
-      }
-    };
-
-    document.addEventListener("keydown", listener);
-
-    return () => document.removeEventListener("keydown", listener);
-  }, [open]);
-
-  const handleClose = useCallback(() => {
-    if (session.current.retires > 0 || prevSearch.current !== "") {
-      logSearchAttempt(results?.totalHits, "feilet");
-    }
-
-    setOpen(false);
-    setQuery("");
-    setTags([]);
-    session.current = { queries: [], retires: 0 };
-    firstSearch.current = true;
-  }, [logSearchAttempt, results?.totalHits]);
-
-  useEffect(() => {
-    router.events.on("beforeHistoryChange", handleClose);
-    router.events.on("hashChangeComplete", handleClose);
-
-    return () => {
-      router.events.off("beforeHistoryChange", handleClose);
-      router.events.off("hashChangeComplete", handleClose);
-    };
-  }, [handleClose, router.events]);
-
-  const handleQueryChange = (v: string) => {
-    setQuery(v);
-    v !== debouncedSearchTerm && setLoading(!!v);
-  };
-
-  const noHits = (key: string) => {
-    return !Object.hasOwn(results?.groupedHits ?? {}, key);
-  };
-
-  const noHitsAndQuery = (key: string) => {
-    return debouncedSearchTerm.length > 0 && !activeTags.find((x) => x === key);
-  };
-
-  return (
-    <div className="z-[1050] ml-auto mr-4 flex justify-center lg:ml-0 lg:mr-0">
-      <Button
-        variant="primary"
-        className="hover:bg-deepblue-700 bg-deepblue-600 focus-visible:shadow-focus-gap h-11 focus:shadow-none"
-        aria-keyshortcuts="Control+b"
-        icon={
-          <MagnifyingGlassIcon
-            className="pointer-events-none -mt-[1px] shrink-0 text-2xl"
-            aria-label="Åpne meny"
-            aria-hidden
-          />
-        }
-        iconPosition="left"
-        onClick={() => setOpen(true)}
-      >
-        Søk
-      </Button>
-      <ReactModal
-        isOpen={open}
-        onRequestClose={() => handleClose()}
-        aria={{ modal: true }}
-        contentLabel="Søk"
-        className="bg-surface-default absolute inset-0 block w-screen overflow-x-auto px-4 md:px-6"
-        overlayClassName={styles.modalOverlaySearch}
-      >
-        <div className="search-grid-wrapper relative mx-auto max-w-4xl gap-4 gap-x-8 py-24">
-          {/* <button
-            className="focus-visible:shadow-focus hover:bg-surface-neutral-subtle-hover absolute right-4 top-8 flex items-center justify-center gap-2 rounded px-2 py-3 text-lg focus:outline-none"
-
-          >
-            <span>Lukk søk</span>
-          </button> */}
-          <Button
-            className="absolute right-4 top-8"
-            variant="tertiary-neutral"
-            icon={<KBD>ESC</KBD>}
-            onClick={() => handleClose()}
-            iconPosition="right"
-          >
-            Lukk søk
-          </Button>
-          <div className="search-grid-filter mt-8">
-            <CheckboxGroup legend="Filter" onChange={setTags}>
-              {Object.entries(searchOptions)
-                .filter((x) => !x[1].hidden)
-                .map(([key, val]) => (
-                  <Checkbox
-                    disabled={
-                      noHitsAndQuery(key) &&
-                      noHits(key) &&
-                      results?.hits[key] === 0
-                    }
-                    key={key}
-                    value={key}
-                    className="whitespace-nowrap"
-                  >
-                    {`${val.display} ${
-                      results?.hits[key] > 0 ? `(${results?.hits[key]})` : ""
-                    }`}
-                  </Checkbox>
-                ))}
-            </CheckboxGroup>
-          </div>
-          <div className="search-grid-input w-full">
-            <form role="search" onSubmit={(e) => e.preventDefault()}>
-              <Search
-                label={
-                  <span className="flex items-center gap-2">
-                    <span>Søk i hele Aksel</span>
-                    {os === "mac" ? <KBD>CMD + B</KBD> : <KBD>CTRL + B</KBD>}
-                  </span>
-                }
-                variant="simple"
-                value={query}
-                hideLabel={false}
-                onChange={(v) => handleQueryChange(v)}
-                onClear={() => setQuery("")}
-                ref={inputRef}
-                autoComplete="off"
-                autoCorrect="off"
-                autoCapitalize="off"
-                spellCheck={false}
-                autoFocus
-                id="aksel-search-input"
-                clearButton={false}
-              />
-            </form>
-          </div>
-          <div
-            className="search-grid-results mt-8 w-full max-w-3xl"
-            aria-busy={loading}
-            role="status"
-          >
-            {loading && (
-              <div className="flex w-full justify-center p-4">
-                <Loader size="xlarge" variant="neutral" />
-              </div>
-            )}
-            {results && query && !loading && (
-              <div id="aksel-search-results" aria-label="Søkeresultater">
-                <p className="text-xl font-semibold">
-                  {`${results?.totalHits} treff på "${query}"${
-                    activeTags.length > 0
-                      ? ` i ${activeTags
-                          .map((x) => searchOptions[x].display.toLowerCase())
-                          .join(", ")}`
-                      : ""
-                  }`}
-                </p>
-                <div className="mt-4 pb-16 md:block">
-                  {results?.topResults.length > 0 && (
-                    <GroupComponent
-                      startIndex={1}
-                      heading={
-                        <span className="flex items-center gap-2">
-                          Beste treff
-                          <ChangeLogIconOutline className="shrink-0" />
-                        </span>
-                      }
-                      logSuccess={logSuccessSearchAttempt}
-                      hits={results?.topResults}
-                      query={query}
-                    />
-                  )}
-                  <Group
-                    startIndex={
-                      results?.topResults.length > 0
-                        ? results?.topResults.length + 1
-                        : 1
-                    }
-                    logSuccess={logSuccessSearchAttempt}
-                    groups={results?.groupedHits}
-                    query={debouncedSearchTerm}
-                  />
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-        <style jsx>{`
-          .search-grid-wrapper {
-            display: grid;
-            grid-template-columns: 12rem auto;
-            grid-template-areas:
-              "input input"
-              "results results";
-          }
-
-          .search-grid-wrapper .search-grid-filter {
-            display: none;
-          }
-
-          .search-grid-wrapper .search-grid-input {
-            grid-area: input;
-          }
-
-          .search-grid-wrapper .search-grid-results {
-            grid-area: results;
-          }
-
-          @media (min-width: 768px) {
-            .search-grid-wrapper {
-              display: grid;
-              grid-template-columns: 12rem auto;
-              grid-template-areas:
-                "empty input"
-                "filter results";
-            }
-
-            .search-grid-wrapper .search-grid-filter {
-              display: block;
-              grid-area: filter;
-            }
-          }
-        `}</style>
-      </ReactModal>
-    </div>
-  );
-};
+export default GlobalSearch;

aksel.nav.no/website/components/layout/header/search/providers/SearchLoggingProvider.tsx

@@ -0,0 +1,50 @@
+import { logSearch } from "@/utils";
+import { createContext, useCallback, useContext } from "react";
+import { useSearch } from "../hooks";
+import { SearchContext } from "./SearchProvider";
+
+type SearchLoggingContextType = {
+  logSuccess: (index: number, url: string, tag?: string) => void;
+};
+
+export const SearchLoggingContext = createContext<SearchLoggingContextType>({
+  logSuccess: () => null,
+});
+
+export const SearchLoggingProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const context = useSearch();
+  const { query, tags } = useContext(SearchContext);
+
+  const logSuccess = useCallback(
+    (index: number, url: string, tag?: string) => {
+      const data = {
+        type: "suksess",
+        searchedFromUrl: window.location.pathname,
+        query,
+        filter: tags,
+        tag,
+        index,
+        url,
+        accuracy: (100 - index / context?.results?.totalHits).toFixed(0),
+        topResult: index <= context?.results?.topResults?.length,
+      };
+      logSearch(data);
+    },
+    [
+      query,
+      tags,
+      context?.results?.totalHits,
+      context?.results?.topResults?.length,
+    ]
+  );
+
+  return (
+    <SearchLoggingContext.Provider value={{ logSuccess }}>
+      {children}
+    </SearchLoggingContext.Provider>
+  );
+};

aksel.nav.no/website/components/layout/header/search/providers/SearchNavigationProvider.tsx

@@ -0,0 +1,52 @@
+import { createContext, useCallback, useContext, useEffect } from "react";
+import { SearchContext } from "./SearchProvider";
+import { SearchResultContext } from "./SearchResultProvider";
+import { useRouter } from "next/router";
+
+type SearchNavigationProviderT = { close: () => void };
+
+export const SearchNavigationContext = createContext<SearchNavigationProviderT>(
+  {
+    close: () => null,
+  }
+);
+
+export const SearchNavigationProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const router = useRouter();
+  const { setOpen, setQuery, setTags } = useContext(SearchContext);
+  const { reset } = useContext(SearchResultContext);
+
+  const close = useCallback(() => {
+    setOpen(false);
+    reset();
+    setQuery("");
+    setTags([]);
+  }, [reset, setOpen, setQuery, setTags]);
+
+  /* Add a small delay to get a precieved smoother navigation */
+  useEffect(() => {
+    let timeout: NodeJS.Timeout;
+    const handler = () => {
+      timeout && clearTimeout(timeout);
+
+      setTimeout(() => close(), 100);
+    };
+    router.events.on("beforeHistoryChange", handler);
+    router.events.on("hashChangeComplete", handler);
+
+    return () => {
+      router.events.off("beforeHistoryChange", handler);
+      router.events.off("hashChangeComplete", handler);
+    };
+  }, [close, router.events]);
+
+  return (
+    <SearchNavigationContext.Provider value={{ close }}>
+      {children}
+    </SearchNavigationContext.Provider>
+  );
+};

aksel.nav.no/website/components/layout/header/search/providers/SearchProvider.tsx

@@ -0,0 +1,63 @@
+import { searchOptions } from "@/types";
+import {
+  Dispatch,
+  SetStateAction,
+  createContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { useShortcut } from "../hooks";
+
+type SearchContextType = {
+  os: "mac" | "windows";
+  open: boolean;
+  setOpen: (v) => void;
+  tags: Array<keyof typeof searchOptions>;
+  setTags: Dispatch<SetStateAction<Array<keyof typeof searchOptions>>>;
+  query: string;
+  setQuery: (v: string) => void;
+};
+
+export const SearchContext = createContext<SearchContextType>({
+  os: "windows",
+  open: false,
+  setOpen: () => null,
+  tags: [],
+  setTags: () => null,
+  query: "",
+  setQuery: () => null,
+});
+
+export const SearchProvider = ({ children }: { children: React.ReactNode }) => {
+  const [open, setOpen] = useState(false);
+  const [tags, setTags] = useState<SearchContextType["tags"]>([]);
+  const [os, setOs] = useState<SearchContextType["os"]>("windows");
+  const inputRef = useRef(null);
+
+  const [query, setQuery] = useState("");
+
+  useShortcut(open, setOpen, inputRef);
+
+  useEffect(() => {
+    navigator.userAgent?.indexOf("Mac OS X") !== -1
+      ? setOs("mac")
+      : setOs("windows");
+  }, []);
+
+  return (
+    <SearchContext.Provider
+      value={{
+        os,
+        open,
+        setOpen,
+        tags,
+        setTags,
+        query,
+        setQuery,
+      }}
+    >
+      {children}
+    </SearchContext.Provider>
+  );
+};

aksel.nav.no/website/components/layout/header/search/providers/SearchResultProvider.tsx

@@ -0,0 +1,53 @@
+import { allArticleDocuments } from "@/sanity/config";
+import { SearchHitT, SearchResultsT } from "@/types";
+import { createContext, useContext, useMemo } from "react";
+import { useSearch } from "../hooks";
+import { formatRawResults } from "../utils";
+import { SearchContext } from "./SearchProvider";
+
+type SearchResultContextType = {
+  results: SearchResultsT;
+  update: (value: string, tags: string[]) => void;
+  error: any;
+  isValidating: boolean;
+  reset: () => void;
+  mostResent: Omit<SearchHitT, "score" | "anchor" | "matches">[];
+};
+
+export const SearchResultContext = createContext<SearchResultContextType>({
+  results: null,
+  update: () => null,
+  error: false,
+  isValidating: false,
+  reset: () => null,
+  mostResent: [],
+});
+
+export const SearchResultProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const context = useSearch();
+  const { tags } = useContext(SearchContext);
+
+  const mostResent: Omit<SearchHitT, "score" | "anchor">[] = useMemo(() => {
+    if (!context.rawData) {
+      return null;
+    }
+
+    return formatRawResults(
+      context.rawData
+        .filter((x) =>
+          (tags.length > 0 ? tags : allArticleDocuments).includes(x._type)
+        )
+        .slice(0, 20)
+    );
+  }, [context.rawData, tags]);
+
+  return (
+    <SearchResultContext.Provider value={{ ...context, mostResent }}>
+      {children}
+    </SearchResultContext.Provider>
+  );
+};

aksel.nav.no/website/components/layout/header/search/providers/index.ts

@@ -0,0 +1,4 @@
+export * from "./SearchProvider";
+export * from "./SearchResultProvider";
+export * from "./SearchLoggingProvider";
+export * from "./SearchNavigationProvider";

aksel.nav.no/website/components/layout/header/search/utils/format-result.ts

@@ -0,0 +1,36 @@
+import { FuseItemT, SearchHitT } from "@/types";
+import { omit } from "@navikt/ds-react";
+import Fuse from "fuse.js";
+
+export function formatResults(res: Fuse.FuseResult<FuseItemT>[]): SearchHitT[] {
+  return res.map((x) => {
+    return {
+      ...x,
+      item: omit(x.item, ["intro", "ingress"]) as Omit<
+        FuseItemT,
+        "ingress" | "intro"
+      >,
+      anchor: resolveAnchor(x.matches[0], x.item),
+      description: x?.item.intro || x.item.ingress || "",
+    };
+  });
+}
+
+export function formatRawResults(
+  res: FuseItemT[]
+): Omit<SearchHitT, "score" | "anchor">[] {
+  return res.map((x) => ({
+    item: omit(x, ["intro", "ingress"]) as Omit<FuseItemT, "ingress" | "intro">,
+    description: x?.intro || x.ingress || "",
+  }));
+}
+
+function resolveAnchor(match: Fuse.FuseResultMatch, item: FuseItemT) {
+  if (match.key.includes("lvl")) {
+    return item[match.key.split(".")[0]][match.refIndex].id;
+  }
+  if (match.key === "content.text") {
+    return item[match.key.split(".")[0]][match.refIndex].id;
+  }
+  return null;
+}

aksel.nav.no/website/components/layout/header/search/utils/fuse-search.ts

@@ -0,0 +1,25 @@
+import { FuseItemT } from "@/types";
+import Fuse from "fuse.js";
+
+export function fuseSearch(results: any[], query: string) {
+  /* https://fusejs.io/api/options.html */
+  const fuse = new Fuse<FuseItemT>(results, {
+    keys: [
+      { name: "heading", weight: 100 },
+      { name: "lvl2.text", weight: 50 },
+      { name: "lvl3.text", weight: 40 },
+      { name: "lvl4.text", weight: 30 },
+      { name: "ingress", weight: 30 },
+      { name: "intro", weight: 30 },
+      { name: "tema", weight: 70 },
+      { name: "content.text", weight: 20 },
+    ],
+    includeScore: true,
+    shouldSort: true,
+    minMatchCharLength: 2,
+    includeMatches: true,
+    threshold: 0.3,
+    location: 120,
+  });
+  return fuse.search(query).filter((x) => x.score < 0.3);
+}

aksel.nav.no/website/components/layout/header/search/utils/group-results.ts

@@ -0,0 +1,42 @@
+import { FuseItemT, GroupedHitsT, SearchHitT, SearchResultsT } from "@/types";
+import Fuse from "fuse.js";
+
+export function createSearchResult(
+  result: SearchHitT[],
+  rawResults: Fuse.FuseResult<FuseItemT>[]
+) {
+  const groupedHits: GroupedHitsT = result?.reduce((prev, cur) => {
+    if (cur.item._type in prev) {
+      return { ...prev, [cur.item._type]: [...prev[cur.item._type], cur] };
+    } else {
+      return { ...prev, [cur.item._type]: [cur] };
+    }
+  }, {});
+
+  const response: SearchResultsT = {
+    groupedHits,
+    topResults:
+      result?.length > 4 ? result.slice(0, 4).filter((x) => x.score < 0.1) : [],
+    totalHits: result?.length ?? 0,
+    hits: {
+      komponent_artikkel: rawResults.filter(
+        (x: any) => x.item._type === "komponent_artikkel"
+      ).length,
+      aksel_artikkel: rawResults.filter(
+        (x: any) => x.item._type === "aksel_artikkel"
+      ).length,
+      ds_artikkel: rawResults.filter((x: any) => x.item._type === "ds_artikkel")
+        .length,
+      aksel_blogg: rawResults.filter((x: any) => x.item._type === "aksel_blogg")
+        .length,
+      aksel_prinsipp: rawResults.filter(
+        (x: any) => x.item._type === "aksel_prinsipp"
+      ).length,
+      aksel_standalone: rawResults.filter(
+        (x: any) => x.item._type === "aksel_prinsipp"
+      ).length,
+    },
+  };
+
+  return response;
+}

aksel.nav.no/website/components/layout/header/search/utils/highlighter.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+import cl from "clsx";
+import Fuse from "fuse.js";
+import { searchOptions } from "@/types";
+
+function splitStr(str: string, query: string) {
+  const regexStr = query.toLowerCase().split(" ").join("|");
+  return str.split(new RegExp(`(${regexStr})`, "gi"));
+}
+
+export function highlightStr(
+  str: string,
+  query: string,
+  tag: keyof typeof searchOptions
+) {
+  if (!query) {
+    return str;
+  }
+
+  const getClass = (part: string) => {
+    if (
+      !query
+        .split(" ")
+        .map((x) => x.toLowerCase())
+        .includes(part.toLowerCase())
+    ) {
+      return undefined;
+    }
+    return cl(
+      "text-text-default group-focus-visible:text-text-on-action group-focus-visible:bg-transparent",
+      {
+        "bg-gray-200": !tag,
+        "bg-teal-100": tag === "aksel_artikkel",
+        "bg-deepblue-100": ["komponent_artikkel", "ds_artikkel"].includes(tag),
+        "bg-violet-100": ["aksel_prinsipp", "aksel_standalone"].includes(tag),
+        "bg-pink-100": tag === "aksel_blogg",
+      }
+    );
+  };
+  return (
+    <>
+      {splitStr(str, query)
+        .filter((x) => !!x)
+        .map((part, i) => (
+          <span key={i} className={getClass(part)}>
+            {part}
+          </span>
+        ))}
+    </>
+  );
+}
+
+export function highlightMatches(hitMatch: Fuse.FuseResultMatch) {
+  const text = hitMatch.value;
+  const result = [];
+  const matches = [...hitMatch.indices];
+
+  let index = 0;
+  matches.forEach((match, i) => {
+    const str = text.substring(match[0], match[1] - 1);
+    let preText = text.substring(index, match[0]);
+
+    if (i === 0) {
+      const preLength = preText.length;
+      preText = preText.substring(preText.length - 23);
+      if (preText.length < preLength) {
+        preText = `...${preText}`;
+      }
+    }
+
+    result.push({ text: preText, highlight: false });
+    result.push({ text: str, highlight: true });
+    index = match[1] - 1;
+    if (i === matches.length - 1) {
+      result.push({ text: text.substring(index), highlight: false });
+    }
+  });
+
+  return (
+    <span>
+      {result.map((part, i) => (
+        <span
+          key={i}
+          className={cl({
+            "text-text-default font-semibold": part.highlight,
+          })}
+        >
+          {part.text}
+        </span>
+      ))}
+    </span>
+  );
+}

aksel.nav.no/website/components/layout/header/search/utils/index.ts

@@ -0,0 +1,4 @@
+export * from "./format-result";
+export * from "./fuse-search";
+export * from "./group-results";
+export * from "./highlighter";

aksel.nav.no/website/components/layout/sidebar/Sidebar.tsx

@@ -6,7 +6,7 @@ import cl from "clsx";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useState } from "react";
-import { useSection } from "./use-sections";
+import { useSection } from "./useSection";
 
 const NavItem = ({
   link,
@@ -28,13 +28,13 @@ const NavItem = ({
           );
         }}
         className={cl(
-          "hover:text-deepblue-800 focus-visible:shadow-focus text-medium relative  flex overflow-hidden rounded-sm py-1 pl-4 pr-2 leading-snug before:rounded-full hover:before:transition-colors focus:outline-none",
+          "hover:text-deepblue-800 focus-visible:shadow-focus text-medium relative flex  overflow-hidden py-1 pl-4 pr-2 leading-snug before:rounded-full hover:before:transition-colors focus:outline-none focus-visible:z-10 focus-visible:rounded-sm",
           {
             "before:border-l-border-action-selected before:absolute before:left-0 before:top-1/2 before:h-6 before:-translate-y-1/2 before:border-l-[4px]":
               isActive,
             "text-deepblue-800 font-semibold": isActive,
             "text-text-subtle": !isActive,
-            "before:absolute before:left-0 before:h-full before:border-l before:border-l-gray-200 hover:before:top-1/2  hover:before:h-6 hover:before:-translate-y-1/2 hover:before:border-l-2 hover:before:border-l-gray-400":
+            "before:absolute before:left-0 before:top-0 before:h-full before:border-l before:border-l-gray-200 hover:before:top-1/2  hover:before:h-6 hover:before:min-h-[70%] hover:before:-translate-y-1/2 hover:before:border-l-2 hover:before:border-l-gray-400":
               !isActive,
           }
         )}
@@ -87,7 +87,7 @@ const Dropdown = ({
       >
         <Detail
           as="span"
-          className="group-focus-visible:shadow-focus group-hover:bg-surface-neutral-subtle group-active:bg-bg-surface-neutral-subtle-hover mt-6 flex w-full items-center justify-between rounded-sm pl-2 font-semibold transition first:mt-0"
+          className="group-focus-visible:shadow-focus group-hover:bg-surface-neutral-subtle group-active:bg-surface-neutral-subtle-hover mt-6 flex w-full items-center justify-between rounded-sm pl-2 font-semibold transition-colors first:mt-0"
         >
           {title}
           <span className="flex h-6 w-6  items-center justify-center rounded">

aksel.nav.no/website/components/sanity-modules/ComponentOverview.tsx

@@ -35,11 +35,10 @@ const ComponentOverview = ({ node }: { node: ArticleListT }) => {
       <ul className="grid grid-cols-[repeat(auto-fill,_minmax(min(17rem,_100%),_1fr))] gap-6">
         {sorted.map((x) => (
           <li key={x._id}>
-            <div className="bg-surface-subtle focus-within:ring-border-focus ring-border-subtle hover:shadow-medium min-h-56 group relative rounded-2xl focus-within:ring-[3px] hover:ring-1">
+            <div className="bg-surface-subtle focus-within:ring-border-focus shadow-xsmall hover:shadow-small min-h-56 group relative rounded-2xl focus-within:ring-[3px]">
               <div
                 className={cl(
-                  "flex max-h-44 items-center justify-center overflow-hidden rounded-t-2xl",
-                  "filter",
+                  "flex max-h-44 items-center justify-center overflow-hidden rounded-t-2xl filter",
                   {
                     "hue-rotate-[65deg]": x?.status?.tag === "beta",
                     grayscale: x?.status?.tag === "deprecated",
@@ -105,10 +104,10 @@ const ComponentOverview = ({ node }: { node: ArticleListT }) => {
                     <Heading
                       as="a"
                       size="small"
-                      className="z-10 before:absolute before:inset-0 focus:outline-none group-hover:underline"
+                      className="z-10 underline before:absolute before:inset-0 focus:outline-none"
                     >
                       {x.heading}
-                      <span className="absolute top-4 left-4">
+                      <span className="absolute left-4 top-4">
                         <StatusTag status={x?.status?.tag} />
                       </span>
                     </Heading>

aksel.nav.no/website/components/sanity-modules/DoDont.tsx

@@ -74,7 +74,7 @@ const Element = ({ block }: { block: DoDontT["blokker"][number] }) => {
         )}
         aria-hidden
       >
-        <span className="absolute left-[10px] z-10 translate-y-2">
+        <span className="absolute right-[10px] z-10 translate-y-2">
           {GetIcon(block.variant)}
         </span>
       </div>

aksel.nav.no/website/components/sanity-modules/TokenTable.tsx

@@ -3,7 +3,7 @@ import { TokenTableT } from "@/types";
 import { ChevronDownCircleIcon } from "@navikt/aksel-icons";
 import core from "@navikt/ds-css/tokens.json";
 import { BodyLong, CopyButton, Label, Link } from "@navikt/ds-react";
-import cl from "classnames";
+import cl from "clsx";
 import { AkselTable, AkselTableRow } from "components/website-modules/Table";
 import NextLink from "next/link";
 import { useState } from "react";

aksel.nav.no/website/components/sanity-modules/UuFeedback.tsx

@@ -1,7 +1,7 @@
 import { FeedbackT } from "@/types";
 import { IdContext } from "@/utils";
 import { Button, Heading, Textarea } from "@navikt/ds-react";
-import cl from "classnames";
+import cl from "clsx";
 import { useRouter } from "next/router";
 import { useContext, useState } from "react";
 

aksel.nav.no/website/components/sanity-modules/cards/ArtikkelCard.tsx

@@ -1,14 +1,15 @@
 import { withErrorBoundary } from "@/error-boundary";
 
 import {
-  ResolveContributorsSingleT,
-  ResolveTemaT,
-  ResolveSlugT,
   AkselGodPraksisDocT,
+  ResolveContributorsSingleT,
+  ResolveSlugT,
+  ResolveTemaT,
 } from "@/types";
 import { BodyShort, Detail, Heading } from "@navikt/ds-react";
+import { useFormatedDate } from "components/website-modules/utils/getDate";
 import NextLink from "next/link";
-import { abbrName, dateStr, logNav } from "../..";
+import { abbrName, logNav } from "../..";
 
 const ArtikkelCard = ({
   slug,
@@ -25,14 +26,12 @@ const ArtikkelCard = ({
 }: ResolveContributorsSingleT<
   ResolveTemaT<ResolveSlugT<AkselGodPraksisDocT>>
 > & { source: string; variant: string; level?: "2" | "3" }) => {
-  const date = (rest as any)?.updateInfo?.lastVerified
-    ? (rest as any)?.updateInfo?.lastVerified
-    : publishedAt
-    ? publishedAt
-    : _updatedAt;
+  const date = useFormatedDate(
+    (rest as any)?.updateInfo?.lastVerified ?? publishedAt ?? _updatedAt
+  );
 
   return (
-    <div className="hover:shadow-small focus-within:ring-border-focus bg-surface-default ring-border-subtle group relative rounded-lg p-3 pb-16 ring-1 focus-within:ring-[3px] sm:p-5 sm:pb-16">
+    <div className="shadow-xsmall hover:shadow-small focus-within:ring-border-focus bg-surface-default group relative rounded-lg p-3 pb-16 focus-within:ring-[3px] sm:p-5 sm:pb-16">
       <NextLink
         href={{
           pathname: `/${slug}`,
@@ -53,7 +52,7 @@ const ArtikkelCard = ({
         <Heading
           level={level}
           size="small"
-          className="text-deepblue-700 group-hover:underline"
+          className="text-deepblue-700 underline group-hover:no-underline"
         >
           {heading}
         </Heading>
@@ -70,7 +69,7 @@ const ArtikkelCard = ({
             </Detail>
           )}
           <Detail as="span" className="text-text-subtle">
-            {dateStr(date)}
+            {date}
           </Detail>
         </span>
       ) : (

aksel.nav.no/website/components/sanity-modules/cards/BloggCard.tsx

@@ -1,15 +1,16 @@
 import { withErrorBoundary } from "@/error-boundary";
 import { AkselBloggDocT, ResolveContributorsT, ResolveSlugT } from "@/types";
 import { BodyLong, BodyShort, Heading, Link } from "@navikt/ds-react";
-import { getAuthors } from "components/website-modules/LatestBloggs";
+import { useFormatedDate } from "components/website-modules/utils/getDate";
 import NextLink from "next/link";
-import { dateStr, logNav } from "../..";
+import { getAuthors, logNav } from "@/utils";
 
 const BloggCard = ({
   blog,
 }: {
   blog: ResolveContributorsT<ResolveSlugT<AkselBloggDocT>>;
 }) => {
+  const date = useFormatedDate(blog?.publishedAt ?? blog._createdAt);
   return (
     <li
       key={blog._id}
@@ -18,7 +19,7 @@ const BloggCard = ({
       <Heading size="medium" as="div">
         <NextLink href={`/${blog.slug}`} passHref legacyBehavior>
           <Link
-            className="text-deepblue-500 no-underline hover:underline"
+            className="text-deepblue-500 underline hover:no-underline"
             onClick={(e) =>
               logNav(
                 "blogg-card",
@@ -38,7 +39,7 @@ const BloggCard = ({
           className="text-text-subtle mt-auto flex gap-2 justify-self-end"
         >
           <span className="font-semibold">{getAuthors(blog)[0]}</span>
-          <span>{dateStr(blog?.publishedAt ?? blog._createdAt)}</span>
+          <span>{date}</span>
         </BodyShort>
       )}
     </li>

aksel.nav.no/website/components/sanity-modules/cards/GodPraksisCard.tsx

@@ -18,7 +18,7 @@ const GodPraksisCard = ({ node }: { node: AkselTemaT }) => {
   }
 
   return (
-    <li className="ring-border-subtle bg-surface-default hover:shadow-small focus-within:ring-border-focus relative grid rounded-lg p-6 ring-1  focus-within:ring-[3px]">
+    <li className="bg-surface-default focus-within:ring-border-focus shadow-xsmall hover:shadow-small group relative grid rounded-lg p-6 focus-within:ring-[3px]">
       <div className="relative mb-4 h-16 w-16">
         <Image
           src={urlFor(node?.pictogram).auto("format").url()}
@@ -39,7 +39,7 @@ const GodPraksisCard = ({ node }: { node: AkselTemaT }) => {
             e.currentTarget.getAttribute("href")
           )
         }
-        className="navds-heading--medium text-deepblue-700 navds-heading  mb-4 no-underline after:absolute after:inset-0 after:rounded-lg focus:outline-none group-hover:underline"
+        className="navds-heading--medium text-deepblue-700 navds-heading  mb-4 underline after:absolute after:inset-0 after:rounded-lg focus:outline-none group-hover:no-underline"
       >
         {node.title}
       </NextLink>

aksel.nav.no/website/components/sanity-modules/cards/InnholdsKort.tsx

@@ -11,13 +11,13 @@ const InnholdsKort = ({ node }: { node: InnholdsKortPrinsipperT }) => {
   }
 
   return (
-    <article className="shadow-small last-of-type:mb-18 focus-within:ring-border-focus hover:shadow-medium group relative mb-7 rounded-lg bg-white p-4 ring-1 ring-gray-900/10 focus-within:ring sm:p-8">
+    <article className="last-of-type:mb-18 focus-within:ring-border-focus shadow-xsmall hover:shadow-small group relative mb-7 rounded-lg bg-white p-4 focus-within:ring sm:p-8">
       <Heading
         spacing
         size="small"
         level="3"
         id={node._key}
-        className="text-deepblue-500 scroll-mt-28 focus:outline-none group-hover:underline"
+        className="text-deepblue-500 scroll-mt-28 underline focus:outline-none group-hover:no-underline"
       >
         <NextLink
           href={`/${node?.lenke}`}

aksel.nav.no/website/components/sanity-modules/cards/RelatertInnhold.tsx

@@ -37,7 +37,7 @@ const RelatertInnhold = ({ node }: { node: RelatertInnholdT }) => {
               e.currentTarget.getAttribute("href")
             )
           }
-          className="toc-ignore shadow-small focus-visible:shadow-focus bg-surface-default ring-border-subtle group grid rounded border-2 border-transparent px-4 py-3 ring-1 focus:outline-none"
+          className="toc-ignore shadow-xsmall hover:shadow-small focus-visible:shadow-focus bg-surface-default group grid rounded border-2 border-transparent px-4 py-3 focus:outline-none"
         >
           <Heading
             as="span"

aksel.nav.no/website/components/sanity-modules/frontpage-blocks/Card.tsx

@@ -1,13 +1,14 @@
-import { abbrName, dateStr } from "@/utils";
-import { BodyShort, Detail, Heading } from "@navikt/ds-react";
-import { logNav } from "components/website-modules/utils/amplitude";
-import NextLink from "next/link";
-import NextImage from "next/legacy/image";
-import { Tag } from "./Tag";
-import cl from "clsx";
-import { getImage } from "components/website-modules/utils/get-image";
-import { urlFor } from "@/sanity/interface";
 import { withErrorBoundary } from "@/error-boundary";
+import { urlFor } from "@/sanity/interface";
+import { abbrName } from "@/utils";
+import { BodyShort, Detail, Heading } from "@navikt/ds-react";
+import cl from "clsx";
+import { logNav } from "components/website-modules/utils/amplitude";
+import { getImage } from "components/website-modules/utils/get-image";
+import { useFormatedDate } from "components/website-modules/utils/getDate";
+import NextImage from "next/legacy/image";
+import NextLink from "next/link";
+import { Tag } from "./Tag";
 
 export type ArticleT = {
   _key: string;
@@ -37,7 +38,7 @@ const Card = ({
   visible: boolean;
   index: number;
 }) => {
-  const date = article.publishedAt ? article.publishedAt : article._updatedAt;
+  const date = useFormatedDate(article.publishedAt ?? article._updatedAt);
 
   const showFooter = ["aksel_artikkel", "aksel_blogg"].includes(article._type);
   const showImage = [
@@ -50,8 +51,7 @@ const Card = ({
     <div
       className={cl(
         "bg-surface-default group relative rounded-lg",
-        "focus-within:ring-border-focus ring-border-subtle-hover focus-within:ring-[3px]",
-        "shadow-[0_0_1px_rgb(0_0_0/0.3),0_1px_3px_rgb(0_0_0/0.15)]",
+        "focus-within:ring-border-focus ring-border-subtle-hover shadow-xsmall hover:shadow-small focus-within:ring-[3px]",
         `transition-[opacity,transform] duration-700`,
         {
           "translate-y-0 opacity-100": visible,
@@ -119,14 +119,18 @@ const Card = ({
               )
             }
           >
-            <Heading level="3" size="small" className="group-hover:underline">
+            <Heading
+              level="3"
+              size="small"
+              className="underline group-hover:no-underline"
+            >
               {article.heading}
             </Heading>
           </NextLink>
           <Tag
             type={article._type}
             text={article.tema ? article.tema[0] : undefined}
-            size="small"
+            size="xsmall"
             beta={article.status?.tag === "beta"}
           />
         </div>
@@ -142,7 +146,7 @@ const Card = ({
                 {abbrName(article?.contributors[0]?.title)}
               </Detail>
             )}
-            <Detail as="span">{dateStr(date)}</Detail>
+            <Detail as="span">{date}</Detail>
           </span>
         )}
       </div>

aksel.nav.no/website/components/sanity-modules/frontpage-blocks/Highlight.tsx

@@ -0,0 +1,108 @@
+import { urlFor } from "@/sanity/interface";
+import { getAuthors, logNav } from "@/utils";
+import { BodyLong, BodyShort, Heading, Link } from "@navikt/ds-react";
+import cl from "clsx";
+import { getImage } from "components/website-modules/utils/get-image";
+import { useFormatedDate } from "components/website-modules/utils/getDate";
+import Image from "next/legacy/image";
+import NextLink from "next/link";
+import { ArticleT } from "./Card";
+import { Tag } from "./Tag";
+
+export const Highlight = ({
+  article,
+  compact,
+}: {
+  article: ArticleT;
+  compact: boolean;
+}) => {
+  const showFooter = ["aksel_artikkel", "aksel_blogg"].includes(article._type);
+  const useStatusImage =
+    ["ds_artikkel", "komponent_artikkel"].includes(article._type) &&
+    article.status?.bilde;
+
+  const date = useFormatedDate(article?.publishedAt ?? article._createdAt);
+
+  return (
+    <section
+      aria-label={`Fremhevet artikkel: ${article?.heading}`}
+      className={cl({
+        "grid content-start gap-8 md:grid-cols-2": compact,
+        "grid content-start gap-6": !compact,
+      })}
+    >
+      <div className="relative block aspect-video">
+        {useStatusImage ? (
+          <Image
+            src={urlFor(article.status.bilde).quality(100).auto("format").url()}
+            quality={100}
+            layout="fill"
+            aria-hidden
+            className={cl(
+              "bg-deepblue-200 rounded-lg object-cover sm:object-contain",
+              {
+                "hue-rotate-[65deg]": article?.status?.tag === "beta",
+              }
+            )}
+            decoding="auto"
+          />
+        ) : article?.seo?.image ? (
+          <Image
+            src={urlFor(article.seo.image).quality(100).auto("format").url()}
+            quality={100}
+            layout="fill"
+            objectFit="cover"
+            aria-hidden
+            className={cl("rounded-lg", {
+              "hue-rotate-[65deg]": article?.status?.tag === "beta",
+            })}
+            decoding="auto"
+          />
+        ) : (
+          <Image
+            src={getImage(article?.heading ?? "", "thumbnail")}
+            layout="fill"
+            objectFit="contain"
+            aria-hidden
+            className="rounded-lg"
+            decoding="auto"
+          />
+        )}
+      </div>
+      <div>
+        <Tag
+          type={article._type}
+          text={article.tema ? article.tema[0] : undefined}
+          beta={article?.status?.tag === "beta"}
+        />
+        <Heading size="large" level="3">
+          <Link
+            as={NextLink}
+            onClick={(e) =>
+              logNav(
+                "artikkel-kort",
+                window.location.pathname,
+                e.currentTarget.getAttribute("href")
+              )
+            }
+            href={`/${article.slug.current}`}
+            className="text-text-default mb-5 mt-2 underline hover:no-underline"
+          >
+            {article?.heading}
+          </Link>
+        </Heading>
+        <BodyLong className="mb-4" size="small">
+          {article?.ingress ?? article.seo?.meta}
+        </BodyLong>
+        {showFooter && getAuthors(article as any).length > 0 && (
+          <BodyShort size="small" className="text-text-subtle flex gap-2">
+            <span className="font-semibold">
+              {getAuthors(article as any)[0]}
+            </span>
+            <span>{date}</span>
+          </BodyShort>
+        )}
+      </div>
+    </section>
+  );
+};

aksel.nav.no/website/components/sanity-modules/frontpage-blocks/Latest.tsx

@@ -1,16 +1,10 @@
-import { BodyLong, BodyShort, Heading, Link } from "@navikt/ds-react";
-import Masonry, { ResponsiveMasonry } from "react-responsive-masonry";
 import { withErrorBoundary } from "@/error-boundary";
-import Image from "next/legacy/image";
-import NextLink from "next/link";
-import { getImage } from "components/website-modules/utils/get-image";
-import { getAuthors } from "components/website-modules/LatestBloggs";
-import { dateStr, logNav } from "@/utils";
-import { Tag } from "./Tag";
-import Card, { ArticleT } from "./Card";
+import { Heading } from "@navikt/ds-react";
 import cl from "clsx";
-import { urlFor } from "@/sanity/interface";
 import { useEffect, useRef, useState } from "react";
+import Masonry, { ResponsiveMasonry } from "react-responsive-masonry";
+import Card, { ArticleT } from "./Card";
+import { Highlight } from "./Highlight";
 
 export type LatestT = {
   _type: "nytt_fra_aksel";
@@ -29,9 +23,12 @@ const Latest = ({ block }: { block: LatestT }) => {
   const section = useRef(null);
 
   useEffect(() => {
-    const observer = new IntersectionObserver(([entry]) => {
-      entry.isIntersecting && setIntersected(entry.isIntersecting);
-    });
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        entry.isIntersecting && setIntersected(entry.isIntersecting);
+      },
+      { rootMargin: "0px 0px 100px 0px" }
+    );
     observer.observe(section.current);
     return () => observer.disconnect();
   }, []);
@@ -74,99 +71,9 @@ function Highlights({ highlights }: { highlights: ArticleT[] }) {
     <div
       className={cl({ "grid gap-8 md:grid-cols-2": highlights?.length === 2 })}
     >
-      {highlights.map((x, idx) => {
-        const showFooter = ["aksel_artikkel", "aksel_blogg"].includes(x._type);
-        const useStatusImage =
-          ["ds_artikkel", "komponent_artikkel"].includes(x._type) &&
-          x.status?.bilde;
-        return (
-          <section
-            aria-label={`Fremhevet artikkel: ${x?.heading}`}
-            key={idx}
-            className={cl({
-              "grid content-start gap-8 md:grid-cols-2":
-                highlights?.length === 1,
-              "grid content-start gap-6": highlights?.length === 2,
-            })}
-          >
-            <div className="relative block aspect-video">
-              {useStatusImage ? (
-                <Image
-                  src={urlFor(x.status.bilde).quality(100).auto("format").url()}
-                  quality={100}
-                  layout="fill"
-                  aria-hidden
-                  priority
-                  className={cl(
-                    "bg-deepblue-200 rounded-lg object-cover sm:object-contain",
-                    {
-                      "hue-rotate-[65deg]": x?.status?.tag === "beta",
-                    }
-                  )}
-                  decoding="sync"
-                />
-              ) : x?.seo?.image ? (
-                <Image
-                  src={urlFor(x.seo.image).quality(100).auto("format").url()}
-                  quality={100}
-                  layout="fill"
-                  objectFit="cover"
-                  aria-hidden
-                  priority
-                  className={cl("rounded-lg", {
-                    "hue-rotate-[65deg]": x?.status?.tag === "beta",
-                  })}
-                  decoding="sync"
-                />
-              ) : (
-                <Image
-                  src={getImage(x?.heading ?? "", "thumbnail")}
-                  layout="fill"
-                  objectFit="contain"
-                  aria-hidden
-                  priority
-                  className="rounded-lg"
-                  decoding="sync"
-                />
-              )}
-            </div>
-            <div>
-              <Tag
-                type={x._type}
-                text={x.tema ? x.tema[0] : undefined}
-                beta={x?.status?.tag === "beta"}
-              />
-              <NextLink href={`/${x.slug.current}`} passHref legacyBehavior>
-                <Link
-                  onClick={(e) =>
-                    logNav(
-                      "artikkel-kort",
-                      window.location.pathname,
-                      e.currentTarget.getAttribute("href")
-                    )
-                  }
-                  className="text-text-default mb-5 mt-2 no-underline hover:underline"
-                >
-                  <Heading size="large" level="3">
-                    {x?.heading}
-                  </Heading>
-                </Link>
-              </NextLink>
-              <BodyLong className="mb-4" size="small">
-                {x?.ingress ?? x.seo?.meta}
-              </BodyLong>
-              {showFooter && getAuthors(x as any).length > 0 && (
-                <BodyShort size="small" className="text-text-subtle flex gap-2">
-                  <span className="font-semibold">
-                    {getAuthors(x as any)[0]}
-                  </span>
-                  <span>{dateStr(x?.publishedAt ?? x._createdAt)}</span>
-                </BodyShort>
-              )}
-            </div>
-          </section>
-        );
-      })}
+      {highlights.map((x, idx) => (
+        <Highlight article={x} key={idx} compact={highlights.length === 1} />
+      ))}
     </div>
   );
 }