@roxyapi/ui 0.4.1 → 0.6.0

package/dist/components/endpoint-form.js

@@ -1,506 +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/endpoint-form.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/string.ts
-function humanize(s) {
-  return s.replace(/[_-]+/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^\w/, (c) => c.toUpperCase());
-}
-
-// packages/ui/src/components/endpoint-form.ts
-var specCache = /* @__PURE__ */ new Map();
-async function loadSpec(url) {
-  let pending = specCache.get(url);
-  if (!pending) {
-    pending = fetch(url).then(async (res) => {
-      if (!res.ok) throw new Error(`HTTP ${res.status}`);
-      return await res.json();
-    }).catch((err) => {
-      specCache.delete(url);
-      throw err;
-    });
-    specCache.set(url, pending);
-  }
-  return pending;
-}
-var RoxyEndpointForm = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.endpoint = "vedic-astrology/birth-chart";
-    this.method = "POST";
-    this.specUrl = "https://roxyapi.com/api/v2/openapi.json";
-    this.submitLabel = "Submit";
-    this.fields = [];
-    this.values = {};
-    this.hasLocation = false;
-    this.loaded = false;
-    this.specError = null;
-    this.retryLoadSchema = () => {
-      this.loaded = false;
-      this.specError = null;
-      void this.loadSchema();
-    };
-    this.onLocation = (e) => {
-      const detail = e.detail;
-      if (detail) {
-        this.values = {
-          ...this.values,
-          latitude: detail.latitude,
-          longitude: detail.longitude,
-          timezone: detail.timezone ?? detail.utcOffset
-        };
-      }
-    };
-    this.onSubmit = (e) => {
-      e.preventDefault();
-      const missing = this.fields.filter((f) => f.required).filter(
-        (f) => this.values[f.name] === void 0 || this.values[f.name] === ""
-      );
-      if (missing.length > 0) {
-        this.dispatchEvent(
-          new CustomEvent("roxy-validation-error", {
-            detail: { missing: missing.map((m) => m.name) },
-            bubbles: true,
-            composed: true
-          })
-        );
-        return;
-      }
-      this.dispatchEvent(
-        new CustomEvent("roxy-submit", {
-          detail: { endpoint: this.endpoint, values: this.values },
-          bubbles: true,
-          composed: true
-        })
-      );
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    void this.loadSchema();
-  }
-  async loadSchema() {
-    this.specError = null;
-    try {
-      const spec = await loadSpec(this.specUrl);
-      const path = `/${this.endpoint.replace(/^\//, "")}`;
-      const op = spec.paths?.[path]?.[this.method.toLowerCase()];
-      if (!op) {
-        throw new Error(
-          `Endpoint ${this.method} ${path} not found in OpenAPI spec`
-        );
-      }
-      const schemas = spec.components?.schemas ?? {};
-      const fields = [];
-      let bodySchema;
-      if (op.requestBody) {
-        const ref = op.requestBody.content?.["application/json"]?.schema;
-        bodySchema = this.resolve(ref, schemas);
-      }
-      if (bodySchema?.properties) {
-        const required = new Set(bodySchema.required ?? []);
-        for (const [name, sub] of Object.entries(bodySchema.properties)) {
-          const resolved = this.resolve(sub, schemas) ?? {};
-          fields.push({
-            name,
-            type: this.fieldType(resolved),
-            required: required.has(name),
-            description: resolved.description,
-            enum: resolved.enum,
-            min: resolved.minimum,
-            max: resolved.maximum,
-            default: resolved.default
-          });
-        }
-      }
-      for (const param of op.parameters ?? []) {
-        if (param.in === "path" || param.in === "query") {
-          const resolved = this.resolve(param.schema, schemas) ?? {};
-          fields.push({
-            name: param.name,
-            type: this.fieldType(resolved),
-            required: !!param.required,
-            description: resolved.description,
-            enum: resolved.enum,
-            default: resolved.default
-          });
-        }
-      }
-      this.fields = fields;
-      this.hasLocation = fields.some((f) => f.name === "latitude") && fields.some((f) => f.name === "longitude") && fields.some((f) => f.name === "timezone");
-      const init = {};
-      for (const f of fields) {
-        if (f.default !== void 0) init[f.name] = f.default;
-      }
-      this.values = init;
-      this.loaded = true;
-    } catch (err) {
-      const message = err instanceof Error ? err.message : String(err);
-      this.specError = message;
-      this.loaded = true;
-      this.dispatchEvent(
-        new CustomEvent("roxy-spec-error", {
-          detail: { url: this.specUrl, message },
-          bubbles: true,
-          composed: true
-        })
-      );
-    }
-  }
-  resolve(schema, all) {
-    if (!schema) return void 0;
-    if ("$ref" in schema && schema.$ref) {
-      const name = schema.$ref.split("/").pop();
-      return name ? all[name] : void 0;
-    }
-    return schema;
-  }
-  fieldType(s) {
-    if (s.enum) return "enum";
-    if (s.format === "date") return "date";
-    if (s.format === "time") return "time";
-    if (s.format === "date-time") return "datetime";
-    if (s.type === "integer" || s.type === "number") return "number";
-    return "text";
-  }
-  setValue(name, value) {
-    this.values = { ...this.values, [name]: value };
-  }
-  render() {
-    if (!this.loaded) {
-      return html`<form><div class="roxy-skeleton" style="height: 8rem"></div></form>`;
-    }
-    if (this.specError) {
-      return html`<div class="spec-error" role="alert">
-				Schema load failed: ${this.specError}
-				<button type="button" class="submit" @click=${this.retryLoadSchema}>Retry</button>
-			</div>`;
-    }
-    const renderField = (f) => {
-      if (this.hasLocation && (f.name === "latitude" || f.name === "longitude" || f.name === "timezone")) {
-        return nothing;
-      }
-      const inputId = `roxy-form-${f.name}`;
-      return html`<div class="field">
-				<label for=${inputId}>
-					${humanize(f.name)}${f.required ? html`<span class="req" aria-hidden="true">*</span>` : nothing}
-				</label>
-				${f.enum ? html`<select
-							id=${inputId}
-							?required=${f.required}
-							@change=${(e) => this.setValue(f.name, e.target.value)}
-						>
-							<option value="">Choose</option>
-							${f.enum.map(
-        (opt) => html`<option value=${opt} ?selected=${this.values[f.name] === opt}>
-									${opt}
-								</option>`
-      )}
-						</select>` : html`<input
-							id=${inputId}
-							type=${this.htmlType(f.type)}
-							?required=${f.required}
-							min=${f.min ?? ""}
-							max=${f.max ?? ""}
-							step=${f.type === "number" ? "any" : ""}
-							.value=${this.values[f.name] ?? ""}
-							@input=${(e) => this.setValue(
-        f.name,
-        this.coerce(f.type, e.target.value)
-      )}
-						/>`}
-				${f.description ? html`<small class="help">${f.description}</small>` : nothing}
-			</div>`;
-    };
-    return html`<form @submit=${this.onSubmit}>
-			<h2 class="title">${humanize(this.endpoint.split("/").pop() ?? "")}</h2>
-			${this.hasLocation ? html`<div class="location-block">
-						<label>Birth location</label>
-						<roxy-location-search
-							@roxy-location-select=${this.onLocation}
-							placeholder="City of birth"
-						></roxy-location-search>
-						<small class="help">
-							Required: latitude, longitude, timezone. Pick a city to autofill.
-						</small>
-					</div>` : nothing}
-			<div class="fields">
-				${this.fields.map((f) => renderField(f))}
-			</div>
-			<button class="submit" type="submit">${this.submitLabel}</button>
-		</form>`;
-  }
-  htmlType(t) {
-    switch (t) {
-      case "date":
-        return "date";
-      case "time":
-        return "time";
-      case "datetime":
-        return "datetime-local";
-      case "number":
-        return "number";
-      default:
-        return "text";
-    }
-  }
-  coerce(t, v) {
-    if (v === "") return void 0;
-    if (t === "number") {
-      const n = Number(v);
-      return Number.isFinite(n) ? n : void 0;
-    }
-    return v;
-  }
-};
-RoxyEndpointForm.styles = [
-  baseStyles,
-  css2`
-			form {
-				display: grid;
-				gap: var(--roxy-space-md, 1rem);
-				background: var(--roxy-bg, #fff);
-				border: 1px solid var(--roxy-border, #e4e4e7);
-				border-radius: var(--roxy-radius-md, 8px);
-				padding: var(--roxy-space-lg, 1.5rem);
-				box-shadow: var(--roxy-shadow-sm);
-			}
-			.title {
-				margin: 0;
-				font-size: var(--roxy-text-lg, 1.125rem);
-				font-weight: var(--roxy-weight-bold, 600);
-			}
-			.fields {
-				display: grid;
-				grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
-				align-items: start;
-				gap: var(--roxy-space-md, 1rem);
-			}
-			.field {
-				display: flex;
-				flex-direction: column;
-				gap: var(--roxy-space-xs, 0.25rem);
-				min-width: 0;
-			}
-			label {
-				font-size: var(--roxy-text-sm, 0.875rem);
-				color: var(--roxy-secondary, #475569);
-			}
-			label .req {
-				color: var(--roxy-danger-fg, #991b1b);
-				margin-left: 4px;
-			}
-			input,
-			select {
-				width: 100%;
-				box-sizing: border-box;
-				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);
-			}
-			input:focus,
-			select:focus {
-				outline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));
-				outline-offset: 2px;
-				border-color: var(--roxy-accent-fg, #b45309);
-			}
-			.help {
-				color: var(--roxy-muted, #71717a);
-				font-size: var(--roxy-text-xs, 0.75rem);
-			}
-			.location-block {
-				display: grid;
-				gap: var(--roxy-space-xs, 0.25rem);
-				grid-column: 1 / -1;
-			}
-			.coords {
-				display: grid;
-				grid-template-columns: repeat(3, 1fr);
-				gap: var(--roxy-space-sm, 0.5rem);
-			}
-			.coords input {
-				font-size: var(--roxy-text-sm, 0.875rem);
-			}
-			button.submit {
-				justify-self: start;
-				background: var(--roxy-accent-fg, #b45309);
-				color: var(--roxy-bg, #fff);
-				border: 0;
-				border-radius: var(--roxy-radius-md, 8px);
-				padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-lg, 1.5rem);
-				font-size: var(--roxy-text-base, 1rem);
-				font-weight: var(--roxy-weight-bold, 600);
-				cursor: pointer;
-				transition:
-					transform var(--roxy-motion-duration, 200ms)
-					var(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1));
-			}
-			button.submit:hover {
-				transform: scale(1.02);
-			}
-			button.submit:focus-visible {
-				outline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));
-				outline-offset: 2px;
-			}
-			.spec-error {
-				display: grid;
-				gap: var(--roxy-space-md, 1rem);
-				justify-items: start;
-				background: var(--roxy-bg, #fff);
-				border: 1px solid var(--roxy-danger, #dc2626);
-				border-radius: var(--roxy-radius-md, 8px);
-				padding: var(--roxy-space-lg, 1.5rem);
-				color: var(--roxy-danger-fg, #991b1b);
-				font-size: var(--roxy-text-sm, 0.875rem);
-			}
-		`
-];
-__decorateClass([
-  property({ type: String, attribute: "data-endpoint" })
-], RoxyEndpointForm.prototype, "endpoint", 2);
-__decorateClass([
-  property({ type: String })
-], RoxyEndpointForm.prototype, "method", 2);
-__decorateClass([
-  property({ type: String, attribute: "spec-url" })
-], RoxyEndpointForm.prototype, "specUrl", 2);
-__decorateClass([
-  property({ type: String, attribute: "submit-label" })
-], RoxyEndpointForm.prototype, "submitLabel", 2);
-__decorateClass([
-  state()
-], RoxyEndpointForm.prototype, "fields", 2);
-__decorateClass([
-  state()
-], RoxyEndpointForm.prototype, "values", 2);
-__decorateClass([
-  state()
-], RoxyEndpointForm.prototype, "hasLocation", 2);
-__decorateClass([
-  state()
-], RoxyEndpointForm.prototype, "loaded", 2);
-__decorateClass([
-  state()
-], RoxyEndpointForm.prototype, "specError", 2);
-RoxyEndpointForm = __decorateClass([
-  customElement("roxy-endpoint-form")
-], RoxyEndpointForm);
-export {
-  RoxyEndpointForm
-};
+var $=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var d=(l,o,r,e)=>{for(var t=e>1?void 0:e?w(o,r):o,a=l.length-1,s;a>=0;a--)(s=l[a])&&(t=(e?s(o,r,t):s(t))||t);return e&&t&&$(o,r,t),t};import{css as O,html as m,LitElement as z,nothing as h}from"lit";import{customElement as A,property as b,state as p}from"lit/decorators.js";import{css as k}from"lit";var x=k`: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 g(l){return l.replace(/[_-]+/g," ").replace(/([a-z])([A-Z])/g,"$1 $2").replace(/^\w/,o=>o.toUpperCase())}var y=new Map;async function q(l){let o=y.get(l);return o||(o=fetch(l).then(async r=>{if(!r.ok)throw new Error(`HTTP ${r.status}`);return await r.json()}).catch(r=>{throw y.delete(l),r}),y.set(l,o)),o}var n=class extends z{constructor(){super(...arguments);this.endpoint="vedic-astrology/birth-chart";this.method="POST";this.specUrl="https://roxyapi.com/api/v2/openapi.json";this.submitLabel="Submit";this.fields=[];this.values={};this.hasLocation=!1;this.loaded=!1;this.specError=null;this.retryLoadSchema=()=>{this.loaded=!1,this.specError=null,this.loadSchema()};this.onLocation=r=>{let e=r.detail;e&&(this.values={...this.values,latitude:e.latitude,longitude:e.longitude,timezone:e.timezone??e.utcOffset})};this.onSubmit=r=>{r.preventDefault();let e=this.fields.filter(t=>t.required).filter(t=>this.values[t.name]===void 0||this.values[t.name]==="");if(e.length>0){this.dispatchEvent(new CustomEvent("roxy-validation-error",{detail:{missing:e.map(t=>t.name)},bubbles:!0,composed:!0}));return}this.dispatchEvent(new CustomEvent("roxy-submit",{detail:{endpoint:this.endpoint,values:this.values},bubbles:!0,composed:!0}))}}connectedCallback(){super.connectedCallback(),this.loadSchema()}async loadSchema(){this.specError=null;try{let r=await q(this.specUrl),e=`/${this.endpoint.replace(/^\//,"")}`,t=r.paths?.[e]?.[this.method.toLowerCase()];if(!t)throw new Error(`Endpoint ${this.method} ${e} not found in OpenAPI spec`);let a=r.components?.schemas??{},s=[],f;if(t.requestBody){let i=t.requestBody.content?.["application/json"]?.schema;f=this.resolve(i,a)}if(f?.properties){let i=new Set(f.required??[]);for(let[c,S]of Object.entries(f.properties)){let u=this.resolve(S,a)??{};s.push({name:c,type:this.fieldType(u),required:i.has(c),description:u.description,enum:u.enum,min:u.minimum,max:u.maximum,default:u.default})}}for(let i of t.parameters??[])if(i.in==="path"||i.in==="query"){let c=this.resolve(i.schema,a)??{};s.push({name:i.name,type:this.fieldType(c),required:!!i.required,description:c.description,enum:c.enum,default:c.default})}this.fields=s,this.hasLocation=s.some(i=>i.name==="latitude")&&s.some(i=>i.name==="longitude")&&s.some(i=>i.name==="timezone");let v={};for(let i of s)i.default!==void 0&&(v[i.name]=i.default);this.values=v,this.loaded=!0}catch(r){let e=r instanceof Error?r.message:String(r);this.specError=e,this.loaded=!0,this.dispatchEvent(new CustomEvent("roxy-spec-error",{detail:{url:this.specUrl,message:e},bubbles:!0,composed:!0}))}}resolve(r,e){if(r){if("$ref"in r&&r.$ref){let t=r.$ref.split("/").pop();return t?e[t]:void 0}return r}}fieldType(r){return r.enum?"enum":r.format==="date"?"date":r.format==="time"?"time":r.format==="date-time"?"datetime":r.type==="integer"||r.type==="number"?"number":"text"}setValue(r,e){this.values={...this.values,[r]:e}}render(){if(!this.loaded)return m`<form><div class="roxy-skeleton" style="height:8rem"></div></form>`;if(this.specError)return m`<div class="spec-error" role="alert">Schema load failed: ${this.specError} <button type="button" class="submit" @click="${this.retryLoadSchema}">Retry</button></div>`;let r=e=>{if(this.hasLocation&&(e.name==="latitude"||e.name==="longitude"||e.name==="timezone"))return h;let t=`roxy-form-${e.name}`;return m`<div class="field"><label for="${t}">${g(e.name)}${e.required?m`<span class="req" aria-hidden="true">*</span>`:h}</label> ${e.enum?m`<select id="${t}" ?required="${e.required}" @change="${a=>this.setValue(e.name,a.target.value)}"><option value="">Choose</option>${e.enum.map(a=>m`<option value="${a}" ?selected="${this.values[e.name]===a}">${a}</option>`)}</select>`:m`<input id="${t}" type="${this.htmlType(e.type)}" ?required="${e.required}" min="${e.min??""}" max="${e.max??""}" step="${e.type==="number"?"any":""}" .value="${this.values[e.name]??""}" @input="${a=>this.setValue(e.name,this.coerce(e.type,a.target.value))}">`} ${e.description?m`<small class="help">${e.description}</small>`:h}</div>`};return m`<form @submit="${this.onSubmit}"><h2 class="title">${g(this.endpoint.split("/").pop()??"")}</h2>${this.hasLocation?m`<div class="location-block"><label>Birth location</label><roxy-location-search @roxy-location-select="${this.onLocation}" placeholder="City of birth"></roxy-location-search><small class="help">Required: latitude, longitude, timezone. Pick a city to autofill.</small></div>`:h}<div class="fields">${this.fields.map(e=>r(e))}</div><button class="submit" type="submit">${this.submitLabel}</button></form>`}htmlType(r){switch(r){case"date":return"date";case"time":return"time";case"datetime":return"datetime-local";case"number":return"number";default:return"text"}}coerce(r,e){if(e!==""){if(r==="number"){let t=Number(e);return Number.isFinite(t)?t:void 0}return e}}};n.styles=[x,O`form{gap:var(--roxy-space-md,1rem);background:var(--roxy-bg,#fff);border:1px solid var(--roxy-border,#e4e4e7);border-radius:var(--roxy-radius-md,8px);padding:var(--roxy-space-lg,1.5rem);box-shadow:var(--roxy-shadow-sm);display:grid}.title{font-size:var(--roxy-text-lg,1.125rem);font-weight:var(--roxy-weight-bold,600);margin:0}.fields{align-items:start;gap:var(--roxy-space-md,1rem);grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));display:grid}.field{gap:var(--roxy-space-xs,.25rem);flex-direction:column;min-width:0;display:flex}label{font-size:var(--roxy-text-sm,.875rem);color:var(--roxy-secondary,#475569)}label .req{color:var(--roxy-danger-fg,#991b1b);margin-left:4px}input,select{box-sizing:border-box;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);font-family:inherit}input:focus,select:focus{outline:2px solid var(--roxy-ring,#f59e0b66);outline-offset:2px;border-color:var(--roxy-accent-fg,#b45309)}.help{color:var(--roxy-muted,#71717a);font-size:var(--roxy-text-xs,.75rem)}.location-block{gap:var(--roxy-space-xs,.25rem);grid-column:1/-1;display:grid}.coords{gap:var(--roxy-space-sm,.5rem);grid-template-columns:repeat(3,1fr);display:grid}.coords input{font-size:var(--roxy-text-sm,.875rem)}button.submit{background:var(--roxy-accent-fg,#b45309);color:var(--roxy-bg,#fff);border-radius:var(--roxy-radius-md,8px);padding:var(--roxy-space-sm,.5rem) var(--roxy-space-lg,1.5rem);font-size:var(--roxy-text-base,1rem);font-weight:var(--roxy-weight-bold,600);cursor:pointer;transition:transform var(--roxy-motion-duration,.2s) var(--roxy-motion-easing,cubic-bezier(.4, 0, .2, 1));border:0;justify-self:start}button.submit:hover{transform:scale(1.02)}button.submit:focus-visible{outline:2px solid var(--roxy-ring,#f59e0b66);outline-offset:2px}.spec-error{gap:var(--roxy-space-md,1rem);background:var(--roxy-bg,#fff);border:1px solid var(--roxy-danger,#dc2626);border-radius:var(--roxy-radius-md,8px);padding:var(--roxy-space-lg,1.5rem);color:var(--roxy-danger-fg,#991b1b);font-size:var(--roxy-text-sm,.875rem);justify-items:start;display:grid}`],d([b({type:String,attribute:"data-endpoint"})],n.prototype,"endpoint",2),d([b({type:String})],n.prototype,"method",2),d([b({type:String,attribute:"spec-url"})],n.prototype,"specUrl",2),d([b({type:String,attribute:"submit-label"})],n.prototype,"submitLabel",2),d([p()],n.prototype,"fields",2),d([p()],n.prototype,"values",2),d([p()],n.prototype,"hasLocation",2),d([p()],n.prototype,"loaded",2),d([p()],n.prototype,"specError",2),n=d([A("roxy-endpoint-form")],n);export{n as RoxyEndpointForm};
 //# sourceMappingURL=endpoint-form.js.map