@fristil/designsystem 0.2.0

package/src/components/css/checkbox/checkbox.css

@@ -0,0 +1,96 @@
+@layer fristil {
+  .fs-checkbox {
+    /* Designsystemet kan ikke regne med at konsumenten har en CSS-reset. */
+    box-sizing: border-box;
+
+    appearance: none;
+    flex: none;
+    display: inline-block;
+    inline-size: var(--fs-checkbox-size, var(--size-5));
+    block-size: var(--fs-checkbox-size, var(--size-5));
+    margin: 0;
+    background-color: var(--semantic-page-background);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 80%;
+    border: 1px solid var(--semantic-field-border);
+    border-radius: var(--fs-checkbox-radius, var(--size-1));
+    cursor: pointer;
+  }
+
+  .fs-checkbox:hover:not(:disabled) {
+    border-color: var(--semantic-field-border-hover);
+  }
+
+  .fs-checkbox:focus-visible {
+    outline: 2px solid var(--semantic-interactive-main);
+    outline-offset: 2px;
+  }
+
+  .fs-checkbox:checked,
+  .fs-checkbox:indeterminate {
+    background-color: var(--semantic-interactive-main);
+    border-color: var(--semantic-interactive-main);
+  }
+
+  /* Haken er et token og ikke et bilde i denne fila, fordi en data-URL ikke
+     kan lese en CSS-variabel. Streken er malt inn i bildet, og må derfor snu
+     med temaet der de andre fargene snur. */
+  .fs-checkbox:checked {
+    background-image: var(--semantic-icon-check);
+  }
+
+  .fs-checkbox:indeterminate {
+    background-image: var(--semantic-icon-dash);
+  }
+
+  .fs-checkbox:disabled {
+    background-color: var(--semantic-disabled-background);
+    border-color: var(--semantic-disabled-background);
+    cursor: not-allowed;
+  }
+
+  .fs-checkbox:disabled:checked,
+  .fs-checkbox:disabled:indeterminate {
+    background-color: var(--semantic-disabled-foreground);
+    border-color: var(--semantic-disabled-foreground);
+  }
+
+  .fs-checkbox[data-state="invalid"] {
+    border-color: var(--semantic-danger-foreground);
+  }
+
+  .fs-checkbox[data-state="invalid"]:focus-visible {
+    outline-color: var(--semantic-danger-foreground);
+  }
+
+  .fs-checkbox[data-state="success"] {
+    border-color: var(--semantic-success-foreground);
+  }
+
+  /* Boksen og teksten på én linje, med teksten på plass ved flere linjer. */
+  .fs-checkbox-row {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--size-2);
+    line-height: 1.5;
+  }
+
+  /*
+   * Høykontrast: la nettleseren tegne boksen selv.
+   *
+   * Målt i modusen: gradienter og box-shadow fjernes, egne farger overstyres,
+   * og bare systemfarger, rammer, masker og data-URL-bilder overlever. Haken
+   * vår er hvit og malt inn i bildet, så den ville blitt usynlig mot den
+   * påtvungne flaten. Nettleserens egen avkryssingsboks er riktig i alle
+   * temaer brukeren kan velge, og koster oss ingenting å falle tilbake på.
+   */
+  @media (forced-colors: active) {
+    .fs-checkbox,
+    .fs-checkbox:checked,
+    .fs-checkbox:indeterminate {
+      appearance: auto;
+      background-image: none;
+    }
+  }
+}

package/src/components/css/checkbox/checkbox.ts

@@ -0,0 +1,50 @@
+import {
+  attributes,
+  type FieldState,
+  fieldStates,
+  isFieldState,
+  type NonDefaultFieldState,
+} from "../shared.js"
+
+export const CHECKBOX_CLASS = "fs-checkbox" as const
+/** Raden som holder boksen og teksten ved siden av hverandre. */
+export const CHECKBOX_ROW_CLASS = "fs-checkbox-row" as const
+
+export type CheckboxOptions = {
+  /** Valideringstilstand. Standard: `default`. */
+  state?: FieldState
+}
+
+export type CheckboxAttributes = {
+  class: typeof CHECKBOX_CLASS
+  type: "checkbox"
+  "data-state"?: NonDefaultFieldState
+  "aria-invalid"?: "true"
+}
+
+/**
+ * Attributtene for en avkryssingsboks.
+ *
+ * `type` settes her, slik at boksen ikke kan bli et tekstfelt med en boks sin
+ * stil. Delvis avkrysset settes med `element.indeterminate = true` i
+ * JavaScript, ikke som et attributt, fordi HTML ikke har noe slikt attributt.
+ *
+ * ```ts
+ * <input {...checkbox({ state: "invalid" })} />
+ * ```
+ */
+export const checkbox = Object.assign(
+  ({ state = "default" }: CheckboxOptions = {}): CheckboxAttributes =>
+    attributes({
+      class: CHECKBOX_CLASS,
+      type: "checkbox" as const,
+      "data-state": state === "default" ? undefined : state,
+      "aria-invalid": state === "invalid" ? ("true" as const) : undefined,
+    }),
+  {
+    /** Klassen på raden rundt boksen og teksten. */
+    row: CHECKBOX_ROW_CLASS,
+    states: fieldStates,
+    isState: isFieldState,
+  },
+)

package/src/components/css/dialog/dialog.css

@@ -0,0 +1,50 @@
+@layer fristil {
+  .fs-dialog {
+    box-sizing: border-box;
+    /*
+     * `100%` og ikke bare `100vw`: en ekte dialog i topplaget måler seg mot
+     * vindusruten, men står den i en smalere boks, som i dokumentasjonen,
+     * stakk den utenfor. `min()` tar den minste av de tre.
+     */
+    inline-size: var(
+      --fs-dialog-width,
+      min(32rem, 100%, calc(100vw - var(--size-8)))
+    );
+    max-block-size: calc(100vh - var(--size-16));
+    padding: var(--fs-dialog-padding, var(--size-5));
+    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-radius: var(--fs-dialog-radius, var(--size-2));
+    box-shadow: var(--semantic-shadow-overlay);
+  }
+
+  /* Flaten bak dialogen. Den finnes bare når dialogen er åpnet med
+     showModal(); et vanlig show() gir ingen ::backdrop. */
+  .fs-dialog::backdrop {
+    background: var(--semantic-overlay-backdrop);
+  }
+
+  .fs-dialog__title {
+    margin: 0 0 var(--size-2);
+    font-size: var(--font-size-l);
+    font-weight: 600;
+    line-height: 1.4;
+  }
+
+  .fs-dialog__body {
+    margin: 0;
+    overflow-y: auto;
+  }
+
+  .fs-dialog__footer {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: var(--size-2);
+    margin-block-start: var(--size-5);
+  }
+}

package/src/components/css/dialog/dialog.ts

@@ -0,0 +1,36 @@
+import { attributes } from "../shared.js"
+
+export const DIALOG_CLASS = "fs-dialog" as const
+export const DIALOG_TITLE_CLASS = "fs-dialog__title" as const
+export const DIALOG_BODY_CLASS = "fs-dialog__body" as const
+export const DIALOG_FOOTER_CLASS = "fs-dialog__footer" as const
+
+export type DialogAttributes = {
+  class: typeof DIALOG_CLASS
+}
+
+/**
+ * Attributtene for en dialog.
+ *
+ * Klassen hører på et `<dialog>`. Åpne den med `showModal()`, ikke ved å
+ * sette `open`: bare den første flytter fokus inn, holder fokus inne i
+ * dialogen, lukker på Escape og gjør resten av siden utilgjengelig. Et
+ * `<dialog open>` i markupen er en boks på siden, ikke en dialog.
+ *
+ * ```ts
+ * <dialog {...dialog()} aria-labelledby="tittel">
+ *   <h2 {...{ class: dialog.title }} id="tittel">Slette søknaden?</h2>
+ * </dialog>
+ * ```
+ */
+export const dialog = Object.assign(
+  (): DialogAttributes => attributes({ class: DIALOG_CLASS }),
+  {
+    /** Klassen på overskriften i dialogen. */
+    title: DIALOG_TITLE_CLASS,
+    /** Klassen på innholdet, som ruller når dialogen blir for høy. */
+    body: DIALOG_BODY_CLASS,
+    /** Klassen på raden med knapper nederst. */
+    footer: DIALOG_FOOTER_CLASS,
+  },
+)

package/src/components/css/divider/divider.css

@@ -0,0 +1,18 @@
+@layer fristil {
+  .fs-divider {
+    /* <hr> har både ramme og høyde fra nettleseren. Begge må bort før
+       fargen under er den eneste som vises. */
+    border: 0;
+    block-size: 1px;
+    margin-block: var(--fs-divider-space, var(--size-4));
+    background: var(--semantic-divider-30);
+  }
+
+  .fs-divider[data-variant="strong"] {
+    background: var(--semantic-divider-100);
+  }
+
+  .fs-divider[data-variant="subtle"] {
+    background: var(--semantic-neutral-background);
+  }
+}

package/src/components/css/divider/divider.ts

@@ -0,0 +1,41 @@
+import { attributes, createGuard } from "../shared.js"
+
+export const DIVIDER_CLASS = "fs-divider" as const
+
+export const dividerVariants = ["default", "subtle", "strong"] as const
+
+export type DividerVariant = (typeof dividerVariants)[number]
+export type NonDefaultDividerVariant = Exclude<DividerVariant, "default">
+
+export type DividerOptions = {
+  /** Hvor tydelig streken er. Standard: `default`. */
+  variant?: DividerVariant
+}
+
+export type DividerAttributes = {
+  class: typeof DIVIDER_CLASS
+  "data-variant"?: NonDefaultDividerVariant
+}
+
+/**
+ * Attributtene for en skillelinje.
+ *
+ * Klassen hører på et `<hr>`. Skiller streken to deler av innholdet, er den
+ * en opplysning skjermlesere skal få. Er den bare pynt mellom to bokser som
+ * allerede er atskilt, sett `aria-hidden="true"` på den.
+ *
+ * ```ts
+ * <hr {...divider({ variant: "subtle" })} />
+ * ```
+ */
+export const divider = Object.assign(
+  ({ variant = "default" }: DividerOptions = {}): DividerAttributes =>
+    attributes({
+      class: DIVIDER_CLASS,
+      "data-variant": variant === "default" ? undefined : variant,
+    }),
+  {
+    variants: dividerVariants,
+    isVariant: createGuard(dividerVariants),
+  },
+)

package/src/components/css/error-text/error-text.css

@@ -0,0 +1,21 @@
+@layer fristil {
+  .fs-error-text {
+    display: block;
+    /* Hele margin settes, ikke bare toppen: uten dette arver <p>
+       nettleserens 1em i bunn hos konsumenter uten reset. */
+    margin: var(--size-1) 0 0;
+    font-family: inherit;
+    font-size: var(--font-size-xs);
+    font-weight: 500;
+    line-height: 1.4;
+    color: var(--semantic-danger-foreground);
+  }
+
+  .fs-error-text[hidden] {
+    display: none;
+  }
+
+  .fs-error-text[data-variant="warning"] {
+    color: var(--semantic-warning-foreground);
+  }
+}

package/src/components/css/error-text/error-text.ts

@@ -0,0 +1,37 @@
+import { attributes, createGuard } from "../shared.js"
+
+export const ERROR_TEXT_CLASS = "fs-error-text" as const
+
+export const errorTextVariants = ["error", "warning"] as const
+
+export type ErrorTextVariant = (typeof errorTextVariants)[number]
+export type NonDefaultErrorTextVariant = Exclude<ErrorTextVariant, "error">
+
+export type ErrorTextOptions = {
+  /** Om feilen stopper innsending eller bare advarer. Standard: `error`. */
+  variant?: ErrorTextVariant
+}
+
+export type ErrorTextAttributes = {
+  class: typeof ERROR_TEXT_CLASS
+  "data-variant"?: NonDefaultErrorTextVariant
+}
+
+/**
+ * Attributtene for en feilmelding under et felt.
+ *
+ * ```ts
+ * <p {...errorText({ variant: "warning" })}>…</p>
+ * ```
+ */
+export const errorText = Object.assign(
+  ({ variant = "error" }: ErrorTextOptions = {}): ErrorTextAttributes =>
+    attributes({
+      class: ERROR_TEXT_CLASS,
+      "data-variant": variant === "error" ? undefined : variant,
+    }),
+  {
+    variants: errorTextVariants,
+    isVariant: createGuard(errorTextVariants),
+  },
+)

package/src/components/css/fieldset/fieldset.css

@@ -0,0 +1,57 @@
+@import "../label/label.css";
+
+@layer fristil {
+  .fs-fieldset {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--fs-fieldset-gap, var(--size-2));
+    margin: 0;
+    padding: 0;
+    /* Nettleserens egen ramme og innrykk på <fieldset> hører til et utseende
+       fra 1996, og kan ikke slås av med mindre begge nullstilles her. */
+    border: 0;
+    min-inline-size: 0;
+  }
+
+  .fs-legend {
+    padding: 0;
+    margin-block-end: var(--size-1);
+    font-family: inherit;
+    font-size: var(--font-size-m);
+    font-weight: 600;
+    line-height: 1.5;
+    color: var(--semantic-page-foreground);
+  }
+
+  /* Samme markering som på en ledetekst. Reglene står her og ikke i
+     label.css, fordi <legend> er et annet element med egne standardverdier. */
+  .fs-legend[data-required]::after {
+    content: " *";
+    color: var(--semantic-danger-foreground);
+    font-weight: 700;
+  }
+
+  .fs-legend[data-required="text"]::after {
+    content: " (påkrevd)";
+    color: var(--semantic-danger-foreground);
+    font-weight: 400;
+    font-size: var(--font-size-xs);
+  }
+
+  .fs-legend[data-optional]::after {
+    content: " (valgfri)";
+    color: var(--semantic-disabled-foreground);
+    font-weight: 400;
+    font-size: var(--font-size-xs);
+  }
+
+  .fs-fieldset[data-state="invalid"] .fs-legend {
+    color: var(--semantic-danger-foreground);
+  }
+
+  .fs-fieldset:disabled .fs-legend,
+  .fs-legend[aria-disabled="true"] {
+    color: var(--semantic-muted-foreground);
+  }
+}

package/src/components/css/fieldset/fieldset.ts

@@ -0,0 +1,87 @@
+import {
+  attributes,
+  createGuard,
+  type FieldState,
+  fieldStates,
+  isFieldState,
+  type NonDefaultFieldState,
+  type RequiredMarker,
+  requiredMarkers,
+} from "../shared.js"
+
+export const FIELDSET_CLASS = "fs-fieldset" as const
+export const LEGEND_CLASS = "fs-legend" as const
+
+export type FieldsetOptions = {
+  /** Valideringstilstand for hele gruppen. Standard: `default`. */
+  state?: FieldState
+  /** Slår av alle kontrollene i gruppen. */
+  disabled?: boolean
+}
+
+export type FieldsetAttributes = {
+  class: typeof FIELDSET_CLASS
+  "data-state"?: NonDefaultFieldState
+  disabled?: true
+}
+
+export type LegendOptions = {
+  /** Marker gruppen som påkrevd, med stjerne eller med ordet «(påkrevd)». */
+  required?: RequiredMarker
+  /** Marker gruppen som valgfri. Velg én av `required` og `optional`. */
+  optional?: boolean
+  /** Demper teksten når gruppen er slått av. */
+  disabled?: boolean
+}
+
+export type LegendAttributes = {
+  class: typeof LEGEND_CLASS
+  "data-required"?: RequiredMarker
+  "data-optional"?: ""
+  "aria-disabled"?: "true"
+}
+
+/**
+ * Attributtene for en gruppe med kontroller som hører sammen.
+ *
+ * `<fieldset>` med `<legend>` er den ene måten å gi et sett radioknapper eller
+ * avkryssingsbokser en felles ledetekst som skjermlesere faktisk leser opp
+ * før hvert valg.
+ *
+ * ```ts
+ * <fieldset {...fieldset({ state: "invalid" })}>
+ *   <legend {...legend({ required: "symbol" })}>Leveringsmåte</legend>
+ * </fieldset>
+ * ```
+ */
+export const fieldset = Object.assign(
+  ({ state = "default", disabled }: FieldsetOptions = {}): FieldsetAttributes =>
+    attributes({
+      class: FIELDSET_CLASS,
+      "data-state": state === "default" ? undefined : state,
+      disabled: disabled ? (true as const) : undefined,
+    }),
+  {
+    states: fieldStates,
+    isState: isFieldState,
+  },
+)
+
+/**
+ * Attributtene for ledeteksten på en gruppe.
+ *
+ * Samme markering som `label()`, men på et `<legend>`.
+ */
+export const legend = Object.assign(
+  ({ required, optional, disabled }: LegendOptions = {}): LegendAttributes =>
+    attributes({
+      class: LEGEND_CLASS,
+      "data-required": required,
+      "data-optional": optional && !required ? ("" as const) : undefined,
+      "aria-disabled": disabled ? ("true" as const) : undefined,
+    }),
+  {
+    markers: requiredMarkers,
+    isMarker: createGuard(requiredMarkers),
+  },
+)

package/src/components/css/file-upload/file-upload.css

@@ -0,0 +1,92 @@
+@layer fristil {
+  .fs-file-upload {
+    box-sizing: border-box;
+    display: block;
+    inline-size: 100%;
+    padding: var(--fs-file-upload-padding, var(--size-2));
+    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 dashed var(--semantic-field-border);
+    border-radius: var(--fs-file-upload-radius, var(--size-1));
+    cursor: pointer;
+  }
+
+  /* Knappen inne i feltet er nettleserens egen, og kan bare styles gjennom
+     denne pseudoklassen. Teksten på den kommer fra nettleseren og språket i
+     operativsystemet, så den kan ikke oversettes herfra. */
+  .fs-file-upload::file-selector-button {
+    margin-inline-end: var(--size-3);
+    padding: var(--size-2) var(--size-4);
+    font-family: inherit;
+    font-size: var(--font-size-m);
+    line-height: 1.5;
+    color: var(--semantic-interactive-main);
+    background: transparent;
+    border: 1px solid var(--semantic-interactive-main);
+    border-radius: var(--fs-file-upload-radius, var(--size-1));
+    cursor: pointer;
+  }
+
+  .fs-file-upload::file-selector-button:hover {
+    background: var(--semantic-interactive-background);
+  }
+
+  .fs-file-upload:hover {
+    border-color: var(--semantic-field-border-hover);
+  }
+
+  .fs-file-upload:focus-visible {
+    outline: 2px solid var(--semantic-interactive-main);
+    outline-offset: 2px;
+  }
+
+  .fs-file-upload:disabled {
+    background: var(--semantic-disabled-background);
+    color: var(--semantic-disabled-foreground);
+    border-color: var(--semantic-disabled-background);
+    cursor: not-allowed;
+  }
+
+  .fs-file-upload[data-state="invalid"] {
+    border-color: var(--semantic-danger-foreground);
+    background: var(--semantic-danger-background);
+  }
+
+  .fs-file-upload[data-state="success"] {
+    border-color: var(--semantic-success-foreground);
+  }
+
+  /* Lista over filene som er valgt. Den skriver du selv, siden bare du vet
+     hva som skal skje når en fil fjernes. */
+  .fs-file-upload-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-2);
+    margin: var(--size-2) 0 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .fs-file-upload-list li {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--size-2);
+    padding: var(--size-2) var(--size-3);
+    background: var(--semantic-neutral-background);
+    border-radius: var(--fs-file-upload-radius, var(--size-1));
+    /* Filnavn har sjelden mellomrom å brekke i, og knappeteksten gjentar
+       navnet. Uten dette presser raden seg bredere enn skjermen på mobil. */
+    overflow-wrap: anywhere;
+  }
+
+  /* Et flex-element kan som standard ikke bli smalere enn innholdet sitt.
+     Uten dette brekker ikke filnavnet, uansett hva vi sier over. */
+  .fs-file-upload-list li > * {
+    min-inline-size: 0;
+  }
+}

package/src/components/css/file-upload/file-upload.ts

@@ -0,0 +1,65 @@
+import {
+  attributes,
+  type FieldState,
+  fieldStates,
+  isFieldState,
+  type NonDefaultFieldState,
+} from "../shared.js"
+
+export const FILE_UPLOAD_CLASS = "fs-file-upload" as const
+/** Lista over filene som er valgt. */
+export const FILE_UPLOAD_LIST_CLASS = "fs-file-upload-list" as const
+
+export type FileUploadOptions = {
+  /** Valideringstilstand. Standard: `default`. */
+  state?: FieldState
+  /** Tillat flere filer. */
+  multiple?: boolean
+  /** Filtypene feltet tar imot, som `.pdf,image/*`. */
+  accept?: string
+}
+
+export type FileUploadAttributes = {
+  class: typeof FILE_UPLOAD_CLASS
+  type: "file"
+  multiple?: true
+  accept?: string
+  "data-state"?: NonDefaultFieldState
+  "aria-invalid"?: "true"
+}
+
+/**
+ * Attributtene for et filopplastingsfelt.
+ *
+ * Feltet er et vanlig `<input type="file">`. Knappen inni er nettleserens
+ * egen, og teksten på den kommer fra operativsystemets språk. Den kan ikke
+ * oversettes, så ledeteksten over feltet må si hva som skal lastes opp.
+ *
+ * `accept` er en hjelp i filvelgeren, ikke en sperre. Brukeren kan velge
+ * «alle filer», så typen må sjekkes på serveren uansett.
+ *
+ * ```ts
+ * <input {...fileUpload({ multiple: true, accept: ".pdf" })} />
+ * ```
+ */
+export const fileUpload = Object.assign(
+  ({
+    state = "default",
+    multiple,
+    accept,
+  }: FileUploadOptions = {}): FileUploadAttributes =>
+    attributes({
+      class: FILE_UPLOAD_CLASS,
+      type: "file" as const,
+      multiple: multiple ? (true as const) : undefined,
+      accept,
+      "data-state": state === "default" ? undefined : state,
+      "aria-invalid": state === "invalid" ? ("true" as const) : undefined,
+    }),
+  {
+    /** Klassen på lista over valgte filer. */
+    list: FILE_UPLOAD_LIST_CLASS,
+    states: fieldStates,
+    isState: isFieldState,
+  },
+)

package/src/components/css/heading/heading.css

@@ -0,0 +1,33 @@
+@layer fristil {
+  .fs-heading {
+    margin: 0;
+    font-family: inherit;
+    font-weight: 700;
+    line-height: 1.2;
+    color: var(--semantic-page-foreground);
+    text-wrap: balance;
+    font-size: var(--font-size-xl);
+  }
+
+  .fs-heading[data-size="mega"] {
+    font-size: var(--font-size-mega);
+  }
+
+  .fs-heading[data-size="xl"] {
+    font-size: var(--font-size-xxl);
+  }
+
+  .fs-heading[data-size="m"] {
+    font-size: var(--font-size-l);
+  }
+
+  .fs-heading[data-size="s"] {
+    font-size: var(--font-size-m);
+  }
+
+  .fs-heading[data-size="xs"] {
+    font-size: var(--font-size-s);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+  }
+}