@fristil/designsystem 0.2.0

package/src/components/css/tooltip/tooltip.css

@@ -0,0 +1,47 @@
+@layer fristil {
+  .fs-tooltip {
+    position: relative;
+    display: inline-flex;
+  }
+
+  .fs-tooltip__bubble {
+    position: absolute;
+    inset-block-end: calc(100% + var(--size-2));
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+    z-index: 40;
+    inline-size: max-content;
+    max-inline-size: var(--fs-tooltip-width, 16rem);
+    padding: var(--fs-tooltip-padding, var(--size-1) var(--size-2));
+    font-size: var(--font-size-s);
+    line-height: 1.4;
+    color: var(--semantic-page-background);
+    background: var(--semantic-page-foreground);
+    border-radius: var(--fs-tooltip-radius, var(--size-1));
+    /* Boblen er skjult til utløseren får fokus eller musa. `visibility` og
+       ikke `display`, så teksten blir stående i tilgjengelighetstreet og kan
+       pekes på med aria-describedby. */
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  .fs-tooltip:hover .fs-tooltip__bubble,
+  .fs-tooltip:focus-within .fs-tooltip__bubble {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .fs-tooltip__bubble {
+      transition: opacity 120ms ease;
+    }
+  }
+
+  /* Høykontrast: boblen har ingen ramme, og flatene tvinges til samme farge
+     som siden. Uten en kant flyter teksten rett oppå innholdet under. */
+  @media (forced-colors: active) {
+    .fs-tooltip__bubble {
+      border: 1px solid CanvasText;
+    }
+  }
+}

package/src/components/css/tooltip/tooltip.ts

@@ -0,0 +1,36 @@
+import { attributes } from "../shared.js"
+
+export const TOOLTIP_CLASS = "fs-tooltip" as const
+/** Selve boblen med teksten. */
+export const TOOLTIP_BUBBLE_CLASS = "fs-tooltip__bubble" as const
+
+export type TooltipAttributes = {
+  class: typeof TOOLTIP_CLASS
+}
+
+/**
+ * Attributtene for omslaget rundt en utløser og en hjelpeboble.
+ *
+ * Boblen vises på hover og på fokus. Fokusdelen er ikke valgfri: en boble som
+ * bare kommer med musa finnes ikke for den som bruker tastatur.
+ *
+ * Teksten i boblen må kobles til utløseren med `aria-describedby`. Uten den
+ * er boblen bare noe som dukker opp på skjermen, og leses aldri opp.
+ *
+ * Bruk den til et tillegg, aldri til noe brukeren må ha. På en berøringsskjerm
+ * finnes hverken hover eller fokus før noe trykkes.
+ *
+ * ```ts
+ * <span {...tooltip()}>
+ *   <button aria-describedby="hint">Arkiver</button>
+ *   <span class={tooltip.bubble} role="tooltip" id="hint">Flyttes til arkivet</span>
+ * </span>
+ * ```
+ */
+export const tooltip = Object.assign(
+  (): TooltipAttributes => attributes({ class: TOOLTIP_CLASS }),
+  {
+    /** Klassen på boblen med teksten. */
+    bubble: TOOLTIP_BUBBLE_CLASS,
+  },
+)

package/src/components/frittstaende/calendar/fs-calendar.ts

@@ -0,0 +1,525 @@
+import { css, html, LitElement } from "lit"
+
+export const FS_CALENDAR_TAG = "fs-calendar" as const
+
+type CalendarCell = {
+  date: Date
+  iso: string
+  inMonth: boolean
+  isToday: boolean
+  isSelected: boolean
+}
+
+/**
+ * Deler dagene inn i uker på sju.
+ *
+ * role="grid" krever role="row" mellom seg og cellene sine. Uten radene
+ * melder skjermlesere rutenettet som tomt, og cellene som løsrevne knapper.
+ */
+function splitInWeeks(cells: CalendarCell[]): CalendarCell[][] {
+  const weeks: CalendarCell[][] = []
+  for (let i = 0; i < cells.length; i += 7) {
+    weeks.push(cells.slice(i, i + 7))
+  }
+  return weeks
+}
+
+/**
+ * Delnavnene på én dagknapp.
+ *
+ * Tilstanden må være egne delnavn og ikke bare `data-*`. En attributtselektor
+ * etter `::part()` treffer ikke. `::part(day)[data-selected="true"]` er målt
+ * uten virkning, så uten `day-selected` ville en konsument ikke hatt noen vei
+ * til den valgte dagen utenfra.
+ */
+function dayParts(cell: CalendarCell): string {
+  const names = ["day"]
+  if (!cell.inMonth) names.push("day-outside")
+  if (cell.isToday) names.push("day-today")
+  if (cell.isSelected) names.push("day-selected")
+  return names.join(" ")
+}
+
+const weekdayFormatter = new Intl.DateTimeFormat("nb-NO", {
+  weekday: "short",
+  timeZone: "UTC",
+})
+
+const monthFormatter = new Intl.DateTimeFormat("nb-NO", {
+  month: "long",
+  year: "numeric",
+  timeZone: "UTC",
+})
+
+function parseIsoDate(value: string | undefined): Date | null {
+  if (!value) return null
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value)
+  if (!match) return null
+
+  const year = Number(match[1])
+  const month = Number(match[2]) - 1
+  const day = Number(match[3])
+  return new Date(Date.UTC(year, month, day))
+}
+
+function formatIsoDate(date: Date): string {
+  return date.toISOString().slice(0, 10)
+}
+
+function startOfMonth(date: Date): Date {
+  return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), 1))
+}
+
+function addDays(date: Date, delta: number): Date {
+  return new Date(
+    Date.UTC(
+      date.getUTCFullYear(),
+      date.getUTCMonth(),
+      date.getUTCDate() + delta,
+    ),
+  )
+}
+
+function addMonths(date: Date, delta: number): Date {
+  return new Date(
+    Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + delta, 1),
+  )
+}
+
+function mondayBasedWeekday(date: Date): number {
+  return (date.getUTCDay() + 6) % 7
+}
+
+function getToday(): Date {
+  const today = new Date()
+  return new Date(
+    Date.UTC(today.getUTCFullYear(), today.getUTCMonth(), today.getUTCDate()),
+  )
+}
+
+function getCalendarCells(
+  monthDate: Date,
+  selectedIso?: string,
+): CalendarCell[] {
+  const selectedDate = parseIsoDate(selectedIso)
+  const todayIso = formatIsoDate(getToday())
+  const monthStart = startOfMonth(monthDate)
+  const firstVisible = addDays(monthStart, -mondayBasedWeekday(monthStart))
+
+  return Array.from({ length: 42 }, (_, index) => {
+    const date = addDays(firstVisible, index)
+    const iso = formatIsoDate(date)
+    return {
+      date,
+      iso,
+      inMonth: date.getUTCMonth() === monthStart.getUTCMonth(),
+      isToday: iso === todayIso,
+      isSelected: selectedDate ? iso === formatIsoDate(selectedDate) : false,
+    }
+  })
+}
+
+export class FsCalendar extends LitElement {
+  static properties = {
+    open: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    value: { type: String, reflect: true },
+    triggerHidden: {
+      type: Boolean,
+      reflect: true,
+      attribute: "trigger-hidden",
+    },
+  }
+
+  static styles = css`
+    :host {
+      display: inline-block;
+      font-family: inherit;
+      color: var(--semantic-page-foreground);
+      position: relative;
+    }
+
+    .trigger {
+      display: inline-grid;
+      place-items: center;
+      min-width: var(--fs-calendar-trigger-size, var(--size-10));
+      min-height: var(--fs-calendar-trigger-size, var(--size-10));
+      padding: var(--fs-calendar-trigger-padding, 0 var(--size-3));
+      font-family: inherit;
+      font-size: var(--font-size-m);
+      line-height: 1;
+      color: var(--semantic-page-foreground);
+      background: var(--semantic-page-background);
+      border: 1px solid var(--semantic-field-border);
+      border-radius: var(--fs-calendar-radius, var(--size-1));
+      cursor: pointer;
+    }
+
+    .trigger:hover:not(:disabled) {
+      background: var(--semantic-interactive-background);
+      border-color: var(--semantic-interactive-main);
+    }
+
+    .trigger:focus-visible,
+    .month-button:focus-visible,
+    .day:focus-visible {
+      outline: 2px solid var(--semantic-interactive-main);
+      outline-offset: 2px;
+    }
+
+    .popup {
+      position: absolute;
+      inset-inline-start: 0;
+      inset-block-start: calc(100% + var(--size-1));
+      z-index: 30;
+      width: var(--fs-calendar-popup-width, min(20rem, 92vw));
+      padding: var(--fs-calendar-popup-padding, var(--size-3));
+      border: 1px solid var(--semantic-field-border);
+      border-radius: var(--fs-calendar-radius, var(--size-1));
+      background: var(--semantic-page-background);
+      box-shadow: var(--semantic-shadow-overlay);
+    }
+
+    .popup[hidden] {
+      display: none;
+    }
+
+    .popup-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--size-2);
+      margin-bottom: var(--size-2);
+    }
+
+    .month-label {
+      font-size: var(--font-size-s);
+      font-weight: 700;
+      text-transform: capitalize;
+    }
+
+    .month-controls {
+      display: inline-flex;
+      gap: var(--size-1);
+    }
+
+    .month-button,
+    .day {
+      font-family: inherit;
+      border: 1px solid var(--semantic-field-border);
+      background: var(--semantic-page-background);
+      color: var(--semantic-page-foreground);
+      border-radius: var(--fs-calendar-radius, var(--size-1));
+    }
+
+    .month-button {
+      min-width: var(--fs-calendar-day-size, var(--size-8));
+      min-height: var(--fs-calendar-day-size, var(--size-8));
+      cursor: pointer;
+    }
+
+    .weekday-row,
+    .day-grid {
+      display: grid;
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+      gap: var(--size-1);
+    }
+
+    /* Ukeradene finnes for ARIA-strukturens skyld. display: contents lar
+       dagene ligge rett i rutenettet, så oppsettet er uendret. */
+    .week {
+      display: contents;
+    }
+
+    .weekday {
+      text-align: center;
+      font-size: var(--font-size-xxs);
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+      color: var(--semantic-muted-foreground);
+      padding-block: var(--size-1);
+    }
+
+    .day {
+      min-height: var(--fs-calendar-day-size, var(--size-8));
+      cursor: pointer;
+      font-size: var(--font-size-xs);
+    }
+
+    /* Dagene fra nabomåneden er dempet, men fullt klikkbare. De er altså
+       ikke deaktiverte kontroller, og må derfor ha lesbar kontrast. */
+    .day[data-outside="true"] {
+      color: var(--semantic-neutral-foreground);
+      background: var(--semantic-neutral-background);
+    }
+
+    .day[data-today="true"] {
+      border-color: var(--semantic-interactive-main);
+    }
+
+    .day[data-selected="true"] {
+      background: var(--semantic-interactive-main);
+      color: var(--semantic-interactive-contrast);
+      border-color: var(--semantic-interactive-main);
+    }
+
+    /*
+     * Høykontrast: egne farger overstyres i modusen, så valgt dag og de andre
+     * blir like. Systemfargene slipper gjennom, og Highlight med
+     * HighlightText er paret operativsystemet bruker til noe som er valgt.
+     *
+     * Merk: ingen backtick-tegn i kommentarer her. De lukker malen, og resten
+     * av fila blir lest som JavaScript.
+     */
+    @media (forced-colors: active) {
+      .day[data-selected="true"] {
+        background: Highlight;
+        color: HighlightText;
+        border-color: Highlight;
+      }
+    }
+
+    :host([disabled]) .trigger {
+      background: var(--semantic-disabled-background);
+      color: var(--semantic-disabled-foreground);
+      border-color: var(--semantic-disabled-background);
+      /* Knappen er en ekte <button disabled>; pointer-events: none ville
+         bare hindret markøren i å vises. */
+      cursor: not-allowed;
+    }
+
+    :host([trigger-hidden]) .trigger {
+      display: none;
+    }
+
+    :host([trigger-hidden]) .popup {
+      inset-block-start: var(--size-1);
+    }
+  `
+
+  /** @attr */
+  open = false
+  /** @attr */
+  disabled = false
+  /** @attr */
+  value = ""
+  /** @attr trigger-hidden */
+  triggerHidden = false
+
+  private viewMonth = getToday()
+
+  connectedCallback() {
+    super.connectedCallback()
+    this.ownerDocument.addEventListener("click", this.handleDocumentClick)
+  }
+
+  disconnectedCallback() {
+    this.ownerDocument.removeEventListener("click", this.handleDocumentClick)
+    super.disconnectedCallback()
+  }
+
+  updated(changed: Map<string, unknown>) {
+    if (changed.has("value")) {
+      this.viewMonth = parseIsoDate(this.value) ?? this.viewMonth
+    }
+  }
+
+  render() {
+    const monthCells = this.open
+      ? getCalendarCells(this.viewMonth, this.value)
+      : []
+
+    return html`
+      <button
+        class="trigger"
+        part="trigger"
+        type="button"
+        aria-label="Åpne kalender"
+        aria-expanded=${this.open ? "true" : "false"}
+        ?disabled=${this.disabled}
+        @click=${this.togglePopup}
+      >
+        📅
+      </button>
+
+      <div class="popup" part="popup" ?hidden=${!this.open} @keydown=${this.handlePopupKeydown}>
+        <div class="popup-header" part="popup-header">
+          <div class="month-label" part="month-label" aria-live="polite">${monthFormatter.format(this.viewMonth)}</div>
+          <div class="month-controls" part="month-controls">
+            <button class="month-button" part="month-button" type="button" aria-label="Forrige måned" @click=${this.goToPreviousMonth}>‹</button>
+            <button class="month-button" part="month-button" type="button" aria-label="Neste måned" @click=${this.goToNextMonth}>›</button>
+          </div>
+        </div>
+
+        <div class="weekday-row" part="weekday-row" aria-hidden="true">
+          ${[0, 1, 2, 3, 4, 5, 6].map(
+            (index) =>
+              html`<div class="weekday" part="weekday">${weekdayFormatter.format(new Date(Date.UTC(2024, 0, 1 + index)))}</div>`,
+          )}
+        </div>
+
+        <div class="day-grid" part="day-grid" role="grid" aria-label=${monthFormatter.format(this.viewMonth)}>
+          ${splitInWeeks(monthCells).map(
+            (uke) => html`
+              <div class="week" role="row">
+                ${uke.map(
+                  (cell) => html`
+                    <button
+                      class="day"
+                      part=${dayParts(cell)}
+                      type="button"
+                      role="gridcell"
+                      data-date=${cell.iso}
+                      data-outside=${String(!cell.inMonth)}
+                      data-today=${String(cell.isToday)}
+                      data-selected=${String(cell.isSelected)}
+                      aria-selected=${String(cell.isSelected)}
+                      @click=${this.selectCalendarDate}
+                    >
+                      ${cell.date.getUTCDate()}
+                    </button>
+                  `,
+                )}
+              </div>
+            `,
+          )}
+        </div>
+      </div>
+    `
+  }
+
+  openPopup() {
+    if (this.disabled) return
+    this.viewMonth = parseIsoDate(this.value) ?? getToday()
+    this.open = true
+    this.requestUpdate()
+    queueMicrotask(() => {
+      const selected = this.renderRoot.querySelector<HTMLButtonElement>(
+        `.day[data-selected="true"]`,
+      )
+      selected?.focus()
+    })
+  }
+
+  closePopup() {
+    if (!this.open) return
+
+    // Panelet skjules med [hidden]. Står fokus på en dag inne i det, mister
+    // nettleseren fokus til <body>, og en tastaturbruker havner på toppen av
+    // siden. Fokus skal derfor tilbake til knappen som åpnet panelet.
+    // Lukkes panelet fordi brukeren klikket eller tabbet ut, står fokus
+    // allerede et annet sted, og da skal vi ikke rive det til oss.
+    const fokusStoInniPanelet =
+      (this.renderRoot as ShadowRoot).activeElement !== null
+
+    this.open = false
+    this.requestUpdate()
+
+    if (fokusStoInniPanelet) {
+      queueMicrotask(() => {
+        this.renderRoot.querySelector<HTMLButtonElement>(".trigger")?.focus()
+      })
+    }
+  }
+
+  private togglePopup = () => {
+    if (this.open) {
+      this.closePopup()
+    } else {
+      this.openPopup()
+    }
+  }
+
+  private goToPreviousMonth = () => {
+    this.viewMonth = addMonths(this.viewMonth, -1)
+    this.requestUpdate()
+  }
+
+  private goToNextMonth = () => {
+    this.viewMonth = addMonths(this.viewMonth, 1)
+    this.requestUpdate()
+  }
+
+  private selectCalendarDate = (event: Event) => {
+    const target = event.currentTarget as HTMLButtonElement | null
+    const iso = target?.dataset.date
+    if (!iso) return
+
+    this.value = iso
+    this.viewMonth = parseIsoDate(iso) ?? this.viewMonth
+
+    // Lukk før hendelsene sendes. closePopup køer et mikrotaskkall som
+    // flytter fokus til knappen. En lytter som selv vil flytte fokus, slik
+    // fs-date-field gjør til inputfeltet, køer sitt etterpå og vinner.
+    this.closePopup()
+
+    this.dispatchEvent(
+      new CustomEvent("date-select", {
+        detail: { value: iso },
+        bubbles: true,
+        composed: true,
+      }),
+    )
+    this.dispatchEvent(new Event("input", { bubbles: true, composed: true }))
+    this.dispatchEvent(new Event("change", { bubbles: true, composed: true }))
+  }
+
+  private handlePopupKeydown = (event: KeyboardEvent) => {
+    if (event.key === "Escape") {
+      event.preventDefault()
+      this.closePopup()
+      return
+    }
+
+    const current = event.target as HTMLButtonElement | null
+    if (!current?.classList.contains("day")) return
+
+    const iso = current.dataset.date
+    if (!iso) return
+
+    const targetDate = parseIsoDate(iso)
+    if (!targetDate) return
+
+    let nextDate: Date | null = null
+    if (event.key === "ArrowLeft") nextDate = addDays(targetDate, -1)
+    if (event.key === "ArrowRight") nextDate = addDays(targetDate, 1)
+    if (event.key === "ArrowUp") nextDate = addDays(targetDate, -7)
+    if (event.key === "ArrowDown") nextDate = addDays(targetDate, 7)
+    if (event.key === "Home") nextDate = startOfMonth(targetDate)
+    if (event.key === "End")
+      nextDate = addDays(addMonths(startOfMonth(targetDate), 1), -1)
+
+    if (!nextDate) return
+
+    event.preventDefault()
+    this.viewMonth = startOfMonth(nextDate)
+    this.requestUpdate()
+
+    queueMicrotask(() => {
+      const nextButton = this.renderRoot.querySelector<HTMLButtonElement>(
+        `.day[data-date="${formatIsoDate(nextDate)}"]`,
+      )
+      nextButton?.focus()
+    })
+  }
+
+  private handleDocumentClick = (event: Event) => {
+    if (!this.open) return
+    const path = event.composedPath()
+    if (path.includes(this)) return
+    this.closePopup()
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "fs-calendar": FsCalendar
+  }
+}
+
+export function defineFsCalendar(tagName = FS_CALENDAR_TAG): void {
+  if (!customElements.get(tagName)) {
+    customElements.define(tagName, FsCalendar)
+  }
+}

package/src/components/frittstaende/date-field/date-field.css

@@ -0,0 +1,54 @@
+@import "../../css/label/label.css";
+@import "../../css/input/input.css";
+@import "../../css/help-text/help-text.css";
+@import "../../css/error-text/error-text.css";
+
+@layer fristil {
+  /* Oppsettet lå tidligere i style=-attributter på elementene. Inline stil
+	   slår alt en konsument kan skrive uten !important, så komponenten var i
+	   praksis låst. Her er den vanlig CSS i laget vårt, som alt annet. */
+
+  .fs-date-field__field {
+    position: relative;
+    display: inline-grid;
+    width: 100%;
+  }
+
+  /* Plass til ikonknappen inne i feltet */
+  .fs-date-field__field .fs-input {
+    padding-inline-end: var(--fs-date-field-icon-space, var(--size-10));
+  }
+
+  .fs-date-field__icon-btn {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-end: var(--size-2);
+    transform: translateY(-50%);
+    display: inline-grid;
+    place-items: center;
+    width: var(--fs-date-field-icon-size, var(--size-7));
+    height: var(--fs-date-field-icon-size, var(--size-7));
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: var(--semantic-page-foreground);
+    border-radius: var(--fs-date-field-icon-radius, var(--size-1));
+    cursor: pointer;
+  }
+
+  .fs-date-field__icon-btn:disabled {
+    color: var(--semantic-disabled-foreground);
+    cursor: not-allowed;
+  }
+
+  /* Kalenderen er et null-stort feste panelet henger under, slik at panelet
+	   ikke påvirker høyden på feltet. */
+  .fs-date-field__calendar {
+    position: absolute;
+    inset-block-start: 100%;
+    inset-inline-start: 0;
+    width: 0;
+    height: 0;
+    overflow: visible;
+  }
+}