@fristil/designsystem 0.5.1 → 0.5.3

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

@@ -1,3 +1,4 @@
+import { defineElement, HostElement } from "../../host-element.js"
 import {
   SUGGESTION_EMPTY_CLASS,
   SUGGESTION_OPTION_CLASS,
@@ -35,10 +36,9 @@ export const FS_SUGGESTION_TAG = "fs-suggestion" as const
  * </fs-suggestion>
  * ```
  */
-export class FsSuggestion extends HTMLElement {
+export class FsSuggestion extends HostElement {
   static observedAttributes = ["server-filtered"]
 
-  private activeIndex = -1
   private observer?: MutationObserver
   private control?: HTMLInputElement
   /** Alternativene som alt har fått lytteren sin. */
@@ -75,6 +75,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 +136,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 +181,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 +242,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]
@@ -259,7 +283,5 @@ declare global {
 }
 
 export function defineFsSuggestion(tagName = FS_SUGGESTION_TAG): void {
-  if (!customElements.get(tagName)) {
-    customElements.define(tagName, FsSuggestion)
-  }
+  defineElement(tagName, FsSuggestion)
 }

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.
      *

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

@@ -1,3 +1,4 @@
+import { defineElement, HostElement } from "../../host-element.js"
 export const FS_TABS_TAG = "fs-tabs" as const
 
 /**
@@ -27,7 +28,7 @@ export const FS_TABS_TAG = "fs-tabs" as const
  * </fs-tabs>
  * ```
  */
-export class FsTabs extends HTMLElement {
+export class FsTabs extends HostElement {
   /**
    * Ingen attributter. Hvilken fane som er valgt står i markupen serveren
    * sendte, som `aria-selected` på fanen og `hidden` på panelene, og leses
@@ -145,7 +146,5 @@ declare global {
 }
 
 export function defineFsTabs(tagName = FS_TABS_TAG): void {
-  if (!customElements.get(tagName)) {
-    customElements.define(tagName, FsTabs)
-  }
+  defineElement(tagName, FsTabs)
 }