<lm-stat> – Nøkkeltall / Stat

Om komponenten

Kanonisk navn: <lm-stat>
Synonymer: metrikk, nøkkeltall, stat, metric, sammendragsbeløp, kpi
Kategori: innhold, data
ARIA-mønster: Ikke aktuelt - Ren visningskomponent uten interaksjon - <dl>/<dt>/<dd> gir allerede riktig semantikk uten behov for et eget ARIA-mønster.
Parts: stat, etikett, verdi
Native-first-vurdering: HTML har ingen egen "stort tall med etikett"-primitiv, men beskrivelseslisten (<dl>) er det nærmeste native semantiske paret for term/verdi. Komponenten legger kun til delt, opinionert visningsstørrelse (--font-size-display) og tabular-nums-styling rundt denne native strukturen.
Nettleserstøtte: Ingen spesielle forbehold - kun bredt støttede, stabile plattform-API-er.
Design-tokens: var(--font-size-display, ...), var(--font-size-small, ...), var(--font-weight-bold, ...), var(--line-height-tight, ...), var(--opacity-muted, ...)
Sist endret: 19. september 2026
Brukt: 2 steder

Formål

Viser ett enkelt, fremtredende nøkkeltall med en valgfri, dempet etikett over - mønsteret man ser i dashboard-apper ("Denne måneden" / "12 340 kr"). Bruker en semantisk beskrivelsesliste (<dl>/<dt>/<dd>) internt, ikke generiske <p>/<span>-elementer, slik at etikett og verdi har en ekte term/beskrivelse-relasjon for skjermlesere.

Egner seg for

Ett enkelt, dominerende tall per flate - et pengebeløp, en varighet, et antall - med en kort kontekst-etikett.
Dashboard-/oversiktssider som skal fremheve én nøkkeltall-verdi fremfor en full tabell eller et diagram.

Egner seg ikke for

Flere sammenlignbare tall side om side med samme vekt - bruk i stedet flere <lm-stat>-elementer inni en <lm-grid>, eller et diagram (lm-chart-bar/lm-chart-line/lm-chart-pie) hvis dataene faktisk skal sammenlignes visuelt.
Løpende, redigerbar verdi i et skjema - dette er en ren visningskomponent uten input-semantikk.

Bruk

<script type="module" src="/designsystem/komponenter/innhold/stat/stat.js"></script>

<lm-stat label="Denne måneden">12 340 kr</lm-stat>

Prøv selv

Rediger koden under - resultatet oppdateres live.

Attributter

Attributt	Type	Standard	Beskrivelse
`label`	`string`	null	Attributt. Kort etikett vist dempet over selve verdien, f.eks. "Denne måneden". Utelates helt (ingen tomt rom) hvis attributtet mangler.

Slots

Slot	Beskrivelse
(standard)	Selve verdien - typisk kort tekst (et formatert beløp, en varighet, et antall). Vises stort og fett med tabular-nums for stabil sifferbredde.

Parts

Part	Beskrivelse
`stat`	Den ytre `<dl>`-containeren.
`etikett`	`<dt>`-elementet med etiketten.
`verdi`	`<dd>`-elementet med selve verdien.

Styling med ::part()

Hver part over kan restyles direkte fra et vanlig, ytre stilark - uten å måtte endre selve komponenten eller duplisere den:

lm-stat::part(stat) {
    /* egne stiler for "Den ytre `<dl>`-containeren." */
}

lm-stat::part(etikett) {
    /* egne stiler for "`<dt>`-elementet med etiketten." */
}

lm-stat::part(verdi) {
    /* egne stiler for "`<dd>`-elementet med selve verdien." */
}

Tilgjengelighet

Bruker native <dl>/<dt>/<dd>-semantikk uten egne ARIA-roller. Skjermlesere annonserer etiketten som term og verdien som tilhørende beskrivelse.

label-attributtet rendres som <dt> - utelates helt fra DOM-treet (ingen tom <dt>) når attributtet mangler, slik at skjermlesere ikke annonserer en tom term.
Selve verdien får font-variant-numeric: tabular-nums for stabil siffer-bredde, en ren visuell detalj uten tilgjengelighetskonsekvens.

Detaljer

Erstatter den tidligere prosjektspesifikke CSS-klassen .sammendrag-belop i okonomi/styles.css.
Bruker den nye --font-size-display-tokenen (designsystem/tokens/typografi/), lagt til spesifikt for denne typen store, enkeltstående tall.

Referanser

Se også:

../../data-visualisering/chart-bar/index.html - for sammenlignbare tall som faktisk skal visualiseres mot hverandre, i stedet for ett enkeltstående nøkkeltall.

Brukes av:

okonomi/index.html - "Denne måneden"-sammendragsbeløpet på Hjem-fanen.
okonomi/index.html og okonomi/formue/index.html - nettoformue-tallet.

Avhengigheter: Ingen