@roxyapi/ui 0.4.1 → 0.6.0

package/dist/components/location-search.js

@@ -1,462 +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/location-search.ts
-import { css as css2, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-
-// 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/debounce.ts
-function debounce(fn, wait) {
-  let timer;
-  const debounced = ((...args) => {
-    if (timer) clearTimeout(timer);
-    timer = setTimeout(() => {
-      timer = void 0;
-      fn(...args);
-    }, wait);
-  });
-  debounced.cancel = () => {
-    if (timer) {
-      clearTimeout(timer);
-      timer = void 0;
-    }
-  };
-  return debounced;
-}
-
-// packages/ui/src/components/location-search.ts
-var RoxyLocationSearch = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.endpoint = "https://roxyapi.com/api/v2/location/search";
-    this.placeholder = "Search city";
-    this.defaultValue = "";
-    this.query = "";
-    this.results = [];
-    this.isOpen = false;
-    this.isLoading = false;
-    this.highlight = -1;
-    this.secretKeyWarned = false;
-    this.debouncedFetch = debounce((q) => {
-      void this.fetchResults(q);
-    }, 300);
-    this.onInput = (e) => {
-      const value = e.target.value;
-      this.query = value;
-      if (value.length < 2) {
-        this.results = [];
-        this.isOpen = false;
-        this.highlight = -1;
-        return;
-      }
-      this.debouncedFetch(value);
-    };
-    this.onKeyDown = (e) => {
-      if (!this.isOpen || this.results.length === 0) {
-        if (e.key === "ArrowDown" && this.query.length >= 2) {
-          void this.fetchResults(this.query);
-          e.preventDefault();
-        }
-        return;
-      }
-      if (e.key === "ArrowDown") {
-        e.preventDefault();
-        this.highlight = (this.highlight + 1) % this.results.length;
-      } else if (e.key === "ArrowUp") {
-        e.preventDefault();
-        this.highlight = (this.highlight - 1 + this.results.length) % this.results.length;
-      } else if (e.key === "Enter") {
-        e.preventDefault();
-        const target = this.results[this.highlight] ?? this.results[0];
-        if (target) this.select(target);
-      } else if (e.key === "Escape") {
-        this.isOpen = false;
-      }
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.query = this.defaultValue;
-    this.clickOutsideHandler = (e) => {
-      const path = e.composedPath();
-      if (!path.includes(this)) this.isOpen = false;
-    };
-    document.addEventListener("mousedown", this.clickOutsideHandler);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this.clickOutsideHandler) {
-      document.removeEventListener("mousedown", this.clickOutsideHandler);
-    }
-    this.debouncedFetch.cancel();
-    if (this.abortController) {
-      this.abortController.abort();
-      this.abortController = void 0;
-    }
-  }
-  warnIfSecretKey() {
-    if (this.secretKeyWarned) return;
-    if (!this.apiKey) return;
-    if (this.apiKey.startsWith("pk_")) return;
-    this.secretKeyWarned = true;
-    const message = "Possible secret key in client-side <roxy-location-search>; use a `pk_` publishable key with origin allowlist instead.";
-    console.warn(message);
-    this.dispatchEvent(
-      new CustomEvent("roxy-validation-error", {
-        detail: { reason: "possible-secret-key", message },
-        bubbles: true,
-        composed: true
-      })
-    );
-  }
-  async fetchResults(q) {
-    this.warnIfSecretKey();
-    if (this.abortController) this.abortController.abort();
-    const controller = new AbortController();
-    this.abortController = controller;
-    this.isLoading = true;
-    try {
-      const url = new URL(this.endpoint);
-      url.searchParams.set("q", q);
-      url.searchParams.set("limit", "8");
-      const headers = {
-        Accept: "application/json"
-      };
-      if (this.apiKey && this.publishableKey) {
-        console.warn(
-          "[roxy-location-search] both api-key and publishable-key set; using publishable-key. Remove api-key from your widget markup."
-        );
-      }
-      const key = this.publishableKey ?? this.apiKey;
-      if (key) headers["X-API-Key"] = key;
-      const res = await fetch(url, { headers, signal: controller.signal });
-      if (!res.ok) throw new Error(`HTTP ${res.status}`);
-      const json = await res.json();
-      if (controller.signal.aborted) return;
-      this.results = json.cities ?? [];
-      this.isOpen = this.results.length > 0;
-      this.highlight = this.results.length > 0 ? 0 : -1;
-    } catch (err) {
-      if (err?.name === "AbortError") return;
-      this.results = [];
-      this.isOpen = false;
-    } finally {
-      if (this.abortController === controller) {
-        this.abortController = void 0;
-      }
-      if (!controller.signal.aborted) this.isLoading = false;
-    }
-  }
-  select(city) {
-    this.query = `${city.city}${city.province ? `, ${city.province}` : ""}, ${city.country}`;
-    this.isOpen = false;
-    this.results = [];
-    this.dispatchEvent(
-      new CustomEvent("roxy-location-select", {
-        detail: city,
-        bubbles: true,
-        composed: true
-      })
-    );
-  }
-  render() {
-    return html`<div class="field">
-			<input
-				type="text"
-				role="combobox"
-				aria-expanded=${this.isOpen ? "true" : "false"}
-				aria-controls="roxy-location-listbox"
-				aria-activedescendant=${this.isOpen && this.highlight >= 0 ? `roxy-location-option-${this.highlight}` : ""}
-				aria-autocomplete="list"
-				autocomplete="off"
-				placeholder=${this.placeholder}
-				.value=${this.query}
-				@input=${this.onInput}
-				@keydown=${this.onKeyDown}
-				@focus=${() => {
-      if (this.results.length > 0) this.isOpen = true;
-    }}
-			/>
-			${this.isLoading ? html`<span class="spinner" role="status" aria-label="Loading"></span>` : nothing}
-			${this.isOpen ? html`<ul
-						id="roxy-location-listbox"
-						class="results"
-						role="listbox"
-					>
-						${this.results.length === 0 ? html`<li class="empty" role="status">No cities found</li>` : this.results.map(
-      (city, idx) => html`<li role="presentation">
-										<button
-											type="button"
-											class="option"
-											role="option"
-											id=${`roxy-location-option-${idx}`}
-											aria-selected=${this.highlight === idx ? "true" : "false"}
-											@click=${() => this.select(city)}
-											@mouseenter=${() => {
-        this.highlight = idx;
-      }}
-										>
-											<span class="city">${city.city}</span>
-											<span class="where"
-												>${city.province ? html`${city.province}, ` : ""}${city.country}</span
-											>
-											<span class="tz"
-												>UTC${city.utcOffset >= 0 ? "+" : ""}${city.utcOffset}</span
-											>
-										</button>
-									</li>`
-    )}
-					</ul>` : nothing}
-		</div>`;
-  }
-};
-RoxyLocationSearch.styles = [
-  baseStyles,
-  css2`
-			:host {
-				display: block;
-				position: relative;
-			}
-			.field {
-				position: relative;
-			}
-			input {
-				width: 100%;
-				padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);
-				font-size: var(--roxy-text-base, 1rem);
-				font-family: inherit;
-				color: var(--roxy-fg, #0a0a0a);
-				background: var(--roxy-bg, #fff);
-				border: 1px solid var(--roxy-border, #e4e4e7);
-				border-radius: var(--roxy-radius-md, 8px);
-				transition:
-					border-color var(--roxy-motion-duration, 200ms)
-					var(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1));
-				box-sizing: border-box;
-			}
-			input:focus {
-				outline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));
-				outline-offset: 2px;
-				border-color: var(--roxy-accent-fg, #b45309);
-			}
-			.spinner {
-				position: absolute;
-				right: 12px;
-				top: 50%;
-				transform: translateY(-50%);
-				width: 14px;
-				height: 14px;
-				border: 2px solid var(--roxy-muted, #71717a);
-				border-top-color: transparent;
-				border-radius: 50%;
-				animation: roxy-spin 700ms linear infinite;
-			}
-			@keyframes roxy-spin {
-				to {
-					transform: translateY(-50%) rotate(360deg);
-				}
-			}
-			@media (prefers-reduced-motion: reduce) {
-				.spinner {
-					animation: none;
-				}
-			}
-
-			.results {
-				position: absolute;
-				z-index: 50;
-				top: calc(100% + 4px);
-				left: 0;
-				right: 0;
-				background: var(--roxy-bg, #fff);
-				border: 1px solid var(--roxy-border, #e4e4e7);
-				border-radius: var(--roxy-radius-md, 8px);
-				box-shadow: var(--roxy-shadow-md);
-				max-height: 22rem;
-				overflow-y: auto;
-				animation: roxy-fade-in var(--roxy-motion-duration, 200ms)
-					var(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1));
-			}
-			.option {
-				display: flex;
-				align-items: baseline;
-				gap: var(--roxy-space-sm, 0.5rem);
-				width: 100%;
-				padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);
-				background: transparent;
-				border: 0;
-				text-align: left;
-				font-family: inherit;
-				font-size: var(--roxy-text-sm, 0.875rem);
-				color: var(--roxy-fg, #0a0a0a);
-				cursor: pointer;
-				transition: background-color var(--roxy-motion-duration, 200ms);
-			}
-			.option:hover,
-			.option[aria-selected='true'] {
-				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 10%, transparent);
-			}
-			.option .city {
-				font-weight: var(--roxy-weight-bold, 600);
-			}
-			.option .where {
-				color: var(--roxy-muted, #71717a);
-				flex-grow: 1;
-			}
-			.option .tz {
-				color: var(--roxy-muted, #71717a);
-				font-size: var(--roxy-text-xs, 0.75rem);
-				font-variant-numeric: tabular-nums;
-			}
-			.empty {
-				padding: var(--roxy-space-md, 1rem);
-				color: var(--roxy-muted, #71717a);
-				font-size: var(--roxy-text-sm, 0.875rem);
-			}
-		`
-];
-__decorateClass([
-  property({ type: String, attribute: "api-key" })
-], RoxyLocationSearch.prototype, "apiKey", 2);
-__decorateClass([
-  property({ type: String, attribute: "publishable-key" })
-], RoxyLocationSearch.prototype, "publishableKey", 2);
-__decorateClass([
-  property({ type: String })
-], RoxyLocationSearch.prototype, "endpoint", 2);
-__decorateClass([
-  property({ type: String })
-], RoxyLocationSearch.prototype, "placeholder", 2);
-__decorateClass([
-  property({ type: String, attribute: "default-value" })
-], RoxyLocationSearch.prototype, "defaultValue", 2);
-__decorateClass([
-  state()
-], RoxyLocationSearch.prototype, "query", 2);
-__decorateClass([
-  state()
-], RoxyLocationSearch.prototype, "results", 2);
-__decorateClass([
-  state()
-], RoxyLocationSearch.prototype, "isOpen", 2);
-__decorateClass([
-  state()
-], RoxyLocationSearch.prototype, "isLoading", 2);
-__decorateClass([
-  state()
-], RoxyLocationSearch.prototype, "highlight", 2);
-RoxyLocationSearch = __decorateClass([
-  customElement("roxy-location-search")
-], RoxyLocationSearch);
-export {
-  RoxyLocationSearch
-};
+var b=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var s=(d,o,e,t)=>{for(var r=t>1?void 0:t?g(o,e):o,n=d.length-1,a;n>=0;n--)(a=d[n])&&(r=(t?a(o,e,r):a(r))||r);return t&&r&&b(o,e,r),r};import{css as x,html as l,LitElement as k,nothing as y}from"lit";import{customElement as w,property as u,state as p}from"lit/decorators.js";import{css as v}from"lit";var c=v`: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}`;function f(d,o){let e,t=((...r)=>{e&&clearTimeout(e),e=setTimeout(()=>{e=void 0,d(...r)},o)});return t.cancel=()=>{e&&(clearTimeout(e),e=void 0)},t}var i=class extends k{constructor(){super(...arguments);this.endpoint="https://roxyapi.com/api/v2/location/search";this.placeholder="Search city";this.defaultValue="";this.query="";this.results=[];this.isOpen=!1;this.isLoading=!1;this.highlight=-1;this.secretKeyWarned=!1;this.debouncedFetch=f(e=>{this.fetchResults(e)},300);this.onInput=e=>{let t=e.target.value;if(this.query=t,t.length<2){this.results=[],this.isOpen=!1,this.highlight=-1;return}this.debouncedFetch(t)};this.onKeyDown=e=>{if(!this.isOpen||this.results.length===0){e.key==="ArrowDown"&&this.query.length>=2&&(this.fetchResults(this.query),e.preventDefault());return}if(e.key==="ArrowDown")e.preventDefault(),this.highlight=(this.highlight+1)%this.results.length;else if(e.key==="ArrowUp")e.preventDefault(),this.highlight=(this.highlight-1+this.results.length)%this.results.length;else if(e.key==="Enter"){e.preventDefault();let t=this.results[this.highlight]??this.results[0];t&&this.select(t)}else e.key==="Escape"&&(this.isOpen=!1)}}connectedCallback(){super.connectedCallback(),this.query=this.defaultValue,this.clickOutsideHandler=e=>{e.composedPath().includes(this)||(this.isOpen=!1)},document.addEventListener("mousedown",this.clickOutsideHandler)}disconnectedCallback(){super.disconnectedCallback(),this.clickOutsideHandler&&document.removeEventListener("mousedown",this.clickOutsideHandler),this.debouncedFetch.cancel(),this.abortController&&(this.abortController.abort(),this.abortController=void 0)}warnIfSecretKey(){if(this.secretKeyWarned||!this.apiKey||this.apiKey.startsWith("pk_"))return;this.secretKeyWarned=!0;let e="Possible secret key in client-side <roxy-location-search>; use a `pk_` publishable key with origin allowlist instead.";console.warn(e),this.dispatchEvent(new CustomEvent("roxy-validation-error",{detail:{reason:"possible-secret-key",message:e},bubbles:!0,composed:!0}))}async fetchResults(e){this.warnIfSecretKey(),this.abortController&&this.abortController.abort();let t=new AbortController;this.abortController=t,this.isLoading=!0;try{let r=new URL(this.endpoint);r.searchParams.set("q",e),r.searchParams.set("limit","8");let n={Accept:"application/json"};this.apiKey&&this.publishableKey&&console.warn("[roxy-location-search] both api-key and publishable-key set; using publishable-key. Remove api-key from your widget markup.");let a=this.publishableKey??this.apiKey;a&&(n["X-API-Key"]=a);let h=await fetch(r,{headers:n,signal:t.signal});if(!h.ok)throw new Error(`HTTP ${h.status}`);let m=await h.json();if(t.signal.aborted)return;this.results=m.cities??[],this.isOpen=this.results.length>0,this.highlight=this.results.length>0?0:-1}catch(r){if(r?.name==="AbortError")return;this.results=[],this.isOpen=!1}finally{this.abortController===t&&(this.abortController=void 0),t.signal.aborted||(this.isLoading=!1)}}select(e){this.query=`${e.city}${e.province?`, ${e.province}`:""}, ${e.country}`,this.isOpen=!1,this.results=[],this.dispatchEvent(new CustomEvent("roxy-location-select",{detail:e,bubbles:!0,composed:!0}))}render(){return l`<div class="field"><input type="text" role="combobox" aria-expanded="${this.isOpen?"true":"false"}" aria-controls="roxy-location-listbox" aria-activedescendant="${this.isOpen&&this.highlight>=0?`roxy-location-option-${this.highlight}`:""}" aria-autocomplete="list" autocomplete="off" placeholder="${this.placeholder}" .value="${this.query}" @input="${this.onInput}" @keydown="${this.onKeyDown}" @focus="${()=>{this.results.length>0&&(this.isOpen=!0)}}"> ${this.isLoading?l`<span class="spinner" role="status" aria-label="Loading"></span>`:y} ${this.isOpen?l`<ul id="roxy-location-listbox" class="results" role="listbox">${this.results.length===0?l`<li class="empty" role="status">No cities found</li>`:this.results.map((e,t)=>l`<li role="presentation"><button type="button" class="option" role="option" id="${`roxy-location-option-${t}`}" aria-selected="${this.highlight===t?"true":"false"}" @click="${()=>this.select(e)}" @mouseenter="${()=>{this.highlight=t}}"><span class="city">${e.city}</span> <span class="where">${e.province?l`${e.province},`:""}${e.country}</span> <span class="tz">UTC${e.utcOffset>=0?"+":""}${e.utcOffset}</span></button></li>`)}</ul>`:y}</div>`}};i.styles=[c,x`:host{display:block;position:relative}.field{position:relative}input{width:100%;padding:var(--roxy-space-sm,.5rem) var(--roxy-space-md,1rem);font-size:var(--roxy-text-base,1rem);color:var(--roxy-fg,#0a0a0a);background:var(--roxy-bg,#fff);border:1px solid var(--roxy-border,#e4e4e7);border-radius:var(--roxy-radius-md,8px);transition:border-color var(--roxy-motion-duration,.2s) var(--roxy-motion-easing,cubic-bezier(.4, 0, .2, 1));box-sizing:border-box;font-family:inherit}input:focus{outline:2px solid var(--roxy-ring,#f59e0b66);outline-offset:2px;border-color:var(--roxy-accent-fg,#b45309)}.spinner{border:2px solid var(--roxy-muted,#71717a);border-top-color:#0000;border-radius:50%;width:14px;height:14px;animation:.7s linear infinite roxy-spin;position:absolute;top:50%;right:12px;transform:translateY(-50%)}@keyframes roxy-spin{to{transform:translateY(-50%)rotate(360deg)}}@media (prefers-reduced-motion:reduce){.spinner{animation:none}}.results{z-index:50;background:var(--roxy-bg,#fff);border:1px solid var(--roxy-border,#e4e4e7);border-radius:var(--roxy-radius-md,8px);box-shadow:var(--roxy-shadow-md);max-height:22rem;animation:roxy-fade-in var(--roxy-motion-duration,.2s) var(--roxy-motion-easing,cubic-bezier(.4, 0, .2, 1));position:absolute;top:calc(100% + 4px);left:0;right:0;overflow-y:auto}.option{align-items:baseline;gap:var(--roxy-space-sm,.5rem);width:100%;padding:var(--roxy-space-sm,.5rem) var(--roxy-space-md,1rem);text-align:left;font-family:inherit;font-size:var(--roxy-text-sm,.875rem);color:var(--roxy-fg,#0a0a0a);cursor:pointer;transition:background-color var(--roxy-motion-duration,.2s);background:0 0;border:0;display:flex}.option:hover,.option[aria-selected=true]{background:color-mix(in srgb, var(--roxy-accent,#f59e0b) 10%, transparent)}.option .city{font-weight:var(--roxy-weight-bold,600)}.option .where{color:var(--roxy-muted,#71717a);flex-grow:1}.option .tz{color:var(--roxy-muted,#71717a);font-size:var(--roxy-text-xs,.75rem);font-variant-numeric:tabular-nums}.empty{padding:var(--roxy-space-md,1rem);color:var(--roxy-muted,#71717a);font-size:var(--roxy-text-sm,.875rem)}`],s([u({type:String,attribute:"api-key"})],i.prototype,"apiKey",2),s([u({type:String,attribute:"publishable-key"})],i.prototype,"publishableKey",2),s([u({type:String})],i.prototype,"endpoint",2),s([u({type:String})],i.prototype,"placeholder",2),s([u({type:String,attribute:"default-value"})],i.prototype,"defaultValue",2),s([p()],i.prototype,"query",2),s([p()],i.prototype,"results",2),s([p()],i.prototype,"isOpen",2),s([p()],i.prototype,"isLoading",2),s([p()],i.prototype,"highlight",2),i=s([w("roxy-location-search")],i);export{i as RoxyLocationSearch};
 //# sourceMappingURL=location-search.js.map

package/dist/components/location-search.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/location-search.ts", "../../src/utils/base-styles.ts", "../../src/utils/debounce.ts"],
-  "sourcesContent": ["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport type { SearchCitiesResponse } from '../types/index.js';\nimport { baseStyles } from '../utils/base-styles.js';\nimport { debounce } from '../utils/debounce.js';\n\ntype CityResult = SearchCitiesResponse['cities'][number];\n\n/**\n * Stateful location search input. Calls /location/search and emits\n * `roxy-location-select` CustomEvent with the chosen city. Required for any\n * chart endpoint.\n *\n * Behavior: 300ms input debounce, click-outside dismiss, keyboard navigation\n * with arrow keys / Enter / Escape, AbortController on stale requests.\n *\n * Attributes:\n *   api-key            optional. Direct call to roxyapi.com when set.\n *   publishable-key    optional. Browser-safe pk_* key with allowed_origins.\n *   endpoint           optional. Override URL (default https://roxyapi.com/api/v2/location/search).\n *   placeholder        optional. Input placeholder.\n *   default-value      optional. Pre-filled query.\n */\n@customElement('roxy-location-search')\nexport class RoxyLocationSearch extends LitElement {\n\tstatic styles = [\n\t\tbaseStyles,\n\t\tcss`\n\t\t\t:host {\n\t\t\t\tdisplay: block;\n\t\t\t\tposition: relative;\n\t\t\t}\n\t\t\t.field {\n\t\t\t\tposition: relative;\n\t\t\t}\n\t\t\tinput {\n\t\t\t\twidth: 100%;\n\t\t\t\tpadding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);\n\t\t\t\tfont-size: var(--roxy-text-base, 1rem);\n\t\t\t\tfont-family: inherit;\n\t\t\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\t\t\tbackground: var(--roxy-bg, #fff);\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\ttransition:\n\t\t\t\t\tborder-color 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\tbox-sizing: border-box;\n\t\t\t}\n\t\t\tinput:focus {\n\t\t\t\toutline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));\n\t\t\t\toutline-offset: 2px;\n\t\t\t\tborder-color: var(--roxy-accent-fg, #b45309);\n\t\t\t}\n\t\t\t.spinner {\n\t\t\t\tposition: absolute;\n\t\t\t\tright: 12px;\n\t\t\t\ttop: 50%;\n\t\t\t\ttransform: translateY(-50%);\n\t\t\t\twidth: 14px;\n\t\t\t\theight: 14px;\n\t\t\t\tborder: 2px solid var(--roxy-muted, #71717a);\n\t\t\t\tborder-top-color: transparent;\n\t\t\t\tborder-radius: 50%;\n\t\t\t\tanimation: roxy-spin 700ms linear infinite;\n\t\t\t}\n\t\t\t@keyframes roxy-spin {\n\t\t\t\tto {\n\t\t\t\t\ttransform: translateY(-50%) rotate(360deg);\n\t\t\t\t}\n\t\t\t}\n\t\t\t@media (prefers-reduced-motion: reduce) {\n\t\t\t\t.spinner {\n\t\t\t\t\tanimation: none;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.results {\n\t\t\t\tposition: absolute;\n\t\t\t\tz-index: 50;\n\t\t\t\ttop: calc(100% + 4px);\n\t\t\t\tleft: 0;\n\t\t\t\tright: 0;\n\t\t\t\tbackground: var(--roxy-bg, #fff);\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\tbox-shadow: var(--roxy-shadow-md);\n\t\t\t\tmax-height: 22rem;\n\t\t\t\toverflow-y: auto;\n\t\t\t\tanimation: roxy-fade-in 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.option {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: baseline;\n\t\t\t\tgap: var(--roxy-space-sm, 0.5rem);\n\t\t\t\twidth: 100%;\n\t\t\t\tpadding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);\n\t\t\t\tbackground: transparent;\n\t\t\t\tborder: 0;\n\t\t\t\ttext-align: left;\n\t\t\t\tfont-family: inherit;\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\t\t\tcursor: pointer;\n\t\t\t\ttransition: background-color var(--roxy-motion-duration, 200ms);\n\t\t\t}\n\t\t\t.option:hover,\n\t\t\t.option[aria-selected='true'] {\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-accent, #f59e0b) 10%, transparent);\n\t\t\t}\n\t\t\t.option .city {\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t}\n\t\t\t.option .where {\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\tflex-grow: 1;\n\t\t\t}\n\t\t\t.option .tz {\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t\tfont-variant-numeric: tabular-nums;\n\t\t\t}\n\t\t\t.empty {\n\t\t\t\tpadding: var(--roxy-space-md, 1rem);\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}\n\t\t`,\n\t];\n\n\t@property({ type: String, attribute: 'api-key' })\n\tapiKey?: string;\n\n\t@property({ type: String, attribute: 'publishable-key' })\n\tpublishableKey?: string;\n\n\t@property({ type: String })\n\tendpoint = 'https://roxyapi.com/api/v2/location/search';\n\n\t@property({ type: String })\n\tplaceholder = 'Search city';\n\n\t@property({ type: String, attribute: 'default-value' })\n\tdefaultValue = '';\n\n\t@state()\n\tprivate query = '';\n\n\t@state()\n\tprivate results: CityResult[] = [];\n\n\t@state()\n\tprivate isOpen = false;\n\n\t@state()\n\tprivate isLoading = false;\n\n\t@state()\n\tprivate highlight = -1;\n\n\tprivate clickOutsideHandler?: (e: MouseEvent) => void;\n\tprivate abortController?: AbortController;\n\tprivate secretKeyWarned = false;\n\tprivate debouncedFetch = debounce((q: string) => {\n\t\tvoid this.fetchResults(q);\n\t}, 300);\n\n\tconnectedCallback(): void {\n\t\tsuper.connectedCallback();\n\t\tthis.query = this.defaultValue;\n\t\tthis.clickOutsideHandler = (e: MouseEvent) => {\n\t\t\tconst path = e.composedPath();\n\t\t\tif (!path.includes(this)) this.isOpen = false;\n\t\t};\n\t\tdocument.addEventListener('mousedown', this.clickOutsideHandler);\n\t}\n\n\tdisconnectedCallback(): void {\n\t\tsuper.disconnectedCallback();\n\t\tif (this.clickOutsideHandler) {\n\t\t\tdocument.removeEventListener('mousedown', this.clickOutsideHandler);\n\t\t}\n\t\tthis.debouncedFetch.cancel();\n\t\tif (this.abortController) {\n\t\t\tthis.abortController.abort();\n\t\t\tthis.abortController = undefined;\n\t\t}\n\t}\n\n\tprivate warnIfSecretKey() {\n\t\tif (this.secretKeyWarned) return;\n\t\tif (!this.apiKey) return;\n\t\t// Browser-safe publishable keys carry the `pk_` prefix and a server-side\n\t\t// origin allowlist. Anything else (a raw secret key, UUID-style token)\n\t\t// must not ship to the browser.\n\t\tif (this.apiKey.startsWith('pk_')) return;\n\t\tthis.secretKeyWarned = true;\n\t\tconst message =\n\t\t\t'Possible secret key in client-side <roxy-location-search>; use a `pk_` publishable key with origin allowlist instead.';\n\t\t// eslint-disable-next-line no-console\n\t\tconsole.warn(message);\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('roxy-validation-error', {\n\t\t\t\tdetail: { reason: 'possible-secret-key', message },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t);\n\t}\n\n\tprivate async fetchResults(q: string) {\n\t\tthis.warnIfSecretKey();\n\t\t// Abort any in-flight request so a stale response cannot overwrite a\n\t\t// fresher one (debounced typing) or land after disconnect.\n\t\tif (this.abortController) this.abortController.abort();\n\t\tconst controller = new AbortController();\n\t\tthis.abortController = controller;\n\t\tthis.isLoading = true;\n\t\ttry {\n\t\t\tconst url = new URL(this.endpoint);\n\t\t\turl.searchParams.set('q', q);\n\t\t\turl.searchParams.set('limit', '8');\n\t\t\tconst headers: Record<string, string> = {\n\t\t\t\tAccept: 'application/json',\n\t\t\t};\n\t\t\t// publishable-key wins when both are set. Surfacing the conflict at the\n\t\t\t// console (not as a thrown error) avoids breaking widgets that legitimately\n\t\t\t// have a stale secret key around while migrating to publishable.\n\t\t\tif (this.apiKey && this.publishableKey) {\n\t\t\t\tconsole.warn(\n\t\t\t\t\t'[roxy-location-search] both api-key and publishable-key set; using publishable-key. Remove api-key from your widget markup.',\n\t\t\t\t);\n\t\t\t}\n\t\t\tconst key = this.publishableKey ?? this.apiKey;\n\t\t\tif (key) headers['X-API-Key'] = key;\n\t\t\tconst res = await fetch(url, { headers, signal: controller.signal });\n\t\t\tif (!res.ok) throw new Error(`HTTP ${res.status}`);\n\t\t\tconst json = (await res.json()) as SearchCitiesResponse;\n\t\t\tif (controller.signal.aborted) return;\n\t\t\tthis.results = json.cities ?? [];\n\t\t\tthis.isOpen = this.results.length > 0;\n\t\t\tthis.highlight = this.results.length > 0 ? 0 : -1;\n\t\t} catch (err) {\n\t\t\tif ((err as { name?: string })?.name === 'AbortError') return;\n\t\t\tthis.results = [];\n\t\t\tthis.isOpen = false;\n\t\t} finally {\n\t\t\tif (this.abortController === controller) {\n\t\t\t\tthis.abortController = undefined;\n\t\t\t}\n\t\t\tif (!controller.signal.aborted) this.isLoading = false;\n\t\t}\n\t}\n\n\tprivate onInput = (e: Event) => {\n\t\tconst value = (e.target as HTMLInputElement).value;\n\t\tthis.query = value;\n\t\tif (value.length < 2) {\n\t\t\tthis.results = [];\n\t\t\tthis.isOpen = false;\n\t\t\tthis.highlight = -1;\n\t\t\treturn;\n\t\t}\n\t\tthis.debouncedFetch(value);\n\t};\n\n\tprivate select(city: CityResult) {\n\t\tthis.query = `${city.city}${city.province ? `, ${city.province}` : ''}, ${city.country}`;\n\t\tthis.isOpen = false;\n\t\tthis.results = [];\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('roxy-location-select', {\n\t\t\t\tdetail: city,\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t);\n\t}\n\n\tprivate onKeyDown = (e: KeyboardEvent) => {\n\t\tif (!this.isOpen || this.results.length === 0) {\n\t\t\tif (e.key === 'ArrowDown' && this.query.length >= 2) {\n\t\t\t\tvoid this.fetchResults(this.query);\n\t\t\t\te.preventDefault();\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\t\tif (e.key === 'ArrowDown') {\n\t\t\te.preventDefault();\n\t\t\tthis.highlight = (this.highlight + 1) % this.results.length;\n\t\t} else if (e.key === 'ArrowUp') {\n\t\t\te.preventDefault();\n\t\t\tthis.highlight =\n\t\t\t\t(this.highlight - 1 + this.results.length) % this.results.length;\n\t\t} else if (e.key === 'Enter') {\n\t\t\te.preventDefault();\n\t\t\tconst target = this.results[this.highlight] ?? this.results[0];\n\t\t\tif (target) this.select(target);\n\t\t} else if (e.key === 'Escape') {\n\t\t\tthis.isOpen = false;\n\t\t}\n\t};\n\n\trender() {\n\t\treturn html`<div class=\"field\">\n\t\t\t<input\n\t\t\t\ttype=\"text\"\n\t\t\t\trole=\"combobox\"\n\t\t\t\taria-expanded=${this.isOpen ? 'true' : 'false'}\n\t\t\t\taria-controls=\"roxy-location-listbox\"\n\t\t\t\taria-activedescendant=${\n\t\t\t\t\tthis.isOpen && this.highlight >= 0\n\t\t\t\t\t\t? `roxy-location-option-${this.highlight}`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\taria-autocomplete=\"list\"\n\t\t\t\tautocomplete=\"off\"\n\t\t\t\tplaceholder=${this.placeholder}\n\t\t\t\t.value=${this.query}\n\t\t\t\t@input=${this.onInput}\n\t\t\t\t@keydown=${this.onKeyDown}\n\t\t\t\t@focus=${() => {\n\t\t\t\t\tif (this.results.length > 0) this.isOpen = true;\n\t\t\t\t}}\n\t\t\t/>\n\t\t\t${this.isLoading ? html`<span class=\"spinner\" role=\"status\" aria-label=\"Loading\"></span>` : nothing}\n\t\t\t${\n\t\t\t\tthis.isOpen\n\t\t\t\t\t? html`<ul\n\t\t\t\t\t\tid=\"roxy-location-listbox\"\n\t\t\t\t\t\tclass=\"results\"\n\t\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\t>\n\t\t\t\t\t\t${\n\t\t\t\t\t\t\tthis.results.length === 0\n\t\t\t\t\t\t\t\t? html`<li class=\"empty\" role=\"status\">No cities found</li>`\n\t\t\t\t\t\t\t\t: this.results.map(\n\t\t\t\t\t\t\t\t\t\t(city, idx) => html`<li role=\"presentation\">\n\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\tclass=\"option\"\n\t\t\t\t\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\t\t\t\t\tid=${`roxy-location-option-${idx}`}\n\t\t\t\t\t\t\t\t\t\t\taria-selected=${this.highlight === idx ? 'true' : 'false'}\n\t\t\t\t\t\t\t\t\t\t\t@click=${() => this.select(city)}\n\t\t\t\t\t\t\t\t\t\t\t@mouseenter=${() => {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.highlight = idx;\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"city\">${city.city}</span>\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"where\"\n\t\t\t\t\t\t\t\t\t\t\t\t>${city.province ? html`${city.province}, ` : ''}${city.country}</span\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"tz\"\n\t\t\t\t\t\t\t\t\t\t\t\t>UTC${city.utcOffset >= 0 ? '+' : ''}${city.utcOffset}</span\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t</li>`,\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\t\t\t\t\t</ul>`\n\t\t\t\t\t: nothing\n\t\t\t}\n\t\t</div>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'roxy-location-search': RoxyLocationSearch;\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", "/**\n * Lightweight debounce for input handlers. Used by location search.\n *\n * The returned function exposes a `.cancel()` method so callers can clear a\n * pending invocation when the host element disconnects, preventing the timer\n * from firing on a detached node and mutating reactive state after teardown.\n */\nexport interface Debounced<F extends (...args: never[]) => unknown> {\n\t(...args: Parameters<F>): void;\n\tcancel: () => void;\n}\n\nexport function debounce<F extends (...args: never[]) => unknown>(\n\tfn: F,\n\twait: number,\n): Debounced<F> {\n\tlet timer: ReturnType<typeof setTimeout> | undefined;\n\tconst debounced = ((...args: Parameters<F>) => {\n\t\tif (timer) clearTimeout(timer);\n\t\ttimer = setTimeout(() => {\n\t\t\ttimer = undefined;\n\t\t\tfn(...args);\n\t\t}, wait);\n\t}) as Debounced<F>;\n\tdebounced.cancel = () => {\n\t\tif (timer) {\n\t\t\tclearTimeout(timer);\n\t\t\ttimer = undefined;\n\t\t}\n\t};\n\treturn debounced;\n}\n"],
-  "mappings": "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",
-  "names": ["css", "css"]
+  "sourcesContent": ["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport type { SearchCitiesResponse } from '../types/index.js';\nimport { baseStyles } from '../utils/base-styles.js';\nimport { debounce } from '../utils/debounce.js';\n\ntype CityResult = SearchCitiesResponse['cities'][number];\n\n/**\n * Stateful location search input. Calls /location/search and emits\n * `roxy-location-select` CustomEvent with the chosen city. Required for any\n * chart endpoint.\n *\n * Behavior: 300ms input debounce, click-outside dismiss, keyboard navigation\n * with arrow keys / Enter / Escape, AbortController on stale requests.\n *\n * Attributes:\n *   api-key            optional. Direct call to roxyapi.com when set.\n *   publishable-key    optional. Browser-safe pk_* key with allowed_origins.\n *   endpoint           optional. Override URL (default https://roxyapi.com/api/v2/location/search).\n *   placeholder        optional. Input placeholder.\n *   default-value      optional. Pre-filled query.\n */\n@customElement('roxy-location-search')\nexport class RoxyLocationSearch extends LitElement {\n\tstatic styles = [\n\t\tbaseStyles,\n\t\tcss`:host{display:block;position:relative}.field{position:relative}input{width:100%;padding:var(--roxy-space-sm,.5rem) var(--roxy-space-md,1rem);font-size:var(--roxy-text-base,1rem);color:var(--roxy-fg,#0a0a0a);background:var(--roxy-bg,#fff);border:1px solid var(--roxy-border,#e4e4e7);border-radius:var(--roxy-radius-md,8px);transition:border-color var(--roxy-motion-duration,.2s) var(--roxy-motion-easing,cubic-bezier(.4, 0, .2, 1));box-sizing:border-box;font-family:inherit}input:focus{outline:2px solid var(--roxy-ring,#f59e0b66);outline-offset:2px;border-color:var(--roxy-accent-fg,#b45309)}.spinner{border:2px solid var(--roxy-muted,#71717a);border-top-color:#0000;border-radius:50%;width:14px;height:14px;animation:.7s linear infinite roxy-spin;position:absolute;top:50%;right:12px;transform:translateY(-50%)}@keyframes roxy-spin{to{transform:translateY(-50%)rotate(360deg)}}@media (prefers-reduced-motion:reduce){.spinner{animation:none}}.results{z-index:50;background:var(--roxy-bg,#fff);border:1px solid var(--roxy-border,#e4e4e7);border-radius:var(--roxy-radius-md,8px);box-shadow:var(--roxy-shadow-md);max-height:22rem;animation:roxy-fade-in var(--roxy-motion-duration,.2s) var(--roxy-motion-easing,cubic-bezier(.4, 0, .2, 1));position:absolute;top:calc(100% + 4px);left:0;right:0;overflow-y:auto}.option{align-items:baseline;gap:var(--roxy-space-sm,.5rem);width:100%;padding:var(--roxy-space-sm,.5rem) var(--roxy-space-md,1rem);text-align:left;font-family:inherit;font-size:var(--roxy-text-sm,.875rem);color:var(--roxy-fg,#0a0a0a);cursor:pointer;transition:background-color var(--roxy-motion-duration,.2s);background:0 0;border:0;display:flex}.option:hover,.option[aria-selected=true]{background:color-mix(in srgb, var(--roxy-accent,#f59e0b) 10%, transparent)}.option .city{font-weight:var(--roxy-weight-bold,600)}.option .where{color:var(--roxy-muted,#71717a);flex-grow:1}.option .tz{color:var(--roxy-muted,#71717a);font-size:var(--roxy-text-xs,.75rem);font-variant-numeric:tabular-nums}.empty{padding:var(--roxy-space-md,1rem);color:var(--roxy-muted,#71717a);font-size:var(--roxy-text-sm,.875rem)}`,\n\t];\n\n\t@property({ type: String, attribute: 'api-key' })\n\tapiKey?: string;\n\n\t@property({ type: String, attribute: 'publishable-key' })\n\tpublishableKey?: string;\n\n\t@property({ type: String })\n\tendpoint = 'https://roxyapi.com/api/v2/location/search';\n\n\t@property({ type: String })\n\tplaceholder = 'Search city';\n\n\t@property({ type: String, attribute: 'default-value' })\n\tdefaultValue = '';\n\n\t@state()\n\tprivate query = '';\n\n\t@state()\n\tprivate results: CityResult[] = [];\n\n\t@state()\n\tprivate isOpen = false;\n\n\t@state()\n\tprivate isLoading = false;\n\n\t@state()\n\tprivate highlight = -1;\n\n\tprivate clickOutsideHandler?: (e: MouseEvent) => void;\n\tprivate abortController?: AbortController;\n\tprivate secretKeyWarned = false;\n\tprivate debouncedFetch = debounce((q: string) => {\n\t\tvoid this.fetchResults(q);\n\t}, 300);\n\n\tconnectedCallback(): void {\n\t\tsuper.connectedCallback();\n\t\tthis.query = this.defaultValue;\n\t\tthis.clickOutsideHandler = (e: MouseEvent) => {\n\t\t\tconst path = e.composedPath();\n\t\t\tif (!path.includes(this)) this.isOpen = false;\n\t\t};\n\t\tdocument.addEventListener('mousedown', this.clickOutsideHandler);\n\t}\n\n\tdisconnectedCallback(): void {\n\t\tsuper.disconnectedCallback();\n\t\tif (this.clickOutsideHandler) {\n\t\t\tdocument.removeEventListener('mousedown', this.clickOutsideHandler);\n\t\t}\n\t\tthis.debouncedFetch.cancel();\n\t\tif (this.abortController) {\n\t\t\tthis.abortController.abort();\n\t\t\tthis.abortController = undefined;\n\t\t}\n\t}\n\n\tprivate warnIfSecretKey() {\n\t\tif (this.secretKeyWarned) return;\n\t\tif (!this.apiKey) return;\n\t\t// Browser-safe publishable keys carry the `pk_` prefix and a server-side\n\t\t// origin allowlist. Anything else (a raw secret key, UUID-style token)\n\t\t// must not ship to the browser.\n\t\tif (this.apiKey.startsWith('pk_')) return;\n\t\tthis.secretKeyWarned = true;\n\t\tconst message =\n\t\t\t'Possible secret key in client-side <roxy-location-search>; use a `pk_` publishable key with origin allowlist instead.';\n\t\t// eslint-disable-next-line no-console\n\t\tconsole.warn(message);\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('roxy-validation-error', {\n\t\t\t\tdetail: { reason: 'possible-secret-key', message },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t);\n\t}\n\n\tprivate async fetchResults(q: string) {\n\t\tthis.warnIfSecretKey();\n\t\t// Abort any in-flight request so a stale response cannot overwrite a\n\t\t// fresher one (debounced typing) or land after disconnect.\n\t\tif (this.abortController) this.abortController.abort();\n\t\tconst controller = new AbortController();\n\t\tthis.abortController = controller;\n\t\tthis.isLoading = true;\n\t\ttry {\n\t\t\tconst url = new URL(this.endpoint);\n\t\t\turl.searchParams.set('q', q);\n\t\t\turl.searchParams.set('limit', '8');\n\t\t\tconst headers: Record<string, string> = {\n\t\t\t\tAccept: 'application/json',\n\t\t\t};\n\t\t\t// publishable-key wins when both are set. Surfacing the conflict at the\n\t\t\t// console (not as a thrown error) avoids breaking widgets that legitimately\n\t\t\t// have a stale secret key around while migrating to publishable.\n\t\t\tif (this.apiKey && this.publishableKey) {\n\t\t\t\tconsole.warn(\n\t\t\t\t\t'[roxy-location-search] both api-key and publishable-key set; using publishable-key. Remove api-key from your widget markup.',\n\t\t\t\t);\n\t\t\t}\n\t\t\tconst key = this.publishableKey ?? this.apiKey;\n\t\t\tif (key) headers['X-API-Key'] = key;\n\t\t\tconst res = await fetch(url, { headers, signal: controller.signal });\n\t\t\tif (!res.ok) throw new Error(`HTTP ${res.status}`);\n\t\t\tconst json = (await res.json()) as SearchCitiesResponse;\n\t\t\tif (controller.signal.aborted) return;\n\t\t\tthis.results = json.cities ?? [];\n\t\t\tthis.isOpen = this.results.length > 0;\n\t\t\tthis.highlight = this.results.length > 0 ? 0 : -1;\n\t\t} catch (err) {\n\t\t\tif ((err as { name?: string })?.name === 'AbortError') return;\n\t\t\tthis.results = [];\n\t\t\tthis.isOpen = false;\n\t\t} finally {\n\t\t\tif (this.abortController === controller) {\n\t\t\t\tthis.abortController = undefined;\n\t\t\t}\n\t\t\tif (!controller.signal.aborted) this.isLoading = false;\n\t\t}\n\t}\n\n\tprivate onInput = (e: Event) => {\n\t\tconst value = (e.target as HTMLInputElement).value;\n\t\tthis.query = value;\n\t\tif (value.length < 2) {\n\t\t\tthis.results = [];\n\t\t\tthis.isOpen = false;\n\t\t\tthis.highlight = -1;\n\t\t\treturn;\n\t\t}\n\t\tthis.debouncedFetch(value);\n\t};\n\n\tprivate select(city: CityResult) {\n\t\tthis.query = `${city.city}${city.province ? `, ${city.province}` : ''}, ${city.country}`;\n\t\tthis.isOpen = false;\n\t\tthis.results = [];\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('roxy-location-select', {\n\t\t\t\tdetail: city,\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t);\n\t}\n\n\tprivate onKeyDown = (e: KeyboardEvent) => {\n\t\tif (!this.isOpen || this.results.length === 0) {\n\t\t\tif (e.key === 'ArrowDown' && this.query.length >= 2) {\n\t\t\t\tvoid this.fetchResults(this.query);\n\t\t\t\te.preventDefault();\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\t\tif (e.key === 'ArrowDown') {\n\t\t\te.preventDefault();\n\t\t\tthis.highlight = (this.highlight + 1) % this.results.length;\n\t\t} else if (e.key === 'ArrowUp') {\n\t\t\te.preventDefault();\n\t\t\tthis.highlight =\n\t\t\t\t(this.highlight - 1 + this.results.length) % this.results.length;\n\t\t} else if (e.key === 'Enter') {\n\t\t\te.preventDefault();\n\t\t\tconst target = this.results[this.highlight] ?? this.results[0];\n\t\t\tif (target) this.select(target);\n\t\t} else if (e.key === 'Escape') {\n\t\t\tthis.isOpen = false;\n\t\t}\n\t};\n\n\trender() {\n\t\treturn html`<div class=\"field\"><input type=\"text\" role=\"combobox\" aria-expanded=\"${this.isOpen ? 'true' : 'false'}\" aria-controls=\"roxy-location-listbox\" aria-activedescendant=\"${\n\t\t\t\t\tthis.isOpen && this.highlight >= 0\n\t\t\t\t\t\t? `roxy-location-option-${this.highlight}`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\" aria-autocomplete=\"list\" autocomplete=\"off\" placeholder=\"${this.placeholder}\" .value=\"${this.query}\" @input=\"${this.onInput}\" @keydown=\"${this.onKeyDown}\" @focus=\"${() => {\n\t\t\t\t\tif (this.results.length > 0) this.isOpen = true;\n\t\t\t\t}}\"> ${this.isLoading ? html`<span class=\"spinner\" role=\"status\" aria-label=\"Loading\"></span>` : nothing} ${\n\t\t\t\tthis.isOpen\n\t\t\t\t\t? html`<ul id=\"roxy-location-listbox\" class=\"results\" role=\"listbox\">${\n\t\t\t\t\t\t\tthis.results.length === 0\n\t\t\t\t\t\t\t\t? html`<li class=\"empty\" role=\"status\">No cities found</li>`\n\t\t\t\t\t\t\t\t: this.results.map(\n\t\t\t\t\t\t\t\t\t\t(city, idx) => html`<li role=\"presentation\"><button type=\"button\" class=\"option\" role=\"option\" id=\"${`roxy-location-option-${idx}`}\" aria-selected=\"${this.highlight === idx ? 'true' : 'false'}\" @click=\"${() => this.select(city)}\" @mouseenter=\"${() => {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.highlight = idx;\n\t\t\t\t\t\t\t\t\t\t\t}}\"><span class=\"city\">${city.city}</span> <span class=\"where\">${city.province ? html`${city.province},` : ''}${city.country}</span> <span class=\"tz\">UTC${city.utcOffset >= 0 ? '+' : ''}${city.utcOffset}</span></button></li>`,\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}</ul>`\n\t\t\t\t\t: nothing\n\t\t\t}</div>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'roxy-location-search': RoxyLocationSearch;\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`: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}`;\n", "/**\n * Lightweight debounce for input handlers. Used by location search.\n *\n * The returned function exposes a `.cancel()` method so callers can clear a\n * pending invocation when the host element disconnects, preventing the timer\n * from firing on a detached node and mutating reactive state after teardown.\n */\nexport interface Debounced<F extends (...args: never[]) => unknown> {\n\t(...args: Parameters<F>): void;\n\tcancel: () => void;\n}\n\nexport function debounce<F extends (...args: never[]) => unknown>(\n\tfn: F,\n\twait: number,\n): Debounced<F> {\n\tlet timer: ReturnType<typeof setTimeout> | undefined;\n\tconst debounced = ((...args: Parameters<F>) => {\n\t\tif (timer) clearTimeout(timer);\n\t\ttimer = setTimeout(() => {\n\t\t\ttimer = undefined;\n\t\t\tfn(...args);\n\t\t}, wait);\n\t}) as Debounced<F>;\n\tdebounced.cancel = () => {\n\t\tif (timer) {\n\t\t\tclearTimeout(timer);\n\t\t\ttimer = undefined;\n\t\t}\n\t};\n\treturn debounced;\n}\n"],
+  "mappings": "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",
+  "names": ["css", "html", "LitElement", "nothing", "customElement", "property", "state", "css", "baseStyles", "debounce", "fn", "wait", "timer", "debounced", "args", "RoxyLocationSearch", "LitElement", "debounce", "q", "value", "target", "message", "controller", "url", "headers", "key", "res", "json", "err", "city", "html", "nothing", "idx", "baseStyles", "css", "__decorateClass", "property", "state", "customElement"]
 }

package/dist/components/moon-phase.d.ts

@@ -6,6 +6,7 @@ type MoonPhaseData = GetCurrentMoonPhaseResponse | GetUpcomingMoonPhasesResponse
  */
 export declare class RoxyMoonPhase extends LitElement {
     static styles: import("lit").CSSResult[];
+    constructor();
     data: MoonPhaseData | null;
     mode: 'current' | 'upcoming' | 'calendar';
     render(): import("lit").TemplateResult<1> | typeof nothing;

package/dist/components/moon-phase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"moon-phase.d.ts","sourceRoot":"","sources":["../../src/components/moon-phase.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAGrD,OAAO,KAAK,EACX,2BAA2B,EAC3B,uBAAuB,EACvB,6BAA6B,EAC7B,MAAM,mBAAmB,CAAC;AAI3B,KAAK,aAAa,GACf,2BAA2B,GAC3B,6BAA6B,GAC7B,uBAAuB,CAAC;AAK3B;;GAEG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC5C,MAAM,CAAC,MAAM,4BAqFX;IAGF,IAAI,EAAE,aAAa,GAAG,IAAI,CAAQ;IAGlC,IAAI,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,CAAa;IAEtD,MAAM;IAuBN,OAAO,CAAC,YAAY;IA2DpB,OAAO,CAAC,cAAc;CAQtB;AAYD,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,aAAa,CAAC;KACjC;CACD"}
+{"version":3,"file":"moon-phase.d.ts","sourceRoot":"","sources":["../../src/components/moon-phase.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAGrD,OAAO,KAAK,EACX,2BAA2B,EAC3B,uBAAuB,EACvB,6BAA6B,EAC7B,MAAM,mBAAmB,CAAC;AAK3B,KAAK,aAAa,GACf,2BAA2B,GAC3B,6BAA6B,GAC7B,uBAAuB,CAAC;AAK3B;;GAEG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC5C,MAAM,CAAC,MAAM,4BAqFX;;IAWF,IAAI,EAAE,aAAa,GAAG,IAAI,CAAQ;IAGlC,IAAI,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,CAAa;IAEtD,MAAM;IAuBN,OAAO,CAAC,YAAY;IA2DpB,OAAO,CAAC,cAAc;CAQtB;AAYD,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,aAAa,CAAC;KACjC;CACD"}