@fristil/designsystem 0.4.0 → 0.5.0

package/dist/components/ramme/error-summary/fs-error-summary.js

@@ -1,53 +1,51 @@
-import { html, LitElement } from "lit";
 export const FS_ERROR_SUMMARY_TAG = "fs-error-summary";
-export const ERROR_SUMMARY_CLASS = "fs-error-summary";
-export const ERROR_SUMMARY_TITLE_CLASS = "fs-error-summary__title";
 /**
- * Samler feilene i et skjema og sender brukeren til feltet som feilet.
+ * Sender brukeren fra en feil i oppsummeringen til feltet som feilet.
  *
- * Du skriver lista med feil selv, som lenker til id-en på hvert felt.
- * Komponenten gjør tre ting som er lette å glemme, og som avgjør om
- * oppsummeringen er til nytte:
+ * Serveren skriver hele boksen med `fs.errorSummary()`: klassen, `role`,
+ * `tabindex`, overskriften og lista. Komponenten lager ingenting. Den gjorde
+ * det før, og da forsvant både klassen og overskriften ved første morfing i
+ * Datastar, uten å komme tilbake.
  *
- * 1. Flytter fokus til boksen når den kommer til syne, så den som hører siden
+ * Det som er igjen er to ting nettleseren ikke gjør selv:
+ *
+ * 1. Fokus flyttes til boksen når den kommer til syne, så den som hører siden
  *    får vite at innsendingen stoppet.
- * 2. Gir fokus til selve kontrollen når en lenke følges. En vanlig ankerlenke
+ * 2. Fokus gis til selve kontrollen når en lenke følges. En vanlig ankerlenke
  *    ruller bare dit, og neste tastetrykk fortsetter der fokus sto før.
- * 3. Holder boksen skjult mens lista er tom, så en tom overskrift ikke blir
- *    stående i skjemaet.
  *
  * ```html
- * <fs-error-summary heading="Skjemaet har to feil">
+ * <fs-error-summary class="fs-error-summary" role="alert" tabindex="-1">
+ *   <h2 class="fs-error-summary__title">Skjemaet har to feil</h2>
  *   <ul class="fs-list">
  *     <li><a href="#epost">Skriv en gyldig e-postadresse</a></li>
  *   </ul>
  * </fs-error-summary>
  * ```
  */
-export class FsErrorSummary extends LitElement {
+export class FsErrorSummary extends HTMLElement {
     constructor() {
         super(...arguments);
-        /** Overskriften over lista. */
-        this.heading = "Skjemaet har feil";
-        /** Flytt fokus hit når boksen kommer til syne. Standard: på. */
-        this.autofocus = true;
         this.hasFocused = false;
-        this.syncing = false;
-        this.handleSlotChange = () => {
-            this.sync();
-        };
+        this.links = new Set();
         this.handleLinkClick = (event) => {
             const link = event.currentTarget;
             const id = link.getAttribute("href")?.slice(1);
             if (!id)
                 return;
-            const target = document.getElementById(id);
+            // Oppslaget går mot rota komponenten selv står i, ikke mot `document`.
+            // Ligger skjemaet i en skyggerot, som i en forhåndsvisning eller inne i
+            // en annen komponent, finner `document.getElementById` ingenting, og
+            // lenken blir en vanlig ankerlenke uten fokusflytting.
+            const rot = this.getRootNode();
+            const target = rot.getElementById?.(id) ?? document.getElementById(id);
             if (!target)
                 return;
             event.preventDefault();
             // Er lenken til en ledetekst, skal fokus til kontrollen den peker på.
             const control = target instanceof HTMLLabelElement && target.htmlFor
-                ? document.getElementById(target.htmlFor)
+                ? (rot.getElementById?.(target.htmlFor) ??
+                    document.getElementById(target.htmlFor))
                 : target;
             const focusable = control ?? target;
             if (!focusable.hasAttribute("tabindex") && !isFocusable(focusable)) {
@@ -57,89 +55,56 @@ export class FsErrorSummary extends LitElement {
             focusable.scrollIntoView({ block: "center", behavior: "smooth" });
         };
     }
-    createRenderRoot() {
-        return this;
-    }
-    render() {
-        return html `<slot @slotchange=${this.handleSlotChange}></slot>`;
-    }
     connectedCallback() {
-        super.connectedCallback();
-        this.observer = new MutationObserver(() => {
-            if (!this.syncing)
-                this.sync();
-        });
+        // Feilene kommer og går mens brukeren retter, og `slotchange` melder ikke
+        // fra i vanlig DOM. Bare childList: komponenten setter ingen attributter
+        // på barna, så observatøren kan ikke utløse seg selv.
+        this.observer = new MutationObserver(() => this.sync());
         this.observer.observe(this, { childList: true, subtree: true });
+        this.sync();
+    }
+    attributeChangedCallback() {
+        // Serveren kan sende boksen skjult og senere bare ta bort `hidden` på
+        // den samme noden. Uten dette får en oppsummering som nettopp ble synlig
+        // aldri fokus, og det er hele grunnen til at komponenten finnes.
+        if (this.isConnected)
+            this.sync();
     }
     disconnectedCallback() {
         this.observer?.disconnect();
         this.observer = undefined;
-        super.disconnectedCallback();
-    }
-    firstUpdated() {
-        this.sync();
-    }
-    updated() {
-        this.sync();
+        for (const link of this.links) {
+            link.removeEventListener("click", this.handleLinkClick);
+        }
+        this.links.clear();
     }
-    get items() {
-        return [...this.querySelectorAll("li a[href^='#']")];
+    get shouldFocus() {
+        const value = this.getAttribute("autofocus");
+        return value !== "false";
     }
     sync() {
-        if (this.syncing)
+        const links = [
+            ...this.querySelectorAll("li a[href^='#']"),
+        ];
+        if (links.length === 0) {
+            this.hasFocused = false;
             return;
-        this.syncing = true;
-        try {
-            const links = this.items;
-            const empty = links.length === 0;
-            this.hidden = empty;
-            if (empty) {
-                this.hasFocused = false;
-                return;
-            }
-            // Boksen er selve elementet. Vi flytter ikke konsumentens markup inn i
-            // et omslag: da ville Lit-delen vår og innholdet byttet plass i DOM-en.
-            this.classList.add(ERROR_SUMMARY_CLASS);
-            this.setAttribute("role", "alert");
-            this.tabIndex = -1;
-            let title = this.querySelector(`.${ERROR_SUMMARY_TITLE_CLASS}`);
-            if (!title) {
-                title = document.createElement("h2");
-                title.className = ERROR_SUMMARY_TITLE_CLASS;
-                this.prepend(title);
-                this.ownTitle = title;
-            }
-            // Overskriften følger `heading` så lenge det er vi som har laget den.
-            // Antallet feil endrer seg mens brukeren retter, og en overskrift som
-            // ble stående på det første tallet er verre enn ingen: den som hører
-            // siden får vite at det er to feil igjen når det er én.
-            // Har konsumenten skrevet tittelen selv, er den deres.
-            //
-            // Sammenligningen er ikke pynt: å skrive den samme teksten på nytt
-            // teller som en endring for MutationObserver, og da kaller den sync()
-            // igjen i det uendelige.
-            const skalSkrive = title === this.ownTitle || !title.textContent?.trim();
-            if (skalSkrive && title.textContent !== this.heading) {
-                title.textContent = this.heading;
-            }
-            for (const link of links) {
-                link.removeEventListener("click", this.handleLinkClick);
-                link.addEventListener("click", this.handleLinkClick);
-            }
-            if (this.autofocus && !this.hasFocused) {
-                this.hasFocused = true;
-                this.focus();
-            }
         }
-        finally {
-            this.syncing = false;
+        for (const link of links) {
+            if (this.links.has(link))
+                continue;
+            link.addEventListener("click", this.handleLinkClick);
+            this.links.add(link);
+        }
+        // Boksen er skjult av serveren når lista er tom. Er den synlig nå, og vi
+        // ikke har flyttet fokus hit ennå, er det denne innsendingen som feilet.
+        if (this.shouldFocus && !this.hasFocused && !this.hidden) {
+            this.hasFocused = true;
+            this.focus();
         }
     }
 }
-FsErrorSummary.properties = {
-    heading: { type: String },
-    autofocus: { type: Boolean, reflect: true },
-};
+FsErrorSummary.observedAttributes = ["autofocus", "hidden"];
 function isFocusable(element) {
     return (element instanceof HTMLInputElement ||
         element instanceof HTMLSelectElement ||

package/dist/components/ramme/error-summary/fs-error-summary.js.map

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

package/dist/components/ramme/field/field-core.d.ts

@@ -67,4 +67,35 @@ export declare function createFieldId(): string;
  */
 export declare function joinDescribedBy(ids: Array<string | undefined | false>): string | undefined;
 export declare function computeFieldAttributes(options?: FieldOptions): FieldAttributes;
+/**
+ * Attributtene `<fs-field>` setter, per element den rører.
+ *
+ * Kjører serveren JavaScript, skal den kalle `computeFieldAttributes` og
+ * skrive dem selv. Da trengs verken komponenten eller denne lista. Kjører den
+ * noe annet, altså Go, PHP eller .NET, gjør komponenten koblingen på klienten,
+ * og da må serveren skrive lista som `data-preserve-attr` på hvert av de tre
+ * elementene. Datastars morfing leser lista fra serverens node, per element,
+ * så komponenten kan ikke beskytte seg selv.
+ *
+ * Det holder ikke å beskytte kontrollen alene. Komponenten legger også
+ * `fs-label` og markeringene på ledeteksten, og skjuler feilmeldingen. Uten
+ * lister på de to andre forsvinner klassen og feilmeldingen ved neste
+ * morfing, som er nøyaktig den feilen kontrakten skal hindre.
+ *
+ * ```html
+ * <label class="fs-label" for="epost"
+ *        data-preserve-attr="class data-required data-optional aria-disabled">E-post</label>
+ * <input class="fs-input" id="epost"
+ *        data-preserve-attr="id aria-describedby aria-invalid data-state disabled aria-disabled">
+ * <p class="fs-error-text" hidden data-preserve-attr="hidden">Skriv en gyldig adresse.</p>
+ * ```
+ */
+export declare const FIELD_PRESERVED_ATTRIBUTES: {
+    /** På ledeteksten. */
+    readonly label: "class data-required data-optional aria-disabled";
+    /** På selve kontrollen. */
+    readonly control: "id aria-describedby aria-invalid data-state disabled aria-disabled";
+    /** På feilmeldingen. */
+    readonly error: "hidden";
+};
 //# sourceMappingURL=field-core.d.ts.map

package/dist/components/ramme/field/field-core.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field-core.d.ts","sourceRoot":"","sources":["../../../../src/components/ramme/field/field-core.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAGrE;;;;;;;;GAQG;AAEH,MAAM,MAAM,YAAY,GAAG;IACzB,4DAA4D;IAC5D,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,wEAAwE;IACxE,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,oEAAoE;IACpE,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,cAAc,CAAA;IACzB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,EAAE,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE;QACL,KAAK,EAAE,UAAU,CAAA;QACjB,GAAG,EAAE,MAAM,CAAA;QACX,eAAe,CAAC,EAAE,cAAc,CAAA;QAChC,eAAe,CAAC,EAAE,EAAE,CAAA;QACpB,eAAe,CAAC,EAAE,MAAM,CAAA;KACzB,CAAA;IACD,OAAO,EAAE;QACP,EAAE,EAAE,MAAM,CAAA;QACV,kBAAkB,CAAC,EAAE,MAAM,CAAA;QAC3B,cAAc,CAAC,EAAE,MAAM,CAAA;QACvB,YAAY,CAAC,EAAE,SAAS,CAAA;QACxB,QAAQ,CAAC,EAAE,IAAI,CAAA;KAChB,CAAA;IACD,IAAI,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAA;IACpB,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,IAAI,CAAA;KAAE,CAAA;IACpC,gFAAgF;IAChF,KAAK,EAAE,UAAU,CAAA;CAClB,CAAA;AAID,mDAAmD;AACnD,wBAAgB,aAAa,IAAI,MAAM,CAGtC;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAC7B,GAAG,EAAE,KAAK,CAAC,MAAM,GAAG,SAAS,GAAG,KAAK,CAAC,GACrC,MAAM,GAAG,SAAS,CASpB;AAED,wBAAgB,sBAAsB,CACpC,OAAO,GAAE,YAAiB,GACzB,eAAe,CA2CjB"}
+{"version":3,"file":"field-core.d.ts","sourceRoot":"","sources":["../../../../src/components/ramme/field/field-core.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAGrE;;;;;;;;GAQG;AAEH,MAAM,MAAM,YAAY,GAAG;IACzB,4DAA4D;IAC5D,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,wEAAwE;IACxE,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,oEAAoE;IACpE,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,cAAc,CAAA;IACzB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,EAAE,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE;QACL,KAAK,EAAE,UAAU,CAAA;QACjB,GAAG,EAAE,MAAM,CAAA;QACX,eAAe,CAAC,EAAE,cAAc,CAAA;QAChC,eAAe,CAAC,EAAE,EAAE,CAAA;QACpB,eAAe,CAAC,EAAE,MAAM,CAAA;KACzB,CAAA;IACD,OAAO,EAAE;QACP,EAAE,EAAE,MAAM,CAAA;QACV,kBAAkB,CAAC,EAAE,MAAM,CAAA;QAC3B,cAAc,CAAC,EAAE,MAAM,CAAA;QACvB,YAAY,CAAC,EAAE,SAAS,CAAA;QACxB,QAAQ,CAAC,EAAE,IAAI,CAAA;KAChB,CAAA;IACD,IAAI,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAA;IACpB,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,IAAI,CAAA;KAAE,CAAA;IACpC,gFAAgF;IAChF,KAAK,EAAE,UAAU,CAAA;CAClB,CAAA;AAID,mDAAmD;AACnD,wBAAgB,aAAa,IAAI,MAAM,CAGtC;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAC7B,GAAG,EAAE,KAAK,CAAC,MAAM,GAAG,SAAS,GAAG,KAAK,CAAC,GACrC,MAAM,GAAG,SAAS,CASpB;AAED,wBAAgB,sBAAsB,CACpC,OAAO,GAAE,YAAiB,GACzB,eAAe,CA2CjB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,0BAA0B;IACrC,sBAAsB;;IAEtB,2BAA2B;;IAE3B,wBAAwB;;CAEhB,CAAA"}

package/dist/components/ramme/field/field-core.js

@@ -57,4 +57,35 @@ export function computeFieldAttributes(options = {}) {
         state: invalid ? "invalid" : "default",
     };
 }
+/**
+ * Attributtene `<fs-field>` setter, per element den rører.
+ *
+ * Kjører serveren JavaScript, skal den kalle `computeFieldAttributes` og
+ * skrive dem selv. Da trengs verken komponenten eller denne lista. Kjører den
+ * noe annet, altså Go, PHP eller .NET, gjør komponenten koblingen på klienten,
+ * og da må serveren skrive lista som `data-preserve-attr` på hvert av de tre
+ * elementene. Datastars morfing leser lista fra serverens node, per element,
+ * så komponenten kan ikke beskytte seg selv.
+ *
+ * Det holder ikke å beskytte kontrollen alene. Komponenten legger også
+ * `fs-label` og markeringene på ledeteksten, og skjuler feilmeldingen. Uten
+ * lister på de to andre forsvinner klassen og feilmeldingen ved neste
+ * morfing, som er nøyaktig den feilen kontrakten skal hindre.
+ *
+ * ```html
+ * <label class="fs-label" for="epost"
+ *        data-preserve-attr="class data-required data-optional aria-disabled">E-post</label>
+ * <input class="fs-input" id="epost"
+ *        data-preserve-attr="id aria-describedby aria-invalid data-state disabled aria-disabled">
+ * <p class="fs-error-text" hidden data-preserve-attr="hidden">Skriv en gyldig adresse.</p>
+ * ```
+ */
+export const FIELD_PRESERVED_ATTRIBUTES = {
+    /** På ledeteksten. */
+    label: "class data-required data-optional aria-disabled",
+    /** På selve kontrollen. */
+    control: "id aria-describedby aria-invalid data-state disabled aria-disabled",
+    /** På feilmeldingen. */
+    error: "hidden",
+};
 //# sourceMappingURL=field-core.js.map

package/dist/components/ramme/field/field-core.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-core.js","sourceRoot":"","sources":["../../../../src/components/ramme/field/field-core.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAwDhD,IAAI,OAAO,GAAG,CAAC,CAAA;AAEf,mDAAmD;AACnD,MAAM,UAAU,aAAa;IAC3B,OAAO,IAAI,CAAC,CAAA;IACZ,OAAO,YAAY,OAAO,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAA;AACxE,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,eAAe,CAC7B,GAAsC;IAEtC,MAAM,MAAM,GAAG,IAAI,GAAG,EAAU,CAAA;IAChC,KAAK,MAAM,EAAE,IAAI,GAAG,EAAE,CAAC;QACrB,IAAI,CAAC,EAAE;YAAE,SAAQ;QACjB,KAAK,MAAM,IAAI,IAAI,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;YACnC,IAAI,IAAI;gBAAE,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;QAC5B,CAAC;IACH,CAAC;IACD,OAAO,MAAM,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;AAC5D,CAAC;AAED,MAAM,UAAU,sBAAsB,CACpC,UAAwB,EAAE;IAE1B,MAAM,EACJ,EAAE,GAAG,aAAa,EAAE,EACpB,IAAI,GAAG,KAAK,EACZ,KAAK,GAAG,KAAK,EACb,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,WAAW,GAAG,EAAE,EAChB,MAAM,GAAG,GAAG,EAAE,OAAO,EACrB,OAAO,GAAG,GAAG,EAAE,QAAQ,GACxB,GAAG,OAAO,CAAA;IAEX,OAAO;QACL,KAAK,EAAE,UAAU,CAAC;YAChB,KAAK,EAAE,UAAmB;YAC1B,GAAG,EAAE,EAAE;YACP,eAAe,EAAE,QAAQ;YACzB,eAAe,EAAE,QAAQ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAE,EAAY,CAAC,CAAC,CAAC,SAAS;YAClE,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAE,MAAgB,CAAC,CAAC,CAAC,SAAS;SAC1D,CAAC;QACF,OAAO,EAAE,UAAU,CAAC;YAClB,EAAE;YACF,kBAAkB,EAAE,eAAe,CAAC;gBAClC,IAAI,IAAI,MAAM;gBACd,OAAO,IAAI,KAAK,IAAI,OAAO;gBAC3B,GAAG,WAAW;aACf,CAAC;YACF,cAAc,EAAE,OAAO,CAAC,CAAC,CAAE,MAAgB,CAAC,CAAC,CAAC,SAAS;YACvD,sEAAsE;YACtE,wEAAwE;YACxE,8DAA8D;YAC9D,YAAY,EAAE,OAAO,CAAC,CAAC,CAAE,SAAmB,CAAC,CAAC,CAAC,SAAS;YACxD,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAE,IAAc,CAAC,CAAC,CAAC,SAAS;SACjD,CAAC;QACF,IAAI,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE;QACpB,KAAK,EAAE,UAAU,CAAC;YAChB,EAAE,EAAE,OAAO;YACX,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAE,IAAc;SAC9C,CAAC;QACF,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;KACvC,CAAA;AACH,CAAC"}
+{"version":3,"file":"field-core.js","sourceRoot":"","sources":["../../../../src/components/ramme/field/field-core.ts"],"names":[],"mappings":"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"}

package/dist/components/ramme/field/fs-field.d.ts

@@ -1,44 +1,42 @@
-import { LitElement } from "lit";
 export declare const FS_FIELD_TAG: "fs-field";
-export declare class FsField extends LitElement {
-    static properties: {
-        invalid: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        disabled: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        optional: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        requiredMarker: {
-            type: StringConstructor;
-            attribute: string;
-        };
-        controlId: {
-            type: StringConstructor;
-            attribute: string;
-        };
-        describedBy: {
-            type: StringConstructor;
-            attribute: string;
-        };
-    };
-    invalid: boolean;
-    disabled: boolean;
-    optional: boolean;
-    requiredMarker: "none" | "symbol" | "text";
-    controlId?: string;
-    describedBy?: string;
-    createRenderRoot(): this;
-    render(): import("lit").TemplateResult<1>;
-    firstUpdated(): void;
-    updated(): void;
-    private handleSlotChange;
-    private syncA11y;
+/**
+ * Kobler ledetekst, kontroll, hjelpetekst og feilmelding i vanlig DOM.
+ *
+ * Komponenten er for servere som ikke kan kalle `fs.field()`, altså alt som
+ * ikke kjører JavaScript. Kan serveren kalle byggeren, skal den skrive
+ * attributtene selv, og da trengs ikke dette elementet.
+ *
+ * Komponenten rendrer ingenting. Den satte tidligere et `<slot>`-element inn i
+ * vanlig DOM, og siden serveren ikke visste om det, fjernet Datastars morfing
+ * det ved hver patch. Se `FIELD_PRESERVED_ATTRIBUTES` for hva serveren må
+ * skrive for at koblingen skal overleve en morfing.
+ */
+export declare class FsField extends HTMLElement {
+    static observedAttributes: string[];
+    private observer?;
+    /**
+     * Egenskapene speiler attributtene.
+     *
+     * Tilstanden bor i attributtet og ikke i et felt på klassen, slik at det
+     * serveren sendte og det komponenten mener alltid er det samme. En egen
+     * `invalid`-variabel ville kunne si noe annet enn markupen etter en morfing.
+     */
+    get invalid(): boolean;
+    set invalid(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get optional(): boolean;
+    set optional(value: boolean);
+    get requiredMarker(): "none" | "symbol" | "text";
+    set requiredMarker(value: "none" | "symbol" | "text");
+    get controlId(): string | undefined;
+    set controlId(value: string | undefined);
+    get describedBy(): string | undefined;
+    set describedBy(value: string | undefined);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private sync;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/ramme/field/fs-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fs-field.d.ts","sourceRoot":"","sources":["../../../../src/components/ramme/field/fs-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAA;AAItC,eAAO,MAAM,YAAY,EAAG,UAAmB,CAAA;AAM/C,qBAAa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;MAOhB;IAED,OAAO,UAAQ;IACf,QAAQ,UAAQ;IAChB,QAAQ,UAAQ;IAChB,cAAc,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAS;IACnD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB,gBAAgB;IAIhB,MAAM;IAIN,YAAY;IAIZ,OAAO;IAIP,OAAO,CAAC,gBAAgB,CAEvB;IAED,OAAO,CAAC,QAAQ;CAkFjB;AAcD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAA;KACpB;CACF;AAED,wBAAgB,aAAa,CAAC,OAAO,aAAe,GAAG,IAAI,CAI1D"}
+{"version":3,"file":"fs-field.d.ts","sourceRoot":"","sources":["../../../../src/components/ramme/field/fs-field.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,EAAG,UAAmB,CAAA;AAkB/C;;;;;;;;;;;GAWG;AACH,qBAAa,OAAQ,SAAQ,WAAW;IACtC,MAAM,CAAC,kBAAkB,WAOxB;IAED,OAAO,CAAC,QAAQ,CAAC,CAAkB;IAEnC;;;;;;OAMG;IACH,IAAI,OAAO,IAAI,OAAO,CAErB;IAED,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED,IAAI,cAAc,IAAI,MAAM,GAAG,QAAQ,GAAG,MAAM,CAG/C;IAED,IAAI,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,EAGnD;IAED,IAAI,SAAS,IAAI,MAAM,GAAG,SAAS,CAElC;IAED,IAAI,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAGtC;IAED,IAAI,WAAW,IAAI,MAAM,GAAG,SAAS,CAEpC;IAED,IAAI,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAGxC;IAED,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAK5B,wBAAwB,IAAI,IAAI;IAIhC,OAAO,CAAC,IAAI;CAuGb;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAA;KACpB;CACF;AAED,wBAAgB,aAAa,CAAC,OAAO,aAAe,GAAG,IAAI,CAI1D"}

package/dist/components/ramme/field/fs-field.js

@@ -1,33 +1,99 @@
-import { html, LitElement } from "lit";
 import { computeFieldAttributes } from "./field-core.js";
 export const FS_FIELD_TAG = "fs-field";
 function uniqueId(prefix) {
     return `${prefix}-${Math.random().toString(36).slice(2, 9)}`;
 }
-export class FsField extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.invalid = false;
-        this.disabled = false;
-        this.optional = false;
-        this.requiredMarker = "none";
-        this.handleSlotChange = () => {
-            this.syncA11y();
-        };
-    }
-    createRenderRoot() {
-        return this;
-    }
-    render() {
-        return html `<slot @slotchange=${this.handleSlotChange}></slot>`;
-    }
-    firstUpdated() {
-        this.syncA11y();
-    }
-    updated() {
-        this.syncA11y();
-    }
-    syncA11y() {
+function setOrRemove(element, name, value) {
+    if (value === undefined) {
+        element.removeAttribute(name);
+    }
+    else if (element.getAttribute(name) !== value) {
+        element.setAttribute(name, value);
+    }
+}
+/**
+ * Kobler ledetekst, kontroll, hjelpetekst og feilmelding i vanlig DOM.
+ *
+ * Komponenten er for servere som ikke kan kalle `fs.field()`, altså alt som
+ * ikke kjører JavaScript. Kan serveren kalle byggeren, skal den skrive
+ * attributtene selv, og da trengs ikke dette elementet.
+ *
+ * Komponenten rendrer ingenting. Den satte tidligere et `<slot>`-element inn i
+ * vanlig DOM, og siden serveren ikke visste om det, fjernet Datastars morfing
+ * det ved hver patch. Se `FIELD_PRESERVED_ATTRIBUTES` for hva serveren må
+ * skrive for at koblingen skal overleve en morfing.
+ */
+export class FsField extends HTMLElement {
+    /**
+     * Egenskapene speiler attributtene.
+     *
+     * Tilstanden bor i attributtet og ikke i et felt på klassen, slik at det
+     * serveren sendte og det komponenten mener alltid er det samme. En egen
+     * `invalid`-variabel ville kunne si noe annet enn markupen etter en morfing.
+     */
+    get invalid() {
+        return this.hasAttribute("invalid");
+    }
+    set invalid(value) {
+        this.toggleAttribute("invalid", value);
+    }
+    get disabled() {
+        return this.hasAttribute("disabled");
+    }
+    set disabled(value) {
+        this.toggleAttribute("disabled", value);
+    }
+    get optional() {
+        return this.hasAttribute("optional");
+    }
+    set optional(value) {
+        this.toggleAttribute("optional", value);
+    }
+    get requiredMarker() {
+        const value = this.getAttribute("required-marker");
+        return value === "symbol" || value === "text" ? value : "none";
+    }
+    set requiredMarker(value) {
+        if (value === "none")
+            this.removeAttribute("required-marker");
+        else
+            this.setAttribute("required-marker", value);
+    }
+    get controlId() {
+        return this.getAttribute("control-id") ?? undefined;
+    }
+    set controlId(value) {
+        if (value === undefined)
+            this.removeAttribute("control-id");
+        else
+            this.setAttribute("control-id", value);
+    }
+    get describedBy() {
+        return this.getAttribute("described-by") ?? undefined;
+    }
+    set describedBy(value) {
+        if (value === undefined)
+            this.removeAttribute("described-by");
+        else
+            this.setAttribute("described-by", value);
+    }
+    connectedCallback() {
+        // `slotchange` melder ikke fra i vanlig DOM, og innholdet byttes ut mens
+        // brukeren fyller ut skjemaet. Bare childList: å sette et attributt på et
+        // barn utløser da ingen ny runde, så observatøren kan ikke gå i ring.
+        this.observer = new MutationObserver(() => this.sync());
+        this.observer.observe(this, { childList: true, subtree: true });
+        this.sync();
+    }
+    disconnectedCallback() {
+        this.observer?.disconnect();
+        this.observer = undefined;
+    }
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.sync();
+    }
+    sync() {
         const label = this.querySelector("label");
         const control = this.querySelector("input:not([type='hidden']), textarea, select");
         const help = this.querySelector(".fs-help-text, [data-role='help']");
@@ -38,24 +104,37 @@ export class FsField extends LitElement {
             help.id = uniqueId("fs-field-help");
         if (error && !error.id)
             error.id = uniqueId("fs-field-error");
-        // Selve kontrakten regnes ut av den delte kjernen, som fs.field() også
-        // bruker. Denne komponenten gjør bare én ting utover det: å sette
-        // resultatet på elementer som allerede står i DOM-en.
+        // Markeringene leses også fra markupen. Skrev serveren dem med
+        // `fs.field()`, står de på ledeteksten, og en komponent som bare så på
+        // sine egne attributter ville fjernet dem igjen. I React ga det en
+        // hydreringsfeil: serveren sendte `data-required="symbol"`, komponenten
+        // tok det bort, og så mente React at HTML-en ikke stemte.
+        const marker = this.getAttribute("required-marker") ??
+            label?.getAttribute("data-required") ??
+            null;
+        const disabled = this.hasAttribute("disabled") || control.hasAttribute("disabled");
+        // Tilstanden leses fra markupen, ikke bare fra et attributt på verten.
+        // Skrev serveren feltet med `fs.field()`, står svaret allerede på
+        // kontrollen, og en komponent som regnet ut sitt eget ville fjernet det
+        // igjen. Da kranglet de to halvdelene av API-et med hverandre.
+        const invalid = this.hasAttribute("invalid") ||
+            control.getAttribute("aria-invalid") === "true";
         const computed = computeFieldAttributes({
-            id: this.controlId || control.id || uniqueId("fs-field-control"),
+            id: this.getAttribute("control-id") ||
+                control.id ||
+                uniqueId("fs-field-control"),
             help: Boolean(help),
             error: Boolean(error),
             helpId: help?.id,
             errorId: error?.id,
-            required: this.requiredMarker === "symbol" || this.requiredMarker === "text"
-                ? this.requiredMarker
-                : undefined,
-            optional: this.optional,
-            invalid: this.invalid,
-            disabled: this.disabled,
+            required: marker === "symbol" || marker === "text" ? marker : undefined,
+            optional: this.hasAttribute("optional") ||
+                label?.hasAttribute("data-optional") === true,
+            invalid,
+            disabled,
             describedBy: [
                 control.getAttribute("aria-describedby") ?? "",
-                this.describedBy ?? "",
+                this.getAttribute("described-by") ?? "",
             ].filter(Boolean),
         });
         control.id = computed.control.id;
@@ -68,12 +147,14 @@ export class FsField extends LitElement {
             setOrRemove(label, "aria-disabled", computed.label["aria-disabled"]);
         }
         if (error) {
+            // Bare `hidden`. Et skjult element er allerede ute av
+            // tilgjengelighetstreet, så `aria-hidden` var overflødig, og ga en
+            // hydreringsfeil i React fordi serveren ikke skriver det.
             error.hidden = Boolean(computed.error.hidden);
-            error.setAttribute("aria-hidden", String(Boolean(computed.error.hidden)));
         }
         setOrRemove(control, "aria-describedby", computed.control["aria-describedby"]);
         setOrRemove(control, "aria-invalid", computed.control["aria-invalid"]);
-        if (this.disabled) {
+        if (disabled) {
             control.setAttribute("disabled", "");
             control.setAttribute("aria-disabled", "true");
         }
@@ -94,22 +175,14 @@ export class FsField extends LitElement {
         }
     }
 }
-FsField.properties = {
-    invalid: { type: Boolean, reflect: true },
-    disabled: { type: Boolean, reflect: true },
-    optional: { type: Boolean, reflect: true },
-    requiredMarker: { type: String, attribute: "required-marker" },
-    controlId: { type: String, attribute: "control-id" },
-    describedBy: { type: String, attribute: "described-by" },
-};
-function setOrRemove(element, name, value) {
-    if (value === undefined) {
-        element.removeAttribute(name);
-    }
-    else {
-        element.setAttribute(name, value);
-    }
-}
+FsField.observedAttributes = [
+    "invalid",
+    "disabled",
+    "optional",
+    "required-marker",
+    "control-id",
+    "described-by",
+];
 export function defineFsField(tagName = FS_FIELD_TAG) {
     if (!customElements.get(tagName)) {
         customElements.define(tagName, FsField);