@designsystem-se/af 34.0.4-beta.2 → 34.1.0

package/dist/cjs/{form-input-variation.enum-c750520c.js → typography-variation.enum-f1d49c3a.js}

@@ -1,5 +1,23 @@
 'use strict';
 
+exports.CodeLanguage = void 0;
+(function (CodeLanguage) {
+    CodeLanguage["JSON"] = "json";
+    CodeLanguage["CSS"] = "css";
+    CodeLanguage["SCSS"] = "scss";
+    CodeLanguage["TYPESCRIPT"] = "typescript";
+    CodeLanguage["JAVASCRIPT"] = "javascript";
+    CodeLanguage["BASH"] = "bash";
+    CodeLanguage["HTML"] = "html";
+    CodeLanguage["GIT"] = "git";
+})(exports.CodeLanguage || (exports.CodeLanguage = {}));
+
+exports.CodeVariation = void 0;
+(function (CodeVariation) {
+    CodeVariation["LIGHT"] = "light";
+    CodeVariation["DARK"] = "dark";
+})(exports.CodeVariation || (exports.CodeVariation = {}));
+
 exports.FormInputMode = void 0;
 (function (FormInputMode) {
     FormInputMode["DEFAULT"] = "";
@@ -27,3 +45,9 @@ exports.FormInputVariation = void 0;
     FormInputVariation["MEDIUM"] = "medium";
     FormInputVariation["LARGE"] = "large";
 })(exports.FormInputVariation || (exports.FormInputVariation = {}));
+
+exports.TypographyVariation = void 0;
+(function (TypographyVariation) {
+    TypographyVariation["SMALL"] = "small";
+    TypographyVariation["LARGE"] = "large";
+})(exports.TypographyVariation || (exports.TypographyVariation = {}));

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

@@ -89,7 +89,7 @@
   padding-right: 5px;
   border-radius: 4px;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   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,22 +134,10 @@
   );
 }
 
-.tooltipHead {
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  margin-bottom: 0.25rem;
-  flex-direction: row;
-}
-
 .tooltipBody {
   display: flex;
   flex-direction: column;
-  padding-right: 5px;
-  max-height: 100px;
-  overflow-y: auto;
-  scrollbar-width: thin;
-  scrollbar-color: rgb(245, 245, 245) transparent;
+  margin-right: 5px;
 }
 
 .topWrapper {

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

@@ -11,10 +11,7 @@ import { randomIdGenerator } from "../../../global/utils/randomIdGenerator";
  */
 export class ChartLine {
     constructor() {
-        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._lineTypes = [null, '1.0, 7.0', '9.0, 7.0'];
         this._toggled = false;
         this._tickSize = 0;
         // Selection list from legend chips
@@ -33,6 +30,8 @@ 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 = {
@@ -158,9 +157,7 @@ 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')
@@ -169,23 +166,23 @@ export class ChartLine {
                 .attr('height', 28)
                 .append('line')
                 .attr('stroke', (d) => this.colorFunction(d))
-                .attr('stroke-linecap', this._lineCap)
-                .attr('stroke-width', 4)
+                .attr('stroke-linecap', 'round')
+                .attr('stroke-width', 6)
                 .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.length)
+            if (this._chartData.data.series.length <= this.lineTypes)
                 return;
             container
                 .selectAll('.legendSvg')
                 .filter((...[, i]) => {
-                return i > (this._lineTypes.length - 1);
+                return i > 2;
             })
                 .append('path')
-                .attr('d', (...[, i]) => this.symbolType(i, 70))
+                .attr('d', (...[, i]) => this.symbolType(i, 110))
                 .attr('fill', (d) => this.colorFunction(d))
                 .attr('transform', 'translate(16,14)');
         };
@@ -206,12 +203,6 @@ 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')
@@ -285,8 +276,7 @@ export class ChartLine {
                 .selectAll('.linePath')
                 .transition('highlight')
                 .duration(150)
-                .attr('stroke', (d) => this.colorFunction(d))
-                .attr('stroke-width', this._strokeWidth);
+                .attr('stroke', (d) => this.colorFunction(d));
             this._lineChartContainer
                 .selectAll('.symbolGroup')
                 .selectAll('.symbol')
@@ -308,8 +298,8 @@ export class ChartLine {
                 .join('path')
                 .attr('class', 'linePath')
                 .attr('stroke', (d) => this.colorFunction(d))
-                .attr('stroke-linecap', this._lineCap)
-                .attr('stroke-width', (d) => (d.length > 1 ? this._strokeWidth : 4))
+                .attr('stroke-linecap', 'round')
+                .attr('stroke-width', (d) => (d.length > 1 ? 4 : 6))
                 .attr('stroke-dasharray', (d, i) => d.length > 1 ? this.dashFunction(d, i) : null)
                 .attr('fill', 'none')
                 .attr('d', (d) => this._LineFunc(d.line));
@@ -338,9 +328,7 @@ export class ChartLine {
             // Remove all old symbols
             this._lineChartContainer
                 .selectAll('.symbolGroup')
-                .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))))
+                .data(this.reshapeData(this._chartData.data.series.filter((...[, index]) => index > 2)))
                 .join((enter) => {
                 if (!transition) {
                     enter
@@ -402,7 +390,6 @@ 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],
@@ -469,12 +456,23 @@ export class ChartLine {
                 }
             }, (exit) => exit.remove());
         };
-        // Returns a symbol type given a index
+        // Returns a symbol type given a index, currently we have support for 10 lines
         this.symbolType = (index, size) => {
-            return d3
-                .symbol()
-                .type(this._strokeGlyphs[Math.trunc(index / this._lineTypes.length)])
-                .size(size ? size : 60)();
+            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)();
         };
         // Setting dimension variable
         this.setDims = (onlyHeight = false) => {
@@ -650,8 +648,7 @@ export class ChartLine {
             // Heading
             this._tooltip.style('display', 'flex');
             const tooltipBody = this._tooltip.select('.tooltipBody');
-            const tooltipHead = this._tooltip.select('.tooltipHead');
-            tooltipHead
+            tooltipBody
                 .select(this._tooltipHeading)
                 .style('margin', '0 0.75rem 0 0 ')
                 .html(() => {
@@ -764,7 +761,7 @@ export class ChartLine {
             this._xAxisHandle.select('.domain').attr('display', 'none');
             this._xAxisHandle
                 .selectAll('line')
-                .attr('stroke-linecap', this._lineCap)
+                .attr('stroke-linecap', 'round')
                 .attr('stroke', getComputedStyle(document.documentElement)
                 .getPropertyValue('--digi--global--color--neutral--grayscale--darkest-3')
                 .trim()
@@ -993,8 +990,8 @@ export class ChartLine {
             'h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1);
         // Add heading placeholder for heading
         this._tooltip
-            .selectAll('.tooltipHead')
-            .insert(this._tooltipHeading, ':first-child') // increment heading level by one
+            .selectAll('.tooltipBody')
+            .append(this._tooltipHeading) // increment heading level by one
             .style('margin', '0 0.75rem')
             .style('font-weight', '500');
         this._maxHeight = d3
@@ -1067,8 +1064,8 @@ export class ChartLine {
             'h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1);
         // Add heading placeholder for heading
         this._tooltip
-            .selectAll('.tooltipHead')
-            .insert(this._tooltipHeading, ':first-child') // increment heading level by one
+            .selectAll('.tooltipBody')
+            .append(this._tooltipHeading) // increment heading level by one
             .style('margin', '0 0.75rem')
             .style('font-weight', '500');
         this._maxHeight = d3
@@ -1152,8 +1149,8 @@ export class ChartLine {
                 .join('path')
                 .attr('class', 'linePath')
                 .attr('stroke', 'lightgray')
-                .attr('stroke-linecap', this._lineCap)
-                .attr('stroke-width', this._strokeWidth)
+                .attr('stroke-linecap', 'round')
+                .attr('stroke-width', 4)
                 .attr('fill', 'none')
                 .attr('d', (d) => LineFunc(d))
                 .transition()
@@ -1311,8 +1308,8 @@ export class ChartLine {
                     .join('path')
                     .attr('class', 'linePath')
                     .attr('stroke', (d) => this.colorFunction(d))
-                    .attr('stroke-linecap', this._lineCap)
-                    .attr('stroke-width', this._strokeWidth)
+                    .attr('stroke-linecap', 'round')
+                    .attr('stroke-width', 4)
                     .attr('fill', 'none')
                     .attr('stroke-dasharray', this.dashFunction)
                     .attr('stroke-dashoffset', null)
@@ -1351,8 +1348,8 @@ export class ChartLine {
                 .ease(d3.easePolyInOut)
                 .attr('class', 'linePath')
                 .attr('stroke', (d) => this.colorFunction(d))
-                .attr('stroke-linecap', this._lineCap)
-                .attr('stroke-width', (d) => (d.length > 1 ? this._strokeWidth : 4))
+                .attr('stroke-linecap', 'round')
+                .attr('stroke-width', (d) => (d.length > 1 ? 4 : 6))
                 .attr('fill', 'none')
                 .attr('stroke-dasharray', (d, i) => d.length > 1 ? this.dashFunction(d, i) : null)
                 .attr('d', (d) => this._LineFunc(d.line));
@@ -1382,8 +1379,7 @@ export class ChartLine {
                 .attr('y1', this._yAxis(this._maxVal))
                 .attr('y2', this.dims.height - this.margin.bottom);
             const tooltipBody = this._tooltip.select('.tooltipBody');
-            const tooltipHead = this._tooltip.select('.tooltipHead');
-            tooltipHead
+            tooltipBody
                 .select(this._tooltipHeading)
                 .style('margin', '0 0.75rem')
                 .html(() => {
@@ -1622,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: 'dde2a8a6656b495a214d73aa9b01a4a0c2528139', ref: (el) => (this._host = el) }, h("div", { key: '4e476379dab04918328e87d2a39d74fdf09ef99b', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: '3c0740888cb4e1050a3ee260d54e350cd7480ec8', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: 'bf7e20aceca6994d4765ed474c1078b2235d36fa', 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: 'afe9fb92ebedc987f22178954ace520d429b31eb', slot: "icon" }), "Visa tabell"), h("digi-button", { key: '206651e7cb2214765c0cc020b21db9a97f5d7105', 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: '524e209104e751a14fc033d4d5a62dafb80f82a7', slot: "icon" }), "Visa diagram"), h("div", { key: '7ef3b2c344ce1eb00a3a6980b33a59a9f154353b', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: '5cf28a143c4702872d7195e79917f42d35ff0fe1', class: "chartTooltip", id: this.afId }, h("div", { key: '4b2d910875117e2ee2680d7117a785efc43035f9', class: "tooltipHead" }, h("digi-icon-x", { key: '5b444b2c37f389b12b1ea5f606482623a7631f5f', class: "close" }), ' '), h("div", { key: 'a501394e125b4187d1727dbe7b1871081b534949', class: "tooltipBody" })), h("div", { key: '16209bc841bb18b57ed300e5378c214dab2ad47d', class: "chart", ref: (el) => (this._chartDiv = el) }), h("div", { key: '4a4e729d7efaeaf58cccd16557e1c3a364be5d77', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: 'ee822fc93847277af4b97277d105e5e7511f134e', 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/_code/code/code.js

@@ -36,7 +36,7 @@ export class Code {
         };
     }
     render() {
-        return (h("span", { key: '1f39309899332d922cec402858c49091f68e1ecd', class: Object.assign({ 'digi-code': true }, this.cssModifiers) }, h("code", { key: '5e6159edf847a046228df4d06e4dbf357fcfe956', class: `digi-code__code language-${this.afLanguage}`, lang: this.afLang, innerHTML: this.highlightedCode })));
+        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 })));
     }
     static get is() { return "digi-code"; }
     static get originalStyleUrls() {

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

@@ -46,7 +46,7 @@ export class CodeBlock {
         };
     }
     render() {
-        return (h("div", { key: '1c0fe10ddaa086ef1909f40f4f7d8166332b7937', class: Object.assign({ 'digi-code-block': true }, this.cssModifiers) }, h("pre", { key: '8b049e59aba799e21b1792b2da72f48b395f21c2', class: `digi-code-block__pre language-${this.afLanguage}` }, h("code", { key: '7dfede2383def6c90850076662c4e8a3d56623a5', class: "digi-code-block__code", lang: this.afLang, innerHTML: this.highlightedCode })), !this.afHideToolbar && (h("div", { key: 'a141612552ca8050b2a7c8df656670a24efcf8c8', class: "digi-code-block__toolbar" }, h("digi-button", { key: '15955307c432a72ff8631716dc0738c91d94a60d', class: "digi-code-block__button", onAfOnClick: () => this.copyButtonClickHandler(), afVariation: ButtonVariation.FUNCTION, afSize: ButtonSize.SMALL }, h("digi-icon-copy", { key: '1d496d0e47d3c15cba350aefe062d59535c3e45c', class: "digi-code-block__icon", "aria-hidden": "true", slot: "icon" }), _t.code.copy)))));
+        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)))));
     }
     static get is() { return "digi-code-block"; }
     static get originalStyleUrls() {

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

@@ -137,17 +137,17 @@ export class CodeExample {
             .replace(/\w/, (firstLetter) => firstLetter.toUpperCase());
     }
     render() {
-        return (h("div", { key: '2b299101185b04415ea649590ca86c3100ee5858', class: Object.assign({ 'digi-code-example': true }, this.cssModifiers), ref: (el) => (this.containerElement = el) }, h("div", { key: '9d76eb6d360da9ddbf2a68465bdc2bd733dd0837', class: {
+        return (h("div", { key: '1fc09f95af1e8f599b593ddad279743574ded843', class: Object.assign({ 'digi-code-example': true }, this.cssModifiers), ref: (el) => (this.containerElement = el) }, h("div", { key: '696edf1c732923293a2406393207eecd921b17de', class: {
                 'digi-code-example__container': true
-            } }, h("div", { key: '7efda3af27273f038a886a09216468bf7ab931b5', class: "digi-code-example__example" }, h("slot", { key: 'e3403f8b9c0ac7d394e85868aec41a17d147535b' })), !this.afHideCode && (h("div", { key: '714970e073a1648e424aa0e6134c92a7a2d60dde', class: "digi-code-example__code" }, this.showMoreButton && (h("button", { key: 'dffeab6754619b47f63acc0713b7335f7ae3b27c', class: "digi-code-example__code-expand", "aria-label": this.isActive ? _t.code.show_less : _t.code.show_more, "aria-expanded": this.isActive ? `true` : `false`, onClick: () => this.toggleButtonClickHandler() }, this.isActive ? _t.code.show_less : _t.code.show_more, ' ', h("digi-icon-chevron-down", { key: '21c6b69a1e9ec51e57697a20d093dd559a801927', class: {
+            } }, h("div", { key: '9cc7fa9e045bbeda26fa4b8d9f96efebc24da263', class: "digi-code-example__example" }, h("slot", { key: '01a468003e94818b1459b62b90a83a8304acaaa8' })), !this.afHideCode && (h("div", { key: '565f2d91029c63a867e3f80c12c736e5b03deec9', class: "digi-code-example__code" }, this.showMoreButton && (h("button", { key: '3cea8c377900e8244bc164318875b3e2b8c0b1a3', class: "digi-code-example__code-expand", "aria-label": this.isActive ? _t.code.show_less : _t.code.show_more, "aria-expanded": this.isActive ? `true` : `false`, onClick: () => this.toggleButtonClickHandler() }, this.isActive ? _t.code.show_less : _t.code.show_more, ' ', h("digi-icon-chevron-down", { key: '1b2260b6ba50e105d1cf7cfbd77b6506904ad138', class: {
                 'digi-code-example__code-expand-icon': true,
                 'digi-code-example__code-expand-icon--open': this.isActive
-            }, "aria-hidden": "true" }))), h("div", { key: '785500e88108b719a1b332e3100115a0d75f2e1a', class: {
+            }, "aria-hidden": "true" }))), h("div", { key: '5d3fc7f0415d1c7bf698d7275d3d04ca0f5fd4c5', class: {
                 'digi-code-example__codeblock': true,
                 'digi-code-example__codeblock--light': this.afCodeBlockVariation === 'light',
                 'digi-code-example__codeblock--dark': this.afCodeBlockVariation === 'dark',
                 'digi-code-example__codeblock--fade': !this.isActive && this.showMoreButton
-            } }, h("digi-code-block", { key: 'b425e48e77cfe980a13ac47690f40bc2b823d61a', afCode: this.codeExample || '', afLanguage: this.afLanguage.toLowerCase(), afVariation: this.afCodeBlockVariation, "af-hide-toolbar": true }), !this.isActive ? (h("div", { class: {
+            } }, h("digi-code-block", { key: 'c1caedb22bf5d4ebe05cb060e1500b9c25bb0865', afCode: this.codeExample || '', afLanguage: this.afLanguage.toLowerCase(), afVariation: this.afCodeBlockVariation, "af-hide-toolbar": true }), !this.isActive ? (h("div", { class: {
                 'digi-code-example__fade': true,
                 'digi-code-example__fade--dark': this.afCodeBlockVariation === 'dark',
                 'digi-code-example__fade--light': this.afCodeBlockVariation === 'light'

package/dist/collection/components/_dialog/dialog/dialog.js

@@ -234,11 +234,11 @@ export class Dialog {
         };
     }
     render() {
-        return (h(Host, { key: 'eb1bb947f13b042ee2dc5ac197b889dd9b5d6159', ref: (el) => {
+        return (h(Host, { key: '34539a8a9731e095ed204c342b1dcbbf766a45a1', ref: (el) => {
                 this._host = el;
-            } }, this.afShowDialog && (h("div", { key: '439ef1df49ea5b4b843b06f5705ad260a91ba7e9', class: Object.assign({ 'digi-dialog': true }, this.cssModifiers) }, h("digi-util-keydown-handler", { key: '91f2367861c8391c260fd02cb3f94ffaf46393d7', onAfOnEsc: (e) => this.escHandler(e), onAfOnTab: (e) => this.tabHandler(e), onAfOnShiftTab: (e) => this.shiftHandler(e), class: "digi-dialog__keydown-handler" }, h("div", { key: 'bbd5a0f3da339b9b19d896a20cfdd49704f10140', ref: (el) => {
+            } }, this.afShowDialog && (h("div", { key: 'e0dd4d3de7a86cdb52921dbe0f3dfd24072fc230', class: Object.assign({ 'digi-dialog': true }, this.cssModifiers) }, h("digi-util-keydown-handler", { key: 'c2070579411f43f8a0322c19062ffaabfa88aa90', onAfOnEsc: (e) => this.escHandler(e), onAfOnTab: (e) => this.tabHandler(e), onAfOnShiftTab: (e) => this.shiftHandler(e), class: "digi-dialog__keydown-handler" }, h("div", { key: 'bc97b6d0f4528264abd9991042197b665527fbdb', ref: (el) => {
                 this._wrapper = el;
-            }, role: "dialog", "aria-modal": "true", class: "digi-dialog__content" }, h("digi-typography", { key: 'e728a1e2f52f2ee15d88c16cac9dd213e00fe7b7' }, this.afCloseButtonText && (h("digi-button", { key: '0c5f3bd81d5cb11fa1141dc8dd6a7748be7282c4', ref: (el) => (this._closeButton = el), class: "digi-dialog__close-button", afAriaLabel: this.afCloseButtonText, afSize: ButtonSize.MEDIUM, "af-variation": "function", onAfOnClick: (e) => this.closeDialog(e) }, this.afCloseButtonText, h("digi-icon-x", { key: '2c5ddc670ff74f9fb6aae85adcc0cde7617aec8d', class: "digi-dialog__close-icon", slot: "icon-secondary" }))), h("slot", { key: 'f75ecc992532a82e8c909ed9d173390ec6d2e226', name: "over-heading" }), this.afHeadingLevel && this.afHeading && (h(this.afHeadingLevel, { key: '9acd3a4e26d6f3afae31140441ce11935b22b396', tabindex: "-1", ref: (el) => (this._dialogHeading = el) }, this.afHeading)), h("slot", { key: '62a294c1a12bb673b2509c9062e08ee727ca6b69' }), h("div", { key: 'e4e4633454b4a1393b80f8210633d8180cf6c284', ref: (el) => (this._buttonContainer = el), class: "digi-dialog__button-container" }, this.afSecondaryButtonText && (h("digi-button", { key: 'a74aa8f2580c6e38afae6895dba15dd4fa56039f', ref: (el) => (this._secondaryButton = el), afVariation: ButtonVariation.SECONDARY, onAfOnClick: (e) => this.secondaryClickHandler(e) }, this.afSecondaryButtonText)), this.afPrimaryButtonText && (h("digi-button", { key: '87ce5964117fcead379ecd09f8954c343811e186', ref: (el) => (this._primaryButton = el), afVariation: ButtonVariation.PRIMARY, onAfOnClick: (e) => this.primaryClickHandler(e) }, this.afPrimaryButtonText))))))))));
+            }, role: "dialog", "aria-modal": "true", class: "digi-dialog__content" }, h("digi-typography", { key: '235e9b11ccc5ae1c84943437a639ddd76ab9b16b' }, this.afCloseButtonText && (h("digi-button", { key: 'e38b7c95212452010352476b074135a0ddb236f0', ref: (el) => (this._closeButton = el), class: "digi-dialog__close-button", afAriaLabel: this.afCloseButtonText, afSize: ButtonSize.MEDIUM, "af-variation": "function", onAfOnClick: (e) => this.closeDialog(e) }, this.afCloseButtonText, h("digi-icon-x", { key: '5c981bfd7165ec0c5f84dd66cbf35cd5cbf6f1b0', class: "digi-dialog__close-icon", slot: "icon-secondary" }))), h("slot", { key: 'c29dbabf69e3093b9dccd75c673277992f0225f2', name: "over-heading" }), this.afHeadingLevel && this.afHeading && (h(this.afHeadingLevel, { key: '272f1b7d06834c750df27c6d7516a3d4478c11cb', tabindex: "-1", ref: (el) => (this._dialogHeading = el) }, this.afHeading)), h("slot", { key: '73be81c62c8add95917652d6422dab6ad2584993' }), h("div", { key: 'dab34b232fb7c5e19ebeaae18332a7cceebd4d67', ref: (el) => (this._buttonContainer = el), class: "digi-dialog__button-container" }, this.afSecondaryButtonText && (h("digi-button", { key: 'ac28051d537bcf63166cc362228617defb63f94d', ref: (el) => (this._secondaryButton = el), afVariation: ButtonVariation.SECONDARY, onAfOnClick: (e) => this.secondaryClickHandler(e) }, this.afSecondaryButtonText)), this.afPrimaryButtonText && (h("digi-button", { key: '43fc82cfdedaef2674c35b9165438be3815a18fa', ref: (el) => (this._primaryButton = el), afVariation: ButtonVariation.PRIMARY, onAfOnClick: (e) => this.primaryClickHandler(e) }, this.afPrimaryButtonText))))))))));
     }
     static get is() { return "digi-dialog"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/_expandable/expandable-accordion/expandable-accordion.js

@@ -86,7 +86,7 @@ export class ExpandableAccordion {
         }
     }
     render() {
-        return (h("article", { key: 'f4049e96e0a738f6c6442ca7c2d73ac3c9cddc5c', "aria-expanded": this.afExpanded ? 'true' : 'false', class: Object.assign({ 'digi-expandable-accordion': true }, this.cssModifiers) }, h("header", { key: '55abe8aa92ba086f94a50436de06d4e9d9ed0f8b', class: "digi-expandable-accordion__header" }, h(this.afHeadingLevel, { key: '27280b12a41d00c903e8d39b5948b48c326d46db', class: "digi-expandable-accordion__heading" }, h("button", { key: '601035c435d596c247d69364eadd8947ebd472f1', type: "button", class: "digi-expandable-accordion__button", onClick: (e) => this.clickToggleHandler(e), "aria-expanded": this.afExpanded ? 'true' : 'false', "aria-controls": `${this.afId}-content`, ref: (el) => (this._button = el) }, this.afVariation !== ExpandableAccordionVariation.SECONDARY && (h("digi-icon-chevron-down", { key: 'b7d574b6207f5dc18ba1baff8a018931c6dc394f', class: "digi-expandable-accordion__toggle-icon" })), this.afHeading, this.afVariation === ExpandableAccordionVariation.SECONDARY && (h("span", { key: 'eaa2a0d8ec4f98b0d54df8eb6e55c9fbbefd8c31', class: "digi-expandable-accordion__toggle-label" }, this.afExpanded ? this.afCollapseText : this.afExpandText, this.toggleIcon))))), h("section", { key: 'e84df6674a3fa3fd192104d0825dd7f338fa38a4', class: "digi-expandable-accordion__content", id: `${this.afId}-content` }, h("div", { key: 'de8b5d832c83d6e54ba9850fe44e714a38aa17af' }, h("digi-typography", { key: '2be0c45ad97b2747cabce7ca051071bae1714871' }, h("slot", { key: '71c4dfc034a236e4d1ce7ab05978aba52da97b0b' })), this.afVariation === ExpandableAccordionVariation.SECONDARY && (h("digi-button", { key: '8434f5962cedcd532ffdf0525069466263f08619', class: "digi-expandable-accordion__toggle-inside", afVariation: ButtonVariation.FUNCTION, afType: ButtonType.BUTTON, onAfOnClick: (e) => this.clickToggleHandler(e.detail, true), afFullWidth: true, afAriaExpanded: this.afExpanded, afAriaControls: `${this.afId}-content` }, this.afExpanded ? this.afCollapseText : this.afExpandText, this.toggleIcon))))));
+        return (h("article", { key: '8f36885caf761283c64f6621f51009a8359452e9', "aria-expanded": this.afExpanded ? 'true' : 'false', class: Object.assign({ 'digi-expandable-accordion': true }, this.cssModifiers) }, h("header", { key: 'c5075db3c3f7db911fcb91cd4fa358417344ea46', class: "digi-expandable-accordion__header" }, h(this.afHeadingLevel, { key: 'aa4e12619916be007ad3e1557dd73c76cb1ef909', class: "digi-expandable-accordion__heading" }, h("button", { key: '782179109f66bf89dc5bac402238d0af1ea46a9c', type: "button", class: "digi-expandable-accordion__button", onClick: (e) => this.clickToggleHandler(e), "aria-expanded": this.afExpanded ? 'true' : 'false', "aria-controls": `${this.afId}-content`, ref: (el) => (this._button = el) }, this.afVariation !== ExpandableAccordionVariation.SECONDARY && (h("digi-icon-chevron-down", { key: 'b110e0bff68dfe9948303496f15f53a5d665d416', class: "digi-expandable-accordion__toggle-icon" })), this.afHeading, this.afVariation === ExpandableAccordionVariation.SECONDARY && (h("span", { key: '72d6acad7f9df3ea243f88d0f0ab5c45601c7497', class: "digi-expandable-accordion__toggle-label" }, this.afExpanded ? this.afCollapseText : this.afExpandText, this.toggleIcon))))), h("section", { key: '8e1eb9ff3c25c9756d71e0b93cfcc6e6fc2c7fd1', class: "digi-expandable-accordion__content", id: `${this.afId}-content` }, h("div", { key: '5169c054bcd4505ae318e81e2bc153fd353376f7' }, h("digi-typography", { key: 'ce8b1571f56735acdc103066ccada62adc9287a3' }, h("slot", { key: 'a1431c75e3ac43d6f3bd2a0d990c08cbeaca43b7' })), this.afVariation === ExpandableAccordionVariation.SECONDARY && (h("digi-button", { key: '0facba73a687733686451651a2a0b7f08b4d606d', class: "digi-expandable-accordion__toggle-inside", afVariation: ButtonVariation.FUNCTION, afType: ButtonType.BUTTON, onAfOnClick: (e) => this.clickToggleHandler(e.detail, true), afFullWidth: true, afAriaExpanded: this.afExpanded, afAriaControls: `${this.afId}-content` }, this.afExpanded ? this.afCollapseText : this.afExpandText, this.toggleIcon))))));
     }
     static get is() { return "digi-expandable-accordion"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_expandable/expandable-faq/expandable-faq.js

@@ -50,9 +50,9 @@ export class ExpandableFaq {
             });
     }
     render() {
-        return (h("div", { key: '32a8d2da8d24c66ce1e2211ee785e0f0d5261f4c', class: {
+        return (h("div", { key: '09d22ebf55ca5f2d6f0619f347b9372c8ef29dc4', class: {
                 'digi-expandable-faq': true
-            } }, h(this.afHeadingLevel, { key: '9c472e72ff33cd7c3ed5725f3382d974b7016029' }, this.afHeading), h("slot", { key: '581019a7d2d75d3e5546640b3a8cddfd37cb2670' })));
+            } }, h(this.afHeadingLevel, { key: 'd4520f1d6f34be5a0d45d4415a426b06db450cb3' }, this.afHeading), h("slot", { key: '75163e2567e60bec3a61c5747707d8cc6ba57836' })));
     }
     static get is() { return "digi-expandable-faq"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_expandable/expandable-faq-item/expandable-faq-item.js

@@ -68,18 +68,18 @@ export class ExpandableFaqItem {
         }
     }
     render() {
-        return (h("article", { key: '361346ec84652ebeb0663b6d408808dd88ea720e', "aria-expanded": this.afExpanded ? 'true' : 'false', class: Object.assign({ 'digi-expandable-faq-item': true }, this.cssModifiers) }, h("header", { key: '00550c8341301623e6729175ad36fc16d4c27c60', class: "digi-expandable-faq-item__header" }, h(this.afHeadingLevel, { key: 'f24cfbf29d4724afb48bf94d7e399c159046e8ad' }, h("button", { key: 'df122ba08986d258737b1c6c76d304b72ae9fef2', type: "button", class: "digi-expandable-faq-item__button", onClick: (e) => {
+        return (h("article", { key: '1e483efc9eeba5bfa7bfa729661cbd37da3a44c8', "aria-expanded": this.afExpanded ? 'true' : 'false', class: Object.assign({ 'digi-expandable-faq-item': true }, this.cssModifiers) }, h("header", { key: '401a9c7ad50c3c615afa839d34d153e343697fc5', class: "digi-expandable-faq-item__header" }, h(this.afHeadingLevel, { key: '2b6ecf34b7efa7343d455dd83a81169863096d19' }, h("button", { key: 'b1c35ccc37228dcce96efcba916e94fe86b23ba4', type: "button", class: "digi-expandable-faq-item__button", onClick: (e) => {
                 e.preventDefault();
                 this.afExpanded = !this.afExpanded;
                 this.afOnClick.emit(e);
-            }, "aria-pressed": this.afExpanded ? 'true' : 'false', "aria-expanded": this.afExpanded ? 'true' : 'false', "aria-controls": `${this.afId}-content` }, h("digi-icon-chevron-down", { key: '31f310585933331939e6892e0913d7f04e9cc75c', class: {
+            }, "aria-pressed": this.afExpanded ? 'true' : 'false', "aria-expanded": this.afExpanded ? 'true' : 'false', "aria-controls": `${this.afId}-content` }, h("digi-icon-chevron-down", { key: '4c513e83b6f3d3e192ce3db59c409e50d44bda19', class: {
                 'digi-expandable-faq-item__header--toggle-icon': true,
                 'digi-expandable-faq-item__header--toggle-icon--expanded': this.afExpanded
-            } }), this.afHeading))), h("section", { key: 'eca6a7b78f0506b9fdef6b7253bee5dba9a4d447', class: {
+            } }), this.afHeading))), h("section", { key: 'c194caff58e7c4342a6f242563ab898ab593be81', class: {
                 'digi-expandable-faq-item__content': true,
                 'digi-expandable-faq-item__content--animation': this.afAnimation,
                 'digi-expandable-faq-item__content--hidden': !this.afExpanded
-            }, id: `${this.afId}-content` }, h("div", { key: '33d7a485268dd8ec201dc3a3918508a602cb62d8' }, h("digi-typography", { key: '720e7734de80c8161a1ecfec776bbaf94492cb8b' }, h("slot", { key: '140b4e8f9404af0d1be42b5a7856a3a857e6f911' }))))));
+            }, id: `${this.afId}-content` }, h("div", { key: '60f4525e301255b45db82c67631629b072d9c6a1' }, h("digi-typography", { key: 'b141751ead2d0cd30a510bd3180ea6d83f0dc99a' }, h("slot", { key: 'dd4e470c85a4d87beee6990ec39260ee3d504687' }))))));
     }
     static get is() { return "digi-expandable-faq-item"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_footer/footer/footer.js

@@ -22,7 +22,7 @@ export class FooterFooter {
         };
     }
     render() {
-        return (h(Host, { key: '15a1c21d79e6ff3571975e53be23c08acc26685f' }, h("footer", { key: '051ddcf293a2988347e7b145f3944949670e8589', class: Object.assign({ 'digi-footer': true }, this.cssModifiers) }, h("digi-typography", { key: '553ff1bc7dd79e250a0f7187b780b5f357ac7be3' }, h("digi-layout-block", { key: '57c88a813fb14d37107fa9f5136cd78aad0da404', afVariation: LayoutBlockVariation.PROFILE }, h("digi-layout-container", { key: '0d207d8d39665df0d730c2c109ee2b40b3388830', "af-no-gutter": true }, h("div", { key: 'b8b07a000ec8b5a5d201090a0f3391c41cd0cf14', class: "digi-footer__content-top" }, h("slot", { key: '5a214286e0d7424d101de8238b85d0e0903df623', name: "content-top" })), h("div", { key: '9ac8711c7aa0440d66a4c7b64502a5f2a6bac81f', class: "digi-footer__content-bottom" }, h("slot", { key: '30b2b9c80d67202845ff2df19c518370efe35fe4', name: "content-bottom-left" }), h("slot", { key: '4233a4fc49bb190fb870d3645b971f05a9a124d3', name: "content-bottom-right" }))))))));
+        return (h(Host, { key: '46885c322c2f0dd230363d3ab7062a9e6986970c' }, h("footer", { key: '7efcdd8fbb00b74a8ef0a8b35ac92588a94cece4', class: Object.assign({ 'digi-footer': true }, this.cssModifiers) }, h("digi-typography", { key: '5b37f73650882490442573110be229d37a9e153e' }, h("digi-layout-block", { key: '1415e50387c016c70f2e4098ee4ac84f6af5e441', afVariation: LayoutBlockVariation.PROFILE }, h("digi-layout-container", { key: '04106f85c738c5dd1282b19f8dcdec35ede6efc3', "af-no-gutter": true }, h("div", { key: '8d4ef8c0b6e191f7f5d33ff1cbaccd722f349238', class: "digi-footer__content-top" }, h("slot", { key: '71b8f0fafec2106ba73f08427b704f5c53104a1b', name: "content-top" })), h("div", { key: 'cd012a74d0b6de6ac4adc06d4d00fe44bb34dcc2', class: "digi-footer__content-bottom" }, h("slot", { key: 'dc6674b23f4ed22fcc0b3593f9e6fa2dc9712125', name: "content-bottom-left" }), h("slot", { key: '50d989e0607826b4879c91419c04988e1cdaf89a', name: "content-bottom-right" }))))))));
     }
     static get is() { return "digi-footer"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_footer/footer-card/footer-card.js

@@ -20,7 +20,7 @@ export class FooterFooterCard {
         };
     }
     render() {
-        return (h(Host, { key: 'bd9422a2874447935fefd410f9e46a5277673e18' }, h("div", { key: '10623e093bfbbc95097d12da7700493e106515f2', class: Object.assign({ 'digi-footer-card': true }, this.cssModifiers) }, h("div", { key: '7a33e20703f8c976c8f32fceda772f9a306c8120', class: "digi-footer-card__content" }, h("slot", { key: 'e202906ecd7817bcb60bb50476406ab2a8637bf8' })))));
+        return (h(Host, { key: '535af16657d01d2e08d92b95af9bb23c8d5197ce' }, h("div", { key: 'baf875f1a0a6f42b5fb530fb73e4da5b7f6809c9', class: Object.assign({ 'digi-footer-card': true }, this.cssModifiers) }, h("div", { key: 'af3562918c33cbaab9dd1ee7a11c0ac8a8060a39', class: "digi-footer-card__content" }, h("slot", { key: 'a8185b8306c7df1b4cf3a6c1d467d25a2a5da17e' })))));
     }
     static get is() { return "digi-footer-card"; }
     static get encapsulation() { return "scoped"; }

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

@@ -92,7 +92,7 @@ export class FormCategoryFilter {
         this.afHideToggle = !this.toggleHidden;
     }
     render() {
-        return (h(Host, { key: '9f548b04f1266a60bdcbfa0a88ce48d5950bd7dc' }, h("div", { key: '07875e22233dcaaf74bdae91cc63029b1778b0f5', class: {
+        return (h(Host, { key: '307d50b679dd2b7505bf224d4eda35b7c672acb9' }, h("div", { key: 'f70188e688e97f07c0eb9735d90197274c263e0b', class: {
                 'digi-form-category-filter': true
             } }, this.displayCategories().map((category) => (h("digi-button", { class: {
                 'digi-form-category-filter--category': true,
@@ -100,7 +100,7 @@ export class FormCategoryFilter {
             }, afVariation: "primary", afAriaPressed: this.selectedCategories.includes(category.name), onAfOnClick: () => {
                 this.toggleCategory(category);
             } }, typeof category.hits === 'undefined' && category.name, typeof category.hits !== 'undefined' && (h("span", null, category.name, ' ', h("span", { class: "digi-form-category-filter--category--thin-text" }, "(", category.hits, ")")))))), this.afHideToggle === false &&
-            this.afCategories.length > this.afVisibleCollapsed && (h("div", { key: 'a6c540e4680062f8691f60c2aa134b71a8e76511' }, h("digi-button", { key: '4405a9448d5d44075e56e988ea8b745bf8078b29', afVariation: "function", afAriaExpanded: !this.collapsed, onClick: () => {
+            this.afCategories.length > this.afVisibleCollapsed && (h("div", { key: '21234ee338d41da7241ab04def48fbfcaa038e4f' }, h("digi-button", { key: '89b0d03991d150f7aaa0dc312b2b63b352e54caf', afVariation: "function", afAriaExpanded: !this.collapsed, onClick: () => {
                 this.toggleCollapsed();
             } }, this.collapsed ? 'Visa alla' : 'Visa färre', this.collapsed ? (h("digi-icon-plus", { slot: "icon", "aria-hidden": "true" })) : (h("digi-icon-minus", { slot: "icon", "aria-hidden": "true" }))))))));
     }

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

@@ -96,7 +96,7 @@ export class FormCheckbox {
         this.afOnInput.emit(e);
     }
     render() {
-        return (h("div", { key: 'db557f8e92d9ea23b459cfe2f064ec2a02b18536', class: Object.assign({ 'digi-form-checkbox': true }, this.cssModifiers) }, h("input", { key: '63ad7293a6b85c2343155f9e431f92c1e3f2a428', class: "digi-form-checkbox__input", ref: (el) => {
+        return (h("div", { key: '6053a9d2b143a6a3bd3772916539be443c66f156', class: Object.assign({ 'digi-form-checkbox': true }, this.cssModifiers) }, h("input", { key: 'a510d1b6f59c81d3f513e2772180128da504466a', 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);
@@ -104,7 +104,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: '2a4e866abb065161e7fc7c50a0006d572bb557a0', htmlFor: this.afId, class: "digi-form-checkbox__label" }, h("span", { key: '2c1d8b1baf8f53f414da95fa22ff29237a7607ba', class: "digi-form-checkbox__box" }), this.afLabel), !!this.afDescription && (h("p", { key: 'f90247ad0ab1628f46c95f15463c1722b14a5978', 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: 'ef12c51e16dbefb5ba131e79682ab910d07712fb', htmlFor: this.afId, class: "digi-form-checkbox__label" }, h("span", { key: 'ecb394f60eda7b04e3b79160e899af9d994ab719', class: "digi-form-checkbox__box" }), this.afLabel), !!this.afDescription && (h("p", { key: '56ab27af4828f6d3e2e60102f9f16b1f5fea112a', id: `${this.afId}-description`, class: "digi-form-checkbox__description" }, this.afDescription))));
     }
     static get is() { return "digi-form-checkbox"; }
     static get encapsulation() { return "scoped"; }

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

@@ -72,14 +72,14 @@ export class FormErrorList {
         this.afOnClickLink.emit(e);
     }
     render() {
-        return (h("div", { key: '44066a6948209e5f570a0af7951033e8a3ae5ce1', class: "digi-form-error-list", id: this.afId }, h("digi-notification-alert", { key: '90d1ebf9d07584eced3eb98699108d6737fabd94', ref: (el) => (this._notificationAlert = el), "af-heading": this.afHeading, "af-heading-level": this.afHeadingLevel, "af-variation": NotificationAlertVariation.DANGER }, this.afDescription && (h("digi-typography", { key: '8381d5cd18a7883a801efeb7e3a6876c01e1c3cf', "af-variation": TypographyVariation.SMALL }, h("p", { key: '07ec00300f6d9eae182bf4bd7ae3081c574efd6b', class: "digi-form-error-list__description" }, this.afDescription))), h("ul", { key: '3bc8ed8fb5f234f18637031fb111ac87eaf40012', class: "digi-form-error-list__list" }, this.linkItems.map((item) => {
+        return (h("div", { key: '06056fe8cb5f3b56c79158d812c1c09a1628541d', class: "digi-form-error-list", id: this.afId }, h("digi-notification-alert", { key: '6fe6e043c279c532f5738634b039dd7f542a3628', ref: (el) => (this._notificationAlert = el), "af-heading": this.afHeading, "af-heading-level": this.afHeadingLevel, "af-variation": NotificationAlertVariation.DANGER }, this.afDescription && (h("digi-typography", { key: 'f4b41e24b6725c3c25aebc32071dfce1609d981e', "af-variation": TypographyVariation.SMALL }, h("p", { key: '136d509835b52a285adefbad4c5f3ea40dd701dd', class: "digi-form-error-list__description" }, this.afDescription))), h("ul", { key: 'f670637f5a552151162756785d68076d83a1829d', class: "digi-form-error-list__list" }, this.linkItems.map((item) => {
             return (h("li", { class: "digi-form-error-list__item" }, h("digi-link-internal", { class: "digi-form-error-list__link", afHref: item.href }, item.text)));
-        }))), h("div", { key: 'f993e0d9f4d40205e78f96e148fff01b6bbc0d7e', hidden: true, class: "digi-form-error-list__slot" }, h("digi-util-mutation-observer", { key: 'c7e9e247c12326d0a2632daa5c11e3230ca67eb7', afOptions: {
+        }))), h("div", { key: '79c1093979510b76f888e9840512daf5908a0dca', hidden: true, class: "digi-form-error-list__slot" }, h("digi-util-mutation-observer", { key: 'f989dce00ab10de93167d9ebcfcf2c9c3eb96c69', afOptions: {
                 attributes: false,
                 childList: true,
                 subtree: true,
                 characterData: true
-            }, ref: (el) => (this._observer = el), onAfOnChange: () => this.getLinks() }, h("slot", { key: '13c45f79b7814df178387f06eb3a368ca82ece5c' })))));
+            }, ref: (el) => (this._observer = el), onAfOnChange: () => this.getLinks() }, h("slot", { key: 'f6c8ff60f509332f365e0e8534050781430d79b9' })))));
     }
     static get is() { return "digi-form-error-list"; }
     static get encapsulation() { return "scoped"; }

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

@@ -12,7 +12,7 @@ export class FormFieldset {
         this.afId = randomIdGenerator('digi-form-fieldset');
     }
     render() {
-        return (h("fieldset", { key: 'e0bd7e223d89afb504d2222e53669b7eea58920d', class: "digi-form-fieldset", name: this.afName, form: this.afForm, id: this.afId }, this.afLegend && (h("legend", { key: '86f8437d8d437252b51c3df24e4950407ef30a87', class: "digi-form-fieldset__legend" }, this.afLegend)), h("slot", { key: 'a8805645382a6c89dc342f7f6fe4717f2915e18e' })));
+        return (h("fieldset", { key: '1e640820584a609c6ac925c31be698c77eb07822', class: "digi-form-fieldset", name: this.afName, form: this.afForm, id: this.afId }, this.afLegend && (h("legend", { key: '0ae1c575b18a93f1ddc0117b2508f0d641fc16e1', class: "digi-form-fieldset__legend" }, this.afLegend)), h("slot", { key: 'e2a572ff848a2ce042ca39cab7efd6bab7351320' })));
     }
     static get is() { return "digi-form-fieldset"; }
     static get encapsulation() { return "scoped"; }

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

@@ -543,22 +543,22 @@ export class FormFileUpload {
             } }, this.renderFiles())));
     }
     render() {
-        return (h(Fragment, { key: 'ba17ebd1a68c4dfdd7842fd147fe70eb28531b07' }, h("digi-util-breakpoint-observer", { key: '6abcbd6c77f2079fb806dd5532c5c599d5199b84', onAfOnChange: (e) => this.breakpointHandler(e) }), h("div", { key: 'f1f17ea90d6ae42beb4b0a2837141401b28acf27', class: Object.assign({ 'digi-form-file-upload': true }, this.cssModifiers) }, h("digi-form-label", { key: '53d48c99ef9c28f1e4a7920b2e36fe3f51f009fc', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("div", { key: '3b48c33247372f0cc9f09e9d75154a42076b9015', class: {
+        return (h(Fragment, { key: '580ccd74dcdc8a15ee7a50105066c6d609e723b7' }, h("digi-util-breakpoint-observer", { key: '9b9589b28a18ded2bf67994a439bd536f08584e4', onAfOnChange: (e) => this.breakpointHandler(e) }), h("div", { key: '1e5cff6bafb3a81af192e1ee4298bee2240eca33', class: Object.assign({ 'digi-form-file-upload': true }, this.cssModifiers) }, h("digi-form-label", { key: '75ae2b56e481e00765e1d43234df14c572ea7967', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("div", { key: 'ed0236252fed830bf472d7921d9dcc5a256a91d8', class: {
                 'digi-form-file-upload__upload-area': true,
                 'digi-form-file-upload__upload-area--hover': this.fileHover
             }, onDrop: (e) => this.handleDrop(e), onDragOver: (e) => this.handleAllowDrop(e), onDragEnter: (e) => this.handleOnDragEnterLeave(e), onDragLeave: (e) => this.handleOnDragEnterLeave(e), onClick: (e) => this.handleInputClick(e) }, this.fileHover &&
-            this.afVariation != FormFileUploadVariation.SMALL && (h("div", { key: 'b4d8074c13738a51baafc3532f5c7e1fbb2bcce1', class: "digi-form-file-upload__upload-area-overlay" })), h("div", { key: '7d3a7f3d533d09b22ae51db4bfcebef117fed146', class: "digi-form-file-upload__text-area" }, h("button", { key: 'c4c06ebbb8092018cf5e9185c34166b0994479d7', type: "button", ref: (el) => {
+            this.afVariation != FormFileUploadVariation.SMALL && (h("div", { key: 'ddd140e8b75acf45e0a888d7263b0960ff1b7962', class: "digi-form-file-upload__upload-area-overlay" })), h("div", { key: '10d4233b2ea238241db72a1707ad42e225642282', class: "digi-form-file-upload__text-area" }, h("button", { key: '2a2d261139d36d93e6d0bd7fd137ae7b599cfb19', type: "button", ref: (el) => {
                 this._uploadButton = el;
             }, onClick: (e) => this.handleInputClick(e), class: "digi-form-file-upload__button hidden_mobile", style: {
                 margin: '0'
-            } }, h("digi-icon-paperclip", { key: '585f2712a5fda051566eec8d0578df241580f865', "aria-hidden": "true", class: "digi-form-file-upload__button-icon paper-clip", slot: "icon" }), this.afUploadBtnText
+            } }, h("digi-icon-paperclip", { key: 'df312825690f52fd61b6647abfab6e92f597f598', "aria-hidden": "true", class: "digi-form-file-upload__button-icon paper-clip", slot: "icon" }), this.afUploadBtnText
             ? this.afUploadBtnText
-            : _t.form.file_choose), h("input", { key: 'c1e9c5a90c34a3449862397e683039d7bf97d17e', ref: (el) => {
+            : _t.form.file_choose), h("input", { key: 'ddf070f55f29363aac37b604324ef79c8012a81f', ref: (el) => {
                 this._input = el;
-            }, onChange: (e) => this.onButtonUploadFileHandler(e), class: "digi-form-file-upload__input", multiple: true, type: "file", id: this.afId, accept: this.afFileTypes, name: this.afName ? this.afName : null, required: this.afRequired ? this.afRequired : null, onDrop: (e) => this.handleDrop(e), onDragOver: (e) => this.handleAllowDrop(e), "aria-errormessage": "digi-form-file-upload__error", "aria-describedBy": "digi-form-file-upload__error" }), h("span", { key: '1433e2a6e90b1fe1b0582eaf5d7062ba09bd33ff' }, this.afVariation !== FormFileUploadVariation.SMALL &&
-            _t.form.file_dropzone))), h("p", { key: '5253bce63a20f603e307ac4939efe495ba862074', class: "visually-hidden", role: "alert", "aria-atomic": "true", ref: (el) => {
+            }, onChange: (e) => this.onButtonUploadFileHandler(e), class: "digi-form-file-upload__input", multiple: true, type: "file", id: this.afId, accept: this.afFileTypes, name: this.afName ? this.afName : null, required: this.afRequired ? this.afRequired : null, onDrop: (e) => this.handleDrop(e), onDragOver: (e) => this.handleAllowDrop(e), "aria-errormessage": "digi-form-file-upload__error", "aria-describedBy": "digi-form-file-upload__error" }), h("span", { key: '9979fdc76df838ffc9aa8819bbcbf08c91c049ce' }, this.afVariation !== FormFileUploadVariation.SMALL &&
+            _t.form.file_dropzone))), h("p", { key: '4e77feeda7adc04c8fa4255f3b460703d10bc230', class: "visually-hidden", role: "alert", "aria-atomic": "true", ref: (el) => {
                 this._srTextContainer = el;
-            } }), (this.files.length > 0 || this.error) && (h("div", { key: '35c8740a26f94da3f7b0ef79e5ac20fae4ac1a74', class: "digi-form-file-upload__files" }, this.renderErrorMessage(), this.renderFileContainer())))));
+            } }), (this.files.length > 0 || this.error) && (h("div", { key: 'acf58e18643a87eeee54c1f7d6db872fa11598c6', class: "digi-form-file-upload__files" }, this.renderErrorMessage(), this.renderFileContainer())))));
     }
     static get is() { return "digi-form-file-upload"; }
     static get encapsulation() { return "scoped"; }