@designsystem-se/af 34.1.0 → 34.2.0

package/components/digi-chart-line.js

@@ -1,12 +1,12 @@
 import { p as proxyCustomElement, H, h } from './p-f124fce4.js';
-import { _ as _t } from './p-42aa440f.js';
+import { _ as _t } from './p-08cf2c0e.js';
 import { s as select, f as dispatch, r as range, a as axisLeft, g as formatLocale, p as polyInOut, b as axisBottom, l as linear, m as max, d as min, o as ordinal, c as interpolate, e as linear$1 } from './p-c2ee26cb.js';
 import { r as randomIdGenerator } from './p-ffe5c0e8.js';
 import { d as defineCustomElement$6 } from './p-68dbf3ef.js';
-import { d as defineCustomElement$5 } from './p-224094ec.js';
-import { d as defineCustomElement$4 } from './p-f215529b.js';
-import { d as defineCustomElement$3 } from './p-36fbdb2e.js';
-import { d as defineCustomElement$2 } from './p-10503e1d.js';
+import { d as defineCustomElement$5 } from './p-4a45fa2d.js';
+import { d as defineCustomElement$4 } from './p-0d7b08db.js';
+import { d as defineCustomElement$3 } from './p-0176102e.js';
+import { d as defineCustomElement$2 } from './p-8cc46a2b.js';
 
 function sourceEvent(event) {
   let sourceEvent;
@@ -448,8 +448,6 @@ function constant(x) {
   };
 }
 
-const cos = Math.cos;
-const sin = Math.sin;
 const sqrt = Math.sqrt;
 const pi = Math.PI;
 const tau = 2 * pi;
@@ -579,41 +577,22 @@ const circle = {
   }
 };
 
-const tan30 = sqrt(1 / 3);
-const tan30_2 = tan30 * 2;
-
-const diamond = {
+const diamond2 = {
   draw(context, size) {
-    const y = sqrt(size / tan30_2);
-    const x = y * tan30;
-    context.moveTo(0, -y);
-    context.lineTo(x, 0);
-    context.lineTo(0, y);
-    context.lineTo(-x, 0);
+    const r = sqrt(size) * 0.62625;
+    context.moveTo(0, -r);
+    context.lineTo(r, 0);
+    context.lineTo(0, r);
+    context.lineTo(-r, 0);
     context.closePath();
   }
 };
 
-const ka = 0.89081309152928522810;
-const kr = sin(pi / 10) / sin(7 * pi / 10);
-const kx = sin(tau / 10) * kr;
-const ky = -cos(tau / 10) * kr;
-
-const star = {
+const square = {
   draw(context, size) {
-    const r = sqrt(size * ka);
-    const x = kx * r;
-    const y = ky * r;
-    context.moveTo(0, -r);
-    context.lineTo(x, y);
-    for (let i = 1; i < 5; ++i) {
-      const a = tau * i / 5;
-      const c = cos(a);
-      const s = sin(a);
-      context.lineTo(s * r, -c * r);
-      context.lineTo(c * x - s * y, s * x + c * y);
-    }
-    context.closePath();
+    const w = sqrt(size);
+    const x = -w / 2;
+    context.rect(x, x, w, w);
   }
 };
 
@@ -629,6 +608,30 @@ const triangle = {
   }
 };
 
+const c = -0.5;
+const s = sqrt(3) / 2;
+const k = 1 / sqrt(12);
+const a = (k / 2 + 1) * 3;
+
+const wye = {
+  draw(context, size) {
+    const r = sqrt(size / a);
+    const x0 = r / 2, y0 = r * k;
+    const x1 = x0, y1 = r * k + r;
+    const x2 = -x1, y2 = y1;
+    context.moveTo(x0, y0);
+    context.lineTo(x1, y1);
+    context.lineTo(x2, y2);
+    context.lineTo(c * x0 - s * y0, s * x0 + c * y0);
+    context.lineTo(c * x1 - s * y1, s * x1 + c * y1);
+    context.lineTo(c * x2 - s * y2, s * x2 + c * y2);
+    context.lineTo(c * x0 + s * y0, c * y0 - s * x0);
+    context.lineTo(c * x1 + s * y1, c * y1 - s * x1);
+    context.lineTo(c * x2 + s * y2, c * y2 - s * x2);
+    context.closePath();
+  }
+};
+
 function Symbol(type, size) {
   let context = null,
       path = withPath(symbol);
@@ -710,14 +713,17 @@ function basis(context) {
   return new Basis(context);
 }
 
-const chartLineCss = ".sc-digi-chart-line-h{display:block;height:100%;width:100%;position:relative}.sc-digi-chart-line-h .digi-chart-line.sc-digi-chart-line{color:var(--MY-PROP);height:100%;width:100%;min-height:fit-content}.buttonWrapper.sc-digi-chart-line{--digi--button--padding--medium:0 0 0.75rem 0}.chart.sc-digi-chart-line{box-sizing:content-box;width:auto}.chartTitle.sc-digi-chart-line{--digi--typography--h2--margin:0.5rem;--digi--typography--h3--margin:0.5rem;--digi--typography--h4--margin:0.5rem;--digi--typography--h5--margin:0.5rem;--digi--typography--h6--margin:0.5rem;display:flex;justify-content:flex-start;flex-direction:column;align-items:left;text-align:left;padding-bottom:1rem;flex-grow:2}.close.sc-digi-chart-line{--digi--icon--color:rgb(245, 245, 245);cursor:pointer;margin-top:-5px}.legend.sc-digi-chart-line{display:flex;flex-direction:row;flex-wrap:no-wrap;gap:0.5rem;margin:0.5rem 0;margin-top:1.25rem;height:2.675rem;overflow-x:auto;overflow-y:hidden;cursor:default;max-width:100%}.chip.sc-digi-chart-line{box-sizing:border-box}.legend.sc-digi-chart-line::-webkit-scrollbar,.table.sc-digi-chart-line::-webkit-scrollbar{height:10px;width:10px}.legend.sc-digi-chart-line::-webkit-scrollbar-track,.table.sc-digi-chart-line::-webkit-scrollbar-track{background:whitesmoke;border-radius:4px}.legend.sc-digi-chart-line::-webkit-scrollbar-thumb,.table.sc-digi-chart-line::-webkit-scrollbar-thumb{background-color:lightgray;border-radius:4px;border:0}.chartTooltip.sc-digi-chart-line{box-sizing:border-box;position:absolute;background-color:rgba(10, 10, 10, 0.9);color:white;padding:5px 10px;padding-right:5px;border-radius:4px;display:flex;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;display:none}.scChartStatus.sc-digi-chart-line{border:0;clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.table.sc-digi-chart-line{display:none;overflow-y:scroll;height:fit-content;border-radius:4px;padding:0.25rem;background:linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top, linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center bottom;background-repeat:no-repeat;background-size:100% 40px, 100% 40px, 100% 14px, 100% 14px;background-attachment:local, local, scroll, scroll}.tableIcon.sc-digi-chart-line{--digi--icon--color:var(--digi--global--color--neutral--grayscale--darker);width:26px;height:26px;pointer-events:none}.tableIcon.sc-digi-chart-line:hover{--digi--icon--color:var(\n    --digi--global--color--neutral--grayscale--darkest-3\n  )}.tooltipBody.sc-digi-chart-line{display:flex;flex-direction:column;margin-right:5px}.topWrapper.sc-digi-chart-line{display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}";
+const chartLineCss = ".sc-digi-chart-line-h{display:block;height:100%;width:100%;position:relative}.sc-digi-chart-line-h .digi-chart-line.sc-digi-chart-line{color:var(--MY-PROP);height:100%;width:100%;min-height:fit-content}.buttonWrapper.sc-digi-chart-line{--digi--button--padding--medium:0 0 0.75rem 0}.chart.sc-digi-chart-line{box-sizing:content-box;width:auto}.chartTitle.sc-digi-chart-line{--digi--typography--h2--margin:0.5rem;--digi--typography--h3--margin:0.5rem;--digi--typography--h4--margin:0.5rem;--digi--typography--h5--margin:0.5rem;--digi--typography--h6--margin:0.5rem;display:flex;justify-content:flex-start;flex-direction:column;align-items:left;text-align:left;padding-bottom:1rem;flex-grow:2}.close.sc-digi-chart-line{--digi--icon--color:rgb(245, 245, 245);cursor:pointer;margin-top:-5px}.legend.sc-digi-chart-line{display:flex;flex-direction:row;flex-wrap:no-wrap;gap:0.5rem;margin:0.5rem 0;margin-top:1.25rem;height:2.675rem;overflow-x:auto;overflow-y:hidden;cursor:default;max-width:100%}.chip.sc-digi-chart-line{box-sizing:border-box}.legend.sc-digi-chart-line::-webkit-scrollbar,.table.sc-digi-chart-line::-webkit-scrollbar{height:10px;width:10px}.legend.sc-digi-chart-line::-webkit-scrollbar-track,.table.sc-digi-chart-line::-webkit-scrollbar-track{background:whitesmoke;border-radius:4px}.legend.sc-digi-chart-line::-webkit-scrollbar-thumb,.table.sc-digi-chart-line::-webkit-scrollbar-thumb{background-color:lightgray;border-radius:4px;border:0}.chartTooltip.sc-digi-chart-line{box-sizing:border-box;position:absolute;background-color:rgba(10, 10, 10, 0.9);color:white;padding:5px 10px;padding-right:5px;border-radius:4px;display:flex;flex-direction:column;align-items:flex-start;box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;font-size:14px;display:none}.scChartStatus.sc-digi-chart-line{border:0;clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.table.sc-digi-chart-line{display:none;overflow-y:scroll;height:fit-content;border-radius:4px;padding:0.25rem;background:linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top, linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center bottom;background-repeat:no-repeat;background-size:100% 40px, 100% 40px, 100% 14px, 100% 14px;background-attachment:local, local, scroll, scroll}.tableIcon.sc-digi-chart-line{--digi--icon--color:var(--digi--global--color--neutral--grayscale--darker);width:26px;height:26px;pointer-events:none}.tableIcon.sc-digi-chart-line:hover{--digi--icon--color:var(\n    --digi--global--color--neutral--grayscale--darkest-3\n  )}.tooltipHead.sc-digi-chart-line{display:flex;width:100%;justify-content:space-between;margin-bottom:0.25rem;flex-direction:row}.tooltipBody.sc-digi-chart-line{display:flex;flex-direction:column;padding-right:5px;max-height:100px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgb(245, 245, 245) transparent}.topWrapper.sc-digi-chart-line{display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}";
 const DigiChartLineStyle0 = chartLineCss;
 
 const ChartLine = /*@__PURE__*/ proxyCustomElement(class ChartLine extends H {
     constructor() {
         super();
         this.__registerHost();
-        this._lineTypes = [null, '1.0, 7.0', '9.0, 7.0'];
+        this._lineTypes = [null, '18, 7', '8,7', '2,6'];
+        this._strokeWidth = 2.75;
+        this._lineCap = 'round';
+        this._strokeGlyphs = [circle, triangle, square, wye, diamond2];
         this._toggled = false;
         this._tickSize = 0;
         // Selection list from legend chips
@@ -736,8 +742,6 @@ const ChartLine = /*@__PURE__*/ proxyCustomElement(class ChartLine extends H {
         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 = {
@@ -861,7 +865,9 @@ const ChartLine = /*@__PURE__*/ proxyCustomElement(class ChartLine extends H {
             })
                 .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')
@@ -870,23 +876,23 @@ const ChartLine = /*@__PURE__*/ proxyCustomElement(class ChartLine extends H {
                 .attr('height', 28)
                 .append('line')
                 .attr('stroke', (d) => this.colorFunction(d))
-                .attr('stroke-linecap', 'round')
-                .attr('stroke-width', 6)
+                .attr('stroke-linecap', this._lineCap)
+                .attr('stroke-width', 4)
                 .attr('stroke-dasharray', (d, i) => this.dashFunction(d, i))
                 .attr('x1', 3)
                 .attr('x2', 29)
                 .attr('y1', '50%')
                 .attr('y2', '50%');
             // Only if data contains many lines
-            if (this._chartData.data.series.length <= this.lineTypes)
+            if (this._chartData.data.series.length <= this._lineTypes.length)
                 return;
             container
                 .selectAll('.legendSvg')
                 .filter((...[, i]) => {
-                return i > 2;
+                return i > (this._lineTypes.length - 1);
             })
                 .append('path')
-                .attr('d', (...[, i]) => this.symbolType(i, 110))
+                .attr('d', (...[, i]) => this.symbolType(i, 70))
                 .attr('fill', (d) => this.colorFunction(d))
                 .attr('transform', 'translate(16,14)');
         };
@@ -907,6 +913,12 @@ const ChartLine = /*@__PURE__*/ proxyCustomElement(class ChartLine extends H {
                 }
                 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')
@@ -980,7 +992,8 @@ const ChartLine = /*@__PURE__*/ proxyCustomElement(class ChartLine extends H {
                 .selectAll('.linePath')
                 .transition('highlight')
                 .duration(150)
-                .attr('stroke', (d) => this.colorFunction(d));
+                .attr('stroke', (d) => this.colorFunction(d))
+                .attr('stroke-width', this._strokeWidth);
             this._lineChartContainer
                 .selectAll('.symbolGroup')
                 .selectAll('.symbol')
@@ -1002,8 +1015,8 @@ const ChartLine = /*@__PURE__*/ proxyCustomElement(class ChartLine extends H {
                 .join('path')
                 .attr('class', 'linePath')
                 .attr('stroke', (d) => this.colorFunction(d))
-                .attr('stroke-linecap', 'round')
-                .attr('stroke-width', (d) => (d.length > 1 ? 4 : 6))
+                .attr('stroke-linecap', this._lineCap)
+                .attr('stroke-width', (d) => (d.length > 1 ? this._strokeWidth : 4))
                 .attr('stroke-dasharray', (d, i) => d.length > 1 ? this.dashFunction(d, i) : null)
                 .attr('fill', 'none')
                 .attr('d', (d) => this._LineFunc(d.line));
@@ -1031,7 +1044,9 @@ const ChartLine = /*@__PURE__*/ proxyCustomElement(class ChartLine extends H {
             // Remove all old symbols
             this._lineChartContainer
                 .selectAll('.symbolGroup')
-                .data(this.reshapeData(this._chartData.data.series.filter((...[, index]) => index > 2)))
+                .data(this.reshapeData(this._chartData.data.series.filter(
+            // Symbols are only needed, when we are out of line types
+            (...[, index]) => index > (this._lineTypes.length - 1))))
                 .join((enter) => {
                 if (!transition) {
                     enter
@@ -1093,6 +1108,7 @@ const ChartLine = /*@__PURE__*/ proxyCustomElement(class ChartLine extends H {
                         .selectAll('.symbol')
                         .data((d, i) => {
                         return d.line.map((num) => {
+                            console.log(d.title, i);
                             if (num[1] != null)
                                 return {
                                     val: num[1],
@@ -1159,20 +1175,11 @@ const ChartLine = /*@__PURE__*/ proxyCustomElement(class ChartLine extends H {
                 }
             }, (exit) => exit.remove());
         };
-        // Returns a symbol type given a index, currently we have support for 10 lines
+        // Returns a symbol type given a index
         this.symbolType = (index, size) => {
-            if (index < this.lineTypes)
-                return Symbol()
-                    .type(circle)
-                    .size(size ? size : 90)();
-            else if (index >= this.lineTypes && index < this.lineTypes * 2)
-                return Symbol()
-                    .type(diamond)
-                    .size(size ? size : 90)();
-            else
-                return Symbol()
-                    .type(star)
-                    .size(size ? size : 90)();
+            return Symbol()
+                .type(this._strokeGlyphs[Math.trunc(index / this._lineTypes.length)])
+                .size(size ? size : 60)();
         };
         // Setting dimension variable
         this.setDims = (onlyHeight = false) => {
@@ -1345,7 +1352,8 @@ const ChartLine = /*@__PURE__*/ proxyCustomElement(class ChartLine extends H {
             // Heading
             this._tooltip.style('display', 'flex');
             const tooltipBody = this._tooltip.select('.tooltipBody');
-            tooltipBody
+            const tooltipHead = this._tooltip.select('.tooltipHead');
+            tooltipHead
                 .select(this._tooltipHeading)
                 .style('margin', '0 0.75rem 0 0 ')
                 .html(() => {
@@ -1454,7 +1462,7 @@ const ChartLine = /*@__PURE__*/ proxyCustomElement(class ChartLine extends H {
             this._xAxisHandle.select('.domain').attr('display', 'none');
             this._xAxisHandle
                 .selectAll('line')
-                .attr('stroke-linecap', 'round')
+                .attr('stroke-linecap', this._lineCap)
                 .attr('stroke', getComputedStyle(document.documentElement)
                 .getPropertyValue('--digi--global--color--neutral--grayscale--darkest-3')
                 .trim()
@@ -1682,8 +1690,8 @@ const ChartLine = /*@__PURE__*/ proxyCustomElement(class ChartLine extends H {
             'h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1);
         // Add heading placeholder for heading
         this._tooltip
-            .selectAll('.tooltipBody')
-            .append(this._tooltipHeading) // increment heading level by one
+            .selectAll('.tooltipHead')
+            .insert(this._tooltipHeading, ':first-child') // increment heading level by one
             .style('margin', '0 0.75rem')
             .style('font-weight', '500');
         this._maxHeight = select(this._host)
@@ -1754,8 +1762,8 @@ const ChartLine = /*@__PURE__*/ proxyCustomElement(class ChartLine extends H {
             'h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1);
         // Add heading placeholder for heading
         this._tooltip
-            .selectAll('.tooltipBody')
-            .append(this._tooltipHeading) // increment heading level by one
+            .selectAll('.tooltipHead')
+            .insert(this._tooltipHeading, ':first-child') // increment heading level by one
             .style('margin', '0 0.75rem')
             .style('font-weight', '500');
         this._maxHeight = select(this._host)
@@ -1836,8 +1844,8 @@ const ChartLine = /*@__PURE__*/ proxyCustomElement(class ChartLine extends H {
                 .join('path')
                 .attr('class', 'linePath')
                 .attr('stroke', 'lightgray')
-                .attr('stroke-linecap', 'round')
-                .attr('stroke-width', 4)
+                .attr('stroke-linecap', this._lineCap)
+                .attr('stroke-width', this._strokeWidth)
                 .attr('fill', 'none')
                 .attr('d', (d) => LineFunc(d))
                 .transition()
@@ -1994,8 +2002,8 @@ const ChartLine = /*@__PURE__*/ proxyCustomElement(class ChartLine extends H {
                     .join('path')
                     .attr('class', 'linePath')
                     .attr('stroke', (d) => this.colorFunction(d))
-                    .attr('stroke-linecap', 'round')
-                    .attr('stroke-width', 4)
+                    .attr('stroke-linecap', this._lineCap)
+                    .attr('stroke-width', this._strokeWidth)
                     .attr('fill', 'none')
                     .attr('stroke-dasharray', this.dashFunction)
                     .attr('stroke-dashoffset', null)
@@ -2034,8 +2042,8 @@ const ChartLine = /*@__PURE__*/ proxyCustomElement(class ChartLine extends H {
                 .ease(polyInOut)
                 .attr('class', 'linePath')
                 .attr('stroke', (d) => this.colorFunction(d))
-                .attr('stroke-linecap', 'round')
-                .attr('stroke-width', (d) => (d.length > 1 ? 4 : 6))
+                .attr('stroke-linecap', this._lineCap)
+                .attr('stroke-width', (d) => (d.length > 1 ? this._strokeWidth : 4))
                 .attr('fill', 'none')
                 .attr('stroke-dasharray', (d, i) => d.length > 1 ? this.dashFunction(d, i) : null)
                 .attr('d', (d) => this._LineFunc(d.line));
@@ -2065,7 +2073,8 @@ const ChartLine = /*@__PURE__*/ proxyCustomElement(class ChartLine extends H {
                 .attr('y1', this._yAxis(this._maxVal))
                 .attr('y2', this.dims.height - this.margin.bottom);
             const tooltipBody = this._tooltip.select('.tooltipBody');
-            tooltipBody
+            const tooltipHead = this._tooltip.select('.tooltipHead');
+            tooltipHead
                 .select(this._tooltipHeading)
                 .style('margin', '0 0.75rem')
                 .html(() => {
@@ -2304,7 +2313,7 @@ const ChartLine = /*@__PURE__*/ proxyCustomElement(class ChartLine extends H {
             heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}>`;
         else
             heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}><p>${this._chartData.subTitle}</p>`;
-        return (h("host", { key: '23524b77e8aa2bb1cae912a08c4f35791074a769', ref: (el) => (this._host = el) }, h("div", { key: '75c7c1a8be55953b5547c5a3dd956027af73fbd1', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: '76e755f765d16611ecf82c2980f660f28cb0239a', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '6665f4a0c7f9ea09b938bd690f1ad2f2838f0c9c', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: '05aee665d9cd4d743c37cda816a3f5a3fe3128f5', slot: "icon" }), "Visa tabell"), h("digi-button", { key: '9f42b7ac02cb3f45d5d2503a9e12836bd76ce862', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: '43e9db95020bf3d24c68a24b269a179d70d8d056', slot: "icon" }), "Visa diagram"), h("div", { key: 'fc14ac6bf87466a5655dc5416bac08d0627a41ef', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: 'd65b4ea0b2a3a0abdc7a94e1cfb82e425ba50d2e', class: "chartTooltip", id: this.afId }, h("div", { key: '0ecff411dd746d6f21b53ae0d39729a55bedd957', class: "tooltipBody" }), h("digi-icon-x", { key: '9dd0ba013b81972e3e74b2e068b808f443ba7bf4', class: "close" }), ' '), h("div", { key: '371ba97658cd0e4f3a251bff860c45a43e9da9f1', class: "chart", ref: (el) => (this._chartDiv = el) }), h("div", { key: 'b4f5e4c1bc605f857910ec423f9de0285ac27e88', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: '6bcc5645b85e62d321a2c37cd365b2d36b577b9a', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
+        return (h("host", { key: '0658f0d7c104a950b8e93c0cc57a5899cc2e144e', ref: (el) => (this._host = el) }, h("div", { key: '89ec346d14d3c8b162c5eae7b741e237a4c1305c', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: 'af1f2d126d40cb2ae39fa0e3b777a5086eda8e5a', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '42a3dd64d366b92fd6954182f3d96de25ff0c7d8', 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: '1951b88ba6d95e1a8111679b14e528f85d64ae9f', slot: "icon" }), "Visa tabell"), h("digi-button", { key: '12176baf97dd6d41554621fa67c40342f634defd', 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: '2328aecb3ff6d0853e96e4d5a6c17a9331c41d20', slot: "icon" }), "Visa diagram"), h("div", { key: '156a8eb33d9fd0c45279277efd036c8ed270b4d8', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: '862fa6309cf3b4aa67379b358fa67fedad34556f', class: "chartTooltip", id: this.afId }, h("div", { key: 'c5b96564be226b735150bb9f5130eee9842d1883', class: "tooltipHead" }, h("digi-icon-x", { key: '30905ec1fefc5e3e28b268d255f0d6dde7c87f62', class: "close" }), ' '), h("div", { key: 'eb35ac22dbd2f1f37b01c9b2753832c448a682fd', class: "tooltipBody" })), h("div", { key: '02bba9c0f0af9e105cbaaa76f2a60071d0dc9685', class: "chart", ref: (el) => (this._chartDiv = el) }), h("div", { key: '26514cab5bcc0b2d89a564542df4ced64b01a1b3', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: 'dca2127b11fc2f963657cc7439cc29453c1465aa', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
     }
     get element() { return this; }
     static get watchers() { return {

package/components/digi-code-block.js

@@ -1,4 +1,4 @@
-import { C as CodeBlock, d as defineCustomElement$1 } from './p-dc9fbc23.js';
+import { C as CodeBlock, d as defineCustomElement$1 } from './p-b789243d.js';
 
 const DigiCodeBlock = CodeBlock;
 const defineCustomElement = defineCustomElement$1;

package/components/digi-code-example.js

@@ -1,14 +1,14 @@
 import { p as proxyCustomElement, H, h } from './p-f124fce4.js';
 import { c as CodeBlockVariation, e as CodeExampleVariation, d as CodeExampleLanguage } from './p-b3a4fa4a.js';
 import { b as ButtonVariation, B as ButtonSize } from './p-490d2653.js';
-import { _ as _t } from './p-42aa440f.js';
+import { _ as _t } from './p-08cf2c0e.js';
 import { r as randomIdGenerator } from './p-ffe5c0e8.js';
 import { d as defineCustomElement$7 } from './p-68dbf3ef.js';
-import { d as defineCustomElement$6 } from './p-dc9fbc23.js';
-import { d as defineCustomElement$5 } from './p-d593f0d5.js';
-import { d as defineCustomElement$4 } from './p-e22aa82c.js';
-import { d as defineCustomElement$3 } from './p-2c789cac.js';
-import { d as defineCustomElement$2 } from './p-6c2ae1ce.js';
+import { d as defineCustomElement$6 } from './p-b789243d.js';
+import { d as defineCustomElement$5 } from './p-cf6f3fb1.js';
+import { d as defineCustomElement$4 } from './p-f033f1bc.js';
+import { d as defineCustomElement$3 } from './p-e52962b0.js';
+import { d as defineCustomElement$2 } from './p-734d320a.js';
 
 const codeExampleCss = ".digi--util--fs--xs.sc-digi-code-example{font-size:var(--digi--global--typography--font-size--small) !important}.digi--util--fs--s.sc-digi-code-example{font-size:calc(var(--digi--global--typography--font-size--small) + 1px) !important}.digi--util--fs--m.sc-digi-code-example{font-size:var(--digi--global--typography--font-size--base) !important}.digi--util--fs--l.sc-digi-code-example{font-size:var(--digi--global--typography--font-size--large) !important}.digi--util--fw--sb.sc-digi-code-example{font-weight:var(--digi--global--typography--font-weight--semibold) !important}.digi--util--pt--1.sc-digi-code-example{padding-top:var(--digi--global--spacing--smallest-2) !important}.digi--util--pt--10.sc-digi-code-example{padding-top:var(--digi--global--spacing--smallest) !important}.digi--util--pt--20.sc-digi-code-example{padding-top:var(--digi--global--spacing--base) !important}.digi--util--pt--30.sc-digi-code-example{padding-top:var(--digi--global--spacing--largest-2) !important}.digi--util--pt--40.sc-digi-code-example{padding-top:var(--digi--global--spacing--largest-4) !important}.digi--util--pt--50.sc-digi-code-example{padding-top:2.5rem !important}.digi--util--pt--60.sc-digi-code-example{padding-top:var(--digi--global--spacing--largest-5) !important}.digi--util--pt--70.sc-digi-code-example{padding-top:var(--digi--global--spacing--largest-6) !important}.digi--util--pt--80.sc-digi-code-example{padding-top:4.5rem !important}.digi--util--pt--90.sc-digi-code-example{padding-top:5rem !important}.digi--util--pb--1.sc-digi-code-example{padding-bottom:var(--digi--global--spacing--smallest-2) !important}.digi--util--pb--10.sc-digi-code-example{padding-bottom:var(--digi--global--spacing--smallest) !important}.digi--util--pb--20.sc-digi-code-example{padding-bottom:var(--digi--global--spacing--base) !important}.digi--util--pb--30.sc-digi-code-example{padding-bottom:var(--digi--global--spacing--largest-2) !important}.digi--util--pb--40.sc-digi-code-example{padding-bottom:var(--digi--global--spacing--largest-4) !important}.digi--util--pb--50.sc-digi-code-example{padding-bottom:2.5rem !important}.digi--util--pb--60.sc-digi-code-example{padding-bottom:var(--digi--global--spacing--largest-5) !important}.digi--util--pb--70.sc-digi-code-example{padding-bottom:var(--digi--global--spacing--largest-6) !important}.digi--util--pb--80.sc-digi-code-example{padding-bottom:4.5rem !important}.digi--util--pb--90.sc-digi-code-example{padding-bottom:5rem !important}.digi--util--p--1.sc-digi-code-example{padding:var(--digi--global--spacing--smallest-2) !important}.digi--util--p--10.sc-digi-code-example{padding:var(--digi--global--spacing--smallest) !important}.digi--util--p--20.sc-digi-code-example{padding:var(--digi--global--spacing--base) !important}.digi--util--p--30.sc-digi-code-example{padding:var(--digi--global--spacing--largest-2) !important}.digi--util--p--40.sc-digi-code-example{padding:var(--digi--global--spacing--largest-4) !important}.digi--util--p--50.sc-digi-code-example{padding:2.5rem !important}.digi--util--p--60.sc-digi-code-example{padding:var(--digi--global--spacing--largest-5) !important}.digi--util--p--70.sc-digi-code-example{padding:var(--digi--global--spacing--largest-6) !important}.digi--util--p--80.sc-digi-code-example{padding:4.5rem !important}.digi--util--p--90.sc-digi-code-example{padding:5rem !important}.digi--util--ptb--1.sc-digi-code-example{padding-top:var(--digi--global--spacing--smallest-2) !important;padding-bottom:var(--digi--global--spacing--smallest-2) !important}.digi--util--ptb--10.sc-digi-code-example{padding-top:var(--digi--global--spacing--smallest) !important;padding-bottom:var(--digi--global--spacing--smallest) !important}.digi--util--ptb--20.sc-digi-code-example{padding-top:var(--digi--global--spacing--base) !important;padding-bottom:var(--digi--global--spacing--base) !important}.digi--util--ptb--30.sc-digi-code-example{padding-top:var(--digi--global--spacing--largest-2) !important;padding-bottom:var(--digi--global--spacing--largest-2) !important}.digi--util--ptb--40.sc-digi-code-example{padding-top:var(--digi--global--spacing--largest-4) !important;padding-bottom:var(--digi--global--spacing--largest-4) !important}.digi--util--ptb--50.sc-digi-code-example{padding-top:2.5rem !important;padding-bottom:2.5rem !important}.digi--util--ptb--60.sc-digi-code-example{padding-top:var(--digi--global--spacing--largest-5) !important;padding-bottom:var(--digi--global--spacing--largest-5) !important}.digi--util--ptb--70.sc-digi-code-example{padding-top:var(--digi--global--spacing--largest-6) !important;padding-bottom:var(--digi--global--spacing--largest-6) !important}.digi--util--ptb--80.sc-digi-code-example{padding-top:4.5rem !important;padding-bottom:4.5rem !important}.digi--util--ptb--90.sc-digi-code-example{padding-top:5rem !important;padding-bottom:5rem !important}.digi--util--plr--1.sc-digi-code-example{padding-left:var(--digi--global--spacing--smallest-2) !important;padding-right:var(--digi--global--spacing--smallest-2) !important}.digi--util--plr--10.sc-digi-code-example{padding-left:var(--digi--global--spacing--smallest) !important;padding-right:var(--digi--global--spacing--smallest) !important}.digi--util--plr--20.sc-digi-code-example{padding-left:var(--digi--global--spacing--base) !important;padding-right:var(--digi--global--spacing--base) !important}.digi--util--plr--30.sc-digi-code-example{padding-left:var(--digi--global--spacing--largest-2) !important;padding-right:var(--digi--global--spacing--largest-2) !important}.digi--util--plr--40.sc-digi-code-example{padding-left:var(--digi--global--spacing--largest-4) !important;padding-right:var(--digi--global--spacing--largest-4) !important}.digi--util--plr--50.sc-digi-code-example{padding-left:2.5rem !important;padding-right:2.5rem !important}.digi--util--plr--60.sc-digi-code-example{padding-left:var(--digi--global--spacing--largest-5) !important;padding-right:var(--digi--global--spacing--largest-5) !important}.digi--util--plr--70.sc-digi-code-example{padding-left:var(--digi--global--spacing--largest-6) !important;padding-right:var(--digi--global--spacing--largest-6) !important}.digi--util--plr--80.sc-digi-code-example{padding-left:4.5rem !important;padding-right:4.5rem !important}.digi--util--plr--90.sc-digi-code-example{padding-left:5rem !important;padding-right:5rem !important}.digi--util--sr-only.sc-digi-code-example{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.digi--util--hidden.sc-digi-code-example{display:none}.sc-digi-code-example-h{--digi--code-example--background:var(--digi--color--background--primary);--digi--code-example--controls--width:16.25rem;display:block}.digi-code-example.sc-digi-code-example{background-size:20px 20px;background-position:0 0, 0 10px, 10px -10px, -10px 0px;border:var(--digi--border-width--primary) solid var(--digi--color--border--neutral-2);height:100%;display:flex;flex-direction:row;border-radius:0.3rem;position:relative}@media (max-width: 35.9375rem){.digi-code-example.sc-digi-code-example{min-width:360px}}.digi-code-example--light.sc-digi-code-example{background-color:#ffffff;background-image:linear-gradient(45deg, #efefef 25%, transparent 25%), linear-gradient(-45deg, #efefef 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #efefef 75%), linear-gradient(-45deg, transparent 75%, #efefef 75%)}.digi-code-example--dark.sc-digi-code-example{background-color:#787777;background-image:linear-gradient(45deg, #666666 25%, transparent 25%), linear-gradient(-45deg, #666666 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #666666 75%), linear-gradient(-45deg, transparent 75%, #666666 75%)}.digi-code-example__container.sc-digi-code-example{display:flex;flex-direction:column;justify-content:space-between;flex-grow:1;position:relative}.digi-code-example--no-controls.sc-digi-code-example{flex-direction:column}.digi-code-example--no-controls.sc-digi-code-example .digi-code-example__copy-button.sc-digi-code-example{margin-top:0;align-self:flex-end;margin-bottom:0.2rem;z-index:1;position:absolute;bottom:0;right:0}.digi-code-example--no-controls.sc-digi-code-example .digi-code-example__copy-button--dark.sc-digi-code-example{--digi--button--color--text--function--default:var(\n    --digi--color--text--inverted\n  );--digi--button--color--text--function--hover:var(\n    --digi--color--text--inverted\n  );--digi--button--color--icon--function--default:var(\n    --digi--color--text--inverted\n  );--digi--button--color--icon--function--hover:var(\n    --digi--color--text--inverted\n  )}.digi-code-example__example.sc-digi-code-example{padding:var(--digi--padding--largest-2);overflow-x:auto}@media (max-width: 48rem){.digi-code-example__example.sc-digi-code-example{padding:var(--digi--padding--medium)}}@media (max-width: 35.9375rem){.digi-code-example__example.sc-digi-code-example{padding:var(--digi--padding--small)}}.digi-code-example__copy-button.sc-digi-code-example{align-self:start;margin-top:var(--digi--padding--large);margin-right:var(--digi--padding--small)}.digi-code-example__codeblock.sc-digi-code-example digi-code-block.sc-digi-code-example{--digi--code-block--border-radius:0;--digi--code-block--border:none}.digi-code-example__controls.sc-digi-code-example{padding:var(--digi--padding--medium);background:var(--digi--color--background--neutral-6);display:flex;flex:0 var(--digi--code-example--controls--width);flex-direction:column;align-self:stretch;flex-shrink:0;justify-content:space-between;gap:var(--digi--gutter--medium)}@media (max-width: 48rem){.digi-code-example__controls.sc-digi-code-example{padding:var(--digi--padding--smaller)}}.digi-code-example__controls[hidden].sc-digi-code-example{display:none}.digi-code-example--inactive.sc-digi-code-example .digi-code-example__code.sc-digi-code-example{display:flex;flex-direction:column;flex-grow:1}.digi-code-example--inactive.sc-digi-code-example .digi-code-example__codeblock.sc-digi-code-example{flex-grow:1;height:64px;overflow-y:hidden;position:relative}.digi-code-example__code-expand.sc-digi-code-example{display:flex;align-items:center;justify-content:center;gap:var(--digi--gutter--icon);width:100%;padding:0.875rem 0;background:#272727;color:var(--digi--color--text--inverted);font-size:var(--digi--typography--body--font-size--desktop);font-family:var(--digi--global--typography--font-family--default);cursor:pointer;border:none}.digi-code-example__code-expand.sc-digi-code-example:hover{background:var(--digi--color--background--inverted-3);text-decoration:underline}.digi-code-example__code-expand.sc-digi-code-example:focus-visible{outline:2px solid black;outline-offset:-3px;box-shadow:0px 0px 0px 5px inset white}.digi-code-example--no-controls.digi-code-example--inactive.sc-digi-code-example .digi-code-example__codeblock.sc-digi-code-example{height:64px}.digi-code-example__copy-button.sc-digi-code-example{--digi--button--padding--small:0;--digi--button--padding--medium:0;--digi--button--padding--large:0}.digi-code-example__code-expand-icon.sc-digi-code-example{--digi--icon--color:var(--digi--color--text--inverted);transition:ease-in-out var(--digi--animation--duration--base) all}.digi-code-example__code-expand-icon--open.sc-digi-code-example{transform:rotate(180deg)}.digi-code-example__fade.sc-digi-code-example{position:absolute;width:100%;bottom:0;height:var(--digi--padding--largest-2)}.digi-code-example__fade--light.sc-digi-code-example{background-image:linear-gradient(0deg, white, transparent)}.digi-code-example__fade--dark.sc-digi-code-example{--digi--color--background--inverted-3:#272727;background-image:linear-gradient(0deg, var(--digi--color--background--inverted-3), transparent)}.slot__controls.sc-digi-code-example{margin-bottom:var(--digi--padding--smaller)}.sc-digi-code-example-s .slot__controls{display:flex;flex-direction:column;gap:var(--digi--padding--smaller)}.sc-digi-code-example-s .slot__controls[hidden]{display:none}.sc-digi-code-example-s .slot__controls digi-form-fieldset,.sc-digi-code-example-s .slot__controls digi-form-select,.sc-digi-code-example-s .slot__controls digi-form-fieldset+digi-form-checkbox,.sc-digi-code-example-s .slot__controls .divider{display:block;border-bottom:1px solid var(--digi--color--border--neutral-2);padding-bottom:var(--digi--padding--smaller);margin-bottom:var(--digi--padding--medium)}";
 const DigiCodeExampleStyle0 = codeExampleCss;
@@ -139,17 +139,17 @@ const CodeExample = /*@__PURE__*/ proxyCustomElement(class CodeExample extends H
             .replace(/\w/, (firstLetter) => firstLetter.toUpperCase());
     }
     render() {
-        return (h("div", { key: '1fc09f95af1e8f599b593ddad279743574ded843', class: Object.assign({ 'digi-code-example': true }, this.cssModifiers), ref: (el) => (this.containerElement = el) }, h("div", { key: '696edf1c732923293a2406393207eecd921b17de', class: {
+        return (h("div", { key: '603ebe1a3504155b2766dea1096072c54f519862', class: Object.assign({ 'digi-code-example': true }, this.cssModifiers), ref: (el) => (this.containerElement = el) }, h("div", { key: '9ffaf18a274b43e1287f6d23c32b4b31d799ca25', class: {
                 'digi-code-example__container': true
-            } }, 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: {
+            } }, h("div", { key: '584b0b51094503b895a4d54dad15ce8fdfcd363a', class: "digi-code-example__example" }, h("slot", { key: '877772e56f694c7a42228b8c5207e508024b61dd' })), !this.afHideCode && (h("div", { key: '5c5405a83e851d1a9ed72ead2bbdfef9ff2b5802', class: "digi-code-example__code" }, this.showMoreButton && (h("button", { key: 'ab8d2d0f42c51a4dd5b69d5f5cd4f22375412697', 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: '95f28b0a1afa91d8b6203f5d455c7902d1fc2b48', class: {
                 'digi-code-example__code-expand-icon': true,
                 'digi-code-example__code-expand-icon--open': this.isActive
-            }, "aria-hidden": "true" }))), h("div", { key: '5d3fc7f0415d1c7bf698d7275d3d04ca0f5fd4c5', class: {
+            }, "aria-hidden": "true" }))), h("div", { key: '7112ab4271640b008598c59cb29420a847436212', 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: 'c1caedb22bf5d4ebe05cb060e1500b9c25bb0865', afCode: this.codeExample || '', afLanguage: this.afLanguage.toLowerCase(), afVariation: this.afCodeBlockVariation, "af-hide-toolbar": true }), !this.isActive ? (h("div", { class: {
+            } }, h("digi-code-block", { key: 'd3a6ef16e27fc4f614b20b7a98d552e46d858f52', 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/components/digi-code.js

@@ -31,7 +31,7 @@ const Code = /*@__PURE__*/ proxyCustomElement(class Code extends H {
         };
     }
     render() {
-        return (h("span", { key: 'adc9ee7207dd03a4e7952c1f2b63261fae7f5ad3', class: Object.assign({ 'digi-code': true }, this.cssModifiers) }, h("code", { key: 'f65be5008fa9005ccf58779fce6786ecbb31b688', class: `digi-code__code language-${this.afLanguage}`, lang: this.afLang, innerHTML: this.highlightedCode })));
+        return (h("span", { key: '034c2c4595c7bac40ba96fa75b9f13863473e9f1', class: Object.assign({ 'digi-code': true }, this.cssModifiers) }, h("code", { key: '88a6cef2ed4bb86079b66e93b115de8e2aee66be', class: `digi-code__code language-${this.afLanguage}`, lang: this.afLang, innerHTML: this.highlightedCode })));
     }
     static get watchers() { return {
         "afCode": ["formatCode"]

package/components/digi-context-menu.js

@@ -3,8 +3,8 @@ import { d as detectClickOutside } from './p-430607cb.js';
 import { d as detectFocusOutside } from './p-ee33960b.js';
 import { r as randomIdGenerator } from './p-ffe5c0e8.js';
 import { d as defineCustomElement$4 } from './p-68dbf3ef.js';
-import { d as defineCustomElement$3 } from './p-9e6f28f2.js';
-import { d as defineCustomElement$2 } from './p-2c789cac.js';
+import { d as defineCustomElement$3 } from './p-474db732.js';
+import { d as defineCustomElement$2 } from './p-e52962b0.js';
 
 const navigationContextMenuCss = ".digi--util--fs--xs{font-size:var(--digi--global--typography--font-size--small) !important}.digi--util--fs--s{font-size:calc(var(--digi--global--typography--font-size--small) + 1px) !important}.digi--util--fs--m{font-size:var(--digi--global--typography--font-size--base) !important}.digi--util--fs--l{font-size:var(--digi--global--typography--font-size--large) !important}.digi--util--fw--sb{font-weight:var(--digi--global--typography--font-weight--semibold) !important}.digi--util--pt--1{padding-top:var(--digi--global--spacing--smallest-2) !important}.digi--util--pt--10{padding-top:var(--digi--global--spacing--smallest) !important}.digi--util--pt--20{padding-top:var(--digi--global--spacing--base) !important}.digi--util--pt--30{padding-top:var(--digi--global--spacing--largest-2) !important}.digi--util--pt--40{padding-top:var(--digi--global--spacing--largest-4) !important}.digi--util--pt--50{padding-top:2.5rem !important}.digi--util--pt--60{padding-top:var(--digi--global--spacing--largest-5) !important}.digi--util--pt--70{padding-top:var(--digi--global--spacing--largest-6) !important}.digi--util--pt--80{padding-top:4.5rem !important}.digi--util--pt--90{padding-top:5rem !important}.digi--util--pb--1{padding-bottom:var(--digi--global--spacing--smallest-2) !important}.digi--util--pb--10{padding-bottom:var(--digi--global--spacing--smallest) !important}.digi--util--pb--20{padding-bottom:var(--digi--global--spacing--base) !important}.digi--util--pb--30{padding-bottom:var(--digi--global--spacing--largest-2) !important}.digi--util--pb--40{padding-bottom:var(--digi--global--spacing--largest-4) !important}.digi--util--pb--50{padding-bottom:2.5rem !important}.digi--util--pb--60{padding-bottom:var(--digi--global--spacing--largest-5) !important}.digi--util--pb--70{padding-bottom:var(--digi--global--spacing--largest-6) !important}.digi--util--pb--80{padding-bottom:4.5rem !important}.digi--util--pb--90{padding-bottom:5rem !important}.digi--util--p--1{padding:var(--digi--global--spacing--smallest-2) !important}.digi--util--p--10{padding:var(--digi--global--spacing--smallest) !important}.digi--util--p--20{padding:var(--digi--global--spacing--base) !important}.digi--util--p--30{padding:var(--digi--global--spacing--largest-2) !important}.digi--util--p--40{padding:var(--digi--global--spacing--largest-4) !important}.digi--util--p--50{padding:2.5rem !important}.digi--util--p--60{padding:var(--digi--global--spacing--largest-5) !important}.digi--util--p--70{padding:var(--digi--global--spacing--largest-6) !important}.digi--util--p--80{padding:4.5rem !important}.digi--util--p--90{padding:5rem !important}.digi--util--ptb--1{padding-top:var(--digi--global--spacing--smallest-2) !important;padding-bottom:var(--digi--global--spacing--smallest-2) !important}.digi--util--ptb--10{padding-top:var(--digi--global--spacing--smallest) !important;padding-bottom:var(--digi--global--spacing--smallest) !important}.digi--util--ptb--20{padding-top:var(--digi--global--spacing--base) !important;padding-bottom:var(--digi--global--spacing--base) !important}.digi--util--ptb--30{padding-top:var(--digi--global--spacing--largest-2) !important;padding-bottom:var(--digi--global--spacing--largest-2) !important}.digi--util--ptb--40{padding-top:var(--digi--global--spacing--largest-4) !important;padding-bottom:var(--digi--global--spacing--largest-4) !important}.digi--util--ptb--50{padding-top:2.5rem !important;padding-bottom:2.5rem !important}.digi--util--ptb--60{padding-top:var(--digi--global--spacing--largest-5) !important;padding-bottom:var(--digi--global--spacing--largest-5) !important}.digi--util--ptb--70{padding-top:var(--digi--global--spacing--largest-6) !important;padding-bottom:var(--digi--global--spacing--largest-6) !important}.digi--util--ptb--80{padding-top:4.5rem !important;padding-bottom:4.5rem !important}.digi--util--ptb--90{padding-top:5rem !important;padding-bottom:5rem !important}.digi--util--plr--1{padding-left:var(--digi--global--spacing--smallest-2) !important;padding-right:var(--digi--global--spacing--smallest-2) !important}.digi--util--plr--10{padding-left:var(--digi--global--spacing--smallest) !important;padding-right:var(--digi--global--spacing--smallest) !important}.digi--util--plr--20{padding-left:var(--digi--global--spacing--base) !important;padding-right:var(--digi--global--spacing--base) !important}.digi--util--plr--30{padding-left:var(--digi--global--spacing--largest-2) !important;padding-right:var(--digi--global--spacing--largest-2) !important}.digi--util--plr--40{padding-left:var(--digi--global--spacing--largest-4) !important;padding-right:var(--digi--global--spacing--largest-4) !important}.digi--util--plr--50{padding-left:2.5rem !important;padding-right:2.5rem !important}.digi--util--plr--60{padding-left:var(--digi--global--spacing--largest-5) !important;padding-right:var(--digi--global--spacing--largest-5) !important}.digi--util--plr--70{padding-left:var(--digi--global--spacing--largest-6) !important;padding-right:var(--digi--global--spacing--largest-6) !important}.digi--util--plr--80{padding-left:4.5rem !important;padding-right:4.5rem !important}.digi--util--plr--90{padding-left:5rem !important;padding-right:5rem !important}.digi--util--sr-only{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.digi--util--hidden{display:none}.digi-navigation-context-menu{display:block;box-sizing:border-box;width:fit-content}.digi-navigation-context-menu *,.digi-navigation-context-menu *::before,.digi-navigation-context-menu *::after{box-sizing:border-box}:host{--digi--navigation-context-menu--toggle-icon--transition:ease-in-out 0.2s all;--digi--navigation-context-menu--toggle-icon--transform:rotate(-180deg);--digi--navigation-context-menu--content--background-color:var(--digi--color--background--primary);--digi--navigation-context-menu--content--border-radius:var(--digi--border-radius--secondary);--digi--navigation-context-menu--content--box-shadow:0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.7);--digi--navigation-context-menu--content--max-width:90vw;--digi--navigation-context-menu--content--max-height:15rem;--digi--navigation-context-menu--button-icon--width:0.875rem;--digi--navigation-context-menu--button-trigger--font-size:var(--digi--typography--body--font-size--desktop);--digi--navigation-context-menu--button-trigger--padding:0;--digi--navigation-context-menu--item--font-size:var(--digi--typography--body--font-size--desktop);--digi--navigation-context-menu--item--background-color--active:var(--digi--color--background--neutral-6);--digi--navigation-context-menu--item--display:flex;--digi--navigation-context-menu--item--font-family:var(--digi--global--typography--font-family--default);--digi--navigation-context-menu--item--font-color:var(--digi--color--text--primary)}.digi-navigation-context-menu--id-wrapper{display:grid}.digi-navigation-context-menu--id-wrapper .digi-navigation-context-menu__toggle-icon{transition:var(--digi--navigation-context-menu--toggle-icon--transition)}.digi-navigation-context-menu--id-wrapper .digi-navigation-context-menu{--HORIZONTAL-POSITION:unset;display:block}.digi-navigation-context-menu--id-wrapper .digi-navigation-context-menu--active .digi-navigation-context-menu__toggle-icon{transform:var(--digi--navigation-context-menu--toggle-icon--transform)}.digi-navigation-context-menu--id-wrapper .digi-navigation-context-menu__trigger-button{display:block;--digi--button--padding--medium:var(\n    --digi--navigation-context-menu--button-trigger--padding\n  );width:fit-content;--digi--button--font-size--medium:var(\n    --digi--navigation-context-menu--button-trigger--font-size\n  )}.digi-navigation-context-menu--id-wrapper .digi-navigation-context-menu__list{width:100%;position:relative;display:inline-grid}.digi-navigation-context-menu--id-wrapper .dropdown-wrapper{padding:0.5rem 0;display:none;width:max-content;min-width:100%;max-width:var(--digi--navigation-context-menu--content--max-width);max-height:var(--digi--navigation-context-menu--content--max-height);overflow-y:auto;box-sizing:border-box;z-index:10;margin-top:0.5rem;background-color:var(--digi--navigation-context-menu--content--background-color);border-radius:var(--digi--navigation-context-menu--content--border-radius);box-shadow:var(--digi--navigation-context-menu--content--box-shadow);position:absolute}.digi-navigation-context-menu--id-wrapper .dropdown-wrapper--visible{display:block}.digi-navigation-context-menu--id-wrapper .dropdown-wrapper--position-right{right:0}.digi-navigation-context-menu--id-wrapper .dropdown-wrapper--position-center{left:50%;transform:translateX(-50%)}.digi-navigation-context-menu--id-wrapper .content-wrapper{display:flex;flex-direction:row;align-items:baseline;padding-left:1rem;padding-right:1rem;gap:0.5rem}.digi-navigation-context-menu--id-wrapper .digi-navigation-context-menu__item{font-size:var(--digi--navigation-context-menu--item--font-size);display:var(--digi--navigation-context-menu--item--display);font-family:var(--digi--navigation-context-menu--item--font-family);padding:0.625rem 0;max-width:max-content;min-width:100%;width:100%;position:relative;cursor:pointer}.digi-navigation-context-menu--id-wrapper .digi-navigation-context-menu__item:hover{background-color:var(--digi--navigation-context-menu--item--background-color--active)}.digi-navigation-context-menu--id-wrapper .digi-navigation-context-menu__item:focus-visible{outline:2px solid black;outline-offset:-3px;box-shadow:0px 0px 0px 5px inset white}.digi-navigation-context-menu--id-wrapper .digi-navigation-context-menu__item--active{font-weight:600;background-color:var(--digi--navigation-context-menu--item--background-color--active)}.digi-navigation-context-menu--id-wrapper .digi-navigation-context-menu__item--link{list-style:none;margin:0;padding:0}.digi-navigation-context-menu--id-wrapper .digi-navigation-context-menu__item--link a{padding:0.625rem 1rem;color:var(--digi--navigation-context-menu--item--font-color, #333333);text-decoration:none;margin:0;width:100%}.digi-navigation-context-menu--id-wrapper .digi-navigation-context-menu__button-icon{--digi--icon--width:var(\n    --digi--navigation-context-menu--button-icon--width\n  )}";
 const DigiContextMenuStyle0 = navigationContextMenuCss;
@@ -205,10 +205,10 @@ const ContextMenu = /*@__PURE__*/ proxyCustomElement(class ContextMenu extends H
     }
     render() {
         const menuItems = this.afMenuItems;
-        return (h(Host, { key: '8b9ddb1d31e294505f5ae3f226510ba587ecfc04', class: 'digi-navigation-context-menu' }, h("div", { key: 'bcc94554eb00a58409b7cae6a5c3668767ddb26d', id: `${this.afId}-identifier`, class: "digi-navigation-context-menu--id-wrapper" }, h("digi-button", { key: '287e0f1f1afba43c8250185e5ea589aa26c5367c', id: `${this.afId}-trigger`, ref: (ref) => (this.buttonRef = ref), onClick: () => this.handleToggle(), afVariation: "function", afAriaControls: `${this.afId}-dropdown`, afAriaExpanded: this.visible, afAriaLabel: this.afAriaLabel || null, class: {
+        return (h(Host, { key: 'b8ad8d575b9ef0cc0a7725f32206b9781188194d', class: 'digi-navigation-context-menu' }, h("div", { key: '2a097311a258565207b9ff387ec6c8ae62cd07b7', id: `${this.afId}-identifier`, class: "digi-navigation-context-menu--id-wrapper" }, h("digi-button", { key: '41bc7b3d5f2cdd488502141fad0dd09cf23b3461', id: `${this.afId}-trigger`, ref: (ref) => (this.buttonRef = ref), onClick: () => this.handleToggle(), afVariation: "function", afAriaControls: `${this.afId}-dropdown`, afAriaExpanded: this.visible, afAriaLabel: this.afAriaLabel || null, class: {
                 'digi-navigation-context-menu__trigger-button': true,
                 'digi-navigation-context-menu--active': this.visible
-            } }, !!this.afIcon && h(this.digiIcon, { key: 'db42fdd3432f87096be2e5da8b3e05732b0aedf4', slot: "icon" }), this.afTitle, h("digi-icon-chevron-down", { key: '7977ded8cc5a7aa0aec7e2735dc38f95a4d31a06', class: "digi-navigation-context-menu__toggle-icon", slot: "icon-secondary" })), h("div", { key: '5ff21d52bb2f57c8777bd04bf906730c960bc054', class: "digi-navigation-context-menu__list" }, h("div", { key: 'a8e81ab1b3c371ef501bf96f7c14c11d54a97836', onKeyDown: (e) => {
+            } }, !!this.afIcon && h(this.digiIcon, { key: 'fa37de43667c8e7c7bd88a0cbbed707ee7bb39bc', slot: "icon" }), this.afTitle, h("digi-icon-chevron-down", { key: 'f6a1bcbb3a99580dd8a83eddd6ffb5d2f09fcf51', class: "digi-navigation-context-menu__toggle-icon", slot: "icon-secondary" })), h("div", { key: '87c24b1f2839b58febc70f81aa03e9098ec10359', class: "digi-navigation-context-menu__list" }, h("div", { key: '406502a44645d4c3a6a687d058c7097faeb0b234', onKeyDown: (e) => {
                 this.handleKey(e);
             }, id: `${this.afId}-dropdown`, style: {
                 visibility: this.visible ? 'visible' : 'hidden'

package/components/digi-dialog.js

@@ -51,9 +51,9 @@ import './p-b0e88537.js';
 import './p-903b00e6.js';
 import './p-cdcaf0eb.js';
 import { d as defineCustomElement$5 } from './p-68dbf3ef.js';
-import { d as defineCustomElement$4 } from './p-36fbdb2e.js';
-import { d as defineCustomElement$3 } from './p-10503e1d.js';
-import { d as defineCustomElement$2 } from './p-f3c5a743.js';
+import { d as defineCustomElement$4 } from './p-0176102e.js';
+import { d as defineCustomElement$3 } from './p-8cc46a2b.js';
+import { d as defineCustomElement$2 } from './p-a3815a92.js';
 
 const dialogCss = ".digi--util--fs--xs{font-size:var(--digi--global--typography--font-size--small) !important}.digi--util--fs--s{font-size:calc(var(--digi--global--typography--font-size--small) + 1px) !important}.digi--util--fs--m{font-size:var(--digi--global--typography--font-size--base) !important}.digi--util--fs--l{font-size:var(--digi--global--typography--font-size--large) !important}.digi--util--fw--sb{font-weight:var(--digi--global--typography--font-weight--semibold) !important}.digi--util--pt--1{padding-top:var(--digi--global--spacing--smallest-2) !important}.digi--util--pt--10{padding-top:var(--digi--global--spacing--smallest) !important}.digi--util--pt--20{padding-top:var(--digi--global--spacing--base) !important}.digi--util--pt--30{padding-top:var(--digi--global--spacing--largest-2) !important}.digi--util--pt--40{padding-top:var(--digi--global--spacing--largest-4) !important}.digi--util--pt--50{padding-top:2.5rem !important}.digi--util--pt--60{padding-top:var(--digi--global--spacing--largest-5) !important}.digi--util--pt--70{padding-top:var(--digi--global--spacing--largest-6) !important}.digi--util--pt--80{padding-top:4.5rem !important}.digi--util--pt--90{padding-top:5rem !important}.digi--util--pb--1{padding-bottom:var(--digi--global--spacing--smallest-2) !important}.digi--util--pb--10{padding-bottom:var(--digi--global--spacing--smallest) !important}.digi--util--pb--20{padding-bottom:var(--digi--global--spacing--base) !important}.digi--util--pb--30{padding-bottom:var(--digi--global--spacing--largest-2) !important}.digi--util--pb--40{padding-bottom:var(--digi--global--spacing--largest-4) !important}.digi--util--pb--50{padding-bottom:2.5rem !important}.digi--util--pb--60{padding-bottom:var(--digi--global--spacing--largest-5) !important}.digi--util--pb--70{padding-bottom:var(--digi--global--spacing--largest-6) !important}.digi--util--pb--80{padding-bottom:4.5rem !important}.digi--util--pb--90{padding-bottom:5rem !important}.digi--util--p--1{padding:var(--digi--global--spacing--smallest-2) !important}.digi--util--p--10{padding:var(--digi--global--spacing--smallest) !important}.digi--util--p--20{padding:var(--digi--global--spacing--base) !important}.digi--util--p--30{padding:var(--digi--global--spacing--largest-2) !important}.digi--util--p--40{padding:var(--digi--global--spacing--largest-4) !important}.digi--util--p--50{padding:2.5rem !important}.digi--util--p--60{padding:var(--digi--global--spacing--largest-5) !important}.digi--util--p--70{padding:var(--digi--global--spacing--largest-6) !important}.digi--util--p--80{padding:4.5rem !important}.digi--util--p--90{padding:5rem !important}.digi--util--ptb--1{padding-top:var(--digi--global--spacing--smallest-2) !important;padding-bottom:var(--digi--global--spacing--smallest-2) !important}.digi--util--ptb--10{padding-top:var(--digi--global--spacing--smallest) !important;padding-bottom:var(--digi--global--spacing--smallest) !important}.digi--util--ptb--20{padding-top:var(--digi--global--spacing--base) !important;padding-bottom:var(--digi--global--spacing--base) !important}.digi--util--ptb--30{padding-top:var(--digi--global--spacing--largest-2) !important;padding-bottom:var(--digi--global--spacing--largest-2) !important}.digi--util--ptb--40{padding-top:var(--digi--global--spacing--largest-4) !important;padding-bottom:var(--digi--global--spacing--largest-4) !important}.digi--util--ptb--50{padding-top:2.5rem !important;padding-bottom:2.5rem !important}.digi--util--ptb--60{padding-top:var(--digi--global--spacing--largest-5) !important;padding-bottom:var(--digi--global--spacing--largest-5) !important}.digi--util--ptb--70{padding-top:var(--digi--global--spacing--largest-6) !important;padding-bottom:var(--digi--global--spacing--largest-6) !important}.digi--util--ptb--80{padding-top:4.5rem !important;padding-bottom:4.5rem !important}.digi--util--ptb--90{padding-top:5rem !important;padding-bottom:5rem !important}.digi--util--plr--1{padding-left:var(--digi--global--spacing--smallest-2) !important;padding-right:var(--digi--global--spacing--smallest-2) !important}.digi--util--plr--10{padding-left:var(--digi--global--spacing--smallest) !important;padding-right:var(--digi--global--spacing--smallest) !important}.digi--util--plr--20{padding-left:var(--digi--global--spacing--base) !important;padding-right:var(--digi--global--spacing--base) !important}.digi--util--plr--30{padding-left:var(--digi--global--spacing--largest-2) !important;padding-right:var(--digi--global--spacing--largest-2) !important}.digi--util--plr--40{padding-left:var(--digi--global--spacing--largest-4) !important;padding-right:var(--digi--global--spacing--largest-4) !important}.digi--util--plr--50{padding-left:2.5rem !important;padding-right:2.5rem !important}.digi--util--plr--60{padding-left:var(--digi--global--spacing--largest-5) !important;padding-right:var(--digi--global--spacing--largest-5) !important}.digi--util--plr--70{padding-left:var(--digi--global--spacing--largest-6) !important;padding-right:var(--digi--global--spacing--largest-6) !important}.digi--util--plr--80{padding-left:4.5rem !important;padding-right:4.5rem !important}.digi--util--plr--90{padding-left:5rem !important;padding-right:5rem !important}.digi--util--sr-only{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.digi--util--hidden{display:none}:host{--digi--dialog--backdrop--position:fixed;--digi--dialog--backdrop--opacity:1;--digi--dialog--backdrop--z--index:999;--digi--dialog--backdrop--left:0;--digi--dialog--backdrop--top:0;--digi--dialog--backdrop--width:100vw;--digi--dialog--backdrop--height:100vh;--digi--dialog--backdrop--background--color:rgba(0, 0, 0, 0.7);--digi--dialog--backdrop--display:flex;--digi--dialog--backdrop--justify--content:center;--digi--dialog--backdrop--align--items:center;--digi--dialog--close--button--display:grid;--digi--dialog--close--button--justify--content:end;--digi--dialog--close--button--margin--right:-1rem;--digi--dialog--button--container--display:flex;--digi--dialog--button--container--flex-wrap:wrap;--digi--dialog--button--container--gap:var(--digi--gutter--large);--digi--dialog--button--container--padding--top:var(--digi--gutter--largest-2);--digi--dialog--button--text--align--mobile:center;--digi--dialog--content--gutter:var(--digi--gutter--largest);--digi--dialog--content--margin:var(--digi--margin--large) auto;--digi--dialog--content--padding:var(--digi--padding--large);--digi--dialog--content--width--small:28.75rem;--digi--dialog--content--width--medium:42.1875rem;--digi--dialog--content--width--large:56.25rem;--digi--dialog--content--color--primary:var(--digi--color--text--primary);--digi--dialog--content--color--background--primary:var(--digi--global--color--profile--white--base);--digi--dialog--icon--color--primary:var(--digi--color--icons--primary);--digi--dialog--icon--color--primary--hover:var(--digi--color--icons--primary)}:host .digi-dialog{overflow-x:hidden;overflow-y:auto;position:var(--digi--dialog--backdrop--position);opacity:var(--digi--dialog--backdrop--opacity);z-index:var(--digi--dialog--backdrop--z--index);left:var(--digi--dialog--backdrop--left);top:var(--digi--dialog--backdrop--top);width:var(--digi--dialog--backdrop--width);height:var(--digi--dialog--backdrop--height);background-color:var(--digi--dialog--backdrop--background--color);display:var(--digi--dialog--backdrop--display);justify-content:var(--digi--dialog--backdrop--justify--content);align-items:var(--digi--dialog--backdrop--align--items);padding:var(--digi--padding--medium);box-sizing:border-box}:host .digi-dialog--primary{--DIGI--DIALOG--COLOR--BACKGROUND:var(\n    --digi--dialog--content--color--background--primary\n  );--DIGI--DIALOG--COLOR:var(--digi--dialog--content--color--primary);--DIGI--DIALOG--CONTENT--BUTTON--COLOR--BORDER--PRIMARY:initial}:host .digi-dialog--secondary{--digi--dialog--content--color--secondary:var(\n    --digi--global--color--profile--white--base\n  );--digi--dialog--content--color--background--secondary:var(\n    --digi--global--color--profile--blue--base\n  );--DIGI--DIALOG--COLOR--BACKGROUND:var(\n    --digi--dialog--content--color--background--secondary\n  );--DIGI--DIALOG--COLOR:var(--digi--dialog--content--color--secondary);--DIGI--DIALOG--CONTENT--BUTTON--COLOR--BORDER--PRIMARY:#b7b7ff;--digi--color--text--primary:var(--digi--dialog--content--color--secondary)}:host .digi-dialog--small{--DIGI--DIALOG--CONTENT--WIDTH:var(--digi--dialog--content--width--small)}:host .digi-dialog--medium{--DIGI--DIALOG--CONTENT--WIDTH:var(--digi--dialog--content--width--medium)}:host .digi-dialog--large{--DIGI--DIALOG--CONTENT--WIDTH:var(--digi--dialog--content--width--large)}:host .digi-dialog__keydown-handler{width:100%;max-height:100%}:host .digi-dialog__content{background:var(--DIGI--DIALOG--COLOR--BACKGROUND);color:var(--DIGI--DIALOG--COLOR);max-width:var(--DIGI--DIALOG--CONTENT--WIDTH);width:100%;margin:var(--digi--dialog--content--margin);padding:var(--digi--padding--smaller) var(--digi--dialog--content--padding) var(--digi--dialog--content--padding) var(--digi--dialog--content--padding);box-sizing:border-box}:host .digi-dialog__close-button{--digi--button--color--text--function--default:var(\n    --DIGI--DIALOG--COLOR\n  );--digi--button--color--text--function--hover:var(--DIGI--DIALOG--COLOR);--digi--button--color--icon--function--default:var(\n    --digi--dialog--icon--color--primary\n  );--digi--button--color--icon--function--hover:var(\n    --digi--dialog--icon--color--primary--hover\n  );display:var(--digi--dialog--close--button--display);justify-content:var(--digi--dialog--close--button--justify--content);margin-right:var(--digi--dialog--close--button--margin--right)}:host .digi-dialog__button-container{display:var(--digi--dialog--button--container--display);flex-wrap:var(--digi--dialog--button--container--flex-wrap);gap:var(--digi--dialog--button--container--gap);padding-top:var(--digi--dialog--button--container--padding--top)}:host .digi-dialog__button-container digi-button,:host .digi-dialog__button-container .digi-button--medium{text-align:var(--digi--dialog--button--text--align--mobile)}:host .digi-dialog__button-container digi-button :first-of-type,:host .digi-dialog__button-container .digi-button--medium :first-of-type{--digi--button--color--border--primary--default:var(\n    --DIGI--DIALOG--CONTENT--BUTTON--COLOR--BORDER--PRIMARY\n  );--digi--button--color--border--primary--hover:var(\n    --DIGI--DIALOG--CONTENT--BUTTON--COLOR--BORDER--PRIMARY\n  )}";
 const DigiDialogStyle0 = dialogCss;
@@ -286,11 +286,11 @@ const Dialog = /*@__PURE__*/ proxyCustomElement(class Dialog extends H {
         };
     }
     render() {
-        return (h(Host, { key: '34539a8a9731e095ed204c342b1dcbbf766a45a1', ref: (el) => {
+        return (h(Host, { key: '9a8afe2474c7d15cd3789130f5c198a267973cba', ref: (el) => {
                 this._host = 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.afShowDialog && (h("div", { key: '67928e6e4c4edd9f541209eeee013de2ebbd27cd', class: Object.assign({ 'digi-dialog': true }, this.cssModifiers) }, h("digi-util-keydown-handler", { key: '3c42d04d0dfb8b39f7a4f90de16855e29e680b07', onAfOnEsc: (e) => this.escHandler(e), onAfOnTab: (e) => this.tabHandler(e), onAfOnShiftTab: (e) => this.shiftHandler(e), class: "digi-dialog__keydown-handler" }, h("div", { key: '0fe90719b005267bb09d2f4b25d4ef94681510f5', ref: (el) => {
                 this._wrapper = el;
-            }, 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))))))))));
+            }, role: "dialog", "aria-modal": "true", class: "digi-dialog__content" }, h("digi-typography", { key: '587eda23a5acc992768ba918cb5b559f440244da' }, this.afCloseButtonText && (h("digi-button", { key: 'ef404b8a54ac63b1a87dbd98fa7566fde286090d', 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: 'ff6d833f5700ce940dbc35bf0b19ec9aa16b88da', class: "digi-dialog__close-icon", slot: "icon-secondary" }))), h("slot", { key: '6a605125d89844c13fa78b21258f65386ad32048', name: "over-heading" }), this.afHeadingLevel && this.afHeading && (h(this.afHeadingLevel, { key: '0df3dc87c4c7bc9cf6ba2e93c2f51483fa5f8b52', tabindex: "-1", ref: (el) => (this._dialogHeading = el) }, this.afHeading)), h("slot", { key: '2d0e541ccc6967644fe626c4e9577661877eaefa' }), h("div", { key: '87394b9627ca697174e99f937fb08e358837c6e4', ref: (el) => (this._buttonContainer = el), class: "digi-dialog__button-container" }, this.afSecondaryButtonText && (h("digi-button", { key: 'a61eca0878ae6ca4d42b83ab4b473153d8f927b7', ref: (el) => (this._secondaryButton = el), afVariation: ButtonVariation.SECONDARY, onAfOnClick: (e) => this.secondaryClickHandler(e) }, this.afSecondaryButtonText)), this.afPrimaryButtonText && (h("digi-button", { key: '7e57f67739c65cf715f853ccc6fba427c620ef27', ref: (el) => (this._primaryButton = el), afVariation: ButtonVariation.PRIMARY, onAfOnClick: (e) => this.primaryClickHandler(e) }, this.afPrimaryButtonText))))))))));
     }
     get hostElement() { return this; }
     static get style() { return DigiDialogStyle0; }