Version Packages (#2560 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
🎨 Token for checkmark-circle (#2558 )
2026-10-17 11:12:03 +00:00 · 2023-12-13 09:42:44 +01:00 · 2023-12-13 09:28:58 +01:00 · 2023-12-08 11:26:06 +01:00 · 2023-12-08 09:57:48 +01:00 · 2023-12-08 09:53:43 +01:00
437 changed files with 5563 additions and 3888 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",
@@ -53,6 +53,8 @@ jobs:
          projectToken: x3xqdfgkujg
          exitZeroOnChanges: false
          buildScriptName: "build:storybook"
+          onlyChanged: true
+          externals: \@navikt/core/css/**/*.css
        env:
          STORYBOOK_GITHUB_SHA: ${{ github.sha }}

@@ -1,3 +1,6 @@
+import { mergeConfig } from "vite";
+import turbosnap from "vite-plugin-turbosnap";
+
 module.exports = {
  staticDirs: ["./public"],

@@ -42,4 +45,17 @@ module.exports = {
    checkOptions: {},
    reactDocgen: false,
  },
+
+  async viteFinal(config, { configType }) {
+    return mergeConfig(config, {
+      plugins:
+        configType === "PRODUCTION"
+          ? [
+              turbosnap({
+                rootDir: config.root ?? process.cwd(),
+              }),
+            ]
+          : [],
+    });
+  },
 };
@@ -1,5 +1,15 @@
 # @navikt/aksel-icons

+## 5.11.5
+
+## 5.11.4
+
+## 5.11.3
+
+## 5.11.2
+
+## 5.11.1
+
 ## 5.11.0

 ### Minor Changes
@@ -28,7 +28,7 @@
    "postcss": "^8.4.31",
    "postcss-url": "^10.1.3",
    "typescript": "^5.1.6",
-    "vite": "^4.2.0",
+    "vite": "^4.5.1",
    "vite-plugin-singlefile": "^0.13.3",
    "vite-plugin-svgr": "^2.4.0"
  }
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-icons",
-  "version": "5.11.0",
+  "version": "5.11.5",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -1,5 +1,15 @@
 # @navikt/aksel-stylelint

+## 5.11.5
+
+## 5.11.4
+
+## 5.11.3
+
+## 5.11.2
+
+## 5.11.1
+
 ## 5.11.0

 ## 5.10.4
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-stylelint",
-  "version": "5.11.0",
+  "version": "5.11.5",
  "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.11.0",
-    "@navikt/ds-tokens": "^5.11.0",
+    "@navikt/ds-css": "^5.11.5",
+    "@navikt/ds-tokens": "^5.11.5",
    "@types/jest": "^29.0.0",
    "concurrently": "7.2.1",
    "copyfiles": "2.4.1",
@@ -1,5 +1,40 @@
 # @navikt/aksel

+## 5.11.5
+
+### Patch Changes
+
+- Updated dependencies [[`e77206da1`](https://github.com/navikt/aksel/commit/e77206da1ad1e4b55efd8ec384bd627604eaa08f)]:
+  - @navikt/ds-css@5.11.5
+
+## 5.11.4
+
+### Patch Changes
+
+- Updated dependencies [[`65cc6f425`](https://github.com/navikt/aksel/commit/65cc6f425db5972e5f3145e333292ec7b1776f5a)]:
+  - @navikt/ds-css@5.11.4
+
+## 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
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel",
-  "version": "5.11.0",
+  "version": "5.11.5",
  "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.11.0",
+    "@navikt/ds-css": "5.11.5",
    "axios": "1.6.0",
    "chalk": "4.1.0",
    "clipboardy": "^2.3.0",
@@ -1,5 +1,33 @@
 # @navikt/ds-css

+## 5.11.5
+
+### Patch Changes
+
+- Chips: La til token for checkmark-circle ([#2558](https://github.com/navikt/aksel/pull/2558))
+
+## 5.11.4
+
+### Patch Changes
+
+- :bug: Modal: Hindre at elementer med sr-only posisjoneres feil ([#2541](https://github.com/navikt/aksel/pull/2541))
+
+## 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
@@ -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,10 +21,16 @@
 }

 .navds-textarea__wrapper {
+  --__ac-textarea-height: initial;
+
  position: relative;
  min-width: 100%;
 }

+.navds-textarea__input:first-child {
+  height: var(--__ac-textarea-height);
+}
+
 .navds-textarea__input {
  appearance: none;
  padding: var(--a-spacing-2);
@@ -118,6 +118,7 @@
  padding: var(--a-spacing-6);
  overflow: auto;
  overscroll-behavior: contain;
+  position: relative; /* Needed to make sr-only elements position correctly - see Storybook */
 }

 .navds-modal__header + .navds-modal__body {
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "5.11.0",
+  "version": "5.11.5",
  "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.11.0",
+    "@navikt/ds-tokens": "^5.11.5",
    "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;
 }
@@ -102,6 +102,7 @@
    "--ac-chip-toggle-neutral-pressed-bg": "--a-surface-neutral-selected",
    "--ac-chip-toggle-neutral-pressed-text": "--a-text-on-neutral",
    "--ac-chip-toggle-neutral-pressed-hover-bg": "--a-surface-neutral-selected",
+    "--ac-chip-toggle-circle-border": "--a-border-default",
    "--ac-chip-toggle-focus": "--a-border-focus",
    "--ac-chip-removable-action-bg": "--a-surface-action-selected",
    "--ac-chip-removable-action-text": "--a-text-on-action",
@@ -401,14 +402,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,59 @@
 # @navikt/ds-react

+## 5.11.5
+
+### Patch Changes
+
+- Chips: La til token for checkmark-circle ([#2558](https://github.com/navikt/aksel/pull/2558))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.11.5
+  - @navikt/aksel-icons@5.11.5
+
+## 5.11.4
+
+### Patch Changes
+
+- Fix issue where clicking in Combobox.FilteredOptions after scrolling selected the wrong element ([#2536](https://github.com/navikt/aksel/pull/2536))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.11.4
+  - @navikt/aksel-icons@5.11.4
+
+## 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
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "5.11.0",
+  "version": "5.11.5",
  "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.11.0",
-    "@navikt/ds-tokens": "^5.11.0",
+    "@navikt/aksel-icons": "^5.11.5",
+    "@navikt/ds-tokens": "^5.11.5",
    "@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": {
@@ -3,8 +3,8 @@ import React, { forwardRef, useMemo, useRef, useState } from "react";
 import { Loader } from "../loader";
 import { Label } from "../typography";
 import {
-  mergeRefs,
  OverridableComponent,
+  mergeRefs,
  omit,
  useClientLayoutEffect,
 } from "../util";
@@ -73,7 +73,7 @@ export const ToggleChips: OverridableComponent<
                fillRule="evenodd"
                clipRule="evenodd"
                d="M10 3.125C6.20304 3.125 3.125 6.20304 3.125 10C3.125 13.797 6.20304 16.875 10 16.875C13.797 16.875 16.875 13.797 16.875 10C16.875 6.20304 13.797 3.125 10 3.125ZM1.875 10C1.875 5.51269 5.51269 1.875 10 1.875C14.4873 1.875 18.125 5.51269 18.125 10C18.125 14.4873 14.4873 18.125 10 18.125C5.51269 18.125 1.875 14.4873 1.875 10Z"
-                fill="var(--a-border-default)"
+                fill="var(--ac-chip-toggle-circle-border, var(--a-border-default))"
              />
            )}
          </svg>
@@ -168,7 +168,7 @@ export const FollowYear = () => {
  return (
    <div className="min-h-96">
      <MonthPicker {...monthpickerProps} onYearChange={customYearChange}>
-        <MonthPicker.Input {...inputProps} label="Velg månede" />
+        <MonthPicker.Input {...inputProps} label="Velg måned" />
      </MonthPicker>
      {selectedMonth && <div className="pt-4">{selectedMonth.getMonth()}</div>}
    </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}
@@ -168,10 +168,6 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
      [filteredOptions.length, virtualFocus, onChange, toggleIsListOpen]
    );

-    const onBlur = () => {
-      virtualFocus.moveFocusToTop();
-    };
-
    return (
      <input
        {...rest}
@@ -181,7 +177,6 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
        onChange={onChangeHandler}
        type="text"
        role="combobox"
-        onBlur={onBlur}
        onKeyUp={handleKeyUp}
        onKeyDown={handleKeyDown}
        aria-controls={filteredOptionsUtil.getFilteredOptionsId(inputProps.id)}
@@ -1,5 +1,5 @@
-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";

@@ -38,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
@@ -58,7 +58,7 @@ export const Description = () => {
  );
 };

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

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

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

-export const MaxLength = () => {
+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}
@@ -120,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
@@ -143,7 +155,7 @@ export const Readonly = () => {
  );
 };

-export const AutoScrollbar = (props) => (
+export const AutoScrollbar: StoryFn<typeof Textarea> = (props) => (
  <div
    style={{
      border: "1px solid lightGreen",
@@ -156,12 +168,12 @@ export const AutoScrollbar = (props) => (
      <h1>Header</h1>
    </div>
    <Textarea
+      {...props}
      resize
      label="Textarea with autoScrollbar"
      description="Description"
      maxLength={30}
      UNSAFE_autoScrollbar
-      {...props}
    />
    <div style={{ border: "1px dashed gray" }}>
      <Button>Send</Button>
@@ -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,7 +1,9 @@
-import { FileIcon } from "@navikt/aksel-icons";
 import { Meta, StoryFn } from "@storybook/react";
 import React, { useRef, useState } from "react";
+import { FileIcon } from "@navikt/aksel-icons";
 import { BodyLong, Button, Heading, Tooltip } from "..";
+import { Checkbox, CheckboxGroup } from "../form/checkbox";
+import { VStack } from "../layout/stack";
 import Modal from "./Modal";

 const meta: Meta<typeof Modal> = {
@@ -203,6 +205,51 @@ export const WithTooltip: StoryFn = () => {
  );
 };

+export const WithSrOnlyElement: StoryFn = () => (
+  <Modal open width={300} header={{ heading: "Simple header" }}>
+    <Modal.Body>
+      <VStack gap="16">
+        <BodyLong>
+          The modal body needs to have position:relative to make sr-only
+          elements position themselves correctly when the modal body is
+          overflowing (i.e. has a scrollbar).
+        </BodyLong>
+        <BodyLong>
+          If the modal body (and other parents of the sr-only element inside the
+          modal body) does not have position:relative (or equivalent), the
+          sr-only element is pushed downwards relative to the height of the
+          overflowing content.
+        </BodyLong>
+        <BodyLong>
+          In the most extreme cases, an additional scrollbar appears bc. the
+          dialog element (parent of modal body) starts overflowing. (We have
+          overflow:auto on the dialog element in case you are on a small screen
+          and header/footer has a lot of content.)
+        </BodyLong>
+        <BodyLong>Example: CheckboxGroup with a hidden legend:</BodyLong>
+        <CheckboxGroup legend="What fruits do you like?" hideLegend>
+          <Checkbox>Banana</Checkbox>
+          <Checkbox>Apple</Checkbox>
+          <Checkbox>Orange</Checkbox>
+          <Checkbox>Pear</Checkbox>
+        </CheckboxGroup>
+        <BodyLong>
+          Try to remove position:relative from the modal body and see what
+          happens. (Use DevTools to find the legend element.) You might need to
+          make the viewport shorter to get the full effect (double scrollbar).
+        </BodyLong>
+        <BodyLong>
+          Note: The large amount of gap has been added on purpose to force
+          overflow.
+        </BodyLong>
+      </VStack>
+    </Modal.Body>
+    <Modal.Footer>
+      <Button variant="secondary">Dummy button</Button>
+    </Modal.Footer>
+  </Modal>
+);
+
 export const ChromaticViewportTesting: StoryFn = () => (
  <div id="modal-story-wrapper" style={{ width: "100vw", height: "100vh" }}>
    <style>{`#storybook-root { padding: 0 !important }`}</style>
@@ -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;
  }
 }
@@ -1,7 +1,7 @@
-import React, { forwardRef, useState } from "react";
 import cl from "clsx";
-import { BodyLong } from "../typography";
+import React, { forwardRef, useState } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
+import { BodyLong } from "../typography";

 export interface ReadMoreProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -15,17 +15,17 @@ export interface ReadMoreProps
  header: React.ReactNode;
  /**
   * Opens component if 'true', closes if 'false'
-   * Using this props removes automatic control of open-state
+   * Using this prop removes automatic control of open-state
   */
  open?: boolean;
  /**
-   * Defaults the accordion to opened state
+   * Initially open
   * @default false
   */
  defaultOpen?: boolean;
  /**
   * Changes fontsize for content
-   * @default false
+   * @default medium
   */
  size?: "medium" | "small";
 }
@@ -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>
@@ -179,6 +179,15 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(

      const handleResize = () => {
        renders.current = 0;
+
+        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;
+        }
+
        syncHeightWithFlushSync();
      };

@@ -223,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
@@ -231,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.
-            overflow: state.overflow && !autoScrollbar ? "hidden" : undefined,
-            ...style,
-          }}
+          style={mainStyle}
          {...other}
          className={className}
        />
@@ -1,5 +1,15 @@
 # @navikt/ds-tailwind

+## 5.11.5
+
+## 5.11.4
+
+## 5.11.3
+
+## 5.11.2
+
+## 5.11.1
+
 ## 5.11.0

 ## 5.10.4
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tailwind",
-  "version": "5.11.0",
+  "version": "5.11.5",
  "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.11.0",
+    "@navikt/ds-tokens": "^5.11.5",
    "@types/jest": "^29.0.0",
    "color": "4.2.3",
    "jest": "^29.0.0",
@@ -1,5 +1,15 @@
 # @navikt/ds-tokens

+## 5.11.5
+
+## 5.11.4
+
+## 5.11.3
+
+## 5.11.2
+
+## 5.11.1
+
 ## 5.11.0

 ## 5.10.4
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "5.11.0",
+  "version": "5.11.5",
  "description": "Design-tokens for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -35,7 +35,8 @@

 aksel.nav.no/
 ├── website # NEXT.JS app (v13)
-└── website/sanity # Sanity CMS-app (v3)
+├── website/sanity # Sanity CMS-app (v3)
+└── playroom # aksel.nav.no/sandbox

 ```

@@ -16,11 +16,11 @@
    "playroom"
  ],
  "dependencies": {
-    "@navikt/aksel-icons": "^5.11.0",
-    "@navikt/ds-css": "^5.11.0",
-    "@navikt/ds-react": "^5.11.0",
-    "@navikt/ds-tailwind": "^5.11.0",
-    "@navikt/ds-tokens": "^5.11.0"
+    "@navikt/aksel-icons": "^5.11.5",
+    "@navikt/ds-css": "^5.11.5",
+    "@navikt/ds-react": "^5.11.5",
+    "@navikt/ds-tailwind": "^5.11.5",
+    "@navikt/ds-tokens": "^5.11.5"
  },
  "devDependencies": {
    "prettier-plugin-tailwindcss": "^0.2.3"
@@ -200,16 +200,16 @@ export const StorybookIcon = ({ ...props }) => (
  </svg>
 );

-export const CodeSandboxLogo = ({ ...props }) => (
+export const CodeSandboxLogo = ({ title, ...props }) => (
  <svg
    width="24"
    height="24"
    fill="none"
    viewBox="8 3 24 24"
-    aria-hidden="true"
    focusable="false"
    {...props}
  >
+    <title>{title}</title>
    <path
      fill="currentColor"
      d="M20.54 25a.681.681 0 00.158-.074l6.174-3.69c.734-.438 1.128-.885 1.128-2.084v-6.444c0-.248-.016-.447-.063-.629l-7.397 4.434zm-8.477-12.921l7.397 4.434V25a.514.514 0 01-.15-.074l-6.182-3.69c-.726-.438-1.128-.885-1.128-2.084v-6.444c0-.248.016-.447.063-.629zM20.004 7c.443 0 .9.143 1.359.406l.068.04 5.567 3.326c.155.088.284.177.394.282l.04.04-7.428 4.426-7.436-4.425c.11-.109.233-.198.378-.286l.063-.037 4.07-2.442h.002l1.488-.883c.434-.262.868-.415 1.296-.443l.071-.003z"
@@ -1,5 +1,5 @@
-import { getKey } from "@/sb-util";
 import type { Meta, StoryObj } from "@storybook/react";
+import { getKey } from "@/sb-util";
 import CodeExample from "./CodeExamples";

 const meta = {
@@ -29,6 +29,7 @@ export const Designsystem: Story = {
            title: "title",
            index: 1,
            sandboxBase64: "fakebase64",
+            sandboxEnabled: true,
          },
          {
            _key: getKey(),
@@ -1,40 +1,43 @@
-import SnippetLazy from "@/cms/code-snippet/SnippetLazy";
-import ErrorBoundary from "@/error-boundary";
-import { CodeExamplesT } from "@/types";
-import { capitalize } from "@/utils";
+import cl from "clsx";
+import { useRouter } from "next/router";
+import { useEffect, useRef, useState } from "react";
 import {
+  CodeIcon,
  ExternalLinkIcon,
  LaptopIcon,
  MobileSmallIcon,
 } from "@navikt/aksel-icons";
 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 SnippetLazy from "@/cms/code-snippet/SnippetLazy";
+import ErrorBoundary from "@/error-boundary";
+import { CodeExamplesT } from "@/types";
 import { CodeSandbox } from "./parts/CodeSandbox";
+import { Sandbox } from "./parts/Sandbox";

-const iframePadding = 192;
-const iframeId = "example-iframe";
+const iframePaddingNormal = 192;
+const iframePaddingCompact = 60;

 type CodeExamplesProps = {
  node: CodeExamplesT;
 };

 const ComponentExamples = ({ node }: CodeExamplesProps) => {
-  const [activeExample, setActiveExample] = useState(null);
+  const [activeExample, setActiveExample] = useState("");
  const [frameState, setFrameState] = useState(300);
  const [unloaded, setUnloaded] = useState(true);
+  const [showCode, setShowCode] = useState(!node.compact);
+
  const router = useRouter();
  const iframeRef = useRef<HTMLIFrameElement>(null);

  const handleExampleLoad = () => {
+    const iframePadding = node.compact
+      ? iframePaddingCompact
+      : iframePaddingNormal;
    let attempts = 0;
+
    const waitForExampleContentToRender = setInterval(() => {
-      const exampleIframe = document.getElementById(
-        iframeId
-      ) as HTMLIFrameElement;
-      const exampleIframeDOM = exampleIframe?.contentDocument;
+      const exampleIframeDOM = iframeRef.current?.contentDocument;

      let exampleWrapper: HTMLElement;

@@ -62,46 +65,34 @@ const ComponentExamples = ({ node }: CodeExamplesProps) => {
  };

  useEffect(() => {
-    node?.dir?.filer?.[0]?.navn && setActiveExample(node.dir.filer[0].navn);
+    node.dir?.filer?.[0]?.navn && setActiveExample(node.dir.filer[0].navn);
  }, [node]);

  useEffect(() => {
-    const hash = router.asPath.split("#")[1];
+    const hash = router.asPath.split("#")[1] || "";
+    const prefix = `${node.dir.title.toLowerCase()}demo-`;
+    const navn = hash.replace(prefix, "");
    if (
-      hash &&
-      hash.startsWith(`${node.dir.title.toLowerCase()}demo-`) &&
-      node.dir.filer.some(
-        (f) =>
-          f.navn === hash.replace(`${node.dir.title.toLowerCase()}demo-`, "")
-      )
+      hash.startsWith(prefix) &&
+      node.dir.filer.some((f) => f.navn === navn)
    ) {
-      setActiveExample(
-        hash.replace(`${node.dir.title.toLowerCase()}demo-`, "") as string
-      );
+      setActiveExample(navn);
    }
  }, [router, node]);

-  const fixName = (str: string) =>
-    capitalize(
-      str
-        .replace(/[^\wæøå]|_/g, " ")
-        .replace(/\s+/g, " ")
-        .trim()
-    ) ?? str;
-
  if (!node.dir?.filer || node.dir.filer.length === 0) {
    return null;
  }

-  const active = activeExample ?? node?.dir?.filer?.[0]?.navn;
+  const active = activeExample || node.dir?.filer?.[0]?.navn;
  const demoVariant = node.dir?.variant;

  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}
@@ -117,121 +108,123 @@ const ComponentExamples = ({ node }: CodeExamplesProps) => {
                  );
                }}
              >
-                {fixName(fil.title)}
+                {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
+                  ref={iframeRef}
+                  src={`/${demoVariant}/${node.dir.title}/${fil.navn}`}
+                  height={frameState}
+                  onLoad={handleExampleLoad}
+                  aria-label={`${node.dir?.title} ${fil.title} eksempel`}
+                  title="Demo"
                  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>
+                />
+                {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>

+                  <HStack gap="2">
+                    <Button
+                      variant="tertiary-neutral"
+                      size="small"
+                      icon={<CodeIcon aria-hidden />}
+                      onClick={() => setShowCode(!showCode)}
+                    >
+                      {showCode ? "Skjul" : "Vis"} kode
+                    </Button>
+                    {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>
+
+              {showCode && (
                <SnippetLazy
                  node={{
                    code: { code: fil.innhold.trim(), language: "tsx" },
                  }}
                />
-              </>
-            )}
-          </div>
-        );
-      })}
+              )}
+            </>
+          )}
+        </div>
+      ))}
    </div>
  );
 };
@@ -1,6 +1,6 @@
-import { CodeSandboxLogo } from "@/assets/Icons";
-import { Button } from "@navikt/ds-react";
 import { getParameters } from "codesandbox/lib/api/define";
+import { Button } from "@navikt/ds-react";
+import { CodeSandboxLogo } from "@/assets/Icons";

 const indexTsx = `import React from 'react';
 import ReactDOM from 'react-dom/client';
@@ -20,6 +20,7 @@ export const CodeSandbox = ({ code }: { code: string }) => {
  const parameters = getParameters({
    files: {
      "package.json": {
+        // @ts-expect-error
        content: {
          dependencies: {
            react: "latest",
@@ -28,7 +29,7 @@ export const CodeSandbox = ({ code }: { code: string }) => {
            "@navikt/ds-css": "latest",
            "@navikt/aksel-icons": "latest",
          },
-        } as any,
+        },
        isBinary: false,
      },
      "App.tsx": {
@@ -58,9 +59,8 @@ export const CodeSandbox = ({ code }: { code: string }) => {
      <Button
        variant="tertiary-neutral"
        size="small"
-        aria-label="Codesandbox"
        type="submit"
-        icon={<CodeSandboxLogo aria-hidden />}
+        icon={<CodeSandboxLogo title="CodeSandbox" />}
      />
    </form>
  );
@@ -1,7 +1,10 @@
 import { PencilIcon } from "@navikt/aksel-icons";
 import { Button } from "@navikt/ds-react";
+import { useMedia } from "@/hooks/useMedia";

 export const Sandbox = ({ code }: { code: string }) => {
+  const showLabel = useMedia("(min-width: 1024px)");
+
  return (
    <Button
      href={`/sandbox/index.html?code=${code}`}
@@ -10,9 +13,11 @@ export const Sandbox = ({ code }: { code: string }) => {
      as="a"
      variant="tertiary-neutral"
      size="small"
-      icon={<PencilIcon aria-hidden fontSize="1.5rem" />}
+      icon={
+        <PencilIcon aria-hidden={showLabel} title={!showLabel && "Sandbox"} />
+      }
    >
-      Sandbox
+      {showLabel && "Sandbox"}
    </Button>
  );
 };
@@ -1,9 +1,9 @@
-import ErrorBoundary from "@/error-boundary";
-import { CodeSnippetT } from "@/types";
-import { ChevronRightIcon, TerminalIcon } from "@navikt/aksel-icons";
-import { CopyButton, Label } from "@navikt/ds-react";
 import cl from "clsx";
 import { Highlight, Language } from "prism-react-renderer";
+import { ChevronRightIcon, TerminalIcon } from "@navikt/aksel-icons";
+import { CopyButton, Label } from "@navikt/ds-react";
+import ErrorBoundary from "@/error-boundary";
+import { CodeSnippetT } from "@/types";
 import theme from "./theme";

 type CodeSnippetProps = {
@@ -1,25 +1,25 @@
-html {
+html:has(.globalstyles) {
  scrollbar-gutter: stable;
 }

-code,
-pre {
+.globalstyles code,
+.globalstyles pre {
  @apply !font-mono;
 }

 /* stylelint-disable-next-line aksel/no-class-override */
-.navds-heading + .navds-heading {
+.globalstyles .navds-heading + .navds-heading {
  margin-top: 0;
 }

 /* stylelint-disable-next-line aksel/no-class-override */
-.navds-alert code {
+.globalstyles .navds-alert code {
  color: var(--a-red-500);
  background-color: transparent;
  padding: 0;
 }

-p {
+.globalstyles p {
  @apply max-w-text;
 }

@@ -27,21 +27,21 @@ p {
  @apply max-w-none;
 }

-a {
+:where(.globalstyles) a {
  color: inherit;
  text-decoration: inherit;
  text-underline-offset: 2px;
  text-decoration-thickness: 0.0625em;
 }

-[id] {
+.globalstyles [id] {
  scroll-margin-block: 5rem;
 }

 /* Improves rendering of images for chrome on Windows */
 /* stylelint-disable-next-line media-feature-name-no-vendor-prefix */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
-  img {
+  .globalstyles img {
    transform: translateZ(0);
    /* stylelint-disable-next-line value-no-vendor-prefix */
    image-rendering: -webkit-optimize-contrast !important;
@@ -51,7 +51,7 @@ a {
 /* Unset for Safari 11+ */
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
-    img {
+    .globalstyles img {
      image-rendering: unset !important;
    }
  }
@@ -82,3 +82,8 @@ p.override-text-no-max {
 [id] > code > .inline-code-amp {
  display: none;
 }
+
+/* Not in tailwindcss yet: https://github.com/tailwindlabs/tailwindcss/discussions/11486 */
+.text-wrap-balance {
+  text-wrap: balance;
+}
@@ -340,6 +340,7 @@ export interface CodeExamplesT {
    metadata?: CodeExampleSchemaT["metadata"];
    variant: CodeExampleSchemaT["variant"];
  };
+  compact?: boolean;
 }

 export type PropTableT = ArrayObjectT<{
@@ -1,3 +1,5 @@
+import cl from "clsx";
+import { ComponentType, useEffect, useState } from "react";
 import {
  LaptopIcon,
  MobileIcon,
@@ -6,8 +8,6 @@ import {
  TabletIcon,
 } from "@navikt/aksel-icons";
 import { HStack } from "@navikt/ds-react";
-import cl from "clsx";
-import { ComponentType, useEffect, useState } from "react";
 import styles from "./examples.module.css";

 type withDsT = {
@@ -75,7 +75,6 @@ export const withDsExample = (
        })}
        style={{ background: getBg(variant) }}
      >
-        <style global>{`html {scrollbar-gutter: unset;}`}</style>
        {showBreakpoints && <BreakpointText />}
        <div
          id="ds-example"
@@ -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);
 }

@@ -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]];

@@ -29,7 +29,7 @@
    "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",
@@ -43,7 +43,7 @@
    "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",
@@ -1,18 +1,17 @@
-import Footer from "@/layout/footer/Footer";
-import Header from "@/layout/header/Header";
-import { AmplitudeEvents, amplitude } from "@/logging";
+import { useEffect } from "react";
 import { BugIcon } from "@navikt/aksel-icons";
 import {
  BodyShort,
  Box,
-  HGrid,
  Heading,
  Link,
  List,
  Page,
  VStack,
 } from "@navikt/ds-react";
-import { useEffect } from "react";
+import Footer from "@/layout/footer/Footer";
+import Header from "@/layout/header/Header";
+import { AmplitudeEvents, amplitude } from "@/logging";

 export default function NotFound() {
  useEffect(() => {
@@ -22,89 +21,48 @@ export default function NotFound() {
  }, []);

  return (
-    <Page data-aksel-template="404-v1" footer={<Footer />} id="vk-notFoundId">
+    <Page data-aksel-template="404-v2" footer={<Footer />} id="vk-notFoundId">
      <Header />
      <Page.Block as="main" width="xl" gutters>
        <Box paddingBlock="20 16">
-          <HGrid gap="12" columns={{ sm: 1, md: 2 }}>
-            <VStack gap="16">
-              <VStack gap="12" align="start">
-                <div>
-                  <Heading level="1" size="large" spacing>
-                    Beklager, vi fant ikke siden
-                  </Heading>
-                  <BodyShort>
-                    Denne siden kan være slettet eller flyttet, eller det er en
-                    feil i lenken.
-                  </BodyShort>
-                  <List>
-                    <List.Item>Bruk gjerne søket eller menyen</List.Item>
-                    <List.Item>
-                      <Link href="/">Gå til forsiden</Link>
-                    </List.Item>
-                  </List>
-                </div>
-                <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-%20404]">
-                  <BugIcon aria-hidden />
-                  Meld gjerne fra om at lenken ikke virker
-                </Link>
-              </VStack>
-
+          <VStack gap="16">
+            <VStack gap="12" align="start">
              <div>
-                <Heading level="2" size="large" spacing>
-                  Page not found
+                <Heading level="1" size="large" spacing>
+                  Beklager, vi fant ikke siden
                </Heading>
-                <BodyShort spacing>
-                  The page you requested cannot be found.
-                </BodyShort>
                <BodyShort>
-                  Go to the <Link href="/">front page</Link>, or use one of the
-                  links in the menu.
+                  Denne siden kan være slettet eller flyttet, eller det er en
+                  feil i lenken.
                </BodyShort>
+                <List>
+                  <List.Item>Bruk gjerne søket eller menyen</List.Item>
+                  <List.Item>
+                    <Link href="/">Gå til forsiden</Link>
+                  </List.Item>
+                </List>
              </div>
+              <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-%20404]">
+                <BugIcon aria-hidden />
+                Meld gjerne fra om at lenken ikke virker
+              </Link>
            </VStack>
-            <StatusSvg />
-          </HGrid>
+
+            <div>
+              <Heading level="2" size="large" spacing>
+                Page not found
+              </Heading>
+              <BodyShort spacing>
+                The page you requested cannot be found.
+              </BodyShort>
+              <BodyShort>
+                Go to the <Link href="/">front page</Link>, or use one of the
+                links in the menu.
+              </BodyShort>
+            </div>
+          </VStack>
        </Box>
      </Page.Block>
    </Page>
  );
 }
-
-function StatusSvg() {
-  return (
-    <svg
-      width="min(100%, 500px)"
-      viewBox="0 0 550 340"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-labelledby="404-illustration"
-    >
-      <title id="404-illustration">404 - fant ikke siden</title>
-      <path
-        d="M60.0927 243.567L95.542 245.427L96.7806 221.769C97.1476 214.76 97.7964 206.556 98.7272 197.16C99.8768 187.775 100.745 179.584 101.33 172.585L100.017 172.516C97.0704 178.512 94.0083 184.612 90.831 190.815C87.6652 196.799 84.3842 202.887 80.9881 209.079L60.0927 243.567ZM90.8631 334.801L93.3058 288.143L4.68237 283.493L6.74662 244.063L84.0445 125.551L154.287 129.236L148.06 248.182L170.38 249.353L168.143 292.069L145.823 290.898L143.381 337.556L90.8631 334.801Z"
-        stroke="var(--a-border-default)"
-        strokeWidth="2.19124"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeDasharray="6.57 8.76"
-      />
-      <path
-        d="M265.703 258.53C242.695 258.53 223.96 249.317 209.498 230.891C195.255 212.246 188.133 185.046 188.133 149.291C188.133 113.536 195.255 86.7747 209.498 69.0069C223.96 51.0198 242.695 42.0263 265.703 42.0263C288.711 42.0263 307.337 51.0198 321.58 69.0069C336.042 86.994 343.273 113.755 343.273 149.291C343.273 185.046 336.042 212.246 321.58 230.891C307.337 249.317 288.711 258.53 265.703 258.53ZM265.703 215.097C270.085 215.097 274.139 213.452 277.864 210.162C281.589 206.871 284.548 200.51 286.739 191.078C288.93 181.646 290.026 167.717 290.026 149.291C290.026 130.865 288.93 117.155 286.739 108.162C284.548 98.9489 281.589 92.9166 277.864 90.065C274.139 86.994 270.085 85.4585 265.703 85.4585C261.321 85.4585 257.267 86.994 253.542 90.065C249.817 92.9166 246.858 98.9489 244.667 108.162C242.476 117.155 241.38 130.865 241.38 149.291C241.38 167.717 242.476 181.646 244.667 191.078C246.858 200.51 249.817 206.871 253.542 210.162C257.267 213.452 261.321 215.097 265.703 215.097Z"
-        stroke="var(--a-border-default)"
-        strokeWidth="2.19124"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeDasharray="6.57 8.76"
-      />
-      <path
-        d="M429.98 129.301L465.429 127.441L464.191 103.783C463.824 96.7733 463.613 88.5473 463.557 79.105C463.721 69.6512 463.728 61.4137 463.58 54.3925L462.267 54.4614C459.962 60.7326 457.554 67.1192 455.042 73.621C452.518 79.9038 449.891 86.3018 447.16 92.8151L429.98 129.301ZM470.108 216.815L467.666 170.156L379.042 174.806L376.978 135.376L441.478 9.42432L511.72 5.7392L517.947 124.686L540.267 123.515L542.503 166.23L520.183 167.401L522.626 214.06L470.108 216.815Z"
-        stroke="var(--a-border-default)"
-        strokeWidth="2.19124"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeDasharray="6.57 8.76"
-      />
-    </svg>
-  );
-}
@@ -1,31 +1,99 @@
+import { useEffect, useState } from "react";
+import {
+  BodyShort,
+  Box,
+  Heading,
+  Link,
+  List,
+  Page,
+  VStack,
+} from "@navikt/ds-react";
+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 { useEffect } from "react";

-function Page() {
+function ErrorPage({ statusCode }) {
+  const [isClient, setIsClient] = useState(false);
+
  useEffect(() => {
    amplitude.track(AmplitudeEvents.error, {
      side: window.location.pathname,
    });
+    setIsClient(true);
  }, []);

  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-v2" 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{" "}
+                    <Link href="#" onClick={() => location.reload()}>
+                      laste siden på nytt
+                    </Link>
+                  </List.Item>
+                  <List.Item>
+                    {isClient && history.length > 1 ? (
+                      <Link href="#" onClick={() => history.back()}>
+                        gå tilbake til forrige side
+                      </Link>
+                    ) : (
+                      "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,10 +1,10 @@
+import { AppProps } from "next/app";
+import { useEffect } from "react";
+import { hotjar } from "react-hotjar";
 import { useHashScroll } from "@/hooks/useHashScroll";
 import { SanityDocIdContext } from "@/hooks/useSanityDocId";
 import { useAmplitudeInit } from "@/logging";
 import { BaseSEO } from "@/web/seo/BaseSEO";
-import { AppProps } from "next/app";
-import { useEffect } from "react";
-import { hotjar } from "react-hotjar";
 import "../components/styles/index.css";

 function App({ Component, pageProps, router }: AppProps) {
@@ -18,13 +18,23 @@ function App({ Component, pageProps, router }: AppProps) {
    hotjar.initialize(148751, 6);
  }, []);

+  const useGlobalStyles =
+    !router.pathname.startsWith("/templates/") &&
+    !router.pathname.startsWith("/eksempler/");
+
  return (
    <>
      <BaseSEO path={router.asPath} />
      <SanityDocIdContext.Provider
        value={{ id: pageProps?.id ?? pageProps?.page?._id }}
      >
-        <Component {...pageProps} />
+        {useGlobalStyles ? (
+          <div className="globalstyles">
+            <Component {...pageProps} />
+          </div>
+        ) : (
+          <Component {...pageProps} />
+        )}
      </SanityDocIdContext.Provider>
    </>
  );
@@ -1,24 +1,99 @@
-import { AkselCubeStatic } from "@/web/aksel-cube/AkselCube";
-import { BodyLong, Heading } from "@navikt/ds-react";
-import React from "react";
+import { useEffect, useState } from "react";
+import {
+  BodyShort,
+  Box,
+  Heading,
+  Link,
+  List,
+  Page,
+  VStack,
+} from "@navikt/ds-react";
+import Footer from "@/layout/footer/Footer";
+import Header from "@/layout/header/Header";
+import { AmplitudeEvents, amplitude } from "@/logging";
+
+function ErrorPage({ statusCode }) {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    amplitude.track(AmplitudeEvents.error, {
+      side: window.location.pathname,
+    });
+    setIsClient(true);
+  }, []);

-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-v2" 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{" "}
+                    <Link href="#" onClick={() => location.reload()}>
+                      laste siden på nytt
+                    </Link>
+                  </List.Item>
+                  <List.Item>
+                    {isClient && history.length > 1 ? (
+                      <Link href="#" onClick={() => history.back()}>
+                        gå tilbake til forrige side
+                      </Link>
+                    ) : (
+                      "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;
@@ -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",
 };
 ```
@@ -1,6 +1,6 @@
-import { withDsExample } from "@/web/examples/withDsExample";
-import { Accordion, Button } from "@navikt/ds-react";
 import { useState } from "react";
+import { Accordion, Button } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  const [open, setOpen] = useState(false);
@@ -33,6 +33,7 @@ const Example = () => {
  );
 };

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

 /* Storybook story */
@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Accordion } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  return (
@@ -32,6 +32,7 @@ const Example = () => {
  );
 };

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

 /* Storybook story */
@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Accordion } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  return (
@@ -32,6 +32,7 @@ const Example = () => {
  );
 };

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

 /* Storybook story */
@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Accordion } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  return (
@@ -51,6 +51,7 @@ const Example = () => {
  );
 };

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

 /* Storybook story */
@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Accordion } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  return (
@@ -32,6 +32,7 @@ const Example = () => {
  );
 };

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

 /* Storybook story */
@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Alert } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  return (
@@ -18,6 +18,7 @@ const Example = () => {
  );
 };

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

 /* Storybook story */
@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Alert } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  return (
@@ -7,6 +7,7 @@ const Example = () => {
  );
 };

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

 /* Storybook story */
@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Alert } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  return (
@@ -22,6 +22,7 @@ const Example = () => {
  );
 };

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

 /* Storybook story */
@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Alert } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  return (
@@ -11,6 +11,7 @@ const Example = () => {
  );
 };

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

 /* Storybook story */
@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Alert } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  return (
@@ -22,6 +22,7 @@ const Example = () => {
  );
 };

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

 /* Storybook story */
@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Alert } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  return (
@@ -24,6 +24,7 @@ const Example = () => {
  );
 };

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

 /* Storybook story */
@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Alert, Heading } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  return (
@@ -14,6 +14,7 @@ const Example = () => {
  );
 };

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

 /* Storybook story */
@@ -1,6 +1,6 @@
-import { withDsExample } from "@/web/examples/withDsExample";
-import { Alert, AlertProps } from "@navikt/ds-react";
 import React from "react";
+import { Alert, AlertProps } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  return (
@@ -41,6 +41,7 @@ const AlertWithCloseButton = ({
  );
 };

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

 /* Storybook story */
@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Alert, VStack } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  return (
@@ -14,6 +14,7 @@ const Example = () => {
  );
 };

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

 /* Storybook story */
@@ -1,10 +1,11 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Alert } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";

 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 */
@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Alert } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  return (
@@ -9,6 +9,7 @@ const Example = () => {
  );
 };

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

 /* Storybook story */
@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { BodyLong, VStack } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  const lorem =
@@ -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 */
@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { BodyLong, VStack } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  const lorem =
@@ -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 */
@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { BodyLong, VStack } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  const lorem =
@@ -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 */
@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { BodyLong, VStack } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  const lorem =
@@ -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 */
@@ -1,10 +1,11 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { BodyLong } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";

 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 */
@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { BodyLong, VStack } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  const lorem =
@@ -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 */
@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { BodyLong } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  const lorem =
@@ -17,6 +17,7 @@ const Example = () => {
  );
 };

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

 /* Storybook story */
@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { BodyLong } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  const lorem =
@@ -13,6 +13,7 @@ const Example = () => {
  );
 };

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

 /* Storybook story */
@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { BodyLong } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  const lorem =
@@ -17,6 +17,7 @@ const Example = () => {
  );
 };

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

 /* Storybook story */
@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { BodyShort, VStack } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  const lorem = "Du må gjøre en filtrering for å se brukere i listen.";
@@ -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 */
@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { BodyShort, VStack } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  const lorem = "Du må gjøre en filtrering for å se brukere i listen.";
@@ -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 */
@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { BodyShort, VStack } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  const lorem = "Du må gjøre en filtrering for å se brukere i listen.";
@@ -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 */
@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { BodyShort, VStack } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  const lorem = "Du må gjøre en filtrering for å se brukere i listen.";
@@ -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 */
@@ -1,10 +1,11 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { BodyShort } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";

 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 */
@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { BodyShort, VStack } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  const lorem = "Du må gjøre en filtrering for å se brukere i listen.";
@@ -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 */
@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { BodyShort } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  const lorem = "Du må gjøre en filtrering for å se brukere i listen.";
@@ -16,6 +16,7 @@ const Example = () => {
  );
 };

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

 /* Storybook story */
@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { BodyShort } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  const lorem = "Du må gjøre en filtrering for å se brukere i listen.";
@@ -12,6 +12,7 @@ const Example = () => {
  );
 };

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

 /* Storybook story */
@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { BodyShort } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  const lorem = "Du må gjøre en filtrering for å se brukere i listen.";
@@ -16,6 +16,7 @@ const Example = () => {
  );
 };

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

 /* Storybook story */
@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Button } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  return (
@@ -12,6 +12,7 @@ const Example = () => {
  );
 };

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

 /* Storybook story */
@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Button } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  return (
@@ -20,6 +20,7 @@ const Example = () => {
  );
 };

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

 /* Storybook story */
@@ -1,6 +1,6 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { PencilIcon } from "@navikt/aksel-icons";
 import { Button } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  return (
@@ -14,6 +14,7 @@ const Example = () => {
  );
 };

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

 /* Storybook story */
@@ -1,10 +1,11 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Button } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  return <Button loading>Loading</Button>;
 };

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

 /* Storybook story */
@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Button } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  return (
@@ -11,6 +11,7 @@ const Example = () => {
  );
 };

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

 /* Storybook story */
@@ -1,6 +1,6 @@
-import { withDsExample } from "@/web/examples/withDsExample";
-import { Button } from "@navikt/ds-react";
 import Link from "next/link";
+import { Button } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
  return (
@@ -10,6 +10,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]	180b6f7af8	Version Packages (#2560 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-12-13 09:42:44 +01:00
Ken	e77206da1a	🎨 Token for checkmark-circle (#2558 )	2023-12-13 09:28:58 +01:00
Julian Nymark	d66d90b326	🔥 fjerne illustration fra 404 (#2528 ) * 🐛 optimize SVG for illustration on 404 page (nginx 414) * 🔥 remove illustration from 404 templates * 🚀 new version of 404 template * 🎨 remove unnecessary HGrid on 404 template post illustration removal * 🔥 also remove the HGrid for the examples	2023-12-08 11:26:06 +01:00
Halvor Haugan	39f9bc34a9	5XX-mal: Lenker for reload og tilbake, fjern global styles (#2544 )	2023-12-08 09:57:48 +01:00
Ken	ba54a28f50	Text-wrap: balance på blog og god-praksis heading (#2548 ) * 🎉 Text-wrap: balance on headings * 💄 Formating	2023-12-08 09:53:43 +01:00
Ken	7b56ae3013	⬆️ Bump vite (#2549 ) * ⬆️ Bump vite * yarn lock-sync	2023-12-07 15:19:16 +01:00
github-actions[bot]andgithub-actions[bot]	874961ff7e	Version Packages (#2543 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-12-05 11:57:14 +01:00
Vegard Haugstvedt	df48236fc8	Fix issue where clicking Combobox.FilteredOptions after scrolling caused the wrong element to be selected (#2536 ) * This onBlur triggered when clicking items in FilteredOptions, causing virtual focus to be moved and the list to scroll to the top. Then, onPointerUp, we select the new element that has scrolled into position under the cursor. * Added changeset	2023-12-05 09:58:17 +01:00
Halvor Haugan	65cc6f425d	🐛 Modal: Hindre at elementer med sr-only posisjoneres feil (#2541 )	2023-12-05 09:06:58 +01:00
Ken	2d34691450	[Chromatic] Oppdatert chromatic + bruker turbosnap (#2533 ) * 🎨 Update chromatic * Testing turbosnap * La til config for chroamtic i workflow * Update .storybook/main.ts * 📝 Update readme for chromatic test	2023-12-05 08:38:38 +01:00
Halvor Haugan	094f2b1c2b	[aksel.nav.no] Justeringer i CodeExamples (#2530 ) Blant annet ny parameter "compact" som gjør at koden skjules som standard og forhåndsvisningen får mindre vertikal padding.	2023-12-04 12:44:02 +01:00
Halvor Haugan	fb1606d771	Fiks kodeeksempel "søk" på InternalHeader	2023-12-04 10:49:29 +01:00
Halvor Haugan	ab62211743	Desc på header-eksempel "brukermeny"	2023-12-04 10:32:59 +01:00
Ken	c3d9735ea7	[aksel.nav.no] ✨ MVP-Struktur for ny god-praksis (#2526 ) * ✨ Nytt gp oppsett * 🎨 Better structure * 🔥 Fjernet referenceinput * 🎨 bedre filterering av tags * 🚚 Flyttet gp documents * 🏷️ rename tags -> undertema * 🔥 fjernet comments * 🎨 låst til dev * 🎨 Bedre filtrering ved valg av undertema i tema * 🎨 Oppdatert artikkelmal * 🚚 Rename tags -> undetema * 🎨 Staging only for admins and devs * 🎨 opt-in visning av god-praksis felter * 🔥 Fjernet artikkelmal * 🚚 tsx -> ts * Rename label -> alias, fjernet undertema fra tema * 🚚 Endret fra dev->prod datasett for staging * ✅ Fikset sanitizeSlug normalize * 🎨 riktige sanity-field for artikkel * 🐛 Fikset publicationflow for staging * 🐛 Fikset console-warnings for API-versjon	2023-12-04 10:13:30 +01:00
Halvor Haugan	1f16bfc866	[aksel.nav.no] Justering av eksempler på InternalHeader (#2531 )	2023-12-01 09:50:27 +01:00
dependabot[bot]	b218be2908	⬆️ Bump @adobe/css-tools from 4.3.1 to 4.3.2 (#2532 ) Bumps [@adobe/css-tools](https://github.com/adobe/css-tools) from 4.3.1 to 4.3.2. - [Changelog](https://github.com/adobe/css-tools/blob/main/History.md) - [Commits](https://github.com/adobe/css-tools/commits) --- updated-dependencies: - dependency-name: "@adobe/css-tools" dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2023-12-01 09:12:41 +01:00
Halvor Haugan	190b9b7dba	Fiks Storybook (#2529 )	2023-11-30 11:36:57 +01:00
Halvor Haugan	cfd0b37906	📝 Korrigering av jsdoc på ReadMore (#2527 )	2023-11-29 15:23:22 +01:00
Halvor Haugan	9ed49b8a20	månede -> måned	2023-11-29 14:46:03 +01:00
Julian Nymark	39ff2c1809	🔨 new plugin for prettier (#2523 ) * 🔨 new plugin for prettier * 🔨 remove default configs	2023-11-29 14:21:05 +01:00
Halvor Haugan	4fcc83381d	Oppdater eksempler på InternalHeader (#2525 )	2023-11-29 14:19:27 +01:00
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