Version Packages (#1833 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
🎨 Breakpoints dokumentasjon og token-visning
2026-10-13 09:12:03 +00:00 · 2023-03-01 18:07:06 +01:00 · 2023-03-01 17:38:09 +01:00 · 2023-03-01 17:10:01 +01:00 · 2023-03-01 14:13:34 +01:00 · 2023-03-01 14:06:43 +01:00
328 changed files with 4723 additions and 1301 deletions
@@ -1,7 +1,7 @@
 name: Innspill til ikon
 description: Send inn innspill til ikon
-title: "[Innspill til ikon]: "
-labels: ["forespørsel 🥰", "nytt ✨"]
+title: "[Tilbakemelding på ikon]: "
+labels: ["forespørsel 🥰", "ikoner 🖼️"]
 assignees:
  - olejorgenbakken
 body:
@@ -0,0 +1,33 @@
+import { loadCsf } from "@storybook/csf-tools";
+import { readFileSync } from "fs";
+
+module.exports = (indexers) => {
+  const csfIndexer = async (fileName: string, opts) => {
+    const code = readFileSync(fileName, "utf-8").toString();
+    return loadCsf(code, { ...opts, fileName }).parse();
+  };
+
+  const exampleIndexer = async (fileName: string, opts) => {
+    let code = readFileSync(fileName, "utf-8").toString();
+
+    code = code.replace("export const args =", "const args =");
+
+    code += `\nexport default { title: "Eksempler/${fileName
+      .split("pages/eksempler/")[1]
+      .replace(".tsx", "")}"  };\n`;
+
+    return loadCsf(code, { ...opts, fileName }).parse();
+  };
+
+  return [
+    ...(indexers || []),
+    {
+      test: /(stories|story)\.[tj]sx?$/,
+      indexer: csfIndexer,
+    },
+    {
+      test: /pages\/eksempler\/|(".+")|(.+.tsx)$/,
+      indexer: exampleIndexer,
+    },
+  ];
+};
@@ -19,3 +19,13 @@
 .rowgap-wrap {
  flex-wrap: wrap;
 }
+
+.css-warning {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  border-radius: 6px;
+  padding: 1.5rem;
+  background-color: var(--a-surface-warning-subtle);
+  border: 1px solid var(--a-border-warning);
+}
@@ -1,4 +1,10 @@
+const storyIndexers = require("./indexer");
+
+const path = require("path");
+const { mergeConfig } = require("vite");
+
 module.exports = {
+  storyIndexers,
  devServer: {
    stats: "errors-only",
  },
@@ -7,6 +13,12 @@ module.exports = {
  stories: () => [
    "../@navikt/**/*.stories.@(js|jsx|ts|tsx|mdx)",
    "./*.stories.mdx",
+    ...(process.env.STORYBOOK_STORIES === "all"
+      ? [
+          "../aksel.nav.no/website/components/**/*.stories.tsx",
+          "../aksel.nav.no/website/pages/eksempler/**/*.tsx",
+        ]
+      : []),
  ],
  addons: [
    "@storybook/addon-a11y",
@@ -44,4 +56,26 @@ module.exports = {
    checkOptions: {},
    reactDocgen: false,
  },
+  async viteFinal(config) {
+    return mergeConfig(config, {
+      define: { "process.env": {} },
+      resolve: {
+        alias: [
+          /*
+          // Example
+          {
+            find: "@components",
+            replacement: path.resolve(__dirname, "./src/components"),
+          }, */
+          {
+            find: "components",
+            replacement: path.resolve(
+              __dirname,
+              "../aksel.nav.no/website/components"
+            ),
+          },
+        ],
+      },
+    });
+  },
 };
@@ -40,14 +40,24 @@ export const globalTypes = {
  },
 };

-export const withTheme = (StoryFn, context) => (
-  <div
-    data-theme={context.parameters.theme || context.globals.theme || "light"}
-    lang="no"
-    id="root"
-  >
-    <StoryFn />
-  </div>
-);
+export const withTheme = (StoryFn, context) => {
+  const foundCss =
+    context.parameters.fileName.startsWith("./@navikt") &&
+    document.querySelector('[data-vite-dev-id$="dist/tw.css"]');
+  return (
+    <div
+      data-theme={context.parameters.theme || context.globals.theme || "light"}
+      lang="no"
+      id="root"
+    >
+      {foundCss && (
+        <div className="css-warning">
+          OBS! Ser ut som CSS fra aksel.nav.no er lastet. Refresh siden!
+        </div>
+      )}
+      <StoryFn />
+    </div>
+  );
+};

 export const decorators = [withTheme];
@@ -1,5 +1,25 @@
 # @navikt/ds-codemod

+## 2.5.0
+
+## 2.4.3
+
+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
+## 2.4.1
+
+## 2.4.0
+
+## 2.3.1
+
+## 2.3.0
+
+## 2.2.0
+
 ## 2.1.7

 ## 2.1.6
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-codemod",
-  "version": "2.1.7",
+  "version": "2.5.0",
  "description": "Aksel codemods for NAVs designsystem",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -39,8 +39,8 @@
    "build-pict": "svgr --silent --index-template index-template.js --out-dir src/pictograms pictograms"
  },
  "dependencies": {
-    "@navikt/ds-icons": "^2.1.7",
-    "@navikt/ds-react": "^2.1.7",
+    "@navikt/ds-icons": "^2.5.0",
+    "@navikt/ds-react": "^2.5.0",
    "clsx": "^1.1.1"
  },
  "devDependencies": {
@@ -1,5 +1,49 @@
 # @navikt/ds-css

+## 2.5.0
+
+## 2.4.3
+
+### Patch Changes
+
+- [`f962bc781`](https://github.com/navikt/aksel/commit/f962bc7816027c24e334d9754c3e07cda951cf56) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset disabled-opacity bug i select for Chrome
+
+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
+## 2.4.1
+
+## 2.4.0
+
+### Minor Changes
+
+- [#1807](https://github.com/navikt/aksel/pull/1807) [`70eeb24b3`](https://github.com/navikt/aksel/commit/70eeb24b38ac871c7f2e31e1621b949669c401b6) Thanks [@kschieren](https://github.com/kschieren)! - Added List component
+
+## 2.3.1
+
+### Patch Changes
+
+- [`241b2e678`](https://github.com/navikt/aksel/commit/241b2e678f1f40909e2d36fe095dcbce8673f174) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset feil bruk av fallback-tokens i textarea, timeline
+
+## 2.3.0
+
+### Minor Changes
+
+- [#1813](https://github.com/navikt/aksel/pull/1813) [`7702c6527`](https://github.com/navikt/aksel/commit/7702c65275a4d86a8260852d091e6dd4cfe9217c) Thanks [@ingfo](https://github.com/ingfo)! - Fiksa sentrering av tekst i Select i Firefox
+
+### Patch Changes
+
+- [`51b62cca7`](https://github.com/navikt/aksel/commit/51b62cca7b857e92669cd0b09e620b131faf80e5) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Select small 34px høyde -> 32px
+
+## 2.2.0
+
+### Minor Changes
+
+- [#1789](https://github.com/navikt/aksel/pull/1789) [`c0929a534`](https://github.com/navikt/aksel/commit/c0929a534dc8effece5435f8be550cb7931a52b1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Button og ToggleGroup har nå en neutral-variant, oppdatert neutral-tokens
+
 ## 2.1.7

 ## 2.1.6
@@ -14,7 +14,7 @@
  background: transparent;
  cursor: pointer;
  border: none;
-  border-bottom: 2px solid var(--ac-accordion-header-border, var(--a-border-strong));
+  border-bottom: 2px solid var(--ac-accordion-header-border, var(--a-border-divider));
 }

 .navds-accordion__header:focus {
@@ -24,7 +24,7 @@

 .navds-accordion__header:hover {
  color: var(--ac-accordion-header-text-hover, var(--a-text-action-on-action-subtle));
-  border-color: var(--ac-accordion-header-border-hover, var(--a-border-strong));
+  border-color: var(--ac-accordion-header-border-hover, var(--a-border-default));
 }

 .navds-accordion__header-content {
@@ -39,11 +39,11 @@

 .navds-accordion__content {
  padding: var(--a-spacing-3) var(--a-spacing-3) 18px;
-  border-bottom: 2px solid var(--ac-accordion-content-border, var(--a-border-strong));
+  border-bottom: 2px solid var(--ac-accordion-content-border, var(--a-border-divider));
 }

 .navds-accordion__item--open > .navds-accordion__header:hover + * .navds-accordion__content {
-  border-color: var(--ac-accordion-content-border-open, var(--a-border-strong));
+  border-color: var(--ac-accordion-content-border-open, var(--a-border-default));
 }

 .navds-accordion__expand-icon {
@@ -24,6 +24,7 @@
  font-size: 1.5rem;
  align-self: flex-start;
  height: var(--a-font-line-height-xlarge);
+  background: radial-gradient(circle, var(--a-surface-default) 50%, 0, transparent);
 }

 .navds-alert--small > .navds-alert__icon {
@@ -41,6 +42,10 @@
  background-color: var(--ac-alert-warning-bg, var(--a-surface-warning-subtle));
 }

+.navds-alert--warning > .navds-alert__icon {
+  background: radial-gradient(circle at 50% 57%, var(--a-surface-default) 32%, 0, transparent);
+}
+
 .navds-alert--info {
  border-color: var(--ac-alert-info-border, var(--a-border-info));
  background-color: var(--ac-alert-info-bg, var(--a-surface-info-subtle));
@@ -112,13 +112,39 @@
  background-color: var(--ac-button-primary-bg, var(--a-surface-action));
 }

+/*************************
+ * .navds-button--primary-neutral *
+ *************************/
+
+.navds-button--primary-neutral {
+  background-color: var(--ac-button-primary-neutral-bg, var(--a-surface-neutral));
+  color: var(--ac-button-primary-neutral-text, var(--a-text-on-neutral));
+}
+
+.navds-button--primary-neutral:hover {
+  background-color: var(--ac-button-primary-neutral-hover-bg, var(--a-surface-neutral-hover));
+}
+
+.navds-button--primary-neutral:active {
+  background-color: var(--ac-button-primary-neutral-active-bg, var(--a-surface-neutral-active));
+}
+
+.navds-button--primary-neutral:focus {
+  box-shadow: inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
+}
+
+.navds-button--primary-neutral:hover:where(:disabled, .navds-button--disabled),
+.navds-button--primary-neutral:active:where(:disabled, .navds-button--disabled) {
+  background-color: var(--ac-button-primary-neutral-bg, var(--a-surface-neutral));
+}
+
 /**************************
 * .navds-button--secondary *
 **************************/

 .navds-button--secondary {
  color: var(--ac-button-secondary-text, var(--a-text-action));
-  background-color: var(--ac-button-secondary-bg, var(--a-surface-default));
+  background-color: var(--ac-button-secondary-bg, var(--a-surface-transparent));
  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--a-border-action));
 }

@@ -144,10 +170,47 @@
 .navds-button--secondary:where(:disabled, .navds-button--disabled),
 .navds-button--secondary:hover:where(:disabled, .navds-button--disabled) {
  color: var(--ac-button-secondary-text, var(--a-text-action));
-  background-color: var(--ac-button-secondary-bg, var(--a-surface-default));
+  background-color: var(--ac-button-secondary-bg, var(--a-surface-transparent));
  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--a-border-action));
 }

+/**************************
+* .navds-button--secondary-neutral *
+ **************************/
+
+.navds-button--secondary-neutral {
+  color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
+  background-color: var(--ac-button-secondary-neutral-bg, var(--a-surface-transparent));
+  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-border, var(--a-border-strong));
+}
+
+.navds-button--secondary-neutral:hover {
+  background-color: var(--ac-button-secondary-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
+}
+
+.navds-button--secondary-neutral:focus {
+  color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
+  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
+}
+
+.navds-button--secondary-neutral:active {
+  color: var(--ac-button-secondary-neutral-active-text, var(--a-text-on-neutral));
+  background-color: var(--ac-button-secondary-neutral-active-bg, var(--a-surface-neutral-active));
+  box-shadow: none;
+}
+
+.navds-button--secondary-neutral:focus:active {
+  box-shadow: inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)),
+    var(--a-shadow-focus);
+}
+
+.navds-button--secondary-neutral:where(:disabled, .navds-button--disabled),
+.navds-button--secondary-neutral:hover:where(:disabled, .navds-button--disabled) {
+  color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
+  background-color: var(--ac-button-secondary-neutral-bg, var(--a-surface-transparent));
+  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-border, var(--a-border-strong));
+}
+
 /****************************
 * .navds-button--tertiary *
 ****************************/
@@ -188,6 +251,46 @@
  box-shadow: none;
 }

+/****************************
+ * .navds-button--tertiary-neutral *
+ ****************************/
+
+.navds-button--tertiary-neutral {
+  color: var(--ac-button-tertiary-neutral-text, var(--a-text-default));
+}
+
+.navds-button--tertiary-neutral:hover {
+  color: var(--ac-button-tertiary-neutral-hover-text, var(--a-text-default));
+  background-color: var(--ac-button-tertiary-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
+}
+
+.navds-button--tertiary-neutral:focus {
+  box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
+}
+
+.navds-button--tertiary-neutral:active {
+  color: var(--ac-button-tertiary-neutral-active-text, var(--a-text-on-neutral));
+  background-color: var(--ac-button-tertiary-neutral-active-bg, var(--a-surface-neutral-active));
+  box-shadow: inset 0 0 0 1px var(--a-surface-default);
+}
+
+.navds-button--tertiary-neutral:active:hover {
+  background-color: var(--ac-button-tertiary-neutral-active-hover-bg, var(--a-surface-neutral-active));
+}
+
+.navds-button--tertiary-neutral:active:focus {
+  box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+}
+
+.navds-button--tertiary-neutral:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary-neutral:hover:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary-neutral:active:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary-neutral:active:hover:where(:disabled, .navds-button--disabled) {
+  color: var(--ac-button-tertiary-neutral-text, var(--a-text-default));
+  background: none;
+  box-shadow: none;
+}
+
 /*************************
 * .navds-button--danger *
 *************************/
@@ -28,7 +28,7 @@
 .navds-radio__label::before {
  content: "";
  background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-strong));
+  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default));
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--a-border-radius-medium);
@@ -67,7 +67,7 @@

 .navds-checkbox__input:focus + .navds-checkbox__label::before,
 .navds-radio__input:focus + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-strong)), var(--a-shadow-focus);
+  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
 }

 .navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
@@ -2,7 +2,7 @@
  appearance: none;
  background-color: var(--ac-select-bg, var(--a-surface-default));
  border-radius: var(--a-border-radius-medium);
-  border: 1px solid var(--ac-select-border, var(--a-border-strong));
+  border: 1px solid var(--ac-select-border, var(--a-border-default));
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
@@ -25,7 +25,6 @@
  position: relative;
  display: flex;
  width: 100%;
-  align-items: center;
  color: var(--a-text-default);
 }

@@ -34,12 +33,12 @@
  font-size: 1rem;
  right: 0.5rem;
  pointer-events: none;
+  align-self: center;
 }

 .navds-form-field--small .navds-select__input {
  min-height: 32px;
-  padding: 0.25rem;
-  padding-right: 2rem;
+  padding: 0 2rem 0 0.25rem;
 }

 /**
@@ -50,9 +49,21 @@
  border-color: var(--ac-select-error-border, var(--a-surface-danger));
 }

+/**
+  Disabled
+*/
 .navds-select__input:disabled {
  background-color: var(--ac-select-bg, var(--a-surface-default));
-  border: 1px solid var(--ac-select-border, var(--a-border-strong));
+  border: 1px solid var(--ac-select-border, var(--a-border-default));
  box-shadow: none;
  cursor: not-allowed;
+
+  /* Chrome-fix */
+  opacity: 1;
+  color: var(--a-text-default);
+}
+
+/* Chrome-fix */
+.navds-select__input:disabled > option {
+  color: var(--a-text-default);
 }
@@ -63,7 +63,7 @@
 }

 .navds-textarea__counter--error {
-  color: var(--ac-textarea-counter-error-text, var(--a-surface-danger));
+  color: var(--ac-textarea-counter-error-text, var(--a-text-danger));
 }

 .navds-textarea--resize .navds-textarea__input {
@@ -26,3 +26,4 @@
@import "stepper.css";
@import "table.css";
@import "tabs.css";
+@import "list.css";
@@ -6,12 +6,8 @@
  gap: var(--a-spacing-1);
 }

-.navds-alert--info .navds-link {
-  color: var(--a-text-default);
-}
-
-.navds-alert--error .navds-link,
-.navds-confirmation-panel--error .navds-link {
+.navds-alert .navds-link,
+.navds-confirmation-panel .navds-link {
  color: var(--a-text-default);
 }

@@ -0,0 +1,66 @@
+.navds-list ul,
+.navds-list ol {
+  padding: 0;
+}
+
+.navds-list--nested {
+  margin: var(--a-spacing-4) 0 var(--a-spacing-8) 0;
+}
+
+.navds-list li:not(.navds-list__item--noMargin) {
+  margin-bottom: var(--a-spacing-5);
+}
+
+.navds-list:last-child > ul > li:last-child,
+.navds-list:last-child > ol > li:last-child {
+  margin-bottom: 0;
+}
+
+.navds-list ul .navds-list__item {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--a-spacing-3);
+  padding-left: 0;
+}
+
+.navds-list ul .navds-list__item::marker {
+  content: none;
+}
+
+.navds-list ol .navds-list__item-marker--icon {
+  grid-column: 1 / 2;
+  display: flex;
+}
+
+.navds-list .navds-list__item-marker--bullet {
+  display: flex;
+  margin-top: 6px;
+  grid-column: 1 / 2;
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+  color: var(--ac-list-marker-ul-color, var(--ac-list-marker-color, var(--a-icon-default)));
+}
+
+.navds-list__item-marker--icon {
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+  color: var(--ac-list-marker-icon-color, var(--ac-list-marker-color, var(--a-icon-default)));
+}
+
+.navds-list ul .navds-list__item-content {
+  grid-column: 2 / 3;
+}
+
+.navds-list ol {
+  padding-left: var(--a-spacing-2);
+}
+
+.navds-list ol li {
+  padding-left: var(--a-spacing-1);
+  margin-left: var(--a-spacing-2);
+}
+
+.navds-list ol li::marker {
+  font-weight: var(--a-font-weight-bold);
+  font-size: var(--a-font-size-medium);
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+  color: var(--ac-list-marker-ol-color, var(--ac-list-marker-color, var(--a-icon-default)));
+}
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "2.1.7",
+  "version": "2.5.0",
  "description": "CSS for NAV Designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -20,7 +20,7 @@
    "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^2.1.7",
+    "@navikt/ds-tokens": "^2.5.0",
    "normalize.css": "^8.0.1",
    "postcss": "^8.4.0",
    "postcss-cli": "^9.0.0",
@@ -6,7 +6,7 @@

 .navds-toggle-group {
  border-radius: 9px;
-  background-color: var(--ac-toggle-group-bg, var(--a-surface-default));
+  background-color: var(--ac-toggle-group-bg, var(--a-surface-transparent));
  box-shadow: inset 0 0 0 1px var(--ac-toggle-group-border, var(--a-border-default));
  padding: calc(var(--a-spacing-1) + 1px);
  gap: var(--a-spacing-1);
@@ -15,6 +15,11 @@
  grid-auto-columns: 1fr;
 }

+.navds-toggle-group--neutral {
+  background-color: var(--ac-toggle-group-neutral-bg, var(--a-surface-transparent));
+  box-shadow: inset 0 0 0 1px var(--ac-toggle-group-neutral-border, var(--a-border-default));
+}
+
 .navds-toggle-group__button {
  display: inline-flex;
  align-items: center;
@@ -23,17 +28,27 @@
  min-height: 48px;
  border: none;
  cursor: pointer;
-  background-color: var(--ac-toggle-group-button-bg, var(--a-surface-default));
+  background-color: var(--ac-toggle-group-button-bg, var(--a-surface-transparent));
  color: var(--ac-toggle-group-button-text, var(--a-text-default));
  border-radius: var(--a-border-radius-medium);
  min-width: fit-content;
 }

+.navds-toggle-group--neutral > .navds-toggle-group__button {
+  background-color: var(--ac-toggle-group-button-neutral-bg, var(--a-surface-transparent));
+  color: var(--ac-toggle-group-button-neutral-text, var(c));
+}
+
 .navds-toggle-group__button:hover {
  background-color: var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle));
  color: var(--ac-toggle-group-button-hover-text, var(--a-text-action-on-action-subtle));
 }

+.navds-toggle-group--neutral > .navds-toggle-group__button:hover {
+  background-color: var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
+  color: var(--ac-toggle-group-button-neutral-hover-text, var(--a-text-default));
+}
+
 .navds-toggle-group__button:focus {
  outline: none;
  box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
@@ -43,6 +58,11 @@
  box-shadow: 0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)), 0 0 0 4px var(--a-border-focus);
 }

+.navds-toggle-group--neutral > .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
+  box-shadow: 0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
+    0 0 0 4px var(--a-border-focus);
+}
+
 .navds-toggle-group__button-inner {
  display: flex;
  align-items: center;
@@ -59,6 +79,12 @@
  color: var(--ac-toggle-group-selected-text, var(--a-text-on-action));
 }

+.navds-toggle-group--neutral > .navds-toggle-group__button[aria-pressed="true"],
+.navds-toggle-group--neutral > .navds-toggle-group__button[aria-checked="true"] {
+  background-color: var(--ac-toggle-group-neutral-selected-bg, var(--a-surface-neutral));
+  color: var(--ac-toggle-group-neutral-selected-text, var(--a-text-on-neutral));
+}
+
 .navds-toggle-group--small > .navds-toggle-group__button {
  padding: 0.375rem;
  min-height: 32px;
@@ -10,13 +10,13 @@
    "--ac-alert-success-bg": "--a-surface-success-subtle"
  },
  "accordion": {
-    "--ac-accordion-header-border": "--a-border-strong",
+    "--ac-accordion-header-border": "--a-border-divider",
    "--ac-accordion-header-text-hover": "--a-text-action-on-action-subtle",
-    "--ac-accordion-header-border-hover": "--a-border-strong",
+    "--ac-accordion-header-border-hover": "--a-border-default",
    "--ac-accordion-item-bg-open": "--a-surface-action-subtle",
    "--ac-accordion-item-border-open": "--a-surface-action-subtle",
-    "--ac-accordion-content-border": "--a-border-strong",
-    "--ac-accordion-content-border-open": "--a-border-strong"
+    "--ac-accordion-content-border": "--a-border-divider",
+    "--ac-accordion-content-border-open": "--a-border-default"
  },
  "button": {
    "--ac-button-primary-bg": "--a-surface-action",
@@ -25,7 +25,7 @@
    "--ac-button-primary-active-bg": "--a-surface-action-active",
    "--ac-button-primary-focus-border": "--a-surface-default",
    "--ac-button-secondary-text": "--a-text-action",
-    "--ac-button-secondary-bg": "--a-surface-default",
+    "--ac-button-secondary-bg": "--a-surface-transparent",
    "--ac-button-secondary-border": "--a-border-action",
    "--ac-button-secondary-hover-text": "--a-text-action-on-action-subtle",
    "--ac-button-secondary-hover-bg": "--a-surface-action-subtle-hover",
@@ -45,7 +45,27 @@
    "--ac-button-danger-hover-bg": "--a-surface-danger-hover",
    "--ac-button-danger-active-bg": "--a-surface-danger-active",
    "--ac-button-loader-stroke": "currentColor",
-    "--ac-button-primary-loader-stroke-bg": "rgb(255 255 255 / 0.3)"
+    "--ac-button-primary-loader-stroke-bg": "rgb(255 255 255 / 0.3)",
+    "--ac-button-primary-neutral-bg": "--a-surface-neutral",
+    "--ac-button-primary-neutral-text": "--a-text-on-neutral",
+    "--ac-button-primary-neutral-hover-bg": "--a-surface-neutral-hover",
+    "--ac-button-primary-neutral-active-bg": "--a-surface-neutral-active",
+    "--ac-button-primary-neutral-focus-border": "--a-surface-default",
+    "--ac-button-secondary-neutral-text": "--a-text-default",
+    "--ac-button-secondary-neutral-bg": "--a-surface-transparent",
+    "--ac-button-secondary-neutral-border": "--a-border-strong",
+    "--ac-button-secondary-neutral-hover-bg": "--a-surface-neutral-subtle-hover",
+    "--ac-button-secondary-neutral-focus-border": "--a-border-stron",
+    "--ac-button-secondary-neutral-active-text": "--a-text-on-neutral",
+    "--ac-button-secondary-neutral-active-bg": "--a-surface-neutral-active",
+    "--ac-button-secondary-neutral-active-focus-border": "--a-surface-default",
+    "--ac-button-tertiary-neutral-text": "--a-text-default",
+    "--ac-button-tertiary-neutral-hover-text": "--a-text-default",
+    "--ac-button-tertiary-neutral-hover-bg": "--a-surface-neutral-subtle-hover",
+    "--ac-button-tertiary-neutral-focus-border": "--a-border-stron",
+    "--ac-button-tertiary-neutral-active-text": "--a-text-on-neutral",
+    "--ac-button-tertiary-neutral-active-bg": "--a-surface-neutral-active",
+    "--ac-button-tertiary-neutral-active-hover-bg": "--a-surface-neutral-active"
  },
  "chat": {
    "--ac-chat-avatar-bg": "--a-bg-subtle",
@@ -109,6 +129,12 @@
    "--ac-link-active-bg": "--a-border-focus",
    "--ac-link-active-border": "--a-border-focus"
  },
+  "list": {
+    "--ac-list-marker-ul-color": "--ac-list-marker-color",
+    "--ac-list-marker-icon-color": "--ac-list-marker-color",
+    "--ac-list-marker-ol-color": "--ac-list-marker-color",
+    "--ac-list-marker-color": "--a-icon-default"
+  },
  "loader": {
    "--ac-loader-stroke": "--a-border-default",
    "--ac-loader-stroke-bg": "--a-surface-active",
@@ -221,14 +247,20 @@
    "--ac-tag-alt-3-filled-text": "--a-text-on-alt-3"
  },
  "togglegroup": {
-    "--ac-toggle-group-bg": "--a-surface-default",
+    "--ac-toggle-group-bg": "--a-surface-transparent",
    "--ac-toggle-group-border": "--a-border-default",
-    "--ac-toggle-group-button-bg": "--a-surface-default",
+    "--ac-toggle-group-button-bg": "--a-surface-transparent",
    "--ac-toggle-group-button-text": "--a-text-default",
    "--ac-toggle-group-button-hover-bg": "--a-surface-action-subtle",
    "--ac-toggle-group-button-hover-text": "--a-text-action-on-action-subtle",
    "--ac-toggle-group-selected-bg": "--a-surface-action-selected",
-    "--ac-toggle-group-selected-text": "--a-text-on-action"
+    "--ac-toggle-group-selected-text": "--a-text-on-action",
+    "--ac-toggle-group-button-neutral-bg": "--a-surface-transparent",
+    "--ac-toggle-group-button-neutral-text": "--ac-toggle-group-button-neutral-text",
+    "--ac-toggle-group-button-neutral-hover-bg": "--a-surface-neutral-subtle-hover",
+    "--ac-toggle-group-button-neutral-hover-text": "--a-text-default",
+    "--ac-toggle-group-neutral-selected-bg": "--a-surface-neutral",
+    "--ac-toggle-group-neutral-selected-text": "--a-text-on-neutral"
  },
  "tooltip": {
    "--ac-tooltip-bg": "--a-surface-inverted",
@@ -253,7 +285,7 @@
  },
  "checkbox-radio": {
    "--ac-radio-checkbox-bg": "--a-surface-default",
-    "--ac-radio-checkbox-border": "--a-border-strong",
+    "--ac-radio-checkbox-border": "--a-border-default",
    "--ac-radio-checkbox-action": "--a-surface-action",
    "--ac-radio-checkbox-action-hover-bg": "--a-surface-action-subtle",
    "--ac-radio-checkbox-error-border": "--a-border-danger",
@@ -269,7 +301,7 @@
  },
  "select": {
    "--ac-select-bg": "--a-surface-default",
-    "--ac-select-border": "--a-border-strong",
+    "--ac-select-border": "--a-border-default",
    "--ac-select-hover-bg": "--a-border-action",
    "--ac-select-error-border": "--a-surface-danger"
  },
@@ -298,7 +330,7 @@
    "--ac-textarea-placeholder": "--a-text-subtle",
    "--ac-textarea-hover-border": "--a-border-action",
    "--ac-textarea-counter-text": "--a-text-subtle",
-    "--ac-textarea-counter-error-text": "--a-surface-danger",
+    "--ac-textarea-counter-error-text": "--a-text-danger",
    "--ac-textarea-error-border": "--a-border-danger"
  }
 }
@@ -1,5 +1,73 @@
 # @navikt/ds-react

+## 2.5.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.5.0
+
+## 2.4.3
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.4.3
+
+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
+- Updated dependencies [[`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8)]:
+  - @navikt/ds-icons@2.4.2
+
+## 2.4.1
+
+### Patch Changes
+
+- [#1827](https://github.com/navikt/aksel/pull/1827) [`98c06b0be`](https://github.com/navikt/aksel/commit/98c06b0be20debff9969af874d5239ec920fa401) Thanks [@kschieren](https://github.com/kschieren)! - Added fixedWeeks prop to standalone datepicker
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.4.1
+
+## 2.4.0
+
+### Minor Changes
+
+- [#1807](https://github.com/navikt/aksel/pull/1807) [`70eeb24b3`](https://github.com/navikt/aksel/commit/70eeb24b38ac871c7f2e31e1621b949669c401b6) Thanks [@kschieren](https://github.com/kschieren)! - Added List component
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.4.0
+
+## 2.3.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.3.1
+
+## 2.3.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.3.0
+
+## 2.2.0
+
+### Minor Changes
+
+- [#1789](https://github.com/navikt/aksel/pull/1789) [`c0929a534`](https://github.com/navikt/aksel/commit/c0929a534dc8effece5435f8be550cb7931a52b1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Button og ToggleGroup har nå en neutral-variant, oppdatert neutral-tokens
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.2.0
+
 ## 2.1.7

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "2.1.7",
+  "version": "2.5.0",
  "description": "Aksel react-components for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -37,7 +37,7 @@
  },
  "dependencies": {
    "@floating-ui/react": "0.17.0",
-    "@navikt/ds-icons": "^2.1.7",
+    "@navikt/ds-icons": "^2.5.0",
    "@radix-ui/react-tabs": "1.0.0",
    "@radix-ui/react-toggle-group": "1.0.0",
    "clsx": "^1.2.1",
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { Alert } from ".";
-import { BodyLong, Heading as DsHeading } from "..";
+import { BodyLong, Heading as DsHeading, Link } from "..";

 const meta: Meta<typeof Alert> = {
  title: "ds-react/Alert",
@@ -135,3 +135,15 @@ export const Heading = () => {
    </div>
  );
 };
+
+export const Links = () => {
+  return (
+    <div className="colgap">
+      {variants.map((variant, i) => (
+        <Alert key={variant} variant={variant}>
+          <Link href="#">Id elit esse enim reprehenderit</Link>
+        </Alert>
+      ))}
+    </div>
+  );
+};
@@ -13,7 +13,14 @@ export interface ButtonProps
   * Changes design and interaction-visuals
   * @default "primary"
   */
-  variant?: "primary" | "secondary" | "tertiary" | "danger";
+  variant?:
+    | "primary"
+    | "primary-neutral"
+    | "secondary"
+    | "secondary-neutral"
+    | "tertiary"
+    | "tertiary-neutral"
+    | "danger";
  /**
   * Changes padding, height and font-size
   * @default medium
@@ -10,11 +10,22 @@ export default {
  },
 };

-const variants: Array<"primary" | "secondary" | "tertiary" | "danger"> = [
+const variants: Array<
+  | "primary"
+  | "secondary"
+  | "tertiary"
+  | "primary-neutral"
+  | "secondary-neutral"
+  | "tertiary-neutral"
+  | "danger"
+> = [
  "primary",
  "secondary",
  "tertiary",
  "danger",
+  "primary-neutral",
+  "secondary-neutral",
+  "tertiary-neutral",
 ];

 const varSwitch = {
@@ -22,6 +33,9 @@ const varSwitch = {
  secondary: "Secondary",
  tertiary: "Tertiary",
  danger: "Danger",
+  "primary-neutral": "Primary",
+  "secondary-neutral": "Secondary",
+  "tertiary-neutral": "Tertiary",
 };

 export const Default = {
@@ -51,7 +65,15 @@ export const Default = {
    variant: {
      control: {
        type: "radio",
-        options: ["primary", "secondary", "tertiary", "danger"],
+        options: [
+          "primary",
+          "secondary",
+          "tertiary",
+          "danger",
+          "primary-neutral",
+          "secondary-neutral",
+          "tertiary-neutral",
+        ],
      },
    },
    size: {
@@ -126,7 +148,8 @@ export const Loading = {
    </div>
  ),

-  args: { chromatic: { delay: 300 } },
+  args: { chromatic: { disableSnapshot: true } },
+  chromatic: { disableSnapshot: true },
 };

 export const Icon = () => (
@@ -252,5 +275,6 @@ export const LoadingWithAs = {
    </div>
  ),

-  args: { chromatic: { delay: 300 } },
+  args: { chromatic: { disableSnapshot: true } },
+  chromatic: { disableSnapshot: true },
 };
@@ -24,6 +24,11 @@ interface DatePickerStandaloneDefaultProps
   * Datepicker classname
   */
  className?: string;
+  /**
+   * If datepicker should be fixed to 6 weeks, regardless of actual weeks in month
+   * @default true
+   */
+  fixedWeeks?: boolean;
 }

 export type DatePickerStandaloneProps = DatePickerStandaloneDefaultProps &
@@ -50,6 +55,7 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
      id,
      defaultSelected,
      onSelect,
+      fixedWeeks = true,
      ...rest
    },
    ref
@@ -113,7 +119,7 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
            weekend: "rdp-day__weekend",
          }}
          showWeekNumber={showWeekNumber}
-          fixedWeeks
+          fixedWeeks={fixedWeeks}
          showOutsideDays
          {...omit(rest, ["onSelect"])}
        />
@@ -1,27 +1,28 @@
 export * from "./accordion";
 export * from "./alert";
-export * from "./provider";
 export * from "./button";
+export * from "./chat";
+export * from "./chips";
 export * from "./date";
 export * from "./form";
 export * from "./grid";
-export * from "./help-text";
 export * from "./guide-panel";
+export * from "./help-text";
 export * from "./link";
 export * from "./link-panel";
+export * from "./list";
 export * from "./loader";
 export * from "./modal";
 export * from "./pagination";
 export * from "./panel";
 export * from "./popover";
+export * from "./provider";
 export * from "./read-more";
-export * from "./chat";
-export * from "./chips";
 export * from "./stepper";
-export * from "./tag";
-export * from "./toggle-group";
 export * from "./table";
 export * from "./tabs";
+export * from "./tag";
+export * from "./toggle-group";
 export * from "./tooltip";
 export * from "./typography";
 export * from "./util";
@@ -0,0 +1,97 @@
+import cl from "clsx";
+import React, { createContext, forwardRef, useContext } from "react";
+import { BodyShort, Heading } from "../typography";
+import { useId } from "../util/useId";
+import { ListItem, ListItemContext, ListItemType } from "./ListItem";
+
+export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  /**
+   * HTML list element to render
+   * @default "ul"
+   */
+  as?: "ul" | "ol";
+  /**
+   * List heading title
+   */
+  title?: string;
+  /**
+   * List heading description
+   */
+  description?: string;
+  /**
+   * Allows setting a different HTML h-tag
+   * @default "h3"
+   */
+  headingTag?: React.ElementType<any>;
+}
+
+export interface ListComponent
+  extends React.ForwardRefExoticComponent<ListProps> {
+  Item: ListItemType;
+  componentType: string;
+}
+
+interface ListContextProps {
+  listType: "ul" | "ol";
+}
+
+export const ListContext = createContext<ListContextProps>({
+  listType: "ul",
+});
+
+export const List = forwardRef<HTMLDivElement, ListProps>(
+  (
+    {
+      children,
+      className,
+      as: ListTag = "ul",
+      title,
+      description,
+      headingTag = "h3",
+      ...rest
+    },
+    ref
+  ) => {
+    const ariaId = useId();
+
+    const { isNested } = useContext(ListItemContext);
+
+
+    return (
+      <ListContext.Provider
+        value={{
+          listType: ListTag,
+        }}
+      >
+        <div
+          {...rest}
+          ref={ref}
+          className={cl("navds-list", className, {
+            "navds-list--nested": isNested,
+          })}
+        >
+          {title && (
+            <Heading id={`tittel-${ariaId}`} size="small" as={headingTag}>
+              {title}
+            </Heading>
+          )}
+          {description && (
+            <BodyShort id={`description-${ariaId}`}>{description}</BodyShort>
+          )}
+          <ListTag
+            aria-labelledby={title && `tittel-${ariaId}`}
+            aria-describedby={description && `description-${ariaId}`}
+          >
+            {children}
+          </ListTag>
+        </div>
+      </ListContext.Provider>
+    );
+  }
+) as ListComponent;
+
+List.Item = ListItem;
+List.componentType = "list";
+
+export default List;
@@ -0,0 +1,97 @@
+import cl from "clsx";
+import React, { createContext, forwardRef, useContext } from "react";
+import { BodyShort, Label } from "../typography";
+import { ListContext } from "./List";
+
+export interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
+  /**
+   * Content for description of the list item
+   */
+  children: React.ReactNode;
+  /**
+   * Title for the list item
+   */
+  title?: string;
+  /*
+   * Icon to be used as list marker for unordered lists.
+   */
+  icon?: React.ReactNode;
+}
+
+export interface ListItemType
+  extends React.ForwardRefExoticComponent<
+    ListItemProps & React.RefAttributes<HTMLLIElement>
+  > {}
+
+interface ListItemContextProps {
+  isNested: boolean;
+}
+
+export const ListItemContext = createContext<ListItemContextProps>({
+  isNested: false,
+});
+
+export const ListItem: ListItemType = forwardRef(
+  ({ className, children, title, icon, ...rest }, ref) => {
+    const { listType } = useContext(ListContext);
+
+    if (listType === "ol" && icon) {
+      console.warn(
+        "<List />: Icon prop is not supported for ordered lists. Please remove the icon prop."
+      );
+    }
+
+    const hasNestedList = React.Children.toArray(children)?.some(
+      (child: any) => child?.type?.componentType === "list"
+    );
+
+    return (
+      <ListItemContext.Provider value={{ isNested: hasNestedList }}>
+        <li
+          {...rest}
+          ref={ref}
+          className={cl("navds-list__item", className, {
+            "navds-list__item--noMargin": hasNestedList,
+          })}
+        >
+          {listType === "ul" && (
+            <div
+              className={cl({
+                "navds-list__item-marker--icon": icon,
+                "navds-list__item-marker--bullet": !icon,
+              })}
+            >
+              {icon ? (
+                icon
+              ) : (
+                <svg
+                  width="6"
+                  height="6"
+                  viewBox="0 0 6 6"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  aria-hidden
+                  focusable={false}
+                  role="img"
+                >
+                  <rect width="6" height="6" rx="3" fill="currentColor" />
+                </svg>
+              )}
+            </div>
+          )}
+
+          <BodyShort as="div" size="small" className="navds-list__item-content">
+            {title && (
+              <Label as="p" size="small">
+                {title}
+              </Label>
+            )}
+            {children}
+          </BodyShort>
+        </li>
+      </ListItemContext.Provider>
+    );
+  }
+);
+
+export default ListItem;
@@ -0,0 +1,2 @@
+export { default as List } from "./List";
+export type { ListProps } from "./List";
@@ -0,0 +1,148 @@
+import {
+  BabyChangingRoom,
+  Braille,
+  Cognition,
+  Refresh,
+} from "@navikt/ds-icons";
+import { Meta } from "@storybook/react";
+import React from "react";
+import { List } from "..";
+
+export default {
+  title: "ds-react/List",
+  component: List,
+} as Meta;
+
+export const Default = {
+  render: () => {
+    return (
+      <List>
+        <List.Item title="Lorem Ipsum Dolor Sit Amet">
+          Lorem Ipsum Dolor Sit Amet
+        </List.Item>
+        <List.Item title="Consectetur Adipiscing Elit">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Sed Do Eiusmod Tempor Incididunt">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+      </List>
+    );
+  },
+};
+
+export const Ordered = {
+  render: () => {
+    return (
+      <List as="ol">
+        <List.Item title="Lorem Ipsum Dolor Sit Amet">
+          Lorem Ipsum Dolor Sit Amet
+        </List.Item>
+        <List.Item title="Consectetur Adipiscing Elit">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Sed Do Eiusmod Tempor Incididunt">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Ut Labore Et Dolore Magna Aliqua">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Enim Ad Minim Veniam">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Quis Nostrud Exercitation Ullamco">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Laboris Nisi Ut Aliquip Ex Ea Commodo">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Duis Aute Irure Dolor In Reprehenderit">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Voluptate Velit Esse Cillum Dolore">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Eu Fugiat Nulla Pariatur">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+      </List>
+    );
+  },
+};
+
+export const WithHeading = {
+  render: () => {
+    return (
+      <List
+        title="Lorem Ipsum Dolor Sit Amet"
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel risus volutpat."
+      >
+        <List.Item title="Lorem Ipsum Dolor Sit Amet">
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+        </List.Item>
+        <List.Item title="Consectetur Adipiscing Elit">
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+        </List.Item>
+        <List.Item title="Sed Do Eiusmod Tempor Incididunt">
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+        </List.Item>
+      </List>
+    );
+  },
+};
+
+export const Icons = {
+  render: () => {
+    return (
+      <List>
+        <List.Item
+          title="Lorem Ipsum Dolor Sit Amet"
+          icon={<Braille aria-hidden />}
+        >
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+        </List.Item>
+        <List.Item
+          title="Consectetur Adipiscing Elit"
+          icon={<Cognition aria-hidden />}
+        >
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+        </List.Item>
+        <List.Item icon={<BabyChangingRoom aria-hidden />}>
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+        </List.Item>
+        <List.Item icon={<Refresh aria-hidden />}>
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+        </List.Item>
+      </List>
+    );
+  },
+};
+
+export const Nested = {
+  render: () => {
+    return (
+      <List>
+        <List.Item title="Sed Do Eiusmod Tempor Incididunt">
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+          <List>
+            <List.Item title="Lorem Ipsum Dolor Sit Amet">
+              Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+            </List.Item>
+            <List.Item title="Consectetur Adipiscing Elit">
+              Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+            </List.Item>
+            <List.Item>
+              Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+            </List.Item>
+            <List.Item>
+              Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+            </List.Item>
+          </List>
+        </List.Item>
+        <List.Item>
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+        </List.Item>
+      </List>
+    );
+  },
+};
@@ -84,6 +84,7 @@ export const Default = {

  args: {
    children: "Id elit esse",
+    variant: "info",
  },
 };

@@ -13,6 +13,12 @@ export default {
        options: ["medium", "small"],
      },
    },
+    variant: {
+      control: {
+        type: "radio",
+        options: ["action", "neutral"],
+      },
+    },
  },
 } as Meta;

@@ -88,6 +94,29 @@ export const Compositions = () => {
  );
 };

+export const Variants = () => {
+  const [activeValue, setActiveValue] = useState("ulest");
+
+  return (
+    <div className="colgap">
+      <ToggleGroup
+        variant="action"
+        value={activeValue}
+        onChange={setActiveValue}
+      >
+        {Items(true, true)}
+      </ToggleGroup>
+      <ToggleGroup
+        variant="neutral"
+        value={activeValue}
+        onChange={setActiveValue}
+      >
+        {Items(true, true)}
+      </ToggleGroup>
+    </div>
+  );
+};
+
 export const Small = () => {
  const [activeValue, setActiveValue] = useState("ulest");

@@ -36,6 +36,11 @@ export interface ToggleGroupProps
   * Label describing ToggleGroup
   */
  label?: React.ReactNode;
+  /**
+   * Changes design and interaction-visuals
+   * @default "action"
+   */
+  variant?: "action" | "neutral";
 }

 interface ToggleGroupComponent
@@ -65,6 +70,7 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
      defaultValue,
      id,
      "aria-describedby": desc,
+      variant = "action",
      ...rest
    },
    ref
@@ -114,7 +120,11 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
            value={value ?? groupValue}
            defaultValue={defaultValue}
            ref={ref}
-            className={cl("navds-toggle-group", `navds-toggle-group--${size}`)}
+            className={cl(
+              "navds-toggle-group",
+              `navds-toggle-group--${size}`,
+              `navds-toggle-group--${variant}`
+            )}
            {...(describeBy && { "aria-describedby": describeBy })}
            role="radiogroup"
            type="single"
@@ -42,7 +42,13 @@ function showContent(element: HTMLDivElement | null, height: Height) {
 // ------------------ Component

 interface AnimateHeightProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * @default 250ms
+   */
  duration?: number;
+  /**
+   * @default ease
+   */
  easing?: string;
  height: Height;
  innerClassName?: string;
@@ -1,5 +1,29 @@
 # @navikt/ds-tailwind

+## 2.5.0
+
+### Minor Changes
+
+- [#1832](https://github.com/navikt/aksel/pull/1832) [`8893b5c82`](https://github.com/navikt/aksel/commit/8893b5c82daf7c23897019fda912e702a1f05eaa) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Breakpoint-tokens for ds-tokens og ds-tailwind
+
+## 2.4.3
+
+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
+## 2.4.1
+
+## 2.4.0
+
+## 2.3.1
+
+## 2.3.0
+
+## 2.2.0
+
 ## 2.1.7

 ## 2.1.6
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tailwind",
-  "version": "2.1.7",
+  "version": "2.5.0",
  "description": "Tailwind config based on @navikt/ds-tokens",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -22,7 +22,7 @@
    "directory": "@navikt/core/tailwind"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^2.1.7",
+    "@navikt/ds-tokens": "^2.5.0",
    "@types/jest": "^29.0.0",
    "color": "4.2.3",
    "jest": "^29.0.0",
@@ -0,0 +1,11 @@
+import Reducer from "./reducer";
+
+export const getBreakpoints = (tokens: { [key: string]: string | number }) => {
+  const breakpoints = Reducer(tokens, ["breakpoint"]);
+
+  return Object.keys(breakpoints)
+    .filter((key) => !key.includes("xs") && !key.includes("-down"))
+    .reduce((cur, key) => {
+      return Object.assign(cur, { [key]: breakpoints[key] });
+    }, {});
+};
@@ -2,6 +2,7 @@
 import * as TokensBuild from "@navikt/ds-tokens/dist/tokens";
 import { writeFileSync } from "fs";
 import { getColors } from "./colors";
+import { getBreakpoints } from "./getBreakpoints";
 import kebabCase from "./kebabCase";
 import Reducer from "./reducer";

@@ -16,6 +17,7 @@ const tokens = Object.entries(TokensBuild).reduce(
 const config = {
  theme: {
    colors: getColors(tokens),
+    screen: getBreakpoints(tokens),
    extend: {
      spacing: Reducer(tokens, ["spacing"]),
      zIndex: Reducer(tokens, ["z-index"]),
@@ -1,5 +1,35 @@
 # @navikt/ds-tokens

+## 2.5.0
+
+### Minor Changes
+
+- [#1832](https://github.com/navikt/aksel/pull/1832) [`8893b5c82`](https://github.com/navikt/aksel/commit/8893b5c82daf7c23897019fda912e702a1f05eaa) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Breakpoint-tokens for ds-tokens og ds-tailwind
+
+## 2.4.3
+
+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
+## 2.4.1
+
+## 2.4.0
+
+## 2.3.1
+
+## 2.3.0
+
+## 2.2.0
+
+### Minor Changes
+
+- [#1787](https://github.com/navikt/aksel/pull/1787) [`43463444b`](https://github.com/navikt/aksel/commit/43463444b8a2d178bf1435b88ad2d8719b41e65b) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Justeringer i semantiske fargetokens, statusfarger nå mer tydelig
+
+- [#1789](https://github.com/navikt/aksel/pull/1789) [`c0929a534`](https://github.com/navikt/aksel/commit/c0929a534dc8effece5435f8be550cb7931a52b1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Button og ToggleGroup har nå en neutral-variant, oppdatert neutral-tokens
+
 ## 2.1.7

 ## 2.1.6
@@ -1,6 +1,6 @@
-const docs = require("../docs.json");
-const DsTokens = require("../dist/tokens-cjs.js");
-const kebabCase = require("./kebabCase.js");
+const docs = require("../../docs.json");
+const DsTokens = require("../../dist/tokens-cjs.js");
+const kebabCase = require("../kebabCase.js");

 const flatten = Object.values(docs).reduce((old, val) => [...old, ...val], []);

@@ -8,6 +8,33 @@ const notFound = [];
 const removed = [];
 const wrongValues = [];

+describe("Validate tokens dokumentation", () => {
+  flatten.forEach((x) => {
+    it(`${x} should be documented`, () => {
+      expect(
+        Object.keys(DsTokens).find(
+          (y) => `--${kebabCase(y)}`.replace("--az-", "--a-z-") === x.name
+        )
+      ).toBeDefined();
+    });
+  });
+
+  Object.entries(DsTokens).forEach(([key, val]) => {
+    const formatedKey = `--${kebabCase(key)}`.replace("--az-", "--a-z-");
+    it(`${formatedKey} should exist in docs`, () => {
+      const tokenInDoc = flatten.find((x) => x.name === formatedKey);
+      expect(tokenInDoc).toBeDefined();
+    });
+
+    it(`${formatedKey} should have correct value ${val}`, () => {
+      const formatedKey = `--${kebabCase(key)}`.replace("--az-", "--a-z-");
+
+      const tokenInDoc = flatten.find((x) => x.name === formatedKey);
+      expect(tokenInDoc?.value).toEqual(val);
+    });
+  });
+});
+
 flatten.forEach((x) => {
  !Object.keys(DsTokens).find(
    (y) => `--${kebabCase(y)}`.replace("--az-", "--a-z-") === x.name
@@ -1,4 +1,47 @@
 {
+  "breakpoints": [
+    { "name": "--a-breakpoint-xs", "value": "0" },
+    {
+      "name": "--a-breakpoint-sm",
+      "value": "480px",
+      "description": "@media (min-width: 480px)"
+    },
+    {
+      "name": "--a-breakpoint-sm-down",
+      "value": "479px",
+      "description": "@media (max-width: 479px)"
+    },
+    {
+      "name": "--a-breakpoint-md",
+      "value": "768px",
+      "description": "@media (min-width: 768px)"
+    },
+    {
+      "name": "--a-breakpoint-md-down",
+      "value": "767px",
+      "description": "@media (max-width: 767px)"
+    },
+    {
+      "name": "--a-breakpoint-lg",
+      "value": "1024px",
+      "description": "@media (min-width: 1024px)"
+    },
+    {
+      "name": "--a-breakpoint-lg-down",
+      "value": "1023px",
+      "description": "@media (max-width: 1023px)"
+    },
+    {
+      "name": "--a-breakpoint-xl",
+      "value": "1280px",
+      "description": "@media (min-width: 1280px)"
+    },
+    {
+      "name": "--a-breakpoint-xl-down",
+      "value": "1279px",
+      "description": "@media (max-width: 1279px)"
+    }
+  ],
  "font": [
    {
      "name": "--a-font-family",
@@ -69,7 +112,7 @@
  ],
  "global-red": [
    { "name": "--a-red-50", "value": "rgba(255, 230, 230, 1)" },
-    { "name": "--a-red-100", "value": "rgba(255, 184, 184, 1)" },
+    { "name": "--a-red-100", "value": "rgba(255, 194, 194, 1)" },
    { "name": "--a-red-200", "value": "rgba(246, 130, 130, 1)" },
    { "name": "--a-red-300", "value": "rgba(242, 92, 92, 1)" },
    { "name": "--a-red-400", "value": "rgba(222, 46, 46, 1)" },
@@ -134,7 +177,7 @@
    { "name": "--a-orange-300", "value": "rgba(255, 193, 102, 1)" },
    { "name": "--a-orange-400", "value": "rgba(255, 170, 51, 1)" },
    { "name": "--a-orange-500", "value": "rgba(255, 145, 0, 1)" },
-    { "name": "--a-orange-600", "value": "rgba(212, 123, 0, 1)" },
+    { "name": "--a-orange-600", "value": "rgba(199, 115, 0, 1)" },
    { "name": "--a-orange-700", "value": "rgba(168, 100, 0, 1)" },
    { "name": "--a-orange-800", "value": "rgba(125, 76, 0, 1)" },
    { "name": "--a-orange-900", "value": "rgba(82, 51, 0, 1)" }
@@ -154,7 +197,7 @@

  "semantic-border": [
    { "name": "--a-border-default", "value": "rgba(0, 0, 0, 0.44)" },
-    { "name": "--a-border-strong", "value": "rgba(0, 0, 0, 0.56)" },
+    { "name": "--a-border-strong", "value": "rgba(0, 0, 0, 0.65)" },
    { "name": "--a-border-divider", "value": "rgba(0, 0, 0, 0.19)" },
    { "name": "--a-border-subtle", "value": "rgba(0, 0, 0, 0.1)" },
    { "name": "--a-border-subtle-hover", "value": "rgba(0, 0, 0, 0.19)" },
@@ -163,7 +206,7 @@
    { "name": "--a-border-selected", "value": "rgba(0, 103, 197, 1)" },
    { "name": "--a-border-success", "value": "rgba(6, 137, 58, 1)" },
    { "name": "--a-border-danger", "value": "rgba(195, 0, 0, 1)" },
-    { "name": "--a-border-warning", "value": "rgba(212, 123, 0, 1)" },
+    { "name": "--a-border-warning", "value": "rgba(199, 115, 0, 1)" },
    { "name": "--a-border-info", "value": "rgba(54, 141, 168, 1)" },
    { "name": "--a-border-on-inverted", "value": "rgba(229, 229, 229, 1)" },
    { "name": "--a-border-on-inverted-subtle", "value": "rgba(89, 89, 89, 1)" },
@@ -173,7 +216,7 @@
      "value": "rgba(153, 195, 255, 1)"
    },
    { "name": "--a-border-alt-1", "value": "rgba(130, 105, 162, 1)" },
-    { "name": "--a-border-alt-2", "value": "rgba(193, 203, 51, 1)" },
+    { "name": "--a-border-alt-2", "value": "rgba(127, 137, 0, 1)" },
    { "name": "--a-border-alt-3", "value": "rgba(0, 91, 130, 1)" }
  ],
  "semantic-text": [
@@ -200,8 +243,8 @@
  ],
  "semantic-surface": [
    { "name": "--a-surface-default", "value": "rgba(255, 255, 255, 1)" },
-    { "name": "--a-surface-hover", "value": "rgba(0, 0, 0, 0.03)" },
-    { "name": "--a-surface-active", "value": "rgba(0, 0, 0, 0.05)" },
+    { "name": "--a-surface-hover", "value": "rgba(0, 0, 0, 0.05)" },
+    { "name": "--a-surface-active", "value": "rgba(0, 0, 0, 0.1)" },
    { "name": "--a-surface-selected", "value": "rgba(230, 240, 255, 1)" },
    { "name": "--a-surface-subtle", "value": "rgba(247, 247, 247, 1)" },
    { "name": "--a-surface-transparent", "value": "rgba(255, 255, 255, 0)" },
@@ -227,42 +270,43 @@
      "name": "--a-surface-neutral-subtle-hover",
      "value": "rgba(0, 0, 0, 0.1)"
    },
-    { "name": "--a-surface-neutral", "value": "rgba(112, 112, 112, 1)" },
-    { "name": "--a-surface-neutral-hover", "value": "rgba(89, 89, 89, 1)" },
-    { "name": "--a-surface-neutral-selected", "value": "rgba(89, 89, 89, 1)" },
-    { "name": "--a-surface-success-subtle", "value": "rgba(243, 252, 245, 1)" },
+    { "name": "--a-surface-neutral", "value": "rgba(89, 89, 89, 1)" },
+    { "name": "--a-surface-neutral-hover", "value": "rgba(64, 64, 64, 1)" },
+    { "name": "--a-surface-neutral-selected", "value": "rgba(38, 38, 38, 1)" },
+    { "name": "--a-surface-neutral-active", "value": "rgba(38, 38, 38, 1)" },
+    { "name": "--a-surface-success-subtle", "value": "rgba(204, 241, 214, 1)" },
    {
      "name": "--a-surface-success-subtle-hover",
-      "value": "rgba(204, 241, 214, 1)"
+      "value": "rgba(153, 222, 173, 1)"
    },
    { "name": "--a-surface-success", "value": "rgba(6, 137, 58, 1)" },
    { "name": "--a-surface-success-hover", "value": "rgba(0, 124, 46, 1)" },
-    { "name": "--a-surface-danger-subtle", "value": "rgba(255, 230, 230, 1)" },
+    { "name": "--a-surface-danger-subtle", "value": "rgba(255, 194, 194, 1)" },
    {
      "name": "--a-surface-danger-subtle-hover",
-      "value": "rgba(255, 184, 184, 1)"
+      "value": "rgba(246, 130, 130, 1)"
    },
    { "name": "--a-surface-danger", "value": "rgba(195, 0, 0, 1)" },
    { "name": "--a-surface-danger-hover", "value": "rgba(173, 0, 0, 1)" },
    { "name": "--a-surface-danger-active", "value": "rgba(140, 0, 0, 1)" },
-    { "name": "--a-surface-warning-subtle", "value": "rgba(255, 249, 240, 1)" },
+    { "name": "--a-surface-warning-subtle", "value": "rgba(255, 236, 204, 1)" },
    { "name": "--a-surface-warning", "value": "rgba(255, 145, 0, 1)" },
    {
      "name": "--a-surface-warning-subtle-hover",
-      "value": "rgba(255, 236, 204, 1)"
+      "value": "rgba(255, 215, 153, 1)"
    },
-    { "name": "--a-surface-info-subtle", "value": "rgba(235, 252, 255, 1)" },
+    { "name": "--a-surface-info-subtle", "value": "rgba(216, 249, 255, 1)" },
    {
      "name": "--a-surface-info-subtle-hover",
-      "value": "rgba(216, 249, 255, 1)"
+      "value": "rgba(181, 241, 255, 1)"
    },
    { "name": "--a-surface-info", "value": "rgba(102, 203, 236, 1)" },
    { "name": "--a-surface-alt-1", "value": "rgba(130, 105, 162, 1)" },
-    { "name": "--a-surface-alt-1-subtle", "value": "rgba(239, 236, 244, 1)" },
+    { "name": "--a-surface-alt-1-subtle", "value": "rgba(224, 216, 233, 1)" },
    { "name": "--a-surface-alt-2", "value": "rgba(193, 203, 51, 1)" },
-    { "name": "--a-surface-alt-2-subtle", "value": "rgba(253, 255, 230, 1)" },
+    { "name": "--a-surface-alt-2-subtle", "value": "rgba(249, 252, 204, 1)" },
    { "name": "--a-surface-alt-3", "value": "rgba(0, 91, 130, 1)" },
-    { "name": "--a-surface-alt-3-subtle", "value": "rgba(230, 241, 248, 1)" },
+    { "name": "--a-surface-alt-3-subtle", "value": "rgba(204, 226, 240, 1)" },
    { "name": "--a-surface-alt-3-strong", "value": "rgba(0, 52, 83, 1)" }
  ],
  "semantic-bg": [
@@ -292,11 +336,13 @@
    { "name": "--a-icon-on-success", "value": "rgba(255, 255, 255, 1)" },
    { "name": "--a-icon-danger", "value": "rgba(195, 0, 0, 1)" },
    { "name": "--a-icon-on-danger", "value": "rgba(255, 255, 255, 1)" },
-    { "name": "--a-icon-warning", "value": "rgba(212, 123, 0, 1)" },
+    { "name": "--a-icon-warning", "value": "rgba(199, 115, 0, 1)" },
    { "name": "--a-icon-on-warning", "value": "rgba(38, 38, 38, 1)" },
-    { "name": "--a-icon-info", "value": "rgba(54, 141, 168, 1)" },
+    { "name": "--a-icon-info", "value": "rgba(35, 107, 125, 1)" },
    { "name": "--a-icon-on-info", "value": "rgba(38, 38, 38, 1)" },
-    { "name": "--a-icon-alt-1", "value": "rgba(130, 105, 162, 1)" }
+    { "name": "--a-icon-alt-1", "value": "rgba(99, 70, 137, 1)" },
+    { "name": "--a-icon-alt-2", "value": "rgba(127, 137, 0, 1)" },
+    { "name": "--a-icon-alt-3", "value": "rgba(51, 128, 165, 1)" }
  ],
  "radius": [
    { "name": "--a-border-radius-small", "value": "2px" },
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "2.1.7",
+  "version": "2.5.0",
  "description": "Design-tokens for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -18,11 +18,10 @@
    "docs.json"
  ],
  "scripts": {
-    "build": "node ./config/build.js > /dev/null && yarn validate-docs",
+    "build": "node ./config/build.js > /dev/null",
    "watch": "nodemon --watch src/index.js --exec \"yarn build\"",
    "token": "cd config && style-dictionary build",
-    "test": "jest",
-    "validate-docs": "node config/validate-docs.js"
+    "test": "jest"
  },
  "repository": {
    "type": "git",
@@ -112,7 +112,7 @@
        "value": "rgba(255, 230, 230, 1)"
      },
      "100": {
-        "value": "rgba(255, 184, 184, 1)"
+        "value": "rgba(255, 194, 194, 1)"
      },
      "200": {
        "value": "rgba(246, 130, 130, 1)"
@@ -287,7 +287,7 @@
        "value": "rgba(255, 145, 0, 1)"
      },
      "600": {
-        "value": "rgba(212, 123, 0, 1)"
+        "value": "rgba(199, 115, 0, 1)"
      },
      "700": {
        "value": "rgba(168, 100, 0, 1)"
@@ -3,6 +3,17 @@ const getFontSize = (size) => `${size / baseFontSize}rem`;

 module.exports = {
  a: {
+    breakpoint: {
+      xs: { value: "0" },
+      sm: { value: "480px" },
+      "sm-down": { value: "479px" },
+      md: { value: "768px" },
+      "md-down": { value: "767px" },
+      lg: { value: "1024px" },
+      "lg-down": { value: "1023px" },
+      xl: { value: "1280px" },
+      "xl-down": { value: "1279px" },
+    },
    font: {
      family: { value: '"Source Sans Pro", Arial, sans-serif' },
      line: {
@@ -74,10 +74,10 @@
        "value": "{a.white.value}"
      },
      "hover": {
-        "value": "{a.grayalpha.50.value}"
+        "value": "{a.grayalpha.100.value}"
      },
      "active": {
-        "value": "{a.grayalpha.100.value}"
+        "value": "{a.grayalpha.200.value}"
      },
      "selected": {
        "value": "{a.blue.50.value}"
@@ -138,20 +138,23 @@
          }
        },
        "hover": {
-          "value": "{a.gray.700.value}"
+          "value": "{a.gray.800.value}"
        },
        "selected": {
-          "value": "{a.gray.700.value}"
+          "value": "{a.gray.900.value}"
+        },
+        "active": {
+          "value": "{a.gray.900.value}"
        },
        "@": {
-          "value": "{a.gray.600.value}"
+          "value": "{a.gray.700.value}"
        }
      },

      "success": {
        "subtle": {
-          "hover": { "value": "{a.green.100.value}" },
-          "@": { "value": "{a.green.50.value}" }
+          "hover": { "value": "{a.green.200.value}" },
+          "@": { "value": "{a.green.100.value}" }
        },
        "@": { "value": "{a.green.500.value}" },
        "hover": { "value": "{a.green.600.value}" }
@@ -159,8 +162,8 @@

      "danger": {
        "subtle": {
-          "hover": { "value": "{a.red.100.value}" },
-          "@": { "value": "{a.red.50.value}" }
+          "hover": { "value": "{a.red.200.value}" },
+          "@": { "value": "{a.red.100.value}" }
        },
        "hover": {
          "value": "{a.red.600.value}"
@@ -173,30 +176,30 @@

      "warning": {
        "subtle": {
-          "hover": { "value": "{a.orange.100.value}" },
-          "@": { "value": "{a.orange.50.value}" }
+          "hover": { "value": "{a.orange.200.value}" },
+          "@": { "value": "{a.orange.100.value}" }
        },
        "@": { "value": "{a.orange.500.value}" }
      },

      "info": {
        "subtle": {
-          "hover": { "value": "{a.lightblue.100.value}" },
-          "@": { "value": "{a.lightblue.50.value}" }
+          "hover": { "value": "{a.lightblue.200.value}" },
+          "@": { "value": "{a.lightblue.100.value}" }
        },
        "@": { "value": "{a.lightblue.500.value}" }
      },

      "alt1": {
-        "subtle": { "value": "{a.purple.50.value}" },
+        "subtle": { "value": "{a.purple.100.value}" },
        "@": { "value": "{a.purple.400.value}" }
      },
      "alt2": {
-        "subtle": { "value": "{a.limegreen.50.value}" },
+        "subtle": { "value": "{a.limegreen.100.value}" },
        "@": { "value": "{a.limegreen.400.value}" }
      },
      "alt3": {
-        "subtle": { "value": "{a.deepblue.50.value}" },
+        "subtle": { "value": "{a.deepblue.100.value}" },
        "strong": { "value": "{a.deepblue.800.value}" },
        "@": { "value": "{a.deepblue.500.value}" }
      }
@@ -206,7 +209,7 @@
        "value": "{a.grayalpha.500.value}"
      },
      "strong": {
-        "value": "{a.grayalpha.600.value}"
+        "value": "{a.grayalpha.700.value}"
      },
      "divider": {
        "value": "{a.grayalpha.300.value}"
@@ -252,7 +255,7 @@
        "value": "{a.purple.400.value}"
      },
      "alt2": {
-        "value": "{a.limegreen.400.value}"
+        "value": "{a.limegreen.700.value}"
      },
      "alt3": {
        "value": "{a.deepblue.500.value}"
@@ -286,10 +289,16 @@
        "value": "{a.orange.600.value}"
      },
      "info": {
-        "value": "{a.lightblue.700.value}"
+        "value": "{a.lightblue.800.value}"
      },
      "alt1": {
-        "value": "{a.purple.400.value}"
+        "value": "{a.purple.500.value}"
+      },
+      "alt2": {
+        "value": "{a.limegreen.700.value}"
+      },
+      "alt3": {
+        "value": "{a.deepblue.400.value}"
      },
      "on": {
        "neutral": {
@@ -1,5 +1,25 @@
 # @navikt/ds-icons

+## 2.5.0
+
+## 2.4.3
+
+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
+## 2.4.1
+
+## 2.4.0
+
+## 2.3.1
+
+## 2.3.0
+
+## 2.2.0
+
 ## 2.1.7

 ## 2.1.6
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-icons",
-  "version": "2.1.7",
+  "version": "2.5.0",
  "description": "Aksel icons for NAV",
  "author": "Aksel | NAV designsystem team",
  "repository": {
@@ -1,5 +1,29 @@
 # @navikt/ds-css-internal

+## 2.5.0
+
+## 2.4.3
+
+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
+## 2.4.1
+
+## 2.4.0
+
+## 2.3.1
+
+### Patch Changes
+
+- [`241b2e678`](https://github.com/navikt/aksel/commit/241b2e678f1f40909e2d36fe095dcbce8673f174) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset feil bruk av fallback-tokens i textarea, timeline
+
+## 2.3.0
+
+## 2.2.0
+
 ## 2.1.7

 ## 2.1.6
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css-internal",
-  "version": "2.1.7",
+  "version": "2.5.0",
  "description": "CSS for NAV internal Designsystem-components",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -246,7 +246,7 @@
 }

 .navdsi-timeline__zoom-button:not([aria-pressed="true"]):hover {
-  background: var(--ac-timeline-zoom-hover, var(--a-surface-action-subtle-hover));
+  background: var(--ac-timeline-zoom-bg-hover, var(--a-surface-action-subtle-hover));
 }

 .navdsi-timeline__zoom-button[aria-pressed="true"] {
@@ -40,7 +40,7 @@
    "--ac-timeline-pin-bg-hover": "--a-surface-danger-hover",
    "--ac-timeline-zoom-border": "--a-border-default",
    "--ac-timeline-zoom-bg": "--a-surface-default",
-    "--ac-timeline-zoom-hover": "--a-surface-action-subtle-hover",
+    "--ac-timeline-zoom-bg-hover": "--a-surface-action-subtle-hover",
    "--ac-timeline-zoom-selected-bg": "--a-surface-inverted",
    "--ac-timeline-zoom-selected-text": "--a-text-on-inverted",
    "--ac-timeline-axislabel-text": "--a-text-subtle"
@@ -1,5 +1,71 @@
 # @navikt/ds-react-internal

+## 2.5.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.5.0
+  - @navikt/ds-icons@2.5.0
+
+## 2.4.3
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.4.3
+  - @navikt/ds-icons@2.4.3
+
+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
+- Updated dependencies [[`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8)]:
+  - @navikt/ds-react@2.4.2
+  - @navikt/ds-icons@2.4.2
+
+## 2.4.1
+
+### Patch Changes
+
+- Updated dependencies [[`98c06b0be`](https://github.com/navikt/aksel/commit/98c06b0be20debff9969af874d5239ec920fa401)]:
+  - @navikt/ds-react@2.4.1
+  - @navikt/ds-icons@2.4.1
+
+## 2.4.0
+
+### Patch Changes
+
+- Updated dependencies [[`70eeb24b3`](https://github.com/navikt/aksel/commit/70eeb24b38ac871c7f2e31e1621b949669c401b6)]:
+  - @navikt/ds-react@2.4.0
+  - @navikt/ds-icons@2.4.0
+
+## 2.3.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.3.1
+  - @navikt/ds-icons@2.3.1
+
+## 2.3.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.3.0
+  - @navikt/ds-icons@2.3.0
+
+## 2.2.0
+
+### Patch Changes
+
+- Updated dependencies [[`c0929a534`](https://github.com/navikt/aksel/commit/c0929a534dc8effece5435f8be550cb7931a52b1)]:
+  - @navikt/ds-react@2.2.0
+  - @navikt/ds-icons@2.2.0
+
 ## 2.1.7

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react-internal",
-  "version": "2.1.7",
+  "version": "2.5.0",
  "description": "Aksel react components for internal UIs in NAV",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -35,8 +35,8 @@
    "watch": "tsc --watch -p tsconfig.esm.json"
  },
  "dependencies": {
-    "@navikt/ds-icons": "^2.1.7",
-    "@navikt/ds-react": "^2.1.7",
+    "@navikt/ds-icons": "^2.5.0",
+    "@navikt/ds-react": "^2.5.0",
    "clsx": "^1.1.1",
    "copy-to-clipboard": "^3.3.1"
  },
@@ -4,7 +4,7 @@ SIL Open Font License (OFL)

 # The MIT License

-Copyright 2022 NAV (Arbeids- og velferdsdirektoratet) - The Norwegian Labour and Welfare Administration
+Copyright 2023 NAV (Arbeids- og velferdsdirektoratet) - The Norwegian Labour and Welfare Administration

 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the "Software"),
@@ -1,4 +1,4 @@
-FROM node:16.15.0-alpine3.14
+FROM node:18.1-alpine3.14
 RUN apk add --no-cache libc6-compat

 ENV NODE_ENV production
@@ -11,7 +11,7 @@ CMS og nettside for [aksel.nav.no](https://aksel.nav.no/)

 ### /website/sanity

-Det publiserte studioet finner man på [aksel.nav.no/admin](https://aksel.nav.no/admin)(krever NAV SSO eller invite).
+Det publiserte studioet finner man på [aksel.nav.no/admin](https://aksel.nav.no/admin)(krever NAV SSO).

 `production`-datasettet er privat, så man må ha riktige tilganger for å kunne lese/jobbe med dataen der.

@@ -21,6 +21,10 @@ Det publiserte studioet finner man på [aksel.nav.no/admin](https://aksel.nav.no

 Branch `main` blir pusher rett til prod -> aksel.nav.no. For å utvikle nye features brukes branch `next` som ved push publiseres til devmiljø aksel.dev.nav.no (krever naisdevice). Kan også publisere andre branches til dev ved bruk av workflow-dispatch.

+## Kode-eksempler
+
+Alle eksemplene våre ligger under /website/pages/eksempler. For å se endringene live kan man starte opp storybook med `yarn storybook`. Du trenger da ikke tilgang til sanity for å se endringene.
+
 ### Nettside (localhost:3000)

 ```
@@ -23,11 +23,11 @@ spec:
    timeout: 1
  resources:
    limits:
-      cpu: 500m
-      memory: 512Mi
+      cpu: 1000m
+      memory: 2048Mi
    requests:
-      cpu: 200m
-      memory: 256Mi
+      cpu: 500m
+      memory: 1024Mi
  accessPolicy:
    outbound:
      external:
@@ -15,16 +15,16 @@
    "website"
  ],
  "dependencies": {
-    "@navikt/ds-codemod": "^2.1.7",
-    "@navikt/ds-css": "^2.1.7",
-    "@navikt/ds-css-internal": "^2.1.7",
-    "@navikt/ds-icons": "^2.1.7",
-    "@navikt/ds-react": "^2.1.7",
-    "@navikt/ds-react-internal": "^2.1.7",
-    "@navikt/ds-tailwind": "^2.1.7",
-    "@navikt/ds-tokens": "^2.1.7"
+    "@navikt/ds-codemod": "^2.5.0",
+    "@navikt/ds-css": "^2.5.0",
+    "@navikt/ds-css-internal": "^2.5.0",
+    "@navikt/ds-icons": "^2.5.0",
+    "@navikt/ds-react": "^2.5.0",
+    "@navikt/ds-react-internal": "^2.5.0",
+    "@navikt/ds-tailwind": "^2.5.0",
+    "@navikt/ds-tokens": "^2.5.0"
  },
  "devDependencies": {
-    "prettier-plugin-tailwindcss": "^0.1.13"
+    "prettier-plugin-tailwindcss": "^0.2.3"
  }
 }
@@ -190,7 +190,7 @@ const serializers = {
      }
      if (href && href.startsWith("mailto:")) {
        return (
-          <NextLink href={href} passHref>
+          <NextLink href={href} passHref legacyBehavior>
            <Link
              onClick={(e) =>
                logNav(
@@ -222,7 +222,7 @@ const serializers = {
          {children} <ExternalLink title="åpner lenken i ny fane" />
        </Link>
      ) : (
-        <NextLink href={href} passHref>
+        <NextLink href={href} passHref legacyBehavior>
          <Link
            onClick={(e) =>
              logNav(
@@ -244,7 +244,7 @@ const serializers = {

      const href = `/${slug?.current}`;
      return (
-        <NextLink href={href} passHref>
+        <NextLink href={href} passHref legacyBehavior>
          <Link
            onClick={(e) =>
              logNav(
@@ -0,0 +1,13 @@
+import "../dist/tw.css";
+import { Provider } from "@navikt/ds-react";
+import { IdContext } from "components/website-modules/utils/contexts";
+
+export const NextDecorator = ({ children }: { children: React.ReactNode }) => (
+  <Provider>
+    <IdContext.Provider value={{ id: "storybook-testid" }}>
+      <div id="__next" className="aksel antialiased">
+        {children}
+      </div>
+    </IdContext.Provider>
+  </Provider>
+);
@@ -21,14 +21,22 @@ const Footer = () => {
            </Heading>
            <BodyShort as="ul" className="mt-5 grid gap-2">
              <li>
-                <NextLink href="/god-praksis/artikler/om-aksel" passHref>
+                <NextLink
+                  href="/god-praksis/artikler/om-aksel"
+                  passHref
+                  legacyBehavior
+                >
                  <Link className="text-text-on-inverted focus:shadow-focus focus:text-text-default focus:bg-blue-200 focus:shadow-blue-200">
                    Om Aksel
                  </Link>
                </NextLink>
              </li>
              <li>
-                <NextLink href="/god-praksis/artikler/skriv-for-aksel" passHref>
+                <NextLink
+                  href="/god-praksis/artikler/skriv-for-aksel"
+                  passHref
+                  legacyBehavior
+                >
                  <Link className="text-text-on-inverted focus:shadow-focus focus:text-text-default focus:bg-blue-200 focus:shadow-blue-200">
                    Skriv for Aksel
                  </Link>
@@ -98,23 +106,22 @@ const Footer = () => {
            Arbeids- og velferdsetaten
          </div>
          <span className="mb-1 self-end xl:mb-0" />
-          {/* <BodyShort className="mb-1 self-end xl:mb-0">
-            Redaktør: Eidar Grande Vollan
-          </BodyShort> */}
          <div className="hidden self-end xl:block">
-            <p>&copy; 2022 NAV</p>
-            <NextLink href="/side/personvernerklaering" passHref>
-              <a className="focus:bg-border-focus-on-inverted focus:text-text-default focus:ring-border-focus-on-inverted outline-none hover:underline focus:no-underline focus:ring">
-                Personvernerklæring og informasjonskapsler
-              </a>
+            <p>&copy; {new Date().getFullYear()} NAV</p>
+            <NextLink
+              href="/side/personvernerklaering"
+              className="focus:bg-border-focus-on-inverted focus:text-text-default focus:ring-border-focus-on-inverted outline-none hover:underline focus:no-underline focus:ring"
+            >
+              Personvernerklæring og informasjonskapsler
            </NextLink>
          </div>
          <div className="block self-end xl:hidden">
-            &copy; 2022 NAV |{" "}
-            <NextLink href="/side/personvernerklaering" passHref>
-              <a className="focus:bg-border-focus-on-inverted focus:ring-border-focus-on-inverted outline-none hover:underline focus:no-underline focus:ring">
-                Personvernerklæring og informasjonskapsler
-              </a>
+            &copy; {new Date().getFullYear()} NAV |{" "}
+            <NextLink
+              href="/side/personvernerklaering"
+              className="focus:bg-border-focus-on-inverted focus:ring-border-focus-on-inverted outline-none hover:underline focus:no-underline focus:ring"
+            >
+              Personvernerklæring og informasjonskapsler
            </NextLink>
          </div>
        </div>
@@ -11,27 +11,27 @@ const LinkElement = ({ name, href, onClick }) => {
  const { asPath } = useRouter();
  return (
    <li className="flex h-11 items-center">
-      <Link href={href} passHref>
-        <a
-          className={cl(
-            "hover:bg-surface-action-subtle-hover focus-visible:shadow-focus-inset relative flex h-full w-full items-center rounded px-2 focus:outline-none",
-            {
-              "before:bg-surface-action-selected pl-4 font-semibold before:absolute before:left-0 before:h-6 before:w-1 before:rounded-full":
-                asPath.startsWith(href),
-              "": !asPath.startsWith(href),
-            }
-          )}
-          onClick={(e) => {
-            logNav(
-              "header",
-              window.location.pathname,
-              e.currentTarget.getAttribute("href")
-            );
-            onClick();
-          }}
-        >
-          {name}
-        </a>
+      <Link
+        href={href}
+        passHref
+        className={cl(
+          "hover:bg-surface-action-subtle-hover focus-visible:shadow-focus-inset relative flex h-full w-full items-center rounded px-2 focus:outline-none",
+          {
+            "before:bg-surface-action-selected pl-4 font-semibold before:absolute before:left-0 before:h-6 before:w-1 before:rounded-full":
+              asPath.startsWith(href),
+            "": !asPath.startsWith(href),
+          }
+        )}
+        onClick={(e) => {
+          logNav(
+            "header",
+            window.location.pathname,
+            e.currentTarget.getAttribute("href")
+          );
+          onClick();
+        }}
+      >
+        {name}
      </Link>
    </li>
  );
@@ -63,7 +63,7 @@ export const Hamburger = () => {
          aria={{ modal: true }}
          overlayClassName="header-modal__overlay"
          contentLabel="Meny"
-          className="bg-surface-default xs:max-w-[90%] xs:right-6 xs:left-auto xs:w-96 absolute left-4 top-0 right-4 block rounded py-14 px-11 md:hidden"
+          className="bg-surface-default absolute left-4 top-0 right-4 block rounded py-14 px-11 sm:right-6 sm:left-auto sm:w-96 sm:max-w-[90%] md:hidden"
        >
          <nav aria-label="hovedmeny">
            <ul>
@@ -10,27 +10,27 @@ const LinkElement = ({ name, href }) => {
  const { asPath } = useRouter();
  return (
    <li>
-      <Link href={href} passHref>
-        <a
-          className={cl(
-            "text-deepblue-800 focus-visible:shadow-focus relative grid h-full place-items-center rounded px-2 focus:outline-none",
-            {
-              "before:bg-border-action-selected font-semibold before:absolute before:bottom-[1px] before:z-10 before:h-1 before:w-[calc(100%_-_16px)] before:rounded-full":
-                asPath.startsWith(href),
-              "hover:before:bg-border-subtle-hover before:absolute before:bottom-[1px] before:z-10 before:h-1 before:w-[calc(100%_-_16px)] before:rounded-full":
-                !asPath.startsWith(href),
-            }
-          )}
-          onClick={(e) =>
-            logNav(
-              "header",
-              window.location.pathname,
-              e.currentTarget.getAttribute("href")
-            )
+      <Link
+        href={href}
+        passHref
+        className={cl(
+          "text-deepblue-800 focus-visible:shadow-focus relative grid h-full place-items-center rounded px-2 focus:outline-none",
+          {
+            "before:bg-border-action-selected font-semibold before:absolute before:bottom-[1px] before:z-10 before:h-1 before:w-[calc(100%_-_16px)] before:rounded-full":
+              asPath.startsWith(href),
+            "hover:before:bg-border-subtle-hover before:absolute before:bottom-[1px] before:z-10 before:h-1 before:w-[calc(100%_-_16px)] before:rounded-full":
+              !asPath.startsWith(href),
          }
-        >
-          {name}
-        </a>
+        )}
+        onClick={(e) =>
+          logNav(
+            "header",
+            window.location.pathname,
+            e.currentTarget.getAttribute("href")
+          )
+        }
+      >
+        {name}
      </Link>
    </li>
  );
@@ -55,21 +55,21 @@ export const Header = ({
        })}
      >
        <div className="mx-auto flex h-full max-w-screen-2xl items-center  pr-4 pt-3 lg:pr-6">
-          <div className="xs:pr-6 xs:pl-4 flex h-11 items-center pr-4 pl-4">
-            <Link href="/" passHref>
-              <a
-                onClick={(e) =>
-                  logNav(
-                    "header",
-                    window.location.pathname,
-                    e.currentTarget.getAttribute("href")
-                  )
-                }
-                className="focus-visible:shadow-focus grid h-full place-items-center rounded px-2 focus:outline-none"
-              >
-                <Logo />
-                <span className="sr-only">Aksel</span>
-              </a>
+          <div className="flex h-11 items-center pr-4 pl-4 sm:pr-6 sm:pl-4">
+            <Link
+              href="/"
+              passHref
+              onClick={(e) =>
+                logNav(
+                  "header",
+                  window.location.pathname,
+                  e.currentTarget.getAttribute("href")
+                )
+              }
+              className="focus-visible:shadow-focus grid h-full place-items-center rounded px-2 focus:outline-none"
+            >
+              <Logo />
+              <span className="sr-only">Aksel</span>
            </Link>
          </div>
          <nav
@@ -2,9 +2,9 @@ import { urlFor } from "@/lib";
 import { isNew } from "@/utils";
 import { Tag } from "@navikt/ds-react";
 import cl from "classnames";
+import Image from "next/legacy/image";
 import { StatusTag } from "components/website-modules/StatusTag";
 import { SearchHit } from "lib/types/search";
-import Image from "next/image";
 import NextLink from "next/link";

 export function Hit({
@@ -29,16 +29,16 @@ export function Hit({
      )}
    >
      <div className="px-2 py-6">
-        <NextLink href={`/${hit.item.slug}`} passHref>
-          <a
-            onClick={() => logSuccess(index, `/${(hit.item as any).slug}`)}
-            className="flex items-center gap-2 text-xl font-semibold after:absolute after:inset-0 focus:outline-none"
-          >
-            <span className="group-hover:underline">
-              {highlightStr(hit.item.heading, query)}
-            </span>
-            <StatusTag status={hit?.item?.status?.tag} aria-hidden />
-          </a>
+        <NextLink
+          href={`/${hit.item.slug}`}
+          passHref
+          onClick={() => logSuccess(index, `/${(hit.item as any).slug}`)}
+          className="flex items-center gap-2 text-xl font-semibold after:absolute after:inset-0 focus:outline-none"
+        >
+          <span className="group-hover:underline">
+            {highlightStr(hit.item.heading, query)}
+          </span>
+          <StatusTag status={hit?.item?.status?.tag} aria-hidden />
        </NextLink>
        <span className="font-regular text-text-subtle text-lg" aria-hidden>
          {hit.highlight.shouldHightlight ? (
@@ -62,8 +62,8 @@ export function Hit({
          <Image
            src={urlFor(hit.item.status.bilde).auto("format").url()}
            decoding="sync"
-            width="96px"
-            height="96px"
+            width="96"
+            height="96"
            layout="fixed"
            objectFit="contain"
            alt={hit.item?.heading + " thumbnail"}
@@ -100,20 +100,17 @@ export function IconHit({
        <NextLink
          href={`/grunnleggende/staesj/ikoner?icon=${hit.item.name}`}
          passHref
+          onClick={() => logSuccess(index, `/${(hit.item as any).name}`)}
+          className="flex items-center gap-2 text-xl font-semibold after:absolute after:inset-0 focus:outline-none"
        >
-          <a
-            onClick={() => logSuccess(index, `/${(hit.item as any).name}`)}
-            className="flex items-center gap-2 text-xl font-semibold after:absolute after:inset-0 focus:outline-none"
-          >
-            <span className="group-hover:underline">
-              {highlightStr(hit.item.name, query)}
-            </span>
-            {isNew(hit.item?.created_at ?? "") && (
-              <Tag variant="info" size="small" aria-hidden>
-                Ny
-              </Tag>
-            )}
-          </a>
+          <span className="group-hover:underline">
+            {highlightStr(hit.item.name, query)}
+          </span>
+          {isNew(hit.item?.created_at ?? "") && (
+            <Tag variant="info" size="small" aria-hidden>
+              Ny
+            </Tag>
+          )}
        </NextLink>
      </div>

@@ -121,8 +118,8 @@ export function IconHit({
        <Image
          src={`https://raw.githubusercontent.com/navikt/aksel/main/%40navikt/icons/svg/${hit.item.name}.svg`}
          decoding="sync"
-          width="24px"
-          height="24px"
+          width="24"
+          height="24"
          layout="fixed"
          objectFit="contain"
          alt={hit.item.name + " thumbnail"}
@@ -154,6 +154,7 @@ const AkselArtikkelTemplate = ({
                    key={title}
                    href={`/god-praksis/${slug.current}`}
                    passHref
+                    legacyBehavior
                  >
                    <BodyShort
                      size="small"
@@ -196,10 +197,7 @@ const AkselArtikkelTemplate = ({
                  ))}
                </BodyShort>
              )}
-              <BodyShort
-                as="span"
-                className="text-text-subtle whitespace-nowrap"
-              >
+              <BodyShort as="span" className="text-text-subtle">
                Publisert: {dateStr(data?.publishedAt ?? data?._updatedAt)}
              </BodyShort>
            </div>
@@ -73,7 +73,7 @@ const AkselPrinsippTemplate = ({
      >
        <article className="overflow-x-clip">
          <div
-            className={cl("max-w-aksel xs:w-[90%] mx-auto px-4", {
+            className={cl("max-w-aksel mx-auto px-4 sm:w-[90%]", {
              "pb-32": mainPage,
            })}
          >
@@ -101,7 +101,7 @@ const AkselPrinsippTemplate = ({
                  <BodyShort
                    size="small"
                    as="span"
-                    className="text-text-subtle whitespace-nowrap"
+                    className="text-text-subtle "
                  >
                    {dateStr(data?._updatedAt)}
                  </BodyShort>
@@ -123,7 +123,7 @@ const AkselPrinsippTemplate = ({
              "bg-gray-100": mainPage,
            })}
          >
-            <div className="max-w-aksel xs:w-[90%] mx-auto px-4">
+            <div className="max-w-aksel mx-auto px-4 sm:w-[90%]">
              <div className="pb-16 md:pb-32">
                <div className="relative mx-auto mt-4 max-w-prose lg:ml-0 lg:grid lg:max-w-none lg:grid-flow-row-dense lg:grid-cols-3 lg:items-start lg:gap-x-12">
                  <TableOfContents
@@ -135,7 +135,7 @@ const AkselPrinsippTemplate = ({
                    {data?.hero_bilde && (
                      <Bilde
                        node={data.hero_bilde as any}
-                        className="xs:-mt-72 -mt-36 mb-10"
+                        className="-mt-36 mb-10 sm:-mt-72"
                      />
                    )}
                    <SanityBlockContent
@@ -161,10 +161,7 @@ const AkselPrinsippTemplate = ({
                          ))}
                        </BodyShort>
                      )}
-                      <BodyShort
-                        as="span"
-                        className="text-text-subtle whitespace-nowrap"
-                      >
+                      <BodyShort as="span" className="text-text-subtle ">
                        Publisert:{" "}
                        {dateStr(data?.publishedAt ?? data?._updatedAt)}
                      </BodyShort>
@@ -8,7 +8,7 @@ import { ReactNode } from "react";
 import cl from "clsx";
 import NextLink from "next/link";
 import { capitalize } from "@/utils";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import { TableOfContentsv2 } from "components/website-modules/TOCv2";

 const HeaderCube = ({ ...props }) => (
@@ -77,7 +77,7 @@ export const WithSidebar = ({
            <main
              tabIndex={-1}
              id="hovedinnhold"
-              className="min-h-screen-header md:max-w-screen-sidebar xs:pl-6 xs:pr-6 relative w-full px-4 focus:outline-none md:pl-0"
+              className="min-h-screen-header md:max-w-screen-sidebar relative w-full px-4 focus:outline-none sm:pl-6 sm:pr-6 md:pl-0"
            >
              <div
                className={cl(
@@ -96,6 +96,7 @@ export const WithSidebar = ({
                      <NextLink
                        href={`/${pageType.type.toLowerCase()}`}
                        passHref
+                        legacyBehavior
                      >
                        <Link className="text-text-default">
                          {capitalize(pageType.type)}
@@ -144,12 +145,12 @@ export const WithSidebar = ({
                  </div>
                )}
                {variant === "landingPage" && (
-                  <div className="xs:block pointer-events-none absolute top-0 right-0 hidden">
+                  <div className="pointer-events-none absolute top-0 right-0 hidden sm:block">
                    <HeaderCube className="text-deepblue-300 z-0 max-h-full" />
                  </div>
                )}
              </div>
-              <div className={cl("xs:px-6 md:px-10", { flex: withToc })}>
+              <div className={cl("sm:px-6 md:px-10", { flex: withToc })}>
                {withToc && (
                  <TableOfContentsv2
                    changedState={pageProps["content"]}
@@ -19,7 +19,7 @@ export const NoSidebarLayout = ({
        id="hovedinnhold"
        className="aksel-artikkel bg-gray-50 pt-4 focus:outline-none"
      >
-        <div className="max-w-aksel xs:w-[90%] mx-auto px-4">
+        <div className="max-w-aksel mx-auto px-4 sm:w-[90%]">
          <article className="pt-12 pb-16 md:pb-32">{children}</article>
        </div>
        {aside}
@@ -31,7 +31,7 @@ const NavItem = ({
        }
      )}
    >
-      <Link href={`/${link.slug}`} passHref>
+      <Link href={`/${link.slug}`} passHref legacyBehavior>
        <BodyShort
          as="a"
          size="small"
@@ -43,7 +43,7 @@ const Element = ({
  return (
    <figure
      className={cl(
-        "flex min-w-full flex-1 flex-col rounded-t sm:min-w-[440px]",
+        "flex min-w-full flex-1 flex-col rounded-t sm:min-w-[320px]",
        {
          "basis-full": block?.fullwidth,
          "max-w-sm": !block?.fullwidth,
@@ -23,7 +23,7 @@ const Intro = ({
      <div>
        <>
          <Label as="p" className="mb-3">
-            Egnet til å:
+            Egnet til:
          </Label>
          <ul className="mb-7 list-disc">
            {node.brukes_til.map((x) => (
@@ -39,7 +39,7 @@ const Intro = ({
        {node?.brukes_ikke_til && (
          <>
            <Label as="p" className="mb-3">
-              Vurder noe annet:
+              Uegnet til:
            </Label>
            <ul className="list-disc">
              {node.brukes_ikke_til.map((x) => (
@@ -102,6 +102,7 @@ const TokenTable = ({ node }: { node: SanityT.Schema.token_kategori }) => {
              <NextLink
                href="https://aksel.nav.no/grunnleggende/styling/design-tokens#hec62d38bc813"
                passHref
+                legacyBehavior
              >
                <Link>guiden vår</Link>
              </NextLink>{" "}
@@ -28,7 +28,7 @@ const Bilde = ({
    <>
      <figure
        className={cl("m-0 mb-8 flex flex-col", style.figure, className, {
-          "sm:max-w-text": node?.small,
+          "md:max-w-text": node?.small,
        })}
      >
        <div
@@ -58,7 +58,7 @@ const Bilde = ({
                {node?.kilde?.link ? (
                  <>
                    {`${node?.kilde?.prefix}: `}
-                    <NextLink href={node.kilde.link} passHref>
+                    <NextLink href={node.kilde.link} passHref legacyBehavior>
                      <Link className="break-normal">{node?.kilde?.tekst}</Link>
                    </NextLink>
                  </>
@@ -42,25 +42,22 @@ const ArtikkelCard = ({
          },
        }}
        passHref
+        className="after:absolute after:inset-0 after:z-10 after:rounded-lg focus:outline-none"
+        onClick={(e) =>
+          logNav(
+            "artikkel-kort",
+            window.location.pathname,
+            e.currentTarget.getAttribute("href")
+          )
+        }
      >
-        <a
-          className="after:absolute after:inset-0 after:z-10 after:rounded-lg focus:outline-none"
-          onClick={(e) =>
-            logNav(
-              "artikkel-kort",
-              window.location.pathname,
-              e.currentTarget.getAttribute("href")
-            )
-          }
+        <Heading
+          level={level}
+          size="small"
+          className="text-deepblue-700 group-hover:underline"
        >
-          <Heading
-            level={level}
-            size="small"
-            className="text-deepblue-700 group-hover:underline"
-          >
-            {heading}
-          </Heading>
-        </a>
+          {heading}
+        </Heading>
      </NextLink>
      {ingress && <BodyShort className="mt-2">{ingress}</BodyShort>}
      {variant === "god-praksis" ? (
@@ -20,7 +20,7 @@ const BloggCard = ({
  return (
    <li key={blog._id} className="border-b-border-subtle h-fit border-b pb-8">
      <Heading size="medium" as="div">
-        <NextLink href={`/${blog.slug}`} passHref>
+        <NextLink href={`/${blog.slug}`} passHref legacyBehavior>
          <Link
            className="text-deepblue-500 no-underline hover:underline"
            onClick={(e) =>
@@ -2,7 +2,7 @@ import { withErrorBoundary } from "@/error-boundary";
 import { BodyShort } from "@navikt/ds-react";
 import cl from "clsx";
 import NextLink from "next/link";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import { logNav } from "@/utils";
 import { SanityT, urlFor } from "@/lib";

@@ -32,19 +32,19 @@ const GodPraksisCard = ({ node }: { node: AkselTemaT }) => {
          priority
        />
      </div>
-      <NextLink href={`/god-praksis/${node.slug.current}`} passHref>
-        <a
-          onClick={(e) =>
-            logNav(
-              "card",
-              window.location.pathname,
-              e.currentTarget.getAttribute("href")
-            )
-          }
-          className="navds-heading--medium text-deepblue-700 navds-heading  mb-4 no-underline after:absolute after:inset-0 after:rounded-lg focus:outline-none group-hover:underline"
-        >
-          {node.title}
-        </a>
+      <NextLink
+        href={`/god-praksis/${node.slug.current}`}
+        passHref
+        onClick={(e) =>
+          logNav(
+            "card",
+            window.location.pathname,
+            e.currentTarget.getAttribute("href")
+          )
+        }
+        className="navds-heading--medium text-deepblue-700 navds-heading  mb-4 no-underline after:absolute after:inset-0 after:rounded-lg focus:outline-none group-hover:underline"
+      >
+        {node.title}
      </NextLink>
      <BodyShort className={cl("mb-2 lg:mb-6")}>{node.oppsummering}</BodyShort>
      <BodyShort size="small" className="text-text-subtle">
@@ -15,7 +15,7 @@ const InnholdsKort = ({
  }

  return (
-    <article className="shadow-small last-of-type:mb-18 focus-within:ring-border-focus hover:shadow-medium xs:p-8 group relative mb-7 rounded-lg bg-white p-4 ring-1 ring-gray-900/10 focus-within:ring">
+    <article className="shadow-small last-of-type:mb-18 focus-within:ring-border-focus hover:shadow-medium group relative mb-7 rounded-lg bg-white p-4 ring-1 ring-gray-900/10 focus-within:ring sm:p-8">
      <Heading
        spacing
        size="small"
@@ -23,19 +23,19 @@ const InnholdsKort = ({
        id={node._key}
        className="algolia-index-lvl3 text-deepblue-500 scroll-mt-28 focus:outline-none group-hover:underline"
      >
-        <NextLink href={`/${node?.lenke}`} passHref>
-          <a
-            onClick={(e) =>
-              logNav(
-                "prinsipp-kort",
-                window.location.pathname,
-                e.currentTarget.getAttribute("href")
-              )
-            }
-            className="z-10 before:absolute before:inset-0 focus:outline-none"
-          >
-            {node.title}
-          </a>
+        <NextLink
+          href={`/${node?.lenke}`}
+          passHref
+          onClick={(e) =>
+            logNav(
+              "prinsipp-kort",
+              window.location.pathname,
+              e.currentTarget.getAttribute("href")
+            )
+          }
+          className="z-10 before:absolute before:inset-0 focus:outline-none"
+        >
+          {node.title}
        </NextLink>
      </Heading>
      <SanityBlockContent blocks={node.body} noLastMargin />
@@ -27,36 +27,37 @@ const RelatertInnhold = ({
      className={cl(
        "relatedCard",
        "mb-8 max-w-4xl gap-4",
-        "xs:grid-cols-2 grid w-full"
+        "grid w-full sm:grid-cols-2"
      )}
    >
      {node.lenker.map((x) => (
-        <NextLink href={getHref(x)} passHref key={x._key}>
-          <a
-            onClick={(e) =>
-              logNav(
-                "relatert-innhold",
-                window.location.pathname,
-                e.currentTarget.getAttribute("href")
-              )
-            }
-            className="algolia-ignore-index shadow-small focus-visible:shadow-focus bg-surface-default ring-border-subtle group grid rounded border-2 border-transparent px-4 py-3 ring-1 focus:outline-none"
+        <NextLink
+          href={getHref(x)}
+          passHref
+          key={x._key}
+          onClick={(e) =>
+            logNav(
+              "relatert-innhold",
+              window.location.pathname,
+              e.currentTarget.getAttribute("href")
+            )
+          }
+          className="algolia-ignore-index shadow-small focus-visible:shadow-focus bg-surface-default ring-border-subtle group grid rounded border-2 border-transparent px-4 py-3 ring-1 focus:outline-none"
+        >
+          <Heading
+            as="span"
+            size="xsmall"
+            className="underline group-hover:no-underline"
          >
-            <Heading
-              as="span"
-              size="xsmall"
-              className="underline group-hover:no-underline"
-            >
-              {x.title}
-            </Heading>
-            <BodyShort
-              size="small"
-              className="text-text-subtle mt-1 self-end break-words"
-              as="span"
-            >
-              {x.ekstern_domene ? <>{getTag(x)}</> : `aksel.nav.no`}
-            </BodyShort>
-          </a>
+            {x.title}
+          </Heading>
+          <BodyShort
+            size="small"
+            className="text-text-subtle mt-1 self-end break-words"
+            as="span"
+          >
+            {x.ekstern_domene ? <>{getTag(x)}</> : `aksel.nav.no`}
+          </BodyShort>
        </NextLink>
      ))}
    </div>
@@ -109,21 +109,21 @@ const ComponentExamples = ({
                    height={frameState}
                    onLoad={() => handleExampleLoad()}
                    id={iframeId}
-                    aria-label="Komponent eksempler"
+                    aria-label={`${node?.dir?.title} ${fil.navn} eksempel`}
                    className={cl(
                      "min-w-80 block w-full max-w-full resize-x overflow-auto bg-white shadow-[20px_0_20px_-20px_rgba(0,0,0,0.22)]"
                    )}
                    title="Kode-eksempler"
                  />
                </div>
-                <div className="xs:justify-end mb-2 flex justify-center gap-2 rounded-b border border-gray-300 px-2 py-1 text-base ">
+                <div className="mb-2 flex justify-center gap-2 rounded-b border border-gray-300 px-2 py-1 text-base sm:justify-end ">
                  <CodeSandbox code={fil.innhold.trim()} />
                  <Link
                    href={`/eksempler/${node.dir.title}/${fil.navn.replace(
                      ".tsx",
                      ""
                    )}`}
-                    className="text-gray-900"
+                    className="si-ignore text-gray-900"
                    target="_blank"
                  >
                    Åpne i nytt vindu
@@ -3,7 +3,7 @@ import { SanityT, urlFor } from "@/lib";
 import { Heading } from "@navikt/ds-react";
 import Nextlink from "next/link";
 import cl from "clsx";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import { StatusTag } from "components/website-modules/StatusTag";

 const ComponentOverview = ({
@@ -58,8 +58,8 @@ const ComponentOverview = ({
                  <Image
                    src={urlFor(x.status?.bilde).auto("format").url()}
                    decoding="async"
-                    width="200px"
-                    height="200px"
+                    width="200"
+                    height="200"
                    layout="fixed"
                    objectFit="contain"
                    alt={x?.heading + " thumbnail"}
@@ -106,7 +106,11 @@ const ComponentOverview = ({

              <div className="grid p-6 pt-0">
                <span className="flex items-center justify-between">
-                  <Nextlink href={`/${x?.slug.current}`} passHref>
+                  <Nextlink
+                    href={`/${x?.slug.current}`}
+                    passHref
+                    legacyBehavior
+                  >
                    <Heading
                      as="a"
                      size="small"
@@ -62,6 +62,7 @@ const Filter = ({
        }}
        size="small"
        defaultValue="outline"
+        variant="neutral"
      >
        <ToggleGroup.Item value="outline">Outline</ToggleGroup.Item>
        <ToggleGroup.Item value="filled">Filled</ToggleGroup.Item>
@@ -1,7 +1,7 @@
 import meta from "@navikt/ds-icons/meta.json";
 import { BodyShort, Button, Detail, Heading } from "@navikt/ds-react";
-import Image from "next/image";
 import { useEffect, useState } from "react";
+import Image from "next/legacy/image";

 import {
  AmplitudeEvents,
@@ -11,7 +11,7 @@ import {
 } from "@/components";
 import { SanityT } from "@/lib";
 import { Download } from "@navikt/ds-icons";
-import { SuggestionBlock } from "components/website-modules/SuggestionBlock";
+import { SuggestionBlock } from "components/website-modules/suggestionblock";

 const ModalContent = ({ icon }: { icon: string }) => {
  const [blob, setBlob]: any = useState();
@@ -74,7 +74,7 @@ import ${icon} from "@navikt/ds-icons/svg/${icon}.svg";`,

  return (
    <div className="flex min-w-[300px] max-w-xl shrink flex-col">
-      <div className="xs:flex-row mr-16 inline-flex flex-col justify-between gap-4">
+      <div className="mr-16 inline-flex flex-col justify-between gap-4 sm:flex-row">
        <div>
          <Heading
            spacing
@@ -136,8 +136,8 @@ import ${icon} from "@navikt/ds-icons/svg/${icon}.svg";`,
          <Image
            src={`https://raw.githubusercontent.com/navikt/aksel/main/%40navikt/icons/svg/${icon}.svg`}
            decoding="sync"
-            width="96px"
-            height="96px"
+            width="96"
+            height="96"
            layout="fixed"
            objectFit="contain"
            alt={icon + "eksempel lyst"}
@@ -149,8 +149,8 @@ import ${icon} from "@navikt/ds-icons/svg/${icon}.svg";`,
            src={`https://raw.githubusercontent.com/navikt/aksel/main/%40navikt/icons/svg/${icon}.svg`}
            decoding="sync"
            className="invert"
-            width="96px"
-            height="96px"
+            width="96"
+            height="96"
            layout="fixed"
            objectFit="contain"
            alt={icon + " eksempel mørk bakgrunn"}
@@ -8,7 +8,7 @@ import {
 } from "@/components";
 import meta from "@navikt/ds-icons/meta.json";
 import { BodyLong, BodyShort, Heading, Link, Modal } from "@navikt/ds-react";
-import { SuggestionBlock } from "components/website-modules/SuggestionBlock";
+import { SuggestionBlock } from "components/website-modules/suggestionblock";
 import dynamic from "next/dynamic";
 import { useRouter } from "next/router";
 import { useCallback, useEffect, useState } from "react";
@@ -17,7 +17,7 @@ const Tips = ({ node }: { node: SanityT.Schema.tips }): JSX.Element => {
      <div
        className={cl(
          style.tips,
-          "linear xs:px-8 my-8 max-w-2xl rounded-r border-l-[6px] border-l-green-200 bg-white px-4 py-4"
+          "linear my-8 max-w-2xl rounded-r border-l-[6px] border-l-green-200 bg-white px-4 py-4 sm:px-8"
        )}
      >
        <Detail
@@ -71,7 +71,7 @@ const Tips = ({ node }: { node: SanityT.Schema.tips }): JSX.Element => {
    <div
      className={cl(
        style.tips,
-        "xs:px-6 my-7 max-w-2xl px-4 py-3 shadow-[inset_5px_0_0_0_var(--a-gray-500),inset_0_0_0_1px_var(--a-gray-200)]"
+        "my-7 max-w-2xl px-4 py-3 shadow-[inset_5px_0_0_0_var(--a-gray-500),inset_0_0_0_1px_var(--a-gray-200)] sm:px-6"
      )}
    >
      <Detail
@@ -7,7 +7,7 @@ export const Frame = ({
  element: Element,
 }: {
  tokens: { name: string; value: string; description?: string }[];
-  styles: string;
+  styles?: string;
  element?: ({ token, name }: { token: string; name?: string }) => JSX.Element;
 }) => {
  const hasDescription = !!tokens.find((x) => x?.description);
@@ -0,0 +1,128 @@
+import docs from "@navikt/ds-tokens/docs.json";
+import { Frame } from "../Frame";
+
+export const BreakpointsView = ({ cat }: { cat: string }) => {
+  const breakpoints = docs[cat];
+
+  return (
+    <Frame
+      tokens={breakpoints}
+      element={({ name }: { token: string; name?: string }) => {
+        const Svg = getSvg(name);
+        return (
+          <div
+            className="min-h-16 bg-surface-default flex h-full w-full items-center justify-start rounded-md px-4 text-5xl font-semibold"
+            aria-hidden
+          >
+            {Svg}
+          </div>
+        );
+      }}
+    />
+  );
+};
+
+function getSvg(token: string) {
+  switch (true) {
+    case token.includes("xs"):
+      return (
+        <svg
+          width="1em"
+          height="1em"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          focusable={false}
+          aria-hidden
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M7.75 5.77778C7.75 5.16382 8.20527 4.75 8.66667 4.75H15.3333C15.7947 4.75 16.25 5.16382 16.25 5.77778V18.2222C16.25 18.8362 15.7947 19.25 15.3333 19.25H8.66667C8.20527 19.25 7.75 18.8362 7.75 18.2222V5.77778ZM8.66667 3.25C7.28712 3.25 6.25 4.42806 6.25 5.77778V18.2222C6.25 19.5719 7.28712 20.75 8.66667 20.75H15.3333C16.7129 20.75 17.75 19.5719 17.75 18.2222V5.77778C17.75 4.42806 16.7129 3.25 15.3333 3.25H8.66667ZM12 16.75C11.5858 16.75 11.25 17.0858 11.25 17.5C11.25 17.9142 11.5858 18.25 12 18.25H12.01C12.4242 18.25 12.76 17.9142 12.76 17.5C12.76 17.0858 12.4242 16.75 12.01 16.75H12Z"
+            fill="#262626"
+          />
+        </svg>
+      );
+    case token.includes("sm"):
+      return (
+        <svg
+          width="1em"
+          height="1em"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          focusable={false}
+          aria-hidden
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M6.75 5C6.75 4.30964 7.30964 3.75 8 3.75H16C16.6904 3.75 17.25 4.30964 17.25 5V19C17.25 19.6904 16.6904 20.25 16 20.25H8C7.30964 20.25 6.75 19.6904 6.75 19V5ZM8 2.25C6.48122 2.25 5.25 3.48122 5.25 5V19C5.25 20.5188 6.48122 21.75 8 21.75H16C17.5188 21.75 18.75 20.5188 18.75 19V5C18.75 3.48122 17.5188 2.25 16 2.25H8ZM11.5 4.75C11.0858 4.75 10.75 5.08579 10.75 5.5C10.75 5.91421 11.0858 6.25 11.5 6.25H12.5C12.9142 6.25 13.25 5.91421 13.25 5.5C13.25 5.08579 12.9142 4.75 12.5 4.75H11.5Z"
+            fill="#262626"
+          />
+        </svg>
+      );
+
+    case token.includes("md"):
+      return (
+        <svg
+          width="1em"
+          height="1em"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          focusable={false}
+          aria-hidden
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M3.75 6C3.75 5.30964 4.30964 4.75 5 4.75H19C19.6904 4.75 20.25 5.30964 20.25 6V18C20.25 18.6904 19.6904 19.25 19 19.25H5C4.30964 19.25 3.75 18.6904 3.75 18V6ZM5 3.25C3.48122 3.25 2.25 4.48122 2.25 6V18C2.25 19.5188 3.48122 20.75 5 20.75H19C20.5188 20.75 21.75 19.5188 21.75 18V6C21.75 4.48122 20.5188 3.25 19 3.25H5ZM10.5 5.75C10.0858 5.75 9.75 6.08579 9.75 6.5C9.75 6.91421 10.0858 7.25 10.5 7.25H13.5C13.9142 7.25 14.25 6.91421 14.25 6.5C14.25 6.08579 13.9142 5.75 13.5 5.75H10.5Z"
+            fill="#262626"
+          />
+        </svg>
+      );
+
+    case token.includes("lg"):
+      return (
+        <svg
+          width="1em"
+          height="1em"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          focusable={false}
+          aria-hidden
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M5.5 4.25C4.5335 4.25 3.75 5.0335 3.75 6V15C3.75 15.9665 4.5335 16.75 5.5 16.75H18.5C19.4665 16.75 20.25 15.9665 20.25 15V6C20.25 5.0335 19.4665 4.25 18.5 4.25H5.5ZM5.25 6C5.25 5.86193 5.36193 5.75 5.5 5.75H18.5C18.6381 5.75 18.75 5.86193 18.75 6V15C18.75 15.1381 18.6381 15.25 18.5 15.25H5.5C5.36193 15.25 5.25 15.1381 5.25 15V6ZM3 18.25C2.58579 18.25 2.25 18.5858 2.25 19C2.25 19.4142 2.58579 19.75 3 19.75H21C21.4142 19.75 21.75 19.4142 21.75 19C21.75 18.5858 21.4142 18.25 21 18.25H3Z"
+            fill="#262626"
+          />
+        </svg>
+      );
+    case token.includes("xl"):
+      return (
+        <svg
+          width="1em"
+          height="1em"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          focusable={false}
+          aria-hidden
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M2.25 4.5C2.25 3.80964 2.80964 3.25 3.5 3.25H20.5C21.1904 3.25 21.75 3.80964 21.75 4.5V15.5C21.75 16.1904 21.1904 16.75 20.5 16.75H12.75V19.25H19C19.4142 19.25 19.75 19.5858 19.75 20C19.75 20.4142 19.4142 20.75 19 20.75H6C5.58579 20.75 5.25 20.4142 5.25 20C5.25 19.5858 5.58579 19.25 6 19.25H11.25V16.75H3.5C2.80964 16.75 2.25 16.1904 2.25 15.5V4.5ZM3.75 4.75V15.25H20.25V4.75H3.75Z"
+            fill="#262626"
+          />
+        </svg>
+      );
+
+    default:
+      return null;
+  }
+}
@@ -1,4 +1,5 @@
 import { withErrorBoundary } from "@/error-boundary";
+import { BreakpointsView } from "components/sanity-modules/token-view/categories/Breakpoints";
 import { FontView } from "./categories/Font";
 import { GlobalView } from "./categories/Global";
 import { SemanticView } from "./categories/Semantic";
@@ -27,6 +28,8 @@ const TokenView = ({
      return <SpacingView cat={token.title} />;
    case token.title === "z-index":
      return <ZindexView cat={token.title} />;
+    case token.title === "breakpoints":
+      return <BreakpointsView cat={token.title} />;
    default:
      return null;
  }
@@ -16,49 +16,45 @@ const AkselLink = ({
  className?: string;
 }) => {
  return (
-    <Link href={href} passHref>
-      <a
+    <Link
+      href={href}
+      passHref
+      className={cl("group relative w-fit pr-5 focus:outline-none", className, {
+        "white focus-visible:text-text-default focus-visible:bg-blue-200 focus-visible:shadow-[0_0_0_3px_var(--a-blue-200)]":
+          inverted,
+        "text-deepblue-500 focus-visible:text-text-on-action group-hover:text-deepblue-800 focus-visible:bg-blue-800 focus-visible:shadow-[0_0_0_3px_var(--a-blue-800)]":
+          !inverted,
+      })}
+      onClick={(e) =>
+        logNav(
+          "link",
+          window.location.pathname,
+          e.currentTarget.getAttribute("href")
+        )
+      }
+    >
+      {children}
+      <svg
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
        className={cl(
-          "group relative w-fit pr-5 focus:outline-none",
-          className,
-          {
-            "white focus-visible:text-text-default focus-visible:bg-blue-200 focus-visible:shadow-[0_0_0_3px_var(--a-blue-200)]":
-              inverted,
-            "text-deepblue-500 focus-visible:text-text-on-action group-hover:text-deepblue-800 focus-visible:bg-blue-800 focus-visible:shadow-[0_0_0_3px_var(--a-blue-800)]":
-              !inverted,
-          }
+          "ml-2 h-[20px] w-[10px] scale-[0.85] transition-[width,right] group-hover:w-[16px]",
+          "absolute right-[5px] top-1/2 -translate-y-1/2 rotate-180 group-hover:right-0"
        )}
-        onClick={(e) =>
-          logNav(
-            "link",
-            window.location.pathname,
-            e.currentTarget.getAttribute("href")
-          )
-        }
+        aria-hidden
      >
-        {children}
-        <svg
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          className={cl(
-            "ml-2 h-[20px] w-[10px] scale-[0.85] transition-[width,right] group-hover:w-[16px]",
-            "absolute right-[5px] top-1/2 -translate-y-1/2 rotate-180 group-hover:right-0"
-          )}
-          aria-hidden
-        >
-          <path
-            d="M8 17.5L2.12132 11.6213C0.949744 10.4497 0.949746 8.55025 2.12132 7.37868L8 1.5"
-            stroke="currentColor"
-            strokeWidth="1.5"
-          />
-          <path
-            d="M16 9.72266L8 9.72266"
-            strokeWidth="1.5"
-            stroke="currentColor"
-            className="hidden group-hover:block"
-          />
-        </svg>
-      </a>
+        <path
+          d="M8 17.5L2.12132 11.6213C0.949744 10.4497 0.949746 8.55025 2.12132 7.37868L8 1.5"
+          stroke="currentColor"
+          strokeWidth="1.5"
+        />
+        <path
+          d="M16 9.72266L8 9.72266"
+          strokeWidth="1.5"
+          stroke="currentColor"
+          className="hidden group-hover:block"
+        />
+      </svg>
    </Link>
  );
 };
@@ -69,7 +69,11 @@ export const BloggAd = () => {
        </BodyLong>
        <BodyLong>
          Ta kontakt med{" "}
-          <NextLink href="https://nav-it.slack.com/archives/C7NE7A8UF" passHref>
+          <NextLink
+            href="https://nav-it.slack.com/archives/C7NE7A8UF"
+            passHref
+            legacyBehavior
+          >
            <Link className="font-semibold text-[#831843]">
              #Aksel-designsystemet
            </Link>
@@ -18,34 +18,35 @@ export const BreadCrumbs = ({
  }

  return (
-    <NextLink href={href ?? `/god-praksis/${router.query.tema}`} passHref>
-      <a className="text-deepblue-500 hover:text-deepblue-800 group mb-1 flex w-fit items-center justify-start focus:underline focus:outline-none">
-        <svg
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          className={cl(
-            "transition-width text-deepblue-500 group-hover:text-deepblue-800 mr-2 h-[20px] w-[10px] group-hover:w-[16px]"
-          )}
-          aria-hidden
-        >
-          <path
-            d="M8 17.5L2.12132 11.6213C0.949744 10.4497 0.949746 8.55025 2.12132 7.37868L8 1.5"
-            stroke="currentColor"
-            strokeWidth="1.5"
-          />
-          <path
-            d="M16 9.72266L8 9.72266"
-            strokeWidth="1.5"
-            stroke="currentColor"
-            className="hidden group-hover:block"
-          />
-        </svg>
-
-        {text ??
-          (router.query.tema as string).replace(/(^\w|\s\w)/g, (m) =>
-            m.toUpperCase()
-          )}
-      </a>
+    <NextLink
+      href={href ?? `/god-praksis/${router.query.tema}`}
+      passHref
+      className="text-deepblue-500 hover:text-deepblue-800 group mb-1 flex w-fit items-center justify-start focus:underline focus:outline-none"
+    >
+      <svg
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className={cl(
+          "transition-width text-deepblue-500 group-hover:text-deepblue-800 mr-2 h-[20px] w-[10px] group-hover:w-[16px]"
+        )}
+        aria-hidden
+      >
+        <path
+          d="M8 17.5L2.12132 11.6213C0.949744 10.4497 0.949746 8.55025 2.12132 7.37868L8 1.5"
+          stroke="currentColor"
+          strokeWidth="1.5"
+        />
+        <path
+          d="M16 9.72266L8 9.72266"
+          strokeWidth="1.5"
+          stroke="currentColor"
+          className="hidden group-hover:block"
+        />
+      </svg>
+      {text ??
+        (router.query.tema as string).replace(/(^\w|\s\w)/g, (m) =>
+          m.toUpperCase()
+        )}
    </NextLink>
  );
 };
@@ -1,4 +1,4 @@
-import Image from "next/image";
+import Image from "next/legacy/image";
 import NextLink from "next/link";
 import { dateStr } from "@/utils";
 import { BodyLong, BodyShort, Heading, Link } from "@navikt/ds-react";
@@ -98,7 +98,7 @@ export const LatestBloggposts = ({
              />
            )}
          </div>
-          <NextLink href={`/${bloggs[0].slug}`} passHref>
+          <NextLink href={`/${bloggs[0].slug}`} passHref legacyBehavior>
            <Link className="text-deepblue-500 no-underline hover:underline">
              <Heading
                size="large"
@@ -163,7 +163,7 @@ export const LatestBloggposts = ({
                  </div>
                )}
                <div>
-                  <NextLink href={`/${blog.slug}`} passHref>
+                  <NextLink href={`/${blog.slug}`} passHref legacyBehavior>
                    <Link className="text-deepblue-500 no-underline hover:underline">
                      <Heading
                        size="small"
@@ -236,7 +236,7 @@ export const LatestBloggposts = ({
              />
            )}
          </div>
-          <NextLink href={`/${bloggs[0].slug}`} passHref>
+          <NextLink href={`/${bloggs[0].slug}`} passHref legacyBehavior>
            <Link className="text-deepblue-500 no-underline hover:underline">
              <Heading
                size="large"
@@ -295,7 +295,7 @@ export const LatestBloggposts = ({
                </div>
              )}
              <div>
-                <NextLink href={`/${blog.slug}`} passHref>
+                <NextLink href={`/${blog.slug}`} passHref legacyBehavior>
                  <Link className="text-deepblue-500 no-underline hover:underline">
                    <Heading
                      size="small"
@@ -41,8 +41,9 @@ function PreviewBanner(): JSX.Element {
          <Link
            href="https://aksel.nav.no/god-praksis/artikler/ny-redaktor-i-aksel"
            passHref
+            className="underline"
          >
-            <a className="underline">Les mer om hvordan du får tilgang</a>
+            Les mer om hvordan du får tilgang
          </Link>
        </div>
      </>
@@ -131,7 +131,7 @@ export function TableOfContentsv2({
  return (
    <aside
      className={cl(
-        "algolia-ignore-index xs:-mr-6 sticky top-20 z-[1] order-1 my-0 ml-6 mb-16 mr-auto h-full w-full max-w-[160px] flex-col items-start md:-mr-10",
+        "algolia-ignore-index sticky top-20 z-[1] order-1 my-0 ml-6 mb-16 mr-auto h-full w-full max-w-[160px] flex-col items-start sm:-mr-6 md:-mr-10",
        {
          hidden: !renderToc,
          "hidden xl:flex": renderToc,
@@ -77,7 +77,7 @@ export const ToolCard = () => {
            <div className="-rotate-45">{t.icon}</div>
          </div>
          <div>
-            <NextLink href={t.href} passHref>
+            <NextLink href={t.href} passHref legacyBehavior>
              <Link
                className="text-text-default mb-1 font-semibold"
                onClick={(e) =>
@@ -1,5 +1,5 @@
 import { LightBulb } from "@navikt/ds-icons";
-import { BodyLong, BodyShort, Heading } from "@navikt/ds-react";
+import { BodyLong, BodyShort, Button, Heading } from "@navikt/ds-react";
 import cl from "classnames";
 import { ChangeLogIconOutline } from "components/assets";

@@ -23,12 +23,14 @@ const SuggestionBlockComponent = ({
          {options[variant]?.heading}
        </Heading>
        <BodyLong className="mt-2">{options[variant]?.text}</BodyLong>
-        <a
+        <Button
+          variant="secondary-neutral"
+          as="a"
          href={options[variant].link + reference}
-          className="border-border-strong active:bg-surface-active hover:bg-surface-hover focus-visible:shadow-focus mt-4 w-fit rounded border-[2px] px-3 py-[6px] font-semibold focus:outline-none"
+          className="mt-4 w-fit"
        >
          Send innspill
-        </a>
+        </Button>
      </div>
    </div>
  );
@@ -55,7 +57,7 @@ export const SuggestionBlock = ({
  return (
    <div
      className={cl(
-        "ring-border-subtle flex justify-between rounded-lg px-6 py-4 ring-1",
+        "ring-border-subtle flex justify-between gap-3 rounded-lg px-6 py-4 ring-1",
        {
          "mb-0 mt-5": variant === "ikon" || variant === "ikon-ny",
          "mb-12": variant !== "ikon" && variant !== "ikon-ny",
@@ -67,12 +69,13 @@ export const SuggestionBlock = ({
        <LightBulb aria-hidden className="shrink-0 text-2xl" />
        {options[variant]?.text}
      </BodyShort>
-      <a
+      <Button
+        variant="secondary-neutral"
+        as="a"
        href={options[variant]?.link + reference}
-        className="border-border-strong active:bg-surface-active hover:bg-surface-hover focus-visible:shadow-focus rounded border-[2px] px-3 py-[6px] font-semibold focus:outline-none"
      >
        Send forslag
-      </a>
+      </Button>
    </div>
  );
 };
@@ -114,7 +117,7 @@ const options: {
    text: "Har du innspill til ikonet?",
    link:
      issueUrl +
-      "&labels=forespørsel+🥰%2Cnytt+✨&template=update-icon.yml&title=%5BInnspill+til+ikon%5D%3A+",
+      "&labels=forespørsel+🥰%2Cnytt+✨%2Cikoner+🖼&template=update-icon.yml&title=%5BTilbakemelding%20p%C3%A5%20ikon%5D%3A+",
  },
  "komponent-ny": {
    text: "Denne komponenten er ny eller oppdatert. Tar du den i bruk ønsker vi gjerne innspill til hvordan den fungerer i tjenesten din!",
@@ -0,0 +1,41 @@
+import { SuggestionBlock } from "./index";
+import { Meta } from "@storybook/react";
+import { NextDecorator } from "../../StoryDecorator";
+
+const MetaData: Meta = {
+  component: SuggestionBlock,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <NextDecorator>
+        <Story />
+      </NextDecorator>
+    ),
+  ],
+};
+
+export default MetaData;
+
+export const Ikoner = {
+  render: () => <SuggestionBlock variant="ikoner" />,
+};
+
+export const Ikon = {
+  render: () => <SuggestionBlock variant="ikon" />,
+};
+
+export const Komponent = {
+  render: () => <SuggestionBlock variant="komponent" />,
+};
+
+export const KomponentBeta = {
+  render: () => <SuggestionBlock variant="komponent-beta" />,
+};
+
+export const KomponentNy = {
+  render: () => <SuggestionBlock variant="komponent-ny" />,
+};
+
+export const Komponenter = {
+  render: () => <SuggestionBlock variant="komponenter" />,
+};
@@ -196,7 +196,12 @@ const contributorsSingle = `contributors[0]->{
 export const akselBloggPosts = `*[_type == "blogg_landingsside"][0]{
  "page": {..., intro[]{...,${deRefs}}},
  "bloggposts": *[_type == "aksel_blogg"] | order(_createdAt desc){
-    ...,
+    seo,
+    heading,
+    ingress,
+    publishedAt,
+    _createdAt,
+    _id,
    "slug": slug.current,
    ${contributorsAll}
  }
@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable no-undef */

-const withTM = require("next-transpile-modules")(["@navikt/ds-tokens"]);
 const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
 });
@@ -51,75 +50,72 @@ const securityHeaders = [
 ];

 const config = () =>
-  withBundleAnalyzer(
-    withTM({
-      serverRuntimeConfig: {
-        // Will only be available on the server side
-        azureAppClientId: process.env.AZURE_APP_CLIENT_ID,
-        azureJwksUri: process.env.AZURE_OPENID_CONFIG_JWKS_URI,
-        azureAppIssuer: process.env.AZURE_OPENID_CONFIG_ISSUER,
-        azureAppWellKnownUrl: process.env.AZURE_APP_WELL_KNOWN_URL,
-        azureAppJWK: process.env.AZURE_APP_JWK,
-      },
-      publicRuntimeConfig: {
-        NEXT_PUBLIC_TEST: process.env.NEXT_PUBLIC_TEST,
-      },
-      async headers() {
-        return [
-          {
-            source: "/:path*",
-            headers: securityHeaders,
-          },
-        ];
-      },
-      async redirects() {
-        return [
-          {
-            source: "/studio",
-            destination: "/admin",
-            permanent: true,
-          },
-          {
-            source: "/storybook",
-            destination:
-              "https://main--5f801fb2aea7820022de2936.chromatic.com/",
-            permanent: true,
-          },
-          {
-            source: "/prinsipper",
-            destination: "/",
-            permanent: false,
-          },
-          {
-            source: "/preview/:slug*",
-            destination: "/api/preview?slug=:slug*",
-            permanent: true,
-          },
-        ];
+  withBundleAnalyzer({
+    transpilePackages: ["@navikt/ds-tokens"],
+    serverRuntimeConfig: {
+      // Will only be available on the server side
+      azureAppClientId: process.env.AZURE_APP_CLIENT_ID,
+      azureJwksUri: process.env.AZURE_OPENID_CONFIG_JWKS_URI,
+      azureAppIssuer: process.env.AZURE_OPENID_CONFIG_ISSUER,
+      azureAppWellKnownUrl: process.env.AZURE_APP_WELL_KNOWN_URL,
+      azureAppJWK: process.env.AZURE_APP_JWK,
+    },
+    publicRuntimeConfig: {
+      NEXT_PUBLIC_TEST: process.env.NEXT_PUBLIC_TEST,
+    },
+    async headers() {
+      return [
+        {
+          source: "/:path*",
+          headers: securityHeaders,
+        },
+      ];
+    },
+    rewrites: async () => [
+      {
+        source: "/sitemap.xml",
+        destination: "/api/sitemap",
      },
+    ],
+    async redirects() {
+      return [
+        {
+          source: "/studio",
+          destination: "/admin",
+          permanent: true,
+        },
+        {
+          source: "/storybook",
+          destination: "https://main--5f801fb2aea7820022de2936.chromatic.com/",
+          permanent: false,
+        },
+        {
+          source: "/prinsipper",
+          destination: "/",
+          permanent: false,
+        },
+        {
+          source: "/preview/:slug*",
+          destination: "/api/preview?slug=:slug*",
+          permanent: true,
+        },
+      ];
+    },
+    webpack(config) {
+      config.module.rules.push({
+        test: /\.svg$/,
+        use: ["@svgr/webpack"],
+      });

-      webpack(config) {
-        config.module.rules.push({
-          test: /\.svg$/,
-          use: ["@svgr/webpack"],
-        });
-
-        return config;
-      },
-      images: {
-        domains: ["cdn.sanity.io", "raw.githubusercontent.com"],
-        dangerouslyAllowSVG: true,
-      },
-      /* swcMinify: true,
-      httpAgentOptions: {
-        keepAlive: false,
-      }, */
-    })
-  );
+      return config;
+    },
+    images: {
+      domains: ["cdn.sanity.io", "raw.githubusercontent.com"],
+      dangerouslyAllowSVG: true,
+    },
+  });

 if (process.env.NODE_ENV === "production") {
-  /* console.log("sentry is enabled");
-  module.exports = withSentryConfig(config(), { silent: true }); */
  module.exports = config();
 } else {
  module.exports = config();
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot]	2c7e86503f	Version Packages (#1833 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-03-01 18:07:06 +01:00
Ken	4abe46455a	🎨 Breakpoints dokumentasjon og token-visning	2023-03-01 17:38:09 +01:00
Ken	8893b5c82d	[Tokens] Breakpoint-tokens (#1832 )	2023-03-01 17:10:01 +01:00
Ken	19b16fff75	🐛 Fjernet flaky button-story fra chromatic	2023-03-01 14:13:34 +01:00
Ken	2f1974d7bf	📝 Oppdatert egnet-til/uegnet-til tekster i komponent-intro	2023-03-01 14:06:43 +01:00
github-actions[bot]andgithub-actions[bot]	b07972d7dd	Version Packages (#1830 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-03-01 13:37:07 +01:00
Ken	f962bc7816	🎨 Fikset chrome-bug for disabled select i chrome	2023-03-01 13:34:51 +01:00
github-actions[bot]andgithub-actions[bot]	0cba7a93b8	Version Packages (#1829 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-02-28 15:47:06 +01:00
Kai Erik Schieren Ken Ken github-actions[bot]Ken github-actions[bot]Snyk bot	a7ce61f840	New/list (#1823 ) * 🎉 setup * 💄 add stylesheet * 🎨 conditional type * 🎨 add listitem * 🎨 add title + desc + refactor * 🎨 added title and description * ♿ add aria labels * 🎨 add headingTag prop * 🎨 add stories * 🎨 update ListItem API * 💄 ul markers * 🎨 update markers * 🎨 add icons story * 🎨 ordered markers * 🎨 update stories * 🎨 tweak list props * 💄 update classes * 💄 update classes again * 🎨 remove icon if ol * 🎨 update stories * 🎨 use default counter for ol * 🎨 h4 > span * 🎨 use bodyshort default * 🎨 update stories * 🎨 tweaks * 🎨 Css-tokens * 🎨 update aria Co-authored-by: Ken <KenAJoh@users.noreply.github.com> * 🎨 refactor css and remove test story co authored by OleJørgen and Ken * 🎨 add examples * 🎨 update examples * Update @navikt/core/css/list.css Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> * Update @navikt/core/css/list.css Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> * 🎨 La til tokens-doc * 🔖 changeset * 🎨 add console warn * 💄 tweak margin to support nested list * 🎨 nested story * 🎨 add nested example * 🚧 detect nested lists * 💄 change margins for nested lists * 💄 tweak margins * Update @navikt/core/react/src/list/List.tsx * ⬆️ Storybook beta 45 -> 54 * ✨ add fixedWeeks option to standalone (#1827) * ✨ add fixedWeeks option to standalone * 🔖 changeset * ♿ Fikset siteimprove feilmeldinger for kode-eksempler * Version Packages (#1828) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * 🔥 Fjernet redundant console.log * [Snyk] Security upgrade node from 16.13.1-alpine3.14 to 18.1-alpine3.14 (#1826) * 🔖 changeset --------- Co-authored-by: Ken <ken.aleksander@gmail.com> Co-authored-by: Ken <KenAJoh@users.noreply.github.com> Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Snyk bot <snyk-bot@snyk.io>	2023-02-28 15:44:13 +01:00
Snyk bot	35e8da7811	[Snyk] Security upgrade node from 16.13.1-alpine3.14 to 18.1-alpine3.14 (#1826 )	2023-02-28 14:59:28 +01:00
Ken	8953185f80	🔥 Fjernet redundant console.log	2023-02-28 14:23:44 +01:00
github-actions[bot]andgithub-actions[bot]	43b0301d7c	Version Packages (#1828 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-02-28 14:03:10 +01:00
Ken	d77b766a56	♿ Fikset siteimprove feilmeldinger for kode-eksempler	2023-02-28 13:36:40 +01:00
Kai Erik Schieren	98c06b0be2	✨ add fixedWeeks option to standalone (#1827 ) * ✨ add fixedWeeks option to standalone * 🔖 changeset	2023-02-28 13:30:28 +01:00
Ken	61b84e14fb	⬆️ Storybook beta 45 -> 54	2023-02-28 12:24:30 +01:00
KenandKai Erik Schieren	edbbc53cdb	[Website] Oppdatert next 12 -> 13.2, sanity 3.2 -> 3.5 (#1822 ) Co-authored-by: Kai Erik Schieren <kai.schieren@soprasteria.com>	2023-02-24 11:30:56 +01:00
github-actions[bot]andgithub-actions[bot]	5c78776941	Version Packages (#1819 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-02-23 12:10:28 +01:00
Kai Erik Schieren Ken Ken Ken	70eeb24b38	List komponent (#1807 ) * 🎉 setup * 💄 add stylesheet * 🎨 conditional type * 🎨 add listitem * 🎨 add title + desc + refactor * 🎨 added title and description * ♿ add aria labels * 🎨 add headingTag prop * 🎨 add stories * 🎨 update ListItem API * 💄 ul markers * 🎨 update markers * 🎨 add icons story * 🎨 ordered markers * 🎨 update stories * 🎨 tweak list props * 💄 update classes * 💄 update classes again * 🎨 remove icon if ol * 🎨 update stories * 🎨 use default counter for ol * 🎨 h4 > span * 🎨 use bodyshort default * 🎨 update stories * 🎨 tweaks * 🎨 Css-tokens * 🎨 update aria Co-authored-by: Ken <KenAJoh@users.noreply.github.com> * 🎨 refactor css and remove test story co authored by OleJørgen and Ken * 🎨 add examples * 🎨 update examples * Update @navikt/core/css/list.css Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> * Update @navikt/core/css/list.css Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> * 🎨 La til tokens-doc * 🔖 changeset --------- Co-authored-by: Ken <ken.aleksander@gmail.com> Co-authored-by: Ken <KenAJoh@users.noreply.github.com> Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>	2023-02-23 12:04:05 +01:00
Ken	2b98dd9c15	📝 Forbedret tekster på forside	2023-02-22 14:34:38 +01:00
Ken	84946d4d4d	🎨 Kode-lenker på /komponenter	2023-02-22 14:32:30 +01:00
Ken	ce7af9dd13	🐛 Fikset CC-år i footer	2023-02-22 14:26:13 +01:00
github-actions[bot]andgithub-actions[bot]	b769d21d7c	Version Packages (#1818 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-02-22 13:54:03 +01:00
Ken	241b2e678f	🐛 Fikset feil bruk av fallback-tokens i textarea, timeline	2023-02-22 13:48:15 +01:00
Ken	c3e7bc0ada	📝 Linter	2023-02-22 13:43:56 +01:00
github-actions[bot]andgithub-actions[bot]	90ae03a7fc	Version Packages (#1816 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-02-21 23:24:25 +01:00
Ken	51b62cca7b	📝 Changeset	2023-02-21 23:05:08 +01:00
Ken	b2213e934f	💄 Fikset select-small høyde 34px -> 32px	2023-02-21 23:03:30 +01:00
Ingrid Fosså	7702c65275	Fiksar midtstilling av tekst i Select for Firefox (#1813 )	2023-02-21 22:59:06 +01:00
Ken	176e78bc56	📝 Endre eksempel-tekst for button	2023-02-17 12:03:53 +01:00
Ken	4f510eaade	📄	2023-02-17 11:27:45 +01:00
Ken	2e712e77fa	🏷️ Fikset skrivefeil	2023-02-16 15:14:20 +01:00
Ken	30fca8acdd	🎨 Send-forslag knapp nå default button secondary neutral	2023-02-16 14:29:44 +01:00
Ken	8119d93ca9	🚚 Flyttet netural-varianter ut til egne demoer	2023-02-16 14:26:17 +01:00
github-actions[bot]andgithub-actions[bot]	d81e67c374	Version Packages (#1809 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-02-16 13:49:07 +01:00
Ken	43463444b8	💄 Justering semantiske farger, tokens (#1787 )	2023-02-16 13:42:02 +01:00
Ken	c0929a534d	💄 Neutral-variant av Button og ToggleGroup (#1789 )	2023-02-16 13:23:53 +01:00
Ken	859eac8ccb	🎨 Oppdatert feedback-visning i sanity	2023-02-15 15:36:44 +01:00
Ken	34a1e090e2	♿ Fikset siteimprove feilmeldinge relatert til ikke-justerbar tekst	2023-02-15 09:34:07 +01:00
Ken	37e195d8b1	⚡ Allokert mer ressurser for testing av raskere søk	2023-02-14 20:55:48 +01:00
Ken	df5c36012b	🎨 Oppdatert dato for copyright	2023-02-14 19:16:28 +01:00
Ken	abdc99850c	🎨 Liten forbedring feedback	2023-02-14 19:15:16 +01:00
Ken	fa90f48e83	📝 Nettside Readme	2023-02-14 15:10:18 +01:00
Ken	90ad65d6d7	🐛 Storybook build brakk, som da brakk chromatic	2023-02-14 14:13:56 +01:00
Ken	1a34754be1	💄 Bedre visning av popover-demo for placement	2023-02-14 14:11:19 +01:00
Ken	15f056cc27	🎨 Oppdatert forsidelenker til å gå direkte til mest relevante sider	2023-02-14 14:05:50 +01:00
Ken	f15312a9d7	✅ Fikset feilet test etter refactor av eksemplel-generings script	2023-02-14 12:12:40 +01:00
Ken	c23cb8445a	🎨 Fikset kodeeksempler, fjernet storybook-snippet fra publisert kode 🎨 Oppdatert kodedemo for popover	2023-02-14 11:57:48 +01:00
Martin Berglund	3c97e0f1ea	Legger til støtte for kyrillisk alfabet i Source Sans 3 (#1805 )	2023-02-13 12:33:13 +01:00
Ken	abdeb6f0fe	Merge branch 'main' of https://github.com/navikt/aksel	2023-02-10 17:06:28 +01:00
Ken	9e940aa91a	🎨 La til cross-env for storybook-dev	2023-02-10 17:06:21 +01:00
Ken	b92fe88d3f	✨ Eksempler på aksel.nav.no blir nå lastet i Storybook for dev (#1803 )	2023-02-10 16:41:50 +01:00
Ken	4d9ddc3a73	🔧 Storybook-redirect ikke lenger permanent	2023-02-10 14:42:41 +01:00
Ken	c565f3ca91	✨ Satt opp story-rendering for next-appen (#1796 )	2023-02-09 15:45:07 +01:00
Ole Jørgen Bakken Ole Jørgen Ken	5f1fb0a4a1	Ikon label og tekstendringer (#1798 ) Co-authored-by: Ole Jørgen <olejorgenbakken@icloud.com> Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>	2023-02-09 14:29:23 +01:00