Combobox2: Misc. improvements

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

.changeset/bright-icons-arrive.md

@@ -1,5 +0,0 @@
----
-"@navikt/aksel-icons": minor
----
-
-Icons: Add 46 icons for text editing, tables, keyboard input, and filtering.

.changeset/calm-grid-scroll.md

@@ -1,6 +0,0 @@
----
-"@navikt/ds-react": minor
-"@navikt/ds-css": minor
----
-
-DataGrid: Add top and bottom content areas outside the table's scrollable viewport.

.changeset/quiet-foxes-focus.md

@@ -1,5 +0,0 @@
----
-"@navikt/ds-react": patch
----
-
-DatePicker: Preserve keyboard focus when controlled month changes replace the focused day.

.changeset/quiet-icons-glow.md

@@ -0,0 +1,5 @@
+---
+"@navikt/aksel-icons": minor
+---
+
+Icons: All icons are now available as CSS custom properties. Import `@navikt/aksel-icons/css/<IconName>.css` for a single icon (e.g. `--aksel-icon-magnifying-glass`), or `@navikt/aksel-icons/css/index.css` for every icon.

.changeset/shiny-gifts-flow.md

@@ -1,5 +0,0 @@
----
-"@navikt/ds-react": patch
----
-
-Dialog, Lookup: Avoid setting aria-hidden on elements with role=alert/status when open

.changeset/tidy-panels-stick.md

@@ -1,5 +0,0 @@
----
-"@navikt/ds-css": patch
----
-
-DataTable: Constrain details panel width to the visible table area.

.github/ISSUE_TEMPLATE/bug-report.md

@@ -1,7 +1,7 @@
 ---
 name: Bug Report
 about: Meld inn bugs eller feil
-title: "[BUG]"
+title: "[BUG] "
 labels: "bug \U0001F41B"
 assignees: ""
 ---
@@ -21,7 +21,7 @@ assignees: ""
 ## Steg for å reprodusere problemet (valgfri)
 
 <!--
-1. Steg en
+1. Steg én
 2. Steg to
 3. ....
 -->
@@ -31,10 +31,10 @@ assignees: ""
 ## Eksempel/Tilleggsinformasjon (valgfri)
 
 <!--
-Screenshots eller kodesnippets
-Legg gjerne ved ekstrainfo som nettleser eller desktop/mobil hvis det er relevant.
+Screenshots, kodesnippets eller sandbox-lenke.
+Legg gjerne ved info som nettleser eller desktop/mobil hvis det er relevant.
 -->
 
 ```
- Hvis mulig, legg gjerne til kode her, evt lenke til kode i repo
+ Hvis mulig, legg gjerne til kode her, ev. lenke til kode i repo.
 ```

.github/ISSUE_TEMPLATE/feature-request.md

@@ -1,8 +1,8 @@
 ---
 name: Feature Request
 about: Foreslå noe nytt!
-title: "[NEW]"
-labels: new ✨
+title: "[NEW] "
+labels: nytt ✨
 assignees: ""
 ---
 

.github/ISSUE_TEMPLATE/in-the-wild.yml

@@ -1,5 +1,5 @@
 name: Eksempel på bruk
-description: Send et eksempel på ting fra Aksel som er brukt i det fri (tokens, komponenter, maler, etc)
+description: Send et eksempel på ting fra Aksel som er brukt i det fri (tokens, komponenter, maler, etc.)
 title: "[Eksempel på bruk]: "
 labels: ["dokumentasjon 📖"]
 body:

.github/ISSUE_TEMPLATE/new-component.yml

@@ -1,5 +1,5 @@
 name: Ny komponent
-description: Send et ønske om en eller flere nye komponenter
+description: Send et ønske om én eller flere nye komponenter
 title: "[Ny komponent]: "
 labels: ["nytt ✨", "forespørsel 🥰", "komponenter 🧩"]
 body:

.github/ISSUE_TEMPLATE/token-missing.md

@@ -1,9 +0,0 @@
----
-name: Bug Report
-about: Meld inn bugs eller feil
-title: "[BUG]"
-labels: "bug \U0001F41B"
-assignees: ""
----
-
-## Hva forventet du å finne for dette søket?

.github/ISSUE_TEMPLATE/update-component.yml

@@ -1,5 +1,5 @@
 name: Innspill til komponent
-description: Send inn innspill til komponent
+description: Send inn tilbakemelding på komponent
 title: "[Innspill til komponent]: "
 labels: ["forespørsel 🥰", "komponenter 🧩", "nytt ✨", "beta 🧪"]
 body:
@@ -8,7 +8,7 @@ body:
       value: |
         Takk for at du bidrar inn i Aksel!
   - type: textarea
-    id: feeback
+    id: feedback
     attributes:
       label: Tilbakemelding
       description: Beskriv hvilke tilbakemeldinger du har til komponenten

.github/ISSUE_TEMPLATE/update-icon.yml

@@ -1,6 +1,6 @@
 name: Innspill til ikon
-description: Send inn innspill til ikon
-title: "[Tilbakemelding på ikon]: "
+description: Send inn tilbakemelding på ikon
+title: "[Innspill til ikon]: "
 labels: ["forespørsel 🥰", "ikoner 🖼️"]
 body:
   - type: markdown
@@ -8,7 +8,7 @@ body:
       value: |
         Takk for at du bidrar inn i Aksel!
   - type: textarea
-    id: feeback
+    id: feedback
     attributes:
       label: Tilbakemelding
       description: Beskriv hvilke tilbakemeldinger du har til ikonet

.github/actions/build-website/action.yml

@@ -61,8 +61,14 @@ runs:
         SANITY_AUTH_TOKEN: ${{ inputs.sanity_deploy_studio }}
       shell: bash
 
+    - name: Generate RSS feed
+      run: yarn workspace website update:rss
+      env:
+        SANITY_READ_NO_DRAFTS: ${{ inputs.sanity_read_no_drafts_token }}
+      shell: bash
+
     - name: Build Next.js website
-      run: yarn build:next
+      run: yarn workspace website build:with-playroom
       env:
         SANITY_READ: ${{ inputs.sanity_read_token }}
         SANITY_READ_NO_DRAFTS: ${{ inputs.sanity_read_no_drafts_token }}

.github/copilot-instructions.md

@@ -10,11 +10,10 @@
 
 ## Behavior
 
-- Only respond in same language as the input. Prefer English always.
-- Use caveman-skill unless asked not to.
-- No apologies, no "I think", no change summaries.
-- Answer-first. 0-2 sentences max.
-- No thinking aloud; do next edit. Explain only when asked or non-obvious.
+- Respond in the language the user prompted in, unless they request another language.
+- Use concise, plain language without sacrificing technical precision or completeness.
+- Lead with the outcome. Avoid filler and unnecessary apologies; summarize meaningful changes and validation when useful.
+- Do not narrate routine tool use. Explain decisions, blockers, uncertainty, and tradeoffs when relevant.
 - Show only what changes. Minimal diffs; don't paste whole files.
 - Edit only the files the change needs (see Definition of done); no unrelated files. Ask only when truly blocked.
 - Favor perf/security; avoid re-renders, top-level side effects, unsafe HTML, env var leaks.
@@ -22,7 +21,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, Biome 2 (lint only), Prettier 3 (formatting). Node 22+, Yarn 4.18.0.
+- Stack: TypeScript 6, React 19 (dev), Next.js 16, Storybook 10, Vitest 4, Oxlint 1 + 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
@@ -39,18 +38,18 @@
 
 ## Definition of done
 
-- Behavior/visual change: update impl + closest story + test.
+- Behavior/visual change: update the implementation and closest existing story. Prefer Storybook play tests for UI behavior and unit tests for small utilities; combine overlapping coverage into existing stories instead of adding redundant stories.
 - New public export: sync component `index.ts`, `src/index.ts` (or `src/preview.ts`) and `package.json` exports, then `corepack yarn workspace aksel-playroom sync-imports` (root `lint` fails on stale playroom imports).
 - User-facing change to a published package: add a changeset (`add-changeset` skill) unless told otherwise.
 
 ## Commands
 
-- `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 oxlint --deny-warnings <files...>` / `corepack yarn eslint --max-warnings=0 --no-warn-ignored <files...>` (both: oxlint runs most rules, ESLint the rest) / `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)
 - `corepack yarn storybook` (:6006) / `corepack yarn storybook:aksel` (website examples, :6007, no secrets) / `corepack yarn storybook:test` (play tests, Playwright Firefox; Chromium when `COPILOT_CLI` is set) / `corepack yarn dev` (website, :3000, needs Sanity token)
-- Targeted play tests: `corepack yarn vitest run --config ./vitest.config.ts --project=storybook <path/to/X.tests.stories.tsx>` (repo root). Run after changing play tests. Under Copilot CLI this runs Chromium; if the browser can't launch, report tests as not run with the exact command.
+- Targeted play tests: `corepack yarn storybook:test <path/to/X.tests.stories.tsx>` (repo root). Run after changing play tests. Under Copilot CLI this runs Chromium; if the browser can't launch, report tests as not run with the exact command.
 
 ## Where to edit
 
@@ -64,12 +63,13 @@ 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`, `biome.json`, `vitest.config.ts`, `.storybook/`
+- `.changeset/` - release notes · Root config: `.oxlintrc.json`, `eslint.config.js`, `stylelint.config.mjs`, `biome.json`, `vitest.config.mts`, `.storybook/`
 
 ## Skills and agents
 
 - `aksel-local-validation` - pick and run the right lint/type/test commands
 - `code-review` - review a branch, diff or PR for consumer-facing risk
+- `component-contract` - define and verify component behavior, state ownership and accessibility contracts
 - `add-changeset` - write `.changeset/*.md` (never run interactive `yarn changeset`)
 - `ds-component-restructure` - move/rename component files to canonical layout
 - `website-example` - add aksel.nav.no examples/templates

.github/dependabot.yml

@@ -19,7 +19,6 @@ updates:
         applies-to: version-updates
         patterns:
           - "@next/eslint-plugin-next"
-          - "@next/bundle-analyzer"
           - "next"
       sanity:
         applies-to: version-updates
@@ -53,7 +52,6 @@ updates:
         applies-to: security-updates
         patterns:
           - "@next/eslint-plugin-next"
-          - "@next/bundle-analyzer"
           - "next"
       sanity-security:
         applies-to: security-updates

.github/instructions/caveman.instructions.md

@@ -1,78 +0,0 @@
----
-description: >
-  Ultra-compressed communication mode. Cuts token usage ~75% by speaking like caveman
-  while keeping full technical accuracy. Supports intensity levels: lite, full (default), ultra.
-  Always use caveman for code-related questions unless spesificed otherwise. For non-code topics, use caveman if user seems to want quick, concise answers.
-applyTo: "**"
----
-
-# caveman
-
-ACTIVE EVERY RESPONSE.
-
-default: full
-
-switch mode:
-
-- "/caveman lite" → lite
-- "/caveman full" → full
-- "/caveman ultra" → ultra
-- "stop caveman" | "normal mode" → off
-
-persist: keep last state
-
-## intensity
-
-| Level     | What change                                                                                                   |
-| --------- | ------------------------------------------------------------------------------------------------------------- |
-| **lite**  | short sentences, no filler, keep grammar                                                                      |
-| **full**  | fragments ok, drop articles, short words. Classic caveman                                                     |
-| **ultra** | Abbreviate (DB/auth/config/req/res/fn/impl), fragments, abbrev (db/api/req/res/fn), arrows (→), minimal words |
-
-Example - "Why React component re-render?"
-
-- lite: "Your component re-renders because you create a new object reference each render. Wrap it in `useMemo`."
-- full: "New object ref each render. Inline object prop = new ref = re-render. Wrap in `useMemo`."
-- ultra: "Inline obj prop → new ref → re-render. `useMemo`."
-
-## global rules
-
-- no filler (just/really/basically/etc)
-- no pleasantries
-- no hedging
-- keep tech exact
-- no long sentences
-- prefer symbols (→, =)
-
-## patterns
-
-Patterns: `[thing] [action] [reason]. [next step].`
-
-## examples
-
-lite:
-"Component re-renders because you create a new object each render. Use useMemo."
-
-full:
-"New object each render → new ref → re-render. useMemo."
-
-ultra:
-"inline obj → new ref → re-render. fix: useMemo."
-
-## auto-Clarity
-
-Drop caveman for: security warnings, irreversible action confirmations, multi-step sequences where fragment order risks misread, user asks to clarify or repeats question. Resume caveman after clear part done.
-
-Example - destructive op:
-
-> **Warning:** This will permanently delete all rows in the `users` table and cannot be undone.
->
-> ```sql
-> DROP TABLE users;
-> ```
->
-> Caveman resume. Verify backup exist first.
-
-## boundaries
-
-Code/commits/PRs: write normal. "stop caveman" or "normal mode": revert. Level persist until changed or session end

.github/instructions/ds-react-component.instructions.md

@@ -7,6 +7,8 @@ applyTo: "@navikt/core/react/src/**"
 
 Read the whole component folder (`index.ts`, source, `.meta.ts`, stories, tests) before editing. Moving or renaming files: use the `ds-component-restructure` skill.
 
+For changes to component state, callbacks, async behavior, composition, semantics, keyboard or focus behavior, use the [component-contract skill](../skills/component-contract/SKILL.md).
+
 ## Compatibility (why: peer range is `react ^17 || ^18 || ^19`)
 
 - No React 18/19-only APIs. ESLint `no-restricted-imports` blocks e.g. `React.useId`. Use the internal `useId`, `useClientLayoutEffect`, etc. from `utils-external/`.

.github/instructions/testing.instructions.md

@@ -6,10 +6,15 @@ applyTo: "**/*.test.ts,**/*.test.tsx,**/*.stories.tsx"
 # Tests and stories
 
 - User flows: use a story `play` function in `<Component>.tests.stories.tsx`. Pure logic and hooks: use Vitest `*.test.ts(x)` next to the source file.
-- `corepack yarn storybook:test` runs every story that has a `play` function (Storybook auto-tags them `play-fn`, see root `vitest.config.ts`). To opt out, use `tags: ["!play-fn", "skip-test"]` with a reason.
+- `corepack yarn storybook:test` runs every story that has a `play` function (Storybook auto-tags them `play-fn`, see root `vitest.config.mts`). To opt out, use `tags: ["skip-test"]` with a reason.
 - Play-test files set `parameters: { chromatic: { disable: true } }`. Visual stories feed Chromatic; use `renderStoriesForChromatic` from `utils/` when adding visual variants.
 - Import from `@storybook/react-vite` and `storybook/test`, not `@storybook/react` or `@storybook/test`.
 - Query by role and accessible name (`getByRole("button", { name })`). Avoid snapshots unless nearby tests already use them.
-- Cover the main path plus 1-2 meaningful edge cases. A behavior change updates the nearest story and test in the same change.
+- Cover the main path and meaningful edge cases in the nearest existing story/play-test where they belong. Prefer combining overlapping cases over adding redundant stories; add a separate story for a distinct user-visible scenario.
+- A behavior change updates the nearest story and test in the same change. Use unit tests for small utilities and pure logic; use Storybook play tests for UI behavior.
+- Describe behavioral coverage as starting state → action → observable result. Assert relevant intermediate states so a no-op cannot pass as success; pair a negative/blocked case with a successful control when it helps distinguish the behavior.
+- Match assertions to timing: assert synchronous outcomes immediately and wait only for behavior that is contractually eventual. When changing ARIA relationships, verify the referenced element and resulting relationship, not just that an attribute exists.
+- Before removing or consolidating tests, map each meaningful old scenario/assertion to its replacement story or test. Keep coverage that still represents a supported behavior; explain when a scenario is intentionally obsolete.
+- For state, accessibility, keyboard or focus behavior, use the [component-contract skill](../skills/component-contract/SKILL.md) to identify the contract and evidence to preserve.
 - ds-react unit tests run with `TZ=UTC`. Date logic must not depend on the local timezone.
-- Browser tests need Playwright Firefox (Chromium under Copilot CLI, see `vitest.config.ts`). Yarn has `enableScripts: false`, so if the browser is missing, report it instead of installing globally.
+- Browser tests need Playwright Firefox (Chromium under Copilot CLI, see `vitest.config.mts`). Yarn has `enableScripts: false`, so if the browser is missing, report it instead of installing globally.

.github/instructions/website.instructions.md

@@ -7,6 +7,7 @@ applyTo: "aksel.nav.no/website/**"
 
 - Both routers are in use: `app/` (App Router, `cacheComponents: true` in `next.config.ts`) and `pages/` (examples, templates, legacy). Stay in the router already used nearby. Don't move routes between them.
 - In `app/`, dynamic data needs Suspense or `"use cache"`, following nearby code. Cache Components errors at build time are real failures.
+- For website build, runtime, or performance issues, use the `website-debugging` skill to establish the cause before changing code.
 - `pages/eksempler/**` and `pages/templates/**` are public code snippets. Use the `website-example` skill. ESLint rules `aksel-local/{import-check,comment-check,args-check}` enforce their shape.
 - Reuse `@/` utils and components nearby before adding abstractions.
 - Examples/templates: `corepack yarn storybook:aksel` (no secrets). `corepack yarn dev` only for app behavior; it needs `SANITY_READ_NO_DRAFTS` and `NPM_AUTH_TOKEN`.

.github/skills/aksel-local-validation/SKILL.md

@@ -57,6 +57,7 @@ Read the current manifest before running a table command. A manifest is source o
 Group only matching files:
 
 ```sh
+corepack yarn oxlint --deny-warnings <changed .ts/.tsx/.js/.jsx files>
 corepack yarn eslint --max-warnings=0 --no-warn-ignored <changed .ts/.tsx/.js/.jsx files>
 corepack yarn stylelint <changed .css files>
 corepack yarn biome lint --no-errors-on-unmatched <changed supported source/config files>

.github/skills/code-review/SKILL.md

@@ -14,12 +14,27 @@ argument-hint: "PR number, branch or files to review"
 
 ## Process
 
-1. **Scope**: get the diff (`gh pr diff <n>` or `git diff origin/main...HEAD`) and the PR description. Note the stated goal.
+1. **Scope**: identify what the user wants reviewed.
+   - PR: get `gh pr diff <n>` and the PR description. Note the stated goal.
+   - Branch: compare against its stated base (for example, `git diff origin/main...HEAD`).
+   - Current worktree or "my changes": inspect staged, unstaged, and relevant untracked files. Do not substitute the committed branch diff for worktree changes.
+
+   ```sh
+   git status --short
+   git diff
+   git diff --cached
+   git ls-files --others --exclude-standard
+   ```
+
+   Read in-scope untracked files too. If the requested review target is unclear, ask before choosing a scope.
+
 2. **Read**: for every changed file, read the surrounding code, component `index.ts`, stories, tests and the matching `.github/instructions/*.instructions.md`. Never review from the diff alone.
 3. **Check**: run the smallest validation that covers the change (`aksel-local-validation` skill). Tool output replaces style comments.
 4. **Analyze** against the checklist below.
 5. **Report** in the output format.
 
+For changes to component state, callbacks, async behavior, composition, semantics, keyboard or focus behavior, use the [component-contract skill](../component-contract/SKILL.md) to trace the affected contract and identify observable evidence.
+
 ## Priorities
 
 - 🔴 **Blocker**: must fix before merge. Breaks consumers, regresses accessibility, security issue or wrong behavior.
@@ -48,6 +63,7 @@ Skip anything ESLint, Stylelint, Biome, Prettier or TypeScript already catches.
 - Full keyboard support, logical focus order, focus returned after close, visible `:focus-visible`.
 - Works in `forced-colors`, dark theme and at 200% zoom. Motion relies on the global `prefers-reduced-motion` handling.
 - User-facing strings use `useI18n`, with keys in `nb`, `nn` and `en` under `@navikt/core/react/src/utils/i18n/locales/`.
+- Review only the interaction pattern in scope; do not apply modal focus or dismissal rules to unrelated popup patterns. Check changed accessible names and relationships against their rendered targets.
 
 ### Wiring (🔴 for new public components)
 
@@ -72,8 +88,15 @@ Skip anything ESLint, Stylelint, Biome, Prettier or TypeScript already catches.
 - Complex logic with a higher risk of breaking has a story `play` test or Vitest test proving the user-facing contract. Queries use role and accessible name.
 - Tests are deterministic: no dependence on timezone, current time or randomness.
 - Edge cases that are easy to miss: controlled vs. uncontrolled, `ref`/`className`/`...rest` forwarding, `as` prop, empty and very long content.
+- For behavior changes, check that tests distinguish the intended outcome from a no-op and cover relevant intermediate states. When tests are consolidated or removed, verify meaningful old scenarios have replacement coverage.
 - Website examples (`aksel.nav.no/website/pages/eksempler/`) are updated when usage changes.
 
+### Component contracts and public consumer impact
+
+- `COMP-01` **Contract evidence (🟡; 🔴 if behavior is broken):** For changed state, callbacks, async behavior, composition, keyboard or focus behavior, use the [component-contract skill](../component-contract/SKILL.md). Check that a nearby story or test demonstrates the changed user-visible outcome; if coverage is missing, request it.
+- `COMP-02` **Public impact (🟡; 🔴 if a consumer contract regresses):** For changed hooks, contexts, CSS or tokens, trace affected exported components and inspect a representative consumer-visible contract. Do not stop at the implementation diff; request a public-boundary example or test when impact is not demonstrated.
+- `COMP-03` **Generated API metadata (🟡; 🔴 if published API is wrong):** For public prop or JSDoc changes, check the relevant generated props metadata as well as exports and tests; request the documented metadata update or correction when stale.
+
 ### Release (🟡, 🔴 if breaking)
 
 - User-facing change to a publishable package has a `.changeset/*.md` with the right bump and a `<Component>: <consumer-facing text>` summary. Website, playroom and tooling changes get none.
@@ -92,6 +115,13 @@ Skip anything ESLint, Stylelint, Biome, Prettier or TypeScript already catches.
 
 What the change does, overall verdict and key risks (1–3 sentences).
 
+### Evidence and replay
+
+- **Inspected:** relevant files, stories and behavior states reviewed.
+- **Checks run:** exact command and result, or `Not run` with reason.
+- **Not inspected:** relevant surfaces or behavior not verified.
+- **Reviewer replay:** starting story/URL, action and expected result, or `Not needed`. Label unexecuted steps as unverified.
+
 ### Findings
 
 | File         | Line | Priority | Issue                                                   |

.github/skills/component-contract/SKILL.md

@@ -0,0 +1,36 @@
+---
+name: component-contract
+description: "Define and verify component behavior, state ownership, accessibility and compatibility before changing a public component contract. Use when adding or changing controlled state, callbacks, async transitions, composition, keyboard or focus behavior, semantics, or consumer-facing props."
+---
+
+# Component contract
+
+Use this workflow for the behavior affected by a component change. Do not turn every dimension below into a new requirement when the change does not touch it.
+
+## Establish the existing contract
+
+Read the component folder, including its exports, metadata, stories, tests and relevant CSS. Trace related hooks, contexts and callers when the behavior crosses component boundaries. Preserve established behavior unless the requested change intentionally changes it.
+
+For the affected behavior, record a compact contract:
+
+| Area               | Define when relevant                                                                                                                                                                           |
+| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| State ownership    | Controlled and uncontrolled inputs, defaults, source of truth, and what callbacks signal. A controlled component must reflect the owner's prop; do not assume a requested update was accepted. |
+| Async transitions  | Relevant pending, success, failure, cancellation or stale-result behavior, and what the user sees.                                                                                             |
+| Composition        | Which component or context owns registration, event handling and cleanup; how nesting or portals affect the behavior.                                                                          |
+| Accessibility      | Native semantics, accessible name/content responsibility, roles, states and relationships. Identify what the library guarantees and what the consumer must provide.                            |
+| Keyboard and focus | Supported keys, focus entry/movement/return, and whether each outcome is synchronous or eventual. Apply pattern-specific behavior only where that pattern is used.                             |
+| Compatibility      | Public API and React 17–19 / SSR constraints affected by the change.                                                                                                                           |
+
+Keep the contract proportional to the change. Use existing documentation, JSDoc, stories and tests to record decisions; do not create a new metadata format or a separate document for every component.
+
+## Verify the contract
+
+- Identify the closest existing story or test that demonstrates each changed behavior. Prefer observable public-component outcomes over assertions on implementation details.
+- Check that the starting state and intermediate outcome distinguish the intended behavior from a no-op.
+- Cover meaningful accepted and rejected controlled updates, async outcomes, or nested interactions when they are part of the change.
+- Verify accessible names and relationships against the actual rendered elements when those semantics change. Do not infer accessibility from attribute presence alone.
+- Separate automated interaction evidence from visual inspection or manual assistive-technology checks; report what was not verified.
+- Use `aksel-local-validation` to select commands. This skill defines behavior, not a separate test or validation process.
+
+Do not copy another library's state semantics, API, React hooks or architectural layers as Aksel's contract. Follow Aksel's existing component and compatibility instructions.

.github/skills/website-example/SKILL.md

@@ -54,6 +54,7 @@ Hard rules (enforced by `tooling/eslint` rules `aksel-local/*`):
 ## 3. Validate
 
 ```sh
+corepack yarn oxlint --deny-warnings <file>
 corepack yarn eslint --max-warnings=0 --no-warn-ignored <file>
 corepack yarn workspace website validate:eksempler
 corepack yarn storybook:aksel   # visual check at :6007, needs no secrets

.github/workflows/build-validation.yml

@@ -17,7 +17,7 @@ permissions:
 
 jobs:
   lint:
-    name: Lint (ESLint, Stylelint etc.)
+    name: Lint (Oxlint, ESLint, Stylelint etc.)
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code

.oxlintrc.json

@@ -0,0 +1,467 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["react", "import"],
+  "categories": {
+    "correctness": "off"
+  },
+  "settings": {
+    "react": {
+      "version": "19.3.1"
+    }
+  },
+  "env": {
+    "builtin": true,
+    "es2026": true,
+    "browser": true,
+    "node": true
+  },
+  "ignorePatterns": [
+    "**/public",
+    "@navikt/aksel/**/*.input.*",
+    "@navikt/aksel/**/*.output.*",
+    "**/codemod/**/*.js",
+    "**/tokens/**/plugin.js",
+    "**/query-types.ts",
+    ".yarn",
+    "**/next-env.d.ts",
+    "@navikt/aksel-icons/src/**",
+    "@navikt/aksel/src/version.ts",
+    "@navikt/core/tailwind/{src/tokens.ts,tailwind.config.js,tailwind.darkside.config.js}",
+    "@navikt/core/tokens/token_docs.js",
+    "apps/playroom/{playroom.config.js,src/auto-generated-imports.ts}",
+    "**/.build",
+    "**/storybook-static",
+    "**/test-results",
+    "tooling/analyzer/temp",
+    "apps/figma-icon-plugin/src/ui/vite-env.d.ts"
+  ],
+  "rules": {
+    "constructor-super": "error",
+    "for-direction": "error",
+    "getter-return": "error",
+    "no-async-promise-executor": "error",
+    "no-case-declarations": "error",
+    "no-class-assign": "error",
+    "no-compare-neg-zero": "error",
+    "no-cond-assign": "error",
+    "no-const-assign": "error",
+    "no-constant-binary-expression": "error",
+    "no-constant-condition": "error",
+    "no-control-regex": "error",
+    "no-debugger": "error",
+    "no-delete-var": "error",
+    "no-dupe-class-members": "error",
+    "no-dupe-else-if": "error",
+    "no-dupe-keys": "error",
+    "no-duplicate-case": "error",
+    "no-empty": "error",
+    "no-empty-character-class": "error",
+    "no-empty-pattern": "error",
+    "no-empty-static-block": "error",
+    "no-ex-assign": "error",
+    "no-extra-boolean-cast": "error",
+    "no-fallthrough": "error",
+    "no-func-assign": "error",
+    "no-global-assign": "error",
+    "no-import-assign": "error",
+    "no-invalid-regexp": "error",
+    "no-irregular-whitespace": "error",
+    "no-loss-of-precision": "error",
+    "no-misleading-character-class": "error",
+    "no-new-native-nonconstructor": "error",
+    "no-nonoctal-decimal-escape": "error",
+    "no-obj-calls": "error",
+    "no-prototype-builtins": "error",
+    "no-redeclare": "error",
+    "no-regex-spaces": "error",
+    "no-self-assign": "error",
+    "no-setter-return": "error",
+    "no-shadow-restricted-names": "error",
+    "no-sparse-arrays": "error",
+    "no-this-before-super": "error",
+    "no-unassigned-vars": "error",
+    "no-unexpected-multiline": "error",
+    "no-unreachable": "error",
+    "no-unsafe-finally": "error",
+    "no-unsafe-negation": "error",
+    "no-unsafe-optional-chaining": "error",
+    "no-unused-labels": "error",
+    "no-unused-private-class-members": "error",
+    "no-unused-vars": "error",
+    "no-useless-backreference": "error",
+    "no-useless-catch": "error",
+    "no-useless-escape": "error",
+    "no-with": "error",
+    "preserve-caught-error": "error",
+    "require-yield": "error",
+    "use-isnan": "error",
+    "valid-typeof": "error",
+    "react/jsx-key": "error",
+    "react/jsx-no-comment-textnodes": "error",
+    "react/jsx-no-duplicate-props": "error",
+    "react/jsx-no-target-blank": "error",
+    "react/jsx-no-undef": "error",
+    "react/no-children-prop": "error",
+    "react/no-danger-with-children": "error",
+    "react/no-direct-mutation-state": "error",
+    "react/no-find-dom-node": "error",
+    "react/no-is-mounted": "error",
+    "react/no-render-return-value": "error",
+    "react/no-string-refs": "error",
+    "react/no-unescaped-entities": "error",
+    "react/no-unknown-property": "error",
+    "react/react-in-jsx-scope": "error",
+    "import/default": "error",
+    "import/no-named-as-default-member": "warn",
+    "import/no-duplicates": "warn",
+    "react/jsx-curly-brace-presence": [
+      "error",
+      {
+        "propElementValues": "always"
+      }
+    ],
+    "react/rules-of-hooks": "error",
+    "react/exhaustive-deps": [
+      "warn",
+      {
+        "additionalHooks": "(useClientLayoutEffect)"
+      }
+    ]
+  },
+  "overrides": [
+    {
+      "files": ["aksel.nav.no/sanity-studio/**"],
+      "rules": {
+        "react/react-in-jsx-scope": "off"
+      }
+    },
+    {
+      "files": [
+        "**/*.stories.{ts,tsx,js,jsx,mjs,cjs}",
+        "**/*.story.{ts,tsx,js,jsx,mjs,cjs}"
+      ],
+      "rules": {
+        "storybook/await-interactions": "error",
+        "storybook/context-in-play-function": "error",
+        "storybook/default-exports": "error",
+        "storybook/hierarchy-separator": "warn",
+        "storybook/no-redundant-story-name": "warn",
+        "storybook/no-renderer-packages": "error",
+        "storybook/prefer-pascal-case": "warn",
+        "storybook/story-exports": "error",
+        "storybook/use-storybook-expect": "error",
+        "storybook/use-storybook-testing-library": "error",
+        "import/no-anonymous-default-export": "off",
+        "react/rules-of-hooks": "off"
+      },
+      "jsPlugins": ["eslint-plugin-storybook"]
+    },
+    {
+      "files": ["**/.storybook/main.{js,cjs,mjs,ts}"],
+      "rules": {
+        "storybook/no-uninstalled-addons": "error"
+      },
+      "jsPlugins": ["eslint-plugin-storybook"]
+    },
+    {
+      "files": ["**/*.{ts,tsx}"],
+      "rules": {
+        "constructor-super": "off",
+        "getter-return": "off",
+        "no-class-assign": "off",
+        "no-const-assign": "off",
+        "no-dupe-class-members": "off",
+        "no-dupe-keys": "off",
+        "no-func-assign": "off",
+        "no-import-assign": "off",
+        "no-new-native-nonconstructor": "off",
+        "no-obj-calls": "off",
+        "no-redeclare": "off",
+        "no-setter-return": "off",
+        "no-this-before-super": "off",
+        "no-unreachable": "off",
+        "no-unsafe-negation": "off",
+        "no-with": "off",
+        "no-var": "error",
+        "prefer-const": "error",
+        "prefer-rest-params": "error",
+        "prefer-spread": "error",
+        "no-array-constructor": "error",
+        "no-unused-expressions": [
+          "error",
+          {
+            "allowShortCircuit": true,
+            "allowTernary": true
+          }
+        ],
+        "typescript/ban-ts-comment": "error",
+        "typescript/no-duplicate-enum-values": "error",
+        "typescript/no-empty-object-type": "error",
+        "typescript/no-explicit-any": "off",
+        "typescript/no-extra-non-null-assertion": "error",
+        "typescript/no-misused-new": "error",
+        "typescript/no-namespace": "error",
+        "typescript/no-non-null-asserted-optional-chain": "error",
+        "typescript/no-require-imports": "error",
+        "typescript/no-this-alias": "error",
+        "typescript/no-unnecessary-type-constraint": "error",
+        "typescript/no-unsafe-declaration-merging": "error",
+        "typescript/no-unsafe-function-type": "error",
+        "typescript/no-wrapper-object-types": "error",
+        "typescript/prefer-as-const": "error",
+        "typescript/prefer-namespace-keyword": "error",
+        "typescript/triple-slash-reference": "error",
+        "import/default": "off",
+        "import/no-named-as-default-member": "off"
+      },
+      "plugins": ["typescript"]
+    },
+    {
+      "files": ["**/*.test.*", "**/__tests__/*"],
+      "rules": {
+        "testing-library/await-async-events": [
+          "error",
+          {
+            "eventModule": "userEvent"
+          }
+        ],
+        "testing-library/await-async-queries": "error",
+        "testing-library/await-async-utils": "error",
+        "testing-library/no-await-sync-events": [
+          "error",
+          {
+            "eventModules": ["fire-event"]
+          }
+        ],
+        "testing-library/no-await-sync-queries": "error",
+        "testing-library/no-container": "error",
+        "testing-library/no-debugging-utils": "warn",
+        "testing-library/no-dom-import": ["error", "react"],
+        "testing-library/no-global-regexp-flag-in-query": "error",
+        "testing-library/no-manual-cleanup": "error",
+        "testing-library/no-node-access": "error",
+        "testing-library/no-promise-in-fire-event": "error",
+        "testing-library/no-render-in-lifecycle": "error",
+        "testing-library/no-unnecessary-act": "error",
+        "testing-library/no-wait-for-multiple-assertions": "error",
+        "testing-library/no-wait-for-side-effects": "error",
+        "testing-library/no-wait-for-snapshot": "error",
+        "testing-library/prefer-find-by": "error",
+        "testing-library/prefer-presence-queries": "error",
+        "testing-library/prefer-query-by-disappearance": "error",
+        "testing-library/prefer-screen-queries": "error",
+        "testing-library/render-result-naming-convention": "error",
+        "vitest/expect-expect": "error",
+        "vitest/no-commented-out-tests": "error",
+        "vitest/no-disabled-tests": "warn",
+        "vitest/no-focused-tests": "error",
+        "vitest/no-identical-title": "error",
+        "vitest/no-import-node-test": "error",
+        "vitest/no-interpolation-in-snapshots": "error",
+        "vitest/no-mocks-import": "error",
+        "vitest/no-standalone-expect": "error",
+        "vitest/no-unneeded-async-expect-function": "error",
+        "vitest/prefer-called-exactly-once-with": "error",
+        "vitest/require-local-test-context-for-concurrent-snapshots": "error",
+        "vitest/valid-describe-callback": "error",
+        "vitest/valid-expect": "error",
+        "vitest/valid-expect-in-promise": "error",
+        "vitest/valid-title": "error"
+      },
+      "jsPlugins": ["eslint-plugin-testing-library"],
+      "plugins": ["vitest"]
+    },
+    {
+      "files": ["aksel.nav.no/website/**"],
+      "rules": {
+        "react/no-unknown-property": [
+          "error",
+          {
+            "ignore": ["jsx", "global"]
+          }
+        ],
+        "react/react-in-jsx-scope": "off",
+        "nextjs/google-font-display": "warn",
+        "nextjs/google-font-preconnect": "warn",
+        "nextjs/next-script-for-ga": "warn",
+        "nextjs/no-async-client-component": "warn",
+        "nextjs/no-before-interactive-script-outside-document": "warn",
+        "nextjs/no-css-tags": "warn",
+        "nextjs/no-head-element": "warn",
+        "nextjs/no-img-element": "warn",
+        "nextjs/no-page-custom-font": "warn",
+        "nextjs/no-styled-jsx-in-document": "warn",
+        "nextjs/no-sync-scripts": "warn",
+        "nextjs/no-title-in-document-head": "warn",
+        "nextjs/no-typos": "warn",
+        "nextjs/no-unwanted-polyfillio": "warn",
+        "nextjs/inline-script-id": "error",
+        "nextjs/no-assign-module-variable": "error",
+        "nextjs/no-document-import-in-page": "error",
+        "nextjs/no-duplicate-head": "error",
+        "nextjs/no-head-import-in-document": "error",
+        "nextjs/no-script-component-in-head": "error"
+      },
+      "plugins": ["nextjs"]
+    },
+    {
+      "files": ["aksel.nav.no/website/pages/eksempler/**"],
+      "rules": {
+        "nextjs/no-img-element": "off"
+      },
+      "plugins": ["nextjs"]
+    },
+    {
+      "files": [
+        "aksel.nav.no/website/pages/eksempler/**/*.tsx",
+        "aksel.nav.no/website/pages/templates/**/*.tsx"
+      ],
+      "rules": {
+        "aksel-local/args-check": ["error"],
+        "aksel-local/comment-check": ["error"]
+      },
+      "jsPlugins": ["eslint-plugin-aksel-local"]
+    },
+    {
+      "files": [
+        "**/examples/__parts*/*.tsx",
+        "**/pages/templates/**/*.tsx",
+        "**/pages/eksempler/**/*.tsx"
+      ],
+      "rules": {
+        "aksel-local/import-check": ["error"]
+      },
+      "jsPlugins": ["eslint-plugin-aksel-local"]
+    },
+    {
+      "files": ["**/examples/__parts-inline/*.tsx"],
+      "rules": {
+        "arrow-body-style": ["error", "never"],
+        "func-style": ["error", "expression"],
+        "import/no-named-export": "error"
+      }
+    },
+    {
+      "files": ["@navikt/**"],
+      "rules": {
+        "no-restricted-imports": [
+          "error",
+          {
+            "paths": [
+              {
+                "name": "react",
+                "importNames": [
+                  "useId",
+                  "useInsertionEffect",
+                  "useSyncExternalStore",
+                  "useDeferredValue",
+                  "useTransition",
+                  "startTransition"
+                ],
+                "message": "React 18+ API not allowed. We currently only support React-features accesible in React 17. To add new features, we will need to update peerDependencies (breaking change)."
+              },
+              {
+                "name": "react",
+                "importNames": [
+                  "useOptimistic",
+                  "useActionState",
+                  "use",
+                  "cache",
+                  "useEffectEvent",
+                  "ViewTransition",
+                  "addTransitionType"
+                ],
+                "message": "React 19+ API not allowed. We currently only support React-features accesible in React 17. To add new features, we will need to update peerDependencies (breaking change)."
+              },
+              {
+                "name": "react-dom/client",
+                "importNames": ["createRoot", "hydrateRoot"],
+                "message": "React 18+ API not allowed (targeting React 17)."
+              },
+              {
+                "name": "react-dom",
+                "importNames": ["browser"],
+                "message": "React 19+ API not allowed (targeting React 17)."
+              }
+            ],
+            "patterns": [
+              {
+                "group": ["fs", "path"],
+                "message": "Use `node:` prefix when importing native node modules, e.g. `import path from \"node:path\"`."
+              },
+              {
+                "group": ["**/esm/**", "**/cjs/**"],
+                "message": "Do not import from build output directories. Import from source instead."
+              }
+            ]
+          }
+        ],
+        "no-restricted-properties": [
+          "error",
+          {
+            "object": "React",
+            "property": "useId",
+            "message": "React 18+ API not allowed (targeting React 17)."
+          },
+          {
+            "object": "React",
+            "property": "useInsertionEffect",
+            "message": "React 18+ API not allowed (targeting React 17)."
+          },
+          {
+            "object": "React",
+            "property": "useSyncExternalStore",
+            "message": "React 18+ API not allowed (targeting React 17)."
+          },
+          {
+            "object": "React",
+            "property": "useDeferredValue",
+            "message": "React 18+ API not allowed (targeting React 17)."
+          },
+          {
+            "object": "React",
+            "property": "useTransition",
+            "message": "React 18+ API not allowed (targeting React 17)."
+          },
+          {
+            "object": "React",
+            "property": "startTransition",
+            "message": "React 18+ API not allowed (targeting React 17)."
+          },
+          {
+            "object": "React",
+            "property": "useOptimistic",
+            "message": "React 19+ API not allowed (targeting React 17)."
+          },
+          {
+            "object": "React",
+            "property": "useActionState",
+            "message": "React 19+ API not allowed (targeting React 17)."
+          },
+          {
+            "object": "React",
+            "property": "use",
+            "message": "React 19+ API not allowed (targeting React 17)."
+          },
+          {
+            "object": "React",
+            "property": "cache",
+            "message": "React 19+ API not allowed (targeting React 17)."
+          },
+          {
+            "object": "React",
+            "property": "useEffectEvent",
+            "message": "React 19+ API not allowed (targeting React 17)."
+          }
+        ]
+      }
+    },
+    {
+      "files": ["@navikt/**/*.stories.tsx"],
+      "rules": {
+        "no-restricted-imports": "off",
+        "no-restricted-properties": "off"
+      }
+    }
+  ]
+}

.vscode/extensions.json

@@ -1,5 +1,6 @@
 {
   "recommendations": [
+    "oxc.oxc-vscode",
     "dbaeumer.vscode-eslint",
     "stylelint.vscode-stylelint",
     "biomejs.biome",

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @navikt/aksel-icons
 
+## 8.22.1
+
+## 8.22.0
+
+### Minor Changes
+
+- Icons: New icons `Gift`, `ArrowsPointingIn` and `ArrowsPointingOut`. ([#5484](https://github.com/navikt/aksel/pull/5484))
+
+### Patch Changes
+
+- ESM: Mark ESM output as side-effect free, so bundlers like webpack, Turbopack and esbuild can tree-shake unused components and icons. ([#5472](https://github.com/navikt/aksel/pull/5472))
+
+## 8.21.0
+
+### Minor Changes
+
+- Icons: Add 46 icons for text editing, tables, keyboard input, and filtering. ([#5458](https://github.com/navikt/aksel/pull/5458))
+
 ## 8.20.1
 
 ## 8.20.0

@navikt/aksel-icons/CONTRIBUTING.md

@@ -2,11 +2,11 @@
 
 ## Foreslå nye ikoner
 
-Om du ikke finner ikonet du leter etter kan du [lage et issue på GitHub](https://github.com/navikt/aksel/issues/new?labels=nytt+✨%2Cikoner+🖼%2Cforespørsel+🥰&template=new-icon.yaml&title=%5BNytt+ikon%5D%3A+).
+Om du ikke finner ikonet du leter etter kan du [lage et issue på GitHub](https://github.com/navikt/aksel/issues/new?template=new-icon.yaml).
 
 ## Oppdatere ikon
 
-Hvis du tenker et ikon fortjener en oppdatering eller er utdatert kan [du foreslå det her](https://github.com/navikt/aksel/issues/new?labels=forespørsel+🥰&template=update-icon.yml&title=%5BInnspill+til+ikon%5D%3A+).
+Hvis du tenker et ikon fortjener en oppdatering eller er utdatert kan [du foreslå det her](https://github.com/navikt/aksel/issues/new?template=update-icon.yml).
 
 ## Design av nye ikoner
 

@navikt/aksel-icons/README.md

@@ -59,6 +59,37 @@ declare module "*.svg" {
 }
 ```
 
+### CSS custom properties
+
+All icons are available as CSS custom properties behind `/css`, one file per icon. Each file declares a `--aksel-icon-<kebab-case-name>` variable on `:root`, containing the icon as an SVG data URI.
+
+```css
+@import "@navikt/aksel-icons/css/MagnifyingGlass.css";
+
+.search-button::before {
+  content: "";
+  display: inline-block;
+  width: 1.5rem;
+  height: 1.5rem;
+  background-color: currentColor;
+  mask: var(--aksel-icon-magnifying-glass) center / contain no-repeat;
+}
+
+@media (forced-colors: active) {
+  .search-button::before {
+    background-color: CanvasText;
+  }
+}
+```
+
+To get every icon, import `@navikt/aksel-icons/css/index.css`. This file contains all ~1000 icons (≈700 kB, ≈135 kB gzipped), so prefer importing only the icons you use.
+
+Import icon files once in a global stylesheet (e.g. your root layout or `globals.css`), not in CSS modules or per-component stylesheets. The variables are global, and the SVG is inlined in each file, so importing the same icon in several places duplicates it in every CSS chunk.
+
+- Icons added with CSS are decorative only. Give the parent element an accessible name, e.g. with visible text or `aria-label`.
+- In forced colors mode (e.g. Windows High Contrast), `background-color` is forced to the page background, which hides the icon. Use `background-color: CanvasText` inside `@media (forced-colors: active)` as shown above, so the icon follows the user's text color.
+- If you use a Content Security Policy, `img-src` must allow `data:`.
+
 ## [Learn more](https://aksel.nav.no/ikoner)
 
 ## License

@navikt/aksel-icons/__tests__/validate-css-icons.test.ts

@@ -0,0 +1,44 @@
+import fastglob from "fast-glob";
+import path from "node:path";
+import { describe, expect, test } from "vitest";
+import {
+  optimizeSvg,
+  svgToDataUri,
+  toCssVariableName,
+  // @ts-expect-error -- css-icons is JavaScript without a declaration file.
+} from "../config/css-icons";
+
+describe("toCssVariableName", () => {
+  test.each([
+    ["MagnifyingGlass", "--aksel-icon-magnifying-glass"],
+    ["Buildings2Fill", "--aksel-icon-buildings-2-fill"],
+    ["ClipboardXMark", "--aksel-icon-clipboard-x-mark"],
+    ["XMark", "--aksel-icon-x-mark"],
+  ])("%s -> %s", (iconName, expected) => {
+    expect(toCssVariableName(iconName)).toBe(expected);
+  });
+
+  test("is unique for every icon", () => {
+    const names = fastglob
+      .sync("*.svg", { cwd: path.resolve(__dirname, "../icons") })
+      .map((file) => toCssVariableName(path.basename(file, ".svg")));
+
+    expect(new Set(names).size).toBe(names.length);
+  });
+});
+
+describe("svgToDataUri", () => {
+  const svg = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10.5 3.25 4.75 10.5Z" fill="#202733"/>
+</svg>`;
+
+  test("keeps viewBox, uses currentColor and escapes unsafe characters", () => {
+    const uri = svgToDataUri(optimizeSvg(svg));
+    const data = uri.slice('url("'.length, -'")'.length);
+
+    expect(uri.startsWith('url("data:image/svg+xml,')).toBe(true);
+    expect(data).toContain("viewBox='0 0 24 24'");
+    expect(data).toContain("fill='currentColor'");
+    expect(data).not.toMatch(/["#<>]|width=|height=/);
+  });
+});

@navikt/aksel-icons/config/css-icons.js

@@ -0,0 +1,95 @@
+const fastglob = require("fast-glob");
+const kebabCase = require("lodash/kebabCase");
+const path = require("node:path");
+const {
+  existsSync,
+  mkdirSync,
+  readFileSync,
+  rmSync,
+  writeFileSync,
+} = require("node:fs");
+const { optimize } = require("svgo");
+
+/**
+ * @param {string} iconName e.g. "MagnifyingGlass"
+ * @returns {string} e.g. "--aksel-icon-magnifying-glass"
+ */
+function toCssVariableName(iconName) {
+  return `--aksel-icon-${kebabCase(iconName)}`;
+}
+
+/**
+ * @param {string} svgString
+ * @returns {string} Minified SVG with currentColor fill and preserved viewBox
+ */
+function optimizeSvg(svgString) {
+  return optimize(svgString.replaceAll("#202733", "currentColor"), {
+    multipass: true,
+    plugins: [
+      {
+        name: "preset-default",
+        params: { overrides: { removeViewBox: false } },
+      },
+      { name: "removeAttrs", params: { attrs: "svg:(width|height)" } },
+    ],
+  }).data;
+}
+
+/**
+ * Encodes SVG for use in a CSS `url()`. Keeps readable characters unescaped for smaller output.
+ * @param {string} svgString
+ * @returns {string}
+ */
+function svgToDataUri(svgString) {
+  const encoded = svgString
+    .replaceAll('"', "'")
+    .replace(/\s+/g, " ")
+    .trim()
+    .replace(/[^\x20-\x7e]|[%#<>{}"\\]/g, encodeURIComponent);
+
+  return `url("data:image/svg+xml,${encoded}")`;
+}
+
+/**
+ * @param {string[]} declarations
+ * @returns {string}
+ */
+function createCssFile(declarations) {
+  return `:root {\n${declarations.map((d) => `  ${d}`).join("\n")}\n}\n`;
+}
+
+function main() {
+  const basePath = path.resolve(__dirname, "../icons");
+  const cssFolder = path.resolve(__dirname, "../dist/css");
+
+  const svgList = fastglob.sync("*.svg", { cwd: basePath }).sort();
+
+  if (existsSync(cssFolder)) {
+    rmSync(cssFolder, { recursive: true, force: true });
+  }
+  mkdirSync(cssFolder, { recursive: true });
+
+  const declarations = [];
+
+  for (const svg of svgList) {
+    const iconName = path.basename(svg, ".svg");
+    const svgString = readFileSync(path.join(basePath, svg)).toString();
+    const declaration = `${toCssVariableName(iconName)}: ${svgToDataUri(optimizeSvg(svgString))};`;
+
+    declarations.push(declaration);
+    writeFileSync(
+      path.join(cssFolder, `${iconName}.css`),
+      createCssFile([declaration]),
+    );
+  }
+
+  writeFileSync(path.join(cssFolder, "index.css"), createCssFile(declarations));
+}
+
+module.exports = {
+  createCssFile,
+  main,
+  optimizeSvg,
+  svgToDataUri,
+  toCssVariableName,
+};

@navikt/aksel-icons/icons.stories.tsx

@@ -2,6 +2,12 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import React from "react";
 import * as AkselIcons from "@navikt/aksel-icons";
 import type { StarFillIcon } from "@navikt/aksel-icons";
+import "@navikt/aksel-icons/css/Airplane.css";
+import "@navikt/aksel-icons/css/Buildings2Fill.css";
+import "@navikt/aksel-icons/css/MagnifyingGlass.css";
+import "@navikt/aksel-icons/css/StarFill.css";
+import "@navikt/aksel-icons/css/XMarkOctagonFill.css";
+import StarIcon from "@navikt/aksel-icons/svg/Star.svg?no-inline";
 
 const meta: Meta<typeof StarFillIcon> = {
   title: "aksel-icons/Icons",
@@ -25,3 +31,76 @@ export const IconsInverted: Story = {
   render: Icons.render,
   globals: { theme: "dark" },
 };
+
+const cssIconVariables = [
+  "--aksel-icon-airplane",
+  "--aksel-icon-buildings-2-fill",
+  "--aksel-icon-magnifying-glass",
+  "--aksel-icon-star-fill",
+  "--aksel-icon-x-mark-octagon-fill",
+];
+
+export const CssIcons: Story = {
+  render: () => (
+    <div
+      style={{ display: "flex", gap: "1rem", color: "var(--ax-text-accent)" }}
+    >
+      <style>
+        {`.css-icon {
+          display: inline-block;
+          width: 3rem;
+          height: 3rem;
+          background-color: currentColor;
+          print-color-adjust: exact;
+        }
+        @media (forced-colors: active) {
+          .css-icon { background-color: CanvasText; }
+        }`}
+      </style>
+      {cssIconVariables.map((variable) => (
+        <span
+          key={variable}
+          title={variable}
+          className="css-icon"
+          style={{ mask: `var(${variable}) center / contain no-repeat` }}
+        />
+      ))}
+    </div>
+  ),
+};
+
+export const CssIconsInverted: Story = {
+  render: CssIcons.render,
+  globals: { theme: "dark" },
+};
+
+export const InlineSvgIcon: Story = {
+  render: () => (
+    <div style={{ color: "var(--ax-text-accent)" }}>
+      <svg aria-hidden width="3rem" height="3rem">
+        <use
+          href={`${StarIcon}`}
+          width="100%"
+          height="100%"
+          color="currentColor"
+        />
+      </svg>
+    </div>
+  ),
+};
+
+export const InlineSvgIconInverted: Story = {
+  render: () => (
+    <div style={{ color: "var(--ax-text-accent)" }}>
+      <svg aria-hidden width="3rem" height="3rem">
+        <use
+          href={`${StarIcon}`}
+          width="100%"
+          height="100%"
+          color="currentColor"
+        />
+      </svg>
+    </div>
+  ),
+  globals: { theme: "dark" },
+};

@navikt/aksel-icons/icons/ArrowsPointingIn.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.0001 13.2501C10.4142 13.2501 10.7501 13.5859 10.7501 14.0001V18.0001C10.75 18.4142 10.4142 18.75 10.0001 18.7501C9.58586 18.7501 9.25009 18.4142 9.25006 18.0001V15.8106L5.03033 20.0303C4.73746 20.3232 4.26268 20.3232 3.96978 20.0303C3.67689 19.7374 3.67689 19.2627 3.96978 18.9698L8.18951 14.7501H6.00006C5.58586 14.7501 5.25009 14.4142 5.25006 14.0001C5.25006 13.5858 5.58584 13.2501 6.00006 13.2501H10.0001ZM18.0001 13.2501C18.4142 13.2501 18.7501 13.5859 18.7501 14.0001C18.75 14.4142 18.4142 14.75 18.0001 14.7501H15.8106L20.0303 18.9698C20.3232 19.2627 20.3232 19.7375 20.0303 20.0303C19.7375 20.3232 19.2627 20.3232 18.9698 20.0303L14.7501 15.8106V18.0001C14.75 18.4142 14.4142 18.75 14.0001 18.7501C13.5859 18.7501 13.2501 18.4142 13.2501 18.0001V14.0001C13.2501 13.8011 13.3291 13.6104 13.4698 13.4698C13.6104 13.3291 13.8011 13.2501 14.0001 13.2501H18.0001ZM3.96978 3.96978C4.26268 3.67689 4.73744 3.67689 5.03033 3.96978L9.25006 8.18951V6.00005C9.25006 5.58584 9.58584 5.25005 10.0001 5.25005C10.4142 5.25008 10.7501 5.58586 10.7501 6.00005V10.0001C10.75 10.4142 10.4142 10.75 10.0001 10.7501H6.00006C5.58586 10.7501 5.25009 10.4142 5.25006 10.0001C5.25006 9.58584 5.58584 9.25005 6.00006 9.25005H8.18951L3.96978 5.03033C3.67689 4.73743 3.67689 4.26267 3.96978 3.96978ZM18.9698 3.96978C19.2627 3.67689 19.7374 3.67689 20.0303 3.96978C20.3232 4.26268 20.3232 4.73745 20.0303 5.03033L15.8106 9.25005H18.0001C18.4142 9.25008 18.7501 9.58586 18.7501 10.0001C18.75 10.4142 18.4142 10.75 18.0001 10.7501H14.0001C13.5859 10.7501 13.2501 10.4142 13.2501 10.0001V6.00005C13.2501 5.58584 13.5858 5.25005 14.0001 5.25005C14.4142 5.25008 14.7501 5.58586 14.7501 6.00005V8.18951L18.9698 3.96978Z" fill="#202733"/>
+</svg>

@navikt/aksel-icons/icons/ArrowsPointingIn.yml

@@ -0,0 +1,12 @@
+name: ArrowsPointingIn
+category: Arrows
+sub_category: Arrow
+keywords:
+  - arrows
+  - piler
+  - fullscreen
+  - fullskjerm
+  - lukk
+  - close
+variant: Stroke
+created_at: 31.10.2026

@navikt/aksel-icons/icons/ArrowsPointingOut.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.96973 13.9697C9.26262 13.6768 9.73738 13.6768 10.0303 13.9697C10.3232 14.2626 10.3232 14.7374 10.0303 15.0303L5.81055 19.25H8C8.41421 19.25 8.75 19.5858 8.75 20C8.75 20.4142 8.41421 20.75 8 20.75H4C3.80109 20.75 3.61038 20.6709 3.46973 20.5303C3.32907 20.3896 3.25 20.1989 3.25 20V16C3.25 15.5858 3.58579 15.25 4 15.25C4.41421 15.25 4.75 15.5858 4.75 16V18.1895L8.96973 13.9697ZM13.9697 13.9697C14.2626 13.6768 14.7374 13.6768 15.0303 13.9697L19.25 18.1895V16C19.25 15.5858 19.5858 15.25 20 15.25C20.4142 15.25 20.75 15.5858 20.75 16V20C20.75 20.1989 20.6709 20.3896 20.5303 20.5303C20.3896 20.6709 20.1989 20.75 20 20.75H16C15.5858 20.75 15.25 20.4142 15.25 20C15.25 19.5858 15.5858 19.25 16 19.25H18.1895L13.9697 15.0303C13.6768 14.7374 13.6768 14.2626 13.9697 13.9697ZM8 3.25C8.41421 3.25 8.75 3.58579 8.75 4C8.75 4.41421 8.41421 4.75 8 4.75H5.81055L10.0303 8.96973C10.3232 9.26262 10.3232 9.73738 10.0303 10.0303C9.73738 10.3232 9.26262 10.3232 8.96973 10.0303L4.75 5.81055V8C4.75 8.41421 4.41421 8.75 4 8.75C3.58579 8.75 3.25 8.41421 3.25 8V4C3.25 3.58579 3.58579 3.25 4 3.25H8ZM20 3.25C20.4142 3.25 20.75 3.58579 20.75 4V8C20.75 8.41421 20.4142 8.75 20 8.75C19.5858 8.75 19.25 8.41421 19.25 8V5.81055L15.0303 10.0303C14.7374 10.3232 14.2626 10.3232 13.9697 10.0303C13.6768 9.73738 13.6768 9.26262 13.9697 8.96973L18.1895 4.75H16C15.5858 4.75 15.25 4.41421 15.25 4C15.25 3.58579 15.5858 3.25 16 3.25H20Z" fill="#202733"/>
+</svg>

@navikt/aksel-icons/icons/ArrowsPointingOut.yml

@@ -0,0 +1,12 @@
+name: ArrowsPointingOut
+category: Arrows
+sub_category: Arrow
+keywords:
+  - arrows
+  - piler
+  - fullscreen
+  - fullskjerm
+  - open
+  - åpne
+variant: Stroke
+created_at: 31.10.2026

@navikt/aksel-icons/icons/FunnelCross.yml

@@ -6,5 +6,7 @@ keywords:
   - søkeresultater
   - tabell
   - trakt
+  - fjern
+  - slett
 variant: Stroke
 created_at: 26.10.2026

@navikt/aksel-icons/icons/FunnelCrossFill.yml

@@ -6,5 +6,7 @@ keywords:
   - søkeresultater
   - tabell
   - trakt
+  - fjern
+  - slett
 variant: Fill
 created_at: 26.10.2026

@navikt/aksel-icons/icons/Gift.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 3.25C15.5188 3.25 16.75 4.48122 16.75 6C16.75 6.45058 16.6394 6.87468 16.4473 7.25H19C19.9665 7.25 20.75 8.0335 20.75 9V11C20.75 11.6977 20.3407 12.298 19.75 12.5791V19C19.75 19.9665 18.9665 20.75 18 20.75H6C5.0335 20.75 4.25 19.9665 4.25 19V12.5791C3.65928 12.298 3.25 11.6977 3.25 11V9C3.25 8.0335 4.0335 7.25 5 7.25H7.55273C7.36065 6.87468 7.25 6.45058 7.25 6C7.25 4.48122 8.48122 3.25 10 3.25C10.789 3.25 11.4985 3.58399 12 4.11621C12.5015 3.58399 13.211 3.25 14 3.25ZM5.75 19C5.75 19.1381 5.86193 19.25 6 19.25H11.25V12.75H5.75V19ZM12.75 19.25H18C18.1381 19.25 18.25 19.1381 18.25 19V12.75H12.75V19.25ZM5 8.75C4.86193 8.75 4.75 8.86193 4.75 9V11C4.75 11.1381 4.86193 11.25 5 11.25H11.25V8.75H5ZM12.75 11.25H19C19.1381 11.25 19.25 11.1381 19.25 11V9C19.25 8.86193 19.1381 8.75 19 8.75H12.75V11.25ZM10 4.75C9.30964 4.75 8.75 5.30964 8.75 6C8.75 6.69036 9.30964 7.25 10 7.25H11.25V6C11.25 5.30964 10.6904 4.75 10 4.75ZM14 4.75C13.3096 4.75 12.75 5.30964 12.75 6V7.25H14C14.6904 7.25 15.25 6.69036 15.25 6C15.25 5.30964 14.6904 4.75 14 4.75Z" fill="#202733"/>
+</svg>

@navikt/aksel-icons/icons/Gift.yml

@@ -0,0 +1,8 @@
+name: Gift
+category: Home
+sub_category: Toys
+keywords:
+  - gave
+  - presang
+variant: Stroke
+created_at: 31.10.2026

@navikt/aksel-icons/icons/GiftFill.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.56055 13.2197C4.70421 13.2397 4.85088 13.25 5 13.25H11C11.1381 13.25 11.25 13.3619 11.25 13.5V20.5C11.25 20.6381 11.1381 20.75 11 20.75H6C5.0335 20.75 4.25 19.9665 4.25 19V13.4775C4.25 13.3162 4.40077 13.1975 4.56055 13.2197ZM19.4395 13.2197C19.5992 13.1975 19.75 13.3162 19.75 13.4775V19C19.75 19.9665 18.9665 20.75 18 20.75H13C12.8619 20.75 12.75 20.6381 12.75 20.5V13.5C12.75 13.3619 12.8619 13.25 13 13.25H19C19.1491 13.25 19.2958 13.2397 19.4395 13.2197ZM14 3.25C15.5188 3.25 16.75 4.48122 16.75 6C16.75 6.45058 16.6394 6.87468 16.4473 7.25H19C19.9665 7.25 20.75 8.0335 20.75 9V10C20.75 10.9665 19.9665 11.75 19 11.75H13C12.8619 11.75 12.75 11.6381 12.75 11.5V7.25H14C14.6904 7.25 15.25 6.69036 15.25 6C15.25 5.30964 14.6904 4.75 14 4.75C13.3096 4.75 12.75 5.30964 12.75 6V7.24707H11.25V6C11.25 5.30964 10.6904 4.75 10 4.75C9.30964 4.75 8.75 5.30964 8.75 6C8.75 6.69036 9.30964 7.25 10 7.25H11.25V11.5C11.25 11.6381 11.1381 11.75 11 11.75H5C4.0335 11.75 3.25 10.9665 3.25 10V9C3.25 8.0335 4.0335 7.25 5 7.25H7.55273C7.36065 6.87468 7.25 6.45058 7.25 6C7.25 4.48122 8.48122 3.25 10 3.25C10.789 3.25 11.4985 3.58399 12 4.11621C12.5015 3.58399 13.211 3.25 14 3.25Z" fill="#202733"/>
+</svg>

@navikt/aksel-icons/icons/GiftFill.yml

@@ -0,0 +1,8 @@
+name: GiftFill
+category: Home
+sub_category: Toys
+keywords:
+  - gave
+  - presang
+variant: Fill
+created_at: 31.10.2026

@navikt/aksel-icons/icons/Keyboard.yml

@@ -2,6 +2,6 @@ name: Keyboard
 category: Interface
 sub_category: Devices
 keywords:
-  - Keyboard
+  - Tastatur
 variant: Stroke
 created_at: 26.10.2026

@navikt/aksel-icons/icons/KeyboardFill.yml

@@ -2,6 +2,6 @@ name: KeyboardFill
 category: Interface
 sub_category: Devices
 keywords:
-  - KeyboardFill
+  - Tastatur
 variant: Fill
 created_at: 26.10.2026

@navikt/aksel-icons/icons/TableCellsMerge.yml

@@ -2,6 +2,9 @@ name: TableCellsMerge
 category: Interface
 sub_category: Table
 keywords:
-  - TableCellsMerge
+  - celle
+  - slå sammen
+  - tabell
+  - datagrid
 variant: Stroke
 created_at: 26.10.2026

@navikt/aksel-icons/icons/TableCellsMergeFill.yml

@@ -2,6 +2,9 @@ name: TableCellsMergeFill
 category: Interface
 sub_category: Table
 keywords:
-  - TableCellsMergeFill
+  - celle
+  - slå sammen
+  - tabell
+  - datagrid
 variant: Fill
 created_at: 26.10.2026

@navikt/aksel-icons/icons/TableCellsSplit.yml

@@ -2,6 +2,9 @@ name: TableCellsSplit
 category: Interface
 sub_category: Table
 keywords:
-  - TableCellsSplit
+  - celle
+  - splitt
+  - tabell
+  - datagrid
 variant: Stroke
 created_at: 26.10.2026

@navikt/aksel-icons/icons/TableCellsSplitFill.yml

@@ -2,6 +2,9 @@ name: TableCellsSplitFill
 category: Interface
 sub_category: Table
 keywords:
-  - TableCellsSplitFill
+  - celle
+  - splitt
+  - tabell
+  - datagrid
 variant: Fill
 created_at: 26.10.2026

@navikt/aksel-icons/icons/TableCross.yml

@@ -2,6 +2,9 @@ name: TableCross
 category: Interface
 sub_category: Table
 keywords:
-  - TableCross
+  - tabell
+  - datagrid
+  - fjern
+  - slett
 variant: Stroke
 created_at: 26.10.2026

@navikt/aksel-icons/icons/TableCrossFill.yml

@@ -2,6 +2,9 @@ name: TableCrossFill
 category: Interface
 sub_category: Table
 keywords:
-  - TableCrossFill
+  - tabell
+  - datagrid
+  - fjern
+  - slett
 variant: Fill
 created_at: 26.10.2026

@navikt/aksel-icons/icons/TableDeleteColumn.yml

@@ -2,6 +2,9 @@ name: TableDeleteColumn
 category: Interface
 sub_category: Table
 keywords:
-  - TableDeleteColumn
+  - slett kolonne
+  - tabell
+  - datagrid
+  - fjern
 variant: Stroke
 created_at: 26.10.2026

@navikt/aksel-icons/icons/TableDeleteColumnFill.yml

@@ -2,6 +2,9 @@ name: TableDeleteColumnFill
 category: Interface
 sub_category: Table
 keywords:
-  - TableDeleteColumnFill
+  - slett kolonne
+  - tabell
+  - datagrid
+  - fjern
 variant: Fill
 created_at: 26.10.2026

@navikt/aksel-icons/icons/TableDeleteRow.yml

@@ -2,6 +2,9 @@ name: TableDeleteRow
 category: Interface
 sub_category: Table
 keywords:
-  - TableDeleteRow
+  - slett rad
+  - tabell
+  - datagrid
+  - fjern
 variant: Stroke
 created_at: 26.10.2026

@navikt/aksel-icons/icons/TableDeleteRowFill.yml

@@ -2,6 +2,9 @@ name: TableDeleteRowFill
 category: Interface
 sub_category: Table
 keywords:
-  - TableDeleteRowFill
+  - slett rad
+  - tabell
+  - datagrid
+  - fjern
 variant: Fill
 created_at: 26.10.2026

@navikt/aksel-icons/icons/TableGrid.yml

@@ -2,6 +2,7 @@ name: TableGrid
 category: Interface
 sub_category: Table
 keywords:
-  - TableGrid
+  - tabell
+  - datagrid
 variant: Stroke
 created_at: 26.10.2026

@navikt/aksel-icons/icons/TableGridFill.yml

@@ -2,6 +2,7 @@ name: TableGridFill
 category: Interface
 sub_category: Table
 keywords:
-  - TableGridFill
+  - tabell
+  - datagrid
 variant: Fill
 created_at: 26.10.2026

@navikt/aksel-icons/icons/TableInsertColumnLeft.yml

@@ -2,6 +2,9 @@ name: TableInsertColumnLeft
 category: Interface
 sub_category: Table
 keywords:
-  - TableInsertColumnLeft
+  - ny kolonne
+  - venstre
+  - tabell
+  - datagrid
 variant: Stroke
 created_at: 26.10.2026

@navikt/aksel-icons/icons/TableInsertColumnLeftFill.yml

@@ -2,6 +2,9 @@ name: TableInsertColumnLeftFill
 category: Interface
 sub_category: Table
 keywords:
-  - TableInsertColumnLeftFill
+  - ny kolonne
+  - venstre
+  - tabell
+  - datagrid
 variant: Fill
 created_at: 26.10.2026

@navikt/aksel-icons/icons/TableInsertColumnRight.yml

@@ -2,6 +2,9 @@ name: TableInsertColumnRight
 category: Interface
 sub_category: Table
 keywords:
-  - TableInsertColumnRight
+  - ny kolonne
+  - høyre
+  - tabell
+  - datagrid
 variant: Stroke
 created_at: 26.10.2026

@navikt/aksel-icons/icons/TableInsertColumnRightFill.yml

@@ -2,6 +2,9 @@ name: TableInsertColumnRightFill
 category: Interface
 sub_category: Table
 keywords:
-  - TableInsertColumnRightFill
+  - ny kolonne
+  - høyre
+  - tabell
+  - datagrid
 variant: Fill
 created_at: 26.10.2026

@navikt/aksel-icons/icons/TableInsertRowAbove.yml

@@ -2,6 +2,9 @@ name: TableInsertRowAbove
 category: Interface
 sub_category: Table
 keywords:
-  - TableInsertRowAbove
+  - ny rad
+  - over
+  - tabell
+  - datagrid
 variant: Stroke
 created_at: 26.10.2026

@navikt/aksel-icons/icons/TableInsertRowAboveFill.yml

@@ -2,6 +2,9 @@ name: TableInsertRowAboveFill
 category: Interface
 sub_category: Table
 keywords:
-  - TableInsertRowAboveFill
+  - ny rad
+  - over
+  - tabell
+  - datagrid
 variant: Fill
 created_at: 26.10.2026

@navikt/aksel-icons/icons/TableInsertRowBelow.yml

@@ -2,6 +2,9 @@ name: TableInsertRowBelow
 category: Interface
 sub_category: Table
 keywords:
-  - TableInsertRowBelow
+  - ny rad
+  - under
+  - tabell
+  - datagrid
 variant: Stroke
 created_at: 26.10.2026

@navikt/aksel-icons/icons/TableInsertRowBelowFill.yml

@@ -2,6 +2,9 @@ name: TableInsertRowBelowFill
 category: Interface
 sub_category: Table
 keywords:
-  - TableInsertRowBelowFill
+  - ny rad
+  - under
+  - tabell
+  - datagrid
 variant: Fill
 created_at: 26.10.2026

@navikt/aksel-icons/icons/TablePlus.yml

@@ -2,6 +2,9 @@ name: TablePlus
 category: Interface
 sub_category: Table
 keywords:
-  - TablePlus
+  - tabell
+  - legg til
+  - ny
+  - datagrid
 variant: Stroke
 created_at: 26.10.2026

@navikt/aksel-icons/icons/TablePlusFill.yml

@@ -2,6 +2,9 @@ name: TablePlusFill
 category: Interface
 sub_category: Table
 keywords:
-  - TablePlusFill
+  - tabell
+  - legg til
+  - ny
+  - datagrid
 variant: Fill
 created_at: 26.10.2026

@navikt/aksel-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-icons",
-  "version": "8.20.1",
+  "version": "8.22.1",
   "author": "Aksel | Nav",
   "homepage": "https://aksel.nav.no/ikoner",
   "repository": {
@@ -23,7 +23,9 @@
     "access": "public",
     "provenance": true
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "*.css"
+  ],
   "license": "MIT",
   "main": "./dist/react/cjs/index.js",
   "module": "./dist/react/esm/index.js",
@@ -44,6 +46,7 @@
       "default": "./dist/metadata.js"
     },
     "./svg/*.svg": "./dist/svg/*.svg",
+    "./css/*.css": "./dist/css/*.css",
     "./package.json": "./package.json"
   },
   "typesVersions": {
@@ -62,10 +65,11 @@
     "create-icons": "svgr --no-prettier --silent --index-template config/index-template.js --out-dir src icons && yarn prettify-icons",
     "prettify-icons": "yarn prettier ./src --write --ignore-path nonexisting-path --log-level silent --no-config",
     "parse-svg": "node -e 'require(\"./config/parse-svg.js\").main()'",
+    "css-icons": "node -e 'require(\"./config/css-icons.js\").main()'",
     "copy": "copyfiles util/* src",
     "update-metadata": "node config/metadata.js",
-    "write-packagejson": "echo '{\"type\": \"module\"}' > dist/react/esm/package.json",
-    "build": "yarn copy && yarn create-icons && concurrently \"tsc\" \"tsc -p tsconfig.esm.json && tsc-alias -p tsconfig.esm.json && yarn write-packagejson\" && node config/cleanTypes.js && yarn update-metadata && yarn parse-svg",
+    "write-packagejson": "echo '{\"type\": \"module\", \"sideEffects\": false}' > dist/react/esm/package.json",
+    "build": "yarn copy && yarn create-icons && concurrently \"tsc\" \"tsc -p tsconfig.esm.json && tsc-alias -p tsconfig.esm.json && yarn write-packagejson\" && node config/cleanTypes.js && yarn update-metadata && yarn parse-svg && yarn css-icons",
     "fetch-new:icons": "tsx --env-file=.env config/figma/index.ts",
     "zip:icons": "node config/zip.js",
     "test": "vitest run",
@@ -87,10 +91,11 @@
     "prettier": "3.9.6",
     "react": "19.3.1",
     "rehype-parse": "9.0.1",
+    "svgo": "3.3.5",
     "tsc-alias": "1.9.7",
     "tsx": "^4.23.15",
     "typescript": "6.0.3",
     "unified": "11.0.5",
-    "vitest": "4.1.11"
+    "vitest": "5.0.5"
   }
 }

@navikt/aksel-stylelint/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/aksel-stylelint
 
+## 8.22.1
+
+## 8.22.0
+
+## 8.21.0
+
 ## 8.20.1
 
 ## 8.20.0

@navikt/aksel-stylelint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-stylelint",
-  "version": "8.20.1",
+  "version": "8.22.1",
   "type": "module",
   "engines": {
     "node": ">=18.12.0"
@@ -43,13 +43,13 @@
     "dev": "yarn watch:lint"
   },
   "devDependencies": {
-    "@navikt/ds-css": "^8.20.1",
-    "@navikt/ds-tokens": "^8.20.1",
+    "@navikt/ds-css": "^8.22.1",
+    "@navikt/ds-tokens": "^8.22.1",
     "concurrently": "10.0.6",
     "postcss-selector-parser": "^7.1.7",
     "postcss-value-parser": "^4.2.0",
     "stylelint": "^17.15.0",
-    "stylelint-test-rule-node": "^1.2.0",
+    "stylelint-test-rule-node": "^1.3.0",
     "tsx": "^4.23.15",
     "typescript": "6.0.3"
   }

@navikt/aksel/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/aksel
 
+## 8.22.1
+
+## 8.22.0
+
+## 8.21.0
+
 ## 8.20.1
 
 ## 8.20.0

@navikt/aksel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel",
-  "version": "8.20.1",
+  "version": "8.22.1",
   "description": "Aksel command line interface. Codemods and other utilities for Aksel users.",
   "author": "Aksel | Nav designsystem team",
   "license": "MIT",
@@ -58,7 +58,7 @@
     "@types/lodash": "4.17.25",
     "rimraf": "6.1.3",
     "typescript": "6.0.3",
-    "vitest": "4.1.11"
+    "vitest": "5.0.5"
   },
   "sideEffects": false,
   "engines": {

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @navikt/ds-css
 
+## 8.22.1
+
+### Patch Changes
+
+- DataGrid: Column dividers in the table header are now hidden when column dividers are disabled, and only shown on hover, focus or while resizing. ([#5505](https://github.com/navikt/aksel/pull/5505))
+
+## 8.22.0
+
+## 8.21.0
+
+### Minor Changes
+
+- DataGrid: Add top and bottom content areas outside the table's scrollable viewport. ([#5442](https://github.com/navikt/aksel/pull/5442))
+
+### Patch Changes
+
+- DataTable: Constrain details panel width to the visible table area. ([#5433](https://github.com/navikt/aksel/pull/5433))
+
 ## 8.20.1
 
 ### Patch Changes

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "8.20.1",
+  "version": "8.22.1",
   "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.22.1",
     "browserslist": "^4.28.7",
     "esbuild": "^0.28.2",
     "fast-glob": "3.3.3",

@navikt/core/css/src/data-grid-preview.css

@@ -208,11 +208,20 @@
   padding: 0;
   font-size: var(--__axc-data-table-text-size);
 
-  .aksel-data-table__thead &,
   .aksel-data-table[data-column-dividers="true"] & {
     box-shadow: inset 1px 1px 0 0 var(--ax-border-neutral-subtle);
   }
 
+  .aksel-data-table[data-column-dividers="false"] & {
+    transition: box-shadow 0.1s ease-in-out;
+  }
+
+  .aksel-data-table[data-column-dividers="false"]
+    .aksel-data-table__thead:where(:hover, :has(:focus-visible, .aksel-data-table__th-resize-handle:active))
+    & {
+    box-shadow: inset 1px 1px 0 0 var(--ax-border-neutral-subtle);
+  }
+
   &:not(.aksel-data-table__column-header, [data-sticky]) {
     overflow: hidden; /* Needed for cases where left margin is added to cell-content (nested rows) */
   }

@navikt/core/css/src/form/combobox2.css

@@ -142,7 +142,7 @@
   flex-direction: column;
   overflow: hidden;
 
-  .aksel-combobox2:has(:not(.aksel-combobox2__modal)) & {
+  .aksel-combobox2:not(:has(.aksel-combobox2__modal)) & {
     outline: 1px solid var(--ax-border-neutral-subtleA);
     outline-offset: -1px;
     border-radius: var(--ax-radius-8);
@@ -158,26 +158,21 @@
   margin: -1px;
 }
 
-.aksel-combobox2__filter .aksel-search__wrapper {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
+.aksel-combobox2__filter .aksel-search__wrapper:has(.aksel-search__input:focus-visible) {
+  outline: none;
+  position: relative;
 
-  &:has(.aksel-search__input:focus-visible) {
-    outline: none;
-    position: relative;
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    border: 2px solid var(--ax-border-focus);
+  }
 
-    &::after {
-      content: "";
-      position: absolute;
-      inset: 0;
-      pointer-events: none;
-      border: 2px solid var(--ax-border-focus);
-    }
-
-    .aksel-combobox2:has(:not(.aksel-combobox2__modal)) &::after {
-      border-top-left-radius: var(--ax-radius-8);
-      border-top-right-radius: var(--ax-radius-8);
-    }
+  .aksel-combobox2:not(:has(.aksel-combobox2__modal)) &::after {
+    border-top-left-radius: var(--ax-radius-8);
+    border-top-right-radius: var(--ax-radius-8);
   }
 }
 
@@ -189,7 +184,7 @@
     border-color: var(--ax-border-neutral-subtleA);
   }
 
-  .aksel-combobox2[data-size="medium"] & {
+  .aksel-combobox2__popup[data-size="medium"] & {
     min-height: 0;
   }
 
@@ -221,15 +216,6 @@
   text-align: center;
 }
 
-/************************************************
- * Group                                        *
- ************************************************/
-
-.aksel-combobox2__group-label {
-  padding: var(--ax-space-8) var(--ax-space-8);
-  font-weight: bold;
-}
-
 /************************************************
  * Option                                       *
  ************************************************/
@@ -253,7 +239,7 @@
   margin-top: var(--ax-space-2);
   float: left;
 
-  .aksel-combobox2[data-size="small"] & {
+  .aksel-combobox2__popup[data-size="small"] & {
     --__axc-combobox2-option-checkmark-size: 1rem;
   }
 

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,51 @@
 # @navikt/ds-react
 
+## 8.22.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@8.22.1
+  - @navikt/aksel-icons@8.22.1
+
+## 8.22.0
+
+### Patch Changes
+
+- Combobox: The list is no longer focusable ([#5490](https://github.com/navikt/aksel/pull/5490))
+
+- Popover: Closed popovers no longer calculate their position on mount. This makes pages with many Dropdowns or HelpTexts render faster. ([#5474](https://github.com/navikt/aksel/pull/5474))
+
+- ESM: Mark ESM output as side-effect free, so bundlers like webpack, Turbopack and esbuild can tree-shake unused components and icons. ([#5472](https://github.com/navikt/aksel/pull/5472))
+
+- MonthPicker: Fixed issue where navigating to a year without any enabled months could lead to re-render loop in React ([#5503](https://github.com/navikt/aksel/pull/5503))
+
+- MonthPicker: Arrow-key navigation no longer freezes the page when no later or earlier month is enabled. Keyboard search now respects `fromDate`/`toDate` with both caption types and looks at most 100 years ahead or back. ([#5477](https://github.com/navikt/aksel/pull/5477))
+
+- Date utilities: Import date-fns functions and locales from their own paths, so unbundled Node imports (SSR, Vitest/Jest) no longer load every date-fns locale. ([#5476](https://github.com/navikt/aksel/pull/5476))
+
+- DataGrid: Fixed text selection inside details panels when keyboard navigation is enabled. ([`0bdad46`](https://github.com/navikt/aksel/commit/0bdad462664e04abd89c4121de515f6ae6d9aad1))
+
+- Updated dependencies [[`16da3ce`](https://github.com/navikt/aksel/commit/16da3ce770041acc41589fcdd087717fab027126), [`b69c5fc`](https://github.com/navikt/aksel/commit/b69c5fca305f28ad99b48dd74e4f736fe4257d48)]:
+  - @navikt/aksel-icons@8.22.0
+  - @navikt/ds-tokens@8.22.0
+
+## 8.21.0
+
+### Minor Changes
+
+- DataGrid: Add top and bottom content areas outside the table's scrollable viewport. ([#5442](https://github.com/navikt/aksel/pull/5442))
+
+### Patch Changes
+
+- DatePicker: Preserve keyboard focus when controlled month changes replace the focused day. ([#5408](https://github.com/navikt/aksel/pull/5408))
+
+- Dialog, Lookup: Avoid setting aria-hidden on elements with role=alert/status when open ([#5466](https://github.com/navikt/aksel/pull/5466))
+
+- Updated dependencies [[`f87f195`](https://github.com/navikt/aksel/commit/f87f1951fef77430c433d3e36892f18fc1387eb3)]:
+  - @navikt/aksel-icons@8.21.0
+  - @navikt/ds-tokens@8.21.0
+
 ## 8.20.1
 
 ### Patch Changes

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "8.20.1",
+  "version": "8.22.1",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -775,21 +775,21 @@
     "docgen:meta": "yarn metadata:generate-names && tsx ./scripts/extract-metadata.ts",
     "metadata:generate-names": "tsx ./scripts/extract-component-names.ts",
     "i18n-jsdoc": "tsx ./scripts/addJsdocToLocales.ts",
-    "write-packagejson": "echo '{\"type\": \"module\"}' > esm/package.json",
+    "write-packagejson": "echo '{\"type\": \"module\", \"sideEffects\": false}' > esm/package.json",
     "clean": "rimraf cjs esm",
     "build": "yarn i18n-jsdoc && yarn metadata:generate-names && concurrently \"tsc -p tsconfig.build.json --module commonjs --outDir cjs --tsBuildInfoFile cjs/.tsbuildinfo\" \"tsc -p tsconfig.build.json --module esnext --outDir esm --tsBuildInfoFile esm/.tsbuildinfo && tsc-alias -p tsconfig.build.json --dir esm -f && yarn write-packagejson\" && yarn i18n-jsdoc --cleanup && yarn copy-types",
     "watch": "tsc --watch -p tsconfig.build.json --module esnext --outDir esm --tsBuildInfoFile esm/.tsbuildinfo",
-    "test": "yarn metadata:generate-names && concurrently \"cross-env TZ=UTC vitest run -c tests/vitest.config.ts\" \"yarn test-sb-build\"",
-    "test:bench": "cross-env TZ=UTC vitest bench -c tests/vitest.config.ts",
+    "test": "yarn metadata:generate-names && concurrently \"cross-env TZ=UTC vitest run -c tests/vitest.config.mts\" \"yarn test-sb-build\"",
+    "test:bench": "cross-env TZ=UTC vitest bench -c tests/vitest.config.mts",
     "test-sb-build": "tsc -p tsconfig.json",
-    "test:watch": "TZ=UTC vitest watch -c tests/vitest.config.ts",
+    "test:watch": "TZ=UTC vitest watch -c tests/vitest.config.mts",
     "copy-types": "copyfiles -f ./src/types/theme.d.ts ./esm/types"
   },
   "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.22.1",
+    "@navikt/ds-tokens": "^8.22.1",
     "date-fns": "^4.0.0",
     "react-day-picker": "10.0.2"
   },
@@ -806,7 +806,7 @@
     "copyfiles": "^2.4.1",
     "cross-env": "^10.1.0",
     "jscodeshift": "17.4.0",
-    "jsdom": "29.1.1",
+    "jsdom": "30.1.3",
     "react": "19.3.1",
     "react-dom": "19.3.1",
     "rimraf": "6.1.3",
@@ -814,7 +814,7 @@
     "tsc-alias": "1.9.7",
     "tsx": "^4.23.15",
     "typescript": "6.0.3",
-    "vitest": "4.1.11"
+    "vitest": "5.0.5"
   },
   "peerDependencies": {
     "@types/react": "^17.0.30 || ^18 || ^19",

@navikt/core/react/src/data-grid/root/DataGridRoot.tsx

@@ -82,8 +82,6 @@ interface DataGridComponent {
 /**
  * Component for displaying tabular data.
  *
- * **WARNING: This component is in active development and may receive breaking changes outside major releases!**
- *
  * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/datagrid)
  * @see 🏷️ {@link DataGridProps}
  *

@navikt/core/react/src/data/stories/Data.attachments.stories.tsx

@@ -84,6 +84,9 @@ export const Attachments: Story = {
       options: ["none", "x", "y", "both"],
     },
   },
+  args: {
+    overflow: "none",
+  },
 };
 
 export const Chromatic = renderStoriesForChromatic({

@navikt/core/react/src/data/table/details-panel-row/DataTableDetailsPanelRow.tsx

@@ -12,7 +12,7 @@ function DataTableDetailsPanelRow<T>({
   rowId: string;
   rowData: T;
 }) {
-  const { tableId, totalColSpan } = useDataTableContext();
+  const { tableId, totalColSpan, withKeyboardNav } = useDataTableContext();
   const {
     enableDetailsPanel,
     isExpanded,
@@ -46,6 +46,7 @@ function DataTableDetailsPanelRow<T>({
       <td
         id={expansionId}
         colSpan={totalColSpan}
+        tabIndex={withKeyboardNav ? -1 : undefined}
         className="aksel-data-table__details-panel-row-cell"
       >
         <div style={style}>{content}</div>

@navikt/core/react/src/datepicker/DatePicker.tests.stories.tsx

@@ -16,7 +16,7 @@ export default {
     chromatic: { disable: true },
   },
   /* TODO: Temp disabled CI-tests */
-  tags: ["!play-fn", "skip-test"],
+  tags: ["skip-test"],
 } satisfies Meta<typeof DatePicker>;
 
 type Story = StoryObj<typeof DatePicker>;
@@ -104,7 +104,7 @@ export const DropdownCaptionNavigation: Story = {
 };
 
 export const ControlledMonthPreservesFocus: Story = {
-  tags: ["play-fn", "!skip-test"],
+  tags: ["!skip-test"],
   render: () => {
     const [month, setMonth] = React.useState(new Date(2026, 2, 15));
     const [selected, setSelected] = React.useState<Date | undefined>(

@navikt/core/react/src/datepicker/day-button/DatePickerDayButtonInternal.tsx

@@ -1,4 +1,5 @@
-import { type Locale, format } from "date-fns";
+import type { Locale } from "date-fns";
+import { format } from "date-fns/format";
 import React, { useEffect, useRef } from "react";
 import type { CalendarDay, Modifiers } from "react-day-picker";
 import { cl } from "../../utils/helpers";

@navikt/core/react/src/datepicker/months/DatePickerMonthsInternal.tsx

@@ -1,12 +1,10 @@
-import {
-  type Locale,
-  format,
-  getMonth,
-  getYear,
-  setMonth,
-  setYear,
-  startOfMonth,
-} from "date-fns";
+import type { Locale } from "date-fns";
+import { format } from "date-fns/format";
+import { getMonth } from "date-fns/getMonth";
+import { getYear } from "date-fns/getYear";
+import { setMonth } from "date-fns/setMonth";
+import { setYear } from "date-fns/setYear";
+import { startOfMonth } from "date-fns/startOfMonth";
 import React, { type ChangeEvent, useCallback } from "react";
 import { type CalendarMonth, useDayPicker } from "react-day-picker";
 import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";

@navikt/core/react/src/datepicker/rdp/DatePickerRDPInternal.tsx

@@ -1,4 +1,4 @@
-import { isWeekend } from "date-fns";
+import { isWeekend } from "date-fns/isWeekend";
 import React, { useCallback, useState } from "react";
 import {
   type ClassNames,

@navikt/core/react/src/datepicker/root/DatePickerRoot.tsx

@@ -1,4 +1,4 @@
-import { isSameDay } from "date-fns";
+import { isSameDay } from "date-fns/isSameDay";
 import React, { forwardRef, useRef, useState } from "react";
 import type { DateRange } from "react-day-picker";
 import { useId } from "../../utils-external";

@navikt/core/react/src/datepicker/root/useDatepicker.tsx

@@ -1,4 +1,5 @@
-import { differenceInCalendarDays, isWeekend } from "date-fns";
+import { differenceInCalendarDays } from "date-fns/differenceInCalendarDays";
+import { isWeekend } from "date-fns/isWeekend";
 import React, { useCallback, useState } from "react";
 import { type DayEventHandler, dateMatchModifiers } from "react-day-picker";
 import { getLocaleFromString } from "../../utils/components/date/Date.locale";

@navikt/core/react/src/datepicker/root/useRangeDatepicker.tsx

@@ -1,4 +1,6 @@
-import { differenceInCalendarDays, isSameDay, isWeekend } from "date-fns";
+import { differenceInCalendarDays } from "date-fns/differenceInCalendarDays";
+import { isSameDay } from "date-fns/isSameDay";
+import { isWeekend } from "date-fns/isWeekend";
 import React, { useState } from "react";
 import { dateMatchModifiers } from "react-day-picker";
 import { getLocaleFromString } from "../../utils/components/date/Date.locale";

@navikt/core/react/src/form/combobox/Combobox.tests.stories.tsx

@@ -11,7 +11,7 @@ export default {
     chromatic: { disable: false },
   },
   /* TODO: Temp disabled CI-tests */
-  tags: ["!play-fn", "skip-test"],
+  tags: ["skip-test"],
 } satisfies Meta<typeof UNSAFE_Combobox>;
 
 type StoryObject = StoryObj<typeof UNSAFE_Combobox>;
@@ -343,18 +343,21 @@ export const EnterNotSubmittingForm: StoryObj<{
   args: {
     onSubmit: fn(),
   },
-  render: ({ onSubmit }) => {
-    return (
-      <form action="https://www.aksel.nav.no" method="get" onSubmit={onSubmit}>
-        <UNSAFE_Combobox
-          options={options}
-          label="Hva er dine favorittfrukter?"
-          isMultiSelect
-          allowNewValues
-        />
-      </form>
-    );
-  },
+  render: ({ onSubmit }) => (
+    <form
+      onSubmit={(event) => {
+        event.preventDefault();
+        onSubmit(event);
+      }}
+    >
+      <UNSAFE_Combobox
+        options={options}
+        label="Hva er dine favorittfrukter?"
+        isMultiSelect
+        allowNewValues
+      />
+    </form>
+  ),
   play: async ({ canvasElement, args }) => {
     args.onSubmit.mockClear();
     const canvas = within(canvasElement);

@navikt/core/react/src/form/combobox/FilteredOptions/FilteredOptions.tsx

@@ -115,6 +115,7 @@ const FilteredOptions = () => {
             ref={setFilteredOptionsRef}
             // biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: The <ul> element acts as a listbox in the combobox.
             role="listbox"
+            tabIndex={-1}
             className="aksel-combobox__list-options"
           >
             {isValueNew && !maxSelected.isLimitReached && allowNewValues && (

@navikt/core/react/src/form/combobox2/Combobox.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { forwardRef } from "react";
 import { Dialog } from "../../dialog";
 import { BodyShort, ErrorMessage } from "../../typography";
 import { cl } from "../../utils/helpers";
@@ -36,109 +36,114 @@ interface ComboboxProps<
   name?: string;
 }
 
-function Combobox<
-  T extends ComboboxOptionData | ComboboxGroupData<ComboboxOptionData>,
->({
-  label,
-  hideLabel,
-  name,
-  size: sizeProp,
-  error,
-  errorId: errorIdProp,
-  disabled: disabledProp,
-  description,
-  id,
-  readOnly: readOnlyProp,
-  multiple,
-  ...rest
-}: ComboboxProps<T>) {
-  const {
-    inputProps,
-    errorId,
-    showErrorMsg,
-    hasError,
-    size,
-    inputDescriptionId,
-    readOnly,
-  } = useFormField(
+const Combobox = forwardRef(
+  <T extends ComboboxOptionData | ComboboxGroupData<ComboboxOptionData>>(
     {
-      description,
-      disabled: disabledProp,
+      label,
+      hideLabel,
+      name,
+      size: sizeProp,
       error,
       errorId: errorIdProp,
+      disabled: disabledProp,
+      description,
       id,
       readOnly: readOnlyProp,
-      size: sizeProp,
-    },
-    "combobox",
-  );
+      multiple,
+      ...rest
+    }: ComboboxProps<T>,
+    ref: React.ForwardedRef<HTMLButtonElement>,
+  ) => {
+    const {
+      inputProps,
+      errorId,
+      showErrorMsg,
+      hasError,
+      size,
+      inputDescriptionId,
+      readOnly,
+    } = useFormField(
+      {
+        description,
+        disabled: disabledProp,
+        error,
+        errorId: errorIdProp,
+        id,
+        readOnly: readOnlyProp,
+        size: sizeProp,
+      },
+      "combobox",
+    );
 
-  return (
-    <ComboboxRoot
-      size={size}
-      disabled={inputProps.disabled}
-      multiple={multiple}
-      {...rest}
-    >
-      <ComboboxLabel
-        htmlFor={inputProps.id}
-        hide={hideLabel}
-        readOnly={readOnly}
+    return (
+      <ComboboxRoot
+        size={size}
+        disabled={inputProps.disabled}
+        multiple={multiple}
+        {...rest}
       >
-        {label}
-      </ComboboxLabel>
-      {!!description && (
-        <BodyShort
-          className={cl(
-            "aksel-form-field__description aksel-combobox2__description",
-            { "aksel-sr-only": hideLabel },
-          )}
-          id={inputDescriptionId}
-          size={size}
-          as="div"
+        <ComboboxLabel
+          htmlFor={inputProps.id}
+          hide={hideLabel}
+          readOnly={readOnly}
         >
-          {description}
-        </BodyShort>
-      )}
-      <ComboboxTrigger readOnly={readOnly} {...inputProps}>
-        <ComboboxField hasError={hasError} />
-      </ComboboxTrigger>
-      <div
-        className="aksel-form-field__error aksel-combobox2__error"
-        id={errorId}
-        aria-relevant="additions removals"
-        aria-live="polite"
-      >
-        {showErrorMsg && (
-          <ErrorMessage size={size} showIcon>
-            {error}
-          </ErrorMessage>
-        )}
-      </div>
-
-      {name &&
-        rest.value.map((val) => (
-          <input key={val} type="hidden" name={name} value={val} />
-        ))}
-
-      <ComboboxOverlay
-        mobileHeader={
-          <Dialog.Header>
-            <Dialog.Title>{label}</Dialog.Title>
-            {!!description && (
-              <Dialog.Description>{description}</Dialog.Description>
+          {label}
+        </ComboboxLabel>
+        {!!description && (
+          <BodyShort
+            className={cl(
+              "aksel-form-field__description aksel-combobox2__description",
+              { "aksel-sr-only": hideLabel },
             )}
-          </Dialog.Header>
-        }
-      >
-        <ComboboxPopup>
-          <ComboboxFilter />
-          <ComboboxList />
-        </ComboboxPopup>
-      </ComboboxOverlay>
-    </ComboboxRoot>
-  );
-}
+            id={inputDescriptionId}
+            size={size}
+            as="div"
+          >
+            {description}
+          </BodyShort>
+        )}
+        <ComboboxTrigger readOnly={readOnly} {...inputProps}>
+          <ComboboxField ref={ref} hasError={hasError} />
+        </ComboboxTrigger>
+        <div
+          className="aksel-form-field__error aksel-combobox2__error"
+          id={errorId}
+          aria-relevant="additions removals"
+          aria-live="polite"
+        >
+          {showErrorMsg && (
+            <ErrorMessage size={size} showIcon>
+              {error}
+            </ErrorMessage>
+          )}
+        </div>
+
+        {name &&
+          rest.value.map((val) => (
+            <input key={val} type="hidden" name={name} value={val} />
+          ))}
+
+        <ComboboxOverlay
+          mobileHeader={
+            <Dialog.Header>
+              <Dialog.Title>{label}</Dialog.Title>
+              {!!description && (
+                <Dialog.Description>{description}</Dialog.Description>
+              )}
+            </Dialog.Header>
+          }
+        >
+          <ComboboxPopup>
+            <ComboboxFilter />
+            <ComboboxList />
+          </ComboboxPopup>
+        </ComboboxOverlay>
+      </ComboboxRoot>
+    );
+  },
+) as <T extends ComboboxOptionData | ComboboxGroupData<ComboboxOptionData>>(
+  props: ComboboxProps<T> & React.RefAttributes<HTMLButtonElement>,
+) => React.ReactElement;
 
 // ----------- ComboboxSingle ----------- //
 
@@ -149,44 +154,67 @@ interface ComboboxSingleProps<
    * Called when selected option changes.
    */
   onChange?: (
-    newValue: NonNullable<ComboboxProps<T>["value"]>[number] | undefined,
+    newValue: NonNullable<ComboboxProps<T>["value"]>[number] | null,
   ) => void;
   /**
    * Value of the selected option.
    */
-  value?: NonNullable<ComboboxProps<T>["value"]>[number];
+  value?: NonNullable<ComboboxProps<T>["value"]>[number] | null;
   /**
    * Initial value when uncontrolled.
    */
   defaultValue?: NonNullable<ComboboxProps<T>["value"]>[number];
 }
 
-function ComboboxSingle<
-  T extends ComboboxOptionData | ComboboxGroupData<ComboboxOptionData>,
->({ onChange, value, defaultValue, ...rest }: ComboboxSingleProps<T>) {
-  const [localValue, setLocalValue] = useControllableState({
-    defaultValue,
-    value,
-    onChange,
-  });
-
-  const onToggleOption: ComboboxProps<T>["onToggleOption"] = (
-    option,
-    isSelected,
+/**
+ * Component for selecting a value from a list of options that can be filtered.
+ *
+ * **WARNING: This component is in active development and may receive breaking changes outside major releases!**
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/TODO)
+ * @see 🏷️ {@link ComboboxSingleProps}
+ *
+ * @example
+ * ```jsx
+ * <ComboboxSingle
+ *   label="Select country"
+ *   name="country"
+ *   options={countries}
+ * />
+ * ```
+ */
+const ComboboxSingle = forwardRef(
+  <T extends ComboboxOptionData | ComboboxGroupData<ComboboxOptionData>>(
+    { onChange, value, defaultValue, ...rest }: ComboboxSingleProps<T>,
+    ref: React.ForwardedRef<HTMLButtonElement>,
   ) => {
-    setLocalValue(isSelected ? option.value : undefined);
-  }; // TODO: Dumt at ikke får hele option-objektet... Legge til i onChange? Hvis vi tilbyr onToggle så blir det så likt onChange...
+    const [localValue, setLocalValue] = useControllableState({
+      defaultValue,
+      value,
+      onChange,
+    });
 
-  return (
-    <Combobox
-      {...rest}
-      value={localValue ? [localValue] : []}
-      defaultValue={defaultValue ? [defaultValue] : []}
-      multiple={false}
-      onToggleOption={onToggleOption}
-    />
-  );
-}
+    const onToggleOption: ComboboxProps<T>["onToggleOption"] = (
+      option,
+      isSelected,
+    ) => {
+      setLocalValue(isSelected ? option.value : null);
+    }; // TODO: Dumt at ikke får hele option-objektet... Legge til i onChange? Hvis vi tilbyr onToggle så blir det så likt onChange...
+
+    return (
+      <Combobox
+        {...rest}
+        ref={ref}
+        value={localValue ? [localValue] : []}
+        defaultValue={defaultValue ? [defaultValue] : []}
+        multiple={false}
+        onToggleOption={onToggleOption}
+      />
+    );
+  },
+) as <T extends ComboboxOptionData | ComboboxGroupData<ComboboxOptionData>>(
+  props: ComboboxSingleProps<T> & React.RefAttributes<HTMLButtonElement>,
+) => React.ReactElement;
 
 // eslint-disable-next-line @typescript-eslint/no-namespace
 export namespace ComboboxSingle {

@navikt/core/react/src/form/combobox2/Combobox2.stories.tsx

@@ -157,7 +157,7 @@ export const Name = () => (
     onSubmit={(event) => {
       event.preventDefault();
       const formData = new FormData(event.target);
-      const land = formData.getAll("land");
+      const land = formData.get("land");
       console.log(land);
     }}
   >
@@ -168,7 +168,7 @@ export const Name = () => (
 );
 
 export const Controlled = () => {
-  const [value, setValue] = useState<MyOption["value"] | undefined>("opt-1");
+  const [value, setValue] = useState<MyOption["value"] | null>("opt-1");
 
   return (
     <VStack gap="space-8" minWidth="250px">
@@ -180,7 +180,7 @@ export const Controlled = () => {
       />
       Selected: {value}
       <div>
-        <button type="button" onClick={() => setValue(undefined)}>
+        <button type="button" onClick={() => setValue(null)}>
           Clear
         </button>
       </div>
@@ -272,6 +272,7 @@ export const Composition = () => {
           : [...prev, option.value],
       );
     },
+    multiple: true,
   };
 
   return (

@navikt/core/react/src/form/combobox2/Combobox2.tests.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta } from "@storybook/react-vite";
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { expect, userEvent, within } from "storybook/test";
 import { ComboboxSingle } from "./Combobox";
 import { ComboboxFilter } from "./filter/ComboboxFilter";
@@ -60,7 +60,7 @@ const groupedOptions = [
 function BaseCombobox<
   T extends ComboboxOptionData | ComboboxGroupData<ComboboxOptionData>,
 >(props: Partial<ComboboxSingle.Props<T>>) {
-  const [value, setValue] = useState<string | undefined>("option-1");
+  const [value, setValue] = useState<string | null>("opt-1");
 
   return (
     <ComboboxSingle
@@ -81,6 +81,27 @@ AccessibleNameAndDesc.play = async ({ canvasElement }) => {
   await expect(trigger).toHaveAccessibleDescription("Landet hvor du er født.");
 };
 
+export const FocusWithRef = () => {
+  const ref = useRef<HTMLButtonElement>(null);
+  return (
+    <div>
+      <button type="button" onClick={() => ref.current?.focus()}>
+        Fokuser combobox
+      </button>
+      <ComboboxSingle ref={ref} options={countries} label="Velg land" />
+    </div>
+  );
+};
+FocusWithRef.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const combobox = await canvas.findByRole("combobox", { name: "Velg land" });
+  await expect(combobox).not.toHaveFocus();
+  await userEvent.click(
+    canvas.getByRole("button", { name: "Fokuser combobox" }),
+  );
+  await expect(combobox).toHaveFocus();
+};
+
 let optionMemoTestRenderCnt = 0;
 const optionMemoTestRenderFn = (
   optOrGroup: (typeof groupedOptions)[number],
@@ -93,7 +114,7 @@ const optionMemoTestRenderFn = (
   return optOrGroup.label;
 };
 export const OptionMemoization = () => {
-  const [value, setValue] = useState(["option-1"]);
+  const [value, setValue] = useState(["opt-1"]);
 
   return (
     <div style={{ minHeight: "450px" }}>
@@ -105,6 +126,7 @@ export const OptionMemoization = () => {
       </div>
       <ComboboxRoot
         defaultOpen
+        multiple
         options={groupedOptions}
         value={value}
         onToggleOption={(option) => {

@navikt/core/react/src/form/combobox2/field/ComboboxField.tsx

@@ -1,6 +1,7 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, useEffect, useState } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
 import { cl } from "../../../utils/helpers";
+import { useI18n } from "../../../utils/i18n/i18n.hooks";
 import {
   type ComboboxRootProps,
   useComboboxRootContext,
@@ -14,10 +15,23 @@ interface ComboboxFieldProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
 const ComboboxField = forwardRef<HTMLButtonElement, ComboboxFieldProps>(
   ({ children, hasError, ...rest }, ref) => {
     const { options, value, size } = useComboboxRootContext();
+    const translate = useI18n("Combobox2");
 
     const labels = getLabels(value, options);
     const label =
-      children ?? (labels.length > 1 ? `${labels.length} valgt` : labels[0]);
+      children ??
+      (labels.length > 1
+        ? translate("selectedCount", { count: labels.length })
+        : labels[0]);
+
+    // Workaround for issue where VO on Safari announces the old label when focusing this button right after selecting a new option
+    const [ariaLabel, setAriaLabel] = useState<string>();
+    useEffect(() => {
+      if (label) {
+        setAriaLabel(label);
+        setTimeout(() => setAriaLabel(undefined), 100);
+      }
+    }, [label]);
 
     return (
       <div className="aksel-combobox2__field-container">
@@ -30,8 +44,7 @@ const ComboboxField = forwardRef<HTMLButtonElement, ComboboxFieldProps>(
             "aksel-body-short",
             `aksel-body-short--${size ?? "medium"}`,
           )}
-          // TODO: This results in other problems. Find another fix!
-          //aria-label={label} // Without this, VO on Safari will announce the old label when focusing this button right after selecting a new option
+          aria-label={ariaLabel}
           {...rest}
         >
           {label}

@navikt/core/react/src/form/combobox2/filter/ComboboxFilter.tsx

@@ -38,10 +38,11 @@ export const ComboboxFilter = (props: ComboboxFilterProps) => {
           }}
           onKeyDown={(event) => {
             if (["ArrowLeft", "ArrowRight"].includes(event.key)) {
-              setVirtuallyFocusedOptionValue("");
+              setVirtuallyFocusedOptionValue(""); // Assume you want to edit the input, so remove virtual focus
             }
           }}
           aria-autocomplete="list"
+          aria-expanded="true"
           inputMode="text"
         />
       </Listbox.InputSlot>

@navikt/core/react/src/form/combobox2/list/ComboboxList.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React from "react";
 import { Listbox } from "../../../utils/components/Listbox/root/ListboxRoot";
 import { useDeferredValue, useEventCallback } from "../../../utils/hooks";
 import { useI18n } from "../../../utils/i18n/i18n.hooks";
@@ -51,24 +51,16 @@ function ComboboxListContent<
 >({ children }: ComboboxListProps<T>) {
   const { virtuallyFocusedOptionValue, filterString } =
     useComboboxPopupContext();
-  const { setOpen, options, value, onToggleOption, multiple, triggerRef } =
-    useComboboxRootContext();
-  const memoizedOnToggleOption = useEventCallback(onToggleOption);
+  const {
+    options,
+    value, // Selected options
+    onToggleOption: originalOnToggleOption,
+  } = useComboboxRootContext();
+  const onToggleOption = useEventCallback(originalOnToggleOption);
   const deferredFilterString = useDeferredValue(filterString);
-  const maybeAnnouceHits = useHitsAnnouncer(deferredFilterString, filterString);
+  const maybeAnnouceHits = useHitsAnnouncer(deferredFilterString);
   const translate = useI18n("Combobox2");
 
-  const localOnToggleOption = useCallback(
-    (option: ComboboxOptionData, isSelected: boolean) => {
-      memoizedOnToggleOption(option, isSelected);
-      if (!multiple) {
-        setOpen(false);
-        triggerRef.current?.focus();
-      }
-    },
-    [memoizedOnToggleOption, multiple, triggerRef, setOpen],
-  );
-
   if (children && typeof children !== "function") {
     return children;
   }
@@ -80,6 +72,7 @@ function ComboboxListContent<
   maybeAnnouceHits(filteredOptions);
 
   if (filteredOptions.length === 0) {
+    // TODO: Consider moving outside of role=listbox
     return (
       <div className="aksel-combobox2__no-results">{translate("noHits")}</div>
     );
@@ -96,7 +89,7 @@ function ComboboxListContent<
           <ComboboxOption
             key={option.value}
             option={option}
-            onToggleOption={localOnToggleOption}
+            onToggleOption={onToggleOption}
             isSelected={value.includes(option.value)}
             hasVirtualFocus={virtuallyFocusedOptionValue === option.value}
             highlightText={deferredFilterString}
@@ -109,7 +102,7 @@ function ComboboxListContent<
       <ComboboxOption
         key={optOrGroup.value}
         option={optOrGroup}
-        onToggleOption={localOnToggleOption}
+        onToggleOption={onToggleOption}
         isSelected={value.includes(optOrGroup.value)}
         hasVirtualFocus={virtuallyFocusedOptionValue === optOrGroup.value}
         highlightText={deferredFilterString} // TODO: Vurder å kunne slå av dette for bedre ytelse
@@ -125,26 +118,27 @@ function filterOptions<T extends ComboboxOptionData>(
   filterString: string,
 ): (T | ComboboxGroupData<T>)[] {
   const filterStringLowerCase = filterString.toLocaleLowerCase();
+  const results: (T | ComboboxGroupData<T>)[] = [];
 
-  return options
-    .map((optOrGroup) => {
-      if ("options" in optOrGroup) {
-        const matchingOptions = optOrGroup.options.filter((option) =>
-          option.label.toLocaleLowerCase().includes(filterStringLowerCase),
-        );
-        if (matchingOptions.length > 0) {
-          return { ...optOrGroup, options: matchingOptions };
+  for (const optOrGroup of options) {
+    if ("options" in optOrGroup) {
+      const matchingOptions: T[] = [];
+      for (const option of optOrGroup.options) {
+        if (option.label.toLocaleLowerCase().includes(filterStringLowerCase)) {
+          matchingOptions.push(option);
         }
-        return null;
       }
-      if (
-        optOrGroup.label.toLocaleLowerCase().includes(filterStringLowerCase)
-      ) {
-        return optOrGroup;
+      if (matchingOptions.length > 0) {
+        results.push({ ...optOrGroup, options: matchingOptions });
       }
-      return null;
-    })
-    .filter((option): option is T | ComboboxGroupData<T> => option !== null);
+    } else if (
+      optOrGroup.label.toLocaleLowerCase().includes(filterStringLowerCase)
+    ) {
+      results.push(optOrGroup);
+    }
+  }
+
+  return results;
 }
 
 export type { ComboboxListProps };

@navikt/core/react/src/form/combobox2/list/useAnnounce.ts

@@ -91,7 +91,7 @@ function announce(message: string, politeness: Politeness = "polite") {
 }
 
 /**
- * Speaks a message through a persistently-mounted, visually-hidden live region.
+ * Announces a message through a persistently-mounted, visually-hidden live region.
  *
  * The polite and assertive regions are created once and kept mounted.
  *

@navikt/core/react/src/form/combobox2/list/useHitsAnnouncer.ts

@@ -18,9 +18,9 @@ function getNumberOfOptions<T extends ComboboxOptionData>(
   }, 0);
 }
 
-function useHitsAnnouncer(deferredFilterString: string, filterString: string) {
+function useHitsAnnouncer(deferredFilterString: string) {
   const translate = useI18n("Combobox2");
-  const shouldAnnounceRef = useRef(false);
+  const oldFilterStringRef = useRef(deferredFilterString);
   const announce = useAnnounce();
 
   const announceHits = useMemo(() => {
@@ -50,20 +50,20 @@ function useHitsAnnouncer(deferredFilterString: string, filterString: string) {
       ComboboxOptionData | ComboboxGroupData<ComboboxOptionData>
     )[],
   ) => {
-    // The options are filtered based on deferredFilterString, so we need to wait for it to settle.
-    if (deferredFilterString !== filterString) {
-      shouldAnnounceRef.current = true;
-    } else if (shouldAnnounceRef.current) {
-      if (filteredOptions.length === 0) {
-        announceHits.clear();
-        announceNoHits();
-      } else {
-        const hits = getNumberOfOptions(filteredOptions);
-        announceNoHits.clear();
-        announceHits(hits);
-      }
-      shouldAnnounceRef.current = false;
+    // Announce number of hits when filter string changes.
+    // We can't do this in a useEffect b.c. of how ComboboxList is structured. Consider refactoring.
+    if (deferredFilterString === oldFilterStringRef.current) {
+      return;
     }
+    if (filteredOptions.length === 0) {
+      announceHits.clear();
+      announceNoHits();
+    } else {
+      const hits = getNumberOfOptions(filteredOptions);
+      announceNoHits.clear();
+      announceHits(hits);
+    }
+    oldFilterStringRef.current = deferredFilterString;
   };
 }