@lostgradient/cinder 0.1.1 → 0.2.0

package/dist/components/alert/alert.types.d.ts

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-export type AlertVariant = 'info' | 'success' | 'warning' | 'error';
+/** `danger` is an accepted alias for `error` — both render identically. */
+export type AlertVariant = 'info' | 'success' | 'warning' | 'error' | 'danger';
 /**
  * Props for the {@link Alert} component — a live-region notification card.
  *
@@ -30,7 +31,7 @@ export type AlertProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'role
  */
 export interface AlertSchemaProps {
     /**
-     * Visual style.
+     * Visual style. `danger` is an accepted alias for `error` — both render identically.
      * @default "info"
      */
     variant?: AlertVariant;

package/dist/components/alert/index.js

@@ -82,6 +82,7 @@ function Alert($$anchor, $$props) {
     "children",
     "icon"
   ]);
+  const resolvedVariant = $.derived(() => variant() === "danger" ? "error" : variant());
   let visible = $.state(true);
   let rootElement = $.state(undefined);
   async function handleDismiss() {
@@ -133,7 +134,7 @@ function Alert($$anchor, $$props) {
       $.attribute_effect(div, ($0) => ({
         ...$.get(restWithoutForbidden),
         class: $0,
-        "data-cinder-variant": variant(),
+        "data-cinder-variant": $.get(resolvedVariant),
         role: "alert"
       }), [
         () => classNames("cinder-alert", "cinder-_status-surface", $$props.class)
@@ -189,4 +190,4 @@ export {
   Alert
 };
 
-//# debugId=B298EDF57C929B0664756E2164756E21
+//# debugId=1C9AC3DB40B76D6C64756E2164756E21

package/dist/components/alert-dialog/index.js

@@ -192,7 +192,10 @@ function Button($$anchor, $$props) {
     "aria-disabled",
     "aria-busy",
     "aria-label",
-    "aria-labelledby"
+    "aria-labelledby",
+    "aria-expanded",
+    "aria-controls",
+    "aria-haspopup"
   ]);
   const mergedClassName = $.derived(() => classNames("cinder-button", $$props.class));
   const dataAttributes = $.derived(() => ({
@@ -250,6 +253,9 @@ function Button($$anchor, $$props) {
         "aria-busy": $.get(resolvedAriaBusy),
         "aria-label": $.get(resolvedAriaLabel),
         "aria-labelledby": $.get(resolvedAriaLabelledBy),
+        "aria-expanded": $$props["aria-expanded"],
+        "aria-controls": $$props["aria-controls"],
+        "aria-haspopup": $$props["aria-haspopup"],
         onclick: handleClick
       }));
       var node_10 = $.child(a);
@@ -269,6 +275,9 @@ function Button($$anchor, $$props) {
         "aria-busy": $.get(resolvedAriaBusy),
         "aria-label": $.get(resolvedAriaLabel),
         "aria-labelledby": $.get(resolvedAriaLabelledBy),
+        "aria-expanded": $$props["aria-expanded"],
+        "aria-controls": $$props["aria-controls"],
+        "aria-haspopup": $$props["aria-haspopup"],
         onclick: handleClick
       }));
       var node_11 = $.child(button);
@@ -759,4 +768,4 @@ export {
   Alert_dialog as AlertDialog
 };
 
-//# debugId=47225EF091EE20FA64756E2164756E21
+//# debugId=80F37765CC5B76FE64756E2164756E21

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

@@ -81,14 +81,64 @@
     pointer-events: none;
   }
 
-  /*
- * SVG focus indicator: drop-shadow renders a visible ring around the focused
- * element on any background. Matches line-chart and bar-chart.
- */
-  .cinder-area-chart__focus-target:focus-visible {
-    stroke: var(--cinder-accent);
+  .cinder-area-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-area-chart__focus-ring-layer {
+    pointer-events: none;
+  }
+
+  .cinder-area-chart__focus-ring,
+  .cinder-area-chart__focus-ring-halo,
+  .cinder-area-chart__focus-ring-connector,
+  .cinder-area-chart__focus-ring-dot {
+    fill: none;
+    pointer-events: none;
+    vector-effect: non-scaling-stroke;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .cinder-area-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-area-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-area-chart__focus-ring-halo {
+      display: none;
+    }
+
+    .cinder-area-chart__focus-ring,
+    .cinder-area-chart__focus-ring-connector,
+    .cinder-area-chart__focus-ring-dot {
+      fill: none;
+      stroke: ButtonText;
+      stroke-width: var(--cinder-ring-width);
+      filter: none;
+    }
+
+    .cinder-area-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-area-chart__tick-label {

package/dist/components/area-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 {
@@ -838,13 +959,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 +1017,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 +1091,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 +1104,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 +1198,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 +1212,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 +1286,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 +1316,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 +1419,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 +1473,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 +1495,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 +1505,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 +1532,4 @@ export {
   Area_chart as AreaChart
 };
 
-//# debugId=E08C37095A8BCE8964756E2164756E21
+//# debugId=49A93DA48AE0E3F664756E2164756E21

package/dist/components/avatar-group/avatar-group.css

@@ -47,9 +47,8 @@
        ring; the outline is intentionally suppressed. */
     outline: none;
     box-shadow:
-      0 0 0 var(--cinder-ring-offset-width) var(--cinder-ring-offset-color),
-      0 0 0 calc(var(--cinder-ring-offset-width) + var(--cinder-ring-width))
-        var(--cinder-ring-color);
+      0 0 0 var(--cinder-ring-offset, 1px) var(--cinder-ring-offset-color),
+      0 0 0 calc(var(--cinder-ring-offset, 1px) + var(--cinder-ring-width)) var(--cinder-ring-color);
   }
 
   .cinder-avatar-group__overflow {

package/dist/components/badge/badge.css

@@ -82,4 +82,21 @@
     color: var(--cinder-accent-text);
     border-color: color-mix(in oklch, var(--cinder-accent), transparent 60%);
   }
+
+  /* ----------------------------------------
+ * Mono affordance
+ * ---------------------------------------- */
+
+  .cinder-badge[data-cinder-mono] {
+    font-family: var(
+      --cinder-font-mono,
+      ui-monospace,
+      SFMono-Regular,
+      'SF Mono',
+      Menlo,
+      Consolas,
+      'Liberation Mono',
+      monospace
+    );
+  }
 }

package/dist/components/badge/badge.schema.js

@@ -66,6 +66,11 @@ var schema = {
       description: "Size of the badge.",
       default: "md"
     },
+    mono: {
+      type: "boolean",
+      description: "Render the badge label in a monospace font. Useful for version strings, error codes, or other technical labels.",
+      default: false
+    },
     class: {
       type: "string",
       description: "Custom class merged with `.cinder-badge`."
@@ -78,4 +83,4 @@ export {
   badge_schema_default as default
 };
 
-//# debugId=9AEBB9E7FA7B2EA764756E2164756E21
+//# debugId=6D0CB5C3A7D42A5464756E2164756E21