@roxyapi/ui 0.6.0 → 0.7.0

package/dist/version.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roxyapi/ui",
-  "version": "0.6.0",
+  "version": "0.7.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",

package/src/components/ashtakavarga-grid.ts

@@ -70,7 +70,7 @@ export class RoxyAshtakavargaGrid extends LitElement {
 			}
 
 			.tab[aria-selected='true'] {
-				color: var(--roxy-accent-fg, #b45309);
+				color: var(--roxy-accent-ink, #b45309);
 				border-bottom-color: var(--roxy-accent, #f59e0b);
 				font-weight: var(--roxy-weight-bold, 600);
 			}

package/src/components/biorhythm-chart.ts

@@ -52,7 +52,7 @@ export class RoxyBiorhythmChart extends LitElement {
 			}
 			.energy {
 				font-variant-numeric: tabular-nums;
-				color: var(--roxy-accent-fg, #b45309);
+				color: var(--roxy-accent-ink, #b45309);
 				font-weight: var(--roxy-weight-bold, 600);
 			}
 			.bars {

package/src/components/choghadiya-grid.ts

@@ -104,7 +104,7 @@ export class RoxyChoghadiyaGrid extends LitElement {
 				margin-left: 0.4em;
 				font-size: var(--roxy-text-xs, 0.75rem);
 				font-weight: var(--roxy-weight-bold, 600);
-				color: var(--roxy-accent-fg, #b45309);
+				color: var(--roxy-accent-ink, #b45309);
 				text-transform: uppercase;
 				letter-spacing: 0.06em;
 			}

package/src/components/compatibility-card.ts

@@ -50,7 +50,7 @@ export class RoxyCompatibilityCard extends LitElement {
 				font-variant-numeric: tabular-nums;
 				font-size: 2rem;
 				font-weight: var(--roxy-weight-bold, 600);
-				color: var(--roxy-accent-fg, #b45309);
+				color: var(--roxy-accent-ink, #b45309);
 				line-height: 1;
 			}
 			.rating {
@@ -86,7 +86,7 @@ export class RoxyCompatibilityCard extends LitElement {
 			}
 
 			.archetype {
-				color: var(--roxy-accent-fg, #b45309);
+				color: var(--roxy-accent-ink, #b45309);
 				font-weight: var(--roxy-weight-bold, 600);
 			}
 

package/src/components/dasha-timeline.ts

@@ -6,7 +6,6 @@ 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';
 
@@ -26,7 +25,6 @@ type DashaPeriod = GetMajorDashasResponse['mahadashas'][number];
 export class RoxyDashaTimeline extends LitElement {
 	static styles = [
 		baseStyles,
-		disclosureStyles,
 		css`
 			.wrap {
 				display: grid;
@@ -90,14 +88,14 @@ export class RoxyDashaTimeline extends LitElement {
 				font-size: var(--roxy-text-sm, 0.875rem);
 			}
 			.bar.now strong {
-				color: var(--roxy-accent-fg, #b45309);
+				color: var(--roxy-accent-ink, #b45309);
 			}
 			.now-badge {
 				display: inline-block;
 				margin-left: 0.4em;
 				font-size: var(--roxy-text-xs, 0.75rem);
 				font-weight: var(--roxy-weight-bold, 600);
-				color: var(--roxy-accent-fg, #b45309);
+				color: var(--roxy-accent-ink, #b45309);
 				text-transform: uppercase;
 				letter-spacing: 0.06em;
 			}
@@ -125,7 +123,7 @@ export class RoxyDashaTimeline extends LitElement {
 				top: -2px;
 				bottom: -2px;
 				width: 2px;
-				background: var(--roxy-accent-fg, #b45309);
+				background: var(--roxy-accent-ink, #b45309);
 				border-radius: 2px;
 				box-shadow: 0 0 0 2px
 					color-mix(in srgb, var(--roxy-accent, #f59e0b) 35%, transparent);
@@ -136,22 +134,18 @@ export class RoxyDashaTimeline extends LitElement {
 				font-variant-numeric: tabular-nums;
 				text-align: right;
 			}
-			details.interp {
+			.interp {
 				border: 1px solid var(--roxy-border, #e4e4e7);
 				border-radius: var(--roxy-radius-md, 8px);
 				padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);
 				background: var(--roxy-bg, #fff);
 			}
-			details.interp summary {
-				cursor: pointer;
+			.interp h3 {
+				margin: 0;
 				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 {
+			.interp p {
 				margin: var(--roxy-space-sm, 0.5rem) 0 0;
 				font-size: var(--roxy-text-sm, 0.875rem);
 				color: var(--roxy-muted, #71717a);
@@ -238,13 +232,10 @@ export class RoxyDashaTimeline extends LitElement {
 	private renderActiveInterpretation(periods: DashaPeriod[]) {
 		const active = periods.find((p) => this.isCurrent(p));
 		if (!active?.interpretation) return nothing;
-		return html`<details class="interp">
-			<summary>
-				<span>${active.planet} mahadasha interpretation</span>
-				${chevron()}
-			</summary>
+		return html`<div class="interp">
+			<h3>${active.planet} mahadasha</h3>
 			<p>${active.interpretation}</p>
-		</details>`;
+		</div>`;
 	}
 
 	private renderCurrent(d: DashaData) {

package/src/components/endpoint-form.ts

@@ -125,7 +125,7 @@ export class RoxyEndpointForm extends LitElement {
 			select:focus {
 				outline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));
 				outline-offset: 2px;
-				border-color: var(--roxy-accent-fg, #b45309);
+				border-color: var(--roxy-accent-ink, #b45309);
 			}
 			.help {
 				color: var(--roxy-muted, #71717a);
@@ -146,7 +146,7 @@ export class RoxyEndpointForm extends LitElement {
 			}
 			button.submit {
 				justify-self: start;
-				background: var(--roxy-accent-fg, #b45309);
+				background: var(--roxy-accent-ink, #b45309);
 				color: var(--roxy-bg, #fff);
 				border: 0;
 				border-radius: var(--roxy-radius-md, 8px);

package/src/components/guna-milan.ts

@@ -51,7 +51,7 @@ export class RoxyGunaMilan extends LitElement {
 			.total {
 				font-size: 2.25rem;
 				font-weight: var(--roxy-weight-bold, 600);
-				color: var(--roxy-accent-fg, #b45309);
+				color: var(--roxy-accent-ink, #b45309);
 				font-variant-numeric: tabular-nums;
 				line-height: 1;
 			}

package/src/components/hexagram.ts

@@ -53,7 +53,7 @@ export class RoxyHexagram extends LitElement {
 			.symbol {
 				font-size: 3rem;
 				line-height: 1;
-				color: var(--roxy-accent-fg, #b45309);
+				color: var(--roxy-accent-ink, #b45309);
 			}
 			.lines {
 				display: grid;
@@ -105,7 +105,7 @@ export class RoxyHexagram extends LitElement {
 			}
 			.tri-glyph {
 				font-size: var(--roxy-text-xl, 1.5rem);
-				color: var(--roxy-accent-fg, #b45309);
+				color: var(--roxy-accent-ink, #b45309);
 				margin-right: 4px;
 				vertical-align: middle;
 			}
@@ -131,7 +131,7 @@ export class RoxyHexagram extends LitElement {
 				margin-top: var(--roxy-space-md, 1rem);
 				padding-top: var(--roxy-space-md, 1rem);
 				border-top: 1px solid var(--roxy-border, #e4e4e7);
-				color: var(--roxy-accent-fg, #b45309);
+				color: var(--roxy-accent-ink, #b45309);
 				font-size: var(--roxy-text-sm, 0.875rem);
 			}
 		`,

package/src/components/horoscope-card.ts

@@ -42,7 +42,7 @@ export class RoxyHoroscopeCard extends LitElement {
 
 			.glyph {
 				font-size: 2.25rem;
-				color: var(--roxy-accent-fg, #b45309);
+				color: var(--roxy-accent-ink, #b45309);
 				line-height: 1;
 			}
 

package/src/components/kp-chart.ts

@@ -76,7 +76,7 @@ export class RoxyKpChart extends LitElement {
 				font-family: inherit;
 			}
 			.tab[aria-selected='true'] {
-				color: var(--roxy-accent-fg, #b45309);
+				color: var(--roxy-accent-ink, #b45309);
 				border-bottom-color: var(--roxy-accent, #f59e0b);
 				font-weight: var(--roxy-weight-bold, 600);
 			}

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

@@ -91,7 +91,7 @@ export class RoxyKpRulingPlanets extends LitElement {
 			}
 			.rp .rank {
 				font-size: var(--roxy-text-xs, 0.75rem);
-				color: var(--roxy-accent-fg, #b45309);
+				color: var(--roxy-accent-ink, #b45309);
 			}
 			table {
 				width: 100%;

package/src/components/location-search.ts

@@ -50,7 +50,7 @@ export class RoxyLocationSearch extends LitElement {
 			input:focus {
 				outline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));
 				outline-offset: 2px;
-				border-color: var(--roxy-accent-fg, #b45309);
+				border-color: var(--roxy-accent-ink, #b45309);
 			}
 			.spinner {
 				position: absolute;

package/src/components/nakshatra-card.ts

@@ -35,7 +35,7 @@ export class RoxyNakshatraCard extends LitElement {
 				font-weight: var(--roxy-weight-bold, 600);
 			}
 			.number {
-				color: var(--roxy-accent-fg, #b45309);
+				color: var(--roxy-accent-ink, #b45309);
 				font-size: var(--roxy-text-sm, 0.875rem);
 				font-weight: var(--roxy-weight-bold, 600);
 			}

package/src/components/natal-chart.ts

@@ -159,7 +159,7 @@ export class RoxyNatalChart extends LitElement {
 				stroke: var(--roxy-danger, #dc2626);
 			}
 			.aspect-conjunction {
-				stroke: var(--roxy-accent-fg, #b45309);
+				stroke: var(--roxy-accent-ink, #b45309);
 			}
 			.aspect-other {
 				stroke: var(--roxy-muted, #71717a);
@@ -167,14 +167,14 @@ export class RoxyNatalChart extends LitElement {
 			}
 
 			.angle-marker {
-				fill: var(--roxy-accent-fg, #b45309);
+				fill: var(--roxy-accent-ink, #b45309);
 				font-size: 10px;
 				font-weight: 700;
 				font-family: var(--roxy-font-sans);
 				letter-spacing: 0.04em;
 			}
 			.angle-tick {
-				stroke: var(--roxy-accent-fg, #b45309);
+				stroke: var(--roxy-accent-ink, #b45309);
 				stroke-width: 1.5;
 			}
 
@@ -234,7 +234,7 @@ export class RoxyNatalChart extends LitElement {
 				color: var(--roxy-danger, #dc2626);
 			}
 			table.aspect-grid td.aspect-conjunction .asp {
-				color: var(--roxy-accent-fg, #b45309);
+				color: var(--roxy-accent-ink, #b45309);
 			}
 			table.aspect-grid td.aspect-other .asp {
 				color: var(--roxy-muted, #71717a);
@@ -363,7 +363,7 @@ export class RoxyNatalChart extends LitElement {
 				padding: 1px 8px;
 				border-radius: 9999px;
 				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 14%, transparent);
-				color: var(--roxy-accent-fg, #b45309);
+				color: var(--roxy-accent-ink, #b45309);
 				font-size: var(--roxy-text-xs, 0.75rem);
 			}
 		`,

package/src/components/numerology-card.ts

@@ -44,7 +44,7 @@ export class RoxyNumerologyCard extends LitElement {
 				font-size: 4rem;
 				line-height: 1;
 				font-weight: var(--roxy-weight-bold, 600);
-				color: var(--roxy-accent-fg, #b45309);
+				color: var(--roxy-accent-ink, #b45309);
 				font-variant-numeric: tabular-nums;
 			}
 			.label {
@@ -106,7 +106,7 @@ export class RoxyNumerologyCard extends LitElement {
 				text-transform: capitalize;
 			}
 			.cores .item strong {
-				color: var(--roxy-accent-fg, #b45309);
+				color: var(--roxy-accent-ink, #b45309);
 				font-variant-numeric: tabular-nums;
 				font-size: var(--roxy-text-base, 1rem);
 				font-weight: var(--roxy-weight-bold, 600);

package/src/components/panchang-table.ts

@@ -11,7 +11,18 @@ import { MarkupDataController } from '../utils/markup-data.js';
 type PanchangData = GetBasicPanchangResponse | GetDetailedPanchangResponse;
 type PanchangTime = GetDetailedPanchangResponse['rahuKaal'];
 
-/** Panchang table for /vedic-astrology/panchang/{basic,detailed}. */
+/**
+ * Panchang table for /vedic-astrology/panchang/{basic,detailed}.
+ *
+ * @remarks
+ * The main grid lists the five limbs (tithi, nakshatra, yoga, karana, vara),
+ * sun and moon timings, and, in detailed mode, the sunrise placements a reader
+ * scans first: Moon rashi, Sun rashi, Sun nakshatra, and the current hora. The
+ * detailed mode then groups every timed window into two sections, auspicious
+ * (the fixed muhurtas plus each Amrit Kalam) and inauspicious (Rahu Kaal,
+ * Yamaganda, Gulika, plus each Dur Muhurta and Varjyam), so a consumer can act
+ * on timing without parsing the raw response.
+ */
 @customElement('roxy-panchang-table')
 export class RoxyPanchangTable extends LitElement {
 	static styles = [
@@ -105,6 +116,15 @@ export class RoxyPanchangTable extends LitElement {
 		];
 		if (detailed) fivefold.push(['Vara', this.formatPart(detailed.vara)]);
 
+		const placements: Array<[string, string]> = detailed
+			? [
+					['Moon sign', this.formatRashi(detailed.moonSign)],
+					['Sun sign', this.formatRashi(detailed.sunSign)],
+					['Sun nakshatra', this.formatSunNakshatra(detailed.sunNakshatra)],
+					['Hora', this.formatHora(detailed.hora)],
+				].filter((row): row is [string, string] => Boolean(row[1]))
+			: [];
+
 		const muhurtas: Array<[string, PanchangTime | undefined]> = detailed
 			? [
 					['Brahma Muhurta', detailed.brahmaMuhurta],
@@ -117,6 +137,10 @@ export class RoxyPanchangTable extends LitElement {
 				]
 			: [];
 
+		const auspiciousWindows: Array<[string, PanchangTime]> = detailed
+			? this.expandWindows('Amrit Kalam', detailed.amritKalam)
+			: [];
+
 		const inauspicious: Array<[string, PanchangTime | undefined]> = detailed
 			? [
 					['Rahu Kaal', detailed.rahuKaal],
@@ -125,6 +149,13 @@ export class RoxyPanchangTable extends LitElement {
 				]
 			: [];
 
+		const inauspiciousWindows: Array<[string, PanchangTime]> = detailed
+			? [
+					...this.expandWindows('Dur Muhurta', detailed.durMuhurta),
+					...this.expandWindows('Varjyam', detailed.varjyam),
+				]
+			: [];
+
 		const transitions =
 			detailed && 'transitions' in detailed ? detailed.transitions : undefined;
 
@@ -173,6 +204,12 @@ export class RoxyPanchangTable extends LitElement {
 							</tr>`
 							: nothing
 					}
+					${placements.map(
+						([k, v]) => html`<tr>
+							<th>${k}</th>
+							<td>${v}</td>
+						</tr>`,
+					)}
 				</tbody>
 			</table>
 			${
@@ -192,32 +229,33 @@ export class RoxyPanchangTable extends LitElement {
 			}
 			${
 				this.detail === 'detailed' &&
-				(muhurtas.some((m) => !!m[1]) || inauspicious.some((m) => !!m[1]))
+				(
+					muhurtas.some((m) => !!m[1]) ||
+						auspiciousWindows.length > 0 ||
+						inauspicious.some((m) => !!m[1]) ||
+						inauspiciousWindows.length > 0
+				)
 					? html`
 						<div class="section">Auspicious muhurtas</div>
 						<table>
 							<tbody>
-								${muhurtas
-									.filter(([, v]) => !!v)
-									.map(
-										([k, v]) => html`<tr>
-											<th>${k}</th>
-											<td>${formatTimeRange(v)}</td>
-										</tr>`,
-									)}
+								${this.renderPeriodRows([
+									...muhurtas.filter(
+										(m): m is [string, PanchangTime] => !!m[1],
+									),
+									...auspiciousWindows,
+								])}
 							</tbody>
 						</table>
 						<div class="section">Inauspicious periods</div>
 						<table>
 							<tbody>
-								${inauspicious
-									.filter(([, v]) => !!v)
-									.map(
-										([k, v]) => html`<tr>
-											<th>${k}</th>
-											<td>${formatTimeRange(v)}</td>
-										</tr>`,
-									)}
+								${this.renderPeriodRows([
+									...inauspicious.filter(
+										(m): m is [string, PanchangTime] => !!m[1],
+									),
+									...inauspiciousWindows,
+								])}
 							</tbody>
 						</table>
 					`
@@ -226,6 +264,31 @@ export class RoxyPanchangTable extends LitElement {
 		</div>`;
 	}
 
+	/** Renders one row per [label, period] pair, dropping any with no range. */
+	private renderPeriodRows(rows: Array<[string, PanchangTime]>) {
+		return rows.map(([k, v]) => {
+			const range = formatTimeRange(v);
+			return range
+				? html`<tr>
+						<th>${k}</th>
+						<td>${range}</td>
+					</tr>`
+				: nothing;
+		});
+	}
+
+	/** Expands an array of periods into labeled rows, numbering when more than one. */
+	private expandWindows(
+		label: string,
+		windows: PanchangTime[] | undefined,
+	): Array<[string, PanchangTime]> {
+		if (!windows || windows.length === 0) return [];
+		return windows.map((w, i) => [
+			windows.length > 1 ? `${label} ${i + 1}` : label,
+			w,
+		]);
+	}
+
 	private renderTransitionRow(
 		label: string,
 		t: { endsAt?: string; next?: string } | undefined,
@@ -260,8 +323,39 @@ export class RoxyPanchangTable extends LitElement {
 		}
 		return String(v);
 	}
+
+	/** "English (Sanskrit)" label for the Moon or Sun rashi at sunrise. */
+	private formatRashi(r: RashiPlacement | undefined): string {
+		if (!r?.name) return '';
+		return r.sanskritName && r.sanskritName !== r.name
+			? `${r.name} (${r.sanskritName})`
+			: r.name;
+	}
+
+	/** Sun nakshatra with pada and lord, the form a panchang reader expects. */
+	private formatSunNakshatra(n: SunNakshatra | undefined): string {
+		if (!n?.name) return '';
+		const parts = [
+			n.name,
+			typeof n.pada === 'number' ? `pada ${n.pada}` : '',
+			n.lord ? `· ${n.lord}` : '',
+		].filter(Boolean);
+		return parts.join(' ');
+	}
+
+	/** Current planetary hora with its active window. */
+	private formatHora(h: Hora | undefined): string {
+		if (!h?.current) return '';
+		const range = formatTimeRange(h);
+		return range ? `${h.current} (${range})` : h.current;
+	}
 }
 
+type PanchangPlacements = GetDetailedPanchangResponse;
+type RashiPlacement = PanchangPlacements['moonSign'];
+type SunNakshatra = PanchangPlacements['sunNakshatra'];
+type Hora = PanchangPlacements['hora'];
+
 declare global {
 	interface HTMLElementTagNameMap {
 		'roxy-panchang-table': RoxyPanchangTable;

package/src/components/shadbala-table.ts

@@ -149,7 +149,7 @@ export class RoxyShadbalaTable extends LitElement {
 
 			.rank-badge {
 				font-size: var(--roxy-text-xs, 0.75rem);
-				color: var(--roxy-accent-fg, #b45309);
+				color: var(--roxy-accent-ink, #b45309);
 				font-weight: var(--roxy-weight-bold, 600);
 			}
 

package/src/components/synastry-chart.ts

@@ -66,7 +66,7 @@ export class RoxySynastryChart extends LitElement {
 			.score {
 				font-variant-numeric: tabular-nums;
 				font-weight: var(--roxy-weight-bold, 600);
-				color: var(--roxy-accent-fg, #b45309);
+				color: var(--roxy-accent-ink, #b45309);
 				font-size: var(--roxy-text-xl, 1.5rem);
 			}
 
@@ -111,12 +111,12 @@ export class RoxySynastryChart extends LitElement {
 				fill: var(--roxy-danger, #dc2626);
 			}
 			.asc-tick {
-				stroke: var(--roxy-accent-fg, #b45309);
+				stroke: var(--roxy-accent-ink, #b45309);
 				stroke-width: 1;
 				opacity: 0.75;
 			}
 			.asc-label {
-				fill: var(--roxy-accent-fg, #b45309);
+				fill: var(--roxy-accent-ink, #b45309);
 				font-size: 9px;
 				font-weight: 700;
 				font-family: var(--roxy-font-sans);
@@ -136,7 +136,7 @@ export class RoxySynastryChart extends LitElement {
 				stroke: var(--roxy-danger, #dc2626);
 			}
 			.aspect-conjunction {
-				stroke: var(--roxy-accent-fg, #b45309);
+				stroke: var(--roxy-accent-ink, #b45309);
 			}
 			.aspect-other {
 				stroke: var(--roxy-muted, #71717a);

package/src/components/transits-table.ts

@@ -194,7 +194,7 @@ export class RoxyTransitsTable extends LitElement {
 				padding: 1px 8px;
 				border-radius: 9999px;
 				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 14%, transparent);
-				color: var(--roxy-accent-fg, #b45309);
+				color: var(--roxy-accent-ink, #b45309);
 				font-size: var(--roxy-text-xs, 0.75rem);
 			}
 			.nature-badge {