En komponent er en CSS-klasse og et HTML-mønster. Ingen rammeverk, ingen byggsteg. Dokumentkomponentene først, dashboardkomponentene under.

• Dokumenthode
• Nøkkelfakta
• Tabell
• Bilder og kort
• Galleri
• Merknad
• Kontakt
• Kolofon og fotnote
• Ark
• Etiketter
• Toppstripe
• Nøkkeltall
• Graf med datatabell
• Status
• Statusfarge og gruppekort
• Ikoner
• Fremdrift
• Skjema
• Verktøylinje og nedtrekk
• Popover

Dokumenthode

Overtittel i sperret versal, tittel i vekt 500, kursiv undertittel. Sentrert. .nd-header gir luft rundt; .nd-kicker, h1, .nd-subtitle gjør resten. Ingressen .nd-lead følger gjerne etter.

<header class="nd-header">
  <p class="nd-kicker">Eksempelgården · Kursoversikt</p>
  <h1>Vaskerom</h1>
  <p class="nd-subtitle">Sikringsskap · kurs 1–13</p>
</header>
<p class="nd-lead">…</p>

Overskrifter

h2 får det røde kvadratet og en strek under – det er systemets signatur og trenger ingen klasse. h3 og h4 er stillere.

Nøkkelfakta

En <dl> i et rutenett der streken skinner gjennom en 1 px-gap. Tre kolonner som standard; .nd-keyfacts--2 og --4 finnes. Kollapser på smal skjerm.

<dl class="nd-keyfacts">
  <div><dt>Hovedsikring</dt><dd>63 A</dd></div>
  …
</dl>

Tabell

.nd-table: hvit flate, versal-hoder, tynne streker, tfoot med tykkere toppstrek. .nd-num høyrestiller tall, .nd-key gir fet nøkkelkolonne, .nd-empty demper tankestreken for tomme verdier – husk skjermlesertekst. .nd-table--compact for tette ark, .nd-table--end høyrestiller siste kolonne (beløp). Brede tabeller pakkes i <div class="nd-table-scroll" tabindex="0" role="region" aria-label="…">, så tabellen ruller sidelengs på mobil i stedet for hele siden.

<table class="nd-table nd-table--end">
  <caption>Månedskostnad</caption>
  <thead><tr><th>Post</th><th>Merknad</th><th>Kroner</th></tr></thead>
  <tbody>
    <tr><td class="nd-key">Leie</td><td>…</td><td>12 000</td></tr>
    <tr><td class="nd-key">Strøm</td><td>…</td>
        <td class="nd-empty"><span aria-hidden="true">–</span><span class="nd-sr-only">ikke oppgitt</span></td></tr>
  </tbody>
  <tfoot><tr><td>Sum</td><td></td><td>12 000</td></tr></tfoot>
</table>

Bilder og kort

Alle bilder i .nd-hero, .nd-figure-card, .nd-gallery og .nd-two-col åpnes i en lysboks (PhotoSwipe) når nd-lightbox.js er lastet – klikk på et bilde her. Bildeteksten hentes fra figcaption.

.nd-hero for et fullbreddebilde med .nd-caption under. .nd-figure-card er et <figure> med ramme, 4:3-bilde og en figcaption der <strong> blir tittel. Legg kortene i .nd-grid. .nd-two-col setter bilde og tekst side om side.

<div class="nd-grid" style="--nd-min: 260px">
  <figure class="nd-figure-card">
    <img src="soverom-1.jpg" alt="Soverom med dobbeltseng og vindu mot tunet">
    <figcaption><strong>Soverom 1</strong>Mot tunet, plass til dobbeltseng.</figcaption>
  </figure>
</div>

Galleri

.nd-gallery: to kolonner på skjerm, tre på papir. Et odde siste bilde fyller hele bredden i stedet for å stå alene. Bildetekster er kursive og dempet.

Merknad

.nd-note er den eneste innrammede boksen. En h3/h4 inni får aksentfargen. --warn og --error farger rammen – og teksten sier alltid hvorfor.

Kontakt

.nd-contact: to sentrerte kort med en kort rød strek under navnet. Lenker uten understrek til de får fokus eller pekeren over.

Kolofon og fotnote

footer.nd-colophon avslutter en side; .nd-footnote avslutter et ark. Begge kursive, dempet, med en strek over.

Ark

.nd-sheet er et fysisk ark: et kort med ramme på skjermen, nøyaktig én side på papir, med sideskift etter. .nd-sheet--a5 for A5. .nd-sheet--fixed låser arket til 210 × 296 mm med egne marger og lar ingen barn krympe – blir det for fullt, klippes bunnen synlig, som er et ærligere symptom enn stille krymping. .nd-bottom limer et felt til bunnen av et fast ark. Siste ark får .nd-sheet--last så det ikke kommer en tom side. Faste ark og etikettark er forhåndsvisninger av papir og vises alltid lyse, også i mørkt tema – legg .nd-paper på andre elementer som skal oppføre seg slik.

Se eksemplene for en fire siders kursoversikt og et fast A4-ark – begge med PDF.

Etiketter

.nd-label-sheet er et ark med klistrelapper i faste mål. Sett --nd-label-w, --nd-label-h og --nd-label-cols etter etikettproduktet (standard 70 × 37 mm, 3 kolonner = 24 per A4). Hver .nd-label har overtittel, en sterk linje og en forklaring. På skjerm vises kanter; på papir er de borte.

<div class="nd-label-sheet" style="--nd-label-w: 70mm; --nd-label-h: 37mm; --nd-label-cols: 3">
  <div class="nd-label">
    <p class="nd-kicker">Sikringsskap · vaskerom</p>
    <strong>Kurs 1 · 20 A</strong>
    <span>Platetopp</span>
  </div>
  …
</div>

Dashboard

Dashboardkomponentene bruker de samme rollene som dokumentene, men tall settes i monospace og flatene er panelet. Se alt sammen i dashboard-eksempelet med ekte grafer.

Toppstripe og periodevelger

.nd-topbar med .nd-brand til venstre og .nd-topbar-actions til høyre. .nd-segmented er en gruppe knapper der den valgte har aria-current="true".

<nav class="nd-segmented" aria-label="Periode">
  <button type="button">24 t</button>
  <button type="button" aria-current="true">7 d</button>
  …
</nav>
<button class="nd-button nd-button--primary">Logg inn</button>

Nøkkeltall

.nd-stat med etikett, verdi (monospace, tabulære siffer) og en dempet underlinje. Legg dem i .nd-stats. --hero for det ene tallet et dashboard leder med.

Skal flisen kunne velges, for eksempel for å fremheve et rom i en graf, bruker du <button class="nd-stat" aria-pressed="…"> med <span> i stedet for <p>. --nd-stat-mark gir valgt flis en strek og ramme i fargen den står for.

<div class="nd-stat">
  <p class="nd-stat-label">Effekt nå</p>
  <p class="nd-stat-value">3,8 <span class="nd-stat-unit">kW</span></p>
  <p class="nd-stat-sub">Snitt 7 d · 2,9 kW</p>
</div>

Graf med datatabell

section.nd-chart med .nd-chart-header (tittel med kvadrat), .nd-chart-canvas (ECharts tegner her; role="img", tabindex og aria-label settes av nd.mount), en .nd-chart-footer med .nd-datatable-toggle, og .nd-datatable som fylles fra de samme dataene. Tabellen er obligatorisk: det er slik grafen leses med skjermleser, og slik den skrives ut.

<section class="nd-chart" aria-labelledby="c1-h">
  <div class="nd-chart-header"><h2 class="nd-chart-title" id="c1-h">Forbruk siste 7 dager</h2><p class="nd-freshness">kW per time</p></div>
  <div class="nd-chart-canvas" id="c1" aria-label="Linjediagram: effekt per time siste sju dager"></div>
  <div class="nd-chart-footer"><button class="nd-button nd-datatable-toggle" aria-expanded="false" aria-controls="c1-t">Vis datatabell</button></div>
  <div class="nd-datatable" id="c1-t" hidden tabindex="0"></div>
</section>

<script src="vendor/echarts.min.js"></script>
<script type="module">
  import * as nd from './nd/nd-echarts.js';
  nd.wireDataTables();
  nd.mount(echarts, document.getElementById('c1'), (t) => ({
    ...nd.base(t), legend: { top: 0 },
    xAxis: nd.timeAxis(t), yAxis: nd.valueAxis(t, 'kW'),
    series: [{ type: 'line', name: 'Hovedhuset', data }],
  }), { table: () => ({ headers: ['Tid', 'kW'], numeric: [1], rows }) });
</script>

nd.mount registrerer temaet fra tokens, tegner, lytter på temabytte (og tegner på nytt – ECharts binder tema ved init), følger prefers-reduced-motion, og bygger datatabellen med textContent, aldri HTML.

Status og ferskhet

.nd-status--ok/warn/error/info er en prikk pluss et ord. .nd-freshness forteller når data sist ble hentet – bruk <time datetime>.

Statusfarge og gruppekort

.nd-tint--ok/warn/error gir flis, tabellcelle eller kort bakgrunn og kant i statusfargen. Bruk alltid et ord eller .nd-status i tillegg – farge alene bærer ikke informasjon. .nd-group er et kort som kan lukkes (<details>), lukket som standard, med tittel, status og nøkkeltall for hele gruppen (.nd-figures, .nd-figure) i oppsummeringen. .nd-dots nede i hjørnet viser hvert medlem som en sterk prikk, så ett avvikende rom synes selv om kortets farge (snittet) er grønn. Prikkene er bare farge – gi rekka role="img" og en aria-label.

Ikoner

.nd-icon med .nd-icon--navn: enkle strekikoner som tar tekstfargen og skalerer med skriften. De er pynt – gi elementet rundt et navn (synlig tekst, .nd-sr-only eller aria-label). Brukes for eksempel som kolonneoverskrift i stedet for et langt ord med benevning.

<th scope="col" title="Luftfuktighet, %"><span class="nd-icon nd-icon--droplet" aria-hidden="true"></span><span class="nd-sr-only">Luftfuktighet, %</span></th>

Fremdrift

.nd-progress er det vanlige <progress>-elementet, så skjermlesere leser det opp uten ekstra ARIA. Gi det et navn (aria-label), og vis alltid verdien som tekst ved siden av med .nd-progress-row og .nd-progress-value. --ok når jobben er ferdig.

<div class="nd-progress-row">
  <progress class="nd-progress" value="43" max="100" aria-label="Historikk hentet, kjellerstue"></progress>
  <span class="nd-progress-value">43 %</span>
</div>

Skjema

.nd-form og .nd-field: etikett over feltet, 40 px høye kontroller, fokusramme i aksentfargen. Feilmelding i .nd-form-error med role="alert".

Verktøylinje og nedtrekk

.nd-toolbar er en rad med filtre og verktøy over en liste eller et rutenett. Den brytes over flere linjer når plassen ikke strekker til, med faste mellomrom. .nd-toolbar-end skyver en gruppe helt til høyre – på smale skjermer legger den seg i stedet under resten. Alle kontrollene er like høye som .nd-segmented, så de står på linje.

.nd-drop er en kompakt nedtrekksknapp for verktøylinjer (utenfor skjemaer), med ▾ til høyre. På en <button> åpner den en liste (se popover under); gi knappen aria-haspopup="dialog" og aria-expanded. Rundt en vanlig <select> (<span class="nd-drop nd-drop--select">) ser den lik ut, men tastatur og skjermleser får det innebygde valget. Gi <select> et navn med aria-label. .nd-toolbar-check er en avkrysningsboks med etikett i samme høyde, i aksentfargen.

<div class="nd-toolbar">
  <button type="button" class="nd-drop" aria-haspopup="dialog" aria-expanded="false">Kilder: alle</button>
  <span class="nd-drop nd-drop--select">
    <select aria-label="Minste oppløsning"><option>Alle størrelser</option> …</select>
  </span>
  <label class="nd-toolbar-check"><input type="checkbox"> Kjente personer</label>
  <div class="nd-segmented" role="group" aria-label="Retning">
    <button type="button" aria-pressed="true">Alle</button> …
  </div>
  <div class="nd-toolbar-end">
    <span class="nd-drop nd-drop--select"><select aria-label="Sortering">…</select></span>
    <div class="nd-segmented" role="group" aria-label="Visning">…</div>
  </div>
</div>

Popover

.nd-popover er en liten meny som svever over siden, festet til knappen som åpnet den. Den har en tittel (.nd-popover-title) og en liste med rader: avkrysningsboks, navn og et dempet tall (<small>) eller en tastatursnarvei (<kbd>) helt til høyre. Lange navn slutter med … – legg hele navnet i title på raden. Under kan det komme et lite skjema (.nd-popover-form) og en egen del nederst (.nd-popover-foot), hver skilt fra resten med en strek.

nd-popover.js åpner den: under knappen, eller over når det ikke er plass under, og alltid innenfor vinduet. Den lukkes med Esc (fokus går tilbake til knappen), med et klikk utenfor og når fokus flyttes til noe annet. I fullskjerm legges den i fullskjermelementet, så den synes der også. Prøv «Kilder: alle» i verktøylinja over.

<button type="button" class="nd-drop" id="kilder" aria-haspopup="dialog" aria-expanded="false">Kilder: alle</button>

<script type="module">
  import { ndPopover } from './nd/nd-popover.js';
  const button = document.getElementById('kilder');
  button.addEventListener('click', () => {
    const pop = ndPopover(button, `
      <p class="nd-popover-title">Kilder</p>
      <ul>
        <li><label title="Kamera"><input type="checkbox" checked>
          <span class="nd-popover-name">Kamera</span><small>1 204 filer</small></label></li> …
      </ul>
      <div class="nd-popover-foot"><button type="button" class="nd-button nd-button--quiet">Alle</button> …</div>`,
      { label: 'Kilder' });
    pop?.el.addEventListener('change', (e) => { /* … */ });
  });
</script>

ndPopover(knapp, innhold, { label, onClose }) gir { el, close }. Innholdet er en HTML-tekst (escape dataene dine – den settes som innerHTML) eller et element. Én popover er åpen om gangen; kalles den igjen for samme knapp, lukkes den. Hjelperen setter role="dialog", aria-label og aria-expanded på knappen, og flytter fokus til første kontroll. closePopover() lukker den som er åpen.