@fristil/designsystem 0.2.0

package/src/components/css/accordion/accordion.ts

@@ -0,0 +1,50 @@
+import { attributes, createGuard } from "../shared.js"
+
+export const ACCORDION_CLASS = "fs-accordion" as const
+/** Innholdet som vises når panelet er åpent. */
+export const ACCORDION_CONTENT_CLASS = "fs-accordion__content" as const
+
+export const accordionVariants = ["default", "plain"] as const
+
+export type AccordionVariant = (typeof accordionVariants)[number]
+export type NonDefaultAccordionVariant = Exclude<AccordionVariant, "default">
+
+export type AccordionOptions = {
+  /** Egen ramme, eller bare en strek mellom panelene. Standard: `default`. */
+  variant?: AccordionVariant
+}
+
+export type AccordionAttributes = {
+  class: typeof ACCORDION_CLASS
+  "data-variant"?: NonDefaultAccordionVariant
+}
+
+/**
+ * Attributtene for et panel som kan foldes ut.
+ *
+ * Klassen hører på et `<details>` med et `<summary>` først. Nettleseren tar
+ * seg av åpning, lukking, tastatur og at skjermlesere melder «utvidet» eller
+ * «sammenfoldet». Bygger du det samme av knapper og `aria-expanded`, må alt
+ * det skrives på nytt, og nettleserens søk i siden finner ikke lenger tekst
+ * inne i et lukket panel.
+ *
+ * ```ts
+ * <details {...accordion()}>
+ *   <summary>Hvem kan søke?</summary>
+ *   <div class={accordion.content}>…</div>
+ * </details>
+ * ```
+ */
+export const accordion = Object.assign(
+  ({ variant = "default" }: AccordionOptions = {}): AccordionAttributes =>
+    attributes({
+      class: ACCORDION_CLASS,
+      "data-variant": variant === "default" ? undefined : variant,
+    }),
+  {
+    /** Klassen på innholdet under overskriften. */
+    content: ACCORDION_CONTENT_CLASS,
+    variants: accordionVariants,
+    isVariant: createGuard(accordionVariants),
+  },
+)

package/src/components/css/alert/alert.css

@@ -0,0 +1,50 @@
+@layer fristil {
+  .fs-alert {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-1);
+    padding: var(--fs-alert-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-neutral-background);
+    border-radius: var(--fs-alert-radius, var(--size-1));
+    /* Fargen ligger i en strek på kanten framfor i hele flaten, så teksten
+       beholder kontrasten mot sideflaten i begge temaer. */
+    border-inline-start: var(--fs-alert-accent, var(--size-1)) solid
+      var(--semantic-neutral-foreground);
+  }
+
+  .fs-alert__title {
+    margin: 0;
+    font-size: var(--font-size-m);
+    font-weight: 600;
+    line-height: 1.5;
+  }
+
+  .fs-alert p {
+    margin: 0;
+  }
+
+  .fs-alert[data-color="success"] {
+    background: var(--semantic-success-background);
+    border-inline-start-color: var(--semantic-success-foreground);
+  }
+
+  .fs-alert[data-color="warning"] {
+    background: var(--semantic-warning-background);
+    border-inline-start-color: var(--semantic-warning-foreground);
+  }
+
+  .fs-alert[data-color="danger"] {
+    background: var(--semantic-danger-background);
+    border-inline-start-color: var(--semantic-danger-foreground);
+  }
+
+  .fs-alert[data-color="info"] {
+    background: var(--semantic-interactive-background);
+    border-inline-start-color: var(--semantic-interactive-main);
+  }
+}

package/src/components/css/alert/alert.ts

@@ -0,0 +1,48 @@
+import { attributes, createGuard } from "../shared.js"
+
+export const ALERT_CLASS = "fs-alert" as const
+/** Overskriften inne i meldingen. */
+export const ALERT_TITLE_CLASS = "fs-alert__title" as const
+
+export const alertColors = ["info", "success", "warning", "danger"] as const
+
+export type AlertColor = (typeof alertColors)[number]
+export type NonNeutralAlertColor = AlertColor
+
+export type AlertOptions = {
+  /** Hva meldingen betyr. Utelatt gir den nøytrale. */
+  color?: AlertColor
+}
+
+export type AlertAttributes = {
+  class: typeof ALERT_CLASS
+  "data-color"?: AlertColor
+}
+
+/**
+ * Attributtene for en melding som gjelder hele siden eller et helt skjema.
+ *
+ * Rollen settes ikke her, fordi den avhenger av når meldingen kommer.
+ * Står den i markupen fra start, skal den ikke ha noen rolle. Dukker den opp
+ * mens siden står stille, trenger den `role="status"`, eller `role="alert"`
+ * hvis brukeren må stoppe opp.
+ *
+ * ```ts
+ * <div {...alert({ color: "warning" })}>
+ *   <p {...alert.title}>Søknaden er ikke sendt</p>
+ * </div>
+ * ```
+ */
+export const alert = Object.assign(
+  ({ color }: AlertOptions = {}): AlertAttributes =>
+    attributes({
+      class: ALERT_CLASS,
+      "data-color": color,
+    }),
+  {
+    /** Klassen på overskriften inne i meldingen. */
+    title: ALERT_TITLE_CLASS,
+    colors: alertColors,
+    isColor: createGuard(alertColors),
+  },
+)

package/src/components/css/avatar/avatar.css

@@ -0,0 +1,64 @@
+@layer fristil {
+  .fs-avatar {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--fs-avatar-size, var(--size-10));
+    block-size: var(--fs-avatar-size, var(--size-10));
+    overflow: hidden;
+    font-family: inherit;
+    font-size: var(--font-size-s);
+    font-weight: 600;
+    line-height: 1;
+    color: var(--semantic-interactive-foreground);
+    background: var(--semantic-interactive-background);
+    border-radius: 50%;
+    /* Bildet kan være hva som helst. Ringen holder formen tydelig også mot en
+       lys flate i bildet. */
+    box-shadow: inset 0 0 0 1px var(--semantic-divider-30);
+  }
+
+  .fs-avatar img {
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+  }
+
+  .fs-avatar[data-size="small"] {
+    inline-size: var(--size-6);
+    block-size: var(--size-6);
+    font-size: var(--font-size-xs);
+  }
+
+  .fs-avatar[data-size="large"] {
+    inline-size: var(--size-16);
+    block-size: var(--size-16);
+    font-size: var(--font-size-l);
+  }
+
+  .fs-avatar[data-variant="square"] {
+    border-radius: var(--fs-avatar-radius, var(--size-1));
+  }
+
+  /* Flere profilbilder som overlapper. Rekkefølgen snus i CSS, så det
+     første bildet ligger øverst uten at markupen må skrives baklengs. */
+  .fs-avatar-stack {
+    display: inline-flex;
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .fs-avatar-stack > * + * {
+    margin-inline-end: var(--fs-avatar-stack-overlap, calc(var(--size-2) * -1));
+  }
+
+  .fs-avatar-stack .fs-avatar {
+    box-shadow:
+      inset 0 0 0 1px var(--semantic-divider-30),
+      0 0 0 2px var(--semantic-page-background);
+  }
+}

package/src/components/css/avatar/avatar.ts

@@ -0,0 +1,57 @@
+import { attributes, createGuard } from "../shared.js"
+
+export const AVATAR_CLASS = "fs-avatar" as const
+/** Flere profilbilder som overlapper. */
+export const AVATAR_STACK_CLASS = "fs-avatar-stack" as const
+
+export const avatarSizes = ["small", "medium", "large"] as const
+export const avatarVariants = ["circle", "square"] as const
+
+export type AvatarSize = (typeof avatarSizes)[number]
+export type AvatarVariant = (typeof avatarVariants)[number]
+export type NonDefaultAvatarSize = Exclude<AvatarSize, "medium">
+export type NonDefaultAvatarVariant = Exclude<AvatarVariant, "circle">
+
+export type AvatarOptions = {
+  /** Størrelse. Standard: `medium`. */
+  size?: AvatarSize
+  /** Rund eller avrundet firkant. Standard: `circle`. */
+  variant?: AvatarVariant
+}
+
+export type AvatarAttributes = {
+  class: typeof AVATAR_CLASS
+  "data-size"?: NonDefaultAvatarSize
+  "data-variant"?: NonDefaultAvatarVariant
+}
+
+/**
+ * Attributtene for et profilbilde eller initialer.
+ *
+ * Står navnet allerede ved siden av, er bildet pynt: sett `aria-hidden="true"`
+ * på det, ellers leses navnet opp to ganger. Står bildet alene, må det ha en
+ * tekst som sier hvem det er.
+ *
+ * ```ts
+ * <span {...avatar({ size: "small" })} aria-hidden="true">ON</span>
+ * ```
+ */
+export const avatar = Object.assign(
+  ({
+    size = "medium",
+    variant = "circle",
+  }: AvatarOptions = {}): AvatarAttributes =>
+    attributes({
+      class: AVATAR_CLASS,
+      "data-size": size === "medium" ? undefined : size,
+      "data-variant": variant === "circle" ? undefined : variant,
+    }),
+  {
+    /** Klassen på lista med profilbilder som overlapper. */
+    stack: AVATAR_STACK_CLASS,
+    sizes: avatarSizes,
+    isSize: createGuard(avatarSizes),
+    variants: avatarVariants,
+    isVariant: createGuard(avatarVariants),
+  },
+)

package/src/components/css/badge/badge.css

@@ -0,0 +1,42 @@
+@layer fristil {
+  .fs-badge {
+    /* 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: inline-flex;
+    align-items: center;
+    gap: var(--size-1);
+    padding: var(--fs-badge-padding, var(--size-0-5) var(--size-2));
+    font-family: inherit;
+    font-size: var(--font-size-xs);
+    font-weight: 600;
+    line-height: 1.5;
+    border-radius: var(--fs-badge-radius, var(--size-4));
+    white-space: nowrap;
+    user-select: none;
+    background: var(--semantic-interactive-background);
+    color: var(--semantic-interactive-main);
+  }
+
+  .fs-badge[data-color="success"] {
+    background: var(--semantic-success-background);
+    color: var(--semantic-success-foreground);
+  }
+
+  .fs-badge[data-color="warning"] {
+    background: var(--semantic-warning-background);
+    color: var(--semantic-warning-foreground);
+  }
+
+  .fs-badge[data-color="danger"] {
+    background: var(--semantic-danger-background);
+    color: var(--semantic-danger-foreground);
+  }
+
+  .fs-badge[data-color="neutral"] {
+    background: var(--semantic-neutral-background);
+    color: var(--semantic-neutral-foreground);
+  }
+}

package/src/components/css/badge/badge.ts

@@ -0,0 +1,43 @@
+import { attributes, createGuard } from "../shared.js"
+
+export const BADGE_CLASS = "fs-badge" as const
+
+export const badgeColors = [
+  "info",
+  "success",
+  "warning",
+  "danger",
+  "neutral",
+] as const
+
+export type BadgeColor = (typeof badgeColors)[number]
+export type NonInfoBadgeColor = Exclude<BadgeColor, "info">
+
+export type BadgeOptions = {
+  /** Hva tilstanden betyr. Standard: `info`. */
+  color?: BadgeColor
+}
+
+export type BadgeAttributes = {
+  class: typeof BADGE_CLASS
+  "data-color"?: NonInfoBadgeColor
+}
+
+/**
+ * Attributtene for et statusmerke.
+ *
+ * ```ts
+ * <span {...badge({ color: "success" })}>Innvilget</span>
+ * ```
+ */
+export const badge = Object.assign(
+  ({ color = "info" }: BadgeOptions = {}): BadgeAttributes =>
+    attributes({
+      class: BADGE_CLASS,
+      "data-color": color === "info" ? undefined : color,
+    }),
+  {
+    colors: badgeColors,
+    isColor: createGuard(badgeColors),
+  },
+)

package/src/components/css/breadcrumbs/breadcrumbs.css

@@ -0,0 +1,50 @@
+@layer fristil {
+  .fs-breadcrumbs {
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--fs-breadcrumbs-gap, var(--size-2));
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-family: inherit;
+    font-size: var(--font-size-s);
+    line-height: 1.5;
+    color: var(--semantic-muted-foreground);
+  }
+
+  .fs-breadcrumbs li {
+    display: flex;
+    align-items: center;
+    gap: var(--fs-breadcrumbs-gap, var(--size-2));
+  }
+
+  /* Skilletegnet er dekorasjon, og legges derfor inn med CSS. Sto det i
+     markupen, ville skjermlesere lest «skråstrek» mellom hvert steg. */
+  .fs-breadcrumbs li + li::before {
+    content: "/";
+    color: var(--semantic-muted-foreground);
+  }
+
+  .fs-breadcrumbs a {
+    color: var(--semantic-interactive-main);
+    text-decoration: underline;
+    text-underline-offset: 0.14em;
+  }
+
+  .fs-breadcrumbs a:hover {
+    color: var(--semantic-interactive-foreground);
+  }
+
+  .fs-breadcrumbs a:focus-visible {
+    outline: 2px solid var(--semantic-interactive-main);
+    outline-offset: 2px;
+  }
+
+  .fs-breadcrumbs [aria-current="page"] {
+    color: var(--semantic-page-foreground);
+    font-weight: 600;
+    text-decoration: none;
+  }
+}

package/src/components/css/breadcrumbs/breadcrumbs.ts

@@ -0,0 +1,29 @@
+import { attributes } from "../shared.js"
+
+export const BREADCRUMBS_CLASS = "fs-breadcrumbs" as const
+
+export type BreadcrumbsAttributes = {
+  class: typeof BREADCRUMBS_CLASS
+}
+
+/**
+ * Attributtene for en brødsmulesti.
+ *
+ * Klassen hører på en `<ol>` inne i en `<nav>` med en tekst som sier hva
+ * navigasjonen er, for eksempel `aria-label="Du er her"`. Rekkefølgen betyr
+ * noe, så listen må være nummerert selv om tallene ikke vises.
+ *
+ * Skilletegnet mellom stegene legges inn med CSS. Sto det i markupen, ville
+ * skjermlesere lest «skråstrek» mellom hvert steg.
+ *
+ * ```ts
+ * <nav aria-label="Du er her">
+ *   <ol {...breadcrumbs()}>
+ *     <li><a href="/">Forsiden</a></li>
+ *     <li><a href="/saker" aria-current="page">Mine saker</a></li>
+ *   </ol>
+ * </nav>
+ * ```
+ */
+export const breadcrumbs = (): BreadcrumbsAttributes =>
+  attributes({ class: BREADCRUMBS_CLASS })

package/src/components/css/button/button.css

@@ -0,0 +1,101 @@
+@layer fristil {
+  .fs-button {
+    /* 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: inline-flex;
+    align-items: center;
+    gap: var(--size-2);
+    padding: var(--fs-button-padding, var(--size-2) var(--size-4));
+    font-family: inherit;
+    font-size: var(--font-size-m);
+    font-weight: 500;
+    line-height: 1.5;
+    border: 1px solid var(--semantic-interactive-main);
+    border-radius: var(--fs-button-radius, var(--size-1));
+    background: var(--semantic-interactive-main);
+    color: var(--semantic-interactive-contrast);
+    cursor: pointer;
+    text-decoration: none;
+    user-select: none;
+
+    /* Teksten får brekke. Med `white-space: nowrap` sprengte en knapp med en
+       lang norsk ledetekst boksen sin på en telefon, og da ruller hele siden
+       sidelengs. Knappen skal aldri bli bredere enn plassen den får.
+
+       `normal` står eksplisitt fordi `white-space` arves: en konsument med
+       `nowrap` på noe rundt ville ellers fått problemet tilbake. Målt i
+       Chromium holder `text-wrap: balance` alene, siden den setter
+       `text-wrap-mode: wrap` og dermed slår den arvede verdien, men den
+       eksplisitte linja gjelder også der `text-wrap` ikke er støttet. */
+    white-space: normal;
+    max-inline-size: 100%;
+    text-align: center;
+    text-wrap: balance;
+  }
+
+  .fs-button:hover {
+    background: var(--semantic-interactive-foreground);
+    border-color: var(--semantic-interactive-foreground);
+  }
+
+  .fs-button:focus-visible {
+    outline: 2px solid var(--semantic-interactive-main);
+    outline-offset: 2px;
+  }
+
+  .fs-button:disabled,
+  .fs-button[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-button[aria-disabled="true"] {
+    pointer-events: none;
+  }
+
+  /* Sekundær: omriss, gjennomsiktig bakgrunn */
+  .fs-button[data-variant="secondary"] {
+    background: transparent;
+    color: var(--semantic-interactive-main);
+    border-color: var(--semantic-interactive-main);
+  }
+
+  .fs-button[data-variant="secondary"]:hover {
+    background: var(--semantic-interactive-background);
+  }
+
+  /* Ghost: ingen kant, ingen bakgrunn */
+  .fs-button[data-variant="ghost"] {
+    background: transparent;
+    color: var(--semantic-interactive-main);
+    border-color: transparent;
+  }
+
+  .fs-button[data-variant="ghost"]:hover {
+    background: var(--semantic-interactive-background);
+  }
+
+  /* Danger */
+  .fs-button[data-variant="danger"] {
+    background: var(--semantic-danger-background);
+    color: var(--semantic-danger-foreground);
+    border-color: var(--semantic-danger-foreground);
+  }
+
+  .fs-button[data-variant="danger"]:hover {
+    background: var(--semantic-danger-main);
+    border-color: var(--semantic-danger-main);
+    color: var(--semantic-danger-contrast);
+  }
+}

package/src/components/css/button/button.ts

@@ -0,0 +1,44 @@
+import { attributes, createGuard } from "../shared.js"
+
+export const BUTTON_CLASS = "fs-button" as const
+
+export const buttonVariants = [
+  "primary",
+  "secondary",
+  "ghost",
+  "danger",
+] as const
+
+export type ButtonVariant = (typeof buttonVariants)[number]
+export type NonPrimaryButtonVariant = Exclude<ButtonVariant, "primary">
+
+export type ButtonOptions = {
+  /** Hvor tung handlingen er. Standard: `primary`. */
+  variant?: ButtonVariant
+}
+
+export type ButtonAttributes = {
+  class: typeof BUTTON_CLASS
+  "data-variant"?: NonPrimaryButtonVariant
+}
+
+/**
+ * Attributtene for en knapp.
+ *
+ * ```ts
+ * <button {...button({ variant: "secondary" })}>Lagre utkast</button>
+ * ```
+ */
+export const button = Object.assign(
+  ({ variant = "primary" }: ButtonOptions = {}): ButtonAttributes =>
+    attributes({
+      class: BUTTON_CLASS,
+      "data-variant": variant === "primary" ? undefined : variant,
+    }),
+  {
+    /** De lovlige variantene, for oppslag og forgrening. */
+    variants: buttonVariants,
+    /** Sjekker om en streng utenfra er en gyldig variant. */
+    isVariant: createGuard(buttonVariants),
+  },
+)

package/src/components/css/card/card.css

@@ -0,0 +1,48 @@
+@layer fristil {
+  .fs-card {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-2);
+    padding: var(--fs-card-padding, var(--size-4));
+    font-family: inherit;
+    color: var(--semantic-page-foreground);
+    background: var(--semantic-page-background);
+    border: 1px solid var(--semantic-divider-30);
+    border-radius: var(--fs-card-radius, var(--size-2));
+  }
+
+  .fs-card__title {
+    margin: 0;
+    font-size: var(--font-size-l);
+    font-weight: 600;
+    line-height: 1.4;
+  }
+
+  .fs-card p {
+    margin: 0;
+    line-height: 1.6;
+  }
+
+  .fs-card[data-variant="filled"] {
+    background: var(--semantic-neutral-background);
+    border-color: transparent;
+  }
+
+  /* Hele kortet er klikkbart. Elementet er da en <a> eller en <button>, og
+     fokusmarkeringen kommer derfra, ikke herfra. */
+  .fs-card[data-interactive] {
+    text-align: start;
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  .fs-card[data-interactive]:hover {
+    border-color: var(--semantic-interactive-main);
+  }
+
+  .fs-card[data-interactive]:focus-visible {
+    outline: 2px solid var(--semantic-interactive-main);
+    outline-offset: 2px;
+  }
+}

package/src/components/css/card/card.ts

@@ -0,0 +1,50 @@
+import { attributes, createGuard } from "../shared.js"
+
+export const CARD_CLASS = "fs-card" as const
+/** Overskriften inne i kortet. */
+export const CARD_TITLE_CLASS = "fs-card__title" as const
+
+export const cardVariants = ["outline", "filled"] as const
+
+export type CardVariant = (typeof cardVariants)[number]
+export type NonDefaultCardVariant = Exclude<CardVariant, "outline">
+
+export type CardOptions = {
+  /** Flate eller omriss. Standard: `outline`. */
+  variant?: CardVariant
+  /** Hele kortet er klikkbart. Bruk bare på `<a>` eller `<button>`. */
+  interactive?: boolean
+}
+
+export type CardAttributes = {
+  class: typeof CARD_CLASS
+  "data-variant"?: NonDefaultCardVariant
+  "data-interactive"?: ""
+}
+
+/**
+ * Attributtene for et kort.
+ *
+ * `interactive` gir hover og fokusmarkering, men gjør ingenting klikkbart av
+ * seg selv. Skal hele kortet kunne trykkes på, må elementet være en `<a>`
+ * eller en `<button>`. Et `<div>` med en klikklytter kan hverken nås med
+ * tastatur eller meldes som noe å trykke på.
+ *
+ * ```ts
+ * <a {...card({ interactive: true })} href="/sak/481">…</a>
+ * ```
+ */
+export const card = Object.assign(
+  ({ variant = "outline", interactive }: CardOptions = {}): CardAttributes =>
+    attributes({
+      class: CARD_CLASS,
+      "data-variant": variant === "outline" ? undefined : variant,
+      "data-interactive": interactive ? ("" as const) : undefined,
+    }),
+  {
+    /** Klassen på overskriften inne i kortet. */
+    title: CARD_TITLE_CLASS,
+    variants: cardVariants,
+    isVariant: createGuard(cardVariants),
+  },
+)