matterviz 0.3.5 → 0.3.7

package/dist/plot/Histogram.svelte

@@ -11,9 +11,9 @@
     RefLineEvent,
   } from './'
   import {
-    AxisLabel,
     compute_element_placement,
     HistogramControls,
+    PlotAxis,
     PlotLegend,
     ReferenceLine,
   } from './'
@@ -38,6 +38,13 @@
     LABEL_GAP_DEFAULT,
     measure_max_tick_width,
   } from './layout'
+  import {
+    build_obstacles_norm,
+    clip_bar,
+    has_explicit_position,
+    measured_footprint,
+    place_decorations,
+  } from './auto-place'
   import type { IndexedRefLine } from './reference-line'
   import { group_ref_lines_by_z, index_ref_lines } from './reference-line'
   import {
@@ -228,6 +235,17 @@
 
   // Derived data
   type IndexedSeries = { series_data: DataSeries; series_idx: number }
+  let visible_series_labels = $derived(
+    series
+      .filter((series_data) => series_data.visible ?? true)
+      .map((series_data) => series_data.label)
+      .filter((label): label is string => typeof label === `string` && label.length > 0),
+  )
+  $effect(() => {
+    if (mode !== `single`) return
+    if (selected_property && visible_series_labels.includes(selected_property)) return
+    selected_property = visible_series_labels[0] ?? ``
+  })
   let selected_series_entries = $derived<IndexedSeries[]>(
     series
       .map((series_data: DataSeries, series_idx: number) => ({ series_data, series_idx }))
@@ -389,7 +407,8 @@
 
   // Layout: dynamic padding based on tick label widths
   const default_padding = { t: 20, b: 60, l: 60, r: 20 }
-  let pad = $derived(filter_padding(padding, default_padding))
+  // base_pad reserves space for tick labels/axis titles; pad (below) adds decoration reservations
+  let base_pad = $derived(filter_padding(padding, default_padding))
 
   // Update padding based on tick label widths (untrack breaks circular dependency)
   $effect(() => {
@@ -441,11 +460,60 @@
 
     // Only update if padding actually changed
     if (
-      pad.t !== new_pad.t || pad.b !== new_pad.b || pad.l !== new_pad.l ||
-      pad.r !== new_pad.r
-    ) pad = new_pad
+      base_pad.t !== new_pad.t || base_pad.b !== new_pad.b ||
+      base_pad.l !== new_pad.l || base_pad.r !== new_pad.r
+    ) base_pad = new_pad
+  })
+
+  const legend_footprint = $derived(measured_footprint(legend_element, { width: 120, height: 60 }))
+  const legend_has_explicit_pos = $derived(has_explicit_position(legend?.style))
+
+  // Obstacle field in normalized [0,1] plot coords (y=0 at top). Each filled bar is modeled as a
+  // vertical segment (top -> baseline) so the legend can't hide inside a tall bar. Built from
+  // histogram_bins (pad-independent) + ranges so the crowding decision can't see its own reservation.
+  const obstacles_norm = $derived.by(() => {
+    if (!width || !height || !histogram_bins.length) return []
+    const base_w = width - base_pad.l - base_pad.r
+    const base_h = height - base_pad.t - base_pad.b
+    if (base_w <= 0 || base_h <= 0) return []
+    const bars: { points: { x: number; y: number }[]; draws_line: boolean }[] = []
+    for (const hist of histogram_bins) {
+      const [rx0, rx1] = hist.x_axis === `x2` ? ranges.current.x2 : ranges.current.x
+      const [ry0, ry1] = hist.y_axis === `y2` ? ranges.current.y2 : ranges.current.y
+      const x_span = rx1 - rx0
+      const y_span = ry1 - ry0
+      if (!(x_span > 0) || !(y_span > 0)) continue
+      for (const series_bin of hist.bins) {
+        if (series_bin.length <= 0) continue
+        const x_norm = (((series_bin.x0 ?? 0) + (series_bin.x1 ?? 0)) / 2 - rx0) / x_span
+        const top = 1 - (series_bin.length - ry0) / y_span
+        const baseline = 1 + ry0 / y_span // normalized y of count=0 (bar foot)
+        const seg = clip_bar(true, x_norm, top, baseline)
+        if (seg) bars.push(seg)
+      }
+    }
+    return build_obstacles_norm(bars, base_w, base_h)
   })
 
+  // Move the legend to the bottom margin when no interior spot avoids the bars
+  const decor = $derived.by(() =>
+    place_decorations({
+      base_pad,
+      width,
+      height,
+      obstacles_norm,
+      // gate on legend_element (the render signal) not legend_data, whose entries can read pad
+      legend: show_legend && legend != null && series.length > 1 &&
+          legend_element != null && !legend_has_explicit_pos
+        ? { footprint: legend_footprint, clearance: legend?.axis_clearance }
+        : null,
+    })
+  )
+  const pad = $derived(decor.pad)
+  const legend_auto_outside = $derived(decor.legend_outside)
+  const legend_outside_x = $derived(decor.legend_pos.x)
+  const legend_outside_y = $derived(decor.legend_pos.y)
+
   // Scales and data
   let scales = $derived({
     x: create_scale(
@@ -470,7 +538,8 @@
     ),
   })
 
-  let histogram_data = $derived.by(() => {
+  // Pad-independent binning (no pixel scales) so the auto-place obstacle field can reuse it
+  let histogram_bins = $derived.by(() => {
     if (!selected_series.length || !width || !height) return []
     const hist_generator = bin()
       .domain([ranges.current.x[0], ranges.current.x[1]])
@@ -480,11 +549,8 @@
       : null
     return selected_series_entries.map(({ series_data, series_idx }) => {
       const use_x2 = series_data.x_axis === `x2`
-      const active_hist = use_x2 && x2_hist_generator
-        ? x2_hist_generator
-        : hist_generator
+      const active_hist = use_x2 && x2_hist_generator ? x2_hist_generator : hist_generator
       const bins_arr = active_hist(series_data.y)
-      const use_y2 = series_data.y_axis === `y2`
       return {
         id: series_data.id ?? series_idx,
         series_idx,
@@ -496,11 +562,17 @@
         max_count: max(bins_arr, (data) => data.length) || 0,
         x_axis: series_data.x_axis,
         y_axis: series_data.y_axis,
-        x_scale: use_x2 ? scales.x2 : scales.x,
-        y_scale: use_y2 ? scales.y2 : scales.y,
       }
     })
   })
+  // Render-time data adds the pixel scales (pad-dependent)
+  let histogram_data = $derived(
+    histogram_bins.map((hist) => ({
+      ...hist,
+      x_scale: hist.x_axis === `x2` ? scales.x2 : scales.x,
+      y_scale: hist.y_axis === `y2` ? scales.y2 : scales.y,
+    })),
+  )
 
   let ticks = $derived({
     x: width && height
@@ -582,14 +654,10 @@
     const plot_width = width - pad.l - pad.r
     const plot_height = height - pad.t - pad.b
 
-    // Use measured size if available, otherwise estimate
-    const legend_size = legend_element
-      ? { width: legend_element.offsetWidth, height: legend_element.offsetHeight }
-      : { width: 120, height: 60 }
-
     const result = compute_element_placement({
       plot_bounds: { x: pad.l, y: pad.t, width: plot_width, height: plot_height },
-      element_size: legend_size,
+      element: legend_element,
+      element_size: { width: 120, height: 60 }, // fallback before first render
       axis_clearance: legend?.axis_clearance,
       exclude_rects: [],
       points: hist_points_for_placement,
@@ -1167,272 +1235,83 @@
     {@render ref_lines_layer(ref_lines_by_z.below_points)}
 
     <!-- X-axis -->
-    <g class="x-axis">
-      <line
-        x1={pad.l}
-        x2={width - pad.r}
-        y1={height - pad.b}
-        y2={height - pad.b}
-        stroke={final_x_axis.color || `var(--border-color, gray)`}
-        stroke-width="1"
-      />
-      {#each ticks.x as tick (tick)}
-        {@const tick_x = scales.x(tick as number)}
-        {@const custom_label = get_tick_label(tick as number, final_x_axis.ticks)}
-        {@const inside = final_x_axis.tick?.label?.inside ?? false}
-        {@const shift_x = final_x_axis.tick?.label?.shift?.x ?? 0}
-        {@const shift_y = final_x_axis.tick?.label?.shift?.y ?? 0}
-        {@const base_y = inside ? -8 : 8}
-        {@const text_y = base_y + shift_y}
-        {@const dominant_baseline = inside ? `auto` : `hanging`}
-        <g class="tick" transform="translate({tick_x}, {height - pad.b})">
-          {#if display.x_grid}
-            <line
-              y1={-(height - pad.b - pad.t)}
-              y2="0"
-              stroke="var(--border-color, gray)"
-              stroke-dasharray="4"
-              stroke-width="1"
-              {...final_x_axis.grid_style ?? {}}
-            />
-          {/if}
-          <line
-            y1="0"
-            y2={inside ? -5 : 5}
-            stroke={final_x_axis.color || `var(--border-color, gray)`}
-            stroke-width="1"
-          />
-          <text
-            x={shift_x}
-            y={text_y}
-            text-anchor="middle"
-            dominant-baseline={dominant_baseline}
-            fill={final_x_axis.color || `var(--text-color)`}
-          >
-            {custom_label ?? format_value(tick, final_x_axis.format)}
-          </text>
-        </g>
-      {/each}
-      {#if final_x_axis.label || x_axis.options?.length}
-        {@const { label_shift, label = ``, options, selected_key, color } = final_x_axis}
-        <AxisLabel
-          x={(pad.l + width - pad.r) / 2 + (label_shift?.x ?? 0)}
-          y={height - 10 + (label_shift?.y ?? 0)}
-          {label}
-          {options}
-          {selected_key}
-          loading={axis_loading === `x`}
-          axis_type="x"
-          {color}
-          on_select={(key) => handle_axis_change(`x`, key)}
-        />
-      {/if}
-    </g>
+    <PlotAxis
+      side="x"
+      ticks={ticks.x as number[]}
+      place={scales.x}
+      axis={final_x_axis}
+      {pad}
+      {width}
+      {height}
+      show_grid={display.x_grid}
+      tick_label={(tick) => get_tick_label(tick, final_x_axis.ticks)}
+      label_x={(pad.l + width - pad.r) / 2 + (final_x_axis.label_shift?.x ?? 0)}
+      label_y={height - 10 + (final_x_axis.label_shift?.y ?? 0)}
+      axis_loading={axis_loading === `x`}
+      on_axis_change={(key) => handle_axis_change(`x`, key)}
+    />
 
     <!-- X2-axis (Top) -->
     {#if x2_series.length > 0}
-      <g class="x2-axis">
-        <line
-          x1={pad.l}
-          x2={width - pad.r}
-          y1={pad.t}
-          y2={pad.t}
-          stroke={final_x2_axis.color || `var(--border-color, gray)`}
-          stroke-width="1"
-        />
-        {#each ticks.x2 as tick (tick)}
-          {@const tick_x = scales.x2(tick as number)}
-          {@const custom_label = get_tick_label(tick as number, final_x2_axis.ticks)}
-          {@const inside = final_x2_axis.tick?.label?.inside ?? false}
-          {@const shift_x = final_x2_axis.tick?.label?.shift?.x ?? 0}
-          {@const shift_y = final_x2_axis.tick?.label?.shift?.y ?? 0}
-          {@const base_y = inside ? 8 : -20}
-          {@const text_y = base_y + shift_y}
-          {@const dominant_baseline = inside ? `hanging` : `auto`}
-          <g class="tick" transform="translate({tick_x}, {pad.t})">
-            {#if display.x2_grid}
-              <line
-                y1="0"
-                y2={height - pad.b - pad.t}
-                stroke="var(--border-color, gray)"
-                stroke-dasharray="4"
-                stroke-width="1"
-                {...final_x2_axis.grid_style ?? {}}
-              />
-            {/if}
-            <line
-              y1={inside ? 0 : -5}
-              y2={inside ? 5 : 0}
-              stroke={final_x2_axis.color || `var(--border-color, gray)`}
-              stroke-width="1"
-            />
-            <text
-              x={shift_x}
-              y={text_y}
-              text-anchor="middle"
-              dominant-baseline={dominant_baseline}
-              fill={final_x2_axis.color || `var(--text-color)`}
-            >
-              {custom_label ?? format_value(tick, final_x2_axis.format)}
-            </text>
-          </g>
-        {/each}
-        {#if final_x2_axis.label || x2_axis.options?.length}
-          {@const { label_shift, label = ``, options, selected_key, color } =
-          final_x2_axis}
-          <AxisLabel
-            x={(pad.l + width - pad.r) / 2 + (label_shift?.x ?? 0)}
-            y={Math.max(12, pad.t - (label_shift?.y ?? 40))}
-            {label}
-            {options}
-            {selected_key}
-            loading={axis_loading === `x2`}
-            axis_type="x2"
-            {color}
-            on_select={(key) => handle_axis_change(`x2`, key)}
-          />
-        {/if}
-      </g>
+      <PlotAxis
+        side="x2"
+        ticks={ticks.x2 as number[]}
+        place={scales.x2}
+        axis={final_x2_axis}
+        {pad}
+        {width}
+        {height}
+        show_grid={display.x2_grid}
+        tick_label={(tick) => get_tick_label(tick, final_x2_axis.ticks)}
+        label_x={(pad.l + width - pad.r) / 2 + (final_x2_axis.label_shift?.x ?? 0)}
+        label_y={Math.max(12, pad.t - (final_x2_axis.label_shift?.y ?? 40))}
+        axis_loading={axis_loading === `x2`}
+        on_axis_change={(key) => handle_axis_change(`x2`, key)}
+      />
     {/if}
 
     <!-- Y-axis -->
-    <g class="y-axis">
-      <line
-        x1={pad.l}
-        x2={pad.l}
-        y1={pad.t}
-        y2={height - pad.b}
-        stroke={final_y_axis.color || `var(--border-color, gray)`}
-        stroke-width="1"
-      />
-      {#each ticks.y as tick (tick)}
-        {@const tick_y = scales.y(tick as number)}
-        {@const custom_label = get_tick_label(tick as number, final_y_axis.ticks)}
-        {@const inside = final_y_axis.tick?.label?.inside ?? false}
-        {@const shift_x = final_y_axis.tick?.label?.shift?.x ?? 0}
-        {@const shift_y = final_y_axis.tick?.label?.shift?.y ?? 0}
-        {@const base_x = inside ? 8 : -10}
-        {@const text_x = base_x + shift_x}
-        {@const text_anchor = inside ? `start` : `end`}
-        <g class="tick" transform="translate({pad.l}, {tick_y})">
-          {#if display.y_grid}
-            <line
-              x1="0"
-              x2={width - pad.l - pad.r}
-              stroke="var(--border-color, gray)"
-              stroke-dasharray="4"
-              stroke-width="1"
-              {...final_y_axis.grid_style ?? {}}
-            />
-          {/if}
-          <line
-            x1={inside ? 0 : -5}
-            x2={inside ? 5 : 0}
-            stroke={final_y_axis.color || `var(--border-color, gray)`}
-            stroke-width="1"
-          />
-          <text
-            x={text_x}
-            y={shift_y}
-            text-anchor={text_anchor}
-            dominant-baseline="central"
-            fill={final_y_axis.color || `var(--text-color)`}
-          >
-            {custom_label ?? format_value(tick, final_y_axis.format)}
-          </text>
-        </g>
-      {/each}
-      {#if final_y_axis.label || y_axis.options?.length}
-        {@const { label_shift, label = ``, options, selected_key, color, tick } =
-          final_y_axis}
-        {@const y_inside = tick?.label?.inside ?? false}
-        <AxisLabel
-          x={Math.max(
-            12,
-            pad.l - (y_inside ? 0 : tick_label_widths.y_max) - LABEL_GAP_DEFAULT,
-          ) +
-            (label_shift?.x ?? 0)}
-          y={pad.t + (height - pad.t - pad.b) / 2 + (label_shift?.y ?? 0)}
-          rotate
-          {label}
-          {options}
-          {selected_key}
-          loading={axis_loading === `y`}
-          axis_type="y"
-          {color}
-          on_select={(key) => handle_axis_change(`y`, key)}
-        />
-      {/if}
-    </g>
+    <PlotAxis
+      side="y"
+      ticks={ticks.y as number[]}
+      place={scales.y}
+      axis={final_y_axis}
+      {pad}
+      {width}
+      {height}
+      show_grid={display.y_grid}
+      tick_label={(tick) => get_tick_label(tick, final_y_axis.ticks)}
+      label_x={Math.max(
+        12,
+        pad.l - (final_y_axis.tick?.label?.inside ? 0 : tick_label_widths.y_max) -
+          LABEL_GAP_DEFAULT,
+      ) + (final_y_axis.label_shift?.x ?? 0)}
+      label_y={pad.t + (height - pad.t - pad.b) / 2 + (final_y_axis.label_shift?.y ?? 0)}
+      axis_loading={axis_loading === `y`}
+      on_axis_change={(key) => handle_axis_change(`y`, key)}
+    />
 
     <!-- Y2-axis (Right) -->
     {#if y2_series.length > 0}
-      <g class="y2-axis">
-        <line
-          x1={width - pad.r}
-          x2={width - pad.r}
-          y1={pad.t}
-          y2={height - pad.b}
-          stroke={final_y2_axis.color || `var(--border-color, gray)`}
-          stroke-width="1"
-        />
-        {#each ticks.y2 as tick (tick)}
-          {@const tick_y = scales.y2(tick as number)}
-          {@const custom_label = get_tick_label(tick as number, final_y2_axis.ticks)}
-          {@const inside = final_y2_axis.tick?.label?.inside ?? false}
-          {@const base_x = inside ? -8 : 8}
-          {@const shift_x = (final_y2_axis.tick?.label?.shift?.x ?? 0) + base_x}
-          {@const shift_y = final_y2_axis.tick?.label?.shift?.y ?? 0}
-          {@const text_anchor = inside ? `end` : `start`}
-          <g class="tick" transform="translate({width - pad.r}, {tick_y})">
-            {#if display.y2_grid}
-              <line
-                x1={-(width - pad.l - pad.r)}
-                x2="0"
-                stroke="var(--border-color, gray)"
-                stroke-dasharray="4"
-                stroke-width="1"
-                {...final_y2_axis.grid_style ?? {}}
-              />
-            {/if}
-            <line
-              x1={inside ? -5 : 0}
-              x2={inside ? 0 : 5}
-              stroke={final_y2_axis.color || `var(--border-color, gray)`}
-              stroke-width="1"
-            />
-            <text
-              x={shift_x}
-              y={shift_y}
-              text-anchor={text_anchor}
-              dominant-baseline="central"
-              fill={final_y2_axis.color || `var(--text-color)`}
-            >
-              {custom_label ?? format_value(tick, final_y2_axis.format)}
-            </text>
-          </g>
-        {/each}
-        {#if final_y2_axis.label || y2_axis.options?.length}
-          {@const { label_shift, label = ``, options, selected_key, color, tick } =
-          final_y2_axis}
-          {@const inside = tick?.label?.inside ?? false}
-          {@const tick_shift = inside ? 0 : (tick?.label?.shift?.x ?? 0) + 8}
-          {@const tick_width_contribution = inside ? 0 : tick_label_widths.y2_max}
-          <AxisLabel
-            x={width - pad.r + tick_shift + tick_width_contribution +
-            LABEL_GAP_DEFAULT + (label_shift?.x ?? 0)}
-            y={pad.t + (height - pad.t - pad.b) / 2 + (label_shift?.y ?? 0)}
-            rotate
-            {label}
-            {options}
-            {selected_key}
-            loading={axis_loading === `y2`}
-            axis_type="y2"
-            {color}
-            on_select={(key) => handle_axis_change(`y2`, key)}
-          />
-        {/if}
-      </g>
+      {@const y2_inside = final_y2_axis.tick?.label?.inside ?? false}
+      {@const y2_tick_shift = y2_inside ? 0 : (final_y2_axis.tick?.label?.shift?.x ?? 0) + 8}
+      {@const y2_tick_width = y2_inside ? 0 : tick_label_widths.y2_max}
+      <PlotAxis
+        side="y2"
+        ticks={ticks.y2 as number[]}
+        place={scales.y2}
+        axis={final_y2_axis}
+        {pad}
+        {width}
+        {height}
+        show_grid={display.y2_grid}
+        tick_label={(tick) => get_tick_label(tick, final_y2_axis.ticks)}
+        label_x={width - pad.r + y2_tick_shift + y2_tick_width + LABEL_GAP_DEFAULT +
+        (final_y2_axis.label_shift?.x ?? 0)}
+        label_y={pad.t + (height - pad.t - pad.b) / 2 + (final_y2_axis.label_shift?.y ?? 0)}
+        axis_loading={axis_loading === `y2`}
+        on_axis_change={(key) => handle_axis_change(`y2`, key)}
+      />
     {/if}
 
     <!-- Histogram bars (rendered after axes so bars appear above grid lines) -->
@@ -1568,21 +1447,31 @@
   {/if}
 
   {#if show_legend && legend != null && series.length > 1}
+    {@const legend_left = legend_auto_outside
+    ? legend_outside_x
+    : legend_placement
+    ? tweened_legend_coords.current.x
+    : pad.l + 10}
+    {@const legend_top = legend_auto_outside
+    ? legend_outside_y
+    : legend_placement
+    ? tweened_legend_coords.current.y
+    : pad.t + 10}
     <PlotLegend
       bind:root_element={legend_element}
       {...legend}
       series_data={legend_data}
       on_toggle={legend?.on_toggle || toggle_series_visibility}
       on_hover_change={legend_hover.set_locked}
-      on_item_hover={(series_idx) =>
+      on_item_hover={(series_idx: number | null) =>
         (hovered_legend_series_idx = series_idx != null && series_idx >= 0
           ? series_idx
           : null)}
       active_series_idx={hover_info?.series_idx ?? hovered_legend_series_idx}
       style={`
         position: absolute;
-        left: ${legend_placement ? tweened_legend_coords.current.x : pad.l + 10}px;
-        top: ${legend_placement ? tweened_legend_coords.current.y : pad.t + 10}px;
+        left: ${legend_left}px;
+        top: ${legend_top}px;
         pointer-events: auto;
         ${legend?.style || ``}
       `}
@@ -1660,9 +1549,6 @@
     font-weight: var(--histogram-font-weight);
     font-size: var(--histogram-font-size);
   }
-  g:is(.x-axis, .x2-axis, .y-axis, .y2-axis) .tick text {
-    font-size: var(--tick-font-size, 0.8em); /* shrink tick labels */
-  }
   .histogram-series path {
     transition: opacity 0.2s ease;
   }

package/dist/plot/Histogram.svelte.d.ts

@@ -45,6 +45,6 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & BasePlotProps & PlotCon
     on_error?: (error: AxisLoadError) => void;
     pan?: PanConfig;
 };
-declare const Histogram: import("svelte").Component<$$ComponentProps, {}, "mode" | "fullscreen" | "series" | "bins" | "show_legend" | "selected_property" | "hovered" | "ref_lines" | "show_controls" | "controls_open">;
+declare const Histogram: import("svelte").Component<$$ComponentProps, {}, "mode" | "show_controls" | "fullscreen" | "series" | "bins" | "show_legend" | "selected_property" | "hovered" | "ref_lines" | "controls_open">;
 type Histogram = ReturnType<typeof Histogram>;
 export default Histogram;

package/dist/plot/HistogramControls.svelte.d.ts

@@ -17,6 +17,6 @@ type $$ComponentProps = Omit<PlotControlsProps, `children` | `post_children`> &
     has_y2_points?: boolean;
     children?: Snippet<[Required<PlotConfig>]>;
 };
-declare const HistogramControls: import("svelte").Component<$$ComponentProps, {}, "display" | "mode" | "bins" | "show_legend" | "selected_property" | "show_controls" | "controls_open" | "x_axis" | "y_axis" | "bar" | "x2_axis" | "y2_axis">;
+declare const HistogramControls: import("svelte").Component<$$ComponentProps, {}, "display" | "mode" | "show_controls" | "x_axis" | "y_axis" | "bar" | "bins" | "show_legend" | "selected_property" | "controls_open" | "x2_axis" | "y2_axis">;
 type HistogramControls = ReturnType<typeof HistogramControls>;
 export default HistogramControls;

package/dist/plot/InteractiveAxisLabel.svelte

@@ -75,7 +75,6 @@
   .static-label {
     display: inline-flex;
     align-items: baseline;
-    gap: 0.2em;
   }
   .loading :global(.axis-trigger) {
     opacity: 0.7;
@@ -84,11 +83,14 @@
   .interactive-axis-label :global(:is(sub, sup)) {
     font-size: 0.75em;
     line-height: 0;
+    /* vertical-align is ignored in the flex label wrapper. */
+    position: relative;
+    vertical-align: baseline;
   }
   .interactive-axis-label :global(sub) {
-    vertical-align: sub;
+    top: 0.35em;
   }
   .interactive-axis-label :global(sup) {
-    vertical-align: super;
+    top: -0.5em;
   }
 </style>

package/dist/plot/InteractiveAxisLabel.svelte.d.ts

@@ -9,6 +9,6 @@ type $$ComponentProps = {
     on_select?: (key: string) => void;
     [key: string]: unknown;
 };
-declare const InteractiveAxisLabel: import("svelte").Component<$$ComponentProps, {}, "color" | "loading" | "selected_key">;
+declare const InteractiveAxisLabel: import("svelte").Component<$$ComponentProps, {}, "color" | "selected_key" | "loading">;
 type InteractiveAxisLabel = ReturnType<typeof InteractiveAxisLabel>;
 export default InteractiveAxisLabel;