@lostgradient/cinder 0.1.1 → 0.3.0

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

@@ -1,34 +1,4 @@
-var __create = Object.create;
-var __getProtoOf = Object.getPrototypeOf;
 var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-function __accessProp(key) {
-  return this[key];
-}
-var __toESMCache_node;
-var __toESMCache_esm;
-var __toESM = (mod, isNodeMode, target) => {
-  var canCache = mod != null && typeof mod === "object";
-  if (canCache) {
-    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
-    var cached = cache.get(mod);
-    if (cached)
-      return cached;
-  }
-  target = mod != null ? __create(__getProtoOf(mod)) : {};
-  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
-  for (let key of __getOwnPropNames(mod))
-    if (!__hasOwnProp.call(to, key))
-      __defProp(to, key, {
-        get: __accessProp.bind(mod, key),
-        enumerable: true
-      });
-  if (canCache)
-    cache.set(mod, to);
-  return to;
-};
-var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
 var __returnValue = (v) => v;
 function __exportSetter(name, newValue) {
   this[name] = __returnValue.bind(null, newValue);
@@ -388,6 +358,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 +444,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 +685,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 {
@@ -838,13 +929,17 @@ var root_14 = $2.from_svg(`<path class="cinder-area-chart__area" aria-hidden="tr
 var root_15 = $2.from_svg(`<line class="cinder-area-chart__crosshair" y1="0" aria-hidden="true"></line>`);
 var root_18 = $2.from_svg(`<circle class="cinder-area-chart__focus-target" r="8" tabindex="0" role="button"></circle>`);
 var root_16 = $2.from_svg(`<rect class="cinder-area-chart__hit-surface" role="presentation"></rect><!>`, 1);
-var root_19 = $2.from_html(`<div role="tooltip" class="cinder-area-chart__tooltip"><strong> </strong><span> </span></div>`);
-var root_20 = $2.from_html(`<p class="cinder-sr-only">Use the data table to inspect this chart with a keyboard.</p>`);
-var root_22 = $2.from_html(`<tr><th scope="row"> </th><td> </td><td> </td></tr>`);
-var root_21 = $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_24 = $2.from_html(`<button type="button"><span></span> </button>`);
-var root_23 = $2.from_html(`<div class="cinder-area-chart__legend" aria-label="Series"></div>`);
-var root = $2.from_html(`<figure><!> <!> <div class="cinder-area-chart__viewport"><!> <svg><!><g><!><!><!><!><!></g></svg> <!></div> <!> <!> <!></figure>`);
+var root_21 = $2.from_svg(`<path class="cinder-area-chart__focus-ring-connector cinder-area-chart__focus-ring-halo"></path><path class="cinder-area-chart__focus-ring-connector cinder-area-chart__focus-ring"></path><circle class="cinder-area-chart__focus-ring-dot cinder-area-chart__focus-ring-halo"></circle><circle class="cinder-area-chart__focus-ring-dot cinder-area-chart__focus-ring"></circle>`, 1);
+var root_20 = $2.from_svg(`<circle class="cinder-area-chart__focus-ring-halo"></circle><circle class="cinder-area-chart__focus-ring"></circle><!>`, 1);
+var root_22 = $2.from_svg(`<rect class="cinder-area-chart__focus-ring-halo"></rect><rect class="cinder-area-chart__focus-ring"></rect>`, 1);
+var root_19 = $2.from_svg(`<g class="cinder-area-chart__focus-ring-layer" aria-hidden="true"><!></g>`);
+var root_23 = $2.from_html(`<div role="tooltip" class="cinder-area-chart__tooltip"><strong> </strong><span> </span></div>`);
+var root_24 = $2.from_html(`<p class="cinder-sr-only">Use the data table to inspect this chart with a keyboard.</p>`);
+var root_26 = $2.from_html(`<tr><th scope="row"> </th><td> </td><td> </td></tr>`);
+var root_25 = $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_28 = $2.from_html(`<button type="button"><span></span> </button>`);
+var root_27 = $2.from_html(`<div class="cinder-area-chart__legend" aria-label="Series"></div>`);
+var root = $2.from_html(`<figure><!> <!> <div class="cinder-area-chart__viewport"><!> <svg><!><g><!><!><!><!><!><!></g></svg> <!></div> <!> <!> <!></figure>`);
 function Area_chart($$anchor, $$props) {
   const generatedId = $2.props_id();
   $2.push($$props, true);
@@ -892,13 +987,51 @@ function Area_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("area-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),
@@ -928,7 +1061,7 @@ function Area_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;
@@ -941,7 +1074,7 @@ function Area_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)));
@@ -1035,8 +1168,8 @@ function Area_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);
@@ -1049,7 +1182,7 @@ function Area_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);
   });
@@ -1123,12 +1256,14 @@ function Area_chart($$anchor, $$props) {
               $2.set_attribute(circle, "cx", $2.get(target).x);
               $2.set_attribute(circle, "cy", $2.get(target).y);
               $2.set_attribute(circle, "data-cinder-target-id", $2.get(target).id);
+              $2.set_attribute(circle, "data-cinder-series-id", $2.get(target).seriesId);
+              $2.set_attribute(circle, "data-cinder-focus-ring-active", $2.get(pointFocusRing) && $2.get(focusRingTarget)?.id === $2.get(target).id ? "true" : undefined);
               $2.set_attribute(circle, "aria-label", `${$2.get(target).seriesLabel}, ${$2.get(target).xLabel}, ${$2.get(target).valueLabel}`);
               $2.set_attribute(circle, "aria-describedby", interaction.activeTarget?.id === $2.get(target).id ? `${$2.get(rootId)}-tooltip` : undefined);
             });
-            $2.event("focus", circle, () => interaction.focusedTarget = $2.get(target));
-            $2.event("blur", circle, () => interaction.focusedTarget = undefined);
-            $2.delegated("keydown", circle, (event2) => interaction.activateByKeyboard(event2, $2.get(rootElement), $2.get(model).targets, $2.get(keyboardEnabled)));
+            $2.event("focus", circle, () => handleTargetFocus($2.get(target)));
+            $2.event("blur", circle, handleTargetBlur);
+            $2.delegated("keydown", circle, handleTargetKeydown);
             $2.append($$anchor4, circle);
           });
           $2.append($$anchor3, fragment_6);
@@ -1151,12 +1286,90 @@ function Area_chart($$anchor, $$props) {
         $$render(consequent_10);
     });
   }
+  var node_16 = $2.sibling(node_13);
+  {
+    var consequent_13 = ($$anchor2) => {
+      var g_1 = root_19();
+      var node_17 = $2.child(g_1);
+      {
+        var consequent_12 = ($$anchor3) => {
+          var fragment_7 = root_20();
+          var circle_1 = $2.first_child(fragment_7);
+          var circle_2 = $2.sibling(circle_1);
+          var node_18 = $2.sibling(circle_2);
+          {
+            var consequent_11 = ($$anchor4) => {
+              var fragment_8 = root_21();
+              var path_2 = $2.first_child(fragment_8);
+              var path_3 = $2.sibling(path_2);
+              var circle_3 = $2.sibling(path_3);
+              var circle_4 = $2.sibling(circle_3);
+              $2.template_effect(() => {
+                $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(path_3, "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_3, "cx", $2.get(pointFocusRing).dot.cx);
+                $2.set_attribute(circle_3, "cy", $2.get(pointFocusRing).dot.cy);
+                $2.set_attribute(circle_3, "r", $2.get(pointFocusRing).dot.radius);
+                $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.append($$anchor4, fragment_8);
+            };
+            $2.if(node_18, ($$render) => {
+              if ($2.get(pointFocusRing).connector && $2.get(pointFocusRing).dot)
+                $$render(consequent_11);
+            });
+          }
+          $2.template_effect(() => {
+            $2.set_attribute(circle_1, "cx", $2.get(pointFocusRing).cx);
+            $2.set_attribute(circle_1, "cy", $2.get(pointFocusRing).cy);
+            $2.set_attribute(circle_1, "r", $2.get(pointFocusRing).radius);
+            $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.append($$anchor3, fragment_7);
+        };
+        var alternate_2 = ($$anchor3) => {
+          var fragment_9 = root_22();
+          var rect_1 = $2.first_child(fragment_9);
+          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_9);
+        };
+        $2.if(node_17, ($$render) => {
+          if ($2.get(pointFocusRing).kind === "point")
+            $$render(consequent_12);
+          else
+            $$render(alternate_2, -1);
+        });
+      }
+      $2.reset(g_1);
+      $2.append($$anchor2, g_1);
+    };
+    $2.if(node_16, ($$render) => {
+      if ($2.get(pointFocusRing))
+        $$render(consequent_13);
+    });
+  }
   $2.reset(g);
   $2.reset(svg);
-  var node_16 = $2.sibling(svg, 2);
+  var node_19 = $2.sibling(svg, 2);
   {
-    var consequent_11 = ($$anchor2) => {
-      var div_4 = root_19();
+    var consequent_14 = ($$anchor2) => {
+      var div_4 = root_23();
       let styles_2;
       var strong = $2.child(div_4);
       var text_9 = $2.child(strong, true);
@@ -1176,34 +1389,34 @@ function Area_chart($$anchor, $$props) {
       });
       $2.append($$anchor2, div_4);
     };
-    $2.if(node_16, ($$render) => {
+    $2.if(node_19, ($$render) => {
       if (interaction.activeTarget)
-        $$render(consequent_11);
+        $$render(consequent_14);
     });
   }
   $2.reset(div_1);
-  var node_17 = $2.sibling(div_1, 2);
+  var node_20 = $2.sibling(div_1, 2);
   {
-    var consequent_12 = ($$anchor2) => {
-      var p_1 = root_20();
+    var consequent_15 = ($$anchor2) => {
+      var p_1 = root_24();
       $2.template_effect(() => $2.set_attribute(p_1, "id", $2.get(guidanceId)));
       $2.append($$anchor2, p_1);
     };
-    $2.if(node_17, ($$render) => {
+    $2.if(node_20, ($$render) => {
       if ($2.get(guidanceId))
-        $$render(consequent_12);
+        $$render(consequent_15);
     });
   }
-  var node_18 = $2.sibling(node_17, 2);
+  var node_21 = $2.sibling(node_20, 2);
   {
-    var consequent_13 = ($$anchor2) => {
-      var table = root_21();
+    var consequent_16 = ($$anchor2) => {
+      var table = root_25();
       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_22();
+        var tr = root_26();
         var th = $2.child(tr);
         var text_12 = $2.child(th, true);
         $2.reset(th);
@@ -1230,17 +1443,17 @@ function Area_chart($$anchor, $$props) {
       }, [() => $2.clsx(dataTableClass(dataTableVisibility()))]);
       $2.append($$anchor2, table);
     };
-    $2.if(node_18, ($$render) => {
+    $2.if(node_21, ($$render) => {
       if ($2.get(hasDataTable))
-        $$render(consequent_13);
+        $$render(consequent_16);
     });
   }
-  var node_19 = $2.sibling(node_18, 2);
+  var node_22 = $2.sibling(node_21, 2);
   {
-    var consequent_14 = ($$anchor2) => {
-      var div_5 = root_23();
-      $2.each(div_5, 23, () => $$props.series, (item) => item.id, ($$anchor3, item, index2) => {
-        var button_1 = root_24();
+    var consequent_17 = ($$anchor2) => {
+      var div_5 = root_27();
+      $2.each(div_5, 23, () => $$props.series, (item) => item.id, ($$anchor3, item, index) => {
+        var button_1 = root_28();
         var span_2 = $2.child(button_1);
         let styles_3;
         var text_15 = $2.sibling(span_2, 1, true);
@@ -1252,7 +1465,7 @@ function Area_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)));
@@ -1262,9 +1475,9 @@ function Area_chart($$anchor, $$props) {
       $2.append($$anchor2, div_5);
     };
     var d_1 = $2.derived(() => legendVisible(legendPosition(), $$props.series.length) && legendPosition() === "bottom");
-    $2.if(node_19, ($$render) => {
+    $2.if(node_22, ($$render) => {
       if ($2.get(d_1))
-        $$render(consequent_14);
+        $$render(consequent_17);
     });
   }
   $2.reset(figure);
@@ -1289,4 +1502,4 @@ export {
   Area_chart as AreaChart
 };
 
-//# debugId=E08C37095A8BCE8964756E2164756E21
+//# debugId=7AF6234BF939727464756E2164756E21

package/dist/components/aspect-ratio/aspect-ratio.schema.js

@@ -1,34 +1,4 @@
-var __create = Object.create;
-var __getProtoOf = Object.getPrototypeOf;
 var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-function __accessProp(key) {
-  return this[key];
-}
-var __toESMCache_node;
-var __toESMCache_esm;
-var __toESM = (mod, isNodeMode, target) => {
-  var canCache = mod != null && typeof mod === "object";
-  if (canCache) {
-    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
-    var cached = cache.get(mod);
-    if (cached)
-      return cached;
-  }
-  target = mod != null ? __create(__getProtoOf(mod)) : {};
-  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
-  for (let key of __getOwnPropNames(mod))
-    if (!__hasOwnProp.call(to, key))
-      __defProp(to, key, {
-        get: __accessProp.bind(mod, key),
-        enumerable: true
-      });
-  if (canCache)
-    cache.set(mod, to);
-  return to;
-};
-var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
 var __returnValue = (v) => v;
 function __exportSetter(name, newValue) {
   this[name] = __returnValue.bind(null, newValue);
@@ -183,11 +153,21 @@ var schema = {
       description: "Additional classes merged onto the root element."
     }
   },
-  additionalProperties: false
+  additionalProperties: false,
+  metadata: {
+    unsupportedProps: [
+      {
+        name: "children",
+        reason: "function-or-snippet",
+        required: true,
+        description: "Required content rendered inside the ratio box."
+      }
+    ]
+  }
 };
 var aspect_ratio_schema_default = schema;
 export {
   aspect_ratio_schema_default as default
 };
 
-//# debugId=47026FD39156BD5C64756E2164756E21
+//# debugId=078EE6093546AB5D64756E2164756E21

package/dist/components/aspect-ratio/aspect-ratio.variables.js

@@ -1,34 +1,4 @@
-var __create = Object.create;
-var __getProtoOf = Object.getPrototypeOf;
 var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-function __accessProp(key) {
-  return this[key];
-}
-var __toESMCache_node;
-var __toESMCache_esm;
-var __toESM = (mod, isNodeMode, target) => {
-  var canCache = mod != null && typeof mod === "object";
-  if (canCache) {
-    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
-    var cached = cache.get(mod);
-    if (cached)
-      return cached;
-  }
-  target = mod != null ? __create(__getProtoOf(mod)) : {};
-  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
-  for (let key of __getOwnPropNames(mod))
-    if (!__hasOwnProp.call(to, key))
-      __defProp(to, key, {
-        get: __accessProp.bind(mod, key),
-        enumerable: true
-      });
-  if (canCache)
-    cache.set(mod, to);
-  return to;
-};
-var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
 var __returnValue = (v) => v;
 function __exportSetter(name, newValue) {
   this[name] = __returnValue.bind(null, newValue);
@@ -58,4 +28,4 @@ export {
   aspect_ratio_variables_default as default
 };
 
-//# debugId=60198C24F366C81264756E2164756E21
+//# debugId=9F191AF4E5DEF50164756E2164756E21

package/dist/components/aspect-ratio/index.js

@@ -1,34 +1,4 @@
-var __create = Object.create;
-var __getProtoOf = Object.getPrototypeOf;
 var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-function __accessProp(key) {
-  return this[key];
-}
-var __toESMCache_node;
-var __toESMCache_esm;
-var __toESM = (mod, isNodeMode, target) => {
-  var canCache = mod != null && typeof mod === "object";
-  if (canCache) {
-    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
-    var cached = cache.get(mod);
-    if (cached)
-      return cached;
-  }
-  target = mod != null ? __create(__getProtoOf(mod)) : {};
-  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
-  for (let key of __getOwnPropNames(mod))
-    if (!__hasOwnProp.call(to, key))
-      __defProp(to, key, {
-        get: __accessProp.bind(mod, key),
-        enumerable: true
-      });
-  if (canCache)
-    cache.set(mod, to);
-  return to;
-};
-var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
 var __returnValue = (v) => v;
 function __exportSetter(name, newValue) {
   this[name] = __returnValue.bind(null, newValue);
@@ -102,4 +72,4 @@ export {
   Aspect_ratio as AspectRatio
 };
 
-//# debugId=E98B8AC2CA78F25E64756E2164756E21
+//# debugId=AA5963B2A4EB564064756E2164756E21

package/dist/components/autocomplete/autocomplete.css

@@ -58,9 +58,16 @@
     color: var(--cinder-text-muted);
   }
 
-  .cinder-autocomplete__option[data-cinder-active] {
-    background: var(--cinder-surface-raised);
-  }
+  /*
+   * The active/keyboard-highlighted row treatment is owned by the shared
+   * `.cinder-_option-row[data-cinder-active]` rules in
+   * `styles/components/_floating-surface.css`: a `--cinder-surface-hover`
+   * background plus an inset `--cinder-ring-color` ring (and a forced-colors
+   * `outline: Highlight` fallback). A component-local override here previously
+   * pinned the background to `--cinder-surface-raised` — identical to the
+   * panel — so the highlighted option was invisible in light mode. Do not
+   * reintroduce it; inherit the shared row treatment instead.
+   */
 
   .cinder-autocomplete__option-text {
     display: grid;