From 97f750811938f40b31ceda0d39d9c8a2db11fb51 Mon Sep 17 00:00:00 2001
From: amish1188 <martin.joodd@gmail.com>
Date: Fri, 3 Jul 2026 12:01:31 +0200
Subject: [PATCH 1/2] feat(nve-modal): opprette modal komponent, fjerne dialog
 komponent

---
 doc-site/components/Komponentoversikt.md      |   2 +-
 doc-site/components/nve-dialog.md             |  72 -----
 doc-site/components/nve-drawer.md             |   2 +-
 doc-site/components/nve-modal.md              | 248 ++++++++++++++++++
 doc-site/issues.json                          |   9 -
 doc-site/labels.json                          |   4 +-
 eslint.config.js                              |   2 +-
 .../nve-dialog/nve-dialog.component.ts        | 221 ----------------
 .../nve-dialog/nve-dialog.styles.ts           | 166 ------------
 src/components/nve-dialog/nve-dialog.test.ts  | 134 ----------
 .../nve-modal/nve-modal.component.ts          | 245 +++++++++++++++++
 src/components/nve-modal/nve-modal.styles.ts  | 129 +++++++++
 src/components/nve-modal/nve-modal.test.ts    |  89 +++++++
 src/nve-designsystem.ts                       |   3 +-
 14 files changed, 717 insertions(+), 609 deletions(-)
 delete mode 100644 doc-site/components/nve-dialog.md
 create mode 100644 doc-site/components/nve-modal.md
 delete mode 100644 src/components/nve-dialog/nve-dialog.component.ts
 delete mode 100644 src/components/nve-dialog/nve-dialog.styles.ts
 delete mode 100644 src/components/nve-dialog/nve-dialog.test.ts
 create mode 100644 src/components/nve-modal/nve-modal.component.ts
 create mode 100644 src/components/nve-modal/nve-modal.styles.ts
 create mode 100644 src/components/nve-modal/nve-modal.test.ts

diff --git a/doc-site/components/Komponentoversikt.md b/doc-site/components/Komponentoversikt.md
index 3836d2ed..c33f13ee 100644
--- a/doc-site/components/Komponentoversikt.md
+++ b/doc-site/components/Komponentoversikt.md
@@ -147,7 +147,7 @@ nodeId er ID til komponent-sida i Figma. Den ligger som en parameter i URL'en ti
     statusCode: 'Ikke påbegynt'
   },
   {
-    name: 'nve-dialog',
+    name: 'nve-modal',
     nodeId: undefined,
     description: undefined,
     statusDesign: undefined,
diff --git a/doc-site/components/nve-dialog.md b/doc-site/components/nve-dialog.md
deleted file mode 100644
index 9d98515c..00000000
--- a/doc-site/components/nve-dialog.md
+++ /dev/null
@@ -1,72 +0,0 @@
----
-layout: component
----
-
-Denne komponenten er basert på det native [`<dialog>`-elementet](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) og bruker `showModal()` for å vise dialogen. Det betyr at du får innebygd fokus-felle, Escape-lukking og tilgjengelighet uten ekstra avhengigheter.
-
-<CodeExamplePreview>
-
-```html
-<nve-button onclick="this.nextElementSibling.show()" class="open-dialog">Vis dialogen</nve-button>
-<nve-dialog label="Overskrift"> Innhold </nve-dialog>
-```
-
-</CodeExamplePreview>
-
-## Eksempler
-
-### Ikon foran label
-
-<CodeExamplePreview>
-
-```html
-<nve-button onclick="this.nextElementSibling.show()" class="open-dialog">Vis dialogen</nve-button>
-<nve-dialog label="Overskrift" icon="info"> Innhold </nve-dialog>
-```
-
-</CodeExamplePreview>
-
-### Label som eget spor
-
-Du kan legge overskriften inn et eget spor dersom du trenger mer kompleks styling eller struktur. Men merk at den fortsatt legges inn i en h2-tag
-
-<CodeExamplePreview>
-
-```html
-<nve-button onclick="this.nextElementSibling.show()" class="open-dialog">Vis dialogen</nve-button>
-<nve-dialog>
-  <div slot="label">Denne overskriften er i et eget spor</div>
-  Innhold
-</nve-dialog>
-```
-
-</CodeExamplePreview>
-
-### Knapper ved siden av lukk, og slot for footer
-
-Det er egne spor for å legge innhold ved siden av lukk-knapp og i bunnen av dialogboksen
-Sporet ved lukk-knapp skal kun brukes til enkle knapper, alt annet enn `nve-button` med enkelt `nve-icon` i seg vil ikke styles korrekt
-
-<CodeExamplePreview>
-
-```html
-<nve-button onclick="this.nextElementSibling.show()" class="open-dialog">Vis dialogen</nve-button>
-<nve-dialog label="Overskrift">
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan urna sit amet velit tempor accumsan. Interdum
-  et malesuada fames ac ante ipsum primis in faucibus. Vestibulum vel ipsum dolor. Nullam a molestie risus, eget
-  facilisis nisi. Phasellus eget faucibus mauris, in tincidunt mi. Curabitur urna tortor, semper vel facilisis vel,
-  aliquam a risus. Praesent eu sapien ornare, ultrices neque id, tincidunt metus.
-  <nve-button variant="ghost" onclick="() => {}" slot="header-actions">
-    <nve-icon name="warning" />
-  </nve-button>
-  <nve-button variant="ghost" onclick="() => {}" slot="header-actions">
-    <nve-icon name="open_in_new" />
-  </nve-button>
-  <div slot="footer">
-    <nve-button variant="primary" onclick="this.parentElement.parentElement.hide()">Ok</nve-button>
-    <nve-button disabled>Slett alt</nve-button>
-  </div>
-</nve-dialog>
-```
-
-</CodeExamplePreview>
diff --git a/doc-site/components/nve-drawer.md b/doc-site/components/nve-drawer.md
index 1d610c82..5c5d2bd2 100644
--- a/doc-site/components/nve-drawer.md
+++ b/doc-site/components/nve-drawer.md
@@ -46,7 +46,7 @@ Label slotten kan også brukes som et attributt på nve-drawer `<nve-drawer labe
     Lorem ipsum dolor sit amet
     <div slot="footer">Her er footer slot'en</div>
   </nve-drawer>
-  <nve-dialog id="dialog" label="Ett eksempel"> <p>Dette er et eksempel</p> </nve-dialog>
+  <nve-modal id="dialog" label="Ett eksempel"> <p>Dette er et eksempel</p> </nve-modal>
 </div>
 <script>
   const drawer = document.querySelector('.drawer-slot');
diff --git a/doc-site/components/nve-modal.md b/doc-site/components/nve-modal.md
new file mode 100644
index 00000000..539a79bb
--- /dev/null
+++ b/doc-site/components/nve-modal.md
@@ -0,0 +1,248 @@
+---
+layout: component
+outline: [2, 3]
+---
+
+<CodeExamplePreview>
+
+```html
+<nve-button onclick="this.nextElementSibling.show()">Vis modalen</nve-button>
+<nve-modal label="Overskrift"> Dette er en modal dialog. </nve-modal>
+```
+
+</CodeExamplePreview>
+
+## Retningslinjer
+
+- Bruk alltid `label` på `nve-modal`.
+  `label` brukes som modalens tilgjengelige navn og kobles til den native dialogen. Dette gjør at skjermlesere kan presentere modalen med en tydelig tittel.
+
+- Bruk modal kun når innholdet krever brukerens fulle oppmerksomhet.
+  En modal avbryter arbeidsflyten og gjør resten av siden utilgjengelig mens den er åpen. Den egner seg derfor best til viktige valg, bekreftelser, korte skjemaer eller informasjon brukeren må forholde seg til før hen kan gå videre.
+
+- Unngå å bruke modal til innhold som ikke blokkerer arbeidsflyten.
+  Hvis innholdet bare gir ekstra informasjon, forhåndsvisning eller sekundære valg, er det ofte bedre å bruke en mindre inngripende komponent.
+
+- Vurder nøye om modalen skal kunne lukkes ved klikk på bakgrunnen.
+  For enkle og ufarlige handlinger kan `closedBy="any"` være passende. For viktige handlinger, bekreftelser eller oppgaver der brukeren lett kan miste arbeid, bør du som regel bruke `closedBy="closerequest"` (som er standard) eller `closedBy="none"`.
+
+- La modalen være i DOM-en og åpne den med `show()`.
+  Ikke bruk `open` for å styre modalen. `nve-modal` bygger på native `<dialog>` og er laget for å åpnes programmatisk via `show()`, slik at du får riktig modal oppførsel, fokusflyt og backdrop fra nettleseren.
+
+- Sørg for at modalen alltid har en tydelig måte å lukkes på.
+  Brukeren bør alltid ha tilgang til en synlig lukkemekanisme, for eksempel lukkeknappen i toppen eller en avbryt-knapp i footer.
+
+- Hold innholdet kort og oppgaveorientert.
+  Modaler fungerer best når innholdet er tydelig, avgrenset og lett å fullføre. Hvis innholdet blir langt eller komplekst, kan en vanlig side eller en annen type visning være et bedre valg.
+
+- Tenk gjennom hvilket element som skal få fokus når modalen åpnes.
+  Standardfokus er ikke alltid det beste valget. Ved behov bør du bruke `autofocus` eller eksplisitt fokusplassering for å støtte arbeidsflyten og gjøre innholdet lettere å forstå.
+
+<nve-message-card variant="primary" label="Dialogoppførsel" size="compact">
+  <p>
+    <span class="highlight">nve-modal</span> bygger på det native
+    <span class="highlight">&lt;dialog&gt;</span>-elementet. <span class="highlight">show()</span>-metoden (som åpner <span class="highlight">nve-modal</span>) kaller native <span class="highlight">showModal()</span>, som gir dialogen modal oppførsel. Dette gjør at nettleseren
+    automatisk viser en backdrop bak dialogen og setter resten av siden som <span class="highlight">inert</span>.
+  </p>
+
+  <p>
+    Det betyr at brukeren ikke kan samhandle med noe annet på siden enn modalen (og nettleserens egne kontroller). I
+    tillegg låser
+    <span class="highlight">nve-modal</span> sidescrolling mens modalen er åpen, slik at brukeren ikke kan scrolle
+    innholdet som er satt til <span class="highlight">inert</span>.
+  </p>
+
+  <p>Følgende native dialog-attributter støttes:</p>
+
+  <ul>
+    <li><span class="highlight">closedBy</span></li>
+  </ul>
+
+  <p>Følgende native dialog-attributter støttes ikke:</p>
+
+  <ul>
+    <li>
+      <span class="highlight">open</span> – I henhold til HTML-spesifikasjonen bør dette attributtet ikke brukes til å
+      åpne eller lukke en modal dialog (<a href="https://html.spec.whatwg.org/multipage/interactive-elements.html#note-dialog-remove-open-attribute">lenke</a>). <span class="highlight">nve-modal</span> eksponerer
+      fortsatt en skrivebeskyttet <span class="highlight">open</span>-property, slik at utviklere kan lese om modalen er
+      åpen eller ikke (ved behov).
+    </li>
+    <li> <span class="highlight">returnValue</span> – den tilfører unødvendig kompleksitet, 
+     og våre bruksområder for dialoger har ikke behov for denne funksjonaliteten.</li>
+  </ul>
+
+  <p>Følgende native dialog-metoder støttes:</p>
+
+  <ul>
+    <li>
+      <span class="highlight">close()</span>
+      (<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/close">lenke</a>)
+    </li>
+    <li>
+      <span class="highlight">requestClose()</span>
+      (<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/requestClose">lenke</a>)
+    </li>
+    <li>
+      <span class="highlight">showModal()</span>(<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal">lenke</a>) eksponeres gjennom <span class="highlight">show()</span>
+    </li>
+
+  </ul>
+
+  <p>Følgende native dialog-hendelser støttes:</p>
+
+  <ul>
+    <li>
+      <span class="highlight">cancel</span>
+      (<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/cancel_event">lenke</a>)
+    </li>
+    <li>
+      <span class="highlight">close</span>
+      (<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/close_event">lenke</a>)
+    </li>
+
+  </ul>
+</nve-message-card>
+
+## Eksempler
+
+### Lukkemåte
+
+Bruk <span class="highlight">closedBy</span> for å velge hvordan modalen kan lukkes:
+
+- <span class="highlight">any</span> – tillater lukking ved klikk på bakgrunnen, <span class="highlight">Esc</span> og utviklerdefinerte lukkemekanismer (for eksempel en lukkeknapp).
+- <span class="highlight">closerequest</span> (standard) – tillater lukking med <span class="highlight">Esc</span> eller utviklerdefinerte lukkemekanismer, men ikke ved klikk på bakgrunnen.
+- <span class="highlight">none</span> – modalen kan kun lukkes ved en utviklerdefinert lukkemekanisme (for eksempel en lukkeknapp eller et kall til <span class="highlight">close()</span>).
+
+<CodeExamplePreview>
+
+```html
+<nve-button onclick="this.nextElementSibling.show()">Vis modalen</nve-button>
+<nve-modal label="Overskrift" closedBy="any"> Dette er en modal dialog. </nve-modal>
+```
+
+</CodeExamplePreview>
+
+### Størrelse
+
+Man kan velge mellom <span class="highlight">default</span> (som er standard og ikke trenger å skrives) eller <span class="highlight">compact</span>.
+
+<CodeExamplePreview>
+
+```html
+<nve-button onclick="this.nextElementSibling.show()">Vis kompakt modalen</nve-button>
+<nve-modal label="Overskrift" size="compact"> Dette er en modal dialog. </nve-modal>
+```
+
+</CodeExamplePreview>
+
+### Ikon foran label
+
+Bruk <span class="highlight">start-icon</span>-slottet for å vise et ikon foran ledeteksten.
+
+<CodeExamplePreview>
+
+```html
+<nve-button onclick="this.nextElementSibling.show()">Vis dialogen</nve-button>
+<nve-modal label="Overskrift">
+  <nve-icon name="info" slot="start-icon"></nve-icon>
+  Innhold
+</nve-modal>
+```
+
+</CodeExamplePreview>
+
+### Ikon bak label
+
+Bruk <span class="highlight">end-icon</span>-slottet for å vise et ikon bak ledeteksten.
+
+<CodeExamplePreview>
+
+```html
+<nve-button onclick="this.nextElementSibling.show()">Vis dialogen</nve-button>
+<nve-modal label="Overskrift">
+  <nve-icon name="info" slot="end-icon"></nve-icon>
+  Innhold
+</nve-modal>
+```
+
+</CodeExamplePreview>
+
+### Knapper i footer
+
+Det er egne spor for å legge innhold i bunnen av modalen.
+
+<CodeExamplePreview>
+
+```html
+<nve-button onclick="this.nextElementSibling.show()">Vis dialogen</nve-button>
+<nve-modal label="Overskrift">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan urna sit amet velit tempor accumsan. Interdum
+  et malesuada fames ac ante ipsum primis in faucibus. Vestibulum vel ipsum dolor. Nullam a molestie risus, eget
+  facilisis nisi. Phasellus eget faucibus mauris, in tincidunt mi. Curabitur urna tortor, semper vel facilisis vel,
+  aliquam a risus. Praesent eu sapien ornare, ultrices neque id, tincidunt metus.
+  <div slot="footer">
+    <nve-button variant="primary" onclick="this.parentElement.parentElement.hide()">Ok</nve-button>
+    <nve-button disabled>Slett alt</nve-button>
+  </div>
+</nve-modal>
+```
+
+</CodeExamplePreview>
+
+### Autofokus et interaktiv element i modalen
+
+Som standard settes fokus på det første fokuserbare elementet i modalen når den åpnes. I de fleste tilfeller vil dette være lukkeknappen.
+
+Noen ganger kan det være mer hensiktsmessig å sette fokus på et annet element, for eksempel en «OK»-knapp i en modal som bare viser ekstra informasjon eller leder brukeren videre til neste steg. I slike tilfeller kan du bruke <span class="highlight">autofocus</span> på elementet som skal få fokus først. Elementet må selv støtte <span class="highlight">autofocus</span>, noe de fleste HTML-elementer og våre webkomponenter gjør.
+
+<CodeExamplePreview>
+
+```html
+<nve-button onclick="this.nextElementSibling.show()">Vis dialogen</nve-button>
+<nve-modal label="Overskrift">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan urna sit amet velit tempor accumsan. Interdum
+  et malesuada fames ac ante ipsum primis in faucibus. Vestibulum vel ipsum dolor. Nullam a molestie risus, eget
+  facilisis nisi. Phasellus eget faucibus mauris, in tincidunt mi. Curabitur urna tortor, semper vel facilisis vel,
+  aliquam a risus. Praesent eu sapien ornare, ultrices neque id, tincidunt metus.
+  <div slot="footer">
+    <nve-button variant="primary" autofocus onclick="this.parentElement.parentElement.hide()">Ok</nve-button>
+  </div>
+</nve-modal>
+```
+
+</CodeExamplePreview>
+
+## Tilgjengelighet
+
+<span class="highlight">nve-modal</span> bruker det native modale <span class="highlight">&lt;dialog&gt;</span>-elementet og får derfor modal dialogoppførsel og tilhørende tilgjengelighetsegenskaper fra nettleseren.
+
+Alle modaler bør ha et synlig element med knapp-oppførsel som lukker modalen, for eksempel en lukkeknapp eller en avbryt-knapp. Derfor bør lukkeknappen som standard ikke fjernes.
+
+<span class="highlight">nve-modal</span> setter <span class="highlight">aria-labelledby</span> på det native modale <span class="highlight">&lt;dialog&gt;</span>-elementet og kobler dette til <span class="highlight">label</span>-propertyen i <span class="highlight">nve-modal</span>. Derfor er <span class="highlight">label</span> påkrevd.
+
+### Fokus
+
+Når modalen åpnes, flyttes fokus til et element inne i modalen. Som regel vil fokus settes på det første fokuserbare elementet, men det er ikke alltid det som gir best brukeropplevelse. Hvor fokus bør plasseres først, avhenger av innholdet og hva brukeren skal gjøre i modalen.
+
+<nve-message-card variant="warning" label="Fokus blir ikke låst inne i modalen!" size="compact">
+<p>Fokus blir ikke aktivt låst inne i modalen. Brukeren kan fortsatt flytte fokus til nettleserens egne kontroller, for eksempel faner, adressefelt eller navigasjonsknapper, mens modalen er åpen. Dette er i tråd med hvordan native modale <span class="highlight">&lt;dialog&gt;</span>-elementer fungerer, og vi forsøker derfor ikke å innføre en egen fokusfelle.</p>
+</nve-message-card>
+
+Hvis modalen inneholder mye tekst eller flere semantiske strukturer, som lister, tabeller eller flere avsnitt, kan det være bedre å sette fokus på et statisk element øverst i innholdet i stedet for på den første knappen. Da kan brukere av hjelpemidler lettere lese og forstå innholdet i riktig rekkefølge. I slike tilfeller kan du for eksempel bruke `tabindex="-1"` på overskriften eller første avsnitt og flytte fokus dit når modalen åpnes.
+
+Det samme gjelder hvis innholdet er så langt at starten av modalen kan forsvinne ut av syne dersom fokus settes direkte på det første interaktive elementet. Da kan det være mer hensiktsmessig å fokusere et statisk element øverst i modalen først.
+
+Hvis modalen brukes til en handling som er vanskelig å angre, som sletting av data eller bekreftelse av en viktig handling, kan det være lurt å sette fokus på det minst destruktive valget først, for eksempel en avbryt-knapp. Hvis modalen derimot bare gir ekstra informasjon eller lar brukeren gå videre i en prosess, kan det være mer hensiktsmessig å sette fokus på handlingen som oftest brukes, som en «OK»- eller «Fortsett»-knapp.
+
+Når modalen lukkes, returneres fokus som til elementet som åpnet den.
+
+[Du kan lese mer her](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/#:~:text=Closes%20the%20dialog.-,Note,-When%20a%20dialog).
+
+### Tastaturinteraksjon
+
+Når modalen åpnes, flyttes fokus inn i modalen. Hvilket element som får fokus først, avhenger av innholdet i modalen og om et element er merket med <span class="highlight">autofocus</span>.
+
+- <span class="highlight">Tab</span> flytter fokus til neste tabbable element i modalen.
+- Står fokus på det siste tabbable elementet, flyttes fokus tilbake til det første.
+- <span class="highlight">Shift</span> + <span class="highlight">Tab</span> flytter fokus til forrige tabbable element i modalen.
+- <span class="highlight">Escape</span> lukker modalen.
diff --git a/doc-site/issues.json b/doc-site/issues.json
index 87c80233..f8e89500 100644
--- a/doc-site/issues.json
+++ b/doc-site/issues.json
@@ -1624,15 +1624,6 @@
         "color": "e4e669",
         "default": true,
         "description": "This doesn't seem right"
-      },
-      {
-        "id": 7361073541,
-        "node_id": "LA_kwDOKWXiTc8AAAABtsERhQ",
-        "url": "https://api.github.com/repos/NVE/Designsystem/labels/nve-dialog",
-        "name": "nve-dialog",
-        "color": "DC6E99",
-        "default": false,
-        "description": ""
       }
     ],
     "state": "open",
diff --git a/doc-site/labels.json b/doc-site/labels.json
index eedb7082..9134bad3 100644
--- a/doc-site/labels.json
+++ b/doc-site/labels.json
@@ -101,8 +101,8 @@
   {
     "id": 7361073541,
     "node_id": "LA_kwDOKWXiTc8AAAABtsERhQ",
-    "url": "https://api.github.com/repos/NVE/Designsystem/labels/nve-dialog",
-    "name": "nve-dialog",
+    "url": "https://api.github.com/repos/NVE/Designsystem/labels/nve-modal",
+    "name": "nve-modal",
     "color": "DC6E99",
     "default": false,
     "description": ""
diff --git a/eslint.config.js b/eslint.config.js
index 4c320d8e..942359ac 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -52,7 +52,7 @@ export default [
 
       quotes: ['error', 'double'],
       semi: ['error', 'always'],
-      'no-console': 'error',
+      'no-console': ['error', { allow: ['warn', 'error'] }],
       'no-debugger': 'error',
 
       'max-lines-per-function': ['warn', { max: 80, skipBlankLines: true, skipComments: true }],
diff --git a/src/components/nve-dialog/nve-dialog.component.ts b/src/components/nve-dialog/nve-dialog.component.ts
deleted file mode 100644
index 1e0c2b14..00000000
--- a/src/components/nve-dialog/nve-dialog.component.ts
+++ /dev/null
@@ -1,221 +0,0 @@
-import { LitElement, html, nothing } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { INveComponent } from '@interfaces/NveComponent.interface';
-import '../nve-icon/nve-icon.component';
-import styles from './nve-dialog.styles';
-
-/**
- * En dialogboks som bruker native dialog-element.
- * Vil du ha ikon foran overskriften, bruk `icon`.
- * Skal det ikke være mulig å trykke utenfor for å lukke dialogen, bruk `disableBackground`.
- *
- * Bruker native dialog-API:
- * - `cancel`-event fra Escape-tasten (kan forhindres med `preventDefault()`)
- * - `close`-event når dialogen lukkes (fra `dialog.close()`)
- * - `showModal()` viser dialogen
- *
- * @slot label - teksten som skal vises i overskriften. Eller du kan bruke label-attributtet
- * @slot - hovedinnholdet (body)
- * @slot footer - feltet i bunnen hvor knappene er plassert
- * @slot header-actions - valgfrie handlinger i headeren
- *
- * @event cancel - Når brukeren trykker Escape. Kan forhindres med `preventDefault()`
- * @event close - Når dialogen lukkes (fra `dialog.close()`)
- *
- * @csspart base - Dialog-elementet
- * @csspart overlay - Overlegget bak dialogen
- * @csspart panel - Dialogens panel
- * @csspart header - Headeren
- * @csspart title - Tittelen
- * @csspart header-actions - Header handlinger
- * @csspart close-button - Lukk-knappen
- * @csspart body - Innhold
- * @csspart footer - Footer
- *
- * @cssproperty --width - Bredden på dialogen
- * @cssproperty --header-spacing - Padding for headeren
- * @cssproperty --body-spacing - Padding for innholdet
- * @cssproperty --footer-spacing - Padding for footeren
- */
-@customElement('nve-dialog')
-export default class NveDialog extends LitElement implements INveComponent {
-  @property({ reflect: true }) testId: string | undefined = undefined;
-  /** Ikonet som skal vises */
-  @property({ type: String, reflect: true }) icon = '';
-  /** Hvis denne er satt, kan man ikke trykke utenfor dialogen for å lukke den. */
-  @property({ type: Boolean, reflect: true }) disableBackground = false;
-  /** Om dialogen er åpen. Kan settes som attributt eller via show()/hide(). */
-  @property({ type: Boolean, reflect: true }) open = false;
-  /** Teksten i overskriften */
-  @property({ reflect: true }) label = '';
-  /** Skjuler headeren. Sørg for at label fortsatt er satt for tilgjengelighet. */
-  @property({ attribute: 'no-header', type: Boolean, reflect: true }) noHeader = false;
-
-  @query('dialog') private dialogEl!: HTMLDialogElement;
-  @query('.dialog__panel') private panelEl!: HTMLElement;
-  @query('.dialog__overlay') private overlayEl!: HTMLElement;
-
-  @state() private hasFooter = false;
-
-  private originalTrigger: HTMLElement | null = null;
-
-  firstUpdated() {
-    if (this.open) {
-      this.doOpen();
-    }
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this.dialogEl?.open) {
-      this.dialogEl.close();
-    }
-  }
-
-  updated(changedProperties: Map<PropertyKey, unknown>) {
-    super.updated(changedProperties);
-    if (changedProperties.has('open') && changedProperties.get('open') !== undefined) {
-      if (this.open) {
-        this.doOpen();
-      } else {
-        this.doClose();
-      }
-    }
-  }
-
-  /** Viser dialogen. */
-  async show() {
-    if (this.open) return;
-    this.open = true;
-  }
-
-  /** Skjuler dialogen. */
-  async hide() {
-    if (!this.open) return;
-    this.open = false;
-  }
-
-  private doOpen() {
-    if (!this.dialogEl || this.dialogEl.open) return;
-
-    this.originalTrigger = document.activeElement as HTMLElement;
-    this.dialogEl.showModal();
-
-    this.panelEl?.animate?.(
-      [
-        { opacity: 0, transform: 'scale(0.8)' },
-        { opacity: 1, transform: 'scale(1)' },
-      ],
-      { duration: 250, easing: 'ease', fill: 'forwards' }
-    );
-
-    this.overlayEl?.animate?.([{ opacity: 0 }, { opacity: 1 }], {
-      duration: 250,
-      easing: 'ease',
-      fill: 'forwards',
-    });
-  }
-
-  private async doClose() {
-    if (!this.dialogEl || !this.dialogEl.open) return;
-
-    const panelAnimation = this.panelEl?.animate?.(
-      [
-        { opacity: 1, transform: 'scale(1)' },
-        { opacity: 0, transform: 'scale(0.8)' },
-      ],
-      { duration: 250, easing: 'ease', fill: 'forwards' }
-    );
-
-    this.overlayEl?.animate?.([{ opacity: 1 }, { opacity: 0 }], {
-      duration: 250,
-      easing: 'ease',
-      fill: 'forwards',
-    });
-
-    if (panelAnimation) {
-      await panelAnimation.finished;
-    }
-
-    this.dialogEl.close();
-
-    if (typeof this.originalTrigger?.focus === 'function') {
-      setTimeout(() => this.originalTrigger!.focus());
-    }
-  }
-
-  /** Forhindrer native Escape-lukking slik at vi kan animere før lukking */
-  private handleCancel = (event: Event) => {
-    event.preventDefault();
-    this.hide();
-  };
-
-  /** Håndterer klikk på overlegget */
-  private handleOverlayClick = () => {
-    if (!this.disableBackground) {
-      this.hide();
-    }
-  };
-
-  private handleFooterSlotChange = (event: Event) => {
-    const slot = event.target as HTMLSlotElement;
-    this.hasFooter = slot.assignedNodes({ flatten: true }).length > 0;
-  };
-
-  private renderHeader() {
-    if (this.noHeader) return nothing;
-
-    return html`
-      <header part="header" class="dialog__header">
-        <h2 part="title" class="dialog__title" id="title">
-          ${this.icon ? html`<nve-icon name=${this.icon} class="dialog__title-icon"></nve-icon>` : nothing}
-          <slot name="label"> ${this.label.length > 0 ? this.label : String.fromCharCode(65279)} </slot>
-        </h2>
-        <div part="header-actions" class="dialog__header-actions">
-          <slot name="header-actions"></slot>
-          <button part="close-button" class="dialog__close" aria-label="Lukk" @click=${() => this.hide()}>
-            <nve-icon name="close"></nve-icon>
-          </button>
-        </div>
-      </header>
-    `;
-  }
-
-  render() {
-    return html`
-      <dialog
-        part="base"
-        class=${classMap({
-          dialog: true,
-          'dialog--has-footer': this.hasFooter,
-        })}
-        aria-label=${this.noHeader ? this.label : nothing}
-        aria-labelledby=${!this.noHeader ? 'title' : nothing}
-        @cancel=${this.handleCancel}
-      >
-        <div part="overlay" class="dialog__overlay" @click=${this.handleOverlayClick} tabindex="-1"></div>
-
-        <div part="panel" class="dialog__panel" tabindex="-1">
-          ${this.renderHeader()}
-
-          <div part="body" class="dialog__body" tabindex="-1">
-            <slot></slot>
-          </div>
-
-          <footer part="footer" class="dialog__footer">
-            <slot name="footer" @slotchange=${this.handleFooterSlotChange}></slot>
-          </footer>
-        </div>
-      </dialog>
-    `;
-  }
-
-  static styles = styles;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'nve-dialog': NveDialog;
-  }
-}
diff --git a/src/components/nve-dialog/nve-dialog.styles.ts b/src/components/nve-dialog/nve-dialog.styles.ts
deleted file mode 100644
index 39bb3858..00000000
--- a/src/components/nve-dialog/nve-dialog.styles.ts
+++ /dev/null
@@ -1,166 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  :host {
-    --header-spacing: var(--spacing-x-large, 2rem);
-    --body-spacing: var(--spacing-x-large, 2rem);
-    --footer-spacing: var(--spacing-x-large, 2rem);
-    --width: 40.625rem;
-    display: contents;
-  }
-
-  /* Native dialog reset */
-  dialog {
-    padding: 0;
-    border: none;
-    background: transparent;
-    max-width: 100%;
-    max-height: 100%;
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    overflow: visible;
-  }
-
-  /* Hide native backdrop - we use our own overlay */
-  dialog::backdrop {
-    background: transparent;
-  }
-
-  dialog[open] {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: fixed;
-    inset: 0;
-    overscroll-behavior: contain;
-  }
-
-  .dialog__overlay {
-    position: fixed;
-    inset: 0;
-    background-color: rgba(13, 13, 14, 0.4);
-  }
-
-  .dialog__panel {
-    position: relative;
-    z-index: 1;
-    display: flex;
-    flex-direction: column;
-    width: var(--width);
-    max-width: calc(100% - 2rem);
-    max-height: calc(100% - 2rem);
-    background-color: var(--color-neutrals-background-primary, #fff);
-    border-radius: var(--sl-border-radius-medium, 0.25rem);
-    box-shadow: var(--box-shadow-dropdown);
-  }
-
-  .dialog__panel:focus {
-    outline: none;
-  }
-
-  @media screen and (max-width: 420px) {
-    .dialog__panel {
-      max-height: 80vh;
-    }
-  }
-
-  .dialog__header {
-    flex: 0 0 auto;
-    display: flex;
-  }
-
-  .dialog__title {
-    flex: 1 1 auto;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    position: relative;
-    color: var(--color-neutrals-foreground-primary, #00131c);
-    font: var(--typography-heading-small);
-    line-height: 130%;
-    padding: var(--header-spacing);
-    margin: 0;
-  }
-
-  .dialog__title-icon {
-    flex-shrink: 0;
-  }
-
-  .dialog__header-actions {
-    flex-shrink: 0;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: end;
-    align-items: center;
-    gap: var(--sl-spacing-2x-small, 0.25rem);
-    padding: 0 var(--header-spacing);
-  }
-
-  .dialog__header-actions ::slotted(nve-button) {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    font-size: var(--sl-font-size-medium, 1rem);
-  }
-
-  .dialog__close {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    background: none;
-    cursor: pointer;
-    padding: 0.25rem;
-    color: var(--color-neutrals-foreground-primary, #00131c);
-    border-radius: var(--sl-border-radius-medium, 0.25rem);
-    font-size: 1.3rem;
-  }
-
-  .dialog__close:hover {
-    background-color: var(--color-neutrals-background-secondary, #f0f0f0);
-  }
-
-  .dialog__close:focus-visible {
-    outline: 2px solid var(--sl-focus-ring-color, #0066cc);
-    outline-offset: 2px;
-  }
-
-  .dialog__body {
-    flex: 1 1 auto;
-    display: block;
-    padding: 0 var(--body-spacing);
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-    color: var(--color-neutrals-foreground-primary, #00131c);
-    font: var(--typography-body-medium);
-    line-height: 150%;
-  }
-
-  .dialog__body:focus {
-    outline: none;
-  }
-
-  .dialog__footer {
-    flex: 0 0 auto;
-    display: flex;
-    text-align: left;
-    gap: 0.75rem;
-    padding: var(--footer-spacing);
-  }
-
-  .dialog:not(.dialog--has-footer) .dialog__footer {
-    display: none;
-  }
-
-  .dialog:not(.dialog--has-footer) .dialog__body {
-    padding-bottom: var(--body-spacing);
-  }
-
-  @media (forced-colors: active) {
-    .dialog__panel {
-      border: solid 1px var(--sl-color-neutral-0, #fff);
-    }
-  }
-`;
diff --git a/src/components/nve-dialog/nve-dialog.test.ts b/src/components/nve-dialog/nve-dialog.test.ts
deleted file mode 100644
index c9bc3bd5..00000000
--- a/src/components/nve-dialog/nve-dialog.test.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-import { describe, it, expect, afterAll } from 'vitest';
-import { fixture, fixtureCleanup } from '@open-wc/testing';
-import { html } from 'lit';
-import NveDialog from './nve-dialog.component';
-
-if (!customElements.get('nve-dialog')) {
-  customElements.define('nve-dialog', NveDialog);
-}
-
-const nextFrame = () => new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
-
-describe('nve-dialog', () => {
-  afterAll(() => fixtureCleanup());
-
-  it('has correct default properties', async () => {
-    const el = await fixture<NveDialog>(html`<nve-dialog></nve-dialog>`);
-    expect(el.open).toBe(false);
-    expect(el.label).toBe('');
-    expect(el.icon).toBe('');
-    expect(el.disableBackground).toBe(false);
-    expect(el.noHeader).toBe(false);
-  });
-
-  it('renders a native dialog element', async () => {
-    const el = await fixture<NveDialog>(html`<nve-dialog label="Test"></nve-dialog>`);
-    const dialog = el.shadowRoot?.querySelector('dialog');
-    expect(dialog).toBeTruthy();
-  });
-
-  it('renders header with label', async () => {
-    const el = await fixture<NveDialog>(html`<nve-dialog label="Overskrift"></nve-dialog>`);
-    const title = el.shadowRoot?.querySelector('.dialog__title');
-    expect(title?.textContent?.trim()).toBe('Overskrift');
-  });
-
-  it('hides header when no-header is set', async () => {
-    const el = await fixture<NveDialog>(html`<nve-dialog no-header label="Hidden"></nve-dialog>`);
-    const header = el.shadowRoot?.querySelector('.dialog__header');
-    expect(header).toBeNull();
-  });
-
-  it('renders close button with nve-icon', async () => {
-    const el = await fixture<NveDialog>(html`<nve-dialog label="Test"></nve-dialog>`);
-    const closeButton = el.shadowRoot?.querySelector('.dialog__close');
-    expect(closeButton).toBeTruthy();
-    const icon = closeButton?.querySelector('nve-icon');
-    expect(icon).toBeTruthy();
-    expect(icon?.getAttribute('name')).toBe('close');
-  });
-
-  it('opens dialog via show() method', async () => {
-    const el = await fixture<NveDialog>(html`<nve-dialog label="Test"></nve-dialog>`);
-    await el.show();
-    await nextFrame();
-    expect(el.open).toBe(true);
-    const dialog = el.shadowRoot?.querySelector('dialog') as HTMLDialogElement;
-    expect(dialog?.open).toBe(true);
-  });
-
-  it('closes dialog via hide() method', async () => {
-    const el = await fixture<NveDialog>(html`<nve-dialog label="Test"></nve-dialog>`);
-    await el.show();
-    await nextFrame();
-    await el.hide();
-    // Wait for close animation
-    await new Promise((r) => setTimeout(r, 300));
-    expect(el.open).toBe(false);
-  });
-
-  it('closes dialog when close button is clicked', async () => {
-    const el = await fixture<NveDialog>(html`<nve-dialog label="Test"></nve-dialog>`);
-    await el.show();
-    await nextFrame();
-    const closeButton = el.shadowRoot?.querySelector('.dialog__close') as HTMLElement;
-    closeButton?.click();
-    await new Promise((r) => setTimeout(r, 300));
-    expect(el.open).toBe(false);
-  });
-
-  it('prevents overlay close when disableBackground is set', async () => {
-    const el = await fixture<NveDialog>(html`<nve-dialog label="Test" disableBackground></nve-dialog>`);
-    await el.show();
-    await nextFrame();
-    const overlay = el.shadowRoot?.querySelector('.dialog__overlay') as HTMLElement;
-    overlay?.click();
-    await nextFrame();
-    expect(el.open).toBe(true);
-  });
-
-  it('closes on overlay click when disableBackground is not set', async () => {
-    const el = await fixture<NveDialog>(html`<nve-dialog label="Test"></nve-dialog>`);
-    await el.show();
-    await nextFrame();
-    const overlay = el.shadowRoot?.querySelector('.dialog__overlay') as HTMLElement;
-    overlay?.click();
-    await new Promise((r) => setTimeout(r, 300));
-    expect(el.open).toBe(false);
-  });
-
-  it('renders slotted footer content', async () => {
-    const el = await fixture<NveDialog>(html`
-      <nve-dialog label="Test">
-        <div slot="footer">Footer content</div>
-      </nve-dialog>
-    `);
-    const footer = el.shadowRoot?.querySelector('.dialog__footer');
-    expect(footer).toBeTruthy();
-  });
-
-  it('sets aria-labelledby when header is visible', async () => {
-    const el = await fixture<NveDialog>(html`<nve-dialog label="Test"></nve-dialog>`);
-    const dialog = el.shadowRoot?.querySelector('dialog');
-    expect(dialog?.getAttribute('aria-labelledby')).toBe('title');
-  });
-
-  it('sets aria-label when no-header is used', async () => {
-    const el = await fixture<NveDialog>(html`<nve-dialog no-header label="Hidden label"></nve-dialog>`);
-    const dialog = el.shadowRoot?.querySelector('dialog');
-    expect(dialog?.getAttribute('aria-label')).toBe('Hidden label');
-  });
-
-  it('renders icon in title when icon property is set', async () => {
-    const el = await fixture<NveDialog>(html`<nve-dialog label="Test" icon="info"></nve-dialog>`);
-    const icon = el.shadowRoot?.querySelector('.dialog__title-icon');
-    expect(icon).toBeTruthy();
-    expect(icon?.getAttribute('name')).toBe('info');
-  });
-
-  it('does not render icon in title when icon property is empty', async () => {
-    const el = await fixture<NveDialog>(html`<nve-dialog label="Test"></nve-dialog>`);
-    const icon = el.shadowRoot?.querySelector('.dialog__title-icon');
-    expect(icon).toBeNull();
-  });
-});
diff --git a/src/components/nve-modal/nve-modal.component.ts b/src/components/nve-modal/nve-modal.component.ts
new file mode 100644
index 00000000..8864f0d7
--- /dev/null
+++ b/src/components/nve-modal/nve-modal.component.ts
@@ -0,0 +1,245 @@
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { INveComponent } from '@interfaces/NveComponent.interface';
+import '../nve-button/nve-button.component';
+import styles from './nve-modal.styles';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+let openModalCount = 0; // Teller hvor mange modaler som er åpne. Hvis det er mer enn 0, skal vi låse scrollingen på siden.
+let scrollY = 0; // Lagrer den opprinnelige scrollposisjonen på siden før vi låser scrollingen. Når modalen lukkes, skal vi rulle tilbake til denne posisjonen.
+
+/**
+ * Låser siden for scrolling når en modal er åpen.
+ */
+function lockPageScroll() {
+  if (openModalCount++ > 0) return;
+
+  scrollY = window.scrollY;
+
+  document.body.style.position = 'fixed';
+  document.body.style.top = `-${scrollY}px`;
+  document.body.style.left = '0';
+  document.body.style.right = '0';
+  document.body.style.width = '100%';
+}
+
+/**
+ * Låser opp siden for scrolling når alle modaler er lukket.
+ */
+function unlockPageScroll() {
+  if (--openModalCount > 0) return;
+
+  document.body.style.position = '';
+  document.body.style.top = '';
+  document.body.style.left = '';
+  document.body.style.right = '';
+  document.body.style.width = '';
+
+  window.scrollTo(0, scrollY);
+}
+
+/**
+ * En modal dialog for å vise viktig innhold eller handlinger som krever brukerens oppmerksomhet.
+ * Kan brukes til bekreftelser, skjemaer, ekstra informasjon eller andre oppgaver som skal løses
+ * før brukeren går videre.
+ *
+ * Komponenten bruker det native `<dialog>`-elementet med `showModal()`, låser siden mens den er åpen
+ * og viser et backdrop bak innholdet.
+ *
+ * @slot - hovedinnholdet (body)
+ * @slot end-icon - ikon etter overskriften
+ * @slot start-icon - ikon foran overskriften
+ * @slot footer - feltet i bunnen hvor knappene er plassert
+ * @slot header-actions - valgfrie handlinger i headeren
+ *
+ * @event cancel - Når brukeren trykker Escape. Kan forhindres med `preventDefault()`
+ * @event close - Når dialogen lukkes (fra `dialog.close()`)
+ *
+ * @csspart base - Dialog-elementet
+ * @csspart overlay - Overlegget bak dialogen - den skal ikke styles
+ * @csspart panel - Dialogens panel
+ * @csspart header - Headeren
+ * @csspart title - Tittelen
+ * @csspart header-actions - Header handlinger
+ * @csspart close-button - Lukk-knappen
+ * @csspart body - Innhold
+ * @csspart footer - Footer
+ *
+ * @dependency nve-button
+ */
+@customElement('nve-modal')
+export default class NveModal extends LitElement implements INveComponent {
+  @property({ type: String }) testId: string | undefined = undefined;
+  /** Teksten i overskriften. Den er påkrevd */
+  @property({ type: String }) label: string = '';
+  /** Bestemmer hvordan modalen kan lukkes. Standard er 'closerequest' som er satt opp når modalen åpnes */
+  @property({ type: String }) closedBy?: 'any' | 'none' | 'closerequest' = undefined;
+  /** Sett størrelse på kortet */
+  @property({ type: String }) size: 'default' | 'compact' = 'default';
+  @query('.modal') private dialogEl!: HTMLDialogElement;
+  /** Om dialogen har en footer */
+  @state() private hasFooter = false;
+
+  static styles = styles;
+
+  /** Den skal ikke være en property fordi det ikke er anbefalt å åpne modalen med open-property lenger. */
+  @state() private _open = false;
+
+  /** Om modalen er åpen. Kun lesbar. */
+  get open(): boolean {
+    return this._open;
+  }
+
+  private setOpenState(isOpen: boolean) {
+    this._open = isOpen;
+    this.toggleAttribute('open', isOpen);
+  }
+
+  firstUpdated() {
+    if (!this.label) {
+      console.warn(
+        'Accessibility warning: nve-modal should have a label for screen readers. Set the label attribute or add a slot="label".'
+      );
+    }
+  }
+
+  disconnectedCallback() {
+    if (this.dialogEl?.open) {
+      this.dialogEl.close();
+    }
+    super.disconnectedCallback();
+  }
+  /** Viser dialogen */
+  async show() {
+    this.dialogEl.showModal();
+    this.setOpenState(true);
+    lockPageScroll();
+    await this.focusAutofocusTarget();
+  }
+
+  /**
+   * Modalen fokuserer vanligvis det første elementet med `autofocus`, men det kan være vanskelig med webkomponenter, siden de:
+   * kjører `autofocus` første gang de dukker opp i DOM-en, og da er ikke modalen åpen ennå.
+   * derfor venter vi til modalen er åpen og kjører `autofocus` på nytt.
+   */
+  private async focusAutofocusTarget() {
+    await this.updateComplete;
+
+    await new Promise<void>((resolve) => {
+      requestAnimationFrame(() => resolve());
+    });
+
+    const autofocusTarget = this.querySelector<HTMLElement>('[autofocus]');
+    if (!autofocusTarget) {
+      return;
+    }
+
+    autofocusTarget.focus();
+  }
+
+  /** Skjuler dialogen. */
+  async close() {
+    this.closeWithAnimation();
+  }
+
+  /**
+   * Sender en forespørsel om å lukke dialogen.
+   * Emitter cancel-eventet for å indikere at lukking er forespurt og close-eventet når dialogen faktisk lukkes.
+   */
+  async requestClose() {
+    this.dialogEl.requestClose();
+  }
+
+  /** Lukker dialogen med en animasjon. */
+  private async closeWithAnimation() {
+    if (!this.dialogEl || !this.dialogEl.open) return;
+
+    this.dialogEl.classList.add('modal--closing');
+
+    await new Promise((resolve) => setTimeout(resolve, 250));
+
+    this.dialogEl.classList.remove('modal--closing');
+    this.dialogEl.close();
+    this.setOpenState(false);
+    unlockPageScroll();
+  }
+
+  /** Håndterer endringer i footer-slotten for å oppdatere hasFooter-tilstanden. */
+  private handleFooterSlotChange = (event: Event) => {
+    const slot = event.target as HTMLSlotElement;
+    this.hasFooter = slot.assignedNodes({ flatten: true }).length > 0;
+  };
+
+  /** Håndterer cancel-eventet fra dialogen. Emitter cancel-eventet videre for å indikere at lukking er forespurt. */
+  private handleCancel = (event: Event) => {
+    event.preventDefault(); // Forhindre at dialogen lukkes
+    this.closeWithAnimation();
+    this.dispatchEvent(new CustomEvent('cancel', { bubbles: true, composed: true }));
+  };
+
+  /** Håndterer close-eventet fra dialogen. Emitter close-eventet videre for å indikere at dialogen faktisk er lukket. */
+  private handleClose = () => {
+    this.setOpenState(false);
+    this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));
+  };
+
+  private renderHeader() {
+    return html`
+      <header part="header" class="modal__header">
+        <slot name="start-icon"></slot>
+        ${this.label.length > 0 ? html`<h2 part="title" id="title" class="modal__title">${this.label}</h2>` : nothing}
+        <div part="header-actions" class="modal__header-actions">
+          <slot name="end-icon"></slot>
+          <nve-button variant="ghost" @click=${this.close} part="close-button" aria-label="Lukk modalen">
+            <nve-icon name="close"></nve-icon>
+          </nve-button>
+        </div>
+      </header>
+    `;
+  }
+
+  /* 
+  If a dialog contains the final step in a process that is not easily reversible, such as deleting data or completing a financial transaction, it may be advisable to set focus on the least destructive action, especially if undoing the action is difficult or impossible. The Alert Dialog Pattern is often employed in such circumstances.
+  */
+  render() {
+    return html`
+      <dialog
+        part="base"
+        class=${classMap({
+          modal: true,
+          'modal--has-footer': this.hasFooter,
+        })}
+        closedby=${ifDefined(this.closedBy)}
+        aria-labelledby="title"
+        @cancel=${this.handleCancel}
+        @close=${this.handleClose}
+      >
+        <div
+          part="panel"
+          class=${classMap({
+            modal__panel: true,
+            'modal__panel--default': this.size === 'default',
+            'modal__panel--compact': this.size === 'compact',
+          })}
+        >
+          ${this.renderHeader()}
+
+          <div part="body" class="modal__body">
+            <slot></slot>
+          </div>
+
+          <footer part="footer" class="modal__footer">
+            <slot name="footer" @slotchange=${this.handleFooterSlotChange}></slot>
+          </footer>
+        </div>
+      </dialog>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nve-modal': NveModal;
+  }
+}
diff --git a/src/components/nve-modal/nve-modal.styles.ts b/src/components/nve-modal/nve-modal.styles.ts
new file mode 100644
index 00000000..886369c8
--- /dev/null
+++ b/src/components/nve-modal/nve-modal.styles.ts
@@ -0,0 +1,129 @@
+import { css } from 'lit';
+
+export default css`
+  /* Native dialog reset */
+  .modal {
+    padding: 0;
+    border-radius: var(--border-radius-small);
+    background: var(--color-neutrals-background-primary);
+    border: none;
+    width: clamp(400px, 50vw, 700px);
+    transform: scale(0.8);
+    opacity: 0;
+    outline: none;
+  }
+
+  .modal[open] {
+    animation: modal-in 250ms ease forwards;
+  }
+
+  .modal.modal--closing {
+    animation: modal-out 250ms ease forwards;
+  }
+
+  .modal::backdrop {
+    background-color: rgba(13, 13, 14, 0.4);
+    transition: background-color 250ms ease;
+  }
+
+  .modal.modal--closing::backdrop {
+    background-color: rgba(13, 13, 14, 0);
+  }
+
+  .modal__panel {
+    display: flex;
+    flex-direction: column;
+
+    padding: var(--spacing-large);
+    overflow: auto;
+  }
+
+  .modal__panel--default {
+    gap: var(--spacing-x-large, 32px);
+  }
+
+  .modal__panel--compact {
+    gap: var(--spacing-2x-small, 32px);
+  }
+
+  @media screen and (max-width: 420px) {
+    .modal {
+      width: clamp(300px, 50vw, 400px);
+    }
+    .modal__panel {
+      max-height: 80vh;
+    }
+  }
+
+  .modal__header {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-x-small);
+    h2 {
+      font: var(--typography-heading-small);
+      margin: 0;
+    }
+  }
+
+  .modal__title-icon {
+    flex-shrink: 0;
+  }
+
+  .modal__header-actions {
+    display: flex;
+    margin-left: auto;
+    align-items: center;
+    gap: var(--spacing-x-small);
+  }
+
+  .modal__header-actions ::slotted(nve-button) {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    font-size: var(--sl-font-size-medium, 1rem);
+  }
+
+  .modal__body {
+    font: var(--typography-body-medium);
+  }
+
+  .modal__footer {
+    display: flex;
+    gap: 0.75rem;
+  }
+
+  .modal:not(.modal--has-footer) .modal__footer {
+    display: none;
+  }
+
+  @keyframes modal-in {
+    from {
+      opacity: 0;
+      transform: scale(0.8);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes modal-out {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: scale(0.8);
+    }
+  }
+
+  @keyframes backdrop-in {
+    from {
+      background-color: rgba(13, 13, 14, 0);
+    }
+    to {
+      background-color: rgba(13, 13, 14, 0.4);
+    }
+  }
+`;
diff --git a/src/components/nve-modal/nve-modal.test.ts b/src/components/nve-modal/nve-modal.test.ts
new file mode 100644
index 00000000..62164dfd
--- /dev/null
+++ b/src/components/nve-modal/nve-modal.test.ts
@@ -0,0 +1,89 @@
+import { describe, it, expect, afterAll } from 'vitest';
+import { fixture, fixtureCleanup } from '@open-wc/testing';
+import { html } from 'lit';
+import NveModal from './nve-modal.component';
+
+if (!customElements.get('nve-modal')) {
+  customElements.define('nve-modal', NveModal);
+}
+
+const nextFrame = () => new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+
+describe('nve-modal', () => {
+  afterAll(() => fixtureCleanup());
+
+  it('renders a native dialog element', async () => {
+    const el = await fixture<NveModal>(html`<nve-modal label="Test"></nve-modal>`);
+    const dialog = el.shadowRoot?.querySelector('dialog');
+    expect(dialog).toBeTruthy();
+  });
+
+  it('renders header with label', async () => {
+    const el = await fixture<NveModal>(html`<nve-modal label="Overskrift"></nve-modal>`);
+    const title = el.shadowRoot?.querySelector('.modal__title');
+    expect(title?.textContent?.trim()).toBe('Overskrift');
+  });
+
+  it('sets property open when show() is called', async () => {
+    const el = await fixture<NveModal>(html`<nve-modal label="Test"></nve-modal>`);
+    await el.show();
+    await nextFrame();
+    expect(el.open).toBe(true);
+    const dialog = el.shadowRoot?.querySelector('dialog') as HTMLDialogElement;
+    expect(dialog?.open).toBe(true);
+  });
+
+  it('sets property open to false when close() is called', async () => {
+    const el = await fixture<NveModal>(html`<nve-modal label="Test"></nve-modal>`);
+    await el.show();
+    await nextFrame();
+    await el.close();
+    // Wait for close animation
+    await new Promise((r) => setTimeout(r, 300));
+    expect(el.open).toBe(false);
+  });
+
+  it('closes modal when close button is clicked', async () => {
+    const el = await fixture<NveModal>(html`<nve-modal label="Test"></nve-modal>`);
+    await el.show();
+    await nextFrame();
+    const closeButton = el.shadowRoot?.querySelector('[part="close-button"]') as HTMLElement;
+    closeButton?.click();
+    // Wait for close animation
+    await new Promise((r) => setTimeout(r, 300));
+    expect(el.open).toBe(false);
+  });
+
+  it('renders slotted footer content', async () => {
+    const el = await fixture<NveModal>(html`
+      <nve-modal label="Test">
+        <div slot="footer">Footer content</div>
+      </nve-modal>
+    `);
+    const footer = el.shadowRoot?.querySelector('.modal__footer');
+    expect(footer).toBeTruthy();
+  });
+
+  it('sets aria-labelledby', async () => {
+    const el = await fixture<NveModal>(html`<nve-modal label="Test"></nve-modal>`);
+    const dialog = el.shadowRoot?.querySelector('dialog');
+    expect(dialog?.getAttribute('aria-labelledby')).toBe('title');
+  });
+
+  it('dispatches close event when close() is called', async () => {
+    const el = await fixture<NveModal>(html`<nve-modal label="Test"></nve-modal>`);
+    await el.show();
+    await nextFrame();
+
+    const closeEventPromise = new Promise<Event>((resolve) => {
+      el.addEventListener('close', resolve, { once: true });
+    });
+
+    await el.close();
+
+    const closeEvent = await closeEventPromise;
+
+    expect(closeEvent).toBeTruthy();
+    expect(el.open).toBe(false);
+  });
+});
diff --git a/src/nve-designsystem.ts b/src/nve-designsystem.ts
index db933f8f..53dfbc67 100644
--- a/src/nve-designsystem.ts
+++ b/src/nve-designsystem.ts
@@ -1,6 +1,5 @@
 /** Alle komponenter som er tilgjengelige, i alfabetisk rekkefølge. */
 /** Denne filen blir genererert av pnpm run add-component */
-
 export { default as NveAccordion } from './components/nve-accordion/nve-accordion.component';
 export { default as NveAccordionItem } from './components/nve-accordion-item/nve-accordion-item.component';
 export { default as NveAlert } from './components/nve-alert/nve-alert.component';
@@ -14,7 +13,6 @@ export { default as NveCheckbox } from './components/nve-checkbox/nve-checkbox.c
 export { default as NveCheckboxGroup } from './components/nve-checkbox-group/nve-checkbox-group.component';
 export { default as NveCombobox } from './components/nve-combobox/nve-combobox.component';
 export { default as NveDarkmodeSwitch } from './components/nve-darkmode-switch/nve-darkmode-switch.component';
-export { default as NveDialog } from './components/nve-dialog/nve-dialog.component';
 export { default as NveDivider } from './components/nve-divider/nve-divider.component';
 export { default as NveDrawer } from './components/nve-drawer/nve-drawer.component';
 export { default as NveDropdown } from './components/nve-dropdown/nve-dropdown.component';
@@ -27,6 +25,7 @@ export { default as NveLinkCard } from './components/nve-link-card/nve-link-card
 export { default as NveMenu } from './components/nve-menu/nve-menu.component';
 export { default as NveMenuItem } from './components/nve-menu-item/nve-menu-item.component';
 export { default as NveMessageCard } from './components/nve-message-card/nve-message-card.component';
+export { default as NveModal } from './components/nve-modal/nve-modal.component';
 export { default as NveNavigationCard } from './components/nve-navigation-card/nve-navigation-card.component';
 export { default as NveOption } from './components/nve-option/nve-option.component';
 export { default as NveParagraph } from './components/nve-paragraph/nve-paragraph.component';

From 08dc124a0b1c692f182cafdc49426a9e477d26b3 Mon Sep 17 00:00:00 2001
From: amish1188 <martin.joodd@gmail.com>
Date: Fri, 3 Jul 2026 14:11:46 +0200
Subject: [PATCH 2/2] pr updates #1

---
 doc-site/components/nve-modal.md              | 18 +++++-----
 .../nve-modal/nve-modal.component.ts          | 34 +++++++++----------
 2 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/doc-site/components/nve-modal.md b/doc-site/components/nve-modal.md
index 539a79bb..b26be285 100644
--- a/doc-site/components/nve-modal.md
+++ b/doc-site/components/nve-modal.md
@@ -52,13 +52,13 @@ outline: [2, 3]
     innholdet som er satt til <span class="highlight">inert</span>.
   </p>
 
-  <p>Følgende native dialog-attributter støttes:</p>
+  <p><b>Følgende native dialog-attributter støttes:</b></p>
 
   <ul>
     <li><span class="highlight">closedBy</span></li>
   </ul>
 
-  <p>Følgende native dialog-attributter støttes ikke:</p>
+  <p><b>Følgende native dialog-attributter støttes ikke:</b></p>
 
   <ul>
     <li>
@@ -71,7 +71,7 @@ outline: [2, 3]
      og våre bruksområder for dialoger har ikke behov for denne funksjonaliteten.</li>
   </ul>
 
-  <p>Følgende native dialog-metoder støttes:</p>
+  <p><b>Følgende native dialog-metoder støttes:</b></p>
 
   <ul>
     <li>
@@ -88,7 +88,7 @@ outline: [2, 3]
 
   </ul>
 
-  <p>Følgende native dialog-hendelser støttes:</p>
+  <p><b>Følgende native dialog-hendelser støttes:</b></p>
 
   <ul>
     <li>
@@ -129,7 +129,7 @@ Man kan velge mellom <span class="highlight">default</span> (som er standard og
 <CodeExamplePreview>
 
 ```html
-<nve-button onclick="this.nextElementSibling.show()">Vis kompakt modalen</nve-button>
+<nve-button onclick="this.nextElementSibling.show()">Vis kompakt modal</nve-button>
 <nve-modal label="Overskrift" size="compact"> Dette er en modal dialog. </nve-modal>
 ```
 
@@ -181,7 +181,7 @@ Det er egne spor for å legge innhold i bunnen av modalen.
   facilisis nisi. Phasellus eget faucibus mauris, in tincidunt mi. Curabitur urna tortor, semper vel facilisis vel,
   aliquam a risus. Praesent eu sapien ornare, ultrices neque id, tincidunt metus.
   <div slot="footer">
-    <nve-button variant="primary" onclick="this.parentElement.parentElement.hide()">Ok</nve-button>
+    <nve-button variant="primary" onclick="this.parentElement.parentElement.close()">Ok</nve-button>
     <nve-button disabled>Slett alt</nve-button>
   </div>
 </nve-modal>
@@ -189,7 +189,7 @@ Det er egne spor for å legge innhold i bunnen av modalen.
 
 </CodeExamplePreview>
 
-### Autofokus et interaktiv element i modalen
+### Autofokus på et interaktivt element i modalen
 
 Som standard settes fokus på det første fokuserbare elementet i modalen når den åpnes. I de fleste tilfeller vil dette være lukkeknappen.
 
@@ -205,7 +205,7 @@ Noen ganger kan det være mer hensiktsmessig å sette fokus på et annet element
   facilisis nisi. Phasellus eget faucibus mauris, in tincidunt mi. Curabitur urna tortor, semper vel facilisis vel,
   aliquam a risus. Praesent eu sapien ornare, ultrices neque id, tincidunt metus.
   <div slot="footer">
-    <nve-button variant="primary" autofocus onclick="this.parentElement.parentElement.hide()">Ok</nve-button>
+    <nve-button variant="primary" autofocus onclick="this.parentElement.parentElement.close()">Ok</nve-button>
   </div>
 </nve-modal>
 ```
@@ -234,7 +234,7 @@ Det samme gjelder hvis innholdet er så langt at starten av modalen kan forsvinn
 
 Hvis modalen brukes til en handling som er vanskelig å angre, som sletting av data eller bekreftelse av en viktig handling, kan det være lurt å sette fokus på det minst destruktive valget først, for eksempel en avbryt-knapp. Hvis modalen derimot bare gir ekstra informasjon eller lar brukeren gå videre i en prosess, kan det være mer hensiktsmessig å sette fokus på handlingen som oftest brukes, som en «OK»- eller «Fortsett»-knapp.
 
-Når modalen lukkes, returneres fokus som til elementet som åpnet den.
+Når modalen lukkes, returneres fokus til elementet som åpnet den.
 
 [Du kan lese mer her](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/#:~:text=Closes%20the%20dialog.-,Note,-When%20a%20dialog).
 
diff --git a/src/components/nve-modal/nve-modal.component.ts b/src/components/nve-modal/nve-modal.component.ts
index 8864f0d7..e1cde08e 100644
--- a/src/components/nve-modal/nve-modal.component.ts
+++ b/src/components/nve-modal/nve-modal.component.ts
@@ -44,27 +44,27 @@ function unlockPageScroll() {
  * Kan brukes til bekreftelser, skjemaer, ekstra informasjon eller andre oppgaver som skal løses
  * før brukeren går videre.
  *
- * Komponenten bruker det native `<dialog>`-elementet med `showModal()`, låser siden mens den er åpen
+ * Komponenten bruker det native dialog-elementet med showModal(), låser siden mens den er åpen
  * og viser et backdrop bak innholdet.
  *
- * @slot - hovedinnholdet (body)
- * @slot end-icon - ikon etter overskriften
- * @slot start-icon - ikon foran overskriften
- * @slot footer - feltet i bunnen hvor knappene er plassert
- * @slot header-actions - valgfrie handlinger i headeren
+ * @slot  hovedinnholdet (body)
+ * @slot end-icon  ikon etter overskriften
+ * @slot start-icon  ikon foran overskriften
+ * @slot footer  feltet i bunnen hvor knappene er plassert
+ * @slot header-actions  valgfrie handlinger i headeren
  *
- * @event cancel - Når brukeren trykker Escape. Kan forhindres med `preventDefault()`
- * @event close - Når dialogen lukkes (fra `dialog.close()`)
+ * @event cancel  Når brukeren trykker Escape. Kan forhindres med `preventDefault()`
+ * @event close  Når dialogen lukkes (fra `dialog.close()`)
  *
- * @csspart base - Dialog-elementet
- * @csspart overlay - Overlegget bak dialogen - den skal ikke styles
- * @csspart panel - Dialogens panel
- * @csspart header - Headeren
- * @csspart title - Tittelen
- * @csspart header-actions - Header handlinger
- * @csspart close-button - Lukk-knappen
- * @csspart body - Innhold
- * @csspart footer - Footer
+ * @csspart base  Dialog-elementet
+ * @csspart overlay  Overlegget bak dialogen - den skal ikke styles
+ * @csspart panel  Dialogens panel
+ * @csspart header  Headeren
+ * @csspart title  Tittelen
+ * @csspart header-actions  Header handlinger
+ * @csspart close-button  Lukk-knappen
+ * @csspart body  Innhold
+ * @csspart footer  Footer
  *
  * @dependency nve-button
  */