@lostgradient/cinder 0.1.1 → 0.2.0

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

@@ -361,6 +361,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
@@ -446,6 +447,7 @@ function createBarModel(options) {
     });
     if (rowValues.length > 0) {
       tableRows.push({
+        categoryKey: category.key,
         categoryLabel: formatXValue(category, orientation === "vertical" ? xAxis : yAxis, {
           index: tableRows.length
         }),
@@ -686,6 +688,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/server";
 class ChartInteraction {
@@ -823,6 +944,42 @@ function Area_chart($$renderer, $$props) {
     const keyboardEnabled = $2.derived(() => model().targets.length > 0 && model().targets.length <= maximumInteractivePoints);
     const hasDataTable = $2.derived(() => dataTableVisibility !== "hidden");
     const guidanceId = $2.derived(() => !keyboardEnabled() && hasDataTable() && model().targets.length > 0 ? `${rootId()}-table-guidance` : undefined);
+    const focusedTarget = $2.derived(() => {
+      const currentTarget = interaction.focusedTarget;
+      if (!currentTarget)
+        return;
+      return model().targets.find((target) => target.id === currentTarget.id);
+    });
+    let keyboardFocusModality = false;
+    let focusVisibleTargetId = undefined;
+    const focusRingTarget = $2.derived(() => keyboardFocusModality && focusedTarget() && focusVisibleTargetId === focusedTarget().id ? focusedTarget() : undefined);
+    const pointFocusRing = $2.derived(() => focusRingTarget() ? createPointFocusRingGeometry({
+      target: focusRingTarget(),
+      plotWidth: model().geometry.plotWidth,
+      plotHeight: model().geometry.plotHeight,
+      strokePadding: DEFAULT_CHART_FOCUS_RING_STROKE_PADDING
+    }) : null);
+    function rememberKeyboardFocusModality(event) {
+      if (event.key === "Tab" || event.key === "Home" || event.key === "End" || event.key.startsWith("Arrow")) {
+        keyboardFocusModality = true;
+      }
+    }
+    function clearKeyboardFocusModality() {
+      keyboardFocusModality = false;
+      focusVisibleTargetId = undefined;
+    }
+    function handleTargetFocus(target) {
+      interaction.focusedTarget = target;
+      focusVisibleTargetId = keyboardFocusModality ? target.id : undefined;
+    }
+    function handleTargetBlur() {
+      interaction.focusedTarget = undefined;
+      focusVisibleTargetId = undefined;
+    }
+    function handleTargetKeydown(event) {
+      rememberKeyboardFocusModality(event);
+      interaction.activateByKeyboard(event, rootElement, model().targets, keyboardEnabled());
+    }
     $$renderer2.push(`<figure${$2.attributes({
       ...rest,
       id: rootId(),
@@ -927,7 +1084,7 @@ function Area_chart($$renderer, $$props) {
         const each_array_4 = $2.ensure_array_like(model().targets);
         for (let $$index_4 = 0, $$length = each_array_4.length;$$index_4 < $$length; $$index_4++) {
           let target = each_array_4[$$index_4];
-          $$renderer2.push(`<circle class="cinder-area-chart__focus-target"${$2.attr("cx", target.x)}${$2.attr("cy", target.y)} r="8" tabindex="0" role="button"${$2.attr("data-cinder-target-id", target.id)}${$2.attr("aria-label", `${target.seriesLabel}, ${target.xLabel}, ${target.valueLabel}`)}${$2.attr("aria-describedby", interaction.activeTarget?.id === target.id ? `${rootId()}-tooltip` : undefined)}></circle>`);
+          $$renderer2.push(`<circle class="cinder-area-chart__focus-target"${$2.attr("cx", target.x)}${$2.attr("cy", target.y)} r="8" tabindex="0" role="button"${$2.attr("data-cinder-target-id", target.id)}${$2.attr("data-cinder-series-id", target.seriesId)}${$2.attr("data-cinder-focus-ring-active", pointFocusRing() && focusRingTarget()?.id === target.id ? "true" : undefined)}${$2.attr("aria-label", `${target.seriesLabel}, ${target.xLabel}, ${target.valueLabel}`)}${$2.attr("aria-describedby", interaction.activeTarget?.id === target.id ? `${rootId()}-tooltip` : undefined)}></circle>`);
         }
         $$renderer2.push(`<!--]-->`);
       } else {
@@ -937,6 +1094,28 @@ function Area_chart($$renderer, $$props) {
     } else {
       $$renderer2.push("<!--[-1-->");
     }
+    $$renderer2.push(`<!--]-->`);
+    if (pointFocusRing()) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<g class="cinder-area-chart__focus-ring-layer" aria-hidden="true">`);
+      if (pointFocusRing().kind === "point") {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<circle class="cinder-area-chart__focus-ring-halo"${$2.attr("cx", pointFocusRing().cx)}${$2.attr("cy", pointFocusRing().cy)}${$2.attr("r", pointFocusRing().radius)}></circle><circle class="cinder-area-chart__focus-ring"${$2.attr("cx", pointFocusRing().cx)}${$2.attr("cy", pointFocusRing().cy)}${$2.attr("r", pointFocusRing().radius)}></circle>`);
+        if (pointFocusRing().connector && pointFocusRing().dot) {
+          $$renderer2.push("<!--[0-->");
+          $$renderer2.push(`<path class="cinder-area-chart__focus-ring-connector cinder-area-chart__focus-ring-halo"${$2.attr("d", `M ${pointFocusRing().connector.x1} ${pointFocusRing().connector.y1} L ${pointFocusRing().connector.x2} ${pointFocusRing().connector.y2}`)}></path><path class="cinder-area-chart__focus-ring-connector cinder-area-chart__focus-ring"${$2.attr("d", `M ${pointFocusRing().connector.x1} ${pointFocusRing().connector.y1} L ${pointFocusRing().connector.x2} ${pointFocusRing().connector.y2}`)}></path><circle class="cinder-area-chart__focus-ring-dot cinder-area-chart__focus-ring-halo"${$2.attr("cx", pointFocusRing().dot.cx)}${$2.attr("cy", pointFocusRing().dot.cy)}${$2.attr("r", pointFocusRing().dot.radius)}></circle><circle class="cinder-area-chart__focus-ring-dot cinder-area-chart__focus-ring"${$2.attr("cx", pointFocusRing().dot.cx)}${$2.attr("cy", pointFocusRing().dot.cy)}${$2.attr("r", pointFocusRing().dot.radius)}></circle>`);
+        } else {
+          $$renderer2.push("<!--[-1-->");
+        }
+        $$renderer2.push(`<!--]-->`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+        $$renderer2.push(`<rect class="cinder-area-chart__focus-ring-halo"${$2.attr("x", pointFocusRing().x)}${$2.attr("y", pointFocusRing().y)}${$2.attr("width", pointFocusRing().width)}${$2.attr("height", pointFocusRing().height)}${$2.attr("rx", pointFocusRing().radius)}></rect><rect class="cinder-area-chart__focus-ring"${$2.attr("x", pointFocusRing().x)}${$2.attr("y", pointFocusRing().y)}${$2.attr("width", pointFocusRing().width)}${$2.attr("height", pointFocusRing().height)}${$2.attr("rx", pointFocusRing().radius)}></rect>`);
+      }
+      $$renderer2.push(`<!--]--></g>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
     $$renderer2.push(`<!--]--></g></svg> `);
     if (interaction.activeTarget) {
       $$renderer2.push("<!--[0-->");
@@ -992,4 +1171,4 @@ export {
   Area_chart as AreaChart
 };
 
-//# debugId=CCEFAE4C0E9177DF64756E2164756E21
+//# debugId=E7297D751F5AECD664756E2164756E21

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

@@ -39,7 +39,7 @@
 
   .cinder-avatar-group__trigger:focus-visible {
     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);
+    box-shadow: 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/server/components/badge/badge.schema.js

@@ -48,6 +48,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`."
@@ -60,4 +65,4 @@ export {
   badge_schema_default as default
 };
 
-//# debugId=C4526B540430696C64756E2164756E21
+//# debugId=6425DE8D416AB0F664756E2164756E21

package/dist/server/components/badge/index.css

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

package/dist/server/components/badge/index.js

@@ -47,6 +47,7 @@ function Badge($$renderer, $$props) {
     let {
       variant = "neutral",
       size = "md",
+      mono = false,
       class: customClassName,
       children,
       $$slots,
@@ -57,6 +58,7 @@ function Badge($$renderer, $$props) {
       class: $.clsx(classNames("cinder-badge", customClassName)),
       "data-cinder-variant": variant,
       "data-cinder-size": size,
+      "data-cinder-mono": mono ? "" : undefined,
       ...rest
     })}>`);
     children?.($$renderer2);
@@ -71,4 +73,4 @@ export {
   Badge
 };
 
-//# debugId=589DE70B05C5604D64756E2164756E21
+//# debugId=176AC4B1E993469764756E2164756E21

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

@@ -73,10 +73,57 @@
     pointer-events: none;
   }
 
-  .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/server/components/bar-chart/index.js

@@ -361,6 +361,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
@@ -446,6 +447,7 @@ function createBarModel(options) {
     });
     if (rowValues.length > 0) {
       tableRows.push({
+        categoryKey: category.key,
         categoryLabel: formatXValue(category, orientation === "vertical" ? xAxis : yAxis, {
           index: tableRows.length
         }),
@@ -686,6 +688,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/server";
 class ChartInteraction {
@@ -828,6 +949,42 @@ function Bar_chart($$renderer, $$props) {
     const keyboardEnabled = $2.derived(() => model().targets.length > 0 && model().targets.length <= maximumInteractivePoints);
     const hasDataTable = $2.derived(() => dataTableVisibility !== "hidden");
     const guidanceId = $2.derived(() => !keyboardEnabled() && hasDataTable() && model().targets.length > 0 ? `${rootId()}-table-guidance` : undefined);
+    const focusedTarget = $2.derived(() => {
+      const currentTarget = interaction.focusedTarget;
+      if (!currentTarget)
+        return;
+      return model().targets.find((target) => target.id === currentTarget.id);
+    });
+    let keyboardFocusModality = false;
+    let focusVisibleTargetId = undefined;
+    const focusRingTarget = $2.derived(() => keyboardFocusModality && focusedTarget() && focusVisibleTargetId === focusedTarget().id ? focusedTarget() : undefined);
+    const barFocusRing = $2.derived(() => focusRingTarget() ? createBarFocusRingGeometry({
+      target: focusRingTarget(),
+      plotWidth: model().geometry.plotWidth,
+      plotHeight: model().geometry.plotHeight,
+      strokePadding: DEFAULT_CHART_FOCUS_RING_STROKE_PADDING
+    }) : null);
+    function rememberKeyboardFocusModality(event) {
+      if (event.key === "Tab" || event.key === "Home" || event.key === "End" || event.key.startsWith("Arrow")) {
+        keyboardFocusModality = true;
+      }
+    }
+    function clearKeyboardFocusModality() {
+      keyboardFocusModality = false;
+      focusVisibleTargetId = undefined;
+    }
+    function handleTargetFocus(target) {
+      interaction.focusedTarget = target;
+      focusVisibleTargetId = keyboardFocusModality ? target.id : undefined;
+    }
+    function handleTargetBlur() {
+      interaction.focusedTarget = undefined;
+      focusVisibleTargetId = undefined;
+    }
+    function handleTargetKeydown(event) {
+      rememberKeyboardFocusModality(event);
+      interaction.activateByKeyboard(event, rootElement, model().targets, keyboardEnabled());
+    }
     $$renderer2.push(`<figure${$2.attributes({
       ...rest,
       id: rootId(),
@@ -933,7 +1090,7 @@ function Bar_chart($$renderer, $$props) {
         const each_array_4 = $2.ensure_array_like(model().targets);
         for (let $$index_4 = 0, $$length = each_array_4.length;$$index_4 < $$length; $$index_4++) {
           let target = each_array_4[$$index_4];
-          $$renderer2.push(`<rect class="cinder-bar-chart__focus-target"${$2.attr("x", (target.x ?? 0) - 6)}${$2.attr("y", (target.y ?? 0) - 6)} width="12" height="12" tabindex="0" role="button"${$2.attr("data-cinder-target-id", target.id)}${$2.attr("aria-label", `${target.seriesLabel}, ${target.xLabel}, ${target.valueLabel}`)}${$2.attr("aria-describedby", interaction.activeTarget?.id === target.id ? `${rootId()}-tooltip` : undefined)}></rect>`);
+          $$renderer2.push(`<rect class="cinder-bar-chart__focus-target"${$2.attr("x", (target.x ?? 0) - 6)}${$2.attr("y", (target.y ?? 0) - 6)} width="12" height="12" tabindex="0" role="button"${$2.attr("data-cinder-target-id", target.id)}${$2.attr("data-cinder-series-id", target.seriesId)}${$2.attr("data-cinder-focus-ring-active", barFocusRing() && focusRingTarget()?.id === target.id ? "true" : undefined)}${$2.attr("aria-label", `${target.seriesLabel}, ${target.xLabel}, ${target.valueLabel}`)}${$2.attr("aria-describedby", interaction.activeTarget?.id === target.id ? `${rootId()}-tooltip` : undefined)}></rect>`);
         }
         $$renderer2.push(`<!--]-->`);
       } else {
@@ -943,6 +1100,13 @@ function Bar_chart($$renderer, $$props) {
     } else {
       $$renderer2.push("<!--[-1-->");
     }
+    $$renderer2.push(`<!--]-->`);
+    if (barFocusRing()) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<g class="cinder-bar-chart__focus-ring-layer" aria-hidden="true"><rect class="cinder-bar-chart__focus-ring-halo"${$2.attr("x", barFocusRing().x)}${$2.attr("y", barFocusRing().y)}${$2.attr("width", barFocusRing().width)}${$2.attr("height", barFocusRing().height)}${$2.attr("rx", barFocusRing().radius)}></rect><rect class="cinder-bar-chart__focus-ring"${$2.attr("x", barFocusRing().x)}${$2.attr("y", barFocusRing().y)}${$2.attr("width", barFocusRing().width)}${$2.attr("height", barFocusRing().height)}${$2.attr("rx", barFocusRing().radius)}></rect></g>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
     $$renderer2.push(`<!--]--></g></svg> `);
     if (interaction.activeTarget) {
       $$renderer2.push("<!--[0-->");
@@ -1004,4 +1168,4 @@ export {
   Bar_chart as BarChart
 };
 
-//# debugId=9F7E61706A061A3164756E2164756E21
+//# debugId=27A4544116DE7F0F64756E2164756E21

package/dist/server/components/button/index.css

@@ -317,7 +317,7 @@
   }
 
   .cinder-button[data-cinder-variant="primary"]:active:not(:disabled):not([aria-disabled="true"]) {
-    background: var(--cinder-accent-active);
+    background: var(--cinder-accent-active-on-fill);
   }
 
   .cinder-button[data-cinder-variant="secondary"]:active:not(:disabled):not([aria-disabled="true"]) {

package/dist/server/components/button/index.js

@@ -72,6 +72,9 @@ function Button($$renderer, $$props) {
       "aria-busy": consumerAriaBusy,
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledBy,
+      "aria-expanded": ariaExpanded,
+      "aria-controls": ariaControls,
+      "aria-haspopup": ariaHaspopup,
       $$slots,
       $$events,
       ...rest
@@ -160,7 +163,10 @@ function Button($$renderer, $$props) {
         "aria-disabled": resolvedAriaDisabled(),
         "aria-busy": resolvedAriaBusy(),
         "aria-label": resolvedAriaLabel(),
-        "aria-labelledby": resolvedAriaLabelledBy()
+        "aria-labelledby": resolvedAriaLabelledBy(),
+        "aria-expanded": ariaExpanded,
+        "aria-controls": ariaControls,
+        "aria-haspopup": ariaHaspopup
       })}>`);
       buttonContent($$renderer2);
       $$renderer2.push(`<!----></a>`);
@@ -175,7 +181,10 @@ function Button($$renderer, $$props) {
         "aria-disabled": resolvedAriaDisabled(),
         "aria-busy": resolvedAriaBusy(),
         "aria-label": resolvedAriaLabel(),
-        "aria-labelledby": resolvedAriaLabelledBy()
+        "aria-labelledby": resolvedAriaLabelledBy(),
+        "aria-expanded": ariaExpanded,
+        "aria-controls": ariaControls,
+        "aria-haspopup": ariaHaspopup
       })}>`);
       buttonContent($$renderer2);
       $$renderer2.push(`<!----></button>`);
@@ -191,4 +200,4 @@ export {
   Button
 };
 
-//# debugId=E24B4246283A622864756E2164756E21
+//# debugId=D630EA8F1061F9B564756E2164756E21