Version Packages (#2720 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Deprecate Panel (#2712 )
2026-10-19 04:02:04 +00:00 · 2024-02-08 13:08:21 +01:00 · 2024-02-08 11:46:20 +01:00 · 2024-02-07 20:31:25 +01:00 · 2024-02-07 16:17:17 +01:00 · 2024-02-07 13:42:58 +01:00
110 changed files with 1508 additions and 810 deletions
@@ -59,7 +59,9 @@ jobs:
          exitZeroOnChanges: false
          buildScriptName: "build:storybook"
          onlyChanged: true
+          untraced: "**/package.json|yarn.lock|**/*.md"
          externals: \@navikt/core/css/**/*.css
+          traceChanged: true
        env:
          STORYBOOK_GITHUB_SHA: ${{ github.sha }}

@@ -2,6 +2,9 @@ name: Release

 on:
  push:
+    paths:
+      - ".changeset/**"
+      - "@navikt/**"
    branches:
      - main
  workflow_dispatch:
@@ -1,17 +1,16 @@
-name: Update article views
+name: Redeploy Naisjob (update-article-views)
 on:
  workflow_dispatch:
 jobs:
  execute:
    runs-on: ubuntu-latest
-    permissions: # TODO: remove once merged
+    permissions:
      packages: "write"
      contents: "read"
      id-token: "write"
    steps:
      - uses: actions/checkout@v3
        with:
-          ref: gp-popular-articles # TODO: remove once merged
          fetch-depth: 1
      - uses: denoland/setup-deno@v1
        with:
@@ -31,7 +30,7 @@ jobs:
        with:
          team: designsystem
          push_image: true
-          dockerfile: scripts/article-views/Dockerfile
+          dockerfile: scripts/article-views/Dockerfile.update-article-views
          project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}
          identity_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}
      - name: start naisjob prod-gcp
@@ -1,5 +1,5 @@
-**/nais-dev.yaml
-**/nais-prod.yaml
+**/nais*.yaml
+**/nais*.yml
 **/codemod/**/tests/**/*.js
 node_modules
 .next
@@ -10,7 +10,7 @@ export const parameters = {
        "Getting started",
        "ds-react",
        ["Primitives"],
-        ["Default"],
+        ["Default", "Controls"],
        "Aksel-icons",
      ],
    },
@@ -0,0 +1,13 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "denoland.vscode-deno",
+    "esbenp.prettier-vscode",
+    "github.vscode-github-actions",
+    "ms-playwright.playwright",
+    "sanity-io.vscode-sanity",
+    "stylelint.vscode-stylelint",
+    "vunguyentuan.vscode-css-variables",
+    "bradlc.vscode-tailwindcss"
+  ]
+}
@@ -0,0 +1,15 @@
+{
+  "cssVariables.lookupFiles": ["@navikt/core/css/dist/index.css"],
+  "eslint.problems.shortenToSingleLine": true,
+  "deno.enablePaths": ["scripts/article-views", "scripts/changelog"],
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "deno.lint": true,
+  "files.watcherExclude": {
+    "**/.yarn/**": true,
+    "**/dist": true,
+    "**/esm": true,
+    "**/cjs": true
+  },
+  "playwright.reuseBrowser": true,
+  "typescript.tsdk": "node_modules/typescript/lib"
+}
@@ -1,5 +1,19 @@
 # @navikt/aksel-icons

+## 5.18.1
+
+## 5.18.0
+
+## 5.17.5
+
+## 5.17.4
+
+## 5.17.3
+
+## 5.17.2
+
+## 5.17.1
+
 ## 5.17.0

 ## 5.16.0
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-icons",
-  "version": "5.17.0",
+  "version": "5.18.1",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -1,5 +1,19 @@
 # @navikt/aksel-stylelint

+## 5.18.1
+
+## 5.18.0
+
+## 5.17.5
+
+## 5.17.4
+
+## 5.17.3
+
+## 5.17.2
+
+## 5.17.1
+
 ## 5.17.0

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

+## 5.18.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.18.1
+
+## 5.18.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.18.0
+
+## 5.17.5
+
+### Patch Changes
+
+- Updated dependencies [[`dcca2a956`](https://github.com/navikt/aksel/commit/dcca2a95600152cb84c3b79ba5bb3894ac63e881)]:
+  - @navikt/ds-css@5.17.5
+
+## 5.17.4
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.17.4
+
+## 5.17.3
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.17.3
+
+## 5.17.2
+
+### Patch Changes
+
+- Updated dependencies [[`fdfdebfa9`](https://github.com/navikt/aksel/commit/fdfdebfa99e594099bcea7b5addde9cdabc727a7)]:
+  - @navikt/ds-css@5.17.2
+
+## 5.17.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.17.1
+
 ## 5.17.0

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

+## 5.18.1
+
+## 5.18.0
+
+## 5.17.5
+
+### Patch Changes
+
+- ExpansionCard: Padding-top for Content er justert opp 8px (medium) og 4px (small) ([#2699](https://github.com/navikt/aksel/pull/2699))
+
+## 5.17.4
+
+## 5.17.3
+
+## 5.17.2
+
+### Patch Changes
+
+- Checkbox: I noen edgecaser ved bruk av shadow-dom ble ikke checkmark sentert i Checkbox ([#2682](https://github.com/navikt/aksel/pull/2682))
+
+## 5.17.1
+
 ## 5.17.0

 ### Minor Changes
@@ -177,7 +177,7 @@
 * Content *
 *************************/
 .navds-expansioncard__content {
-  --__ac-expansioncard-padding-block: var(--a-spacing-3);
+  --__ac-expansioncard-padding-block: var(--a-spacing-5);

  border-end-end-radius: var(--__ac-expansioncard-border-radius);
  border-end-start-radius: var(--__ac-expansioncard-border-radius);
@@ -187,6 +187,10 @@
  border-top: none;
 }

+.navds-expansioncard--small .navds-expansioncard__content {
+  --__ac-expansioncard-padding-block: var(--a-spacing-4);
+}
+
 .navds-expansioncard__content--closed {
  display: none;
 }
@@ -143,6 +143,10 @@
  height: 1.5rem;
  transform: translate(var(--a-spacing-1-alt));
  pointer-events: none;
+
+/* Fixed edcase where when using in shadow-dom, svg will not center */
+  display: flex;
+  align-items: center;
 }

 .navds-checkbox--small .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "5.17.0",
+  "version": "5.18.1",
  "description": "CSS for NAV Designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -27,7 +27,7 @@
    "css:get-version": "node config/get-version.js"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^5.17.0",
+    "@navikt/ds-tokens": "^5.18.1",
    "cssnano": "6.0.0",
    "fast-glob": "3.2.11",
    "lodash": "4.17.21",
@@ -1,5 +1,79 @@
 # @navikt/ds-react

+## 5.18.1
+
+### Patch Changes
+
+- Panel: Komponent er nå markert som deprecated. Bruk `Box` i fremtiden. ([#2712](https://github.com/navikt/aksel/pull/2712))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.18.1
+  - @navikt/aksel-icons@5.18.1
+
+## 5.18.0
+
+### Minor Changes
+
+- Portal: Ny komponent `Portal` som lar deg enkelt bruke `createPortal`, også på serversiden ([#2697](https://github.com/navikt/aksel/pull/2697))
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.18.0
+  - @navikt/aksel-icons@5.18.0
+
+## 5.17.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.17.5
+  - @navikt/aksel-icons@5.17.5
+
+## 5.17.4
+
+### Patch Changes
+
+- Bleed: `marginInline='full'` og `reflectivePadding` kan nå brukes sammen. ([#2695](https://github.com/navikt/aksel/pull/2695))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.17.4
+  - @navikt/aksel-icons@5.17.4
+
+## 5.17.3
+
+### Patch Changes
+
+- :bug: Textarea: maxLength virker nå selv om man sender inn onChange uten å sende inn value ([#2690](https://github.com/navikt/aksel/pull/2690))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.17.3
+  - @navikt/aksel-icons@5.17.3
+
+## 5.17.2
+
+### Patch Changes
+
+- :bug: Textarea: Sett riktig høyde når brukt i Modal + StrictMode ([#2679](https://github.com/navikt/aksel/pull/2679))
+
+- DatePicker: Knapper fikk ikke riktig aria-label ([#2678](https://github.com/navikt/aksel/pull/2678))
+
+- Textarea: debounce ResizeObserver for å unngå feilmelding ([#2685](https://github.com/navikt/aksel/pull/2685))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.17.2
+  - @navikt/aksel-icons@5.17.2
+
+## 5.17.1
+
+### Patch Changes
+
+- Eksponer variabelen "role" i Search-komponenten ([#2667](https://github.com/navikt/aksel/pull/2667))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.17.1
+  - @navikt/aksel-icons@5.17.1
+
 ## 5.17.0

 ### Minor Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "5.17.0",
+  "version": "5.18.1",
  "description": "Aksel react-components for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -38,8 +38,8 @@
  },
  "dependencies": {
    "@floating-ui/react": "0.25.4",
-    "@navikt/aksel-icons": "^5.17.0",
-    "@navikt/ds-tokens": "^5.17.0",
+    "@navikt/aksel-icons": "^5.18.1",
+    "@navikt/ds-tokens": "^5.18.1",
    "@radix-ui/react-tabs": "1.0.0",
    "@radix-ui/react-toggle-group": "1.0.0",
    "clsx": "^1.2.1",
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Accordion, AccordionProps } from ".";
-import { Table } from "..";
+import { Table } from "../table";
 import AccordionContent from "./AccordionContent";
 import AccordionHeader from "./AccordionHeader";
 import AccordionItem from "./AccordionItem";
@@ -1,12 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { expect, userEvent, within } from "@storybook/test";
 import React from "react";
-import { Alert, AlertProps } from ".";
-import { BodyLong, Heading as DsHeading, Link } from "..";
+import { VStack } from "../layout/stack";
+import { Link } from "../link";
+import { BodyLong, Heading as DsHeading } from "../typography";
+import Alert, { AlertProps } from "./Alert";

 const meta: Meta<typeof Alert> = {
  title: "ds-react/Alert",
  component: Alert,
+  parameters: {
+    chromatic: { disable: true },
+  },
 };

 export default meta;
@@ -20,12 +24,13 @@ const variants: AlertProps["variant"][] = [
  "success",
 ];

-export const Default: Story = {
+export const Controls: Story = {
  render: (props) => <Alert {...props} />,

  args: {
    children: "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
    fullWidth: false,
+    inline: false,
    variant: "info",
    size: "medium",
    closeButton: false,
@@ -42,43 +47,18 @@ export const Default: Story = {
  },
 };

-export const Small: Story = {
-  render: (props) => {
-    return (
-      <div className="colgap">
-        {variants.map((variant, i) => (
-          <Alert
-            key={variant}
-            variant={variant}
-            size="small"
-            closeButton={props.closeButton}
-          >
-            {new Array(i + 1).fill(
-              "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
-            )}
-          </Alert>
-        ))}
-      </div>
-    );
-  },
-
-  args: {
-    closeButton: false,
-  },
-};
-
-export const FullWidth = () => {
+export const Variants = () => {
  return (
    <div className="colgap">
      {variants.map((variant, i) => (
-        <Alert key={variant} variant={variant} fullWidth>
+        <Alert key={variant} variant={variant}>
          {new Array(i + 1).fill(
            "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
          )}
        </Alert>
      ))}
      {variants.map((variant, i) => (
-        <Alert key={variant} variant={variant} fullWidth size="small">
+        <Alert key={variant} variant={variant} size="small">
          {new Array(i + 1).fill(
            "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
          )}
@@ -88,24 +68,42 @@ export const FullWidth = () => {
  );
 };

+export const FullWidth = () => {
+  return (
+    <VStack gap="4">
+      <Alert variant="info" fullWidth>
+        Id elit esse enim reprehenderit enim nisi veniam nostrud.
+      </Alert>
+      <Alert variant="info" fullWidth size="small">
+        Id elit esse enim reprehenderit enim nisi veniam nostrud.
+      </Alert>
+    </VStack>
+  );
+};
+
 export const Inline = () => {
  return (
-    <div className="colgap">
-      {variants.map((variant, i) => (
-        <Alert key={variant} variant={variant} inline>
-          {new Array(i + 1).fill(
-            "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
-          )}
-        </Alert>
-      ))}
-      {variants.map((variant, i) => (
-        <Alert key={variant} variant={variant} inline size="small">
-          {new Array(i + 1).fill(
-            "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
-          )}
-        </Alert>
-      ))}
-    </div>
+    <VStack gap="4">
+      <h2>Inline</h2>
+      <Alert variant="info" inline>
+        Id elit esse enim reprehenderit enim nisi veniam nostrud.
+      </Alert>
+      <Alert variant="info" inline>
+        Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
+        enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+        reprehenderit enim nisi veniam nostrud. Id elit esse enim reprehenderit
+        enim nisi veniam nostrud.
+      </Alert>
+      <Alert variant="info" size="small" inline>
+        Id elit esse enim reprehenderit enim nisi veniam nostrud.
+      </Alert>
+      <Alert variant="info" size="small" inline>
+        Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
+        enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+        reprehenderit enim nisi veniam nostrud. Id elit esse enim reprehenderit
+        enim nisi veniam nostrud.
+      </Alert>
+    </VStack>
  );
 };

@@ -136,82 +134,173 @@ export const Heading = () => {
  );
 };

-export const Links = () => {
-  return (
-    <div className="colgap">
-      {variants.map((variant) => (
-        <Alert key={variant} variant={variant}>
-          <Link href="#">Id elit esse enim reprehenderit</Link>
-        </Alert>
-      ))}
-    </div>
-  );
-};
-
-const AlertWithCloseButton = ({
-  children,
-  size,
-}: {
-  size?: "medium" | "small";
-  children?: React.ReactNode;
-}) => {
-  const [show, setShow] = React.useState(true);
-
-  return show ? (
-    <Alert
-      variant="warning"
-      size={size}
-      closeButton
-      onClose={() => setShow(false)}
-    >
-      {children || "Content"}
-    </Alert>
-  ) : null;
-};
-
-export const WithCloseButton: Story = {
+export const CloseButton: Story = {
  render: () => {
    return (
-      <div className="colgap">
-        <AlertWithCloseButton />
-        <AlertWithCloseButton>
-          <BodyLong>Ullamco ullamco laborum et commodo sint culpa</BodyLong>
-        </AlertWithCloseButton>
-        <AlertWithCloseButton>
-          <DsHeading spacing size="small" level="3">
-            Aliquip duis est in commodo pariatur
+      <VStack gap="4">
+        <h2>CloseButton</h2>
+        <Alert variant="info" closeButton>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert variant="info" closeButton>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
+          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert size="small" variant="info" closeButton>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert size="small" variant="info" closeButton>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
+          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert variant="info" closeButton>
+          <DsHeading size="small" level="3">
+            Id elit esse enim reprehenderit
          </DsHeading>
          <BodyLong>
-            Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
-            laboris ex. Labore ex occaecat proident qui qui fugiat magna. Fugiat
-            sint commodo consequat eu aute.
+            Id elit esse enim reprehenderit enim nisi veniam nostrud.
          </BodyLong>
-        </AlertWithCloseButton>
-        <AlertWithCloseButton size="small">
-          <BodyLong>Ullamco ullamco laborum et commodo</BodyLong>
-        </AlertWithCloseButton>
-        <AlertWithCloseButton size="small">
-          <DsHeading spacing size="small" level="3">
-            Aliquip duis est in commodo pariatur
+        </Alert>
+        <Alert variant="info" closeButton size="small">
+          <DsHeading size="xsmall" level="3">
+            Id elit esse enim reprehenderit
          </DsHeading>
          <BodyLong>
-            Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
-            laboris ex. Labore ex occaecat proident qui qui fugiat magna. Fugiat
-            sint commodo consequat eu aute.
+            Id elit esse enim reprehenderit enim nisi veniam nostrud.
          </BodyLong>
-        </AlertWithCloseButton>
-      </div>
+        </Alert>
+      </VStack>
    );
  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const buttons = canvas.getAllByTitle("Lukk Alert");
+};

-    await step("click button", async () => {
-      await userEvent.click(buttons[0]);
-    });
+export const Chromatic: Story = {
+  render: () => (
+    <VStack gap="6">
+      <VStack gap="2">
+        <h2>Variant</h2>
+        {variants.map((variant, i) => (
+          <Alert key={variant} variant={variant}>
+            {new Array(i + 1).fill(
+              "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
+            )}
+          </Alert>
+        ))}
+      </VStack>
+      <VStack gap="2">
+        <h2>Small</h2>
+        <Alert variant="info" size="small">
+          Id elit esse enim reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert variant="info" size="small">
+          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
+          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud.
+        </Alert>
+      </VStack>
+      <VStack gap="2">
+        <h2>FullWidth</h2>
+        <Alert variant="info" fullWidth>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert variant="info" size="small" fullWidth>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud.
+        </Alert>
+      </VStack>
+      <VStack gap="2">
+        <h2>Inline</h2>
+        <Alert variant="info" inline>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert variant="info" inline>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
+          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert variant="info" size="small" inline>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert variant="info" size="small" inline>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
+          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud.
+        </Alert>
+      </VStack>
+      <VStack gap="2">
+        <h2>Heading</h2>
+        <Alert variant="info">
+          <DsHeading size="small" level="3">
+            Id elit esse enim reprehenderit
+          </DsHeading>
+          <BodyLong>
+            Id elit esse enim reprehenderit enim nisi veniam nostrud.
+          </BodyLong>
+        </Alert>
+        <Alert variant="info" size="small">
+          <DsHeading size="xsmall" level="3">
+            Id elit esse enim reprehenderit
+          </DsHeading>
+          <BodyLong size="small">
+            Id elit esse enim reprehenderit enim nisi veniam nostrud.
+          </BodyLong>
+        </Alert>
+      </VStack>
+      <VStack gap="2">
+        <h2>CloseButton</h2>
+        <Alert variant="info" closeButton>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert variant="info" closeButton>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
+          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert size="small" variant="info" closeButton>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert size="small" variant="info" closeButton>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
+          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert variant="info" closeButton>
+          <DsHeading size="small" level="3">
+            Id elit esse enim reprehenderit
+          </DsHeading>
+          <BodyLong>
+            Id elit esse enim reprehenderit enim nisi veniam nostrud.
+          </BodyLong>
+        </Alert>
+        <Alert variant="info" size="small" closeButton>
+          <DsHeading size="xsmall" level="3">
+            Id elit esse enim reprehenderit
+          </DsHeading>
+          <BodyLong size="small">
+            Id elit esse enim reprehenderit enim nisi veniam nostrud.
+          </BodyLong>
+        </Alert>
+      </VStack>

-    const buttonsAfter = canvas.getAllByTitle("Lukk Alert");
-    expect(buttonsAfter.length).toBe(4);
+      <VStack gap="2">
+        <h2>Links</h2>
+        {variants.map((variant) => (
+          <Alert key={variant} variant={variant}>
+            <Link href="#">Id elit esse enim reprehenderit</Link>
+          </Alert>
+        ))}
+      </VStack>
+    </VStack>
+  ),
+  parameters: {
+    chromatic: { disable: false },
  },
 };
@@ -1,15 +1,21 @@
+import { StoryObj } from "@storybook/react";
 import React from "react";
-import { StarIcon } from "@navikt/aksel-icons";
+import { StarIcon as BaseStarIcon } from "@navikt/aksel-icons";
+import { HStack, VStack } from "../layout/stack";
 import { Button } from "./index";

 export default {
  title: "ds-react/Button",
  component: Button,
  parameters: {
-    chromatic: { delay: 600 },
+    chromatic: { disable: true },
  },
 };

+type Story = StoryObj<typeof Button>;
+
+const StarIcon = () => <BaseStarIcon aria-hidden />;
+
 const variants: (
  | "primary"
  | "secondary"
@@ -28,17 +34,7 @@ const variants: (
  "tertiary-neutral",
 ];

-const varSwitch = {
-  primary: "Primary",
-  secondary: "Secondary",
-  tertiary: "Tertiary",
-  danger: "Danger",
-  "primary-neutral": "Primary",
-  "secondary-neutral": "Secondary",
-  "tertiary-neutral": "Tertiary",
-};
-
-export const Default = {
+export const Controls: Story = {
  render: (props) => {
    return (
      <Button
@@ -57,7 +53,7 @@ export const Default = {
    icon: false,
    loading: false,
    iconPosition: "left",
-    children: "Knapp",
+    children: "Button",
    variant: "primary",
    size: "medium",
  },
@@ -91,192 +87,99 @@ export const Default = {
  },
 };

-export const Small = () => (
-  <div className="rowgap">
-    {variants.map((variant) => (
-      <Button key={variant} variant={variant} size="small">
-        {varSwitch[variant]}
-      </Button>
-    ))}
-  </div>
-);
-
-export const XSmall = () => (
-  <div className="rowgap">
-    {variants.map((variant) => (
-      <Button key={variant} variant={variant} size="xsmall">
-        {varSwitch[variant]}
-      </Button>
-    ))}
-  </div>
-);
-
-export const Link = () => (
-  <div className="rowgap">
-    {variants.map((variant) => (
-      <Button key={variant} variant={variant} as="a" href="#thecakeisalie">
-        {varSwitch[variant]}
-      </Button>
-    ))}
-  </div>
-);
-
-export const Loading = {
-  render: () => (
-    <div className="colgap chromatic-ignore">
-      <div className="rowgap">
-        {variants.map((variant) => (
-          <Button key={variant} variant={variant} loading>
-            {varSwitch[variant]}
+function ButtonGrid(props: any) {
+  return (
+    <VStack gap="2">
+      {variants.map((variant) => (
+        <HStack gap="2" key={variant}>
+          <Button variant={variant} {...props}>
+            Button
          </Button>
-        ))}
-      </div>
-      <div className="rowgap">
-        {variants.map((variant) => (
-          <Button key={variant} variant={variant} loading size="small">
-            {varSwitch[variant]}
+          <Button variant={variant} {...props} icon={<StarIcon />}>
+            Button
          </Button>
-        ))}
-      </div>
-      <div className="rowgap">
-        {variants.map((variant) => (
-          <Button key={variant} variant={variant} loading size="xsmall">
-            {varSwitch[variant]}
-          </Button>
-        ))}
-      </div>
-    </div>
-  ),
-
-  parameters: {
-    chromatic: { disableSnapshot: true },
-  },
-};
-
-export const Icon = () => (
-  <div className="colgap ">
-    <div className="rowgap">
-      {variants.map((variant) => (
-        <Button
-          key={variant}
-          variant={variant}
-          icon={<StarIcon title="Stjerne" />}
-        />
-      ))}
-    </div>
-    <div className="rowgap">
-      {variants.map((variant) => (
-        <Button
-          key={variant}
-          variant={variant}
-          size="small"
-          icon={<StarIcon title="Stjerne" />}
-        />
-      ))}
-    </div>
-    <div className="rowgap">
-      {variants.map((variant) => (
-        <Button
-          key={variant}
-          variant={variant}
-          size="xsmall"
-          icon={<StarIcon title="Stjerne" />}
-        />
-      ))}
-    </div>
-  </div>
-);
-
-export const IconWText = () => (
-  <div className="colgap">
-    <div className="rowgap">
-      {variants.map((variant, i) => (
-        <Button
-          key={variant}
-          variant={variant}
-          icon={<StarIcon title="Stjerne" />}
-          iconPosition={i % 2 ? "left" : "right"}
-        >
-          {varSwitch[variant]}
-        </Button>
-      ))}
-    </div>
-    <div className="rowgap">
-      {variants.map((variant, i) => (
-        <Button
-          key={variant}
-          variant={variant}
-          size="small"
-          icon={<StarIcon title="Stjerne" />}
-          iconPosition={i % 2 ? "left" : "right"}
-        >
-          {varSwitch[variant]}
-        </Button>
-      ))}
-    </div>
-    <div className="rowgap">
-      {variants.map((variant, i) => (
-        <Button
-          key={variant}
-          variant={variant}
-          size="xsmall"
-          icon={<StarIcon title="Stjerne" />}
-          iconPosition={i % 2 ? "left" : "right"}
-        >
-          {varSwitch[variant]}
-        </Button>
-      ))}
-    </div>
-  </div>
-);
-
-export const Disabled = () => (
-  <div className="colgap">
-    <div className="rowgap">
-      {variants.map((variant) => (
-        <Button key={variant} variant={variant} disabled>
-          {varSwitch[variant]}
-        </Button>
-      ))}
-    </div>
-    <div className="rowgap">
-      {variants.map((variant) => (
-        <Button key={variant} variant={variant} disabled as="a" href="#">
-          {varSwitch[variant]}
-        </Button>
-      ))}
-    </div>
-  </div>
-);
-
-export const LoadingWithAs = {
-  render: () => (
-    <div className="colgap chromatic-ignore">
-      <div className="rowgap">
-        {variants.map((variant) => (
-          <Button key={variant} variant={variant} loading size="small">
-            {varSwitch[variant]}
-          </Button>
-        ))}
-      </div>
-      <div className="rowgap">
-        {variants.map((variant) => (
          <Button
-            key={variant}
            variant={variant}
-            loading
-            size="small"
-            as="a"
-            href="#"
+            {...props}
+            icon={<StarIcon />}
+            iconPosition="right"
          >
-            {varSwitch[variant]}
+            Button
          </Button>
-        ))}
-      </div>
-    </div>
-  ),
+          <Button variant={variant} {...props} icon={<StarIcon />} />
+        </HStack>
+      ))}
+    </VStack>
+  );
+}

+export const Medium: Story = {
+  render: () => <ButtonGrid size="medium" />,
+};
+
+export const Small: Story = {
+  render: () => <ButtonGrid size="small" />,
+};
+
+export const XSmall: Story = {
+  render: () => <ButtonGrid size="xsmall" />,
+};
+
+export const AsLink: Story = {
+  render: () => (
+    <VStack gap="4">
+      <Button href="#" as="a">
+        Button as a-tag
+      </Button>
+      <Button href="#" as="a" disabled>
+        Disabled Button as a-tag
+      </Button>
+    </VStack>
+  ),
+};
+
+export const Loading: Story = {
+  render: () => <ButtonGrid loading />,
+};
+
+export const LoadingAsLink: Story = {
+  render: () => <ButtonGrid loading href="#" as="a" />,
+};
+
+export const Disabled: Story = {
+  render: () => <ButtonGrid disabled />,
+};
+
+export const DisabledAsLink: Story = {
+  render: () => <ButtonGrid disabled href="#" as="a" />,
+};
+
+export const Chromatic: Story = {
+  render: () => (
+    <VStack gap="6" align="center">
+      <div>
+        <h2>Medium</h2>
+        <ButtonGrid size="medium" />
+      </div>
+      <div>
+        <h2>Small</h2>
+        <ButtonGrid size="small" />
+      </div>
+      <div>
+        <h2>XSmall</h2>
+        <ButtonGrid size="xsmall" />
+      </div>
+      <div>
+        <h2>As Link</h2>
+        <ButtonGrid as="a" href="#" />
+      </div>
+      <div>
+        <h2>Disabled</h2>
+        <ButtonGrid disabled />
+      </div>
+    </VStack>
+  ),
  parameters: {
-    chromatic: { disableSnapshot: true },
+    chromatic: { disable: false },
  },
 };
@@ -11,7 +11,6 @@ import { DateWrapper } from "../parts/DateWrapper";
 import { getLocaleFromString, labels } from "../utils";
 import DatePickerStandalone from "./DatePickerStandalone";
 import Caption from "./parts/Caption";
-import DayButton from "./parts/DayButton";
 import DropdownCaption from "./parts/DropdownCaption";
 import { HeadRow } from "./parts/HeadRow";
 import Row from "./parts/Row";
@@ -124,7 +123,6 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
          HeadRow,
          WeekNumber,
          Row,
-          Day: DayButton,
        }}
        className={cl("navds-date", className)}
        classNames={{
@@ -5,7 +5,6 @@ import { DateRange, DayPicker, isMatch } from "react-day-picker";
 import { omit } from "../../util";
 import { getLocaleFromString, labels } from "../utils";
 import Caption from "./parts/Caption";
-import DayButton from "./parts/DayButton";
 import DropdownCaption from "./parts/DropdownCaption";
 import { HeadRow } from "./parts/HeadRow";
 import Row from "./parts/Row";
@@ -94,7 +93,6 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
            HeadRow,
            WeekNumber,
            Row,
-            Day: DayButton,
          }}
          className="navds-date"
          classNames={{ vhidden: "navds-sr-only" }}
@@ -2,8 +2,12 @@
 import { Meta, StoryObj } from "@storybook/react";
 import isSameDay from "date-fns/isSameDay";
 import React, { useId, useState } from "react";
-import { useDatepicker, useRangeDatepicker } from "..";
-import { BodyLong, Button, HGrid, Modal, VStack } from "../..";
+import { Button } from "../../button";
+import { HGrid } from "../../layout/grid";
+import { VStack } from "../../layout/stack";
+import Modal from "../../modal/Modal";
+import { BodyLong } from "../../typography";
+import { useDatepicker, useRangeDatepicker } from "../hooks";
 import DatePicker, { DatePickerProps } from "./DatePicker";

 const disabledDays = [
@@ -27,13 +31,13 @@ export const Default: StoryObj<DefaultStoryProps> = {
    const [open, setOpen] = useState(false);

    const rangeCtx = useRangeDatepicker({
-      fromDate: new Date("Aug 23 2020"),
-      toDate: new Date("Aug 23 2023"),
+      fromDate: new Date("Aug 23 2023"),
+      toDate: new Date("Aug 23 2029"),
    });

    const singleCtx = useDatepicker({
      fromDate: new Date("Aug 23 2020"),
-      toDate: new Date("Aug 23 2023"),
+      toDate: new Date("Aug 23 2029"),
    });

    const newProps = {
@@ -42,7 +46,7 @@ export const Default: StoryObj<DefaultStoryProps> = {
            open,
            onClose: () => setOpen(false),
            fromDate: new Date("Aug 23 2020"),
-            toDate: new Date("Aug 23 2023"),
+            toDate: new Date("Aug 23 2029"),
          }
        : {}),
    };
@@ -1,7 +1,8 @@
 import { getUnixTime } from "date-fns";
 import React from "react";
-import { Day, useDayPicker } from "react-day-picker";
+import { useDayPicker } from "react-day-picker";
 import { Hide } from "../../../layout/responsive";
+import DayButton from "./DayButton";
 import WeekNumber from "./WeekNumber";

 /**
@@ -37,7 +38,7 @@ function Row(props: RowProps): JSX.Element {
          style={styles.cell}
          key={getUnixTime(date)}
        >
-          <Day displayMonth={props.displayMonth} date={date} />
+          <DayButton displayMonth={props.displayMonth} date={date} />
        </td>
      ))}
    </tr>
@@ -53,7 +53,7 @@ export interface UseDatepickerOptions
   * Allows input of with 'yy' year format.
   * @default true
   * @Note Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th.
-   * In 2023 this equals to 1943 - 2042
+   * In 2024 this equals to 1944 - 2043
   */
  allowTwoDigitYear?: boolean;
  /**
@@ -39,7 +39,7 @@ export interface UseMonthPickerOptions
   * Allows input of with 'yy' year format.
   * @default true
   * @Note Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th.
-   * In 2023 this equals to 1943 - 2042
+   * In 2024 this equals to 1944 - 2043
   */
  allowTwoDigitYear?: boolean;
  /**
@@ -1,8 +1,9 @@
 import { Meta, StoryFn } from "@storybook/react";
 import setYear from "date-fns/setYear";
 import React, { useId, useState } from "react";
-import { Button, DateInputProps } from "../..";
+import { Button } from "../../button";
 import { useMonthpicker } from "../hooks";
+import { DateInputProps } from "../parts/DateInput";
 import MonthPicker from "./MonthPicker";
 import { MonthPickerProps } from "./types";

@@ -15,7 +15,7 @@ export interface DateInputProps
   */
  label: React.ReactNode;
  /**
-   * Shows label and description for screenreaders-only
+   * Shows label and description for screen readers only
   * @default false
   */
  hideLabel?: boolean;
@@ -1,7 +1,7 @@
 import { Meta } from "@storybook/react";
 import React, { useState } from "react";
-import { Dropdown } from "..";
 import { Button } from "../button";
+import Dropdown from "./Dropdown";

 export default {
  title: "ds-react/Dropdown",
@@ -3,6 +3,7 @@ import React, { forwardRef, useState } from "react";
 import { BodyShort, ErrorMessage, Label } from "../typography";
 import { omit } from "../util";
 import TextareaAutosize from "../util/TextareaAutoSize";
+import { composeEventHandlers } from "../util/composeEventHandlers";
 import { useId } from "../util/hooks";
 import { ReadOnlyIcon } from "./ReadOnlyIcon";
 import Counter from "./TextareaCounter";
@@ -102,7 +103,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
    const maxLengthId = useId();
    const hasMaxLength = maxLength !== undefined && maxLength > 0;

-    const [controlledValue, setControlledValue] = useState<string>(
+    const [uncontrolledValue, setUncontrolledValue] = useState(
      props?.defaultValue ?? "",
    );

@@ -161,11 +162,12 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
          <TextareaAutosize
            {...omit(rest, ["error", "errorId", "size"])}
            {...inputProps}
-            onChange={(e) =>
-              props.onChange
-                ? props.onChange(e)
-                : setControlledValue(e.target.value)
-            }
+            onChange={composeEventHandlers(
+              props.onChange,
+              props.value === undefined
+                ? (e) => setUncontrolledValue(e.target.value)
+                : undefined,
+            )}
            minRows={getMinRows()}
            autoScrollbar={UNSAFE_autoScrollbar}
            ref={ref}
@@ -184,7 +186,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
              </span>
              <Counter
                maxLength={maxLength}
-                currentLength={props.value?.length ?? controlledValue?.length}
+                currentLength={props.value?.length ?? uncontrolledValue.length}
                size={size}
                i18n={i18n}
              />
@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/react";
 import React from "react";
-import { ErrorSummary } from "..";
+import { ErrorSummary } from "./ErrorSummary";

 export default {
  title: "ds-react/Errorsummary",
@@ -66,6 +66,10 @@ export interface SearchProps
   * Exposes the HTML size attribute
   */
  htmlSize?: number | string;
+    /*
+   * Exposes role attribute
+   */
+  role?: string
 }

 interface SearchComponent
@@ -114,6 +118,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
      onChange,
      onSearchClick,
      htmlSize,
+      role,
      ...rest
    } = props;

@@ -205,7 +210,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
              value={value ?? internalValue}
              onChange={(e) => handleChange(e.target.value)}
              type="search"
-              role="searchbox"
+              role={role ?? 'searchbox'}
              className={cl(
                className,
                "navds-search__input",
@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/react";
 import React, { useState } from "react";
-import { Link } from "../..";
+import { Link } from "../../link";
 import { ConfirmationPanel } from "../index";

 export default {
@@ -1,6 +1,8 @@
 import { Meta, StoryFn, StoryObj } from "@storybook/react";
+import { expect, userEvent, within } from "@storybook/test";
 import React, { useState } from "react";
 import { Button } from "../../button";
+import { Modal } from "../../modal";
 import { Textarea } from "../index";

 const meta: Meta<typeof Textarea> = {
@@ -124,6 +126,24 @@ export const Resize: StoryFn = () => {
  return <Textarea resize label="Ipsum enim quis culpa" />;
 };

+export const OnChange: StoryFn = () => {
+  return (
+    <Textarea
+      label="Ipsum enim quis culpa"
+      onChange={console.log}
+      maxLength={50}
+    />
+  );
+};
+OnChange.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const input = canvas.getByLabelText("Ipsum enim quis culpa");
+  userEvent.click(input);
+  await userEvent.type(input, "Aute fugiat ut culpa");
+  const text = canvas.getByText("30 tegn igjen");
+  expect(text).toBeVisible();
+};
+
 export const Controlled: StoryFn = () => {
  const [value, setValue] = useState("");
  return (
@@ -186,3 +206,20 @@ AutoScrollbar.argTypes = {
  maxRows: { type: "number" },
  minRows: { type: "number" },
 };
+
+export const ModalStrictMode: StoryFn<typeof Textarea> = () => {
+  // Story added after fixing an issue where TextareaAutoSize would reach max re-renders
+  // and set the height to 2px when used in StrictMode in a Modal that is initially open.
+  return (
+    <React.StrictMode>
+      <Modal open>
+        <Modal.Body>
+          <Textarea label="Har du noen tilbakemeldinger?" />
+        </Modal.Body>
+      </Modal>
+    </React.StrictMode>
+  );
+};
+ModalStrictMode.parameters = {
+  chromatic: { disable: true }, // Not reproducable in Chromatic
+};
@@ -1,6 +1,7 @@
 import { Meta, StoryFn, StoryObj } from "@storybook/react";
 import React, { useEffect, useRef } from "react";
-import { BodyLong, Heading, HelpText } from "..";
+import { BodyLong, Heading } from "../typography";
+import HelpText from "./HelpText";

 const meta: Meta<typeof HelpText> = {
  title: "ds-react/HelpText",
@@ -10,6 +10,7 @@ export * from "./expansion-card";
 export * from "./form";
 export * from "./grid";
 export * from "./guide-panel";
+export * from "./overlays";
 export * from "./help-text";
 export * from "./internal-header";
 export * from "./link";
@@ -6,7 +6,8 @@ import {
  MenuGridIcon,
 } from "@navikt/aksel-icons";
 import { BodyLong, BodyShort, Detail } from "@navikt/ds-react";
-import { Dropdown, InternalHeader } from "..";
+import { Dropdown } from "../dropdown";
+import InternalHeader from "./InternalHeader";

 export default {
  title: "ds-react/InternalHeader",
@@ -1,7 +1,8 @@
 import type { Meta } from "@storybook/react";
 import React from "react";
-import { Box, HStack, VStack } from "../..";
 import { BodyLong } from "../../typography";
+import { Box } from "../box";
+import { HStack, VStack } from "../stack";
 import { Bleed } from "./Bleed";

 export default {
@@ -272,6 +273,19 @@ export const Full = {
            </Bleed>
          </Box>
        </Box>
+        <Box
+          className="maxWidth"
+          background="surface-alt-1-subtle"
+          padding="10"
+        >
+          <Box background="surface-alt-2-subtle" padding="10">
+            <Bleed marginInline="full" reflectivePadding asChild>
+              <Box background="surface-success-subtle">
+                <BodyLong>full + reflectivePadding</BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
+        </Box>
      </VStack>
    </>
  ),
@@ -1,8 +1,9 @@
 import type { Meta } from "@storybook/react";
 import React, { ReactNode } from "react";
 import { ChevronRightIcon } from "@navikt/aksel-icons";
-import { HGrid, HStack, VStack } from "../..";
 import { BodyLong, Detail, Heading } from "../../typography";
+import { HGrid } from "../grid";
+import { HStack, VStack } from "../stack";
 import { BackgroundToken, BorderRadiiToken } from "../utilities/types";
 import { Box } from "./Box";

@@ -1,6 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
-import { Box, HGrid, Hide, Show, VStack } from "../..";
+import { Box } from "../box";
+import { HGrid } from "../grid";
+import { Hide, Show } from "../responsive";
+import { VStack } from "../stack";
 import { Content } from "./Content";
 import { FilterCard } from "./Filter";
 import { Header } from "./Header";
@@ -13,6 +16,7 @@ const meta = {
  title: "kitchen sink/navno-sidemal",
  parameters: {
    layout: "fullscreen",
+    chromatic: { disable: true },
  },
 } satisfies Meta;

@@ -44,6 +44,9 @@ const translateTokenStringToCSS = (
      if (componentProp === "margin-inline" && x === "full") {
        const width = 100 / arr.length;
        return `calc((100vw - ${width}%)/-2)`;
+      } else if (componentProp === "padding-inline" && x === "full") {
+        const width = 100 / arr.length;
+        return `calc((100vw - ${width}%)/2)`;
      }

      let output = `var(--a-${tokenSubgroup}-${x})`;
@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/react";
 import React from "react";
-import { LinkPanel } from "..";
+import LinkPanel from "./LinkPanel";

 export default {
  title: "ds-react/LinkPanel",
@@ -1,11 +1,9 @@
 import React from "react";
 import { PlusCircleFillIcon } from "@navikt/aksel-icons";
-import {
-  BodyLong,
-  Alert as DsAlert,
-  ConfirmationPanel as DsConfirmationPanel,
-  Link,
-} from "../..";
+import { Alert } from "../../alert";
+import { ConfirmationPanel } from "../../form";
+import { BodyLong } from "../../typography";
+import Link from "../Link";
 import { RandomIcon } from "./RandomIcon";

 export default {
@@ -139,37 +137,37 @@ const DemoLink = () => (

 export const Icon = () => <DemoLink />;

-export const Alert = () => {
+export const InAlert = () => {
  return (
    <div className="colgap">
-      <DsAlert variant="info">
+      <Alert variant="info">
        <DemoLink />
-      </DsAlert>
-      <DsAlert variant="success">
+      </Alert>
+      <Alert variant="success">
        <DemoLink />
-      </DsAlert>
-      <DsAlert variant="warning">
+      </Alert>
+      <Alert variant="warning">
        <DemoLink />
-      </DsAlert>
-      <DsAlert variant="error">
+      </Alert>
+      <Alert variant="error">
        <DemoLink />
-      </DsAlert>
+      </Alert>
    </div>
  );
 };

-export const ConfirmationPanel = () => {
+export const InConfirmationPanel = () => {
  return (
    <div className="colgap">
-      <DsConfirmationPanel label="demo">
+      <ConfirmationPanel label="demo">
        <DemoLink />
-      </DsConfirmationPanel>
-      <DsConfirmationPanel checked label="demo">
+      </ConfirmationPanel>
+      <ConfirmationPanel checked label="demo">
        <DemoLink />
-      </DsConfirmationPanel>
-      <DsConfirmationPanel error="demo" label="demo">
+      </ConfirmationPanel>
+      <ConfirmationPanel error="demo" label="demo">
        <DemoLink />
-      </DsConfirmationPanel>
+      </ConfirmationPanel>
    </div>
  );
 };
@@ -6,7 +6,8 @@ import {
  HeadHeartIcon,
  RecycleIcon,
 } from "@navikt/aksel-icons";
-import { List, VStack } from "..";
+import { VStack } from "../layout/stack";
+import List from "./List";

 export default {
  title: "ds-react/List",
@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/react";
 import React from "react";
-import { Loader, LoaderProps } from "..";
+import Loader, { LoaderProps } from "./Loader";

 export default {
  title: "ds-react/Loader",
@@ -1,9 +1,11 @@
 import { Meta, StoryFn } from "@storybook/react";
 import React, { useRef, useState } from "react";
 import { FileIcon } from "@navikt/aksel-icons";
-import { BodyLong, Button, Heading, Tooltip } from "..";
+import { Button } from "../button";
 import { Checkbox, CheckboxGroup } from "../form/checkbox";
 import { VStack } from "../layout/stack";
+import { Tooltip } from "../tooltip";
+import { BodyLong, Heading } from "../typography";
 import Modal from "./Modal";

 const meta: Meta<typeof Modal> = {
@@ -0,0 +1,2 @@
+export { Portal } from "./portal/Portal";
+export type { PortalProps } from "./portal/Portal";
@@ -0,0 +1,99 @@
+import React from "react";
+import { Box } from "../../layout/box";
+import { Provider } from "../../provider";
+import { Portal } from "./Portal";
+
+export default {
+  title: "Utilities/Portal",
+  parameters: {
+    chromatic: { disable: true },
+  },
+};
+
+export const Default = () => {
+  return (
+    <Box background="surface-neutral-subtle" border>
+      <h1>In regular DOM tree</h1>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus
+        necessitatibus quis esse nesciunt est velit voluptatibus. Distinctio eum
+        commodi tempora unde. Nulla vel tempora incidunt? Voluptatem molestias
+        impedit commodi. Tenetur!
+      </p>
+      <Portal>
+        <h1>Inside Portal to different DOM tree</h1>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus
+          necessitatibus quis esse nesciunt est velit voluptatibus. Distinctio
+          eum commodi tempora unde. Nulla vel tempora incidunt? Voluptatem
+          molestias impedit commodi. Tenetur!
+        </p>
+      </Portal>
+    </Box>
+  );
+};
+
+export const CustomPortalRoot = () => {
+  const [portalContainer, setPortalContainer] =
+    React.useState<HTMLDivElement | null>(null);
+
+  return (
+    <Box background="surface-neutral-subtle">
+      <Box background="surface-alt-1-subtle">
+        <h1>Tree A</h1>
+        <Portal rootElement={portalContainer}>
+          <p>This is mounted to Tree B, while created inside Tree A</p>
+        </Portal>
+      </Box>
+      <Box background="surface-alt-3-subtle" ref={setPortalContainer}>
+        <h1>Tree B</h1>
+      </Box>
+    </Box>
+  );
+};
+
+export const CustomPortalRootFromProvider = () => {
+  const [portalContainer, setPortalContainer] =
+    React.useState<HTMLDivElement>();
+
+  return (
+    <Provider rootElement={portalContainer}>
+      <Box background="surface-neutral-subtle">
+        <Box background="surface-alt-1-subtle">
+          <h1>Tree A</h1>
+          <Portal>
+            <p>This is mounted to Tree B, while created inside Tree A</p>
+          </Portal>
+        </Box>
+        <Box background="surface-alt-3-subtle" ref={setPortalContainer}>
+          <h1>Tree B</h1>
+        </Box>
+      </Box>
+    </Provider>
+  );
+};
+
+export const AsChild = () => {
+  return (
+    <Box background="surface-neutral-subtle" border>
+      <h1>In regular DOM tree</h1>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus
+        necessitatibus quis esse nesciunt est velit voluptatibus. Distinctio eum
+        commodi tempora unde. Nulla vel tempora incidunt? Voluptatem molestias
+        impedit commodi. Tenetur!
+      </p>
+      <Portal asChild>
+        <div data-this-is-the-child>
+          <h1>Inside Portal to different DOM tree</h1>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus
+            necessitatibus quis esse nesciunt est velit voluptatibus. Distinctio
+            eum commodi tempora unde. Nulla vel tempora incidunt? Voluptatem
+            molestias impedit commodi. Tenetur!
+          </p>
+        </div>
+      </Portal>
+    </Box>
+  );
+};
@@ -0,0 +1,32 @@
+import React, { HTMLAttributes, forwardRef } from "react";
+import ReactDOM from "react-dom";
+import { useProvider } from "../../provider";
+import { Slot } from "../../util/Slot";
+import { AsChildProps } from "../../util/types";
+
+interface PortalBaseProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * An optional container where the portaled content should be appended.
+   */
+  rootElement?: HTMLElement | null;
+}
+
+export type PortalProps = PortalBaseProps & AsChildProps;
+
+export const Portal = forwardRef<HTMLDivElement, PortalProps>(
+  ({ rootElement, asChild, ...rest }, ref) => {
+    const contextRoot = useProvider()?.rootElement;
+    const root = rootElement ?? contextRoot ?? globalThis?.document?.body;
+
+    const Component = asChild ? Slot : "div";
+
+    return root
+      ? ReactDOM.createPortal(
+          <Component ref={ref} data-aksel-portal="" {...rest} />,
+          root,
+        )
+      : null;
+  },
+);
+
+export default Portal;
@@ -2,6 +2,9 @@ import cl from "clsx";
 import React, { forwardRef } from "react";
 import { OverridableComponent } from "../util/types";

+/**
+ * @deprecated Use Box with padding and border instead
+ */
 export interface PanelProps extends React.HTMLAttributes<HTMLElement> {
  /**
   * Panel content
@@ -17,23 +20,13 @@ export interface PanelProps extends React.HTMLAttributes<HTMLElement> {
 export type PanelType = OverridableComponent<PanelProps, HTMLElement>;

 /**
- * A component that displays a bordered panel with heading and body.
- *
- * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/panel)
- * @see 🏷️ {@link PanelProps}
- * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
- *
- * @example
- * ```jsx
- * <Panel border>
- *   <Heading spacing level="2" size="large">
- *     Søk om økonomisk sosialhjelp
- *   </Heading>
- *   <BodyLong>
- *     Du kan søke om det du trenger økonomisk støtte til.
- *   </BodyLong>
- * </Panel>
+ * @deprecated
+ * Use Box with padding and border instead
 * ```
+ * <Box padding="4" borderRadius="small" />
+ * <Box padding="4" borderWidth="1" borderRadius="small" />
+ * ```
+ * Component will be removed in a future major release
 */
 export const Panel: PanelType = forwardRef(
  (
@@ -1,63 +0,0 @@
-import { Meta } from "@storybook/react";
-import React from "react";
-import { Panel } from "../index";
-
-export default {
-  title: "ds-react/Panel",
-  component: Panel,
-  argTypes: {
-    border: {
-      defaultValue: true,
-      control: {
-        type: "boolean",
-      },
-    },
-  },
-} as Meta;
-
-export const Default = {
-  render: (props) => {
-    return (
-      <Panel {...props}>
-        Eu quis exercitation voluptate ex. Aute irure esse occaecat minim
-        cupidatat velit minim duis sint culpa anim laboris. Consectetur nulla eu
-        commodo ea culpa velit commodo incididunt sunt ipsum. Amet anim
-        adipisicing minim ipsum do. Non laborum culpa reprehenderit est sint
-        officia quis excepteur. Fugiat eiusmod eiusmod commodo incididunt nisi
-        minim ex eu cupidatat quis ex. Lorem irure ea ea enim consectetur ea
-        aliqua cupidatat. Officia aute veniam aute exercitation ipsum aliqua
-        adipisicing. Est aliqua ad ullamco aute nostrud amet ea adipisicing
-        consequat id officia irure pariatur. Eu mollit amet culpa culpa velit.
-      </Panel>
-    );
-  },
-};
-
-export const Border = () => {
-  return (
-    <div className="colgap">
-      <Panel>
-        Eu quis exercitation voluptate ex. Aute irure esse occaecat minim
-        cupidatat velit minim duis sint culpa anim laboris. Consectetur nulla eu
-        commodo ea culpa velit commodo incididunt sunt ipsum. Amet anim
-        adipisicing minim ipsum do. Non laborum culpa reprehenderit est sint
-        officia quis excepteur. Fugiat eiusmod eiusmod commodo incididunt nisi
-        minim ex eu cupidatat quis ex. Lorem irure ea ea enim consectetur ea
-        aliqua cupidatat. Officia aute veniam aute exercitation ipsum aliqua
-        adipisicing. Est aliqua ad ullamco aute nostrud amet ea adipisicing
-        consequat id officia irure pariatur. Eu mollit amet culpa culpa velit.
-      </Panel>
-      <Panel border>
-        Eu quis exercitation voluptate ex. Aute irure esse occaecat minim
-        cupidatat velit minim duis sint culpa anim laboris. Consectetur nulla eu
-        commodo ea culpa velit commodo incididunt sunt ipsum. Amet anim
-        adipisicing minim ipsum do. Non laborum culpa reprehenderit est sint
-        officia quis excepteur. Fugiat eiusmod eiusmod commodo incididunt nisi
-        minim ex eu cupidatat quis ex. Lorem irure ea ea enim consectetur ea
-        aliqua cupidatat. Officia aute veniam aute exercitation ipsum aliqua
-        adipisicing. Est aliqua ad ullamco aute nostrud amet ea adipisicing
-        consequat id officia irure pariatur. Eu mollit amet culpa culpa velit.
-      </Panel>
-    </div>
-  );
-};
@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/react";
 import React, { useState } from "react";
-import { BodyLong } from "..";
+import { BodyLong } from "../typography";
 import Stepper from "./Stepper";

 const meta: Meta<typeof Stepper> = {
@@ -1,7 +1,9 @@
 import React, { useState } from "react";
 import useSWR from "swr";
-import { Loader, Pagination, SortState } from "../..";
-import { Table } from "../index";
+import { Loader } from "../../loader";
+import { Pagination } from "../../pagination";
+import Table from "../Table";
+import { SortState } from "../types";
 import peopleJson from "./people.json";

 export default {
@@ -1,6 +1,8 @@
 import React, { useState } from "react";
-import { Table } from "..";
-import { Button, Checkbox, Link } from "../..";
+import { Button } from "../../button";
+import { Checkbox } from "../../form";
+import { Link } from "../../link";
+import Table from "../Table";

 export default {
  title: "ds-react/Table",
@@ -1,6 +1,9 @@
 import React, { useState } from "react";
 import { Table, TableProps } from "../";
-import { Alert, Button, Checkbox, CheckboxGroup, Link } from "../..";
+import { Alert } from "../../alert";
+import { Button } from "../../button";
+import { Checkbox, CheckboxGroup } from "../../form";
+import { Link } from "../../link";

 export default {
  title: "ds-react/Table",
@@ -1,6 +1,6 @@
 import { expect, fn, userEvent, within } from "@storybook/test";
 import React from "react";
-import { Table } from "../..";
+import Table from "../../Table";

 export default {
  title: "ds-react/Table/Tests",
@@ -1,5 +1,4 @@
 import {
-  FloatingPortal,
  autoUpdate,
  arrow as flArrow,
  flip,
@@ -21,7 +20,7 @@ import React, {
  useRef,
 } from "react";
 import { ModalContext } from "../modal/ModalContext";
-import { useProvider } from "../provider";
+import Portal from "../overlays/portal/Portal";
 import { Detail } from "../typography";
 import { useId } from "../util/hooks";
 import { useControllableState } from "../util/hooks/useControllableState";
@@ -123,10 +122,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(

    const arrowRef = useRef<HTMLDivElement | null>(null);
    const modalContext = useContext(ModalContext);
-    const providerRootElement = useProvider()?.rootElement;
-    const rootElement = modalContext
-      ? modalContext.ref.current
-      : providerRootElement;
+    const rootElement = modalContext ? modalContext.ref.current : undefined;

    const {
      x,
@@ -199,7 +195,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
              : children?.props["aria-describedby"],
          }),
        )}
-        <FloatingPortal root={rootElement}>
+        <Portal rootElement={rootElement}>
          {_open && (
            <div
              {...getFloatingProps({
@@ -253,7 +249,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
              )}
            </div>
          )}
-        </FloatingPortal>
+        </Portal>
      </>
    );
  },
@@ -1,6 +1,9 @@
 import { Meta } from "@storybook/react";
 import React from "react";
-import { Alert, Button, Search, Tooltip } from "..";
+import { Alert } from "../alert";
+import { Button } from "../button";
+import { Search } from "../form";
+import Tooltip from "./Tooltip";

 export default {
  title: "ds-react/Tooltip",
@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, within } from "@storybook/test";
 import React from "react";
-import { BodyLong } from "..";
-import { VStack } from "../..";
+import { VStack } from "../../layout/stack";
+import BodyLong from "../BodyLong";

 const meta = {
  title: "ds-react/Typography/BodyLong",
@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, within } from "@storybook/test";
 import React from "react";
-import { BodyShort } from "..";
-import { VStack } from "../..";
+import { VStack } from "../../layout/stack";
+import { BodyShort } from "../BodyShort";

 const meta = {
  title: "ds-react/Typography/BodyShort",
@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, within } from "@storybook/test";
 import React from "react";
-import { Detail } from "..";
-import { VStack } from "../..";
+import { VStack } from "../../layout/stack";
+import Detail from "../Detail";

 const meta = {
  title: "ds-react/Typography/Detail",
@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, within } from "@storybook/test";
 import React from "react";
-import { ErrorMessage } from "..";
-import { VStack } from "../..";
+import { VStack } from "../../layout/stack";
+import ErrorMessage from "../ErrorMessage";

 const meta = {
  title: "ds-react/Typography/ErrorMessage",
@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, within } from "@storybook/test";
 import { default as React } from "react";
-import { Heading } from "..";
-import { VStack } from "../..";
+import { VStack } from "../../layout/stack";
+import Heading from "../Heading";

 const meta = {
  title: "ds-react/Typography/Heading",
@@ -1,50 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { expect, within } from "@storybook/test";
-import React from "react";
-import { Ingress } from "..";
-
-const meta = {
-  title: "ds-react/Typography/deprecated/Ingress",
-  component: Ingress,
-} satisfies Meta<typeof Ingress>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-const lorem =
-  "Hvis du ikke bor sammen med begge foreldrene dine, kan du ha rett til barnebidrag fra en eller begge foreldre mens du fullfører videregående skole eller tilsvarende.";
-
-export const Default: Story = {
-  args: {
-    spacing: false,
-    children: lorem,
-  },
-};
-
-export const Spacing: Story = {
-  render: () => (
-    <div>
-      <Ingress spacing>{lorem}</Ingress>
-      <Ingress spacing>{lorem}</Ingress>
-    </div>
-  ),
-};
-
-export const OverrideTag: Story = {
-  render: () => (
-    <div>
-      <Ingress spacing>default ingress</Ingress>
-      <Ingress as="legend">legend ingress</Ingress>
-    </div>
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    const defaultIngress = canvas.getByText("default ingress");
-    const legendIngress = canvas.getByText("legend ingress");
-
-    expect(defaultIngress.tagName).toEqual("P");
-    expect(legendIngress.tagName).toEqual("LEGEND");
-  },
-};
@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, within } from "@storybook/test";
 import React from "react";
-import { Label } from "..";
-import { VStack } from "../..";
+import { VStack } from "../../layout/stack";
+import Label from "../Label";

 const meta = {
  title: "ds-react/Typography/Label",
@@ -20,10 +20,12 @@ export const Slot = React.forwardRef<HTMLElement, SlotProps>(
    }

    if (React.Children.count(children) > 1) {
-      console.error(
+      const error = new Error(
        "Aksel: Components using 'asChild' expects to recieve a single React element child.",
      );
-      return React.Children.only(null);
+      error.name = "SlotError";
+      Error.captureStackTrace?.(error, Slot);
+      throw error;
    }

    return null;
@@ -10,7 +10,7 @@ type State = {
  overflow?: boolean | undefined;
 };

-const updateState = (
+const checkState = (
  prevState: State,
  newState: State,
  renders: React.MutableRefObject<number>,
@@ -25,20 +25,12 @@ const updateState = (
      prevState.overflow !== overflow)
  ) {
    renders.current += 1;
-    return {
-      overflow,
-      outerHeightStyle,
-    };
+    return newState;
  }
-  if (process.env.NODE_ENV !== "production") {
-    if (renders.current === 20) {
-      console.error(
-        [
-          "Textarea: Too many re-renders. The layout is unstable.",
-          "TextareaAutosize limits the number of renders to prevent an infinite loop.",
-        ].join("\n"),
-      );
-    }
+  if (process.env.NODE_ENV !== "production" && renders.current === 20) {
+    console.error(
+      "Textarea: Too many re-renders. The layout is unstable. TextareaAutosize limits the number of renders to prevent an infinite loop.",
+    );
  }
  return prevState;
 };
@@ -92,9 +84,7 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
  ) => {
    const { current: isControlled } = useRef(value != null);
    const inputRef = useRef<HTMLTextAreaElement>(null);
-
    const handleRef = useMergeRefs(inputRef, ref);
-
    const shadowRef = useRef<HTMLTextAreaElement>(null);
    const renders = useRef(0);
    const [state, setState] = useState<State>({ outerHeightStyle: 0 });
@@ -153,35 +143,31 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
      return { outerHeightStyle, overflow };
    }, [maxRows, minRows, other.placeholder]);

-    const syncHeight = React.useCallback(() => {
+    const syncHeight = () => {
      const newState = getUpdatedState();
-
      if (isEmpty(newState)) {
        return;
      }
-
-      setState((prevState) => updateState(prevState, newState, renders));
-    }, [getUpdatedState]);
+      setState((prevState) => checkState(prevState, newState, renders));
+    };

    useClientLayoutEffect(() => {
      const syncHeightWithFlushSync = () => {
        const newState = getUpdatedState();
-
        if (isEmpty(newState)) {
          return;
        }

        // In React 18, state updates in a ResizeObserver's callback are happening after
        // the paint, this leads to an infinite rendering.
-        //
-        // Using flushSync ensures that the states is updated before the next pain.
+        // Using flushSync ensures that the state is updated before the next paint.
        // Related issue - https://github.com/facebook/react/issues/24331
        ReactDOM.flushSync(() => {
-          setState((prevState) => updateState(prevState, newState, renders));
+          setState((prevState) => checkState(prevState, newState, renders));
        });
      };

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

        if (inputRef.current?.style.height || inputRef.current?.style.width) {
@@ -193,13 +179,12 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
        }

        syncHeightWithFlushSync();
-      };
+      });

-      const debounceHandleResize = debounce(handleResize);
      const input = inputRef.current!;
      const containerWindow = ownerWindow(input);

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

      let resizeObserver: ResizeObserver;
      if (typeof ResizeObserver !== "undefined") {
@@ -208,8 +193,8 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
      }

      return () => {
-        debounceHandleResize.clear();
-        containerWindow.removeEventListener("resize", debounceHandleResize);
+        handleResize.clear();
+        containerWindow.removeEventListener("resize", handleResize);
        if (resizeObserver) {
          resizeObserver.disconnect();
        }
@@ -0,0 +1,37 @@
+export type AsChildProps =
+  | {
+      children: React.ReactElement | false | null;
+      /**
+       * Renders the component and its child as a single element,
+       * merging the props of the component with the props of the child.
+       *
+       * @example
+       * ```tsx
+       * <Component asChild data-prop>
+       *   <ChildComponent data-child />
+       * </Component>
+       *
+       * // Renders
+       * <MergedComponent data-prop data-child />
+       * ```
+       */
+      asChild: true;
+    }
+  | {
+      children: React.ReactNode;
+      /**
+       * Renders the component and its child as a single element,
+       * merging the props of the component with the props of the child.
+       *
+       * @example
+       * ```tsx
+       * <Component asChild data-prop>
+       *   <ChildComponent data-child />
+       * </Component>
+       *
+       * // Renders
+       * <MergedComponent data-prop data-child />
+       * ```
+       */
+      asChild?: false;
+    };
@@ -1 +1,2 @@
 export type { OverridableComponent } from "./OverridableComponent";
+export type { AsChildProps } from "./AsChildProps";
@@ -1,5 +1,19 @@
 # @navikt/ds-tailwind

+## 5.18.1
+
+## 5.18.0
+
+## 5.17.5
+
+## 5.17.4
+
+## 5.17.3
+
+## 5.17.2
+
+## 5.17.1
+
 ## 5.17.0

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

+## 5.18.1
+
+## 5.18.0
+
+## 5.17.5
+
+## 5.17.4
+
+## 5.17.3
+
+## 5.17.2
+
+## 5.17.1
+
 ## 5.17.0

 ## 5.16.0
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "5.17.0",
+  "version": "5.18.1",
  "description": "Design-tokens for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -1,13 +1,37 @@
 # Changelog

+## 5.18
+
+### @navikt/ds-react
+
+- Panel: Komponent er nå markert som deprecated. Bruk `Box` i fremtiden. ([#2712](https://github.com/navikt/aksel/pull/2712))
+
+* Portal: Ny komponent `Portal` som lar deg enkelt bruke `createPortal`, også på serversiden ([#2697](https://github.com/navikt/aksel/pull/2697))
+
 ## 5.17

 ### @navikt/ds-css

+- ExpansionCard: Padding-top for Content er justert opp 8px (medium) og 4px (small) ([#2699](https://github.com/navikt/aksel/pull/2699))
+
+* Checkbox: I noen edgecaser ved bruk av shadow-dom ble ikke checkmark sentert i Checkbox ([#2682](https://github.com/navikt/aksel/pull/2682))
+
 - Høykontrast: Komponenter støtter nå standard høykontrast-modus på Windows ([#2680](https://github.com/navikt/aksel/pull/2680))

 ### @navikt/ds-react

+- Bleed: `marginInline='full'` og `reflectivePadding` kan nå brukes sammen. ([#2695](https://github.com/navikt/aksel/pull/2695))
+
+* :bug: Textarea: maxLength virker nå selv om man sender inn onChange uten å sende inn value ([#2690](https://github.com/navikt/aksel/pull/2690))
+
+- :bug: Textarea: Sett riktig høyde når brukt i Modal + StrictMode ([#2679](https://github.com/navikt/aksel/pull/2679))
+
+- DatePicker: Knapper fikk ikke riktig aria-label ([#2678](https://github.com/navikt/aksel/pull/2678))
+
+- Textarea: debounce ResizeObserver for å unngå feilmelding ([#2685](https://github.com/navikt/aksel/pull/2685))
+
+* Eksponer variabelen "role" i Search-komponenten ([#2667](https://github.com/navikt/aksel/pull/2667))
+
 - Høykontrast: Komponenter støtter nå standard høykontrast-modus på Windows ([#2680](https://github.com/navikt/aksel/pull/2680))

 ## 5.16
@@ -64,6 +88,10 @@

 - Page: Lagt til ny bakgrunnsfarge `surface-subtle` og ny maksbredde på Page.Block `text` ([#2572](https://github.com/navikt/aksel/pull/2572))

+### @navikt/ds-tokens
+
+- Tokens: Ny token `--a-text-width-max: 576px` ([#2572](https://github.com/navikt/aksel/pull/2572))
+
 ### @navikt/ds-react

 - Accordion.Item, Dropdown, ReadMore og Tooltip: Har en ny prop `onOpenChange?: (open: boolean) => void;` som forteller nå-state når `open`-state endrer seg. Dette vil være nyttig hvis man ikke bruker controlled-state, men fortsatt ønsker å vite om komponenten er `open` eller ikke (f.eks logging). ([#2585](https://github.com/navikt/aksel/pull/2585))
@@ -72,10 +100,6 @@

 * Page: Lagt til ny bakgrunnsfarge `surface-subtle` og ny maksbredde på Page.Block `text` ([#2572](https://github.com/navikt/aksel/pull/2572))

-### @navikt/ds-tokens
-
- Tokens: Ny token `--a-text-width-max: 576px` ([#2572](https://github.com/navikt/aksel/pull/2572))
-
 ## 5.12

 ### @navikt/aksel-stylelint
@@ -240,6 +264,10 @@

 - :lipstick: CopyButton: Justert padding, gap og animasjon ([#2355](https://github.com/navikt/aksel/pull/2355))

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

 - :lipstick: Chips.Toggle: Ikon i uvalgt tilstand ([#2395](https://github.com/navikt/aksel/pull/2395))
@@ -260,10 +288,6 @@

 - :lipstick: CopyButton: Justert padding, gap og animasjon ([#2355](https://github.com/navikt/aksel/pull/2355))

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

 - Ikoner: Nye ikoner `ChevronLeftFirstCircle` og `ChevronRightLastCircle` ([#2365](https://github.com/navikt/aksel/pull/2365))
@@ -290,6 +314,10 @@

 - MonthPicker: Tilpasset padding og sizing på mobil. ([#2311](https://github.com/navikt/aksel/pull/2311))

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

 - Datepicker: Popover legger seg nå ikke ovenfor input ([#2349](https://github.com/navikt/aksel/pull/2349))
@@ -316,10 +344,6 @@

 - Remove tabIndex="-1" on Popover to fix VoiceOver navigation issue inside Popover ([#2303](https://github.com/navikt/aksel/pull/2303))

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

 - Ikoner: SVG export setter nå `height="1em"`, `width="1em"` og `fill="currentColor"`. ([#2300](https://github.com/navikt/aksel/pull/2300))
@@ -336,16 +360,16 @@

 * Skeleton: Width fungerer nå med inline-variant av Skeleton ([#2273](https://github.com/navikt/aksel/pull/2273))

+### @navikt/ds-tokens
+
+- Box: Ny primitive, erstatter dagens `Panel` ([#2195](https://github.com/navikt/aksel/pull/2195))
+
 ### @navikt/ds-react

 - Box: Ny primitive, erstatter dagens `Panel` ([#2195](https://github.com/navikt/aksel/pull/2195))

 * Skeleton: Width fungerer nå med inline-variant av Skeleton ([#2273](https://github.com/navikt/aksel/pull/2273))

-### @navikt/ds-tokens
-
- Box: Ny primitive, erstatter dagens `Panel` ([#2195](https://github.com/navikt/aksel/pull/2195))
-
 ## 5.4

 ### @navikt/ds-css
@@ -354,6 +378,10 @@

 * ErrorSummary: Har nå 8px border-radius ([#2256](https://github.com/navikt/aksel/pull/2256))

+### @navikt/ds-tokens
+
+- Tokens: `data-theme="light"` vil nå tilbakestille theming ([#2238](https://github.com/navikt/aksel/pull/2238))
+
 ### @navikt/ds-react

 - MonthPicker: Fikset kalkulering av fromDate/toDate ([#2269](https://github.com/navikt/aksel/pull/2269))
@@ -362,10 +390,6 @@

 - Search: Kjører nå bare preventDefault ved Escape når `input` inneholder tekst ([#2245](https://github.com/navikt/aksel/pull/2245))

-### @navikt/ds-tokens
-
- Tokens: `data-theme="light"` vil nå tilbakestille theming ([#2238](https://github.com/navikt/aksel/pull/2238))
-
 ## 5.3

 ### @navikt/ds-css
@@ -465,6 +489,16 @@

 * Table: Alle størrelser har justert padding. Small-size table bruker nå også standard typografi-størrelse (18px). ([#2178](https://github.com/navikt/aksel/pull/2178))

+### @navikt/ds-tokens
+
+- ConfirmationPanel: Fikset opplesing av feilmelding ([#2199](https://github.com/navikt/aksel/pull/2199))
+
+- Tokens: `--a-icon-alt-3` er nå i synk med figma ([#2199](https://github.com/navikt/aksel/pull/2199))
+
+* Gray: Gråfarger er nå mindre varme ([#2092](https://github.com/navikt/aksel/pull/2092))
+
+* Action: Selected-varianter av action er nå 'blue' ('deepblue' før) ([#2092](https://github.com/navikt/aksel/pull/2092))
+
 ### @navikt/ds-react

 - ConfirmationPanel: Fikset opplesing av feilmelding ([#2199](https://github.com/navikt/aksel/pull/2199))
@@ -481,16 +515,6 @@

 * Table: Har lagt til ny size: 'large'. ([#2178](https://github.com/navikt/aksel/pull/2178))

-### @navikt/ds-tokens
-
- ConfirmationPanel: Fikset opplesing av feilmelding ([#2199](https://github.com/navikt/aksel/pull/2199))
-
- Tokens: `--a-icon-alt-3` er nå i synk med figma ([#2199](https://github.com/navikt/aksel/pull/2199))
-
-* Gray: Gråfarger er nå mindre varme ([#2092](https://github.com/navikt/aksel/pull/2092))
-
-* Action: Selected-varianter av action er nå 'blue' ('deepblue' før) ([#2092](https://github.com/navikt/aksel/pull/2092))
-
 ## 4.12

 ### @navikt/ds-css
@@ -645,6 +669,10 @@

 * Shadow-tokens er oppdatert: Datepicker har nå ikke border, Modal bruker shadow-xlarge, LinkCard bruker shadow-xsmall ([PR](https://github.com/navikt/aksel/pull/2041))

+### @navikt/ds-tokens
+
+- Shadow-tokens er oppdatert til mer tydeligere varianter ([PR](https://github.com/navikt/aksel/pull/2041))
+
 ### @navikt/ds-tailwind

 - Shadow-tokens er oppdatert ([PR](https://github.com/navikt/aksel/pull/2041))
@@ -657,10 +685,6 @@

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

-### @navikt/ds-tokens
-
- Shadow-tokens er oppdatert til mer tydeligere varianter ([PR](https://github.com/navikt/aksel/pull/2041))
-
 ## 4.3

 ### @navikt/ds-css
@@ -699,6 +723,12 @@

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

+### @navikt/ds-tokens
+
+- :tada: Fargetokens for datavisualisering. ([PR](https://github.com/navikt/aksel/pull/2032))
+
+- Oppdatert text-subtle og icon-subtle tokens til 700-skala (tidligere 600). ([PR](https://github.com/navikt/aksel/pull/2036))
+
 ### @navikt/ds-tailwind

 - :tada: Fargetokens for datavisualisering. ([PR](https://github.com/navikt/aksel/pull/2032))
@@ -727,24 +757,12 @@

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

-### @navikt/ds-tokens
-
- :tada: Fargetokens for datavisualisering. ([PR](https://github.com/navikt/aksel/pull/2032))
-
- Oppdatert text-subtle og icon-subtle tokens til 700-skala (tidligere 600). ([PR](https://github.com/navikt/aksel/pull/2036))
-
 ### @navikt/aksel-icons

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

 ## 4.0

-### @navikt/aksel
-
- Codemod for migrering av Datepicker/Monthpicker ut av Beta. `npx @navikt/aksel codemod v4-date` ([PR](https://github.com/navikt/aksel/pull/2026))
-
- Codemods for migrering fra `@navikt/ds-react-internal` til `@navikt/ds-react` [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h3b8538e1981d) ([PR](https://github.com/navikt/aksel/pull/2026))
-
 ### @navikt/ds-css

 - All styling fra `@navikt/ds-css-internal` er flyttet til `@navikt/ds-css`. ([PR](https://github.com/navikt/aksel/pull/2026))
@@ -761,6 +779,12 @@

 - Komponenter i `@navikt/ds-react-internal` er flyttet over til `@navikt/ds-react`. [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h3b8538e1981d) ([PR](https://github.com/navikt/aksel/pull/2026))

+### @navikt/aksel
+
+- Codemod for migrering av Datepicker/Monthpicker ut av Beta. `npx @navikt/aksel codemod v4-date` ([PR](https://github.com/navikt/aksel/pull/2026))
+
+- Codemods for migrering fra `@navikt/ds-react-internal` til `@navikt/ds-react` [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h3b8538e1981d) ([PR](https://github.com/navikt/aksel/pull/2026))
+
 ## 3.4

 ### @navikt/aksel-stylelint
@@ -843,10 +867,6 @@

 ## 2.9

-### @navikt/aksel
-
- :truck: Flyttet Codemods fra `@navikt/ds-codemods` -> `@navikt/aksel`. `@navikt/ds-codemods` regnes nå som deprecated ([PR](https://github.com/navikt/aksel/pull/1952))
-
 ### @navikt/ds-css

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

 - ExpansionCard: Støtter nå `aria-labelledby` i tillegg til `aria-label` ([PR](https://github.com/navikt/aksel/pull/1944))

+### @navikt/aksel
+
+- :truck: Flyttet Codemods fra `@navikt/ds-codemods` -> `@navikt/aksel`. `@navikt/ds-codemods` regnes nå som deprecated ([PR](https://github.com/navikt/aksel/pull/1952))
+
 ### @navikt/aksel-icons

 - Oppdatert Statusikoner til å være tydeligere og mer konsistente. ([PR](https://github.com/navikt/aksel/pull/1959))
@@ -939,6 +963,10 @@

 ## 2.5

+### @navikt/ds-tokens
+
+- Breakpoint-tokens lagt til ([PR](https://github.com/navikt/aksel/pull/1832))
+
 ### @navikt/ds-tailwind

 - Breakpoint-tokens er lagt til. Overskriver native tailwind-breakpoints ([PR](https://github.com/navikt/aksel/pull/1832))
@@ -947,10 +975,6 @@

 - List: Refaktorert nestede lister

-### @navikt/ds-tokens
-
- Breakpoint-tokens lagt til ([PR](https://github.com/navikt/aksel/pull/1832))
-
 ## 2.4

 ### @navikt/ds-css
@@ -985,24 +1009,28 @@

 - Button: `Neutral`-variant.

-### @navikt/ds-react
-
- ToggleGroup: `neutral`-variant ([PR](https://github.com/navikt/aksel/pull/1789))
-
- Button: `neutral`-variant ([PR](https://github.com/navikt/aksel/pull/1789))
-
 ### @navikt/ds-tokens

 - Justeringer av semantiske fargetokens, statusfarger nå mer tydelig ([PR](https://github.com/navikt/aksel/pull/1787))

 - Oppdatert neutral-tokens ([PR](https://github.com/navikt/aksel/pull/1789))

+### @navikt/ds-react
+
+- ToggleGroup: `neutral`-variant ([PR](https://github.com/navikt/aksel/pull/1789))
+
+- Button: `neutral`-variant ([PR](https://github.com/navikt/aksel/pull/1789))
+
 ## 2.1

 ### @navikt/ds-css

 - TextField: `small`-variant har nå 8px horisontal padding (før 4px)

+### @navikt/ds-tokens
+
+- Fikset feil danger-hover token ([PR](https://github.com/navikt/aksel/pull/1665))
+
 ### @navikt/ds-react

 - Datepicker: Fikset rekkefølge på `onValidate` og `onRangeChange` i useRangepicker-hook
@@ -1019,10 +1047,6 @@

 - Datepicker/Monthpicker: år med 2 siffer i input fungerer nå

-### @navikt/ds-tokens
-
- Fikset feil danger-hover token ([PR](https://github.com/navikt/aksel/pull/1665))
-
 ## 2.0

 ### @navikt/ds-css
@@ -1037,6 +1061,10 @@

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

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

 - Alle token er oppdatert til nytt format. ([Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112))
@@ -1059,10 +1087,6 @@

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

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

 ### @navikt/ds-css
@@ -16,10 +16,10 @@
    "playroom"
  ],
  "dependencies": {
-    "@navikt/aksel-icons": "^5.17.0",
-    "@navikt/ds-css": "^5.17.0",
-    "@navikt/ds-react": "^5.17.0",
-    "@navikt/ds-tailwind": "^5.17.0",
-    "@navikt/ds-tokens": "^5.17.0"
+    "@navikt/aksel-icons": "^5.18.1",
+    "@navikt/ds-css": "^5.18.1",
+    "@navikt/ds-react": "^5.18.1",
+    "@navikt/ds-tailwind": "^5.18.1",
+    "@navikt/ds-tokens": "^5.18.1"
  }
 }
@@ -19,15 +19,14 @@ export const GlobalView = ({ cat }: { cat: string }) => {
            >
              <div className="component-checkered-bg z-[-1] h-16 w-16" />
            </div>
-            <dl className="grid h-full">
-              <dt className="inline-flex items-center gap-2">
-                <CopyButton
-                  text={sanitizeName(x.name)}
-                  copyText={x.name}
-                  size="small"
-                  iconPosition="right"
-                />
+            <dl>
+              <dt className="inline-flex items-start gap-1 text-medium">
+                <span className="flex min-h-8 items-center">
+                  {sanitizeName(x.name)}
+                </span>
+                <CopyButton copyText={x.name} size="small" />
              </dt>
+
              <dd className="mt-auto text-medium text-text-subtle">
                {getColorString(x.value)}
              </dd>
@@ -29,14 +29,12 @@ export const SemanticView = ({ cat }: { cat: string }) => {
              >
                Aa
              </div>
-              <dl className="grid h-full">
-                <dt className="inline-flex items-center gap-2">
-                  <CopyButton
-                    copyText={x.name}
-                    text={sanitizeName(x.name.replace("text-", ""))}
-                    size="small"
-                    iconPosition="right"
-                  />
+              <dl>
+                <dt className="inline-flex items-start gap-1 text-medium">
+                  <span className="flex min-h-8 items-center">
+                    {sanitizeName(x.name.replace("text-", ""))}
+                  </span>
+                  <CopyButton copyText={x.name} size="small" />
                </dt>
                <dd className="mt-auto text-medium text-text-subtle">
                  {ref ? (
@@ -80,14 +78,12 @@ export const SemanticView = ({ cat }: { cat: string }) => {
                  }}
                />
              </div>
-              <dl className="grid h-full">
-                <dt className="inline-flex items-center gap-2">
-                  <CopyButton
-                    text={sanitizeName(x.name.replace("icon-", ""))}
-                    copyText={x.name}
-                    size="small"
-                    iconPosition="right"
-                  />
+              <dl>
+                <dt className="inline-flex items-start gap-1 text-medium">
+                  <span className="flex min-h-8 items-center">
+                    {sanitizeName(x.name.replace("icon-", ""))}
+                  </span>
+                  <CopyButton copyText={x.name} size="small" />
                </dt>
                <dd className="mt-auto text-medium text-text-subtle">
                  {ref ? (
@@ -123,14 +119,12 @@ export const SemanticView = ({ cat }: { cat: string }) => {
                }}
                className="mr-3 grid h-16 w-16 place-content-center rounded-lg text-4xl leading-none"
              />
-              <dl className="grid h-full">
-                <dt className="inline-flex items-center gap-2">
-                  <CopyButton
-                    text={sanitizeName(x.name.replace("border-", ""))}
-                    copyText={x.name}
-                    size="small"
-                    iconPosition="right"
-                  />
+              <dl>
+                <dt className="inline-flex items-start gap-1 text-medium">
+                  <span className="flex min-h-8 items-center">
+                    {sanitizeName(x.name.replace("border-", ""))}
+                  </span>
+                  <CopyButton copyText={x.name} size="small" />
                </dt>
                <dd className="mt-auto text-medium text-text-subtle">
                  {ref ? (
@@ -195,14 +189,12 @@ export const SemanticView = ({ cat }: { cat: string }) => {
                  }}
                />
              </div>
-              <dl className="grid h-full">
-                <dt className="inline-flex items-center gap-2">
-                  <CopyButton
-                    text={sanitizeName(x.name.replace("surface-", ""))}
-                    copyText={x.name}
-                    size="small"
-                    iconPosition="right"
-                  />
+              <dl>
+                <dt className="inline-flex items-start gap-1 text-medium">
+                  <span className="flex min-h-8 items-center">
+                    {sanitizeName(x.name.replace("surface-", ""))}
+                  </span>
+                  <CopyButton copyText={x.name} size="small" />
                </dt>
                <dd className="mt-auto text-medium text-text-subtle">
                  {ref ? (
@@ -249,14 +241,12 @@ export const SemanticView = ({ cat }: { cat: string }) => {
                  style={{ backgroundColor: `var(${x.name})` }}
                />
              </div>
-              <dl className="grid h-full">
-                <dt className="inline-flex items-center gap-2">
-                  <CopyButton
-                    text={sanitizeName(x.name.replace("surface-", ""))}
-                    copyText={x.name}
-                    size="small"
-                    iconPosition="right"
-                  />
+              <dl>
+                <dt className="inline-flex items-start gap-1 text-medium">
+                  <span className="flex min-h-8 items-center">
+                    {sanitizeName(x.name.replace("surface-", ""))}
+                  </span>
+                  <CopyButton copyText={x.name} size="small" />
                </dt>
                <dd className="mt-auto text-medium text-text-subtle">
                  {ref ? (
@@ -294,14 +284,12 @@ export const SemanticView = ({ cat }: { cat: string }) => {
            >
              <div className="component-checkered-bg z-[-1] h-16 w-16" />
            </div>
-            <dl className="grid h-full">
-              <dt className="inline-flex items-center gap-2">
-                <CopyButton
-                  text={sanitizeName(x.name.replace("surface-", ""))}
-                  copyText={x.name}
-                  size="small"
-                  iconPosition="right"
-                />
+            <dl>
+              <dt className="inline-flex items-start gap-1 text-medium">
+                <span className="flex min-h-8 items-center">
+                  {sanitizeName(x.name.replace("surface-", ""))}
+                </span>
+                <CopyButton copyText={x.name} size="small" />
              </dt>
              <dd className="mt-auto text-medium text-text-subtle">
                {ref ? (
@@ -17,14 +17,12 @@ export const ShadowView = ({ cat }: { cat: string }) => {
              }}
              className="mr-3 grid h-16 w-16 place-content-center rounded-lg text-4xl leading-none"
            />
-            <dl className="grid h-full">
-              <dt className="inline-flex items-center gap-2">
-                <CopyButton
-                  text={sanitizeName(x.name.replace("shadow-", ""))}
-                  copyText={x.name}
-                  size="small"
-                  iconPosition="right"
-                />
+            <dl>
+              <dt className="inline-flex items-start gap-1 text-medium">
+                <span className="flex min-h-8 items-center">
+                  {sanitizeName(x.name.replace("shadow-", ""))}
+                </span>
+                <CopyButton copyText={x.name} size="small" />
              </dt>
              <dd className="mt-auto text-medium text-text-subtle">
                {x.value}
@@ -15,15 +15,14 @@ export const ShapesView = ({ cat }: { cat: string }) => {
              style={{ borderRadius: x.value }}
              className="mr-3 grid h-16 w-16 place-content-center rounded-lg bg-surface-alt-3-strong text-4xl leading-none"
            />
-            <dl className="grid h-full">
-              <dt className="inline-flex items-center gap-2">
-                <CopyButton
-                  text={sanitizeName(x.name.replace("border-radius-", ""))}
-                  copyText={x.name}
-                  size="small"
-                  iconPosition="right"
-                />
+            <dl>
+              <dt className="inline-flex items-start gap-1 text-medium">
+                <span className="flex min-h-8 items-center">
+                  {sanitizeName(x.name.replace("border-radius-", ""))}
+                </span>
+                <CopyButton copyText={x.name} size="small" />
              </dt>
+
              <dd className="mt-auto text-medium text-text-subtle">
                {x.value}
              </dd>
@@ -34,14 +34,12 @@ export const ZindexView = ({ cat }: { cat: string }) => {
                />
              ))}
            </div>
-            <dl className="grid h-full">
-              <dt className="inline-flex items-center gap-2">
-                <CopyButton
-                  text={sanitizeName(token.name.replace("z-index-", ""))}
-                  copyText={token.name}
-                  size="small"
-                  iconPosition="right"
-                />
+            <dl>
+              <dt className="inline-flex items-start gap-1 text-medium">
+                <span className="flex min-h-8 items-center">
+                  {sanitizeName(token.name.replace("z-index-", ""))}
+                </span>
+                <CopyButton copyText={token.name} size="small" />
              </dt>
              <dd className="mt-auto text-medium text-text-subtle">
                {token.value}
@@ -20,5 +20,13 @@ export const getGlobalReference = (
    .filter(([key]) => key.startsWith("global-"))
    .reduce((acc, [, value]) => [...acc, ...value], []);

-  return globalRefs.find(({ value }) => semanticValue === value) ?? null;
+  return (
+    globalRefs.find(
+      ({ value, name }) => semanticValue === value && notBlacklistedName(name),
+    ) ?? null
+  );
 };
+
+function notBlacklistedName(name: string) {
+  return !["--a-nav-red"].includes(name);
+}
@@ -17,11 +17,14 @@ const args = {
    _key: getKey(),
    alt: "Alt-tekst for video",
    caption: "caption-tekst",
-    transkripsjon: "Transkripsjonstekst",
+    transkripsjon:
+      "Transkripsjonstekst avsnitt 1 linje 1\nLinje 2\n\nTranskripsjonstekst avsnitt 2",
    webm: {
      url: `https://cdn.sanity.io/files/${SANITY_PROJECT_ID}/production/274a2ceb69b056e1a7048ad1a5a2f8deff53a2f4.webm`,
      extension: "WEBM",
    },
+    track:
+      "data:@file/octet-stream;base64,V0VCVlRUCgowMDowMS4wMDAgLS0+IDAwOjAyLjAwMApIZWkhCgowMDowMy4wMDAgLS0+IDAwOjA0LjUwMApEZXR0ZSBlciBldCBla3NlbXBlbAoKMDA6MDQuNTAwIC0tPiAwMDowNS43MDAKcMOlIHVuZGVydGVrc3Rlci4=",
  },
 };

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useId, useState } from "react";
 import { BodyLong, ReadMore } from "@navikt/ds-react";
 import ErrorBoundary from "@/error-boundary";
 import { VideoT } from "@/types";
@@ -9,6 +9,7 @@ type VideoProps = {

 const Video = ({ node }: VideoProps) => {
  const [open, setOpen] = useState(false);
+  const transcriptId = useId();

  if (!node || (!node.webm && !node.fallback) || !node.alt) {
    return null;
@@ -24,11 +25,9 @@ const Video = ({ node }: VideoProps) => {
        playsInline
        controls
        loop
-        aria-describedby={
-          node.transkripsjon ? node.alt + "transkript" : undefined
-        }
-        aria-label="Trykk space for å starte/pause video"
+        aria-describedby={node.transkripsjon ? transcriptId : undefined}
        poster="/images/og/video-poster.png"
+        crossOrigin="anonymous" // Needed for the <track>
      >
        <source src={node.webm.url} type={`video/${node.webm.extension}`} />
        {node.fallback && (
@@ -37,19 +36,27 @@ const Video = ({ node }: VideoProps) => {
            type={`video/${node.fallback.extension}`}
          />
        )}
+        {node.track && <track kind="captions" srcLang="no" src={node.track} />}
      </video>
      {node?.caption && (
-        <BodyLong as="figcaption" className="px-7">
+        <BodyLong as="figcaption" className="px-4">
          {node.caption}
        </BodyLong>
      )}
      {node?.transkripsjon && (
        <ReadMore
-          header="transkripsjon"
+          className="px-4"
+          header="Transkripsjon"
          open={open}
          onClick={() => setOpen((x) => !x)}
        >
-          <span id={node.alt + "transkript"}>{node.transkripsjon}</span>
+          <div id={transcriptId} className="whitespace-break-spaces">
+            {node.transkripsjon.split("\n\n").map((paragraph, i, array) => (
+              <BodyLong key={i} spacing={i < array.length - 1}>
+                {paragraph}
+              </BodyLong>
+            ))}
+          </div>
        </ReadMore>
      )}
    </figure>
@@ -359,6 +359,7 @@ export type VideoT = ArrayObjectT<{
  alt: string;
  webm: { extension: string; url: string } | null;
  fallback?: { extension: string; url: string } | null;
+  track?: string;
  transkripsjon?: string;
  caption?: string;
 }>;
@@ -44,5 +44,5 @@ export const Demo = {

 export const args = {
  index: 7,
-  desc: "Før du belger å bruke range, vurder om to enkelte datepickere for start/slutt-dato ville vært bedre. Range fungerer bedre for korte perioder innenfor en måned.",
+  desc: "Før du velger å bruke range, vurder om to separate datepickere i single mode er bedre. Range fungerer best for korte perioder innenfor en måned.",
 };
@@ -32,5 +32,5 @@ export const Demo = {

 export const args = {
  index: 10,
-  desc: "Prop allowTwoDigitYear legger til støtte for 'yy'-format. Tilgjengelig year-range vil være fra 1943-2042 (2023).",
+  desc: "Prop 'allowTwoDigitYear' legger til støtte for 'yy'-format. Tilgjengelig year-range vil være 80 år bakover og 19 år framover. I 2024 tilsvarer det 1944-2043.",
 };
@@ -13,7 +13,7 @@ const Example = () => {
 };

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

 /* Storybook story */
 export const Demo = {
@@ -0,0 +1,34 @@
+import { Radio, RadioGroup, ReadMore } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <form>
+      <RadioGroup
+        legend="Kan du ta alle typer arbeid?"
+        description="Hvis du har helsemessige begrensninger og ikke kan ta alle typer arbeid, vil vi ta hensyn til dette."
+      >
+        <Radio value={true}>Ja</Radio>
+        <Radio value={false}>Nei</Radio>
+      </RadioGroup>
+      <ReadMore header="Dette regnes som helsemessige begrensninger">
+        Med helsemessige begrensninger mener vi funksjonshemming, sykdom,
+        allergier som hindrer deg i arbeidet eller andre årsaker som må tas
+        hensyn til når du skal finne nytt arbeid. Du må oppgi hva som gjelder
+        for deg, og dokumentere de helsemessige årsakene du viser til.
+      </ReadMore>
+    </form>
+  );
+};
+
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
+export default withDsExample(Example, { variant: "static" });
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 2,
+};
@@ -13,7 +13,7 @@ const Example = () => {
 };

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

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

 export const args = {
-  index: 0,
+  index: 1,
 };
@@ -60,6 +60,8 @@ export const getStaticProps: GetStaticProps = async ({
      slug,
    });

+  const chipsData = groupByTema(chipsDataAll)[slug];
+
  return {
    props: {
      tema,
@@ -71,7 +73,7 @@ export const getStaticProps: GetStaticProps = async ({
      title: "",
      chipsData: groupByTema(chipsDataAll)[slug],
    },
-    notFound: !tema || !heroNav.some((nav) => nav.slug === slug),
+    notFound: !tema || !heroNav.some((nav) => nav.slug === slug) || !chipsData,
    revalidate: 60,
  };
 };
@@ -101,7 +101,7 @@ const Page = ({ blogg, morePosts, publishDate }: PageProps["props"]) => {
            <Heading
              level="1"
              size="xlarge"
-              className="text-wrap-balance mt-1 break-words text-5xl leading-[1.2] text-deepblue-800 [hyphens:_auto]"
+              className="text-wrap-balance mt-1 hyphens-auto break-words text-5xl leading-[1.2] text-deepblue-800 md:hyphens-none"
            >
              {blogg.heading}
            </Heading>
@@ -79,7 +79,8 @@ const defaultBlock = `
    "fallback": {
      "url": fallback.asset->url,
      "extension": fallback.asset->extension
-    }
+    },
+    "track": track.asset->url
 },
 _type == "alert" =>{
    ...,
@@ -10,6 +10,7 @@ import {
  PencilBoardIcon,
  RectangleSectionsIcon,
  TokenIcon,
+  EyeIcon,
 } from "@navikt/aksel-icons";
 import {
  SANITY_API_VERSION,
@@ -298,10 +299,11 @@ export const structure: StructureResolver = async (
                      .icon(FileTextIcon)
                      .id(`publication_flow`),
                    S.listItem()
-                      .title("Artikkel Visninger")
+                      .title("Artikkelvisninger")
+                      .icon(EyeIcon)
                      .child(
                        S.documentList()
-                          .title("Artikkel Visninger")
+                          .title("Artikkelvisninger")
                          .filter(`_type == 'article_views'`)
                          .apiVersion(SANITY_API_VERSION)
                          .menuItems([
@@ -2,7 +2,7 @@ import { defineField, defineType } from "sanity";
 import { LineGraphIcon } from "@navikt/aksel-icons";

 export const ArticleViews = defineType({
-  title: "Artikkel Visninger",
+  title: "Artikkelvisninger",
  name: "article_views",
  type: "document",
  readOnly: ({ currentUser }) =>
@@ -20,9 +20,9 @@ export const ArticleViews = defineType({
  },
  orderings: [
    {
-      title: "Views total",
-      name: "views",
-      by: [{ field: "views", direction: "desc" }],
+      title: "Views day",
+      name: "views_day",
+      by: [{ field: "views_day", direction: "desc" }],
    },
    {
      title: "Views week",
@@ -43,28 +43,29 @@ export const ArticleViews = defineType({
  fields: [
    defineField({
      type: "number",
-      name: "views",
-      description: "total lifetime views",
+      name: "views_day",
+      title: "Visninger i de siste 24 timer",
    }),
    defineField({
      type: "number",
      name: "views_week",
-      description: "views in the last week",
+      title: "Visninger siste 7 dager",
    }),
    defineField({
      type: "number",
      name: "views_month",
-      description: "views in the last month",
+      title: "Visninger siste 30 dager",
    }),
    defineField({
      type: "number",
      name: "views_year",
-      description: "views in the last year",
+      title: "Visninger siste 365 dager",
    }),
    defineField({
      title: "articleRef",
      name: "article_ref",
      type: "reference",
+      weak: true,
      to: { type: "aksel_artikkel" },
    }),
    defineField({
@@ -1,5 +1,27 @@
-import { defineField, defineType } from "sanity";
+import { createClient, groq } from "next-sanity";
+import { FileValue, defineField, defineType } from "sanity";
 import { VideoplayerIcon } from "@navikt/aksel-icons";
+import { clientConfig } from "@/sanity/config";
+
+const sanityClient = createClient({
+  ...clientConfig,
+  withCredentials: true,
+});
+
+const query = groq`*[_id == $id][0]{size}`;
+
+const validateFileSize = (maxSizeInMb: number) => (file: FileValue) => {
+  if (!file) {
+    return true;
+  }
+  return sanityClient
+    .fetch(query, { id: file.asset._ref })
+    .then((res) =>
+      res.size > 1024 * 1024 * maxSizeInMb
+        ? `Maks filstørrelse er ${maxSizeInMb} MB`
+        : true,
+    );
+};

 export const Video = defineType({
  name: "video",
@@ -9,33 +31,44 @@ export const Video = defineType({
  fields: [
    defineField({
      name: "webm",
-      title: "Video i WebM format",
-      description:
-        "Vi anbefaler å bruke Webm formatet. Formatet minsker fil-størrelse + perseverer kvalitet bedre",
+      title: "Video i WebM-format",
+      description: `Vi bruker WebM fordi det har bedre komprimering enn f.eks. MP4.
+        For å konvertere kan du f.eks. bruke Handbrake (https://handbrake.fr/).
+        OBS: Ikke legg inn store/lange videoer! Da er det bedre å lenke til en ekstern kilde.`,
      type: "file",
      options: {
        accept: "video/webm",
      },
-      validation: (Rule) => Rule.required(),
+      validation: (Rule) => Rule.required().custom(validateFileSize(30)),
    }),
    defineField({
      name: "fallback",
-      title: "Video i Mp4 format (fallback)",
+      title: "Video i MP4-format (fallback)",
+      description: "For eldre nettlesere som ikke støtter WebM",
      type: "file",
      options: {
        accept: "video/mp4",
      },
+      validation: (Rule) => Rule.custom(validateFileSize(60)),
+    }),
+    defineField({
+      name: "track",
+      title: "Undertekster (VTT)",
+      type: "file",
+      options: {
+        accept: ".vtt",
+      },
    }),
    defineField({
      name: "alt",
-      title: "Alt tekst for skjermlesere",
+      title: "Alt-tekst for skjermlesere",
      type: "string",
      validation: (Rule) => Rule.required(),
    }),
    defineField({
      name: "caption",
      title: "Videotekst",
-      description: "Kort beskrivelse som vises rett under videon",
+      description: "Kort beskrivelse som vises rett under videoen",
      type: "string",
    }),
    defineField({
@@ -11,7 +11,8 @@
    "storybook:aksel": "yarn concurrently \"yarn watch:tw\" \"yarn storybook dev -c aksel.nav.no/website/.storybook -p 6007\"",
    "dev": "yarn workspace aksel.nav.no dev",
    "docgen": "yarn workspaces foreach -p run docgen",
-    "changelog": "deno run --allow-read --allow-write --no-config scripts/deno/createMainChangelog.ts",
+    "changelog": "deno run --allow-read --allow-write --no-config scripts/changelog/createMainChangelog.ts",
+    "updateArticleViews": "deno run --allow-net --allow-env --allow-read --no-config scripts/article-views/update-article-views/main.ts",
    "chromatic": "npx chromatic --only-changed --project-token x3xqdfgkujg --build-script-name build:storybook",
    "build:storybook": "storybook build",
    "test": "yarn workspaces foreach -p run test",
@@ -0,0 +1,16 @@
+FROM denoland/deno:1.40.2
+
+WORKDIR /app
+RUN chown -R deno:deno /app
+USER deno
+
+COPY scripts/article-views/deps.ts scripts/article-views/deps.ts
+RUN deno cache scripts/article-views/deps.ts
+
+# this COPY should copy over .env created in github action
+# only copies over what exists in the docker context 
+# check out the accompanying .dockerignore
+COPY . .
+RUN deno cache scripts/article-views/update-article-views/main.ts
+
+CMD ["run", "--allow-net", "--allow-env", "--allow-read", "scripts/article-views/update-article-views/main.ts"]
@@ -0,0 +1,3 @@
+*
+!aksel.nav.no/website/sanity/config.ts
+!scripts/article-views/*
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot]	792962592f	Version Packages (#2720 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-02-08 13:08:21 +01:00
Ken	4a02a1987c	Deprecate Panel (#2712 ) * ⚰️ Markert Panel som deprecated * 📝 Changeset * 📝 JSDOC var feil for border på Box * 🐛 📝 JSDoc manglet border-radius	2024-02-08 11:46:20 +01:00
Ken	700943b4a5	[ci skip] ♻️ Refaktorert Button-story	2024-02-07 20:31:25 +01:00
Ken	521c982457	🚚 Oppdatert imports til direkteimports og ikke fra root-index (#2715 )	2024-02-07 16:17:17 +01:00
Ken	8c17099087	🔥 Fjernet hyphen på blogg-headings (#2711 ) * 🔥 Fjernet hyphen på blogg-headings * 🎨 Bare hyphens på mobil	2024-02-07 13:42:58 +01:00
Ken	29241a7153	⚡ Refaktorert alert-stories for mindre chromatic-tester (#2709 ) * ⚡ refaktorert alert-stories for mindre chromatic-tester * 🐛 Fikset imports	2024-02-07 13:42:26 +01:00
github-actions[bot]andgithub-actions[bot]	7e4ee40a7f	Version Packages (#2708 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-02-07 12:26:07 +01:00
Halvor Haugan	2be97970d6	Date/MonthPicker: Justeringer JSDOC og eksempel-desc (#2704 )	2024-02-07 09:42:37 +01:00
Halvor Haugan	5b3c1f33c4	Eksterne typer kommer nå med i docgen (#2705 )	2024-02-07 09:30:27 +01:00
KenandHalvor Haugan	f44ff44410	Bytter ut FloatingPortal med egen implementasjon (#2697 ) * 🎉 Egen Portal-komponent * 🎨 Portal og Overlay exportert i root * ♻️ Tooltip bruker egen Portal * 📝 Changeset * 🔥 Fjernet ID på Portal-element * 🎉 Ny type WithAsChild * ♻️ Mer robust sjekk for conditional elements i WithAsChild * 📝 WithAsChild JSDOC * 📝 WithAsChild JSDOC 2 * Update .changeset/lovely-points-heal.md Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * ♻️ Fikset kommentarer fra git-pr --------- Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>	2024-02-06 18:02:00 +01:00
Ken	855669538e	⚡ Kjører bare release-workflow når nødvendige filer er endret (#2701 )	2024-02-06 18:01:43 +01:00
github-actions[bot]andgithub-actions[bot]	3d830dc123	Version Packages (#2703 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-02-06 13:56:46 +01:00
Ken	dcca2a9560	Expansioncard padding top (#2699 ) * 🎉 Justert padding for expansioncard small * 🎉 Justert padding for expansioncard small	2024-02-06 13:10:08 +01:00
Ken	26fb028f07	⚡ Filterer ut chromatic-snapshots for build-files (#2700 )	2024-02-06 11:59:51 +01:00
Halvor Haugan	d928769d6f	[aksel.nav.no] Fiks for teksting i video	2024-02-05 14:55:22 +01:00
Julian Nymark	e96d33d13e	👷 update permissions (removed too much)	2024-02-05 14:35:38 +01:00
Julian Nymark	00ebe1c18b	👷 update workflow (post merge)	2024-02-05 14:31:51 +01:00
Julian NymarkandKen	53be894ad0	Gp popular articles (#2647 ) * ❇️ new schema for view tracking * 🚧 wip for article views schema * 🚧 wip on schema * 🚧 schema changes for ArticleViews * 🚧 run prettier with new config * 🚧 deno script to update article views * 🚧 working sanity document updates with bogus view data * 🚧 helper to delete all article_views * 🚧 add views_day * ✨ working update for views on all gp articles * 💄 eye icon for page views in sanity studio * ♻️ cleanup from PR review / huddle * 🚧 improvements to updateViews script * 🚧 seemingly healthy queries (sometimes proxy gives stale data?) * 👷 add .github/workflow for update views * 👷 update .github/workflow for update views * 👷 add env var in workflow * ♻️ refactor from PR comments * ♻️ refactor from PR comments * ♻️ refactor from PR comments * ♻️ refactor from PR comments * ♻️ refactor from PR comments * ♻️ refactor from PR comments * ♻️ refactor from PR comments * 👷 update workflow * 🐛 correct paths to changelog script * 🐛 remove unused ?? -1 * 👷 dockerfile and naisjob.yml * 👷 yml variable formatting * 👷 yml update * 👷 yml variable formatting * 🔨 .prettierignore for all yml/yaml starting with nais * 👷 unique name for naisjob * 👷 new nais yaml * 👷 yml variable formatting * 👷 remove workflow, the workflow is developed in main * 👷 update yml * 🚧 update naisjob yml * 🚧 update naisjob yml * 🚧 update Dockerfile * 🚧 update Dockerfile (permissions) * 🚧 update Dockerfile * 🚧 update Dockerfile * 🚧 update Dockerfile * 👷 decouple config code from rest of repo (more duplication, more robustness), build with correct docker context * 👷 cache deps in dockerfile on build-time (no need to fetch at runtime and add to pod AccessPolicy) * 👷 relative path might work, test Dockerfile live as it works fine locally... buildx?! * 👷 test github action docker context tweak * 👷 test script command entrypoint (workdir is not project root) * 👷 add AccessPolicy for reops-proxy * 👷 better github workflow naming * 👷 refactor _and_ optimize the dockerfile * 👷 new docker command path for nais yml * Update scripts/article-views/queries.ts Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> * 👷 do not add rows if no data * 🐛 fix sanity query) + now delete + update in single transaction --------- Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>	2024-02-05 14:29:14 +01:00
Julian Nymark	614946097e	[aksel.nav.no] ♿ forbedret Video-modul (#2693 )	2024-02-05 14:09:43 +01:00
github-actions[bot]andgithub-actions[bot]	74ac20ea7c	Version Packages (#2696 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-02-02 17:54:34 +01:00
Ken	d299137774	🐛 Bleed håndtere reflectivePadding og marginInline Full riktig (#2695 )	2024-02-02 17:52:45 +01:00
Julian Nymark	304f6d6a12	👷 test workflow changes (update-article-views)	2024-02-02 15:44:15 +01:00
Halvor Haugan	bf6952c2b2	Oppdatering av eksempler på ReadMore (#2691 )	2024-02-02 09:59:04 +01:00
github-actions[bot]andgithub-actions[bot]	7705dd4ae5	Version Packages (#2692 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-02-01 14:37:43 +01:00
Halvor Haugan	d9ce1299d9	🐛 Textarea: maxLength virker nå med onChange uten value (#2690 )	2024-02-01 14:29:56 +01:00
Julian Nymark	0890eed59e	👷 better github workflow naming	2024-02-01 14:24:10 +01:00
Ken	dbd7150762	🐛 Sletting av innholdstyper i CMS brakk deploy av Aksel, nye /gp-sider gir nå 404 uten riktig data	2024-02-01 10:14:24 +01:00
Ken	58933e2584	🎨 Bedre kopi visning av designtokens + refererer ikke til nav-red lengre (#2689 )	2024-02-01 09:17:21 +01:00
Julian Nymark	86279919c8	👷 test github action docker context tweak	2024-01-31 17:46:37 +01:00
github-actions[bot]andgithub-actions[bot]	8866572e69	Version Packages (#2686 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-01-31 11:33:47 +01:00
Julian Nymark Halvor Haugan Ken Ken	a1accdbd95	✨ suggest some .vscode workspace settings.json / extensions.json (#2664 ) * ✨ suggest some workspace settigs / extensions.json * 🚚 css-custom-properties -> css-variable-autocomplete * Update .vscode/settings.json Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * 🔥 remove some extensions * ✨ add some settings * 🔥 remove wrongly added files to branch * Update .vscode/settings.json * Update .vscode/settings.json * Update .vscode/settings.json * 🎨 Fjernet noen uødvendige extensions * 🎨 La til lokal TS-bruk --------- Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> Co-authored-by: Ken <ken.aleksander@gmail.com>	2024-01-31 10:47:11 +01:00
Ken	fdfdebfa99	🐛 Sentrering av checkmark i Checkbox (#2682 ) * 🐛 Checkmark er nå alltid sentrert i checkbox * 📝 Changeset * Update @navikt/core/css/form/radio-checkbox.css	2024-01-31 10:47:02 +01:00
Halvor Haugan	56abe568e2	Textarea: debounce ResizeObserver for å unngå feilmelding (#2685 )	2024-01-31 10:46:29 +01:00
Halvor Haugan	34acbb87a5	🐛 Textarea: Sett riktig høyde når brukt i Modal + StrictMode (#2679 )	2024-01-31 10:35:43 +01:00
Ken	fd479e3160	🐞 Datepicker Day Button (#2678 ) * 🐛 Fikset Datepicker Day-button * 📝 Changeset * 🔥 Fjernet ubrukt referanse til DayButton i Datepicker	2024-01-31 10:30:37 +01:00
github-actions[bot]andgithub-actions[bot]	03ca21b4f6	Version Packages (#2683 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-01-30 22:09:38 +01:00
Vilde Roksand Fauchald	e7804297bf	Eksponer variabelen "role" i Search-komponenten (#2667 ) * expose role variable so its possible to change it * changeset	2024-01-30 22:07:49 +01:00