@dep-dio/dio-designsystem 0.3.0 → 0.4.0

package/dist/styles/main.css

@@ -1564,6 +1564,9 @@ design-tokens: v1.18.0
   flex-direction: column;
   gap: var(--ds-size-6);
   max-width: 440px;
+  padding: 0;
+  border: none;
+  margin: 0;
 }
 .dio-form > h2,
 .dio-form > h3,
@@ -1686,6 +1689,22 @@ design-tokens: v1.18.0
   fill: currentcolor;
 }
 
+.spinner {
+  padding: var(--ds-size-6) var(--ds-size-4);
+  text-align: center;
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  justify-content: center;
+  flex-grow: 1;
+}
+.spinner__text {
+  margin: var(--ds-size-5) 0;
+}
+.spinner__icon {
+  margin-inline: auto;
+}
+
 .dio-timeline {
   display: flex;
   flex-direction: column;

package/dist/theme-colors.d.ts

@@ -0,0 +1,6 @@
+import type { Color as ThemeColor, SeverityColors } from "@digdir/designsystemet-types";
+export type { ThemeColor, SeverityColors };
+export type Color = ThemeColor | Exclude<SeverityColors, ThemeColor>;
+export declare const themeColors: ThemeColor[];
+export declare const severityColors: SeverityColors[];
+export declare const colors: Color[];

package/dist/web.d.ts

@@ -1,8 +1,8 @@
-import { DioCarousel } from "./carousel/Carousel";
-import { DioFeedbackBanner } from "./feedback-banner/FeedbackBanner";
-import { DioNewsAlertSubscribe } from "./news-alert-subscribe/NewsAlertSubscribe";
-import { DioSearchAutocomplete } from "./search-autocomplete/SearchAutocomplete";
-import { DioTimeline } from "./timeline/Timeline";
-import { DioToTopOfPage } from "./to-top-of-page/ToTopOfPage";
+import { DioCarousel } from "./web-components/Carousel/DioCarousel";
+import { DioFeedbackBanner } from "./web-components/FeedbackBanner/DioFeedbackBanner";
+import { DioNewsAlertSubscribe } from "./web-components/NewsAlertSubscribe/DioNewsAlertSubscribe";
+import { DioSearchAutocomplete } from "./web-components/SearchAutocomplete/DioSearchAutocomplete";
+import { DioTimeline } from "./web-components/Timeline/DioTimeline";
+import { DioToTopOfPage } from "./web-components/ToTopOfPage/DioToTopOfPage";
 import "@digdir/designsystemet-web";
 export { DioCarousel, DioFeedbackBanner, DioNewsAlertSubscribe, DioSearchAutocomplete, DioTimeline, DioToTopOfPage, };

package/dist/web.js

@@ -1,4 +1,4 @@
-// src/carousel/Carousel.ts
+// src/web-components/Carousel/DioCarousel.ts
 var DioCarousel = class extends HTMLElement {
   constructor() {
     super(...arguments);
@@ -29,7 +29,7 @@ var DioCarousel = class extends HTMLElement {
   }
 };
 
-// src/feedback-banner/FeedbackBanner.ts
+// src/web-components/FeedbackBanner/DioFeedbackBanner.ts
 var DioFeedbackBanner = class extends HTMLElement {
   connectedCallback() {
     const close = this.querySelector("[data-hide-banner]");
@@ -39,7 +39,7 @@ var DioFeedbackBanner = class extends HTMLElement {
   }
 };
 
-// src/news-alert-subscribe/NewsAlertSubscribe.ts
+// src/web-components/NewsAlertSubscribe/DioNewsAlertSubscribe.ts
 var emailRegex = /^(?!.*(?:''|\.\.))[A-Z0-9._!#$%&'*+\-/=?^`{|}~]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
 var validateEmail = (value) => emailRegex.test(value);
 var DioNewsAlertSubscribe = class extends HTMLElement {
@@ -170,7 +170,7 @@ var DioNewsAlertSubscribe = class extends HTMLElement {
   }
 };
 
-// src/search-autocomplete/SearchAutocomplete.ts
+// src/web-components/SearchAutocomplete/DioSearchAutocomplete.ts
 var DioSearchAutocomplete = class extends HTMLElement {
   #abort;
   #debounce;
@@ -264,7 +264,7 @@ var DioSearchAutocomplete = class extends HTMLElement {
   }
 };
 
-// src/timeline/Timeline.ts
+// src/web-components/Timeline/DioTimeline.ts
 var DioTimeline = class extends HTMLElement {
   connectedCallback() {
     const reverseBtn = this.querySelector("[data-toggle-reverse-timeline]");
@@ -299,7 +299,7 @@ var DioTimeline = class extends HTMLElement {
   }
 };
 
-// src/to-top-of-page/ToTopOfPage.ts
+// src/web-components/ToTopOfPage/DioToTopOfPage.ts
 var DioToTopOfPage = class extends HTMLElement {
   connectedCallback() {
     const link = this.querySelector("[data-to-top-of-page]");

package/dist/web.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../src/carousel/Carousel.ts", "../src/feedback-banner/FeedbackBanner.ts", "../src/news-alert-subscribe/NewsAlertSubscribe.ts", "../src/search-autocomplete/SearchAutocomplete.ts", "../src/timeline/Timeline.ts", "../src/to-top-of-page/ToTopOfPage.ts", "../src/web.ts"],
-  "sourcesContent": ["export class DioCarousel extends HTMLElement {\n    private current = 0\n\n    connectedCallback() {\n        const items = [...this.querySelectorAll<HTMLElement>(\"[data-carousel-item]\")]\n        const prev = this.querySelector<HTMLButtonElement>(\"[data-carousel-prev]\")\n        const next = this.querySelector<HTMLButtonElement>(\"[data-carousel-next]\")\n        const info = this.querySelector<HTMLElement>(\"[data-carousel-info-content]\")\n\n        if (!items.length) return\n\n        const show = (index: number) => {\n            this.current = (index + items.length) % items.length\n            items.forEach((item, i) => {\n                item.hidden = i !== this.current\n            })\n            if (info) {\n                const active = items[this.current]\n                const title = active.querySelector(\".dio-carousel__title\")?.textContent ?? \"\"\n                info.textContent = title\n            }\n            prev?.toggleAttribute(\"disabled\", items.length <= 1)\n            next?.toggleAttribute(\"disabled\", items.length <= 1)\n        }\n\n        prev?.addEventListener(\"click\", () => show(this.current - 1))\n        next?.addEventListener(\"click\", () => show(this.current + 1))\n        show(0)\n    }\n}\n", "export class DioFeedbackBanner extends HTMLElement {\n    connectedCallback() {\n        const close = this.querySelector<HTMLButtonElement>(\"[data-hide-banner]\")\n        close?.addEventListener(\"click\", () => {\n            this.hidden = true\n        })\n    }\n}\n", "const emailRegex = /^(?!.*(?:''|\\.\\.))[A-Z0-9._!#$%&'*+\\-/=?^`{|}~]+@[A-Z0-9.-]+\\.[A-Z]{2,}$/i\n\nconst validateEmail = (value: string): boolean => emailRegex.test(value)\n\ntype NewsAlertUi = {\n    initialView: HTMLElement | null\n    actionView: HTMLElement\n    openButton: HTMLElement\n    cancelButton: HTMLElement | null\n    okButton: HTMLElement | null\n    submitButton: HTMLElement\n    emailInput: HTMLInputElement\n    errorMessage: HTMLElement | null\n    feedbackView: HTMLElement\n    responseMessage: HTMLElement\n}\n\nexport class DioNewsAlertSubscribe extends HTMLElement {\n    #abort: AbortController | null = null\n\n    connectedCallback() {\n        if (document.readyState !== \"loading\") {\n            this.init()\n            return\n        }\n        document.addEventListener(\"DOMContentLoaded\", () => this.init(), { once: true })\n    }\n\n    init(): void {\n        if (this.hasAttribute(\"data-initialized\")) return\n\n        this.#abort?.abort()\n        const ac = new AbortController()\n        this.#abort = ac\n        const opts: AddEventListenerOptions = { signal: ac.signal }\n\n        const ui = this.#getUi()\n        const subscribeUrl = this.#getSubscribeUrl()\n\n        if (!ui || !subscribeUrl) return\n\n        const setErrorVisible = (visible: boolean): void => {\n            ui.errorMessage?.classList.toggle(\"hidden\", !visible)\n            if (visible) {\n                ui.errorMessage?.setAttribute(\"data-field\", \"validation\")\n            } else {\n                ui.errorMessage?.removeAttribute(\"data-field\")\n            }\n        }\n\n        const showInitial = (): void => {\n            ui.initialView?.classList.remove(\"hidden\")\n            ui.actionView.classList.add(\"hidden\")\n            ui.feedbackView.classList.add(\"hidden\")\n            ui.emailInput.value = \"\"\n            ui.responseMessage.textContent = \"\"\n            setErrorVisible(false)\n        }\n\n        const showAction = (): void => {\n            ui.initialView?.classList.add(\"hidden\")\n            ui.actionView.classList.remove(\"hidden\")\n            ui.feedbackView.classList.add(\"hidden\")\n            setErrorVisible(false)\n        }\n\n        const showFeedback = (message: string): void => {\n            ui.actionView.classList.add(\"hidden\")\n            ui.responseMessage.textContent = message\n            ui.feedbackView.classList.remove(\"hidden\")\n        }\n\n        ui.openButton.addEventListener(\n            \"click\",\n            () => {\n                showAction()\n                ui.emailInput.focus()\n            },\n            opts,\n        )\n\n        ui.cancelButton?.addEventListener(\n            \"click\",\n            () => {\n                showInitial()\n                ui.openButton.focus()\n            },\n            opts,\n        )\n\n        ui.okButton?.addEventListener(\"click\", showInitial, opts)\n\n        ui.emailInput.addEventListener(\n            \"keydown\",\n            (e: KeyboardEvent) => {\n                setErrorVisible(false)\n                if (e.key === \"Enter\") {\n                    e.preventDefault()\n                    ui.submitButton.click()\n                }\n            },\n            opts,\n        )\n\n        ui.submitButton.addEventListener(\n            \"click\",\n            async () => {\n                if (!validateEmail(ui.emailInput.value)) {\n                    setErrorVisible(true)\n                    return\n                }\n                const url = `${subscribeUrl}?email=${encodeURIComponent(ui.emailInput.value)}`\n                try {\n                    const res = await fetch(url, { method: \"POST\", signal: ac.signal })\n                    const text = await res.text()\n                    showFeedback(res.ok ? text : \"\")\n                } catch {\n                    if (!ac.signal.aborted) showFeedback(\"\")\n                }\n            },\n            opts,\n        )\n\n        this.setAttribute(\"data-initialized\", \"true\")\n    }\n\n    disconnectedCallback(): void {\n        this.#abort?.abort()\n        this.#abort = null\n    }\n\n    #getSubscribeUrl(): string | null {\n        const endpoint = this.dataset.newsAlertEndpoint\n        const subscribeId = this.dataset.newsAlertSubscribeId\n        if (!endpoint || !subscribeId) return null\n        return `${endpoint.replace(/\\/$/, \"\")}/${encodeURIComponent(subscribeId)}`\n    }\n\n    #getUi(): NewsAlertUi | null {\n        const actionView = this.querySelector<HTMLElement>(\"[data-action]\")\n        const openButton = this.querySelector<HTMLElement>(\"[data-open]\")\n        const submitButton = this.querySelector<HTMLButtonElement>(\"[data-submit]\")\n        const emailInput = this.querySelector<HTMLInputElement>(\"[data-email]\")\n        const feedbackView = this.querySelector<HTMLElement>(\"[data-feedback]\")\n        const responseMessage = feedbackView?.querySelector<HTMLElement>(\"[data-response]\")\n\n        if (\n            !actionView ||\n            !openButton ||\n            !submitButton ||\n            !emailInput ||\n            !feedbackView ||\n            !responseMessage\n        ) {\n            return null\n        }\n\n        return {\n            initialView: this.querySelector<HTMLElement>(\"[data-initial]\"),\n            actionView,\n            openButton,\n            cancelButton: this.querySelector<HTMLElement>(\"[data-cancel]\"),\n            okButton: this.querySelector<HTMLElement>(\"[data-ok]\"),\n            submitButton,\n            emailInput,\n            errorMessage: this.querySelector<HTMLElement>(\"[data-error]\"),\n            feedbackView,\n            responseMessage,\n        }\n    }\n}\n", "type SuggestItem = {\n    Name: string\n    Url: string\n    FormattedMetadata: string\n}\n\nexport class DioSearchAutocomplete extends HTMLElement {\n    #abort?: AbortController\n    #debounce?: ReturnType<typeof setTimeout>\n\n    connectedCallback() {\n        const input = this.querySelector<HTMLInputElement>(\"[data-search-input]\")\n        const list = this.querySelector<HTMLUListElement>(\"[data-search-suggest-list]\")\n        const panel = this.querySelector<HTMLElement>(\"[data-search-suggest]\")\n        if (!input || !list || !panel) return\n\n        const source = this.getAttribute(\"data-autocomplete-source\") ?? \"\"\n        const mockAttr = this.getAttribute(\"data-mock-suggestions\")\n        let mocks: SuggestItem[] = []\n        if (mockAttr) {\n            try {\n                const parsed = JSON.parse(mockAttr) as unknown\n                if (Array.isArray(parsed)) mocks = parsed as SuggestItem[]\n            } catch {\n                mocks = []\n            }\n        }\n        let currentTerm = \"\"\n\n        const reset = () => {\n            list.innerHTML = \"\"\n            panel.hidden = true\n            input.setAttribute(\"aria-expanded\", \"false\")\n        }\n\n        const render = (items: SuggestItem[]) => {\n            list.replaceChildren(\n                ...items.map((item) => {\n                    const li = document.createElement(\"li\")\n                    li.className = \"dio-search-autocomplete__suggest-item\"\n\n                    const a = document.createElement(\"a\")\n                    const href = item.Url.trim()\n                    a.setAttribute(\"href\", /^(?:javascript|data):/i.test(href) ? \"#\" : href)\n\n                    const title = document.createElement(\"span\")\n                    title.className = \"dio-search-autocomplete__suggest-title\"\n                    title.textContent = item.Name\n\n                    const meta = document.createElement(\"span\")\n                    meta.className = \"dio-search-autocomplete__suggest-meta\"\n                    meta.textContent = item.FormattedMetadata\n\n                    a.append(title, meta)\n                    li.append(a)\n                    return li\n                }),\n            )\n            panel.hidden = items.length === 0\n            input.setAttribute(\"aria-expanded\", String(items.length > 0))\n        }\n\n        const search = async (term: string) => {\n            if (term.length < 2) {\n                reset()\n                return\n            }\n            if (term === currentTerm) return\n            currentTerm = term\n\n            if (mocks.length) {\n                render(mocks.filter((m) => m.Name.toLowerCase().includes(term.toLowerCase())))\n                return\n            }\n\n            this.#abort?.abort()\n            this.#abort = new AbortController()\n            try {\n                const res = await fetch(`${source}${encodeURIComponent(term)}`, {\n                    signal: this.#abort.signal,\n                })\n                const data = (await res.json()) as SuggestItem[]\n                render(Array.isArray(data) ? data : [])\n            } catch {\n                if (!this.#abort.signal.aborted) reset()\n            }\n        }\n\n        input.addEventListener(\"input\", () => {\n            clearTimeout(this.#debounce)\n            this.#debounce = setTimeout(() => search(input.value), 350)\n        })\n\n        input.addEventListener(\"keydown\", (e) => {\n            if (e.key === \"Escape\") reset()\n        })\n\n        const self = this as unknown as { __dioDocClick?: (e: MouseEvent) => void }\n        if (self.__dioDocClick) document.removeEventListener(\"click\", self.__dioDocClick)\n        self.__dioDocClick = (e) => {\n            if (!this.contains(e.target as Node)) reset()\n        }\n        document.addEventListener(\"click\", self.__dioDocClick)\n    }\n\n    disconnectedCallback() {\n        const self = this as unknown as { __dioDocClick?: (e: MouseEvent) => void }\n        if (self.__dioDocClick) document.removeEventListener(\"click\", self.__dioDocClick)\n        self.__dioDocClick = undefined\n        clearTimeout(this.#debounce)\n        this.#abort?.abort()\n    }\n}\n", "export class DioTimeline extends HTMLElement {\n    connectedCallback() {\n        const reverseBtn = this.querySelector<HTMLButtonElement>(\"[data-toggle-reverse-timeline]\")\n        const expandBtn = this.querySelector<HTMLButtonElement>(\"[data-toggle-all-years]\")\n\n        reverseBtn?.addEventListener(\"click\", () => {\n            const reversed = reverseBtn.getAttribute(\"data-reversed\") === \"true\"\n            const nextReversed = !reversed\n            reverseBtn.setAttribute(\"data-reversed\", String(nextReversed))\n            const label = reverseBtn.querySelector(\"span\")\n            if (label) {\n                label.textContent = nextReversed\n                    ? (reverseBtn.getAttribute(\"data-reversed-text\") ?? \"\")\n                    : (reverseBtn.getAttribute(\"data-initial-text\") ?? \"\")\n            }\n            this.querySelectorAll<HTMLElement>(\"[data-timeline-event-list]\").forEach(\n                (eventList) => {\n                    const fragment = document.createDocumentFragment()\n                    ;[...eventList.children]\n                        .reverse()\n                        .forEach((child) => fragment.appendChild(child))\n                    eventList.appendChild(fragment)\n                },\n            )\n        })\n\n        expandBtn?.addEventListener(\"click\", () => {\n            const expanded = expandBtn.getAttribute(\"data-expanded\") === \"true\"\n            expandBtn.setAttribute(\"data-expanded\", String(!expanded))\n            const label = expandBtn.querySelector(\"span\")\n            if (label) {\n                label.textContent = expanded\n                    ? (expandBtn.getAttribute(\"data-initial-text\") ?? \"\")\n                    : (expandBtn.getAttribute(\"data-active-text\") ?? \"\")\n            }\n            this.querySelectorAll<HTMLDetailsElement>(\"[data-timeline-event]\").forEach((event) => {\n                event.open = !expanded\n            })\n        })\n    }\n}\n", "export class DioToTopOfPage extends HTMLElement {\n    connectedCallback() {\n        const link = this.querySelector<HTMLAnchorElement>(\"[data-to-top-of-page]\")\n        link?.addEventListener(\"click\", (event) => {\n            event.preventDefault()\n            window.scrollTo({ top: 0, behavior: \"smooth\" })\n        })\n    }\n}\n", "import { DioCarousel } from \"./carousel/Carousel\"\nimport { DioFeedbackBanner } from \"./feedback-banner/FeedbackBanner\"\nimport { DioNewsAlertSubscribe } from \"./news-alert-subscribe/NewsAlertSubscribe\"\nimport { DioSearchAutocomplete } from \"./search-autocomplete/SearchAutocomplete\"\nimport { DioTimeline } from \"./timeline/Timeline\"\nimport { DioToTopOfPage } from \"./to-top-of-page/ToTopOfPage\"\nimport \"@digdir/designsystemet-web\"\n\nexport {\n    DioCarousel,\n    DioFeedbackBanner,\n    DioNewsAlertSubscribe,\n    DioSearchAutocomplete,\n    DioTimeline,\n    DioToTopOfPage,\n}\n\nconst define = (name: string, ctor: CustomElementConstructor) => {\n    if (!customElements.get(name)) customElements.define(name, ctor)\n}\n\ndefine(\"dio-carousel\", DioCarousel)\ndefine(\"dio-feedback-banner\", DioFeedbackBanner)\ndefine(\"dio-news-alert-subscribe\", DioNewsAlertSubscribe)\ndefine(\"dio-search-autocomplete\", DioSearchAutocomplete)\ndefine(\"dio-timeline\", DioTimeline)\ndefine(\"dio-to-top-of-page\", DioToTopOfPage)\n"],
+  "sources": ["../src/web-components/Carousel/DioCarousel.ts", "../src/web-components/FeedbackBanner/DioFeedbackBanner.ts", "../src/web-components/NewsAlertSubscribe/DioNewsAlertSubscribe.ts", "../src/web-components/SearchAutocomplete/DioSearchAutocomplete.ts", "../src/web-components/Timeline/DioTimeline.ts", "../src/web-components/ToTopOfPage/DioToTopOfPage.ts", "../src/web.ts"],
+  "sourcesContent": ["export class DioCarousel extends HTMLElement {\n    private current = 0\n\n    connectedCallback() {\n        const items = [...this.querySelectorAll<HTMLElement>(\"[data-carousel-item]\")]\n        const prev = this.querySelector<HTMLButtonElement>(\"[data-carousel-prev]\")\n        const next = this.querySelector<HTMLButtonElement>(\"[data-carousel-next]\")\n        const info = this.querySelector<HTMLElement>(\"[data-carousel-info-content]\")\n\n        if (!items.length) return\n\n        const show = (index: number) => {\n            this.current = (index + items.length) % items.length\n            items.forEach((item, i) => {\n                item.hidden = i !== this.current\n            })\n            if (info) {\n                const active = items[this.current]\n                const title = active.querySelector(\".dio-carousel__title\")?.textContent ?? \"\"\n                info.textContent = title\n            }\n            prev?.toggleAttribute(\"disabled\", items.length <= 1)\n            next?.toggleAttribute(\"disabled\", items.length <= 1)\n        }\n\n        prev?.addEventListener(\"click\", () => show(this.current - 1))\n        next?.addEventListener(\"click\", () => show(this.current + 1))\n        show(0)\n    }\n}\n", "export class DioFeedbackBanner extends HTMLElement {\n    connectedCallback() {\n        const close = this.querySelector<HTMLButtonElement>(\"[data-hide-banner]\")\n        close?.addEventListener(\"click\", () => {\n            this.hidden = true\n        })\n    }\n}\n", "const emailRegex = /^(?!.*(?:''|\\.\\.))[A-Z0-9._!#$%&'*+\\-/=?^`{|}~]+@[A-Z0-9.-]+\\.[A-Z]{2,}$/i\n\nconst validateEmail = (value: string): boolean => emailRegex.test(value)\n\ntype NewsAlertUi = {\n    initialView: HTMLElement | null\n    actionView: HTMLElement\n    openButton: HTMLElement\n    cancelButton: HTMLElement | null\n    okButton: HTMLElement | null\n    submitButton: HTMLElement\n    emailInput: HTMLInputElement\n    errorMessage: HTMLElement | null\n    feedbackView: HTMLElement\n    responseMessage: HTMLElement\n}\n\nexport class DioNewsAlertSubscribe extends HTMLElement {\n    #abort: AbortController | null = null\n\n    connectedCallback() {\n        if (document.readyState !== \"loading\") {\n            this.init()\n            return\n        }\n        document.addEventListener(\"DOMContentLoaded\", () => this.init(), { once: true })\n    }\n\n    init(): void {\n        if (this.hasAttribute(\"data-initialized\")) return\n\n        this.#abort?.abort()\n        const ac = new AbortController()\n        this.#abort = ac\n        const opts: AddEventListenerOptions = { signal: ac.signal }\n\n        const ui = this.#getUi()\n        const subscribeUrl = this.#getSubscribeUrl()\n\n        if (!ui || !subscribeUrl) return\n\n        const setErrorVisible = (visible: boolean): void => {\n            ui.errorMessage?.classList.toggle(\"hidden\", !visible)\n            if (visible) {\n                ui.errorMessage?.setAttribute(\"data-field\", \"validation\")\n            } else {\n                ui.errorMessage?.removeAttribute(\"data-field\")\n            }\n        }\n\n        const showInitial = (): void => {\n            ui.initialView?.classList.remove(\"hidden\")\n            ui.actionView.classList.add(\"hidden\")\n            ui.feedbackView.classList.add(\"hidden\")\n            ui.emailInput.value = \"\"\n            ui.responseMessage.textContent = \"\"\n            setErrorVisible(false)\n        }\n\n        const showAction = (): void => {\n            ui.initialView?.classList.add(\"hidden\")\n            ui.actionView.classList.remove(\"hidden\")\n            ui.feedbackView.classList.add(\"hidden\")\n            setErrorVisible(false)\n        }\n\n        const showFeedback = (message: string): void => {\n            ui.actionView.classList.add(\"hidden\")\n            ui.responseMessage.textContent = message\n            ui.feedbackView.classList.remove(\"hidden\")\n        }\n\n        ui.openButton.addEventListener(\n            \"click\",\n            () => {\n                showAction()\n                ui.emailInput.focus()\n            },\n            opts,\n        )\n\n        ui.cancelButton?.addEventListener(\n            \"click\",\n            () => {\n                showInitial()\n                ui.openButton.focus()\n            },\n            opts,\n        )\n\n        ui.okButton?.addEventListener(\"click\", showInitial, opts)\n\n        ui.emailInput.addEventListener(\n            \"keydown\",\n            (e: KeyboardEvent) => {\n                setErrorVisible(false)\n                if (e.key === \"Enter\") {\n                    e.preventDefault()\n                    ui.submitButton.click()\n                }\n            },\n            opts,\n        )\n\n        ui.submitButton.addEventListener(\n            \"click\",\n            async () => {\n                if (!validateEmail(ui.emailInput.value)) {\n                    setErrorVisible(true)\n                    return\n                }\n                const url = `${subscribeUrl}?email=${encodeURIComponent(ui.emailInput.value)}`\n                try {\n                    const res = await fetch(url, { method: \"POST\", signal: ac.signal })\n                    const text = await res.text()\n                    showFeedback(res.ok ? text : \"\")\n                } catch {\n                    if (!ac.signal.aborted) showFeedback(\"\")\n                }\n            },\n            opts,\n        )\n\n        this.setAttribute(\"data-initialized\", \"true\")\n    }\n\n    disconnectedCallback(): void {\n        this.#abort?.abort()\n        this.#abort = null\n    }\n\n    #getSubscribeUrl(): string | null {\n        const endpoint = this.dataset.newsAlertEndpoint\n        const subscribeId = this.dataset.newsAlertSubscribeId\n        if (!endpoint || !subscribeId) return null\n        return `${endpoint.replace(/\\/$/, \"\")}/${encodeURIComponent(subscribeId)}`\n    }\n\n    #getUi(): NewsAlertUi | null {\n        const actionView = this.querySelector<HTMLElement>(\"[data-action]\")\n        const openButton = this.querySelector<HTMLElement>(\"[data-open]\")\n        const submitButton = this.querySelector<HTMLButtonElement>(\"[data-submit]\")\n        const emailInput = this.querySelector<HTMLInputElement>(\"[data-email]\")\n        const feedbackView = this.querySelector<HTMLElement>(\"[data-feedback]\")\n        const responseMessage = feedbackView?.querySelector<HTMLElement>(\"[data-response]\")\n\n        if (\n            !actionView ||\n            !openButton ||\n            !submitButton ||\n            !emailInput ||\n            !feedbackView ||\n            !responseMessage\n        ) {\n            return null\n        }\n\n        return {\n            initialView: this.querySelector<HTMLElement>(\"[data-initial]\"),\n            actionView,\n            openButton,\n            cancelButton: this.querySelector<HTMLElement>(\"[data-cancel]\"),\n            okButton: this.querySelector<HTMLElement>(\"[data-ok]\"),\n            submitButton,\n            emailInput,\n            errorMessage: this.querySelector<HTMLElement>(\"[data-error]\"),\n            feedbackView,\n            responseMessage,\n        }\n    }\n}\n", "type SuggestItem = {\n    Name: string\n    Url: string\n    FormattedMetadata: string\n}\n\nexport class DioSearchAutocomplete extends HTMLElement {\n    #abort?: AbortController\n    #debounce?: ReturnType<typeof setTimeout>\n\n    connectedCallback() {\n        const input = this.querySelector<HTMLInputElement>(\"[data-search-input]\")\n        const list = this.querySelector<HTMLUListElement>(\"[data-search-suggest-list]\")\n        const panel = this.querySelector<HTMLElement>(\"[data-search-suggest]\")\n        if (!input || !list || !panel) return\n\n        const source = this.getAttribute(\"data-autocomplete-source\") ?? \"\"\n        const mockAttr = this.getAttribute(\"data-mock-suggestions\")\n        let mocks: SuggestItem[] = []\n        if (mockAttr) {\n            try {\n                const parsed = JSON.parse(mockAttr) as unknown\n                if (Array.isArray(parsed)) mocks = parsed as SuggestItem[]\n            } catch {\n                mocks = []\n            }\n        }\n        let currentTerm = \"\"\n\n        const reset = () => {\n            list.innerHTML = \"\"\n            panel.hidden = true\n            input.setAttribute(\"aria-expanded\", \"false\")\n        }\n\n        const render = (items: SuggestItem[]) => {\n            list.replaceChildren(\n                ...items.map((item) => {\n                    const li = document.createElement(\"li\")\n                    li.className = \"dio-search-autocomplete__suggest-item\"\n\n                    const a = document.createElement(\"a\")\n                    const href = item.Url.trim()\n                    a.setAttribute(\"href\", /^(?:javascript|data):/i.test(href) ? \"#\" : href)\n\n                    const title = document.createElement(\"span\")\n                    title.className = \"dio-search-autocomplete__suggest-title\"\n                    title.textContent = item.Name\n\n                    const meta = document.createElement(\"span\")\n                    meta.className = \"dio-search-autocomplete__suggest-meta\"\n                    meta.textContent = item.FormattedMetadata\n\n                    a.append(title, meta)\n                    li.append(a)\n                    return li\n                }),\n            )\n            panel.hidden = items.length === 0\n            input.setAttribute(\"aria-expanded\", String(items.length > 0))\n        }\n\n        const search = async (term: string) => {\n            if (term.length < 2) {\n                reset()\n                return\n            }\n            if (term === currentTerm) return\n            currentTerm = term\n\n            if (mocks.length) {\n                render(mocks.filter((m) => m.Name.toLowerCase().includes(term.toLowerCase())))\n                return\n            }\n\n            this.#abort?.abort()\n            this.#abort = new AbortController()\n            try {\n                const res = await fetch(`${source}${encodeURIComponent(term)}`, {\n                    signal: this.#abort.signal,\n                })\n                const data = (await res.json()) as SuggestItem[]\n                render(Array.isArray(data) ? data : [])\n            } catch {\n                if (!this.#abort.signal.aborted) reset()\n            }\n        }\n\n        input.addEventListener(\"input\", () => {\n            clearTimeout(this.#debounce)\n            this.#debounce = setTimeout(() => search(input.value), 350)\n        })\n\n        input.addEventListener(\"keydown\", (e) => {\n            if (e.key === \"Escape\") reset()\n        })\n\n        const self = this as unknown as { __dioDocClick?: (e: MouseEvent) => void }\n        if (self.__dioDocClick) document.removeEventListener(\"click\", self.__dioDocClick)\n        self.__dioDocClick = (e) => {\n            if (!this.contains(e.target as Node)) reset()\n        }\n        document.addEventListener(\"click\", self.__dioDocClick)\n    }\n\n    disconnectedCallback() {\n        const self = this as unknown as { __dioDocClick?: (e: MouseEvent) => void }\n        if (self.__dioDocClick) document.removeEventListener(\"click\", self.__dioDocClick)\n        self.__dioDocClick = undefined\n        clearTimeout(this.#debounce)\n        this.#abort?.abort()\n    }\n}\n", "export class DioTimeline extends HTMLElement {\n    connectedCallback() {\n        const reverseBtn = this.querySelector<HTMLButtonElement>(\"[data-toggle-reverse-timeline]\")\n        const expandBtn = this.querySelector<HTMLButtonElement>(\"[data-toggle-all-years]\")\n\n        reverseBtn?.addEventListener(\"click\", () => {\n            const reversed = reverseBtn.getAttribute(\"data-reversed\") === \"true\"\n            const nextReversed = !reversed\n            reverseBtn.setAttribute(\"data-reversed\", String(nextReversed))\n            const label = reverseBtn.querySelector(\"span\")\n            if (label) {\n                label.textContent = nextReversed\n                    ? (reverseBtn.getAttribute(\"data-reversed-text\") ?? \"\")\n                    : (reverseBtn.getAttribute(\"data-initial-text\") ?? \"\")\n            }\n            this.querySelectorAll<HTMLElement>(\"[data-timeline-event-list]\").forEach(\n                (eventList) => {\n                    const fragment = document.createDocumentFragment()\n                    ;[...eventList.children]\n                        .reverse()\n                        .forEach((child) => fragment.appendChild(child))\n                    eventList.appendChild(fragment)\n                },\n            )\n        })\n\n        expandBtn?.addEventListener(\"click\", () => {\n            const expanded = expandBtn.getAttribute(\"data-expanded\") === \"true\"\n            expandBtn.setAttribute(\"data-expanded\", String(!expanded))\n            const label = expandBtn.querySelector(\"span\")\n            if (label) {\n                label.textContent = expanded\n                    ? (expandBtn.getAttribute(\"data-initial-text\") ?? \"\")\n                    : (expandBtn.getAttribute(\"data-active-text\") ?? \"\")\n            }\n            this.querySelectorAll<HTMLDetailsElement>(\"[data-timeline-event]\").forEach((event) => {\n                event.open = !expanded\n            })\n        })\n    }\n}\n", "export class DioToTopOfPage extends HTMLElement {\n    connectedCallback() {\n        const link = this.querySelector<HTMLAnchorElement>(\"[data-to-top-of-page]\")\n        link?.addEventListener(\"click\", (event) => {\n            event.preventDefault()\n            window.scrollTo({ top: 0, behavior: \"smooth\" })\n        })\n    }\n}\n", "import { DioCarousel } from \"./web-components/Carousel/DioCarousel\"\nimport { DioFeedbackBanner } from \"./web-components/FeedbackBanner/DioFeedbackBanner\"\nimport { DioNewsAlertSubscribe } from \"./web-components/NewsAlertSubscribe/DioNewsAlertSubscribe\"\nimport { DioSearchAutocomplete } from \"./web-components/SearchAutocomplete/DioSearchAutocomplete\"\nimport { DioTimeline } from \"./web-components/Timeline/DioTimeline\"\nimport { DioToTopOfPage } from \"./web-components/ToTopOfPage/DioToTopOfPage\"\nimport \"@digdir/designsystemet-web\"\n\nexport {\n    DioCarousel,\n    DioFeedbackBanner,\n    DioNewsAlertSubscribe,\n    DioSearchAutocomplete,\n    DioTimeline,\n    DioToTopOfPage,\n}\n\nconst define = (name: string, ctor: CustomElementConstructor) => {\n    if (!customElements.get(name)) customElements.define(name, ctor)\n}\n\ndefine(\"dio-carousel\", DioCarousel)\ndefine(\"dio-feedback-banner\", DioFeedbackBanner)\ndefine(\"dio-news-alert-subscribe\", DioNewsAlertSubscribe)\ndefine(\"dio-search-autocomplete\", DioSearchAutocomplete)\ndefine(\"dio-timeline\", DioTimeline)\ndefine(\"dio-to-top-of-page\", DioToTopOfPage)\n"],
   "mappings": ";AAAO,IAAM,cAAN,cAA0B,YAAY;AAAA,EAAtC;AAAA;AACH,SAAQ,UAAU;AAAA;AAAA,EAElB,oBAAoB;AAChB,UAAM,QAAQ,CAAC,GAAG,KAAK,iBAA8B,sBAAsB,CAAC;AAC5E,UAAM,OAAO,KAAK,cAAiC,sBAAsB;AACzE,UAAM,OAAO,KAAK,cAAiC,sBAAsB;AACzE,UAAM,OAAO,KAAK,cAA2B,8BAA8B;AAE3E,QAAI,CAAC,MAAM,OAAQ;AAEnB,UAAM,OAAO,CAAC,UAAkB;AAC5B,WAAK,WAAW,QAAQ,MAAM,UAAU,MAAM;AAC9C,YAAM,QAAQ,CAAC,MAAM,MAAM;AACvB,aAAK,SAAS,MAAM,KAAK;AAAA,MAC7B,CAAC;AACD,UAAI,MAAM;AACN,cAAM,SAAS,MAAM,KAAK,OAAO;AACjC,cAAM,QAAQ,OAAO,cAAc,sBAAsB,GAAG,eAAe;AAC3E,aAAK,cAAc;AAAA,MACvB;AACA,YAAM,gBAAgB,YAAY,MAAM,UAAU,CAAC;AACnD,YAAM,gBAAgB,YAAY,MAAM,UAAU,CAAC;AAAA,IACvD;AAEA,UAAM,iBAAiB,SAAS,MAAM,KAAK,KAAK,UAAU,CAAC,CAAC;AAC5D,UAAM,iBAAiB,SAAS,MAAM,KAAK,KAAK,UAAU,CAAC,CAAC;AAC5D,SAAK,CAAC;AAAA,EACV;AACJ;;;AC7BO,IAAM,oBAAN,cAAgC,YAAY;AAAA,EAC/C,oBAAoB;AAChB,UAAM,QAAQ,KAAK,cAAiC,oBAAoB;AACxE,WAAO,iBAAiB,SAAS,MAAM;AACnC,WAAK,SAAS;AAAA,IAClB,CAAC;AAAA,EACL;AACJ;;;ACPA,IAAM,aAAa;AAEnB,IAAM,gBAAgB,CAAC,UAA2B,WAAW,KAAK,KAAK;AAehE,IAAM,wBAAN,cAAoC,YAAY;AAAA,EACnD,SAAiC;AAAA,EAEjC,oBAAoB;AAChB,QAAI,SAAS,eAAe,WAAW;AACnC,WAAK,KAAK;AACV;AAAA,IACJ;AACA,aAAS,iBAAiB,oBAAoB,MAAM,KAAK,KAAK,GAAG,EAAE,MAAM,KAAK,CAAC;AAAA,EACnF;AAAA,EAEA,OAAa;AACT,QAAI,KAAK,aAAa,kBAAkB,EAAG;AAE3C,SAAK,QAAQ,MAAM;AACnB,UAAM,KAAK,IAAI,gBAAgB;AAC/B,SAAK,SAAS;AACd,UAAM,OAAgC,EAAE,QAAQ,GAAG,OAAO;AAE1D,UAAM,KAAK,KAAK,OAAO;AACvB,UAAM,eAAe,KAAK,iBAAiB;AAE3C,QAAI,CAAC,MAAM,CAAC,aAAc;AAE1B,UAAM,kBAAkB,CAAC,YAA2B;AAChD,SAAG,cAAc,UAAU,OAAO,UAAU,CAAC,OAAO;AACpD,UAAI,SAAS;AACT,WAAG,cAAc,aAAa,cAAc,YAAY;AAAA,MAC5D,OAAO;AACH,WAAG,cAAc,gBAAgB,YAAY;AAAA,MACjD;AAAA,IACJ;AAEA,UAAM,cAAc,MAAY;AAC5B,SAAG,aAAa,UAAU,OAAO,QAAQ;AACzC,SAAG,WAAW,UAAU,IAAI,QAAQ;AACpC,SAAG,aAAa,UAAU,IAAI,QAAQ;AACtC,SAAG,WAAW,QAAQ;AACtB,SAAG,gBAAgB,cAAc;AACjC,sBAAgB,KAAK;AAAA,IACzB;AAEA,UAAM,aAAa,MAAY;AAC3B,SAAG,aAAa,UAAU,IAAI,QAAQ;AACtC,SAAG,WAAW,UAAU,OAAO,QAAQ;AACvC,SAAG,aAAa,UAAU,IAAI,QAAQ;AACtC,sBAAgB,KAAK;AAAA,IACzB;AAEA,UAAM,eAAe,CAAC,YAA0B;AAC5C,SAAG,WAAW,UAAU,IAAI,QAAQ;AACpC,SAAG,gBAAgB,cAAc;AACjC,SAAG,aAAa,UAAU,OAAO,QAAQ;AAAA,IAC7C;AAEA,OAAG,WAAW;AAAA,MACV;AAAA,MACA,MAAM;AACF,mBAAW;AACX,WAAG,WAAW,MAAM;AAAA,MACxB;AAAA,MACA;AAAA,IACJ;AAEA,OAAG,cAAc;AAAA,MACb;AAAA,MACA,MAAM;AACF,oBAAY;AACZ,WAAG,WAAW,MAAM;AAAA,MACxB;AAAA,MACA;AAAA,IACJ;AAEA,OAAG,UAAU,iBAAiB,SAAS,aAAa,IAAI;AAExD,OAAG,WAAW;AAAA,MACV;AAAA,MACA,CAAC,MAAqB;AAClB,wBAAgB,KAAK;AACrB,YAAI,EAAE,QAAQ,SAAS;AACnB,YAAE,eAAe;AACjB,aAAG,aAAa,MAAM;AAAA,QAC1B;AAAA,MACJ;AAAA,MACA;AAAA,IACJ;AAEA,OAAG,aAAa;AAAA,MACZ;AAAA,MACA,YAAY;AACR,YAAI,CAAC,cAAc,GAAG,WAAW,KAAK,GAAG;AACrC,0BAAgB,IAAI;AACpB;AAAA,QACJ;AACA,cAAM,MAAM,GAAG,YAAY,UAAU,mBAAmB,GAAG,WAAW,KAAK,CAAC;AAC5E,YAAI;AACA,gBAAM,MAAM,MAAM,MAAM,KAAK,EAAE,QAAQ,QAAQ,QAAQ,GAAG,OAAO,CAAC;AAClE,gBAAM,OAAO,MAAM,IAAI,KAAK;AAC5B,uBAAa,IAAI,KAAK,OAAO,EAAE;AAAA,QACnC,QAAQ;AACJ,cAAI,CAAC,GAAG,OAAO,QAAS,cAAa,EAAE;AAAA,QAC3C;AAAA,MACJ;AAAA,MACA;AAAA,IACJ;AAEA,SAAK,aAAa,oBAAoB,MAAM;AAAA,EAChD;AAAA,EAEA,uBAA6B;AACzB,SAAK,QAAQ,MAAM;AACnB,SAAK,SAAS;AAAA,EAClB;AAAA,EAEA,mBAAkC;AAC9B,UAAM,WAAW,KAAK,QAAQ;AAC9B,UAAM,cAAc,KAAK,QAAQ;AACjC,QAAI,CAAC,YAAY,CAAC,YAAa,QAAO;AACtC,WAAO,GAAG,SAAS,QAAQ,OAAO,EAAE,CAAC,IAAI,mBAAmB,WAAW,CAAC;AAAA,EAC5E;AAAA,EAEA,SAA6B;AACzB,UAAM,aAAa,KAAK,cAA2B,eAAe;AAClE,UAAM,aAAa,KAAK,cAA2B,aAAa;AAChE,UAAM,eAAe,KAAK,cAAiC,eAAe;AAC1E,UAAM,aAAa,KAAK,cAAgC,cAAc;AACtE,UAAM,eAAe,KAAK,cAA2B,iBAAiB;AACtE,UAAM,kBAAkB,cAAc,cAA2B,iBAAiB;AAElF,QACI,CAAC,cACD,CAAC,cACD,CAAC,gBACD,CAAC,cACD,CAAC,gBACD,CAAC,iBACH;AACE,aAAO;AAAA,IACX;AAEA,WAAO;AAAA,MACH,aAAa,KAAK,cAA2B,gBAAgB;AAAA,MAC7D;AAAA,MACA;AAAA,MACA,cAAc,KAAK,cAA2B,eAAe;AAAA,MAC7D,UAAU,KAAK,cAA2B,WAAW;AAAA,MACrD;AAAA,MACA;AAAA,MACA,cAAc,KAAK,cAA2B,cAAc;AAAA,MAC5D;AAAA,MACA;AAAA,IACJ;AAAA,EACJ;AACJ;;;ACpKO,IAAM,wBAAN,cAAoC,YAAY;AAAA,EACnD;AAAA,EACA;AAAA,EAEA,oBAAoB;AAChB,UAAM,QAAQ,KAAK,cAAgC,qBAAqB;AACxE,UAAM,OAAO,KAAK,cAAgC,4BAA4B;AAC9E,UAAM,QAAQ,KAAK,cAA2B,uBAAuB;AACrE,QAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAO;AAE/B,UAAM,SAAS,KAAK,aAAa,0BAA0B,KAAK;AAChE,UAAM,WAAW,KAAK,aAAa,uBAAuB;AAC1D,QAAI,QAAuB,CAAC;AAC5B,QAAI,UAAU;AACV,UAAI;AACA,cAAM,SAAS,KAAK,MAAM,QAAQ;AAClC,YAAI,MAAM,QAAQ,MAAM,EAAG,SAAQ;AAAA,MACvC,QAAQ;AACJ,gBAAQ,CAAC;AAAA,MACb;AAAA,IACJ;AACA,QAAI,cAAc;AAElB,UAAM,QAAQ,MAAM;AAChB,WAAK,YAAY;AACjB,YAAM,SAAS;AACf,YAAM,aAAa,iBAAiB,OAAO;AAAA,IAC/C;AAEA,UAAM,SAAS,CAAC,UAAyB;AACrC,WAAK;AAAA,QACD,GAAG,MAAM,IAAI,CAAC,SAAS;AACnB,gBAAM,KAAK,SAAS,cAAc,IAAI;AACtC,aAAG,YAAY;AAEf,gBAAM,IAAI,SAAS,cAAc,GAAG;AACpC,gBAAM,OAAO,KAAK,IAAI,KAAK;AAC3B,YAAE,aAAa,QAAQ,yBAAyB,KAAK,IAAI,IAAI,MAAM,IAAI;AAEvE,gBAAM,QAAQ,SAAS,cAAc,MAAM;AAC3C,gBAAM,YAAY;AAClB,gBAAM,cAAc,KAAK;AAEzB,gBAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,eAAK,YAAY;AACjB,eAAK,cAAc,KAAK;AAExB,YAAE,OAAO,OAAO,IAAI;AACpB,aAAG,OAAO,CAAC;AACX,iBAAO;AAAA,QACX,CAAC;AAAA,MACL;AACA,YAAM,SAAS,MAAM,WAAW;AAChC,YAAM,aAAa,iBAAiB,OAAO,MAAM,SAAS,CAAC,CAAC;AAAA,IAChE;AAEA,UAAM,SAAS,OAAO,SAAiB;AACnC,UAAI,KAAK,SAAS,GAAG;AACjB,cAAM;AACN;AAAA,MACJ;AACA,UAAI,SAAS,YAAa;AAC1B,oBAAc;AAEd,UAAI,MAAM,QAAQ;AACd,eAAO,MAAM,OAAO,CAAC,MAAM,EAAE,KAAK,YAAY,EAAE,SAAS,KAAK,YAAY,CAAC,CAAC,CAAC;AAC7E;AAAA,MACJ;AAEA,WAAK,QAAQ,MAAM;AACnB,WAAK,SAAS,IAAI,gBAAgB;AAClC,UAAI;AACA,cAAM,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG,mBAAmB,IAAI,CAAC,IAAI;AAAA,UAC5D,QAAQ,KAAK,OAAO;AAAA,QACxB,CAAC;AACD,cAAM,OAAQ,MAAM,IAAI,KAAK;AAC7B,eAAO,MAAM,QAAQ,IAAI,IAAI,OAAO,CAAC,CAAC;AAAA,MAC1C,QAAQ;AACJ,YAAI,CAAC,KAAK,OAAO,OAAO,QAAS,OAAM;AAAA,MAC3C;AAAA,IACJ;AAEA,UAAM,iBAAiB,SAAS,MAAM;AAClC,mBAAa,KAAK,SAAS;AAC3B,WAAK,YAAY,WAAW,MAAM,OAAO,MAAM,KAAK,GAAG,GAAG;AAAA,IAC9D,CAAC;AAED,UAAM,iBAAiB,WAAW,CAAC,MAAM;AACrC,UAAI,EAAE,QAAQ,SAAU,OAAM;AAAA,IAClC,CAAC;AAED,UAAM,OAAO;AACb,QAAI,KAAK,cAAe,UAAS,oBAAoB,SAAS,KAAK,aAAa;AAChF,SAAK,gBAAgB,CAAC,MAAM;AACxB,UAAI,CAAC,KAAK,SAAS,EAAE,MAAc,EAAG,OAAM;AAAA,IAChD;AACA,aAAS,iBAAiB,SAAS,KAAK,aAAa;AAAA,EACzD;AAAA,EAEA,uBAAuB;AACnB,UAAM,OAAO;AACb,QAAI,KAAK,cAAe,UAAS,oBAAoB,SAAS,KAAK,aAAa;AAChF,SAAK,gBAAgB;AACrB,iBAAa,KAAK,SAAS;AAC3B,SAAK,QAAQ,MAAM;AAAA,EACvB;AACJ;;;AChHO,IAAM,cAAN,cAA0B,YAAY;AAAA,EACzC,oBAAoB;AAChB,UAAM,aAAa,KAAK,cAAiC,gCAAgC;AACzF,UAAM,YAAY,KAAK,cAAiC,yBAAyB;AAEjF,gBAAY,iBAAiB,SAAS,MAAM;AACxC,YAAM,WAAW,WAAW,aAAa,eAAe,MAAM;AAC9D,YAAM,eAAe,CAAC;AACtB,iBAAW,aAAa,iBAAiB,OAAO,YAAY,CAAC;AAC7D,YAAM,QAAQ,WAAW,cAAc,MAAM;AAC7C,UAAI,OAAO;AACP,cAAM,cAAc,eACb,WAAW,aAAa,oBAAoB,KAAK,KACjD,WAAW,aAAa,mBAAmB,KAAK;AAAA,MAC3D;AACA,WAAK,iBAA8B,4BAA4B,EAAE;AAAA,QAC7D,CAAC,cAAc;AACX,gBAAM,WAAW,SAAS,uBAAuB;AAChD,WAAC,GAAG,UAAU,QAAQ,EAClB,QAAQ,EACR,QAAQ,CAAC,UAAU,SAAS,YAAY,KAAK,CAAC;AACnD,oBAAU,YAAY,QAAQ;AAAA,QAClC;AAAA,MACJ;AAAA,IACJ,CAAC;AAED,eAAW,iBAAiB,SAAS,MAAM;AACvC,YAAM,WAAW,UAAU,aAAa,eAAe,MAAM;AAC7D,gBAAU,aAAa,iBAAiB,OAAO,CAAC,QAAQ,CAAC;AACzD,YAAM,QAAQ,UAAU,cAAc,MAAM;AAC5C,UAAI,OAAO;AACP,cAAM,cAAc,WACb,UAAU,aAAa,mBAAmB,KAAK,KAC/C,UAAU,aAAa,kBAAkB,KAAK;AAAA,MACzD;AACA,WAAK,iBAAqC,uBAAuB,EAAE,QAAQ,CAAC,UAAU;AAClF,cAAM,OAAO,CAAC;AAAA,MAClB,CAAC;AAAA,IACL,CAAC;AAAA,EACL;AACJ;;;ACxCO,IAAM,iBAAN,cAA6B,YAAY;AAAA,EAC5C,oBAAoB;AAChB,UAAM,OAAO,KAAK,cAAiC,uBAAuB;AAC1E,UAAM,iBAAiB,SAAS,CAAC,UAAU;AACvC,YAAM,eAAe;AACrB,aAAO,SAAS,EAAE,KAAK,GAAG,UAAU,SAAS,CAAC;AAAA,IAClD,CAAC;AAAA,EACL;AACJ;;;ACFA,OAAO;AAWP,IAAM,SAAS,CAAC,MAAc,SAAmC;AAC7D,MAAI,CAAC,eAAe,IAAI,IAAI,EAAG,gBAAe,OAAO,MAAM,IAAI;AACnE;AAEA,OAAO,gBAAgB,WAAW;AAClC,OAAO,uBAAuB,iBAAiB;AAC/C,OAAO,4BAA4B,qBAAqB;AACxD,OAAO,2BAA2B,qBAAqB;AACvD,OAAO,gBAAgB,WAAW;AAClC,OAAO,sBAAsB,cAAc;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dep-dio/dio-designsystem",
-    "version": "0.3.0",
+    "version": "0.4.0",
     "description": "DIO design system built on Designsystemet",
     "license": "MIT",
     "repository": {
@@ -28,6 +28,10 @@
             "types": "./dist/web.d.ts",
             "import": "./dist/web.js"
         },
+        "./react": {
+            "types": "./dist/react.d.ts",
+            "import": "./dist/react.js"
+        },
         "./svg-icons-register": {
             "types": "./dist/svg-icons-register.d.ts",
             "import": "./dist/svg-icons-register.js"
@@ -62,24 +66,38 @@
     },
     "dependencies": {
         "@digdir/designsystemet-css": "^1.18.0",
+        "@digdir/designsystemet-react": "^1.19.0",
         "@digdir/designsystemet-types": "^1.18.0",
         "@digdir/designsystemet-web": "^1.18.0",
-        "@navikt/aksel-icons": "^8.16.1"
+        "@navikt/aksel-icons": "^8.16.1",
+        "classnames": "^2.5.1"
     },
     "devDependencies": {
         "@digdir/designsystemet": "^1.18.0",
+        "@types/react": "^19.2.17",
+        "@types/react-dom": "^19.2.3",
         "esbuild": "^0.28.1",
         "fast-glob": "^3.3.3",
+        "react": "^19.2.8",
+        "react-dom": "^19.2.8",
         "sass": "^1.102.0",
         "typescript": "~7.0.2",
         "vite": "^8.1.5",
         "vite-plugin-svg-icons": "^2.0.1"
     },
     "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0",
         "vite": "^6.0.0 || ^7.0.0 || ^8.0.0",
         "vite-plugin-svg-icons": "^2.0.0"
     },
     "peerDependenciesMeta": {
+        "react": {
+            "optional": true
+        },
+        "react-dom": {
+            "optional": true
+        },
         "vite": {
             "optional": true
         },