feat(nve-layout): layoutkomponenter

beslutninger.md

@@ -5,6 +5,18 @@ Vi skriver også om hvilke alternativer som ble vurdert og hvorfor enkelte alter
 
 Vi sorterer valgene etter tidspunkt for når de ble gjort, med de siste valgene øverst.
 
+## Layout-komponenter (juni 2026)
+
+Layout-komponentene (`nve-stack`, `nve-cluster`, `nve-grid`, `nve-box`) er strukturelle byggeklosser basert på prinsippene fra [Every Layout](https://every-layout.dev/).
+
+Fordelen med layout-komponenter er at man slipper å gjenta den samme layout CSS-en overalt i applikasjonen. Vanlige oppsett som vertikal stabling, horisontal gruppering og rutenett løses med en tag.
+
+En av ulempene med layout-komponenter er at de legger til et ekstra lag i DOM-en, og at man må sette seg inn i Every Layout for å bruke dem riktig.
+
+Komponentene for layout brukes frivillig, og er kun ment som et hjelpeverktøy for de som vil bruke dem. Trenger man egendefinert CSS eller andre verdier enn spacing tokens fra Designsystemet, kan man ikke bruke disse komponentene og må definere egen CSS.
+
+Hovedformålet med disse er å gjøre applikasjonene responsive og forbedre utvikleropplevelsen.
+
 ## Versjonering på pakkenivå fremfor komponentnivå (desember 2025)
 
 Versjonering på komponentnivå ville tillatt team å oppdatere kun de komponentene de trenger uten å måtte ta inn hele pakken. Dette kan virke attraktivt, men skaper flere utfordringer enn fordeler.

custom-elements-manifest.config.js

@@ -35,7 +35,7 @@ const cemInheritancePluginOptions = {
 };
 
 export default {
-  globs: ['src/components/**/*.component.ts'],
+  globs: ['src/components/**/*.component.ts', 'src/components/layouts/nve-layout-base.ts'],
   exclude: ['**/*.styles.ts', '**/*.test.ts'],
   dependencies: true,
   plugins: [

doc-site/.vitepress/config.mts

@@ -12,6 +12,17 @@ const componentsLinks = componentFiles.map((file) => {
   return { text: name, link: `/components/${name}` };
 });
 
+// Henter navn på alle filene i 'layout' mappe
+const layoutFiles = fs.readdirSync(path.resolve(__dirname, '../layout'));
+
+// Generer sidebar layout lenker (ekskluder oversiktssida)
+const layoutLinks = layoutFiles
+  .filter((file) => path.basename(file, path.extname(file)) !== 'layout-oversikt')
+  .map((file) => {
+    const name = path.basename(file, path.extname(file));
+    return { text: name, link: `/layout/${name}` };
+  });
+
 const figmaIcon = {
   svg: '<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 300" width="1667" height="2500"><style type="text/css">.st0{fill:#0acf83}.st1{fill:#a259ff}.st2{fill:#f24e1e}.st3{fill:#ff7262}.st4{fill:#1abcfe}</style><title>Figma.logo</title><desc>Created using Figma</desc><path id="path0_fill" class="st0" d="M50 300c27.6 0 50-22.4 50-50v-50H50c-27.6 0-50 22.4-50 50s22.4 50 50 50z"/><path id="path1_fill" class="st1" d="M0 150c0-27.6 22.4-50 50-50h50v100H50c-27.6 0-50-22.4-50-50z"/><path id="path1_fill_1_" class="st2" d="M0 50C0 22.4 22.4 0 50 0h50v100H50C22.4 100 0 77.6 0 50z"/><path id="path2_fill" class="st3" d="M100 0h50c27.6 0 50 22.4 50 50s-22.4 50-50 50h-50V0z"/><path id="path3_fill" class="st4" d="M200 150c0 27.6-22.4 50-50 50s-50-22.4-50-50 22.4-50 50-50 50 22.4 50 50z"/></svg>',
 };
@@ -32,6 +43,7 @@ export default defineConfig({
     nav: [
       { text: 'Introduksjon', link: '/introduction/home' },
       { text: 'Komponenter', link: `/components/Komponentoversikt.html` },
+      { text: 'Layout', link: '/layout/layout-oversikt' },
       { component: 'ThemeSelect' },
     ],
     outlineTitle: 'På denne sida',
@@ -60,7 +72,7 @@ export default defineConfig({
               { text: 'Commit-meldinger', link: '/introduction/forDesigner/commitMessages' },
             ],
           },
-                    {
+          {
             text: 'Designelementer',
             items: [
               { text: 'Tokens', link: '/introduction/designelementer/tokens' },
@@ -75,6 +87,10 @@ export default defineConfig({
         ],
       },
       { text: 'Komponenter', items: componentsLinks },
+      {
+        text: 'Layout',
+        items: [{ text: 'Layout-komponenter', link: '/layout/layout-oversikt' }, ...layoutLinks],
+      },
     ],
     socialLinks: [
       { icon: 'github', link: 'https://github.com/NVE/Designsystem', ariaLabel: 'Link til kildekoden i Github' },

doc-site/.vitepress/theme/index.ts

@@ -16,7 +16,6 @@ import LinkButton from './components/LinkButton.vue';
 import PageHeader from './components/PageHeader.vue';
 import ComponentOverview from './components/ComponentOverview.vue';
 import ThemeSelect from './components/ThemeSelect.vue';
-import ColorList from './components/ColorList.vue';
 import TypographyTable from './components/TypographyTable.vue';
 import { cssTokenState } from './cssTokenState';
 import { useCurrentTheme, Theme } from './composables/useCurrentTheme';
@@ -70,7 +69,7 @@ export default {
     if (!import.meta.env.SSR) {
       // siden VitePress bygges via SSR, vi må sikre at våre web komponenter lastes ned i nettleseren bare
       // derfor importerer vi alle komponenter når miljø ikke er SSR
-      const components = import.meta.glob('../../../src/components/*/*.component.ts');
+      const components = import.meta.glob('../../../src/components/**/*.component.ts');
 
       // Lese inn nve_theme.css for å hente ut css variabler
       const styles = import.meta.glob('./styles/nve_theme.css', { query: '?raw', import: 'default' });
@@ -97,7 +96,6 @@ export default {
     app.component('PageHeader', PageHeader);
     app.component('ComponentOverview', ComponentOverview);
     app.component('ThemeSelect', ThemeSelect);
-    app.component('ColorList', ColorList);
     app.component('TypographyTable', TypographyTable);
     app.component('NveTableDemo', NveTableDemo);
 

doc-site/layout/layout-oversikt.md

@@ -0,0 +1,54 @@
+<PageHeader title="Layout-komponenter" imagePath="developer" pageLevel=1></PageHeader>
+
+Layout-komponentene er strukturelle byggeklosser basert på prinsippene fra [Every Layout](https://every-layout.dev/).
+De håndterer plassering og fordeling av innhold uten å binde seg til visuell stil og kan kombineres fritt for å bygge opp sider og seksjoner.
+
+## Hvorfor bruke dem?
+
+Du slipper å skrive egen CSS for vanlige oppsett, og avstander hentes fra designsystemets tokens. Det gir konsistente sider, raskere utvikling og mindre vedlikehold når designet endres.
+
+## Når skal du bruke layout-komponenter?
+
+Bruk layout-komponentene når du vil:
+
+- Stable elementer vertikalt med konsistent mellomrom (`nve-stack`)
+- Gruppere elementer horisontalt med automatisk linjebryting (`nve-cluster`)
+- Lage et responsivt rutenett (`nve-grid`)
+- Gi et element definert padding og bakgrunn (`nve-box`)
+
+## Prinsipper
+
+Layout-komponentene har ingen farger, fonter eller annen visuell stil, de styrer kun struktur og plassering. De er ment å kombineres, og bryr seg ikke om hva som ligger inni dem.
+
+## Eksempel på bruk
+
+Layout-komponentene er laget for å kombineres. Et kontaktskjema er et typisk eksempel som bruker alle fire: `nve-box` gir kortet ramme og padding, `nve-stack` stabler feltene vertikalt, `nve-grid` legger fornavn og etternavn ved siden av hverandre og bryter til en kolonne på smale skjermer. `nve-cluster` plasserer knappene nederst.
+
+<CodeExamplePreview>
+
+```html
+<nve-box padding="large" background="--color-neutrals-background-canvas">
+  <nve-stack>
+    <nve-heading level="3">Kontakt oss</nve-heading>
+    <p>Fyll ut skjemaet, så tar vi kontakt så raskt vi kan.</p>
+    <nve-grid gap="small" min="220px">
+      <nve-input label="Fornavn"></nve-input>
+      <nve-input label="Etternavn"></nve-input>
+    </nve-grid>
+    <nve-input label="E-post" type="email"></nve-input>
+    <nve-textarea label="Melding"></nve-textarea>
+    <nve-cluster gap="small" justify="flex-end">
+      <nve-button variant="ghost">Avbryt</nve-button>
+      <nve-button variant="primary">Send</nve-button>
+    </nve-cluster>
+  </nve-stack>
+</nve-box>
+```
+
+</CodeExamplePreview>
+
+<img src="../assets/images/layout-visualisering.png" width="690" alt="Visualisering av layoutkomponentene (Grid, Stack, Cluster og Box) i Designsystemet.">
+
+## Felles spacing-props
+
+Alle layout-komponenter arver `padding`, `margin`, `padding-block`, `padding-inline`, `margin-block` og `margin-inline` fra en basis layoutklasse. Verdiene er låst til spacing-tokenene i designsystemet.

doc-site/layout/nve-box.md

@@ -0,0 +1,108 @@
+# nve-box
+
+`nve-box` pakker innhold i en boks med konsistent padding.
+
+I de aller fleste tilfeller skal du bruke `padding`. `padding` er knyttet direkte til spacing-tokenene i designsystemet og sikrer at paddingen er konsistent på tvers av sider og komponenter.
+
+## Padding
+
+`padding` setter padding rundt innholdet ved bruk av et spacing-token. Hvis `padding` ikke er satt, brukes `medium` som standard.
+
+<CodeExamplePreview containerGridTemplateColumns="repeat(3, 1fr)" containerItemsAlign="start">
+
+```html
+<nve-box padding="small" background="--color-neutrals-background-canvas">
+  <div style="padding: 0.75rem; background: var(--color-neutrals-background-secondary)"></div>
+</nve-box>
+<nve-box background="--color-neutrals-background-canvas">
+  <div style="padding: 0.75rem; background: var(--color-neutrals-background-secondary)"></div>
+</nve-box>
+<nve-box padding="large" background="--color-neutrals-background-canvas">
+  <div style="padding: 0.75rem; background: var(--color-neutrals-background-secondary)"></div>
+</nve-box>
+```
+
+</CodeExamplePreview>
+
+## Bakgrunn
+
+`background` setter en tokenbasert bakgrunnsfarge på boksen. Gyldige verdier kommer fra neutrals background-tokensene.
+
+<CodeExamplePreview containerGridTemplateColumns="repeat(3, 1fr)" containerItemsAlign="start">
+
+```html
+<nve-box background="--color-neutrals-background-canvas">
+  <nve-paragraph>canvas</nve-paragraph>
+</nve-box>
+<nve-box background="--color-neutrals-background-primary">
+  <nve-paragraph>primary</nve-paragraph>
+</nve-box>
+<nve-box background="--color-neutrals-background-primary-contrast">
+  <nve-paragraph>primary-contrast</nve-paragraph>
+</nve-box>
+<nve-box background="--color-neutrals-background-secondary">
+  <nve-paragraph>secondary</nve-paragraph>
+</nve-box>
+<nve-box background="--color-neutrals-background-secondary-dim">
+  <nve-paragraph style="color: var(--color-neutrals-foreground-inverted)">secondary-dim</nve-paragraph>
+</nve-box>
+<nve-box background="--color-neutrals-background-tertiary-dim">
+  <nve-paragraph style="color: var(--color-neutrals-foreground-inverted)">tertiary-dim</nve-paragraph>
+</nve-box>
+```
+
+</CodeExamplePreview>
+
+## Nøsting
+
+Bokser kan nøstes for å bygge opp et hierarki av padding.
+
+<CodeExamplePreview>
+
+```html
+<nve-box padding="large" background="--color-neutrals-background-canvas">
+  <nve-box padding="small" background="--color-neutrals-background-secondary">
+    <div style="padding: 0.75rem; background: var(--color-neutrals-background-canvas)"></div>
+  </nve-box>
+</nve-box>
+```
+
+</CodeExamplePreview>
+
+## Eksempel på bruk
+
+En boks med konsistent padding rundt en tekst.
+
+<CodeExamplePreview>
+
+```html
+<nve-box background="--color-neutrals-background-secondary">
+  <nve-paragraph>Innhold med jevn padding rundt.</nve-paragraph>
+</nve-box>
+```
+
+</CodeExamplePreview>
+
+Samme innhold uten `nve-box` hvor teksten ligger helt inntil kanten.
+
+<CodeExamplePreview>
+
+```html
+<div style="background: var(--color-neutrals-background-secondary)">
+  <nve-paragraph>Innhold med null padding rundt.</nve-paragraph>
+</div>
+```
+
+</CodeExamplePreview>
+
+## Egenskaper
+
+| Egenskap         | Type            | Standard | Beskrivelse                                                                              |
+| ---------------- | --------------- | -------- | ---------------------------------------------------------------------------------------- |
+| `background`     | `BoxBackground` | —        | Tokenbasert bakgrunnsfarge. Gyldige verdier er `--color-neutrals-background-*`-tokenene. |
+| `padding`        | `SpacingToken`  | `medium` | Tokenbasert padding på alle sider. Visuell standard er `medium` via CSS.                 |
+| `padding-block`  | `SpacingToken`  | —        | Overstyrer `padding` i blokk-retning (topp/bunn).                                        |
+| `padding-inline` | `SpacingToken`  | —        | Overstyrer `padding` i inline-retning (venstre/høyre).                                   |
+| `margin`         | `SpacingToken`  | —        | Tokenbasert margin på alle sider.                                                        |
+| `margin-block`   | `SpacingToken`  | —        | Overstyrer `margin` i blokk-retning (topp/bunn).                                         |
+| `margin-inline`  | `SpacingToken`  | —        | Overstyrer `margin` i inline-retning (venstre/høyre).                                    |