matterviz 0.3.1 → 0.3.3

package/dist/chempot-diagram/index.d.ts

@@ -0,0 +1,6 @@
+export { default as ChemPotDiagram } from './ChemPotDiagram.svelte';
+export { default as ChemPotDiagram2D } from './ChemPotDiagram2D.svelte';
+export { default as ChemPotDiagram3D } from './ChemPotDiagram3D.svelte';
+export { compute_chempot_async } from './async-compute.svelte';
+export { compute_chempot_diagram, get_ternary_combinations } from './compute';
+export * from './types';

package/dist/chempot-diagram/index.js

@@ -0,0 +1,6 @@
+export { default as ChemPotDiagram } from './ChemPotDiagram.svelte';
+export { default as ChemPotDiagram2D } from './ChemPotDiagram2D.svelte';
+export { default as ChemPotDiagram3D } from './ChemPotDiagram3D.svelte';
+export { compute_chempot_async } from './async-compute.svelte';
+export { compute_chempot_diagram, get_ternary_combinations } from './compute';
+export * from './types';

package/dist/chempot-diagram/pointer.d.ts

@@ -0,0 +1,16 @@
+export declare function get_pointer_coords(raw_event: unknown): {
+    clientX: number;
+    clientY: number;
+} | null;
+/** Convert pointer event to container-relative coords for tooltip placement. */
+export declare function get_hover_pointer(raw_event: unknown, container_rect: DOMRect | null | undefined): {
+    x: number;
+    y: number;
+} | null;
+/** Add hover pointer to an info object for tooltip placement. */
+export declare function with_hover_pointer<T extends {
+    pointer?: {
+        x: number;
+        y: number;
+    };
+}>(info: Omit<T, `pointer`>, raw_event: unknown, container_rect: DOMRect | null | undefined): T;

package/dist/chempot-diagram/pointer.js

@@ -0,0 +1,40 @@
+// Event/pointer normalization for hover tooltips.
+// Handles DOM events and Threlte/Three.js event wrappers (nativeEvent, srcEvent).
+const is_pointer_like_event = (event_val) => (typeof PointerEvent !== `undefined` && event_val instanceof PointerEvent) ||
+    (typeof MouseEvent !== `undefined` && event_val instanceof MouseEvent);
+export function get_pointer_coords(raw_event) {
+    if (is_pointer_like_event(raw_event)) {
+        return raw_event;
+    }
+    if (!raw_event || typeof raw_event !== `object`)
+        return null;
+    const event_obj = raw_event;
+    if (is_pointer_like_event(event_obj.nativeEvent)) {
+        return event_obj.nativeEvent;
+    }
+    if (is_pointer_like_event(event_obj.srcEvent)) {
+        return event_obj.srcEvent;
+    }
+    const client_x = event_obj.clientX;
+    const client_y = event_obj.clientY;
+    if (typeof client_x === `number` && typeof client_y === `number`) {
+        return { clientX: client_x, clientY: client_y };
+    }
+    return null;
+}
+/** Convert pointer event to container-relative coords for tooltip placement. */
+export function get_hover_pointer(raw_event, container_rect) {
+    const pointer_event = get_pointer_coords(raw_event);
+    if (!pointer_event)
+        return null;
+    const offset_x = container_rect?.left ?? 0;
+    const offset_y = container_rect?.top ?? 0;
+    const x = pointer_event.clientX - offset_x + 4;
+    const y = pointer_event.clientY - offset_y + 4;
+    return { x, y };
+}
+/** Add hover pointer to an info object for tooltip placement. */
+export function with_hover_pointer(info, raw_event, container_rect) {
+    const pointer = get_hover_pointer(raw_event, container_rect);
+    return { ...info, pointer: pointer ?? undefined };
+}

package/dist/chempot-diagram/temperature.d.ts

@@ -0,0 +1,15 @@
+import type { PhaseData } from '../convex-hull/types';
+import type { ChemPotDiagramConfig } from './types';
+interface TempFilterProps {
+    interpolate_temperature?: boolean;
+    max_interpolation_gap?: number;
+}
+export interface TempFilterPayload {
+    has_temp_data: boolean;
+    available_temperatures: number[];
+    temp_filtered_entries: PhaseData[];
+}
+export declare function get_projection_source_entries(entries: PhaseData[], temp_filtered_entries: PhaseData[]): PhaseData[];
+export declare function get_temp_filter_payload(entries: PhaseData[], temperature: number | undefined, config: ChemPotDiagramConfig, props: TempFilterProps): TempFilterPayload;
+export declare function get_valid_temperature(temperature: number | undefined, has_temp_data: boolean, available_temperatures: number[]): number | undefined;
+export {};

package/dist/chempot-diagram/temperature.js

@@ -0,0 +1,36 @@
+import { analyze_temperature_data, filter_entries_at_temperature, } from '../convex-hull/helpers';
+import { CHEMPOT_DEFAULTS } from './types';
+export function get_projection_source_entries(entries, temp_filtered_entries) {
+    return temp_filtered_entries.length > 0 ? temp_filtered_entries : entries;
+}
+const resolve_temp_filter_options = (config, props) => ({
+    interpolate: config.interpolate_temperature ??
+        props.interpolate_temperature ??
+        CHEMPOT_DEFAULTS.interpolate_temperature,
+    max_interpolation_gap: config.max_interpolation_gap ??
+        props.max_interpolation_gap ??
+        CHEMPOT_DEFAULTS.max_interpolation_gap,
+});
+export function get_temp_filter_payload(entries, temperature, config, props) {
+    const { has_temp_data, available_temperatures } = analyze_temperature_data(entries);
+    if (!has_temp_data || temperature === undefined) {
+        return { has_temp_data, available_temperatures, temp_filtered_entries: entries };
+    }
+    const filter_options = resolve_temp_filter_options(config, props);
+    const temp_filtered_entries = filter_entries_at_temperature(entries, temperature, filter_options);
+    return { has_temp_data, available_temperatures, temp_filtered_entries };
+}
+export function get_valid_temperature(temperature, has_temp_data, available_temperatures) {
+    if (!has_temp_data || available_temperatures.length === 0)
+        return temperature;
+    const min_temperature = available_temperatures[0];
+    const max_temperature = available_temperatures.at(-1) ?? min_temperature;
+    if (temperature === undefined)
+        return min_temperature;
+    if (available_temperatures.includes(temperature))
+        return temperature;
+    if (temperature >= min_temperature && temperature <= max_temperature) {
+        return temperature;
+    }
+    return min_temperature;
+}

package/dist/chempot-diagram/types.d.ts

@@ -0,0 +1,86 @@
+import type { D3InterpolateName } from '../colors';
+import type { PhaseData } from '../convex-hull/types';
+export type ChemPotLimits = Partial<Record<string, [number, number]>>;
+export type ChemPotColorMode = `none` | `energy` | `formation_energy` | `arity` | `entries`;
+export type ChemPotProjectionMode = `single` | `grid`;
+export interface ChemPotDiagramConfig {
+    formal_chempots?: boolean;
+    default_min_limit?: number;
+    element_padding?: number;
+    label_stable?: boolean;
+    elements?: string[];
+    limits?: ChemPotLimits;
+    formulas_to_draw?: string[];
+    draw_formula_meshes?: boolean;
+    draw_formula_lines?: boolean;
+    formula_colors?: string[];
+    show_tooltip?: boolean;
+    tooltip_detail_level?: `compact` | `detailed`;
+    color_mode?: ChemPotColorMode;
+    color_scale?: D3InterpolateName;
+    reverse_color_scale?: boolean;
+    interpolate_temperature?: boolean;
+    max_interpolation_gap?: number;
+    projection_mode?: ChemPotProjectionMode;
+}
+export interface ChemPotDiagramData {
+    domains: Record<string, number[][]>;
+    elements: string[];
+    el_refs: Record<string, PhaseData>;
+    min_entries: PhaseData[];
+    hyperplanes: number[][];
+    hyperplane_entries: PhaseData[];
+    lims: [number, number][];
+}
+export interface ChemPotHoverPointer {
+    x: number;
+    y: number;
+}
+export interface ChemPotHoverInfoBase {
+    formula: string;
+    view: `2d` | `3d`;
+    pointer?: ChemPotHoverPointer;
+}
+export interface AxisRangeData {
+    element: string;
+    min_val: number;
+    max_val: number;
+}
+export interface ChemPotHoverInfo2D extends ChemPotHoverInfoBase {
+    view: `2d`;
+    n_points: number;
+    axis_ranges: AxisRangeData[];
+}
+export interface ChemPotHoverInfo3D extends ChemPotHoverInfoBase {
+    view: `3d`;
+    n_vertices: number;
+    n_edges: number;
+    n_points: number;
+    ann_loc: number[];
+    axis_ranges: AxisRangeData[];
+    touches_limits: string[];
+    is_elemental: boolean;
+    is_draw_formula: boolean;
+    matching_entry_count: number;
+    min_energy_per_atom: number | null;
+    max_energy_per_atom: number | null;
+    neighbors: string[];
+}
+export type ChemPotHoverInfo = ChemPotHoverInfo2D | ChemPotHoverInfo3D;
+export declare const CHEMPOT_DEFAULTS: {
+    readonly formal_chempots: true;
+    readonly default_min_limit: -50;
+    readonly element_padding: 1;
+    readonly label_stable: true;
+    readonly draw_formula_meshes: true;
+    readonly draw_formula_lines: true;
+    readonly show_tooltip: true;
+    readonly tooltip_detail_level: "detailed";
+    readonly color_mode: ChemPotColorMode;
+    readonly color_scale: D3InterpolateName;
+    readonly reverse_color_scale: true;
+    readonly interpolate_temperature: true;
+    readonly max_interpolation_gap: 500;
+    readonly projection_mode: ChemPotProjectionMode;
+    readonly formula_colors: readonly ["#1b9e77", "#d95f02", "#7570b3", "#e7298a", "#66a61e", "#e6ab02", "#a6761d", "#666666"];
+};

package/dist/chempot-diagram/types.js

@@ -0,0 +1,28 @@
+// Default configuration values
+export const CHEMPOT_DEFAULTS = {
+    formal_chempots: true,
+    default_min_limit: -50,
+    element_padding: 1.0,
+    label_stable: true,
+    draw_formula_meshes: true,
+    draw_formula_lines: true,
+    show_tooltip: true,
+    tooltip_detail_level: `detailed`,
+    color_mode: `formation_energy`,
+    color_scale: `interpolateSpectral`,
+    reverse_color_scale: true,
+    interpolate_temperature: true,
+    max_interpolation_gap: 500,
+    projection_mode: `single`,
+    // Dark2 qualitative palette (same as pymatgen/plotly default)
+    formula_colors: [
+        `#1b9e77`,
+        `#d95f02`,
+        `#7570b3`,
+        `#e7298a`,
+        `#66a61e`,
+        `#e6ab02`,
+        `#a6761d`,
+        `#666666`,
+    ],
+};

package/dist/colors/index.d.ts

@@ -1,13 +1,15 @@
 import * as d3_sc from 'd3-scale-chromatic';
+import type { Vec3 } from '../math';
 import type { ELEM_SYMBOLS } from '../labels';
 export type D3InterpolateName = keyof typeof d3_sc & `interpolate${string}`;
 export type D3ColorSchemeName = D3InterpolateName extends `interpolate${infer Name}` ? Name : never;
+export declare const get_d3_interpolator: (name: D3InterpolateName) => ((t: number) => string);
 export declare const COLOR_SCALE_TYPES: readonly ["continuous", "categorical"];
 export type ColorScaleType = (typeof COLOR_SCALE_TYPES)[number];
 export declare const DEFAULT_CATEGORY_COLORS: Record<string, string>;
 export declare const AXIS_COLORS: readonly [readonly ["x", "#d75555", "#e66666"], readonly ["y", "#55b855", "#66c966"], readonly ["z", "#5555d7", "#6666e6"]];
 export declare const NEG_AXIS_COLORS: readonly [readonly ["nx", "#b84444", "#cc5555"], readonly ["ny", "#44a044", "#55b155"], readonly ["nz", "#4444b8", "#5555c9"]];
-export type RGBColor = [number, number, number];
+export type RGBColor = Vec3;
 export type ElementColorScheme = Record<(typeof ELEM_SYMBOLS)[number], RGBColor>;
 export declare const vesta_hex: Record<string, string>;
 export declare const jmol_hex: Record<string, string>;

package/dist/colors/index.js

@@ -6,6 +6,10 @@ import jmol_colors from './jmol-colors.json' with { type: 'json' };
 import muted_colors from './muted-colors.json' with { type: 'json' };
 import pastel_colors from './pastel-colors.json' with { type: 'json' };
 import vesta_colors from './vesta-colors.json' with { type: 'json' };
+export const get_d3_interpolator = (name) => {
+    const candidate = d3_sc[name];
+    return typeof candidate === `function` ? candidate : d3_sc.interpolateViridis;
+};
 export const COLOR_SCALE_TYPES = [`continuous`, `categorical`];
 // color values have to be in hex format since that's the only format
 // <input type="color"> supports
@@ -57,10 +61,10 @@ export const is_color = (val) => {
         return false;
     // Check for hex colors, rgb/rgba, hsl/hsla, color(), var(), and named colors
     // Exclude incomplete function prefixes like 'rgb', 'hsl', 'var', 'color'
-    return /^(#[0-9a-f]{3,8}|rgba?\([^)]+\)|hsla?\([^)]+\)|color\([^)]+\)|var\([^)]+\)|(?!rgb$|hsl$|var$|color$)[a-z]+)$/i
-        .test(val.toString().trim());
+    return /^(#[0-9a-f]{3,8}|rgba?\([^)]+\)|hsla?\([^)]+\)|color\([^)]+\)|var\([^)]+\)|(?!rgb$|hsl$|var$|color$)[a-z]+)$/i.test(val.trim());
 };
 export const PLOT_COLORS = [
+    // Color series for e.g. line plots
     `#63b3ed`,
     `#68d391`,
     `#fbd38d`,
@@ -129,7 +133,9 @@ export function is_dark_mode() {
         if (stored === `dark` || stored === `light`)
             return stored === `dark`;
     }
-    catch { /* localStorage throws in private browsing mode */ }
+    catch {
+        /* localStorage throws in private browsing mode */
+    }
     return globalThis.matchMedia?.(`(prefers-color-scheme: dark)`).matches ?? false;
 }
 // Watch for dark mode changes and call callback on each change. Returns cleanup function.

package/dist/composition/BarChart.svelte

@@ -1,73 +1,143 @@
-<script lang="ts">import { ELEMENT_COLOR_SCHEMES, pick_contrast_color } from '../colors';
-import { format_num } from '../labels';
-import { get_chart_font_scale } from './index';
-import { fractional_composition } from './parse';
-let { composition, size = 200, bar_height = 30, label_height = 20, gap = 2, min_segment_size_for_label = 15, thin_segment_threshold = 0.2, external_label_size_threshold = 5, outer_corners_only = true, show_labels = true, show_percentages = false, show_amounts = true, color_scheme = `Vesta`, segment_content, interactive = true, svg_node = $bindable(null), children, ...rest } = $props();
-let element_colors = $derived(ELEMENT_COLOR_SCHEMES[color_scheme] || ELEMENT_COLOR_SCHEMES.Vesta);
-let fractions = $derived(fractional_composition(composition));
-let svg_height = $derived(label_height + gap + bar_height + gap + label_height);
-let bar_y = $derived(label_height + gap);
-let above_labels_y = $derived(label_height / 2);
-let below_labels_y = $derived(label_height + gap + bar_height + gap + label_height / 2);
-let segments = $derived.by(() => {
-    const element_entries = Object.entries(composition).filter(([_, amount]) => amount && amount > 0);
-    if (element_entries.length === 0)
-        return [];
-    let [current_x, above_labels, below_labels] = [0, 0, 0];
+<script lang="ts">
+  import type { ColorSchemeName } from '../colors'
+  import { ELEMENT_COLOR_SCHEMES, pick_contrast_color } from '../colors'
+  import type { CompositionType } from './'
+  import type { ElementSymbol } from '../element'
+  import { format_num } from '../labels'
+  import type { Snippet } from 'svelte'
+  import type { SVGAttributes } from 'svelte/elements'
+  import { type ChartSegmentData, get_chart_font_scale } from './index'
+  import { fractional_composition } from './parse'
+
+  type BarSegmentData = ChartSegmentData & {
+    x: number
+    width: number
+    can_show_label: boolean
+    needs_external_label: boolean
+    external_label_position: `above` | `below` | null
+    label_x: number
+    label_y: number
+  }
+
+  let {
+    composition,
+    size = 200,
+    bar_height = 30,
+    label_height = 20,
+    gap = 2,
+    min_segment_size_for_label = 15,
+    thin_segment_threshold = 0.2,
+    external_label_size_threshold = 5,
+    outer_corners_only = true,
+    show_labels = true,
+    show_percentages = false,
+    show_amounts = true,
+    color_scheme = `Vesta`,
+    segment_content,
+    interactive = true,
+    svg_node = $bindable(null),
+    children,
+    ...rest
+  }: SVGAttributes<SVGSVGElement> & {
+    composition: CompositionType
+    size?: number
+    bar_height?: number
+    label_height?: number
+    gap?: number
+    min_segment_size_for_label?: number
+    thin_segment_threshold?: number
+    external_label_size_threshold?: number
+    outer_corners_only?: boolean
+    show_labels?: boolean
+    show_percentages?: boolean
+    show_amounts?: boolean
+    color_scheme?: ColorSchemeName
+    segment_content?: Snippet<[BarSegmentData]>
+    interactive?: boolean
+    svg_node?: SVGSVGElement | null
+    children?: Snippet<[{ hovered_element: ElementSymbol | null }]>
+  } = $props()
+
+  let element_colors = $derived(
+    ELEMENT_COLOR_SCHEMES[color_scheme] || ELEMENT_COLOR_SCHEMES.Vesta,
+  )
+  let fractions = $derived(fractional_composition(composition))
+
+  let svg_height = $derived(label_height + gap + bar_height + gap + label_height)
+  let bar_y = $derived(label_height + gap)
+  let above_labels_y = $derived(label_height / 2)
+  let below_labels_y = $derived(
+    label_height + gap + bar_height + gap + label_height / 2,
+  )
+
+  let segments = $derived.by(() => {
+    const element_entries = Object.entries(composition).filter(([_, amount]) =>
+      amount && amount > 0
+    ) as [ElementSymbol, number][]
+    if (element_entries.length === 0) return []
+
+    let [current_x, above_labels, below_labels] = [0, 0, 0]
+
     return element_entries.map(([element, amount]) => {
-        const fraction = fractions[element] || 0;
-        const color = element_colors[element] || `#cccccc`;
-        const width = fraction * size;
-        const x = current_x;
-        current_x += width;
-        const segment_size = Math.min(width, size);
-        const base_scale = Math.min(2, Math.max(1, segment_size / 40));
-        const label_text = element + (show_amounts ? amount.toString() : ``) +
-            (show_percentages ? `${format_num(fraction, `.1~%`)}` : ``);
-        const font_scale = get_chart_font_scale(base_scale, label_text, segment_size * 0.9, 0.6, 12);
-        // Label positioning
-        const can_show_label = segment_size >= min_segment_size_for_label;
-        const is_thin = fraction < thin_segment_threshold;
-        const can_show_external_label = segment_size >= external_label_size_threshold;
-        const needs_external_label = is_thin && can_show_external_label;
-        let external_label_position = null;
-        if (needs_external_label) {
-            external_label_position = above_labels <= below_labels ? `above` : `below`;
-            if (external_label_position === `above`)
-                above_labels++;
-            else
-                below_labels++;
-        }
-        const text_color = pick_contrast_color({ bg_color: color });
-        const label_props = {
-            font_scale,
-            text_color,
-            can_show_label,
-            needs_external_label,
-            external_label_position,
-            label_x: x + width / 2,
-            label_y: bar_y + bar_height / 2,
-        };
-        return { element, amount, fraction, color, x, width, ...label_props };
-    });
-});
-let hovered_element = $state(null);
-// Generate unique ID for clipPath to avoid collisions across BarCharts
-let clip_path_id = $derived(`bar-clip-${crypto.randomUUID()}`);
+      const fraction = fractions[element] || 0
+      const color = element_colors[element] || `#cccccc`
+      const width = fraction * size
+      const x = current_x
+      current_x += width
+
+      const segment_size = Math.min(width, size)
+      const base_scale = Math.min(2, Math.max(1, segment_size / 40))
+      const label_text = element + (show_amounts ? amount?.toString() ?? `` : ``) +
+        (show_percentages ? `${format_num(fraction, `.1~%`)}` : ``)
+      const font_scale = get_chart_font_scale(
+        base_scale,
+        label_text,
+        segment_size * 0.9,
+        0.6,
+        12,
+      )
+
+      // Label positioning
+      const can_show_label = segment_size >= min_segment_size_for_label
+      const is_thin = fraction < thin_segment_threshold
+      const can_show_external_label = segment_size >= external_label_size_threshold
+      const needs_external_label = is_thin && can_show_external_label
+
+      let external_label_position: `above` | `below` | null = null
+      if (needs_external_label) {
+        external_label_position = above_labels <= below_labels ? `above` : `below`
+        if (external_label_position === `above`) above_labels++
+        else below_labels++
+      }
+
+      const text_color = pick_contrast_color({ bg_color: color })
+      const label_props = {
+        font_scale,
+        text_color,
+        can_show_label,
+        needs_external_label,
+        external_label_position,
+        label_x: x + width / 2,
+        label_y: bar_y + bar_height / 2,
+      }
+      return { element, amount, fraction, color, x, width, ...label_props }
+    })
+  })
+
+  let hovered_element: ElementSymbol | null = $state(null)
+  // Generate unique ID for clipPath to avoid collisions across BarCharts
+  let clip_path_id = $derived(`bar-clip-${crypto.randomUUID()}`)
 </script>
 
 {#snippet label_content(segment: BarSegmentData)}
   <tspan class="element-symbol" style:font-size="{10 * segment.font_scale}px">
     {segment.element}
   </tspan>
-  {#if show_amounts}
-    <tspan class="amount" style:font-size="{8 * segment.font_scale}px" dx="1" dy="5">
-      {segment.amount}
-    </tspan>
-  {/if}
-  {#if show_percentages}
-    <tspan class="percentage" style:font-size="{8 * segment.font_scale}px" dx="1" dy="5">
-      {format_num(segment.fraction, `.1~%`)}
+  {#if show_amounts || show_percentages}
+    <tspan class="amount" style:font-size="{6.5 * segment.font_scale}px" dx="1" dy="5">
+      {show_amounts ? segment.amount : ``}{show_amounts && show_percentages ? `=` : ``}{
+        show_percentages ? format_num(segment.fraction, `.1~%`) : ``
+      }
     </tspan>
   {/if}
 {/snippet}
@@ -76,9 +146,7 @@ let clip_path_id = $derived(`bar-clip-${crypto.randomUUID()}`);
   viewBox="0 0 {size} {svg_height}"
   {...rest}
   class="bar-chart {rest.class ?? ``}"
-  style={`--bar-height: ${bar_height}px; --label-height: ${label_height}px; --gap: ${gap}px; --border-radius: ${
-    outer_corners_only ? 4 : 0
-  }px; ${rest.style ?? ``}`}
+  style:max-width="{size}px"
   bind:this={svg_node}
 >
   <!-- Background and border -->
@@ -87,11 +155,8 @@ let clip_path_id = $derived(`bar-clip-${crypto.randomUUID()}`);
     y={bar_y}
     width={size}
     height={bar_height}
-    rx={outer_corners_only ? 4 : 0}
-    ry={outer_corners_only ? 4 : 0}
-    fill="var(--bar-bg, #fff)"
-    stroke="var(--bar-border, #ccc)"
-    stroke-width="1"
+    fill="var(--bar-bg)"
+    stroke="var(--bar-border, none)"
   />
 
   <!-- External labels above -->
@@ -119,8 +184,8 @@ let clip_path_id = $derived(`bar-clip-${crypto.randomUUID()}`);
         y={bar_y}
         width={size}
         height={bar_height}
-        rx={outer_corners_only ? 4 : 0}
-        ry={outer_corners_only ? 4 : 0}
+        rx={outer_corners_only ? 2 : 0}
+        ry={outer_corners_only ? 2 : 0}
       />
     </clipPath>
   </defs>
@@ -169,7 +234,7 @@ let clip_path_id = $derived(`bar-clip-${crypto.randomUUID()}`);
         x={segment.label_x}
         y={segment.label_y}
         text-anchor="middle"
-        dominant-baseline="middle"
+        dominant-baseline={show_amounts || show_percentages ? `middle` : `central`}
         class="bar-label"
         style:fill={segment.text_color}
       >
@@ -201,8 +266,7 @@ let clip_path_id = $derived(`bar-clip-${crypto.randomUUID()}`);
 <style>
   .bar-chart {
     display: inline-block;
-    width: 100%;
-    max-width: var(--bar-max-width, 100%);
+    --bar-bg: light-dark(#fff, #333);
   }
   .bar-segment {
     transition: all 0.2s ease;
@@ -227,7 +291,7 @@ let clip_path_id = $derived(`bar-clip-${crypto.randomUUID()}`);
   .element-symbol {
     font-weight: 700;
   }
-  .amount, .percentage {
+  .amount {
     font-weight: 500;
   }
 </style>