@lostgradient/cinder 0.1.1 → 0.2.0

package/dist/components/line-chart/index.js

@@ -388,6 +388,7 @@ function createBarModel(options) {
   const categoryTicks = sortedCategories.map((category, index) => {
     const categoryPosition = categoryScale(category.key) ?? 0;
     return {
+      categoryKey: category.key,
       label: formatXValue(category, orientation === "vertical" ? xAxis : yAxis, { index }),
       x: orientation === "vertical" ? categoryPosition + categoryScale.bandwidth() / 2 : -8,
       y: orientation === "vertical" ? geometry.plotHeight + 20 : categoryPosition + categoryScale.bandwidth() / 2
@@ -473,6 +474,7 @@ function createBarModel(options) {
     });
     if (rowValues.length > 0) {
       tableRows.push({
+        categoryKey: category.key,
         categoryLabel: formatXValue(category, orientation === "vertical" ? xAxis : yAxis, {
           index: tableRows.length
         }),
@@ -713,6 +715,125 @@ function formatPathNumber(value) {
   return Number(value.toFixed(3)).toString();
 }
 
+// src/_internal/chart/chart-focus-ring.ts
+var DEFAULT_CHART_FOCUS_RING_STROKE_PADDING = 8;
+var DEFAULT_POINT_FOCUS_RING_RADIUS = 10;
+var MINIMUM_FOCUS_RING_SIZE = 2;
+var MINIMUM_BAR_FOCUS_RING_SIZE = 12;
+var FOCUS_RING_DOT_RADIUS = 2.5;
+function createPointFocusRingGeometry(options) {
+  const {
+    target,
+    plotWidth,
+    plotHeight,
+    strokePadding = DEFAULT_CHART_FOCUS_RING_STROKE_PADDING,
+    radius = DEFAULT_POINT_FOCUS_RING_RADIUS
+  } = options;
+  if (plotWidth <= 0 || plotHeight <= 0)
+    return null;
+  const drawableWidth = plotWidth - strokePadding * 2;
+  const drawableHeight = plotHeight - strokePadding * 2;
+  const largestDrawableRadius = Math.min(drawableWidth, drawableHeight) / 2;
+  if (largestDrawableRadius < MINIMUM_FOCUS_RING_SIZE || drawableWidth < FOCUS_RING_DOT_RADIUS * 2 || drawableHeight < FOCUS_RING_DOT_RADIUS * 2) {
+    return createPlotFrameFocusRingGeometry(plotWidth, plotHeight, strokePadding);
+  }
+  const resolvedRadius = Math.min(Math.max(radius, MINIMUM_FOCUS_RING_SIZE), largestDrawableRadius);
+  const minimumCenterX = strokePadding + resolvedRadius;
+  const maximumCenterX = plotWidth - strokePadding - resolvedRadius;
+  const minimumCenterY = strokePadding + resolvedRadius;
+  const maximumCenterY = plotHeight - strokePadding - resolvedRadius;
+  const cx = clamp(target.x, minimumCenterX, maximumCenterX);
+  const cy = clamp(target.y, minimumCenterY, maximumCenterY);
+  const dotInset = strokePadding + FOCUS_RING_DOT_RADIUS;
+  let targetX = clamp(target.x, dotInset, plotWidth - dotInset);
+  let targetY = clamp(target.y, dotInset, plotHeight - dotInset);
+  const initialOffsetX = targetX - cx;
+  const initialOffsetY = targetY - cy;
+  const initialOffsetDistance = Math.hypot(initialOffsetX, initialOffsetY);
+  if (initialOffsetDistance > resolvedRadius) {
+    const scale = resolvedRadius / initialOffsetDistance;
+    targetX = cx + initialOffsetX * scale;
+    targetY = cy + initialOffsetY * scale;
+  }
+  const offsetX = targetX - cx;
+  const offsetY = targetY - cy;
+  const offsetDistance = Math.hypot(offsetX, offsetY);
+  const geometry = {
+    kind: "point",
+    cx,
+    cy,
+    radius: resolvedRadius,
+    targetX,
+    targetY,
+    offsetX,
+    offsetY,
+    offsetDistance
+  };
+  if (offsetDistance <= 0)
+    return geometry;
+  return {
+    ...geometry,
+    connector: {
+      x1: targetX,
+      y1: targetY,
+      x2: cx,
+      y2: cy
+    },
+    dot: {
+      cx: targetX,
+      cy: targetY,
+      radius: FOCUS_RING_DOT_RADIUS
+    }
+  };
+}
+function createBarFocusRingGeometry(options) {
+  const {
+    target,
+    plotWidth,
+    plotHeight,
+    strokePadding = DEFAULT_CHART_FOCUS_RING_STROKE_PADDING,
+    minimumWidth = MINIMUM_BAR_FOCUS_RING_SIZE,
+    minimumHeight = MINIMUM_BAR_FOCUS_RING_SIZE
+  } = options;
+  if (plotWidth <= 0 || plotHeight <= 0)
+    return null;
+  const requestedWidth = Math.max(target.width ?? 0, minimumWidth);
+  const requestedHeight = Math.max(target.height ?? 0, minimumHeight);
+  const drawableWidth = plotWidth - strokePadding * 2;
+  const drawableHeight = plotHeight - strokePadding * 2;
+  if (drawableWidth < MINIMUM_FOCUS_RING_SIZE || drawableHeight < MINIMUM_FOCUS_RING_SIZE) {
+    return createPlotFrameFocusRingGeometry(plotWidth, plotHeight, strokePadding);
+  }
+  const width = Math.min(requestedWidth, drawableWidth);
+  const height = Math.min(requestedHeight, drawableHeight);
+  const x = clamp(target.x - width / 2, strokePadding, plotWidth - width - strokePadding);
+  const y = clamp(target.y - height / 2, strokePadding, plotHeight - height - strokePadding);
+  return {
+    kind: "bar",
+    x,
+    y,
+    width,
+    height,
+    radius: Math.min(4, width / 2, height / 2)
+  };
+}
+function createPlotFrameFocusRingGeometry(plotWidth, plotHeight, strokePadding) {
+  const inset = Math.min(strokePadding, Math.max(0, plotWidth - MINIMUM_FOCUS_RING_SIZE) / 2, Math.max(0, plotHeight - MINIMUM_FOCUS_RING_SIZE) / 2);
+  return {
+    kind: "plot-frame",
+    x: inset,
+    y: inset,
+    width: Math.max(0, plotWidth - inset * 2),
+    height: Math.max(0, plotHeight - inset * 2),
+    radius: 0
+  };
+}
+function clamp(value, minimum, maximum) {
+  if (maximum < minimum)
+    return (minimum + maximum) / 2;
+  return Math.min(Math.max(value, minimum), maximum);
+}
+
 // src/_internal/chart/chart-interaction.svelte.ts
 import * as $ from "svelte/internal/client";
 class ChartInteraction {
@@ -839,13 +960,17 @@ var root_14 = $2.from_svg(`<path class="cinder-line-chart__line" aria-hidden="tr
 var root_17 = $2.from_svg(`<line class="cinder-line-chart__crosshair" y1="0" aria-hidden="true"></line>`);
 var root_20 = $2.from_svg(`<circle class="cinder-line-chart__focus-target" r="8" tabindex="0" role="button"></circle>`);
 var root_18 = $2.from_svg(`<rect class="cinder-line-chart__hit-surface" role="presentation"></rect><!>`, 1);
-var root_21 = $2.from_html(`<div role="tooltip" class="cinder-line-chart__tooltip"><strong> </strong> <span> </span></div>`);
-var root_22 = $2.from_html(`<p class="cinder-sr-only">Use the data table to inspect this chart with a keyboard.</p>`);
-var root_24 = $2.from_html(`<tr><th scope="row"> </th><td> </td><td> </td></tr>`);
-var root_23 = $2.from_html(`<table><caption> </caption><thead><tr><th scope="col">Series</th><th scope="col">X</th><th scope="col">Value</th></tr></thead><tbody></tbody></table>`);
-var root_26 = $2.from_html(`<button type="button"><span></span> </button>`);
-var root_25 = $2.from_html(`<div class="cinder-line-chart__legend" aria-label="Series"></div>`);
-var root = $2.from_html(`<figure><!> <!> <div class="cinder-line-chart__viewport"><!> <svg><!><g><!><!><!><!><!></g></svg> <!></div> <!> <!> <!></figure>`);
+var root_23 = $2.from_svg(`<path class="cinder-line-chart__focus-ring-connector cinder-line-chart__focus-ring-halo"></path><path class="cinder-line-chart__focus-ring-connector cinder-line-chart__focus-ring"></path><circle class="cinder-line-chart__focus-ring-dot cinder-line-chart__focus-ring-halo"></circle><circle class="cinder-line-chart__focus-ring-dot cinder-line-chart__focus-ring"></circle>`, 1);
+var root_22 = $2.from_svg(`<circle class="cinder-line-chart__focus-ring-halo"></circle><circle class="cinder-line-chart__focus-ring"></circle><!>`, 1);
+var root_24 = $2.from_svg(`<rect class="cinder-line-chart__focus-ring-halo"></rect><rect class="cinder-line-chart__focus-ring"></rect>`, 1);
+var root_21 = $2.from_svg(`<g class="cinder-line-chart__focus-ring-layer" aria-hidden="true"><!></g>`);
+var root_25 = $2.from_html(`<div role="tooltip" class="cinder-line-chart__tooltip"><strong> </strong> <span> </span></div>`);
+var root_26 = $2.from_html(`<p class="cinder-sr-only">Use the data table to inspect this chart with a keyboard.</p>`);
+var root_28 = $2.from_html(`<tr><th scope="row"> </th><td> </td><td> </td></tr>`);
+var root_27 = $2.from_html(`<table><caption> </caption><thead><tr><th scope="col">Series</th><th scope="col">X</th><th scope="col">Value</th></tr></thead><tbody></tbody></table>`);
+var root_30 = $2.from_html(`<button type="button"><span></span> </button>`);
+var root_29 = $2.from_html(`<div class="cinder-line-chart__legend" aria-label="Series"></div>`);
+var root = $2.from_html(`<figure><!> <!> <div class="cinder-line-chart__viewport"><!> <svg><!><g><!><!><!><!><!><!></g></svg> <!></div> <!> <!> <!></figure>`);
 function Line_chart($$anchor, $$props) {
   const generatedId = $2.props_id();
   $2.push($$props, true);
@@ -891,13 +1016,51 @@ function Line_chart($$anchor, $$props) {
   const keyboardEnabled = $2.derived(() => $2.get(model).targets.length > 0 && $2.get(model).targets.length <= maximumInteractivePoints());
   const hasDataTable = $2.derived(() => dataTableVisibility() !== "hidden");
   const guidanceId = $2.derived(() => !$2.get(keyboardEnabled) && $2.get(hasDataTable) && $2.get(model).targets.length > 0 ? `${$2.get(rootId)}-table-guidance` : undefined);
+  const focusedTarget = $2.derived(() => {
+    const currentTarget = interaction.focusedTarget;
+    if (!currentTarget)
+      return;
+    return $2.get(model).targets.find((target) => target.id === currentTarget.id);
+  });
+  let keyboardFocusModality = $2.state(false);
+  let focusVisibleTargetId = $2.state(undefined);
+  const focusRingTarget = $2.derived(() => $2.get(keyboardFocusModality) && $2.get(focusedTarget) && $2.get(focusVisibleTargetId) === $2.get(focusedTarget).id ? $2.get(focusedTarget) : undefined);
+  const pointFocusRing = $2.derived(() => $2.get(focusRingTarget) ? createPointFocusRingGeometry({
+    target: $2.get(focusRingTarget),
+    plotWidth: $2.get(model).geometry.plotWidth,
+    plotHeight: $2.get(model).geometry.plotHeight,
+    strokePadding: DEFAULT_CHART_FOCUS_RING_STROKE_PADDING
+  }) : null);
   $2.user_effect(() => {
     assertValidNonNegativeInteger("line-chart", "invalid-maximum-interactive-points", maximumInteractivePoints(), "maximumInteractivePoints");
   });
   $2.user_effect(() => {
     interaction.clearStaleTargets(loading(), $2.get(model).empty, $2.get(model).targets);
   });
+  function rememberKeyboardFocusModality(event2) {
+    if (event2.key === "Tab" || event2.key === "Home" || event2.key === "End" || event2.key.startsWith("Arrow")) {
+      $2.set(keyboardFocusModality, true);
+    }
+  }
+  function clearKeyboardFocusModality() {
+    $2.set(keyboardFocusModality, false);
+    $2.set(focusVisibleTargetId, undefined);
+  }
+  function handleTargetFocus(target) {
+    interaction.focusedTarget = target;
+    $2.set(focusVisibleTargetId, $2.get(keyboardFocusModality) ? target.id : undefined, true);
+  }
+  function handleTargetBlur() {
+    interaction.focusedTarget = undefined;
+    $2.set(focusVisibleTargetId, undefined);
+  }
+  function handleTargetKeydown(event2) {
+    rememberKeyboardFocusModality(event2);
+    interaction.activateByKeyboard(event2, $2.get(rootElement), $2.get(model).targets, $2.get(keyboardEnabled));
+  }
   var figure = root();
+  $2.event("keydown", $2.window, rememberKeyboardFocusModality);
+  $2.event("pointerdown", $2.window, clearKeyboardFocusModality);
   $2.attribute_effect(figure, ($0) => ({
     ...rest,
     id: $2.get(rootId),
@@ -926,7 +1089,7 @@ function Line_chart($$anchor, $$props) {
   {
     var consequent_1 = ($$anchor2) => {
       var div = root_2();
-      $2.each(div, 23, () => $$props.series, (item) => item.id, ($$anchor3, item, index2) => {
+      $2.each(div, 23, () => $$props.series, (item) => item.id, ($$anchor3, item, index) => {
         var button = root_3();
         var span = $2.child(button);
         let styles;
@@ -939,7 +1102,7 @@ function Line_chart($$anchor, $$props) {
         }, [
           () => !hiddenSeriesIds().includes($2.get(item).id),
           () => ({
-            background: $2.get(item).color ?? chartPaletteColor($2.get(index2))
+            background: $2.get(item).color ?? chartPaletteColor($2.get(index))
           })
         ]);
         $2.delegated("click", button, () => hiddenSeriesIds(interaction.toggleSeries(hiddenSeriesIds(), $2.get(item).id)));
@@ -1033,8 +1196,8 @@ function Line_chart($$anchor, $$props) {
   }
   var g = $2.sibling(node_7);
   var node_8 = $2.child(g);
-  $2.each(node_8, 17, () => $2.get(model).yTicks, $2.index, ($$anchor2, tick, index2) => {
-    const tickY = $2.derived(() => $2.get(model).geometry.plotHeight - ($2.get(tick) - $2.get(model).yDomain[0]) / ($2.get(model).yDomain[1] - $2.get(model).yDomain[0]) * $2.get(model).geometry.plotHeight);
+  $2.each(node_8, 18, () => $2.get(model).yTicks, (tick) => tick, ($$anchor2, tick, index) => {
+    const tickY = $2.derived(() => $2.get(model).geometry.plotHeight - (tick - $2.get(model).yDomain[0]) / ($2.get(model).yDomain[1] - $2.get(model).yDomain[0]) * $2.get(model).geometry.plotHeight);
     var fragment_2 = root_11();
     var line = $2.first_child(fragment_2);
     var text_5 = $2.sibling(line);
@@ -1047,7 +1210,7 @@ function Line_chart($$anchor, $$props) {
       $2.set_attribute(text_5, "y", $2.get(tickY));
       $2.set_text(text_6, $0);
     }, [
-      () => formatNumericValue($2.get(tick), $$props.yAxis, undefined, { index: index2 })
+      () => formatNumericValue(tick, $$props.yAxis, undefined, { index: $2.get(index) })
     ]);
     $2.append($$anchor2, fragment_2);
   });
@@ -1139,12 +1302,14 @@ function Line_chart($$anchor, $$props) {
               $2.set_attribute(circle_1, "cx", $2.get(target).x);
               $2.set_attribute(circle_1, "cy", $2.get(target).y);
               $2.set_attribute(circle_1, "data-cinder-target-id", $2.get(target).id);
+              $2.set_attribute(circle_1, "data-cinder-series-id", $2.get(target).seriesId);
+              $2.set_attribute(circle_1, "data-cinder-focus-ring-active", $2.get(pointFocusRing) && $2.get(focusRingTarget)?.id === $2.get(target).id ? "true" : undefined);
               $2.set_attribute(circle_1, "aria-label", `${$2.get(target).seriesLabel}, ${$2.get(target).xLabel}, ${$2.get(target).valueLabel}`);
               $2.set_attribute(circle_1, "aria-describedby", interaction.activeTarget?.id === $2.get(target).id ? `${$2.get(rootId)}-tooltip` : undefined);
             });
-            $2.event("focus", circle_1, () => interaction.focusedTarget = $2.get(target));
-            $2.event("blur", circle_1, () => interaction.focusedTarget = undefined);
-            $2.delegated("keydown", circle_1, (event2) => interaction.activateByKeyboard(event2, $2.get(rootElement), $2.get(model).targets, $2.get(keyboardEnabled)));
+            $2.event("focus", circle_1, () => handleTargetFocus($2.get(target)));
+            $2.event("blur", circle_1, handleTargetBlur);
+            $2.delegated("keydown", circle_1, handleTargetKeydown);
             $2.append($$anchor4, circle_1);
           });
           $2.append($$anchor3, fragment_7);
@@ -1167,12 +1332,90 @@ function Line_chart($$anchor, $$props) {
         $$render(consequent_11);
     });
   }
+  var node_18 = $2.sibling(node_15);
+  {
+    var consequent_14 = ($$anchor2) => {
+      var g_1 = root_21();
+      var node_19 = $2.child(g_1);
+      {
+        var consequent_13 = ($$anchor3) => {
+          var fragment_8 = root_22();
+          var circle_2 = $2.first_child(fragment_8);
+          var circle_3 = $2.sibling(circle_2);
+          var node_20 = $2.sibling(circle_3);
+          {
+            var consequent_12 = ($$anchor4) => {
+              var fragment_9 = root_23();
+              var path_1 = $2.first_child(fragment_9);
+              var path_2 = $2.sibling(path_1);
+              var circle_4 = $2.sibling(path_2);
+              var circle_5 = $2.sibling(circle_4);
+              $2.template_effect(() => {
+                $2.set_attribute(path_1, "d", `M ${$2.get(pointFocusRing).connector.x1} ${$2.get(pointFocusRing).connector.y1} L ${$2.get(pointFocusRing).connector.x2} ${$2.get(pointFocusRing).connector.y2}`);
+                $2.set_attribute(path_2, "d", `M ${$2.get(pointFocusRing).connector.x1} ${$2.get(pointFocusRing).connector.y1} L ${$2.get(pointFocusRing).connector.x2} ${$2.get(pointFocusRing).connector.y2}`);
+                $2.set_attribute(circle_4, "cx", $2.get(pointFocusRing).dot.cx);
+                $2.set_attribute(circle_4, "cy", $2.get(pointFocusRing).dot.cy);
+                $2.set_attribute(circle_4, "r", $2.get(pointFocusRing).dot.radius);
+                $2.set_attribute(circle_5, "cx", $2.get(pointFocusRing).dot.cx);
+                $2.set_attribute(circle_5, "cy", $2.get(pointFocusRing).dot.cy);
+                $2.set_attribute(circle_5, "r", $2.get(pointFocusRing).dot.radius);
+              });
+              $2.append($$anchor4, fragment_9);
+            };
+            $2.if(node_20, ($$render) => {
+              if ($2.get(pointFocusRing).connector && $2.get(pointFocusRing).dot)
+                $$render(consequent_12);
+            });
+          }
+          $2.template_effect(() => {
+            $2.set_attribute(circle_2, "cx", $2.get(pointFocusRing).cx);
+            $2.set_attribute(circle_2, "cy", $2.get(pointFocusRing).cy);
+            $2.set_attribute(circle_2, "r", $2.get(pointFocusRing).radius);
+            $2.set_attribute(circle_3, "cx", $2.get(pointFocusRing).cx);
+            $2.set_attribute(circle_3, "cy", $2.get(pointFocusRing).cy);
+            $2.set_attribute(circle_3, "r", $2.get(pointFocusRing).radius);
+          });
+          $2.append($$anchor3, fragment_8);
+        };
+        var alternate_2 = ($$anchor3) => {
+          var fragment_10 = root_24();
+          var rect_1 = $2.first_child(fragment_10);
+          var rect_2 = $2.sibling(rect_1);
+          $2.template_effect(() => {
+            $2.set_attribute(rect_1, "x", $2.get(pointFocusRing).x);
+            $2.set_attribute(rect_1, "y", $2.get(pointFocusRing).y);
+            $2.set_attribute(rect_1, "width", $2.get(pointFocusRing).width);
+            $2.set_attribute(rect_1, "height", $2.get(pointFocusRing).height);
+            $2.set_attribute(rect_1, "rx", $2.get(pointFocusRing).radius);
+            $2.set_attribute(rect_2, "x", $2.get(pointFocusRing).x);
+            $2.set_attribute(rect_2, "y", $2.get(pointFocusRing).y);
+            $2.set_attribute(rect_2, "width", $2.get(pointFocusRing).width);
+            $2.set_attribute(rect_2, "height", $2.get(pointFocusRing).height);
+            $2.set_attribute(rect_2, "rx", $2.get(pointFocusRing).radius);
+          });
+          $2.append($$anchor3, fragment_10);
+        };
+        $2.if(node_19, ($$render) => {
+          if ($2.get(pointFocusRing).kind === "point")
+            $$render(consequent_13);
+          else
+            $$render(alternate_2, -1);
+        });
+      }
+      $2.reset(g_1);
+      $2.append($$anchor2, g_1);
+    };
+    $2.if(node_18, ($$render) => {
+      if ($2.get(pointFocusRing))
+        $$render(consequent_14);
+    });
+  }
   $2.reset(g);
   $2.reset(svg);
-  var node_18 = $2.sibling(svg, 2);
+  var node_21 = $2.sibling(svg, 2);
   {
-    var consequent_12 = ($$anchor2) => {
-      var div_4 = root_21();
+    var consequent_15 = ($$anchor2) => {
+      var div_4 = root_25();
       let styles_2;
       var strong = $2.child(div_4);
       var text_9 = $2.child(strong, true);
@@ -1192,34 +1435,34 @@ function Line_chart($$anchor, $$props) {
       });
       $2.append($$anchor2, div_4);
     };
-    $2.if(node_18, ($$render) => {
+    $2.if(node_21, ($$render) => {
       if (interaction.activeTarget)
-        $$render(consequent_12);
+        $$render(consequent_15);
     });
   }
   $2.reset(div_1);
-  var node_19 = $2.sibling(div_1, 2);
+  var node_22 = $2.sibling(div_1, 2);
   {
-    var consequent_13 = ($$anchor2) => {
-      var p_1 = root_22();
+    var consequent_16 = ($$anchor2) => {
+      var p_1 = root_26();
       $2.template_effect(() => $2.set_attribute(p_1, "id", $2.get(guidanceId)));
       $2.append($$anchor2, p_1);
     };
-    $2.if(node_19, ($$render) => {
+    $2.if(node_22, ($$render) => {
       if ($2.get(guidanceId))
-        $$render(consequent_13);
+        $$render(consequent_16);
     });
   }
-  var node_20 = $2.sibling(node_19, 2);
+  var node_23 = $2.sibling(node_22, 2);
   {
-    var consequent_14 = ($$anchor2) => {
-      var table = root_23();
+    var consequent_17 = ($$anchor2) => {
+      var table = root_27();
       var caption = $2.child(table);
       var text_11 = $2.child(caption, true);
       $2.reset(caption);
       var tbody = $2.sibling(caption, 2);
       $2.each(tbody, 21, () => $2.get(model).tableRows, (row) => row.id, ($$anchor3, row) => {
-        var tr = root_24();
+        var tr = root_28();
         var th = $2.child(tr);
         var text_12 = $2.child(th, true);
         $2.reset(th);
@@ -1246,17 +1489,17 @@ function Line_chart($$anchor, $$props) {
       }, [() => $2.clsx(dataTableClass(dataTableVisibility()))]);
       $2.append($$anchor2, table);
     };
-    $2.if(node_20, ($$render) => {
+    $2.if(node_23, ($$render) => {
       if ($2.get(hasDataTable))
-        $$render(consequent_14);
+        $$render(consequent_17);
     });
   }
-  var node_21 = $2.sibling(node_20, 2);
+  var node_24 = $2.sibling(node_23, 2);
   {
-    var consequent_15 = ($$anchor2) => {
-      var div_5 = root_25();
-      $2.each(div_5, 23, () => $$props.series, (item) => item.id, ($$anchor3, item, index2) => {
-        var button_1 = root_26();
+    var consequent_18 = ($$anchor2) => {
+      var div_5 = root_29();
+      $2.each(div_5, 23, () => $$props.series, (item) => item.id, ($$anchor3, item, index) => {
+        var button_1 = root_30();
         var span_2 = $2.child(button_1);
         let styles_3;
         var text_15 = $2.sibling(span_2, 1, true);
@@ -1268,7 +1511,7 @@ function Line_chart($$anchor, $$props) {
         }, [
           () => !hiddenSeriesIds().includes($2.get(item).id),
           () => ({
-            background: $2.get(item).color ?? chartPaletteColor($2.get(index2))
+            background: $2.get(item).color ?? chartPaletteColor($2.get(index))
           })
         ]);
         $2.delegated("click", button_1, () => hiddenSeriesIds(interaction.toggleSeries(hiddenSeriesIds(), $2.get(item).id)));
@@ -1278,9 +1521,9 @@ function Line_chart($$anchor, $$props) {
       $2.append($$anchor2, div_5);
     };
     var d_1 = $2.derived(() => legendVisible(legendPosition(), $$props.series.length) && legendPosition() === "bottom");
-    $2.if(node_21, ($$render) => {
+    $2.if(node_24, ($$render) => {
       if ($2.get(d_1))
-        $$render(consequent_15);
+        $$render(consequent_18);
     });
   }
   $2.reset(figure);
@@ -1305,4 +1548,4 @@ export {
   Line_chart as LineChart
 };
 
-//# debugId=15F9FB4EF0C1CCCC64756E2164756E21
+//# debugId=53376974C48AD91264756E2164756E21

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

@@ -81,15 +81,64 @@
     pointer-events: none;
   }
 
-  /*
- * SVG focus indicator: drop-shadow filter renders an outline-equivalent ring
- * around the focused circle that stays visible on any background. Stroke alone
- * was invisible against transparent fills.
- */
-  .cinder-line-chart__focus-target:focus-visible {
-    stroke: var(--cinder-accent);
+  .cinder-line-chart__focus-target:focus-visible:not([data-cinder-focus-ring-active='true']) {
+    fill: transparent;
+    stroke: var(--cinder-ring-color);
+    stroke-width: var(--cinder-ring-width);
+    vector-effect: non-scaling-stroke;
+    filter: none;
+  }
+
+  .cinder-line-chart__focus-ring-layer {
+    pointer-events: none;
+  }
+
+  .cinder-line-chart__focus-ring,
+  .cinder-line-chart__focus-ring-halo,
+  .cinder-line-chart__focus-ring-connector,
+  .cinder-line-chart__focus-ring-dot {
+    fill: none;
+    pointer-events: none;
+    vector-effect: non-scaling-stroke;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .cinder-line-chart__focus-ring {
+    stroke: var(--cinder-ring-color);
     stroke-width: var(--cinder-ring-width);
-    filter: drop-shadow(0 0 var(--cinder-ring-width) var(--cinder-ring-color));
+    filter: none;
+  }
+
+  .cinder-line-chart__focus-ring-halo {
+    stroke: var(--cinder-ring-offset-color);
+    stroke-width: calc(
+      var(--cinder-ring-width) + var(--cinder-ring-offset) + var(--cinder-ring-offset)
+    );
+    filter: none;
+  }
+
+  @media (forced-colors: active) {
+    .cinder-line-chart__focus-ring-halo {
+      display: none;
+    }
+
+    .cinder-line-chart__focus-ring,
+    .cinder-line-chart__focus-ring-connector,
+    .cinder-line-chart__focus-ring-dot {
+      fill: none;
+      stroke: ButtonText;
+      stroke-width: var(--cinder-ring-width);
+      filter: none;
+    }
+
+    .cinder-line-chart__focus-target:focus-visible:not([data-cinder-focus-ring-active='true']) {
+      fill: transparent;
+      stroke: ButtonText;
+      stroke-width: var(--cinder-ring-width);
+      vector-effect: non-scaling-stroke;
+      filter: none;
+    }
   }
 
   .cinder-line-chart__tick-label {