@fristil/designsystem 0.2.0

package/dist/components/ramme/popover/fs-popover.js

@@ -0,0 +1,167 @@
+import { html, LitElement } from "lit";
+export const FS_POPOVER_TAG = "fs-popover";
+export const POPOVER_CLASS = "fs-popover";
+/**
+ * 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 {
+    constructor() {
+        super(...arguments);
+        /** Om panelet er åpent. Speiles, så CSS kan treffe tilstanden. */
+        this.open = false;
+        /** Hvilken kant panelet henger fra. Standard: `bottom-start`. */
+        this.placement = "bottom-start";
+        this.handleSlotChange = () => {
+            this.sync();
+        };
+        this.handleTriggerClick = () => {
+            this.toggle();
+        };
+        this.handleOutsideClick = (event) => {
+            const target = event.target;
+            if (this.contains(target) || this.panel?.contains(target))
+                return;
+            this.hide();
+        };
+        this.handleKeydown = (event) => {
+            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. */
+        this.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`);
+        };
+    }
+    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();
+    }
+    sync() {
+        const trigger = this.querySelector("[slot='trigger']");
+        const panel = [...this.children].find((child) => 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);
+        }
+    }
+    /** Å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();
+    }
+}
+FsPopover.properties = {
+    open: { type: Boolean, reflect: true },
+    placement: { type: String },
+};
+export function defineFsPopover(tagName = FS_POPOVER_TAG) {
+    if (!customElements.get(tagName)) {
+        customElements.define(tagName, FsPopover);
+    }
+}
+//# sourceMappingURL=fs-popover.js.map

package/dist/components/ramme/popover/fs-popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fs-popover.js","sourceRoot":"","sources":["../../../../src/components/ramme/popover/fs-popover.ts"],"names":[],"mappings":"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"}

package/dist/components/ramme/tabs/fs-tabs.d.ts

@@ -0,0 +1,61 @@
+import { LitElement } from "lit";
+export declare const FS_TABS_TAG: "fs-tabs";
+export declare const TABS_LIST_CLASS: "fs-tabs__list";
+export declare const TABS_PANEL_CLASS: "fs-tabs__panel";
+/**
+ * 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 declare class FsTabs extends LitElement {
+    static properties: {
+        selected: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+    };
+    /** Indeksen på fanen som er valgt. */
+    selected: number;
+    /** Tekst som sier hva fanene velger mellom. Blir `aria-label` på raden. */
+    label?: string;
+    createRenderRoot(): this;
+    render(): import("lit").TemplateResult<1>;
+    firstUpdated(): void;
+    updated(): void;
+    private handleSlotChange;
+    private get tabs();
+    private get panels();
+    private sync;
+    private handleClick;
+    private handleKeydown;
+    /** Velger en fane og melder fra. */
+    select(index: number): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "fs-tabs": FsTabs;
+    }
+}
+export declare function defineFsTabs(tagName?: "fs-tabs"): void;
+//# sourceMappingURL=fs-tabs.d.ts.map

package/dist/components/ramme/tabs/fs-tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fs-tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/ramme/tabs/fs-tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAA;AAEtC,eAAO,MAAM,WAAW,EAAG,SAAkB,CAAA;AAE7C,eAAO,MAAM,eAAe,EAAG,eAAwB,CAAA;AACvD,eAAO,MAAM,gBAAgB,EAAG,gBAAyB,CAAA;AAMzD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,UAAU;;;;;;;;MAGhB;IAED,sCAAsC;IACtC,QAAQ,SAAI;IACZ,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd,gBAAgB;IAIhB,MAAM;IAIN,YAAY;IAIZ,OAAO;IAIP,OAAO,CAAC,gBAAgB,CAEvB;IAED,OAAO,KAAK,IAAI,GAGf;IAED,OAAO,KAAK,MAAM,GAEjB;IAED,OAAO,CAAC,IAAI;IA8CZ,OAAO,CAAC,WAAW,CAGlB;IAED,OAAO,CAAC,aAAa,CA2BpB;IAED,oCAAoC;IACpC,MAAM,CAAC,KAAK,EAAE,MAAM;CAcrB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAA;KAClB;CACF;AAED,wBAAgB,YAAY,CAAC,OAAO,YAAc,GAAG,IAAI,CAIxD"}

package/dist/components/ramme/tabs/fs-tabs.js

@@ -0,0 +1,156 @@
+import { html, LitElement } from "lit";
+export const FS_TABS_TAG = "fs-tabs";
+export const TABS_LIST_CLASS = "fs-tabs__list";
+export const TABS_PANEL_CLASS = "fs-tabs__panel";
+function uniqueId(prefix) {
+    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 {
+    constructor() {
+        super(...arguments);
+        /** Indeksen på fanen som er valgt. */
+        this.selected = 0;
+        this.handleSlotChange = () => {
+            this.sync();
+        };
+        this.handleClick = (event) => {
+            const index = this.tabs.indexOf(event.currentTarget);
+            if (index >= 0)
+                this.select(index);
+        };
+        this.handleKeydown = (event) => {
+            const tabs = this.tabs;
+            const current = tabs.indexOf(event.currentTarget);
+            if (current < 0)
+                return;
+            const steps = {
+                ArrowRight: 1,
+                ArrowLeft: -1,
+                ArrowDown: 1,
+                ArrowUp: -1,
+            };
+            let next;
+            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();
+        };
+    }
+    createRenderRoot() {
+        return this;
+    }
+    render() {
+        return html `<slot @slotchange=${this.handleSlotChange}></slot>`;
+    }
+    firstUpdated() {
+        this.sync();
+    }
+    updated() {
+        this.sync();
+    }
+    get tabs() {
+        const list = this.querySelector(`.${TABS_LIST_CLASS}`);
+        return list ? [...list.querySelectorAll("button")] : [];
+    }
+    get panels() {
+        return [...this.querySelectorAll(`.${TABS_PANEL_CLASS}`)];
+    }
+    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;
+            }
+        });
+    }
+    /** Velger en fane og melder fra. */
+    select(index) {
+        if (index === this.selected)
+            return;
+        this.selected = index;
+        this.sync();
+        this.dispatchEvent(new CustomEvent("tab-select", {
+            detail: { index },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+}
+FsTabs.properties = {
+    selected: { type: Number, reflect: true },
+    label: { type: String },
+};
+export function defineFsTabs(tagName = FS_TABS_TAG) {
+    if (!customElements.get(tagName)) {
+        customElements.define(tagName, FsTabs);
+    }
+}
+//# sourceMappingURL=fs-tabs.js.map

package/dist/components/ramme/tabs/fs-tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fs-tabs.js","sourceRoot":"","sources":["../../../../src/components/ramme/tabs/fs-tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAEtC,MAAM,CAAC,MAAM,WAAW,GAAG,SAAkB,CAAA;AAE7C,MAAM,CAAC,MAAM,eAAe,GAAG,eAAwB,CAAA;AACvD,MAAM,CAAC,MAAM,gBAAgB,GAAG,gBAAyB,CAAA;AAEzD,SAAS,QAAQ,CAAC,MAAc;IAC9B,OAAO,GAAG,MAAM,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAA;AAC9D,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,OAAO,MAAO,SAAQ,UAAU;IAAtC;;QAME,sCAAsC;QACtC,aAAQ,GAAG,CAAC,CAAA;QAoBJ,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,IAAI,EAAE,CAAA;QACb,CAAC,CAAA;QAyDO,gBAAW,GAAG,CAAC,KAAY,EAAE,EAAE;YACrC,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,aAAkC,CAAC,CAAA;YACzE,IAAI,KAAK,IAAI,CAAC;gBAAE,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;QACpC,CAAC,CAAA;QAEO,kBAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC/C,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;YACtB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,aAAkC,CAAC,CAAA;YACtE,IAAI,OAAO,GAAG,CAAC;gBAAE,OAAM;YAEvB,MAAM,KAAK,GAA2B;gBACpC,UAAU,EAAE,CAAC;gBACb,SAAS,EAAE,CAAC,CAAC;gBACb,SAAS,EAAE,CAAC;gBACZ,OAAO,EAAE,CAAC,CAAC;aACZ,CAAA;YAED,IAAI,IAAwB,CAAA;YAE5B,IAAI,KAAK,CAAC,GAAG,IAAI,KAAK,EAAE,CAAC;gBACvB,IAAI,GAAG,CAAC,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,MAAM,CAAA;YACjE,CAAC;iBAAM,IAAI,KAAK,CAAC,GAAG,KAAK,MAAM,EAAE,CAAC;gBAChC,IAAI,GAAG,CAAC,CAAA;YACV,CAAC;iBAAM,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE,CAAC;gBAC/B,IAAI,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAA;YACxB,CAAC;YAED,IAAI,IAAI,KAAK,SAAS;gBAAE,OAAM;YAE9B,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;YACjB,IAAI,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,CAAA;QACpB,CAAC,CAAA;IAiBH,CAAC;IA5HC,gBAAgB;QACd,OAAO,IAAI,CAAA;IACb,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,qBAAqB,IAAI,CAAC,gBAAgB,UAAU,CAAA;IACjE,CAAC;IAED,YAAY;QACV,IAAI,CAAC,IAAI,EAAE,CAAA;IACb,CAAC;IAED,OAAO;QACL,IAAI,CAAC,IAAI,EAAE,CAAA;IACb,CAAC;IAMD,IAAY,IAAI;QACd,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,eAAe,EAAE,CAAC,CAAA;QACtD,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;IACzD,CAAC;IAED,IAAY,MAAM;QAChB,OAAO,CAAC,GAAG,IAAI,CAAC,gBAAgB,CAAc,IAAI,gBAAgB,EAAE,CAAC,CAAC,CAAA;IACxE,CAAC;IAEO,IAAI;QACV,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,eAAe,EAAE,CAAC,CAAA;QACtD,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;QACtB,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAA;QAE1B,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC;YAAE,OAAM;QAEtC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAA;QACpC,IAAI,IAAI,CAAC,KAAK;YAAE,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,CAAA;QAE3D,sEAAsE;QACtE,mDAAmD;QACnD,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA;QACnE,IAAI,KAAK,KAAK,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAA;QAElD,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;YAC1B,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;YAC3B,IAAI,CAAC,GAAG,CAAC,EAAE;gBAAE,GAAG,CAAC,EAAE,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAA;YACxC,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,EAAE;gBAAE,KAAK,CAAC,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAA;YAE1D,MAAM,UAAU,GAAG,KAAK,KAAK,KAAK,CAAA;YAElC,GAAG,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;YAC/B,GAAG,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;YAClC,GAAG,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC,CAAA;YACrD,sEAAsE;YACtE,mCAAmC;YACnC,GAAG,CAAC,QAAQ,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;YAClC,IAAI,KAAK;gBAAE,GAAG,CAAC,YAAY,CAAC,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,CAAA;YAEtD,GAAG,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAA;YAClD,GAAG,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAA;YAC/C,GAAG,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;YACtD,GAAG,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;YAEnD,IAAI,KAAK,EAAE,CAAC;gBACV,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;gBACtC,KAAK,CAAC,YAAY,CAAC,iBAAiB,EAAE,GAAG,CAAC,EAAE,CAAC,CAAA;gBAC7C,KAAK,CAAC,MAAM,GAAG,CAAC,UAAU,CAAA;gBAC1B,oEAAoE;gBACpE,wDAAwD;gBACxD,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAA;YACpB,CAAC;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;IAoCD,oCAAoC;IACpC,MAAM,CAAC,KAAa;QAClB,IAAI,KAAK,KAAK,IAAI,CAAC,QAAQ;YAAE,OAAM;QAEnC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAA;QACrB,IAAI,CAAC,IAAI,EAAE,CAAA;QAEX,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,YAAY,EAAE;YAC5B,MAAM,EAAE,EAAE,KAAK,EAAE;YACjB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAA;IACH,CAAC;;AArIM,iBAAU,GAAG;IAClB,QAAQ,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;IACzC,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;CACxB,AAHgB,CAGhB;AA2IH,MAAM,UAAU,YAAY,CAAC,OAAO,GAAG,WAAW;IAChD,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;QACjC,cAAc,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,CAAA;IACxC,CAAC;AACH,CAAC"}

package/dist/dom.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Å bruke attributtene på et element i vanlig DOM.
+ *
+ * I JSX sprer du objektet rett inn i elementet. Uten JSX måtte du løkke
+ * gjennom det selv, og passe på å fjerne attributter fra forrige tilstand.
+ * Går et felt fra ugyldig til gyldig, utelater byggeren `data-state`, og et
+ * `setAttribute` alene ville latt den gamle verdien bli stående.
+ */
+/**
+ * Verdiene en byggefunksjon kan sende ut.
+ *
+ * `true` og `false` er med fordi flere av dem er boolske HTML-attributter:
+ * `disabled` på en bryter, `multiple` på et filfelt, `hidden` på en
+ * feilmelding. I HTML er et slikt attributt sant så lenge det finnes, uansett
+ * verdi, så `true` settes som tom streng og `false` fjerner det.
+ */
+export type Attributes = Record<string, string | boolean | undefined>;
+/**
+ * Setter attributtene fra en `fs`-funksjon på et element.
+ *
+ * ```ts
+ * import { fs } from "@fristil/designsystem"
+ *
+ * const felt = document.querySelector("input")
+ * fs.setAttributes(felt, fs.input({ type: "email", state: "invalid" }))
+ * ```
+ *
+ * Kall den på nytt for å endre tilstand. Attributter fra forrige kall som
+ * ikke er med i det nye settet, fjernes, men bare systemets egne, og bare
+ * `fs-`-klassene. Alt annet på elementet står som det står.
+ */
+export declare function setAttributes(element: Element, attributes: Attributes): void;
+//# sourceMappingURL=dom.d.ts.map

package/dist/dom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../src/dom.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AA2BH;;;;;;;GAOG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,CAAA;AAErE;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,GAAG,IAAI,CAwB5E"}

package/dist/dom.js

@@ -0,0 +1,77 @@
+/**
+ * Å bruke attributtene på et element i vanlig DOM.
+ *
+ * I JSX sprer du objektet rett inn i elementet. Uten JSX måtte du løkke
+ * gjennom det selv, og passe på å fjerne attributter fra forrige tilstand.
+ * Går et felt fra ugyldig til gyldig, utelater byggeren `data-state`, og et
+ * `setAttribute` alene ville latt den gamle verdien bli stående.
+ */
+/**
+ * Attributtene byggerne kan sende ut.
+ *
+ * Lista er lukket, og `setAttributes` rydder bare i disse. Konsumentens egne
+ * attributter, som `data-testid` og hva det måtte være, røres ikke.
+ */
+const SYSTEM_ATTRIBUTES = [
+    "type",
+    "data-variant",
+    "data-state",
+    "data-color",
+    "data-required",
+    "data-optional",
+    "aria-invalid",
+    "aria-disabled",
+    "aria-describedby",
+    "disabled",
+    "multiple",
+    "accept",
+    "hidden",
+];
+/** Klassene systemet eier. Konsumentens egne klasser beholdes. */
+const IS_SYSTEM_CLASS = /^fs-/;
+/**
+ * Setter attributtene fra en `fs`-funksjon på et element.
+ *
+ * ```ts
+ * import { fs } from "@fristil/designsystem"
+ *
+ * const felt = document.querySelector("input")
+ * fs.setAttributes(felt, fs.input({ type: "email", state: "invalid" }))
+ * ```
+ *
+ * Kall den på nytt for å endre tilstand. Attributter fra forrige kall som
+ * ikke er med i det nye settet, fjernes, men bare systemets egne, og bare
+ * `fs-`-klassene. Alt annet på elementet står som det står.
+ */
+export function setAttributes(element, attributes) {
+    const newClass = attributes.class;
+    if (typeof newClass === "string") {
+        const ownClasses = [...element.classList].filter((klasse) => !IS_SYSTEM_CLASS.test(klasse));
+        element.className = [...new Set([...newClass.split(/\s+/), ...ownClasses])]
+            .filter(Boolean)
+            .join(" ");
+    }
+    for (const name of SYSTEM_ATTRIBUTES) {
+        setOrRemove(element, name, attributes[name]);
+    }
+    // Attributter utenfor den lukkede lista settes, men ryddes aldri bort.
+    // Systemet kan ikke vite om de er dets egne.
+    for (const [name, value] of Object.entries(attributes)) {
+        if (name === "class")
+            continue;
+        if (SYSTEM_ATTRIBUTES.includes(name))
+            continue;
+        if (value === undefined || value === false)
+            continue;
+        element.setAttribute(name, value === true ? "" : value);
+    }
+}
+function setOrRemove(element, name, value) {
+    if (value === undefined || value === false) {
+        element.removeAttribute(name);
+    }
+    else {
+        element.setAttribute(name, value === true ? "" : value);
+    }
+}
+//# sourceMappingURL=dom.js.map

package/dist/dom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom.js","sourceRoot":"","sources":["../src/dom.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;;;;GAKG;AACH,MAAM,iBAAiB,GAAG;IACxB,MAAM;IACN,cAAc;IACd,YAAY;IACZ,YAAY;IACZ,eAAe;IACf,eAAe;IACf,cAAc;IACd,eAAe;IACf,kBAAkB;IAClB,UAAU;IACV,UAAU;IACV,QAAQ;IACR,QAAQ;CACA,CAAA;AAEV,kEAAkE;AAClE,MAAM,eAAe,GAAG,MAAM,CAAA;AAY9B;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,aAAa,CAAC,OAAgB,EAAE,UAAsB;IACpE,MAAM,QAAQ,GAAG,UAAU,CAAC,KAAK,CAAA;IAEjC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE,CAAC;QACjC,MAAM,UAAU,GAAG,CAAC,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC,MAAM,CAC9C,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,CAC1C,CAAA;QACD,OAAO,CAAC,SAAS,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,GAAG,UAAU,CAAC,CAAC,CAAC;aACxE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,CAAA;IACd,CAAC;IAED,KAAK,MAAM,IAAI,IAAI,iBAAiB,EAAE,CAAC;QACrC,WAAW,CAAC,OAAO,EAAE,IAAI,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC,CAAA;IAC9C,CAAC;IAED,uEAAuE;IACvE,6CAA6C;IAC7C,KAAK,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC;QACvD,IAAI,IAAI,KAAK,OAAO;YAAE,SAAQ;QAC9B,IAAK,iBAAuC,CAAC,QAAQ,CAAC,IAAI,CAAC;YAAE,SAAQ;QACrE,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,KAAK;YAAE,SAAQ;QACpD,OAAO,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;IACzD,CAAC;AACH,CAAC;AAED,SAAS,WAAW,CAClB,OAAgB,EAChB,IAAY,EACZ,KAAmC;IAEnC,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,KAAK,EAAE,CAAC;QAC3C,OAAO,CAAC,eAAe,CAAC,IAAI,CAAC,CAAA;IAC/B,CAAC;SAAM,CAAC;QACN,OAAO,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;IACzD,CAAC;AACH,CAAC"}