@fristil/designsystem 0.2.0

package/src/components/ramme/field/fs-field.ts

@@ -0,0 +1,154 @@
+import { html, LitElement } from "lit"
+
+import { computeFieldAttributes } from "./field-core.js"
+
+export const FS_FIELD_TAG = "fs-field" as const
+
+function uniqueId(prefix: string): string {
+  return `${prefix}-${Math.random().toString(36).slice(2, 9)}`
+}
+
+export class FsField extends LitElement {
+  static properties = {
+    invalid: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    optional: { type: Boolean, reflect: true },
+    requiredMarker: { type: String, attribute: "required-marker" },
+    controlId: { type: String, attribute: "control-id" },
+    describedBy: { type: String, attribute: "described-by" },
+  }
+
+  invalid = false
+  disabled = false
+  optional = false
+  requiredMarker: "none" | "symbol" | "text" = "none"
+  controlId?: string
+  describedBy?: string
+
+  createRenderRoot() {
+    return this
+  }
+
+  render() {
+    return html`<slot @slotchange=${this.handleSlotChange}></slot>`
+  }
+
+  firstUpdated() {
+    this.syncA11y()
+  }
+
+  updated() {
+    this.syncA11y()
+  }
+
+  private handleSlotChange = () => {
+    this.syncA11y()
+  }
+
+  private syncA11y() {
+    const label = this.querySelector("label") as HTMLLabelElement | null
+    const control = this.querySelector(
+      "input:not([type='hidden']), textarea, select",
+    ) as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | null
+    const help = this.querySelector(
+      ".fs-help-text, [data-role='help']",
+    ) as HTMLElement | null
+    const error = this.querySelector(
+      ".fs-error-text, [data-role='error']",
+    ) as HTMLElement | null
+
+    if (!control) return
+
+    if (help && !help.id) help.id = uniqueId("fs-field-help")
+    if (error && !error.id) error.id = uniqueId("fs-field-error")
+
+    // Selve kontrakten regnes ut av den delte kjernen, som fs.field() også
+    // bruker. Denne komponenten gjør bare én ting utover det: å sette
+    // resultatet på elementer som allerede står i DOM-en.
+    const computed = computeFieldAttributes({
+      id: this.controlId || control.id || uniqueId("fs-field-control"),
+      help: Boolean(help),
+      error: Boolean(error),
+      helpId: help?.id,
+      errorId: error?.id,
+      required:
+        this.requiredMarker === "symbol" || this.requiredMarker === "text"
+          ? this.requiredMarker
+          : undefined,
+      optional: this.optional,
+      invalid: this.invalid,
+      disabled: this.disabled,
+      describedBy: [
+        control.getAttribute("aria-describedby") ?? "",
+        this.describedBy ?? "",
+      ].filter(Boolean),
+    })
+
+    control.id = computed.control.id
+
+    if (label) {
+      label.classList.add(computed.label.class)
+      if (!label.htmlFor) label.htmlFor = computed.label.for
+      setOrRemove(label, "data-required", computed.label["data-required"])
+      setOrRemove(label, "data-optional", computed.label["data-optional"])
+      setOrRemove(label, "aria-disabled", computed.label["aria-disabled"])
+    }
+
+    if (error) {
+      error.hidden = Boolean(computed.error.hidden)
+      error.setAttribute("aria-hidden", String(Boolean(computed.error.hidden)))
+    }
+
+    setOrRemove(
+      control,
+      "aria-describedby",
+      computed.control["aria-describedby"],
+    )
+    setOrRemove(control, "aria-invalid", computed.control["aria-invalid"])
+
+    if (this.disabled) {
+      control.setAttribute("disabled", "")
+      control.setAttribute("aria-disabled", "true")
+    } else {
+      control.removeAttribute("disabled")
+      control.removeAttribute("aria-disabled")
+    }
+
+    // data-state settes bare når konsumenten ikke har satt den selv.
+    const isSystemField =
+      control.classList.contains("fs-input") ||
+      control.classList.contains("fs-textarea") ||
+      control.classList.contains("fs-select")
+
+    const state = computed.control["data-state"]
+    if (state && isSystemField && !control.hasAttribute("data-state")) {
+      control.setAttribute("data-state", state)
+    } else if (!state && control.getAttribute("data-state") === "invalid") {
+      control.removeAttribute("data-state")
+    }
+  }
+}
+
+function setOrRemove(
+  element: HTMLElement,
+  name: string,
+  value: string | undefined,
+) {
+  if (value === undefined) {
+    element.removeAttribute(name)
+  } else {
+    element.setAttribute(name, value)
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "fs-field": FsField
+  }
+}
+
+export function defineFsField(tagName = FS_FIELD_TAG): void {
+  if (!customElements.get(tagName)) {
+    customElements.define(tagName, FsField)
+  }
+}

package/src/components/ramme/popover/fs-popover.ts

@@ -0,0 +1,205 @@
+import { html, LitElement } from "lit"
+
+export const FS_POPOVER_TAG = "fs-popover" as const
+
+export const POPOVER_CLASS = "fs-popover" as const
+
+type Placement = "bottom-start" | "bottom-end" | "top-start" | "top-end"
+
+/**
+ * Et panel som henger under en knapp, og som lukker seg selv.
+ *
+ * Panelet bruker nettleserens egen `popover`, så det havner i topplaget. Det
+ * løser tre ting som ellers krever kode: panelet legger seg over alt annet
+ * uten `z-index`, Escape lukker det, og et klikk utenfor lukker det.
+ *
+ * Det topplaget gjør ikke er å plassere panelet. `position-anchor` finnes
+ * ennå ikke i alle nettlesere, så posisjonen regnes ut her, mot knappens
+ * plass på skjermen.
+ *
+ * Du skriver knappen og innholdet selv, og komponenten kobler dem sammen:
+ *
+ * ```html
+ * <fs-popover placement="bottom-end">
+ *   <button slot="trigger" class="fs-button">Handlinger</button>
+ *   <ul class="fs-list" data-variant="plain">…</ul>
+ * </fs-popover>
+ * ```
+ */
+export class FsPopover extends LitElement {
+  static properties = {
+    open: { type: Boolean, reflect: true },
+    placement: { type: String },
+  }
+
+  /** Om panelet er åpent. Speiles, så CSS kan treffe tilstanden. */
+  open = false
+  /** Hvilken kant panelet henger fra. Standard: `bottom-start`. */
+  placement: Placement = "bottom-start"
+
+  private panel?: HTMLElement
+  private triggerElement?: HTMLElement
+
+  createRenderRoot() {
+    return this
+  }
+
+  render() {
+    return html`<slot @slotchange=${this.handleSlotChange}></slot>`
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+    window.addEventListener("resize", this.reposition)
+    window.addEventListener("scroll", this.reposition, true)
+  }
+
+  disconnectedCallback() {
+    window.removeEventListener("resize", this.reposition)
+    window.removeEventListener("scroll", this.reposition, true)
+    super.disconnectedCallback()
+  }
+
+  firstUpdated() {
+    this.sync()
+  }
+
+  updated() {
+    this.sync()
+  }
+
+  private handleSlotChange = () => {
+    this.sync()
+  }
+
+  private sync() {
+    const trigger = this.querySelector<HTMLElement>("[slot='trigger']")
+    const panel = [...this.children].find(
+      (child): child is HTMLElement =>
+        child instanceof HTMLElement &&
+        child.getAttribute("slot") !== "trigger" &&
+        child.tagName !== "SLOT",
+    )
+
+    if (!trigger || !panel) return
+
+    this.triggerElement = trigger
+    this.panel = panel
+
+    if (!panel.id) {
+      panel.id = `fs-popover-${Math.random().toString(36).slice(2, 9)}`
+    }
+
+    panel.classList.add(POPOVER_CLASS)
+    // `manual` og ikke `auto`: vi lukker selv, slik at knappen kan brukes til
+    // å lukke igjen uten at nettleseren rekker å lukke først.
+    panel.setAttribute("popover", "manual")
+
+    trigger.setAttribute("aria-expanded", String(this.open))
+    trigger.setAttribute("aria-controls", panel.id)
+
+    trigger.removeEventListener("click", this.handleTriggerClick)
+    trigger.addEventListener("click", this.handleTriggerClick)
+
+    if (this.open) {
+      if (!panel.matches(":popover-open")) panel.showPopover()
+      this.reposition()
+      document.addEventListener("click", this.handleOutsideClick, true)
+      document.addEventListener("keydown", this.handleKeydown)
+    } else {
+      if (panel.matches(":popover-open")) panel.hidePopover()
+      document.removeEventListener("click", this.handleOutsideClick, true)
+      document.removeEventListener("keydown", this.handleKeydown)
+    }
+  }
+
+  private handleTriggerClick = () => {
+    this.toggle()
+  }
+
+  private handleOutsideClick = (event: Event) => {
+    const target = event.target as Node
+    if (this.contains(target) || this.panel?.contains(target)) return
+    this.hide()
+  }
+
+  private handleKeydown = (event: KeyboardEvent) => {
+    if (event.key !== "Escape") return
+    this.hide()
+    // Fokus tilbake til knappen. Uten dette står fokus på et panel som ikke
+    // lenger finnes, og neste tastetrykk starter på toppen av siden.
+    this.triggerElement?.focus()
+  }
+
+  /** Regner ut hvor panelet skal stå, mot knappens plass på skjermen. */
+  private reposition = () => {
+    if (!this.open || !this.panel || !this.triggerElement) return
+
+    const anchor = this.triggerElement.getBoundingClientRect()
+    const panel = this.panel.getBoundingClientRect()
+    const space = 4
+
+    const below = this.placement.startsWith("bottom")
+    const alignEnd = this.placement.endsWith("end")
+
+    let top = below ? anchor.bottom + space : anchor.top - panel.height - space
+    let left = alignEnd ? anchor.right - panel.width : anchor.left
+
+    // Panelet skal ikke havne utenfor skjermen. Går det ut på siden, flyttes
+    // det inn; er det ikke plass under, legges det over knappen i stedet.
+    left = Math.max(
+      space,
+      Math.min(left, window.innerWidth - panel.width - space),
+    )
+    if (below && top + panel.height > window.innerHeight) {
+      top = Math.max(space, anchor.top - panel.height - space)
+    }
+
+    this.panel.style.setProperty("--fs-popover-top", `${Math.round(top)}px`)
+    this.panel.style.setProperty("--fs-popover-left", `${Math.round(left)}px`)
+  }
+
+  /** Åpner panelet. */
+  show() {
+    if (this.open) return
+    this.open = true
+    this.dispatchEvent(
+      new CustomEvent("popover-toggle", {
+        detail: { open: true },
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  /** Lukker panelet. */
+  hide() {
+    if (!this.open) return
+    this.open = false
+    this.dispatchEvent(
+      new CustomEvent("popover-toggle", {
+        detail: { open: false },
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  /** Åpner eller lukker. */
+  toggle() {
+    if (this.open) this.hide()
+    else this.show()
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "fs-popover": FsPopover
+  }
+}
+
+export function defineFsPopover(tagName = FS_POPOVER_TAG): void {
+  if (!customElements.get(tagName)) {
+    customElements.define(tagName, FsPopover)
+  }
+}

package/src/components/ramme/popover/popover.css

@@ -0,0 +1,34 @@
+@layer fristil {
+  fs-popover {
+    display: contents;
+  }
+
+  .fs-popover {
+    /* Panelet ligger i topplaget, så posisjonen er mot vindusruten. Verdiene
+       settes av komponenten, som regner dem ut mot knappen. */
+    position: fixed;
+    inset: auto;
+    inset-block-start: var(--fs-popover-top, 0);
+    inset-inline-start: var(--fs-popover-left, 0);
+    margin: 0;
+    box-sizing: border-box;
+    inline-size: max-content;
+    max-inline-size: var(
+      --fs-popover-width,
+      min(20rem, calc(100vw - var(--size-8)))
+    );
+    padding: var(--fs-popover-padding, 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-divider-30);
+    border-radius: var(--fs-popover-radius, var(--size-1));
+    box-shadow: var(--semantic-shadow-overlay);
+  }
+
+  .fs-popover:not(:popover-open) {
+    display: none;
+  }
+}

package/src/components/ramme/tabs/fs-tabs.ts

@@ -0,0 +1,182 @@
+import { html, LitElement } from "lit"
+
+export const FS_TABS_TAG = "fs-tabs" as const
+
+export const TABS_LIST_CLASS = "fs-tabs__list" as const
+export const TABS_PANEL_CLASS = "fs-tabs__panel" as const
+
+function uniqueId(prefix: string): string {
+  return `${prefix}-${Math.random().toString(36).slice(2, 9)}`
+}
+
+/**
+ * Kobler en rad med knapper til panelene de hører til.
+ *
+ * Du skriver knappene og panelene selv. Komponenten setter rollene, holder
+ * `aria-selected` og `aria-controls` i synk, skjuler panelene som ikke er
+ * valgt, og tar piltastene.
+ *
+ * Tastaturet er hele grunnen til at komponenten finnes. I en faneliste skal
+ * Tab hoppe forbi hele raden og inn i panelet, mens piltastene flytter mellom
+ * fanene. Et sett knapper uten denne koblingen gir én tabbestopp per fane, og
+ * skjermleseren sier «knapp» der den skulle sagt «fane, 2 av 3, valgt».
+ *
+ * ```html
+ * <fs-tabs>
+ *   <div class="fs-tabs__list">
+ *     <button>Søknaden</button>
+ *     <button>Vedlegg</button>
+ *   </div>
+ *   <div class="fs-tabs__panel">…</div>
+ *   <div class="fs-tabs__panel">…</div>
+ * </fs-tabs>
+ * ```
+ */
+export class FsTabs extends LitElement {
+  static properties = {
+    selected: { type: Number, reflect: true },
+    label: { type: String },
+  }
+
+  /** Indeksen på fanen som er valgt. */
+  selected = 0
+  /** Tekst som sier hva fanene velger mellom. Blir `aria-label` på raden. */
+  label?: string
+
+  createRenderRoot() {
+    return this
+  }
+
+  render() {
+    return html`<slot @slotchange=${this.handleSlotChange}></slot>`
+  }
+
+  firstUpdated() {
+    this.sync()
+  }
+
+  updated() {
+    this.sync()
+  }
+
+  private handleSlotChange = () => {
+    this.sync()
+  }
+
+  private get tabs(): HTMLButtonElement[] {
+    const list = this.querySelector(`.${TABS_LIST_CLASS}`)
+    return list ? [...list.querySelectorAll("button")] : []
+  }
+
+  private get panels(): HTMLElement[] {
+    return [...this.querySelectorAll<HTMLElement>(`.${TABS_PANEL_CLASS}`)]
+  }
+
+  private sync() {
+    const list = this.querySelector(`.${TABS_LIST_CLASS}`)
+    const tabs = this.tabs
+    const panels = this.panels
+
+    if (!list || tabs.length === 0) return
+
+    list.setAttribute("role", "tablist")
+    if (this.label) list.setAttribute("aria-label", this.label)
+
+    // Er `selected` satt utenfor rekkevidde, rettes den her. Ellers ville
+    // attributtet sagt noe annet enn det brukeren ser.
+    const valid = Math.min(Math.max(this.selected, 0), tabs.length - 1)
+    if (valid !== this.selected) this.selected = valid
+
+    tabs.forEach((tab, index) => {
+      const panel = panels[index]
+      if (!tab.id) tab.id = uniqueId("fs-tab")
+      if (panel && !panel.id) panel.id = uniqueId("fs-tabpanel")
+
+      const isSelected = index === valid
+
+      tab.setAttribute("role", "tab")
+      tab.setAttribute("type", "button")
+      tab.setAttribute("aria-selected", String(isSelected))
+      // Roving tabindex: bare den valgte fanen er en tabbestopp, så Tab går
+      // fra raden og rett inn i panelet.
+      tab.tabIndex = isSelected ? 0 : -1
+      if (panel) tab.setAttribute("aria-controls", panel.id)
+
+      tab.removeEventListener("click", this.handleClick)
+      tab.addEventListener("click", this.handleClick)
+      tab.removeEventListener("keydown", this.handleKeydown)
+      tab.addEventListener("keydown", this.handleKeydown)
+
+      if (panel) {
+        panel.setAttribute("role", "tabpanel")
+        panel.setAttribute("aria-labelledby", tab.id)
+        panel.hidden = !isSelected
+        // Panelet får fokus når det ikke har noe å fokusere på selv, ellers
+        // hopper Tab rett forbi innholdet som nettopp ble vist.
+        panel.tabIndex = 0
+      }
+    })
+  }
+
+  private handleClick = (event: Event) => {
+    const index = this.tabs.indexOf(event.currentTarget as HTMLButtonElement)
+    if (index >= 0) this.select(index)
+  }
+
+  private handleKeydown = (event: KeyboardEvent) => {
+    const tabs = this.tabs
+    const current = tabs.indexOf(event.currentTarget as HTMLButtonElement)
+    if (current < 0) return
+
+    const steps: Record<string, number> = {
+      ArrowRight: 1,
+      ArrowLeft: -1,
+      ArrowDown: 1,
+      ArrowUp: -1,
+    }
+
+    let next: number | undefined
+
+    if (event.key in steps) {
+      next = (current + steps[event.key] + tabs.length) % tabs.length
+    } else if (event.key === "Home") {
+      next = 0
+    } else if (event.key === "End") {
+      next = tabs.length - 1
+    }
+
+    if (next === undefined) return
+
+    event.preventDefault()
+    this.select(next)
+    tabs[next].focus()
+  }
+
+  /** Velger en fane og melder fra. */
+  select(index: number) {
+    if (index === this.selected) return
+
+    this.selected = index
+    this.sync()
+
+    this.dispatchEvent(
+      new CustomEvent("tab-select", {
+        detail: { index },
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "fs-tabs": FsTabs
+  }
+}
+
+export function defineFsTabs(tagName = FS_TABS_TAG): void {
+  if (!customElements.get(tagName)) {
+    customElements.define(tagName, FsTabs)
+  }
+}

package/src/components/ramme/tabs/tabs.css

@@ -0,0 +1,68 @@
+@layer fristil {
+  fs-tabs {
+    display: block;
+  }
+
+  .fs-tabs__list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--fs-tabs-gap, var(--size-1));
+    border-block-end: 1px solid var(--semantic-divider-30);
+  }
+
+  .fs-tabs__list button {
+    box-sizing: border-box;
+    padding: var(--fs-tabs-padding, var(--size-2) var(--size-4));
+    min-block-size: var(--size-10);
+    font-family: inherit;
+    font-size: var(--font-size-m);
+    line-height: 1.5;
+    color: var(--semantic-interactive-main);
+    background: transparent;
+    border: 0;
+    /* Streken under den valgte fanen tegnes på alle, gjennomsiktig på dem som
+       ikke er valgt. Da hopper ikke teksten når brukeren bytter fane. */
+    border-block-end: var(--size-0-5) solid transparent;
+    margin-block-end: -1px;
+    cursor: pointer;
+  }
+
+  .fs-tabs__list button:hover {
+    background: var(--semantic-interactive-background);
+  }
+
+  .fs-tabs__list button:focus-visible {
+    outline: 2px solid var(--semantic-interactive-main);
+    outline-offset: -2px;
+  }
+
+  .fs-tabs__list button[aria-selected="true"] {
+    color: var(--semantic-page-foreground);
+    font-weight: 600;
+    border-block-end-color: var(--semantic-interactive-main);
+  }
+
+  .fs-tabs__list button:disabled {
+    color: var(--semantic-disabled-foreground);
+    cursor: not-allowed;
+  }
+
+  .fs-tabs__panel {
+    padding-block-start: var(--fs-tabs-panel-space, var(--size-4));
+  }
+
+  .fs-tabs__panel:focus-visible {
+    outline: 2px solid var(--semantic-interactive-main);
+    outline-offset: 2px;
+  }
+
+  /* Høykontrast: streken under den valgte fanen tvinges til samme farge som
+     de gjennomsiktige strekene under de andre. `Highlight` slipper gjennom,
+     og gir tilbake forskjellen. */
+  @media (forced-colors: active) {
+    .fs-tabs__list button[aria-selected="true"] {
+      border-block-end-color: Highlight;
+      color: Highlight;
+    }
+  }
+}