Fix chrome-slot styling contract: snake_case keys + selection paint

[Alek99]

Summary

An audit of the CSS / customization surface (there's no Tailwind/CSS in the repo — styling is the :where() chrome stylesheet + --chart-* tokens + per-slot class_names/styles) turned up two ways the "your styles always win" contract in docs/styling.md was silently violated. This fixes both.

1. snake_case style keys were silently dropped in the browser (HIGH)

The documented headline example ships snake_case keys:

styles={"title": {"font_size": 18, "letter_spacing": "0.02em"}}

• Python keeps the key verbatim in the spec — style_mapping kebab-normalizes only for its grammar check (_css_property_name), so validation passes and font_size reaches the client unchanged.
• Client — _stylePropertyName only converted camelCase (/[A-Z]/), never underscores, so it called el.style.setProperty("font_size", "18px"), which the browser ignores.

Net: every multi-word property in the documented snake_case form (font_size, letter_spacing, line_height, border_radius, …) validated with a green light and then rendered unstyled — the exact "silently wrong chart" outcome the project sells against.

Fix: normalize _→- in _stylePropertyName so snake/camel/kebab are interchangeable. This also lets the unitless-property check see the real kebab name, so {"line_height": 1.5} stays unitless instead of getting a spurious px. Fixed client-side (not in Python) so it also covers per-annotation style={...} and leaves the Python spec contract untouched.

2. The selection slot pinned paint inline (MEDIUM)

_updateBand re-pinned border/background inline on every pointermove, so class_names={"selection": "border-red-500"} (and even styles["selection"]) lost to the inline style — the one chrome slot where classes couldn't win.

Fix: drive the band via a data-fc-band="zoom"|"select" attribute and move the paint into a zero-specificity :where() default (mirroring the existing canvas-cursor pattern). Only the mode discriminator + structural position/size stay inline.

3. Undocumented tokens (LOW)

--chart-zoom-selection / --chart-zoom-selection-fill were real, overridable tokens missing from the token table — now documented.

Changes

• js/src/50_chartview.js — underscore normalization in _stylePropertyName
• js/src/53_interaction.js + js/src/20_theme.js — selection band via data-fc-band + :where() default
• docs/styling.md — document the zoom-band tokens
• python/xy/static/{index,standalone}.js — regenerated via node js/build.mjs
• tests/test_static_client_security.py — regression coverage for both fixes

Verification

• node js/build.mjs --check → bundles fresh
• cargo build --release + pytest tests/test_static_client_security.py tests/test_components.py tests/test_css_validation.py tests/test_figure.py → 251 passed

Follow-up (not in this PR)

The client tests are source-grep assertions — which is how #1 slipped through (the numeric-styles test greps for the px logic but never runs it). A real DOM-level regression test via the existing Playwright dev-dep (render with styles={"title": {"font_size": 30}}, assert getComputedStyle(...).fontSize === "30px") would close the gap for good. Happy to add it if wanted. Separately, modebar opacity and legend max-height are also pinned inline (defensible as state/layout) — could get a doc note or the same treatment.

[codspeed-hq]

Merging this PR will not alter performance

✅ 80 untouched benchmarks
⏩ 1 skipped benchmark¹

---

_{Comparing fix/styling-slot-contract (9a78ecb) with main (11d1480)}

Footnotes

1. 1 benchmark was skipped, so the baseline result was used instead. If it was deleted from the codebase, click here and archive it to remove it from the performance reports. ↩