@designsystem-se/af 39.2.1-beta.0 → 39.2.1-beta.darkmode.0

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

@@ -1,26 +1,27 @@
-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';
-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-70fad0ea.js';
-import { d as defineCustomElement$8 } from './p-704e0126.js';
-import { d as defineCustomElement$7 } from './p-dab20489.js';
-import { d as defineCustomElement$6 } from './p-22bcbe8a.js';
-import { d as defineCustomElement$5 } from './p-a480e81e.js';
-import { d as defineCustomElement$4 } from './p-db6386c7.js';
-import { d as defineCustomElement$3 } from './p-db81738c.js';
-import { d as defineCustomElement$2 } from './p-02ebe13f.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-B6ugjiwM.js';
+import { r as randomIdGenerator } from './p-BGaIliX6.js';
+import { F as FormInputSearchVariation } from './p-BvWKyXb_.js';
+import { b as FormInputType, F as FormInputButtonVariation } from './p-7F-7XlTz.js';
+import { a as ButtonType } from './p-DNHRmpND.js';
+import { d as detectClickOutside } from './p-CZrDWyoh.js';
+import { d as detectFocusOutside } from './p-C4cIvg7J.js';
+import { d as defineCustomElement$9 } from './p-DbsaTvkJ.js';
+import { d as defineCustomElement$8 } from './p-1zaBZxWX.js';
+import { d as defineCustomElement$7 } from './p-Cw1KRV3D.js';
+import { d as defineCustomElement$6 } from './p-BNyUAR47.js';
+import { d as defineCustomElement$5 } from './p-CmMPkFWG.js';
+import { d as defineCustomElement$4 } from './p-Xfe6RWkX.js';
+import { d as defineCustomElement$3 } from './p-aZpxMui7.js';
+import { d as defineCustomElement$2 } from './p-C6y08__Y.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;
+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)}`;
 
 const FormInputSearch = /*@__PURE__*/ proxyCustomElement(class FormInputSearch extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.afOnFocusOutside = createEvent(this, "afOnFocusOutside", 7);
         this.afOnFocusInside = createEvent(this, "afOnFocusInside", 7);
         this.afOnClickOutside = createEvent(this, "afOnClickOutside", 7);
@@ -34,26 +35,32 @@ const FormInputSearch = /*@__PURE__*/ proxyCustomElement(class FormInputSearch e
         this.afOnClick = createEvent(this, "afOnClick", 7);
         this.afOnSubmitSearch = createEvent(this, "afOnSubmitSearch", 7);
         this.afOnReady = createEvent(this, "afOnReady", 3);
-        this.afLabel = undefined;
-        this.afLabelDescription = undefined;
+        /**
+         * Sätter attributet 'type'.
+         * @en Input type attribute
+         */
         this.afType = FormInputType.SEARCH;
+        /**
+         * Layout för hur inmatningsfältet ska visas då det finns en knapp
+         * @en Input layout when there is a button
+         */
         this.afButtonVariation = FormInputButtonVariation.PRIMARY;
-        this.afName = undefined;
+        /**
+         * Sätter attributet 'id'. Om inget väljs så skapas ett slumpmässigt id.
+         * @en Input id attribute. Defaults to random string.
+         */
         this.afId = randomIdGenerator('digi-form-input-search');
-        this.value = undefined;
-        this.afValue = undefined;
-        this.afAutocomplete = undefined;
-        this.afAriaAutocomplete = undefined;
-        this.afAriaActivedescendant = undefined;
-        this.afAriaLabelledby = undefined;
-        this.afAriaDescribedby = undefined;
+        /**
+         * Sätter variant. Kan vara 'small' eller 'medium'.
+         * @deprecated Obs, varianten 'large' kommer att utgå i december 2026.
+         * @en Set input variation.
+         */
         this.afVariation = FormInputSearchVariation.MEDIUM;
-        this.afHideButton = undefined;
+        /**
+         * Sätter knappelementets attribut 'type'. Bör vara 'submit' eller 'button'
+         * @en Set button element's type attribute.
+         */
         this.afButtonType = ButtonType.SUBMIT;
-        this.afButtonText = undefined;
-        this.afButtonAriaLabel = undefined;
-        this.afButtonAriaLabelledby = undefined;
-        this.afAutofocus = undefined;
     }
     onValueChanged(value) {
         this.afValue = value;
@@ -139,17 +146,21 @@ const FormInputSearch = /*@__PURE__*/ proxyCustomElement(class FormInputSearch e
         };
     }
     render() {
-        return (h(Host, { key: 'dc9d3a86eca58598cf266f6d90c2bede6e7b7cb0', tabindex: -1 }, h("div", { key: '814b4c00f2d9b765236723be6da34c8ef37e1d30', class: Object.assign({ 'digi-form-input-search': true }, this.cssModifiers), "data-af-identifier": this.afId }, h("digi-form-input", { key: 'f278bedff0b115154175432e5ddc3b84e7f3a951', class: {
+        return (h(Host, { key: '479760a36173d0a06d88a6c407c87543a6b13125', tabindex: -1 }, h("div", { key: '4e49bfd22f8191c07418f4e11b6328c53efbf8d8', class: Object.assign({ 'digi-form-input-search': true }, this.cssModifiers), "data-af-identifier": this.afId }, h("digi-form-input", { key: 'e4fdc40206a1bb9423b852e1f7e683ea8676a924', 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: 'f8cec04842f49c3ec42949ea5e74720a0795e72f', 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: 'cebf2e4bdef7b2c87d858b9ae1127991691f3b06', 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: '3cd29d50fde3ddeb6b731969a51609688554cf75', 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: '26f2f3fbcd23a4e8ac3646f6f7d1cafd75126345', slot: "icon" }), this.afButtonText))))));
     }
     get hostElement() { return this; }
     static get watchers() { return {
-        "value": ["onValueChanged"],
-        "afValue": ["onAfValueChanged"]
+        "value": [{
+                "onValueChanged": 0
+            }],
+        "afValue": [{
+                "onAfValueChanged": 0
+            }]
     }; }
-    static get style() { return DigiFormInputSearchStyle0; }
+    static get style() { return formInputSearchCss(); }
 }, [2, "digi-form-input-search", {
         "afLabel": [1, "af-label"],
         "afLabelDescription": [1, "af-label-description"],
@@ -173,8 +184,12 @@ const FormInputSearch = /*@__PURE__*/ proxyCustomElement(class FormInputSearch e
         "afAutofocus": [4, "af-autofocus"],
         "afMGetFormControlElement": [64]
     }, [[0, "focus", "focusOnInput"], [8, "click", "clickOutsideListener"], [4, "focusin", "focusOutsideListener"]], {
-        "value": ["onValueChanged"],
-        "afValue": ["onAfValueChanged"]
+        "value": [{
+                "onValueChanged": 0
+            }],
+        "afValue": [{
+                "onAfValueChanged": 0
+            }]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
@@ -183,47 +198,47 @@ function defineCustomElement$1() {
     const components = ["digi-form-input-search", "digi-button", "digi-form-input", "digi-form-label", "digi-form-validation-message", "digi-icon-search", "digi-icon-validation-error", "digi-icon-validation-success", "digi-icon-validation-warning"];
     components.forEach(tagName => { switch (tagName) {
         case "digi-form-input-search":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, FormInputSearch);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), FormInputSearch);
             }
             break;
         case "digi-button":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$9();
             }
             break;
         case "digi-form-input":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$8();
             }
             break;
         case "digi-form-label":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$7();
             }
             break;
         case "digi-form-validation-message":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$6();
             }
             break;
         case "digi-icon-search":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$5();
             }
             break;
         case "digi-icon-validation-error":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$4();
             }
             break;
         case "digi-icon-validation-success":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$3();
             }
             break;
         case "digi-icon-validation-warning":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$2();
             }
             break;

package/components/digi-form-input.js

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

package/components/digi-form-label.js

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

package/components/digi-form-radiobutton.js

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

package/components/digi-form-radiogroup.js

@@ -1,27 +1,42 @@
-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 FormRadiogroupValidation } from './p-24fe2189.js';
-import { d as defineCustomElement$6 } from './p-22bcbe8a.js';
-import { d as defineCustomElement$5 } from './p-db6386c7.js';
-import { d as defineCustomElement$4 } from './p-db81738c.js';
-import { d as defineCustomElement$3 } from './p-02ebe13f.js';
-import { d as defineCustomElement$2 } from './p-2f619b66.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-B6ugjiwM.js';
+import { r as randomIdGenerator } from './p-BGaIliX6.js';
+import { F as FormRadiogroupValidation } from './p-DcnvI7UR.js';
+import { d as defineCustomElement$5 } from './p-BNyUAR47.js';
+import { d as defineCustomElement$4 } from './p-Xfe6RWkX.js';
+import { d as defineCustomElement$3 } from './p-aZpxMui7.js';
+import { d as defineCustomElement$2 } from './p-C6y08__Y.js';
 
-const formRadiogroupCss = ".sc-digi-form-radiogroup-h{display:block;width:fit-content}";
-const DigiFormRadiogroupStyle0 = formRadiogroupCss;
+const formRadiogroupCss = () => `.sc-digi-form-radiogroup-h{display:block;width:fit-content}`;
 
 const FormRadiogroup = /*@__PURE__*/ proxyCustomElement(class FormRadiogroup extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.afOnGroupChange = createEvent(this, "afOnGroupChange", 7);
-        this.radiobuttons = undefined;
+        this.radiobuttons = [];
+        /**
+         * Sätter attributet 'id'. Om inget väljs så skapas ett slumpmässigt id.
+         * @en Input id attribute. Defaults to random string.
+         */
         this.afId = randomIdGenerator('digi-form-radiogroup');
-        this.afValue = undefined;
-        this.value = undefined;
+        /**
+         * Namnet på radiogruppen
+         * @en Radiogroup name
+         */
         this.afName = randomIdGenerator('digi-form-radiogroup');
+        /**
+         * Sätter valideringsstatus. Kan vara 'success', 'error', 'warning', 'neutral' eller ingenting.
+         * @en Set input validation status
+         */
         this.afValidation = FormRadiogroupValidation.NEUTRAL;
-        this.afValidationText = undefined;
+        /**
+         * Om värdet är true får felmeddelandet attributet role="alert".
+         * Om felet visas tillsammans med flera andra fel (till exempel efter servervalidering) ska värdet sättas till false.
+         * @en If the value is true, the error message gets the attribute role="alert".
+         * If the error is shown together with multiple errors (for example after server-side validation), the value should be set to false.
+         */
         this.afErrorMessageIsAlert = true;
     }
     OnAfValueChange(value) {
@@ -40,25 +55,39 @@ const FormRadiogroup = /*@__PURE__*/ proxyCustomElement(class FormRadiogroup ext
      * @en Listens for when focus is set on the custom element and propagates it down to the first radionutton in the group.
      */
     focusOnGroup() {
-        const radioButtons = this.radiobuttons;
+        const radioButtons = this.getSlottedRadiobuttons();
         if (radioButtons.length > 0) {
             radioButtons[0].focus();
         }
     }
     radiobuttonChangeListener(e) {
-        if (Array.from(this.radiobuttons).includes(e.target)) {
-            e.preventDefault();
-            this.afValue = e.detail.target.value;
-            this.afOnGroupChange.emit(e.detail.target.value);
+        var _a, _b, _c;
+        const radio = this.getRadiobuttonFromEvent(e);
+        if (!radio) {
+            return;
         }
+        e.preventDefault();
+        const value = (_c = (_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : radio.afValue;
+        this.afValue = value;
+        this.afOnGroupChange.emit(value);
     }
     componentDidLoad() {
         this.setRadiobuttons(this.value || this.afValue);
         if (this.value)
             this.afValue = this.value;
     }
+    getSlottedRadiobuttons() {
+        return Array.from(this.hostElement.querySelectorAll('digi-form-radiobutton'));
+    }
+    getRadiobuttonFromEvent(e) {
+        var _a;
+        const path = typeof e.composedPath === 'function' ? e.composedPath() : [];
+        return ((_a = this.getSlottedRadiobuttons().find((radio) => radio === e.target ||
+            path.includes(radio) ||
+            radio.contains(e.target))) !== null && _a !== void 0 ? _a : undefined);
+    }
     setRadiobuttons(value) {
-        this.radiobuttons = this.hostElement.querySelectorAll('digi-form-radiobutton');
+        this.radiobuttons = this.getSlottedRadiobuttons();
         this.radiobuttons.forEach((r) => {
             r.afName = this.afName;
             if (value && r.afValue == value) {
@@ -67,17 +96,21 @@ const FormRadiogroup = /*@__PURE__*/ proxyCustomElement(class FormRadiogroup ext
         });
     }
     render() {
-        return (h(Host, { key: '7aa6f6bb84566148fa042a558bb0ba267e691df9', tabindex: -1 }, h("div", { key: '4b1002650100ea8f1bbbb043779a08dda374a25b', id: this.afId, class: {
+        return (h(Host, { key: '4dbf540c453ceae10ede282625b6cec774e38e7e', tabindex: -1 }, h("div", { key: '2c3b135f63fc23dd1cd3418e6191fb5fbf18bfce', id: this.afId, class: {
                 'digi-form-radiogroup': true
-            } }, h("digi-util-mutation-observer", { key: '497eb4a70127e75bc2e44a955efdf880ce2c9465', onAfOnChange: (e) => this.radiobuttonChangeListener(e) }, h("slot", { key: '82294fd122f1ef6439fb961d86fe1fae88af2f7b' }))), h("div", { key: '2e23ee3a7e77cfe441a500088106631a8e998948', class: "digi-form-input__validation", "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-text` }, this.afValidation != FormRadiogroupValidation.NEUTRAL && (h("digi-form-validation-message", { key: '8b7d829da48f9e33765586cccf2ddb449e52d2e5', class: "digi-form-input__validation-message", "af-variation": this.afValidation }, this.afValidationText)))));
+            } }, h("slot", { key: 'a30c5afdfac57eba9f4bbf99d649858be9fe2551', onSlotchange: () => this.setRadiobuttons(this.value || this.afValue) })), h("div", { key: '1c4a269da4da56c91c1792d95e2e51c41820e73e', class: "digi-form-input__validation", "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-text` }, this.afValidation != FormRadiogroupValidation.NEUTRAL && (h("digi-form-validation-message", { key: 'ad4781c8cfe0bd5457f4d96d1acb8894ff7256be', class: "digi-form-input__validation-message", "af-variation": this.afValidation }, this.afValidationText)))));
     }
     get hostElement() { return this; }
     static get watchers() { return {
-        "afValue": ["OnAfValueChange"],
-        "value": ["OnValueChange"]
+        "afValue": [{
+                "OnAfValueChange": 0
+            }],
+        "value": [{
+                "OnValueChange": 0
+            }]
     }; }
-    static get style() { return DigiFormRadiogroupStyle0; }
-}, [6, "digi-form-radiogroup", {
+    static get style() { return formRadiogroupCss(); }
+}, [262, "digi-form-radiogroup", {
         "afId": [1, "af-id"],
         "afValue": [1025, "af-value"],
         "value": [1025],
@@ -86,43 +119,42 @@ const FormRadiogroup = /*@__PURE__*/ proxyCustomElement(class FormRadiogroup ext
         "afValidationText": [1, "af-validation-text"],
         "afErrorMessageIsAlert": [8, "af-error-message-is-alert"],
         "radiobuttons": [32]
-    }, [[0, "focus", "focusOnGroup"]], {
-        "afValue": ["OnAfValueChange"],
-        "value": ["OnValueChange"]
+    }, [[0, "focus", "focusOnGroup"], [0, "afOnChange", "radiobuttonChangeListener"]], {
+        "afValue": [{
+                "OnAfValueChange": 0
+            }],
+        "value": [{
+                "OnValueChange": 0
+            }]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["digi-form-radiogroup", "digi-form-validation-message", "digi-icon-validation-error", "digi-icon-validation-success", "digi-icon-validation-warning", "digi-util-mutation-observer"];
+    const components = ["digi-form-radiogroup", "digi-form-validation-message", "digi-icon-validation-error", "digi-icon-validation-success", "digi-icon-validation-warning"];
     components.forEach(tagName => { switch (tagName) {
         case "digi-form-radiogroup":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, FormRadiogroup);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), FormRadiogroup);
             }
             break;
         case "digi-form-validation-message":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "digi-icon-validation-error":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$5();
             }
             break;
-        case "digi-icon-validation-success":
-            if (!customElements.get(tagName)) {
+        case "digi-icon-validation-error":
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$4();
             }
             break;
-        case "digi-icon-validation-warning":
-            if (!customElements.get(tagName)) {
+        case "digi-icon-validation-success":
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$3();
             }
             break;
-        case "digi-util-mutation-observer":
-            if (!customElements.get(tagName)) {
+        case "digi-icon-validation-warning":
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$2();
             }
             break;

package/components/digi-form-receipt.js

@@ -1,68 +1,89 @@
-import { p as proxyCustomElement, H, h } from './p-a53686b3.js';
-import { j as FormReceiptVariation, i as FormReceiptType, h as FormReceiptHeadingLevel } from './p-768f56d4.js';
-import './p-717306ef.js';
-import './p-a4a001e1.js';
-import './p-f518a4cf.js';
-import './p-7e32c40b.js';
-import './p-dcdffb3c.js';
-import './p-5d21a361.js';
-import './p-ad16c7a1.js';
-import './p-f40f4b2a.js';
-import './p-1f68d501.js';
-import './p-ee88e3f1.js';
-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';
-import './p-0f6c0360.js';
-import './p-814ca2ad.js';
-import { a as LayoutBlockVariation } from './p-d8a98b3b.js';
-import './p-07303cb5.js';
-import './p-5f8dc01a.js';
-import './p-2a023831.js';
-import './p-5ba6737a.js';
-import './p-e4a9f8f0.js';
-import './p-f2a6768b.js';
-import './p-9dd41cc4.js';
-import './p-40657c82.js';
-import './p-f600576a.js';
-import './p-3b20ec86.js';
-import './p-fe63f0b9.js';
-import './p-d0f35bd6.js';
-import './p-77a93845.js';
-import './p-06f939ab.js';
-import './p-8cd2d6dd.js';
-import './p-484a1d6d.js';
-import './p-0f3fbb1e.js';
-import './p-820e795b.js';
-import './p-46cbbcb5.js';
-import './p-d74742b8.js';
-import './p-6e383896.js';
-import './p-4bad4fb0.js';
-import './p-d1886fff.js';
-import './p-a6ca40fc.js';
-import './p-b0e88537.js';
-import './p-cdcaf0eb.js';
-import { d as defineCustomElement$3 } from './p-88605ec3.js';
-import { d as defineCustomElement$2 } from './p-222f510d.js';
+import { p as proxyCustomElement, H, h, t as transformTag } from './p-B6ugjiwM.js';
+import { j as FormReceiptVariation, i as FormReceiptType, h as FormReceiptHeadingLevel } from './p-BbGPkkqr.js';
+import './p-CKoZU0-H.js';
+import './p-C0A-p3cU.js';
+import './p-DNHRmpND.js';
+import './p-DH_-wpLB.js';
+import './p-DPeoHh1J.js';
+import './p-qc6KRZue.js';
+import './p-DwNlf6Sh.js';
+import './p-C6B2KRZo.js';
+import './p-CES5gUEo.js';
+import './p-DzSu1-K0.js';
+import './p-6-MpaVf8.js';
+import './p-BfyJgcLA.js';
+import './p-BvWKyXb_.js';
+import './p-7F-7XlTz.js';
+import './p-Dp9SgP94.js';
+import './p-CAr8ZNeD.js';
+import './p-DcnvI7UR.js';
+import './p-DCS1KcvC.js';
+import './p-DogB9kfH.js';
+import './p-B8hpiXmh.js';
+import './p-CkIb3cUS.js';
+import './p-_ycZeBN4.js';
+import { a as LayoutBlockVariation } from './p-rbgkevJv.js';
+import './p-DJCufAhy.js';
+import './p-oKq_eErM.js';
+import './p-CPzcg9n3.js';
+import './p-CsNHGpkJ.js';
+import './p-D_VIx0pC.js';
+import './p-ArGkfrXt.js';
+import './p-Chk3GCYK.js';
+import './p-evtVuhQt.js';
+import './p-V-HTxO5a.js';
+import './p-DPkRL9Bv.js';
+import './p-D0CENVum.js';
+import './p-DE6sqPn9.js';
+import './p-DXqRzyRP.js';
+import './p-DoZkBEe8.js';
+import './p-m9xS70Ez.js';
+import './p-CmH9mJ43.js';
+import './p-DBcU_EnL.js';
+import './p-BvcVTm_t.js';
+import './p-bQJ38En_.js';
+import './p-DrVSK7Ws.js';
+import './p-CAmn5qzb.js';
+import './p-BYZUJ0Q_.js';
+import './p-DNjGvZvz.js';
+import './p-CHxBAbI8.js';
+import './p-rhVqmQwC.js';
+import './p-DPq588Q4.js';
+import { d as defineCustomElement$3 } from './p-BPCw-xqm.js';
+import { d as defineCustomElement$2 } from './p-qaq1Uk7s.js';
 
-const formReceiptCss = ".sc-digi-form-receipt-h{--digi--receipt--background-color:var(--digi--color--background--pop-out);--digi--receipt--margin:var(--digi--padding--small);--digi--receipt--padding-top:var(--digi--padding--large);--digi--receipt--padding-bottom:var(--digi--padding--largest);--digi--receipt--padding-top--desktop:var(--digi--padding--largest-2);--digi--receipt--padding-bottom--desktop:var(--digi--padding--largest-3);--digi--receipt--padding-horizontal:var(--digi--padding--medium);--digi--receipt--heading--color:var(--digi--color--text--primary);--digi--receipt--heading--font-size:var(--digi--typography--heading-2--font-size--mobile);--digi--receipt--heading--font-size--desktop:var(--digi--typography--heading-1--font-size--desktop-large);--digi--receipt--heading--font-weight:var(--digi--typography--heading-2--font-weight--mobile);--digi--receipt--heading--font-weight--desktop:var(--digi--typography--heading-1--font-weight--desktop);--digi--receipt--heading--font-family:var(--digi--global--typography--font-family--default)}.sc-digi-form-receipt-h .digi-form-receipt.sc-digi-form-receipt{background-color:var(--digi--receipt--background-color);display:grid;padding-top:var(--digi--receipt--padding-top);padding-bottom:var(--digi--receipt--padding-bottom)}@media (min-width: 61.9375rem){.sc-digi-form-receipt-h .digi-form-receipt.sc-digi-form-receipt{padding-top:var(--digi--receipt--padding-top--desktop);padding-bottom:var(--digi--receipt--padding-bottom--desktop)}}.sc-digi-form-receipt-h .digi-form-receipt--grid.sc-digi-form-receipt{padding-left:var(--digi--receipt--padding-horizontal);padding-right:var(--digi--receipt--padding-horizontal)}.sc-digi-form-receipt-h .digi-form-receipt--center.sc-digi-form-receipt .digi-form-receipt__content.sc-digi-form-receipt{display:flex;flex-direction:column;align-items:center}.sc-digi-form-receipt-h .digi-form-receipt__content.sc-digi-form-receipt{grid-column:1;grid-row:1}.sc-digi-form-receipt-h .digi-form-receipt__body.sc-digi-form-receipt{display:flex;flex-direction:column}.sc-digi-form-receipt-h .digi-form-receipt__heading.sc-digi-form-receipt{font-family:var(--digi--receipt--heading--font-family);font-size:var(--digi--receipt--heading--font-size);font-weight:var(--digi--receipt--heading--font-weight);margin-top:0;margin-bottom:0;display:block;color:var(--digi--receipt--heading--color)}@media (min-width: 61.9375rem){.sc-digi-form-receipt-h .digi-form-receipt__heading.sc-digi-form-receipt{font-size:var(--digi--receipt--heading--font-size--desktop);font-weight:var(--digi--receipt--heading--font-weight--desktop)}}.sc-digi-form-receipt-h .digi-form-receipt__icon.sc-digi-form-receipt{width:2.125rem;height:1.75rem;margin-bottom:var(--digi--receipt--margin)}@media (min-width: 61.9375rem){.sc-digi-form-receipt-h .digi-form-receipt__icon.sc-digi-form-receipt{width:2.75rem;height:2.25rem}}.sc-digi-form-receipt-h .digi-form-receipt__infographic-primary.sc-digi-form-receipt{fill:var(--digi--color--infographic--brand--primary)}.sc-digi-form-receipt-h .digi-form-receipt__slot-wrapper.sc-digi-form-receipt{display:flex;flex-direction:column;gap:1rem}.sc-digi-form-receipt-h .digi-form-receipt__slot-wrapper-has-content.sc-digi-form-receipt{padding-top:1.5rem}.sc-digi-form-receipt-s .digi-form-receipt__slot-wrapper-center-text{text-align:center}";
-const DigiFormReceiptStyle0 = formReceiptCss;
+const formReceiptCss = () => `.sc-digi-form-receipt-h{--digi--receipt--background-color:var(--digi--color--background--pop-out);--digi--receipt--margin:var(--digi--padding--small);--digi--receipt--padding-top:var(--digi--padding--large);--digi--receipt--padding-bottom:var(--digi--padding--largest);--digi--receipt--padding-top--desktop:var(--digi--padding--largest-2);--digi--receipt--padding-bottom--desktop:var(--digi--padding--largest-3);--digi--receipt--padding-horizontal:var(--digi--padding--medium);--digi--receipt--heading--color:var(--digi--color--text--primary);--digi--receipt--heading--font-size:var(--digi--typography--heading-2--font-size--mobile);--digi--receipt--heading--font-size--desktop:var(--digi--typography--heading-1--font-size--desktop-large);--digi--receipt--heading--font-weight:var(--digi--typography--heading-2--font-weight--mobile);--digi--receipt--heading--font-weight--desktop:var(--digi--typography--heading-1--font-weight--desktop);--digi--receipt--heading--font-family:var(--digi--global--typography--font-family--default)}.sc-digi-form-receipt-h .digi-form-receipt.sc-digi-form-receipt{background-color:var(--digi--receipt--background-color);display:grid;padding-top:var(--digi--receipt--padding-top);padding-bottom:var(--digi--receipt--padding-bottom)}@media (min-width: 61.9375rem){.sc-digi-form-receipt-h .digi-form-receipt.sc-digi-form-receipt{padding-top:var(--digi--receipt--padding-top--desktop);padding-bottom:var(--digi--receipt--padding-bottom--desktop)}}.sc-digi-form-receipt-h .digi-form-receipt--grid.sc-digi-form-receipt{padding-left:var(--digi--receipt--padding-horizontal);padding-right:var(--digi--receipt--padding-horizontal)}.sc-digi-form-receipt-h .digi-form-receipt--center.sc-digi-form-receipt .digi-form-receipt__content.sc-digi-form-receipt{display:flex;flex-direction:column;align-items:center}.sc-digi-form-receipt-h .digi-form-receipt__content.sc-digi-form-receipt{grid-column:1;grid-row:1}.sc-digi-form-receipt-h .digi-form-receipt__body.sc-digi-form-receipt{display:flex;flex-direction:column}.sc-digi-form-receipt-h .digi-form-receipt__heading.sc-digi-form-receipt{font-family:var(--digi--receipt--heading--font-family);font-size:var(--digi--receipt--heading--font-size);font-weight:var(--digi--receipt--heading--font-weight);margin-top:0;margin-bottom:0;display:block;color:var(--digi--receipt--heading--color)}@media (min-width: 61.9375rem){.sc-digi-form-receipt-h .digi-form-receipt__heading.sc-digi-form-receipt{font-size:var(--digi--receipt--heading--font-size--desktop);font-weight:var(--digi--receipt--heading--font-weight--desktop)}}.sc-digi-form-receipt-h .digi-form-receipt__icon.sc-digi-form-receipt{width:2.125rem;height:1.75rem;margin-bottom:var(--digi--receipt--margin)}@media (min-width: 61.9375rem){.sc-digi-form-receipt-h .digi-form-receipt__icon.sc-digi-form-receipt{width:2.75rem;height:2.25rem}}.sc-digi-form-receipt-h .digi-form-receipt__infographic-primary.sc-digi-form-receipt{fill:var(--digi--color--infographic--brand--primary)}.sc-digi-form-receipt-h .digi-form-receipt__slot-wrapper.sc-digi-form-receipt{display:flex;flex-direction:column;gap:1rem}.sc-digi-form-receipt-h .digi-form-receipt__slot-wrapper-has-content.sc-digi-form-receipt{padding-top:1.5rem}.sc-digi-form-receipt-s .digi-form-receipt__slot-wrapper-center-text{text-align:center}`;
 
 const FormReceipt = /*@__PURE__*/ proxyCustomElement(class FormReceipt extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        /**
+         * Sätter texten som ska visas
+         * @en Set text to be shown
+         */
         this.afText = '';
+        /**
+         * Sätter variationen på kortet. Kan vara 'fullwidth' eller 'grid'.
+         * @en Set card variation. Can be 'fullwidth' or 'grid'.
+         */
         this.afVariation = FormReceiptVariation.FULLWIDTH;
+        /**
+         * Sätter textsnittsjusteringen. Kan vara 'center' eller 'start'.
+         * @en Set font alignment. Can be 'center' or 'start'.
+         */
         this.afType = FormReceiptType.CENTER;
+        /**
+         * Sätter textens vikt (h1-h6)
+         * @en Set text level (h1-h6)
+         */
         this.afHeadingLevel = FormReceiptHeadingLevel.H2;
+        /**
+         * Kollar ifall default slot är tom
+         * @en Check if default slot is empty
+         */
         this.hasDefaultSlot = false;
     }
     componentDidLoad() {
@@ -106,11 +127,11 @@ const FormReceipt = /*@__PURE__*/ proxyCustomElement(class FormReceipt extends H
         return (h("div", { class: "digi-form-receipt__content" }, h("svg", { class: "digi-form-receipt__icon", "aria-hidden": "true", version: "1.1", viewBox: "0 0 35 29" }, h("title", null, "Check mark"), h("g", { fill: "none", "fill-rule": "evenodd" }, h("g", { transform: "translate(-170 -32)" }, h("g", { transform: "translate(170 32.325)" }, h("g", { transform: "translate(0 .77495)" }, h("mask", { id: "b", fill: "white" }, h("polygon", { points: "0 0 26.685 0 26.685 27.689 0 27.689" })), h("path", { d: "m13.711 27.689c-7.5602 0-13.711-6.2103-13.711-13.844 0-7.6345 6.151-13.845 13.711-13.845 3.1693 0 6.2611 1.1179 8.7048 3.1478l-1.5894 1.9509c-1.9972-1.6592-4.5241-2.5724-7.1155-2.5724-6.181 0-11.209 5.0773-11.209 11.319 0 6.2406 5.0283 11.318 11.209 11.318 4.7924 0 9.0551-3.0733 10.607-7.6478l2.3668 0.81853c-1.8983 5.5958-7.1124 9.3556-12.974 9.3556", fill: "#333", mask: "url(#b)" })), h("g", { transform: "translate(4.2177)" }, h("mask", { id: "a", fill: "white" }, h("polygon", { points: "0 0 30.425 0 30.425 23.496 0 23.496" })), h("path", { class: "digi-form-receipt__infographic-primary", d: "m30.191 3.2545-19.95 20.007c-0.31227 0.31253-0.81758 0.31253-1.1292 0l-8.878-8.9033c-0.31164-0.31316-0.31164-0.81992 0-1.1324l1.8818-1.8878c0.31164-0.31253 0.81758-0.31253 1.1292 0l6.4315 6.4499 17.504-17.553c0.31164-0.31316 0.81695-0.31316 1.1292 0l1.8818 1.8872c0.31164 0.31253 0.31164 0.81929 0 1.1324", fill: "#95C13E", mask: "url(#a)" })))))), h(this.afHeadingLevel, { class: "digi-form-receipt__heading", tabIndex: -1 }, this.afText), this.slotContent));
     }
     render() {
-        return (h("div", { key: 'a657922108a6318f7abfc6a3b942dea48ec77b33', class: Object.assign({ 'digi-form-receipt': true }, this.cssModifiers) }, this.afVariation === FormReceiptVariation.FULLWIDTH ? (h("digi-layout-block", { afVariation: LayoutBlockVariation.TRANSPARENT }, this.content)) : (this.content)));
+        return (h("div", { key: 'f28dea64d4e1d8600757d7c5afcaca5c33b596c9', class: Object.assign({ 'digi-form-receipt': true }, this.cssModifiers) }, this.afVariation === FormReceiptVariation.FULLWIDTH ? (h("digi-layout-block", { afVariation: LayoutBlockVariation.TRANSPARENT }, this.content)) : (this.content)));
     }
     get hostElement() { return this; }
-    static get style() { return DigiFormReceiptStyle0; }
-}, [6, "digi-form-receipt", {
+    static get style() { return formReceiptCss(); }
+}, [262, "digi-form-receipt", {
         "afText": [1, "af-text"],
         "afVariation": [1, "af-variation"],
         "afType": [1, "af-type"],
@@ -124,17 +145,17 @@ function defineCustomElement$1() {
     const components = ["digi-form-receipt", "digi-layout-block", "digi-layout-container"];
     components.forEach(tagName => { switch (tagName) {
         case "digi-form-receipt":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, FormReceipt);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), FormReceipt);
             }
             break;
         case "digi-layout-block":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$3();
             }
             break;
         case "digi-layout-container":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$2();
             }
             break;