@roxyapi/ui 0.5.0 → 0.6.0

package/dist/components/ashtakavarga-grid.js

@@ -1,578 +1,2 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-
-// packages/ui/src/components/ashtakavarga-grid.ts
-import { css as css2, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-
-// packages/ui/src/tokens/index.ts
-var SIGN_GLYPH = {
-  Aries: "\u2648",
-  Taurus: "\u2649",
-  Gemini: "\u264A",
-  Cancer: "\u264B",
-  Leo: "\u264C",
-  Virgo: "\u264D",
-  Libra: "\u264E",
-  Scorpio: "\u264F",
-  Sagittarius: "\u2650",
-  Capricorn: "\u2651",
-  Aquarius: "\u2652",
-  Pisces: "\u2653"
-};
-var SIGNS_ORDER = [
-  "Aries",
-  "Taurus",
-  "Gemini",
-  "Cancer",
-  "Leo",
-  "Virgo",
-  "Libra",
-  "Scorpio",
-  "Sagittarius",
-  "Capricorn",
-  "Aquarius",
-  "Pisces"
-];
-var RASHI_KEYS = SIGNS_ORDER.map(
-  (s) => s.toLowerCase()
-);
-
-// packages/ui/src/utils/base-styles.ts
-import { css } from "lit";
-var baseStyles = css`
-	:host {
-		display: block;
-		container-type: inline-size;
-		font-family: var(
-			--roxy-font-sans,
-			system-ui,
-			-apple-system,
-			BlinkMacSystemFont,
-			'Segoe UI',
-			Roboto,
-			sans-serif
-		);
-		color: var(--roxy-fg, #0a0a0a);
-		background: transparent;
-		font-size: var(--roxy-text-base, 1rem);
-		line-height: var(--roxy-leading-normal, 1.5);
-		animation: roxy-fade-in var(--roxy-motion-duration, 200ms)
-			var(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1)) both;
-	}
-
-	*,
-	*::before,
-	*::after {
-		box-sizing: border-box;
-	}
-
-	@keyframes roxy-fade-in {
-		from {
-			opacity: 0;
-			transform: translateY(2px);
-		}
-		to {
-			opacity: 1;
-			transform: translateY(0);
-		}
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		:host {
-			animation: none;
-		}
-	}
-
-	.roxy-skeleton {
-		background: linear-gradient(
-			90deg,
-			var(--roxy-border, #e4e4e7) 0%,
-			color-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent) 50%,
-			var(--roxy-border, #e4e4e7) 100%
-		);
-		background-size: 200% 100%;
-		animation: roxy-shimmer 1.4s ease-in-out infinite;
-		border-radius: var(--roxy-radius-md, 8px);
-	}
-
-	@keyframes roxy-shimmer {
-		0% {
-			background-position: 200% 0;
-		}
-		100% {
-			background-position: -200% 0;
-		}
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.roxy-skeleton {
-			animation: none;
-		}
-	}
-
-	.roxy-empty {
-		padding: var(--roxy-space-lg, 1.5rem);
-		color: var(--roxy-muted, #71717a);
-		text-align: center;
-		font-size: var(--roxy-text-sm, 0.875rem);
-	}
-
-	:host(:focus-within) .roxy-card {
-		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/markup-data.ts
-var ROXY_DATA_CLASS = "roxy-data";
-function isJsonScript(el) {
-  return el.nodeName === "SCRIPT" && el.getAttribute("type") === "application/json";
-}
-var MarkupDataController = class {
-  constructor(host) {
-    this.host = host;
-    host.addController(this);
-  }
-  hostConnected() {
-    if (this.host.data != null) return;
-    const parsed = this.read();
-    if (parsed === void 0) return;
-    this.host.data = parsed;
-    this.host.requestUpdate();
-  }
-  /**
-   * Resolve the embedded payload. Returns `undefined` when there is nothing valid to read so the caller can leave `host.data` untouched.
-   */
-  read() {
-    const inline = this.findInlineScript();
-    return inline ? this.parse(inline.textContent) : void 0;
-  }
-  /**
-   * Direct-child `<script type="application/json" class="roxy-data">`. Scoped to immediate children so a nested data-driven component never has its script read by an ancestor, and so sibling fallback markup is ignored.
-   */
-  findInlineScript() {
-    for (const child of Array.from(this.host.children)) {
-      if (isJsonScript(child) && child.classList.contains(ROXY_DATA_CLASS)) {
-        return child;
-      }
-    }
-    return null;
-  }
-  parse(text) {
-    if (!text?.trim()) return void 0;
-    try {
-      return JSON.parse(text);
-    } catch {
-      return void 0;
-    }
-  }
-};
-
-// packages/ui/src/components/ashtakavarga-grid.ts
-var TAB_LABELS = {
-  sarva: "Sarvashtakavarga",
-  bhinna: "Bhinnashtakavarga",
-  pinda: "Shodhya Pinda"
-};
-var TABS = ["sarva", "bhinna", "pinda"];
-var RoxyAshtakavargaGrid = class extends LitElement {
-  constructor() {
-    super();
-    this.data = null;
-    this.activeTab = "sarva";
-    new MarkupDataController(this);
-  }
-  render() {
-    if (!this.data) {
-      return html`<div class="roxy-empty" role="status">No ashtakavarga data</div>`;
-    }
-    const signs = this.data.signs ?? [];
-    return html`<div class="wrap" aria-label="Ashtakavarga grid">
-			<div class="head">
-				<h2 class="title">Ashtakavarga</h2>
-				${signs.length ? html`<p class="subtitle">${signs.length} signs</p>` : nothing}
-			</div>
-
-			<div
-				class="tablist"
-				role="tablist"
-				aria-label="Ashtakavarga views"
-				@keydown=${this.onTabKeyDown}
-			>
-				${TABS.map(
-      (tab) => html`<button
-						class="tab"
-						role="tab"
-						id="tab-${tab}"
-						aria-selected=${this.activeTab === tab ? "true" : "false"}
-						aria-controls="panel-${tab}"
-						tabindex=${this.activeTab === tab ? "0" : "-1"}
-						@click=${() => {
-        this.activeTab = tab;
-      }}
-					>
-						${TAB_LABELS[tab]}
-					</button>`
-    )}
-			</div>
-
-			<div
-				id="panel-${this.activeTab}"
-				role="tabpanel"
-				aria-labelledby="tab-${this.activeTab}"
-			>
-				${this.activeTab === "sarva" ? this.renderSarva(signs) : this.activeTab === "bhinna" ? this.renderBhinna(signs) : this.renderPinda()}
-			</div>
-		</div>`;
-  }
-  onTabKeyDown(e) {
-    const idx = TABS.indexOf(this.activeTab);
-    if (e.key === "ArrowRight") {
-      e.preventDefault();
-      this.activeTab = TABS[(idx + 1) % TABS.length];
-      this.focusActiveTab();
-    } else if (e.key === "ArrowLeft") {
-      e.preventDefault();
-      this.activeTab = TABS[(idx - 1 + TABS.length) % TABS.length];
-      this.focusActiveTab();
-    }
-  }
-  focusActiveTab() {
-    requestAnimationFrame(() => {
-      const btn = this.shadowRoot?.querySelector(
-        `#tab-${this.activeTab}`
-      );
-      btn?.focus();
-    });
-  }
-  /**
-   * Bhinna bindus per planet per sign run 0..8 (sum of 0/1 contributions
-   * from each of the 8 reference points). Bucket directly by raw count.
-   */
-  bhinnaHeat(count) {
-    if (count <= 1) return "heat-1";
-    if (count <= 2) return "heat-2";
-    if (count <= 3) return "heat-3";
-    if (count <= 4) return "heat-4";
-    if (count <= 5) return "heat-5";
-    if (count <= 6) return "heat-6";
-    return "heat-7";
-  }
-  /**
-   * Sarva bindus per sign are the column total across all 7 planets, range
-   * roughly 0..56 with typical values 20..40. Bucketed per classical
-   * interpretation: 25 below par, 25..30 average, 30..40 strong, 40+ very
-   * strong. Bucket spans intentionally widen at the extremes so a single
-   * outlier sign reads as exceptional.
-   */
-  sarvaHeat(count) {
-    if (count <= 18) return "heat-1";
-    if (count <= 23) return "heat-2";
-    if (count <= 28) return "heat-3";
-    if (count <= 32) return "heat-4";
-    if (count <= 37) return "heat-5";
-    if (count <= 42) return "heat-6";
-    return "heat-7";
-  }
-  renderSarva(signs) {
-    const sav = this.data.sarvashtakavarga;
-    if (!sav) return html`<p class="roxy-empty">No sarvashtakavarga data</p>`;
-    return html`<div class="overflow-scroll">
-			<table aria-label="Sarvashtakavarga bindu counts per sign">
-				<thead>
-					<tr>
-						<th scope="col">Sign</th>
-						<th scope="col">Bindus</th>
-					</tr>
-				</thead>
-				<tbody>
-					${signs.map((sign, i) => {
-      const count = sav.bindus[i] ?? 0;
-      const hc = this.sarvaHeat(count);
-      return html`<tr>
-							<td>
-								<div class="planet-cell">
-									<span class="glyph" aria-hidden="true">${SIGN_GLYPH[sign] ?? ""}</span>
-									${sign}
-								</div>
-							</td>
-							<td class="${`heat-cell ${hc}`}">${count}</td>
-						</tr>`;
-    })}
-				</tbody>
-				<tfoot>
-					<tr class="total-row">
-						<td>Total</td>
-						<td>${sav.total}</td>
-					</tr>
-				</tfoot>
-			</table>
-		</div>`;
-  }
-  renderBhinna(signs) {
-    const bhinna = this.data.bhinnashtakavarga;
-    if (!bhinna?.length)
-      return html`<p class="roxy-empty">No bhinnashtakavarga data</p>`;
-    return html`<div class="overflow-scroll">
-			<table class="bhinna-table" aria-label="Bhinnashtakavarga planet-by-sign grid">
-				<thead>
-					<tr>
-						<th scope="col">Planet</th>
-						${signs.map(
-      (s) => html`<th scope="col" title=${s}>${SIGN_GLYPH[s] ?? s.slice(0, 2)}</th>`
-    )}
-						<th scope="col">Total</th>
-					</tr>
-				</thead>
-				<tbody>
-					${bhinna.map(
-      (row) => html`<tr>
-						<td>${row.planet}</td>
-						${row.bindus.map((count) => {
-        const hc = this.bhinnaHeat(count);
-        return html`<td class="${`heat-cell ${hc}`}">${count}</td>`;
-      })}
-						<td>${row.total}</td>
-					</tr>`
-    )}
-				</tbody>
-			</table>
-		</div>`;
-  }
-  renderPinda() {
-    const pinda = this.data.shodhyaPinda;
-    if (!pinda?.length)
-      return html`<p class="roxy-empty">No shodhya pinda data</p>`;
-    return html`<div class="overflow-scroll">
-			<table aria-label="Shodhya Pinda planet strength scores">
-				<thead>
-					<tr>
-						<th scope="col">Planet</th>
-						<th scope="col">Rashi Pinda</th>
-						<th scope="col">Graha Pinda</th>
-						<th scope="col">Shodhya Pinda</th>
-					</tr>
-				</thead>
-				<tbody>
-					${pinda.map(
-      (row) => html`<tr>
-							<td>${row.planet}</td>
-							<td>${row.rashiPinda}</td>
-							<td>${row.grahaPinda}</td>
-							<td>${row.shodhyaPinda}</td>
-						</tr>`
-    )}
-				</tbody>
-			</table>
-		</div>`;
-  }
-};
-RoxyAshtakavargaGrid.styles = [
-  baseStyles,
-  css2`
-			.wrap {
-				display: grid;
-				gap: var(--roxy-space-md, 1rem);
-			}
-
-			.head {
-				display: flex;
-				justify-content: space-between;
-				align-items: baseline;
-				gap: var(--roxy-space-md, 1rem);
-				flex-wrap: wrap;
-			}
-
-			.title {
-				font-size: var(--roxy-text-lg, 1.125rem);
-				font-weight: var(--roxy-weight-bold, 600);
-				margin: 0;
-			}
-
-			.subtitle {
-				color: var(--roxy-muted, #71717a);
-				font-size: var(--roxy-text-sm, 0.875rem);
-				margin: 0;
-			}
-
-			/* Tabs */
-			.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);
-			}
-
-			/* Tables */
-			.overflow-scroll {
-				overflow-x: auto;
-				-webkit-overflow-scrolling: touch;
-			}
-
-			table {
-				width: 100%;
-				border-collapse: collapse;
-				font-size: var(--roxy-text-sm, 0.875rem);
-			}
-
-			th,
-			td {
-				padding: var(--roxy-space-sm, 0.5rem);
-				border-bottom: 1px solid var(--roxy-border, #e4e4e7);
-				text-align: center;
-			}
-
-			th {
-				color: var(--roxy-muted, #71717a);
-				font-weight: var(--roxy-weight-bold, 600);
-				text-transform: uppercase;
-				font-size: var(--roxy-text-xs, 0.75rem);
-				letter-spacing: 0.06em;
-			}
-
-			td:first-child,
-			th:first-child {
-				text-align: left;
-			}
-
-			.glyph {
-				font-size: 1.1em;
-				margin-right: 3px;
-				line-height: 1;
-			}
-
-			.planet-cell {
-				display: flex;
-				align-items: center;
-				gap: 4px;
-				white-space: nowrap;
-			}
-
-			.total-row td {
-				font-weight: var(--roxy-weight-bold, 600);
-				border-top: 2px solid var(--roxy-border, #e4e4e7);
-				border-bottom: none;
-			}
-
-			/* Heat cells. Single base hue (var --roxy-heat) mixed with
-			 * transparent at increasing percentages produces seven readable
-			 * tiers in both light and dark themes. Text colour stays
-			 * var(--roxy-fg) so it inverts with the host theme without
-			 * per-tier overrides. */
-			.heat-cell {
-				border-radius: var(--roxy-radius-sm, 4px);
-				font-weight: var(--roxy-weight-bold, 600);
-				min-width: 2rem;
-				font-variant-numeric: tabular-nums;
-				color: var(--roxy-fg, currentColor);
-			}
-
-			.heat-1 { background: color-mix(in srgb, var(--roxy-heat, #ef4444) 6%, transparent); }
-			.heat-2 { background: color-mix(in srgb, var(--roxy-heat, #ef4444) 14%, transparent); }
-			.heat-3 { background: color-mix(in srgb, var(--roxy-heat, #ef4444) 26%, transparent); }
-			.heat-4 { background: color-mix(in srgb, var(--roxy-heat, #ef4444) 40%, transparent); }
-			.heat-5 { background: color-mix(in srgb, var(--roxy-heat, #ef4444) 55%, transparent); }
-			.heat-6 { background: color-mix(in srgb, var(--roxy-heat, #ef4444) 72%, transparent); }
-			.heat-7 { background: color-mix(in srgb, var(--roxy-heat, #ef4444) 90%, transparent); }
-
-			/* Bhinna grid: planet header column narrower */
-			.bhinna-table th:first-child,
-			.bhinna-table td:first-child {
-				min-width: 5rem;
-			}
-
-			/* Tight cells below 480px so the 14-column bhinna grid stops
-			 * overflowing the viewport. The wrapper keeps overflow-x:auto as
-			 * a fallback for very long content. */
-			@container (max-width: 480px) {
-				.bhinna-table th,
-				.bhinna-table td {
-					padding: 0.3rem 0.35rem;
-					font-size: var(--roxy-text-xs, 0.75rem);
-				}
-				.bhinna-table th:first-child,
-				.bhinna-table td:first-child {
-					min-width: 3.5rem;
-				}
-				.heat-cell {
-					min-width: 1.5rem;
-				}
-			}
-			/* Visual cue that the bhinna table is scrollable below the breakpoint:
-			 * a soft gradient at the right edge so users see there is more to scroll. */
-			.overflow-scroll {
-				mask-image: linear-gradient(
-					to right,
-					transparent 0,
-					black 0.5rem,
-					black calc(100% - 1rem),
-					transparent 100%
-				);
-				-webkit-mask-image: linear-gradient(
-					to right,
-					transparent 0,
-					black 0.5rem,
-					black calc(100% - 1rem),
-					transparent 100%
-				);
-			}
-		`
-];
-__decorateClass([
-  property({ attribute: false })
-], RoxyAshtakavargaGrid.prototype, "data", 2);
-__decorateClass([
-  state()
-], RoxyAshtakavargaGrid.prototype, "activeTab", 2);
-RoxyAshtakavargaGrid = __decorateClass([
-  customElement("roxy-ashtakavarga-grid")
-], RoxyAshtakavargaGrid);
-export {
-  RoxyAshtakavargaGrid
-};
+var m=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var c=(o,a,t,e)=>{for(var r=e>1?void 0:e?g(a,t):a,i=o.length-1,s;i>=0;i--)(s=o[i])&&(r=(e?s(a,t,r):s(r))||r);return e&&r&&m(a,t,r),r};import{css as S,html as n,LitElement as w,nothing as k}from"lit";import{customElement as T,property as A,state as $}from"lit/decorators.js";var p={Aries:"\u2648",Taurus:"\u2649",Gemini:"\u264A",Cancer:"\u264B",Leo:"\u264C",Virgo:"\u264D",Libra:"\u264E",Scorpio:"\u264F",Sagittarius:"\u2650",Capricorn:"\u2651",Aquarius:"\u2652",Pisces:"\u2653"};var v=["Aries","Taurus","Gemini","Cancer","Leo","Virgo","Libra","Scorpio","Sagittarius","Capricorn","Aquarius","Pisces"],R=v.map(o=>o.toLowerCase());import{css as f}from"lit";var b=f`:host{font-family:var(--roxy-font-sans,system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);color:var(--roxy-fg,#0a0a0a);font-size:var(--roxy-text-base,1rem);line-height:var(--roxy-leading-normal,1.5);animation:roxy-fade-in var(--roxy-motion-duration,.2s) var(--roxy-motion-easing,cubic-bezier(.4, 0, .2, 1)) both;background:0 0;display:block;container-type:inline-size}*,:before,:after{box-sizing:border-box}@keyframes roxy-fade-in{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){:host{animation:none}}.roxy-skeleton{background:linear-gradient(90deg, var(--roxy-border,#e4e4e7) 0%, color-mix(in srgb, var(--roxy-border,#e4e4e7) 60%, transparent) 50%, var(--roxy-border,#e4e4e7) 100%);border-radius:var(--roxy-radius-md,8px);background-size:200% 100%;animation:1.4s ease-in-out infinite roxy-shimmer}@keyframes roxy-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media (prefers-reduced-motion:reduce){.roxy-skeleton{animation:none}}.roxy-empty{padding:var(--roxy-space-lg,1.5rem);color:var(--roxy-muted,#71717a);text-align:center;font-size:var(--roxy-text-sm,.875rem)}:host(:focus-within) .roxy-card{outline:2px solid var(--roxy-ring,#f59e0b66);outline-offset:2px}:host{font-variant-emoji:text}`;var x="roxy-data";function y(o){return o.nodeName==="SCRIPT"&&o.getAttribute("type")==="application/json"}var h=class{constructor(a){this.host=a,a.addController(this)}hostConnected(){if(this.host.data!=null)return;let a=this.read();a!==void 0&&(this.host.data=a,this.host.requestUpdate())}read(){let a=this.findInlineScript();return a?this.parse(a.textContent):void 0}findInlineScript(){for(let a of Array.from(this.host.children))if(y(a)&&a.classList.contains(x))return a;return null}parse(a){if(a?.trim())try{return JSON.parse(a)}catch{return}}};var L={sarva:"Sarvashtakavarga",bhinna:"Bhinnashtakavarga",pinda:"Shodhya Pinda"},l=["sarva","bhinna","pinda"],d=class extends w{constructor(){super();this.data=null;this.activeTab="sarva";new h(this)}render(){if(!this.data)return n`<div class="roxy-empty" role="status">No ashtakavarga data</div>`;let t=this.data.signs??[];return n`<div class="wrap" aria-label="Ashtakavarga grid"><div class="head"><h2 class="title">Ashtakavarga</h2>${t.length?n`<p class="subtitle">${t.length} signs</p>`:k}</div><div class="tablist" role="tablist" aria-label="Ashtakavarga views" @keydown="${this.onTabKeyDown}">${l.map(e=>n`<button class="tab" role="tab" id="tab-${e}" aria-selected="${this.activeTab===e?"true":"false"}" aria-controls="panel-${e}" tabindex="${this.activeTab===e?"0":"-1"}" @click="${()=>{this.activeTab=e}}">${L[e]}</button>`)}</div><div id="panel-${this.activeTab}" role="tabpanel" aria-labelledby="tab-${this.activeTab}">${this.activeTab==="sarva"?this.renderSarva(t):this.activeTab==="bhinna"?this.renderBhinna(t):this.renderPinda()}</div></div>`}onTabKeyDown(t){let e=l.indexOf(this.activeTab);t.key==="ArrowRight"?(t.preventDefault(),this.activeTab=l[(e+1)%l.length],this.focusActiveTab()):t.key==="ArrowLeft"&&(t.preventDefault(),this.activeTab=l[(e-1+l.length)%l.length],this.focusActiveTab())}focusActiveTab(){requestAnimationFrame(()=>{this.shadowRoot?.querySelector(`#tab-${this.activeTab}`)?.focus()})}bhinnaHeat(t){return t<=1?"heat-1":t<=2?"heat-2":t<=3?"heat-3":t<=4?"heat-4":t<=5?"heat-5":t<=6?"heat-6":"heat-7"}sarvaHeat(t){return t<=18?"heat-1":t<=23?"heat-2":t<=28?"heat-3":t<=32?"heat-4":t<=37?"heat-5":t<=42?"heat-6":"heat-7"}renderSarva(t){let e=this.data.sarvashtakavarga;return e?n`<div class="overflow-scroll"><table aria-label="Sarvashtakavarga bindu counts per sign"><thead><tr><th scope="col">Sign</th><th scope="col">Bindus</th></tr></thead><tbody>${t.map((r,i)=>{let s=e.bindus[i]??0,u=this.sarvaHeat(s);return n`<tr><td><div class="planet-cell"><span class="glyph" aria-hidden="true">${p[r]??""}</span> ${r}</div></td><td class="${`heat-cell ${u}`}">${s}</td></tr>`})}</tbody><tfoot><tr class="total-row"><td>Total</td><td>${e.total}</td></tr></tfoot></table></div>`:n`<p class="roxy-empty">No sarvashtakavarga data</p>`}renderBhinna(t){let e=this.data.bhinnashtakavarga;return e?.length?n`<div class="overflow-scroll"><table class="bhinna-table" aria-label="Bhinnashtakavarga planet-by-sign grid"><thead><tr><th scope="col">Planet</th>${t.map(r=>n`<th scope="col" title="${r}">${p[r]??r.slice(0,2)}</th>`)}<th scope="col">Total</th></tr></thead><tbody>${e.map(r=>n`<tr><td>${r.planet}</td>${r.bindus.map(i=>{let s=this.bhinnaHeat(i);return n`<td class="${`heat-cell ${s}`}">${i}</td>`})}<td>${r.total}</td></tr>`)}</tbody></table></div>`:n`<p class="roxy-empty">No bhinnashtakavarga data</p>`}renderPinda(){let t=this.data.shodhyaPinda;return t?.length?n`<div class="overflow-scroll"><table aria-label="Shodhya Pinda planet strength scores"><thead><tr><th scope="col">Planet</th><th scope="col">Rashi Pinda</th><th scope="col">Graha Pinda</th><th scope="col">Shodhya Pinda</th></tr></thead><tbody>${t.map(e=>n`<tr><td>${e.planet}</td><td>${e.rashiPinda}</td><td>${e.grahaPinda}</td><td>${e.shodhyaPinda}</td></tr>`)}</tbody></table></div>`:n`<p class="roxy-empty">No shodhya pinda data</p>`}};d.styles=[b,S`.wrap{gap:var(--roxy-space-md,1rem);display:grid}.head{justify-content:space-between;align-items:baseline;gap:var(--roxy-space-md,1rem);flex-wrap:wrap;display:flex}.title{font-size:var(--roxy-text-lg,1.125rem);font-weight:var(--roxy-weight-bold,600);margin:0}.subtitle{color:var(--roxy-muted,#71717a);font-size:var(--roxy-text-sm,.875rem);margin:0}.tablist{border-bottom:2px solid var(--roxy-border,#e4e4e7);gap:2px;display:flex}.tab{padding:var(--roxy-space-xs,.25rem) var(--roxy-space-md,1rem);font-size:var(--roxy-text-sm,.875rem);cursor:pointer;color:var(--roxy-muted,#71717a);transition:color var(--roxy-motion-duration,.2s) var(--roxy-motion-easing,ease);background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-2px;font-family:inherit}.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)}.overflow-scroll{-webkit-overflow-scrolling:touch;overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:var(--roxy-text-sm,.875rem)}th,td{padding:var(--roxy-space-sm,.5rem);border-bottom:1px solid var(--roxy-border,#e4e4e7);text-align:center}th{color:var(--roxy-muted,#71717a);font-weight:var(--roxy-weight-bold,600);text-transform:uppercase;font-size:var(--roxy-text-xs,.75rem);letter-spacing:.06em}td:first-child,th:first-child{text-align:left}.glyph{margin-right:3px;font-size:1.1em;line-height:1}.planet-cell{white-space:nowrap;align-items:center;gap:4px;display:flex}.total-row td{font-weight:var(--roxy-weight-bold,600);border-top:2px solid var(--roxy-border,#e4e4e7);border-bottom:none}.heat-cell{border-radius:var(--roxy-radius-sm,4px);font-weight:var(--roxy-weight-bold,600);font-variant-numeric:tabular-nums;min-width:2rem;color:var(--roxy-fg,currentColor)}.heat-1{background:color-mix(in srgb, var(--roxy-heat,#ef4444) 6%, transparent)}.heat-2{background:color-mix(in srgb, var(--roxy-heat,#ef4444) 14%, transparent)}.heat-3{background:color-mix(in srgb, var(--roxy-heat,#ef4444) 26%, transparent)}.heat-4{background:color-mix(in srgb, var(--roxy-heat,#ef4444) 40%, transparent)}.heat-5{background:color-mix(in srgb, var(--roxy-heat,#ef4444) 55%, transparent)}.heat-6{background:color-mix(in srgb, var(--roxy-heat,#ef4444) 72%, transparent)}.heat-7{background:color-mix(in srgb, var(--roxy-heat,#ef4444) 90%, transparent)}.bhinna-table th:first-child,.bhinna-table td:first-child{min-width:5rem}@container (width<=480px){.bhinna-table th,.bhinna-table td{font-size:var(--roxy-text-xs,.75rem);padding:.3rem .35rem}.bhinna-table th:first-child,.bhinna-table td:first-child{min-width:3.5rem}.heat-cell{min-width:1.5rem}}.overflow-scroll{-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 .5rem calc(100% - 1rem),#0000 100%);mask-image:linear-gradient(90deg,#0000 0,#000 .5rem calc(100% - 1rem),#0000 100%)}`],c([A({attribute:!1})],d.prototype,"data",2),c([$()],d.prototype,"activeTab",2),d=c([T("roxy-ashtakavarga-grid")],d);export{d as RoxyAshtakavargaGrid};
 //# sourceMappingURL=ashtakavarga-grid.js.map