@fristil/designsystem 0.2.0

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

@@ -0,0 +1,48 @@
+import { attributes, createGuard } from "../shared.js"
+
+export const SPINNER_CLASS = "fs-spinner" as const
+
+export const spinnerSizes = ["small", "medium", "large"] as const
+
+export type SpinnerSize = (typeof spinnerSizes)[number]
+export type NonDefaultSpinnerSize = Exclude<SpinnerSize, "medium">
+
+export type SpinnerOptions = {
+  /** Størrelse. Standard: `medium`. */
+  size?: SpinnerSize
+  /** Hva som lastes. Blir `aria-label`, så ventingen kan leses opp. */
+  label?: string
+}
+
+export type SpinnerAttributes = {
+  class: typeof SPINNER_CLASS
+  "data-size"?: NonDefaultSpinnerSize
+  role?: "status"
+  "aria-label"?: string
+}
+
+/**
+ * Attributtene for en venteindikator.
+ *
+ * Uten `label` er ringen bare en form, og skjermlesere melder ingenting. Med
+ * `label` blir den en `role="status"` som sier hva som pågår. Har du allerede
+ * en synlig tekst ved siden av, la den bære beskjeden og dropp `label`, så
+ * det samme ikke leses opp to ganger.
+ *
+ * ```ts
+ * <span {...spinner({ label: "Laster søknader" })} />
+ * ```
+ */
+export const spinner = Object.assign(
+  ({ size = "medium", label }: SpinnerOptions = {}): SpinnerAttributes =>
+    attributes({
+      class: SPINNER_CLASS,
+      "data-size": size === "medium" ? undefined : size,
+      role: label ? ("status" as const) : undefined,
+      "aria-label": label,
+    }),
+  {
+    sizes: spinnerSizes,
+    isSize: createGuard(spinnerSizes),
+  },
+)

package/src/components/css/sr-only/sr-only.css

@@ -0,0 +1,16 @@
+@layer fristil {
+  /* Tekst som bare skjermlesere skal få. `display: none` og
+     `visibility: hidden` fjerner elementet også for dem, så innholdet må bli
+     stående i dokumentet og krympes bort visuelt i stedet. */
+  .fs-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+  }
+}

package/src/components/css/sr-only/sr-only.ts

@@ -0,0 +1,18 @@
+export const SR_ONLY_CLASS = "fs-sr-only" as const
+
+export type SrOnlyAttributes = {
+  class: typeof SR_ONLY_CLASS
+}
+
+/**
+ * Attributtene for tekst som bare skjermlesere skal få.
+ *
+ * ```ts
+ * <span {...srOnly()}>Åpner i ny fane</span>
+ * ```
+ *
+ * Bruk den når en ledetekst eller forklaring trengs for den som hører siden,
+ * men ville vært støy for den som ser den. Skal innholdet bort for alle, hører
+ * `hidden` hjemme i stedet.
+ */
+export const srOnly = (): SrOnlyAttributes => ({ class: SR_ONLY_CLASS })

package/src/components/css/switch/switch.css

@@ -0,0 +1,101 @@
+@layer fristil {
+  .fs-switch {
+    box-sizing: border-box;
+    appearance: none;
+    flex: none;
+    display: inline-block;
+    inline-size: var(--fs-switch-width, var(--size-10));
+    block-size: var(--fs-switch-height, var(--size-6));
+    margin: 0;
+    border: 1px solid var(--semantic-field-border);
+    border-radius: var(--size-4);
+    background-color: var(--semantic-neutral-background);
+    /* Knappen er en gradient, ikke et pseudoelement: Firefox rendrer ikke
+       ::before og ::after på et <input>. */
+    background-image: radial-gradient(
+      circle at center,
+      var(--semantic-page-foreground) 0 34%,
+      transparent 36%
+    );
+    background-repeat: no-repeat;
+    background-size: var(--fs-switch-height, var(--size-6)) 100%;
+    /* background-position har ingen logisk variant, så begge retningene
+       skrives for hånd. Av er på starten, på er på slutten. */
+    background-position: left center;
+    cursor: pointer;
+    transition:
+      background-color 120ms ease,
+      background-position 120ms ease;
+  }
+
+  .fs-switch:hover:not(:disabled) {
+    border-color: var(--semantic-field-border-hover);
+  }
+
+  .fs-switch:focus-visible {
+    outline: 2px solid var(--semantic-interactive-main);
+    outline-offset: 2px;
+  }
+
+  .fs-switch:dir(rtl) {
+    background-position: right center;
+  }
+
+  .fs-switch:checked {
+    background-color: var(--semantic-interactive-main);
+    border-color: var(--semantic-interactive-main);
+    background-position: right center;
+    background-image: radial-gradient(
+      circle at center,
+      var(--semantic-interactive-contrast) 0 34%,
+      transparent 36%
+    );
+  }
+
+  .fs-switch:checked:dir(rtl) {
+    background-position: left center;
+  }
+
+  .fs-switch:disabled {
+    background-color: var(--semantic-disabled-background);
+    border-color: var(--semantic-disabled-background);
+    background-image: radial-gradient(
+      circle at center,
+      var(--semantic-disabled-foreground) 0 34%,
+      transparent 36%
+    );
+    cursor: not-allowed;
+  }
+
+  /* Brukeren har bedt om mindre bevegelse. Bryteren skal fortsatt bytte
+     tilstand, den skal bare ikke gli. */
+  @media (prefers-reduced-motion: reduce) {
+    .fs-switch {
+      transition: none;
+    }
+  }
+
+  .fs-switch-row {
+    display: flex;
+    align-items: center;
+    gap: var(--size-2);
+    line-height: 1.5;
+  }
+
+  /*
+   * Høykontrast: knappen er en gradient, og forsvinner i modusen. Uten den er
+   * av og på helt like. Her faller vi tilbake til en vanlig avkryssingsboks.
+   * Bryteren mister formen sin, men `role="switch"` står fortsatt, så den
+   * leses opp som på og av, og tilstanden er synlig igjen.
+   */
+  @media (forced-colors: active) {
+    .fs-switch,
+    .fs-switch:checked {
+      appearance: auto;
+      inline-size: auto;
+      block-size: auto;
+      background-image: none;
+      border: 0;
+    }
+  }
+}

package/src/components/css/switch/switch.ts

@@ -0,0 +1,46 @@
+import { attributes } from "../shared.js"
+
+export const SWITCH_CLASS = "fs-switch" as const
+/** Raden som holder bryteren og teksten ved siden av hverandre. */
+export const SWITCH_ROW_CLASS = "fs-switch-row" as const
+
+export type SwitchOptions = {
+  /** Kontrollen er slått av. */
+  disabled?: boolean
+}
+
+export type SwitchAttributes = {
+  class: typeof SWITCH_CLASS
+  type: "checkbox"
+  role: "switch"
+  disabled?: true
+}
+
+/**
+ * Attributtene for en av- og på-bryter.
+ *
+ * Bryteren er en avkryssingsboks med `role="switch"`. Da leser skjermlesere
+ * den opp som «på» og «av» framfor «avkrysset», mens tastaturet og
+ * `FormData` virker som for en vanlig boks.
+ *
+ * Bryteren har ingen valideringstilstand. Et valg som er på eller av kan ikke
+ * være ugyldig i seg selv; er det påkrevd å slå den på, hører kravet hjemme i
+ * en avkryssingsboks med `required`.
+ *
+ * ```ts
+ * <input {...switchControl()} />
+ * ```
+ */
+export const switchControl = Object.assign(
+  ({ disabled }: SwitchOptions = {}): SwitchAttributes =>
+    attributes({
+      class: SWITCH_CLASS,
+      type: "checkbox" as const,
+      role: "switch" as const,
+      disabled: disabled ? (true as const) : undefined,
+    }),
+  {
+    /** Klassen på raden rundt bryteren og teksten. */
+    row: SWITCH_ROW_CLASS,
+  },
+)

package/src/components/css/table/table.css

@@ -0,0 +1,63 @@
+@layer fristil {
+  .fs-table {
+    box-sizing: border-box;
+    inline-size: 100%;
+    border-collapse: collapse;
+    font-family: inherit;
+    font-size: var(--font-size-m);
+    line-height: 1.5;
+    color: var(--semantic-page-foreground);
+    /* Tall som står under hverandre skal ha samme bredde per siffer, ellers
+       kan ikke kolonnen leses nedover. */
+    font-variant-numeric: tabular-nums;
+  }
+
+  .fs-table caption {
+    text-align: start;
+    font-weight: 600;
+    padding-block-end: var(--size-2);
+  }
+
+  .fs-table th,
+  .fs-table td {
+    padding: var(--fs-table-cell-padding, var(--size-2) var(--size-3));
+    text-align: start;
+    vertical-align: top;
+    border-block-end: 1px solid var(--semantic-divider-30);
+  }
+
+  .fs-table thead th {
+    font-weight: 600;
+    border-block-end: 2px solid var(--semantic-divider-100);
+  }
+
+  .fs-table tbody tr:last-child th,
+  .fs-table tbody tr:last-child td {
+    border-block-end: 0;
+  }
+
+  .fs-table[data-variant="striped"] tbody tr:nth-child(even) {
+    background: var(--semantic-neutral-background);
+  }
+
+  .fs-table[data-hoverable] tbody tr:hover {
+    background: var(--semantic-interactive-background);
+  }
+
+  .fs-table td[data-align="end"],
+  .fs-table th[data-align="end"] {
+    text-align: end;
+  }
+
+  /* En tabell som er bredere enn skjermen må kunne rulles, og det området må
+     kunne nås med tastatur. Derfor tabindex="0" på beholderen. */
+  .fs-table-scroll {
+    overflow-x: auto;
+    max-inline-size: 100%;
+  }
+
+  .fs-table-scroll:focus-visible {
+    outline: 2px solid var(--semantic-interactive-main);
+    outline-offset: 2px;
+  }
+}

package/src/components/css/table/table.ts

@@ -0,0 +1,50 @@
+import { attributes, createGuard } from "../shared.js"
+
+export const TABLE_CLASS = "fs-table" as const
+/** Beholderen som lar en bred tabell rulles sidelengs. */
+export const TABLE_SCROLL_CLASS = "fs-table-scroll" as const
+
+export const tableVariants = ["default", "striped"] as const
+
+export type TableVariant = (typeof tableVariants)[number]
+export type NonDefaultTableVariant = Exclude<TableVariant, "default">
+
+export type TableOptions = {
+  /** Annenhver rad i dempet flate. Standard: `default`. */
+  variant?: TableVariant
+  /** Marker raden under musa. Bruk bare når rader kan trykkes på. */
+  hoverable?: boolean
+}
+
+export type TableAttributes = {
+  class: typeof TABLE_CLASS
+  "data-variant"?: NonDefaultTableVariant
+  "data-hoverable"?: ""
+}
+
+/**
+ * Attributtene for en tabell.
+ *
+ * Klassen hører på et ekte `<table>` med `<thead>` og `<th>`. Det er
+ * overskriftscellene som gjør at skjermlesere kan si «Beløp, 1 240 kroner»
+ * når brukeren står i en celle. Bygger du tabellen av `<div>`-er, finnes ikke
+ * den koblingen.
+ *
+ * ```ts
+ * <table {...table({ variant: "striped" })}>…</table>
+ * ```
+ */
+export const table = Object.assign(
+  ({ variant = "default", hoverable }: TableOptions = {}): TableAttributes =>
+    attributes({
+      class: TABLE_CLASS,
+      "data-variant": variant === "default" ? undefined : variant,
+      "data-hoverable": hoverable ? ("" as const) : undefined,
+    }),
+  {
+    /** Klassen på beholderen rundt en bred tabell. */
+    scroll: TABLE_SCROLL_CLASS,
+    variants: tableVariants,
+    isVariant: createGuard(tableVariants),
+  },
+)

package/src/components/css/tag/tag.css

@@ -0,0 +1,58 @@
+@layer fristil {
+  .fs-tag {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--size-1);
+    padding: var(--fs-tag-padding, var(--size-0-5) var(--size-2));
+    font-family: inherit;
+    font-size: var(--font-size-s);
+    line-height: 1.4;
+    color: var(--semantic-page-foreground);
+    background: transparent;
+    border: 1px solid var(--semantic-divider-30);
+    border-radius: var(--fs-tag-radius, var(--size-1));
+  }
+
+  .fs-tag[data-variant="filled"] {
+    background: var(--semantic-neutral-background);
+    border-color: transparent;
+  }
+
+  /* Merkelappen kan velges av og på, og er da en ekte knapp. */
+  .fs-tag[data-selectable] {
+    cursor: pointer;
+  }
+
+  .fs-tag[data-selectable]:hover {
+    border-color: var(--semantic-interactive-main);
+  }
+
+  .fs-tag[data-selectable]:focus-visible {
+    outline: 2px solid var(--semantic-interactive-main);
+    outline-offset: 2px;
+  }
+
+  .fs-tag[aria-pressed="true"] {
+    background: var(--semantic-interactive-main);
+    border-color: var(--semantic-interactive-main);
+    color: var(--semantic-interactive-contrast);
+  }
+
+  .fs-tag:disabled,
+  .fs-tag[aria-disabled="true"] {
+    background: var(--semantic-disabled-background);
+    border-color: var(--semantic-disabled-background);
+    color: var(--semantic-disabled-foreground);
+    cursor: not-allowed;
+  }
+
+  /* Høykontrast: den valgte lappen skilles bare med farge. Systemfargene
+     slipper gjennom der våre egne ikke gjør det. */
+  @media (forced-colors: active) {
+    .fs-tag[aria-pressed="true"] {
+      background-color: Highlight;
+      color: HighlightText;
+    }
+  }
+}

package/src/components/css/tag/tag.ts

@@ -0,0 +1,49 @@
+import { attributes, createGuard } from "../shared.js"
+
+export const TAG_CLASS = "fs-tag" as const
+
+export const tagVariants = ["outline", "filled"] as const
+
+export type TagVariant = (typeof tagVariants)[number]
+export type NonDefaultTagVariant = Exclude<TagVariant, "outline">
+
+export type TagOptions = {
+  /** Omriss eller dempet flate. Standard: `outline`. */
+  variant?: TagVariant
+  /** Merkelappen kan slås av og på. Bruk bare på en `<button>`. */
+  selectable?: boolean
+}
+
+export type TagAttributes = {
+  class: typeof TAG_CLASS
+  "data-variant"?: NonDefaultTagVariant
+  "data-selectable"?: ""
+}
+
+/**
+ * Attributtene for en merkelapp.
+ *
+ * En merkelapp merker innhold: emneord på en artikkel, valgte filtre over en
+ * liste. Sier den hvilken tilstand noe er i, er [Badge](../badge/badge.js)
+ * riktig i stedet.
+ *
+ * `selectable` gir hover og fokusmarkering, men gjør ingenting trykkbart.
+ * Elementet må være en `<button>`, og du setter `aria-pressed` selv, siden
+ * bare du vet om lappen er valgt.
+ *
+ * ```ts
+ * <button {...tag({ selectable: true })} aria-pressed="true">Bostøtte</button>
+ * ```
+ */
+export const tag = Object.assign(
+  ({ variant = "outline", selectable }: TagOptions = {}): TagAttributes =>
+    attributes({
+      class: TAG_CLASS,
+      "data-variant": variant === "outline" ? undefined : variant,
+      "data-selectable": selectable ? ("" as const) : undefined,
+    }),
+  {
+    variants: tagVariants,
+    isVariant: createGuard(tagVariants),
+  },
+)

package/src/components/css/textarea/textarea.css

@@ -0,0 +1,71 @@
+@layer fristil {
+  .fs-textarea {
+    /* 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%;
+    min-height: var(--fs-textarea-min-height, calc(var(--size-4) * 5));
+    padding: var(--fs-textarea-padding, 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: var(--semantic-page-background);
+    border: 1px solid var(--semantic-field-border);
+    border-radius: var(--fs-textarea-radius, var(--size-1));
+    resize: vertical;
+  }
+
+  .fs-textarea::placeholder {
+    color: var(--semantic-muted-foreground);
+  }
+
+  .fs-textarea:hover {
+    border-color: var(--semantic-field-border-hover);
+  }
+
+  .fs-textarea:focus-visible {
+    outline: 2px solid var(--semantic-interactive-main);
+    outline-offset: 2px;
+    border-color: var(--semantic-interactive-main);
+  }
+
+  .fs-textarea:disabled,
+  .fs-textarea[aria-disabled="true"] {
+    background: 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-textarea[aria-disabled="true"] {
+    pointer-events: none;
+  }
+
+  .fs-textarea[data-state="invalid"] {
+    border-color: var(--semantic-danger-foreground);
+    background: var(--semantic-danger-background);
+  }
+
+  .fs-textarea[data-state="invalid"]:focus-visible {
+    outline-color: var(--semantic-danger-foreground);
+  }
+
+  .fs-textarea[data-state="success"] {
+    border-color: var(--semantic-success-foreground);
+    background: var(--semantic-success-background);
+  }
+
+  .fs-textarea[data-state="success"]:focus-visible {
+    outline-color: var(--semantic-success-foreground);
+  }
+}

package/src/components/css/textarea/textarea.ts

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

package/src/components/css/toggle-group/toggle-group.css

@@ -0,0 +1,82 @@
+@layer fristil {
+  .fs-toggle-group {
+    box-sizing: border-box;
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 0;
+    margin: 0;
+    padding: 0;
+    border: 1px solid var(--semantic-field-border);
+    border-radius: var(--fs-toggle-group-radius, var(--size-1));
+    overflow: hidden;
+    min-inline-size: 0;
+  }
+
+  .fs-toggle-group__option {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    /* 40 piksler høy, som knappene, så en rad av dem står i linje. */
+    min-block-size: var(--fs-toggle-group-height, var(--size-10));
+    padding: var(--fs-toggle-group-padding, 0 var(--size-4));
+    font-family: inherit;
+    font-size: var(--font-size-m);
+    line-height: 1.5;
+    color: var(--semantic-interactive-main);
+    background: var(--semantic-page-background);
+    cursor: pointer;
+  }
+
+  .fs-toggle-group__option + .fs-toggle-group__option {
+    border-inline-start: 1px solid var(--semantic-field-border);
+  }
+
+  /* Radioknappen ligger inni ledeteksten og er krympet bort visuelt. Den blir
+     stående i tastaturrekkefølgen, så piltastene og skjermleseren virker som
+     i en vanlig radiogruppe. */
+  .fs-toggle-group__option input {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  .fs-toggle-group__option:hover {
+    background: var(--semantic-interactive-background);
+  }
+
+  .fs-toggle-group__option:has(input:focus-visible) {
+    outline: 2px solid var(--semantic-interactive-main);
+    outline-offset: -2px;
+  }
+
+  .fs-toggle-group__option:has(input:checked) {
+    color: var(--semantic-interactive-contrast);
+    background: var(--semantic-interactive-main);
+    font-weight: 600;
+  }
+
+  .fs-toggle-group__option:has(input:disabled) {
+    color: var(--semantic-disabled-foreground);
+    background: var(--semantic-disabled-background);
+    cursor: not-allowed;
+  }
+
+  /*
+   * Høykontrast: det valgte alternativet skilles bare med bakgrunnsfarge, og
+   * egne farger overstyres i modusen. Systemfargene slipper gjennom, og
+   * `Highlight` med `HighlightText` er nettopp paret operativsystemet bruker
+   * til å vise noe som er valgt.
+   */
+  @media (forced-colors: active) {
+    .fs-toggle-group__option:has(input:checked) {
+      background-color: Highlight;
+      color: HighlightText;
+    }
+  }
+}

package/src/components/css/toggle-group/toggle-group.ts

@@ -0,0 +1,37 @@
+import { attributes } from "../shared.js"
+
+export const TOGGLE_GROUP_CLASS = "fs-toggle-group" as const
+/** Ledeteksten rundt hvert alternativ. */
+export const TOGGLE_GROUP_OPTION_CLASS = "fs-toggle-group__option" as const
+
+export type ToggleGroupAttributes = {
+  class: typeof TOGGLE_GROUP_CLASS
+}
+
+/**
+ * Attributtene for en gruppe der ett alternativ er valgt om gangen.
+ *
+ * Gruppen er radioknapper i forkledning. Hvert alternativ er en `<label>` med
+ * en `<input type="radio">` inni, krympet bort visuelt. Da beholder du
+ * piltastene, `FormData` og at skjermleseren sier «2 av 3» uten at noe av det
+ * må skrives på nytt.
+ *
+ * Er valgene handlinger framfor en innstilling, som «fet, kursiv,
+ * understreket», hører knapper med `aria-pressed` hjemme i stedet.
+ *
+ * ```ts
+ * <fieldset {...toggleGroup()}>
+ *   <legend class="fs-sr-only">Visning</legend>
+ *   <label class={toggleGroup.option}>
+ *     <input type="radio" name="visning" value="liste" checked /> Liste
+ *   </label>
+ * </fieldset>
+ * ```
+ */
+export const toggleGroup = Object.assign(
+  (): ToggleGroupAttributes => attributes({ class: TOGGLE_GROUP_CLASS }),
+  {
+    /** Klassen på ledeteksten rundt hvert alternativ. */
+    option: TOGGLE_GROUP_OPTION_CLASS,
+  },
+)