feat: Added updated attachment API

feat: attachment WIP
2026-10-26 15:42:05 +00:00 · 2026-10-23 14:03:18 +02:00 · 2026-10-22 16:08:36 +02:00
149 changed files with 1319 additions and 1609 deletions
@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": minor
+"@navikt/ds-css": patch
+---
+
+DataGrid: Add top and bottom content areas outside the table's scrollable viewport.
@@ -22,7 +22,7 @@
 ## Repo summary

 - Nav's design system. Yarn 4 workspaces monorepo: published packages under `@navikt/` + docs site `aksel.nav.no/` + `apps/` + `tooling/`.
- Stack: TypeScript 6, React 19 (dev), Next.js 16, Storybook 10, Vitest 4, ESLint 9, Stylelint 17, Oxlint (JS/TS lint), Prettier 3 (formatting). Node 22+, Yarn 4.18.0.
+- Stack: TypeScript 6, React 19 (dev), Next.js 16, Storybook 10, Vitest 4, ESLint 9, Stylelint 17, Biome 2 (lint only), Prettier 3 (formatting). Node 22+, Yarn 4.18.0.
 - Published `@navikt/*` packages must stay React 17 compatible (peer `react ^17 || ^18 || ^19`).

 ## Start and validate
@@ -45,7 +45,7 @@

 ## Commands

- `corepack yarn eslint --max-warnings=0 --no-warn-ignored <files...>` / `corepack yarn stylelint <files...>` / `corepack yarn oxlint --deny-warnings <files...>`
+- `corepack yarn eslint --max-warnings=0 --no-warn-ignored <files...>` / `corepack yarn stylelint <files...>` / `corepack yarn biome lint --no-errors-on-unmatched <files...>`
 - `corepack yarn tsc --noEmit --incremental false --project <tsconfig>` - targeted type-check
 - `corepack yarn workspace <name> <script>` - e.g. `@navikt/ds-react test` (Vitest + tsc), `website test`
 - `corepack yarn lint` / `corepack yarn test` / `corepack yarn boot` - root suites (slow; cross-workspace changes only)
@@ -64,7 +64,7 @@ Path-specific rules load automatically from `.github/instructions/` (see each `a
 - `@navikt/aksel/src/` - CLI and codemods
 - `aksel.nav.no/website/` - Next.js docs site · `aksel.nav.no/sanity-studio/` - CMS schema
 - `apps/playroom/`, `apps/mcp-server/`, `apps/figma-icon-plugin/` - apps · `tooling/` - ESLint plugin, scripts, changelog, analyzer
- `.changeset/` - release notes · Root config: `eslint.config.js`, `stylelint.config.mjs`, `.oxlintrc.json`, `vitest.config.ts`, `.storybook/`
+- `.changeset/` - release notes · Root config: `eslint.config.js`, `stylelint.config.mjs`, `biome.json`, `vitest.config.ts`, `.storybook/`

 ## Skills and agents

@@ -90,4 +90,3 @@ Path-specific rules load automatically from `.github/instructions/` (see each `a
 - Preserve JSDoc on public props/components when changing public APIs.
 - Reuse helpers: `cl`, `composeEventHandlers`, `useId`, `omit`, `useClientLayoutEffect`, `useEventListener`.
 - No tests for trivial logic. Only tests for complex logic that has a higher risk of breaking.
- Suppress Oxlint rules with `oxlint-disable-next-line <rule>` / `oxlint-disable <rule>`, never `eslint-disable` (breaks ESLint).
@@ -1,13 +1,11 @@
 ---
-description: "JS/TS conventions not enforced by ESLint/Oxlint: loops, export style and placement."
+description: "JS/TS conventions not enforced by ESLint/Biome: loops, export style and placement."
 applyTo: "**/*.ts,**/*.tsx,**/*.js,**/*.mts,**/*.mjs"
 ---

 # JS/TS conventions

-Formatting and import order are handled by Prettier; linting by ESLint and Oxlint. Don't hand-tune formatting or import order.
-
-Suppress Oxlint rules with `// oxlint-disable-next-line <rule>` (file-level: `/* oxlint-disable <rule> */`). Never use `eslint-disable` for Oxlint rules; ESLint reports unknown rules and unused directives.
+Formatting, import order and `import type` are handled by Prettier and Biome. Don't hand-tune them.

 - Use `for...of` instead of `Array.forEach`. It supports `break`/`continue`/`await` and reads top-down.
 - Use named exports only. Keep type exports separate from value exports (`export { X }` / `export type { XProps }`).
@@ -59,7 +59,7 @@ Group only matching files:
 ```sh
 corepack yarn eslint --max-warnings=0 --no-warn-ignored <changed .ts/.tsx/.js/.jsx files>
 corepack yarn stylelint <changed .css files>
-corepack yarn oxlint --deny-warnings <changed .ts/.tsx/.js/.jsx files>
+corepack yarn biome lint --no-errors-on-unmatched <changed supported source/config files>
 ```

 Do not pass unsupported file types to make a command appear comprehensive. Documentation-only changes need no code validation unless a documentation check exists.
@@ -26,7 +26,7 @@ argument-hint: "PR number, branch or files to review"
 - 🟡 **Suggestion**: should fix. Missing test, docs or changeset, maintainability risk, over-editing.
 - 💭 **Nit**: optional. Leave it out when in doubt.

-Skip anything ESLint, Stylelint, Oxlint, Prettier or TypeScript already catches. No praise-only or speculative comments. Every finding says **why** it matters and what to do.
+Skip anything ESLint, Stylelint, Biome, Prettier or TypeScript already catches. No praise-only or speculative comments. Every finding says **why** it matters and what to do.

 ## Checklist

@@ -1,334 +0,0 @@
-{
-  "$schema": "./node_modules/oxlint/configuration_schema.json",
-  "plugins": [
-    "eslint",
-    "typescript",
-    "unicorn",
-    "oxc",
-    "react",
-    "jsx-a11y",
-    "import",
-    "vitest"
-  ],
-  "categories": {
-    "correctness": "error"
-  },
-  "ignorePatterns": [
-    "**/lib",
-    "**/public",
-    "**/esm",
-    "**/cjs",
-    "**/dist",
-    "**/.next",
-    "**/.build",
-    "**/coverage",
-    "**/storybook-static",
-    "**/test-results",
-    "**/playwright-report",
-    "**/.sanity/runtime",
-    "**/next-env.d.ts",
-    "**/codemod/**/*.js",
-    "**/transforms/**/*.input.*",
-    "**/transforms/**/*.output.*",
-    "@navikt/aksel/**/*.input.*",
-    "@navikt/aksel/**/*.output.*",
-    "**/modal/helpers/dialog-polyfill.ts",
-    "**/query-types.ts",
-    "**/component-names.generated.ts",
-    "**/tokens/**/plugin.js",
-    "@navikt/aksel-icons/src",
-    "@navikt/aksel/src/version.ts",
-    "@navikt/core/tailwind/src/tokens.ts",
-    "@navikt/core/tailwind/tailwind.config.js",
-    "@navikt/core/tailwind/tailwind.darkside.config.js",
-    "@navikt/core/tokens/token_docs.js",
-    "apps/playroom/playroom.config.js",
-    "apps/playroom/src/auto-generated-imports.ts",
-    "apps/figma-icon-plugin/src/ui/vite-env.d.ts",
-    "tooling/analyzer/temp",
-    ".yarn"
-  ],
-  "rules": {
-    "jsx-a11y/alt-text": "error",
-    "jsx-a11y/anchor-ambiguous-text": "error",
-    "jsx-a11y/anchor-has-content": "error",
-    "jsx-a11y/anchor-is-valid": "error",
-    "jsx-a11y/aria-activedescendant-has-tabindex": "error",
-    "jsx-a11y/aria-props": "error",
-    "jsx-a11y/aria-proptypes": "error",
-    "jsx-a11y/aria-role": "error",
-    "jsx-a11y/aria-unsupported-elements": "error",
-    "jsx-a11y/autocomplete-valid": "error",
-    "jsx-a11y/click-events-have-key-events": "error",
-    "jsx-a11y/heading-has-content": "error",
-    "jsx-a11y/html-has-lang": "error",
-    "jsx-a11y/iframe-has-title": "error",
-    "jsx-a11y/img-redundant-alt": "error",
-    "jsx-a11y/interactive-supports-focus": "error",
-    "jsx-a11y/label-has-associated-control": "error",
-    "jsx-a11y/lang": "error",
-    "jsx-a11y/media-has-caption": "error",
-    "jsx-a11y/mouse-events-have-key-events": "error",
-    "jsx-a11y/no-access-key": "error",
-    "jsx-a11y/no-aria-hidden-on-focusable": "error",
-    "jsx-a11y/no-autofocus": "error",
-    "jsx-a11y/no-distracting-elements": "error",
-    "jsx-a11y/no-interactive-element-to-noninteractive-role": "error",
-    "jsx-a11y/no-noninteractive-element-to-interactive-role": "error",
-    "jsx-a11y/no-noninteractive-tabindex": "error",
-    "jsx-a11y/no-redundant-roles": "error",
-    "jsx-a11y/no-static-element-interactions": "error",
-    "jsx-a11y/prefer-tag-over-role": "off",
-    "jsx-a11y/role-has-required-aria-props": "error",
-    "jsx-a11y/role-supports-aria-props": "error",
-    "jsx-a11y/scope": "error",
-    "jsx-a11y/tabindex-no-positive": "error",
-    "react/button-has-type": "error",
-    "eslint/no-extra-label": "warn",
-    "eslint/no-lone-blocks": "warn",
-    "eslint/no-sequences": "warn",
-    "eslint/no-unneeded-ternary": "warn",
-    "eslint/no-useless-computed-key": "warn",
-    "eslint/no-useless-constructor": "warn",
-    "eslint/no-useless-rename": "warn",
-    "eslint/prefer-numeric-literals": "warn",
-    "eslint/prefer-regex-literals": "warn",
-    "eslint/prefer-rest-params": "warn",
-    "react/jsx-no-useless-fragment": [
-      "warn",
-      {
-        "allowExpressions": true
-      }
-    ],
-    "typescript/no-useless-empty-export": "warn",
-    "unicorn/no-static-only-class": "warn",
-    "unicorn/no-useless-switch-case": "warn",
-    "unicorn/prefer-array-flat": "warn",
-    "unicorn/prefer-array-flat-map": "warn",
-    "unicorn/prefer-array-index-of": "warn",
-    "unicorn/prefer-date-now": "warn",
-    "eslint/no-constructor-return": "error",
-    "eslint/no-inner-declarations": [
-      "error",
-      "both",
-      {
-        "blockScopedFunctions": "allow"
-      }
-    ],
-    "eslint/no-use-before-define": [
-      "error",
-      {
-        "functions": false,
-        "classes": false,
-        "variables": false,
-        "enums": false,
-        "typedefs": false,
-        "ignoreTypeReferences": true,
-        "allowNamedExports": true
-      }
-    ],
-    "eslint/radix": "warn",
-    "oxc/bad-min-max-func": "error",
-    "react/void-dom-elements-no-children": "error",
-    "import/namespace": "warn",
-    "oxc/no-accumulating-spread": "warn",
-    "eslint/no-eval": "error",
-    "eslint/no-script-url": "error",
-    "react/jsx-no-script-url": "error",
-    "react/no-danger": "error",
-    "eslint/prefer-const": "warn",
-    "eslint/prefer-exponentiation-operator": "warn",
-    "eslint/prefer-template": "warn",
-    "typescript/consistent-type-imports": [
-      "warn",
-      {
-        "disallowTypeAnnotations": false
-      }
-    ],
-    "typescript/no-non-null-assertion": "warn",
-    "typescript/prefer-function-type": "warn",
-    "typescript/prefer-literal-enum-member": "warn",
-    "unicorn/prefer-node-protocol": "warn",
-    "eslint/array-callback-return": [
-      "error",
-      {
-        "checkForEach": true,
-        "allowVoid": true
-      }
-    ],
-    "eslint/default-case-last": "warn",
-    "eslint/eqeqeq": [
-      "error",
-      "always",
-      {
-        "null": "ignore"
-      }
-    ],
-    "eslint/no-label-var": "error",
-    "eslint/no-labels": [
-      "warn",
-      {
-        "allowLoop": true
-      }
-    ],
-    "eslint/no-proto": "warn",
-    "eslint/no-self-compare": "error",
-    "eslint/no-template-curly-in-string": "warn",
-    "oxc/approx-constant": "warn",
-    "oxc/misrefactored-assign-op": "error",
-    "oxc/no-const-enum": "warn",
-    "react/no-array-index-key": "error",
-    "typescript/adjacent-overload-signatures": "warn",
-    "typescript/no-invalid-void-type": "warn",
-    "unicorn/no-document-cookie": "warn",
-    "unicorn/no-instanceof-array": "warn",
-    "unicorn/no-thenable": "error",
-    "unicorn/prefer-number-properties": "off",
-    "eslint/no-console": [
-      "warn",
-      {
-        "allow": [
-          "info",
-          "warn",
-          "error",
-          "group",
-          "groupEnd",
-          "table",
-          "assert",
-          "countReset",
-          "count",
-          "dir",
-          "time",
-          "timeEnd",
-          "timeStamp"
-        ]
-      }
-    ],
-    "eslint/no-else-return": [
-      "error",
-      {
-        "allowElseIf": false
-      }
-    ],
-    "eslint/no-shadow": [
-      "error",
-      {
-        "ignoreTypeValueShadow": true,
-        "ignoreFunctionTypeParameterNameValueShadow": true
-      }
-    ],
-    "eslint/object-shorthand": ["error", "always"],
-    "typescript/array-type": "off",
-    "vitest/require-mock-type-parameters": "off",
-    "vitest/require-to-throw-message": "off",
-    "typescript/no-explicit-any": "off",
-    "unicorn/no-array-for-each": "off",
-    "import/no-cycle": "off",
-    "react/refs": "off",
-    "eslint/constructor-super": "off",
-    "eslint/for-direction": "off",
-    "eslint/getter-return": "off",
-    "eslint/no-async-promise-executor": "off",
-    "eslint/no-class-assign": "off",
-    "eslint/no-compare-neg-zero": "off",
-    "eslint/no-cond-assign": "off",
-    "eslint/no-const-assign": "off",
-    "eslint/no-constant-binary-expression": "off",
-    "eslint/no-constant-condition": "off",
-    "eslint/no-control-regex": "off",
-    "eslint/no-debugger": "off",
-    "eslint/no-delete-var": "off",
-    "eslint/no-dupe-class-members": "off",
-    "eslint/no-dupe-else-if": "off",
-    "eslint/no-dupe-keys": "off",
-    "eslint/no-duplicate-case": "off",
-    "eslint/no-empty-character-class": "off",
-    "eslint/no-empty-pattern": "off",
-    "eslint/no-empty-static-block": "off",
-    "eslint/no-ex-assign": "off",
-    "eslint/no-extra-boolean-cast": "off",
-    "eslint/no-func-assign": "off",
-    "eslint/no-global-assign": "off",
-    "eslint/no-import-assign": "off",
-    "eslint/no-invalid-regexp": "off",
-    "eslint/no-irregular-whitespace": "off",
-    "eslint/no-loss-of-precision": "off",
-    "eslint/no-misleading-character-class": "off",
-    "eslint/no-new-native-nonconstructor": "off",
-    "eslint/no-nonoctal-decimal-escape": "off",
-    "eslint/no-obj-calls": "off",
-    "eslint/no-self-assign": "off",
-    "eslint/no-setter-return": "off",
-    "eslint/no-shadow-restricted-names": "off",
-    "eslint/no-sparse-arrays": "off",
-    "eslint/no-this-before-super": "off",
-    "eslint/no-unassigned-vars": "off",
-    "eslint/no-unreachable": "off",
-    "eslint/no-unsafe-finally": "off",
-    "eslint/no-unsafe-negation": "off",
-    "eslint/no-unsafe-optional-chaining": "off",
-    "eslint/no-unused-expressions": "off",
-    "eslint/no-unused-labels": "off",
-    "eslint/no-unused-private-class-members": "off",
-    "eslint/no-unused-vars": "off",
-    "eslint/no-useless-backreference": "off",
-    "eslint/no-useless-catch": "off",
-    "eslint/no-useless-escape": "off",
-    "eslint/no-with": "off",
-    "eslint/require-yield": "off",
-    "eslint/use-isnan": "off",
-    "eslint/valid-typeof": "off",
-    "import/default": "off",
-    "react/error-boundaries": "off",
-    "react/exhaustive-deps": "off",
-    "react/globals": "off",
-    "react/immutability": "off",
-    "react/incompatible-library": "off",
-    "react/jsx-key": "off",
-    "react/jsx-no-duplicate-props": "off",
-    "react/jsx-no-undef": "off",
-    "react/no-children-prop": "off",
-    "react/no-danger-with-children": "off",
-    "react/no-direct-mutation-state": "off",
-    "react/no-find-dom-node": "off",
-    "react/no-is-mounted": "off",
-    "react/no-render-return-value": "off",
-    "react/no-string-refs": "off",
-    "react/preserve-manual-memoization": "off",
-    "react/purity": "off",
-    "react/set-state-in-effect": "off",
-    "react/set-state-in-render": "off",
-    "react/static-components": "off",
-    "react/use-memo": "off",
-    "react/void-use-memo": "off",
-    "typescript/no-duplicate-enum-values": "off",
-    "typescript/no-extra-non-null-assertion": "off",
-    "typescript/no-misused-new": "off",
-    "typescript/no-non-null-asserted-optional-chain": "off",
-    "typescript/no-this-alias": "off",
-    "typescript/no-unsafe-declaration-merging": "off",
-    "typescript/no-wrapper-object-types": "off",
-    "typescript/prefer-as-const": "off",
-    "typescript/prefer-namespace-keyword": "off",
-    "typescript/triple-slash-reference": "off",
-    "vitest/no-duplicate-hooks": "error",
-    "vitest/expect-expect": "off",
-    "vitest/no-conditional-expect": "off",
-    "vitest/no-disabled-tests": "off",
-    "vitest/no-focused-tests": "off",
-    "vitest/no-standalone-expect": "off",
-    "vitest/require-local-test-context-for-concurrent-snapshots": "off",
-    "vitest/valid-describe-callback": "off",
-    "vitest/valid-expect": "off",
-    "vitest/valid-expect-in-promise": "off",
-    "vitest/valid-title": "off"
-  },
-  "overrides": [
-    {
-      "files": ["**/*.stories.ts", "**/*.stories.tsx", "scripts/*.ts"],
-      "rules": {
-        "eslint/no-console": "off"
-      }
-    }
-  ]
-}
@@ -2,7 +2,7 @@
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "stylelint.vscode-stylelint",
-    "oxc.oxc-vscode",
+    "biomejs.biome",
    "esbenp.prettier-vscode",
    "denoland.vscode-deno",
    "github.vscode-github-actions",
@@ -1,7 +1,5 @@
 # @navikt/aksel-icons

-## 8.20.1
-
 ## 8.20.0

 ## 8.19.2
@@ -13,7 +13,8 @@ files.forEach((file) => {

  data = data.map((x) => {
    return x.includes("React.ForwardRefExoticComponent")
-      ? `${x.split(":")[0]}: React.ForwardRefExoticComponent<React.SVGProps<SVGSVGElement> & SVGRProps & React.RefAttributes<SVGSVGElement>>;`
+      ? x.split(":")[0] +
+          `: React.ForwardRefExoticComponent<React.SVGProps<SVGSVGElement> & SVGRProps & React.RefAttributes<SVGSVGElement>>;`
      : x;
  });

@@ -15,6 +15,7 @@ ymlList.forEach((file) => {
  const ymlData = load(fs.readFileSync(`${basePath}/${file}`), {
    schema: JSON_SCHEMA,
  });
+  // biome-ignore lint/complexity/useOptionalChain: optional chain not supported in enviroment. Consider revriting to Typescript
  if (ymlData.keywords && ymlData.keywords.includes("[ignore-docs]")) {
    return;
  }
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-icons",
-  "version": "8.20.1",
+  "version": "8.20.0",
  "author": "Aksel | Nav",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -85,7 +85,7 @@
    "js-yaml": "^5.5.0",
    "lodash": "4.18.1",
    "prettier": "3.9.6",
-    "react": "19.3.1",
+    "react": "19.3.0",
    "rehype-parse": "9.0.1",
    "tsc-alias": "1.9.7",
    "tsx": "^4.23.15",
@@ -1,3 +1,4 @@
+/* biome-ignore-all lint/correctness/useHookAtTopLevel: `useId` is invariant at runtime. */
 import React, { useEffect, useState } from "react";

 // https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/useId.ts
@@ -1,7 +1,5 @@
 # @navikt/aksel-stylelint

-## 8.20.1
-
 ## 8.20.0

 ## 8.19.2
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-stylelint",
-  "version": "8.20.1",
+  "version": "8.20.0",
  "type": "module",
  "engines": {
    "node": ">=18.12.0"
@@ -43,8 +43,8 @@
    "dev": "yarn watch:lint"
  },
  "devDependencies": {
-    "@navikt/ds-css": "^8.20.1",
-    "@navikt/ds-tokens": "^8.20.1",
+    "@navikt/ds-css": "^8.20.0",
+    "@navikt/ds-tokens": "^8.20.0",
    "concurrently": "10.0.6",
    "postcss-selector-parser": "^7.1.7",
    "postcss-value-parser": "^4.2.0",
@@ -1,7 +1,5 @@
 # @navikt/aksel

-## 8.20.1
-
 ## 8.20.0

 ## 8.19.2
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel",
-  "version": "8.20.1",
+  "version": "8.20.0",
  "description": "Aksel command line interface. Codemods and other utilities for Aksel users.",
  "author": "Aksel | Nav designsystem team",
  "license": "MIT",
@@ -40,7 +40,7 @@
    "url": "https://github.com/navikt/aksel/issues"
  },
  "dependencies": {
-    "chalk": "6.0.1",
+    "chalk": "5.6.2",
    "cli-progress": "3.12.0",
    "clipboardy": "5.3.2",
    "commander": "15.0.0",
@@ -37,7 +37,7 @@ describe("getJSXLiteralValue", () => {
  });

  test("returns null for TemplateLiteral with expressions", () => {
-    // oxlint-disable-next-line eslint/no-template-curly-in-string -- Testing only
+    // biome-ignore lint/suspicious/noTemplateCurlyInString: Testing only
    const node = getAttrValue("<Component prop={`hello ${name}`} />");
    expect(getJSXLiteralValue(node)).toBe(null);
  });
@@ -209,7 +209,7 @@ describe("getTokenRegex JS", () => {

    expect("ATextRed").toMatch(regex);
    expect(" ATextRed ").toMatch(regex);
-    // oxlint-disable-next-line eslint/no-template-curly-in-string -- Testing token match inside template string
+    // biome-ignore lint/suspicious/noTemplateCurlyInString: Testing token match inside template string
    expect(" background: `${ATextRed}` ").toMatch(regex);
  });

@@ -26,7 +26,7 @@ describe("v8-tokens-js keeps boundaries intact", () => {
    ["const a = ASurfaceDefault;", "const a = BgDefault;"],
    ["const a = [ASurfaceDefault];", "const a = [BgDefault];"],
    ["const a = {...ASurfaceDefault};", "const a = {...BgDefault};"],
-    // oxlint-disable-next-line eslint/no-template-curly-in-string -- Testing token inside template literal
+    // biome-ignore lint/suspicious/noTemplateCurlyInString: Testing token inside template literal
    ["const a = `${ASurfaceDefault}`;", "const a = `${BgDefault}`;"],
  ])("%s", (input, output) => {
    expect(runJs(`${importLine}\n${input}`)).toBe(
@@ -1,11 +1,5 @@
 # @navikt/ds-css

-## 8.20.1
-
-### Patch Changes
-
- Badge: Increase inline padding by 1px for better optical balance ([#5443](https://github.com/navikt/aksel/pull/5443))
-
 ## 8.20.0

 ### Minor Changes
@@ -139,14 +139,14 @@ async function bundle() {

  /* ------------------------------ /global build ----------------------------- */
  for (const style of BASELINE_CSS_LIST) {
-    const parser = (input: string) => {
+    function parser(input: string) {
      const parsed = input
        .split("\n")
        .filter((line) => line.startsWith("@import"))
        .filter((line) => line.includes(style))
        .join("\n");
      return `${layerDefinition}\n${parsed}`;
-    };
+    }

    await bundleCSS(parser).then((file) => {
      writeFile({
@@ -208,13 +208,13 @@ async function bundle() {
  }

  for (const componentLine of componentFiles()) {
-    const parser = (input: string) => {
+    function parser(input: string) {
      const parsed = input
        .split("\n")
        .filter((line) => line === componentLine)
        .join("\n");
      return `${layerDefinition}\n${parsed}`;
-    };
+    }

    await bundleCSS(parser).then((file) => {
      const componentName = componentLine
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "8.20.1",
+  "version": "8.20.0",
  "description": "CSS for Nav Designsystem",
  "author": "Aksel | Nav designsystem team",
  "keywords": [
@@ -32,7 +32,7 @@
    "css:get-version": "node config/get-version.js"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^8.20.1",
+    "@navikt/ds-tokens": "^8.20.0",
    "browserslist": "^4.28.7",
    "esbuild": "^0.28.2",
    "fast-glob": "3.3.3",
@@ -16,9 +16,7 @@
  justify-content: center;
  min-width: var(--__axc-badge-size);
  height: var(--__axc-badge-size);
-
-  /* 1px optical adjustment inline */
-  padding: var(--ax-space-4) calc(var(--ax-space-4) + var(--ax-space-1));
+  padding: var(--ax-space-4);
  border-radius: var(--ax-radius-16);
  background: var(--ax-bg-strong);
  color: var(--ax-text-contrast);
@@ -9,15 +9,27 @@
  overflow: hidden;
 }

-.aksel-data-table__border-wrapper {
-  /* display:flex and max-height:100% is needed for a "no page scroll" layout */
+.aksel-data-table__frame {
  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  width: 100%;
  max-height: 100%;
+  min-height: 0;
+}
+
+.aksel-data-table__border-wrapper {
+  display: flex;
+  flex: 1 1 auto;
+  max-height: 100%;
+  min-height: 0;
 }

 .aksel-data-table__scroll-wrapper {
  overflow: auto;
+  flex: 1 1 auto;
  width: 100%;
+  min-height: 0;
  position: relative;
  scroll-timeline: --horizontal-table-scroll inline;
 }
@@ -137,6 +149,26 @@
    border-radius: var(--ax-radius-12);
    z-index: 3;
  }
+
+  :is([data-attachments="top"], [data-attachments="both"]) & {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+
+    &::after {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+  }
+
+  :is([data-attachments="bottom"], [data-attachments="both"]) & {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+
+    &::after {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
 }

 .aksel-data-table {
@@ -710,3 +742,23 @@ html[data-dragging-cursor="true"] *::after {
 }

 /* ------------------------ DataGrid.Preferences End ------------------------ */
+
+.aksel-data-table__attachment {
+  z-index: 10;
+  flex: 0 0 auto;
+  padding: var(--ax-space-12) var(--ax-space-16);
+  border: 1px solid var(--ax-border-neutral-subtle);
+  background-color: var(--ax-bg-raised);
+
+  &[data-attachment="top"] {
+    border-bottom: none;
+    border-top-left-radius: var(--ax-radius-12);
+    border-top-right-radius: var(--ax-radius-12);
+  }
+
+  &[data-attachment="bottom"] {
+    border-top: none;
+    border-bottom-left-radius: var(--ax-radius-12);
+    border-bottom-right-radius: var(--ax-radius-12);
+  }
+}
@@ -2,6 +2,7 @@
  display: flex;
  flex-direction: column;
  min-height: 100vh;
+  /* biome-ignore lint/suspicious/noDuplicateProperties: vh is fallback for browsers that do not support lvh */
  min-height: 100lvh;
 }

@@ -19,6 +20,7 @@

 .aksel-page__content--fullheight {
  min-height: 100vh;
+  /* biome-ignore lint/suspicious/noDuplicateProperties: vh is fallback for browsers that do not support lvh */
  min-height: 100lvh;
 }

@@ -1,13 +1,5 @@
 # @navikt/ds-react

-## 8.20.1
-
-### Patch Changes
-
- Updated dependencies []:
-  - @navikt/ds-tokens@8.20.1
-  - @navikt/aksel-icons@8.20.1
-
 ## 8.20.0

 ### Minor Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "8.20.1",
+  "version": "8.20.0",
  "description": "React components from the Norwegian Labour and Welfare Administration.",
  "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
  "license": "MIT",
@@ -788,16 +788,16 @@
  "dependencies": {
    "@floating-ui/react": "0.27.20",
    "@floating-ui/react-dom": "^2.1.9",
-    "@navikt/aksel-icons": "^8.20.1",
-    "@navikt/ds-tokens": "^8.20.1",
+    "@navikt/aksel-icons": "^8.20.0",
+    "@navikt/ds-tokens": "^8.20.0",
    "date-fns": "^4.0.0",
    "react-day-picker": "10.0.1"
  },
  "devDependencies": {
-    "@testing-library/dom": "10.4.2",
-    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/dom": "10.4.1",
+    "@testing-library/jest-dom": "^6.6.3",
    "@testing-library/react": "^16.3.3",
-    "@testing-library/user-event": "^14.6.8",
+    "@testing-library/user-event": "^14.6.7",
    "@types/jscodeshift": "17.3.0",
    "@types/node": "^24.10.9",
    "@types/react": "19.2.14",
@@ -807,8 +807,8 @@
    "cross-env": "^10.1.0",
    "jscodeshift": "17.4.0",
    "jsdom": "29.1.1",
-    "react": "19.3.1",
-    "react-dom": "19.3.1",
+    "react": "19.3.0",
+    "react-dom": "19.3.0",
    "rimraf": "6.1.3",
    "swr": "^2.4.2",
    "tsc-alias": "1.9.7",
@@ -16,8 +16,10 @@ const ActionMenuShortcut = ({ children }: ShortcutProps) => {
    <ActionMenuMarker placement="right">
      {parsed.map((char, index) => (
        <span
-          // oxlint-disable-next-line react/no-array-index-key -- This is a static list of characters, so using the index as a key is acceptable in this case
-          key={`${children}-${index}-${char}`}
+          key={`${children}-${
+            // biome-ignore lint/suspicious/noArrayIndexKey: This is a static list of characters, so using the index as a key is acceptable in this case
+            index
+          }-${char}`}
          className="aksel-action-menu__shortcut"
        >
          {char}
@@ -43,7 +43,6 @@ const ChipsRemovable = forwardRef<HTMLButtonElement, ChipsRemovableProps>(
        data-color={color ?? variantToColor(variant)}
        {...rest}
        ref={ref}
-        // oxlint-disable-next-line react/button-has-type -- React's button type union is validated by TypeScript and defaults to "button".
        type={type}
        className={cl(
          "aksel-chips__chip aksel-chips__removable aksel-chips--icon-right",
@@ -149,7 +149,7 @@ export namespace DataGrid {

  // eslint-disable-next-line @typescript-eslint/no-namespace
  export namespace Table {
-    // oxlint-disable-next-line eslint/no-shadow -- intentional namespace re-export
+    // biome-ignore lint/suspicious/noShadow: intentional namespace re-export
    export type Props<T = unknown> = DataGridTable.Props<T>;
    export type Sorting = DataGridTable.Sorting;
    export type SortEntry = DataGridTable.SortEntry;
@@ -161,7 +161,7 @@ export namespace DataGrid {

  // eslint-disable-next-line @typescript-eslint/no-namespace
  export namespace Preferences {
-    // oxlint-disable-next-line eslint/no-shadow -- intentional namespace re-export
+    // biome-ignore lint/suspicious/noShadow: intentional namespace re-export
    export type Props = DataGridPreferences.Props;
  }
 }
@@ -1,3 +1,4 @@
+/** biome-ignore-all lint/correctness/useHookAtTopLevel: False positive because of the way forwardRef() is added */
 import React, {
  forwardRef,
  useCallback,
@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import React, { useCallback } from "react";
+import { Button } from "../../button";
+import { DataGrid } from "../../data-grid";
+import { HStack, VStack } from "../../primitives/stack";
+import { TEST_DATA, columnDef_TEST_DATA } from "./Data.test-data";
+
+const meta: Meta<typeof DataGrid> = {
+  title: "ds-react/Data/Attachments",
+  component: DataGrid,
+  parameters: {
+    chromatic: { disable: true },
+    layout: "fullscreen",
+    a11y: { disable: true },
+    docs: { disable: true },
+  },
+};
+
+export default meta;
+
+const getColDefs = (overflow: string) =>
+  overflow === "none" || overflow === "y"
+    ? columnDef_TEST_DATA.slice(0, 5)
+    : columnDef_TEST_DATA;
+
+const getData = (overflow: string) =>
+  overflow === "none" || overflow === "x" ? TEST_DATA.slice(0, 5) : TEST_DATA;
+
+type Story = StoryObj<{ overflow: "none" | "x" | "y" | "both" }>;
+
+export const Attachments: Story = {
+  render: ({ overflow }) => {
+    const Content = useCallback(
+      () => (
+        <HStack gap="space-8">
+          <Button size="xsmall" variant="secondary" data-color="neutral">
+            Button
+          </Button>
+          <Button size="xsmall" variant="secondary" data-color="neutral">
+            Button
+          </Button>
+        </HStack>
+      ),
+      [],
+    );
+
+    return (
+      <VStack padding="space-16" gap="space-16" height="100vh">
+        <div style={{ overflow: "hidden", display: "flex" }}>
+          <DataGrid columns={getColDefs(overflow)} data={getData(overflow)}>
+            <DataGrid.Table
+              topContent={<Content />}
+              bottomContent={<Content />}
+            />
+          </DataGrid>
+        </div>
+      </VStack>
+    );
+  },
+  argTypes: {
+    overflow: {
+      control: { type: "radio" },
+      options: ["none", "x", "y", "both"],
+    },
+  },
+};
@@ -57,6 +57,11 @@ const fallbackIdData: TestRow[] = [
  },
 ];

+const scrollableData: TestRow[] = Array.from({ length: 20 }, (_, index) => ({
+  id: `row-${index + 1}`,
+  name: `Row ${index + 1}`,
+}));
+
 const columns: ColumnDefinitions<TestRow> = [
  {
    id: "name",
@@ -228,3 +233,45 @@ export const SelectAllIncludesHiddenDescendantsForCollapsedParents: Story = {
    expect(getCheckboxes(canvasElement)[3].checked).toBe(false);
  },
 };
+
+export const AttachedContentStaysVisibleWhileTableScrolls: Story = {
+  render: () => (
+    <div style={{ height: 240, display: "flex" }}>
+      <DataGrid
+        columns={columns}
+        data={scrollableData}
+        getRowId={(row) => row.id}
+      >
+        <DataGrid.Table
+          topContent={<button type="button">Top action</button>}
+          bottomContent={<button type="button">Bottom action</button>}
+        />
+      </DataGrid>
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const topAction = canvas.getByRole("button", { name: "Top action" });
+    const bottomAction = canvas.getByRole("button", { name: "Bottom action" });
+    const scrollWrapper = canvasElement.querySelector(
+      ".aksel-data-table__scroll-wrapper",
+    );
+
+    if (!(scrollWrapper instanceof HTMLElement)) {
+      throw new Error("Expected table scroll wrapper");
+    }
+
+    expect(scrollWrapper.scrollHeight).toBeGreaterThan(
+      scrollWrapper.clientHeight,
+    );
+
+    const topPosition = topAction.getBoundingClientRect().top;
+    const bottomPosition = bottomAction.getBoundingClientRect().top;
+
+    scrollWrapper.scrollTop = scrollWrapper.scrollHeight;
+
+    expect(scrollWrapper.scrollTop).toBeGreaterThan(0);
+    expect(topAction.getBoundingClientRect().top).toBe(topPosition);
+    expect(bottomAction.getBoundingClientRect().top).toBe(bottomPosition);
+  },
+};
@@ -139,6 +139,7 @@ function useTableColumnResize({
    [resizeMin, resizeMax, setWidth],
  );

+  // biome-ignore lint/correctness/useExhaustiveDependencies: We only want to run this on mount and when autoResizeOnce changes
  useEffect(
    function autoResizeColumn() {
      if (!autoResizeOnce) {
@@ -138,6 +138,14 @@ interface DataGridTableProps<T> extends React.HTMLAttributes<HTMLTableElement> {
   * @default "row"
   */
  selectionTrigger?: "row" | "control";
+  /**
+   * Content to render above the table, outside its scrollable area.
+   */
+  topContent?: React.ReactNode;
+  /**
+   * Content to render below the table, outside its scrollable area.
+   */
+  bottomContent?: React.ReactNode;
 }

 const DataGridTableInternal = forwardRef<
@@ -161,6 +169,8 @@ const DataGridTableInternal = forwardRef<
      subRows,
      sorting,
      selectionTrigger = "row",
+      topContent,
+      bottomContent,
      ...rest
    }: DataGridTableProps<unknown>,
    forwardedRef,
@@ -203,80 +213,115 @@ const DataGridTableInternal = forwardRef<

    /* TODO: Need to figure out how to handle this since settings is provided from root, not table itself */
    const truncateContent = tableSettings?.truncateContent ?? layout !== "auto";
+    const hasTopContent = topContent != null;
+    const hasBottomContent = bottomContent != null;
+    let attachmentPosition: "top" | "bottom" | "both" | undefined;
+
+    if (hasTopContent && hasBottomContent) {
+      attachmentPosition = "both";
+    } else if (hasTopContent) {
+      attachmentPosition = "top";
+    } else if (hasBottomContent) {
+      attachmentPosition = "bottom";
+    }

    return (
-      <DataTableContextProvider
-        layout={layout}
-        withKeyboardNav={true}
-        selectionState={tableSelectionState}
-        stickyStart={stickyStart}
-        stickyHeader={stickyHeader}
-        tableId={tableId}
-        loading={loadingContent}
-        onRowAction={onRowAction}
-        columns={columns}
-        totalColSpan={totalColSpan}
-        tableItems={tableItems}
-        sortingState={sortingState}
+      <div
+        className="aksel-data-table__frame"
+        data-attachments={attachmentPosition}
      >
-        <TableElementWrapper
-          enabled={true}
-          hasStickyColumns={
-            !!(
-              tableSettings?.stickyColumns?.start ||
-              tableSettings?.stickyColumns?.end
-            )
-          }
-        >
-          <table
-            {...rest}
-            ref={forwardedRef}
-            className={cl("aksel-data-table", className)}
-            data-zebra-stripes={tableSettings?.zebraStripes}
-            data-column-dividers={tableSettings?.columnDividers}
-            data-truncate-content={truncateContent}
-            data-density={tableSettings?.rowDensity}
-            data-text-size={tableSettings?.textSize}
-            data-layout={layout}
-            data-loading={isLoading || undefined}
-            aria-busy={isLoading || undefined}
-          >
-            <DataTableDetailsPanelProvider detailsPanel={detailsPanel}>
-              <DataTableThead data-sticky={stickyHeader || undefined}>
-                <DataTableTr>
-                  {columns.map(
-                    ({ isSticky, isStickyLast, stickyLeftOffset, colDef }) => {
-                      return (
-                        <DataTableColumnHeader
-                          id={colDef.id}
-                          width={colDef.width}
-                          align={colDef.align ?? "left"}
-                          key={colDef.id}
-                          isSticky={isSticky}
-                          sortable={colDef.isSortable}
-                          label={colDef.header}
-                          style={
-                            stickyLeftOffset
-                              ? { left: stickyLeftOffset }
-                              : undefined
-                          }
-                          data-sticky-last={isStickyLast || undefined}
-                        >
-                          {colDef.headerCell ?? colDef.header}
-                        </DataTableColumnHeader>
-                      );
-                    },
-                  )}
-                </DataTableTr>
-              </DataTableThead>
+        {hasTopContent && (
+          <div className="aksel-data-table__attachment" data-attachment="top">
+            {topContent}
+          </div>
+        )}

-              <DataTableTbody>
-                <DataTableTBodyContent emptyContent={emptyContent} />
-              </DataTableTbody>
-            </DataTableDetailsPanelProvider>
-          </table>
-        </TableElementWrapper>
-      </DataTableContextProvider>
+        <DataTableContextProvider
+          layout={layout}
+          withKeyboardNav={true}
+          selectionState={tableSelectionState}
+          stickyStart={stickyStart}
+          stickyHeader={stickyHeader}
+          tableId={tableId}
+          loading={loadingContent}
+          onRowAction={onRowAction}
+          columns={columns}
+          totalColSpan={totalColSpan}
+          tableItems={tableItems}
+          sortingState={sortingState}
+        >
+          <TableElementWrapper
+            enabled={true}
+            hasStickyColumns={
+              !!(
+                tableSettings?.stickyColumns?.start ||
+                tableSettings?.stickyColumns?.end
+              )
+            }
+          >
+            <table
+              {...rest}
+              ref={forwardedRef}
+              className={cl("aksel-data-table", className)}
+              data-zebra-stripes={tableSettings?.zebraStripes}
+              data-column-dividers={tableSettings?.columnDividers}
+              data-truncate-content={truncateContent}
+              data-density={tableSettings?.rowDensity}
+              data-text-size={tableSettings?.textSize}
+              data-layout={layout}
+              data-loading={isLoading || undefined}
+              aria-busy={isLoading || undefined}
+            >
+              <DataTableDetailsPanelProvider detailsPanel={detailsPanel}>
+                <DataTableThead data-sticky={stickyHeader || undefined}>
+                  <DataTableTr>
+                    {columns.map(
+                      ({
+                        isSticky,
+                        isStickyLast,
+                        stickyLeftOffset,
+                        colDef,
+                      }) => {
+                        return (
+                          <DataTableColumnHeader
+                            id={colDef.id}
+                            width={colDef.width}
+                            align={colDef.align ?? "left"}
+                            key={colDef.id}
+                            isSticky={isSticky}
+                            sortable={colDef.isSortable}
+                            label={colDef.header}
+                            style={
+                              stickyLeftOffset
+                                ? { left: stickyLeftOffset }
+                                : undefined
+                            }
+                            data-sticky-last={isStickyLast || undefined}
+                          >
+                            {colDef.headerCell ?? colDef.header}
+                          </DataTableColumnHeader>
+                        );
+                      },
+                    )}
+                  </DataTableTr>
+                </DataTableThead>
+
+                <DataTableTbody>
+                  <DataTableTBodyContent emptyContent={emptyContent} />
+                </DataTableTbody>
+              </DataTableDetailsPanelProvider>
+            </table>
+          </TableElementWrapper>
+        </DataTableContextProvider>
+        {hasBottomContent && (
+          <div
+            className="aksel-data-table__attachment"
+            data-attachment="bottom"
+          >
+            {bottomContent}
+          </div>
+        )}
+      </div>
    );
  },
 );
@@ -220,6 +220,7 @@ export const TokenFilter = forwardRef<HTMLDivElement, TokenFilterProps>(
    );

    return (
+      // biome-ignore lint/a11y/useSemanticElements: search-tag is too new (baseline 2023)
      <div
        ref={ref}
        className={cl("aksel-property-filter", className)}
@@ -61,7 +61,7 @@ function createGroups<T>(
  }

  /* Custom groups first, then default group if it has items */
-  const groups: OptionGroup<T>[] = Object.values(customGroups);
+  const groups: OptionGroup<T>[] = [...Object.values(customGroups)];

  if (defaultGroup.options.length > 0) {
    groups.push(defaultGroup);
@@ -49,15 +49,16 @@ export const Default: StoryObj<DefaultStoryProps> = {
      toDate: new Date("Aug 23 2029"),
    });

-    const newProps =
-      !props.inputfield || props.mode === "multiple"
+    const newProps = {
+      ...(!props.inputfield || props.mode === "multiple"
        ? {
            open,
            onClose: () => setOpen(false),
            fromDate: new Date("Aug 23 2020"),
            toDate: new Date("Aug 23 2029"),
          }
-        : {};
+        : {}),
+    };

    const Comp = !props.standalone ? DatePicker : DatePicker.Standalone;

@@ -28,7 +28,6 @@ const DatePickerDayButton = ({

  return (
    <button
-      type="button"
      {...rest}
      ref={ref}
      aria-hidden={day.outside}
@@ -104,7 +104,6 @@ const ReactDayPicker = ({
      selected={selected}
      classNames={LegacyClassNames}
      components={{
-        // oxlint-disable-next-line react/jsx-no-useless-fragment -- react-day-picker requires an Element return type, so null is not allowed.
        MonthCaption: () => <></>,
        DayButton: useCallback(
          (props) => <DatePickerDayButton {...props} locale={locale} />,
@@ -23,7 +23,7 @@ const DatePickerWeekRow = ({

  return (
    <Show below="sm" asChild>
-      {/* oxlint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role -- role="grid" improves a11y reading */}
+      {/** biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: role="grid" improves a11y reading */}
      <table className="rdp-table" role="grid">
        <tbody className="rdp-tbody">
          <tr className="rdp-row aksel-date__week-row">
@@ -26,7 +26,8 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
      props;

    return (
-      // oxlint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- clickable div for checkbox card
+      // biome-ignore lint/a11y/noStaticElementInteractions: clickable div for checkbox card
+      // biome-ignore lint/a11y/useKeyWithClickEvents: clickable div for checkbox card
      <div
        className={cl(className, "aksel-checkbox", `aksel-checkbox--${size}`, {
          "aksel-checkbox--error": hasError,
@@ -19,7 +19,7 @@ export interface CheckboxProps
   */
  children: React.ReactNode;
  /**
-   * Hides the label and description visually while keeping them available to screen readers.
+   * Visually hides label and description, and makes it viewable for screen-readers only.
   */
  hideLabel?: boolean;
  /**
@@ -42,6 +42,7 @@ const ComboboxWrapper = ({
  }

  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: Wrapper for combobox input and chips.
    <div
      ref={wrapperRef}
      className={cl(
@@ -52,7 +52,7 @@ const AddNewOption = () => {
            activeDescendantId === filteredOptionsUtil.getAddNewOptionId(id),
        },
      )}
-      // oxlint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role -- List item acts as an option in the combobox.
+      // biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: List item acts as an option in the combobox.
      role="option"
      aria-selected={false}
    >
@@ -113,7 +113,7 @@ const FilteredOptions = () => {
        {shouldRenderFilteredOptionsList && (
          <ul
            ref={setFilteredOptionsRef}
-            // oxlint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role -- The <ul> element acts as a listbox in the combobox.
+            // biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: The <ul> element acts as a listbox in the combobox.
            role="listbox"
            className="aksel-combobox__list-options"
          >
@@ -76,7 +76,7 @@ const FilteredOptionsItem = ({ option }: { option: ComboboxOption }) => {
          toggleIsListOpen(false);
        }
      }}
-      // oxlint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role -- List item acts as an option in the combobox.
+      // biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: List item acts as an option in the combobox.
      role="option"
      aria-selected={isInList(option.value, selectedOptions)}
      aria-disabled={isDisabled(option) || undefined}
@@ -54,7 +54,8 @@ export const InputController = forwardRef<

  return (
    <Floating.Anchor asChild ref={setAnchorRef}>
-      {/* oxlint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- Acts as wrapper list-toggle and input; key-events are handled by input itself */}
+      {/** biome-ignore lint/a11y/noStaticElementInteractions: Acts as wrapper list-toggle and input */}
+      {/** biome-ignore lint/a11y/useKeyWithClickEvents: key-events are handled by input itself */}
      <div
        className={cl("aksel-combobox__wrapper-inner aksel-text-field__input", {
          "aksel-combobox__wrapper-inner--virtually-unfocused":
@@ -112,6 +112,7 @@ const SelectedOptionsProvider = ({
  const newHideCaret =
    isLimitReached || (!isMultiSelect && selectedOptions.length > 0);

+  // biome-ignore lint/correctness/useExhaustiveDependencies: We explicitly want to run this effect when selectedOptions changes to match the view with the selected options.
  useEffect(() => {
    setHideCaret(newHideCaret);
  }, [newHideCaret, selectedOptions, setHideCaret]);
@@ -60,7 +60,8 @@ export interface ComboboxProps
   */
  filteredOptions?: string[] | ComboboxOption[];
  /**
-   * Hides the label and description visually while keeping them available to screen readers.
+   * Optionally hide the label visually.
+   * Not recommended, but can be considered for e.g. search fields in the top menu.
   */
  hideLabel?: boolean;
  /**
@@ -65,6 +65,7 @@ const highlightSubstring = (text: string, substring: string) => {
  const end = text.substring(indexOfHighlightedText + substring.length);
  return (
    // Aria-label is used to fix testing-library wrongly evaluating the accessible name of the option when highlighting text
+    // biome-ignore lint/a11y/useAriaPropsSupportedByRole: Doesn't matter if aria-label doesn't work
    <span aria-label={text}>
      {start}
      {highlight && <mark>{highlight}</mark>}
@@ -28,7 +28,6 @@ const ComboboxTrigger = ({
  return (
    <Floating.Anchor asChild ref={rootContext.triggerRef}>
      <Slot
-        // oxlint-disable-next-line jsx-a11y/role-has-required-aria-props -- aria-controls can be supplied through rest or the slotted trigger.
        role="combobox"
        aria-expanded={readOnly ? undefined : rootContext.open}
        onClick={() => !readOnly && rootContext.setOpen(!rootContext.open)}
@@ -85,6 +85,7 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
    const mergedRef = useMergeRefs(ref, wrapperRef);

    return (
+      // biome-ignore lint/a11y/noStaticElementInteractions: Allows focus-calls on div to move focus to heading.
      <div
        ref={mergedRef}
        {...rest}
@@ -90,7 +90,8 @@ const FileUploadDropzone = forwardRef<
          {description}
        </BodyShort>
      )}
-      {/* oxlint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- Assistive technologies and keyboard users access the input/button within. */}
+      {/** biome-ignore lint/a11y/noStaticElementInteractions: Assistive technologies will use the input within.  */}
+      {/** biome-ignore lint/a11y/useKeyWithClickEvents: Keyboard will access input/button within */}
      <div
        className="aksel-dropzone__area"
        onDragEnter={dropzoneCtx.onDragEnter}
@@ -2,7 +2,7 @@ import { isAcceptedSize } from "./is-accepted-size";

 describe("isAcceptedSize", () => {
  it("should return true if maxSize is less than or equal to 0", () => {
-    const file = new File(["a".repeat(4999)], "filename.txt", {
+    const file = new File([new Array(5000).join("a")], "filename.txt", {
      type: "text/plain",
    });
    expect(isAcceptedSize(file, -1)).toBe(true);
@@ -10,7 +10,7 @@ describe("isAcceptedSize", () => {
  });

  it("should return true if file size is less than or equal to maxSize", () => {
-    const file = new File(["a".repeat(4999)], "filename.txt", {
+    const file = new File([new Array(5000).join("a")], "filename.txt", {
      type: "text/plain",
    });
    expect(isAcceptedSize(file, 5000)).toBe(true);
@@ -18,7 +18,7 @@ describe("isAcceptedSize", () => {
  });

  it("should return false if file size is greater than maxSize", () => {
-    const file = new File(["a".repeat(4999)], "filename.txt", {
+    const file = new File([new Array(5000).join("a")], "filename.txt", {
      type: "text/plain",
    });
    expect(isAcceptedSize(file, 4000)).toBe(false);
@@ -22,7 +22,8 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
    const { className, description, children } = props;

    return (
-      // oxlint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- clickable div for radio card
+      // biome-ignore lint/a11y/noStaticElementInteractions: clickable div for radio card
+      // biome-ignore lint/a11y/useKeyWithClickEvents: clickable div for radio card
      <div
        className={cl(className, "aksel-radio", `aksel-radio--${size}`, {
          "aksel-radio--error": hasError,
@@ -39,7 +39,7 @@ export interface SearchProps
   */
  label: React.ReactNode;
  /**
-   * Hides the label and description visually while keeping them available to screen readers.
+   * Shows label and description for screenreaders only.
   * @default true
   */
  hideLabel?: boolean;
@@ -158,7 +158,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
      clearButton && !inputProps.disabled && (value ?? internalValue);

    return (
-      // oxlint-disable-next-line jsx-a11y/no-static-element-interactions -- Escape key handler for clearing input
+      // biome-ignore lint/a11y/noStaticElementInteractions: Escape key handler for clearing input
      <div
        onKeyDown={(event) => {
          if (event.key !== "Escape") {
@@ -23,7 +23,7 @@ export interface SelectProps
   */
  label: React.ReactNode;
  /**
-   * Hides the label and description visually while keeping them available to screen readers.
+   * Shows label and description for screenreaders only.
   */
  hideLabel?: boolean;
 }
@@ -15,7 +15,7 @@ export interface SwitchProps
   */
  children: React.ReactNode;
  /**
-   * Hides the label and description visually while keeping them available to screen readers.
+   * If enabled shows the label and description for screenreaders only.
   */
  hideLabel?: boolean;
  /**
@@ -36,7 +36,7 @@ export interface TextareaProps
   */
  label: React.ReactNode;
  /**
-   * Hides the label and description visually while keeping them available to screen readers.
+   * If enabled shows the label and description for screenreaders only.
   */
  hideLabel?: boolean;
  /**
@@ -20,7 +20,7 @@ export interface TextFieldProps
   */
  htmlSize?: number;
  /**
-   * Hides the label and description visually while keeping them available to screen readers
+   * If enabled shows the label and description for screenreaders only
   */
  hideLabel?: boolean;
  /**
@@ -80,7 +80,7 @@ export const useFormField = (
  const showErrorMsg =
    !disabled && !readOnly && !!error && typeof error !== "boolean";

-  const ariaInvalid = hasError ? { "aria-invalid": true } : {};
+  const ariaInvalid = { ...(hasError ? { "aria-invalid": true } : {}) };

  if ((props as any)?.required) {
    consoleWarning(
@@ -52,15 +52,15 @@ export const Variants: StoryFn = () => {
    <VStack gap="space-16">
      {variants.map((variant, i) => (
        <Alert key={variant} variant={variant}>
-          {"Id elit esse enim reprehenderit enim nisi veniam nostrud. ".repeat(
-            i + 1,
+          {new Array(i + 1).fill(
+            "Id elit esse enim reprehenderit enim nisi veniam nostrud. ",
          )}
        </Alert>
      ))}
      {variants.map((variant, i) => (
        <Alert key={variant} variant={variant} size="small">
-          {"Id elit esse enim reprehenderit enim nisi veniam nostrud. ".repeat(
-            i + 1,
+          {new Array(i + 1).fill(
+            "Id elit esse enim reprehenderit enim nisi veniam nostrud. ",
          )}
        </Alert>
      ))}
@@ -102,6 +102,7 @@ export const Stepper: StepperComponent = forwardRef<
              className="aksel-stepper__item"
              data-interactive={isInteractive}
              data-color={isInteractive ? undefined : "neutral"}
+              // biome-ignore lint/suspicious/noArrayIndexKey: Unsure how to fix gracefully
              key={index + (children?.toString?.() ?? "")}
            >
              <span className="aksel-stepper__line aksel-stepper__line--1" />
@@ -89,6 +89,7 @@ export const Lookup = forwardRef<HTMLSpanElement, LookupProps>(

    return (
      <>
+        {/** biome-ignore lint/a11y/useSemanticElements: We use a span since the built-in button styling does not allow for proper line-break. Lookup-text needs to be able to "flow" across multiple lines.  */}
        <span
          {...rest}
          role="button"
@@ -149,24 +149,26 @@ export const EmptyHeader: StoryFn = () => (
 );

 export const SizeSmall: StoryFn = () => (
-  <Modal
-    open
-    onClose={() => null}
-    header={{
-      heading: "Simple header",
-      size: "small",
-    }}
-    size="small"
-  >
-    <Modal.Body>
-      <BodyLong>Lorem ipsum dolor sit amet.</BodyLong>
-    </Modal.Body>
-    <Modal.Footer>
-      <Button size="small" variant="secondary">
-        Dummy button
-      </Button>
-    </Modal.Footer>
-  </Modal>
+  <>
+    <Modal
+      open
+      onClose={() => null}
+      header={{
+        heading: "Simple header",
+        size: "small",
+      }}
+      size="small"
+    >
+      <Modal.Body>
+        <BodyLong>Lorem ipsum dolor sit amet.</BodyLong>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button size="small" variant="secondary">
+          Dummy button
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  </>
 );
 SizeSmall.storyName = "Size = Small";

@@ -170,7 +170,6 @@ const ModalRoot = forwardRef<HTMLDialogElement, ModalProps>(
        : ariaLabelledby;

    const component = (
-      // oxlint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- Native dialog handles backdrop dismissal and bubbling Escape events.
      <dialog
        {...rest}
        ref={mergedRef}
@@ -75,7 +75,6 @@ const MonthPickerButtonInternal = ({
  const isThisMonth = dateIsInCurrentMonth(month, year);

  return (
-    // oxlint-disable-next-line jsx-a11y/control-has-associated-label -- The full month name is provided by the nested screen-reader-only span.
    <button
      ref={ref}
      type="button"
@@ -172,7 +172,7 @@ const PaginationRoot = forwardRef<HTMLElement, PaginationProps>(
              return Number.isNaN(n) ? (
                <li
                  className="aksel-pagination__ellipsis"
-                  // oxlint-disable-next-line react/no-array-index-key -- Using index as key for ellipsis items
+                  // biome-ignore lint/suspicious/noArrayIndexKey: Using index as key for ellipsis items
                  key={`${step}-${i}`}
                >
                  <BodyShort
@@ -16,162 +16,176 @@ export default {

 export const Default = {
  render: () => (
-    <VStack gap="space-8">
-      <Box background="meta-purple-moderate" padding="space-20">
-        <Box background="meta-lime-soft" padding="space-20">
-          <Bleed marginInline="space-40 space-0">
-            <Box padding="space-12" background="success-moderate">
-              <BodyLong>marginInline=&quot;10 0&quot;</BodyLong>
-            </Box>
-          </Bleed>
+    <>
+      <VStack gap="space-8">
+        <Box background="meta-purple-moderate" padding="space-20">
+          <Box background="meta-lime-soft" padding="space-20">
+            <Bleed marginInline="space-40 space-0">
+              <Box padding="space-12" background="success-moderate">
+                <BodyLong>marginInline=&quot;10 0&quot;</BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
        </Box>
-      </Box>
-      <Box background="meta-purple-moderate" padding="space-20">
-        <Box background="meta-lime-soft" padding="space-20">
-          <Bleed marginInline="space-0 space-40">
-            <Box padding="space-12" background="success-moderate">
-              <BodyLong>marginInline=&quot;0 10&quot;</BodyLong>
-            </Box>
-          </Bleed>
+        <Box background="meta-purple-moderate" padding="space-20">
+          <Box background="meta-lime-soft" padding="space-20">
+            <Bleed marginInline="space-0 space-40">
+              <Box padding="space-12" background="success-moderate">
+                <BodyLong>marginInline=&quot;0 10&quot;</BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
        </Box>
-      </Box>
-      <Box background="meta-purple-moderate" padding="space-20">
-        <Box background="meta-lime-soft" padding="space-20">
-          <Bleed marginBlock="space-40 space-0">
-            <Box padding="space-12" background="success-moderate">
-              <BodyLong>marginBlock=&quot;10 0&quot;</BodyLong>
-            </Box>
-          </Bleed>
+        <Box background="meta-purple-moderate" padding="space-20">
+          <Box background="meta-lime-soft" padding="space-20">
+            <Bleed marginBlock="space-40 space-0">
+              <Box padding="space-12" background="success-moderate">
+                <BodyLong>marginBlock=&quot;10 0&quot;</BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
        </Box>
-      </Box>
-      <Box background="meta-purple-moderate" padding="space-20">
-        <Box background="meta-lime-soft" padding="space-20">
-          <Bleed marginBlock="space-0 space-40">
-            <Box padding="space-12" background="success-moderate">
-              <BodyLong>marginBlock=&quot;0 10&quot;</BodyLong>
-            </Box>
-          </Bleed>
+        <Box background="meta-purple-moderate" padding="space-20">
+          <Box background="meta-lime-soft" padding="space-20">
+            <Bleed marginBlock="space-0 space-40">
+              <Box padding="space-12" background="success-moderate">
+                <BodyLong>marginBlock=&quot;0 10&quot;</BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
        </Box>
-      </Box>
-    </VStack>
+      </VStack>
+    </>
  ),
 };

 export const AsChild = {
  render: () => (
-    <VStack gap="space-8">
-      <Box background="meta-purple-moderate" padding="space-20">
-        <Box background="meta-lime-soft" padding="space-20">
-          <Bleed marginInline="space-40 space-0" asChild>
-            <Box padding="space-12" background="success-moderate">
-              <BodyLong>marginInline=&quot;10 0&quot;</BodyLong>
-            </Box>
-          </Bleed>
+    <>
+      <VStack gap="space-8">
+        <Box background="meta-purple-moderate" padding="space-20">
+          <Box background="meta-lime-soft" padding="space-20">
+            <Bleed marginInline="space-40 space-0" asChild>
+              <Box padding="space-12" background="success-moderate">
+                <BodyLong>marginInline=&quot;10 0&quot;</BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
        </Box>
-      </Box>
-      <Box background="meta-purple-moderate" padding="space-20">
-        <Box background="meta-lime-soft" padding="space-20">
-          <Bleed marginInline="space-0 space-40" asChild>
-            <Box padding="space-12" background="success-moderate">
-              <BodyLong>marginInline=&quot;0 10&quot;</BodyLong>
-            </Box>
-          </Bleed>
+        <Box background="meta-purple-moderate" padding="space-20">
+          <Box background="meta-lime-soft" padding="space-20">
+            <Bleed marginInline="space-0 space-40" asChild>
+              <Box padding="space-12" background="success-moderate">
+                <BodyLong>marginInline=&quot;0 10&quot;</BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
        </Box>
-      </Box>
-      <Box background="meta-purple-moderate" padding="space-20">
-        <Box background="meta-lime-soft" padding="space-20">
-          <Bleed marginBlock="space-40 space-0" asChild>
-            <Box padding="space-12" background="success-moderate">
-              <BodyLong>marginBlock=&quot;10 0&quot;</BodyLong>
-            </Box>
-          </Bleed>
+        <Box background="meta-purple-moderate" padding="space-20">
+          <Box background="meta-lime-soft" padding="space-20">
+            <Bleed marginBlock="space-40 space-0" asChild>
+              <Box padding="space-12" background="success-moderate">
+                <BodyLong>marginBlock=&quot;10 0&quot;</BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
        </Box>
-      </Box>
-      <Box background="meta-purple-moderate" padding="space-20">
-        <Box background="meta-lime-soft" padding="space-20">
-          <Bleed marginBlock="space-0 space-40" asChild>
-            <Box padding="space-12" background="success-moderate">
-              <BodyLong>marginBlock=&quot;0 10&quot;</BodyLong>
-            </Box>
-          </Bleed>
+        <Box background="meta-purple-moderate" padding="space-20">
+          <Box background="meta-lime-soft" padding="space-20">
+            <Bleed marginBlock="space-0 space-40" asChild>
+              <Box padding="space-12" background="success-moderate">
+                <BodyLong>marginBlock=&quot;0 10&quot;</BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
        </Box>
-      </Box>
-    </VStack>
+      </VStack>
+    </>
  ),
 };

 export const Breakpoints = {
  render: () => (
-    <VStack gap="space-8">
-      <Box
-        background="meta-purple-moderate"
-        padding={{ xs: "space-20", md: "space-40" }}
-      >
+    <>
+      <VStack gap="space-8">
        <Box
-          background="meta-lime-soft"
+          background="meta-purple-moderate"
          padding={{ xs: "space-20", md: "space-40" }}
        >
-          <Bleed
-            marginInline={{ xs: "space-40 space-0", md: "space-80 space-0" }}
+          <Box
+            background="meta-lime-soft"
+            padding={{ xs: "space-20", md: "space-40" }}
          >
-            <Box padding="space-12" background="success-moderate">
-              <BodyLong>{'marginInline={{ xs: "10 0", md: "20 0" }}'}</BodyLong>
-            </Box>
-          </Bleed>
+            <Bleed
+              marginInline={{ xs: "space-40 space-0", md: "space-80 space-0" }}
+            >
+              <Box padding="space-12" background="success-moderate">
+                <BodyLong>
+                  {'marginInline={{ xs: "10 0", md: "20 0" }}'}
+                </BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
        </Box>
-      </Box>
-      <Box
-        background="meta-purple-moderate"
-        padding={{ xs: "space-20", md: "space-40" }}
-      >
        <Box
-          background="meta-lime-soft"
+          background="meta-purple-moderate"
          padding={{ xs: "space-20", md: "space-40" }}
        >
-          <Bleed
-            marginInline={{ xs: "space-0 space-40", md: "space-0 space-80" }}
+          <Box
+            background="meta-lime-soft"
+            padding={{ xs: "space-20", md: "space-40" }}
          >
-            <Box padding="space-12" background="success-moderate">
-              <BodyLong>{'marginInline={{ xs: "0 10", md: "0 20" }}'}</BodyLong>
-            </Box>
-          </Bleed>
+            <Bleed
+              marginInline={{ xs: "space-0 space-40", md: "space-0 space-80" }}
+            >
+              <Box padding="space-12" background="success-moderate">
+                <BodyLong>
+                  {'marginInline={{ xs: "0 10", md: "0 20" }}'}
+                </BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
        </Box>
-      </Box>
-      <Box
-        background="meta-purple-moderate"
-        padding={{ xs: "space-20", md: "space-40" }}
-      >
        <Box
-          background="meta-lime-soft"
+          background="meta-purple-moderate"
          padding={{ xs: "space-20", md: "space-40" }}
        >
-          <Bleed
-            marginBlock={{ xs: "space-40 space-0", md: "space-80 space-0" }}
+          <Box
+            background="meta-lime-soft"
+            padding={{ xs: "space-20", md: "space-40" }}
          >
-            <Box padding="space-12" background="success-moderate">
-              <BodyLong>{'marginBlock={{ xs: "10 0", md: "20 0" }}'}</BodyLong>
-            </Box>
-          </Bleed>
+            <Bleed
+              marginBlock={{ xs: "space-40 space-0", md: "space-80 space-0" }}
+            >
+              <Box padding="space-12" background="success-moderate">
+                <BodyLong>
+                  {'marginBlock={{ xs: "10 0", md: "20 0" }}'}
+                </BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
        </Box>
-      </Box>
-      <Box
-        background="meta-purple-moderate"
-        padding={{ xs: "space-20", md: "space-40" }}
-      >
        <Box
-          background="meta-lime-soft"
+          background="meta-purple-moderate"
          padding={{ xs: "space-20", md: "space-40" }}
        >
-          <Bleed
-            marginBlock={{ xs: "space-0 space-40", md: "space-0 space-80" }}
+          <Box
+            background="meta-lime-soft"
+            padding={{ xs: "space-20", md: "space-40" }}
          >
-            <Box padding="space-12" background="success-moderate">
-              <BodyLong>{'marginBlock={{ xs: "0 10", md: "0 20" }}'}</BodyLong>
-            </Box>
-          </Bleed>
+            <Bleed
+              marginBlock={{ xs: "space-0 space-40", md: "space-0 space-80" }}
+            >
+              <Box padding="space-12" background="success-moderate">
+                <BodyLong>
+                  {'marginBlock={{ xs: "0 10", md: "0 20" }}'}
+                </BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
        </Box>
-      </Box>
-    </VStack>
+      </VStack>
+    </>
  ),
 };

@@ -155,30 +155,32 @@ const ChatBubble = () => (
  </Box>
 );
 const PricePill = () => (
-  <HStack>
-    <Box
-      background="success-soft"
-      padding="space-16"
-      borderRadius="full 0 0 full"
-    >
-      <VStack align="center">
-        <Detail>Episk ny pris</Detail>
-        <Heading size="medium">889.99 kr</Heading>
-      </VStack>
-    </Box>
-    <Box
-      background="danger-soft"
-      padding="space-16"
-      borderRadius="0 full full 0"
-    >
-      <VStack align="center">
-        <Detail>Førpris</Detail>
-        <Heading size="medium" style={{ textDecoration: "line-through" }}>
-          399.99 kr
-        </Heading>
-      </VStack>
-    </Box>
-  </HStack>
+  <>
+    <HStack>
+      <Box
+        background="success-soft"
+        padding="space-16"
+        borderRadius="full 0 0 full"
+      >
+        <VStack align="center">
+          <Detail>Episk ny pris</Detail>
+          <Heading size="medium">889.99 kr</Heading>
+        </VStack>
+      </Box>
+      <Box
+        background="danger-soft"
+        padding="space-16"
+        borderRadius="0 full full 0"
+      >
+        <VStack align="center">
+          <Detail>Førpris</Detail>
+          <Heading size="medium" style={{ textDecoration: "line-through" }}>
+            399.99 kr
+          </Heading>
+        </VStack>
+      </Box>
+    </HStack>
+  </>
 );

 export const PaddingBreakpoints = {
@@ -149,7 +149,7 @@ export const Process: ProcessComponent = forwardRef<
      <ol
        ref={mergedRef}
        data-color="info"
-        // oxlint-disable-next-line jsx-a11y/no-redundant-roles -- See comment above
+        // biome-ignore lint/a11y/noRedundantRoles: See comment above
        role="list"
        {...restProps}
        className={cl("aksel-process", className)}
@@ -218,6 +218,7 @@ export const ProcessEvent = forwardRef<HTMLLIElement, ProcessEventProps>(
    const { syncAriaControls, hideStatusText, rootId } = useProcessContext();

    // syncAriaControls is already memoized with useCallback
+    // biome-ignore lint/correctness/useExhaustiveDependencies: We want to run this only when status changes
    useEffect(syncAriaControls, [status]); // eslint-disable-line react-hooks/exhaustive-deps

    const isActive = status === "active";
@@ -98,6 +98,7 @@ const TableAnimateHeightInternal: React.FC<AnimateHeightProps> = ({
  const [useTransitions, setUseTransitions] = useState<boolean>(false);
  const didHideOnMount = useRef(false);

+  // biome-ignore lint/correctness/useExhaustiveDependencies: Only run this on mount
  useEffect(() => {
    /**
     * We check for multiple runs caused by React.StrictMode.
@@ -117,6 +118,7 @@ const TableAnimateHeightInternal: React.FC<AnimateHeightProps> = ({
  }, []);

  // ------------------ Height update
+  // biome-ignore lint/correctness/useExhaustiveDependencies: This should be explicitly run only on height change
  useEffect(() => {
    if (height !== prevHeight.current && contentElement.current) {
      showContent(contentElement.current, prevHeight.current);
@@ -30,7 +30,6 @@ const TabsList = forwardRef<HTMLDivElement, TabsListProps>(
            onClick={scrollCtx.scrollLeft}
          />
        )}
-        {/* oxlint-disable-next-line jsx-a11y/interactive-supports-focus -- Focus roves between child tabs; the tablist must not be an extra tab stop. */}
        <div
          ref={mergedRef}
          {...rest}
@@ -35,6 +35,7 @@ const TabsPanel = forwardRef<HTMLDivElement, TabsPanelProps>(
        {...rest}
        className={cl("aksel-tabs__tabpanel", className)}
        role="tabpanel"
+        // biome-ignore lint/a11y/noNoninteractiveTabindex: TabPanel is a non-interactive element that requires a tabindex for keyboard navigation.
        tabIndex={0}
        aria-labelledby={rest["aria-labelledby"] ?? ctx.labelledbyId}
        id={id ?? ctx.id}
@@ -75,7 +75,7 @@ const TimelineRowBase = forwardRef<HTMLOListElement, TimelineRowProps>(
            <div className="aksel-timeline__row-label">{label}</div>
          ))}

-        {/* oxlint-disable-next-line jsx-a11y/no-static-element-interactions -- onKeyDown just captures events on child-elements here. Regular interaction patterns still works as expected. */}
+        {/** biome-ignore lint/a11y/noStaticElementInteractions: onKeyDown just captures events on child-elements here. Regular interaction patterns still works as expected. */}
        <div
          className={cl("aksel-timeline__row", {
            "aksel-timeline__row--active": activeRow === elementRefState,
@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-empty-object-type */
 import type { AkselColorRole } from "@navikt/ds-tokens/types";

+// biome-ignore lint/suspicious/noEmptyInterface: Users can/will augment this interface
 export interface CustomAkselColor {}

 export type AkselColor = AkselColorRole | keyof CustomAkselColor;
@@ -7,9 +7,11 @@ import React, { useEffect, useState } from "react";

 let globalId = 0;
 function useGlobalId(idOverride?: string): string | undefined {
+  // biome-ignore lint/correctness/useHookAtTopLevel: At runtime, `useGlobalId` is invariant.
  const [defaultId, setDefaultId] = useState(idOverride);
  const id = idOverride || defaultId;

+  // biome-ignore lint/correctness/useHookAtTopLevel: At runtime, `useGlobalId` is invariant.
  useEffect(() => {
    if (defaultId == null) {
      // Fallback to this default id when possible.
@@ -37,6 +39,7 @@ function useId(idOverride?: string): string {
    const reactId = maybeReactUseId();
    return idOverride ?? reactId.replace(/(:)/g, "");
  }
+  // biome-ignore lint/correctness/useHookAtTopLevel: `useId` is invariant at runtime.
  return useGlobalId(idOverride) ?? "";
 }

@@ -22,6 +22,7 @@ const HighlightText = ({ text, children }: HighlightTextProps) => {
  const end = children.substring(textIndex + text.length);
  return (
    // aria-label is used to fix testing-library wrongly evaluating the accessible name of the option when highlighting text
+    // biome-ignore lint/a11y/useAriaPropsSupportedByRole: Doesn't matter if it doesn't work in the browser
    <span aria-label={children}>
      {start}
      {match && <mark>{match}</mark>}
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import React, { useState } from "react";
-import { expect, fireEvent, fn, within } from "storybook/test";
+import { expect, fireEvent, fn } from "storybook/test";
 import type { ListboxOptionProps } from "./option/ListboxOption";
 import { Listbox } from "./root/ListboxRoot";

@@ -212,14 +212,10 @@ export const EnterKey: StoryObj<{
  },
 };

-const ListboxStoryWithFilterInput = () => {
-  const [virtuallyFocusedOptionId, setVirtuallyFocusedOptionId] =
-    useState("second-item");
+const ListboxStoryWithSelectedOption = () => {
+  const [virtuallyFocusedOptionId, setVirtuallyFocusedOptionId] = useState("");
  return (
    <Listbox setVirtuallyFocusedOptionId={setVirtuallyFocusedOptionId}>
-      <Listbox.InputSlot virtuallyFocusedOptionId={virtuallyFocusedOptionId}>
-        <input type="text" aria-label="Filter" />
-      </Listbox.InputSlot>
      <Listbox.Options>
        <Listbox.Option
          id="first-item"
@@ -230,12 +226,12 @@ const ListboxStoryWithFilterInput = () => {
          First item
        </Listbox.Option>
        <Listbox.Option
-          id="second-item"
+          id="selected-item"
          onClick={() => {}}
-          hasVirtualFocus={virtuallyFocusedOptionId === "second-item"}
-          aria-selected={false}
+          hasVirtualFocus={virtuallyFocusedOptionId === "selected-item"}
+          aria-selected
        >
-          Second item
+          Selected item
        </Listbox.Option>
        <Listbox.Option
          id="last-item"
@@ -250,30 +246,19 @@ const ListboxStoryWithFilterInput = () => {
  );
 };

-// When a filter input has real focus, ArrowUp on first option and
-// ArrowDown on last option should remove virtual focus so that
-// perceived focus is returned to the input.
-export const ArrowUpOnFirstOptionFocusInput: StoryObj = {
-  render: ListboxStoryWithFilterInput,
+// When there's a selected option, but no option has virtual focus,
+// pressing ArrowUp or ArrowDown should focus the selected option.
+export const ArrowDownFocusesSelectedOption: StoryObj = {
+  render: ListboxStoryWithSelectedOption,
  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const input = canvas.getByLabelText("Filter");
-    input.focus();
-    fireEvent.keyDown(input, { key: "ArrowUp" });
-    expect(getVirtuallyFocusedValue(canvasElement)).toBe("first-item");
-    fireEvent.keyDown(input, { key: "ArrowUp" });
-    expect(getVirtuallyFocusedValue(canvasElement)).toBeUndefined();
+    pressKey(canvasElement, "ArrowDown");
+    expect(getVirtuallyFocusedValue(canvasElement)).toBe("selected-item");
  },
 };
-export const ArrowDownOnLastOptionFocusInput: StoryObj = {
-  render: ListboxStoryWithFilterInput,
+export const ArrowUpFocusesSelectedOption: StoryObj = {
+  render: ListboxStoryWithSelectedOption,
  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const input = canvas.getByLabelText("Filter");
-    input.focus();
-    fireEvent.keyDown(input, { key: "ArrowDown" });
-    expect(getVirtuallyFocusedValue(canvasElement)).toBe("last-item");
-    fireEvent.keyDown(input, { key: "ArrowDown" });
-    expect(getVirtuallyFocusedValue(canvasElement)).toBeUndefined();
+    pressKey(canvasElement, "ArrowUp");
+    expect(getVirtuallyFocusedValue(canvasElement)).toBe("selected-item");
  },
 };
@@ -11,6 +11,7 @@ function ListboxGroup({ label, children }: ListboxGroupProps) {
  const labelId = useId();

  return (
+    // biome-ignore lint/a11y/useSemanticElements: Fieldset is not generic enough
    <div
      role="group"
      className="aksel-listbox__group"
@@ -23,9 +23,7 @@ const ListboxInputSlot = ({
      }
      // @ts-expect-error - You are meant to use an <input>, but Slot doesn't know that.
      autoComplete="off"
-      // oxlint-disable-next-line jsx-a11y/role-has-required-aria-props -- Required ARIA attributes are supplied by the slotted input.
      role="combobox"
-      data-aksel-listbox-input
    >
      {children}
    </Slot>
@@ -1,3 +1,4 @@
+/** biome-ignore-all lint/a11y/useKeyWithMouseEvents: We know what we are doing */
 import React from "react";
 import { cl } from "../../../helpers";
 import { useMedia } from "../../../hooks";
@@ -20,7 +21,6 @@ function ListboxOptions({ children, ...rest }: ListboxOptionsProps) {
      className={cl(rest.className, "aksel-listbox__options")}
      role="listbox"
      tabIndex={-1}
-      // oxlint-disable-next-line jsx-a11y/mouse-events-have-key-events -- Mouse hover updates virtual focus; the listbox wrapper handles keyboard navigation.
      onMouseOver={(event) => {
        if (cannotHover) {
          // onMouseOver can be triggered by touch, but we don't want virtual focus in that case.
@@ -1,3 +1,4 @@
+/** biome-ignore-all lint/a11y/noStaticElementInteractions: We know what we are doing */
 import React, { forwardRef } from "react";
 import { useId } from "../../../../utils-external";
 import { cl } from "../../../helpers";
@@ -41,7 +42,6 @@ const ListboxComponent = forwardRef<HTMLDivElement, ListboxProps>(
    };

    return (
-      // oxlint-disable-next-line jsx-a11y/no-static-element-interactions -- Wrapper handles keyboard navigation for the listbox and input within.
      <div
        ref={ref}
        className={cl("aksel-listbox", className)}
@@ -72,34 +72,30 @@ const ListboxComponent = forwardRef<HTMLDivElement, ListboxProps>(
            listbox.focus();
          }

-          const handleArrowUpOrDown = (
-            getNextOption: (currentOption: HTMLElement) => HTMLElement | null,
+          const virtuallyFocusWithFallback = (
+            getNextElement: (currentOption: HTMLElement) => HTMLElement | null,
            getFallback: () => HTMLElement | null,
          ) => {
            event.preventDefault();
            if (!focusedOptionElm) {
-              virtuallyFocusOption(getFallback());
+              const fallback =
+                listbox.querySelector<HTMLElement>('[aria-selected="true"]') ||
+                getFallback();
+              virtuallyFocusOption(fallback);
              return;
            }
-            const nextOption = getNextOption(focusedOptionElm);
+            const nextOption = getNextElement(focusedOptionElm);
            if (nextOption) {
              virtuallyFocusOption(nextOption);
-              return;
-            }
-            // No nextOption: Assume you pressed up on first option or down on last option
-            const activeElement = document.activeElement as HTMLElement;
-            if (activeElement.dataset?.akselListboxInput) {
-              setVirtuallyFocusedOptionId("");
-              return;
            }
          };

          switch (event.key) {
            case "ArrowUp":
-              handleArrowUpOrDown(findPrevOption, getLastOption);
+              virtuallyFocusWithFallback(findPrevOption, getLastOption);
              break;
            case "ArrowDown":
-              handleArrowUpOrDown(findNextOption, getFirstOption);
+              virtuallyFocusWithFallback(findNextOption, getFirstOption);
              break;
            case "PageUp":
              event.preventDefault();
@@ -49,7 +49,7 @@ export interface DateInputProps
   */
  label: React.ReactNode;
  /**
-   * Hides the label and description visually while keeping them available to screen readers
+   * Shows label and description for screen readers only
   * @default false
   */
  hideLabel?: boolean;
@@ -135,7 +135,7 @@ export const InteractOutside: Story = {
        <div
          data-testid="outside-focusable"
          style={{ padding: "1rem" }}
-          // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- testing only
+          // biome-ignore lint/a11y/noNoninteractiveTabindex: testing only
          tabIndex={0}
        />
      </div>
@@ -182,7 +182,7 @@ export const DisableOutsidePointerEvents: Story = {
        <div
          data-testid="outside-focusable"
          style={{ padding: "1rem" }}
-          // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- testing only
+          // biome-ignore lint/a11y/noNoninteractiveTabindex: testing only
          tabIndex={0}
        />
      </div>
@@ -212,7 +212,7 @@ export const SafeZone: Story = {
    return (
      <div>
        <div
-          // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- testing only
+          // biome-ignore lint/a11y/noNoninteractiveTabindex: testing only
          tabIndex={0}
          ref={setSafeAnchor}
          data-testid="safe-anchor"
@@ -568,7 +568,7 @@ export const PreventEvents: Story = {
        <div
          data-testid="outside-focusable"
          style={{ padding: "1rem" }}
-          // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- testing only
+          // biome-ignore lint/a11y/noNoninteractiveTabindex: testing only
          tabIndex={0}
        />
      </div>
@@ -365,6 +365,7 @@ const DismissableLayer = forwardRef<HTMLDivElement, DismissableLayerProps>(
     *
     * We depend on `enabled` to clean up when the layer is disabled.
     */
+    // biome-ignore lint/correctness/useExhaustiveDependencies: We need to clean up after enabled changes.
    useEffect(() => {
      return () => {
        if (!node) {
@@ -36,7 +36,7 @@ function FocusGuards({
    <React.Fragment>
      <span
        ref={startRefCombined}
-        // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- All focus guards are non-interactive and should be tabbable
+        // biome-ignore lint/a11y/noNoninteractiveTabindex: All focus guards are non-interactive and should be tabbable
        tabIndex={0}
        style={visuallyHidden}
        data-aksel-focus-guard=""
@@ -44,7 +44,7 @@ function FocusGuards({
      {children}
      <span
        ref={endRefCombined}
-        // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- All focus guards are non-interactive and should be tabbable
+        // biome-ignore lint/a11y/noNoninteractiveTabindex: All focus guards are non-interactive and should be tabbable
        tabIndex={0}
        style={visuallyHidden}
        data-aksel-focus-guard=""
@@ -223,6 +223,7 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
      syncHeight();
    });

+    // biome-ignore lint/correctness/useExhaustiveDependencies: Since value is an external prop, we want to reset the renders on every time it changes, even when it is undefined or empty.
    useEffect(() => {
      renders.current = 0;
    }, [value]);
@@ -45,7 +45,9 @@ export const parseDate = (
      }
    }

-    for (const format of ALLOWED_FORMATS.map((x) => x.replace("yyyy", "yy"))) {
+    for (const format of [
+      ...ALLOWED_FORMATS.map((x) => x.replace("yyyy", "yy")),
+    ]) {
      parsed = parse(date, format, today, { locale });
      if (
        isValidDate(parsed) &&
@@ -1,3 +1,4 @@
+/** biome-ignore-all lint/suspicious/noAssignInExpressions: Because why not? */
 type ClassValue =
  | ClassArray
  | ClassDictionary
@@ -65,6 +65,7 @@ function createStrictContext<T>(options: {
  Context.displayName = name;

  function Provider({ children, ...context }: ProviderProps<T>) {
+    // biome-ignore lint/correctness/useExhaustiveDependencies: Object.values(context) includes all dependencies.
    const value = React.useMemo(() => context, Object.values(context)) as T; // eslint-disable-line react-hooks/exhaustive-deps

    return <Context.Provider value={value}>{children}</Context.Provider>;
@@ -1,7 +1,9 @@
 /* eslint-disable react-hooks/set-state-in-effect */
 /* eslint-disable react-hooks/exhaustive-deps */
+/** biome-ignore-all lint/correctness/useExhaustiveDependencies: Explained bellow */
 /* eslint-disable react-hooks/immutability */
 /* eslint-disable react-hooks/globals */
+/** biome-ignore-all lint/complexity/useLiteralKeys: Explained bellow */
 /**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
@@ -1,7 +1,5 @@
 # @navikt/ds-tailwind

-## 8.20.1
-
 ## 8.20.0

 ## 8.19.2
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tailwind",
-  "version": "8.20.1",
+  "version": "8.20.0",
  "description": "Tailwind config based on @navikt/ds-tokens",
  "author": "Aksel | Nav designsystem team",
  "keywords": [
@@ -28,7 +28,7 @@
  },
  "homepage": "https://aksel.nav.no/grunnleggende/kode/tailwind/",
  "devDependencies": {
-    "@navikt/ds-tokens": "^8.20.1",
+    "@navikt/ds-tokens": "^8.20.0",
    "@types/node": "^24.10.9",
    "tailwindcss": "^3.3.3",
    "tsx": "^4.23.15",
@@ -1,7 +1,5 @@
 # @navikt/ds-tokens

-## 8.20.1
-
 ## 8.20.0

 ## 8.19.2
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "8.20.1",
+  "version": "8.20.0",
  "description": "Design-tokens for Nav designsystem",
  "author": "Aksel | Nav designsystem team",
  "keywords": [
@@ -285,7 +285,7 @@ async function buildOtherTokenFormats() {
    },
  });

-  await SDDictionaryNonCSSFormats.hasInitialized;
+  await Promise.all([SDDictionaryNonCSSFormats.hasInitialized]);

  SDDictionaryNonCSSFormats.registerTransform(transformCSS);

@@ -372,7 +372,7 @@ async function buildCSSBundleForTokens({
    },
  });

-  await SDictionary.hasInitialized;
+  await Promise.all([SDictionary.hasInitialized]);

  SDictionary.registerTransform(transformCSS);
  await SDictionary.buildAllPlatforms();
@@ -1,11 +1,5 @@
 # Changelog

-## 8.20.1
-
-### @navikt/ds-css
-
- Badge: Increase inline padding by 1px for better optical balance ([#5443](https://github.com/navikt/aksel/pull/5443))
-
 ## 8.20.0

 ### @navikt/ds-css
@@ -30,7 +30,7 @@ For å komme i gang, se [Aksel dokumentasjonen](https://aksel.nav.no/grunnleggen
 | `yarn dev`       | Starter dokumentasjonssiden                |
 | `yarn storybook` | Starter Storybook                          |
 | `yarn test`      | Kjører alle tester                         |
-| `yarn lint`      | Kjører ESLint, Stylelint og Oxlint         |
+| `yarn lint`      | Kjører ESLint, Stylelint og Biome          |
 | `yarn clean`     | Fjerner genererte filer                    |
 | `yarn changeset` | Oppretter en ny versjon.                   |
Author	SHA1	Message	Date
Ken	62564123f3	feat: Added updated attachment API	2026-10-23 14:03:18 +02:00
Ken	b7c70dbcc9	feat: attachment WIP	2026-10-22 16:08:36 +02:00