diff --git a/.changeset/accordion-component.md b/.changeset/accordion-component.md
new file mode 100644
index 0000000..671d1a9
--- /dev/null
+++ b/.changeset/accordion-component.md
@@ -0,0 +1,14 @@
+---
+'@sb1/indeks-css': minor
+'@sb1/indeks-react': minor
+---
+
+Ny komponent: Accordion
+
+Accordion viser og skjuler innhold i seksjoner. Den bygger på native `<details>`/`<summary>`, så tastatur (Tab, Enter/Space) og skjermleser-semantikk (disclosure med åpen/lukket-tilstand) fungerer uten ekstra ARIA — og uten JavaScript.
+
+- Ren CSS: ingen web-komponent. Seksjonene er uavhengige (flere kan stå åpne samtidig). Den myke åpne/lukke-animasjonen er en progressiv CSS-enhancement (`interpolate-size` + `::details-content`); nettlesere uten støtte hopper bare åpent/lukket, fortsatt fullt funksjonelt.
+- React-laget er et tynt, compound-API: `Accordion` (en `<div class="ix-accordion">`) med `Accordion.Item` (→ `<details>`), `Accordion.Header` (→ `<summary>`) og `Accordion.Content`. `defaultOpen` på `Accordion.Item` speiler native `<details open>`.
+- Fullt brukbar uten React via klassene `.ix-accordion`, `.ix-accordion__item`, `.ix-accordion__header` og `.ix-accordion__content` på native `<details>`/`<summary>`.
+- Visuelle states (default, hover, active, focus, expanded) er definert; en chevron roterer for å vise tilstand, og animasjonen respekterer `prefers-reduced-motion`. Fokusring kun på header.
+- Bevisst avvik fra akseptansekriteriene: header er `<summary>` framfor `<button aria-expanded aria-controls>`. Native disclosure oppfyller samme intensjon (fokuserbar knapp, Enter/Space, annonsert tilstand) uten eksplisitt aria-kobling, siden innholdet ligger inne i samme `<details>`. Dokumentert i tilgjengelighets-tabellen.
diff --git a/docs/internal/dev-warnings-react.md b/docs/internal/dev-warnings-react.md
new file mode 100644
index 0000000..5d37fa7
--- /dev/null
+++ b/docs/internal/dev-warnings-react.md
@@ -0,0 +1,136 @@
+# Plan: Flytt dev-advarsler fra web components til React-laget
+
+## Kontekst
+
+Flere komponenter har `if (import.meta.env.DEV) { console.warn(...) }`-blokker med
+a11y-/bruksadvarsler (manglende label, `type="number"`, manglende `tooltip-label`,
+manglende legend osv.). Spørsmålet var om de blir strippet fra publiserte pakker.
+
+**Empirisk funn:** Ja — de strippes allerede i dag. `indeks-web/dist/npm/index.js`
+har 0 `console.warn` og 0 `import.meta.env`, selv om npm-bygget *ikke* minifiseres
+(`indeks-web/vite.config.ts:29`, `minify: isCdn` → `false`). Vite evaluerer
+`import.meta.env.DEV` til `false` ved Indeks' egen build og tree-shaker bort `if (false)`.
+
+**Men det avslører det egentlige problemet:** fordi `import.meta.env.DEV` bakes ved
+*Indeks'* build, blir advarslene borte for **alle** konsumenter — også de som selv
+kjører i dev. Advarslene lever i praksis kun når man kjører kildekoden internt
+(Storybook / eksempel-app). Ønsket er at advarslene skal nå konsumenter i *deres*
+dev-modus og forsvinne i *deres* prod-build.
+
+**Hvorfor ikke bare bytte til `process.env.NODE_ENV` i web components:** Web
+components er dokumentert lastet som rå ESM rett fra CDN (`indeks-docs/.../utvikler.mdx`),
+uten byggesteg hos konsument. Da finnes ikke `process` i nettleseren
+(`ReferenceError: process is not defined`), og det finnes ikke noe konsument-byggesteg
+som kan utsette dev/prod-valget. CDN er nettopp den primære måten web components brukes
+på. Derfor er konsument-styrte advarsler **fysisk umulig** for CDN-kanalen.
+
+**Valgt strategi:** Flytt advarslene til `@sb1/indeks-react`. React-pakken
+distribueres **kun via npm** (`indeks-react/package.json` — ingen CDN-build), så den
+bundles alltid av konsumenten. Da kan vi bruke rammeverk-økosystemets standard-
+mønster `process.env.NODE_ENV !== 'production'`, som konsumentens bundler (Vite/webpack/
+Next) bytter ut → advarsler følger med i konsumentens dev og strippes i deres prod.
+`@types/node` ligger allerede i `indeks-react` (`package.json:65`), så det opprinnelige
+TypeScript-bruddet (commit `278544a`) er ikke lenger relevant.
+
+## Mål
+
+1. React-konsumenter får a11y-/bruksadvarsler i sin dev-build, automatisk strippet i prod.
+2. Web components beholder ikke dupliserte advarsler som likevel er døde i publisert kode.
+3. SSR-trygt (Next.js o.l.): ingen krasj på server eller i nettleser.
+
+## Steg
+
+### 1. Dev-warn-helper i indeks-react
+Opprett `indeks-react/lib/ui/utils/devWarn.ts` (eller tilsvarende eksisterende
+utils-mappe — sjekk `indeks-react/lib/ui/` for konvensjon):
+
+```ts
+// SSR-trygt: process kan mangle i enkelte runtimes; NODE_ENV kan være undefined.
+export function devWarn(message: string): void {
+    if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {
+        console.warn(message);
+    }
+}
+```
+
+Begrunnelse for `typeof process`-guarden: ekstra robusthet hvis pakken havner i en
+runtime uten `process` (edge/worker). Konsumentens bundler erstatter
+`process.env.NODE_ENV` med en streng-literal, så `if (... !== 'production')` blir
+`if (true/false)` og strippes i prod.
+
+### 2. Legg advarsler i React-komponentene som eier de relevante propene
+React-laget mottar verdiene som props, så sjekkene blir enklere og mer presise enn
+DOM-inspeksjonen web component gjør i dag:
+
+- **Manglende tilgjengelig navn** → `TextField.tsx`, `TextArea.tsx`
+  (`indeks-react/lib/ui/components/form/text-field|text-area/`): advar når verken
+  `label` eller `ariaLabel` er satt. Dette gjenoppretter advarselen som ble fjernet i
+  commit `278544a`, nå via `devWarn`.
+- **`tooltip` uten `tooltipLabel`** → `Field.tsx`
+  (`indeks-react/lib/ui/components/form/field/`): advar når `tooltip` er satt men
+  `tooltipLabel` mangler.
+- **Message uten MessageRegion** → `Message.tsx` (`.../message/Message.tsx:83`):
+  bytt `import.meta.env.DEV` → `devWarn(...)`. Dette er allerede i React-laget.
+- **RadioGroup** (`.../radio-group/`): vurder advarsel for manglende legend dersom
+  React-laget har tilstrekkelig informasjon via props; hvis sjekken krever DOM-/children-
+  inspeksjon som bare web component har, hopp over (se "Avgrensning").
+
+Bruk samme ordlyd som dagens web-advarsler der det er overlapp (i18n-vennlig:
+meldingene er utvikler-rettede konsoll-tekster, ikke bruker-tekst).
+
+### 3. Rydd i web components
+`import.meta.env.DEV`-advarslene i `IxField.ts` (linjene 158, 185, 345) og
+`IxRadioGroup.ts` (linjene 121, 225) er døde i publisert kode. Anbefaling:
+- **Behold** dem som er ene og alene mulige i DOM-laget (f.eks. "fant ingen
+  `<input type="radio">`", "fant ingen `<input>/<select>/<textarea>`") — de hjelper
+  intern utvikling og vanilla/CDN-brukere som kjører kildenært, og er gratis i prod.
+- **Fjern** de som nå dekkes ekvivalent i React (label/tooltip-label) for å unngå at
+  to lag hevder å eie samme advarsel. Endelig fjern/behold avklares i implementasjon.
+
+### 4. Tester
+- `indeks-react` bruker vitest (`indeks-react/package.json`). Legg til/gjenopprett
+  tester som verifiserer at `devWarn` kalles ved manglende label (jf. testene som ble
+  fjernet i `278544a`: `TextField.test.tsx`, `TextArea.test.tsx`).
+- Mock `console.warn` og sett `process.env.NODE_ENV` i testen.
+
+## Kritiske filer
+
+- `indeks-react/lib/ui/utils/devWarn.ts` (ny)
+- `indeks-react/lib/ui/components/form/text-field/TextField.tsx`
+- `indeks-react/lib/ui/components/form/text-area/TextArea.tsx`
+- `indeks-react/lib/ui/components/form/field/Field.tsx`
+- `indeks-react/lib/ui/components/message/Message.tsx`
+- (web, opprydding) `indeks-web/lib/components/field/IxField.ts`,
+  `indeks-web/lib/components/radio-group/IxRadioGroup.ts`
+
+## Verifisering (lynchpin — må gjøres empirisk)
+
+Det avgjørende ukjente er om **Vite lib-build beholder `process.env.NODE_ENV`** for
+konsumenten, eller baker det til `"production"` ved Indeks' build (Vite bygger i
+production mode). Verifiser:
+
+1. Bygg React-pakken: `pnpm --filter @sb1/indeks-react build`
+2. Grep output: `grep -c "process.env.NODE_ENV" indeks-react/dist/main.js`
+   - **>0** → riktig: literalen står igjen, konsumentens bundler styrer dev/prod. ✅
+   - **0 / erstattet med `"production"`** → Vite bakte det. Fallback:
+     - Legg til i `indeks-react/vite.config.ts` en `define` som hindrer erstatning, f.eks.
+       `define: { 'process.env.NODE_ENV': 'process.env.NODE_ENV' }`, eller bruk
+       `globalThis.process?.env?.NODE_ENV` i helperen. Re-grep til literalen overlever.
+3. Røyktest dev: i `indeks-eksempel` (Vite dev), rendre en `<TextField>` uten label →
+   se advarsel i konsollen. Bygg eksempel for prod → bekreft at advarselen er borte.
+4. SSR-røyktest (om praktisk): bekreft ingen `process is not defined` ved import i en
+   server-runtime; helperens `typeof process`-guard dekker dette.
+5. Kjør `pnpm --filter @sb1/indeks-react test`.
+
+## Versjonering
+
+Legg til changeset (ikke bump `package.json` manuelt) for `@sb1/indeks-react`
+(minor — gjenoppretter/utvider dev-advarsler) og evt. `@sb1/indeks-web` (patch — fjernet
+død kode). Se prosjektets changeset-konvensjon.
+
+## Avgrensning
+
+Advarsler som krever DOM-/children-inspeksjon som bare web component har tilgang til,
+flyttes ikke til React hvis React-propene ikke gir nok informasjon. CDN-brukere av rene
+web components får fortsatt ingen dev-advarsler — det er en akseptert konsekvens av at
+CDN-kanalen ikke har et konsument-byggesteg.
diff --git a/indeks-css/css/components/accordion.css b/indeks-css/css/components/accordion.css
new file mode 100644
index 0000000..81f9ace
--- /dev/null
+++ b/indeks-css/css/components/accordion.css
@@ -0,0 +1,158 @@
+/* Accordion — gruppe av native <details>-seksjoner som vises/skjules.
+ *
+ * Accordion bygger på native <details>/<summary>. All semantikk og tastatur
+ * kommer gratis fra native elementer — ingen JavaScript er nødvendig. Seksjonene
+ * er uavhengige (flere kan stå åpne samtidig).
+ *
+ * Stylingen treffer <details>/<summary> direkte inni et element med klassen
+ * .ix-accordion, så seksjonene trenger ikke egne klasser for å virke. Klassene
+ * (.ix-accordion__item/__header/__content) finnes likevel som eksplisitte kroker
+ * for tilfeller der man vil style en struktur uten direkte <details>-barn.
+ *
+ * Struktur:
+ *   <div class="ix-accordion">
+ *     <details>
+ *       <summary>Tittel</summary>
+ *       <div>Innhold</div>
+ *     </details>
+ *     …
+ *   </div>
+ */
+
+/* Container: vertikal stabling av seksjoner i et avrundet, kantet kort. */
+:where(.ix-accordion) {
+    display: block;
+    border: var(--ix-border-width-default) solid var(--ix-color-border-main-default);
+    border-radius: var(--ix-border-radius-md);
+    /* Klipp barna til de avrundede hjørnene slik at hover-/active-flaten på
+     * summary ikke flyter ut over rammen i toppen/bunnen. */
+    overflow: hidden;
+    background-color: var(--ix-color-surface-main-default);
+    color: var(--ix-color-foreground-main-default);
+    /* Lar block-size animeres mellom 0 og `auto` på ::details-content (se
+     * @supports-blokken nederst). Ignoreres trygt der det ikke støttes. */
+    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+    interpolate-size: allow-keywords;
+}
+
+/* Hver seksjon = <details>. Skillelinje mellom seksjoner (ikke over den første). */
+:where(.ix-accordion) > details,
+:where(.ix-accordion__item) {
+    border-top: var(--ix-border-width-default) solid var(--ix-color-border-main-default);
+}
+
+:where(.ix-accordion) > details:first-child,
+:where(.ix-accordion__item:first-child) {
+    border-top: 0;
+}
+
+/* Header = <summary>: hele klikkflaten. Tittel (+ ev. prefiks-ikon) til venstre,
+ * chevron til høyre (margin-inline-start:auto). */
+:where(.ix-accordion) summary,
+:where(.ix-accordion__header) {
+    display: flex;
+    align-items: center;
+    gap: var(--ix-spacing-sm);
+    padding: var(--ix-spacing-md);
+    /* Touch-mål min. 44 px (WCAG 2.5.8) — sikres av padding + innhold. */
+    min-height: 44px;
+    font-size: var(--ix-font-size-md);
+    font-weight: var(--ix-font-weight-medium);
+    cursor: pointer;
+    /* Skjul native disclosure-marker (trekant) i alle nettlesere. */
+    list-style: none;
+}
+
+:where(.ix-accordion) summary::-webkit-details-marker,
+:where(.ix-accordion__header)::-webkit-details-marker {
+    display: none;
+}
+
+/* Default/Hover/Active — tydelige states på klikkflaten. */
+:where(.ix-accordion) summary:hover,
+:where(.ix-accordion__header:hover) {
+    background-color: var(--ix-color-surface-main-hover);
+}
+
+:where(.ix-accordion) summary:active,
+:where(.ix-accordion__header:active) {
+    background-color: var(--ix-color-surface-main-active);
+}
+
+/* Focus — synlig, konsistent ring (samme som resten av systemet). */
+:where(.ix-accordion) summary:focus-visible,
+:where(.ix-accordion__header:focus-visible) {
+    outline: var(--ix-outline-default);
+    outline-offset: calc(var(--ix-outline-offset-default) * -1);
+}
+
+/* Chevron som indikerer åpen/lukket tilstand. Flex-barn skjøvet helt til høyre. */
+:where(.ix-accordion) summary::after,
+:where(.ix-accordion__header)::after {
+    content: '';
+    flex: 0 0 auto;
+    margin-inline-start: auto;
+    width: var(--ix-font-size-xl);
+    height: var(--ix-font-size-xl);
+    background-color: var(--ix-color-foreground-main-default);
+    transition: var(--ix-transition-all);
+    /* stylelint-disable plugin/no-unsupported-browser-features */
+    mask-size: cover;
+    -webkit-mask-size: cover;
+    mask-position: center;
+    -webkit-mask-position: center;
+    mask-repeat: no-repeat;
+    -webkit-mask-repeat: no-repeat;
+    mask-image: url(https://cdn.sparebank1.no/icons/keyboard_arrow_down.svg);
+    -webkit-mask-image: url(https://cdn.sparebank1.no/icons/keyboard_arrow_down.svg);
+    /* stylelint-enable plugin/no-unsupported-browser-features */
+}
+
+/* Expanded: chevron peker opp. */
+:where(.ix-accordion) > details[open] summary::after,
+:where(.ix-accordion__item[open]) .ix-accordion__header::after {
+    transform: rotate(180deg);
+}
+
+/* Innholdsområde = alt i <details> som ikke er <summary>. Luft over (mellom header
+ * og innhold), på sidene og under — ingen skillelinje mot headeren. */
+:where(.ix-accordion) > details > :not(summary),
+:where(.ix-accordion__content) {
+    padding: var(--ix-spacing-md);
+}
+
+:where(.ix-accordion) > details > :not(summary) > :first-child,
+:where(.ix-accordion__content) > :first-child {
+    margin-top: 0;
+}
+
+:where(.ix-accordion) > details > :not(summary) > :last-child,
+:where(.ix-accordion__content) > :last-child {
+    margin-bottom: 0;
+}
+
+/* Myk åpne/lukke-animasjon som progressiv enhancement. Krever interpolate-size +
+ * ::details-content + transition-behavior:allow-discrete (Chrome/Edge 129+,
+ * Safari 17.2+). Nettlesere uten støtte hopper bare åpent/lukket — fortsatt fullt
+ * funksjonelt. */
+/* stylelint-disable plugin/no-unsupported-browser-features */
+@supports (interpolate-size: allow-keywords) {
+    :where(.ix-accordion) > details::details-content {
+        block-size: 0;
+        overflow: hidden;
+        transition:
+            block-size var(--ix-transition-duration) var(--ix-transition-animation),
+            content-visibility var(--ix-transition-duration) allow-discrete;
+    }
+
+    :where(.ix-accordion) > details[open]::details-content {
+        block-size: auto;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        :where(.ix-accordion) > details::details-content {
+            transition: none;
+        }
+    }
+}
+/* stylelint-enable plugin/no-unsupported-browser-features */
diff --git a/indeks-css/css/components/index.css b/indeks-css/css/components/index.css
index c56d563..c810c67 100644
--- a/indeks-css/css/components/index.css
+++ b/indeks-css/css/components/index.css
@@ -6,5 +6,6 @@
 @import './spinner.css';
 @import './divider.css';
 @import './list-element.css';
+@import './accordion.css';
 @import './message.css';
 @import './form/index.css';
diff --git a/indeks-docs/docs/komponenter/accessibility/accordion.json b/indeks-docs/docs/komponenter/accessibility/accordion.json
new file mode 100644
index 0000000..c4aa529
--- /dev/null
+++ b/indeks-docs/docs/komponenter/accessibility/accordion.json
@@ -0,0 +1,88 @@
+{
+  "component": "Accordion",
+  "lastReviewed": "2026-06-24",
+  "consumerResponsibilities": [
+    {
+      "summary": "Skriv kort og beskrivende header-tekst",
+      "details": "Hver Accordion.Header er klikkflaten og skal beskrive innholdet i seksjonen slik at den gir mening lest alene. Hold den kort. Et valgfritt prefiks-ikon kan støtte forståelsen, men teksten er alltid hovedbæreren — ikonet skal ikke være eneste informasjon.",
+      "wcag": ["2.4.6", "1.1.1"]
+    },
+    {
+      "summary": "Plasser Accordion.Header først i hver Accordion.Item",
+      "details": "Native <details> krever at <summary> (Accordion.Header) er første barn for at klikk og tastatur skal fungere. Skriv alltid Accordion.Header før Accordion.Content.",
+      "wcag": ["1.3.1", "2.1.1"]
+    },
+    {
+      "summary": "Bruk overskriftsnivå i header ved behov",
+      "details": "Hvis seksjonene inngår i en dokumentstruktur der headerne fungerer som overskrifter, kan du legge et passende overskriftselement (f.eks. en <Heading> / <h3>) inni Accordion.Header for korrekt overskriftshierarki. Knapp-semantikken kommer fra <summary>.",
+      "wcag": ["1.3.1", "2.4.10"]
+    }
+  ],
+  "issues": [],
+  "handled": [
+    { "id": "1.3.1", "notes": "Semantisk struktur via native <details>/<summary>: header er en disclosure-knapp, innholdet er programmessig knyttet til den ved å ligge inne i samme <details>. Skillelinjer mellom seksjoner er rent visuelle." },
+    { "id": "1.3.2", "notes": "Innhold følger naturlig leserekkefølge i DOM: header (summary) før innhold (content), seksjon for seksjon." },
+    { "id": "1.4.1", "notes": "Åpen/lukket-tilstand formidles av native disclosure-semantikk (annonseres av skjermleser) og chevron-ikon — ikke av farge alene." },
+    { "id": "1.4.3", "notes": "Tekst bruker --ix-color-foreground-main-default på --ix-color-surface-main, som oppfyller kontrastkravet i både light og dark mode." },
+    { "id": "1.4.4", "notes": "Relative enheter (font-size-tokens) — tekst skalerer korrekt ved 200 % zoom uten at innhold brytes." },
+    { "id": "1.4.10", "notes": "Mobile-first uten faste bredder — reflower korrekt ned til 320px viewport uten horisontal scroll." },
+    { "id": "1.4.11", "notes": "Fokusindikator på header oppfyller 3:1 kontrastkrav via --ix-outline-default." },
+    { "id": "2.1.1", "notes": "Header er en native <summary> — fokuserbar med Tab og åpnes/lukkes med Enter og Space. Fullt opererbart med tastatur." },
+    { "id": "2.1.2", "notes": "Ingen tastaturfeller — fokus navigeres fritt ut med Tab/Shift+Tab." },
+    { "id": "2.4.3", "notes": "Følger naturlig tab-rekkefølge i DOM: header etter header." },
+    { "id": "2.4.7", "notes": "Tydelig fokusindikator på header (:focus-visible)." },
+    { "id": "2.5.8", "notes": "Header har min. 44px høyde (touch-mål) via min-height + padding." },
+    { "id": "3.2.1", "notes": "Ingen kontekstendring ved fokus. Å åpne/lukke en seksjon flytter ikke fokus og laster ikke ny kontekst." },
+    { "id": "3.2.2", "notes": "Å aktivere en header gjør kun det forventede (viser/skjuler innhold) — ingen automatisk kontekstendring." },
+    { "id": "4.1.2", "notes": "Native <details>/<summary> gir korrekt rolle og åpne/lukke-tilstand til skjermlesere uten ekstra ARIA. Komponenten er ren CSS og setter ingen ARIA." }
+  ],
+  "notRelevant": [
+    { "id": "1.1.1", "reason": "Komponenten har ikke eget bildeinnhold. Et valgfritt prefiks-ikon i headeren er konsumentens ansvar (Icon-komponenten håndterer alt-tekst/aria-hidden)." },
+    { "id": "1.2.1" },
+    { "id": "1.2.2" },
+    { "id": "1.2.3" },
+    { "id": "1.2.4" },
+    { "id": "1.2.5" },
+    { "id": "1.3.3", "reason": "Formidler ikke instruksjoner basert på sensoriske egenskaper." },
+    { "id": "1.3.4" },
+    { "id": "1.3.5", "reason": "Ikke et skjemafelt som ber om personlig informasjon." },
+    { "id": "1.4.2" },
+    { "id": "1.4.5" },
+    { "id": "1.4.12" },
+    { "id": "1.4.13" },
+    { "id": "2.1.4" },
+    { "id": "2.2.1" },
+    { "id": "2.2.2" },
+    { "id": "2.3.1", "reason": "Chevron-animasjon er kort og respekterer prefers-reduced-motion; ingen blink." },
+    { "id": "2.4.1" },
+    { "id": "2.4.2" },
+    { "id": "2.4.5" },
+    { "id": "2.5.1", "reason": "Ingen gestbaserte interaksjoner — enkelt klikk/tap på header." },
+    { "id": "2.5.2", "reason": "Native <summary> — nettleseren håndterer pekerinteraksjon." },
+    { "id": "2.5.4" },
+    { "id": "2.5.6" },
+    { "id": "2.5.7" },
+    { "id": "3.1.1" },
+    { "id": "3.1.2" },
+    { "id": "3.2.3" },
+    { "id": "3.2.4" },
+    { "id": "3.2.6" },
+    { "id": "3.3.1" },
+    { "id": "3.3.2" },
+    { "id": "3.3.3" },
+    { "id": "3.3.4" },
+    { "id": "3.3.7" },
+    { "id": "3.3.8" }
+  ],
+  "keyboard": [
+    { "key": "Tab", "action": "Flytter fokus til neste header (og til fokuserbare elementer i åpent innhold)" },
+    { "key": "Shift+Tab", "action": "Flytter fokus til forrige fokuserbare element" },
+    { "key": "Enter", "action": "Åpner eller lukker seksjonen når headeren har fokus" },
+    { "key": "Space", "action": "Åpner eller lukker seksjonen når headeren har fokus" }
+  ],
+  "screenReader": [
+    "Header annonseres som en disclosure-knapp med åpen/lukket-tilstand (native <summary>) — f.eks. «Tittel, skjult/vist»",
+    "Å åpne en seksjon eksponerer innholdet som ligger inne i <details>; tilstanden annonseres uten at fokus flyttes",
+    "Seksjonene er uavhengige — å åpne én påvirker ikke de andre, og fokus blir værende på headeren brukeren aktiverte"
+  ]
+}
diff --git a/indeks-docs/docs/komponenter/accordion.mdx b/indeks-docs/docs/komponenter/accordion.mdx
new file mode 100644
index 0000000..7d5f58c
--- /dev/null
+++ b/indeks-docs/docs/komponenter/accordion.mdx
@@ -0,0 +1,256 @@
+---
+title: Accordion
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import AccessibilityTable, { KeyboardAndScreenReader } from '@site/src/components/AccessibilityTable';
+import a11yData from './accessibility/accordion.json';
+
+# Accordion
+
+Accordion viser og skjuler innhold i seksjoner. Den er nyttig når mye innhold skal gjøres oversiktlig: brukeren ser overskriftene og åpner kun det som er relevant. Komponenten bygger på native `<details>`/`<summary>`, så tastatur og skjermleser fungerer uten ekstra oppsett.
+
+## Egnet til
+
+- Vanlige spørsmål (FAQ) og hjelpeinnhold
+- Lange skjemaer eller innstillinger delt i logiske bolker
+- Sekundær informasjon som ikke alle trenger samtidig
+- Å gjøre tett innhold skannbart uten å skjule det helt
+
+## Uegnet til
+
+- Innhold brukeren må se for å komme videre — vis det åpent
+- Én enkelt seksjon — bruk heller en vanlig overskrift + tekst
+- Navigasjon mellom sider — bruk lenker eller meny
+- Når alt innholdet uansett må leses i rekkefølge
+
+## Kom i gang
+
+<Tabs groupId="variant">
+<TabItem value="react" label="React">
+
+```tsx live
+<Accordion>
+  <Accordion.Item defaultOpen>
+    <Accordion.Header>Hvordan logger jeg inn?</Accordion.Header>
+    <Accordion.Content>
+      <p>Du logger inn med BankID eller BankID på mobil øverst til høyre.</p>
+    </Accordion.Content>
+  </Accordion.Item>
+  <Accordion.Item>
+    <Accordion.Header>Hvordan endrer jeg passord?</Accordion.Header>
+    <Accordion.Content>
+      <p>Gå til Innstillinger → Sikkerhet og velg «Endre passord».</p>
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion>
+```
+
+</TabItem>
+<TabItem value="html" label="HTML">
+
+```jsx live
+<div class="ix-accordion">
+  <details class="ix-accordion__item" open>
+    <summary class="ix-accordion__header">Hvordan logger jeg inn?</summary>
+    <div class="ix-accordion__content">
+      <p>Du logger inn med BankID eller BankID på mobil øverst til høyre.</p>
+    </div>
+  </details>
+  <details class="ix-accordion__item">
+    <summary class="ix-accordion__header">Hvordan endrer jeg passord?</summary>
+    <div class="ix-accordion__content">
+      <p>Gå til Innstillinger → Sikkerhet og velg «Endre passord».</p>
+    </div>
+  </details>
+</div>
+```
+
+</TabItem>
+</Tabs>
+
+## Eksempler
+
+### Default-åpne seksjoner
+
+Seksjonene er uavhengige — flere kan stå åpne samtidig. Marker de seksjonene som bør være åpne ved start med `defaultOpen`.
+
+```tsx live
+<Accordion>
+  <Accordion.Item defaultOpen>
+    <Accordion.Header>Første seksjon</Accordion.Header>
+    <Accordion.Content>
+      <p>Denne er åpen som standard.</p>
+    </Accordion.Content>
+  </Accordion.Item>
+  <Accordion.Item defaultOpen>
+    <Accordion.Header>Andre seksjon</Accordion.Header>
+    <Accordion.Content>
+      <p>Denne er også åpen — begge kan stå åpne samtidig.</p>
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion>
+```
+
+### Med prefiks-ikon
+
+`Accordion.Header` tar `ReactNode`, så du kan sette et ikon foran tittelen. Teksten er alltid hovedbæreren — ikonet er kun støtte.
+
+```tsx live
+<Accordion>
+  <Accordion.Item>
+    <Accordion.Header>
+      <Icon name="betalingskort" /> Kort og betaling
+    </Accordion.Header>
+    <Accordion.Content>
+      <p>Administrer kortene dine, sperr kort og se betalinger.</p>
+    </Accordion.Content>
+  </Accordion.Item>
+  <Accordion.Item>
+    <Accordion.Header>
+      <Icon name="innstillinger" /> Sikkerhet
+    </Accordion.Header>
+    <Accordion.Content>
+      <p>Endre passord og se påloggingshistorikk.</p>
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion>
+```
+
+### Rikt innhold
+
+Innholdet kan bestå av tekst, lister, lenker og andre komponenter.
+
+```tsx live
+<Accordion>
+  <Accordion.Item defaultOpen>
+    <Accordion.Header>Hva er inkludert?</Accordion.Header>
+    <Accordion.Content>
+      <p>Avtalen inkluderer blant annet:</p>
+      <ListElement as="ul">
+        <li>Nettbank og mobilbank</li>
+        <li>Gratis kortbruk i Norge</li>
+        <li>Varsling på SMS</li>
+      </ListElement>
+      <p>
+        Les mer i <LinkText href="#">vilkårene</LinkText>.
+      </p>
+    </Accordion.Content>
+  </Accordion.Item>
+  <Accordion.Item>
+    <Accordion.Header>Hva koster det?</Accordion.Header>
+    <Accordion.Content>
+      <p>Se gjeldende priser i prislisten.</p>
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion>
+```
+
+## Retningslinjer
+
+### Innhold og formulering
+
+- Skriv korte, beskrivende headere som gir mening lest alene.
+- Start med det viktigste ordet i headeren — den skal være lett å skanne.
+- Unngå at brukeren må åpne seksjoner for å forstå hva de inneholder.
+
+### Unngå overdreven nøsting
+
+Accordion i accordion blir fort uoversiktlig. Vurder å dele opp innholdet på en annen måte hvis du trenger flere nivåer.
+
+### Default-åpne seksjoner
+
+Marker den eller de viktigste seksjonene med `defaultOpen` slik at brukeren ser noe innhold med en gang. Seksjonene er uavhengige, så du kan starte flere åpne samtidig.
+
+## Universell utforming
+
+### Hva du selv må sørge for
+
+- **Skriv kort og beskrivende header-tekst** — headeren er klikkflaten og må gi mening alene. Et valgfritt prefiks-ikon støtter, men teksten er alltid hovedbæreren.
+- **Plasser `Accordion.Header` først** i hver `Accordion.Item` — native `<details>` krever at `<summary>` er første barn.
+- **Bruk overskriftsnivå ved behov** — inngår headerne i en dokumentstruktur, kan du legge en `<Heading>`/`<h3>` inni `Accordion.Header` for korrekt overskriftshierarki.
+
+### Hva komponenten gjør automatisk
+
+- **Disclosure-semantikk** — header er en native `<summary>`: fokuserbar med Tab, åpnes/lukkes med Enter og Space, og åpen/lukket-tilstand annonseres av skjermlesere. Ingen ekstra ARIA er nødvendig.
+- **Programmessig kobling** — innholdet ligger inne i samme `<details>` som headeren, så de er knyttet sammen uten `aria-controls`/`id`.
+- **Tilstandsindikator** — en chevron roterer for å vise åpen/lukket. Animasjonen er kort og respekterer `prefers-reduced-motion`.
+- **Fokusindikator** — tydelig fokusring på header (`:focus-visible`).
+
+:::note Avvik fra akseptansekriteriene: `<summary>` framfor `<button>`
+Kriteriene beskriver en button-basert accordion (`<button aria-expanded aria-controls>` + panel med matchende `id`). Vi bygger i stedet på native `<details>`/`<summary>`, som oppfyller samme intensjon — fokuserbar disclosure-knapp, Enter/Space og åpen/lukket-tilstand annonsert av skjermlesere — uten eksplisitt `aria-expanded`/`aria-controls`. Innholdet er programmessig knyttet til headeren ved å ligge inne i samme `<details>`, så aria-koblingen er overflødig. Dette er enklere, har bred innebygd støtte og følger samme native-tilnærming som Digdir/Designsystemet.
+:::
+
+<KeyboardAndScreenReader data={a11yData} />
+
+### WCAG-kriterier
+
+<AccessibilityTable data={a11yData} />
+
+## Props / API
+
+### `Accordion`
+
+| Prop | Type | Standard | Beskrivelse |
+|------|------|----------|-------------|
+| `children` | `ReactNode` | | `Accordion.Item`-seksjoner |
+| `className` | `string` | | Ekstra CSS-klasser på rot-elementet (`<div class="ix-accordion">`) |
+
+### `Accordion.Item`
+
+| Prop | Type | Standard | Beskrivelse |
+|------|------|----------|-------------|
+| `children` | `ReactNode` | | En `Accordion.Header` (først) og en `Accordion.Content` |
+| `defaultOpen` | `boolean` | `false` | Start seksjonen åpen. Speiler native `<details open>` |
+| `className` | `string` | | Ekstra CSS-klasser på `<details>` |
+
+### `Accordion.Header`
+
+| Prop | Type | Standard | Beskrivelse |
+|------|------|----------|-------------|
+| `children` | `ReactNode` | | Tittel (kort og beskrivende), kan inkludere et prefiks-ikon |
+| `className` | `string` | | Ekstra CSS-klasser på `<summary>` |
+
+### `Accordion.Content`
+
+| Prop | Type | Standard | Beskrivelse |
+|------|------|----------|-------------|
+| `children` | `ReactNode` | | Innholdet — tekst, lister eller andre komponenter |
+| `className` | `string` | | Ekstra CSS-klasser på innholds-`<div>` |
+
+## Tilpasning med CSS
+
+Trenger du `ix-accordion`-stylingen på HTML du setter sammen selv, kan du bruke klassene direkte. Native `<details>`/`<summary>` gir semantikk og tastatur — ingen JavaScript er nødvendig.
+
+### Tilgjengelige klasser
+
+| Element/tilstand | Selektor / attributt |
+|------------------|----------------------|
+| Rot (gruppe) | `.ix-accordion` på et container-element (f.eks. `<div>`) |
+| Seksjon | `.ix-accordion__item` på `<details>` |
+| Åpen seksjon | `[open]` på `<details>` (native) |
+| Header | `.ix-accordion__header` på `<summary>` (første barn) |
+| Innhold | `.ix-accordion__content` på `<div>` (etter header) |
+
+### Eksempel: ren HTML
+
+```html
+<div class="ix-accordion">
+  <details class="ix-accordion__item" open>
+    <summary class="ix-accordion__header">Første seksjon</summary>
+    <div class="ix-accordion__content">
+      <p>Innhold i første seksjon.</p>
+    </div>
+  </details>
+  <details class="ix-accordion__item">
+    <summary class="ix-accordion__header">Andre seksjon</summary>
+    <div class="ix-accordion__content">
+      <p>Innhold i andre seksjon.</p>
+    </div>
+  </details>
+</div>
+```
+
+Seksjonene er uavhengige native `<details>` — flere kan stå åpne samtidig. Den myke åpne/lukke-animasjonen er en progressiv CSS-enhancement; nettlesere uten støtte hopper bare åpent/lukket.
+
diff --git a/indeks-docs/docs/komponenter/button.mdx b/indeks-docs/docs/komponenter/button.mdx
index 92dbd3e..86acbdf 100644
--- a/indeks-docs/docs/komponenter/button.mdx
+++ b/indeks-docs/docs/komponenter/button.mdx
@@ -34,7 +34,7 @@ Button lar brukeren utføre en handling, som å sende inn et skjema, lagre endri
 <TabItem value="html" label="HTML">
 
 ```jsx live
-<button className="ix-button" data-variant="primary" type="button">
+<button class="ix-button" data-variant="primary" type="button">
   Send inn
 </button>
 ```
@@ -64,9 +64,9 @@ Button lar brukeren utføre en handling, som å sende inn et skjema, lagre endri
 
 ```jsx live
 <>
-  <button className="ix-button" data-variant="primary" type="button">Primary</button>
-  <button className="ix-button" data-variant="secondary" type="button">Secondary</button>
-  <button className="ix-button" data-variant="tertiary" type="button">Tertiary</button>
+  <button class="ix-button" data-variant="primary" type="button">Primary</button>
+  <button class="ix-button" data-variant="secondary" type="button">Secondary</button>
+  <button class="ix-button" data-variant="tertiary" type="button">Tertiary</button>
 </>
 ```
 
@@ -92,10 +92,10 @@ Bruk `danger` for destruktive handlinger som sletting eller avbryt-operasjoner d
 
 ```jsx live
 <>
-  <button className="ix-button" data-variant="primary" data-danger="true" type="button">
+  <button class="ix-button" data-variant="primary" data-danger="true" type="button">
     Slett konto
   </button>
-  <button className="ix-button" data-variant="secondary" data-danger="true" type="button">
+  <button class="ix-button" data-variant="secondary" data-danger="true" type="button">
     Avbryt overføring
   </button>
 </>
@@ -122,9 +122,9 @@ Bruk `danger` for destruktive handlinger som sletting eller avbryt-operasjoner d
 
 ```jsx live
 <>
-  <button className="ix-button" data-variant="primary" data-size="sm" type="button">Liten</button>
-  <button className="ix-button" data-variant="primary" type="button">Medium (standard)</button>
-  <button className="ix-button" data-variant="primary" data-size="lg" type="button">Stor</button>
+  <button class="ix-button" data-variant="primary" data-size="sm" type="button">Liten</button>
+  <button class="ix-button" data-variant="primary" type="button">Medium (standard)</button>
+  <button class="ix-button" data-variant="primary" data-size="lg" type="button">Stor</button>
 </>
 ```
 
@@ -144,7 +144,7 @@ Bruk `danger` for destruktive handlinger som sletting eller avbryt-operasjoner d
 <TabItem value="html" label="HTML">
 
 ```jsx live
-<button className="ix-button ix-w-full" data-variant="primary" type="button">
+<button class="ix-button ix-w-full" data-variant="primary" type="button">
   Fortsett
 </button>
 ```
@@ -170,8 +170,8 @@ Ikon-knapper med tekst trenger ingen ekstra ARIA — teksten er den tilgjengelig
 <TabItem value="html" label="HTML">
 
 ```jsx live
-<button className="ix-button" data-variant="primary" type="button">
-  <span className="ix-icon" style={{maskImage: "url(https://cdn.sparebank1.no/icons/savings.svg)", WebkitMaskImage: "url(https://cdn.sparebank1.no/icons/savings.svg)"}} aria-hidden="true" />
+<button class="ix-button" data-variant="primary" type="button">
+  <span class="ix-icon" style={{maskImage: "url(https://cdn.sparebank1.no/icons/savings.svg)", WebkitMaskImage: "url(https://cdn.sparebank1.no/icons/savings.svg)"}} aria-hidden="true" />
   Pålogget
 </button>
 ```
@@ -196,8 +196,8 @@ Knapper med bare ikon **må** ha `aria-label` som beskriver handlingen. Bruk `ic
 <TabItem value="html" label="HTML">
 
 ```jsx live
-<button className="ix-button" data-variant="primary" data-icon-only type="button" aria-label="Gå til sparing">
-  <span className="ix-icon" style={{maskImage: "url(https://cdn.sparebank1.no/icons/savings.svg)", WebkitMaskImage: "url(https://cdn.sparebank1.no/icons/savings.svg)"}} />
+<button class="ix-button" data-variant="primary" data-icon-only type="button" aria-label="Gå til sparing">
+  <span class="ix-icon" style={{maskImage: "url(https://cdn.sparebank1.no/icons/savings.svg)", WebkitMaskImage: "url(https://cdn.sparebank1.no/icons/savings.svg)"}} />
 </button>
 ```
 
@@ -232,9 +232,9 @@ Spinneren arver knappens tekstfarge, så den får riktig kontrast i alle variant
 <TabItem value="html" label="HTML">
 
 ```jsx live
-<button className="ix-button" data-variant="primary" data-loading="true" type="button"
+<button class="ix-button" data-variant="primary" data-loading="true" type="button"
         disabled aria-label="Sender inn…">
-  <span className="ix-spinner" aria-hidden="true" />
+  <span class="ix-spinner" aria-hidden="true" />
   Sender inn…
 </button>
 ```
@@ -256,7 +256,7 @@ Spinneren arver knappens tekstfarge, så den får riktig kontrast i alle variant
 <TabItem value="html" label="HTML">
 
 ```jsx live
-<button className="ix-button" data-variant="primary" type="button" disabled>
+<button class="ix-button" data-variant="primary" type="button" disabled>
   Deaktivert
 </button>
 ```
@@ -283,7 +283,7 @@ Bruk `as="a"` når knappen navigerer til en URL. Den beholder button-styling, me
 <TabItem value="html" label="HTML">
 
 ```jsx live
-<a className="ix-button" data-variant="primary" href="https://www.sparebank1.no">
+<a class="ix-button" data-variant="primary" href="https://www.sparebank1.no">
   Gå til sparebank1.no
 </a>
 ```
diff --git a/indeks-docs/docs/komponenter/skjema/checkbox.mdx b/indeks-docs/docs/komponenter/skjema/checkbox.mdx
index f6547f4..4fbb9c1 100644
--- a/indeks-docs/docs/komponenter/skjema/checkbox.mdx
+++ b/indeks-docs/docs/komponenter/skjema/checkbox.mdx
@@ -34,10 +34,10 @@ Checkbox lar brukeren velge én eller flere alternativer fra en liste. Hvert val
 <TabItem value="html" label="HTML">
 
 ```jsx live
-<label className="ix-checkbox">
-  <input type="checkbox" className="ix-checkbox__input" name="terms" />
-  <span className="ix-checkbox__box" />
-  <span className="ix-checkbox__label">Jeg godtar vilkårene</span>
+<label class="ix-checkbox">
+  <input type="checkbox" class="ix-checkbox__input" name="terms" />
+  <span class="ix-checkbox__box" />
+  <span class="ix-checkbox__label">Jeg godtar vilkårene</span>
 </label>
 ```
 
@@ -64,10 +64,10 @@ Checkbox lar brukeren velge én eller flere alternativer fra en liste. Hvert val
 
 ```jsx live
 <ix-field>
-  <label className="ix-checkbox">
-    <input type="checkbox" className="ix-checkbox__input" name="newsletter" />
-    <span className="ix-checkbox__box" />
-    <span className="ix-checkbox__label">Send meg nyhetsbrev</span>
+  <label class="ix-checkbox">
+    <input type="checkbox" class="ix-checkbox__input" name="newsletter" />
+    <span class="ix-checkbox__box" />
+    <span class="ix-checkbox__label">Send meg nyhetsbrev</span>
   </label>
   <span data-field="description">Du kan når som helst melde deg av</span>
   <span data-field="error"></span>
@@ -95,10 +95,10 @@ Checkbox lar brukeren velge én eller flere alternativer fra en liste. Hvert val
 
 ```jsx live
 <ix-field>
-  <label className="ix-checkbox">
-    <input type="checkbox" className="ix-checkbox__input" name="terms" aria-invalid="true" />
-    <span className="ix-checkbox__box" />
-    <span className="ix-checkbox__label">Jeg godtar vilkårene</span>
+  <label class="ix-checkbox">
+    <input type="checkbox" class="ix-checkbox__input" name="terms" aria-invalid="true" />
+    <span class="ix-checkbox__box" />
+    <span class="ix-checkbox__label">Jeg godtar vilkårene</span>
   </label>
   <span data-field="error">Du må godta vilkårene for å fortsette</span>
 </ix-field>
@@ -128,10 +128,10 @@ function IndeterminateCheckbox() {
     if (ref.current) ref.current.indeterminate = true;
   }, []);
   return (
-    <label className="ix-checkbox">
-      <input ref={ref} type="checkbox" className="ix-checkbox__input" name="select-all" />
-      <span className="ix-checkbox__box" />
-      <span className="ix-checkbox__label">Velg alle</span>
+    <label class="ix-checkbox">
+      <input ref={ref} type="checkbox" class="ix-checkbox__input" name="select-all" />
+      <span class="ix-checkbox__box" />
+      <span class="ix-checkbox__label">Velg alle</span>
     </label>
   );
 }
@@ -159,15 +159,15 @@ I HTML må `indeterminate` settes via JavaScript: `checkbox.indeterminate = true
 
 ```jsx live
 <>
-  <label className="ix-checkbox ix-checkbox--disabled">
-    <input type="checkbox" className="ix-checkbox__input" disabled />
-    <span className="ix-checkbox__box" />
-    <span className="ix-checkbox__label">Ikke tilgjengelig</span>
+  <label class="ix-checkbox ix-checkbox--disabled">
+    <input type="checkbox" class="ix-checkbox__input" disabled />
+    <span class="ix-checkbox__box" />
+    <span class="ix-checkbox__label">Ikke tilgjengelig</span>
   </label>
-  <label className="ix-checkbox ix-checkbox--disabled">
-    <input type="checkbox" className="ix-checkbox__input" disabled defaultChecked />
-    <span className="ix-checkbox__box" />
-    <span className="ix-checkbox__label">Allerede godtatt</span>
+  <label class="ix-checkbox ix-checkbox--disabled">
+    <input type="checkbox" class="ix-checkbox__input" disabled defaultChecked />
+    <span class="ix-checkbox__box" />
+    <span class="ix-checkbox__label">Allerede godtatt</span>
   </label>
 </>
 ```
@@ -202,20 +202,20 @@ I HTML må `indeterminate` settes via JavaScript: `checkbox.indeterminate = true
     Hvordan vil du bli kontaktet?
   </legend>
   <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-    <label className="ix-checkbox">
-      <input type="checkbox" className="ix-checkbox__input" name="contact" value="email" />
-      <span className="ix-checkbox__box" />
-      <span className="ix-checkbox__label">E-post</span>
+    <label class="ix-checkbox">
+      <input type="checkbox" class="ix-checkbox__input" name="contact" value="email" />
+      <span class="ix-checkbox__box" />
+      <span class="ix-checkbox__label">E-post</span>
     </label>
-    <label className="ix-checkbox">
-      <input type="checkbox" className="ix-checkbox__input" name="contact" value="sms" />
-      <span className="ix-checkbox__box" />
-      <span className="ix-checkbox__label">SMS</span>
+    <label class="ix-checkbox">
+      <input type="checkbox" class="ix-checkbox__input" name="contact" value="sms" />
+      <span class="ix-checkbox__box" />
+      <span class="ix-checkbox__label">SMS</span>
     </label>
-    <label className="ix-checkbox">
-      <input type="checkbox" className="ix-checkbox__input" name="contact" value="phone" />
-      <span className="ix-checkbox__box" />
-      <span className="ix-checkbox__label">Telefon</span>
+    <label class="ix-checkbox">
+      <input type="checkbox" class="ix-checkbox__input" name="contact" value="phone" />
+      <span class="ix-checkbox__box" />
+      <span class="ix-checkbox__label">Telefon</span>
     </label>
   </div>
 </fieldset>
diff --git a/indeks-docs/docs/komponenter/skjema/textfield.mdx b/indeks-docs/docs/komponenter/skjema/textfield.mdx
index 81efd9c..48be214 100644
--- a/indeks-docs/docs/komponenter/skjema/textfield.mdx
+++ b/indeks-docs/docs/komponenter/skjema/textfield.mdx
@@ -278,14 +278,14 @@ I banksammenheng er nesten alle felter påkrevd. Merk unntaket — ikke regelen.
   <ix-field>
     <label>E-postadresse</label>
     <div class="ix-text-field">
-      <input type="email" autoComplete="email" required />
+      <input type="email" autocomplete="email" required />
     </div>
     <span data-field="error"></span>
   </ix-field>
   <ix-field>
     <label>Mobilnummer (valgfritt)</label>
     <div class="ix-text-field">
-      <input type="tel" autoComplete="tel" />
+      <input type="tel" autocomplete="tel" />
     </div>
     <span data-field="error"></span>
   </ix-field>
diff --git a/indeks-docs/docs/komponenter/spinner.mdx b/indeks-docs/docs/komponenter/spinner.mdx
index f741ced..b776770 100644
--- a/indeks-docs/docs/komponenter/spinner.mdx
+++ b/indeks-docs/docs/komponenter/spinner.mdx
@@ -33,7 +33,7 @@ Spinner viser at noe lastes inn eller at en operasjon pågår. Den er ikke-inter
 
 ```jsx live
 <div
-  className="ix-spinner"
+  class="ix-spinner"
   role="status"
   aria-label="Laster..."
 />
@@ -60,7 +60,7 @@ Spinner viser at noe lastes inn eller at en operasjon pågår. Den er ikke-inter
 
 ```jsx live
 <div
-  className="ix-spinner"
+  class="ix-spinner"
   role="status"
   aria-label="Laster inn data..."
   data-size="md"
@@ -90,9 +90,9 @@ Spinner viser at noe lastes inn eller at en operasjon pågår. Den er ikke-inter
 
 ```jsx live
 <>
-  <div className="ix-spinner" role="status" aria-label="Liten spinner" data-size="sm" />
-  <div className="ix-spinner" role="status" aria-label="Middels spinner" data-size="md" />
-  <div className="ix-spinner" role="status" aria-label="Stor spinner" data-size="lg" />
+  <div class="ix-spinner" role="status" aria-label="Liten spinner" data-size="sm" />
+  <div class="ix-spinner" role="status" aria-label="Middels spinner" data-size="md" />
+  <div class="ix-spinner" role="status" aria-label="Stor spinner" data-size="lg" />
 </>
 ```
 
diff --git a/indeks-docs/docs/komponenter/typografi.mdx b/indeks-docs/docs/komponenter/typografi.mdx
index e781df1..df91d26 100644
--- a/indeks-docs/docs/komponenter/typografi.mdx
+++ b/indeks-docs/docs/komponenter/typografi.mdx
@@ -48,7 +48,7 @@ import { Heading } from '@sb1/indeks-react';
 <TabItem value="html" label="HTML">
 
 ```jsx live
-<h1 className="ix-heading" data-size="2xl">Renter og betingelser</h1>
+<h1 class="ix-heading" data-size="2xl">Renter og betingelser</h1>
 ```
 
 </TabItem>
@@ -75,8 +75,8 @@ Heading-nivå kan overstyres med `size` hvis det visuelle hierarkiet ikke samsva
 
 ```jsx live
 <>
-    <h1 className="ix-heading" data-size="lg">Renter og betingelser</h1>
-    <h2 className="ix-heading" data-size="md">Effektiv rente</h2>
+    <h1 class="ix-heading" data-size="lg">Renter og betingelser</h1>
+    <h2 class="ix-heading" data-size="md">Effektiv rente</h2>
 </>
 ```
 
@@ -113,8 +113,8 @@ Legg til spacing-klassen som tilsvarer størrelsen:
 
 ```jsx live
 <>
-    <h1 className="ix-heading ix-mb-sm" data-size="2xl">Renter og betingelser</h1>
-    <h2 className="ix-heading ix-mb-xs" data-size="xl">Effektiv rente</h2>
+    <h1 class="ix-heading ix-mb-sm" data-size="2xl">Renter og betingelser</h1>
+    <h2 class="ix-heading ix-mb-xs" data-size="xl">Effektiv rente</h2>
 </>
 ```
 
@@ -174,7 +174,7 @@ import { Text } from '@sb1/indeks-react';
 <TabItem value="html" label="HTML">
 
 ```jsx live
-<p className="ix-text" data-size="md">Kontoen din har en saldo på 12 345,00 kr.</p>
+<p class="ix-text" data-size="md">Kontoen din har en saldo på 12 345,00 kr.</p>
 ```
 
 </TabItem>
@@ -201,8 +201,8 @@ Tekst rendres som standard i en `<p>`. Bruk `as` når elementet ikke er en parag
 
 ```jsx live
 <ul>
-    <li className="ix-text" data-size="md">Brukskonto</li>
-    <li className="ix-text" data-size="md">Sparekonto</li>
+    <li class="ix-text" data-size="md">Brukskonto</li>
+    <li class="ix-text" data-size="md">Sparekonto</li>
 </ul>
 ```
 
@@ -229,7 +229,7 @@ Standard linjehøyde er 1.2. Brødtekst over flere linjer trenger større linjeh
 Legg til `ix-text--long` for økt linjehøyde:
 
 ```jsx live
-<p className="ix-text ix-text--long" data-size="md">
+<p class="ix-text ix-text--long" data-size="md">
     Renten på boliglånet ditt er basert på Nibor pluss et påslag. Den effektive renten inkluderer alle gebyrer og
     kostnader knyttet til lånet, og gir deg et mer realistisk bilde av hva lånet faktisk koster deg per år.
 </p>
@@ -267,10 +267,10 @@ Vil du utheve en hel paragraf uten `<p>`-elementet, bruk `as`:
 
 ```jsx live
 <>
-    <p className="ix-text" data-size="md">
+    <p class="ix-text" data-size="md">
         Saldo: <strong>12 345,00 kr</strong>
     </p>
-    <p className="ix-text" data-size="md">
+    <p class="ix-text" data-size="md">
         Renten er <em>variabel</em> og kan endres.
     </p>
 </>
@@ -332,7 +332,7 @@ import { LinkText } from '@sb1/indeks-react';
 <TabItem value="html" label="HTML">
 
 ```jsx live
-<a className="ix-link-text" href="/konto">
+<a class="ix-link-text" href="/konto">
     Se kontooversikt
 </a>
 ```
diff --git a/indeks-docs/sidebars.ts b/indeks-docs/sidebars.ts
index 649f961..932b6a1 100644
--- a/indeks-docs/sidebars.ts
+++ b/indeks-docs/sidebars.ts
@@ -78,6 +78,7 @@ const sidebars: SidebarsConfig = {
             label: 'Komponenter',
             collapsed: true,
             items: [
+                'komponenter/accordion',
                 'komponenter/button',
                 'komponenter/message',
                 'komponenter/spinner',
diff --git a/indeks-docs/src/theme/ReactLiveScope/index.tsx b/indeks-docs/src/theme/ReactLiveScope/index.tsx
index 765fdae..3a85c60 100644
--- a/indeks-docs/src/theme/ReactLiveScope/index.tsx
+++ b/indeks-docs/src/theme/ReactLiveScope/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 import {
+    Accordion,
     Button,
     Card,
     Checkbox,
@@ -36,6 +37,7 @@ if (ExecutionEnvironment.canUseDOM) {
 const ReactLiveScope = {
     React,
     ...React,
+    Accordion,
     Button,
     Card,
     Checkbox,
diff --git a/indeks-react/lib/ui/components/accordion/Accordion.test.tsx b/indeks-react/lib/ui/components/accordion/Accordion.test.tsx
new file mode 100644
index 0000000..280b057
--- /dev/null
+++ b/indeks-react/lib/ui/components/accordion/Accordion.test.tsx
@@ -0,0 +1,112 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { createRef } from 'react';
+import { Accordion } from './Accordion';
+
+function renderBasic() {
+    return render(
+        <Accordion>
+            <Accordion.Item>
+                <Accordion.Header>Tittel 1</Accordion.Header>
+                <Accordion.Content>Innhold 1</Accordion.Content>
+            </Accordion.Item>
+            <Accordion.Item>
+                <Accordion.Header>Tittel 2</Accordion.Header>
+                <Accordion.Content>Innhold 2</Accordion.Content>
+            </Accordion.Item>
+        </Accordion>,
+    );
+}
+
+function details(container: HTMLElement): HTMLDetailsElement[] {
+    return Array.from(container.querySelectorAll('details'));
+}
+
+describe('Accordion', () => {
+    it('rendrer en .ix-accordion-container med seksjoner', () => {
+        const { container } = renderBasic();
+        const root = container.firstElementChild!;
+        expect(root.tagName.toLowerCase()).toBe('div');
+        expect(root.classList.contains('ix-accordion')).toBe(true);
+        expect(details(container)).toHaveLength(2);
+    });
+
+    it('rendrer Header som <summary> (første barn) og Content som .ix-accordion__content', () => {
+        const { container } = renderBasic();
+        const firstItem = details(container)[0];
+        const summary = firstItem.firstElementChild!;
+        expect(summary.tagName.toLowerCase()).toBe('summary');
+        expect(summary.classList.contains('ix-accordion__header')).toBe(true);
+        expect(firstItem.querySelector('.ix-accordion__content')?.textContent).toBe('Innhold 1');
+    });
+
+    it('seksjonene er uavhengige — flere kan være åpne samtidig', () => {
+        const { container } = render(
+            <Accordion>
+                <Accordion.Item defaultOpen>
+                    <Accordion.Header>Tittel 1</Accordion.Header>
+                    <Accordion.Content>Innhold 1</Accordion.Content>
+                </Accordion.Item>
+                <Accordion.Item defaultOpen>
+                    <Accordion.Header>Tittel 2</Accordion.Header>
+                    <Accordion.Content>Innhold 2</Accordion.Content>
+                </Accordion.Item>
+            </Accordion>,
+        );
+        const [a, b] = details(container);
+        expect(a.open).toBe(true);
+        expect(b.open).toBe(true);
+    });
+
+    it('åpner seksjonen med defaultOpen', () => {
+        const { container } = render(
+            <Accordion>
+                <Accordion.Item defaultOpen>
+                    <Accordion.Header>Tittel</Accordion.Header>
+                    <Accordion.Content>Innhold</Accordion.Content>
+                </Accordion.Item>
+            </Accordion>,
+        );
+        expect(details(container)[0].open).toBe(true);
+    });
+
+    it('sender className videre til rot-elementet', () => {
+        const { container } = render(
+            <Accordion className="custom">
+                <Accordion.Item>
+                    <Accordion.Header>T</Accordion.Header>
+                    <Accordion.Content>I</Accordion.Content>
+                </Accordion.Item>
+            </Accordion>,
+        );
+        expect(container.firstElementChild?.classList.contains('custom')).toBe(true);
+    });
+
+    it('forwarder ref til rot-elementet', () => {
+        const ref = createRef<HTMLDivElement>();
+        render(
+            <Accordion ref={ref}>
+                <Accordion.Item>
+                    <Accordion.Header>T</Accordion.Header>
+                    <Accordion.Content>I</Accordion.Content>
+                </Accordion.Item>
+            </Accordion>,
+        );
+        expect(ref.current?.classList.contains('ix-accordion')).toBe(true);
+    });
+
+    it('Header støtter ReactNode (f.eks. prefiks-ikon)', () => {
+        render(
+            <Accordion>
+                <Accordion.Item>
+                    <Accordion.Header>
+                        <span data-testid="ikon" /> Tittel
+                    </Accordion.Header>
+                    <Accordion.Content>Innhold</Accordion.Content>
+                </Accordion.Item>
+            </Accordion>,
+        );
+        expect(screen.getByTestId('ikon')).toBeTruthy();
+        expect(screen.getByText(/Tittel/)).toBeTruthy();
+    });
+});
diff --git a/indeks-react/lib/ui/components/accordion/Accordion.tsx b/indeks-react/lib/ui/components/accordion/Accordion.tsx
new file mode 100644
index 0000000..103ddf8
--- /dev/null
+++ b/indeks-react/lib/ui/components/accordion/Accordion.tsx
@@ -0,0 +1,56 @@
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import type { ForwardRefExoticComponent, JSX, ReactNode, RefAttributes } from 'react';
+import { AccordionItem } from './AccordionItem';
+import { AccordionHeader } from './AccordionHeader';
+import { AccordionContent } from './AccordionContent';
+import type { AccordionItemProps } from './AccordionItem';
+import type { AccordionHeaderProps } from './AccordionHeader';
+import type { AccordionContentProps } from './AccordionContent';
+
+export type AccordionProps = {
+    /**
+     * Seksjonene — `Accordion.Item`-elementer (hvert med en `Accordion.Header`
+     * og en `Accordion.Content`).
+     */
+    children?: ReactNode;
+    className?: string;
+};
+
+/**
+ * Accordion viser og skjuler innhold i seksjoner. Bygger på native
+ * `<details>/<summary>`, så tastatur (Tab, Enter/Space) og skjermleser-
+ * semantikk kommer gratis — ingen ekstra JavaScript er nødvendig.
+ *
+ * Seksjonene er uavhengige: flere kan være åpne samtidig. Definer start-åpne
+ * seksjoner med `defaultOpen` på den enkelte `Accordion.Item`.
+ *
+ * @example
+ * <Accordion>
+ *   <Accordion.Item defaultOpen>
+ *     <Accordion.Header>Tittel</Accordion.Header>
+ *     <Accordion.Content>Innhold…</Accordion.Content>
+ *   </Accordion.Item>
+ * </Accordion>
+ */
+export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(
+    { children, className },
+    ref,
+): JSX.Element {
+    return (
+        <div ref={ref} className={clsx('ix-accordion', className)}>
+            {children}
+        </div>
+    );
+}) as ForwardRefExoticComponent<AccordionProps & RefAttributes<HTMLDivElement>> & {
+    Item: typeof AccordionItem;
+    Header: typeof AccordionHeader;
+    Content: typeof AccordionContent;
+};
+
+Accordion.displayName = 'Accordion';
+Accordion.Item = AccordionItem;
+Accordion.Header = AccordionHeader;
+Accordion.Content = AccordionContent;
+
+export type { AccordionItemProps, AccordionHeaderProps, AccordionContentProps };
diff --git a/indeks-react/lib/ui/components/accordion/AccordionContent.tsx b/indeks-react/lib/ui/components/accordion/AccordionContent.tsx
new file mode 100644
index 0000000..665af00
--- /dev/null
+++ b/indeks-react/lib/ui/components/accordion/AccordionContent.tsx
@@ -0,0 +1,26 @@
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import type { JSX, ReactNode } from 'react';
+
+export type AccordionContentProps = {
+    /** Innholdet i seksjonen — tekst, lister eller andre komponenter. */
+    children?: ReactNode;
+    className?: string;
+};
+
+/**
+ * Innholdsområdet for en `Accordion.Item`. Rendres som en `<div>` inni
+ * `<details>`, etter `Accordion.Header`. Synlig kun når seksjonen er åpen
+ * (native `<details>` styrer dette). Kobles til headeren strukturelt — ingen
+ * `aria-controls`/`id` er nødvendig.
+ */
+export const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(function AccordionContent(
+    { children, className },
+    ref,
+): JSX.Element {
+    return (
+        <div ref={ref} className={clsx('ix-accordion__content', className)}>
+            {children}
+        </div>
+    );
+});
diff --git a/indeks-react/lib/ui/components/accordion/AccordionHeader.tsx b/indeks-react/lib/ui/components/accordion/AccordionHeader.tsx
new file mode 100644
index 0000000..535f59f
--- /dev/null
+++ b/indeks-react/lib/ui/components/accordion/AccordionHeader.tsx
@@ -0,0 +1,26 @@
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import type { JSX, ReactNode } from 'react';
+
+export type AccordionHeaderProps = {
+    /** Tittel (kort og beskrivende). Kan inneholde et prefiks-ikon. */
+    children?: ReactNode;
+    className?: string;
+};
+
+/**
+ * Headeren for en `Accordion.Item` — klikkflaten som åpner/lukker seksjonen.
+ * Rendres som et native `<summary>` og må være første barn i `Accordion.Item`
+ * (native-kravet for `<details>`). Gir gratis knapp-semantikk, Tab-fokus og
+ * Enter/Space fra nettleseren — ingen ekstra ARIA er nødvendig.
+ */
+export const AccordionHeader = forwardRef<HTMLElement, AccordionHeaderProps>(function AccordionHeader(
+    { children, className },
+    ref,
+): JSX.Element {
+    return (
+        <summary ref={ref} className={clsx('ix-accordion__header', className)}>
+            {children}
+        </summary>
+    );
+});
diff --git a/indeks-react/lib/ui/components/accordion/AccordionItem.tsx b/indeks-react/lib/ui/components/accordion/AccordionItem.tsx
new file mode 100644
index 0000000..6ca15f6
--- /dev/null
+++ b/indeks-react/lib/ui/components/accordion/AccordionItem.tsx
@@ -0,0 +1,39 @@
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import type { JSX, ReactNode } from 'react';
+
+export type AccordionItemProps = {
+    /**
+     * Innholdet i seksjonen — forventer en `Accordion.Header` (først) og en
+     * `Accordion.Content`.
+     */
+    children?: ReactNode;
+    /**
+     * Start seksjonen åpen. Speiler native `<details open>`. @default false
+     */
+    defaultOpen?: boolean;
+    className?: string;
+};
+
+/**
+ * En enkelt seksjon i en `Accordion`. Rendres som et native `<details>`.
+ * Forventer `Accordion.Header` som første barn (klikkflaten / `<summary>`) og
+ * `Accordion.Content` etter den.
+ */
+export const AccordionItem = forwardRef<HTMLDetailsElement, AccordionItemProps>(function AccordionItem(
+    { children, defaultOpen = false, className },
+    ref,
+): JSX.Element {
+    return (
+        <details
+            ref={ref}
+            className={clsx('ix-accordion__item', className)}
+            // `open` brukes som start-tilstand (uncontrolled); native <details>
+            // styrer videre åpne/lukke. `|| undefined` holder attributtet ute av
+            // DOM når seksjonen ikke er åpen.
+            open={defaultOpen || undefined}
+        >
+            {children}
+        </details>
+    );
+});
diff --git a/indeks-react/lib/ui/components/index.ts b/indeks-react/lib/ui/components/index.ts
index 02b3ff8..5ce0eb5 100644
--- a/indeks-react/lib/ui/components/index.ts
+++ b/indeks-react/lib/ui/components/index.ts
@@ -1,3 +1,10 @@
+export { Accordion } from './accordion/Accordion';
+export type {
+    AccordionProps,
+    AccordionItemProps,
+    AccordionHeaderProps,
+    AccordionContentProps,
+} from './accordion/Accordion';
 export { Button } from './button/Button';
 export { Message } from './message/Message';
 export type { MessageProps, MessageStatus } from './message/Message';
diff --git a/indeks-storybook/stories/components/accordion/Accordion.stories.tsx b/indeks-storybook/stories/components/accordion/Accordion.stories.tsx
new file mode 100644
index 0000000..a8edf7e
--- /dev/null
+++ b/indeks-storybook/stories/components/accordion/Accordion.stories.tsx
@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Accordion, Icon, LinkText, ListElement } from '@sb1/indeks-react';
+
+const meta = {
+    title: 'Components/Accordion',
+    component: Accordion,
+    tags: ['autodocs'],
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Seksjonene er uavhengige — brukeren kan ha flere åpne samtidig. Marker
+ * seksjoner som bør være åpne ved start med `defaultOpen`.
+ */
+export const Standard: Story = {
+    render: () => (
+        <Accordion>
+            <Accordion.Item defaultOpen>
+                <Accordion.Header>Hvordan logger jeg inn?</Accordion.Header>
+                <Accordion.Content>
+                    <p>Du logger inn med BankID eller BankID på mobil øverst til høyre.</p>
+                </Accordion.Content>
+            </Accordion.Item>
+            <Accordion.Item>
+                <Accordion.Header>Hvordan endrer jeg passord?</Accordion.Header>
+                <Accordion.Content>
+                    <p>Gå til Innstillinger → Sikkerhet og velg «Endre passord».</p>
+                </Accordion.Content>
+            </Accordion.Item>
+            <Accordion.Item>
+                <Accordion.Header>Hvordan sperrer jeg kortet?</Accordion.Header>
+                <Accordion.Content>
+                    <p>Du kan sperre kortet under Kort → Sperr kort, eller ringe kundeservice.</p>
+                </Accordion.Content>
+            </Accordion.Item>
+        </Accordion>
+    ),
+};
+
+/**
+ * Headeren støtter et prefiks-ikon foran tittelen (`Accordion.Header` tar
+ * ReactNode).
+ */
+export const MedIkon: Story = {
+    name: 'Med prefiks-ikon',
+    render: () => (
+        <Accordion>
+            <Accordion.Item>
+                <Accordion.Header>
+                    <Icon name="betalingskort" /> Kort og betaling
+                </Accordion.Header>
+                <Accordion.Content>
+                    <p>Administrer kortene dine, sperr kort og se betalinger.</p>
+                </Accordion.Content>
+            </Accordion.Item>
+            <Accordion.Item>
+                <Accordion.Header>
+                    <Icon name="innstillinger" /> Sikkerhet
+                </Accordion.Header>
+                <Accordion.Content>
+                    <p>Endre passord og se påloggingshistorikk.</p>
+                </Accordion.Content>
+            </Accordion.Item>
+        </Accordion>
+    ),
+};
+
+/**
+ * Innholdet kan bestå av tekst, lister, lenker og andre komponenter.
+ */
+export const RiktInnhold: Story = {
+    name: 'Rikt innhold',
+    render: () => (
+        <Accordion>
+            <Accordion.Item defaultOpen>
+                <Accordion.Header>Hva er inkludert?</Accordion.Header>
+                <Accordion.Content>
+                    <p>Avtalen inkluderer blant annet:</p>
+                    <ListElement as="ul">
+                        <li>Nettbank og mobilbank</li>
+                        <li>Gratis kortbruk i Norge</li>
+                        <li>Varsling på SMS</li>
+                    </ListElement>
+                    <p>
+                        Les mer i <LinkText href="#">vilkårene</LinkText>.
+                    </p>
+                </Accordion.Content>
+            </Accordion.Item>
+            <Accordion.Item>
+                <Accordion.Header>Hva koster det?</Accordion.Header>
+                <Accordion.Content>
+                    <p>Se gjeldende priser i prislisten.</p>
+                </Accordion.Content>
+            </Accordion.Item>
+        </Accordion>
+    ),
+};
+
+/**
+ * Ren HTML uten React-wrapper. Native `<details>/<summary>` gir semantikk og
+ * tastatur — ingen JavaScript eller ARIA-attributter er nødvendig.
+ */
+export const HTML: Story = {
+    render: () => (
+        <div className="ix-accordion">
+            <details className="ix-accordion__item" open>
+                <summary className="ix-accordion__header">Første seksjon</summary>
+                <div className="ix-accordion__content">
+                    <p>Innhold i første seksjon.</p>
+                </div>
+            </details>
+            <details className="ix-accordion__item">
+                <summary className="ix-accordion__header">Andre seksjon</summary>
+                <div className="ix-accordion__content">
+                    <p>Innhold i andre seksjon.</p>
+                </div>
+            </details>
+        </div>
+    ),
+};
diff --git a/indeks-storybook/tests/scanAll.dtest.ts b/indeks-storybook/tests/scanAll.dtest.ts
index 0084125..a8070aa 100644
--- a/indeks-storybook/tests/scanAll.dtest.ts
+++ b/indeks-storybook/tests/scanAll.dtest.ts
@@ -12,6 +12,7 @@ const ALLOWED_STORY_TITLES: string[] = [
   'Form/RadioGroup',
   'Form/Checkbox',
   'Icons/Icon',
+  'Components/Accordion',
   'Components/Button',
   'Components/Message',
   'Components/Spinner',
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Accordion-HTML-1-mobile-webkit-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Accordion-HTML-1-mobile-webkit-linux.png
new file mode 100644
index 0000000..c44b8f6
Binary files /dev/null and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Accordion-HTML-1-mobile-webkit-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Accordion-Med-prefiks-ikon-1-mobile-chromium-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Accordion-Med-prefiks-ikon-1-mobile-chromium-linux.png
new file mode 100644
index 0000000..eafdd8b
Binary files /dev/null and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Accordion-Med-prefiks-ikon-1-mobile-chromium-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Accordion-Rikt-innhold-1-desktop-chromium-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Accordion-Rikt-innhold-1-desktop-chromium-linux.png
new file mode 100644
index 0000000..a5483d6
Binary files /dev/null and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Accordion-Rikt-innhold-1-desktop-chromium-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Accordion-Standard-1-mobile-webkit-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Accordion-Standard-1-mobile-webkit-linux.png
new file mode 100644
index 0000000..6f52206
Binary files /dev/null and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Accordion-Standard-1-mobile-webkit-linux.png differ