Hopp til innhold
Aksel

Grunnleggende

Endringslogg

År
Kategori
Februar 2026

  • Kode. 13. februar 2026

    Versjon 8.4.1

    @navikt/ds-css

    • Combobox: Single-select typo now scales based on 'size'-prop (#4638)

  • Kode. 11. februar 2026

    Versjon 8.4.0

    @navikt/ds-react

    • Timeline: Row label now supports React.ReactNode. (#4626)
    • ToggleGroup: Remove unnecessary useEffect (#4625)
    • Switch: Remove unnecessary useEffect (#4620)
    • useEventListener: Add return type to interface (#4632)
    • Combobox: Handle scenario with no options + filteredOptions. (#4627)

    @navikt/ds-css

    • ActionMenu: SubTrigger-icon is now right aligned, updated open-transition effect. (#4612)

  • Kode. 6. februar 2026

    Versjon 8.3.0

    @navikt/ds-react

    • Tooltip: Updated prop 'keys' to allow for multiple shortcuts. (#4604)

    @navikt/ds-css

    • Tooltip: Updated prop 'keys' to allow for multiple shortcuts. (#4604)
    • Chat: Fix avatar size when using icon from aksel-icons (#4608)

  • Design. 5. februar 2026

    Maler i Figma er oppdatert til v8

    Malene i Figma er nå over på Aksel v8 + noen relaterte fikser.

    • Oppdaterte fila 01 Aksel Templates til v8 (Figma). Alle malene bruker nye tokens og komponenter. Layouten simulerer Primitives i kode (Box, VStack, etc.)
    • La til maler for støttesidene 404 og 5XX i fila 01 Aksel Templates til v8 (Figma).
    • La til nav.no header og footer i 02 Aksel Components fila (Figma). Disse komponentene må brukes som placeholdere i skissene. De er ikke garantert 1:1 med kodepakka Dekoratøren. Figma-komponentene støtter darkmode, men det gjør ikke Dekoratøren i kode per 5. februar 2026.
    • Dokumentasjonen av mal for introsiden er oppdatert med InfoCard.

  • Kode. 3. februar 2026

    Versjon 8.2.2

    @navikt/ds-react

    • ExpansionCard: Remove redundant class name (#4602)
    • AccordionItem: Remove redundant class name (#4602)

    @navikt/ds-css

    • ExpansionCard: Remove redundant class name (#4602)
    • AccordionItem: Remove redundant class name (#4602)

  • Kode. 3. februar 2026

    Versjon 8.2.1

    @navikt/aksel

    • CLI: Remove redundant v8 codemods, and fix issue when running v8-tokens together with other codemods. (#4599)
Januar 2026

  • Kode. 29. januar 2026

    Versjon 8.2.0

    @navikt/ds-react

    • ActionMenu: Added support for right aligned icons on items (#4545)

    @navikt/ds-css

    • ActionMenu: Added support for right aligned icons on items (#4545)

  • Design. 26. januar 2026

    Justering på Alets og InfoCard

    Takket være mange gode bug-rapporter og innspill til forbedring har vi gjort noen justeringer på LocalAlert, GlobalAlert og InfoCard.

    LocalAlert

    • Justert slik at padding top/bottom ikke bryr seg om lukkeknappen, som reduserer høyden til headeren.
    • Ikon og lukkeknapp er nå sentrert om overskriften er på 1 linje og toppjustert om overskriften går over flere linjer.
    • Lagde en ny Slot-komponent som er demotekst. Når innholdet er vanlig tekst trenger dere ikke å bytte ut Slot’en.

    GlobalAlert

    • Samme endringer som LocalAlert.
    • La til proppen «centered» for å styre om innholdet er midtstilt eller venstrestilt.

    InfoCard

    • Samme endringer som LocalAlert.

  • Kode. 22. januar 2026

    Versjon 8.1.0

    @navikt/ds-react

    • ActionMenu: When using keyboard changed it to focus on ActionMenu.Content instead of first ActionMenu.Item, allowing non-clickable content to be focusable (#4522)
    • Accordion: Warn when only one item, or multiple instances after each other. (#4525)
    • Internal: Updated DismissableLayer-API for better event-batching. (#4524)
    • Internal: Refactor utility structure. (#4505)
    • Fix RSC related issue when using asChild. (#4523)

    @navikt/ds-css

    • Clean up some deprecated/invalid CSS (#4540)

    @navikt/aksel

    • CLI: Set min-requirement for node to v22. (#4546)

  • Kode. 19. januar 2026

    Versjon 8.0.1

    @navikt/ds-react

    • DatePicker: Add prop fixedWeeks to DatePickerProps (#4507)
    • FileUpload.Item: Fix link-color. (737f9e4)
    • Accordion: Avoid AccordionContent inheriting app-color for all text. (#4514)

    @navikt/ds-css

    • FileUpload.Item: Fix link-color. (737f9e4)

  • Dokumentasjon. 15. januar 2026

    Fremhevet

    Versjon 8

    🎉 Ny major-versjon - Darkside er nå standard

    Aksel v8.0.0 markerer overgangen til "The Darkside", vårt nye theming-system. Oppdateringen kommer med innebygd støtte for lys og mørk modus, lettere theming/farging av komponenter og en liste med andre forbedringer.

    Vi har laget en egen migreringsguide for ta deg gjennom oppdateringen.

    Dokumentasjon for forrige versjon finnes på aksel-v7.nav.no.

    Hva er nytt?

    • Dark mode: Alle komponenter har fått støtte for dark mode.
    • Designtokens: En komplett omskriving av våre designtokens for å støtte theming og dark mode.
    • Oppdatert CSS: Bruker nye tokens og fått CSS-layers bygget inn. Bundle-size er redusert med ~40 kB.
    • Oppdatert Tailwind CSS-konfigurasjon: Bruker nye tokens, støtter theming og kommer med innebygd ax-prefiks for enklere separasjon mellom Aksel og din egen konfigurasjon.
    • Ny Theme-komponent for å håndtere temabytte.
    • Oppdatert dokumentasjon og ny token-oversikt.

    Figma

    I Figma er den nye versjonen satt opp som 2 filer. "Aksel Tokens" inneholder alle styling-variabler og "Aksel Components" inneholder alle komponentene. For nye filer skal disse bibliotekene bli lagt til automagisk. For eldre filer må du inn og bytte manuelt. Du skal fjerne det gamle biblioteket (Aksel UI kit) og legge til de nye.

    Figma variables

    Med oppdateringen bruker "Aksel Tokens" Figmas nye variabler. Det er sentralt distribuerte styling-variabler. Tidligere kunne vi kun distribuere farger sentralt gjennom stiler. Nå kan vi distribuere verdier for padding, gap og radius + målrettede farger for fill, border og text.

    @navikt/ds-tokens

    Alle fargetokens er endret til å støtte nytt theming- og fargesystem. Tokens er nå prefikset med --ax.

    Bedre scopet imports uten /dist/

    • @navikt/ds-tokens/css - CSS custom properties
    • @navikt/ds-tokens/js - JavaScript/TypeScript tokens
    • @navikt/ds-tokens/scss - SCSS-variabler
    • @navikt/ds-tokens/less - LESS-variabler

    Fjernet /darkside imports.

    Kjør npx @navikt/aksel@latest codemod v8-tokens for interaktiv token-migrering.

    @navikt/ds-css

    All CSS er oppdatert og skrevet om for å støtte ny theming og farging av komponenter. Dette har redusert CSS-bundle med ~20%.

    CSS-layers er også innebygd (med fallback) for å håndtere CSS-cascade bedre. Dette gjør at CSS-en fra Aksel alltid vil ha spesifisitet 0.

    • Alle klassenavn fra Aksel starter nå med .aksel, ikke .navds
    • Vi bruker nå outline til fokusmarkering for bedre støtte i høykontrast-modus.
    • CSS-strukturen til de fleste komponentene er oppdatert. Hvis du overskriver klassenavn fra Aksel kan dette være en god mulighet til å rydde opp litt eller melde feil/mangler til oss.
    • Kun index.css og index.min.css er nå tilgjengelig via CDN.
    • /darkside-import er fjernet.

    @navikt/ds-react

    • De fleste komponenter bruker nå data-color for å endre farge, som erstatning for egne variant-verdier.
    • Theme-komponenten er ikke lenger nødvendig for å støtte theming. Trenger bare bytte mellom light- og dark-klasser.

    Komponenter med avviklede props

    Dette er endringer som vil kunne skape “breaking changes” i koden din og må gås gjennom.

    • Accordion: headingSize
    • List: title, description og headingTag
    • Modal: navds-modal__document-body css-klasse fjernet
    • Popover: arrow
    • Page: background
    • Box: Gamle background, borderColor og shadow-verdier

    Komponenter med props som blir avviklet i fremtiden

    Dette er endringer som ikke vil brekke noe nå, men vil bli oppdatert i fremtidige versjoner.

    • Accordion: variant
    • Chips: variant
    • Chat: variant
    • CopyButton: variant
    • Tag: Legacy-varianter
    • Link: variant
    • BoxNew-komponent

    Button

    Varianter er nå primary, secondary og tertiary

    • Neutral-variant er data-color="neutral"
    • Danger-variant er data-color="danger"

    Tag

    Varianter er nå outline, moderate og strong.

    data-color brukes for å endre farge i Tag.

    Link

    variant="subtle" tilsvarer nå neutral.

    Checkbox og Radio

    Strukturen for label og description er oppdatert.

    @navikt/ds-tailwind

    Alle tailwind-klasser fra Aksel sin config har nå ax-prefix. Dette gjør det lettere å identifisere hva som er standard “tailwindcss” og hva som er “Aksel”.

    Tw
    md:bg-surface-info
    ax-md:bg-ax-bg-info-moderate

    Siden configen er en refleksjon av token-pakken, vil de fleste tokens også være oppdatert. @navikt/ds-tailwind/darkside-tw3-import er dessuten fjernet.

    Vi bruker også tokens direkte i tailwind-config, slik at theming fungerer ut av boksen med tailwind.

    @navikt/aksel-stylelint

    • Lagt til regel "aksel/no-legacy-classes"
    • Fjernet regel "aksel/design-token-no-component-reference" siden vi ikke har noen komponenttokens lenger.
    • Justert eksisterende regler i henhold til nye tokens/prefikser.

    @navikt/aksel (CLI)

    Migreringen til versjon 8 kan oppleves som stor da alle tokens må oppdateres, men vi har laget flere “codemods” som hjelper deg gjennom denne prosessen.

    BASH
    npx @navikt/aksel@latest codemod <codemod>
    • v8: Interaktiv migrering av hele versjon 8.
    • v8-tokens: Interaktiv migrering til nye tokens.
    • v8-box: Migrerer background, borderColor og shadow til nye tokens der mulig. Endrer også navn og import for alle instanser av Box.New og BoxNew til Box.
    • v8-box-new: Oppdaterer navn og import for alle instanser av Box.New og BoxNew til Box.
    • v8-prop-deprecate: Fjerner avviklede props fra Accordion, Popover og Page.
    • v8-list: Prøver å migrere List ved å wrappe med Box og "flytte" props title og description til hhv. Heading og BodyShort.
    • v8-primitive-spacing: Oppdaterer alle 'Primitives' til nye spacing-tokens.
    • v8-token-spacing: Oppdaterer all bruk av spacing-tokens i CSS, SCSS og LESS.
    • v8-token-spacing-js: Oppdaterer all bruk av spacing-tokens i JS.
    • v8-tag-variant: Oppdaterer variant + data-color.
    • v8-toggle-group-variant: Oppdaterer variant + data-color.
    • v8-accordion-variant: Oppdaterer variant + data-color.
    • v8-chips-variant: Oppdaterer variant + data-color.
    • v8-button-variant: Oppdaterer variant + data-color.
    • v8-link-variant: Oppdaterer variant + data-color.

  • Kode. 15. januar 2026

    Versjon 8.0.0

    @navikt/ds-react

    • New design with theming support - See https://aksel.nav.no/grunnleggende/endringslogg/versjon-8 for more info (#4283)

    @navikt/ds-tokens

    • New design with theming support - See https://aksel.nav.no/grunnleggende/endringslogg/versjon-8 for more info (#4283)

    @navikt/ds-css

    • New design with theming support - See https://aksel.nav.no/grunnleggende/endringslogg/versjon-8 for more info (#4283)

    @navikt/ds-tailwind

    • New design with theming support - See https://aksel.nav.no/grunnleggende/endringslogg/versjon-8 for more info (#4283)

    @navikt/aksel

    • New design with theming support - See https://aksel.nav.no/grunnleggende/endringslogg/versjon-8 for more info (#4283)

    @navikt/aksel-stylelint

    • New design with theming support - See https://aksel.nav.no/grunnleggende/endringslogg/versjon-8 for more info (#4283)

  • Kode. 15. januar 2026

    Versjon 7.40.0

    @navikt/aksel-icons

    • Icons: New icon MagnifyingGlassCheckmark (#4489)

    @navikt/ds-react

    • DatePicker/MonthPicker: Remove role=dialog from popover (#4463)

  • Kode. 14. januar 2026

    Versjon 7.39.1

    @navikt/ds-react

    • Dialog: Removed 'aria-expanded' from Dialog.Trigger. (#4478)

    @navikt/ds-css

    • Modal, Dialog: Handle scroll for extreme zoom-levels better. (#4488)

  • Kode. 12. januar 2026

    Versjon 7.39.0

    @navikt/ds-react

    • LocalAlert, InfoCard: Reduced default header height. (91f3f8a)
    • GlobalAlert: Reduced default header height and added centered content prop. (#4476)
    • ReadMore: Removed tabIndex 0 from content. (#4464)

    @navikt/ds-css

    • LocalAlert, InfoCard: Reduced default header height. (91f3f8a)
    • GlobalAlert: Reduced default header height and added centered content prop. (#4476)
    • Dialog: Handle SR-only elements inside Dialog.Body better. Moved elements in Footer to flex-end. (#4457)
    • Darkside: ExpansionCardContent typography is no longer affected by 'app-color'. (#4460)
    • ReadMore: Removed focus styling for content, reverting #4116. (#4464)

  • Kode. 8. januar 2026

    Versjon 7.38.0

    @navikt/ds-react

    • Dialog: Now interacts better with Modal and Datepicker. (#4455)
    • ActionMenu: Trigger handles click while inside web-component better. (#4428)
    • Internal: Updated mergedRef-utility. (#4434)

    @navikt/ds-css

    • Dialog: Fixed z-index issue with backdrop. (#4455)
    • Dialog: Now has border in light-mode. (#4452)

    @navikt/aksel

    • CLI: Now has interactive codemod-selection for all major-versions. (#4427)
    • CLI: Updated codemod 'v8-primitive-spacing' to migrate HGrid-component. (d631eef)

  • Dokumentasjon. 5. januar 2026

    Dialog er lansert!

    Fra versjon 7.37.0 er den nye Dialog-komponenten tilgjengelig 🎉

    Dokumentasjon

    Hva er Dialog?

    Dialog er et midlertidig vindu som åpnes på siden. Dialogen fanger brukerens oppmerksomhet og fokus, samtidig som konteksten til nettsiden beholdes. Den er nyttig når brukeren må ta stilling til informasjon eller fokusere på en spesifikk oppgave.

    I praksis er dette en oppdatert og forbedret versjon av dagens Modal.

    Dialog versus Modal

    Dialog er ment som en ny og forbedret versjon av dagens Modal, og skal erstatte Modal 100% på sikt.

    • Fleksibel plassering: center, left, right, bottom og fullscreen.
    • Innebygd navngiving av Dialog ved bruk av Dialog.Title
    • Bedre fokushåndtering ved åpning/lukking.
    • Innebygd state-håndtering med Dialog.Trigger og Dialog.CloseTrigger.
    • Entry- og exit-animasjon.

    Dialog garanterer også open/close state, noe dagens Modal ikke gjør da nettlesere håndterer html-elementet <dialog /> ulikt.

    Bedre API

    Dialog kommer med et enklere API å forholde seg til, da komponenten er basert mer på komposisjon. Du trenger ikke selv håndtere open/close-state eller en ref.

    Modal
    <div>
      <Button onClick={() => ref.current?.showModal()}>Åpne modal</Button>
      <Modal ref={ref} header={{ heading: "Overskrift" }}>
        <Modal.Body>
          <BodyLong>>Body</BodyLong>
        </Modal.Body>
        <Modal.Footer>
          <Button type="button" onClick={() => ref.current?.close()}>
            Primær
          </Button>
          <Button
            type="button"
            variant="secondary"
            onClick={() => ref.current?.close()}
          >
            Sekundær
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
    Dialog
    <Dialog>
      <Dialog.Trigger>
        <Button>Åpne dialog</Button>
      </Dialog.Trigger>
      <Dialog.Popup>
        <Dialog.Header>
          <Dialog.Title>Overskrift</Dialog.Title>
          <Dialog.Description>En kort beskrivelse av dialogen.</Dialog.Description>
        </Dialog.Header>
        <Dialog.Body>
          <BodyLong>Body</BodyLong>
        </Dialog.Body>
        <Dialog.Footer>
          <Dialog.CloseTrigger>
            <Button>Primær</Button>
          </Dialog.CloseTrigger>
          <Dialog.CloseTrigger>
            <Button variant="secondary">Sekundær</Button>
          </Dialog.CloseTrigger>
        </Dialog.Footer>
      </Dialog.Popup>
    </Dialog>

  • Kode. 5. januar 2026

    Versjon 7.37.0

    @navikt/ds-react

    • Dialog: 🎉 New component Dialog. (#4262)
    • Internals: Update internal utilities. (#4432)
    • Internal: Updated internal createContext utility. (#4433)

    @navikt/ds-tokens

    • Tokens: Updated --ax-bg-overlay token. (#4262)

    @navikt/ds-css

    • Dialog: 🎉 New component Dialog. (#4262)