@vireo-ai/trellis-ui 0.1.0 → 0.1.2

package/trellis_ui/static/trellis_ui/js/esm/index.js

@@ -3856,6 +3856,10 @@ var $o = Qo(), es = (e) => ({
 	sidebar: {
 		duration: I.slow,
 		ease: L.out
+	},
+	sheet: {
+		duration: I.slow,
+		ease: L.out
 	}
 }, cs = "(prefers-reduced-motion: reduce)", ls = () => typeof window > "u" || typeof window.matchMedia != "function" ? !1 : window.matchMedia(cs).matches, us = (e = "user") => e === "always" ? !0 : e === "never" ? !1 : ls(), ds = (e, t = {}, n = "user") => us(n) ? {
 	...e,
@@ -3923,6 +3927,10 @@ var $o = Qo(), es = (e) => ({
 		let t = n?.dataset.side === "right" ? "translateX(100%)" : "translateX(-100%)";
 		return e === "enter" ? { transform: [t, "translateX(0)"] } : { transform: ["translateX(0)", t] };
 	}
+	if (t === "sheet") {
+		let t = n?.dataset.side, r = t === "right" ? "inset(0 0 0 100%)" : t === "left" ? "inset(0 100% 0 0)" : t === "bottom" ? "inset(100% 0 0 0)" : "inset(0 0 100% 0)";
+		return e === "enter" ? { clipPath: [r, "inset(0 0 0 0)"] } : { clipPath: ["inset(0 0 0 0)", r] };
+	}
 	if (t === "toast") {
 		let t = n?.style, r = Number.parseFloat(t?.getPropertyValue("--ui-toast-stack-offset") || "0") || 0, i = Number.parseFloat(t?.getPropertyValue("--ui-toast-stack-scale") || "1") || 1, a = Number.parseFloat(t?.getPropertyValue("--ui-toast-stack-direction") || "1") || 1, o = Number.parseFloat(t?.getPropertyValue("--ui-toast-stack-opacity") || "1") || 1, s = (e, t) => `translateY(${r + e * a}px) scale(${i * t})`;
 		return e === "enter" ? {
@@ -6996,39 +7004,45 @@ var yf = 60, bf = 1, xf = 8, Sf = 24, Cf = "[x-ui-resizable\\:handle], [data-ui-
 		window.localStorage.setItem(Sp(), e);
 	} catch {}
 }, Ep = () => window.matchMedia("(prefers-color-scheme: dark)").matches, Dp = (e) => e === "dark" || e === "system" && Ep(), Op = (e) => {
-	let t = Dp(e), n = document.documentElement;
-	return n.classList.toggle("dark", t), n.dataset.theme = e, n.dispatchEvent(new CustomEvent("ui:theme-change", {
+	let t = Dp(e), n = t ? "dark" : "light", r = document.documentElement;
+	return r.classList.toggle("dark", t), r.dataset.theme = e, r.dataset.resolvedTheme = n, r.dispatchEvent(new CustomEvent("ui:theme-change", {
 		detail: {
 			mode: e,
+			resolved: n,
+			dark: t,
 			on: t
 		},
 		bubbles: !0
 	})), {
 		mode: e,
+		resolved: n,
+		dark: t,
 		on: t
 	};
 }, kp = () => {
 	let e = Op(wp());
 	return {
 		mode: e.mode,
+		resolved: e.resolved,
+		dark: e.dark,
 		on: e.on,
 		set(e) {
 			let t = xp(e);
 			Tp(t);
 			let n = Op(t);
-			this.mode = n.mode, this.on = n.on;
+			this.mode = n.mode, this.resolved = n.resolved, this.dark = n.dark, this.on = n.on;
 		},
 		toggle() {
-			this.set(this.on ? "light" : "dark");
+			this.set(this.dark ? "light" : "dark");
 		}
 	};
 }, Ap = (e) => {
 	if (typeof e.store != "function") return;
-	let t = e.store("darkMode") ?? kp();
-	e.store("darkMode", t), window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
+	let t = e.store("theme") ?? kp();
+	e.store("theme", t), window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
 		if (t.mode !== "system") return;
 		let e = Op("system");
-		t.mode = e.mode, t.on = e.on;
+		t.mode = e.mode, t.resolved = e.resolved, t.dark = e.dark, t.on = e.on;
 	});
 }, jp = 0, Mp = null, Np = () => {
 	if (jp === 0) {
@@ -7065,7 +7079,7 @@ var yf = 60, bf = 1, xf = 8, Sf = 24, Cf = "[x-ui-resizable\\:handle], [data-ui-
 	parseItemData: Iu,
 	splitControlValues: Fu,
 	createResizable: If,
-	props: nu,
+	mergeBindings: nu,
 	propsFromSchema: Bf,
 	resolveStyle: X,
 	className: Il,
@@ -7078,7 +7092,7 @@ var yf = 60, bf = 1, xf = 8, Sf = 24, Cf = "[x-ui-resizable\\:handle], [data-ui-
 	connectStream: _p,
 	dispatchStreamEvent: np,
 	applyThemeMode: Op,
-	createDarkModeStore: kp,
+	createThemeStore: kp,
 	lockDocumentScroll: Np,
 	registerConfirm: Jl,
 	registerResizable: Lf,
@@ -7130,60 +7144,122 @@ var yf = 60, bf = 1, xf = 8, Sf = 24, Cf = "[x-ui-resizable\\:handle], [data-ui-
 	"h4",
 	"h5",
 	"h6"
-], Kp = [
-	"flex w-full min-w-0 items-center gap-control rounded-control border text-control-fg outline-none",
-	"focus-within:border-control-border-focus",
-	"data-disabled:cursor-not-allowed data-disabled:opacity-50",
-	"data-invalid:border-control-border-invalid data-invalid:focus-within:border-control-border-invalid-focus"
-], qp = [
-	"data-[state=open]:border-control-border-focus",
-	"data-invalid:data-[state=open]:border-control-border-invalid-focus",
-	"data-invalid:focus-within:shadow-danger-focus data-invalid:data-[state=open]:shadow-danger-focus"
-], Jp = {
+], Kp = {
+	inherit: "text-inherit",
+	muted: "text-foreground-muted",
+	subtle: "text-foreground-subtle",
+	accent: "text-accent-text",
+	danger: "text-danger-text"
+};
+Kp.muted, Kp.subtle, Kp.accent, Kp.danger;
+var qp = [
+	"none",
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"full"
+], Jp = ["solid", "alpha"], Yp = {
+	none: "bg-transparent text-inherit",
+	app: "bg-app text-foreground",
+	chrome: "bg-chrome text-foreground",
+	subtle: "bg-surface-subtle text-foreground",
+	panel: "bg-surface-panel text-foreground",
+	raised: "bg-surface-raised text-foreground",
+	overlay: "bg-surface-overlay text-foreground",
+	accent: "bg-surface-accent text-surface-accent-fg",
+	inverse: "bg-surface-inverse text-surface-inverse-fg"
+}, Xp = {
+	solid: "",
+	alpha: ""
+}, Zp = {
+	xs: {
+		none: "",
+		xs: "rounded-1",
+		sm: "rounded-1",
+		md: "rounded-2",
+		lg: "rounded-3",
+		full: "rounded-full"
+	},
+	sm: {
+		none: "",
+		xs: "rounded-1",
+		sm: "rounded-2",
+		md: "rounded-2",
+		lg: "rounded-3",
+		full: "rounded-full"
+	},
+	md: {
+		none: "",
+		xs: "rounded-1",
+		sm: "rounded-2",
+		md: "rounded-3",
+		lg: "rounded-4",
+		full: "rounded-full"
+	},
+	lg: {
+		none: "",
+		xs: "rounded-2",
+		sm: "rounded-3",
+		md: "rounded-4",
+		lg: "rounded-5",
+		full: "rounded-full"
+	},
+	xlg: {
+		none: "",
+		xs: "rounded-2",
+		sm: "rounded-3",
+		md: "rounded-4",
+		lg: "rounded-5",
+		full: "rounded-full"
+	}
+}, Qp = ((e) => Fp.flatMap((t) => qp.map((n) => ({
+	when: {
+		size: t,
+		radius: n
+	},
+	class: e[t][n]
+}))))(Zp), $p = ["flex w-full min-w-0 items-center gap-control text-control-fg outline-none", "data-disabled:cursor-not-allowed data-disabled:opacity-50"], em = ["data-invalid:focus-within:shadow-danger-focus data-invalid:data-[state=open]:shadow-danger-focus"], tm = {
 	xs: "min-h-control-xs px-1.5 text-xs",
 	sm: "min-h-control-sm px-2 text-xs",
 	md: "min-h-control-md px-3 text-sm",
 	lg: "min-h-control-lg px-3 text-sm",
 	xlg: "min-h-control-xlg px-4 text-sm"
-}, Yp = {
-	outline: "border-control-border bg-control shadow-control",
-	filled: "border-transparent bg-control-hover shadow-none hover:bg-control-active"
-}, Xp = ["border-0 bg-transparent p-0 text-inherit text-control-fg outline-none", "placeholder:text-control-placeholder disabled:cursor-not-allowed"], Zp = [
+}, nm = {
+	outline: "bg-control shadow-control",
+	filled: "bg-control-hover shadow-none hover:bg-control-active"
+}, rm = ["border-0 bg-transparent p-0 text-inherit text-control-fg outline-none", "placeholder:text-control-placeholder disabled:cursor-not-allowed"], im = [
 	"inline-flex size-control-xs shrink-0 items-center justify-center rounded-2 border-0 bg-transparent",
 	"text-icon outline-none hover:bg-control-hover hover:text-control-fg",
 	"focus-visible:ring-2 focus-visible:ring-focus"
-], Qp = [
-	"min-h-control-lg w-full rounded-control border border-control-border bg-control px-3 text-sm text-control-fg shadow-control outline-none",
-	"focus:border-control-border-focus disabled:cursor-not-allowed disabled:opacity-50",
-	"aria-[invalid=true]:border-control-border-invalid aria-[invalid=true]:focus:border-control-border-invalid-focus aria-[invalid=true]:focus:shadow-danger-focus"
-], $p = ["absolute left-0 top-0 z-popover m-0 grid", "rounded-3 bg-popover text-popover-fg shadow-popover outline-none"], em = [
+], am = ["w-full bg-control text-control-fg shadow-control outline-none", "disabled:cursor-not-allowed disabled:opacity-50"], om = ["absolute left-0 top-0 z-popover m-0 grid", "rounded-3 bg-popover text-popover-fg shadow-popover outline-none"], sm = [
 	"ui-interactive:hover:bg-interactive-hover",
 	"ui-interactive:ui-active:bg-interactive-active",
 	"ui-interactive:ui-selected:bg-interactive-selected",
 	"ui-interactive:ui-selected:hover:bg-interactive-selected-hover"
 ];
-[...em];
-var tm = [
+[...sm];
+var cm = [
 	"flex h-menu-item w-full cursor-default select-none items-center gap-2 rounded-2 px-menu-item-x",
 	"text-left text-sm font-normal text-menu-item-fg outline-none",
-	em,
+	sm,
 	"data-disabled:pointer-events-none data-disabled:opacity-50"
-], nm = "size-icon shrink-0 fill-current text-current opacity-70", rm = "ml-auto size-icon shrink-0 fill-current text-current opacity-0 data-selected:opacity-100", im = ["single", "multiple"], am = Hp, om = ["trailing", "leading"];
-[...om];
-var sm = Gp;
-[...sm];
-var cm = {
-	mode: J(im, "single"),
+], lm = "size-icon shrink-0 fill-current text-current opacity-70", um = "ml-auto size-icon shrink-0 fill-current text-current opacity-0 data-selected:opacity-100", dm = ["single", "multiple"], fm = Hp, pm = ["trailing", "leading"];
+[...pm];
+var mm = Gp;
+[...mm];
+var hm = {
+	mode: J(dm, "single"),
 	collapsible: q,
 	disabled: q,
-	orientation: J(am, "vertical"),
+	orientation: J(fm, "vertical"),
 	defaultValue: G,
 	defaultValues: G,
 	loop: q.default(!0),
-	iconPosition: J(om, "trailing"),
-	headingAs: J(sm, "h3"),
+	iconPosition: J(pm, "trailing"),
+	headingAs: J(mm, "h3"),
 	class: G
-}, lm = Y({ definition: {
+}, gm = Y({ definition: {
 	component: "ui.accordion",
 	parts: {
 		root: {
@@ -7207,7 +7283,7 @@ var cm = {
 		content: { base: "overflow-hidden text-sm text-foreground-muted" },
 		contentInner: { base: "min-w-0 px-3 pb-3 pt-1" }
 	}
-} }), um = (e) => e.split(",").map((e) => e.trim()).filter(Boolean), dm = (e) => e ? "open" : "closed", fm = (e) => e instanceof HTMLButtonElement, pm = () => ({
+} }), _m = (e) => e.split(",").map((e) => e.trim()).filter(Boolean), vm = (e) => e ? "open" : "closed", ym = (e) => e instanceof HTMLButtonElement, bm = () => ({
 	props: null,
 	openValues: /* @__PURE__ */ new Set(),
 	collection: null,
@@ -7215,15 +7291,15 @@ var cm = {
 	init() {
 		this.props = W({
 			el: this.$el,
-			schema: cm
+			schema: hm
 		}), this.openValues = new Set(this.initialValues()), this.setupTriggers(), this.syncAll();
 	},
 	destroy() {
 		this.props.disconnect(), this.teardown();
 	},
 	get root() {
-		return Q.props({ inputs: [Q.resolveStyle({
-			part: lm.parts.root,
+		return Q.mergeBindings({ inputs: [Q.resolveStyle({
+			part: gm.parts.root,
 			props: this.props,
 			className: this.props.class
 		}), {
@@ -7235,7 +7311,7 @@ var cm = {
 	items() {
 		return Array.from(this.$el.querySelectorAll("[data-ui-accordion-item]")).map((e, t) => {
 			let n = e.querySelector("[data-ui-accordion-trigger]"), r = e.querySelector("[data-ui-accordion-content]");
-			return !fm(n) || !r ? null : (e.dataset.value || (e.dataset.value = `item-${t + 1}`), {
+			return !ym(n) || !r ? null : (e.dataset.value || (e.dataset.value = `item-${t + 1}`), {
 				item: e,
 				heading: e.querySelector("[data-ui-accordion-heading]"),
 				trigger: n,
@@ -7249,7 +7325,7 @@ var cm = {
 		return this.items().find((t) => t.trigger === e) ?? null;
 	},
 	initialValues() {
-		return this.props.mode === "multiple" && this.props.defaultValues ? this.normalizeValues(um(this.props.defaultValues)) : this.props.mode === "single" && this.props.defaultValue ? this.normalizeValues([this.props.defaultValue]) : this.normalizeValues(this.items().filter((e) => Q.asBool({ value: e.item.dataset.open }) || e.item.dataset.state === "open").map((e) => e.value));
+		return this.props.mode === "multiple" && this.props.defaultValues ? this.normalizeValues(_m(this.props.defaultValues)) : this.props.mode === "single" && this.props.defaultValue ? this.normalizeValues([this.props.defaultValue]) : this.normalizeValues(this.items().filter((e) => Q.asBool({ value: e.item.dataset.open }) || e.item.dataset.state === "open").map((e) => e.value));
 	},
 	normalizeValues(e) {
 		let t = Array.from(new Set(e.filter(Boolean)));
@@ -7283,13 +7359,13 @@ var cm = {
 		this.$el.dataset.orientation = this.props.orientation, this.$el.dataset.iconPosition = this.props.iconPosition, this.$el.dataset.mode = this.props.mode, this.props.disabled ? this.$el.setAttribute("data-disabled", "") : this.$el.removeAttribute("data-disabled");
 	},
 	syncItem(e) {
-		let t = this.isItemOpen(e), n = dm(t), r = this.isItemDisabled(e), i = t && !this.canCollapseOpenItem(e);
+		let t = this.isItemOpen(e), n = vm(t), r = this.isItemDisabled(e), i = t && !this.canCollapseOpenItem(e);
 		if (e.item.dataset.state = n, e.item.dataset.orientation = this.props.orientation, e.item.className = Q.resolveStyle({
-			part: lm.parts.item,
+			part: gm.parts.item,
 			props: this.props,
 			className: e.item.dataset.class ?? ""
 		}), e.heading?.setAttribute("data-state", n), e.heading?.setAttribute("data-orientation", this.props.orientation), e.trigger.id ||= this.$id(`accordion-trigger-${e.value}`), e.content.id ||= this.$id(`accordion-content-${e.value}`), e.trigger.type = "button", e.trigger.dataset.state = n, e.trigger.dataset.orientation = this.props.orientation, e.trigger.className = Q.resolveStyle({
-			part: lm.parts.trigger,
+			part: gm.parts.trigger,
 			props: this.props,
 			className: e.trigger.dataset.class ?? ""
 		}), e.trigger.setAttribute("aria-expanded", t ? "true" : "false"), e.trigger.setAttribute("aria-controls", e.content.id), e.content.dataset.state = n, e.content.dataset.orientation = this.props.orientation, e.content.setAttribute("aria-labelledby", e.trigger.id), this.syncContent(e.content, t), r) {
@@ -7387,14 +7463,14 @@ var cm = {
 			detail: t
 		});
 	}
-}), mm = (e) => {
-	e.data("UiAccordion", () => pm());
+}), xm = (e) => {
+	e.data("UiAccordion", () => bm());
 };
 Y({ definition: {
 	component: "ui.button",
 	parts: {
 		root: {
-			base: ["relative inline-flex min-w-0 shrink-0 select-none items-center gap-2 whitespace-nowrap rounded-3 font-normal outline-none", "focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 focus-visible:ring-offset-app"],
+			base: ["relative inline-flex min-w-0 shrink-0 select-none items-center gap-2 whitespace-nowrap font-normal outline-none", "focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 focus-visible:ring-offset-app"],
 			variants: {
 				align: {
 					start: "justify-start",
@@ -7413,18 +7489,16 @@ Y({ definition: {
 					false: ""
 				},
 				variant: {
-					default: "bg-surface text-foreground shadow-border hover:shadow-border-hover",
-					outline: "bg-surface text-foreground shadow-border hover:shadow-border-hover",
-					subtle: "bg-base-a2 text-foreground shadow-none",
-					filled: "shadow-none",
-					ghost: "bg-transparent text-foreground shadow-none",
+					ghost: "bg-transparent shadow-none",
+					soft: "shadow-none",
+					surface: "shadow-border hover:shadow-border-hover",
+					outline: "bg-transparent shadow-none ring-1 ring-inset",
+					solid: "shadow-none",
 					link: "bg-transparent px-0 shadow-none"
 				},
 				color: {
 					neutral: "",
 					accent: "",
-					success: "",
-					warning: "",
 					danger: ""
 				},
 				insetLeft: {
@@ -7515,6 +7589,7 @@ Y({ definition: {
 					},
 					class: "w-control-xlg px-0"
 				},
+				...Qp,
 				{
 					when: {
 						insetLeft: !0,
@@ -7587,24 +7662,108 @@ Y({ definition: {
 				},
 				{
 					when: {
-						variant: "filled",
+						variant: "ghost",
+						color: "neutral"
+					},
+					class: "text-foreground"
+				},
+				{
+					when: {
+						variant: "ghost",
 						color: "accent"
 					},
-					class: "bg-accent-solid text-accent-contrast shadow-1"
+					class: "text-accent-text"
 				},
 				{
 					when: {
-						variant: "filled",
+						variant: "ghost",
 						color: "danger"
 					},
-					class: "bg-danger-solid text-danger-contrast shadow-1"
+					class: "text-danger-text"
 				},
 				{
 					when: {
-						variant: "filled",
+						variant: "soft",
 						color: "neutral"
 					},
-					class: "bg-base-a3 text-foreground"
+					class: "bg-base-a2 text-foreground"
+				},
+				{
+					when: {
+						variant: "soft",
+						color: "accent"
+					},
+					class: "bg-accent-surface text-accent-text"
+				},
+				{
+					when: {
+						variant: "soft",
+						color: "danger"
+					},
+					class: "bg-danger-surface text-danger-text"
+				},
+				{
+					when: {
+						variant: "surface",
+						color: "neutral"
+					},
+					class: "bg-control text-foreground"
+				},
+				{
+					when: {
+						variant: "surface",
+						color: "accent"
+					},
+					class: "bg-control text-accent-text"
+				},
+				{
+					when: {
+						variant: "surface",
+						color: "danger"
+					},
+					class: "bg-control text-danger-text"
+				},
+				{
+					when: {
+						variant: "outline",
+						color: "neutral"
+					},
+					class: "text-foreground ring-border-interactive"
+				},
+				{
+					when: {
+						variant: "outline",
+						color: "accent"
+					},
+					class: "text-accent-text ring-accent-border"
+				},
+				{
+					when: {
+						variant: "outline",
+						color: "danger"
+					},
+					class: "text-danger-text ring-danger-border"
+				},
+				{
+					when: {
+						variant: "solid",
+						color: "neutral"
+					},
+					class: "bg-base-12 text-base-1 shadow-1"
+				},
+				{
+					when: {
+						variant: "solid",
+						color: "accent"
+					},
+					class: "bg-accent-solid text-accent-contrast shadow-1"
+				},
+				{
+					when: {
+						variant: "solid",
+						color: "danger"
+					},
+					class: "bg-danger-solid text-danger-contrast shadow-1"
 				},
 				{
 					when: {
@@ -7625,14 +7784,15 @@ Y({ definition: {
 						variant: "link",
 						color: "danger"
 					},
-					class: "text-danger-text hover:text-danger-contrast"
+					class: "text-danger-text hover:text-danger-12"
 				}
 			],
 			defaults: {
 				align: "center",
 				size: "md",
+				radius: "md",
 				padded: !0,
-				variant: "default",
+				variant: "surface",
 				color: "neutral",
 				insetLeft: !1,
 				insetRight: !1,
@@ -7664,8 +7824,7 @@ Y({ definition: {
 } });
 //#endregion
 //#region src/components/button/index.ts
-var hm = "[data-ui-button]:not([data-ui-loading-mode=\"false\"])", gm = [
-	"hx-",
+var Sm = "[data-ui-button]:not([data-ui-loading-mode=\"false\"])", Cm = [
 	"data-on",
 	"data-bind",
 	"data-ref",
@@ -7674,47 +7833,37 @@ var hm = "[data-ui-button]:not([data-ui-loading-mode=\"false\"])", gm = [
 	"data-request",
 	"data-ui-request",
 	"wire:"
-], _m = [
-	"ui:request-complete",
-	"ui:loading-complete",
-	"htmx:afterRequest",
-	"htmx:sendError",
-	"htmx:responseError",
-	"htmx:timeout",
-	"htmx:abort",
-	"datastar:afterRequest",
-	"datastar:responseError"
-], vm = null, ym = (e) => e instanceof HTMLButtonElement || e instanceof HTMLAnchorElement, bm = (e) => {
+], wm = ["ui:request-complete", "ui:loading-complete"], Tm = null, Em = (e) => e instanceof HTMLButtonElement || e instanceof HTMLAnchorElement, Dm = (e) => {
 	if (!(e instanceof Element)) return null;
-	let t = e.closest(hm);
-	return ym(t) ? t : null;
-}, xm = (e) => e.getAttributeNames().some((e) => gm.some((t) => e.startsWith(t))), Sm = (e) => e instanceof HTMLButtonElement && e.type === "submit", Cm = (e) => e.dataset.uiLoadingMode === "true" || Sm(e) || xm(e), wm = (e) => e.dataset.uiSubmitting === "true" || e.getAttribute("aria-disabled") === "true" || e.hasAttribute("disabled"), Tm = (e) => {
+	let t = e.closest(Sm);
+	return Em(t) ? t : null;
+}, Om = (e) => e.getAttributeNames().some((e) => Cm.some((t) => e.startsWith(t))), km = (e) => e instanceof HTMLButtonElement && e.type === "submit", Am = (e) => e instanceof HTMLButtonElement && (e.dataset.uiConfirm !== void 0 || e.form?.dataset.uiConfirm !== void 0), jm = (e, t) => t?.dataset.uiConfirm !== void 0 || e?.dataset.uiConfirm !== void 0, Mm = (e) => e.dataset.uiLoadingMode === "true" || km(e) || Om(e), Nm = (e) => e.dataset.uiSubmitting === "true" || e.getAttribute("aria-disabled") === "true" || e.hasAttribute("disabled"), Pm = (e) => e.dataset.uiSubmitting === "true" || e.hasAttribute("disabled"), Fm = (e) => {
 	e.dataset.uiSubmitting = "true", e.setAttribute("data-ui-loading", ""), e.setAttribute("aria-disabled", "true"), e.setAttribute("aria-busy", "true"), e.dispatchEvent(new CustomEvent("ui:loading-start", { bubbles: !0 })), e instanceof HTMLButtonElement ? e.disabled = !0 : e.tabIndex = -1;
-}, Em = (e) => {
+}, Im = (e) => {
 	e.dataset.initialLoading !== "true" && (delete e.dataset.uiSubmitting, e.removeAttribute("data-ui-loading"), e.removeAttribute("aria-busy"), e.dataset.initialDisabled !== "true" && (e.removeAttribute("aria-disabled"), e instanceof HTMLButtonElement ? e.disabled = !1 : e.removeAttribute("tabindex"), e.dispatchEvent(new CustomEvent("ui:loading-end", { bubbles: !0 }))));
-}, Dm = (e, t) => {
+}, Lm = (e, t) => {
 	window.setTimeout(() => {
-		!e.isConnected || wm(e) || Tm(e);
+		!e.isConnected || Pm(e) || Fm(e);
 	}, 0);
-}, Om = (e) => {
-	let t = bm(e.target);
-	if (!(!t || !Cm(t))) {
-		if (wm(t)) {
+}, Rm = (e) => {
+	let t = Dm(e.target);
+	if (!(!t || !Mm(t))) {
+		if (Nm(t)) {
 			e.preventDefault(), e.stopImmediatePropagation();
 			return;
 		}
-		t instanceof HTMLButtonElement && t.form && !t.form.checkValidity() || Dm(t, e);
+		t instanceof HTMLButtonElement && t.form && !t.form.checkValidity() || Am(t) || Lm(t, e);
 	}
-}, km = (e) => {
-	let t = e, n = ym(t.submitter) ? t.submitter : null, r = e.target instanceof HTMLFormElement ? e.target : null, i = n?.matches(hm) ? n : r?.querySelector(hm) ?? null;
-	!i || !Sm(i) || Dm(i, e);
-}, Am = () => {
-	document.querySelectorAll("[data-ui-button][data-ui-submitting=\"true\"]").forEach((e) => Em(e));
-}, jm = () => {
-	vm ||= (document.addEventListener("click", Om, !0), document.addEventListener("submit", km), _m.forEach((e) => document.addEventListener(e, Am)), () => {
-		document.removeEventListener("click", Om, !0), document.removeEventListener("submit", km), _m.forEach((e) => document.removeEventListener(e, Am)), vm = null;
+}, zm = (e) => {
+	let t = e, n = t.submitter instanceof HTMLElement ? t.submitter : null, r = Em(n) ? n : null, i = e.target instanceof HTMLFormElement ? e.target : null, a = r ? r.matches(Sm) ? r : null : i?.querySelector(Sm) ?? null;
+	e.defaultPrevented && jm(i, n) || !a || !km(a) || Lm(a, e);
+}, Bm = () => {
+	document.querySelectorAll("[data-ui-button][data-ui-submitting=\"true\"]").forEach((e) => Im(e));
+}, Vm = () => {
+	Tm ||= (document.addEventListener("click", Rm, !0), document.addEventListener("submit", zm, !0), wm.forEach((e) => document.addEventListener(e, Bm)), () => {
+		document.removeEventListener("click", Rm, !0), document.removeEventListener("submit", zm, !0), wm.forEach((e) => document.removeEventListener(e, Bm)), Tm = null;
 	});
-}, Mm = Hp, Nm = Wp, Pm = Up, Fm = Fp, Im = Wp, Lm = {
+}, Hm = Hp, Um = Wp, Wm = Up, Gm = Fp, Km = Wp, qm = {
 	value: G.default("on"),
 	name: G,
 	label: G,
@@ -7725,10 +7874,10 @@ var hm = "[data-ui-button]:not([data-ui-loading-mode=\"false\"])", gm = [
 	required: q,
 	invalid: q,
 	indicator: q.default(!0),
-	placement: J(Pm, "leading"),
+	placement: J(Wm, "leading"),
 	icon: G,
-	variant: J(Im, "default"),
-	size: J(Fm, "md"),
+	variant: J(Km, "default"),
+	size: J(Gm, "md"),
 	inputClass: G,
 	indicatorClass: G,
 	indicatorIconClass: G,
@@ -7738,22 +7887,22 @@ var hm = "[data-ui-button]:not([data-ui-loading-mode=\"false\"])", gm = [
 	descriptionClass: G,
 	class: G
 };
-({ ...Lm });
-var Rm = {
+({ ...qm });
+var Jm = {
 	name: G,
-	orientation: J(Mm, "vertical"),
-	variant: J(Nm, "default"),
+	orientation: J(Hm, "vertical"),
+	variant: J(Um, "default"),
 	indicator: q.default(!0),
-	placement: J(Pm, "leading"),
+	placement: J(Wm, "leading"),
 	disabled: q,
 	required: q,
 	invalid: q,
 	class: G
 };
-J(Fm, "md");
+J(Gm, "md");
 //#endregion
 //#region src/components/checkbox/index.ts
-var zm = (e) => {
+var Ym = (e) => {
 	let t = e.querySelector("[data-ui-checkbox-input]");
 	return t ? {
 		root: e,
@@ -7766,7 +7915,7 @@ var zm = (e) => {
 		required: e.hasAttribute("data-required") || t.required,
 		invalid: e.hasAttribute("data-invalid") || t.getAttribute("aria-invalid") === "true"
 	} : null;
-}, Bm = (e, t = {}) => {
+}, Xm = (e, t = {}) => {
 	let n = t.disabled ?? e.disabled, r = t.required ?? e.required, i = t.invalid ?? e.invalid, a = e.input.indeterminate || e.root.hasAttribute("data-indeterminate"), o = e.input.checked && !a, s = a ? "indeterminate" : o ? "checked" : "unchecked";
 	e.input.indeterminate = a, Q.syncNativeControl({
 		input: e.input,
@@ -7833,13 +7982,13 @@ var zm = (e) => {
 		el: e.indeterminateIcon,
 		attr: "data-checked"
 	}));
-}, Vm = () => ({
+}, Zm = () => ({
 	props: null,
 	listeners: [],
 	init() {
 		this.props = W({
 			el: this.$el,
-			schema: Lm
+			schema: qm
 		});
 		let e = this.input();
 		(this.props.indeterminate || this.$el.hasAttribute("data-indeterminate")) && (e.indeterminate = !0), Q.addListener({
@@ -7860,26 +8009,26 @@ var zm = (e) => {
 		return e;
 	},
 	item() {
-		let e = zm(this.$el);
+		let e = Ym(this.$el);
 		if (!e) throw Error("Checkbox requires a native checkbox input.");
 		return e;
 	},
 	sync() {
 		let e = this.item();
-		this.props.name && (e.input.name = this.props.name), this.props.value && (e.input.value = this.props.value), Bm(e, {
+		this.props.name && (e.input.name = this.props.name), this.props.value && (e.input.value = this.props.value), Xm(e, {
 			disabled: this.props.disabled || e.disabled,
 			required: this.props.required || e.required,
 			invalid: this.props.invalid || e.invalid
 		});
 	}
-}), Hm = () => ({
+}), Qm = () => ({
 	props: null,
 	listeners: [],
 	observer: null,
 	init() {
 		this.props = W({
 			el: this.$el,
-			schema: Rm
+			schema: Jm
 		}), Q.addListener({
 			target: this.$el,
 			event: "change",
@@ -7897,7 +8046,7 @@ var zm = (e) => {
 		this.props.disconnect(), this.listeners.forEach((e) => e()), this.listeners = [], this.observer?.disconnect();
 	},
 	items() {
-		return Array.from(this.$el.querySelectorAll("[data-ui-checkbox]")).map(zm).filter((e) => e !== null);
+		return Array.from(this.$el.querySelectorAll("[data-ui-checkbox]")).map(Ym).filter((e) => e !== null);
 	},
 	sync() {
 		let e = this.$el;
@@ -7915,15 +8064,15 @@ var zm = (e) => {
 		}), this.items().forEach((e) => this.syncItem(e));
 	},
 	syncItem(e) {
-		this.props.name && !e.name && (e.input.name = this.props.name), Bm(e, {
+		this.props.name && !e.name && (e.input.name = this.props.name), Xm(e, {
 			disabled: this.props.disabled || e.disabled,
 			required: this.props.required || e.required,
 			invalid: this.props.invalid || e.invalid
 		});
 	}
-}), Um = (e) => {
-	e.data("UiCheckbox", () => Vm()), e.data("UiCheckboxGroup", () => Hm());
-}, Wm = Fp, Gm = Ip, Km = Bp, qm = zp, Jm = Lp, Ym = {
+}), $m = (e) => {
+	e.data("UiCheckbox", () => Zm()), e.data("UiCheckboxGroup", () => Qm());
+}, eh = Fp, th = Ip, nh = qp, rh = Bp, ih = zp, ah = Lp, oh = {
 	name: G,
 	value: G,
 	values: G,
@@ -7939,47 +8088,50 @@ var zm = (e) => {
 	filter: q.default(!0),
 	path: G,
 	loop: q.default(!0),
-	size: J(Wm, "lg"),
-	variant: J(Gm, "outline"),
-	side: J(Km, "bottom"),
-	align: J(qm, "start"),
+	size: J(eh, "lg"),
+	variant: J(th, "outline"),
+	radius: J(nh, "md"),
+	side: J(rh, "bottom"),
+	align: J(ih, "start"),
 	offset: K.clamp(-100, 100).default(0),
 	gap: K.clamp(0, 50).default(4),
 	icon: G,
 	iconTrailing: G.default("chevron__down"),
-	iconVariant: J(Jm, "outline"),
+	iconVariant: J(ah, "outline"),
 	inputClass: G,
 	listboxClass: G,
 	chipClass: G,
 	class: G
 };
-J(Jm, "outline");
+J(ah, "outline");
 //#endregion
 //#region src/components/combobox/styles.ts
-var Xm = Y({ definition: {
+var sh = Y({ definition: {
 	component: "ui.combobox",
 	parts: {
 		root: { base: "relative inline-grid w-full min-w-0" },
 		control: {
-			base: Kp,
+			base: $p,
 			variants: {
-				size: Jp,
-				variant: Yp
+				size: tm,
+				variant: nm
 			},
 			defaults: {
 				size: "lg",
-				variant: "outline"
-			}
+				variant: "outline",
+				radius: "md"
+			},
+			compounds: Qp
 		},
 		chips: { base: "-ml-1.5 flex min-w-0 flex-wrap items-center gap-1" },
-		chip: { base: ["inline-flex h-control-sm max-w-48 min-w-0 items-center gap-1 rounded-2 border border-border bg-base-a2 px-2", "text-sm font-normal text-foreground"] },
+		chip: { base: ["inline-flex h-control-sm max-w-48 min-w-0 items-center gap-1 rounded-2 border border-border bg-current/10 px-2", "text-sm font-normal text-foreground"] },
 		chipLabel: { base: "min-w-0 flex-1" },
 		chipRemove: { base: [
 			"-mr-1 inline-flex size-control-xs shrink-0 items-center justify-center rounded-2 border-0 bg-transparent",
 			"text-icon outline-none hover:bg-base-a3 hover:text-foreground",
 			"focus-visible:ring-2 focus-visible:ring-focus"
 		] },
-		input: { base: ["w-full min-w-16 flex-1", Xp] },
+		input: { base: ["w-full min-w-16 flex-1", rm] },
 		icon: {
 			base: "size-icon shrink-0 fill-current text-icon",
 			variants: { position: {
@@ -7988,27 +8140,27 @@ var Xm = Y({ definition: {
 			} },
 			defaults: { position: "leading" }
 		},
-		clear: { base: Zp },
-		listbox: { base: [$p, "auto-rows-min content-start max-h-combobox-listbox min-w-48 gap-1 overflow-auto p-popover"] },
-		option: { base: tm },
+		clear: { base: im },
+		listbox: { base: [om, "auto-rows-min content-start max-h-combobox-listbox min-w-48 gap-1 overflow-auto p-popover"] },
+		option: { base: cm },
 		optionLabel: { base: "min-w-0 flex-1" },
 		optionMeta: { base: "ml-auto text-menu-item-muted" },
 		optionIcon: {
-			base: nm,
+			base: lm,
 			variants: { position: {
 				leading: "",
 				trailing: "ml-auto"
 			} },
 			defaults: { position: "leading" }
 		},
-		optionIndicator: { base: rm },
+		optionIndicator: { base: um },
 		group: { base: "grid auto-rows-min content-start gap-1" },
 		label: { base: "px-menu-item-x py-1 text-menu-heading-fg" },
 		empty: { base: "px-menu-item-x py-2 text-sm text-foreground-muted" },
 		separatorRoot: { base: "-mx-popover my-popover h-px" },
 		separatorRule: { base: "h-px w-full border-0 bg-menu-separator" }
 	}
-} }), Zm = () => ({
+} }), ch = () => ({
 	isOpen: !1,
 	query: "",
 	selectedValues: [],
@@ -8026,7 +8178,7 @@ var Xm = Y({ definition: {
 	init() {
 		this.props = W({
 			el: this.$el,
-			schema: Ym
+			schema: oh
 		}), this.inputId = this.$id("combobox-input"), this.listboxId = this.$id("combobox-listbox"), this.isOpen = this.props.open;
 		let e = this.options(), t = this.props.multiple ? [...Q.splitControlValues(this.props.values), ...Q.splitControlValues(this.props.value)] : Q.splitControlValues(this.props.value).slice(0, 1), n = e.filter((e) => Q.asBool({ value: e.el.dataset.selected })).map((e) => e.value);
 		this.selectedValues = t.length > 0 ? t : n, this.props.multiple || (this.selectedValues = this.selectedValues.slice(0, 1)), this.selectedLabels = this.selectedValues.map((t) => e.find((e) => e.value === t)?.label ?? t), this.query = this.props.multiple ? "" : this.selectedLabels[0] ?? "", this.popover = Q.createAnchoredPopover({
@@ -8046,8 +8198,8 @@ var Xm = Y({ definition: {
 		this.props.disconnect(), this.listboxMotion?.destroy(), this.listeners.forEach((e) => e()), this.listeners = [], this.observer?.disconnect(), this.unmount();
 	},
 	get root() {
-		return Q.props({ inputs: [X({
-			part: Xm.parts.root,
+		return Q.mergeBindings({ inputs: [X({
+			part: sh.parts.root,
 			props: this.props,
 			className: this.props.class
 		}), {
@@ -8306,7 +8458,7 @@ var Xm = Y({ definition: {
 	},
 	syncControl() {
 		let e = this.control(), t = X({
-			part: Xm.parts.control,
+			part: sh.parts.control,
 			props: this.props
 		});
 		e.setAttribute("class", t), e.setAttribute("data-ui-control", ""), e.setAttribute("data-ui-combobox-control", ""), e.dataset.state = this.isOpen ? "open" : "closed", e.dataset.variant = this.props.variant, Q.syncControlPresence({
@@ -8320,7 +8472,7 @@ var Xm = Y({ definition: {
 	},
 	syncListbox() {
 		let e = this.listbox(), t = X({
-			part: Xm.parts.listbox,
+			part: sh.parts.listbox,
 			props: this.props,
 			className: this.props.listboxClass
 		});
@@ -8353,10 +8505,10 @@ var Xm = Y({ definition: {
 		});
 		if (n === this.renderedChipsKey || (this.renderedChipsKey = n, e.replaceChildren(), e.hidden)) return;
 		let r = X({
-			part: Xm.parts.chip,
+			part: sh.parts.chip,
 			props: {},
 			className: this.props.chipClass
-		}), i = X({ part: Xm.parts.chipLabel }), a = X({ part: Xm.parts.chipRemove });
+		}), i = X({ part: sh.parts.chipLabel }), a = X({ part: sh.parts.chipRemove });
 		this.selectedValues.forEach((t, n) => {
 			let o = this.selectedLabels[n] ?? t, s = document.createElement("span");
 			s.className = r, s.setAttribute("data-ui-combobox-chip", "");
@@ -8472,23 +8624,23 @@ var Xm = Y({ definition: {
 	optionValue(e, t) {
 		return e.dataset.value || t;
 	}
-}), Qm = (e) => {
-	e.data("UiCombobox", () => Zm());
-}, $m = ["single", "range"], eh = ["enhanced", "native"], th = [
+}), lh = (e) => {
+	e.data("UiCombobox", () => ch());
+}, uh = ["single", "range"], dh = ["enhanced", "native"], fh = [
 	"popover",
 	"modal",
 	"native"
-], nh = ["select", "confirm"], rh = ["neutral", "accent"], ih = [
+], ph = ["select", "confirm"], mh = ["neutral", "accent"], hh = qp, gh = [
 	"left",
 	"right",
 	"top",
 	"bottom"
-], ah = {
+], _h = {
 	name: G,
 	value: G,
 	startName: G,
 	endName: G,
-	mode: J($m, "single"),
+	mode: J(uh, "single"),
 	placeholder: G,
 	min: G,
 	max: G,
@@ -8512,12 +8664,13 @@ var Xm = Y({ definition: {
 	align: J(zp, "start"),
 	offset: K.clamp(-100, 100).default(0),
 	gap: K.clamp(0, 50).default(4),
-	mobile: J(th, "modal"),
-	variant: J(eh, "enhanced"),
-	color: J(rh, "neutral"),
-	close: J(nh, "select"),
+	mobile: J(fh, "modal"),
+	variant: J(dh, "enhanced"),
+	color: J(mh, "neutral"),
+	radius: J(hh, "md"),
+	close: J(ph, "select"),
 	presets: vu.array([]),
-	presetsPosition: J(ih, "left"),
+	presetsPosition: J(gh, "left"),
 	preset: G,
 	presetName: G,
 	triggerClass: G,
@@ -8529,30 +8682,38 @@ var Xm = Y({ definition: {
 	class: G,
 	form: G
 };
-J(ih, "left");
+J(gh, "left");
 //#endregion
 //#region src/components/date-picker/styles.ts
-var oh = Y({ definition: {
+var vh = Y({ definition: {
 	component: "ui.date-picker",
 	parts: {
 		root: { base: "relative inline-grid w-full min-w-0" },
-		trigger: { base: [
-			Kp,
-			qp,
-			Jp.lg,
-			Yp.outline,
-			"text-left"
-		] },
-		customTrigger: { base: [
-			"inline-flex min-h-control-lg min-w-control-lg shrink-0 items-center justify-center gap-control rounded-control border border-control-border bg-control px-2 text-sm text-control-fg shadow-control outline-none",
-			"hover:bg-control-hover hover:text-control-fg",
-			"focus-visible:ring-2 focus-visible:ring-focus",
-			"data-disabled:cursor-not-allowed data-disabled:opacity-50"
-		] },
-		input: { base: ["min-w-0 flex-1 text-sm", Xp] },
+		trigger: {
+			base: [
+				$p,
+				em,
+				tm.lg,
+				nm.outline,
+				"text-left"
+			],
+			variants: { radius: Zp.lg },
+			defaults: { radius: "md" }
+		},
+		customTrigger: {
+			base: [
+				"inline-flex min-h-control-lg min-w-control-lg shrink-0 items-center justify-center gap-control bg-control px-2 text-sm text-control-fg shadow-control outline-none",
+				"hover:bg-control-hover hover:text-control-fg",
+				"focus-visible:ring-2 focus-visible:ring-focus",
+				"data-disabled:cursor-not-allowed data-disabled:opacity-50"
+			],
+			variants: { radius: Zp.lg },
+			defaults: { radius: "md" }
+		},
+		input: { base: ["min-w-0 flex-1 text-sm", rm] },
 		icon: { base: "size-icon shrink-0 fill-current text-icon" },
-		action: { base: Zp },
-		popover: { base: [$p, "max-h-lg overflow-hidden"] },
+		action: { base: im },
+		popover: { base: [om, "max-h-lg overflow-hidden"] },
 		panel: {
 			base: "grid min-w-72 max-w-[calc(100vw-2rem)] gap-0 overflow-hidden",
 			variants: {
@@ -8588,31 +8749,35 @@ var oh = Y({ definition: {
 		calendarWrap: { base: "relative grid size-full place-items-center overflow-x-auto overflow-y-auto p-popover" },
 		calendar: { base: "grid max-w-full gap-2 text-sm text-foreground" },
 		presets: { base: ["grid content-start gap-1 border-popover-border p-popover", "sm:data-[position=left]:border-r sm:data-[position=right]:border-l data-[position=top]:border-b data-[position=bottom]:border-t"] },
-		preset: { base: tm },
+		preset: { base: cm },
 		footer: { base: "flex items-center justify-end gap-2 border-t border-popover-border p-popover" },
 		nativeWrapper: { base: "relative w-full min-w-0" },
-		native: { base: [Qp] }
+		native: {
+			base: [am, tm.lg],
+			variants: { radius: Zp.lg },
+			defaults: { radius: "md" }
+		}
 	}
-} }), sh = /^\d{4}-\d{2}-\d{2}$/, ch = /^\d{4}-\d{2}-\d{2}\/\d{4}-\d{2}-\d{2}$/, lh = 100, uh = 10, dh = null, fh = () => typeof customElements > "u" || customElements.get("calendar-ctx") ? Promise.resolve() : (dh ??= import("./chunks/cally-TZl4LpyH.js").then(() => void 0).catch((e) => {
+} }), yh = /^\d{4}-\d{2}-\d{2}$/, bh = /^\d{4}-\d{2}-\d{2}\/\d{4}-\d{2}-\d{2}$/, xh = 100, Sh = 10, Ch = null, wh = () => typeof customElements > "u" || customElements.get("calendar-ctx") ? Promise.resolve() : (Ch ??= import("./chunks/cally-TZl4LpyH.js").then(() => void 0).catch((e) => {
 	if (!customElements.get("calendar-ctx")) throw e;
-}), dh), ph = (e) => {
+}), Ch), Th = (e) => {
 	let [t = "", n = ""] = e.split("/");
 	return [t, n];
-}, mh = (e, t) => e === "" || (t ? ch.test(e) : sh.test(e)), hh = () => (/* @__PURE__ */ new Date()).getFullYear(), gh = () => `${hh() - lh}-01-01`, _h = () => `${hh() + uh}-12-31`, vh = () => (/* @__PURE__ */ new Date()).toISOString().slice(0, 10), yh = (e, t) => {
-	if (!e.match(sh)) return "";
+}, Eh = (e, t) => e === "" || (t ? bh.test(e) : yh.test(e)), Dh = () => (/* @__PURE__ */ new Date()).getFullYear(), Oh = () => `${Dh() - xh}-01-01`, kh = () => `${Dh() + Sh}-12-31`, Ah = () => (/* @__PURE__ */ new Date()).toISOString().slice(0, 10), jh = (e, t) => {
+	if (!e.match(yh)) return "";
 	let n = /* @__PURE__ */ new Date(`${e}T00:00:00.000Z`);
 	return new Intl.DateTimeFormat(t || void 0, {
 		month: "long",
 		timeZone: "UTC",
 		year: "numeric"
 	}).format(n);
-}, bh = (e) => ({
+}, Mh = (e) => ({
 	value: e.dataset.value ?? "",
 	label: e.dataset.label ?? e.textContent?.trim() ?? "",
 	start: e.dataset.start ?? "",
 	end: e.dataset.end ?? "",
 	disabled: Q.asBool({ value: e.dataset.disabled })
-}), xh = () => ({
+}), Nh = () => ({
 	isOpen: !1,
 	value: "",
 	pendingValue: "",
@@ -8629,7 +8794,7 @@ var oh = Y({ definition: {
 	init() {
 		this.props = W({
 			el: this.$el,
-			schema: ah
+			schema: _h
 		}), this.value = this.props.value, this.pendingValue = this.value, this.presetValue = this.props.preset, this.triggerId = this.$id("date-picker-trigger"), this.popoverId = this.$id("date-picker-popover"), this.popover = Q.createAnchoredPopover({
 			reference: () => this.trigger(),
 			floating: () => this.popoverEl(),
@@ -8641,14 +8806,14 @@ var oh = Y({ definition: {
 		}), this.popoverMotion = Q.motion.createPresenceLifecycle({
 			element: () => this.popoverEl(),
 			preset: "popover"
-		}), this.setup(), this.sync(), fh().then(() => this.sync());
+		}), this.setup(), this.sync(), wh().then(() => this.sync());
 	},
 	destroy() {
 		this.props.disconnect(), this.popoverMotion?.destroy(), this.listeners.forEach((e) => e()), this.listeners = [], this.popover?.unmount();
 	},
 	get root() {
-		return Q.props({ inputs: [X({
-			part: oh.parts.root,
+		return Q.mergeBindings({ inputs: [X({
+			part: vh.parts.root,
 			props: this.props,
 			className: this.props.class
 		}), {
@@ -8687,7 +8852,7 @@ var oh = Y({ definition: {
 		return this.$el.querySelector("[data-ui-date-picker-preset-inputs]");
 	},
 	presetItems() {
-		let e = Array.from(this.$el.querySelectorAll("[data-ui-date-picker-preset]")).map(bh).filter((e) => e.value && e.start && e.end);
+		let e = Array.from(this.$el.querySelectorAll("[data-ui-date-picker-preset]")).map(Mh).filter((e) => e.value && e.start && e.end);
 		return e.length ? e : this.props.presets;
 	},
 	isRange() {
@@ -8699,7 +8864,7 @@ var oh = Y({ definition: {
 	displayValue() {
 		if (!this.value) return "";
 		if (!this.isRange()) return this.value;
-		let [e, t] = ph(this.value);
+		let [e, t] = Th(this.value);
 		return e && t ? `${e} to ${t}` : this.value;
 	},
 	effectivePlaceholder() {
@@ -8714,7 +8879,7 @@ var oh = Y({ definition: {
 		this.isOpen = !0, this.pendingValue = this.value, this.sync(), t || this.popoverMotion?.enter({ before: () => {
 			let e = this.popoverEl();
 			e.hidden = !1, e.showPopover?.(), this.popover?.mount();
-		} }), e instanceof KeyboardEvent && fh().then(() => {
+		} }), e instanceof KeyboardEvent && wh().then(() => {
 			queueMicrotask(() => this.calendar()?.focus({ preventScroll: !0 }));
 		}), Q.dispatch({
 			el: this.$el,
@@ -8775,7 +8940,7 @@ var oh = Y({ definition: {
 	},
 	selectPreset(e, t) {
 		t?.preventDefault();
-		let n = bh(e);
+		let n = Mh(e);
 		if (n.disabled) return;
 		let r = this.isRange() ? `${n.start}/${n.end}` : n.start;
 		this.presetValue = n.value, this.commitValue(r), this.close();
@@ -8784,7 +8949,7 @@ var oh = Y({ definition: {
 		let t = e.target;
 		if (!(t instanceof HTMLInputElement)) return;
 		let n = t.value.trim(), r = this.isRange() ? n.replace(/\s+to\s+/i, "/") : n;
-		mh(r, this.isRange()) && r !== this.value && this.commitValue(r);
+		Eh(r, this.isRange()) && r !== this.value && this.commitValue(r);
 	},
 	handleKeydown(e) {
 		if ((e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && !this.isOpen) {
@@ -8795,7 +8960,7 @@ var oh = Y({ definition: {
 	},
 	handleCalendarChange(e) {
 		let t = e.currentTarget;
-		this.pendingValue = t.value, this.isRange() && (this.liveMessage = this.pendingValue.includes("/") ? "Range selected" : "Start date selected"), this.closeMode() === "select" && (!this.isRange() || ch.test(this.pendingValue)) ? (this.commitValue(this.pendingValue), this.close()) : this.sync();
+		this.pendingValue = t.value, this.isRange() && (this.liveMessage = this.pendingValue.includes("/") ? "Range selected" : "Start date selected"), this.closeMode() === "select" && (!this.isRange() || bh.test(this.pendingValue)) ? (this.commitValue(this.pendingValue), this.close()) : this.sync();
 	},
 	handleCalendarFocus(e) {
 		let t = e.detail;
@@ -8827,9 +8992,9 @@ var oh = Y({ definition: {
 	syncCalendar() {
 		let e = this.calendar();
 		if (!e) return;
-		e.setAttribute("value", this.pendingValue), this.isRange() && !this.pendingValue && e.setAttribute("tentative", ""), e.setAttribute("months", String(this.effectiveMonths())), e.style.setProperty("--ui-date-picker-month-columns", String(this.effectiveMonths())), e.setAttribute("format-weekday", "short"), e.setAttribute("min", this.props.min || gh()), e.setAttribute("max", this.props.max || _h()), this.props.today && e.setAttribute("today", this.props.today);
-		let t = this.props.forceOpenTo ? this.props.openTo : this.value || this.props.openTo || this.props.today || vh();
-		e.setAttribute("focused-date", ph(t)[0]), this.props.locale && e.setAttribute("locale", this.props.locale), this.props.firstDayOfWeek >= 0 && e.setAttribute("first-day-of-week", String(this.props.firstDayOfWeek));
+		e.setAttribute("value", this.pendingValue), this.isRange() && !this.pendingValue && e.setAttribute("tentative", ""), e.setAttribute("months", String(this.effectiveMonths())), e.style.setProperty("--ui-date-picker-month-columns", String(this.effectiveMonths())), e.setAttribute("format-weekday", "short"), e.setAttribute("min", this.props.min || Oh()), e.setAttribute("max", this.props.max || kh()), this.props.today && e.setAttribute("today", this.props.today);
+		let t = this.props.forceOpenTo ? this.props.openTo : this.value || this.props.openTo || this.props.today || Ah();
+		e.setAttribute("focused-date", Th(t)[0]), this.props.locale && e.setAttribute("locale", this.props.locale), this.props.firstDayOfWeek >= 0 && e.setAttribute("first-day-of-week", String(this.props.firstDayOfWeek));
 		let n = !this.props.selectableHeader && this.effectiveMonths() === 1;
 		Q.setPresence({
 			el: e,
@@ -8858,12 +9023,12 @@ var oh = Y({ definition: {
 	},
 	syncCalendarHeading(e) {
 		let t = this.$el.querySelector("[data-ui-date-picker-calendar-heading]");
-		t && (t.textContent = yh(e || ph(this.value || this.props.openTo || this.props.today || vh())[0], this.props.locale));
+		t && (t.textContent = jh(e || Th(this.value || this.props.openTo || this.props.today || Ah())[0], this.props.locale));
 	},
 	syncTodayButton() {
 		let e = this.$el.querySelector("[data-ui-date-picker-calendar-today]"), t = this.$el.querySelector("[data-ui-date-picker-today-day]");
 		if (!e || !t) return;
-		let n = this.props.today || vh(), r = n.match(sh) ? String(Number(n.slice(-2))) : "";
+		let n = this.props.today || Ah(), r = n.match(yh) ? String(Number(n.slice(-2))) : "";
 		t.textContent = r, e.setAttribute("aria-label", r ? `Go to today, ${n}` : "Go to today");
 	},
 	syncHiddenInputs() {
@@ -8882,7 +9047,7 @@ var oh = Y({ definition: {
 			});
 			return;
 		}
-		let [t, n] = ph(this.value);
+		let [t, n] = Th(this.value);
 		if (this.props.startName || this.props.endName) {
 			let r = JSON.stringify({
 				startName: this.props.startName,
@@ -8929,7 +9094,7 @@ var oh = Y({ definition: {
 	syncPresets() {
 		let e = this.pendingValue || this.value;
 		Array.from(this.$el.querySelectorAll("[data-ui-date-picker-preset]")).forEach((t) => {
-			let n = bh(t), r = this.isRange() ? `${n.start}/${n.end}` : n.start;
+			let n = Mh(t), r = this.isRange() ? `${n.start}/${n.end}` : n.start;
 			Q.setPresence({
 				el: t,
 				attr: "data-selected",
@@ -9017,14 +9182,14 @@ var oh = Y({ definition: {
 			onDismiss: () => this.close()
 		}));
 	}
-}), Sh = (e) => {
-	e.data("UiDatePicker", () => xh());
-}, Ch = Y({ definition: {
+}), Ph = (e) => {
+	e.data("UiDatePicker", () => Nh());
+}, Fh = Y({ definition: {
 	component: "ui.menu",
 	parts: {
-		menu: { base: [$p, "auto-rows-min content-start min-w-48 gap-1 overflow-hidden p-popover"] },
+		menu: { base: [om, "auto-rows-min content-start min-w-48 gap-1 overflow-hidden p-popover"] },
 		item: {
-			base: [tm],
+			base: [cm],
 			variants: {
 				variant: {
 					default: "",
@@ -9048,7 +9213,7 @@ var oh = Y({ definition: {
 		itemLabel: { base: "min-w-0 flex-1" },
 		itemMeta: { base: "ml-auto text-menu-item-muted" },
 		itemIcon: {
-			base: nm,
+			base: lm,
 			variants: { position: {
 				leading: "",
 				trailing: "ml-auto"
@@ -9072,18 +9237,18 @@ var oh = Y({ definition: {
 			defaults: { orientation: "horizontal" }
 		}
 	}
-} }), wh = Bp, Th = zp, Eh = {
-	side: J(wh, "bottom"),
-	align: J(Th, "start"),
+} }), Ih = Bp, Lh = zp, Rh = {
+	side: J(Ih, "bottom"),
+	align: J(Lh, "start"),
 	offset: K.clamp(-100, 100).default(0),
 	gap: K.clamp(0, 50).default(4),
 	open: q,
 	disabled: q,
 	class: G
-}, Dh = Y({ definition: {
+}, zh = Y({ definition: {
 	component: "ui.dropdown",
 	parts: { root: { base: "contents" } }
-} }), Oh = () => ({
+} }), Bh = () => ({
 	isOpen: !1,
 	menuMotion: null,
 	triggerId: "",
@@ -9096,7 +9261,7 @@ var oh = Y({ definition: {
 	init() {
 		this.props = W({
 			el: this.$el,
-			schema: Eh
+			schema: Rh
 		}), this.triggerId = this.$id("dropdown-trigger"), this.menuId = this.$id("dropdown-menu"), this.collection = Q.createCollectionNavigation({
 			root: () => this.menuEl(),
 			itemSelector: "[data-ui-menu-item]",
@@ -9135,8 +9300,8 @@ var oh = Y({ definition: {
 		this.props.disconnect(), this.menuMotion?.destroy(), this.teardownTrigger(), this.teardownMenu(), this.unmount();
 	},
 	get root() {
-		return Q.props({ inputs: [X({
-			part: Dh.parts.root,
+		return Q.mergeBindings({ inputs: [X({
+			part: zh.parts.root,
 			props: this.props,
 			className: this.props.class
 		}), {
@@ -9146,8 +9311,8 @@ var oh = Y({ definition: {
 		}] });
 	},
 	menu(e) {
-		return Q.props({ inputs: [X({
-			part: Ch.parts.menu,
+		return Q.mergeBindings({ inputs: [X({
+			part: Fh.parts.menu,
 			props: {},
 			className: e.dataset.class
 		}), {
@@ -9162,8 +9327,8 @@ var oh = Y({ definition: {
 	},
 	menuItem(e) {
 		let t = e.dataset.variant || "default", n = e.dataset.color || "neutral", r = Q.asBool({ value: e.dataset.disabled }), i = e instanceof HTMLButtonElement ? e.getAttribute("type") || e.dataset.type || "button" : void 0;
-		return Q.props({ inputs: [X({
-			part: Ch.parts.item,
+		return Q.mergeBindings({ inputs: [X({
+			part: Fh.parts.item,
 			props: {
 				variant: t,
 				color: n
@@ -9339,14 +9504,14 @@ var oh = Y({ definition: {
 			return;
 		}
 		let n = Q.asBool({ value: this.menuEl().dataset.keepOpen });
-		(e.dataset.keepOpen === void 0 || e.dataset.keepOpen === "" ? n : Q.asBool({ value: e.dataset.keepOpen })) || this.close(t);
+		(e.dataset.keepOpen === void 0 || e.dataset.keepOpen === "" ? n : Q.asBool({ value: e.dataset.keepOpen })) || this.close();
 	}
-}), kh = (e) => {
-	e.data("UiDropdown", () => Oh());
-}, Ah = "input:not([type=\"hidden\"]), textarea, select, button, [data-ui-control-target]", jh = (e, t) => {
+}), Vh = (e) => {
+	e.data("UiDropdown", () => Bh());
+}, Hh = "input:not([type=\"hidden\"]), textarea, select, button, [data-ui-control-target]", Uh = (e, t) => {
 	let n = new Set((e ?? "").split(/\s+/).filter(Boolean));
 	return n.add(t), Array.from(n).join(" ");
-}, Mh = (e, t) => (e.id ||= `ui-${t}-${crypto.randomUUID()}`, e.id), Nh = () => ({
+}, Wh = (e, t) => (e.id ||= `ui-${t}-${crypto.randomUUID()}`, e.id), Gh = () => ({
 	observer: null,
 	listeners: [],
 	init() {
@@ -9359,22 +9524,22 @@ var oh = Y({ definition: {
 		this.observer?.disconnect(), this.listeners.forEach((e) => e()), this.listeners = [];
 	},
 	sync() {
-		let e = this.$el, t = Array.from(e.querySelectorAll(Ah)).filter((t) => !t.closest("[data-ui-field], [data-ui-fieldset]") || t.closest("[data-ui-field], [data-ui-fieldset]") === e)[0], n = e.querySelector(":scope > [data-ui-field-label]"), r = e.querySelector(":scope > [data-ui-fieldset-legend]"), i = Array.from(e.querySelectorAll(":scope > [data-ui-field-description]")), a = Array.from(e.querySelectorAll(":scope > [data-ui-field-error]")), o = [...i, ...a].filter((e) => !e.hasAttribute("hidden")).map((e) => Mh(e, e.hasAttribute("data-ui-field-error") ? "field-error" : "field-description"));
+		let e = this.$el, t = Array.from(e.querySelectorAll(Hh)).filter((t) => !t.closest("[data-ui-field], [data-ui-fieldset]") || t.closest("[data-ui-field], [data-ui-fieldset]") === e)[0], n = e.querySelector(":scope > [data-ui-field-label]"), r = e.querySelector(":scope > [data-ui-fieldset-legend]"), i = Array.from(e.querySelectorAll(":scope > [data-ui-field-description]")), a = Array.from(e.querySelectorAll(":scope > [data-ui-field-error]")), o = [...i, ...a].filter((e) => !e.hasAttribute("hidden")).map((e) => Wh(e, e.hasAttribute("data-ui-field-error") ? "field-error" : "field-description"));
 		if (t) {
-			let i = Mh(t, "control");
+			let i = Wh(t, "control");
 			if (n && !n.htmlFor && (n.htmlFor = i), r) {
-				let e = Mh(r, "fieldset-legend");
+				let e = Wh(r, "fieldset-legend");
 				Q.setAttribute({
 					el: t,
 					attr: "aria-labelledby",
-					value: jh(t.getAttribute("aria-labelledby"), e)
+					value: Uh(t.getAttribute("aria-labelledby"), e)
 				});
 			}
 			o.forEach((e) => {
 				Q.setAttribute({
 					el: t,
 					attr: "aria-describedby",
-					value: jh(t.getAttribute("aria-describedby"), e)
+					value: Uh(t.getAttribute("aria-describedby"), e)
 				});
 			}), e.hasAttribute("data-invalid") && !t.hasAttribute("aria-invalid") && t.setAttribute("aria-invalid", "true");
 		}
@@ -9382,19 +9547,19 @@ var oh = Y({ definition: {
 			Q.setAttribute({
 				el: e,
 				attr: "aria-describedby",
-				value: jh(e.getAttribute("aria-describedby"), t)
+				value: Uh(e.getAttribute("aria-describedby"), t)
 			});
 		});
 	}
-}), Ph = (e) => {
-	e.data("UiField", Nh);
+}), Kh = (e) => {
+	e.data("UiField", Gh);
 };
 //#endregion
 //#region node_modules/.pnpm/@atlaskit+pragmatic-drag-and-drop@2.0.1/node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/public-utils/external/file.js
-function Fh(e) {
+function qh(e) {
 	return e.source.types.includes("Files");
 }
-function Ih(e) {
+function Jh(e) {
 	return e.source.items.filter(function(e) {
 		return e.kind === "file";
 	}).map(function(e) {
@@ -9405,41 +9570,41 @@ function Ih(e) {
 }
 //#endregion
 //#region node_modules/.pnpm/@atlaskit+pragmatic-drag-and-drop@2.0.1/node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/util/changing-window/is-entering-window.js
-function Lh(e) {
+function Yh(e) {
 	var t = e.dragEnter, n = t.type, r = t.relatedTarget;
 	return n === "dragenter" ? Sd() ? wd({ dragEnter: t }) : r == null ? !0 : xd() ? Dd(r) : r instanceof HTMLIFrameElement : !1;
 }
 //#endregion
 //#region node_modules/.pnpm/@atlaskit+pragmatic-drag-and-drop@2.0.1/node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/adapter/external-adapter.js
-function Rh(e) {
+function Xh(e) {
 	var t = e.type, n = e.value;
 	return !(t === "application/vnd.pdnd" || t === "text/plain" && n === "pdnd:android-fallback");
 }
-function zh(e) {
+function Zh(e) {
 	return Array.from(e.types).filter(function(t) {
-		return Rh({
+		return Xh({
 			type: t,
 			value: e.getData(t)
 		});
 	});
 }
-function Bh(e) {
+function Qh(e) {
 	return Array.from(e.items).filter(function(t) {
-		return t.kind === "file" || Rh({
+		return t.kind === "file" || Xh({
 			type: t.type,
 			value: e.getData(t.type)
 		});
 	});
 }
-var Vh = !1, Hh = sf({
+var $h = !1, eg = sf({
 	typeKey: "external",
 	defaultDropEffect: "copy",
 	mount: function(e) {
 		return (0, Ku.bind)(window, {
 			type: "dragenter",
 			listener: function(t) {
-				if (!Vh && t.dataTransfer && e.canStart(t) && Lh({ dragEnter: t })) {
-					var n = zh(t.dataTransfer);
+				if (!$h && t.dataTransfer && e.canStart(t) && Yh({ dragEnter: t })) {
+					var n = Zh(t.dataTransfer);
 					if (n.length) {
 						var r = {
 							types: n,
@@ -9456,14 +9621,14 @@ var Vh = !1, Hh = sf({
 								payload: r,
 								getDropPayload: function(e) {
 									if (!e.dataTransfer) return r;
-									var t = Bh(e.dataTransfer), i = e.dataTransfer.getData.bind(e.dataTransfer);
+									var t = Qh(e.dataTransfer), i = e.dataTransfer.getData.bind(e.dataTransfer);
 									return {
 										types: n,
 										items: t,
 										getStringData: function(e) {
 											if (!n.includes(e)) return null;
 											var t = i(e);
-											return Rh({
+											return Xh({
 												type: e,
 												value: t
 											}) ? t : null;
@@ -9478,18 +9643,18 @@ var Vh = !1, Hh = sf({
 		});
 	}
 });
-function Uh(e) {
-	return Hh.dropTarget(e);
+function tg(e) {
+	return eg.dropTarget(e);
 }
-function Wh(e) {
-	return Hh.monitor(e);
+function ng(e) {
+	return eg.monitor(e);
 }
 (function() {
 	if (typeof window > "u") return;
-	Hh.registerUsage();
+	eg.registerUsage();
 	var e = { type: "idle" }, t = e;
 	function n() {
-		t.type === "dragging" && (Vh = !1, t.cleanup(), t = e);
+		t.type === "dragging" && ($h = !1, t.cleanup(), t = e);
 	}
 	function r() {
 		return (0, Ku.bindAll)(window, [{
@@ -9500,7 +9665,7 @@ function Wh(e) {
 	(0, Ku.bind)(window, {
 		type: "dragstart",
 		listener: function() {
-			t.type === "idle" && (Vh = !0, t = {
+			t.type === "idle" && ($h = !0, t = {
 				type: "dragging",
 				cleanup: r()
 			});
@@ -9510,15 +9675,15 @@ function Wh(e) {
 })();
 //#endregion
 //#region src/components/file-upload/contract.ts
-var Gh = ["stack", "inline"], Kh = [
+var rg = ["stack", "inline"], ig = [
 	"auto",
 	"image",
 	"none"
-], qh = [
+], ag = [
 	"sm",
 	"md",
 	"lg"
-], Jh = {
+], og = {
 	name: G,
 	accept: G,
 	capture: G,
@@ -9526,9 +9691,9 @@ var Gh = ["stack", "inline"], Kh = [
 	required: q,
 	disabled: q,
 	invalid: q,
-	preview: J(Kh, "auto"),
-	layout: J(Gh, "stack"),
-	size: J(qh, "md"),
+	preview: J(ig, "auto"),
+	layout: J(rg, "stack"),
+	size: J(ag, "md"),
 	heading: G.default("Drop files here or browse"),
 	text: G,
 	browseLabel: G,
@@ -9541,22 +9706,20 @@ var Gh = ["stack", "inline"], Kh = [
 	itemClass: G,
 	class: G
 };
-G.default("Drop files here or browse"), G.default("cloud__upload"), J(Gh, "stack"), J(qh, "md"), G.default("document__blank"), G.default("Remove file");
+G.default("Drop files here or browse"), G.default("cloud__upload"), J(rg, "stack"), J(ag, "md"), G.default("document__blank"), G.default("Remove file");
 //#endregion
 //#region src/components/file-upload/styles.ts
-var Yh = Y({ definition: {
+var sg = Y({ definition: {
 	component: "ui.file-upload",
 	parts: {
 		root: { base: ["grid w-full min-w-0 gap-3", "data-disabled:cursor-not-allowed"] },
-		control: { base: "grid min-w-0 gap-3" },
-		input: { base: ["absolute inset-0 z-10 h-full w-full cursor-pointer opacity-0", "disabled:cursor-not-allowed"] },
+		control: { base: "relative grid min-w-0 gap-3" },
+		input: { base: "sr-only" },
 		dropzone: {
 			base: [
-				"relative grid min-w-0 overflow-hidden rounded-4 border border-border bg-surface text-foreground shadow-control outline-none",
-				"focus-within:border-control-border-focus focus-within:shadow-focus",
-				"hover:bg-base-a2 data-dragging:border-control-border-focus data-dragging:bg-base-a3",
-				"data-invalid:border-control-border-invalid data-invalid:focus-within:border-control-border-invalid-focus data-invalid:focus-within:shadow-danger-focus",
-				"data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:bg-surface data-disabled:hover:bg-surface"
+				"relative grid min-w-0 overflow-hidden rounded-4 bg-surface-panel text-foreground shadow-control outline-none",
+				"hover:bg-base-a2 data-dragging:bg-base-a3",
+				"data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:bg-surface-panel data-disabled:hover:bg-surface-panel"
 			],
 			variants: {
 				layout: {
@@ -9582,7 +9745,7 @@ var Yh = Y({ definition: {
 		list: { base: "grid min-w-0 gap-2" },
 		empty: { base: "text-xs text-foreground-muted" },
 		item: { base: [
-			"grid min-w-0 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 rounded-3 bg-surface px-3 py-2 shadow-border",
+			"grid min-w-0 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 rounded-3 bg-surface-panel px-3 py-2 shadow-border",
 			"hover:shadow-border-hover",
 			"data-invalid:shadow-danger-focus"
 		] },
@@ -9601,7 +9764,7 @@ var Yh = Y({ definition: {
 		removeIcon: { base: "size-icon-xs fill-current leading-none" },
 		clear: { base: "sr-only" }
 	}
-} }), Xh = (e) => {
+} }), cg = (e) => {
 	if (e === 0) return "0 B";
 	let t = [
 		"B",
@@ -9610,42 +9773,43 @@ var Yh = Y({ definition: {
 		"GB"
 	], n = Math.min(Math.floor(Math.log(e) / Math.log(1024)), t.length - 1), r = e / 1024 ** n;
 	return `${r >= 10 || n === 0 ? Math.round(r) : Number(r.toFixed(1))} ${t[n]}`;
-}, Zh = (e, t) => [
+}, lg = (e, t) => [
 	t,
 	e.name,
 	e.size,
 	e.lastModified
-].join(":"), Qh = (e) => e.type.startsWith("image/"), $h = (e, t) => t !== "none" && (t === "image" || Qh(e)), eg = (e) => e ? Array.from(e) : [], tg = (e, t) => {
+].join(":"), ug = (e) => e.type.startsWith("image/"), dg = (e, t) => t !== "none" && (t === "image" || ug(e)), fg = (e) => e ? Array.from(e) : [], pg = (e, t) => {
 	let n = t.split(",").map((e) => e.trim().toLowerCase()).filter(Boolean);
 	if (n.length === 0) return !0;
 	let r = e.name.toLowerCase(), i = e.type.toLowerCase();
 	return n.some((e) => e.startsWith(".") ? r.endsWith(e) : e.endsWith("/*") ? i.startsWith(`${e.slice(0, -1)}`) : e.includes("/") ? i === e : !1);
-}, ng = (e, t) => e.filter((e) => tg(e, t)), rg = (e, t) => e.maxItems > 0 && t >= e.maxItems, ig = (e) => {
+}, mg = (e, t) => e.filter((e) => pg(e, t)), hg = (e, t) => e.maxItems > 0 && t >= e.maxItems, gg = (e) => {
 	if (typeof DataTransfer > "u") return null;
 	let t = new DataTransfer();
 	return e.forEach((e) => t.items.add(e)), t.files;
-}, ag = (e, t) => {
-	let n = ig(t);
+}, _g = (e, t) => {
+	let n = gg(t);
 	if (!n) return !1;
 	try {
 		return e.files = n, !0;
 	} catch {
 		return !1;
 	}
-}, og = (e) => {
+}, vg = (e) => {
 	e.dispatchEvent(new Event("input", { bubbles: !0 })), e.dispatchEvent(new Event("change", { bubbles: !0 }));
-}, sg = (e) => {
+}, yg = (e) => {
 	let t = "http://www.w3.org/2000/svg", n = document.createElementNS(t, "svg"), r = document.createElementNS(t, "polygon");
 	return n.setAttribute("viewBox", "0 0 32 32"), n.setAttribute("aria-hidden", "true"), n.setAttribute("class", e), r.setAttribute("points", "17.4141 16 24 9.4141 22.5859 8 16 14.5859 9.4143 8 8 9.4141 14.5859 16 8 22.5859 9.4143 24 16 17.4141 22.5859 24 24 22.5859 17.4141 16"), n.append(r), n;
-}, cg = () => ({
+}, bg = () => ({
 	props: null,
 	listeners: [],
 	files: [],
 	limitReached: !1,
+	emptyInputChangeClears: !1,
 	init() {
 		this.props = W({
 			el: this.$el,
-			schema: Jh
+			schema: og
 		});
 		let e = this.input(), t = this.dropzone();
 		Q.addListener({
@@ -9682,17 +9846,17 @@ var Yh = Y({ definition: {
 				r && (e.preventDefault(), this.clearExisting(r));
 			},
 			cleanup: this.listeners
-		}), t && (this.listeners.push(Uh({
+		}), t && (this.listeners.push(tg({
 			element: t,
-			canDrop: ({ source: e }) => !this.isInputUnavailable() && Fh({ source: e }),
+			canDrop: ({ source: e }) => !this.isInputUnavailable() && qh({ source: e }),
 			getDropEffect: () => "copy",
 			onDragEnter: () => this.setDragging(!0),
 			onDragLeave: () => this.setDragging(!1),
 			onDrop: ({ source: e }) => {
-				this.setDragging(!1), !(this.isInputUnavailable() || !Fh({ source: e })) && this.addFiles(Ih({ source: e }));
+				this.setDragging(!1), !(this.isInputUnavailable() || !qh({ source: e })) && this.addFiles(Jh({ source: e }));
 			}
-		})), this.listeners.push(Wh({
-			canMonitor: ({ source: e }) => Fh({ source: e }),
+		})), this.listeners.push(ng({
+			canMonitor: ({ source: e }) => qh({ source: e }),
 			onDrop: () => this.setDragging(!1)
 		}))), this.syncFromInput(), this.sync();
 	},
@@ -9716,7 +9880,7 @@ var Yh = Y({ definition: {
 		return this.$el.querySelector("[data-ui-file-upload-list]");
 	},
 	isInputUnavailable() {
-		return this.props.disabled || rg(this.props, eg(this.input().files).length);
+		return this.props.disabled || hg(this.props, fg(this.input().files).length);
 	},
 	sync() {
 		let e = this.root(), t = this.dropzone(), n = !!e.querySelector("[data-ui-file-upload-item][data-existing-file]:not([hidden])"), r = this.files.length > 0 || n, i = this.isInputUnavailable();
@@ -9790,20 +9954,25 @@ var Yh = Y({ definition: {
 		}), e.multiple = this.props.multiple, this.props.accept ? e.accept = this.props.accept : e.removeAttribute("accept"), this.props.capture ? e.setAttribute("capture", this.props.capture) : e.removeAttribute("capture"), this.isInputUnavailable() && !this.props.disabled ? (e.setAttribute("aria-disabled", "true"), e.tabIndex = -1) : this.props.disabled || (e.removeAttribute("aria-disabled"), e.removeAttribute("tabindex"));
 	},
 	syncFromInput() {
-		let e = this.input(), t = eg(e.files), n = ng(t, this.props.accept), r = this.props.multiple ? this.props.maxItems : 1, i = r > 0 ? n.slice(0, r) : n, a = t.length - n.length, o = n.length - i.length, s = a + o;
-		this.limitReached = rg(this.props, i.length), s > 0 && (ag(e, i), o > 0 && Q.dispatch({
+		let e = this.input(), t = fg(e.files), n = this.emptyInputChangeClears;
+		if (this.emptyInputChangeClears = !1, t.length === 0 && this.files.length > 0 && !n) {
+			_g(e, this.files.map(({ file: e }) => e)), this.sync();
+			return;
+		}
+		let r = mg(t, this.props.accept), i = this.props.multiple ? this.props.maxItems : 1, a = i > 0 ? r.slice(0, i) : r, o = t.length - r.length, s = r.length - a.length, c = o + s;
+		this.limitReached = hg(this.props, a.length), c > 0 && (_g(e, a), s > 0 && Q.dispatch({
 			el: this.root(),
 			name: "ui:file-upload-limit",
-			detail: { rejectedCount: o }
+			detail: { rejectedCount: s }
 		})), this.files.forEach((e) => {
 			e.previewUrl && URL.revokeObjectURL(e.previewUrl);
-		}), this.files = i.map((e, t) => ({
-			id: Zh(e, t),
+		}), this.files = a.map((e, t) => ({
+			id: lg(e, t),
 			file: e,
 			name: e.name,
-			size: Xh(e.size),
+			size: cg(e.size),
 			type: e.type || "File",
-			previewUrl: $h(e, this.props.preview) ? URL.createObjectURL(e) : ""
+			previewUrl: dg(e, this.props.preview) ? URL.createObjectURL(e) : ""
 		})), this.renderFiles(), this.sync(), Q.dispatch({
 			el: this.root(),
 			name: "ui:file-upload-change",
@@ -9816,29 +9985,29 @@ var Yh = Y({ definition: {
 	},
 	addFiles(e) {
 		if (this.isInputUnavailable() || e.length === 0) return;
-		let t = this.input(), n = ng(e, this.props.accept), r = this.props.multiple ? eg(t.files) : [], i = this.props.maxItems > 0 ? Math.max(this.props.maxItems - r.length, 0) : n.length, a = this.props.multiple ? n.slice(0, i) : n.slice(0, 1), o = n.length - a.length, s = this.props.multiple ? [...r, ...a] : a;
+		let t = this.input(), n = mg(e, this.props.accept), r = this.props.multiple ? fg(t.files) : [], i = this.props.maxItems > 0 ? Math.max(this.props.maxItems - r.length, 0) : n.length, a = this.props.multiple ? n.slice(0, i) : n.slice(0, 1), o = n.length - a.length, s = this.props.multiple ? [...r, ...a] : a;
 		if (o > 0 && Q.dispatch({
 			el: this.root(),
 			name: "ui:file-upload-limit",
 			detail: { rejectedCount: o }
-		}), this.props.maxItems > 0 ? this.limitReached = rg(this.props, s.length) : this.limitReached = !1, s.length === 0) {
+		}), this.props.maxItems > 0 ? this.limitReached = hg(this.props, s.length) : this.limitReached = !1, s.length === 0) {
 			this.sync();
 			return;
 		}
-		if (!ag(t, s)) {
+		if (!_g(t, s)) {
 			t.click();
 			return;
 		}
-		og(t);
+		vg(t);
 	},
 	removePending(e) {
 		if (this.props.disabled || !Number.isInteger(e)) return;
-		let t = this.input(), n = eg(t.files).filter((t, n) => n !== e);
+		let t = this.input(), n = fg(t.files).filter((t, n) => n !== e);
 		if (n.length === 0) {
-			t.value = "", og(t);
+			this.emptyInputChangeClears = !0, _g(t, []) || (t.value = ""), vg(t);
 			return;
 		}
-		ag(t, n) || (t.value = ""), og(t);
+		_g(t, n) || (t.value = ""), vg(t);
 	},
 	clearExisting(e) {
 		if (this.props.disabled || !this.props.clearable) return;
@@ -9854,10 +10023,10 @@ var Yh = Y({ definition: {
 		let t = e.querySelector("[data-ui-file-upload-empty]");
 		t && (t.hidden = this.files.length > 0 || !!e.querySelector("[data-existing-file]:not([hidden])"));
 		let n = X({
-			part: Yh.parts.item,
+			part: sg.parts.item,
 			props: {},
 			className: this.props.itemClass
-		}), r = X({ part: Yh.parts.preview }), i = ["relative block overflow-hidden ui-image-outline", X({ part: Yh.parts.previewImage })].filter(Boolean).join(" "), a = X({ part: Yh.parts.itemBody }), o = X({ part: Yh.parts.itemName }), s = X({ part: Yh.parts.itemMeta }), c = X({ part: Yh.parts.remove }), l = X({ part: Yh.parts.removeIcon });
+		}), r = X({ part: sg.parts.preview }), i = ["relative block overflow-hidden ui-image-outline", X({ part: sg.parts.previewImage })].filter(Boolean).join(" "), a = X({ part: sg.parts.itemBody }), o = X({ part: sg.parts.itemName }), s = X({ part: sg.parts.itemMeta }), c = X({ part: sg.parts.remove }), l = X({ part: sg.parts.removeIcon });
 		this.files.forEach((t, u) => {
 			let d = document.createElement("li");
 			d.dataset.uiFileUploadItem = "", d.dataset.uiFileUploadPending = "", d.dataset.fileIndex = String(u), d.className = n;
@@ -9866,7 +10035,7 @@ var Yh = Y({ definition: {
 				let e = document.createElement("span");
 				e.dataset.uiImage = "", e.className = i;
 				let n = document.createElement("img");
-				n.src = t.previewUrl, n.alt = "", n.loading = "lazy", n.decoding = "async", n.dataset.uiImageImg = "", n.className = "block size-full object-cover", e.append(n), f.append(e);
+				n.src = t.previewUrl, n.alt = "", n.loading = "lazy", n.decoding = "async", n.dataset.uiImageImg = "", n.className = "outline outline-1 -outline-offset-1 outline-black/10 dark:outline-white/10 block size-full object-cover", e.append(n), f.append(e);
 			} else f.textContent = t.name.slice(0, 1).toUpperCase();
 			let p = document.createElement("span");
 			p.className = a;
@@ -9875,7 +10044,7 @@ var Yh = Y({ definition: {
 			let h = document.createElement("span");
 			h.dataset.uiFileUploadItemMeta = "", h.className = s, h.textContent = [t.size, t.type].filter(Boolean).join(" · "), p.append(m, h);
 			let g = document.createElement("button");
-			g.type = "button", g.dataset.uiFileUploadRemove = "", g.dataset.fileIndex = String(u), g.className = c, g.setAttribute("aria-label", `Remove ${t.name}`), g.append(sg(l)), d.append(f, p, g), e.append(d);
+			g.type = "button", g.dataset.uiFileUploadRemove = "", g.dataset.fileIndex = String(u), g.className = c, g.setAttribute("aria-label", `Remove ${t.name}`), g.append(yg(l)), d.append(f, p, g), e.append(d);
 		});
 	},
 	setDragging(e) {
@@ -9892,22 +10061,23 @@ var Yh = Y({ definition: {
 			value: "true"
 		});
 	}
-}), lg = (e) => {
-	e.data("UiFileUpload", () => cg());
-}, ug = Fp, dg = Ip, fg = Lp, pg = {
+}), xg = (e) => {
+	e.data("UiFileUpload", () => bg());
+}, Sg = Fp, Cg = Ip, wg = qp, Tg = Lp, Eg = {
 	type: G.default("text"),
 	name: G,
 	value: G,
 	placeholder: G,
-	size: J(ug, "lg"),
-	variant: J(dg, "outline"),
+	size: J(Sg, "lg"),
+	variant: J(Cg, "outline"),
+	radius: J(wg, "md"),
 	disabled: q,
 	readonly: q,
 	required: q,
 	invalid: q,
 	icon: G,
 	iconTrailing: G,
-	iconVariant: J(fg, "outline"),
+	iconVariant: J(Tg, "outline"),
 	clearable: q,
 	copyable: q,
 	kbd: G,
@@ -9917,17 +10087,17 @@ var Yh = Y({ definition: {
 	controlClass: G,
 	class: G
 };
-J(ug, "lg"), J(dg, "outline");
+J(Sg, "lg"), J(Cg, "outline"), J(wg, "md");
 //#endregion
 //#region src/components/input/index.ts
-var mg = () => ({
+var Dg = () => ({
 	props: null,
 	listeners: [],
 	copiedTimer: null,
 	init() {
 		this.props = W({
 			el: this.$el,
-			schema: pg
+			schema: Eg
 		});
 		let e = this.input();
 		Q.addListener({
@@ -10004,26 +10174,26 @@ var mg = () => ({
 			});
 		}, 1200);
 	}
-}), hg = (e) => {
-	e.data("UiInput", () => mg());
-}, gg = [
-	"modal",
-	"sheet",
-	"drawer",
-	"flyout",
-	"floating"
-], _g = Vp, vg = [
+}), Og = (e) => {
+	e.data("UiInput", () => Dg());
+}, kg = ["modal", "sheet"], Ag = Vp, jg = [
 	"sm",
 	"md",
 	"lg",
 	"xl",
 	"full"
-], yg = Gp, bg = {
+], Mg = [
+	"overlay",
+	"panel",
+	"inverse"
+], Ng = Jp, Pg = Gp, Fg = {
 	name: G,
 	open: q,
-	mode: J(gg, "modal"),
-	side: J(_g, "right"),
-	size: J(vg, "md"),
+	mode: J(kg, "modal"),
+	side: J(Ag, "right"),
+	size: J(jg, "md"),
+	surface: J(Mg, "overlay"),
+	tone: J(Ng, "solid"),
 	dismissible: q.default(!0),
 	closable: q.default(!0),
 	disabled: q,
@@ -10033,28 +10203,34 @@ var mg = () => ({
 	panelClass: G,
 	overlayClass: G,
 	class: G
-}, xg = {
+}, Ig = {
 	name: G,
 	disabled: q,
 	class: G
 };
-G.default("ui-modal-root"), J(yg, "h2"), G.default("Close");
+G.default("ui-modal-root"), J(Pg, "h2"), G.default("Close");
 //#endregion
 //#region src/components/modal/styles.ts
-var Sg = Y({ definition: {
+var Lg = {
+	overlay: Yp.overlay,
+	panel: Yp.panel,
+	inverse: Yp.inverse
+}, Rg = [
+	"grid-rows-[auto_auto_minmax(0,1fr)_auto]",
+	"[&>[data-ui-modal-body]]:-mx-1 [&>[data-ui-modal-body]]:min-h-0 [&>[data-ui-modal-body]]:content-start",
+	"[&>[data-ui-modal-body]]:overflow-x-hidden [&>[data-ui-modal-body]]:overflow-y-auto [&>[data-ui-modal-body]]:px-1",
+	"[&>[data-ui-modal-footer]]:self-end"
+], zg = Y({ definition: {
 	component: "ui.modal",
 	parts: {
 		instance: { base: "contents" },
 		root: { base: ["fixed inset-0 z-dialog m-0 h-auto max-h-none w-auto max-w-none overflow-visible border-0 bg-transparent p-0 text-foreground", "backdrop:bg-transparent"] },
 		viewport: {
-			base: "fixed inset-0 z-dialog flex min-h-dvh overflow-y-auto",
+			base: "fixed inset-0 z-dialog flex min-h-dvh",
 			variants: {
 				mode: {
-					modal: "items-center justify-center p-4",
-					sheet: "",
-					drawer: "",
-					flyout: "",
-					floating: "p-4"
+					modal: "items-center justify-center overflow-y-auto p-4",
+					sheet: ""
 				},
 				side: {
 					top: "",
@@ -10076,7 +10252,7 @@ var Sg = Y({ definition: {
 						mode: "sheet",
 						side: "right"
 					},
-					class: "items-center justify-end"
+					class: "items-center justify-end overflow-hidden"
 				},
 				{
 					when: {
@@ -10090,91 +10266,7 @@ var Sg = Y({ definition: {
 						mode: "sheet",
 						side: "left"
 					},
-					class: "items-center justify-start"
-				},
-				{
-					when: {
-						mode: "drawer",
-						side: "top"
-					},
-					class: "items-start justify-center"
-				},
-				{
-					when: {
-						mode: "drawer",
-						side: "right"
-					},
-					class: "items-center justify-end"
-				},
-				{
-					when: {
-						mode: "drawer",
-						side: "bottom"
-					},
-					class: "items-end justify-center"
-				},
-				{
-					when: {
-						mode: "drawer",
-						side: "left"
-					},
-					class: "items-center justify-start"
-				},
-				{
-					when: {
-						mode: "flyout",
-						side: "top"
-					},
-					class: "items-start justify-center"
-				},
-				{
-					when: {
-						mode: "flyout",
-						side: "right"
-					},
-					class: "items-center justify-end"
-				},
-				{
-					when: {
-						mode: "flyout",
-						side: "bottom"
-					},
-					class: "items-end justify-center"
-				},
-				{
-					when: {
-						mode: "flyout",
-						side: "left"
-					},
-					class: "items-center justify-start"
-				},
-				{
-					when: {
-						mode: "floating",
-						side: "top"
-					},
-					class: "items-start justify-center"
-				},
-				{
-					when: {
-						mode: "floating",
-						side: "right"
-					},
-					class: "items-center justify-end"
-				},
-				{
-					when: {
-						mode: "floating",
-						side: "bottom"
-					},
-					class: "items-end justify-center"
-				},
-				{
-					when: {
-						mode: "floating",
-						side: "left"
-					},
-					class: "items-center justify-start"
+					class: "items-center justify-start overflow-hidden"
 				}
 			],
 			defaults: {
@@ -10182,16 +10274,15 @@ var Sg = Y({ definition: {
 				side: "right"
 			}
 		},
-		overlay: { base: "fixed inset-0 bg-overlay" },
+		overlay: { base: "fixed inset-0 bg-overlay transition-opacity duration-150 data-[state=closed]:opacity-0" },
 		panel: {
-			base: ["relative z-dialog grid w-full min-w-0 gap-4 overflow-auto bg-surface-raised p-5 text-foreground shadow-panel outline-none", "max-h-full"],
+			base: ["relative z-dialog grid w-full min-w-0 gap-4 overflow-auto p-5 shadow-modal outline-none", "max-h-full"],
 			variants: {
+				surface: Lg,
+				tone: Xp,
 				mode: {
 					modal: "rounded-4",
-					sheet: "rounded-4",
-					drawer: "rounded-4",
-					flyout: "rounded-4",
-					floating: "rounded-4"
+					sheet: ""
 				},
 				side: {
 					top: "",
@@ -10213,115 +10304,47 @@ var Sg = Y({ definition: {
 						mode: "sheet",
 						side: "right"
 					},
-					class: "min-h-dvh max-w-lg rounded-r-none"
+					class: ["min-h-dvh max-w-lg", Rg]
 				},
 				{
 					when: {
 						mode: "sheet",
 						side: "left"
 					},
-					class: "min-h-dvh max-w-lg rounded-l-none"
+					class: ["min-h-dvh max-w-lg", Rg]
 				},
 				{
 					when: {
 						mode: "sheet",
 						side: "top"
 					},
-					class: "max-w-full rounded-t-none"
+					class: "max-w-full"
 				},
 				{
 					when: {
 						mode: "sheet",
 						side: "bottom"
 					},
-					class: "max-w-full rounded-b-none"
-				},
-				{
-					when: {
-						mode: "drawer",
-						side: "right"
-					},
-					class: "min-h-dvh max-w-md rounded-r-none"
-				},
-				{
-					when: {
-						mode: "drawer",
-						side: "left"
-					},
-					class: "min-h-dvh max-w-md rounded-l-none"
-				},
-				{
-					when: {
-						mode: "drawer",
-						side: "top"
-					},
-					class: "max-w-full rounded-t-none"
-				},
-				{
-					when: {
-						mode: "drawer",
-						side: "bottom"
-					},
-					class: "max-w-full rounded-b-none"
-				},
-				{
-					when: {
-						mode: "flyout",
-						side: "right"
-					},
-					class: "min-h-dvh max-w-sm rounded-r-none"
-				},
-				{
-					when: {
-						mode: "flyout",
-						side: "left"
-					},
-					class: "min-h-dvh max-w-sm rounded-l-none"
-				},
-				{
-					when: {
-						mode: "flyout",
-						side: "top"
-					},
-					class: "max-w-md rounded-t-none"
-				},
-				{
-					when: {
-						mode: "flyout",
-						side: "bottom"
-					},
-					class: "max-w-md rounded-b-none"
-				},
-				{
-					when: {
-						mode: "floating",
-						side: "right"
-					},
-					class: "h-full"
+					class: "max-w-full"
 				},
 				{
 					when: {
-						mode: "floating",
-						side: "left"
+						surface: "overlay",
+						tone: "alpha"
 					},
-					class: "h-full"
+					class: "bg-surface-overlay-alpha"
 				},
 				{
 					when: {
-						mode: "floating",
-						side: "top"
+						surface: "panel",
+						tone: "alpha"
 					},
-					class: "max-w-full"
-				},
-				{
-					when: {
-						mode: "floating",
-						side: "bottom"
-					},
-					class: "max-w-full"
+					class: "bg-surface-panel-alpha"
 				}
 			],
 			defaults: {
+				surface: "overlay",
+				tone: "solid",
 				mode: "modal",
 				side: "right",
 				size: "md"
@@ -10336,7 +10359,7 @@ var Sg = Y({ definition: {
 		close: { base: ["absolute right-3 top-3 inline-flex size-control-md items-center justify-center rounded-2 border border-transparent text-icon outline-none", "hover:bg-base-a2 focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 focus-visible:ring-offset-app"] },
 		closeIcon: { base: "size-icon fill-current" }
 	}
-} }), Cg = /* @__PURE__ */ new Set(), wg = /* @__PURE__ */ new Set(), Tg = [
+} }), Bg = /* @__PURE__ */ new Set(), Vg = /* @__PURE__ */ new Set(), Hg = [
 	"a[href]",
 	"area[href]",
 	"button:not([disabled])",
@@ -10345,13 +10368,13 @@ var Sg = Y({ definition: {
 	"textarea:not([disabled])",
 	"[tabindex]:not([tabindex=\"-1\"])",
 	"[contenteditable=\"true\"]"
-].join(","), Eg = (e) => e ? "open" : "closed", Dg = (e) => Array.from(Cg).find((t) => t.name === e) ?? null, Og = (e) => Array.from(wg).filter((t) => t.name === e), kg = (e) => {
+].join(","), Ug = (e) => e ? "open" : "closed", Wg = (e) => (e.side === "left" || e.side === "right") && e.mode === "sheet" ? "sheet" : "modal", Gg = (e) => Array.from(Bg).find((t) => t.name === e) ?? null, Kg = (e) => Array.from(Vg).filter((t) => t.name === e), qg = (e) => {
 	let t = e.detail;
-	t?.name && Dg(t.name)?.close(e);
-}, Ag = (e) => !e.hasAttribute("disabled") && e.getAttribute("aria-disabled") !== "true" && !e.hidden && e.tabIndex !== -1, jg = (e) => e.matches(Tg) && Ag(e) ? e : e.querySelector(Tg) ?? e, Mg = (e, t) => {
-	let n = Eg(t);
+	t?.name && Gg(t.name)?.close(e);
+}, Jg = (e) => !e.hasAttribute("disabled") && e.getAttribute("aria-disabled") !== "true" && !e.hidden && e.tabIndex !== -1, Yg = (e) => e.matches(Hg) && Jg(e) ? e : e.querySelector(Hg) ?? e, Xg = (e, t) => {
+	let n = Ug(t);
 	e.setAttribute("data-state", n), e.setAttribute("aria-expanded", t ? "true" : "false");
-}, Ng = () => ({
+}, Zg = () => ({
 	props: null,
 	isOpen: !1,
 	dialogId: "",
@@ -10370,13 +10393,13 @@ var Sg = Y({ definition: {
 	init() {
 		this.props = W({
 			el: this.$el,
-			schema: bg
+			schema: Fg
 		}), this.isOpen = this.props.open, this.dialogId = this.dialogEl().id || this.$id(`modal${this.props.name ? `-${this.props.name}` : ""}`), this.register(), this.mountLocalTrigger(), this.setupDialog(), this.overlayMotion = Q.motion.createPresenceLifecycle({
 			element: () => this.overlayEl(),
 			preset: "fade"
 		}), this.panelMotion = Q.motion.createPresenceLifecycle({
 			element: () => this.panelEl(),
-			preset: "modal"
+			preset: Wg(this.props)
 		}), this.syncAll(), this.$watch("isOpen", (e) => {
 			e ? this.applyOpenState() : this.applyClosedState();
 		}), this.isOpen && queueMicrotask(() => this.applyOpenState());
@@ -10385,8 +10408,8 @@ var Sg = Y({ definition: {
 		this.props.disconnect(), this.overlayMotion?.destroy(), this.panelMotion?.destroy(), this.hasScrollLock &&= (Pp(), !1), this.unregister(), this.teardownLocalTrigger(), this.teardown();
 	},
 	get root() {
-		return Q.props({ inputs: [Q.resolveStyle({
-			part: Sg.parts.instance,
+		return Q.mergeBindings({ inputs: [Q.resolveStyle({
+			part: zg.parts.instance,
 			props: {},
 			className: ""
 		}), { "data-ui-modal-instance": "" }] });
@@ -10424,10 +10447,10 @@ var Sg = Y({ definition: {
 		return Array.from(this.$el.children).find((e) => e instanceof HTMLElement && e.matches("[data-ui-modal-trigger]")) ?? null;
 	},
 	triggerTarget(e) {
-		return jg(e);
+		return Yg(e);
 	},
 	focusableEls() {
-		return Array.from(this.panelEl().querySelectorAll(Tg)).filter(Ag);
+		return Array.from(this.panelEl().querySelectorAll(Hg)).filter(Jg);
 	},
 	firstAutofocusEl() {
 		return this.panelEl().querySelector("[autofocus]");
@@ -10493,10 +10516,10 @@ var Sg = Y({ definition: {
 		}));
 	},
 	register() {
-		this.isRegistered ||= (Cg.add(this), !0);
+		this.isRegistered ||= (Bg.add(this), !0);
 	},
 	unregister() {
-		Cg.delete(this), this.isRegistered = !1;
+		Bg.delete(this), this.isRegistered = !1;
 	},
 	open(e) {
 		if (e?.preventDefault(), this.props.disabled) return;
@@ -10521,30 +10544,30 @@ var Sg = Y({ definition: {
 		});
 	},
 	syncExternalTrigger(e, t) {
-		if (Mg(e, this.isOpen), e.setAttribute("aria-controls", this.dialogId), e.setAttribute("data-ui-modal-trigger-target", this.dialogId), e.setAttribute("data-state", Eg(this.isOpen)), t || this.props.disabled) {
-			e.setAttribute("aria-disabled", "true"), e.setAttribute("data-disabled", ""), e instanceof HTMLButtonElement && (e.disabled = !0), e.matches(Tg) || (e.tabIndex = -1);
+		if (Xg(e, this.isOpen), e.setAttribute("aria-controls", this.dialogId), e.setAttribute("data-ui-modal-trigger-target", this.dialogId), e.setAttribute("data-state", Ug(this.isOpen)), t || this.props.disabled) {
+			e.setAttribute("aria-disabled", "true"), e.setAttribute("data-disabled", ""), e instanceof HTMLButtonElement && (e.disabled = !0), e.matches(Hg) || (e.tabIndex = -1);
 			return;
 		}
-		e.removeAttribute("aria-disabled"), e.removeAttribute("data-disabled"), e instanceof HTMLButtonElement && (e.disabled = !1), e.matches(Tg) || (e.tabIndex = 0);
+		e.removeAttribute("aria-disabled"), e.removeAttribute("data-disabled"), e instanceof HTMLButtonElement && (e.disabled = !1), e.matches(Hg) || (e.tabIndex = 0);
 	},
 	syncAll() {
 		this.syncDialog(), this.syncLocalTrigger(), this.syncNamedTriggers();
 	},
 	syncDialog() {
-		let e = this.dialogEl(), t = this.viewportEl(), n = this.overlayEl(), r = this.panelEl(), i = this.titleEl(), a = this.descriptionEl(), o = Eg(this.isOpen);
-		e.id = this.dialogId, e.setAttribute("role", "dialog"), e.setAttribute("aria-modal", "true"), e.setAttribute("data-state", o), e.dataset.mode = this.props.mode, e.dataset.side = this.props.side, e.dataset.size = this.props.size, e.className = Q.resolveStyle({
-			part: Sg.parts.root,
+		let e = this.dialogEl(), t = this.viewportEl(), n = this.overlayEl(), r = this.panelEl(), i = this.titleEl(), a = this.descriptionEl(), o = Ug(this.isOpen);
+		e.id = this.dialogId, e.setAttribute("role", "dialog"), e.setAttribute("aria-modal", "true"), e.setAttribute("data-state", o), e.dataset.mode = this.props.mode, e.dataset.side = this.props.side, e.dataset.size = this.props.size, e.dataset.surface = this.props.surface, e.dataset.tone = this.props.tone, e.className = Q.resolveStyle({
+			part: zg.parts.root,
 			props: this.props,
 			className: this.props.class
 		}), t.setAttribute("data-state", o), t.dataset.mode = this.props.mode, t.dataset.side = this.props.side, t.className = Q.resolveStyle({
-			part: Sg.parts.viewport,
+			part: zg.parts.viewport,
 			props: this.props
 		}), n.setAttribute("data-state", o), n.className = Q.resolveStyle({
-			part: Sg.parts.overlay,
+			part: zg.parts.overlay,
 			props: this.props,
 			className: this.props.overlayClass
-		}), r.id ||= this.$id(`modal-panel${this.props.name ? `-${this.props.name}` : ""}`), r.setAttribute("data-state", o), r.dataset.mode = this.props.mode, r.dataset.side = this.props.side, r.dataset.size = this.props.size, r.tabIndex = -1, r.className = Q.resolveStyle({
-			part: Sg.parts.panel,
+		}), r.id ||= this.$id(`modal-panel${this.props.name ? `-${this.props.name}` : ""}`), r.setAttribute("data-state", o), r.dataset.mode = this.props.mode, r.dataset.side = this.props.side, r.dataset.size = this.props.size, r.dataset.surface = this.props.surface, r.dataset.tone = this.props.tone, r.tabIndex = -1, r.className = Q.resolveStyle({
+			part: zg.parts.panel,
 			props: this.props,
 			className: this.props.panelClass
 		}), i ? (i.id ||= this.$id(`modal-title${this.props.name ? `-${this.props.name}` : ""}`), e.setAttribute("aria-labelledby", i.id), e.removeAttribute("aria-label"), this.props.autofocusTitle && (i.tabIndex = -1)) : this.props.label && (e.setAttribute("aria-label", this.props.label), e.removeAttribute("aria-labelledby")), a && (a.id ||= this.$id(`modal-description${this.props.name ? `-${this.props.name}` : ""}`)), this.props.descriptionId === "none" ? e.removeAttribute("aria-describedby") : this.props.descriptionId ? e.setAttribute("aria-describedby", this.props.descriptionId) : a && e.setAttribute("aria-describedby", a.id);
@@ -10554,7 +10577,7 @@ var Sg = Y({ definition: {
 		e && this.syncExternalTrigger(this.triggerTarget(e), this.props.disabled);
 	},
 	syncNamedTriggers() {
-		this.props.name && Og(this.props.name).forEach((e) => e.sync());
+		this.props.name && Kg(this.props.name).forEach((e) => e.sync());
 	},
 	applyOpenState() {
 		this.modalMotionRun += 1;
@@ -10580,7 +10603,7 @@ var Sg = Y({ definition: {
 	},
 	focusInitial() {
 		let e = this.firstAutofocusEl();
-		if (e && Ag(e)) {
+		if (e && Jg(e)) {
 			e.focus({ preventScroll: !0 });
 			return;
 		}
@@ -10623,7 +10646,7 @@ var Sg = Y({ definition: {
 	teardown() {
 		this.cleanup.forEach((e) => e()), this.cleanup = [];
 	}
-}), Pg = () => ({
+}), Qg = () => ({
 	props: null,
 	target: null,
 	cleanup: [],
@@ -10633,8 +10656,8 @@ var Sg = Y({ definition: {
 	init() {
 		this.props = W({
 			el: this.$el,
-			schema: xg
-		}), this.target = this.targetEl(), wg.add(this), this.sync(), Q.addListener({
+			schema: Ig
+		}), this.target = this.targetEl(), Vg.add(this), this.sync(), Q.addListener({
 			target: this.target,
 			event: "click",
 			handler: (e) => this.open(e),
@@ -10649,11 +10672,11 @@ var Sg = Y({ definition: {
 		});
 	},
 	destroy() {
-		this.props.disconnect(), wg.delete(this), this.cleanup.forEach((e) => e()), this.cleanup = [];
+		this.props.disconnect(), Vg.delete(this), this.cleanup.forEach((e) => e()), this.cleanup = [];
 	},
 	get root() {
-		return Q.props({ inputs: [Q.resolveStyle({
-			part: Sg.parts.trigger,
+		return Q.mergeBindings({ inputs: [Q.resolveStyle({
+			part: zg.parts.trigger,
 			props: {},
 			className: this.props.class
 		}), {
@@ -10668,44 +10691,44 @@ var Sg = Y({ definition: {
 			e.syncExternalTrigger(this.target, this.props.disabled);
 			return;
 		}
-		Mg(this.target, !1), this.props.disabled ? (this.target.setAttribute("aria-disabled", "true"), this.target.setAttribute("data-disabled", "")) : (this.target.removeAttribute("aria-disabled"), this.target.removeAttribute("data-disabled"));
+		Xg(this.target, !1), this.props.disabled ? (this.target.setAttribute("aria-disabled", "true"), this.target.setAttribute("data-disabled", "")) : (this.target.removeAttribute("aria-disabled"), this.target.removeAttribute("data-disabled"));
 	},
 	modal() {
-		return this.props.name ? Dg(this.props.name) : null;
+		return this.props.name ? Gg(this.props.name) : null;
 	},
 	open(e) {
 		e?.preventDefault(), !this.props.disabled && this.modal()?.openFrom(this.target);
 	},
 	targetEl() {
-		return jg(this.$el);
+		return Yg(this.$el);
 	}
-}), Fg = (e) => {
-	e.data("UiModal", () => Ng()), e.data("UiModalTrigger", () => Pg()), document.addEventListener("ui:modal-close", kg);
-}, Ig = Hp, Lg = [
+}), $g = (e) => {
+	e.data("UiModal", () => Zg()), e.data("UiModalTrigger", () => Qg()), document.addEventListener("ui:modal-close", qg);
+}, e_ = Hp, t_ = [
 	"default",
 	"cards",
 	"pills"
-], Rg = Up, zg = Fp, Bg = [
+], n_ = Up, r_ = Fp, i_ = [
 	"default",
 	"cards",
 	"pills"
-], Vg = {
+], a_ = {
 	name: G,
 	value: G,
-	orientation: J(Ig, "vertical"),
-	variant: J(Lg, "default"),
+	orientation: J(e_, "vertical"),
+	variant: J(t_, "default"),
 	indicator: q.default(!0),
-	placement: J(Rg, "leading"),
+	placement: J(n_, "leading"),
 	disabled: q,
 	required: q,
 	invalid: q,
 	loop: q.default(!0),
 	class: G
 };
-q.default(!0), J(Rg, "leading"), J(Bg, "default"), J(zg, "md"), J(zg, "md");
+q.default(!0), J(n_, "leading"), J(i_, "default"), J(r_, "md"), J(r_, "md");
 //#endregion
 //#region src/components/radio/index.ts
-var Hg = (e, t) => t.value || e.dataset.value || e.textContent?.trim() || "", Ug = () => ({
+var o_ = (e, t) => t.value || e.dataset.value || e.textContent?.trim() || "", s_ = () => ({
 	props: null,
 	value: "",
 	listeners: [],
@@ -10713,7 +10736,7 @@ var Hg = (e, t) => t.value || e.dataset.value || e.textContent?.trim() || "", Ug
 	init() {
 		this.props = W({
 			el: this.$el,
-			schema: Vg
+			schema: a_
 		});
 		let e = this.items().find((e) => e.input.checked);
 		this.value = this.props.value || e?.value || "", Q.addListener({
@@ -10754,7 +10777,7 @@ var Hg = (e, t) => t.value || e.dataset.value || e.textContent?.trim() || "", Ug
 				input: t,
 				indicator: e.querySelector("[data-ui-radio-indicator]"),
 				dot: e.querySelector("[data-ui-radio-indicator-dot]"),
-				value: Hg(e, t),
+				value: o_(e, t),
 				disabled: n
 			};
 		}).filter((e) => e !== null);
@@ -10858,9 +10881,9 @@ var Hg = (e, t) => t.value || e.dataset.value || e.textContent?.trim() || "", Ug
 		}
 		["ArrowUp", "ArrowLeft"].includes(t.key) && (t.preventDefault(), this.move(e, -1)), ["ArrowDown", "ArrowRight"].includes(t.key) && (t.preventDefault(), this.move(e, 1));
 	}
-}), Wg = (e) => {
-	e.data("UiRadioGroup", () => Ug());
-}, Gg = {
+}), c_ = (e) => {
+	e.data("UiRadioGroup", () => s_());
+}, l_ = {
 	orientation: J([
 		"vertical",
 		"horizontal",
@@ -10880,7 +10903,7 @@ var Hg = (e, t) => t.value || e.dataset.value || e.textContent?.trim() || "", Ug
 	scrollbarClass: G,
 	thumbClass: G,
 	cornerClass: G
-}, Kg = Y({ definition: {
+}, u_ = Y({ definition: {
 	component: "ui.scroll-area",
 	parts: {
 		root: {
@@ -10949,27 +10972,27 @@ var Hg = (e, t) => t.value || e.dataset.value || e.textContent?.trim() || "", Ug
 			"data-visible:opacity-100"
 		] }
 	}
-} }), qg = 18, Jg = 1e3, Yg = null, Xg = (e, t, n) => Math.min(n, Math.max(t, e)), Zg = (e, t) => e === "both" || e === "horizontal" && t === "x" || e === "vertical" && t === "y", Qg = () => {
-	if (Yg) return Yg;
+} }), d_ = 18, f_ = 1e3, p_ = null, m_ = (e, t, n) => Math.min(n, Math.max(t, e)), h_ = (e, t) => e === "both" || e === "horizontal" && t === "x" || e === "vertical" && t === "y", g_ = () => {
+	if (p_) return p_;
 	let e = document.createElement("div"), t = document.createElement("div");
-	return e.dir = "rtl", e.style.cssText = "position:absolute;left:-9999px;width:4px;height:1px;overflow:scroll;", t.style.cssText = "width:8px;height:1px;", e.append(t), document.body.append(e), e.scrollLeft = 1, e.scrollLeft === 0 ? Yg = "negative" : (e.scrollLeft = 0, Yg = e.scrollLeft === 0 ? "reverse" : "default"), e.remove(), Yg;
-}, $g = (e) => {
+	return e.dir = "rtl", e.style.cssText = "position:absolute;left:-9999px;width:4px;height:1px;overflow:scroll;", t.style.cssText = "width:8px;height:1px;", e.append(t), document.body.append(e), e.scrollLeft = 1, e.scrollLeft === 0 ? p_ = "negative" : (e.scrollLeft = 0, p_ = e.scrollLeft === 0 ? "reverse" : "default"), e.remove(), p_;
+}, __ = (e) => {
 	let t = Math.max(0, e.scrollWidth - e.clientWidth);
 	if (!Q.isRtl({ el: e })) return e.scrollLeft;
-	let n = Qg();
+	let n = g_();
 	return n === "negative" ? -e.scrollLeft : n === "reverse" ? t - e.scrollLeft : e.scrollLeft;
-}, e_ = (e, t) => {
-	let n = Math.max(0, e.scrollWidth - e.clientWidth), r = Xg(t, 0, n);
+}, v_ = (e, t) => {
+	let n = Math.max(0, e.scrollWidth - e.clientWidth), r = m_(t, 0, n);
 	if (!Q.isRtl({ el: e })) {
 		e.scrollLeft = r;
 		return;
 	}
-	let i = Qg();
+	let i = g_();
 	i === "negative" ? e.scrollLeft = -r : i === "reverse" ? e.scrollLeft = n - r : e.scrollLeft = r;
-}, t_ = (e) => e.dataset.orientation === "horizontal" ? "x" : "y", n_ = (e) => e instanceof HTMLElement, r_ = (e, t) => {
+}, y_ = (e) => e.dataset.orientation === "horizontal" ? "x" : "y", b_ = (e) => e instanceof HTMLElement, x_ = (e, t) => {
 	let n = e.querySelector(`:scope > ${t}`);
-	return n_(n) ? n : null;
-}, i_ = () => ({
+	return b_(n) ? n : null;
+}, S_ = () => ({
 	props: null,
 	listeners: [],
 	resizeObserver: null,
@@ -10988,7 +11011,7 @@ var Hg = (e, t) => t.value || e.dataset.value || e.textContent?.trim() || "", Ug
 	init() {
 		this.props = W({
 			el: this.$el,
-			schema: Gg
+			schema: l_
 		});
 		let e = this.elements();
 		this.resizeObserver = new ResizeObserver(() => this.scheduleSync()), this.resizeObserver.observe(e.viewport), e.content && this.resizeObserver.observe(e.content), this.mutationObserver = new MutationObserver(() => this.scheduleSync()), e.content && this.mutationObserver.observe(e.content, {
@@ -11064,8 +11087,8 @@ var Hg = (e, t) => t.value || e.dataset.value || e.textContent?.trim() || "", Ug
 		this.props.disconnect(), this.listeners.splice(0).forEach((e) => e()), this.resizeObserver?.disconnect(), this.mutationObserver?.disconnect(), this.clearFadeTimer(), this.frame && cancelAnimationFrame(this.frame), this.positionFrame && cancelAnimationFrame(this.positionFrame), this.frame = 0, this.positionFrame = 0, this.dragging = null;
 	},
 	get root() {
-		return Q.props({ inputs: [X({
-			part: Kg.parts.root,
+		return Q.mergeBindings({ inputs: [X({
+			part: u_.parts.root,
 			props: {
 				fill: this.props.fill,
 				size: this.props.size
@@ -11081,8 +11104,8 @@ var Hg = (e, t) => t.value || e.dataset.value || e.textContent?.trim() || "", Ug
 		}] });
 	},
 	viewport(e) {
-		return Q.props({ inputs: [X({
-			part: Kg.parts.viewport,
+		return Q.mergeBindings({ inputs: [X({
+			part: u_.parts.viewport,
 			props: {
 				orientation: this.props.orientation,
 				fill: this.props.fill
@@ -11096,9 +11119,9 @@ var Hg = (e, t) => t.value || e.dataset.value || e.textContent?.trim() || "", Ug
 		}] });
 	},
 	scrollbar(e) {
-		let t = t_(e) === "x" ? "horizontal" : "vertical";
-		return Q.props({ inputs: [X({
-			part: Kg.parts.scrollbar,
+		let t = y_(e) === "x" ? "horizontal" : "vertical";
+		return Q.mergeBindings({ inputs: [X({
+			part: u_.parts.scrollbar,
 			props: { orientation: t },
 			className: e.dataset.class
 		}), {
@@ -11108,9 +11131,9 @@ var Hg = (e, t) => t.value || e.dataset.value || e.textContent?.trim() || "", Ug
 		}] });
 	},
 	thumb(e) {
-		let t = t_(e), n = t === "x" ? "horizontal" : "vertical";
-		return Q.props({ inputs: [X({
-			part: Kg.parts.thumb,
+		let t = y_(e), n = t === "x" ? "horizontal" : "vertical";
+		return Q.mergeBindings({ inputs: [X({
+			part: u_.parts.thumb,
 			props: { orientation: n },
 			className: e.dataset.class
 		}), {
@@ -11121,8 +11144,8 @@ var Hg = (e, t) => t.value || e.dataset.value || e.textContent?.trim() || "", Ug
 		}] });
 	},
 	corner(e) {
-		return Q.props({ inputs: [X({
-			part: Kg.parts.corner,
+		return Q.mergeBindings({ inputs: [X({
+			part: u_.parts.corner,
 			className: e.dataset.class
 		}), {
 			"data-ui-scroll-area-corner": "",
@@ -11130,16 +11153,16 @@ var Hg = (e, t) => t.value || e.dataset.value || e.textContent?.trim() || "", Ug
 		}] });
 	},
 	elements() {
-		let e = this.$el, t = r_(e, "[data-ui-scroll-area-viewport]") ?? e;
+		let e = this.$el, t = x_(e, "[data-ui-scroll-area-viewport]") ?? e;
 		return {
 			root: e,
 			viewport: t,
-			content: r_(t, "[data-ui-scroll-area-content]"),
-			verticalScrollbar: r_(e, "[data-ui-scroll-area-scrollbar][data-orientation=\"vertical\"]"),
-			horizontalScrollbar: r_(e, "[data-ui-scroll-area-scrollbar][data-orientation=\"horizontal\"]"),
-			verticalThumb: r_(e, "[data-ui-scroll-area-scrollbar][data-orientation=\"vertical\"] > [data-ui-scroll-area-thumb][data-orientation=\"vertical\"]"),
-			horizontalThumb: r_(e, "[data-ui-scroll-area-scrollbar][data-orientation=\"horizontal\"] > [data-ui-scroll-area-thumb][data-orientation=\"horizontal\"]"),
-			corner: r_(e, "[data-ui-scroll-area-corner]")
+			content: x_(t, "[data-ui-scroll-area-content]"),
+			verticalScrollbar: x_(e, "[data-ui-scroll-area-scrollbar][data-orientation=\"vertical\"]"),
+			horizontalScrollbar: x_(e, "[data-ui-scroll-area-scrollbar][data-orientation=\"horizontal\"]"),
+			verticalThumb: x_(e, "[data-ui-scroll-area-scrollbar][data-orientation=\"vertical\"] > [data-ui-scroll-area-thumb][data-orientation=\"vertical\"]"),
+			horizontalThumb: x_(e, "[data-ui-scroll-area-scrollbar][data-orientation=\"horizontal\"] > [data-ui-scroll-area-thumb][data-orientation=\"horizontal\"]"),
+			corner: x_(e, "[data-ui-scroll-area-corner]")
 		};
 	},
 	scheduleSync() {
@@ -11154,7 +11177,7 @@ var Hg = (e, t) => t.value || e.dataset.value || e.textContent?.trim() || "", Ug
 	},
 	sync() {
 		let e = this.elements(), { viewport: t } = e;
-		this.overflowX = Zg(this.props.orientation, "x") && t.scrollWidth > t.clientWidth + 1, this.overflowY = Zg(this.props.orientation, "y") && t.scrollHeight > t.clientHeight + 1, Q.setPresence({
+		this.overflowX = h_(this.props.orientation, "x") && t.scrollWidth > t.clientWidth + 1, this.overflowY = h_(this.props.orientation, "y") && t.scrollHeight > t.clientHeight + 1, Q.setPresence({
 			el: this.$el,
 			attr: "data-overflow-x",
 			present: this.overflowX
@@ -11187,7 +11210,7 @@ var Hg = (e, t) => t.value || e.dataset.value || e.textContent?.trim() || "", Ug
 	updateGeometry(e) {
 		let { viewport: t } = e, n = (e, n, r, i) => {
 			if (!n || !r || !i) return r && (r.style.width = "", r.style.height = "", r.style.transform = ""), null;
-			let a = e === "y" ? n.clientHeight : n.clientWidth, o = e === "y" ? t.clientHeight : t.clientWidth, s = e === "y" ? t.scrollHeight : t.scrollWidth, c = Math.max(1, s - o), l = Math.min(a, Math.max(qg, o / s * a)), u = Math.max(0, a - l);
+			let a = e === "y" ? n.clientHeight : n.clientWidth, o = e === "y" ? t.clientHeight : t.clientWidth, s = e === "y" ? t.scrollHeight : t.scrollWidth, c = Math.max(1, s - o), l = Math.min(a, Math.max(d_, o / s * a)), u = Math.max(0, a - l);
 			return e === "y" ? (r.style.height = `${l}px`, r.style.width = "") : (r.style.width = `${l}px`, r.style.height = ""), {
 				trackLength: a,
 				thumbLength: l,
@@ -11200,11 +11223,11 @@ var Hg = (e, t) => t.value || e.dataset.value || e.textContent?.trim() || "", Ug
 	updateThumbPositions(e) {
 		let { viewport: t } = e;
 		if (e.verticalThumb && this.verticalGeometry) {
-			let { maxOffset: n, maxScroll: r } = this.verticalGeometry, i = n * Xg(t.scrollTop / r, 0, 1);
+			let { maxOffset: n, maxScroll: r } = this.verticalGeometry, i = n * m_(t.scrollTop / r, 0, 1);
 			e.verticalThumb.style.transform = `translate3d(0, ${i}px, 0)`;
 		}
 		if (e.horizontalThumb && this.horizontalGeometry) {
-			let { maxOffset: n, maxScroll: r } = this.horizontalGeometry, i = n * Xg($g(t) / r, 0, 1);
+			let { maxOffset: n, maxScroll: r } = this.horizontalGeometry, i = n * m_(__(t) / r, 0, 1);
 			e.horizontalThumb.style.transform = `translate3d(${i}px, 0, 0)`;
 		}
 	},
@@ -11232,7 +11255,7 @@ var Hg = (e, t) => t.value || e.dataset.value || e.textContent?.trim() || "", Ug
 			e && Q.setPresence({
 				el: e,
 				attr: "data-dragging",
-				present: this.dragging?.axis === t_(e)
+				present: this.dragging?.axis === y_(e)
 			});
 		}), e.corner && Q.setPresence({
 			el: e.corner,
@@ -11247,7 +11270,7 @@ var Hg = (e, t) => t.value || e.dataset.value || e.textContent?.trim() || "", Ug
 				attr: "data-scrolling",
 				present: !1
 			}), this.updateVisibility(this.elements());
-		}, Jg);
+		}, f_);
 	},
 	clearFadeTimer() {
 		this.fadeTimer &&= (window.clearTimeout(this.fadeTimer), 0);
@@ -11264,7 +11287,7 @@ var Hg = (e, t) => t.value || e.dataset.value || e.textContent?.trim() || "", Ug
 		if (this.props.disabled) return;
 		let n = this.elements(), r = n.viewport, i = t === "y" ? n.verticalScrollbar : n.horizontalScrollbar, a = t === "y" ? n.verticalThumb : n.horizontalThumb, o = t === "y" ? this.overflowY : this.overflowX;
 		if (!i || !a || !o) return;
-		let s = t === "y" ? i.clientHeight : i.clientWidth, c = t === "y" ? a.offsetHeight : a.offsetWidth, l = t === "y" ? Math.max(0, r.scrollHeight - r.clientHeight) : Math.max(0, r.scrollWidth - r.clientWidth), u = t === "y" ? r.scrollTop : $g(r);
+		let s = t === "y" ? i.clientHeight : i.clientWidth, c = t === "y" ? a.offsetHeight : a.offsetWidth, l = t === "y" ? Math.max(0, r.scrollHeight - r.clientHeight) : Math.max(0, r.scrollWidth - r.clientWidth), u = t === "y" ? r.scrollTop : __(r);
 		this.dragging = {
 			axis: t,
 			pointerId: e.pointerId,
@@ -11283,7 +11306,7 @@ var Hg = (e, t) => t.value || e.dataset.value || e.textContent?.trim() || "", Ug
 		if (!this.dragging || this.dragging.pointerId !== e.pointerId) return;
 		e.preventDefault();
 		let t = this.elements().viewport, n = (this.dragging.axis === "y" ? e.clientY : e.clientX) - this.dragging.startPointer, r = Math.max(1, this.dragging.trackLength - this.dragging.thumbLength), i = this.dragging.startScroll + n / r * this.dragging.maxScroll;
-		this.dragging.axis === "y" ? t.scrollTop = Xg(i, 0, this.dragging.maxScroll) : e_(t, i), this.schedulePositionSync();
+		this.dragging.axis === "y" ? t.scrollTop = m_(i, 0, this.dragging.maxScroll) : v_(t, i), this.schedulePositionSync();
 	},
 	onPointerUp(e) {
 		if (!this.dragging || this.dragging.pointerId !== e.pointerId) return;
@@ -11293,9 +11316,9 @@ var Hg = (e, t) => t.value || e.dataset.value || e.textContent?.trim() || "", Ug
 		} catch {}
 		this.dragging = null, this.startFadeTimer(), this.sync();
 	}
-}), a_ = (e) => {
-	e.data("UiScrollArea", () => i_());
-}, o_ = Y({ definition: {
+}), C_ = (e) => {
+	e.data("UiScrollArea", () => S_());
+}, w_ = Y({ definition: {
 	component: "ui.badge",
 	parts: {
 		root: {
@@ -11306,8 +11329,8 @@ var Hg = (e, t) => t.value || e.dataset.value || e.textContent?.trim() || "", Ug
 			],
 			variants: {
 				variant: {
-					soft: "bg-base-a2 text-foreground-muted",
-					surface: "bg-surface text-foreground shadow-border",
+					soft: "bg-current/10 text-foreground-muted",
+					surface: "bg-surface-panel text-foreground shadow-border",
 					outline: "border border-border bg-transparent text-foreground-muted",
 					solid: "bg-base-12 text-base-1 shadow-1"
 				},
@@ -11325,10 +11348,6 @@ var Hg = (e, t) => t.value || e.dataset.value || e.textContent?.trim() || "", Ug
 					lg: "min-h-control-lg px-3 text-sm",
 					xlg: "min-h-control-xlg px-4 text-sm"
 				},
-				rounded: {
-					true: "rounded-full",
-					false: "rounded-2"
-				},
 				insetLeft: {
 					true: "",
 					false: ""
@@ -11352,56 +11371,56 @@ var Hg = (e, t) => t.value || e.dataset.value || e.textContent?.trim() || "", Ug
 						variant: "soft",
 						color: "accent"
 					},
-					class: "bg-accent-surface text-accent-text"
+					class: "text-accent-text"
 				},
 				{
 					when: {
 						variant: "soft",
 						color: "success"
 					},
-					class: "bg-success-surface text-success-text"
+					class: "text-success-text"
 				},
 				{
 					when: {
 						variant: "soft",
 						color: "warning"
 					},
-					class: "bg-warning-surface text-warning-text"
+					class: "text-warning-text"
 				},
 				{
 					when: {
 						variant: "soft",
 						color: "danger"
 					},
-					class: "bg-danger-surface text-danger-text"
+					class: "text-danger-text"
 				},
 				{
 					when: {
 						variant: "surface",
 						color: "accent"
 					},
-					class: "border border-accent-border bg-surface text-accent-text shadow-none"
+					class: "border border-accent-border bg-surface-panel text-accent-text shadow-none"
 				},
 				{
 					when: {
 						variant: "surface",
 						color: "success"
 					},
-					class: "border border-success-border bg-surface text-success-text shadow-none"
+					class: "border border-success-border bg-surface-panel text-success-text shadow-none"
 				},
 				{
 					when: {
 						variant: "surface",
 						color: "warning"
 					},
-					class: "border border-warning-border bg-surface text-warning-text shadow-none"
+					class: "border border-warning-border bg-surface-panel text-warning-text shadow-none"
 				},
 				{
 					when: {
 						variant: "surface",
 						color: "danger"
 					},
-					class: "border border-danger-border bg-surface text-danger-text shadow-none"
+					class: "border border-danger-border bg-surface-panel text-danger-text shadow-none"
 				},
 				{
 					when: {
@@ -11459,6 +11478,7 @@ var Hg = (e, t) => t.value || e.dataset.value || e.textContent?.trim() || "", Ug
 					},
 					class: "bg-danger-solid text-danger-contrast shadow-1"
 				},
+				...Qp,
 				{
 					when: {
 						insetLeft: !0,
@@ -11506,7 +11526,7 @@ var Hg = (e, t) => t.value || e.dataset.value || e.textContent?.trim() || "", Ug
 				variant: "soft",
 				color: "neutral",
 				size: "sm",
-				rounded: !1,
+				radius: "sm",
 				insetLeft: !1,
 				insetRight: !1,
 				insetTop: !1,
@@ -11551,39 +11571,43 @@ var Hg = (e, t) => t.value || e.dataset.value || e.textContent?.trim() || "", Ug
 		},
 		closeIcon: { base: "size-icon-xs shrink-0 fill-current text-current" }
 	}
-} }), s_ = [
+} }), T_ = [
 	"soft",
 	"surface",
 	"outline",
 	"solid"
-], c_ = [
+], E_ = [
 	"neutral",
 	"accent",
 	"success",
 	"warning",
 	"danger"
-], l_ = Fp, u_ = ["span", "button"], d_ = Rp, f_ = Lp;
-J(s_, "soft"), J(c_, "neutral"), J(l_, "sm"), J(u_, "span"), J(d_, "button"), J(f_, "mini"), J(d_, "button"), G.default("close"), J(f_, "mini"), J(l_, "sm"), G.default("Remove");
+], D_ = Fp, O_ = ["span", "button"], k_ = Rp, A_ = Lp, j_ = qp;
+J(T_, "soft"), J(E_, "neutral"), J(D_, "sm"), J(j_, "sm"), J(O_, "span"), J(k_, "button"), J(A_, "mini"), J(k_, "button"), G.default("close"), J(A_, "mini"), J(D_, "sm"), G.default("Remove");
 //#endregion
 //#region src/components/select/contract.ts
-var p_ = [
+var M_ = [
 	"listbox",
 	"combobox",
 	"pillbox",
 	"native"
-], m_ = Ip, h_ = Fp, g_ = Bp, __ = zp, v_ = Lp, y_ = {
+], N_ = Ip, P_ = Fp, F_ = qp, I_ = Bp, L_ = zp, R_ = Lp, z_ = {
 	name: G,
 	value: G,
 	values: G,
 	placeholder: G,
-	mode: J(p_, "listbox"),
+	mode: J(M_, "listbox"),
 	multiple: q,
 	searchable: q,
 	filter: q.default(!0),
 	clearable: q,
 	clear: J(["stay", "close"], "stay"),
 	suffix: G.default("selected"),
-	mark: J(["check", "checkbox"], "check"),
+	mark: J([
+		"check",
+		"checkbox",
+		"none"
+	], "check"),
 	open: q,
 	disabled: q,
 	readonly: q,
@@ -11592,10 +11616,11 @@ var p_ = [
 	autoHighlight: q.default(!0),
 	loop: q.default(!0),
 	path: G,
-	size: J(h_, "lg"),
-	variant: J(m_, "outline"),
-	side: J(g_, "bottom"),
-	align: J(__, "start"),
+	size: J(P_, "lg"),
+	variant: J(N_, "outline"),
+	radius: J(F_, "md"),
+	side: J(I_, "bottom"),
+	align: J(L_, "start"),
 	offset: K.clamp(-100, 100).default(0),
 	gap: K.clamp(0, 50).default(4),
 	empty: G.default("No results found."),
@@ -11603,33 +11628,33 @@ var p_ = [
 	searchIcon: G.default("search"),
 	icon: G,
 	iconTrailing: G.default("chevron__down"),
-	iconVariant: J(v_, "outline"),
+	iconVariant: J(R_, "outline"),
 	buttonClass: G,
 	inputClass: G,
 	searchClass: G,
 	listboxClass: G,
 	optionClass: G,
-	chipVariant: J(s_, "soft"),
-	chipColor: J(c_, "neutral"),
+	chipVariant: J(T_, "soft"),
+	chipColor: J(E_, "neutral"),
 	chipClass: G,
 	class: G
 };
-J(v_, "outline"), K.clamp(0, 100).default(0);
+J(R_, "outline"), K.clamp(0, 100).default(0);
 //#endregion
 //#region src/components/select/styles.ts
-var b_ = Y({ definition: {
+var B_ = Y({ definition: {
 	component: "ui.select",
 	parts: {
 		root: { base: "relative inline-grid w-full min-w-0" },
 		control: {
-			base: [Kp, qp],
+			base: [$p, em],
 			variants: {
-				size: Jp,
-				variant: Yp,
+				size: tm,
+				variant: nm,
 				mode: {
 					listbox: "",
 					combobox: "",
-					pillbox: "flex-wrap gap-1 py-1",
+					pillbox: "flex-wrap gap-1 py-0.5",
 					native: ""
 				},
 				empty: {
@@ -11643,10 +11668,11 @@ var b_ = Y({ definition: {
 					empty: !1
 				},
 				class: "!pl-1.5"
-			}],
+			}, ...Qp],
 			defaults: {
 				size: "lg",
 				variant: "outline",
+				radius: "md",
 				mode: "listbox",
 				empty: !1
 			}
@@ -11654,9 +11680,9 @@ var b_ = Y({ definition: {
 		button: { base: ["flex min-w-0 flex-1 items-center gap-2 border-0 bg-transparent p-0 text-left text-inherit outline-none", "disabled:cursor-not-allowed"] },
 		value: { base: "min-w-0 flex-1" },
 		placeholder: { base: "min-w-0 flex-1 text-foreground" },
-		input: { base: ["w-full min-w-16 flex-1", Xp] },
+		input: { base: ["w-full min-w-16 flex-1", rm] },
 		search: { base: ["flex min-h-control-xlg shrink-0 items-center gap-2 border-b border-popover-border px-3", "text-sm text-foreground"] },
-		searchInput: { base: ["min-w-0 flex-1 text-sm", Xp] },
+		searchInput: { base: ["min-w-0 flex-1 text-sm", rm] },
 		chips: { base: "flex min-w-0 flex-wrap items-center gap-1" },
 		chip: { base: ["max-w-64"] },
 		chipLabel: { base: "block min-w-0 flex-1 truncate" },
@@ -11669,48 +11695,61 @@ var b_ = Y({ definition: {
 			} },
 			defaults: { position: "leading" }
 		},
-		action: { base: Zp },
-		popover: { base: [$p, "max-h-combobox-listbox overflow-hidden"] },
-		viewport: { base: "grid auto-rows-min content-start max-h-combobox-listbox gap-1 overflow-auto p-popover" },
-		option: { base: tm },
-		optionLabel: { base: "min-w-0 flex-1" },
+		action: { base: im },
+		popover: { base: [om, "overflow-hidden"] },
+		viewport: { base: "grid auto-rows-min content-start max-h-combobox-listbox gap-1 overflow-x-hidden overflow-y-auto p-popover" },
+		option: { base: [
+			cm,
+			"[&:has([data-ui-select-option-label]>*+*)]:h-auto",
+			"[&:has([data-ui-select-option-label]>*+*)]:items-start",
+			"[&:has([data-ui-select-option-label]>*+*)]:py-2"
+		] },
+		optionLabel: { base: "min-w-0 flex-1 truncate" },
 		optionMeta: { base: "ml-auto text-menu-item-muted" },
 		optionIcon: {
-			base: nm,
+			base: lm,
 			variants: { position: {
 				leading: "",
 				trailing: "ml-auto"
 			} },
 			defaults: { position: "leading" }
 		},
-		optionIndicator: { base: rm },
-		optionCheckbox: { base: ["ml-auto inline-flex size-icon-sm shrink-0 items-center justify-center rounded-1 border border-border bg-surface text-accent-contrast", "data-selected:border-accent-solid data-selected:bg-accent-solid"] },
+		optionIndicator: { base: um },
+		optionCheckbox: { base: ["ml-auto inline-flex size-icon-sm shrink-0 items-center justify-center rounded-1 border border-border bg-surface-panel text-accent-contrast", "data-selected:border-accent-solid data-selected:bg-accent-solid"] },
 		group: { base: "grid auto-rows-min content-start gap-1" },
 		label: { base: "px-menu-item-x py-1 text-menu-heading-fg" },
 		empty: { base: "px-menu-item-x py-2 text-sm text-foreground-muted" },
 		separatorRoot: { base: "-mx-popover my-popover h-px" },
 		separatorRule: { base: "h-px w-full border-0 bg-menu-separator" },
 		nativeWrapper: { base: "relative w-full min-w-0" },
-		native: { base: [Qp, "appearance-none pe-10"] },
+		native: {
+			base: [am, "appearance-none pe-10"],
+			variants: { size: tm },
+			compounds: Qp,
+			defaults: {
+				size: "lg",
+				radius: "md"
+			}
+		},
 		nativeIcon: { base: "pointer-events-none absolute right-3 top-1/2 size-icon -translate-y-1/2 fill-current text-icon" }
 	}
-} }), x_ = "[data-ui-select-option], [data-ui-select-option-create]", S_ = "template[data-ui-select-option-selected-template]", C_ = /* @__PURE__ */ new WeakSet(), w_ = (e, t) => e.composedPath().some((e) => e instanceof Element && e.matches(t)), T_ = (e) => {
+} }), V_ = "[data-ui-select-option], [data-ui-select-option-create]", H_ = "template[data-ui-select-option-selected-template]", U_ = /* @__PURE__ */ new WeakSet(), W_ = (e, t) => e.composedPath().some((e) => e instanceof Element && e.matches(t)), G_ = (e) => {
 	if (!(e instanceof Element)) {
-		e.childNodes.forEach((e) => T_(e));
+		e.childNodes.forEach((e) => G_(e));
 		return;
 	}
 	Array.from(e.attributes).forEach((t) => {
 		let n = t.name;
 		(n === "id" || n === "role" || n === "tabindex" || n.startsWith("aria-selected") || n.startsWith("aria-disabled") || n.startsWith("data-ui-select-option") || n.startsWith("data-selected") || n.startsWith("data-highlighted") || n.startsWith("data-disabled") || n.startsWith("x-") || n.startsWith("@") || n.startsWith(":") || n.startsWith("on")) && e.removeAttribute(n);
-	}), e.childNodes.forEach((e) => T_(e)), e.setAttribute("x-ignore", "true");
-}, E_ = (e) => {
+	}), e.childNodes.forEach((e) => G_(e)), e.setAttribute("x-ignore", "true");
+}, K_ = (e) => {
 	let t = document.createDocumentFragment();
 	return Array.from(e).forEach((e) => {
-		if (e instanceof HTMLTemplateElement && e.matches(S_)) return;
+		if (e instanceof HTMLTemplateElement && e.matches(H_)) return;
 		let n = e.cloneNode(!0);
-		T_(n), t.append(n);
+		G_(n), t.append(n);
 	}), t;
-}, D_ = () => ({
+}, q_ = () => ({
 	isOpen: !1,
 	search: "",
 	selectedValues: [],
@@ -11730,7 +11769,7 @@ var b_ = Y({ definition: {
 	init() {
 		this.props = W({
 			el: this.$el,
-			schema: y_
+			schema: z_
 		}), this.buttonId = this.$id("select-button"), this.inputId = this.$id("select-input"), this.listboxId = this.$id("select-listbox"), this.isOpen = this.props.open && !this.props.disabled && !this.props.readonly;
 		let e = this.options(), t = this.props.multiple ? [...Q.splitControlValues(this.props.values), ...Q.splitControlValues(this.props.value)] : Q.splitControlValues(this.props.value).slice(0, 1), n = e.filter((e) => Q.asBool({ value: e.el.dataset.selected })).map((e) => e.value);
 		this.selectedValues = t.length > 0 ? t : n, this.props.multiple || (this.selectedValues = this.selectedValues.slice(0, 1)), this.selectedLabels = this.selectedValues.map((t) => e.find((e) => e.value === t)?.selectedLabel ?? t), this.popover = Q.createAnchoredPopover({
@@ -11750,8 +11789,8 @@ var b_ = Y({ definition: {
 		this.props.disconnect(), this.popoverMotion?.destroy(), this.listeners.forEach((e) => e()), this.listeners = [], this.observer?.disconnect(), this.unmount();
 	},
 	get root() {
-		return Q.props({ inputs: [X({
-			part: b_.parts.root,
+		return Q.mergeBindings({ inputs: [X({
+			part: B_.parts.root,
 			props: this.props,
 			className: this.props.class
 		}), {
@@ -11794,7 +11833,7 @@ var b_ = Y({ definition: {
 		return this.$el.querySelector("[data-ui-select-hidden-inputs]");
 	},
 	options() {
-		let e = Q.normalizeOptionText(this.search), t = Array.from(this.$el.querySelectorAll(x_)).map((t, n) => {
+		let e = Q.normalizeOptionText(this.search), t = Array.from(this.$el.querySelectorAll(V_)).map((t, n) => {
 			let r = this.resolveOptionLabel(t), i = this.optionValue(t, r), a = this.resolveSelectedLabel(t, r), o = Q.asBool({ value: t.dataset.disabled }), s = this.selectedValues.includes(i), c = t.hasAttribute("data-ui-select-option-create"), l = !this.props.filter || e === "" || Q.normalizeOptionText(`${r} ${t.dataset.suffix ?? ""}`).includes(e), u = e !== "" && Q.normalizeOptionText(r) === e, d = Number(t.dataset.minLength ?? "0"), f = c ? e.length >= d && !u : l;
 			return {
 				el: t,
@@ -12052,7 +12091,7 @@ var b_ = Y({ definition: {
 	syncControl() {
 		let e = this.control();
 		e.setAttribute("class", X({
-			part: b_.parts.control,
+			part: B_.parts.control,
 			props: {
 				...this.props,
 				mode: this.controlLayoutMode(),
@@ -12096,7 +12135,7 @@ var b_ = Y({ definition: {
 			e.id ||= this.inputId;
 			let t = this.selectedSummary();
 			e.className = X({
-				part: b_.parts.input,
+				part: B_.parts.input,
 				className: this.props.inputClass
 			}), this.isPillbox() ? (e.value = this.search, e.placeholder = this.hasSelection() ? "" : this.props.placeholder) : (e.value = this.isOpen && this.inputSearching ? this.search : t, e.placeholder = this.props.placeholder), e.setAttribute("role", "combobox"), e.setAttribute("autocomplete", "off"), e.setAttribute("aria-autocomplete", "list"), e.setAttribute("aria-expanded", this.isOpen ? "true" : "false"), e.setAttribute("aria-controls", this.listboxId), Q.syncNativeControl({
 				input: e,
@@ -12120,7 +12159,7 @@ var b_ = Y({ definition: {
 	syncListbox() {
 		let e = this.popoverEl(), t = this.listbox();
 		e.id = `${this.listboxId}-popover`, e.setAttribute("class", X({
-			part: b_.parts.popover,
+			part: B_.parts.popover,
 			props: this.props,
 			className: this.props.listboxClass
 		})), e.setAttribute("popover", "manual"), e.dataset.state = this.isOpen ? "open" : "closed", e.hidden = !this.isOpen, t.id = this.listboxId, t.setAttribute("role", "listbox"), t.setAttribute("tabindex", "-1"), t.setAttribute("aria-labelledby", this.trigger().id), this.props.multiple ? t.setAttribute("aria-multiselectable", "true") : t.removeAttribute("aria-multiselectable");
@@ -12176,26 +12215,26 @@ var b_ = Y({ definition: {
 		});
 		if (i === this.renderedChipsKey || (this.renderedChipsKey = i, e.replaceChildren(), e.hidden)) return;
 		let a = X({
-			part: o_.parts.root,
+			part: w_.parts.root,
 			props: {
 				variant: this.props.chipVariant,
 				color: this.props.chipColor,
 				size: "sm",
-				rounded: !1
+				radius: "sm"
 			},
 			className: X({
-				part: b_.parts.chip,
+				part: B_.parts.chip,
 				props: {},
 				className: this.props.chipClass
 			})
-		}), o = X({ part: b_.parts.chipLabel }), s = X({
-			part: o_.parts.close,
+		}), o = X({ part: B_.parts.chipLabel }), s = X({
+			part: w_.parts.close,
 			props: { size: "sm" },
-			className: X({ part: b_.parts.chipRemove })
+			className: X({ part: B_.parts.chipRemove })
 		});
 		r.forEach((t) => {
 			let n = document.createElement("span");
-			n.className = a, n.setAttribute("data-ui-badge", ""), n.setAttribute("data-ui-select-chip", ""), n.dataset.variant = this.props.chipVariant, n.dataset.color = this.props.chipColor, n.dataset.size = "sm", n.dataset.value = t.value, Q.setPresence({
+			n.className = a, n.setAttribute("data-ui-badge", ""), n.setAttribute("data-ui-select-chip", ""), n.dataset.variant = this.props.chipVariant, n.dataset.color = this.props.chipColor, n.dataset.size = "sm", n.dataset.radius = "sm", n.dataset.value = t.value, Q.setPresence({
 				el: n,
 				attr: "data-disabled",
 				present: t.disabled,
@@ -12242,7 +12281,7 @@ var b_ = Y({ definition: {
 			target: t,
 			event: "click",
 			handler: (e) => {
-				C_.add(e);
+				U_.add(e);
 				let n = e.target;
 				if (n instanceof Element && n.closest("[data-ui-select-clear], [data-ui-select-button-clear]")) {
 					this.clear(e);
@@ -12283,8 +12322,8 @@ var b_ = Y({ definition: {
 					return;
 				}
 				if (n.closest("[data-ui-select-chip-remove]")) return;
-				if (w_(e, "[data-ui-select-trigger]")) {
-					if (C_.has(e)) return;
+				if (W_(e, "[data-ui-select-trigger]")) {
+					if (U_.has(e)) return;
 					if (this.trigger().focus({ preventScroll: !0 }), t instanceof HTMLInputElement) {
 						this.isOpen || this.openSelect(e);
 						return;
@@ -12339,7 +12378,7 @@ var b_ = Y({ definition: {
 			event: "pointerdown",
 			handler: (e) => {
 				let t = e.target;
-				t instanceof Element && t.closest(x_) && e.preventDefault();
+				t instanceof Element && t.closest(V_) && e.preventDefault();
 			},
 			cleanup: this.listeners
 		}), Q.addListener({
@@ -12352,7 +12391,7 @@ var b_ = Y({ definition: {
 					this.setSearch("");
 					return;
 				}
-				let n = t.closest(x_), r = n ? this.options().find((e) => e.el === n) : void 0;
+				let n = t.closest(V_), r = n ? this.options().find((e) => e.el === n) : void 0;
 				r && this.selectOption(r, e);
 			},
 			cleanup: this.listeners
@@ -12362,7 +12401,7 @@ var b_ = Y({ definition: {
 			handler: (e) => {
 				let t = e.target;
 				if (!(t instanceof Element)) return;
-				let n = t.closest(x_), r = n ? this.options().find((e) => e.el === n) : void 0;
+				let n = t.closest(V_), r = n ? this.options().find((e) => e.el === n) : void 0;
 				r && !r.disabled && this.setActive(r);
 			},
 			cleanup: this.listeners
@@ -12389,10 +12428,10 @@ var b_ = Y({ definition: {
 		return e ? this.options().find((t) => t.value === e) ?? null : null;
 	},
 	selectedContent(e) {
-		let t = e.el.querySelector(S_);
-		if (t) return E_(t.content.childNodes);
+		let t = e.el.querySelector(H_);
+		if (t) return K_(t.content.childNodes);
 		let n = e.el.querySelector("[data-ui-select-option-selected-content]") ?? e.el.querySelector("[data-ui-select-option-label]");
-		if (n) return E_(n.childNodes);
+		if (n) return K_(n.childNodes);
 		let r = document.createDocumentFragment();
 		return r.append(document.createTextNode(e.selectedLabel)), r;
 	},
@@ -12410,24 +12449,24 @@ var b_ = Y({ definition: {
 	optionValue(e, t) {
 		return e.dataset.value || t;
 	}
-}), O_ = (e) => {
-	e.data("UiSelect", () => D_());
-}, k_ = ["left", "right"], A_ = [
+}), J_ = (e) => {
+	e.data("UiSelect", () => q_());
+}, Y_ = ["left", "right"], X_ = [
 	"none",
 	"mobile",
 	"desktop",
 	"both"
-], j_ = [
+], Z_ = [
 	"toggle",
 	"open",
 	"close",
 	"stash",
 	"expand"
-], M_ = ["a", "button"], N_ = ["ghost", "surface"], P_ = ["neutral", "accent"], F_ = {
+], Q_ = ["a", "button"], $_ = ["ghost", "surface"], ev = ["neutral", "accent"], tv = {
 	id: G.default("ui-sidebar"),
-	side: J(k_, "left"),
+	side: J(Y_, "left"),
 	sticky: q.default(!0),
-	collapse: J(A_, "mobile"),
+	collapse: J(X_, "mobile"),
 	open: q,
 	stashed: q,
 	persist: q.default(!0),
@@ -12440,20 +12479,20 @@ var b_ = Y({ definition: {
 	resizable: q,
 	class: G
 };
-J(M_, "a"), J(N_, "ghost"), J(P_, "neutral"), q.default(!0);
-var I_ = {
+J(Q_, "a"), J($_, "ghost"), J(ev, "neutral"), q.default(!0);
+var nv = {
 	target: G,
 	icon: G.default("side_panel"),
 	label: G.default("Toggle sidebar"),
-	action: J(j_, "toggle"),
+	action: J(Z_, "toggle"),
 	class: G
-}, L_ = Y({ definition: {
+}, rv = Y({ definition: {
 	component: "ui.sidebar",
 	parts: {
 		root: {
 			base: [
 				"fixed inset-y-0 z-dialog flex min-h-0 w-[var(--ui-sidebar-mobile-width)] flex-col overflow-hidden",
-				"border-base-a3 bg-surface-muted text-foreground shadow-2 outline-none",
+				"border-base-a3 bg-chrome text-foreground shadow-2 outline-none",
 				"data-[mobile-state=closed]:-translate-x-full data-[mobile-state=open]:translate-x-0",
 				"lg:top-0 lg:z-auto lg:w-[var(--ui-sidebar-width)] lg:translate-x-0 lg:data-[mobile-state=closed]:translate-x-0 lg:data-[mobile-state=open]:translate-x-0 lg:shadow-none",
 				"lg:data-[desktop-state=stashed]:data-[drawer-state=closed]:data-[sidebar-exiting=false]:hidden",
@@ -12483,9 +12522,10 @@ var I_ = {
 		nav: { base: "grid gap-1" },
 		item: {
 			base: [
-				"group/sidebar-item flex h-control-md w-full min-w-0 items-center gap-2 rounded-3 px-2",
+				"group/sidebar-item flex h-control-md w-full min-w-0 select-none items-center gap-2 rounded-3 px-2",
 				"border border-transparent text-left text-sm font-medium text-foreground outline-none",
-				em,
+				"cursor-default",
+				sm,
 				"focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 focus-visible:ring-offset-app",
 				"data-disabled:pointer-events-none data-disabled:opacity-50"
 			],
@@ -12524,7 +12564,7 @@ var I_ = {
 		group: { base: "relative grid gap-1" },
 		groupSummary: {
 			base: [
-				"block h-control-md cursor-pointer list-none rounded-3 text-xs font-medium text-foreground-muted outline-none",
+				"block h-control-md cursor-default select-none list-none rounded-3 text-xs font-medium text-foreground-muted outline-none",
 				"hover:bg-base-a2 hover:text-foreground focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 focus-visible:ring-offset-app",
 				"[&::-webkit-details-marker]:hidden"
 			],
@@ -12535,7 +12575,7 @@ var I_ = {
 			defaults: { hasActions: !1 }
 		},
 		groupSummaryInner: { base: "flex h-full min-w-0 items-center gap-2 px-2" },
-		groupHeading: { base: "flex min-h-control-md min-w-0 items-center gap-2 px-2 py-1" },
+		groupHeading: { base: "flex min-h-control-md min-w-0 select-none items-center gap-2 px-2 py-1 cursor-default" },
 		groupIcon: { base: "size-icon-xs shrink-0 fill-current text-icon group-open/sidebar-group:rotate-90" },
 		groupLabel: { base: "min-w-0 flex-1" },
 		groupHeadingLabel: { base: "min-w-0 flex-1" },
@@ -12569,35 +12609,35 @@ var I_ = {
 			defaults: { side: "left" }
 		}
 	}
-} }), R_ = {
-	target: I_.target,
-	action: I_.action,
-	class: I_.class
-}, z_ = {
-	target: I_.target,
-	action: I_.action,
-	class: I_.class
-}, B_ = /* @__PURE__ */ new Set(), V_ = {
+} }), iv = {
+	target: nv.target,
+	action: nv.action,
+	class: nv.class
+}, av = {
+	target: nv.target,
+	action: nv.action,
+	class: nv.class
+}, ov = /* @__PURE__ */ new Set(), sv = {
 	sm: 640,
 	md: 768,
 	lg: 1024,
 	xl: 1280,
 	"2xl": 1536
-}, H_ = (e, t) => !t?.id || t.id === e.id, U_ = (e) => {
-	let t = V_[e];
-	return t ? `(min-width: ${t}px)` : /^\d+$/.test(e) ? `(min-width: ${e}px)` : /^\d+(\.\d+)?(px|rem|em)$/.test(e) ? `(min-width: ${e})` : `(min-width: ${V_.lg}px)`;
-}, W_ = (e) => e instanceof CustomEvent && typeof e.detail == "object" && e.detail !== null ? e.detail : {}, G_ = (e) => e.target instanceof Element && e.target.hasAttribute("data-ui-sidebar"), K_ = (e, t) => {
-	if (G_(e)) return;
-	let n = W_(e);
-	B_.forEach((e) => {
-		H_(e, n) && e.perform(n.action ?? t, n.trigger ?? null);
+}, cv = (e, t) => !t?.id || t.id === e.id, lv = (e) => {
+	let t = sv[e];
+	return t ? `(min-width: ${t}px)` : /^\d+$/.test(e) ? `(min-width: ${e}px)` : /^\d+(\.\d+)?(px|rem|em)$/.test(e) ? `(min-width: ${e})` : `(min-width: ${sv.lg}px)`;
+}, uv = (e) => e instanceof CustomEvent && typeof e.detail == "object" && e.detail !== null ? e.detail : {}, dv = (e) => e.target instanceof Element && e.target.hasAttribute("data-ui-sidebar"), fv = (e, t) => {
+	if (dv(e)) return;
+	let n = uv(e);
+	ov.forEach((e) => {
+		cv(e, n) && e.perform(n.action ?? t, n.trigger ?? null);
 	});
-}, q_ = (() => {
+}, pv = (() => {
 	let e = !1;
 	return () => {
-		e || typeof document > "u" || (document.addEventListener("ui:sidebar-open", (e) => K_(e, "open")), document.addEventListener("ui:sidebar-close", (e) => K_(e, "close")), document.addEventListener("ui:sidebar-toggle", (e) => K_(e, "toggle")), e = !0);
+		e || typeof document > "u" || (document.addEventListener("ui:sidebar-open", (e) => fv(e, "open")), document.addEventListener("ui:sidebar-close", (e) => fv(e, "close")), document.addEventListener("ui:sidebar-toggle", (e) => fv(e, "toggle")), e = !0);
 	};
-})(), J_ = () => ({
+})(), mv = () => ({
 	props: null,
 	mobileOpen: !1,
 	desktopStashed: !1,
@@ -12622,18 +12662,18 @@ var I_ = {
 		return this.$el.id || this.props.id || "ui-sidebar";
 	},
 	init() {
-		q_(), this.props = W({
+		pv(), this.props = W({
 			el: this.$el,
-			schema: F_
+			schema: tv
 		});
 		let e = this.storedStashed();
-		this.currentWidth = this.props.width, this.mobileOpen = this.props.open, this.desktopStashed = e ?? this.props.stashed, this.mediaQuery = window.matchMedia(U_(this.props.breakpoint)), this.desktopMode = this.isDesktop(), this.drawerMotion = Q.motion.createPresenceLifecycle({
+		this.currentWidth = this.props.width, this.mobileOpen = this.props.open, this.desktopStashed = e ?? this.props.stashed, this.mediaQuery = window.matchMedia(lv(this.props.breakpoint)), this.desktopMode = this.isDesktop(), this.drawerMotion = Q.motion.createPresenceLifecycle({
 			element: () => this.$el,
 			preset: "sidebar"
 		}), this.backdropMotion = Q.motion.createPresenceLifecycle({
 			element: () => this.backdropEl(),
 			preset: "fade"
-		}), B_.add(this), Q.addListener({
+		}), ov.add(this), Q.addListener({
 			target: this.mediaQuery,
 			event: "change",
 			handler: () => this.handleBreakpointChange(),
@@ -12694,11 +12734,11 @@ var I_ = {
 		})), this.setupGroups(), this.syncAll();
 	},
 	destroy() {
-		this.props.disconnect(), this.drawerMotion?.destroy(), this.backdropMotion?.destroy(), this.clearSidebarExitFreeze(), B_.delete(this), this.cleanup.forEach((e) => e()), this.cleanup = [], this.hasScrollLock &&= (Pp(), !1);
+		this.props.disconnect(), this.drawerMotion?.destroy(), this.backdropMotion?.destroy(), this.clearSidebarExitFreeze(), ov.delete(this), this.cleanup.forEach((e) => e()), this.cleanup = [], this.hasScrollLock &&= (Pp(), !1);
 	},
 	get root() {
-		return Q.props({ inputs: [Q.resolveStyle({
-			part: L_.parts.root,
+		return Q.mergeBindings({ inputs: [Q.resolveStyle({
+			part: rv.parts.root,
 			props: this.props,
 			className: this.props.class
 		}), {
@@ -13014,20 +13054,20 @@ var I_ = {
 			window.localStorage.setItem(this.storageKey(), this.desktopStashed ? "true" : "false");
 		} catch {}
 	}
-}), Y_ = () => ({
+}), hv = () => ({
 	props: null,
 	init() {
 		this.props = W({
 			el: this.$el,
-			schema: R_
+			schema: iv
 		});
 	},
 	destroy() {
 		this.props.disconnect();
 	},
 	get root() {
-		return Q.props({ inputs: [Q.resolveStyle({
-			part: L_.parts.toggle,
+		return Q.mergeBindings({ inputs: [Q.resolveStyle({
+			part: rv.parts.toggle,
 			props: {},
 			className: this.props.class
 		}), {
@@ -13050,20 +13090,20 @@ var I_ = {
 			}
 		}));
 	}
-}), X_ = () => ({
+}), gv = () => ({
 	props: null,
 	init() {
 		this.props = W({
 			el: this.$el,
-			schema: z_
+			schema: av
 		});
 	},
 	destroy() {
 		this.props.disconnect();
 	},
 	get root() {
-		return Q.props({ inputs: [Q.resolveStyle({
-			part: L_.parts.edge,
+		return Q.mergeBindings({ inputs: [Q.resolveStyle({
+			part: rv.parts.edge,
 			props: { side: this.$el.dataset.side || "left" },
 			className: this.props.class
 		}), {
@@ -13089,9 +13129,9 @@ var I_ = {
 			}
 		}));
 	}
-}), Z_ = (e) => {
-	e.data("UiSidebar", () => J_()), e.data("UiSidebarEdge", () => X_()), e.data("UiSidebarToggle", () => Y_());
-}, Q_ = Fp, $_ = Wp, ev = Hp, tv = {
+}), _v = (e) => {
+	e.data("UiSidebar", () => mv()), e.data("UiSidebarEdge", () => gv()), e.data("UiSidebarToggle", () => hv());
+}, vv = Fp, yv = Wp, bv = Hp, xv = {
 	name: G,
 	value: G.default("0"),
 	defaultValue: G,
@@ -13101,9 +13141,9 @@ var I_ = {
 	bigStep: K.default(10),
 	minStepsBetween: K.default(0),
 	range: q,
-	orientation: J(ev, "horizontal"),
-	size: J(Q_, "md"),
-	variant: J($_, "default"),
+	orientation: J(bv, "horizontal"),
+	size: J(vv, "md"),
+	variant: J(yv, "default"),
 	disabled: q,
 	required: q,
 	invalid: q,
@@ -13131,11 +13171,11 @@ var I_ = {
 K.default(0);
 //#endregion
 //#region src/components/slider/index.ts
-var nv = (e, t, n) => {
+var Sv = (e, t, n) => {
 	if (!Number.isFinite(n) || n <= 0) return e;
 	let r = Math.round((e - t) / n) * n + t, i = Math.max(0, `${n}`.split(".")[1]?.length ?? 0);
 	return Number(r.toFixed(i));
-}, $ = (e, t, n) => Math.min(n, Math.max(t, e)), rv = (e) => {
+}, $ = (e, t, n) => Math.min(n, Math.max(t, e)), Cv = (e) => {
 	let t = Math.min(e.min, e.max), n = Math.max(e.min, e.max), r = e.step > 0 ? e.step : 1;
 	return {
 		min: t,
@@ -13143,28 +13183,28 @@ var nv = (e, t, n) => {
 		step: r,
 		bigStep: e.bigStep > 0 ? e.bigStep : r * 10
 	};
-}, iv = (e, t) => {
+}, wv = (e, t) => {
 	let n = Number(e);
 	return Number.isFinite(n) ? n : t;
-}, av = (e, t) => {
-	let { min: n, max: r, step: i } = rv(e), a = (e.value || e.defaultValue || "").split(",").map((e) => e.trim()), o = t.lowerInput ?? t.singleInput, s = t.upperInput, c = (e.range, o?.value || a[0] || `${n}`), l = e.range ? s?.value || a[1] || `${r}` : c, u = nv($(iv(c, n), n, r), n, i), d = nv($(iv(l, r), n, r), n, i);
+}, Tv = (e, t) => {
+	let { min: n, max: r, step: i } = Cv(e), a = (e.value || e.defaultValue || "").split(",").map((e) => e.trim()), o = t.lowerInput ?? t.singleInput, s = t.upperInput, c = (e.range, o?.value || a[0] || `${n}`), l = e.range ? s?.value || a[1] || `${r}` : c, u = Sv($(wv(c, n), n, r), n, i), d = Sv($(wv(l, r), n, r), n, i);
 	if (!e.range) return {
 		lower: u,
 		upper: u
 	};
 	u > d && ([u, d] = [d, u]);
 	let f = Math.max(0, e.minStepsBetween) * i;
-	return d - u < f && (d = $(nv(u + f, n, i), n, r), d - u < f && (u = $(nv(d - f, n, i), n, r))), {
+	return d - u < f && (d = $(Sv(u + f, n, i), n, r), d - u < f && (u = $(Sv(d - f, n, i), n, r))), {
 		lower: u,
 		upper: d
 	};
-}, ov = (e, t, n) => n <= t ? 0 : $((e - t) / (n - t) * 100, 0, 100), sv = (e, t) => {
+}, Ev = (e, t, n) => n <= t ? 0 : $((e - t) / (n - t) * 100, 0, 100), Dv = (e, t) => {
 	let n = (t) => e.format === "percent" ? `${Math.round(t)}%` : String(t);
 	return e.range ? `${n(t.lower)} - ${n(t.upper)}` : n(t.lower);
-}, cv = (e, t, n) => {
-	let { min: r, max: i, step: a } = rv(n), o = e.getBoundingClientRect();
-	return nv($(r + $(n.orientation === "vertical" ? 1 - (t.clientY - o.top) / Math.max(o.height, 1) : (t.clientX - o.left) / Math.max(o.width, 1), 0, 1) * (i - r), r, i), r, a);
-}, lv = (e, t) => Math.abs(e - t.lower) <= Math.abs(e - t.upper) ? "lower" : "upper", uv = (e, t, n) => {
+}, Ov = (e, t, n) => {
+	let { min: r, max: i, step: a } = Cv(n), o = e.getBoundingClientRect();
+	return Sv($(r + $(n.orientation === "vertical" ? 1 - (t.clientY - o.top) / Math.max(o.height, 1) : (t.clientX - o.left) / Math.max(o.width, 1), 0, 1) * (i - r), r, i), r, a);
+}, kv = (e, t) => Math.abs(e - t.lower) <= Math.abs(e - t.upper) ? "lower" : "upper", Av = (e, t, n) => {
 	e && (Q.setPresence({
 		el: e,
 		attr: "data-focus",
@@ -13174,7 +13214,7 @@ var nv = (e, t, n) => {
 		attr: "data-invalid",
 		present: n
 	}));
-}, dv = ({ input: e, props: t, value: n, min: r, max: i, label: a, valueText: o, nativeRequired: s }) => {
+}, jv = ({ input: e, props: t, value: n, min: r, max: i, label: a, valueText: o, nativeRequired: s }) => {
 	e && (e.min = String(r), e.max = String(i), e.step = String(t.step > 0 ? t.step : 1), Q.syncNativeControl({
 		input: e,
 		state: {
@@ -13186,15 +13226,15 @@ var nv = (e, t, n) => {
 			invalid: t.invalid
 		}
 	}), e.setAttribute("aria-valuemin", String(r)), e.setAttribute("aria-valuemax", String(i)), e.setAttribute("aria-valuenow", String(n)), o ? e.setAttribute("aria-valuetext", o) : e.removeAttribute("aria-valuetext"), a && e.setAttribute("aria-label", a), t.orientation === "vertical" ? e.setAttribute("aria-orientation", "vertical") : e.removeAttribute("aria-orientation"));
-}, fv = (e, t, n) => {
-	let { min: r, max: i } = rv(e), a = ov(n.lower, r, i), o = ov(n.upper, r, i), s = e.range ? a : 0, c = e.range ? o : a;
+}, Mv = (e, t, n) => {
+	let { min: r, max: i } = Cv(e), a = Ev(n.lower, r, i), o = Ev(n.upper, r, i), s = e.range ? a : 0, c = e.range ? o : a;
 	t.root.style.setProperty("--ui-slider-lower-percent", `${a}%`), t.root.style.setProperty("--ui-slider-upper-percent", `${o}%`), e.orientation === "vertical" ? (t.range && (t.range.style.bottom = `${s}%`, t.range.style.height = `${Math.max(0, c - s)}%`, t.range.style.left = "", t.range.style.width = ""), t.singleThumb && (t.singleThumb.style.bottom = `${a}%`), t.lowerThumb && (t.lowerThumb.style.bottom = `${a}%`), t.upperThumb && (t.upperThumb.style.bottom = `${o}%`)) : (t.range && (t.range.style.left = `${s}%`, t.range.style.width = `${Math.max(0, c - s)}%`, t.range.style.bottom = "", t.range.style.height = ""), t.singleThumb && (t.singleThumb.style.left = `${a}%`), t.lowerThumb && (t.lowerThumb.style.left = `${a}%`), t.upperThumb && (t.upperThumb.style.left = `${o}%`)), t.ticks.forEach((t) => {
-		let n = ov(iv(t.dataset.value ?? "", r), r, i);
+		let n = Ev(wv(t.dataset.value ?? "", r), r, i);
 		e.orientation === "vertical" ? (t.style.bottom = `${n}%`, t.style.left = "") : (t.style.left = `${n}%`, t.style.bottom = "");
 	});
-}, pv = (e, t, n, r) => {
-	let { min: i, max: a, step: o } = rv(e), s = e.range ? Math.max(0, e.minStepsBetween) * o : 0, c = nv($(n.lower, i, a), i, o), l = nv($(n.upper, i, a), i, o);
-	e.range ? (c > l && ([c, l] = [l, c]), l - c < s && (r?.dataset.thumb === "lower" ? c = $(nv(l - s, i, o), i, a) : l = $(nv(c + s, i, o), i, a))) : l = c, dv({
+}, Nv = (e, t, n, r) => {
+	let { min: i, max: a, step: o } = Cv(e), s = e.range ? Math.max(0, e.minStepsBetween) * o : 0, c = Sv($(n.lower, i, a), i, o), l = Sv($(n.upper, i, a), i, o);
+	e.range ? (c > l && ([c, l] = [l, c]), l - c < s && (r?.dataset.thumb === "lower" ? c = $(Sv(l - s, i, o), i, a) : l = $(Sv(c + s, i, o), i, a))) : l = c, jv({
 		input: t.singleInput,
 		props: e,
 		value: c,
@@ -13203,7 +13243,7 @@ var nv = (e, t, n) => {
 		label: e.label,
 		valueText: e.valueText,
 		nativeRequired: e.required
-	}), dv({
+	}), jv({
 		input: t.lowerInput,
 		props: e,
 		value: c,
@@ -13212,7 +13252,7 @@ var nv = (e, t, n) => {
 		label: e.lowerLabel,
 		valueText: e.lowerValueText,
 		nativeRequired: !1
-	}), dv({
+	}), jv({
 		input: t.upperInput,
 		props: e,
 		value: l,
@@ -13226,7 +13266,7 @@ var nv = (e, t, n) => {
 		lower: c,
 		upper: l
 	};
-	return fv(e, t, u), t.value && (t.value.textContent = sv(e, u)), Q.syncControlPresence({
+	return Mv(e, t, u), t.value && (t.value.textContent = Dv(e, u)), Q.syncControlPresence({
 		el: t.root,
 		state: e
 	}), t.track && Q.syncControlPresence({
@@ -13235,8 +13275,8 @@ var nv = (e, t, n) => {
 			disabled: e.disabled,
 			invalid: e.invalid
 		}
-	}), uv(t.singleThumb, t.singleInput === document.activeElement, e.invalid), uv(t.lowerThumb, t.lowerInput === document.activeElement, e.invalid), uv(t.upperThumb, t.upperInput === document.activeElement, e.invalid), u;
-}, mv = () => ({
+	}), Av(t.singleThumb, t.singleInput === document.activeElement, e.invalid), Av(t.lowerThumb, t.lowerInput === document.activeElement, e.invalid), Av(t.upperThumb, t.upperInput === document.activeElement, e.invalid), u;
+}, Pv = () => ({
 	props: null,
 	listeners: [],
 	hiddenInputsKey: "",
@@ -13244,7 +13284,7 @@ var nv = (e, t, n) => {
 	init() {
 		this.props = W({
 			el: this.$el,
-			schema: tv
+			schema: xv
 		});
 		let e = this.elements();
 		[
@@ -13332,7 +13372,7 @@ var nv = (e, t, n) => {
 		};
 	},
 	sync() {
-		let e = this.elements(), t = pv(this.props, e, av(this.props, e));
+		let e = this.elements(), t = Nv(this.props, e, Tv(this.props, e));
 		this.props.range && e.hiddenInputs ? this.hiddenInputsKey = Q.syncRepeatedHiddenInputs({
 			container: e.hiddenInputs,
 			currentKey: this.hiddenInputsKey,
@@ -13353,8 +13393,8 @@ var nv = (e, t, n) => {
 		}));
 	},
 	syncFromInput(e) {
-		let t = e.target instanceof HTMLInputElement ? e.target : null, n = this.elements(), r = av(this.props, n);
-		t?.dataset.thumb === "upper" ? r.upper = iv(t.value, r.upper) : r.lower = iv(t?.value ?? "", r.lower), pv(this.props, n, r, t), this.sync();
+		let t = e.target instanceof HTMLInputElement ? e.target : null, n = this.elements(), r = Tv(this.props, n);
+		t?.dataset.thumb === "upper" ? r.upper = wv(t.value, r.upper) : r.lower = wv(t?.value ?? "", r.lower), Nv(this.props, n, r, t), this.sync();
 	},
 	commitFromInput(e) {
 		this.syncFromInput(e);
@@ -13366,31 +13406,31 @@ var nv = (e, t, n) => {
 			"PageDown",
 			"ArrowDown",
 			"ArrowLeft"
-		].includes(e.key) ? -1 : 1, { bigStep: r } = rv(this.props);
-		t.value = String(iv(t.value, this.props.min) + n * r), t.dispatchEvent(new Event("input", { bubbles: !0 })), t.dispatchEvent(new Event("change", { bubbles: !0 }));
+		].includes(e.key) ? -1 : 1, { bigStep: r } = Cv(this.props);
+		t.value = String(wv(t.value, this.props.min) + n * r), t.dispatchEvent(new Event("input", { bubbles: !0 })), t.dispatchEvent(new Event("change", { bubbles: !0 }));
 	},
 	handlePointerDown(e) {
 		if (this.props.disabled) return;
-		let t = this.elements(), n = cv(t.root, e, this.props), r = av(this.props, t);
-		this.draggingThumb = this.props.range ? lv(n, r) : "single", this.draggingThumb === "upper" ? r.upper = n : r.lower = n;
+		let t = this.elements(), n = Ov(t.root, e, this.props), r = Tv(this.props, t);
+		this.draggingThumb = this.props.range ? kv(n, r) : "single", this.draggingThumb === "upper" ? r.upper = n : r.lower = n;
 		let i = this.draggingThumb === "upper" ? t.upperInput : this.props.range ? t.lowerInput : t.singleInput;
-		i?.focus(), pv(this.props, t, r, i), this.sync(), t.root.setPointerCapture?.(e.pointerId), e.preventDefault();
+		i?.focus(), Nv(this.props, t, r, i), this.sync(), t.root.setPointerCapture?.(e.pointerId), e.preventDefault();
 	},
 	handlePointerMove(e) {
 		if (!this.draggingThumb || this.props.disabled) return;
-		let t = this.elements(), n = av(this.props, t), r = cv(t.root, e, this.props);
+		let t = this.elements(), n = Tv(this.props, t), r = Ov(t.root, e, this.props);
 		this.draggingThumb === "upper" ? n.upper = r : n.lower = r;
 		let i = this.draggingThumb === "upper" ? t.upperInput : this.props.range ? t.lowerInput : t.singleInput;
-		pv(this.props, t, n, i), i?.dispatchEvent(new Event("input", { bubbles: !0 }));
+		Nv(this.props, t, n, i), i?.dispatchEvent(new Event("input", { bubbles: !0 }));
 	},
 	handlePointerUp(e) {
 		if (!this.draggingThumb) return;
 		let t = this.elements();
 		(this.draggingThumb === "upper" ? t.upperInput : this.props.range ? t.lowerInput : t.singleInput)?.dispatchEvent(new Event("change", { bubbles: !0 })), t.root.releasePointerCapture?.(e.pointerId), this.draggingThumb = null;
 	}
-}), hv = (e) => {
-	e.data("UiSlider", () => mv());
-}, gv = ["trailing", "leading"], _v = Fp, vv = Wp, yv = {
+}), Fv = (e) => {
+	e.data("UiSlider", () => Pv());
+}, Iv = ["trailing", "leading"], Lv = Fp, Rv = Wp, zv = {
 	value: G.default("on"),
 	name: G,
 	label: G,
@@ -13399,9 +13439,9 @@ var nv = (e, t, n) => {
 	disabled: q,
 	required: q,
 	invalid: q,
-	placement: J(gv, "trailing"),
-	variant: J(vv, "default"),
-	size: J(_v, "md"),
+	placement: J(Iv, "trailing"),
+	variant: J(Rv, "default"),
+	size: J(Lv, "md"),
 	inputClass: G,
 	trackClass: G,
 	thumbClass: G,
@@ -13410,10 +13450,10 @@ var nv = (e, t, n) => {
 	descriptionClass: G,
 	class: G
 };
-({ ...yv });
+({ ...zv });
 //#endregion
 //#region src/components/switch/index.ts
-var bv = (e) => {
+var Bv = (e) => {
 	let t = e.querySelector("[data-ui-switch-input]");
 	return t ? {
 		root: e,
@@ -13424,7 +13464,7 @@ var bv = (e) => {
 		required: e.hasAttribute("data-required") || t.required,
 		invalid: e.hasAttribute("data-invalid") || t.getAttribute("aria-invalid") === "true"
 	} : null;
-}, xv = (e, t = {}) => {
+}, Vv = (e, t = {}) => {
 	let n = t.disabled ?? e.disabled, r = t.required ?? e.required, i = t.invalid ?? e.invalid, a = e.input.checked, o = a ? "checked" : "unchecked";
 	Q.syncNativeControl({
 		input: e.input,
@@ -13483,13 +13523,13 @@ var bv = (e) => {
 		attr: "data-disabled",
 		present: n
 	}));
-}, Sv = () => ({
+}, Hv = () => ({
 	props: null,
 	listeners: [],
 	init() {
 		this.props = W({
 			el: this.$el,
-			schema: yv
+			schema: zv
 		});
 		let e = this.input();
 		Q.addListener({
@@ -13515,13 +13555,13 @@ var bv = (e) => {
 		return e;
 	},
 	item() {
-		let e = bv(this.$el);
+		let e = Bv(this.$el);
 		if (!e) throw Error("Switch requires a native checkbox input.");
 		return e;
 	},
 	sync() {
 		let e = this.item();
-		this.props.name && (e.input.name = this.props.name), this.props.value && (e.input.value = this.props.value), xv(e, {
+		this.props.name && (e.input.name = this.props.name), this.props.value && (e.input.value = this.props.value), Vv(e, {
 			disabled: this.props.disabled || e.disabled,
 			required: this.props.required || e.required,
 			invalid: this.props.invalid || e.invalid
@@ -13532,20 +13572,20 @@ var bv = (e) => {
 		let t = this.input();
 		t.disabled || (e.preventDefault(), t.checked = !t.checked, t.dispatchEvent(new Event("input", { bubbles: !0 })), t.dispatchEvent(new Event("change", { bubbles: !0 })));
 	}
-}), Cv = (e) => {
-	e.data("UiSwitch", () => Sv());
-}, wv = ["manual", "automatic"], Tv = Hp;
-[...Tv];
-var Ev = {
+}), Uv = (e) => {
+	e.data("UiSwitch", () => Hv());
+}, Wv = ["manual", "automatic"], Gv = Hp;
+[...Gv];
+var Kv = {
 	id: G.default("ui-tabs"),
 	defaultValue: G,
 	value: G,
-	activation: J(wv, "manual"),
-	orientation: J(Tv, "horizontal"),
+	activation: J(Wv, "manual"),
+	orientation: J(Gv, "horizontal"),
 	loop: q.default(!0),
 	panels: G,
 	class: G
-}, Dv = Y({ definition: {
+}, qv = Y({ definition: {
 	component: "ui.tabs",
 	parts: {
 		root: {
@@ -13610,8 +13650,8 @@ var Ev = {
 				variant: {
 					subtle: "rounded-2 px-2 hover:bg-base-a2 ui-selected:font-medium",
 					line: ["-mb-px rounded-none border-x-0 border-b-2 border-t-0 border-transparent px-0", "ui-selected:border-foreground ui-selected:font-medium"],
-					segmented: ["rounded-2 px-3 hover:bg-base-a2", "ui-selected:bg-surface ui-selected:font-medium ui-selected:shadow-border"],
-					pills: ["rounded-full bg-surface px-3 shadow-border hover:bg-base-a2", "ui-selected:bg-base-a3 ui-selected:font-medium ui-selected:shadow-border-hover"]
+					segmented: ["rounded-2 px-3 hover:bg-base-a2", "ui-selected:bg-surface-panel ui-selected:font-medium ui-selected:shadow-border"],
+					pills: ["rounded-full bg-surface-panel px-3 shadow-border hover:bg-base-a2", "ui-selected:bg-base-a3 ui-selected:font-medium ui-selected:shadow-border-hover"]
 				},
 				size: {
 					sm: "h-control-sm text-xs",
@@ -13653,7 +13693,7 @@ var Ev = {
 		panel: { base: "min-w-0 text-sm text-foreground outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 focus-visible:ring-offset-app" },
 		panelInner: { base: "min-w-0" }
 	}
-} }), Ov = "ui-tabs", kv = (e) => e ? "active" : "inactive", Av = (e) => e instanceof HTMLButtonElement || e instanceof HTMLAnchorElement, jv = (e) => Array.from(new Set(e)), Mv = (e) => e.trim().toLowerCase().replace(/[^a-z0-9_-]+/g, "-").replace(/^-+|-+$/g, "") || "tab", Nv = (e, t) => `${e}-tab-${Mv(t)}`, Pv = (e, t) => `${e}-panel-${Mv(t)}`, Fv = (e) => Q.asBool({ value: e }), Iv = () => ({
+} }), Jv = "ui-tabs", Yv = (e) => e ? "active" : "inactive", Xv = (e) => e instanceof HTMLButtonElement || e instanceof HTMLAnchorElement, Zv = (e) => Array.from(new Set(e)), Qv = (e) => e.trim().toLowerCase().replace(/[^a-z0-9_-]+/g, "-").replace(/^-+|-+$/g, "") || "tab", $v = (e, t) => `${e}-tab-${Qv(t)}`, ey = (e, t) => `${e}-panel-${Qv(t)}`, ty = (e) => Q.asBool({ value: e }), ny = () => ({
 	props: null,
 	activeValue: "",
 	collection: null,
@@ -13661,15 +13701,15 @@ var Ev = {
 	init() {
 		this.props = W({
 			el: this.$el,
-			schema: Ev
+			schema: Kv
 		}), this.activeValue = this.initialValue(), this.setupEvents(), this.syncAll();
 	},
 	destroy() {
 		this.props.disconnect(), this.teardown();
 	},
 	get root() {
-		return Q.props({ inputs: [Q.resolveStyle({
-			part: Dv.parts.root,
+		return Q.mergeBindings({ inputs: [Q.resolveStyle({
+			part: qv.parts.root,
 			props: this.props,
 			className: this.props.class
 		}), {
@@ -13679,10 +13719,13 @@ var Ev = {
 		}] });
 	},
 	owner() {
-		return this.$el.id || this.props.id || this.$el.dataset.owner || Ov;
+		return this.$el.id || this.props.id || this.$el.dataset.owner || Jv;
+	},
+	ownsElement(e) {
+		return e.closest("[data-ui-tabs]") === this.$el;
 	},
 	lists() {
-		return Array.from(this.$el.querySelectorAll("[data-ui-tabs-list]"));
+		return Array.from(this.$el.querySelectorAll("[data-ui-tabs-list]")).filter((e) => this.ownsElement(e));
 	},
 	primaryList() {
 		return this.lists()[0] ?? null;
@@ -13699,20 +13742,23 @@ var Ev = {
 		return t === "vertical" || t === "horizontal" ? t : this.props.orientation;
 	},
 	tabs() {
-		return Array.from(this.$el.querySelectorAll("[data-ui-tabs-tab]")).map((e, t) => Av(e) ? (e.dataset.value || (e.dataset.value = `tab-${t + 1}`), {
+		return Array.from(this.$el.querySelectorAll("[data-ui-tabs-tab]")).filter((e) => this.ownsElement(e)).map((e, t) => Xv(e) ? (e.dataset.value || (e.dataset.value = `tab-${t + 1}`), {
 			tab: e,
 			value: e.dataset.value,
-			isDisabled: Fv(e.dataset.disabled) || e.hasAttribute("disabled"),
+			isDisabled: ty(e.dataset.disabled) || e.hasAttribute("disabled"),
 			panel: this.panelForValue(e.dataset.value)
 		}) : null).filter((e) => e !== null);
 	},
 	panels() {
-		let e = `[data-ui-tabs-panel][data-ui-tabs-owner="${this.owner()}"]`, t = Array.from(this.$el.querySelectorAll("[data-ui-tabs-panel]"));
+		let e = this.owner(), t = `[data-ui-tabs-panel][data-ui-tabs-owner="${e}"]`, n = (t) => {
+			let n = t.closest("[data-ui-tabs]");
+			return (!n || n === this.$el) && (t.dataset.uiTabsOwner === e || t.dataset.owner === e);
+		}, r = Array.from(this.$el.querySelectorAll("[data-ui-tabs-panel]")).filter((e) => this.ownsElement(e));
 		if (this.props.panels) {
 			let e = document.querySelector(this.props.panels);
-			e && t.push(...Array.from(e.querySelectorAll("[data-ui-tabs-panel]")));
+			e && r.push(...Array.from(e.querySelectorAll("[data-ui-tabs-panel]")).filter(n));
 		}
-		return t.push(...Array.from(document.querySelectorAll(e))), jv(t);
+		return r.push(...Array.from(document.querySelectorAll(t)).filter(n)), Zv(r);
 	},
 	panelForValue(e) {
 		return this.panels().find((t) => t.dataset.value === e) ?? null;
@@ -13720,8 +13766,8 @@ var Ev = {
 	initialValue() {
 		if (this.props.value) return this.props.value;
 		if (this.props.defaultValue) return this.props.defaultValue;
-		let e = this.tabs().find((e) => Fv(e.tab.dataset.selected) || e.tab.getAttribute("aria-selected") === "true");
-		return e ? e.value : this.panels().find((e) => Fv(e.dataset.selected))?.dataset.value || this.fallbackValue();
+		let e = this.tabs().find((e) => ty(e.tab.dataset.selected) || e.tab.getAttribute("aria-selected") === "true");
+		return e ? e.value : this.panels().find((e) => ty(e.dataset.selected))?.dataset.value || this.fallbackValue();
 	},
 	fallbackValue() {
 		return this.tabs().find((e) => !e.isDisabled)?.value ?? "";
@@ -13742,20 +13788,20 @@ var Ev = {
 	syncList(e) {
 		let t = this.listOrientation(e);
 		e.setAttribute("role", "tablist"), e.dataset.orientation = t, e.className = Q.resolveStyle({
-			part: Dv.parts.list,
+			part: qv.parts.list,
 			props: {
 				variant: e.dataset.variant || "line",
 				size: e.dataset.size || "md",
 				orientation: t,
-				scrollable: Fv(e.dataset.scrollable)
+				scrollable: ty(e.dataset.scrollable)
 			},
 			className: e.dataset.class ?? ""
 		}), t === "vertical" ? e.setAttribute("aria-orientation", "vertical") : e.removeAttribute("aria-orientation");
 	},
 	syncTab(e) {
-		let t = e.value === this.activeValue, n = e.tab.getAttribute("data-active") === "true" || document.activeElement === e.tab, r = kv(t), i = e.tab.dataset.uiTabsOwner || e.tab.dataset.owner || this.owner(), a = e.panel?.id || Pv(i, e.value), o = this.listOrientation(e.tab.closest("[data-ui-tabs-list]")), s = e.tab.closest("[data-ui-tabs-list]")?.dataset.variant || this.listVariant(), c = e.tab.closest("[data-ui-tabs-list]")?.dataset.size || this.listSize(), l = e.tab.querySelector("[data-ui-tabs-tab-selected-icon]");
-		if (e.tab.id ||= Nv(i, e.value), e.tab.dataset.state = r, e.tab.dataset.orientation = o, e.tab.dataset.variant = s, e.tab.dataset.size = c, e.tab.setAttribute("role", "tab"), e.tab.setAttribute("aria-selected", t ? "true" : "false"), e.tab.setAttribute("aria-controls", a), e.tab.tabIndex = t || n ? 0 : -1, e.tab.className = Q.resolveStyle({
-			part: Dv.parts.tab,
+		let t = e.value === this.activeValue, n = e.tab.getAttribute("data-active") === "true" || document.activeElement === e.tab, r = Yv(t), i = e.tab.dataset.uiTabsOwner || e.tab.dataset.owner || this.owner(), a = e.panel?.id || ey(i, e.value), o = this.listOrientation(e.tab.closest("[data-ui-tabs-list]")), s = e.tab.closest("[data-ui-tabs-list]")?.dataset.variant || this.listVariant(), c = e.tab.closest("[data-ui-tabs-list]")?.dataset.size || this.listSize(), l = e.tab.querySelector("[data-ui-tabs-tab-selected-icon]");
+		if (e.tab.id ||= $v(i, e.value), e.tab.dataset.state = r, e.tab.dataset.orientation = o, e.tab.dataset.variant = s, e.tab.dataset.size = c, e.tab.setAttribute("role", "tab"), e.tab.setAttribute("aria-selected", t ? "true" : "false"), e.tab.setAttribute("aria-controls", a), e.tab.tabIndex = t || n ? 0 : -1, e.tab.className = Q.resolveStyle({
+			part: qv.parts.tab,
 			props: {
 				variant: s,
 				size: c,
@@ -13774,9 +13820,9 @@ var Ev = {
 		e.tab.removeAttribute("data-disabled"), e.tab.removeAttribute("aria-disabled"), e.tab instanceof HTMLButtonElement && (e.tab.disabled = !1);
 	},
 	syncPanel(e) {
-		let t = e.dataset.value || "", n = t === this.activeValue, r = e.dataset.uiTabsOwner || e.dataset.owner || this.owner(), i = Nv(r, t), a = Pv(r, t);
-		t && !e.id && (e.id = a), !e.getAttribute("data-ui-key") && t && e.setAttribute("data-ui-key", e.id || a), e.dataset.state = kv(n), e.dataset.orientation = this.props.orientation, e.setAttribute("role", "tabpanel"), e.setAttribute("aria-labelledby", i), e.hasAttribute("tabindex") || (e.tabIndex = 0), e.hidden = !n, e.className = Q.resolveStyle({
-			part: Dv.parts.panel,
+		let t = e.dataset.value || "", n = t === this.activeValue, r = e.dataset.uiTabsOwner || e.dataset.owner || this.owner(), i = $v(r, t), a = ey(r, t);
+		t && !e.id && (e.id = a), !e.getAttribute("data-ui-key") && t && e.setAttribute("data-ui-key", e.id || a), e.dataset.state = Yv(n), e.dataset.orientation = this.props.orientation, e.setAttribute("role", "tabpanel"), e.setAttribute("aria-labelledby", i), e.hasAttribute("tabindex") || (e.tabIndex = 0), e.hidden = !n, e.className = Q.resolveStyle({
+			part: qv.parts.panel,
 			props: this.props,
 			className: e.dataset.class ?? ""
 		}), Q.setPresence({
@@ -13810,7 +13856,7 @@ var Ev = {
 	},
 	tabFromEvent(e) {
 		let t = (e.target instanceof Element ? e.target : null)?.closest("[data-ui-tabs-tab]") ?? null;
-		return !Av(t) || !this.$el.contains(t) ? null : t;
+		return !Xv(t) || !this.ownsElement(t) ? null : t;
 	},
 	itemFromTab(e) {
 		return this.tabs().find((t) => t.tab === e) ?? null;
@@ -13819,7 +13865,7 @@ var Ev = {
 		return this.collection ||= Q.createCollectionNavigation({
 			root: () => this.$el,
 			itemSelector: "[data-ui-tabs-tab]",
-			isDisabled: (e) => Fv(e.dataset.disabled) || e.hasAttribute("disabled"),
+			isDisabled: (e) => !this.ownsElement(e) || ty(e.dataset.disabled) || e.hasAttribute("disabled"),
 			loop: () => this.props.loop
 		}), this.collection;
 	},
@@ -13889,7 +13935,7 @@ var Ev = {
 	activateFocused() {
 		if (this.props.activation !== "automatic") return;
 		let e = document.activeElement;
-		if (!Av(e)) return;
+		if (!Xv(e)) return;
 		let t = this.itemFromTab(e);
 		t && !t.isDisabled && this.setActiveValue(t.value, e);
 	},
@@ -13910,86 +13956,258 @@ var Ev = {
 			}
 		});
 	}
-}), Lv = (e) => {
-	e.data("UiTabs", () => Iv());
-}, Rv = [
+}), ry = (e) => {
+	e.data("UiTabs", () => ny());
+}, iy = [
 	"info",
 	"success",
 	"warning",
 	"danger",
 	"debug"
-], zv = [
-	"default",
-	"info",
+], ay = [
+	"auto",
+	"neutral",
+	"accent",
 	"success",
 	"warning",
-	"danger",
-	"debug"
-], Bv = [
+	"danger"
+], oy = [
+	"default",
+	"soft",
+	"surface",
+	"solid",
+	"outline"
+], sy = [
 	"top-right",
 	"top-left",
 	"top-center",
 	"bottom-right",
 	"bottom-left",
 	"bottom-center"
-], Vv = {
-	level: J(Rv, "info"),
-	variant: J(zv, "default"),
+], cy = {
+	level: J(iy, "info"),
+	color: J(ay, "auto"),
+	variant: J(oy, "default"),
 	title: G,
+	description: G,
 	duration: K.default(5e3).min(0),
 	dismissible: q.default(!0),
 	class: G,
 	contentClass: G,
 	closeClass: G
-}, Hv = {
+}, ly = {
 	id: G.default("ui-toast-root"),
-	position: J(Bv, "top-right"),
+	position: J(sy, "top-right"),
 	duration: K.default(5e3).min(0),
 	includeMessages: q.default(!0),
 	class: G
-}, Uv = Y({ definition: {
+}, uy = Y({ definition: {
 	component: "ui.toast",
 	parts: {
 		root: {
-			base: ["pointer-events-auto relative grid w-full min-w-0 gap-3 overflow-hidden rounded-4 bg-toast p-3 text-foreground shadow-popover outline-none", "data-[state=closed]:pointer-events-none data-[state=closed]:opacity-0"],
+			base: ["group/toast pointer-events-auto relative grid w-full min-w-0 items-center gap-x-3 gap-y-1 overflow-hidden rounded-4 border px-3 py-2.5 text-foreground outline-none", "data-[state=closed]:pointer-events-none data-[state=closed]:opacity-0"],
 			variants: {
 				variant: {
-					default: "grid-cols-[1fr_auto]",
-					info: "grid-cols-[auto_1fr_auto]",
-					success: "grid-cols-[auto_1fr_auto]",
-					warning: "grid-cols-[auto_1fr_auto]",
-					danger: "grid-cols-[auto_1fr_auto]",
-					debug: "grid-cols-[auto_1fr_auto]"
-				},
-				level: {
-					info: "",
+					default: "border-transparent bg-toast shadow-popover",
+					soft: "border-transparent bg-base-a2 shadow-popover",
+					surface: "border-border bg-toast text-foreground shadow-popover",
+					solid: "border-transparent bg-base-12 text-base-1 shadow-popover",
+					outline: "border-border bg-transparent shadow-none"
+				},
+				color: {
+					neutral: "",
+					accent: "",
 					success: "",
 					warning: "",
-					danger: "",
-					debug: ""
+					danger: ""
+				},
+				hasMarker: {
+					true: "grid-cols-[auto_minmax(0,1fr)_auto]",
+					false: "grid-cols-[minmax(0,1fr)_auto]"
+				},
+				hasDescription: {
+					true: "",
+					false: ""
 				}
 			},
+			compounds: [
+				{
+					when: {
+						variant: "soft",
+						color: "accent"
+					},
+					class: "bg-accent-surface text-accent-text shadow-popover"
+				},
+				{
+					when: {
+						variant: "soft",
+						color: "success"
+					},
+					class: "bg-success-surface text-success-text shadow-popover"
+				},
+				{
+					when: {
+						variant: "soft",
+						color: "warning"
+					},
+					class: "bg-warning-surface text-warning-text shadow-popover"
+				},
+				{
+					when: {
+						variant: "soft",
+						color: "danger"
+					},
+					class: "bg-danger-surface text-danger-text shadow-popover"
+				},
+				{
+					when: {
+						variant: "surface",
+						color: "accent"
+					},
+					class: "border-accent-border bg-toast text-foreground shadow-popover"
+				},
+				{
+					when: {
+						variant: "surface",
+						color: "success"
+					},
+					class: "border-success-border bg-toast text-foreground shadow-popover"
+				},
+				{
+					when: {
+						variant: "surface",
+						color: "warning"
+					},
+					class: "border-warning-border bg-toast text-foreground shadow-popover"
+				},
+				{
+					when: {
+						variant: "surface",
+						color: "danger"
+					},
+					class: "border-danger-border bg-toast text-foreground shadow-popover"
+				},
+				{
+					when: {
+						variant: "outline",
+						color: "accent"
+					},
+					class: "border-accent-border text-accent-text shadow-none"
+				},
+				{
+					when: {
+						variant: "outline",
+						color: "success"
+					},
+					class: "border-success-border text-success-text shadow-none"
+				},
+				{
+					when: {
+						variant: "outline",
+						color: "warning"
+					},
+					class: "border-warning-border text-warning-text shadow-none"
+				},
+				{
+					when: {
+						variant: "outline",
+						color: "danger"
+					},
+					class: "border-danger-border text-danger-text shadow-none"
+				},
+				{
+					when: {
+						variant: "solid",
+						color: "accent"
+					},
+					class: "border-transparent bg-accent-solid text-accent-contrast shadow-popover"
+				},
+				{
+					when: {
+						variant: "solid",
+						color: "success"
+					},
+					class: "border-transparent bg-success-solid text-success-contrast shadow-popover"
+				},
+				{
+					when: {
+						variant: "solid",
+						color: "warning"
+					},
+					class: "border-transparent bg-warning-solid text-warning-contrast shadow-popover"
+				},
+				{
+					when: {
+						variant: "solid",
+						color: "danger"
+					},
+					class: "border-transparent bg-danger-solid text-danger-contrast shadow-popover"
+				}
+			],
 			defaults: {
 				variant: "default",
-				level: "info"
+				color: "neutral",
+				hasMarker: !1,
+				hasDescription: !1
 			}
 		},
 		marker: {
-			base: "mt-1 size-2 shrink-0 rounded-full",
+			base: "size-2 self-center rounded-full",
+			variants: {
+				color: {
+					neutral: "hidden",
+					accent: "bg-accent-solid",
+					success: "bg-success-solid",
+					warning: "bg-warning-solid",
+					danger: "bg-danger-solid"
+				},
+				variant: {
+					default: "hidden",
+					soft: "",
+					surface: "",
+					solid: "hidden",
+					outline: ""
+				}
+			},
+			defaults: {
+				color: "neutral",
+				variant: "default"
+			}
+		},
+		content: { base: "grid min-w-0 gap-0.5 self-center" },
+		title: {
+			base: "min-w-0",
 			variants: { variant: {
-				default: "hidden",
-				info: "bg-accent-solid",
-				success: "bg-success-solid",
-				warning: "bg-warning-solid",
-				danger: "bg-danger-solid",
-				debug: "bg-base-9"
+				default: "",
+				soft: "text-current",
+				surface: "",
+				solid: "text-current",
+				outline: "text-current"
+			} },
+			defaults: { variant: "default" }
+		},
+		description: {
+			base: "min-w-0",
+			variants: { variant: {
+				default: "",
+				soft: "text-current opacity-80",
+				surface: "",
+				solid: "text-current opacity-80",
+				outline: "text-current opacity-80"
+			} },
+			defaults: { variant: "default" }
+		},
+		close: {
+			base: ["-mr-1 inline-flex size-control-md shrink-0 items-center justify-center self-center rounded-2 text-icon outline-none", "hover:bg-base-a2 focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 focus-visible:ring-offset-app"],
+			variants: { variant: {
+				default: "",
+				soft: "text-current hover:bg-current/10 focus-visible:ring-current focus-visible:ring-offset-transparent",
+				surface: "",
+				solid: "text-current hover:bg-current/10 focus-visible:ring-current focus-visible:ring-offset-transparent",
+				outline: "text-current hover:bg-current/10 focus-visible:ring-current focus-visible:ring-offset-transparent"
 			} },
 			defaults: { variant: "default" }
 		},
-		content: { base: "grid min-w-0 gap-0.5" },
-		title: { base: "min-w-0" },
-		description: { base: "min-w-0" },
-		close: { base: ["-mr-1 -mt-1 inline-flex size-control-md shrink-0 items-center justify-center rounded-2 text-icon outline-none", "hover:bg-base-a2 focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 focus-visible:ring-offset-app"] },
 		closeIcon: { base: "size-icon fill-current" },
 		outlet: {
 			base: ["pointer-events-none fixed z-toast flex w-[min(24rem,calc(100vw-2rem))] flex-col gap-2"],
@@ -14004,49 +14222,52 @@ var Ev = {
 			defaults: { position: "top-right" }
 		}
 	}
-} }), Wv = (e) => e === "info" || e === "success" || e === "warning" || e === "danger" || e === "debug", Gv = (e) => e === "default" || e === "info" || e === "success" || e === "warning" || e === "danger" || e === "debug", Kv = (e, t) => {
+} }), dy = (e) => e === "info" || e === "success" || e === "warning" || e === "danger" || e === "debug", fy = (e) => e === "auto" || e === "neutral" || e === "accent" || e === "success" || e === "warning" || e === "danger", py = (e) => e === "default" || e === "soft" || e === "surface" || e === "solid" || e === "outline", my = (e) => e === "info" ? "accent" : e === "success" || e === "warning" || e === "danger" ? e : "neutral", hy = (e, t) => fy(e) && e !== "auto" ? e : my(t), gy = (e, t) => {
 	let n = typeof e == "number" ? e : Number(e);
 	return Number.isFinite(n) && n >= 0 ? n : t;
-}, qv = (e) => Math.min(e, 3), Jv = /* @__PURE__ */ new WeakMap(), Yv = (e) => {
+}, _y = (e) => Math.min(e, 3), vy = /* @__PURE__ */ new WeakMap(), yy = (e) => {
 	let t = Array.from(e.querySelectorAll(":scope > [data-ui-toast]"));
 	e.dataset.stack = t.length > 1 ? "collapsed" : "single";
-	let n = window.getComputedStyle(e), r = Number.parseFloat(n.rowGap || n.gap || "0") || 0, i = t.map((e) => Math.ceil(e.scrollHeight || e.getBoundingClientRect().height)), a = i[0] ?? 0, o = Number.parseFloat(n.getPropertyValue("--ui-toast-stack-peek")) || 8, s = e.dataset.position?.startsWith("bottom") ? -1 : 1, c = qv(Math.max(0, t.length - 1)), l = i.reduce((e, t) => e + t, 0) + Math.max(0, t.length - 1) * r, u = a + c * o;
+	let n = window.getComputedStyle(e), r = Number.parseFloat(n.rowGap || n.gap || "0") || 0, i = t.map((e) => Math.ceil(e.scrollHeight || e.getBoundingClientRect().height)), a = i[0] ?? 0, o = Number.parseFloat(n.getPropertyValue("--ui-toast-stack-peek")) || 8, s = e.dataset.position?.startsWith("bottom") ? -1 : 1, c = _y(Math.max(0, t.length - 1)), l = i.reduce((e, t) => e + t, 0) + Math.max(0, t.length - 1) * r, u = a + c * o;
 	e.style.setProperty("--ui-toast-front-height", `${a}px`), e.style.setProperty("--ui-toast-stack-height", `${u}px`), e.style.setProperty("--ui-toast-stack-expanded-height", `${l}px`), t.forEach((e, n) => {
-		let r = qv(n), i = Math.max(.91, 1 - r * .03), a = Math.max(.72, 1 - r * .08);
-		e.dataset.stackIndex = String(n), e.style.setProperty("--ui-toast-stack-index", String(n)), e.style.setProperty("--ui-toast-stack-depth", String(r)), e.style.setProperty("--ui-toast-stack-direction", String(s)), e.style.setProperty("--ui-toast-stack-offset", `${r * o * s}px`), e.style.setProperty("--ui-toast-stack-scale", String(i)), e.style.setProperty("--ui-toast-stack-opacity", String(a)), e.style.zIndex = String(t.length - n);
+		let r = _y(n), i = Math.max(.91, 1 - r * .03), a = Math.max(.72, 1 - r * .08);
+		e.dataset.state !== "closed" && (e.style.removeProperty("opacity"), e.style.removeProperty("transform")), e.dataset.stackIndex = String(n), e.style.setProperty("--ui-toast-stack-index", String(n)), e.style.setProperty("--ui-toast-stack-depth", String(r)), e.style.setProperty("--ui-toast-stack-direction", String(s)), e.style.setProperty("--ui-toast-stack-offset", `${r * o * s}px`), e.style.setProperty("--ui-toast-stack-scale", String(i)), e.style.setProperty("--ui-toast-stack-opacity", String(a)), e.style.zIndex = String(t.length - n);
 	});
-}, Xv = (e) => {
+}, by = (e) => {
 	let t = e.parentElement instanceof HTMLElement ? e.parentElement : null;
-	e.dataset.state = "closed", e.remove(), t?.matches("[data-ui-toast-outlet]") && Yv(t);
-}, Zv = (e) => {
-	Jv.get(e)?.cancel();
+	e.dataset.state = "closed", e.remove(), t?.matches("[data-ui-toast-outlet]") && yy(t);
+}, xy = (e) => {
+	vy.get(e)?.cancel();
 	let t = Q.motion.animatePresence(e, "enter", "toast");
-	Jv.set(e, t), t.finished.finally(() => {
-		Jv.get(e) === t && Jv.delete(e);
+	vy.set(e, t), t.finished.finally(() => {
+		if (vy.get(e) !== t) return;
+		vy.delete(e), e.style.removeProperty("opacity"), e.style.removeProperty("transform");
+		let n = e.parentElement instanceof HTMLElement && e.parentElement.matches("[data-ui-toast-outlet]") ? e.parentElement : null;
+		n && yy(n);
 	});
-}, Qv = (e) => {
+}, Sy = (e) => {
 	if (!e.isConnected) return;
-	e.dataset.state = "closed", Jv.get(e)?.cancel();
+	e.dataset.state = "closed", vy.get(e)?.cancel();
 	let t = Q.motion.animatePresence(e, "exit", "toast");
-	Jv.set(e, t), t.finished.finally(() => {
-		Jv.get(e) === t && (Jv.delete(e), Xv(e));
+	vy.set(e, t), t.finished.finally(() => {
+		vy.get(e) === t && (vy.delete(e), by(e));
 	});
-}, $v = (e) => {
+}, Cy = (e) => {
 	let t = document.createElementNS("http://www.w3.org/2000/svg", "svg");
 	t.setAttribute("viewBox", "0 0 32 32"), t.setAttribute("aria-hidden", "true"), t.setAttribute("data-ui-toast-close-icon", ""), t.setAttribute("class", e);
 	let n = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
 	return n.setAttribute("points", "17.4141 16 24 9.4141 22.5859 8 16 14.5859 9.4143 8 8 9.4141 14.5859 16 8 22.5859 9.4143 24 16 17.4141 22.5859 24 24 22.5859 17.4141 16"), t.append(n), t;
-}, ey = () => ({
+}, wy = () => ({
 	props: null,
 	cleanup: [],
 	timer: null,
 	init() {
 		this.props = W({
 			el: this.$el,
-			schema: Vv
+			schema: cy
 		});
 		let e = this.$el, t = e.parentElement instanceof HTMLElement && e.parentElement.matches("[data-ui-toast-outlet]") ? e.parentElement : null;
-		e.dataset.state = "open", e.setAttribute("data-ui-motion-owner", "component"), t && Yv(t), Zv(e), this.props.dismissible && Q.addListener({
+		e.dataset.state = "open", e.setAttribute("data-ui-motion-owner", "component"), t && yy(t), xy(e), this.props.dismissible && Q.addListener({
 			target: e,
 			event: "click",
 			handler: (e) => {
@@ -14057,50 +14278,67 @@ var Ev = {
 		}), this.props.duration > 0 && (this.timer = window.setTimeout(() => this.dismiss(), this.props.duration));
 	},
 	destroy() {
-		this.props.disconnect(), this.cleanup.forEach((e) => e()), this.cleanup = [], this.timer !== null && window.clearTimeout(this.timer), Jv.get(this.$el)?.cancel();
+		this.props.disconnect(), this.cleanup.forEach((e) => e()), this.cleanup = [], this.timer !== null && window.clearTimeout(this.timer), vy.get(this.$el)?.cancel();
 	},
 	dismiss() {
 		let e = this.$el;
 		this.timer !== null && window.clearTimeout(this.timer), Q.dispatch({
 			el: e,
 			name: "ui:dismiss"
-		}), Qv(e);
+		}), Sy(e);
 	}
-}), ty = (e, t) => {
-	let n = Wv(e.level) ? e.level : "info", r = Gv(e.variant) ? e.variant : Wv(e.level) ? e.level : "default", i = typeof e.title == "string" ? e.title : "", a = typeof e.message == "string" ? e.message : "", o = Kv(e.duration, t), s = typeof e.dismissible == "boolean" ? e.dismissible : !0, c = n === "danger" || n === "warning", l = document.createElement("div");
-	l.dataset.uiToast = "", l.dataset.level = n, l.dataset.variant = r, l.dataset.duration = String(o), l.dataset.dismissible = String(s), l.dataset.state = "open", l.setAttribute("role", c ? "alert" : "status"), l.setAttribute("aria-live", c ? "assertive" : "polite"), l.setAttribute("aria-atomic", "true"), l.className = Q.resolveStyle({
-		part: Uv.parts.root,
+}), Ty = (e, t) => {
+	let n = dy(e.level) ? e.level : "info", r = hy(e.color, n), i = py(e.variant) ? e.variant : "default", a = typeof e.title == "string" ? e.title : "", o = typeof e.description == "string" ? e.description : "", s = o.trim().length > 0, c = r !== "neutral" && i !== "solid" && i !== "default", l = gy(e.duration, t), u = typeof e.dismissible == "boolean" ? e.dismissible : !0, d = n === "danger" || n === "warning", f = document.createElement("div");
+	f.dataset.uiToast = "", f.dataset.level = n, f.dataset.color = r, f.dataset.variant = i, f.dataset.duration = String(l), f.dataset.dismissible = String(u), f.dataset.description = String(s), f.dataset.state = "open", f.setAttribute("role", d ? "alert" : "status"), f.setAttribute("aria-live", d ? "assertive" : "polite"), f.setAttribute("aria-atomic", "true"), f.className = Q.resolveStyle({
+		part: uy.parts.root,
 		props: {
-			level: n,
-			variant: r
+			variant: i,
+			color: r,
+			hasDescription: s,
+			hasMarker: c
 		}
 	});
-	let u = document.createElement("span");
-	u.dataset.uiToastMarker = "", u.setAttribute("aria-hidden", "true"), u.className = Q.resolveStyle({
-		part: Uv.parts.marker,
-		props: { variant: r }
-	}), l.append(u);
-	let d = document.createElement("div");
-	if (d.dataset.uiToastContent = "", d.className = Q.resolveStyle({ part: Uv.parts.content }), i) {
+	let p = document.createElement("span");
+	p.dataset.uiToastMarker = "", p.setAttribute("aria-hidden", "true"), p.className = Q.resolveStyle({
+		part: uy.parts.marker,
+		props: {
+			variant: i,
+			color: r
+		}
+	}), f.append(p);
+	let m = document.createElement("div");
+	if (m.dataset.uiToastContent = "", m.className = Q.resolveStyle({ part: uy.parts.content }), a) {
 		let e = document.createElement("strong");
-		e.dataset.uiToastTitle = "", e.className = `${Q.resolveStyle({ part: Uv.parts.title })} text-sm font-medium text-foreground`, e.textContent = i, d.append(e);
+		e.dataset.uiToastTitle = "", e.className = `text-sm font-medium text-foreground ${Q.resolveStyle({
+			part: uy.parts.title,
+			props: { variant: i }
+		})}`, e.textContent = a, m.append(e);
+	}
+	if (s) {
+		let e = document.createElement("div");
+		e.dataset.uiToastDescription = "", e.className = `text-sm text-foreground-muted ${Q.resolveStyle({
+			part: uy.parts.description,
+			props: { variant: i }
+		})}`, e.textContent = o, m.append(e);
 	}
-	let f = document.createElement("div");
-	if (f.dataset.uiToastDescription = "", f.className = `${Q.resolveStyle({ part: Uv.parts.description })} text-sm text-foreground-muted`, f.textContent = a, d.append(f), l.append(d), s) {
+	if (f.append(m), u) {
 		let e = document.createElement("button");
-		e.type = "button", e.dataset.uiToastClose = "", e.setAttribute("aria-label", "Dismiss notification"), e.className = Q.resolveStyle({ part: Uv.parts.close }), e.append($v(Q.resolveStyle({ part: Uv.parts.closeIcon }))), e.addEventListener("click", () => Qv(l)), l.append(e);
+		e.type = "button", e.dataset.uiToastClose = "", e.setAttribute("aria-label", "Dismiss notification"), e.className = Q.resolveStyle({
+			part: uy.parts.close,
+			props: { variant: i }
+		}), e.append(Cy(Q.resolveStyle({ part: uy.parts.closeIcon }))), e.addEventListener("click", () => Sy(f)), f.append(e);
 	}
-	return o > 0 && window.setTimeout(() => Qv(l), o), l;
-}, ny = () => ({
+	return l > 0 && window.setTimeout(() => Sy(f), l), f;
+}, Ey = () => ({
 	props: null,
 	cleanup: [],
 	init() {
 		this.props = W({
 			el: this.$el,
-			schema: Hv
+			schema: ly
 		});
 		let e = this.$el;
-		Yv(e), Q.addListener({
+		yy(e), Q.addListener({
 			target: e,
 			event: "pointerover",
 			handler: () => {
@@ -14145,13 +14383,14 @@ var Ev = {
 		this.props.disconnect(), this.cleanup.forEach((e) => e()), this.cleanup = [];
 	},
 	add(e) {
-		if (!(typeof e.message == "string" && e.message)) return;
-		let t = this.$el, n = ty(e, this.props.duration);
-		n.setAttribute("data-ui-motion-owner", "component"), t.append(n), Yv(t), Zv(n);
-	}
-}), ry = (e) => {
-	e.data("UiToast", () => ey()), e.data("UiToastOutlet", () => ny());
-}, iy = {
+		let t = typeof e.title == "string" ? e.title : "", n = typeof e.description == "string" ? e.description : "";
+		if (!t.trim() && !n.trim()) return;
+		let r = this.$el, i = Ty(e, this.props.duration);
+		i.setAttribute("data-ui-motion-owner", "component"), r.append(i), yy(r), xy(i);
+	}
+}), Dy = (e) => {
+	e.data("UiToast", () => wy()), e.data("UiToastOutlet", () => Ey());
+}, Oy = {
 	bool: q,
 	className: Il,
 	create: Zl,
@@ -14161,21 +14400,21 @@ var Ev = {
 	defineProps: W,
 	defineStyles: Y,
 	json: vu,
+	mergeBindings: nu,
 	motion: Ws,
 	number: K,
 	oneOf: J,
-	props: nu,
 	propsFromSchema: Bf,
 	resolveStyle: X,
 	string: G
-}, ay = (e) => {
+}, ky = (e) => {
 	if (e.ajax) return;
 	let t = {}, n = document.querySelector("meta[name=\"csrf-token\"]");
 	n && (t.headers = { "X-CSRFToken": n.content }), e.plugin(de), e.plugin(C.configure(t));
-}, oy = (e) => {
-	_u(e.reactive), ay(e), Ys(e), Ap(e), Jl(), jm(), mm(e), Um(e), Qm(e), Sh(e), kh(e), Ph(e), lg(e), hg(e), Fg(e), Wg(e), a_(e), O_(e), Z_(e), hv(e), Lf(e), vp(e), Cv(e), Lv(e), ry(e);
+}, Ay = (e) => {
+	_u(e.reactive), ky(e), Ys(e), Ap(e), Jl(), Vm(), xm(e), $m(e), lh(e), Ph(e), Vh(e), Kh(e), xg(e), Og(e), $g(e), c_(e), C_(e), J_(e), _v(e), Fv(e), Lf(e), vp(e), Uv(e), ry(e), Dy(e);
 };
 //#endregion
-export { q as bool, Il as className, Zl as create, If as createResizable, Ll as cx, oy as default, oy as trellisUi, zf as defineManifest, W as defineProps, Y as defineStyles, vu as json, Ws as motion, K as number, J as oneOf, nu as props, Bf as propsFromSchema, X as resolveStyle, G as string, iy as ui };
+export { q as bool, Il as className, Zl as create, If as createResizable, Ll as cx, Ay as default, Ay as trellisUi, zf as defineManifest, W as defineProps, Y as defineStyles, vu as json, nu as mergeBindings, Ws as motion, K as number, J as oneOf, Bf as propsFromSchema, X as resolveStyle, G as string, Oy as ui };
 
 //# sourceMappingURL=index.js.map