@fristil/designsystem 0.2.0

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

@@ -0,0 +1,42 @@
+import { attributes, createGuard } from "../shared.js"
+
+export const HEADING_CLASS = "fs-heading" as const
+
+export const headingSizes = ["xs", "s", "m", "l", "xl", "mega"] as const
+
+export type HeadingSize = (typeof headingSizes)[number]
+export type NonDefaultHeadingSize = Exclude<HeadingSize, "l">
+
+export type HeadingOptions = {
+  /** Visuell størrelse. Standard: `l`. */
+  size?: HeadingSize
+}
+
+export type HeadingAttributes = {
+  class: typeof HEADING_CLASS
+  "data-size"?: NonDefaultHeadingSize
+}
+
+/**
+ * Attributtene for en overskrift.
+ *
+ * Størrelsen og nivået er to forskjellige ting. Nivået er `<h1>` til `<h6>`
+ * og bestemmer strukturen skjermlesere navigerer etter; `size` bestemmer bare
+ * hvor stor teksten ser ut. En `<h2>` som skal se liten ut er riktig; en
+ * `<h4>` valgt fordi den var liten nok, hopper over et nivå i strukturen.
+ *
+ * ```ts
+ * <h2 {...heading({ size: "m" })}>Vedlegg</h2>
+ * ```
+ */
+export const heading = Object.assign(
+  ({ size = "l" }: HeadingOptions = {}): HeadingAttributes =>
+    attributes({
+      class: HEADING_CLASS,
+      "data-size": size === "l" ? undefined : size,
+    }),
+  {
+    sizes: headingSizes,
+    isSize: createGuard(headingSizes),
+  },
+)

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

@@ -0,0 +1,24 @@
+@layer fristil {
+  .fs-help-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);
+    line-height: 1.4;
+    color: var(--semantic-muted-foreground);
+  }
+
+  .fs-help-text[data-variant="default"] {
+    color: var(--semantic-page-foreground);
+  }
+
+  .fs-help-text[data-variant="success"] {
+    color: var(--semantic-success-foreground);
+  }
+
+  .fs-help-text[data-variant="warning"] {
+    color: var(--semantic-warning-foreground);
+  }
+}

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

@@ -0,0 +1,42 @@
+import { attributes, createGuard } from "../shared.js"
+
+export const HELP_TEXT_CLASS = "fs-help-text" as const
+
+export const helpTextVariants = [
+  "muted",
+  "default",
+  "success",
+  "warning",
+] as const
+
+export type HelpTextVariant = (typeof helpTextVariants)[number]
+export type NonDefaultHelpTextVariant = Exclude<HelpTextVariant, "muted">
+
+export type HelpTextOptions = {
+  /** Hvor mye teksten skal rope. Standard: `muted`. */
+  variant?: HelpTextVariant
+}
+
+export type HelpTextAttributes = {
+  class: typeof HELP_TEXT_CLASS
+  "data-variant"?: NonDefaultHelpTextVariant
+}
+
+/**
+ * Attributtene for hjelpetekst under et felt.
+ *
+ * ```ts
+ * <p {...helpText({ variant: "warning" })}>…</p>
+ * ```
+ */
+export const helpText = Object.assign(
+  ({ variant = "muted" }: HelpTextOptions = {}): HelpTextAttributes =>
+    attributes({
+      class: HELP_TEXT_CLASS,
+      "data-variant": variant === "muted" ? undefined : variant,
+    }),
+  {
+    variants: helpTextVariants,
+    isVariant: createGuard(helpTextVariants),
+  },
+)

package/src/components/css/input/input.css

@@ -0,0 +1,131 @@
+@layer fristil {
+  .fs-input {
+    /* 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(--fs-input-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-input-radius, var(--size-1));
+  }
+
+  .fs-input::placeholder {
+    color: var(--semantic-muted-foreground);
+  }
+
+  .fs-input:hover {
+    border-color: var(--semantic-field-border-hover);
+  }
+
+  .fs-input:focus-visible {
+    outline: 2px solid var(--semantic-interactive-main);
+    outline-offset: 2px;
+    border-color: var(--semantic-interactive-main);
+  }
+
+  .fs-input:disabled,
+  .fs-input[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-input[aria-disabled="true"] {
+    pointer-events: none;
+  }
+
+  .fs-input[data-state="invalid"] {
+    border-color: var(--semantic-danger-foreground);
+    background: var(--semantic-danger-background);
+  }
+
+  .fs-input[data-state="invalid"]:focus-visible {
+    outline-color: var(--semantic-danger-foreground);
+  }
+
+  .fs-input[data-state="success"] {
+    border-color: var(--semantic-success-foreground);
+    background: var(--semantic-success-background);
+  }
+
+  .fs-input[data-state="success"]:focus-visible {
+    outline-color: var(--semantic-success-foreground);
+  }
+
+  .fs-input[data-variant="date"],
+  .fs-input[data-variant="time"],
+  .fs-input[data-variant="datetime-local"] {
+    position: relative;
+    min-height: calc(var(--size-4) * 2.5);
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0.01em;
+    padding-inline-end: calc(var(--size-6) + var(--size-2));
+    background-repeat: no-repeat;
+    background-position: right var(--size-2) center;
+    background-size: 0.95rem 0.95rem;
+  }
+
+  /* background-position har ingen logisk variant, så retningen må snus for
+     hånd. Alt annet her er logiske egenskaper, som snur av seg selv. */
+  .fs-input[data-variant="date"]:dir(rtl),
+  .fs-input[data-variant="time"]:dir(rtl),
+  .fs-input[data-variant="datetime-local"]:dir(rtl) {
+    background-position: left var(--size-2) center;
+  }
+
+  .fs-input[data-variant="date"],
+  .fs-input[data-variant="datetime-local"] {
+    background-image: var(--semantic-icon-calendar);
+  }
+
+  .fs-input[data-variant="time"] {
+    background-image: var(--semantic-icon-clock);
+  }
+
+  .fs-input[data-variant="date"]::-webkit-calendar-picker-indicator,
+  .fs-input[data-variant="time"]::-webkit-calendar-picker-indicator,
+  .fs-input[data-variant="datetime-local"]::-webkit-calendar-picker-indicator {
+    position: absolute;
+    inset-inline-end: var(--size-2);
+    top: 50%;
+    transform: translateY(-50%);
+    opacity: 0;
+    width: var(--size-6);
+    height: var(--size-6);
+    min-width: var(--size-6);
+    min-height: var(--size-6);
+    cursor: pointer;
+  }
+
+  /* Høykontrast: ikonet er malt inn i bildet med fast farge, og kan bli
+     usynlig i et mørkt tema. Nettleserens egen knapp er skjult bak vårt ikon,
+     og hentes fram igjen her. */
+  @media (forced-colors: active) {
+    .fs-input[data-variant="date"],
+    .fs-input[data-variant="time"],
+    .fs-input[data-variant="datetime-local"] {
+      background-image: none;
+    }
+
+    .fs-input[data-variant="date"]::-webkit-calendar-picker-indicator,
+    .fs-input[data-variant="time"]::-webkit-calendar-picker-indicator,
+    .fs-input[data-variant="datetime-local"]::-webkit-calendar-picker-indicator {
+      opacity: 1;
+    }
+  }
+}

package/src/components/css/input/input.ts

@@ -0,0 +1,76 @@
+import {
+  attributes,
+  createGuard,
+  type FieldState,
+  fieldStates,
+  isFieldState,
+  type NonDefaultFieldState,
+} from "../shared.js"
+
+export const INPUT_CLASS = "fs-input" as const
+
+export const inputTypes = [
+  "text",
+  "password",
+  "email",
+  "number",
+  "date",
+  "datetime-local",
+  "week",
+  "month",
+  "tel",
+  "url",
+  "search",
+  "time",
+] as const
+
+export type InputType = (typeof inputTypes)[number]
+
+/** Typene som får et ikon i feltet, og som åpner nettleserens egen velger. */
+const TYPER_MED_IKON = ["date", "time", "datetime-local"] as const
+type TypeMedIkon = (typeof TYPER_MED_IKON)[number]
+
+export type InputOptions = {
+  /** HTML-typen. Settes som `type`, og styrer ikonet. Standard: `text`. */
+  type?: InputType
+  /** Valideringstilstand. Standard: `default`. */
+  state?: FieldState
+}
+
+export type InputAttributes = {
+  class: typeof INPUT_CLASS
+  type: InputType
+  "data-variant"?: TypeMedIkon
+  "data-state"?: NonDefaultFieldState
+  "aria-invalid"?: "true"
+}
+
+/**
+ * Attributtene for et tekstfelt.
+ *
+ * `type` setter både HTML-typen og ikonvarianten, så de to kan ikke komme i
+ * utakt. Skriver du dem for hånd, er det lett å få et datofelt som ser ut
+ * som et datofelt, men der ingenting skjer når brukeren trykker på ikonet.
+ *
+ * ```ts
+ * <input {...input({ type: "date", state: "invalid" })} />
+ * ```
+ */
+export const input = Object.assign(
+  ({ type = "text", state = "default" }: InputOptions = {}): InputAttributes =>
+    attributes({
+      class: INPUT_CLASS,
+      type,
+      "data-variant": (TYPER_MED_IKON as readonly string[]).includes(type)
+        ? (type as TypeMedIkon)
+        : undefined,
+      "data-state": state === "default" ? undefined : state,
+      "aria-invalid": state === "invalid" ? ("true" as const) : undefined,
+    }),
+  {
+    types: inputTypes,
+    isType: createGuard(inputTypes),
+    states: fieldStates,
+    isState: isFieldState,
+  },
+)

package/src/components/css/label/label.css

@@ -0,0 +1,34 @@
+@layer fristil {
+  .fs-label {
+    display: block;
+    font-family: inherit;
+    font-size: var(--font-size-s);
+    font-weight: 600;
+    line-height: 1.5;
+    color: var(--semantic-page-foreground);
+  }
+
+  .fs-label[data-required]::after {
+    content: " *";
+    color: var(--semantic-danger-foreground);
+    font-weight: 700;
+  }
+
+  .fs-label[data-required="text"]::after {
+    content: " (påkrevd)";
+    color: var(--semantic-danger-foreground);
+    font-weight: 400;
+    font-size: var(--font-size-xs);
+  }
+
+  .fs-label[data-optional]::after {
+    content: " (valgfri)";
+    color: var(--semantic-disabled-foreground);
+    font-weight: 400;
+    font-size: var(--font-size-xs);
+  }
+
+  .fs-label[aria-disabled="true"] {
+    color: var(--semantic-muted-foreground);
+  }
+}

package/src/components/css/label/label.ts

@@ -0,0 +1,51 @@
+import {
+  attributes,
+  createGuard,
+  type RequiredMarker,
+  requiredMarkers,
+} from "../shared.js"
+
+export const LABEL_CLASS = "fs-label" as const
+
+export type { RequiredMarker }
+export { requiredMarkers }
+
+export type LabelOptions = {
+  /** Marker feltet som påkrevd, med stjerne eller med ordet «(påkrevd)». */
+  required?: RequiredMarker
+  /** Marker feltet som valgfritt. Velg én av `required` og `optional`. */
+  optional?: boolean
+  /** Demper teksten når kontrollen er slått av. */
+  disabled?: boolean
+}
+
+export type LabelAttributes = {
+  class: typeof LABEL_CLASS
+  "data-required"?: RequiredMarker
+  "data-optional"?: ""
+  "aria-disabled"?: "true"
+}
+
+/**
+ * Attributtene for en ledetekst.
+ *
+ * Markeringen er bare visuell, så sett `required` på selve feltet i tillegg,
+ * ellers får skjermleseren ikke vite at det må fylles ut.
+ *
+ * ```ts
+ * <label {...label({ required: "symbol" })} htmlFor="epost">E-postadresse</label>
+ * ```
+ */
+export const label = Object.assign(
+  ({ required, optional, disabled }: LabelOptions = {}): LabelAttributes =>
+    attributes({
+      class: LABEL_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/link/link.css

@@ -0,0 +1,36 @@
+@layer fristil {
+  .fs-link {
+    color: var(--semantic-interactive-main);
+    font-family: inherit;
+    font-size: inherit;
+    line-height: 1.5;
+    text-decoration-line: underline;
+    text-decoration-thickness: 0.08em;
+    text-underline-offset: 0.14em;
+    text-decoration-color: currentColor;
+    transition:
+      color 120ms ease,
+      text-decoration-color 120ms ease;
+  }
+
+  .fs-link:hover {
+    color: var(--semantic-interactive-foreground);
+  }
+
+  .fs-link:visited {
+    color: var(--semantic-interactive-visited);
+  }
+
+  .fs-link:focus-visible {
+    outline: 2px solid var(--semantic-interactive-main);
+    outline-offset: 2px;
+    border-radius: var(--size-0-5);
+  }
+
+  .fs-link[aria-disabled="true"] {
+    color: var(--semantic-muted-foreground);
+    text-decoration: none;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}

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

@@ -0,0 +1,29 @@
+import { attributes } from "../shared.js"
+
+export const LINK_CLASS = "fs-link" as const
+
+export type LinkOptions = {
+  /**
+   * Lenken er ikke klikkbar ennå. Gir `aria-disabled` framfor å fjerne
+   * `href`, slik at skjermlesere fortsatt finner den og kan si fra.
+   */
+  disabled?: boolean
+}
+
+export type LinkAttributes = {
+  class: typeof LINK_CLASS
+  "aria-disabled"?: "true"
+}
+
+/**
+ * Attributtene for en lenke.
+ *
+ * ```ts
+ * <a {...link()} href="/kvittering">Se kvittering</a>
+ * ```
+ */
+export const link = ({ disabled = false }: LinkOptions = {}): LinkAttributes =>
+  attributes({
+    class: LINK_CLASS,
+    "aria-disabled": disabled ? ("true" as const) : undefined,
+  })

package/src/components/css/list/list.css

@@ -0,0 +1,40 @@
+@layer fristil {
+  .fs-list {
+    box-sizing: border-box;
+    margin: 0;
+    padding-inline-start: var(--size-5);
+    font-family: inherit;
+    font-size: var(--font-size-m);
+    line-height: 1.6;
+    color: var(--semantic-page-foreground);
+  }
+
+  .fs-list li + li {
+    margin-block-start: var(--fs-list-gap, var(--size-1));
+  }
+
+  .fs-list .fs-list {
+    margin-block-start: var(--fs-list-gap, var(--size-1));
+  }
+
+  /* Uten punkter og innrykk, for lister som bærer sin egen struktur, som
+     rader med kort. Listen blir værende en liste for skjermlesere. */
+  .fs-list[data-variant="plain"] {
+    list-style: none;
+    padding-inline-start: 0;
+  }
+
+  .fs-list[data-variant="divided"] {
+    list-style: none;
+    padding-inline-start: 0;
+  }
+
+  .fs-list[data-variant="divided"] li + li {
+    margin-block-start: 0;
+    border-block-start: 1px solid var(--semantic-divider-30);
+  }
+
+  .fs-list[data-variant="divided"] li {
+    padding-block: var(--fs-list-gap, var(--size-2));
+  }
+}

package/src/components/css/list/list.ts

@@ -0,0 +1,42 @@
+import { attributes, createGuard } from "../shared.js"
+
+export const LIST_CLASS = "fs-list" as const
+
+export const listVariants = ["default", "plain", "divided"] as const
+
+export type ListVariant = (typeof listVariants)[number]
+export type NonDefaultListVariant = Exclude<ListVariant, "default">
+
+export type ListOptions = {
+  /** Punkter, rene rader, eller rader med strek mellom. Standard: `default`. */
+  variant?: ListVariant
+}
+
+export type ListAttributes = {
+  class: typeof LIST_CLASS
+  "data-variant"?: NonDefaultListVariant
+}
+
+/**
+ * Attributtene for en liste.
+ *
+ * Klassen hører på `<ul>` eller `<ol>`. `plain` og `divided` fjerner punktene
+ * visuelt, men listen blir værende en liste, så skjermleseren sier fortsatt
+ * hvor mange elementer den har. Det er grunnen til at varianten finnes: uten
+ * den ville folk brukt `<div>` for å bli kvitt punktene.
+ *
+ * ```ts
+ * <ul {...list({ variant: "divided" })}>…</ul>
+ * ```
+ */
+export const list = Object.assign(
+  ({ variant = "default" }: ListOptions = {}): ListAttributes =>
+    attributes({
+      class: LIST_CLASS,
+      "data-variant": variant === "default" ? undefined : variant,
+    }),
+  {
+    variants: listVariants,
+    isVariant: createGuard(listVariants),
+  },
+)

package/src/components/css/pagination/pagination.css

@@ -0,0 +1,77 @@
+@layer fristil {
+  .fs-pagination {
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--fs-pagination-gap, var(--size-1));
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-family: inherit;
+    font-size: var(--font-size-m);
+  }
+
+  .fs-pagination a,
+  .fs-pagination button {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    /* 40 piksler i begge retninger. WCAG 2.2 krever 24, og et nummer i en
+       lang rekke er lett å bomme på med finger. */
+    min-inline-size: var(--fs-pagination-size, var(--size-10));
+    min-block-size: var(--fs-pagination-size, var(--size-10));
+    padding-inline: var(--size-2);
+    font-family: inherit;
+    font-size: inherit;
+    line-height: 1;
+    color: var(--semantic-interactive-main);
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: var(--fs-pagination-radius, var(--size-1));
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  .fs-pagination a:hover,
+  .fs-pagination button:hover:not(:disabled) {
+    background: var(--semantic-interactive-background);
+  }
+
+  .fs-pagination a:focus-visible,
+  .fs-pagination button:focus-visible {
+    outline: 2px solid var(--semantic-interactive-main);
+    outline-offset: 2px;
+  }
+
+  .fs-pagination [aria-current="page"] {
+    color: var(--semantic-interactive-contrast);
+    background: var(--semantic-interactive-main);
+    border-color: var(--semantic-interactive-main);
+    font-weight: 600;
+  }
+
+  .fs-pagination button:disabled,
+  .fs-pagination [aria-disabled="true"] {
+    color: var(--semantic-disabled-foreground);
+    cursor: not-allowed;
+  }
+
+  /* Hoppet i nummerrekken, som «1 2 … 9 10». */
+  .fs-pagination__gap {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--fs-pagination-size, var(--size-10));
+    color: var(--semantic-muted-foreground);
+  }
+
+  /* Høykontrast: gjeldende side skilles bare med farge. */
+  @media (forced-colors: active) {
+    .fs-pagination [aria-current="page"] {
+      background-color: Highlight;
+      color: HighlightText;
+    }
+  }
+}

package/src/components/css/pagination/pagination.ts

@@ -0,0 +1,33 @@
+import { attributes } from "../shared.js"
+
+export const PAGINATION_CLASS = "fs-pagination" as const
+/** Hoppet i nummerrekken, som «1 2 … 9 10». */
+export const PAGINATION_GAP_CLASS = "fs-pagination__gap" as const
+
+export type PaginationAttributes = {
+  class: typeof PAGINATION_CLASS
+}
+
+/**
+ * Attributtene for sidenavigering.
+ *
+ * Klassen hører på en `<ul>` inne i en `<nav aria-label="Sidenavigering">`.
+ * Hver side er en lenke med egen adresse, ikke en knapp: da kan brukeren
+ * åpne side tre i ny fane, og komme tilbake med tilbakeknappen.
+ *
+ * Gjeldende side markeres med `aria-current="page"`, som både gir fargen og
+ * er det skjermleseren leser opp.
+ *
+ * ```ts
+ * <nav aria-label="Sidenavigering">
+ *   <ul {...pagination()}>…</ul>
+ * </nav>
+ * ```
+ */
+export const pagination = Object.assign(
+  (): PaginationAttributes => attributes({ class: PAGINATION_CLASS }),
+  {
+    /** Klassen på hoppet i nummerrekken. */
+    gap: PAGINATION_GAP_CLASS,
+  },
+)

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

@@ -0,0 +1,31 @@
+@layer fristil {
+  .fs-paragraph {
+    margin: 0;
+    font-family: inherit;
+    font-size: var(--font-size-m);
+    line-height: 1.6;
+    color: var(--semantic-page-foreground);
+    /* Under 75 tegn per linje. Lengre linjer gjør det vanskelig å finne
+       tilbake til starten av neste. */
+    max-inline-size: var(--fs-paragraph-width, 70ch);
+  }
+
+  .fs-paragraph + .fs-paragraph {
+    margin-block-start: var(--fs-paragraph-gap, var(--size-3));
+  }
+
+  .fs-paragraph[data-size="small"] {
+    font-size: var(--font-size-s);
+  }
+
+  .fs-paragraph[data-size="large"] {
+    font-size: var(--font-size-l);
+    line-height: 1.55;
+  }
+
+  .fs-paragraph[data-variant="lead"] {
+    font-size: var(--font-size-l);
+    line-height: 1.55;
+    color: var(--semantic-muted-foreground);
+  }
+}