@bezda/rhp-mcp 0.1.7 → 0.1.9

package/skill/references/performance.md

@@ -104,6 +104,51 @@ Both widened when a longer label became visible, with identical widths before an
 Conditional rendering does not by itself require fixed room.
 Verify the chart's gutter geometry, including its own sizing constraints, when changing which labels are mounted.
 
+## Go without the guard when the page's CSS leaves charts alone
+
+The guard is the part of rhp's CSS that resets, on every element rhp makes, what a page's CSS might set there, so the page cannot change a chart (api.md section 11, "What page CSS can and cannot change").
+Without it, a chart's first draw is 18 to 28% faster in Chromium (1,000 bars: 34 to 24 ms), about 30% faster in WebKit, and 4 to 16% faster in Firefox.
+A chart goes without it with `noCssGuard=${true}` on the Chart, and every chart on a page with `noCssGuard()` before the first one (rhp 2.1 and later).
+Without it, rhp's own CSS still places and colors every block, keeps hidden slats hidden and keeps `box-sizing: border-box`, but page CSS reaches whatever rhp does not set itself (measured with page rules on every `div` and `span`):
+
+| Page CSS | Without the guard |
+|---|---|
+| `margin`, `padding`, `border` | moves blocks, Labels and grid lines |
+| `width`, `height`, `min-width`, `max-width`, `min-height`, `max-height` | resizes bars, slat roots and Labels |
+| `font`, `line-height`, `letter-spacing`, `text-indent`, `text-transform` | changes Labels and axis numbers, and moves them |
+| `::before` and `::after` with `content` (a clearfix) | adds boxes to the chart's grid, the axis, Plots and slat roots |
+| `background`, `box-shadow`, `border-radius`, `outline` | drawn on rhp's elements |
+| `transition` | reaches the axis numbers and edge Labels (rhp keeps its own on blocks and slat roots) |
+| `animation` | runs on every element |
+| `::selection` | colors selected text in Labels |
+| a rule for a class a slat uses too (`.poster .note`, written for the poster's note, and a Label with `class="note"`) | reaches that element |
+| `display`, `float`, `box-sizing` | moves nothing |
+
+The browser's own styles reach a chart without the guard too, on a slat root that isn't a `div` (measured in Chromium, WebKit and Firefox): an `<svg>` root cuts off what it draws outside its box, an `<a>` is blue and underlined, a `<button>` or `<input>` has the browser's border, background and font, and a `<p>`, `<ul>`, `<h3>` or `<figure>` has margins that move it off its place.
+A `div`, `li`, `span`, `section`, `label` or `table` root looks the same either way.
+Set those properties in the slat's `css` (`margin: 0`, `overflow: visible`), or use a `div`.
+
+Choose it for a page made for its charts, such as a poster or an article, or for one large chart among small ones.
+Then check that the page's CSS leaves the chart alone: compare screenshots of the chart with and without it, at rest, while hovered and focused, and after a data change.
+The checker reports `page-css-reaches` for a page rule that reaches an element rhp makes in a chart without the guard.
+Drawn without the guard under 12 popular stylesheets, the docs site's 92 example charts and the slat gallery's 20 changed only where a slat used one of the framework's class names: Bootstrap 5's `.row` and `.mark`, Bulma's `.box`, `.tag`, `.icon` and `.progress`, Milligram's `.row`.
+Tailwind (browser build and preflight), normalize.css, modern-normalize, sanitize.css, Pico, Water.css, Simple.css and new.css changed none of them.
+The prop saves as much as `noCssGuard()` for its own chart, but once one chart says `noCssGuard`, the guard checks which chart each element is in (a `data-rhp-guard` mark on the charts that keep it), and those charts draw 2 to 6% slower.
+So prefer `noCssGuard()` when every chart on the page can go without it.
+A chart inside another chart's slat goes without the guard only when the chart around it does too.
+A page that links rhp's CSS itself (`linkedCss()`) links `@bezda/rhp/rhp-no-css-guard.css`, the same without the guard, instead of `rhp.css`, and calls `noCssGuard()` too: the prop can't change a stylesheet the page links, and rhp warns.
+In the html template the prop is written out, `noCssGuard=${true}`: bare, it is `""`, which is false.
+
+## Read a slat's position in its CSS
+
+From rhp 2.1, each slat's `--rhp-position` is written on its root and not passed down to the elements inside, so the browser can reuse one slat's styles for the next: in Chromium a 1,000-bar chart draws about 40% faster (57 to 33 ms), a 50 by 50 heatmap 57% faster, 50 small charts 17% faster; WebKit gains about 10% on bars, and Firefox is unchanged.
+Where nothing can be shared anyway (a scatter of 1,000 dots, every value changing at once), keeping the position on the root costs 1 to 2 ms (3 to 5%) in Chromium; WebKit shows no cost there, and Firefox none beyond its run-to-run noise.
+The slat type's `css` still reads it on any element in the slat: rhp rewrites `var(--rhp-position)` there to a copy its roots pass down (DevTools shows it as `--rhp-row`), and in a Plot inside the slat it is the inner slat's place.
+Its slats then share no styles, as in 2.0, and draw about 4% slower than in 2.0 (1,000 bars: 63 against 61 ms in Chromium).
+A `style` prop or page CSS on an element inside a slat gets nothing from `var(--rhp-position)`.
+Read it in the slat's `css`, or copy it on the root and read the copy inside: `style=${{ "--row": "var(--rhp-position)" }}`, then `var(--row)` (those slats then draw as slowly as before).
+`inheritPosition()` before the first chart passes it down again in every chart on the page, as rhp did before 2.1, and charts draw as in 2.0 or a little slower (1,000 bars: 59 against 57 ms in Chromium).
+
 ## Verified example and limits
 
 The vocabulary article already uses these patterns.

package/skill/references/pitfalls.md

@@ -57,6 +57,10 @@ Start from a recipe, never from what another library does.
 9. **A vertical Plot over a horizontal chart draws 0px-tall columns**: in rhp 2.0.1, a second top-level Plot with `orientation="vertical"` in a horizontal Chart whose slat type has `room: "auto"` gets columns as wide as the chart and no height. Give the slats room in px, or put the Plot in a chart with `cross` (as the line recipe does).
 10. **A scatter or line chart puts everything on one line**: with Dot slats, the Chart needs `cross=${[min, max]}`, the Plot needs `overlap=${true}`, and each Dot needs `cross=${() => d.y}`.
     The experimental [ManyDots collection](api.md#manydots-experimental-point-collection) goes directly inside a Chart with `cross` and takes its own `rows`, `at`, and `cross` accessors.
+11. **The chart says `noCssGuard`, or the page calls `noCssGuard()`**: page CSS that sets margins, padding, borders or sizes on every `div` or `span` (a framework's base styles) now reaches rhp's elements and moves them, and a slat root that is a `<p>`, `<ul>`, `<h3>` or `<figure>` keeps the browser's margins (performance.md, "Go without the guard").
+    Take `noCssGuard` off, aim those rules at the page's own elements, or use a `div` as the slat's root.
+12. **A position read outside the slat's CSS is empty** (rhp 2.1 and later): `var(--rhp-position)` in a `style` prop on an element inside a slat gets nothing [37].
+    Read it in the slat type's `css`, or copy it on the slat's root (`style=${{ "--row": "var(--rhp-position)" }}`) and read `var(--row)`.
 
 ## Text sticks out, is cut off or overlaps
 
@@ -123,6 +127,7 @@ The checker warns (`layout-jump`) when a control or the chart moves after one of
 2. **A readout that wraps on a phone pushes the chart down**: give it a `min-height` for its longest text at 320px (`min-height: 2lh`, or `3lh`), counting the longest numbers and dates that gain a year ("Jan 4, 2027").
 3. **Numbers that change width shift what follows them**: use `font-variant-numeric: tabular-nums`, and give a column of numbers a fixed room; in an "auto" end room, align them across slats with `justify-self: stretch` and `justify-content: flex-end` on the label.
    In a readout, tabular figures alone are not enough when the number of digits changes ("$654" to "$84,176") or a date's month names differ in width: start each part where nothing before it changes width (a grid with a column per part, or each part on its own line), or give the value a box with a `min-width` in `ch` for the longest value it can show, right-aligned. A label or a unit after a value on the same line ("8,101 tons in 2026") slides at every step of a pointer moving along the chart.
+   Tip: when the font's tabular figures do not suit the poster (a slashed or dotted zero), keep its own digits and set each in an equal-width slot (design.md, section 5); a right-aligned number that changes, such as a large date, needs the same.
 4. **Every bar slides when a slat is lit**: the lit name turns bold in a `room.start` of "auto", which measures the widest name again and moves the plot.
    Change only the lit name's color, or keep its bold width at rest: room in px, or the bold text drawn hidden under the name (`.name::after { content: attr(data-name); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 700; }`, with `data-name=${() => d.name}` on the Label; measured: the bars held still at 1280px, where a plain bold name moved them 10.8px).
 5. **A button whose text changes (Play, Pause) moves its neighbors**: stack both texts in one grid cell, the hidden one `visibility: hidden`, so the button is always as wide as the longer one.
@@ -152,6 +157,7 @@ These are the traps it brings.
 ## Styles or colors do not apply
 
 1. **Page CSS aimed at bars, labels or the axis** [21]: it cannot change their color, background, font, border, radius, shadow, padding or transition, even with `!important`. Move those rules into the slat type's `css`.
+   (A chart that says `noCssGuard` lets page CSS reach what rhp does not set itself, such as fonts, borders and padding, but still not a block's color: performance.md, "Go without the guard".)
 2. **`className`** [5]: on a block it replaces rhp's class and the block vanishes. Use `class`.
 3. **The chart ignores the page's font or colors** [20]: give them in the Chart's `theme` (`font`, `ink`, `muted`, `grid`, `series`, ...).
 4. **`var(--brand)` as a color warns** [20]: put the brand colors in the theme instead.
@@ -167,6 +173,8 @@ These are the traps it brings.
 14. **A pinned readout or a menu over the chart is drawn under the bars** [36]: give it `z-index: 2` or more.
 15. **The marks are invisible when the component is shown on its own**: its theme reads the app's variables with no fallback (`series: ["var(--chart-1)", …]`), so on a page without the app's CSS (the checker's page, a test, Storybook) every mark is transparent.
     Give each a fallback with the app's own value: `"var(--chart-1, oklch(0.646 0.222 41.116))"` (design.md section 8).
+16. **A Label takes a color, font or margin meant for something else on the page**: the chart says `noCssGuard`, and a page rule for one of the slat's classes reaches it (the candlestick recipe's page had `.poster .note` for its footnote, and its earnings Label has `class="note"`).
+    Rename the slat's class, or aim the page rule at the page's own element.
 
 ## Console warnings rhp prints
 
@@ -183,6 +191,7 @@ Each is worth fixing [34]:
 | "--rhp-radius takes one length" | one length, or `--rhp-start-radius` and `--rhp-end-radius` |
 | "unknown ease" | a CSS name, four cubic-bezier numbers, or a function |
 | "linkedCss() was called, but this page doesn't link" | link `@bezda/rhp/rhp.css`, or remove `linkedCss()` |
+| "noCssGuard on a Chart can't turn off the guard in the rhp.css the page links" | link `@bezda/rhp/rhp-no-css-guard.css` instead and call `noCssGuard()`, or remove the prop |
 
 ## Mistakes in the work itself
 

package/src/check/README.md

@@ -86,7 +86,7 @@ The tests read this table: every code in it must have a chart in `test/broken/`
 |---|---|---|---|
 | `missing-export` | error | A name imported from `@bezda/rhp/standalone` that it doesn't export, so the module fails to load. | What to use instead (a function returning the template for `Dynamic`, `render()` into the other element for `Portal`...), or the closest export. |
 | `two-solids` | error | `@bezda/rhp/standalone` and `solid-js` imported in the same code: two copies of Solid, and the signals of one are not tracked by the other. | Import everything from the standalone module. |
-| `bare-boolean` | error | `overlap`, `static`, `keyboard`, `animate`, `mirror`, `smooth`, `fill` or `keyed` written bare on a component in an html template: it passes `""`, which is false. | `name=${true}`. |
+| `bare-boolean` | error | `overlap`, `static`, `keyboard`, `animate`, `noCssGuard`, `mirror`, `smooth`, `fill` or `keyed` written bare on a component in an html template: it passes `""`, which is false. | `name=${true}`. |
 | `handler-at-render` | error | An `on...` prop on a component in an html template given a function with no parameter (inline, or a function named in the file): it is read as a value, runs at render and is never attached. | Give the handler a parameter: `(e) => ...`. |
 | `style-string` | error | `style="..."` (or a string) on a Chart or a Plot, which take only a style object. | `style=${{ "pointer-events": "none" }}`. |
 | `class-name` | error | `className` in an html template: on a block it replaces rhp's class and the block is not drawn, elsewhere it sets nothing. | `class`. |
@@ -146,6 +146,7 @@ The tests read this table: every code in it must have a chart in `test/broken/`
 |---|---|---|---|
 | `series-past-theme` | error | A block's color is `series-n` with no `--rhp-series-n` in its chart, so it falls back to `series-1`. | `series(n)` for a theme of n colors, or more theme colors. |
 | `block-transition` | warning | A slat's CSS sets a transition on a block (or on an Area's or a Line's path) that drops rhp's own (left and width, bottom and height, a Cell's background-color, a path's d), so the block jumps to new values. Not in the JS version, not with `transition: none`, and not when the slat's CSS places the block itself (a radial layout). Read with motion on. | A transition on an element inside the block, or rhp's properties named too. |
+| `page-css-reaches` | warning | A chart goes without the guard (`noCssGuard`), and a page rule reaches an element rhp makes in it and sets what the guard would have reset there (margin, padding, border, sizes, fonts and text styles, colors, outlines, transitions...), where rhp's own rules don't win. A class name the page and a slat share does it too, and so do the browser's own styles for a slat root that isn't a `div` (a button's border, a `p`'s margins, an `svg`'s overflow). | Aim the rule at the page's own elements, rename the slat's class, use a `div` root, or take `noCssGuard` off. |
 | `page-css-ignored` | warning | A page rule aimed at a chart (it names an `.rhp-` class, or its subject has a class, an id or an attribute and it reaches only elements in charts) sets properties that rhp's own rules set on every element it reaches. rhp's are `!important` in its layers, so the page's change nothing. | The slat type's `css`, the block's `color`, the Chart's theme. |
 
 ### Controls and interactions

package/src/check/findings.js

@@ -55,6 +55,7 @@ export const SEE = {
   "scrolls-away": 'interaction.md, "2. Readout on hover, focus and tap"',
   "focus-invisible": 'interaction.md, "9. Keyboard"',
   "page-css-ignored": PITFALLS("Styles or colors do not apply"),
+  "page-css-reaches": 'performance.md, "Go without the guard when the page\'s CSS leaves charts alone"',
   "series-past-theme": PITFALLS("Styles or colors do not apply"),
   "class-name": PITFALLS("Styles or colors do not apply"),
   "low-contrast": 'design.md, "4. Color"',
@@ -148,6 +149,21 @@ export function fromProbe(f, context) {
         fix: `Style what is in a chart in the slat type's css (slat({ css: \`.bar { ... }\` }, fn))${colors ? ", and give colors with the block's color prop or the Chart's theme" : ""}${font ? ", and the font with the theme's font" : ""}. Page CSS can only set opacity, cursor, filter, transform, z-index and pointer-events there.`,
       };
     }
+    case "page-css-reaches":
+      if (f.browser) {
+        return {
+          level: "warning",
+          code: f.code,
+          message: `The chart goes without the guard (noCssGuard), and ${f.count > 1 ? `${f.count} slat roots` : "a slat root"} (<${f.browser}>) keep${f.count > 1 ? "" : "s"} the browser's own ${f.props.join(", ")} for that element${f.browser === "svg" ? ": what it draws outside its box is cut off" : ""}.`,
+          fix: `Use a div as the slat's root, or set ${f.props.join(", ")} in the slat type's css, or take noCssGuard off.`,
+        };
+      }
+      return {
+        level: "warning",
+        code: f.code,
+        message: `The chart goes without the guard (noCssGuard), and the page's CSS rule ${f.selector} sets ${f.props.join(", ")} on ${f.what}${f.count > 1 ? ` and ${f.count - 1} more` : ""} in it.`,
+        fix: "Aim that rule at the page's own elements, or give the slat a class name the page doesn't use, or take noCssGuard off: without the guard, page CSS reaches what rhp doesn't set itself.",
+      };
     case "value-past-scale": {
       const where = `${f.cross ? "the Chart's cross scale" : "the Chart's scale"} [${f.min}, ${f.max}]`;
       const count = f.count > 1 ? ` (${f.count} values)` : "";
@@ -313,7 +329,7 @@ export function fromProbe(f, context) {
   }
 }
 
-const STANDALONE = ["render", "html", "createSignal", "createMemo", "createEffect", "createRoot", "onMount", "onCleanup", "batch", "untrack", "For", "Index", "Show", "createStore", "reconcile", "produce", "unwrap", "Plot", "Scale", "Chart", "Theme", "Axis", "at", "useOrientation", "THEME", "series", "slat", "restyle", "linkedCss", "shape", "Bar", "Dot", "Tick", "Label", "Cell", "Place", "Area", "Line", "Poster", "sortBy", "cycle", "every", "extent", "nice", "stackUp", "shares", "running", "summary", "bins", "density", "animated", "curve", "drawing"];
+const STANDALONE = ["render", "html", "createSignal", "createMemo", "createEffect", "createRoot", "onMount", "onCleanup", "batch", "untrack", "For", "Index", "Show", "createStore", "reconcile", "produce", "unwrap", "Plot", "Scale", "Chart", "Theme", "Axis", "at", "useOrientation", "THEME", "series", "slat", "restyle", "linkedCss", "noCssGuard", "inheritPosition", "shape", "Bar", "Dot", "Tick", "Label", "Cell", "Place", "Area", "Line", "Poster", "sortBy", "cycle", "every", "extent", "nice", "stackUp", "shares", "running", "summary", "bins", "density", "animated", "curve", "drawing"];
 
 // What to do about an error the page threw
 export function fixForError(message, format) {

package/src/check/inpage.js

@@ -654,16 +654,29 @@ export function install() {
       if (past.size) add({ code: "series-past-theme", keys: [...past.keys()].sort((a, b) => a - b), count: [...past.values()].reduce((a, b) => a + b, 0), have });
     }
 
-    // Page CSS that reaches into a chart and sets what rhp's own CSS sets there: it loses, so it changes nothing
+    // Page CSS that reaches into a chart and sets what rhp's own CSS sets there: it loses, so it changes nothing. rhp's
+    // rules are the ones it adopts and, on a page that links rhp.css (linkedCss), the ones in rhp's layers there.
+    const pageSheets = [...document.styleSheets].filter((s) => !s.ownerNode?.matches?.("[data-rhp-layers], [data-rhp-server]"));
+    const pageRules = styleRules(pageSheets);
+    const rhpRules = [...own, ...pageRules.filter((r) => /^rhp(\.|$)/.test(r.layer))];
     const byProp = new Map();
-    for (const r of own) {
+    for (const r of rhpRules) {
       for (const p of r.props) {
         if (!byProp.has(p)) byProp.set(p, []);
         byProp.get(p).push(r.selector);
       }
     }
-    const pageSheets = [...document.styleSheets].filter((s) => !s.ownerNode?.matches?.("[data-rhp-layers], [data-rhp-server]"));
-    for (const r of styleRules(pageSheets)) {
+    // A chart without the guard (noCssGuard): page CSS reaches what rhp doesn't set itself on the elements rhp makes.
+    // The guard is the rhp rule with display: revert; once a chart says noCssGuard it applies only to charts that don't,
+    // and with noCssGuard() there is none.
+    const guardRule = rhpRules.find((r) => r.rule.style.getPropertyValue("display") === "revert" && r.selector.includes(".rhp-body"));
+    const RHP_MADE = ".rhp-body, .rhp-axis, .rhp-gridline, .rhp-gridline > span, .rhp-plot, .rhp-plot > *, .rhp-bar, .rhp-dot, .rhp-tick, .rhp-label, .rhp-cell, .rhp-place, .rhp-area, .rhp-area path, .rhp-line, .rhp-line path";
+    const unguarded = (el) => matches(el, RHP_MADE) && (!guardRule || !matches(el, guardRule.selector));
+    // what the guard resets (display, float and box-sizing move nothing there), and values that change nothing
+    const GUARDED = /^(margin|padding|border|outline|background|box-shadow|overflow|min-width|min-height|max-width|max-height|width$|height$|vertical-align|transition|animation|text-decoration|user-select|touch-action|font|line-height|letter-spacing|word-spacing|text-transform|text-indent|text-align|text-shadow|color$|white-space|text-wrap|word-break|overflow-wrap|hyphens|line-break)/;
+    const harmless = (v) => /^(0|0px|0%|0s|none|auto|visible|baseline|normal|initial|unset|inherit|revert|revert-layer|transparent|currentcolor|rgba\(0, 0, 0, 0\))$/i.test(v.trim());
+    const family = (p) => p.match(/^(background|border|margin|padding|font|outline|text-decoration|transition|animation|inset|overflow|grid|flex|columns?|list-style)/)?.[1] ?? p;
+    for (const r of pageRules) {
       if (/^rhp(\.|$)/.test(r.layer) || !r.props.length) continue;
       let matched = [];
       try {
@@ -673,16 +686,51 @@ export function install() {
       }
       const reached = matched.filter((el) => el.closest(".rhp-chart")).slice(0, 60);
       if (!reached.length) continue;
+      const loose = reached.filter(unguarded);
+      const live = r.props.filter((p) => GUARDED.test(p) && !harmless(r.rule.style.getPropertyValue(p)) && loose.some((el) => !(byProp.get(p) ?? []).some((sel) => matches(el, sel))));
+      if (live.length) {
+        const first = loose.find((el) => live.some((p) => !(byProp.get(p) ?? []).some((sel) => matches(el, sel))));
+        add({ code: "page-css-reaches", selector: snippet(r.selector), props: [...new Set(live.map(family))], what: first.matches(".rhp-gridline > span") ? "an axis number" : describe(first), count: loose.length });
+      }
       // only a rule aimed at the chart: one that names rhp's classes, or one with a class, an id or an attribute on its
       // subject that reaches only elements in charts (a reset such as svg { display: block } is not aimed at it)
       const subjects = r.selector.split(/,(?![^(]*\))/).map((x) => x.trim().split(/\s*[\s>+~]\s*(?![^(]*\))/).pop());
       if (!/\.rhp-/.test(r.selector) && !(reached.length === matched.length && subjects.every((x) => /[.#[]/.test(x)))) continue;
       const dead = r.props.filter((p) => byProp.has(p) && reached.every((el) => byProp.get(p).some((sel) => matches(el, sel))));
       if (!dead.length) continue;
-      const family = (p) => p.match(/^(background|border|margin|padding|font|outline|text-decoration|transition|animation|inset|overflow|grid|flex|columns?|list-style)/)?.[1] ?? p;
       add({ code: "page-css-ignored", selector: snippet(r.selector), props: [...new Set(dead.map(family))], what: describe(reached[0]), count: reached.length });
     }
 
+    // The browser's own styles for a slat root's element (a button's border, a p's margins, an svg's overflow), which the
+    // guard resets: in a chart without it they stay. What no rule (rhp's, a slat's, the page's) and no style attribute
+    // sets on the root, and differs from what the guard gives, comes from the browser.
+    const setByRule = (el, p) => el.style.getPropertyValue(p) !== "" || (byProp.get(p) ?? []).some((sel) => matches(el, sel))
+      || pageRules.some((r) => r.props.includes(p) && matches(el, r.selector));
+    const defaults = new Map();
+    for (const el of document.querySelectorAll(".rhp-chart .rhp-plot > *")) {
+      if (!unguarded(el)) continue;
+      const s = getComputedStyle(el);
+      const up = getComputedStyle(el.parentElement);
+      const sides = ["top", "right", "bottom", "left"];
+      const off = [
+        ...sides.map((d) => [`margin-${d}`, s.getPropertyValue(`margin-${d}`) !== "0px"]),
+        ...sides.map((d) => [`padding-${d}`, s.getPropertyValue(`padding-${d}`) !== "0px"]),
+        ...sides.map((d) => [`border-${d}-width`, s.getPropertyValue(`border-${d}-style`) !== "none" && s.getPropertyValue(`border-${d}-width`) !== "0px"]),
+        ["text-decoration-line", s.getPropertyValue("text-decoration-line") !== "none"],
+        ["background-color", s.getPropertyValue("background-color") !== "rgba(0, 0, 0, 0)"],
+        ["overflow-x", el.localName === "svg" && s.getPropertyValue("overflow-x") !== "visible"],
+        ...["font-size", "font-weight", "font-family", "color"].map((p) => [p, s.getPropertyValue(p) !== up.getPropertyValue(p)]),
+      ].filter(([p, differs]) => differs && !setByRule(el, p)).map(([p]) => family(p.replace(/^border-\w+-width$/, "border").replace(/^overflow-x$/, "overflow")));
+      if (!off.length) continue;
+      const seen = defaults.get(el.localName) ?? { props: new Set(), count: 0, el };
+      off.forEach((p) => seen.props.add(p));
+      seen.count++;
+      defaults.set(el.localName, seen);
+    }
+    for (const [tag, d] of defaults) {
+      add({ code: "page-css-reaches", browser: tag, props: [...d.props], what: describe(d.el), count: d.count });
+    }
+
     // Text too small to read
     let tiny = null;
     let tinyCount = 0;

package/src/check/report.js

@@ -5,7 +5,7 @@
 const PASSES = [
   [["runtime-error", "console-error", "syntax-error", "missing-import", "missing-import-map", "plain-script-tag", "interaction-error", "missing-export"], "no errors thrown"],
   [["rhp-warning"], "no rhp warnings"],
-  [["unknown-prop", "bad-prop", "bad-scale", "dot-size", "missing-group", "plot-typo", "group-lengths", "no-component", "bare-boolean", "handler-at-render", "style-string", "class-name", "two-solids", "series-past-theme", "page-css-ignored", "block-transition", "stale-read", "static-chart"], "rhp used as documented"],
+  [["unknown-prop", "bad-prop", "bad-scale", "dot-size", "missing-group", "plot-typo", "group-lengths", "no-component", "bare-boolean", "handler-at-render", "style-string", "class-name", "two-solids", "series-past-theme", "page-css-ignored", "page-css-reaches", "block-transition", "stale-read", "static-chart"], "rhp used as documented"],
   [["no-chart", "empty-plot", "small-plot", "collapsed-chart", "plot-outside-chart"], null],
   [["nan-value"], "no NaN values"],
   [["value-past-scale", "points-past-scale"], "values inside the scale"],

package/src/check/source.js

@@ -13,10 +13,11 @@ import { closest } from "../guard/rules.js";
 const STANDALONE = "@bezda/rhp/standalone";
 
 // The props of rhp's components (and Solid's Show) that take a boolean, and what "" (false) does to each
-const BOOLEANS = { Chart: ["animate", "static"], Plot: ["overlap", "static", "keyboard", "animate"], Area: ["mirror", "smooth"], Line: ["fill", "smooth"], Show: ["keyed"] };
+const BOOLEANS = { Chart: ["animate", "static", "noCssGuard"], Plot: ["overlap", "static", "keyboard", "animate"], Area: ["mirror", "smooth"], Line: ["fill", "smooth"], Show: ["keyed"] };
 const OFF = {
   overlap: "its slats don't share one band",
   static: "the chart is not static",
+  noCssGuard: "the chart keeps the guard",
   keyboard: "its slats take no focus",
   animate: "the JS version stays off",
   mirror: "the Area is not mirrored",

package/src/guard/rules.js

@@ -25,7 +25,7 @@ export const SETTING_VALUE = {
   children: (v) => typeof v === "function",
 };
 
-export const CHART_PROPS = ["scale", "orientation", "height", "aspect", "ticks", "grid", "format", "animate", "theme", "static", "cross", "crossTicks", "crossGrid", "crossFormat", "label", "id", "class", "role", "style", "ref", "children"];
+export const CHART_PROPS = ["scale", "orientation", "height", "aspect", "ticks", "grid", "format", "animate", "theme", "static", "noCssGuard", "cross", "crossTicks", "crossGrid", "crossFormat", "label", "id", "class", "role", "style", "ref", "children"];
 
 export const THEME_KEYS = ["series", "positive", "negative", "ink", "muted", "grid", "surface", "low", "high", "font"];
 
@@ -58,7 +58,7 @@ export const RENAMES = {
   Label: { value: "at", x: "at", y: "cross", position: "side", align: "side", text: "children", label: "children" },
   Area: { data: "points", values: "points", max: "peak", fill: "color", colour: "color", curved: "smooth" },
   Line: { data: "points", values: "points", max: "peak", curved: "smooth", area: "fill", colour: "color" },
-  Chart: { domain: "scale", range: "scale", extent: "scale", horizontal: "orientation", vertical: "orientation", direction: "orientation", colors: "theme", palette: "theme", tickFormat: "format", ariaLabel: "label", title: "label" },
+  Chart: { domain: "scale", range: "scale", extent: "scale", horizontal: "orientation", vertical: "orientation", direction: "orientation", colors: "theme", palette: "theme", tickFormat: "format", ariaLabel: "label", title: "label", noGuard: "noCssGuard", unguarded: "noCssGuard", noCSSGuard: "noCssGuard" },
   Poster: { headline: "title", heading: "title", subtitle: "dek", subheading: "dek", subhead: "dek", description: "dek", lede: "dek", standfirst: "dek", source: "note", footnote: "note", credit: "note", credits: "note", caption: "note", footer: "note", eyebrow: "kicker", overline: "kicker", tag: "kicker" },
   slat: { height: "thickness", width: "thickness", size: "thickness", thick: "thickness", pitch: "thickness", padding: "room", margin: "room", gutter: "room", gutters: "room", gap: "inset", style: "css", styles: "css", class: "css", className: "css" },
   theme: { colors: "series", palette: "series", accent: "series", text: "ink", foreground: "ink", color: "ink", background: "surface", bg: "surface", paper: "surface", gridline: "grid", gridlines: "grid", axis: "grid", fontFamily: "font", family: "font", typeface: "font" },