@fristil/designsystem 0.3.0 → 0.5.0

package/src/components/ramme/popover/fs-popover.ts

@@ -1,11 +1,14 @@
-import { html, LitElement } from "lit"
-
 export const FS_POPOVER_TAG = "fs-popover" as const
 
-export const POPOVER_CLASS = "fs-popover" as const
-
 type Placement = "bottom-start" | "bottom-end" | "top-start" | "top-end"
 
+const PLACEMENTS: readonly Placement[] = [
+  "bottom-start",
+  "bottom-end",
+  "top-start",
+  "top-end",
+]
+
 /**
  * Et panel som henger under en knapp, og som lukker seg selv.
  *
@@ -13,94 +16,99 @@ type Placement = "bottom-start" | "bottom-end" | "top-start" | "top-end"
  * løser tre ting som ellers krever kode: panelet legger seg over alt annet
  * uten `z-index`, Escape lukker det, og et klikk utenfor lukker det.
  *
- * Det topplaget gjør ikke er å plassere panelet. `position-anchor` finnes
- * ennå ikke i alle nettlesere, så posisjonen regnes ut her, mot knappens
- * plass på skjermen.
+ * Det topplaget ikke gjør er å plassere panelet. `position-anchor` finnes
+ * ennå ikke i alle nettlesere, så posisjonen regnes ut her.
  *
- * Du skriver knappen og innholdet selv, og komponenten kobler dem sammen:
+ * Serveren skriver koblingen med `fs.popover()`: `aria-controls` på knappen,
+ * klassen og `popover` på panelet. Komponenten setter bare `aria-expanded`,
+ * som endrer seg når brukeren klikker, og posisjonen. Begge står i
+ * `data-preserve-attr` fra byggeren, ellers river morfingen dem bort.
  *
  * ```html
  * <fs-popover placement="bottom-end">
- *   <button slot="trigger" class="fs-button">Handlinger</button>
- *   <ul class="fs-list" data-variant="plain">…</ul>
+ *   <button slot="trigger" class="fs-button" aria-controls="meny" aria-expanded="false"
+ *           data-preserve-attr="aria-expanded">Handlinger</button>
+ *   <ul id="meny" class="fs-popover" popover="manual" data-preserve-attr="style">…</ul>
  * </fs-popover>
  * ```
  */
-export class FsPopover extends LitElement {
-  static properties = {
-    open: { type: Boolean, reflect: true },
-    placement: { type: String },
-  }
-
-  /** Om panelet er åpent. Speiles, så CSS kan treffe tilstanden. */
-  open = false
-  /** Hvilken kant panelet henger fra. Standard: `bottom-start`. */
-  placement: Placement = "bottom-start"
+export class FsPopover extends HTMLElement {
+  static observedAttributes = ["open", "placement"]
 
   private panel?: HTMLElement
   private triggerElement?: HTMLElement
+  private observer?: MutationObserver
 
-  createRenderRoot() {
-    return this
+  /** Om panelet er åpent. Speiles, så CSS kan treffe tilstanden. */
+  get open(): boolean {
+    return this.hasAttribute("open")
   }
 
-  render() {
-    return html`<slot @slotchange=${this.handleSlotChange}></slot>`
+  set open(value: boolean) {
+    if (value) this.setAttribute("open", "")
+    else this.removeAttribute("open")
   }
 
-  connectedCallback() {
-    super.connectedCallback()
-    window.addEventListener("resize", this.reposition)
-    window.addEventListener("scroll", this.reposition, true)
+  /** Hvilken kant panelet henger fra. Standard: `bottom-start`. */
+  get placement(): Placement {
+    const value = this.getAttribute("placement") as Placement | null
+    return value && PLACEMENTS.includes(value) ? value : "bottom-start"
   }
 
-  disconnectedCallback() {
-    window.removeEventListener("resize", this.reposition)
-    window.removeEventListener("scroll", this.reposition, true)
-    super.disconnectedCallback()
+  set placement(value: Placement) {
+    this.setAttribute("placement", value)
   }
 
-  firstUpdated() {
+  connectedCallback(): void {
+    window.addEventListener("resize", this.reposition)
+    window.addEventListener("scroll", this.reposition, true)
+    this.observer = new MutationObserver(() => this.sync())
+    this.observer.observe(this, { childList: true })
     this.sync()
   }
 
-  updated() {
-    this.sync()
+  disconnectedCallback(): void {
+    window.removeEventListener("resize", this.reposition)
+    window.removeEventListener("scroll", this.reposition, true)
+    document.removeEventListener("click", this.handleOutsideClick, true)
+    document.removeEventListener("keydown", this.handleKeydown)
+    this.observer?.disconnect()
+    this.observer = undefined
+    this.triggerElement?.removeEventListener("click", this.handleTriggerClick)
+    // Referansen må nullstilles, ellers ser `sync()` at knappen er den samme
+    // når elementet settes inn igjen, og hopper over å feste lytteren på
+    // nytt. Da lar panelet seg ikke åpne lenger.
+    this.triggerElement = undefined
+    this.panel = undefined
   }
 
-  private handleSlotChange = () => {
-    this.sync()
+  attributeChangedCallback(): void {
+    if (this.isConnected) this.sync()
   }
 
-  private sync() {
+  private sync(): void {
     const trigger = this.querySelector<HTMLElement>("[slot='trigger']")
     const panel = [...this.children].find(
       (child): child is HTMLElement =>
         child instanceof HTMLElement &&
-        child.getAttribute("slot") !== "trigger" &&
-        child.tagName !== "SLOT",
+        child.getAttribute("slot") !== "trigger",
     )
 
     if (!trigger || !panel) return
 
-    this.triggerElement = trigger
+    if (this.triggerElement !== trigger) {
+      this.triggerElement?.removeEventListener("click", this.handleTriggerClick)
+      trigger.addEventListener("click", this.handleTriggerClick)
+      this.triggerElement = trigger
+    }
     this.panel = panel
 
-    if (!panel.id) {
-      panel.id = `fs-popover-${Math.random().toString(36).slice(2, 9)}`
+    // Eneste attributtet komponenten eier. Resten skrev serveren.
+    const expanded = String(this.open)
+    if (trigger.getAttribute("aria-expanded") !== expanded) {
+      trigger.setAttribute("aria-expanded", expanded)
     }
 
-    panel.classList.add(POPOVER_CLASS)
-    // `manual` og ikke `auto`: vi lukker selv, slik at knappen kan brukes til
-    // å lukke igjen uten at nettleseren rekker å lukke først.
-    panel.setAttribute("popover", "manual")
-
-    trigger.setAttribute("aria-expanded", String(this.open))
-    trigger.setAttribute("aria-controls", panel.id)
-
-    trigger.removeEventListener("click", this.handleTriggerClick)
-    trigger.addEventListener("click", this.handleTriggerClick)
-
     if (this.open) {
       if (!panel.matches(":popover-open")) panel.showPopover()
       this.reposition()
@@ -113,17 +121,17 @@ export class FsPopover extends LitElement {
     }
   }
 
-  private handleTriggerClick = () => {
+  private handleTriggerClick = (): void => {
     this.toggle()
   }
 
-  private handleOutsideClick = (event: Event) => {
+  private handleOutsideClick = (event: Event): void => {
     const target = event.target as Node
     if (this.contains(target) || this.panel?.contains(target)) return
     this.hide()
   }
 
-  private handleKeydown = (event: KeyboardEvent) => {
+  private handleKeydown = (event: KeyboardEvent): void => {
     if (event.key !== "Escape") return
     this.hide()
     // Fokus tilbake til knappen. Uten dette står fokus på et panel som ikke
@@ -132,7 +140,7 @@ export class FsPopover extends LitElement {
   }
 
   /** Regner ut hvor panelet skal stå, mot knappens plass på skjermen. */
-  private reposition = () => {
+  private reposition = (): void => {
     if (!this.open || !this.panel || !this.triggerElement) return
 
     const anchor = this.triggerElement.getBoundingClientRect()
@@ -159,34 +167,32 @@ export class FsPopover extends LitElement {
     this.panel.style.setProperty("--fs-popover-left", `${Math.round(left)}px`)
   }
 
-  /** Åpner panelet. */
-  show() {
-    if (this.open) return
-    this.open = true
+  private emit(open: boolean): void {
     this.dispatchEvent(
       new CustomEvent("popover-toggle", {
-        detail: { open: true },
+        detail: { open },
         bubbles: true,
         composed: true,
       }),
     )
   }
 
+  /** Åpner panelet. */
+  show(): void {
+    if (this.open) return
+    this.open = true
+    this.emit(true)
+  }
+
   /** Lukker panelet. */
-  hide() {
+  hide(): void {
     if (!this.open) return
     this.open = false
-    this.dispatchEvent(
-      new CustomEvent("popover-toggle", {
-        detail: { open: false },
-        bubbles: true,
-        composed: true,
-      }),
-    )
+    this.emit(false)
   }
 
   /** Åpner eller lukker. */
-  toggle() {
+  toggle(): void {
     if (this.open) this.hide()
     else this.show()
   }

package/src/components/ramme/popover/popover.ts

@@ -0,0 +1,79 @@
+import { attributes } from "../../css/shared.js"
+
+export const POPOVER_CLASS = "fs-popover" as const
+
+export type PopoverOptions = {
+  /** Id på panelet. Kobler knappen til panelet med `aria-controls`. */
+  id: string
+  /** Panelet er åpent. Standard: lukket. */
+  open?: boolean
+}
+
+export type PopoverAttributes = {
+  host: {
+    open?: ""
+    "data-preserve-attr": "open"
+  }
+  trigger: {
+    slot: "trigger"
+    "aria-expanded": "true" | "false"
+    "aria-controls": string
+    "data-preserve-attr": "aria-expanded"
+  }
+  panel: {
+    class: typeof POPOVER_CLASS
+    id: string
+    popover: "manual"
+    "data-preserve-attr": "style"
+  }
+}
+
+/**
+ * Attributtene for et sprettoppvindu.
+ *
+ * Serveren skriver både knappen og panelet med koblingen mellom dem.
+ * `<fs-popover>` regner ut posisjonen og lukker ved klikk utenfor.
+ *
+ * ```ts
+ * const boks = fs.popover({ id: "hjelp" })
+ * ```
+ * ```html
+ * <fs-popover>
+ *   <button {...boks.trigger}>Hva betyr dette?</button>
+ *   <div {...boks.panel}>Vi bruker fødselsdatoen til å finne riktig sats.</div>
+ * </fs-popover>
+ * ```
+ */
+export const popover = ({
+  id,
+  open = false,
+}: PopoverOptions): PopoverAttributes => ({
+  // Om panelet er åpent står som `open` på verten, og det er brukerens
+  // tilstand, ikke serverens. Uten dette lukker morfingen panelet i det
+  // serveren patcher området rundt.
+  host: attributes({
+    // `open` må stå på verten, ikke bare i knappens aria-expanded. Uten det
+    // sa markupen at panelet var åpent mens komponenten mente det var lukket.
+    open: open ? ("" as const) : undefined,
+    "data-preserve-attr": "open" as const,
+  }),
+  trigger: attributes({
+    slot: "trigger" as const,
+    "aria-expanded": (open ? "true" : "false") as "true" | "false",
+    "aria-controls": id,
+    // Komponenten endrer aria-expanded når panelet åpnes. Uten dette fjerner
+    // Datastars morfing det igjen, siden serverens utgave sier noe annet.
+    "data-preserve-attr": "aria-expanded" as const,
+  }),
+  panel: attributes({
+    class: POPOVER_CLASS,
+    id,
+    // `manual` og ikke `auto`: komponenten lukker selv, slik at knappen kan
+    // brukes til å lukke igjen uten at nettleseren rekker å lukke først.
+    popover: "manual" as const,
+    // Posisjonen regnes ut mot knappens plass på skjermen og settes som
+    // `--fs-popover-top` og `--fs-popover-left` i style-attributtet. Uten
+    // dette river morfingen posisjonen bort, og panelet hopper til hjørnet.
+    "data-preserve-attr": "style" as const,
+  }),
+})

package/src/components/ramme/suggestion/fs-suggestion.ts

@@ -0,0 +1,265 @@
+import {
+  SUGGESTION_EMPTY_CLASS,
+  SUGGESTION_OPTION_CLASS,
+} from "./suggestion.js"
+
+export const FS_SUGGESTION_TAG = "fs-suggestion" as const
+
+/**
+ * Tastaturet og filtreringen i et felt med forslagsliste.
+ *
+ * Serveren skriver feltet og lista med `fs.suggestion()`. Komponenten rendrer
+ * ingenting. Den lagde tidligere hele feltet selv, og da fantes det verken
+ * ledetekst eller inndatafelt før skriptet hadde kjørt, og ingenting ble med
+ * i innsendingen.
+ *
+ * Det komponenten gjør er det nettleseren ikke gjør: filtrerer alternativene
+ * mens brukeren skriver, flytter markeringen med piltastene, og holder
+ * `aria-activedescendant` i synk slik at skjermleseren leser opp alternativet
+ * uten at fokus forlater feltet.
+ *
+ * Patcher serveren lista selv, som i en Datastar-app, slår filtreringen seg
+ * av: da er det serveren som bestemmer hva som vises.
+ *
+ * ```html
+ * <fs-suggestion>
+ *   <label class="fs-label" for="kommune">Kommune</label>
+ *   <div class="fs-suggestion__field">
+ *     <input class="fs-input" id="kommune" role="combobox" aria-controls="kommune-list"
+ *            aria-expanded="false" data-preserve-attr="aria-expanded aria-activedescendant">
+ *     <ul class="fs-suggestion__list" id="kommune-list" role="listbox" hidden
+ *         data-preserve-attr="hidden">
+ *       <li class="fs-suggestion__option" id="kommune-option-0" role="option">Bergen</li>
+ *     </ul>
+ *   </div>
+ * </fs-suggestion>
+ * ```
+ */
+export class FsSuggestion extends HTMLElement {
+  static observedAttributes = ["server-filtered"]
+
+  private activeIndex = -1
+  private observer?: MutationObserver
+  private control?: HTMLInputElement
+  /** Alternativene som alt har fått lytteren sin. */
+  private readonly bundne = new WeakSet<HTMLElement>()
+  /** Sant mens komponenten selv sender hendelser, så den ikke svarer seg selv. */
+  private choosing = false
+
+  connectedCallback(): void {
+    this.observer = new MutationObserver(() => this.bind())
+    this.observer.observe(this, { childList: true, subtree: true })
+    this.bind()
+    document.addEventListener("click", this.handleOutsideClick, true)
+  }
+
+  disconnectedCallback(): void {
+    document.removeEventListener("click", this.handleOutsideClick, true)
+    this.observer?.disconnect()
+    this.observer = undefined
+    this.unbind()
+  }
+
+  /** Slår av filtreringen på klienten. Da er det serveren som bestemmer. */
+  get serverFiltered(): boolean {
+    return this.hasAttribute("server-filtered")
+  }
+
+  private get listElement(): HTMLElement | null {
+    return this.querySelector<HTMLElement>("[role='listbox']")
+  }
+
+  private get options(): HTMLElement[] {
+    return [
+      ...this.querySelectorAll<HTMLElement>(`.${SUGGESTION_OPTION_CLASS}`),
+    ]
+  }
+
+  /** Alternativene som er synlige nå. */
+  private get visible(): HTMLElement[] {
+    return this.options.filter((option) => !option.hidden)
+  }
+
+  private unbind(): void {
+    const control = this.control
+    if (!control) return
+    control.removeEventListener("input", this.handleInput)
+    control.removeEventListener("keydown", this.handleKeydown)
+    control.removeEventListener("focus", this.handleFocus)
+    this.control = undefined
+  }
+
+  private bind(): void {
+    const control = this.querySelector<HTMLInputElement>("[role='combobox']")
+    if (!control) return
+
+    if (control !== this.control) {
+      this.unbind()
+      control.addEventListener("input", this.handleInput)
+      control.addEventListener("keydown", this.handleKeydown)
+      control.addEventListener("focus", this.handleFocus)
+      this.control = control
+    }
+
+    // Alternativene byttes ut uavhengig av feltet: i en Datastar-app sender
+    // serveren en ny liste mens brukeren skriver. Lå dette bak sjekken over,
+    // fikk de nye alternativene aldri lytteren sin, og valg med mus sluttet
+    // å virke etter første oppdatering.
+    for (const option of this.options) {
+      if (this.bundne.has(option)) continue
+      option.addEventListener("mousedown", this.handleOptionMouseDown)
+      this.bundne.add(option)
+    }
+  }
+
+  private setOpen(open: boolean): void {
+    const list = this.listElement
+    if (!list || !this.control) return
+
+    list.hidden = !open
+    this.control.setAttribute("aria-expanded", String(open))
+
+    if (!open) {
+      this.activeIndex = -1
+      this.control.removeAttribute("aria-activedescendant")
+      for (const option of this.options) {
+        option.setAttribute("aria-selected", "false")
+      }
+    }
+  }
+
+  private filter(): void {
+    if (this.serverFiltered) return
+
+    const query = (this.control?.value ?? "").trim().toLowerCase()
+    for (const option of this.options) {
+      const label = (option.textContent ?? "").trim().toLowerCase()
+      option.hidden = query !== "" && !label.includes(query)
+    }
+
+    const treff = this.visible.length
+    const empty = this.querySelector<HTMLElement>(`.${SUGGESTION_EMPTY_CLASS}`)
+    if (empty) empty.hidden = treff > 0
+
+    this.announce(treff)
+  }
+
+  /**
+   * Melder antall treff.
+   *
+   * Uten dette får den som ikke ser skjermen ingen beskjed om at lista
+   * snevret seg inn mens hun skrev. Teksten er klientgenerert, så elementet
+   * har `data-ignore-morph` fra byggeren.
+   */
+  private announce(treff: number): void {
+    const status = this.querySelector<HTMLElement>("[role='status']")
+    if (!status) return
+
+    const tekst =
+      treff === 0 ? "Ingen treff" : treff === 1 ? "Ett treff" : `${treff} treff`
+
+    if (status.textContent !== tekst) status.textContent = tekst
+  }
+
+  private markActive(index: number): void {
+    const synlige = this.visible
+    if (synlige.length === 0 || !this.control) return
+
+    const neste = (index + synlige.length) % synlige.length
+    this.activeIndex = neste
+
+    for (const option of this.options) {
+      option.setAttribute("aria-selected", "false")
+    }
+
+    const aktiv = synlige[neste]
+    aktiv.setAttribute("aria-selected", "true")
+    // aria-activedescendant flytter skjermleserens lesepunkt uten at fokus
+    // forlater feltet. Uten den leses alternativet aldri opp.
+    this.control.setAttribute("aria-activedescendant", aktiv.id)
+    aktiv.scrollIntoView({ block: "nearest" })
+  }
+
+  private choose(option: HTMLElement): void {
+    if (!this.control) return
+
+    const value =
+      option.getAttribute("data-value") ?? (option.textContent ?? "").trim()
+    this.control.value = value
+
+    // Flagget må stå før hendelsene sendes. `input` er den samme hendelsen
+    // komponenten selv lytter på, så uten dette åpner lista seg igjen i det
+    // øyeblikket brukeren har valgt noe.
+    this.choosing = true
+    this.control.dispatchEvent(new Event("input", { bubbles: true }))
+    this.control.dispatchEvent(new Event("change", { bubbles: true }))
+    this.choosing = false
+
+    this.setOpen(false)
+    this.dispatchEvent(
+      new CustomEvent("suggestion-select", {
+        detail: { value },
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  private handleInput = (): void => {
+    if (this.choosing) return
+    this.filter()
+    this.setOpen(true)
+  }
+
+  private handleFocus = (): void => {
+    this.filter()
+    this.setOpen(true)
+  }
+
+  private handleKeydown = (event: KeyboardEvent): void => {
+    const åpen = this.listElement?.hidden === false
+
+    if (event.key === "ArrowDown") {
+      event.preventDefault()
+      if (!åpen) {
+        this.filter()
+        this.setOpen(true)
+      }
+      this.markActive(this.activeIndex + 1)
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault()
+      this.markActive(this.activeIndex - 1)
+    } else if (event.key === "Enter" && åpen && this.activeIndex >= 0) {
+      event.preventDefault()
+      const valgt = this.visible[this.activeIndex]
+      if (valgt) this.choose(valgt)
+    } else if (event.key === "Escape" && åpen) {
+      event.preventDefault()
+      this.setOpen(false)
+    }
+  }
+
+  private handleOptionMouseDown = (event: Event): void => {
+    // mousedown og ikke click: feltet mister ellers fokus før valget rekker
+    // å skje, og lista lukker seg først.
+    event.preventDefault()
+    this.choose(event.currentTarget as HTMLElement)
+  }
+
+  private handleOutsideClick = (event: Event): void => {
+    if (this.contains(event.target as Node)) return
+    this.setOpen(false)
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "fs-suggestion": FsSuggestion
+  }
+}
+
+export function defineFsSuggestion(tagName = FS_SUGGESTION_TAG): void {
+  if (!customElements.get(tagName)) {
+    customElements.define(tagName, FsSuggestion)
+  }
+}

package/src/components/ramme/suggestion/suggestion.ts

@@ -0,0 +1,105 @@
+import { attributes } from "../../css/shared.js"
+import {
+  computeFieldAttributes,
+  type FieldOptions,
+} from "../field/field-core.js"
+
+export const SUGGESTION_CLASS = "fs-suggestion" as const
+export const SUGGESTION_FIELD_CLASS = "fs-suggestion__field" as const
+export const SUGGESTION_LIST_CLASS = "fs-suggestion__list" as const
+export const SUGGESTION_OPTION_CLASS = "fs-suggestion__option" as const
+export const SUGGESTION_EMPTY_CLASS = "fs-suggestion__empty" as const
+export const SUGGESTION_STATUS_CLASS = "fs-sr-only" as const
+
+export type SuggestionOptions = Omit<FieldOptions, "id"> & {
+  /** Felles id-stamme. Kontrollen blir `${id}`, lista `${id}-list`. */
+  id: string
+  /** Antall alternativer serveren sender med. Standard: 0. */
+  count?: number
+  /** Alternativet som er markert med piltastene. Standard: ingen. */
+  activeIndex?: number
+  /** Lista er åpen. Standard: lukket. */
+  open?: boolean
+}
+
+/**
+ * Attributtene for et felt med forslagsliste.
+ *
+ * Serveren skriver både feltet og lista. Komponenten filtrerer, tar
+ * piltastene og holder `aria-activedescendant` i synk. Den rendrer ingenting:
+ * tidligere lagde den hele feltet selv, og da fantes det ikke noe å fylle ut
+ * før skriptet hadde kjørt.
+ *
+ * Attributtene som endrer seg mens brukeren skriver står i
+ * `data-preserve-attr`, ellers river Datastars morfing dem bort.
+ */
+export const suggestion = ({
+  id,
+  count = 0,
+  activeIndex = -1,
+  open = false,
+  ...field
+}: SuggestionOptions) => {
+  const computed = computeFieldAttributes({ ...field, id })
+  const listId = `${id}-list`
+  const statusId = `${id}-status`
+  const optionId = (index: number) => `${id}-option-${index}`
+  const aktiv = open && activeIndex >= 0 && activeIndex < count
+
+  return {
+    label: computed.label,
+    field: { class: SUGGESTION_FIELD_CLASS },
+    control: attributes({
+      ...computed.control,
+      class: "fs-input" as const,
+      type: "text" as const,
+      role: "combobox" as const,
+      autocomplete: "off" as const,
+      "aria-expanded": (open ? "true" : "false") as "true" | "false",
+      "aria-controls": listId,
+      "aria-describedby": [computed.control["aria-describedby"], statusId]
+        .filter(Boolean)
+        .join(" "),
+      "aria-autocomplete": "list" as const,
+      "aria-activedescendant": aktiv ? optionId(activeIndex) : undefined,
+      "data-preserve-attr": "aria-expanded aria-activedescendant" as const,
+    }),
+    list: attributes({
+      class: SUGGESTION_LIST_CLASS,
+      id: listId,
+      role: "listbox" as const,
+      hidden: open ? undefined : (true as const),
+      "data-preserve-attr": "hidden" as const,
+    }),
+    options: Array.from({ length: count }, (_, index) =>
+      attributes({
+        class: SUGGESTION_OPTION_CLASS,
+        id: optionId(index),
+        role: "option" as const,
+        "aria-selected": (index === activeIndex ? "true" : "false") as
+          | "true"
+          | "false",
+        "data-preserve-attr": "aria-selected hidden" as const,
+      }),
+    ),
+    empty: { class: SUGGESTION_EMPTY_CLASS },
+    /**
+     * Området som melder antall treff til skjermlesere.
+     *
+     * Teksten skrives av komponenten mens brukeren taster, så den finnes ikke
+     * i serverens utgave. `data-ignore-morph` hindrer at neste patch tømmer
+     * den. Elementet må likevel stå i markupen serveren sender, ellers finnes
+     * det ikke noe å melde i før skriptet har kjørt.
+     */
+    status: {
+      class: SUGGESTION_STATUS_CLASS,
+      id: statusId,
+      role: "status" as const,
+      "aria-live": "polite" as const,
+      "data-ignore-morph": "" as const,
+    },
+    help: computed.help,
+    error: computed.error,
+    state: computed.state,
+  }
+}