@fristil/designsystem 0.2.0

package/src/components/frittstaende/date-field/fs-date-field.ts

@@ -0,0 +1,309 @@
+import { html, LitElement } from "lit"
+import { ifDefined } from "lit/directives/if-defined.js"
+import { live } from "lit/directives/live.js"
+
+import { computeFieldAttributes } from "../../ramme/field/field-core.js"
+import { defineFsCalendar } from "../calendar/fs-calendar.js"
+
+export const FS_DATE_FIELD_TAG = "fs-date-field" as const
+
+function uniqueId(prefix: string): string {
+  return `${prefix}-${Math.random().toString(36).slice(2, 9)}`
+}
+
+function isoToDisplay(iso: string): string {
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso)
+  if (!match) return iso
+  return `${match[3]}-${match[2]}-${match[1]}`
+}
+
+/** ISO-streng, eller null om teksten ikke er en dato som finnes. */
+function displayToIso(display: string): string | null {
+  const match = /^(\d{2})-(\d{2})-(\d{4})$/.exec(display)
+  if (!match) return null
+  const day = Number(match[1])
+  const month = Number(match[2])
+  const year = Number(match[3])
+  // Date.UTC ruller over ved ugyldige datoer: 32-06-2026 blir 2026-07-02
+  const date = new Date(Date.UTC(year, month - 1, day))
+  if (
+    date.getUTCFullYear() !== year ||
+    date.getUTCMonth() !== month - 1 ||
+    date.getUTCDate() !== day
+  ) {
+    return null
+  }
+  return `${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`
+}
+
+export class FsDateField extends LitElement {
+  static properties = {
+    label: { type: String },
+    value: { type: String, reflect: true },
+    name: { type: String },
+    placeholder: { type: String },
+    helpText: { type: String, attribute: "help-text" },
+    errorText: { type: String, attribute: "error-text" },
+    required: { type: Boolean, reflect: true },
+    optional: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    readonly: { type: Boolean, reflect: true },
+    invalid: { type: Boolean, reflect: true },
+    controlId: { type: String, attribute: "control-id" },
+    describedBy: { type: String, attribute: "described-by" },
+  }
+
+  label = "Dato"
+  value = ""
+  name?: string
+  placeholder = "DD-MM-YYYY"
+  helpText?: string
+  errorText?: string
+  required = false
+  optional = false
+  disabled = false
+  readonly = false
+  invalid = false
+  controlId?: string
+  describedBy?: string
+
+  /** Sann når brukeren har skrevet en dato som ikke finnes. */
+  private _inputInvalid = false
+
+  /**
+   * Teksten brukeren har skrevet, når den ikke er en gyldig dato.
+   *
+   * Halvskrevet tekst som «01-01-20» kan ikke bli til en ISO-dato, så
+   * `value` står stille mens den skrives. Uten at teksten er en del av
+   * tilstanden her, ville malen tegnet feltet tomt igjen ved neste
+   * oppdatering, og brukeren mistet det de holdt på med.
+   */
+  private _typed: string | null = null
+
+  /** Det feltet skal vise: brukerens egen tekst, ellers `value`. */
+  private get displayValue() {
+    return this._typed ?? isoToDisplay(this.value)
+  }
+
+  /**
+   * Settes `value` utenfra, er brukerens tekst ikke lenger gyldig.
+   *
+   * Det gjelder også når komponenten setter `value` selv etter at teksten
+   * ble en fullstendig dato, og det er riktig: da viser `value` det samme.
+   */
+  willUpdate(changed: Map<string, unknown>) {
+    if (changed.has("value")) this._typed = null
+  }
+
+  private readonly uid = uniqueId("fs-date-field")
+
+  constructor() {
+    super()
+    defineFsCalendar()
+  }
+
+  createRenderRoot() {
+    return this
+  }
+
+  render() {
+    const invalid = this.invalid || this._inputInvalid
+
+    // Tilgjengelighetskontrakten regnes ut ett sted, det samme som
+    // `<fs-field>` og `fs.field()` bruker. Komponenten hadde tidligere sin
+    // egen utgave av den samme logikken, og de to kunne gå fra hverandre.
+    const field = computeFieldAttributes({
+      id: this.inputId,
+      help: Boolean(this.helpText),
+      error: Boolean(this.errorText),
+      required: this.required ? "symbol" : undefined,
+      optional: this.optional,
+      invalid,
+      disabled: this.disabled,
+      describedBy: this.describedBy ? [this.describedBy] : [],
+      helpId: this.helpId,
+      errorId: this.errorId,
+    })
+
+    return html`
+      <div class="fs-date-field">
+        <label
+          class="fs-label"
+          for=${field.label.for}
+          data-required=${ifDefined(field.label["data-required"])}
+          data-optional=${ifDefined(field.label["data-optional"])}
+          aria-disabled=${ifDefined(field.label["aria-disabled"])}
+          >${this.label}</label
+        >
+        <div class="fs-date-field__field">
+          <input
+            id=${field.control.id}
+            class="fs-input"
+            type="text"
+            aria-describedby=${ifDefined(field.control["aria-describedby"])}
+            aria-invalid=${ifDefined(field.control["aria-invalid"])}
+            data-state=${ifDefined(field.control["data-state"])}
+            .value=${live(this.displayValue)}
+            name=${this.name ?? ""}
+            placeholder=${this.placeholder}
+            ?required=${this.required}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            @input=${this.handleInput}
+            @blur=${this.handleInputBlur}
+            @keydown=${this.handleInputKeydown}
+          />
+          <button
+            type="button"
+            class="fs-date-field__icon-btn"
+            aria-label="Åpne kalender"
+            tabindex="-1"
+            ?disabled=${this.disabled}
+            @click=${this.handleIconClick}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              width="1rem"
+              height="1rem"
+              aria-hidden="true"
+            >
+              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
+              <line x1="16" y1="2" x2="16" y2="6"></line>
+              <line x1="8" y1="2" x2="8" y2="6"></line>
+              <line x1="3" y1="10" x2="21" y2="10"></line>
+            </svg>
+          </button>
+          <fs-calendar
+            id=${this.calendarId}
+            .value=${this.value}
+            ?disabled=${this.disabled}
+            trigger-hidden
+            class="fs-date-field__calendar"
+            @date-select=${this.handleCalendarSelect}
+          ></fs-calendar>
+        </div>
+
+        ${this.helpText ? html`<p class="fs-help-text" id=${this.helpId}>${this.helpText}</p>` : null}
+        ${
+          this.errorText
+            ? html`<p class="fs-error-text" id=${field.error.id} ?hidden=${Boolean(field.error.hidden)}>${this.errorText}</p>`
+            : null
+        }
+      </div>
+    `
+  }
+
+  private get inputId() {
+    return this.controlId || `${this.uid}-input`
+  }
+
+  private get calendarId() {
+    return `${this.uid}-calendar`
+  }
+
+  private get helpId() {
+    return `${this.uid}-help`
+  }
+
+  private get errorId() {
+    return `${this.uid}-error`
+  }
+
+  private get inputElement() {
+    return this.querySelector(`#${this.inputId}`) as HTMLInputElement | null
+  }
+
+  private get calendarElement() {
+    return this.querySelector(`#${this.calendarId}`) as HTMLElement | null
+  }
+
+  private handleIconClick = (event: Event) => {
+    event.stopPropagation()
+    const calendar = this.calendarElement as
+      | (HTMLElement & {
+          open?: boolean
+          openPopup?: () => void
+          closePopup?: () => void
+        })
+      | null
+    if (!calendar) return
+    if (calendar.open) {
+      calendar.closePopup?.()
+    } else {
+      calendar.openPopup?.()
+    }
+  }
+
+  private handleInputKeydown = (event: KeyboardEvent) => {
+    if (event.key === " " || event.key === "ArrowDown") {
+      event.preventDefault()
+      const calendar = this.calendarElement as
+        | (HTMLElement & { openPopup?: () => void })
+        | null
+      calendar?.openPopup?.()
+    }
+  }
+
+  private handleInput = (event: Event) => {
+    const target = event.currentTarget as HTMLInputElement
+    const iso = displayToIso(target.value)
+    if (iso !== null) {
+      this._inputInvalid = false
+      this._typed = null
+      this.value = iso
+      this.requestUpdate()
+    } else {
+      this._typed = target.value
+      this.requestUpdate()
+    }
+    // Ugyldig inndata skal ikke endre this.value. Behold siste gyldige ISO.
+    this.dispatchEvent(new Event("input", { bubbles: true, composed: true }))
+    this.dispatchEvent(new Event("change", { bubbles: true, composed: true }))
+  }
+
+  private handleInputBlur = (event: FocusEvent) => {
+    const target = event.currentTarget as HTMLInputElement
+    const raw = target.value
+    if (raw === "") {
+      this._inputInvalid = false
+    } else {
+      this._inputInvalid = displayToIso(raw) === null
+    }
+    this.requestUpdate()
+  }
+
+  private handleCalendarSelect = (event: Event) => {
+    const custom = event as CustomEvent<{ value?: string }>
+    const selected = custom.detail?.value
+    if (!selected) return
+
+    this._inputInvalid = false
+    this._typed = null
+    this.value = selected
+    this.requestUpdate()
+    this.dispatchEvent(new Event("input", { bubbles: true, composed: true }))
+    this.dispatchEvent(new Event("change", { bubbles: true, composed: true }))
+
+    queueMicrotask(() => {
+      this.inputElement?.focus()
+    })
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "fs-date-field": FsDateField
+  }
+}
+
+export function defineFsDateField(tagName = FS_DATE_FIELD_TAG): void {
+  if (!customElements.get(tagName)) {
+    customElements.define(tagName, FsDateField)
+  }
+}

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

@@ -0,0 +1,333 @@
+import { html, LitElement } from "lit"
+import { ifDefined } from "lit/directives/if-defined.js"
+import { live } from "lit/directives/live.js"
+
+import { computeFieldAttributes } from "../../ramme/field/field-core.js"
+
+export const FS_SUGGESTION_TAG = "fs-suggestion" as const
+
+type Option = { value: string; label: string }
+
+/**
+ * Et tekstfelt med forslag som snevres inn mens brukeren skriver.
+ *
+ * Alternativene skrives som `<option>`-barn, slik de ville stått i en
+ * `<datalist>`. Komponenten leser dem én gang og bygger lista selv, fordi
+ * nettleserens egen `<datalist>` ikke kan styles, oppfører seg ulikt i hver
+ * nettleser, og ikke melder antall treff til skjermlesere.
+ *
+ * Feltet er et fritekstfelt, ikke en nedtrekksliste. Brukeren kan skrive noe
+ * som ikke står i lista. Skal bare gitte verdier godtas, er
+ * [Select](../../css/select/select.js) riktig.
+ *
+ * ```html
+ * <fs-suggestion label="Kommune" name="kommune">
+ *   <option>Bergen</option>
+ *   <option>Oslo</option>
+ * </fs-suggestion>
+ * ```
+ */
+export class FsSuggestion extends LitElement {
+  static properties = {
+    label: { type: String },
+    value: { type: String, reflect: true },
+    name: { type: String },
+    placeholder: { type: String },
+    helpText: { type: String, attribute: "help-text" },
+    errorText: { type: String, attribute: "error-text" },
+    invalid: { type: Boolean, reflect: true },
+    required: { type: Boolean, reflect: true },
+    optional: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    controlId: { type: String, attribute: "control-id" },
+    describedBy: { type: String, attribute: "described-by" },
+    noResultsText: { type: String, attribute: "no-results-text" },
+    open: { type: Boolean, reflect: true },
+  }
+
+  label = ""
+  value = ""
+  name?: string
+  placeholder?: string
+  helpText?: string
+  errorText?: string
+  invalid = false
+  required = false
+  optional = false
+  disabled = false
+  controlId?: string
+  describedBy?: string
+  noResultsText = "Ingen treff"
+  open = false
+
+  /** Alternativet som er markert med piltastene. */
+  private activeIndex = -1
+  private options: Option[] = []
+  private readonly uid =
+    `fs-suggestion-${Math.random().toString(36).slice(2, 9)}`
+
+  createRenderRoot() {
+    return this
+  }
+
+  private observer?: MutationObserver
+
+  connectedCallback() {
+    super.connectedCallback()
+    this.readOptions()
+    document.addEventListener("click", this.handleOutsideClick, true)
+
+    // Alternativene byttes ofte ut mens brukeren skriver, for eksempel med
+    // treff fra en server. Uten dette ville bare det første settet telt.
+    this.observer = new MutationObserver(() => {
+      if (this.querySelector("option")) {
+        this.readOptions()
+        this.requestUpdate()
+      }
+    })
+    this.observer.observe(this, { childList: true })
+  }
+
+  disconnectedCallback() {
+    document.removeEventListener("click", this.handleOutsideClick, true)
+    this.observer?.disconnect()
+    this.observer = undefined
+    super.disconnectedCallback()
+  }
+
+  /** Leser `<option>`-barna og fjerner dem fra visningen. */
+  private readOptions() {
+    const options = [...this.querySelectorAll("option")]
+    if (options.length === 0) return
+
+    this.options = options.map((option) => ({
+      value: option.value || (option.textContent ?? "").trim(),
+      label: (option.textContent ?? "").trim() || option.value,
+    }))
+
+    for (const option of options) option.remove()
+  }
+
+  /** Alternativene som passer med det som står i feltet. */
+  private get filteredOptions(): Option[] {
+    const query = this.value.trim().toLowerCase()
+    if (query === "") return this.options
+    return this.options.filter((option) =>
+      option.label.toLowerCase().includes(query),
+    )
+  }
+
+  private get inputId() {
+    return this.controlId || `${this.uid}-input`
+  }
+
+  private get listId() {
+    return `${this.uid}-list`
+  }
+
+  private get statusId() {
+    return `${this.uid}-status`
+  }
+
+  render() {
+    const field = computeFieldAttributes({
+      id: this.inputId,
+      help: Boolean(this.helpText),
+      error: Boolean(this.errorText),
+      helpId: `${this.uid}-help`,
+      errorId: `${this.uid}-error`,
+      required: this.required ? "symbol" : undefined,
+      optional: this.optional,
+      invalid: this.invalid,
+      disabled: this.disabled,
+      describedBy: [this.statusId, this.describedBy ?? ""].filter(Boolean),
+    })
+
+    const matches = this.filteredOptions
+    const open = this.open && !this.disabled
+
+    return html`
+      <label class="fs-label" for=${field.label.for}
+        data-required=${ifDefined(field.label["data-required"])}
+        data-optional=${ifDefined(field.label["data-optional"])}
+        aria-disabled=${ifDefined(field.label["aria-disabled"])}
+        >${this.label}</label
+      >
+
+      <div class="fs-suggestion__field">
+        <input
+          class="fs-input"
+          id=${field.control.id}
+          name=${ifDefined(this.name)}
+          type="text"
+          role="combobox"
+          autocomplete="off"
+          .value=${live(this.value)}
+          placeholder=${ifDefined(this.placeholder)}
+          aria-expanded=${String(open)}
+          aria-controls=${this.listId}
+          aria-autocomplete="list"
+          aria-activedescendant=${ifDefined(
+            open && this.activeIndex >= 0
+              ? `${this.uid}-option-${this.activeIndex}`
+              : undefined,
+          )}
+          aria-describedby=${ifDefined(field.control["aria-describedby"])}
+          aria-invalid=${ifDefined(field.control["aria-invalid"])}
+          data-state=${ifDefined(field.control["data-state"])}
+          ?disabled=${this.disabled}
+          @input=${this.handleInput}
+          @keydown=${this.handleKeydown}
+          @focus=${this.handleFocus}
+        />
+
+        <ul
+          class="fs-suggestion__list"
+          id=${this.listId}
+          role="listbox"
+          ?hidden=${!open}
+        >
+          ${matches.map(
+            (option, index) => html`<li
+              class="fs-suggestion__option"
+              id=${`${this.uid}-option-${index}`}
+              role="option"
+              aria-selected=${String(index === this.activeIndex)}
+              @mousedown=${(event: Event) => this.handleOptionClick(event, option)}
+            >
+              ${option.label}
+            </li>`,
+          )}
+          ${
+            matches.length === 0
+              ? html`<li class="fs-suggestion__empty" role="presentation">
+                ${this.noResultsText}
+              </li>`
+              : null
+          }
+        </ul>
+      </div>
+
+      ${
+        this.helpText
+          ? html`<p class="fs-help-text" id=${field.help.id}>${this.helpText}</p>`
+          : null
+      }
+      ${
+        this.errorText
+          ? html`<p
+            class="fs-error-text"
+            id=${field.error.id}
+            ?hidden=${Boolean(field.error.hidden)}
+          >
+            ${this.errorText}
+          </p>`
+          : null
+      }
+
+      <p class="fs-sr-only" id=${this.statusId} role="status">
+        ${open ? this.statusText(matches.length) : ""}
+      </p>
+    `
+  }
+
+  /** Antall treff, som tekst skjermleseren leser opp. */
+  private statusText(count: number): string {
+    if (count === 0) return this.noResultsText
+    return count === 1 ? "1 forslag" : `${count} forslag`
+  }
+
+  private handleFocus = () => {
+    if (!this.disabled) this.show()
+  }
+
+  private handleInput = (event: Event) => {
+    const input = event.target as HTMLInputElement
+    this.value = input.value
+    this.activeIndex = -1
+    this.show()
+  }
+
+  private handleKeydown = (event: KeyboardEvent) => {
+    const matches = this.filteredOptions
+
+    if (event.key === "Escape") {
+      event.preventDefault()
+      this.hide()
+      return
+    }
+
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault()
+      if (!this.open) this.show()
+      if (matches.length === 0) return
+
+      const step = event.key === "ArrowDown" ? 1 : -1
+      const next = this.activeIndex + step
+
+      this.activeIndex =
+        next < 0 ? matches.length - 1 : next >= matches.length ? 0 : next
+      this.requestUpdate()
+      return
+    }
+
+    if (event.key === "Enter" && this.open && this.activeIndex >= 0) {
+      event.preventDefault()
+      this.select(matches[this.activeIndex])
+    }
+  }
+
+  private handleOptionClick = (event: Event, option: Option) => {
+    // mousedown og ikke click: feltet mister ellers fokus før valget rekker
+    // å skje, og lista lukker seg med den.
+    event.preventDefault()
+    this.select(option)
+  }
+
+  private handleOutsideClick = (event: Event) => {
+    if (!this.open) return
+    if (this.contains(event.target as Node)) return
+    this.hide()
+  }
+
+  /** Velger et alternativ og melder fra. */
+  select(option: Option) {
+    this.value = option.value
+    this.hide()
+
+    const input = this.querySelector("input")
+    if (input) input.value = option.value
+
+    this.dispatchEvent(
+      new CustomEvent("suggestion-select", {
+        detail: { value: option.value, label: option.label },
+        bubbles: true,
+        composed: true,
+      }),
+    )
+    this.dispatchEvent(new Event("change", { bubbles: true }))
+  }
+
+  /** Åpner forslagslista. */
+  show() {
+    this.open = true
+  }
+
+  /** Lukker forslagslista. */
+  hide() {
+    this.open = false
+    this.activeIndex = -1
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "fs-suggestion": FsSuggestion
+  }
+}
+
+export function defineFsSuggestion(tagName = FS_SUGGESTION_TAG): void {
+  if (!customElements.get(tagName)) {
+    customElements.define(tagName, FsSuggestion)
+  }
+}

package/src/components/frittstaende/suggestion/suggestion.css

@@ -0,0 +1,63 @@
+@import "../../css/label/label.css";
+@import "../../css/input/input.css";
+@import "../../css/help-text/help-text.css";
+@import "../../css/error-text/error-text.css";
+@import "../../css/sr-only/sr-only.css";
+
+@layer fristil {
+  fs-suggestion {
+    display: block;
+  }
+
+  .fs-suggestion__field {
+    position: relative;
+    display: block;
+  }
+
+  .fs-suggestion__list {
+    position: absolute;
+    inset-inline: 0;
+    inset-block-start: calc(100% + var(--size-1));
+    z-index: 30;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    max-block-size: var(--fs-suggestion-max-height, calc(var(--size-10) * 4));
+    overflow-y: auto;
+    background: var(--semantic-page-background);
+    border: 1px solid var(--semantic-field-border);
+    border-radius: var(--fs-suggestion-radius, var(--size-1));
+    box-shadow: var(--semantic-shadow-overlay);
+  }
+
+  .fs-suggestion__list[hidden] {
+    display: none;
+  }
+
+  .fs-suggestion__option {
+    padding: var(--fs-suggestion-option-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);
+    cursor: pointer;
+  }
+
+  .fs-suggestion__option:hover {
+    background: var(--semantic-interactive-background);
+  }
+
+  /* Markeringen følger aria-selected, altså den samme opplysningen
+     skjermleseren leser. Da kan ikke det synlige og det opplesne komme i
+     utakt. */
+  .fs-suggestion__option[aria-selected="true"] {
+    background: var(--semantic-interactive-main);
+    color: var(--semantic-interactive-contrast);
+  }
+
+  .fs-suggestion__empty {
+    padding: var(--fs-suggestion-option-padding, var(--size-2) var(--size-3));
+    font-size: var(--font-size-m);
+    color: var(--semantic-muted-foreground);
+  }
+}