@roxyapi/ui 0.4.1 → 0.6.0

package/dist/utils/disclosure.d.ts

@@ -0,0 +1,16 @@
+import type { TemplateResult } from 'lit';
+/**
+ * Disclosure chevron for `<details>`/`<summary>` accordions. Replaces the
+ * browser default triangle with a thin chevron that rotates when the host
+ * `<details>` opens. Render it inside the `<summary>` and pair with
+ * {@link disclosureStyles}.
+ */
+export declare function chevron(): TemplateResult;
+/**
+ * Shared `<details>` accordion styling: hides the native disclosure triangle
+ * and rotates the {@link chevron} 180 degrees when the accordion is open.
+ * Import into any component that renders disclosure accordions so the chevron
+ * looks and behaves identically.
+ */
+export declare const disclosureStyles: import("lit").CSSResult;
+//# sourceMappingURL=disclosure.d.ts.map

package/dist/utils/disclosure.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"disclosure.d.ts","sourceRoot":"","sources":["../../src/utils/disclosure.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C;;;;;GAKG;AACH,wBAAgB,OAAO,IAAI,cAAc,CAiBxC;AAED;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,yBA2B5B,CAAC"}

package/dist/utils/kundli-render.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"kundli-render.d.ts","sourceRoot":"","sources":["../../src/utils/kundli-render.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AA+B1C;;;;;GAKG;AACH,MAAM,WAAW,WAAW;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;GAQG;AACH,MAAM,WAAW,eAAe;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;AAsGpD;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAChC,IAAI,EAAE,MAAM,CACX,MAAM,EACN;IACC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,CACD,EACD,aAAa,CAAC,EAAE,MAAM,GACpB,eAAe,CAoBjB;AAmdD;;;;GAIG;AACH,wBAAgB,eAAe,CAC9B,EAAE,EAAE,eAAe,EACnB,KAAK,EAAE,UAAU,GACf,cAAc,CAShB;AAED;;;;;;;;GAQG;AACH,wBAAgB,wBAAwB,CACvC,MAAM,EAAE,UAAU,EAClB,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,GAClC,cAAc,CAkChB"}
+{"version":3,"file":"kundli-render.d.ts","sourceRoot":"","sources":["../../src/utils/kundli-render.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAgC1C;;;;;GAKG;AACH,MAAM,WAAW,WAAW;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;GAQG;AACH,MAAM,WAAW,eAAe;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;AAsGpD;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAChC,IAAI,EAAE,MAAM,CACX,MAAM,EACN;IACC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,CACD,EACD,aAAa,CAAC,EAAE,MAAM,GACpB,eAAe,CAoBjB;AA8dD;;;;GAIG;AACH,wBAAgB,eAAe,CAC9B,EAAE,EAAE,eAAe,EACnB,KAAK,EAAE,UAAU,GACf,cAAc,CAShB;AAED;;;;;;;;GAQG;AACH,wBAAgB,wBAAwB,CACvC,MAAM,EAAE,UAAU,EAClB,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,GAClC,cAAc,CAQhB"}

package/dist/utils/kundli-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"kundli-styles.d.ts","sourceRoot":"","sources":["../../src/utils/kundli-styles.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,yBA8GxB,CAAC"}
+{"version":3,"file":"kundli-styles.d.ts","sourceRoot":"","sources":["../../src/utils/kundli-styles.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,yBA+ExB,CAAC"}

package/dist/utils/markup-data.d.ts

@@ -0,0 +1,57 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+/**
+ * Host shape the controller drives: any reactive element that exposes a public `data` slot. The controller only writes `data` when the host left it unset, so the JavaScript property path always wins.
+ */
+interface DataHost extends ReactiveControllerHost, HTMLElement {
+    data?: unknown;
+}
+/**
+ * Reactive controller that lets a component hydrate its `data` from embedded markup when no `data` property was assigned in JavaScript.
+ *
+ * @remarks
+ * The server-side and cached-render model: a backend renders the RoxyAPI response into a direct-child `<script type="application/json" class="roxy-data">` element, ships static HTML, and never runs per-element JavaScript to assign a property. On connect this controller reads that script, parses it, and feeds the result to the host. The JavaScript property path is untouched and authoritative: if `host.data` already holds a value when the host connects, the controller does nothing and the markup is ignored.
+ *
+ * Source resolution order on connect, first hit wins:
+ *
+ * 1. `host.data` already set in JavaScript -> leave it, read nothing.
+ * 2. A direct-child `<script type="application/json" class="roxy-data">` -> parse and use. Direct-child only, so a nested component's own script is never read by an ancestor.
+ *
+ * Fetching from a URL is intentionally unsupported: that would require a browser-visible key and breaks the server-rendered, cached model these consumers rely on.
+ *
+ * Timing: {@link hostConnected} runs inside the host `connectedCallback`. For an element parsed from server HTML, its direct children are present by the time the custom element upgrades and connects, so the script is readable here. For an element created with `document.createElement` and connected before any child is appended, there is nothing to read and the property path is the only source, which is exactly the existing behavior.
+ *
+ * Failure is safe: malformed JSON or a missing script leaves `host.data` untouched, so the host renders its normal empty state.
+ *
+ * Reading the script never mutates it, and only the marked script is touched, so any sibling fallback markup a server nested inside the element (for no-JavaScript, AMP, or crawler rendering) is left in place.
+ *
+ * @example
+ * ```ts
+ * import { MarkupDataController } from '../utils/markup-data.js';
+ *
+ * export class RoxyExample extends LitElement {
+ *   constructor() {
+ *     super();
+ *     new MarkupDataController(this);
+ *   }
+ *
+ *   @property({ attribute: false })
+ *   data: ExampleResponse | null = null;
+ * }
+ * ```
+ */
+export declare class MarkupDataController<T = unknown> implements ReactiveController {
+    private readonly host;
+    constructor(host: DataHost);
+    hostConnected(): void;
+    /**
+     * Resolve the embedded payload. Returns `undefined` when there is nothing valid to read so the caller can leave `host.data` untouched.
+     */
+    private read;
+    /**
+     * Direct-child `<script type="application/json" class="roxy-data">`. Scoped to immediate children so a nested data-driven component never has its script read by an ancestor, and so sibling fallback markup is ignored.
+     */
+    private findInlineScript;
+    private parse;
+}
+export {};
+//# sourceMappingURL=markup-data.d.ts.map

package/dist/utils/markup-data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"markup-data.d.ts","sourceRoot":"","sources":["../../src/utils/markup-data.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAuBtE;;GAEG;AACH,UAAU,QAAS,SAAQ,sBAAsB,EAAE,WAAW;IAC7D,IAAI,CAAC,EAAE,OAAO,CAAC;CACf;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,qBAAa,oBAAoB,CAAC,CAAC,GAAG,OAAO,CAAE,YAAW,kBAAkB;IAC3E,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAW;gBAEpB,IAAI,EAAE,QAAQ;IAK1B,aAAa;IAYb;;OAEG;IACH,OAAO,CAAC,IAAI;IAKZ;;OAEG;IACH,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,KAAK;CAUb"}

package/dist/utils/tablist.d.ts

@@ -0,0 +1,44 @@
+import type { TemplateResult } from 'lit';
+/** A single tab in a {@link renderTablist} strip. */
+export interface TablistItem<T extends string = string> {
+    id: T;
+    label: string;
+}
+/**
+ * Shared styling for every horizontal tab strip in the library (natal chart
+ * views, transits, kundli styles). Keeping one rule set means the tabs look
+ * identical everywhere and theme through the same --roxy-* tokens.
+ */
+export declare const tablistStyles: import("lit").CSSResult;
+/**
+ * Render a WAI-ARIA tablist. The host component owns the active-tab state; this
+ * helper draws the buttons, wires click plus Left/Right arrow navigation with a
+ * roving tabindex, and moves focus to the newly selected tab. Pair with
+ * {@link tablistStyles}.
+ *
+ * Pass `controls: true` when each tab governs a sibling
+ * `<div role="tabpanel" id="${idPrefix}-panel-${id}">` so the buttons advertise
+ * `aria-controls`. Omit it for tablists that swap a single rendered view in
+ * place with no separate panel element (the kundli style switch).
+ *
+ * @example
+ * ```ts
+ * renderTablist({
+ *   items: [{ id: 'wheel', label: 'Wheel' }, { id: 'grid', label: 'Aspect grid' }],
+ *   active: this.view,
+ *   onSelect: (v) => { this.view = v; },
+ *   label: 'Natal chart views',
+ *   idPrefix: 'natal',
+ *   controls: true,
+ * })
+ * ```
+ */
+export declare function renderTablist<T extends string>(opts: {
+    items: ReadonlyArray<TablistItem<T>>;
+    active: T;
+    onSelect: (id: T) => void;
+    label: string;
+    idPrefix: string;
+    controls?: boolean;
+}): TemplateResult;
+//# sourceMappingURL=tablist.d.ts.map

package/dist/utils/tablist.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tablist.d.ts","sourceRoot":"","sources":["../../src/utils/tablist.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C,qDAAqD;AACrD,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACrD,EAAE,EAAE,CAAC,CAAC;IACN,KAAK,EAAE,MAAM,CAAC;CACd;AAED;;;;GAIG;AACH,eAAO,MAAM,aAAa,yBAgCzB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,EAAE,IAAI,EAAE;IACrD,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IACrC,MAAM,EAAE,CAAC,CAAC;IACV,QAAQ,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,IAAI,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,cAAc,CA6CjB"}

package/dist/version.d.ts

@@ -1,2 +1,2 @@
-export declare const ROXY_UI_VERSION = "0.4.1";
+export declare const ROXY_UI_VERSION = "0.6.0";
 //# sourceMappingURL=version.d.ts.map

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@roxyapi/ui",
-  "version": "0.4.1",
+  "version": "0.6.0",
   "description": "Web components for the RoxyAPI catalog. Drop-in charts, tables, cards, forms for astrology, tarot, numerology, biorhythm, I Ching, crystals, dreams, angel numbers, and more. One key, beautiful in 30 minutes.",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "jsdelivr": "./dist/cdn/roxy-ui.js",
+  "unpkg": "./dist/cdn/roxy-ui.js",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/components/ashtakavarga-grid.ts

@@ -3,6 +3,7 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { SIGN_GLYPH } from '../tokens/index.js';
 import type { AshtakavargaResponse } from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
+import { MarkupDataController } from '../utils/markup-data.js';
 
 type Tab = 'sarva' | 'bhinna' | 'pinda';
 
@@ -194,6 +195,14 @@ export class RoxyAshtakavargaGrid extends LitElement {
 		`,
 	];
 
+	constructor() {
+		super();
+		// Enables hydrating `data` from a direct-child
+		// <script type="application/json" class="roxy-data"> for server-rendered
+		// and cached consumers. The JavaScript `data` property still wins.
+		new MarkupDataController(this);
+	}
+
 	@property({ attribute: false })
 	data: AshtakavargaResponse | null = null;
 

package/src/components/biorhythm-chart.ts

@@ -6,6 +6,7 @@ import type {
 	GetForecastResponse,
 } from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
+import { MarkupDataController } from '../utils/markup-data.js';
 
 type BiorhythmData =
 	| GetDailyBiorhythmResponse
@@ -111,6 +112,14 @@ export class RoxyBiorhythmChart extends LitElement {
 		`,
 	];
 
+	constructor() {
+		super();
+		// Enables hydrating `data` from a direct-child
+		// <script type="application/json" class="roxy-data"> for server-rendered
+		// and cached consumers. The JavaScript `data` property still wins.
+		new MarkupDataController(this);
+	}
+
 	@property({ attribute: false })
 	data: BiorhythmData | null = null;
 

package/src/components/choghadiya-grid.ts

@@ -3,6 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { PLANET_GLYPH } from '../tokens/index.js';
 import type { GetChoghadiyaResponse } from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
+import { MarkupDataController } from '../utils/markup-data.js';
 import { capitalize } from '../utils/string.js';
 
 type ChoghadiyaPeriod = GetChoghadiyaResponse['dayChoghadiya'][number];
@@ -132,6 +133,14 @@ export class RoxyChoghadiyaGrid extends LitElement {
 		`,
 	];
 
+	constructor() {
+		super();
+		// Enables hydrating `data` from a direct-child
+		// <script type="application/json" class="roxy-data"> for server-rendered
+		// and cached consumers. The JavaScript `data` property still wins.
+		new MarkupDataController(this);
+	}
+
 	@property({ attribute: false })
 	data: GetChoghadiyaResponse | null = null;
 

package/src/components/compatibility-card.ts

@@ -7,6 +7,7 @@ import type {
 } from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
 import { formatNumber } from '../utils/format.js';
+import { MarkupDataController } from '../utils/markup-data.js';
 
 type CompatibilityData =
 	| CalculateCompatibilityResponse
@@ -108,6 +109,14 @@ export class RoxyCompatibilityCard extends LitElement {
 		`,
 	];
 
+	constructor() {
+		super();
+		// Enables hydrating `data` from a direct-child
+		// <script type="application/json" class="roxy-data"> for server-rendered
+		// and cached consumers. The JavaScript `data` property still wins.
+		new MarkupDataController(this);
+	}
+
 	@property({ attribute: false })
 	data: CompatibilityData | null = null;
 

package/src/components/dasha-timeline.ts

@@ -6,7 +6,9 @@ import type {
 	GetSubDashasResponse,
 } from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
+import { chevron, disclosureStyles } from '../utils/disclosure.js';
 import { formatNumber } from '../utils/format.js';
+import { MarkupDataController } from '../utils/markup-data.js';
 
 type DashaData =
 	| GetCurrentDashaResponse
@@ -24,6 +26,7 @@ type DashaPeriod = GetMajorDashasResponse['mahadashas'][number];
 export class RoxyDashaTimeline extends LitElement {
 	static styles = [
 		baseStyles,
+		disclosureStyles,
 		css`
 			.wrap {
 				display: grid;
@@ -143,6 +146,10 @@ export class RoxyDashaTimeline extends LitElement {
 				cursor: pointer;
 				font-size: var(--roxy-text-sm, 0.875rem);
 				font-weight: var(--roxy-weight-bold, 600);
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				gap: var(--roxy-space-md, 1rem);
 			}
 			details.interp p {
 				margin: var(--roxy-space-sm, 0.5rem) 0 0;
@@ -152,6 +159,14 @@ export class RoxyDashaTimeline extends LitElement {
 		`,
 	];
 
+	constructor() {
+		super();
+		// Enables hydrating `data` from a direct-child
+		// <script type="application/json" class="roxy-data"> for server-rendered
+		// and cached consumers. The JavaScript `data` property still wins.
+		new MarkupDataController(this);
+	}
+
 	@property({ attribute: false })
 	data: DashaData | null = null;
 
@@ -224,7 +239,10 @@ export class RoxyDashaTimeline extends LitElement {
 		const active = periods.find((p) => this.isCurrent(p));
 		if (!active?.interpretation) return nothing;
 		return html`<details class="interp">
-			<summary>${active.planet} mahadasha interpretation</summary>
+			<summary>
+				<span>${active.planet} mahadasha interpretation</span>
+				${chevron()}
+			</summary>
 			<p>${active.interpretation}</p>
 		</details>`;
 	}

package/src/components/data.ts

@@ -1,6 +1,7 @@
 import { css, html, LitElement, nothing, type TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { baseStyles } from '../utils/base-styles.js';
+import { MarkupDataController } from '../utils/markup-data.js';
 import { humanize } from '../utils/string.js';
 
 /**
@@ -134,6 +135,14 @@ export class RoxyData extends LitElement {
 		`,
 	];
 
+	constructor() {
+		super();
+		// Enables hydrating `data` from a direct-child
+		// <script type="application/json" class="roxy-data"> for server-rendered
+		// and cached consumers. The JavaScript `data` property still wins.
+		new MarkupDataController(this);
+	}
+
 	@property({ attribute: false })
 	data: Json = null;
 

package/src/components/divisional-chart.ts

@@ -11,6 +11,8 @@ import {
 	toKundliViewModel,
 } from '../utils/kundli-render.js';
 import { kundliStyles } from '../utils/kundli-styles.js';
+import { MarkupDataController } from '../utils/markup-data.js';
+import { tablistStyles } from '../utils/tablist.js';
 
 /**
  * Divisional chart renderer (D2-D60). Accepts a DivisionalChartResponse and
@@ -25,6 +27,7 @@ export class RoxyDivisionalChart extends LitElement {
 	static styles = [
 		baseStyles,
 		kundliStyles,
+		tablistStyles,
 		css`
 			.division-meta {
 				font-size: var(--roxy-text-sm, 0.875rem);
@@ -65,6 +68,14 @@ export class RoxyDivisionalChart extends LitElement {
 		`,
 	];
 
+	constructor() {
+		super();
+		// Enables hydrating `data` from a direct-child
+		// <script type="application/json" class="roxy-data"> for server-rendered
+		// and cached consumers. The JavaScript `data` property still wins.
+		new MarkupDataController(this);
+	}
+
 	@property({ attribute: false })
 	data: DivisionalChartResponse | null = null;
 

package/src/components/dosha-card.ts

@@ -6,6 +6,7 @@ import type {
 	SadhesatiResponse,
 } from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
+import { MarkupDataController } from '../utils/markup-data.js';
 
 type DoshaData = ManglikResponse | KalsarpaResponse | SadhesatiResponse;
 
@@ -114,6 +115,14 @@ export class RoxyDoshaCard extends LitElement {
 		`,
 	];
 
+	constructor() {
+		super();
+		// Enables hydrating `data` from a direct-child
+		// <script type="application/json" class="roxy-data"> for server-rendered
+		// and cached consumers. The JavaScript `data` property still wins.
+		new MarkupDataController(this);
+	}
+
 	@property({ attribute: false })
 	data: DoshaData | null = null;
 

package/src/components/guna-milan.ts

@@ -3,6 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
 import type { CompatibilityResponse } from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
 import { formatNumber, formatPercent } from '../utils/format.js';
+import { MarkupDataController } from '../utils/markup-data.js';
 
 const STANDARD_CATEGORIES = [
 	'Varna',
@@ -146,6 +147,14 @@ export class RoxyGunaMilan extends LitElement {
 		`,
 	];
 
+	constructor() {
+		super();
+		// Enables hydrating `data` from a direct-child
+		// <script type="application/json" class="roxy-data"> for server-rendered
+		// and cached consumers. The JavaScript `data` property still wins.
+		new MarkupDataController(this);
+	}
+
 	@property({ attribute: false })
 	data: CompatibilityResponse | null = null;
 

package/src/components/hexagram.ts

@@ -10,6 +10,7 @@ import type {
 	LookupHexagramResponse,
 } from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
+import { MarkupDataController } from '../utils/markup-data.js';
 
 type HexagramData =
 	| GetHexagramResponse
@@ -136,6 +137,14 @@ export class RoxyHexagram extends LitElement {
 		`,
 	];
 
+	constructor() {
+		super();
+		// Enables hydrating `data` from a direct-child
+		// <script type="application/json" class="roxy-data"> for server-rendered
+		// and cached consumers. The JavaScript `data` property still wins.
+		new MarkupDataController(this);
+	}
+
 	@property({ attribute: false })
 	data: HexagramData | null = null;
 

package/src/components/horoscope-card.ts

@@ -7,6 +7,7 @@ import type {
 	GetWeeklyHoroscopeResponse,
 } from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
+import { MarkupDataController } from '../utils/markup-data.js';
 import { capitalize } from '../utils/string.js';
 
 type HoroscopeData =
@@ -147,6 +148,14 @@ export class RoxyHoroscopeCard extends LitElement {
 		`,
 	];
 
+	constructor() {
+		super();
+		// Enables hydrating `data` from a direct-child
+		// <script type="application/json" class="roxy-data"> for server-rendered
+		// and cached consumers. The JavaScript `data` property still wins.
+		new MarkupDataController(this);
+	}
+
 	@property({ attribute: false })
 	data: HoroscopeData | null = null;
 

package/src/components/kp-chart.ts

@@ -3,6 +3,7 @@ import { customElement, property, state } from 'lit/decorators.js';
 import type { KpChartResponse } from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
 import { formatNumber } from '../utils/format.js';
+import { MarkupDataController } from '../utils/markup-data.js';
 
 type Tab = 'planets' | 'cusps';
 
@@ -123,6 +124,14 @@ export class RoxyKpChart extends LitElement {
 		`,
 	];
 
+	constructor() {
+		super();
+		// Enables hydrating `data` from a direct-child
+		// <script type="application/json" class="roxy-data"> for server-rendered
+		// and cached consumers. The JavaScript `data` property still wins.
+		new MarkupDataController(this);
+	}
+
 	@property({ attribute: false })
 	data: KpChartResponse | null = null;
 

package/src/components/kp-planets-table.ts

@@ -3,6 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
 import type { KpPlanetsResponse } from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
 import { formatNumber } from '../utils/format.js';
+import { MarkupDataController } from '../utils/markup-data.js';
 
 /**
  * KP planets table with sub-lord and sub-sub-lord columns. Renders
@@ -74,6 +75,14 @@ export class RoxyKpPlanetsTable extends LitElement {
 		`,
 	];
 
+	constructor() {
+		super();
+		// Enables hydrating `data` from a direct-child
+		// <script type="application/json" class="roxy-data"> for server-rendered
+		// and cached consumers. The JavaScript `data` property still wins.
+		new MarkupDataController(this);
+	}
+
 	@property({ attribute: false })
 	data: KpPlanetsResponse | null = null;
 

package/src/components/kp-ruling-planets.ts

@@ -2,6 +2,7 @@ import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import type { KpRulingPlanetsResponse } from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
+import { MarkupDataController } from '../utils/markup-data.js';
 
 /**
  * KP ruling planets card. Renders /vedic-astrology/kp/ruling-planets: the day
@@ -113,6 +114,14 @@ export class RoxyKpRulingPlanets extends LitElement {
 		`,
 	];
 
+	constructor() {
+		super();
+		// Enables hydrating `data` from a direct-child
+		// <script type="application/json" class="roxy-data"> for server-rendered
+		// and cached consumers. The JavaScript `data` property still wins.
+		new MarkupDataController(this);
+	}
+
 	@property({ attribute: false })
 	data: KpRulingPlanetsResponse | null = null;
 

package/src/components/moon-phase.ts

@@ -8,6 +8,7 @@ import type {
 } from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
 import { formatNumber } from '../utils/format.js';
+import { MarkupDataController } from '../utils/markup-data.js';
 
 type MoonPhaseData =
 	| GetCurrentMoonPhaseResponse
@@ -109,6 +110,14 @@ export class RoxyMoonPhase extends LitElement {
 		`,
 	];
 
+	constructor() {
+		super();
+		// Enables hydrating `data` from a direct-child
+		// <script type="application/json" class="roxy-data"> for server-rendered
+		// and cached consumers. The JavaScript `data` property still wins.
+		new MarkupDataController(this);
+	}
+
 	@property({ attribute: false })
 	data: MoonPhaseData | null = null;
 

package/src/components/nakshatra-card.ts

@@ -2,6 +2,7 @@ import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import type { NakshatraResponse } from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
+import { MarkupDataController } from '../utils/markup-data.js';
 
 /**
  * Nakshatra reference card. Renders /vedic-astrology/nakshatras/{id}: the
@@ -91,6 +92,14 @@ export class RoxyNakshatraCard extends LitElement {
 		`,
 	];
 
+	constructor() {
+		super();
+		// Enables hydrating `data` from a direct-child
+		// <script type="application/json" class="roxy-data"> for server-rendered
+		// and cached consumers. The JavaScript `data` property still wins.
+		new MarkupDataController(this);
+	}
+
 	@property({ attribute: false })
 	data: NakshatraResponse | null = null;