@roxyapi/ui 0.2.0 → 0.2.2

package/dist/version.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roxyapi/ui",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "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/natal-chart.ts

@@ -494,11 +494,11 @@ export class RoxyNatalChart extends LitElement {
 		if (planets.length === 0) return nothing;
 		return html`<section class="interpretations">
 			<h3>Planet readings</h3>
-			${planets.map((p) => {
+			${planets.map((p, idx) => {
 				const interp = p.interpretation!;
 				const glyph = PLANET_GLYPH[capitalize(p.name)] ?? '';
 				const deg = formatNumber(p.degree ?? 0, 1);
-				return html`<details class="interp-card">
+				return html`<details class="interp-card" name="natal-planet-readings" ?open=${idx === 0}>
 					<summary>${glyph} ${p.name} <small>${p.sign ?? ''} ${deg}</small></summary>
 					<div class="interp-body">
 						${interp.summary ? html`<p class="interp-summary">${interp.summary}</p>` : nothing}

package/src/components/transits-table.ts

@@ -143,43 +143,73 @@ export class RoxyTransitsTable extends LitElement {
 				color: var(--roxy-muted, #71717a);
 			}
 
-			.nature-harmonious {
-				color: var(--roxy-success-fg, #166534);
+			.overflow-scroll {
+				overflow-x: auto;
+				-webkit-overflow-scrolling: touch;
 			}
 
-			.nature-challenging {
-				color: var(--roxy-danger-fg, #991b1b);
+			.aspect-card {
+				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);
+				margin-bottom: var(--roxy-space-xs, 0.25rem);
 			}
-
-			.nature-neutral {
+			.aspect-card summary {
+				cursor: pointer;
+				font-weight: 500;
+				color: var(--roxy-fg, #0a0a0a);
+				display: flex;
+				flex-wrap: wrap;
+				align-items: center;
+				gap: 0.5em;
+			}
+			.aspect-card summary .meta {
 				color: var(--roxy-muted, #71717a);
+				font-weight: 400;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				margin-left: auto;
+				font-variant-numeric: tabular-nums;
 			}
-
-			.arrow-cell {
-				display: inline-flex;
-				align-items: center;
-				gap: 4px;
-				white-space: nowrap;
+			.aspect-card .interp-body {
+				margin-top: var(--roxy-space-xs, 0.25rem);
+				color: var(--roxy-fg, #0a0a0a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				line-height: 1.45;
 			}
-
-			.interp {
-				color: var(--roxy-secondary, #475569);
+			.aspect-card .interp-body p {
+				margin: 0 0 var(--roxy-space-xs, 0.25rem);
+			}
+			.interp-keywords {
+				display: flex;
+				flex-wrap: wrap;
+				gap: 0.25rem;
+				margin-top: 0.5rem;
+			}
+			.interp-keywords .kw {
+				padding: 1px 8px;
+				border-radius: 9999px;
+				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 14%, transparent);
+				color: var(--roxy-accent-fg, #b45309);
 				font-size: var(--roxy-text-xs, 0.75rem);
-				max-width: 22rem;
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
 			}
-
-			@container (max-width: 600px) {
-				.interp {
-					display: none;
-				}
+			.nature-badge {
+				display: inline-block;
+				padding: 1px 8px;
+				border-radius: 9999px;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				font-weight: 600;
 			}
-
-			.overflow-scroll {
-				overflow-x: auto;
-				-webkit-overflow-scrolling: touch;
+			.nature-badge.harmonious {
+				background: color-mix(in srgb, var(--roxy-success, #16a34a) 12%, transparent);
+				color: var(--roxy-success-fg, #166534);
+			}
+			.nature-badge.challenging {
+				background: color-mix(in srgb, var(--roxy-danger, #dc2626) 12%, transparent);
+				color: var(--roxy-danger-fg, #991b1b);
+			}
+			.nature-badge.neutral {
+				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent);
+				color: var(--roxy-fg, #0a0a0a);
 			}
 		`,
 	];
@@ -224,7 +254,7 @@ export class RoxyTransitsTable extends LitElement {
 					? html`<div>
 						<p class="section-label">Transit aspects</p>
 						<div class="overflow-scroll">
-							${this.renderAspectsTable(transitAspects)}
+							${this.renderAspectsList(transitAspects)}
 						</div>
 					</div>`
 					: nothing
@@ -295,51 +325,44 @@ export class RoxyTransitsTable extends LitElement {
 		</table>`;
 	}
 
-	private renderAspectsTable(
+	private renderAspectsList(
 		aspects: NonNullable<TransitsResponse['transitAspects']>,
 	) {
-		return html`<table class="aspects-table">
-			<thead>
-				<tr>
-					<th scope="col">Transit Planet</th>
-					<th scope="col">Natal Planet</th>
-					<th scope="col">Type</th>
-					<th scope="col">Orb</th>
-					<th scope="col">Status</th>
-					<th scope="col">Strength</th>
-					<th scope="col" class="interp">Interpretation</th>
-				</tr>
-			</thead>
-			<tbody>
-				${aspects.map((a) => {
-					const tGlyph = PLANET_GLYPH[capitalize(a.transitPlanet)] ?? '';
-					const nGlyph = PLANET_GLYPH[capitalize(a.natalPlanet)] ?? '';
-					const natureClass = `nature-${(a.nature ?? '').toLowerCase()}`;
-					const summary = a.interpretation?.summary ?? '';
-					const truncated =
-						summary.length > 120 ? `${summary.slice(0, 120)}...` : summary;
-					return html`<tr>
-						<td>
-							<div class="arrow-cell">
-								<span class="glyph" aria-hidden="true">${tGlyph}</span>
-								${a.transitPlanet}
-							</div>
-						</td>
-						<td>
-							<div class="arrow-cell">
-								<span class="glyph" aria-hidden="true">${nGlyph}</span>
-								${a.natalPlanet}
-							</div>
-						</td>
-						<td class=${natureClass}>${(a.type ?? '').toLowerCase()}</td>
-						<td class="num">${formatNumber(a.orb, 2)}</td>
-						<td>${a.isApplying ? 'Applying' : 'Separating'}</td>
-						<td class="num">${formatNumber(a.strength, 1)}</td>
-						<td class="interp" title=${summary}>${truncated}</td>
-					</tr>`;
-				})}
-			</tbody>
-		</table>`;
+		return html`<div role="list" aria-label="Transit aspects">
+			${aspects.map((a, idx) => {
+				const tGlyph = PLANET_GLYPH[capitalize(a.transitPlanet)] ?? '';
+				const nGlyph = PLANET_GLYPH[capitalize(a.natalPlanet)] ?? '';
+				const nature = (a.nature ?? 'neutral').toLowerCase();
+				const interp = a.interpretation;
+				const type = (a.type ?? '').toLowerCase();
+				const status = a.isApplying ? 'Applying' : 'Separating';
+				return html`<details class="aspect-card" role="listitem" name="transit-aspects" ?open=${idx === 0}>
+					<summary>
+						<span aria-hidden="true">${tGlyph}</span>
+						${a.transitPlanet}
+						<span class="nature-badge ${nature}">${type}</span>
+						<span aria-hidden="true">${nGlyph}</span>
+						${a.natalPlanet}
+						<span class="meta">
+							${status} · orb ${formatNumber(a.orb, 2)}° · strength ${formatNumber(a.strength, 1)}
+						</span>
+					</summary>
+					<div class="interp-body">
+						${interp?.summary ? html`<p>${interp.summary}</p>` : nothing}
+						${interp?.impact ? html`<p><strong>Impact:</strong> ${interp.impact}</p>` : nothing}
+						${interp?.timing ? html`<p><strong>Timing:</strong> ${interp.timing}</p>` : nothing}
+						${interp?.guidance ? html`<p><strong>Guidance:</strong> ${interp.guidance}</p>` : nothing}
+						${
+							interp?.keywords?.length
+								? html`<div class="interp-keywords">
+										${interp.keywords.map((k) => html`<span class="kw">${k}</span>`)}
+									</div>`
+								: nothing
+						}
+					</div>
+				</details>`;
+			})}
+		</div>`;
 	}
 }
 

package/src/components/yoga-list.ts

@@ -2,7 +2,6 @@ import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import type { GetYogaResponse, ListYogasResponse } from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
-import { debounce } from '../utils/debounce.js';
 
 type YogaListData =
 	| ListYogasResponse
@@ -178,9 +177,9 @@ export class RoxyYogaList extends LitElement {
 	@state()
 	private filter = '';
 
-	private readonly handleInput = debounce((e: Event) => {
+	private readonly handleInput = (e: Event) => {
 		this.filter = (e.target as HTMLInputElement).value;
-	}, 200);
+	};
 
 	private renderQualityChip(quality: string) {
 		const cls = `quality-chip quality-${quality}`;

package/src/version.ts

@@ -1,2 +1,2 @@
 // Generated by scripts/sync-version.ts. Do not edit.
-export const ROXY_UI_VERSION = '0.2.0';
+export const ROXY_UI_VERSION = '0.2.2';