@designsystem-se/af 34.1.0 → 34.2.1-beta.0

package/dist/collection/components/_calendar/week-view/calendar-week-view.js

@@ -110,7 +110,7 @@ export class CalendarWeekView {
                 format(new Date(lastDate), 'MMMM yyyy', { locale: svlocale });
     }
     render() {
-        return (h("div", { key: '11a5de578c2e1c023d36ec415903b0ef571b19f9', class: "digi-calendar-week-view" }, h("nav", { key: '7c46fb4d0da7662fbcdbfa99e20ef1ed1a8b550d', class: "digi-calendar-week-view__timepicker" }, h("div", { key: 'a9b2da0b8fba1e777bf21297d9513114a90c6f21', class: "digi-calendar-week-view__dates" }, h("div", { key: '2ec15c6ff7aead2bb916259f5206cbf92ef5ed46', class: "digi-calendar-week-view__flex" }, h("digi-typography", { key: 'b669579b1076c2574a1fe3eee28ea5b5d8b55e64' }, h(this.afHeadingLevel, { key: '8f7b78c5fde2ba093fc3de98b1cab9d9acd93fa2', role: "status", class: "digi-calendar-week-view__heading" }, h("span", { key: 'f915e9f139a38bf541f5e8bf5081cae8799aed1b', class: "digi-calendar-week-view__month" }, this.currentMonth), h("span", { key: '0f68b768c7ffb9f2eaa9e99313bcc64c87b1c1a3', class: "digi-calendar-week-view__week" }, ' ', "v.", this.currentWeek))), h("ul", { key: '979c3538992f9d852ad70b570963fecc6cd0319f', class: "digi-calendar-week-view__date-list" }, this.weekDays.map((dateItem) => {
+        return (h("div", { key: '967ccb9710018973a960ae36d52157ba85dacfed', class: "digi-calendar-week-view" }, h("nav", { key: '6a9137d8f8a8e652d26d099ae652cb76e5665b51', class: "digi-calendar-week-view__timepicker" }, h("div", { key: 'a2b8aaeaa93e391e65847b2ea8f9b455e86474f1', class: "digi-calendar-week-view__dates" }, h("div", { key: '0cc675c0cd67d042e5e27a38a6665ab30e516cea', class: "digi-calendar-week-view__flex" }, h("digi-typography", { key: 'd47f59955354cb435dc80895059c6e4fd6eefa8a' }, h(this.afHeadingLevel, { key: 'f01725e82afff23b8ae357b30af909b325d85279', role: "status", class: "digi-calendar-week-view__heading" }, h("span", { key: 'bbfab19eec8776e640ed235654c0fd960faf5722', class: "digi-calendar-week-view__month" }, this.currentMonth), h("span", { key: 'a3a52801083cd83351056d474e01df926d8b0117', class: "digi-calendar-week-view__week" }, ' ', "v.", this.currentWeek))), h("ul", { key: 'a3f3703318fa5400cd32ee5d3af896900a032acd', class: "digi-calendar-week-view__date-list" }, this.weekDays.map((dateItem) => {
             const date = format(new Date(dateItem), 'd', {
                 locale: svlocale
             });
@@ -130,15 +130,15 @@ export class CalendarWeekView {
                 } }, day), h("span", { class: "digi-calendar-week-view__date-button-date" }, date), h("span", { "aria-hidden": "true", class: {
                     'digi-calendar-week-view__date-button-circle': dateItem === this.todaysDate
                 } })))));
-        })))), h("digi-button", { key: '49b59c02b9eeaa1a1ff66970ce4fdd120014a1af', onClick: () => this.prevWeek(), class: {
+        })))), h("digi-button", { key: '2edb685459c4cbf8a0120ab340672b17d0ea3f9f', onClick: () => this.prevWeek(), class: {
                 'digi-calendar-week-view__week-button digi-calendar-week-view__week-button--previous': true,
                 'digi-calendar-week-view__week-button--keep-left': this.currentWeek == getISOWeek(this.maxDate),
                 'digi-calendar-week-view__week-button--hidden': !(this.currentWeek > getISOWeek(this.minDate))
-            }, "af-variation": "secondary" }, h("digi-icon-chevron-left", { key: '8190530f8db9593040e854833e771593fbfddc6c', slot: "icon" }), this.prevWeekText), h("digi-button", { key: '755242f062c097aab1666ad90751dddbac1c02d7', onClick: () => this.nextWeek(), class: {
+            }, "af-variation": "secondary" }, h("digi-icon-chevron-left", { key: '8948b12a1654f9ef46728ea8de3b1df5f40addcd', slot: "icon" }), this.prevWeekText), h("digi-button", { key: '729ed8eebce68168b66c5365588a52b1279eec3f', onClick: () => this.nextWeek(), class: {
                 'digi-calendar-week-view__week-button digi-calendar-week-view__week-button--next': true,
                 'digi-calendar-week-view__week-button--keep-right': this.currentWeek == getISOWeek(this.minDate),
                 'digi-calendar-week-view__week-button--hidden': !(this.currentWeek < getISOWeek(this.maxDate))
-            }, "af-variation": "secondary" }, h("digi-icon-chevron-right", { key: '9a4a59e7984faf4e7811697431111f6562e970f4', slot: "icon-secondary" }), this.nextWeekText)), h("div", { key: '32c838082370a55de6542fd08f51f0b83bb85ba1', role: "status", "aria-live": "assertive", class: "digi-calendar-week-view__result", id: `${this.afId}-result` }, h("digi-typography", { key: '014be3d1bf8872265167fbb9be34d377af8686dc' }, h("slot", { key: '3229e62f9d1b67cd0f1aa1cfe59dce65ccc707c6' })))));
+            }, "af-variation": "secondary" }, h("digi-icon-chevron-right", { key: '75bf1669a5d9dd3f618661c79202dc8e69f6c8ea', slot: "icon-secondary" }), this.nextWeekText)), h("div", { key: 'c7379a321936f28783d2f7a4e1e94d0b119de471', role: "status", "aria-live": "assertive", class: "digi-calendar-week-view__result", id: `${this.afId}-result` }, h("digi-typography", { key: 'f7e55435a94c5bff18a3b4b7bfa5d397291f7e8c' }, h("slot", { key: '7c59e144a47c721f5f4a454b9776c708f6d2f15c' })))));
     }
     static get is() { return "digi-calendar-week-view"; }
     static get encapsulation() { return "scoped"; }

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

@@ -7,7 +7,7 @@ import { BarChartVariation } from "./bar-chart-variation.enum";
 /**
  *
  * @enums Orientation - BarChartVariation.enum.ts
- *
+ * @noTokens - Komponentens färger sätts direkt som i graferna. Behöver skrivas om för att kunna hantera olika brands och teman.
  * @swedishName Stapeldiagram
  */
 export class barChart {
@@ -521,7 +521,9 @@ export class barChart {
                             adjustment = Math.ceil((newSize - mSize) / (size / d.length));
                         }
                         // Slicing the text up, saving atleast 3 characters
-                        return (d.slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length) - adjustment, 3)).trim() + '...');
+                        return (d
+                            .slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length) - adjustment, 3))
+                            .trim() + '...');
                     }));
                 }
                 else {
@@ -542,13 +544,17 @@ export class barChart {
                         const mSize = this._margin.left;
                         if (size < mSize)
                             return d;
-                        const newSize = this.getTextSize(d.slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length), 3)).trim() + '...');
+                        const newSize = this.getTextSize(d
+                            .slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length), 3))
+                            .trim() + '...');
                         let adjustment = 0;
                         if (newSize > mSize) {
                             adjustment = Math.ceil((newSize - mSize) / (size / d.length));
                         }
                         // Slicing the text up, saving atleast 3 characters
-                        return (d.slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length) - adjustment, 3)).trim() + '...');
+                        return (d
+                            .slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length) - adjustment, 3))
+                            .trim() + '...');
                     }));
                 }
             }
@@ -1399,7 +1405,7 @@ export class barChart {
                 heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}><p>${this._chartData.subTitle}
 				<span style="display:block;margin-top:0.25rem;font-size:0.875rem;color:var(--digi--global--color--neutral--grayscale--darkest-3)">${this._chartData.infoText}</span></p>`;
         }
-        return (h(Host, { key: '1e65613b383c823e2612b4e3b66c2aab2b6a63ee', ref: (el) => (this._host = el) }, h("div", { key: '0722c740fe78699676bb98247d5aa9b8a2ac6ec4', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: '7e318220350058798accc80bcac29764e460c854', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '37799980afd2cf93d1c924220b34a018c03d943b', 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: '0018a24d271ff038b42623f01b42d781538eeca1', slot: "icon" }), "Visa tabell"), h("digi-button", { key: 'b52b57a35abd23e47f97ad8aadaf74847d77092c', 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: 'd644be20ea9cb15fbd8cf3308e452b9e993da833', slot: "icon" }), "Visa diagram"), h("div", { key: '8e396c518fdcf565d8295f67f9ee22b88c1aad94', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: '6b95d5b67649fe88aee0fccd276d726a63490c41', class: "chartTooltip", id: this.afId }, h("div", { key: 'c1ee45d3d3e2949da0edb7f5ae7f5d824fec7149', class: "tooltipBody" }), h("digi-icon-x", { key: '34cb0be40388ae734b974201975e7ca347c34866', class: "close" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", null)) : (h("digi-icon-caret-down", null))), h("div", { key: 'af236d72c75cf21e1549151c2ad8244d3ec64f8e', ref: (el) => (this._chartDiv = el) }, " "), h("div", { key: '09ffd8c2a0278de23ec262ca110c629b9e6e3d01', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: '510d6eb3e641d7ba0f763426a5d1bd055f1ae68f', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
+        return (h(Host, { key: '0d5eb5792e8d25a8fad9ebbda37ee8647cf9b84a', ref: (el) => (this._host = el) }, h("div", { key: '738ee52c5e65e6d59c43e026e107831e98dcb556', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: '271fdeb27b9a2fcb9c7b95efd99c9bd8d1f759d9', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '79757e4842d07012606260d5d8cb42fb167e12bc', 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: '6680d0631ad83420af0d83092c903ad80589c0f8', slot: "icon" }), "Visa tabell"), h("digi-button", { key: '235ce1a9720421389ec75badd84063160ea1287c', 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: 'a5cb22ffb739b5a8b6df149839093e50126d5695', slot: "icon" }), "Visa diagram"), h("div", { key: 'b99d25897ac6fbe3573dfd674ebe87300087afdc', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: '8cdfc4c6275a796c222724b6ada958caa7ee52a3', class: "chartTooltip", id: this.afId }, h("div", { key: '390c549f11664dad62033e9ff0d214597a7610ee', class: "tooltipBody" }), h("digi-icon-x", { key: 'd9ec5ef1cc984ed75660fa8b5d75b118c36b2246', class: "close" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", null)) : (h("digi-icon-caret-down", null))), h("div", { key: '60e68bb115ba913b4bf65209f09b38064e68b6a4', ref: (el) => (this._chartDiv = el) }, " "), h("div", { key: '4e1236c68e6fb74fbd7149b02db6435bcde25e31', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: '4597cab3173e312db11c062548adcf01e4f74c29', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
     }
     static get is() { return "digi-bar-chart"; }
     static get encapsulation() { return "scoped"; }

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

@@ -89,7 +89,7 @@
   padding-right: 5px;
   border-radius: 4px;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   align-items: flex-start;
   box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
   font-size: 14px;
@@ -134,10 +134,22 @@
   );
 }
 
+.tooltipHead {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  margin-bottom: 0.25rem;
+  flex-direction: row;
+}
+
 .tooltipBody {
   display: flex;
   flex-direction: column;
-  margin-right: 5px;
+  padding-right: 5px;
+  max-height: 100px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: rgb(245, 245, 245) transparent;
 }
 
 .topWrapper {

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

@@ -6,12 +6,15 @@ import { randomIdGenerator } from "../../../global/utils/randomIdGenerator";
 /**
  *
  * @enums myEnum - chart-line-myEnum.enum.ts
- *
+ * @noTokens - Komponentens färger sätts direkt som i graferna. Behöver skrivas om för att kunna hantera olika brands och teman.
  * @swedishName Linjediagram
  */
 export class ChartLine {
     constructor() {
-        this._lineTypes = [null, '1.0, 7.0', '9.0, 7.0'];
+        this._lineTypes = [null, '18, 7', '8,7', '2,6'];
+        this._strokeWidth = 2.75;
+        this._lineCap = 'round';
+        this._strokeGlyphs = [d3.symbolCircle, d3.symbolTriangle, d3.symbolSquare, d3.symbolWye, d3.symbolDiamond2];
         this._toggled = false;
         this._tickSize = 0;
         // Selection list from legend chips
@@ -30,8 +33,6 @@ export class ChartLine {
         this.xPadding = 5;
         this.yPadding = 8;
         this.xTickSize = 5;
-        // How many line types that exists currently
-        this.lineTypes = 3;
         // Formats
         this.formatStyle = ',d';
         this.axisNumberFormat = {
@@ -157,7 +158,9 @@ export class ChartLine {
             })
                 .on('click', this.togglePath)
                 .on('mouseover', this.highlightPath)
+                .on('focus', this.highlightPath)
                 .on('mouseleave', this.colorLines)
+                .on('blur', this.colorLines)
                 .datum((d) => d)
                 .insert('svg', 'span')
                 .attr('class', 'legendSvg')
@@ -166,23 +169,23 @@ export class ChartLine {
                 .attr('height', 28)
                 .append('line')
                 .attr('stroke', (d) => this.colorFunction(d))
-                .attr('stroke-linecap', 'round')
-                .attr('stroke-width', 6)
+                .attr('stroke-linecap', this._lineCap)
+                .attr('stroke-width', 4)
                 .attr('stroke-dasharray', (d, i) => this.dashFunction(d, i))
                 .attr('x1', 3)
                 .attr('x2', 29)
                 .attr('y1', '50%')
                 .attr('y2', '50%');
             // Only if data contains many lines
-            if (this._chartData.data.series.length <= this.lineTypes)
+            if (this._chartData.data.series.length <= this._lineTypes.length)
                 return;
             container
                 .selectAll('.legendSvg')
                 .filter((...[, i]) => {
-                return i > 2;
+                return i > (this._lineTypes.length - 1);
             })
                 .append('path')
-                .attr('d', (...[, i]) => this.symbolType(i, 110))
+                .attr('d', (...[, i]) => this.symbolType(i, 70))
                 .attr('fill', (d) => this.colorFunction(d))
                 .attr('transform', 'translate(16,14)');
         };
@@ -203,6 +206,12 @@ export class ChartLine {
                 }
                 else
                     return '#E3E3E3';
+            })
+                .attr('stroke-width', (d) => {
+                if (d.title === element.title)
+                    return this._strokeWidth * 1.25;
+                else
+                    return this._strokeWidth;
             });
             this._lineChartContainer
                 .selectAll('.symbolGroup')
@@ -276,7 +285,8 @@ export class ChartLine {
                 .selectAll('.linePath')
                 .transition('highlight')
                 .duration(150)
-                .attr('stroke', (d) => this.colorFunction(d));
+                .attr('stroke', (d) => this.colorFunction(d))
+                .attr('stroke-width', this._strokeWidth);
             this._lineChartContainer
                 .selectAll('.symbolGroup')
                 .selectAll('.symbol')
@@ -298,8 +308,8 @@ export class ChartLine {
                 .join('path')
                 .attr('class', 'linePath')
                 .attr('stroke', (d) => this.colorFunction(d))
-                .attr('stroke-linecap', 'round')
-                .attr('stroke-width', (d) => (d.length > 1 ? 4 : 6))
+                .attr('stroke-linecap', this._lineCap)
+                .attr('stroke-width', (d) => (d.length > 1 ? this._strokeWidth : 4))
                 .attr('stroke-dasharray', (d, i) => d.length > 1 ? this.dashFunction(d, i) : null)
                 .attr('fill', 'none')
                 .attr('d', (d) => this._LineFunc(d.line));
@@ -328,7 +338,9 @@ export class ChartLine {
             // Remove all old symbols
             this._lineChartContainer
                 .selectAll('.symbolGroup')
-                .data(this.reshapeData(this._chartData.data.series.filter((...[, index]) => index > 2)))
+                .data(this.reshapeData(this._chartData.data.series.filter(
+            // Symbols are only needed, when we are out of line types
+            (...[, index]) => index > (this._lineTypes.length - 1))))
                 .join((enter) => {
                 if (!transition) {
                     enter
@@ -390,6 +402,7 @@ export class ChartLine {
                         .selectAll('.symbol')
                         .data((d, i) => {
                         return d.line.map((num) => {
+                            console.log(d.title, i);
                             if (num[1] != null)
                                 return {
                                     val: num[1],
@@ -456,23 +469,12 @@ export class ChartLine {
                 }
             }, (exit) => exit.remove());
         };
-        // Returns a symbol type given a index, currently we have support for 10 lines
+        // Returns a symbol type given a index
         this.symbolType = (index, size) => {
-            if (index < this.lineTypes)
-                return d3
-                    .symbol()
-                    .type(d3.symbolCircle)
-                    .size(size ? size : 90)();
-            else if (index >= this.lineTypes && index < this.lineTypes * 2)
-                return d3
-                    .symbol()
-                    .type(d3.symbolDiamond)
-                    .size(size ? size : 90)();
-            else
-                return d3
-                    .symbol()
-                    .type(d3.symbolStar)
-                    .size(size ? size : 90)();
+            return d3
+                .symbol()
+                .type(this._strokeGlyphs[Math.trunc(index / this._lineTypes.length)])
+                .size(size ? size : 60)();
         };
         // Setting dimension variable
         this.setDims = (onlyHeight = false) => {
@@ -648,7 +650,8 @@ export class ChartLine {
             // Heading
             this._tooltip.style('display', 'flex');
             const tooltipBody = this._tooltip.select('.tooltipBody');
-            tooltipBody
+            const tooltipHead = this._tooltip.select('.tooltipHead');
+            tooltipHead
                 .select(this._tooltipHeading)
                 .style('margin', '0 0.75rem 0 0 ')
                 .html(() => {
@@ -761,7 +764,7 @@ export class ChartLine {
             this._xAxisHandle.select('.domain').attr('display', 'none');
             this._xAxisHandle
                 .selectAll('line')
-                .attr('stroke-linecap', 'round')
+                .attr('stroke-linecap', this._lineCap)
                 .attr('stroke', getComputedStyle(document.documentElement)
                 .getPropertyValue('--digi--global--color--neutral--grayscale--darkest-3')
                 .trim()
@@ -990,8 +993,8 @@ export class ChartLine {
             'h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1);
         // Add heading placeholder for heading
         this._tooltip
-            .selectAll('.tooltipBody')
-            .append(this._tooltipHeading) // increment heading level by one
+            .selectAll('.tooltipHead')
+            .insert(this._tooltipHeading, ':first-child') // increment heading level by one
             .style('margin', '0 0.75rem')
             .style('font-weight', '500');
         this._maxHeight = d3
@@ -1064,8 +1067,8 @@ export class ChartLine {
             'h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1);
         // Add heading placeholder for heading
         this._tooltip
-            .selectAll('.tooltipBody')
-            .append(this._tooltipHeading) // increment heading level by one
+            .selectAll('.tooltipHead')
+            .insert(this._tooltipHeading, ':first-child') // increment heading level by one
             .style('margin', '0 0.75rem')
             .style('font-weight', '500');
         this._maxHeight = d3
@@ -1149,8 +1152,8 @@ export class ChartLine {
                 .join('path')
                 .attr('class', 'linePath')
                 .attr('stroke', 'lightgray')
-                .attr('stroke-linecap', 'round')
-                .attr('stroke-width', 4)
+                .attr('stroke-linecap', this._lineCap)
+                .attr('stroke-width', this._strokeWidth)
                 .attr('fill', 'none')
                 .attr('d', (d) => LineFunc(d))
                 .transition()
@@ -1308,8 +1311,8 @@ export class ChartLine {
                     .join('path')
                     .attr('class', 'linePath')
                     .attr('stroke', (d) => this.colorFunction(d))
-                    .attr('stroke-linecap', 'round')
-                    .attr('stroke-width', 4)
+                    .attr('stroke-linecap', this._lineCap)
+                    .attr('stroke-width', this._strokeWidth)
                     .attr('fill', 'none')
                     .attr('stroke-dasharray', this.dashFunction)
                     .attr('stroke-dashoffset', null)
@@ -1348,8 +1351,8 @@ export class ChartLine {
                 .ease(d3.easePolyInOut)
                 .attr('class', 'linePath')
                 .attr('stroke', (d) => this.colorFunction(d))
-                .attr('stroke-linecap', 'round')
-                .attr('stroke-width', (d) => (d.length > 1 ? 4 : 6))
+                .attr('stroke-linecap', this._lineCap)
+                .attr('stroke-width', (d) => (d.length > 1 ? this._strokeWidth : 4))
                 .attr('fill', 'none')
                 .attr('stroke-dasharray', (d, i) => d.length > 1 ? this.dashFunction(d, i) : null)
                 .attr('d', (d) => this._LineFunc(d.line));
@@ -1379,7 +1382,8 @@ export class ChartLine {
                 .attr('y1', this._yAxis(this._maxVal))
                 .attr('y2', this.dims.height - this.margin.bottom);
             const tooltipBody = this._tooltip.select('.tooltipBody');
-            tooltipBody
+            const tooltipHead = this._tooltip.select('.tooltipHead');
+            tooltipHead
                 .select(this._tooltipHeading)
                 .style('margin', '0 0.75rem')
                 .html(() => {
@@ -1480,7 +1484,7 @@ export class ChartLine {
             .attr('font-family', 'sans-serif')
             .text((d) => d)
             .each((...[, i, nodelist]) => {
-            const thisWidth = nodelist[i].getComputedTextLength() + 5; // A little extra padding, text sizes seems to be a little small compared to real life 
+            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();
         });
@@ -1618,7 +1622,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: '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) }, ' ')));
+        return (h("host", { key: '81c9a82b54de8ed3ffab5e91ce54f897bb93540d', ref: (el) => (this._host = el) }, h("div", { key: '9d9f04205ebc0c96e503640f66bb045ec54930e6', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: '832b4bad8e526443bae9b034087850f22e69948f', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: 'f6af1648ae04981e03b9e0adcebcdc2505e9d13d', 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: '3fbb40ee7e69bb2fa3ef6d0421359c9fc6052173', slot: "icon" }), "Visa tabell"), h("digi-button", { key: 'c1598d0a7fb415e73ff90fb27825b3eb45d8c5e2', 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: '5705100c1fb1781ab83f49e5d267d17fee72cc65', slot: "icon" }), "Visa diagram"), h("div", { key: '0faac4fd820e577dd80d0201c7f64ca58b999708', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: '763139851e7139dad00ac97eb0100cf97aa41812', class: "chartTooltip", id: this.afId }, h("div", { key: 'c6c1a49fd0761dfde4323ac82c2548ddc4ee1e4d', class: "tooltipHead" }, h("digi-icon-x", { key: 'd74a8c648eaacfe1a9be3fd9067599ed214784e4', class: "close" }), ' '), h("div", { key: '951072f7c6942b89e0df2c25b648e0b33b2a81ba', class: "tooltipBody" })), h("div", { key: 'c2342d0616ae3f24ae88e5072b41aa0cc98dedd2', class: "chart", ref: (el) => (this._chartDiv = el) }), h("div", { key: '10383520bbb1a9b25008664654710147236cf543', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: 'a97820b1c13b69f73cf3794136f107c3d2999962', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
     }
     static get is() { return "digi-chart-line"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,12 +1,9 @@
-/** Do not touch! Autogenerated 
-* @prop --digi--code--background: var(--digi--color--background--primary);
-*/
 digi-code {
   --digi--code--background: var(--digi--color--background--primary);
 }
 digi-code .digi-code {
   border-radius: 0.3em;
-  border: var(--digi--border-width--primary) solid var(--digi--color--border--neutral-2);
+  border: var(--digi--border-width--primary) solid var(--digi--color--divider--primary);
   padding: 0 0.5em;
   display: inline-block;
 }
@@ -140,8 +137,7 @@ digi-code .digi-code--dark {
   * Based on the okaidia theme: https://github.com/PrismJS/prism/blob/gh-pages/themes/prism-okaidia.css
   * @author ericwbailey
   */
-  --digi--color--background--inverted-3: #272727;
-  background: var(--digi--color--background--inverted-3);
+  background: #272727;
   /* Inline code */
 }
 digi-code .digi-code--dark code[class*=language-] {

package/dist/collection/components/_code/code/code.js

@@ -36,7 +36,7 @@ export class Code {
         };
     }
     render() {
-        return (h("span", { key: 'adc9ee7207dd03a4e7952c1f2b63261fae7f5ad3', class: Object.assign({ 'digi-code': true }, this.cssModifiers) }, h("code", { key: 'f65be5008fa9005ccf58779fce6786ecbb31b688', class: `digi-code__code language-${this.afLanguage}`, lang: this.afLang, innerHTML: this.highlightedCode })));
+        return (h("span", { key: '8b58df902f5d794e1874e6b0f6f7790b5a10985d', class: Object.assign({ 'digi-code': true }, this.cssModifiers) }, h("code", { key: '3e26521ae19d2c7e08ab30a24e1c328ee709fa94', class: `digi-code__code language-${this.afLanguage}`, lang: this.afLang, innerHTML: this.highlightedCode })));
     }
     static get is() { return "digi-code"; }
     static get originalStyleUrls() {

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

@@ -1,12 +1,7 @@
-/** Do not touch! Autogenerated 
-* @prop --digi--code-block--background: var(--digi--color--background--primary);
-* @prop --digi--code-block--border-radius: 0.3rem;
-* @prop --digi--code-block--border: 1px solid var(--digi--color--border--neutral-3);
-*/
 digi-code-block {
   --digi--code-block--background: var(--digi--color--background--primary);
   --digi--code-block--border-radius: 0.3rem;
-  --digi--code-block--border: 1px solid var(--digi--color--border--neutral-3);
+  --digi--code-block--border: 1px solid var(--digi--grayscale--900);
   display: block;
 }
 digi-code-block .digi-code-block {
@@ -164,24 +159,12 @@ digi-code-block .digi-code-block--dark {
   /* Inline code */
 }
 digi-code-block .digi-code-block--dark .digi-code-block__button {
-  --digi--button--color--text--function--default: var(
-    --digi--color--text--inverted
-  );
-  --digi--button--color--text--function--hover: var(
-    --digi--color--text--inverted
-  );
-  --digi--button--color--icon--function--default: var(
-    --digi--color--text--inverted
-  );
-  --digi--button--color--icon--function--hover: var(
-    --digi--color--text--inverted
-  );
-  --digi--button--color--text--function--focus: var(
-    --digi--color--text--inverted
-  );
-  --digi--button--color--icon--function--focus: var(
-    --digi--color--text--inverted
-  );
+  --digi--button--color--text--function--default: var(--digi--color--text--secondary);
+  --digi--button--color--text--function--hover: var(--digi--color--text--secondary);
+  --digi--button--color--icon--function--default: var(--digi--color--text--secondary);
+  --digi--button--color--icon--function--hover: var(--digi--color--text--secondary);
+  --digi--button--color--text--function--focus: var(--digi--color--text--secondary);
+  --digi--button--color--icon--function--focus: var(--digi--color--text--secondary);
 }
 digi-code-block .digi-code-block--dark code[class*=language-],
 digi-code-block .digi-code-block--dark pre[class*=language-] {
@@ -208,8 +191,7 @@ digi-code-block .digi-code-block--dark pre[class*=language-] {
 }
 digi-code-block .digi-code-block--dark :not(pre) > code[class*=language-],
 digi-code-block .digi-code-block--dark pre[class*=language-] {
-  --digi--color--background--inverted-3: #272727;
-  background: var(--digi--color--background--inverted-3);
+  background: #272727;
 }
 digi-code-block .digi-code-block--dark :not(pre) > code[class*=language-] {
   padding: 0.1em;

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

@@ -46,7 +46,7 @@ export class CodeBlock {
         };
     }
     render() {
-        return (h("div", { key: '385c9c75770f6b60ff9c5c27779ed9e11ad62d51', class: Object.assign({ 'digi-code-block': true }, this.cssModifiers) }, h("pre", { key: 'a8c0219048cc68bf85369c4c33b31dd335d1e8a4', class: `digi-code-block__pre language-${this.afLanguage}` }, h("code", { key: '18777a1701ee21ad028641bcf91e1109599eb584', class: "digi-code-block__code", lang: this.afLang, innerHTML: this.highlightedCode })), !this.afHideToolbar && (h("div", { key: 'dc7fa59933a94e8fb3b54d286a031fc493398450', class: "digi-code-block__toolbar" }, h("digi-button", { key: 'b2ea60085745ca58f249108ae12d7d4d80ba460c', class: "digi-code-block__button", onAfOnClick: () => this.copyButtonClickHandler(), afVariation: ButtonVariation.FUNCTION, afSize: ButtonSize.SMALL }, h("digi-icon-copy", { key: 'd38cd2ff9c688fe582d903c33f2bf9f183047658', class: "digi-code-block__icon", "aria-hidden": "true", slot: "icon" }), _t.code.copy)))));
+        return (h("div", { key: 'efc4eab4b814bc5ec01559f89d951d694ed695e1', class: Object.assign({ 'digi-code-block': true }, this.cssModifiers) }, h("pre", { key: '85b42423a9f62a227739e3107972251f9a825a97', class: `digi-code-block__pre language-${this.afLanguage}` }, h("code", { key: '266c28f90184f60eab0fc1febf743a53f46aab3b', class: "digi-code-block__code", lang: this.afLang, innerHTML: this.highlightedCode })), !this.afHideToolbar && (h("div", { key: '6230d33b96b03f7ea584d3b93efff81f636bad18', class: "digi-code-block__toolbar" }, h("digi-button", { key: 'b54ad1cc57faafeb0f82cc0de0865cf3e585fddf', class: "digi-code-block__button", onAfOnClick: () => this.copyButtonClickHandler(), afVariation: ButtonVariation.FUNCTION, afSize: ButtonSize.SMALL }, h("digi-icon-copy", { key: 'f223bd2e83be5d853c78c0322d69c7fe34cd257a', class: "digi-code-block__icon", "aria-hidden": "true", slot: "icon" }), _t.code.copy)))));
     }
     static get is() { return "digi-code-block"; }
     static get originalStyleUrls() {