@roxyapi/ui 0.2.3 → 0.3.0

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

@@ -0,0 +1,196 @@
+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';
+
+/**
+ * KP ruling planets card. Renders /vedic-astrology/kp/ruling-planets: the day
+ * lord, the Moon and Lagna stellar hierarchies (sign lord, star lord, sub
+ * lord, sub-sub lord), the consolidated ruling-planet list ordered by
+ * strength, and, when birth data is supplied, the house significators per
+ * planet. The primary horary timing tool in KP astrology.
+ */
+@customElement('roxy-kp-ruling-planets')
+export class RoxyKpRulingPlanets extends LitElement {
+	static styles = [
+		baseStyles,
+		css`
+			.wrap {
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				background: var(--roxy-bg, #fff);
+				padding: var(--roxy-space-md, 1rem);
+				display: grid;
+				gap: var(--roxy-space-md, 1rem);
+				box-shadow: var(--roxy-shadow-sm);
+			}
+			.title {
+				margin: 0;
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.day-lord {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			.day-lord strong {
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.groups {
+				display: grid;
+				grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
+				gap: var(--roxy-space-md, 1rem);
+			}
+			.group h3 {
+				margin: 0 0 var(--roxy-space-xs, 0.25rem);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				color: var(--roxy-muted, #71717a);
+				text-transform: uppercase;
+				letter-spacing: 0.05em;
+			}
+			.group dl {
+				margin: 0;
+				display: grid;
+				grid-template-columns: auto 1fr;
+				gap: 2px var(--roxy-space-sm, 0.5rem);
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			.group dt {
+				color: var(--roxy-muted, #71717a);
+			}
+			.group dd {
+				margin: 0;
+				color: var(--roxy-fg, #0a0a0a);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.rp-list {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-xs, 0.25rem);
+				align-items: center;
+			}
+			.rp-label {
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+				text-transform: uppercase;
+				letter-spacing: 0.05em;
+				margin-right: var(--roxy-space-xs, 0.25rem);
+			}
+			.rp {
+				display: inline-flex;
+				align-items: center;
+				gap: 0.3em;
+				font-size: var(--roxy-text-sm, 0.875rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				padding: 0.15em 0.6em;
+				border-radius: 999px;
+				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 18%, transparent);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.rp .rank {
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-accent-fg, #b45309);
+			}
+			table {
+				width: 100%;
+				border-collapse: collapse;
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			th,
+			td {
+				padding: var(--roxy-space-xs, 0.25rem) var(--roxy-space-sm, 0.5rem);
+				text-align: left;
+				border-bottom: 1px solid var(--roxy-border, #e4e4e7);
+			}
+			th {
+				color: var(--roxy-muted, #71717a);
+				font-weight: var(--roxy-weight-bold, 600);
+				text-transform: uppercase;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				letter-spacing: 0.04em;
+			}
+		`,
+	];
+
+	@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;
+		const significators = d.significators ?? [];
+
+		return html`<div class="wrap" aria-label="KP ruling planets">
+			<header>
+				<h2 class="title">KP ruling planets</h2>
+				${
+					d.dayLord
+						? html`<div class="day-lord">Day lord: <strong>${d.dayLord}</strong></div>`
+						: nothing
+				}
+			</header>
+
+			<div class="groups">
+				<div class="group">
+					<h3>Moon</h3>
+					<dl>
+						<dt>Sign lord</dt><dd>${d.moonSignLord ?? ''}</dd>
+						<dt>Star lord</dt><dd>${d.moonStarLord ?? ''}</dd>
+						<dt>Sub lord</dt><dd>${d.moonSublord ?? ''}</dd>
+						<dt>Sub-sub lord</dt><dd>${d.moonSubSublord ?? ''}</dd>
+					</dl>
+				</div>
+				<div class="group">
+					<h3>Lagna</h3>
+					<dl>
+						<dt>Sign lord</dt><dd>${d.lagnaSignLord ?? ''}</dd>
+						<dt>Star lord</dt><dd>${d.lagnaStarLord ?? ''}</dd>
+						<dt>Sub lord</dt><dd>${d.lagnaSublord ?? ''}</dd>
+						<dt>Sub-sub lord</dt><dd>${d.lagnaSubSublord ?? ''}</dd>
+					</dl>
+				</div>
+			</div>
+
+			${
+				d.rulingPlanets?.length
+					? html`<div class="rp-list" role="list" aria-label="Ruling planets by strength">
+						<span class="rp-label">Ruling planets</span>
+						${d.rulingPlanets.map(
+							(p, i) =>
+								html`<span class="rp" role="listitem"><span class="rank">${i + 1}</span> ${p}</span>`,
+						)}
+					</div>`
+					: nothing
+			}
+
+			${
+				significators.length
+					? html`<table aria-label="House significators">
+						<thead>
+							<tr>
+								<th scope="col">Planet</th>
+								<th scope="col">Signifies houses</th>
+							</tr>
+						</thead>
+						<tbody>
+							${significators.map(
+								(s) => html`<tr>
+									<td>${s.planet}</td>
+									<td>${(s.signifies ?? []).join(', ')}</td>
+								</tr>`,
+							)}
+						</tbody>
+					</table>`
+					: nothing
+			}
+		</div>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-kp-ruling-planets': RoxyKpRulingPlanets;
+	}
+}

package/src/components/location-search.ts

@@ -224,8 +224,16 @@ export class RoxyLocationSearch extends LitElement {
 			const headers: Record<string, string> = {
 				Accept: 'application/json',
 			};
-			if (this.apiKey) headers['X-API-Key'] = this.apiKey;
-			if (this.publishableKey) headers['X-API-Key'] = this.publishableKey;
+			// publishable-key wins when both are set. Surfacing the conflict at the
+			// console (not as a thrown error) avoids breaking widgets that legitimately
+			// have a stale secret key around while migrating to publishable.
+			if (this.apiKey && this.publishableKey) {
+				console.warn(
+					'[roxy-location-search] both api-key and publishable-key set; using publishable-key. Remove api-key from your widget markup.',
+				);
+			}
+			const key = this.publishableKey ?? this.apiKey;
+			if (key) headers['X-API-Key'] = key;
 			const res = await fetch(url, { headers, signal: controller.signal });
 			if (!res.ok) throw new Error(`HTTP ${res.status}`);
 			const json = (await res.json()) as SearchCitiesResponse;
@@ -301,6 +309,11 @@ export class RoxyLocationSearch extends LitElement {
 				role="combobox"
 				aria-expanded=${this.isOpen ? 'true' : 'false'}
 				aria-controls="roxy-location-listbox"
+				aria-activedescendant=${
+					this.isOpen && this.highlight >= 0
+						? `roxy-location-option-${this.highlight}`
+						: ''
+				}
 				aria-autocomplete="list"
 				autocomplete="off"
 				placeholder=${this.placeholder}
@@ -328,6 +341,7 @@ export class RoxyLocationSearch extends LitElement {
 											type="button"
 											class="option"
 											role="option"
+											id=${`roxy-location-option-${idx}`}
 											aria-selected=${this.highlight === idx ? 'true' : 'false'}
 											@click=${() => this.select(city)}
 											@mouseenter=${() => {

package/src/components/nakshatra-card.ts

@@ -0,0 +1,149 @@
+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';
+
+/**
+ * Nakshatra reference card. Renders /vedic-astrology/nakshatras/{id}: the
+ * lunar mansion number, longitude range, ruling planet, presiding deity,
+ * symbol, native characteristics, and traditional remedies.
+ */
+@customElement('roxy-nakshatra-card')
+export class RoxyNakshatraCard extends LitElement {
+	static styles = [
+		baseStyles,
+		css`
+			.wrap {
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				background: var(--roxy-bg, #fff);
+				padding: var(--roxy-space-md, 1rem);
+				display: grid;
+				gap: var(--roxy-space-md, 1rem);
+				box-shadow: var(--roxy-shadow-sm);
+			}
+			.head {
+				display: flex;
+				align-items: baseline;
+				gap: var(--roxy-space-sm, 0.5rem);
+				flex-wrap: wrap;
+			}
+			.name {
+				margin: 0;
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.number {
+				color: var(--roxy-accent-fg, #b45309);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.range {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			.facts {
+				display: grid;
+				grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
+				gap: var(--roxy-space-sm, 0.5rem);
+			}
+			.fact {
+				display: grid;
+				gap: 2px;
+			}
+			.fact dt {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				text-transform: uppercase;
+				letter-spacing: 0.05em;
+			}
+			.fact dd {
+				margin: 0;
+				color: var(--roxy-fg, #0a0a0a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			.section h3 {
+				margin: 0 0 var(--roxy-space-xs, 0.25rem);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				color: var(--roxy-muted, #71717a);
+				text-transform: uppercase;
+				letter-spacing: 0.05em;
+			}
+			.section p {
+				margin: 0;
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-fg, #0a0a0a);
+				line-height: 1.5;
+			}
+			.remedies {
+				display: grid;
+				gap: var(--roxy-space-xs, 0.25rem);
+			}
+			.remedy {
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.remedy strong {
+				color: var(--roxy-muted, #71717a);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+		`,
+	];
+
+	@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;
+		const remedies = n.remedies;
+
+		return html`<article class="wrap" aria-label=${`Nakshatra ${n.name}`}>
+			<header class="head">
+				<h2 class="name">${n.name}</h2>
+				${
+					typeof n.number === 'number'
+						? html`<span class="number">Nakshatra ${n.number} of 27</span>`
+						: nothing
+				}
+				${n.range ? html`<span class="range">${n.range}</span>` : nothing}
+			</header>
+
+			<dl class="facts">
+				${n.lord ? html`<div class="fact"><dt>Lord</dt><dd>${n.lord}</dd></div>` : nothing}
+				${n.deity ? html`<div class="fact"><dt>Deity</dt><dd>${n.deity}</dd></div>` : nothing}
+				${n.symbol ? html`<div class="fact"><dt>Symbol</dt><dd>${n.symbol}</dd></div>` : nothing}
+			</dl>
+
+			${
+				n.characteristics
+					? html`<div class="section">
+						<h3>Characteristics</h3>
+						<p>${n.characteristics}</p>
+					</div>`
+					: nothing
+			}
+
+			${
+				remedies
+					? html`<div class="section">
+						<h3>Remedies</h3>
+						<div class="remedies">
+							${remedies.mantras ? html`<div class="remedy"><strong>Mantras:</strong> ${remedies.mantras}</div>` : nothing}
+							${remedies.gemstones ? html`<div class="remedy"><strong>Gemstones:</strong> ${remedies.gemstones}</div>` : nothing}
+							${remedies.rituals ? html`<div class="remedy"><strong>Rituals:</strong> ${remedies.rituals}</div>` : nothing}
+						</div>
+					</div>`
+					: nothing
+			}
+		</article>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-nakshatra-card': RoxyNakshatraCard;
+	}
+}