@designsystem-se/af 32.3.1-beta.0 → 32.4.0

package/dist/cjs/{logo-variation.enum-3632e1e1.js → logo-variation.enum-607fadb4.js}

@@ -1,11 +1,5 @@
 'use strict';
 
-exports.LinkVariation = void 0;
-(function (LinkVariation) {
-    LinkVariation["SMALL"] = "small";
-    LinkVariation["LARGE"] = "large";
-})(exports.LinkVariation || (exports.LinkVariation = {}));
-
 exports.LogoColor = void 0;
 (function (LogoColor) {
     LogoColor["PRIMARY"] = "primary";

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

@@ -1480,7 +1480,7 @@ export class ChartLine {
             .attr('font-family', 'sans-serif')
             .text((d) => d)
             .each((...[, i, nodelist]) => {
-            const thisWidth = nodelist[i].getComputedTextLength() + 30; // 15 pixel padding on each side
+            const thisWidth = nodelist[i].getComputedTextLength() + 5; // A little extra padding, text sizes seems to be a little small compared to real life 
             textWidth.push(thisWidth);
             nodelist[i].remove();
         });
@@ -1489,16 +1489,18 @@ export class ChartLine {
     }
     // Goes through all tick values and checks the biggest in size, this one will decide the default tick-size
     setTickSize() {
+        // Padding on both sides comined
+        const textPadding = 25; // 12.5 pixel padding on each side
         if (this._chartData.data.xValueNames) {
             for (const elem of this._chartData.data.xValueNames) {
-                const size = this.getTextSize(elem);
+                const size = this.getTextSize(elem) + textPadding;
                 if (size > this._tickSize)
                     this._tickSize = size;
             }
         }
         else {
             for (const elem of this._chartData.data.xValues) {
-                const size = this.getTextSize(elem.toString());
+                const size = this.getTextSize(elem.toString()) + textPadding;
                 if (size > this._tickSize)
                     this._tickSize = size;
             }
@@ -1616,7 +1618,7 @@ export class ChartLine {
             heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}>`;
         else
             heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}><p>${this._chartData.subTitle}</p>`;
-        return (h("host", { key: 'f21b013a8b60400e177357d970b9bf06c9f3cf4e', ref: (el) => (this._host = el) }, h("div", { key: 'a2eb77c9af10a36c7e90297e706a75f5f876e307', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: '617328a73c5773b51487ca89c4940f1f09ad67eb', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '53ab51dcf6678dfac487afeafa4df02308fb5e16', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: '953029ce0933912c1cddadac92fcb5c568914b48', slot: "icon" }), "Visa tabell"), h("digi-button", { key: 'a8720c0331ee8171d1dc99184bd59d8e35108d5c', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: '7098aef34252ce4bb986cc84e941ad089f66315d', slot: "icon" }), "Visa diagram"), h("div", { key: '9db08924008b91bb11a792250282f56f288de210', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: 'f3acb5aab0e706ac7888f5ea82751e7410a08443', class: "chartTooltip", id: this.afId }, h("div", { key: '9dba5fcd563591a8ee71a2078378857ff6ac2241', class: "tooltipBody" }), h("digi-icon-x", { key: 'b09afdfbac4100be8e3fb6c3daac2aecfd8c6fd4', class: "close" }), ' '), h("div", { key: 'a552c93544509354d578478b1883320c875895ed', class: "chart", ref: (el) => (this._chartDiv = el) }), h("div", { key: 'bec7f0c712446eaeeeec8da293a9e40ed7607784', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: '40474802d2acfafd937270da9c5523f330b6133c', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
+        return (h("host", { key: '23524b77e8aa2bb1cae912a08c4f35791074a769', ref: (el) => (this._host = el) }, h("div", { key: '75c7c1a8be55953b5547c5a3dd956027af73fbd1', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: '76e755f765d16611ecf82c2980f660f28cb0239a', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '6665f4a0c7f9ea09b938bd690f1ad2f2838f0c9c', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: '05aee665d9cd4d743c37cda816a3f5a3fe3128f5', slot: "icon" }), "Visa tabell"), h("digi-button", { key: '9f42b7ac02cb3f45d5d2503a9e12836bd76ce862', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: '43e9db95020bf3d24c68a24b269a179d70d8d056', slot: "icon" }), "Visa diagram"), h("div", { key: 'fc14ac6bf87466a5655dc5416bac08d0627a41ef', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: 'd65b4ea0b2a3a0abdc7a94e1cfb82e425ba50d2e', class: "chartTooltip", id: this.afId }, h("div", { key: '0ecff411dd746d6f21b53ae0d39729a55bedd957', class: "tooltipBody" }), h("digi-icon-x", { key: '9dd0ba013b81972e3e74b2e068b808f443ba7bf4', class: "close" }), ' '), h("div", { key: '371ba97658cd0e4f3a251bff860c45a43e9da9f1', class: "chart", ref: (el) => (this._chartDiv = el) }), h("div", { key: 'b4f5e4c1bc605f857910ec423f9de0285ac27e88', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: '6bcc5645b85e62d321a2c37cd365b2d36b577b9a', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
     }
     static get is() { return "digi-chart-line"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_navigation/navigation-context-menu/navigation-context-menu.js

@@ -95,7 +95,7 @@ export class ContextMenu {
         }
     }
     render() {
-        return (h(Host, { key: 'b56dc8e0ca38fa90bf6ac4495b9fb583e00b75ed', id: `${this.afId}-identifier` }, h("digi-navigation-dropdown", { key: 'c196f5442e8c21397ea6a5cb284c6f7e96af15e1', afAriaLabelledby: `${this.afId}-trigger`, afItems: this.items, afVisible: this.visible, afMenuPosition: this.afMenuPosition, afDir: this.afDir, afActiveItem: this.activeItemIdx, afLang: this.afLang, onAfRef: (e) => this.handleRef(e.detail.ref, e.detail.id, e.detail.payload), onAfChangeItem: (e) => this.handleChangeItem(e.detail.item, e.detail.idx), onAfFocusItem: (e) => this.handleFocusItem(e.detail.item, e.detail.idx), afRenderItem: (item, idx) => {
+        return (h(Host, { key: 'b56dc8e0ca38fa90bf6ac4495b9fb583e00b75ed', id: `${this.afId}-identifier` }, h("digi-navigation-dropdown", { key: 'f4fe5c1f4812ae2ab492f5ff1159716cafceae68', afAriaLabelledby: `${this.afId}-trigger`, afId: this.afId, afItems: this.items, afVisible: this.visible, afMenuPosition: this.afMenuPosition, afDir: this.afDir, afActiveItem: this.activeItemIdx, afLang: this.afLang, onAfRef: (e) => this.handleRef(e.detail.ref, e.detail.id, e.detail.payload), onAfChangeItem: (e) => this.handleChangeItem(e.detail.item, e.detail.idx), onAfFocusItem: (e) => this.handleFocusItem(e.detail.item, e.detail.idx), afRenderItem: (item, idx) => {
                 const menuItem = this.items[idx];
                 const Container = menuItem.type === 'link' ? 'a' : 'div';
                 const containerArgs = menuItem.type === 'link'
@@ -107,10 +107,10 @@ export class ContextMenu {
                             ? 'visible'
                             : 'hidden'
                     } })), h("p", null, item.title)));
-            } }, h("digi-button", { key: 'b8e22491a441218e7f2d47ff7a64acdbceb8291a', id: `${this.afId}-trigger`, afInputRef: (ref) => (this.buttonRef = ref), onClick: () => this.handleToggle(), afVariation: "function", afAriaControls: this.afId, afAriaExpanded: this.visible, afAriaLabel: this.afAriaLabel || null, class: {
+            } }, h("digi-button", { key: '6ca8a9350d6a040713e1601c2df874c61883f964', id: `${this.afId}-trigger`, afInputRef: (ref) => (this.buttonRef = ref), onClick: () => this.handleToggle(), afVariation: "function", afAriaControls: `${this.afId}-listbox`, afAriaExpanded: this.visible, afAriaLabel: this.afAriaLabel || null, class: {
                 'digi-navigation-context-menu__trigger-button': true,
                 'digi-navigation-context-menu--active': this.visible
-            } }, !!this.afIcon && h(this.digiIcon, { key: '46475907cc2794c222199e447bd875f62899b956', slot: "icon" }), this.afTitle, h("digi-icon-chevron-down", { key: 'bc867a2cfa17c6fedc3651dac5d117df13415535', class: "digi-navigation-context-menu__toggle-icon", slot: "icon-secondary" })))));
+            } }, !!this.afIcon && h(this.digiIcon, { key: '23ac109788a00edb22f2a2847c2ab1568abba4c3', slot: "icon" }), this.afTitle, h("digi-icon-chevron-down", { key: 'fc7fa776933779e29da3e7fc64d010fa0c65261d', class: "digi-navigation-context-menu__toggle-icon", slot: "icon-secondary" })))));
     }
     static get is() { return "digi-context-menu"; }
     static get originalStyleUrls() {

package/dist/collection/components/_progress/progress-circle/progress-circle.js

@@ -36,6 +36,10 @@ export class ProgressCircle {
     changeCompletedStepsHandler(value) {
         this.completedSteps = value;
     }
+    /**
+     * Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva rubrik-elementet.
+     * @en Listens for when focus is set on the custom element and propagates it down to the actual heading element.
+     */
     focusOnHeading() {
         this.headingElement.focus();
     }
@@ -52,20 +56,20 @@ export class ProgressCircle {
         return;
     }
     render() {
-        return (h("div", { key: '99b44a85b82e6a8ad45a8361a2942df70f85b2d4', class: this.cssModifiers, role: this.afRole === ProgressCircleRole.STATUS
+        return (h("div", { key: '2a876dbd3ce70edf20143d8cad63ef7fa03f16cc', class: this.cssModifiers, role: this.afRole === ProgressCircleRole.STATUS
                 ? ProgressCircleRole.STATUS
-                : null }, h("div", { key: 'b8a56de16fd355d1a6124e90e1fb50925798af1a', class: "digi-progress-circle__circle-wrapper" }, h("div", { key: '42aff20821e2a39e036ae6e0152e8364197cf80a', class: "digi-progress-circle__circle" }, h("p", { key: 'ca57e6b02ce3f4de6b18a45c2ff40ff92318e4e0', class: "digi-progress-circle__circle-label", "aria-label": `${this.afCompletedSteps} ${this.afStepsSeparator} ${this.afTotalSteps}` }, this.afCompletedSteps, " ", this.afStepsSeparator, ' ', this.afTotalSteps, ' '), h("svg", { key: '00c80edf811f66e09f98244fd98bf36136eec3e7', width: this.radius * 2, height: this.radius * 2 }, h("defs", { key: 'e1af198e062d149f44aad1a48b123a2e2b462115' }, h("mask", { key: 'aac270d76145897b853a19033e49075355dbd842', id: this.afId }, h("circle", { key: 'bcd3c9035c26ab875e743fe7ff2a849015bbffed', cx: this.radius, cy: this.radius, r: this.radius - this.stroke * 2, fill: "none", stroke: "white", "stroke-width": this.stroke, "stroke-dasharray": (1000 - this.afTotalSteps * 15) / this.afTotalSteps +
-                ' 15', pathLength: "1000" }))), h("g", { key: '34d76882ac77db38897cc87c113fd15e66270c31' }, h("circle", { key: '3faa9e6b428a47c944ab7c5a62837395fa834f53', class: "digi-progress-circle__circle-step-unfinished", mask: `url(#${this.afId})`, cx: this.radius, cy: this.radius, r: this.radius - this.stroke * 2, fill: "none", "stroke-width": this.stroke }), h("circle", { key: '27c3d8bd99cc46f421d1fcd0f96f4f0c60f79561', class: "digi-progress-circle__circle-step-completed", mask: `url(#${this.afId})`, cx: this.radius, cy: this.radius, r: this.radius - this.stroke * 2, fill: "none", "stroke-width": this.stroke, "stroke-dasharray": (1000 / this.totalSteps.length) * this.afCompletedSteps +
-                ' 1000', pathLength: "1000" }), this.afWarningStep && (h("circle", { key: 'a378becb2da253e4699d7e232ba3064c1819dc3a', class: "digi-progress-circle__circle-step-warning", mask: `url(#${this.afId})`, cx: this.radius, cy: this.radius, r: this.radius - this.stroke * 2, fill: "none", "stroke-width": this.stroke, "stroke-dasharray": (1000 / this.totalSteps.length) * 1 + ' 1000', "stroke-dashoffset": -(1000 / this.totalSteps.length) *
-                (this.afCompletedSteps - 1), pathLength: "1000" })), this.afErrorStep && (h("circle", { key: '63606706bd225d6cdfa79aef416cb4a8786be52b', class: "digi-progress-circle__circle-step-error", mask: `url(#${this.afId})`, cx: this.radius, cy: this.radius, r: this.radius - this.stroke * 2, fill: "none", "stroke-width": this.stroke, "stroke-dasharray": (1000 / this.totalSteps.length) * 1 + ' 1000', "stroke-dashoffset": -(1000 / this.totalSteps.length) *
-                (this.afCompletedSteps - 1), pathLength: "1000" }))))), h("div", { key: '658eb6718710b4d4a0542df6dfa0cb548cea6f49', class: "digi-progress-circle__content" }, this.renderHeading(), this.afCompletedSteps === this.afTotalSteps && (h("p", { key: '088e9ae3b8870aa33c820474c11a359a9b689332', class: "digi-progress-circle__next digi-progress-circle__next--circle", style: {
+                : null }, h("div", { key: '01de3a26258c2c5f01ac5c9b3490604a136ca9ef', class: "digi-progress-circle__circle-wrapper" }, h("div", { key: '4d71758d54585f2b9cebc3193651ce989c0a8212', class: "digi-progress-circle__circle" }, h("p", { key: '88689b7ae3ba17b1e274be28bbd22d9399bf696e', class: "digi-progress-circle__circle-label", "aria-label": `${this.afCompletedSteps} ${this.afStepsSeparator} ${this.afTotalSteps}` }, this.afCompletedSteps, " ", this.afStepsSeparator, ' ', this.afTotalSteps, ' '), h("svg", { key: '497091cdfc0c12cd459885bcbd091ad56c5619f1', width: this.radius * 2, height: this.radius * 2 }, h("defs", { key: '2fdb96a48b659ae1e2ba6eb757ca765b7493af80' }, h("mask", { key: '8a843cab187c33a8b20554e4c8839cb84ae9570a', id: this.afId }, h("circle", { key: 'ea63c18aca6dd161355e7ca24a007d6b049c0cb0', cx: this.radius, cy: this.radius, r: this.radius - this.stroke * 2, fill: "none", stroke: "white", "stroke-width": this.stroke, "stroke-dasharray": (1000 - this.afTotalSteps * 15) / this.afTotalSteps +
+                ' 15', pathLength: "1000" }))), h("g", { key: 'f5ee0f9c80e00e6e1d03be414f0eac31106eb9c3' }, h("circle", { key: 'adf2bb7f0fd8ad758e65731e2d6b4d6e8445733e', class: "digi-progress-circle__circle-step-unfinished", mask: `url(#${this.afId})`, cx: this.radius, cy: this.radius, r: this.radius - this.stroke * 2, fill: "none", "stroke-width": this.stroke }), h("circle", { key: '762c976f53361599831ff2f4a7db617b56dce265', class: "digi-progress-circle__circle-step-completed", mask: `url(#${this.afId})`, cx: this.radius, cy: this.radius, r: this.radius - this.stroke * 2, fill: "none", "stroke-width": this.stroke, "stroke-dasharray": (1000 / this.totalSteps.length) * this.afCompletedSteps +
+                ' 1000', pathLength: "1000" }), this.afWarningStep && (h("circle", { key: 'b50fa15eb6a4eda59a63db6abe7287471a1089c6', class: "digi-progress-circle__circle-step-warning", mask: `url(#${this.afId})`, cx: this.radius, cy: this.radius, r: this.radius - this.stroke * 2, fill: "none", "stroke-width": this.stroke, "stroke-dasharray": (1000 / this.totalSteps.length) * 1 + ' 1000', "stroke-dashoffset": -(1000 / this.totalSteps.length) *
+                (this.afCompletedSteps - 1), pathLength: "1000" })), this.afErrorStep && (h("circle", { key: 'e94afb0a727cd9c9ad613726d9ac0988d4ca0ed7', class: "digi-progress-circle__circle-step-error", mask: `url(#${this.afId})`, cx: this.radius, cy: this.radius, r: this.radius - this.stroke * 2, fill: "none", "stroke-width": this.stroke, "stroke-dasharray": (1000 / this.totalSteps.length) * 1 + ' 1000', "stroke-dashoffset": -(1000 / this.totalSteps.length) *
+                (this.afCompletedSteps - 1), pathLength: "1000" }))))), h("div", { key: 'b9275e2c8bfbaa5c5ccda781745fa15cfcc0956d', class: "digi-progress-circle__content" }, this.renderHeading(), this.afCompletedSteps === this.afTotalSteps && (h("p", { key: 'a65584ef893d7db55f7a534d7855861c81aef55d', class: "digi-progress-circle__next digi-progress-circle__next--circle", style: {
                 visibility: 'hidden'
-            } }, `${this.afStepNextText} ${this.afStepNextLabel}`)), this.afCompletedSteps != this.afTotalSteps && (h("p", { key: '22f2530e1f8a3aa8efdb4f06f86589c5791cbcf4', class: "digi-progress-circle__next digi-progress-circle__next--circle", style: {
+            } }, `${this.afStepNextText} ${this.afStepNextLabel}`)), this.afCompletedSteps != this.afTotalSteps && (h("p", { key: 'b3b98729dce8b5c6c38d11b4b26ad2aa784fa2c0', class: "digi-progress-circle__next digi-progress-circle__next--circle", style: {
                 visibility: this.afStepNextLabel !== null &&
                     this.afStepNextLabel !== undefined
                     ? 'visible'
                     : 'hidden'
-            } }, `${this.afStepNextText} ${this.afStepNextLabel}`)))), this.afValidationLabel && this.afWarningStep > 0 && (h("p", { key: '4ac2a6e3f8f07746190a8c3ea0c3d63e180ab78b', class: "digi-progress-circle__validation-label digi-progress-circle__validation-label--warning" }, h("digi-icon-validation-warning", { key: '450134e22a151a88bee999afa5e90039cd006d3d', class: "digi-progress-circle__icon--warning" }), h("span", { key: 'c073d0d4f646ded69c6bbe0fc5c5b1be98e8d894' }, this.afValidationLabel))), this.afValidationLabel && this.afErrorStep > 0 && (h("p", { key: '17639d528fb0259ea1cfc64a27f8d89a71142b61', class: "digi-progress-circle__validation-label digi-progress-circle__validation-label--error" }, h("digi-icon-validation-error", { key: '20a37e36adfeb6e6f8e4a2feee7cd5b8dbed47ed', class: "digi-progress-circle__icon--error" }), h("span", { key: 'b3df2d98a5719f1a1181582d63c931e7e4888819' }, this.afValidationLabel)))));
+            } }, `${this.afStepNextText} ${this.afStepNextLabel}`)))), this.afValidationLabel && this.afWarningStep > 0 && (h("p", { key: 'a9a1b1abdc516a0e42685c2b35c5d0f051f93f02', class: "digi-progress-circle__validation-label digi-progress-circle__validation-label--warning" }, h("digi-icon-validation-warning", { key: 'afbe0722e7efda065e9d581bcf6df81f2e83d693', class: "digi-progress-circle__icon--warning" }), h("span", { key: 'd8048bded3902c79a884894f33e620979ca48fd8' }, this.afValidationLabel))), this.afValidationLabel && this.afErrorStep > 0 && (h("p", { key: '141d8d6b766ef7212f4d881f641d8c357ae5693e', class: "digi-progress-circle__validation-label digi-progress-circle__validation-label--error" }, h("digi-icon-validation-error", { key: 'f5d86cadc17fb079e36fb8047d3ffd8004a46c39', class: "digi-progress-circle__icon--error" }), h("span", { key: '396d7ce06f27c74c700ac7d132c0018461ff2976' }, this.afValidationLabel)))));
     }
     static get is() { return "digi-progress-circle"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_progress/progress-indicator/progress-indicator.js

@@ -72,6 +72,10 @@ export class ProgressIndicator {
             });
         }
     }
+    /**
+     * Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva rubrik-elementet.
+     * @en Listens for when focus is set on the custom element and propagates it down to the actual heading element.
+     */
     focusOnHeading() {
         this.headingElement.focus();
     }
@@ -90,9 +94,9 @@ export class ProgressIndicator {
         return;
     }
     render() {
-        return (h("div", { key: '287cbf18a16c942fac231faf112bd6f566223415', class: this.cssModifiers, role: this.afRole === ProgressIndicatorRole.STATUS
+        return (h("div", { key: 'a8526805e4f6517a93cc3af35584440b8310a767', class: this.cssModifiers, role: this.afRole === ProgressIndicatorRole.STATUS
                 ? ProgressIndicatorRole.STATUS
-                : null }, h("div", { key: '4aeadba98f01be82e5f710f5c3cf4d14941ef4d5' }, this.afStepNextLabel !== undefined ? (h("div", { class: "digi-progress-indicator__content" }, this.renderHeading(), this.afCompletedSteps != this.afTotalSteps && (h("p", { class: "digi-progress-indicator__next", style: {
+                : null }, h("div", { key: '1e26da010d00f9290380c66c3f317d5fe26c9283' }, this.afStepNextLabel !== undefined ? (h("div", { class: "digi-progress-indicator__content" }, this.renderHeading(), this.afCompletedSteps != this.afTotalSteps && (h("p", { class: "digi-progress-indicator__next", style: {
                 visibility: this.afStepNextLabel !== null &&
                     this.afStepNextLabel !== undefined
                     ? 'visible'
@@ -118,7 +122,7 @@ export class ProgressIndicator {
                 ProgressIndicatorVariation.SECONDARY &&
                 item.checked &&
                 this.afCompletedSteps !== index + 1 && (h("digi-icon-check", { class: "digi-progress-indicator__icon" })), h("span", { class: "digi-progress-indicator__step-number" }, index + 1))));
-        }))), this.afStepNextLabel !== undefined && (h("p", { key: 'b0b3f8b2c66c4162a14c0d006c66b8c3223bf89f', class: "digi-progress-indicator__label" }, h("span", { key: 'ddbe99366fd65c649a0a8776c30e0d524b3675e5' }, `${this.afStepText}`, " "), h("span", { key: '8e07174a7de9d049e284b0b54131615f1213af2c', class: "digi-progress-indicator__label--steps" }, `${this.afCompletedSteps} ${this.afStepsSeparator} ${this.afTotalSteps}`)))), this.afValidationLabel && this.afWarningStep > 0 && (h("p", { key: 'e5dff1e3a81d6ba1f0da9257d6c78aff4c5c6e07', class: "digi-progress-indicator__validation-label digi-progress-indicator__validation-label--warning" }, h("digi-icon-validation-warning", { key: '0d42e557e15b1e6ba23082f0168aefb7380ea58d', class: "digi-progress-indicator__icon--warning" }), h("span", { key: '3471990a83522db0e24e9b08c8feef405a00b75e' }, this.afValidationLabel))), this.afValidationLabel && this.afErrorStep > 0 && (h("p", { key: 'c49a7ec3a760589080cbcf8bc1161b01be939aec', class: "digi-progress-indicator__validation-label digi-progress-indicator__validation-label--error" }, h("digi-icon-validation-error", { key: '5e03f34f8721a6e51ae801cab17f8fd2cb561746', class: "digi-progress-indicator__icon--error" }), h("span", { key: 'ab44ebbace52a015f1c59cfe2c33f1650a78ab4a' }, this.afValidationLabel))), h("div", { key: '5eee0a90be57aa07e883146da14b4abbfc5617f7', hidden: true, class: "digi-progress-indicator__slot" }, h("digi-util-mutation-observer", { key: 'f41e38917edf5f706890c2592feff4f11344d8ea', ref: (el) => (this._observer = el), onAfOnChange: () => this.getItems() }, h("slot", { key: '3a46d6cc6a7b03fcf8449e2e8d147545e0ffbc84' })))));
+        }))), this.afStepNextLabel !== undefined && (h("p", { key: 'de8a84871ac8cdbefab3b7801f9c3f5c795399cc', class: "digi-progress-indicator__label" }, h("span", { key: '7c8f034fe155dde4bf718f2583ae55a700a51e9f' }, `${this.afStepText}`, " "), h("span", { key: 'f7d06637612336040965b39becf0e94a176e6b06', class: "digi-progress-indicator__label--steps" }, `${this.afCompletedSteps} ${this.afStepsSeparator} ${this.afTotalSteps}`)))), this.afValidationLabel && this.afWarningStep > 0 && (h("p", { key: 'f49c03efec01348378d596858fd044900ee572ce', class: "digi-progress-indicator__validation-label digi-progress-indicator__validation-label--warning" }, h("digi-icon-validation-warning", { key: '3e0a9a459c934491caa6d061bd080b95058b16ca', class: "digi-progress-indicator__icon--warning" }), h("span", { key: '5cb27f90cf4f0e4f56c74010f7e67105866bb0b6' }, this.afValidationLabel))), this.afValidationLabel && this.afErrorStep > 0 && (h("p", { key: 'a2e8a24a82c5e7785864070bb0abb1fabfce2728', class: "digi-progress-indicator__validation-label digi-progress-indicator__validation-label--error" }, h("digi-icon-validation-error", { key: 'd0afdc657576d2ffbd471b844830daf1e8117083', class: "digi-progress-indicator__icon--error" }), h("span", { key: '98cc008b6c791403e99a1f31ac48f33e14a9f7d7' }, this.afValidationLabel))), h("div", { key: '150b5559c6c21bd0fac13b089ed14ff2d931faac', hidden: true, class: "digi-progress-indicator__slot" }, h("digi-util-mutation-observer", { key: '91c480a4de5e9dcbcbb3ae64707e8cb322edd033', ref: (el) => (this._observer = el), onAfOnChange: () => this.getItems() }, h("slot", { key: '43cc701796f46f9835a7f120449dd4971543c945' })))));
     }
     static get is() { return "digi-progress-indicator"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_tag/tag/tag.css

@@ -9,4 +9,14 @@
 :host .digi-tag {
   display: var(--digi--tag--display);
   margin-bottom: var(--digi--tag--margin-bottom);
+}
+:host .digi-tag__text {
+  display: inline-block;
+  max-width: 100%;
+  white-space: normal;
+}
+:host .digi-tag__text--break {
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  hyphens: auto;
 }

package/dist/collection/components/_tag/tag/tag.js

@@ -10,6 +10,7 @@ export class Tag {
         this.afNoIcon = false;
         this.afAriaLabel = undefined;
         this.afSize = TagSize.SMALL;
+        this.afBreakWords = false;
     }
     clickHandler(e) {
         this.afOnClick.emit(e);
@@ -25,7 +26,7 @@ export class Tag {
         return this.afText;
     }
     render() {
-        return (h("digi-button", { key: 'cd3122d6a6e72ecc037cf22b1d7df6f41aa29a78', onAfOnClick: (e) => this.clickHandler(e), "af-variation": "secondary", "af-size": this.afSize, class: "digi-tag", "af-aria-label": this.ariaLabel }, this.afText, !this.afNoIcon && h("digi-icon-x", { key: '4c6c28a3b449109f65b82238e1d5215630fd63e5', slot: "icon-secondary" })));
+        return (h("digi-button", { key: '6acab75a368cc887ae878b28e544bad8d4df7416', onAfOnClick: (e) => this.clickHandler(e), "af-variation": "secondary", "af-size": this.afSize, class: "digi-tag", "af-aria-label": this.ariaLabel }, this.afText, !this.afNoIcon && h("digi-icon-x", { key: '7fa654eef20bbc37cf17de94d85984aa4ce3e96e', slot: "icon-secondary" })));
     }
     static get is() { return "digi-tag"; }
     static get encapsulation() { return "scoped"; }
@@ -136,6 +137,29 @@ export class Tag {
                 "attribute": "af-size",
                 "reflect": false,
                 "defaultValue": "TagSize.SMALL"
+            },
+            "afBreakWords": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "en",
+                            "text": "Allow breaking long words on overflow."
+                        }],
+                    "text": "Bryt l\u00E5nga ord vid overflow."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "af-break-words",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/_tools/tools-feedback-rating/tools-feedback-rating.js

@@ -167,10 +167,10 @@ export class ToolsFeedbackRating {
     get content() {
         return (h("digi-typography", null, this.validContent && (h("div", { dir: this.afDir, lang: this.afLang, class: `digi-tools-feedback-rating__wrapper ${this.currentStep === 2 ? 'step2' : ''}` }, this.currentStep === 1 && (h("div", { class: "digi-tools-feedback-rating__star-rating" }, h(this.afHeadingLevel, { id: `${this.afId}-rating-question`, class: `digi-tools-feedback-rating__heading ${this.afType === FeedbackRatingType.MINIMAL ? 'hidden' : ''}` }, this.afQuestion), h("div", { class: "digi-tools-feedback-rating__step1-wrapper" }, this.afRatings && (h("span", { class: "digi-tools-feedback-rating__step1-description" }, "V\u00E4lj fr\u00E5n", ' ', `${(this.ratingsData().find((item) => item.value === 1) ||
             {}).text.toLowerCase() || null} till ${(this.ratingsData().find((item) => item.value === 5) ||
-            {}).text.toLowerCase() || null}`)), h("div", { "aria-labelledby": `${this.afId}-rating-question`, class: "digi-tools-feedback-rating__star-rating-stars", role: "group" }, this.ratingsData().map(({ text, value }) => (h("div", { class: "digi-tools-feedback-rating__star-rating-star" }, h("button", { class: "digi-tools-feedback-rating__star-rating-star-button", onClick: () => this.handleRatingChange(value), "aria-label": `${value} ${value === 1 ? 'stjärna' : 'stjärnor'}${text !== '' ? ', ' + text : ''}`, onMouseEnter: () => this.handleHover(value), onMouseLeave: () => this.handleHover(0), onFocus: () => this.handleHover(value), onFocusout: () => this.handleHover(0) }, h("svg", { "aria-hidden": "true", width: "29px", height: "29px", viewBox: "0 0 32 32", version: "1.1", xmlns: "http://www.w3.org/2000/svg", class: `digi-tools-feedback-rating-star-icon ${this.hoveredRating >= value ? 'filled' : ''}` }, h("g", { stroke: "none", "stroke-width": "1", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("g", { transform: "translate(-1852, -2564)", "stroke-width": "2", class: "digi-tools-feedback-rating-star-icon-border" }, h("g", { transform: "translate(1663, 2565)" }, h("g", { transform: "translate(190, 0)" }, h("path", { d: "M13.0369701,1.00988613 L9.47212213,8.51643297 L1.4958694,9.72422429 C0.0655277509,9.93973122 -0.507709524,11.7709448 0.529620648,12.8199039 L6.30005635,18.6595463 L4.93529305,26.9090563 C4.6897182,28.3999832 6.20191813,29.5170473 7.46854321,28.8195669 L14.6037422,24.9244875 L21.7391705,28.8195669 C23.0057956,29.5113322 24.5179955,28.3999832 24.2721914,26.9090563 L22.9074281,18.6595463 L28.6780931,12.8199039 C29.715194,11.7709448 29.1419567,9.93973122 27.711615,9.72422429 L19.7355916,8.51643297 L16.1707436,1.00988613 C15.531928,-0.328161856 13.6810595,-0.345069029 13.0369701,1.00988613 L13.0369701,1.00988613 Z", id: "Stroke-3" })))))))))))))), this.currentStep === 2 && (h("div", { class: "digi-tools-feedback-rating__thankyou" }, h("div", { class: "digi-tools-feedback-rating__thankyou-text" }, h("svg", { width: "32", height: "26", xmlns: "http://www.w3.org/2000/svg", class: "digi-tools-feedback-rating__thankyou-check-icon" }, h("g", { fill: "none", "fill-rule": "evenodd" }, h("path", { d: "M12.431 25.438C5.577 25.438 0 19.848 0 12.978 0 6.107 5.577.518 12.43.518c2.874 0 5.677 1.006 7.893 2.833l-1.441 1.755a10.163 10.163 0 0 0-6.452-2.315c-5.604 0-10.163 4.57-10.163 10.187 0 5.616 4.56 10.186 10.163 10.186 4.346 0 8.21-2.766 9.617-6.883l2.146.737a12.435 12.435 0 0 1-11.763 8.42", fill: "#333" }), h("path", { d: "M13.073 20.935a.725.725 0 0 1-1.022 0l-8.042-8.013a.72.72 0 0 1 0-1.019l1.704-1.699a.725.725 0 0 1 1.023 0l5.826 5.805L28.417.211a.724.724 0 0 1 1.023 0l1.704 1.699a.72.72 0 0 1 0 1.02l-18.07 18.005Z", fill: "#95C13E" }))), h("h2", { class: "digi-tools-feedback-rating__thankyou-text", tabindex: "-1", ref: (el) => (this._thankYouHeading = el) }, this.afThankYouHeading)), this.afRatings && (h("p", { class: "digi-tools-feedback-rating__thankyou-text-with-rating" }, "Du har gett betyget \"", this.selectedText.toLowerCase(), "\" med", ' ', this.selectedRating, `${this.selectedRating === 1 ? ' stjärna' : ' stjärnor'}`, ".")))), this.currentStep === 2 && this.afLinkText && (h("div", { class: "digi-tools-feedback-rating__link" }, h("digi-link-external", { afHref: this.renderLink(), "af-target": "_blank", onAfOnClick: () => this.submitFeedbackLink(), "af-variation": "small" }, this.afLinkText)))))));
+            {}).text.toLowerCase() || null}`)), h("div", { "aria-labelledby": `${this.afId}-rating-question`, class: "digi-tools-feedback-rating__star-rating-stars", role: "group" }, this.ratingsData().map(({ text, value }) => (h("div", { class: "digi-tools-feedback-rating__star-rating-star" }, h("button", { class: "digi-tools-feedback-rating__star-rating-star-button", onClick: () => this.handleRatingChange(value), "aria-label": `${value} ${value === 1 ? 'stjärna' : 'stjärnor'}${text !== '' ? ', ' + text : ''}`, onMouseEnter: () => this.handleHover(value), onMouseLeave: () => this.handleHover(0), onFocus: () => this.handleHover(value), onFocusout: () => this.handleHover(0) }, h("svg", { "aria-hidden": "true", width: "29px", height: "29px", viewBox: "0 0 32 32", version: "1.1", xmlns: "http://www.w3.org/2000/svg", class: `digi-tools-feedback-rating-star-icon ${this.hoveredRating >= value ? 'filled' : ''}` }, h("g", { stroke: "none", "stroke-width": "1", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("g", { transform: "translate(-1852, -2564)", "stroke-width": "2", class: "digi-tools-feedback-rating-star-icon-border" }, h("g", { transform: "translate(1663, 2565)" }, h("g", { transform: "translate(190, 0)" }, h("path", { d: "M13.0369701,1.00988613 L9.47212213,8.51643297 L1.4958694,9.72422429 C0.0655277509,9.93973122 -0.507709524,11.7709448 0.529620648,12.8199039 L6.30005635,18.6595463 L4.93529305,26.9090563 C4.6897182,28.3999832 6.20191813,29.5170473 7.46854321,28.8195669 L14.6037422,24.9244875 L21.7391705,28.8195669 C23.0057956,29.5113322 24.5179955,28.3999832 24.2721914,26.9090563 L22.9074281,18.6595463 L28.6780931,12.8199039 C29.715194,11.7709448 29.1419567,9.93973122 27.711615,9.72422429 L19.7355916,8.51643297 L16.1707436,1.00988613 C15.531928,-0.328161856 13.6810595,-0.345069029 13.0369701,1.00988613 L13.0369701,1.00988613 Z" })))))))))))))), this.currentStep === 2 && (h("div", { class: "digi-tools-feedback-rating__thankyou" }, h("div", { class: "digi-tools-feedback-rating__thankyou-text" }, h("svg", { width: "32", height: "26", xmlns: "http://www.w3.org/2000/svg", class: "digi-tools-feedback-rating__thankyou-check-icon" }, h("g", { fill: "none", "fill-rule": "evenodd" }, h("path", { d: "M12.431 25.438C5.577 25.438 0 19.848 0 12.978 0 6.107 5.577.518 12.43.518c2.874 0 5.677 1.006 7.893 2.833l-1.441 1.755a10.163 10.163 0 0 0-6.452-2.315c-5.604 0-10.163 4.57-10.163 10.187 0 5.616 4.56 10.186 10.163 10.186 4.346 0 8.21-2.766 9.617-6.883l2.146.737a12.435 12.435 0 0 1-11.763 8.42", fill: "#333" }), h("path", { d: "M13.073 20.935a.725.725 0 0 1-1.022 0l-8.042-8.013a.72.72 0 0 1 0-1.019l1.704-1.699a.725.725 0 0 1 1.023 0l5.826 5.805L28.417.211a.724.724 0 0 1 1.023 0l1.704 1.699a.72.72 0 0 1 0 1.02l-18.07 18.005Z", fill: "#95C13E" }))), h("h2", { class: "digi-tools-feedback-rating__thankyou-text", tabindex: "-1", ref: (el) => (this._thankYouHeading = el) }, this.afThankYouHeading)), this.afRatings && (h("p", { class: "digi-tools-feedback-rating__thankyou-text-with-rating" }, "Du har gett betyget \"", this.selectedText.toLowerCase(), "\" med", ' ', this.selectedRating, `${this.selectedRating === 1 ? ' stjärna' : ' stjärnor'}`, ".")))), this.currentStep === 2 && this.afLinkText && (h("div", { class: "digi-tools-feedback-rating__link" }, h("digi-link-external", { afHref: this.renderLink(), "af-target": "_blank", onAfOnClick: () => this.submitFeedbackLink(), "af-variation": "small" }, this.afLinkText)))))));
     }
     render() {
-        return (h("div", { key: '0a851042501b8d4be3c30fcb8a59ca8920f6274a', class: Object.assign({ 'digi-tools-feedback-rating': true }, this.cssModifiers) }, h("digi-layout-block", { key: '06d9e3de4b0c967ff8f6105cbd2182c229cf382f', afVariation: this.layoutBlockVariation, afMarginTop: true, "af-container": "none" }, this.content)));
+        return (h("div", { key: '278240381a11afea9dd59c68fba847343976998f', class: Object.assign({ 'digi-tools-feedback-rating': true }, this.cssModifiers) }, h("digi-layout-block", { key: 'fe64918e034cca8a6fc9371c83115c55556ec4b8', afVariation: this.layoutBlockVariation, afMarginTop: true, "af-container": "none" }, this.content)));
     }
     static get is() { return "digi-tools-feedback-rating"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_typography/typography-heading-jumbo/typography-heading-jumbo.js

@@ -13,17 +13,21 @@ export class TypographyHeadingJumbo {
         this.afLevel = TypographyHeadingJumboLevel.H1;
         this.afLang = 'sv';
     }
+    /**
+     * Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva rubrik-elementet.
+     * @en Listens for when focus is set on the custom element and propagates it down to the actual heading element.
+     */
     focusOnHeading() {
         this.headingElement.focus();
     }
     get cssModifiers() {
         return {
             'digi-typography-heading-jumbo--primary': this.afVariation === TypographyHeadingJumboVariation.PRIMARY,
-            'digi-typography-heading-jumbo--secondary': this.afVariation === TypographyHeadingJumboVariation.SECONDARY,
+            'digi-typography-heading-jumbo--secondary': this.afVariation === TypographyHeadingJumboVariation.SECONDARY
         };
     }
     render() {
-        return (h(this.afLevel, { key: '33bf2fc6ca5a18c5440ba7ca9ccc2409c853f45a', ref: (el) => (this.headingElement = el), class: Object.assign({ 'digi-typography-heading-jumbo': true }, this.cssModifiers), lang: this.afLang, tabindex: -1 }, this.afText));
+        return (h(this.afLevel, { key: 'bd7809f4395d53100ad65ad8f7f3b066f7c1c471', ref: (el) => (this.headingElement = el), class: Object.assign({ 'digi-typography-heading-jumbo': true }, this.cssModifiers), lang: this.afLang, tabindex: -1 }, this.afText));
     }
     static get is() { return "digi-typography-heading-jumbo"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/design-tokens/components/_navigation-context-menu.variables.scss

@@ -109,12 +109,4 @@
 * @prop --digi--navigation-context-menu--item--border-top: var(--digi--border-width--primary) solid var(--digi--color--border--neutral-4);
 * @prop --digi--navigation-context-menu--items--margin: 0;
 * @prop --digi--navigation-context-menu--items--padding: var(--digi--gutter--large) 0;
-*/ont-size--desktop: var(--digi--typography--body--font-size--desktop-large);
-* @prop --digi--navigation-context-menu--item--background-color--active: var(--digi--color--background--neutral-6);
-* @prop --digi--navigation-context-menu--item--display: flex;
-* @prop --digi--navigation-context-menu--item--font-family: var(--digi--global--typography--font-family--default);
-* @prop --digi--navigation-context-menu--item--font-wight--selected: 600;
-* @prop --digi--navigation-context-menu--item--border-top: var(--digi--border-width--primary) solid var(--digi--color--border--neutral-4);
-* @prop --digi--navigation-context-menu--items--margin: 0;
-* @prop --digi--navigation-context-menu--items--padding: var(--digi--gutter--large) 0;
 */

package/dist/digi-arbetsformedlingen/design-tokens/components/_navigation-context-menu.variables.scss

@@ -109,12 +109,4 @@
 * @prop --digi--navigation-context-menu--item--border-top: var(--digi--border-width--primary) solid var(--digi--color--border--neutral-4);
 * @prop --digi--navigation-context-menu--items--margin: 0;
 * @prop --digi--navigation-context-menu--items--padding: var(--digi--gutter--large) 0;
-*/ont-size--desktop: var(--digi--typography--body--font-size--desktop-large);
-* @prop --digi--navigation-context-menu--item--background-color--active: var(--digi--color--background--neutral-6);
-* @prop --digi--navigation-context-menu--item--display: flex;
-* @prop --digi--navigation-context-menu--item--font-family: var(--digi--global--typography--font-family--default);
-* @prop --digi--navigation-context-menu--item--font-wight--selected: 600;
-* @prop --digi--navigation-context-menu--item--border-top: var(--digi--border-width--primary) solid var(--digi--color--border--neutral-4);
-* @prop --digi--navigation-context-menu--items--margin: 0;
-* @prop --digi--navigation-context-menu--items--padding: var(--digi--gutter--large) 0;
 */