@designsystem-se/af 36.0.3 → 37.0.1

package/dist/cjs/{typography-variation.enum-50512a4e.js → typography-variation.enum-118ff8e5.js}

@@ -172,6 +172,26 @@ exports.InfoCardHeadingLevel = void 0;
     InfoCardHeadingLevel["H6"] = "h6";
 })(exports.InfoCardHeadingLevel || (exports.InfoCardHeadingLevel = {}));
 
+exports.LayoutBlockContainer = void 0;
+(function (LayoutBlockContainer) {
+    LayoutBlockContainer["STATIC"] = "static";
+    LayoutBlockContainer["FLUID"] = "fluid";
+    LayoutBlockContainer["NONE"] = "none";
+})(exports.LayoutBlockContainer || (exports.LayoutBlockContainer = {}));
+
+exports.LayoutContainerVariation = void 0;
+(function (LayoutContainerVariation) {
+    LayoutContainerVariation["STATIC"] = "static";
+    LayoutContainerVariation["FLUID"] = "fluid";
+    LayoutContainerVariation["NONE"] = "none";
+})(exports.LayoutContainerVariation || (exports.LayoutContainerVariation = {}));
+
+exports.LayoutContainerMaxWidth = void 0;
+(function (LayoutContainerMaxWidth) {
+    LayoutContainerMaxWidth["WIDTH_1200"] = "1200";
+    LayoutContainerMaxWidth["WIDTH_1400"] = "1400";
+})(exports.LayoutContainerMaxWidth || (exports.LayoutContainerMaxWidth = {}));
+
 exports.NotificationAlertHeadingLevel = void 0;
 (function (NotificationAlertHeadingLevel) {
     NotificationAlertHeadingLevel["H1"] = "h1";

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

@@ -57,7 +57,6 @@ 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-checkbox/form-checkbox.js

@@ -98,7 +98,7 @@ export class FormCheckbox {
         this.afOnInput.emit(e);
     }
     render() {
-        return (h(Host, { key: '119dd4d2bd465e027f4d5c79f8334b0bb9491048', tabindex: -1 }, h("div", { key: '4bb8e86d4323bfe5f079f3c082bf64b6f7eec750', class: Object.assign({ 'digi-form-checkbox': true }, this.cssModifiers) }, h("input", { key: '5c780e58b7df31cd9c13563b920b5e06ea74022c', class: "digi-form-checkbox__input", ref: (el) => {
+        return (h(Host, { key: '510236a0bc0048a6a657f366a3107de346109636', tabindex: -1 }, h("div", { key: 'cd0fa14b3b6c6f2455bc6f50a81ca42f0329c7f1', class: Object.assign({ 'digi-form-checkbox': true }, this.cssModifiers) }, h("input", { key: '98053e7e641744319df5f9331f9a92badd6d3fd2', 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);
@@ -106,7 +106,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: '71599f05c3436521e96f2210606ad3c71f6d341e', htmlFor: this.afId, class: "digi-form-checkbox__label" }, h("span", { key: '6f2ecde62ef62aa8a286aa2e64b1932d1d605e0a', class: "digi-form-checkbox__box" }), this.afLabel), !!this.afDescription && (h("p", { key: '2ca8d8ddfb9578b236712cbb761348fb1c456f18', 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: 'b32b615db271a2d7bb76edc8596f0bbbf15e63c9', htmlFor: this.afId, class: "digi-form-checkbox__label" }, h("span", { key: '85524659643995903e06178f6085914d79fbba67', class: "digi-form-checkbox__box" }), this.afLabel), !!this.afDescription && (h("p", { key: '4c9c218bd9fe34fe036a33853735657fea7a4d42', id: `${this.afId}-description`, class: "digi-form-checkbox__description" }, this.afDescription)))));
     }
     static get is() { return "digi-form-checkbox"; }
     static get encapsulation() { return "scoped"; }
@@ -562,7 +562,7 @@ export class FormCheckbox {
                 "docs": {
                     "tags": [{
                             "name": "deprecated",
-                            "text": "Denna prop kommer att tas bort i slutet av juli"
+                            "text": "Denna prop kommer att tas bort i slutet av augusti"
                         }],
                     "text": "Tabindex"
                 },

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { randomIdGenerator } from "../../../global/utils/randomIdGenerator";
 import { FormErrorListHeadingLevel } from "./form-error-list-heading-level.enum";
-import { TypographyVariation, } from "../../../enums";
+import { TypographyVariation } from "../../../enums";
 import { NotificationAlertVariation } from "../../_notification/notification-alert/notification-alert-variation.enum";
 /**
  * @enums FormErrorListHeadingLevel - form-error-list-heading-level.enum.ts
@@ -50,7 +50,7 @@ export class FormErrorList {
         this.afOnClickLink.emit({ id });
     }
     render() {
-        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' }))));
+        return (h("div", { key: '20c0abb4ab980259a7df09361582ca810f3c7e49', class: "digi-form-error-list", id: this.afId }, h("digi-notification-alert", { key: '963c583b7a4b48aad78244ee152f3e667fa5a84b', ref: (el) => (this._notificationAlert = el), "af-heading": this.afHeading, "af-heading-level": this.afHeadingLevel, "af-variation": NotificationAlertVariation.DANGER }, this.afDescription && (h("digi-typography", { key: '64683c5c4291245db96757ecc62dc7611f440f46', "af-variation": TypographyVariation.SMALL }, h("p", { key: '56aecfbaf54858ce376c121061745364c445e72c', class: "digi-form-error-list__description" }, this.afDescription))), h("slot", { key: 'f09680d52c7895a1a888456e5b8e1f605fdf173b' }))));
     }
     static get is() { return "digi-form-error-list"; }
     static get encapsulation() { return "scoped"; }
@@ -177,7 +177,7 @@ export class FormErrorList {
                             "name": "en",
                             "text": "Override default anchor link behavior and sets focus programmatically. Should only be used if default anchor link behaviour is a problem with e.g. routing"
                         }],
-                    "text": "Kringg\u00E5r felmeddelandenas ankarl\u00E4nkar och s\u00E4tter ist\u00E4llet fokus programmatiskt.\nB\u00F6r endast anv\u00E4ndas om det vanliga beteendet \u00E4r problematiskt pga dynamisk routing eller liknande."
+                    "text": "Kringg\u00E5r felmeddelandenas ankarl\u00E4nkar (e.preventDefault()) och s\u00E4tter ist\u00E4llet fokus programmatiskt.\nB\u00F6r endast anv\u00E4ndas om det vanliga beteendet \u00E4r problematiskt pga dynamisk routing eller liknande."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -34,6 +34,7 @@ export class FormTextarea {
         this.afAriaLabelledby = undefined;
         this.afAriaDescribedby = undefined;
         this.afAutofocus = undefined;
+        this.afTrimValue = undefined;
         this.afErrorMessageIsAlert = true;
     }
     onValueChanged(value) {
@@ -90,6 +91,16 @@ export class FormTextarea {
         };
     }
     blurHandler(e) {
+        if (this.afTrimValue && typeof e.target.value === 'string') {
+            const trimmedValue = e.target.value.trim();
+            if (trimmedValue !== e.target.value) {
+                this.afValue = this.value = trimmedValue;
+                if (this._textarea) {
+                    this._textarea.value = trimmedValue;
+                }
+                this.afOnInput.emit(e);
+            }
+        }
         if (!this.touched) {
             this.afOnTouched.emit(e);
             this.touched = true;
@@ -119,10 +130,10 @@ export class FormTextarea {
         this.afOnInput.emit(e);
     }
     render() {
-        return (h(Host, { key: '8fc80d345a10b05e22b3dcd5adb63449d50b07e1', tabindex: -1 }, h("div", { key: '049576151b60c94d55711e696af1262ac6701f34', class: Object.assign({ 'digi-form-textarea': true }, this.cssModifiers) }, h("div", { key: 'a18d782506a20eb687bd8792a3fb0da3db159d4f', class: "digi-form-textarea__label" }, h("digi-form-label", { key: '1574be92b63e16034a5690a9d217da8e63ca7470', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText })), h("div", { key: 'c3258fb29058a14abae464e8e7f22074675e0115', class: "digi-form-textarea__content" }, h("textarea", { key: '5273fb0ea8d7c1345bfc37df0214f1ceb497f2ae', 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} ${this.afId}--validation-message`, "aria-labelledby": this.afAriaLabelledby, "aria-invalid": this.afValidation === FormTextareaValidation.ERROR
+        return (h(Host, { key: '98f682ee8195c12379e2423c3539404e1830e695', tabindex: -1 }, h("div", { key: '6481b13c2551958ebde492a5a6cc2b708b26e2d8', class: Object.assign({ 'digi-form-textarea': true }, this.cssModifiers) }, h("div", { key: '0ee19bc6a14361ae3b22b56034d08492e0170a9e', class: "digi-form-textarea__label" }, h("digi-form-label", { key: '178f9fedcf69b0cbf52057021a757a1f8c2e8e3d', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText })), h("div", { key: 'be556535265c322c7be065aa2e3335bcaef95fbc', class: "digi-form-textarea__content" }, h("textarea", { key: '302bf34c94a161971dc809d7e5ef9d7b4ec71ede', 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} ${this.afId}--validation-message`, "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: '38ade9720142b05d65248291749635e061681bad', class: "digi-form-textarea__footer" }, h("div", { key: 'fbe8041652cc9c1bc72bffc98582c5312b9c020b', class: "digi-form-textarea__validation", "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.hasActiveValidationMessage &&
-            this.afValidation != FormTextareaValidation.NEUTRAL && (h("digi-form-validation-message", { key: 'baea13a3e9d6c7a762cce0f0296ee0dcb267ff9f', 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: '3ab685a78e1a4e7a8cf526e79ad5cc26de8c2447', class: "digi-form-textarea__footer" }, h("div", { key: '6b15817472e36252aeed5c2531b6ad14ab6e4f1c', class: "digi-form-textarea__validation", "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.hasActiveValidationMessage &&
+            this.afValidation != FormTextareaValidation.NEUTRAL && (h("digi-form-validation-message", { key: '92726ac010661ed5bce7ba9065f9b4105dd43f3c', class: "digi-form-textarea__validation-message", "af-variation": this.afValidation }, this.afValidationText)))))));
     }
     static get is() { return "digi-form-textarea"; }
     static get encapsulation() { return "scoped"; }
@@ -597,6 +608,28 @@ export class FormTextarea {
                 "attribute": "af-autofocus",
                 "reflect": false
             },
+            "afTrimValue": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "en",
+                            "text": "If true, the value of the input field is trimmed on blur"
+                        }],
+                    "text": "S\u00E4tts till true f\u00F6r att trimma v\u00E4rdet i inmatningsf\u00E4ltet vid onblur."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "af-trim-value",
+                "reflect": false
+            },
             "afErrorMessageIsAlert": {
                 "type": "any",
                 "mutable": false,

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

@@ -14,7 +14,6 @@ License: none (public domain)
 :host .digi-header__wrapper {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   padding-left: var(--digi--header--padding-left);
   padding-right: var(--digi--header--padding-right);
 }
@@ -26,11 +25,6 @@ License: none (public domain)
 :host .digi-header__border {
   border-bottom: var(--digi--header--border-width) solid var(--digi--header--border-color);
 }
-:host .digi-header__content {
-  display: flex;
-  align-items: center;
-  gap: var(--digi--header--content--gap);
-}
 :host .digi-header ::slotted([slot=header-logo]) {
   margin-left: -0.125rem;
   text-decoration: none;
@@ -43,23 +37,16 @@ License: none (public domain)
   flex-shrink: 0;
 }
 :host .digi-header ::slotted(div[slot=header-content]) {
-  --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--content--gap: 1rem;
   display: flex;
   align-items: center;
+  flex: 1;
+  justify-content: flex-end;
   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

@@ -83,10 +83,10 @@ export class Header {
         }
     }
     renderContent() {
-        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 }))));
+        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: '65cc845a9c3f2eb3d86fa8745b3dc042249140b8', "aria-label": this.ariaLabel, class: Object.assign({ 'digi-header': true }, this.cssModifiers) }, h("digi-util-breakpoint-observer", { key: '9e25393e1d5094dd49171b590a6ab0a4004f3e7f', onAfOnChange: (e) => this.handleBreakpointObserver(e) }), h("digi-layout-block", { key: '0e7791c78b6b8f3dd085ffb7e3bab754ea6453e3', afContainer: LayoutBlockContainer.NONE }, this.afCentered !== HeaderCenterContentWidth.DEFAULT ? (h("digi-layout-container", { "af-max-width": this.afCentered }, this.renderContent())) : (this.renderContent()), h("div", { key: '800e6f888496ea187fa7ed9d2431b5806b0d8206', class: "digi-header__border" }), h("slot", { key: 'a24318deb7d4a91b7715024996be181faeae283a', name: "header-navigation" }))));
+        return (h("header", { key: '73e95103c9377a0a880757124540cefe8395c70c', "aria-label": this.ariaLabel, class: Object.assign({ 'digi-header': true }, this.cssModifiers) }, h("digi-util-breakpoint-observer", { key: 'b43a331345bcb463c9cb7ae26032a6c5bcec05ce', onAfOnChange: (e) => this.handleBreakpointObserver(e) }), h("digi-layout-block", { key: 'f9e92080a234f619650f0bcdbff2ee3a471f63b9', afContainer: LayoutBlockContainer.NONE }, this.afCentered !== HeaderCenterContentWidth.DEFAULT ? (h("digi-layout-container", { "af-max-width": this.afCentered }, this.renderContent())) : (this.renderContent()), h("div", { key: '0e080daf5eaa59f83cee7585a6d0f70c44e96892', class: "digi-header__border" }), h("slot", { key: '2339203a0d17c1263e7ad61d344d3c966bcd9d8c', name: "header-navigation" }))));
     }
     static get is() { return "digi-header"; }
     static get encapsulation() { return "scoped"; }

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

@@ -782,9 +782,6 @@ body {
 :host .digi-header-avatar__name, :host .digi-header-avatar__signature {
   margin-left: var(--digi--header-avatar--margin);
 }
-:host ::slotted(*) {
-  margin-left: var(--digi--header-avatar--margin);
-}
 
 ::slotted(* img) {
   border-radius: 100%;

package/dist/collection/components/_link/link/link.js

@@ -59,7 +59,7 @@ export class Link {
         };
     }
     render() {
-        return (h(Host, { key: '39f2ab8f08a13d1c4d7cae4dadc36b8670bb0fc0', class: Object.assign({ 'digi-link': true }, this.cssModifiers) }, !this.afLinkContainer && (h("a", { key: '66a8dc062b313986fe9c1faeb766c9e325ee5d86', href: this.afHref, onClick: (e) => this.clickLinkHandler(e), target: this.afTarget, rel: this.relation, ref: (el) => (this._link = el), "aria-describedby": this.afDescribedby, "aria-label": this.afAriaLabel, download: this.afDownload }, this.hasIcon && (h("div", { key: '03fdec9e4444f0cf7a2bfe7de1ba95ed82b62a38', class: "digi-link__icon-wrapper", "aria-hidden": "true" }, h("slot", { key: 'bb8a908170e7328e425b175b969e0b0a75302729', name: "icon" }))), h("slot", { key: 'cc3dfa7c092ea7f6272d14c5ae2889671eb2fd01' }))), this.afLinkContainer && h("slot", { key: '659499126035d0dc3c6bed718c692e9d891e1ddf' })));
+        return (h(Host, { key: 'c2cdd832f50e81c35d8c3e06b5fb294f9515f938', class: Object.assign({ 'digi-link': true }, this.cssModifiers) }, !this.afLinkContainer && (h("a", { key: 'e8b2298dd031c232cc1f1049852b140d72e9a984', href: this.afHref, onClick: (e) => this.clickLinkHandler(e), target: this.afTarget, rel: this.relation, ref: (el) => (this._link = el), "aria-describedby": this.afDescribedby, "aria-label": this.afAriaLabel, download: this.afDownload }, this.hasIcon && (h("div", { key: '3bf604f269f9bcae1b935670485374f4698d1ff1', class: "digi-link__icon-wrapper", "aria-hidden": "true" }, h("slot", { key: '2ded07fa39426315f056da4981a2f182601fda33', name: "icon" }))), h("slot", { key: '0df2301bbeb8c2828e86ed2f6a069a83c18d3fa1' }))), this.afLinkContainer && h("slot", { key: 'ecd0d327630dcb310bb8148f7c22d62dce62cf11' })));
     }
     static get is() { return "digi-link"; }
     static get encapsulation() { return "scoped"; }
@@ -83,7 +83,7 @@ export class Link {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": true,
+                "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [{
@@ -178,7 +178,7 @@ export class Link {
                             "name": "en",
                             "text": "Override default link behavior. Should only be used if default link behaviour is a problem with e.g. routing"
                         }],
-                    "text": "Kringg\u00E5r l\u00E4nkens vanliga beteende.\nB\u00F6r endast anv\u00E4ndas om det vanliga beteendet \u00E4r problematiskt pga dynamisk routing eller liknande."
+                    "text": "Kringg\u00E5r l\u00E4nkens vanliga klick-beteende (e.preventDefault()).\nB\u00F6r endast anv\u00E4ndas om det vanliga beteendet \u00E4r problematiskt pga dynamisk routing eller liknande."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/_link/link-button/link-button.js

@@ -53,7 +53,7 @@ export class LinkButton {
         };
     }
     render() {
-        return (h(Host, { key: '912e033fb035df1cdd5ebb6ce8bc35f0b5f1c79f', class: Object.assign({ 'digi-link-button': true }, this.cssModifiers) }, !this.afLinkContainer && (h("a", { key: '4c519d24bb7876e50c38c1f01f117dc60dac79ba', href: this.afHref, "aria-label": this.afAriaLabel, onClick: (e) => this.clickLinkHandler(e), ref: (el) => (this._link = el) }, h("span", { key: 'b095e3ef659e5a20a8bd5d7397a4d17f914298bd', class: "digi-link-button__text" }, h("slot", { key: '9da0bde27b312b79310a36939cda71e5c44be19d' })), this.hasNotification && h("slot", { key: 'b19c63133b1014a0a6e1b6d95b81ae2d48638ba8', name: "notification" }), h("digi-icon-chevron-right", { key: '7ef41bd82490cdac4268a24c988d5d35c33e58c6', class: "digi-link-button__icon" }))), this.afLinkContainer && (h(Fragment, { key: '987a6cd83ff9959b53a098a27cbd43a7d8389ffb' }, h("slot", { key: 'c5ab750ed9828c9af326ab88bb3c750146b40677' }), this.hasNotification && h("slot", { key: '8edb1cae2d9438dd3a2bf82aaf3028f75d47f980', name: "notification" })))));
+        return (h(Host, { key: '8084e4edd5437ec25a37459fc10050c4da5c58e9', class: Object.assign({ 'digi-link-button': true }, this.cssModifiers) }, !this.afLinkContainer && (h("a", { key: '0e96ae78fdd4b5625a3313e68c28a01d34893d5d', href: this.afHref, "aria-label": this.afAriaLabel, onClick: (e) => this.clickLinkHandler(e), ref: (el) => (this._link = el) }, h("span", { key: '8d67272ad7dc1c7b4c486949b2081c63b71ec1ad', class: "digi-link-button__text" }, h("slot", { key: 'cc7ac84c042f3d8b28c6cb28fc91ee6fa1ea1cb2' })), this.hasNotification && h("slot", { key: '11168a09812b2e7b40bf8c226d97a933c0f42b2a', name: "notification" }), h("digi-icon-chevron-right", { key: 'e2beb86a4524142a0a8c385fe2b5a69b8c1aa5f5', class: "digi-link-button__icon" }))), this.afLinkContainer && (h(Fragment, { key: '17954863dc4516a71a80b0393432a2cba6a7723f' }, h("slot", { key: 'a91e26192d4443fb1a21079be1f3087b02fd3de3' }), this.hasNotification && h("slot", { key: '8b322b449ed00daa5149b23c830df1a92f68c8ae', name: "notification" })))));
     }
     static get is() { return "digi-link-button"; }
     static get encapsulation() { return "scoped"; }
@@ -77,7 +77,7 @@ export class LinkButton {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": true,
+                "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [{
@@ -157,7 +157,7 @@ export class LinkButton {
                             "name": "en",
                             "text": "Override default link behavior. Should only be used if default link behaviour is a problem with e.g. routing"
                         }],
-                    "text": "Kringg\u00E5r l\u00E4nkens vanliga beteende.\nB\u00F6r endast anv\u00E4ndas om det vanliga beteendet \u00E4r problematiskt pga dynamisk routing eller liknande."
+                    "text": "Kringg\u00E5r l\u00E4nkens vanliga klick-beteende (e.preventDefault()).\nB\u00F6r endast anv\u00E4ndas om det vanliga beteendet \u00E4r problematiskt pga dynamisk routing eller liknande."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/_link/link-external/link-external.js

@@ -22,7 +22,7 @@ export class LinkExternal {
         };
     }
     render() {
-        return (h(Host, { key: '2b9cd17937699207be4cf903b556d8cd379a5b27' }, h("digi-link", { key: '8aedb5c22c93f2bb01ea8a8d750e5dc8c290b138', class: Object.assign({ 'digi-link-external': true }, this.cssModifiers), afHref: this.afHref, onAfOnClick: (e) => this.clickLinkHandler(e), afTarget: this.afTarget, afDescribedby: this.afDescribedby, afAriaLabel: this.afAriaLabel }, h("digi-icon-external-link-alt", { key: '86f554d686e7779eb0c289de5e92be46b3e8dfbe', class: "digi-link-external__icon", "aria-hidden": "true", slot: "icon" }), h("slot", { key: '5f7697d1c5110c209a39dcf9f6a35410b37ee3e3' }))));
+        return (h(Host, { key: 'fd51401c9fa0ab852d9e44af66dcd946a5d2e9e1' }, h("digi-link", { key: 'deb5a9d9f8155a40adee978953096920b6500566', class: Object.assign({ 'digi-link-external': true }, this.cssModifiers), afHref: this.afHref, onAfOnClick: (e) => this.clickLinkHandler(e), afTarget: this.afTarget, afDescribedby: this.afDescribedby, afAriaLabel: this.afAriaLabel }, h("digi-icon-external-link-alt", { key: '3fa6ae4913240c6b58d7c12ed2b2576632c614c1', class: "digi-link-external__icon", "aria-hidden": "true", slot: "icon" }), h("slot", { key: '3d80136ed787b51d57da623e72fd6440f6e1670b' }))));
     }
     static get is() { return "digi-link-external"; }
     static get encapsulation() { return "scoped"; }
@@ -46,7 +46,7 @@ export class LinkExternal {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": true,
+                "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [{

package/dist/collection/components/_link/link-internal/link-internal.js

@@ -23,7 +23,7 @@ export class LinkInternal {
         };
     }
     render() {
-        return (h(Host, { key: 'c6d5e7a0105a9925a2f86b7116a2ede429416ff3' }, !this.afLinkContainer && (h("digi-link", { key: 'e45e9126a56d10597a6c28a597e121a73262bfdf', class: Object.assign({ 'digi-link-internal': true }, this.cssModifiers), afHref: this.afHref, afOverrideLink: this.afOverrideLink, afLinkContainer: this.afLinkContainer, onAfOnClick: (e) => this.clickLinkHandler(e), afDescribedby: this.afDescribedby, afAriaLabel: this.afAriaLabel }, h("digi-icon-chevron-right", { key: 'd832ccde4247f8279dc3508a4105878bf7d52787', class: "digi-link-internal__icon", "aria-hidden": "true", slot: "icon" }), h("slot", { key: '51569cf86084177a09f7d24359d0f26fb6f4f775' }))), this.afLinkContainer && (h("digi-link", { key: '10b6567afd3e6180b19352dce82104dc3c15617d', afHref: this.afHref, afOverrideLink: true, afLinkContainer: this.afLinkContainer, onAfOnClick: (e) => this.clickLinkHandler(e), afDescribedby: this.afDescribedby, afAriaLabel: this.afAriaLabel }, h("slot", { key: '425f14738e3fbcc55509acb533e2825ace5cd224' })))));
+        return (h(Host, { key: 'b1da74bae4a34ab17b3ff31e0dda62a67bdf1b05' }, !this.afLinkContainer && (h("digi-link", { key: '871f6bd7561de8d2751f6ff7a26493329d1b01fa', class: Object.assign({ 'digi-link-internal': true }, this.cssModifiers), afHref: this.afHref, afOverrideLink: this.afOverrideLink, afLinkContainer: this.afLinkContainer, onAfOnClick: (e) => this.clickLinkHandler(e), afDescribedby: this.afDescribedby, afAriaLabel: this.afAriaLabel }, h("digi-icon-chevron-right", { key: 'dfbe58ab754fd4bd08d7e2955d14e79e9f3d28ad', class: "digi-link-internal__icon", "aria-hidden": "true", slot: "icon" }), h("slot", { key: '1a5bddcf083c60a12425980099de252bba7d4182' }))), this.afLinkContainer && (h("digi-link", { key: '521603dd379a7287a0229eba837d16c7e1a2766c', afHref: this.afHref, afOverrideLink: true, afLinkContainer: this.afLinkContainer, onAfOnClick: (e) => this.clickLinkHandler(e), afDescribedby: this.afDescribedby, afAriaLabel: this.afAriaLabel }, h("slot", { key: '332d629a67f271ddac72ec0f982ab3de9f5a4a18' })))));
     }
     static get is() { return "digi-link-internal"; }
     static get encapsulation() { return "scoped"; }
@@ -47,7 +47,7 @@ export class LinkInternal {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": true,
+                "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [{
@@ -120,7 +120,7 @@ export class LinkInternal {
                             "name": "en",
                             "text": "Override default link behavior. Should only be used if default link behaviour is a problem with e.g. routing"
                         }],
-                    "text": "Kringg\u00E5r l\u00E4nkens vanliga beteende.\nB\u00F6r endast anv\u00E4ndas om det vanliga beteendet \u00E4r problematiskt pga dynamisk routing eller liknande."
+                    "text": "Kringg\u00E5r l\u00E4nkens vanliga klick-beteende (e.preventDefault()).\nB\u00F6r endast anv\u00E4ndas om det vanliga beteendet \u00E4r problematiskt pga dynamisk routing eller liknande."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/_navigation/navigation-vertical-menu-item/navigation-vertical-menu-item.js

@@ -115,24 +115,24 @@ export class NavigationVerticalMenuItem {
         }
     }
     render() {
-        return (h("host", { key: 'b880227638a1f8025e80ef32db9b106b00a8b5a3', class: {
+        return (h("host", { key: '831f600bb3be81e7eb6b39b1125c056e7dfa3564', class: {
                 'digi-navigation-vertical-menu-item--has-subnav': this.hasSubnav,
                 'digi-navigation-vertical-menu-item--active-subnav': this.activeSubnav
-            } }, h("div", { key: '66b23291ec4d03ed1d982865528e652f35900625', class: Object.assign({ 'digi-navigation-vertical-menu-item': true }, this.cssModifiers) }, this.hasSubnav && this.afHref && (h("div", { key: '813b1b4fc6d29967d8ccab1911800af58c4ec1d8', class: "digi-navigation-vertical-menu-item__inner digi-navigation-vertical-menu-item__inner--combined" }, h("a", { key: '372e197f6b039c7de3add77fe0173a2977c7a235', id: `${this.afId}-link`, href: this.afHref, class: {
+            } }, h("div", { key: 'c636dcbad3f5060a1568bb10e92feee35f10dd61', class: Object.assign({ 'digi-navigation-vertical-menu-item': true }, this.cssModifiers) }, this.hasSubnav && this.afHref && (h("div", { key: '0740173821da4e2879360fe0a5ad43d654b218ee', class: "digi-navigation-vertical-menu-item__inner digi-navigation-vertical-menu-item__inner--combined" }, h("a", { key: 'f82cdfb6ed836e5c481ae12a60fba655eda8e4aa', id: `${this.afId}-link`, href: this.afHref, class: {
                 'digi-navigation-vertical-menu-item__link': true,
                 'digi-navigation-vertical-menu-item__has-subnav': true,
                 'digi-navigation-vertical-menu-item__link--active': this.isActive,
                 'digi-navigation-vertical-menu-item__link--expanded': this.activeSubnav
-            }, onClick: (e) => this.clickHandler(e) }, h("div", { key: 'f15ba1a239223ea597feae19e23b31d6cdc4bb6f', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: '815ad8df1e2155b15f4fd444286c267e3f14b69c', name: "icon" })), h("span", { key: '1c5f68ffba8af1681d2a3241675074b23d32f1a0', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: 'b4792c9089677e62c39ce3b13d894901f34e08db', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: '823fdf5314e523386d8cf0c76d3759f48095e3e2', name: "badge" }))), h("button", { key: '7e9d281a9f9f017bbf921a56cf6c222371f66d25', type: "button", id: `${this.afId}-toggle-button`, class: {
+            }, onClick: (e) => this.clickHandler(e) }, h("div", { key: 'b778e1e5497d1936979ed1bec64dd1a6786b2974', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: '0de5873363746a89ceff108ff720d26c5e3c033e', name: "icon" })), h("span", { key: '63104dbf34e6c7deccbda3095c4fd0d8d2ae8ccf', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: '9d45b2cc780a9d03b9abdcddcf16600953a3f71c', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: '02411e2ddf9a55929b43202e5d6fb94930849055', name: "badge" }))), h("button", { key: 'd45ed8d0afa7b0daa5bbb21532354f55ec01a8a3', type: "button", id: `${this.afId}-toggle-button`, class: {
                 'digi-navigation-vertical-menu-item__button digi-navigation-vertical-menu-item__button--toggle': true,
                 'digi-navigation-vertical-menu-item__button--active': this.isActive
-            }, onClick: (e) => this.clickHandler(e), "aria-controls": `${this.afId}-collapse-menu`, "aria-expanded": this.activeSubnav ? 'true' : 'false', "aria-label": `${this.toggleButtonText} ${this.afText}` }, h("span", { key: '1191e70005393c4de22aaaf7f31ea519ce76e38b', class: "digi-navigation-vertical-menu-item__toggle-icon" }, h("span", { key: 'ebeaf192dd628581f500153b6730de5c807a7c73', class: "icon" }, this.toggleIcon))))), this.hasSubnav && !this.afHref && (h("div", { key: 'ba7f47312d4da5d5318fef885bf3c871859d0e11', class: "digi-navigation-vertical-menu-item__inner" }, h("button", { key: 'a549c35be775eda4d97af83bbd02574375ee4bda', id: `${this.afId}-toggle-button`, class: "digi-navigation-vertical-menu-item__button digi-navigation-vertical-menu-item__button--only-toggle", onClick: (e) => this.clickHandler(e), "aria-controls": `${this.afId}-collapse-menu`, "aria-expanded": this.activeSubnav ? 'true' : 'false', type: "button" }, h("span", { key: 'dafcf4b088bb2e537576872e4ab619065ee361f8', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: 'fa7f0d18216065afb1a03413876956458ba91160', name: "icon" })), h("span", { key: '778c90bf46376555e90e72fa091cb7bf2c2ffaa0', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: '3f5c4001d0c58d72e3f7c38f9e4f61651cd8ba03', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: 'cebf8b10e3e0687f70d877ff747dd4c1e6cfe26a', name: "badge" })), h("span", { key: '565062ad871e98cc3605ba2646b34f229491aa5f', class: "digi-navigation-vertical-menu-item__toggle-icon" }, h("span", { key: 'fbf0e92f92e57b01f6a5bcc28228df907d851b86' }, this.toggleIcon))))), !this.hasSubnav && (h("div", { key: '2a7d77092f9ba8cb700565e0e1fce54772ae5ce6', class: "digi-navigation-vertical-menu-item__inner" }, !this.isActive && (h("a", { key: '03ccf4b05246b0ee637189818804a028914ebfd2', id: `${this.afId}-link`, href: this.afHref, class: {
+            }, onClick: (e) => this.clickHandler(e), "aria-controls": `${this.afId}-collapse-menu`, "aria-expanded": this.activeSubnav ? 'true' : 'false', "aria-label": `${this.toggleButtonText} ${this.afText}` }, h("span", { key: '637181e113d06884ea746addd703782e71fce6f8', class: "digi-navigation-vertical-menu-item__toggle-icon" }, h("span", { key: '277050ea6a5e5f5937d4f9ba1800229fc46bead3', class: "icon" }, this.toggleIcon))))), this.hasSubnav && !this.afHref && (h("div", { key: 'edd3cded5d09fa987e148c6bd57c70e3873cd9f0', class: "digi-navigation-vertical-menu-item__inner" }, h("button", { key: '6669e3e1c091f1e3e3c9fb728e5aaad6ce1cedf7', id: `${this.afId}-toggle-button`, class: "digi-navigation-vertical-menu-item__button digi-navigation-vertical-menu-item__button--only-toggle", onClick: (e) => this.clickHandler(e), "aria-controls": `${this.afId}-collapse-menu`, "aria-expanded": this.activeSubnav ? 'true' : 'false', type: "button" }, h("span", { key: '722adf95ad9d1a50f2b4dbb1e82c43a06e6f8f22', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: 'f0887a508f78e2e4d085a56ae28bfe62ec5f7c6a', name: "icon" })), h("span", { key: '75819f2f65263af970b274195c1cdd37b1aca54b', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: 'b9a2cb1da360f5ac4cf7abf02ea5c07d9bb1725b', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: '811ce3dea1dfdc945493010ece752d947fb8dd48', name: "badge" })), h("span", { key: '7861ac8a986f1ba4a4043d1ef60d0899efb2e54c', class: "digi-navigation-vertical-menu-item__toggle-icon" }, h("span", { key: '7572ae648dea2fe6c494d1ab78c154391dd3edba' }, this.toggleIcon))))), !this.hasSubnav && (h("div", { key: 'f6e6318c57e612d8b449b9a009b19311678c87d8', class: "digi-navigation-vertical-menu-item__inner" }, !this.isActive && (h("a", { key: '334bc20a2df68386cae4a7d2499f851d24a108a0', id: `${this.afId}-link`, href: this.afHref, class: {
                 'digi-navigation-vertical-menu-item__link': true,
                 'digi-navigation-vertical-menu-item__link--active': this.isActive
-            }, onClick: (e) => this.clickHandler(e) }, h("div", { key: '09cb9dd14c1d0f98277b5f91bbdf5ddf247f770f', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: '9eb474b7bbe4b8ebf2de9326e70b96d5c5554823', name: "icon" })), h("span", { key: 'd06b00e8fe406469a58d89321286ed4c3e41ee28', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: '7e52f0ee39ede7eb44a3cfb5e031ec557bb57989', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: '5528f880b8060156f729c4424c39bc5ce250a071', name: "badge" })))), this.isActive && (h("a", { key: '6d68cda6b03124b3412debf00cd13656dc7e4641', id: `${this.afId}-link`, href: this.afHref, "aria-current": this.afAriaCurrent, class: {
+            }, onClick: (e) => this.clickHandler(e) }, h("div", { key: '53ab9bf11c7690dc417375be3f1affd7fe21ec6d', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: 'b08623e61374243b1fb4f681a1ad66e91c452fc4', name: "icon" })), h("span", { key: '818c610c8473b7c31fbcc80aaf84b6d86a025737', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: 'f866b6689358c3461dcc19487a466699a46b27e8', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: '13943e887a862cfe1654862dcdf899c27c607a70', name: "badge" })))), this.isActive && (h("a", { key: 'bf9a7ba9b7e4fd72c113afabd51a02bbfbb0f957', id: `${this.afId}-link`, href: this.afHref, "aria-current": this.afAriaCurrent, class: {
                 'digi-navigation-vertical-menu-item__link': true,
                 'digi-navigation-vertical-menu-item__link--active': this.isActive
-            }, onClick: (e) => this.clickHandler(e) }, h("div", { key: '63af803c675981661526503061377d086af4738b', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: 'dc65dab94180e8f0028d506ed09ae85cc1e7375f', name: "icon" })), h("span", { key: 'c39e2885ac5938aa5ffe17062b4b79c5905435b4', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: 'e4fa7456b93a82102feba487707e06309c7130a8', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: 'ce36852991d5d3ebb25591facbfdfce86b8dff10', name: "badge" })))))))));
+            }, onClick: (e) => this.clickHandler(e) }, h("div", { key: '20ff961f85090e27a0dbeaea8f8974a025113e1f', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: '4f16c6e58f5789c7564136daafa900b3d0dd3038', name: "icon" })), h("span", { key: '2ed83aee8e224497f97b9c34f92dd7808eb4614e', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: '6d0ec7a4ca665bd297fbf6c12ed5a5281ed15da3', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: 'a37605a7371b7a835abb80a443e98125a634cc27', name: "badge" })))))))));
     }
     static get is() { return "digi-navigation-vertical-menu-item"; }
     static get encapsulation() { return "scoped"; }
@@ -297,7 +297,7 @@ export class NavigationVerticalMenuItem {
                             "name": "en",
                             "text": "Override default anchor link behavior and sets focus programmatically. Should only be used if default anchor link behaviour is a problem with e.g. routing"
                         }],
-                    "text": "Kringg\u00E5r l\u00E4nkens vanliga beteende.\nB\u00F6r endast anv\u00E4ndas om det vanliga beteendet \u00E4r problematiskt pga dynamisk routing eller liknande."
+                    "text": "Kringg\u00E5r l\u00E4nkens vanliga klick-beteende (e.preventDefault()).\nB\u00F6r endast anv\u00E4ndas om det vanliga beteendet \u00E4r problematiskt pga dynamisk routing eller liknande."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/_notification/notification-alert/notification-alert.css

@@ -93,6 +93,9 @@ License: none (public domain)
   align-items: stretch;
   gap: 0;
 }
+:host .digi-notification-alert__icon-wrapper {
+  align-items: stretch;
+}
 :host .digi-notification-alert__icon {
   background: var(--ICON--BACKGROUND);
   padding: var(--ICON--PADDING);
@@ -106,6 +109,9 @@ License: none (public domain)
   --digi--icon--width: var(--ICON--WIDTH);
   --digi--icon--color: var(--ICON--COLOR);
 }
+:host .digi-notification-alert__main-wrapper {
+  flex: 1;
+}
 :host .digi-notification-alert__wrapper {
   display: flex;
   border: var(--BORDER);
@@ -155,10 +161,4 @@ License: none (public domain)
 :host .digi-notification-alert__content > * {
   --digi--typography--max-width: var(--MAX-WIDTH);
   --digi--typography--margin-top--text: var(--digi--gutter--small);
-}
-:host .icon-wrapper {
-  align-items: stretch;
-}
-:host .main-wrapper {
-  flex: 1;
 }

package/dist/collection/components/_notification/notification-alert/notification-alert.js

@@ -56,8 +56,8 @@ export class NotificationAlert {
         }
     }
     render() {
-        return (h("div", { key: 'bf3f0a58082fb86cf6642f9769c101489c72edde', class: Object.assign({ 'digi-notification-alert': true }, this.cssModifiers) }, h("div", { key: '31a46f56e2bd7248c2b9df479a02c21e2efade82', class: "digi-notification-alert__layout" }, h("div", { key: 'adc8397ce115af922885eeecafdebbf7bf18035d', class: "icon-wrapper" }, h("div", { key: '38440269617cbeb7185c90eb81194cab8d46afbd', class: "digi-notification-alert__icon", slot: "media" }, this.icon)), h("div", { key: '8be12ad3c0d0466ad60f102dbcb599c1aff3eebe', class: "main-wrapper" }, h("div", { key: '306c289ee677e7f2ce4601f9a8bba2fc3a550196', class: "digi-notification-alert__wrapper" }, this.afCloseable && (h("digi-button", { key: '5b9e99e93677b1057f4485d13e9827d5404f85a4', "af-aria-label": this.afCloseAriaLabel, "af-variation": ButtonVariation.FUNCTION, onAfOnClick: (e) => this.clickHandler(e), class: "digi-notification-alert__close-button" }, h("span", { key: '73b426345ac2352b8c851ae64e5063fa525e422b', class: "digi-notification-alert__close-button__text" }, "St\u00E4ng"), h("digi-icon-x", { key: 'ee1089839ba1094b780ccc32d59bcdb2c0126e5b', slot: "icon-secondary", "aria-hidden": "true" }))), h("div", { key: '283a3e0f4fe25c420b0b284251c0e325cd51e4b8', class: "digi-notification-alert__text" }, this.afHeading &&
-            this.afSize === NotificationAlertSize.LARGE && (h(this.afHeadingLevel, { key: '42d1221b2fd943f970e9e6d3a18833c28cc91881', ref: (el) => (this._heading = el), tabindex: "-1", class: "digi-notification-alert__heading" }, this.afHeading)), h("div", { key: '60fea41af154d6690f3313af4e710461f81f3b62', class: "digi-notification-alert__content" }, h("digi-typography", { key: '146f0bb6da09fce6e3044f23d8cfaeac564334b9', "af-variation": TypographyVariation.SMALL }, h("slot", { key: 'e34dead87fa7f3fb474e83c325dbfabef465f53a' })))))))));
+        return (h("div", { key: 'bf3f0a58082fb86cf6642f9769c101489c72edde', class: Object.assign({ 'digi-notification-alert': true }, this.cssModifiers) }, h("div", { key: '31a46f56e2bd7248c2b9df479a02c21e2efade82', class: "digi-notification-alert__layout" }, h("div", { key: '3a9b948108d510282da3d344036df3b15d4c6a6b', class: "digi-notification-alert__icon-wrapper" }, h("div", { key: '6de4451514422b7b54e96767d7fc0aaf1d85ad4a', class: "digi-notification-alert__icon", slot: "media" }, this.icon)), h("div", { key: 'cb537642611e6fcc4fbe72d97906eb879455ab28', class: "digi-notification-alert__main-wrapper" }, h("div", { key: '41f8b5af01d7d24dc147e536b14417a15bb3c53c', class: "digi-notification-alert__wrapper" }, this.afCloseable && (h("digi-button", { key: '4ac49d9ee2cd397995e7d70ce7159cb2a04d7ccc', "af-aria-label": this.afCloseAriaLabel, "af-variation": ButtonVariation.FUNCTION, onAfOnClick: (e) => this.clickHandler(e), class: "digi-notification-alert__close-button" }, h("span", { key: 'efcb9359dc3b64b26b1bb549200912432ce332ed', class: "digi-notification-alert__close-button__text" }, "St\u00E4ng"), h("digi-icon-x", { key: '0e3d6e993740cc994f7cf944d5a6c65feb8d4c38', slot: "icon-secondary", "aria-hidden": "true" }))), h("div", { key: 'bb436a69524dd58366d46e70e5a173d2e2626d96', class: "digi-notification-alert__text" }, this.afHeading &&
+            this.afSize === NotificationAlertSize.LARGE && (h(this.afHeadingLevel, { key: '85aaea1e186d5f81edc8b9c9bc4d0de13c499e67', ref: (el) => (this._heading = el), tabindex: "-1", class: "digi-notification-alert__heading" }, this.afHeading)), h("div", { key: 'e5e9fcbc2189a8574553ed8af87e17e32c1b2a7d', class: "digi-notification-alert__content" }, h("digi-typography", { key: 'f50d6ae9bcd718c69d1ccb18a054454e37cce865', "af-variation": TypographyVariation.SMALL }, h("slot", { key: '26714715984cec58976af688ac94eaae77b9320e' })))))))));
     }
     static get is() { return "digi-notification-alert"; }
     static get encapsulation() { return "scoped"; }