@lostgradient/cinder 0.1.1 → 0.2.0

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

@@ -8,6 +8,8 @@ export type BadgeSize = 'xs' | 'sm' | 'md';
 export type BadgeProps = HTMLAttributes<HTMLSpanElement> & {
     variant?: BadgeVariant;
     size?: BadgeSize;
+    /** Render the badge label in a monospace font. */
+    mono?: boolean;
     class?: string;
     /**
      * Badge content — intentionally required. A badge without content is
@@ -28,6 +30,11 @@ export interface BadgeSchemaProps {
      * @default "md"
      */
     size?: BadgeSize;
+    /**
+     * Render the badge label in a monospace font. Useful for version strings, error codes, or other technical labels.
+     * @default false
+     */
+    mono?: boolean;
     /** Custom class merged with `.cinder-badge`. */
     class?: string;
 }

package/dist/components/badge/index.js

@@ -67,12 +67,13 @@ function classNames(...parts) {
 var root = $.from_html(`<span><!></span>`);
 function Badge($$anchor, $$props) {
   $.push($$props, true);
-  let variant = $.prop($$props, "variant", 3, "neutral"), size = $.prop($$props, "size", 3, "md"), rest = $.rest_props($$props, [
+  let variant = $.prop($$props, "variant", 3, "neutral"), size = $.prop($$props, "size", 3, "md"), mono = $.prop($$props, "mono", 3, false), rest = $.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
     "variant",
     "size",
+    "mono",
     "class",
     "children"
   ]);
@@ -81,6 +82,7 @@ function Badge($$anchor, $$props) {
     class: $0,
     "data-cinder-variant": variant(),
     "data-cinder-size": size(),
+    "data-cinder-mono": mono() ? "" : undefined,
     ...rest
   }), [() => classNames("cinder-badge", $$props.class)]);
   var node = $.child(span);
@@ -97,4 +99,4 @@ export {
   Badge
 };
 
-//# debugId=17C7DE9473BC355364756E2164756E21
+//# debugId=444406534289814864756E2164756E21

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

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

package/dist/components/bar-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,14 @@ var root_15 = $2.from_svg(`<line class="cinder-bar-chart__crosshair" y1="0" aria
 var root_16 = $2.from_svg(`<line class="cinder-bar-chart__crosshair" x1="0" aria-hidden="true"></line>`);
 var root_19 = $2.from_svg(`<rect class="cinder-bar-chart__focus-target" width="12" height="12" tabindex="0" role="button"></rect>`);
 var root_17 = $2.from_svg(`<rect class="cinder-bar-chart__hit-surface" role="presentation"></rect><!>`, 1);
-var root_20 = $2.from_html(`<div role="tooltip" class="cinder-bar-chart__tooltip"><strong> </strong><span> </span></div>`);
-var root_21 = $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_22 = $2.from_html(`<table><caption> </caption><thead><tr><th scope="col">Category</th><th scope="col">Series</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-bar-chart__legend" aria-label="Series"></div>`);
-var root = $2.from_html(`<figure><!> <!> <div class="cinder-bar-chart__viewport"><!> <svg><!><g><!><!><!><!><!></g></svg> <!></div> <!> <!> <!></figure>`);
+var root_20 = $2.from_svg(`<g class="cinder-bar-chart__focus-ring-layer" aria-hidden="true"><rect class="cinder-bar-chart__focus-ring-halo"></rect><rect class="cinder-bar-chart__focus-ring"></rect></g>`);
+var root_21 = $2.from_html(`<div role="tooltip" class="cinder-bar-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_25 = $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">Category</th><th scope="col">Series</th><th scope="col">Value</th></tr></thead><tbody></tbody></table>`);
+var root_27 = $2.from_html(`<button type="button"><span></span> </button>`);
+var root_26 = $2.from_html(`<div class="cinder-bar-chart__legend" aria-label="Series"></div>`);
+var root = $2.from_html(`<figure><!> <!> <div class="cinder-bar-chart__viewport"><!> <svg><!><g><!><!><!><!><!><!></g></svg> <!></div> <!> <!> <!></figure>`);
 function Bar_chart($$anchor, $$props) {
   const generatedId = $2.props_id();
   $2.push($$props, true);
@@ -898,13 +1020,51 @@ function Bar_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 barFocusRing = $2.derived(() => $2.get(focusRingTarget) ? createBarFocusRingGeometry({
+    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("bar-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),
@@ -935,7 +1095,7 @@ function Bar_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;
@@ -948,7 +1108,7 @@ function Bar_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)));
@@ -1042,18 +1202,18 @@ function Bar_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) => {
+  $2.each(node_8, 18, () => $2.get(model).yTicks, (tick) => tick, ($$anchor2, tick, index) => {
     var text_5 = root_11();
     var text_6 = $2.child(text_5, true);
     $2.reset(text_5);
     $2.template_effect(($0) => {
-      $2.set_attribute(text_5, "x", orientation() === "vertical" ? -8 : ($2.get(tick) - $2.get(model).valueDomain[0]) / ($2.get(model).valueDomain[1] - $2.get(model).valueDomain[0]) * $2.get(model).geometry.plotWidth);
-      $2.set_attribute(text_5, "y", orientation() === "vertical" ? $2.get(model).geometry.plotHeight - ($2.get(tick) - $2.get(model).valueDomain[0]) / ($2.get(model).valueDomain[1] - $2.get(model).valueDomain[0]) * $2.get(model).geometry.plotHeight : $2.get(model).geometry.plotHeight + 20);
+      $2.set_attribute(text_5, "x", orientation() === "vertical" ? -8 : (tick - $2.get(model).valueDomain[0]) / ($2.get(model).valueDomain[1] - $2.get(model).valueDomain[0]) * $2.get(model).geometry.plotWidth);
+      $2.set_attribute(text_5, "y", orientation() === "vertical" ? $2.get(model).geometry.plotHeight - (tick - $2.get(model).valueDomain[0]) / ($2.get(model).valueDomain[1] - $2.get(model).valueDomain[0]) * $2.get(model).geometry.plotHeight : $2.get(model).geometry.plotHeight + 20);
       $2.set_attribute(text_5, "text-anchor", orientation() === "vertical" ? "end" : "middle");
       $2.set_attribute(text_5, "dominant-baseline", orientation() === "vertical" ? "middle" : undefined);
       $2.set_text(text_6, $0);
     }, [
-      () => formatNumericValue($2.get(tick), orientation() === "vertical" ? $$props.yAxis : $$props.xAxis, undefined, { index: index2 })
+      () => formatNumericValue(tick, orientation() === "vertical" ? $$props.yAxis : $$props.xAxis, undefined, { index: $2.get(index) })
     ]);
     $2.append($$anchor2, text_5);
   });
@@ -1072,7 +1232,7 @@ function Bar_chart($$anchor, $$props) {
     $2.append($$anchor2, rect);
   });
   var node_10 = $2.sibling(node_9);
-  $2.each(node_10, 17, () => $2.get(model).categoryTicks, (tick) => tick.label, ($$anchor2, tick) => {
+  $2.each(node_10, 17, () => $2.get(model).categoryTicks, (tick) => tick.categoryKey, ($$anchor2, tick) => {
     var text_7 = root_13();
     var text_8 = $2.child(text_7, true);
     $2.reset(text_7);
@@ -1139,12 +1299,14 @@ function Bar_chart($$anchor, $$props) {
               $2.set_attribute(rect_2, "x", ($2.get(target).x ?? 0) - 6);
               $2.set_attribute(rect_2, "y", ($2.get(target).y ?? 0) - 6);
               $2.set_attribute(rect_2, "data-cinder-target-id", $2.get(target).id);
+              $2.set_attribute(rect_2, "data-cinder-series-id", $2.get(target).seriesId);
+              $2.set_attribute(rect_2, "data-cinder-focus-ring-active", $2.get(barFocusRing) && $2.get(focusRingTarget)?.id === $2.get(target).id ? "true" : undefined);
               $2.set_attribute(rect_2, "aria-label", `${$2.get(target).seriesLabel}, ${$2.get(target).xLabel}, ${$2.get(target).valueLabel}`);
               $2.set_attribute(rect_2, "aria-describedby", interaction.activeTarget?.id === $2.get(target).id ? `${$2.get(rootId)}-tooltip` : undefined);
             });
-            $2.event("focus", rect_2, () => interaction.focusedTarget = $2.get(target));
-            $2.event("blur", rect_2, () => interaction.focusedTarget = undefined);
-            $2.delegated("keydown", rect_2, (event2) => interaction.activateByKeyboard(event2, $2.get(rootElement), $2.get(model).targets, $2.get(keyboardEnabled)));
+            $2.event("focus", rect_2, () => handleTargetFocus($2.get(target)));
+            $2.event("blur", rect_2, handleTargetBlur);
+            $2.delegated("keydown", rect_2, handleTargetKeydown);
             $2.append($$anchor4, rect_2);
           });
           $2.append($$anchor3, fragment_4);
@@ -1167,12 +1329,38 @@ function Bar_chart($$anchor, $$props) {
         $$render(consequent_10);
     });
   }
+  var node_16 = $2.sibling(node_13);
+  {
+    var consequent_11 = ($$anchor2) => {
+      var g_1 = root_20();
+      var rect_3 = $2.child(g_1);
+      var rect_4 = $2.sibling(rect_3);
+      $2.reset(g_1);
+      $2.template_effect(() => {
+        $2.set_attribute(rect_3, "x", $2.get(barFocusRing).x);
+        $2.set_attribute(rect_3, "y", $2.get(barFocusRing).y);
+        $2.set_attribute(rect_3, "width", $2.get(barFocusRing).width);
+        $2.set_attribute(rect_3, "height", $2.get(barFocusRing).height);
+        $2.set_attribute(rect_3, "rx", $2.get(barFocusRing).radius);
+        $2.set_attribute(rect_4, "x", $2.get(barFocusRing).x);
+        $2.set_attribute(rect_4, "y", $2.get(barFocusRing).y);
+        $2.set_attribute(rect_4, "width", $2.get(barFocusRing).width);
+        $2.set_attribute(rect_4, "height", $2.get(barFocusRing).height);
+        $2.set_attribute(rect_4, "rx", $2.get(barFocusRing).radius);
+      });
+      $2.append($$anchor2, g_1);
+    };
+    $2.if(node_16, ($$render) => {
+      if ($2.get(barFocusRing))
+        $$render(consequent_11);
+    });
+  }
   $2.reset(g);
   $2.reset(svg);
-  var node_16 = $2.sibling(svg, 2);
+  var node_17 = $2.sibling(svg, 2);
   {
-    var consequent_11 = ($$anchor2) => {
-      var div_4 = root_20();
+    var consequent_12 = ($$anchor2) => {
+      var div_4 = root_21();
       let styles_2;
       var strong = $2.child(div_4);
       var text_9 = $2.child(strong, true);
@@ -1192,37 +1380,37 @@ function Bar_chart($$anchor, $$props) {
       });
       $2.append($$anchor2, div_4);
     };
-    $2.if(node_16, ($$render) => {
+    $2.if(node_17, ($$render) => {
       if (interaction.activeTarget)
-        $$render(consequent_11);
+        $$render(consequent_12);
     });
   }
   $2.reset(div_1);
-  var node_17 = $2.sibling(div_1, 2);
+  var node_18 = $2.sibling(div_1, 2);
   {
-    var consequent_12 = ($$anchor2) => {
-      var p_1 = root_21();
+    var consequent_13 = ($$anchor2) => {
+      var p_1 = root_22();
       $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_18, ($$render) => {
       if ($2.get(guidanceId))
-        $$render(consequent_12);
+        $$render(consequent_13);
     });
   }
-  var node_18 = $2.sibling(node_17, 2);
+  var node_19 = $2.sibling(node_18, 2);
   {
-    var consequent_13 = ($$anchor2) => {
-      var table = root_22();
+    var consequent_14 = ($$anchor2) => {
+      var table = root_23();
       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, $2.index, ($$anchor3, row) => {
+      $2.each(tbody, 21, () => $2.get(model).tableRows, (row) => row.categoryKey, ($$anchor3, row) => {
         var fragment_5 = $2.comment();
-        var node_19 = $2.first_child(fragment_5);
-        $2.each(node_19, 17, () => $2.get(row).values, $2.index, ($$anchor4, value) => {
-          var tr = root_24();
+        var node_20 = $2.first_child(fragment_5);
+        $2.each(node_20, 17, () => $2.get(row).values, (value) => value.seriesId, ($$anchor4, value) => {
+          var tr = root_25();
           var th = $2.child(tr);
           var text_12 = $2.child(th, true);
           $2.reset(th);
@@ -1251,17 +1439,17 @@ function Bar_chart($$anchor, $$props) {
       }, [() => $2.clsx(dataTableClass(dataTableVisibility()))]);
       $2.append($$anchor2, table);
     };
-    $2.if(node_18, ($$render) => {
+    $2.if(node_19, ($$render) => {
       if ($2.get(hasDataTable))
-        $$render(consequent_13);
+        $$render(consequent_14);
     });
   }
-  var node_20 = $2.sibling(node_18, 2);
+  var node_21 = $2.sibling(node_19, 2);
   {
-    var consequent_14 = ($$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_15 = ($$anchor2) => {
+      var div_5 = root_26();
+      $2.each(div_5, 23, () => $$props.series, (item) => item.id, ($$anchor3, item, index) => {
+        var button_1 = root_27();
         var span_2 = $2.child(button_1);
         let styles_3;
         var text_15 = $2.sibling(span_2, 1, true);
@@ -1273,7 +1461,7 @@ function Bar_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)));
@@ -1283,9 +1471,9 @@ function Bar_chart($$anchor, $$props) {
       $2.append($$anchor2, div_5);
     };
     var d_1 = $2.derived(() => legendVisible(legendPosition(), $$props.series.length) && legendPosition() === "bottom");
-    $2.if(node_20, ($$render) => {
+    $2.if(node_21, ($$render) => {
       if ($2.get(d_1))
-        $$render(consequent_14);
+        $$render(consequent_15);
     });
   }
   $2.reset(figure);
@@ -1310,4 +1498,4 @@ export {
   Bar_chart as BarChart
 };
 
-//# debugId=893F20183180D46B64756E2164756E21
+//# debugId=1B363E1DE33010AB64756E2164756E21

package/dist/components/button/button.css

@@ -194,8 +194,8 @@
  * ---------------------------------------- */
 
   .cinder-button[data-cinder-variant='primary'] {
-    /* Ring uses the dedicated --cinder-ring-color (not the bright fill-accent):
-       the L=0.72 accent is the button face, so an accent ring would be invisible
+    /* Ring uses the dedicated --cinder-ring-color (not the fill-accent):
+       the accent is the button face, so an accent ring would be invisible
        against it and fail WCAG 1.4.11 (3:1) against the page. */
     --_cinder-button-ring: var(--cinder-ring-color);
     background: var(--cinder-accent);
@@ -423,7 +423,9 @@
  * hover paint when both states are active on hover-capable devices. Unwrapped
  * so they fire on tap. */
   .cinder-button[data-cinder-variant='primary']:active:not(:disabled):not([aria-disabled='true']) {
-    background: var(--cinder-accent-active);
+    /* Use the gentler on-fill pressed token so the --cinder-accent-contrast label stays AA-legible
+       on the pressed fill (the general --cinder-accent-active would drop the label below 4.5:1). */
+    background: var(--cinder-accent-active-on-fill);
   }
 
   .cinder-button[data-cinder-variant='secondary']:active:not(:disabled):not(

package/dist/components/button/index.js

@@ -188,7 +188,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(() => ({
@@ -246,6 +249,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);
@@ -265,6 +271,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);
@@ -290,4 +299,4 @@ export {
   Button
 };
 
-//# debugId=9EC81CB51875559564756E2164756E21
+//# debugId=EE1D1546C33F459A64756E2164756E21