@lostgradient/cinder 0.1.0 → 0.2.0

package/src/_internal/chart/chart-focus-ring.ts

@@ -0,0 +1,209 @@
+import type { ChartTarget } from './chart-utilities.ts';
+
+export const DEFAULT_CHART_FOCUS_RING_STROKE_PADDING = 8;
+
+const DEFAULT_POINT_FOCUS_RING_RADIUS = 10;
+const MINIMUM_FOCUS_RING_SIZE = 2;
+const MINIMUM_BAR_FOCUS_RING_SIZE = 12;
+const FOCUS_RING_DOT_RADIUS = 2.5;
+
+export type ChartFocusRingConnectorGeometry = {
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+};
+
+export type ChartFocusRingDotGeometry = {
+  cx: number;
+  cy: number;
+  radius: number;
+};
+
+export type ChartPointFocusRingGeometry =
+  | {
+      kind: 'point';
+      cx: number;
+      cy: number;
+      radius: number;
+      targetX: number;
+      targetY: number;
+      offsetX: number;
+      offsetY: number;
+      offsetDistance: number;
+      connector?: ChartFocusRingConnectorGeometry;
+      dot?: ChartFocusRingDotGeometry;
+    }
+  | ChartPlotFrameFocusRingGeometry;
+
+export type ChartBarFocusRingGeometry =
+  | {
+      kind: 'bar';
+      x: number;
+      y: number;
+      width: number;
+      height: number;
+      radius: number;
+    }
+  | ChartPlotFrameFocusRingGeometry;
+
+export type ChartPlotFrameFocusRingGeometry = {
+  kind: 'plot-frame';
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  radius: number;
+};
+
+export function createPointFocusRingGeometry(options: {
+  target: Pick<ChartTarget, 'x' | 'y'>;
+  plotWidth: number;
+  plotHeight: number;
+  strokePadding?: number;
+  radius?: number;
+}): ChartPointFocusRingGeometry | null {
+  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' as const,
+    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,
+    },
+  };
+}
+
+export function createBarFocusRingGeometry(options: {
+  target: Pick<ChartTarget, 'x' | 'y' | 'width' | 'height'>;
+  plotWidth: number;
+  plotHeight: number;
+  strokePadding?: number;
+  minimumWidth?: number;
+  minimumHeight?: number;
+}): ChartBarFocusRingGeometry | null {
+  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: number,
+  plotHeight: number,
+  strokePadding: number,
+): ChartPlotFrameFocusRingGeometry {
+  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: number, minimum: number, maximum: number): number {
+  if (maximum < minimum) return (minimum + maximum) / 2;
+  return Math.min(Math.max(value, minimum), maximum);
+}

package/src/_internal/chart/chart-utilities.ts

@@ -122,6 +122,7 @@ export type BarChartModel = {
   categories: NormalizedXValue[];
   yTicks: number[];
   categoryTicks: Array<{
+    categoryKey: string;
     label: string;
     x: number;
     y: number;
@@ -140,6 +141,7 @@ export type BarChartModel = {
     hidden: boolean;
   }>;
   tableRows: Array<{
+    categoryKey: string;
     categoryLabel: string;
     values: Array<{ seriesId: string; seriesLabel: string; valueLabel: string }>;
   }>;
@@ -616,6 +618,7 @@ export 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:
@@ -707,6 +710,7 @@ export function createBarModel(options: {
     });
     if (rowValues.length > 0) {
       tableRows.push({
+        categoryKey: category.key,
         categoryLabel: formatXValue(category, orientation === 'vertical' ? xAxis : yAxis, {
           index: tableRows.length,
         }),

package/src/_internal/chart/heatmap-utilities.ts

@@ -0,0 +1,159 @@
+/**
+ * Shared heatmap math for grid-style charts (MatrixChart, Spectrogram).
+ *
+ * Both render a grid of cells coloured by magnitude. The normalization,
+ * degenerate-domain handling, diverging zero-centering, and NaN/Infinity
+ * filtering are identical, so they live here rather than drifting between the
+ * two component implementations.
+ */
+
+export type HeatmapColorScale = 'sequential' | 'diverging';
+
+/**
+ * Keep only finite numbers. `NaN`, `Infinity`, `-Infinity`, `null`, and
+ * `undefined` are dropped — invalid values must render as "missing" cells, not
+ * poison `Math.min`/`Math.max`, normalization, or `color-mix(... NaN%)`.
+ */
+export function finiteNumbers(values: ReadonlyArray<number | null | undefined>): number[] {
+  const result: number[] = [];
+  for (const value of values) {
+    if (typeof value === 'number' && Number.isFinite(value)) result.push(value);
+  }
+  return result;
+}
+
+/** A finite number, or `null` for anything non-finite (the "missing cell" sentinel). */
+export function toFiniteOrNull(value: unknown): number | null {
+  return typeof value === 'number' && Number.isFinite(value) ? value : null;
+}
+
+export type HeatmapDomain = {
+  readonly min: number;
+  readonly max: number;
+  /** Empty when there are no finite values to scale. */
+  readonly isEmpty: boolean;
+};
+
+/**
+ * Compute the [min, max] domain over the finite values only.
+ *
+ * A single pass — NOT `Math.min(...finite)` — so a dense heatmap or a
+ * multi-thousand-bin spectrogram can't overflow the call stack / argument limit
+ * by spreading a huge array into the `Math` functions.
+ */
+export function heatmapDomain(values: ReadonlyArray<number | null | undefined>): HeatmapDomain {
+  let min = Infinity;
+  let max = -Infinity;
+  let count = 0;
+  for (const value of values) {
+    if (typeof value === 'number' && Number.isFinite(value)) {
+      if (value < min) min = value;
+      if (value > max) max = value;
+      count += 1;
+    }
+  }
+  if (count === 0) return { min: 0, max: 1, isEmpty: true };
+  return { min, max, isEmpty: false };
+}
+
+/**
+ * Compute the [min, max] domain over a sequence of rows (e.g. spectrogram
+ * frames) WITHOUT first flattening them into one big array. A single nested pass
+ * over the original arrays, so a large frames × bins grid never materializes a
+ * full flattened copy just to find its colour domain.
+ */
+export function heatmapDomainOfRows(
+  rows: ReadonlyArray<ReadonlyArray<number | null | undefined>>,
+): HeatmapDomain {
+  let min = Infinity;
+  let max = -Infinity;
+  let count = 0;
+  for (const row of rows) {
+    for (const value of row) {
+      if (typeof value === 'number' && Number.isFinite(value)) {
+        if (value < min) min = value;
+        if (value > max) max = value;
+        count += 1;
+      }
+    }
+  }
+  if (count === 0) return { min: 0, max: 1, isEmpty: true };
+  return { min, max, isEmpty: false };
+}
+
+/**
+ * Normalize `value` into `[0, 1]` against the domain.
+ *
+ * - Sequential: linear from `min`→0 to `max`→1. A degenerate domain
+ *   (`min === max`) maps everything to the midpoint `0.5` (a single colour).
+ * - Diverging: zero-centred. The scale is symmetric around 0 using the larger
+ *   absolute bound, so `0` always maps to `0.5` (neutral) regardless of how
+ *   lopsided the data is. E.g. domain `[-10, 30]` → 0 maps to 0.5, not blue.
+ */
+export function normalizeHeatmapValue(
+  value: number,
+  domain: HeatmapDomain,
+  scale: HeatmapColorScale = 'sequential',
+): number {
+  if (!Number.isFinite(value)) return 0.5;
+
+  if (scale === 'diverging') {
+    const bound = Math.max(Math.abs(domain.min), Math.abs(domain.max));
+    if (bound === 0) return 0.5;
+    // Map [-bound, +bound] → [0, 1] with 0 at 0.5.
+    return clamp01(0.5 + value / (2 * bound));
+  }
+
+  const range = domain.max - domain.min;
+  if (range === 0) return 0.5;
+  return clamp01((value - domain.min) / range);
+}
+
+function clamp01(value: number): number {
+  if (value < 0) return 0;
+  if (value > 1) return 1;
+  return value;
+}
+
+/**
+ * CSS `color-mix` fill for a heatmap cell. `null` (missing) returns the inset
+ * surface. Sequential mixes the primary series colour; diverging mixes a cool
+ * colour below the midpoint and a warm colour above it, both fading to the inset
+ * surface at the neutral midpoint.
+ */
+export function heatmapCellFill(
+  value: number | null,
+  domain: HeatmapDomain,
+  scale: HeatmapColorScale = 'sequential',
+): string {
+  if (value === null) return 'var(--cinder-surface-inset)';
+  const normalized = normalizeHeatmapValue(value, domain, scale);
+
+  if (scale === 'diverging') {
+    if (normalized < 0.5) {
+      const ratio = (0.5 - normalized) * 2;
+      return `color-mix(in oklch, var(--cinder-chart-series-5) ${Math.round(ratio * 100)}%, var(--cinder-surface-inset))`;
+    }
+    const ratio = (normalized - 0.5) * 2;
+    return `color-mix(in oklch, var(--cinder-chart-series-3) ${Math.round(ratio * 100)}%, var(--cinder-surface-inset))`;
+  }
+
+  return `color-mix(in oklch, var(--cinder-chart-series-1) ${Math.round(normalized * 100)}%, var(--cinder-surface-inset))`;
+}
+
+/**
+ * Choose a readable label colour for a cell: a light colour over high-intensity
+ * (dark) fills, a dark colour over low-intensity (light) fills.
+ */
+export function heatmapLabelFill(
+  value: number | null,
+  domain: HeatmapDomain,
+  scale: HeatmapColorScale = 'sequential',
+): string {
+  if (value === null) return 'var(--cinder-text-muted)';
+  const intensity =
+    scale === 'diverging'
+      ? Math.abs(normalizeHeatmapValue(value, domain, scale) - 0.5) * 2
+      : normalizeHeatmapValue(value, domain, scale);
+  return intensity > 0.5 ? 'var(--cinder-surface)' : 'var(--cinder-text)';
+}

package/src/components/accordion/accordion.examples.json

@@ -7,6 +7,7 @@
       "id": "basic",
       "title": "Basic accordion",
       "description": "Single-select: opening one item closes the others. Uses the Accordion namespace API.",
+      "featured": true,
       "code": "<script lang=\"ts\">\n  import { Accordion } from '@lostgradient/cinder/accordion';\n  let expandedIds = $state<string[]>([]);\n</script>\n\n<Accordion bind:expandedIds>\n  <Accordion.Item id=\"item-1\" title=\"What is Cinder?\">\n    Cinder is a Svelte 5 design system built for composability and accessibility.\n  </Accordion.Item>\n  <Accordion.Item id=\"item-2\" title=\"How do I install it?\">\n    Run <code>bun add @lostgradient/cinder</code> and import components from\n    <code>@lostgradient/cinder</code> or via subpath imports.\n  </Accordion.Item>\n  <Accordion.Item id=\"item-3\" title=\"Does it support SSR?\">\n    Yes — every component is SSR-safe and renders meaningful HTML before hydration.\n  </Accordion.Item>\n</Accordion>\n"
     },
     {

package/src/components/alert/README.md

@@ -16,11 +16,11 @@ A status message that communicates contextual feedback and can optionally be dis
 
 <!-- generated:props:start -->
 
-| Prop          | Type                                                | Required | Default  | Description                               |
-| ------------- | --------------------------------------------------- | -------- | -------- | ----------------------------------------- |
-| `class`       | `string`                                            | no       | —        | Custom class merged with `.cinder-alert`. |
-| `dismissible` | `boolean`                                           | no       | `false`  | Allow the alert to be dismissed.          |
-| `variant`     | `"info"` \| `"success"` \| `"warning"` \| `"error"` | no       | `"info"` | Visual style.                             |
+| Prop          | Type                                                              | Required | Default  | Description                                                                        |
+| ------------- | ----------------------------------------------------------------- | -------- | -------- | ---------------------------------------------------------------------------------- |
+| `class`       | `string`                                                          | no       | —        | Custom class merged with `.cinder-alert`.                                          |
+| `dismissible` | `boolean`                                                         | no       | `false`  | Allow the alert to be dismissed.                                                   |
+| `variant`     | `"info"` \| `"success"` \| `"warning"` \| `"error"` \| `"danger"` | no       | `"info"` | Visual style. `danger` is an accepted alias for `error` — both render identically. |
 
 <!-- generated:props:end -->
 

package/src/components/alert/alert.schema.json

@@ -3,8 +3,8 @@
   "type": "object",
   "properties": {
     "variant": {
-      "enum": ["info", "success", "warning", "error"],
-      "description": "Visual style.",
+      "enum": ["info", "success", "warning", "error", "danger"],
+      "description": "Visual style. `danger` is an accepted alias for `error` — both render identically.",
       "default": "info"
     },
     "dismissible": {

package/src/components/alert/alert.schema.ts

@@ -5,8 +5,9 @@ const schema = {
   type: 'object',
   properties: {
     variant: {
-      enum: ['info', 'success', 'warning', 'error'],
-      description: 'Visual style.',
+      enum: ['info', 'success', 'warning', 'error', 'danger'],
+      description:
+        'Visual style. `danger` is an accepted alias for `error` — both render identically.',
       default: 'info',
     },
     dismissible: {

package/src/components/alert/alert.svelte

@@ -35,6 +35,10 @@
     ...rest
   }: AlertProps = $props();
 
+  // `danger` is a consumer-friendly alias for `error` — normalize before stamping the
+  // data attribute so the CSS rules only need to handle `error`.
+  const resolvedVariant = $derived(variant === 'danger' ? 'error' : variant);
+
   let visible = $state(true);
   let rootElement: HTMLDivElement | undefined = $state();
 
@@ -114,7 +118,7 @@
     bind:this={rootElement}
     {...restWithoutForbidden}
     class={classNames('cinder-alert', 'cinder-_status-surface', className)}
-    data-cinder-variant={variant}
+    data-cinder-variant={resolvedVariant}
     role="alert"
   >
     {#if icon}

package/src/components/alert/alert.types.ts

@@ -1,7 +1,8 @@
 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.
@@ -36,7 +37,7 @@ export type AlertProps = Omit<
  */
 export interface AlertSchemaProps {
   /**
-   * Visual style.
+   * Visual style. `danger` is an accepted alias for `error` — both render identically.
    * @default "info"
    */
   variant?: AlertVariant;

package/src/components/area-chart/README.md

@@ -0,0 +1,62 @@
+# AreaChart
+
+Filled SVG area chart for showing magnitude and cumulative trends across an ordered x domain.
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import { AreaChart } from '@lostgradient/cinder/area-chart';
+</script>
+```
+
+## Guidance
+
+### Use When
+
+- Showing magnitude under a trend line.
+- Comparing cumulative or stacked contribution over an ordered domain.
+
+### Avoid When
+
+- Exact point comparison matters more than area magnitude — use line-chart instead.
+- Comparing discrete category totals — use bar-chart instead.
+
+## Props
+
+<!-- generated:props:start -->
+
+| Prop                       | Type                                                                                                                   | Required | Default | Description |
+| -------------------------- | ---------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
+| `class`                    | `string`                                                                                                               | no       | —       |             |
+| `dataTableCaption`         | `string`                                                                                                               | no       | —       |             |
+| `dataTableVisibility`      | `"screen-reader-only"` \| `"visible"` \| `"hidden"`                                                                    | no       | —       |             |
+| `description`              | `string`                                                                                                               | no       | —       |             |
+| `height`                   | `number`                                                                                                               | no       | —       |             |
+| `hiddenSeriesIds`          | `string`[]                                                                                                             | no       | —       |             |
+| `label`                    | `string`                                                                                                               | yes      | —       |             |
+| `legendPosition`           | `"top"` \| `"bottom"` \| `"none"`                                                                                      | no       | —       |             |
+| `loading`                  | `boolean`                                                                                                              | no       | —       |             |
+| `maximumInteractivePoints` | `number`                                                                                                               | no       | —       |             |
+| `mode`                     | `"single"` \| `"stacked"`                                                                                              | no       | —       |             |
+| `series`                   | ({ color?: `string`; data: ({ x: `string` \| `number`; y?: `number` \| `null` })[]; id: `string`; label: `string` })[] | yes      | —       |             |
+| `xAxis`                    | { label?: `string`; tickCount?: `number` }                                                                             | no       | —       |             |
+| `yAxis`                    | { label?: `string`; tickCount?: `number` }                                                                             | no       | —       |             |
+
+<!-- generated:props:end -->
+
+## CSS Variables
+
+<!-- generated:variables:start -->
+
+This component does not declare any local CSS variables.
+
+<!-- generated:variables:end -->
+
+## Subcomponents
+
+<!-- generated:subcomponents:start -->
+
+None.
+
+<!-- generated:subcomponents:end -->

package/src/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 {