@roxyapi/ui 0.9.0 → 0.11.0

package/src/components/endpoint-form.ts

@@ -22,7 +22,12 @@ interface OpenApiSchema extends OpenApiSchemaRef {
 }
 
 interface FieldDef {
+	/** Unique storage + input key: the property name, or "group.name" for a nested object field. */
+	key: string;
+	/** Schema property name (the label source), e.g. "date". */
 	name: string;
+	/** Parent object key for a nested schema (person1/person2); undefined for a flat field. */
+	group?: string;
 	type: string;
 	required: boolean;
 	description?: string;
@@ -66,9 +71,10 @@ async function loadSpec(url: string): Promise<OpenApiDoc> {
  * `roxy-submit` CustomEvent with the validated payload on submit. The caller
  * decides what to do (call the SDK, render a chart, navigate).
  *
- * Build-time hints (x-roxy-ui formGroups) are read by scripts/build.ts and
- * baked into a static map. At runtime the component falls back to runtime
- * fetch of /api/v2/openapi.json when no map is provided.
+ * At runtime the component fetches the OpenAPI spec (its `spec-url`, default
+ * /api/v2/openapi.json) and builds the fields from the operation's request
+ * schema: types, enums, required flags, and property order all come from the
+ * spec, so a new endpoint gets a working form with no per-endpoint code.
  */
 @customElement('roxy-endpoint-form')
 export class RoxyEndpointForm extends LitElement {
@@ -95,6 +101,20 @@ export class RoxyEndpointForm extends LitElement {
 				align-items: start;
 				gap: var(--roxy-space-md, 1rem);
 			}
+			.person-group {
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				padding: var(--roxy-space-md, 1rem);
+				margin: 0 0 var(--roxy-space-md, 1rem);
+				display: grid;
+				gap: var(--roxy-space-md, 1rem);
+				min-inline-size: 0;
+			}
+			.person-group legend {
+				padding: 0 var(--roxy-space-xs, 0.25rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				text-transform: capitalize;
+			}
 			.field {
 				display: flex;
 				flex-direction: column;
@@ -191,15 +211,16 @@ export class RoxyEndpointForm extends LitElement {
 	@property({ type: String, attribute: 'submit-label' })
 	submitLabel = 'Submit';
 
+	/** Prefill values, keyed by field name. Used by `remember` mode to restore the last submission. JS property only. */
+	@property({ attribute: false })
+	initialValues?: Record<string, unknown>;
+
 	@state()
 	private fields: FieldDef[] = [];
 
 	@state()
 	private values: Record<string, unknown> = {};
 
-	@state()
-	private hasLocation = false;
-
 	@state()
 	private loaded = false;
 
@@ -251,16 +272,40 @@ export class RoxyEndpointForm extends LitElement {
 				const required = new Set(bodySchema.required ?? []);
 				for (const [name, sub] of Object.entries(bodySchema.properties)) {
 					const resolved = this.resolve(sub, schemas) ?? {};
-					fields.push({
-						name,
-						type: this.fieldType(resolved),
-						required: required.has(name),
-						description: resolved.description,
-						enum: resolved.enum,
-						min: resolved.minimum,
-						max: resolved.maximum,
-						default: resolved.default,
-					});
+					// Nested object (e.g. person1/person2 on synastry / guna-milan):
+					// expand into a labelled group of sub-fields keyed "group.sub".
+					if (resolved.type === 'object' && resolved.properties) {
+						const subRequired = new Set(resolved.required ?? []);
+						for (const [subName, subSchema] of Object.entries(
+							resolved.properties,
+						)) {
+							const r = this.resolve(subSchema, schemas) ?? {};
+							fields.push({
+								key: `${name}.${subName}`,
+								name: subName,
+								group: name,
+								type: this.fieldType(r),
+								required: required.has(name) && subRequired.has(subName),
+								description: r.description,
+								enum: r.enum,
+								min: r.minimum,
+								max: r.maximum,
+								default: r.default,
+							});
+						}
+					} else {
+						fields.push({
+							key: name,
+							name,
+							type: this.fieldType(resolved),
+							required: required.has(name),
+							description: resolved.description,
+							enum: resolved.enum,
+							min: resolved.minimum,
+							max: resolved.maximum,
+							default: resolved.default,
+						});
+					}
 				}
 			}
 
@@ -268,6 +313,7 @@ export class RoxyEndpointForm extends LitElement {
 				if (param.in === 'path' || param.in === 'query') {
 					const resolved = this.resolve(param.schema, schemas) ?? {};
 					fields.push({
+						key: param.name,
 						name: param.name,
 						type: this.fieldType(resolved),
 						required: !!param.required,
@@ -279,15 +325,22 @@ export class RoxyEndpointForm extends LitElement {
 			}
 
 			this.fields = fields;
-			this.hasLocation =
-				fields.some((f) => f.name === 'latitude') &&
-				fields.some((f) => f.name === 'longitude') &&
-				fields.some((f) => f.name === 'timezone');
 
-			// Pre-fill defaults
+			// Pre-fill: schema defaults first, then any remembered/initial values
+			// (only for fields this endpoint has) so a stale stored payload from
+			// another endpoint cannot inject unknown keys. Remembered values are the
+			// previously-submitted shape (nested per group), so read them by group.
 			const init: Record<string, unknown> = {};
 			for (const f of fields) {
-				if (f.default !== undefined) init[f.name] = f.default;
+				if (f.default !== undefined) init[f.key] = f.default;
+				const remembered = f.group
+					? (
+							this.initialValues?.[f.group] as
+								| Record<string, unknown>
+								| undefined
+						)?.[f.name]
+					: this.initialValues?.[f.name];
+				if (remembered !== undefined) init[f.key] = remembered;
 			}
 			this.values = init;
 			this.loaded = true;
@@ -336,43 +389,67 @@ export class RoxyEndpointForm extends LitElement {
 		this.values = { ...this.values, [name]: value };
 	}
 
-	private onLocation = (e: Event) => {
-		const detail = (e as CustomEvent).detail as {
-			latitude?: number;
-			longitude?: number;
-			timezone?: string;
-			utcOffset?: number;
-		};
-		if (detail) {
+	/** True when the fields in `group` (or the flat top level) carry latitude+longitude+timezone, so a location-search can autofill them. */
+	private groupHasLocation(group?: string): boolean {
+		const inGroup = this.fields.filter((f) => f.group === group);
+		return (['latitude', 'longitude', 'timezone'] as const).every((n) =>
+			inGroup.some((f) => f.name === n),
+		);
+	}
+
+	/** Location-select handler bound to a group: fills that group's lat/lng/timezone keys (flat top level when group is undefined). */
+	private onLocationFor(group?: string) {
+		const prefix = group ? `${group}.` : '';
+		return (e: Event) => {
+			const detail = (e as CustomEvent).detail as {
+				latitude?: number;
+				longitude?: number;
+				timezone?: string;
+				utcOffset?: number;
+			};
+			if (!detail) return;
 			this.values = {
 				...this.values,
-				latitude: detail.latitude,
-				longitude: detail.longitude,
-				timezone: detail.timezone ?? detail.utcOffset,
+				[`${prefix}latitude`]: detail.latitude,
+				[`${prefix}longitude`]: detail.longitude,
+				[`${prefix}timezone`]: detail.timezone ?? detail.utcOffset,
 			};
-		}
-	};
+		};
+	}
 
 	private onSubmit = (e: Event) => {
 		e.preventDefault();
 		const missing = this.fields
 			.filter((f) => f.required)
 			.filter(
-				(f) => this.values[f.name] === undefined || this.values[f.name] === '',
+				(f) => this.values[f.key] === undefined || this.values[f.key] === '',
 			);
 		if (missing.length > 0) {
 			this.dispatchEvent(
 				new CustomEvent('roxy-validation-error', {
-					detail: { missing: missing.map((m) => m.name) },
+					detail: { missing: missing.map((m) => m.key) },
 					bubbles: true,
 					composed: true,
 				}),
 			);
 			return;
 		}
+		// Reconstruct the request shape: grouped fields nest as { group: { name: value } }.
+		const out: Record<string, unknown> = {};
+		for (const f of this.fields) {
+			const v = this.values[f.key];
+			if (v === undefined || v === '') continue;
+			if (f.group) {
+				const g = (out[f.group] as Record<string, unknown> | undefined) ?? {};
+				g[f.name] = v;
+				out[f.group] = g;
+			} else {
+				out[f.name] = v;
+			}
+		}
 		this.dispatchEvent(
 			new CustomEvent('roxy-submit', {
-				detail: { endpoint: this.endpoint, values: this.values },
+				detail: { endpoint: this.endpoint, values: out },
 				bubbles: true,
 				composed: true,
 			}),
@@ -393,14 +470,14 @@ export class RoxyEndpointForm extends LitElement {
 
 		const renderField = (f: FieldDef) => {
 			if (
-				this.hasLocation &&
+				this.groupHasLocation(f.group) &&
 				(f.name === 'latitude' ||
 					f.name === 'longitude' ||
 					f.name === 'timezone')
 			) {
 				return nothing;
 			}
-			const inputId = `roxy-form-${f.name}`;
+			const inputId = `roxy-form-${f.key}`;
 			return html`<div class="field">
 				<label for=${inputId}>
 					${humanize(f.name)}${f.required ? html`<span class="req" aria-hidden="true">*</span>` : nothing}
@@ -410,13 +487,13 @@ export class RoxyEndpointForm extends LitElement {
 						? html`<select
 							id=${inputId}
 							?required=${f.required}
-							@change=${(e: Event) => this.setValue(f.name, (e.target as HTMLSelectElement).value)}
+							@change=${(e: Event) => this.setValue(f.key, (e.target as HTMLSelectElement).value)}
 						>
 							<option value="">Choose</option>
 							${f.enum.map(
 								(
 									opt,
-								) => html`<option value=${opt} ?selected=${this.values[f.name] === opt}>
+								) => html`<option value=${opt} ?selected=${this.values[f.key] === opt}>
 									${opt}
 								</option>`,
 							)}
@@ -428,10 +505,10 @@ export class RoxyEndpointForm extends LitElement {
 							min=${f.min ?? ''}
 							max=${f.max ?? ''}
 							step=${f.type === 'number' ? 'any' : ''}
-							.value=${(this.values[f.name] ?? '') as string}
+							.value=${(this.values[f.key] ?? '') as string}
 							@input=${(e: Event) =>
 								this.setValue(
-									f.name,
+									f.key,
 									this.coerce(f.type, (e.target as HTMLInputElement).value),
 								)}
 						/>`
@@ -440,25 +517,42 @@ export class RoxyEndpointForm extends LitElement {
 			</div>`;
 		};
 
-		return html`<form @submit=${this.onSubmit}>
-			<h2 class="title">${humanize(this.endpoint.split('/').pop() ?? '')}</h2>
-			${
-				this.hasLocation
-					? html`<div class="location-block">
-						<label>Birth location</label>
+		// Ordered list of field groups: the flat top level (undefined) plus each
+		// nested object (person1/person2). Order follows first appearance.
+		const groups: (string | undefined)[] = [];
+		for (const f of this.fields) {
+			if (!groups.includes(f.group)) groups.push(f.group);
+		}
+
+		const locationBlock = (group?: string) =>
+			this.groupHasLocation(group)
+				? html`<div class="location-block">
+						<label>${group ? `${humanize(group)} location` : 'Birth location'}</label>
 						<roxy-location-search
-							@roxy-location-select=${this.onLocation}
+							@roxy-location-select=${this.onLocationFor(group)}
 							placeholder="City of birth"
 						></roxy-location-search>
 						<small class="help">
 							Required: latitude, longitude, timezone. Pick a city to autofill.
 						</small>
 					</div>`
-					: nothing
-			}
+				: nothing;
+
+		const groupBody = (group?: string) => html`${locationBlock(group)}
 			<div class="fields">
-				${this.fields.map((f) => renderField(f))}
-			</div>
+				${this.fields.filter((f) => f.group === group).map((f) => renderField(f))}
+			</div>`;
+
+		return html`<form @submit=${this.onSubmit}>
+			<h2 class="title">${humanize(this.endpoint.split('/').pop() ?? '')}</h2>
+			${groups.map((g) =>
+				g === undefined
+					? groupBody(undefined)
+					: html`<fieldset class="person-group">
+							<legend>${humanize(g)}</legend>
+							${groupBody(g)}
+						</fieldset>`,
+			)}
 			<button class="submit" type="submit">${this.submitLabel}</button>
 		</form>`;
 	}

package/src/components/forecast-digest.ts

@@ -0,0 +1,213 @@
+import { css, html, nothing } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import type { GenerateDigestResponse } from '../types/index.js';
+import { RoxyDataElement } from '../utils/base-element.js';
+import { baseStyles } from '../utils/base-styles.js';
+import { formatDate, formatNumber } from '../utils/format.js';
+import { humanize } from '../utils/string.js';
+
+type DigestWindow = NonNullable<GenerateDigestResponse['windows']>[number];
+type DigestEvent = NonNullable<DigestWindow['top']>[number];
+
+/**
+ * Forecast digest: the rolled-up reading across the next 24 hours, 7, 30, and 90 days. Renders /forecast/digest. Each window shows how many events fall in it, a per-domain breakdown (western, vedic, biorhythm), and the few highest-significance events with a significance bar coloured by domain. Use it as the at-a-glance period summary that pairs with the day-by-day roxy-forecast-timeline.
+ */
+@customElement('roxy-forecast-digest')
+export class RoxyForecastDigest extends RoxyDataElement<GenerateDigestResponse> {
+	static styles = [
+		baseStyles,
+		css`
+			.wrap {
+				background: var(--roxy-surface, #fff);
+				color: var(--roxy-fg, #0a0a0a);
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				padding: var(--roxy-space-lg, 1.5rem);
+				box-shadow: var(--roxy-shadow-sm);
+				display: grid;
+				gap: var(--roxy-space-md, 1rem);
+			}
+			.head {
+				display: flex;
+				justify-content: space-between;
+				align-items: baseline;
+				gap: var(--roxy-space-md, 1rem);
+				flex-wrap: wrap;
+			}
+			.title {
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				margin: 0;
+			}
+			.subtitle {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				margin: 0;
+			}
+			.window {
+				display: grid;
+				gap: var(--roxy-space-sm, 0.5rem);
+				padding-top: var(--roxy-space-md, 1rem);
+				border-top: 1px solid var(--roxy-border, #e4e4e7);
+			}
+			.window:first-of-type {
+				border-top: none;
+				padding-top: 0;
+			}
+			.window-head {
+				display: flex;
+				align-items: baseline;
+				gap: 0.5rem;
+				flex-wrap: wrap;
+			}
+			.window-label {
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.window-count {
+				margin-left: auto;
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				font-variant-numeric: tabular-nums;
+			}
+			.domains {
+				display: flex;
+				flex-wrap: wrap;
+				gap: 0.4rem;
+			}
+			.domain-chip {
+				display: inline-flex;
+				align-items: center;
+				gap: 0.35rem;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+			}
+			.swatch {
+				width: 0.65rem;
+				height: 0.65rem;
+				border-radius: 2px;
+				display: inline-block;
+			}
+			.sw-western {
+				background: var(--roxy-accent, #f59e0b);
+			}
+			.sw-vedic {
+				background: var(--roxy-info, #2563eb);
+			}
+			.sw-biorhythm {
+				background: var(--roxy-success, #16a34a);
+			}
+			.event {
+				display: grid;
+				grid-template-columns: auto 1fr;
+				gap: 0.25rem 0.6rem;
+				align-items: baseline;
+			}
+			.event-date {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				font-variant-numeric: tabular-nums;
+				white-space: nowrap;
+			}
+			.event-desc {
+				font-size: var(--roxy-text-sm, 0.875rem);
+				line-height: 1.4;
+			}
+			.sig {
+				grid-column: 2;
+				height: 4px;
+				border-radius: 2px;
+				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent);
+				overflow: hidden;
+			}
+			.sig-fill {
+				display: block;
+				height: 100%;
+				border-radius: 2px;
+			}
+			.sig-fill.western {
+				background: var(--roxy-accent, #f59e0b);
+			}
+			.sig-fill.vedic {
+				background: var(--roxy-info, #2563eb);
+			}
+			.sig-fill.biorhythm {
+				background: var(--roxy-success, #16a34a);
+			}
+			.quiet {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				font-style: italic;
+			}
+		`,
+	];
+
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No digest data</div>`;
+	}
+
+	protected renderData(d: GenerateDigestResponse) {
+		const windows = d.windows ?? [];
+		if (windows.length === 0) return this.renderEmpty();
+		const range = [formatDate(d.startDate), formatDate(d.endDate)]
+			.filter(Boolean)
+			.join(' – ');
+
+		return html`<div class="wrap" aria-label="Forecast digest">
+			<div class="head">
+				<h2 class="title">Forecast Digest</h2>
+				${range ? html`<p class="subtitle">${range}</p>` : nothing}
+			</div>
+			${windows.map((w) => this.renderWindow(w))}
+		</div>`;
+	}
+
+	private windowLabel(days: number | undefined): string {
+		if (days === 1) return 'Next 24 hours';
+		return typeof days === 'number' ? `Next ${days} days` : 'Window';
+	}
+
+	private renderWindow(w: DigestWindow) {
+		const top = w.top ?? [];
+		const byDomain = w.byDomain ?? {};
+		const domains = Object.entries(byDomain) as Array<[string, number]>;
+		return html`<section class="window">
+			<div class="window-head">
+				<span class="window-label">${this.windowLabel(w.days)}</span>
+				<span class="window-count">${w.count ?? 0} event${w.count === 1 ? '' : 's'}</span>
+			</div>
+			${
+				domains.length > 0
+					? html`<div class="domains">
+						${domains.map(
+							([dom, n]) => html`<span class="domain-chip">
+								<span class="swatch sw-${dom}"></span>${humanize(dom)} ${n}
+							</span>`,
+						)}
+					</div>`
+					: nothing
+			}
+			${
+				top.length > 0
+					? html`<div role="list">${top.map((e) => this.renderEvent(e))}</div>`
+					: html`<p class="quiet">No notable events.</p>`
+			}
+		</section>`;
+	}
+
+	private renderEvent(e: DigestEvent) {
+		const sig = typeof e.significance === 'number' ? e.significance : 0;
+		return html`<div class="event" role="listitem">
+			<span class="event-date">${formatDate(e.date)}</span>
+			<span class="event-desc">${e.description ?? humanize(e.type ?? '')}</span>
+			<span class="sig" role="img" aria-label="significance ${formatNumber(sig, 0)} of 100">
+				<span class="sig-fill ${e.domain}" style="width:${Math.max(0, Math.min(100, sig))}%"></span>
+			</span>
+		</div>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-forecast-digest': RoxyForecastDigest;
+	}
+}

package/src/components/forecast-timeline.ts

@@ -1,12 +1,22 @@
-import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { css, html, nothing } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import { ASPECT_SYMBOL } from '../tokens/index.js';
-import type { GenerateTimelineResponse } from '../types/index.js';
+import type {
+	FindSignificantDatesResponse,
+	ForecastTransitsResponse,
+	GenerateTimelineResponse,
+} from '../types/index.js';
+import { RoxyDataElement } from '../utils/base-element.js';
 import { baseStyles } from '../utils/base-styles.js';
 import { ASPECT_CLASS, formatDate, formatNumber } from '../utils/format.js';
-import { MarkupDataController } from '../utils/markup-data.js';
 import { capitalize, humanize } from '../utils/string.js';
 
+/** Timeline, significant-dates, and forecast-transits all return the same `{ events, startDate, endDate, birthData, count }` shape. */
+type ForecastTimelineData =
+	| GenerateTimelineResponse
+	| FindSignificantDatesResponse
+	| ForecastTransitsResponse;
+
 type ForecastEvent = GenerateTimelineResponse['events'][number];
 type ForecastDomain = ForecastEvent['domain'];
 
@@ -38,11 +48,17 @@ const DOMAIN_ORDER: readonly ForecastDomain[] = [
  * Theming flows through `--roxy-*` custom properties on `:host`.
  */
 @customElement('roxy-forecast-timeline')
-export class RoxyForecastTimeline extends LitElement {
+export class RoxyForecastTimeline extends RoxyDataElement<ForecastTimelineData> {
 	static styles = [
 		baseStyles,
 		css`
 			.wrap {
+				background: var(--roxy-surface, #fff);
+				color: var(--roxy-fg, #0a0a0a);
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				padding: var(--roxy-space-lg, 1.5rem);
+				box-shadow: var(--roxy-shadow-sm);
 				display: grid;
 				gap: var(--roxy-space-md, 1rem);
 			}
@@ -195,22 +211,11 @@ export class RoxyForecastTimeline 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);
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No forecast data</div>`;
 	}
 
-	@property({ attribute: false })
-	data: GenerateTimelineResponse | null = null;
-
-	render() {
-		const d = this.data;
-		if (!d)
-			return html`<div class="roxy-empty" role="status">No forecast data</div>`;
-
+	protected renderData(d: ForecastTimelineData) {
 		const events = d.events ?? [];
 		const grouped = this.groupByDate(events);
 		const present = DOMAIN_ORDER.filter((dom) =>

package/src/components/guna-milan.ts

@@ -1,9 +1,9 @@
-import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { css, html, nothing } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import type { CompatibilityResponse } from '../types/index.js';
+import { RoxyDataElement } from '../utils/base-element.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',
@@ -20,12 +20,12 @@ const STANDARD_CATEGORIES = [
  * 36-point Ashtakoota score card. Renders /vedic-astrology/compatibility.
  */
 @customElement('roxy-guna-milan')
-export class RoxyGunaMilan extends LitElement {
+export class RoxyGunaMilan extends RoxyDataElement<CompatibilityResponse> {
 	static styles = [
 		baseStyles,
 		css`
 			.card {
-				background: var(--roxy-bg, #fff);
+				background: var(--roxy-surface, #fff);
 				border: 1px solid var(--roxy-border, #e4e4e7);
 				border-radius: var(--roxy-radius-md, 8px);
 				padding: var(--roxy-space-lg, 1.5rem);
@@ -147,22 +147,11 @@ 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);
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No Guna Milan data</div>`;
 	}
 
-	@property({ attribute: false })
-	data: CompatibilityResponse | null = null;
-
-	render() {
-		const d = this.data;
-		if (!d)
-			return html`<div class="roxy-empty" role="status">No Guna Milan data</div>`;
-
+	protected renderData(d: CompatibilityResponse) {
 		const breakdown = (d.breakdown ?? []).filter(
 			(b) => b?.category !== undefined,
 		);