@fristil/designsystem 0.2.0

package/src/components/frittstaende/toast/fs-toast.ts

@@ -0,0 +1,146 @@
+import { html, LitElement } from "lit"
+
+export const FS_TOAST_TAG = "fs-toast" as const
+
+export const TOAST_CLASS = "fs-toast" as const
+export const TOAST_CLOSE_CLASS = "fs-toast__close" as const
+
+export const toastColors = ["neutral", "success", "warning", "danger"] as const
+export type ToastColor = (typeof toastColors)[number]
+
+export type ToastOptions = {
+  /** Hva meldingen betyr. Standard: `neutral`. */
+  color?: ToastColor
+  /** Millisekunder før meldingen forsvinner. `0` lar den bli stående. */
+  duration?: number
+  /** Tekst på lukkeknappen. Standard: «Lukk melding». */
+  closeLabel?: string
+}
+
+/**
+ * Køen av korte meldinger i hjørnet av skjermen.
+ *
+ * Elementet er beholderen, ikke meldingen. Du legger det inn én gang i
+ * appen og kaller `show()` når noe skal meldes.
+ *
+ * Beholderen er en `role="status"`-region, ikke `role="alert"`. En melding
+ * som dukker opp i hjørnet skal ikke avbryte det skjermleseren holder på med;
+ * er beskjeden så viktig at den må avbryte, hører den hjemme i en
+ * [Alert](../../css/alert/alert.js) i selve siden.
+ *
+ * Meldinger som forsvinner av seg selv er en tilgjengelighetsfelle: den som
+ * leser sakte eller bruker forstørrelse rekker ikke lese dem. Derfor er
+ * lukkeknappen alltid der, og tiden stopper mens musa eller fokus er i
+ * meldingen.
+ *
+ * ```ts
+ * document.querySelector("fs-toast").show("Søknaden er sendt", {
+ *   color: "success",
+ * })
+ * ```
+ */
+export class FsToast extends LitElement {
+  static properties = {
+    duration: { type: Number },
+    label: { type: String },
+  }
+
+  /** Standard levetid i millisekunder. `0` lar meldingene bli stående. */
+  duration = 6000
+  /** Tekst som sier hva regionen er. Blir `aria-label`. */
+  label = "Meldinger"
+
+  createRenderRoot() {
+    return this
+  }
+
+  render() {
+    return html`<slot></slot>`
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+    this.setAttribute("role", "status")
+    this.setAttribute("aria-live", "polite")
+    this.setAttribute("aria-label", this.label)
+  }
+
+  updated() {
+    // `label` kan settes etter at elementet står i DOM-en, for eksempel av et
+    // rammeverk som fyller inn attributtene i et senere steg.
+    this.setAttribute("aria-label", this.label)
+  }
+
+  /** Viser en melding, og returnerer elementet den ble lagt i. */
+  show(message: string, options: ToastOptions = {}): HTMLElement {
+    const {
+      color = "neutral",
+      duration = this.duration,
+      closeLabel = "Lukk melding",
+    } = options
+
+    const toast = document.createElement("div")
+    toast.className = TOAST_CLASS
+    if (color !== "neutral") toast.dataset.color = color
+
+    const text = document.createElement("span")
+    text.textContent = message
+    toast.append(text)
+
+    const close = document.createElement("button")
+    close.type = "button"
+    close.className = TOAST_CLOSE_CLASS
+    close.setAttribute("aria-label", closeLabel)
+    close.textContent = "×"
+    close.addEventListener("click", () => this.dismiss(toast))
+    toast.append(close)
+
+    this.prepend(toast)
+
+    if (duration > 0) {
+      let timer = window.setTimeout(() => this.dismiss(toast), duration)
+
+      // Tiden stopper mens brukeren leser eller er på vei til lukkeknappen.
+      const pause = () => window.clearTimeout(timer)
+      const resume = () => {
+        timer = window.setTimeout(() => this.dismiss(toast), duration)
+      }
+
+      toast.addEventListener("mouseenter", pause)
+      toast.addEventListener("mouseleave", resume)
+      toast.addEventListener("focusin", pause)
+      toast.addEventListener("focusout", resume)
+    }
+
+    return toast
+  }
+
+  /** Fjerner en melding. */
+  dismiss(toast: HTMLElement) {
+    if (!this.contains(toast)) return
+    toast.remove()
+
+    this.dispatchEvent(
+      new CustomEvent("toast-dismiss", { bubbles: true, composed: true }),
+    )
+  }
+
+  /** Fjerner alle meldingene. */
+  clear() {
+    for (const toast of this.querySelectorAll(`.${TOAST_CLASS}`)) {
+      toast.remove()
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "fs-toast": FsToast
+  }
+}
+
+export function defineFsToast(tagName = FS_TOAST_TAG): void {
+  if (!customElements.get(tagName)) {
+    customElements.define(tagName, FsToast)
+  }
+}

package/src/components/frittstaende/toast/toast.css

@@ -0,0 +1,71 @@
+@layer fristil {
+  fs-toast {
+    /* Beholderen ligger fast i hjørnet og slipper klikk gjennom, så den ikke
+       stenger for knapper under seg når den er tom. */
+    position: fixed;
+    inset-block-end: var(--fs-toast-space, var(--size-4));
+    inset-inline-end: var(--fs-toast-space, var(--size-4));
+    z-index: 60;
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-2);
+    inline-size: var(--fs-toast-width, min(24rem, calc(100vw - var(--size-8))));
+    pointer-events: none;
+  }
+
+  .fs-toast {
+    box-sizing: border-box;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--size-3);
+    padding: var(--fs-toast-padding, var(--size-3) var(--size-4));
+    font-family: inherit;
+    font-size: var(--font-size-m);
+    line-height: 1.5;
+    color: var(--semantic-page-foreground);
+    background: var(--semantic-page-background);
+    border: 1px solid var(--semantic-divider-30);
+    border-inline-start: var(--size-1) solid var(--semantic-neutral-foreground);
+    border-radius: var(--fs-toast-radius, var(--size-1));
+    box-shadow: var(--semantic-shadow-overlay);
+    pointer-events: auto;
+  }
+
+  .fs-toast[data-color="success"] {
+    border-inline-start-color: var(--semantic-success-foreground);
+  }
+
+  .fs-toast[data-color="warning"] {
+    border-inline-start-color: var(--semantic-warning-foreground);
+  }
+
+  .fs-toast[data-color="danger"] {
+    border-inline-start-color: var(--semantic-danger-foreground);
+  }
+
+  .fs-toast__close {
+    flex: none;
+    min-inline-size: var(--size-6);
+    min-block-size: var(--size-6);
+    padding: 0;
+    font-family: inherit;
+    font-size: var(--font-size-l);
+    line-height: 1;
+    color: var(--semantic-muted-foreground);
+    background: transparent;
+    border: 0;
+    border-radius: var(--size-1);
+    cursor: pointer;
+  }
+
+  .fs-toast__close:hover {
+    color: var(--semantic-page-foreground);
+    background: var(--semantic-neutral-background);
+  }
+
+  .fs-toast__close:focus-visible {
+    outline: 2px solid var(--semantic-interactive-main);
+    outline-offset: 2px;
+  }
+}

package/src/components/ramme/error-summary/error-summary.css

@@ -0,0 +1,45 @@
+@import "../../css/list/list.css";
+
+@layer fristil {
+  fs-error-summary[hidden] {
+    display: none;
+  }
+
+  /* Klassen settes på selve elementet av komponenten. Konsumentens markup
+     blir stående der den er. */
+  .fs-error-summary {
+    display: block;
+    box-sizing: border-box;
+    padding: var(--fs-error-summary-padding, var(--size-4));
+    font-family: inherit;
+    font-size: var(--font-size-m);
+    line-height: 1.5;
+    color: var(--semantic-page-foreground);
+    background: var(--semantic-danger-background);
+    border-inline-start: var(--size-1) solid var(--semantic-danger-foreground);
+    border-radius: var(--fs-error-summary-radius, var(--size-1));
+  }
+
+  .fs-error-summary:focus-visible {
+    outline: 2px solid var(--semantic-danger-foreground);
+    outline-offset: 2px;
+  }
+
+  .fs-error-summary__title {
+    margin: 0 0 var(--size-2);
+    font-size: var(--font-size-l);
+    font-weight: 600;
+    line-height: 1.4;
+  }
+
+  .fs-error-summary a {
+    color: var(--semantic-danger-foreground);
+    text-decoration: underline;
+    text-underline-offset: 0.14em;
+  }
+
+  .fs-error-summary a:focus-visible {
+    outline: 2px solid var(--semantic-danger-foreground);
+    outline-offset: 2px;
+  }
+}

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

@@ -0,0 +1,197 @@
+import { html, LitElement } from "lit"
+
+export const FS_ERROR_SUMMARY_TAG = "fs-error-summary" as const
+
+export const ERROR_SUMMARY_CLASS = "fs-error-summary" as const
+export const ERROR_SUMMARY_TITLE_CLASS = "fs-error-summary__title" as const
+
+/**
+ * Samler feilene i et skjema og sender brukeren 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:
+ *
+ * 1. Flytter fokus 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
+ *    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">
+ *   <ul class="fs-list">
+ *     <li><a href="#epost">Skriv en gyldig e-postadresse</a></li>
+ *   </ul>
+ * </fs-error-summary>
+ * ```
+ */
+export class FsErrorSummary extends LitElement {
+  static properties = {
+    heading: { type: String },
+    autofocus: { type: Boolean, reflect: true },
+  }
+
+  /** Overskriften over lista. */
+  heading = "Skjemaet har feil"
+  /** Flytt fokus hit når boksen kommer til syne. Standard: på. */
+  autofocus = true
+
+  private hasFocused = false
+  /** Tittelen komponenten selv har laget, til forskjell fra konsumentens. */
+  private ownTitle?: HTMLElement
+
+  createRenderRoot() {
+    return this
+  }
+
+  render() {
+    return html`<slot @slotchange=${this.handleSlotChange}></slot>`
+  }
+
+  /**
+   * Ser etter at lista med feil endrer seg.
+   *
+   * Komponenten rendrer i vanlig DOM, og da melder ikke `slotchange` fra når
+   * konsumenten bytter ut innholdet. Feilene kommer og går mens brukeren
+   * fyller ut skjemaet, så endringen må observeres.
+   */
+  private observer?: MutationObserver
+  private syncing = false
+
+  connectedCallback() {
+    super.connectedCallback()
+    this.observer = new MutationObserver(() => {
+      if (!this.syncing) this.sync()
+    })
+    this.observer.observe(this, { childList: true, subtree: true })
+  }
+
+  disconnectedCallback() {
+    this.observer?.disconnect()
+    this.observer = undefined
+    super.disconnectedCallback()
+  }
+
+  firstUpdated() {
+    this.sync()
+  }
+
+  updated() {
+    this.sync()
+  }
+
+  private handleSlotChange = () => {
+    this.sync()
+  }
+
+  private get items(): HTMLAnchorElement[] {
+    return [...this.querySelectorAll<HTMLAnchorElement>("li a[href^='#']")]
+  }
+
+  private sync() {
+    if (this.syncing) 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<HTMLElement>(
+        `.${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
+    }
+  }
+
+  private handleLinkClick = (event: Event) => {
+    const link = event.currentTarget as HTMLAnchorElement
+    const id = link.getAttribute("href")?.slice(1)
+    if (!id) return
+
+    const target = 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)
+        : target
+
+    const focusable = control ?? target
+    if (!focusable.hasAttribute("tabindex") && !isFocusable(focusable)) {
+      focusable.setAttribute("tabindex", "-1")
+    }
+
+    focusable.focus()
+    focusable.scrollIntoView({ block: "center", behavior: "smooth" })
+  }
+}
+
+function isFocusable(element: Element): boolean {
+  return (
+    element instanceof HTMLInputElement ||
+    element instanceof HTMLSelectElement ||
+    element instanceof HTMLTextAreaElement ||
+    element instanceof HTMLButtonElement ||
+    element instanceof HTMLAnchorElement
+  )
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "fs-error-summary": FsErrorSummary
+  }
+}
+
+export function defineFsErrorSummary(tagName = FS_ERROR_SUMMARY_TAG): void {
+  if (!customElements.get(tagName)) {
+    customElements.define(tagName, FsErrorSummary)
+  }
+}

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

@@ -0,0 +1,132 @@
+import type { FieldState, RequiredMarker } from "../../css/shared.js"
+import { attributes } from "../../css/shared.js"
+
+/**
+ * Regner ut koblingen mellom ledetekst, felt, hjelpetekst og feilmelding.
+ *
+ * Dette er den ene implementasjonen av tilgjengelighetskontrakten i systemet.
+ * `<fs-field>` bruker den på elementer som allerede står i DOM-en, og
+ * `fs.field()` gir den samme utregningen som data til den som vil eie
+ * markupen selv. Uten delingen ville kontrakten finnes to steder og kunne gå
+ * fra hverandre.
+ */
+
+export type FieldOptions = {
+  /** Id på kontrollen. Lages automatisk hvis den utelates. */
+  id?: string
+  /** Feltet har en hjelpetekst som skal kobles med `aria-describedby`. */
+  help?: boolean
+  /** Feltet har en feilmelding. Den skjules til feltet er ugyldig. */
+  error?: boolean
+  /** Egen id på hjelpeteksten. Utledes fra `id` hvis den utelates. */
+  helpId?: string
+  /** Egen id på feilmeldingen. Utledes fra `id` hvis den utelates. */
+  errorId?: string
+  /** Marker ledeteksten som påkrevd. */
+  required?: RequiredMarker
+  /** Marker ledeteksten som valgfri. */
+  optional?: boolean
+  /** Feltet er ugyldig: viser feilmeldingen og setter `aria-invalid`. */
+  invalid?: boolean
+  /** Kontrollen er slått av. */
+  disabled?: boolean
+  /** Ekstra id-er som skal med i `aria-describedby`. */
+  describedBy?: string[]
+}
+
+export type FieldAttributes = {
+  label: {
+    class: "fs-label"
+    for: string
+    "data-required"?: RequiredMarker
+    "data-optional"?: ""
+    "aria-disabled"?: "true"
+  }
+  control: {
+    id: string
+    "aria-describedby"?: string
+    "aria-invalid"?: "true"
+    "data-state"?: "invalid"
+    disabled?: true
+  }
+  help: { id: string }
+  error: { id: string; hidden?: true }
+  /** Tilstanden kontrollen skal ha, til `input()`, `textarea()` og `select()`. */
+  state: FieldState
+}
+
+let counter = 0
+
+/** Lager en id som er unik innenfor dokumentet. */
+export function createFieldId(): string {
+  counter += 1
+  return `fs-field-${counter}-${Math.random().toString(36).slice(2, 8)}`
+}
+
+/**
+ * Setter sammen `aria-describedby` av hjelpetekst, feilmelding og det
+ * kalleren har lagt til selv.
+ *
+ * Feilmeldingen tas bare med når feltet faktisk er ugyldig. Ellers ville
+ * `aria-describedby` pekt på et skjult element, og skjermlesere melder da
+ * enten ingenting eller noe som ikke står på skjermen.
+ */
+export function joinDescribedBy(
+  ids: Array<string | undefined | false>,
+): string | undefined {
+  const unique = new Set<string>()
+  for (const id of ids) {
+    if (!id) continue
+    for (const part of id.split(/\s+/)) {
+      if (part) unique.add(part)
+    }
+  }
+  return unique.size > 0 ? [...unique].join(" ") : undefined
+}
+
+export function computeFieldAttributes(
+  options: FieldOptions = {},
+): FieldAttributes {
+  const {
+    id = createFieldId(),
+    help = false,
+    error = false,
+    required,
+    optional,
+    invalid = false,
+    disabled = false,
+    describedBy = [],
+    helpId = `${id}-help`,
+    errorId = `${id}-error`,
+  } = options
+
+  return {
+    label: attributes({
+      class: "fs-label" as const,
+      for: id,
+      "data-required": required,
+      "data-optional": optional && !required ? ("" as const) : undefined,
+      "aria-disabled": disabled ? ("true" as const) : undefined,
+    }),
+    control: attributes({
+      id,
+      "aria-describedby": joinDescribedBy([
+        help && helpId,
+        invalid && error && errorId,
+        ...describedBy,
+      ]),
+      "aria-invalid": invalid ? ("true" as const) : undefined,
+      // Fargen følger med her, ikke fra input()/textarea()/select(). Ellers
+      // ville begge satt aria-invalid, og i maler som skriver ut attributtene
+      // bokstavelig, som Astro og ren HTML, ble de stående dobbelt.
+      "data-state": invalid ? ("invalid" as const) : undefined,
+      disabled: disabled ? (true as const) : undefined,
+    }),
+    help: { id: helpId },
+    error: attributes({
+      id: errorId,
+      hidden: invalid ? undefined : (true as const),
+    }),
+    state: invalid ? "invalid" : "default",
+  }
+}

package/src/components/ramme/field/field.css

@@ -0,0 +1,6 @@
+@import "../../css/label/label.css";
+@import "../../css/input/input.css";
+@import "../../css/textarea/textarea.css";
+@import "../../css/select/select.css";
+@import "../../css/help-text/help-text.css";
+@import "../../css/error-text/error-text.css";