@designsystem-se/af 38.0.1-beta.1 → 38.1.0

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

@@ -110,7 +110,7 @@ export class FormCheckbox {
         this.afOnInput.emit(e);
     }
     render() {
-        return (h(Host, { key: 'd7e12f0914eb5fc16e1209e0750a73efd66fca33', tabindex: -1 }, h("div", { key: 'b33d1c998d5ae378bb8696252532856b13725e9f', class: Object.assign({ 'digi-form-checkbox': true }, this.cssModifiers) }, h("input", { key: '727323a21a37e0261e0a977d156973299348e624', class: "digi-form-checkbox__input", ref: (el) => {
+        return (h(Host, { key: '93a52532d5ee8e2b89982b3d06509c16b3656bce', tabindex: -1 }, h("div", { key: '3f2fe30e35c36080d80fdec5c57abf8e310ae14b', class: Object.assign({ 'digi-form-checkbox': true }, this.cssModifiers) }, h("input", { key: 'a45c26da379bff48830f0b03ceebcf24b06c3b17', 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);
@@ -118,7 +118,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: '233961330af245e0aa18ad7dd5ac15ee904f7fee', htmlFor: this.afId, class: "digi-form-checkbox__label" }, h("span", { key: '92dfa2221b06f2103bcb1790c78a9eca5f75bda0', class: "digi-form-checkbox__box" }), this.afLabel), !!this.afDescription && (h("p", { key: '6de87be41c6794767c89fa239a85785e56f1d25f', 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: '54cd68f1c10fd023e9dd81bd0fabb2920b911c12', htmlFor: this.afId, class: "digi-form-checkbox__label" }, h("span", { key: 'c7184f48868d38d04485a48f214cc3c37d862ba4', class: "digi-form-checkbox__box" }), this.afLabel), !!this.afDescription && (h("p", { key: 'afc00a7de3cef740bdbf23607cd9247887752759', id: `${this.afId}-description`, class: "digi-form-checkbox__description" }, this.afDescription)))));
     }
     static get is() { return "digi-form-checkbox"; }
     static get encapsulation() { return "scoped"; }

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

@@ -9,7 +9,6 @@ import { NotificationAlertVariation } from "../../_notification/notification-ale
  */
 export class FormErrorList {
     constructor() {
-        this.linkItems = [];
         this.afHeading = undefined;
         this.afHeadingLevel = FormErrorListHeadingLevel.H2;
         this.afDescription = undefined;
@@ -50,7 +49,7 @@ export class FormErrorList {
         this.afOnClickLink.emit({ id });
     }
     render() {
-        return (h("div", { key: 'fc8938c08154c626d2adaabf937d9dbe2a8e5081', class: "digi-form-error-list", id: this.afId }, h("digi-notification-alert", { key: '5b40a2ad599aa762aa7e99c53a800036a6a13803', ref: (el) => (this._notificationAlert = el), "af-heading": this.afHeading, "af-heading-level": this.afHeadingLevel, "af-variation": NotificationAlertVariation.DANGER }, this.afDescription && (h("digi-typography", { key: 'd572fbb4b86f28bd4691cb794ea3a4d0178bb6d1', "af-variation": TypographyVariation.SMALL }, h("p", { key: '021b86a736414bacad64f235b17b80d991564cf0', class: "digi-form-error-list__description" }, this.afDescription))), h("slot", { key: 'acc3bc00c90958b753ae608e40383aa0cb725350' }))));
+        return (h("div", { key: '59bc43d4b3dd0149647b50203cc1ae585d829006', class: "digi-form-error-list", id: this.afId }, h("digi-notification-alert", { key: 'a2b034276ff7549c9c0711202020e3753da7808d', ref: (el) => (this._notificationAlert = el), "af-heading": this.afHeading, "af-heading-level": this.afHeadingLevel, "af-variation": NotificationAlertVariation.DANGER }, this.afDescription && (h("digi-typography", { key: '3a61c65373b92a73694770f851c6727e27f853e7', "af-variation": TypographyVariation.SMALL }, h("p", { key: 'a088b4d084f5a6db85cedcb4f469f4dff803f8f6', class: "digi-form-error-list__description" }, this.afDescription))), h("slot", { key: '794c42cdece0d06945255b70a96a6992eb4dcd4c' }))));
     }
     static get is() { return "digi-form-error-list"; }
     static get encapsulation() { return "scoped"; }
@@ -210,11 +209,6 @@ export class FormErrorList {
             }
         };
     }
-    static get states() {
-        return {
-            "linkItems": {}
-        };
-    }
     static get events() {
         return [{
                 "method": "afOnClickLink",

package/dist/collection/components/_form/form-file-upload/form-file-upload.css

@@ -9,7 +9,6 @@ License: none (public domain)
   --digi--form-file-upload--color--background--medium--hover: var(--digi--color--background--interactive--hover--secondary);
   --digi--form-file-upload--color--background--large--default: var(--digi--color--background--interactive--default--quaternary);
   --digi--form-file-upload--color--background--large--hover: var(--digi--color--background--interactive--hover--secondary);
-  --digi--form-file-upload--color--background--uploaded-files: var(--digi--color--background--secondary-elevated);
   --digi--form-file-upload--color--border--small--default: var(--digi--color--border--interactive--default--on-input-nuance);
   --digi--form-file-upload--color--border--small--hover: var(--digi--color--border--interactive--hover--primary);
   --digi--form-file-upload--color--border--medium--default: var(--digi--color--border--interactive--default--on-input-nuance);
@@ -63,7 +62,7 @@ License: none (public domain)
   font-family: var(--digi--global--typography--font-family--default);
 }
 :host .digi-form-file-upload--small {
-  --COLOR--BACKGROUND--FILE-LIST: var(--digi--form-file-upload--color--background--uploaded-files);
+  --COLOR--BACKGROUND--FILE-LIST: var(--digi--form-file-upload--color--background--small--default);
   --COLOR--BACKGROUND--DEFAULT: var(--digi--form-file-upload--color--background--small--default);
   --COLOR--BACKGROUND--HOVER: var(--digi--form-file-upload--color--background--small--hover);
   --COLOR--BORDER--DEFAULT: var(--digi--form-file-upload--color--border--small--default);
@@ -77,7 +76,7 @@ License: none (public domain)
   --ICON--PADDING: var(--digi--form-file-upload--padding--small--icon);
 }
 :host .digi-form-file-upload--medium {
-  --COLOR--BACKGROUND--FILE-LIST: var(--digi--form-file-upload--color--background--uploaded-files);
+  --COLOR--BACKGROUND--FILE-LIST: var(--digi--form-file-upload--color--background--small--default);
   --COLOR--BACKGROUND--DEFAULT: var(--digi--form-file-upload--color--background--medium--default);
   --COLOR--BACKGROUND--HOVER: var(--digi--form-file-upload--color--background--medium--hover);
   --COLOR--BORDER--DEFAULT: var(--digi--form-file-upload--color--border--medium--default);
@@ -91,7 +90,7 @@ License: none (public domain)
   --ICON--PADDING: var(--digi--form-file-upload--padding--medium--icon);
 }
 :host .digi-form-file-upload--large {
-  --COLOR--BACKGROUND--FILE-LIST: var(--digi--form-file-upload--color--background--uploaded-files);
+  --COLOR--BACKGROUND--FILE-LIST: var(--digi--form-file-upload--color--background--small--default);
   --COLOR--BACKGROUND--DEFAULT: var(--digi--form-file-upload--color--background--large--default);
   --COLOR--BACKGROUND--HOVER: var(--digi--form-file-upload--color--background--large--hover);
   --COLOR--BORDER--DEFAULT: var(--digi--form-file-upload--color--border--large--default);

package/dist/collection/components/_form/form-file-upload/form-file-upload.js

@@ -112,6 +112,7 @@ export class FormFileUpload {
      * @en Import array with files without triggering upload event. A file object needs to contain an id, status and the file itself.
      */
     async afMImportFiles(files) {
+        this.resetErrors();
         if (files && files.length > 0) {
             for (const importedFile of files) {
                 this.validateFile(importedFile);
@@ -126,6 +127,14 @@ export class FormFileUpload {
     async afMGetFormControlElement() {
         return this._input;
     }
+    /**
+     * Rensar komponentens fillista och eventuella felmeddelanden.
+     * @en Clears the component's file list and any error messages.
+     */
+    async afMClearFiles() {
+        this.files = [];
+        this.resetErrors();
+    }
     /**
      * 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.
@@ -173,7 +182,11 @@ export class FormFileUpload {
         let exist = false;
         if (this.files.length > 0) {
             this.files.forEach((file) => {
-                if (file.name === fileToCheck.name) {
+                if (file['id'] === fileToCheck['id']) {
+                    exist = true;
+                    return;
+                }
+                else if (file.name === fileToCheck.name) {
                     exist = true;
                 }
             });
@@ -557,22 +570,22 @@ export class FormFileUpload {
             } }, this.renderFiles())));
     }
     render() {
-        return (h(Fragment, { key: '1104991979216e10bd2e137de392134a9dd970f3' }, h("digi-util-breakpoint-observer", { key: '645a8f2849a39c068b77fa7c6ddfd726e834b3b2', onAfOnChange: (e) => this.breakpointHandler(e) }), h("div", { key: 'c6b2785961f0e0b0cb2b2ccb7da42d663b9e9e3b', class: Object.assign({ 'digi-form-file-upload': true }, this.cssModifiers) }, h("digi-form-label", { key: 'd51e788ee53461e075b0f73b600608646c70032f', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("div", { key: '9df4b7deaca899f1c06bf615065a2fce7eea4bc0', class: {
+        return (h(Fragment, { key: 'bec280d44d534a720927ab737b34335600c3fe80' }, h("digi-util-breakpoint-observer", { key: '93983b718eda1869ff95f7a0abe8c6704395a1e0', onAfOnChange: (e) => this.breakpointHandler(e) }), h("div", { key: '23f30473aa0dd681c6c4ea20138d3f13391bb070', class: Object.assign({ 'digi-form-file-upload': true }, this.cssModifiers) }, h("digi-form-label", { key: 'c42a873187b3bf30ddfdb71561d6902a8b2f98fe', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("div", { key: 'db1082e11bafb320c13a790d639d37ca821617ac', 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: '8c35b4e2523db4f4f892d2f615caedb8bb3a9ebe', class: "digi-form-file-upload__upload-area-overlay" })), h("div", { key: '096b05c159ce7722687cdc0b1a0ff4889a5485e2', class: "digi-form-file-upload__text-area" }, h("button", { key: '97504d954e2f3a0e76d99fb4d5049ddea108a32f', type: "button", id: this.afId + '-button', ref: (el) => {
+            this.afVariation != FormFileUploadVariation.SMALL && (h("div", { key: 'f58d5f61b5568263e9b60b255f47e6ef418c78e5', class: "digi-form-file-upload__upload-area-overlay" })), h("div", { key: 'c58c52f7e2c8aa8d17fe510ef90435d488844237', class: "digi-form-file-upload__text-area" }, h("button", { key: '1bb7fa84e0778702d0e77008f7d468d560ac8e17', 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: 'e47597d6988db6a71c22fb9ab4cfa877be4a48fa', "aria-hidden": "true", class: "digi-form-file-upload__button-icon paper-clip", slot: "icon" }), this.afUploadBtnText
+            } }, h("digi-icon-paperclip", { key: 'a84b67ad055682b1c1b013ec948af0935c35ed0c', "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: 'b21162f7873e21a8b3ed2d286ef154b66b95c8ec', ref: (el) => {
+            : _t.form.file_choose), h("input", { key: 'd0babe3bcbc5d03f2436c0f4a7ee23a93ecb0474', 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: 'c8e448ef96e9d4f292ec88606526e06935192308' }, this.afVariation !== FormFileUploadVariation.SMALL &&
-            _t.form.file_dropzone))), h("p", { key: '8c6f1b6190eb4f87bbcd9d50f4c4929cdcf4c026', class: "visually-hidden", role: this.errorMessageIsAlert ? 'alert' : null, "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: '20a4158d0462ee2f871bddb57b9e168d356573ed' }, this.afVariation !== FormFileUploadVariation.SMALL &&
+            _t.form.file_dropzone))), h("p", { key: 'ade6d22fde218536ce42daff285a1605ac16bdb1', 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: '7faefe886463ce493824665375b3b4ab0aec5753', class: "digi-form-file-upload__files" }, this.renderErrorMessage(), this.renderFileContainer())))));
+            } }), (this.files.length > 0 || this.error) && (h("div", { key: '06044ba8e2a5d7e76374af1dfa479c891554ab45', class: "digi-form-file-upload__files" }, this.renderErrorMessage(), this.renderFileContainer())))));
     }
     static get is() { return "digi-form-file-upload"; }
     static get encapsulation() { return "scoped"; }
@@ -1317,6 +1330,26 @@ export class FormFileUpload {
                     "text": "",
                     "tags": []
                 }
+            },
+            "afMClearFiles": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Rensar komponentens fillista och eventuella felmeddelanden.",
+                    "tags": [{
+                            "name": "en",
+                            "text": "Clears the component's file list and any error messages."
+                        }]
+                }
             }
         };
     }

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

@@ -15,7 +15,7 @@ License: none (public domain)
   --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--dropdown);
+  --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;

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

@@ -99,9 +99,9 @@ export class FormRadiobutton {
         this.afOnInput.emit(e);
     }
     render() {
-        return (h(Host, { key: 'ec217535e0b0c596d9823eaa069a821d3dace97a', tabindex: -1 }, h("div", { key: '04976fd86d7aaa1bcbfff4b95692b397fd628955', class: Object.assign({ 'digi-form-radiobutton': true }, this.cssModifiers) }, h("input", { key: '5241250e0afc92eea48123accd45ed6944f51ed0', class: "digi-form-radiobutton__input", ref: (el) => (this._input = el), onInput: (e) => this.inputHandler(e), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), "aria-describedby": this.afAriaDescribedby, "aria-labelledby": this.afAriaLabelledby, "aria-invalid": this.afValidation === FormRadiobuttonValidation.ERROR
+        return (h(Host, { key: 'fe6fc75d677f52442809001913f012b8aaa7817b', tabindex: -1 }, h("div", { key: '87aa662ea170803ea002653f26e03b13c3cbaba4', class: Object.assign({ 'digi-form-radiobutton': true }, this.cssModifiers) }, h("input", { key: '0e138b5b12f6ccd152980395a7ccfad705a0e497', class: "digi-form-radiobutton__input", ref: (el) => (this._input = el), onInput: (e) => this.inputHandler(e), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), "aria-describedby": this.afAriaDescribedby, "aria-labelledby": this.afAriaLabelledby, "aria-invalid": this.afValidation === FormRadiobuttonValidation.ERROR
                 ? 'true'
-                : 'false', required: this.afRequired, id: this.afId, name: this.afName, type: "radio", checked: this.afChecked, value: this.afValue, autofocus: this.afAutofocus ? this.afAutofocus : null }), h("label", { key: '9a0c06e2e514422bdbbc39df05996c9e445dc093', htmlFor: this.afId, class: "digi-form-radiobutton__label" }, h("span", { key: '1e5ef984c274330cc155d8f9a41e32c861c63d14', class: "digi-form-radiobutton__circle" }), this.afLabel))));
+                : 'false', required: this.afRequired, id: this.afId, name: this.afName, type: "radio", checked: this.afChecked, value: this.afValue, autofocus: this.afAutofocus ? this.afAutofocus : null }), h("label", { key: '14e1da2bd43b84f94497b9529f619a172ba1c0d3', htmlFor: this.afId, class: "digi-form-radiobutton__label" }, h("span", { key: '22ed147d6d453f200abfc5f24752e58111b51595', class: "digi-form-radiobutton__circle" }), this.afLabel))));
     }
     static get is() { return "digi-form-radiobutton"; }
     static get encapsulation() { return "scoped"; }

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

@@ -3,8 +3,8 @@ v2.0 | 20110126
 License: none (public domain)
 */
 :host {
-  --digi--form-select--background--empty: var(--digi--color--background--interactive--default--input-elements);
-  --digi--form-select--background--neutral: var(--digi--color--background--interactive--default--input-elements);
+  --digi--form-select--background--empty: var(--digi--color--background--interactive--default--secondary);
+  --digi--form-select--background--neutral: var(--digi--color--background--interactive--default--secondary);
   --digi--form-select--background--success: var(--digi--color--background--interactive--validation--success);
   --digi--form-select--background--warning: var(--digi--color--background--interactive--validation--warning);
   --digi--form-select--background--error: var(--digi--color--background--interactive--validation--error);

package/dist/collection/components/_form/form-select-filter/form-select-filter.css

@@ -3,7 +3,7 @@ v2.0 | 20110126
 License: none (public domain)
 */
 :host {
-  --digi--form-select-filter--footer--background: var(--digi--color--background--secondary-accent);
+  --digi--form-select-filter--footer--background: var(--digi--color--background--secondary);
   --digi--form-select-filter--scroll--max-height: 10.625rem;
   --digi--form-select-filter--scroll--padding: var(--digi--padding--small);
   --digi--form-select-filter--reset-button--margin-right: var(--digi--padding--small);
@@ -13,7 +13,7 @@ License: none (public domain)
   --digi--form-select-filter--item--margin: var(--digi--gutter--small) 0;
   --digi--form-select-filter--toggle-icon--transition: ease-in-out 0.2s all;
   --digi--form-select-filter--dropdown--border-radius: var(--digi--border-radius--input);
-  --digi--form-select-filter--dropdown--background: var(--digi--color--background--dropdown);
+  --digi--form-select-filter--dropdown--background: var(--digi--color--background--interactive--default--input-elements);
   --digi--form-select-filter--dropdown--min-width: 18.75rem;
   --digi--form-select-filter--dropdown--margin-top: var(--digi--gutter--small);
   --digi--form-select-filter--dropdown--z-index: 999;

package/dist/collection/components/_header/header/header.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { HeaderCenterContentWidth, LayoutBlockContainer, LayoutBlockVariation, UtilBreakpointObserverBreakpoints, } from "../../../enums";
+import { HeaderCenterContentWidth, LayoutBlockContainer, UtilBreakpointObserverBreakpoints } from "../../../enums";
 /**
  * @enums HeaderCenterContentWidth - header-center-content-width.enum.ts
  * @enums LayoutBlockContainer - layout-block-container.enum.ts
@@ -57,7 +57,7 @@ export class Header {
         return (h("div", { class: "digi-header__wrapper" }, h("slot", { name: "header-logo" }), h("slot", { name: "header-content" }), this.hasNavigation && this.isMobile && (h("digi-navigation-sidebar-button", { "aria-hidden": this.afActive ? 'true' : 'false', "af-text": this.afMenuButtonText }))));
     }
     render() {
-        return (h("header", { key: '685004eea469ef37ba670db6e868f86fcd07b7b8', "aria-label": this.afAriaLabel, class: Object.assign({ 'digi-header': true }, this.cssModifiers) }, h("digi-util-breakpoint-observer", { key: '1f832aa84bd40757b46e51d71a642c42ebf42396', onAfOnChange: (e) => this.handleBreakpointObserver(e) }), h("digi-layout-block", { key: 'a76771fec898f419712e0521da415e6ba06e8e97', afContainer: LayoutBlockContainer.NONE, afVariation: LayoutBlockVariation.TRANSPARENT }, this.afCentered !== HeaderCenterContentWidth.DEFAULT ? (h("digi-layout-container", { "af-max-width": this.afCentered }, this.renderContent())) : (this.renderContent()), h("div", { key: '34b9d5755b9a168e8c4cddd44e0802ab2f34e4fc', class: "digi-header__border" }), h("slot", { key: '2aac1569efdc328863ab94e52563ede14d8c2742', name: "header-navigation" }))));
+        return (h("header", { key: '35b1b75534609c95cf188dee68dc65756b60cf6e', "aria-label": this.afAriaLabel, class: Object.assign({ 'digi-header': true }, this.cssModifiers) }, h("digi-util-breakpoint-observer", { key: '6eee8b721fdf80e41db49d6983d1d5bfd8c27632', onAfOnChange: (e) => this.handleBreakpointObserver(e) }), h("digi-layout-block", { key: '4caa83ed4b792ceaae5da6517241e2d09962fb9f', afContainer: LayoutBlockContainer.NONE }, this.afCentered !== HeaderCenterContentWidth.DEFAULT ? (h("digi-layout-container", { "af-max-width": this.afCentered }, this.renderContent())) : (this.renderContent()), h("div", { key: 'd4bf22ad37c16accd0073ce6f286298146b04e33', class: "digi-header__border" }), h("slot", { key: '33f07a226d4e07f6bf83c019e7ea46f91d28596a', name: "header-navigation" }))));
     }
     static get is() { return "digi-header"; }
     static get encapsulation() { return "scoped"; }