@fristil/designsystem 0.4.0 → 0.5.0

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

@@ -1,129 +1,90 @@
-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.
+ * Tastaturet i en fanerad.
+ *
+ * Serveren skriver rollene, `aria-controls` og `hidden` med `fs.tabs()`.
+ * Gjorde komponenten det, ville alle panelene vises til skriptet hadde kjørt,
+ * og innholdet hoppe når panelene skjulte seg selv. I en Datastar-app ville
+ * de dessuten komme tilbake ved hver patch.
  *
- * 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.
+ * Det komponenten gjør er det nettleseren ikke gjør selv: Tab hopper forbi
+ * hele raden og inn i panelet, mens piltastene flytter mellom fanene. Et sett
+ * knapper uten dette gir én tabbestopp per fane, og skjermleseren sier
+ * «knapp» der den skulle sagt «fane, 2 av 3, valgt».
  *
- * 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».
+ * Attributtene som endrer seg når brukeren velger, altså `aria-selected`,
+ * `tabindex` og `hidden`, står i `data-preserve-attr` fra byggeren.
  *
  * ```html
  * <fs-tabs>
- *   <div class="fs-tabs__list">
- *     <button>Søknaden</button>
- *     <button>Vedlegg</button>
+ *   <div class="fs-tabs__list" role="tablist">
+ *     <button id="sak-tab-0" role="tab" aria-selected="true" aria-controls="sak-panel-0"
+ *             tabindex="0" data-preserve-attr="aria-selected tabindex">Søknaden</button>
  *   </div>
- *   <div class="fs-tabs__panel">…</div>
- *   <div class="fs-tabs__panel">…</div>
+ *   <div id="sak-panel-0" class="fs-tabs__panel" role="tabpanel"
+ *        aria-labelledby="sak-tab-0" tabindex="0" data-preserve-attr="hidden">…</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()
+export class FsTabs extends HTMLElement {
+  /**
+   * Ingen attributter. Hvilken fane som er valgt står i markupen serveren
+   * sendte, som `aria-selected` på fanen og `hidden` på panelene, og leses
+   * derfra. Et eget `selected` ville vært en parallell utgave av det samme.
+   */
+  static observedAttributes: string[] = []
+
+  private readonly bound = new Set<HTMLButtonElement>()
+  private observer?: MutationObserver
+
+  connectedCallback(): void {
+    this.observer = new MutationObserver(() => this.bind())
+    this.observer.observe(this, { childList: true, subtree: true })
+    this.bind()
   }
 
-  private handleSlotChange = () => {
-    this.sync()
+  disconnectedCallback(): void {
+    this.observer?.disconnect()
+    this.observer = undefined
+    for (const tab of this.bound) {
+      tab.removeEventListener("click", this.handleClick)
+      tab.removeEventListener("keydown", this.handleKeydown)
+    }
+    this.bound.clear()
   }
 
   private get tabs(): HTMLButtonElement[] {
-    const list = this.querySelector(`.${TABS_LIST_CLASS}`)
-    return list ? [...list.querySelectorAll("button")] : []
+    return [...this.querySelectorAll<HTMLButtonElement>("[role='tab']")]
   }
 
   private get panels(): HTMLElement[] {
-    return [...this.querySelectorAll<HTMLElement>(`.${TABS_PANEL_CLASS}`)]
+    return [...this.querySelectorAll<HTMLElement>("[role='tabpanel']")]
   }
 
-  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)
+  /** Indeksen på fanen serveren har markert som valgt. */
+  get selected(): number {
+    const index = this.tabs.findIndex(
+      (tab) => tab.getAttribute("aria-selected") === "true",
+    )
+    return index < 0 ? 0 : index
+  }
 
-      tab.removeEventListener("click", this.handleClick)
+  private bind(): void {
+    for (const tab of this.tabs) {
+      if (this.bound.has(tab)) continue
       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
-      }
-    })
+      this.bound.add(tab)
+    }
   }
 
-  private handleClick = (event: Event) => {
+  private handleClick = (event: Event): void => {
     const index = this.tabs.indexOf(event.currentTarget as HTMLButtonElement)
     if (index >= 0) this.select(index)
   }
 
-  private handleKeydown = (event: KeyboardEvent) => {
+  private handleKeydown = (event: KeyboardEvent): void => {
     const tabs = this.tabs
     const current = tabs.indexOf(event.currentTarget as HTMLButtonElement)
     if (current < 0) return
@@ -153,11 +114,19 @@ export class FsTabs extends LitElement {
   }
 
   /** Velger en fane og melder fra. */
-  select(index: number) {
+  select(index: number): void {
+    const tabs = this.tabs
+    const panels = this.panels
+    if (index < 0 || index >= tabs.length) return
     if (index === this.selected) return
 
-    this.selected = index
-    this.sync()
+    tabs.forEach((tab, i) => {
+      const valgt = i === index
+      tab.setAttribute("aria-selected", String(valgt))
+      tab.tabIndex = valgt ? 0 : -1
+      const panel = panels[i]
+      if (panel) panel.hidden = !valgt
+    })
 
     this.dispatchEvent(
       new CustomEvent("tab-select", {

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

@@ -0,0 +1,104 @@
+import { attributes } from "../../css/shared.js"
+
+export const TABS_LIST_CLASS = "fs-tabs__list" as const
+export const TABS_PANEL_CLASS = "fs-tabs__panel" as const
+
+export type TabsOptions = {
+  /** Felles id-stamme. Fanene blir `${id}-tab-0`, panelene `${id}-panel-0`. */
+  id: string
+  /** Antall faner. */
+  count: number
+  /** Indeksen på fanen som er valgt. Standard: 0. */
+  selected?: number
+  /** Tekst som sier hva fanene velger mellom. Blir `aria-label` på raden. */
+  label?: string
+}
+
+export type TabsAttributes = {
+  list: {
+    class: typeof TABS_LIST_CLASS
+    role: "tablist"
+    "aria-label"?: string
+  }
+  tabs: Array<{
+    id: string
+    role: "tab"
+    type: "button"
+    "aria-selected": "true" | "false"
+    "aria-controls": string
+    tabindex: "0" | "-1"
+    "data-preserve-attr": "aria-selected tabindex"
+  }>
+  panels: Array<{
+    id: string
+    class: typeof TABS_PANEL_CLASS
+    role: "tabpanel"
+    "aria-labelledby": string
+    tabindex: "0"
+    hidden?: true
+    "data-preserve-attr": "hidden"
+  }>
+}
+
+/**
+ * Attributtene for en fanerad.
+ *
+ * Serveren skriver rollene og skjuler panelene som ikke er valgt. Gjorde
+ * komponenten det, ville alle panelene vises til skriptet hadde kjørt, og
+ * innholdet hoppe når det skjulte seg selv.
+ *
+ * ```ts
+ * const faner = fs.tabs({ id: "sak", count: 2, selected: 1, label: "Velg visning" })
+ * ```
+ */
+export const tabs = ({
+  id,
+  count,
+  selected = 0,
+  label,
+}: TabsOptions): TabsAttributes => {
+  // Er `selected` utenfor rekkevidde, rettes den her. Ellers ville markupen
+  // sagt noe annet enn det brukeren ser.
+  const valid = Math.min(Math.max(selected, 0), Math.max(count - 1, 0))
+  const tabId = (index: number) => `${id}-tab-${index}`
+  const panelId = (index: number) => `${id}-panel-${index}`
+  const indices = Array.from({ length: count }, (_, index) => index)
+
+  return {
+    list: attributes({
+      class: TABS_LIST_CLASS,
+      role: "tablist" as const,
+      "aria-label": label,
+    }),
+    tabs: indices.map((index) =>
+      attributes({
+        id: tabId(index),
+        role: "tab" as const,
+        type: "button" as const,
+        "aria-selected": (index === valid ? "true" : "false") as
+          | "true"
+          | "false",
+        "aria-controls": panelId(index),
+        // Rullerende tabindex: bare den valgte fanen er en tabbestopp, så Tab
+        // går fra raden og rett inn i panelet.
+        tabindex: (index === valid ? "0" : "-1") as "0" | "-1",
+        // Komponenten flytter valget når brukeren klikker. Morfingen ville
+        // ellers satt det tilbake til det serveren sendte.
+        "data-preserve-attr": "aria-selected tabindex" as const,
+      }),
+    ),
+    panels: indices.map((index) =>
+      attributes({
+        id: panelId(index),
+        class: TABS_PANEL_CLASS,
+        role: "tabpanel" as const,
+        "aria-labelledby": tabId(index),
+        // Panelet får fokus når det ikke har noe å fokusere på selv, ellers
+        // hopper Tab rett forbi innholdet som nettopp ble vist.
+        tabindex: "0" as const,
+        hidden: index === valid ? undefined : (true as const),
+        "data-preserve-attr": "hidden" as const,
+      }),
+    ),
+  }
+}

package/dist/components/frittstaende/calendar/fs-calendar.d.ts

@@ -1,52 +0,0 @@
-import { LitElement } from "lit";
-export declare const FS_CALENDAR_TAG: "fs-calendar";
-export declare class FsCalendar extends LitElement {
-    static properties: {
-        open: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        disabled: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        value: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        triggerHidden: {
-            type: BooleanConstructor;
-            reflect: boolean;
-            attribute: string;
-        };
-    };
-    static styles: import("lit").CSSResult;
-    /** @attr */
-    open: boolean;
-    /** @attr */
-    disabled: boolean;
-    /** @attr */
-    value: string;
-    /** @attr trigger-hidden */
-    triggerHidden: boolean;
-    private viewMonth;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    updated(changed: Map<string, unknown>): void;
-    render(): import("lit").TemplateResult<1>;
-    openPopup(): void;
-    closePopup(): void;
-    private togglePopup;
-    private goToPreviousMonth;
-    private goToNextMonth;
-    private selectCalendarDate;
-    private handlePopupKeydown;
-    private handleDocumentClick;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        "fs-calendar": FsCalendar;
-    }
-}
-export declare function defineFsCalendar(tagName?: "fs-calendar"): void;
-//# sourceMappingURL=fs-calendar.d.ts.map

package/dist/components/frittstaende/calendar/fs-calendar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"fs-calendar.d.ts","sourceRoot":"","sources":["../../../../src/components/frittstaende/calendar/fs-calendar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAA;AAE3C,eAAO,MAAM,eAAe,EAAG,aAAsB,CAAA;AAuHrD,qBAAa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;MAShB;IAED,MAAM,CAAC,MAAM,0BAqKZ;IAED,YAAY;IACZ,IAAI,UAAQ;IACZ,YAAY;IACZ,QAAQ,UAAQ;IAChB,YAAY;IACZ,KAAK,SAAK;IACV,2BAA2B;IAC3B,aAAa,UAAQ;IAErB,OAAO,CAAC,SAAS,CAAa;IAE9B,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAMrC,MAAM;IAgEN,SAAS;IAaT,UAAU;IAqBV,OAAO,CAAC,WAAW,CAMlB;IAED,OAAO,CAAC,iBAAiB,CAGxB;IAED,OAAO,CAAC,aAAa,CAGpB;IAED,OAAO,CAAC,kBAAkB,CAsBzB;IAED,OAAO,CAAC,kBAAkB,CAqCzB;IAED,OAAO,CAAC,mBAAmB,CAK1B;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAA;KAC1B;CACF;AAED,wBAAgB,gBAAgB,CAAC,OAAO,gBAAkB,GAAG,IAAI,CAIhE"}