@designsystem-se/af 35.4.1-beta.0 → 36.0.0

package/dist/collection/components/_calendar/calendar-datepicker/calendar-datepicker.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -15,9 +15,6 @@ export class barChart {
         // States
         this._loading = false;
         this._placeholderTicks = ['0', '1', '2', '3', '4', '5', '6', '7'];
-        // Width of data at each tick, if we have two data series that have values att same tick, this will be 2 for example. defaults to 1;
-        this.dataWidth = 1;
-        this.barGap = 0;
         this._dims = {};
         this._margin = {
             bottom: 0,
@@ -35,7 +32,6 @@ export class barChart {
         this.defaultDuration = 400;
         // Text and formats
         this.fontSize = '0.875rem';
-        this.colorPalettes = ['--digi--color--background--brand-primary', '--digi--color--infographic--brand--primary', '--digi--color--background--sentiment--beta--primary', '--digi--color--text--interactive--visited', '--digi--color--icon--validation--error'];
         // Observer for watching size changes when in line chart mode
         this.barChartObserver = new ResizeObserver((entries) => {
             entries.forEach(() => {
@@ -81,8 +77,12 @@ export class barChart {
                 this._dims.width - this._margin.right - this._margin.left
             ]);
             this._barSelection
-                .attr('x', this.xFunction)
-                .attr('width', this.widthFunction);
+                .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
+                ? 2
+                : this._xScale(d.key))
+                .attr('width', (d) => this.afVariation === BarChartVariation.Horizontal
+                ? this._xScale(d.value)
+                : this._xScale.bandwidth());
             this.setValueTicks();
         };
         // Adding click listener for tool tip text
@@ -175,7 +175,7 @@ export class barChart {
         this.updateBars = (fromLoading) => {
             this._barChartContainer
                 .selectAll('.barGroup')
-                .data(this.mappedData)
+                .data(this.reshapeData)
                 .join((enter) => {
                 var _a, _b;
                 const tempSelection = enter
@@ -206,9 +206,17 @@ export class barChart {
                     .transition()
                     .duration(this.defaultDuration)
                     .ease(d3.easePolyInOut)
-                    .attr('width', this.widthFunction)
-                    .attr('y', this.yFunction)
-                    .attr('height', this.heightFunction)
+                    .attr('width', (d) => this.afVariation === BarChartVariation.Horizontal
+                    ? this._xScale(d.value)
+                    : this._xScale.bandwidth())
+                    .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
+                    ? this._yScale(d.key)
+                    : this._yScale(d.value))
+                    .attr('height', (d) => this.afVariation === BarChartVariation.Horizontal
+                    ? this._yScale.bandwidth()
+                    : this._dims.height -
+                        this._margin.bottom -
+                        this._yScale(d.value))
                     .attr('fill', '#00005a');
                 if (!((_b = (_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels))
                     return tempSelection;
@@ -280,11 +288,15 @@ export class barChart {
                         .on('mouseenter', this.hover)
                         .on('mouseleave', this.hoverOut)
                         .on('click', this.openTooltip)
-                        .attr('x', this.xFunction)
+                        .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
+                        ? 2
+                        : this._xScale(d.key))
                         .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
                         ? this._yScale(d.key)
                         : this._dims.height - this._margin.bottom)
-                        .attr('width', this.widthFunction)
+                        .attr('width', (d) => this.afVariation === BarChartVariation.Horizontal
+                        ? this._xScale(d.value)
+                        : this._xScale.bandwidth())
                         .attr('height', () => this.afVariation === BarChartVariation.Horizontal
                         ? this._yScale.bandwidth()
                         : 0)
@@ -292,8 +304,14 @@ export class barChart {
                         .transition()
                         .duration(this.defaultDuration)
                         .ease(d3.easePolyInOut)
-                        .attr('y', this.yFunction)
-                        .attr('height', this.heightFunction)
+                        .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
+                        ? this._yScale(d.key)
+                        : this._yScale(d.value))
+                        .attr('height', (d) => this.afVariation === BarChartVariation.Horizontal
+                        ? this._yScale.bandwidth()
+                        : this._dims.height -
+                            this._margin.bottom -
+                            this._yScale(d.value))
                         .on('end', () => this.barChartObserver.observe(this._chartDiv)); // Reset barchartObserver
                 }
                 else {
@@ -302,10 +320,20 @@ export class barChart {
                         .transition()
                         .duration(this.defaultDuration)
                         .ease(d3.easePolyInOut)
-                        .attr('x', this.xFunction)
-                        .attr('y', this.yFunction)
-                        .attr('width', this.widthFunction)
-                        .attr('height', this.heightFunction)
+                        .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
+                        ? this._yScale(d.key)
+                        : this._yScale(d.value))
+                        .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
+                        ? 2
+                        : this._xScale(d.key))
+                        .attr('width', (d) => this.afVariation === BarChartVariation.Horizontal
+                        ? this._xScale(d.value)
+                        : this._xScale.bandwidth())
+                        .attr('height', (d) => this.afVariation === BarChartVariation.Horizontal
+                        ? this._yScale.bandwidth()
+                        : this._dims.height -
+                            this._margin.bottom -
+                            this._yScale(d.value))
                         .attr('fill', '#00005a');
                 }
                 return update
@@ -396,67 +424,37 @@ export class barChart {
             const toReturn = [];
             if (this._loading) {
                 this._placeholderTicks.forEach((key) => {
-                    const tick = { key: key, series: [] };
-                    tick.series.push({
+                    toReturn.push({
                         key: key,
-                        serie: '',
                         value: Math.floor(Math.random() * (9 - 2 + 1) + 2),
-                        len: 0
+                        len: '1'
                     });
-                    toReturn.push(tick);
                 });
                 return toReturn;
             }
             this._chartData.data.xValueNames.forEach((key, index) => {
-                const tick = { key: key, series: [] };
-                this._chartData.data.series.forEach((serie) => {
-                    if (serie.yValues[index]) {
-                        tick.series.push({
-                            key: key,
-                            serie: serie.title,
-                            value: serie.yValues[index],
-                            len: serie.yValues[index] ? this.getTextSize(serie.yValues[index].toLocaleString()) : 0
-                        });
-                    }
+                toReturn.push({
+                    key: key,
+                    value: this._chartData.data.series[0].yValues[index],
+                    len: this.getTextSize(this._chartData.data.series[0].yValues[index].toLocaleString())
                 });
-                toReturn.push(tick);
             });
             return toReturn;
         };
         this.adjustBarSize = () => {
-            this._barSelection.selectAll('.bar')
-                .attr('x', this.xFunction)
-                .attr('y', this.yFunction)
-                .attr('width', this.widthFunction)
-                .attr('height', this.heightFunction);
-        };
-        // Handling x positioning of bars
-        this.xFunction = (d, i) => {
-            return this.afVariation === BarChartVariation.Horizontal
-                ? (d.value > 0 ? this._xScale(0) : this._xScale(d.value))
-                : this._xScale(d.key) + ((this._xScale.bandwidth() / this.dataWidth) * i + (this.barGap * i));
-        };
-        // Handling y positioning of bars
-        this.yFunction = (d, i) => {
-            if (!d.value)
-                return 0;
-            return this.afVariation === BarChartVariation.Horizontal
-                ? this._yScale(d.key) + ((this._yScale.bandwidth() / this.dataWidth) * i + (this.barGap * i))
-                : (d.value < 0 ? this._yScale(0) : this._yScale(d.value));
-        };
-        // Handling height for bars
-        this.heightFunction = (d) => {
-            if (!d.value)
-                return 0;
-            return this.afVariation === BarChartVariation.Horizontal
-                ? this._yScale.bandwidth() / this.dataWidth - (this.barGap)
-                : (d.value < 0 ? this._yScale(d.value) - this._yScale(0) : this._yScale(0) - this._yScale(d.value));
-        };
-        // Handling width for bars
-        this.widthFunction = (d) => {
-            return this.afVariation === BarChartVariation.Horizontal
-                ? Math.abs(this._xScale(0) - this._xScale(d.value))
-                : this._xScale.bandwidth() / this.dataWidth - (this.barGap);
+            this._barSelection
+                .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
+                ? this._yScale(d.key)
+                : this._yScale(d.value))
+                .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
+                ? 2
+                : this._xScale(d.key))
+                .attr('width', (d) => this.afVariation === BarChartVariation.Horizontal
+                ? this._xScale(d.value)
+                : this._xScale.bandwidth())
+                .attr('height', (d) => this.afVariation === BarChartVariation.Horizontal
+                ? this._yScale.bandwidth()
+                : this._dims.height - this._margin.bottom - this._yScale(d.value));
         };
         // Resize table
         this.resizeTable = () => {
@@ -696,16 +694,16 @@ export class barChart {
             d3.select(event.target)
                 .transition('hover')
                 .duration(20)
-                .attr('fill', (d) => event.target.tagName === 'rect'
-                ? `hsl(from ${this.colorFunction(d.serie)} h s calc(l + 10))`
-                : 'var(--digi--color--background--interactive--hover--tertiary)');
+                .attr('fill', event.target.tagName === 'rect'
+                ? '#4C4C8B'
+                : 'var(--digi--color--text--link-hover)');
         };
         // Removing highlight from bar
         this.hoverOut = (event) => {
             d3.select(event.target)
                 .transition('hover')
                 .duration(this.defaultDuration)
-                .attr('fill', (d) => event.target.tagName === 'rect' ? this.colorFunction(d.serie) : '#333333');
+                .attr('fill', event.target.tagName === 'rect' ? '#00005a' : '#333333');
         };
         this.openTooltip = (...[, d]) => {
             // If type is string, the user has clicked on a y-axis tick
@@ -774,7 +772,7 @@ export class barChart {
             if (this.afVariation == BarChartVariation.Horizontal)
                 this._tickWidth = this.getLargestText(this._xScale.ticks().map((tick) => tick.toLocaleString()));
             this.tickSizes();
-            this._barChartContainer.selectAll('.barGroup').data(this.mappedData);
+            this._barChartContainer.selectAll('.barGroup').data(this.reshapeData);
             if ((_b = (_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels)
                 this._textSelection.remove();
             this.initBarText();
@@ -845,14 +843,6 @@ export class barChart {
             this._chartData = data;
         else
             this._chartData = JSON.parse(data);
-        this.mappedData = this.reshapeData();
-        // checking for width of each tick
-        this.mappedData.forEach((elem) => {
-            if (elem.series.length > this.dataWidth)
-                this.dataWidth = elem.series.length;
-        });
-        if (this.dataWidth > 1)
-            this.barGap = 1;
     }
     initSvg() {
         var _a, _b, _c, _d, _e, _f, _g;
@@ -976,7 +966,7 @@ export class barChart {
             this._barChartContainer.selectAll('.barGroup').remove();
             this._barSelection = this._barChartContainer
                 .selectAll('barGroup')
-                .data(this.mappedData)
+                .data(this.reshapeData)
                 .join('g')
                 .attr('class', 'barGroup')
                 .attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, '_'))
@@ -987,17 +977,26 @@ export class barChart {
                 .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
                 ? this._yScale(d.key)
                 : this._dims.height - this._margin.bottom)
-                .attr('x', this.xFunction)
+                .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
+                ? 2
+                : this._xScale(d.key))
                 .attr('ry', 4)
                 .attr('rx', 4)
-                .attr('width', this.widthFunction)
+                .attr('width', (d) => this.afVariation === BarChartVariation.Horizontal
+                ? this._xScale(d.value)
+                : this._xScale.bandwidth())
                 .attr('height', () => 0)
+                //.attr('height', (d: any) => this.afVariation === BarChartVariation.Horizontal ? this._yScale.bandwidth() : (this._dims.height - this._margin.bottom) - this._yScale(d.value))
                 .attr('fill', 'gray')
                 .transition()
                 .duration(400)
                 .delay((...[, i]) => i * 150)
-                .attr('y', this.yFunction)
-                .attr('height', this.heightFunction);
+                .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
+                ? this._yScale(d.key)
+                : this._yScale(d.value))
+                .attr('height', (d) => this.afVariation === BarChartVariation.Horizontal
+                ? this._yScale.bandwidth()
+                : this._dims.height - this._margin.bottom - this._yScale(d.value));
             this._barSelection
                 .transition()
                 .duration(400)
@@ -1088,7 +1087,7 @@ export class barChart {
         if (this.afVariation === BarChartVariation.Horizontal) {
             this.setValueTicks();
             // Removing first tick, because it aligns with y-axis domain
-            //this._xAxisHandle.select('.tick').select('line').remove();
+            this._xAxisHandle.select('.tick').select('line').remove();
         }
         else {
             if (!empty) {
@@ -1102,41 +1101,39 @@ export class barChart {
     initBars() {
         this._barSelection = this._barChartContainer
             .selectAll('barGroup')
-            .data(this.mappedData)
+            .data(this.reshapeData)
             .join('g')
             .attr('class', 'barGroup')
-            .attr('id', (d) => {
-            return 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, '_');
-        });
-        this._barSelection.selectAll('.barGroup')
-            .data((d) => {
-            return d.series;
-        })
-            .join('rect')
+            .attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, '_'))
+            .append('rect')
             .attr('class', 'bar')
-            .style('cursor', 'pointer')
-            .attr('x', this.xFunction)
-            .attr('y', this.yFunction)
+            .style('cursor', 'pointer');
+        this._barSelection
+            .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
+            ? this._yScale(d.key)
+            : this._yScale(d.value))
+            .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
+            ? 2
+            : this._xScale(d.key))
             .attr('ry', 4)
             .attr('rx', 4)
-            .attr('width', this.widthFunction)
-            .attr('height', this.heightFunction)
-            .attr('fill', (d) => this.colorFunction(d.serie))
+            .attr('width', (d) => this.afVariation === BarChartVariation.Horizontal
+            ? this._xScale(d.value)
+            : this._xScale.bandwidth())
+            .attr('height', (d) => this.afVariation === BarChartVariation.Horizontal
+            ? this._yScale.bandwidth()
+            : this._dims.height - this._margin.bottom - this._yScale(d.value))
+            .attr('fill', '#00005a')
             .on('mouseenter', this.hover)
             .on('mouseleave', this.hoverOut)
             .on('click', this.openTooltip);
     }
     initBarText() {
-        var _a, _b;
-        if (!((_b = (_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels))
-            return;
         this._textSelection = this._barChartContainer
             .selectAll('.barGroup')
             .append('text');
         this._textSelection
-            .text((d) => {
-            return d.value ? d.value.toLocaleString(undefined, this._numberFormat) : undefined;
-        })
+            .text((d) => d.value.toLocaleString(undefined, this._numberFormat))
             .attr('class', 'barText')
             .attr('font-size', this.fontSize)
             .attr('font-weight', '600')
@@ -1274,18 +1271,6 @@ export class barChart {
             }
         }
     }
-    // Getting correct color given index or name of data serie
-    colorFunction(input) {
-        if (typeof input === 'number')
-            return `var(${this.colorPalettes[input]})`;
-        else {
-            const index = this._chartData.data.series.findIndex((serie) => serie.title === input);
-            if (index > 0)
-                return `var(${this.colorPalettes[index]})`;
-            else
-                return `var(${this.colorPalettes[0]})`;
-        }
-    }
     // Resizing bar chart
     resize() {
         var _a;
@@ -1366,11 +1351,11 @@ export class barChart {
     }
     // Not currently used
     /*get cssModifiers() {
-      return {
-        'digi-bar-chart--vertical': this.afVariation == 'vertical',
-        'digi-bar-chart--horizontal': this.afVariation == 'horizontal'
-      };
-    }*/
+          return {
+              'digi-bar-chart--vertical': this.afVariation == 'vertical',
+              'digi-bar-chart--horizontal': this.afVariation == 'horizontal'
+          };
+      }*/
     // Returns pixelwidth of text given the current fontSize (costly function using .each)
     getTextSize(text) {
         const textWidth = [];
@@ -1440,7 +1425,7 @@ export class barChart {
 				<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: 'a1e4aaa788766d54c691e95b7e70932b0e7d2b05', ref: (el) => (this._host = el) }, h("div", { key: '2fac926d196acaa20ab5f438968e3c98c08dd104', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: '16d8cbd0f03a2a2d24d3366ab1b3eaed797dd361', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '22a93add4a7f1ea3965ce496f2b5cbf488b01314', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${((_b = this._chartData) === null || _b === void 0 ? void 0 : _b.title) ? (_c = this._chartData) === null || _c === void 0 ? void 0 : _c.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: '152938d206dc00e2fb88b52d332960cbeda2c045', slot: "icon" }), "Visa tabell"), h("digi-button", { key: '66db213ee1c4cb169c7c257853a15a468bf2a83e', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${((_d = this._chartData) === null || _d === void 0 ? void 0 : _d.title) ? (_e = this._chartData) === null || _e === void 0 ? void 0 : _e.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: 'ac4b8adad6ace97f50591cd39b8b0082d067f069', slot: "icon" }), "Visa diagram"), h("div", { key: 'b28e00a40b5c1a2919146ec4815f23a14fdfac50', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: '63f80744faa1d4b3d7d62bece3b5c446eda3ae7b', class: "chartTooltip", id: this.afId }, h("div", { key: '8c9fa9388b9bfc071c4a594275159eb36a8ec43b', class: "tooltipBody" }), h("digi-icon-x", { key: '252d12a937e5276381fa40ec3bb4e77c259da9c1', class: "close" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", null)) : (h("digi-icon-caret-down", null))), h("div", { key: '9b70433c310882bd0a06784ca1fa21c5b2dd9e52', ref: (el) => (this._chartDiv = el) }, " "), h("div", { key: '459e38448e29eea1fa7a10de7f3f1f06b6404eab', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: 'cc655054cb3c3688c75060ebbdf6c3f8ea4ad712', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
+        return (h(Host, { key: '7659fcc4817cdfb3f19f2bd11a41464c13b5e19e', ref: (el) => (this._host = el) }, h("div", { key: '063611cf8dbb2554904d972ed3fc1f89d714772e', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: 'ad58c43c2629e7b2b97e3ad1658646e5171b1531', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '2234460c0ffab8e7d251f099f4f2d38e1e5ebede', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${((_b = this._chartData) === null || _b === void 0 ? void 0 : _b.title) ? (_c = this._chartData) === null || _c === void 0 ? void 0 : _c.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: 'b82a89d578d997ab878d44a2928e5e31773bd34f', slot: "icon" }), "Visa tabell"), h("digi-button", { key: 'b5dc532f7655bd383d0dcf42f8851edbc81b448c', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${((_d = this._chartData) === null || _d === void 0 ? void 0 : _d.title) ? (_e = this._chartData) === null || _e === void 0 ? void 0 : _e.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: 'f868d9fd2c37c247e8abdd59cf2b9342ad120fef', slot: "icon" }), "Visa diagram"), h("div", { key: '6a0f7838d86a43b46d9a036ad935f50ebb2b523f', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: '5f37b9eaf1030cd1d5b1b0360cdaaa61f953b624', class: "chartTooltip", id: this.afId }, h("div", { key: 'a89608cb64620456a165ba4fb57db823870d2231', class: "tooltipBody" }), h("digi-icon-x", { key: 'e842c2b42f6bc7d6dfdad1d1b8a7acb9f8df5a1a', class: "close" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", null)) : (h("digi-icon-caret-down", null))), h("div", { key: 'f07154ab370a948016aa30a2547c4c9b25fae03b', ref: (el) => (this._chartDiv = el) }, " "), h("div", { key: '385151df18d373779257040d298bf8c108184500', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: 'd5f07fc01a628aa2035a96d86621b6bab1e73f01', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
     }
     static get is() { return "digi-bar-chart"; }
     static get encapsulation() { return "scoped"; }

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

@@ -57,6 +57,7 @@ License: none (public domain)
   --digi--button--color--icon--function--hover: var(--digi--color--text--secondary);
 }
 .digi-code-example__example {
+  height: 100%;
   padding: var(--digi--padding--largest-2);
   overflow-x: auto;
 }

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

@@ -92,7 +92,7 @@ export class FormCategoryFilter {
         this.afHideToggle = !this.toggleHidden;
     }
     render() {
-        return (h(Host, { key: '3ac402f23844ae8c7dd1fd4ac3a5a5afa2ec8dc8' }, h("div", { key: '9afa72dd9be35e9d7bf12ef6aedf05c0c7dbc171', class: {
+        return (h(Host, { key: '74f5f06035832ce1cebf26ab089e404a649f9240' }, h("div", { key: '7e71bbdf539632985c56ba33ecba9e57b64d271e', 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: '625315577e839617bfd3e6bba0af4b82e2a5ab73' }, h("digi-button", { key: 'bebf308e6427a4d37507b1c705e5583f7d620603', afVariation: "function", afAriaExpanded: !this.collapsed, onClick: () => {
+            this.afCategories.length > this.afVisibleCollapsed && (h("div", { key: '415f044908497e9def159aeda3eeebd597ba1a6d' }, h("digi-button", { key: '176c0a91996e9134fbceaea2916344962cbb9561', 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" }))))))));
     }
@@ -162,9 +162,9 @@ export class FormCategoryFilter {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "If the list should start with a 'All categories' category"
+                            "text": "If the list should start with a button for 'All categories'"
                         }],
-                    "text": "Ifall listan ska b\u00F6rja med en 'Alla kategorier' kategori"
+                    "text": "Ifall listan ska b\u00F6rja med en knapp f\u00F6r 'Alla kategorier'"
                 },
                 "getter": false,
                 "setter": false,
@@ -185,9 +185,9 @@ export class FormCategoryFilter {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "If the 'All categories' category should start selected"
+                            "text": "If the 'All categories' category should be selected from start"
                         }],
-                    "text": "Ifall 'Alla kategorier' kategorin ska b\u00F6rja vald"
+                    "text": "Ifall 'Alla kategorier' kategorin ska vara vald fr\u00E5n start"
                 },
                 "getter": false,
                 "setter": false,
@@ -210,7 +210,7 @@ export class FormCategoryFilter {
                             "name": "en",
                             "text": "The name of the 'All categories' category"
                         }],
-                    "text": "Namnet p\u00E5 'Alla kategorier' kategorin"
+                    "text": "Namnet p\u00E5 'Alla kategorier'-kategorin"
                 },
                 "getter": false,
                 "setter": false,
@@ -254,9 +254,9 @@ export class FormCategoryFilter {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "If the list should start out collapsed"
+                            "text": "If the list should be collapsed from start"
                         }],
-                    "text": "Ifall listan ska var kollapsad fr\u00E5n b\u00F6rjan"
+                    "text": "Ifall listan ska vara kollapsad fr\u00E5n b\u00F6rjan"
                 },
                 "getter": false,
                 "setter": false,
@@ -300,9 +300,9 @@ export class FormCategoryFilter {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Show all categories and hide button to \"visa fler\"/\"visa f\u00E4rre\""
+                            "text": "Show all categories and hide button to show more/fewer"
                         }],
-                    "text": "Visa alla kategorier och d\u00F6lj knappen f\u00F6r att \"visa fler/visa f\u00E4rre"
+                    "text": "Visa alla kategorier och d\u00F6lj knappen f\u00F6r att visa fler/f\u00E4rre"
                 },
                 "getter": false,
                 "setter": false,
@@ -333,8 +333,8 @@ export class FormCategoryFilter {
                     "text": "Sker vid \u00E4ndrade valda kategorier"
                 },
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
+                    "original": "string[]",
+                    "resolved": "string[]",
                     "references": {}
                 }
             }];

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

@@ -870,6 +870,12 @@ body {
   opacity: 1;
 }
 
+.digi-form-checkbox__input:focus:not(:checked) ~ .digi-form-checkbox__label .digi-form-checkbox__box {
+  outline: 2px solid black;
+  outline-offset: 2px;
+  box-shadow: 0px 0px 0px 5px white;
+}
+
 .digi-form-checkbox__input:focus-visible ~ .digi-form-checkbox__label .digi-form-checkbox__box {
   outline: 2px solid black;
   outline-offset: 2px;

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

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { randomIdGenerator } from "../../../global/utils/randomIdGenerator";
 import { FormCheckboxVariation } from "./form-checkbox-variation.enum";
 import { FormCheckboxValidation } from "./form-checkbox-validation.enum";
@@ -7,6 +7,7 @@ import { FormCheckboxLayout } from "./form-checkbox-layout.enum";
  * @enums FormCheckboxValidation - form-checkbox-validation.enum.ts
  * @enums FormCheckboxVariation - form-checkbox-variation.enum.ts
  * @swedishName Kryssruta
+ * @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet
  */
 export class FormCheckbox {
     constructor() {
@@ -45,6 +46,13 @@ export class FormCheckbox {
     async afMGetFormControlElement() {
         return this._input;
     }
+    /**
+     * Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet.
+     * @en Listens for when focus is set on the custom element and propagates it down to the actual input element.
+     */
+    focusOnInput() {
+        this._input.focus();
+    }
     componentWillLoad() {
         this.value = this.afValue;
         this.afChecked
@@ -89,7 +97,7 @@ export class FormCheckbox {
         this.afOnInput.emit(e);
     }
     render() {
-        return (h("div", { key: '3a4c3d66ae5b6fb5edcf3db68c0454458d0e7317', class: Object.assign({ 'digi-form-checkbox': true }, this.cssModifiers) }, h("input", { key: '960e66ccc1aa15956b147369a829fdcd87ffacb0', class: "digi-form-checkbox__input", ref: (el) => {
+        return (h(Host, { key: 'd5ce6d161fa5df244c431b3690d87da9461afaa7', tabindex: -1 }, h("div", { key: '7c7f0bdab0c3efb3721373cf918f488737f62329', class: Object.assign({ 'digi-form-checkbox': true }, this.cssModifiers) }, h("input", { key: '2a3640307990d9f0b23f123d3032004912c5f0a0', 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);
@@ -97,7 +105,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: '49f8b41478bf43aff3a069dcced39dadd77d56a0', htmlFor: this.afId, class: "digi-form-checkbox__label" }, h("span", { key: '3d15477d96fe56f8a3e75e15f24f71c4fb279da9', class: "digi-form-checkbox__box" }), this.afLabel), !!this.afDescription && (h("p", { key: '68ea2e81febd0d60c3209d8227eed4d0ee165db2', 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: 'd1802bf01ee6ec34e59bbc08376a70356bc83dcc', htmlFor: this.afId, class: "digi-form-checkbox__label" }, h("span", { key: '0bc285971edcc970d8f08fcb263b8695502ee0ec', class: "digi-form-checkbox__box" }), this.afLabel), !!this.afDescription && (h("p", { key: 'c5e15b2070e28c9fe38d09ce7da85b59c9c0c0b5', id: `${this.afId}-description`, class: "digi-form-checkbox__description" }, this.afDescription)))));
     }
     static get is() { return "digi-form-checkbox"; }
     static get encapsulation() { return "scoped"; }
@@ -368,12 +376,12 @@ export class FormCheckbox {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Internal mirror of afValue. \nDo not use directly \u2014 use afValue instead."
+                            "text": "Internal mirror of afValue.\nDo not use directly \u2014 use afValue instead."
                         }, {
                             "name": "ignore",
                             "text": undefined
                         }],
-                    "text": "Intern spegling av afValue. \nSka inte anv\u00E4ndas direkt \u2014 anv\u00E4nd afValue ist\u00E4llet."
+                    "text": "Intern spegling av afValue.\nSka inte anv\u00E4ndas direkt \u2014 anv\u00E4nd afValue ist\u00E4llet."
                 },
                 "getter": false,
                 "setter": false,
@@ -551,8 +559,11 @@ export class FormCheckbox {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "TODO"
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Denna prop kommer att tas bort i slutet av juli"
+                        }],
+                    "text": "Tabindex"
                 },
                 "getter": false,
                 "setter": false,
@@ -752,4 +763,13 @@ export class FormCheckbox {
                 "methodName": "onAfCheckedChanged"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "focus",
+                "method": "focusOnInput",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

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

@@ -4,12 +4,12 @@
   --digi--form-error-list--item--padding: var(--digi--padding--smaller) 0 0 0;
   --digi--form-error-list--item--margin: 0;
 }
-:host .digi-form-error-list__list {
+:host .digi-form-error-list ul {
   list-style: none;
   padding: var(--digi--form-error-list--list--padding);
   margin: var(--digi--form-error-list--list--margin);
 }
-:host .digi-form-error-list__item {
+:host .digi-form-error-list ul > li {
   list-style: none;
   padding: var(--digi--form-error-list--item--padding);
   margin: var(--digi--form-error-list--item--margin);