@roxyapi/ui 0.9.0 → 0.11.0

package/src/components/horoscope-card.ts

@@ -1,4 +1,4 @@
-import { css, html, LitElement, nothing } from 'lit';
+import { css, html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { SIGN_GLYPH } from '../tokens/index.js';
 import type {
@@ -6,8 +6,8 @@ import type {
 	GetMonthlyHoroscopeResponse,
 	GetWeeklyHoroscopeResponse,
 } from '../types/index.js';
+import { RoxyDataElement } from '../utils/base-element.js';
 import { baseStyles } from '../utils/base-styles.js';
-import { MarkupDataController } from '../utils/markup-data.js';
 import { capitalize } from '../utils/string.js';
 
 type HoroscopeData =
@@ -20,12 +20,13 @@ type HoroscopeData =
  * /astrology/horoscope/{sign}/{daily|weekly|monthly}.
  */
 @customElement('roxy-horoscope-card')
-export class RoxyHoroscopeCard extends LitElement {
+export class RoxyHoroscopeCard extends RoxyDataElement<HoroscopeData> {
 	static styles = [
 		baseStyles,
 		css`
 			.card {
-				background: var(--roxy-bg, #fff);
+				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);
@@ -148,25 +149,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;
-
 	@property({ type: String, reflect: true })
 	period: 'daily' | 'weekly' | 'monthly' = 'daily';
 
-	render() {
-		const d = this.data;
-		if (!d)
-			return html`<div class="roxy-empty" role="status">No horoscope data</div>`;
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No horoscope data</div>`;
+	}
 
+	protected renderData(d: HoroscopeData) {
 		const sign = d.sign ?? '';
 		const glyph = sign ? (SIGN_GLYPH[capitalize(sign)] ?? '') : '';
 		const energy =

package/src/components/kp-chart.ts

@@ -1,9 +1,9 @@
-import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { css, html, nothing } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
 import type { KpChartResponse } from '../types/index.js';
+import { RoxyDataElement } from '../utils/base-element.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';
 
@@ -28,16 +28,17 @@ interface KpBody {
  * sub-sub lord, and KP number (1-249).
  */
 @customElement('roxy-kp-chart')
-export class RoxyKpChart extends LitElement {
+export class RoxyKpChart extends RoxyDataElement<KpChartResponse> {
 	static styles = [
 		baseStyles,
 		css`
 			.wrap {
 				border: 1px solid var(--roxy-border, #e4e4e7);
 				border-radius: var(--roxy-radius-md, 8px);
-				background: var(--roxy-bg, #fff);
+				background: var(--roxy-surface, #fff);
 				overflow: auto;
 				box-shadow: var(--roxy-shadow-sm);
+				width: 100%;
 			}
 			.head {
 				padding: var(--roxy-space-md, 1rem);
@@ -124,17 +125,6 @@ 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;
-
 	@state()
 	private activeTab: Tab = 'planets';
 
@@ -186,10 +176,11 @@ export class RoxyKpChart extends LitElement {
 		});
 	}
 
-	render() {
-		if (!this.data)
-			return html`<div class="roxy-empty" role="status">No KP chart data</div>`;
-		const d = this.data;
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No KP chart data</div>`;
+	}
+
+	protected renderData(d: KpChartResponse) {
 		const asc = d.ascendant;
 
 		return html`<div class="wrap" aria-label="KP chart" tabindex="0">

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

@@ -1,23 +1,23 @@
-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 { KpPlanetsResponse } from '../types/index.js';
+import { RoxyDataElement } from '../utils/base-element.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
  * /vedic-astrology/kp/planets.
  */
 @customElement('roxy-kp-planets-table')
-export class RoxyKpPlanetsTable extends LitElement {
+export class RoxyKpPlanetsTable extends RoxyDataElement<KpPlanetsResponse> {
 	static styles = [
 		baseStyles,
 		css`
 			.wrap {
 				border: 1px solid var(--roxy-border, #e4e4e7);
 				border-radius: var(--roxy-radius-md, 8px);
-				background: var(--roxy-bg, #fff);
+				background: var(--roxy-surface, #fff);
 				overflow: auto;
 				box-shadow: var(--roxy-shadow-sm);
 			}
@@ -75,21 +75,12 @@ 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);
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No KP data</div>`;
 	}
 
-	@property({ attribute: false })
-	data: KpPlanetsResponse | null = null;
-
-	render() {
-		if (!this.data)
-			return html`<div class="roxy-empty" role="status">No KP data</div>`;
-		const planets = this.data.planets ?? [];
+	protected renderData(d: KpPlanetsResponse) {
+		const planets = d.planets ?? [];
 
 		return html`<div
 			class="wrap"
@@ -99,8 +90,8 @@ export class RoxyKpPlanetsTable extends LitElement {
 			<header class="head">
 				<h2 class="title">KP planets</h2>
 				${
-					typeof this.data.ayanamsa === 'number'
-						? html`<span class="ayanamsa">Ayanamsa: ${formatNumber(this.data.ayanamsa, 2)}°</span>`
+					typeof d.ayanamsa === 'number'
+						? html`<span class="ayanamsa">Ayanamsa: ${formatNumber(d.ayanamsa, 2)}°</span>`
 						: nothing
 				}
 			</header>

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

@@ -1,8 +1,8 @@
-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 { KpRulingPlanetsResponse } from '../types/index.js';
+import { RoxyDataElement } from '../utils/base-element.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
@@ -12,14 +12,14 @@ import { MarkupDataController } from '../utils/markup-data.js';
  * planet. The primary horary timing tool in KP astrology.
  */
 @customElement('roxy-kp-ruling-planets')
-export class RoxyKpRulingPlanets extends LitElement {
+export class RoxyKpRulingPlanets extends RoxyDataElement<KpRulingPlanetsResponse> {
 	static styles = [
 		baseStyles,
 		css`
 			.wrap {
 				border: 1px solid var(--roxy-border, #e4e4e7);
 				border-radius: var(--roxy-radius-md, 8px);
-				background: var(--roxy-bg, #fff);
+				background: var(--roxy-surface, #fff);
 				padding: var(--roxy-space-md, 1rem);
 				display: grid;
 				gap: var(--roxy-space-md, 1rem);
@@ -114,21 +114,11 @@ 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);
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No ruling planets data</div>`;
 	}
 
-	@property({ attribute: false })
-	data: KpRulingPlanetsResponse | null = null;
-
-	render() {
-		if (!this.data)
-			return html`<div class="roxy-empty" role="status">No ruling planets data</div>`;
-		const d = this.data;
+	protected renderData(d: KpRulingPlanetsResponse) {
 		const significators = d.significators ?? [];
 
 		return html`<div class="wrap" aria-label="KP ruling planets">

package/src/components/moon-phase.ts

@@ -1,4 +1,4 @@
-import { css, html, LitElement, nothing } from 'lit';
+import { css, html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { MOON_PHASE_EMOJI } from '../tokens/index.js';
 import type {
@@ -6,9 +6,9 @@ import type {
 	GetMoonCalendarResponse,
 	GetUpcomingMoonPhasesResponse,
 } from '../types/index.js';
+import { RoxyDataElement } from '../utils/base-element.js';
 import { baseStyles } from '../utils/base-styles.js';
 import { formatNumber } from '../utils/format.js';
-import { MarkupDataController } from '../utils/markup-data.js';
 
 type MoonPhaseData =
 	| GetCurrentMoonPhaseResponse
@@ -22,12 +22,13 @@ type MoonListEntry =
  * Moon phase card. Renders /astrology/moon-phase/{current,upcoming,calendar/...}.
  */
 @customElement('roxy-moon-phase')
-export class RoxyMoonPhase extends LitElement {
+export class RoxyMoonPhase extends RoxyDataElement<MoonPhaseData> {
 	static styles = [
 		baseStyles,
 		css`
 			.card {
-				background: var(--roxy-bg, #fff);
+				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);
@@ -110,24 +111,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;
-
 	@property({ type: String, reflect: true })
 	mode: 'current' | 'upcoming' | 'calendar' = 'current';
 
-	render() {
-		const d = this.data;
-		if (!d)
-			return html`<div class="roxy-empty" role="status">No moon phase data</div>`;
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No moon phase data</div>`;
+	}
+
+	protected renderData(d: MoonPhaseData) {
 		const list: MoonListEntry[] =
 			'phases' in d ? d.phases : 'calendar' in d ? d.calendar : [];
 		if (this.mode !== 'current' && list.length > 0) {

package/src/components/nakshatra-card.ts

@@ -1,8 +1,8 @@
-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 { NakshatraResponse } from '../types/index.js';
+import { RoxyDataElement } from '../utils/base-element.js';
 import { baseStyles } from '../utils/base-styles.js';
-import { MarkupDataController } from '../utils/markup-data.js';
 
 /**
  * Nakshatra reference card. Renders /vedic-astrology/nakshatras/{id}: the
@@ -10,14 +10,15 @@ import { MarkupDataController } from '../utils/markup-data.js';
  * symbol, native characteristics, and traditional remedies.
  */
 @customElement('roxy-nakshatra-card')
-export class RoxyNakshatraCard extends LitElement {
+export class RoxyNakshatraCard extends RoxyDataElement<NakshatraResponse> {
 	static styles = [
 		baseStyles,
 		css`
 			.wrap {
 				border: 1px solid var(--roxy-border, #e4e4e7);
 				border-radius: var(--roxy-radius-md, 8px);
-				background: var(--roxy-bg, #fff);
+				background: var(--roxy-surface, #fff);
+				color: var(--roxy-fg, #0a0a0a);
 				padding: var(--roxy-space-md, 1rem);
 				display: grid;
 				gap: var(--roxy-space-md, 1rem);
@@ -92,21 +93,7 @@ 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;
-
-	render() {
-		if (!this.data)
-			return html`<div class="roxy-empty" role="status">No nakshatra data</div>`;
-		const n = this.data;
+	protected renderData(n: NakshatraResponse) {
 		const remedies = n.remedies;
 
 		return html`<article class="wrap" aria-label=${`Nakshatra ${n.name}`}>
@@ -149,6 +136,10 @@ export class RoxyNakshatraCard extends LitElement {
 			}
 		</article>`;
 	}
+
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No nakshatra data</div>`;
+	}
 }
 
 declare global {

package/src/components/natal-chart.ts

@@ -1,4 +1,4 @@
-import { css, html, LitElement, nothing, svg } from 'lit';
+import { css, html, nothing, svg } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import {
 	ASPECT_SYMBOL,
@@ -7,6 +7,7 @@ import {
 	SIGNS_ORDER,
 } from '../tokens/index.js';
 import type { NatalChartResponse } from '../types/index.js';
+import { RoxyDataElement } from '../utils/base-element.js';
 import { baseStyles } from '../utils/base-styles.js';
 import {
 	arcMidpoint,
@@ -21,7 +22,6 @@ import {
 	formatNumber,
 	normalizeAspect,
 } from '../utils/format.js';
-import { MarkupDataController } from '../utils/markup-data.js';
 import { capitalize } from '../utils/string.js';
 import { renderTablist, tablistStyles } from '../utils/tablist.js';
 
@@ -42,7 +42,7 @@ const ANGLE_LABEL_R = 196;
  * markers, and aspect lines from a /astrology/natal-chart response.
  */
 @customElement('roxy-natal-chart')
-export class RoxyNatalChart extends LitElement {
+export class RoxyNatalChart extends RoxyDataElement<NatalChartResponse> {
 	static styles = [
 		baseStyles,
 		tablistStyles,
@@ -50,6 +50,12 @@ export class RoxyNatalChart extends LitElement {
 		css`
 			.wrap {
 				width: 100%;
+				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);
 			}
@@ -69,7 +75,7 @@ export class RoxyNatalChart extends LitElement {
 			svg {
 				display: block;
 				width: 100%;
-				max-width: 560px;
+				max-width: var(--roxy-chart-max-width, 560px);
 				aspect-ratio: 1 / 1;
 				height: auto;
 				margin: 0 auto;
@@ -369,17 +375,6 @@ export class RoxyNatalChart 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: NatalChartResponse | null = null;
-
 	@property({ type: String, attribute: 'house-system', reflect: true })
 	houseSystem: 'placidus' | 'whole-sign' | 'equal' | 'koch' = 'placidus';
 
@@ -404,20 +399,22 @@ export class RoxyNatalChart extends LitElement {
 		return 180 + this.getAscendant() - lon;
 	}
 
-	render() {
-		if (!this.data)
-			return html`<div class="roxy-empty" role="status">No chart data</div>`;
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No chart data</div>`;
+	}
+
+	protected renderData(data: NatalChartResponse) {
 		const planets = this.getPlanets();
-		const aspects = this.data.aspects ?? [];
+		const aspects = data.aspects ?? [];
 		const view = this.view;
 
 		return html`<div class="wrap">
 			<header>
 				<h2 class="title">Natal chart</h2>
 				${
-					this.data.birthDetails
+					data.birthDetails
 						? html`<div class="meta">
-							${[this.data.birthDetails.date, this.data.birthDetails.time]
+							${[data.birthDetails.date, data.birthDetails.time]
 								.filter(Boolean)
 								.join(' · ')}
 						</div>`
@@ -448,8 +445,8 @@ export class RoxyNatalChart extends LitElement {
 				<span>${planets.length} planets</span>
 				<span>${aspects.length} aspects</span>
 				${
-					this.data.houseSystem
-						? html`<span>${this.data.houseSystem} houses</span>`
+					data.houseSystem
+						? html`<span>${data.houseSystem} houses</span>`
 						: nothing
 				}
 				<span><span class="legend-swatch" style="background: var(--roxy-success)"></span>harmonious</span>

package/src/components/numerology-card.ts

@@ -1,32 +1,53 @@
-import { css, html, LitElement, nothing } from 'lit';
+import { css, html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import type {
+	CalculateBirthDayResponse,
 	CalculateExpressionResponse,
 	CalculateLifePathResponse,
+	CalculateMaturityResponse,
+	CalculatePersonalDayResponse,
+	CalculatePersonalityResponse,
+	CalculatePersonalMonthResponse,
 	CalculatePersonalYearResponse,
+	CalculateSoulUrgeResponse,
 	GenerateNumerologyChartResponse,
+	GetDailyNumberResponse,
 } from '../types/index.js';
+import { RoxyDataElement } from '../utils/base-element.js';
 import { baseStyles } from '../utils/base-styles.js';
-import { MarkupDataController } from '../utils/markup-data.js';
 import { humanize } from '../utils/string.js';
 
-type NumerologyData =
+/**
+ * Single-number numerology responses that share the number + meaning + calculation + karmic-debt shape. {@link RoxyNumerologyCard.renderNumberCard} renders any of them; the `type` attribute selects only the heading label.
+ */
+type NumberCardData =
 	| CalculateLifePathResponse
 	| CalculateExpressionResponse
+	| CalculateSoulUrgeResponse
+	| CalculatePersonalityResponse
+	| CalculateBirthDayResponse
+	| CalculateMaturityResponse;
+
+type NumerologyData =
+	| NumberCardData
 	| CalculatePersonalYearResponse
+	| CalculatePersonalDayResponse
+	| CalculatePersonalMonthResponse
+	| GetDailyNumberResponse
 	| GenerateNumerologyChartResponse;
 
 /**
- * Numerology card. Renders /numerology/{life-path,expression,personal-year,chart}.
- * Use the `type` attribute to switch the layout.
+ * Numerology card. Renders /numerology/{life-path,expression,soul-urge,personality,birth-day,maturity,personal-year,chart}.
+ * Use the `type` attribute to switch the heading; the single-number types all share one layout.
  */
 @customElement('roxy-numerology-card')
-export class RoxyNumerologyCard extends LitElement {
+export class RoxyNumerologyCard extends RoxyDataElement<NumerologyData> {
 	static styles = [
 		baseStyles,
 		css`
 			.card {
-				background: var(--roxy-bg, #fff);
+				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);
@@ -123,39 +144,70 @@ export class RoxyNumerologyCard 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: NumerologyData | null = null;
-
 	@property({ type: String, reflect: true })
-	type: 'life-path' | 'expression' | 'personal-year' | 'chart' = 'life-path';
-
-	render() {
-		const d = this.data;
-		if (!d)
-			return html`<div class="roxy-empty" role="status">No numerology data</div>`;
+	type:
+		| 'life-path'
+		| 'expression'
+		| 'soul-urge'
+		| 'personality'
+		| 'birth-day'
+		| 'maturity'
+		| 'daily'
+		| 'personal-day'
+		| 'personal-month'
+		| 'personal-year'
+		| 'chart' = 'life-path';
 
+	protected renderData(d: NumerologyData) {
 		const headerLabel = LABELS[this.type] ?? this.type;
-
 		if ('coreNumbers' in d) return this.renderChart(d, headerLabel);
+		// Period reads share a number+theme+body shape but differ in field names;
+		// check the most specific key first (a personal-day response also carries
+		// personalMonth/personalYear), so the order is day -> month -> year.
+		if ('personalDay' in d) {
+			return this.renderPeriod(headerLabel, d.personalDay, d.theme, d.guidance);
+		}
+		if ('personalMonth' in d) {
+			return this.renderPeriod(headerLabel, d.personalMonth, d.theme, d.focus);
+		}
 		if ('personalYear' in d) return this.renderPersonalYear(d, headerLabel);
-		return this.renderNumberCard(
-			d as CalculateLifePathResponse | CalculateExpressionResponse,
-			headerLabel,
-		);
+		// Daily number: number + meaning, no calculation/karmic-debt; show the
+		// meaning title as the heading and the daily message as the body.
+		if ('dailyMessage' in d) {
+			return this.renderPeriod(
+				headerLabel,
+				d.number,
+				d.meaning?.title,
+				d.dailyMessage,
+			);
+		}
+		return this.renderNumberCard(d as NumberCardData, headerLabel);
 	}
 
-	private renderNumberCard(
-		d: CalculateLifePathResponse | CalculateExpressionResponse,
+	/** Shared layout for a single period number (day/month): a hero numeral, theme heading, and guidance/focus body. */
+	private renderPeriod(
 		headerLabel: string,
+		num: number | undefined,
+		theme: string | undefined,
+		body: string | undefined,
 	) {
+		return html`<article class="card" aria-label=${headerLabel}>
+			<div class="hero">
+				${typeof num === 'number' ? html`<div class="numeral">${num}</div>` : nothing}
+				<div>
+					<p class="label">${headerLabel}</p>
+					${theme ? html`<h2 class="title">${theme}</h2>` : nothing}
+				</div>
+			</div>
+			${body ? html`<p class="meaning">${body}</p>` : nothing}
+		</article>`;
+	}
+
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No numerology data</div>`;
+	}
+
+	private renderNumberCard(d: NumberCardData, headerLabel: string) {
 		const keywords = d.meaning?.keywords ?? [];
 		return html`<article class="card" aria-label=${headerLabel}>
 			<div class="hero">
@@ -230,6 +282,13 @@ export class RoxyNumerologyCard extends LitElement {
 const LABELS: Record<string, string> = {
 	'life-path': 'Life Path',
 	expression: 'Expression',
+	'soul-urge': 'Soul Urge',
+	personality: 'Personality',
+	'birth-day': 'Birth Day',
+	maturity: 'Maturity',
+	daily: 'Daily Number',
+	'personal-day': 'Personal Day',
+	'personal-month': 'Personal Month',
 	'personal-year': 'Personal Year',
 	chart: 'Numerology chart',
 };