@fristil/designsystem 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -16,6 +16,118 @@ kommer i et nytt undertall.
 
 ## Ikke utgitt
 
+## 0.5.0 (2026-09-21)
+
+### Brytende
+
+- **Serveren skriver markupen, komponentene fester bare oppførsel.** Seks
+  komponenter satte tidligere klasser, roller og tilgjengelighetskoblinger på
+  elementer serveren hadde sendt. Det virker ikke i en app med server-rendret
+  HTML: Datastars morfing fjerner hvert attributt som ikke står i HTML-en
+  serveren nettopp sendte, og React kan kaste bort noder et egendefinert
+  element har lagt inn i et tre React eier. Testet med ekte Datastar mistet et
+  `<fs-field>` både `aria-describedby`, klassen på ledeteksten og den skjulte
+  feilmeldingen etter én patch, og fikk dem ikke tilbake.
+
+  Markupen skrives nå av nye byggere i `fs`: `fs.errorSummary()`,
+  `fs.popover()`, `fs.tabs()`, `fs.suggestion()` og `fs.toast()`. Byggerne
+  setter også `data-preserve-attr` for de attributtene komponenten endrer
+  underveis, så du slipper å vite om det. Se «Server først» i dokumentasjonen.
+
+- **`<fs-calendar>` og `<fs-date-field>` er fjernet.** Nettleserens eget panel
+  i `<input type="date">` gjør jobben, og `fs.field()` sammen med
+  `fs.input({ type: "date" })` gir et komplett datofelt. Mønstersiden «Dato i
+  et skjema» viser oppsettet, med de to forskjellene vi har testet mellom nettleserne.
+  `exports`-oppføringene `./calendar`, `./date-field` og `./date-field.css` er
+  borte, og det samme er `--fs-calendar-*`- og `--fs-date-field-*`-variablene
+  og alle `part`-navnene i kalenderen.
+
+- **`<fs-suggestion>` er flyttet fra `frittstående` til `ramme`.** Den lagde
+  tidligere hele feltet selv, så det fantes verken ledetekst eller
+  inndatafelt før skriptet hadde kjørt, og ingenting ble med i innsendingen.
+  Nå skriver serveren feltet og lista med `fs.suggestion()`.
+
+- **`<fs-tabs>` har ingen `selected`- eller `label`-attributter lenger.**
+  Hvilken fane som er valgt står i markupen serveren sendte. `<fs-error-summary>`
+  har ikke lenger `heading`: overskriften skrives av serveren.
+
+- **Ingen komponent bruker shadow DOM.** `::part()` er dermed ikke lenger en
+  del av det offentlige API-et.
+
+- **`<fs-field>` leser tilstanden fra markupen, ikke fra egne attributter.**
+  Skrev serveren feltet med `fs.field()`, står `aria-invalid` og
+  `data-required` allerede på elementene. Komponenten regnet tidligere ut sitt
+  eget svar fra attributtene på verten, fant ingenting der, og fjernet det
+  serveren nettopp hadde skrevet. De to halvdelene av API-et kranglet altså
+  med hverandre når de ble brukt sammen. Den setter heller ikke lenger
+  `aria-hidden` på feilmeldingen: `hidden` tar den allerede ut av
+  tilgjengelighetstreet, og attributtet ga hydreringsfeil i React.
+
+### Lagt til
+
+- **`<fs-session-timeout>`** varsler før en innlogget økt går ut, med en
+  nedtelling som leses opp ved terskler i stedet for hvert sekund, og fokus
+  som går tilbake dit brukeren var.
+
+- **`<fs-connection-status>`** sier fra når forbindelsen til serveren er
+  borte. `navigator.onLine` sier bare at maskinen har et nettverk, så
+  `reportFailure()` og `reportSuccess()` lar appen melde fra selv.
+
+- **Siden «Server først»** forklarer hvorfor markupen kommer fra serveren, med
+  testene bak, og hva det betyr i TanStack Start, React Server Components og
+  Datastar.
+
+- **Mønstersiden «Dato i et skjema»** viser hvordan du ber om en dato uten en
+  datovelger fra oss, med de to forskjellene vi har testet mellom nettleserne:
+  WebKit krever skilletegnene, og Chromium tar imot feil rekkefølge som
+  gyldig.
+
+- **`FIELD_PRESERVED_ATTRIBUTES`** er lista serveren skal skrive som
+  `data-preserve-attr` når den ikke kan kalle `fs.field()` selv.
+
+### Rettet
+
+- **`<fs-toast duration="0">` lot ikke meldingene bli stående.** Attributtet
+  ble lest som «ugyldig» og falt tilbake til seks sekunder, så bare
+  `show(…, { duration: 0 })` virket.
+
+- **`<fs-error-summary>` fikk ikke fokus når serveren bare tok bort `hidden`.**
+  Komponenten så etter endringer i barna, ikke i attributtene, så en
+  oppsummering som nettopp ble synlig ble stående uten fokus.
+
+- **`<fs-error-summary>` finner nå feltet i sin egen rot.** Oppslaget gikk mot
+  `document`, som ikke ser inn i en skyggerot, så lenken ble en vanlig
+  ankerlenke uten fokusflytting når skjemaet lå inne i en annen komponent.
+
+- **`FIELD_PRESERVED_ATTRIBUTES` dekker alle tre elementene.** Den dekket bare
+  kontrollen, men komponenten legger også `fs-label` og markeringene på
+  ledeteksten og skjuler feilmeldingen. Serveren må derfor skrive én liste per
+  element, og konstanten har nå `label`, `control` og `error`.
+
+- **`<fs-popover>` lot seg ikke åpne etter at den var flyttet i DOM-en.**
+  Referansen til knappen ble stående, så lytteren ble aldri festet på nytt.
+
+- **`fs.popover({ open: true })` sier det nå på verten.** Før satte den bare
+  `aria-expanded` på knappen, så markupen meldte at panelet var åpent mens
+  komponenten mente det var lukket.
+
+- **`<fs-suggestion>` mistet musevalg etter at serveren sendte en ny liste.**
+  Alternativene fikk bare lytteren sin når selve feltet var nytt.
+
+### Endret
+
+- **React-inngangen døper også om `tabindex` til `tabIndex`,** og dekker de nye
+  sammensatte byggerne. `fs.errorSummary()`, `fs.popover()`, `fs.tabs()`,
+  `fs.suggestion()` og `fs.toast()` finnes nå også i
+  `@fristil/designsystem/react`, der hvert attributtsett er døpt om for seg.
+  Pakken har fortsatt ingen avhengighet til React: dette er ren omdøping av
+  tre objektnøkler.
+
+- **`lit` er ikke lenger en avhengighet.** Etter omleggingen rendrer ingen
+  komponent sitt eget innhold, så Lit ble brukt til nesten ingenting.
+  Komponentene er vanlige `HTMLElement`-klasser, og pakken har nå ingen
+  avhengigheter i det hele tatt.
+
 ## 0.4.0 (2026-09-21)
 
 ### Endret

package/README.md

@@ -12,9 +12,7 @@ Hele dokumentasjonen, med komponentsider, tokens, mønstre og eksempler for fire
 npm install @fristil/designsystem
 ```
 
-Pakken har én avhengighet, `lit`, og den installeres sammen med pakken. Komponentene som er web components er bygd på den.
-
-Den koster rundt 9,8 kB gzippet, og bare for den som registrerer minst én web component. Bruker du bare CSS-komponentene, havner Lit aldri i bunten din: ingenting registreres ved import alene, så den kommer først med når du kaller en `defineFs*`.
+Pakken har ingen avhengigheter. Web-komponentene er vanlige `HTMLElement`-klasser, og ingenting registreres ved import alene, så du betaler bare for det du faktisk kaller.
 
 ## CSS-komponenter
 
@@ -54,17 +52,34 @@ import { fs } from "@fristil/designsystem/react"
 Ingenting registreres ved import alene. Du kaller `defineFs*` selv, så du bestemmer når elementet finnes og hva det skal hete:
 
 ```js
-import { defineFsDateField } from "@fristil/designsystem/date-field"
+import { defineFsSessionTimeout } from "@fristil/designsystem/session-timeout"
 import "@fristil/designsystem/tokens.css"
-import "@fristil/designsystem/date-field.css"
+import "@fristil/designsystem/session-timeout.css"
 
-defineFsDateField()
+defineFsSessionTimeout()
 ```
 
 ```html
-<fs-date-field label="Fødselsdato" value="2026-05-31"></fs-date-field>
+<fs-session-timeout class="fs-session-timeout" warn-at="1500" expires-at="1800"
+                    data-ignore-morph></fs-session-timeout>
+```
+
+## Serveren skriver markupen
+
+Fristil er bygget for apper der HTML-en kommer fra serveren, enten det er TanStack Start, React Server Components eller Datastar. Ingen komponent rendrer sitt eget innhold i DOM serveren eier, fordi rammeverket rundt da river det bort igjen ved neste oppdatering.
+
+Byggerne i `fs` gir markupen, komponentene gir oppførselen, og de to overlapper ikke:
+
+```js
+import { fs } from "@fristil/designsystem"
+
+fs.errorSummary({ count: 2, id: "feil" })
+// { container: { class: "fs-error-summary", role: "alert", tabindex: "-1", id: "feil" },
+//   title:     { class: "fs-error-summary__title" } }
 ```
 
+Hele begrunnelsen, med testene bak, står på [Server først](https://fristil.netlify.app/server-forst/).
+
 ## Eget fargetema
 
 Kommandolinja lager et fullt tema av merkefargene dine, med kontrastkravene regnet ut i OKLCH:

package/dist/components/frittstaende/connection-status/connection-status.d.ts

@@ -0,0 +1,28 @@
+export declare const CONNECTION_STATUS_CLASS: "fs-connection-status";
+export declare const CONNECTION_STATUS_BAR_CLASS: "fs-connection-status__bar";
+export type ConnectionStatusOptions = {
+    /** Teksten når forbindelsen er borte. */
+    offlineText?: string;
+    /** Teksten når den kommer tilbake. Vises en kort stund. */
+    onlineText?: string;
+};
+export type ConnectionStatusAttributes = {
+    class: typeof CONNECTION_STATUS_CLASS;
+    "offline-text"?: string;
+    "online-text"?: string;
+    "data-ignore-morph": "";
+};
+/**
+ * Attributtene for linja som sier fra at forbindelsen er borte.
+ *
+ * Serveren kan per definisjon ikke fortelle deg at den er utilgjengelig. Er
+ * den nede, kommer det ingenting derfra å rendre. Derfor eier komponenten
+ * alt innholdet, og `data-ignore-morph` hindrer at en senere patch river det
+ * bort i det øyeblikket forbindelsen er tilbake.
+ *
+ * ```ts
+ * <fs-connection-status {...fs.connectionStatus()} />
+ * ```
+ */
+export declare const connectionStatus: ({ offlineText, onlineText, }?: ConnectionStatusOptions) => ConnectionStatusAttributes;
+//# sourceMappingURL=connection-status.d.ts.map

package/dist/components/frittstaende/connection-status/connection-status.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"connection-status.d.ts","sourceRoot":"","sources":["../../../../src/components/frittstaende/connection-status/connection-status.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,uBAAuB,EAAG,sBAA+B,CAAA;AACtE,eAAO,MAAM,2BAA2B,EAAG,2BAAoC,CAAA;AAE/E,MAAM,MAAM,uBAAuB,GAAG;IACpC,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,2DAA2D;IAC3D,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,0BAA0B,GAAG;IACvC,KAAK,EAAE,OAAO,uBAAuB,CAAA;IACrC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,mBAAmB,EAAE,EAAE,CAAA;CACxB,CAAA;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,gBAAgB,GAAI,+BAG9B,uBAA4B,KAAG,0BAM9B,CAAA"}

package/dist/components/frittstaende/connection-status/connection-status.js

@@ -0,0 +1,22 @@
+import { attributes } from "../../css/shared.js";
+export const CONNECTION_STATUS_CLASS = "fs-connection-status";
+export const CONNECTION_STATUS_BAR_CLASS = "fs-connection-status__bar";
+/**
+ * Attributtene for linja som sier fra at forbindelsen er borte.
+ *
+ * Serveren kan per definisjon ikke fortelle deg at den er utilgjengelig. Er
+ * den nede, kommer det ingenting derfra å rendre. Derfor eier komponenten
+ * alt innholdet, og `data-ignore-morph` hindrer at en senere patch river det
+ * bort i det øyeblikket forbindelsen er tilbake.
+ *
+ * ```ts
+ * <fs-connection-status {...fs.connectionStatus()} />
+ * ```
+ */
+export const connectionStatus = ({ offlineText, onlineText, } = {}) => attributes({
+    class: CONNECTION_STATUS_CLASS,
+    "offline-text": offlineText,
+    "online-text": onlineText,
+    "data-ignore-morph": "",
+});
+//# sourceMappingURL=connection-status.js.map

package/dist/components/frittstaende/connection-status/connection-status.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"connection-status.js","sourceRoot":"","sources":["../../../../src/components/frittstaende/connection-status/connection-status.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAEhD,MAAM,CAAC,MAAM,uBAAuB,GAAG,sBAA+B,CAAA;AACtE,MAAM,CAAC,MAAM,2BAA2B,GAAG,2BAAoC,CAAA;AAgB/E;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAC/B,WAAW,EACX,UAAU,MACiB,EAAE,EAA8B,EAAE,CAC7D,UAAU,CAAC;IACT,KAAK,EAAE,uBAAuB;IAC9B,cAAc,EAAE,WAAW;IAC3B,aAAa,EAAE,UAAU;IACzB,mBAAmB,EAAE,EAAW;CACjC,CAAC,CAAA"}

package/dist/components/frittstaende/connection-status/fs-connection-status.d.ts

@@ -0,0 +1,54 @@
+export declare const FS_CONNECTION_STATUS_TAG: "fs-connection-status";
+/**
+ * Sier fra når forbindelsen til serveren er borte.
+ *
+ * Serveren kan per definisjon ikke fortelle deg dette. Er den utilgjengelig,
+ * kommer det ingenting derfra. Derfor er dette en frittstående komponent som
+ * eier alt innholdet sitt.
+ *
+ * Den er ikke pynt i en app som henter innhold fra serveren underveis. En
+ * side som mister strømmen sin ser helt normal ut, men er frosset, og en
+ * bruker som fyller ut et skjema inn i en død forbindelse mister alt.
+ *
+ * `navigator.onLine` sier bare om maskinen har et nettverk, ikke om serveren
+ * svarer. Derfor finnes `reportFailure()` og `reportSuccess()`, som appen
+ * kaller når et kall feiler eller lykkes.
+ *
+ * ```ts
+ * const status = document.querySelector("fs-connection-status")
+ * try {
+ *   await fetch("/api/lagre", { method: "POST", body })
+ *   status.reportSuccess()
+ * } catch {
+ *   status.reportFailure()
+ * }
+ * ```
+ */
+export declare class FsConnectionStatus extends HTMLElement {
+    static observedAttributes: string[];
+    private bar?;
+    private timer?;
+    /** Sant når appen har meldt at et kall feilet, uavhengig av navigator. */
+    private failing;
+    get offlineText(): string;
+    get onlineText(): string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private ensureBar;
+    private showOffline;
+    private showOnline;
+    private handleOffline;
+    private handleOnline;
+    private emit;
+    /** Meld fra at et kall til serveren feilet. */
+    reportFailure(): void;
+    /** Meld fra at et kall til serveren lyktes igjen. */
+    reportSuccess(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "fs-connection-status": FsConnectionStatus;
+    }
+}
+export declare function defineFsConnectionStatus(tagName?: "fs-connection-status"): void;
+//# sourceMappingURL=fs-connection-status.d.ts.map

package/dist/components/frittstaende/connection-status/fs-connection-status.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fs-connection-status.d.ts","sourceRoot":"","sources":["../../../../src/components/frittstaende/connection-status/fs-connection-status.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,wBAAwB,EAAG,sBAA+B,CAAA;AAQvE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBAAa,kBAAmB,SAAQ,WAAW;IACjD,MAAM,CAAC,kBAAkB,WAAkC;IAE3D,OAAO,CAAC,GAAG,CAAC,CAAa;IACzB,OAAO,CAAC,KAAK,CAAC,CAAQ;IACtB,0EAA0E;IAC1E,OAAO,CAAC,OAAO,CAAQ;IAEvB,IAAI,WAAW,IAAI,MAAM,CAExB;IAED,IAAI,UAAU,IAAI,MAAM,CAEvB;IAED,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;IAO5B,OAAO,CAAC,SAAS;IAcjB,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,UAAU;IAalB,OAAO,CAAC,aAAa,CAEpB;IAED,OAAO,CAAC,YAAY,CAGnB;IAED,OAAO,CAAC,IAAI;IAIZ,+CAA+C;IAC/C,aAAa,IAAI,IAAI;IAMrB,qDAAqD;IACrD,aAAa,IAAI,IAAI;CAKtB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAA;KAC3C;CACF;AAED,wBAAgB,wBAAwB,CACtC,OAAO,yBAA2B,GACjC,IAAI,CAIN"}

package/dist/components/frittstaende/connection-status/fs-connection-status.js

@@ -0,0 +1,123 @@
+import { CONNECTION_STATUS_BAR_CLASS, CONNECTION_STATUS_CLASS, } from "./connection-status.js";
+export const FS_CONNECTION_STATUS_TAG = "fs-connection-status";
+const STANDARD_OFFLINE = "Ingen forbindelse. Det du skriver blir ikke lagret.";
+const STANDARD_ONLINE = "Forbindelsen er tilbake.";
+/** Hvor lenge «tilbake på nett» blir stående. */
+const KVITTERING_MS = 4000;
+/**
+ * Sier fra når forbindelsen til serveren er borte.
+ *
+ * Serveren kan per definisjon ikke fortelle deg dette. Er den utilgjengelig,
+ * kommer det ingenting derfra. Derfor er dette en frittstående komponent som
+ * eier alt innholdet sitt.
+ *
+ * Den er ikke pynt i en app som henter innhold fra serveren underveis. En
+ * side som mister strømmen sin ser helt normal ut, men er frosset, og en
+ * bruker som fyller ut et skjema inn i en død forbindelse mister alt.
+ *
+ * `navigator.onLine` sier bare om maskinen har et nettverk, ikke om serveren
+ * svarer. Derfor finnes `reportFailure()` og `reportSuccess()`, som appen
+ * kaller når et kall feiler eller lykkes.
+ *
+ * ```ts
+ * const status = document.querySelector("fs-connection-status")
+ * try {
+ *   await fetch("/api/lagre", { method: "POST", body })
+ *   status.reportSuccess()
+ * } catch {
+ *   status.reportFailure()
+ * }
+ * ```
+ */
+export class FsConnectionStatus extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        /** Sant når appen har meldt at et kall feilet, uavhengig av navigator. */
+        this.failing = false;
+        this.handleOffline = () => {
+            this.showOffline();
+        };
+        this.handleOnline = () => {
+            if (this.failing)
+                return;
+            this.showOnline();
+        };
+    }
+    get offlineText() {
+        return this.getAttribute("offline-text") ?? STANDARD_OFFLINE;
+    }
+    get onlineText() {
+        return this.getAttribute("online-text") ?? STANDARD_ONLINE;
+    }
+    connectedCallback() {
+        this.classList.add(CONNECTION_STATUS_CLASS);
+        window.addEventListener("offline", this.handleOffline);
+        window.addEventListener("online", this.handleOnline);
+        if (!navigator.onLine)
+            this.showOffline();
+    }
+    disconnectedCallback() {
+        window.removeEventListener("offline", this.handleOffline);
+        window.removeEventListener("online", this.handleOnline);
+        if (this.timer)
+            window.clearTimeout(this.timer);
+        this.timer = undefined;
+    }
+    ensureBar() {
+        if (this.bar)
+            return this.bar;
+        const bar = document.createElement("div");
+        bar.className = CONNECTION_STATUS_BAR_CLASS;
+        // polite og ikke assertive: beskjeden er viktig, men skal ikke avbryte
+        // midt i et ord. Den blir stående til forbindelsen er tilbake.
+        bar.setAttribute("role", "status");
+        bar.setAttribute("aria-live", "polite");
+        this.append(bar);
+        this.bar = bar;
+        return bar;
+    }
+    showOffline() {
+        if (this.timer)
+            window.clearTimeout(this.timer);
+        const bar = this.ensureBar();
+        bar.dataset.state = "offline";
+        bar.textContent = this.offlineText;
+        this.emit("connection-lost");
+    }
+    showOnline() {
+        if (!this.bar)
+            return;
+        const bar = this.bar;
+        bar.dataset.state = "online";
+        bar.textContent = this.onlineText;
+        this.emit("connection-restored");
+        this.timer = window.setTimeout(() => {
+            bar.remove();
+            this.bar = undefined;
+        }, KVITTERING_MS);
+    }
+    emit(navn) {
+        this.dispatchEvent(new CustomEvent(navn, { bubbles: true, composed: true }));
+    }
+    /** Meld fra at et kall til serveren feilet. */
+    reportFailure() {
+        if (this.failing)
+            return;
+        this.failing = true;
+        this.showOffline();
+    }
+    /** Meld fra at et kall til serveren lyktes igjen. */
+    reportSuccess() {
+        if (!this.failing)
+            return;
+        this.failing = false;
+        this.showOnline();
+    }
+}
+FsConnectionStatus.observedAttributes = ["offline-text", "online-text"];
+export function defineFsConnectionStatus(tagName = FS_CONNECTION_STATUS_TAG) {
+    if (!customElements.get(tagName)) {
+        customElements.define(tagName, FsConnectionStatus);
+    }
+}
+//# sourceMappingURL=fs-connection-status.js.map

package/dist/components/frittstaende/connection-status/fs-connection-status.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fs-connection-status.js","sourceRoot":"","sources":["../../../../src/components/frittstaende/connection-status/fs-connection-status.ts"],"names":[],"mappings":"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"}

package/dist/components/frittstaende/session-timeout/fs-session-timeout.d.ts

@@ -0,0 +1,56 @@
+export declare const FS_SESSION_TIMEOUT_TAG: "fs-session-timeout";
+/**
+ * Varsler før en innlogget økt går ut.
+ *
+ * Dette er tingen hver store organisasjon bygger selv og gjør feil. Enten
+ * kommer det ingen advarsel, og brukeren mister et halvutfylt søknadsskjema,
+ * eller så stjeler dialogen fokus midt i en setning, eller så leser
+ * skjermleseren nedtellingen hvert sekund.
+ *
+ * Komponenten er frittstående fordi nedtellingen er klientens klokke. Tallet
+ * endrer seg ut fra når brukeren sist rørte tastaturet, og det er ingenting
+ * en server kan sende. Den bærer heller ingen verdi inn i en innsending.
+ *
+ * Dialogen er en ekte `<dialog>` med `showModal()`, så fokusfellen, Escape og
+ * topplaget kommer fra nettleseren. Fokus går tilbake dit brukeren var.
+ *
+ * ```html
+ * <fs-session-timeout class="fs-session-timeout" warn-at="1500" expires-at="1800"
+ *                     data-ignore-morph></fs-session-timeout>
+ * ```
+ *
+ * ```ts
+ * document.querySelector("fs-session-timeout")
+ *   .addEventListener("session-extend", () => fetch("/forleng", { method: "POST" }))
+ * ```
+ */
+export declare class FsSessionTimeout extends HTMLElement {
+    static observedAttributes: string[];
+    private dialog?;
+    private countElement?;
+    private liveElement?;
+    private ticker?;
+    private lastActivity;
+    private forrigeFokus;
+    /** Sekunder uten aktivitet før varselet kommer. */
+    get warnAt(): number;
+    /** Sekunder uten aktivitet før økten er ute. */
+    get expiresAt(): number;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private build;
+    private registerActivity;
+    private tick;
+    private open;
+    private close;
+    private emit;
+    /** Forlenger økten og lukker varselet. Kall den når serveren har svart. */
+    extend(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "fs-session-timeout": FsSessionTimeout;
+    }
+}
+export declare function defineFsSessionTimeout(tagName?: "fs-session-timeout"): void;
+//# sourceMappingURL=fs-session-timeout.d.ts.map

package/dist/components/frittstaende/session-timeout/fs-session-timeout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fs-session-timeout.d.ts","sourceRoot":"","sources":["../../../../src/components/frittstaende/session-timeout/fs-session-timeout.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,sBAAsB,EAAG,oBAA6B,CAAA;AAmBnE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBAAa,gBAAiB,SAAQ,WAAW;IAC/C,MAAM,CAAC,kBAAkB,WAA4B;IAErD,OAAO,CAAC,MAAM,CAAC,CAAmB;IAClC,OAAO,CAAC,YAAY,CAAC,CAAa;IAClC,OAAO,CAAC,WAAW,CAAC,CAAa;IACjC,OAAO,CAAC,MAAM,CAAC,CAAQ;IACvB,OAAO,CAAC,YAAY,CAAa;IACjC,OAAO,CAAC,YAAY,CAA2B;IAE/C,mDAAmD;IACnD,IAAI,MAAM,IAAI,MAAM,CAEnB;IAED,gDAAgD;IAChD,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,IAAI,IAAI;IAQ5B,OAAO,CAAC,KAAK;IA2Db,OAAO,CAAC,gBAAgB,CAGvB;IAED,OAAO,CAAC,IAAI;IAqBZ,OAAO,CAAC,IAAI;IASZ,OAAO,CAAC,KAAK;IAQb,OAAO,CAAC,IAAI;IAIZ,2EAA2E;IAC3E,MAAM,IAAI,IAAI;CAKf;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAA;KACvC;CACF;AAED,wBAAgB,sBAAsB,CAAC,OAAO,uBAAyB,GAAG,IAAI,CAI7E"}

package/dist/components/frittstaende/session-timeout/fs-session-timeout.js

@@ -0,0 +1,179 @@
+import { SESSION_TIMEOUT_CLASS, SESSION_TIMEOUT_DIALOG_CLASS, } from "./session-timeout.js";
+export const FS_SESSION_TIMEOUT_TAG = "fs-session-timeout";
+/** Sekundene som skal leses opp. Hvert sekund ville vært uutholdelig. */
+const ANNONSER_VED = new Set([120, 60, 30, 10]);
+function klokke(sekunder) {
+    const m = Math.floor(sekunder / 60);
+    const s = sekunder % 60;
+    return `${m}:${String(s).padStart(2, "0")}`;
+}
+function ord(sekunder) {
+    if (sekunder >= 60) {
+        const m = Math.round(sekunder / 60);
+        return m === 1 ? "ett minutt" : `${m} minutter`;
+    }
+    return sekunder === 1 ? "ett sekund" : `${sekunder} sekunder`;
+}
+/**
+ * Varsler før en innlogget økt går ut.
+ *
+ * Dette er tingen hver store organisasjon bygger selv og gjør feil. Enten
+ * kommer det ingen advarsel, og brukeren mister et halvutfylt søknadsskjema,
+ * eller så stjeler dialogen fokus midt i en setning, eller så leser
+ * skjermleseren nedtellingen hvert sekund.
+ *
+ * Komponenten er frittstående fordi nedtellingen er klientens klokke. Tallet
+ * endrer seg ut fra når brukeren sist rørte tastaturet, og det er ingenting
+ * en server kan sende. Den bærer heller ingen verdi inn i en innsending.
+ *
+ * Dialogen er en ekte `<dialog>` med `showModal()`, så fokusfellen, Escape og
+ * topplaget kommer fra nettleseren. Fokus går tilbake dit brukeren var.
+ *
+ * ```html
+ * <fs-session-timeout class="fs-session-timeout" warn-at="1500" expires-at="1800"
+ *                     data-ignore-morph></fs-session-timeout>
+ * ```
+ *
+ * ```ts
+ * document.querySelector("fs-session-timeout")
+ *   .addEventListener("session-extend", () => fetch("/forleng", { method: "POST" }))
+ * ```
+ */
+export class FsSessionTimeout extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.lastActivity = Date.now();
+        this.forrigeFokus = null;
+        this.registerActivity = () => {
+            if (this.dialog?.open)
+                return;
+            this.lastActivity = Date.now();
+        };
+    }
+    /** Sekunder uten aktivitet før varselet kommer. */
+    get warnAt() {
+        return Number(this.getAttribute("warn-at")) || 25 * 60;
+    }
+    /** Sekunder uten aktivitet før økten er ute. */
+    get expiresAt() {
+        return Number(this.getAttribute("expires-at")) || 30 * 60;
+    }
+    connectedCallback() {
+        this.classList.add(SESSION_TIMEOUT_CLASS);
+        this.build();
+        for (const navn of ["pointerdown", "keydown", "scroll"]) {
+            document.addEventListener(navn, this.registerActivity, { passive: true });
+        }
+        this.ticker = window.setInterval(() => this.tick(), 1000);
+    }
+    disconnectedCallback() {
+        for (const navn of ["pointerdown", "keydown", "scroll"]) {
+            document.removeEventListener(navn, this.registerActivity);
+        }
+        if (this.ticker)
+            window.clearInterval(this.ticker);
+        this.ticker = undefined;
+    }
+    build() {
+        if (this.dialog)
+            return;
+        const dialog = document.createElement("dialog");
+        dialog.className = SESSION_TIMEOUT_DIALOG_CLASS;
+        // alertdialog og ikke dialog: dette er en avbrytelse brukeren ikke ba om,
+        // og da skal skjermleseren lese hele innholdet når den åpnes.
+        dialog.setAttribute("aria-labelledby", "fs-session-timeout-title");
+        dialog.setAttribute("role", "alertdialog");
+        const tittel = document.createElement("h2");
+        tittel.className = "fs-session-timeout__title";
+        tittel.id = "fs-session-timeout-title";
+        tittel.textContent = "Du blir snart logget ut";
+        const tekst = document.createElement("p");
+        tekst.className = "fs-session-timeout__text";
+        tekst.append("Vi logger deg ut om ");
+        const count = document.createElement("span");
+        count.className = "fs-session-timeout__count";
+        // Tallet oppdateres hvert sekund. Leses det opp hver gang, blir dialogen
+        // ubrukelig med skjermleser, så opplesningen skjer i live-området under.
+        count.setAttribute("aria-hidden", "true");
+        tekst.append(count, " for å beskytte opplysningene dine.");
+        const live = document.createElement("span");
+        live.className = "fs-sr-only";
+        live.setAttribute("role", "status");
+        live.setAttribute("aria-live", "polite");
+        const knapper = document.createElement("div");
+        knapper.className = "fs-session-timeout__actions";
+        const fortsett = document.createElement("button");
+        fortsett.type = "button";
+        fortsett.className = "fs-button";
+        fortsett.textContent = "Fortsett å være innlogget";
+        fortsett.addEventListener("click", () => this.extend());
+        const loggUt = document.createElement("button");
+        loggUt.type = "button";
+        loggUt.className = "fs-button";
+        loggUt.dataset.variant = "secondary";
+        loggUt.textContent = "Logg ut nå";
+        loggUt.addEventListener("click", () => {
+            this.close();
+            this.emit("session-logout");
+        });
+        knapper.append(fortsett, loggUt);
+        dialog.append(tittel, tekst, live, knapper);
+        this.append(dialog);
+        this.dialog = dialog;
+        this.countElement = count;
+        this.liveElement = live;
+    }
+    tick() {
+        const gått = Math.floor((Date.now() - this.lastActivity) / 1000);
+        const igjen = this.expiresAt - gått;
+        if (igjen <= 0) {
+            this.close();
+            this.emit("session-expired");
+            this.lastActivity = Date.now();
+            return;
+        }
+        if (gått < this.warnAt)
+            return;
+        if (!this.dialog?.open)
+            this.open();
+        if (this.countElement)
+            this.countElement.textContent = klokke(igjen);
+        if (this.liveElement && ANNONSER_VED.has(igjen)) {
+            this.liveElement.textContent = `Du blir logget ut om ${ord(igjen)}.`;
+        }
+    }
+    open() {
+        if (!this.dialog || this.dialog.open)
+            return;
+        // Fokus skal tilbake dit brukeren var. Uten dette starter neste
+        // tastetrykk på toppen av siden, midt i et skjema.
+        this.forrigeFokus = document.activeElement;
+        this.dialog.showModal();
+        this.emit("session-warn");
+    }
+    close() {
+        if (!this.dialog?.open)
+            return;
+        this.dialog.close();
+        if (this.liveElement)
+            this.liveElement.textContent = "";
+        this.forrigeFokus?.focus();
+        this.forrigeFokus = null;
+    }
+    emit(navn) {
+        this.dispatchEvent(new CustomEvent(navn, { bubbles: true, composed: true }));
+    }
+    /** Forlenger økten og lukker varselet. Kall den når serveren har svart. */
+    extend() {
+        this.lastActivity = Date.now();
+        this.close();
+        this.emit("session-extend");
+    }
+}
+FsSessionTimeout.observedAttributes = ["warn-at", "expires-at"];
+export function defineFsSessionTimeout(tagName = FS_SESSION_TIMEOUT_TAG) {
+    if (!customElements.get(tagName)) {
+        customElements.define(tagName, FsSessionTimeout);
+    }
+}
+//# sourceMappingURL=fs-session-timeout.js.map