@roxyapi/ui 0.2.0 → 0.2.1

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.1";
 //# sourceMappingURL=version.d.ts.map

package/package.json

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

@@ -162,19 +162,23 @@ export class RoxyTransitsTable extends LitElement {
 				white-space: nowrap;
 			}
 
-			.interp {
+			.interp-row td {
+				padding-top: 0;
+				padding-bottom: var(--roxy-space-sm, 0.5rem);
+				border-bottom: 1px solid var(--roxy-border, #e4e4e7);
 				color: var(--roxy-secondary, #475569);
 				font-size: var(--roxy-text-xs, 0.75rem);
-				max-width: 22rem;
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
+				line-height: 1.45;
 			}
 
-			@container (max-width: 600px) {
-				.interp {
-					display: none;
-				}
+			.aspect-row td {
+				border-bottom: none;
+				padding-bottom: 4px;
+			}
+
+			.aspect-row.no-interp td {
+				border-bottom: 1px solid var(--roxy-border, #e4e4e7);
+				padding-bottom: var(--roxy-space-sm, 0.5rem);
 			}
 
 			.overflow-scroll {
@@ -307,7 +311,6 @@ export class RoxyTransitsTable extends LitElement {
 					<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>
@@ -316,27 +319,32 @@ export class RoxyTransitsTable extends LitElement {
 					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>`;
+					const rowClass = summary ? 'aspect-row' : 'aspect-row no-interp';
+					return html`<tr class=${rowClass}>
+							<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>
+						</tr>
+						${
+							summary
+								? html`<tr class="interp-row">
+										<td colspan="6">${summary}</td>
+									</tr>`
+								: nothing
+						}`;
 				})}
 			</tbody>
 		</table>`;

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.1';