Version Packages (#2519 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
🐛 Fikset accumulator-bug i preview (#2520 )
2026-10-15 10:12:03 +00:00 · 2023-11-29 11:43:20 +01:00 · 2023-11-28 16:43:20 +01:00 · 2023-11-28 16:43:11 +01:00 · 2023-11-28 16:18:40 +01:00 · 2023-11-28 16:05:12 +01:00
467 changed files with 4569 additions and 3590 deletions
@@ -20,7 +20,11 @@
  "access": "public",
  "baseBranch": "main",
  "updateInternalDependencies": "patch",
-  "ignore": ["aksel.nav.no", "aksel-icons-figma-plugin"],
+  "ignore": [
+    "aksel.nav.no",
+    "aksel-icons-figma-plugin",
+    "eslint-plugin-aksel-local"
+  ],

  "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
    "updateInternalDependents": "always"
@@ -47,6 +47,7 @@ module.exports = {
      files: ["**/*.test.*", "**/__tests__/*"],
      extends: ["plugin:jest/recommended", "plugin:testing-library/react"],
    },
+
    {
      files: ["aksel.nav.no/website/**"],
      env: {
@@ -78,6 +79,16 @@ module.exports = {
        "jsx-a11y/anchor-is-valid": "off",
      },
    },
+    {
+      files: [
+        "aksel.nav.no/website/pages/eksempler/**/*.tsx",
+        "aksel.nav.no/website/pages/templates/**/*.tsx",
+      ],
+      plugins: ["aksel-local"],
+      rules: {
+        "aksel-local/comment-check": ["error"],
+      },
+    },
  ],
  globals: {
    Locale: "readonly",
@@ -1,5 +1,19 @@
 # @navikt/aksel-icons

+## 5.11.3
+
+## 5.11.2
+
+## 5.11.1
+
+## 5.11.0
+
+### Minor Changes
+
+- Ikoner: Nytt ikon `PushPin` ([#2503](https://github.com/navikt/aksel/pull/2503))
+
+## 5.10.4
+
 ## 5.10.3

 ## 5.10.2
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.3117 3.25101C15.5796 2.51892 14.3754 2.57898 13.7198 3.38029L10.1358 7.76072C10.1008 7.80356 10.0525 7.83356 9.99854 7.84601L5.5894 8.8635C4.25008 9.17258 3.77354 10.8342 4.74547 11.8061L7.93934 15L3.46967 19.4697C3.17678 19.7626 3.17678 20.2374 3.46967 20.5303C3.76256 20.8232 4.23744 20.8232 4.53033 20.5303L9 16.0607L12.1939 19.2545C13.1658 20.2265 14.8274 19.7499 15.1365 18.4106L16.154 14.0015C16.1664 13.9475 16.1964 13.8992 16.2393 13.8642L20.6197 10.2802C21.421 9.62457 21.4811 8.42042 20.749 7.68833L16.3117 3.25101ZM9.53033 14.4697L13.2545 18.1939C13.3934 18.3327 13.6308 18.2646 13.6749 18.0733L14.6924 13.6642C14.7795 13.2866 14.9895 12.9486 15.2894 12.7032L19.6699 9.11925C19.7843 9.02559 19.7929 8.85357 19.6883 8.74899L15.251 4.31167C15.1464 4.20709 14.9744 4.21567 14.8807 4.33014L11.2968 8.71058C11.0514 9.01048 10.7134 9.22046 10.3358 9.3076L5.92669 10.3251C5.73536 10.3692 5.66728 10.6066 5.80613 10.7455L9.53033 14.4697Z" fill="#23262A"/>
+</svg>
@@ -0,0 +1,9 @@
+name: PushPin
+category: Home
+sub_category: Hosehold items
+keywords:
+  - pinn
+  - tegnestift
+variant: Stroke
+updated_at: 23.11.2023
+created_at: 23.11.2023
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.3117 3.25101C15.5796 2.51892 14.3754 2.57898 13.7198 3.38029L10.1358 7.76072C10.1008 7.80356 10.0525 7.83356 9.99856 7.84601L5.58942 8.8635C4.2501 9.17258 3.77356 10.8342 4.74548 11.8061L12.1939 19.2545C13.1658 20.2265 14.8274 19.7499 15.1365 18.4106L16.154 14.0015C16.1665 13.9475 16.1965 13.8992 16.2393 13.8642L20.6197 10.2802C21.421 9.62457 21.4811 8.42042 20.749 7.68833L16.3117 3.25101ZM4.53033 20.5303L8.06066 17L7 15.9393L3.46967 19.4697C3.17678 19.7626 3.17678 20.2374 3.46967 20.5303C3.76256 20.8232 4.23744 20.8232 4.53033 20.5303Z" fill="#23262A"/>
+</svg>
@@ -0,0 +1,9 @@
+name: PushPinFill
+category: Home
+sub_category: Hosehold items
+keywords:
+  - pinn
+  - tegnestift
+variant: Fill
+updated_at: 23.11.2023
+created_at: 23.11.2023
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-icons",
-  "version": "5.10.3",
+  "version": "5.11.3",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -1,5 +1,15 @@
 # @navikt/aksel-stylelint

+## 5.11.3
+
+## 5.11.2
+
+## 5.11.1
+
+## 5.11.0
+
+## 5.10.4
+
 ## 5.10.3

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

+## 5.11.3
+
+### Patch Changes
+
+- Updated dependencies [[`8dda59082`](https://github.com/navikt/aksel/commit/8dda59082d9e64a81751805e6be5c30e3fb9cfaa), [`363d51e2c`](https://github.com/navikt/aksel/commit/363d51e2c414f619026084698911a99ac6b5e0bf)]:
+  - @navikt/ds-css@5.11.3
+
+## 5.11.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.11.2
+
+## 5.11.1
+
+### Patch Changes
+
+- Updated dependencies [[`10bbdb730`](https://github.com/navikt/aksel/commit/10bbdb730ba79544fa65e1aacebd865be8672a05)]:
+  - @navikt/ds-css@5.11.1
+
+## 5.11.0
+
+### Patch Changes
+
+- Updated dependencies [[`b7d03bfc8`](https://github.com/navikt/aksel/commit/b7d03bfc89dddb679c49a075bd45d675aacc7a71), [`9dafbeb4e`](https://github.com/navikt/aksel/commit/9dafbeb4eb802532cb9c6ad50ab5bf502e1bd5b4), [`16cad2637`](https://github.com/navikt/aksel/commit/16cad263787ad12978c191e2fb45816d2015ef0c)]:
+  - @navikt/ds-css@5.11.0
+
+## 5.10.4
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.10.4
+
 ## 5.10.3

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel",
-  "version": "5.10.3",
+  "version": "5.11.3",
  "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": "5.10.3",
+    "@navikt/ds-css": "5.11.3",
    "axios": "1.6.0",
    "chalk": "4.1.0",
    "clipboardy": "^2.3.0",
@@ -1,5 +1,35 @@
 # @navikt/ds-css

+## 5.11.3
+
+### Patch Changes
+
+- :bug: Textarea: Skru av autosize ved manuell resize ([#2518](https://github.com/navikt/aksel/pull/2518))
+
+- Page: La til `md`-bredde (768px) ([#2510](https://github.com/navikt/aksel/pull/2510))
+
+## 5.11.2
+
+## 5.11.1
+
+### Patch Changes
+
+- Switch: Byttet success-farger med action npr checked ([#2511](https://github.com/navikt/aksel/pull/2511))
+
+## 5.11.0
+
+### Minor Changes
+
+- :sparkles: Textarea: Mulighet for å sette resize-retning ([#2494](https://github.com/navikt/aksel/pull/2494))
+
+- :sparkles: Textarea: Eksperimentell støtte for automatisk scrollbar ([#2457](https://github.com/navikt/aksel/pull/2457))
+
+### Patch Changes
+
+- :wheelchair: Textarea: Forsinkelse ved live-opplesning av gjenstående tegn ([#2502](https://github.com/navikt/aksel/pull/2502))
+
+## 5.10.4
+
 ## 5.10.3

 ### Patch Changes
@@ -61,7 +61,7 @@

 .navds-switch__input:hover ~ .navds-switch__label-wrapper,
 .navds-switch__label-wrapper:hover {
-  color: var(--ac-switch-action, var(--a-surface-action));
+  color: var(--ac-switch-action, var(--a-surface-action-selected));
 }

 .navds-switch__input:disabled:hover ~ .navds-switch__label-wrapper {
@@ -91,7 +91,7 @@
 }

 .navds-switch__input:checked ~ .navds-switch__track {
-  background-color: var(--ac-switch-checked-bg, var(--a-surface-success));
+  background-color: var(--ac-switch-checked-bg, var(--a-surface-action-selected));
 }

 .navds-switch__input:hover ~ .navds-switch__track {
@@ -99,7 +99,7 @@
 }

 .navds-switch__input:hover:checked ~ .navds-switch__track {
-  background-color: var(--ac-switch-checked-hover-bg, var(--a-surface-success-hover));
+  background-color: var(--ac-switch-checked-hover-bg, var(--a-surface-action-selected-hover));
 }

 .navds-switch__input:disabled ~ .navds-switch__track {
@@ -107,7 +107,7 @@
 }

 .navds-switch__input:checked:disabled ~ .navds-switch__track {
-  background-color: var(--ac-switch-checked-bg, var(--a-border-success));
+  background-color: var(--ac-switch-checked-bg, var(--a-border-action-selected));
 }

 .navds-switch__input:focus-visible ~ .navds-switch__track {
@@ -139,7 +139,7 @@

 .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
  transform: translateX(1.25rem);
-  color: var(--ac-switch-thumb-icon-checked, var(--a-icon-success));
+  color: var(--ac-switch-thumb-icon-checked, var(--a-icon-action-selected));
 }

@media (hover: hover) and (pointer: fine) {
@@ -160,11 +160,6 @@
  transform: translateX(1.25rem);
 }

-/* Loader */
-.navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb .navds-loader__foreground {
-  stroke: var(--ac-switch-thumb-icon-checked, var(--a-icon-success));
-}
-
 /* Disabled */
 .navds-switch__input:disabled {
  appearance: none;
@@ -21,8 +21,14 @@
 }

 .navds-textarea__wrapper {
+  --__ac-textarea-height: initial;
+
  position: relative;
-  width: 100%;
+  min-width: 100%;
+}
+
+.navds-textarea__input:first-child {
+  height: var(--__ac-textarea-height);
 }

 .navds-textarea__input {
@@ -70,8 +76,42 @@
  color: var(--ac-textarea-counter-error-text, var(--__ac-textarea-counter-error-text, var(--a-text-danger)));
 }

-.navds-textarea--resize .navds-textarea__input {
+.navds-textarea__sr-counter {
+  display: none;
+}
+
+.navds-textarea__wrapper:focus-within .navds-textarea__sr-counter {
+  display: initial;
+}
+
+.navds-textarea--resize-both .navds-textarea__input {
  resize: both;
+  border-end-end-radius: 0;
+}
+
+.navds-textarea--resize-horizontal .navds-textarea__input {
+  resize: horizontal;
+  border-end-end-radius: 0;
+}
+
+.navds-textarea--resize-vertical .navds-textarea__input {
+  resize: vertical;
+  border-end-end-radius: 0;
+}
+
+.navds-textarea--autoscrollbar,
+.navds-textarea--autoscrollbar .navds-textarea__wrapper {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  /* Makes the box-shadow visible even though overflow is hidden: */
+  padding: 3px;
+  margin: -3px;
+}
+
+.navds-textarea--autoscrollbar .navds-textarea__input {
+  scrollbar-gutter: stable; /* Needed to prevent scrollbar from appearing too early */
 }

 /**
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "5.10.3",
+  "version": "5.11.3",
  "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": "^5.10.3",
+    "@navikt/ds-tokens": "^5.11.3",
    "cssnano": "6.0.0",
    "fast-glob": "3.2.11",
    "lodash": "4.17.21",
@@ -27,6 +27,10 @@
  padding-block-end: var(--a-spacing-8);
 }

+.navds-pageblock--md {
+  max-width: 768px;
+}
+
 .navds-pageblock--lg {
  max-width: 1024px;
 }
@@ -401,14 +401,14 @@
    "--ac-select-error-border": "--a-surface-danger"
  },
  "switch": {
-    "--ac-switch-action": "--a-surface-action",
+    "--ac-switch-action": "--a-surface-action-selected",
    "--ac-switch-bg": "--a-surface-neutral",
-    "--ac-switch-checked-bg": "--a-surface-success",
+    "--ac-switch-checked-bg": "--a-surface-action-selected",
    "--ac-switch-hover-bg": "--a-surface-neutral-hover",
-    "--ac-switch-checked-hover-bg": "--a-surface-success-hover",
+    "--ac-switch-checked-hover-bg": "--a-surface-action-selected-hover",
    "--ac-switch-thumb-bg": "--a-surface-default",
    "--ac-switch-thumb-icon": "--a-icon-subtle",
-    "--ac-switch-thumb-icon-checked": "--a-icon-success"
+    "--ac-switch-thumb-icon-checked": "--a-icon-action-selected"
  },
  "textfield": {
    "--ac-textfield-bg": "--a-surface-default",
@@ -1,5 +1,65 @@
 # @navikt/ds-react

+## 5.11.3
+
+### Patch Changes
+
+- :bug: Textarea: Skru av autosize ved manuell resize ([#2518](https://github.com/navikt/aksel/pull/2518))
+
+- :bug: Popover: Ikke lukk ved klikk inni når parent er fokuserbar ([#2521](https://github.com/navikt/aksel/pull/2521))
+
+- Page: La til `md`-bredde (768px) ([#2510](https://github.com/navikt/aksel/pull/2510))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.11.3
+  - @navikt/aksel-icons@5.11.3
+
+## 5.11.2
+
+### Patch Changes
+
+- ⬆️ upgrade date-fns version & make it minor-version agnostic ([#2514](https://github.com/navikt/aksel/pull/2514))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.11.2
+  - @navikt/aksel-icons@5.11.2
+
+## 5.11.1
+
+### Patch Changes
+
+- Switch: Byttet success-farger med action npr checked ([#2511](https://github.com/navikt/aksel/pull/2511))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.11.1
+  - @navikt/aksel-icons@5.11.1
+
+## 5.11.0
+
+### Minor Changes
+
+- :sparkles: Textarea: Mulighet for å sette resize-retning ([#2494](https://github.com/navikt/aksel/pull/2494))
+
+- :sparkles: Textarea: Eksperimentell støtte for automatisk scrollbar ([#2457](https://github.com/navikt/aksel/pull/2457))
+
+### Patch Changes
+
+- :wheelchair: Textarea: Forsinkelse ved live-opplesning av gjenstående tegn ([#2502](https://github.com/navikt/aksel/pull/2502))
+
+- Updated dependencies [[`bc259f5b3`](https://github.com/navikt/aksel/commit/bc259f5b306319c0e08397d5300596fc1d43353e)]:
+  - @navikt/aksel-icons@5.11.0
+  - @navikt/ds-tokens@5.11.0
+
+## 5.10.4
+
+### Patch Changes
+
+- Gjør lukknapp i Alert til type button ([#2497](https://github.com/navikt/aksel/pull/2497))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.10.4
+  - @navikt/aksel-icons@5.10.4
+
 ## 5.10.3

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "5.10.3",
+  "version": "5.11.3",
  "description": "Aksel react-components for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -38,12 +38,12 @@
  },
  "dependencies": {
    "@floating-ui/react": "0.25.4",
-    "@navikt/aksel-icons": "^5.10.3",
-    "@navikt/ds-tokens": "^5.10.3",
+    "@navikt/aksel-icons": "^5.11.3",
+    "@navikt/ds-tokens": "^5.11.3",
    "@radix-ui/react-tabs": "1.0.0",
    "@radix-ui/react-toggle-group": "1.0.0",
    "clsx": "^1.2.1",
-    "date-fns": "2.29.3",
+    "date-fns": "^2.30.0",
    "react-day-picker": "8.3.4"
  },
  "devDependencies": {
@@ -117,6 +117,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
              size="small"
              variant="tertiary-neutral"
              onClick={onClose}
+              type="button"
              icon={<XMarkIcon title="Lukk Alert" />}
            />
          </div>
@@ -5,11 +5,11 @@ import React, {
  useEffect,
  useState,
 } from "react";
-import { FormFieldProps, useFormField } from "./useFormField";
-import { ReadOnlyIcon } from "./ReadOnlyIcon";
 import { Loader } from "../loader";
 import { BodyShort } from "../typography";
 import { omit } from "../util";
+import { ReadOnlyIcon } from "./ReadOnlyIcon";
+import { FormFieldProps, useFormField } from "./useFormField";

 const SelectedIcon = () => (
  <svg
@@ -134,7 +134,11 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
        <span className="navds-switch__track">
          <span className="navds-switch__thumb">
            {loading ? (
-              <Loader size="xsmall" aria-live="polite" />
+              <Loader
+                size="xsmall"
+                aria-live="polite"
+                variant={checked ? "interaction" : "neutral"}
+              />
            ) : checked ? (
              <SelectedIcon />
            ) : null}
@@ -45,7 +45,13 @@ export interface TextareaProps
  /**
   * Enables resizing of field
   */
-  resize?: boolean;
+  resize?: boolean | "vertical" | "horizontal";
+  /**
+   * Textarea will stop growing and get a scrollbar when there's no more room to grow.
+   * Requires `display:flex` on the parent.
+   * Experimental feature that may be removed or get breaking changes in a minor version.
+   */
+  UNSAFE_autoScrollbar?: boolean;
  /**
   * i18n-translations for counter-text
   */
@@ -86,6 +92,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
      maxLength,
      hideLabel = false,
      resize,
+      UNSAFE_autoScrollbar,
      i18n,
      readOnly,
      ...rest
@@ -121,7 +128,9 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
            "navds-form-field--readonly": readOnly,
            "navds-textarea--readonly": readOnly,
            "navds-textarea--error": hasError,
-            "navds-textarea--resize": resize,
+            "navds-textarea--autoscrollbar": UNSAFE_autoScrollbar,
+            [`navds-textarea--resize-${resize === true ? "both" : resize}`]:
+              resize,
          }
        )}
      >
@@ -157,6 +166,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
                : setControlledValue(e.target.value)
            }
            minRows={getMinRows()}
+            autoScrollbar={UNSAFE_autoScrollbar}
            ref={ref}
            readOnly={readOnly}
            className={cl(
@@ -1,6 +1,7 @@
 import cl from "clsx";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { BodyShort } from "../typography";
+import debounce from "../util/debounce";
 import type { TextareaProps } from "./Textarea";

 interface Props {
@@ -13,19 +14,45 @@ interface Props {
 const TextareaCounter = ({ maxLength, currentLength, size, i18n }: Props) => {
  const difference = maxLength - currentLength;

+  const [debouncedDiff, setDebouncedDiff] = useState(difference);
+
+  useEffect(() => {
+    const debounceFunc = debounce(() => {
+      setDebouncedDiff(difference);
+    }, 2000);
+    debounceFunc();
+
+    return () => {
+      debounceFunc.clear();
+    };
+  }, [difference]);
+
  return (
-    <BodyShort
-      className={cl("navds-textarea__counter", {
-        "navds-textarea__counter--error": difference < 0,
-      })}
-      role={difference < 20 ? "status" : undefined}
-      size={size}
-    >
-      {difference < 0
-        ? `${Math.abs(difference)} ${i18n?.counterTooMuch ?? "tegn for mye"}`
-        : `${difference} ${i18n?.counterLeft ?? "tegn igjen"}`}
-    </BodyShort>
+    <>
+      {difference < 20 && (
+        <span
+          role="status"
+          className="navds-textarea__sr-counter navds-sr-only"
+        >
+          {getCounterText(debouncedDiff, i18n)}
+        </span>
+      )}
+
+      <BodyShort
+        className={cl("navds-textarea__counter", {
+          "navds-textarea__counter--error": difference < 0,
+        })}
+        size={size}
+      >
+        {getCounterText(difference, i18n)}
+      </BodyShort>
+    </>
  );
 };

+const getCounterText = (difference: number, i18n: TextareaProps["i18n"]) =>
+  difference < 0
+    ? `${Math.abs(difference)} ${i18n?.counterTooMuch ?? "tegn for mye"}`
+    : `${difference} ${i18n?.counterLeft ?? "tegn igjen"}`;
+
 export default TextareaCounter;
@@ -1,5 +1,6 @@
-import { Meta, StoryObj } from "@storybook/react";
-import React from "react";
+import { Meta, StoryFn, StoryObj } from "@storybook/react";
+import React, { useState } from "react";
+import { Button } from "../../button";
 import { Textarea } from "../index";

 const meta: Meta<typeof Textarea> = {
@@ -16,10 +17,13 @@ export const Default: StoryObj<typeof Textarea> = {
  args: {
    maxLength: 0,
    label: "Ipsum enim quis culpa",
-    resize: false,
  },

  argTypes: {
+    resize: {
+      control: { type: "radio" },
+      options: [true, "vertical", "horizontal"],
+    },
    size: {
      control: { type: "radio" },
      options: ["medium", "small"],
@@ -34,11 +38,11 @@ export const Default: StoryObj<typeof Textarea> = {
  },
 };

-export const Small = () => {
+export const Small: StoryFn = () => {
  return <Textarea size="small" label="Ipsum enim quis culpa" />;
 };

-export const Description = () => {
+export const Description: StoryFn = () => {
  return (
    <div className="colgap">
      <Textarea
@@ -54,7 +58,7 @@ export const Description = () => {
  );
 };

-export const Error = () => {
+export const Error: StoryFn = () => {
  return (
    <div className="colgap">
      <Textarea
@@ -85,7 +89,7 @@ export const Error = () => {
  );
 };

-export const Disabled = () => {
+export const Disabled: StoryFn = () => {
  return (
    <div className="colgap">
      <Textarea label="Ipsum enim quis culpa" disabled />
@@ -94,19 +98,19 @@ export const Disabled = () => {
  );
 };

-export const HideLabel = () => {
+export const HideLabel: StoryFn = () => {
  return <Textarea label="Ipsum enim quis culpa" hideLabel />;
 };

-export const MaxLength = () => {
-  return <Textarea maxLength={200} label="Ipsum enim quis culpa" />;
+export const MaxLength: StoryFn = () => {
+  return <Textarea maxLength={50} label="Ipsum enim quis culpa" />;
 };

-export const MinRows = () => {
+export const MinRows: StoryFn = () => {
  return <Textarea minRows={5} label="Ipsum enim quis culpa" />;
 };

-export const MaxRows = () => {
+export const MaxRows: StoryFn = () => {
  return (
    <Textarea
      maxRows={3}
@@ -116,11 +120,23 @@ export const MaxRows = () => {
  );
 };

-export const Resize = () => {
+export const Resize: StoryFn = () => {
  return <Textarea resize label="Ipsum enim quis culpa" />;
 };

-export const Readonly = () => {
+export const Controlled: StoryFn = () => {
+  const [value, setValue] = useState("");
+  return (
+    <Textarea
+      resize
+      label="Ipsum enim quis culpa"
+      value={value}
+      onChange={(event) => setValue(event.currentTarget.value)}
+    />
+  );
+};
+
+export const Readonly: StoryFn = () => {
  return (
    <div className="colgap">
      <Textarea
@@ -138,3 +154,35 @@ export const Readonly = () => {
    </div>
  );
 };
+
+export const AutoScrollbar: StoryFn<typeof Textarea> = (props) => (
+  <div
+    style={{
+      border: "1px solid lightGreen",
+      height: "90vh",
+      display: "flex",
+      flexDirection: "column",
+    }}
+  >
+    <div style={{ border: "1px dashed gray" }}>
+      <h1>Header</h1>
+    </div>
+    <Textarea
+      {...props}
+      resize
+      label="Textarea with autoScrollbar"
+      description="Description"
+      maxLength={30}
+      UNSAFE_autoScrollbar
+    />
+    <div style={{ border: "1px dashed gray" }}>
+      <Button>Send</Button>
+    </div>
+  </div>
+);
+AutoScrollbar.argTypes = {
+  error: { type: "string" },
+  hideLabel: { type: "boolean" },
+  maxRows: { type: "number" },
+  minRows: { type: "number" },
+};
@@ -2,12 +2,13 @@ import cl from "clsx";
 import React, { forwardRef } from "react";
 import { OverridableComponent } from "../../../util/OverridableComponent";

-export const widths = ["lg", "xl", "2xl"] as const;
+export const widths = ["md", "lg", "xl", "2xl"] as const;

 export interface PageBlockProps extends React.HTMLAttributes<HTMLDivElement> {
  /**
   * Predefined max-width
   * @example
+   * md:  768px
   * lg:  1024px
   * xl:  1280px
   * 2xl: 1440px
@@ -1,13 +1,14 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
+import React, { forwardRef } from "react";
 import { OverridableComponent } from "../util/OverridableComponent";

 export interface LinkProps
  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
  /**
   * Inverts when the underline appears. If this is false,
-   * the underline does not appear by default, but does appear when the link is hovered.
-   * This makes it more suitable for use when inlined in text.
+   * the underline only appears on hover.
+   *
+   * **NB: Underline can only be removed in menus etc. where it's obvious that it's a link.**
   * @default true
   */
  underline?: boolean;
@@ -184,9 +184,10 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
        (e: FocusEvent) => {
          if (
            e.target instanceof HTMLElement &&
-            ![anchorEl, refs?.floating?.current].some((element) =>
+            ![anchorEl, refs.floating.current].some((element) =>
              element?.contains(e.target as Node)
-            )
+            ) &&
+            !e.target.contains(refs.floating.current)
          ) {
            open && onClose();
          }
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
-import { Popover } from "../index";
 import { Button } from "../button";
+import { Popover } from "../index";

 const placements = [
  "top",
@@ -47,9 +47,9 @@ export default {

 export const Default = (props: any) => {
  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>();
-  const [open, setOpen] = useState<boolean>(false);
+  const [open, setOpen] = useState(false);
  return (
-    <div>
+    <div tabIndex={-1}>
      <Button ref={(el) => setAnchorEl(el)} onClick={() => setOpen((x) => !x)}>
        Open
      </Button>
@@ -57,10 +57,12 @@ export const Default = (props: any) => {
        {...props}
        open={props.open ?? open}
        anchorEl={anchorEl}
-        onClose={(e) => setOpen(e)}
+        onClose={() => setOpen(false)}
      >
        <Popover.Content>Velit in consequat</Popover.Content>
      </Popover>
+      &nbsp;
+      <Button variant="secondary">Another button</Button>
    </div>
  );
 };
@@ -2,7 +2,7 @@ import "react";

 declare module "react" {
  interface CSSProperties {
-    [key: `--ac-${string}`]: string | undefined;
-    [key: `--__ac-${string}`]: string | undefined;
+    [key: `--ac-${string}`]: string | number | undefined;
+    [key: `--__ac-${string}`]: string | number | undefined;
  }
 }
@@ -57,7 +57,7 @@ export interface TableType
 *   <Table.Header>
 *     <Table.Row>
 *       <Table.HeaderCell scope="col">Navn</Table.HeaderCell>
- *       <Table.HeaderCell scope="col">Fødseslnr.</Table.HeaderCell>
+ *       <Table.HeaderCell scope="col">Fødselsnr.</Table.HeaderCell>
 *       <Table.HeaderCell scope="col">Start</Table.HeaderCell>
 *     </Table.Row>
 *   </Table.Header>
@@ -1,19 +1,57 @@
-/* https://github.com/mui/material-ui/blob/master/packages/mui-base/src/TextareaAutosize/TextareaAutosize.js */
+/* https://github.com/mui/material-ui/blob/master/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx */
 import React, { forwardRef, useEffect, useMemo, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 import { debounce, mergeRefs, useClientLayoutEffect } from "../util";

+type State = {
+  outerHeightStyle: number;
+  overflow?: boolean | undefined;
+};
+
+const updateState = (
+  prevState: State,
+  newState: State,
+  renders: React.MutableRefObject<number>
+) => {
+  const { outerHeightStyle, overflow } = newState;
+  // Need a large enough difference to update the height.
+  // This prevents infinite rendering loop.
+  if (
+    renders.current < 20 &&
+    ((outerHeightStyle > 0 &&
+      Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1) ||
+      prevState.overflow !== overflow)
+  ) {
+    renders.current += 1;
+    return {
+      overflow,
+      outerHeightStyle,
+    };
+  }
+  if (process.env.NODE_ENV !== "production") {
+    if (renders.current === 20) {
+      console.error(
+        [
+          "Textarea: Too many re-renders. The layout is unstable.",
+          "TextareaAutosize limits the number of renders to prevent an infinite loop.",
+        ].join("\n")
+      );
+    }
+  }
+  return prevState;
+};
+
 /**
- * https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/ownerDocument.ts
- * https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/ownerWindow.ts
+ * https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/ownerDocument/ownerDocument.ts
+ * https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/ownerWindow/ownerWindow.ts
 */
-const ownerWindow = (node: Node | null): Window => {
+const ownerWindow = (node: Node | undefined): Window => {
  const doc = (node && node.ownerDocument) || document;
  return doc.defaultView || window;
 };

-function getStyleValue(computedStyle, property) {
-  return parseInt(computedStyle[property], 10) || 0;
+function getStyleValue(value: string) {
+  return parseInt(value, 10) || 0;
 }

 interface TextareaAutosizeProps
@@ -30,34 +68,46 @@ interface TextareaAutosizeProps
   * @default 1
   */
  minRows?: number;
+  /**
+   * If true, textarea will never get `overflow:hidden`
+   */
+  autoScrollbar?: boolean;
 }

 const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
  (
-    { className, onChange, maxRows, minRows = 1, style, value, ...other },
+    {
+      className,
+      onChange,
+      maxRows,
+      minRows = 1,
+      autoScrollbar,
+      style,
+      value,
+      ...other
+    }: TextareaAutosizeProps,
    ref
  ) => {
    const { current: isControlled } = useRef(value != null);
-    const inputRef = useRef<HTMLTextAreaElement | null>(null);
+    const inputRef = useRef<HTMLTextAreaElement>(null);
    const handleRef = useMemo(() => mergeRefs([inputRef, ref]), [ref]);
-    const shadowRef = useRef<HTMLTextAreaElement | null>(null);
+    const shadowRef = useRef<HTMLTextAreaElement>(null);
    const renders = useRef(0);
-    const [state, setState] = useState<any>({});
+    const [state, setState] = useState<State>({ outerHeightStyle: 0 });

    const getUpdatedState = React.useCallback(() => {
-      if (!inputRef.current || !shadowRef.current) return;
-      const input = inputRef.current;
+      const input = inputRef.current!;
      const containerWindow = ownerWindow(input);
      const computedStyle = containerWindow.getComputedStyle(input);

      // If input's width is shrunk and it's not visible, don't sync height.
      if (computedStyle.width === "0px") {
-        return;
+        return { outerHeightStyle: 0 };
      }

-      const inputShallow = shadowRef.current;
+      const inputShallow = shadowRef.current!;
      inputShallow.style.width = computedStyle.width;
-      inputShallow.value = input.value || other?.placeholder || "x";
+      inputShallow.value = input.value || other.placeholder || "x";
      if (inputShallow.value.slice(-1) === "\n") {
        // Certain fonts which overflow the line height will cause the textarea
        // to report a different scrollHeight depending on whether the last line
@@ -65,13 +115,13 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
        inputShallow.value += " ";
      }

-      const boxSizing = computedStyle["box-sizing"];
+      const boxSizing = computedStyle.boxSizing;
      const padding =
-        getStyleValue(computedStyle, "padding-bottom") +
-        getStyleValue(computedStyle, "padding-top");
+        getStyleValue(computedStyle.paddingBottom) +
+        getStyleValue(computedStyle.paddingTop);
      const border =
-        getStyleValue(computedStyle, "border-bottom-width") +
-        getStyleValue(computedStyle, "border-top-width");
+        getStyleValue(computedStyle.borderBottomWidth) +
+        getStyleValue(computedStyle.borderTopWidth);

      // The height of the inner content
      const innerHeight = inputShallow.scrollHeight - padding;
@@ -97,7 +147,7 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
      const overflow = Math.abs(outerHeight - innerHeight) <= 1;

      return { outerHeightStyle, overflow };
-    }, [maxRows, minRows, other?.placeholder]);
+    }, [maxRows, minRows, other.placeholder]);

    const syncHeight = React.useCallback(() => {
      const newState = getUpdatedState();
@@ -106,85 +156,61 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
        return;
      }

-      setState((prevState) => {
-        return updateState(prevState, newState);
-      });
+      setState((prevState) => updateState(prevState, newState, renders));
    }, [getUpdatedState]);

-    const updateState = (prevState, newState) => {
-      const { outerHeightStyle, overflow } = newState;
-      // Need a large enough difference to update the height.
-      // This prevents infinite rendering loop.
-      if (
-        renders.current < 20 &&
-        ((outerHeightStyle > 0 &&
-          Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1) ||
-          prevState.overflow !== overflow)
-      ) {
-        renders.current += 1;
-        return {
-          overflow,
-          outerHeightStyle,
-        };
-      }
-      if (process.env.NODE_ENV !== "production") {
-        if (renders.current === 20) {
-          console.error(
-            [
-              "Textarea: Too many re-renders. The layout is unstable.",
-              "TextareaAutosize limits the number of renders to prevent an infinite loop.",
-            ].join("\n")
-          );
+    useClientLayoutEffect(() => {
+      const syncHeightWithFlushSync = () => {
+        const newState = getUpdatedState();
+
+        if (isEmpty(newState)) {
+          return;
        }
-      }
-      return prevState;
-    };

-    const withFlushSync = () => {
-      const newState = getUpdatedState();
-
-      if (isEmpty(newState)) {
-        return;
-      }
-
-      // In React 18, state updates in a ResizeObserver's callback are happening after the paint which causes flickering
-      // when doing some visual updates in it. Using flushSync ensures that the dom will be painted after the states updates happen
-      // Related issue - https://github.com/facebook/react/issues/24331
-      ReactDOM.flushSync(() => {
-        setState((prevState) => {
-          return updateState(prevState, newState);
+        // In React 18, state updates in a ResizeObserver's callback are happening after
+        // the paint, this leads to an infinite rendering.
+        //
+        // Using flushSync ensures that the states is updated before the next pain.
+        // Related issue - https://github.com/facebook/react/issues/24331
+        ReactDOM.flushSync(() => {
+          setState((prevState) => updateState(prevState, newState, renders));
        });
-      });
-    };
+      };

-    React.useEffect(() => {
-      const handleResize = debounce(() => {
+      const handleResize = () => {
        renders.current = 0;

-        if (inputRef.current) {
-          withFlushSync();
+        if (inputRef.current?.style.height || inputRef.current?.style.width) {
+          // User has resized manually
+          if (inputRef.current?.style.overflow === "hidden") {
+            setState((oldState) => ({ ...oldState, overflow: false })); // The state update isn't important, we just need to trigger a rerender
+          }
+          return;
        }
-      });
-      let resizeObserver: ResizeObserver;

+        syncHeightWithFlushSync();
+      };
+
+      const debounceHandleResize = debounce(handleResize);
      const input = inputRef.current!;
      const containerWindow = ownerWindow(input);

-      containerWindow.addEventListener("resize", handleResize);
+      containerWindow.addEventListener("resize", debounceHandleResize);

+      let resizeObserver: ResizeObserver;
      if (typeof ResizeObserver !== "undefined") {
        resizeObserver = new ResizeObserver(handleResize);
        resizeObserver.observe(input);
      }

      return () => {
-        handleResize.clear();
-        containerWindow.removeEventListener("resize", handleResize);
+        debounceHandleResize.clear();
+        containerWindow.removeEventListener("resize", debounceHandleResize);
        if (resizeObserver) {
          resizeObserver.disconnect();
        }
      };
-    });
+    }, [getUpdatedState]);

    useClientLayoutEffect(() => {
      syncHeight();
@@ -194,7 +220,7 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
      renders.current = 0;
    }, [value]);

-    const handleChange = (event) => {
+    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
      renders.current = 0;

      if (!isControlled) {
@@ -206,6 +232,20 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
      }
    };

+    const mainStyle: React.CSSProperties = {
+      ["--__ac-textarea-height"]: state.outerHeightStyle + "px",
+      // Need a large enough difference to allow scrolling.
+      // This prevents infinite rendering loop.
+      overflow:
+        state.overflow &&
+        !autoScrollbar &&
+        !inputRef.current?.style.height &&
+        !inputRef.current?.style.width
+          ? "hidden"
+          : undefined,
+      ...style,
+    };
+
    return (
      <>
        <textarea
@@ -214,13 +254,7 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
          ref={handleRef}
          // Apply the rows prop to get a "correct" first SSR paint
          rows={minRows}
-          style={{
-            height: state.outerHeightStyle,
-            // Need a large enough difference to allow scrolling.
-            // This prevents infinite rendering loop.
-            ...(state.overflow ? { overflow: "hidden" } : {}),
-            ...style,
-          }}
+          style={mainStyle}
          {...other}
          className={className}
        />
@@ -250,12 +284,12 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
  }
 );

-function isEmpty(obj: any) {
+function isEmpty(obj: State) {
  return (
    obj === undefined ||
    obj === null ||
    Object.keys(obj).length === 0 ||
-    (obj?.outerHeightStyle === 0 && !obj?.overflow)
+    (obj.outerHeightStyle === 0 && !obj.overflow)
  );
 }

@@ -1,5 +1,15 @@
 # @navikt/ds-tailwind

+## 5.11.3
+
+## 5.11.2
+
+## 5.11.1
+
+## 5.11.0
+
+## 5.10.4
+
 ## 5.10.3

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tailwind",
-  "version": "5.10.3",
+  "version": "5.11.3",
  "description": "Tailwind config based on @navikt/ds-tokens",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -24,7 +24,7 @@
    "directory": "@navikt/core/tailwind"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^5.10.3",
+    "@navikt/ds-tokens": "^5.11.3",
    "@types/jest": "^29.0.0",
    "color": "4.2.3",
    "jest": "^29.0.0",
@@ -1,5 +1,15 @@
 # @navikt/ds-tokens

+## 5.11.3
+
+## 5.11.2
+
+## 5.11.1
+
+## 5.11.0
+
+## 5.10.4
+
 ## 5.10.3

 ## 5.10.2
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "5.10.3",
+  "version": "5.11.3",
  "description": "Design-tokens for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -1,24 +1,60 @@
 # Changelog

+## 5.11
+
+### @navikt/ds-react
+
+- :bug: Textarea: Skru av autosize ved manuell resize ([#2518](https://github.com/navikt/aksel/pull/2518))
+
+- :bug: Popover: Ikke lukk ved klikk inni når parent er fokuserbar ([#2521](https://github.com/navikt/aksel/pull/2521))
+
+- Page: La til `md`-bredde (768px) ([#2510](https://github.com/navikt/aksel/pull/2510))
+
+* ⬆️ upgrade date-fns version & make it minor-version agnostic ([#2514](https://github.com/navikt/aksel/pull/2514))
+
+- Switch: Byttet success-farger med action npr checked ([#2511](https://github.com/navikt/aksel/pull/2511))
+
+* :sparkles: Textarea: Mulighet for å sette resize-retning ([#2494](https://github.com/navikt/aksel/pull/2494))
+
+* :sparkles: Textarea: Eksperimentell støtte for automatisk scrollbar ([#2457](https://github.com/navikt/aksel/pull/2457))
+
+- :wheelchair: Textarea: Forsinkelse ved live-opplesning av gjenstående tegn ([#2502](https://github.com/navikt/aksel/pull/2502))
+
+### @navikt/ds-css
+
+- :bug: Textarea: Skru av autosize ved manuell resize ([#2518](https://github.com/navikt/aksel/pull/2518))
+
+- Page: La til `md`-bredde (768px) ([#2510](https://github.com/navikt/aksel/pull/2510))
+
+* Switch: Byttet success-farger med action npr checked ([#2511](https://github.com/navikt/aksel/pull/2511))
+
+- :sparkles: Textarea: Mulighet for å sette resize-retning ([#2494](https://github.com/navikt/aksel/pull/2494))
+
+- :sparkles: Textarea: Eksperimentell støtte for automatisk scrollbar ([#2457](https://github.com/navikt/aksel/pull/2457))
+
+* :wheelchair: Textarea: Forsinkelse ved live-opplesning av gjenstående tegn ([#2502](https://github.com/navikt/aksel/pull/2502))
+
+### @navikt/aksel-icons
+
+- Ikoner: Nytt ikon `PushPin` ([#2503](https://github.com/navikt/aksel/pull/2503))
+
 ## 5.10

 ### @navikt/ds-react

- :wheelchair: Textarea: Byttet fra `aria-live` til `role=status` på telleren for bedre semantikk ([#2483](https://github.com/navikt/aksel/pull/2483))
+- Gjør lukknapp i Alert til type button ([#2497](https://github.com/navikt/aksel/pull/2497))

- :bug: Textarea: Teller flyttet ut av tekstfeltet for å unngå overlapp og misforståelser ([#2483](https://github.com/navikt/aksel/pull/2483))
+* :wheelchair: Textarea: Byttet fra `aria-live` til `role=status` på telleren for bedre semantikk ([#2483](https://github.com/navikt/aksel/pull/2483))

- ErrorSummary: Gjør det mulig å rendre ErrorSummary.Item conditionally ([#2484](https://github.com/navikt/aksel/pull/2484))
+* :bug: Textarea: Teller flyttet ut av tekstfeltet for å unngå overlapp og misforståelser ([#2483](https://github.com/navikt/aksel/pull/2483))

-* OverridableComponent: Fungerer nå bedre ved bruk av typeof <komponent> ([#2474](https://github.com/navikt/aksel/pull/2474))
+* ErrorSummary: Gjør det mulig å rendre ErrorSummary.Item conditionally ([#2484](https://github.com/navikt/aksel/pull/2484))

- Table: Håndterer nå sjekk for interaktive elementer i ExpandableRow bedre ([#2461](https://github.com/navikt/aksel/pull/2461))
+- OverridableComponent: Fungerer nå bedre ved bruk av typeof <komponent> ([#2474](https://github.com/navikt/aksel/pull/2474))

-* Primitives: Ny komponent `Page` og `Page.Block` ([#2456](https://github.com/navikt/aksel/pull/2456))
+* Table: Håndterer nå sjekk for interaktive elementer i ExpandableRow bedre ([#2461](https://github.com/navikt/aksel/pull/2461))

-### @navikt/ds-tailwind
-
- typescript types for tailwind preset ([#2486](https://github.com/navikt/aksel/pull/2486))
+- Primitives: Ny komponent `Page` og `Page.Block` ([#2456](https://github.com/navikt/aksel/pull/2456))

 ### @navikt/ds-css

@@ -28,6 +64,10 @@

 - Primitives: Ny komponent `Page` og `Page.Block` ([#2456](https://github.com/navikt/aksel/pull/2456))

+### @navikt/ds-tailwind
+
+- typescript types for tailwind preset ([#2486](https://github.com/navikt/aksel/pull/2486))
+
 ## 5.9

 ### @navikt/ds-react
@@ -74,10 +114,6 @@

 ## 5.7

-### @navikt/aksel-icons
-
- Ikoner: Nye ikoner `ChevronLeftFirstCircle` og `ChevronRightLastCircle` ([#2365](https://github.com/navikt/aksel/pull/2365))
-
 ### @navikt/ds-react

 - :lipstick: Chips.Toggle: Ikon i uvalgt tilstand ([#2395](https://github.com/navikt/aksel/pull/2395))
@@ -118,15 +154,11 @@

 - Ny spacing token på 0.375rem ([#2370](https://github.com/navikt/aksel/pull/2370))

-## 5.6
-
 ### @navikt/aksel-icons

- Ikoner: SVG export setter nå `height="1em"`, `width="1em"` og `fill="currentColor"`. ([#2300](https://github.com/navikt/aksel/pull/2300))
+- Ikoner: Nye ikoner `ChevronLeftFirstCircle` og `ChevronRightLastCircle` ([#2365](https://github.com/navikt/aksel/pull/2365))

- Ikoner: Nye ikoner `book` og `books` ([#2313](https://github.com/navikt/aksel/pull/2313))
-
-* Ikoner: Nye ikoner `ClipboardCheckmark` og `ClipboardLink` ([#2307](https://github.com/navikt/aksel/pull/2307))
+## 5.6

 ### @navikt/ds-react

@@ -178,6 +210,14 @@

 - Tokens: Tilbyr nå token literals for typer, tidligere string literals ([#2342](https://github.com/navikt/aksel/pull/2342))

+### @navikt/aksel-icons
+
+- Ikoner: SVG export setter nå `height="1em"`, `width="1em"` og `fill="currentColor"`. ([#2300](https://github.com/navikt/aksel/pull/2300))
+
+- Ikoner: Nye ikoner `book` og `books` ([#2313](https://github.com/navikt/aksel/pull/2313))
+
+* Ikoner: Nye ikoner `ClipboardCheckmark` og `ClipboardLink` ([#2307](https://github.com/navikt/aksel/pull/2307))
+
 ## 5.5

 ### @navikt/ds-react
@@ -218,10 +258,6 @@

 ## 5.3

-### @navikt/aksel-icons
-
- :bug: SVG import map er nå riktig path ([#2250](https://github.com/navikt/aksel/pull/2250))
-
 ### @navikt/ds-react

 - :bug: Popover: sjekk at det er et HTML-element som får fokus ([#2258](https://github.com/navikt/aksel/pull/2258))
@@ -258,11 +294,11 @@

 - Typography: Oppdatert med typo-klasser for `textColor`, `weight`, `align`, `visuallyHidden` og `truncated`. ([#2211](https://github.com/navikt/aksel/pull/2211))

-## 5.2
-
 ### @navikt/aksel-icons

- Ikoner: Oppdatert ikonpakke ([#2197](https://github.com/navikt/aksel/pull/2197))
+- :bug: SVG import map er nå riktig path ([#2250](https://github.com/navikt/aksel/pull/2250))
+
+## 5.2

 ### @navikt/ds-react

@@ -280,6 +316,10 @@

 * Hovering over combobox dropdown will move selection/focus in the list, so we don't end up with a split focus, and reversely when moving focus while hovering ([#2193](https://github.com/navikt/aksel/pull/2193))

+### @navikt/aksel-icons
+
+- Ikoner: Oppdatert ikonpakke ([#2197](https://github.com/navikt/aksel/pull/2197))
+
 ## 5.1

 ### @navikt/ds-react
@@ -495,18 +535,18 @@

 * Fikset klassenavn brukt for popover i Datepicker og Monthpicker ([PR](https://github.com/navikt/aksel/pull/2041))

-### @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-css

 - :lipstick: Chat: fjernet border, satt avatar svg til 24x24px, byttet om "subtle" og "neutral" ([#2077](https://github.com/navikt/aksel/pull/2077))

 * 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))

+### @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-tokens

 - Shadow-tokens er oppdatert til mer tydeligere varianter ([PR](https://github.com/navikt/aksel/pull/2041))
@@ -539,10 +579,6 @@

 - Deprecated klassenavn `navds-chips--icon-left` ([PR](https://github.com/navikt/aksel/pull/2035))

-### @navikt/aksel-icons
-
- Nye ikoner `ChevronRightLast` og `ChevronLeftLast` ([PR](https://github.com/navikt/aksel/pull/2054))
-
 ### @navikt/ds-react

 - Fikset JSDom-problemer ved testing av Timeline
@@ -567,10 +603,6 @@

 - Accordion: La til `indent`-prop ([PR](https://github.com/navikt/aksel/pull/2027))

-### @navikt/ds-tailwind
-
- :tada: Fargetokens for datavisualisering. ([PR](https://github.com/navikt/aksel/pull/2032))
-
 ### @navikt/ds-css

 - Readmore: setter nå eksplisitt color for å ikke arve text-subtle fra parent. ([PR](https://github.com/navikt/aksel/pull/2049))
@@ -581,12 +613,20 @@

 - Alle description-felter på fieldsets har nå `text-subtle` som farge. ([PR](https://github.com/navikt/aksel/pull/2036))

+### @navikt/ds-tailwind
+
+- :tada: Fargetokens for datavisualisering. ([PR](https://github.com/navikt/aksel/pull/2032))
+
 ### @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/aksel-icons
+
+- Nye ikoner `ChevronRightLast` og `ChevronLeftLast` ([PR](https://github.com/navikt/aksel/pull/2054))
+
 ## 4.0

 ### @navikt/aksel
@@ -639,10 +679,6 @@

 ## 3.2

-### @navikt/aksel-icons
-
- Nye ikoner `FileParagraph` og `FilePlus` ([PR](https://github.com/navikt/aksel/pull/1998))
-
 ### @navikt/ds-react

 - Search: Støtter nå htmlSize-prop ([PR](https://github.com/navikt/aksel/pull/2000))
@@ -661,6 +697,10 @@

 - 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.1

 ### @navikt/ds-react
@@ -693,16 +733,6 @@

 ## 2.9

-### @navikt/aksel-icons
-
- Oppdatert Statusikoner til å være tydeligere og mer konsistente. ([PR](https://github.com/navikt/aksel/pull/1959))
-
-* Fikset `CheckmarkIcon`-bug
-
- Fikset `CheckmarkCircleIcon`-bug ([PR](https://github.com/navikt/aksel/pull/1956))
-
-* Nye ikoner `BulletList` og `NumberList` ([PR](https://github.com/navikt/aksel/pull/1950))
-
 ### @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))
@@ -715,19 +745,17 @@

 - CSS nå tilgjengelig som separate filer: Kan lastest fra CDN, minified-versjoner tilgjengelig ([PR](https://github.com/navikt/aksel/pull/1941))

-## 2.8
-
 ### @navikt/aksel-icons

- :tada: Nye ikoner `HandKnot` og `HandKnotFilled` ([PR](https://github.com/navikt/aksel/pull/1928))
+- Oppdatert Statusikoner til å være tydeligere og mer konsistente. ([PR](https://github.com/navikt/aksel/pull/1959))

-* Oppdatert `InformationSquare`-ikon ([PR](https://github.com/navikt/aksel/pull/1921))
+* Fikset `CheckmarkIcon`-bug

- Oppdatert `VideoSlack`, `Questionmark` og `Information`-ikoner ([PR](https://github.com/navikt/aksel/pull/1909))
+- Fikset `CheckmarkCircleIcon`-bug ([PR](https://github.com/navikt/aksel/pull/1956))

-* Nye ikoner `VideoSlash` og `VideoSlashFill`
+* Nye ikoner `BulletList` og `NumberList` ([PR](https://github.com/navikt/aksel/pull/1950))

- Fikset Sourcemap-bug
+## 2.8

 ### @navikt/ds-react

@@ -763,8 +791,26 @@

 - ExpansioCard: Oppdatert typografi ([PR](https://github.com/navikt/aksel/pull/1870))

+### @navikt/aksel-icons
+
+- :tada: Nye ikoner `HandKnot` og `HandKnotFilled` ([PR](https://github.com/navikt/aksel/pull/1928))
+
+* Oppdatert `InformationSquare`-ikon ([PR](https://github.com/navikt/aksel/pull/1921))
+
+- Oppdatert `VideoSlack`, `Questionmark` og `Information`-ikoner ([PR](https://github.com/navikt/aksel/pull/1909))
+
+* Nye ikoner `VideoSlash` og `VideoSlashFill`
+
+- Fikset Sourcemap-bug
+
 ## 2.7

+### @navikt/ds-css
+
+- Tabs: La til focus-markering for Tabs.Panel ([PR](https://github.com/navikt/aksel/pull/1863))
+
+* ToggleGroup: Fikset token-bug
+
 ### @navikt/aksel-icons

 - Nye ikoner `CaretUpDownFilledDown`, `CaretUpDownFilledUp`, `CloudDown`, `CloudDownFill`, `CloudUp`, `CloudUpFill`, `HddDown`, `HddDownFill`, `HddUp`, `HddUpFill`, `Inbox`, `InboxDown`, `InboxDownFill`, `InboxFill`, `InboxUp`, `InboxUpFill`, `ShoppingBasket`, `ShoppingBasketFill`
@@ -773,12 +819,6 @@

 - Ny ikonpakke med for core icons 3! `@navikt/aksel-icons` ([PR](https://github.com/navikt/aksel/pull/1847))

-### @navikt/ds-css
-
- Tabs: La til focus-markering for Tabs.Panel ([PR](https://github.com/navikt/aksel/pull/1863))
-
-* ToggleGroup: Fikset token-bug
-
 ## 2.6

 ### @navikt/ds-react
@@ -893,10 +933,6 @@

 * Fonter blir bruk i all typografi blir nå lastet fra CDN

-### @navikt/ds-tailwind
-
- Alle token er oppdatert til nytt format. ([Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112))
-
 ### @navikt/ds-css

 - Radio: Fikset default visuell error-state ([PR](https://github.com/navikt/aksel/pull/1737))
@@ -909,6 +945,10 @@

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

+### @navikt/ds-tailwind
+
+- Alle token er oppdatert til nytt format. ([Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112))
+
 ### @navikt/ds-tokens

 - Alle token er oppdatert til nytt format. ([Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112))
@@ -16,11 +16,11 @@
    "playroom"
  ],
  "dependencies": {
-    "@navikt/aksel-icons": "^5.10.3",
-    "@navikt/ds-css": "^5.10.3",
-    "@navikt/ds-react": "^5.10.3",
-    "@navikt/ds-tailwind": "^5.10.3",
-    "@navikt/ds-tokens": "^5.10.3"
+    "@navikt/aksel-icons": "^5.11.3",
+    "@navikt/ds-css": "^5.11.3",
+    "@navikt/ds-react": "^5.11.3",
+    "@navikt/ds-tailwind": "^5.11.3",
+    "@navikt/ds-tokens": "^5.11.3"
  },
  "devDependencies": {
    "prettier-plugin-tailwindcss": "^0.2.3"
@@ -12,7 +12,8 @@ module.exports = {
  // Optional:
  title: "Aksel Sandbox",
  snippets: path.resolve("./src/snippets.ts"),
-  widths: [480, 768, 1024, 1280],
+  widths: [320, 480, 768, 1024, 1280, 1440],
+  defaultWidths: [320, 1280], // will be supported if this PR is merged: https://github.com/seek-oss/playroom/pull/302
  port: 9000,
  frameComponent: path.resolve("./src/FrameComponent.tsx"),
  useScope: path.resolve("./src/useScope.tsx"),
@@ -40,7 +40,7 @@ const Header = ({
  return (
    <header
      className={cl("z-20", {
-        "bg-[#FEFCE9]": variant === "blogg",
+        "bg-amber-50": variant === "blogg",
        "bg-surface-default": variant === "default",
        "bg-surface-subtle": variant === "subtle",
        "bg-surface-transparent": variant === "transparent",
@@ -11,8 +11,8 @@ import { BodyLong, Button, Chips, HStack } from "@navikt/ds-react";
 import cl from "clsx";
 import { useRouter } from "next/router";
 import { useEffect, useRef, useState } from "react";
-import { Sandbox } from "./parts/Sandbox";
 import { CodeSandbox } from "./parts/CodeSandbox";
+import { Sandbox } from "./parts/Sandbox";

 const iframePadding = 192;
 const iframeId = "example-iframe";
@@ -98,10 +98,10 @@ const ComponentExamples = ({ node }: CodeExamplesProps) => {

  return (
    <div>
-      <div className="mb-5 max-w-xl">
-        <Chips>
-          {node.dir.filer.map((fil) => {
-            return (
+      {node.dir.filer.length > 1 && (
+        <div className="mb-5 max-w-xl">
+          <Chips>
+            {node.dir.filer.map((fil) => (
              <Chips.Toggle
                checkmark={false}
                key={fil._key}
@@ -119,119 +119,117 @@ const ComponentExamples = ({ node }: CodeExamplesProps) => {
              >
                {fixName(fil.title)}
              </Chips.Toggle>
-            );
+            ))}
+          </Chips>
+        </div>
+      )}
+      {node.dir.filer.map((fil) => (
+        <div
+          key={fil._key}
+          className={cl({
+            visible: active === fil.navn,
+            hidden: active !== fil.navn,
          })}
-        </Chips>
-      </div>
-      {node.dir.filer.map((fil) => {
-        return (
-          <div
-            key={fil._key}
-            className={cl({
-              visible: active === fil.navn,
-              hidden: active !== fil.navn,
-            })}
-          >
-            {fil?.description && (
-              <BodyLong className="mb-2">{fil.description}</BodyLong>
-            )}
+        >
+          {fil?.description && (
+            <BodyLong className="mb-2">{fil.description}</BodyLong>
+          )}

-            {active === fil.navn && (
-              <>
-                <div
+          {active === fil.navn && (
+            <>
+              <div
+                className={cl(
+                  "overflow-hidden rounded-t-lg border border-b-0 border-gray-300 ",
+                  {
+                    "relative animate-pulse": unloaded,
+                    "bg-gray-50": !unloaded,
+                  }
+                )}
+              >
+                <iframe
+                  src={`/${demoVariant}/${node.dir.title}/${fil.navn.replace(
+                    ".tsx",
+                    ""
+                  )}`}
+                  height={frameState}
+                  onLoad={() => handleExampleLoad()}
+                  id={iframeId}
+                  aria-label={`${node?.dir?.title} ${fil.navn} eksempel`}
                  className={cl(
-                    "overflow-hidden rounded-t-lg border border-b-0 border-gray-300 ",
+                    "min-w-80 block w-full max-w-full resize-x bg-white shadow-[20px_0_20px_-20px_rgba(0,0,0,0.22)]",
                    {
-                      "relative animate-pulse": unloaded,
-                      "bg-gray-50": !unloaded,
+                      invisible: unloaded,
                    }
                  )}
-                >
-                  <iframe
-                    src={`/${demoVariant}/${node.dir.title}/${fil.navn.replace(
-                      ".tsx",
-                      ""
-                    )}`}
-                    height={frameState}
-                    onLoad={() => handleExampleLoad()}
-                    id={iframeId}
-                    aria-label={`${node?.dir?.title} ${fil.navn} eksempel`}
-                    className={cl(
-                      "min-w-80 block w-full max-w-full resize-x bg-white shadow-[20px_0_20px_-20px_rgba(0,0,0,0.22)]",
-                      {
-                        invisible: unloaded,
-                      }
-                    )}
-                    title="Kode-eksempler"
-                    ref={iframeRef}
-                  />
-                  {unloaded && (
-                    <div className="absolute inset-0 mx-auto flex flex-col items-center justify-center gap-2">
-                      <div className="grid w-3/5 gap-2">
-                        <div className="bg-surface-neutral-subtle h-6 w-2/3 rounded-xl" />
-                        <div className="bg-surface-neutral-subtle h-16 w-full rounded-xl" />
-                      </div>
+                  title="Kode-eksempler"
+                  ref={iframeRef}
+                />
+                {unloaded && (
+                  <div className="absolute inset-0 mx-auto flex flex-col items-center justify-center gap-2">
+                    <div className="grid w-3/5 gap-2">
+                      <div className="bg-surface-neutral-subtle h-6 w-2/3 rounded-xl" />
+                      <div className="bg-surface-neutral-subtle h-16 w-full rounded-xl" />
                    </div>
-                  )}
-                </div>
-                <div className="mb-2 rounded-b-lg border border-gray-300 p-1">
-                  <HStack gap="4" justify="space-between">
-                    <div className="hidden sm:block">
-                      <HStack gap="2">
-                        <Button
-                          variant="tertiary-neutral"
-                          size="small"
-                          icon={
-                            <MobileSmallIcon title="Sett eksempel til mobilbredde" />
-                          }
-                          onClick={() =>
-                            (iframeRef.current.style.width = "360px")
-                          }
-                        />
-
-                        <Button
-                          variant="tertiary-neutral"
-                          size="small"
-                          icon={
-                            <LaptopIcon title="Sett eksempel til desktopbredde" />
-                          }
-                          onClick={() => (iframeRef.current.style.width = "")}
-                        />
-                      </HStack>
-                    </div>
-
+                  </div>
+                )}
+              </div>
+              <div className="mb-2 rounded-b-lg border border-gray-300 p-1">
+                <HStack gap="4" justify="space-between">
+                  <div className="hidden sm:block">
                    <HStack gap="2">
-                      {fil?.sandboxEnabled && (
-                        <Sandbox code={fil?.sandboxBase64} />
-                      )}
-                      <CodeSandbox code={fil.innhold.trim()} />
                      <Button
                        variant="tertiary-neutral"
                        size="small"
                        icon={
-                          <ExternalLinkIcon title="Åpne eksempel i nytt vindu" />
+                          <MobileSmallIcon title="Sett eksempel til mobilbredde" />
                        }
-                        target="_blank"
-                        className="si-ignore"
-                        as="a"
-                        href={`/${demoVariant}/${
-                          node.dir.title
-                        }/${fil.navn.replace(".tsx", "")}`}
+                        onClick={() =>
+                          (iframeRef.current.style.width = "360px")
+                        }
+                      />
+
+                      <Button
+                        variant="tertiary-neutral"
+                        size="small"
+                        icon={
+                          <LaptopIcon title="Sett eksempel til desktopbredde" />
+                        }
+                        onClick={() => (iframeRef.current.style.width = "")}
                      />
                    </HStack>
-                  </HStack>
-                </div>
+                  </div>

-                <SnippetLazy
-                  node={{
-                    code: { code: fil.innhold.trim(), language: "tsx" },
-                  }}
-                />
-              </>
-            )}
-          </div>
-        );
-      })}
+                  <HStack gap="2">
+                    {fil?.sandboxEnabled && (
+                      <Sandbox code={fil?.sandboxBase64} />
+                    )}
+                    <CodeSandbox code={fil.innhold.trim()} />
+                    <Button
+                      variant="tertiary-neutral"
+                      size="small"
+                      icon={
+                        <ExternalLinkIcon title="Åpne eksempel i nytt vindu" />
+                      }
+                      target="_blank"
+                      className="si-ignore"
+                      as="a"
+                      href={`/${demoVariant}/${
+                        node.dir.title
+                      }/${fil.navn.replace(".tsx", "")}`}
+                    />
+                  </HStack>
+                </HStack>
+              </div>
+
+              <SnippetLazy
+                node={{
+                  code: { code: fil.innhold.trim(), language: "tsx" },
+                }}
+              />
+            </>
+          )}
+        </div>
+      ))}
    </div>
  );
 };
@@ -27,7 +27,7 @@ const Element = ({ block }: { block: DoDontT["blokker"][number] }) => {
        <BodyShort
          as="span"
          className={cl(
-            "relative z-[-1] flex items-center gap-1 rounded-t-lg px-4 py-2",
+            "text-text-default relative z-[-1] flex items-center gap-1 rounded-t-lg px-4 py-2",
            {
              "bg-surface-success-moderate": block.variant === "do",
              "bg-surface-danger-moderate": block.variant === "dont",
@@ -1,4 +1,5 @@
 import ErrorBoundary from "@/error-boundary";
+import { useFormatedDate } from "@/hooks/useFormatedDate";
 import { amplitudeLogNavigation } from "@/logging";
 import { urlFor } from "@/sanity/interface";
 import { abbrName, getImage } from "@/utils";
@@ -7,7 +8,6 @@ import cl from "clsx";
 import NextImage from "next/legacy/image";
 import NextLink from "next/link";
 import { Tag } from "./Tag";
-import { useFormatedDate } from "@/hooks/useFormatedDate";

 export type ArticleT = {
  _key: string;
@@ -71,7 +71,13 @@ const Card = ({ article, visible, index }: CardProps) => {
          {article.status?.bilde ?? article.seo?.image ? (
            article.status?.bilde ? (
              <NextImage
-                src={urlFor(article.status?.bilde).auto("format").url()}
+                src={urlFor(article.status.bilde).auto("format").url()}
+                blurDataURL={urlFor(article.status.bilde)
+                  .width(24)
+                  .height(24)
+                  .blur(10)
+                  .url()}
+                placeholder="blur"
                width="200"
                height="200"
                alt={article.heading + " thumbnail"}
@@ -81,6 +87,12 @@ const Card = ({ article, visible, index }: CardProps) => {
              <div className="relative h-[200px] w-full">
                <NextImage
                  src={urlFor(article.seo?.image).auto("format").url()}
+                  blurDataURL={urlFor(article.seo?.image)
+                    .width(24)
+                    .height(24)
+                    .blur(10)
+                    .url()}
+                  placeholder="blur"
                  layout="fill"
                  objectFit="cover"
                  alt={article.heading + " thumbnail"}
@@ -1,3 +1,4 @@
+import { useFormatedDate } from "@/hooks/useFormatedDate";
 import { amplitudeLogNavigation } from "@/logging";
 import { urlFor } from "@/sanity/interface";
 import { getAuthors, getImage } from "@/utils";
@@ -7,7 +8,6 @@ import Image from "next/legacy/image";
 import NextLink from "next/link";
 import { ArticleT } from "./Card";
 import { Tag } from "./Tag";
-import { useFormatedDate } from "@/hooks/useFormatedDate";

 export const Highlight = ({
  article,
@@ -35,6 +35,12 @@ export const Highlight = ({
        {useStatusImage ? (
          <Image
            src={urlFor(article.status.bilde).quality(100).auto("format").url()}
+            blurDataURL={urlFor(article.status.bilde)
+              .width(24)
+              .height(24)
+              .blur(10)
+              .url()}
+            placeholder="blur"
            quality={100}
            layout="fill"
            aria-hidden
@@ -49,6 +55,12 @@ export const Highlight = ({
        ) : article?.seo?.image ? (
          <Image
            src={urlFor(article.seo.image).quality(100).auto("format").url()}
+            blurDataURL={urlFor(article.seo.image)
+              .width(24)
+              .height(24)
+              .blur(10)
+              .url()}
+            placeholder="blur"
            quality={100}
            layout="fill"
            objectFit="cover"
@@ -18,9 +18,9 @@ const RelatertInnhold = ({ node }: RelatertInnholdProps) => {
    x?.intern ? `/${x.intern_lenke}` : x.ekstern_link;

  return (
-    <div className="ring-border-subtle toc-ignore bg-surface-neutral-subtle my-7 max-w-2xl rounded-lg p-4 ring-1 ring-inset sm:p-6">
+    <div className="ring-border-subtle toc-ignore bg-surface-neutral-subtle my-7 max-w-2xl rounded-lg p-4 ring-1 ring-inset dark:bg-gray-800 sm:p-6">
      <Heading
-        className="override-text-no-max text-text-subtle flex items-center gap-2"
+        className="override-text-no-max text-text-subtle dark:text-text-on-inverted flex items-center gap-2"
        size="small"
        as="p"
        spacing
@@ -40,7 +40,7 @@ const RelatertInnhold = ({ node }: RelatertInnholdProps) => {
                  e.currentTarget.getAttribute("href")
                )
              }
-              className="text-xl font-semibold text-gray-800"
+              className="dark:text-text-on-inverted text-xl font-semibold text-gray-800"
            >
              {x.title}
            </Link>
@@ -1,5 +1,6 @@
+import { SANITY_PROJECT_ID } from "@/sanity/config";
+import { AkselTheme, getKey } from "@/sb-util";
 import type { Meta, StoryObj } from "@storybook/react";
-import { getKey, AkselTheme } from "@/sb-util";
 import Video from "./Video";

 const meta = {
@@ -18,7 +19,7 @@ const args = {
    caption: "caption-tekst",
    transkripsjon: "Transkripsjonstekst",
    webm: {
-      url: "https://cdn.sanity.io/files/hnbe3yhs/production/274a2ceb69b056e1a7048ad1a5a2f8deff53a2f4.webm",
+      url: `https://cdn.sanity.io/files/${SANITY_PROJECT_ID}/production/274a2ceb69b056e1a7048ad1a5a2f8deff53a2f4.webm`,
      extension: "WEBM",
    },
  },
@@ -1,7 +1,7 @@
 const InlineCode = (
  props: React.HTMLAttributes<HTMLElement> & { noAmps?: boolean }
 ) => (
-  <code className="text-deepblue-800 font-mono text-sm font-semibold leading-normal before:contents">
+  <code className="text-deepblue-800 dark:text-deepblue-300 font-mono text-sm font-semibold leading-normal before:contents">
    {!props?.noAmps && (
      <span aria-hidden className="inline-code-amp">
        `
@@ -19,6 +19,12 @@ export const HighlightedBlogg = ({
          {blogg?.seo?.image ? (
            <Image
              src={urlFor(blogg.seo.image).quality(100).auto("format").url()}
+              blurDataURL={urlFor(blogg.seo.image)
+                .width(24)
+                .height(24)
+                .blur(10)
+                .url()}
+              placeholder="blur"
              quality={100}
              layout="fill"
              objectFit="cover"
@@ -62,6 +68,12 @@ export const HighlightedBlogg = ({
          {blogg?.seo?.image ? (
            <Image
              src={urlFor(blogg.seo.image).quality(100).auto("format").url()}
+              blurDataURL={urlFor(blogg.seo.image)
+                .width(24)
+                .height(24)
+                .blur(10)
+                .url()}
+              placeholder="blur"
              quality={100}
              layout="fill"
              objectFit="cover"
@@ -10,18 +10,17 @@ import cl from "clsx";
 import { ComponentType, useEffect, useState } from "react";
 import styles from "./examples.module.css";

+type withDsT = {
+  variant?: "full" | "inverted" | "static" | "subtle";
+  showBreakpoints?: boolean;
+};
+
 export const withDsExample = (
  Component: ComponentType,
  /**
   * Static: Used for dynamic-height examples like ExpansionCard
   */
-  {
-    variant,
-    showBreakpoints,
-  }: {
-    variant?: "full" | "inverted" | "static" | "subtle";
-    showBreakpoints?: boolean;
-  } = {}
+  { variant, showBreakpoints }: withDsT = {}
 ) => {
  const DsHOC = (props: any) => {
    const [width, setWidth] = useState<number>();
@@ -57,7 +56,12 @@ export const withDsExample = (
        breakpoint = "xl";
      }
      return (
-        <HStack gap="1" className="absolute left-2 top-1" align="center">
+        <HStack
+          gap="05"
+          className="rounded-br-medium absolute left-0 top-0 p-1"
+          align="center"
+          style={{ background: getBg(variant) }}
+        >
          <Icon aria-hidden fontSize="1.5rem" /> {`${breakpoint}`}
        </HStack>
      );
@@ -66,12 +70,12 @@ export const withDsExample = (
    return (
      <div
        className={cl(styles.examples, {
-          "bg-gray-900": variant === "inverted",
-          "bg-bg-subtle": variant === "subtle",
          [styles.containerStatic]: variant === "static",
          [styles.container]: variant !== "static",
        })}
+        style={{ background: getBg(variant) }}
      >
+        <style global>{`html {scrollbar-gutter: unset;}`}</style>
        {showBreakpoints && <BreakpointText />}
        <div
          id="ds-example"
@@ -91,3 +95,15 @@ export const withDsExample = (

  return DsHOC;
 };
+
+function getBg(variant: withDsT["variant"]): string {
+  switch (variant) {
+    case "inverted":
+      return "var(--a-surface-inverted)";
+    case "subtle":
+      return "var(--a-bg-subtle)";
+
+    default:
+      return "var(--a-bg-default)";
+  }
+}
@@ -18,11 +18,14 @@ export function runResolvers({
  }

  return resolvers.reduce((acc, resolver) => {
+    /* Not allowed to edit accumulators directly as its readonly*/
+    const _acc = { ...acc };
    const dataFromKeys = resolver.dataKeys.map((key) =>
-      getNestedProperty(acc, key)
+      getNestedProperty(_acc, key)
    );
-    acc[resolver.key] = resolver.cb(dataFromKeys);
-    return acc;
+
+    _acc[resolver.key] = resolver.cb(dataFromKeys);
+    return _acc;
  }, data);
 }

@@ -52,7 +52,7 @@ function UlList({
                className="whitespace-break-spaces"
                weight={isActive(node.id) ? "semibold" : "regular"}
              >
-                {removeEmojies(node.title)}
+                {removeEmojies(node.title).trim()}
              </BodyShort>
            </a>
            {!nested && node.children.length > 0 && (
@@ -1,4 +1,4 @@
-import { test, expect } from "@playwright/test";
+import { expect, test } from "@playwright/test";
 import { getDirectories } from "../scripts/update-examples/parts/get-directories";
 import { parseCodeFiles } from "../scripts/update-examples/parts/parse-code-files";

@@ -26,7 +26,7 @@ test.describe("sandbox examples (all)", () => {
    }
  });

-  test.describe("templates", () => {
+  /* test.describe("templates", () => {
    const subdirs = getDirectories("templates");

    for (const subdir of subdirs) {
@@ -47,5 +47,5 @@ test.describe("sandbox examples (all)", () => {
        });
      }
    }
-  });
+  }); */
 });
@@ -1,7 +1,7 @@
-import { test, expect } from "@playwright/test";
-import urls from "./test-urls.json";
+import { expect, test } from "@playwright/test";
 import { getDirectories } from "../scripts/update-examples/parts/get-directories";
 import { parseCodeFiles } from "../scripts/update-examples/parts/parse-code-files";
+import urls from "./test-urls.json";

 test.describe("Smoketest all pages", () => {
  for (const url of urls) {
@@ -28,9 +28,8 @@ test.describe("Smoketest all pages", () => {

  test.describe("sandbox examples (just a few)", () => {
    const examples = getDirectories("eksempler");
-    const templates = getDirectories("templates");

-    const folders = [...examples, ...templates];
+    const folders = [...examples];

    const randomFolders = [folders[0], folders[20], folders[50]];

@@ -19,6 +19,16 @@ export async function middleware(req: NextRequest) {
    return NextResponse.next();
  }

+  const url = req.nextUrl.clone();
+  if (
+    url.pathname.startsWith("/sandbox") &&
+    !url.pathname.includes("index.html") &&
+    !url.pathname.match(/(\..*)$/)
+  ) {
+    url.pathname = url.pathname + "/index.html";
+    return NextResponse.redirect(url);
+  }
+
  try {
    const redirect = await sanityClient.fetch(
      `
@@ -29,21 +29,21 @@
    "playwright": "playwright test",
    "test:watch": "jest --watch --config ./config/jest.config.js",
    "backup": "ts-node scripts/backup.js",
-    "watch:tw": "yarn tailwindcss -i ./styles/index.css -o ./dist/tw.css --watch"
+    "watch:tw": "yarn tailwindcss -i ./components/styles/index.css -o ./dist/tw.css --watch"
  },
  "dependencies": {
    "@amplitude/analytics-browser": "^2.2.3",
    "@portabletext/react": "^3.0.11",
-    "@sanity/client": "^6.6.0",
+    "@sanity/client": "^6.8.6",
    "@sanity/code-input": "4.1.1",
    "@sanity/color-input": "^3.1.0",
    "@sanity/image-url": "1.0.2",
    "@sanity/table": "1.0.1",
-    "@sanity/vision": "3.18.0",
+    "@sanity/vision": "3.20.0",
    "boring-avatars": "1.10.1",
    "clsx": "^1.2.1",
    "codesandbox": "^2.2.3",
-    "date-fns": "2.29.3",
+    "date-fns": "^2.30.0",
    "fuse.js": "^6.6.2",
    "jscodeshift": "^0.15.1",
    "lodash": "^4.17.21",
@@ -57,10 +57,10 @@
    "react-dom": "^18.0.0",
    "react-hotjar": "^6.1.0",
    "react-responsive-masonry": "^2.1.7",
-    "sanity": "3.18.0",
-    "sanity-plugin-asset-source-unsplash": "^1.1.1",
-    "sanity-plugin-media": "^2.2.2",
-    "sharp": "0.32.5",
+    "sanity": "3.20.0",
+    "sanity-plugin-asset-source-unsplash": "^1.1.2",
+    "sanity-plugin-media": "^2.2.4",
+    "sharp": "0.32.6",
    "styled-components": "^6.0.0",
    "swr": "^1.1.2",
    "tailwindcss": "^3.3.3",
@@ -72,8 +72,8 @@
    "@next/bundle-analyzer": "13.2.1",
    "@next/eslint-plugin-next": "13.2.1",
    "@playwright/test": "1.35.1",
-    "@sanity/block-tools": "^3.18.0",
-    "@sanity/schema": "^3.18.0",
+    "@sanity/block-tools": "^3.20.0",
+    "@sanity/schema": "^3.20.0",
    "@testing-library/jest-dom": "^5.16.0",
    "@testing-library/react": "^13.3.0",
    "@types/jest": "^29.0.0",
@@ -1,9 +1,18 @@
+import Footer from "@/layout/footer/Footer";
+import Header from "@/layout/header/Header";
 import { AmplitudeEvents, amplitude } from "@/logging";
-import { AkselCubeStatic } from "@/web/aksel-cube/AkselCube";
-import { BodyLong, Heading } from "@navikt/ds-react";
+import {
+  BodyShort,
+  Box,
+  Heading,
+  Link,
+  List,
+  Page,
+  VStack,
+} from "@navikt/ds-react";
 import { useEffect } from "react";

-function Page() {
+function ErrorPage({ statusCode }) {
  useEffect(() => {
    amplitude.track(AmplitudeEvents.error, {
      side: window.location.pathname,
@@ -11,21 +20,66 @@ function Page() {
  }, []);

  return (
-    <div
-      id="vk-notFoundId"
-      className="relative flex h-screen w-screen items-center justify-center gap-8 overflow-hidden"
-    >
-      <AkselCubeStatic className="text-deepblue-300 opacity-10" />
-      <div>
-        <Heading spacing level="1" size="large">
-          500 - Internal Server Error
-        </Heading>
-        <BodyLong className="mb-2">
-          Det oppstod en feil ved lasting av side. Prøv å laste side på nytt.
-        </BodyLong>
-      </div>
-    </div>
+    <Page data-aksel-template="500-v1" footer={<Footer />} id="vk-notFoundId">
+      <Header />
+      <Page.Block as="main" width="xl" gutters>
+        <Box paddingBlock="20 8">
+          <VStack gap="16">
+            <VStack gap="12" align="start">
+              <div>
+                {statusCode && (
+                  <BodyShort textColor="subtle" size="small">
+                    Statuskode {statusCode}
+                  </BodyShort>
+                )}
+                <Heading level="1" size="large" spacing>
+                  Beklager, noe gikk galt.
+                </Heading>
+                <BodyShort spacing>
+                  En teknisk feil på våre servere gjør at siden er
+                  utilgjengelig. Dette skyldes ikke noe du gjorde.
+                </BodyShort>
+                <BodyShort>Du kan prøve å</BodyShort>
+                <List>
+                  <List.Item>
+                    vente noen minutter og laste siden på nytt
+                  </List.Item>
+                  <List.Item>gå tilbake til forrige side</List.Item>
+                </List>
+                <BodyShort>
+                  Hvis problemet vedvarer, kan du{" "}
+                  <Link
+                    href="https://github.com/navikt/aksel/issues/new?assignees=&labels=bug+%F0%9F%90%9B&projects=&template=bug-report.md&title=[Aksel.nav.no%20-%20500]"
+                    target="_blank"
+                  >
+                    kontakte oss (åpnes i ny fane)
+                  </Link>
+                  .
+                </BodyShort>
+              </div>
+            </VStack>
+            <div>
+              <Heading level="1" size="large" spacing>
+                Something went wrong
+              </Heading>
+              <BodyShort spacing>
+                This was caused by a technical fault on our servers. Please
+                refresh this page or try again in a few minutes.{" "}
+              </BodyShort>
+              <BodyShort>
+                <Link
+                  target="_blank"
+                  href="https://github.com/navikt/aksel/issues/new?assignees=&labels=bug+%F0%9F%90%9B&projects=&template=bug-report.md&title=[Aksel.nav.no%20-%20500]"
+                >
+                  Contact us (opens in new tab)
+                </Link>{" "}
+                if the problem persists.
+              </BodyShort>
+            </div>
+          </VStack>
+        </Box>
+      </Page.Block>
+    </Page>
  );
 }
-
-export default Page;
+export default ErrorPage;
@@ -1,24 +1,85 @@
-import { AkselCubeStatic } from "@/web/aksel-cube/AkselCube";
-import { BodyLong, Heading } from "@navikt/ds-react";
-import React from "react";
+import Footer from "@/layout/footer/Footer";
+import Header from "@/layout/header/Header";
+import { AmplitudeEvents, amplitude } from "@/logging";
+import {
+  BodyShort,
+  Box,
+  Heading,
+  Link,
+  List,
+  Page,
+  VStack,
+} from "@navikt/ds-react";
+import { useEffect } from "react";
+
+function ErrorPage({ statusCode }) {
+  useEffect(() => {
+    amplitude.track(AmplitudeEvents.error, {
+      side: window.location.pathname,
+    });
+  }, []);

-const MyError = ({ statusCode }) => {
  return (
-    <div
-      id="vk-notFoundId"
-      className="relative flex h-screen w-screen items-center justify-center gap-8 overflow-hidden"
-    >
-      <AkselCubeStatic className="text-deepblue-300 opacity-10" />
-      <div>
-        <Heading spacing level="1" size="large">
-          {statusCode} - Det oppstod en feil!
-        </Heading>
-        <BodyLong className="mb-2">
-          Det oppstod en feil ved lasting av side. Prøv å laste side på nytt.
-        </BodyLong>
-      </div>
-    </div>
+    <Page data-aksel-template="500-v1" footer={<Footer />} id="vk-notFoundId">
+      <Header />
+      <Page.Block as="main" width="xl" gutters>
+        <Box paddingBlock="20 8">
+          <VStack gap="16">
+            <VStack gap="12" align="start">
+              <div>
+                {statusCode && (
+                  <BodyShort textColor="subtle" size="small">
+                    Statuskode {statusCode}
+                  </BodyShort>
+                )}
+                <Heading level="1" size="large" spacing>
+                  Beklager, noe gikk galt.
+                </Heading>
+                <BodyShort spacing>
+                  En teknisk feil på våre servere gjør at siden er
+                  utilgjengelig. Dette skyldes ikke noe du gjorde.
+                </BodyShort>
+                <BodyShort>Du kan prøve å</BodyShort>
+                <List>
+                  <List.Item>
+                    vente noen minutter og laste siden på nytt
+                  </List.Item>
+                  <List.Item>gå tilbake til forrige side</List.Item>
+                </List>
+                <BodyShort>
+                  Hvis problemet vedvarer, kan du{" "}
+                  <Link
+                    href="https://github.com/navikt/aksel/issues/new?assignees=&labels=bug+%F0%9F%90%9B&projects=&template=bug-report.md&title=[Aksel.nav.no%20-%20500]"
+                    target="_blank"
+                  >
+                    kontakte oss (åpnes i ny fane)
+                  </Link>
+                  .
+                </BodyShort>
+              </div>
+            </VStack>
+            <div>
+              <Heading level="1" size="large" spacing>
+                Something went wrong
+              </Heading>
+              <BodyShort spacing>
+                This was caused by a technical fault on our servers. Please
+                refresh this page or try again in a few minutes.{" "}
+              </BodyShort>
+              <BodyShort>
+                <Link
+                  target="_blank"
+                  href="https://github.com/navikt/aksel/issues/new?assignees=&labels=bug+%F0%9F%90%9B&projects=&template=bug-report.md&title=[Aksel.nav.no%20-%20500]"
+                >
+                  Contact us (opens in new tab)
+                </Link>{" "}
+                if the problem persists.
+              </BodyShort>
+            </div>
+          </VStack>
+        </Box>
+      </Page.Block>
+    </Page>
  );
-};
-
-export default MyError;
+}
+export default ErrorPage;
@@ -1,3 +1,4 @@
+import cl from "clsx";
 import { NextStudio } from "next-sanity/studio";
 import { useEffect, useState } from "react";
 import { workspaceConfig } from "../../sanity/sanity.config";
@@ -20,7 +21,9 @@ const StudioPage = () => {
  return (
    <div
      data-theme={scheme}
-      className="aksel-admin h-full min-h-screen"
+      className={cl("aksel-admin h-full min-h-screen", {
+        dark: scheme === "dark",
+      })}
      id="sanity-wrapper"
    >
      <NextStudio
@@ -10,7 +10,7 @@ Eksempler må ligge under `eksempler/[gruppe]/[eksempel].tsx`

 ### Kode

-Alle linjer som inneholder `withDsExample` + alt under `export default withDsExample(Example);` blir automatisk fjernet fra kode-snippet.
+Alle linjer som inneholder `examples/withDsExample` + alt under `// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE` blir automatisk fjernet fra kode-snippet.

 Demo-komponent må ha navn `Example` for at CodeSandbox-knapp skal fungere riktig.

@@ -28,10 +28,11 @@ const Example = () => {
  return <Button>Primary</Button>;
 };

-export default withDsExample(Example); <- Alt under denne linjen fjernes fra vist kode
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
+export default withDsExample(Example);

 export const args = {
  index: 0,
-  desc: "Primærknapp brukes til xyz"
+  desc: "Primærknapp brukes til xyz",
 };
 ```
@@ -33,6 +33,7 @@ const Example = () => {
  );
 };

+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "static" });

 /* Storybook story */
@@ -32,6 +32,7 @@ const Example = () => {
  );
 };

+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "static" });

 /* Storybook story */
@@ -32,6 +32,7 @@ const Example = () => {
  );
 };

+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "static" });

 /* Storybook story */
@@ -51,6 +51,7 @@ const Example = () => {
  );
 };

+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "static" });

 /* Storybook story */
@@ -32,6 +32,7 @@ const Example = () => {
  );
 };

+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "static" });

 /* Storybook story */
@@ -18,6 +18,7 @@ const Example = () => {
  );
 };

+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);

 /* Storybook story */
@@ -7,6 +7,7 @@ const Example = () => {
  );
 };

+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);

 /* Storybook story */
@@ -15,5 +16,6 @@ export const Demo = {
 };

 export const args = {
-  index: 0,
+  index: 4,
+  desc: "Brukes til å informere brukere om at noe kritisk har skjedd og vil kreve umiddelbar oppmerksomhet.",
 };
@@ -22,6 +22,7 @@ const Example = () => {
  );
 };

+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);

 /* Storybook story */
@@ -30,5 +31,5 @@ export const Demo = {
 };

 export const args = {
-  index: 2,
+  index: 8,
 };
@@ -11,6 +11,7 @@ const Example = () => {
  );
 };

+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);

 /* Storybook story */
@@ -19,5 +20,6 @@ export const Demo = {
 };

 export const args = {
-  index: 0,
+  index: 2,
+  desc: "Skal formidle ren informasjon",
 };
@@ -22,6 +22,7 @@ const Example = () => {
  );
 };

+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);

 /* Storybook story */
@@ -30,5 +31,6 @@ export const Demo = {
 };

 export const args = {
-  index: 3,
+  index: 9,
+  desc: "Bruk inline om varselet er en del av annet innhold eller når panelet og bakgrunnsfarge blir støy for brukeren.",
 };
@@ -24,6 +24,7 @@ const Example = () => {
  );
 };

+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);

 /* Storybook story */
@@ -32,5 +33,5 @@ export const Demo = {
 };

 export const args = {
-  index: 0,
+  index: 10,
 };
@@ -14,6 +14,7 @@ const Example = () => {
  );
 };

+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);

 /* Storybook story */
@@ -22,5 +23,6 @@ export const Demo = {
 };

 export const args = {
-  index: 4,
+  index: 7,
+  desc: "Husk riktig h-tag ved bruk av heading i Alert",
 };
@@ -41,6 +41,7 @@ const AlertWithCloseButton = ({
  );
 };

+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);

 /* Storybook story */
@@ -49,5 +50,5 @@ export const Demo = {
 };

 export const args = {
-  index: 1,
+  index: 6,
 };
@@ -1,27 +1,20 @@
 import { withDsExample } from "@/web/examples/withDsExample";
-import { Alert } from "@navikt/ds-react";
+import { Alert, VStack } from "@navikt/ds-react";

 const Example = () => {
  return (
-    <div className="grid gap-4">
-      <Alert size="small" 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.
-      </Alert>
+    <VStack gap="4" align="center">
      <Alert size="small" variant="success">
        Søknad er sendt inn!
      </Alert>
-      <Alert size="small" variant="warning">
-        Du må være registrert hos NAV for å bruke aktivitetsplanen.
+      <Alert size="small" variant="success" inline>
+        Søknad er sendt inn!
      </Alert>
-      <Alert size="small" variant="error">
-        Noe gikk galt! Prøv igjen om noen minutter.
-      </Alert>
-    </div>
+    </VStack>
  );
 };

+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);

 /* Storybook story */
@@ -30,5 +23,5 @@ export const Demo = {
 };

 export const args = {
-  index: 1,
+  index: 5,
 };
@@ -5,6 +5,7 @@ const Example = () => {
  return <Alert variant="success">Søknad er sendt inn!</Alert>;
 };

+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);

 /* Storybook story */
@@ -13,5 +14,6 @@ export const Demo = {
 };

 export const args = {
-  index: 0,
+  index: 1,
+  desc: "Bekrefter at en oppgave er fullført som forventet.",
 };
@@ -9,6 +9,7 @@ const Example = () => {
  );
 };

+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);

 /* Storybook story */
@@ -17,5 +18,6 @@ export const Demo = {
 };

 export const args = {
-  index: 0,
+  index: 3,
+  desc: "Bruk denne når du vil at brukeren skal foreta en bestemt handling eller for å advare dem om noe viktig.",
 };
@@ -33,6 +33,7 @@ function Divider() {
  return <hr className="border-border-subtle" />;
 }

+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "full" });

 /* Storybook story */
@@ -28,6 +28,7 @@ function Divider() {
  return <hr className="border-border-subtle" />;
 }

+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "full" });

 /* Storybook story */
@@ -34,6 +34,7 @@ function Divider() {
  return <hr className="border-border-subtle" />;
 }

+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "full" });

 /* Storybook story */
@@ -30,6 +30,7 @@ function Divider() {
  return <hr className="border-border-subtle" />;
 }

+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "full" });

 /* Storybook story */
@@ -5,6 +5,7 @@ const Example = () => {
  return <BodyLong as="span">Dette er nå en span!</BodyLong>;
 };

+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "full" });

 /* Storybook story */
@@ -34,6 +34,7 @@ function Divider() {
  return <hr className="border-border-subtle" />;
 }

+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "full" });

 /* Storybook story */
@@ -17,6 +17,7 @@ const Example = () => {
  );
 };

+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "full" });

 /* Storybook story */
@@ -13,6 +13,7 @@ const Example = () => {
  );
 };

+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "full" });

 /* Storybook story */
@@ -17,6 +17,7 @@ const Example = () => {
  );
 };

+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "full" });

 /* Storybook story */
@@ -32,6 +32,7 @@ function Divider() {
  return <hr className="border-border-subtle" />;
 }

+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "full" });

 /* Storybook story */
@@ -27,6 +27,7 @@ function Divider() {
  return <hr className="border-border-subtle" />;
 }

+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "full" });

 /* Storybook story */
@@ -33,6 +33,7 @@ function Divider() {
  return <hr className="border-border-subtle" />;
 }

+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "full" });

 /* Storybook story */
@@ -29,6 +29,7 @@ function Divider() {
  return <hr className="border-border-subtle" />;
 }

+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "full" });

 /* Storybook story */
@@ -5,6 +5,7 @@ const Example = () => {
  return <BodyShort as="span">Dette er nå en span!</BodyShort>;
 };

+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "full" });

 /* Storybook story */
@@ -33,6 +33,7 @@ function Divider() {
  return <hr className="border-border-subtle" />;
 }

+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "full" });

 /* Storybook story */
@@ -16,6 +16,7 @@ const Example = () => {
  );
 };

+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "full" });

 /* Storybook story */
@@ -12,6 +12,7 @@ const Example = () => {
  );
 };

+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "full" });

 /* Storybook story */
@@ -16,6 +16,7 @@ const Example = () => {
  );
 };

+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "full" });

 /* Storybook story */
@@ -12,6 +12,7 @@ const Example = () => {
  );
 };

+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);

 /* Storybook story */
@@ -20,6 +20,7 @@ const Example = () => {
  );
 };

+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);

 /* Storybook story */
@@ -14,6 +14,7 @@ const Example = () => {
  );
 };

+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);

 /* Storybook story */
@@ -5,6 +5,7 @@ const Example = () => {
  return <Button loading>Loading</Button>;
 };

+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);

 /* Storybook story */
@@ -11,6 +11,7 @@ const Example = () => {
  );
 };

+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);

 /* Storybook story */
@@ -10,6 +10,7 @@ const Example = () => {
  );
 };

+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);

 /* Storybook story */
@@ -21,6 +21,7 @@ const Example = () => {
  );
 };

+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);

 /* Storybook story */
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot]	8c855ee0da	Version Packages (#2519 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-11-29 11:43:20 +01:00
Ken	ade35e9fba	🐛 Fikset accumulator-bug i preview (#2520 )	2023-11-28 16:43:20 +01:00
Ken	b9d2a65c3f	[aksel.nav.no] Lokal eslint-plugin for eksempler/templates (#2522 ) * 🎉 Custom eslint-regel for eksempler * 🔥 Fjernet eslint-plugin fra changeset * 📝 comment * ⚡ Bruker some for boolean-check	2023-11-28 16:43:11 +01:00
Halvor Haugan	5cd1a6d86a	🐛 Popover: Ikke lukk ved klikk inni når parent er fokuserbar (#2521 )	2023-11-28 16:18:40 +01:00
Halvor Haugan	1bdebfd134	Justering av kodeeksempler for Table (#2517 )	2023-11-28 16:05:12 +01:00
Julian Nymark Halvor Haugan Ken Ken	138c4523ee	Templates for 500 error pages (#2500 ) * ✨ add "enkel" template for 500 * ✨ add more templates for 500 error pages * 🎨 shuffle some templates related to 500 errors * 📝 Oppdatert lenke * Update aksel.nav.no/website/pages/templates/500/med-lang-en.tsx * Update aksel.nav.no/website/pages/templates/500/uten-dekorator.tsx * PR review comments * Update aksel.nav.no/website/pages/templates/500/med-feil-id.tsx * Update aksel.nav.no/website/pages/templates/500/med-cta.tsx * Update aksel.nav.no/website/pages/templates/500/komplett.tsx * Update aksel.nav.no/website/pages/templates/500/enkel.tsx * 📝 Oppdatert formulering på engelsk contact-us * 📝 la til punktum * 🔥 Fjernet HGRID fra template * 📝 Oppdatert lenketekster * 📝 Oppdatert tekster for enkel-variant * 📝 Oppdatert desc-tekster * 🎨 Oppdatert layout for 500-sider * 🎨 La til data-attr * 🎨 Oppdatert lokal bruk av 500-mal * 🐛 Fikset 500-maler * 🧪 Tester ikke templates med playwright * 🐛 synket engelsk-tekst på 500-maler * Update aksel.nav.no/website/pages/500.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * Update aksel.nav.no/website/pages/_error.js Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * 🔥 Fjernet duplikat comment * 🎨 oppdatert indeksering --------- Co-authored-by: Ken <ken.aleksander@gmail.com> Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>	2023-11-28 15:53:05 +01:00
Ken	363d51e2c4	Page width `md` (#2510 ) * 📝 Page width-md * 🐛 La til med i liste over widths * 🐛 Fikset lasting av CSS i aksel-stories	2023-11-28 15:52:42 +01:00
Julian Nymark Ken Ken	1079e8465a	🐛 fix templates examples (#2507 ) * 🐛 fix templates examples, filter-code now throws on dubious input & output + add tests * 🎨 convert filter-code to use string instead of code match * 🎨 Kan nå se 404 sider i sandbox * 🔥 Fjernet testing av templates --------- Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> Co-authored-by: Ken <ken.aleksander@gmail.com>	2023-11-28 12:40:59 +01:00
Halvor Haugan	8dda59082d	🐛 Textarea: Skru av autosize ved manuell resize (#2518 ) * 🐛 Textarea: Skru av autosize ved manuell resize * typer stories * ikke debounce resize	2023-11-28 12:30:33 +01:00
github-actions[bot]andgithub-actions[bot]	21d5ddd433	Version Packages (#2515 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-11-24 19:40:44 +01:00
Ken	1b7bc53294	🐛 Synket date-fns versioner i Repo	2023-11-24 18:56:08 +01:00
Lars Eirik Korsgaard Hansen	4dc5a90c72	⬆️ upgrade date-fns version & make it minor-version agnostic (#2514 ) * yarn lock * ⬆️ upgrade date-fns version & make it minor-version agnostic	2023-11-24 11:04:24 +01:00
github-actions[bot]andgithub-actions[bot]	c7694f8ddd	Version Packages (#2513 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-11-23 14:16:48 +01:00
Ken	10bbdb730b	Switch color (#2511 ) * 💄 Switch er nå action * 📝 changeset * 🐛 Byttet fra action til action-selected	2023-11-23 13:57:06 +01:00
github-actions[bot]andgithub-actions[bot]	f4458f3bb8	Version Packages (#2505 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-11-23 12:58:08 +01:00
Halvor Haugan	9dafbeb4eb	♿ Textarea: Forsinkelse ved live-opplesning av gjenstående tegn (#2502 )	2023-11-23 12:51:57 +01:00
Halvor Haugan	4b4e190c20	Endre navn på ikon DrawingPin -> PushPin	2023-11-23 11:25:54 +01:00
Halvor Haugan	b7d03bfc89	Textarea: Mulighet for å sette resize-retning (#2494 )	2023-11-22 15:26:34 +01:00
Halvor Haugan	bc259f5b30	Nytt ikon DrawingPin (#2503 )	2023-11-22 15:21:18 +01:00
Halvor Haugan	16cad26378	✨ Textarea: Støtte for automatisk scrollbar (#2457 )	2023-11-22 15:15:32 +01:00
Ken	6ee4aa3e82	[Sanity/Aksel.nav.no] Sanity cleanup (#2499 ) * ♻️ Sanity-id ut i const * ⚡ Flyttet sanity apiVersion ut i const * ⚡ Flyttet sanity dataset ut i const * 🏷️ Bedre typer structure * ⚡ La til blur på highlight-bilder * 💄 Cube ligger nå bak innhold på bloggen * 🔥 Fjernet gammel SEO fra sanity * ♻️ SEO og groups import sanity * ♻️ Ryddet opp i metadata * 🎉 Annotering av lenker i sanity * 🎨 Preview av kodemodul * 🎨 Preview for dodont * 🎨 Tips-preview * 🎨 Relatert innhold preview * 🔥 Fjernet console.log * 🐛 Fikset småfeil * 💄 Fikset darkmode-visning for preview	2023-11-22 11:47:31 +01:00
Ken	bb5466178a	📝 Oppdatert typo-eksempler (#2493 )	2023-11-22 10:14:05 +01:00
Ken	efb92be344	🐛 Headings med space førte til wrapping av tekst (#2490 )	2023-11-22 09:46:32 +01:00
KenandHalvor Haugan	e3f75f542f	📝 Alert eksempler (#2492 ) * 📝 Inline description i eksempler * Update aksel.nav.no/website/pages/eksempler/alert/error.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * Update aksel.nav.no/website/pages/eksempler/alert/info.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> --------- Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>	2023-11-22 09:39:53 +01:00
Halvor Haugan	96610bb543	Fiks storybook:aksel	2023-11-21 13:51:43 +01:00
Ken	eee7143cf6	[Aksel.nav.no] Fjernet Scrollbar gutters på eksempler (#2491 ) * 🐛 Fjerner scroll-gutters fra eksempler * 🎨 Bedre visning av breakpoints i eksempler * ⬆️ Yarn.lock	2023-11-20 11:58:24 +01:00
Ken	a1b8cc0364	📝 Oppdatert page gutters eksempel (#2496 )	2023-11-20 09:15:07 +01:00
github-actions[bot]andgithub-actions[bot]	e5d2f7eb8c	Version Packages (#2498 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-11-20 09:11:39 +01:00
Håvard Stigen Andersen	67b8b6626e	Gjør lukknapp i alert til type button (#2497 )	2023-11-20 09:08:04 +01:00
Ken	8783f1821d	[Sanity] Oppdatert til v3.20, slått på kommentarer (#2487 ) * 🎨 Updated sanity and enabled comments * ♻️ Oppdatert structure * 🎨 Bruker native input for bedre perspective og comment støtte * 🎨 Added presentation-mode * ⚡ Raskere load av sider * 🔥 Fjernet experimental features	2023-11-17 21:44:46 +01:00
Julian Nymark	d52085f256	✨ add 1440px width to playroom default widths (#2476 ) * ✨ add 1440px width to playroom default widths * 🐛 fix for routing wrt /sandbox + future fix for default widths * 🚚 shuffle redirect check to earlier in middleware	2023-11-17 17:18:18 +01:00
Halvor Haugan	67e8565da3	Link: Oppdatert eksempler (#2479 )	2023-11-17 14:51:21 +01:00
Halvor Haugan	bb4ff1afc3	Justering av eksempler på ConfirmationPanel (#2489 )	2023-11-17 13:37:53 +01:00
dependabot[bot]	16c0c15c67	⬆️ Bump sharp from 0.32.5 to 0.32.6 in /aksel.nav.no/website (#2488 ) Bumps [sharp](https://github.com/lovell/sharp) from 0.32.5 to 0.32.6. - [Release notes](https://github.com/lovell/sharp/releases) - [Changelog](https://github.com/lovell/sharp/blob/main/docs/changelog.md) - [Commits](https://github.com/lovell/sharp/compare/v0.32.5...v0.32.6) --- updated-dependencies: - dependency-name: sharp dependency-type: direct:production ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2023-11-17 12:54:27 +01:00