fix(Combobox2): fix test

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[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/lean-roots-shake.md

@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": patch
+"@navikt/aksel-icons": patch
+---
+
+ESM: Mark ESM output as side-effect free, so bundlers like webpack, Turbopack and esbuild can tree-shake unused components and icons.

.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/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/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.
@@ -39,7 +38,7 @@
 
 ## 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.
 
@@ -70,6 +69,7 @@ Path-specific rules load automatically from `.github/instructions/` (see each `a
 
 - `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/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

@@ -10,6 +10,11 @@ applyTo: "**/*.test.ts,**/*.test.tsx,**/*.stories.tsx"
 - 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.

.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/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.

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/aksel-icons
 
+## 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-icons",
-  "version": "8.20.1",
+  "version": "8.21.0",
   "author": "Aksel | Nav",
   "homepage": "https://aksel.nav.no/ikoner",
   "repository": {
@@ -64,7 +64,7 @@
     "parse-svg": "node -e 'require(\"./config/parse-svg.js\").main()'",
     "copy": "copyfiles util/* src",
     "update-metadata": "node config/metadata.js",
-    "write-packagejson": "echo '{\"type\": \"module\"}' > dist/react/esm/package.json",
+    "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",
     "fetch-new:icons": "tsx --env-file=.env config/figma/index.ts",
     "zip:icons": "node config/zip.js",

@navikt/aksel-stylelint/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/aksel-stylelint
 
+## 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.21.0",
   "type": "module",
   "engines": {
     "node": ">=18.12.0"
@@ -43,8 +43,8 @@
     "dev": "yarn watch:lint"
   },
   "devDependencies": {
-    "@navikt/ds-css": "^8.20.1",
-    "@navikt/ds-tokens": "^8.20.1",
+    "@navikt/ds-css": "^8.21.0",
+    "@navikt/ds-tokens": "^8.21.0",
     "concurrently": "10.0.6",
     "postcss-selector-parser": "^7.1.7",
     "postcss-value-parser": "^4.2.0",

@navikt/aksel/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/aksel
 
+## 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.21.0",
   "description": "Aksel command line interface. Codemods and other utilities for Aksel users.",
   "author": "Aksel | Nav designsystem team",
   "license": "MIT",

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @navikt/ds-css
 
+## 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.21.0",
   "description": "CSS for Nav Designsystem",
   "author": "Aksel | Nav designsystem team",
   "keywords": [
@@ -32,7 +32,7 @@
     "css:get-version": "node config/get-version.js"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^8.20.1",
+    "@navikt/ds-tokens": "^8.21.0",
     "browserslist": "^4.28.7",
     "esbuild": "^0.28.2",
     "fast-glob": "3.3.3",

@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,21 @@
 # @navikt/ds-react
 
+## 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.21.0",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -775,7 +775,7 @@
     "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",
@@ -788,8 +788,8 @@
   "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.21.0",
+    "@navikt/ds-tokens": "^8.21.0",
     "date-fns": "^4.0.0",
     "react-day-picker": "10.0.2"
   },

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

@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" }}>

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

@@ -1,6 +1,7 @@
 import React, { forwardRef } 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,14 @@ 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]);
 
     return (
       <div className="aksel-combobox2__field-container">

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

@@ -42,6 +42,7 @@ export const ComboboxFilter = (props: ComboboxFilterProps) => {
             }
           }}
           aria-autocomplete="list"
+          aria-expanded="true"
           inputMode="text"
         />
       </Listbox.InputSlot>

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

@@ -55,7 +55,7 @@ function ComboboxListContent<
     useComboboxRootContext();
   const memoizedOnToggleOption = useEventCallback(onToggleOption);
   const deferredFilterString = useDeferredValue(filterString);
-  const maybeAnnouceHits = useHitsAnnouncer(deferredFilterString, filterString);
+  const maybeAnnouceHits = useHitsAnnouncer(deferredFilterString);
   const translate = useI18n("Combobox2");
 
   const localOnToggleOption = useCallback(
@@ -80,6 +80,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>
     );

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

@navikt/core/react/src/form/combobox2/option/ComboboxOption.tsx

@@ -3,6 +3,7 @@ import { CheckmarkHeavyIcon } from "@navikt/aksel-icons";
 import { Listbox } from "../../../utils/components/Listbox/root/ListboxRoot";
 import type { ComboboxListProps } from "../list/ComboboxList";
 import type { ComboboxOptionData } from "../root/ComboboxRoot";
+import { highlightSubstring } from "./highlightSubstring";
 
 export interface ComboboxOptionProps<T extends ComboboxOptionData> {
   option: T;
@@ -49,31 +50,6 @@ function ComboboxOptionComponent<T extends ComboboxOptionData>({
   );
 }
 
-const highlightSubstring = (text: string, substring: string) => {
-  const indexOfHighlightedText = text
-    .toLocaleLowerCase()
-    .indexOf(substring.toLocaleLowerCase());
-  if (indexOfHighlightedText === -1) {
-    // This can happen if the consumer has implemented their own filtering logic
-    return text;
-  }
-  const start = text.substring(0, indexOfHighlightedText);
-  const highlight = text.substring(
-    indexOfHighlightedText,
-    indexOfHighlightedText + substring.length,
-  );
-  const end = text.substring(indexOfHighlightedText + substring.length);
-  return (
-    // Aria-label is used to fix testing-library wrongly evaluating the accessible name of the option when highlighting text
-    // biome-ignore lint/a11y/useAriaPropsSupportedByRole: Doesn't matter if aria-label doesn't work
-    <span aria-label={text}>
-      {start}
-      {highlight && <mark>{highlight}</mark>}
-      {end}
-    </span>
-  );
-};
-
 export const ComboboxOption = React.memo(
   ComboboxOptionComponent,
 ) as typeof ComboboxOptionComponent;

@navikt/core/react/src/form/combobox2/option/highlightSubstring.test.tsx

@@ -0,0 +1,27 @@
+import { describe, expect, test } from "vitest";
+import { getHighlightRange } from "./highlightSubstring";
+
+const highlighted = (text: string, substring: string) => {
+  const range = getHighlightRange(text, substring);
+  return range && text.substring(...range);
+};
+
+describe("getHighlightRange", () => {
+  test("matches case-insensitively", () => {
+    expect(getHighlightRange("Norge", "OR")).toEqual([1, 3]);
+  });
+
+  test("returns null when there is no match", () => {
+    expect(getHighlightRange("Norge", "x")).toBeUndefined();
+  });
+
+  test("handles characters that get longer when lowercased", () => {
+    expect(highlighted("İstanbul", "an")).toBe("an");
+    expect(highlighted("İzmir og Antalya", "an")).toBe("An");
+    expect(highlighted("İzmir", "İz")).toBe("İz");
+  });
+
+  test("includes the whole original character when only part of its lowercase form matches", () => {
+    expect(highlighted("İstanbul", "i")).toBe("İ");
+  });
+});

@navikt/core/react/src/form/combobox2/option/highlightSubstring.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+
+function highlightSubstring(text: string, substring: string) {
+  const range = getHighlightRange(text, substring);
+  if (!range) {
+    // This can happen if the consumer has implemented their own filtering logic
+    return text;
+  }
+  const [rangeStart, rangeEnd] = range;
+  return (
+    // Aria-label is used to fix testing-library wrongly evaluating the accessible name of the option when highlighting text
+    // biome-ignore lint/a11y/useAriaPropsSupportedByRole: Doesn't matter if it doesn't work in normal browsers
+    <span aria-label={text}>
+      {text.substring(0, rangeStart)}
+      <mark>{text.substring(rangeStart, rangeEnd)}</mark>
+      {text.substring(rangeEnd)}
+    </span>
+  );
+}
+
+/**
+ * Finds the first case-insensitive occurrence of `substring` in `text`.
+ * Handles characters whose lowercase form has a different length than the original (e.g. "İ").
+ * @returns The `[start, end]` range of the match in `text`, or `undefined` if there is no match.
+ */
+function getHighlightRange(text: string, substring: string) {
+  const lowerSubstring = substring.toLocaleLowerCase();
+  const matchIndex = text.toLocaleLowerCase().indexOf(lowerSubstring);
+  if (matchIndex === -1) {
+    return;
+  }
+
+  const matchEnd = matchIndex + lowerSubstring.length;
+  let start = 0;
+  let origPos = 0;
+  let lowerPos = 0;
+
+  for (const char of text) {
+    if (lowerPos <= matchIndex) {
+      start = origPos;
+    }
+    origPos += char.length;
+    lowerPos += char.toLocaleLowerCase().length;
+    if (lowerPos >= matchEnd) {
+      return [start, origPos] as const;
+    }
+  }
+}
+
+export { highlightSubstring, getHighlightRange };

@navikt/core/react/src/form/combobox2/popup/ComboboxPopup.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useLayoutEffect, useRef, useState } from "react";
 import { Listbox } from "../../../utils/components/Listbox/root/ListboxRoot";
 import { createStrictContext } from "../../../utils/helpers";
 import { useComboboxRootContext } from "../root/ComboboxRoot";
@@ -29,7 +29,7 @@ export const ComboboxPopup = ({ children }: ComboboxPopupProps) => {
   const rootContext = useComboboxRootContext();
   const ref = useRef<HTMLDivElement | null>(null);
 
-  useEffect(
+  useLayoutEffect(
     function onOpen() {
       const canHover = window.matchMedia("(hover: hover)").matches;
 

@navikt/core/react/src/utils/components/Listbox/options/ListboxOptions.tsx

@@ -39,4 +39,12 @@ function ListboxOptions({ children, ...rest }: ListboxOptionsProps) {
   );
 }
 
+/**
+ * TODO: Things that should be fixed before we allow focus directly
+ * on the listbox (i.e. when there's no filter input/combobox elm.)
+ * - Set aria-activedescendant
+ * - Consider aria-multiselectable
+ * - Probably aria-label(ledby)?
+ */
+
 export { ListboxOptions };

@navikt/core/react/src/utils/i18n/i18n.internal.ts

@@ -5,6 +5,8 @@ const internalTranslations = {
     selected: "{count} rows selected",
   },
   Combobox2: {
+    /** The "value" that is shown when multiple options are selected. */
+    selectedCount: "{count} valgt",
     /** Label for filter input. Only visible to screen readers. */
     filter: "Filtrer",
     noHits: "Ingen treff",

@navikt/core/tailwind/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-tailwind
 
+## 8.21.0
+
 ## 8.20.1
 
 ## 8.20.0

@navikt/core/tailwind/package.json

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

@navikt/core/tokens/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-tokens
 
+## 8.21.0
+
 ## 8.20.1
 
 ## 8.20.0

@navikt/core/tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tokens",
-  "version": "8.20.1",
+  "version": "8.21.0",
   "description": "Design-tokens for Nav designsystem",
   "author": "Aksel | Nav designsystem team",
   "keywords": [

CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 8.21.0
+
+### @navikt/aksel-icons
+
+- Icons: Add 46 icons for text editing, tables, keyboard input, and filtering. ([#5458](https://github.com/navikt/aksel/pull/5458))
+
+### @navikt/ds-css
+
+- DataGrid: Add top and bottom content areas outside the table's scrollable viewport. ([#5442](https://github.com/navikt/aksel/pull/5442))
+
+* DataTable: Constrain details panel width to the visible table area. ([#5433](https://github.com/navikt/aksel/pull/5433))
+
+### @navikt/ds-react
+
+- DataGrid: Add top and bottom content areas outside the table's scrollable viewport. ([#5442](https://github.com/navikt/aksel/pull/5442))
+
+* 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))
+
 ## 8.20.1
 
 ### @navikt/ds-css

aksel.nav.no/package.json

@@ -11,11 +11,11 @@
     "sanity:update": "yarn workspace website update:sanity"
   },
   "dependencies": {
-    "@navikt/aksel": "^8.20.1",
-    "@navikt/aksel-icons": "^8.20.1",
-    "@navikt/ds-css": "^8.20.1",
-    "@navikt/ds-react": "^8.20.1",
-    "@navikt/ds-tailwind": "^8.20.1",
-    "@navikt/ds-tokens": "^8.20.1"
+    "@navikt/aksel": "^8.21.0",
+    "@navikt/aksel-icons": "^8.21.0",
+    "@navikt/ds-css": "^8.21.0",
+    "@navikt/ds-react": "^8.21.0",
+    "@navikt/ds-tailwind": "^8.21.0",
+    "@navikt/ds-tokens": "^8.21.0"
   }
 }

aksel.nav.no/website/app/(routes)/(designsystemet)/grunnleggende/styling/design-tokens/_ui/toolbar/SearchField.utils.ts

@@ -1,27 +1,33 @@
 import Fuse from "fuse.js";
 import { type TokenDocT, tokens } from "@navikt/ds-tokens/token_docs";
 
-function tokenIndex(_tokens: TokenDocT[]) {
-  return new Fuse(_tokens, {
-    threshold: 0.25,
-    keys: [
-      { name: "name", weight: 0.9 },
-      { name: "group", weight: 0.3 },
-      { name: "category", weight: 0.7 },
-      { name: "categoryTitle", weight: 0.7 },
-      { name: "comment", weight: 0.3 },
-      { name: "type", weight: 0.7 },
-      { name: "role", weight: 0.7 },
-      { name: "modifier", weight: 0.7 },
-    ],
-    //shouldSort: false,
-    ignoreLocation: true,
-  });
+let tokenSearchIndex: Fuse<TokenDocT> | undefined;
+
+function getTokenSearchIndex() {
+  if (!tokenSearchIndex) {
+    tokenSearchIndex = new Fuse(tokens, {
+      threshold: 0.25,
+      keys: [
+        { name: "name", weight: 0.9 },
+        { name: "group", weight: 0.3 },
+        { name: "category", weight: 0.7 },
+        { name: "categoryTitle", weight: 0.7 },
+        { name: "comment", weight: 0.3 },
+        { name: "type", weight: 0.7 },
+        { name: "role", weight: 0.7 },
+        { name: "modifier", weight: 0.7 },
+      ],
+      //shouldSort: false,
+      ignoreLocation: true,
+    });
+  }
+
+  return tokenSearchIndex;
 }
 
 function searchTokens(query: string): TokenDocT[] {
   return query
-    ? tokenIndex(tokens)
+    ? getTokenSearchIndex()
         .search(query)
         .map((t) => t.item)
     : tokens;

aksel.nav.no/website/app/_ui/global-search/server/GlobalSearch.search.ts

@@ -36,32 +36,41 @@ async function globalSearch(
   }
 
   const fuse = await getSearchIndex();
-  const fuseResults = fuse
-    .search(query)
-    .filter((x) => x.score !== undefined && x.score < 0.3)
-    .sort((a, b) => Number(isOverrideHit(b)) - Number(isOverrideHit(a)));
+  const overrideResults: FuseResult<SearchPageT>[] = [];
+  const regularResults: FuseResult<SearchPageT>[] = [];
+  let totalHits = 0;
 
-  const topResults =
-    fuseResults.length > MAX_TOP_RESULTS
-      ? fuseResults
-          .filter((x) => x.score !== undefined && x.score < 0.1)
-          .slice(0, MAX_TOP_RESULTS)
-      : [];
-  const topResultSet = new Set(topResults);
-
-  const groups = new Map<SearchResultPageTypesT, SearchHitGroupT>();
-  for (const result of fuseResults) {
-    if (topResultSet.has(result)) {
+  for (const result of fuse.search(query)) {
+    if (result.score === undefined || result.score >= 0.3) {
       continue;
     }
 
-    const type = result.item._type;
-    const group = groups.get(type) ?? { type, total: 0, hits: [] };
-    groups.set(type, group);
+    totalHits++;
+    (isOverrideHit(result) ? overrideResults : regularResults).push(result);
+  }
 
-    group.total++;
-    if (group.hits.length < MAX_HITS_PER_TYPE) {
-      group.hits.push(toSearchHit(result));
+  const groups = new Map<SearchResultPageTypesT, SearchHitGroupT>();
+  const topResults: SearchHitT[] = [];
+  for (const rankedResults of [overrideResults, regularResults]) {
+    for (const result of rankedResults) {
+      if (
+        totalHits > MAX_TOP_RESULTS &&
+        topResults.length < MAX_TOP_RESULTS &&
+        result.score !== undefined &&
+        result.score < 0.1
+      ) {
+        topResults.push(toSearchHit(result));
+        continue;
+      }
+
+      const type = result.item._type;
+      const group = groups.get(type) ?? { type, total: 0, hits: [] };
+      groups.set(type, group);
+
+      group.total++;
+      if (group.hits.length < MAX_HITS_PER_TYPE) {
+        group.hits.push(toSearchHit(result));
+      }
     }
   }
 
@@ -72,8 +81,8 @@ async function globalSearch(
 
   return {
     result: {
-      totalHits: fuseResults.length,
-      topResults: topResults.map(toSearchHit),
+      totalHits,
+      topResults,
       groupedHits,
     },
     query,

apps/figma-icon-plugin/package.json

@@ -11,9 +11,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@navikt/aksel-icons": "^8.20.1",
-    "@navikt/ds-css": "^8.20.1",
-    "@navikt/ds-react": "^8.20.1",
+    "@navikt/aksel-icons": "^8.21.0",
+    "@navikt/ds-css": "^8.21.0",
+    "@navikt/ds-react": "^8.21.0",
     "fuse.js": "7.4.2",
     "react": "19.3.1",
     "react-dom": "19.3.1"

apps/mcp-server/package.json

@@ -19,9 +19,9 @@
   "devDependencies": {
     "@modelcontextprotocol/inspector": "^2.11.0",
     "@modelcontextprotocol/sdk": "^1.32.0",
-    "@navikt/aksel": "^8.20.1",
-    "@navikt/aksel-icons": "^8.20.1",
-    "@navikt/ds-tokens": "^8.20.1",
+    "@navikt/aksel": "^8.21.0",
+    "@navikt/aksel-icons": "^8.21.0",
+    "@navikt/ds-tokens": "^8.21.0",
     "@sanity/client": "7.27.0",
     "@types/express": "^5.0.3",
     "@types/node": "^24.10.9",

apps/playroom/package.json

@@ -20,9 +20,9 @@
     "typescript": "6.0.3"
   },
   "dependencies": {
-    "@navikt/aksel-icons": "^8.20.1",
-    "@navikt/ds-css": "^8.20.1",
-    "@navikt/ds-react": "^8.20.1",
+    "@navikt/aksel-icons": "^8.21.0",
+    "@navikt/ds-css": "^8.21.0",
+    "@navikt/ds-react": "^8.21.0",
     "react": "19.3.1"
   }
 }

yarn.lock

@@ -4880,7 +4880,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/aksel-icons@npm:^8.20.1, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
+"@navikt/aksel-icons@npm:^8.21.0, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
   version: 0.0.0-use.local
   resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons"
   dependencies:
@@ -4911,8 +4911,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@navikt/aksel-stylelint@workspace:@navikt/aksel-stylelint"
   dependencies:
-    "@navikt/ds-css": "npm:^8.20.1"
-    "@navikt/ds-tokens": "npm:^8.20.1"
+    "@navikt/ds-css": "npm:^8.21.0"
+    "@navikt/ds-tokens": "npm:^8.21.0"
     concurrently: "npm:10.0.6"
     postcss-selector-parser: "npm:^7.1.7"
     postcss-value-parser: "npm:^4.2.0"
@@ -4923,7 +4923,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/aksel@npm:^8.20.1, @navikt/aksel@workspace:@navikt/aksel":
+"@navikt/aksel@npm:^8.21.0, @navikt/aksel@workspace:@navikt/aksel":
   version: 0.0.0-use.local
   resolution: "@navikt/aksel@workspace:@navikt/aksel"
   dependencies:
@@ -4956,11 +4956,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/ds-css@npm:^8.20.1, @navikt/ds-css@workspace:@navikt/core/css":
+"@navikt/ds-css@npm:^8.21.0, @navikt/ds-css@workspace:@navikt/core/css":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-css@workspace:@navikt/core/css"
   dependencies:
-    "@navikt/ds-tokens": "npm:^8.20.1"
+    "@navikt/ds-tokens": "npm:^8.21.0"
     browserslist: "npm:^4.28.7"
     esbuild: "npm:^0.28.2"
     fast-glob: "npm:3.3.3"
@@ -4969,14 +4969,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-react@npm:^8.20.1, @navikt/ds-react@workspace:@navikt/core/react":
+"@navikt/ds-react@npm:^8.21.0, @navikt/ds-react@workspace:@navikt/core/react":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-react@workspace:@navikt/core/react"
   dependencies:
     "@floating-ui/react": "npm:0.27.20"
     "@floating-ui/react-dom": "npm:^2.1.9"
-    "@navikt/aksel-icons": "npm:^8.20.1"
-    "@navikt/ds-tokens": "npm:^8.20.1"
+    "@navikt/aksel-icons": "npm:^8.21.0"
+    "@navikt/ds-tokens": "npm:^8.21.0"
     "@testing-library/dom": "npm:10.4.2"
     "@testing-library/jest-dom": "npm:^7.0.1"
     "@testing-library/react": "npm:^16.3.3"
@@ -5010,11 +5010,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tailwind@npm:^8.20.1, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
+"@navikt/ds-tailwind@npm:^8.21.0, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind"
   dependencies:
-    "@navikt/ds-tokens": "npm:^8.20.1"
+    "@navikt/ds-tokens": "npm:^8.21.0"
     "@types/node": "npm:^24.10.9"
     tailwindcss: "npm:^3.3.3"
     tsx: "npm:^4.23.15"
@@ -5023,7 +5023,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tokens@npm:^8.20.1, @navikt/ds-tokens@workspace:@navikt/core/tokens":
+"@navikt/ds-tokens@npm:^8.21.0, @navikt/ds-tokens@workspace:@navikt/core/tokens":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
   dependencies:
@@ -9761,9 +9761,9 @@ __metadata:
   resolution: "aksel-icons-figma-plugin@workspace:apps/figma-icon-plugin"
   dependencies:
     "@figma/plugin-typings": "npm:^1.131.0"
-    "@navikt/aksel-icons": "npm:^8.20.1"
-    "@navikt/ds-css": "npm:^8.20.1"
-    "@navikt/ds-react": "npm:^8.20.1"
+    "@navikt/aksel-icons": "npm:^8.21.0"
+    "@navikt/ds-css": "npm:^8.21.0"
+    "@navikt/ds-react": "npm:^8.21.0"
     "@rollup/pluginutils": "npm:^5.4.0"
     "@svgr/core": "npm:^8.1.0"
     "@types/node": "npm:^24.10.9"
@@ -9785,9 +9785,9 @@ __metadata:
   dependencies:
     "@modelcontextprotocol/inspector": "npm:^2.11.0"
     "@modelcontextprotocol/sdk": "npm:^1.32.0"
-    "@navikt/aksel": "npm:^8.20.1"
-    "@navikt/aksel-icons": "npm:^8.20.1"
-    "@navikt/ds-tokens": "npm:^8.20.1"
+    "@navikt/aksel": "npm:^8.21.0"
+    "@navikt/aksel-icons": "npm:^8.21.0"
+    "@navikt/ds-tokens": "npm:^8.21.0"
     "@sanity/client": "npm:7.27.0"
     "@types/express": "npm:^5.0.3"
     "@types/node": "npm:^24.10.9"
@@ -9809,9 +9809,9 @@ __metadata:
     "@babel/preset-env": "npm:^7.29.0"
     "@babel/preset-react": "npm:^7.28.5"
     "@babel/preset-typescript": "npm:^7.28.5"
-    "@navikt/aksel-icons": "npm:^8.20.1"
-    "@navikt/ds-css": "npm:^8.20.1"
-    "@navikt/ds-react": "npm:^8.20.1"
+    "@navikt/aksel-icons": "npm:^8.21.0"
+    "@navikt/ds-css": "npm:^8.21.0"
+    "@navikt/ds-react": "npm:^8.21.0"
     "@types/node": "npm:^24.10.9"
     babel-loader: "npm:^10.1.1"
     playroom: "npm:^1.4.0"
@@ -9873,12 +9873,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "aksel.nav.no@workspace:aksel.nav.no"
   dependencies:
-    "@navikt/aksel": "npm:^8.20.1"
-    "@navikt/aksel-icons": "npm:^8.20.1"
-    "@navikt/ds-css": "npm:^8.20.1"
-    "@navikt/ds-react": "npm:^8.20.1"
-    "@navikt/ds-tailwind": "npm:^8.20.1"
-    "@navikt/ds-tokens": "npm:^8.20.1"
+    "@navikt/aksel": "npm:^8.21.0"
+    "@navikt/aksel-icons": "npm:^8.21.0"
+    "@navikt/ds-css": "npm:^8.21.0"
+    "@navikt/ds-react": "npm:^8.21.0"
+    "@navikt/ds-tailwind": "npm:^8.21.0"
+    "@navikt/ds-tokens": "npm:^8.21.0"
   languageName: unknown
   linkType: soft
 
@@ -10696,25 +10696,25 @@ __metadata:
   linkType: hard
 
 "body-parser@npm:^2.2.1":
-  version: 2.3.0
-  resolution: "body-parser@npm:2.3.0"
+  version: 2.4.0
+  resolution: "body-parser@npm:2.4.0"
   dependencies:
     bytes: "npm:^3.1.2"
-    content-type: "npm:^2.0.0"
+    content-type: "npm:^2.1.0"
     debug: "npm:^4.4.3"
     http-errors: "npm:^2.0.1"
-    iconv-lite: "npm:^0.7.2"
+    iconv-lite: "npm:^0.7.3"
     on-finished: "npm:^2.4.1"
-    qs: "npm:^6.15.2"
+    qs: "npm:^6.16.1"
     raw-body: "npm:^3.0.2"
     type-is: "npm:^2.1.0"
-  checksum: 10/94f741ff525358dd0d47f0a042936dc61b9d2e348ff1228c5ffd79f1902c673a317bbb9495b3f7d1db4483befe6ffed1c42bc4cdd8da8f41690530810cfe4dad
+  checksum: 10/e34971abf7051529d4fae37d3714382e7fa8198bc969f1ec4932af48aef53bba71523545c034ce04fa808d3b15e0d63849e6e93b4f1131d65227e1f414437f68
   languageName: node
   linkType: hard
 
 "body-parser@npm:~1.20.5":
-  version: 1.20.8
-  resolution: "body-parser@npm:1.20.8"
+  version: 1.20.9
+  resolution: "body-parser@npm:1.20.9"
   dependencies:
     bytes: "npm:~3.1.2"
     content-type: "npm:~1.0.5"
@@ -10728,7 +10728,7 @@ __metadata:
     raw-body: "npm:~2.5.3"
     type-is: "npm:~1.6.18"
     unpipe: "npm:~1.0.0"
-  checksum: 10/e5a13ff68066a49823403f93ffe056611d9696182e6de194cd1a3c5b2159457494d4133b4666bad591d7a5a6eb924dd34dd15c83aa2d11c63800ed4d2395b5eb
+  checksum: 10/e9ccf7a920205d674a83cdfae0e83ed3cfe32af668706034e9832a8bf3b80f06fbc18a7c26759611f72d334311683a4b1ff73661690038a352e8c3b4a424b709
   languageName: node
   linkType: hard
 
@@ -15440,7 +15440,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"iconv-lite@npm:^0.7.0, iconv-lite@npm:^0.7.2, iconv-lite@npm:~0.7.0":
+"iconv-lite@npm:^0.7.0, iconv-lite@npm:^0.7.2, iconv-lite@npm:^0.7.3, iconv-lite@npm:~0.7.0":
   version: 0.7.3
   resolution: "iconv-lite@npm:0.7.3"
   dependencies:
@@ -20419,7 +20419,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"qs@npm:^6.12.3, qs@npm:^6.14.0, qs@npm:^6.15.2, qs@npm:~6.15.1":
+"qs@npm:^6.12.3, qs@npm:^6.14.0, qs@npm:~6.15.1":
   version: 6.15.3
   resolution: "qs@npm:6.15.3"
   dependencies:
@@ -20429,7 +20429,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"qs@npm:~6.16.0":
+"qs@npm:^6.16.1, qs@npm:~6.16.0":
   version: 6.16.1
   resolution: "qs@npm:6.16.1"
   dependencies: