monobill-mintui 0.6.612 → 0.6.613

package/dist/components/choice/browser.js

@@ -0,0 +1,272 @@
+
+const __mintLoadStyle = (key, url) => {
+  if (typeof document === 'undefined') return
+  const href = new URL(url, import.meta.url).href
+  if ([...document.querySelectorAll('link[rel="stylesheet"]')].some(link => link.href === href)) return
+  if (document.querySelector('style[data-mint-ui-style="' + key + '"]') || document.querySelector('link[data-mint-ui-style="' + key + '"]')) return
+  const link = document.createElement('link')
+  link.rel = 'stylesheet'
+  link.href = href
+  link.dataset.mintUiStyle = key
+  document.head.append(link)
+}
+__mintLoadStyle('theme', '../../theme.css')
+__mintLoadStyle('choice', '../../choice.css')
+import { t as e } from "../chunks/register-element-BFYmIynH.js";
+//#region src/components/choice/Choice.js
+var t = class extends HTMLElement {
+	static get observedAttributes() {
+		return [
+			"checked",
+			"disabled",
+			"label",
+			"info",
+			"id",
+			"name",
+			"value",
+			"required"
+		];
+	}
+	constructor() {
+		super(), this._radio = null, this._checked = !1, this._groupMode = !1, this._groupChangeHandler = null, this._groupObserver = null;
+	}
+	connectedCallback() {
+		if (this._activateGroupModeIfNeeded(), this._groupObserver = new MutationObserver(() => this._activateGroupModeIfNeeded()), this._groupObserver.observe(this, {
+			childList: !0,
+			subtree: !0
+		}), this._groupMode) return;
+		let e = this.getAttribute("checked");
+		this._checked = e !== null && e !== "false", this.render();
+	}
+	disconnectedCallback() {
+		this.removeEventListeners(), this._groupChangeHandler &&= (this.removeEventListener("choice-option-change", this._groupChangeHandler), null), this._groupObserver?.disconnect(), this._groupObserver = null;
+	}
+	attributeChangedCallback(e, t, n) {
+		if (this._groupMode) {
+			t !== n && this.renderGroup();
+			return;
+		}
+		e === "checked" && (this._checked = n !== null && n !== "false", this._radio && (this._radio.checked = this._checked)), t !== n && (this.render(), e === "checked" && this._radio && this.updateVisualState());
+	}
+	get checked() {
+		return this._checked;
+	}
+	set checked(e) {
+		e ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this._checked = !!e, this._radio && (this._radio.checked = this._checked), this.updateVisualState();
+	}
+	isDisabled() {
+		return this.hasAttribute("disabled");
+	}
+	getLabel() {
+		return this.getAttribute("label") || "";
+	}
+	getInfo() {
+		return this.getAttribute("info") || "";
+	}
+	getId() {
+		return this.getAttribute("id") || "";
+	}
+	getName() {
+		return this.getAttribute("name") || "";
+	}
+	getValue() {
+		return this._groupMode ? this.querySelector("mint-choice-option input[type=\"radio\"]:checked")?.value || this.getAttribute("value") || "" : this.getAttribute("value") || "";
+	}
+	set value(e) {
+		this.setValue(e);
+	}
+	get value() {
+		return this.getValue();
+	}
+	setValue(e) {
+		if (!this._groupMode) {
+			e ? this.setAttribute("value", e) : this.removeAttribute("value");
+			return;
+		}
+		let t = e == null ? "" : String(e);
+		this.querySelectorAll("mint-choice-option").forEach((e) => {
+			let n = e.getAttribute("value") === t, r = e.querySelector("input[type=\"radio\"]");
+			r && (r.checked = n), e.toggleAttribute("checked", n);
+		}), t ? this.setAttribute("value", t) : this.removeAttribute("value");
+	}
+	renderGroup() {
+		this.classList.add("mint-choice-group"), this.setAttribute("role", "radiogroup");
+		let e = this.getAttribute("label") || "", t = this.querySelector(":scope > .mint-choice-group-label");
+		e && !t && (t = document.createElement("div"), t.className = "mint-choice-group-label", this.insertBefore(t, this.firstChild)), t && (e ? t.textContent = e : t.remove());
+		let n = this.querySelector(":scope > .mint-choice-options");
+		n || (n = document.createElement("div"), n.className = "mint-choice-options", t?.parentElement === this ? this.insertBefore(n, t.nextSibling) : this.insertBefore(n, this.firstChild)), Array.from(this.children).filter((e) => e.tagName === "MINT-CHOICE-OPTION" && e.parentElement !== n).forEach((e) => n.appendChild(e)), this.querySelectorAll("mint-choice-option").forEach((e) => e.render());
+		let r = this.getAttribute("value");
+		r && this.setValue(r);
+	}
+	_activateGroupModeIfNeeded() {
+		this._groupMode || !this.querySelector("mint-choice-option") || (this._groupMode = !0, this.removeEventListeners(), this.querySelector(".mint-choice-wrapper")?.remove(), this.querySelector(".mint-choice-label-container")?.remove(), this._radio = null, this._groupChangeHandler = (e) => {
+			let t = e.target.closest?.("mint-choice-option");
+			if (!t || !this.contains(t)) return;
+			let n = t.getAttribute("value") || "";
+			n ? this.setAttribute("value", n) : this.removeAttribute("value"), this.dispatchEvent(new Event("input", {
+				bubbles: !0,
+				composed: !0
+			})), this.dispatchEvent(new Event("change", {
+				bubbles: !0,
+				composed: !0
+			}));
+		}, this.addEventListener("choice-option-change", this._groupChangeHandler), this.renderGroup());
+	}
+	getChoiceClasses() {
+		return "mint-choice-control";
+	}
+	render() {
+		if (this._groupMode) {
+			this.renderGroup();
+			return;
+		}
+		let e = this.getLabel(), t = this.getInfo(), n = this.isDisabled(), r = this.querySelector(".mint-choice-wrapper");
+		r || (r = document.createElement("div"), r.className = "mint-choice-wrapper", this.insertBefore(r, this.firstChild)), this._radio ? this._radio.parentElement !== r && r.appendChild(this._radio) : (this._radio = document.createElement("input"), this._radio.type = "radio", r.appendChild(this._radio), this.setupEventListeners()), this._radio.className = "mint-input-overlay", this._radio.style.cssText = "position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 10; pointer-events: auto; margin: 0; padding: 0;", this._radio.checked = this._checked, this._radio.disabled = n, this._changeHandler || this.setupEventListeners();
+		let i = this.getId();
+		i ? this._radio.id = i : this._radio.removeAttribute("id");
+		let a = this.getName();
+		a ? this._radio.name = a : this._radio.removeAttribute("name");
+		let o = this.getValue();
+		o ? this._radio.value = o : this._radio.removeAttribute("value"), e ? this._radio.setAttribute("aria-label", e) : this._radio.removeAttribute("aria-label"), r.className = `mint-choice-wrapper ${this.getChoiceClasses()}`, r.style.pointerEvents = "none", this._radio.style.pointerEvents = "auto";
+		let s = r.querySelector(".mint-choice-indicator");
+		s || (s = document.createElement("div"), s.className = "mint-choice-indicator", s.style.transition = "opacity 200ms ease-out, transform 200ms ease-out", s.style.zIndex = "1", r.appendChild(s)), s.style.opacity = this._checked ? "1" : "0", s.style.transform = this._checked ? "scale(1)" : "scale(0.8)", this.updateVisualState();
+		let c = this.querySelector(".mint-choice-label-container");
+		if (e || t) {
+			c || (c = document.createElement("div"), c.className = "mint-choice-label-container", this.appendChild(c));
+			let r = c.querySelector(".mint-choice-label");
+			e ? (r || (r = document.createElement("span"), r.className = "mint-choice-label", c.insertBefore(r, c.firstChild)), r.textContent = e, n ? r.style.opacity = "0.5" : r.style.opacity = "") : r && r.remove();
+			let i = c.querySelector(".mint-choice-info");
+			if (t ? (i || (i = document.createElement("span"), i.className = "mint-choice-info", c.appendChild(i)), i.textContent = t, n ? i.style.opacity = "0.5" : i.style.opacity = "") : i && i.remove(), n) c.style.cursor = "default", c._clickHandler && (c.removeEventListener("click", c._clickHandler), c._clickHandler = null);
+			else {
+				c.style.cursor = "pointer";
+				let e = c._clickHandler;
+				e && c.removeEventListener("click", e), c._clickHandler = (e) => {
+					this._radio && (e.target === this._radio || this._radio.contains(e.target) || e.composedPath().includes(this._radio)) || this.select();
+				}, c.addEventListener("click", c._clickHandler);
+			}
+		} else c && c.remove();
+	}
+	setupEventListeners() {
+		this.removeEventListeners(), this._radio && (this._changeHandler = (e) => {
+			e.stopPropagation();
+			let t = this._checked;
+			if (this._checked = this._radio.checked, this._checked ? this.hasAttribute("checked") || this.setAttribute("checked", "") : this.hasAttribute("checked") && this.removeAttribute("checked"), this.updateVisualState(), this._checked) {
+				let e = this._radio.name;
+				e && document.querySelectorAll(`input[type="radio"][name="${e}"]`).forEach((e) => {
+					if (e !== this._radio) {
+						let t = e.closest("mint-choice");
+						t && t.updateVisualState && (t._checked = e.checked, e.checked ? t.hasAttribute("checked") || t.setAttribute("checked", "") : t.hasAttribute("checked") && t.removeAttribute("checked"), t.updateVisualState());
+					}
+				});
+			}
+			if (t !== this._checked) {
+				let e = new CustomEvent("change", {
+					detail: {
+						checked: this._checked,
+						value: this.getValue()
+					},
+					bubbles: !0,
+					cancelable: !0
+				});
+				this.dispatchEvent(e);
+			}
+		}, this._radio.addEventListener("change", this._changeHandler), this._groupChangeHandler = (e) => {
+			e.target !== this._radio && e.target.type === "radio" && e.target.name === this._radio.name && e.target.checked && setTimeout(() => {
+				this._radio && this._radio.checked !== this._checked && (this._checked = this._radio.checked, this._checked ? this.hasAttribute("checked") || this.setAttribute("checked", "") : this.hasAttribute("checked") && this.removeAttribute("checked"), this.updateVisualState());
+			}, 0);
+		}, document.addEventListener("change", this._groupChangeHandler, !0), this._clickHandler = (e) => {
+			let t = this._radio.name;
+			t && document.querySelectorAll(`input[type="radio"][name="${t}"]`).forEach((e) => {
+				if (e !== this._radio) {
+					let t = e.closest("mint-choice");
+					t && t.updateVisualState && (t._checked = e.checked, e.checked ? t.hasAttribute("checked") || t.setAttribute("checked", "") : t.hasAttribute("checked") && t.removeAttribute("checked"), t.updateVisualState());
+				}
+			}), requestAnimationFrame(() => {
+				this._checked = this._radio.checked, this.updateVisualState();
+			});
+		}, this._radio.addEventListener("click", this._clickHandler), this._mousedownHandler = (e) => {
+			e.stopPropagation();
+			let t = this.querySelector(".mint-choice-wrapper");
+			t && !this.isDisabled() && (t.classList.add("mint-choice-active"), this._checked ? (t.style.backgroundColor = "var(--mint-color-primary)", t.style.boxShadow = "inset 0 2px 4px rgba(0, 0, 0, 0.3)") : (t.style.backgroundColor = "var(--mint-color-surface-hover)", t.style.boxShadow = "inset 0 2px 4px rgba(0, 0, 0, 0.1)"));
+		}, this._mouseupHandler = (e) => {
+			e.stopPropagation();
+			let t = this.querySelector(".mint-choice-wrapper");
+			t && (t.classList.remove("mint-choice-active"), t.style.backgroundColor = "", t.style.boxShadow = "");
+		}, this._mouseleaveHandler = (e) => {
+			let t = this.querySelector(".mint-choice-wrapper");
+			t && (t.classList.remove("mint-choice-active"), t.style.backgroundColor = "", t.style.boxShadow = "");
+		}, this._radio.addEventListener("mousedown", this._mousedownHandler), this._radio.addEventListener("mouseup", this._mouseupHandler), this._radio.addEventListener("mouseleave", this._mouseleaveHandler), this._touchstartHandler = (e) => {
+			e.stopPropagation();
+			let t = this.querySelector(".mint-choice-wrapper");
+			t && !this.isDisabled() && (t.classList.add("mint-choice-active"), this._checked ? (t.style.backgroundColor = "var(--mint-color-primary)", t.style.boxShadow = "inset 0 2px 4px rgba(0, 0, 0, 0.3)") : (t.style.backgroundColor = "var(--mint-color-surface-hover)", t.style.boxShadow = "inset 0 2px 4px rgba(0, 0, 0, 0.1)"));
+		}, this._touchendHandler = (e) => {
+			e.stopPropagation();
+			let t = this.querySelector(".mint-choice-wrapper");
+			t && (t.classList.remove("mint-choice-active"), t.style.backgroundColor = "", t.style.boxShadow = "");
+		}, this._radio.addEventListener("touchstart", this._touchstartHandler), this._radio.addEventListener("touchend", this._touchendHandler));
+	}
+	removeEventListeners() {
+		this._radio && (this._changeHandler &&= (this._radio.removeEventListener("change", this._changeHandler), null), this._groupChangeHandler &&= (document.removeEventListener("change", this._groupChangeHandler), null), this._clickHandler &&= (this._radio.removeEventListener("click", this._clickHandler), null), this._mousedownHandler &&= (this._radio.removeEventListener("mousedown", this._mousedownHandler), null), this._mouseupHandler &&= (this._radio.removeEventListener("mouseup", this._mouseupHandler), null), this._mouseleaveHandler &&= (this._radio.removeEventListener("mouseleave", this._mouseleaveHandler), null), this._touchstartHandler &&= (this._radio.removeEventListener("touchstart", this._touchstartHandler), null), this._touchendHandler &&= (this._radio.removeEventListener("touchend", this._touchendHandler), null));
+	}
+	updateVisualState() {
+		let e = this.querySelector(".mint-choice-wrapper"), t = e?.querySelector(".mint-choice-indicator");
+		t && (t.style.opacity = this._checked ? "1" : "0", t.style.transform = this._checked ? "scale(1)" : "scale(0.8)"), e && (e.className = `mint-choice-wrapper ${this.getChoiceClasses()}`, e.classList.contains("mint-choice-active") || (e.style.backgroundColor = "", e.style.boxShadow = ""));
+	}
+	select() {
+		if (this._radio && !this.isDisabled()) {
+			this._radio.checked = !0, this._radio.dispatchEvent(new Event("change", { bubbles: !0 })), this._checked = !0, this.hasAttribute("checked") || this.setAttribute("checked", "");
+			let e = this._radio.name;
+			e && document.querySelectorAll(`input[type="radio"][name="${e}"]`).forEach((e) => {
+				if (e !== this._radio) {
+					let t = e.closest("mint-choice");
+					t && t.updateVisualState && (t._checked = e.checked, e.checked ? t.hasAttribute("checked") || t.setAttribute("checked", "") : t.hasAttribute("checked") && t.removeAttribute("checked"), t.updateVisualState());
+				}
+			}), this.updateVisualState();
+			let t = new CustomEvent("change", {
+				detail: {
+					checked: this._checked,
+					value: this.getValue()
+				},
+				bubbles: !0,
+				cancelable: !0
+			});
+			this.dispatchEvent(t);
+		}
+	}
+}, n = class extends HTMLElement {
+	static get observedAttributes() {
+		return [
+			"value",
+			"checked",
+			"disabled"
+		];
+	}
+	constructor() {
+		super(), this._labelText = "", this._radio = null, this._changeHandler = null;
+	}
+	connectedCallback() {
+		this.render();
+	}
+	attributeChangedCallback(e, t, n) {
+		t !== n && this.isConnected && this.render();
+	}
+	render() {
+		let e = this.closest("mint-choice"), t = this.querySelector(".mint-choice-option-label");
+		this._labelText ||= t?.textContent?.trim() || this.textContent.trim();
+		let n = this.querySelector(":scope > .mint-choice-option-control");
+		n || (n = document.createElement("label"), n.className = "mint-choice-option-control", this.replaceChildren(n)), this._radio || (this._radio = document.createElement("input"), this._radio.type = "radio", this._radio.className = "mint-choice-option-input", n.appendChild(this._radio), this._changeHandler = () => {
+			this._radio?.checked && e && (e.setValue(this.getAttribute("value") || ""), e.dispatchEvent(new CustomEvent("choice-option-change", {
+				detail: {
+					value: this.getAttribute("value") || "",
+					option: this
+				},
+				bubbles: !1
+			})));
+		}, this._radio.addEventListener("change", this._changeHandler)), this._radio.name = e?.getAttribute("name") || "", this._radio.value = this.getAttribute("value") || "", this._radio.disabled = this.hasAttribute("disabled") || e?.hasAttribute("disabled") || !1, this._radio.required = e?.hasAttribute("required") || !1, this._radio.checked = this.hasAttribute("checked") || e?.getAttribute("value") === this._radio.value;
+		let r = n.querySelector(".mint-choice-option-label");
+		r || (r = document.createElement("span"), r.className = "mint-choice-option-label", n.appendChild(r)), r.textContent = this._labelText;
+	}
+};
+typeof customElements < "u" && !customElements.get("mint-choice") && e("mint-choice", t), typeof customElements < "u" && !customElements.get("mint-choice-option") && e("mint-choice-option", n);
+//#endregion
+export { t as default };

package/dist/components/choice/index.cjs

@@ -0,0 +1 @@
+const e=require(`../chunks/register-element-tCL_F1YI.js`);var t=class extends HTMLElement{static get observedAttributes(){return[`checked`,`disabled`,`label`,`info`,`id`,`name`,`value`,`required`]}constructor(){super(),this._radio=null,this._checked=!1,this._groupMode=!1,this._groupChangeHandler=null,this._groupObserver=null}connectedCallback(){if(this._activateGroupModeIfNeeded(),this._groupObserver=new MutationObserver(()=>this._activateGroupModeIfNeeded()),this._groupObserver.observe(this,{childList:!0,subtree:!0}),this._groupMode)return;let e=this.getAttribute(`checked`);this._checked=e!==null&&e!==`false`,this.render()}disconnectedCallback(){this.removeEventListeners(),this._groupChangeHandler&&=(this.removeEventListener(`choice-option-change`,this._groupChangeHandler),null),this._groupObserver?.disconnect(),this._groupObserver=null}attributeChangedCallback(e,t,n){if(this._groupMode){t!==n&&this.renderGroup();return}e===`checked`&&(this._checked=n!==null&&n!==`false`,this._radio&&(this._radio.checked=this._checked)),t!==n&&(this.render(),e===`checked`&&this._radio&&this.updateVisualState())}get checked(){return this._checked}set checked(e){e?this.setAttribute(`checked`,``):this.removeAttribute(`checked`),this._checked=!!e,this._radio&&(this._radio.checked=this._checked),this.updateVisualState()}isDisabled(){return this.hasAttribute(`disabled`)}getLabel(){return this.getAttribute(`label`)||``}getInfo(){return this.getAttribute(`info`)||``}getId(){return this.getAttribute(`id`)||``}getName(){return this.getAttribute(`name`)||``}getValue(){return this._groupMode?this.querySelector(`mint-choice-option input[type="radio"]:checked`)?.value||this.getAttribute(`value`)||``:this.getAttribute(`value`)||``}set value(e){this.setValue(e)}get value(){return this.getValue()}setValue(e){if(!this._groupMode){e?this.setAttribute(`value`,e):this.removeAttribute(`value`);return}let t=e==null?``:String(e);this.querySelectorAll(`mint-choice-option`).forEach(e=>{let n=e.getAttribute(`value`)===t,r=e.querySelector(`input[type="radio"]`);r&&(r.checked=n),e.toggleAttribute(`checked`,n)}),t?this.setAttribute(`value`,t):this.removeAttribute(`value`)}renderGroup(){this.classList.add(`mint-choice-group`),this.setAttribute(`role`,`radiogroup`);let e=this.getAttribute(`label`)||``,t=this.querySelector(`:scope > .mint-choice-group-label`);e&&!t&&(t=document.createElement(`div`),t.className=`mint-choice-group-label`,this.insertBefore(t,this.firstChild)),t&&(e?t.textContent=e:t.remove());let n=this.querySelector(`:scope > .mint-choice-options`);n||(n=document.createElement(`div`),n.className=`mint-choice-options`,t?.parentElement===this?this.insertBefore(n,t.nextSibling):this.insertBefore(n,this.firstChild)),Array.from(this.children).filter(e=>e.tagName===`MINT-CHOICE-OPTION`&&e.parentElement!==n).forEach(e=>n.appendChild(e)),this.querySelectorAll(`mint-choice-option`).forEach(e=>e.render());let r=this.getAttribute(`value`);r&&this.setValue(r)}_activateGroupModeIfNeeded(){this._groupMode||!this.querySelector(`mint-choice-option`)||(this._groupMode=!0,this.removeEventListeners(),this.querySelector(`.mint-choice-wrapper`)?.remove(),this.querySelector(`.mint-choice-label-container`)?.remove(),this._radio=null,this._groupChangeHandler=e=>{let t=e.target.closest?.(`mint-choice-option`);if(!t||!this.contains(t))return;let n=t.getAttribute(`value`)||``;n?this.setAttribute(`value`,n):this.removeAttribute(`value`),this.dispatchEvent(new Event(`input`,{bubbles:!0,composed:!0})),this.dispatchEvent(new Event(`change`,{bubbles:!0,composed:!0}))},this.addEventListener(`choice-option-change`,this._groupChangeHandler),this.renderGroup())}getChoiceClasses(){return`mint-choice-control`}render(){if(this._groupMode){this.renderGroup();return}let e=this.getLabel(),t=this.getInfo(),n=this.isDisabled(),r=this.querySelector(`.mint-choice-wrapper`);r||(r=document.createElement(`div`),r.className=`mint-choice-wrapper`,this.insertBefore(r,this.firstChild)),this._radio?this._radio.parentElement!==r&&r.appendChild(this._radio):(this._radio=document.createElement(`input`),this._radio.type=`radio`,r.appendChild(this._radio),this.setupEventListeners()),this._radio.className=`mint-input-overlay`,this._radio.style.cssText=`position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 10; pointer-events: auto; margin: 0; padding: 0;`,this._radio.checked=this._checked,this._radio.disabled=n,this._changeHandler||this.setupEventListeners();let i=this.getId();i?this._radio.id=i:this._radio.removeAttribute(`id`);let a=this.getName();a?this._radio.name=a:this._radio.removeAttribute(`name`);let o=this.getValue();o?this._radio.value=o:this._radio.removeAttribute(`value`),e?this._radio.setAttribute(`aria-label`,e):this._radio.removeAttribute(`aria-label`),r.className=`mint-choice-wrapper ${this.getChoiceClasses()}`,r.style.pointerEvents=`none`,this._radio.style.pointerEvents=`auto`;let s=r.querySelector(`.mint-choice-indicator`);s||(s=document.createElement(`div`),s.className=`mint-choice-indicator`,s.style.transition=`opacity 200ms ease-out, transform 200ms ease-out`,s.style.zIndex=`1`,r.appendChild(s)),s.style.opacity=this._checked?`1`:`0`,s.style.transform=this._checked?`scale(1)`:`scale(0.8)`,this.updateVisualState();let c=this.querySelector(`.mint-choice-label-container`);if(e||t){c||(c=document.createElement(`div`),c.className=`mint-choice-label-container`,this.appendChild(c));let r=c.querySelector(`.mint-choice-label`);e?(r||(r=document.createElement(`span`),r.className=`mint-choice-label`,c.insertBefore(r,c.firstChild)),r.textContent=e,n?r.style.opacity=`0.5`:r.style.opacity=``):r&&r.remove();let i=c.querySelector(`.mint-choice-info`);if(t?(i||(i=document.createElement(`span`),i.className=`mint-choice-info`,c.appendChild(i)),i.textContent=t,n?i.style.opacity=`0.5`:i.style.opacity=``):i&&i.remove(),n)c.style.cursor=`default`,c._clickHandler&&(c.removeEventListener(`click`,c._clickHandler),c._clickHandler=null);else{c.style.cursor=`pointer`;let e=c._clickHandler;e&&c.removeEventListener(`click`,e),c._clickHandler=e=>{this._radio&&(e.target===this._radio||this._radio.contains(e.target)||e.composedPath().includes(this._radio))||this.select()},c.addEventListener(`click`,c._clickHandler)}}else c&&c.remove()}setupEventListeners(){this.removeEventListeners(),this._radio&&(this._changeHandler=e=>{e.stopPropagation();let t=this._checked;if(this._checked=this._radio.checked,this._checked?this.hasAttribute(`checked`)||this.setAttribute(`checked`,``):this.hasAttribute(`checked`)&&this.removeAttribute(`checked`),this.updateVisualState(),this._checked){let e=this._radio.name;e&&document.querySelectorAll(`input[type="radio"][name="${e}"]`).forEach(e=>{if(e!==this._radio){let t=e.closest(`mint-choice`);t&&t.updateVisualState&&(t._checked=e.checked,e.checked?t.hasAttribute(`checked`)||t.setAttribute(`checked`,``):t.hasAttribute(`checked`)&&t.removeAttribute(`checked`),t.updateVisualState())}})}if(t!==this._checked){let e=new CustomEvent(`change`,{detail:{checked:this._checked,value:this.getValue()},bubbles:!0,cancelable:!0});this.dispatchEvent(e)}},this._radio.addEventListener(`change`,this._changeHandler),this._groupChangeHandler=e=>{e.target!==this._radio&&e.target.type===`radio`&&e.target.name===this._radio.name&&e.target.checked&&setTimeout(()=>{this._radio&&this._radio.checked!==this._checked&&(this._checked=this._radio.checked,this._checked?this.hasAttribute(`checked`)||this.setAttribute(`checked`,``):this.hasAttribute(`checked`)&&this.removeAttribute(`checked`),this.updateVisualState())},0)},document.addEventListener(`change`,this._groupChangeHandler,!0),this._clickHandler=e=>{let t=this._radio.name;t&&document.querySelectorAll(`input[type="radio"][name="${t}"]`).forEach(e=>{if(e!==this._radio){let t=e.closest(`mint-choice`);t&&t.updateVisualState&&(t._checked=e.checked,e.checked?t.hasAttribute(`checked`)||t.setAttribute(`checked`,``):t.hasAttribute(`checked`)&&t.removeAttribute(`checked`),t.updateVisualState())}}),requestAnimationFrame(()=>{this._checked=this._radio.checked,this.updateVisualState()})},this._radio.addEventListener(`click`,this._clickHandler),this._mousedownHandler=e=>{e.stopPropagation();let t=this.querySelector(`.mint-choice-wrapper`);t&&!this.isDisabled()&&(t.classList.add(`mint-choice-active`),this._checked?(t.style.backgroundColor=`var(--mint-color-primary)`,t.style.boxShadow=`inset 0 2px 4px rgba(0, 0, 0, 0.3)`):(t.style.backgroundColor=`var(--mint-color-surface-hover)`,t.style.boxShadow=`inset 0 2px 4px rgba(0, 0, 0, 0.1)`))},this._mouseupHandler=e=>{e.stopPropagation();let t=this.querySelector(`.mint-choice-wrapper`);t&&(t.classList.remove(`mint-choice-active`),t.style.backgroundColor=``,t.style.boxShadow=``)},this._mouseleaveHandler=e=>{let t=this.querySelector(`.mint-choice-wrapper`);t&&(t.classList.remove(`mint-choice-active`),t.style.backgroundColor=``,t.style.boxShadow=``)},this._radio.addEventListener(`mousedown`,this._mousedownHandler),this._radio.addEventListener(`mouseup`,this._mouseupHandler),this._radio.addEventListener(`mouseleave`,this._mouseleaveHandler),this._touchstartHandler=e=>{e.stopPropagation();let t=this.querySelector(`.mint-choice-wrapper`);t&&!this.isDisabled()&&(t.classList.add(`mint-choice-active`),this._checked?(t.style.backgroundColor=`var(--mint-color-primary)`,t.style.boxShadow=`inset 0 2px 4px rgba(0, 0, 0, 0.3)`):(t.style.backgroundColor=`var(--mint-color-surface-hover)`,t.style.boxShadow=`inset 0 2px 4px rgba(0, 0, 0, 0.1)`))},this._touchendHandler=e=>{e.stopPropagation();let t=this.querySelector(`.mint-choice-wrapper`);t&&(t.classList.remove(`mint-choice-active`),t.style.backgroundColor=``,t.style.boxShadow=``)},this._radio.addEventListener(`touchstart`,this._touchstartHandler),this._radio.addEventListener(`touchend`,this._touchendHandler))}removeEventListeners(){this._radio&&(this._changeHandler&&=(this._radio.removeEventListener(`change`,this._changeHandler),null),this._groupChangeHandler&&=(document.removeEventListener(`change`,this._groupChangeHandler),null),this._clickHandler&&=(this._radio.removeEventListener(`click`,this._clickHandler),null),this._mousedownHandler&&=(this._radio.removeEventListener(`mousedown`,this._mousedownHandler),null),this._mouseupHandler&&=(this._radio.removeEventListener(`mouseup`,this._mouseupHandler),null),this._mouseleaveHandler&&=(this._radio.removeEventListener(`mouseleave`,this._mouseleaveHandler),null),this._touchstartHandler&&=(this._radio.removeEventListener(`touchstart`,this._touchstartHandler),null),this._touchendHandler&&=(this._radio.removeEventListener(`touchend`,this._touchendHandler),null))}updateVisualState(){let e=this.querySelector(`.mint-choice-wrapper`),t=e?.querySelector(`.mint-choice-indicator`);t&&(t.style.opacity=this._checked?`1`:`0`,t.style.transform=this._checked?`scale(1)`:`scale(0.8)`),e&&(e.className=`mint-choice-wrapper ${this.getChoiceClasses()}`,e.classList.contains(`mint-choice-active`)||(e.style.backgroundColor=``,e.style.boxShadow=``))}select(){if(this._radio&&!this.isDisabled()){this._radio.checked=!0,this._radio.dispatchEvent(new Event(`change`,{bubbles:!0})),this._checked=!0,this.hasAttribute(`checked`)||this.setAttribute(`checked`,``);let e=this._radio.name;e&&document.querySelectorAll(`input[type="radio"][name="${e}"]`).forEach(e=>{if(e!==this._radio){let t=e.closest(`mint-choice`);t&&t.updateVisualState&&(t._checked=e.checked,e.checked?t.hasAttribute(`checked`)||t.setAttribute(`checked`,``):t.hasAttribute(`checked`)&&t.removeAttribute(`checked`),t.updateVisualState())}}),this.updateVisualState();let t=new CustomEvent(`change`,{detail:{checked:this._checked,value:this.getValue()},bubbles:!0,cancelable:!0});this.dispatchEvent(t)}}},n=class extends HTMLElement{static get observedAttributes(){return[`value`,`checked`,`disabled`]}constructor(){super(),this._labelText=``,this._radio=null,this._changeHandler=null}connectedCallback(){this.render()}attributeChangedCallback(e,t,n){t!==n&&this.isConnected&&this.render()}render(){let e=this.closest(`mint-choice`),t=this.querySelector(`.mint-choice-option-label`);this._labelText||=t?.textContent?.trim()||this.textContent.trim();let n=this.querySelector(`:scope > .mint-choice-option-control`);n||(n=document.createElement(`label`),n.className=`mint-choice-option-control`,this.replaceChildren(n)),this._radio||(this._radio=document.createElement(`input`),this._radio.type=`radio`,this._radio.className=`mint-choice-option-input`,n.appendChild(this._radio),this._changeHandler=()=>{this._radio?.checked&&e&&(e.setValue(this.getAttribute(`value`)||``),e.dispatchEvent(new CustomEvent(`choice-option-change`,{detail:{value:this.getAttribute(`value`)||``,option:this},bubbles:!1})))},this._radio.addEventListener(`change`,this._changeHandler)),this._radio.name=e?.getAttribute(`name`)||``,this._radio.value=this.getAttribute(`value`)||``,this._radio.disabled=this.hasAttribute(`disabled`)||e?.hasAttribute(`disabled`)||!1,this._radio.required=e?.hasAttribute(`required`)||!1,this._radio.checked=this.hasAttribute(`checked`)||e?.getAttribute(`value`)===this._radio.value;let r=n.querySelector(`.mint-choice-option-label`);r||(r=document.createElement(`span`),r.className=`mint-choice-option-label`,n.appendChild(r)),r.textContent=this._labelText}};typeof customElements<`u`&&!customElements.get(`mint-choice`)&&e.t(`mint-choice`,t),typeof customElements<`u`&&!customElements.get(`mint-choice-option`)&&e.t(`mint-choice-option`,n),module.exports=t;

package/dist/components/choice/index.d.ts

@@ -1,5 +1 @@
-import './Choice';
-import './ChoiceOption';
-export { default as Choice } from './Choice';
-export { default as ChoiceOption } from './ChoiceOption';
-//# sourceMappingURL=index.d.ts.map
+export { default, MintChoice } from './Choice'

package/dist/components/choice/index.d.ts.map

@@ -1 +1,10 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/choice/index.ts"],"names":[],"mappings":"AAEA,OAAO,UAAU,CAAA;AACjB,OAAO,gBAAgB,CAAA;AAGvB,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAA"}
+{
+  "version": 3,
+  "file": "index.d.ts",
+  "sourceRoot": "",
+  "sources": [
+    "index.d.ts"
+  ],
+  "names": [],
+  "mappings": "AAAA"
+}

package/dist/components/choice/index.js

@@ -0,0 +1,260 @@
+import '../../theme.css'
+import '../../choice.css'
+import { t as e } from "../chunks/register-element-BFYmIynH.js";
+//#region src/components/choice/Choice.js
+var t = class extends HTMLElement {
+	static get observedAttributes() {
+		return [
+			"checked",
+			"disabled",
+			"label",
+			"info",
+			"id",
+			"name",
+			"value",
+			"required"
+		];
+	}
+	constructor() {
+		super(), this._radio = null, this._checked = !1, this._groupMode = !1, this._groupChangeHandler = null, this._groupObserver = null;
+	}
+	connectedCallback() {
+		if (this._activateGroupModeIfNeeded(), this._groupObserver = new MutationObserver(() => this._activateGroupModeIfNeeded()), this._groupObserver.observe(this, {
+			childList: !0,
+			subtree: !0
+		}), this._groupMode) return;
+		let e = this.getAttribute("checked");
+		this._checked = e !== null && e !== "false", this.render();
+	}
+	disconnectedCallback() {
+		this.removeEventListeners(), this._groupChangeHandler &&= (this.removeEventListener("choice-option-change", this._groupChangeHandler), null), this._groupObserver?.disconnect(), this._groupObserver = null;
+	}
+	attributeChangedCallback(e, t, n) {
+		if (this._groupMode) {
+			t !== n && this.renderGroup();
+			return;
+		}
+		e === "checked" && (this._checked = n !== null && n !== "false", this._radio && (this._radio.checked = this._checked)), t !== n && (this.render(), e === "checked" && this._radio && this.updateVisualState());
+	}
+	get checked() {
+		return this._checked;
+	}
+	set checked(e) {
+		e ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this._checked = !!e, this._radio && (this._radio.checked = this._checked), this.updateVisualState();
+	}
+	isDisabled() {
+		return this.hasAttribute("disabled");
+	}
+	getLabel() {
+		return this.getAttribute("label") || "";
+	}
+	getInfo() {
+		return this.getAttribute("info") || "";
+	}
+	getId() {
+		return this.getAttribute("id") || "";
+	}
+	getName() {
+		return this.getAttribute("name") || "";
+	}
+	getValue() {
+		return this._groupMode ? this.querySelector("mint-choice-option input[type=\"radio\"]:checked")?.value || this.getAttribute("value") || "" : this.getAttribute("value") || "";
+	}
+	set value(e) {
+		this.setValue(e);
+	}
+	get value() {
+		return this.getValue();
+	}
+	setValue(e) {
+		if (!this._groupMode) {
+			e ? this.setAttribute("value", e) : this.removeAttribute("value");
+			return;
+		}
+		let t = e == null ? "" : String(e);
+		this.querySelectorAll("mint-choice-option").forEach((e) => {
+			let n = e.getAttribute("value") === t, r = e.querySelector("input[type=\"radio\"]");
+			r && (r.checked = n), e.toggleAttribute("checked", n);
+		}), t ? this.setAttribute("value", t) : this.removeAttribute("value");
+	}
+	renderGroup() {
+		this.classList.add("mint-choice-group"), this.setAttribute("role", "radiogroup");
+		let e = this.getAttribute("label") || "", t = this.querySelector(":scope > .mint-choice-group-label");
+		e && !t && (t = document.createElement("div"), t.className = "mint-choice-group-label", this.insertBefore(t, this.firstChild)), t && (e ? t.textContent = e : t.remove());
+		let n = this.querySelector(":scope > .mint-choice-options");
+		n || (n = document.createElement("div"), n.className = "mint-choice-options", t?.parentElement === this ? this.insertBefore(n, t.nextSibling) : this.insertBefore(n, this.firstChild)), Array.from(this.children).filter((e) => e.tagName === "MINT-CHOICE-OPTION" && e.parentElement !== n).forEach((e) => n.appendChild(e)), this.querySelectorAll("mint-choice-option").forEach((e) => e.render());
+		let r = this.getAttribute("value");
+		r && this.setValue(r);
+	}
+	_activateGroupModeIfNeeded() {
+		this._groupMode || !this.querySelector("mint-choice-option") || (this._groupMode = !0, this.removeEventListeners(), this.querySelector(".mint-choice-wrapper")?.remove(), this.querySelector(".mint-choice-label-container")?.remove(), this._radio = null, this._groupChangeHandler = (e) => {
+			let t = e.target.closest?.("mint-choice-option");
+			if (!t || !this.contains(t)) return;
+			let n = t.getAttribute("value") || "";
+			n ? this.setAttribute("value", n) : this.removeAttribute("value"), this.dispatchEvent(new Event("input", {
+				bubbles: !0,
+				composed: !0
+			})), this.dispatchEvent(new Event("change", {
+				bubbles: !0,
+				composed: !0
+			}));
+		}, this.addEventListener("choice-option-change", this._groupChangeHandler), this.renderGroup());
+	}
+	getChoiceClasses() {
+		return "mint-choice-control";
+	}
+	render() {
+		if (this._groupMode) {
+			this.renderGroup();
+			return;
+		}
+		let e = this.getLabel(), t = this.getInfo(), n = this.isDisabled(), r = this.querySelector(".mint-choice-wrapper");
+		r || (r = document.createElement("div"), r.className = "mint-choice-wrapper", this.insertBefore(r, this.firstChild)), this._radio ? this._radio.parentElement !== r && r.appendChild(this._radio) : (this._radio = document.createElement("input"), this._radio.type = "radio", r.appendChild(this._radio), this.setupEventListeners()), this._radio.className = "mint-input-overlay", this._radio.style.cssText = "position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 10; pointer-events: auto; margin: 0; padding: 0;", this._radio.checked = this._checked, this._radio.disabled = n, this._changeHandler || this.setupEventListeners();
+		let i = this.getId();
+		i ? this._radio.id = i : this._radio.removeAttribute("id");
+		let a = this.getName();
+		a ? this._radio.name = a : this._radio.removeAttribute("name");
+		let o = this.getValue();
+		o ? this._radio.value = o : this._radio.removeAttribute("value"), e ? this._radio.setAttribute("aria-label", e) : this._radio.removeAttribute("aria-label"), r.className = `mint-choice-wrapper ${this.getChoiceClasses()}`, r.style.pointerEvents = "none", this._radio.style.pointerEvents = "auto";
+		let s = r.querySelector(".mint-choice-indicator");
+		s || (s = document.createElement("div"), s.className = "mint-choice-indicator", s.style.transition = "opacity 200ms ease-out, transform 200ms ease-out", s.style.zIndex = "1", r.appendChild(s)), s.style.opacity = this._checked ? "1" : "0", s.style.transform = this._checked ? "scale(1)" : "scale(0.8)", this.updateVisualState();
+		let c = this.querySelector(".mint-choice-label-container");
+		if (e || t) {
+			c || (c = document.createElement("div"), c.className = "mint-choice-label-container", this.appendChild(c));
+			let r = c.querySelector(".mint-choice-label");
+			e ? (r || (r = document.createElement("span"), r.className = "mint-choice-label", c.insertBefore(r, c.firstChild)), r.textContent = e, n ? r.style.opacity = "0.5" : r.style.opacity = "") : r && r.remove();
+			let i = c.querySelector(".mint-choice-info");
+			if (t ? (i || (i = document.createElement("span"), i.className = "mint-choice-info", c.appendChild(i)), i.textContent = t, n ? i.style.opacity = "0.5" : i.style.opacity = "") : i && i.remove(), n) c.style.cursor = "default", c._clickHandler && (c.removeEventListener("click", c._clickHandler), c._clickHandler = null);
+			else {
+				c.style.cursor = "pointer";
+				let e = c._clickHandler;
+				e && c.removeEventListener("click", e), c._clickHandler = (e) => {
+					this._radio && (e.target === this._radio || this._radio.contains(e.target) || e.composedPath().includes(this._radio)) || this.select();
+				}, c.addEventListener("click", c._clickHandler);
+			}
+		} else c && c.remove();
+	}
+	setupEventListeners() {
+		this.removeEventListeners(), this._radio && (this._changeHandler = (e) => {
+			e.stopPropagation();
+			let t = this._checked;
+			if (this._checked = this._radio.checked, this._checked ? this.hasAttribute("checked") || this.setAttribute("checked", "") : this.hasAttribute("checked") && this.removeAttribute("checked"), this.updateVisualState(), this._checked) {
+				let e = this._radio.name;
+				e && document.querySelectorAll(`input[type="radio"][name="${e}"]`).forEach((e) => {
+					if (e !== this._radio) {
+						let t = e.closest("mint-choice");
+						t && t.updateVisualState && (t._checked = e.checked, e.checked ? t.hasAttribute("checked") || t.setAttribute("checked", "") : t.hasAttribute("checked") && t.removeAttribute("checked"), t.updateVisualState());
+					}
+				});
+			}
+			if (t !== this._checked) {
+				let e = new CustomEvent("change", {
+					detail: {
+						checked: this._checked,
+						value: this.getValue()
+					},
+					bubbles: !0,
+					cancelable: !0
+				});
+				this.dispatchEvent(e);
+			}
+		}, this._radio.addEventListener("change", this._changeHandler), this._groupChangeHandler = (e) => {
+			e.target !== this._radio && e.target.type === "radio" && e.target.name === this._radio.name && e.target.checked && setTimeout(() => {
+				this._radio && this._radio.checked !== this._checked && (this._checked = this._radio.checked, this._checked ? this.hasAttribute("checked") || this.setAttribute("checked", "") : this.hasAttribute("checked") && this.removeAttribute("checked"), this.updateVisualState());
+			}, 0);
+		}, document.addEventListener("change", this._groupChangeHandler, !0), this._clickHandler = (e) => {
+			let t = this._radio.name;
+			t && document.querySelectorAll(`input[type="radio"][name="${t}"]`).forEach((e) => {
+				if (e !== this._radio) {
+					let t = e.closest("mint-choice");
+					t && t.updateVisualState && (t._checked = e.checked, e.checked ? t.hasAttribute("checked") || t.setAttribute("checked", "") : t.hasAttribute("checked") && t.removeAttribute("checked"), t.updateVisualState());
+				}
+			}), requestAnimationFrame(() => {
+				this._checked = this._radio.checked, this.updateVisualState();
+			});
+		}, this._radio.addEventListener("click", this._clickHandler), this._mousedownHandler = (e) => {
+			e.stopPropagation();
+			let t = this.querySelector(".mint-choice-wrapper");
+			t && !this.isDisabled() && (t.classList.add("mint-choice-active"), this._checked ? (t.style.backgroundColor = "var(--mint-color-primary)", t.style.boxShadow = "inset 0 2px 4px rgba(0, 0, 0, 0.3)") : (t.style.backgroundColor = "var(--mint-color-surface-hover)", t.style.boxShadow = "inset 0 2px 4px rgba(0, 0, 0, 0.1)"));
+		}, this._mouseupHandler = (e) => {
+			e.stopPropagation();
+			let t = this.querySelector(".mint-choice-wrapper");
+			t && (t.classList.remove("mint-choice-active"), t.style.backgroundColor = "", t.style.boxShadow = "");
+		}, this._mouseleaveHandler = (e) => {
+			let t = this.querySelector(".mint-choice-wrapper");
+			t && (t.classList.remove("mint-choice-active"), t.style.backgroundColor = "", t.style.boxShadow = "");
+		}, this._radio.addEventListener("mousedown", this._mousedownHandler), this._radio.addEventListener("mouseup", this._mouseupHandler), this._radio.addEventListener("mouseleave", this._mouseleaveHandler), this._touchstartHandler = (e) => {
+			e.stopPropagation();
+			let t = this.querySelector(".mint-choice-wrapper");
+			t && !this.isDisabled() && (t.classList.add("mint-choice-active"), this._checked ? (t.style.backgroundColor = "var(--mint-color-primary)", t.style.boxShadow = "inset 0 2px 4px rgba(0, 0, 0, 0.3)") : (t.style.backgroundColor = "var(--mint-color-surface-hover)", t.style.boxShadow = "inset 0 2px 4px rgba(0, 0, 0, 0.1)"));
+		}, this._touchendHandler = (e) => {
+			e.stopPropagation();
+			let t = this.querySelector(".mint-choice-wrapper");
+			t && (t.classList.remove("mint-choice-active"), t.style.backgroundColor = "", t.style.boxShadow = "");
+		}, this._radio.addEventListener("touchstart", this._touchstartHandler), this._radio.addEventListener("touchend", this._touchendHandler));
+	}
+	removeEventListeners() {
+		this._radio && (this._changeHandler &&= (this._radio.removeEventListener("change", this._changeHandler), null), this._groupChangeHandler &&= (document.removeEventListener("change", this._groupChangeHandler), null), this._clickHandler &&= (this._radio.removeEventListener("click", this._clickHandler), null), this._mousedownHandler &&= (this._radio.removeEventListener("mousedown", this._mousedownHandler), null), this._mouseupHandler &&= (this._radio.removeEventListener("mouseup", this._mouseupHandler), null), this._mouseleaveHandler &&= (this._radio.removeEventListener("mouseleave", this._mouseleaveHandler), null), this._touchstartHandler &&= (this._radio.removeEventListener("touchstart", this._touchstartHandler), null), this._touchendHandler &&= (this._radio.removeEventListener("touchend", this._touchendHandler), null));
+	}
+	updateVisualState() {
+		let e = this.querySelector(".mint-choice-wrapper"), t = e?.querySelector(".mint-choice-indicator");
+		t && (t.style.opacity = this._checked ? "1" : "0", t.style.transform = this._checked ? "scale(1)" : "scale(0.8)"), e && (e.className = `mint-choice-wrapper ${this.getChoiceClasses()}`, e.classList.contains("mint-choice-active") || (e.style.backgroundColor = "", e.style.boxShadow = ""));
+	}
+	select() {
+		if (this._radio && !this.isDisabled()) {
+			this._radio.checked = !0, this._radio.dispatchEvent(new Event("change", { bubbles: !0 })), this._checked = !0, this.hasAttribute("checked") || this.setAttribute("checked", "");
+			let e = this._radio.name;
+			e && document.querySelectorAll(`input[type="radio"][name="${e}"]`).forEach((e) => {
+				if (e !== this._radio) {
+					let t = e.closest("mint-choice");
+					t && t.updateVisualState && (t._checked = e.checked, e.checked ? t.hasAttribute("checked") || t.setAttribute("checked", "") : t.hasAttribute("checked") && t.removeAttribute("checked"), t.updateVisualState());
+				}
+			}), this.updateVisualState();
+			let t = new CustomEvent("change", {
+				detail: {
+					checked: this._checked,
+					value: this.getValue()
+				},
+				bubbles: !0,
+				cancelable: !0
+			});
+			this.dispatchEvent(t);
+		}
+	}
+}, n = class extends HTMLElement {
+	static get observedAttributes() {
+		return [
+			"value",
+			"checked",
+			"disabled"
+		];
+	}
+	constructor() {
+		super(), this._labelText = "", this._radio = null, this._changeHandler = null;
+	}
+	connectedCallback() {
+		this.render();
+	}
+	attributeChangedCallback(e, t, n) {
+		t !== n && this.isConnected && this.render();
+	}
+	render() {
+		let e = this.closest("mint-choice"), t = this.querySelector(".mint-choice-option-label");
+		this._labelText ||= t?.textContent?.trim() || this.textContent.trim();
+		let n = this.querySelector(":scope > .mint-choice-option-control");
+		n || (n = document.createElement("label"), n.className = "mint-choice-option-control", this.replaceChildren(n)), this._radio || (this._radio = document.createElement("input"), this._radio.type = "radio", this._radio.className = "mint-choice-option-input", n.appendChild(this._radio), this._changeHandler = () => {
+			this._radio?.checked && e && (e.setValue(this.getAttribute("value") || ""), e.dispatchEvent(new CustomEvent("choice-option-change", {
+				detail: {
+					value: this.getAttribute("value") || "",
+					option: this
+				},
+				bubbles: !1
+			})));
+		}, this._radio.addEventListener("change", this._changeHandler)), this._radio.name = e?.getAttribute("name") || "", this._radio.value = this.getAttribute("value") || "", this._radio.disabled = this.hasAttribute("disabled") || e?.hasAttribute("disabled") || !1, this._radio.required = e?.hasAttribute("required") || !1, this._radio.checked = this.hasAttribute("checked") || e?.getAttribute("value") === this._radio.value;
+		let r = n.querySelector(".mint-choice-option-label");
+		r || (r = document.createElement("span"), r.className = "mint-choice-option-label", n.appendChild(r)), r.textContent = this._labelText;
+	}
+};
+typeof customElements < "u" && !customElements.get("mint-choice") && e("mint-choice", t), typeof customElements < "u" && !customElements.get("mint-choice-option") && e("mint-choice-option", n);
+//#endregion
+export { t as default };