@swell/swell-ui 0.1.0 → 0.1.1

package/dist/chunks/popover-D3Ob6slA.js

@@ -0,0 +1,92 @@
+import { n as e, r as t, t as n } from "./define-BlQTa1g4.js";
+import { n as r } from "./element-B4-_7TLZ.js";
+import { n as i, t as a } from "./toggle-C7-oPgWR.js";
+import { n as o, t as s } from "./popup-Dbh2fchP.js";
+// src/components/core/popover/popover.css?inline
+var c = ":host{display:inline-block}:host [part=panel]{box-sizing:border-box;max-width:calc(100% - 16px);padding:var(--swell-overlay-padding);border:var(--swell-border-width) solid var(--swell-overlay-color-border);border-radius:var(--swell-overlay-border-radius);font:var(--swell-font-weight) var(--swell-font-size) / var(--swell-font-leading) var(--swell-font-family);letter-spacing:var(--swell-font-tracking);background:var(--swell-overlay-color-background);color:var(--swell-color-foreground);box-shadow:var(--swell-overlay-shadow) var(--swell-overlay-color-shadow);overscroll-behavior:contain;outline:none;margin:0;position:fixed;inset:auto;overflow:auto}:host [part=panel]:popover-open{animation:swell-popover-below var(--swell-motion-duration-base) var(--swell-motion-easing)}:host [part=panel].above:popover-open{animation-name:swell-popover-above}@keyframes swell-popover-below{0%{opacity:0;transform:scale(.96)translateY(-6px)}}@keyframes swell-popover-above{0%{opacity:0;transform:scale(.96)translateY(6px)}}@media (forced-colors:active){:host [part=panel]{border-color:canvastext}}", l = /* @__PURE__ */ t({ SwellPopover: () => d }), u = "<slot name=\"trigger\"></slot><div part=\"panel\" role=\"dialog\" popover=\"auto\" tabindex=\"-1\"><slot></slot></div>", d = class extends r {
+	static styles = c;
+	static template = u;
+	static observedAttributes = [
+		...r.observedAttributes,
+		"open",
+		"aria-label"
+	];
+	#e;
+	#t = !1;
+	#n = !1;
+	#r;
+	#i = a(this);
+	constructor() {
+		super();
+		let e = this.shadowRoot?.querySelector("slot[name=\"trigger\"]");
+		e?.addEventListener("pointerdown", () => {
+			this.#e = this.open, addEventListener("pointerup", this.#p, { capture: !0 }), addEventListener("pointercancel", this.#p, { capture: !0 });
+		}), e?.addEventListener("slotchange", () => this.#f()), e?.addEventListener("click", (e) => {
+			let t = this.#e ?? this.open;
+			this.#e = void 0, setTimeout(() => {
+				!e.defaultPrevented && this.isConnected && (this.open = !t, this.open && i(this, this.#o));
+			});
+		}), this.#o.addEventListener("beforetoggle", (e) => {
+			let t = e.newState === "open", n = this.getRootNode().activeElement;
+			!t && !this.#t && n && this.contains(n) && this.#s?.focus(), this.#t = !1, this.#u(t), this.#n = !0, this.open = t, this.#n = !1;
+		}), this.addEventListener("focusout", (e) => {
+			let t = e.relatedTarget;
+			this.open && (t instanceof Node ? this.contains(t) || this.#a() : setTimeout(() => {
+				let e = document.activeElement;
+				e instanceof HTMLIFrameElement && !this.contains(e) && this.#a();
+			}));
+		});
+	}
+	#a() {
+		this.open &&= (this.#t = !0, !1);
+	}
+	get open() {
+		return this.hasAttribute("open");
+	}
+	set open(e) {
+		this.toggleAttribute("open", !!e);
+	}
+	connectedCallback() {
+		e(this, "open"), super.connectedCallback(), this.#f(), this.#l();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.#u(!1), this.open = !1;
+	}
+	update(e) {
+		e === "aria-label" && this.#c(), e === "open" && (this.#l(), this.#i());
+	}
+	get #o() {
+		return this.shadowRoot?.querySelector("[part=\"panel\"]");
+	}
+	get #s() {
+		return this.querySelector(":scope > [slot=\"trigger\"]");
+	}
+	#c() {
+		let e = this.getAttribute("aria-label");
+		e ? this.#o.setAttribute("aria-label", e) : this.#o.removeAttribute("aria-label");
+	}
+	#l() {
+		if (!this.isConnected || this.#n) return;
+		let e = this.#o.matches(":popover-open");
+		this.open && !e ? this.#o.showPopover() : !this.open && e && this.#o.hidePopover(), this.open && this.#m();
+	}
+	#u(e) {
+		this.#r?.(), this.#r = e ? s(this.#m) : void 0, this.#f(e);
+	}
+	#d;
+	#f(e = this.open) {
+		let t = this.#s ?? void 0;
+		this.#d !== t && this.#d?.removeAttribute("aria-expanded"), t?.setAttribute("aria-expanded", String(e)), this.#d = t;
+	}
+	#p = () => {
+		removeEventListener("pointerup", this.#p, { capture: !0 }), removeEventListener("pointercancel", this.#p, { capture: !0 }), setTimeout(() => this.#e = void 0);
+	};
+	#m = () => {
+		let e = this.#o, t = this.#s ?? this, n = o(t, e, this);
+		e.classList.toggle("above", n);
+		let r = t.getBoundingClientRect(), i = (r.left + r.right) / 2 - parseFloat(e.style.left);
+		e.style.transformOrigin = `${i}px ${n ? "100%" : "0"}`;
+	};
+};
+n("swell-popover", d);
+export { l as n, d as t };

package/dist/chunks/popup-Dbh2fchP.js

@@ -0,0 +1,21 @@
+function e(e, t, n) {
+	let r = parseFloat(e.getPropertyValue(t));
+	return Number.isFinite(r) ? r : n;
+}
+function t(t, n, r) {
+	let i = getComputedStyle(n), a = e(i, "--swell-overlay-offset", 12), o = e(i, "--swell-overlay-height", 320), s = t.getBoundingClientRect(), c = n.style, l = innerHeight - s.bottom - a - 8, u = s.top - a - 8, d = l >= Math.min(n.scrollHeight, o) || l >= u;
+	c.minWidth = `${s.width}px`, c.maxHeight = `${Math.max(0, Math.min(o, d ? l : u))}px`;
+	let f = document.documentElement.clientWidth;
+	c.right = "auto", c.left = "0px";
+	let p = n.offsetWidth, m = (e) => e < 0 || e + p > f, h = getComputedStyle(r).direction === "rtl", g = h ? s.right - p : s.left;
+	return m(g) && (g = h ? s.left : s.right - p), m(g) && (g = Math.max(8, Math.min(g, f - 8 - p))), c.left = `${g}px`, c.top = d ? `${s.bottom + a}px` : "auto", c.bottom = d ? "auto" : `${innerHeight - s.top + a}px`, !d;
+}
+function n(e) {
+	return addEventListener("scroll", e, {
+		capture: !0,
+		passive: !0
+	}), addEventListener("resize", e), () => {
+		removeEventListener("scroll", e, { capture: !0 }), removeEventListener("resize", e);
+	};
+}
+export { t as n, n as t };

package/dist/chunks/quantity-h3wqn8tC.js

@@ -0,0 +1,140 @@
+import { n as e, r as t, t as n } from "./define-BlQTa1g4.js";
+import { n as r, o as i } from "./element-B4-_7TLZ.js";
+// src/components/core/quantity/quantity.css?inline
+var a = ":host{--_swell-control-height:var(--swell-control-height);--_swell-control-font-size:var(--swell-control-font-size)}:host([size=xsmall]){--_swell-control-height:var(--swell-control-xsmall-height);--_swell-control-font-size:var(--swell-control-xsmall-font-size)}:host([size=small]){--_swell-control-height:var(--swell-control-small-height);--_swell-control-font-size:var(--swell-control-small-font-size)}:host([size=large]){--_swell-control-height:var(--swell-control-large-height);--_swell-control-font-size:var(--swell-control-large-font-size)}:host([size=xlarge]){--_swell-control-height:var(--swell-control-xlarge-height);--_swell-control-font-size:var(--swell-control-xlarge-font-size)}:host{box-sizing:border-box;height:var(--_swell-control-height);border:var(--swell-border-width) solid var(--swell-color-border);font:var(--swell-font-bold-weight) var(--_swell-control-font-size) / 1 var(--swell-font-family);font-variant-numeric:tabular-nums;letter-spacing:var(--swell-font-tracking);background:var(--swell-color-background);color:var(--swell-color-foreground);-webkit-user-select:none;user-select:none;border-radius:999px;align-items:center;display:inline-flex}:host(:focus-visible){outline:var(--swell-focus-width) solid var(--swell-focus-color);outline-offset:var(--swell-focus-offset)}:host([aria-disabled=true]){opacity:var(--swell-control-disabled-opacity)}:host .step{width:calc(var(--_swell-control-height) - 2 * var(--swell-border-width));height:calc(var(--_swell-control-height) - 2 * var(--swell-border-width));cursor:pointer;touch-action:manipulation;transition:background-color var(--swell-motion-duration-fast) var(--swell-motion-easing);border-radius:999px;flex:none;place-items:center;display:grid}:host .step:hover{background:var(--swell-color-secondary-background)}:host .step.limit{opacity:var(--swell-control-disabled-opacity)}:host .step.limit,:host([aria-disabled=true]) .step{cursor:default;background:0 0}:host([busy]){opacity:var(--swell-control-disabled-opacity)}:host([busy]) .step{cursor:progress;background:0 0}:host .step svg{width:calc(var(--_swell-control-font-size) + 4px);height:calc(var(--_swell-control-font-size) + 4px)}:host .count{min-width:calc(var(--_swell-control-font-size) + 4px);text-align:center}@media (forced-colors:active){:host{border-color:canvastext}:host .step{color:buttontext}:host .step.limit,:host([aria-disabled=true]) .step{color:graytext;opacity:1}}", o = /* @__PURE__ */ t({ SwellQuantity: () => u }), s = (e) => `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">${e}</svg>`, c = `<span class="step" data-step="-1" aria-hidden="true">${s("<path d=\"M5 12h14\"/>")}</span><span class="count" aria-hidden="true"></span><span class="step" data-step="1" aria-hidden="true">${s("<path d=\"M5 12h14\"/><path d=\"M12 5v14\"/>")}</span>`;
+function l(e) {
+	if (e === null || e.trim() === "") return;
+	let t = Number(e);
+	return Number.isInteger(t) ? t : void 0;
+}
+var u = class extends r {
+	static styles = a;
+	static template = c;
+	static formAssociated = !0;
+	static observedAttributes = [
+		...r.observedAttributes,
+		"value",
+		"min",
+		"max",
+		"step",
+		"disabled",
+		"busy"
+	];
+	#e;
+	#t = !1;
+	constructor() {
+		super(), this.shadowRoot?.addEventListener("click", (e) => {
+			let t = e.target.closest("[data-step]");
+			t && this.#c(this.value + Number(t.getAttribute("data-step")) * this.#i);
+		}), this.addEventListener("keydown", this.#s);
+	}
+	get value() {
+		return this.#o(this.#e ?? l(this.getAttribute("value")) ?? this.#n);
+	}
+	set value(e) {
+		let t = l(String(e));
+		t !== void 0 && (this.#e = t, this.#l());
+	}
+	get name() {
+		return this.getAttribute("name") ?? "";
+	}
+	set name(e) {
+		this.setAttribute("name", e);
+	}
+	get disabled() {
+		return this.hasAttribute("disabled");
+	}
+	set disabled(e) {
+		this.toggleAttribute("disabled", !!e);
+	}
+	get busy() {
+		return this.hasAttribute("busy");
+	}
+	set busy(e) {
+		this.toggleAttribute("busy", !!e);
+	}
+	get form() {
+		return this.internals.form;
+	}
+	connectedCallback() {
+		for (let t of [
+			"value",
+			"name",
+			"disabled",
+			"busy"
+		]) e(this, t);
+		this.hasAttribute("role") || this.setAttribute("role", "spinbutton"), this.#l(), super.connectedCallback();
+	}
+	formResetCallback() {
+		this.#e = void 0, this.#l();
+	}
+	formDisabledCallback(e) {
+		this.#t = e, this.#l();
+	}
+	formStateRestoreCallback(e) {
+		let t = typeof e == "string" ? l(e) : void 0;
+		t !== void 0 && (this.#e = t, this.#l());
+	}
+	update() {
+		this.#l();
+	}
+	get #n() {
+		return l(this.getAttribute("min")) ?? 1;
+	}
+	get #r() {
+		let e = l(this.getAttribute("max"));
+		return e === void 0 ? Infinity : Math.max(e, this.#n);
+	}
+	get #i() {
+		let e = l(this.getAttribute("step"));
+		return e !== void 0 && e > 0 ? e : 1;
+	}
+	get #a() {
+		return this.disabled || this.#t;
+	}
+	#o(e) {
+		return Math.min(Math.max(e, this.#n), this.#r);
+	}
+	#s = (e) => {
+		if (e.target !== this || e.defaultPrevented || this.#a || e.altKey || e.ctrlKey || e.metaKey) return;
+		let t;
+		switch (e.key) {
+			case "ArrowUp":
+				t = this.value + this.#i;
+				break;
+			case "ArrowDown":
+				t = this.value - this.#i;
+				break;
+			case "Home":
+				t = this.#n;
+				break;
+			case "End":
+				t = this.#r;
+				break;
+			default: return;
+		}
+		e.preventDefault(), Number.isFinite(t) && this.#c(t);
+	};
+	#c(e) {
+		if (this.#a || this.busy) return;
+		let t = this.#o(e);
+		t !== this.value && (this.#e = t, this.#l(), this.dispatchEvent(new Event("input", {
+			bubbles: !0,
+			composed: !0
+		})), this.dispatchEvent(new Event("change", { bubbles: !0 })));
+	}
+	#l() {
+		this.#e !== void 0 && (this.#e = this.#o(this.#e));
+		let e = this.value, t = this.#n, n = this.#r;
+		this.setAttribute("aria-valuenow", String(e)), this.setAttribute("aria-valuemin", String(t)), Number.isFinite(n) ? this.setAttribute("aria-valuemax", String(n)) : this.removeAttribute("aria-valuemax");
+		let r = this.shadowRoot, i = r?.querySelector(".count");
+		i && (i.textContent = String(e));
+		for (let i of r?.querySelectorAll("[data-step]") ?? []) i.classList.toggle("limit", i.getAttribute("data-step") === "1" ? e >= n : e <= t);
+		this.internals.setFormValue(String(e), String(e)), this.#u();
+	}
+	#u() {
+		this.busy ? this.setAttribute("aria-busy", "true") : this.removeAttribute("aria-busy"), this.#a ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled"), i(this, !this.#a);
+	}
+};
+n("swell-quantity", u);
+export { o as n, u as t };

package/dist/chunks/radio-BhFDL3pO.js

@@ -0,0 +1,192 @@
+import { n as e, r as t, t as n } from "./define-BlQTa1g4.js";
+import { n as r, t as i } from "./description-BHfQ8meK.js";
+import { n as a } from "./element-B4-_7TLZ.js";
+import { n as o, t as s } from "./radio-option-hT29S8Zl.js";
+// src/components/core/radio/radio.css?inline
+var c = ":host{--_swell-control-font-size:var(--swell-control-font-size);--_swell-radio-gap:var(--swell-radio-gap,8px);--_swell-radio-button-gap:var(--swell-radio-button-gap,6px);--_swell-control-height:var(--swell-control-height);--_swell-radio-color-background:var(--swell-radio-color-background,var(--swell-color-background));--_swell-radio-shadow:var(--swell-radio-shadow,0px 1px 3px 0px);--_swell-radio-color-shadow:var(--swell-radio-color-shadow,#0000001a)}:host([size=xsmall]){--_swell-control-font-size:var(--swell-control-xsmall-font-size);--_swell-control-height:var(--swell-control-xsmall-height)}:host([size=small]){--_swell-control-font-size:var(--swell-control-small-font-size);--_swell-control-height:var(--swell-control-small-height)}:host([size=large]){--_swell-control-font-size:var(--swell-control-large-font-size);--_swell-control-height:var(--swell-control-large-height)}:host([size=xlarge]){--_swell-control-font-size:var(--swell-control-xlarge-font-size);--_swell-control-height:var(--swell-control-xlarge-height)}:host{display:block}:host [hidden]{display:none}:host .group{gap:var(--swell-field-gap);display:grid}:host .label{font:var(--swell-field-label-font-weight) max(12px, calc(var(--_swell-control-font-size) - 1px)) / var(--swell-font-leading) var(--swell-field-label-font-family);letter-spacing:var(--swell-field-label-font-tracking);color:var(--swell-field-label-color-foreground)}:host .options{gap:var(--_swell-radio-gap);display:grid}:host .swell-radio-hint,:host .swell-radio-error{font:var(--swell-font-weight) max(12px, calc(var(--_swell-control-font-size) - 1px)) / var(--swell-font-leading) var(--swell-font-family);letter-spacing:var(--swell-font-tracking);color:var(--swell-color-secondary-foreground)}:host .swell-radio-error:not([hidden]){font-weight:var(--swell-font-strong-weight);color:var(--swell-color-danger)}:host .marker{display:none}:host(:state(button)) .options{gap:var(--_swell-radio-button-gap);grid-template-columns:repeat(auto-fit,minmax(64px,1fr))}:host(:state(segmented)) .options{box-sizing:border-box;height:var(--_swell-control-height);border-radius:calc(var(--swell-border-radius) + 4px);background:var(--swell-color-secondary-background);grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:0;padding:4px;position:relative}:host(:state(segmented)[invalid]) .options{box-shadow:inset 0 0 0 var(--swell-border-width) var(--swell-color-danger)}:host(:state(segmented)) .marker:not([hidden]){box-sizing:border-box;width:calc((100% - 8px) / var(--marker-count));border-radius:var(--swell-border-radius);background:var(--_swell-radio-color-background);box-shadow:var(--_swell-radio-shadow) var(--_swell-radio-color-shadow), 0 0 0 var(--swell-border-width) var(--swell-field-color-border);transition:left var(--swell-motion-duration-slow) var(--swell-motion-easing), right var(--swell-motion-duration-slow) var(--swell-motion-easing);display:block;position:absolute;inset-block:4px;inset-inline-start:calc(4px + var(--marker-index) * (100% - 8px) / var(--marker-count))}:host(:state(segmented):disabled) .marker,:host(:state(segmented)) .marker.faded{opacity:var(--swell-control-disabled-opacity)}:host(:state(segmented)) ::slotted(swell-radio-option){min-width:0;position:relative}@media (forced-colors:active){:host(:state(segmented)) .options{outline:1px solid canvastext}:host(:state(segmented)) .marker:not([hidden]){background:highlight;transition:none}}", l = /* @__PURE__ */ t({ SwellRadio: () => p }), u = "\n  <div class=\"group\" role=\"radiogroup\">\n    <div class=\"label\" id=\"label\" hidden></div>\n    <div class=\"options\"><span class=\"marker\" aria-hidden=\"true\" hidden></span><slot></slot></div>\n  </div>", d;
+function f() {
+	if (d === void 0) {
+		let e = document.createElement("form"), t = document.createElement("input");
+		t.type = "radio", t.name = "probe", t.required = !0, e.append(t), d = t.validationMessage;
+	}
+	return d;
+}
+var p = class extends a {
+	static group = "radio";
+	static appearance = "radio";
+	static appearances = ["segmented", "button"];
+	static styles = c;
+	static template = u;
+	static formAssociated = !0;
+	static observedAttributes = [
+		...a.observedAttributes,
+		"label",
+		"hint",
+		"error",
+		"invalid",
+		"name",
+		"value",
+		"required",
+		"disabled",
+		"aria-label",
+		"indicator-position"
+	];
+	#e;
+	#t;
+	#n;
+	#r;
+	#i;
+	#a;
+	#o;
+	constructor() {
+		super();
+		let e = this.shadowRoot;
+		this.#e = e.querySelector(".group"), this.#t = e.querySelector(".label"), this.#n = e.querySelector("slot"), this.#r = e.querySelector(".marker"), this.#i = i("swell-radio", "group"), this.#e.append(this.#i.hint, this.#i.error), this.#n.addEventListener("slotchange", () => this.#g()), o.link(this, {
+			choose: (e) => this.#h(e),
+			refresh: () => this.#g()
+		}), this.addEventListener("keydown", this.#p), this.addEventListener("keyup", this.#m);
+	}
+	get value() {
+		return this.#s ?? "";
+	}
+	set value(e) {
+		this.#a = String(e), this.#g();
+	}
+	get name() {
+		return this.getAttribute("name") ?? "";
+	}
+	set name(e) {
+		this.setAttribute("name", e);
+	}
+	get required() {
+		return this.hasAttribute("required");
+	}
+	set required(e) {
+		this.toggleAttribute("required", !!e);
+	}
+	get disabled() {
+		return this.hasAttribute("disabled");
+	}
+	set disabled(e) {
+		this.toggleAttribute("disabled", !!e);
+	}
+	get invalid() {
+		return this.hasAttribute("invalid");
+	}
+	set invalid(e) {
+		this.toggleAttribute("invalid", !!e);
+	}
+	get form() {
+		return this.internals.form;
+	}
+	get validity() {
+		return this.internals.validity;
+	}
+	get validationMessage() {
+		return this.internals.validationMessage;
+	}
+	get willValidate() {
+		return this.internals.willValidate;
+	}
+	checkValidity() {
+		return this.internals.checkValidity();
+	}
+	reportValidity() {
+		return this.internals.reportValidity();
+	}
+	connectedCallback() {
+		for (let t of [
+			"value",
+			"name",
+			"required",
+			"disabled",
+			"invalid"
+		]) e(this, t);
+		super.connectedCallback(), this.#g();
+	}
+	formResetCallback() {
+		this.#a = void 0, this.#g();
+	}
+	formDisabledCallback() {
+		this.#g();
+	}
+	formStateRestoreCallback(e) {
+		typeof e == "string" && (this.#a = e, this.#g());
+	}
+	update() {
+		this.#g();
+	}
+	get #s() {
+		return this.#a ?? this.getAttribute("value");
+	}
+	get #c() {
+		return this.matches(":disabled");
+	}
+	#l(e) {
+		if (this.#c) return;
+		let t = this.#s;
+		return (t === null ? void 0 : e.find((e) => e.value === t && !e.disabled)) ?? e.find((e) => !e.disabled);
+	}
+	focus(e) {
+		this.#l(this.#u())?.focus(e);
+	}
+	#u() {
+		return this.#n.assignedElements().filter((e) => e instanceof s && !e.hidden);
+	}
+	#d(e) {
+		let t = e.target;
+		return t instanceof s && t.parentElement === this ? t : void 0;
+	}
+	#f(e) {
+		let t = getComputedStyle(this).direction === "rtl" ? -1 : 1;
+		return e === "ArrowDown" ? 1 : e === "ArrowUp" ? -1 : e === "ArrowRight" ? t : e === "ArrowLeft" ? -t : 0;
+	}
+	#p = (e) => {
+		let t = this.#d(e);
+		if (!t) return;
+		if (e.key === " ") {
+			e.preventDefault(), this.#o = t;
+			return;
+		}
+		if (e.altKey || e.ctrlKey || e.metaKey) return;
+		let n = this.#f(e.key);
+		if (!n) return;
+		e.preventDefault();
+		let r = this.#u().filter((e) => !e.disabled), i = r[(r.indexOf(t) + n + r.length) % r.length];
+		i && (this.#h(i), i.focus());
+	};
+	#m = (e) => {
+		if (e.key !== " " || !this.#o) return;
+		let t = this.#o;
+		this.#o = void 0, this.#d(e) === t && this.#h(t);
+	};
+	#h(e) {
+		this.#c || e.disabled || e.value === this.#s || (this.#a = e.value, this.#g(), this.dispatchEvent(new Event("input", {
+			bubbles: !0,
+			composed: !0
+		})), this.dispatchEvent(new Event("change", { bubbles: !0 })));
+	}
+	#g() {
+		let e = this.#u(), t = this.#s, n = this.#c, r = this.invalid, i = t === null ? void 0 : e.find((e) => e.value === t), a = i && !i.disabled && !n ? i : void 0, s = this.#l(e);
+		e.forEach((t, a) => o.sync(t, {
+			checked: t === i,
+			tabbable: t === s,
+			disabled: n || t.disabled,
+			invalid: r,
+			position: a + 1,
+			size: e.length
+		})), this.internals.setFormValue(a ? t : null, t), this.required && !a ? this.internals.setValidity({ valueMissing: !0 }, f(), e.find((e) => !e.disabled)) : this.internals.setValidity({}), this.#v(n), this.#_();
+	}
+	#_() {
+		let e = this.#u(), t = e.findIndex((e) => e.checked);
+		this.#r.hidden = t < 0, this.#r.classList.toggle("faded", !!e[t]?.disabled), this.#r.style.setProperty("--marker-index", String(Math.max(t, 0))), this.#r.style.setProperty("--marker-count", String(Math.max(e.length, 1)));
+	}
+	#v(e) {
+		let t = this.getAttribute("label") ?? "";
+		this.#t.textContent = t, this.#t.hidden = !t;
+		let n = this.getAttribute("aria-label");
+		t ? this.#e.setAttribute("aria-labelledby", "label") : this.#e.removeAttribute("aria-labelledby"), !t && n ? this.#e.setAttribute("aria-label", n) : this.#e.removeAttribute("aria-label"), this.required ? this.#e.setAttribute("aria-required", "true") : this.#e.removeAttribute("aria-required"), e ? this.#e.setAttribute("aria-disabled", "true") : this.#e.removeAttribute("aria-disabled"), r(this, this.#e, this.#i);
+	}
+};
+n("swell-radio", p);
+export { l as n, p as t };

package/dist/chunks/radio-option-hT29S8Zl.js

@@ -0,0 +1,88 @@
+import { o as e, u as t } from "./config-C-FYxOaJ.js";
+import { n, r, t as i } from "./define-BlQTa1g4.js";
+import { n as a } from "./element-B4-_7TLZ.js";
+import { t as o } from "./link-D4NC86oc.js";
+// src/components/core/radio/radio-option.css?inline
+var s = ":host{--_swell-radio-color-border:var(--swell-radio-color-border,var(--swell-color-border));--_swell-radio-border-radius:var(--swell-radio-border-radius,var(--swell-border-radius));--_swell-radio-color-background:var(--swell-radio-color-background,var(--swell-color-background));--_swell-radio-checked-color-background:var(--swell-radio-checked-color-background,light-dark(#f1f4fe,#191f2d));--_swell-radio-circle:calc(var(--_swell-control-font-size,var(--swell-control-font-size)) + 6px);--_swell-radio-inline:calc(var(--_swell-control-font-size,var(--swell-control-font-size)) + 2px);--_swell-radio-top:calc(var(--_swell-radio-circle) / 2 + 2px - var(--_swell-control-font-size,var(--swell-control-font-size)) * var(--swell-font-leading) / 2);font:var(--swell-font-weight) var(--_swell-control-font-size,var(--swell-control-font-size)) / var(--swell-font-leading) var(--swell-font-family);letter-spacing:var(--swell-font-tracking);color:var(--swell-color-foreground);display:block}:host [hidden]{display:none}:host(:state(outline)) .frame{border:var(--swell-border-strong-width) solid var(--_swell-radio-color-border);border-radius:var(--_swell-radio-border-radius);background:var(--_swell-radio-color-background);transition:border-color var(--swell-motion-duration-base) var(--swell-motion-easing);overflow:clip}:host(:state(button)) .frame{box-sizing:border-box;height:max(24px, calc(var(--_swell-control-height,var(--swell-control-height)) - 12px));border:var(--swell-border-width) solid var(--_swell-radio-color-border);border-radius:var(--swell-border-radius);background:var(--_swell-radio-color-background);transition:border-color var(--swell-motion-duration-base) var(--swell-motion-easing), background-color var(--swell-motion-duration-base) var(--swell-motion-easing), box-shadow var(--swell-motion-duration-base) var(--swell-motion-easing)}:host(:state(disabled)) .frame{opacity:var(--_swell-control-disabled-opacity,var(--swell-control-disabled-opacity))}:host .row{cursor:pointer}:host(:state(outline)) .row{padding:calc(var(--_swell-control-font-size,var(--swell-control-font-size)) - 2px) var(--_swell-radio-inline)}:host .radio{gap:calc(var(--_swell-control-font-size,var(--swell-control-font-size)) - 8px);outline:none;align-items:flex-start;min-height:24px;display:flex}:host(:state(outline)) .radio{gap:calc(var(--_swell-control-font-size,var(--swell-control-font-size)) - 2px);align-items:center;min-height:0}:host .start{flex:none;align-self:center;align-items:center;display:none}:host(:state(start-content)) .start{display:flex}:host .text{min-width:0;padding-top:var(--_swell-radio-top);flex:1;gap:2px;display:grid}:host(:state(outline)) .text{padding-top:0}:host(:state(outline)) .label{font-weight:var(--swell-font-strong-weight)}:host .hint{font:var(--swell-font-weight) max(12px, calc(var(--_swell-control-font-size,var(--swell-control-font-size)) - 1px)) / var(--swell-font-leading) var(--swell-font-family);letter-spacing:var(--swell-font-tracking);color:var(--swell-color-secondary-foreground)}:host .end{padding-top:var(--_swell-radio-top);font-weight:var(--swell-font-strong-weight);font-variant-numeric:tabular-nums;flex:none}:host(:state(outline)) .end{padding-top:0}:host .indicator{box-sizing:border-box;width:var(--_swell-radio-circle);height:var(--_swell-radio-circle);margin:2px;border:var(--swell-border-strong-width) solid var(--swell-field-color-border);color:var(--swell-color-background);transition:background-color var(--swell-motion-duration-base) var(--swell-motion-easing), border-color var(--swell-motion-duration-base) var(--swell-motion-easing);background:0 0;border-radius:50%;flex:none;place-items:center;margin-block-start:max(2px, calc(var(--_swell-control-font-size,var(--swell-control-font-size)) * var(--swell-font-leading) / 2 - var(--_swell-radio-circle) / 2));display:grid}:host(:state(outline)) .indicator{margin:0}:host(:state(end)) .indicator{order:1}:host .indicator:after{width:round(calc(var(--_swell-radio-circle) * .4), 1px);height:round(calc(var(--_swell-radio-circle) * .4), 1px);content:\"\";transition:transform var(--swell-motion-duration-base) var(--swell-motion-spring);background:currentColor;border-radius:50%;transform:scale(0)}:host(:state(outline)) .indicator:after{display:none}:host .check{width:calc(var(--_swell-control-font-size,var(--swell-control-font-size)) - 2px);height:calc(var(--_swell-control-font-size,var(--swell-control-font-size)) - 2px);display:none}:host(:state(outline)) .check{opacity:0;transition:opacity var(--swell-motion-duration-fast) var(--swell-motion-easing), transform var(--swell-motion-duration-base) var(--swell-motion-spring);display:block;transform:scale(.4)}:host(:state(checked)) .indicator{border-color:var(--swell-color-accent);background:var(--swell-color-accent)}:host(:state(checked)) .indicator:after,:host(:state(outline):state(checked)) .check{opacity:1;transform:none}:host(:state(outline):state(checked)) .frame{border-color:var(--swell-color-accent)}:host(:state(button):state(checked)) .frame{border-color:var(--swell-color-accent);background:var(--_swell-radio-checked-color-background);box-shadow:inset 0 0 0 var(--swell-border-width) var(--swell-color-accent)}:host(:state(plain):state(focused)) .indicator,:host(:is(:state(outline),:state(button)):state(focused)) .frame{outline:var(--swell-focus-width) solid var(--swell-focus-color);outline-offset:var(--swell-focus-offset)}:host(:state(segmented):state(focused)) .frame{outline:var(--swell-focus-width) solid var(--swell-focus-color);outline-offset:calc(var(--swell-focus-width) * -1)}:host(:state(invalid):state(focused)) :is(.indicator,.frame){outline-color:var(--swell-color-danger)}:host(:state(invalid):not(:state(checked))) .indicator,:host(:is(:state(outline),:state(button)):state(invalid):not(:state(checked))) .frame{border-color:var(--swell-color-danger)}:host(:not(:state(checked),:state(disabled),:state(invalid))) .row:hover .indicator{border-color:var(--swell-field-hover-color-border)}:host(:is(:state(outline),:state(button)):not(:state(checked),:state(disabled),:state(invalid)):hover) .frame{border-color:var(--swell-field-color-border)}:host(:state(disabled)) .row{cursor:not-allowed}:host .details{visibility:hidden;transition:grid-template-rows var(--swell-motion-duration-slow) var(--swell-motion-easing), visibility 0s linear var(--swell-motion-duration-slow);grid-template-rows:0fr;display:grid}:host(:not(:state(details))) .details{display:none}:host(:state(checked)) .details{visibility:visible;transition:grid-template-rows var(--swell-motion-duration-slow) var(--swell-motion-easing), visibility 0s;grid-template-rows:1fr}:host(:state(outline)) .details{transition:grid-template-rows var(--swell-motion-duration-slow) var(--swell-motion-easing), padding-bottom var(--swell-motion-duration-slow) var(--swell-motion-easing), visibility 0s linear var(--swell-motion-duration-slow);padding-bottom:0}:host(:state(outline):state(checked)) .details{padding-bottom:var(--_swell-radio-inline);transition:grid-template-rows var(--swell-motion-duration-slow) var(--swell-motion-easing), padding-bottom var(--swell-motion-duration-slow) var(--swell-motion-easing), visibility 0s}:host .details>div{min-height:0;margin:calc(-1 * max(var(--swell-field-ring-width), var(--swell-focus-width) + var(--swell-focus-offset)));padding:max(var(--swell-field-ring-width), var(--swell-focus-width) + var(--swell-focus-offset));overflow:clip}:host .content{padding-block:8px 0;padding-inline:calc(var(--_swell-radio-circle) + var(--_swell-control-font-size,var(--swell-control-font-size)) - 4px) 0}:host(:state(end)) .content{padding-inline-start:0}:host(:state(outline)) .content{padding-block:0;padding-inline:calc(var(--_swell-radio-inline) + var(--_swell-radio-circle) + var(--_swell-control-font-size,var(--swell-control-font-size)) - 2px) var(--_swell-radio-inline)}:host(:state(outline):state(end)) .content{padding-inline-start:var(--_swell-radio-inline)}:host(:state(button)) .row{height:100%;padding-inline:calc(var(--_swell-control-font-size,var(--swell-control-font-size)) - 6px)}:host(:state(button)) .radio{justify-content:center;gap:calc(var(--_swell-control-font-size,var(--swell-control-font-size)) - 8px);align-items:center;height:100%;min-height:0}:host(:state(button)) .text{flex:0 auto;padding-top:0}:host(:is(:state(segmented),:state(button))) :is(.indicator,.hint,.end,.details){display:none}:host(:state(segmented)) :is(.frame,.row){box-sizing:border-box;border-radius:var(--swell-border-radius);height:100%}:host(:state(segmented)) .row{padding-inline:calc(var(--_swell-control-font-size,var(--swell-control-font-size)) - 2px)}:host(:state(segmented)) .radio{justify-content:center;gap:calc(var(--_swell-control-font-size,var(--swell-control-font-size)) - 6px);height:100%;min-height:0;color:var(--swell-color-secondary-foreground);transition:color var(--swell-motion-duration-base) var(--swell-motion-easing);align-items:center}:host(:state(segmented):state(checked)) .radio,:host(:state(segmented):not(:state(disabled),:state(checked)):hover) .radio{color:var(--swell-color-foreground)}:host(:state(segmented)) .text{flex:0 auto;padding-top:0}:host(:state(segmented)) .label{font-weight:var(--swell-font-strong-weight);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(:state(button)) .label{font-size:max(12px, calc(var(--_swell-control-font-size,var(--swell-control-font-size)) - 1px));font-weight:var(--swell-font-medium-weight);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(:state(button):state(checked)) .label{font-weight:var(--swell-font-bold-weight)}@media (forced-colors:active){:host .indicator,:host(:is(:state(outline),:state(button))) .frame{border-color:canvastext}:host(:state(checked)) .indicator{color:highlighttext;background:highlight;border-color:highlight}:host(:is(:state(outline),:state(button)):state(checked)) .frame{border-color:highlight}:host(:state(button):state(checked)) .frame{border-width:max(2px, calc(2 * var(--swell-border-width)))}:host(:state(segmented)) .radio{transition:none}:host(:state(segmented):state(checked)) .radio{forced-color-adjust:none;color:highlighttext}:host(:state(segmented):state(checked)) .frame{outline-color:highlighttext}}", c = /* @__PURE__ */ r({
+	SwellRadioOption: () => f,
+	radioGroup: () => l
+}), l = o(), u = t["radio.indicator.position"]?.values ?? [], d = "\n  <div class=\"frame\">\n    <div class=\"row\">\n      <div class=\"radio\" role=\"radio\" aria-checked=\"false\" aria-labelledby=\"label end\">\n        <span class=\"indicator\" aria-hidden=\"true\"><svg class=\"check\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"/></svg></span>\n        <span class=\"start\"><slot name=\"start\"></slot></span>\n        <span class=\"text\">\n          <span class=\"label\" id=\"label\"><slot></slot></span>\n          <span class=\"hint\" id=\"hint\" hidden></span>\n        </span>\n        <span class=\"end\" id=\"end\"><slot name=\"end\"></slot></span>\n      </div>\n    </div>\n    <div class=\"details\"><div><div class=\"content\"><slot name=\"details\"></slot></div></div></div>\n  </div>", f = class extends a {
+	static group = "radio";
+	static appearance = "radio";
+	static appearances = ["segmented", "button"];
+	static styles = s;
+	static template = d;
+	static shadowOptions = {
+		mode: "open",
+		delegatesFocus: !0
+	};
+	static observedAttributes = [
+		...a.observedAttributes,
+		"value",
+		"hint",
+		"disabled",
+		"hidden"
+	];
+	static {
+		l.receive((e, t) => e.#s(t));
+	}
+	#e;
+	#t;
+	#n;
+	#r;
+	#i;
+	#a = !1;
+	constructor() {
+		super();
+		let e = this.shadowRoot;
+		this.#e = e.querySelector(".radio"), this.#t = e.querySelector(".hint"), e.querySelector(".row")?.addEventListener("click", () => l.linkOf(this)?.choose(this)), this.#n = e.querySelector("slot[name=\"details\"]"), this.#n.addEventListener("slotchange", () => this.#o()), this.#r = e.querySelector("slot[name=\"start\"]"), this.#r.addEventListener("slotchange", () => this.#o()), this.#e.addEventListener("focus", () => {
+			this.#e.matches(":focus-visible") && this.internals.states.add("focused");
+		}), this.#e.addEventListener("blur", () => this.internals.states.delete("focused"));
+	}
+	get checked() {
+		return this.#a;
+	}
+	get value() {
+		return this.getAttribute("value") ?? "on";
+	}
+	set value(e) {
+		this.setAttribute("value", e);
+	}
+	get disabled() {
+		return this.hasAttribute("disabled");
+	}
+	set disabled(e) {
+		this.toggleAttribute("disabled", !!e);
+	}
+	connectedCallback() {
+		n(this, "value"), n(this, "disabled"), super.connectedCallback(), this.#o(), this.#i = l.linkOf(this), this.#i?.refresh();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.#i?.refresh(), this.#i = void 0;
+	}
+	appearanceSource() {
+		return l.groupOf(this) ?? this;
+	}
+	extraStates() {
+		let t = l.groupOf(this)?.getAttribute("indicator-position");
+		return t && u.includes(t) ? [t] : [e("radio.indicator", "position") ?? "start"];
+	}
+	update(e) {
+		e === "hint" ? (this.#t.textContent = this.getAttribute("hint") ?? "", this.#t.hidden = !this.#t.textContent, this.#t.hidden ? this.#e.removeAttribute("aria-describedby") : this.#e.setAttribute("aria-describedby", "hint")) : (e === "value" || e === "disabled" || e === "hidden") && l.linkOf(this)?.refresh();
+	}
+	#o() {
+		for (let [e, t] of [["details", this.#n], ["start-content", this.#r]]) t.assignedNodes().length > 0 ? this.internals.states.add(e) : this.internals.states.delete(e);
+	}
+	#s(e) {
+		this.#i = l.linkOf(this) ?? this.#i, this.#a = e.checked, this.updateStates();
+		let t = this.#e;
+		t.setAttribute("aria-checked", String(e.checked)), t.setAttribute("aria-posinset", String(e.position)), t.setAttribute("aria-setsize", String(e.size)), e.disabled ? (t.setAttribute("aria-disabled", "true"), t.removeAttribute("tabindex")) : (t.removeAttribute("aria-disabled"), t.tabIndex = e.tabbable ? 0 : -1);
+		for (let [t, n] of [
+			["checked", e.checked],
+			["disabled", e.disabled],
+			["invalid", e.invalid]
+		]) n ? this.internals.states.add(t) : this.internals.states.delete(t);
+	}
+};
+i("swell-radio-option", f);
+export { l as n, c as r, f as t };