@roxyapi/ui 0.3.1 → 0.4.1

package/dist/components/tarot-spread.js

@@ -97,6 +97,20 @@ var baseStyles = css`
 		outline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));
 		outline-offset: 2px;
 	}
+
+	/* Force the text-style variant on every Unicode glyph in the component.
+	 * macOS and iOS substitute coloured emoji glyphs for the planetary and
+	 * gender Unicode code points (Mars, Venus, Mercury, etc.) when the
+	 * system colour-emoji font wins font selection. The text-style variant
+	 * keeps glyphs monochrome so they inherit the surrounding fill colour
+	 * and match the brand palette consistently across platforms.
+	 *
+	 * font-variant-emoji is part of CSS Fonts 4 (Safari 17+, Chrome 134+,
+	 * Firefox 139+). On older browsers the rule is silently ignored.
+	 */
+	:host {
+		font-variant-emoji: text;
+	}
 `;
 
 // packages/ui/src/components/tarot-spread.ts

package/dist/components/tarot-spread.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/tarot-spread.ts", "../../src/utils/base-styles.ts"],
-  "sourcesContent": ["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport type {\n\tCastCelticCrossResponse,\n\tCastLoveSpreadResponse,\n\tCastReadingResponse,\n\tCastThreeCardResponse,\n\tCastYesNoResponse,\n\tDrawCardsResponse,\n} from '../types/index.js';\nimport { baseStyles } from '../utils/base-styles.js';\n\ntype TarotSpreadData =\n\t| CastThreeCardResponse\n\t| CastCelticCrossResponse\n\t| CastLoveSpreadResponse\n\t| CastYesNoResponse\n\t| CastReadingResponse\n\t| DrawCardsResponse;\n\n/**\n * Tarot spread card. Renders /tarot/spreads/{three-card,celtic-cross,love},\n * /tarot/yes-no, /tarot/draw responses.\n */\n@customElement('roxy-tarot-spread')\nexport class RoxyTarotSpread extends LitElement {\n\tstatic styles = [\n\t\tbaseStyles,\n\t\tcss`\n\t\t\t.wrap {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgap: var(--roxy-space-md, 1rem);\n\t\t\t}\n\n\t\t\t.head {\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: space-between;\n\t\t\t\tgap: var(--roxy-space-md, 1rem);\n\t\t\t\tflex-wrap: wrap;\n\t\t\t\talign-items: baseline;\n\t\t\t}\n\t\t\t.title {\n\t\t\t\tmargin: 0;\n\t\t\t\tfont-size: var(--roxy-text-lg, 1.125rem);\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t\ttext-transform: capitalize;\n\t\t\t}\n\t\t\t.question {\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t\tfont-style: italic;\n\t\t\t}\n\n\t\t\t.answer {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpadding: 4px 14px;\n\t\t\t\tborder-radius: var(--roxy-radius-full, 9999px);\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t\tfont-size: var(--roxy-text-base, 1rem);\n\t\t\t\ttext-transform: uppercase;\n\t\t\t\tletter-spacing: 0.06em;\n\t\t\t}\n\t\t\t.answer.yes {\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-success, #16a34a) 16%, transparent);\n\t\t\t\tcolor: var(--roxy-success-fg, #166534);\n\t\t\t}\n\t\t\t.answer.no {\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-danger, #dc2626) 16%, transparent);\n\t\t\t\tcolor: var(--roxy-danger-fg, #991b1b);\n\t\t\t}\n\t\t\t.answer.maybe {\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-warning, #ea580c) 16%, transparent);\n\t\t\t\tcolor: var(--roxy-warning-fg, #9a3412);\n\t\t\t}\n\n\t\t\t.grid {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgrid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));\n\t\t\t\tgap: var(--roxy-space-md, 1rem);\n\t\t\t}\n\n\t\t\t.card {\n\t\t\t\tborder: 1px solid var(--roxy-border, #e4e4e7);\n\t\t\t\tborder-radius: var(--roxy-radius-md, 8px);\n\t\t\t\tpadding: var(--roxy-space-sm, 0.5rem);\n\t\t\t\tbackground: var(--roxy-bg, #fff);\n\t\t\t\tdisplay: grid;\n\t\t\t\tgap: var(--roxy-space-xs, 0.25rem);\n\t\t\t}\n\t\t\t.label {\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\ttext-transform: uppercase;\n\t\t\t\tletter-spacing: 0.06em;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\t\t\t.image {\n\t\t\t\twidth: 100%;\n\t\t\t\taspect-ratio: 0.6;\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent);\n\t\t\t\tborder-radius: var(--roxy-radius-sm, 4px);\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\t.image img {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tobject-fit: cover;\n\t\t\t\ttransition:\n\t\t\t\t\ttransform var(--roxy-motion-duration, 200ms)\n\t\t\t\t\tvar(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1));\n\t\t\t}\n\t\t\t.image img.reversed {\n\t\t\t\ttransform: rotate(180deg);\n\t\t\t}\n\t\t\t.name {\n\t\t\t\tmargin: 0;\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t}\n\t\t\t.interp {\n\t\t\t\tmargin: 0;\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t\tcolor: var(--roxy-secondary, #475569);\n\t\t\t}\n\n\t\t\t.reading {\n\t\t\t\tmargin: 0;\n\t\t\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ attribute: false })\n\tdata: TarotSpreadData | null = null;\n\n\t@property({ type: String, reflect: true })\n\tspread: 'three-card' | 'celtic-cross' | 'love' | 'yes-no' | 'draw' =\n\t\t'three-card';\n\n\trender() {\n\t\tconst d = this.data;\n\t\tif (!d)\n\t\t\treturn html`<div class=\"roxy-empty\" role=\"status\">No tarot spread</div>`;\n\n\t\tconst isYesNo = 'answer' in d;\n\t\tconst isDrawn = 'cards' in d && !('spread' in d);\n\t\tconst positions = isDrawn\n\t\t\t? []\n\t\t\t: 'positions' in d\n\t\t\t\t? (d.positions ?? [])\n\t\t\t\t: [];\n\t\tconst cards = isDrawn && 'cards' in d ? (d as DrawCardsResponse).cards : [];\n\t\tconst answer = isYesNo ? (d as CastYesNoResponse).answer : undefined;\n\t\tconst strength = isYesNo ? (d as CastYesNoResponse).strength : undefined;\n\t\tconst spreadLabel =\n\t\t\t'spread' in d\n\t\t\t\t? (d as CastThreeCardResponse).spread\n\t\t\t\t: this.spread.replace(/-/g, ' ');\n\t\tconst question =\n\t\t\t'question' in d ? (d as CastThreeCardResponse).question : undefined;\n\t\tconst summary =\n\t\t\t'summary' in d ? (d as CastThreeCardResponse).summary : undefined;\n\t\tconst yesNoInterp = isYesNo\n\t\t\t? (d as CastYesNoResponse).interpretation\n\t\t\t: undefined;\n\t\tconst answerClass = answer\n\t\t\t? answer.toLowerCase().replace(/[^a-z]/g, '')\n\t\t\t: '';\n\n\t\treturn html`<article class=\"wrap\" aria-label=\"Tarot spread\">\n\t\t\t<header class=\"head\">\n\t\t\t\t<h2 class=\"title\">${spreadLabel}</h2>\n\t\t\t\t${question ? html`<span class=\"question\">\"${question}\"</span>` : nothing}\n\t\t\t</header>\n\t\t\t${\n\t\t\t\tisYesNo\n\t\t\t\t\t? html`<div>\n\t\t\t\t\t\t<span class=${`answer ${answerClass}`}>${answer}</span>\n\t\t\t\t\t\t${strength ? html`<small> \u00B7 ${strength}</small>` : nothing}\n\t\t\t\t\t</div>`\n\t\t\t\t\t: nothing\n\t\t\t}\n\t\t\t${\n\t\t\t\tpositions.length > 0\n\t\t\t\t\t? html`<div class=\"grid\">\n\t\t\t\t\t\t${positions.map(\n\t\t\t\t\t\t\t(p) => html`<div class=\"card\">\n\t\t\t\t\t\t\t\t<p class=\"label\">${p.name ?? ''}</p>\n\t\t\t\t\t\t\t\t<div class=\"image\">\n\t\t\t\t\t\t\t\t\t${\n\t\t\t\t\t\t\t\t\t\tp.card?.imageUrl\n\t\t\t\t\t\t\t\t\t\t\t? html`<img\n\t\t\t\t\t\t\t\t\t\t\t\tsrc=${p.card.imageUrl}\n\t\t\t\t\t\t\t\t\t\t\t\talt=${p.card.name ?? 'tarot card'}\n\t\t\t\t\t\t\t\t\t\t\t\tclass=${p.card.reversed ? 'reversed' : ''}\n\t\t\t\t\t\t\t\t\t\t\t/>`\n\t\t\t\t\t\t\t\t\t\t\t: html`${p.card?.name ?? '?'}`\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<p class=\"name\">\n\t\t\t\t\t\t\t\t\t${p.card?.name ?? ''}\n\t\t\t\t\t\t\t\t\t${p.card?.reversed ? html`<small>(reversed)</small>` : nothing}\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t${p.interpretation ? html`<p class=\"interp\">${p.interpretation}</p>` : nothing}\n\t\t\t\t\t\t\t</div>`,\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>`\n\t\t\t\t\t: nothing\n\t\t\t}\n\t\t\t${\n\t\t\t\tcards.length > 0\n\t\t\t\t\t? html`<div class=\"grid\">\n\t\t\t\t\t\t${cards.map(\n\t\t\t\t\t\t\t(c) => html`<div class=\"card\">\n\t\t\t\t\t\t\t\t<div class=\"image\">\n\t\t\t\t\t\t\t\t\t${\n\t\t\t\t\t\t\t\t\t\tc.imageUrl\n\t\t\t\t\t\t\t\t\t\t\t? html`<img\n\t\t\t\t\t\t\t\t\t\t\t\tsrc=${c.imageUrl}\n\t\t\t\t\t\t\t\t\t\t\t\talt=${c.name ?? 'tarot card'}\n\t\t\t\t\t\t\t\t\t\t\t\tclass=${c.reversed ? 'reversed' : ''}\n\t\t\t\t\t\t\t\t\t\t\t/>`\n\t\t\t\t\t\t\t\t\t\t\t: html`${c.name ?? '?'}`\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<p class=\"name\">\n\t\t\t\t\t\t\t\t\t${c.name ?? ''}\n\t\t\t\t\t\t\t\t\t${c.reversed ? html`<small>(reversed)</small>` : nothing}\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t${c.meaning ? html`<p class=\"interp\">${c.meaning}</p>` : nothing}\n\t\t\t\t\t\t\t</div>`,\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>`\n\t\t\t\t\t: nothing\n\t\t\t}\n\t\t\t${summary ? html`<p class=\"reading\">${summary}</p>` : nothing}\n\t\t\t${yesNoInterp ? html`<p class=\"reading\">${yesNoInterp}</p>` : nothing}\n\t\t</article>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'roxy-tarot-spread': RoxyTarotSpread;\n\t}\n}\n", "import { css } from 'lit';\n\n/**\n * Shared host styles every component pulls in. Sets default font, color,\n * container query support, and the entry fade-in.\n */\nexport const baseStyles = css`\n\t:host {\n\t\tdisplay: block;\n\t\tcontainer-type: inline-size;\n\t\tfont-family: var(\n\t\t\t--roxy-font-sans,\n\t\t\tsystem-ui,\n\t\t\t-apple-system,\n\t\t\tBlinkMacSystemFont,\n\t\t\t'Segoe UI',\n\t\t\tRoboto,\n\t\t\tsans-serif\n\t\t);\n\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\tbackground: transparent;\n\t\tfont-size: var(--roxy-text-base, 1rem);\n\t\tline-height: var(--roxy-leading-normal, 1.5);\n\t\tanimation: roxy-fade-in var(--roxy-motion-duration, 200ms)\n\t\t\tvar(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1)) both;\n\t}\n\n\t*,\n\t*::before,\n\t*::after {\n\t\tbox-sizing: border-box;\n\t}\n\n\t@keyframes roxy-fade-in {\n\t\tfrom {\n\t\t\topacity: 0;\n\t\t\ttransform: translateY(2px);\n\t\t}\n\t\tto {\n\t\t\topacity: 1;\n\t\t\ttransform: translateY(0);\n\t\t}\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t:host {\n\t\t\tanimation: none;\n\t\t}\n\t}\n\n\t.roxy-skeleton {\n\t\tbackground: linear-gradient(\n\t\t\t90deg,\n\t\t\tvar(--roxy-border, #e4e4e7) 0%,\n\t\t\tcolor-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent) 50%,\n\t\t\tvar(--roxy-border, #e4e4e7) 100%\n\t\t);\n\t\tbackground-size: 200% 100%;\n\t\tanimation: roxy-shimmer 1.4s ease-in-out infinite;\n\t\tborder-radius: var(--roxy-radius-md, 8px);\n\t}\n\n\t@keyframes roxy-shimmer {\n\t\t0% {\n\t\t\tbackground-position: 200% 0;\n\t\t}\n\t\t100% {\n\t\t\tbackground-position: -200% 0;\n\t\t}\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.roxy-skeleton {\n\t\t\tanimation: none;\n\t\t}\n\t}\n\n\t.roxy-empty {\n\t\tpadding: var(--roxy-space-lg, 1.5rem);\n\t\tcolor: var(--roxy-muted, #71717a);\n\t\ttext-align: center;\n\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t}\n\n\t:host(:focus-within) .roxy-card {\n\t\toutline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));\n\t\toutline-offset: 2px;\n\t}\n`;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport type {\n\tCastCelticCrossResponse,\n\tCastLoveSpreadResponse,\n\tCastReadingResponse,\n\tCastThreeCardResponse,\n\tCastYesNoResponse,\n\tDrawCardsResponse,\n} from '../types/index.js';\nimport { baseStyles } from '../utils/base-styles.js';\n\ntype TarotSpreadData =\n\t| CastThreeCardResponse\n\t| CastCelticCrossResponse\n\t| CastLoveSpreadResponse\n\t| CastYesNoResponse\n\t| CastReadingResponse\n\t| DrawCardsResponse;\n\n/**\n * Tarot spread card. Renders /tarot/spreads/{three-card,celtic-cross,love},\n * /tarot/yes-no, /tarot/draw responses.\n */\n@customElement('roxy-tarot-spread')\nexport class RoxyTarotSpread extends LitElement {\n\tstatic styles = [\n\t\tbaseStyles,\n\t\tcss`\n\t\t\t.wrap {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgap: var(--roxy-space-md, 1rem);\n\t\t\t}\n\n\t\t\t.head {\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: space-between;\n\t\t\t\tgap: var(--roxy-space-md, 1rem);\n\t\t\t\tflex-wrap: wrap;\n\t\t\t\talign-items: baseline;\n\t\t\t}\n\t\t\t.title {\n\t\t\t\tmargin: 0;\n\t\t\t\tfont-size: var(--roxy-text-lg, 1.125rem);\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t\ttext-transform: capitalize;\n\t\t\t}\n\t\t\t.question {\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t\tfont-style: italic;\n\t\t\t}\n\n\t\t\t.answer {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpadding: 4px 14px;\n\t\t\t\tborder-radius: var(--roxy-radius-full, 9999px);\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t\tfont-size: var(--roxy-text-base, 1rem);\n\t\t\t\ttext-transform: uppercase;\n\t\t\t\tletter-spacing: 0.06em;\n\t\t\t}\n\t\t\t.answer.yes {\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-success, #16a34a) 16%, transparent);\n\t\t\t\tcolor: var(--roxy-success-fg, #166534);\n\t\t\t}\n\t\t\t.answer.no {\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-danger, #dc2626) 16%, transparent);\n\t\t\t\tcolor: var(--roxy-danger-fg, #991b1b);\n\t\t\t}\n\t\t\t.answer.maybe {\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-warning, #ea580c) 16%, transparent);\n\t\t\t\tcolor: var(--roxy-warning-fg, #9a3412);\n\t\t\t}\n\n\t\t\t.grid {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgrid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));\n\t\t\t\tgap: var(--roxy-space-md, 1rem);\n\t\t\t}\n\n\t\t\t.card {\n\t\t\t\tborder: 1px solid var(--roxy-border, #e4e4e7);\n\t\t\t\tborder-radius: var(--roxy-radius-md, 8px);\n\t\t\t\tpadding: var(--roxy-space-sm, 0.5rem);\n\t\t\t\tbackground: var(--roxy-bg, #fff);\n\t\t\t\tdisplay: grid;\n\t\t\t\tgap: var(--roxy-space-xs, 0.25rem);\n\t\t\t}\n\t\t\t.label {\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\ttext-transform: uppercase;\n\t\t\t\tletter-spacing: 0.06em;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\t\t\t.image {\n\t\t\t\twidth: 100%;\n\t\t\t\taspect-ratio: 0.6;\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent);\n\t\t\t\tborder-radius: var(--roxy-radius-sm, 4px);\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\t.image img {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tobject-fit: cover;\n\t\t\t\ttransition:\n\t\t\t\t\ttransform var(--roxy-motion-duration, 200ms)\n\t\t\t\t\tvar(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1));\n\t\t\t}\n\t\t\t.image img.reversed {\n\t\t\t\ttransform: rotate(180deg);\n\t\t\t}\n\t\t\t.name {\n\t\t\t\tmargin: 0;\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t}\n\t\t\t.interp {\n\t\t\t\tmargin: 0;\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t\tcolor: var(--roxy-secondary, #475569);\n\t\t\t}\n\n\t\t\t.reading {\n\t\t\t\tmargin: 0;\n\t\t\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ attribute: false })\n\tdata: TarotSpreadData | null = null;\n\n\t@property({ type: String, reflect: true })\n\tspread: 'three-card' | 'celtic-cross' | 'love' | 'yes-no' | 'draw' =\n\t\t'three-card';\n\n\trender() {\n\t\tconst d = this.data;\n\t\tif (!d)\n\t\t\treturn html`<div class=\"roxy-empty\" role=\"status\">No tarot spread</div>`;\n\n\t\tconst isYesNo = 'answer' in d;\n\t\tconst isDrawn = 'cards' in d && !('spread' in d);\n\t\tconst positions = isDrawn\n\t\t\t? []\n\t\t\t: 'positions' in d\n\t\t\t\t? (d.positions ?? [])\n\t\t\t\t: [];\n\t\tconst cards = isDrawn && 'cards' in d ? (d as DrawCardsResponse).cards : [];\n\t\tconst answer = isYesNo ? (d as CastYesNoResponse).answer : undefined;\n\t\tconst strength = isYesNo ? (d as CastYesNoResponse).strength : undefined;\n\t\tconst spreadLabel =\n\t\t\t'spread' in d\n\t\t\t\t? (d as CastThreeCardResponse).spread\n\t\t\t\t: this.spread.replace(/-/g, ' ');\n\t\tconst question =\n\t\t\t'question' in d ? (d as CastThreeCardResponse).question : undefined;\n\t\tconst summary =\n\t\t\t'summary' in d ? (d as CastThreeCardResponse).summary : undefined;\n\t\tconst yesNoInterp = isYesNo\n\t\t\t? (d as CastYesNoResponse).interpretation\n\t\t\t: undefined;\n\t\tconst answerClass = answer\n\t\t\t? answer.toLowerCase().replace(/[^a-z]/g, '')\n\t\t\t: '';\n\n\t\treturn html`<article class=\"wrap\" aria-label=\"Tarot spread\">\n\t\t\t<header class=\"head\">\n\t\t\t\t<h2 class=\"title\">${spreadLabel}</h2>\n\t\t\t\t${question ? html`<span class=\"question\">\"${question}\"</span>` : nothing}\n\t\t\t</header>\n\t\t\t${\n\t\t\t\tisYesNo\n\t\t\t\t\t? html`<div>\n\t\t\t\t\t\t<span class=${`answer ${answerClass}`}>${answer}</span>\n\t\t\t\t\t\t${strength ? html`<small> \u00B7 ${strength}</small>` : nothing}\n\t\t\t\t\t</div>`\n\t\t\t\t\t: nothing\n\t\t\t}\n\t\t\t${\n\t\t\t\tpositions.length > 0\n\t\t\t\t\t? html`<div class=\"grid\">\n\t\t\t\t\t\t${positions.map(\n\t\t\t\t\t\t\t(p) => html`<div class=\"card\">\n\t\t\t\t\t\t\t\t<p class=\"label\">${p.name ?? ''}</p>\n\t\t\t\t\t\t\t\t<div class=\"image\">\n\t\t\t\t\t\t\t\t\t${\n\t\t\t\t\t\t\t\t\t\tp.card?.imageUrl\n\t\t\t\t\t\t\t\t\t\t\t? html`<img\n\t\t\t\t\t\t\t\t\t\t\t\tsrc=${p.card.imageUrl}\n\t\t\t\t\t\t\t\t\t\t\t\talt=${p.card.name ?? 'tarot card'}\n\t\t\t\t\t\t\t\t\t\t\t\tclass=${p.card.reversed ? 'reversed' : ''}\n\t\t\t\t\t\t\t\t\t\t\t/>`\n\t\t\t\t\t\t\t\t\t\t\t: html`${p.card?.name ?? '?'}`\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<p class=\"name\">\n\t\t\t\t\t\t\t\t\t${p.card?.name ?? ''}\n\t\t\t\t\t\t\t\t\t${p.card?.reversed ? html`<small>(reversed)</small>` : nothing}\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t${p.interpretation ? html`<p class=\"interp\">${p.interpretation}</p>` : nothing}\n\t\t\t\t\t\t\t</div>`,\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>`\n\t\t\t\t\t: nothing\n\t\t\t}\n\t\t\t${\n\t\t\t\tcards.length > 0\n\t\t\t\t\t? html`<div class=\"grid\">\n\t\t\t\t\t\t${cards.map(\n\t\t\t\t\t\t\t(c) => html`<div class=\"card\">\n\t\t\t\t\t\t\t\t<div class=\"image\">\n\t\t\t\t\t\t\t\t\t${\n\t\t\t\t\t\t\t\t\t\tc.imageUrl\n\t\t\t\t\t\t\t\t\t\t\t? html`<img\n\t\t\t\t\t\t\t\t\t\t\t\tsrc=${c.imageUrl}\n\t\t\t\t\t\t\t\t\t\t\t\talt=${c.name ?? 'tarot card'}\n\t\t\t\t\t\t\t\t\t\t\t\tclass=${c.reversed ? 'reversed' : ''}\n\t\t\t\t\t\t\t\t\t\t\t/>`\n\t\t\t\t\t\t\t\t\t\t\t: html`${c.name ?? '?'}`\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<p class=\"name\">\n\t\t\t\t\t\t\t\t\t${c.name ?? ''}\n\t\t\t\t\t\t\t\t\t${c.reversed ? html`<small>(reversed)</small>` : nothing}\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t${c.meaning ? html`<p class=\"interp\">${c.meaning}</p>` : nothing}\n\t\t\t\t\t\t\t</div>`,\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>`\n\t\t\t\t\t: nothing\n\t\t\t}\n\t\t\t${summary ? html`<p class=\"reading\">${summary}</p>` : nothing}\n\t\t\t${yesNoInterp ? html`<p class=\"reading\">${yesNoInterp}</p>` : nothing}\n\t\t</article>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'roxy-tarot-spread': RoxyTarotSpread;\n\t}\n}\n", "import { css } from 'lit';\n\n/**\n * Shared host styles every component pulls in. Sets default font, color,\n * container query support, and the entry fade-in.\n */\nexport const baseStyles = css`\n\t:host {\n\t\tdisplay: block;\n\t\tcontainer-type: inline-size;\n\t\tfont-family: var(\n\t\t\t--roxy-font-sans,\n\t\t\tsystem-ui,\n\t\t\t-apple-system,\n\t\t\tBlinkMacSystemFont,\n\t\t\t'Segoe UI',\n\t\t\tRoboto,\n\t\t\tsans-serif\n\t\t);\n\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\tbackground: transparent;\n\t\tfont-size: var(--roxy-text-base, 1rem);\n\t\tline-height: var(--roxy-leading-normal, 1.5);\n\t\tanimation: roxy-fade-in var(--roxy-motion-duration, 200ms)\n\t\t\tvar(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1)) both;\n\t}\n\n\t*,\n\t*::before,\n\t*::after {\n\t\tbox-sizing: border-box;\n\t}\n\n\t@keyframes roxy-fade-in {\n\t\tfrom {\n\t\t\topacity: 0;\n\t\t\ttransform: translateY(2px);\n\t\t}\n\t\tto {\n\t\t\topacity: 1;\n\t\t\ttransform: translateY(0);\n\t\t}\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t:host {\n\t\t\tanimation: none;\n\t\t}\n\t}\n\n\t.roxy-skeleton {\n\t\tbackground: linear-gradient(\n\t\t\t90deg,\n\t\t\tvar(--roxy-border, #e4e4e7) 0%,\n\t\t\tcolor-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent) 50%,\n\t\t\tvar(--roxy-border, #e4e4e7) 100%\n\t\t);\n\t\tbackground-size: 200% 100%;\n\t\tanimation: roxy-shimmer 1.4s ease-in-out infinite;\n\t\tborder-radius: var(--roxy-radius-md, 8px);\n\t}\n\n\t@keyframes roxy-shimmer {\n\t\t0% {\n\t\t\tbackground-position: 200% 0;\n\t\t}\n\t\t100% {\n\t\t\tbackground-position: -200% 0;\n\t\t}\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.roxy-skeleton {\n\t\t\tanimation: none;\n\t\t}\n\t}\n\n\t.roxy-empty {\n\t\tpadding: var(--roxy-space-lg, 1.5rem);\n\t\tcolor: var(--roxy-muted, #71717a);\n\t\ttext-align: center;\n\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t}\n\n\t:host(:focus-within) .roxy-card {\n\t\toutline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));\n\t\toutline-offset: 2px;\n\t}\n\n\t/* Force the text-style variant on every Unicode glyph in the component.\n\t * macOS and iOS substitute coloured emoji glyphs for the planetary and\n\t * gender Unicode code points (Mars, Venus, Mercury, etc.) when the\n\t * system colour-emoji font wins font selection. The text-style variant\n\t * keeps glyphs monochrome so they inherit the surrounding fill colour\n\t * and match the brand palette consistently across platforms.\n\t *\n\t * font-variant-emoji is part of CSS Fonts 4 (Safari 17+, Chrome 134+,\n\t * Firefox 139+). On older browsers the rule is silently ignored.\n\t */\n\t:host {\n\t\tfont-variant-emoji: text;\n\t}\n`;\n"],
+  "mappings": "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",
   "names": ["css", "css"]
 }

package/dist/components/transits-table.js

@@ -154,6 +154,20 @@ var baseStyles = css`
 		outline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));
 		outline-offset: 2px;
 	}
+
+	/* Force the text-style variant on every Unicode glyph in the component.
+	 * macOS and iOS substitute coloured emoji glyphs for the planetary and
+	 * gender Unicode code points (Mars, Venus, Mercury, etc.) when the
+	 * system colour-emoji font wins font selection. The text-style variant
+	 * keeps glyphs monochrome so they inherit the surrounding fill colour
+	 * and match the brand palette consistently across platforms.
+	 *
+	 * font-variant-emoji is part of CSS Fonts 4 (Safari 17+, Chrome 134+,
+	 * Firefox 139+). On older browsers the rule is silently ignored.
+	 */
+	:host {
+		font-variant-emoji: text;
+	}
 `;
 
 // packages/ui/src/utils/format.ts

package/dist/components/transits-table.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/transits-table.ts", "../../src/tokens/index.ts", "../../src/utils/base-styles.ts", "../../src/utils/format.ts", "../../src/utils/string.ts"],
-  "sourcesContent": ["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { PLANET_GLYPH, SIGN_GLYPH } from '../tokens/index.js';\nimport type { TransitsResponse } from '../types/index.js';\nimport { baseStyles } from '../utils/base-styles.js';\nimport { formatDate, formatNumber, formatTime } from '../utils/format.js';\nimport { capitalize } from '../utils/string.js';\n\n/**\n * Transit positions and aspect table. Pass `data` from /astrology/transits.\n * When natalChart is included in the request, `data.transitAspects` and\n * `data.summary` are present and rendered automatically.\n */\n@customElement('roxy-transits-table')\nexport class RoxyTransitsTable extends LitElement {\n\tstatic styles = [\n\t\tbaseStyles,\n\t\tcss`\n\t\t\t.wrap {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgap: var(--roxy-space-md, 1rem);\n\t\t\t}\n\n\t\t\t.head {\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: space-between;\n\t\t\t\talign-items: baseline;\n\t\t\t\tgap: var(--roxy-space-md, 1rem);\n\t\t\t\tflex-wrap: wrap;\n\t\t\t}\n\n\t\t\t.title {\n\t\t\t\tfont-size: var(--roxy-text-lg, 1.125rem);\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t.subtitle {\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t.summary-pills {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-wrap: wrap;\n\t\t\t\tgap: var(--roxy-space-sm, 0.5rem);\n\t\t\t}\n\n\t\t\t.pill {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\talign-items: center;\n\t\t\t\tgap: 4px;\n\t\t\t\tpadding: 2px var(--roxy-space-sm, 0.5rem);\n\t\t\t\tborder-radius: var(--roxy-radius-full, 9999px);\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t\tborder: 1px solid currentColor;\n\t\t\t}\n\n\t\t\t.pill--muted {\n\t\t\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent);\n\t\t\t}\n\n\t\t\t.pill--success {\n\t\t\t\tcolor: var(--roxy-success-fg, #166534);\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-success, #16a34a) 10%, transparent);\n\t\t\t}\n\n\t\t\t.pill--danger {\n\t\t\t\tcolor: var(--roxy-danger-fg, #991b1b);\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-danger, #dc2626) 10%, transparent);\n\t\t\t}\n\n\t\t\ttable {\n\t\t\t\twidth: 100%;\n\t\t\t\tborder-collapse: collapse;\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t}\n\n\t\t\tth,\n\t\t\ttd {\n\t\t\t\tpadding: var(--roxy-space-sm, 0.5rem);\n\t\t\t\tborder-bottom: 1px solid var(--roxy-border, #e4e4e7);\n\t\t\t\ttext-align: left;\n\t\t\t}\n\n\t\t\tth {\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t\ttext-transform: uppercase;\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t\tletter-spacing: 0.06em;\n\t\t\t}\n\n\t\t\t.section-label {\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\ttext-transform: uppercase;\n\t\t\t\tletter-spacing: 0.06em;\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t\tmargin: 0 0 var(--roxy-space-xs, 0.25rem) 0;\n\t\t\t}\n\n\t\t\t.glyph {\n\t\t\t\tfont-size: 1.1em;\n\t\t\t\tmargin-right: 2px;\n\t\t\t\tline-height: 1;\n\t\t\t}\n\n\t\t\t.planet-cell {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tgap: 4px;\n\t\t\t\twhite-space: nowrap;\n\t\t\t}\n\n\t\t\t.retro-badge {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tfont-size: 0.7em;\n\t\t\t\tpadding: 1px 4px;\n\t\t\t\tborder-radius: var(--roxy-radius-sm, 4px);\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-warning, #ea580c) 12%, transparent);\n\t\t\t\tcolor: var(--roxy-warning-fg, #9a3412);\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t\tmargin-left: 2px;\n\t\t\t\tvertical-align: middle;\n\t\t\t}\n\n\t\t\t.speed {\n\t\t\t\tfont-variant-numeric: tabular-nums;\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\twhite-space: nowrap;\n\t\t\t}\n\n\t\t\t.speed-arrow {\n\t\t\t\tfont-size: 0.85em;\n\t\t\t}\n\n\t\t\ttd.num {\n\t\t\t\tfont-variant-numeric: tabular-nums;\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t}\n\n\t\t\t.overflow-scroll {\n\t\t\t\toverflow-x: auto;\n\t\t\t\t-webkit-overflow-scrolling: touch;\n\t\t\t}\n\n\t\t\t.aspect-card {\n\t\t\t\tborder: 1px solid var(--roxy-border, #e4e4e7);\n\t\t\t\tborder-radius: var(--roxy-radius-md, 8px);\n\t\t\t\tpadding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);\n\t\t\t\tmargin-bottom: var(--roxy-space-xs, 0.25rem);\n\t\t\t}\n\t\t\t.aspect-card summary {\n\t\t\t\tcursor: pointer;\n\t\t\t\tfont-weight: 500;\n\t\t\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-wrap: wrap;\n\t\t\t\talign-items: center;\n\t\t\t\tgap: 0.5em;\n\t\t\t}\n\t\t\t.aspect-card summary .meta {\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\tfont-weight: 400;\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t\tmargin-left: auto;\n\t\t\t\tfont-variant-numeric: tabular-nums;\n\t\t\t}\n\t\t\t.aspect-card .interp-body {\n\t\t\t\tmargin-top: var(--roxy-space-xs, 0.25rem);\n\t\t\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t\tline-height: 1.45;\n\t\t\t}\n\t\t\t.aspect-card .interp-body p {\n\t\t\t\tmargin: 0 0 var(--roxy-space-xs, 0.25rem);\n\t\t\t}\n\t\t\t.interp-keywords {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-wrap: wrap;\n\t\t\t\tgap: 0.25rem;\n\t\t\t\tmargin-top: 0.5rem;\n\t\t\t}\n\t\t\t.interp-keywords .kw {\n\t\t\t\tpadding: 1px 8px;\n\t\t\t\tborder-radius: 9999px;\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-accent, #f59e0b) 14%, transparent);\n\t\t\t\tcolor: var(--roxy-accent-fg, #b45309);\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t}\n\t\t\t.nature-badge {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpadding: 1px 8px;\n\t\t\t\tborder-radius: 9999px;\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t\tfont-weight: 600;\n\t\t\t}\n\t\t\t.nature-badge.harmonious {\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-success, #16a34a) 12%, transparent);\n\t\t\t\tcolor: var(--roxy-success-fg, #166534);\n\t\t\t}\n\t\t\t.nature-badge.challenging {\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-danger, #dc2626) 12%, transparent);\n\t\t\t\tcolor: var(--roxy-danger-fg, #991b1b);\n\t\t\t}\n\t\t\t.nature-badge.neutral {\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent);\n\t\t\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ attribute: false })\n\tdata: TransitsResponse | null = null;\n\n\trender() {\n\t\tif (!this.data?.transitPlanets?.length) {\n\t\t\treturn html`<div class=\"roxy-empty\" role=\"status\">No transits data</div>`;\n\t\t}\n\n\t\tconst {\n\t\t\ttransitDate,\n\t\t\ttransitTime,\n\t\t\ttransitPlanets,\n\t\t\ttransitAspects,\n\t\t\tsummary,\n\t\t} = this.data;\n\n\t\tconst dateStr = [formatDate(transitDate), formatTime(transitTime)]\n\t\t\t.filter(Boolean)\n\t\t\t.join(' ');\n\n\t\treturn html`<div class=\"wrap\" aria-label=\"Transit positions table\">\n\t\t\t<div class=\"head\">\n\t\t\t\t<h2 class=\"title\">Transits</h2>\n\t\t\t\t${dateStr ? html`<p class=\"subtitle\">${dateStr}</p>` : nothing}\n\t\t\t</div>\n\n\t\t\t${summary ? this.renderSummaryPills(summary) : nothing}\n\n\t\t\t<div>\n\t\t\t\t<p class=\"section-label\">Planet positions</p>\n\t\t\t\t<div class=\"overflow-scroll\">\n\t\t\t\t\t${this.renderPlanetsTable(transitPlanets)}\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t${\n\t\t\t\ttransitAspects?.length\n\t\t\t\t\t? html`<div>\n\t\t\t\t\t\t<p class=\"section-label\">Transit aspects</p>\n\t\t\t\t\t\t<div class=\"overflow-scroll\">\n\t\t\t\t\t\t\t${this.renderAspectsList(transitAspects)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>`\n\t\t\t\t\t: nothing\n\t\t\t}\n\t\t</div>`;\n\t}\n\n\tprivate renderSummaryPills(\n\t\tsummary: NonNullable<TransitsResponse['summary']>,\n\t) {\n\t\treturn html`<div class=\"summary-pills\" role=\"region\" aria-label=\"Aspect summary\">\n\t\t\t<span class=\"pill pill--muted\">\n\t\t\t\tTotal: ${summary.totalAspects}\n\t\t\t</span>\n\t\t\t<span class=\"pill pill--success\">\n\t\t\t\tHarmonious: ${summary.harmonious}\n\t\t\t</span>\n\t\t\t<span class=\"pill pill--danger\">\n\t\t\t\tChallenging: ${summary.challenging}\n\t\t\t</span>\n\t\t\t<span class=\"pill pill--muted\">\n\t\t\t\tNeutral: ${summary.neutral}\n\t\t\t</span>\n\t\t</div>`;\n\t}\n\n\tprivate renderPlanetsTable(planets: TransitsResponse['transitPlanets']) {\n\t\treturn html`<table class=\"planets-table\">\n\t\t\t<thead>\n\t\t\t\t<tr>\n\t\t\t\t\t<th scope=\"col\">Planet</th>\n\t\t\t\t\t<th scope=\"col\">Sign</th>\n\t\t\t\t\t<th scope=\"col\">Degree</th>\n\t\t\t\t\t<th scope=\"col\">Speed</th>\n\t\t\t\t</tr>\n\t\t\t</thead>\n\t\t\t<tbody>\n\t\t\t\t${planets.map((p) => {\n\t\t\t\t\tconst pGlyph = PLANET_GLYPH[capitalize(p.name)] ?? '';\n\t\t\t\t\tconst sGlyph = SIGN_GLYPH[capitalize(p.sign)] ?? '';\n\t\t\t\t\tconst speedArrow = p.speed >= 0 ? '\u2191' : '\u2193';\n\t\t\t\t\treturn html`<tr>\n\t\t\t\t\t\t<td>\n\t\t\t\t\t\t\t<div class=\"planet-cell\">\n\t\t\t\t\t\t\t\t<span class=\"glyph\" aria-hidden=\"true\">${pGlyph}</span>\n\t\t\t\t\t\t\t\t${p.name}\n\t\t\t\t\t\t\t\t${\n\t\t\t\t\t\t\t\t\tp.isRetrograde\n\t\t\t\t\t\t\t\t\t\t? html`<span class=\"retro-badge\" aria-label=\"retrograde\">R</span>`\n\t\t\t\t\t\t\t\t\t\t: nothing\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</td>\n\t\t\t\t\t\t<td>\n\t\t\t\t\t\t\t<div class=\"planet-cell\">\n\t\t\t\t\t\t\t\t<span class=\"glyph\" aria-hidden=\"true\">${sGlyph}</span>\n\t\t\t\t\t\t\t\t${p.sign}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</td>\n\t\t\t\t\t\t<td class=\"num\">${formatNumber(p.degree, 2)}</td>\n\t\t\t\t\t\t<td class=\"speed\">\n\t\t\t\t\t\t\t<span class=\"speed-arrow\" aria-hidden=\"true\">${speedArrow}</span>\n\t\t\t\t\t\t\t${formatNumber(Math.abs(p.speed), 4)}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t</tr>`;\n\t\t\t\t})}\n\t\t\t</tbody>\n\t\t</table>`;\n\t}\n\n\tprivate renderAspectsList(\n\t\taspects: NonNullable<TransitsResponse['transitAspects']>,\n\t) {\n\t\treturn html`<div role=\"list\" aria-label=\"Transit aspects\">\n\t\t\t${aspects.map((a, idx) => {\n\t\t\t\tconst tGlyph = PLANET_GLYPH[capitalize(a.transitPlanet)] ?? '';\n\t\t\t\tconst nGlyph = PLANET_GLYPH[capitalize(a.natalPlanet)] ?? '';\n\t\t\t\tconst nature = (a.nature ?? 'neutral').toLowerCase();\n\t\t\t\tconst interp = a.interpretation;\n\t\t\t\tconst type = (a.type ?? '').toLowerCase();\n\t\t\t\tconst status = a.isApplying ? 'Applying' : 'Separating';\n\t\t\t\treturn html`<details class=\"aspect-card\" role=\"listitem\" name=\"transit-aspects\" ?open=${idx === 0}>\n\t\t\t\t\t<summary>\n\t\t\t\t\t\t<span aria-hidden=\"true\">${tGlyph}</span>\n\t\t\t\t\t\t${a.transitPlanet}\n\t\t\t\t\t\t<span class=\"nature-badge ${nature}\">${type}</span>\n\t\t\t\t\t\t<span aria-hidden=\"true\">${nGlyph}</span>\n\t\t\t\t\t\t${a.natalPlanet}\n\t\t\t\t\t\t<span class=\"meta\">\n\t\t\t\t\t\t\t${status} \u00B7 orb ${formatNumber(a.orb, 2)}\u00B0 \u00B7 strength ${formatNumber(a.strength, 1)}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</summary>\n\t\t\t\t\t<div class=\"interp-body\">\n\t\t\t\t\t\t${interp?.summary ? html`<p>${interp.summary}</p>` : nothing}\n\t\t\t\t\t\t${interp?.impact ? html`<p><strong>Impact:</strong> ${interp.impact}</p>` : nothing}\n\t\t\t\t\t\t${interp?.timing ? html`<p><strong>Timing:</strong> ${interp.timing}</p>` : nothing}\n\t\t\t\t\t\t${interp?.guidance ? html`<p><strong>Guidance:</strong> ${interp.guidance}</p>` : nothing}\n\t\t\t\t\t\t${\n\t\t\t\t\t\t\tinterp?.keywords?.length\n\t\t\t\t\t\t\t\t? html`<div class=\"interp-keywords\">\n\t\t\t\t\t\t\t\t\t\t${interp.keywords.map((k) => html`<span class=\"kw\">${k}</span>`)}\n\t\t\t\t\t\t\t\t\t</div>`\n\t\t\t\t\t\t\t\t: nothing\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</details>`;\n\t\t\t})}\n\t\t</div>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'roxy-transits-table': RoxyTransitsTable;\n\t}\n}\n", "/**\n * Symbol constants used across components. Single source of truth so chart\n * wheels, card headers, hexagram displays, and panchang tables stay visually\n * consistent.\n */\n\nexport const PLANET_GLYPH: Record<string, string> = {\n\tSun: '\u2609',\n\tMoon: '\u263D',\n\tMercury: '\u263F',\n\tVenus: '\u2640',\n\tEarth: '\u2641',\n\tMars: '\u2642',\n\tJupiter: '\u2643',\n\tSaturn: '\u2644',\n\tUranus: '\u2645',\n\tNeptune: '\u2646',\n\tPluto: '\u2647',\n\tRahu: '\u260A',\n\tKetu: '\u260B',\n\tAscendant: 'Asc',\n\tLagna: 'La',\n\tNorthNode: '\u260A',\n\tSouthNode: '\u260B',\n\t'North node': '\u260A',\n\t'South node': '\u260B',\n\tChiron: '\u26B7',\n\tLilith: '\u26B8',\n\t'Black moon lilith': '\u26B8',\n};\n\nexport const PLANET_ABBR: Record<string, string> = {\n\tSun: 'Su',\n\tMoon: 'Mo',\n\tMercury: 'Me',\n\tVenus: 'Ve',\n\tMars: 'Ma',\n\tJupiter: 'Ju',\n\tSaturn: 'Sa',\n\tUranus: 'Ur',\n\tNeptune: 'Ne',\n\tPluto: 'Pl',\n\tRahu: 'Ra',\n\tKetu: 'Ke',\n\tAscendant: 'Asc',\n\tLagna: 'La',\n};\n\nexport const SIGN_GLYPH: Record<string, string> = {\n\tAries: '\u2648',\n\tTaurus: '\u2649',\n\tGemini: '\u264A',\n\tCancer: '\u264B',\n\tLeo: '\u264C',\n\tVirgo: '\u264D',\n\tLibra: '\u264E',\n\tScorpio: '\u264F',\n\tSagittarius: '\u2650',\n\tCapricorn: '\u2651',\n\tAquarius: '\u2652',\n\tPisces: '\u2653',\n};\n\nexport const SIGN_ABBR: Record<string, string> = {\n\tAries: 'Ar',\n\tTaurus: 'Ta',\n\tGemini: 'Ge',\n\tCancer: 'Cn',\n\tLeo: 'Le',\n\tVirgo: 'Vi',\n\tLibra: 'Li',\n\tScorpio: 'Sc',\n\tSagittarius: 'Sg',\n\tCapricorn: 'Cp',\n\tAquarius: 'Aq',\n\tPisces: 'Pi',\n};\n\nexport const SIGNS_ORDER = [\n\t'Aries',\n\t'Taurus',\n\t'Gemini',\n\t'Cancer',\n\t'Leo',\n\t'Virgo',\n\t'Libra',\n\t'Scorpio',\n\t'Sagittarius',\n\t'Capricorn',\n\t'Aquarius',\n\t'Pisces',\n] as const;\n\n/**\n * Lowercase rashi keys in canonical zodiac order. Derived from `SIGNS_ORDER`\n * so the two stay in lockstep. The /vedic-astrology/birth-chart response\n * carries planet buckets keyed by these names.\n */\nexport const RASHI_KEYS = SIGNS_ORDER.map((s) =>\n\ts.toLowerCase(),\n) as readonly Lowercase<(typeof SIGNS_ORDER)[number]>[];\n\n/** Aspect symbols. Used by synastry and natal chart aspect tables. */\nexport const ASPECT_SYMBOL: Record<string, string> = {\n\tconjunction: '\u260C',\n\topposition: '\u260D',\n\ttrine: '\u25B3',\n\tsquare: '\u25A1',\n\tsextile: '\u2731',\n\tquincunx: '\u22BB',\n\tsemisextile: '\u22BC',\n};\n\n/** Trigrams used by I Ching hexagrams. Eight trigrams compose 64 hexagrams. */\nexport const TRIGRAM_GLYPH: Record<string, string> = {\n\theaven: '\u2630',\n\tlake: '\u2631',\n\tfire: '\u2632',\n\tthunder: '\u2633',\n\twind: '\u2634',\n\twater: '\u2635',\n\tmountain: '\u2636',\n\tearth: '\u2637',\n\tHeaven: '\u2630',\n\tLake: '\u2631',\n\tFire: '\u2632',\n\tThunder: '\u2633',\n\tWind: '\u2634',\n\tWater: '\u2635',\n\tMountain: '\u2636',\n\tEarth: '\u2637',\n};\n\n/** Moon phase emoji set. Used by moon phase card. */\nexport const MOON_PHASE_EMOJI: Record<string, string> = {\n\t'new moon': '\uD83C\uDF11',\n\t'waxing crescent': '\uD83C\uDF12',\n\t'first quarter': '\uD83C\uDF13',\n\t'waxing gibbous': '\uD83C\uDF14',\n\t'full moon': '\uD83C\uDF15',\n\t'waning gibbous': '\uD83C\uDF16',\n\t'last quarter': '\uD83C\uDF17',\n\t'waning crescent': '\uD83C\uDF18',\n};\n", "import { css } from 'lit';\n\n/**\n * Shared host styles every component pulls in. Sets default font, color,\n * container query support, and the entry fade-in.\n */\nexport const baseStyles = css`\n\t:host {\n\t\tdisplay: block;\n\t\tcontainer-type: inline-size;\n\t\tfont-family: var(\n\t\t\t--roxy-font-sans,\n\t\t\tsystem-ui,\n\t\t\t-apple-system,\n\t\t\tBlinkMacSystemFont,\n\t\t\t'Segoe UI',\n\t\t\tRoboto,\n\t\t\tsans-serif\n\t\t);\n\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\tbackground: transparent;\n\t\tfont-size: var(--roxy-text-base, 1rem);\n\t\tline-height: var(--roxy-leading-normal, 1.5);\n\t\tanimation: roxy-fade-in var(--roxy-motion-duration, 200ms)\n\t\t\tvar(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1)) both;\n\t}\n\n\t*,\n\t*::before,\n\t*::after {\n\t\tbox-sizing: border-box;\n\t}\n\n\t@keyframes roxy-fade-in {\n\t\tfrom {\n\t\t\topacity: 0;\n\t\t\ttransform: translateY(2px);\n\t\t}\n\t\tto {\n\t\t\topacity: 1;\n\t\t\ttransform: translateY(0);\n\t\t}\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t:host {\n\t\t\tanimation: none;\n\t\t}\n\t}\n\n\t.roxy-skeleton {\n\t\tbackground: linear-gradient(\n\t\t\t90deg,\n\t\t\tvar(--roxy-border, #e4e4e7) 0%,\n\t\t\tcolor-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent) 50%,\n\t\t\tvar(--roxy-border, #e4e4e7) 100%\n\t\t);\n\t\tbackground-size: 200% 100%;\n\t\tanimation: roxy-shimmer 1.4s ease-in-out infinite;\n\t\tborder-radius: var(--roxy-radius-md, 8px);\n\t}\n\n\t@keyframes roxy-shimmer {\n\t\t0% {\n\t\t\tbackground-position: 200% 0;\n\t\t}\n\t\t100% {\n\t\t\tbackground-position: -200% 0;\n\t\t}\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.roxy-skeleton {\n\t\t\tanimation: none;\n\t\t}\n\t}\n\n\t.roxy-empty {\n\t\tpadding: var(--roxy-space-lg, 1.5rem);\n\t\tcolor: var(--roxy-muted, #71717a);\n\t\ttext-align: center;\n\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t}\n\n\t:host(:focus-within) .roxy-card {\n\t\toutline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));\n\t\toutline-offset: 2px;\n\t}\n`;\n", "/**\n * Display formatters for ISO timestamps and floats coming back from the API.\n * Every helper returns \"\" for nullish or unparseable input so it falls out of\n * template literals cleanly.\n */\n\nexport function formatTime(input: unknown): string {\n\tif (typeof input !== 'string' || input.length === 0) return '';\n\tif (/^\\d{4}-\\d{2}-\\d{2}$/.test(input)) return '';\n\tconst bareTime = /^\\d{2}:\\d{2}(:\\d{2})?$/.test(input);\n\tconst iso = bareTime ? `1970-01-01T${input}` : input;\n\tconst d = new Date(iso);\n\tif (Number.isNaN(d.getTime())) return input;\n\treturn d.toLocaleTimeString(undefined, {\n\t\thour: 'numeric',\n\t\tminute: '2-digit',\n\t\thour12: true,\n\t});\n}\n\nexport function formatDate(input: unknown): string {\n\tif (typeof input !== 'string' || input.length === 0) return '';\n\tconst d = new Date(\n\t\t/^\\d{4}-\\d{2}-\\d{2}$/.test(input) ? `${input}T00:00:00` : input,\n\t);\n\tif (Number.isNaN(d.getTime())) return input;\n\treturn d.toLocaleDateString(undefined, {\n\t\tmonth: 'short',\n\t\tday: 'numeric',\n\t\tyear: 'numeric',\n\t});\n}\n\nexport function formatTimeRange(\n\tt: { start?: string; end?: string } | undefined,\n): string {\n\tif (!t) return '';\n\tconst start = formatTime(t.start);\n\tconst end = formatTime(t.end);\n\tif (start && end) return `${start} - ${end}`;\n\treturn start || end || '';\n}\n\nexport function formatNumber(value: unknown, dp = 1): string {\n\tif (typeof value !== 'number' || !Number.isFinite(value)) return '';\n\treturn value.toFixed(dp).replace(/\\.?0+$/, '');\n}\n\nexport function formatPercent(value: unknown, dp = 1): string {\n\tconst n = formatNumber(value, dp);\n\treturn n ? `${n}%` : '';\n}\n\n/**\n * CSS class name per aspect type. Used by natal and synastry chart aspect\n * lines so the same color encoding (harmonious vs challenging) applies in\n * both wheels. Keys are lowercase canonical names, values are CSS class\n * suffixes the chart components define in their `:host` styles.\n */\nexport const ASPECT_CLASS: Record<string, string> = {\n\tconjunction: 'aspect-conjunction',\n\tsextile: 'aspect-sextile',\n\tsquare: 'aspect-square',\n\ttrine: 'aspect-trine',\n\topposition: 'aspect-opposition',\n};\n\n/**\n * Normalize the `type` field on an aspect entry to a lowercase, hyphen-separated\n * canonical name (`SEMI_SEXTILE` \u2192 `semi-sextile`). Accepts any aspect-shaped\n * object so both natal and synastry inter-aspect entries can share this.\n */\nexport function normalizeAspect(a: { type?: string }): string {\n\treturn (a.type ?? '').toLowerCase().replace(/_/g, '-');\n}\n", "/**\n * Shared string helpers used across components. Single source of truth so the\n * same formatting rules apply to every key/label/title that surfaces in the\n * shadow tree.\n *\n *  - `capitalize`: title-cases the first character, lowercases the rest. Used\n *    when matching API-supplied planet/sign names against the glyph maps in\n *    `tokens/index.ts`, which use canonical TitleCase keys.\n *  - `humanize`: turns an API key (`birth_date`, `birthDate`, `mahadasha-end`)\n *    into a label suitable for display (\"Birth date\", \"Mahadasha end\").\n */\n\nexport function capitalize(s: string): string {\n\tif (!s) return '';\n\treturn s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();\n}\n\nexport function humanize(s: string): string {\n\treturn s\n\t\t.replace(/[_-]+/g, ' ')\n\t\t.replace(/([a-z])([A-Z])/g, '$1 $2')\n\t\t.replace(/^\\w/, (c) => c.toUpperCase());\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { PLANET_GLYPH, SIGN_GLYPH } from '../tokens/index.js';\nimport type { TransitsResponse } from '../types/index.js';\nimport { baseStyles } from '../utils/base-styles.js';\nimport { formatDate, formatNumber, formatTime } from '../utils/format.js';\nimport { capitalize } from '../utils/string.js';\n\n/**\n * Transit positions and aspect table. Pass `data` from /astrology/transits.\n * When natalChart is included in the request, `data.transitAspects` and\n * `data.summary` are present and rendered automatically.\n */\n@customElement('roxy-transits-table')\nexport class RoxyTransitsTable extends LitElement {\n\tstatic styles = [\n\t\tbaseStyles,\n\t\tcss`\n\t\t\t.wrap {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgap: var(--roxy-space-md, 1rem);\n\t\t\t}\n\n\t\t\t.head {\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: space-between;\n\t\t\t\talign-items: baseline;\n\t\t\t\tgap: var(--roxy-space-md, 1rem);\n\t\t\t\tflex-wrap: wrap;\n\t\t\t}\n\n\t\t\t.title {\n\t\t\t\tfont-size: var(--roxy-text-lg, 1.125rem);\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t.subtitle {\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t.summary-pills {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-wrap: wrap;\n\t\t\t\tgap: var(--roxy-space-sm, 0.5rem);\n\t\t\t}\n\n\t\t\t.pill {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\talign-items: center;\n\t\t\t\tgap: 4px;\n\t\t\t\tpadding: 2px var(--roxy-space-sm, 0.5rem);\n\t\t\t\tborder-radius: var(--roxy-radius-full, 9999px);\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t\tborder: 1px solid currentColor;\n\t\t\t}\n\n\t\t\t.pill--muted {\n\t\t\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent);\n\t\t\t}\n\n\t\t\t.pill--success {\n\t\t\t\tcolor: var(--roxy-success-fg, #166534);\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-success, #16a34a) 10%, transparent);\n\t\t\t}\n\n\t\t\t.pill--danger {\n\t\t\t\tcolor: var(--roxy-danger-fg, #991b1b);\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-danger, #dc2626) 10%, transparent);\n\t\t\t}\n\n\t\t\ttable {\n\t\t\t\twidth: 100%;\n\t\t\t\tborder-collapse: collapse;\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t}\n\n\t\t\tth,\n\t\t\ttd {\n\t\t\t\tpadding: var(--roxy-space-sm, 0.5rem);\n\t\t\t\tborder-bottom: 1px solid var(--roxy-border, #e4e4e7);\n\t\t\t\ttext-align: left;\n\t\t\t}\n\n\t\t\tth {\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t\ttext-transform: uppercase;\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t\tletter-spacing: 0.06em;\n\t\t\t}\n\n\t\t\t.section-label {\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\ttext-transform: uppercase;\n\t\t\t\tletter-spacing: 0.06em;\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t\tmargin: 0 0 var(--roxy-space-xs, 0.25rem) 0;\n\t\t\t}\n\n\t\t\t.glyph {\n\t\t\t\tfont-size: 1.1em;\n\t\t\t\tmargin-right: 2px;\n\t\t\t\tline-height: 1;\n\t\t\t}\n\n\t\t\t.planet-cell {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tgap: 4px;\n\t\t\t\twhite-space: nowrap;\n\t\t\t}\n\n\t\t\t.retro-badge {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tfont-size: 0.7em;\n\t\t\t\tpadding: 1px 4px;\n\t\t\t\tborder-radius: var(--roxy-radius-sm, 4px);\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-warning, #ea580c) 12%, transparent);\n\t\t\t\tcolor: var(--roxy-warning-fg, #9a3412);\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t\tmargin-left: 2px;\n\t\t\t\tvertical-align: middle;\n\t\t\t}\n\n\t\t\t.speed {\n\t\t\t\tfont-variant-numeric: tabular-nums;\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\twhite-space: nowrap;\n\t\t\t}\n\n\t\t\t.speed-arrow {\n\t\t\t\tfont-size: 0.85em;\n\t\t\t}\n\n\t\t\ttd.num {\n\t\t\t\tfont-variant-numeric: tabular-nums;\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t}\n\n\t\t\t.overflow-scroll {\n\t\t\t\toverflow-x: auto;\n\t\t\t\t-webkit-overflow-scrolling: touch;\n\t\t\t}\n\n\t\t\t.aspect-card {\n\t\t\t\tborder: 1px solid var(--roxy-border, #e4e4e7);\n\t\t\t\tborder-radius: var(--roxy-radius-md, 8px);\n\t\t\t\tpadding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);\n\t\t\t\tmargin-bottom: var(--roxy-space-xs, 0.25rem);\n\t\t\t}\n\t\t\t.aspect-card summary {\n\t\t\t\tcursor: pointer;\n\t\t\t\tfont-weight: 500;\n\t\t\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-wrap: wrap;\n\t\t\t\talign-items: center;\n\t\t\t\tgap: 0.5em;\n\t\t\t}\n\t\t\t.aspect-card summary .meta {\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\tfont-weight: 400;\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t\tmargin-left: auto;\n\t\t\t\tfont-variant-numeric: tabular-nums;\n\t\t\t}\n\t\t\t.aspect-card .interp-body {\n\t\t\t\tmargin-top: var(--roxy-space-xs, 0.25rem);\n\t\t\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t\tline-height: 1.45;\n\t\t\t}\n\t\t\t.aspect-card .interp-body p {\n\t\t\t\tmargin: 0 0 var(--roxy-space-xs, 0.25rem);\n\t\t\t}\n\t\t\t.interp-keywords {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-wrap: wrap;\n\t\t\t\tgap: 0.25rem;\n\t\t\t\tmargin-top: 0.5rem;\n\t\t\t}\n\t\t\t.interp-keywords .kw {\n\t\t\t\tpadding: 1px 8px;\n\t\t\t\tborder-radius: 9999px;\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-accent, #f59e0b) 14%, transparent);\n\t\t\t\tcolor: var(--roxy-accent-fg, #b45309);\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t}\n\t\t\t.nature-badge {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpadding: 1px 8px;\n\t\t\t\tborder-radius: 9999px;\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t\tfont-weight: 600;\n\t\t\t}\n\t\t\t.nature-badge.harmonious {\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-success, #16a34a) 12%, transparent);\n\t\t\t\tcolor: var(--roxy-success-fg, #166534);\n\t\t\t}\n\t\t\t.nature-badge.challenging {\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-danger, #dc2626) 12%, transparent);\n\t\t\t\tcolor: var(--roxy-danger-fg, #991b1b);\n\t\t\t}\n\t\t\t.nature-badge.neutral {\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent);\n\t\t\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ attribute: false })\n\tdata: TransitsResponse | null = null;\n\n\trender() {\n\t\tif (!this.data?.transitPlanets?.length) {\n\t\t\treturn html`<div class=\"roxy-empty\" role=\"status\">No transits data</div>`;\n\t\t}\n\n\t\tconst {\n\t\t\ttransitDate,\n\t\t\ttransitTime,\n\t\t\ttransitPlanets,\n\t\t\ttransitAspects,\n\t\t\tsummary,\n\t\t} = this.data;\n\n\t\tconst dateStr = [formatDate(transitDate), formatTime(transitTime)]\n\t\t\t.filter(Boolean)\n\t\t\t.join(' ');\n\n\t\treturn html`<div class=\"wrap\" aria-label=\"Transit positions table\">\n\t\t\t<div class=\"head\">\n\t\t\t\t<h2 class=\"title\">Transits</h2>\n\t\t\t\t${dateStr ? html`<p class=\"subtitle\">${dateStr}</p>` : nothing}\n\t\t\t</div>\n\n\t\t\t${summary ? this.renderSummaryPills(summary) : nothing}\n\n\t\t\t<div>\n\t\t\t\t<p class=\"section-label\">Planet positions</p>\n\t\t\t\t<div class=\"overflow-scroll\">\n\t\t\t\t\t${this.renderPlanetsTable(transitPlanets)}\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t${\n\t\t\t\ttransitAspects?.length\n\t\t\t\t\t? html`<div>\n\t\t\t\t\t\t<p class=\"section-label\">Transit aspects</p>\n\t\t\t\t\t\t<div class=\"overflow-scroll\">\n\t\t\t\t\t\t\t${this.renderAspectsList(transitAspects)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>`\n\t\t\t\t\t: nothing\n\t\t\t}\n\t\t</div>`;\n\t}\n\n\tprivate renderSummaryPills(\n\t\tsummary: NonNullable<TransitsResponse['summary']>,\n\t) {\n\t\treturn html`<div class=\"summary-pills\" role=\"region\" aria-label=\"Aspect summary\">\n\t\t\t<span class=\"pill pill--muted\">\n\t\t\t\tTotal: ${summary.totalAspects}\n\t\t\t</span>\n\t\t\t<span class=\"pill pill--success\">\n\t\t\t\tHarmonious: ${summary.harmonious}\n\t\t\t</span>\n\t\t\t<span class=\"pill pill--danger\">\n\t\t\t\tChallenging: ${summary.challenging}\n\t\t\t</span>\n\t\t\t<span class=\"pill pill--muted\">\n\t\t\t\tNeutral: ${summary.neutral}\n\t\t\t</span>\n\t\t</div>`;\n\t}\n\n\tprivate renderPlanetsTable(planets: TransitsResponse['transitPlanets']) {\n\t\treturn html`<table class=\"planets-table\">\n\t\t\t<thead>\n\t\t\t\t<tr>\n\t\t\t\t\t<th scope=\"col\">Planet</th>\n\t\t\t\t\t<th scope=\"col\">Sign</th>\n\t\t\t\t\t<th scope=\"col\">Degree</th>\n\t\t\t\t\t<th scope=\"col\">Speed</th>\n\t\t\t\t</tr>\n\t\t\t</thead>\n\t\t\t<tbody>\n\t\t\t\t${planets.map((p) => {\n\t\t\t\t\tconst pGlyph = PLANET_GLYPH[capitalize(p.name)] ?? '';\n\t\t\t\t\tconst sGlyph = SIGN_GLYPH[capitalize(p.sign)] ?? '';\n\t\t\t\t\tconst speedArrow = p.speed >= 0 ? '\u2191' : '\u2193';\n\t\t\t\t\treturn html`<tr>\n\t\t\t\t\t\t<td>\n\t\t\t\t\t\t\t<div class=\"planet-cell\">\n\t\t\t\t\t\t\t\t<span class=\"glyph\" aria-hidden=\"true\">${pGlyph}</span>\n\t\t\t\t\t\t\t\t${p.name}\n\t\t\t\t\t\t\t\t${\n\t\t\t\t\t\t\t\t\tp.isRetrograde\n\t\t\t\t\t\t\t\t\t\t? html`<span class=\"retro-badge\" aria-label=\"retrograde\">R</span>`\n\t\t\t\t\t\t\t\t\t\t: nothing\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</td>\n\t\t\t\t\t\t<td>\n\t\t\t\t\t\t\t<div class=\"planet-cell\">\n\t\t\t\t\t\t\t\t<span class=\"glyph\" aria-hidden=\"true\">${sGlyph}</span>\n\t\t\t\t\t\t\t\t${p.sign}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</td>\n\t\t\t\t\t\t<td class=\"num\">${formatNumber(p.degree, 2)}</td>\n\t\t\t\t\t\t<td class=\"speed\">\n\t\t\t\t\t\t\t<span class=\"speed-arrow\" aria-hidden=\"true\">${speedArrow}</span>\n\t\t\t\t\t\t\t${formatNumber(Math.abs(p.speed), 4)}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t</tr>`;\n\t\t\t\t})}\n\t\t\t</tbody>\n\t\t</table>`;\n\t}\n\n\tprivate renderAspectsList(\n\t\taspects: NonNullable<TransitsResponse['transitAspects']>,\n\t) {\n\t\treturn html`<div role=\"list\" aria-label=\"Transit aspects\">\n\t\t\t${aspects.map((a, idx) => {\n\t\t\t\tconst tGlyph = PLANET_GLYPH[capitalize(a.transitPlanet)] ?? '';\n\t\t\t\tconst nGlyph = PLANET_GLYPH[capitalize(a.natalPlanet)] ?? '';\n\t\t\t\tconst nature = (a.nature ?? 'neutral').toLowerCase();\n\t\t\t\tconst interp = a.interpretation;\n\t\t\t\tconst type = (a.type ?? '').toLowerCase();\n\t\t\t\tconst status = a.isApplying ? 'Applying' : 'Separating';\n\t\t\t\treturn html`<details class=\"aspect-card\" role=\"listitem\" name=\"transit-aspects\" ?open=${idx === 0}>\n\t\t\t\t\t<summary>\n\t\t\t\t\t\t<span aria-hidden=\"true\">${tGlyph}</span>\n\t\t\t\t\t\t${a.transitPlanet}\n\t\t\t\t\t\t<span class=\"nature-badge ${nature}\">${type}</span>\n\t\t\t\t\t\t<span aria-hidden=\"true\">${nGlyph}</span>\n\t\t\t\t\t\t${a.natalPlanet}\n\t\t\t\t\t\t<span class=\"meta\">\n\t\t\t\t\t\t\t${status} \u00B7 orb ${formatNumber(a.orb, 2)}\u00B0 \u00B7 strength ${formatNumber(a.strength, 1)}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</summary>\n\t\t\t\t\t<div class=\"interp-body\">\n\t\t\t\t\t\t${interp?.summary ? html`<p>${interp.summary}</p>` : nothing}\n\t\t\t\t\t\t${interp?.impact ? html`<p><strong>Impact:</strong> ${interp.impact}</p>` : nothing}\n\t\t\t\t\t\t${interp?.timing ? html`<p><strong>Timing:</strong> ${interp.timing}</p>` : nothing}\n\t\t\t\t\t\t${interp?.guidance ? html`<p><strong>Guidance:</strong> ${interp.guidance}</p>` : nothing}\n\t\t\t\t\t\t${\n\t\t\t\t\t\t\tinterp?.keywords?.length\n\t\t\t\t\t\t\t\t? html`<div class=\"interp-keywords\">\n\t\t\t\t\t\t\t\t\t\t${interp.keywords.map((k) => html`<span class=\"kw\">${k}</span>`)}\n\t\t\t\t\t\t\t\t\t</div>`\n\t\t\t\t\t\t\t\t: nothing\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</details>`;\n\t\t\t})}\n\t\t</div>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'roxy-transits-table': RoxyTransitsTable;\n\t}\n}\n", "/**\n * Symbol constants used across components. Single source of truth so chart\n * wheels, card headers, hexagram displays, and panchang tables stay visually\n * consistent.\n */\n\nexport const PLANET_GLYPH: Record<string, string> = {\n\tSun: '\u2609',\n\tMoon: '\u263D',\n\tMercury: '\u263F',\n\tVenus: '\u2640',\n\tEarth: '\u2641',\n\tMars: '\u2642',\n\tJupiter: '\u2643',\n\tSaturn: '\u2644',\n\tUranus: '\u2645',\n\tNeptune: '\u2646',\n\tPluto: '\u2647',\n\tRahu: '\u260A',\n\tKetu: '\u260B',\n\tAscendant: 'Asc',\n\tLagna: 'La',\n\tNorthNode: '\u260A',\n\tSouthNode: '\u260B',\n\t'North node': '\u260A',\n\t'South node': '\u260B',\n\tChiron: '\u26B7',\n\tLilith: '\u26B8',\n\t'Black moon lilith': '\u26B8',\n};\n\nexport const PLANET_ABBR: Record<string, string> = {\n\tSun: 'Su',\n\tMoon: 'Mo',\n\tMercury: 'Me',\n\tVenus: 'Ve',\n\tMars: 'Ma',\n\tJupiter: 'Ju',\n\tSaturn: 'Sa',\n\tUranus: 'Ur',\n\tNeptune: 'Ne',\n\tPluto: 'Pl',\n\tRahu: 'Ra',\n\tKetu: 'Ke',\n\tAscendant: 'Asc',\n\tLagna: 'La',\n};\n\nexport const SIGN_GLYPH: Record<string, string> = {\n\tAries: '\u2648',\n\tTaurus: '\u2649',\n\tGemini: '\u264A',\n\tCancer: '\u264B',\n\tLeo: '\u264C',\n\tVirgo: '\u264D',\n\tLibra: '\u264E',\n\tScorpio: '\u264F',\n\tSagittarius: '\u2650',\n\tCapricorn: '\u2651',\n\tAquarius: '\u2652',\n\tPisces: '\u2653',\n};\n\nexport const SIGN_ABBR: Record<string, string> = {\n\tAries: 'Ar',\n\tTaurus: 'Ta',\n\tGemini: 'Ge',\n\tCancer: 'Cn',\n\tLeo: 'Le',\n\tVirgo: 'Vi',\n\tLibra: 'Li',\n\tScorpio: 'Sc',\n\tSagittarius: 'Sg',\n\tCapricorn: 'Cp',\n\tAquarius: 'Aq',\n\tPisces: 'Pi',\n};\n\nexport const SIGNS_ORDER = [\n\t'Aries',\n\t'Taurus',\n\t'Gemini',\n\t'Cancer',\n\t'Leo',\n\t'Virgo',\n\t'Libra',\n\t'Scorpio',\n\t'Sagittarius',\n\t'Capricorn',\n\t'Aquarius',\n\t'Pisces',\n] as const;\n\n/**\n * Lowercase rashi keys in canonical zodiac order. Derived from `SIGNS_ORDER`\n * so the two stay in lockstep. The /vedic-astrology/birth-chart response\n * carries planet buckets keyed by these names.\n */\nexport const RASHI_KEYS = SIGNS_ORDER.map((s) =>\n\ts.toLowerCase(),\n) as readonly Lowercase<(typeof SIGNS_ORDER)[number]>[];\n\n/** Aspect symbols. Used by synastry and natal chart aspect tables. */\nexport const ASPECT_SYMBOL: Record<string, string> = {\n\tconjunction: '\u260C',\n\topposition: '\u260D',\n\ttrine: '\u25B3',\n\tsquare: '\u25A1',\n\tsextile: '\u2731',\n\tquincunx: '\u22BB',\n\tsemisextile: '\u22BC',\n};\n\n/** Trigrams used by I Ching hexagrams. Eight trigrams compose 64 hexagrams. */\nexport const TRIGRAM_GLYPH: Record<string, string> = {\n\theaven: '\u2630',\n\tlake: '\u2631',\n\tfire: '\u2632',\n\tthunder: '\u2633',\n\twind: '\u2634',\n\twater: '\u2635',\n\tmountain: '\u2636',\n\tearth: '\u2637',\n\tHeaven: '\u2630',\n\tLake: '\u2631',\n\tFire: '\u2632',\n\tThunder: '\u2633',\n\tWind: '\u2634',\n\tWater: '\u2635',\n\tMountain: '\u2636',\n\tEarth: '\u2637',\n};\n\n/** Moon phase emoji set. Used by moon phase card. */\nexport const MOON_PHASE_EMOJI: Record<string, string> = {\n\t'new moon': '\uD83C\uDF11',\n\t'waxing crescent': '\uD83C\uDF12',\n\t'first quarter': '\uD83C\uDF13',\n\t'waxing gibbous': '\uD83C\uDF14',\n\t'full moon': '\uD83C\uDF15',\n\t'waning gibbous': '\uD83C\uDF16',\n\t'last quarter': '\uD83C\uDF17',\n\t'waning crescent': '\uD83C\uDF18',\n};\n", "import { css } from 'lit';\n\n/**\n * Shared host styles every component pulls in. Sets default font, color,\n * container query support, and the entry fade-in.\n */\nexport const baseStyles = css`\n\t:host {\n\t\tdisplay: block;\n\t\tcontainer-type: inline-size;\n\t\tfont-family: var(\n\t\t\t--roxy-font-sans,\n\t\t\tsystem-ui,\n\t\t\t-apple-system,\n\t\t\tBlinkMacSystemFont,\n\t\t\t'Segoe UI',\n\t\t\tRoboto,\n\t\t\tsans-serif\n\t\t);\n\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\tbackground: transparent;\n\t\tfont-size: var(--roxy-text-base, 1rem);\n\t\tline-height: var(--roxy-leading-normal, 1.5);\n\t\tanimation: roxy-fade-in var(--roxy-motion-duration, 200ms)\n\t\t\tvar(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1)) both;\n\t}\n\n\t*,\n\t*::before,\n\t*::after {\n\t\tbox-sizing: border-box;\n\t}\n\n\t@keyframes roxy-fade-in {\n\t\tfrom {\n\t\t\topacity: 0;\n\t\t\ttransform: translateY(2px);\n\t\t}\n\t\tto {\n\t\t\topacity: 1;\n\t\t\ttransform: translateY(0);\n\t\t}\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t:host {\n\t\t\tanimation: none;\n\t\t}\n\t}\n\n\t.roxy-skeleton {\n\t\tbackground: linear-gradient(\n\t\t\t90deg,\n\t\t\tvar(--roxy-border, #e4e4e7) 0%,\n\t\t\tcolor-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent) 50%,\n\t\t\tvar(--roxy-border, #e4e4e7) 100%\n\t\t);\n\t\tbackground-size: 200% 100%;\n\t\tanimation: roxy-shimmer 1.4s ease-in-out infinite;\n\t\tborder-radius: var(--roxy-radius-md, 8px);\n\t}\n\n\t@keyframes roxy-shimmer {\n\t\t0% {\n\t\t\tbackground-position: 200% 0;\n\t\t}\n\t\t100% {\n\t\t\tbackground-position: -200% 0;\n\t\t}\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.roxy-skeleton {\n\t\t\tanimation: none;\n\t\t}\n\t}\n\n\t.roxy-empty {\n\t\tpadding: var(--roxy-space-lg, 1.5rem);\n\t\tcolor: var(--roxy-muted, #71717a);\n\t\ttext-align: center;\n\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t}\n\n\t:host(:focus-within) .roxy-card {\n\t\toutline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));\n\t\toutline-offset: 2px;\n\t}\n\n\t/* Force the text-style variant on every Unicode glyph in the component.\n\t * macOS and iOS substitute coloured emoji glyphs for the planetary and\n\t * gender Unicode code points (Mars, Venus, Mercury, etc.) when the\n\t * system colour-emoji font wins font selection. The text-style variant\n\t * keeps glyphs monochrome so they inherit the surrounding fill colour\n\t * and match the brand palette consistently across platforms.\n\t *\n\t * font-variant-emoji is part of CSS Fonts 4 (Safari 17+, Chrome 134+,\n\t * Firefox 139+). On older browsers the rule is silently ignored.\n\t */\n\t:host {\n\t\tfont-variant-emoji: text;\n\t}\n`;\n", "/**\n * Display formatters for ISO timestamps and floats coming back from the API.\n * Every helper returns \"\" for nullish or unparseable input so it falls out of\n * template literals cleanly.\n */\n\nexport function formatTime(input: unknown): string {\n\tif (typeof input !== 'string' || input.length === 0) return '';\n\tif (/^\\d{4}-\\d{2}-\\d{2}$/.test(input)) return '';\n\tconst bareTime = /^\\d{2}:\\d{2}(:\\d{2})?$/.test(input);\n\tconst iso = bareTime ? `1970-01-01T${input}` : input;\n\tconst d = new Date(iso);\n\tif (Number.isNaN(d.getTime())) return input;\n\treturn d.toLocaleTimeString(undefined, {\n\t\thour: 'numeric',\n\t\tminute: '2-digit',\n\t\thour12: true,\n\t});\n}\n\nexport function formatDate(input: unknown): string {\n\tif (typeof input !== 'string' || input.length === 0) return '';\n\tconst d = new Date(\n\t\t/^\\d{4}-\\d{2}-\\d{2}$/.test(input) ? `${input}T00:00:00` : input,\n\t);\n\tif (Number.isNaN(d.getTime())) return input;\n\treturn d.toLocaleDateString(undefined, {\n\t\tmonth: 'short',\n\t\tday: 'numeric',\n\t\tyear: 'numeric',\n\t});\n}\n\nexport function formatTimeRange(\n\tt: { start?: string; end?: string } | undefined,\n): string {\n\tif (!t) return '';\n\tconst start = formatTime(t.start);\n\tconst end = formatTime(t.end);\n\tif (start && end) return `${start} - ${end}`;\n\treturn start || end || '';\n}\n\nexport function formatNumber(value: unknown, dp = 1): string {\n\tif (typeof value !== 'number' || !Number.isFinite(value)) return '';\n\treturn value.toFixed(dp).replace(/\\.?0+$/, '');\n}\n\nexport function formatPercent(value: unknown, dp = 1): string {\n\tconst n = formatNumber(value, dp);\n\treturn n ? `${n}%` : '';\n}\n\n/**\n * CSS class name per aspect type. Used by natal and synastry chart aspect\n * lines so the same color encoding (harmonious vs challenging) applies in\n * both wheels. Keys are lowercase canonical names, values are CSS class\n * suffixes the chart components define in their `:host` styles.\n */\nexport const ASPECT_CLASS: Record<string, string> = {\n\tconjunction: 'aspect-conjunction',\n\tsextile: 'aspect-sextile',\n\tsquare: 'aspect-square',\n\ttrine: 'aspect-trine',\n\topposition: 'aspect-opposition',\n};\n\n/**\n * Normalize the `type` field on an aspect entry to a lowercase, hyphen-separated\n * canonical name (`SEMI_SEXTILE` \u2192 `semi-sextile`). Accepts any aspect-shaped\n * object so both natal and synastry inter-aspect entries can share this.\n */\nexport function normalizeAspect(a: { type?: string }): string {\n\treturn (a.type ?? '').toLowerCase().replace(/_/g, '-');\n}\n", "/**\n * Shared string helpers used across components. Single source of truth so the\n * same formatting rules apply to every key/label/title that surfaces in the\n * shadow tree.\n *\n *  - `capitalize`: title-cases the first character, lowercases the rest. Used\n *    when matching API-supplied planet/sign names against the glyph maps in\n *    `tokens/index.ts`, which use canonical TitleCase keys.\n *  - `humanize`: turns an API key (`birth_date`, `birthDate`, `mahadasha-end`)\n *    into a label suitable for display (\"Birth date\", \"Mahadasha end\").\n */\n\nexport function capitalize(s: string): string {\n\tif (!s) return '';\n\treturn s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();\n}\n\nexport function humanize(s: string): string {\n\treturn s\n\t\t.replace(/[_-]+/g, ' ')\n\t\t.replace(/([a-z])([A-Z])/g, '$1 $2')\n\t\t.replace(/^\\w/, (c) => c.toUpperCase());\n}\n"],
+  "mappings": "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",
   "names": ["css", "css"]
 }

package/dist/components/vedic-kundli.d.ts

@@ -1,21 +1,26 @@
 import { LitElement } from 'lit';
 import type { BirthChartResponse } from '../types/index.js';
+import { type ChartStyle } from '../utils/kundli-render.js';
 /**
  * Vedic kundli (D1 Rashi chart). Pass `data` from /vedic-astrology/birth-chart.
- * Three render styles via the `chart-style` attribute: south (default),
- * north, and east. All three draw the identical planet-in-sign data, so the
- * style is purely a layout choice. Each planet shows its abbreviation and
- * whole-degree, with an SVG tooltip carrying exact position, nakshatra, pada,
- * and avastha.
+ * Three regional render styles are available; the visible tablist lets the
+ * end user switch between South / North / East at any time. The same planet-
+ * in-sign data feeds every style, so the toggle is purely a layout choice.
  *
- * Theming flows through CSS custom properties on :host, so the chart adopts
- * the host page palette without runtime color probing.
+ * Each planet shows its abbreviation and whole-degree-within-sign, with an
+ * SVG tooltip carrying exact position, nakshatra, pada, and avastha. The host
+ * page sets the initial style via `chart-style` attribute; from there the
+ * user takes over.
+ *
+ * Theming flows through CSS custom properties on `:host`, so the chart
+ * adopts the host page palette without runtime color probing.
  */
 export declare class RoxyVedicKundli extends LitElement {
     static styles: import("lit").CSSResult[];
     data: BirthChartResponse | null;
-    chartStyle: 'south' | 'north' | 'east';
-    private buildHouses;
+    chartStyle: ChartStyle;
+    private viewModel;
+    private setStyle;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/dist/components/vedic-kundli.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vedic-kundli.d.ts","sourceRoot":"","sources":["../../src/components/vedic-kundli.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAE5C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAa5D;;;;;;;;;;GAUG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC9C,MAAM,CAAC,MAAM,4BAqDX;IAGF,IAAI,EAAE,kBAAkB,GAAG,IAAI,CAAQ;IAGvC,UAAU,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,CAAW;IAEjD,OAAO,CAAC,WAAW;IAKnB,MAAM;CAgCN;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD"}
+{"version":3,"file":"vedic-kundli.d.ts","sourceRoot":"","sources":["../../src/components/vedic-kundli.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAEvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EACN,KAAK,UAAU,EAKf,MAAM,2BAA2B,CAAC;AAGnC;;;;;;;;;;;;;GAaG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC9C,MAAM,CAAC,MAAM,4BAA8B;IAG3C,IAAI,EAAE,kBAAkB,GAAG,IAAI,CAAQ;IAGvC,UAAU,EAAE,UAAU,CAAW;IAEjC,OAAO,CAAC,SAAS;IAKjB,OAAO,CAAC,QAAQ,CAEd;IAEF,MAAM;CAoBN;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD"}