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

package/components/digi-bar-chart.js

@@ -4,12 +4,12 @@ import { _ as _t } from './p-42aa440f.js';
 import { r as randomIdGenerator } from './p-ffe5c0e8.js';
 import { B as BarChartVariation } from './p-dcdffb3c.js';
 import { d as defineCustomElement$8 } from './p-68dbf3ef.js';
-import { d as defineCustomElement$7 } from './p-5105e437.js';
-import { d as defineCustomElement$6 } from './p-ee898486.js';
-import { d as defineCustomElement$5 } from './p-1b3cbd03.js';
-import { d as defineCustomElement$4 } from './p-9a48601e.js';
-import { d as defineCustomElement$3 } from './p-c2792b81.js';
-import { d as defineCustomElement$2 } from './p-470d6874.js';
+import { d as defineCustomElement$7 } from './p-95d76cb0.js';
+import { d as defineCustomElement$6 } from './p-d8d71310.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';
 
 function band() {
   var scale = ordinal().unknown(undefined),

package/components/digi-calendar-datepicker.js

@@ -51,19 +51,19 @@ import './p-903b00e6.js';
 import './p-cdcaf0eb.js';
 import { r as randomIdGenerator } from './p-ffe5c0e8.js';
 import { d as detectClickOutside } from './p-430607cb.js';
-import { i as isBefore, a as isAfter, d as defineCustomElement$f } from './p-6536612d.js';
-import { d as defineCustomElement$e } from './p-ce4cdfca.js';
-import { d as defineCustomElement$d } from './p-1f838d49.js';
-import { d as defineCustomElement$c } from './p-70b51099.js';
-import { d as defineCustomElement$b } from './p-ec4b6151.js';
-import { d as defineCustomElement$a } from './p-c14a1a58.js';
-import { d as defineCustomElement$9 } from './p-f4abe624.js';
-import { d as defineCustomElement$8 } from './p-ce5a89e6.js';
-import { d as defineCustomElement$7 } from './p-91cd1d0f.js';
-import { d as defineCustomElement$6 } from './p-29a84249.js';
-import { d as defineCustomElement$5 } from './p-d5aaf156.js';
-import { d as defineCustomElement$4 } from './p-00e0088f.js';
-import { d as defineCustomElement$3 } from './p-f4f6ca53.js';
+import { i as isBefore, a as isAfter, d as defineCustomElement$f } from './p-4b8bc232.js';
+import { d as defineCustomElement$e } from './p-a207c60e.js';
+import { d as defineCustomElement$d } from './p-3e02e6a4.js';
+import { d as defineCustomElement$c } from './p-8b1bc24a.js';
+import { d as defineCustomElement$b } from './p-b4012353.js';
+import { d as defineCustomElement$a } from './p-bdbd71ce.js';
+import { d as defineCustomElement$9 } from './p-0643b217.js';
+import { d as defineCustomElement$8 } from './p-6afc74b6.js';
+import { d as defineCustomElement$7 } from './p-d8cae9f0.js';
+import { d as defineCustomElement$6 } from './p-a81675ae.js';
+import { d as defineCustomElement$5 } from './p-d01319cf.js';
+import { d as defineCustomElement$4 } from './p-51efc942.js';
+import { d as defineCustomElement$3 } from './p-f3c5a743.js';
 import { d as defineCustomElement$2 } from './p-e9c9e33c.js';
 import { r as requiredArgs, t as toDate, i as isValid } from './p-7aacd45f.js';
 import { t as toInteger, g as getUTCISOWeek, a as getUTCWeek, b as getUTCWeekYear, s as startOfUTCWeek, c as startOfUTCISOWeek, i as isProtectedWeekYearToken, d as throwProtectedError, e as isProtectedDayOfYearToken, f as subMilliseconds, h as getTimezoneOffsetInMilliseconds, j as defaultLocale, l as longFormatters } from './p-c7949525.js';

package/components/digi-calendar-week-view.js

@@ -5,9 +5,9 @@ import { r as randomIdGenerator } from './p-ffe5c0e8.js';
 import { b as ButtonVariation } from './p-490d2653.js';
 import { C as CalendarWeekViewHeadingLevel } from './p-7e32c40b.js';
 import { d as defineCustomElement$5 } from './p-68dbf3ef.js';
-import { d as defineCustomElement$4 } from './p-f4abe624.js';
-import { d as defineCustomElement$3 } from './p-ce5a89e6.js';
-import { d as defineCustomElement$2 } from './p-470d6874.js';
+import { d as defineCustomElement$4 } from './p-0643b217.js';
+import { d as defineCustomElement$3 } from './p-6afc74b6.js';
+import { d as defineCustomElement$2 } from './p-10503e1d.js';
 import { r as requiredArgs, t as toDate, i as isValid } from './p-7aacd45f.js';
 
 /**

package/components/digi-calendar.js

@@ -1,4 +1,4 @@
-import { C as Calendar, d as defineCustomElement$1 } from './p-6536612d.js';
+import { C as Calendar, d as defineCustomElement$1 } from './p-4b8bc232.js';
 
 const DigiCalendar = Calendar;
 const defineCustomElement = defineCustomElement$1;

package/components/digi-card.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h } from './p-f124fce4.js';
 import { a as CardBorder, C as CardBorderRadius, b as CardFooterBorder } from './p-7e5ad05a.js';
-import { d as defineCustomElement$2 } from './p-470d6874.js';
+import { d as defineCustomElement$2 } from './p-10503e1d.js';
 
 const cardCss = ".sc-digi-card-h{--digi--card--background-color--primary:var(--digi--color--background--primary);--digi--card--background-color--secondary:var(--digi--color--background--secondary);--digi--card--padding:var(--digi--padding--large);--digi--card--border:none;--digi--card--border--primary:solid var(--digi--border-width--primary) var(--digi--color--border--neutral-2);--digi--card--border-radius:none;--digi--card--border-radius--primary:var(--digi--border--radius);--digi--card--footer--border-top:solid var(--digi--border-width--primary) var(--digi--color--border--neutral-2);--digi--card--footer--padding:var(--digi--padding--medium) var(--digi--padding--large);--BACKGROUND-COLOR:var(--digi--card--background-color--primary);--BORDER:var(--digi--card--border);--BORDER-RADIUS:var(--digi--card--border-radius);--FOOTER-BORDER:none}.sc-digi-card-h .digi-card.sc-digi-card{background:var(--BACKGROUND-COLOR);border:var(--BORDER);border-radius:var(--BORDER-RADIUS)}.sc-digi-card-h .digi-card--border--primary.sc-digi-card{--BORDER:var(--digi--card--border--primary)}.sc-digi-card-h .digi-card--border-radius--primary.sc-digi-card{--BORDER-RADIUS:var(--digi--card--border-radius--primary)}.sc-digi-card-h .digi-card--footer--border.sc-digi-card{--FOOTER-BORDER:var(--digi--card--footer--border-top)}.sc-digi-card-h .digi-card__content.sc-digi-card{padding:var(--digi--card--padding)}.sc-digi-card-h .digi-card__footer.sc-digi-card{border-top:var(--FOOTER-BORDER);padding:var(--digi--card--footer--padding)}";
 const DigiCardStyle0 = cardCss;

package/components/digi-chart-line.js

@@ -3,10 +3,10 @@ import { _ as _t } from './p-42aa440f.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-1b3cbd03.js';
-import { d as defineCustomElement$4 } from './p-9a48601e.js';
-import { d as defineCustomElement$3 } from './p-c2792b81.js';
-import { d as defineCustomElement$2 } from './p-470d6874.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';
 
 function sourceEvent(event) {
   let sourceEvent;
@@ -448,6 +448,8 @@ function constant(x) {
   };
 }
 
+const cos = Math.cos;
+const sin = Math.sin;
 const sqrt = Math.sqrt;
 const pi = Math.PI;
 const tau = 2 * pi;
@@ -577,22 +579,41 @@ const circle = {
   }
 };
 
-const diamond2 = {
+const tan30 = sqrt(1 / 3);
+const tan30_2 = tan30 * 2;
+
+const diamond = {
   draw(context, size) {
-    const r = sqrt(size) * 0.62625;
-    context.moveTo(0, -r);
-    context.lineTo(r, 0);
-    context.lineTo(0, r);
-    context.lineTo(-r, 0);
+    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);
     context.closePath();
   }
 };
 
-const square = {
+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 = {
   draw(context, size) {
-    const w = sqrt(size);
-    const x = -w / 2;
-    context.rect(x, x, w, w);
+    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();
   }
 };
 
@@ -608,30 +629,6 @@ 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);
@@ -713,17 +710,14 @@ 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: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 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 DigiChartLineStyle0 = chartLineCss;
 
 const ChartLine = /*@__PURE__*/ proxyCustomElement(class ChartLine extends H {
     constructor() {
         super();
         this.__registerHost();
-        this._lineTypes = [null, '18, 7', '8,7', '2,6'];
-        this._strokeWidth = 2.75;
-        this._lineCap = 'round';
-        this._strokeGlyphs = [circle, triangle, square, wye, diamond2];
+        this._lineTypes = [null, '1.0, 7.0', '9.0, 7.0'];
         this._toggled = false;
         this._tickSize = 0;
         // Selection list from legend chips
@@ -742,6 +736,8 @@ 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 = {
@@ -865,9 +861,7 @@ 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')
@@ -876,23 +870,23 @@ const ChartLine = /*@__PURE__*/ proxyCustomElement(class ChartLine extends H {
                 .attr('height', 28)
                 .append('line')
                 .attr('stroke', (d) => this.colorFunction(d))
-                .attr('stroke-linecap', this._lineCap)
-                .attr('stroke-width', 4)
+                .attr('stroke-linecap', 'round')
+                .attr('stroke-width', 6)
                 .attr('stroke-dasharray', (d, i) => this.dashFunction(d, i))
                 .attr('x1', 3)
                 .attr('x2', 29)
                 .attr('y1', '50%')
                 .attr('y2', '50%');
             // Only if data contains many lines
-            if (this._chartData.data.series.length <= this._lineTypes.length)
+            if (this._chartData.data.series.length <= this.lineTypes)
                 return;
             container
                 .selectAll('.legendSvg')
                 .filter((...[, i]) => {
-                return i > (this._lineTypes.length - 1);
+                return i > 2;
             })
                 .append('path')
-                .attr('d', (...[, i]) => this.symbolType(i, 70))
+                .attr('d', (...[, i]) => this.symbolType(i, 110))
                 .attr('fill', (d) => this.colorFunction(d))
                 .attr('transform', 'translate(16,14)');
         };
@@ -913,12 +907,6 @@ 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')
@@ -992,8 +980,7 @@ const ChartLine = /*@__PURE__*/ proxyCustomElement(class ChartLine extends H {
                 .selectAll('.linePath')
                 .transition('highlight')
                 .duration(150)
-                .attr('stroke', (d) => this.colorFunction(d))
-                .attr('stroke-width', this._strokeWidth);
+                .attr('stroke', (d) => this.colorFunction(d));
             this._lineChartContainer
                 .selectAll('.symbolGroup')
                 .selectAll('.symbol')
@@ -1015,8 +1002,8 @@ const ChartLine = /*@__PURE__*/ proxyCustomElement(class ChartLine extends H {
                 .join('path')
                 .attr('class', 'linePath')
                 .attr('stroke', (d) => this.colorFunction(d))
-                .attr('stroke-linecap', this._lineCap)
-                .attr('stroke-width', (d) => (d.length > 1 ? this._strokeWidth : 4))
+                .attr('stroke-linecap', 'round')
+                .attr('stroke-width', (d) => (d.length > 1 ? 4 : 6))
                 .attr('stroke-dasharray', (d, i) => d.length > 1 ? this.dashFunction(d, i) : null)
                 .attr('fill', 'none')
                 .attr('d', (d) => this._LineFunc(d.line));
@@ -1044,9 +1031,7 @@ const ChartLine = /*@__PURE__*/ proxyCustomElement(class ChartLine extends H {
             // Remove all old symbols
             this._lineChartContainer
                 .selectAll('.symbolGroup')
-                .data(this.reshapeData(this._chartData.data.series.filter(
-            // Symbols are only needed, when we are out of line types
-            (...[, index]) => index > (this._lineTypes.length - 1))))
+                .data(this.reshapeData(this._chartData.data.series.filter((...[, index]) => index > 2)))
                 .join((enter) => {
                 if (!transition) {
                     enter
@@ -1108,7 +1093,6 @@ 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],
@@ -1175,11 +1159,20 @@ const ChartLine = /*@__PURE__*/ proxyCustomElement(class ChartLine extends H {
                 }
             }, (exit) => exit.remove());
         };
-        // Returns a symbol type given a index
+        // Returns a symbol type given a index, currently we have support for 10 lines
         this.symbolType = (index, size) => {
-            return Symbol()
-                .type(this._strokeGlyphs[Math.trunc(index / this._lineTypes.length)])
-                .size(size ? size : 60)();
+            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)();
         };
         // Setting dimension variable
         this.setDims = (onlyHeight = false) => {
@@ -1352,8 +1345,7 @@ const ChartLine = /*@__PURE__*/ proxyCustomElement(class ChartLine extends H {
             // Heading
             this._tooltip.style('display', 'flex');
             const tooltipBody = this._tooltip.select('.tooltipBody');
-            const tooltipHead = this._tooltip.select('.tooltipHead');
-            tooltipHead
+            tooltipBody
                 .select(this._tooltipHeading)
                 .style('margin', '0 0.75rem 0 0 ')
                 .html(() => {
@@ -1462,7 +1454,7 @@ const ChartLine = /*@__PURE__*/ proxyCustomElement(class ChartLine extends H {
             this._xAxisHandle.select('.domain').attr('display', 'none');
             this._xAxisHandle
                 .selectAll('line')
-                .attr('stroke-linecap', this._lineCap)
+                .attr('stroke-linecap', 'round')
                 .attr('stroke', getComputedStyle(document.documentElement)
                 .getPropertyValue('--digi--global--color--neutral--grayscale--darkest-3')
                 .trim()
@@ -1690,8 +1682,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('.tooltipHead')
-            .insert(this._tooltipHeading, ':first-child') // increment heading level by one
+            .selectAll('.tooltipBody')
+            .append(this._tooltipHeading) // increment heading level by one
             .style('margin', '0 0.75rem')
             .style('font-weight', '500');
         this._maxHeight = select(this._host)
@@ -1762,8 +1754,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('.tooltipHead')
-            .insert(this._tooltipHeading, ':first-child') // increment heading level by one
+            .selectAll('.tooltipBody')
+            .append(this._tooltipHeading) // increment heading level by one
             .style('margin', '0 0.75rem')
             .style('font-weight', '500');
         this._maxHeight = select(this._host)
@@ -1844,8 +1836,8 @@ const ChartLine = /*@__PURE__*/ proxyCustomElement(class ChartLine extends H {
                 .join('path')
                 .attr('class', 'linePath')
                 .attr('stroke', 'lightgray')
-                .attr('stroke-linecap', this._lineCap)
-                .attr('stroke-width', this._strokeWidth)
+                .attr('stroke-linecap', 'round')
+                .attr('stroke-width', 4)
                 .attr('fill', 'none')
                 .attr('d', (d) => LineFunc(d))
                 .transition()
@@ -2002,8 +1994,8 @@ const ChartLine = /*@__PURE__*/ proxyCustomElement(class ChartLine extends H {
                     .join('path')
                     .attr('class', 'linePath')
                     .attr('stroke', (d) => this.colorFunction(d))
-                    .attr('stroke-linecap', this._lineCap)
-                    .attr('stroke-width', this._strokeWidth)
+                    .attr('stroke-linecap', 'round')
+                    .attr('stroke-width', 4)
                     .attr('fill', 'none')
                     .attr('stroke-dasharray', this.dashFunction)
                     .attr('stroke-dashoffset', null)
@@ -2042,8 +2034,8 @@ const ChartLine = /*@__PURE__*/ proxyCustomElement(class ChartLine extends H {
                 .ease(polyInOut)
                 .attr('class', 'linePath')
                 .attr('stroke', (d) => this.colorFunction(d))
-                .attr('stroke-linecap', this._lineCap)
-                .attr('stroke-width', (d) => (d.length > 1 ? this._strokeWidth : 4))
+                .attr('stroke-linecap', 'round')
+                .attr('stroke-width', (d) => (d.length > 1 ? 4 : 6))
                 .attr('fill', 'none')
                 .attr('stroke-dasharray', (d, i) => d.length > 1 ? this.dashFunction(d, i) : null)
                 .attr('d', (d) => this._LineFunc(d.line));
@@ -2073,8 +2065,7 @@ 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');
-            const tooltipHead = this._tooltip.select('.tooltipHead');
-            tooltipHead
+            tooltipBody
                 .select(this._tooltipHeading)
                 .style('margin', '0 0.75rem')
                 .html(() => {
@@ -2313,7 +2304,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: 'dde2a8a6656b495a214d73aa9b01a4a0c2528139', ref: (el) => (this._host = el) }, h("div", { key: '4e476379dab04918328e87d2a39d74fdf09ef99b', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: '3c0740888cb4e1050a3ee260d54e350cd7480ec8', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: 'bf7e20aceca6994d4765ed474c1078b2235d36fa', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: 'afe9fb92ebedc987f22178954ace520d429b31eb', slot: "icon" }), "Visa tabell"), h("digi-button", { key: '206651e7cb2214765c0cc020b21db9a97f5d7105', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: '524e209104e751a14fc033d4d5a62dafb80f82a7', slot: "icon" }), "Visa diagram"), h("div", { key: '7ef3b2c344ce1eb00a3a6980b33a59a9f154353b', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: '5cf28a143c4702872d7195e79917f42d35ff0fe1', class: "chartTooltip", id: this.afId }, h("div", { key: '4b2d910875117e2ee2680d7117a785efc43035f9', class: "tooltipHead" }, h("digi-icon-x", { key: '5b444b2c37f389b12b1ea5f606482623a7631f5f', class: "close" }), ' '), h("div", { key: 'a501394e125b4187d1727dbe7b1871081b534949', class: "tooltipBody" })), h("div", { key: '16209bc841bb18b57ed300e5378c214dab2ad47d', class: "chart", ref: (el) => (this._chartDiv = el) }), h("div", { key: '4a4e729d7efaeaf58cccd16557e1c3a364be5d77', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: 'ee822fc93847277af4b97277d105e5e7511f134e', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
+        return (h("host", { key: '23524b77e8aa2bb1cae912a08c4f35791074a769', ref: (el) => (this._host = el) }, h("div", { key: '75c7c1a8be55953b5547c5a3dd956027af73fbd1', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: '76e755f765d16611ecf82c2980f660f28cb0239a', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '6665f4a0c7f9ea09b938bd690f1ad2f2838f0c9c', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: '05aee665d9cd4d743c37cda816a3f5a3fe3128f5', slot: "icon" }), "Visa tabell"), h("digi-button", { key: '9f42b7ac02cb3f45d5d2503a9e12836bd76ce862', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: '43e9db95020bf3d24c68a24b269a179d70d8d056', slot: "icon" }), "Visa diagram"), h("div", { key: 'fc14ac6bf87466a5655dc5416bac08d0627a41ef', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: 'd65b4ea0b2a3a0abdc7a94e1cfb82e425ba50d2e', class: "chartTooltip", id: this.afId }, h("div", { key: '0ecff411dd746d6f21b53ae0d39729a55bedd957', class: "tooltipBody" }), h("digi-icon-x", { key: '9dd0ba013b81972e3e74b2e068b808f443ba7bf4', class: "close" }), ' '), h("div", { key: '371ba97658cd0e4f3a251bff860c45a43e9da9f1', class: "chart", ref: (el) => (this._chartDiv = el) }), h("div", { key: 'b4f5e4c1bc605f857910ec423f9de0285ac27e88', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: '6bcc5645b85e62d321a2c37cd365b2d36b577b9a', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
     }
     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-60acf10c.js';
+import { C as CodeBlock, d as defineCustomElement$1 } from './p-dc9fbc23.js';
 
 const DigiCodeBlock = CodeBlock;
 const defineCustomElement = defineCustomElement$1;

package/components/digi-code-example.js

@@ -4,11 +4,11 @@ import { b as ButtonVariation, B as ButtonSize } from './p-490d2653.js';
 import { _ as _t } from './p-42aa440f.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-60acf10c.js';
-import { d as defineCustomElement$5 } from './p-841ac620.js';
-import { d as defineCustomElement$4 } from './p-a483dee7.js';
-import { d as defineCustomElement$3 } from './p-e03e412c.js';
-import { d as defineCustomElement$2 } from './p-75f8b0c5.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';
 
 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: '2b299101185b04415ea649590ca86c3100ee5858', class: Object.assign({ 'digi-code-example': true }, this.cssModifiers), ref: (el) => (this.containerElement = el) }, h("div", { key: '9d76eb6d360da9ddbf2a68465bdc2bd733dd0837', class: {
+        return (h("div", { key: '1fc09f95af1e8f599b593ddad279743574ded843', class: Object.assign({ 'digi-code-example': true }, this.cssModifiers), ref: (el) => (this.containerElement = el) }, h("div", { key: '696edf1c732923293a2406393207eecd921b17de', class: {
                 'digi-code-example__container': true
-            } }, h("div", { key: '7efda3af27273f038a886a09216468bf7ab931b5', class: "digi-code-example__example" }, h("slot", { key: 'e3403f8b9c0ac7d394e85868aec41a17d147535b' })), !this.afHideCode && (h("div", { key: '714970e073a1648e424aa0e6134c92a7a2d60dde', class: "digi-code-example__code" }, this.showMoreButton && (h("button", { key: 'dffeab6754619b47f63acc0713b7335f7ae3b27c', class: "digi-code-example__code-expand", "aria-label": this.isActive ? _t.code.show_less : _t.code.show_more, "aria-expanded": this.isActive ? `true` : `false`, onClick: () => this.toggleButtonClickHandler() }, this.isActive ? _t.code.show_less : _t.code.show_more, ' ', h("digi-icon-chevron-down", { key: '21c6b69a1e9ec51e57697a20d093dd559a801927', class: {
+            } }, h("div", { key: '9cc7fa9e045bbeda26fa4b8d9f96efebc24da263', class: "digi-code-example__example" }, h("slot", { key: '01a468003e94818b1459b62b90a83a8304acaaa8' })), !this.afHideCode && (h("div", { key: '565f2d91029c63a867e3f80c12c736e5b03deec9', class: "digi-code-example__code" }, this.showMoreButton && (h("button", { key: '3cea8c377900e8244bc164318875b3e2b8c0b1a3', class: "digi-code-example__code-expand", "aria-label": this.isActive ? _t.code.show_less : _t.code.show_more, "aria-expanded": this.isActive ? `true` : `false`, onClick: () => this.toggleButtonClickHandler() }, this.isActive ? _t.code.show_less : _t.code.show_more, ' ', h("digi-icon-chevron-down", { key: '1b2260b6ba50e105d1cf7cfbd77b6506904ad138', class: {
                 'digi-code-example__code-expand-icon': true,
                 'digi-code-example__code-expand-icon--open': this.isActive
-            }, "aria-hidden": "true" }))), h("div", { key: '785500e88108b719a1b332e3100115a0d75f2e1a', class: {
+            }, "aria-hidden": "true" }))), h("div", { key: '5d3fc7f0415d1c7bf698d7275d3d04ca0f5fd4c5', class: {
                 'digi-code-example__codeblock': true,
                 'digi-code-example__codeblock--light': this.afCodeBlockVariation === 'light',
                 'digi-code-example__codeblock--dark': this.afCodeBlockVariation === 'dark',
                 'digi-code-example__codeblock--fade': !this.isActive && this.showMoreButton
-            } }, h("digi-code-block", { key: 'b425e48e77cfe980a13ac47690f40bc2b823d61a', afCode: this.codeExample || '', afLanguage: this.afLanguage.toLowerCase(), afVariation: this.afCodeBlockVariation, "af-hide-toolbar": true }), !this.isActive ? (h("div", { class: {
+            } }, h("digi-code-block", { key: 'c1caedb22bf5d4ebe05cb060e1500b9c25bb0865', afCode: this.codeExample || '', afLanguage: this.afLanguage.toLowerCase(), afVariation: this.afCodeBlockVariation, "af-hide-toolbar": true }), !this.isActive ? (h("div", { class: {
                 'digi-code-example__fade': true,
                 'digi-code-example__fade--dark': this.afCodeBlockVariation === 'dark',
                 'digi-code-example__fade--light': this.afCodeBlockVariation === 'light'

package/components/digi-code.js

@@ -31,7 +31,7 @@ const Code = /*@__PURE__*/ proxyCustomElement(class Code extends H {
         };
     }
     render() {
-        return (h("span", { key: '1f39309899332d922cec402858c49091f68e1ecd', class: Object.assign({ 'digi-code': true }, this.cssModifiers) }, h("code", { key: '5e6159edf847a046228df4d06e4dbf357fcfe956', class: `digi-code__code language-${this.afLanguage}`, lang: this.afLang, innerHTML: this.highlightedCode })));
+        return (h("span", { key: 'adc9ee7207dd03a4e7952c1f2b63261fae7f5ad3', class: Object.assign({ 'digi-code': true }, this.cssModifiers) }, h("code", { key: 'f65be5008fa9005ccf58779fce6786ecbb31b688', class: `digi-code__code language-${this.afLanguage}`, lang: this.afLang, innerHTML: this.highlightedCode })));
     }
     static get 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-e65f3dcc.js';
-import { d as defineCustomElement$2 } from './p-e03e412c.js';
+import { d as defineCustomElement$3 } from './p-9e6f28f2.js';
+import { d as defineCustomElement$2 } from './p-2c789cac.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: '3372fc401be95040432177cbb25ad47ca40212e5', class: 'digi-navigation-context-menu' }, h("div", { key: '3da3865a2929acf974411a01976d810c157991aa', id: `${this.afId}-identifier`, class: "digi-navigation-context-menu--id-wrapper" }, h("digi-button", { key: 'f89638b8484530cbd749de594edeb808126e32b3', 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: '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: {
                 'digi-navigation-context-menu__trigger-button': true,
                 'digi-navigation-context-menu--active': this.visible
-            } }, !!this.afIcon && h(this.digiIcon, { key: '437efaaef83c67bebb6c0f8c592d518cdcb10e90', slot: "icon" }), this.afTitle, h("digi-icon-chevron-down", { key: 'd88387b6f0c623f615b3d43450f78d738c45e5b9', class: "digi-navigation-context-menu__toggle-icon", slot: "icon-secondary" })), h("div", { key: '6c23f89ca621cabc1094c24897abac23ad9d37d6', class: "digi-navigation-context-menu__list" }, h("div", { key: '65fb0116c4a2b9e205aa855d5c7ee35d0a56b5b2', onKeyDown: (e) => {
+            } }, !!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.handleKey(e);
             }, id: `${this.afId}-dropdown`, style: {
                 visibility: this.visible ? 'visible' : 'hidden'