refactor(core): tsdown test 1

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

.changeset/busy-bars-own.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Internal: Optimized rendering of `asChild`-components

.changeset/config.json

@@ -25,7 +25,8 @@
     "aksel-icons-figma-plugin",
     "eslint-plugin-aksel-local",
     "scripts",
-    "aksel-analyzer"
+    "aksel-analyzer",
+    "aksel-mcp"
   ],
 
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {

.changeset/upset-taxis-dig.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+DataGrid: Auto-scale column-width based on document font-size

.github/PULL_REQUEST_TEMPLATE.md

@@ -8,7 +8,6 @@
 - [ ] Examples
 - [ ] Documentation / Decision Records
 - [ ] Storybook
-- [ ] Style mappings (`@navikt/core/css/config/_mappings.js`)
 - [ ] CSS class deprecations (`@navikt/aksel-stylelint/src/deprecations.ts`)
 - [ ] Exports (`@navikt/core/react/src/index.ts` and `@navikt/core/react/package.json`)
 - [ ] New component? CSS import (`@navikt/core/css/index.css`)

.github/copilot-instructions.md

@@ -1,43 +1,27 @@
 # Aksel - Copilot Instructions
 
-## Use this file first
+## Approach
 
-- Trust these instructions to narrow the search space, but still read the target code and nearest related files before editing.
-- Optimize for local work. Prefer known paths, nearby patterns, and existing scripts over broad repo searches.
-- Ignore release, deploy, changelog, CMS sync, and other remote/ops scripts unless the user asks.
+- Narrow search space; don't replace reading code.
+- Before editing: read target file + nearest related files (`index.ts`, story, test, exports).
+- Prefer known paths/scripts over broad searches.
+- Ignore release/deploy/changelog/ops scripts unless asked.
 
-## How to use this file
+## Behavior
 
-- Use this file to narrow the search space, not to replace reading code.
-- Before editing, read the target file and the nearest related files in the same folder such as `index.ts`, story, test, and package/root export files.
-- Search wider only when nearby files do not answer the question.
-
-## Agent mode
-
-- No apologies, no “I think”, no change summaries.
-- Don’t ask to confirm info that’s already in context.
-- Favor performance and security; add robust error handling and safe logging.
-- Default tone: short and answer-first. Aim for max 0–2 concise sentences where needed.
-- Thinking and explanation process: Keep it short, omit whats not strictly necessary, and focus on the next edit.
-- Avoid long explanations or multiple steps at once.
-- Don't explain thinking process for each step, just do the next edit. Only add explanations when the user explicitly asks for it or when it's necessary to clarify a non-obvious change.
-
-## Inline chat and editor completions
-
-- Verify before you claim. Don’t speculate.
-- Keep functions small and focused; remove duplication (rule of three).
-- Show only what changes. Provide minimal diffs/snippets; don’t paste whole files or unrelated lines.
-- Keep edits scoped to a single file unless explicitly asked to touch more.
-- Extract requirements into a tiny checklist and proceed. Ask a question only when truly blocked.
-- Avoid heavy formatting: bullets are OK; skip tables; use code fences only for code.
-- For performance/security: avoid unnecessary re-renders, side effects at module top-level, unsafe HTML, and leaking env vars.
+- 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.
+- Show only what changes. Minimal diffs; don't paste whole files.
+- Edits scoped to one file unless asked. Ask only when truly blocked.
+- Favor perf/security; avoid re-renders, top-level side effects, unsafe HTML, env var leaks.
 
 ## Repo summary
 
-- Large Yarn 4 workspaces monorepo for NAV's design system: public React/CSS/tokens/icons/stylelint/CLI packages plus docs site and playroom.
+- Yarn 4 workspaces monorepo: public React/CSS/tokens/icons/stylelint/CLI packages + docs site + playroom.
 - Stack: TypeScript 6, React 19, Next.js 16, Storybook 10, Vitest 4, ESLint 9, Stylelint 17, Biome 2, Prettier 3.
-- Runtime: Node 22+ recommended, Yarn 4.12.0.
-- Important constraint: code under `@navikt/*` must stay React 17 API compatible. Do not use React 18/19-only APIs there.
+- Node 22+, Yarn 4.12.0.
+- `@navikt/*` must stay React 17 compatible.
 
 ## Start and validate
 
@@ -45,101 +29,54 @@
 2. `yarn install`
 3. `yarn boot`
 
-- Run `yarn boot` after first install and after `yarn clean`.
-- Full install may need `NPM_AUTH_TOKEN` for GitHub Packages.
+- `yarn boot` after first install + after `yarn clean`.
+- Full install needs `NPM_AUTH_TOKEN` for GitHub Packages.
 
-Public-package-only install:
-
-```bash
-yarn workspaces focus @navikt/aksel-icons @navikt/ds-tokens @navikt/ds-css @navikt/ds-react @navikt/ds-tailwind @navikt/aksel @navikt/aksel-stylelint
-```
+Public-package-only: `yarn workspaces focus @navikt/aksel-icons @navikt/ds-tokens @navikt/ds-css @navikt/ds-react @navikt/ds-tailwind @navikt/aksel @navikt/aksel-stylelint`
 
 ## Definition of done
 
-- Behavior or visual change: update the implementation, closest story, and closest test.
-- New public export: update the component `index.ts`, package `src/index.ts`, and `package.json` exports.
-- User-facing package change: add a changeset unless the task says otherwise.
-- Validate with the narrowest workspace command first; use root commands only for cross-workspace changes.
+- Behavior/visual change: update impl + closest story + test.
+- New public export: sync component `index.ts`, `src/index.ts`, `package.json` exports.
+- User-facing change: add changeset unless told otherwise.
+- Validate with narrowest workspace command first.
 
-### Common local commands
+### Commands
 
-Always prefer using these commands that already exists in workspaces before running custom commands or doing manual steps. These are optimized for local development and validation. For example:
-
-- `yarn boot` - build all workspaces
-- `yarn test` - run all workspace tests
-- `yarn lint` - eslint + stylelint + biome + cycle + version checks
+- `yarn boot` - build all
+- `yarn test` / `yarn lint` - all tests / all linting
 - `yarn lint:eslint` / `yarn lint:css` / `yarn lint:biome`
-- `yarn storybook` - root Storybook on `localhost:6006`
-- `yarn storybook:aksel` - website/example Storybook on `localhost:6007`
-- `yarn storybook:test` - Storybook browser tests, slow, uses Playwright/Firefox
-- `yarn dev` - website dev server on `localhost:3000`
+- `yarn storybook` - root `:6006`
+- `yarn storybook:aksel` - website examples `:6007`
+- `yarn storybook:test` - browser tests (Playwright/Firefox)
+- `yarn dev` - website `:3000`
 - `yarn clean` - remove build artifacts
-- `yarn workspace @navikt/ds-react build`
-- `yarn workspace @navikt/ds-react test`
+- `yarn workspace @navikt/ds-react build|test`
 - `yarn workspace website test`
 - `yarn workspace playroom sync-imports`
 
-### Validated locally
-
-- Works: `yarn boot`, `yarn test`, `yarn storybook --ci --smoke-test`, `yarn storybook:aksel --ci --smoke-test`
-- Caveat: `yarn lint` and `yarn lint:eslint` can fail if playroom imports are stale. Fix with `yarn workspace playroom sync-imports`.
+`yarn lint` fails if playroom imports stale → `yarn workspace playroom sync-imports`.
 
 ## Where to edit
 
-- `@navikt/core/react/` - `@navikt/ds-react`
-  - `src/<component>/<Component>.tsx`
-  - `src/<component>/index.ts`
-  - `src/<component>/*.stories.tsx`
-  - `src/index.ts`
-  - `package.json` exports map for new public components
+- `@navikt/core/react/src/<component>/` - component source, index, stories
+- `@navikt/core/react/src/index.ts` + `package.json` exports - public API surface
 - `@navikt/core/css/src/` - component CSS
-- `@navikt/core/tokens/src/` - design token source
+- `@navikt/core/tokens/src/` - design tokens
 - `@navikt/core/tailwind/` - Tailwind preset
-- `@navikt/aksel-icons/icons/` - source SVGs; `src/` is generated
-- `@navikt/aksel-stylelint/src/` - Stylelint rules/config
+- `@navikt/aksel-icons/icons/` - source SVGs (`src/` generated)
+- `@navikt/aksel-stylelint/src/` - Stylelint rules
 - `@navikt/aksel/src/` - CLI and codemods
 - `aksel.nav.no/website/` - Next.js docs site
-- `aksel.nav.no/playroom/` - playroom and generated imports
-- `examples/` - example apps
-- `scripts/` - shared repo scripts
-- Root references: `README.md`, `CONTRIBUTING.md`, `aksel.nav.no/README.md`, `package.json`, `eslint.config.js`, `stylelint.config.mjs`, `biome.json`, `tsconfig.json`, `tsconfig.build.json`, `.storybook/`, `.github/workflows/build-validation.yml`
+- `aksel.nav.no/playroom/` - playroom
+- Root: `eslint.config.js`, `stylelint.config.mjs`, `biome.json`, `tsconfig.json`, `.storybook/`
 
 ## Coding defaults
 
-- Keep diffs small. No drive-by refactors, formatting churn, or new dependencies unless asked.
-- Read the full file and copy the nearest existing pattern before changing code.
-- Keep public APIs stable. Prefer additive props and exports.
-- In `@navikt/*`, import React in TSX files; root JSX runtime is classic.
-- Use named exports with explicit type exports.
-- Keep `forwardRef`, `className`, `...rest`, and `as`/`OverridableComponent` patterns when the surrounding component uses them.
-- Reuse internal helpers instead of re-implementing them: `cl`, `composeEventHandlers`, `useId`, `omit`, `useClientLayoutEffect`, `useEventListener`.
-- Use `node:` imports for Node builtins.
-- Never import from `esm/` or `cjs/` build output.
-- Keep import order consistent: `@navikt/*`, `@/*`, then relative. Let Prettier handle sorting.
-- Preserve or add JSDoc for public props/components when changing public APIs.
-
-## React and ds-react specifics
-
-- Component `index.ts` files in `@navikt/core/react/src/**` start with `"use client"`.
-- When adding or exposing a public component, keep these in sync:
-  - component `index.ts`
-  - `@navikt/core/react/src/index.ts`
-  - `@navikt/core/react/package.json` exports
-- Do not use React 18/19-only APIs under `@navikt/*`. Use internal helpers like `useId`.
-
-## CSS and tokens
-
-- Never hardcode colors, spacing, radius, or shadows. Use tokens only.
-- Public tokens use `--ax-*`. Internal component variables use `--__axc-*`.
-- Follow existing CSS nesting, `data-*` selectors, `focus-visible`, `forced-colors`, and reduced-motion patterns.
-- Prettier formats; Biome is lint-only.
-
-## Stories, tests, website
-
-- Update the closest story and test whenever behavior or visuals change.
-- Use Testing Library queries by role and name.
-- Stories live next to components and use `@storybook/react-vite`.
-- For component work, prefer Storybook over `yarn dev`.
-- `aksel.nav.no/website/pages/eksempler/**` and `pages/templates/**` feed the website and Storybook. In these files, only import from `@navikt/*` and `react`.
-- The website uses both `app/` and `pages/`; stay inside the router already used nearby.
-- `yarn storybook:aksel` works for website examples/templates without Sanity secrets. `yarn dev` may need website env values such as `SANITY_READ_NO_DRAFTS`.
+- Small diffs. No drive-by refactors or new deps unless asked.
+- Copy nearest existing pattern before writing new code.
+- Stable public APIs. Prefer additive props/exports.
+- `node:` imports for Node builtins. Never import from `esm/`/`cjs/` output.
+- Import order: `@navikt/*`, `@/*`, relative. (Prettier sorts)
+- Preserve JSDoc on public props/components when changing public APIs.
+- Reuse helpers: `cl`, `composeEventHandlers`, `useId`, `omit`, `useClientLayoutEffect`, `useEventListener`.

.github/dependabot.yml

@@ -7,9 +7,6 @@ registries:
 updates:
   - package-ecosystem: npm
     directory: /
-    exclude-paths:
-      - "examples/astro/package.json"
-      - "examples/shadow-dom/package.json"
     schedule:
       interval: weekly
       day: monday

.github/instructions/caveman.instructions.md

@@ -0,0 +1,78 @@
+---
+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/code-review.instructions.md

@@ -0,0 +1,42 @@
+---
+description: "Code review instructions used when reviewing pull requests."
+applyTo: "**"
+excludeAgent: ["coding-agent"]
+---
+
+# Code review focus
+
+Review for issues that could block release, surprise users, or create maintenance risk. Prefer high-signal findings over style-only comments.
+
+## What to check
+
+### 1. Public API and behavior
+
+- New or changed APIs should match existing naming, params, defaults, and behavior patterns.
+- Watch for breaking changes, regressions, and accidental behavior changes in public components, hooks, CSS, tokens, and CLI output.
+- Avoid introducing new patterns unless the change clearly justifies them.
+
+### 2. Documentation and examples
+
+- Public components and exported APIs should have accurate JSDoc, including `@default` where it adds clarity.
+- Check whether Storybook stories, website examples, and decision records need updates to match the new behavior.
+
+### 3. Tests
+
+- Flag missing or insufficient tests for changed behavior, edge cases, and regressions.
+- Prefer tests that prove the contract users rely on, not just implementation details.
+
+### 4. CSS and styling
+
+- If CSS class names are removed, verify deprecation handling in `@navikt/aksel-stylelint/src/deprecations.ts`.
+- If new CSS files or selectors are added, confirm they follow the repo's import and naming conventions.
+
+### 5. Exports and packaging
+
+- New public exports must be wired through the correct `index.ts` files and `package.json` exports when relevant.
+- Check that release-facing entry points stay consistent across packages.
+
+### 6. Changesets and migrations
+
+- User-facing changes should include a changeset with a clear summary and impact.
+- Breaking changes should also include a codemod when needed.

.github/instructions/code-syntax.instructions.md

@@ -1,11 +1,11 @@
-description: "Use for JS/TS code in this repo."
-applyTo: "**/\*.tsx", "**/_.jsx", "\*\*/_.ts", "\*_/_.js"
-
+---
+description: "JS/TS code conventions."
+applyTo: "**/*.tsx", "**/*.jsx", "**/*.ts", "**/*.js"
 ---
 
 # JS/TS instructions
 
 - Prefer `for...of` over `Array.forEach`.
-- Prefer named exports; keep type exports separate from value exports.
-- Group exports at the bottom: values first, then types.
-- In `*.stories.*`, keep the default export at the top.
+- Named exports; type exports separate from value exports.
+- Group exports at bottom: values first, then types.
+- In `*.stories.*`, keep default export at top.

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

@@ -1,13 +1,17 @@
-description: "Use for ds-react components and component CSS."
+---
+description: "ds-react components and component CSS."
 applyTo: "@navikt/core/react/src/**", "@navikt/core/css/src/**"
-
 ---
 
-# ds-react and component instructions
+# ds-react component instructions
 
-- Read the full component folder before editing.
-- Preserve the surrounding `forwardRef`, `className`, `...rest`, and `as`/`OverridableComponent` patterns.
-- Keep `@navikt/*` code React 17 API compatible.
-- Use tokens, not hardcoded component values.
-- If behavior or visuals change, update the nearest story and test.
-- If a public component changes, keep component exports, package exports, and root exports in sync.
+- Read full component folder before editing.
+- Preserve `forwardRef`, `className`, `...rest`, `as`/`OverridableComponent` patterns.
+- `@navikt/*` must stay React 17 compatible. No React 18/19-only APIs; use internal `useId` etc.
+- `@navikt/*` TSX: import React explicitly (classic JSX).
+- Component `index.ts` starts with `"use client"`.
+- Use tokens, not hardcoded values. Token names: `--ax-*` (public), `--__axc-*` (internal).
+- Follow CSS nesting, `data-*` selectors, `focus-visible`, `forced-colors`, reduced-motion.
+- Prettier formats CSS; Biome lint-only.
+- Behavior/visual change: update nearest story + test.
+- Public component change: sync component `index.ts`, `src/index.ts`, `package.json` exports.

.github/instructions/testing.instructions.md

@@ -1,11 +1,14 @@
-description: "Use for tests and stories."
-applyTo: "**/_.test._", "**/\*.stories.tsx"
-
+---
+description: "Tests and stories."
+applyTo: "**/*.test.*", "**/*.stories.tsx"
 ---
 
 # Testing and Storybook instructions
 
-- Prefer story `play` functions and `yarn storybook:test` for real user flows; use Vitest for logic and non-browser cases.
-- Prefer focused assertions over snapshots unless nearby tests already use snapshots.
-- Cover the main path and one or two meaningful edge cases.
-- If UI behavior changes, update the nearest story and test in the same change.
+- Prefer story `play` functions + `yarn storybook:test` for user flows; Vitest for logic/non-browser.
+- Prefer focused assertions over snapshots unless nearby tests use them.
+- Cover main path + 1-2 meaningful edge cases.
+- UI behavior change: update nearest story + test in same change.
+- Testing Library: query by role and name.
+- Stories use `@storybook/react-vite`, live next to components.
+- Prefer `yarn storybook` for component work over `yarn dev`.

.github/instructions/website.instructions.md

@@ -1,14 +1,12 @@
-description: "Use for website and playroom work."
-applyTo:
-
-- "aksel.nav.no/website/\*\*"
-- "aksel.nav.no/playroom/\*\*"
-
+---
+description: "Website and playroom."
+applyTo: "aksel.nav.no/website/**, aksel.nav.no/playroom/**"
 ---
 
 # Website and playroom instructions
 
-- Stay inside the router already used nearby; do not mix `app/` and `pages/` patterns in the same area.
-- In `aksel.nav.no/website/pages/eksempler/**` and `aksel.nav.no/website/pages/templates/**`, only import from `@navikt/*` and `react`.
-- Reuse nearby website utilities and patterns before adding abstractions.
-- Prefer `yarn storybook:aksel` for examples/templates; use `yarn dev` only for app-only behavior.
+- Stay in router already used nearby; don't mix `app/`/`pages/`.
+- `pages/eksempler/**` and `pages/templates/**`: only import from `@navikt/*` and `react`.
+- Reuse nearby utils/patterns before adding abstractions.
+- Prefer `yarn storybook:aksel` for examples/templates; `yarn dev` only for app-specific behavior.
+- `yarn storybook:aksel` needs no secrets. `yarn dev` needs `SANITY_READ_NO_DRAFTS`.

.github/skills/ds-component-restructure/SKILL.md

@@ -0,0 +1,303 @@
+---
+name: ds-component-restructure
+description: "Restructure a ds-react component's files into canonical folder/naming conventions. Use when reorganizing a component's file layout, splitting a monolithic component file, or renaming files to match domain conventions."
+argument-hint: "Path to component folder, e.g. @navikt/core/react/src/accordion"
+---
+
+# ds-component-restructure
+
+Restructure a `ds-react` component folder to follow canonical conventions — without breaking the public API.
+
+## Canonical Structure
+
+```
+<component>/
+├── index.ts                          # "use client" + re-exports from root
+├── <Component>.stories.tsx           # Storybook stories
+├── <Component>.tests.stories.tsx     # Storybook play-tests (only if play tests exist)
+├── <Component>.meta.ts               # Meta info for component. Used for documentation generation.
+├── root/
+│   ├── <Component>Root.tsx           # Main compound component + sub-component namespace
+│   ├── <Component>Root.context.ts    # Context (if shared across sub-components)
+│   ├── <Component>Root.test.ts       # Unit tests for root (if needed)
+│   └── use<Hook>.ts                  # Files for root-level hooks (if needed)
+├── <subcomponent>/                   # One dir per sub-component
+│   ├── <Component><Subcomponent>.tsx
+│   ├── <Component><Subcomponent>.test.ts  # Unit tests for sub-component (if needed)
+│   └── use<Hook>.ts                       # Files for sub-component-level hooks (if needed)
+├── helpers/
+│   ├── <helper-name>.ts
+│   └── <helper-name>.test.ts         # Unit tests co-located with helper
+└── <Component>.types.ts              # Shared types (if needed across multiple files)
+```
+
+### Naming Rules
+
+| What                   | Pattern                                 | Example                       |
+| ---------------------- | --------------------------------------- | ----------------------------- |
+| Root component file    | `<Component>Root.tsx`                   | `AccordionRoot.tsx`           |
+| Sub-component file     | `<Component><Subcomponent>.tsx`         | `AccordionItem.tsx`           |
+| Internal sub-component | `<Component><Subcomponent>Internal.tsx` | `DialogBackdropInternal.tsx`  |
+| Sub-component dir      | kebab-case sub-component name           | `item/`                       |
+| Context file           | `<Component>Root.context.ts`            | `AccordionRoot.context.ts`    |
+| Shared types file      | `<Component>.types.ts`                  | `Accordion.types.ts`          |
+| Stories                | `<Component>.stories.tsx`               | `Accordion.stories.tsx`       |
+| Play-test stories      | `<Component>.tests.stories.tsx`         | `Accordion.tests.stories.tsx` |
+| Unit test file         | `<filename>.test.ts(x)`                 | `useAccordion.test.ts`        |
+| Meta file              | `<Component>.meta.ts`                   | `Accordion.meta.ts`           |
+| `index.ts`             | always `index.ts`                       | `index.ts`                    |
+
+## Procedure
+
+### 1. Read the Component
+
+Read every file in the component folder — `index.ts`, all `.tsx`/`.ts` source files, meta file, stories, and test stories. Ignore inconsistencies in file naming and structure; the goal is to fix those, not preserve them. Use the `component`-field in the meta file to determine the proper naming if unsure.
+
+**Done when:** every file's role (component, hook, type, context, test, metadata) is known, and every symbol currently exported from `index.ts` is recorded.
+
+### 2. Map Files to Target Structure
+
+Build this table before touching any files:
+
+| Old path            | New path                    | Renamed? | Publicly exported? | Importers to update   |
+| ------------------- | --------------------------- | -------- | ------------------ | --------------------- |
+| `DialogTrigger.tsx` | `trigger/DialogTrigger.tsx` | No       | Yes                | `root/DialogRoot.tsx` |
+| ...                 |                             |          |                    |                       |
+
+For each file:
+
+- Determine new path and whether it moves/renames
+- Check whether content needs splitting (e.g. types → `<Component>.types.ts`)
+- List every file that imports it (grep for the filename or exported symbol)
+- Flag circular dep risks: context importing sub-components, helpers importing component files, types importing non-types
+
+Resolve circular deps before proceeding: move shared pieces to a lower-level file (types → `.types.ts`, utilities → `helpers/`).
+
+**Done when:** every file in the component folder has a row in the table, and every circular-dependency risk is resolved or explicitly noted.
+
+### 3. Create New Files
+
+For each row in the mapping table where the path changes:
+
+1. Create the file at the new path with all import paths updated to reflect new locations
+2. Update every file in the "Importers to update" column — use the mapping table, don't rely on memory
+3. Do NOT delete old files yet
+
+> **Case-only renames** (path differs only in letter casing, e.g. `heading.stories.tsx` → `Heading.stories.tsx`) must NOT use the create-new + delete-old flow. On case-insensitive filesystems (macOS and Windows default) the two paths resolve to the **same file**, so creating the new file overwrites the old and the later "delete old" step destroys your content — and git records no rename. Handle these with the two-step `git mv` in the [Case-only renames](#case-only-renames) edge case instead.
+
+### 4. Update Stories
+
+Move stories to component root dir. If stories import from internal paths, update those paths.
+
+**Exception:** A `stories/` subdirectory is acceptable if it already exists — do not flatten it.
+
+**Casing:** Story filenames follow `<Component>.stories.tsx` (PascalCase). When the existing file is lowercase (e.g. `heading.stories.tsx`), this is a **case-only rename** — follow the [Case-only renames](#case-only-renames) procedure, do not create + delete.
+
+### 5. Update `index.ts`
+
+All exports are **named** — no `default` exports anywhere. The component `index.ts` re-exports the compound component, its sub-components, and their types from the root file:
+
+```ts
+"use client";
+export {
+  <Component>,                   // compound root (named)
+  <Component>Trigger,            // sub-components (named)
+  // ...
+} from "./root/<Component>Root";
+export type {
+  <Component>Props,
+  <Component>TriggerProps,
+  // ...
+} from "./root/<Component>Root";
+```
+
+Group values first, then types. If types live in `<Component>.types.ts`, re-export them from there.
+
+#### Compound root file export pattern
+
+In `<Component>Root.tsx`, assemble the compound component with `Object.assign` — **do not** use an `as <Component>Component` cast or a dedicated `<Component>Component` interface:
+
+```tsx
+const <Component>Root = forwardRef<HTMLDivElement, <Component>Props>((props, ref) => {
+  // ...
+});
+
+/**
+ * Component-level JSDoc (description, `@see`, `@example`) goes directly
+ * above the `Object.assign` — this is the exported `<Component>` value.
+ */
+const <Component> = Object.assign(<Component>Root, {
+  /**
+   * @see 🏷️ {@link <Component>TriggerProps}
+   */
+  Trigger: <Component>Trigger,
+  // ...
+});
+
+export { <Component>, <Component>Trigger };
+export type { <Component>Props, <Component>TriggerProps };
+```
+
+Why `Object.assign` instead of `as`: the cast types the const as an interface that has no runtime `valueDeclaration`, so `react-docgen-typescript` (used by `yarn docgen:meta`) fails to extract props and can't document the component when it is exported via a grouped `export { }` statement. `Object.assign` lets TypeScript infer the intersection type from the value, so metadata generation works with named, bottom-of-file exports.
+
+Sub-component files follow the same rule — named value export plus named type export at the bottom, no inline `export interface` and no default:
+
+```tsx
+interface <Component>TriggerProps extends React.HTMLAttributes<HTMLDivElement> {
+  // ...
+}
+
+const <Component>Trigger = forwardRef<HTMLDivElement, <Component>TriggerProps>(/* ... */);
+
+export { <Component>Trigger };
+export type { <Component>TriggerProps };
+```
+
+### 6. Update Meta File
+
+Update imports in `<Component>.meta.ts` to reflect new paths. If the meta file imports from the component's `index.ts`, no changes are needed.
+
+If component has no meta file, create one in the component root with the following content based on existing patterns.
+Note that each standalone component should have a meta file. But a "sub-component" (like `AccordionItem`) does not need a meta file.
+
+````ts
+
+### 7. Validate No Breaking Changes
+
+**Export diff.** Before deleting old files, compare the exported names recorded during Step 1 against the new `index.ts`. Every name must be present:
+
+- Exports in new index.ts that are missing from original → regression
+- Exports in original that are missing from new index.ts → missing export (breaking change)
+
+Concretely: grep for `export` lines in both versions and diff them. All component names and type names must match exactly.
+
+**Build.** Run `yarn workspace @navikt/ds-react build` — must succeed with no TypeScript errors.
+
+**Package root.** Verify `@navikt/core/react/src/index.ts` still re-exports the component. No changes needed there unless the component's `index.ts` path changed (it shouldn't).
+
+**No case-duplicate tracked paths.** This is the most common restructure bug. On case-insensitive filesystems (macOS, Windows) git can end up tracking **two** entries that differ only in casing (e.g. `accordion.stories.tsx` **and** `Accordion.stories.tsx`) while the working tree shows only one file. The stale entry then breaks tests and checkout on other machines. `ls` / file search will NOT reveal it — you must ask git. Run:
+
+```sh
+git ls-files | awk '{l=tolower($0); if(seen[l]++) print "CASE-DUP:", $0}'
+```
+
+Any output is a leftover. Remove the stale entry from the index by its **exact old path** (this does not touch the correctly-cased file on disk):
+
+```sh
+git rm --cached '<exact old lowercase path>'
+```
+
+Then confirm only the intended casing remains, e.g. `git ls-files '*<component>*stories*'`.
+
+**Done when:** the export diff is empty, the build succeeds, the package-root re-export is verified, and `git ls-files` reports no case-duplicate paths.
+
+### 8. Remove Old Files
+
+Only after verifying new files are correct and `index.ts` exports match the original, delete the old files.
+
+Skip any rows already moved with `git mv` (case-only renames and other `git mv` moves) — there is no separate old file to delete for those.
+
+### 9. Unit Tests
+
+Unit tests live next to the file they test — same directory, same base name with `.test.ts` / `.test.tsx` suffix.
+
+| What to test           | File location                                       |
+| ---------------------- | --------------------------------------------------- |
+| Helper utility         | `helpers/<helper-name>.test.ts`                     |
+| Sub-component logic    | `<subcomponent>/<Component><Subcomponent>.test.tsx` |
+| Root component / hooks | `root/<Component>Root.test.tsx`                     |
+| Context helpers        | `root/<Component>Root.context.test.ts`              |
+
+Do NOT move existing test files unless their source file moves. When moving a source file, move its test file with it and update import paths.
+
+## Edge Cases
+
+### Case-only renames
+
+A rename that changes **only letter casing** (e.g. `heading.stories.tsx` → `Heading.stories.tsx`, or `accordion.tsx` → `Accordion.tsx`) is a trap on case-insensitive filesystems (macOS and Windows defaults):
+
+- Both paths point to the **same** file, so `create_file` at the new path overwrites the old content, and the Step 8 "delete old" then removes it entirely.
+- git does not see a rename (`core.ignorecase=true`), so history is lost and other machines get checkout/case-collision conflicts.
+
+Do the rename in **two `git mv` steps through a temporary distinct name** so git records it and it works on every filesystem:
+
+```sh
+git mv heading.stories.tsx heading.stories.tmp.tsx
+git mv heading.stories.tmp.tsx Heading.stories.tsx
+````
+
+Then edit the file's contents/imports in place. Skip the create-new + delete-old flow for these rows entirely.
+
+Guidelines:
+
+- Prefer `git mv` for **all** moves/renames (not just case-only) so history is preserved; only fall back to create + delete when the file content is being split or substantially rewritten.
+- Detect case-only renames while building the Step 2 mapping table: compare old vs new path lowercased — if they're equal but the raw paths differ, mark the row as case-only.
+- The temporary name must differ by more than case (add `.tmp`), otherwise the same collision reoccurs.
+
+### Flat components without sub-components
+
+Leave flat components flat - do NOT introduce subdirs unless the component contains internal utility-components (files that render JSX but are not public sub-components). If such a utility-component exists, move it to its own subdir following the canonical naming.
+
+Example: `button/Button.tsx` has no other sub-components, so should stay in root.
+
+### `parts/` directory
+
+If the component uses a `parts/` dir, break it up into separate sub-component dirs.
+
+### Internal sub-components
+
+Sub-components that are implementation details (not exported publicly) use the same dir/file naming as public ones (see Naming Rules) with an `Internal` suffix, but must NOT be exported from `index.ts`:
+
+```
+
+backdrop/
+└── DialogBackdropInternal.tsx ← internal, NOT exported from index.ts
+
+```
+
+### Nested subcomponents
+
+Do NOT nest subcomponent dirs inside other subcomponent dirs. All sub-component dirs must be direct children of the component root:
+
+```
+
+# Wrong
+
+dialog/
+└── header/
+├── DialogHeader.tsx
+└── title/
+└── DialogTitle.tsx
+
+# Correct
+
+dialog/
+├── header/
+│ └── DialogHeader.tsx
+└── title/
+└── DialogTitle.tsx
+
+```
+
+## Constraints
+
+- **No breaking changes.** Public export names and prop shapes must be identical after restructuring.
+- **Named exports only.** No `default` exports; group named exports at the bottom of each file (values first, then types).
+- **Compound roots use `Object.assign`.** No `as <Component>Component` cast or `<Component>Component` interface — it breaks `yarn docgen:meta` prop extraction.
+- **React 17 compatible.** No React 18/19-only APIs. Import React explicitly in `.tsx` files.
+- `index.ts` must start with `"use client"`.
+- Use tokens, not hardcoded values.
+- Preserve `forwardRef`, `className`, `...rest`, `as`/`OverridableComponent` patterns.
+- Keep JSDoc on public props and components. The component-level JSDoc block sits directly above the `Object.assign` call; sub-component `@see` tags go on the keys inside the `Object.assign` object literal.
+
+## Reference Files
+
+- Canonical example: `@navikt/core/react/src/dialog/`
+- Package public API: `@navikt/core/react/src/index.ts`
+- Component `index.ts` pattern: `@navikt/core/react/src/dialog/index.ts`
+- Context pattern: `@navikt/core/react/src/dialog/root/DialogRoot.context.ts`
+- Meta: `@navikt/core/react/src/accordion/Accordion.meta.ts`
+
+```
+
+```

.github/workflows/backup-cms.yml

@@ -14,7 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@v7
         with:
           fetch-depth: 1
 

.github/workflows/build-e2e.yml

@@ -1,4 +1,4 @@
-name: E2E tests (Playwright)
+name: E2E tests
 on:
   push:
     branches: [main, next]
@@ -28,7 +28,7 @@ jobs:
       REGISTRY: ghcr.io
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@v7
         with:
           fetch-depth: 1
 
@@ -62,7 +62,7 @@ jobs:
     name: Playwright shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.58.1-noble
+      image: mcr.microsoft.com/playwright:v1.60.0-noble
     services:
       testapp:
         image: ${{ needs.prebuild-app-for-playwright.outputs.image }}
@@ -78,7 +78,7 @@ jobs:
         shardTotal: [5]
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@v7
         with:
           fetch-depth: 1
 

.github/workflows/build-validation.yml

@@ -1,4 +1,4 @@
-name: Validation (Lint, Tests)
+name: Validation
 
 on:
   push:
@@ -21,7 +21,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@v7
         with:
           fetch-depth: 1
 
@@ -38,7 +38,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@v7
         with:
           fetch-depth: 1
 
@@ -55,7 +55,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@v7
         with:
           fetch-depth: 1
 
@@ -72,10 +72,10 @@ jobs:
     runs-on: ubuntu-latest
     timeout-minutes: 10
     container:
-      image: mcr.microsoft.com/playwright:v1.58.1-noble
+      image: mcr.microsoft.com/playwright:v1.60.0-noble
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@v7
         with:
           fetch-depth: 1
 

.github/workflows/build-visual-regression.yml

@@ -1,4 +1,4 @@
-name: Visual regression (Chromatic)
+name: Visual regression
 
 on:
   push:
@@ -27,7 +27,7 @@ jobs:
       contents: write
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@v7
         with:
           fetch-depth: 0
 
@@ -37,6 +37,7 @@ jobs:
           npm_auth_token: ${{ secrets.READER_TOKEN }}
 
       - name: Chromatic
+        if: github.actor != 'dependabot[bot]'
         uses: chromaui/action@latest
         id: chromatic_tests
         continue-on-error: false
@@ -54,14 +55,14 @@ jobs:
           STORYBOOK_GITHUB_SHA: ${{ github.sha }}
 
       - name: Get commit sha
-        if: github.event_name != 'push' && !contains(github.event.head_commit.message, '[ci skip]')
+        if: github.event_name != 'push' && !contains(github.event.head_commit.message, '[ci skip]') && github.actor != 'dependabot[bot]'
         id: vars
         shell: bash
         run: |
           echo "sha_short=$(git rev-parse --short HEAD)" >> $GITHUB_OUTPUT
 
       - name: Find Comment
-        if: github.event_name != 'push' && !contains(github.event.head_commit.message, '[ci skip]')
+        if: github.event_name != 'push' && !contains(github.event.head_commit.message, '[ci skip]') && github.actor != 'dependabot[bot]'
         uses: peter-evans/find-comment@v4
         id: fc
         with:
@@ -70,7 +71,7 @@ jobs:
           body-includes: Storybook demo
 
       - name: Create or update comment
-        if: github.event_name != 'push' && !contains(github.event.head_commit.message, '[ci skip]')
+        if: github.event_name != 'push' && !contains(github.event.head_commit.message, '[ci skip]') && github.actor != 'dependabot[bot]'
         uses: peter-evans/create-or-update-comment@v5
         with:
           comment-id: ${{ steps.fc.outputs.comment-id }}

.github/workflows/bundle-check-main.yml

@@ -30,7 +30,7 @@ jobs:
     if: ${{ needs.check-title.outputs.should-run == 'true' }}
     steps:
       - name: Checkout main branch
-        uses: actions/checkout@v6
+        uses: actions/checkout@v7
         with:
           fetch-depth: 1
           ref: main
@@ -58,7 +58,7 @@ jobs:
     if: ${{ needs.check-title.outputs.should-run == 'true' }}
     steps:
       - name: Checkout PR branch
-        uses: actions/checkout@v6
+        uses: actions/checkout@v7
         with:
           fetch-depth: 1
 
@@ -84,7 +84,7 @@ jobs:
     needs: [analyze-trunk, analyze-local]
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@v7
         with:
           fetch-depth: 1
 

.github/workflows/bundle-check-npm.yml

@@ -30,7 +30,7 @@ jobs:
     if: ${{ needs.check-title.outputs.should-run == 'true' }}
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@v7
         with:
           fetch-depth: 1
 

.github/workflows/cdn-figma-config.yml

@@ -19,7 +19,7 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@v7
         with:
           fetch-depth: 1
 

.github/workflows/cdn-fonts.yml

@@ -19,7 +19,7 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: "actions/checkout@v6"
+        uses: "actions/checkout@v7"
 
       - name: Upload fonts to CDN
         id: upload

.github/workflows/deploy-dev-gcp.yml

@@ -21,7 +21,7 @@ jobs:
       deployments: "write"
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@v7
         with:
           fetch-depth: 1
 

.github/workflows/deploy-mcp-server.yml

@@ -0,0 +1,56 @@
+name: Deploy Aksel MCP server
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - "mcp-server/**"
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+env:
+  IMAGE: ghcr.io/navikt/aksel
+
+jobs:
+  build_and_deploy:
+    name: Build and deploy to prod-gcp
+    runs-on: ubuntu-latest
+    permissions:
+      contents: "read"
+      id-token: "write"
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v7
+        with:
+          fetch-depth: 1
+
+      - name: Setup project
+        uses: ./.github/actions/setup
+        with:
+          npm_auth_token: ${{ secrets.READER_TOKEN }}
+
+      - name: Test mcp-server
+        run: cd mcp-server && yarn test
+
+      - name: Build mcp-server
+        run: cd mcp-server && yarn build
+
+      - name: Build and push Docker image
+        uses: nais/docker-build-push@v0
+        id: docker-push
+        with:
+          team: designsystem
+          dockerfile: mcp-server/Dockerfile
+          project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}
+          identity_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}
+
+      - name: Deploy to prod-gcp
+        uses: nais/deploy/actions/deploy@master
+        env:
+          APIKEY: ${{ secrets.NAIS_DEPLOY_APIKEY }}
+          RESOURCE: mcp-server/.nais/app.yaml
+          CLUSTER: prod-gcp
+          IMAGE: ${{ steps.docker-push.outputs.image }}

.github/workflows/deploy-prod-gcp.yml

@@ -20,19 +20,20 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@v7
 
       - name: Setup project
         uses: ./.github/actions/setup
         with:
           npm_auth_token: ${{ secrets.READER_TOKEN }}
 
-      - name: Run ts-docgen
-        run: yarn docgen
+      - name: Run metadata generation
+        run: yarn docgen:meta
 
       - name: Update Sanity
         env:
           SANITY_WRITE: ${{ secrets.SANITY_WRITE }}
+          GCP_CREDENTIALS: ${{ secrets.GCP_CREDENTIALS_BQ_READ }}
         run: yarn workspace aksel.nav.no sanity:update
 
   build_and_deploy:
@@ -45,7 +46,7 @@ jobs:
       deployments: "write"
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@v7
         with:
           fetch-depth: 1
 

.github/workflows/deploy-v7-prod-gcp.yml

@@ -21,7 +21,7 @@ jobs:
       id-token: "write"
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@v7
         with:
           fetch-depth: 1
 

.github/workflows/release.yml

@@ -23,7 +23,7 @@ jobs:
       pull-requests: "write"
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@v7
         with:
           fetch-depth: 0
 

.github/workflows/update-article-views.yml

@@ -12,7 +12,7 @@ jobs:
       id-token: write
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@v7
         with:
           fetch-depth: 1
       - name: Build and push Docker image

.gitignore

@@ -90,15 +90,10 @@ dist/
 assets.json
 lib/
 lerna-debug.log
-examples/legacy/node_modules
-examples/legacy/out
-examples/webpack/node_modules
-examples/webpack/out
 .gitattributes
 .iml
 .DS_Store
 
-*.d.ts
 *-exports.less
 */figma-api/icons
 */ds-icons/png
@@ -112,13 +107,12 @@ utilities/**/css
 */**/NAV-ikonpakke-png.zip
 */**/NAV-ikonpakke-svg.zip
 
-react-docgen.json
-react-docgen-docs.json
 cjs
 esm
-@navikt/community/navno/css
 .vercel
 _docs.json
+_metadata.json
+**/component-names.generated.ts
 
 .yarn/*
 .yarn/cache
@@ -136,7 +130,6 @@ _docs.json
 .next
 !*/website/lib/
 !*/website/public/
-!aksel.nav.no/**/*.d.ts
 !*/sanity/lib/
 !*/sanity/static/
 out

.storybook/main.ts

@@ -5,9 +5,7 @@ import { createRequire } from "node:module";
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
 import { loadCsf } from "storybook/internal/csf-tools";
-import { InlineConfig } from "vite";
 import turbosnap from "vite-plugin-turbosnap";
-import TsconfigPathsPlugin from "vite-tsconfig-paths";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -17,6 +15,17 @@ const includeWebsiteStories = process.env.WITH_WEBSITE === "true";
 
 const indexRegex = /export const args = {\s+index: (\d+),/;
 
+const addons = [
+  getAbsolutePath("@storybook/addon-a11y"),
+  getAbsolutePath("@storybook/addon-themes"),
+  getAbsolutePath("@storybook/addon-docs"),
+  getAbsolutePath("@storybook/addon-vitest"),
+];
+
+if (process.env.NODE_ENV === "development") {
+  addons.push(getAbsolutePath("@github-ui/storybook-addon-performance-panel"));
+}
+
 export default defineMain({
   experimental_indexers: (indexers) => {
     // Changes here might need to be reflected in aksel.nav.no/website/.storybook/main.ts
@@ -79,12 +88,7 @@ export default defineMain({
 
   stories: resolveStoriesPaths(),
 
-  addons: [
-    getAbsolutePath("@storybook/addon-a11y"),
-    getAbsolutePath("@storybook/addon-themes"),
-    getAbsolutePath("@storybook/addon-docs"),
-    getAbsolutePath("@storybook/addon-vitest"),
-  ],
+  addons,
 
   framework: {
     name: getAbsolutePath("@storybook/react-vite"),
@@ -99,21 +103,20 @@ export default defineMain({
   async viteFinal(config, { configType }) {
     const { mergeConfig } = await import("vite");
 
-    // The TsconfigPathsPlugin is only used to silence errors when importing nextjs components, but the imports does not acutally work.
-    const tsConfigPathsPluginOpts = { root: "aksel.nav.no/website/" };
-
     return mergeConfig(config, {
       build: { cssMinify: "lightningcss" },
+      resolve: {
+        tsconfigPaths: true,
+      },
       plugins:
         configType === "PRODUCTION"
           ? [
-              TsconfigPathsPlugin(tsConfigPathsPluginOpts),
               turbosnap({
                 rootDir: config.root ?? process.cwd(),
               }),
             ]
-          : [TsconfigPathsPlugin(tsConfigPathsPluginOpts)],
-    } satisfies InlineConfig);
+          : [],
+    } satisfies typeof config);
   },
 
   /* Lets us preview Roboto-flex font in storybook. */

.storybook/preview.tsx

@@ -1,39 +1,98 @@
+import addonPerformancePanel from "@github-ui/storybook-addon-performance-panel";
 import addonA11y from "@storybook/addon-a11y";
 import addonDocs from "@storybook/addon-docs";
 import addonThemes, { withThemeByClassName } from "@storybook/addon-themes";
 import addonVitest from "@storybook/addon-vitest";
 import { definePreview } from "@storybook/react-vite";
-import React, { useEffect } from "react";
-import "../@navikt/core/css/src/data-table.css";
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import "../@navikt/core/css/src/data-token-filter.css";
+import dataTokenFilterStyles from "../@navikt/core/css/src/data-token-filter.css?inline";
 import "../@navikt/core/css/src/data-toolbar.css";
+import dataToolbarStyles from "../@navikt/core/css/src/data-toolbar.css?inline";
 import "../@navikt/core/css/src/index.css";
+import dsStyles from "../@navikt/core/css/src/index.css?inline";
 import "../@navikt/core/css/src/listbox.css";
+import listboxStyles from "../@navikt/core/css/src/listbox.css?inline";
 import { Provider } from "../@navikt/core/react/src/provider";
-import { Translations } from "../@navikt/core/react/src/utils/i18n/i18n.types";
+import type { Translations } from "../@navikt/core/react/src/utils/i18n/i18n.types";
 import { en, nb, nn } from "../@navikt/core/react/src/utils/i18n/locales";
 import "./layout.css";
 
 type Language = "nb" | "nn" | "en";
+type WebComponentMode = "off" | "open" | "closed";
+
 const locales: Record<Language, Translations> = {
   nb,
   nn,
   en,
 };
 
-const LanguageDecorator = ({
+const StoryProviderDecorator = ({
   children,
   lang,
+  rootElement,
 }: {
   children: React.ReactNode;
   lang: Language | undefined;
+  rootElement?: HTMLElement;
 }) => {
   useEffect(() => {
     document.documentElement.lang = lang || "nb";
   }, [lang]);
 
   return (
-    <Provider locale={lang ? locales[lang] : undefined}>{children}</Provider>
+    <Provider
+      rootElement={rootElement}
+      locale={lang ? locales[lang] : undefined}
+    >
+      {children}
+    </Provider>
+  );
+};
+
+const webComponentStyles = [
+  dataTokenFilterStyles,
+  dataToolbarStyles,
+  dsStyles,
+  listboxStyles,
+].join("\n");
+
+const WebComponentDecorator = ({
+  children,
+  mode,
+}: {
+  children: (rootElement: HTMLDivElement) => React.ReactNode;
+  mode: Exclude<WebComponentMode, "off">;
+}) => {
+  const hostRef = useRef<HTMLDivElement>(null);
+  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null);
+
+  useLayoutEffect(() => {
+    const host = hostRef.current;
+    if (!host) {
+      return;
+    }
+
+    const shadowRoot = host.attachShadow({ mode });
+    const style = document.createElement("style");
+    style.textContent = webComponentStyles;
+    shadowRoot.appendChild(style);
+
+    const mount = document.createElement("div");
+    shadowRoot.appendChild(mount);
+    setRootElement(mount);
+
+    return () => {
+      setRootElement(null);
+    };
+  }, [mode]);
+
+  return (
+    <>
+      <div ref={hostRef} key={mode} />
+      {rootElement ? createPortal(children(rootElement), rootElement) : null}
+    </>
   );
 };
 
@@ -58,8 +117,17 @@ const TypoDecorator = ({
   return <>{children}</>;
 };
 
+const addons = [addonA11y(), addonThemes(), addonDocs(), addonVitest()];
+
+/**
+ * Fixes flaky interaction tests
+ */
+if (process.env.NODE_ENV === "development") {
+  addons.push(addonPerformancePanel());
+}
+
 export default definePreview({
-  addons: [addonA11y(), addonThemes(), addonDocs(), addonVitest()],
+  addons,
   parameters: {
     options: {
       storySort: {
@@ -110,11 +178,23 @@ export default definePreview({
         dynamicTitle: true,
       },
     },
+    webComponentWrapper: {
+      toolbar: {
+        icon: "component",
+        items: [
+          { value: "off", title: "DOM: Default" },
+          { value: "open", title: "Web component: Open shadow root" },
+          { value: "closed", title: "Web component: Closed shadow root" },
+        ],
+        dynamicTitle: true,
+      },
+    },
   },
 
   initialGlobals: {
     mode: "default",
     font: "Source Sans 3",
+    webComponentWrapper: "off",
   },
 
   decorators: [
@@ -123,11 +203,23 @@ export default definePreview({
         <StoryFn />
       </TypoDecorator>
     ),
-    (StoryFn, context) => (
-      <LanguageDecorator lang={context.globals.language}>
-        <StoryFn />
-      </LanguageDecorator>
-    ),
+    (StoryFn, context) =>
+      context.globals.webComponentWrapper === "off" ? (
+        <StoryProviderDecorator lang={context.globals.language}>
+          <StoryFn />
+        </StoryProviderDecorator>
+      ) : (
+        <WebComponentDecorator mode={context.globals.webComponentWrapper}>
+          {(rootElement) => (
+            <StoryProviderDecorator
+              lang={context.globals.language}
+              rootElement={rootElement}
+            >
+              <StoryFn />
+            </StoryProviderDecorator>
+          )}
+        </WebComponentDecorator>
+      ),
     withThemeByClassName({
       themes: {
         light: "light",

.storybook/vitest.setup.ts

@@ -1,7 +0,0 @@
-import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
-import { setProjectAnnotations } from "@storybook/react-vite";
-import * as projectAnnotations from "./preview";
-
-// This is an important step to apply the right configuration when testing your stories.
-// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
-setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @navikt/aksel-icons
 
+## 8.15.0
+
+### Minor Changes
+
+- New icons: Timeline and TimelineFill ([#5050](https://github.com/navikt/aksel/pull/5050))
+
+## 8.14.0
+
+## 8.13.1
+
+## 8.13.0
+
+### Minor Changes
+
+- Icons: New icons Armchair, FocusRoom, PhoneRoom and Sleep ([#4979](https://github.com/navikt/aksel/pull/4979))
+
+## 8.12.1
+
+## 8.12.0
+
+## 8.11.1
+
+## 8.11.0
+
+### Minor Changes
+
+- Icons: New icon `Newsletter` and `NewsletterFill` ([#4887](https://github.com/navikt/aksel/pull/4887))
+
+## 8.10.6
+
+## 8.10.5
+
+## 8.10.4
+
+## 8.10.3
+
 ## 8.10.2
 
 ## 8.10.1

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

@@ -3,7 +3,7 @@ import { JSON_SCHEMA, load } from "js-yaml";
 import fs from "node:fs";
 import path from "node:path";
 import { describe, expect, test } from "vitest";
-import { IconYml } from "../config/figma/make-configs";
+import type { IconYml } from "../config/figma/make-configs";
 
 const basePath = path.resolve(__dirname, "../icons");
 

@navikt/aksel-icons/__tests__/validate-svg-parsing.test.ts

@@ -28,7 +28,7 @@ describe(`SVG should be correctly parsed`, () => {
   </svg>
   `;
 
-  test("a", () => {
+  test("should replace width and height with 1em, and fill with currentColor", () => {
     expect(parseIcon(simpleSvg)).toEqual(simpleSvgResult);
     expect(parseIcon(advancedSvg)).toEqual(advancedSvgResult);
   });

@navikt/aksel-icons/config/figma/fetch-icons.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   BadRequestErrorResponseWithErrMessage,
   ErrorResponsePayloadWithErrMessage,
   GetFileComponentsResponse,

@navikt/aksel-icons/config/figma/icon-name.ts

@@ -1,4 +1,4 @@
-import { PublishedComponent } from "@figma/rest-api-spec";
+import type { PublishedComponent } from "@figma/rest-api-spec";
 import { camelCase, startCase } from "lodash";
 
 export const resolveName = (icon: PublishedComponent) => {

@navikt/aksel-icons/config/figma/make-configs.ts

@@ -1,4 +1,4 @@
-import { PublishedComponent } from "@figma/rest-api-spec";
+import type { PublishedComponent } from "@figma/rest-api-spec";
 import { dump } from "js-yaml";
 import { writeFileSync } from "node:fs";
 import { resolve } from "node:path";

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

@@ -1,6 +1,6 @@
 const fastglob = require("fast-glob");
 const path = require("path");
-const jsYaml = require("js-yaml");
+const { load, JSON_SCHEMA } = require("js-yaml");
 const fs = require("fs");
 
 const basePath = path.resolve(__dirname, "../icons");
@@ -12,8 +12,8 @@ const ymlList = fastglob
 const metadata = {};
 
 ymlList.forEach((file) => {
-  const ymlData = jsYaml.load(fs.readFileSync(`${basePath}/${file}`), {
-    schema: jsYaml.JSON_SCHEMA,
+  const ymlData = load(fs.readFileSync(`${basePath}/${file}`), {
+    schema: JSON_SCHEMA,
   });
   // biome-ignore lint/complexity/useOptionalChain: optional chain not supported in enviroment. Consider revriting to Typescript
   if (ymlData.keywords && ymlData.keywords.includes("[ignore-docs]")) {
@@ -42,7 +42,7 @@ fs.writeFileSync(
     id: string;
     name: string;
     category: string;
-    sub_category: "Time",
+    sub_category: string;
     keywords: string[];
     variant: "stroke" | "fill";
     created_at: Date;

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

@@ -8,7 +8,7 @@ const {
 } = require("fs");
 const path = require("path");
 const fastGlob = require("fast-glob");
-const jsYaml = require("js-yaml");
+const { load, JSON_SCHEMA } = require("js-yaml");
 
 const iconFolder = "./core-icons";
 
@@ -26,8 +26,8 @@ async function generateFile() {
   const categories = new Map();
 
   ymlList.forEach((file) => {
-    const ymlData = jsYaml.load(readFileSync(`${basePath}/${file}`), {
-      schema: jsYaml.JSON_SCHEMA,
+    const ymlData = load(readFileSync(`${basePath}/${file}`), {
+      schema: JSON_SCHEMA,
     });
     categories.set(
       ymlData.category,

@navikt/aksel-icons/figma-plugin/.gitignore

@@ -22,5 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-!src
-!*.d.ts
+!src

@navikt/aksel-icons/figma-plugin/package.json

@@ -13,20 +13,20 @@
   "dependencies": {
     "@navikt/ds-css": "*",
     "@navikt/ds-react": "*",
-    "fuse.js": "^7.0.0",
-    "react": "19.2.5",
-    "react-dom": "19.2.5"
+    "fuse.js": "^7.4.2",
+    "react": "19.2.7",
+    "react-dom": "19.2.7"
   },
   "devDependencies": {
-    "@figma/plugin-typings": "^1.100.2",
+    "@figma/plugin-typings": "^1.130.0",
+    "@rollup/pluginutils": "^5.4.0",
     "@svgr/core": "^8.1.0",
     "@types/node": "^24.10.9",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
-    "@vitejs/plugin-react": "^5.1.0",
-    "typescript": "6.0.2",
-    "vite": "^7.3.2",
-    "vite-plugin-singlefile": "^2.3.0",
-    "vite-plugin-svgr": "^4.2.0"
+    "@vitejs/plugin-react": "^6.0.3",
+    "typescript": "6.0.3",
+    "vite": "^8.0.16",
+    "vite-plugin-singlefile": "^2.3.0"
   }
 }

@navikt/aksel-icons/figma-plugin/scripts/vite/vite-inline-svg.ts

@@ -1,5 +1,5 @@
 import fs from "node:fs";
-import { Plugin } from "vite";
+import type { Plugin } from "vite";
 
 function svgToDataURL(svgStr: string) {
   const encoded = encodeURIComponent(svgStr)

@navikt/aksel-icons/figma-plugin/scripts/vite/vite-svgr-component.ts

@@ -1,4 +1,4 @@
-import { FilterPattern, createFilter } from "@rollup/pluginutils";
+import { type FilterPattern, createFilter } from "@rollup/pluginutils";
 import type { Config } from "@svgr/core";
 import fs from "node:fs";
 import type { Plugin } from "vite";

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

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import React from "react";
 import * as AkselIcons from "@navikt/aksel-icons";
-import { StarFillIcon } from "@navikt/aksel-icons";
+import type { StarFillIcon } from "@navikt/aksel-icons";
 
 const meta: Meta<typeof StarFillIcon> = {
   title: "aksel-icons/Icons",

@navikt/aksel-icons/icons/Armchair.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="M15.8398 3.25C16.7677 3.25 17.5195 4.0335 17.5195 5V8.25H18.7197C19.6476 8.25 20.4004 9.0335 20.4004 10V16C20.4004 16.9665 19.6476 17.75 18.7197 17.75H16.8398L17.4834 19.7627C17.6091 20.1557 17.4046 20.5809 17.0273 20.7119C16.6502 20.8426 16.2419 20.6301 16.1162 20.2373L15.3203 17.75H8.67969L7.88379 20.2373C7.75809 20.6301 7.34978 20.8426 6.97266 20.7119C6.59542 20.5809 6.39086 20.1557 6.5166 19.7627L7.16016 17.75H5.28027C4.35244 17.75 3.59961 16.9665 3.59961 16V10C3.59961 9.0335 4.35244 8.25 5.28027 8.25H6.48047V5C6.48047 4.0335 7.23232 3.25 8.16016 3.25H15.8398ZM5.28027 9.75C5.14773 9.75 5.04004 9.86193 5.04004 10V16C5.04004 16.1381 5.14773 16.25 5.28027 16.25H18.7197C18.8523 16.25 18.96 16.1381 18.96 16V10C18.96 9.86193 18.8523 9.75 18.7197 9.75H16.7998C16.6673 9.75011 16.5596 9.862 16.5596 10V13C16.5596 13.4142 16.2375 13.75 15.8398 13.75H8.16016C7.76251 13.75 7.44043 13.4142 7.44043 13V10C7.44043 9.862 7.33265 9.75011 7.2002 9.75H5.28027ZM8.16016 4.75C8.02761 4.75 7.91992 4.86193 7.91992 5V8.41992C8.48722 8.7009 8.87988 9.30212 8.87988 10V12.25H15.1201V10C15.1201 9.30212 15.5128 8.7009 16.0801 8.41992V5C16.0801 4.86193 15.9724 4.75 15.8398 4.75H8.16016Z" fill="#202733"/>
+</svg>

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

@@ -0,0 +1,7 @@
+name: Armchair
+category: Workplace
+sub_category: Workplace
+keywords:
+  - Armchair
+variant: Stroke
+created_at: 15.06.2026

@navikt/aksel-icons/icons/ArmchairFill.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="M6.95508 9.45605C7.22008 9.45617 7.43457 9.67999 7.43457 9.95605V12.6582C7.43457 13.1 7.77897 13.458 8.20312 13.458H15.7812C16.2054 13.458 16.5498 13.1 16.5498 12.6582V9.95605C16.5498 9.67996 16.7643 9.45613 17.0293 9.45605H19.9209C20.186 9.45605 20.4014 9.67991 20.4014 9.95605V16.0596C20.4014 16.9432 19.7135 17.66 18.8652 17.6602H16.8262L17.4707 19.6738C17.5964 20.0666 17.3926 20.4919 17.0156 20.623C16.6384 20.754 16.2293 20.5414 16.1035 20.1484L15.3076 17.6602H8.66699L7.87109 20.1484C7.74537 20.5413 7.33716 20.7539 6.95996 20.623C6.58272 20.4921 6.37816 20.0668 6.50391 19.6738L7.14844 17.6602H5.11719C4.26891 17.6601 3.59961 16.9432 3.59961 16.0596V9.95605C3.59961 9.67991 3.81498 9.45605 4.08008 9.45605H6.95508ZM15.8271 3.33984C16.3572 3.33984 16.7869 3.83751 16.7871 4.38965V7.61523C16.787 7.80915 16.6364 7.96679 16.4502 7.9668C15.7053 7.9668 15.1017 8.59523 15.1016 9.37109V11.4541C15.1014 11.7301 14.8861 11.9541 14.6211 11.9541H9.36816C9.1032 11.9541 8.88791 11.7301 8.8877 11.4541V9.38379C8.8877 8.60107 8.27875 7.9668 7.52734 7.9668C7.33967 7.96669 7.18765 7.80778 7.1875 7.6123V4.38965C7.18769 3.83751 7.61738 3.33984 8.14746 3.33984H15.8271Z" fill="#202733"/>
+</svg>

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

@@ -0,0 +1,7 @@
+name: ArmchairFill
+category: Workplace
+sub_category: Workplace
+keywords:
+  - ArmchairFill
+variant: Fill
+created_at: 15.06.2026

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

@@ -1,3 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16.4695 11.0304C16.7624 11.3233 17.2371 11.3233 17.53 11.0304L21.03 7.53042C21.1707 7.38977 21.2498 7.19906 21.2498 7.00015C21.2498 6.80124 21.1707 6.61053 21.03 6.46988L17.53 2.96988C17.2371 2.67698 16.7624 2.67698 16.4695 2.96988C16.1766 3.26277 16.1766 3.73753 16.4695 4.03042L18.6892 6.25015L9.49976 6.25015C9.08555 6.25015 8.74976 6.58593 8.74976 7.00015C8.74976 7.41436 9.08555 7.75015 9.49976 7.75015L18.6892 7.75015L16.4695 9.96988C16.1766 10.2628 16.1766 10.7375 16.4695 11.0304ZM6.46949 21.0304C6.76238 21.3233 7.23714 21.3233 7.53003 21.0304C7.82293 20.7375 7.82293 20.2628 7.53003 19.9699L5.31031 17.7501H14.4998C14.914 17.7501 15.2498 17.4144 15.2498 17.0001C15.2498 16.5859 14.914 16.2501 14.4998 16.2501H5.31031L7.53003 14.0304C7.82293 13.7375 7.82293 13.2628 7.53003 12.9699C7.23714 12.677 6.76238 12.677 6.46949 12.9699L2.96949 16.4699C2.67659 16.7628 2.67659 17.2375 2.96949 17.5304L6.46949 21.0304Z" fill="#202733"/>
+<path d="M16.4695 11.0302C16.7624 11.3231 17.2372 11.3231 17.5301 11.0302L21.0301 7.53018C21.1707 7.38953 21.2498 7.19882 21.2498 6.9999C21.2498 6.80099 21.1707 6.61028 21.0301 6.46963L17.5301 2.96963C17.2372 2.67674 16.7624 2.67674 16.4695 2.96963C16.1766 3.26252 16.1766 3.73728 16.4695 4.03018L18.6892 6.2499H9.49979C9.08558 6.2499 8.74979 6.58569 8.74979 6.9999C8.74979 7.41412 9.08558 7.7499 9.49979 7.7499H18.6892L16.4695 9.96963C16.1766 10.2625 16.1766 10.7373 16.4695 11.0302Z" fill="#202733"/>
+<path d="M6.46952 21.0302C6.76241 21.3231 7.23717 21.3231 7.53006 21.0302C7.82296 20.7373 7.82296 20.2625 7.53006 19.9696L5.31034 17.7499H14.4998C14.914 17.7499 15.2498 17.4141 15.2498 16.9999C15.2498 16.5857 14.914 16.2499 14.4998 16.2499H5.31034L7.53006 14.0302C7.82296 13.7373 7.82296 13.2625 7.53006 12.9696C7.23717 12.6767 6.76241 12.6767 6.46952 12.9696L2.96952 16.4696C2.67662 16.7625 2.67662 17.2373 2.96952 17.5302L6.46952 21.0302Z" fill="#202733"/>
 </svg>

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

@@ -1,3 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M16.4697 21.0303C16.7626 21.3232 17.2374 21.3232 17.5303 21.0303L21.0303 17.5303C21.3232 17.2374 21.3232 16.7626 21.0303 16.4697C20.7374 16.1768 20.2626 16.1768 19.9697 16.4697L17.75 18.6893L17.75 9.5C17.75 9.08579 17.4142 8.75 17 8.75C16.5858 8.75 16.25 9.08579 16.25 9.5L16.25 18.6893L14.0303 16.4697C13.7374 16.1768 13.2626 16.1768 12.9697 16.4697C12.6768 16.7626 12.6768 17.2374 12.9697 17.5303L16.4697 21.0303ZM4.03033 7.53033L6.25 5.31066L6.25 14.5C6.25 14.9142 6.58579 15.25 7 15.25C7.41421 15.25 7.75 14.9142 7.75 14.5L7.75 5.31066L9.96967 7.53033C10.2626 7.82322 10.7374 7.82322 11.0303 7.53033C11.3232 7.23744 11.3232 6.76256 11.0303 6.46967L7.53033 2.96967C7.23744 2.67678 6.76256 2.67678 6.46967 2.96967L2.96967 6.46967C2.67678 6.76256 2.67678 7.23744 2.96967 7.53033C3.26256 7.82322 3.73744 7.82322 4.03033 7.53033Z" fill="#202733"/>
+<path d="M7 15.25C7.41422 15.25 7.75 14.9142 7.75 14.5V5.31055L9.96973 7.53028C10.2626 7.82317 10.7374 7.82317 11.0303 7.53028C11.3232 7.23738 11.3232 6.76262 11.0303 6.46973L7.53028 2.96973C7.23738 2.67684 6.76262 2.67684 6.46973 2.96973L2.96973 6.46973C2.67684 6.76262 2.67684 7.23738 2.96973 7.53028C3.26262 7.82317 3.73738 7.82317 4.03028 7.53028L6.25 5.31055V14.5C6.25 14.9142 6.58579 15.25 7 15.25Z" fill="#202733"/>
+<path d="M16.4697 21.0303C16.7626 21.3232 17.2374 21.3232 17.5303 21.0303L21.0303 17.5303C21.3232 17.2374 21.3232 16.7626 21.0303 16.4697C20.7374 16.1768 20.2626 16.1768 19.9697 16.4697L17.75 18.6895V9.5C17.75 9.08579 17.4142 8.75 17 8.75C16.5858 8.75 16.25 9.08579 16.25 9.5V18.6895L14.0303 16.4697C13.7374 16.1768 13.2626 16.1768 12.9697 16.4697C12.6768 16.7626 12.6768 17.2374 12.9697 17.5303L16.4697 21.0303Z" fill="#202733"/>
 </svg>

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

@@ -1,3 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.25 19.5C11.25 19.9142 10.9143 20.25 10.5 20.25H4.50003C4.30112 20.25 4.11035 20.171 3.9697 20.0303C3.82905 19.8897 3.75003 19.6989 3.75003 19.5L3.75003 13.5C3.75003 13.0858 4.08582 12.75 4.50003 12.75C4.91424 12.75 5.25003 13.0858 5.25003 13.5L5.25003 17.6894L9.96971 12.9697C10.2626 12.6768 10.7375 12.6768 11.0304 12.9697C11.3233 13.2626 11.3233 13.7374 11.0304 14.0303L6.3107 18.75L10.5 18.75C10.9143 18.75 11.25 19.0858 11.25 19.5ZM19.5 11.25C19.0858 11.25 18.75 10.9142 18.75 10.5L18.75 6.31066L14.0304 11.0303C13.7375 11.3232 13.2626 11.3232 12.9697 11.0303C12.6768 10.7374 12.6768 10.2626 12.9697 9.96967L17.6894 5.24998L13.5 5.24998C13.0858 5.24998 12.75 4.9142 12.75 4.49998C12.75 4.08577 13.0858 3.74998 13.5 3.74998L19.5 3.74998C19.6989 3.74998 19.8897 3.829 20.0304 3.96965C20.171 4.11031 20.25 4.30107 20.25 4.49998L20.25 10.5C20.25 10.9142 19.9142 11.25 19.5 11.25Z" fill="#202733"/>
+<path d="M19.5 11.25C19.9142 11.25 20.25 10.9142 20.25 10.5V4.5C20.25 4.30109 20.1709 4.11038 20.0303 3.96973C19.8896 3.82907 19.6989 3.75 19.5 3.75H13.5C13.0858 3.75002 12.75 4.0858 12.75 4.5C12.75 4.9142 13.0858 5.24998 13.5 5.25H17.6895L12.9697 9.96973C12.6769 10.2626 12.6769 10.7374 12.9697 11.0303C13.2626 11.3232 13.7374 11.3232 14.0303 11.0303L18.75 6.31055V10.5C18.75 10.9142 19.0858 11.25 19.5 11.25Z" fill="#202733"/>
+<path d="M10.5 20.25C10.9142 20.25 11.25 19.9142 11.25 19.5C11.25 19.0858 10.9142 18.75 10.5 18.75H6.31055L11.0303 14.0303C11.3232 13.7374 11.3232 13.2626 11.0303 12.9697C10.7374 12.6768 10.2626 12.6768 9.96973 12.9697L5.25 17.6895V13.5C5.25 13.0858 4.91421 12.75 4.5 12.75C4.08579 12.75 3.75 13.0858 3.75 13.5V19.5C3.75 19.6989 3.82907 19.8896 3.96973 20.0303C4.11038 20.1709 4.30109 20.25 4.5 20.25H10.5Z" fill="#202733"/>
 </svg>

@navikt/aksel-icons/icons/FocusRoom.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="M6.71973 10.25C7.11737 10.25 7.44043 10.5858 7.44043 11V15C7.44043 15.138 7.54728 15.2498 7.67969 15.25H10.0801C11.0079 15.25 11.7598 16.0335 11.7598 17V21C11.7598 21.4142 11.4377 21.75 11.04 21.75C10.6424 21.75 10.3203 21.4142 10.3203 21V17C10.3203 16.862 10.2126 16.75 10.0801 16.75H7.67969C6.75199 16.7498 6 15.9664 6 15V11C6 10.5859 6.32221 10.2502 6.71973 10.25ZM18.7197 11.25C19.1174 11.25 19.4404 11.5858 19.4404 12C19.4404 12.4142 19.1174 12.75 18.7197 12.75H16.0801V21C16.0801 21.4141 15.7578 21.7498 15.3604 21.75C14.9627 21.75 14.6396 21.4142 14.6396 21V12.75H11.5195C11.1221 12.7497 10.7998 12.4141 10.7998 12C10.7998 11.5859 11.1221 11.2503 11.5195 11.25H18.7197ZM18.5742 5.62793C18.7715 5.26833 19.2124 5.14321 19.5576 5.34863C19.9026 5.55421 20.0223 6.01256 19.8252 6.37207L17.6982 10.25H13.9199C13.5223 10.25 13.2002 9.91419 13.2002 9.5C13.2002 9.08581 13.5223 8.75004 13.9199 8.75H16.8623L18.5742 5.62793ZM6.71973 3C8.31031 3 9.59961 4.34315 9.59961 6C9.59961 7.65685 8.31031 9 6.71973 9C5.12927 8.99985 3.83984 7.65676 3.83984 6C3.83984 4.34324 5.12927 3.00015 6.71973 3ZM6.71973 4.5C5.92456 4.50015 5.28027 5.17167 5.28027 6C5.28027 6.82833 5.92456 7.49985 6.71973 7.5C7.51502 7.5 8.16016 6.82843 8.16016 6C8.16016 5.17157 7.51502 4.5 6.71973 4.5Z" fill="#202733"/>
+</svg>

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

@@ -0,0 +1,7 @@
+name: FocusRoom
+category: Workplace
+sub_category: Workplace
+keywords:
+  - FocusRoom
+variant: Stroke
+created_at: 15.06.2026

@navikt/aksel-icons/icons/FocusRoomFill.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="M6.71973 10.25C7.11737 10.25 7.44043 10.5858 7.44043 11V15C7.44043 15.138 7.54728 15.2498 7.67969 15.25H10.0801C11.0079 15.25 11.7598 16.0335 11.7598 17V21C11.7598 21.4142 11.4377 21.75 11.04 21.75C10.6424 21.75 10.3203 21.4142 10.3203 21V17C10.3203 16.862 10.2126 16.75 10.0801 16.75H7.67969C6.75199 16.7498 6 15.9664 6 15V11C6 10.5859 6.32221 10.2502 6.71973 10.25ZM18.7197 11.25C19.1174 11.25 19.4404 11.5858 19.4404 12C19.4404 12.4142 19.1174 12.75 18.7197 12.75H16.0801V21C16.0801 21.4141 15.7578 21.7498 15.3604 21.75C14.9627 21.75 14.6396 21.4142 14.6396 21V12.75H11.5195C11.1221 12.7497 10.7998 12.4141 10.7998 12C10.7998 11.5859 11.1221 11.2503 11.5195 11.25H18.7197ZM18.5742 5.62793C18.7715 5.26833 19.2124 5.14321 19.5576 5.34863C19.9026 5.55421 20.0223 6.01256 19.8252 6.37207L17.6982 10.25H13.9199C13.5223 10.25 13.2002 9.91419 13.2002 9.5C13.2002 9.08581 13.5223 8.75004 13.9199 8.75H16.8623L18.5742 5.62793ZM6.71973 3C8.31031 3 9.59961 4.34315 9.59961 6C9.59961 7.65685 8.31031 9 6.71973 9C5.12927 8.99985 3.83984 7.65676 3.83984 6C3.83984 4.34324 5.12927 3.00015 6.71973 3Z" fill="#202733"/>
+</svg>

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

@@ -0,0 +1,7 @@
+name: FocusRoomFill
+category: Workplace
+sub_category: Workplace
+keywords:
+  - FocusRoomFill
+variant: Fill
+created_at: 15.06.2026

@navikt/aksel-icons/icons/Newsletter.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="M18.25 3C18.4489 3 18.6396 3.07907 18.7803 3.21973C18.9209 3.36038 19 3.55109 19 3.75V7.18848L21.0303 8.91309C21.1709 9.05362 21.2499 9.2446 21.25 9.44336L21.2012 20.2461C21.2009 20.6601 20.8652 20.9961 20.4512 20.9961L3.5 20.9824C3.08579 20.9824 2.75 20.6466 2.75 20.2324V9.43066C2.75007 9.23181 2.82908 9.04099 2.96973 8.90039L5 7.18848V3.75C5 3.33579 5.33579 3 5.75 3H18.25ZM5.38086 19.5508H18.6191L13.6553 14.249H10.3447L5.38086 19.5508ZM15.1201 13.6533L19.75 18.3428L19.7012 10.9424L15.1201 13.6533ZM4.29883 18.2324L8.87891 13.6533L4.25 10.832L4.29883 18.2324ZM6.5 10.4307L10.2266 12.749H13.7734L17.5 10.4307V4.5H6.5V10.4307ZM13 9C13.4142 9 13.75 9.33579 13.75 9.75C13.75 10.1642 13.4142 10.5 13 10.5H9C8.58579 10.5 8.25 10.1642 8.25 9.75C8.25 9.33579 8.58579 9 9 9H13ZM15 6C15.4142 6 15.75 6.33579 15.75 6.75C15.75 7.16421 15.4142 7.5 15 7.5H9C8.58579 7.5 8.25 7.16421 8.25 6.75C8.25 6.33579 8.58579 6 9 6H15Z" fill="#202733"/>
+</svg>

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

@@ -0,0 +1,16 @@
+name: Newsletter
+category: Interface
+sub_category: Communication
+keywords:
+  - email
+  - message
+  - communication
+  - send
+  - e-post
+  - melding
+  - kommunikasjon
+  - sende
+  - lest
+  - read
+variant: Stroke
+created_at: 28.04.2026

@navikt/aksel-icons/icons/NewsletterFill.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="M13.0068 14.5024C13.2715 14.5026 13.5255 14.6075 13.7129 14.7944L19.5017 20.5706C19.6595 20.728 19.548 20.9975 19.3251 20.9975L4.65308 20.9966C4.43081 20.9966 4.31908 20.7283 4.47566 20.5705L10.2051 14.7983C10.3927 14.6093 10.6477 14.5026 10.9141 14.5024H13.0068ZM20.998 19.3451C20.998 19.5675 20.7293 19.6792 20.5717 19.5222L15.1631 14.1372C15.0485 14.0231 15.0712 13.8313 15.209 13.7466L20.6171 10.4212C20.7837 10.3188 20.998 10.4387 20.998 10.6342V19.3451ZM8.71191 13.7466C8.84841 13.8314 8.8701 14.0213 8.75684 14.1353L3.4293 19.4971C3.27204 19.6554 3.00195 19.5441 3.00195 19.3209V10.6475C3.00195 10.4514 3.21739 10.3316 3.38392 10.4352L8.71191 13.7466ZM18.248 3.00244C18.4468 3.00256 18.6378 3.08162 18.7783 3.22217C18.9188 3.3628 18.998 3.55363 18.998 3.75244V7.35922C18.998 7.42875 19.027 7.49514 19.078 7.54245L20.1735 8.55951C20.2948 8.67212 20.2752 8.86939 20.1341 8.95588L13.7725 12.855C13.6152 12.9513 13.4344 13.0024 13.25 13.0024H10.6699C10.4841 13.0024 10.3016 12.9508 10.1436 12.853L3.85591 8.96112C3.71561 8.87428 3.69644 8.67773 3.81731 8.56541L4.91822 7.54244C4.96913 7.49514 4.99805 7.42878 4.99805 7.3593V3.75244C4.99805 3.33837 5.33403 3.00268 5.74805 3.00244H18.248ZM8.99609 9.00244C8.58188 9.00244 8.24609 9.33823 8.24609 9.75244C8.24609 10.1667 8.58188 10.5024 8.99609 10.5024H12.9961C13.4103 10.5024 13.7461 10.1667 13.7461 9.75244C13.7461 9.33823 13.4103 9.00244 12.9961 9.00244H8.99609ZM8.99609 6.00244C8.58188 6.00244 8.24609 6.33823 8.24609 6.75244C8.24609 7.16666 8.58188 7.50244 8.99609 7.50244H14.9961C15.4103 7.50244 15.7461 7.16666 15.7461 6.75244C15.7461 6.33823 15.4103 6.00244 14.9961 6.00244H8.99609Z" fill="#202733"/>
+</svg>

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

@@ -0,0 +1,16 @@
+name: NewsletterFill
+category: Interface
+sub_category: Communication
+keywords:
+  - email
+  - message
+  - communication
+  - send
+  - e-post
+  - melding
+  - kommunikasjon
+  - sende
+  - lest
+  - read
+variant: Fill
+created_at: 28.04.2026

@navikt/aksel-icons/icons/PhoneRoom.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="M5.20338 4.77244C5.69995 4.27551 6.50465 4.27552 7.00123 4.77244L10.4817 8.25486C10.978 8.75174 10.978 9.55681 10.4817 10.0537L9.011 11.5254L12.8313 15.3476L14.302 13.8769C14.7986 13.3802 15.6033 13.3802 16.0999 13.8769L19.2297 17.0088C19.7263 17.5057 19.7263 18.3116 19.2297 18.8086L16.7717 21.2695C15.9968 22.045 14.8057 22.223 13.8381 21.708L11.3635 20.3896C7.92226 18.5574 5.12439 15.7139 3.34694 12.2422L2.27467 10.1484C1.78142 9.18501 1.96495 8.01254 2.72975 7.24705L5.20338 4.77244ZM3.80885 8.32712C3.5125 8.62391 3.44099 9.07867 3.63209 9.45212L4.70436 11.5459C6.33963 14.7399 8.91432 17.3563 12.0803 19.042L14.554 20.3594C14.9292 20.5591 15.3921 20.4902 15.6926 20.1894L17.971 17.9092L15.2005 15.1367L13.3704 16.9677C13.0725 17.2656 12.5901 17.2656 12.2922 16.9677L7.39284 12.0654C7.09489 11.7672 7.09489 11.2835 7.39284 10.9853L9.22291 9.15427L6.1028 6.0322L3.80885 8.32712ZM12.5198 2.03123C15.1966 1.833 17.7522 2.57398 19.5891 4.41209C21.4261 6.25041 22.1672 8.80829 21.969 11.4873C21.9376 11.9074 21.5715 12.2222 21.1516 12.1914C20.7318 12.16 20.4167 11.7941 20.4475 11.374C20.62 9.04017 19.9703 6.95274 18.511 5.49216C17.0515 4.03157 14.9654 3.38104 12.6331 3.55369C12.2132 3.58471 11.8472 3.26967 11.8157 2.84959C11.7846 2.42926 12.0999 2.06265 12.5198 2.03123ZM13.6438 5.98826C14.8638 5.96973 15.9043 6.4827 16.7122 7.29099C17.5201 8.09947 18.0334 9.14124 18.0149 10.3623C18.0083 10.7836 17.6615 11.1204 17.2405 11.1142C16.8195 11.1077 16.4825 10.7611 16.4885 10.3398C16.4999 9.59681 16.1987 8.93711 15.6331 8.37107C15.0675 7.80517 14.4086 7.50328 13.6663 7.51462C13.2453 7.52069 12.8993 7.18406 12.8928 6.76267C12.8867 6.34138 13.2228 5.99483 13.6438 5.98826Z" fill="#202733"/>
+</svg>

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

@@ -0,0 +1,16 @@
+name: PhoneRoom
+category: Workplace
+sub_category: Workplace
+keywords:
+  - veiledning
+  - mobil
+  - telefon
+  - call
+  - ringe
+  - ringer
+  - hjelp
+  - snakke
+  - talk
+  - help
+variant: Stroke
+created_at: 15.06.2026

@navikt/aksel-icons/icons/PhoneRoomFill.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="M5.20338 4.77244C5.69995 4.27551 6.50465 4.27552 7.00123 4.77244L10.4817 8.25486C10.978 8.75174 10.978 9.55681 10.4817 10.0537L9.011 11.5254L12.8313 15.3476L14.302 13.8769C14.7986 13.3802 15.6033 13.3802 16.0999 13.8769L19.2297 17.0088C19.7263 17.5057 19.7263 18.3116 19.2297 18.8086L16.7717 21.2695C15.9968 22.045 14.8057 22.223 13.8381 21.708L11.3635 20.3896C7.92226 18.5574 5.12439 15.7139 3.34694 12.2422L2.27467 10.1484C1.78142 9.18501 1.96495 8.01254 2.72975 7.24705L5.20338 4.77244ZM12.5198 2.03123C15.1966 1.833 17.7522 2.57398 19.5891 4.41209C21.4261 6.25041 22.1672 8.80829 21.969 11.4873C21.9376 11.9074 21.5715 12.2222 21.1516 12.1914C20.7318 12.16 20.4167 11.7941 20.4475 11.374C20.62 9.04017 19.9703 6.95274 18.511 5.49216C17.0515 4.03157 14.9654 3.38104 12.6331 3.55369C12.2132 3.58471 11.8472 3.26967 11.8157 2.84959C11.7846 2.42926 12.0999 2.06265 12.5198 2.03123ZM13.6438 5.98826C14.8638 5.96973 15.9043 6.4827 16.7122 7.29099C17.5201 8.09947 18.0334 9.14124 18.0149 10.3623C18.0083 10.7836 17.6615 11.1204 17.2405 11.1142C16.8195 11.1077 16.4825 10.7611 16.4885 10.3398C16.4999 9.59681 16.1987 8.93711 15.6331 8.37107C15.0675 7.80517 14.4086 7.50328 13.6663 7.51462C13.2453 7.52069 12.8993 7.18406 12.8928 6.76267C12.8867 6.34138 13.2228 5.99483 13.6438 5.98826Z" fill="#202733"/>
+</svg>

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

@@ -0,0 +1,16 @@
+name: PhoneRoomFill
+category: Workplace
+sub_category: Workplace
+keywords:
+  - veiledning
+  - mobil
+  - telefon
+  - call
+  - ringe
+  - ringer
+  - hjelp
+  - snakke
+  - talk
+  - help
+variant: Fill
+created_at: 15.06.2026

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

@@ -1,3 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 20.25C10.0858 20.25 9.74998 19.9142 9.74998 19.5L9.74999 15.3107L5.03035 20.0303C4.73745 20.3232 4.26258 20.3232 3.96969 20.0303C3.67679 19.7374 3.67679 19.2626 3.96968 18.9697L8.68935 14.25L4.5 14.25C4.08579 14.25 3.75 13.9142 3.75 13.5C3.75 13.0858 4.08579 12.75 4.5 12.75L10.5 12.75C10.6989 12.75 10.8897 12.829 11.0303 12.9697C11.171 13.1103 11.25 13.3011 11.25 13.5L11.25 19.5C11.25 19.9142 10.9142 20.25 10.5 20.25ZM20.25 10.5C20.25 10.9142 19.9142 11.25 19.5 11.25H13.5C13.0858 11.25 12.75 10.9142 12.75 10.5V4.5C12.75 4.08579 13.0858 3.75 13.5 3.75C13.9142 3.75 14.25 4.08579 14.25 4.5V8.68935L18.9697 3.96967C19.2626 3.67678 19.7375 3.67678 20.0303 3.96967C20.3232 4.26256 20.3232 4.73744 20.0303 5.03033L15.3107 9.74999H19.5C19.9142 9.74999 20.25 10.0858 20.25 10.5Z" fill="#202733"/>
+<path d="M19.5 11.25C19.9142 11.25 20.25 10.9142 20.25 10.5C20.25 10.0858 19.9142 9.75 19.5 9.75H15.3105L20.0303 5.03027C20.3232 4.73738 20.3232 4.26262 20.0303 3.96973C19.7374 3.67685 19.2626 3.67684 18.9697 3.96973L14.25 8.68945V4.5C14.25 4.08579 13.9142 3.75 13.5 3.75C13.0858 3.75001 12.75 4.08579 12.75 4.5V10.5C12.75 10.9142 13.0858 11.25 13.5 11.25H19.5Z" fill="#202733"/>
+<path d="M10.5 20.25C10.9142 20.25 11.25 19.9142 11.25 19.5V13.5C11.25 13.3011 11.1709 13.1104 11.0303 12.9697C10.8896 12.8291 10.6989 12.75 10.5 12.75H4.5C4.08579 12.75 3.75 13.0858 3.75 13.5C3.75001 13.9142 4.0858 14.25 4.5 14.25H8.68945L3.96973 18.9697C3.67685 19.2626 3.67685 19.7374 3.96973 20.0303C4.26261 20.3232 4.73738 20.3232 5.03027 20.0303L9.75 15.3105V19.5C9.75 19.9142 10.0858 20.25 10.5 20.25Z" fill="#202733"/>
 </svg>

@navikt/aksel-icons/icons/Sleep.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="M12.0303 3.35547C12.4444 3.35547 12.7801 3.69137 12.7803 4.10547C12.7803 4.51968 12.4445 4.85547 12.0303 4.85547C7.73347 4.85555 4.25023 8.33897 4.25 12.6357C4.25 16.9327 7.73333 20.4159 12.0303 20.416C16.3273 20.416 19.8105 16.9328 19.8105 12.6357C19.8105 11.671 19.6352 10.7489 19.3154 9.89844C19.1698 9.51078 19.3663 9.07739 19.7539 8.93164C20.1415 8.78614 20.5739 8.98267 20.7197 9.37012C21.102 10.3868 21.3105 11.4879 21.3105 12.6357C21.3105 17.7612 17.1557 21.916 12.0303 21.916C6.90491 21.9159 2.75 17.7611 2.75 12.6357C2.75023 7.51055 6.90504 3.35555 12.0303 3.35547ZM9.87988 12.79C10.1727 12.4972 10.6475 12.4973 10.9404 12.79C11.2333 13.0829 11.2333 13.5577 10.9404 13.8506C9.62972 15.1608 7.50487 15.1611 6.19434 13.8506C5.9016 13.5578 5.90181 13.0829 6.19434 12.79C6.48722 12.4972 6.96199 12.4972 7.25488 12.79C7.97963 13.5148 9.15496 13.5145 9.87988 12.79ZM16.791 12.79C17.0839 12.4972 17.5587 12.4972 17.8516 12.79C18.1443 13.0829 18.1444 13.5577 17.8516 13.8506C16.5409 15.161 14.4161 15.161 13.1055 13.8506C12.8126 13.5577 12.8127 13.0829 13.1055 12.79C13.3984 12.4971 13.8731 12.4971 14.166 12.79C14.8908 13.5147 16.0662 13.5146 16.791 12.79ZM15.6631 5.19824C15.9395 5.19839 16.1938 5.35102 16.3242 5.59473C16.4545 5.83841 16.4402 6.13424 16.2871 6.36426L15.2217 7.96289H15.6631C16.077 7.96311 16.4129 8.29896 16.4131 8.71289C16.4129 9.1268 16.077 9.46267 15.6631 9.46289H13.8203C13.5437 9.46289 13.2897 9.31025 13.1592 9.06641C13.0288 8.82264 13.043 8.52696 13.1963 8.29688L14.2617 6.69824H13.8203C13.4061 6.69824 13.0703 6.36246 13.0703 5.94824C13.0705 5.53418 13.4062 5.19824 13.8203 5.19824H15.6631ZM20.0859 2.25C20.3668 2.2501 20.6244 2.4075 20.7529 2.65723C20.8811 2.90679 20.8592 3.20713 20.6963 3.43555L19.2402 5.47461H20.0859C20.4999 5.47475 20.8357 5.81066 20.8359 6.22461C20.8359 6.63874 20.5 6.97447 20.0859 6.97461H17.7822C17.5013 6.97461 17.2438 6.81808 17.1152 6.56836C16.9867 6.31856 17.0086 6.01767 17.1719 5.78906L18.6289 3.75H17.7822C17.368 3.75 17.0322 3.41421 17.0322 3C17.0322 2.58579 17.368 2.25 17.7822 2.25H20.0859Z" fill="#202733"/>
+</svg>

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

@@ -0,0 +1,12 @@
+name: Sleep
+category: Workplace
+sub_category: Workplace
+keywords:
+  - waiting room
+  - venterom
+  - vente
+  - venting
+  - tid
+  - pause
+variant: Stroke
+created_at: 15.06.2026

@navikt/aksel-icons/icons/SleepFill.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="M12.0303 3.08301C12.7306 3.08301 13.4132 3.15958 14.0703 3.30371C14.2228 3.33716 14.1962 3.53125 14.04 3.53125C12.8746 3.53125 11.9173 4.41718 11.8018 5.55078L11.79 5.78027C11.79 6.23766 11.9282 6.6626 12.1631 7.01758C12.2192 7.10242 12.2245 7.21328 12.168 7.29785C11.7082 7.98803 11.6653 8.87606 12.0566 9.60742C12.4474 10.3372 13.2086 10.7959 14.04 10.7959H15.8838C17.1252 10.7951 18.1321 9.78853 18.1328 8.54688V8.54492C18.1327 8.418 18.2306 8.30788 18.3574 8.30762H20.3066C20.4283 8.30755 20.544 8.36793 20.5967 8.47754C21.1936 9.72036 21.5303 11.1121 21.5303 12.583C21.5303 17.8297 17.277 22.083 12.0303 22.083C6.78368 22.0829 2.53027 17.8296 2.53027 12.583C2.53027 7.33638 6.78368 3.08314 12.0303 3.08301ZM10.9482 12.623C10.6554 12.3303 10.1806 12.3304 9.8877 12.623C9.16282 13.3474 7.98745 13.3476 7.2627 12.623C6.96985 12.3302 6.49504 12.3303 6.20215 12.623C5.90962 12.916 5.90941 13.3908 6.20215 13.6836C7.51269 14.994 9.63758 14.9938 10.9482 13.6836C11.2409 13.3907 11.2409 12.9159 10.9482 12.623ZM17.8594 12.623C17.5665 12.3303 17.0917 12.3303 16.7988 12.623C16.074 13.3476 14.8987 13.3475 14.1738 12.623C13.881 12.3302 13.4062 12.3303 13.1133 12.623C12.8206 12.916 12.8204 13.3908 13.1133 13.6836C14.4239 14.9939 16.5488 14.9939 17.8594 13.6836C18.152 13.3908 18.1519 12.9159 17.8594 12.623ZM15.8828 5.03125C16.1592 5.03142 16.4135 5.18405 16.5439 5.42773C16.6742 5.6714 16.6599 5.96726 16.5068 6.19727L15.4414 7.7959H15.8828C16.2967 7.79615 16.6326 8.13199 16.6328 8.5459C16.6328 8.64938 16.6122 8.74819 16.5742 8.83789C16.5362 8.92758 16.4809 9.00831 16.4131 9.07617C16.2942 9.19503 16.1355 9.27406 15.959 9.29199C15.9339 9.29454 15.9085 9.29588 15.8828 9.2959H14.04C13.798 9.2959 13.5734 9.1789 13.4336 8.98633C13.4136 8.95882 13.3952 8.92989 13.3789 8.89941C13.3626 8.86893 13.3487 8.83755 13.3369 8.80566C13.2662 8.61441 13.2763 8.40227 13.3652 8.21875C13.38 8.18827 13.3969 8.15855 13.416 8.12988L14.4814 6.53125H14.04C13.6258 6.53125 13.29 6.19546 13.29 5.78125C13.2902 5.36718 13.6259 5.03125 14.04 5.03125H15.8828ZM20.3057 2.08301C20.5865 2.08313 20.8442 2.24053 20.9727 2.49023C21.1008 2.73978 21.0789 3.04015 20.916 3.26855L19.46 5.30762H20.3057C20.7196 5.30779 21.0555 5.64369 21.0557 6.05762C21.0557 6.47172 20.7197 6.80744 20.3057 6.80762H18.002C17.8966 6.80762 17.7944 6.78583 17.7012 6.74512C17.6081 6.70447 17.524 6.6449 17.4541 6.57031C17.4306 6.54527 17.4087 6.5186 17.3887 6.49023C17.3689 6.46216 17.351 6.43245 17.335 6.40137C17.2868 6.30774 17.2593 6.20696 17.2529 6.10547C17.2444 5.97005 17.273 5.83335 17.3369 5.71094C17.3529 5.68034 17.3712 5.65065 17.3916 5.62207L18.8486 3.58301H18.002C17.5877 3.58301 17.252 3.24722 17.252 2.83301C17.252 2.41879 17.5877 2.08301 18.002 2.08301H20.3057Z" fill="#202733"/>
+</svg>

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

@@ -0,0 +1,12 @@
+name: SleepFill
+category: Workplace
+sub_category: Workplace
+keywords:
+  - waiting room
+  - venterom
+  - vente
+  - venting
+  - tid
+  - pause
+variant: Fill
+created_at: 15.06.2026

@navikt/aksel-icons/icons/Timeline.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="M18 3C19.6569 3 21 4.34315 21 6V18L20.9961 18.1543C20.9184 19.6883 19.6883 20.9184 18.1543 20.9961L18 21H6L5.8457 20.9961C4.31166 20.9184 3.08163 19.6883 3.00391 18.1543L3 18V6C3 4.34315 4.34315 3 6 3H18ZM6 4.5C5.17157 4.5 4.5 5.17157 4.5 6V18C4.5 18.8284 5.17157 19.5 6 19.5H18C18.8284 19.5 19.5 18.8284 19.5 18V6C19.5 5.17157 18.8284 4.5 18 4.5H6ZM17 15.25C17.4142 15.25 17.75 15.5858 17.75 16C17.75 16.4142 17.4142 16.75 17 16.75H10C9.58579 16.75 9.25 16.4142 9.25 16C9.25 15.5858 9.58579 15.25 10 15.25H17ZM14 11.25C14.4142 11.25 14.75 11.5858 14.75 12C14.75 12.4142 14.4142 12.75 14 12.75H7C6.58579 12.75 6.25 12.4142 6.25 12C6.25 11.5858 6.58579 11.25 7 11.25H14ZM17 7.25C17.4142 7.25 17.75 7.58579 17.75 8C17.75 8.41421 17.4142 8.75 17 8.75H10C9.58579 8.75 9.25 8.41421 9.25 8C9.25 7.58579 9.58579 7.25 10 7.25H17Z" fill="#202733"/>
+</svg>

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

@@ -0,0 +1,7 @@
+name: Timeline
+category: Interface
+sub_category: View
+keywords:
+  - Timeline
+variant: Stroke
+created_at: 03.07.2026

@navikt/aksel-icons/icons/TimelineFill.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="M18 3C19.6569 3 21 4.34315 21 6V18L20.9961 18.1543C20.9184 19.6883 19.6883 20.9184 18.1543 20.9961L18 21H6L5.8457 20.9961C4.31166 20.9184 3.08163 19.6883 3.00391 18.1543L3 18V6C3 4.34315 4.34315 3 6 3H18ZM10 15.25C9.58579 15.25 9.25 15.5858 9.25 16C9.25 16.4142 9.58579 16.75 10 16.75H17C17.4142 16.75 17.75 16.4142 17.75 16C17.75 15.5858 17.4142 15.25 17 15.25H10ZM7 11.25C6.58579 11.25 6.25 11.5858 6.25 12C6.25 12.4142 6.58579 12.75 7 12.75H14C14.4142 12.75 14.75 12.4142 14.75 12C14.75 11.5858 14.4142 11.25 14 11.25H7ZM10 7.25C9.58579 7.25 9.25 7.58579 9.25 8C9.25 8.41421 9.58579 8.75 10 8.75H17C17.4142 8.75 17.75 8.41421 17.75 8C17.75 7.58579 17.4142 7.25 17 7.25H10Z" fill="#202733"/>
+</svg>

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

@@ -0,0 +1,7 @@
+name: TimelineFill
+category: Interface
+sub_category: View
+keywords:
+  - TimelineFill
+variant: Fill
+created_at: 03.07.2026

@navikt/aksel-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-icons",
-  "version": "8.10.2",
+  "version": "8.15.0",
   "author": "Aksel | Nav",
   "homepage": "https://aksel.nav.no/ikoner",
   "repository": {
@@ -78,18 +78,17 @@
     "adm-zip": "^0.5.10",
     "concurrently": "9.2.1",
     "copyfiles": "^2.4.1",
-    "cross-zip-cli": "1.0.0",
     "fast-glob": "3.3.3",
     "hast-util-select": "6.0.4",
-    "js-yaml": "^4.1.1",
+    "js-yaml": "^5.2.1",
     "lodash": "4.18.1",
-    "prettier": "3.8.1",
-    "react": "19.2.5",
+    "prettier": "3.8.3",
+    "react": "19.2.7",
     "rehype-parse": "9.0.1",
     "tsc-alias": "1.8.16",
     "tsx": "^4.20.6",
-    "typescript": "6.0.2",
+    "typescript": "6.0.3",
     "unified": "11.0.5",
-    "vitest": "4.1.4"
+    "vitest": "4.1.9"
   }
 }

@navikt/aksel-stylelint/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @navikt/aksel-stylelint
 
+## 8.15.0
+
+## 8.14.0
+
+## 8.13.1
+
+## 8.13.0
+
+## 8.12.1
+
+## 8.12.0
+
+### Patch Changes
+
+- Stylelint: Fixed bug in aksel-no-deprecated-classes rule skipping some classes ([#4920](https://github.com/navikt/aksel/pull/4920))
+
+## 8.11.1
+
+## 8.11.0
+
+## 8.10.6
+
+## 8.10.5
+
+## 8.10.4
+
+## 8.10.3
+
 ## 8.10.2
 
 ## 8.10.1

@navikt/aksel-stylelint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-stylelint",
-  "version": "8.10.2",
+  "version": "8.15.0",
   "type": "module",
   "engines": {
     "node": ">=18.12.0"
@@ -30,7 +30,8 @@
     "./recommended": "./dist/recommended.js"
   },
   "files": [
-    "/dist"
+    "/dist",
+    "!**/*.test.js"
   ],
   "scripts": {
     "test": "yarn build && node --import tsx --test ./dist/**/*.test.js",
@@ -42,14 +43,14 @@
     "dev": "yarn watch:lint"
   },
   "devDependencies": {
-    "@navikt/ds-css": "^8.10.2",
-    "@navikt/ds-tokens": "^8.10.2",
+    "@navikt/ds-css": "^8.15.0",
+    "@navikt/ds-tokens": "^8.15.0",
     "concurrently": "9.2.1",
     "postcss-selector-parser": "^7.1.0",
     "postcss-value-parser": "^4.2.0",
-    "stylelint": "^17.2.0",
+    "stylelint": "^17.14.0",
     "stylelint-test-rule-node": "^1.0.0",
     "tsx": "^4.20.6",
-    "typescript": "6.0.2"
+    "typescript": "6.0.3"
   }
 }

@navikt/aksel-stylelint/src/rules/aksel-no-deprecated-classes/index.test.ts

@@ -51,5 +51,17 @@ testRule({
       column: 3,
       endColumn: 38,
     },
+    {
+      code: ".foo .aksel-read-more__content--closed {}",
+      description: "selector with deprecated read-more closed class",
+      message: messages.unexpected(
+        "aksel-read-more__content--closed",
+        deprecations[2].message,
+      ),
+      line: 1,
+      endLine: 1,
+      column: 7,
+      endColumn: 39,
+    },
   ],
 });

@navikt/aksel-stylelint/src/rules/aksel-no-deprecated-classes/index.ts

@@ -26,7 +26,7 @@ const ruleFunction: stylelint.Rule = () => {
               deprecation.deprecatePrefix &&
               !deprecation.classes.some((x) => className.value.startsWith(x))
             ) {
-              return;
+              continue;
             }
             stylelint.utils.report({
               message: messages.unexpected(

@navikt/aksel-stylelint/src/rules/aksel-no-internal-tokens/index.test.ts

@@ -25,7 +25,7 @@ testRule({
       line: 1,
       endLine: 1,
       column: 8,
-      endColumn: 25,
+      endColumn: 19,
     },
     {
       code: ".foo { color: var(--__axc-bar) }",

@navikt/aksel-stylelint/src/rules/aksel-no-internal-tokens/index.ts

@@ -47,6 +47,7 @@ const ruleFunction: stylelint.Rule = () => {
           node,
           result: postcssResult,
           ruleName,
+          word: node.prop,
         });
       }
     });

@navikt/aksel-stylelint/src/rules/index.ts

@@ -1,4 +1,4 @@
-import { Rule } from "stylelint";
+import type { Rule } from "stylelint";
 import designTokenExists from "./aksel-design-token-exists/index.js";
 import noGlobalOverride from "./aksel-design-token-no-global-override/index.js";
 import classOverride from "./aksel-no-class-override/index.js";

@navikt/aksel/CHANGELOG.md

@@ -1,5 +1,95 @@
 # @navikt/aksel
 
+## 8.15.0
+
+## 8.14.0
+
+### Patch Changes
+
+- Updated dependencies [[`3997c04`](https://github.com/navikt/aksel/commit/3997c043a4603df5ebb04f4f75049b6cfbda7004)]:
+  - @navikt/ds-css@8.14.0
+  - @navikt/ds-tokens@8.14.0
+
+## 8.13.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@8.13.1
+  - @navikt/ds-tokens@8.13.1
+
+## 8.13.0
+
+### Patch Changes
+
+- Updated dependencies [[`386cbcb`](https://github.com/navikt/aksel/commit/386cbcbd1df687b44a7d2013c4673b3dafcc645f), [`7acd2a4`](https://github.com/navikt/aksel/commit/7acd2a4416ca30f9053502ab3b9461b4e919f0c1)]:
+  - @navikt/ds-css@8.13.0
+  - @navikt/ds-tokens@8.13.0
+
+## 8.12.1
+
+### Patch Changes
+
+- Updated dependencies [[`0e9547e`](https://github.com/navikt/aksel/commit/0e9547ecab76ea7548c0525b33a68e5733b2a73a), [`0e9547e`](https://github.com/navikt/aksel/commit/0e9547ecab76ea7548c0525b33a68e5733b2a73a)]:
+  - @navikt/ds-css@8.12.1
+  - @navikt/ds-tokens@8.12.1
+
+## 8.12.0
+
+### Patch Changes
+
+- Updated dependencies [[`366d72f`](https://github.com/navikt/aksel/commit/366d72feebc4aa6d297eaa0051144b4b60b853a6)]:
+  - @navikt/ds-css@8.12.0
+  - @navikt/ds-tokens@8.12.0
+
+## 8.11.1
+
+### Patch Changes
+
+- Updated dependencies [[`54634ff`](https://github.com/navikt/aksel/commit/54634ffed97000a96b375820a4693413ddb78066), [`a375059`](https://github.com/navikt/aksel/commit/a375059cdb983c95c0ab6004cc81e5eee3516833)]:
+  - @navikt/ds-tokens@8.11.1
+  - @navikt/ds-css@8.11.1
+
+## 8.11.0
+
+### Patch Changes
+
+- Updated dependencies [[`dc5299b`](https://github.com/navikt/aksel/commit/dc5299b1f95bd53ae0b0cd9c48aa20c87eb1438f)]:
+  - @navikt/ds-css@8.11.0
+  - @navikt/ds-tokens@8.11.0
+
+## 8.10.6
+
+### Patch Changes
+
+- Updated dependencies [[`1f39de4`](https://github.com/navikt/aksel/commit/1f39de488fa3b1942c5e81cf22da3cf4c93bde26)]:
+  - @navikt/ds-css@8.10.6
+  - @navikt/ds-tokens@8.10.6
+
+## 8.10.5
+
+### Patch Changes
+
+- Updated dependencies [[`35295e7`](https://github.com/navikt/aksel/commit/35295e7c010bd4866c3cd4ae9ff72641a234b089), [`0522dfa`](https://github.com/navikt/aksel/commit/0522dfae59320477b10cab2941d0b004d280d79a)]:
+  - @navikt/ds-css@8.10.5
+  - @navikt/ds-tokens@8.10.5
+
+## 8.10.4
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@8.10.4
+  - @navikt/ds-tokens@8.10.4
+
+## 8.10.3
+
+### Patch Changes
+
+- Updated dependencies [[`92f6d9e`](https://github.com/navikt/aksel/commit/92f6d9e93b879962df8415f7fad22203174dd3a8)]:
+  - @navikt/ds-css@8.10.3
+  - @navikt/ds-tokens@8.10.3
+
 ## 8.10.2
 
 ### Patch Changes

@navikt/aksel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel",
-  "version": "8.10.2",
+  "version": "8.15.0",
   "description": "Aksel command line interface. Codemods and other utilities for Aksel users.",
   "author": "Aksel | Nav designsystem team",
   "license": "MIT",
@@ -40,18 +40,15 @@
     "url": "https://github.com/navikt/aksel/issues"
   },
   "dependencies": {
-    "@navikt/ds-css": "^8.10.2",
-    "@navikt/ds-tokens": "^8.10.2",
     "chalk": "5.6.2",
     "cli-progress": "3.12.0",
-    "clipboardy": "5.0.1",
+    "clipboardy": "5.3.1",
     "commander": "14.0.3",
     "enquirer": "2.4.1",
     "fast-glob": "3.3.3",
-    "figlet": "1.10.0",
+    "figlet": "1.11.0",
     "is-git-clean": "1.1.0",
     "jscodeshift": "17.3.0",
-    "jscodeshift-add-imports": "1.0.11",
     "lodash": "4.18.1"
   },
   "devDependencies": {
@@ -59,8 +56,8 @@
     "@types/is-git-clean": "1.1.2",
     "@types/jscodeshift": "17.3.0",
     "rimraf": "6.1.3",
-    "typescript": "6.0.2",
-    "vitest": "4.1.4"
+    "typescript": "6.0.3",
+    "vitest": "4.1.9"
   },
   "sideEffects": false,
   "engines": {

@navikt/aksel/src/codemod/codeshift.utils.ts

@@ -45,6 +45,6 @@ function cleanExtensions(ext: string): string[] {
     .map((e) => e.replace(".", ""));
 }
 
-export { GLOB_IGNORE_PATTERNS, getDefaultGlob, cleanExtensions };
+export { GLOB_IGNORE_PATTERNS, getDefaultGlob };
 
 export type { SupportedCodemodExtensions };

@navikt/aksel/src/codemod/run-codeshift.ts

@@ -1,5 +1,5 @@
 import chalk from "chalk";
-import { Command } from "commander";
+import type { Command } from "commander";
 import fg from "fast-glob";
 import * as jscodeshift from "jscodeshift/src/Runner";
 import path from "node:path";

@navikt/aksel/src/codemod/run-version-migration.ts

@@ -1,5 +1,5 @@
 import chalk from "chalk";
-import { Command } from "commander";
+import type { Command } from "commander";
 import Enquirer from "enquirer";
 import {
   getMigrationsForVersion,

@navikt/aksel/src/codemod/utils/ast.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   API,
   ASTPath,
   ImportDeclaration,

@navikt/aksel/src/codemod/utils/check.ts

@@ -54,7 +54,7 @@ export function check(
   });
 }
 
-export function checkScenarios(
+function checkScenarios(
   dirName: string,
   { migration, scenarios, extension = "js", options = {} }: ScenarioT,
 ) {

@navikt/aksel/src/codemod/utils/imports.ts

@@ -1,4 +1,5 @@
-import core, { Collection } from "jscodeshift";
+import type core from "jscodeshift";
+import type { Collection } from "jscodeshift";
 
 export function getImportSpecifier(
   j: core.JSCodeshift,

@navikt/aksel/src/codemod/utils/packageImports.ts

@@ -1,4 +1,5 @@
-import core, { Collection, JSCodeshift } from "jscodeshift";
+import type core from "jscodeshift";
+import type { Collection, JSCodeshift } from "jscodeshift";
 
 // add import declaration after first existing import declaration, or
 // at the beginning of the file

@navikt/aksel/src/codemod/utils/removeProps.ts

@@ -1,4 +1,5 @@
-import core, { Collection } from "jscodeshift";
+import type core from "jscodeshift";
+import type { Collection } from "jscodeshift";
 
 export default function removePropsFromComponent(
   _: core.JSCodeshift,

@navikt/aksel/src/codemod/v8-tokens/run-tooling.ts

@@ -1,16 +1,16 @@
 import chalk from "chalk";
-import { Command } from "commander";
+import type { Command } from "commander";
 import Enquirer from "enquirer";
 import fg from "fast-glob";
 import * as jscodeshift from "jscodeshift/src/Runner";
 import path from "node:path";
 import {
   GLOB_IGNORE_PATTERNS,
-  SupportedCodemodExtensions,
+  type SupportedCodemodExtensions,
   getDefaultGlob,
 } from "../codeshift.utils";
 import { validateGit } from "../validation";
-import { TokenStatus } from "./config/TokenStatus";
+import type { TokenStatus } from "./config/TokenStatus";
 import { printRemaining } from "./tasks/print-remaining";
 import { getStatus } from "./tasks/status";
 

@navikt/aksel/src/codemod/v8-tokens/tasks/print-remaining.ts

@@ -2,7 +2,7 @@ import chalk, { type ForegroundColorName } from "chalk";
 import clipboardy from "clipboardy";
 import Enquirer from "enquirer";
 import path from "node:path";
-import { TokenStatus } from "../config/TokenStatus";
+import type { TokenStatus } from "../config/TokenStatus";
 import { getStatus } from "./status";
 
 async function printRemaining(files: string[], status?: TokenStatus["status"]) {

@navikt/aksel/src/codemod/validation.ts

@@ -1,5 +1,5 @@
 import chalk from "chalk";
-import { Command } from "commander";
+import type { Command } from "commander";
 import isGitClean from "is-git-clean";
 import {
   getMigrationNames,

@navikt/core/css/.gitignore

@@ -1 +0,0 @@
-!*.d.ts

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,85 @@
 # @navikt/ds-css
 
+## 8.15.0
+
+### Minor Changes
+
+- DataGrid: New component `DataGrid.Preferences` ([#5030](https://github.com/navikt/aksel/pull/5030))
+
+### Patch Changes
+
+- Lookup: Changed text-decoration from dotted to dashed ([#5032](https://github.com/navikt/aksel/pull/5032))
+
+- InlineMessage: Adjusted gap between icon and text to `4px` for size small ([#5031](https://github.com/navikt/aksel/pull/5031))
+
+- Lookup: updated focus-outline ([#5032](https://github.com/navikt/aksel/pull/5032))
+
+## 8.14.0
+
+### Minor Changes
+
+- Lookup: :tada: New component `Lookup`. ([#4998](https://github.com/navikt/aksel/pull/4998))
+
+## 8.13.1
+
+## 8.13.0
+
+### Minor Changes
+
+- DataGrid: Added `columnDividers`-setting to DataGrid.Settings ([#4963](https://github.com/navikt/aksel/pull/4963))
+
+### Patch Changes
+
+- Timeline: Update AxisLabel width calculation ([#4968](https://github.com/navikt/aksel/pull/4968))
+
+## 8.12.1
+
+### Patch Changes
+
+- DataGrid: Fixed sticky columns horizontal shadows ([#4960](https://github.com/navikt/aksel/pull/4960))
+
+- DataGrid: Fixed zebra-stripes with sticky columns ([#4960](https://github.com/navikt/aksel/pull/4960))
+
+## 8.12.0
+
+### Minor Changes
+
+- 🎨 ActionMenu: New medium content size and a prop to add indent to items without left marker to align items ([#4911](https://github.com/navikt/aksel/pull/4911))
+
+## 8.11.1
+
+### Patch Changes
+
+- DataGrid: Loading-bar now stays stuck to sticky-header. ([#4897](https://github.com/navikt/aksel/pull/4897))
+
+## 8.11.0
+
+### Minor Changes
+
+- DataGrid: New `preview` of DataGrid and DataGrid.Table-components ([#4885](https://github.com/navikt/aksel/pull/4885))
+
+## 8.10.6
+
+### Patch Changes
+
+- 🎨 InfoCard: Added bigger padding for medium sized InfoCard.Message ([#4861](https://github.com/navikt/aksel/pull/4861))
+
+## 8.10.5
+
+### Patch Changes
+
+- Pagination: Fix selected-styling in forced-colors mode ([#4858](https://github.com/navikt/aksel/pull/4858))
+
+- Button: Fix issue where secondary and tertiary variants did not have correct text color is certain cases ([#4857](https://github.com/navikt/aksel/pull/4857))
+
+## 8.10.4
+
+## 8.10.3
+
+### Patch Changes
+
+- Add module declaration to avoid TypeScript error when importing ([`92f6d9e`](https://github.com/navikt/aksel/commit/92f6d9e93b879962df8415f7fad22203174dd3a8))
+
 ## 8.10.2
 
 ### Patch Changes

@navikt/core/css/config/_mappings.d.ts

@@ -1,25 +0,0 @@
-export declare const rootDir = "dist";
-export declare const globalDir = "dist/global";
-export declare const componentDir = "dist/component";
-export declare const typoCss = "typography.css";
-export declare const formCss = "form.css";
-export declare const primitivesCss = "primitives.css";
-export declare const componentsCss = "components.css";
-export declare const StyleMappings: {
-  baseline: {
-    main: string;
-    optional: boolean;
-  }[];
-  components: (
-    | {
-        component: string;
-        main: string;
-        dependencies: string[];
-      }
-    | {
-        component: string;
-        main: string;
-        dependencies?: undefined;
-      }
-  )[];
-};

@navikt/core/css/config/_mappings.js

@@ -1,264 +0,0 @@
-const rootDir = "dist";
-const globalDir = "dist/global";
-const componentDir = "dist/component";
-
-const typoCss = "typography.css";
-const formCss = "form.css";
-const primitivesCss = "primitives.css";
-const componentsCss = "components.css";
-
-const StyleMappings = {
-  baseline: [
-    {
-      main: "fonts.css",
-      optional: false,
-    },
-    {
-      main: "tokens.css",
-      optional: false,
-    },
-    {
-      main: "reset.css",
-      optional: true,
-    },
-    {
-      main: "baseline.css",
-      optional: false,
-    },
-    {
-      main: "print.css",
-      optional: true,
-    },
-  ],
-  components: [
-    {
-      component: "Box",
-      main: primitivesCss,
-    },
-    {
-      component: "Page",
-      main: primitivesCss,
-    },
-    {
-      component: "HGrid",
-      main: primitivesCss,
-    },
-    {
-      component: "HStack",
-      main: primitivesCss,
-    },
-    {
-      component: "VStack",
-      main: primitivesCss,
-    },
-    {
-      component: "Spacer",
-      main: primitivesCss,
-    },
-    {
-      component: "Show",
-      main: primitivesCss,
-    },
-    {
-      component: "Hide",
-      main: primitivesCss,
-    },
-    {
-      component: "Accordion",
-      main: "accordion.css",
-      dependencies: [typoCss],
-    },
-    { component: "Alert", main: "alert.css", dependencies: [typoCss] },
-    {
-      component: "ActionMenu",
-      main: "action-menu.css",
-      dependencies: [typoCss],
-    },
-    {
-      component: "BodyLong",
-      main: typoCss,
-    },
-    {
-      component: "BodyShort",
-      main: typoCss,
-    },
-    {
-      component: "Button",
-      main: "button.css",
-      dependencies: [typoCss, "loader.css"],
-    },
-    { component: "Cell", main: "grid.css" },
-    { component: "Chat", main: "chat.css", dependencies: [typoCss] },
-    { component: "Checkbox", main: formCss, dependencies: [typoCss] },
-    { component: "CheckboxGroup", main: formCss, dependencies: [typoCss] },
-    { component: "Chips", main: "chips.css", dependencies: [typoCss] },
-    {
-      component: "UNSAFE_Combobox",
-      main: "combobox.css",
-      dependencies: [typoCss, "chips.css"],
-    },
-    {
-      component: "ConfirmationPanel",
-      main: formCss,
-      dependencies: [typoCss],
-    },
-    {
-      component: "CopyButton",
-      main: "copybutton.css",
-      dependencies: [typoCss],
-    },
-    { component: "Detail", main: typoCss },
-    {
-      component: "Dialog",
-      main: "dialog.css",
-      dependencies: [typoCss, "button.css", primitivesCss],
-    },
-    {
-      component: "Dropdown",
-      main: "dropdown.css",
-      dependencies: [typoCss, "popover.css"],
-    },
-    { component: "ErrorMessage", main: typoCss },
-    { component: "ErrorSummary", main: formCss, dependencies: [typoCss] },
-    {
-      component: "ExpansionCard",
-      main: "expansion-card.css",
-      dependencies: [typoCss],
-    },
-    { component: "Fieldset", main: formCss, dependencies: [typoCss] },
-    {
-      component: "FileUpload",
-      main: formCss,
-      dependencies: [
-        typoCss,
-        "button.css",
-        "loader.css",
-        "link.css",
-        primitivesCss,
-      ],
-    },
-    {
-      component: "GlobalAlert",
-      main: "alert.css",
-      dependencies: [typoCss, "button.css"],
-    },
-    {
-      component: "GuidePanel",
-      main: "guide-panel.css",
-      dependencies: [typoCss],
-    },
-    { component: "Heading", main: typoCss, dependencies: [typoCss] },
-    {
-      component: "HelpText",
-      main: "help-text.css",
-      dependencies: ["popover.css"],
-    },
-    { component: "InfoCard", main: "alert.css", dependencies: [typoCss] },
-    { component: "Ingress", main: typoCss },
-    {
-      component: "InlineMessage",
-      main: "inline-message.css",
-      dependencies: [typoCss],
-    },
-    {
-      component: "InternalHeader",
-      main: "internalheader.css",
-      dependencies: [typoCss],
-    },
-    { component: "Label", main: typoCss },
-    { component: "Link", main: "link.css", dependencies: [typoCss] },
-    {
-      component: "LinkCard",
-      main: "link-card.css",
-      dependencies: [typoCss, "link-anchor.css"],
-    },
-    {
-      component: "LinkPanel",
-      main: "link-panel.css",
-      dependencies: [typoCss, "panel.css"],
-    },
-    { component: "List", main: "list.css", dependencies: [typoCss] },
-    { component: "Loader", main: "loader.css" },
-    {
-      component: "LocalAlert",
-      main: "alert.css",
-      dependencies: [typoCss, "button.css"],
-    },
-    {
-      component: "Modal",
-      main: "modal.css",
-      dependencies: [typoCss, "button.css"],
-    },
-    {
-      component: "Pagination",
-      main: "pagination.css",
-      dependencies: [typoCss, "button.css"],
-    },
-    { component: "Panel", main: "panel.css" },
-    { component: "Popover", main: "popover.css" },
-    { component: "Process", main: "process.css", dependencies: [typoCss] },
-    { component: "ProgressBar", main: "progress-bar.css" },
-    { component: "Provider", main: "" },
-    { component: "Radio", main: formCss, dependencies: [typoCss] },
-    { component: "RadioGroup", main: formCss, dependencies: [typoCss] },
-    { component: "ReadMore", main: "read-more.css", dependencies: [typoCss] },
-    { component: "Search", main: formCss, dependencies: [typoCss] },
-    { component: "Select", main: formCss, dependencies: [typoCss] },
-    { component: "Skeleton", main: "skeleton.css", dependencies: [] },
-    { component: "Stepper", main: "stepper.css", dependencies: [typoCss] },
-    { component: "Switch", main: formCss, dependencies: [typoCss] },
-    { component: "Table", main: "table.css", dependencies: [typoCss] },
-    { component: "Tabs", main: "tabs.css", dependencies: [typoCss] },
-    { component: "Tag", main: "tag.css", dependencies: [typoCss] },
-    { component: "TextField", main: formCss, dependencies: [typoCss] },
-    { component: "Textarea", main: formCss, dependencies: [typoCss] },
-    {
-      component: "FormSummary",
-      main: formCss,
-      dependencies: [typoCss, "link.css"],
-    },
-    {
-      component: "FormProgress",
-      main: formCss,
-      dependencies: [
-        typoCss,
-        "progress-bar.css",
-        "button.css",
-        primitivesCss,
-        "stepper.css",
-      ],
-    },
-    {
-      component: "ToggleGroup",
-      main: "toggle-group.css",
-      dependencies: [typoCss],
-    },
-    { component: "Tooltip", main: "tooltip.css", dependencies: [typoCss] },
-    {
-      component: "Timeline",
-      main: "timeline.css",
-      dependencies: [typoCss],
-    },
-    {
-      component: "DatePicker",
-      main: "date.css",
-      dependencies: [typoCss, "button.css", "popover.css", primitivesCss],
-    },
-    {
-      component: "MonthPicker",
-      main: "date.css",
-      dependencies: [typoCss, "button.css", "popover.css"],
-    },
-  ],
-};
-
-module.exports = {
-  StyleMappings,
-  typoCss,
-  formCss,
-  primitivesCss,
-  componentsCss,
-  rootDir,
-  globalDir,
-  componentDir,
-};

@navikt/core/css/config/bundle.ts

@@ -4,14 +4,20 @@ import fastglob from "fast-glob";
 import { Features, browserslistToTargets, bundleAsync } from "lightningcss";
 import fs from "node:fs";
 import path from "node:path";
-import {
-  StyleMappings,
-  componentsCss,
-  formCss,
-  primitivesCss,
-} from "../config/_mappings";
 import packageJSON from "../package.json";
 
+const BASELINE_CSS_LIST = [
+  "fonts.css",
+  "tokens.css",
+  "reset.css",
+  "baseline.css",
+  "print.css",
+];
+
+const FORM_CSS = "form.css";
+const PRIMITIVES_CSS = "primitives.css";
+const COMPONENTS_CSS = "components.css";
+
 bundle();
 
 async function bundle() {
@@ -45,7 +51,7 @@ async function bundle() {
       minify: false,
       include:
         Features.Nesting | Features.MediaRangeSyntax | Features.HexAlphaColors,
-
+      exclude: Features.LightDark,
       drafts: {
         customMedia: false,
       },
@@ -64,19 +70,7 @@ async function bundle() {
       },
     });
 
-    let codeString = code.toString();
-
-    /**
-     * LightningCSS adds these tokens to the bundle that we want removed:
-     * --lightningcss-light: initial;
-     * --lightningcss-dark: ;
-     */
-    codeString = codeString
-      .split("\n")
-      .filter((line) => !line.includes("--lightningcss-"))
-      .join("\n");
-
-    return codeString;
+    return code.toString();
   }
 
   /**
@@ -140,17 +134,17 @@ async function bundle() {
   await bundleCSS(rootComponentsParser).then((file) => {
     writeFile({
       file,
-      filePath: componentsCss,
+      filePath: COMPONENTS_CSS,
     });
   });
 
   /* ------------------------------ /global build ----------------------------- */
-  for (const style of StyleMappings.baseline) {
+  for (const style of BASELINE_CSS_LIST) {
     function parser(input: string) {
       const parsed = input
         .split("\n")
         .filter((line) => line.startsWith("@import"))
-        .filter((line) => line.includes(style.main))
+        .filter((line) => line.includes(style))
         .join("\n");
       return layerDefinition + "\n" + parsed;
     }
@@ -158,7 +152,7 @@ async function bundle() {
     await bundleCSS(parser).then((file) => {
       writeFile({
         file,
-        filePath: `global/${style.main}`,
+        filePath: `global/${style}`,
       });
     });
   }
@@ -176,7 +170,7 @@ async function bundle() {
   await bundleCSS(rootFormParser).then((file) => {
     writeFile({
       file,
-      filePath: `component/${formCss}`,
+      filePath: `component/${FORM_CSS}`,
     });
   });
 
@@ -193,7 +187,7 @@ async function bundle() {
   await bundleCSS(rootPrimitivesParser).then((file) => {
     writeFile({
       file,
-      filePath: `component/${primitivesCss}`,
+      filePath: `component/${PRIMITIVES_CSS}`,
     });
   });
 

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "8.10.2",
+  "version": "8.15.0",
   "description": "CSS for Nav Designsystem",
   "author": "Aksel | Nav designsystem team",
   "keywords": [
@@ -14,7 +14,9 @@
   "files": [
     "*",
     "!dist/version",
-    "!config/bundle.js"
+    "!config",
+    "!.gitignore",
+    "!CHANGELOG.md"
   ],
   "repository": {
     "type": "git",
@@ -30,12 +32,11 @@
     "css:get-version": "node config/get-version.js"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^8.10.2",
-    "browserslist": "^4.25.0",
-    "esbuild": "^0.27.4",
+    "@navikt/ds-tokens": "^8.15.0",
+    "browserslist": "^4.28.4",
+    "esbuild": "^0.28.0",
     "fast-glob": "3.3.3",
     "lightningcss": "^1.30.1",
-    "normalize.css": "^8.0.1",
     "tsx": "^4.20.6"
   },
   "browserslist": [
@@ -46,9 +47,13 @@
   ],
   "main": "./dist/index.css",
   "exports": {
-    ".": "./dist/index.css",
-    "./dist/*": "./dist/*",
-    "./tokens.json": "./tokens.json",
-    "./config/_mappings": "./config/_mappings.js"
+    ".": {
+      "types": "./types.d.ts",
+      "default": "./dist/index.css"
+    },
+    "./dist/*": {
+      "types": "./types.d.ts",
+      "default": "./dist/*"
+    }
   }
 }

@navikt/core/css/src/action-menu.css

@@ -1,5 +1,19 @@
 /* --------------------------- ActionMenu content --------------------------- */
 .aksel-action-menu__content {
+  --__axc-action-menu-content-p-block: var(--ax-space-6);
+  --__axc-action-menu-content-p-inline: var(--ax-space-8);
+  --__axc-action-menu-item-height: 2rem;
+  --__axc-action-menu-item-font-size: var(--ax-font-size-medium);
+  --__axc-action-menu-content-group-label-pt: var(--ax-space-2);
+
+  &[data-size="medium"] {
+    --__axc-action-menu-content-p-block: var(--ax-space-8);
+    --__axc-action-menu-content-p-inline: var(--ax-space-12);
+    --__axc-action-menu-item-height: var(--ax-space-40);
+    --__axc-action-menu-item-font-size: var(--ax-font-size-large);
+    --__axc-action-menu-content-group-label-pt: var(--ax-space-4);
+  }
+
   overflow: hidden;
   border-radius: var(--ax-radius-12);
   border: 1px solid var(--ax-border-neutral-subtleA);
@@ -19,10 +33,8 @@
 }
 
 .aksel-action-menu__content > .aksel-action-menu__content-inner {
-  --__axc-action-menu-content-p: var(--ax-space-8);
   --__axc-action-menu-item-pr: var(--ax-space-8);
   --__axc-action-menu-item-pl: var(--ax-space-8);
-  --__axc-action-menu-item-height: 2rem;
 
   border-radius: var(--ax-radius-12);
   background-color: var(--ax-bg-raised);
@@ -30,7 +42,8 @@
   max-width: min(95vw, 640px);
   animation-duration: 160ms;
   animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-  padding: var(--__axc-action-menu-content-p);
+  padding-block: var(--__axc-action-menu-content-p-block);
+  padding-inline: var(--__axc-action-menu-content-p-inline);
   overflow: auto;
   /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
   max-height: var(--__axc-action-menu-content-available-height);
@@ -47,8 +60,8 @@
   position: relative;
   padding-left: var(--__axc-action-menu-item-pl);
   padding-right: var(--__axc-action-menu-item-pr);
-  font-size: var(--ax-font-size-medium);
-  scroll-margin-block: var(--__axc-action-menu-content-p);
+  font-size: var(--__axc-action-menu-item-font-size);
+  scroll-margin-block: var(--__axc-action-menu-content-p-block);
   line-height: 1.5;
   color: var(--ax-text-neutral);
   text-decoration: none;
@@ -68,8 +81,14 @@
     pointer-events: none;
   }
 
+  /* Indent items with left marker or if data-indent is set to true */
+  &[data-indent="true"],
   &[data-marker="left"] {
-    --__axc-action-menu-item-pl: var(--ax-space-24);
+    --__axc-action-menu-item-pl: var(--ax-space-28); /* 28px */
+
+    .aksel-action-menu__content[data-size="medium"] & {
+      --__axc-action-menu-item-pl: var(--ax-space-32); /* 32px */
+    }
   }
 }
 
@@ -152,19 +171,23 @@
 .aksel-action-menu__label {
   display: flex;
   align-items: center;
-  min-height: calc(var(--__axc-action-menu-item-height) - 6px);
+  min-height: var(--__axc-action-menu-item-height);
   padding-right: var(--__axc-action-menu-item-pr);
   padding-left: var(--__axc-action-menu-item-pl);
-  color: var(--ax-text-neutral-subtle);
   border-radius: var(--ax-radius-4);
   user-select: none;
   cursor: default;
-  font-size: var(--ax-font-size-small);
+  font-size: var(--ax-font-size-medium);
+  font-weight: var(--ax-font-weight-bold);
+}
+
+.aksel-action-menu__group:not(:first-child) .aksel-action-menu__label {
+  padding-top: var(--__axc-action-menu-content-group-label-pt);
 }
 
 .aksel-action-menu__divider {
   height: 1px;
-  margin-block: var(--ax-space-8);
+  margin-block: var(--ax-space-4);
   background-color: var(--ax-border-neutral-subtleA);
 }