@mhmo91/schmancy 0.4.76 → 0.4.77

package/dist/checkbox-zTyMywpJ.js

@@ -0,0 +1,527 @@
+import { _ as n } from "./tslib.es6-ujVQHAQ4.js";
+import { property as c, customElement as I, state as y, query as G } from "lit/decorators.js";
+import { isServer as f, LitElement as x, css as N, html as k, nothing as E } from "lit";
+import { classMap as H } from "lit/directives/class-map.js";
+import "rxjs";
+import "lit/directives/style-map.js";
+import { T as J } from "./tailwind.mixin-DbE6WE_l.js";
+import { when as Q } from "lit/directives/when.js";
+const Y = Symbol("attachableController");
+let K;
+f || (K = new MutationObserver((o) => {
+  for (const e of o) e.target[Y]?.hostConnected();
+}));
+class W {
+  get htmlFor() {
+    return this.host.getAttribute("for");
+  }
+  set htmlFor(e) {
+    e === null ? this.host.removeAttribute("for") : this.host.setAttribute("for", e);
+  }
+  get control() {
+    return this.host.hasAttribute("for") ? this.htmlFor && this.host.isConnected ? this.host.getRootNode().querySelector(`#${this.htmlFor}`) : null : this.currentControl || this.host.parentElement;
+  }
+  set control(e) {
+    e ? this.attach(e) : this.detach();
+  }
+  constructor(e, t) {
+    this.host = e, this.onControlChange = t, this.currentControl = null, e.addController(this), e[Y] = this, K?.observe(e, { attributeFilter: ["for"] });
+  }
+  attach(e) {
+    e !== this.currentControl && (this.setCurrentControl(e), this.host.removeAttribute("for"));
+  }
+  detach() {
+    this.setCurrentControl(null), this.host.setAttribute("for", "");
+  }
+  hostConnected() {
+    this.setCurrentControl(this.control);
+  }
+  hostDisconnected() {
+    this.setCurrentControl(null);
+  }
+  setCurrentControl(e) {
+    this.onControlChange(this.currentControl, e), this.currentControl = e;
+  }
+}
+const Z = ["focusin", "focusout", "pointerdown"];
+class $ extends x {
+  constructor() {
+    super(...arguments), this.visible = !1, this.inward = !1, this.attachableController = new W(this, this.onControlChange.bind(this));
+  }
+  get htmlFor() {
+    return this.attachableController.htmlFor;
+  }
+  set htmlFor(e) {
+    this.attachableController.htmlFor = e;
+  }
+  get control() {
+    return this.attachableController.control;
+  }
+  set control(e) {
+    this.attachableController.control = e;
+  }
+  attach(e) {
+    this.attachableController.attach(e);
+  }
+  detach() {
+    this.attachableController.detach();
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("aria-hidden", "true");
+  }
+  handleEvent(e) {
+    if (!e[U]) {
+      switch (e.type) {
+        default:
+          return;
+        case "focusin":
+          this.visible = this.control?.matches(":focus-visible") ?? !1;
+          break;
+        case "focusout":
+        case "pointerdown":
+          this.visible = !1;
+      }
+      e[U] = !0;
+    }
+  }
+  onControlChange(e, t) {
+    if (!f) for (const r of Z) e?.removeEventListener(r, this), t?.addEventListener(r, this);
+  }
+  update(e) {
+    e.has("visible") && this.dispatchEvent(new Event("visibility-changed")), super.update(e);
+  }
+}
+n([c({ type: Boolean, reflect: !0 })], $.prototype, "visible", void 0), n([c({ type: Boolean, reflect: !0 })], $.prototype, "inward", void 0);
+const U = Symbol("handledByFocusRing"), ee = N`:host{animation-delay:0s,calc(var(--md-focus-ring-duration, 600ms)*.25);animation-duration:calc(var(--md-focus-ring-duration, 600ms)*.25),calc(var(--md-focus-ring-duration, 600ms)*.75);animation-timing-function:cubic-bezier(0.2, 0, 0, 1);box-sizing:border-box;color:var(--md-focus-ring-color, var(--md-sys-color-secondary, #625b71));display:none;pointer-events:none;position:absolute}:host([visible]){display:flex}:host(:not([inward])){animation-name:outward-grow,outward-shrink;border-end-end-radius:calc(var(--md-focus-ring-shape-end-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));border-start-start-radius:calc(var(--md-focus-ring-shape-start-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));inset:calc(-1*var(--md-focus-ring-outward-offset, 2px));outline:var(--md-focus-ring-width, 3px) solid currentColor}:host([inward]){animation-name:inward-grow,inward-shrink;border-end-end-radius:calc(var(--md-focus-ring-shape-end-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border-start-start-radius:calc(var(--md-focus-ring-shape-start-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border:var(--md-focus-ring-width, 3px) solid currentColor;inset:var(--md-focus-ring-inward-offset, 0px)}@keyframes outward-grow{from{outline-width:0}to{outline-width:var(--md-focus-ring-active-width, 8px)}}@keyframes outward-shrink{from{outline-width:var(--md-focus-ring-active-width, 8px)}}@keyframes inward-grow{from{border-width:0}to{border-width:var(--md-focus-ring-active-width, 8px)}}@keyframes inward-shrink{from{border-width:var(--md-focus-ring-active-width, 8px)}}@media(prefers-reduced-motion){:host{animation:none}}
+`;
+let P = class extends $ {
+};
+P.styles = [ee], P = n([I("md-focus-ring")], P);
+const te = "cubic-bezier(0.2, 0, 0, 1)";
+var d;
+(function(o) {
+  o[o.INACTIVE = 0] = "INACTIVE", o[o.TOUCH_DELAY = 1] = "TOUCH_DELAY", o[o.HOLDING = 2] = "HOLDING", o[o.WAITING_FOR_CLICK = 3] = "WAITING_FOR_CLICK";
+})(d || (d = {}));
+const re = ["click", "contextmenu", "pointercancel", "pointerdown", "pointerenter", "pointerleave", "pointerup"], ie = f ? null : window.matchMedia("(forced-colors: active)");
+class g extends x {
+  constructor() {
+    super(...arguments), this.disabled = !1, this.hovered = !1, this.pressed = !1, this.rippleSize = "", this.rippleScale = "", this.initialSize = 0, this.state = d.INACTIVE, this.checkBoundsAfterContextMenu = !1, this.attachableController = new W(this, this.onControlChange.bind(this));
+  }
+  get htmlFor() {
+    return this.attachableController.htmlFor;
+  }
+  set htmlFor(e) {
+    this.attachableController.htmlFor = e;
+  }
+  get control() {
+    return this.attachableController.control;
+  }
+  set control(e) {
+    this.attachableController.control = e;
+  }
+  attach(e) {
+    this.attachableController.attach(e);
+  }
+  detach() {
+    this.attachableController.detach();
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("aria-hidden", "true");
+  }
+  render() {
+    const e = { hovered: this.hovered, pressed: this.pressed };
+    return k`<div class="surface ${H(e)}"></div>`;
+  }
+  update(e) {
+    e.has("disabled") && this.disabled && (this.hovered = !1, this.pressed = !1), super.update(e);
+  }
+  handlePointerenter(e) {
+    this.shouldReactToEvent(e) && (this.hovered = !0);
+  }
+  handlePointerleave(e) {
+    this.shouldReactToEvent(e) && (this.hovered = !1, this.state !== d.INACTIVE && this.endPressAnimation());
+  }
+  handlePointerup(e) {
+    if (this.shouldReactToEvent(e)) {
+      if (this.state !== d.HOLDING) return this.state === d.TOUCH_DELAY ? (this.state = d.WAITING_FOR_CLICK, void this.startPressAnimation(this.rippleStartEvent)) : void 0;
+      this.state = d.WAITING_FOR_CLICK;
+    }
+  }
+  async handlePointerdown(e) {
+    if (this.shouldReactToEvent(e)) {
+      if (this.rippleStartEvent = e, !this.isTouch(e)) return this.state = d.WAITING_FOR_CLICK, void this.startPressAnimation(e);
+      this.checkBoundsAfterContextMenu && !this.inBounds(e) || (this.checkBoundsAfterContextMenu = !1, this.state = d.TOUCH_DELAY, await new Promise((t) => {
+        setTimeout(t, 150);
+      }), this.state === d.TOUCH_DELAY && (this.state = d.HOLDING, this.startPressAnimation(e)));
+    }
+  }
+  handleClick() {
+    this.disabled || (this.state !== d.WAITING_FOR_CLICK ? this.state === d.INACTIVE && (this.startPressAnimation(), this.endPressAnimation()) : this.endPressAnimation());
+  }
+  handlePointercancel(e) {
+    this.shouldReactToEvent(e) && this.endPressAnimation();
+  }
+  handleContextmenu() {
+    this.disabled || (this.checkBoundsAfterContextMenu = !0, this.endPressAnimation());
+  }
+  determineRippleSize() {
+    const { height: e, width: t } = this.getBoundingClientRect(), r = Math.max(e, t), i = Math.max(0.35 * r, 75), a = Math.floor(0.2 * r), s = Math.sqrt(t ** 2 + e ** 2) + 10;
+    this.initialSize = a, this.rippleScale = "" + (s + i) / a, this.rippleSize = `${a}px`;
+  }
+  getNormalizedPointerEventCoords(e) {
+    const { scrollX: t, scrollY: r } = window, { left: i, top: a } = this.getBoundingClientRect(), s = t + i, l = r + a, { pageX: b, pageY: w } = e;
+    return { x: b - s, y: w - l };
+  }
+  getTranslationCoordinates(e) {
+    const { height: t, width: r } = this.getBoundingClientRect(), i = { x: (r - this.initialSize) / 2, y: (t - this.initialSize) / 2 };
+    let a;
+    return a = e instanceof PointerEvent ? this.getNormalizedPointerEventCoords(e) : { x: r / 2, y: t / 2 }, a = { x: a.x - this.initialSize / 2, y: a.y - this.initialSize / 2 }, { startPoint: a, endPoint: i };
+  }
+  startPressAnimation(e) {
+    if (!this.mdRoot) return;
+    this.pressed = !0, this.growAnimation?.cancel(), this.determineRippleSize();
+    const { startPoint: t, endPoint: r } = this.getTranslationCoordinates(e), i = `${t.x}px, ${t.y}px`, a = `${r.x}px, ${r.y}px`;
+    this.growAnimation = this.mdRoot.animate({ top: [0, 0], left: [0, 0], height: [this.rippleSize, this.rippleSize], width: [this.rippleSize, this.rippleSize], transform: [`translate(${i}) scale(1)`, `translate(${a}) scale(${this.rippleScale})`] }, { pseudoElement: "::after", duration: 450, easing: te, fill: "forwards" });
+  }
+  async endPressAnimation() {
+    this.rippleStartEvent = void 0, this.state = d.INACTIVE;
+    const e = this.growAnimation;
+    let t = 1 / 0;
+    typeof e?.currentTime == "number" ? t = e.currentTime : e?.currentTime && (t = e.currentTime.to("ms").value), t >= 225 ? this.pressed = !1 : (await new Promise((r) => {
+      setTimeout(r, 225 - t);
+    }), this.growAnimation === e && (this.pressed = !1));
+  }
+  shouldReactToEvent(e) {
+    if (this.disabled || !e.isPrimary || this.rippleStartEvent && this.rippleStartEvent.pointerId !== e.pointerId) return !1;
+    if (e.type === "pointerenter" || e.type === "pointerleave") return !this.isTouch(e);
+    const t = e.buttons === 1;
+    return this.isTouch(e) || t;
+  }
+  inBounds({ x: e, y: t }) {
+    const { top: r, left: i, bottom: a, right: s } = this.getBoundingClientRect();
+    return e >= i && e <= s && t >= r && t <= a;
+  }
+  isTouch({ pointerType: e }) {
+    return e === "touch";
+  }
+  async handleEvent(e) {
+    if (!ie?.matches) switch (e.type) {
+      case "click":
+        this.handleClick();
+        break;
+      case "contextmenu":
+        this.handleContextmenu();
+        break;
+      case "pointercancel":
+        this.handlePointercancel(e);
+        break;
+      case "pointerdown":
+        await this.handlePointerdown(e);
+        break;
+      case "pointerenter":
+        this.handlePointerenter(e);
+        break;
+      case "pointerleave":
+        this.handlePointerleave(e);
+        break;
+      case "pointerup":
+        this.handlePointerup(e);
+    }
+  }
+  onControlChange(e, t) {
+    if (!f) for (const r of re) e?.removeEventListener(r, this), t?.addEventListener(r, this);
+  }
+}
+n([c({ type: Boolean, reflect: !0 })], g.prototype, "disabled", void 0), n([y()], g.prototype, "hovered", void 0), n([y()], g.prototype, "pressed", void 0), n([G(".surface")], g.prototype, "mdRoot", void 0);
+const oe = N`:host{display:flex;margin:auto;pointer-events:none}:host([disabled]){display:none}@media(forced-colors: active){:host{display:none}}:host,.surface{border-radius:inherit;position:absolute;inset:0;overflow:hidden}.surface{-webkit-tap-highlight-color:rgba(0,0,0,0)}.surface::before,.surface::after{content:"";opacity:0;position:absolute}.surface::before{background-color:var(--md-ripple-hover-color, var(--md-sys-color-on-surface, #1d1b20));inset:0;transition:opacity 15ms linear,background-color 15ms linear}.surface::after{background:radial-gradient(closest-side, var(--md-ripple-pressed-color, var(--md-sys-color-on-surface, #1d1b20)) max(100% - 70px, 65%), transparent 100%);transform-origin:center center;transition:opacity 375ms linear}.hovered::before{background-color:var(--md-ripple-hover-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-ripple-hover-opacity, 0.08)}.pressed::after{opacity:var(--md-ripple-pressed-opacity, 0.12);transition-duration:105ms}
+`;
+let T = class extends g {
+};
+T.styles = [oe], T = n([I("md-ripple")], T);
+const j = ["role", "ariaAtomic", "ariaAutoComplete", "ariaBusy", "ariaChecked", "ariaColCount", "ariaColIndex", "ariaColSpan", "ariaCurrent", "ariaDisabled", "ariaExpanded", "ariaHasPopup", "ariaHidden", "ariaInvalid", "ariaKeyShortcuts", "ariaLabel", "ariaLevel", "ariaLive", "ariaModal", "ariaMultiLine", "ariaMultiSelectable", "ariaOrientation", "ariaPlaceholder", "ariaPosInSet", "ariaPressed", "ariaReadOnly", "ariaRequired", "ariaRoleDescription", "ariaRowCount", "ariaRowIndex", "ariaRowSpan", "ariaSelected", "ariaSetSize", "ariaSort", "ariaValueMax", "ariaValueMin", "ariaValueNow", "ariaValueText"], ae = j.map(X);
+function z(o) {
+  return ae.includes(o);
+}
+function X(o) {
+  return o.replace("aria", "aria-").replace(/Elements?/g, "").toLowerCase();
+}
+const C = Symbol("privateIgnoreAttributeChangesFor");
+function R(o) {
+  return `data-${o}`;
+}
+function M(o) {
+  return o.replace(/-\w/, (e) => e[1].toUpperCase());
+}
+function se(o) {
+  return o.currentTarget === o.target && o.composedPath()[0] === o.target && !o.target.disabled && !function(e) {
+    const t = V;
+    return t && (e.preventDefault(), e.stopImmediatePropagation()), async function() {
+      V = !0, await null, V = !1;
+    }(), t;
+  }(o);
+}
+let V = !1;
+const u = Symbol("internals"), L = Symbol("privateInternals"), F = Symbol("createValidator"), B = Symbol("getValidityAnchor"), q = Symbol("privateValidator"), m = Symbol("privateSyncValidity"), A = Symbol("privateCustomValidationMessage"), S = Symbol("getFormValue"), D = Symbol("getFormState");
+class ne {
+  constructor(e) {
+    this.getCurrentState = e, this.currentValidity = { validity: {}, validationMessage: "" };
+  }
+  getValidity() {
+    const e = this.getCurrentState();
+    if (!(!this.prevState || !this.equals(this.prevState, e))) return this.currentValidity;
+    const { validity: t, validationMessage: r } = this.computeValidity(e);
+    return this.prevState = this.copy(e), this.currentValidity = { validationMessage: r, validity: { badInput: t.badInput, customError: t.customError, patternMismatch: t.patternMismatch, rangeOverflow: t.rangeOverflow, rangeUnderflow: t.rangeUnderflow, stepMismatch: t.stepMismatch, tooLong: t.tooLong, tooShort: t.tooShort, typeMismatch: t.typeMismatch, valueMissing: t.valueMissing } }, this.currentValidity;
+  }
+}
+class ce extends ne {
+  computeValidity(e) {
+    return this.checkboxControl || (this.checkboxControl = document.createElement("input"), this.checkboxControl.type = "checkbox"), this.checkboxControl.checked = e.checked, this.checkboxControl.required = e.required, { validity: this.checkboxControl.validity, validationMessage: this.checkboxControl.validationMessage };
+  }
+  equals(e, t) {
+    return e.checked === t.checked && e.required === t.required;
+  }
+  copy({ checked: e, required: t }) {
+    return { checked: e, required: t };
+  }
+}
+const de = function(o) {
+  var e;
+  if (f) return o;
+  class t extends o {
+    constructor() {
+      super(...arguments), this[e] = /* @__PURE__ */ new Set();
+    }
+    attributeChangedCallback(i, a, s) {
+      if (!z(i)) return void super.attributeChangedCallback(i, a, s);
+      if (this[C].has(i)) return;
+      this[C].add(i), this.removeAttribute(i), this[C].delete(i);
+      const l = M(i);
+      s === null ? delete this.dataset[l] : this.dataset[l] = s, this.requestUpdate(M(i), a);
+    }
+    getAttribute(i) {
+      return z(i) ? super.getAttribute(R(i)) : super.getAttribute(i);
+    }
+    removeAttribute(i) {
+      super.removeAttribute(i), z(i) && (super.removeAttribute(R(i)), this.requestUpdate());
+    }
+  }
+  return e = C, function(r) {
+    for (const i of j) {
+      const a = X(i), s = R(a), l = M(a);
+      r.createProperty(i, { attribute: a, noAccessor: !0 }), r.createProperty(Symbol(s), { attribute: s, noAccessor: !0 }), Object.defineProperty(r.prototype, i, { configurable: !0, enumerable: !0, get() {
+        return this.dataset[l] ?? null;
+      }, set(b) {
+        const w = this.dataset[l] ?? null;
+        b !== w && (b === null ? delete this.dataset[l] : this.dataset[l] = b, this.requestUpdate(i, w));
+      } });
+    }
+  }(t), t;
+}(function(o) {
+  var e;
+  class t extends o {
+    constructor() {
+      super(...arguments), this[e] = "";
+    }
+    get validity() {
+      return this[m](), this[u].validity;
+    }
+    get validationMessage() {
+      return this[m](), this[u].validationMessage;
+    }
+    get willValidate() {
+      return this[m](), this[u].willValidate;
+    }
+    checkValidity() {
+      return this[m](), this[u].checkValidity();
+    }
+    reportValidity() {
+      return this[m](), this[u].reportValidity();
+    }
+    setCustomValidity(i) {
+      this[A] = i, this[m]();
+    }
+    requestUpdate(i, a, s) {
+      super.requestUpdate(i, a, s), this[m]();
+    }
+    firstUpdated(i) {
+      super.firstUpdated(i), this[m]();
+    }
+    [(e = A, m)]() {
+      if (f) return;
+      this[q] || (this[q] = this[F]());
+      const { validity: i, validationMessage: a } = this[q].getValidity(), s = !!this[A], l = this[A] || a;
+      this[u].setValidity({ ...i, customError: s }, l, this[B]() ?? void 0);
+    }
+    [F]() {
+      throw new Error("Implement [createValidator]");
+    }
+    [B]() {
+      throw new Error("Implement [getValidityAnchor]");
+    }
+  }
+  return t;
+}(function(o) {
+  class e extends o {
+    get form() {
+      return this[u].form;
+    }
+    get labels() {
+      return this[u].labels;
+    }
+    get name() {
+      return this.getAttribute("name") ?? "";
+    }
+    set name(r) {
+      this.setAttribute("name", r);
+    }
+    get disabled() {
+      return this.hasAttribute("disabled");
+    }
+    set disabled(r) {
+      this.toggleAttribute("disabled", r);
+    }
+    attributeChangedCallback(r, i, a) {
+      if (r === "name" || r === "disabled") {
+        const s = r === "disabled" ? i !== null : i;
+        return void this.requestUpdate(r, s);
+      }
+      super.attributeChangedCallback(r, i, a);
+    }
+    requestUpdate(r, i, a) {
+      super.requestUpdate(r, i, a), this[u].setFormValue(this[S](), this[D]());
+    }
+    [S]() {
+      throw new Error("Implement [getFormValue]");
+    }
+    [D]() {
+      return this[S]();
+    }
+    formDisabledCallback(r) {
+      this.disabled = r;
+    }
+  }
+  return e.formAssociated = !0, n([c({ noAccessor: !0 })], e.prototype, "name", null), n([c({ type: Boolean, noAccessor: !0 })], e.prototype, "disabled", null), e;
+}((_ = x, class extends _ {
+  get [u]() {
+    return this[L] || (this[L] = this.attachInternals()), this[L];
+  }
+}))));
+var _;
+class p extends de {
+  constructor() {
+    super(), this.checked = !1, this.indeterminate = !1, this.required = !1, this.value = "on", this.prevChecked = !1, this.prevDisabled = !1, this.prevIndeterminate = !1, f || this.addEventListener("click", (e) => {
+      se(e) && this.input && (this.focus(), function(t) {
+        const r = new MouseEvent("click", { bubbles: !0 });
+        t.dispatchEvent(r);
+      }(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, t = this.prevChecked && !this.prevIndeterminate, r = this.prevIndeterminate, i = this.checked && !this.indeterminate, a = this.indeterminate, s = H({ disabled: this.disabled, selected: i || a, unselected: !i && !a, checked: i, indeterminate: a, "prev-unselected": e, "prev-checked": t, "prev-indeterminate": r, "prev-disabled": this.prevDisabled }), { ariaLabel: l, ariaInvalid: b } = this;
+    return k`
+      <div class="container ${s}">
+        <input
+          type="checkbox"
+          id="input"
+          aria-checked=${a ? "mixed" : E}
+          aria-label=${l || E}
+          aria-invalid=${b || E}
+          ?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 t = e.target;
+    this.checked = t.checked, this.indeterminate = t.indeterminate;
+  }
+  handleChange(e) {
+    (function(t, r) {
+      !r.bubbles || t.shadowRoot && !r.composed || r.stopPropagation();
+      const i = Reflect.construct(r.constructor, [r.type, r]);
+      t.dispatchEvent(i) || r.preventDefault();
+    })(this, e);
+  }
+  [S]() {
+    return !this.checked || this.indeterminate ? null : this.value;
+  }
+  [D]() {
+    return String(this.checked);
+  }
+  formResetCallback() {
+    this.checked = this.hasAttribute("checked");
+  }
+  formStateRestoreCallback(e) {
+    this.checked = e === "true";
+  }
+  [F]() {
+    return new ce(() => this);
+  }
+  [B]() {
+    return this.input;
+  }
+}
+p.shadowRootOptions = { ...x.shadowRootOptions, delegatesFocus: !0 }, n([c({ type: Boolean })], p.prototype, "checked", void 0), n([c({ type: Boolean })], p.prototype, "indeterminate", void 0), n([c({ type: Boolean })], p.prototype, "required", void 0), n([c()], p.prototype, "value", void 0), n([y()], p.prototype, "prevChecked", void 0), n([y()], p.prototype, "prevDisabled", void 0), n([y()], p.prototype, "prevIndeterminate", void 0), n([G("input")], p.prototype, "input", void 0);
+const le = N`: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}}
+`;
+let O = class extends p {
+};
+O.styles = [le], O = n([I("md-checkbox")], O);
+var he = Object.defineProperty, ue = Object.getOwnPropertyDescriptor, v = (o, e, t, r) => {
+  for (var i, a = r > 1 ? void 0 : r ? ue(e, t) : e, s = o.length - 1; s >= 0; s--) (i = o[s]) && (a = (r ? i(e, t, a) : i(a)) || a);
+  return r && a && he(e, t, a), a;
+};
+let h = class extends J() {
+  constructor() {
+    super(...arguments), this.value = !1, this.disabled = !1, this.required = !1, this.name = "checkbox-" + Math.random().toString(36), this.id = "checkbox-" + Math.random().toString(36), this.size = "md";
+  }
+  get form() {
+    return this.internals?.form;
+  }
+  get checked() {
+    return this.value;
+  }
+  set checked(o) {
+    this.value = o;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  render() {
+    return k`
+			<label class="grid grid-flow-col items-center space-x-2 w-fit">
+				<md-checkbox
+					.required=${this.required}
+					.disabled=${this.disabled}
+					?checked=${this.value === !0}
+					@change=${(o) => {
+      this.value = o.target.checked, this.dispatchEvent(new CustomEvent("change", { detail: { value: this.value } }));
+    }}
+				>
+				</md-checkbox>
+				${Q(this.label, () => k`<span>${this.label}</span>`, () => k`<slot></slot>`)}
+			</label>
+		`;
+  }
+};
+h.shadowRootOptions = { ...x.shadowRootOptions, delegatesFocus: !0 }, h.formAssociated = !0, v([c({ type: Boolean, reflect: !0 })], h.prototype, "value", 2), v([c({ type: Boolean })], h.prototype, "checked", 1), v([c({ type: Boolean })], h.prototype, "disabled", 2), v([c({ type: Boolean })], h.prototype, "required", 2), v([c({ type: String })], h.prototype, "name", 2), v([c({ type: String })], h.prototype, "id", 2), v([c({ type: String })], h.prototype, "label", 2), v([c({ type: String })], h.prototype, "size", 2), h = v([I("schmancy-checkbox")], h);
+export {
+  h as S
+};
+//# sourceMappingURL=checkbox-zTyMywpJ.js.map