@roxyapi/ui 0.5.0 → 0.6.1

package/dist/utils/disclosure.d.ts

@@ -0,0 +1,16 @@
+import type { TemplateResult } from 'lit';
+/**
+ * Disclosure chevron for `<details>`/`<summary>` accordions. Replaces the
+ * browser default triangle with a thin chevron that rotates when the host
+ * `<details>` opens. Render it inside the `<summary>` and pair with
+ * {@link disclosureStyles}.
+ */
+export declare function chevron(): TemplateResult;
+/**
+ * Shared `<details>` accordion styling: hides the native disclosure triangle
+ * and rotates the {@link chevron} 180 degrees when the accordion is open.
+ * Import into any component that renders disclosure accordions so the chevron
+ * looks and behaves identically.
+ */
+export declare const disclosureStyles: import("lit").CSSResult;
+//# sourceMappingURL=disclosure.d.ts.map

package/dist/utils/disclosure.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"disclosure.d.ts","sourceRoot":"","sources":["../../src/utils/disclosure.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C;;;;;GAKG;AACH,wBAAgB,OAAO,IAAI,cAAc,CAiBxC;AAED;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,yBA2B5B,CAAC"}

package/dist/utils/kundli-render.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"kundli-render.d.ts","sourceRoot":"","sources":["../../src/utils/kundli-render.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AA+B1C;;;;;GAKG;AACH,MAAM,WAAW,WAAW;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;GAQG;AACH,MAAM,WAAW,eAAe;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;AAsGpD;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAChC,IAAI,EAAE,MAAM,CACX,MAAM,EACN;IACC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,CACD,EACD,aAAa,CAAC,EAAE,MAAM,GACpB,eAAe,CAoBjB;AAmdD;;;;GAIG;AACH,wBAAgB,eAAe,CAC9B,EAAE,EAAE,eAAe,EACnB,KAAK,EAAE,UAAU,GACf,cAAc,CAShB;AAED;;;;;;;;GAQG;AACH,wBAAgB,wBAAwB,CACvC,MAAM,EAAE,UAAU,EAClB,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,GAClC,cAAc,CAkChB"}
+{"version":3,"file":"kundli-render.d.ts","sourceRoot":"","sources":["../../src/utils/kundli-render.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAgC1C;;;;;GAKG;AACH,MAAM,WAAW,WAAW;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;GAQG;AACH,MAAM,WAAW,eAAe;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;AAsGpD;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAChC,IAAI,EAAE,MAAM,CACX,MAAM,EACN;IACC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,CACD,EACD,aAAa,CAAC,EAAE,MAAM,GACpB,eAAe,CAoBjB;AA8dD;;;;GAIG;AACH,wBAAgB,eAAe,CAC9B,EAAE,EAAE,eAAe,EACnB,KAAK,EAAE,UAAU,GACf,cAAc,CAShB;AAED;;;;;;;;GAQG;AACH,wBAAgB,wBAAwB,CACvC,MAAM,EAAE,UAAU,EAClB,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,GAClC,cAAc,CAQhB"}

package/dist/utils/kundli-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"kundli-styles.d.ts","sourceRoot":"","sources":["../../src/utils/kundli-styles.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,yBA8GxB,CAAC"}
+{"version":3,"file":"kundli-styles.d.ts","sourceRoot":"","sources":["../../src/utils/kundli-styles.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,yBA+ExB,CAAC"}

package/dist/utils/tablist.d.ts

@@ -0,0 +1,44 @@
+import type { TemplateResult } from 'lit';
+/** A single tab in a {@link renderTablist} strip. */
+export interface TablistItem<T extends string = string> {
+    id: T;
+    label: string;
+}
+/**
+ * Shared styling for every horizontal tab strip in the library (natal chart
+ * views, transits, kundli styles). Keeping one rule set means the tabs look
+ * identical everywhere and theme through the same --roxy-* tokens.
+ */
+export declare const tablistStyles: import("lit").CSSResult;
+/**
+ * Render a WAI-ARIA tablist. The host component owns the active-tab state; this
+ * helper draws the buttons, wires click plus Left/Right arrow navigation with a
+ * roving tabindex, and moves focus to the newly selected tab. Pair with
+ * {@link tablistStyles}.
+ *
+ * Pass `controls: true` when each tab governs a sibling
+ * `<div role="tabpanel" id="${idPrefix}-panel-${id}">` so the buttons advertise
+ * `aria-controls`. Omit it for tablists that swap a single rendered view in
+ * place with no separate panel element (the kundli style switch).
+ *
+ * @example
+ * ```ts
+ * renderTablist({
+ *   items: [{ id: 'wheel', label: 'Wheel' }, { id: 'grid', label: 'Aspect grid' }],
+ *   active: this.view,
+ *   onSelect: (v) => { this.view = v; },
+ *   label: 'Natal chart views',
+ *   idPrefix: 'natal',
+ *   controls: true,
+ * })
+ * ```
+ */
+export declare function renderTablist<T extends string>(opts: {
+    items: ReadonlyArray<TablistItem<T>>;
+    active: T;
+    onSelect: (id: T) => void;
+    label: string;
+    idPrefix: string;
+    controls?: boolean;
+}): TemplateResult;
+//# sourceMappingURL=tablist.d.ts.map

package/dist/utils/tablist.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tablist.d.ts","sourceRoot":"","sources":["../../src/utils/tablist.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C,qDAAqD;AACrD,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACrD,EAAE,EAAE,CAAC,CAAC;IACN,KAAK,EAAE,MAAM,CAAC;CACd;AAED;;;;GAIG;AACH,eAAO,MAAM,aAAa,yBAgCzB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,EAAE,IAAI,EAAE;IACrD,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IACrC,MAAM,EAAE,CAAC,CAAC;IACV,QAAQ,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,IAAI,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,cAAc,CA6CjB"}

package/dist/version.d.ts

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

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@roxyapi/ui",
-  "version": "0.5.0",
+  "version": "0.6.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",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "jsdelivr": "./dist/cdn/roxy-ui.js",
+  "unpkg": "./dist/cdn/roxy-ui.js",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/components/dasha-timeline.ts

@@ -134,18 +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);
 			}
-			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);
@@ -232,10 +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>${active.planet} mahadasha interpretation</summary>
+		return html`<div class="interp">
+			<h3>${active.planet} mahadasha</h3>
 			<p>${active.interpretation}</p>
-		</details>`;
+		</div>`;
 	}
 
 	private renderCurrent(d: DashaData) {

package/src/components/divisional-chart.ts

@@ -12,6 +12,7 @@ import {
 } from '../utils/kundli-render.js';
 import { kundliStyles } from '../utils/kundli-styles.js';
 import { MarkupDataController } from '../utils/markup-data.js';
+import { tablistStyles } from '../utils/tablist.js';
 
 /**
  * Divisional chart renderer (D2-D60). Accepts a DivisionalChartResponse and
@@ -26,6 +27,7 @@ export class RoxyDivisionalChart extends LitElement {
 	static styles = [
 		baseStyles,
 		kundliStyles,
+		tablistStyles,
 		css`
 			.division-meta {
 				font-size: var(--roxy-text-sm, 0.875rem);

package/src/components/natal-chart.ts

@@ -15,6 +15,7 @@ import {
 	oppositePoint,
 	polarToCartesian,
 } from '../utils/degree.js';
+import { chevron, disclosureStyles } from '../utils/disclosure.js';
 import {
 	ASPECT_CLASS,
 	formatNumber,
@@ -22,6 +23,7 @@ import {
 } from '../utils/format.js';
 import { MarkupDataController } from '../utils/markup-data.js';
 import { capitalize } from '../utils/string.js';
+import { renderTablist, tablistStyles } from '../utils/tablist.js';
 
 type PlanetEntry = NatalChartResponse['planets'][number];
 type AspectEntry = NatalChartResponse['aspects'][number];
@@ -43,6 +45,8 @@ const ANGLE_LABEL_R = 196;
 export class RoxyNatalChart extends LitElement {
 	static styles = [
 		baseStyles,
+		tablistStyles,
+		disclosureStyles,
 		css`
 			.wrap {
 				width: 100%;
@@ -190,32 +194,6 @@ export class RoxyNatalChart extends LitElement {
 				vertical-align: middle;
 			}
 
-			.tablist {
-				display: flex;
-				gap: 2px;
-				border-bottom: 2px solid var(--roxy-border, #e4e4e7);
-			}
-			.tab {
-				padding: var(--roxy-space-xs, 0.25rem) var(--roxy-space-md, 1rem);
-				font-size: var(--roxy-text-sm, 0.875rem);
-				background: none;
-				border: none;
-				border-bottom: 2px solid transparent;
-				margin-bottom: -2px;
-				cursor: pointer;
-				color: var(--roxy-muted, #71717a);
-				font-family: inherit;
-				transition: color var(--roxy-motion-duration, 200ms) var(--roxy-motion-easing, ease);
-			}
-			.tab[aria-selected='true'] {
-				color: var(--roxy-accent-fg, #b45309);
-				border-bottom-color: var(--roxy-accent, #f59e0b);
-				font-weight: var(--roxy-weight-bold, 600);
-			}
-			.tab:hover:not([aria-selected='true']) {
-				color: var(--roxy-fg, #0a0a0a);
-			}
-
 			.grid-scroll {
 				overflow-x: auto;
 				-webkit-overflow-scrolling: touch;
@@ -356,10 +334,18 @@ export class RoxyNatalChart extends LitElement {
 				cursor: pointer;
 				font-weight: 500;
 				color: var(--roxy-fg, #0f172a);
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				gap: var(--roxy-space-md, 1rem);
+			}
+			.interp-aside {
+				display: inline-flex;
+				align-items: center;
+				gap: 0.6em;
 			}
-			.interp-card summary small {
+			.interp-aside small {
 				color: var(--roxy-muted, #71717a);
-				margin-left: 0.5em;
 				font-weight: 400;
 			}
 			.interp-body {
@@ -438,29 +424,24 @@ export class RoxyNatalChart extends LitElement {
 						: nothing
 				}
 			</header>
+			${renderTablist({
+				items: [
+					{ id: 'wheel', label: 'Wheel' },
+					{ id: 'grid', label: 'Aspect grid' },
+				],
+				active: view,
+				onSelect: (v) => {
+					this.view = v;
+				},
+				label: 'Natal chart views',
+				idPrefix: 'natal',
+				controls: true,
+			})}
 			<div
-				class="tablist"
-				role="tablist"
-				aria-label="Natal chart views"
-				@keydown=${this.onTabKeyDown}
+				id="natal-panel-${view}"
+				role="tabpanel"
+				aria-labelledby="natal-tab-${view}"
 			>
-				${(['wheel', 'grid'] as const).map(
-					(t) => html`<button
-						class="tab"
-						role="tab"
-						id="tab-${t}"
-						aria-selected=${view === t ? 'true' : 'false'}
-						aria-controls="panel-${t}"
-						tabindex=${view === t ? '0' : '-1'}
-						@click=${() => {
-							this.view = t;
-						}}
-					>
-						${t === 'wheel' ? 'Wheel' : 'Aspect grid'}
-					</button>`,
-				)}
-			</div>
-			<div id="panel-${view}" role="tabpanel" aria-labelledby="tab-${view}">
 				${view === 'wheel' ? this.renderWheel(planets, aspects) : this.renderAspectGrid(planets, aspects)}
 			</div>
 			<div class="legend">
@@ -479,18 +460,6 @@ export class RoxyNatalChart extends LitElement {
 		</div>`;
 	}
 
-	private onTabKeyDown(e: KeyboardEvent) {
-		if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return;
-		e.preventDefault();
-		this.view = this.view === 'wheel' ? 'grid' : 'wheel';
-		const next = this.view;
-		requestAnimationFrame(() => {
-			this.shadowRoot
-				?.querySelector<HTMLButtonElement>(`#tab-${next}`)
-				?.focus();
-		});
-	}
-
 	private renderWheel(planets: PlanetEntry[], aspects: AspectEntry[]) {
 		return html`<svg
 			viewBox="0 0 ${SIZE} ${SIZE}"
@@ -880,7 +849,13 @@ export class RoxyNatalChart extends LitElement {
 				const glyph = PLANET_GLYPH[capitalize(p.name)] ?? '';
 				const deg = formatNumber(p.degree ?? 0, 1);
 				return html`<details class="interp-card" name="natal-planet-readings" ?open=${idx === 0}>
-					<summary>${glyph} ${p.name} <small>${p.sign ?? ''} ${deg}</small></summary>
+					<summary>
+						<span>${glyph} ${p.name}</span>
+						<span class="interp-aside">
+							<small>${p.sign ?? ''} ${deg}</small>
+							${chevron()}
+						</span>
+					</summary>
 					<div class="interp-body">
 						${interp.summary ? html`<p class="interp-summary">${interp.summary}</p>` : nothing}
 						${interp.detailed ? html`<p class="interp-detail">${interp.detailed}</p>` : nothing}

package/src/components/transits-table.ts

@@ -1,11 +1,13 @@
 import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import { PLANET_GLYPH, SIGN_GLYPH } from '../tokens/index.js';
 import type { TransitsResponse } from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
+import { chevron, disclosureStyles } from '../utils/disclosure.js';
 import { formatDate, formatNumber, formatTime } from '../utils/format.js';
 import { MarkupDataController } from '../utils/markup-data.js';
 import { capitalize } from '../utils/string.js';
+import { renderTablist, tablistStyles } from '../utils/tablist.js';
 
 /**
  * Transit positions and aspect table. Pass `data` from /astrology/transits.
@@ -16,6 +18,8 @@ import { capitalize } from '../utils/string.js';
 export class RoxyTransitsTable extends LitElement {
 	static styles = [
 		baseStyles,
+		tablistStyles,
+		disclosureStyles,
 		css`
 			.wrap {
 				display: grid;
@@ -226,6 +230,10 @@ export class RoxyTransitsTable extends LitElement {
 	@property({ attribute: false })
 	data: TransitsResponse | null = null;
 
+	/** Which panel is showing: planet positions or the transit-to-natal aspects. */
+	@state()
+	private tab: 'positions' | 'aspects' = 'positions';
+
 	render() {
 		if (!this.data?.transitPlanets?.length) {
 			return html`<div class="roxy-empty" role="status">No transits data</div>`;
@@ -242,31 +250,49 @@ export class RoxyTransitsTable extends LitElement {
 		const dateStr = [formatDate(transitDate), formatTime(transitTime)]
 			.filter(Boolean)
 			.join(' ');
+		const aspectCount = transitAspects?.length ?? 0;
+		const tab = this.tab;
 
-		return html`<div class="wrap" aria-label="Transit positions table">
+		return html`<div class="wrap" aria-label="Transits">
 			<div class="head">
 				<h2 class="title">Transits</h2>
 				${dateStr ? html`<p class="subtitle">${dateStr}</p>` : nothing}
 			</div>
 
-			${summary ? this.renderSummaryPills(summary) : nothing}
-
-			<div>
-				<p class="section-label">Planet positions</p>
-				<div class="overflow-scroll">
-					${this.renderPlanetsTable(transitPlanets)}
-				</div>
-			</div>
-
 			${
-				transitAspects?.length
-					? html`<div>
-						<p class="section-label">Transit aspects</p>
-						<div class="overflow-scroll">
-							${this.renderAspectsList(transitAspects)}
-						</div>
+				aspectCount > 0
+					? html`${renderTablist({
+							items: [
+								{ id: 'positions', label: 'Positions' },
+								{ id: 'aspects', label: `Aspects (${aspectCount})` },
+							],
+							active: tab,
+							onSelect: (v) => {
+								this.tab = v;
+							},
+							label: 'Transit views',
+							idPrefix: 'transits',
+							controls: true,
+						})}
+						<div
+							id="transits-panel-${tab}"
+							role="tabpanel"
+							aria-labelledby="transits-tab-${tab}"
+						>
+							${
+								tab === 'positions'
+									? html`<div class="overflow-scroll">
+										${this.renderPlanetsTable(transitPlanets)}
+									</div>`
+									: html`${summary ? this.renderSummaryPills(summary) : nothing}
+										<div class="overflow-scroll">
+											${this.renderAspectsList(transitAspects ?? [])}
+										</div>`
+							}
+						</div>`
+					: html`<div class="overflow-scroll">
+						${this.renderPlanetsTable(transitPlanets)}
 					</div>`
-					: nothing
 			}
 		</div>`;
 	}
@@ -355,6 +381,7 @@ export class RoxyTransitsTable extends LitElement {
 						<span class="meta">
 							${status} · orb ${formatNumber(a.orb, 2)}° · strength ${formatNumber(a.strength, 1)}
 						</span>
+						${chevron()}
 					</summary>
 					<div class="interp-body">
 						${interp?.summary ? html`<p>${interp.summary}</p>` : nothing}

package/src/components/vedic-kundli.ts

@@ -11,6 +11,7 @@ import {
 } from '../utils/kundli-render.js';
 import { kundliStyles } from '../utils/kundli-styles.js';
 import { MarkupDataController } from '../utils/markup-data.js';
+import { tablistStyles } from '../utils/tablist.js';
 
 /**
  * Vedic kundli (D1 Rashi chart). Pass `data` from /vedic-astrology/birth-chart.
@@ -28,7 +29,7 @@ import { MarkupDataController } from '../utils/markup-data.js';
  */
 @customElement('roxy-vedic-kundli')
 export class RoxyVedicKundli extends LitElement {
-	static styles = [baseStyles, kundliStyles];
+	static styles = [baseStyles, kundliStyles, tablistStyles];
 
 	constructor() {
 		super();

package/src/utils/disclosure.ts

@@ -0,0 +1,62 @@
+import type { TemplateResult } from 'lit';
+import { css, html } from 'lit';
+
+/**
+ * Disclosure chevron for `<details>`/`<summary>` accordions. Replaces the
+ * browser default triangle with a thin chevron that rotates when the host
+ * `<details>` opens. Render it inside the `<summary>` and pair with
+ * {@link disclosureStyles}.
+ */
+export function chevron(): TemplateResult {
+	return html`<svg
+		class="roxy-chevron"
+		viewBox="0 0 16 16"
+		width="14"
+		height="14"
+		aria-hidden="true"
+	>
+		<path
+			d="M4 6l4 4 4-4"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="1.5"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+	</svg>`;
+}
+
+/**
+ * Shared `<details>` accordion styling: hides the native disclosure triangle
+ * and rotates the {@link chevron} 180 degrees when the accordion is open.
+ * Import into any component that renders disclosure accordions so the chevron
+ * looks and behaves identically.
+ */
+export const disclosureStyles = css`
+	summary {
+		list-style: none;
+	}
+	summary::-webkit-details-marker {
+		display: none;
+	}
+	/* Explicit size: components that draw a chart set a global svg { width: 100% }
+	   rule, and an element selector beats the SVG width/height attributes. This
+	   class selector wins back the 14px icon size. */
+	.roxy-chevron {
+		flex-shrink: 0;
+		width: 14px;
+		height: 14px;
+		aspect-ratio: auto;
+		color: var(--roxy-muted, #71717a);
+		transition: transform var(--roxy-motion-duration, 200ms)
+			var(--roxy-motion-easing, ease);
+	}
+	details[open] > summary .roxy-chevron {
+		transform: rotate(180deg);
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.roxy-chevron {
+			transition: none;
+		}
+	}
+`;

package/src/utils/kundli-render.ts

@@ -1,8 +1,9 @@
 import type { TemplateResult } from 'lit';
-import { html, nothing, svg } from 'lit';
+import { nothing, svg } from 'lit';
 import { PLANET_ABBR, SIGN_ABBR, SIGNS_ORDER } from '../tokens/index.js';
 import { longitudeToSignPosition } from './degree.js';
 import { capitalize } from './string.js';
+import { renderTablist } from './tablist.js';
 
 /**
  * Canonical viewBox geometry for every kundli style. The chart is drawn into a
@@ -320,6 +321,11 @@ function renderSouthCell(
 					? svg`<text class="house-num" x=${r.x + r.w - 6} y=${r.y + 12} text-anchor="end" dominant-baseline="central">${houseNum}</text>`
 					: nothing
 			}
+			${
+				isLagna
+					? svg`<text class="lagna-marker" x=${cx} y=${r.y + 26} text-anchor="middle" dominant-baseline="central">Asc</text>`
+					: nothing
+			}
 			${planets.length ? renderPlanetStack(planets, sign, cx, cy + 4, 14) : nothing}
 		</g>
 	`;
@@ -453,9 +459,15 @@ function renderNorthCell(
 	// always stays comfortably inside its triangle or diamond.
 	const rashiOffsetY = Math.min(14, Math.abs(c.y - CENTRE) * 0.45 + 6);
 	const ascOffsetY = rashiOffsetY + 12;
+	// North cells carry only a rasi number by convention. The ascendant also
+	// names its sign so the reader can see which sign rises without translating
+	// the number; other cells stay number-only.
+	const rashiLabel = isLagna
+		? `${rashiNum} · ${SIGN_ABBR[sign] ?? sign.slice(0, 2)}`
+		: `${rashiNum}`;
 	return svg`
 		<g class=${isLagna ? 'cell lagna' : 'cell'}>
-			<text class="rashi-num" x=${c.x} y=${c.y - rashiOffsetY} text-anchor="middle" dominant-baseline="central">${rashiNum}</text>
+			<text class="rashi-num" x=${c.x} y=${c.y - rashiOffsetY} text-anchor="middle" dominant-baseline="central">${rashiLabel}</text>
 			${
 				isLagna
 					? svg`<text class="lagna-marker" x=${c.x} y=${c.y - ascOffsetY} text-anchor="middle" dominant-baseline="central">Asc</text>`
@@ -705,37 +717,11 @@ export function renderKundliStyleTablist(
 	active: ChartStyle,
 	setStyle: (next: ChartStyle) => void,
 ): TemplateResult {
-	const onKeyDown = (e: KeyboardEvent) => {
-		const idx = CHART_STYLES.findIndex((s) => s.id === active);
-		if (e.key === 'ArrowRight') {
-			e.preventDefault();
-			const next = CHART_STYLES[(idx + 1) % CHART_STYLES.length];
-			if (next) setStyle(next.id);
-		} else if (e.key === 'ArrowLeft') {
-			e.preventDefault();
-			const next =
-				CHART_STYLES[(idx - 1 + CHART_STYLES.length) % CHART_STYLES.length];
-			if (next) setStyle(next.id);
-		}
-	};
-	return html`<div
-		class="kundli-tablist"
-		role="tablist"
-		aria-label="Kundli style"
-		@keydown=${onKeyDown}
-	>
-		${CHART_STYLES.map(
-			(s) => html`<button
-				type="button"
-				class="kundli-tab"
-				role="tab"
-				id="kundli-tab-${s.id}"
-				aria-selected=${active === s.id ? 'true' : 'false'}
-				tabindex=${active === s.id ? '0' : '-1'}
-				@click=${() => setStyle(s.id)}
-			>
-				${s.label}
-			</button>`,
-		)}
-	</div>`;
+	return renderTablist({
+		items: CHART_STYLES,
+		active,
+		onSelect: setStyle,
+		label: 'Kundli style',
+		idPrefix: 'kundli',
+	});
 }

package/src/utils/kundli-styles.ts

@@ -28,37 +28,6 @@ export const kundliStyles = css`
 		font-weight: var(--roxy-weight-bold, 600);
 		margin: 0;
 	}
-	.kundli-tablist {
-		display: inline-flex;
-		gap: 2px;
-		border-bottom: 2px solid var(--roxy-border, #e4e4e7);
-	}
-	.kundli-tab {
-		padding: var(--roxy-space-xs, 0.25rem) var(--roxy-space-md, 1rem);
-		font-size: var(--roxy-text-sm, 0.875rem);
-		background: none;
-		border: none;
-		border-bottom: 2px solid transparent;
-		margin-bottom: -2px;
-		cursor: pointer;
-		color: var(--roxy-muted, #71717a);
-		font-family: inherit;
-		transition: color var(--roxy-motion-duration, 200ms)
-			var(--roxy-motion-easing, ease);
-	}
-	.kundli-tab[aria-selected='true'] {
-		color: var(--roxy-accent-fg, #b45309);
-		border-bottom-color: var(--roxy-accent, #f59e0b);
-		font-weight: var(--roxy-weight-bold, 600);
-	}
-	.kundli-tab:hover:not([aria-selected='true']) {
-		color: var(--roxy-fg, #0a0a0a);
-	}
-	.kundli-tab:focus-visible {
-		outline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));
-		outline-offset: 2px;
-		border-radius: 4px;
-	}
 	svg {
 		display: block;
 		width: 100%;