# Indeks Designsystem

> Felles retningslinjer og komponenter for SpareBank 1. Inneholder tokens, utility-klasser, React- og web components samt mønstre og maler.


## docs


### adr

- [ADR-DS-001: Monorepo og byggverktøy](/docs/adr/ADR-DS-001-monorepo-og-byggverktoy.md): Alle pakker i én monorepo med pnpm (sikkerhetsisolasjon) og Turborepo (intelligent caching). Workspace-protokoll for interne avhengigheter.
- [ADR-DS-002: Versjonering og publisering](/docs/adr/ADR-DS-002-versjonering-og-publisering.md): CSS, Web Components og React har alltid identisk versjonsnummer. Changesets for versjonering. Dual publishing til CDN (anbefalt) og npm.
- [ADR-DS-003: CI/CD med GitHub Actions](/docs/adr/ADR-DS-003-ci-cd.md): GitHub Actions for all CI/CD med spesialiserte workflows gruppert etter prefiks — pr-, release-, deploy- og security-.
- [ADR-DS-004: Web Components](/docs/adr/ADR-DS-004-web-components.md): Web Components brukes der ren HTML + CSS ikke er nok. React-pakken eksponerer samme funksjonalitet med idiomatisk React API.
- [ADR-DS-005: React-bibliotek (Vite, ESM, React 18/19)](/docs/adr/ADR-DS-005-react-bibliotek.md): React-biblioteket bygges med Vite i library mode, distribueres som ESM-only, og støtter React 18 og 19 som peer dependency.
- [ADR-DS-006: Design tokens](/docs/adr/ADR-DS-006-tokens-og-farger.md): Design tokens som JSON er single source of truth for web, iOS og Android. Toveis Figma-synkronisering med klare ansvarsgrenser.
- [ADR-DS-007: Fargesystem](/docs/adr/ADR-DS-007-fargesystem.md): Farger genereres med OKLCH for perseptuelt uniforme skalaer. HSL forkastet fordi opplevd lysstyrke varierer mellom fargetoner.
- [ADR-DS-008: Spacing-system (faste breakpoints + density)](/docs/adr/ADR-DS-008-spacing-system.md): Spacing bruker faste px-verdier på tre mobile-first breakpoints kombinert med et density-system (Compact/Default/Comfortable). Typografi bruker en rem-basert geometrisk skala uten density.
- [ADR-DS-009: CSS-arkitektur](/docs/adr/ADR-DS-009-css-only-styling.md): All styling bruker ren HTML og CSS. Ingen CSS-in-JS. ix-prefix på alle klasser og variabler.
- [ADR-DS-010: Komponentutvikling og testing](/docs/adr/ADR-DS-010-komponentutvikling-og-testing.md): Storybook for komponentutvikling. Docker-basert Playwright for reproduserbare visuelle tester og accessibility.
- [ADR-DS-011: Dokumentasjon (Docusaurus, midlertidig)](/docs/adr/ADR-DS-011-dokumentasjon.md): Docusaurus 3 som midlertidig dokumentasjonsplattform. Migreres når CMS-avklaringer med merkevare er på plass.
- [Kort fortalt](/docs/adr/oversikt.md): En rask, folkelig oversikt over hvorfor vi bygger Indeks selv og hvilke valg vi har tatt. For deg som vil ha helheten uten å lese alle ADR-ene.
- [Retningslinjer for Indeks designsystem](/docs/adr/retningslinjer.md): Disse retningslinjene er ikke arkitekturbeslutninger, men konvensjoner teamet har blitt enige om.
- [ADR-DS-XXX: [Beskrivende tittel]](/docs/adr/template.md): Mal for nye arkitekturbeslutninger i Indeks designsystem.

### grunnleggende

- [Native](/docs/grunnleggende/native.md): I hybridapper vises Indeks-komponenter i WebView-en til en native app. Brukeren skiller ikke mellom de to, og forventer derfor at web-delen oppfører seg som resten av appen.
- [Border](/docs/grunnleggende/tokens/border.md): Komponentene vi tilbyr har riktig border-radius og border-width som standard. Hvis du skal lage noe eget, kan du bruke border-variablene vi tilbyr.
- [Farger for Native](/docs/grunnleggende/tokens/farger-native.md): Fargene i Indeks kan bygges ut til native-kode. Pakken @sb1/indeks-tokens har en build-colors-kommando som genererer Kotlin-farger til Android og Color Assets til iOS, fra de samme tokenene som ligger bak web.
- [Farger for Web](/docs/grunnleggende/tokens/farger-web.md): Pakken @sb1/indeks-tokens inneholder fargetokens som brukes i hele designsystemet. På web trenger de aller fleste ikke å generere farger selv, for den ferdig bygde CSS-en inneholder alt du trenger. Har du et eget theme, kan du likevel generere din egen web-CSS med den samme build-colors-kommandoen som brukes for native (iOS/Android).
- [Fargeskalaer](/docs/grunnleggende/tokens/fargeskalaer.md): Et theme defineres med sju basisfarger: brand, success, info, danger, warning, gray og neutral. Ved build utvides hver av disse til en 20-trinns fargeskala (0–950), som blir til primitivene (--ii-primitive-*) de semantiske fargene peker på.
- [Introduksjon](/docs/grunnleggende/tokens/introduksjon.md): Design tokens er de minste byggesteinene i designsystemet. Det er navngitte variabler for visuelle verdier: farger, typografi, spacing, radius, skygger. I stedet for 16px eller #002776 skriver du --ix-spacing-sm eller --ix-color-foreground-main-default.
- [Spacing](/docs/grunnleggende/tokens/spacing.md): Avstandene i Indeks er faste px-verdier med navn, ikke tall du velger selv. De justerer seg på tre breakpoints, og hele skalaen kan skrus tettere eller romsligere med en density-modus.
- [Tailwind](/docs/grunnleggende/tokens/tailwind.md): Indeks kommer med egne utility-klasser med ix--prefiks
- [Z Index](/docs/grunnleggende/tokens/z-index.md): z-index bestemmer hvilket element som ligger øverst når to elementer overlapper. Problemet oppstår når hvert team velger tall selv 100 havner under en header med 999, og så begynner budkrigen.
- [Typografi](/docs/grunnleggende/typografi.md): Våre fonter

### hjem

Indeks er designsystemet til SpareBank 1. Her ligger komponentene, tokenene og retningslinjene teamene bygger på, slik at en løsning ser ut som SpareBank 1 og fungerer for alle som skal bruke den.

- [Indeks](/docs/hjem.md): Indeks er designsystemet til SpareBank 1. Her ligger komponentene, tokenene og retningslinjene teamene bygger på, slik at en løsning ser ut som SpareBank 1 og fungerer for alle som skal bruke den.

### kom-i-gang

- [Bidra](/docs/kom-i-gang/bidra.md): Enten du mangler en komponent, har forslag til forbedringer, eller har funnet noe som ikke fungerer som det skal, vil vi gjerne høre fra deg.
- [Designer](/docs/kom-i-gang/designer.md): Før du begynner
- [Kontakt](/docs/kom-i-gang/kontakt.md): Indeks blir best når vi snakker sammen. Vi setter stor pris på alle innspill, spørsmål og bidrag fra dere som bruker systemet.
- [Migrering fra FFE til Indeks](/docs/kom-i-gang/migrering.md): Indeks er ikke FFE med ny styling. Det er bygget opp på nytt, med en annen arkitektur, og på fem punkter må du derfor jobbe annerledes enn du er vant til. Denne siden går gjennom dem.
- [Testing](/docs/kom-i-gang/testing.md): Skriver du tester mot skjemaelementene i Indeks, trenger du én linje i testoppsettet først. Uten den finner ikke testen checkboxene dine, og feilmeldingen sier ingenting om hvorfor.
- [Utvikler](/docs/kom-i-gang/utvikler.md): Kom i gang med Indeks i prosjektet ditt. Velg teknologi under, så tilpasser guiden seg.

### komponenter

- [Accordion](/docs/komponenter/accordion.md): 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 `/`, så tastatur og skjermleser fungerer uten ekstra oppsett.
- [Button](/docs/komponenter/button.md): Button lar brukeren utføre en handling, som å sende inn et skjema, lagre endringer eller navigere videre i en prosess.
- [Card](/docs/komponenter/card.md): Card er én ting: en avgrenset, selvstendig innholdsenhet med fast ramme og bakgrunn. Et kort kan
- [Chip](/docs/komponenter/chip.md): Chip er små, interaktive komponenter som lar brukeren gjøre raske valg, filtrere innhold eller trigge handlinger. Chips brukes ofte i grupper og gir en kompakt og oversiktlig måte å presentere valg på.
- [Button chip](/docs/komponenter/chip/button.md): En button chip fungerer som en knapp og trigger en handling — for eksempel et hurtigvalg, et forslag eller et filter brukeren aktiverer. Den har ingen vedvarende valgt tilstand.
- [Checkbox chip](/docs/komponenter/chip/checkbox.md): En checkbox chip er en gruppe chips der brukeren kan velge ett eller flere alternativer samtidig — som kompakte filter- eller preferansevalg. Hvert valg er uavhengig av de andre.
- [Radio chip](/docs/komponenter/chip/radio.md): En radio chip er en gruppe chips der brukeren velger nøyaktig ett alternativ — som en kompakt segment-velger eller filtervalg. Å velge én chip fjerner automatisk valget på den forrige.
- [Removable chip](/docs/komponenter/chip/removable.md): En removable chip representerer et aktivt valg eller en verdi som brukeren kan fjerne — for eksempel et valgt filter. Den finnes kun i valgt tilstand (den eksisterer ikke før den er valgt) og vises med lyst aksent-fyll, aksent-kant og et kryss til høyre — samme valgt-uttrykk som radio chip og checkbox chip.
- [DropdownMenu](/docs/komponenter/dropdown-menu.md): DropdownMenu er en nedtrekksmeny for handlinger eller navigasjon. Menyen vises når brukeren interagerer med en trigger-knapp og lukkes automatisk ved valg, klikk utenfor eller Escape.
- [Icon](/docs/komponenter/icon.md): Ikon-komponenten viser SVG-ikoner fra SpareBank 1s CDN ved hjelp av CSS mask-image. Ikoner arver farge fra omgivende tekst.
- [Ikonbruk](/docs/komponenter/icon-analyse.md): Oversikt over alle Material Design-ikoner brukt i SB1-apper, med hvor mange apper som bruker hvert ikon. Basert på bruksdata fra SpareBank 1-apper.
- [InteractiveIcon](/docs/komponenter/interactive-icon.md): InteractiveIcon er en klikkbar ikon-flate — en kompakt knapp som bare viser et ikon. Den gir tydelig visuell tilbakemelding ved pekehvil, trykk og fokus, med en fargetone som kan styres av en status.
- [Message](/docs/komponenter/message.md): Message formidler status eller resultatet av en handling uten å avbryte flyten. Den finnes i fire varianter: informasjon, suksess, advarsel og feil. Komponenten brukes inline, tett på innholdet den forklarer, og kan strekkes til full bredde av forelderen.
- [Modal](/docs/komponenter/modal.md): Modal brukes til å vise innhold oppå eksisterende side og krever at brukeren forholder seg til innholdet før de kan fortsette. Komponenten fungerer som en tom container som fylles med innhold basert på behov. Den bygger på det native ``-elementet, så fokushåndtering, tastatur og skjermleser fungerer uten ekstra oppsett.
- [Pagination](/docs/komponenter/pagination.md): Pagination brukes for å dele inn større mengder innhold i flere sider og gjøre det enklere å navigere mellom dem. Komponenten brukes ofte i tabeller, søkeresultater, lister og andre visninger der alt innhold ikke vises samtidig.
- [Popover](/docs/komponenter/popover.md): En Popover brukes til å vise kontekstuell informasjon eller handlinger knyttet til et spesifikt element på siden. Popoveren vises når brukeren aktiverer et tilknyttet element, og plasseres i nærheten av dette elementet slik at sammenhengen er tydelig.
- [Grid](/docs/komponenter/primitives/grid.md): Grid er en layout-primitiv for å stable innhold i to dimensjoner — vertikalt og horisontalt. Den fungerer både som custom element (`) og som CSS-klasse (.ix-grid`).
- [Stack](/docs/komponenter/primitives/stack.md): Stack er en layout-primitiv for å stable innhold i én dimensjon — vertikalt eller horisontalt. Den fungerer både som custom element (`) og som CSS-klasse (.ix-stack`).
- [ProgressBar](/docs/komponenter/progress-bar.md): ProgressBar viser fremdriften i én sammenhengende prosess — enten som pågående progresjon (for eksempel opplasting) eller som status for at prosessen er fullført eller feilet. Komponenten er rent informativ og kan ikke motta brukerinput.
- [ReadMore](/docs/komponenter/read-more.md): ReadMore viser og skjuler én frittstående tekstblokk bak en klikkbar label. Den er nyttig for utdypende, sekundær informasjon som ikke alle trenger med en gang: brukeren ser labelen og åpner forklaringen kun ved behov. Komponenten bygger på native `/`, så tastatur og skjermleser fungerer uten ekstra oppsett.
- [Checkbox](/docs/komponenter/skjema/checkbox.md): Checkbox lar brukeren velge én eller flere alternativer fra en liste. Hvert valg er uavhengig av de andre, og flere kan være valgt samtidig.
- [CheckboxGroup](/docs/komponenter/skjema/checkbox-group.md): CheckboxGroup samler flere relaterte checkboxer i én gruppe der brukeren kan velge ett eller flere alternativer samtidig. Hvert valg er uavhengig av de andre.
- [Designvalg for CheckboxGroup](/docs/komponenter/skjema/checkbox-group-designvalg.md): Denne siden forklarer hvorfor CheckboxGroup er bygget som den er. Den er ment for de som er nysgjerrige på avveiningene bak komponenten. Du trenger den ikke for å bruke den. For bruk og API, se CheckboxGroup.
- [Combobox](/docs/komponenter/skjema/combobox.md): Combobox lar brukeren søke etter og velge ett eller flere alternativer fra en liste. Brukeren skriver for å filtrere, og valgte alternativer vises enten som verdi i feltet (single) eller som chips over feltet (flervalg).
- [Combobox i ren HTML](/docs/komponenter/skjema/combobox-html.md): Denne siden forklarer i detalj hvordan ` fungerer når du skriver ren HTML, Astro eller et annet ikke-React-miljø. Bruker du React, holder det å lese Combobox, der hele strukturen er skjult bak Combobox`-komponenten. For bruk, tilstander og API, se hovedsiden.
- [DateField](/docs/komponenter/skjema/date-field.md): DateField lar brukeren taste en dato i norsk format (dd.mm.åååå) eller åpne enhetens innebygde kalender via en knapp i feltet. Verdien som sendes videre er alltid ISO (åååå-mm-dd), uavhengig av hva som vises i feltet.
- [Label](/docs/komponenter/skjema/label.md): Label er ledeteksten til et skjemafelt.
- [PhoneNumberField](/docs/komponenter/skjema/phone-number-field.md): PhoneNumberField lar brukeren oppgi et telefonnummer med landkode. Komponenten setter sammen en søkbar landvelger (der brukeren velger land, ikke skriver tallkode) og et nummerfelt som formateres mens brukeren skriver, under én felles label. De to er uavhengige felt: hver kan ha sin egen feilmelding, og i React bindes de som to separate React Hook Form-felt.
- [RadioGroup](/docs/komponenter/skjema/radio-group.md): RadioGroup lar brukeren velge ett alternativ fra en liste av gjensidig utelukkende valg. Når ett valg gjøres, blir eventuelle tidligere valg automatisk fjernet.
- [Designvalg for RadioGroup](/docs/komponenter/skjema/radio-group-designvalg.md): Denne siden forklarer hvorfor RadioGroup er bygget som den er. Den er ment for de som er nysgjerrige på avveiningene bak komponenten. Du trenger den ikke for å bruke den. For bruk og API, se RadioGroup.
- [Select](/docs/komponenter/skjema/select.md): Select lar brukeren velge ett alternativ fra en nedtrekksliste. Komponenten skjuler alternativene til brukeren åpner listen, og brukes når det ikke er nødvendig å vise alle valg samtidig.
- [TextArea](/docs/komponenter/skjema/textarea.md): TextArea lar brukeren skrive inn lengre fritekst over flere linjer, som beskrivelser, meldinger eller begrunnelser.
- [TextField](/docs/komponenter/skjema/textfield.md): TextField er et inputfelt for kortere tekst eller tall, som kontonummer, e-postadresse eller beløp.
- [Formatering](/docs/komponenter/skjema/textfield-formatering.md): TextField kan formatere innholdet automatisk mens brukeren fyller ut: beløp med tusenskille, telefonnummer i grupper, kontonummer, fødselsnummer. Denne siden forklarer hvordan formatering virker, de to modusene, de tre måtene å definere en formatter på, og tilgjengelighetshensynene bak. For vanlig bruk og API, se TextField.
- [Tooltip](/docs/komponenter/skjema/tooltip.md): En Tooltip er en liten informasjonsboks som vises når brukeren holder musepekeren over, fokuserer på eller berører et element. Den brukes til å gi ekstra kontekst, forklaringer eller detaljer uten å forstyrre hovedinnholdet.
- [ValidationMessage](/docs/komponenter/skjema/validation-message.md): ValidationMessage viser en feilmelding knyttet til et skjemafelt eller en feltgruppe.
- [Spinner](/docs/komponenter/spinner.md): Spinner viser at noe lastes inn eller at en operasjon pågår. Den er ikke-interaktiv og kommuniserer utelukkende tilstand.
- [Surface](/docs/komponenter/surface.md): Surface er flaten flere ting ligger på: en region som samler flere beslektede elementer og
- [Tabs](/docs/komponenter/tabs.md): Faner lar brukeren veksle mellom likeverdige innholdsseksjoner på samme side — uten å navigere til en ny side. Bare én seksjon vises om gangen, og en horisontal fane-liste styrer hvilken. Fanene supplerer SegmentedControl, som brukes til gjensidig utelukkende tilstander og filtre.
- [Tag](/docs/komponenter/tag.md): Tag er en liten, ikke-interaktiv etikett som merker eller kategoriserer innhold — for eksempel en status, en egenskap eller et nøkkelord. Taggen bærer betydningen i teksten sin, og fargen støtter opp om hvilken type informasjon det er.
- [Typografi](/docs/komponenter/typografi.md): Typografikomponenter i Indeks. Størrelse settes med data-size-attributtet. Oversikten på siden viser hvilken størrelse som hører til hvilket nivå.


### monstre-og-maler

- [Deaktiverte tilstander](/docs/monstre-og-maler/deaktiverte-tilstander.md): Hovedregelen i Indeks er at du ikke bruker disabled. Det ser ut som en enkel måte å hindre feil, men det brukeren møter er en kontroll hen ikke får tak i, uten å få vite hvorfor eller hva som skal til.
- [Form-validering](/docs/monstre-og-maler/form-validering.md): Indeks sine form-komponenter er bring-your-own-validation: hver komponent tar en ferdig errorMessage-streng og viser den (og setter aria-invalid selv). Reglene og feilmeldingene overlater vi til et form-rammeverk og et skjema. Denne siden viser det anbefalte oppsettet med React Hook Form (RHF) og Valibot.
- [Layout](/docs/monstre-og-maler/layout.md): Indeks har utility-klasser for Flex og CSS Grid. Du skriver dem rett i markupen, så du slipper en egen CSS-fil for hver plassering.
- [Spacing](/docs/monstre-og-maler/spacing.md): Luft mellom elementer er noe containeren bestemmer, ikke elementet selv. Det er hele ideen bak spacing i Indeks, og den koker ned til fire regler:

### ordbok

Forklaringer på fagbegreper som brukes i Indeks-dokumentasjonen.

- [Ordbok](/docs/ordbok.md): Forklaringer på fagbegreper som brukes i Indeks-dokumentasjonen.

### retningslinjer

- [Farger](/docs/retningslinjer/farger.md): I Indeks bruker vi semantiske farger. En farge navngis etter hva den brukes til, ikke etter hvordan den ser ut: surface-main og fill-success, ikke «fjell» eller #E4002B.
- [Fargemodus (light og dark)](/docs/retningslinjer/farger/fargemodus.md): De semantiske fargevariablene i Indeks (--ix-color-*) har egne verdier for light og dark mode. Alle komponenter leser disse variablene, så de tilpasser seg automatisk.

### utility-klasser

- [Hitbox](/docs/utility-klasser/hitbox.md): Hitbox utvider det klikkbare arealet til et element uten å påvirke layout. Nyttig for å oppfylle
- [Native](/docs/utility-klasser/native.md): Utility-klasser for å kontrollere tekstmarkering, berøring og dra-og-slipp-oppførsel i hybridapper der webinnhold vises i en native app sin WebView.
- [Utility-klasser](/docs/utility-klasser/oversikt.md): En utility-klasse setter én CSS-property, eller et lite sett som hører sammen. Du kombinerer dem i markupen i stedet for å skrive egen CSS for hvert tilfelle, og komponentene i Indeks er i stor grad bygget på dem.