Lerna versionbump [ci skip]

- @navikt/ds-react@0.11.3
 - @navikt/ds-react-internal@0.6.3

.github/workflows/build-publish.yml

@@ -8,9 +8,10 @@ on:
     branches: [master]
   pull_request:
     branches: [master]
+  workflow_dispatch:
 
 jobs:
-  build:
+  test-build:
     if: "!contains(github.event.head_commit.message, '[ci skip]')"
     runs-on: ubuntu-latest
     steps:
@@ -26,14 +27,23 @@ jobs:
         with:
           path: "**/node_modules"
           key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
-      - name: Install deps
+      - name: install
         if: steps.node-cache.outputs.cache-hit != 'true'
-        run: yarn install --frozen-lockfile
-      - name: Gulp-build
+        run: yarn install
+      - name: postinstall
+        if: steps.node-cache.outputs.cache-hit == 'true'
+        run: yarn postinstall
+      - name: Boot
         run: yarn boot
       - name: Eslint and Stylelint
         run: yarn lint
-      - name: Test gatsby-build
+      - name: Test
+        run: yarn test
+      - name: add access token to .env
+        run: echo "ACCESS_TOKEN=${{ secrets.VERKTOYKASSE_INNHOLD_TOKEN }}" >> website/.env
+      - name: add branch token to .env
+        run: echo "BRANCH=HEAD" >> website/.env
+      - name: Test gatsby-build (design.nav.no)
         run: yarn build:gatsby
       - name: Test chromatic
         uses: chromaui/action@v1
@@ -43,17 +53,19 @@ jobs:
           exitZeroOnChanges: true
 
   publish-npm:
-    needs: build
+    needs: test-build
     runs-on: ubuntu-latest
-    if: github.event_name == 'push'
+    env:
+      NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTOMATION }}
+    if: github.event_name == 'push' && contains(github.event.head_commit.message, '[fix]') || contains(github.event.head_commit.message, '[feature]') || contains(github.event.head_commit.message, '[breaking]')
     steps:
       - uses: actions/checkout@v2
         with:
           fetch-depth: "0"
           token: ${{secrets.GIT_REPO}}
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v2
         with:
-          registry-url: http://registry.npmjs.org
+          registry-url: https://registry.npmjs.org
           node-version: 14
       - name: Node-modules cache
         uses: actions/cache@v2
@@ -61,23 +73,45 @@ jobs:
         with:
           path: "**/node_modules"
           key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
-      - name: Install deps
+      - name: install
         if: steps.node-cache.outputs.cache-hit != 'true'
         run: yarn install --frozen-lockfile
-      - name: Gulp-build
+      - name: Boot
         run: yarn boot
-      - run: git config --global user.email "github-actions[bot]@users.noreply.github.com"
-      - run: git config --global user.name "github-actions[bot]"
-      - run: git remote set-url origin https://github-actions[bot]:$NAV_DS_TOKEN@github.com/$GITHUB_REPOSITORY.git
+      - name: Setup github connection for auth
+        run: |
+          git config --global user.email "github-actions[bot]@users.noreply.github.com"
+          git config --global user.name "github-actions[bot]"
+          git remote set-url origin https://github-actions[bot]:$NAV_DS_TOKEN@github.com/$GITHUB_REPOSITORY.git
         env:
           NAV_DS_TOKEN: ${{secrets.GIT_REPO}}
-      - run: yarn lerna version patch --include-merged-tags --yes
-      - run: yarn lerna publish from-package --yes
+
+      - name: Update changed packages with PATCH
+        if: "contains(github.event.head_commit.message, '[fix]')"
+        run: yarn lerna version patch --include-merged-tags --yes
+      - name: Update changed packages with MINOR
+        if: "contains(github.event.head_commit.message, '[feature]')"
+        run: yarn lerna version minor --include-merged-tags --yes
+      - name: Update changed packages with MAJOR
+        if: "contains(github.event.head_commit.message, '[breaking]')"
+        run: yarn lerna version major --include-merged-tags --yes
+      - name: Publish to NPM registry
+        run: yarn lerna publish --no-verify-access from-package --yes
+
+      - name: Create a .npmrc file for the github package repository
+        uses: FerLuisxd/create-npmrc@3
+        with:
+          org_name: navikt
         env:
-          NODE_AUTH_TOKEN: ${{secrets.NPM_AUTOMATION}}
+          AUTH_TOKEN: ${{secrets.GIT_REPO}}
+      - name: Publish to Github registry
+        run: |
+          rm lerna.json && cp utilities/lerna.json lerna.json
+          git add . && git commit -m "tmp"
+          yarn lerna publish --registry https://npm.pkg.github.com from-package --yes
 
   publish-pages:
-    needs: publish-npm
+    needs: test-build
     runs-on: ubuntu-latest
     if: github.event_name == 'push'
     steps:
@@ -96,9 +130,13 @@ jobs:
           key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
       - name: Install deps
         if: steps.node-cache.outputs.cache-hit != 'true'
-        run: yarn install --frozen-lockfile
+        run: yarn install
       - name: Gulp-build
         run: yarn boot
+      - name: add access token to .env
+        run: echo "ACCESS_TOKEN=${{ secrets.VERKTOYKASSE_INNHOLD_TOKEN }}" >> website/.env
+      - name: add branch token to .env
+        run: echo "BRANCH=HEAD" >> website/.env
       - name: Building Gatsby
         run: yarn build:gatsby
       - name: Building Storybook
@@ -113,7 +151,7 @@ jobs:
         env:
           NAV_DS_TOKEN: ${{secrets.GIT_REPO}}
 
-      - name: Deploy storybook
+      - name: Deploy storybook to designsystem-repo
         uses: peaceiris/actions-gh-pages@v3
         with:
           personal_token: ${{secrets.GIT_REPO}}

.github/workflows/publish_storybook.yml

@@ -0,0 +1,39 @@
+# This workflow will run will build the component library and the storybook, then publish it to https://navikt.github.io/Designsystemet
+
+name: Publish Storybook
+
+on:
+ workflow_dispatch
+
+jobs:
+  publish-storybook:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: "0"
+          token: ${{secrets.GIT_REPO}}
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+      - name: Node-modules cache
+        uses: actions/cache@v2
+        id: node-cache
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+      - name: Install deps
+        if: steps.node-cache.outputs.cache-hit != 'true'
+        run: yarn install --frozen-lockfile
+      - name: Gulp-build
+        run: yarn boot
+      - name: Building Storybook
+        run: yarn build-storybook
+      - name: Deploy storybook
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          personal_token: ${{secrets.GIT_REPO}}
+          external_repository: navikt/designsystemet
+          publish_dir: ./storybook-static
+          user_name: "github-actions[bot]"
+          user_email: "github-actions[bot]@users.noreply.github.com"

.github/workflows/vk-innhold-dev.yml

@@ -0,0 +1,47 @@
+name: Publish verktøykasse-innhold to dev
+
+on:
+  push:
+    branches: verktoykasse-prototype
+  repository_dispatch:
+    types: [new-content]
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          ref: verktoykasse-prototype
+          fetch-depth: 0 # Required to retrieve git history
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+      - name: Node-modules cache
+        uses: actions/cache@v2
+        id: node-cache
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+      - name: Install deps
+        if: steps.node-cache.outputs.cache-hit != 'true'
+        run: yarn install
+      - name: Gulp-build
+        run: yarn boot
+      - name: Eslint and Stylelint
+        run: yarn lint
+      - name: add access token to .env
+        run: echo "ACCESS_TOKEN=${{ secrets.VERKTOYKASSE_INNHOLD_TOKEN }}" >> website/.env
+      - name: add branch token to .env
+        run: echo "BRANCH=dev" >> website/.env
+      - name: Gatsby-build
+        run: yarn build:gatsby
+      - name: Deploy to dev gh-pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          personal_token: ${{secrets.GIT_REPO}}
+          external_repository: navikt/verktoykasse-innhold
+          publish_dir: website/public
+          user_name: "github-actions[bot]"
+          user_email: "github-actions[bot]@users.noreply.github.com"

.gitignore

@@ -41,6 +41,7 @@ typings/
 
 # Optional npm cache directory
 .npm
+.npmrc
 
 # Optional eslint cache
 .eslintcache
@@ -99,7 +100,6 @@ examples/webpack/out
 
 *.d.ts
 *-exports.less
-**/css/
 */figma-api/icons
 */ds-icons/png
 packages/**/css
@@ -107,8 +107,8 @@ utilities/**/css
 
 */static/*.zip
 */static/png
-@navikt/ds-icons/NAV-ikonpakke-png.zip
-@navikt/ds-icons/NAV-ikonpakke-svg.zip
+@navikt/core/icons/NAV-ikonpakke-png.zip
+@navikt/core/icons/NAV-ikonpakke-svg.zip
 */**/NAV-ikonpakke-png.zip
 */**/NAV-ikonpakke-svg.zip
 

.storybook/main.js

@@ -10,7 +10,6 @@ module.exports = {
     "../@navikt/**/*.stories.@(js|jsx|ts|tsx|mdx)",
   ],
   addons: [
-    "@storybook/addon-links",
     "@storybook/addon-docs",
     {
       name: "@storybook/addon-storysource",
@@ -27,6 +26,5 @@ module.exports = {
         controls: { hideNoControlsWarning: true },
       },
     },
-    "@whitespace/storybook-addon-html",
   ],
 };

.storybook/preview-body.html

@@ -1,6 +0,0 @@
-<div id="decorator-wrapper">
-  <div id="decorator-header" style="display: none"></div>
-  <div id="root"></div>
-  <div id="docs-root"></div>
-  <div id="decorator-footer" style="display: none"></div>
-</div>

.storybook/preview-head.html

@@ -1,18 +0,0 @@
-<!-- prettier-ignore -->
-<div data-src='https://www.nav.no/dekoratoren/env?availableLanguages=[{"locale":"nb","url":"http://localhost:8088/dekoratoren/","handleInApp":true},{"locale":"en","url":"http://localhost:8088/dekoratoren/en/","handleInApp":true}]&breadcrumbs=[{"url":"https://www.nav.no/person/dittnav","title":"ditt%20nav"},%20{"url":"https://www.nav.no/person/kontakt-oss/nb/","title":"kontakt%20oss"}]' id="decorator-env"></div>
-<link href="https://www.nav.no/dekoratoren/css/client.css" rel="stylesheet" />
-<script async src="https://www.nav.no/dekoratoren/client.js"></script>
-<style>
-  html,
-  body,
-  #decorator-wrapper {
-    min-height: 100vh;
-  }
-  #decorator-wrapper {
-    display: flex;
-    flex-direction: column;
-  }
-  #decorator-footer {
-    margin-top: auto;
-  }
-</style>

.storybook/preview.js

@@ -1,5 +1,6 @@
 import "nav-frontend-core";
 import "@navikt/ds-css/index.css";
+import "@navikt/ds-css-internal/index.css";
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },

.storybook/stories/introduction.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/addon-docs/blocks";
+import { Meta } from "@storybook/addon-docs";
 
 <Meta title="ds-react/Kom i gang" />
 
@@ -11,7 +11,7 @@ yarn add @navikt/ds-react @navikt/ds-css
 ```
 
 Siden stilene ikke importeres direkte i komponentene, så må man selv importere ds-css.
-Dette gjøres for å la komponetene brukes i Nextjs prosjekter.
+For å legge til all stylingen som trengs må man da bare importere `ds-css`.
 
 ```bash
 import "@navikt/ds-css"
@@ -19,15 +19,4 @@ import "@navikt/ds-css"
 
 Dette vil også legge css-variabler på :root. For å få dette til å fungere med IE11, kan denne pakken tas i bruk: https://jhildenbiddle.github.io/css-vars-ponyfill/#/
 
-## Testing
-
-For å støtte testing med eks Jest som ikke tillater ESM moduler, så kan denne configen legges til
-
-```bash
-"moduleNameMapper": {
-  "@navikt/ds-react(.*)": "@navikt/ds-react/cjs$1",
-  "@navikt/ds-icons(.*)": "@navikt/ds-icons/cjs$1"
-}
-```
-
-Dette vil remappe komponentene (og ikonpakken) til å bruke CommonJs versjonen for testing
+Note: Disse komponentene kan ikke garanteres at fungerer som forventet i IE11 da vi har valgt og ikke unngå styling-valg basert på IE11 støtte eller ikke.

.storybook/stories/migration.stories.mdx

@@ -0,0 +1,255 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="ds-react/Migration" />
+
+# Migreringsguider
+
+## Migrering til ds-react v0.11, ds-css v0.10
+
+### ErrorSummary
+
+- ErrorSummaryItem -> ErrorSummary.Item
+  Må da slette import "ErrorSummaryItem" da denne ikke er eksponert alene lengre
+
+### SearchField
+
+- SearchFieldButton -> SearchField.Button
+- SearchFieldClearButton -> SearchField.Clear
+- SearchFieldInput -> SearchField.Input
+
+SearchFieldButton, SearchFieldClearButton og SearchFieldInput må da slettes fra imports da de ikke er eksponert lengre.
+
+### CopyToClipBoard
+
+Komponenten er flyttet til pakkene "@navikt/ds-react-internal" og "@navikt/ds-css-internal". API er ikke endret
+så fikses med
+
+```bash
+yarn install @navikt/ds-react-internal @navikt/ds-css-internal
+```
+
+## Migrering til ds-react, ds-css v0.8.0
+
+Denne guiden vil være til hjelp for de som allerede har begynt å ta i bruk de nye pakkene våre tidligere enn v0.8.0.
+For de som ikke har begynt å ta i bruk pakkene kan man se bort fra denne.
+
+Fra versjon v0.7 til v0.8 er det komment flere store endringer både i ds-react og ds-css. For å lettere
+oppdatere til v0.8 har vi da laget en liten guide som forklarer de største endringene.
+
+## Styling
+
+De fleste komponenter har fått diverse justering på styling. Anbefales da å ta en rask sjekk om alt fortsatt stemmer
+etter oppdateringen.
+
+## Sizing
+
+Alle komponenter som tidligere var implementert med `size`-prop har fått oppdatert
+props fra "xs", "s", "m", "l", "xl", "2xl" -> "xsmall", "small", "medium", "large", "xlarge", "2xlarge".
+
+Dette betyr også at css-stylingen er eks endret fra `.navds-body-short--s` -> `.navds-body-short--small`
+
+## Overridable component
+
+Komponenter som tidligere implementerte ovveridable component med bruk av `component`-prop bruker nå `as`.
+Implementasjonen av OverridableComponent er WIP så kan hende typene ender opp med å krangle i enkelte tilfeller. Om så ta gjerne kontakt med oss
+slik at vi får sett på det tilfellet!
+
+```jsx
+/* Før */
+<BodyShort component="span" />
+
+/* Etter */
+<BodyShort as="span" />
+```
+
+## Navneendringer
+
+### Buttons
+
+- `Primary` -> `Secondary` (Normal)
+- `Action` -> `Primary` (Hoved)
+- `Secondary` -> `Tertiary` (Flat)
+
+For alle som har brukt `<Button />` så må man fikse slik at riktige knapper blir brukt der de skal!
+
+## Nytt
+
+- GuidePanel (veilederpanel)
+- HelpText (Hjeleptext)
+
+### Typography
+
+Vi har valgt å endre fra `<Title/>` -> `<Heading/>` i typografien vår da dette ga mer mening i bruk.
+APIet til komponenten er ikke endret borsett fra "Sizing" endringene nevt lengre opp, så skal bare være en rask search/replace.
+
+For de som har brukt css-en direkte, eks `navds-title` så må man endre til `navds-heading`
+
+Endret `Header` -> `PageHeader`, samme som er nevnt ang endringen over gjelder her også: sjekk css hvis brukt direkte.
+
+## Fjernet komponenter
+
+Fjernet da den var utdaterte/må ses mer på
+
+- ProductPageLayout
+
+## Typography
+
+Linjehøyder for alle typo-komponentene er oppdatert til å matche figma.
+
+Lagt til en Heading lvl 6 og size="xsmall"
+
+## AccordionMenu
+
+Implementert med dot-notation
+
+- Trenger bare importere AccordionMenu
+- AccordionMenuCollapsable -> AccordionMenu.Collapsable
+- AccordionMenuItem -> AccordionMenu.Item
+
+## Accordion
+
+Implementert med dot-notation
+
+- Trenger bare importere Accordion nå
+
+Fragmenterte komponenten:
+
+- Accordion -> Accordion.Item
+- Header -> Accordion.Header
+- children -> Accordion.Content
+
+La til prop: `defaultOpen` på `Accordion.Item`
+
+```jsx
+/* Før */
+<Accordion heading="tittel" open={open} onClick={(open) => setOpen(!open)}>
+  Eu magna fugiat officia
+</Accordion>
+<Accordion heading="tittel2" open={open2} onClick={(open2) => setOpen(!open2)}>
+  Eu magna fugiat officia
+</Accordion>
+
+/* Etter */
+<Accordion>
+  <Accordion.Item open={open}>
+    <Accordion.Header onClick={(open) => setOpen(!open)}>
+      Accordion header text
+    </Accordion.Header>
+    <Accordion.Content>
+      Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam officia
+      laboris voluptate officia pariatur.Lorem est ex anim velit
+    </Accordion.Content>
+  </Accordion.Item>
+  <Accordion.Item open={open2}>
+    <Accordion.Header onClick={(open2) => setOpen(!open2)}>
+      Accordion header text
+    </Accordion.Header>
+    <Accordion.Content>
+      Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam officia
+      laboris voluptate officia pariatur.Lorem est ex anim velit
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion>
+```
+
+## Alert
+
+- La til `fullWidth`-prop for alert uten border-radius og width 100%
+- La til `inline`-prop for alert med transparent border/background og 0 padding.
+
+## Button
+
+Oppdatert med Overridablecomponent.
+
+Håndtering av sentrering, margins er oppdatert. Trenger ikke wrappe tekst med `span` når man skal bruke ikoner lengre.
+
+Hvis man skal manuelt justere på alignment av innhold, eks bruke `flex-direction: column` må man sette
+det på css-klassen `.navds-button__inner` da children er wrappet i den.
+
+## CopyToClipboard
+
+Ekstender nå ButtonProps, slik at man eks kan ta i bruk `size`-proppen
+
+`text`-prop -> `copyText`
+`label`-prop -> `popoverText`
+
+Fjernet `icon`-prop, la til `popoverPlacement`
+
+## Modal
+
+Implementert med dot-notasjon
+
+Innholds-padding er flyttet fra Modal -> Modal.Content
+
+```
+/* Før */
+<Modal>Modal innhold</Modal>
+
+/* Etter */
+<Modal><Modal.Content>Modal innhold</Modal.Content></Modal>
+```
+
+## LinkPanel
+
+Implementert med dot-notasjon
+
+```jsx
+/* Før */
+<LinkPanel href="#">Consectetur eu duis aliqua eu irure fugiat fugiat eu.</LinkPanel>
+
+/* Etter */
+<LinkPanel href="#">
+  <LinkPanel.Title>
+    Consectetur eu duis aliqua eu irure fugiat fugiat eu.
+  </LinkPanel.Title>
+</LinkPanel>
+```
+
+Kan nå legge til en beskrivelse med `Linkpanel.Description`
+
+```jsx
+<LinkPanel href="#">
+  <LinkPanel.Title>
+    Consectetur eu duis aliqua eu irure fugiat fugiat eu.
+  </LinkPanel.Title>
+  <LinkPanel.Description>Aliqua id aliquip Lorem esse</LinkPanel.Description>
+</LinkPanel>
+```
+
+## Popover
+
+Implementert med dot-notasjon
+
+Får nå padding rundt innhold med Popover.Content
+
+```jsx
+
+/* Før */
+
+<Popover>Popover innhold</Popover>
+
+/* Etter */
+
+<Popover>
+  <Popover.Content>Modal innhold</Popover.Content>
+</Popover>
+```
+
+## Header -> PageHeader
+
+Props må fikses for de som har brukt denne komponenten, i tilleg til å endre navn.
+
+- `variant`-prop -> `align`
+- `theme`-prop -> `variant`
+
+## MicroCard
+
+- Oppdatert med OverridableComponent
+
+## SpeechBubble
+
+Implementert med Dot-notasjon
+
+- `<Bubble/>` -> `<SpeechBubble.Bubble/>`
+
+Bubble er fortsatt eksportert så vil ikke brekke noe for de som har begynt å ta denne i bruk.

.storybook/stories/roadmap-table.tsx

@@ -0,0 +1,269 @@
+import { Table as DsTable } from "@navikt/ds-react";
+import {
+  SuccessFilled as SuccessIcon,
+  ErrorFilled as ErrorIcon,
+} from "@navikt/ds-icons";
+import styled from "styled-components";
+
+const Success = styled(SuccessIcon)`
+  color: var(--navds-color-green-50);
+`;
+
+const Error = styled(ErrorIcon)`
+  color: var(--navds-color-red-50);
+`;
+
+const Table = styled(DsTable)`
+  .navds-table__cell > svg,
+  .navds-table__cell > span {
+    vertical-align: middle;
+    margin-left: 50%;
+    transform: translateX(-50%);
+  }
+`;
+
+type CompT = {
+  name: string;
+  status: Partial<[boolean, boolean, boolean]>;
+  desc?: React.ReactNode;
+};
+
+const Components: CompT[] = [
+  {
+    name: "Alertstriper",
+    status: [true, true, true],
+    desc: "Navn: Alert",
+  },
+  { name: "Chevron", status: [false], desc: "" },
+  {
+    name: "Core",
+    status: [true, true, false],
+    desc: <code>@navikt/ds-css</code>,
+  },
+  {
+    name: "Ekspanderbartpanel",
+    status: [true, true, true],
+    desc: "Navn: Accordion, styling ikke oppdatert til nyeste versjon",
+  },
+  { name: "Etiketter", status: [true, true, false], desc: "Navn: Tag" },
+  {
+    name: "Fullbreddeknapp-style",
+    status: [false],
+    desc: "",
+  },
+  { name: "Grid", status: [true, true, false], desc: "Navn: Grid" },
+  { name: "Hjelpetekst", status: [true, true, true], desc: "Navn: HelpText" },
+  {
+    name: "Ikoner-assets",
+    status: [true, true, true],
+    desc: <code>@navikt/ds-icons</code>,
+  },
+  {
+    name: "js-utils",
+    status: [true, true, false],
+    desc:
+      "Diverse util-funksjoner blir eksponert gjennom ds-react, men tar for det meste i bruk npm pakker",
+  },
+  { name: "Knapper", status: [true, true, true], desc: "Navn: Button" },
+  { name: "Lenkepanel", status: [true, true, true], desc: "Navn: LinkPanel" },
+  { name: "Lenker", status: [true, true, true], desc: "Navn: Link" },
+  { name: "Lesmerpanel", status: [false], desc: "" },
+  { name: "Lukknapp", status: [false], desc: `Bruk Button med "Close"-ikon` },
+  { name: "Modal", status: [true, true, true], desc: "Navn: Modal" },
+  { name: "Paneler", status: [true, true, true], desc: "Navn: Panel" },
+  {
+    name: "Bekrefcheckbokspanel",
+    status: [true, true, true],
+    desc: "Navn: ConfirmationPanel",
+  },
+  {
+    name: "Checkbokspanel-gruppe",
+    status: [false],
+    desc: "Panel-versjon vil ikke tas videre i nytt system",
+  },
+  {
+    name: "Checkbokspanel",
+    status: [false],
+    desc: "Panel-versjon vil ikke tas videre i nytt system",
+  },
+  {
+    name: "Checkbox-gruppe",
+    status: [true, true, true],
+    desc: "Navn: CheckboxGroup",
+  },
+  { name: "Checkbox", status: [true, true, true], desc: "Navn: Checkbox" },
+  {
+    name: "Feiloppsummering",
+    status: [true, true, false],
+    desc: "Navn: ErrorSummary, API vil bli endret for denne",
+  },
+  {
+    name: "Fnr-input",
+    status: [false],
+    desc:
+      "Skjema-elementer med validering vil ikke bli lagt til med det første, men vil diskuteres i fremtiden",
+  },
+  { name: "Input", status: [true, true, true], desc: "Navn: TextField" },
+  {
+    name: "Label",
+    status: [false],
+    desc: "Skjema-elementer fikser dette selv",
+  },
+  { name: "Radio-Gruppe", status: [true, true, true], desc: "RadioGroup" },
+  { name: "Radio", status: [true, true, true], desc: "Navn: Radio" },
+  {
+    name: "Radiopanel-gruppe",
+    status: [false],
+    desc: "Panel-versjon vil ikke tas videre i nytt system",
+  },
+  {
+    name: "Radio-panel",
+    status: [false],
+    desc: "Panel-versjon vil ikke tas videre i nytt system",
+  },
+  { name: "Select", status: [true, true, true], desc: "Navn: Select" },
+  { name: "Skjema-gruppe", status: [true, true, true], desc: "Navn: Fieldset" },
+  {
+    name: "Skjemaelement-feilemelding",
+    status: [false],
+    desc: "",
+  },
+  { name: "Textarea", status: [true, true, true], desc: "Navn: Textarea" },
+  { name: "Togglegruppe", status: [true, false, false], desc: "" },
+  { name: "ToggleKnapp", status: [true, false, false], desc: "" },
+  {
+    name: "Toggle",
+    status: [true, false, false],
+    desc: "Vil bli samme komponent som ToggleKnapp",
+  },
+  { name: "Popover", status: [true, true, true], desc: "Navn: Popover" },
+  { name: "Snakkeboble", status: [true, true, true], desc: "SpeechBubble" },
+  { name: "Spinner", status: [true, true, true], desc: "Navn: Loader" },
+  { name: "Stegindikator", status: [true, false, false], desc: "" },
+  {
+    name: "Tabell-style",
+    status: [true, true, false],
+    desc: "Navn: Table, Er nå publisert som React-component",
+  },
+  { name: "Tabs", status: [true, false, false], desc: "" },
+  { name: "Tekstomrade", status: [false], desc: "" },
+  {
+    name: "Typografi",
+    status: [true, true, true],
+    desc: "Navn: se typography-mappen i storybook",
+  },
+  { name: "veileder", status: [false], desc: "" },
+  {
+    name: "Veilederpanel",
+    status: [true, true, true],
+    desc: "Navn: GuidePanel",
+  },
+];
+
+const NewComps: CompT[] = [
+  {
+    name: "AccordionMenu",
+    status: [true, true, true],
+    desc: "",
+  },
+  {
+    name: "SearcField",
+    status: [true, true, false],
+    desc: "Denne vil undergå større endringer",
+  },
+  {
+    name: "MicroCard",
+    status: [true, true, false],
+    desc: "Vil flyttes over i egen navno pakke for eksterne sider",
+  },
+  {
+    name: "PageHeader",
+    status: [true, true, false],
+    desc: "Vil flyttes over i egen navno pakke for eksterne sider",
+  },
+  {
+    name: "CopyToClipboard",
+    status: [true, true, false],
+    desc: "Vil flyttes over til @navikt/ds-react-internal pakke",
+  },
+  {
+    name: "Table",
+    status: [true, true, false],
+    desc:
+      "Implementer stylingen til nav-frontend-table-styles, API vil videreutvikles",
+  },
+  {
+    name: "Switch",
+    status: [true, false, false],
+    desc: "",
+  },
+  {
+    name: "Tooltip",
+    status: [true, false, false],
+    desc: "",
+  },
+  {
+    name: "Timeline",
+    status: [true, false, false],
+    desc: "",
+  },
+];
+
+const CompTable = ({ list }) => (
+  <Table>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>Komponent</Table.HeaderCell>
+        <Table.HeaderCell>Med i nytt system</Table.HeaderCell>
+        <Table.HeaderCell>Publisert i pakker</Table.HeaderCell>
+        <Table.HeaderCell>Fullført**</Table.HeaderCell>
+        <Table.HeaderCell>Info</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
+    <Table.Body>
+      {list.map((comp) => {
+        return (
+          <Table.Row>
+            <Table.HeaderCell>{comp.name}</Table.HeaderCell>
+            <Table.DataCell>
+              {comp.status?.[0] === undefined ? (
+                <span>-</span>
+              ) : comp.status?.[0] ? (
+                <Success />
+              ) : (
+                <Error />
+              )}
+            </Table.DataCell>
+            <Table.DataCell>
+              {comp.status?.[1] === undefined ? (
+                <span>-</span>
+              ) : comp.status?.[1] ? (
+                <Success />
+              ) : (
+                <Error />
+              )}
+            </Table.DataCell>
+            <Table.DataCell>
+              {comp.status?.[2] === undefined ? (
+                <span>-</span>
+              ) : comp.status?.[1] ? (
+                <Success />
+              ) : (
+                <Error />
+              )}
+            </Table.DataCell>
+            <Table.DataCell>{comp.desc ? comp.desc : "-"}</Table.DataCell>
+          </Table.Row>
+        );
+      })}
+    </Table.Body>
+  </Table>
+);
+
+export const NewCompTable = () => {
+  return <CompTable list={NewComps} />;
+};
+
+export const OldCompTable = () => {
+  return <CompTable list={Components} />;
+};

.storybook/stories/roadmap.stories.mdx

@@ -0,0 +1,64 @@
+import { Meta } from "@storybook/addon-docs";
+import { NewCompTable, OldCompTable } from "./roadmap-table.tsx";
+
+<Meta title="ds-react/Roadmap" />
+
+# Roadmap
+
+## Komponenter
+
+\*\* Fullført betyr i denne konteksten at vi føler API-et er ok og da kan forvente mindre breaking changes.
+Komponenten kan fortsatt bli utsatt for endringer i selve designet.
+
+### Nye komponenter / wip
+
+<NewCompTable />
+
+### Migrering av gamle komponenter
+
+<OldCompTable />
+
+## Plan videre
+
+Vi jobber kontinuerlig med å finne bedre løsninger for å kunne bygge systemet opp fra bunnen av. Dette innegår da
+ny dokumentasjon-side under Verktøykassen, nye byggeblokker helt fra token-nivå og bedre sizing for eksterne/interne sider.
+Dette vil la oss bygge mer robuste og fleksible løsninger for fremtiden som skal være bedre tilpasset produktene våre.
+
+(Rekkefølgen representer ikke faktisk tidslinje)
+
+## Tokens
+
+Vi bygger opp `@navikt/ds-tokens` pakken som inneholder alle design-tokensene til designsystemet fra bunnen av.
+Dette vil gjøre styling og overriding av komponenter enklere da man kan bruke css-variabler.
+
+## Intern / Ekstern sizing
+
+Komponenter tilpasses og standariseres bedre for skillet mellom interne/eksterne flater.
+Eksempel på dette er `size="small" -> 32px, size="medium"-> 48px`.
+
+## Ny dokumentasjon-side
+
+Vi bygger en ny side for å dokumentere systemet, og mer rundt utvikling/design i NAV med "Verktøykassen"
+
+## Migrere komponenter/styling fra nav-frontend-\* -> `@navikt/ds-css / @navikt/ds-react`
+
+Dette arbeidet kommer sakte men sikkert på plass, men tar litt tid da mye må på plass først, da eksempelvis sizing og tokens.
+Noen komponenter vil ha oppdatert funksjonalitet, noen bare stilendringer, mens noen kan nesten brukes 1-1 fra nav-frontend-.
+
+Note: Noen pakker vil ikke flyttes over fra nav-frontend og `deprecates` i praksis da. De pakkene som ikka tas over vil ikke bli deprecated på `npm`, slik at man kan fortsette å ta dem i bruk uten en sint terminal hver gang man kjører `yarn install`.
+
+## Theming
+
+Etterhvert når vi har nye react, css og token pakke på plass har vi et ønske om å kunne se på theming for
+eks darkmode.
+
+## Vue, svelte, web-components etc...
+
+Dette er noe vi ikke har på planene for tiden, men etterhvert som ting faller på plass så vil dette være
+noe vi kunne ta en titt på hvis vi ser at det trengs.
+
+## Versjonering
+
+De nye pakkene under `@navikt`, da `ds-css` og `ds-react` er nå versjonert under to store pakker med alle komponentene. I fremtiden vil vi se på å
+ha både samversjonering (alle pakker under en eks ds-react versjon) og induvduell verjsonering da eks ds-react/button har en egen versjon
+slik at man kan ha mer finkontroll over komponentbruk på siden sin.

.storybook/webpack.config.js

@@ -6,7 +6,7 @@ module.exports = (baseConfig) => {
       test: /\.css$/,
       use: ["style-loader", "css-loader"],
       include: [
-        path.resolve(__dirname, "../node_modules/@navikt/ds-css/index.css"),
+        path.resolve(__dirname, "../node_modules/@navikt/core/css/index.css"),
       ],
     },
     {

@navikt/README.md

@@ -0,0 +1,3 @@
+# Designsystem v2
+
+Storybook: https://navikt.github.io/Designsystemet/

@navikt/core/css/accordion-menu.css

@@ -1,3 +1,11 @@
+:root {
+  --navds-accordion-menu-color-text: var(--navds-color-text-link);
+  --navds-accordion-menu-color-text-focus: var(--navds-color-darkgray);
+  --navds-accordion-menu-color-background-hover: var(--navds-color-blue-10);
+  --navds-accordion-menu-color-text-active: var(--navds-color-text);
+  --navds-accordion-menu-outline-focus: var(--navds-text-focus);
+}
+
 .navds-accordion-menu__list {
   list-style: none;
   margin: 0;
@@ -18,29 +26,22 @@
   justify-content: space-between;
   align-items: center;
   font-weight: var(--navds-font-weight-bold);
-  color: var(--navds-color-text-link);
+  color: var(--navds-accordion-menu-color-text);
   text-decoration: underline;
 }
 
-.navds-accordion-menu-collapsable .navds-accordion-menu__list,
-.navds-accordion-menu-collapsable
-  .navds-accordion-menu-collapsable
-  .navds-accordion-menu-collapsable__button {
-  font-weight: var(--navds-font-weight-regular);
-}
-
 .navds-accordion-menu-item,
 .navds-accordion-menu-collapsable__button {
   display: flex;
-  padding: 0.75rem 1rem;
-  line-height: 1.5rem; /* TODO: fix typography. */
+  padding: var(--navds-spacing-3) var(--navds-spacing-4);
+  text-decoration: none;
 }
 
 .navds-accordion-menu-collapsable__expand-icon {
   font-size: 1.5rem;
-  color: var(--navds-color-text-link);
+  color: var(--navds-accordion-menu-color);
   flex-shrink: 0;
-  margin-left: 0.5rem;
+  margin-left: var(--navds-spacing-2);
 }
 
 .navds-accordion-menu-collapsable--open
@@ -53,7 +54,7 @@
 .navds-accordion-menu-collapsable
   .navds-accordion-menu-collapsable
   .navds-accordion-menu-collapsable__button {
-  padding-left: 2rem;
+  padding-left: var(--navds-spacing-8);
 }
 
 .navds-accordion-menu-collapsable
@@ -63,7 +64,7 @@
   .navds-accordion-menu-collapsable
   .navds-accordion-menu-collapsable
   .navds-accordion-menu-collapsable__button {
-  padding-left: 3rem;
+  padding-left: var(--navds-spacing-12);
 }
 
 .navds-accordion-menu-collapsable
@@ -75,23 +76,28 @@
   .navds-accordion-menu-collapsable
   .navds-accordion-menu-collapsable
   .navds-accordion-menu-collapsable__button {
-  padding-left: 4rem;
+  padding-left: var(--navds-spacing-16);
 }
 
 .navds-accordion-menu-item:focus,
 .navds-accordion-menu-collapsable__button:focus {
-  outline: 3px solid var(--navds-text-focus);
+  outline: 3px solid var(--navds-accordion-menu-outline-focus);
   outline-offset: -3px;
+  color: var(--navds-accordion-menu-color-text-focus);
+}
+
+.navds-accordion-menu-collapsable__button:focus
+  > .navds-accordion-menu-collapsable__expand-icon {
+  color: var(--navds-accordion-menu-color-focus);
 }
 
 .navds-accordion-menu-item:hover,
 .navds-accordion-menu-collapsable__button:hover {
-  background-color: var(--navds-color-gray-20);
+  background-color: var(--navds-accordion-menu-color-background-hover);
 }
 
 .navds-accordion-menu-item--active {
   box-shadow: inset 0.5rem 0 var(--navds-color-text-link);
-  color: var(--navds-color-text);
+  color: var(--navds-accordion-menu-color-text-active);
   text-decoration: none;
-  font-weight: var(--navds-font-weight-bold);
 }

@navikt/core/css/accordion.css

@@ -0,0 +1,70 @@
+:root {
+  --navds-accordion-color-text: var(--navds-color-darkgray);
+  --navds-accordion-color-background: var(--navds-color-background);
+  --navds-accordion-color-text-hover: var(--navds-color-blue-50);
+  --navds-accordion-color-border-hover: var(--navds-color-blue-50);
+  --navds-accordion-color-border-focus: var(--navds-color-background);
+}
+
+.navds-accordion .ReactCollapse--collapse {
+  transition: height 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.navds-accordion {
+  background: var(--navds-accordion-color-background);
+}
+
+.navds-accordion__header:focus {
+  outline: none;
+  box-shadow: var(--navds-shadow-focus);
+  border-color: var(--navds-accordion-color-border-focus);
+}
+
+.navds-accordion__header:hover {
+  color: var(--navds-accordion-color-text-hover);
+  border-color: var(--navds-accordion-color-border-hover);
+  text-decoration: underline;
+}
+
+.navds-accordion__expand-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  flex-shrink: 0;
+}
+
+.navds-accordion__expand-icon--flip {
+  transform: rotateZ(180deg);
+}
+
+.navds-accordion__header {
+  padding: var(--navds-spacing-4) var(--navds-spacing-3);
+  background: transparent;
+  text-align: left;
+  border: none;
+  width: 100%;
+  margin: 0;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 2px solid #a0a0a0;
+  gap: var(--navds-spacing-4);
+}
+
+.navds-accordion__content {
+  color: var(--navds-accordion-color-text);
+  padding: var(--navds-spacing-5) var(--navds-spacing-3) var(--navds-spacing-10);
+}
+
+.navds-accordion__expand-icon--filled {
+  display: none;
+}
+
+.navds-accordion__header:hover
+  > .navds-accordion__expand-icon.navds-accordion__expand-icon--filled {
+  display: inherit;
+}
+
+.navds-accordion__header:hover > .navds-accordion__expand-icon {
+  display: none;
+}

@navikt/core/css/alert.css

@@ -0,0 +1,119 @@
+:root {
+  --navds-alert-color-border: var(--navds-color-gray-40);
+  --navds-alert-color-error-border: var(--navds-color-error-border);
+  --navds-alert-color-error-background: var(--navds-color-error-background);
+  --navds-alert-color-warning-border: var(--navds-color-warning-border);
+  --navds-alert-color-warning-background: var(--navds-color-warning-background);
+  --navds-alert-color-info-border: var(--navds-color-info-border);
+  --navds-alert-color-info-background: var(--navds-color-info-background);
+  --navds-alert-color-success-border: var(--navds-color-success-border);
+  --navds-alert-color-success-background: var(--navds-color-success-background);
+  --navds-alert-color-error-icon: var(--navds-color-red-60);
+  --navds-alert-color-error-icon-background: var(--navds-color-white);
+  --navds-alert-color-warning-icon: var(--navds-color-orange-40);
+  --navds-alert-color-warning-icon-background: var(--navds-color-darkgray);
+  --navds-alert-color-info-icon: var(--navds-color-lightblue-70);
+  --navds-alert-color-info-icon-background: var(--navds-color-white);
+  --navds-alert-color-success-icon: var(--navds-color-green-70);
+  --navds-alert-color-success-icon-background: var(--navds-color-white);
+}
+
+.navds-alert {
+  border-radius: 4px;
+  border: 1px solid;
+  border-color: var(--navds-alert-color-border);
+  padding: calc(var(--navds-spacing-4) + 1px) calc(var(--navds-spacing-4) + 1px);
+  display: flex;
+  gap: var(--navds-spacing-3);
+  align-items: center;
+}
+
+.navds-alert__wrapper {
+  max-width: 43.5rem;
+}
+
+.navds-alert--small {
+  padding: calc(var(--navds-spacing-1) - 1px) var(--navds-spacing-4);
+}
+
+.navds-alert--full-width {
+  border-radius: 0;
+}
+
+.navds-alert > .navds-alert__icon {
+  flex-shrink: 0;
+  font-size: 1.5rem;
+  align-self: flex-start;
+  height: var(--navds-font-line-height-xlarge);
+}
+
+.navds-alert--small > .navds-alert__icon {
+  font-size: 1.25rem;
+  height: var(--navds-font-line-height-large);
+}
+
+.navds-alert--error {
+  border-color: var(--navds-alert-color-error-border);
+  background-color: var(--navds-alert-color-error-background);
+}
+
+.navds-alert--error > .navds-alert__icon {
+  color: var(--navds-alert-color-error-icon);
+  background: radial-gradient(
+    circle,
+    var(--navds-alert-color-error-icon-background) 50%,
+    0,
+    transparent
+  );
+}
+
+.navds-alert--warning {
+  border-color: var(--navds-alert-color-warning-border);
+  background-color: var(--navds-alert-color-warning-background);
+}
+
+.navds-alert--warning > .navds-alert__icon {
+  color: var(--navds-alert-color-warning-icon);
+  background: radial-gradient(
+    circle,
+    var(--navds-alert-color-warning-icon-background) 50%,
+    0,
+    transparent
+  );
+}
+
+.navds-alert--info {
+  border-color: var(--navds-alert-color-info-border);
+  background-color: var(--navds-alert-color-info-background);
+}
+
+.navds-alert--info > .navds-alert__icon {
+  color: var(--navds-alert-color-info-icon);
+  background: radial-gradient(
+    circle,
+    var(--navds-alert-color-info-icon-background) 50%,
+    0,
+    transparent
+  );
+}
+
+.navds-alert--success {
+  border-color: var(--navds-alert-color-success-border);
+  background-color: var(--navds-alert-color-success-background);
+}
+
+.navds-alert--success > .navds-alert__icon {
+  color: var(--navds-alert-color-success-icon);
+  background: radial-gradient(
+    circle,
+    var(--navds-alert-color-success-icon-background) 50%,
+    0,
+    transparent
+  );
+}
+
+.navds-alert--inline {
+  background-color: transparent;
+  border-color: transparent;
+  padding: 0;
+}

@navikt/core/css/baseline/baseline.css

@@ -5,7 +5,20 @@
 @import "Source-Sans-Pro-600.css";
 @import "print.css";
 @import "utility.css";
-@import "smooth-scroll.css";
+
+/* Disabled because of UU concerns */
+
+/* @import "smooth-scroll.css"; */
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
 
 body {
   font-family: var(--navds-font-family);

@navikt/core/css/baseline/smooth-scroll.css

@@ -1,6 +1,7 @@
 /**
 * Solution copied from blogpost
 * https://schepp.dev/posts/smooth-scrolling-and-page-search/
+* Currently disabled
 */
 
 @keyframes smoothscroll1 {

@navikt/core/css/baseline/utility.css

@@ -9,7 +9,8 @@
  *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
  */
 
-.sr-only {
+.sr-only,
+.navds-sr-only {
   border: 0;
   clip: rect(0, 0, 0, 0);
   height: 1px;
@@ -32,7 +33,9 @@
  */
 
 .sr-only.focusable:active,
-.sr-only.focusable:focus {
+.sr-only.focusable:focus,
+.navds-sr-only.focusable:active,
+.navds-sr-only.focusable:focus {
   clip: auto;
   height: auto;
   margin: 0;

@navikt/core/css/button.css

@@ -0,0 +1,208 @@
+:root {
+  /* Primary */
+  --navds-button-color-primary-text: var(--navds-color-white);
+  --navds-button-color-primary-border-focus: var(--navds-color-white);
+  --navds-button-color-primary-background: var(--navds-color-action-default);
+  --navds-button-color-primary-background-hover: var(
+    --navds-color-action-hover
+  );
+  --navds-button-color-primary-background-active: var(
+    --navds-color-action-active
+  );
+
+  /* Secondary */
+  --navds-button-color-secondary-text: var(--navds-color-action-default);
+  --navds-button-color-secondary-text-hover: var(--navds-color-text-inverse);
+  --navds-button-color-secondary-text-active: var(--navds-color-text-inverse);
+  --navds-button-color-secondary-border: var(--navds-color-action-default);
+  --navds-button-color-secondary-border-focus-active-hover: var(
+    --navds-color-white
+  );
+  --navds-button-color-secondary-background: var(--navds-color-background);
+  --navds-button-color-secondary-background-hover: var(
+    --navds-color-action-hover
+  );
+  --navds-button-color-secondary-background-active: var(
+    --navds-color-action-active
+  );
+
+  /* Tertiary */
+  --navds-button-color-tertiary-text: var(--navds-color-action-default);
+  --navds-button-color-tertiary-text-active: var(--navds-color-text-inverse);
+  --navds-button-color-tertiary-border-hover: var(--navds-color-action-default);
+  --navds-button-color-tertiary-border-focus: var(--navds-color-action-default);
+  --navds-button-color-tertiary-border-active: var(--navds-color-white);
+  --navds-button-color-tertiary-background-active: var(
+    --navds-color-action-active
+  );
+
+  /* Danger */
+  --navds-button-color-danger-text: var(--navds-color-white);
+  --navds-button-color-danger-background: var(--navds-color-danger-default);
+  --navds-button-color-danger-background-hover: var(--navds-color-danger-hover);
+  --navds-button-color-danger-background-active: var(
+    --navds-color-danger-active
+  );
+  --navds-button-color-danger-border-focus: var(--navds-color-white);
+
+  /* Disabled */
+  --navds-button-color-text-disabled: var(--navds-color-text-inverse);
+  --navds-button-color-background-disabled: var(--navds-color-disabled);
+}
+
+.navds-button {
+  display: inline-flex;
+  cursor: pointer;
+  margin: 0;
+  text-align: center;
+  text-decoration: none;
+  border: none;
+  background: none;
+  border-radius: 2px;
+  min-width: 48px;
+  padding: var(--navds-spacing-3);
+}
+
+.navds-button--small {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+  min-width: 32px;
+}
+
+.navds-button:focus {
+  outline: none;
+  box-shadow: var(--navds-shadow-focus);
+}
+
+.navds-button__inner {
+  margin: auto;
+  display: flex;
+  align-items: center;
+  gap: var(--navds-spacing-2);
+}
+
+.navds-button svg {
+  font-size: 1.5rem;
+}
+
+.navds-button--small svg {
+  font-size: 1.25rem;
+}
+
+/*************************
+ * .navds-button--primary *
+ *************************/
+
+.navds-button--primary {
+  background-color: var(--navds-button-color-primary-background);
+  color: var(--navds-button-color-primary-text);
+}
+
+.navds-button--primary:hover {
+  background-color: var(--navds-button-color-primary-background-hover);
+}
+
+.navds-button--primary:active {
+  background-color: var(--navds-button-color-primary-background-active);
+}
+
+.navds-button--primary:focus {
+  box-shadow: inset 0 0 0 1px var(--navds-button-color-primary-border-focus),
+    var(--navds-shadow-focus);
+}
+
+/**************************
+ * .navds-button--secondary *
+ **************************/
+
+.navds-button--secondary {
+  color: var(--navds-button-color-secondary-text);
+  background-color: var(--navds-button-color-secondary-background);
+  box-shadow: inset 0 0 0 2px var(--navds-button-color-secondary-border);
+}
+
+.navds-button--secondary:hover {
+  color: var(--navds-button-color-secondary-text-hover);
+  background-color: var(--navds-button-color-secondary-background-hover);
+  box-shadow: none;
+}
+
+.navds-button--secondary:focus {
+  box-shadow: inset 0 0 0 2px var(--navds-button-color-secondary-border),
+    var(--navds-shadow-focus);
+}
+
+.navds-button--secondary:active {
+  color: var(--navds-button-color-secondary-text-active);
+  background-color: var(--navds-button-color-secondary-background-active);
+  box-shadow: none;
+}
+
+.navds-button--secondary:focus:hover,
+.navds-button--secondary:focus:active {
+  box-shadow: inset 0 0 0 1px
+      var(--navds-button-color-secondary-border-focus-active-hover),
+    var(--navds-shadow-focus);
+}
+
+/****************************
+ * .navds-button--tertiary *
+ ****************************/
+
+.navds-button--tertiary {
+  color: var(--navds-button-color-tertiary-text);
+}
+
+.navds-button--tertiary:hover {
+  box-shadow: inset 0 0 0 2px var(--navds-button-color-tertiary-border-hover);
+}
+
+.navds-button--tertiary:focus {
+  box-shadow: inset 0 0 0 2px var(--navds-button-color-tertiary-border-focus),
+    var(--navds-shadow-focus);
+}
+
+.navds-button--tertiary:active {
+  color: var(--navds-button-color-tertiary-text-active);
+  background-color: var(--navds-button-color-tertiary-background-active);
+  box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active);
+}
+
+.navds-button--tertiary:active:focus {
+  box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active),
+    var(--navds-shadow-focus);
+}
+
+/*************************
+ * .navds-button--danger *
+ *************************/
+
+.navds-button--danger {
+  background-color: var(--navds-button-color-danger-background);
+  color: var(--navds-button-color-danger-text);
+}
+
+.navds-button--danger:hover {
+  background-color: var(--navds-button-color-danger-background-hover);
+}
+
+.navds-button--danger:active {
+  background-color: var(--navds-button-color-danger-background-active);
+}
+
+.navds-button--danger:focus {
+  box-shadow: inset 0 0 0 1px var(--navds-button-color-danger-border-focus),
+    var(--navds-shadow-focus);
+}
+
+/**************************
+ * .navds-button:disabled *
+ **************************/
+
+.navds-button:disabled {
+  color: var(--navds-button-color-text-disabled);
+  background-color: var(--navds-button-color-background-disabled);
+  cursor: not-allowed;
+  box-shadow: none;
+  transform: none;
+}

@navikt/core/css/card.css

@@ -0,0 +1,45 @@
+:root {
+  --navds-card-micro-color-text: var(--navds-color-text-primary);
+  --navds-card-micro-color-background: var(--navds-color-orange-20);
+  --navds-card-micro-color-border: transparent;
+  --navds-card-micro-color-text-hover: var(--navds-color-blue-50);
+  --navds-card-micro-color-background-hover: var(--navds-color-white);
+  --navds-card-micro-color-border-hover: var(--navds-color-blue-50);
+  --navds-card-micro-color-text-focus: var(--navds-color-blue-50);
+  --navds-card-micro-color-background-focus: var(--navds-color-white);
+  --navds-card-micro-color-shadow-focus: var(--navds-color-blue-80);
+  --navds-card-micro-color-background-active: var(--navds-color-blue-70);
+  --navds-card-micro-color-text-active: var(--navds-color-white);
+}
+
+/*
+  MicroCard
+*/
+
+.navds-card__micro {
+  border-radius: 1rem;
+  color: var(--navds-card-micro-color-text);
+  display: inline-flex;
+  padding: var(--navds-spacing-1) var(--navds-spacing-2);
+  text-decoration: none;
+  background-color: var(--navds-card-micro-color-background);
+  border: 1px solid var(--navds-card-micro-color-border);
+}
+
+.navds-card__micro:hover {
+  background-color: var(--navds-card-micro-color-background-hover);
+  border-color: var(--navds-card-micro-color-border-hover);
+  color: var(--navds-card-micro-color-text-hover);
+}
+
+.navds-card__micro:focus {
+  background-color: var(--navds-card-micro-color-background-focus);
+  color: var(--navds-card-micro-color-text-focus);
+  outline: none;
+  box-shadow: 0 0 0 3px var(--navds-card-micro-color-shadow-focus);
+}
+
+.navds-card__micro:active {
+  background-color: var(--navds-card-micro-color-background-active);
+  color: var(--navds-card-micro-color-text-active);
+}

@navikt/core/css/form/checkbox-group.css

@@ -0,0 +1,13 @@
+.navds-checkbox-group--small > .navds-checkboxes {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.navds-fieldset.navds-checkbox-group--medium > .navds-checkboxes {
+  margin-top: 0;
+}
+
+.navds-fieldset.navds-checkbox-group--medium > .navds-fieldset__error {
+  margin-top: 0;
+}

@navikt/core/css/form/checkbox.css

@@ -0,0 +1,146 @@
+:root {
+  --navds-checkbox-color-background: var(--navds-color-white);
+  --navds-checkbox-color-border: var(--navds-color-gray-60);
+  --navds-checkbox-color-label-hover: var(--navds-color-blue-50);
+  --navds-checkbox-color-border-hover: var(--navds-color-blue-50);
+  --navds-checkbox-color-background-hover: var(--navds-color-blue-10);
+  --navds-checkbox-color-description: var(--navds-color-gray-80);
+  --navds-checkbox-color-border-checked: var(--navds-color-blue-50);
+  --navds-checkbox-color-background-checked: var(--navds-color-blue-50);
+  --navds-checkbox-color-shadow-error: var(--navds-color-red-50);
+  --navds-checkbox-color-border-error: var(--navds-color-red-50);
+
+  /* Disabled */
+  --navds-checkbox-color-label-disabled: var(--navds-color-gray-40);
+  --navds-checkbox-color-border-disabled: var(--navds-color-gray-60);
+  --navds-checkbox-color-background-disabled: var(--navds-color-gray-10);
+  --navds-checkbox-color-border-checked-disabled: var(--navds-color-gray-40);
+  --navds-checkbox-color-background-checked-disabled: var(
+    --navds-color-gray-40
+  );
+}
+
+.navds-checkbox {
+  position: relative;
+  padding: var(--navds-spacing-3) 0;
+}
+
+.navds-checkbox__input {
+  cursor: pointer;
+  position: absolute;
+  z-index: 1;
+  width: 48px;
+  height: 48px;
+  left: -12px;
+  margin: 0;
+  opacity: 0;
+  top: 0;
+}
+
+.navds-checkbox__label {
+  display: flex;
+  width: fit-content;
+  gap: 12px;
+  cursor: pointer;
+}
+
+.navds-checkbox__description {
+  padding-left: calc(48px - 12px);
+  color: var(--navds-checkbox-color-description);
+}
+
+.navds-checkbox--with-description {
+  padding-bottom: 0;
+}
+
+.navds-checkbox .navds-error-message {
+  margin-top: var(--navds-spacing-3);
+}
+
+.navds-checkbox--with-description .navds-error-message {
+  margin-top: 0;
+}
+
+.navds-checkbox--with-error-message {
+  padding-bottom: var(--navds-spacing-2);
+}
+
+.navds-checkbox__label::before {
+  content: "";
+  background-color: var(--navds-checkbox-color-background);
+  border: 1px solid var(--navds-checkbox-color-border);
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+.navds-checkbox--small {
+  padding: var(--navds-spacing-1) 0;
+}
+
+.navds-checkbox--small > .navds-checkbox__input {
+  width: 24px;
+  height: 24px;
+  top: 2px;
+  left: 0;
+}
+
+.navds-checkbox--small > .navds-checkbox__label::before {
+  margin-top: -2px;
+  margin-bottom: -2px;
+}
+
+.navds-checkbox__input:hover + .navds-checkbox__label {
+  color: var(--navds-checkbox-color-label-hover);
+}
+
+.navds-checkbox__input:hover + .navds-checkbox__label::before {
+  border-color: var(--navds-checkbox-color-border-hover);
+  background-color: var(--navds-checkbox-color-background-hover);
+}
+
+.navds-checkbox__input:focus + .navds-checkbox__label::before {
+  box-shadow: var(--navds-shadow-focus);
+}
+
+.navds-checkbox__input:checked + .navds-checkbox__label::before {
+  background-image: var(--navds-checkmark-image-white);
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: 75%;
+  border: 2px solid var(--navds-checkbox-color-border-checked);
+  background-color: var(--navds-checkbox-color-background-checked);
+}
+
+.navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
+  background-color: white;
+  background-image: var(--navds-checkmark-image-blue);
+}
+
+.navds-checkbox--error
+  > .navds-checkbox__input:not(:hover):not(:focus):not(:disabled):not(:checked)
+  + .navds-checkbox__label::before {
+  box-shadow: 0 0 0 1px var(--navds-checkbox-color-shadow-error);
+  border-color: var(--navds-checkbox-color-border-error);
+}
+
+.navds-checkbox--small .navds-error-message {
+  margin-top: 4px;
+}
+
+.navds-checkbox__input:disabled,
+.navds-checkbox__input:disabled + .navds-checkbox__label {
+  color: var(--navds-checkbox-color-label-disabled);
+  cursor: not-allowed;
+}
+
+.navds-checkbox__input:disabled + .navds-checkbox__label::before {
+  background-color: var(--navds-checkbox-color-background-disabled);
+  border-color: var(--navds-checkbox-color-border-disabled);
+}
+
+.navds-checkbox__input:disabled:checked + .navds-checkbox__label::before {
+  background-color: var(--navds-checkbox-color-background-checked-disabled);
+  border-color: var(--navds-checkbox-color-border-checked-disabled);
+}

@navikt/core/css/form/confirmation-panel.css

@@ -0,0 +1,98 @@
+:root {
+  --navds-confirmation-panel-color-background: var(
+    --navds-color-warning-background
+  );
+  --navds-confirmation-panel-color-background-checked: var(
+    --navds-color-success-background
+  );
+  --navds-confirmation-panel-color-border-checked: var(
+    --navds-color-success-background
+  );
+  --navds-confirmation-panel-color-background-error: var(
+    --navds-color-error-background
+  );
+  --navds-confirmation-panel-color-checkbox-background-checked-hover: var(
+    --navds-color-green-70
+  );
+  --navds-confirmation-panel-color-checkbox-border-checked-hover: var(
+    --navds-color-green-70
+  );
+  --navds-confirmation-panel-color-checkbox-background-checked: var(
+    --navds-color-green-50
+  );
+  --navds-confirmation-panel-color-checkbox-border-checked: var(
+    --navds-color-green-50
+  );
+  --navds-confirmation-panel-color-checkbox-label-checked: var(
+    --navds-color-darkgray
+  );
+}
+
+.navds-confirmation-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--navds-spacing-4);
+  padding: var(--navds-spacing-4);
+  border-radius: 4px;
+  background-color: var(--navds-confirmation-panel-color-background);
+  transition: background-color linear 100ms;
+}
+
+.navds-confirmation-panel__content {
+  max-width: 80ch;
+}
+
+.navds-confirmation-panel--small {
+  padding: var(--navds-spacing-3);
+  gap: var(--navds-spacing-2);
+}
+
+.navds-confirmation-panel--checked {
+  background-color: var(--navds-confirmation-panel-color-background-checked);
+  border-color: var(--navds-confirmation-panel-color-border-checked);
+}
+
+.navds-confirmation-panel--error {
+  background-color: var(--navds-confirmation-panel-color-background-error);
+  border: 1px solid transparent;
+}
+
+.navds-confirmation-panel
+  .navds-checkbox__input:hover
+  + .navds-checkbox__label {
+  text-decoration: underline;
+}
+
+.navds-confirmation-panel--checked
+  .navds-checkbox__input:hover
+  + .navds-checkbox__label {
+  color: var(--navds-confirmation-panel-color-checkbox-label-checked);
+}
+
+.navds-confirmation-panel--checked
+  .navds-checkbox__input
+  + .navds-checkbox__label::before {
+  transition: none;
+  background-color: var(
+    --navds-confirmation-panel-color-checkbox-background-checked
+  );
+  border-color: var(--navds-confirmation-panel-color-checkbox-border-checked);
+  background-image: var(--navds-checkmark-image-white);
+}
+
+.navds-confirmation-panel--checked
+  .navds-checkbox__input:hover
+  + .navds-checkbox__label::before {
+  background-color: var(
+    --navds-confirmation-panel-color-checkbox-background-checked-hover
+  );
+  border-color: var(
+    --navds-confirmation-panel-color-checkbox-border-checked-hover
+  );
+}
+
+.navds-confirmation-panel--checked
+  .navds-checkbox__input:focus:hover
+  + .navds-checkbox__label::before {
+  background-image: var(--navds-checkmark-image-white);
+}

@navikt/core/css/form/error-message.css

@@ -0,0 +1,8 @@
+:root {
+  --navds-error-message-color-text: var(--navds-color-text-error);
+}
+
+.navds-error-message {
+  display: block;
+  color: var(--navds-error-message-color-text);
+}

@navikt/core/css/form/error-summary.css

@@ -0,0 +1,30 @@
+:root {
+  --navds-error-summary-color-background: var(--navds-color-white);
+  --navds-error-summary-color-border: var(--navds-color-error-border);
+}
+
+.navds-error-summary {
+  background-color: var(--navds-error-summary-color-background);
+  padding: var(--navds-spacing-4);
+  border: 4px solid var(--navds-error-summary-color-border);
+}
+
+.navds-error-summary--small {
+  padding: var(--navds-spacing-2);
+}
+
+.navds-error-summary:focus {
+  box-shadow: var(--navds-shadow-focus);
+  outline: none;
+}
+
+.navds-error-summary__list {
+  margin: 1rem 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.navds-error-summary--small > .navds-error-summary__list {
+  margin: 0.5rem 0;
+}

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

@@ -0,0 +1,19 @@
+.navds-fieldset {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-width: 0;
+}
+
+.navds-fieldset > :not(:first-child):not(:empty) {
+  margin-top: 8px;
+}
+
+.navds-fieldset--small > :not(:first-child):not(:empty) {
+  margin-top: 4px;
+}
+
+/* Applied when hideLegend is applied to fieldset */
+.navds-fieldset > .sr-only + :not(:first-child):not(:empty) {
+  margin-top: 0;
+}

@navikt/core/css/form/form.css

@@ -0,0 +1,15 @@
+.navds-form-field > :not(:first-child):not(:empty),
+.navds-form-field > input:not(:first-child) {
+  margin-top: 8px;
+}
+
+.navds-form-field--small > :not(:first-child):not(:empty),
+.navds-form-field--small > input:not(:first-child) {
+  margin-top: 4px;
+}
+
+/* Applied when hideLabel is applied to form-element */
+.navds-form-field > .sr-only + :not(:first-child):not(:empty),
+.navds-form-field > .sr-only + input:not(:first-child) {
+  margin-top: 0;
+}

@navikt/core/css/form/index.css

@@ -0,0 +1,16 @@
+/*
+  Order matters; rearrange with care
+*/
+@import "fieldset.css";
+@import "form.css";
+@import "error-summary.css";
+@import "checkbox.css";
+@import "checkbox-group.css";
+@import "confirmation-panel.css";
+@import "error-message.css";
+@import "radio.css";
+@import "radio-group.css";
+@import "select.css";
+@import "text-field.css";
+@import "textarea.css";
+@import "search-field.css";

@navikt/core/css/form/radio-group.css

@@ -0,0 +1,13 @@
+.navds-radio-group--small > .navds-radio-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.navds-fieldset.navds-radio-group--medium > .navds-radio-buttons {
+  margin-top: 0;
+}
+
+.navds-fieldset.navds-radio-group--medium > .navds-fieldset__error {
+  margin-top: 0;
+}

@navikt/core/css/form/radio.css

@@ -0,0 +1,150 @@
+:root {
+  --navds-radio-color-description: var(--navds-color-gray-80);
+  --navds-radio-color-background: var(--navds-color-white);
+  --navds-radio-color-border: var(--navds-color-gray-60);
+  --navds-radio-color-label-hover: var(--navds-color-blue-50);
+  --navds-radio-color-border-hover: var(--navds-color-blue-50);
+  --navds-radio-color-background-hover: var(--navds-color-blue-10);
+  --navds-radio-color-border-checked: var(--navds-color-blue-50);
+  --navds-radio-color-shadow-checked: var(--navds-color-blue-50);
+  --navds-radio-color-shadow-checked-focus: var(--navds-color-blue-80);
+  --navds-radio-color-shadow-background-checked-focus: var(--navds-color-white);
+  --navds-radio-color-shadow-dot-checked-focus: var(--navds-color-blue-50);
+  --navds-radio-color-shadow-error: var(--navds-color-red-50);
+  --navds-radio-color-border-error: var(--navds-color-red-50);
+
+  /* Disabled */
+  --navds-radio-color-background-disabled: var(--navds-color-gray-10);
+  --navds-radio-color-border-disabled: var(--navds-color-gray-60);
+  --navds-radio-color-label-disabled: var(--navds-color-gray-40);
+  --navds-radio-color-background-disabled-checked: var(--navds-color-gray-40);
+  --navds-radio-color-border-disabled-checked: var(--navds-color-gray-40);
+  --navds-radio-color-shadow-disabled-checked: var(--navds-color-gray-40);
+}
+
+.navds-radio {
+  position: relative;
+  padding: var(--navds-spacing-3) 0;
+}
+
+.navds-radio--with-description .navds-error-message {
+  margin-top: 0;
+}
+
+.navds-radio .navds-error-message {
+  margin-top: var(--navds-spacing-3);
+}
+
+.navds-radio__input {
+  cursor: pointer;
+  position: absolute;
+  z-index: 1;
+  width: 48px;
+  height: 48px;
+  left: -12px;
+  margin: 0;
+  opacity: 0;
+  top: 0;
+}
+
+.navds-radio__label {
+  display: flex;
+  width: fit-content;
+  gap: 12px;
+  min-width: 48px;
+  cursor: pointer;
+}
+
+.navds-radio__description {
+  padding-left: calc(48px - 12px);
+  color: var(--navds-radio-color-description);
+}
+
+.navds-radio--with-description {
+  padding-bottom: 0;
+}
+
+.navds-radio--with-error-message {
+  padding-bottom: var(--navds-spacing-2);
+}
+
+.navds-radio__label::before {
+  content: "";
+  background-color: var(--navds-radio-color-background);
+  border: 1px solid var(--navds-radio-color-border);
+  width: 1.5rem;
+  height: 1.5rem;
+  flex-shrink: 0;
+  border-radius: 50%;
+}
+
+.navds-radio--small {
+  padding: var(--navds-spacing-1) 0;
+}
+
+.navds-radio--small > .navds-radio__input {
+  width: 24px;
+  height: 24px;
+  top: 2px;
+  left: 0;
+}
+
+.navds-radio--small > .navds-radio__label::before {
+  margin-top: -2px;
+  margin-bottom: -2px;
+}
+
+.navds-radio__input:hover + .navds-radio__label {
+  color: var(--navds-radio-color-label-hover);
+}
+
+.navds-radio__input:hover + .navds-radio__label::before {
+  border-color: var(--navds-radio-color-border-hover);
+  background-color: var(--navds-radio-color-background-hover);
+}
+
+.navds-radio__input:focus + .navds-radio__label::before {
+  box-shadow: var(--navds-shadow-focus);
+}
+
+.navds-radio__input:checked + .navds-radio__label::before {
+  border: 2px solid var(--navds-radio-color-border-checked);
+  box-shadow: 0 0 0 3px #fff inset,
+    0 0 0 2rem var(--navds-radio-color-shadow-checked) inset;
+}
+
+.navds-radio__input:checked:focus + .navds-radio__label::before {
+  transition: box-shadow 200ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
+  box-shadow: 0 0 0 3px var(--navds-radio-color-shadow-checked-focus),
+    0 0 0 3px var(--navds-radio-color-shadow-background-checked-focus) inset,
+    0 0 0 2rem var(--navds-radio-color-shadow-dot-checked-focus) inset;
+}
+
+.navds-radio--error
+  > .navds-radio__input:not(:hover):not(:focus):not(:disabled):not(:checked)
+  + .navds-radio__label::before {
+  box-shadow: 0 0 0 1px var(--navds-radio-color-shadow-error);
+  border-color: var(--navds-radio-color-border-error);
+}
+
+.navds-radio--small .navds-error-message {
+  margin-top: 4px;
+}
+
+.navds-radio__input:disabled,
+.navds-radio__input:disabled + .navds-radio__label {
+  color: var(--navds-radio-color-label-disabled);
+  cursor: not-allowed;
+}
+
+.navds-radio__input:disabled + .navds-radio__label::before {
+  background-color: var(--navds-radio-color-background-disabled);
+  border-color: var(--navds-radio-color-border-disabled);
+}
+
+.navds-radio__input:disabled:checked + .navds-radio__label::before {
+  background-color: var(--navds-radio-color-background-disabled-checked);
+  border-color: var(--navds-radio-color-border-disabled-checked);
+  box-shadow: 0 0 0 3px #fff inset,
+    0 0 0 2rem var(--navds-radio-color-shadow-disabled-checked) inset;
+}

@navikt/core/css/form/search-field.css

@@ -0,0 +1,49 @@
+:root {
+  --navds-search-field-color-shadow-error: var(--navds-color-red-50);
+  --navds-search-field-color-border-error: var(--navds-color-red-50);
+  --navds-search-field-color-clearbutton-border: var(--navds-color-gray-60);
+}
+
+.navds-search-field__input-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.navds-form-field--small .navds-search-field__input {
+  padding: 0.15rem;
+  min-height: 32px;
+}
+
+.navds-search-field__input-wrapper > *:not(:first-child):not(:last-child) {
+  border-radius: 0;
+}
+
+.navds-search-field__input-wrapper > :first-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.navds-search-field__input-wrapper > :last-child {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.navds-search-field__input-wrapper > :last-child:first-child {
+  border-radius: 4px;
+}
+
+.navds-search-field__input-wrapper :focus {
+  z-index: var(--navds-z-index-focus);
+}
+
+.navds-search-field__button,
+.navds-search-field__clear-button {
+  flex-shrink: 0;
+}
+
+.navds-search-field--error
+  .navds-search-field__input:not(:hover):not(:focus):not(:disabled) {
+  box-shadow: 0 0 0 1px var(--navds-search-field-color-shadow-error) inset;
+  border-color: var(--navds-search-field-color-border-error);
+}

@navikt/core/css/form/select.css

@@ -0,0 +1,70 @@
+:root {
+  --navds-select-color-background: var(--navds-color-white);
+  --navds-select-color-border: var(--navds-color-gray-60);
+  --navds-select-color-border-hover: var(--navds-color-blue-50);
+  --navds-select-color-border-error: var(--navds-color-red-50);
+  --navds-select-color-shadow-error: var(--navds-color-red-50);
+  --navds-select-color-border-disabled: var(--navds-color-gray-40);
+  --navds-select-color-background-disabled: var(--navds-color-gray-10);
+  --navds-select-color-text-disabled: var(--navds-color-darkgray);
+}
+
+.navds-select__input {
+  appearance: none;
+  padding: 0.5rem;
+  background-color: var(--navds-select-color-background);
+  border-radius: 4px;
+  border: 1px solid var(--navds-select-color-border);
+  width: 100%;
+  box-sizing: border-box;
+  min-height: 48px;
+  display: inline-block;
+  position: relative;
+  padding-right: 2.5rem;
+}
+
+.navds-select__input:hover {
+  border-color: var(--navds-select-color-border-hover);
+}
+
+.navds-select__input:focus {
+  outline: none;
+  box-shadow: var(--navds-shadow-focus);
+}
+
+.navds-select__container {
+  position: relative;
+  display: flex;
+  width: 100%;
+  align-items: center;
+}
+
+.navds-select__chevron {
+  position: absolute;
+  font-size: 1rem;
+  right: 0.5rem;
+  pointer-events: none;
+}
+
+.navds-form-field--small .navds-select__input {
+  min-height: 32px;
+  padding: 0.25rem;
+}
+
+/**
+  Error handling
+*/
+.navds-select--error > * select:not(:hover):not(:focus):not(:disabled) {
+  box-shadow: 0 0 0 1px var(--navds-select-color-shadow-error);
+  border-color: var(--navds-select-color-border-error);
+}
+
+/* Disabled handling */
+.navds-select__input:disabled,
+.navds-select__input[read-only] {
+  background-color: var(--navds-select-color-background-disabled);
+  border-color: var(--navds-select-color-border-disabled);
+  box-shadow: none;
+  color: var(--navds-select-color-text-disabled);
+  cursor: not-allowed;
+}

@navikt/core/css/form/text-field.css

@@ -0,0 +1,63 @@
+:root {
+  --navds-text-field-color-background: var(--navds-color-white);
+  --navds-text-field-color-border: var(--navds-color-gray-60);
+  --navds-text-field-color-border-hover: var(--navds-color-blue-50);
+  --navds-text-field-color-border-error: var(--navds-color-red-50);
+  --navds-text-field-color-shadow-error: var(--navds-color-red-50);
+  --navds-text-field-color-border-disabled: var(--navds-color-gray-40);
+  --navds-text-field-color-background-disabled: var(--navds-color-gray-10);
+  --navds-text-field-color-text-disabled: var(--navds-color-darkgray);
+}
+
+.navds-text-field__input {
+  appearance: none;
+  padding: 0.5rem;
+  background-color: var(--navds-text-field-color-background);
+  border-radius: 4px;
+  border: 1px solid var(--navds-text-field-color-border);
+  min-height: 48px;
+  width: 100%;
+}
+
+.navds-form-field--small > .navds-text-field__input {
+  padding: 0.15rem;
+  min-height: 32px;
+}
+
+.navds-text-field__input:hover {
+  border-color: var(--navds-text-field-color-border-hover);
+}
+
+.navds-text-field__input:focus {
+  outline: none;
+  box-shadow: var(--navds-shadow-focus);
+}
+
+/**
+  Error handling
+*/
+.navds-text-field--error
+  > .navds-text-field__input:not(:hover):not(:focus):not(:disabled) {
+  box-shadow: 0 0 0 1px var(--navds-text-field-color-shadow-error);
+  border-color: var(--navds-text-field-color-border-error);
+}
+
+/* Disabled handling */
+.navds-text-field__input:disabled,
+.navds-text-field__input[readonly] {
+  background-color: var(--navds-text-field-color-background-disabled);
+  border-color: var(--navds-text-field-color-border-disabled);
+  box-shadow: none;
+  color: var(--navds-text-field-color-text-disabled);
+  cursor: not-allowed;
+}
+
+/**
+  * Removes default search icon
+  */
+.navds-text-field__input[type="search"]::-webkit-search-decoration,
+.navds-text-field__input[type="search"]::-webkit-search-cancel-button,
+.navds-text-field__input[type="search"]::-webkit-search-results-button,
+.navds-text-field__input[type="search"]::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+}

@navikt/core/css/form/textarea.css

@@ -0,0 +1,88 @@
+:root {
+  --navds-textarea-color-background: var(--navds-color-white);
+  --navds-textarea-color-border: var(--navds-color-gray-60);
+  --navds-textarea-color-border-hover: var(--navds-color-blue-50);
+  --navds-textarea-color-border-error: var(--navds-color-red-50);
+  --navds-textarea-color-shadow-error: var(--navds-color-red-50);
+  --navds-textarea-color-counter-text: var(--navds-color-gray-40);
+  --navds-textarea-color-counter-text-error: var(--navds-color-red-50);
+  --navds-textarea-color-text-disabled: var(--navds-color-darkgray);
+  --navds-textarea-color-border-disabled: var(--navds-color-gray-40);
+  --navds-textarea-color-background-disabled: var(--navds-color-gray-10);
+}
+
+.navds-textarea__wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.navds-textarea__input {
+  appearance: none;
+  padding: var(--navds-spacing-2);
+  background-color: var(--navds-textarea-color-background);
+  border-radius: 4px;
+  border: 1px solid var(--navds-textarea-color-border);
+  resize: none;
+  width: 100%;
+  transition: height 0.1s ease-out;
+  display: block;
+  min-height: 48px;
+}
+
+.navds-textarea--counter {
+  padding-bottom: var(--navds-spacing-8);
+}
+
+.navds-textarea__input:hover {
+  border-color: var(--navds-textarea-color-border-hover);
+}
+
+.navds-textarea__input:focus {
+  outline: none;
+  box-shadow: var(--navds-shadow-focus);
+}
+
+.navds-form-field--small .navds-textarea__input {
+  padding: var(--navds-spacing-1);
+  min-height: 32px;
+}
+
+.navds-form-field--small .navds-textarea--counter.navds-textarea__input {
+  padding-bottom: var(--navds-spacing-7);
+}
+
+.navds-textarea__counter {
+  pointer-events: none;
+  color: var(--navds-textarea-color-counter-text);
+  font-style: italic;
+  position: absolute;
+  text-align: right;
+  left: var(--navds-spacing-3);
+  right: var(--navds-spacing-3);
+  bottom: var(--navds-spacing-2);
+}
+
+.navds-textarea__counter--error {
+  color: var(--navds-textarea-color-counter-text-error);
+}
+
+/**
+  Error handling
+*/
+.navds-textarea--error
+  .navds-textarea__input:not(:hover):not(:focus):not(:disabled) {
+  box-shadow: 0 0 0 1px var(--navds-textarea-color-shadow-error);
+  border-color: var(--navds-textarea-color-border-error);
+}
+
+/*
+  Disabled handling
+ */
+.navds-textarea__input:disabled,
+.navds-textarea__input[readonly] {
+  background-color: var(--navds-textarea-color-background-disabled);
+  border-color: var(--navds-textarea-color-border-disabled);
+  box-shadow: none;
+  color: var(--navds-textarea-color-text-disabled);
+  cursor: not-allowed;
+}

@navikt/core/css/guide-panel.css

@@ -0,0 +1,76 @@
+:root {
+  --navds-guide-panel-color-background: var(--navds-color-background);
+  --navds-guide-panel-color-border: var(--navds-color-blue-40);
+  --navds-guide-panel-color-illustration-background: var(--navds-color-blue-20);
+}
+
+/**
+ * GuidePanel component
+ */
+.navds-guide-panel {
+  position: relative;
+  padding-left: 2.5rem;
+}
+
+.navds-guide-panel__content {
+  background-color: var(--navds-guide-panel-color-background);
+  border-radius: 4px;
+  border: 2px solid var(--navds-guide-panel-color-border);
+  min-height: 7.25rem;
+  padding: 1.5rem;
+  padding-left: 3.5rem;
+}
+
+.navds-guide-panel--poster {
+  padding-left: 0;
+  padding-top: 3.125rem;
+}
+
+.navds-guide-panel--poster .navds-guide-panel__content {
+  padding: 2rem;
+  padding-top: 4.25rem;
+}
+
+.navds-guide-panel .navds-guide {
+  position: absolute;
+  top: 1rem;
+  transform: translateX(-50%);
+}
+
+.navds-guide-panel--poster .navds-guide {
+  left: 50%;
+  top: 0;
+}
+
+/**
+ * Guide component
+ */
+.navds-guide {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Guide illustration frame */
+.navds-guide__illustration {
+  background: var(--navds-guide-panel-color-illustration-background);
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.navds-guide__illustration svg,
+.navds-guide__illustration img {
+  height: 100%;
+  width: 100%;
+}
+
+/* Illustration sizes */
+.navds-guide__illustration--small {
+  height: 5rem;
+  width: 5rem;
+}
+
+.navds-guide__illustration--medium {
+  height: 6.25rem;
+  width: 6.25rem;
+}

@navikt/core/css/help-text.css

@@ -0,0 +1,54 @@
+:root {
+  --navds-help-text-color-button-background: transparent;
+  --navds-help-text-color-icon: var(--navds-color-blue-50);
+  --navds-help-text-color-icon-hover: var(--navds-color-white);
+  --navds-help-text-color-icon-background-hover: var(--navds-color-blue-50);
+  --navds-help-text-color-icon-shadow-hover: var(--navds-color-blue-50);
+  --navds-help-text-color-icon-focus: var(--navds-color-white);
+  --navds-help-text-color-icon-background-focus: var(--navds-color-blue-50);
+  --navds-help-text-color-icon-shadow-focus: var(--navds-color-blue-80);
+  --navds-help-text-color-popover-background: var(--navds-color-lightblue-10);
+}
+
+.navds-help-text__button {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  cursor: pointer;
+  background-color: var(--navds-help-text-color-button-background);
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.navds-help-text__button:focus {
+  outline: none;
+}
+
+.navds-help-text__icon {
+  border-radius: 50%;
+  font-size: 1.5rem;
+  color: var(--navds-help-text-color-icon);
+}
+
+.navds-help-text__button:hover > .navds-help-text__icon {
+  color: var(--navds-help-text-color-icon-hover);
+  background: var(--navds-help-text-color-icon-background-hover);
+  box-shadow: 0 0 0 2px var(--navds-help-text-color-icon-shadow-hover);
+}
+
+.navds-help-text__button:focus > .navds-help-text__icon {
+  outline: none;
+  color: var(--navds-help-text-color-icon-focus);
+  background: var(--navds-help-text-color-icon-background-focus);
+  box-shadow: 0 0 0 3px var(--navds-help-text-color-icon-shadow-focus);
+}
+
+.navds-help-text__popover > .navds-popover__arrow::before {
+  background-color: var(--navds-help-text-color-popover-background);
+}
+
+.navds-help-text__popover.navds-popover {
+  background-color: var(--navds-help-text-color-popover-background);
+}

@navikt/core/css/index.css

@@ -1,19 +1,25 @@
 @import "baseline/baseline.css";
 @import "typography.css";
 @import "grid.css";
-@import "layouts.css";
 
 @import "accordion.css";
-@import "accordion-anchor-menu.css";
 @import "accordion-menu.css";
 @import "alert.css";
 @import "button.css";
 @import "content-container.css";
-@import "copy-to-clipboard.css";
-@import "internal-header.css";
+@import "guide-panel.css";
+@import "form/index.css";
+@import "help-text.css";
 @import "link.css";
+@import "loader.css";
 @import "modal.css";
 @import "popover.css";
 @import "tag.css";
 @import "panel.css";
 @import "link-panel.css";
+@import "speech-bubble.css";
+@import "table.css";
+
+/* Navno spesific packages */
+@import "page-header.css";
+@import "card.css";

@navikt/core/css/link-panel.css

@@ -1,19 +1,26 @@
-.navds-link-panel {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  text-decoration: none;
-  color: var(--navds-color-gray-90);
+:root {
+  --navds-link-panel-color-text: var(--navds-color-gray-90);
+  --navds-link-panel-color-border-hover: var(--navds-color-blue-50);
+  --navds-link-panel-color-title-hover: var(--navds-color-text-link);
 }
 
-.navds-link-panel:hover .navds-link-panel-title {
+.navds-link-panel {
+  text-decoration: none;
+  color: var(--navds-link-panel-color-text);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--navds-spacing-2);
+}
+
+.navds-link-panel:hover .navds-link-panel__title {
   text-decoration: underline;
-  color: var(--navds-color-text-link);
+  color: var(--navds-link-panel-color-title-hover);
 }
 
 .navds-link-panel:hover {
   box-shadow: var(--navds-shadow-hover);
-  border-color: var(--navds-color-blue-50);
+  border-color: var(--navds-link-panel-color-border-hover);
 }
 
 .navds-link-panel:focus {
@@ -22,6 +29,7 @@
 }
 
 .navds-link-panel__chevron {
+  flex-shrink: 0;
   font-size: 1.5rem;
   transition: transform 200ms;
 }
@@ -30,3 +38,7 @@
 .navds-link-panel:focus-within > .navds-link-panel__chevron {
   transform: translateX(4px);
 }
+
+.navds-link-panel__description {
+  margin-top: var(--navds-spacing-2);
+}

@navikt/core/css/link.css

@@ -0,0 +1,56 @@
+:root {
+  --navds-link-color-text: var(--navds-color-text-link);
+  --navds-link-color-text-focus: var(--navds-color-text-inverse);
+  --navds-link-color-text-active: var(--navds-color-text-inverse);
+  --navds-link-color-background-focus: var(--navds-text-focus);
+  --navds-link-color-background-active: var(--navds-text-focus);
+  --navds-link-color-icon: var(--navds-color-text-link);
+  --navds-link-color-icon-focus: var(--navds-color-text-inverse);
+  --navds-link-color-on-info-background: var(--navds-color-text-primary);
+  --navds-link-color-on-error-background: var(--navds-color-text-primary);
+}
+
+.navds-link {
+  color: var(--navds-link-color-text);
+  text-decoration: underline;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--navds-spacing-1);
+}
+
+.navds-alert--info .navds-link {
+  color: var(--navds-link-color-on-info-background);
+}
+
+.navds-alert--error .navds-link,
+.navds-confirmation-panel--error .navds-link {
+  color: var(--navds-link-color-on-error-background);
+}
+
+.navds-link:hover {
+  text-decoration: none;
+}
+
+.navds-link:focus {
+  outline: none;
+  color: var(--navds-link-color-text-focus);
+  text-decoration: none;
+  background-color: var(--navds-link-color-background-focus);
+  box-shadow: var(--navds-text-shadow);
+}
+
+.navds-link:active {
+  outline: none;
+  color: var(--navds-link-color-text-active);
+  text-decoration: none;
+  background-color: var(--navds-link-color-background-active);
+  box-shadow: var(--navds-text-shadow);
+}
+
+.navds-link svg {
+  color: var(--navds-link-color-icon);
+}
+
+.navds-link:focus svg {
+  color: var(--navds-link-color-icon-focus);
+}

@navikt/core/css/loader.css

@@ -0,0 +1,117 @@
+:root {
+  --navds-loader-color-foreground: var(--navds-color-gray-40);
+  --navds-loader-color-background: var(--navds-color-gray-10);
+  --navds-loader-color-neutral-foreground: var(--navds-color-gray-40);
+  --navds-loader-color-interaction-foreground: var(--navds-color-blue-50);
+  --navds-loader-color-inverted-foreground: var(--navds-color-white);
+  --navds-loader-color-inverted-background: rgba(255, 255, 255, 0.3);
+  --navds-loader-color-transparent-background: transparent;
+  --navds-loader-color-on-button-background: rgba(255, 255, 255, 0.3);
+  --navds-loader-color-on-button-foreground: currentColor;
+}
+
+.navds-loader {
+  width: 1.5rem;
+  display: inline-block;
+  position: relative;
+  animation: loader-rotate 1.4s linear infinite;
+}
+
+.navds-loader__foreground {
+  animation: loader-dasharray 1.4s ease-in-out infinite;
+  stroke-dasharray: 80px, 200px;
+  stroke-dashoffset: 0;
+  stroke: var(--navds-loader-color-foreground);
+}
+
+.navds-loader__background {
+  stroke: var(--navds-loader-color-background);
+}
+
+.navds-loader--neutral .navds-loader__foreground {
+  stroke: var(--navds-loader-color-neutral-foreground);
+}
+
+.navds-loader--interaction .navds-loader__foreground {
+  stroke: var(--navds-loader-color-interaction-foreground);
+}
+
+.navds-loader--inverted .navds-loader__foreground {
+  stroke: var(--navds-loader-color-inverted-foreground);
+}
+
+.navds-loader--inverted .navds-loader__background {
+  stroke: var(--navds-loader-color-inverted-background);
+}
+
+.navds-loader--transparent .navds-loader__background {
+  stroke: var(--navds-loader-color-transparent-background);
+}
+
+.navds-loader--2xlarge {
+  width: 4rem;
+}
+
+.navds-loader--xlarge {
+  width: 2.5rem;
+}
+
+.navds-loader--large {
+  width: 2rem;
+}
+
+.navds-loader--medium {
+  width: 1.5rem;
+}
+
+.navds-loader--small {
+  width: 1.25rem;
+}
+
+.navds-loader--xsmall {
+  width: 1rem;
+}
+
+/*
+ * Button spesific styling
+ */
+
+.navds-button .navds-loader .navds-loader__foreground {
+  stroke: var(--navds-loader-color-on-button-foreground);
+}
+
+.navds-button:hover .navds-loader .navds-loader__background {
+  stroke: var(--navds-loader-color-on-button-background);
+}
+
+.navds-button:active .navds-loader .navds-loader__background {
+  stroke: var(--navds-loader-color-on-button-background);
+}
+
+.navds-button--primary .navds-loader .navds-loader__background,
+.navds-button--danger .navds-loader .navds-loader__background {
+  stroke: var(--navds-loader-color-on-button-background);
+}
+
+@keyframes loader-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes loader-dasharray {
+  0% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -15px;
+  }
+
+  100% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -120px;
+  }
+}

@navikt/core/css/modal.css

@@ -1,18 +1,23 @@
+:root {
+  --navds-modal-color-background: var(--navds-color-background);
+  --navds-modal-color-overlay: var(--navds-color-modal-overlay);
+}
+
 .ReactModal__Body--open {
   overflow: hidden;
 }
 
 .navds-modal {
-  background-color: var(--navds-color-background);
+  background-color: var(--navds-modal-color-background);
+  border-radius: 4px;
   display: block;
   position: relative;
-  padding: 1rem;
-  border-radius: 4px;
   overflow: auto;
   max-height: 100%;
-  z-index: var(--navds-z-index-modal-content);
-  top: 50%;
-  transform: translateY(-50%);
+}
+
+.navds-modal__content {
+  padding: var(--navds-spacing-4);
 }
 
 .navds-modal:focus,
@@ -23,13 +28,16 @@
 
 .navds-modal__overlay {
   position: fixed;
-  z-index: var(--navds-z-index-modal-overlay);
+  z-index: var(--navds-z-index-modal);
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
-  background-color: var(--navds-color-modal-overlay);
-  padding: 1rem;
+  background-color: var(--navds-modal-color-overlay);
+  padding: var(--navds-spacing-4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .navds-modal__button--shake {
@@ -44,10 +52,11 @@
 }
 
 .navds-modal__button {
-  position: fixed;
-  top: 1rem;
-  right: 1rem;
+  position: absolute;
+  top: var(--navds-spacing-4);
+  right: var(--navds-spacing-4);
   display: flex;
+  padding: var(--navds-spacing-2);
 }
 
 .navds-modal__button svg {

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.5.2",
+  "version": "0.10.0",
   "private": false,
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",
@@ -18,13 +18,13 @@
   "main": "./dist/index.css",
   "scripts": {
     "build": "postcss --use postcss-import -o dist/index.css index.css",
-    "watch-css": "postcss -w --use postcss-import -o dist/index.css index.css"
+    "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^0.3.1",
+    "@navikt/ds-tokens": "^0.5.3",
     "normalize.css": "^8.0.1",
-    "postcss": "^8.2.7",
+    "postcss": "^8.3.6",
     "postcss-cli": "^8.3.1",
-    "postcss-import": "^14.0.0"
+    "postcss-import": "^14.0.2"
   }
 }

@navikt/core/css/page-header.css

@@ -0,0 +1,70 @@
+:root {
+  --navds-page-header-color-background: var(--navds-color-background);
+  --navds-page-header-color-shadow-situation: var(--navds-color-orange-40);
+  --navds-page-header-color-shadow-product: var(--navds-color-green-40);
+  --navds-page-header-color-shadow-guide: var(--navds-color-deepblue-40);
+}
+
+.navds-page-header {
+  display: flex;
+  justify-content: center;
+  background-color: var(--navds-page-header-color-background);
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+  padding-left: calc((100vw - 100%) / 2);
+  padding-right: calc((100vw - 100%) / 2);
+  margin-left: calc((100vw - 100%) / -2);
+  margin-right: calc((100vw - 100%) / -2);
+}
+
+.navds-page-header__wrapper {
+  width: 100%;
+  max-width: 56.5rem;
+  text-align: start;
+}
+
+.navds-page-header__title {
+  display: flex;
+  margin: 0 auto;
+  width: 100%;
+  position: relative;
+  flex-direction: column;
+}
+
+.navds-page-header--left > .navds-page-header__wrapper {
+  text-align: start;
+}
+
+.navds-page-header--center > .navds-page-header__wrapper {
+  text-align: center;
+}
+
+.navds-page-header__illustration {
+  margin-right: 1.5rem;
+  pointer-events: none;
+}
+
+.navds-page-header__illustration > svg {
+  width: 5rem;
+  height: 5rem;
+}
+
+.navds-page-header--situation {
+  box-shadow: 0 -4px 0 var(--navds-page-header-color-shadow-situation) inset;
+}
+.navds-page-header--product {
+  box-shadow: 0 -4px 0 var(--navds-page-header-color-shadow-product) inset;
+}
+.navds-page-header--guide {
+  box-shadow: 0 -4px 0 var(--navds-page-header-color-shadow-guide) inset;
+}
+
+@media (max-width: 649px) {
+  .navds-page-header__illustration > svg {
+    width: 3rem;
+    height: 3rem;
+  }
+  .navds-page-header__title {
+    font-size: var(--navds-font-size-heading-xlarge);
+  }
+}

@navikt/core/css/panel.css

@@ -0,0 +1,15 @@
+:root {
+  --navds-panel-color-background: var(--navds-color-white);
+  --navds-panel-color-border: var(--navds-color-border);
+}
+
+.navds-panel {
+  background-color: var(--navds-panel-color-background);
+  padding: var(--navds-spacing-4);
+  border-radius: var(--navds-border-radius);
+  border: 1px solid transparent;
+}
+
+.navds-panel--border {
+  border-color: var(--navds-panel-color-border);
+}

@navikt/core/css/popover.css

@@ -1,9 +1,20 @@
+:root {
+  --navds-popover-color-background: var(--navds-color-background);
+  --navds-popover-color-border: var(--navds-color-gray-40);
+  --navds-popover-color-shadow: var(--navds-color-gray-20);
+}
+
 .navds-popover {
-  z-index: var(--navds-z-index-popover-default);
-  background-color: var(--navds-color-background);
-  box-shadow: 0 0.05rem 0.25rem 0.125rem rgba(0, 0, 0, 0.08);
-  border: var(--navds-border-default);
-  border-radius: 2px;
+  z-index: var(--navds-z-index-popover);
+  background-color: var(--navds-popover-color-background);
+  box-shadow: 0 2px 4px 0 var(--navds-popover-color-shadow);
+  border: 1px solid;
+  border-color: var(--navds-popover-color-border);
+  border-radius: 4px;
+}
+
+.navds-popover__content {
+  padding: var(--navds-spacing-4);
 }
 
 .navds-popover--hidden {
@@ -16,22 +27,20 @@
 }
 
 .navds-popover__arrow {
-  z-index: var(--navds-z-index-popover-arrow);
+  z-index: -1;
 }
 
 .navds-popover__arrow::before {
-  content: "";
   display: block;
+  content: "";
+  transform: rotate(45deg);
+  background-color: var(--navds-popover-color-background);
+  border: 1px solid;
+  border-color: var(--navds-popover-color-border);
   width: 1rem;
   height: 1rem;
-  transform: rotate(45deg);
-  background-color: var(--navds-color-background);
-  border: var(--navds-border-default);
-}
-
-.navds-popover__arrow::before .navds-popover--small {
-  width: 0.67rem;
-  height: 0.67rem;
+  top: 0;
+  left: 0;
 }
 
 .navds-popover[data-popper-placement^="top"] > .navds-popover__arrow {

@navikt/core/css/speech-bubble.css

@@ -0,0 +1,82 @@
+:root {
+  --navds-speechbubble-color-background: var(--navds-color-gray-10);
+  --navds-speechbubble-color-shadow: var(--navds-color-gray-20);
+  --navds-speechbubble-color-illustration: var(--navds-color-darkgray);
+  --navds-speechbubble-color-illustration-background: var(
+    --navds-color-gray-20
+  );
+  --navds-speechbubble-color-detail-text: var(--navds-color-gray-60);
+}
+
+.navds-speechbubble {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--navds-spacing-4);
+}
+
+.navds-speechbubble--right {
+  flex-direction: row-reverse;
+}
+
+.navds-speechbubble__bubble-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--navds-spacing-3);
+}
+
+.navds-speechbubble--right .navds-speechbubble__bubble-list {
+  align-items: flex-end;
+}
+
+.navds-speechbubble__illustration {
+  align-items: center;
+  background: var(--navds-speechbubble-color-illustration-background);
+  color: var(--navds-speechbubble-color-illustration);
+  border-radius: 50%;
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  overflow: hidden;
+  height: 3rem;
+  width: 3rem;
+}
+
+.navds-speechbubble__illustration svg {
+  align-self: center;
+  height: 100%;
+  width: 100%;
+}
+
+.navds-speechbubble__bubble {
+  padding: 1rem;
+  box-shadow: 0 2px 4px 0 var(--navds-speechbubble-color-shadow);
+  width: fit-content;
+  max-width: 37.5rem;
+  background-color: var(--navds-speechbubble-color-background);
+  border-radius: 12px;
+  border-bottom-left-radius: 2px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--navds-spacing-2);
+}
+
+.navds-speechbubble__bubble:focus {
+  box-shadow: var(--navds-shadow-focus);
+  outline: none;
+}
+
+.navds-speechbubble--right .navds-speechbubble__bubble {
+  border-radius: 12px;
+  border-bottom-right-radius: 2px;
+}
+
+.navds-speechbubble__top-text {
+  color: var(--navds-speechbubble-color-detail-text);
+}
+
+.navds-speechbubble--right .navds-speechbubble__top-text {
+  align-self: flex-end;
+}

@navikt/core/css/table.css

@@ -0,0 +1,28 @@
+.navds-table {
+  border-collapse: collapse;
+  width: 100%;
+  display: table;
+}
+
+.navds-table__header {
+  display: table-header-group;
+}
+
+.navds-table__body {
+  display: table-row-group;
+}
+
+.navds-table__row {
+  display: table-row;
+}
+
+.navds-table__cell {
+  display: table-cell;
+  padding: var(--navds-spacing-4);
+  text-align: left;
+  border-bottom: var(--navds-border-default);
+}
+
+.navds-table--small .navds-table__cell {
+  padding: var(--navds-spacing-2);
+}

@navikt/core/css/tag.css

@@ -0,0 +1,54 @@
+:root {
+  --navds-tag-color-border: var(--navds-color-gray-40);
+  --navds-tag-color-background: var(--navds-color-gray-10);
+  --navds-tag-color-info-background: var(--navds-color-tag-info-background);
+  --navds-tag-color-info-border: var(--navds-color-tag-info-border);
+  --navds-tag-color-warning-background: var(
+    --navds-color-tag-warning-background
+  );
+  --navds-tag-color-warning-border: var(--navds-color-tag-warning-border);
+  --navds-tag-color-success-background: var(
+    --navds-color-tag-success-background
+  );
+  --navds-tag-color-success-border: var(--navds-color-tag-success-border);
+  --navds-tag-color-error-background: var(--navds-color-tag-error-background);
+  --navds-tag-color-error-border: var(--navds-color-tag-error-border);
+}
+
+.navds-tag {
+  border: 1px solid;
+  border-color: var(--navds-tag-color-border);
+  border-radius: 4px;
+  background-color: var(--navds-tag-color-background);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.125rem var(--navds-spacing-3);
+  min-height: 32px;
+}
+
+.navds-tag--small {
+  min-height: 24px;
+  padding-right: var(--navds-spacing-1);
+  padding-left: var(--navds-spacing-1);
+}
+
+.navds-tag--error {
+  background-color: var(--navds-tag-color-error-background);
+  border-color: var(--navds-tag-color-error-border);
+}
+
+.navds-tag--success {
+  background-color: var(--navds-tag-color-success-background);
+  border-color: var(--navds-tag-color-success-border);
+}
+
+.navds-tag--warning {
+  background-color: var(--navds-tag-color-warning-background);
+  border-color: var(--navds-tag-color-warning-border);
+}
+
+.navds-tag--info {
+  background-color: var(--navds-tag-color-info-background);
+  border-color: var(--navds-tag-color-info-border);
+}

@navikt/core/css/typography.css

@@ -0,0 +1,167 @@
+/* Heading */
+.navds-heading {
+  font-weight: var(--navds-font-weight-bold);
+  margin: 0;
+}
+
+.navds-heading--2xlarge {
+  font-size: var(--navds-font-size-heading-2xlarge);
+  letter-spacing: -0.01em;
+  line-height: var(--navds-font-line-height-heading-2xlarge);
+}
+
+.navds-heading--2xlarge.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-5);
+}
+
+.navds-heading--xlarge {
+  font-size: var(--navds-font-size-heading-xlarge);
+  letter-spacing: -0.008em;
+  line-height: var(--navds-font-line-height-heading-xlarge);
+}
+
+.navds-heading--xlarge.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-4);
+}
+
+.navds-heading--large {
+  font-size: var(--navds-font-size-heading-large);
+  letter-spacing: -0.004em;
+  line-height: var(--navds-font-line-height-heading-large);
+}
+
+.navds-heading--large.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-3);
+}
+
+.navds-heading--medium {
+  font-size: var(--navds-font-size-heading-medium);
+  letter-spacing: -0.002em;
+  line-height: var(--navds-font-line-height-heading-medium);
+}
+
+.navds-heading--medium.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-3);
+}
+
+.navds-heading--small {
+  font-size: var(--navds-font-size-heading-small);
+  letter-spacing: -0.001em;
+  line-height: var(--navds-font-line-height-heading-small);
+}
+
+.navds-heading--small.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-3);
+}
+
+.navds-heading--xsmall {
+  font-size: var(--navds-font-size-heading-xsmall);
+  letter-spacing: -0.001em;
+  line-height: var(--navds-font-line-height-heading-xsmall);
+}
+
+.navds-heading--xsmall.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-3);
+}
+
+/* Ingress */
+.navds-ingress {
+  font-size: var(--navds-font-size-xlarge);
+  font-weight: var(--navds-font-weight-regular);
+  letter-spacing: -0.001em;
+  line-height: var(--navds-font-line-height-xlarge);
+  margin: 0;
+}
+
+.navds-ingress.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-10);
+}
+
+/* Body */
+.navds-body-long {
+  font-size: var(--navds-font-size-large);
+  font-weight: var(--navds-font-weight-regular);
+  letter-spacing: 0;
+  line-height: var(--navds-font-line-height-xlarge);
+  margin: 0;
+}
+
+.navds-body-long.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-7);
+}
+
+.navds-body-long--small {
+  font-size: var(--navds-font-size-medium);
+  letter-spacing: 0.002em;
+  line-height: var(--navds-font-line-height-large);
+}
+
+.navds-body-long--small.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-6);
+}
+
+.navds-body-short {
+  font-size: var(--navds-font-size-large);
+  font-weight: var(--navds-font-weight-regular);
+  letter-spacing: 0;
+  line-height: var(--navds-font-line-height-large);
+  margin: 0;
+}
+
+.navds-body-short.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-3);
+}
+
+.navds-body-short--small {
+  font-size: var(--navds-font-size-medium);
+  letter-spacing: 0.002em;
+  line-height: var(--navds-font-line-height-medium);
+}
+
+.navds-body-short--small.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-2);
+}
+
+/* Label */
+.navds-label {
+  font-size: var(--navds-font-size-large);
+  font-weight: var(--navds-font-weight-bold);
+  letter-spacing: 0;
+  line-height: var(--navds-font-line-height-large);
+  margin: 0;
+}
+
+.navds-label.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-3);
+}
+
+.navds-label--small {
+  font-size: var(--navds-font-size-medium);
+  letter-spacing: 0.002em;
+  line-height: var(--navds-font-line-height-medium);
+}
+
+.navds-label--small.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-2);
+}
+
+/* Small text */
+.navds-detail {
+  font-size: var(--navds-font-size-small);
+  font-weight: var(--navds-font-weight-bold);
+  letter-spacing: 0.004em;
+  line-height: var(--navds-font-line-height-medium);
+  margin: 0;
+}
+
+.navds-detail.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-2);
+}
+
+.navds-detail--small {
+  font-weight: var(--navds-font-weight-regular);
+}
+
+.navds-detail--small.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-2);
+}

@navikt/core/icons/.gitignore

@@ -0,0 +1,2 @@
+/src
+/png

@navikt/core/icons/README.md

@@ -1,6 +1,6 @@
 # @navikt/ds-icons
 
-Denne pakken leverer [NAV sine ikoner](https://design.nav.no/resources/icons) i en pakke med React-komponenter og SVG er.
+Denne pakken leverer [NAVs ikoner](https://design.nav.no/resources/icons) i en pakke med React-komponenter og SVGer.
 
 ## Installering
 

@navikt/core/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "0.3.2",
+  "version": "0.5.6",
   "private": false,
   "description": "NAVs egne ikoner i SVG og React format",
   "repository": {
@@ -14,11 +14,10 @@
   ],
   "license": "MIT",
   "author": "NAV",
-  "main": "esm/index.js",
-  "module": "esm/index.js",
-  "typings": "esm/index.d.ts",
   "sideEffects": false,
-  "type": "module",
+  "main": "./cjs/index.js",
+  "module": "./esm/index.js",
+  "typings": "./esm/index.d.ts",
   "files": [
     "/cjs",
     "/esm",
@@ -26,25 +25,26 @@
     "/svg"
   ],
   "scripts": {
-    "cjs-package": "copyfiles -f config/package.json cjs",
-    "dl-icons": "FILE_KEY=UmEVH3pZ71uJPsSz9ilP3Y node --experimental-modules --es-module-specifier-resolution=node -r dotenv/config figma-api/index.js dotenv_config_path=figma-api/.env",
+    "create-package-json-pointers-to-esm": "node ../../../utilities/scripts/createPackageJsonsWithESMPointers.js",
+    "dl-icons": "FILE_KEY=UmEVH3pZ71uJPsSz9ilP3Y node --experimental-modules --es-module-specifier-resolution=node -r dotenv/config figma-api/index.mjs dotenv_config_path=figma-api/.env",
     "create-icons": "svgr --silent --typescript --ref --icon --title-prop --replace-attr-values \"#262626=currentColor\" -d src svg",
-    "convert-icons": "node figma-api/pngConverter.js",
-    "clean": "rm -rf src && rm -rf esm && rm -rf cjs && rm -rf png && rm -rf NAV-ikonpakke-png.zip && rm -rf NAV-ikonpakke-svg.zip",
-    "build": "npm run clean && npm run create-icons && tsc && tsc -p tsconfig-esm.json && yarn cjs-package && npm run convert-icons && node figma-api/zipIcons.js"
+    "convert-icons": "node figma-api/pngConverter.mjs",
+    "clean": "rimraf src png NAV-ikonpakke-png.zip NAV-ikonpakke-svg.zip",
+    "zip-icons": "node figma-api/zipIcons.mjs",
+    "build": "yarn clean && yarn create-icons && tsc && tsc -p tsconfig.esm.json && yarn create-package-json-pointers-to-esm && yarn run convert-icons && yarn zip-icons"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0"
   },
   "devDependencies": {
-    "@svgr/cli": "^5.4.0",
+    "@svgr/cli": "^5.5.0",
     "copyfiles": "^2.4.1",
-    "dotenv": "^8.2.0",
+    "dotenv": "^10.0.0",
     "lodash.kebabcase": "^4.1.1",
     "lodash.startcase": "4.4.0",
     "react": "^16.8.0 || ^17.0.0",
     "rimraf": "3.0.2",
-    "sharp": "0.27.1",
+    "sharp": "0.29.1",
     "zip-dir": "^2.0.0"
   }
 }

@navikt/core/icons/stories/icons.stories.mdx

@@ -0,0 +1,25 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="ds-icons/Kom i gang" />
+
+# Ta i bruk ikonpakken `@navikt/ds-icons`
+
+Alle ikoner kan bli funnet her https://design.nav.no/designsystem/resources/icons
+
+## Oppsett
+
+```bash
+yarn add @navikt/ds-icons
+```
+
+```jsx
+Import { Expand } from `@navikt/ds-icons`;
+
+<Expand
+	aria-label="Åpne meny"
+	role="img"
+	focusable="false"
+/>
+```
+
+Note: Det kan være tilfeller der oppsettet ditt ikke har støtte for SVG, og det må da legges til manuelt i eks en webpack config basert på hva som blir brukt.

@navikt/core/icons/svg/AddPerson.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 24V14H20V24H18Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 18L24 18L24 20L14 20L14 18Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 5C15 6.65685 13.6569 8 12 8C10.3431 8 9 6.65685 9 5C9 3.34315 10.3431 2 12 2C13.6569 2 15 3.34315 15 5ZM17 5C17 7.76142 14.7614 10 12 10C9.23858 10 7 7.76142 7 5C7 2.23858 9.23858 0 12 0C14.7614 0 17 2.23858 17 5ZM15.2322 14.185L16.8296 12.9329C15.5735 11.7353 13.8726 11 12 11C8.13401 11 5 14.134 5 18H7C7 15.2386 9.23858 13 12 13C13.2323 13 14.3606 13.4458 15.2322 14.185Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/AddPersonFilled.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 10C14.7614 10 17 7.76142 17 5C17 2.23858 14.7614 0 12 0C9.23858 0 7 2.23858 7 5C7 7.76142 9.23858 10 12 10ZM12 16H16L16 12.2547C14.8662 11.4638 13.4873 11 12 11C8.13401 11 5 14.134 5 18H12V16ZM18 18H14V20H18V24H20V20H24V18H20V14H18V18Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/AttachmentFilled.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M19.4858 7.11888C20.7324 5.94771 20.7324 4.04887 19.4858 2.87769C18.2838 1.74835 16.3616 1.70802 15.1081 2.75669L14.9716 2.87769L3.6862 13.4807L3.52649 13.6372C1.61004 15.5983 1.66328 18.6487 3.6862 20.5493C4.61095 21.4181 5.79143 21.9002 7 21.9956V22H24V24L7 24C5.24586 23.9013 3.52179 23.2223 2.18147 21.963C-0.666561 19.2872 -0.725895 14.9835 2.00347 12.2399L2.18147 12.0669L13.4669 1.46396C15.5445 -0.487988 18.913 -0.487988 20.9905 1.46396C23.0135 3.36455 23.0667 6.41493 21.1502 8.37603L20.9905 8.53261L9.7051 19.1356L9.56865 19.2566C8.31517 20.3053 6.39296 20.2649 5.19092 19.1356C3.98889 18.0062 3.94596 16.2003 5.06213 15.0226L5.19092 14.8944L16.4764 4.29142L17.9811 5.70515L6.69565 16.3081L6.61297 16.3953C6.28225 16.7877 6.30981 17.3593 6.69565 17.7219C7.08149 18.0844 7.68993 18.1103 8.10757 17.7995L8.20038 17.7219L19.4858 7.11888Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.4858 7.11888C20.7324 5.94771 20.7324 4.04887 19.4858 2.87769C18.2838 1.74835 16.3616 1.70802 15.1081 2.75669L14.9716 2.87769L3.6862 13.4807L3.52649 13.6372C1.61004 15.5983 1.66328 18.6487 3.6862 20.5493C4.61095 21.4181 5.79143 21.9002 7 21.9956V22H24V24L7 24C5.24586 23.9013 3.52179 23.2223 2.18147 21.963C-0.666561 19.2872 -0.725895 14.9835 2.00347 12.2399L2.18147 12.0669L13.4669 1.46396C15.5445 -0.487988 18.913 -0.487988 20.9905 1.46396C23.0135 3.36455 23.0667 6.41493 21.1503 8.37603L20.9905 8.53261L9.7051 19.1356L9.56865 19.2566C8.31517 20.3053 6.39296 20.2649 5.19092 19.1356C3.98889 18.0062 3.94596 16.2003 5.06214 15.0226L5.19092 14.8944L16.4764 4.29142L17.9811 5.70515L6.69565 16.3081L6.61297 16.3953C6.28225 16.7877 6.30981 17.3593 6.69565 17.7219C7.08149 18.0844 7.68993 18.1103 8.10757 17.7995L8.20038 17.7219L19.4858 7.11888Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/BagFilled.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 3H10C9.44772 3 9 3.44772 9 4V5H15V4C15 3.44772 14.5523 3 14 3ZM7 4V5H1C0.447715 5 0 5.44772 0 6V12C0 12.5523 0.447716 13 1 13H11V12C11 11.4477 11.4477 11 12 11C12.5523 11 13 11.4477 13 12V13H23C23.5523 13 24 12.5523 24 12V6C24 5.44772 23.5523 5 23 5H17V4C17 2.34315 15.6569 1 14 1H10C8.34315 1 7 2.34315 7 4ZM11 15V16C11 16.5523 11.4477 17 12 17C12.5523 17 13 16.5523 13 16V15H23V21C23 22.1046 22.1046 23 21 23H3C1.89543 23 1 22.1046 1 21V15H11Z" fill="#262626"/>
+</svg>