@designsystem-se/af 35.2.1-beta.1 → 35.3.1

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

@@ -1,6 +1,5 @@
 import { h, Host } from "@stencil/core";
 import { randomIdGenerator } from "../../../global/utils/randomIdGenerator/randomIdGenerator.util";
-import { FormRadiogroupValidation } from "./form-radiogroup-validation.enum";
 /**
  * @slot radiobuttons
  *
@@ -9,12 +8,9 @@ import { FormRadiogroupValidation } from "./form-radiogroup-validation.enum";
 export class FormRadiogroup {
     constructor() {
         this.radiobuttons = undefined;
-        this.afId = randomIdGenerator('digi-form-radiogroup');
         this.afValue = undefined;
         this.value = undefined;
         this.afName = randomIdGenerator('digi-form-radiogroup');
-        this.afValidation = FormRadiogroupValidation.NEUTRAL;
-        this.afValidationText = undefined;
     }
     OnAfValueChange(value) {
         this.value = value;
@@ -45,9 +41,9 @@ export class FormRadiogroup {
         });
     }
     render() {
-        return (h(Host, { key: 'b8fdb2fce803f2ea1ab71244a74c7ef9d2903911' }, h("div", { key: 'de0f874c666b3154cb7ca150b1e91689fd257877', id: this.afId, class: {
+        return (h(Host, { key: '87664130d894a0a76cafb15b184ba1bc970f2c09' }, h("div", { key: '5ad880fd119a958646af1395de884533c19cb677', class: {
                 'digi-form-radiogroup': true
-            } }, h("digi-util-mutation-observer", { key: '5e0fd143bfcc7f00b0c96726871813d38fb09ce5', onAfOnChange: (e) => this.radiobuttonChangeListener(e) }, h("slot", { key: '2f38b87f888cfea9458b81dc1d821ca0cd6ab169' }))), h("div", { key: '8af4d3bff07ec0d0a4de40e028d5f69b42685f76', class: "digi-form-input__validation", "aria-atomic": "true", role: "alert", id: `${this.afId}--validation-message` }, this.afValidation != FormRadiogroupValidation.NEUTRAL && (h("digi-form-validation-message", { key: '2d491974c2b3d455aee7fe4d2c3ebfcdf2404ff3', class: "digi-form-input__validation-message", "af-variation": this.afValidation }, this.afValidationText)))));
+            } }, h("digi-util-mutation-observer", { key: '87ca289dca9a3ef8a95ee32c149594ab08d58399', onAfOnChange: (e) => this.radiobuttonChangeListener(e) }, h("slot", { key: 'e4da7e705be3248e7edc088969031d1dc671cf35' })))));
     }
     static get is() { return "digi-form-radiogroup"; }
     static get encapsulation() { return "scoped"; }
@@ -63,29 +59,6 @@ export class FormRadiogroup {
     }
     static get properties() {
         return {
-            "afId": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "en",
-                            "text": "Input id attribute. Defaults to random string."
-                        }],
-                    "text": "S\u00E4tter attributet 'id'. Om inget v\u00E4ljs s\u00E5 skapas ett slumpm\u00E4ssigt id."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "af-id",
-                "reflect": false,
-                "defaultValue": "randomIdGenerator('digi-form-radiogroup')"
-            },
             "afValue": {
                 "type": "string",
                 "mutable": true,
@@ -155,57 +128,6 @@ export class FormRadiogroup {
                 "attribute": "af-name",
                 "reflect": false,
                 "defaultValue": "randomIdGenerator('digi-form-radiogroup')"
-            },
-            "afValidation": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "FormRadiogroupValidation",
-                    "resolved": "FormRadiogroupValidation.ERROR | FormRadiogroupValidation.NEUTRAL | FormRadiogroupValidation.SUCCESS | FormRadiogroupValidation.WARNING",
-                    "references": {
-                        "FormRadiogroupValidation": {
-                            "location": "import",
-                            "path": "./form-radiogroup-validation.enum",
-                            "id": "src/components/_form/form-radiogroup/form-radiogroup-validation.enum.ts::FormRadiogroupValidation"
-                        }
-                    }
-                },
-                "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": "FormRadiogroupValidation.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
             }
         };
     }

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

@@ -58,7 +58,7 @@ export class FormReceipt {
         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: 'aca2ac3cc2c680a572f86bbe766564e25d91d615', 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: 'b2eb6b974cce153f6cd93f20912f7256e67eed6f', class: Object.assign({ 'digi-form-receipt': true }, this.cssModifiers) }, this.afVariation === FormReceiptVariation.FULLWIDTH ? (h("digi-layout-block", { afVariation: LayoutBlockVariation.TRANSPARENT }, this.content)) : (this.content)));
     }
     static get is() { return "digi-form-receipt"; }
     static get encapsulation() { return "scoped"; }

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

@@ -122,17 +122,17 @@ export class FormSelect {
             : false;
     }
     render() {
-        return (h("div", { key: '383eae4d2e740bd424d76a095abe09e98602c0a0', class: Object.assign({ 'digi-form-select': true }, this.cssModifiers) }, h("div", { key: '9cd23532e83bbd843f6c6480562cbffcbe1780a2', class: "digi-form-select__label-group" }, h("digi-form-label", { key: '58ea8cf5d755a8ba5b84e9010097ad3d2b6f8576', afFor: this.afId, afLabel: this.afLabel, afId: `${this.afId}-label`, afDescription: this.afDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText })), h("div", { key: '7c8a35e191cde25892e107415b453a6787a9ab23', class: "digi-form-select__select-wrapper" }, h("select", { key: 'ad62a59613e26f44eaaec5725174e0256028d886', class: "digi-form-select__select", name: this.afName, id: this.afId, "aria-label": this.afAriaLabel, "aria-invalid": this.afValidation === FormSelectValidation.ERROR
+        return (h("div", { key: '3229809015adc00cc9d72e2ceccd783fa2215162', class: Object.assign({ 'digi-form-select': true }, this.cssModifiers) }, h("div", { key: '23ba9a3ec8e1cd49e7ae8ed424558203dcd5aeef', class: "digi-form-select__label-group" }, h("digi-form-label", { key: '4a06f529eb642bf5bb42c6a4e0ca3f2375d41bc1', afFor: this.afId, afLabel: this.afLabel, afId: `${this.afId}-label`, afDescription: this.afDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText })), h("div", { key: '516719a51585dbb0820f71bf157f1af7a4a6dbe6', class: "digi-form-select__select-wrapper" }, h("select", { key: '08f898cbf0872e3254b30027a441b3ed65b33ea9', class: "digi-form-select__select", name: this.afName, id: this.afId, "aria-label": this.afAriaLabel, "aria-invalid": this.afValidation === FormSelectValidation.ERROR
                 ? 'true'
-                : 'false', ref: (el) => (this._select = el), required: this.afRequired ? this.afRequired : null, onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onInput: (e) => this.selectHandler(e), autoFocus: this.afAutofocus ? this.afAutofocus : null }, this.hasPlaceholder && (h("option", { key: '83b51b96cc3f59fa33ca7233a887e19466aadd1a', class: {
+                : 'false', ref: (el) => (this._select = el), required: this.afRequired ? this.afRequired : null, onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onInput: (e) => this.selectHandler(e), autoFocus: this.afAutofocus ? this.afAutofocus : null }, this.hasPlaceholder && (h("option", { key: 'ca2e44c7c31d3391740238628b30dc1c451c7c4f', class: {
                 'digi-form-select__select-option': true,
                 'digi-form-select__select-option--initial-value': true
             }, disabled: true, selected: !this.afValue, value: "" }, this.afPlaceholder)), this.optionItems.map((option, index) => {
             return (h("option", { key: index, class: "digi-form-select__select-option", value: option.value, selected: this.getSelectedItem(option) }, option.text));
-        })), h("digi-icon-input-select-marker", { key: 'f2556cbc4c38b65ce652511b03acb59f5082c577', class: "digi-form-select__icon", slot: "icon" })), h("digi-util-mutation-observer", { key: '619dfa80c868526ed3ff28d120f3798743f9c011', hidden: true, ref: (el) => (this._observer = el), onAfOnChange: (e) => {
+        })), h("digi-icon-input-select-marker", { key: '697386c7124edb812449f837abf4a563e291fd36', class: "digi-form-select__icon", slot: "icon" })), h("digi-util-mutation-observer", { key: '56b978d5a2d0b85686f30406842dfe7ada5965de', hidden: true, ref: (el) => (this._observer = el), onAfOnChange: (e) => {
                 e.stopImmediatePropagation();
                 this.getOptions();
-            } }, h("slot", { key: 'f29d471016704b271008e81fa06320ada1ecfb4f' })), h("div", { key: '4393c0e4fcf3a36bcd034f60ec6bbe49eedac057', class: "digi-form-select__footer" }, h("div", { key: '579755d6a2a9c3c5a9573beae36454cdb3d2bd3f', "aria-atomic": "true", role: "alert", id: `${this.afId}--validation-message` }, this.showValidation() && (h("digi-form-validation-message", { key: '53f717a8fdce19710c9e1761476e522f7151e24a', "af-variation": this.afValidation }, this.afValidationText))))));
+            } }, h("slot", { key: 'a452fcb662fd8e3b6496578aa48197c4046d1c85' })), h("div", { key: '6601c703076e46e57062dfef35b261517195ae0e', class: "digi-form-select__footer" }, h("div", { key: 'd02f9cab5bd9d28ff46244c85b7f59cbe6fa8056', "aria-atomic": "true", role: "alert", id: `${this.afId}--validation-message` }, this.showValidation() && (h("digi-form-validation-message", { key: 'deaddef64859a3a71b7a1a4b4efed3dd6c483e20', "af-variation": this.afValidation }, this.afValidationText))))));
     }
     static get is() { return "digi-form-select"; }
     static get encapsulation() { return "scoped"; }

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

@@ -444,16 +444,16 @@ export class FormSelectFilter {
             } }, h("slot", { name: "empty-search-result" })))));
     }
     render() {
-        return (h("div", { key: '0441a3108913933a52f7ce85a8e808637d1b3c91', class: Object.assign({ 'digi-form-select-filter': true }, this.cssModifiers), role: "application", id: `${this.afId}-identifier` }, h("digi-form-label", { key: '642aeed1224efdd28628722fc29c4885defe1f88', afLabel: this.afFilterButtonTextLabel, afFor: `${this.afId}`, afId: `${this.afId}-label`, class: "digi-form-select-filter__label", afDescription: this.afDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("digi-util-keydown-handler", { key: 'b5117f00c181ceb475eff973d9fef953ab057ffe', onAfOnEsc: () => this.escHandler() }, h("button", { key: 'f5ac9723c420b469f280751113b8fed4be799b2f', type: "button", id: `${this.afId}`, class: "digi-form-select-filter__toggle-button", onClick: () => this.toggleDropdown(), ref: (el) => (this._toggleButton = el), "aria-haspopup": "true", "aria-label": this.ariaLabel, "aria-labelledby": this.afFilterButtonAriaDescribedby, "aria-controls": `${this.afId}-dropdown-menu`, "aria-expanded": this.isOpen }, h("div", { key: '95f70c6e4a9ce0fb00d549ea9a2a56c889694536', class: Object.assign({ 'digi-form-filter__toggle-button-wrapper': true }, this.cssModifiersToggleButtonWrapper) }, h("digi-icon-check", { key: '1acd4598fe9a41669038186b086013a027c8e84f', class: Object.assign({ 'digi-form-select-filter__toggle-button-indicator': true }, this.cssModifiersToggleButtonIndicator), slot: "icon" }), h("span", { key: '965fd1089e5ebe115ebada0e6a8bac72de406d83', class: "digi-form-select-filter__toggle-button-text" }, this.renderButtonLabel)), h("digi-icon-chevron-down", { key: '23ee710f53016cf532cf74bd2288e3202418bffd', class: "digi-form-select-filter__toggle-icon" })), h("div", { key: '55f99522a98d710b4d222b43e51c63961bdd390e', id: `${this.afId}-dropdown-menu`, tabindex: this.isOpen ? '-1' : undefined, class: {
+        return (h("div", { key: 'a973426bdba50ce86911d281a5e9c9fb7e285807', class: Object.assign({ 'digi-form-select-filter': true }, this.cssModifiers), role: "application", id: `${this.afId}-identifier` }, h("digi-form-label", { key: 'e4f5954c7c2d53232f9d11895b6fa5688302d163', afLabel: this.afFilterButtonTextLabel, afFor: `${this.afId}`, afId: `${this.afId}-label`, class: "digi-form-select-filter__label", afDescription: this.afDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("digi-util-keydown-handler", { key: '4dcef492e96fb96d6baea74e0b36b6fec14ad3d6', onAfOnEsc: () => this.escHandler() }, h("button", { key: '9e1bb4096c077df73139e8b4767e5cadc5f4d2ee', type: "button", id: `${this.afId}`, class: "digi-form-select-filter__toggle-button", onClick: () => this.toggleDropdown(), ref: (el) => (this._toggleButton = el), "aria-haspopup": "true", "aria-label": this.ariaLabel, "aria-labelledby": this.afFilterButtonAriaDescribedby, "aria-controls": `${this.afId}-dropdown-menu`, "aria-expanded": this.isOpen }, h("div", { key: '237419ff66314b63efca1fb02d73cb2d60fdaf3d', class: Object.assign({ 'digi-form-filter__toggle-button-wrapper': true }, this.cssModifiersToggleButtonWrapper) }, h("digi-icon-check", { key: '5a56d5b6d3d2c6d0f3d0df3ee63c451298b18851', class: Object.assign({ 'digi-form-select-filter__toggle-button-indicator': true }, this.cssModifiersToggleButtonIndicator), slot: "icon" }), h("span", { key: '9f3f6993ca24bb20fbebdb1739592fda24bd965b', class: "digi-form-select-filter__toggle-button-text" }, this.renderButtonLabel)), h("digi-icon-chevron-down", { key: 'fc3e71d79a44e8953609da9bbc4024a16cc92794', class: "digi-form-select-filter__toggle-icon" })), h("div", { key: '565c9af0e540f891f5f58b5f68fd1bdef789d439', id: `${this.afId}-dropdown-menu`, tabindex: this.isOpen ? '-1' : undefined, class: {
                 'digi-form-select-filter__dropdown': true,
                 'digi-form-select-filter__dropdown--right': this.afAlignRight,
                 'digi-form-select-filter__dropdown--hidden': !this.isOpen
-            } }, h("fieldset", { key: 'b801358f02ee8719a354128ce1669276ae26052c' }, h("div", { key: 'a307b294684fe855f61c3f1fae1359d79e118ed8', class: "digi-form-select-filter__header" }, h("legend", { key: '854730c3331539ff816c78bbb5c4afa8b3f8045f', class: "digi-form-select-filter__legend" }, this.afFilterButtonTextLabel), h("digi-form-input", { key: 'ee515e0d2a5392fac6614309804762bb02b31b1b', afLabel: this.afName, afId: `${this.afId}-search`, afVariation: FormInputVariation.MEDIUM, afType: FormInputType.SEARCH, afValidation: FormInputValidation.NEUTRAL, onAfOnFocus: () => {
+            } }, h("fieldset", { key: 'dc8b60b9b9f0568967ef4e5ffddf464149e41b7b' }, h("div", { key: 'c14f0eaad909cebd41564028f2436269e96ab13a', class: "digi-form-select-filter__header" }, h("legend", { key: '92baa299ac9d085a650860bcfed4474f5265d526', class: "digi-form-select-filter__legend" }, this.afFilterButtonTextLabel), h("digi-form-input", { key: '776c9d498f33990b521ee04898d1ea739432c077', afLabel: this.afName, afId: `${this.afId}-search`, afVariation: FormInputVariation.MEDIUM, afType: FormInputType.SEARCH, afValidation: FormInputValidation.NEUTRAL, onAfOnFocus: () => {
                 this.focusListItemIndex = 0;
                 99;
             }, onAfOnKeyup: (e) => {
                 this.inputSearchKeyboardHandler(e.detail);
-            }, onAfOnInput: (e) => this.inputSearchInputHandler(e.detail), afValue: this._searchQuery, class: "digi-form-select-filter__search-input", afAriaControls: `${this.afId}-select-filter-list`, afAutocomplete: "off", afAriaAutocomplete: "none" }), this.renderEmptyStateBox()), h("div", { key: '4c3b4dd67932713d3b0f9784ddb6908172bae788', class: "digi-form-select-filter__scroll" }, h("digi-util-keydown-handler", { key: '21fd9e82b72a29c6d4f6d9483a189bd877f86c7f', onAfOnDown: (e) => this.downHandler(e), onAfOnRight: (e) => this.downHandler(e), onAfOnUp: (e) => this.upHandler(e), onAfOnLeft: (e) => this.upHandler(e), onAfOnHome: (e) => this.homeHandler(e), onAfOnEnd: (e) => this.endHandler(e), onAfOnEnter: (e) => this.enterHandler(e), onAfOnSpace: (e) => this.spaceHandler(e), onAfOnTab: () => this.tabHandler(), onAfOnShiftTab: () => this.shiftHandler() }, h("ul", { key: '1c7566020cc272722d7978b618395177c114a9ac', class: "digi-form-select-filter__list", "aria-labelledby": `${this.afId}`, id: `${this.afId}-select-filter-list`, role: this.afMultipleItems ? '' : 'radiogroup', "aria-invalid": this.afMultipleItems
+            }, onAfOnInput: (e) => this.inputSearchInputHandler(e.detail), afValue: this._searchQuery, class: "digi-form-select-filter__search-input", afAriaControls: `${this.afId}-select-filter-list`, afAutocomplete: "off", afAriaAutocomplete: "none" }), this.renderEmptyStateBox()), h("div", { key: 'ac8da673afc1e2a6c0543a835b2627b957021f33', class: "digi-form-select-filter__scroll" }, h("digi-util-keydown-handler", { key: '08f0943b88567354588ae2b45111468698dd38ff', onAfOnDown: (e) => this.downHandler(e), onAfOnRight: (e) => this.downHandler(e), onAfOnUp: (e) => this.upHandler(e), onAfOnLeft: (e) => this.upHandler(e), onAfOnHome: (e) => this.homeHandler(e), onAfOnEnd: (e) => this.endHandler(e), onAfOnEnter: (e) => this.enterHandler(e), onAfOnSpace: (e) => this.spaceHandler(e), onAfOnTab: () => this.tabHandler(), onAfOnShiftTab: () => this.shiftHandler() }, h("ul", { key: 'd7b7f52a85bfebd96b14ef18b4ac1d6aaac9273e', class: "digi-form-select-filter__list", "aria-labelledby": `${this.afId}`, id: `${this.afId}-select-filter-list`, role: this.afMultipleItems ? '' : 'radiogroup', "aria-invalid": this.afMultipleItems
                 ? 'false'
                 : this.afValidation === FormSelectFilterValidation.ERROR
                     ? 'true'
@@ -461,11 +461,11 @@ export class FormSelectFilter {
                 ? false
                 : this.afRequired
                     ? 'true'
-                    : 'false' }, this.showNeutralValue && (h("li", { key: '8d05cf89e96e8ac1483ce26a337a5978f838b639', class: "digi-form-select-filter__item", role: "radio", "aria-required": this.afMultipleItems
+                    : 'false' }, this.showNeutralValue && (h("li", { key: '3f3c8ee516a00099adb40779cf648046e3d79133', class: "digi-form-select-filter__item", role: "radio", "aria-required": this.afMultipleItems
                 ? 'false'
                 : this.afRequired
                     ? 'true'
-                    : 'false', "aria-checked": this._selectedItems.length === 0 ? 'true' : 'false', onClick: () => this.resetSelectItems(true), tabIndex: 0, "aria-label": this.afFilterButtonText }, this._selectedItems.length === 0 && (h("digi-icon-check", { key: 'a38310179982e60d3f2689e86205b60954626a7b', class: "digi-form-select-filter__item__icon", "aria-hidden": 'true' })), this.afFilterButtonText)), this._filteredResult &&
+                    : 'false', "aria-checked": this._selectedItems.length === 0 ? 'true' : 'false', onClick: () => this.resetSelectItems(true), tabIndex: 0, "aria-label": this.afFilterButtonText }, this._selectedItems.length === 0 && (h("digi-icon-check", { key: '20bdf4fd24c13a9dc6ad12718847f6f4f78af2af', class: "digi-form-select-filter__item__icon", "aria-hidden": 'true' })), this.afFilterButtonText)), this._filteredResult &&
             this._filteredResult.map((item, index) => {
                 return (h("li", { class: "digi-form-select-filter__item", key: index, dir: item.dir, lang: item.lang, "aria-checked": this.isSelected(item.value) ? 'true' : 'false', role: this.afMultipleItems ? 'checkbox' : 'radio', "aria-required": this.afMultipleItems
                         ? 'false'
@@ -477,9 +477,9 @@ export class FormSelectFilter {
                             ? 'true'
                             : 'false'
                         : 'false', "aria-errormessage": `${this.afId}--validation-message`, onClick: () => this.selectItemHandler(item), tabIndex: this.showNeutralValue ? -1 : index === 0 ? 0 : -1 }, this.isSelected(item.value) && (h("digi-icon-check", { class: "digi-form-select-filter__item__icon", "aria-hidden": 'true' })), item.label));
-            }))))), this.afMultipleItems && (h("div", { key: '5b86ccce4ca0f6a5c8fdc02680aa792b97912a0b', class: "digi-form-select-filter__footer" }, !this.afHideResetButton && (h("digi-button", { key: 'b644d87b83ecbed6cfd1599a641e5264921ac4fc', "af-variation": "secondary", "af-aria-label": this.afResetButtonTextAriaLabel, onClick: () => this.resetSelectItems(), class: "digi-form-select-filter__reset-button" }, this.afResetButtonText)), h("digi-util-keydown-handler", { key: 'b0e8623abc016dcae8614310ea8653f28ec5d9b3', onAfOnUp: () => this.setFocusItem() }, h("digi-button", { key: '838f2780f265db6153e2e928ab23935a19885b51', ref: (el) => (this._submitButton = el), "af-variation": "primary", "af-aria-label": this.afSubmitButtonTextAriaLabel, onClick: () => {
+            }))))), this.afMultipleItems && (h("div", { key: 'f3f670c396cc7dc01dcb3834042b2ca9af3faeb7', class: "digi-form-select-filter__footer" }, !this.afHideResetButton && (h("digi-button", { key: '508ea54b56002d2f4dfa6307d07242436edc8277', "af-variation": "secondary", "af-aria-label": this.afResetButtonTextAriaLabel, onClick: () => this.resetSelectItems(), class: "digi-form-select-filter__reset-button" }, this.afResetButtonText)), h("digi-util-keydown-handler", { key: '9dcba889f74484cc90e00c8873b314eab6508c06', onAfOnUp: () => this.setFocusItem() }, h("digi-button", { key: 'df2fe414579e01db151b20131068ce9c7e8f0a7b', ref: (el) => (this._submitButton = el), "af-variation": "primary", "af-aria-label": this.afSubmitButtonTextAriaLabel, onClick: () => {
                 this.setClosed(true);
-            }, class: "digi-form-select-filter__submit-button" }, this.afSubmitButtonText)))))), h("div", { key: 'e2a972b032f28e6e0347e2bd7aca7724e7a144a2', class: "digi-form-select__footer" }, h("div", { key: 'f8d44fff602afedb23b2f64b80d5bcaf7b15b49e', "aria-atomic": "true", role: "alert", id: `${this.afId}--validation-message` }, this.showValidation() && (h("digi-form-validation-message", { key: 'c91161db619777dbb192afa4b600732e39769208', "af-variation": this.afValidation }, this.afValidationText))))));
+            }, class: "digi-form-select-filter__submit-button" }, this.afSubmitButtonText)))))), h("div", { key: 'e4856539556e2d5912e3a326bb697dc61b98efca', class: "digi-form-select__footer" }, h("div", { key: 'e9da92046fd4f2b0a93f3e7681243de5cae57b83', "aria-atomic": "true", role: "alert", id: `${this.afId}--validation-message` }, this.showValidation() && (h("digi-form-validation-message", { key: '8b2bd29203a6f722ae4507ea65c0600dbfe960c2', "af-variation": this.afValidation }, this.afValidationText))))));
     }
     static get is() { return "digi-form-select-filter"; }
     static get encapsulation() { return "scoped"; }

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

@@ -12,7 +12,6 @@ export class FormTextarea {
         this.hasActiveValidationMessage = false;
         this.dirty = false;
         this.touched = false;
-        this.isEditing = false;
         this.afLabel = undefined;
         this.afLabelDescription = undefined;
         this.afVariation = FormTextareaVariation.MEDIUM;
@@ -68,15 +67,14 @@ export class FormTextarea {
             'digi-form-textarea--auto': this.afVariation === FormTextareaVariation.AUTO,
             'digi-form-textarea--neutral': this.afValidation === FormTextareaValidation.NEUTRAL,
             'digi-form-textarea--success': this.afValidation === FormTextareaValidation.SUCCESS,
-            'digi-form-textarea--error': !this.isEditing && this.afValidation === FormTextareaValidation.ERROR,
-            'digi-form-textarea--warning': !this.isEditing && this.afValidation === FormTextareaValidation.WARNING,
+            'digi-form-textarea--error': this.afValidation === FormTextareaValidation.ERROR,
+            'digi-form-textarea--warning': this.afValidation === FormTextareaValidation.WARNING,
             'digi-form-textarea--empty': !this.afValue &&
                 (!this.afValidation ||
                     this.afValidation === FormTextareaValidation.NEUTRAL)
         };
     }
     blurHandler(e) {
-        this.isEditing = false;
         if (!this.touched) {
             this.afOnTouched.emit(e);
             this.touched = true;
@@ -106,10 +104,10 @@ export class FormTextarea {
         this.afOnInput.emit(e);
     }
     render() {
-        return (h("div", { key: 'ca77f5d62dc794ff17223c0c914ef00d070d4845', class: Object.assign({ 'digi-form-textarea': true }, this.cssModifiers) }, h("div", { key: 'd155dcb5c0cb754cd76c557e9bc382836e3ef76a', class: "digi-form-textarea__label" }, h("digi-form-label", { key: '5c8d3b5b19417aa280812c2770cbb4cad2692969', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText })), h("div", { key: 'dcddec6e31b9e97b9ba1d4109adf112af0a07b29', class: "digi-form-textarea__content" }, h("textarea", { key: 'c399e1aa0ef714c2a356edf6b538a71df1b27994', class: "digi-form-textarea__textarea", ref: (el) => (this._textarea = el), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), onKeyDown: () => this.isEditing = true, onKeyUp: (e) => this.keyupHandler(e), onInput: (e) => this.inputHandler(e), "aria-activedescendant": this.afAriaActivedescendant, "aria-describedby": this.afAriaDescribedby, "aria-labelledby": this.afAriaLabelledby, "aria-invalid": this.afValidation === FormTextareaValidation.ERROR
+        return (h("div", { key: 'c61b17dfadad1f4483aae5d1b84fae6a92ae8b1e', class: Object.assign({ 'digi-form-textarea': true }, this.cssModifiers) }, h("div", { key: '901725f331c7ee08e7e0ae8834907bed94f2eefc', class: "digi-form-textarea__label" }, h("digi-form-label", { key: '60fda4488f86ba586af8637b016b3f9d56de635f', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText })), h("div", { key: '3624ace952fc8ddba0400344b5ecd162db97ad0f', class: "digi-form-textarea__content" }, h("textarea", { key: 'cc0f9212adfa7d39240a0cc02d7859761e16f019', class: "digi-form-textarea__textarea", ref: (el) => (this._textarea = el), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), onKeyUp: (e) => this.keyupHandler(e), onInput: (e) => this.inputHandler(e), "aria-activedescendant": this.afAriaActivedescendant, "aria-describedby": this.afAriaDescribedby, "aria-labelledby": this.afAriaLabelledby, "aria-invalid": this.afValidation === FormTextareaValidation.ERROR
                 ? 'true'
-                : 'false', maxLength: this.afMaxlength, minLength: this.afMinlength, role: this.afRole, required: this.afRequired, id: this.afId, name: this.afName, value: this.afValue, autofocus: this.afAutofocus ? this.afAutofocus : null })), h("div", { key: '8954b122a04e741550553e5b5dc29145346501b3', class: "digi-form-textarea__footer" }, h("div", { key: '9540eee3c9c2aa70e0139b4b84f035494e9aee21', class: "digi-form-textarea__validation", "aria-atomic": "true", role: "alert", id: `${this.afId}--validation-message` }, !this.isEditing && this.hasActiveValidationMessage &&
-            this.afValidation != FormTextareaValidation.NEUTRAL && (h("digi-form-validation-message", { key: '350b51a7cd29627a53f2267a1726ad4917657cef', class: "digi-form-textarea__validation-message", "af-variation": this.afValidation }, this.afValidationText))))));
+                : 'false', maxLength: this.afMaxlength, minLength: this.afMinlength, role: this.afRole, required: this.afRequired, id: this.afId, name: this.afName, value: this.afValue, autofocus: this.afAutofocus ? this.afAutofocus : null })), h("div", { key: '0bfcc28ea5818c2ae68894d165bef6ff61155841', class: "digi-form-textarea__footer" }, h("div", { key: '77fb29eee9f8623c044472a41449dcb45b2d54ff', class: "digi-form-textarea__validation", "aria-atomic": "true", role: "alert", id: `${this.afId}--validation-message` }, this.hasActiveValidationMessage &&
+            this.afValidation != FormTextareaValidation.NEUTRAL && (h("digi-form-validation-message", { key: 'd5013d2e0f448038a8f13e9e824a091f5699c5dd', class: "digi-form-textarea__validation-message", "af-variation": this.afValidation }, this.afValidationText))))));
     }
     static get is() { return "digi-form-textarea"; }
     static get encapsulation() { return "scoped"; }
@@ -590,8 +588,7 @@ export class FormTextarea {
         return {
             "hasActiveValidationMessage": {},
             "dirty": {},
-            "touched": {},
-            "isEditing": {}
+            "touched": {}
         };
     }
     static get events() {

package/dist/collection/components/_form/form-validation-message/form-validation-message.js

@@ -28,7 +28,7 @@ export class FormValidationMessage {
         }
     }
     render() {
-        return (h("div", { key: '1d765a8f3ab31e6140d0cf1b38c16df16125ab86', class: Object.assign({ 'digi-form-validation-message': true }, this.cssModifiers) }, h("div", { key: 'd72919b3424c3c93cf4027b45a97141d4d25c12a', class: "digi-form-validation-message__icon", "aria-hidden": "true" }, this.icon), h("span", { key: '94f63d1b27caff2d4901a0c865b05214569e8423', class: "digi-form-validation-message__text" }, h("slot", { key: 'a1f927cc629d752f7885cb6dc063ebef24feed78' }))));
+        return (h("div", { key: '1660f54f79665b4ff25d961a2cce8afa445347c9', class: Object.assign({ 'digi-form-validation-message': true }, this.cssModifiers) }, h("div", { key: '077ab407a8b939ba9799f9378ae1bf5256623b0a', class: "digi-form-validation-message__icon", "aria-hidden": "true" }, this.icon), h("span", { key: '2d5b27ca89af093f5ef02ac4c5d889630891556f', class: "digi-form-validation-message__text" }, h("slot", { key: 'd30cc6c30ef04cf3362c37ca94ea83eb88dd436e' }))));
     }
     static get is() { return "digi-form-validation-message"; }
     static get encapsulation() { return "scoped"; }

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

@@ -4,54 +4,63 @@ License: none (public domain)
 */
 :host {
   display: block;
-  --digi--header--padding: var(--digi--padding--large);
+  --digi--header--logo--padding-right: var(--digi--padding--large);
   --digi--header--border-width: var(--digi--border-width--primary);
   --digi--header--border-color: var(--digi--color--divider--primary);
+  --digi--header--padding-left: var(--digi--padding--medium);
   --digi--header--padding-right: var(--digi--padding--medium);
-  --digi--header--font-size: var(--digi--typography--body--font-size--desktop);
-  --digi--header--font-weight: var(--digi--typography--title-logo--font-weight--desktop);
+  --digi--header--content--gap: 1rem;
 }
-:host .digi-header__logo {
+:host .digi-header__wrapper {
   display: flex;
-  width: 100%;
-  align-items: stretch;
-  padding-top: var(--digi--header--padding);
-  padding-bottom: var(--digi--header--padding);
+  align-items: center;
+  justify-content: space-between;
+  padding-left: var(--digi--header--padding-left);
+  padding-right: var(--digi--header--padding-right);
+}
+@media (max-width: 47.9375rem) {
+  :host .digi-header--has-navigation .digi-header__wrapper {
+    --digi--header--padding-right: 0;
+  }
 }
 :host .digi-header__border {
   border-bottom: var(--digi--header--border-width) solid var(--digi--header--border-color);
 }
-:host .digi-header__logo-link {
-  text-decoration: none;
-}
 :host .digi-header__content {
   display: flex;
   align-items: center;
-  margin-left: auto;
+  gap: var(--digi--header--content--gap);
 }
-:host .digi-header__wrapper {
-  position: relative;
+:host .digi-header ::slotted([slot=header-logo]) {
+  margin-left: -0.125rem;
+  text-decoration: none;
+  padding-right: var(--digi--header--logo--padding-right);
 }
-:host .digi-header ::slotted(a[slot=header-logo]) {
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  top: 0;
-  left: 0;
+:host .digi-header ::slotted([slot=header-logo]) .digi-logo {
+  --digi--logo--img--max-width:23rem;
 }
-:host .digi-header ::slotted(a[slot=header-logo]):focus-visible {
-  outline: 2px solid black;
-  outline-offset: -3px;
-  box-shadow: 0px 0px 0px 5px inset white;
+:host .digi-header ::slotted([slot=header-logo]) .digi-logo__img {
+  flex-shrink: 0;
 }
 :host .digi-header ::slotted(div[slot=header-content]) {
-  --digi--header--padding: var(--digi--padding--large);
+  --digi--header--logo--padding-right: var(--digi--padding--large);
   --digi--header--border-width: var(--digi--border-width--primary);
   --digi--header--border-color: var(--digi--color--divider--primary);
+  --digi--header--padding-left: var(--digi--padding--medium);
   --digi--header--padding-right: var(--digi--padding--medium);
-  --digi--header--font-size: var(--digi--typography--body--font-size--desktop);
-  --digi--header--font-weight: var(--digi--typography--title-logo--font-weight--desktop);
+  --digi--header--content--gap: 1rem;
   display: flex;
   align-items: center;
-  padding-right: var(--digi--header--padding-right);
+  flex-wrap: wrap;
+  gap: var(--digi--header--content--gap);
+}
+:host .digi-header ::slotted(div[slot=header-content]) .digi-header-notification a {
+  margin: 0;
+}
+:host .digi-header ::slotted(div[slot=header-content]) .digi-header-avatar {
+  --digi--header-avatar--margin: 0;
+}
+:host .digi-header--af-centered .digi-header__wrapper {
+  --digi--header--padding-right: 0;
+  --digi--header--padding-left: 0;
 }

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

@@ -1,13 +1,16 @@
-import { Fragment, h } from "@stencil/core";
-import { HeaderCenterContentWidth, LayoutBlockContainer, UtilBreakpointObserverBreakpoints } from "../../../enums";
+import { h } from "@stencil/core";
+import { HeaderCenterContentWidth, LayoutBlockContainer, UtilBreakpointObserverBreakpoints, } from "../../../enums";
 /**
  * @enums HeaderCenterContentWidth - header-center-content-width.enum.ts
+ * @enums LayoutBlockContainer - layout-block-container.enum.ts
+ * @enums UtilBreakpointObserverBreakpoints - util-breakpoint-observer-breakpoints.enum.ts
  * @swedishName Sidhuvud
  */
 export class Header {
     constructor() {
         this.afActive = undefined;
         this.isMobile = undefined;
+        this.hasNavigation = undefined;
         this.afSystemName = undefined;
         this.afMenuButtonText = undefined;
         this.afAriaLabel = undefined;
@@ -23,20 +26,67 @@ export class Header {
     closeHandler() {
         this.afActive = false;
     }
-    breakpointChange(e) {
-        const element = e.target;
-        const type = element.nodeName;
-        if (type.toLowerCase() === 'digi-util-breakpoint-observer') {
-            this.isMobile =
-                e.detail.value === UtilBreakpointObserverBreakpoints.SMALL;
+    get cssModifiers() {
+        return {
+            'digi-header--af-centered': this.afCentered !== HeaderCenterContentWidth.DEFAULT,
+            'digi-header--has-navigation': this.hasNavigation
+        };
+    }
+    handleBreakpointObserver(e) {
+        this.isMobile = e.detail.value === UtilBreakpointObserverBreakpoints.SMALL;
+    }
+    get ariaLabel() {
+        return this.afAriaLabel || this.afSystemName;
+    }
+    /**
+     * Ta reda på om vi har en populerad navigations-slot. Om inte så renderar vi ingen menyknapp
+     * @en Find out if we have a populated navigation slot. If, we don't, let's not bother rendering the navigation toggle button
+     */
+    checkNavigation() {
+        this.hasNavigation = !!this.hostElement.querySelector('[slot="header-navigation"]');
+    }
+    /**
+    * Om vi inte har vare sig digi-title-logo eller digi-logo, men vi har ett af-system-name så renderar vi en digi-title-logo som fallback
+    * @en If we have neither a digi-title-logo or a digi-logo,but we do have an af-system name, we render a digi-title-logo as a fallback.
+    *
+    * This will be removed when we finally deprecate af-syetem-name.
+    */
+    createLegacyLogoIfNeeded() {
+        const logoSlot = this.hostElement.querySelector('[slot="header-logo"]');
+        const useFallbackTitleLogo = !!logoSlot
+            && !this.hostElement.querySelector('digi-title-logo')
+            && !this.hostElement.querySelector('digi-logo')
+            && !!this.afSystemName;
+        if (useFallbackTitleLogo) {
+            logoSlot.innerHTML = this.afHideSystemName
+                ? `<digi-logo af-only-symbol="true"></digi-logo>`
+                : `<digi-title-logo af-aria-label=${this.afSystemName}>
+            <div slot="logo-one-row">
+              ${this.afSystemName}
+            </div>
+          </digi-title-logo>
+        `;
+        }
+    }
+    componentWillLoad() {
+        this.checkNavigation();
+        this.createLegacyLogoIfNeeded();
+    }
+    /**
+     * If we have a <digi-logo> in the logo slot, make sure its afOnlySymbol prop
+     * is true when we're in mobile
+     */
+    componentWillRender() {
+        const afLogo = this.hostElement.querySelector('digi-logo');
+        if (afLogo) {
+            afLogo.afOnlySymbol = this.isMobile || afLogo.afOnlySymbol;
         }
     }
     renderContent() {
-        return (h(Fragment, null, h("div", { class: "digi-header__logo", "aria-label": this.afAriaLabel }, h("div", { class: "digi-header__wrapper" }, ((this.isMobile && !this.afHideSystemName) || !this.isMobile) && (h("digi-logo", { "af-system-name": this.afSystemName, afSvgAriaHidden: true })), this.afHideSystemName && this.isMobile && (h("digi-logo", { "af-system-name": " ", afSvgAriaHidden: true })), h("slot", { name: "header-logo" })), h("div", { class: "digi-header__content" }, h("slot", { name: "header-content" }), this.isMobile && (h("digi-navigation-sidebar-button", { "aria-hidden": this.afActive ? 'true' : 'false', "af-text": this.afMenuButtonText }))))));
+        return (h("div", { class: "digi-header__wrapper" }, h("slot", { name: "header-logo" }), h("div", { class: "digi-header__content" }, 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: 'f0342b6d89e3273df1fcfd64ac15a7abad014fe7', class: "digi-header" }, h("digi-util-breakpoint-observer", { key: '89d9b086575b2b79ae9ea8d2440959a24d097c76', onAfOnChange: (e) => (this.isMobile =
-                e.detail.value === UtilBreakpointObserverBreakpoints.SMALL) }), h("digi-layout-block", { key: '6d2eebb1568cf36c42d612c3975fb491df19e044', afContainer: LayoutBlockContainer.NONE }, this.afCentered !== HeaderCenterContentWidth.DEFAULT ? (h("digi-layout-container", { "af-max-width": this.afCentered }, this.renderContent())) : (this.renderContent()), h("div", { key: '3596d7f9ef54a94104616452038f0baed85a5455', class: "digi-header__border", "aria-label": this.afAriaLabel }), h("div", { key: '0d8b8bd2d3c26c8a02378cbf1263d427875ad4e1', class: "digi-header__navigation" }, h("slot", { key: '5cf3cbfe6ec1c50f9022c256f8dd7e51aeee0ef8', name: "header-navigation" })))));
+        return (h("header", { key: '541675d708db44efd16a09721b27dcbbe44e2724', "aria-label": this.ariaLabel, class: Object.assign({ 'digi-header': true }, this.cssModifiers) }, h("digi-util-breakpoint-observer", { key: '419fba070dc583e81ad3ce29a88581ca736fe656', onAfOnChange: (e) => this.handleBreakpointObserver(e) }), h("digi-layout-block", { key: '679370ad7ccfde35f14549e63cbdc35b35024ac0', afContainer: LayoutBlockContainer.NONE }, this.afCentered !== HeaderCenterContentWidth.DEFAULT ? (h("digi-layout-container", { "af-max-width": this.afCentered }, this.renderContent())) : (this.renderContent()), h("div", { key: '072768a2e0754f294fa2617828c533f8c426fb40', class: "digi-header__border" }), h("slot", { key: 'ecf54055fbee49802ecf188a36a4868416e948f2', name: "header-navigation" }))));
     }
     static get is() { return "digi-header"; }
     static get encapsulation() { return "scoped"; }
@@ -66,6 +116,9 @@ export class Header {
                     "tags": [{
                             "name": "en",
                             "text": "Set system name."
+                        }, {
+                            "name": "deprecated",
+                            "text": "Anv\u00E4nd afAriaLabel ist\u00E4llet"
                         }],
                     "text": "S\u00E4tter systemnamnet"
                 },
@@ -132,6 +185,9 @@ export class Header {
                     "tags": [{
                             "name": "en",
                             "text": "Hide system name"
+                        }, {
+                            "name": "deprecated",
+                            "text": "Systemnamnet \u00E4r en del av titellogotypen och d\u00F6ljs automatiskt vid sm\u00E5 sk\u00E4rmstorlekar"
                         }],
                     "text": "D\u00F6ljer systemnamnet"
                 },
@@ -174,9 +230,11 @@ export class Header {
     static get states() {
         return {
             "afActive": {},
-            "isMobile": {}
+            "isMobile": {},
+            "hasNavigation": {}
         };
     }
+    static get elementRef() { return "hostElement"; }
     static get listeners() {
         return [{
                 "name": "afOnToggle",
@@ -190,12 +248,6 @@ export class Header {
                 "target": undefined,
                 "capture": false,
                 "passive": false
-            }, {
-                "name": "afOnChange",
-                "method": "breakpointChange",
-                "target": undefined,
-                "capture": false,
-                "passive": false
             }];
     }
 }

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

@@ -54,7 +54,7 @@ export class NavigationAvatar {
         if (this.afShowPlaceholderImage) {
             this.afHideImage = true;
         }
-        return (h("div", { key: 'f0a6f919473f79842a1a5e8b420ebd28b5d69ddf', class: "digi-header-avatar" }, !this.afHideImage && this.afIsLoggedIn && (h("digi-media-image", { key: 'f9d7affc8b4fe35cc4ed34363fafb7dbefd68d15', class: 'digi-header-avatar__image', "af-height": "32", "af-width": "32", afUnlazy: true, "af-src": this.afSrc, afAlt: this.afAlt })), this.afShowPlaceholderImage && this.afIsLoggedIn && (h("span", { key: '15b94883efa9d6915b3684e0affd95a96ddff293', class: "digi-header-avatar__icon digi-header-avatar__icon-logged-in" }, h(this.currentAvatar, { key: 'a0e9575b337cc739b1b8a493c4a263eef2c22c98' }, h("title", { key: 'df2a6872016bd3ea990a1c12ab87d7e367d3aad4' }, this.afPlacerholderTitle)))), this.afIsLoggedIn && (h("span", { key: 'ea88177f95fbcb2c261133ff164fd87219731a7b', class: "digi-header-avatar__name" }, this.setCurrentLoginName())), !this.afIsLoggedIn && (h("span", { key: '579cd71fe5023f18bc1e05d66eee6495b2e0f30d', class: "digi-header-avatar__icon digi-header-avatar__icon-logged-out" }, h(this.currentAvatar, { key: 'bff5b3eb8a509f6bb8509c9ecb1c393037326afd' }, h("title", { key: 'ad8a4bf780a68f0c9265eaf804bfcbb4b5acc8e7' }, this.afPlacerholderTitle)))), !this.afIsLoggedIn && h("slot", { key: 'ba96a37355d8922c2e79808030fef223e73b1fb4' })));
+        return (h("div", { key: 'c6a31dcf973d0838e6fcc15c46df3367a7ffbf05', class: "digi-header-avatar" }, !this.afHideImage && this.afIsLoggedIn && (h("digi-media-image", { key: 'd89ff3dd87bad2f574c9dc2332ab01cca92f14f7', class: 'digi-header-avatar__image', "af-height": "32", "af-width": "32", afUnlazy: true, "af-src": this.afSrc, afAlt: this.afAlt })), this.afShowPlaceholderImage && this.afIsLoggedIn && (h("span", { key: '578c4845722980eef2dcdd089e34bd74552f1c12', class: "digi-header-avatar__icon digi-header-avatar__icon-logged-in" }, h(this.currentAvatar, { key: 'a607c3b7d8adad5e099348c2f934c11f6ca90f72' }, h("title", { key: 'e7bcf18ab68a3747bdfb67cd0099f361e1bdfc9b' }, this.afPlacerholderTitle)))), this.afIsLoggedIn && (h("span", { key: 'd89f15f40ac637eb8b5a469580fa99949f6e496b', class: "digi-header-avatar__name" }, this.setCurrentLoginName())), !this.afIsLoggedIn && (h("span", { key: '0fd876bc2059fbbafc6c676721ab72121721262b', class: "digi-header-avatar__icon digi-header-avatar__icon-logged-out" }, h(this.currentAvatar, { key: '01a97ee947331bd9baf206bbc9dc2325c53f9015' }, h("title", { key: '2f96d6322af1e8926371a5971300fc229db60217' }, this.afPlacerholderTitle)))), !this.afIsLoggedIn && h("slot", { key: 'a56cb66e622b3eb8979b90fe33f051bf35a0a937' })));
     }
     static get is() { return "digi-header-avatar"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_header/header-navigation/header-navigation.css

@@ -33,6 +33,14 @@ License: none (public domain)
   align-items: center;
   padding: var(--digi--header--close-button--padding) 0;
 }
+:host .digi-header-navigation--centered .digi-header-navigation__wrapper {
+  padding-left: 0;
+  padding-right: 0;
+}
+:host .digi-header-navigation--centered .digi-header-navigation__inner {
+  margin-left: calc(var(--digi--global--spacing--base) * -1);
+  margin-right: calc(var(--digi--global--spacing--base) * -1);
+}
 :host .digi-header-navigation--mobile {
   width: 0;
   position: fixed;
@@ -40,6 +48,7 @@ License: none (public domain)
   right: 0;
   top: 0;
   visibility: hidden;
+  --digi--header-navigation--horizontal-padding: 0;
 }
 :host .digi-header-navigation--mobile .digi-header-navigation__wrapper {
   position: absolute;
@@ -52,6 +61,7 @@ License: none (public domain)
   overflow-y: auto;
 }
 :host .digi-header-navigation--mobile .digi-header-navigation__inner {
+  margin: 0;
   padding: 0;
   display: block;
 }

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

@@ -154,14 +154,15 @@ export class HeaderNavigation {
         return {
             'digi-header-navigation--open': this.afActive,
             'digi-header-navigation--mobile': this.isMobile,
-            'digi-header-navigation--visible': this.isVisible
+            'digi-header-navigation--visible': this.isVisible,
+            'digi-header-navigation--centered': this.afCentered !== HeaderCenterContentWidth.DEFAULT
         };
     }
     render() {
-        return (h("div", { key: 'd61a788e2458d7f9bbf770e3d4be7a00c90607f7', class: Object.assign({ 'digi-header-navigation': true }, this.cssModifiers) }, h("digi-util-breakpoint-observer", { key: '23d9c1e5ca9abe955844a6252ca9a642bea44b35', onAfOnChange: (e) => (this.isMobile =
-                e.detail.value === UtilBreakpointObserverBreakpoints.SMALL) }, h("digi-util-keydown-handler", { key: 'cfada69f0756bdac39ec68d659b6c878c4937cae', onAfOnEsc: (e) => this.escHandler(e), onAfOnTab: (e) => this.tabHandler(e), onAfOnShiftTab: (e) => this.shiftHandler(e) }, h("div", { key: '74f01fb219fd51e9d1456a952b54a1519e2d5b7c' }, this.isMobile && (h("div", { key: '77c294fba06b8390c49bb4901b1ebd63bbbb6737', class: "digi-header-navigation__backdrop", onClick: (e) => this.backdropClickHandler(e) })), h("nav", { key: 'f22e4ada61843512e92793fa40a7e871222a87fe', class: "digi-header-navigation__wrapper", "aria-label": this.afNavAriaLabel, "af-centered": this.afCentered, ref: (el) => {
+        return (h("div", { key: 'a2645e18fa313178d65cd9a82ccee2e5121e9d15', class: Object.assign({ 'digi-header-navigation': true }, this.cssModifiers) }, h("digi-util-breakpoint-observer", { key: '78532433a10d7b25f84ffab92c17edd0d89c1eda', onAfOnChange: (e) => (this.isMobile =
+                e.detail.value === UtilBreakpointObserverBreakpoints.SMALL) }, h("digi-util-keydown-handler", { key: '318e69263ceba3cea1b2b5284953ea219641d3bb', onAfOnEsc: (e) => this.escHandler(e), onAfOnTab: (e) => this.tabHandler(e), onAfOnShiftTab: (e) => this.shiftHandler(e) }, h("div", { key: 'bd4916bbdd14c6587ca283b0df6d70bdaf5f28e7' }, this.isMobile && (h("div", { key: '551a7f881618137861e3b4a40b66d9e4f835fa3c', class: "digi-header-navigation__backdrop", onClick: (e) => this.backdropClickHandler(e) })), h("nav", { key: 'bb011ce31ad95e5ad4a78a1ef71344d11f61f310', class: "digi-header-navigation__wrapper", "aria-label": this.afNavAriaLabel, "af-centered": this.afCentered, ref: (el) => {
                 this._wrapper = el;
-            } }, this.isMobile && (h("digi-button", { key: 'a32fdbccd0401832c43dbbd38c9f6eca63e258ed', onClick: (e) => this.closeHandler(e), "af-variation": "function", "af-aria-label": this.afCloseButtonAriaLabel, class: "digi-header-navigation__close-button" }, this.afCloseButtonText, h("digi-icon-x", { key: 'ce5ba3d9ead256635c7e04bfe0742455f3635481', slot: "icon-secondary" }))), this.afCentered !== HeaderCenterContentWidth.DEFAULT ? (h("digi-layout-container", { "af-max-width": this.afCentered }, h("div", { role: "list", class: "digi-header-navigation__inner" }, h("slot", null)))) : (h("div", { role: "list", class: "digi-header-navigation__inner" }, h("slot", null)))))))));
+            } }, this.isMobile && (h("digi-button", { key: '29de9286c4d31a0fa82eff4eb433cec6e207daaa', onClick: (e) => this.closeHandler(e), "af-variation": "function", "af-aria-label": this.afCloseButtonAriaLabel, class: "digi-header-navigation__close-button" }, this.afCloseButtonText, h("digi-icon-x", { key: '3cd3af6909b727e1545c5feb74ea4a67f6cac73f', slot: "icon-secondary" }))), this.afCentered !== HeaderCenterContentWidth.DEFAULT ? (h("digi-layout-container", { "af-max-width": this.afCentered }, h("div", { role: "list", class: "digi-header-navigation__inner" }, h("slot", null)))) : (h("div", { role: "list", class: "digi-header-navigation__inner" }, h("slot", null)))))))));
     }
     static get is() { return "digi-header-navigation"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_header/header-navigation-item/header-navigation-item.js

@@ -15,7 +15,7 @@ export class HeaderNavigationItem {
         };
     }
     render() {
-        return (h("div", { key: 'ae84832cee57e7dc9437572654712dbdf4a11c63', role: "listitem", class: Object.assign({ 'digi-header-navigation-item': true }, this.cssModifiers) }, h("slot", { key: '89d12854ecf6fee08a757f25923e91e880128073' }), h("div", { key: 'b4ad93e0d28b0ba23332188554efe851066980e2', class: Object.assign({ 'digi-header-navigation-item-indicator': true }, this.cssModifiers) })));
+        return (h("div", { key: 'f70697deec493a88ae225787e33c9781c892b1b5', role: "listitem", class: Object.assign({ 'digi-header-navigation-item': true }, this.cssModifiers) }, h("slot", { key: 'de6147b23d7be7aa68d51e293db9ecb9e2fd4d3e' }), h("div", { key: '3ebd2fe503efff9bab1ebf460cb60bcb8e9c878f', class: Object.assign({ 'digi-header-navigation-item-indicator': true }, this.cssModifiers) })));
     }
     static get is() { return "digi-header-navigation-item"; }
     static get encapsulation() { return "scoped"; }