feat(base-element): a page could hide a block on every component or on none, because the lever was a stylesheet

`hide-readings` has always been per element: the WordPress plugin resolves a
site setting against a shortcode attribute and emits the answer on the tag, so
one placement can disagree with the site. Hiding a whole BLOCK had no such
lever. The only way to drop the chart patterns was a `::part()` rule in the page
stylesheet, which by construction applies to every component on the site, so a
teaching page and a public reading could not differ.

`RoxyDataElement` now takes `hide-sections`, a comma-separated list of part
names, and generates one rule per name into a per-instance style element inside
its own shadow root. It is the sibling of `hide-readings` and deliberately a
different tool: that one drops interpretive PROSE out of the markup so a page
never ships words it is not showing, this one hides a block whatever the block
contains, which is what a chart-pattern list needs because a T-square is a
measurement rather than writing.

Nothing was curated to make this work. The rule is generated from the name, so
every one of the 100 published part names works on every component that carries
it, and a name a component does not carry costs nothing and hides nothing. The
selector is `[part~="name"]` rather than `[part="name"]` because `part` is a
space-separated list: the natal chart grid carries `section aspects table
aspect-grid`, so an exact match would reach it by none of its four names.

Two things that look like shortcuts and are not. The rules go in a `<style>` in
the template rather than in static `styles`, because static styles are shared
across instances and two charts on one page have to be able to differ, which is
the entire feature. And `display:none` carries `!important` because Lit puts
static styles in `adoptedStyleSheets`, which the scoping spec applies AFTER an
in-tree style element, so a component's own `display:flex` wins otherwise.
Measured both ways: `patterns` is a bare section and hid without it, `legend`
carries a flex rule and did not.

One entry in `BASE_PROPS` carried it into all 61 React and 61 Vue wrappers,
typed and documented, which is the maintenance-free half of the existing
mechanism working as designed. The two non-data widgets are correctly excluded.

Three e2e tests, the last of which is the one that matters: two components on
one page hiding different blocks, which a stylesheet could not express.
Sabotage-proven by swapping `~=` for `=`, which fails two of them.

Author: ph33nx

AGENTS.md

@@ -219,7 +219,7 @@ The full set: `RoxyNatalChart` `houseSystem`, `RoxyHoroscopeCard` `period`, `Rox
 
 Every component takes `hide-readings` (`hideReadings` in React and Vue). It renders the chart and the data and leaves the interpretation out of the page: wheels, maps, tables, grids, legends, badges and every number stay, the interpretive prose goes. Off by default, so a component that does not set it is unchanged.
 
-The line is drawn on the CONTENT, never on the block, so a block that reads like analysis still stays when it is made of measurements. `<roxy-natal-chart>` and `<roxy-aspects-table>` both render the `patterns` payload and both make the same cut: the figure name, element, modality, tightness and planet chips are geometry and survive, the paragraph under them is the reading and goes. To remove such a block entirely, hide its part instead: `roxy-natal-chart::part(patterns) { display: none }`.
+The line is drawn on the CONTENT, never on the block, so a block that reads like analysis still stays when it is made of measurements. `<roxy-natal-chart>` and `<roxy-aspects-table>` both render the `patterns` payload and both make the same cut: the figure name, element, modality, tightness and planet chips are geometry and survive, the paragraph under them is the reading and goes. To remove such a block entirely, use `hide-sections` below.
 
 ```html
 <roxy-natal-chart hide-readings></roxy-natal-chart>
@@ -241,6 +241,25 @@ One component is a documented no-op despite being mostly prose:
 
 What survives, by family: charts keep the drawing, legend, glyphs, degrees and tab strip; tables keep every row and every calculated column (kaksha bindus, koota scores, significance bars, orbs, strengths); cards keep the header, badges, meters and fact grids, so a dosha keeps its verdict, phase and severity, a crystal keeps its Mohs hardness and attribute grid, and a horoscope keeps its energy meter, Moon placement, active transits and key dates; every Vedic response keeps its sidereal frame caption. What goes: interpretation paragraphs, reading accordions, keyword chips attached to a reading, remedies, action steps and strengths lists, and any section whose only content was one of those, heading included.
 
+### 6e. Removing a whole block
+
+Every component also takes `hide-sections` (`hideSections` in React and Vue): a comma-separated list of `part` names, and each one named is taken off that component.
+
+```html
+<roxy-natal-chart hide-sections="patterns"></roxy-natal-chart>
+<roxy-natal-chart hide-sections="patterns, legend"></roxy-natal-chart>
+```
+
+```tsx
+<RoxyNatalChart data={chart} hideSections="patterns" />
+```
+
+**It is per element, which is the difference from a stylesheet.** A `::part()` rule in your CSS reaches every matching component on the site at once; this reaches the one you put it on, so the same chart can keep its patterns on one page and drop them on another with no CSS at all.
+
+**Use `hide-readings` when the words must not ship, and `hide-sections` when a block should not show.** They are different tools rather than two spellings of one. `hide-readings` drops interpretive prose out of the markup entirely, so the page never ships text it is not displaying. `hide-sections` hides the block with CSS and leaves it in the DOM, because a block is a rendering concern and its content may be measurements you have no reason to strip.
+
+Any name a component publishes works, and the names are in `components-catalog.json` under `parts`. A name the component does not carry hides nothing and is not an error, so one list can be applied across a page of mixed components. Names are case-insensitive and spaces around the commas are ignored.
+
 ### 6c. Vue and Nuxt
 
 `@roxyapi/ui-vue` exposes the same components with the same prop names. Bind `data` and the config props normally; the package sets them as DOM properties for you, so an object payload never gets stringified into an attribute. Listen to widget events with the usual `@` syntax.

packages/ui-react/src/components/angel-number-card.tsx

@@ -30,11 +30,13 @@ export interface RoxyAngelNumberCardProps extends ElementAttrs {
 	attribution?: string;
 	/** Render the chart and the data and omit the written interpretation. Off by default. Use it when the page supplies its own words: the wheels, tables, grids, legends and numbers stay, and the interpretive prose is left out of the markup entirely. */
 	hideReadings?: boolean;
+	/** Comma-separated list of `part` names to take off this component, for example "patterns" or "patterns, legend". Per element rather than per site, so the same component can drop a block on one page and keep it on another with no CSS. Sibling of hideReadings and a different tool: this hides a whole block whatever it contains, where hideReadings drops interpretive prose out of the markup. Names come from the `parts` array in components-catalog.json; a name the component does not carry hides nothing and is not an error. */
+	hideSections?: string;
 
 }
 
 export const RoxyAngelNumberCard = React.forwardRef<HTMLElement | null, RoxyAngelNumberCardProps>(
-	function RoxyAngelNumberCard({ data, className, style, endpoint, method, publishableKey, baseUrl, specUrl, lang, submitLabel, attribution, hideReadings, ...rest }, ref) {
+	function RoxyAngelNumberCard({ data, className, style, endpoint, method, publishableKey, baseUrl, specUrl, lang, submitLabel, attribution, hideReadings, hideSections, ...rest }, ref) {
 		const internal = React.useRef<HTMLElement | null>(null);
 		React.useImperativeHandle<HTMLElement | null, HTMLElement | null>(
 			ref,
@@ -129,6 +131,13 @@ export const RoxyAngelNumberCard = React.forwardRef<HTMLElement | null, RoxyAnge
 			}
 		}, [hideReadings, loaded]);
 
+		React.useEffect(() => {
+			const el = internal.current;
+			if (el && hideSections !== undefined) {
+				(el as unknown as { hideSections: string }).hideSections = hideSections;
+			}
+		}, [hideSections, loaded]);
+
 		if (error) {
 			return React.createElement(
 				'div',

packages/ui-react/src/components/angel-number-lookup.tsx

@@ -30,11 +30,13 @@ export interface RoxyAngelNumberLookupProps extends ElementAttrs {
 	attribution?: string;
 	/** Render the chart and the data and omit the written interpretation. Off by default. Use it when the page supplies its own words: the wheels, tables, grids, legends and numbers stay, and the interpretive prose is left out of the markup entirely. */
 	hideReadings?: boolean;
+	/** Comma-separated list of `part` names to take off this component, for example "patterns" or "patterns, legend". Per element rather than per site, so the same component can drop a block on one page and keep it on another with no CSS. Sibling of hideReadings and a different tool: this hides a whole block whatever it contains, where hideReadings drops interpretive prose out of the markup. Names come from the `parts` array in components-catalog.json; a name the component does not carry hides nothing and is not an error. */
+	hideSections?: string;
 
 }
 
 export const RoxyAngelNumberLookup = React.forwardRef<HTMLElement | null, RoxyAngelNumberLookupProps>(
-	function RoxyAngelNumberLookup({ data, className, style, endpoint, method, publishableKey, baseUrl, specUrl, lang, submitLabel, attribution, hideReadings, ...rest }, ref) {
+	function RoxyAngelNumberLookup({ data, className, style, endpoint, method, publishableKey, baseUrl, specUrl, lang, submitLabel, attribution, hideReadings, hideSections, ...rest }, ref) {
 		const internal = React.useRef<HTMLElement | null>(null);
 		React.useImperativeHandle<HTMLElement | null, HTMLElement | null>(
 			ref,
@@ -129,6 +131,13 @@ export const RoxyAngelNumberLookup = React.forwardRef<HTMLElement | null, RoxyAn
 			}
 		}, [hideReadings, loaded]);
 
+		React.useEffect(() => {
+			const el = internal.current;
+			if (el && hideSections !== undefined) {
+				(el as unknown as { hideSections: string }).hideSections = hideSections;
+			}
+		}, [hideSections, loaded]);
+
 		if (error) {
 			return React.createElement(
 				'div',

packages/ui-react/src/components/arudha-padas.tsx

@@ -30,11 +30,13 @@ export interface RoxyArudhaPadasProps extends ElementAttrs {
 	attribution?: string;
 	/** Render the chart and the data and omit the written interpretation. Off by default. Use it when the page supplies its own words: the wheels, tables, grids, legends and numbers stay, and the interpretive prose is left out of the markup entirely. */
 	hideReadings?: boolean;
+	/** Comma-separated list of `part` names to take off this component, for example "patterns" or "patterns, legend". Per element rather than per site, so the same component can drop a block on one page and keep it on another with no CSS. Sibling of hideReadings and a different tool: this hides a whole block whatever it contains, where hideReadings drops interpretive prose out of the markup. Names come from the `parts` array in components-catalog.json; a name the component does not carry hides nothing and is not an error. */
+	hideSections?: string;
 
 }
 
 export const RoxyArudhaPadas = React.forwardRef<HTMLElement | null, RoxyArudhaPadasProps>(
-	function RoxyArudhaPadas({ data, className, style, endpoint, method, publishableKey, baseUrl, specUrl, lang, submitLabel, attribution, hideReadings, ...rest }, ref) {
+	function RoxyArudhaPadas({ data, className, style, endpoint, method, publishableKey, baseUrl, specUrl, lang, submitLabel, attribution, hideReadings, hideSections, ...rest }, ref) {
 		const internal = React.useRef<HTMLElement | null>(null);
 		React.useImperativeHandle<HTMLElement | null, HTMLElement | null>(
 			ref,
@@ -129,6 +131,13 @@ export const RoxyArudhaPadas = React.forwardRef<HTMLElement | null, RoxyArudhaPa
 			}
 		}, [hideReadings, loaded]);
 
+		React.useEffect(() => {
+			const el = internal.current;
+			if (el && hideSections !== undefined) {
+				(el as unknown as { hideSections: string }).hideSections = hideSections;
+			}
+		}, [hideSections, loaded]);
+
 		if (error) {
 			return React.createElement(
 				'div',

packages/ui-react/src/components/ashtakavarga-grid.tsx

@@ -30,11 +30,13 @@ export interface RoxyAshtakavargaGridProps extends ElementAttrs {
 	attribution?: string;
 	/** Render the chart and the data and omit the written interpretation. Off by default. Use it when the page supplies its own words: the wheels, tables, grids, legends and numbers stay, and the interpretive prose is left out of the markup entirely. */
 	hideReadings?: boolean;
+	/** Comma-separated list of `part` names to take off this component, for example "patterns" or "patterns, legend". Per element rather than per site, so the same component can drop a block on one page and keep it on another with no CSS. Sibling of hideReadings and a different tool: this hides a whole block whatever it contains, where hideReadings drops interpretive prose out of the markup. Names come from the `parts` array in components-catalog.json; a name the component does not carry hides nothing and is not an error. */
+	hideSections?: string;
 
 }
 
 export const RoxyAshtakavargaGrid = React.forwardRef<HTMLElement | null, RoxyAshtakavargaGridProps>(
-	function RoxyAshtakavargaGrid({ data, className, style, endpoint, method, publishableKey, baseUrl, specUrl, lang, submitLabel, attribution, hideReadings, ...rest }, ref) {
+	function RoxyAshtakavargaGrid({ data, className, style, endpoint, method, publishableKey, baseUrl, specUrl, lang, submitLabel, attribution, hideReadings, hideSections, ...rest }, ref) {
 		const internal = React.useRef<HTMLElement | null>(null);
 		React.useImperativeHandle<HTMLElement | null, HTMLElement | null>(
 			ref,
@@ -129,6 +131,13 @@ export const RoxyAshtakavargaGrid = React.forwardRef<HTMLElement | null, RoxyAsh
 			}
 		}, [hideReadings, loaded]);
 
+		React.useEffect(() => {
+			const el = internal.current;
+			if (el && hideSections !== undefined) {
+				(el as unknown as { hideSections: string }).hideSections = hideSections;
+			}
+		}, [hideSections, loaded]);
+
 		if (error) {
 			return React.createElement(
 				'div',

packages/ui-react/src/components/aspects-table.tsx

@@ -30,11 +30,13 @@ export interface RoxyAspectsTableProps extends ElementAttrs {
 	attribution?: string;
 	/** Render the chart and the data and omit the written interpretation. Off by default. Use it when the page supplies its own words: the wheels, tables, grids, legends and numbers stay, and the interpretive prose is left out of the markup entirely. */
 	hideReadings?: boolean;
+	/** Comma-separated list of `part` names to take off this component, for example "patterns" or "patterns, legend". Per element rather than per site, so the same component can drop a block on one page and keep it on another with no CSS. Sibling of hideReadings and a different tool: this hides a whole block whatever it contains, where hideReadings drops interpretive prose out of the markup. Names come from the `parts` array in components-catalog.json; a name the component does not carry hides nothing and is not an error. */
+	hideSections?: string;
 
 }
 
 export const RoxyAspectsTable = React.forwardRef<HTMLElement | null, RoxyAspectsTableProps>(
-	function RoxyAspectsTable({ data, className, style, endpoint, method, publishableKey, baseUrl, specUrl, lang, submitLabel, attribution, hideReadings, ...rest }, ref) {
+	function RoxyAspectsTable({ data, className, style, endpoint, method, publishableKey, baseUrl, specUrl, lang, submitLabel, attribution, hideReadings, hideSections, ...rest }, ref) {
 		const internal = React.useRef<HTMLElement | null>(null);
 		React.useImperativeHandle<HTMLElement | null, HTMLElement | null>(
 			ref,
@@ -129,6 +131,13 @@ export const RoxyAspectsTable = React.forwardRef<HTMLElement | null, RoxyAspects
 			}
 		}, [hideReadings, loaded]);
 
+		React.useEffect(() => {
+			const el = internal.current;
+			if (el && hideSections !== undefined) {
+				(el as unknown as { hideSections: string }).hideSections = hideSections;
+			}
+		}, [hideSections, loaded]);
+
 		if (error) {
 			return React.createElement(
 				'div',

packages/ui-react/src/components/astrocartography-map.tsx

@@ -30,11 +30,13 @@ export interface RoxyAstrocartographyMapProps extends ElementAttrs {
 	attribution?: string;
 	/** Render the chart and the data and omit the written interpretation. Off by default. Use it when the page supplies its own words: the wheels, tables, grids, legends and numbers stay, and the interpretive prose is left out of the markup entirely. */
 	hideReadings?: boolean;
+	/** Comma-separated list of `part` names to take off this component, for example "patterns" or "patterns, legend". Per element rather than per site, so the same component can drop a block on one page and keep it on another with no CSS. Sibling of hideReadings and a different tool: this hides a whole block whatever it contains, where hideReadings drops interpretive prose out of the markup. Names come from the `parts` array in components-catalog.json; a name the component does not carry hides nothing and is not an error. */
+	hideSections?: string;
 
 }
 
 export const RoxyAstrocartographyMap = React.forwardRef<HTMLElement | null, RoxyAstrocartographyMapProps>(
-	function RoxyAstrocartographyMap({ data, className, style, endpoint, method, publishableKey, baseUrl, specUrl, lang, submitLabel, attribution, hideReadings, ...rest }, ref) {
+	function RoxyAstrocartographyMap({ data, className, style, endpoint, method, publishableKey, baseUrl, specUrl, lang, submitLabel, attribution, hideReadings, hideSections, ...rest }, ref) {
 		const internal = React.useRef<HTMLElement | null>(null);
 		React.useImperativeHandle<HTMLElement | null, HTMLElement | null>(
 			ref,
@@ -129,6 +131,13 @@ export const RoxyAstrocartographyMap = React.forwardRef<HTMLElement | null, Roxy
 			}
 		}, [hideReadings, loaded]);
 
+		React.useEffect(() => {
+			const el = internal.current;
+			if (el && hideSections !== undefined) {
+				(el as unknown as { hideSections: string }).hideSections = hideSections;
+			}
+		}, [hideSections, loaded]);
+
 		if (error) {
 			return React.createElement(
 				'div',

packages/ui-react/src/components/bhav-chalit-table.tsx

@@ -30,11 +30,13 @@ export interface RoxyBhavChalitTableProps extends ElementAttrs {
 	attribution?: string;
 	/** Render the chart and the data and omit the written interpretation. Off by default. Use it when the page supplies its own words: the wheels, tables, grids, legends and numbers stay, and the interpretive prose is left out of the markup entirely. */
 	hideReadings?: boolean;
+	/** Comma-separated list of `part` names to take off this component, for example "patterns" or "patterns, legend". Per element rather than per site, so the same component can drop a block on one page and keep it on another with no CSS. Sibling of hideReadings and a different tool: this hides a whole block whatever it contains, where hideReadings drops interpretive prose out of the markup. Names come from the `parts` array in components-catalog.json; a name the component does not carry hides nothing and is not an error. */
+	hideSections?: string;
 
 }
 
 export const RoxyBhavChalitTable = React.forwardRef<HTMLElement | null, RoxyBhavChalitTableProps>(
-	function RoxyBhavChalitTable({ data, className, style, endpoint, method, publishableKey, baseUrl, specUrl, lang, submitLabel, attribution, hideReadings, ...rest }, ref) {
+	function RoxyBhavChalitTable({ data, className, style, endpoint, method, publishableKey, baseUrl, specUrl, lang, submitLabel, attribution, hideReadings, hideSections, ...rest }, ref) {
 		const internal = React.useRef<HTMLElement | null>(null);
 		React.useImperativeHandle<HTMLElement | null, HTMLElement | null>(
 			ref,
@@ -129,6 +131,13 @@ export const RoxyBhavChalitTable = React.forwardRef<HTMLElement | null, RoxyBhav
 			}
 		}, [hideReadings, loaded]);
 
+		React.useEffect(() => {
+			const el = internal.current;
+			if (el && hideSections !== undefined) {
+				(el as unknown as { hideSections: string }).hideSections = hideSections;
+			}
+		}, [hideSections, loaded]);
+
 		if (error) {
 			return React.createElement(
 				'div',

packages/ui-react/src/components/bhava-bala-table.tsx

@@ -30,11 +30,13 @@ export interface RoxyBhavaBalaTableProps extends ElementAttrs {
 	attribution?: string;
 	/** Render the chart and the data and omit the written interpretation. Off by default. Use it when the page supplies its own words: the wheels, tables, grids, legends and numbers stay, and the interpretive prose is left out of the markup entirely. */
 	hideReadings?: boolean;
+	/** Comma-separated list of `part` names to take off this component, for example "patterns" or "patterns, legend". Per element rather than per site, so the same component can drop a block on one page and keep it on another with no CSS. Sibling of hideReadings and a different tool: this hides a whole block whatever it contains, where hideReadings drops interpretive prose out of the markup. Names come from the `parts` array in components-catalog.json; a name the component does not carry hides nothing and is not an error. */
+	hideSections?: string;
 
 }
 
 export const RoxyBhavaBalaTable = React.forwardRef<HTMLElement | null, RoxyBhavaBalaTableProps>(
-	function RoxyBhavaBalaTable({ data, className, style, endpoint, method, publishableKey, baseUrl, specUrl, lang, submitLabel, attribution, hideReadings, ...rest }, ref) {
+	function RoxyBhavaBalaTable({ data, className, style, endpoint, method, publishableKey, baseUrl, specUrl, lang, submitLabel, attribution, hideReadings, hideSections, ...rest }, ref) {
 		const internal = React.useRef<HTMLElement | null>(null);
 		React.useImperativeHandle<HTMLElement | null, HTMLElement | null>(
 			ref,
@@ -129,6 +131,13 @@ export const RoxyBhavaBalaTable = React.forwardRef<HTMLElement | null, RoxyBhava
 			}
 		}, [hideReadings, loaded]);
 
+		React.useEffect(() => {
+			const el = internal.current;
+			if (el && hideSections !== undefined) {
+				(el as unknown as { hideSections: string }).hideSections = hideSections;
+			}
+		}, [hideSections, loaded]);
+
 		if (error) {
 			return React.createElement(
 				'div',