@designsystem-se/af 36.0.1-beta.0 → 36.0.2

package/components/digi-form-error-list.js

@@ -1,7 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-a53686b3.js';
 import { r as randomIdGenerator } from './p-ffe5c0e8.js';
 import { g as FormErrorListHeadingLevel, q as NotificationAlertVariation, u as TypographyVariation } from './p-5a256d98.js';
-import { l as logger } from './p-e3d2e899.js';
 import './p-717306ef.js';
 import './p-a4a001e1.js';
 import './p-f518a4cf.js';
@@ -16,7 +15,9 @@ import './p-8142cc73.js';
 import './p-905ccb30.js';
 import './p-bc3d2778.js';
 import './p-c8429245.js';
+import './p-9a1bec0e.js';
 import './p-06625463.js';
+import './p-24fe2189.js';
 import './p-f447b984.js';
 import './p-9c5a93d8.js';
 import './p-7933b555.js';
@@ -47,20 +48,16 @@ import './p-d1886fff.js';
 import './p-a6ca40fc.js';
 import './p-b0e88537.js';
 import './p-cdcaf0eb.js';
-import { d as defineCustomElement$d } from './p-e8fc33ed.js';
-import { d as defineCustomElement$c } from './p-b08505a8.js';
-import { d as defineCustomElement$b } from './p-9bcf4599.js';
-import { d as defineCustomElement$a } from './p-82463cc2.js';
-import { d as defineCustomElement$9 } from './p-127b0f7a.js';
-import { d as defineCustomElement$8 } from './p-2a0c0c78.js';
-import { d as defineCustomElement$7 } from './p-0e6bb1ce.js';
-import { d as defineCustomElement$6 } from './p-3cbdeea5.js';
-import { d as defineCustomElement$5 } from './p-b5b891f2.js';
-import { d as defineCustomElement$4 } from './p-5c935094.js';
-import { d as defineCustomElement$3 } from './p-764c106c.js';
-import { d as defineCustomElement$2 } from './p-2f619b66.js';
+import { d as defineCustomElement$9 } from './p-e8fc33ed.js';
+import { d as defineCustomElement$8 } from './p-2b3c1022.js';
+import { d as defineCustomElement$7 } from './p-aeca0a41.js';
+import { d as defineCustomElement$6 } from './p-769dbb9e.js';
+import { d as defineCustomElement$5 } from './p-4fda15a2.js';
+import { d as defineCustomElement$4 } from './p-93899a9e.js';
+import { d as defineCustomElement$3 } from './p-cd0370eb.js';
+import { d as defineCustomElement$2 } from './p-ab9c3e15.js';
 
-const formErrorListCss = ".sc-digi-form-error-list-h{--digi--form-error-list--list--padding:var(--digi--gutter--smaller) 0 0 0;--digi--form-error-list--list--margin:0;--digi--form-error-list--item--padding:var(--digi--padding--smaller) 0 0 0;--digi--form-error-list--item--margin:0}.sc-digi-form-error-list-h .digi-form-error-list__list.sc-digi-form-error-list{list-style:none;padding:var(--digi--form-error-list--list--padding);margin:var(--digi--form-error-list--list--margin)}.sc-digi-form-error-list-h .digi-form-error-list__item.sc-digi-form-error-list{list-style:none;padding:var(--digi--form-error-list--item--padding);margin:var(--digi--form-error-list--item--margin)}";
+const formErrorListCss = ".sc-digi-form-error-list-h{--digi--form-error-list--list--padding:var(--digi--gutter--smaller) 0 0 0;--digi--form-error-list--list--margin:0;--digi--form-error-list--item--padding:var(--digi--padding--smaller) 0 0 0;--digi--form-error-list--item--margin:0}.sc-digi-form-error-list-h .digi-form-error-list.sc-digi-form-error-list ul.sc-digi-form-error-list{list-style:none;padding:var(--digi--form-error-list--list--padding);margin:var(--digi--form-error-list--list--margin)}.sc-digi-form-error-list-h .digi-form-error-list.sc-digi-form-error-list ul.sc-digi-form-error-list>li.sc-digi-form-error-list{list-style:none;padding:var(--digi--form-error-list--item--padding);margin:var(--digi--form-error-list--item--margin)}";
 const DigiFormErrorListStyle0 = formErrorListCss;
 
 const FormErrorList = /*@__PURE__*/ proxyCustomElement(class FormErrorList extends H {
@@ -84,61 +81,33 @@ const FormErrorList = /*@__PURE__*/ proxyCustomElement(class FormErrorList exten
     async afMSetHeadingFocus() {
         this.setHeadingFocus();
     }
-    componentWillLoad() {
-        this.getLinks();
-    }
-    componentWillUpdate() {
-        this.getLinks(true);
-    }
     componentDidLoad() {
         this.setHeadingFocus();
         this.afOnReady.emit();
     }
-    getLinks(update) {
-        const elements = this.hostElement.children;
-        if (!elements || elements.length <= 0) {
-            logger.warn(`The slot contains no link elements`, this.hostElement);
-            return;
-        }
-        let items;
-        if (update) {
-            items = this._observer.children;
-        }
-        else {
-            items = elements;
-        }
-        this.linkItems = [...items]
-            .filter((element) => element.tagName.toLowerCase() === 'a')
-            .map((element) => {
-            return {
-                text: element.textContent,
-                href: element.getAttribute('href') || ''
-            };
-        });
-    }
     setHeadingFocus() {
         if (this.afEnableHeadingFocus) {
             setTimeout(async () => {
-                const el = await this._notificationAlert.afMGetHeadingElement();
+                var _a;
+                const el = await ((_a = this._notificationAlert) === null || _a === void 0 ? void 0 : _a.afMGetHeadingElement());
                 !!el && el.focus();
             }, 0);
         }
     }
     clickResponse(e) {
+        const sourceEvent = e.detail;
+        const anchor = sourceEvent === null || sourceEvent === void 0 ? void 0 : sourceEvent.target;
+        if (!anchor)
+            return;
+        const href = anchor.getAttribute('href') || '';
+        const id = href.replace('#', '');
         if (this.afOverrideLink) {
             e.detail.preventDefault();
         }
-        this.afOnClickLink.emit(e);
+        this.afOnClickLink.emit({ id });
     }
     render() {
-        return (h("div", { key: 'c45799357d9c3b50ca44d7a797aea773a041875d', class: "digi-form-error-list", id: this.afId }, h("digi-notification-alert", { key: 'ac72c13d6b6a0635688a7e5e91a57db431d01670', ref: (el) => (this._notificationAlert = el), "af-heading": this.afHeading, "af-heading-level": this.afHeadingLevel, "af-variation": NotificationAlertVariation.DANGER }, this.afDescription && (h("digi-typography", { key: '25a325ab334c2304a01952d7e70786e53ebbd3cc', "af-variation": TypographyVariation.SMALL }, h("p", { key: 'aacca74ef683f0ce492c0b69283833f5c3a01069', class: "digi-form-error-list__description" }, this.afDescription))), h("ul", { key: '77f696f3aa0da40b05f89a3ebdcfeca6c0c5f44f', class: "digi-form-error-list__list" }, this.linkItems.map((item) => {
-            return (h("li", { class: "digi-form-error-list__item" }, h("digi-link-internal", { class: "digi-form-error-list__link", afHref: item.href }, item.text)));
-        }))), h("div", { key: '83ac00f6c2291855e8d3b116251068d6a7bd6bdf', hidden: true, class: "digi-form-error-list__slot" }, h("digi-util-mutation-observer", { key: '8e3dcd6e63289fa9b134b4f8e4b5632c25531847', afOptions: {
-                attributes: false,
-                childList: true,
-                subtree: true,
-                characterData: true
-            }, ref: (el) => (this._observer = el), onAfOnChange: () => this.getLinks() }, h("slot", { key: '74f36b5292a73674be3d0d866a0689c0791f6b6e' })))));
+        return (h("div", { key: '21fce283555655608307df2c622c110777ca78fc', class: "digi-form-error-list", id: this.afId }, h("digi-notification-alert", { key: '377d7dda9657fd6316fab80ec8db491c37970ce1', ref: (el) => (this._notificationAlert = el), "af-heading": this.afHeading, "af-heading-level": this.afHeadingLevel, "af-variation": NotificationAlertVariation.DANGER }, this.afDescription && (h("digi-typography", { key: '8fe62a6f8446faf2218b374f7ad5a7ba05f54424', "af-variation": TypographyVariation.SMALL }, h("p", { key: '1caa60c105eb0021b65b904229486e35ae936f77', class: "digi-form-error-list__description" }, this.afDescription))), h("slot", { key: '9dbdd2998a7223163642c78fd3b0b15537f16f78' }))));
     }
     get hostElement() { return this; }
     static get style() { return DigiFormErrorListStyle0; }
@@ -156,7 +125,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["digi-form-error-list", "digi-button", "digi-icon-chevron-right", "digi-icon-notification-error", "digi-icon-notification-info", "digi-icon-notification-succes", "digi-icon-notification-warning", "digi-icon-x", "digi-link", "digi-link-internal", "digi-notification-alert", "digi-typography", "digi-util-mutation-observer"];
+    const components = ["digi-form-error-list", "digi-button", "digi-icon-notification-error", "digi-icon-notification-info", "digi-icon-notification-succes", "digi-icon-notification-warning", "digi-icon-x", "digi-notification-alert", "digi-typography"];
     components.forEach(tagName => { switch (tagName) {
         case "digi-form-error-list":
             if (!customElements.get(tagName)) {
@@ -164,61 +133,41 @@ function defineCustomElement$1() {
             }
             break;
         case "digi-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$d();
-            }
-            break;
-        case "digi-icon-chevron-right":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$c();
-            }
-            break;
-        case "digi-icon-notification-error":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$b();
-            }
-            break;
-        case "digi-icon-notification-info":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "digi-icon-notification-succes":
             if (!customElements.get(tagName)) {
                 defineCustomElement$9();
             }
             break;
-        case "digi-icon-notification-warning":
+        case "digi-icon-notification-error":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }
             break;
-        case "digi-icon-x":
+        case "digi-icon-notification-info":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "digi-link":
+        case "digi-icon-notification-succes":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "digi-link-internal":
+        case "digi-icon-notification-warning":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "digi-notification-alert":
+        case "digi-icon-x":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "digi-typography":
+        case "digi-notification-alert":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "digi-util-mutation-observer":
+        case "digi-typography":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/components/digi-form-fieldset.d.ts

@@ -1,4 +1,4 @@
-import type { Components, JSX } from "../dist/types/components";
+import type { Components, JSX } from "../../../../libs/arbetsformedlingen/package/dist/types/components";
 
 interface DigiFormFieldset extends Components.DigiFormFieldset, HTMLElement {}
 export const DigiFormFieldset: {

package/components/digi-form-fieldset.js

@@ -1,4 +1,4 @@
-import { F as FormFieldset, d as defineCustomElement$1 } from './p-cfa81e91.js';
+import { F as FormFieldset, d as defineCustomElement$1 } from './p-5a494103.js';
 
 const DigiFormFieldset = FormFieldset;
 const defineCustomElement = defineCustomElement$1;

package/components/digi-form-file-upload.d.ts

@@ -1,4 +1,4 @@
-import type { Components, JSX } from "../dist/types/components";
+import type { Components, JSX } from "../../../../libs/arbetsformedlingen/package/dist/types/components";
 
 interface DigiFormFileUpload extends Components.DigiFormFileUpload, HTMLElement {}
 export const DigiFormFileUpload: {

package/components/digi-form-file-upload.js

@@ -1,20 +1,20 @@
 import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment } from './p-a53686b3.js';
-import { _ as _t } from './p-08cf2c0e.js';
+import { _ as _t } from './p-903a27d9.js';
 import { r as randomIdGenerator } from './p-ffe5c0e8.js';
 import { b as FormFileUploadVariation, a as FormFileUploadValidation, F as FormFileUploadHeadingLevel } from './p-905ccb30.js';
 import { U as UtilBreakpointObserverBreakpoints } from './p-cdcaf0eb.js';
 import { F as FormValidationMessageVariation } from './p-7933b555.js';
-import { d as defineCustomElement$c } from './p-71bad47e.js';
-import { d as defineCustomElement$b } from './p-ad94e4f3.js';
-import { d as defineCustomElement$a } from './p-4458129b.js';
-import { d as defineCustomElement$9 } from './p-c495f54e.js';
-import { d as defineCustomElement$8 } from './p-6013f971.js';
-import { d as defineCustomElement$7 } from './p-d14fe54d.js';
-import { d as defineCustomElement$6 } from './p-6c7ff092.js';
-import { d as defineCustomElement$5 } from './p-f516f6d6.js';
-import { d as defineCustomElement$4 } from './p-299871dc.js';
-import { d as defineCustomElement$3 } from './p-96a4c4dc.js';
-import { d as defineCustomElement$2 } from './p-f7fd3e36.js';
+import { d as defineCustomElement$c } from './p-956d730b.js';
+import { d as defineCustomElement$b } from './p-a2df4b05.js';
+import { d as defineCustomElement$a } from './p-735a4842.js';
+import { d as defineCustomElement$9 } from './p-3f4e8021.js';
+import { d as defineCustomElement$8 } from './p-a8fff2e3.js';
+import { d as defineCustomElement$7 } from './p-8195db1a.js';
+import { d as defineCustomElement$6 } from './p-31ef8371.js';
+import { d as defineCustomElement$5 } from './p-40496c3d.js';
+import { d as defineCustomElement$4 } from './p-d5b9333c.js';
+import { d as defineCustomElement$3 } from './p-060b4baf.js';
+import { d as defineCustomElement$2 } from './p-78e97002.js';
 
 const formFileUploadCss = ".sc-digi-form-file-upload-h {\n  --digi--form-file-upload--color--background--small--default: var(--digi--color--background--interactive--default--quaternary);\n  --digi--form-file-upload--color--background--small--hover: var(--digi--color--background--interactive--hover--secondary);\n  --digi--form-file-upload--color--background--medium--default: var(--digi--color--background--interactive--default--quaternary);\n  --digi--form-file-upload--color--background--medium--hover: var(--digi--color--background--interactive--hover--secondary);\n  --digi--form-file-upload--color--background--large--default: var(--digi--color--background--interactive--default--quaternary);\n  --digi--form-file-upload--color--background--large--hover: var(--digi--color--background--interactive--hover--secondary);\n  --digi--form-file-upload--color--border--small--default: var(--digi--color--border--interactive--default--on-input-nuance);\n  --digi--form-file-upload--color--border--small--hover: var(--digi--color--border--interactive--hover--primary);\n  --digi--form-file-upload--color--border--medium--default: var(--digi--color--border--interactive--default--on-input-nuance);\n  --digi--form-file-upload--color--border--medium--hover: var(--digi--color--border--interactive--hover--primary);\n  --digi--form-file-upload--color--border--large--default: var(--digi--color--border--interactive--default--on-input-nuance);\n  --digi--form-file-upload--color--border--large--hover: var(--digi--color--border--interactive--hover--primary);\n  --digi--form-file-upload--border-width--small--default: var(--digi--border-width--secondary);\n  --digi--form-file-upload--border-width--small--hover: var(--digi--border-width--primary);\n  --digi--form-file-upload--border-width--medium--default: var(--digi--border-width--secondary);\n  --digi--form-file-upload--border-width--medium--hover: var(--digi--border-width--primary);\n  --digi--form-file-upload--border-width--large--default: var(--digi--border-width--secondary);\n  --digi--form-file-upload--border-width--large--hover: var(--digi--border-width--primary);\n  --digi--form-file-upload--border-style--small--default: var(--digi--global--border-style--none);\n  --digi--form-file-upload--border-style--medium--default: var(--digi--global--border-style--dashed);\n  --digi--form-file-upload--border-style--large--default: var(--digi--global--border-style--dashed);\n  --digi--form-file-upload--border-radius--small--default: var(--digi--border-radius--secondary);\n  --digi--form-file-upload--border-radius--medium--default: var(--digi--border-radius--secondary);\n  --digi--form-file-upload--border-radius--large--default: var(--digi--border-radius--secondary);\n  --digi--form-file-upload--padding--small: var(--digi--gutter--medium) var(--digi--gutter--largest);\n  --digi--form-file-upload--padding--medium: var(--digi--gutter--medium) var(--digi--gutter--medium) var(--digi--global--spacing--largest-2) var(--digi--gutter--medium);\n  --digi--form-file-upload--padding--large: var(--digi--gutter--medium) var(--digi--gutter--medium) var(--digi--global--spacing--largest-2) var(--digi--gutter--medium);\n  --digi--form-file-upload--font-size--small: var(--digi--global--typography--font-size--small);\n  --digi--form-file-upload--font-size--medium: var(--digi--global--typography--font-size--base);\n  --digi--form-file-upload--font-size--large: var(--digi--global--typography--font-size--large);\n  --digi--form-file-upload--heading--font-family: var(--digi--global--typography--font-family--default);\n  --digi--form-file-upload--heading--font-weight: var(--digi--typography--heading-4--font-weight--desktop);\n  --digi--form-file-upload--heading--font-size: var(--digi--typography--heading-4--font-size--desktop);\n  --digi--form-file-upload--heading--font-size--large: var(--digi--typography--heading-4--font-size--desktop-large);\n  --digi--form-file-upload--font-family: var(--digi--global--typography--font-family--default);\n  --digi--form-file-upload--font-weight: var(--digi--typography--form-file-upload--font-weight--desktop);\n  --digi--form-file-upload--button-text--color--default: var(--digi--color--text--interactive--primary);\n  --digi--form-file-upload--button-text--color--hover: var(--digi--color--text--interactive--primary);\n  --digi--form-file-upload--padding--small--icon: var(--digi--global--spacing--smaller) var(--digi--global--spacing--smallest-2);\n  --digi--form-file-upload--padding--medium--icon: var(--digi--global--spacing--base) var(--digi--global--spacing--smallest-2);\n  --digi--form-file-upload--width--small: 132px;\n  --digi--form-file-upload--width--medium: 304px;\n  --digi--form-file-upload--width--large: inherit;\n  --digi--form-file-upload--border--error: var(--digi--global--border-style--solid) solid;\n  --digi--form-file-upload--border-color--error: var(--digi--color--border--interactive--validation--error);\n  --digi--form-file-upload--border--error--width: var(--digi--border-width--secondary);\n  --digi--form-file-upload--background--error: var(--digi--color--background--interactive--validation--error);\n  container-type: inline-size;\n  display: block;\n  width: 100%;\n}\n.sc-digi-form-file-upload-h a.sc-digi-form-file-upload {\n  font-weight: var(--digi--global--typography--font-weight--semibold);\n  color: var(--digi--color--text--interactive--primary);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload.sc-digi-form-file-upload {\n  font-family: var(--digi--global--typography--font-family--default);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload--small.sc-digi-form-file-upload {\n  --COLOR--BACKGROUND--FILE-LIST: var(--digi--form-file-upload--color--background--small--default);\n  --COLOR--BACKGROUND--DEFAULT: var(--digi--form-file-upload--color--background--small--default);\n  --COLOR--BACKGROUND--HOVER: var(--digi--form-file-upload--color--background--small--hover);\n  --COLOR--BORDER--DEFAULT: var(--digi--form-file-upload--color--border--small--default);\n  --COLOR--BORDER--HOVER: var(--digi--form-file-upload--color--border--small--hover);\n  --BORDER-STYLE--DEFAULT: var(--digi--form-file-upload--border-style--small--default);\n  --BORDER-RADIUS--DEFAULT: var(--digi--form-file-upload--border-radius--small--default);\n  --BORDER-WIDTH--DEFAULT: var(--digi--form-file-upload--border-width--small--default);\n  --WIDTH: var(--digi--form-file-upload--width--small);\n  --FONT-WEIGHT: var(--digi--form-file-upload--font-weight);\n  --PADDING: var(--digi--form-file-upload--padding--small);\n  --ICON--PADDING: var(--digi--form-file-upload--padding--small--icon);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload--medium.sc-digi-form-file-upload {\n  --COLOR--BACKGROUND--FILE-LIST: var(--digi--form-file-upload--color--background--small--default);\n  --COLOR--BACKGROUND--DEFAULT: var(--digi--form-file-upload--color--background--medium--default);\n  --COLOR--BACKGROUND--HOVER: var(--digi--form-file-upload--color--background--medium--hover);\n  --COLOR--BORDER--DEFAULT: var(--digi--form-file-upload--color--border--medium--default);\n  --COLOR--BORDER--HOVER: var(--digi--form-file-upload--color--border--medium--hover);\n  --BORDER-STYLE--DEFAULT: var(--digi--form-file-upload--border-style--medium--default);\n  --BORDER-RADIUS--DEFAULT: var(--digi--form-file-upload--border-radius--medium--default);\n  --BORDER-WIDTH--DEFAULT: var(--digi--form-file-upload--border-width--medium--default);\n  --WIDTH: var(--digi--form-file-upload--width--medium);\n  --FONT-WEIGHT: var(--digi--form-file-upload--font-weight);\n  --PADDING: var(--digi--form-file-upload--padding--medium);\n  --ICON--PADDING: var(--digi--form-file-upload--padding--medium--icon);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload--large.sc-digi-form-file-upload {\n  --COLOR--BACKGROUND--FILE-LIST: var(--digi--form-file-upload--color--background--small--default);\n  --COLOR--BACKGROUND--DEFAULT: var(--digi--form-file-upload--color--background--large--default);\n  --COLOR--BACKGROUND--HOVER: var(--digi--form-file-upload--color--background--large--hover);\n  --COLOR--BORDER--DEFAULT: var(--digi--form-file-upload--color--border--large--default);\n  --COLOR--BORDER--HOVER: var(--digi--form-file-upload--color--border--large--hover);\n  --BORDER-STYLE--DEFAULT: var(--digi--form-file-upload--border-style--large--default);\n  --BORDER-RADIUS--DEFAULT: var(--digi--form-file-upload--border-radius--large--default);\n  --BORDER-WIDTH--DEFAULT: var(--digi--form-file-upload--border-width--large--default);\n  --WIDTH: var(--digi--form-file-upload--width--large);\n  --FONT-WEIGHT: var(--digi--form-file-upload--font-weight);\n  --PADDING: var(--digi--form-file-upload--padding--large);\n  --ICON--PADDING: var(--digi--form-file-upload--padding--medium--icon);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload--has-errors.sc-digi-form-file-upload {\n  --BORDER-STYLE--DEFAULT: var(--digi--form-file-upload--border--error);\n  --COLOR--BORDER--DEFAULT: var(--digi--form-file-upload--border-color--error);\n  --COLOR--BACKGROUND--HOVER: var(--digi--form-file-upload--border-color--error);\n  --BORDER-WIDTH--DEFAULT: var(--digi--form-file-upload--border--error--width);\n  --COLOR--BACKGROUND--DEFAULT: var(--digi--form-file-upload--background--error);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__spinner.sc-digi-form-file-upload {\n  margin-right: 0.5rem;\n  animation: animation__rotation 3s infinite linear;\n  transform-origin: center;\n  --digi--icon--height: 1rem;\n}\n@media (prefers-reduced-motion) {\n  .sc-digi-form-file-upload-h .digi-form-file-upload__spinner.sc-digi-form-file-upload {\n    animation: none;\n  }\n}\n@keyframes animation__rotation {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(359deg);\n  }\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__input.sc-digi-form-file-upload {\n  display: none;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__button.sc-digi-form-file-upload {\n  margin: 0 0 auto 0.5rem;\n  text-align: center;\n  white-space: nowrap;\n  background: none;\n  border: none;\n  cursor: pointer;\n  font-weight: var(--digi--typography--button--font-weight--desktop);\n  font-size: var(--digi--typography--body--font-size--desktop);\n  color: var(--digi--form-file-upload--button-text--color--default);\n  display: flex;\n  align-items: center;\n  font-family: var(--digi--global--typography--font-family--default);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__button.sc-digi-form-file-upload:hover {\n  color: var(--digi--form-file-upload--button-text--color--hover);\n  text-decoration: underline;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__button.sc-digi-form-file-upload:hover .digi-form-file-upload__button-icon.sc-digi-form-file-upload {\n  --digi--icon--color: var(--digi--form-file-upload--button-text--color--hover);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__button.sc-digi-form-file-upload:focus-visible {\n  outline: 2px solid black;\n  outline-offset: 2px;\n  box-shadow: 0px 0px 0px 5px white;\n  text-decoration: underline;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__button-icon.sc-digi-form-file-upload {\n  --digi--icon--height: 1.25rem;\n  --digi--icon--width: 1.25rem;\n  --digi--icon--color: var(--digi--color--text--interactive--primary);\n  margin-left: 5px;\n  padding: var(--ICON--PADDING);\n  padding-right: 0;\n  padding-left: 0;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__button-icon.sc-digi-form-file-upload:hover {\n  --digi--icon--color: var(--digi--form-file-upload--button-text--color--hover);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__upload-area.sc-digi-form-file-upload {\n  border-color: var(--COLOR--BORDER--DEFAULT);\n  border-radius: var(--BORDER-RADIUS--DEFAULT);\n  border-width: var(--BORDER-WIDTH--DEFAULT);\n  border-style: var(--BORDER-STYLE--DEFAULT);\n  max-width: var(--WIDTH);\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  background-color: var(--COLOR--BACKGROUND--DEFAULT);\n  align-items: center;\n  padding: var(--PADDING);\n  margin-bottom: var(--digi--gutter--medium);\n  margin-top: var(--digi--gutter--button-block-small);\n  position: relative;\n  cursor: pointer;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__upload-area--hover.sc-digi-form-file-upload {\n  border-color: var(--COLOR--BORDER--HOVER);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__upload-area-overlay.sc-digi-form-file-upload {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  background-color: var(--COLOR--BACKGROUND--HOVER);\n  opacity: 0.1;\n  top: 0;\n  left: 0;\n  z-index: 10;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__text-area.sc-digi-form-file-upload {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__text-area.sc-digi-form-file-upload .paper-clip.sc-digi-form-file-upload {\n  padding-right: 0.5rem;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__files-list.sc-digi-form-file-upload {\n  max-width: none;\n  padding: 0;\n  margin: 0;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__files.sc-digi-form-file-upload {\n  border-radius: var(--BORDER-RADIUS--DEFAULT);\n  max-width: 100%;\n  width: 100%;\n  box-sizing: border-box;\n  background-color: var(--COLOR--BACKGROUND--FILE-LIST);\n  padding: var(--digi--gutter--largest-2) var(--digi--padding--large);\n  margin-bottom: var(--digi--gutter--medium);\n  margin-top: var(--digi--gutter--medium);\n  padding-bottom: var(--digi--padding--smaller);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__files-heading.sc-digi-form-file-upload {\n  font-family: var(--digi--form-file-upload--heading--font-family);\n  font-size: var(--digi--typography--label--font-size--desktop);\n  font-weight: var(--digi--form-file-upload--heading--font-weight);\n  color: var(--digi--color--text--primary);\n  margin: var(--digi--margin--small) 0 var(--digi--margin--medium) 0;\n  display: block;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__files-heading--and-errors.sc-digi-form-file-upload {\n  margin-top: var(--digi--margin--largest);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__error-list-container.sc-digi-form-file-upload {\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: 0.75rem;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__error-list-container.with-files.sc-digi-form-file-upload {\n  border-bottom: var(--BORDER-WIDTH--DEFAULT) solid var(--digi--color--divider--primary);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__error-list-container.sc-digi-form-file-upload .clear-button.sc-digi-form-file-upload {\n  max-height: 1.5rem;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__error-list-container.sc-digi-form-file-upload .clear-button.sc-digi-form-file-upload .clear-icon.sc-digi-form-file-upload {\n  padding-right: 0;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__error-list.sc-digi-form-file-upload {\n  margin: 0;\n  padding: 0;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__error-list.sc-digi-form-file-upload li.sc-digi-form-file-upload {\n  list-style: none;\n  margin-bottom: 0.75rem;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__error-list.sc-digi-form-file-upload li.sc-digi-form-file-upload:last-of-type {\n  margin-bottom: 0;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item.sc-digi-form-file-upload {\n  margin: var(--digi--margin--small) 0;\n  margin-bottom: var(--digi--margin--medium);\n  width: 100%;\n  box-sizing: border-box;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-container.sc-digi-form-file-upload {\n  list-style-type: none;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-container.sc-digi-form-file-upload:nth-child(n+2) {\n  border-top: var(--BORDER-WIDTH--DEFAULT) solid var(--digi--color--divider--primary);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload .info-wrapper.sc-digi-form-file-upload {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  height: auto;\n  min-width: 20%;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload .button-wrapper.sc-digi-form-file-upload {\n  display: flex;\n  min-width: 20%;\n  justify-content: flex-end;\n  align-items: center;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload p.sc-digi-form-file-upload {\n  margin: auto var(--digi--margin--small) !important;\n  font-weight: var(--digi--form-file-upload--font-weight);\n  font-size: var(--digi--typography--body--font-size--desktop);\n  white-space: nowrap;\n  height: max-content;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload .digi-form-file-upload__button-abort.sc-digi-form-file-upload {\n  margin: 0;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-and-thumbnail-container.sc-digi-form-file-upload {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  width: 100%;\n  min-width: 20%;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-green-check.sc-digi-form-file-upload {\n  width: 1.375rem;\n  height: 1.375rem;\n  display: flex;\n  align-self: baseline;\n  position: relative;\n  top: 4px;\n  left: 0px;\n  margin-right: 4px;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-green-check.sc-digi-form-file-upload svg.sc-digi-form-file-upload {\n  --digi--icon--height: 16px;\n  --digi--icon--width: 16px;\n  --digi--icon--color: var(--digi--color--icon--validation--success);\n  background-color: var(--digi--color--background--primary);\n  border-radius: 50%;\n  align-self: flex-start;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-name.sc-digi-form-file-upload {\n  width: 100%;\n  margin: auto 0;\n  font-weight: var(--digi--typography--button--font-weight--desktop);\n  font-size: var(--digi--typography--body--font-size--desktop);\n  height: max-content;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-name--thumbnail.sc-digi-form-file-upload {\n  font-weight: var(--digi--typography--button--font-weight--desktop);\n  font-size: var(--digi--typography--body--font-size--desktop);\n  margin: auto 0 auto var(--digi--margin--small);\n  color: var(--digi--form-file-upload--button-text--color--default);\n}\n@media (max-width: 500px) {\n  .sc-digi-form-file-upload-h .digi-form-file-upload__item-name.sc-digi-form-file-upload {\n    max-width: 17.5rem;\n  }\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-name.sc-digi-form-file-upload:focus-visible {\n  outline: 2px solid black;\n  outline-offset: 2px;\n  box-shadow: 0px 0px 0px 5px white;\n}\n@container (max-width: 620px) {\n  .sc-digi-form-file-upload-h .digi-form-file-upload__item .digi-form-file-upload__item-name {\n    max-width: 17.5rem;\n  }\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container.sc-digi-form-file-upload {\n  position: relative;\n  display: flex;\n  padding: 0;\n  margin: 0;\n  justify-content: space-between;\n  align-items: center;\n  overflow-wrap: break-word;\n  gap: 32px;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container-inner.sc-digi-form-file-upload {\n  display: flex;\n  width: 100%;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container-figure.sc-digi-form-file-upload {\n  margin: 0;\n  align-self: flex-start;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container-figure.sc-digi-form-file-upload::after {\n  position: absolute;\n  content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle fill='%23FFF' cx='8' cy='8' r='6'/%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-8.925 4.236L13.01 6.3a.516.516 0 0 0 0-.73l-.73-.73a.516.516 0 0 0-.73 0L6.71 9.682l-2.26-2.26a.516.516 0 0 0-.73 0l-.73.73a.516.516 0 0 0 0 .73l3.355 3.355a.516.516 0 0 0 .73 0Z' fill='%23009322'/%3E%3C/g%3E%3C/svg%3E\");\n  top: -6px;\n  left: 24px;\n  width: 18px;\n  height: 18px;\n  overflow: hidden;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container.sc-digi-form-file-upload .thumbnail.sc-digi-form-file-upload {\n  width: 2rem;\n  height: 2rem;\n  object-fit: cover;\n  flex-grow: 0;\n  margin-right: 0.75rem;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container.sc-digi-form-file-upload .hidden.sc-digi-form-file-upload {\n  margin-left: var(--digi--margin--larger);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-pdf-preview-bis.sc-digi-form-file-upload {\n  position: relative;\n  top: 6px;\n  left: 5px;\n  margin-right: 1.25rem;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-pdf-preview-bis.sc-digi-form-file-upload::after {\n  position: absolute;\n  content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle fill='%23FFF' cx='8' cy='8' r='6'/%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-8.925 4.236L13.01 6.3a.516.516 0 0 0 0-.73l-.73-.73a.516.516 0 0 0-.73 0L6.71 9.682l-2.26-2.26a.516.516 0 0 0-.73 0l-.73.73a.516.516 0 0 0 0 .73l3.355 3.355a.516.516 0 0 0 .73 0Z' fill='%23009322'/%3E%3C/g%3E%3C/svg%3E\");\n  top: -7px;\n  left: 15px;\n  width: 18px;\n  height: 18px;\n  overflow: hidden;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-info.sc-digi-form-file-upload {\n  width: 100%;\n}\n@container (max-width: 500px) {\n  .sc-digi-form-file-upload-h .digi-form-file-upload__item .digi-form-file-upload__item span {\n    margin-left: 0;\n    margin-right: auto;\n  }\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__error.sc-digi-form-file-upload {\n  color: var(--digi--color--icon--validation--error);\n}\n.sc-digi-form-file-upload-h .visually-hidden.sc-digi-form-file-upload {\n  border: 0;\n  clip: rect(1px, 1px, 1px, 1px);\n  -webkit-clip-path: inset(50%);\n  clip-path: inset(50%);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n  white-space: nowrap;\n}\n@container (min-width: 500px) {\n  .sc-digi-form-file-upload-h .hidden-desktop {\n    display: none !important;\n  }\n}\n@container (max-width: 499px) {\n  .sc-digi-form-file-upload-h .hidden-mobile {\n    display: none !important;\n  }\n}";
 const DigiFormFileUploadStyle0 = formFileUploadCss;
@@ -65,10 +65,15 @@ const FormFileUpload = /*@__PURE__*/ proxyCustomElement(class FormFileUpload ext
         this.afValidationText = undefined;
         this.afValidation = FormFileUploadValidation.DISABLED;
         this.afHeadingLevel = FormFileUploadHeadingLevel.H2;
+        this.afErrorMessageIsAlert = true;
     }
     afValidationTextChange() {
         this.setValidationText();
     }
+    get errorMessageIsAlert() {
+        return (this.afErrorMessageIsAlert !== false &&
+            this.afErrorMessageIsAlert !== 'false');
+    }
     breakpointHandler(e) {
         if (e.detail.value) {
             if (e.detail.value === UtilBreakpointObserverBreakpoints.SMALL) {
@@ -134,10 +139,18 @@ const FormFileUpload = /*@__PURE__*/ proxyCustomElement(class FormFileUpload ext
     async afMGetFormControlElement() {
         return this._input;
     }
+    /**
+     * Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet.
+     * @en Listens for when focus is set on the custom element and propagates it down to the actual input element.
+     */
+    focusOnInput() {
+        this._input.focus();
+    }
     componentWillLoad() {
         this.aforiginalVariation = this.afVariation;
     }
     componentDidLoad() {
+        this.hostElement.setAttribute('tabindex', '-1');
         this.afOnReady.emit();
         /* Vid första renderingen så fungerar inte propertyn korrekt om vi inte kallar på setValidationText härifrån.
          * Gissar att det är en tajmin-issue mellan prop och state, men hinner inte gräva i det mer nu.  */
@@ -557,22 +570,22 @@ const FormFileUpload = /*@__PURE__*/ proxyCustomElement(class FormFileUpload ext
             } }, this.renderFiles())));
     }
     render() {
-        return (h(Fragment, { key: '9d6a24f2f19c019f7407af204ab5dc3e66079724' }, h("digi-util-breakpoint-observer", { key: 'a748998bb71bd4707ac78d1a95e25b890f946dd8', onAfOnChange: (e) => this.breakpointHandler(e) }), h("div", { key: '41f8cbc00e194d1ddb05ceca5efa448333f2ad43', class: Object.assign({ 'digi-form-file-upload': true }, this.cssModifiers) }, h("digi-form-label", { key: '890b3bc2dd89d70d1313bacd2d02fe75e3be445d', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("div", { key: 'bda9a9122d9eac9572d278bfd40930b96a55e66a', class: {
+        return (h(Fragment, { key: 'fa66e9f8a9cc1ab9c0e850aaa7091612a40e3179' }, h("digi-util-breakpoint-observer", { key: 'e31966e4a3ac5ee7d17236d55b2fcba3a5e5b217', onAfOnChange: (e) => this.breakpointHandler(e) }), h("div", { key: '7def9fd833ee627f46af20ce59982e372c758289', class: Object.assign({ 'digi-form-file-upload': true }, this.cssModifiers) }, h("digi-form-label", { key: 'b7d36f50ec9a5fa413784ac31a7ef77771be2626', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("div", { key: '15afcf3f1321dc6454094b6f7a5f1e6cf66758bd', class: {
                 'digi-form-file-upload__upload-area': true,
                 'digi-form-file-upload__upload-area--hover': this.fileHover
             }, onDrop: (e) => this.handleDrop(e), onDragOver: (e) => this.handleAllowDrop(e), onDragEnter: (e) => this.handleOnDragEnterLeave(e), onDragLeave: (e) => this.handleOnDragEnterLeave(e), onClick: (e) => this.handleInputClick(e) }, this.fileHover &&
-            this.afVariation != FormFileUploadVariation.SMALL && (h("div", { key: 'dcdf9b2933e80cdc28da4f687149e3342654336b', class: "digi-form-file-upload__upload-area-overlay" })), h("div", { key: 'a3dcac52d26c381417b578555e5355e7654ea709', class: "digi-form-file-upload__text-area" }, h("button", { key: '77752f082b7581eafcfeef04cc2cc6faed3ff7ef', type: "button", ref: (el) => {
+            this.afVariation != FormFileUploadVariation.SMALL && (h("div", { key: '563d428c64e909dd45331c6dd3c20fd4196dd41b', class: "digi-form-file-upload__upload-area-overlay" })), h("div", { key: '1ebec5c26501773a1104f878380fcc0377a33010', class: "digi-form-file-upload__text-area" }, h("button", { key: '8a1c7c8bf8ccacb620a95ba0221742a6c436cf3c', type: "button", id: this.afId + '-button', ref: (el) => {
                 this._uploadButton = el;
             }, onClick: (e) => this.handleInputClick(e), class: "digi-form-file-upload__button hidden_mobile", style: {
                 margin: '0'
-            } }, h("digi-icon-paperclip", { key: '62a4abf7e10740a3a6ff049a4a8e91c48bdb94ac', "aria-hidden": "true", class: "digi-form-file-upload__button-icon paper-clip", slot: "icon" }), this.afUploadBtnText
+            } }, h("digi-icon-paperclip", { key: '1ae48109c0df78f412fd6c07742baaf6ef2d616c', "aria-hidden": "true", class: "digi-form-file-upload__button-icon paper-clip", slot: "icon" }), this.afUploadBtnText
             ? this.afUploadBtnText
-            : _t.form.file_choose), h("input", { key: '39a5e7b5a1998c3e1e82d74ccf8a02edeea0fd8b', ref: (el) => {
+            : _t.form.file_choose), h("input", { key: '3370708299eb4f53f38cb15ae4fb9cb97b993bb9', ref: (el) => {
                 this._input = el;
-            }, onChange: (e) => this.onButtonUploadFileHandler(e), class: "digi-form-file-upload__input", multiple: true, type: "file", id: this.afId, accept: this.afFileTypes, name: this.afName ? this.afName : null, required: this.afRequired ? this.afRequired : null, onDrop: (e) => this.handleDrop(e), onDragOver: (e) => this.handleAllowDrop(e), "aria-errormessage": "digi-form-file-upload__error", "aria-describedBy": "digi-form-file-upload__error" }), h("span", { key: '42447d4024cbd6b4abfbff0d9a51b7dd7538c167' }, this.afVariation !== FormFileUploadVariation.SMALL &&
-            _t.form.file_dropzone))), h("p", { key: '8240114263559f6a7da5c42e94d5d6cb8f07921f', class: "visually-hidden", role: "alert", "aria-atomic": "true", ref: (el) => {
+            }, onChange: (e) => this.onButtonUploadFileHandler(e), class: "digi-form-file-upload__input", multiple: true, type: "file", id: this.afId, accept: this.afFileTypes, name: this.afName ? this.afName : null, required: this.afRequired ? this.afRequired : null, onDrop: (e) => this.handleDrop(e), onDragOver: (e) => this.handleAllowDrop(e), "aria-errormessage": "digi-form-file-upload__error", "aria-describedBy": "digi-form-file-upload__error" }), h("span", { key: 'c4deee14a4318dc38368eeec5f5a3b51e0e79e27' }, this.afVariation !== FormFileUploadVariation.SMALL &&
+            _t.form.file_dropzone))), h("p", { key: '6553b8226f080d825eb276ce3f684a95ebeeb649', class: "visually-hidden", role: this.errorMessageIsAlert ? 'alert' : null, "aria-atomic": "true", ref: (el) => {
                 this._srTextContainer = el;
-            } }), (this.files.length > 0 || this.error) && (h("div", { key: '60c80571d84300d4a9151f142beb06194af9ead7', class: "digi-form-file-upload__files" }, this.renderErrorMessage(), this.renderFileContainer())))));
+            } }), (this.files.length > 0 || this.error) && (h("div", { key: 'c514dfcf95137b192fa490d6cb61e1b68ae82768', class: "digi-form-file-upload__files" }, this.renderErrorMessage(), this.renderFileContainer())))));
     }
     get hostElement() { return this; }
     static get watchers() { return {
@@ -600,6 +613,7 @@ const FormFileUpload = /*@__PURE__*/ proxyCustomElement(class FormFileUpload ext
         "afValidationText": [1, "af-validation-text"],
         "afValidation": [1, "af-validation"],
         "afHeadingLevel": [1, "af-heading-level"],
+        "afErrorMessageIsAlert": [8, "af-error-message-is-alert"],
         "_input": [32],
         "_fileList": [32],
         "_uploadButton": [32],
@@ -613,7 +627,7 @@ const FormFileUpload = /*@__PURE__*/ proxyCustomElement(class FormFileUpload ext
         "afMGetValidationState": [64],
         "afMImportFiles": [64],
         "afMGetFormControlElement": [64]
-    }, undefined, {
+    }, [[0, "focus", "focusOnInput"]], {
         "afValidationText": ["afValidationTextChange"]
     }]);
 function defineCustomElement$1() {

package/components/digi-form-filter.d.ts

@@ -1,4 +1,4 @@
-import type { Components, JSX } from "../dist/types/components";
+import type { Components, JSX } from "../../../../libs/arbetsformedlingen/package/dist/types/components";
 
 interface DigiFormFilter extends Components.DigiFormFilter, HTMLElement {}
 export const DigiFormFilter: {

package/components/digi-form-filter.js

@@ -3,10 +3,10 @@ import { r as randomIdGenerator } from './p-ffe5c0e8.js';
 import { l as logger } from './p-e3d2e899.js';
 import { d as detectClickOutside } from './p-430607cb.js';
 import { d as detectFocusOutside } from './p-ee33960b.js';
-import { _ as _t } from './p-08cf2c0e.js';
+import { _ as _t } from './p-903a27d9.js';
 import { d as defineCustomElement$4 } from './p-e8fc33ed.js';
-import { d as defineCustomElement$3 } from './p-61fe9d78.js';
-import { d as defineCustomElement$2 } from './p-a90980f7.js';
+import { d as defineCustomElement$3 } from './p-f22b488a.js';
+import { d as defineCustomElement$2 } from './p-2484471b.js';
 
 const formFilterCss = ".sc-digi-form-filter-h{--digi--form-filter--footer--background:var(--digi--color--background--secondary-accent);--digi--form-filter--scroll--max-height:18.75rem;--digi--form-filter--scroll--max-height--large:23.4275rem;--digi--form-filter--scroll--padding:var(--digi--padding--small);--digi--form-filter--reset-button--margin-left:var(--digi--padding--small);--digi--form-filter--legend__border-bottom:var(--digi--border-width--primary) solid var(--digi--color--divider--primary);--digi--form-filter--list--margin:0;--digi--form-filter--list--padding:var(--digi--gutter--small) 0 0 0;--digi--form-filter--item--margin:var(--digi--gutter--small) 0;--digi--form-filter--toggle-icon--transition:ease-in-out 0.2s all;--digi--form-filter--dropdown--box-shadow:0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.7);--digi--form-filter--dropdown--border-radius:var(--digi--border--radius--primary);--digi--form-filter--dropdown--background:var(--digi--color--background--primary);--digi--form-filter--dropdown--min-width:18.75rem;--digi--form-filter--dropdown--margin-top:var(--digi--gutter--small);--digi--form-filter--dropdown--z-index:999;--digi--form-filter--toggle-button-indicator--color--default:transparent;--digi--form-filter--toggle-button-indicator--color--active:var(--digi--color--marking--indication--primary);--digi--form-filter--toggle-button-indicator--width:0.625rem;--digi--form-filter--toggle-button-indicator--height:0.625rem;--digi--form-filter--toggle-button-indicator--margin-right:var(--digi--margin--small);--digi--form-filter--toggle-button-indicator--margin-left:calc(var(--digi--margin--smaller) * -1);--digi--form-filter--toggle-button--text--margin-right:var(--digi--margin--smaller);--digi--form-filter--toggle-icon--width:0.875rem;--digi--form-filter--toggle-icon--height:0.875rem;--digi--form-filter--legend--font-weight:var(--digi--typography--preamble--font-weight--desktop);--digi--form-filter--legend--font-family:var(--digi--global--typography--font-family--default);--digi--form-filter--legend--font-size:var(--digi--typography--preamble--font-size--desktop)}.sc-digi-form-filter-h .digi-form-filter.sc-digi-form-filter{--INDICATOR--BACKGROUND:var(--digi--form-filter--toggle-button-indicator--color--default);--SCROLL--MAX-HEIGHT:var(--digi--form-filter--scroll--max-height);position:relative}.sc-digi-form-filter-h .digi-form-filter--open.sc-digi-form-filter .digi-form-filter__toggle-icon.sc-digi-form-filter{transform:rotate(-180deg)}.sc-digi-form-filter-h .digi-form-filter__toggle-icon.sc-digi-form-filter{transition:var(--digi--form-filter--toggle-icon--transition)}.sc-digi-form-filter-h .digi-form-filter__toggle-icon.sc-digi-form-filter-s>[slot^=icon],.sc-digi-form-filter-h .digi-form-filter__toggle-icon .sc-digi-form-filter-s>[slot^=icon]{--digi--icon--width:var(--digi--form-filter--toggle-icon--width);--digi--icon--height:var(--digi--form-filter--toggle-icon--height)}.sc-digi-form-filter-h .digi-form-filter__legend.sc-digi-form-filter{font-weight:var(--digi--form-filter--legend--font-weight);font-family:var(--digi--form-filter--legend--font-family);font-size:var(--digi--form-filter--legend--font-size)}.sc-digi-form-filter-h .digi-form-filter__scroll.sc-digi-form-filter{max-height:var(--SCROLL--MAX-HEIGHT);overflow-y:auto;padding:var(--digi--form-filter--scroll--padding);overflow-x:hidden}@media (min-width: 48rem){.sc-digi-form-filter-h .digi-form-filter__scroll.sc-digi-form-filter{--SCROLL--MAX-HEIGHT:var(--digi--form-filter--scroll--max-height--large)}}.sc-digi-form-filter-h .digi-form-filter__scroll.sc-digi-form-filter fieldset.sc-digi-form-filter{border:none}.sc-digi-form-filter-h .digi-form-filter__scroll.sc-digi-form-filter legend.sc-digi-form-filter{width:100%;border-bottom:var(--digi--form-filter--legend__border-bottom);padding-bottom:0.25rem}.sc-digi-form-filter-h .digi-form-filter__scroll.sc-digi-form-filter .legend-hidden.sc-digi-form-filter{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sc-digi-form-filter-h .digi-form-filter__footer.sc-digi-form-filter{display:flex;align-items:center;justify-content:center;background:var(--digi--form-filter--footer--background);padding:var(--digi--form-filter--scroll--padding)}.sc-digi-form-filter-h .digi-form-filter__reset-button.sc-digi-form-filter{display:inline-block;margin-left:var(--digi--form-filter--reset-button--margin-left)}.sc-digi-form-filter-h .digi-form-filter__dropdown.sc-digi-form-filter{min-width:var(--digi--form-filter--dropdown--min-width);position:absolute;z-index:var(--digi--form-filter--dropdown--z-index);background:var(--digi--form-filter--dropdown--background);border-radius:var(--digi--form-filter--dropdown--border-radius);box-shadow:var(--digi--form-filter--dropdown--box-shadow);overflow:hidden;margin-top:var(--digi--form-filter--dropdown--margin-top)}@media (min-width: 48rem){.sc-digi-form-filter-h .digi-form-filter__dropdown--right.sc-digi-form-filter{right:0}}.sc-digi-form-filter-h .digi-form-filter__dropdown--hidden.sc-digi-form-filter{display:none}.sc-digi-form-filter-h .digi-form-filter__toggle-button-indicator.sc-digi-form-filter:before{content:\"\";width:var(--digi--form-filter--toggle-button-indicator--width);height:var(--digi--form-filter--toggle-button-indicator--height);background:var(--INDICATOR--BACKGROUND);display:inline-block;margin-right:var(--digi--form-filter--toggle-button-indicator--margin-right);border-radius:50% 50%;overflow:hidden;margin-left:var(--digi--form-filter--toggle-button-indicator--margin-left)}.sc-digi-form-filter-h .digi-form-filter__toggle-button-indicator--active.sc-digi-form-filter{--INDICATOR--BACKGROUND:var(--digi--form-filter--toggle-button-indicator--color--active)}.sc-digi-form-filter-h .digi-form-filter__list.sc-digi-form-filter{margin:var(--digi--form-filter--list--margin);padding:var(--digi--form-filter--list--padding)}.sc-digi-form-filter-h .digi-form-filter__item.sc-digi-form-filter{display:block}.sc-digi-form-filter-h .digi-form-filter__toggle-button-text.sc-digi-form-filter{margin-right:var(--digi--form-filter--toggle-button--text--margin-right)}";
 const DigiFormFilterStyle0 = formFilterCss;

package/components/digi-form-input-search.d.ts

@@ -1,4 +1,4 @@
-import type { Components, JSX } from "../dist/types/components";
+import type { Components, JSX } from "../../../../libs/arbetsformedlingen/package/dist/types/components";
 
 interface DigiFormInputSearch extends Components.DigiFormInputSearch, HTMLElement {}
 export const DigiFormInputSearch: {

package/components/digi-form-input-search.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-a53686b3.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-a53686b3.js';
 import { r as randomIdGenerator } from './p-ffe5c0e8.js';
 import { F as FormInputSearchVariation } from './p-bc3d2778.js';
 import { b as FormInputType, F as FormInputButtonVariation } from './p-c8429245.js';
@@ -6,13 +6,13 @@ import { a as ButtonType } from './p-f518a4cf.js';
 import { d as detectClickOutside } from './p-430607cb.js';
 import { d as detectFocusOutside } from './p-ee33960b.js';
 import { d as defineCustomElement$9 } from './p-e8fc33ed.js';
-import { d as defineCustomElement$8 } from './p-73c973fc.js';
-import { d as defineCustomElement$7 } from './p-71bad47e.js';
-import { d as defineCustomElement$6 } from './p-ad94e4f3.js';
-import { d as defineCustomElement$5 } from './p-60394bdb.js';
-import { d as defineCustomElement$4 } from './p-6c7ff092.js';
-import { d as defineCustomElement$3 } from './p-f516f6d6.js';
-import { d as defineCustomElement$2 } from './p-299871dc.js';
+import { d as defineCustomElement$8 } from './p-dedeb670.js';
+import { d as defineCustomElement$7 } from './p-956d730b.js';
+import { d as defineCustomElement$6 } from './p-a2df4b05.js';
+import { d as defineCustomElement$5 } from './p-05bd223f.js';
+import { d as defineCustomElement$4 } from './p-31ef8371.js';
+import { d as defineCustomElement$3 } from './p-40496c3d.js';
+import { d as defineCustomElement$2 } from './p-d5b9333c.js';
 
 const formInputSearchCss = ".sc-digi-form-input-search-h{--digi--form-input-search--input--border-radius--default:var(--digi--border-radius--input-search);width:100%}.sc-digi-form-input-search-h .digi-form-input-search__input.sc-digi-form-input-search{--digi--form-input--border-radius:var(--digi--form-input-search--input--border-radius--default)}.sc-digi-form-input-search-h .digi-form-input-search--large.sc-digi-form-input-search .digi-form-input-search__button.sc-digi-form-input-search button.sc-digi-form-input-search{font-size:var(--digi--global--typography--font-size--interaction-large);padding:var(--digi--gutter--button-block-large) var(--digi--gutter--button-inline-large)}";
 const DigiFormInputSearchStyle0 = formInputSearchCss;
@@ -98,6 +98,13 @@ const FormInputSearch = /*@__PURE__*/ proxyCustomElement(class FormInputSearch e
         this.afOnClick.emit(e);
         this.afOnSubmitSearch.emit(this.afValue);
     }
+    /**
+     * Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet.
+     * @en Listens for when focus is set on the custom element and propagates it down to the actual input element.
+     */
+    focusOnInput() {
+        this._input.focus();
+    }
     clickOutsideListener(e) {
         const target = e.target;
         const selector = `[data-af-identifier="${this.afId}"]`;
@@ -132,10 +139,10 @@ const FormInputSearch = /*@__PURE__*/ proxyCustomElement(class FormInputSearch e
         };
     }
     render() {
-        return (h("div", { key: 'e4c602d4ad9ae6a543dd5168abc02d29bedfc8a8', class: Object.assign({ 'digi-form-input-search': true }, this.cssModifiers), "data-af-identifier": this.afId }, h("digi-form-input", { key: '0d2de6133e17ada9cc621ac3cb7f6e75f4842b73', class: {
+        return (h(Host, { key: '5502afd53a378b67ffaed787a84ffd0e154c6a75', tabindex: -1 }, h("div", { key: '9d76ceba2e057efe2029cb600ce43e3e2d39ebfb', class: Object.assign({ 'digi-form-input-search': true }, this.cssModifiers), "data-af-identifier": this.afId }, h("digi-form-input", { key: 'fbee883f2df35b697093aa7fcdd134704583b350', class: {
                 'digi-form-input-search__input': true,
                 'digi-form-input-search__input--no-button': this.afHideButton
-            }, ref: (el) => (this._input = el), onAfOnBlur: (e) => this.blurHandler(e), onAfOnChange: (e) => this.changeHandler(e), onAfOnFocus: (e) => this.focusHandler(e), onAfOnFocusout: (e) => this.focusoutHandler(e), onAfOnKeyup: (e) => this.keyupHandler(e), onAfOnInput: (e) => this.inputHandler(e), afLabel: this.afLabel, afLabelDescription: this.afLabelDescription, afAriaActivedescendant: this.afAriaActivedescendant, afAriaDescribedby: this.afAriaDescribedby, afAriaLabelledby: this.afAriaLabelledby, afAriaAutocomplete: this.afAriaAutocomplete, afAutocomplete: this.afAutocomplete, afName: this.afName, afType: this.afType, afValue: this.afValue, afVariation: this.afVariation, afAutofocus: this.afAutofocus ? this.afAutofocus : null, afButtonVariation: this.afButtonVariation, afId: this.afId }, !this.afHideButton && (h("digi-button", { key: '5a744b0ab75651a61731ce504ebf5426d546b18a', class: "digi-form-input-search__button", onAfOnClick: (e) => this.clickHandler(e), onAfOnFocus: (e) => e.stopPropagation(), afType: this.afButtonType, afAriaLabel: this.afButtonAriaLabel, afAriaLabelledby: this.afButtonAriaLabelledby, afSize: this.afVariation, slot: "button" }, h("digi-icon-search", { key: 'b68f9b8f7d4a648f609d70620406f484894f8592', slot: "icon" }), this.afButtonText)))));
+            }, ref: (el) => (this._input = el), onAfOnBlur: (e) => this.blurHandler(e), onAfOnChange: (e) => this.changeHandler(e), onAfOnFocus: (e) => this.focusHandler(e), onAfOnFocusout: (e) => this.focusoutHandler(e), onAfOnKeyup: (e) => this.keyupHandler(e), onAfOnInput: (e) => this.inputHandler(e), afLabel: this.afLabel, afLabelDescription: this.afLabelDescription, afAriaActivedescendant: this.afAriaActivedescendant, afAriaDescribedby: this.afAriaDescribedby, afAriaLabelledby: this.afAriaLabelledby, afAriaAutocomplete: this.afAriaAutocomplete, afAutocomplete: this.afAutocomplete, afName: this.afName, afType: this.afType, afValue: this.afValue, afVariation: this.afVariation, afAutofocus: this.afAutofocus ? this.afAutofocus : null, afButtonVariation: this.afButtonVariation, afId: this.afId }, !this.afHideButton && (h("digi-button", { key: '45ca4cd2086bf49f53781bd11919ea8cbee9d9fa', class: "digi-form-input-search__button", onAfOnClick: (e) => this.clickHandler(e), onAfOnFocus: (e) => e.stopPropagation(), afType: this.afButtonType, afAriaLabel: this.afButtonAriaLabel, afAriaLabelledby: this.afButtonAriaLabelledby, afSize: this.afVariation, slot: "button" }, h("digi-icon-search", { key: '1860c4ec6f386c16552d959c0b8091e4e88060cb', slot: "icon" }), this.afButtonText))))));
     }
     get hostElement() { return this; }
     static get watchers() { return {
@@ -165,7 +172,7 @@ const FormInputSearch = /*@__PURE__*/ proxyCustomElement(class FormInputSearch e
         "afButtonAriaLabelledby": [1, "af-button-aria-labelledby"],
         "afAutofocus": [4, "af-autofocus"],
         "afMGetFormControlElement": [64]
-    }, [[8, "click", "clickOutsideListener"], [4, "focusin", "focusOutsideListener"]], {
+    }, [[0, "focus", "focusOnInput"], [8, "click", "clickOutsideListener"], [4, "focusin", "focusOutsideListener"]], {
         "value": ["onValueChanged"],
         "afValue": ["onAfValueChanged"]
     }]);

package/components/digi-form-input.d.ts

@@ -1,4 +1,4 @@
-import type { Components, JSX } from "../dist/types/components";
+import type { Components, JSX } from "../../../../libs/arbetsformedlingen/package/dist/types/components";
 
 interface DigiFormInput extends Components.DigiFormInput, HTMLElement {}
 export const DigiFormInput: {

package/components/digi-form-input.js

@@ -1,4 +1,4 @@
-import { F as FormInput, d as defineCustomElement$1 } from './p-73c973fc.js';
+import { F as FormInput, d as defineCustomElement$1 } from './p-dedeb670.js';
 
 const DigiFormInput = FormInput;
 const defineCustomElement = defineCustomElement$1;

package/components/digi-form-label.d.ts

@@ -1,4 +1,4 @@
-import type { Components, JSX } from "../dist/types/components";
+import type { Components, JSX } from "../../../../libs/arbetsformedlingen/package/dist/types/components";
 
 interface DigiFormLabel extends Components.DigiFormLabel, HTMLElement {}
 export const DigiFormLabel: {

package/components/digi-form-label.js

@@ -1,4 +1,4 @@
-import { F as FormLabel, d as defineCustomElement$1 } from './p-71bad47e.js';
+import { F as FormLabel, d as defineCustomElement$1 } from './p-956d730b.js';
 
 const DigiFormLabel = FormLabel;
 const defineCustomElement = defineCustomElement$1;

package/components/digi-form-radiobutton.d.ts

@@ -1,4 +1,4 @@
-import type { Components, JSX } from "../dist/types/components";
+import type { Components, JSX } from "../../../../libs/arbetsformedlingen/package/dist/types/components";
 
 interface DigiFormRadiobutton extends Components.DigiFormRadiobutton, HTMLElement {}
 export const DigiFormRadiobutton: {

package/components/digi-form-radiobutton.js

@@ -1,4 +1,4 @@
-import { F as FormRadiobutton, d as defineCustomElement$1 } from './p-cf527784.js';
+import { F as FormRadiobutton, d as defineCustomElement$1 } from './p-5fd00d55.js';
 
 const DigiFormRadiobutton = FormRadiobutton;
 const defineCustomElement = defineCustomElement$1;

package/components/digi-form-radiogroup.d.ts

@@ -1,4 +1,4 @@
-import type { Components, JSX } from "../dist/types/components";
+import type { Components, JSX } from "../../../../libs/arbetsformedlingen/package/dist/types/components";
 
 interface DigiFormRadiogroup extends Components.DigiFormRadiogroup, HTMLElement {}
 export const DigiFormRadiogroup: {