📝 Added comments

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

.changeset/better-trains-sneeze.md

@@ -1,5 +0,0 @@
----
-"@navikt/ds-react": patch
----
-
-Dialog: Improved scrollbar handling when opening dialog-popup.

.changeset/cold-melons-strive.md

@@ -1,5 +0,0 @@
----
-"@navikt/ds-react": patch
----
-
-useDatepicker, useMonthpicker: Add JsDoc to validation object

.changeset/smooth-lizards-pay.md

@@ -1,5 +0,0 @@
----
-"@navikt/ds-react": patch
----
-
-DatePicker, MonthPicker: Removed controlled tabindex on Input-button based on open-state.

.github/PULL_REQUEST_TEMPLATE.md

@@ -13,4 +13,4 @@
 - [ ] Exports (`@navikt/core/react/src/index.ts` and `@navikt/core/react/package.json`)
 - [ ] New component? CSS import (`@navikt/core/css/index.css`)
 - [ ] Breaking change? Update migration guide. Consider codemod.
-- [ ] Changeset (Format: `<Component>: <gitmoji?> <Text>.` E.g. "Button: :sparkles: Add feature xyz.")
+- [ ] Changeset (Format: `<Component>: <gitmoji?> <Text>` E.g. "Button: :sparkles: Add feature xyz")

.github/copilot-instructions.md

@@ -1,246 +1,145 @@
-# Aksel – GitHub Copilot Instructions
+# Aksel - Copilot Instructions
 
-This file tells Copilot how to work inside the Aksel monorepo. Prefer existing patterns and symbols, keep changes minimal, and reference real files in this repo.
+## Use this file first
 
-## How to act in this monorepo (quick)
+- 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.
 
-- Edit only what’s asked. Don’t invent files/APIs or refactors.
-- One file at a time. Provide a single coherent diff per file.
-- Use existing exports, tokens, CSS layers, and patterns before adding new ones.
-- When touching packages under `@navikt/*`, also update exports and stories nearby.
-- Add or adjust tests and stories when behavior/visuals change.
-- Link files with repo paths like `@navikt/react/src/...` or `aksel.nav.no/website/...`.
-- Keep changes focused and minimal; avoid drive-by rewrites or formatting churn.
-- Preserve public APIs unless the request explicitly calls for a breaking change (add a changeset if user-facing).
+## How to use this file
 
-## General code guidelines (Copilot)
+- 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
 
-- Verify before you claim. Don’t speculate.
-- Preserve unrelated code and existing structure.
 - No apologies, no “I think”, no change summaries.
 - Don’t ask to confirm info that’s already in context.
-- Prefer explicit, descriptive names and follow current style.
 - Favor performance and security; add robust error handling and safe logging.
-- Keep functions small and focused; remove duplication.
-- Replace hardcoded values with named constants when reasonable.
-- Prefer composition over deep inheritance; keep modules cohesive.
+- 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
 
-- Default tone: short and answer-first. Aim for 1–3 concise sentences before any code.
+- 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.
-- Use existing APIs, utilities, tokens, and patterns. Don’t add new deps unless requested.
-- Preserve style: imports, naming, types, JSX patterns, token usage, CSS layers.
-- Reference files and symbols with repo-relative paths and backticks, e.g. `@navikt/ds-react/src/...`.
 - 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 tests/visual changes: add/update the closest test/story next to the changed file.
-- For Next.js: don’t mix `app/` and `pages/` in the same hierarchy; prefer server components where used; add "use client" only when required.
-- For CSS/tokens: never hard-code colors/spacing; use tokens and existing layers.
 - For performance/security: avoid unnecessary re-renders, side effects at module top-level, unsafe HTML, and leaking env vars.
 
-## Repository overview
+## Repo summary
 
-Aksel is NAV’s design system: React components, CSS, design tokens, icons, tooling, and the documentation site. It’s a Yarn 4 workspaces monorepo.
+- Large Yarn 4 workspaces monorepo for NAV's design system: public React/CSS/tokens/icons/stylelint/CLI packages plus docs site and 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.
 
-- Languages: TypeScript, CSS, React, Next.js
-- Package manager: Yarn v4 (packageManager: `yarn@4.4.0`)
-- Build: Per-package TypeScript builds (run via root scripts)
-- Tests: Vitest + React Testing Library
+## Start and validate
 
-Related files: `package.json`, `eslint.config.js`, `biome.json`, `tsconfig.json`.
+1. `corepack enable`
+2. `yarn install`
+3. `yarn boot`
 
-## Prerequisites
+- Run `yarn boot` after first install and after `yarn clean`.
+- Full install may need `NPM_AUTH_TOKEN` for GitHub Packages.
 
-- Yarn 4 via Corepack is expected by the repo (`packageManager` field).
-- Some maintenance scripts use Deno (for example `scripts/deno/changelog/createMainChangelog.ts`). Install Deno if you run those.
-- Most packages are public. If you encounter 401s from GitHub Packages in a custom setup, set `NPM_AUTH_TOKEN` with `read:packages`.
-
-For limited installs (no website), you can focus core 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
 ```
 
-## Repository structure (short)
+## Definition of done
 
-```
-@navikt/
-├─ core/react       # @navikt/ds-react – React components
-├─ core/css         # @navikt/ds-css – CSS
-├─ core/tokens      # @navikt/ds-tokens – tokens
-├─ core/tailwind    # @navikt/ds-tailwind – Tailwind preset
-├─ aksel-icons      # @navikt/aksel-icons – icons
-├─ aksel-stylelint  # @navikt/aksel-stylelint – stylelint rules
-└─ aksel            # @navikt/aksel – CLI/tooling
+- 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.
 
-aksel.nav.no/
-├─ website          # Next.js documentation site
-└─ playroom         # Component playground
+### Common local commands
 
-examples/           # Example apps
-scripts/            # Build/maintenance scripts
-```
+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:
 
-## Build and development
+- `yarn boot` - build all workspaces
+- `yarn test` - run all workspace tests
+- `yarn lint` - eslint + stylelint + biome + cycle + version checks
+- `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 clean` - remove build artifacts
+- `yarn workspace @navikt/ds-react build`
+- `yarn workspace @navikt/ds-react test`
+- `yarn workspace website test`
+- `yarn workspace playroom sync-imports`
 
-Setup:
+### Validated locally
 
-```bash
-yarn && yarn boot
-```
+- 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`.
 
-Useful scripts (root `package.json`):
+## Where to edit
 
-```bash
-yarn boot                    # Build all workspaces (topological)
-yarn storybook               # Storybook dev (port 6006)
-yarn storybook:aksel         # Storybook with website config (port 6007)
-yarn dev                     # Run documentation website
-yarn test                    # Run workspace tests
-yarn lint                    # ESLint + Stylelint (full install recommended)
-yarn clean                   # Clean generated files
-yarn changeset               # Create a changeset
-yarn changelog               # Generate main changelog (Deno)
-yarn biome:lint              # Optional extra linting with Biome
-```
+- `@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/css/src/` - component CSS
+- `@navikt/core/tokens/src/` - design token source
+- `@navikt/core/tailwind/` - Tailwind preset
+- `@navikt/aksel-icons/icons/` - source SVGs; `src/` is generated
+- `@navikt/aksel-stylelint/src/` - Stylelint rules/config
+- `@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`
 
-Note: `yarn lint` runs across the repo and may require full install (website ESLint plugins).
+## Coding defaults
 
-## CI and validation
+- 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.
 
-- Pre-commit (Husky): `lint-staged`, plus internal version sync checks.
-- CI typically runs: lint, unit tests, example/website checks, and Chromatic when applicable.
+## React and ds-react specifics
 
-Common failure causes:
+- 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`.
 
-- Missing dependencies in a focused install when running repo-wide scripts
-- TypeScript errors in dependent workspaces
-- Stylelint token checks failing due to missing token imports
+## CSS and tokens
 
-Quality gates to check locally before opening a PR:
+- 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.
 
-- Build: `yarn boot` succeeds without TS errors.
-- Lint/format: `yarn lint` (and optional `yarn biome:lint`) passes.
-- Tests: `yarn test` for changed workspaces are green.
-- Storybook/website (when UI changes): boots locally without errors.
+## Stories, tests, website
 
-## Tests
-
-- Framework: Vitest (jsdom where needed)
-- Website config: `aksel.nav.no/website/config/vitest.config.ts`
-- Test locations: `**/__tests__/**` and `**/*.test.*`
-- Add tests for new behavior and keep existing tests passing
-- Prefer small, focused tests. Cover the happy path and 1–2 edge cases.
-- Use Testing Library queries that reflect user intent (role/name), avoid brittle selectors.
-
-## Linting and formatting
-
-- ESLint config lives at root: `eslint.config.js` (React, Next.js, Storybook, Testing Library, custom rules)
-- Stylelint is configured in root `package.json` with `@navikt/aksel-stylelint`
-- Tokens are validated via Stylelint and `csstools/value-no-unknown-custom-properties`
-- Biome config: `biome.json` (optional extra lint/format)
-- Prettier uses import-sort; website adds Tailwind plugin via override
-- Avoid disabling lint rules unless necessary; if you must, comment why.
-
-## Packages and exports
-
-- Synchronized versions: `@navikt/ds-react`, `@navikt/ds-css`, `@navikt/aksel-icons`, `@navikt/ds-tokens`, `@navikt/ds-tailwind`
-- Typical package layout:
-
-```
-src/
-├─ index.ts                 # Package exports
-└─ <component>/
-     ├─ index.ts              # Component exports
-     ├─ <component>.tsx       # Implementation
-     └─ <component>.stories.tsx
-```
-
-When adding/editing components in `@navikt/react`:
-
-- Update exports in `src/index.ts` and per-component `index.ts`
-- Add/maintain stories and tests next to the component
-- Follow existing props, theming, and token patterns
-- Keep props stable; prefer additive changes. Deprecate before removal when possible.
-- Ensure tree-shakeability; avoid side effects at module top-level.
-
-## Common workflows
-
-Add a new component
-
-1. Implement under `@navikt/react/src/...`
-2. Add stories and tests
-3. Export from the package `index.ts`
-4. Run `yarn boot` and fix types/lint
-5. Create a changeset (`yarn changeset`)
-
-Component change checklist (quick):
-
-- [ ] Implementation updated under `@navikt/react/src/...`
-- [ ] Exports updated (`src/index.ts` and component `index.ts`)
-- [ ] Stories updated/added and render without errors
-- [ ] Tests updated/added and passing (Vitest)
-- [ ] Tokens/CSS use existing variables and layers (no hard-coded values)
-- [ ] Changeset added if user-facing (version bump and notes)
-
-Modify an existing component
-
-1. Keep the public API stable unless explicitly requested
-2. Update tests if behavior changes; update stories if visuals change
-3. Add a changeset for user-facing changes
-
-Troubleshooting
-
-1. `yarn clean && yarn boot`
-2. Check workspace dependency build order/issues
-3. If focusing workspaces, avoid running repo-wide scripts that depend on the website
-
-## Theming and tokens
-
-- Use design tokens and CSS layers; avoid hard-coded colors/spacing.
-- Stylelint enforces token usage; unknown/missing custom properties will fail lint.
-
-## Website (Next.js)
-
-- The website uses Next.js 15 and contains both `app/` and `pages/`. Place new files in the router that matches the surrounding code.
-- Prefer server components where already used; mark client components with `"use client"` only when needed.
-- Use Next Image, metadata APIs, and established utilities already in `aksel.nav.no/website`.
-- Logging uses Next logger/pino; follow patterns in `aksel.nav.no/website` (see `next-logger.config.js`).
-- Use existing route conventions and file organization; don’t mix `app/` and `pages/` in the same hierarchy.
-- For Tailwind, prefer the shared preset `@navikt/ds-tailwind` and follow website `tailwind.config.js` patterns.
-
-## Versioning and releases
-
-- Use Changesets: `yarn changeset` and the root scripts:
-  - `yarn create-version` (applies versions, updates changelog, reinstalls)
-  - `yarn release` (boots, docgen, publish, git release helper)
-- Main changelog script: `scripts/deno/changelog/createMainChangelog.ts`
-
-## Answer snippets (for Copilot)
-
-- Build: “Run yarn boot” (see root `package.json`)
-- Storybook: “Run yarn storybook” (or `yarn storybook:aksel` for the website config)
-- Lint/format: “Run yarn lint” (full install recommended) and optional `yarn biome:lint`
-- Versioning: “Run yarn changeset, then yarn create-version”
-- Theming: “Import @navikt/ds-css in global CSS”
-
-## Code reviews (for Copilot)
-
-- Summarize the pull-request on maximum two sentences
-- Avoid listing all changes, focus on the most important ones
-- Check the description against the actual changes
-- Ensure the PR title is descriptive and follows the conventional commit format
-- Look for: correctness, style, performance, security, tests, documentation
-- Check: existing patterns, exports, tokens, CSS layers
-- Make sure import paths are correct, updated and use existing aliases where possible
-- When components are changed, ensure stories and tests are updated accordingly
-- When components are changed, make sure related examples for website and playroom are updated
-- Make sure changes made to packages under `@navikt/` has a related changeset where relevant
-
-### Extra review tips
-
-- Watch for unnecessary bundle impact (large deps, dynamic imports, side effects).
-- Confirm a11y basics: semantic elements, labels, focus order, keyboard support.
-- Check security footguns: unsafe HTML, unescaped data, leaking env vars, weak CSP assumptions.
+- 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`.

.github/dependabot.yml

@@ -8,7 +8,8 @@ updates:
   - package-ecosystem: npm
     directory: /
     exclude-paths:
-      - "examples/**"
+      - "examples/astro/package.json"
+      - "examples/shadow-dom/package.json"
     schedule:
       interval: weekly
       day: monday
@@ -39,17 +40,6 @@ updates:
           - "vitest"
           - "@vitest/*"
 
-  - package-ecosystem: npm
-    directory: /examples
-    schedule:
-      interval: weekly
-      day: monday
-      time: "04:00"
-    groups:
-      all-deps:
-        patterns:
-          - "*"
-
   - package-ecosystem: github-actions
     directory: "/"
     schedule:

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

@@ -0,0 +1,11 @@
+description: "Use for JS/TS code in this repo."
+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.

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

@@ -0,0 +1,13 @@
+description: "Use for ds-react components and component CSS."
+applyTo: "@navikt/core/react/src/**", "@navikt/core/css/src/**"
+
+---
+
+# ds-react and 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.

.github/instructions/testing.instructions.md

@@ -0,0 +1,11 @@
+description: "Use for 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.

.github/instructions/website.instructions.md

@@ -0,0 +1,14 @@
+description: "Use for website and playroom work."
+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.

.github/workflows/backup-cms.yml

@@ -1,18 +1,25 @@
-name: Backup sanity dateset to gcp
+name: Backup Sanity dataset
+
 on:
   workflow_dispatch:
   schedule:
-    # 12.00 every 3 days
     - cron: "0 0 */3 * *"
+
+permissions:
+  contents: read
+
 jobs:
   execute:
+    name: Export and upload Sanity backup
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
+      - name: Checkout code
+        uses: actions/checkout@v6
         with:
-          fetch-depth: 0 # Required to retrieve git history
+          fetch-depth: 1
 
-      - uses: actions/setup-node@v6
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
         with:
           node-version: lts/*
           cache: yarn
@@ -28,11 +35,13 @@ jobs:
         env:
           SANITY_READ: ${{ secrets.SANITY_READ }}
 
-      - name: Upload GCP bucket
+      - name: Authenticate with GCP
         uses: "google-github-actions/auth@v3"
         with:
           credentials_json: "${{ secrets.gcp_credentials_prod }}"
-      - uses: "google-github-actions/upload-cloud-storage@v3"
+
+      - name: Upload backup to GCS bucket
+        uses: "google-github-actions/upload-cloud-storage@v3"
         with:
           path: ./aksel.nav.no/website
           destination: "aksel-website-prod/backups"

.github/workflows/build-e2e.yml

@@ -1,4 +1,4 @@
-name: E2E / Playwright Tests
+name: E2E tests (Playwright)
 on:
   push:
     branches: [main, next]
@@ -21,7 +21,7 @@ permissions:
 
 jobs:
   prebuild-app-for-playwright:
-    name: "Prebuild app for Playwright tests"
+    name: Build app for Playwright
     runs-on: ubuntu-latest
     env:
       IMAGE_NAME: ${{ github.repository }}-e2e
@@ -59,7 +59,7 @@ jobs:
 
   run-playwright:
     needs: [prebuild-app-for-playwright]
-    name: Playwright shard ${{ matrix.shardIndex }}
+    name: Playwright shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
     runs-on: ubuntu-latest
     container:
       image: mcr.microsoft.com/playwright:v1.58.1-noble
@@ -111,6 +111,7 @@ jobs:
           retention-days: 1
 
   merge-reports:
+    name: Merge Playwright reports
     if: ${{ !cancelled() }}
     needs: [run-playwright]
     runs-on: ubuntu-latest

.github/workflows/build-validation.yml

@@ -1,4 +1,4 @@
-name: CI
+name: Validation (Lint, Tests)
 
 on:
   push:
@@ -8,9 +8,16 @@ on:
   pull_request:
   workflow_dispatch:
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+
 jobs:
   lint:
-    name: "Linter: eslint, stylelint"
+    name: Lint (ESLint, Stylelint etc.)
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
@@ -27,7 +34,7 @@ jobs:
         run: yarn lint
 
   validate-examples:
-    name: "Validate Aksel.nav.no component examples"
+    name: Validate component examples
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
@@ -44,7 +51,7 @@ jobs:
         run: yarn validate:eksempler
 
   test:
-    name: "Tests: Unit and integration"
+    name: Unit and integration tests
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
@@ -61,7 +68,7 @@ jobs:
         run: yarn test
 
   ui:
-    name: "Tests: UI"
+    name: UI tests (Storybook)
     runs-on: ubuntu-latest
     timeout-minutes: 10
     container:

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

@@ -1,4 +1,4 @@
-name: Visual Regression Tests
+name: Visual regression (Chromatic)
 
 on:
   push:
@@ -19,6 +19,7 @@ concurrency:
 
 jobs:
   chromatic:
+    name: Run Chromatic
     runs-on: ubuntu-latest
     permissions:
       issues: write
@@ -47,7 +48,7 @@ jobs:
           buildScriptName: "build:storybook-chromatic"
           onlyChanged: true
           untraced: "**/package.json|yarn.lock|**/*.md"
-          externals: "**/core/css/*.css|**/core/css/baseline/*.css|**/core/css/form/*.css|**/core/css/primitives/*.css"
+          externals: "**/core/css/src/**/*.css"
           traceChanged: true
         env:
           STORYBOOK_GITHUB_SHA: ${{ github.sha }}

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

@@ -1,4 +1,4 @@
-name: Bundle check against main branch
+name: Bundle check (main branch)
 
 on:
   pull_request:
@@ -24,12 +24,12 @@ jobs:
         run: echo "should-run=${{ !contains(github.event.pull_request.title, 'Version Packages') }}" >> $GITHUB_OUTPUT
 
   analyze-trunk:
-    name: "Analyzing main branch"
+    name: Analyze main branch
     runs-on: ubuntu-latest
     needs: check-title
     if: ${{ needs.check-title.outputs.should-run == 'true' }}
     steps:
-      - name: Checkout main-branch
+      - name: Checkout main branch
         uses: actions/checkout@v6
         with:
           fetch-depth: 1
@@ -52,12 +52,12 @@ jobs:
           retention-days: 1
 
   analyze-local:
-    name: "Analyzing PR branch"
+    name: Analyze PR branch
     runs-on: ubuntu-latest
     needs: check-title
     if: ${{ needs.check-title.outputs.should-run == 'true' }}
     steps:
-      - name: Checkout main-branch
+      - name: Checkout PR branch
         uses: actions/checkout@v6
         with:
           fetch-depth: 1
@@ -79,7 +79,7 @@ jobs:
           retention-days: 1
 
   compare-against-trunk:
-    name: "Analyzing PR branch and comparing against main"
+    name: Compare bundles (PR vs main)
     runs-on: ubuntu-latest
     needs: [analyze-trunk, analyze-local]
     steps:
@@ -117,7 +117,7 @@ jobs:
           retention-days: 1
 
   update-comment:
-    name: "Create or update PR comment with results"
+    name: Post PR comment with results
     runs-on: ubuntu-latest
     needs: [compare-against-trunk]
     permissions:

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

@@ -1,4 +1,4 @@
-name: Bundle check against npm
+name: Bundle check (npm)
 
 on:
   pull_request:
@@ -24,12 +24,12 @@ jobs:
         run: echo "should-run=${{ contains(github.event.pull_request.title, 'Version Packages') }}" >> $GITHUB_OUTPUT
 
   analyze:
-    name: "Analyzing npm packages"
+    name: Analyze npm packages
     runs-on: ubuntu-latest
     needs: check-title
     if: ${{ needs.check-title.outputs.should-run == 'true' }}
     steps:
-      - name: Checkout main-branch
+      - name: Checkout code
         uses: actions/checkout@v6
         with:
           fetch-depth: 1
@@ -54,7 +54,7 @@ jobs:
           retention-days: 1
 
   update-comment:
-    name: "Create or update PR comment with results"
+    name: Post PR comment with results
     runs-on: ubuntu-latest
     needs: [analyze]
     permissions:

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

@@ -1,4 +1,4 @@
-name: "Update remote token config for figma variables plugin"
+name: Upload Figma token config to CDN
 
 on:
   workflow_dispatch:
@@ -10,6 +10,7 @@ on:
 
 jobs:
   upload:
+    name: Build and upload token config
     runs-on: ubuntu-latest
 
     permissions:
@@ -17,11 +18,13 @@ jobs:
       id-token: "write"
 
     steps:
-      - uses: actions/checkout@v6
+      - name: Checkout code
+        uses: actions/checkout@v6
         with:
-          fetch-depth: 0
+          fetch-depth: 1
 
-      - uses: actions/setup-node@v6
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
         with:
           node-version: lts/*
           cache: yarn
@@ -35,7 +38,8 @@ jobs:
       - name: Build tokens
         run: yarn workspace @navikt/ds-tokens build
 
-      - id: upload
+      - name: Upload config to CDN
+        id: upload
         uses: nais/deploy/actions/cdn-upload/v2@master
         with:
           team: designsystem
@@ -46,5 +50,6 @@ jobs:
           source_keep_parent_name: false
           no_cache_paths: "@navikt/tokens/figma-config.json"
 
-      - run: echo uploaded file ${{ steps.upload.outputs.uploaded }}
+      - name: Log uploaded file
+        run: echo uploaded file ${{ steps.upload.outputs.uploaded }}
         shell: bash

.github/workflows/cdn-fonts.yml

@@ -1,4 +1,4 @@
-name: "push-to-cdn"
+name: Upload fonts to CDN
 
 on:
   workflow_dispatch:
@@ -10,16 +10,19 @@ on:
 
 jobs:
   upload:
+    name: Upload fonts to CDN
     runs-on: ubuntu-latest
 
     permissions:
-      contents: "read"
-      id-token: "write"
+      contents: read
+      id-token: write
 
     steps:
-      - uses: "actions/checkout@v6"
+      - name: Checkout code
+        uses: "actions/checkout@v6"
 
-      - id: upload
+      - name: Upload fonts to CDN
+        id: upload
         uses: nais/deploy/actions/cdn-upload/v2@master
         with:
           team: aksel
@@ -28,5 +31,6 @@ jobs:
           project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}
           identity_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}
 
-      - run: echo uploaded file ${{ steps.upload.outputs.uploaded }}
+      - name: Log uploaded file
+        run: echo uploaded file ${{ steps.upload.outputs.uploaded }}
         shell: bash

.github/workflows/cleanup-images.yml

@@ -0,0 +1,26 @@
+name: Cleanup E2E Docker images
+
+on:
+  schedule:
+    - cron: "0 4 * * 1"
+  workflow_dispatch:
+
+permissions:
+  packages: write
+
+jobs:
+  cleanup:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        package-name:
+          - aksel-e2e
+    steps:
+      - name: Delete old container images
+        uses: actions/delete-package-versions@e5bc658cc4c965c472efe991f8beea3981499c55 # actions/delete-package-versions@v5
+        with:
+          package-name: ${{ matrix.package-name }}
+          package-type: container
+          delete-only-untagged-versions: false
+          min-versions-to-keep: 1
+          token: ${{ secrets.GITHUB_TOKEN }}

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

@@ -1,10 +1,15 @@
-name: Deploy aksel.ansatt.dev.nav.no
+name: Deploy dev (aksel.ansatt.dev.nav.no)
+
 on:
   workflow_dispatch:
   push:
     branches:
       - next
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: false
+
 jobs:
   build_and_deploy:
     name: Build and deploy to dev-gcp
@@ -13,6 +18,7 @@ jobs:
       packages: "write"
       contents: "read"
       id-token: "write"
+      deployments: "write"
     steps:
       - name: Checkout code
         uses: actions/checkout@v6
@@ -29,10 +35,8 @@ jobs:
           sanity_read_token: ${{ secrets.SANITY_READ }}
           sanity_read_no_drafts_token: ${{ secrets.SANITY_READ_NO_DRAFTS }}
 
-      - name: Get complete tag
-        run: echo "TAG=DEV-$( date +%s )" >> $GITHUB_ENV
-
-      - uses: nais/docker-build-push@v0
+      - name: Build and push Docker image
+        uses: nais/docker-build-push@v0
         id: docker-push
         with:
           team: designsystem

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

@@ -1,4 +1,5 @@
-name: Deploy aksel.nav.no
+name: Deploy prod (aksel.nav.no)
+
 on:
   push:
     branches:
@@ -6,15 +7,20 @@ on:
     paths:
       - "aksel.nav.no/**"
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: false
+
 env:
   IMAGE: ghcr.io/navikt/aksel
 
 jobs:
   sync_data_with_sanity:
-    name: Update component data
+    name: Sync data to Sanity
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
+      - name: Checkout code
+        uses: actions/checkout@v6
 
       - name: Setup project
         uses: ./.github/actions/setup
@@ -24,7 +30,7 @@ jobs:
       - name: Run ts-docgen
         run: yarn docgen
 
-      - name: Update sanity sync
+      - name: Update Sanity
         env:
           SANITY_WRITE: ${{ secrets.SANITY_WRITE }}
         run: yarn workspace aksel.nav.no sanity:update
@@ -36,6 +42,7 @@ jobs:
       packages: "write"
       contents: "read"
       id-token: "write"
+      deployments: "write"
     steps:
       - name: Checkout code
         uses: actions/checkout@v6
@@ -55,10 +62,8 @@ jobs:
           sanity_deploy_studio: ${{ secrets.SANITY_DEPLOY_STUDIO }}
           next_encryption_key: ${{ secrets.NEXT_ENCRYPTION_KEY }}
 
-      - name: Get complete tag
-        run: echo "TAG=PROD-$( date +%s )" >> $GITHUB_ENV
-
-      - uses: nais/docker-build-push@v0
+      - name: Build and push Docker image
+        uses: nais/docker-build-push@v0
         id: docker-push
         with:
           team: designsystem

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

@@ -1,10 +1,15 @@
-name: Deploy aksel-v7.nav.no
+name: Deploy prod (aksel-v7.nav.no)
+
 on:
   workflow_dispatch:
   push:
     branches:
       - v7-aksel.nav.no
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: false
+
 jobs:
   build_and_deploy:
     name: Build and deploy to prod-gcp
@@ -38,10 +43,8 @@ jobs:
         run: cd v7-aksel.nav.no && yarn build
         shell: bash
 
-      - name: Get complete tag
-        run: echo "TAG=PROD-V7-$( date +%s )" >> $GITHUB_ENV
-
-      - uses: nais/docker-build-push@v0
+      - name: Build and push Docker image
+        uses: nais/docker-build-push@v0
         id: docker-push
         with:
           team: designsystem

.github/workflows/release.yml

@@ -1,4 +1,4 @@
-name: Release
+name: Release packages
 
 on:
   push:
@@ -13,8 +13,8 @@ concurrency: ${{ github.workflow }}-${{ github.ref }}
 
 jobs:
   build:
-    name: "Release packages"
-    if: ${{!contains(github.event.head_commit.message, '[ci skip]')}}
+    name: Release packages
+    if: ${{ !contains(github.event.head_commit.message, '[ci skip]') }}
     runs-on: ubuntu-latest
     permissions:
       id-token: "write"
@@ -22,17 +22,20 @@ jobs:
       packages: "write"
       pull-requests: "write"
     steps:
-      - uses: actions/checkout@v6
+      - name: Checkout code
+        uses: actions/checkout@v6
         with:
           fetch-depth: 0
 
-      - uses: actions/setup-node@v6
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
         with:
           node-version: lts/*
           cache: yarn
           cache-dependency-path: "yarn.lock"
 
-      - uses: denoland/setup-deno@v2
+      - name: Setup Deno
+        uses: denoland/setup-deno@v2
         with:
           deno-version: v1.x
 
@@ -55,7 +58,7 @@ jobs:
           # Needed for push to main
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Creating .npmrc
+      - name: Create .npmrc for GPR
         run: |
           cat << EOF > "$HOME/.npmrc"
             @navikt:registry=https://npm.pkg.github.com

.github/workflows/stale.yml

@@ -1,29 +0,0 @@
-# https://github.com/actions/stale
-name: Mark stale issues
-
-on:
-  schedule:
-    - cron: "31 3 * * *"
-  workflow_dispatch:
-
-jobs:
-  stale:
-    runs-on: ubuntu-latest
-    permissions:
-      issues: write
-
-    steps:
-      - uses: actions/stale@v10
-        with:
-          repo-token: ${{ secrets.GITHUB_TOKEN }}
-          days-before-issue-stale: 120
-          days-before-pr-stale: -1
-          days-before-close: 30
-          any-of-labels: "Besvart"
-          stale-issue-message: |-
-            Hei! Det ser ut som det ikke har vært aktivitet her på en stund. Etter 30 dager vil saken bli lukket automatisk.
-
-            Om saken fortsatt er relevant eller du har oppdateringer, vil en kommentar hindre at den lukkes. Du kan alltids åpne den igjen hvis det skulle være nødvendig!
-          stale-issue-label: "no-issue-activity"
-          ascending: true
-          operations-per-run: 200

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

@@ -1,16 +1,22 @@
-name: Redeploy Naisjob (update-article-views)
+name: Update article views (Naisjob)
+
 on:
   workflow_dispatch:
+
 jobs:
   execute:
+    name: Build and deploy article views job
     runs-on: ubuntu-latest
     permissions:
-      id-token: "write"
+      contents: read
+      id-token: write
     steps:
-      - uses: actions/checkout@v6
+      - name: Checkout code
+        uses: actions/checkout@v6
         with:
           fetch-depth: 1
-      - uses: nais/docker-build-push@v0
+      - name: Build and push Docker image
+        uses: nais/docker-build-push@v0
         id: docker-push
         with:
           team: designsystem
@@ -19,7 +25,7 @@ jobs:
           project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}
           identity_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}
 
-      - name: start naisjob prod-gcp
+      - name: Deploy Naisjob to prod-gcp
         uses: nais/deploy/actions/deploy@master
         env:
           APIKEY: ${{ secrets.NAIS_DEPLOY_APIKEY }}

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname $0)/_/husky.sh"
 
-yarn lint-staged && yarn tsx ./scripts/in-sync-versions.ts
+yarn lint-staged

.husky/pre-push

@@ -0,0 +1,13 @@
+#!/bin/sh
+. "$(dirname $0)/_/husky.sh"
+
+# Only run tests when pushing to main branch
+while read local_ref local_sha remote_ref remote_sha; do
+  if [ "$remote_ref" = "refs/heads/main" ]; then
+    echo "Pushing to main branch - running tests...\n"
+    yarn test
+    exit $?
+  fi
+done
+
+exit 0

.storybook/main.ts

@@ -1,4 +1,4 @@
-import { StorybookConfig } from "@storybook/react-vite";
+import { defineMain } from "@storybook/react-vite/node";
 import FG from "fast-glob";
 import { readFileSync } from "node:fs";
 import { createRequire } from "node:module";
@@ -17,7 +17,7 @@ const includeWebsiteStories = process.env.WITH_WEBSITE === "true";
 
 const indexRegex = /export const args = {\s+index: (\d+),/;
 
-export default {
+export default defineMain({
   experimental_indexers: (indexers) => {
     // Changes here might need to be reflected in aksel.nav.no/website/.storybook/main.ts
     const customIndexer = async (fileName: string, opts: any) => {
@@ -126,9 +126,9 @@ export default {
   features: {
     actions: false,
   },
-} satisfies StorybookConfig;
+});
 
-function getAbsolutePath(value: string): any {
+function getAbsolutePath(value: string) {
   return dirname(require.resolve(join(value, "package.json")));
 }
 

.storybook/preview.tsx

@@ -1,5 +1,8 @@
-import { withThemeByClassName } from "@storybook/addon-themes";
-import { Preview } from "@storybook/react-vite";
+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 "../@navikt/core/css/src/data-token-filter.css";
@@ -55,7 +58,8 @@ const TypoDecorator = ({
   return <>{children}</>;
 };
 
-export default {
+export default definePreview({
+  addons: [addonA11y(), addonThemes(), addonDocs(), addonVitest()],
   parameters: {
     options: {
       storySort: {
@@ -132,4 +136,4 @@ export default {
       defaultTheme: "light",
     }),
   ],
-} satisfies Preview;
+});

.vscode/extensions.json

@@ -1,13 +1,13 @@
 {
   "recommendations": [
     "dbaeumer.vscode-eslint",
-    "denoland.vscode-deno",
+    "stylelint.vscode-stylelint",
+    "biomejs.biome",
     "esbenp.prettier-vscode",
+    "denoland.vscode-deno",
     "github.vscode-github-actions",
     "ms-playwright.playwright",
     "sanity-io.vscode-sanity",
-    "stylelint.vscode-stylelint",
-    "vunguyentuan.vscode-css-variables",
-    "bradlc.vscode-tailwindcss"
+    "vunguyentuan.vscode-css-variables"
   ]
 }

.vscode/settings.json

@@ -1,8 +1,5 @@
 {
-  "cssVariables.lookupFiles": [
-    "@navikt/core/tokens/dist/tokens.css",
-    "@navikt/core/tokens/dist/darkside/tokens.css"
-  ],
+  "cssVariables.lookupFiles": ["@navikt/core/tokens/dist/tokens.css"],
   "eslint.problems.shortenToSingleLine": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "files.watcherExclude": {
@@ -12,6 +9,6 @@
     "**/cjs": true
   },
   "playwright.reuseBrowser": true,
-  "typescript.tsdk": "node_modules/typescript/lib",
+  "js/ts.tsdk.path": "node_modules/typescript/lib",
   "deno.enablePaths": ["./scripts/deno"]
 }

.yarnrc.yml

@@ -12,8 +12,10 @@ npmScopes:
     npmAuthToken: "${NPM_AUTH_TOKEN:-}"
     npmRegistryServer: "https://npm.pkg.github.com"
 
+enableScripts: false
 defaultSemverRangePrefix: ""
 npmMinimalAgeGate: "7d"
 npmPreapprovedPackages: ["@navikt/*"]
+enableTelemetry: false
 
 yarnPath: .yarn/releases/yarn-4.12.0.cjs

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @navikt/aksel-icons
 
+## 8.10.2
+
+## 8.10.1
+
+## 8.10.0
+
+## 8.9.1
+
+## 8.9.0
+
+## 8.8.0
+
 ## 8.7.0
 
 ## 8.6.0

@navikt/aksel-icons/CONTRIBUTING.md

@@ -2,44 +2,11 @@
 
 ## Foreslå nye ikoner
 
-Om du ikke finner et ikonet du leter etter kan du [åpne et issue på github](https://github.com/navikt/aksel/issues/new?labels=nytt+✨%2Cikoner+🖼%2Cforespørsel+🥰&template&template=new-icon.yaml&title=%5BNytt+ikon%5D%3A+).
+Om du ikke finner ikonet du leter etter kan du [lage et issue på GitHub](https://github.com/navikt/aksel/issues/new?labels=nytt+✨%2Cikoner+🖼%2Cforespørsel+🥰&template=new-icon.yaml&title=%5BNytt+ikon%5D%3A+).
 
 ## Oppdatere ikon
 
-Hvis du tenker et ikon fortjener en oppdatering eller er utdatert kan [du foreslå det her.](https://github.com/navikt/aksel/issues/new?labels=forespørsel+🥰&template=update-icon.yml&title=%5BInnspill+til+ikon%5D%3A+)
-
-## Legge til nye ikoner selv
-
-Hvis du selv ønsker å legge til nye ikoner kan du kopiere filenes fra `/template` og legge de inn i `/icons` med egen data. Alle ikonene har naming-format `PascalCase`. Alle ikonene har 1 SVG-fil og 1 tilhørende YML-fil.
-
-### Svg
-
-- Sizing, width og height må være 24x24: `width="24" height="24" `
-- Viewbox: `viewBox="0 0 24 24"`
-- Fill på path: `fill="#202733"`
-
-### Yml
-
-```yml
-name: Template # Samme som filnavn
-category: Template category # Hovedkategori
-sub_category: Sub category # Underkategori
-keywords: # Samling med søkeord
-  - template1
-  - template2
-  - template3
-variant: Stroke # Stroke eller Fill
-created_at: 01.01.2023 # Dato for opprettelse
-```
-
-### Publisere oppdatering
-
-Når du har lagt til nye ikoner kan du opprette en pull request. Denne vil bli automatisk testet og så gått gjennom av Aksel-teamet.
-Legg gjerne til en `changeset` ved å kjøre `yarn changeset` i terminalen. Dette vil gi oss bedre oversikt over hva som er endret i endringslogger og automatisk bumpe pakke-versjonen ved merge.
-
-#### Teste nytt ikon
-
-Hvis du ønsker å teste om alt stemmer, både i `svg` og `yml` før du lager en PR kan du kjøre `yarn && cd navikt/aksel-icons && yarn test` i terminalen lokalt.
+Hvis du tenker et ikon fortjener en oppdatering eller er utdatert kan [du foreslå det her](https://github.com/navikt/aksel/issues/new?labels=forespørsel+🥰&template=update-icon.yml&title=%5BInnspill+til+ikon%5D%3A+).
 
 ## Design av nye ikoner
 
@@ -50,9 +17,9 @@ Hvis du ønsker å teste om alt stemmer, både i `svg` og `yml` før du lager en
 
 ### Stroke (linje)
 
-- Ikonet må bestå av kun linjer
-- Linjene skal være 1.5px, center-aligned
+- Ikonet må bestå av kun linjer.
+- Linjene skal være 1.5px, center-aligned.
 
 ### Fill (fylt)
 
-- Ikoner hvor shapes kan fylles, bør fylles
+- Ikoner hvor shapes kan fylles, bør fylles.

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

@@ -14,8 +14,8 @@
     "@navikt/ds-css": "*",
     "@navikt/ds-react": "*",
     "fuse.js": "^7.0.0",
-    "react": "19.2.4",
-    "react-dom": "19.2.4"
+    "react": "19.2.5",
+    "react-dom": "19.2.5"
   },
   "devDependencies": {
     "@figma/plugin-typings": "^1.100.2",
@@ -24,8 +24,8 @@
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
     "@vitejs/plugin-react": "^5.1.0",
-    "typescript": "5.9.3",
-    "vite": "^7.2.4",
+    "typescript": "6.0.2",
+    "vite": "^7.3.2",
     "vite-plugin-singlefile": "^2.3.0",
     "vite-plugin-svgr": "^4.2.0"
   }

@navikt/aksel-icons/figma-plugin/src/ui/App.tsx

@@ -155,7 +155,7 @@ const App = () => {
                       <div className="icons-wrapper">
                         {sub.icons.map((i) => {
                           // biome-ignore lint/performance/noDynamicNamespaceImportAccess: We do not know which icon will be rendered at build time
-                          const T = Icons[`${i.id}Icon`]; // eslint-disable-line import/namespace
+                          const T = Icons[`${i.id}Icon`];
                           if (T === undefined) {
                             return null;
                           }

@navikt/aksel-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-icons",
-  "version": "8.7.0",
+  "version": "8.10.2",
   "author": "Aksel | Nav",
   "homepage": "https://aksel.nav.no/ikoner",
   "repository": {
@@ -82,14 +82,14 @@
     "fast-glob": "3.3.3",
     "hast-util-select": "6.0.4",
     "js-yaml": "^4.1.1",
-    "lodash": "4.17.23",
+    "lodash": "4.18.1",
     "prettier": "3.8.1",
-    "react": "19.2.4",
+    "react": "19.2.5",
     "rehype-parse": "9.0.1",
     "tsc-alias": "1.8.16",
     "tsx": "^4.20.6",
-    "typescript": "5.9.3",
+    "typescript": "6.0.2",
     "unified": "11.0.5",
-    "vitest": "4.0.18"
+    "vitest": "4.1.4"
   }
 }

@navikt/aksel-icons/tsconfig.json

@@ -1,6 +1,8 @@
 {
   "extends": "../../tsconfig.build.json",
   "compilerOptions": {
+    "ignoreDeprecations": "6.0",
+    "rootDir": "./src",
     "outDir": "./dist/react/cjs",
     "moduleResolution": "node",
     "module": "commonjs",

@navikt/aksel-icons/util/useId.ts

@@ -14,7 +14,7 @@ function useGlobalId(idOverride?: string): string | undefined {
       // We can't use it server-side.
       // If you want to use random values please consider the Birthday Problem: https://en.wikipedia.org/wiki/Birthday_problem
       globalId += 1;
-      setDefaultId(`aksel-icon-${globalId}`);
+      setDefaultId(`aksel-icon-${globalId}`); // eslint-disable-line react-hooks/set-state-in-effect
     }
   }, [defaultId]);
   return id;

@navikt/aksel-stylelint/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @navikt/aksel-stylelint
 
+## 8.10.2
+
+## 8.10.1
+
+## 8.10.0
+
+## 8.9.1
+
+## 8.9.0
+
+## 8.8.0
+
+### Patch Changes
+
+- ReadMore: Deprecated classes `aksel-read-more--open` and `aksel-read-more__content--closed`. Use `data-state` instead to access state. ([#4723](https://github.com/navikt/aksel/pull/4723))
+
 ## 8.7.0
 
 ## 8.6.0

@navikt/aksel-stylelint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-stylelint",
-  "version": "8.7.0",
+  "version": "8.10.2",
   "type": "module",
   "engines": {
     "node": ">=18.12.0"
@@ -42,14 +42,14 @@
     "dev": "yarn watch:lint"
   },
   "devDependencies": {
-    "@navikt/ds-css": "^8.7.0",
-    "@navikt/ds-tokens": "^8.7.0",
+    "@navikt/ds-css": "^8.10.2",
+    "@navikt/ds-tokens": "^8.10.2",
     "concurrently": "9.2.1",
     "postcss-selector-parser": "^7.1.0",
     "postcss-value-parser": "^4.2.0",
     "stylelint": "^17.2.0",
     "stylelint-test-rule-node": "^1.0.0",
     "tsx": "^4.20.6",
-    "typescript": "5.9.3"
+    "typescript": "6.0.2"
   }
 }

@navikt/aksel-stylelint/src/deprecations.ts

@@ -18,4 +18,9 @@ export const deprecations: DeprecatedList = [
       "Removed in vX.X.X, see documentation [link] for more information.",
     deprecatePrefix: true,
   },
+  {
+    classes: ["aksel-read-more__content--closed", "aksel-read-more--open"],
+    message:
+      "Removed in version ^8.8. Use data-state='open' or 'closed' instead.",
+  },
 ];

@navikt/aksel-stylelint/src/utils.ts

@@ -8,22 +8,25 @@ const __dirname = dirname(__filename);
 
 const flattenObject = (
   obj: Record<string, string | Record<string, string>>,
-) => {
-  const flattened = Object.keys(obj).reduce((acc, key) => {
-    if (typeof obj[key] === "string") {
-      acc.push(key);
-    } else {
-      acc.push(flattenObject(obj[key]));
-    }
-    return acc;
-  }, []);
+): string[] => {
+  const flattened = Object.keys(obj).reduce<(string | string[])[]>(
+    (acc, key) => {
+      if (typeof obj[key] === "string") {
+        acc.push(key);
+      } else {
+        acc.push(flattenObject(obj[key]));
+      }
+      return acc;
+    },
+    [],
+  );
   return flattened.flat();
 };
 
 const tokenCSSFile = "./global-tokens.css";
 const tokenJsonFile = "./component-tokens.json";
 
-const allowedTokenNames = [];
+const allowedTokenNames: string[] = [];
 
 export const tokenExists = (
   controlledPrefixes: string[],

@navikt/aksel/CHANGELOG.md

@@ -1,5 +1,53 @@
 # @navikt/aksel
 
+## 8.10.2
+
+### Patch Changes
+
+- Updated dependencies [[`90194d7`](https://github.com/navikt/aksel/commit/90194d7d95edd2ad69156528ec7e1e0600daef8a)]:
+  - @navikt/ds-css@8.10.2
+  - @navikt/ds-tokens@8.10.2
+
+## 8.10.1
+
+### Patch Changes
+
+- Updated dependencies [[`f66236c`](https://github.com/navikt/aksel/commit/f66236c3710d132f4a2bbe043282a98136b089d9)]:
+  - @navikt/ds-css@8.10.1
+  - @navikt/ds-tokens@8.10.1
+
+## 8.10.0
+
+### Patch Changes
+
+- Updated dependencies [[`63f5aaf`](https://github.com/navikt/aksel/commit/63f5aaf2f4bfdc3402afe9617c806309e0169420), [`139805d`](https://github.com/navikt/aksel/commit/139805d5b4b6422e99ee04c1dcde1bdd15c8ddaa), [`2eab5b9`](https://github.com/navikt/aksel/commit/2eab5b956420848ca9fc785bc63263161ac79f85), [`f491aae`](https://github.com/navikt/aksel/commit/f491aaec704314fe97b77d92cc2ed1564454c0e8), [`2eab5b9`](https://github.com/navikt/aksel/commit/2eab5b956420848ca9fc785bc63263161ac79f85), [`c096f46`](https://github.com/navikt/aksel/commit/c096f46beb07f48e2869f7bcc722732e4f7ac31e), [`c096f46`](https://github.com/navikt/aksel/commit/c096f46beb07f48e2869f7bcc722732e4f7ac31e)]:
+  - @navikt/ds-css@8.10.0
+  - @navikt/ds-tokens@8.10.0
+
+## 8.9.1
+
+### Patch Changes
+
+- Updated dependencies [[`f7393f7`](https://github.com/navikt/aksel/commit/f7393f75159d3e4cff5fd438fd8e275325f98f1c), [`9346578`](https://github.com/navikt/aksel/commit/93465781c13e91ec41520e1284cba42c452d1386), [`47d74be`](https://github.com/navikt/aksel/commit/47d74be1a0db844d7116e46b0608c42146dcbc01)]:
+  - @navikt/ds-css@8.9.1
+  - @navikt/ds-tokens@8.9.1
+
+## 8.9.0
+
+### Patch Changes
+
+- Updated dependencies [[`86f86d3`](https://github.com/navikt/aksel/commit/86f86d37608432160333ed275f76553d936bf63a), [`72a9131`](https://github.com/navikt/aksel/commit/72a9131aeeac41d0242869f5684999e6bc731285)]:
+  - @navikt/ds-css@8.9.0
+  - @navikt/ds-tokens@8.9.0
+
+## 8.8.0
+
+### Patch Changes
+
+- Updated dependencies [[`befae1e`](https://github.com/navikt/aksel/commit/befae1e0a27e32b46c45335cf438aa65f4333b9f), [`7388130`](https://github.com/navikt/aksel/commit/738813046ffece51d4670a33297f4333c6bae8d0), [`5756986`](https://github.com/navikt/aksel/commit/57569860700bf81d6eef06ddbc39270933eff528), [`232ed45`](https://github.com/navikt/aksel/commit/232ed4569414e70f5a6f8e7bab584226f191a889)]:
+  - @navikt/ds-css@8.8.0
+  - @navikt/ds-tokens@8.8.0
+
 ## 8.7.0
 
 ### Patch Changes

@navikt/aksel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel",
-  "version": "8.7.0",
+  "version": "8.10.2",
   "description": "Aksel command line interface. Codemods and other utilities for Aksel users.",
   "author": "Aksel | Nav designsystem team",
   "license": "MIT",
@@ -23,6 +23,13 @@
     "test:watch": "vitest watch"
   },
   "bin": "./dist/index.js",
+  "exports": {
+    "./package.json": "./package.json",
+    "./migrations": {
+      "import": "./dist/migrations-config.js",
+      "types": "./dist/migrations-config.d.ts"
+    }
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/navikt/aksel.git",
@@ -33,8 +40,8 @@
     "url": "https://github.com/navikt/aksel/issues"
   },
   "dependencies": {
-    "@navikt/ds-css": "^8.7.0",
-    "@navikt/ds-tokens": "^8.7.0",
+    "@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",
@@ -45,13 +52,15 @@
     "is-git-clean": "1.1.0",
     "jscodeshift": "17.3.0",
     "jscodeshift-add-imports": "1.0.11",
-    "lodash": "4.17.23"
+    "lodash": "4.18.1"
   },
   "devDependencies": {
     "@types/cli-progress": "3.11.6",
+    "@types/is-git-clean": "1.1.2",
+    "@types/jscodeshift": "17.3.0",
     "rimraf": "6.1.3",
-    "typescript": "5.9.3",
-    "vitest": "4.0.18"
+    "typescript": "6.0.2",
+    "vitest": "4.1.4"
   },
   "sideEffects": false,
   "engines": {

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

@@ -1,216 +1,5 @@
 import chalk from "chalk";
-import { SupportedCodemodExtensions } from "./codeshift.utils";
-
-const JS_EXTENSIONS = [
-  "js",
-  "jsx",
-  "ts",
-  "tsx",
-] satisfies SupportedCodemodExtensions[];
-
-const CSS_EXTENSIONS = [
-  "css",
-  "scss",
-  "less",
-] satisfies SupportedCodemodExtensions[];
-
-type MigrationT = Record<
-  string,
-  {
-    description: string;
-    value: string;
-    path: string;
-    warning?: string;
-    /**
-     * Some transforms are only meant to run on specific file extensions.
-     * This is used to filter out files that should not be transformed.
-     */
-    ignoredExtensions: SupportedCodemodExtensions[];
-  }[]
->;
-
-export const migrations: MigrationT = {
-  v1: [
-    {
-      description: "Runs all codemods for beta -> v1 migration",
-      value: "v1-preset",
-      path: "v1.0.0/preset/preset",
-      ignoredExtensions: CSS_EXTENSIONS,
-    },
-    {
-      description: "Fixes breaking API-changes for <Pagination /> component",
-      value: "v1-pagination",
-      path: "v1.0.0/pagination/pagination",
-      ignoredExtensions: CSS_EXTENSIONS,
-    },
-    {
-      description: "Fixes breaking API-changes for <Tabs /> component",
-      value: "v1-tabs",
-      path: "v1.0.0/tabs/tabs",
-      ignoredExtensions: CSS_EXTENSIONS,
-    },
-    {
-      description:
-        "Fixes breaking API-changes for <SpeechBubble /> (now <Chat/>) component",
-      value: "v1-chat",
-      path: "v1.0.0/chat/chat",
-      ignoredExtensions: CSS_EXTENSIONS,
-    },
-  ],
-  v2: [
-    {
-      description: "Patches changed css-variables",
-      value: "v2-css",
-      path: "v2.0.0/update-css-tokens/update-css-tokens",
-      ignoredExtensions: [],
-    },
-    {
-      description: "Patches changed js-variables",
-      value: "v2-js",
-      path: "v2.0.0/update-js-tokens/update-js-tokens",
-      ignoredExtensions: CSS_EXTENSIONS,
-    },
-    {
-      description: "Patches changed sass-variables",
-      value: "v2-sass",
-      path: "v2.0.0/update-sass-tokens/update-sass-tokens",
-      ignoredExtensions: JS_EXTENSIONS,
-    },
-    {
-      description: "Patches changed less-variables",
-      value: "v2-less",
-      path: "v2.0.0/update-less-tokens/update-less-tokens",
-      ignoredExtensions: JS_EXTENSIONS,
-    },
-  ],
-  v3: [
-    {
-      description:
-        "Replaces deprecated <CopyToClipboard /> with <CopyButton />",
-      value: "v3-copybutton",
-      path: "v3.0.0/copybutton/copybutton",
-      warning:
-        "Remember to remove css-import from '@navikt/ds-css-internal' if no longer needed\nIf non-text was used as children, or different locales were handled, you need to manually fix this",
-      ignoredExtensions: CSS_EXTENSIONS,
-    },
-  ],
-  v4: [
-    {
-      description:
-        "Replaced deprecated 'internal'-component import to 'core'-imports",
-      value: "v4-internal-react",
-      path: "v4.0.0/internal-react/internal-react",
-      warning:
-        "Remember to also run 'v4-internal-css' if you have overwritten any css-classes!",
-      ignoredExtensions: CSS_EXTENSIONS,
-    },
-    {
-      description:
-        "Replaced 'navdsi'-prefixes used to overwrite internal-css to 'navds'-prefixes",
-      value: "v4-internal-css",
-      path: "v4.0.0/internal-css/internal-css",
-      warning:
-        "Remember to remove '@navikt/ds-css-internal' imports if no longer needed! Also run 'v4-internal-react' to convert internal-react imports to core-imports",
-      ignoredExtensions: [],
-    },
-    {
-      description:
-        "Removes all instances of UNSAFE_ for datepicker/monthpicker.",
-      value: "v4-date",
-      path: "v4.0.0/date/date",
-      ignoredExtensions: CSS_EXTENSIONS,
-    },
-  ],
-  v6: [
-    {
-      description:
-        "Removes `backgroundColor` and `avatarBgColor` properties from `Chat` and `Chat.Bubble`",
-      value: "v6-chat",
-      path: "v6.0.0/chat/chat",
-      warning:
-        "Remember to update use of `variant`-prop to match previous use of colors. If needed the component exposes css-variables for custom overrides",
-      ignoredExtensions: CSS_EXTENSIONS,
-    },
-  ],
-  v8: [
-    {
-      description:
-        "Updates Box with legacy-tokens to Box using the new token system, and renames already migrated BoxNew/Box.New instances to Box.",
-      value: "v8-box",
-      path: "v8.0.0/box/box",
-      warning:
-        "Remember to check if 'TODO: Aksel Box migration'-comment was added to any files after migration. This comment will help you find and update Box-instances we couldn't update for you.",
-      ignoredExtensions: CSS_EXTENSIONS,
-    },
-    {
-      description: "Renames already migrated BoxNew/Box.New instances to Box.",
-      value: "v8-box-new",
-      path: "v8.0.0/box-new/box-new",
-      ignoredExtensions: CSS_EXTENSIONS,
-    },
-    {
-      description: "Removes deprecated props from components.",
-      value: "v8-prop-deprecate",
-      path: "v8.0.0/prop-deprecate/prop-deprecate",
-      ignoredExtensions: CSS_EXTENSIONS,
-    },
-    {
-      description:
-        "Tries to migrate List component by wrapping it with 'Box' and moving 'title' and 'description' props to 'Heading' and 'BodyShort'.",
-      value: "v8-list",
-      path: "v8.0.0/list/list",
-      ignoredExtensions: CSS_EXTENSIONS,
-    },
-    {
-      description: "Updates all Primitives to use new `space`-tokens.",
-      value: "v8-primitive-spacing",
-      path: "v8.0.0/primitives-spacing/spacing",
-      ignoredExtensions: CSS_EXTENSIONS,
-    },
-    {
-      description:
-        "Updates variant + data-color props on Tag based on current variant prop.",
-      value: "v8-tag-variant",
-      path: "v8.0.0/tag-variant/tag-variant",
-      ignoredExtensions: CSS_EXTENSIONS,
-    },
-    {
-      description:
-        "Updates variant + data-color props on ToggleGroup based on current variant prop.",
-      value: "v8-toggle-group-variant",
-      path: "v8.0.0/toggle-group-variant/toggle-group-variant",
-      ignoredExtensions: CSS_EXTENSIONS,
-    },
-    {
-      description:
-        "Updates variant + data-color props on Accordion based on current variant prop.",
-      value: "v8-accordion-variant",
-      path: "v8.0.0/accordion-variant/accordion-variant",
-      ignoredExtensions: CSS_EXTENSIONS,
-    },
-    {
-      description:
-        "Updates variant + data-color props on Chips based on current variant prop.",
-      value: "v8-chips-variant",
-      path: "v8.0.0/chips-variant/chips-variant",
-      ignoredExtensions: CSS_EXTENSIONS,
-    },
-    {
-      description:
-        "Updates variant + data-color props on Button based on current variant prop.",
-      value: "v8-button-variant",
-      path: "v8.0.0/button-variant/button-variant",
-      ignoredExtensions: CSS_EXTENSIONS,
-    },
-    {
-      description:
-        "Updates variant + data-color props on Link based on current variant prop.",
-      value: "v8-link-variant",
-      path: "v8.0.0/link-variant/link-variant",
-      ignoredExtensions: CSS_EXTENSIONS,
-    },
-  ],
-} as const;
+import { migrations } from "../migrations-config";
 
 /**
  * Extracts `path` field for a given migration.
@@ -264,8 +53,14 @@ export function getMigrationsForVersion(version: string) {
 /**
  * Returns the override migrations available for a specific version.
  */
+function isOverrideVersion(
+  version: string,
+): version is keyof typeof migrationStringOverride {
+  return version in migrationStringOverride;
+}
+
 export function getOverridesForVersion(version: string) {
-  return migrationStringOverride[version] ?? [];
+  return isOverrideVersion(version) ? migrationStringOverride[version] : [];
 }
 
 /**
@@ -292,7 +87,7 @@ export function getMigrationString() {
   Object.entries(migrations).forEach(([version, vMigrations]) => {
     str += `\n${chalk.underline(version)}\n`;
 
-    const overrideMigrations = migrationStringOverride[version] || [];
+    const overrideMigrations = getOverridesForVersion(version);
     overrideMigrations.forEach((migration) => {
       str += `${chalk.blue(migration.value)}: ${migration.description}\n`;
     });

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

@@ -80,6 +80,11 @@ export async function runCodeshift(
 
     warning && console.info(`\n${chalk.yellow(warning)}\n`);
   } catch (error) {
-    program.error(chalk.red("Error:", error.message));
+    program.error(
+      chalk.red(
+        "Error:",
+        error instanceof Error ? error.message : String(error),
+      ),
+    );
   }
 }

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

@@ -50,7 +50,9 @@ async function runVersionMigration(
     chalk.greenBright.bold(`\nAvailable migrations for ${version}:\n`),
   );
 
-  const overrideValues = new Set(overrideMigrations.map((m) => m.value));
+  const overrideValues = new Set<string>(
+    overrideMigrations.map((m) => m.value),
+  );
 
   const choices = [
     ...overrideMigrations.map((migration) => ({

@navikt/aksel/src/codemod/tokens-map.ts

@@ -363,6 +363,6 @@ const tokens = [
 ["--navdsi-header-color-hover", "--a-surface-inverted-hover"],
 ["--navdsi-header-color-active", "--a-surface-inverted-active"],
 ["--navds-button-icon-adjustment", "--ac-button-icon-margin"]
-]
+] as const
 
-module.exports = { tokens };
+export { tokens };

@navikt/aksel/src/codemod/transforms/rename-prop/rename-prop.ts

@@ -1,10 +1,11 @@
+import type { API, FileInfo, Options } from "jscodeshift";
 import renameProps from "../../utils/rename-props";
 
-/**
- * @param {import('jscodeshift').FileInfo} file
- * @param {import('jscodeshift').API} api
- */
-export default function transformer(file, api, options) {
+export default function transformer(
+  file: FileInfo,
+  api: API,
+  options: Options,
+) {
   const j = api.jscodeshift;
   const root = j(file.source);
 

@navikt/aksel/src/codemod/transforms/v1.0.0/chat/chat.ts

@@ -1,11 +1,8 @@
+import type { API, FileInfo } from "jscodeshift";
 import { getLineTerminator } from "../../../utils/lineterminator";
 import renameProps from "../../../utils/rename-props";
 
-/**
- * @param {import('jscodeshift').FileInfo} file
- * @param {import('jscodeshift').API} api
- */
-export default function transformer(file, api) {
+export default function transformer(file: FileInfo, api: API) {
   const j = api.jscodeshift;
   let localName = "SpeechBubble";
 
@@ -16,14 +13,17 @@ export default function transformer(file, api) {
     .find(j.ImportDeclaration)
     .filter((path) => path.node.source.value === "@navikt/ds-react")
     .forEach((imp) => {
-      imp.value.specifiers.forEach((x) => {
+      imp.value.specifiers?.forEach((x) => {
+        if (x.type !== "ImportSpecifier") return;
         if (x.imported.name === "SpeechBubble") {
-          if (x.local.name !== x.imported.name) {
-            localName = x.local.name;
+          if (x.local && x.local.name !== x.imported.name) {
+            localName = String(x.local.name);
             x.imported.name = "Chat";
           } else {
             x.imported.name = "Chat";
-            x.local.name = "Chat";
+            if (x.local) {
+              x.local.name = "Chat";
+            }
           }
         }
       });
@@ -47,20 +47,34 @@ export default function transformer(file, api) {
 
     compRoot.forEach((x) => {
       if (localName !== "SpeechBubble") return;
-      x.node.openingElement.name.name = "Chat";
-      x.node.closingElement.name.name = "Chat";
+      const opening = x.node.openingElement.name;
+      if (opening.type === "JSXIdentifier") {
+        opening.name = "Chat";
+      }
+      const closing = x.node.closingElement?.name;
+      if (closing?.type === "JSXIdentifier") {
+        closing.name = "Chat";
+      }
     });
 
     /* Need to handle dot-notations differently */
     const child = root.find(j.JSXElement);
 
     child.forEach((x) => {
+      const openingName = x.value.openingElement.name;
       if (
-        x.value.openingElement.name.type === "JSXMemberExpression" &&
-        x.value.openingElement.name.object.name === "SpeechBubble"
+        openingName.type === "JSXMemberExpression" &&
+        openingName.object.type === "JSXIdentifier" &&
+        openingName.object.name === "SpeechBubble"
       ) {
-        x.value.openingElement.name.object.name = "Chat";
-        x.value.closingElement.name.object.name = "Chat";
+        openingName.object.name = "Chat";
+        const closingName = x.value.closingElement?.name;
+        if (
+          closingName?.type === "JSXMemberExpression" &&
+          closingName.object.type === "JSXIdentifier"
+        ) {
+          closingName.object.name = "Chat";
+        }
       }
     });
   }

@navikt/aksel/src/codemod/transforms/v1.0.0/pagination/pagination.ts

@@ -1,25 +1,29 @@
+import type {
+  API,
+  FileInfo,
+  JSXAttribute,
+  JSXElement,
+  JSXSpreadAttribute,
+} from "jscodeshift";
+import { getJSXLiteralValue } from "../../../utils/jsx-value";
 import { getLineTerminator } from "../../../utils/lineterminator";
 
-/**
- * @param {import('jscodeshift').FileInfo} file
- * @param {import('jscodeshift').API} api
- */
-export default function transformer(file, api) {
+export default function transformer(file: FileInfo, api: API) {
   const j = api.jscodeshift;
   let localName = "Pagination";
 
   const root = j(file.source);
 
-  function addMigrationTag(node) {
+  function addMigrationTag(node: JSXElement) {
     const attributes = node.openingElement.attributes;
-    const isMigrated = attributes.find(
-      (attr) =>
+    const isMigrated = attributes?.find(
+      (attr: JSXAttribute | JSXSpreadAttribute) =>
         attr.type === "JSXAttribute" &&
         attr.name.name === "data-version" &&
-        attr.value.value === "v1",
+        getJSXLiteralValue(attr.value) === "v1",
     );
 
-    if (!isMigrated) {
+    if (!isMigrated && attributes) {
       attributes.push(
         j.jsxAttribute(j.jsxIdentifier("data-version"), j.literal("v1")),
       );
@@ -27,13 +31,14 @@ export default function transformer(file, api) {
   }
 
   /* https://github.com/mui/material-ui/blob/master/packages/mui-codemod/src/v5.0.0/variant-prop.js */
-  function addExplicitStandardProp(node) {
+  function addExplicitStandardProp(node: JSXElement) {
     const attributes = node.openingElement.attributes;
-    const variant = attributes.find(
-      (attr) => attr.type === "JSXAttribute" && attr.name.name === "size",
+    const variant = attributes?.find(
+      (attr: JSXAttribute | JSXSpreadAttribute) =>
+        attr.type === "JSXAttribute" && attr.name.name === "size",
     );
 
-    if (!variant) {
+    if (!variant && attributes) {
       attributes.unshift(
         j.jsxAttribute(j.jsxIdentifier("size"), j.literal("small")),
       );
@@ -46,37 +51,45 @@ export default function transformer(file, api) {
     .find(j.ImportDeclaration)
     .filter((path) => path.node.source.value === "@navikt/ds-react")
     .forEach((imp) => {
-      imp.value.specifiers.forEach((x) => {
+      imp.value.specifiers?.forEach((x) => {
         if (
+          x.type === "ImportSpecifier" &&
+          x.imported.type === "Identifier" &&
           x.imported.name === "Pagination" &&
-          x.local.name !== x.imported.name
+          x.local?.name !== x.imported.name &&
+          x.local?.name
         ) {
-          localName = x.local.name;
+          localName = String(x.local.name);
         }
       });
     });
 
   if (j(file.source).findJSXElements(localName)) {
     root.findJSXElements(`${localName}`).forEach((parent) => {
-      const skip = !!parent.value.openingElement?.attributes.find(
-        (x) => x.name.name === "data-version" && x.value.value === "v1",
+      const skip = !!parent.value.openingElement?.attributes?.find(
+        (attr: JSXAttribute | JSXSpreadAttribute) =>
+          attr.type === "JSXAttribute" &&
+          attr.name.name === "data-version" &&
+          getJSXLiteralValue(attr.value) === "v1",
       );
 
-      parent.value.openingElement?.attributes.forEach((x) => {
-        let didUpdate = false;
-        if (x.name?.name === "size" && x.type === "JSXAttribute" && !skip) {
-          /* addExplicitStandardProp */
-          if (x.value.value === "medium") {
-            x.value = j.literal("small");
-            didUpdate = true;
-          } else if (x.value.value === "small") {
-            x.value = j.literal("xsmall");
-            didUpdate = true;
-          }
+      parent.value.openingElement?.attributes?.forEach(
+        (x: JSXAttribute | JSXSpreadAttribute) => {
+          let didUpdate = false;
+          if (x.type === "JSXAttribute" && x.name?.name === "size" && !skip) {
+            const value = getJSXLiteralValue(x.value);
+            if (value === "medium") {
+              x.value = j.literal("small");
+              didUpdate = true;
+            } else if (value === "small") {
+              x.value = j.literal("xsmall");
+              didUpdate = true;
+            }
 
-          didUpdate && addMigrationTag(parent.value);
-        }
-      });
+            didUpdate && addMigrationTag(parent.value);
+          }
+        },
+      );
       addExplicitStandardProp(parent.value);
     });
   }

@navikt/aksel/src/codemod/transforms/v1.0.0/pagination/tests/literal.input.js

@@ -0,0 +1,11 @@
+import { Pagination as DsPagination, Button } from "@navikt/ds-react";
+
+export const Demo = () => {
+  return (
+    <div>
+      <DsPagination onPageChange={setPage} />
+      <DsPagination size={"medium"} onPageChange={setPage} />
+      <DsPagination size={"small"} onPageChange={setPage} />
+    </div>
+  );
+};

@navikt/aksel/src/codemod/transforms/v1.0.0/pagination/tests/literal.output.js

@@ -0,0 +1,11 @@
+import { Pagination as DsPagination, Button } from "@navikt/ds-react";
+
+export const Demo = () => {
+  return (
+    <div>
+      <DsPagination size="small" onPageChange={setPage} data-version="v1" />
+      <DsPagination size="small" onPageChange={setPage} data-version="v1" />
+      <DsPagination size="xsmall" onPageChange={setPage} data-version="v1" />
+    </div>
+  );
+};

@navikt/aksel/src/codemod/transforms/v1.0.0/pagination/tests/pagination.test.ts

@@ -1,7 +1,7 @@
 import { check } from "../../../../utils/check";
 
 const migration = "pagination";
-const fixtures = ["size", "idempotent", "import"];
+const fixtures = ["size", "idempotent", "import", "literal"];
 
 for (const fixture of fixtures) {
   check(__dirname, {

@navikt/aksel/src/codemod/transforms/v1.0.0/preset/preset.ts

@@ -1,12 +1,9 @@
+import type { API, FileInfo } from "jscodeshift";
 import transformChat from "../chat/chat";
 import transformPagination from "../pagination/pagination";
 import transformTabs from "../tabs/tabs";
 
-/**
- * @param {import('jscodeshift').FileInfo} file
- * @param {import('jscodeshift').API} api
- */
-export default function transformer(file, api) {
+export default function transformer(file: FileInfo, api: API) {
   file.source = transformTabs(file, api);
   file.source = transformChat(file, api);
   file.source = transformPagination(file, api);

@navikt/aksel/src/codemod/transforms/v1.0.0/tabs/tabs.ts

@@ -1,14 +1,11 @@
+import type { API, FileInfo, JSXAttribute } from "jscodeshift";
 import { getLineTerminator } from "../../../utils/lineterminator";
 import renameProps from "../../../utils/rename-props";
 
-/**
- * @param {import('jscodeshift').FileInfo} file
- * @param {import('jscodeshift').API} api
- */
-export default function transformer(file, api) {
+export default function transformer(file: FileInfo, api: API) {
   const j = api.jscodeshift;
   let localName = "Tabs";
-  let iconPositionProp = null;
+  let iconPositionProp: JSXAttribute | null = null;
 
   const root = j(file.source);
 
@@ -17,9 +14,14 @@ export default function transformer(file, api) {
     .find(j.ImportDeclaration)
     .filter((path) => path.node.source.value === "@navikt/ds-react")
     .forEach((imp) => {
-      imp.value.specifiers.forEach((x) => {
-        if (x.imported.name === "Tabs" && x.local.name !== x.imported.name) {
-          localName = x.local.name;
+      imp.value.specifiers?.forEach((x) => {
+        if (
+          x.type === "ImportSpecifier" &&
+          x.imported.name === "Tabs" &&
+          x.local &&
+          x.local.name !== x.imported.name
+        ) {
+          localName = String(x.local.name);
         }
       });
     });
@@ -34,48 +36,52 @@ export default function transformer(file, api) {
     });
 
     root.findJSXElements(`${localName}`).forEach((parent) => {
-      parent.value.children.forEach((el) => {
+      parent.value.children?.forEach((el) => {
+        if (el.type !== "JSXElement") return;
         const openingEl = el.openingElement;
-        if (openingEl?.name && openingEl.name.type === "JSXMemberExpression") {
+        if (openingEl.name.type === "JSXMemberExpression") {
           if (
+            openingEl.name.object.type === "JSXIdentifier" &&
             openingEl.name.object.name === localName &&
             openingEl.name.property.name === "List"
           ) {
             /* Move loop-prop */
-            el.openingElement.attributes.forEach((x, index) => {
-              if (x.name?.name === "loop" && x.type === "JSXAttribute") {
-                parent.value.openingElement.attributes.push(x);
-                delete el.openingElement.attributes[index];
+            openingEl.attributes?.forEach((x, index) => {
+              if (x.type === "JSXAttribute" && x.name.name === "loop") {
+                parent.value.openingElement.attributes?.push(x);
+                openingEl.attributes?.splice(index, 1);
               }
             });
 
             /* Find and move iconPosition-prop to <Tabs/> */
-            el.children.forEach((tab) => {
+            el.children?.forEach((tab) => {
+              if (tab.type !== "JSXElement") return;
               const tabEl = tab.openingElement;
-              if (tabEl?.name && tabEl.name.type === "JSXMemberExpression") {
-                if (
-                  tabEl.name.object.name === localName &&
-                  tabEl.name.property.name === "Tab"
-                ) {
-                  tabEl?.attributes.forEach((x, index) => {
-                    if (
-                      x.name?.name === "iconPosition" &&
-                      x.type === "JSXAttribute"
-                    ) {
-                      if (!iconPositionProp) {
-                        iconPositionProp = x;
-                      }
-                      delete tabEl.attributes[index];
+              if (
+                tabEl.name.type === "JSXMemberExpression" &&
+                tabEl.name.object.type === "JSXIdentifier" &&
+                tabEl.name.object.name === localName &&
+                tabEl.name.property.name === "Tab"
+              ) {
+                tabEl.attributes?.forEach((x, index) => {
+                  if (
+                    x.type === "JSXAttribute" &&
+                    x.name.name === "iconPosition"
+                  ) {
+                    if (!iconPositionProp) {
+                      iconPositionProp = x;
                     }
-                  });
-                }
+                    tabEl.attributes?.splice(index, 1);
+                  }
+                });
               }
             });
           }
         }
       });
-      iconPositionProp &&
-        parent.value.openingElement.attributes.push(iconPositionProp);
+      if (iconPositionProp) {
+        parent.value.openingElement.attributes?.push(iconPositionProp);
+      }
       iconPositionProp = null;
     });
   }

@navikt/aksel/src/codemod/transforms/v2.0.0/update-css-tokens/update-css-tokens.ts

@@ -1,10 +1,7 @@
+import type { FileInfo } from "jscodeshift";
 import { tokens } from "../../../tokens-map.js";
 
-/**
- * @param {import('jscodeshift').FileInfo} file
- * @param {import('jscodeshift').API} api
- */
-export default function transformer(file) {
+export default function transformer(file: FileInfo) {
   let src = file.source;
 
   tokens.forEach((tok) => {

@navikt/aksel/src/codemod/transforms/v2.0.0/update-js-tokens/update-js-tokens.ts

@@ -1,4 +1,4 @@
-import type { JSCodeshift } from "jscodeshift";
+import type { API, JSCodeshift } from "jscodeshift";
 import { tokens } from "../../../tokens-map.js";
 import {
   getImportSpecifier,
@@ -12,7 +12,7 @@ import { translateToken } from "../../../utils/translate-token";
  * @param {import('jscodeshift').FileInfo} file
  * @param {import('jscodeshift').API} api
  */
-export default function transformer(file: JSCodeshift, api) {
+export default function transformer(file: JSCodeshift, api: API) {
   const src = file.source;
 
   const j = api.jscodeshift as JSCodeshift;
@@ -37,7 +37,7 @@ export default function transformer(file: JSCodeshift, api) {
 
     getImportSpecifier(j, root, name, "@navikt/ds-tokens/dist/tokens").forEach(
       (x) => {
-        foundName = x.node.imported.name;
+        foundName = String(x.node.imported.name);
       },
     );
 

@navikt/aksel/src/codemod/transforms/v2.0.0/update-less-tokens/update-less-tokens.ts

@@ -1,11 +1,8 @@
+import type { FileInfo } from "jscodeshift";
 import { tokens } from "../../../tokens-map.js";
 import { translateToken } from "../../../utils/translate-token";
 
-/**
- * @param {import('jscodeshift').FileInfo} file
- * @param {import('jscodeshift').API} api
- */
-export default function transformer(file) {
+export default function transformer(file: FileInfo) {
   let src = file.source;
 
   tokens.forEach((tok) => {

@navikt/aksel/src/codemod/transforms/v2.0.0/update-sass-tokens/update-sass-tokens.ts

@@ -1,11 +1,8 @@
+import type { FileInfo } from "jscodeshift";
 import { tokens } from "../../../tokens-map.js";
 import { translateToken } from "../../../utils/translate-token";
 
-/**
- * @param {import('jscodeshift').FileInfo} file
- * @param {import('jscodeshift').API} api
- */
-export default function transformer(file) {
+export default function transformer(file: FileInfo) {
   let src = file.source;
 
   tokens.forEach((tok) => {

@navikt/aksel/src/codemod/transforms/v3.0.0/copybutton/copybutton.ts

@@ -1,16 +1,13 @@
 import chalk from "chalk";
+import type { API, Collection, FileInfo } from "jscodeshift";
 import { getLineTerminator } from "../../../utils/lineterminator";
 import moveAndRenameImport from "../../../utils/packageImports";
 import removePropsFromComponent from "../../../utils/removeProps";
 
-/**
- * @param {import('jscodeshift').FileInfo} file
- * @param {import('jscodeshift').API} api
- */
-export default function transformer(file, api) {
+export default function transformer(file: FileInfo, api: API) {
   const j = api.jscodeshift;
 
-  let root: any;
+  let root: Collection<any>;
   try {
     root = j(file.source);
   } catch {
@@ -46,13 +43,14 @@ export default function transformer(file, api) {
       const children = node.node.children;
       let flagged = false;
       if (
+        children &&
         children.length > 0 &&
-        !node.node.openingElement.attributes.some(
-          (attr) => attr.name.name === "text",
+        !node.node.openingElement.attributes?.some(
+          (attr) => attr.type === "JSXAttribute" && attr.name.name === "text",
         )
       ) {
         if (children.length === 1 && children[0].type === "JSXText") {
-          node.node.openingElement.attributes.push(
+          node.node.openingElement.attributes?.push(
             j.jsxAttribute(
               j.jsxIdentifier("text"),
               j.literal(children[0].value.trim()),
@@ -80,9 +78,15 @@ export default function transformer(file, api) {
     });
 
     compRoot.forEach((x) => {
-      x.node.openingElement.name.name = "CopyButton";
-      if (x.node.children.length > 0) {
-        x.node.closingElement.name.name = "CopyButton";
+      const openingName = x.node.openingElement.name;
+      if (openingName.type === "JSXIdentifier") {
+        openingName.name = "CopyButton";
+      }
+      if (x.node.children && x.node.children.length > 0) {
+        const closingName = x.node.closingElement?.name;
+        if (closingName?.type === "JSXIdentifier") {
+          closingName.name = "CopyButton";
+        }
       }
     });
   }

@navikt/aksel/src/codemod/transforms/v4.0.0/date/date.ts

@@ -1,8 +1,6 @@
-/**
- * @param {import('jscodeshift').FileInfo} file
- * @param {import('jscodeshift').API} api
- */
-export default function transformer(file) {
+import type { FileInfo } from "jscodeshift";
+
+export default function transformer(file: FileInfo) {
   const names = [
     "UNSAFE_useDatepicker",
     "UNSAFE_DatePicker",

@navikt/aksel/src/codemod/transforms/v4.0.0/internal-css/internal-css.ts

@@ -1,3 +1,5 @@
+import type { FileInfo } from "jscodeshift";
+
 const cssConversions = {
   ".navdsi-dropdown": ".navds-dropdown",
   ".navdsi-header": ".navds-internalheader",
@@ -8,11 +10,8 @@ const cssConversions = {
   "--ac-header-hover-bg": "--ac-internalheader-hover-bg",
   "--ac-header-active-bg": "--ac-internalheader-active-bg",
 };
-/**
- * @param {import('jscodeshift').FileInfo} file
- * @param {import('jscodeshift').API} api
- */
-export default function transformer(file) {
+
+export default function transformer(file: FileInfo) {
   let src = file.source;
 
   Object.entries(cssConversions).forEach(([key, value]) => {

@navikt/aksel/src/codemod/transforms/v4.0.0/internal-react/internal-react.ts

@@ -1,11 +1,8 @@
+import type { API, FileInfo } from "jscodeshift";
 import { getLineTerminator } from "../../../utils/lineterminator";
 import moveAndRenameImport from "../../../utils/packageImports";
 
-/**
- * @param {import('jscodeshift').FileInfo} file
- * @param {import('jscodeshift').API} api
- */
-export default function transformer(file, api) {
+export default function transformer(file: FileInfo, api: API) {
   const j = api.jscodeshift;
 
   let root: any;

@navikt/aksel/src/codemod/transforms/v6.0.0/chat/chat.ts

@@ -1,10 +1,7 @@
+import type { API, FileInfo } from "jscodeshift";
 import { getLineTerminator } from "../../../utils/lineterminator";
 
-/**
- * @param {import('jscodeshift').FileInfo} file
- * @param {import('jscodeshift').API} api
- */
-export default function transformer(file, api) {
+export default function transformer(file: FileInfo, api: API) {
   const j = api.jscodeshift;
   let localName = "Chat";
 
@@ -15,9 +12,14 @@ export default function transformer(file, api) {
     .find(j.ImportDeclaration)
     .filter((path) => path.node.source.value === "@navikt/ds-react")
     .forEach((imp) => {
-      imp.value.specifiers.forEach((x) => {
-        if (x.imported.name === "Chat" && x.local.name !== x.imported.name) {
-          localName = x.local.name;
+      imp.value.specifiers?.forEach((x) => {
+        if (x.type !== "ImportSpecifier") return;
+        if (
+          x.imported.name === "Chat" &&
+          x.local &&
+          x.local.name !== x.imported.name
+        ) {
+          localName = String(x.local.name);
         }
       });
     });

@navikt/aksel/src/codemod/transforms/v8.0.0/box/box.ts

@@ -43,7 +43,7 @@ export default function transformer(file: FileInfo, api: API) {
     for (const prop of propsAffected) {
       findProps({ j, path: astElement, name: prop }).forEach((attr) => {
         const attrvalue = attr.value.value;
-        if (attrvalue.type === "StringLiteral") {
+        if (attrvalue?.type === "StringLiteral") {
           /**
            * Skips if the replacement token already set
            */
@@ -65,7 +65,7 @@ export default function transformer(file: FileInfo, api: API) {
             tokenComments.push(tokenComment);
           }
         } else if (
-          attrvalue.type === "JSXExpressionContainer" &&
+          attrvalue?.type === "JSXExpressionContainer" &&
           attrvalue.expression.type === "StringLiteral"
         ) {
           const literal = attrvalue.expression;
@@ -96,10 +96,10 @@ export default function transformer(file: FileInfo, api: API) {
     findProps({ j, path: astElement, name: "borderRadius" }).forEach((attr) => {
       const attrValue = attr.value.value;
 
-      if (attrValue.type === "StringLiteral") {
+      if (attrValue?.type === "StringLiteral") {
         /* borderRadius="xlarge" */
         attrValue.value = convertBorderRadiusToRadius(attrValue.value);
-      } else if (attrValue.type === "JSXExpressionContainer") {
+      } else if (attrValue?.type === "JSXExpressionContainer") {
         /* borderRadius={{xs: "xlarge", sm: "large"}} */
         const expression = attrValue.expression;
         if (expression.type === "ObjectExpression") {
@@ -189,7 +189,9 @@ function convertBorderRadiusToRadius(oldValue: string): string {
       console.warn(`Possibly invalid radius token found: ${radiusToken}\n`);
       newRadius.push(radiusToken);
     } else {
-      newRadius.push(`${legacyBorderRadiusNameTokenLookup[radiusToken]}`);
+      newRadius.push(
+        `${legacyBorderRadiusNameTokenLookup[radiusToken as keyof typeof legacyBorderRadiusNameTokenLookup]}`,
+      );
     }
   }
 

@navikt/aksel/src/codemod/transforms/v8.0.0/list/list.ts

@@ -4,23 +4,25 @@ import type {
   FileInfo,
   ImportDeclaration,
   JSXAttribute,
+  JSXElement,
   JSXSpreadAttribute,
 } from "jscodeshift";
+import { getJSXStringValue } from "../../../utils/jsx-value";
 import { getLineTerminator } from "../../../utils/lineterminator";
 
-const headingSizeMap = {
+const headingSizeMap: Record<string, string> = {
   small: "xsmall",
   medium: "small",
   large: "medium",
 };
 
-const bodySizeMap = {
+const bodySizeMap: Record<string, string> = {
   small: "small",
   medium: "medium",
   large: "large",
 };
 
-const boxMarginMap = {
+const boxMarginMap: Record<string, string> = {
   small: "space-12",
   medium: "space-16",
   large: "space-16",
@@ -32,7 +34,7 @@ export default function transformer(file: FileInfo, api: API) {
 
   let localListName = "List";
   let hasListImport = false;
-  let dsReactImportPath: ASTPath<ImportDeclaration> | null = null;
+  let dsReactImportPath: ASTPath<ImportDeclaration> | undefined;
 
   let localHeadingName = "Heading";
   let hasHeadingImport = false;
@@ -50,19 +52,19 @@ export default function transformer(file: FileInfo, api: API) {
       path.node.specifiers?.forEach((specifier) => {
         if (specifier.type === "ImportSpecifier") {
           if (specifier.imported.name === "List") {
-            localListName = specifier.local?.name || "List";
+            localListName = String(specifier.local?.name || "List");
             hasListImport = true;
           }
           if (specifier.imported.name === "Heading") {
-            localHeadingName = specifier.local?.name || "Heading";
+            localHeadingName = String(specifier.local?.name || "Heading");
             hasHeadingImport = true;
           }
           if (specifier.imported.name === "BodyShort") {
-            localBodyShortName = specifier.local?.name || "BodyShort";
+            localBodyShortName = String(specifier.local?.name || "BodyShort");
             hasBodyShortImport = true;
           }
           if (specifier.imported.name === "Box") {
-            localBoxName = specifier.local?.name || "Box";
+            localBoxName = String(specifier.local?.name || "Box");
             hasBoxImport = true;
           }
         }
@@ -71,7 +73,7 @@ export default function transformer(file: FileInfo, api: API) {
       path.node.specifiers?.forEach((specifier) => {
         if (specifier.type === "ImportSpecifier") {
           if (specifier.imported.name === "List") {
-            localListName = specifier.local?.name || "List";
+            localListName = String(specifier.local?.name || "List");
             hasListImport = true;
           }
         }
@@ -92,6 +94,10 @@ export default function transformer(file: FileInfo, api: API) {
     .forEach((path) => {
       const attributes = path.node.openingElement.attributes;
 
+      if (!attributes) {
+        return;
+      }
+
       const titleAttr = attributes.find(
         (attr) => attr.type === "JSXAttribute" && attr.name.name === "title",
       ) as JSXAttribute | undefined;
@@ -122,15 +128,11 @@ export default function transformer(file: FileInfo, api: API) {
       const titleValue = titleAttr?.value;
       const descValue = descAttr?.value;
 
-      let sizeValue = "medium";
-      if (sizeAttr && sizeAttr.value?.type === "StringLiteral") {
-        sizeValue = sizeAttr.value.value;
-      }
+      const extractedSize = getJSXStringValue(sizeAttr?.value);
+      const sizeValue = extractedSize || "medium";
 
-      let headingAs = "h3";
-      if (headingTagAttr && headingTagAttr.value?.type === "StringLiteral") {
-        headingAs = headingTagAttr.value.value;
-      }
+      const extractedHeadingAs = getJSXStringValue(headingTagAttr?.value);
+      const headingAs = extractedHeadingAs || "h3";
 
       // Separate attributes
       const listAttributes: JSXAttribute[] = [
@@ -168,7 +170,7 @@ export default function transformer(file: FileInfo, api: API) {
         }
       });
 
-      const newNodes = [];
+      const newNodes: JSXElement[] = [];
 
       // Create Heading
       if (titleValue) {
@@ -189,11 +191,13 @@ export default function transformer(file: FileInfo, api: API) {
           );
         }
 
-        let children = [];
+        let children: (ReturnType<typeof j.jsxText> | typeof titleValue)[];
         if (titleValue.type === "StringLiteral") {
           children = [j.jsxText(titleValue.value)];
         } else if (titleValue.type === "JSXExpressionContainer") {
           children = [titleValue];
+        } else {
+          children = [];
         }
 
         const heading = j.jsxElement(
@@ -209,7 +213,7 @@ export default function transformer(file: FileInfo, api: API) {
         if (!hasBodyShortImport) {
           newImports.add("BodyShort");
         }
-        const bodyAttrs = [];
+        const bodyAttrs: JSXAttribute[] = [];
         const mappedSize = bodySizeMap[sizeValue];
         if (mappedSize && mappedSize !== "medium") {
           bodyAttrs.push(
@@ -220,11 +224,13 @@ export default function transformer(file: FileInfo, api: API) {
           );
         }
 
-        let children = [];
+        let children: (ReturnType<typeof j.jsxText> | typeof descValue)[];
         if (descValue.type === "StringLiteral") {
           children = [j.jsxText(descValue.value)];
         } else if (descValue.type === "JSXExpressionContainer") {
           children = [descValue];
+        } else {
+          children = [];
         }
 
         const body = j.jsxElement(
@@ -285,8 +291,8 @@ export default function transformer(file: FileInfo, api: API) {
       );
 
       newImports.forEach((imp) => {
-        if (!existingSpecifiers.has(imp)) {
-          dsReactImportPath!.node.specifiers?.push(
+        if (!existingSpecifiers.has(imp) && dsReactImportPath) {
+          dsReactImportPath.node.specifiers?.push(
             j.importSpecifier(j.identifier(imp)),
           );
         }

@navikt/aksel/src/codemod/transforms/v8.0.0/primitives-spacing/spacing.ts

@@ -56,17 +56,17 @@ export default function transformer(file: FileInfo, api: API) {
         findProps({ j, path, name: prop }).forEach((attr) => {
           const attrValue = attr.value.value;
 
-          if (attrValue.type === "StringLiteral") {
+          if (attrValue?.type === "StringLiteral") {
             /* padding="32" */
             attrValue.value = convertSpacingToSpace(attrValue.value);
           } else if (
-            attrValue.type === "JSXExpressionContainer" &&
+            attrValue?.type === "JSXExpressionContainer" &&
             attrValue.expression.type === "StringLiteral"
           ) {
             attrValue.expression.value = convertSpacingToSpace(
               attrValue.expression.value,
             );
-          } else if (attrValue.type === "JSXExpressionContainer") {
+          } else if (attrValue?.type === "JSXExpressionContainer") {
             /* padding={{xs: "16", sm: "32"}} */
             const expression = attrValue.expression;
             if (expression.type === "ObjectExpression") {

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

@@ -33,14 +33,14 @@ function findComponentImport(input: {
       return;
     }
 
-    path.node.specifiers.forEach((specifier) => {
+    path.node.specifiers?.forEach((specifier) => {
       if (
         specifier.type === "ImportSpecifier" &&
         specifier.imported.name === name
       ) {
-        foundName = specifier.local
-          ? specifier.local.name
-          : specifier.imported.name;
+        foundName = String(
+          specifier.local ? specifier.local.name : specifier.imported.name,
+        );
       }
     });
   });

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

@@ -1,3 +1,4 @@
+/* @ts-expect-error No avaliable types for testUtils */
 import { applyTransform } from "jscodeshift/dist/testUtils";
 import fs from "node:fs";
 import path from "node:path";

@navikt/aksel/src/codemod/utils/jsx-value.ts

@@ -0,0 +1,88 @@
+import type { JSXAttribute, JSXExpressionContainer } from "jscodeshift";
+
+type AttributeValue =
+  | JSXAttribute["value"]
+  | JSXExpressionContainer["expression"];
+
+type LiteralValue = string | number | boolean;
+
+/**
+ * Extracts a literal value (string, number, or boolean) from a JSX attribute value.
+ * Handles the following patterns:
+ * - `prop="value"` (StringLiteral)
+ * - `prop={"value"}` (JSXExpressionContainer with StringLiteral)
+ * - `prop={`value`}` (TemplateLiteral with no expressions)
+ * - `prop={42}` (NumericLiteral)
+ * - `prop={true}` / `prop={false}` (BooleanLiteral)
+ *
+ * @param node - The JSX attribute value node to extract the value from
+ * @returns The literal value if it can be extracted, otherwise null
+ *
+ * @example
+ * ```tsx
+ * getJSXLiteralValue(attr.value) // where attr is prop="hello" => "hello"
+ * getJSXLiteralValue(attr.value) // where attr is prop={42} => 42
+ * getJSXLiteralValue(attr.value) // where attr is prop={true} => true
+ * ```
+ */
+export function getJSXLiteralValue(node: AttributeValue): LiteralValue | null {
+  if (!node) return null;
+
+  if (node.type === "StringLiteral") {
+    return node.value;
+  }
+
+  if (node.type === "NumericLiteral") {
+    return node.value;
+  }
+
+  if (node.type === "UnaryExpression") {
+    const unary = node;
+    if (unary.operator === "-" && unary.argument.type === "NumericLiteral") {
+      return -unary.argument.value;
+    }
+    return null;
+  }
+
+  if (node.type === "BooleanLiteral") {
+    return node.value;
+  }
+
+  if (node.type === "Literal") {
+    const value = node.value;
+    if (
+      typeof value === "string" ||
+      typeof value === "number" ||
+      typeof value === "boolean"
+    ) {
+      return value;
+    }
+    return null;
+  }
+
+  if (node.type === "TemplateLiteral") {
+    const template = node;
+    if (template.expressions.length === 0 && template.quasis.length === 1) {
+      return template.quasis[0].value.cooked ?? null;
+    }
+    return null;
+  }
+
+  if (node.type === "JSXExpressionContainer") {
+    return getJSXLiteralValue(node.expression);
+  }
+
+  return null;
+}
+
+/**
+ * Extracts the string value from a JSX attribute value.
+ * Convenience wrapper around `getJSXLiteralValue` that only returns strings.
+ *
+ * @param node - The JSX attribute value node to extract the string from
+ * @returns The string value if it can be extracted, otherwise null
+ */
+export function getJSXStringValue(node: AttributeValue): string | null {
+  const value = getJSXLiteralValue(node);
+  return typeof value === "string" ? value : null;
+}

@navikt/aksel/src/codemod/utils/move-variant-to-data-color.ts

@@ -1,10 +1,10 @@
 import type {
   API,
   FileInfo,
-  JSXAttribute,
   JSXExpressionContainer,
   Literal,
 } from "jscodeshift";
+import { getJSXStringValue } from "./jsx-value";
 import { getLineTerminator } from "./lineterminator";
 
 export interface MigrationConfig {
@@ -44,7 +44,7 @@ export function moveVariantToDataColor(
         specifier.type === "ImportSpecifier" &&
         specifier.imported.name === rootComponent
       ) {
-        localName = specifier.local?.name || specifier.imported.name;
+        localName = String(specifier.local?.name || specifier.imported.name);
       }
     });
   });
@@ -77,7 +77,7 @@ export function moveVariantToDataColor(
       if (attr.type !== "JSXAttribute") return;
       if (attr.name.name === config.prop) {
         variantPropIndex = index;
-        const value = getStringValue(attr.value);
+        const value = getJSXStringValue(attr.value);
         if (value) {
           variantValue = value;
         }
@@ -134,25 +134,3 @@ export function moveVariantToDataColor(
   const toSourceOptions = getLineTerminator(file.source);
   return root.toSource(toSourceOptions);
 }
-
-type AttributeValue =
-  | JSXAttribute["value"]
-  | JSXExpressionContainer["expression"];
-
-function getStringValue(node: AttributeValue): string | null {
-  if (!node) return null;
-  if (node.type === "StringLiteral" || node.type === "Literal") {
-    return node.value as string;
-  }
-  if (
-    node.type === "TemplateLiteral" &&
-    node.expressions.length === 0 &&
-    node.quasis.length === 1
-  ) {
-    return node.quasis[0].value.cooked ?? null;
-  }
-  if (node.type === "JSXExpressionContainer") {
-    return getStringValue(node.expression);
-  }
-  return null;
-}

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

@@ -59,8 +59,8 @@ export default function moveAndRenameImport(
   const existingFromImportSpecifier = existingFromImport?.find(
     j.ImportSpecifier,
     (node) => {
-      if (node.imported.name === fromName) {
-        localname = node.local.name;
+      if (node.imported.name === fromName && node.local?.name) {
+        localname = String(node.local.name);
       }
       return node.imported.name === fromName;
     },

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

@@ -11,6 +11,10 @@ export default function removePropsFromComponent(
   component.forEach((node) => {
     const attributes = node.node.openingElement.attributes;
 
+    if (!attributes) {
+      return;
+    }
+
     for (let i = attributes.length - 1; i >= 0; i--) {
       const attribute = attributes[i];
 

@navikt/aksel/src/codemod/utils/rename-props.ts

@@ -1,8 +1,21 @@
-export default function renameProps({ root, componentName, props }) {
+import type { Collection } from "jscodeshift";
+
+interface RenamePropsOptions {
+  root: Collection;
+  componentName: string;
+  props: Record<string, string>;
+}
+
+export default function renameProps({
+  root,
+  componentName,
+  props,
+}: RenamePropsOptions) {
   return root.findJSXElements(componentName).forEach((path) => {
-    path.node.openingElement.attributes.forEach((node) => {
+    path.node.openingElement.attributes?.forEach((node) => {
       if (
         node.type === "JSXAttribute" &&
+        typeof node.name.name === "string" &&
         Object.keys(props).includes(node.name.name)
       ) {
         node.name.name = props[node.name.name];

@navikt/aksel/src/codemod/utils/tests/jsx-string-value.test.ts

@@ -0,0 +1,112 @@
+import jscodeshift from "jscodeshift";
+import { describe, expect, test } from "vitest";
+import { getJSXLiteralValue, getJSXStringValue } from "../jsx-value";
+
+const j = jscodeshift.withParser("tsx");
+
+function getAttrValue(source: string) {
+  const root = j(source);
+  const attr = root.find(j.JSXAttribute, { name: { name: "prop" } });
+  return attr.paths()[0]?.value.value ?? null;
+}
+
+describe("getJSXLiteralValue", () => {
+  test("returns null for null/undefined input", () => {
+    expect(getJSXLiteralValue(null)).toBe(null);
+    expect(getJSXLiteralValue(undefined)).toBe(null);
+  });
+
+  test('handles StringLiteral: prop="value"', () => {
+    const node = getAttrValue('<Component prop="hello" />');
+    expect(getJSXLiteralValue(node)).toBe("hello");
+  });
+
+  test("handles empty StringLiteral", () => {
+    const node = getAttrValue('<Component prop="" />');
+    expect(getJSXLiteralValue(node)).toBe("");
+  });
+
+  test('handles JSXExpressionContainer with StringLiteral: prop={"value"}', () => {
+    const node = getAttrValue('<Component prop={"hello"} />');
+    expect(getJSXLiteralValue(node)).toBe("hello");
+  });
+
+  test("handles TemplateLiteral without expressions: prop={`value`}", () => {
+    const node = getAttrValue("<Component prop={`hello`} />");
+    expect(getJSXLiteralValue(node)).toBe("hello");
+  });
+
+  test("returns null for TemplateLiteral with expressions", () => {
+    // biome-ignore lint/suspicious/noTemplateCurlyInString: Testing only
+    const node = getAttrValue("<Component prop={`hello ${name}`} />");
+    expect(getJSXLiteralValue(node)).toBe(null);
+  });
+
+  test("handles numeric values: prop={42}", () => {
+    const node = getAttrValue("<Component prop={42} />");
+    expect(getJSXLiteralValue(node)).toBe(42);
+  });
+
+  test("handles negative numbers: prop={-5}", () => {
+    const node = getAttrValue("<Component prop={-5} />");
+    expect(getJSXLiteralValue(node)).toBe(-5);
+  });
+
+  test("handles floating point numbers: prop={3.14}", () => {
+    const node = getAttrValue("<Component prop={3.14} />");
+    expect(getJSXLiteralValue(node)).toBe(3.14);
+  });
+
+  test("handles boolean true: prop={true}", () => {
+    const node = getAttrValue("<Component prop={true} />");
+    expect(getJSXLiteralValue(node)).toBe(true);
+  });
+
+  test("handles boolean false: prop={false}", () => {
+    const node = getAttrValue("<Component prop={false} />");
+    expect(getJSXLiteralValue(node)).toBe(false);
+  });
+
+  test("returns null for variable references", () => {
+    const node = getAttrValue("<Component prop={someVar} />");
+    expect(getJSXLiteralValue(node)).toBe(null);
+  });
+
+  test("returns null for function calls", () => {
+    const node = getAttrValue("<Component prop={getValue()} />");
+    expect(getJSXLiteralValue(node)).toBe(null);
+  });
+
+  test("returns null for object expressions", () => {
+    const node = getAttrValue('<Component prop={{ key: "value" }} />');
+    expect(getJSXLiteralValue(node)).toBe(null);
+  });
+
+  test("handles strings with special characters", () => {
+    const node = getAttrValue('<Component prop={"hello, world! 👋"} />');
+    expect(getJSXLiteralValue(node)).toBe("hello, world! 👋");
+  });
+
+  test("handles multiline template literal without expressions", () => {
+    const node = getAttrValue(`<Component prop={\`hello
+world\`} />`);
+    expect(getJSXLiteralValue(node)).toBe("hello\nworld");
+  });
+});
+
+describe("getJSXStringValue", () => {
+  test("returns string for StringLiteral", () => {
+    const node = getAttrValue('<Component prop="hello" />');
+    expect(getJSXStringValue(node)).toBe("hello");
+  });
+
+  test("returns null for numeric values", () => {
+    const node = getAttrValue("<Component prop={42} />");
+    expect(getJSXStringValue(node)).toBe(null);
+  });
+
+  test("returns null for boolean values", () => {
+    const node = getAttrValue("<Component prop={true} />");
+    expect(getJSXStringValue(node)).toBe(null);
+  });
+});

@navikt/aksel/src/codemod/v8-tokens/config/TokenStatus.ts

@@ -29,11 +29,11 @@ class TokenStatus {
   status: StatusT;
 
   constructor() {
-    this.initStatus();
+    this.status = this.initStatus();
   }
 
   initStatus() {
-    this.status = {
+    return {
       css: { legacy: [], updated: [] },
       scss: { legacy: [], updated: [] },
       less: { legacy: [], updated: [] },
@@ -44,6 +44,10 @@ class TokenStatus {
     };
   }
 
+  resetStatus() {
+    this.status = this.initStatus();
+  }
+
   add({
     isLegacy,
     type,
@@ -96,11 +100,9 @@ class TokenStatus {
     let statusDataObj: StatusDataT;
     if (type === "summary") {
       statusDataObj = {
-        legacy: [].concat(
-          ...Object.values(this.status).map((_status) => _status.legacy),
-        ),
-        updated: [].concat(
-          ...Object.values(this.status).map((_status) => _status.updated),
+        legacy: Object.values(this.status).flatMap((_status) => _status.legacy),
+        updated: Object.values(this.status).flatMap(
+          (_status) => _status.updated,
         ),
       };
 

@navikt/aksel/src/codemod/v8-tokens/config/legacy.tokens.ts

@@ -1230,7 +1230,7 @@ const colors = {
 
 type ColorObjWithTwType = ColorObjType & {
   twOld: string;
-  twNew: string;
+  twNew?: string;
 };
 
 const colorWithTailwindConversion = Object.entries(colors).reduce<

@navikt/aksel/src/codemod/v8-tokens/config/token-regex.ts

@@ -9,7 +9,7 @@ function getFrameworkRegexes({
   legacy = false,
 }: {
   token: string;
-  twString: string | null;
+  twString?: string | null;
   legacy: boolean;
 }): Record<"css" | "scss" | "less" | "js" | "tailwind", RegExp | null> {
   const regexes: ReturnType<typeof getFrameworkRegexes> = {

@navikt/aksel/src/codemod/v8-tokens/config/v8.tokens.ts

@@ -453,7 +453,7 @@ const newTokensWithoutRegex: TokensWithTailwindTag = {
 
 type TokensWithRegexes = Record<
   string,
-  { tw: string; regexes: ReturnType<typeof getFrameworkRegexes> }
+  { tw: string | null; regexes: ReturnType<typeof getFrameworkRegexes> }
 >;
 
 const v8TokenConfig: TokensWithRegexes = Object.entries(

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

@@ -107,7 +107,12 @@ export async function runTooling(
         () => getStatus(filepaths, "no-print"),
       );
     } catch (error) {
-      program.error(chalk.red("Error:", error.message));
+      program.error(
+        chalk.red(
+          "Error:",
+          error instanceof Error ? error.message : String(error),
+        ),
+      );
     }
 
     task = await getNextTask(currentStatus.status);
@@ -261,15 +266,21 @@ function getScopedFilesForTask(
   return safeFilepaths.filter((f) => {
     switch (task) {
       case "css-tokens":
-        return !!status.css.legacy.find((config) => config.fileName === f);
+        return !!status.css.legacy.find((config: any) => config.fileName === f);
       case "scss-tokens":
-        return !!status.scss.legacy.find((config) => config.fileName === f);
+        return !!status.scss.legacy.find(
+          (config: any) => config.fileName === f,
+        );
       case "less-tokens":
-        return !!status.less.legacy.find((config) => config.fileName === f);
+        return !!status.less.legacy.find(
+          (config: any) => config.fileName === f,
+        );
       case "js-tokens":
-        return !!status.js.legacy.find((config) => config.fileName === f);
+        return !!status.js.legacy.find((config: any) => config.fileName === f);
       case "tailwind-tokens":
-        return !!status.tailwind.legacy.find((config) => config.fileName === f);
+        return !!status.tailwind.legacy.find(
+          (config: any) => config.fileName === f,
+        );
       default:
         return false;
     }
@@ -361,7 +372,12 @@ async function getNextTask(status?: any): Promise<TaskName> {
     } as any);
     return response.task;
   } catch (error) {
-    if (error.isTtyError) {
+    if (
+      error != null &&
+      typeof error === "object" &&
+      "isTtyError" in error &&
+      error.isTtyError
+    ) {
       console.info(
         "Oops, something went wrong! Looks like @navikt/aksel can't run in this terminal. " +
           "Contact Aksel for support if this persists, or try another terminal.",

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

@@ -190,7 +190,10 @@ async function printRemaining(files: string[], status?: TokenStatus["status"]) {
       clipboardy.writeSync(JSON.stringify(jsonOutput, null, 2));
       console.info("✅ Report (JSON) copied to clipboard!");
     } catch (error) {
-      console.error("❌ Failed to copy to clipboard:", error.message);
+      console.error(
+        "❌ Failed to copy to clipboard:",
+        error instanceof Error ? error.message : String(error),
+      );
     }
   }
 }

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

@@ -29,7 +29,7 @@ function getStatus(
     progressBar.start(files.length, 0);
   }
 
-  StatusStore.initStatus();
+  StatusStore.resetStatus();
 
   /**
    * Prepare search terms for legacy and v8 tokens.

@navikt/aksel/src/codemod/v8-tokens/transforms/v8-tokens-js.ts

@@ -39,7 +39,7 @@ export default function transformer(file: FileInfo, api: API) {
         oldJsVar,
         "@navikt/ds-tokens/dist/tokens",
       ).forEach((x) => {
-        foundName = x.node.imported.name;
+        foundName = x.node.imported.name as string;
       });
 
       if (!foundName) {

@navikt/aksel/src/codemod/v8-tokens/transforms/v8-tokens-less.ts

@@ -14,7 +14,7 @@ export default function transformer(file: FileInfo) {
   let src = file.source;
 
   for (const config of Object.values(legacyTokenConfig)) {
-    if (config.replacement.length > 0) {
+    if (config.replacement.length > 0 && config.regexes.less) {
       src = src.replace(
         config.regexes.less,
         translateToken(`--ax-${config.replacement}`, "less"),

@navikt/aksel/src/codemod/v8-tokens/transforms/v8-tokens-scss.ts

@@ -14,7 +14,7 @@ export default function transformer(file: FileInfo) {
   let src = file.source;
 
   for (const config of Object.values(legacyTokenConfig)) {
-    if (config.replacement.length > 0) {
+    if (config.replacement.length > 0 && config.regexes.scss) {
       src = src.replace(
         config.regexes.scss,
         translateToken(`--ax-${config.replacement}`, "scss"),

@navikt/aksel/src/migrations-config.ts

@@ -0,0 +1,214 @@
+import type { SupportedCodemodExtensions } from "./codemod/codeshift.utils";
+
+const JS_EXTENSIONS = [
+  "js",
+  "jsx",
+  "ts",
+  "tsx",
+] satisfies SupportedCodemodExtensions[];
+
+const CSS_EXTENSIONS = [
+  "css",
+  "scss",
+  "less",
+] satisfies SupportedCodemodExtensions[];
+
+type MigrationT = Record<
+  string,
+  {
+    description: string;
+    value: string;
+    path: string;
+    warning?: string;
+    /**
+     * Some transforms are only meant to run on specific file extensions.
+     * This is used to filter out files that should not be transformed.
+     */
+    ignoredExtensions: SupportedCodemodExtensions[];
+  }[]
+>;
+
+const migrations: MigrationT = {
+  v1: [
+    {
+      description: "Runs all codemods for beta -> v1 migration",
+      value: "v1-preset",
+      path: "v1.0.0/preset/preset",
+      ignoredExtensions: CSS_EXTENSIONS,
+    },
+    {
+      description: "Fixes breaking API-changes for <Pagination /> component",
+      value: "v1-pagination",
+      path: "v1.0.0/pagination/pagination",
+      ignoredExtensions: CSS_EXTENSIONS,
+    },
+    {
+      description: "Fixes breaking API-changes for <Tabs /> component",
+      value: "v1-tabs",
+      path: "v1.0.0/tabs/tabs",
+      ignoredExtensions: CSS_EXTENSIONS,
+    },
+    {
+      description:
+        "Fixes breaking API-changes for <SpeechBubble /> (now <Chat/>) component",
+      value: "v1-chat",
+      path: "v1.0.0/chat/chat",
+      ignoredExtensions: CSS_EXTENSIONS,
+    },
+  ],
+  v2: [
+    {
+      description: "Patches changed css-variables",
+      value: "v2-css",
+      path: "v2.0.0/update-css-tokens/update-css-tokens",
+      ignoredExtensions: [],
+    },
+    {
+      description: "Patches changed js-variables",
+      value: "v2-js",
+      path: "v2.0.0/update-js-tokens/update-js-tokens",
+      ignoredExtensions: CSS_EXTENSIONS,
+    },
+    {
+      description: "Patches changed sass-variables",
+      value: "v2-sass",
+      path: "v2.0.0/update-sass-tokens/update-sass-tokens",
+      ignoredExtensions: JS_EXTENSIONS,
+    },
+    {
+      description: "Patches changed less-variables",
+      value: "v2-less",
+      path: "v2.0.0/update-less-tokens/update-less-tokens",
+      ignoredExtensions: JS_EXTENSIONS,
+    },
+  ],
+  v3: [
+    {
+      description:
+        "Replaces deprecated <CopyToClipboard /> with <CopyButton />",
+      value: "v3-copybutton",
+      path: "v3.0.0/copybutton/copybutton",
+      warning:
+        "Remember to remove css-import from '@navikt/ds-css-internal' if no longer needed\nIf non-text was used as children, or different locales were handled, you need to manually fix this",
+      ignoredExtensions: CSS_EXTENSIONS,
+    },
+  ],
+  v4: [
+    {
+      description:
+        "Replaced deprecated 'internal'-component import to 'core'-imports",
+      value: "v4-internal-react",
+      path: "v4.0.0/internal-react/internal-react",
+      warning:
+        "Remember to also run 'v4-internal-css' if you have overwritten any css-classes!",
+      ignoredExtensions: CSS_EXTENSIONS,
+    },
+    {
+      description:
+        "Replaced 'navdsi'-prefixes used to overwrite internal-css to 'navds'-prefixes",
+      value: "v4-internal-css",
+      path: "v4.0.0/internal-css/internal-css",
+      warning:
+        "Remember to remove '@navikt/ds-css-internal' imports if no longer needed! Also run 'v4-internal-react' to convert internal-react imports to core-imports",
+      ignoredExtensions: [],
+    },
+    {
+      description:
+        "Removes all instances of UNSAFE_ for datepicker/monthpicker.",
+      value: "v4-date",
+      path: "v4.0.0/date/date",
+      ignoredExtensions: CSS_EXTENSIONS,
+    },
+  ],
+  v6: [
+    {
+      description:
+        "Removes `backgroundColor` and `avatarBgColor` properties from `Chat` and `Chat.Bubble`",
+      value: "v6-chat",
+      path: "v6.0.0/chat/chat",
+      warning:
+        "Remember to update use of `variant`-prop to match previous use of colors. If needed the component exposes css-variables for custom overrides",
+      ignoredExtensions: CSS_EXTENSIONS,
+    },
+  ],
+  v8: [
+    {
+      description:
+        "Updates Box with legacy-tokens to Box using the new token system, and renames already migrated BoxNew/Box.New instances to Box.",
+      value: "v8-box",
+      path: "v8.0.0/box/box",
+      warning:
+        "Remember to check if 'TODO: Aksel Box migration'-comment was added to any files after migration. This comment will help you find and update Box-instances we couldn't update for you.",
+      ignoredExtensions: CSS_EXTENSIONS,
+    },
+    {
+      description: "Renames already migrated BoxNew/Box.New instances to Box.",
+      value: "v8-box-new",
+      path: "v8.0.0/box-new/box-new",
+      ignoredExtensions: CSS_EXTENSIONS,
+    },
+    {
+      description: "Removes deprecated props from components.",
+      value: "v8-prop-deprecate",
+      path: "v8.0.0/prop-deprecate/prop-deprecate",
+      ignoredExtensions: CSS_EXTENSIONS,
+    },
+    {
+      description:
+        "Tries to migrate List component by wrapping it with 'Box' and moving 'title' and 'description' props to 'Heading' and 'BodyShort'.",
+      value: "v8-list",
+      path: "v8.0.0/list/list",
+      ignoredExtensions: CSS_EXTENSIONS,
+    },
+    {
+      description: "Updates all Primitives to use new `space`-tokens.",
+      value: "v8-primitive-spacing",
+      path: "v8.0.0/primitives-spacing/spacing",
+      ignoredExtensions: CSS_EXTENSIONS,
+    },
+    {
+      description:
+        "Updates variant + data-color props on Tag based on current variant prop.",
+      value: "v8-tag-variant",
+      path: "v8.0.0/tag-variant/tag-variant",
+      ignoredExtensions: CSS_EXTENSIONS,
+    },
+    {
+      description:
+        "Updates variant + data-color props on ToggleGroup based on current variant prop.",
+      value: "v8-toggle-group-variant",
+      path: "v8.0.0/toggle-group-variant/toggle-group-variant",
+      ignoredExtensions: CSS_EXTENSIONS,
+    },
+    {
+      description:
+        "Updates variant + data-color props on Accordion based on current variant prop.",
+      value: "v8-accordion-variant",
+      path: "v8.0.0/accordion-variant/accordion-variant",
+      ignoredExtensions: CSS_EXTENSIONS,
+    },
+    {
+      description:
+        "Updates variant + data-color props on Chips based on current variant prop.",
+      value: "v8-chips-variant",
+      path: "v8.0.0/chips-variant/chips-variant",
+      ignoredExtensions: CSS_EXTENSIONS,
+    },
+    {
+      description:
+        "Updates variant + data-color props on Button based on current variant prop.",
+      value: "v8-button-variant",
+      path: "v8.0.0/button-variant/button-variant",
+      ignoredExtensions: CSS_EXTENSIONS,
+    },
+    {
+      description:
+        "Updates variant + data-color props on Link based on current variant prop.",
+      value: "v8-link-variant",
+      path: "v8.0.0/link-variant/link-variant",
+      ignoredExtensions: CSS_EXTENSIONS,
+    },
+  ],
+} as const;
+
+export { migrations };

@navikt/aksel/tsconfig.json

@@ -4,8 +4,9 @@
     "sourceMap": false,
     "esModuleInterop": true,
     "target": "es2015",
+    "lib": ["ES2021"],
     "preserveWatchOutput": true,
-    "declaration": false,
+    "declaration": true,
     "types": ["node"],
     "outDir": "dist",
     "rootDir": "./src",

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,69 @@
 # @navikt/ds-css
 
+## 8.10.2
+
+### Patch Changes
+
+- Dialog: Now aligns to bottom when centered at 480px instead of 768px screen width ([#4831](https://github.com/navikt/aksel/pull/4831))
+
+## 8.10.1
+
+### Patch Changes
+
+- Modal: Changing `size` had no effect before ([#4823](https://github.com/navikt/aksel/pull/4823))
+
+## 8.10.0
+
+### Minor Changes
+
+- DatePicker: Highlight days between start and hovered day ([#4801](https://github.com/navikt/aksel/pull/4801))
+
+### Patch Changes
+
+- Skeleton: Text-variant now has properly rounded edges ([#4808](https://github.com/navikt/aksel/pull/4808))
+
+- ExpandableRow: Fix selected row top border not showing when row above was collapsed ([#4810](https://github.com/navikt/aksel/pull/4810))
+
+- Timeline: Icons in periods now scale based on avaliable space. No longer clips on smaller periods ([#4809](https://github.com/navikt/aksel/pull/4809))
+
+- DatePicker, MonthPicker: Change styling on disabled days/months ([#4801](https://github.com/navikt/aksel/pull/4801))
+
+- InfoCard: Align header with content when no icon is present for small version. ([#4815](https://github.com/navikt/aksel/pull/4815))
+
+- InfoCard, LocalAlert, GlobalAlert: Update content typography use and sizing. ([#4815](https://github.com/navikt/aksel/pull/4815))
+
+## 8.9.1
+
+### Patch Changes
+
+- Button: Use correct text color when inherited `data-color` is "neutral" ([#4772](https://github.com/navikt/aksel/pull/4772))
+
+- Checkbox, Radio: Internal updates. ([#4760](https://github.com/navikt/aksel/pull/4760))
+
+- Datepicker, Monthpicker: Sync background on DateInput button to Input. ([#4781](https://github.com/navikt/aksel/pull/4781))
+
+## 8.9.0
+
+### Minor Changes
+
+- InternalHeader: Added `isActive`-prop to `InternalHeader.Button`. ([#4761](https://github.com/navikt/aksel/pull/4761))
+
+### Patch Changes
+
+- DatePicker, MonthPicker: Make open button more prominent ([#4751](https://github.com/navikt/aksel/pull/4751))
+
+## 8.8.0
+
+### Minor Changes
+
+- ReadMore: Added variant `moderate`. ([#4723](https://github.com/navikt/aksel/pull/4723))
+
+- InfoCard: New sub-component InfoCard.Message. ([#4717](https://github.com/navikt/aksel/pull/4717))
+
+### Patch Changes
+
+- GlobalAlert, LocalAlert: Content outline changed from 4px to 2px. ([#4745](https://github.com/navikt/aksel/pull/4745))
+
 ## 8.7.0
 
 ### Minor Changes

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "8.7.0",
+  "version": "8.10.2",
   "description": "CSS for Nav Designsystem",
   "author": "Aksel | Nav designsystem team",
   "keywords": [
@@ -30,9 +30,9 @@
     "css:get-version": "node config/get-version.js"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^8.7.0",
+    "@navikt/ds-tokens": "^8.10.2",
     "browserslist": "^4.25.0",
-    "esbuild": "^0.27.2",
+    "esbuild": "^0.27.4",
     "fast-glob": "3.3.3",
     "lightningcss": "^1.30.1",
     "normalize.css": "^8.0.1",

@navikt/core/css/src/alert.css

@@ -114,11 +114,16 @@
   &[data-variant="moderate"] {
     outline: 1px solid var(--ax-border-default);
     outline-offset: -1px;
+
+    /* Adjust horizontal padding for small moderate alerts */
+    &[data-size="small"] {
+      --__axc-base-alert-pi: var(--ax-space-16);
+    }
   }
 
   &[data-variant="strong"] {
-    outline: 4px solid var(--ax-border-default);
-    outline-offset: -4px;
+    outline: 2px solid var(--ax-border-default);
+    outline-offset: -2px;
 
     &[data-color="neutral"] {
       outline-color: var(--ax-border-strong);
@@ -145,6 +150,9 @@
     background: var(--ax-bg-moderate);
     color: var(--ax-text-default);
     border-color: var(--ax-border-subtleA);
+
+    /* Optical alignment */
+    padding-top: var(--ax-space-1);
   }
 
   .aksel-base-alert[data-variant="strong"] & {
@@ -172,6 +180,10 @@
   padding: var(--__axc-base-alert-content-p);
   background-color: var(--ax-bg-default);
 
+  &[data-color] {
+    color: var(--ax-text-neutral);
+  }
+
   .aksel-base-alert[data-global="true"] & {
     padding-inline: var(--__axc-global-alert-alignment);
   }
@@ -192,3 +204,24 @@
     color: var(--ax-text-neutral-contrast);
   }
 }
+
+.aksel-base-alert__message {
+  border-radius: var(--ax-radius-12);
+  height: fit-content;
+  outline: 1px solid var(--ax-border-default);
+  outline-offset: -1px;
+  background: var(--ax-bg-moderate);
+  color: var(--ax-text-default);
+  display: flex;
+  align-items: flex-start;
+  gap: var(--ax-space-8);
+  padding: var(--ax-space-12) var(--ax-space-16);
+
+  & > .aksel-base-alert__icon {
+    margin-top: var(--ax-space-2);
+  }
+
+  .aksel-base-alert[data-size="small"] & > .aksel-base-alert__icon {
+    margin-top: 0;
+  }
+}

@navikt/core/css/src/button.css

@@ -44,7 +44,9 @@
     background-color: transparent;
     color: var(--ax-text-subtle);
 
-    &[data-color="neutral"] {
+    &[data-color="neutral"],
+    [data-color="neutral"] > &:not([data-color]),
+    [data-color="neutral"] :not([data-color]) &:not([data-color]) {
       color: var(--ax-text-default);
     }
 
@@ -62,7 +64,8 @@
       color: var(--ax-text-subtle);
       background-color: transparent;
 
-      &[data-color="neutral"] {
+      &[data-color="neutral"],
+      [data-color="neutral"] > &:not([data-color]) {
         color: var(--ax-text-default);
       }
     }
@@ -72,7 +75,9 @@
     background-color: transparent;
     color: var(--ax-text-subtle);
 
-    &[data-color="neutral"] {
+    &[data-color="neutral"],
+    [data-color="neutral"] > &:not([data-color], [data-pressed="true"]),
+    [data-color="neutral"] :not([data-color]) &:not([data-color], [data-pressed="true"]) {
       color: var(--ax-text-default);
     }
 
@@ -93,7 +98,8 @@
       color: var(--ax-text-subtle);
       background-color: transparent;
 
-      &[data-color="neutral"] {
+      &[data-color="neutral"],
+      [data-color="neutral"] > &:not([data-color]) {
         color: var(--ax-text-default);
       }
     }

@navikt/core/css/src/chips.css

@@ -95,8 +95,6 @@
   padding-left: var(--ax-space-6);
 }
 
-/* -------------------------- start old CSS --------------------------  */
-
 /* ----------------------------- Chips removable ---------------------------- */
 .aksel-chips__removable {
   gap: 0;

@navikt/core/css/src/data-table.css

@@ -1,3 +1,4 @@
+/* stylelint-disable csstools/value-no-unknown-custom-properties */
 /* stylelint-disable no-duplicate-selectors */
 
 .aksel-data-table__border-wrapper {
@@ -48,41 +49,70 @@
       background-color: var(--ax-bg-neutral-softA);
     }
   }
-
-  &[data-truncate-content="true"] {
-    .aksel-data-table__td > div {
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-    }
-  }
 }
 
 .aksel-data-table__thead {
   background-color: var(--ax-bg-raised);
-  position: sticky;
-  top: 0;
+
+  .aksel-data-table[data-loading="true"] &::after {
+    content: "";
+    position: absolute;
+    block-size: 2px;
+    inset-block-end: -2px;
+    background-color: var(--ax-bg-strong);
+    animation: animateDataTableLoading 1s linear infinite;
+    z-index: 11;
+  }
 }
 
 .aksel-data-table__tbody {
   background-color: var(--ax-bg-raised);
-}
+  position: relative;
 
-.aksel-data-table__tr--selected {
-  background-color: var(--ax-bg-softA);
-  box-shadow:
-    inset 1px 0 0 0 var(--ax-border-default),
-    inset -1px 0 0 0 var(--ax-border-default);
+  &[inert] {
+    transition: opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    opacity: var(--ax-opacity-disabled);
 
-  &:first-of-type {
-    box-shadow:
-      inset 1px 0 0 0 var(--ax-border-default),
-      inset -1px 0 0 0 var(--ax-border-default),
-      inset 0 1px 0 0 var(--ax-border-default);
+    @starting-style {
+      opacity: 0.001;
+    }
   }
 
-  & :is(.aksel-data-table__td, .aksel-data-table__th) {
-    border-color: var(--ax-border-default);
+  &[inert]::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background-color: var(--ax-bg-overlay);
+    transition: opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    z-index: 10;
+    opacity: 0.2;
+
+    /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
+
+    @starting-style {
+      opacity: 0.001;
+    }
+  }
+}
+
+.aksel-data-table__tr {
+  &[data-selected="true"] {
+    background-color: var(--ax-bg-softA);
+  }
+
+  .aksel-data-table__thead &[data-sticky="true"] {
+    position: sticky;
+    top: 0;
+    z-index: 3;
+
+    &::after {
+      content: "";
+      position: absolute;
+      inset-inline: 0;
+      bottom: -1px;
+      pointer-events: none;
+      border-bottom: 1px solid var(--ax-border-neutral-subtle);
+    }
   }
 }
 
@@ -100,6 +130,7 @@
     pointer-events: none;
     border: 1px solid var(--ax-border-neutral-subtle);
     border-radius: var(--ax-radius-12);
+    z-index: 3;
   }
 }
 
@@ -111,16 +142,32 @@
 }
 
 .aksel-data-table__thead {
+  position: relative; /* Shadow ends up behind loading/empty-state without, consider after-element instead like with sticky */
   box-shadow: 0 1px 0 0 var(--ax-border-neutral-subtle);
 }
 
-.aksel-data-table__th,
-.aksel-data-table__td {
+.aksel-data-table__cell {
   /* border doesn't work on sticky thead when we have collapsed borders, so using box-shadow instead */
   box-shadow: inset 1px 1px 0 0 var(--ax-border-neutral-subtle);
+  text-align: start;
+  vertical-align: middle;
+  scroll-margin: var(--ax-space-0);
+  padding: 0;
+
+  &[data-nested="true"] {
+    position: relative;
+
+    & > div {
+      margin-inline-start: calc(32px + 8px + calc(var(--__axc-data-table-nested-depth) * var(--ax-space-16)));
+    }
+  }
+
+  .aksel-data-table__thead & {
+    background-color: var(--ax-bg-neutral-soft);
+  }
 
   &[data-align="left"] {
-    text-align: left;
+    text-align: start;
   }
 
   &[data-align="center"] {
@@ -128,18 +175,90 @@
   }
 
   &[data-align="right"] {
-    text-align: right;
+    text-align: end;
+  }
+
+  &[data-sticky] {
+    position: sticky;
+    z-index: 1;
+
+    &::after {
+      content: "";
+      position: absolute;
+      inset-block: 0;
+      pointer-events: none;
+      border-color: var(--ax-border-neutral-subtle);
+      border-style: solid;
+      border-width: 0;
+    }
+
+    &[data-sticky="start"] {
+      left: 0;
+
+      &::after {
+        inset-inline: 0 -1px;
+        border-right-width: 1px;
+      }
+    }
+
+    &[data-sticky="end"] {
+      right: 0;
+    }
+
+    background-color: var(--ax-bg-raised);
+
+    .aksel-data-table__thead & {
+      background-color: var(--ax-bg-neutral-soft);
+    }
+  }
+
+  &:focus-visible,
+  /* Focus instead of focus-visible so that effect of sort-icon staying isnt strange */
+  /* TODO: Update from th to generic */
+  &:has(.aksel-data-table__th-sort-button:focus) {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: -4px;
+  }
+
+  &[data-selectable="true"] {
+    padding: 0;
+
+    & > div {
+      display: grid;
+      place-content: center;
+    }
+  }
+
+  --__axc-data-table-pi-cell: var(--ax-space-16);
+
+  &:not([data-selectable="true"]) > div {
+    padding-block: var(--__axc-data-table-density);
+    padding-inline: var(--__axc-data-table-pi-cell);
+
+    .aksel-data-table[data-truncate-content="true"] & {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
   }
 }
 
 /* BORDER STYLING END */
 
-.aksel-data-table__th {
+.aksel-data-table__column-header {
+  /* TODO: Might want this to be dynamic */
+  --__axc-data-table-density: var(--ax-space-8);
+
   position: relative;
-  background-color: var(--ax-bg-neutral-soft);
-  color: var(--ax-text-neutral);
-  padding: var(--ax-space-8) var(--ax-space-16);
-  text-align: start;
+  font-weight: var(--ax-font-weight-bold);
+
+  &:has(.aksel-data-table__th-sort-button:hover) {
+    background-color: var(--ax-bg-neutral-moderate-hover);
+  }
+
+  &:has(.aksel-data-table__th-sort-button:active) {
+    background-color: var(--ax-bg-neutral-moderate-pressed);
+  }
 
   &[data-sortable="true"] {
     padding: 0;
@@ -151,21 +270,14 @@
   display: flex;
   align-items: center;
   gap: var(--ax-space-2);
-  padding-inline-start: var(--ax-space-16);
   block-size: calc(var(--__axc-data-table-density) + 1.5rem);
   width: 100%;
   cursor: pointer;
   text-align: start;
   background-color: transparent;
   border: none;
-
-  &:hover {
-    background-color: var(--ax-bg-neutral-moderate-hover);
-  }
-
-  &:active {
-    background-color: var(--ax-bg-neutral-moderate-pressed);
-  }
+  font-weight: inherit;
+  padding: 0;
 
   &:focus-visible {
     outline: none;
@@ -200,7 +312,7 @@
 }
 
 .aksel-data-table__th-resize-handle {
-  z-index: 2;
+  z-index: 1;
   position: absolute;
   cursor: col-resize;
   margin: 0;
@@ -231,6 +343,13 @@
     transition: background 50ms linear;
   }
 
+  &:hover,
+  &:focus-visible,
+  &:active {
+    /* Avoids clipping when having sticky columns */
+    z-index: 3;
+  }
+
   &:hover::after {
     /* TODO: Consider if the resize-handle should be visible already when hovering the column header */
     background: var(--ax-bg-strong);
@@ -241,7 +360,7 @@
     background: var(--ax-bg-strong-pressed);
   }
 
-  .aksel-data-table__th:last-of-type & {
+  .aksel-data-table__column-header:last-of-type & {
     inset-inline-end: 0;
     width: 15px;
 
@@ -299,18 +418,6 @@
   }
 }
 
-.aksel-data-table__td {
-  text-align: start;
-  vertical-align: middle;
-  color: var(--ax-text-neutral-subtle);
-
-  > div {
-    padding-block: var(--__axc-data-table-density);
-    padding-inline: 1rem;
-  }
-}
-
-.aksel-data-table__td,
 .aksel-data-table__th {
   scroll-margin-block: var(--ax-space-0);
   scroll-margin-inline: var(--ax-space-0);
@@ -321,6 +428,15 @@
     outline: 2px solid var(--ax-border-focus);
     outline-offset: -4px;
   }
+
+  &[data-selectable="true"] {
+    padding: 0;
+
+    & > div {
+      display: grid;
+      place-content: center;
+    }
+  }
 }
 
 .aksel-data-table__tfoot {
@@ -330,17 +446,38 @@
 .aksel-data-table__filler-cell {
   width: auto;
   display: table-cell;
+  padding: 0;
+}
+
+.aksel-data-drag-and-drop__drag-handler__button {
+  height: 1.5rem;
+  position: relative;
+  background: transparent;
+  border: none;
+  padding: 0;
+
+  &:hover {
+    cursor: grab;
+  }
+
+  &:focus-visible,
+  &[data-drag-handler-active="true"] {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: -1px;
+    border-radius: var(--ax-radius-8);
+  }
 }
 
 .aksel-data-table__drag-and-drop-item {
-  &[data-dragging="true"] {
-    background: var(--ax-bg-default);
-  }
+  background-color: var(--ax-bg-default);
 
-  &[data-mouse-dragging="true"]:not(:active) {
+  &[data-overlay="true"] {
+    width: 100%;
     opacity: 0.8;
+    box-shadow: var(--ax-shadow-dialog);
   }
 
+  /* TODO - might be removable */
   &[data-keyboard-dragging="true"] {
     .aksel-data-drag-and-drop__drag-handler__button {
       outline: 2px solid var(--ax-border-focus);
@@ -349,44 +486,110 @@
     }
   }
 
-  &[data-drop-target="true"] {
+  &[data-drop-target="true"]:not([data-overlay="true"]) {
     background: var(--ax-bg-neutral-moderate);
   }
 }
 
-.aksel-data-drag-and-drop__drag-handler__button {
-  cursor: grab;
+.aksel-data-drag-and-drop__drag-handler__alt,
+.aksel-data-drag-and-drop__drag-handler {
+  position: relative;
   height: 1.5rem;
-  position: relative;
-  background: transparent;
-  border: none;
-  padding: 0;
-
-  &:focus-visible {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: -1px;
-    border-radius: var(--ax-radius-8);
-  }
-}
-
-.aksel-data-drag-and-drop__drag-handler__arrow {
-  height: 1.2rem;
-}
-
-.aksel-data-drag-and-drop__drag-handler__alt {
-  position: relative;
 
   .aksel-data-drag-and-drop__drag-handler__arrow {
+    height: 1.8rem;
     position: absolute;
     left: 50%;
     transform: translate(-50%, -50%);
+    background: var(--ax-bg-default);
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    border-radius: 50%;
+    z-index: 1;
 
     &[data-direction="up"] {
-      top: -10px;
+      top: -18px;
     }
 
     &[data-direction="down"] {
-      bottom: calc(-100% - 6px);
+      bottom: calc(-100% - 22px);
+    }
+
+    &:disabled {
+      opacity: 0.8;
+      cursor: not-allowed;
     }
   }
 }
+
+.aksel-data-table__empty-state {
+  display: grid;
+  place-content: center;
+  padding-block: var(--ax-space-32);
+  padding-inline: var(--ax-space-16);
+  text-align: center;
+  gap: var(--ax-space-8);
+  justify-items: center;
+}
+
+.aksel-data-table__loading-state {
+  display: grid;
+  place-content: center;
+  padding-block: var(--ax-space-32);
+  padding-inline: var(--ax-space-16);
+  text-align: center;
+  gap: var(--ax-space-8);
+  justify-items: center;
+  position: relative;
+}
+
+@keyframes animateDataTableLoading {
+  0% {
+    inset-inline-start: 0;
+    inline-size: 0;
+  }
+
+  20% {
+    inset-inline-start: 0;
+    inline-size: 40%;
+  }
+
+  80% {
+    inset-inline-start: 60%;
+    inline-size: 40%;
+  }
+
+  100% {
+    inset-inline-start: 100%;
+    inline-size: 0;
+  }
+}
+
+/* TODO: Look to handle "inline"-checkbox better than custom CSS-overrides in the future. */
+.aksel-data-table tr .aksel-checkbox {
+  padding: 0;
+}
+
+.aksel-data-table tr .aksel-checkbox:focus-within::after {
+  inset: 0;
+}
+
+/* TODO -
+* This is needed to prevent the cursor from changing back to default when dragging over interactive elements in the row.
+* Not sure if this is the best approach or breaks styling elsewhere */
+html[data-dragging-cursor="true"],
+html[data-dragging-cursor="true"] *,
+html[data-dragging-cursor="true"] *::before,
+html[data-dragging-cursor="true"] *::after {
+  cursor: grabbing !important;
+}
+
+/* TODO: alignment not optimal when resizing column with nesting */
+.aksel-data-table__nested-toggle {
+  position: absolute;
+  inset-block: 0;
+  left: calc(var(--__axc-data-table-pi-cell) + var(--__axc-data-table-nested-depth) * var(--ax-space-16));
+  display: flex;
+  align-items: center;
+}

@navikt/core/css/src/data-token-filter.css

@@ -1,36 +1,105 @@
+/* .aksel-property-filter {
+  flex: 1 1 fit-content;
+  max-inline-size: 100%;
+} */
+
 .aksel-property-filter__popup {
   overflow: hidden;
-  border-radius: var(--ax-radius-12);
+  border-radius: var(--ax-radius-8);
   border: 1px solid var(--ax-border-neutral-subtleA);
   box-shadow: var(--ax-shadow-dialog);
   /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
   transform-origin: var(--__axc-floating-transform-origin);
-  transition:
-    transform 150ms ease allow-discrete,
-    opacity 150ms ease allow-discrete;
+  transition: opacity 150ms ease allow-discrete;
 
   @starting-style {
-    opacity: 0.8;
-    transform: scale3d(0.94, 0.94, 0.94);
+    opacity: 0.6;
   }
 
   min-width: 260px;
 }
 
 .aksel-property-filter__popup-inner {
-  --__axc-token-filter-content-p: var(--ax-space-8);
   --__axc-token-filter-item-pr: var(--ax-space-8);
   --__axc-token-filter-item-pl: var(--ax-space-8);
   --__axc-token-filter-item-height: 2rem;
 
-  border-radius: var(--ax-radius-12);
+  border-radius: var(--ax-radius-8);
   background-color: var(--ax-bg-raised);
   min-width: 128px;
   max-width: min(95vw, 640px);
   animation-duration: 160ms;
   animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-  padding: var(--__axc-token-filter-content-p);
   overflow: auto;
   /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
   max-height: calc(var(--__axc-floating-available-height) - 4px);
 }
+
+.aksel-property-filter__input {
+  max-inline-size: 640px;
+}
+
+.aksel-property-filter__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ax-space-8);
+  margin: 0;
+  margin-block-start: var(--ax-space-12);
+  padding: 0;
+  font-size: var(--ax-font-size-medium);
+}
+
+.aksel-property-filter__chip {
+  display: flex;
+  gap: var(--ax-space-1);
+}
+
+.aksel-property-filter__chip-button {
+  display: flex;
+  align-items: center;
+  gap: var(--ax-space-4);
+  padding: var(--ax-space-4) var(--ax-space-8);
+  background-color: var(--ax-bg-strong);
+  color: var(--ax-text-contrast);
+  border: none;
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--ax-bg-strong-hover);
+  }
+
+  &:active {
+    background-color: var(--ax-bg-strong-pressed);
+  }
+
+  &:focus-visible {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 2px;
+    z-index: 1;
+  }
+
+  &:first-of-type {
+    border-start-start-radius: var(--ax-radius-8);
+    border-end-start-radius: var(--ax-radius-8);
+  }
+
+  &:last-child {
+    border-start-end-radius: var(--ax-radius-8);
+    border-end-end-radius: var(--ax-radius-8);
+  }
+
+  &[data-type="operation"] {
+    /* background-color: var(--ax-bg-default);
+    box-shadow: inset 0 0 0 1px var(--ax-bg-strong);
+    color: var(--ax-text-default); */
+    color: var(--ax-text-neutral);
+    background-color: var(--ax-bg-neutral-moderate-pressed);
+  }
+
+  /* &[data-type="value"] {
+  } */
+
+  &[data-type="remove"] {
+    padding-inline: var(--ax-space-4);
+  }
+}

@navikt/core/css/src/data-toolbar.css

@@ -1,18 +1,29 @@
 .aksel-data-toolbar {
-  padding: var(--ax-space-12);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: var(--ax-space-8);
+}
+
+.aksel-data-toolbar__actions {
+  margin-inline-start: auto;
+  display: flex;
+  align-items: center;
+
+  > :not(:last-child) {
+    border-right: 1px solid var(--ax-border-neutral-subtle);
+    margin-inline-end: var(--ax-space-4);
+    padding-inline-end: var(--ax-space-4);
+  }
+}
+
+.aksel-data-toolbar__input {
+  flex: 1 1 fit-content;
+  max-inline-size: 100%;
+}
+
+.aksel-data-toolbar__pagination {
   display: flex;
   align-items: center;
   gap: var(--ax-space-8);
-  border: 1px solid var(--ax-border-neutral);
-  border-radius: var(--ax-radius-12);
-  background-color: var(--ax-bg-raised);
-}
-
-.aksel-data-toolbar__toggle-button {
-  &[aria-pressed="true"] {
-    --__axc-button-border-width: 0px; /* ??? */
-
-    color: var(--ax-text-contrast);
-    background-color: var(--ax-bg-strong-pressed);
-  }
 }

@navikt/core/css/src/date.css

@@ -4,11 +4,11 @@
   padding: var(--ax-space-16);
 
   .rdp-table {
-    border-collapse: separate; /* Some CSS-resets sets border-collapse:collapse on tables */
+    border-collapse: collapse;
   }
 
   .rdp-cell {
-    padding: 1px; /* Some CSS-resets sets padding:0 on all items */
+    padding: 0;
 
     &[data-outside="true"] {
       width: var(--__axc-date-button-size);
@@ -23,18 +23,22 @@
   }
 
   .rdp-day_range_middle {
-    &.rdp-day_disabled {
+    &.rdp-day_disabled .rdp-day__inner {
       color: var(--ax-text-neutral);
       background: var(--ax-bg-neutral-moderateA);
     }
 
-    &.rdp-day_selected {
+    &.rdp-day_selected .rdp-day__inner {
       background-color: var(--ax-bg-moderate-pressedA);
       box-shadow: inset 0 0 0 1px var(--ax-border-subtleA);
       color: var(--ax-text-neutral);
     }
   }
 
+  .rdp-button.rdp-day__range-hover-middle .rdp-day__inner {
+    background-color: var(--ax-bg-moderate-hoverA);
+  }
+
   .rdp-month,
   &.rdp-month {
     display: grid;
@@ -52,22 +56,30 @@
 
   .rdp-button {
     all: unset;
-    display: block;
-    width: var(--__axc-date-button-size);
-    height: var(--__axc-date-button-size);
-    text-align: center;
+    padding: var(--ax-space-2);
+    cursor: pointer;
+
+    & .rdp-day__inner {
+      width: var(--__axc-date-button-size);
+      height: var(--__axc-date-button-size);
+    }
+  }
+
+  .rdp-day__inner {
+    display: grid;
+    place-items: center;
     border-radius: var(--ax-radius-8);
   }
 
-  .rdp-day_range_start {
+  .rdp-day_range_start .rdp-day__inner {
     border-radius: 100% var(--ax-radius-12) var(--ax-radius-12) 100%;
   }
 
-  .rdp-day_range_end:not(.rdp-day_range_start) {
+  .rdp-day_range_end:not(.rdp-day_range_start) .rdp-day__inner {
     border-radius: var(--ax-radius-8) 100% 100% var(--ax-radius-8);
   }
 
-  .rdp-day_range_start.rdp-day_range_end {
+  .rdp-day_range_start.rdp-day_range_end .rdp-day__inner {
     border-radius: var(--ax-radius-8);
   }
 
@@ -78,24 +90,23 @@
     position: relative;
   }
 
-  .rdp-day_selected,
-  .aksel-monthpicker__month--selected {
+  .rdp-day_selected .rdp-day__inner {
     color: var(--ax-text-contrast);
     background: var(--ax-bg-strong-pressed);
-    cursor: pointer;
   }
 
-  .rdp-day_disabled {
+  .rdp-day_disabled .rdp-day__inner {
     cursor: not-allowed;
-    text-decoration: line-through;
     background-color: var(--ax-bg-neutral-moderateA);
     color: var(--ax-text-neutral-subtle);
+    opacity: var(--ax-opacity-disabled);
   }
 
   .rdp-button:where(:not(.rdp-day_selected, [disabled])):hover,
   .aksel-date__month-button:where(:not(.rdp-day_selected, [disabled])):hover {
-    background: var(--ax-bg-moderate-hoverA);
-    cursor: pointer;
+    .rdp-day__inner {
+      background: var(--ax-bg-moderate-hoverA);
+    }
   }
 
   .rdp-day_today {
@@ -154,7 +165,7 @@
   justify-content: space-between;
   align-items: center;
   gap: var(--ax-space-4);
-  padding-inline: var(--ax-space-4);
+  padding-inline: var(--ax-space-2);
 }
 
 .aksel-date__caption-button {
@@ -167,15 +178,17 @@
   text-transform: capitalize;
 }
 
-/* Monthpicker */
+/* MonthPicker */
 .aksel-date__month-button {
   all: unset;
-  text-align: center;
-  width: 3rem;
-  height: 3rem;
-  text-transform: capitalize;
-  border-radius: var(--ax-radius-8);
+  padding: var(--ax-space-2);
   cursor: pointer;
+
+  & .rdp-day__inner {
+    width: 3rem;
+    height: 3rem;
+    text-transform: capitalize;
+  }
 }
 
 .aksel-date__year-label {
@@ -190,12 +203,12 @@
 
   .rdp-cell > button.rdp-day,
   button.aksel-date__month-button {
-    &:focus-visible {
+    &:focus-visible .rdp-day__inner {
       outline: 3px solid var(--ax-border-focus);
       outline-offset: 3px;
     }
 
-    &:active:not(:disabled) {
+    &:active:not(:disabled) .rdp-day__inner {
       color: var(--ax-text-contrast);
       background-color: var(--ax-bg-strong-pressed);
     }
@@ -203,35 +216,41 @@
 }
 
 .aksel-date__field-input {
-  &.aksel-text-field__input {
-    padding-right: var(--ax-space-48);
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-right: none;
+
+  &:focus-visible {
+    outline: none;
   }
 
-  .aksel-form-field--small & {
-    padding-right: var(--ax-space-32);
+  .aksel-date__field--error &:not(:disabled) {
+    box-shadow:
+      inset -2px 0 0 0 var(--ax-border-danger-strong),
+      inset 0 0 0 1px var(--ax-border-danger-strong);
   }
 }
 
 .aksel-date__field-button {
-  position: absolute;
-  right: 0.0625rem;
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--ax-text-neutral);
-  display: inline-flex;
-  cursor: pointer;
-  margin: 0;
-  text-decoration: none;
-  border: none;
-  background: none;
-  border-radius: calc(var(--ax-radius-8) - 1px);
-  padding: var(--ax-space-12);
-  align-items: center;
-  justify-content: center;
-  font-size: 1.5rem;
-  height: calc(100% - 0.125rem);
+  --__axc-button-border-width: 1px;
+  --__axc-button-border-color: var(--ax-border-neutral);
+
   border-start-start-radius: 0;
   border-end-start-radius: 0;
+  position: relative;
+
+  &:focus-visible {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+  }
+
+  .aksel-date__field:not(.aksel-date__field--readonly):has(.aksel-date__field-input:not(:disabled)) &:hover,
+  .aksel-date__field:not(.aksel-date__field--readonly, .aksel-date__field--error):has(
+      .aksel-date__field-input:is(:focus-visible, :hover):not(:disabled)
+    )
+    & {
+    --__axc-button-border-color: var(--ax-border-strong);
+  }
 
   .aksel-form-field--small & {
     padding: var(--ax-space-4);
@@ -244,19 +263,37 @@
 
   /* Readonly */
   .aksel-date__field--readonly & {
+    --__axc-button-border-color: var(--ax-border-neutral-subtleA);
+
     cursor: default;
+    opacity: 1;
+    background-color: var(--ax-bg-neutral-moderate);
+    color: var(--ax-text-neutral-subtle);
   }
 
-  &:focus-visible {
-    outline-color: var(--ax-border-focus);
+  /* Syncs button-bg with input while respecting hover/active states */
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background-color: var(--ax-bg-input);
+    z-index: -1;
   }
 }
 
 .aksel-date__field-wrapper {
   display: inline-flex;
-  align-items: center;
-  position: relative;
   width: fit-content;
+  border-radius: var(--ax-radius-8);
+
+  /* Initializes stacking context to allow z-index: -1 on button to work. */
+  z-index: 0;
+
+  &:has(.aksel-date__field-input:focus-visible) {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+  }
 }
 
 .aksel-date__week-row {

@navikt/core/css/src/dialog.css

@@ -96,7 +96,7 @@
       transform: translateY(calc(1rem * var(--__axc-nested-level) * -1)) scale(calc(1 - 0.02 * var(--__axc-nested-level)));
     }
 
-    @media (max-width: 768px) or (max-height: 479px) {
+    @media (max-width: 480px) or (max-height: 479px) {
       --__axc-dialog-transform: translateY(35%);
 
       max-height: calc(100dvh - max(16px, 10dvh));

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

@@ -18,7 +18,8 @@
 }
 
 /* Applied when hideLegend is applied to fieldset */
-.aksel-fieldset > .aksel-sr-only + :not(:first-child, :empty) {
+.aksel-fieldset > .aksel-sr-only + :not(:first-child, :empty),
+.aksel-fieldset > .aksel-typo--visually-hidden + :not(:first-child, :empty) {
   margin-top: 0;
 }