import { r as p, s as u, y as f, e as b, g as c } from "./base-0db4ef3a.js";
import { e as i } from "./property-ca27685b.js";
import { u as v } from "./useBemm-077765ce.js";
const g = `.sil-radio{font-family:inherit;position:relative;display:flex;flex-direction:column-reverse}.sil-radio,.sil-radio *{box-sizing:border-box}.sil-radio__control{width:0;height:0;position:absolute}.sil-radio__control:focus+sil-radio__label:before{box-shadow:var(--input-field--focus-shadow, 0 0 0 3px var(--input-field--focus-color, var(--primary)))}.sil-radio__control:checked+.sil-radio__label:before{color:var(--input-field--checked-text-color, var(--background));border-color:var(--input-field--checked-background-color, var(--foreground));background:radial-gradient(ellipse at center,var(--input-field--checked-text-color, var(--background)) 0%,var(--input-field--checked-text-color, var(--background)) 75%,transparent 75%);background-size:.75em .75em;background-position:center center;background-repeat:no-repeat;background-color:var(--input-field--checked-background-color, var(--foreground))}.sil-radio__label{display:flex;gap:1em;align-items:center;padding:var(--input-field--label-padding, var(--input-field--padding, .75em 0em))}.sil-radio__label:before{border-radius:var(--input-field--border-radius, 50%);border:2px solid var(--input-field--border-color, rgba(var(--foreground-r), var(--foreground-g), var(--foreground-b), .25));color:var(--input-field--text-color, var(--foreground, #fff));content:"";width:1.33em;height:1.33em}
`;
var h = Object.defineProperty, m = Object.getOwnPropertyDescriptor, a = (e, t, d, l) => {
  for (var o = l > 1 ? void 0 : l ? m(t, d) : t, n = e.length - 1, s; n >= 0; n--)
    (s = e[n]) && (o = (l ? s(t, d, o) : s(o)) || o);
  return l && o && h(t, d, o), o;
};
let r = class extends u {
  constructor() {
    super(...arguments), this.label = "", this.value = !1, this.required = !1, this.id = "", this.name = "";
  }
  handleChange(e) {
    this.value = e.target.value;
  }
  render() {
    const e = v(c("radio"));
    return f`
      <div class="${e()}">
        <input
          id="radio"
          name="${this.name}"
          type="radio"
          class="${e("control")}"
          value="${this.value}"
          @input="${this.handleChange}"
        />
        <label for="radio" class="${e("label")}">${this.label}</label>
      </div>
    `;
  }
};
r.styles = p(g);
a([
  i({ type: String })
], r.prototype, "label", 2);
a([
  i({ type: Boolean })
], r.prototype, "value", 2);
a([
  i({ type: Boolean })
], r.prototype, "required", 2);
a([
  i({ type: String })
], r.prototype, "id", 2);
a([
  i({ type: String })
], r.prototype, "name", 2);
r = a([
  b(c("radio"))
], r);
export {
  r as RadioField
};
