@fristil/designsystem 0.5.0 → 0.5.2

package/src/components/css/select/select.ts

@@ -1,5 +1,6 @@
 import {
   attributes,
+  createGuard,
   type FieldState,
   fieldStates,
   isFieldState,
@@ -8,14 +9,29 @@ import {
 
 export const SELECT_CLASS = "fs-select" as const
 
+/**
+ * Hvem som tegner nedtrekkslista.
+ *
+ * `auto` er nettleserens egen liste, et vindu fra operativsystemet som ikke
+ * kan styles. `styled` ber nettleseren tegne den inne i siden i stedet, slik
+ * at den får designsystemets farger, avstander og skygge.
+ */
+export const selectPickers = ["auto", "styled"] as const
+export type SelectPicker = (typeof selectPickers)[number]
+export type NonDefaultSelectPicker = Exclude<SelectPicker, "auto">
+export const isSelectPicker = createGuard(selectPickers)
+
 export type SelectOptions = {
   /** Valideringstilstand. Standard: `default`. */
   state?: FieldState
+  /** Hvem som tegner nedtrekkslista. Standard: `auto`. */
+  picker?: SelectPicker
 }
 
 export type SelectAttributes = {
   class: typeof SELECT_CLASS
   "data-state"?: NonDefaultFieldState
+  "data-picker"?: NonDefaultSelectPicker
   "aria-invalid"?: "true"
 }
 
@@ -24,17 +40,24 @@ export type SelectAttributes = {
  *
  * ```ts
  * <select {...select({ state: "invalid" })} />
+ * <select {...select({ picker: "styled" })} />
  * ```
  */
 export const select = Object.assign(
-  ({ state = "default" }: SelectOptions = {}): SelectAttributes =>
+  ({
+    state = "default",
+    picker = "auto",
+  }: SelectOptions = {}): SelectAttributes =>
     attributes({
       class: SELECT_CLASS,
       "data-state": state === "default" ? undefined : state,
+      "data-picker": picker === "auto" ? undefined : picker,
       "aria-invalid": state === "invalid" ? ("true" as const) : undefined,
     }),
   {
     states: fieldStates,
     isState: isFieldState,
+    pickers: selectPickers,
+    isPicker: isSelectPicker,
   },
 )

package/src/components/frittstaende/session-timeout/fs-session-timeout.ts

@@ -69,8 +69,11 @@ export class FsSessionTimeout extends HTMLElement {
 
   connectedCallback(): void {
     this.classList.add(SESSION_TIMEOUT_CLASS)
-    this.build()
 
+    // Dialogen bygges først når den skal vises, ikke her. Lagde vi den med
+    // én gang, sto den i DOM-en før React rakk å hydrere, og React fant et
+    // element den ikke hadde rendret. `<fs-toast>` og
+    // `<fs-connection-status>` gjør det på samme måte.
     for (const navn of ["pointerdown", "keydown", "scroll"] as const) {
       document.addEventListener(navn, this.registerActivity, { passive: true })
     }
@@ -171,6 +174,7 @@ export class FsSessionTimeout extends HTMLElement {
   }
 
   private open(): void {
+    this.build()
     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.

package/src/components/ramme/error-summary/fs-error-summary.ts

@@ -77,9 +77,19 @@ export class FsErrorSummary extends HTMLElement {
       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) {
+    // Skjuler serveren boksen igjen, er den innsendingen over. Uten denne
+    // nullstillingen tok boksen fokus bare første gang: mønsteret i en
+    // Datastar-app er at lista står med de samme lenkene hele veien og bare
+    // `hidden` slås av og på, så «har jeg flyttet fokus hit før» er ikke et
+    // svar på om dette er en ny innsending.
+    if (this.hidden) {
+      this.hasFocused = false
+      return
+    }
+
+    // Er boksen synlig nå, og vi ikke har flyttet fokus hit ennå, er det
+    // denne innsendingen som feilet.
+    if (this.shouldFocus && !this.hasFocused) {
       this.hasFocused = true
       this.focus()
     }

package/src/components/ramme/field/field-core.ts

@@ -134,31 +134,46 @@ export function computeFieldAttributes(
 /**
  * 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.
+ * Lista trengs bare når to ting gjelder samtidig.
+ *
+ * Lages markupen med JavaScript, skal den kalle `computeFieldAttributes` og
+ * skrive attributtene selv. Da trengs verken komponenten eller denne lista.
+ * Blir markupen til uten JavaScript, i en Go-mal eller håndskrevet HTML, gjør
+ * `<fs-field>` koblingen i nettleseren, og på en side serveren sender én gang
+ * er det alt som skal til.
+ *
+ * Oppdaterer serveren det samme området mens brukeren holder på, som i en
+ * Datastar- eller htmx-app, må malen i tillegg skrive lista som
+ * `data-preserve-attr` på hvert av de tre elementene. Morfingen leser den 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.
  *
+ * Hjelpeteksten og feilmeldingen må ha `id` med i lista selv om malen ikke
+ * skriver noen. Komponenten lager dem i så fall selv, og `aria-describedby`
+ * på kontrollen peker på dem. Forsvinner id-en i en morfing, peker
+ * koblingen på noe som ikke finnes, og skjermleseren leser verken
+ * hjelpeteksten eller feilen. `for` på ledeteksten er der av samme grunn.
+ *
  * ```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"
+ * <label class="fs-label"
+ *        data-preserve-attr="class for data-required data-optional aria-disabled">E-post</label>
+ * <input class="fs-input"
  *        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>
+ * <p class="fs-help-text" data-preserve-attr="id">Vi sender aldri spam.</p>
+ * <p class="fs-error-text" hidden data-preserve-attr="id hidden">Skriv en gyldig adresse.</p>
  * ```
  */
 export const FIELD_PRESERVED_ATTRIBUTES = {
   /** På ledeteksten. */
-  label: "class data-required data-optional aria-disabled",
+  label: "class for data-required data-optional aria-disabled",
   /** På selve kontrollen. */
   control: "id aria-describedby aria-invalid data-state disabled aria-disabled",
+  /** På hjelpeteksten. */
+  help: "id",
   /** På feilmeldingen. */
-  error: "hidden",
+  error: "id hidden",
 } as const

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

@@ -21,9 +21,10 @@ function setOrRemove(
 /**
  * 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 er for markup som blir til uten JavaScript: en Go-mal, en
+ * PHP-fil, en Razor-visning eller håndskrevet HTML. Lages markupen med
+ * JavaScript, uansett hvor koden kjører, skal `fs.field()` skrive
+ * attributtene i stedet, 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

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

@@ -38,7 +38,6 @@ export const FS_SUGGESTION_TAG = "fs-suggestion" as const
 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. */
@@ -75,6 +74,22 @@ export class FsSuggestion extends HTMLElement {
     ]
   }
 
+  /**
+   * Hvilket synlig alternativ som er markert nå.
+   *
+   * Den leses fra `aria-selected` i markupen, ikke fra en teller inni
+   * komponenten. Serveren kan sette markeringen selv med
+   * `fs.suggestion({ activeIndex })`, og en parallell teller ville hoppet
+   * til toppen av lista ved første piltast i stedet for til alternativet
+   * etter. Filtreringen flytter også på alternativene, og da svarer
+   * oppslaget riktig av seg selv.
+   */
+  private get activeIndex(): number {
+    return this.visible.findIndex(
+      (option) => option.getAttribute("aria-selected") === "true",
+    )
+  }
+
   /** Alternativene som er synlige nå. */
   private get visible(): HTMLElement[] {
     return this.options.filter((option) => !option.hidden)
@@ -120,7 +135,6 @@ export class FsSuggestion extends HTMLElement {
     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")
@@ -166,7 +180,6 @@ export class FsSuggestion extends HTMLElement {
     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")
@@ -228,7 +241,17 @@ export class FsSuggestion extends HTMLElement {
       this.markActive(this.activeIndex + 1)
     } else if (event.key === "ArrowUp") {
       event.preventDefault()
-      this.markActive(this.activeIndex - 1)
+      // Lista må åpnes først, som med pil ned. Uten det pekte
+      // `aria-activedescendant` på et alternativ i en liste feltet samtidig
+      // meldte som lukket, og skjermleseren leste opp noe som ikke sto på
+      // skjermen.
+      if (!åpen) {
+        this.filter()
+        this.setOpen(true)
+      }
+      // Er ingenting markert, går pil opp til det siste. `activeIndex - 1`
+      // ville gitt det nest siste, siden ingenting markert er -1.
+      this.markActive(this.activeIndex < 0 ? -1 : this.activeIndex - 1)
     } else if (event.key === "Enter" && åpen && this.activeIndex >= 0) {
       event.preventDefault()
       const valgt = this.visible[this.activeIndex]

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

@@ -82,7 +82,19 @@ export const suggestion = ({
         "data-preserve-attr": "aria-selected hidden" as const,
       }),
     ),
-    empty: { class: SUGGESTION_EMPTY_CLASS },
+    /**
+     * Teksten som vises når ingenting passer.
+     *
+     * Den er skjult så lenge serveren sender noe å velge mellom, og
+     * komponenten skjuler og viser den igjen mens brukeren skriver.
+     * `data-preserve-attr` må derfor ha `hidden` med: uten den dukket
+     * «Ingen treff» opp igjen ved hver patch, også når noe passet.
+     */
+    empty: attributes({
+      class: SUGGESTION_EMPTY_CLASS,
+      hidden: count > 0 ? (true as const) : undefined,
+      "data-preserve-attr": "hidden" as const,
+    }),
     /**
      * Området som melder antall treff til skjermlesere.
      *