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

package/dist/collection/components/_calendar/calendar-datepicker/calendar-datepicker.types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/_chart/bar-chart/bar-chart.css

@@ -3,20 +3,21 @@
 :host .digi-bar-chart {
   font-family: var(--digi--global--typography--font-family--default);
 }
-:host .chartTitle {
-  --digi--typography--h2--margin: 0.5rem;
-  --digi--typography--h3--margin: 0.5rem;
-  --digi--typography--h4--margin: 0.5rem;
-  --digi--typography--h5--margin: 0.5rem;
-  --digi--typography--h6--margin: 0.5rem;
+:host .topWrapper,
+:host .chartTitle .digi-typography {
   display: flex;
-  justify-content: flex-start;
   flex-direction: column;
-  align-items: left;
-  text-align: left;
-  padding-bottom: 1rem;
-  margin-right: 0.5rem;
-  flex-grow: 2;
+  gap: 0.75rem;
+}
+:host .topWrapper {
+  margin-bottom: 0.75rem;
+}
+:host .chartTitle {
+  --MARGIN--HEADING-2: 0;
+  --MARGIN--HEADING-3: 0;
+  --MARGIN--HEADING-4: 0;
+  --MARGIN--HEADING-5: 0;
+  --MARGIN--HEADING-6: 0;
 }
 :host .buttonWrapper {
   --digi--button--padding--medium: 4px 4px 0.8125rem 0;
@@ -79,11 +80,4 @@
   background-repeat: no-repeat;
   background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
   background-attachment: local, local, scroll, scroll;
-}
-:host .topWrapper {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-end;
-  justify-content: space-between;
-  flex-wrap: wrap;
 }

package/dist/collection/components/_chart/chart-line/chart-line.css

@@ -13,28 +13,32 @@
   min-height: fit-content;
 }
 
-.buttonWrapper {
-  --digi--button--padding--medium: 0 0 0.75rem 0;
-}
-
 .chart {
   box-sizing: content-box;
   width: auto;
 }
 
-.chartTitle {
-  --digi--typography--h2--margin: 0.5rem;
-  --digi--typography--h3--margin: 0.5rem;
-  --digi--typography--h4--margin: 0.5rem;
-  --digi--typography--h5--margin: 0.5rem;
-  --digi--typography--h6--margin: 0.5rem;
+.topWrapper,
+.chartTitle .digi-typography {
   display: flex;
-  justify-content: flex-start;
   flex-direction: column;
-  align-items: left;
-  text-align: left;
-  padding-bottom: 1rem;
-  flex-grow: 2;
+  gap: 0.75rem;
+}
+
+.topWrapper {
+  margin-bottom: 0.75rem;
+}
+
+.chartTitle {
+  --MARGIN--HEADING-2: 0;
+  --MARGIN--HEADING-3: 0;
+  --MARGIN--HEADING-4: 0;
+  --MARGIN--HEADING-5: 0;
+  --MARGIN--HEADING-6: 0;
+}
+
+.buttonWrapper {
+  --digi--button--padding--medium: 0 0 0.75rem 0;
 }
 
 .close {
@@ -150,12 +154,4 @@
   overflow-y: auto;
   scrollbar-width: thin;
   scrollbar-color: rgb(245, 245, 245) transparent;
-}
-
-.topWrapper {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-end;
-  justify-content: space-between;
-  flex-wrap: wrap;
 }

package/dist/collection/components/_code/code-block/code-block.css

@@ -30,7 +30,7 @@ digi-code-block .digi-code-block--light pre[class*=language-] {
   text-align: left;
   white-space: pre-wrap;
   word-spacing: normal;
-  word-break: normal;
+  word-break: break-word;
   word-wrap: normal;
   line-height: 1.5;
   -moz-tab-size: 4;
@@ -174,7 +174,7 @@ digi-code-block .digi-code-block--dark pre[class*=language-] {
   text-align: left;
   white-space: pre-wrap;
   word-spacing: normal;
-  word-break: normal;
+  word-break: break-word;
   word-wrap: normal;
   line-height: 1.5;
   -moz-tab-size: 4;

package/dist/collection/components/_code/code-example/code-example.css

@@ -57,6 +57,7 @@ License: none (public domain)
   --digi--button--color--icon--function--hover: var(--digi--color--text--secondary);
 }
 .digi-code-example__example {
+  height: 100%;
   padding: var(--digi--padding--largest-2);
   overflow-x: auto;
 }

package/dist/collection/components/_form/form-category-filter/form-category-filter.js

@@ -92,7 +92,7 @@ export class FormCategoryFilter {
         this.afHideToggle = !this.toggleHidden;
     }
     render() {
-        return (h(Host, { key: '3ac402f23844ae8c7dd1fd4ac3a5a5afa2ec8dc8' }, h("div", { key: '9afa72dd9be35e9d7bf12ef6aedf05c0c7dbc171', class: {
+        return (h(Host, { key: '74f5f06035832ce1cebf26ab089e404a649f9240' }, h("div", { key: '7e71bbdf539632985c56ba33ecba9e57b64d271e', class: {
                 'digi-form-category-filter': true
             } }, this.displayCategories().map((category) => (h("digi-button", { class: {
                 'digi-form-category-filter--category': true,
@@ -100,7 +100,7 @@ export class FormCategoryFilter {
             }, afVariation: "primary", afAriaPressed: this.selectedCategories.includes(category.name), onAfOnClick: () => {
                 this.toggleCategory(category);
             } }, typeof category.hits === 'undefined' && category.name, typeof category.hits !== 'undefined' && (h("span", null, category.name, ' ', h("span", { class: "digi-form-category-filter--category--thin-text" }, "(", category.hits, ")")))))), this.afHideToggle === false &&
-            this.afCategories.length > this.afVisibleCollapsed && (h("div", { key: '625315577e839617bfd3e6bba0af4b82e2a5ab73' }, h("digi-button", { key: 'bebf308e6427a4d37507b1c705e5583f7d620603', afVariation: "function", afAriaExpanded: !this.collapsed, onClick: () => {
+            this.afCategories.length > this.afVisibleCollapsed && (h("div", { key: '415f044908497e9def159aeda3eeebd597ba1a6d' }, h("digi-button", { key: '176c0a91996e9134fbceaea2916344962cbb9561', afVariation: "function", afAriaExpanded: !this.collapsed, onClick: () => {
                 this.toggleCollapsed();
             } }, this.collapsed ? 'Visa alla' : 'Visa färre', this.collapsed ? (h("digi-icon-plus", { slot: "icon", "aria-hidden": "true" })) : (h("digi-icon-minus", { slot: "icon", "aria-hidden": "true" }))))))));
     }
@@ -162,9 +162,9 @@ export class FormCategoryFilter {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "If the list should start with a 'All categories' category"
+                            "text": "If the list should start with a button for 'All categories'"
                         }],
-                    "text": "Ifall listan ska b\u00F6rja med en 'Alla kategorier' kategori"
+                    "text": "Ifall listan ska b\u00F6rja med en knapp f\u00F6r 'Alla kategorier'"
                 },
                 "getter": false,
                 "setter": false,
@@ -185,9 +185,9 @@ export class FormCategoryFilter {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "If the 'All categories' category should start selected"
+                            "text": "If the 'All categories' category should be selected from start"
                         }],
-                    "text": "Ifall 'Alla kategorier' kategorin ska b\u00F6rja vald"
+                    "text": "Ifall 'Alla kategorier' kategorin ska vara vald fr\u00E5n start"
                 },
                 "getter": false,
                 "setter": false,
@@ -210,7 +210,7 @@ export class FormCategoryFilter {
                             "name": "en",
                             "text": "The name of the 'All categories' category"
                         }],
-                    "text": "Namnet p\u00E5 'Alla kategorier' kategorin"
+                    "text": "Namnet p\u00E5 'Alla kategorier'-kategorin"
                 },
                 "getter": false,
                 "setter": false,
@@ -254,9 +254,9 @@ export class FormCategoryFilter {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "If the list should start out collapsed"
+                            "text": "If the list should be collapsed from start"
                         }],
-                    "text": "Ifall listan ska var kollapsad fr\u00E5n b\u00F6rjan"
+                    "text": "Ifall listan ska vara kollapsad fr\u00E5n b\u00F6rjan"
                 },
                 "getter": false,
                 "setter": false,
@@ -300,9 +300,9 @@ export class FormCategoryFilter {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Show all categories and hide button to \"visa fler\"/\"visa f\u00E4rre\""
+                            "text": "Show all categories and hide button to show more/fewer"
                         }],
-                    "text": "Visa alla kategorier och d\u00F6lj knappen f\u00F6r att \"visa fler/visa f\u00E4rre"
+                    "text": "Visa alla kategorier och d\u00F6lj knappen f\u00F6r att visa fler/f\u00E4rre"
                 },
                 "getter": false,
                 "setter": false,
@@ -333,8 +333,8 @@ export class FormCategoryFilter {
                     "text": "Sker vid \u00E4ndrade valda kategorier"
                 },
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
+                    "original": "string[]",
+                    "resolved": "string[]",
                     "references": {}
                 }
             }];

package/dist/collection/components/_form/form-checkbox/form-checkbox.css

@@ -870,6 +870,12 @@ body {
   opacity: 1;
 }
 
+.digi-form-checkbox__input:focus:not(:checked) ~ .digi-form-checkbox__label .digi-form-checkbox__box {
+  outline: 2px solid black;
+  outline-offset: 2px;
+  box-shadow: 0px 0px 0px 5px white;
+}
+
 .digi-form-checkbox__input:focus-visible ~ .digi-form-checkbox__label .digi-form-checkbox__box {
   outline: 2px solid black;
   outline-offset: 2px;

package/dist/collection/components/_form/form-checkbox/form-checkbox.js

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { randomIdGenerator } from "../../../global/utils/randomIdGenerator";
 import { FormCheckboxVariation } from "./form-checkbox-variation.enum";
 import { FormCheckboxValidation } from "./form-checkbox-validation.enum";
@@ -7,6 +7,7 @@ import { FormCheckboxLayout } from "./form-checkbox-layout.enum";
  * @enums FormCheckboxValidation - form-checkbox-validation.enum.ts
  * @enums FormCheckboxVariation - form-checkbox-variation.enum.ts
  * @swedishName Kryssruta
+ * @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet
  */
 export class FormCheckbox {
     constructor() {
@@ -45,6 +46,13 @@ export class FormCheckbox {
     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.value = this.afValue;
         this.afChecked
@@ -89,7 +97,7 @@ export class FormCheckbox {
         this.afOnInput.emit(e);
     }
     render() {
-        return (h("div", { key: '3a4c3d66ae5b6fb5edcf3db68c0454458d0e7317', class: Object.assign({ 'digi-form-checkbox': true }, this.cssModifiers) }, h("input", { key: '960e66ccc1aa15956b147369a829fdcd87ffacb0', class: "digi-form-checkbox__input", ref: (el) => {
+        return (h(Host, { key: 'd5ce6d161fa5df244c431b3690d87da9461afaa7', tabindex: -1 }, h("div", { key: '7c7f0bdab0c3efb3721373cf918f488737f62329', class: Object.assign({ 'digi-form-checkbox': true }, this.cssModifiers) }, h("input", { key: '2a3640307990d9f0b23f123d3032004912c5f0a0', class: "digi-form-checkbox__input", ref: (el) => {
                 var _a;
                 this._input = el;
                 (_a = this === null || this === void 0 ? void 0 : this.afInputRef) === null || _a === void 0 ? void 0 : _a.call(this, el);
@@ -97,7 +105,7 @@ export class FormCheckbox {
                 ? null
                 : `${this.afAriaDescribedby ? `${this.afAriaDescribedby} ` : ''}${this.afDescription ? `${this.afId}-description` : ''}`, "aria-labelledby": this.afAriaLabelledby, "aria-label": this.afAriaLabel, "aria-invalid": this.afValidation === FormCheckboxValidation.ERROR
                 ? 'true'
-                : 'false', required: this.afRequired, id: this.afId, name: this.afName, type: "checkbox", checked: this.afChecked, value: this.afValue, indeterminate: this.afIndeterminate, autofocus: this.afAutofocus ? this.afAutofocus : null }), h("label", { key: '49f8b41478bf43aff3a069dcced39dadd77d56a0', htmlFor: this.afId, class: "digi-form-checkbox__label" }, h("span", { key: '3d15477d96fe56f8a3e75e15f24f71c4fb279da9', class: "digi-form-checkbox__box" }), this.afLabel), !!this.afDescription && (h("p", { key: '68ea2e81febd0d60c3209d8227eed4d0ee165db2', id: `${this.afId}-description`, class: "digi-form-checkbox__description" }, this.afDescription))));
+                : 'false', required: this.afRequired, id: this.afId, name: this.afName, type: "checkbox", checked: this.afChecked, value: this.afValue, indeterminate: this.afIndeterminate, autofocus: this.afAutofocus ? this.afAutofocus : null }), h("label", { key: 'd1802bf01ee6ec34e59bbc08376a70356bc83dcc', htmlFor: this.afId, class: "digi-form-checkbox__label" }, h("span", { key: '0bc285971edcc970d8f08fcb263b8695502ee0ec', class: "digi-form-checkbox__box" }), this.afLabel), !!this.afDescription && (h("p", { key: 'c5e15b2070e28c9fe38d09ce7da85b59c9c0c0b5', id: `${this.afId}-description`, class: "digi-form-checkbox__description" }, this.afDescription)))));
     }
     static get is() { return "digi-form-checkbox"; }
     static get encapsulation() { return "scoped"; }
@@ -368,12 +376,12 @@ export class FormCheckbox {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Internal mirror of afValue. \nDo not use directly \u2014 use afValue instead."
+                            "text": "Internal mirror of afValue.\nDo not use directly \u2014 use afValue instead."
                         }, {
                             "name": "ignore",
                             "text": undefined
                         }],
-                    "text": "Intern spegling av afValue. \nSka inte anv\u00E4ndas direkt \u2014 anv\u00E4nd afValue ist\u00E4llet."
+                    "text": "Intern spegling av afValue.\nSka inte anv\u00E4ndas direkt \u2014 anv\u00E4nd afValue ist\u00E4llet."
                 },
                 "getter": false,
                 "setter": false,
@@ -551,8 +559,11 @@ export class FormCheckbox {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "TODO"
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Denna prop kommer att tas bort i slutet av juli"
+                        }],
+                    "text": "Tabindex"
                 },
                 "getter": false,
                 "setter": false,
@@ -752,4 +763,13 @@ export class FormCheckbox {
                 "methodName": "onAfCheckedChanged"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "focus",
+                "method": "focusOnInput",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

package/dist/collection/components/_form/form-error-list/form-error-list.css

@@ -4,12 +4,12 @@
   --digi--form-error-list--item--padding: var(--digi--padding--smaller) 0 0 0;
   --digi--form-error-list--item--margin: 0;
 }
-:host .digi-form-error-list__list {
+:host .digi-form-error-list ul {
   list-style: none;
   padding: var(--digi--form-error-list--list--padding);
   margin: var(--digi--form-error-list--list--margin);
 }
-:host .digi-form-error-list__item {
+:host .digi-form-error-list ul > li {
   list-style: none;
   padding: var(--digi--form-error-list--item--padding);
   margin: var(--digi--form-error-list--item--margin);

package/dist/collection/components/_form/form-error-list/form-error-list.js

@@ -1,7 +1,6 @@
 import { h } from "@stencil/core";
 import { randomIdGenerator } from "../../../global/utils/randomIdGenerator";
 import { FormErrorListHeadingLevel } from "./form-error-list-heading-level.enum";
-import { logger } from "../../../global/utils/logger";
 import { TypographyVariation, } from "../../../enums";
 import { NotificationAlertVariation } from "../../_notification/notification-alert/notification-alert-variation.enum";
 /**
@@ -25,61 +24,33 @@ export class FormErrorList {
     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' }))));
     }
     static get is() { return "digi-form-error-list"; }
     static get encapsulation() { return "scoped"; }
@@ -256,12 +227,18 @@ export class FormErrorList {
                             "name": "en",
                             "text": "The link elements' 'onclick' event."
                         }],
-                    "text": "L\u00E4nkelementens 'onclick'-event."
+                    "text": "Anv\u00E4nds f\u00F6r att f\u00E5nga upp href till l\u00E4nken man har klickat p\u00E5"
                 },
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
+                    "original": "ClickLink",
+                    "resolved": "ClickLink",
+                    "references": {
+                        "ClickLink": {
+                            "location": "import",
+                            "path": "./form-error-list.types",
+                            "id": "src/components/_form/form-error-list/form-error-list.types.ts::ClickLink"
+                        }
+                    }
                 }
             }, {
                 "method": "afOnReady",

package/dist/collection/components/_form/form-error-list/form-error-list.types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/_form/form-fieldset/form-fieldset-validation.enum.js

@@ -0,0 +1,7 @@
+export var FormFieldsetValidation;
+(function (FormFieldsetValidation) {
+    FormFieldsetValidation["SUCCESS"] = "success";
+    FormFieldsetValidation["ERROR"] = "error";
+    FormFieldsetValidation["WARNING"] = "warning";
+    FormFieldsetValidation["NEUTRAL"] = "neutral";
+})(FormFieldsetValidation || (FormFieldsetValidation = {}));

package/dist/collection/components/_form/form-fieldset/form-fieldset.js

@@ -1,7 +1,8 @@
 import { h } from "@stencil/core";
 import { randomIdGenerator } from "../../../global/utils/randomIdGenerator";
+import { FormFieldsetValidation } from "./form-fieldset-validation.enum";
 /**
- * @slot default - Ska vara formulärselement. Till exempel digi-form-input.
+ * @slot default - Formulärkomponenter, till exempel digi-form-input eller digi-form-checkbox.
  * @swedishName Fältgruppering
  */
 export class FormFieldset {
@@ -10,9 +11,16 @@ export class FormFieldset {
         this.afName = undefined;
         this.afForm = undefined;
         this.afId = randomIdGenerator('digi-form-fieldset');
+        this.afValidation = FormFieldsetValidation.NEUTRAL;
+        this.afValidationText = undefined;
+        this.afErrorMessageIsAlert = true;
+    }
+    get errorMessageIsAlert() {
+        return (this.afErrorMessageIsAlert !== false &&
+            this.afErrorMessageIsAlert !== 'false');
     }
     render() {
-        return (h("fieldset", { key: '9c28717f7316cb72cca157a6042e3cc7c7c9a82d', class: "digi-form-fieldset", name: this.afName, form: this.afForm, id: this.afId }, this.afLegend && (h("legend", { key: '151f99611f8bdeb2431bd834bd2f934ac370824d', class: "digi-form-fieldset__legend" }, this.afLegend)), h("slot", { key: '10b0fe0ee00e839ad7b63375ad7fae5b632d16f8' })));
+        return (h("fieldset", { key: '2a3aeddb712d49ff99f788867ac270f563f34454', class: "digi-form-fieldset", name: this.afName, form: this.afForm, id: this.afId }, this.afLegend && (h("legend", { key: 'a2e44584d821be6b1fd71a04d9313fdb572b8390', class: "digi-form-fieldset__legend" }, this.afLegend)), h("slot", { key: '072437bb8dd5064642f96c605388957016423360' }), h("div", { key: '57859d430e16c47b4fd70174f13b04b9dec61561', class: "digi-form-input__validation", "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-text` }, this.afValidation != FormFieldsetValidation.NEUTRAL && (h("digi-form-validation-message", { key: 'b74841c651c2a9c0822b2eaeb3d21be617b279a8', class: "digi-form-input__validation-message", "af-variation": this.afValidation }, this.afValidationText)))));
     }
     static get is() { return "digi-form-fieldset"; }
     static get encapsulation() { return "scoped"; }
@@ -43,7 +51,7 @@ export class FormFieldset {
                             "name": "en",
                             "text": "The legend text."
                         }],
-                    "text": "Legend-elementets text."
+                    "text": "Text till legend-elementet som fungerar som f\u00E4ltgruppens rubrik."
                 },
                 "getter": false,
                 "setter": false,
@@ -65,7 +73,7 @@ export class FormFieldset {
                             "name": "en",
                             "text": "The fieldset name attribute."
                         }],
-                    "text": "Fieldset-elementets namn attribut."
+                    "text": "Text till name-attributet som ger f\u00E4ltgruppen ett programmatiskt namn."
                 },
                 "getter": false,
                 "setter": false,
@@ -87,7 +95,7 @@ export class FormFieldset {
                             "name": "en",
                             "text": "The fieldset form attribute."
                         }],
-                    "text": "Fieldset-elementets form attribut."
+                    "text": "Id f\u00F6r form-elementet som f\u00E4ltgruppen tillh\u00F6r."
                 },
                 "getter": false,
                 "setter": false,
@@ -116,6 +124,80 @@ export class FormFieldset {
                 "attribute": "af-id",
                 "reflect": false,
                 "defaultValue": "randomIdGenerator('digi-form-fieldset')"
+            },
+            "afValidation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FormFieldsetValidation",
+                    "resolved": "FormFieldsetValidation.ERROR | FormFieldsetValidation.NEUTRAL | FormFieldsetValidation.SUCCESS | FormFieldsetValidation.WARNING",
+                    "references": {
+                        "FormFieldsetValidation": {
+                            "location": "import",
+                            "path": "./form-fieldset-validation.enum",
+                            "id": "src/components/_form/form-fieldset/form-fieldset-validation.enum.ts::FormFieldsetValidation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "en",
+                            "text": "Set input validation status"
+                        }],
+                    "text": "S\u00E4tter valideringsstatus. Kan vara 'success', 'error', 'warning', 'neutral' eller ingenting."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "af-validation",
+                "reflect": false,
+                "defaultValue": "FormFieldsetValidation.NEUTRAL"
+            },
+            "afValidationText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "en",
+                            "text": "Set input validation message"
+                        }],
+                    "text": "S\u00E4tter valideringsmeddelandet"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "af-validation-text",
+                "reflect": false
+            },
+            "afErrorMessageIsAlert": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | string",
+                    "resolved": "boolean | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "en",
+                            "text": "If the value is true, the error message gets the attribute role=\"alert\".\nIf the error is shown together with multiple errors (for example after server-side validation), the value should be set to false."
+                        }],
+                    "text": "Om v\u00E4rdet \u00E4r true f\u00E5r felmeddelandet attributet role=\"alert\".\nOm felet visas tillsammans med flera andra fel (till exempel efter servervalidering) ska v\u00E4rdet s\u00E4ttas till false."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "af-error-message-is-alert",
+                "reflect": false,
+                "defaultValue": "true"
             }
         };
     }