import { jsx as x } from "react/jsx-runtime";
import w from "react";
import { o as C } from "./create-component-CVXl33PD.mjs";
import { _ as h, n as y, r as E, x as I, c as R, a as S, b as A } from "./class-map-CwiboTfb.mjs";
import "./ripple-pQcEjR05.mjs";
import { a as q } from "./animation-DjClVFum.mjs";
import { i as L } from "./form-label-activation-ed0HgVsy.mjs";
import { V as $, m as F, c as z, g as D } from "./validator-DZt1_yHv.mjs";
import { m as T, i as k } from "./element-internals-3IY9gE4L.mjs";
import { m as V } from "./focusable-CDJoU7XD.mjs";
import { m as K, g as M, a as _ } from "./form-associated-CyYeHPMb.mjs";
/**
 * @license
 * Copyright 2023 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */
class B extends $ {
  computeValidity(e) {
    this.radioElement || (this.radioElement = document.createElement("input"), this.radioElement.type = "radio", this.radioElement.name = "group");
    let i = !1, t = !1;
    for (const { checked: o, required: r } of e)
      r && (i = !0), o && (t = !0);
    return this.radioElement.checked = t, this.radioElement.required = i, {
      validity: {
        valueMissing: i && !t
      },
      validationMessage: this.radioElement.validationMessage
    };
  }
  equals(e, i) {
    if (e.length !== i.length)
      return !1;
    for (let t = 0; t < e.length; t++) {
      const o = e[t], r = i[t];
      if (o.checked !== r.checked || o.required !== r.required)
        return !1;
    }
    return !0;
  }
  copy(e) {
    return e.map(({ checked: i, required: t }) => ({
      checked: i,
      required: t
    }));
  }
}
/**
 * @license
 * Copyright 2022 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */
class O {
  /**
   * All single selection elements in the host element's root with the same
   * `name` attribute, including the host element.
   */
  get controls() {
    const e = this.host.getAttribute("name");
    return !e || !this.root || !this.host.isConnected ? [this.host] : Array.from(this.root.querySelectorAll(`[name="${e}"]`));
  }
  constructor(e) {
    this.host = e, this.focused = !1, this.root = null, this.handleFocusIn = () => {
      this.focused = !0, this.updateTabIndices();
    }, this.handleFocusOut = () => {
      this.focused = !1, this.updateTabIndices();
    }, this.handleKeyDown = (i) => {
      const t = i.key === "ArrowDown", o = i.key === "ArrowUp", r = i.key === "ArrowLeft", u = i.key === "ArrowRight";
      if (!r && !u && !t && !o)
        return;
      const a = this.controls;
      if (!a.length)
        return;
      i.preventDefault();
      const p = getComputedStyle(this.host).direction === "rtl" ? r || t : u || t, l = a.indexOf(this.host);
      let s = p ? l + 1 : l - 1;
      for (; s !== l; ) {
        s >= a.length ? s = 0 : s < 0 && (s = a.length - 1);
        const c = a[s];
        if (c.hasAttribute("disabled")) {
          p ? s++ : s--;
          continue;
        }
        for (const n of a)
          n !== c && (n.checked = !1, n.tabIndex = -1, n.blur());
        c.checked = !0, c.tabIndex = 0, c.focus(), c.dispatchEvent(new Event("change", { bubbles: !0 }));
        break;
      }
    };
  }
  hostConnected() {
    this.root = this.host.getRootNode(), this.host.addEventListener("keydown", this.handleKeyDown), this.host.addEventListener("focusin", this.handleFocusIn), this.host.addEventListener("focusout", this.handleFocusOut), this.host.checked && this.uncheckSiblings(), this.updateTabIndices();
  }
  hostDisconnected() {
    this.host.removeEventListener("keydown", this.handleKeyDown), this.host.removeEventListener("focusin", this.handleFocusIn), this.host.removeEventListener("focusout", this.handleFocusOut), this.updateTabIndices(), this.root = null;
  }
  /**
   * Should be called whenever the host's `checked` property changes
   * synchronously.
   */
  handleCheckedChange() {
    this.host.checked && (this.uncheckSiblings(), this.updateTabIndices());
  }
  uncheckSiblings() {
    for (const e of this.controls)
      e !== this.host && (e.checked = !1);
  }
  /**
   * Updates the `tabindex` of the host and its siblings.
   */
  updateTabIndices() {
    const e = this.controls, i = e.find((t) => t.checked);
    if (i || this.focused) {
      const t = i || this.host;
      t.tabIndex = 0;
      for (const o of e)
        o !== t && (o.tabIndex = -1);
      return;
    }
    for (const t of e)
      t.tabIndex = 0;
  }
}
/**
 * @license
 * Copyright 2018 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */
var g;
const v = Symbol("checked");
let N = 0;
const U = F(K(T(V(E))));
let m = class extends U {
  /**
   * Whether or not the radio is selected.
   */
  get checked() {
    return this[v];
  }
  set checked(e) {
    const i = this.checked;
    i !== e && (this[v] = e, this.requestUpdate("checked", i), this.selectionController.handleCheckedChange());
  }
  constructor() {
    super(), this.maskId = `cutout${++N}`, this[g] = !1, this.required = !1, this.value = "on", this.selectionController = new O(this), this.addController(this.selectionController), this[k].role = "radio", this.addEventListener("click", this.handleClick.bind(this)), this.addEventListener("keydown", this.handleKeydown.bind(this));
  }
  render() {
    const e = { checked: this.checked };
    return I`
      <div class="container ${R(e)}" aria-hidden="true">
        <md-ripple
          part="ripple"
          .control=${this}
          ?disabled=${this.disabled}></md-ripple>
        <md-focus-ring part="focus-ring" .control=${this}></md-focus-ring>
        <svg class="icon" viewBox="0 0 20 20">
          <mask id="${this.maskId}">
            <rect width="100%" height="100%" fill="white" />
            <circle cx="10" cy="10" r="8" fill="black" />
          </mask>
          <circle
            class="outer circle"
            cx="10"
            cy="10"
            r="10"
            mask="url(#${this.maskId})" />
          <circle class="inner circle" cx="10" cy="10" r="5" />
        </svg>

        <div class="touch-target"></div>
      </div>
    `;
  }
  updated() {
    this[k].ariaChecked = String(this.checked);
  }
  async handleClick(e) {
    this.disabled || (await 0, !e.defaultPrevented && (L(e) && this.focus(), this.checked = !0, this.dispatchEvent(new Event("change", { bubbles: !0 })), this.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 }))));
  }
  async handleKeydown(e) {
    await 0, !(e.key !== " " || e.defaultPrevented) && this.click();
  }
  [(g = v, M)]() {
    return this.checked ? this.value : null;
  }
  [_]() {
    return String(this.checked);
  }
  formResetCallback() {
    this.checked = this.hasAttribute("checked");
  }
  formStateRestoreCallback(e) {
    this.checked = e === "true";
  }
  [z]() {
    return new B(() => this.selectionController ? this.selectionController.controls : [this]);
  }
  [D]() {
    return this.container;
  }
};
h([
  y({ type: Boolean })
], m.prototype, "checked", null);
h([
  y({ type: Boolean })
], m.prototype, "required", void 0);
h([
  y()
], m.prototype, "value", void 0);
h([
  q(".container")
], m.prototype, "container", void 0);
/**
 * @license
 * Copyright 2024 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */
const P = S`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20px);outline:none;position:relative;vertical-align:top;width:var(--md-radio-icon-size, 20px);-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer;--md-ripple-hover-color: var(--md-radio-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-radio-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-radio-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-opacity: var(--md-radio-pressed-state-layer-opacity, 0.12)}:host([disabled]){cursor:default}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--md-radio-icon-size, 20px))/2)}.container{display:flex;height:100%;place-content:center;place-items:center;width:100%}md-focus-ring{height:44px;inset:unset;width:44px}.checked{--md-ripple-hover-color: var(--md-radio-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-opacity: var(--md-radio-selected-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-radio-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-radio-selected-pressed-state-layer-opacity, 0.12)}.touch-target{height:48px;position:absolute;width:48px}:host([touch-target=none]) .touch-target{display:none}md-ripple{border-radius:50%;height:var(--md-radio-state-layer-size, 40px);inset:unset;width:var(--md-radio-state-layer-size, 40px)}.icon{fill:var(--md-radio-icon-color, var(--md-sys-color-on-surface-variant, #49454f));inset:0;position:absolute}.outer.circle{transition:fill 50ms linear}.inner.circle{opacity:0;transform-origin:center;transition:opacity 50ms linear}.checked .icon{fill:var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4))}.checked .inner.circle{animation:inner-circle-grow 300ms cubic-bezier(0.05, 0.7, 0.1, 1);opacity:1}@keyframes inner-circle-grow{from{transform:scale(0)}to{transform:scale(1)}}:host([disabled]) .circle{animation-duration:0s;transition-duration:0s}:host(:hover) .icon{fill:var(--md-radio-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host(:focus-within) .icon{fill:var(--md-radio-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host(:active) .icon{fill:var(--md-radio-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host([disabled]) .icon{fill:var(--md-radio-disabled-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-radio-disabled-unselected-icon-opacity, 0.38)}:host(:hover) .checked .icon{fill:var(--md-radio-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4))}:host(:focus-within) .checked .icon{fill:var(--md-radio-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4))}:host(:active) .checked .icon{fill:var(--md-radio-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4))}:host([disabled]) .checked .icon{fill:var(--md-radio-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-radio-disabled-selected-icon-opacity, 0.38)}}@layer hcm{@media(forced-colors: active){.icon{fill:CanvasText}:host([disabled]) .icon{fill:GrayText;opacity:1}}}
`;
/**
 * @license
 * Copyright 2022 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */
let f = class extends m {
};
f.styles = [P];
f = h([
  A("md-radio")
], f);
const j = C({
  react: w,
  tagName: "md-radio",
  elementClass: f
}), re = (d) => {
  const {
    checked: e,
    value: i,
    required: t,
    disabled: o,
    name: r,
    ariaLabel: u,
    className: a,
    style: b,
    id: p,
    iconColor: l,
    selectedIconColor: s,
    iconSize: c,
    ...n
  } = d;
  return /* @__PURE__ */ x(
    j,
    {
      checked: e,
      value: i,
      required: t,
      disabled: o || !1,
      name: r,
      className: a,
      style: {
        ...b,
        "--md-radio-icon-color": l || "var(--md-sys-on-surface-variant)",
        "--md-radio-selected-icon-color": s || "var(--md-sys-color-primary)",
        "--md-radio-icon-size": c || "20px"
      },
      id: p,
      "aria-label": u,
      ...n
    }
  );
};
export {
  re as Radio
};