@fristil/designsystem 0.2.0

package/src/components/css/paragraph/paragraph.ts

@@ -0,0 +1,53 @@
+import { attributes, createGuard } from "../shared.js"
+
+export const PARAGRAPH_CLASS = "fs-paragraph" as const
+
+export const paragraphSizes = ["small", "medium", "large"] as const
+export const paragraphVariants = ["default", "lead"] as const
+
+export type ParagraphSize = (typeof paragraphSizes)[number]
+export type ParagraphVariant = (typeof paragraphVariants)[number]
+export type NonDefaultParagraphSize = Exclude<ParagraphSize, "medium">
+export type NonDefaultParagraphVariant = Exclude<ParagraphVariant, "default">
+
+export type ParagraphOptions = {
+  /** Tekststørrelse. Standard: `medium`. */
+  size?: ParagraphSize
+  /** `lead` er ingressen rett under overskriften. Standard: `default`. */
+  variant?: ParagraphVariant
+}
+
+export type ParagraphAttributes = {
+  class: typeof PARAGRAPH_CLASS
+  "data-size"?: NonDefaultParagraphSize
+  "data-variant"?: NonDefaultParagraphVariant
+}
+
+/**
+ * Attributtene for et avsnitt.
+ *
+ * Bredden er begrenset til 70 tegn. Lengre linjer gjør det vanskelig å finne
+ * tilbake til starten av neste, og det er den vanligste grunnen til at en
+ * tekst er tung å lese selv når skriften er stor nok.
+ *
+ * ```ts
+ * <p {...paragraph({ variant: "lead" })}>Kort om hva siden handler om.</p>
+ * ```
+ */
+export const paragraph = Object.assign(
+  ({
+    size = "medium",
+    variant = "default",
+  }: ParagraphOptions = {}): ParagraphAttributes =>
+    attributes({
+      class: PARAGRAPH_CLASS,
+      "data-size": size === "medium" ? undefined : size,
+      "data-variant": variant === "default" ? undefined : variant,
+    }),
+  {
+    sizes: paragraphSizes,
+    isSize: createGuard(paragraphSizes),
+    variants: paragraphVariants,
+    isVariant: createGuard(paragraphVariants),
+  },
+)

package/src/components/css/radio/radio.css

@@ -0,0 +1,76 @@
+@layer fristil {
+  .fs-radio {
+    box-sizing: border-box;
+    appearance: none;
+    flex: none;
+    display: inline-block;
+    inline-size: var(--fs-radio-size, var(--size-5));
+    block-size: var(--fs-radio-size, var(--size-5));
+    margin: 0;
+    background-color: var(--semantic-page-background);
+    border: 1px solid var(--semantic-field-border);
+    border-radius: 50%;
+    cursor: pointer;
+  }
+
+  .fs-radio:hover:not(:disabled) {
+    border-color: var(--semantic-field-border-hover);
+  }
+
+  .fs-radio:focus-visible {
+    outline: 2px solid var(--semantic-interactive-main);
+    outline-offset: 2px;
+  }
+
+  /* Prikken er en gradient og ikke et bilde, så den tar farge fra tokenet
+     direkte og trenger ingen egen variant for mørkt tema. */
+  .fs-radio:checked {
+    background-color: var(--semantic-interactive-main);
+    border-color: var(--semantic-interactive-main);
+    background-image: radial-gradient(
+      circle at center,
+      var(--semantic-interactive-contrast) 0 32%,
+      transparent 34%
+    );
+  }
+
+  .fs-radio:disabled {
+    background-color: var(--semantic-disabled-background);
+    border-color: var(--semantic-disabled-background);
+    cursor: not-allowed;
+  }
+
+  .fs-radio:disabled:checked {
+    background-color: var(--semantic-disabled-foreground);
+    border-color: var(--semantic-disabled-foreground);
+  }
+
+  .fs-radio[data-state="invalid"] {
+    border-color: var(--semantic-danger-foreground);
+  }
+
+  .fs-radio[data-state="invalid"]:focus-visible {
+    outline-color: var(--semantic-danger-foreground);
+  }
+
+  .fs-radio[data-state="success"] {
+    border-color: var(--semantic-success-foreground);
+  }
+
+  .fs-radio-row {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--size-2);
+    line-height: 1.5;
+  }
+
+  /* Høykontrast: prikken er en gradient, og gradienter fjernes i modusen.
+     Nettleserens egen radioknapp tegnes riktig i alle temaer. */
+  @media (forced-colors: active) {
+    .fs-radio,
+    .fs-radio:checked {
+      appearance: auto;
+      background-image: none;
+    }
+  }
+}

package/src/components/css/radio/radio.ts

@@ -0,0 +1,50 @@
+import {
+  attributes,
+  type FieldState,
+  fieldStates,
+  isFieldState,
+  type NonDefaultFieldState,
+} from "../shared.js"
+
+export const RADIO_CLASS = "fs-radio" as const
+/** Raden som holder knappen og teksten ved siden av hverandre. */
+export const RADIO_ROW_CLASS = "fs-radio-row" as const
+
+export type RadioOptions = {
+  /** Valideringstilstand. Standard: `default`. */
+  state?: FieldState
+}
+
+export type RadioAttributes = {
+  class: typeof RADIO_CLASS
+  type: "radio"
+  "data-state"?: NonDefaultFieldState
+  "aria-invalid"?: "true"
+}
+
+/**
+ * Attributtene for en radioknapp.
+ *
+ * Alle knappene i en gruppe må ha samme `name`. Det er den koblingen som gjør
+ * at bare én kan være valgt, og at piltastene flytter mellom dem. `name`
+ * setter du selv, siden bare du vet hva gruppen heter.
+ *
+ * ```ts
+ * <input {...radio()} name="leveringsmate" value="post" />
+ * ```
+ */
+export const radio = Object.assign(
+  ({ state = "default" }: RadioOptions = {}): RadioAttributes =>
+    attributes({
+      class: RADIO_CLASS,
+      type: "radio" as const,
+      "data-state": state === "default" ? undefined : state,
+      "aria-invalid": state === "invalid" ? ("true" as const) : undefined,
+    }),
+  {
+    /** Klassen på raden rundt knappen og teksten. */
+    row: RADIO_ROW_CLASS,
+    states: fieldStates,
+    isState: isFieldState,
+  },
+)

package/src/components/css/search/search.css

@@ -0,0 +1,49 @@
+@import "../input/input.css";
+
+@layer fristil {
+  /*
+   * Begge klassene i selektoren, ikke bare .fs-search.
+   *
+   * .fs-input setter padding med kortformen, og .fs-search bare
+   * padding-inline-start. Med lik spesifisitet avgjør rekkefølgen stilarkene
+   * lastes i, og importerer konsumenten input.css sist, forsvinner plassen
+   * til ikonet. Med begge klassene vinner regelen uansett rekkefølge.
+   */
+  .fs-input.fs-search {
+    padding-inline-start: var(--fs-search-icon-space, var(--size-10));
+    background-image: var(--semantic-icon-search);
+    background-repeat: no-repeat;
+    background-position: left var(--size-3) center;
+    background-size: var(--fs-search-icon-size, var(--size-5));
+  }
+
+  .fs-search:dir(rtl) {
+    background-position: right var(--size-3) center;
+  }
+
+  /* Nettleserens eget kryss i et type="search"-felt. Safari og Chrome tegner
+     det ulikt, og Firefox ikke i det hele tatt. */
+  .fs-search::-webkit-search-cancel-button {
+    cursor: pointer;
+  }
+
+  .fs-search-row {
+    display: flex;
+    align-items: stretch;
+    gap: var(--size-2);
+  }
+
+  .fs-search-row .fs-search {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+  }
+
+  /* Høykontrast: forstørrelsesglasset er malt inn i bildet med fast farge, og
+     kan bli usynlig. Da er det bedre å ta det bort og gi plassen tilbake. */
+  @media (forced-colors: active) {
+    .fs-input.fs-search {
+      background-image: none;
+      padding-inline-start: var(--size-3);
+    }
+  }
+}

package/src/components/css/search/search.ts

@@ -0,0 +1,52 @@
+import { INPUT_CLASS, input } from "../input/input.js"
+import {
+  attributes,
+  type FieldState,
+  fieldStates,
+  isFieldState,
+} from "../shared.js"
+
+export const SEARCH_CLASS = "fs-search" as const
+/** Raden med søkefeltet og knappen ved siden av. */
+export const SEARCH_ROW_CLASS = "fs-search-row" as const
+
+export type SearchOptions = {
+  /** Valideringstilstand. Standard: `default`. */
+  state?: FieldState
+}
+
+export type SearchAttributes = {
+  class: `${typeof INPUT_CLASS} ${typeof SEARCH_CLASS}`
+  type: "search"
+  "data-state"?: "invalid" | "success"
+  "aria-invalid"?: "true"
+}
+
+/**
+ * Attributtene for et søkefelt.
+ *
+ * Feltet er en `fs-input` med plass til forstørrelsesglasset, så begge
+ * klassene settes. `type="search"` gir nettleserens eget kryss for å tømme
+ * feltet, og på mobil et tastatur med «Søk» i stedet for «Enter».
+ *
+ * ```ts
+ * <input {...search()} name="q" />
+ * ```
+ */
+export const search = Object.assign(
+  ({ state = "default" }: SearchOptions = {}): SearchAttributes => {
+    const base = input({ type: "search", state })
+    return attributes({
+      ...base,
+      class: `${INPUT_CLASS} ${SEARCH_CLASS}` as const,
+      type: "search" as const,
+      "data-variant": undefined,
+    }) as SearchAttributes
+  },
+  {
+    /** Klassen på raden med feltet og knappen. */
+    row: SEARCH_ROW_CLASS,
+    states: fieldStates,
+    isState: isFieldState,
+  },
+)

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

@@ -0,0 +1,95 @@
+@layer fristil {
+  .fs-select {
+    /* Designsystemet kan ikke regne med at konsumenten har en CSS-reset.
+       Uten border-box legges padding og ramme utenpå width, og feltet
+       blir bredere enn boksen det ligger i. */
+    box-sizing: border-box;
+
+    display: block;
+    width: 100%;
+    padding: var(--size-2) calc(var(--size-4) + var(--size-2)) var(--size-2)
+      var(--size-3);
+    font-family: inherit;
+    font-size: var(--font-size-m);
+    line-height: 1.5;
+    color: var(--semantic-page-foreground);
+    background-color: var(--semantic-page-background);
+    border: 1px solid var(--semantic-field-border);
+    border-radius: var(--fs-select-radius, var(--size-1));
+    appearance: none;
+    background-image:
+      linear-gradient(
+        45deg,
+        transparent 50%,
+        var(--semantic-muted-foreground) 50%
+      ),
+      linear-gradient(
+        135deg,
+        var(--semantic-muted-foreground) 50%,
+        transparent 50%
+      );
+    background-position:
+      calc(100% - 1rem) calc(50% - 0.1rem),
+      calc(100% - 0.75rem) calc(50% - 0.1rem);
+    background-size:
+      0.35rem 0.35rem,
+      0.35rem 0.35rem;
+    background-repeat: no-repeat;
+  }
+
+  .fs-select:hover {
+    border-color: var(--semantic-field-border-hover);
+  }
+
+  .fs-select:focus-visible {
+    outline: 2px solid var(--semantic-interactive-main);
+    outline-offset: 2px;
+    border-color: var(--semantic-interactive-main);
+  }
+
+  .fs-select:disabled,
+  .fs-select[aria-disabled="true"] {
+    background-color: var(--semantic-disabled-background);
+    color: var(--semantic-disabled-foreground);
+    border-color: var(--semantic-disabled-background);
+    /* Ingen pointer-events: none her. Nettleseren blokkerer allerede et
+       deaktivert felt, og pointer-events ville bare hindret markøren i å
+       vises. Elementet blir da ikke truffet av musa i det hele tatt. */
+    cursor: not-allowed;
+  }
+
+  /* aria-disabled er bare en opplysning til skjermlesere; elementet virker
+     fortsatt. Her stopper pointer-events musa, på bekostning av markøren.
+     Skal feltet faktisk være av, bruk `disabled` eller `readonly`. */
+  .fs-select[aria-disabled="true"] {
+    pointer-events: none;
+  }
+
+  .fs-select[data-state="invalid"] {
+    border-color: var(--semantic-danger-foreground);
+    background-color: var(--semantic-danger-background);
+  }
+
+  .fs-select[data-state="invalid"]:focus-visible {
+    outline-color: var(--semantic-danger-foreground);
+  }
+
+  .fs-select[data-state="success"] {
+    border-color: var(--semantic-success-foreground);
+    background-color: var(--semantic-success-background);
+  }
+
+  .fs-select[data-state="success"]:focus-visible {
+    outline-color: var(--semantic-success-foreground);
+  }
+
+  /* Høykontrast: pilen er to gradienter, og de fjernes i modusen. Da er
+     nettleserens egen pil bedre enn ingen. */
+  @media (forced-colors: active) {
+    .fs-select {
+      appearance: auto;
+      background-image: none;
+      padding-inline-end: var(--size-3);
+    }
+  }
+}

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

@@ -0,0 +1,40 @@
+import {
+  attributes,
+  type FieldState,
+  fieldStates,
+  isFieldState,
+  type NonDefaultFieldState,
+} from "../shared.js"
+
+export const SELECT_CLASS = "fs-select" as const
+
+export type SelectOptions = {
+  /** Valideringstilstand. Standard: `default`. */
+  state?: FieldState
+}
+
+export type SelectAttributes = {
+  class: typeof SELECT_CLASS
+  "data-state"?: NonDefaultFieldState
+  "aria-invalid"?: "true"
+}
+
+/**
+ * Attributtene for en nedtrekksliste.
+ *
+ * ```ts
+ * <select {...select({ state: "invalid" })} />
+ * ```
+ */
+export const select = Object.assign(
+  ({ state = "default" }: SelectOptions = {}): SelectAttributes =>
+    attributes({
+      class: SELECT_CLASS,
+      "data-state": state === "default" ? undefined : state,
+      "aria-invalid": state === "invalid" ? ("true" as const) : undefined,
+    }),
+  {
+    states: fieldStates,
+    isState: isFieldState,
+  },
+)

package/src/components/css/shared.ts

@@ -0,0 +1,40 @@
+/**
+ * Felles byggeklosser for komponent-API-et.
+ *
+ * Hver komponent eksporterer én funksjon som tar et valgobjekt og returnerer
+ * attributtene du sprer inn i elementet. Formen er lik for alle, slik at du
+ * bare trenger å lære den én gang.
+ */
+
+/** Fjerner attributter uten verdi, så `{...spredning}` ikke setter tomme felt. */
+export function attributes<T extends Record<string, unknown>>(values: T): T {
+  const result = {} as T
+  for (const [name, value] of Object.entries(values)) {
+    if (value !== undefined) {
+      ;(result as Record<string, unknown>)[name] = value
+    }
+  }
+  return result
+}
+
+/** Lager en typevakt for en liste av lovlige strenger. */
+export function createGuard<T extends string>(allowed: readonly T[]) {
+  return (value: string): value is T =>
+    (allowed as readonly string[]).includes(value)
+}
+
+/**
+ * Valideringstilstand for skjemakontroller.
+ *
+ * Input, textarea og select hadde hver sin identiske type. Nå er det én, så
+ * en verdi kan sendes mellom dem uten konvertering.
+ */
+export const fieldStates = ["default", "invalid", "success"] as const
+export type FieldState = (typeof fieldStates)[number]
+export type NonDefaultFieldState = Exclude<FieldState, "default">
+export const isFieldState = createGuard(fieldStates)
+
+/** Hvordan et påkrevd felt markeres i ledeteksten. */
+export const requiredMarkers = ["symbol", "text"] as const
+export type RequiredMarker = (typeof requiredMarkers)[number]
+export const isRequiredMarker = createGuard(requiredMarkers)

package/src/components/css/skeleton/skeleton.css

@@ -0,0 +1,49 @@
+@layer fristil {
+  .fs-skeleton {
+    box-sizing: border-box;
+    display: block;
+    inline-size: 100%;
+    block-size: var(--fs-skeleton-height, var(--size-4));
+    border-radius: var(--fs-skeleton-radius, var(--size-1));
+    background: var(--semantic-neutral-background);
+    /* Skimmeret er en gradient som beveger seg over flaten, ikke en
+       gjennomsiktighet som pulserer. Da blir kontrasten mot sideflaten den
+       samme hele veien. */
+    background-image: linear-gradient(
+      90deg,
+      transparent 0%,
+      var(--semantic-page-background) 50%,
+      transparent 100%
+    );
+    background-size: 200% 100%;
+    background-repeat: no-repeat;
+    animation: fs-skeleton-shimmer 1600ms ease-in-out infinite;
+  }
+
+  .fs-skeleton[data-variant="text"] {
+    block-size: var(--font-size-m);
+    border-radius: var(--size-0-5);
+  }
+
+  .fs-skeleton[data-variant="circle"] {
+    inline-size: var(--fs-skeleton-height, var(--size-10));
+    block-size: var(--fs-skeleton-height, var(--size-10));
+    border-radius: 50%;
+  }
+
+  @keyframes fs-skeleton-shimmer {
+    from {
+      background-position: 150% 0;
+    }
+    to {
+      background-position: -50% 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .fs-skeleton {
+      animation: none;
+      background-image: none;
+    }
+  }
+}

package/src/components/css/skeleton/skeleton.ts

@@ -0,0 +1,43 @@
+import { attributes, createGuard } from "../shared.js"
+
+export const SKELETON_CLASS = "fs-skeleton" as const
+
+export const skeletonVariants = ["block", "text", "circle"] as const
+
+export type SkeletonVariant = (typeof skeletonVariants)[number]
+export type NonDefaultSkeletonVariant = Exclude<SkeletonVariant, "block">
+
+export type SkeletonOptions = {
+  /** Form. Standard: `block`. */
+  variant?: SkeletonVariant
+}
+
+export type SkeletonAttributes = {
+  class: typeof SKELETON_CLASS
+  "data-variant"?: NonDefaultSkeletonVariant
+  "aria-hidden": "true"
+}
+
+/**
+ * Attributtene for en plassholder mens innholdet lastes.
+ *
+ * Formene er alltid skjult for skjermlesere. De sier ingenting om hva som
+ * kommer, og en rekke tomme bokser som leses opp er verre enn stillhet. Si
+ * fra om ventingen ett sted i stedet, med `role="status"`.
+ *
+ * ```ts
+ * <div {...skeleton({ variant: "text" })} />
+ * ```
+ */
+export const skeleton = Object.assign(
+  ({ variant = "block" }: SkeletonOptions = {}): SkeletonAttributes =>
+    attributes({
+      class: SKELETON_CLASS,
+      "data-variant": variant === "block" ? undefined : variant,
+      "aria-hidden": "true" as const,
+    }),
+  {
+    variants: skeletonVariants,
+    isVariant: createGuard(skeletonVariants),
+  },
+)

package/src/components/css/skip-link/skip-link.css

@@ -0,0 +1,36 @@
+@layer fristil {
+  /* Lenken ligger utenfor skjermen til den får fokus. Den kan ikke skjules
+     med display eller visibility, for da kan tastaturet heller ikke nå den,
+     og hele poenget forsvinner. */
+  .fs-skip-link {
+    position: absolute;
+    inset-inline-start: var(--size-2);
+    inset-block-start: var(--size-2);
+    z-index: 100;
+    transform: translateY(calc(-100% - var(--size-4)));
+    display: inline-block;
+    padding: var(--fs-skip-link-padding, var(--size-2) var(--size-4));
+    font-family: inherit;
+    font-size: var(--font-size-m);
+    line-height: 1.5;
+    color: var(--semantic-interactive-contrast);
+    background: var(--semantic-interactive-main);
+    border-radius: var(--fs-skip-link-radius, var(--size-1));
+    text-decoration: underline;
+  }
+
+  /* `:focus` og ikke `:focus-visible`. Nettleseren regner ikke fokus satt
+     fra kode som «synlig fokus», og lenken ville da blitt stående skjult for
+     den som hopper dit fra et skript. */
+  .fs-skip-link:focus {
+    transform: translateY(0);
+    outline: 2px solid var(--semantic-page-foreground);
+    outline-offset: 2px;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .fs-skip-link {
+      transition: transform 120ms ease;
+    }
+  }
+}

package/src/components/css/skip-link/skip-link.ts

@@ -0,0 +1,22 @@
+import { attributes } from "../shared.js"
+
+export const SKIP_LINK_CLASS = "fs-skip-link" as const
+
+export type SkipLinkAttributes = {
+  class: typeof SKIP_LINK_CLASS
+}
+
+/**
+ * Attributtene for en hopp-til-innhold-lenke.
+ *
+ * Lenken skal være det første elementet i `<body>`, og peke på id-en til
+ * hovedinnholdet. Den ligger utenfor skjermen til den får fokus, og kan
+ * derfor ikke skjules med `display: none`: da kan tastaturet heller ikke nå
+ * den, og hele poenget forsvinner.
+ *
+ * ```ts
+ * <a {...skipLink()} href="#hovedinnhold">Hopp til hovedinnhold</a>
+ * ```
+ */
+export const skipLink = (): SkipLinkAttributes =>
+  attributes({ class: SKIP_LINK_CLASS })

package/src/components/css/spinner/spinner.css

@@ -0,0 +1,48 @@
+@layer fristil {
+  .fs-spinner {
+    box-sizing: border-box;
+    display: inline-block;
+    inline-size: var(--fs-spinner-size, var(--size-6));
+    block-size: var(--fs-spinner-size, var(--size-6));
+    border: var(--fs-spinner-thickness, 2px) solid
+      var(--semantic-neutral-background);
+    border-block-start-color: var(--semantic-interactive-main);
+    border-radius: 50%;
+    animation: fs-spinner-rotate 800ms linear infinite;
+  }
+
+  .fs-spinner[data-size="small"] {
+    inline-size: var(--size-4);
+    block-size: var(--size-4);
+  }
+
+  .fs-spinner[data-size="large"] {
+    inline-size: var(--size-10);
+    block-size: var(--size-10);
+    border-width: 3px;
+  }
+
+  @keyframes fs-spinner-rotate {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  /* Brukeren har bedt om mindre bevegelse. Da snurrer den saktere framfor å
+     stå stille: en indikator som ikke beveger seg sier ikke lenger at noe
+     pågår. */
+  @media (prefers-reduced-motion: reduce) {
+    .fs-spinner {
+      animation-duration: 2400ms;
+    }
+  }
+
+  /* Høykontrast: alle fire kantene tvinges til samme farge, og ringen blir en
+     jevn sirkel. Den snurrer fortsatt, men `Highlight` gir tilbake punktet
+     som viser at det skjer noe. */
+  @media (forced-colors: active) {
+    .fs-spinner {
+      border-block-start-color: Highlight;
+    }
+  }
+}