import { jsx as R } from "react/jsx-runtime";
import V from "react";
import { o as _ } from "./create-component-CVXl33PD.mjs";
import { r as v, _ as t, n as d, c as q, x as E, E as m, a as F, b as T } from "./class-map-CwiboTfb.mjs";
import "./ripple-pQcEjR05.mjs";
import { r as b, a as M } from "./animation-DjClVFum.mjs";
import { m as S } from "./delegate-BXi1gVeU.mjs";
import { i as G, d as L } from "./form-label-activation-ed0HgVsy.mjs";
import { r as N } from "./redispatch-event-taWUbWUt.mjs";
import { m as O, c as Y, g as j } from "./validator-DZt1_yHv.mjs";
import { m as H } from "./element-internals-3IY9gE4L.mjs";
import { m as J, g as K, a as P } from "./form-associated-CyYeHPMb.mjs";
import { C as Q } from "./checkbox-validator-Cy4iemH_.mjs";
/**
 * @license
 * Copyright 2019 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */
const U = S(O(J(H(v))));
let r = class extends U {
  constructor() {
    super(), this.checked = !1, this.indeterminate = !1, this.required = !1, this.value = "on", this.prevChecked = !1, this.prevDisabled = !1, this.prevIndeterminate = !1, this.addEventListener("click", (e) => {
      !G(e) || !this.input || (this.focus(), L(this.input));
    });
  }
  update(e) {
    (e.has("checked") || e.has("disabled") || e.has("indeterminate")) && (this.prevChecked = e.get("checked") ?? this.checked, this.prevDisabled = e.get("disabled") ?? this.disabled, this.prevIndeterminate = e.get("indeterminate") ?? this.indeterminate), super.update(e);
  }
  render() {
    const e = !this.prevChecked && !this.prevIndeterminate, o = this.prevChecked && !this.prevIndeterminate, n = this.prevIndeterminate, a = this.checked && !this.indeterminate, i = this.indeterminate, l = q({
      disabled: this.disabled,
      selected: a || i,
      unselected: !a && !i,
      checked: a,
      indeterminate: i,
      "prev-unselected": e,
      "prev-checked": o,
      "prev-indeterminate": n,
      "prev-disabled": this.prevDisabled
    }), { ariaLabel: h, ariaInvalid: p } = this;
    return E`
      <div class="container ${l}">
        <input
          type="checkbox"
          id="input"
          aria-checked=${i ? "mixed" : m}
          aria-label=${h || m}
          aria-invalid=${p || m}
          ?disabled=${this.disabled}
          ?required=${this.required}
          .indeterminate=${this.indeterminate}
          .checked=${this.checked}
          @input=${this.handleInput}
          @change=${this.handleChange} />

        <div class="outline"></div>
        <div class="background"></div>
        <md-focus-ring part="focus-ring" for="input"></md-focus-ring>
        <md-ripple for="input" ?disabled=${this.disabled}></md-ripple>
        <svg class="icon" viewBox="0 0 18 18" aria-hidden="true">
          <rect class="mark short" />
          <rect class="mark long" />
        </svg>
      </div>
    `;
  }
  handleInput(e) {
    const o = e.target;
    this.checked = o.checked, this.indeterminate = o.indeterminate;
  }
  handleChange(e) {
    N(this, e);
  }
  [K]() {
    return !this.checked || this.indeterminate ? null : this.value;
  }
  [P]() {
    return String(this.checked);
  }
  formResetCallback() {
    this.checked = this.hasAttribute("checked");
  }
  formStateRestoreCallback(e) {
    this.checked = e === "true";
  }
  [Y]() {
    return new Q(() => this);
  }
  [j]() {
    return this.input;
  }
};
r.shadowRootOptions = {
  ...v.shadowRootOptions,
  delegatesFocus: !0
};
t([
  d({ type: Boolean })
], r.prototype, "checked", void 0);
t([
  d({ type: Boolean })
], r.prototype, "indeterminate", void 0);
t([
  d({ type: Boolean })
], r.prototype, "required", void 0);
t([
  d()
], r.prototype, "value", void 0);
t([
  b()
], r.prototype, "prevChecked", void 0);
t([
  b()
], r.prototype, "prevDisabled", void 0);
t([
  b()
], r.prototype, "prevIndeterminate", void 0);
t([
  M("input")
], r.prototype, "input", void 0);
/**
 * @license
 * Copyright 2024 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */
const W = F`:host{border-start-start-radius:var(--md-checkbox-container-shape-start-start, var(--md-checkbox-container-shape, 2px));border-start-end-radius:var(--md-checkbox-container-shape-start-end, var(--md-checkbox-container-shape, 2px));border-end-end-radius:var(--md-checkbox-container-shape-end-end, var(--md-checkbox-container-shape, 2px));border-end-start-radius:var(--md-checkbox-container-shape-end-start, var(--md-checkbox-container-shape, 2px));display:inline-flex;height:var(--md-checkbox-container-size, 18px);position:relative;vertical-align:top;width:var(--md-checkbox-container-size, 18px);-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer}:host([disabled]){cursor:default}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--md-checkbox-container-size, 18px))/2)}md-focus-ring{height:44px;inset:unset;width:44px}input{appearance:none;height:48px;margin:0;opacity:0;outline:none;position:absolute;width:48px;z-index:1;cursor:inherit}:host([touch-target=none]) input{height:100%;width:100%}.container{border-radius:inherit;display:flex;height:100%;place-content:center;place-items:center;position:relative;width:100%}.outline,.background,.icon{inset:0;position:absolute}.outline,.background{border-radius:inherit}.outline{border-color:var(--md-checkbox-outline-color, var(--md-sys-color-on-surface-variant, #49454f));border-style:solid;border-width:var(--md-checkbox-outline-width, 2px);box-sizing:border-box}.background{background-color:var(--md-checkbox-selected-container-color, var(--md-sys-color-primary, #6750a4))}.background,.icon{opacity:0;transition-duration:150ms,50ms;transition-property:transform,opacity;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15),linear;transform:scale(0.6)}:where(.selected) :is(.background,.icon){opacity:1;transition-duration:350ms,50ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1),linear;transform:scale(1)}md-ripple{border-radius:var(--md-checkbox-state-layer-shape, var(--md-sys-shape-corner-full, 9999px));height:var(--md-checkbox-state-layer-size, 40px);inset:unset;width:var(--md-checkbox-state-layer-size, 40px);--md-ripple-hover-color: var(--md-checkbox-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-checkbox-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-checkbox-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-opacity: var(--md-checkbox-pressed-state-layer-opacity, 0.12)}.selected md-ripple{--md-ripple-hover-color: var(--md-checkbox-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-opacity: var(--md-checkbox-selected-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-checkbox-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-checkbox-selected-pressed-state-layer-opacity, 0.12)}.icon{fill:var(--md-checkbox-selected-icon-color, var(--md-sys-color-on-primary, #fff));height:var(--md-checkbox-icon-size, 18px);width:var(--md-checkbox-icon-size, 18px)}.mark.short{height:2px;transition-property:transform,height;width:2px}.mark.long{height:2px;transition-property:transform,width;width:10px}.mark{animation-duration:150ms;animation-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15);transition-duration:150ms;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15)}.selected .mark{animation-duration:350ms;animation-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1);transition-duration:350ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1)}.checked .mark,.prev-checked.unselected .mark{transform:scaleY(-1) translate(7px, -14px) rotate(45deg)}.checked .mark.short,.prev-checked.unselected .mark.short{height:5.6568542495px}.checked .mark.long,.prev-checked.unselected .mark.long{width:11.313708499px}.indeterminate .mark,.prev-indeterminate.unselected .mark{transform:scaleY(-1) translate(4px, -10px) rotate(0deg)}.prev-unselected .mark{transition-property:none}.prev-unselected.checked .mark.long{animation-name:prev-unselected-to-checked}@keyframes prev-unselected-to-checked{from{width:0}}:where(:hover) .outline{border-color:var(--md-checkbox-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-hover-outline-width, 2px)}:where(:hover) .background{background:var(--md-checkbox-selected-hover-container-color, var(--md-sys-color-primary, #6750a4))}:where(:hover) .icon{fill:var(--md-checkbox-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff))}:where(:focus-within) .outline{border-color:var(--md-checkbox-focus-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-focus-outline-width, 2px)}:where(:focus-within) .background{background:var(--md-checkbox-selected-focus-container-color, var(--md-sys-color-primary, #6750a4))}:where(:focus-within) .icon{fill:var(--md-checkbox-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff))}:where(:active) .outline{border-color:var(--md-checkbox-pressed-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-pressed-outline-width, 2px)}:where(:active) .background{background:var(--md-checkbox-selected-pressed-container-color, var(--md-sys-color-primary, #6750a4))}:where(:active) .icon{fill:var(--md-checkbox-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff))}:where(.disabled,.prev-disabled) :is(.background,.icon,.mark){animation-duration:0s;transition-duration:0s}:where(.disabled) .outline{border-color:var(--md-checkbox-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-disabled-outline-width, 2px);opacity:var(--md-checkbox-disabled-container-opacity, 0.38)}:where(.selected.disabled) .outline{visibility:hidden}:where(.selected.disabled) .background{background:var(--md-checkbox-selected-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-checkbox-selected-disabled-container-opacity, 0.38)}:where(.disabled) .icon{fill:var(--md-checkbox-selected-disabled-icon-color, var(--md-sys-color-surface, #fef7ff))}@media(forced-colors: active){.background{background-color:CanvasText}.selected.disabled .background{background-color:GrayText;opacity:1}.outline{border-color:CanvasText}.disabled .outline{border-color:GrayText;opacity:1}.icon{fill:Canvas}}
`;
/**
 * @license
 * Copyright 2018 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */
let s = class extends r {
};
s.styles = [W];
s = t([
  T("md-checkbox")
], s);
const X = _({
  tagName: "md-checkbox",
  react: V,
  elementClass: s
}), be = ({ checked: c, indeterminate: e, id: o, disabled: n, hidden: a, ariaLabel: i, ariaLabelledBy: l, ariaDescribedBy: h, ariaControls: p, required: u, onInput: k, onChange: x, onClick: f, onMouseDown: y, onMouseUp: g, onMouseEnter: w, onFocus: C, onBlur: z, className: $, style: I, tabIndex: A, name: B, ...D }) => /* @__PURE__ */ R(
  X,
  {
    ...D,
    id: o,
    value: c ? "on" : "off",
    indeterminate: e,
    disabled: n || !1,
    required: u,
    checked: c,
    hidden: a,
    "touch-target": "wrapper",
    "aria-label": i,
    "aria-labelledby": l,
    "aria-describedby": h,
    "aria-controls": p,
    "aria-required": u,
    onInput: k,
    onChange: x,
    onClick: f,
    onMouseDown: y,
    onMouseUp: g,
    onMouseEnter: w,
    onFocus: C,
    onBlur: z,
    className: $,
    style: I,
    tabIndex: A,
    name: B || void 0
  }
);
export {
  be as Checkbox
};