Version Packages (#2090)

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/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:

.storybook/preview.jsx

@@ -4,7 +4,7 @@ import "./layout.css";
 export const parameters = {
   options: {
     storySort: {
-      method: "",
+      method: "alphabetical",
       order: ["Intro", "ds-react", ["form"], ["Default"], "ds-icons"],
       locales: "",
     },

@navikt/aksel-icons/CHANGELOG.md

@@ -1,235 +1,95 @@
 # @navikt/aksel-icons
 
-## 4.3.0
+## 4.6.1
 
-## 4.2.0
+## 4.6.0
 
-## 4.1.7
+## 4.5.0
 
-## 4.1.6
+## 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.3.0",
+  "version": "4.6.1",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/ikoner",
   "repository": {

@navikt/aksel-stylelint/CHANGELOG.md

@@ -1,58 +1,35 @@
 # @navikt/aksel-stylelint
 
-## 4.3.0
+## 4.6.1
 
-## 4.2.0
+## 4.6.0
 
-### Minor Changes
+## 4.5.0
 
-- [#2048](https://github.com/navikt/aksel/pull/2048) [`b1625ba38`](https://github.com/navikt/aksel/commit/b1625ba3882b430d678d0623922d7fb56aa724b3) Thanks [@HalvorHaugan](https://github.com/HalvorHaugan)! - Oppdatert Chat
+## 4.4.2
 
-  - :sparkles: Ny prop `size` som kan settes til "small" for en mer kompakt layout
-  - :sparkles: Ny prop `variant` som erstatter `backgroundColor` og `avatarBgColor`
-  - :sparkles: `avatar` er nå valgfritt
-  - :wheelchair: Forbedret UU
-  - :lipstick: Oppdatert utseende
-
-## 4.1.7
-
-## 4.1.6
-
-## 4.1.5
-
-## 4.1.4
-
-## 4.1.3
-
-## 4.1.2
-
-## 4.1.1
+## 4.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.3.0",
+  "version": "4.6.1",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
   "repository": {
@@ -35,8 +35,8 @@
     "dev": "yarn watch:lint"
   },
   "devDependencies": {
-    "@navikt/ds-css": "^4.3.0",
-    "@navikt/ds-tokens": "^4.3.0",
+    "@navikt/ds-css": "^4.6.1",
+    "@navikt/ds-tokens": "^4.6.1",
     "@types/jest": "^29.0.0",
     "concurrently": "7.2.1",
     "copyfiles": "2.4.1",

@navikt/aksel/CHANGELOG.md

@@ -1,285 +1,50 @@
 # @navikt/aksel
 
-## 4.3.0
+## 4.6.1
 
 ### Patch Changes
 
-- Updated dependencies [[`99c08b8e4`](https://github.com/navikt/aksel/commit/99c08b8e4ab33acd20a21719986452652ffe3c57), [`d39ed906c`](https://github.com/navikt/aksel/commit/d39ed906c61149ac823ebab2e8974a105e592163)]:
-  - @navikt/ds-css@4.3.0
+- Updated dependencies [[`28430f134`](https://github.com/navikt/aksel/commit/28430f13455a8ecc10447e5e1ad75625d29c4bcb)]:
+  - @navikt/ds-css@4.6.1
 
-## 4.2.0
+## 4.6.0
 
 ### Patch Changes
 
-- Updated dependencies [[`b1625ba38`](https://github.com/navikt/aksel/commit/b1625ba3882b430d678d0623922d7fb56aa724b3)]:
-  - @navikt/ds-css@4.2.0
+- Updated dependencies [[`ae70bfa71`](https://github.com/navikt/aksel/commit/ae70bfa7192db46d8dea0dfb0222a857efc46be5)]:
+  - @navikt/ds-css@4.6.0
 
-## 4.1.7
+## 4.5.0
 
 ### Patch Changes
 
-- Updated dependencies [[`42b5af64a`](https://github.com/navikt/aksel/commit/42b5af64ab35d0f2d126d41f8fc3e61fe2834b36)]:
-  - @navikt/ds-css@4.1.7
+- 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.1.6
+## 4.4.2
 
 ### Patch Changes
 
 - Updated dependencies []:
-  - @navikt/ds-css@4.1.6
+  - @navikt/ds-css@4.4.2
 
-## 4.1.5
+## 4.4.1
 
 ### Patch Changes
 
-- Updated dependencies []:
-  - @navikt/ds-css@4.1.5
-
-## 4.1.4
-
-### Patch Changes
-
-- Updated dependencies [[`e06096105`](https://github.com/navikt/aksel/commit/e060961050c75ec815e5c125001f1ff99106e298)]:
-  - @navikt/ds-css@4.1.4
-
-## 4.1.3
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @navikt/ds-css@4.1.3
-
-## 4.1.2
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @navikt/ds-css@4.1.2
-
-## 4.1.1
-
-### Patch Changes
-
-- Updated dependencies [[`91343563c`](https://github.com/navikt/aksel/commit/91343563c916a554d8ade5401c28ab4c3b3e26af)]:
-  - @navikt/ds-css@4.1.1
-
-## 4.1.0
-
-### Patch Changes
-
-- Updated dependencies [[`7b42f536a`](https://github.com/navikt/aksel/commit/7b42f536aa90c1b5dbe2b19f1bbe292701546420), [`c028f36e2`](https://github.com/navikt/aksel/commit/c028f36e2bc58223ebf8b655980dde7eafb30add), [`b2f796d68`](https://github.com/navikt/aksel/commit/b2f796d681f1c1d76d26d1fd743268c8c618a854), [`db8c38a09`](https://github.com/navikt/aksel/commit/db8c38a094cd183db54aebecb62d5b223920a040)]:
-  - @navikt/ds-css@4.1.0
+- 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.3.0",
+  "version": "4.6.1",
   "description": "Aksel command line interface. Handles css-imports, codemods and more",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -29,7 +29,7 @@
   },
   "homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
   "dependencies": {
-    "@navikt/ds-css": "4.3.0",
+    "@navikt/ds-css": "4.6.1",
     "axios": "1.3.6",
     "chalk": "4.1.0",
     "clipboardy": "^2.3.0",

@navikt/core/css/CHANGELOG.md

@@ -1,522 +1,275 @@
 # @navikt/ds-css
 
+## 4.6.1
+
+### Patch Changes
+
+- Skjema: Labels og Legends bruker nå inline-flex når readOnly er satt ([#2089](https://github.com/navikt/aksel/pull/2089))
+
+## 4.6.0
+
+### Minor Changes
+
+- Skjema: De fleste skjemakomponenter har nå styling for `readOnly`-state ([#2080](https://github.com/navikt/aksel/pull/2080))
+
+## 4.5.0
+
+### Minor Changes
+
+- - Alert: La til `closeButton`-prop ([#2079](https://github.com/navikt/aksel/pull/2079))
+
+### Patch Changes
+
+- - Button: Fikset outline-bug i tertiary-variant ved `:active`-state ([#2079](https://github.com/navikt/aksel/pull/2079))
+
+## 4.4.2
+
+## 4.4.1
+
+### Patch Changes
+
+- :lipstick: Chat: fjernet border, satt avatar svg til 24x24px, byttet om "subtle" og "neutral" ([#2077](https://github.com/navikt/aksel/pull/2077))
+
+## 4.4.0
+
+### Minor Changes
+
+- Shadow-tokens er oppdatert: Datepicker har nå ikke border, Modal bruker shadow-xlarge, LinkCard bruker shadow-xsmall ([PR](https://github.com/navikt/aksel/pull/2041))
+
 ## 4.3.0
 
 ### Minor Changes
 
-- [#2069](https://github.com/navikt/aksel/pull/2069) [`99c08b8e4`](https://github.com/navikt/aksel/commit/99c08b8e4ab33acd20a21719986452652ffe3c57) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Popover og Helptext har nå luft mot siden av skjerm på mindre flater
+- Popover/Helptext: Maksbredde på 100vw - 1.5rem. Treffer ikke lengre kanten på skjermen. ([PR](https://github.com/navikt/aksel/pull/2069))
 
 ### Patch Changes
 
-- [#2067](https://github.com/navikt/aksel/pull/2067) [`d39ed906c`](https://github.com/navikt/aksel/commit/d39ed906c61149ac823ebab2e8974a105e592163) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Nested ExpansionCard fikk styling fra parent
+- ExpansionCard: Ved nesting av komponetene fikk man styling fra parent ([PR](https://github.com/navikt/aksel/pull/2067))
 
 ## 4.2.0
 
 ### Minor Changes
 
-- [#2048](https://github.com/navikt/aksel/pull/2048) [`b1625ba38`](https://github.com/navikt/aksel/commit/b1625ba3882b430d678d0623922d7fb56aa724b3) Thanks [@HalvorHaugan](https://github.com/HalvorHaugan)! - Oppdatert Chat
-
-  - :sparkles: Ny prop `size` som kan settes til "small" for en mer kompakt layout
-  - :sparkles: Ny prop `variant` som erstatter `backgroundColor` og `avatarBgColor`
-  - :sparkles: `avatar` er nå valgfritt
-  - :wheelchair: Forbedret UU
-  - :lipstick: Oppdatert utseende
-
-## 4.1.7
-
-### Patch Changes
-
-- [`42b5af64a`](https://github.com/navikt/aksel/commit/42b5af64ab35d0f2d126d41f8fc3e61fe2834b36) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset jsdom-problemer ved rendring av Timeline
-
-## 4.1.6
-
-## 4.1.5
+- 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

@@ -26,7 +26,6 @@
   align-items: center;
   box-shadow: var(--a-shadow-xsmall);
   background-color: var(--ac-chat-avatar-bg, var(--a-surface-neutral-subtle));
-  border: 1px solid var(--ac-chat-border-color, var(--a-border-subtle));
   border-radius: var(--a-border-radius-full);
   color: var(--ac-chat-avatar-color, var(--a-text-default));
   display: flex;
@@ -35,14 +34,16 @@
   overflow: hidden;
   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 {
@@ -50,7 +51,6 @@
   box-shadow: var(--a-shadow-xsmall);
   width: fit-content;
   background-color: var(--ac-chat-bubble-bg, var(--a-surface-neutral-subtle));
-  border: 1px solid var(--ac-chat-border-color, var(--a-border-subtle));
   border-radius: var(--a-border-radius-xlarge);
   border-bottom-left-radius: 2px;
   display: flex;
@@ -72,8 +72,8 @@
   background-color: var(--a-surface-info-subtle);
 }
 
-.navds-chat--neutral .navds-chat__bubble,
-.navds-chat--neutral .navds-chat__avatar {
+.navds-chat--subtle .navds-chat__bubble,
+.navds-chat--subtle .navds-chat__avatar {
   background-color: var(--a-surface-default);
 }
 

@navikt/core/css/date.css

@@ -278,3 +278,13 @@
   visibility: hidden;
   pointer-events: none;
 }
+
+.navds-date__popover:where(.navds-popover) {
+  border: none;
+}
+
+/* Readonly */
+
+.navds-date__field--readonly .navds-date__field-button {
+  cursor: default;
+}

@navikt/core/css/form/fieldset.css

@@ -30,6 +30,10 @@
   padding: 0;
 }
 
+.navds-fieldset--readonly > :where(.navds-fieldset__legend) {
+  display: inline-flex;
+}
+
 .navds-fieldset:disabled > .navds-fieldset__legend,
 .navds-fieldset:disabled > .navds-fieldset__description {
   opacity: 0.3;

@navikt/core/css/form/form.css

@@ -36,3 +36,14 @@
 .navds-form-field__subdescription {
   color: var(--ac-form-subdescription, var(--a-text-subtle));
 }
+
+.navds-form-field--readonly > :where(.navds-form-field__label) {
+  display: inline-flex;
+}
+
+.navds-form-field__readonly-icon {
+  margin-top: var(--a-spacing-05);
+  margin-right: var(--a-spacing-2);
+  flex-shrink: 0;
+  align-self: flex-start;
+}

@navikt/core/css/form/radio-checkbox.css

@@ -22,6 +22,9 @@
   cursor: pointer;
   display: flex;
   gap: var(--a-spacing-2);
+
+  --__ac-radio-checkbox-readonly-bg: var(--a-surface-subtle);
+  --__ac-radio-checkbox-readonly-border: var(--a-border-subtle);
 }
 
 .navds-checkbox__label::before,
@@ -102,7 +105,7 @@
   background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
   width: 0.75rem;
   height: 0.25rem;
-  border-radius: 1px; /* Custom value OK */
+  border-radius: 1px;
   flex-shrink: 0;
 }
 
@@ -244,3 +247,57 @@
 .navds-radio--disabled > .navds-radio__label {
   cursor: not-allowed;
 }
+
+/* Readonly */
+.navds-checkbox--readonly > :where(.navds-checkbox__input, .navds-checkbox__label),
+.navds-radio--readonly > :where(.navds-radio__input, .navds-radio__label) {
+  cursor: default;
+}
+
+.navds-checkbox--readonly .navds-checkbox__label-text {
+  display: inline-flex;
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:hover + .navds-checkbox__label,
+.navds-radio--readonly > .navds-radio__input:hover + .navds-radio__label {
+  color: var(--a-text-default);
+}
+
+.navds-checkbox--readonly
+  > .navds-checkbox__input:not(:disabled):not(:checked):not(:indeterminate)
+  + .navds-checkbox__label::before,
+.navds-checkbox--readonly
+  > .navds-checkbox__input:hover:not(:checked):not(:indeterminate):not(:focus-visible)
+  + .navds-checkbox__label::before,
+.navds-radio--readonly > .navds-radio__input:not(:disabled):not(:checked):not(:indeterminate) + .navds-radio__label::before,
+.navds-radio--readonly
+  > .navds-radio__input:hover:not(:checked):not(:indeterminate):not(:focus-visible)
+  + .navds-radio__label::before {
+  background-color: var(--__ac-radio-checkbox-readonly-bg);
+  box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
+.navds-radio--readonly > .navds-radio__input:focus-visible + .navds-radio__label::before {
+  --__ac-radio-checkbox-readonly-border: var(--a-border-subtle), var(--a-shadow-focus);
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label::before {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSJyZ2JhKDAsIDAsIDAsIDAuNjUpIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
+  box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
+  background-color: var(--__ac-radio-checkbox-readonly-bg);
+}
+
+.navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border), inset 0 0 0 4px var(--__ac-radio-checkbox-readonly-bg);
+  background-color: var(--a-icon-subtle);
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
+  box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
+  background-color: var(--__ac-radio-checkbox-readonly-bg);
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+  background-color: var(--a-icon-subtle);
+}

@navikt/core/css/form/select.css

@@ -79,3 +79,9 @@
 .navds-select__input:disabled > option {
   color: var(--a-text-default);
 }
+
+.navds-select--readonly .navds-select__input {
+  background-color: var(--a-surface-subtle);
+  border-color: var(--a-border-subtle);
+  cursor: default;
+}

@navikt/core/css/form/switch.css

@@ -178,3 +178,44 @@
 .navds-switch__input:disabled ~ .navds-switch__label-wrapper {
   cursor: not-allowed;
 }
+
+/* Readonly */
+.navds-switch--readonly > .navds-switch__track,
+.navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__track,
+.navds-switch--readonly > .navds-switch__input:checked ~ .navds-switch__track,
+.navds-switch--readonly > .navds-switch__input:checked:hover ~ .navds-switch__track {
+  background-color: var(--a-surface-neutral-moderate);
+}
+
+.navds-switch--readonly > .navds-switch__label-wrapper,
+.navds-switch--readonly > .navds-switch__input {
+  cursor: default;
+}
+
+.navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__label-wrapper,
+.navds-switch--readonly .navds-switch__label-wrapper:hover {
+  color: var(--a-text-default);
+}
+
+.navds-switch--readonly .navds-switch__label {
+  display: inline-flex;
+}
+
+.navds-switch--readonly .navds-switch__thumb {
+  background-color: var(--a-surface-subtle);
+  box-shadow: 0 0 0 2px var(--a-border-default);
+}
+
+.navds-switch--readonly > .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+  color: var(--a-icon-subtle);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
+    transform: translateX(0);
+  }
+
+  .navds-switch--readonly > .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
+    transform: translateX(20px);
+  }
+}

@navikt/core/css/form/text-field.css

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

@navikt/core/css/form/textarea.css

@@ -99,9 +99,8 @@
   cursor: not-allowed;
 }
 
-.navds-textarea__input[readonly] {
-  background-color: var(--ac-textarea-bg, var(--a-surface-default));
-  border-color: var(--ac-textarea-border, var(--a-border-default));
-  box-shadow: none;
-  cursor: not-allowed;
+.navds-textarea--readonly .navds-textarea__input {
+  background-color: var(--a-surface-subtle);
+  border-color: var(--a-border-subtle);
+  cursor: default;
 }

@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.3.0",
+  "version": "4.6.1",
   "description": "CSS for NAV Designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -27,7 +27,7 @@
     "css:get-version": "node config/get-version.js"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^4.3.0",
+    "@navikt/ds-tokens": "^4.6.1",
     "cssnano": "6.0.0",
     "fast-glob": "3.2.11",
     "lodash": "4.17.21",

@navikt/core/css/tokens.json

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

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "4.3.0",
+  "version": "4.6.1",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.24.1",
-    "@navikt/aksel-icons": "^4.3.0",
+    "@navikt/aksel-icons": "^4.6.1",
     "@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/Chat.tsx

@@ -26,7 +26,7 @@ export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Changes background color on avatar and bubbles.
    * Avoid using the same background as the surface behind Chat.
-   * @default "subtle"
+   * @default "neutral"
    */
   variant?: "subtle" | "info" | "neutral";
   /**
@@ -92,7 +92,7 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
       timestamp,
       avatar,
       position = "left",
-      variant = "subtle",
+      variant = "neutral",
       avatarBgColor,
       backgroundColor,
       toptextPosition,

@navikt/core/react/src/date/DateInput.tsx

@@ -4,6 +4,7 @@ import React, { forwardRef, InputHTMLAttributes } from "react";
 import { BodyShort, ErrorMessage, Label, omit } from "..";
 import { FormFieldProps, useFormField } from "../form/useFormField";
 import { useDateInputContext } from "./context";
+import { ReadOnlyIcon } from "../form/ReadOnlyIcon";
 
 export interface DateInputProps
   extends FormFieldProps,
@@ -57,6 +58,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
     errorId,
     showErrorMsg,
     hasError,
+    readOnly,
   } = useFormField(props, conditionalVariables.prefix);
 
   return (
@@ -71,6 +73,9 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
           "navds-date__field--error": hasError,
           "navds-form-field--disabled": !!inputProps.disabled,
           "navds-text-field--disabled": !!inputProps.disabled,
+          "navds-form-field--readonly": readOnly,
+          "navds-text-field--readonly": readOnly,
+          "navds-date__field--readonly": readOnly,
         }
       )}
     >
@@ -81,6 +86,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
           "navds-sr-only": hideLabel,
         })}
       >
+        <ReadOnlyIcon readOnly={readOnly} />
         {label}
       </Label>
       {!!description && (
@@ -102,6 +108,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
           {...inputProps}
           autoComplete="off"
           aria-controls={ariaId}
+          readOnly={readOnly}
           className={cl(
             "navds-date__field-input",
             "navds-text-field__input",
@@ -111,8 +118,8 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
           size={14}
         />
         <button
-          disabled={inputProps.disabled}
-          tabIndex={open ? -1 : 0}
+          disabled={inputProps.disabled || readOnly}
+          tabIndex={readOnly ? -1 : open ? -1 : 0}
           onClick={() => onOpen()}
           type="button"
           className="navds-date__field-button"

@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/datepicker/datepicker.stories.tsx

@@ -341,3 +341,25 @@ export const Size = () => {
     </div>
   );
 };
+
+export const Readonly = () => {
+  const { datepickerProps, inputProps } = useDatepicker({
+    fromDate: new Date("Aug 23 2019"),
+    toDate: new Date("Feb 23 2024"),
+    onDateChange: console.log,
+  });
+
+  return (
+    <div style={{ display: "flex", gap: "1rem" }}>
+      <DatePicker {...datepickerProps} dropdownCaption>
+        <DatePicker.Input
+          size="medium"
+          {...inputProps}
+          value="01.02.2021"
+          label="Velg dato"
+          readOnly
+        />
+      </DatePicker>
+    </div>
+  );
+};

@navikt/core/react/src/date/hooks/useDatepicker.tsx

@@ -204,6 +204,9 @@ export const useDatepicker = (
   };
 
   const handleFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
+    if (e.target.readOnly) {
+      return;
+    }
     !open && openOnFocus && handleOpen(true);
     let day = parseDate(
       e.target.value,

@navikt/core/react/src/date/hooks/useMonthPicker.tsx

@@ -201,6 +201,9 @@ export const useMonthpicker = (
   };
 
   const handleFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
+    if (e.target.readOnly) {
+      return;
+    }
     !open && openOnFocus && handleOpen(true);
     let day = parseDate(
       e.target.value,

@navikt/core/react/src/date/hooks/useRangeDatepicker.tsx

@@ -321,6 +321,9 @@ export const useRangeDatepicker = (
   };
 
   const handleFocus = (e, src: RangeT) => {
+    if (e.target.readOnly) {
+      return;
+    }
     !open && openOnFocus && setOpen(true);
     let day = parseDate(
       e.target.value,

@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/ConfirmationPanel.tsx

@@ -6,7 +6,7 @@ import { useFormField } from "./useFormField";
 export interface ConfirmationPanelProps
   extends Omit<
     CheckboxProps,
-    "children" | "indeterminate" | "hideLabel" | "error"
+    "children" | "indeterminate" | "hideLabel" | "error" | "readOnly"
   > {
   /**
    * Additional information on panel

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

@@ -3,6 +3,7 @@ import React, { FieldsetHTMLAttributes, forwardRef, useContext } from "react";
 import { BodyShort, ErrorMessage, Label, omit } from "../..";
 import { FormFieldProps } from "../useFormField";
 import { useFieldset } from "./useFieldset";
+import { ReadOnlyIcon } from "../ReadOnlyIcon";
 
 export type FieldsetContextProps = {
   /**
@@ -21,6 +22,10 @@ export type FieldsetContextProps = {
    * Sets fieldset and all form-children to disabled
    */
   disabled: boolean;
+  /**
+   * Read only-state
+   */
+  readOnly?: boolean;
 };
 
 export const FieldsetContext = React.createContext<FieldsetContextProps | null>(
@@ -47,6 +52,7 @@ export interface FieldsetProps
    * @default true
    */
   errorPropagation?: boolean;
+  nativeReadOnly?: boolean;
 }
 
 export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
@@ -57,6 +63,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
       showErrorMsg,
       hasError,
       size,
+      readOnly,
       inputDescriptionId,
     } = useFieldset(props);
 
@@ -69,6 +76,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
       legend,
       description,
       hideLegend,
+      nativeReadOnly = true,
       ...rest
     } = props;
 
@@ -82,17 +90,21 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
           }),
           size,
           disabled: props.disabled ?? false,
+          readOnly,
         }}
       >
         <fieldset
-          {...omit(rest, ["errorId", "error", "size"])}
+          {...omit(rest, ["errorId", "error", "size", "readOnly"])}
           {...inputProps}
           ref={ref}
           className={cl(
             className,
             "navds-fieldset",
             `navds-fieldset--${size}`,
-            { "navds-fieldset--error": hasError }
+            {
+              "navds-fieldset--error": hasError,
+              "navds-fieldset--readonly": readOnly,
+            }
           )}
         >
           <Label
@@ -102,6 +114,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
               "navds-sr-only": !!hideLegend,
             })}
           >
+            <ReadOnlyIcon readOnly={readOnly} nativeReadOnly={nativeReadOnly} />
             {legend}
           </Label>
           {!!description && (

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

@@ -0,0 +1,20 @@
+import { PadlockLockedFillIcon } from "@navikt/aksel-icons";
+import React from "react";
+
+export const ReadOnlyIcon = ({
+  readOnly,
+  nativeReadOnly = true,
+}: {
+  readOnly?: boolean;
+  nativeReadOnly?: boolean;
+}) => {
+  if (readOnly) {
+    return (
+      <PadlockLockedFillIcon
+        {...(nativeReadOnly ? { "aria-hidden": true } : { title: "readonly" })}
+        className="navds-form-field__readonly-icon"
+      />
+    );
+  }
+  return null;
+};

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

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

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

@@ -7,6 +7,7 @@ import React, {
 } from "react";
 import { BodyShort, Loader, omit } from "..";
 import { FormFieldProps, useFormField } from "./useFormField";
+import { ReadOnlyIcon } from "./ReadOnlyIcon";
 
 const SelectedIcon = () => (
   <svg
@@ -63,12 +64,12 @@ export interface SwitchProps
  *
  * @example
  * ```jsx
- * <Switch>Slå på notifikasjoner</Switch>
+ * <Switch>Varsle med SMS</Switch>
  * ```
  */
 export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
   (props, ref) => {
-    const { inputProps, size } = useFormField(props, "switch");
+    const { inputProps, size, readOnly } = useFormField(props, "switch");
 
     const {
       children,
@@ -90,11 +91,6 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
       checkedProp !== undefined && setChecked(checkedProp);
     }, [checkedProp]);
 
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      setChecked(e.target.checked);
-      props.onChange && props.onChange(e);
-    };
-
     return (
       <div
         className={cl(
@@ -105,18 +101,32 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
           {
             "navds-switch--loading": loading,
             "navds-switch--disabled": inputProps.disabled ?? loading,
+            "navds-switch--readonly": readOnly,
           }
         )}
       >
         <input
-          {...omit(rest, ["size"])}
+          {...omit(rest, ["size", "readOnly"])}
           {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
           disabled={inputProps.disabled ?? loading}
           checked={checkedProp}
           defaultChecked={defaultChecked}
           ref={ref}
           type="checkbox"
-          onChange={(e) => handleChange(e)}
+          onChange={(e) => {
+            if (readOnly) {
+              return;
+            }
+            setChecked(e.target.checked);
+            props.onChange && props.onChange(e);
+          }}
+          onClick={(e) => {
+            if (readOnly) {
+              e.preventDefault();
+              return;
+            }
+            props?.onClick?.(e);
+          }}
           className={cl(className, "navds-switch__input")}
         />
         <span className="navds-switch__track">
@@ -136,6 +146,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
             })}
           >
             <BodyShort as="div" size={size} className="navds-switch__label">
+              <ReadOnlyIcon readOnly={readOnly} nativeReadOnly={false} />
               {children}
             </BodyShort>
             {description && (

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

@@ -1,6 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef, InputHTMLAttributes } from "react";
 import { BodyShort, ErrorMessage, Label, omit } from "..";
+import { ReadOnlyIcon } from "./ReadOnlyIcon";
 import { FormFieldProps, useFormField } from "./useFormField";
 
 export interface TextFieldProps
@@ -62,6 +63,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       htmlSize,
       hideLabel = false,
       type = "text",
+      readOnly,
       ...rest
     } = props;
 
@@ -71,10 +73,13 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           className,
           "navds-form-field",
           `navds-form-field--${size}`,
+
           {
             "navds-text-field--error": hasError,
             "navds-text-field--disabled": !!inputProps.disabled,
             "navds-form-field--disabled": !!inputProps.disabled,
+            "navds-form-field--readonly": readOnly,
+            "navds-text-field--readonly": readOnly,
           }
         )}
       >
@@ -85,6 +90,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
             "navds-sr-only": hideLabel,
           })}
         >
+          <ReadOnlyIcon readOnly={readOnly} />
           {label}
         </Label>
 
@@ -105,6 +111,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           {...inputProps}
           ref={ref}
           type={type}
+          readOnly={readOnly}
           className={cl(
             "navds-text-field__input",
             "navds-body-short",

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

@@ -3,6 +3,7 @@ import React, { forwardRef, useState } from "react";
 import { BodyShort, ErrorMessage, Label, omit, useId } from "..";
 import TextareaAutosize from "../util/TextareaAutoSize";
 import { FormFieldProps, useFormField } from "./useFormField";
+import { ReadOnlyIcon } from "./ReadOnlyIcon";
 
 /**
  * TODO: Mulighet for lokalisering av sr-only/counter text
@@ -85,6 +86,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
       hideLabel = false,
       resize,
       i18n,
+      readOnly,
       ...rest
     } = props;
 
@@ -115,6 +117,8 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           `navds-form-field--${size}`,
           {
             "navds-form-field--disabled": !!inputProps.disabled,
+            "navds-form-field--readonly": readOnly,
+            "navds-textarea--readonly": readOnly,
             "navds-textarea--error": hasError,
             "navds-textarea--resize": resize,
           }
@@ -127,6 +131,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
             "navds-sr-only": hideLabel,
           })}
         >
+          <ReadOnlyIcon readOnly={readOnly} />
           {label}
         </Label>
         {!!description && (
@@ -152,6 +157,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
             }
             minRows={getMinRows()}
             ref={ref}
+            readOnly={readOnly}
             className={cl(
               "navds-textarea__input",
               "navds-body-short",
@@ -203,8 +209,8 @@ export const Counter = ({ maxLength, currentLength, size, i18n }) => {
       size={size}
     >
       {difference < 0
-        ? `${Math.abs(difference)} ${i18n?.counterLeft ?? "tegn for mye"}`
-        : `${difference} ${i18n?.counterTooMuch ?? "tegn igjen"}`}
+        ? `${Math.abs(difference)} ${i18n?.counterTooMuch ?? "tegn for mye"}`
+        : `${difference} ${i18n?.counterLeft ?? "tegn igjen"}`}
     </BodyShort>
   );
 };

@navikt/core/react/src/form/checkbox/Checkbox.tsx

@@ -4,6 +4,7 @@ import { BodyShort } from "../../typography";
 import { omit } from "../../util";
 import { FormFieldProps } from "../useFormField";
 import useCheckbox from "./useCheckbox";
+import { ReadOnlyIcon } from "../ReadOnlyIcon";
 
 export interface CheckboxProps
   extends FormFieldProps,
@@ -42,7 +43,7 @@ export interface CheckboxProps
 
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
   (props, ref) => {
-    const { inputProps, hasError, size } = useCheckbox(props);
+    const { inputProps, hasError, size, readOnly, nested } = useCheckbox(props);
 
     return (
       <div
@@ -53,6 +54,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
           {
             "navds-checkbox--error": hasError,
             "navds-checkbox--disabled": inputProps.disabled,
+            "navds-checkbox--readonly": readOnly,
           }
         )}
       >
@@ -65,6 +67,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             "hideLabel",
             "indeterminate",
             "errorId",
+            "readOnly",
           ])}
           {...inputProps}
           type="checkbox"
@@ -88,7 +91,14 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
               "navds-sr-only": props.hideLabel,
             })}
           >
-            <BodyShort as="span" size={size}>
+            <BodyShort
+              as="span"
+              size={size}
+              className="navds-checkbox__label-text"
+            >
+              {!nested && (
+                <ReadOnlyIcon readOnly={readOnly} nativeReadOnly={false} />
+              )}
               {props.children}
             </BodyShort>
             {props.description && (

@navikt/core/react/src/form/checkbox/CheckboxGroup.tsx

@@ -81,6 +81,7 @@ export const CheckboxGroup = forwardRef<
           "navds-checkbox-group",
           `navds-checkbox-group--${rest.size ?? fieldset?.size ?? "medium"}`
         )}
+        nativeReadOnly={false}
       >
         <CheckboxGroupContext.Provider
           value={{

@navikt/core/react/src/form/checkbox/checkbox.stories.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/rules-of-hooks */
+import { Meta } from "@storybook/react";
 import React, { useState } from "react";
 import { Checkbox, CheckboxGroup } from "../../index";
-import { Meta } from "@storybook/react";
 
 export default {
   title: "ds-react/Checkbox",
@@ -190,3 +190,37 @@ export const Indeterminate = () => {
     </>
   );
 };
+
+export const Readonly = () => (
+  <div className="colgap">
+    <CheckboxGroup
+      legend="Hvilken frukt liker du?"
+      defaultValue={["banan"]}
+      readOnly
+    >
+      <Checkbox value="banan">Banan</Checkbox>
+      <Checkbox value="eple">Eple</Checkbox>
+      <Checkbox value="druer" indeterminate>
+        Druer
+      </Checkbox>
+    </CheckboxGroup>
+    <CheckboxGroup
+      legend="Hvilken frukt liker du?"
+      error="feilmelding"
+      defaultValue={["Eple"]}
+      readOnly
+    >
+      <Checkbox value="eple" description="Epler kommer i 4 varianter">
+        Eple
+      </Checkbox>
+      <Checkbox value="banan">Banan</Checkbox>
+    </CheckboxGroup>
+    <hr />
+    <Checkbox value="tekst1" readOnly>
+      Eple single
+    </Checkbox>
+    <Checkbox value="tekst1" checked readOnly>
+      Banan single
+    </Checkbox>
+  </div>
+);

@navikt/core/react/src/form/checkbox/useCheckbox.ts

@@ -10,7 +10,7 @@ import { omit } from "../..";
 const useCheckbox = ({ children, ...props }: CheckboxProps) => {
   const checkboxGroup = useContext(CheckboxGroupContext);
 
-  const { inputProps, ...rest } = useFormField(
+  const { inputProps, readOnly, ...rest } = useFormField(
     omit(props, ["description"]),
     "checkbox"
   );
@@ -30,6 +30,8 @@ const useCheckbox = ({ children, ...props }: CheckboxProps) => {
 
   return {
     ...rest,
+    readOnly,
+    nested: !!checkboxGroup,
     inputProps: {
       ...inputProps,
       checked: checkboxGroup?.value
@@ -39,9 +41,19 @@ const useCheckbox = ({ children, ...props }: CheckboxProps) => {
         ? checkboxGroup.defaultValue.includes(props.value)
         : props.defaultChecked,
       onChange: (e) => {
+        if (readOnly) {
+          return;
+        }
         props.onChange && props.onChange(e);
         checkboxGroup && checkboxGroup.toggleValue(props.value);
       },
+      onClick: (e) => {
+        if (readOnly) {
+          e.preventDefault();
+          return;
+        }
+        props?.onClick?.(e);
+      },
     },
   };
 };

@navikt/core/react/src/form/radio/Radio.tsx

@@ -6,7 +6,7 @@ import { FormFieldProps } from "../useFormField";
 import { useRadio } from "./useRadio";
 
 export interface RadioProps
-  extends Omit<FormFieldProps, "error" | "errorId">,
+  extends Omit<FormFieldProps, "error" | "errorId" | "readOnly">,
     Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "value"> {
   /**
    * Radio label
@@ -23,17 +23,18 @@ export interface RadioProps
 }
 
 export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
-  const { inputProps, size, hasError } = useRadio(props);
+  const { inputProps, size, hasError, readOnly } = useRadio(props);
 
   return (
     <div
       className={cl(props.className, "navds-radio", `navds-radio--${size}`, {
         "navds-radio--error": hasError,
         "navds-radio--disabled": inputProps.disabled,
+        "navds-radio--readonly": readOnly,
       })}
     >
       <input
-        {...omit(props, ["children", "size", "description"])}
+        {...omit(props, ["children", "size", "description", "readOnly"])}
         {...inputProps}
         className="navds-radio__input"
         ref={ref}

@navikt/core/react/src/form/radio/RadioGroup.tsx

@@ -65,6 +65,7 @@ export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(
       value,
       onChange = () => {},
       required,
+      readOnly,
       ...rest
     },
     ref
@@ -76,12 +77,14 @@ export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(
     return (
       <Fieldset
         {...rest}
+        readOnly={readOnly}
         ref={ref}
         className={cl(
           className,
           "navds-radio-group",
           `navds-radio-group--${rest.size ?? fieldset?.size ?? "medium"}`
         )}
+        nativeReadOnly={false}
       >
         <RadioGroupContext.Provider
           value={{

@navikt/core/react/src/form/radio/radio.stories.tsx

@@ -92,3 +92,30 @@ export const GroupDescription = () => (
     <Radio value="tekst2">Radiotekst</Radio>
   </RadioGroup>
 );
+
+export const UUDemo = () => (
+  <div className="colgap">
+    <RadioGroup
+      legend="Hvilken frukt vil du ha?"
+      description="Du kan bare velge en frukt"
+      defaultValue="eple"
+      readOnly
+    >
+      <Radio value="eple">Eple</Radio>
+      <Radio value="banan" description="Bananer er importert fra X">
+        Banan
+      </Radio>
+      <Radio value="druer">Druer</Radio>
+    </RadioGroup>
+    <RadioGroup
+      legend="Når har du ferie?"
+      defaultValue="1"
+      readOnly
+      error="du må velge en ferie"
+    >
+      <Radio value="1">August</Radio>
+      <Radio value="2">Juli</Radio>
+      <Radio value="3">Juni</Radio>
+    </RadioGroup>
+  </div>
+);

@navikt/core/react/src/form/radio/useRadio.ts

@@ -10,7 +10,7 @@ import { omit } from "../..";
 export const useRadio = (props: RadioProps) => {
   const radioGroup = useContext(RadioGroupContext);
 
-  const { inputProps, ...rest } = useFormField(
+  const { inputProps, readOnly, ...rest } = useFormField(
     omit(props, ["description"]),
     "radio"
   );
@@ -25,6 +25,7 @@ export const useRadio = (props: RadioProps) => {
 
   return {
     ...rest,
+    readOnly,
     inputProps: {
       ...inputProps,
       name: radioGroup?.name,
@@ -37,9 +38,19 @@ export const useRadio = (props: RadioProps) => {
           ? undefined
           : radioGroup?.value === props.value,
       onChange: (e) => {
+        if (readOnly) {
+          return;
+        }
         props.onChange && props.onChange(e);
         radioGroup?.onChange && radioGroup.onChange(props.value);
       },
+      onClick: (e) => {
+        if (readOnly) {
+          e.preventDefault();
+          return;
+        }
+        props?.onClick?.(e);
+      },
       required: radioGroup?.required,
       type: "radio",
     },

@navikt/core/react/src/form/search/Search.tsx

@@ -27,7 +27,7 @@ export type SearchClearEvent =
   | { trigger: "Escape"; event: React.KeyboardEvent<HTMLDivElement> };
 
 export interface SearchProps
-  extends FormFieldProps,
+  extends Omit<FormFieldProps, "readOnly">,
     Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> {
   children?: React.ReactNode;
   /**
@@ -221,7 +221,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
             )}
             <input
               ref={mergedRef}
-              {...omit(rest, ["error", "errorId", "size"])}
+              {...omit(rest, ["error", "errorId", "size", "readOnly"])}
               {...inputProps}
               value={value ?? internalValue}
               onChange={(e) => handleChange(e.target.value)}

@navikt/core/react/src/form/stories/select.stories.tsx

@@ -114,3 +114,20 @@ export const HideLabel = () => {
     </Select>
   );
 };
+
+export const Readonly = () => {
+  return (
+    <div className="colgap">
+      <Select
+        label="Hvilkets land er du fra?"
+        description="Velg landet du bor 180 dagen i året"
+        readOnly
+      >
+        {content}
+      </Select>
+      <Select label="Hvilkets land er du fra?" readOnly error="feilmelding">
+        {content}
+      </Select>
+    </div>
+  );
+};

@navikt/core/react/src/form/stories/switch.stories.tsx

@@ -116,3 +116,17 @@ export const HideLabel = () => {
     </div>
   );
 };
+
+export const Readonly = () => {
+  return (
+    <div className="colgap">
+      <Switch description="Slår av alle notifikasjoner" readOnly>
+        Notifikasjoner
+      </Switch>
+
+      <Switch checked readOnly>
+        Notifikasjoner
+      </Switch>
+    </div>
+  );
+};

@navikt/core/react/src/form/stories/text-field.stories.tsx

@@ -83,3 +83,17 @@ export const Disabled = () => {
 export const HideLabel = () => {
   return <TextField label="Ipsum enim quis culpa" hideLabel />;
 };
+
+export const Readonly = () => {
+  return (
+    <div className="colgap">
+      <TextField
+        label="Bosted"
+        description="Skriv bosted i Norge"
+        readOnly
+        value="Oslo"
+      />
+      <TextField label="Bosted" readOnly error="feilmelding" value="Oslo" />
+    </div>
+  );
+};

@navikt/core/react/src/form/stories/textarea.stories.tsx

@@ -120,3 +120,22 @@ export const MaxRows = () => {
 export const Resize = () => {
   return <Textarea resize label="Ipsum enim quis culpa" />;
 };
+
+export const Readonly = () => {
+  return (
+    <div className="colgap">
+      <Textarea
+        label="På hvilket grunnlag har du tatt denne vurderingen?"
+        description="Beskriv i korte punkter"
+        value="Denne vurderingen ble gjort på grunnlag av X og Y"
+        readOnly
+      />
+      <Textarea
+        label="På hvilket grunnlag har du tatt denne vurderingen?"
+        readOnly
+        value="Denne vurderingen ble gjort på grunnlag av X og Y"
+        error="feilmelding"
+      />
+    </div>
+  );
+};

@navikt/core/react/src/form/useFormField.ts

@@ -29,6 +29,10 @@ export interface FormFieldProps {
    * Override internal id
    */
   id?: string;
+  /**
+   * Read only-state
+   */
+  readOnly?: boolean;
 }
 
 /**
@@ -46,8 +50,24 @@ export const useFormField = (props: FormFieldProps, prefix: string) => {
   const inputDescriptionId = `${prefix}-description-${genId}`;
 
   const disabled = fieldset?.disabled || props.disabled;
-  const hasError: boolean = !disabled && !!(error || fieldset?.error);
-  const showErrorMsg = !disabled && !!error && typeof error !== "boolean";
+  const readOnly =
+    ((fieldset?.readOnly || props.readOnly) && !disabled) || undefined;
+
+  const hasError: boolean =
+    !disabled && !readOnly && !!(error || fieldset?.error);
+  const showErrorMsg =
+    !disabled && !readOnly && !!error && typeof error !== "boolean";
+
+  const ariaInvalid = { ...(hasError ? { "aria-invalid": true } : {}) };
+
+  if ((props as any)?.required && process.env.NODE_ENV !== "production") {
+    console.warn(
+      "Aksel: Use of 'required' in form-elements is heavily discuouraged. Docs about why here:"
+    );
+    console.warn(
+      "https://aksel.nav.no/god-praksis/artikler/obligatoriske-og-valgfrie-skjemafelter#h3bfe00453471"
+    );
+  }
 
   return {
     showErrorMsg,
@@ -55,9 +75,10 @@ export const useFormField = (props: FormFieldProps, prefix: string) => {
     errorId,
     inputDescriptionId,
     size: size ?? fieldset?.size ?? "medium",
+    readOnly,
     inputProps: {
       id,
-      "aria-invalid": hasError,
+      ...ariaInvalid,
       "aria-describedby":
         cl(props["aria-describedby"], {
           [inputDescriptionId]:
@@ -65,6 +86,7 @@ export const useFormField = (props: FormFieldProps, prefix: string) => {
           [errorId]: showErrorMsg,
           [fieldset?.errorId ?? ""]: hasError && !!fieldset?.error,
         }) || undefined,
+
       disabled,
     },
   };

@navikt/core/tailwind/CHANGELOG.md

@@ -1,259 +1,37 @@
 # @navikt/ds-tailwind
 
-## 4.3.0
+## 4.6.1
 
-## 4.2.0
+## 4.6.0
 
-## 4.1.7
+## 4.5.0
 
-## 4.1.6
+## 4.4.2
 
-## 4.1.5
+## 4.4.1
 
-## 4.1.4
+## 4.4.0
 
-## 4.1.3
+### Minor Changes
 
-## 4.1.2
+- Shadow-tokens er oppdatert ([PR](https://github.com/navikt/aksel/pull/2041))
 
-## 4.1.1
+- 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.3.0",
+  "version": "4.6.1",
   "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.3.0",
+    "@navikt/ds-tokens": "^4.6.1",
     "@types/jest": "^29.0.0",
     "color": "4.2.3",
     "jest": "^29.0.0",

@navikt/core/tokens/CHANGELOG.md

@@ -1,289 +1,51 @@
 # @navikt/ds-tokens
 
-## 4.3.0
+## 4.6.1
 
-## 4.2.0
+## 4.6.0
 
-## 4.1.7
+## 4.5.0
 
-## 4.1.6
+## 4.4.2
 
-## 4.1.5
+## 4.4.1
 
-## 4.1.4
+## 4.4.0
 
-## 4.1.3
+### Minor Changes
 
-## 4.1.2
-
-## 4.1.1
+- 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

@@ -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.3.0",
+  "version": "4.6.1",
   "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,887 @@
+# Changelog
+
+## 4.6.1
+
+### @navikt/ds-react
+
+- Skjema: Labels og Legends bruker nå inline-flex når readOnly er satt ([#2089](https://github.com/navikt/aksel/pull/2089))
+
+### @navikt/ds-css
+
+- Skjema: Labels og Legends bruker nå inline-flex når readOnly er satt ([#2089](https://github.com/navikt/aksel/pull/2089))
+
+## 4.6.0
+
+### @navikt/ds-react
+
+- Skjema: De fleste skjemakomponenter støtter nå `readOnly`-state ([#2080](https://github.com/navikt/aksel/pull/2080))
+
+### @navikt/ds-css
+
+- Skjema: De fleste skjemakomponenter har nå styling for `readOnly`-state ([#2080](https://github.com/navikt/aksel/pull/2080))
+
+## 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/README.md

@@ -11,7 +11,7 @@ CMS og nettside for [aksel.nav.no](https://aksel.nav.no/)
 
 ### /website/sanity
 
-Det publiserte studioet finner man på [aksel.nav.no/admin](https://aksel.nav.no/admin)(krever NAV SSO).
+Det publiserte studioet finner man på [aksel.nav.no/admin](https://aksel.nav.no/admin)(krever NAV SSO for innlogging).
 
 `production`-datasettet er privat, så man må ha riktige tilganger for å kunne lese/jobbe med dataen der.
 
@@ -19,17 +19,24 @@ Det publiserte studioet finner man på [aksel.nav.no/admin](https://aksel.nav.no
 
 ### Bidrag
 
-Branch `main` blir pusher rett til prod -> aksel.nav.no. For å utvikle nye features brukes branch `next` som ved push publiseres til devmiljø https://aksel.ekstern.dev.nav.no/. Kan også publisere andre branches til dev ved bruk av workflow-dispatch.
+Branch `main` blir pusher rett til prod -> aksel.nav.no. For å utvikle nye features kan branch `next` brukes, som ved push publiseres til devmiljø https://aksel.ekstern.dev.nav.no/. Kan også publisere andre branches til dev ved bruk av workflow-dispatch.
 
 ## Kode-eksempler
 
-Alle eksemplene våre ligger under /website/pages/eksempler. For å se endringene live kan man starte opp storybook med `yarn storybook`. Du trenger da ikke tilgang til sanity for å se endringene.
+Alle eksemplene våre ligger under `/website/pages/eksempler`. For å se endringene live kan man starte opp storybook med `yarn storybook:aksel`.
+
+> Du trenger ikke secrets for å teste storybook
 
 ### Nettside (localhost:3000)
 
 ```bash
+// dev
 yarn install
 yarn dev
+
+// prod
+yarn build:next
+yarn serve:next
 ```
 
 **Rettigheter**
@@ -58,4 +65,4 @@ Kjøres backups hver 3 dag til GCP-bucket under `designsystem-prod`
 
 Spørsmål og kontakt kan rettes til team Aksel
 
-Aksel har også en egen Slack-kanal #aksel-designsystemet
+Aksel har også en egen Slack-kanal `#aksel-designsystemet`

aksel.nav.no/package.json

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

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

@@ -81,83 +81,81 @@ export const WithSidebar = ({
             <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="from-deepblue-700 rounded-xl bg-gradient-to-br via-blue-500 to-violet-700">
-                <div
-                  className={cl(
-                    "relative mb-10 min-h-[12.5rem] overflow-hidden rounded-xl pl-6 pr-4 md:pl-10 lg:pr-10",
-                    {
-                      "bg-surface-subtle flex items-center justify-between":
-                        variant === "page",
-                      "bg-deepblue-700/80 grid py-[4.25rem] pb-6":
-                        variant !== "page",
-                    }
+              <div
+                className={cl(
+                  "relative mb-10 min-h-[12.5rem] overflow-hidden rounded-xl pl-6 pr-4 md:pl-10 lg:pr-10",
+                  {
+                    "bg-surface-subtle flex items-center justify-between":
+                      variant === "page",
+                    "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",
+                  }
+                )}
+              >
+                <div className="z-[1]">
+                  {variant === "page" && pageProps?.kategori && (
+                    <Detail as="div" className="mb-2">
+                      <NextLink
+                        href={`/${pageType.type.toLowerCase()}`}
+                        passHref
+                        legacyBehavior
+                      >
+                        <Link className="text-text-default">
+                          {capitalize(pageType.type)}
+                        </Link>
+                      </NextLink>{" "}
+                      / {capitalize(pageProps.kategori)}
+                    </Detail>
                   )}
-                >
-                  <div className="z-[1]">
-                    {variant === "page" && pageProps?.kategori && (
-                      <Detail as="div" className="mb-2">
-                        <NextLink
-                          href={`/${pageType.type.toLowerCase()}`}
-                          passHref
-                          legacyBehavior
-                        >
-                          <Link className="text-text-default">
-                            {capitalize(pageType.type)}
-                          </Link>
-                        </NextLink>{" "}
-                        / {capitalize(pageProps.kategori)}
-                      </Detail>
-                    )}
 
-                    <Heading
-                      level="1"
-                      size="xlarge"
-                      className={cl({
-                        "text-deepblue-800": variant === "page",
-                        "text-text-on-action  w-fit": variant !== "page",
-                      })}
-                    >
-                      {pageType.title}
-                    </Heading>
-                    <div
-                      className={cl({
-                        "w-fit": variant !== "page",
-                      })}
-                    >
-                      {intro}
-                    </div>
+                  <Heading
+                    level="1"
+                    size="xlarge"
+                    className={cl({
+                      "text-deepblue-800": variant === "page",
+                      "text-text-on-action  w-fit": variant !== "page",
+                    })}
+                  >
+                    {pageType.title}
+                  </Heading>
+                  <div
+                    className={cl({
+                      "w-fit": variant !== "page",
+                    })}
+                  >
+                    {intro}
                   </div>
-                  {variant === "page" && pageProps.status?.bilde && (
-                    <div
-                      className={cl(
-                        "relative hidden aspect-square h-[12.5rem] lg:block xl:mr-40",
-                        {
-                          "hue-rotate-[65deg]":
-                            pageProps?.status?.tag === "beta",
-                        }
-                      )}
-                    >
-                      <Image
-                        src={urlFor(pageProps.status?.bilde)
-                          .auto("format")
-                          .url()}
-                        decoding="async"
-                        layout="fill"
-                        objectFit="contain"
-                        aria-hidden
-                        priority
-                      />
-                    </div>
-                  )}
-                  {variant === "landingPage" && (
-                    <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>
+                {variant === "page" && pageProps.status?.bilde && (
+                  <div
+                    className={cl(
+                      "relative hidden aspect-square h-[12.5rem] lg:block xl:mr-40",
+                      {
+                        "hue-rotate-[65deg]": pageProps?.status?.tag === "beta",
+                      }
+                    )}
+                  >
+                    <Image
+                      src={urlFor(pageProps.status?.bilde).auto("format").url()}
+                      decoding="async"
+                      layout="fill"
+                      objectFit="contain"
+                      aria-hidden
+                      priority
+                    />
+                  </div>
+                )}
+                {variant === "landingPage" && (
+                  <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"]} />

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

@@ -116,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/search/utils/fuse-search.ts

@@ -16,7 +16,7 @@ export function fuseSearch(results: any[], query: string) {
     ],
     includeScore: true,
     shouldSort: true,
-    minMatchCharLength: 3,
+    minMatchCharLength: 2,
     includeMatches: true,
     threshold: 0.3,
     location: 120,

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

@@ -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/cards/ArtikkelCard.tsx

@@ -31,7 +31,7 @@ const ArtikkelCard = ({
   );
 
   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}`,
@@ -52,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>

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

@@ -19,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",

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

@@ -51,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,
@@ -120,7 +119,11 @@ 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>

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

@@ -75,8 +75,9 @@ export const Highlight = ({
           text={article.tema ? article.tema[0] : undefined}
           beta={article?.status?.tag === "beta"}
         />
-        <NextLink href={`/${article.slug.current}`} passHref legacyBehavior>
+        <Heading size="large" level="3">
           <Link
+            as={NextLink}
             onClick={(e) =>
               logNav(
                 "artikkel-kort",
@@ -84,13 +85,12 @@ export const Highlight = ({
                 e.currentTarget.getAttribute("href")
               )
             }
-            className="text-text-default mb-5 mt-2 no-underline hover:underline"
+            href={`/${article.slug.current}`}
+            className="text-text-default mb-5 mt-2 underline hover:no-underline"
           >
-            <Heading size="large" level="3">
-              {article?.heading}
-            </Heading>
+            {article?.heading}
           </Link>
-        </NextLink>
+        </Heading>
         <BodyLong className="mb-4" size="small">
           {article?.ingress ?? article.seo?.meta}
         </BodyLong>

aksel.nav.no/website/components/website-modules/IntroCards.tsx

@@ -24,9 +24,9 @@ export const IntroCards = ({
             href={href}
             passHref
             className={cl(
-              "focus-visible:shadow-focus ring-border-subtle text-deepblue-700 bg-surface-default hover:shadow-small hover:ring-border-subtle group z-10 rounded-lg p-4 ring-1 hover:ring-1 focus:outline-none",
+              "focus-visible:shadow-focus text-deepblue-700 bg-surface-default shadow-xsmall hover:shadow-small group z-10 rounded-lg p-4 focus:outline-none",
               {
-                "shadow-small max-w-md": variant === "forside",
+                "max-w-md": variant === "forside",
               }
             )}
             prefetch={false}
@@ -44,7 +44,7 @@ export const IntroCards = ({
                 className="text-deepblue-500 shrink-0 text-2xl"
                 role="img"
               />
-              <span className="text-xl font-semibold group-hover:underline">
+              <span className="text-xl font-semibold underline group-hover:no-underline">
                 {title}
               </span>
             </span>

aksel.nav.no/website/components/website-modules/blogg-page/BloggList.tsx

@@ -40,7 +40,7 @@ export const BloggList = ({
 
         <div>
           <NextLink href={`/${blogg.slug}`} passHref legacyBehavior>
-            <Link className="text-deepblue-500 no-underline hover:underline">
+            <Link className="text-deepblue-500 underline hover:no-underline">
               <Heading size="small" level="2">
                 {blogg.heading}
               </Heading>
@@ -88,7 +88,7 @@ export const BloggList = ({
         </div>
         <div className="md:hidden">
           <NextLink href={`/${blogg.slug}`} passHref legacyBehavior>
-            <Link className="text-deepblue-500 no-underline hover:underline">
+            <Link className="text-deepblue-500 underline hover:no-underline">
               <Heading size="small" level="2">
                 {blogg.heading}
               </Heading>

aksel.nav.no/website/components/website-modules/blogg-page/HighlightedBlogg.tsx

@@ -41,7 +41,7 @@ export const HighlightedBlogg = ({
           )}
         </div>
         <NextLink href={`/${blogg.slug}`} passHref legacyBehavior>
-          <Link className="text-deepblue-500 no-underline hover:underline">
+          <Link className="text-deepblue-500 underline hover:no-underline">
             <Heading size="large" level="2">
               {blogg.heading}
             </Heading>
@@ -82,7 +82,7 @@ export const HighlightedBlogg = ({
           )}
         </div>
         <NextLink href={`/${blogg.slug}`} passHref legacyBehavior>
-          <Link className="text-deepblue-500 no-underline hover:underline">
+          <Link className="text-deepblue-500 underline hover:no-underline">
             <Heading size="large" level="2">
               {blogg.heading}
             </Heading>

aksel.nav.no/website/components/website-modules/examples/examples.module.css

@@ -1,3 +1,8 @@
+.examples a {
+  text-underline-offset: initial;
+  text-decoration-thickness: auto;
+}
+
 .container {
   display: flex;
   align-items: center;

aksel.nav.no/website/components/website-modules/examples/withDsExample.tsx

@@ -11,7 +11,7 @@ export const withDsExample = (
 ) => {
   const DsHOC = (props: any) => (
     <div
-      className={cl({
+      className={cl(styles.examples, {
         "bg-gray-900": variant === "inverted",
         "bg-bg-subtle": variant === "subtle",
         [styles.containerStatic]: variant === "static",

aksel.nav.no/website/components/website-modules/icon-page/Page.tsx

@@ -120,7 +120,7 @@ export const IconPage = ({ name }: { name: string }) => {
               <TitleLinks />
             </div>
 
-            <div className="bg-surface-default shadow-small ring-border-subtle z-10 mb-8 mt-16 h-full w-full rounded-2xl ring-1">
+            <div className="bg-surface-default shadow-large z-10 mb-8 mt-16 h-full w-full rounded-2xl">
               <div className="border-b-border-subtle bg-surface-default sticky top-0 z-20 grid items-center rounded-t-2xl border-b p-1">
                 <form
                   onSubmit={(e) => e.preventDefault()}

aksel.nav.no/website/components/website-modules/utils/date-string.ts

@@ -1,4 +1,7 @@
 export const dateStr = async (date: string) => {
+  if (!date) {
+    return "";
+  }
   const format = (await import("date-fns/format")).default;
   const locale = (await import("date-fns/locale/nb")).default;
   return format(new Date(date), "d. MMMM YYY", { locale: locale });

aksel.nav.no/website/package.json

@@ -18,7 +18,8 @@
     "update:props": "ts-node --project tsconfig.tsnode.json ./scripts/update-props",
     "update:tokens": "ts-node --project tsconfig.tsnode.json ./scripts/update-tokens",
     "update:eksempler": "ts-node --project tsconfig.tsnode.json ./scripts/examples/update-sanity",
-    "update:sanity": "yarn update:tokens && yarn update:props && yarn update:eksempler",
+    "update:changelog": "ts-node --project tsconfig.tsnode.json ./scripts/changelog",
+    "update:sanity": "yarn update:tokens && yarn update:props && yarn update:eksempler && yarn update:changelog",
     "analyze": "cross-env ANALYZE=true yarn build",
     "test": "jest",
     "playwright": "playwright test",
@@ -72,6 +73,8 @@
     "@next/bundle-analyzer": "^12.1.0",
     "@next/eslint-plugin-next": "^12.2.0",
     "@playwright/test": "1.35.1",
+    "@sanity/block-tools": "^3.12.2",
+    "@sanity/schema": "^3.12.2",
     "@testing-library/jest-dom": "^5.16.0",
     "@testing-library/react": "^13.3.0",
     "@types/jest": "^29.0.0",
@@ -83,11 +86,13 @@
     "dotenv": "^10.0.0",
     "jest": "^29.0.0",
     "jest-environment-jsdom": "^29.0.0",
+    "jsdom": "^22.1.0",
     "json5": "2.2.1",
     "pino-pretty": "^10.0.0",
     "postcss": "^8.4.0",
     "postcss-import": "^14.1.0",
     "postcss-loader": "7.0.0",
+    "showdown": "^2.1.0",
     "start-server-and-test": "^1.14.0",
     "ts-jest": "^29.0.0",
     "ts-node": "10.9.0",

aksel.nav.no/website/pages/_app.tsx

@@ -3,11 +3,11 @@ import {
   usePageView,
 } from "components/website-modules/utils/amplitude";
 import { useScrollToHashOnPageLoad } from "components/website-modules/utils/util";
+import dynamic from "next/dynamic";
 import Head from "next/head";
 import { Router } from "next/router";
 import { useEffect } from "react";
 import { IdContext } from "../components/website-modules/utils/contexts/id-context";
-import dynamic from "next/dynamic";
 import "../styles/index.css";
 
 initAmplitude();

aksel.nav.no/website/pages/eksempler/alert/med-lukkeknapp.tsx

@@ -0,0 +1,53 @@
+import { Alert, AlertProps } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+import React from "react";
+
+const AlertWithCloseButton = ({
+  children,
+  variant,
+}: {
+  children?: React.ReactNode;
+  variant: AlertProps["variant"];
+}) => {
+  const [show, setShow] = React.useState(true);
+
+  return (
+    show && (
+      <Alert variant={variant} closeButton onClose={() => setShow(false)}>
+        {children || "Content"}
+      </Alert>
+    )
+  );
+};
+
+const Example = () => {
+  return (
+    <div className="grid gap-4">
+      <AlertWithCloseButton variant="info">
+        Hvis du er mellom 62 og 67 år når du søker, må du som hovedregel ha hatt
+        en pensjonsgivende inntekt som tilsvarer x G, året før du fikk nedsatt
+        arbeidsevnen.
+      </AlertWithCloseButton>
+      <AlertWithCloseButton variant="success">
+        Søknad er sendt inn!
+      </AlertWithCloseButton>
+      <AlertWithCloseButton variant="warning">
+        Du må være registrert hos NAV for å bruke aktivitetsplanen.
+      </AlertWithCloseButton>
+      <AlertWithCloseButton variant="error">
+        Noe gikk galt! Prøv igjen om noen minutter.
+      </AlertWithCloseButton>
+    </div>
+  );
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 1,
+};

aksel.nav.no/website/pages/eksempler/chat/colors.tsx

@@ -12,7 +12,7 @@ const Example = () => {
         name="Ola Normann"
         timestamp="01.01.21 14:00"
         position="right"
-        variant="neutral"
+        variant="subtle"
       >
         <Chat.Bubble>Hei Eva.</Chat.Bubble>
         <Chat.Bubble>

aksel.nav.no/website/pages/eksempler/checkbox/disabled.tsx

@@ -25,5 +25,5 @@ export const Demo = {
 };
 
 export const args = {
-  index: 5,
+  index: 99,
 };

aksel.nav.no/website/pages/eksempler/checkbox/readonly.tsx

@@ -0,0 +1,30 @@
+import { Checkbox, CheckboxGroup } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  const handleChange = (val: any[]) => console.log(val);
+
+  return (
+    <CheckboxGroup
+      legend="Hvor vil du sitte?"
+      onChange={(val: any[]) => handleChange(val)}
+      value={["Midterst"]}
+      readOnly
+    >
+      <Checkbox value="Bakerst">Bakerst</Checkbox>
+      <Checkbox value="Midterst">Midterst</Checkbox>
+      <Checkbox value="Fremst">Fremst</Checkbox>
+    </CheckboxGroup>
+  );
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 98,
+};

aksel.nav.no/website/pages/eksempler/datepicker/readonly.tsx

@@ -0,0 +1,27 @@
+import { DatePicker, useDatepicker } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  const { datepickerProps, inputProps } = useDatepicker({
+    fromDate: new Date("Aug 23 2019"),
+    defaultSelected: new Date("Aug 28 2020"),
+    onDateChange: console.log,
+  });
+
+  return (
+    <DatePicker {...datepickerProps}>
+      <DatePicker.Input {...inputProps} label="Velg dato" readOnly />
+    </DatePicker>
+  );
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 99,
+};

aksel.nav.no/website/pages/eksempler/dropdown/default.tsx

@@ -1,6 +1,8 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
 import { Button } from "@navikt/ds-react";
 import { Dropdown } from "@navikt/ds-react";
 import { withDsExample } from "components/website-modules/examples/withDsExample";
+import Link from "next/link";
 
 const Example = () => {
   return (
@@ -12,17 +14,25 @@ const Example = () => {
             <Dropdown.Menu.GroupedList.Heading>
               Systemer og oppslagsverk
             </Dropdown.Menu.GroupedList.Heading>
-            <Dropdown.Menu.GroupedList.Item>
+            <Dropdown.Menu.GroupedList.Item onClick={() => {}}>
               Gosys
             </Dropdown.Menu.GroupedList.Item>
-            <Dropdown.Menu.GroupedList.Item>
+            <Dropdown.Menu.GroupedList.Item as="a" href="https://nav.no">
               Infotrygd
             </Dropdown.Menu.GroupedList.Item>
           </Dropdown.Menu.GroupedList>
           <Dropdown.Menu.Divider />
           <Dropdown.Menu.List>
-            <Dropdown.Menu.List.Item>Gosys</Dropdown.Menu.List.Item>
-            <Dropdown.Menu.List.Item>Infotrygd</Dropdown.Menu.List.Item>
+            <Dropdown.Menu.List.Item as={Link} href="https://nav.no">
+              Kontakt
+            </Dropdown.Menu.List.Item>
+            <Dropdown.Menu.List.Item
+              as={Link}
+              href="https://nav.no"
+              target="_blank"
+            >
+              Hjelp (åpner i en ny fane)
+            </Dropdown.Menu.List.Item>
           </Dropdown.Menu.List>
         </Dropdown.Menu>
       </Dropdown>

aksel.nav.no/website/pages/eksempler/monthpicker/input.tsx

@@ -11,9 +11,7 @@ const Example = () => {
   return (
     <div className="min-h-96">
       <MonthPicker {...monthpickerProps}>
-        <div className="grid gap-4">
-          <MonthPicker.Input {...inputProps} label="Velg månede" />
-        </div>
+        <MonthPicker.Input {...inputProps} label="Velg månede" />
       </MonthPicker>
       {selectedMonth && <div className="pt-4">{selectedMonth.getMonth()}</div>}
     </div>

aksel.nav.no/website/pages/eksempler/monthpicker/readonly.tsx

@@ -0,0 +1,28 @@
+import { MonthPicker, useMonthpicker } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  const { monthpickerProps, inputProps } = useMonthpicker({
+    fromDate: new Date("Aug 23 2019"),
+    toDate: new Date("Aug 23 2025"),
+    defaultSelected: new Date("Aug 28 2020"),
+    onMonthChange: console.log,
+  });
+
+  return (
+    <MonthPicker {...monthpickerProps}>
+      <MonthPicker.Input {...inputProps} label="Velg månede" readOnly />
+    </MonthPicker>
+  );
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 99,
+};

aksel.nav.no/website/pages/eksempler/monthpicker/validation.tsx

@@ -16,13 +16,11 @@ const Example = () => {
   return (
     <div className="min-h-96">
       <MonthPicker {...monthpickerProps}>
-        <div className="grid gap-4">
-          <MonthPicker.Input
-            {...inputProps}
-            label="Velg månede"
-            error={hasError && "Du må velge månede"}
-          />
-        </div>
+        <MonthPicker.Input
+          {...inputProps}
+          label="Velg månede"
+          error={hasError && "Du må velge månede"}
+        />
       </MonthPicker>
     </div>
   );