@slotted/react 0.1.0-beta.1 → 0.1.0-beta.10

package/dist/hover-card-aadyPXzF.js

@@ -0,0 +1,215 @@
+import { a as e, f as t, l as n, n as r, p as i } from "./popover-D1krYeP-.js";
+import { keyedProps as a } from "@slotted/core/selector-key";
+import { tabbables as o } from "@slotted/core/focus";
+import { createControllable as s } from "@slotted/core/state";
+import { createContext as c, useCallback as l, useContext as u, useEffect as d, useRef as f, useState as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { createPointerIntent as g } from "@slotted/core/pointer-intent";
+//#region src/hover-card/hover-card-defaults.tsx
+var _ = {
+	closeDelay: 300,
+	disabled: !1,
+	navigable: !1,
+	openDelay: 600
+}, v = c(_);
+function y() {
+	return u(v);
+}
+function b({ children: e, ...t }) {
+	let n = y(), r = {
+		closeDelay: t.closeDelay ?? n.closeDelay,
+		disabled: t.disabled ?? n.disabled,
+		navigable: t.navigable ?? n.navigable,
+		openDelay: t.openDelay ?? n.openDelay
+	};
+	return /* @__PURE__ */ m(v.Provider, {
+		value: r,
+		children: e
+	});
+}
+//#endregion
+//#region src/hover-card/hover-card.tsx
+var x = c(void 0);
+function S() {
+	let e = u(x);
+	if (e === void 0) throw Error("HoverCardTrigger and HoverCardContent have to be inside a HoverCard.");
+	return e;
+}
+function C(e, t) {
+	return (n) => {
+		e?.(n), n.defaultPrevented || t(n);
+	};
+}
+function w(e, ...t) {
+	for (let n of t) typeof n == "function" ? n(e) : n != null && (n.current = e);
+}
+var T = 4;
+function E({ children: e, closeDelay: n, defaultOpen: r, disabled: i, navigable: a, onOpenChange: o, open: c, openDelay: u, ref: h, sideOffset: _, ...v }) {
+	let b = y(), [S, C] = p(r ?? !1), w = i ?? b.disabled, E = (c ?? S) && !w, D = f(void 0), O = f(null), k = f(!1), A = f({
+		current: E,
+		onOpenChange: o,
+		open: c
+	});
+	A.current = {
+		current: E,
+		onOpenChange: o,
+		open: c
+	};
+	let j = l(() => {
+		D.current !== void 0 && clearTimeout(D.current), D.current = void 0, O.current?.destroy(), O.current = null;
+	}, []);
+	d(() => j, [j]);
+	let M = l((e, t, n) => {
+		j();
+		let r = A.current;
+		if (e === r.current) return;
+		let i = !1, a = s({
+			controlled: r.open,
+			initial: r.current,
+			onRequest: (e) => {
+				i = e.cancelled, r.onOpenChange?.(e.value, e);
+			}
+		}).request(e, t, n);
+		i || (!e && (t === "escape" || t === "keyboard") && (k.current = !0), a && C(e));
+	}, [j]), N = u ?? b.openDelay, P = n ?? b.closeDelay, F = l((e) => {
+		j(), D.current = setTimeout(() => M(!0, "pointer", e), N);
+	}, [
+		j,
+		N,
+		M
+	]), I = {
+		cancelPending: j,
+		closeAfterDelay: l((e) => {
+			j(), D.current = setTimeout(() => M(!1, "pointer", e), P);
+		}, [
+			j,
+			P,
+			M
+		]),
+		closeDelay: P,
+		disabled: w,
+		graceToward: l((e, t, n, r) => {
+			j(), O.current = g({
+				origin: t,
+				target: e,
+				timeout: P,
+				onSettled: () => {
+					O.current = null, !n() && M(!1, "pointer", r);
+				}
+			});
+		}, [
+			j,
+			P,
+			M
+		]),
+		navigable: a ?? b.navigable,
+		open: E,
+		openAfterDelay: F,
+		openDelay: N,
+		suppressFocusOpen: k,
+		toggle: M
+	};
+	return /* @__PURE__ */ m(x.Provider, {
+		value: I,
+		children: /* @__PURE__ */ m(t, {
+			...v,
+			autoFocus: !1,
+			disabled: w,
+			onOpenChange: (e, t) => M(e, t.reason, t.source),
+			open: E,
+			ref: h,
+			sideOffset: _ ?? T,
+			children: e
+		})
+	});
+}
+function D({ children: e, ref: t, render: n, ...r }) {
+	let s = i(), c = S(), [u, h] = p(null), g = f(!1);
+	d(() => {
+		u !== null && s.triggerNode === null && s.setTriggerNode(u);
+	}, [
+		u,
+		s.setTriggerNode,
+		s.triggerNode
+	]);
+	let _ = u !== null && s.triggerNode === u, v = () => s.contentNode?.parentElement ?? null, y = () => {
+		u !== null && s.triggerNode !== u && s.setTriggerNode(u);
+	}, b = (e) => {
+		if (!(c.disabled || e.pointerType === "touch")) {
+			if (y(), c.open && _) {
+				c.cancelPending();
+				return;
+			}
+			c.openAfterDelay(e.nativeEvent);
+		}
+	}, x = (e) => {
+		if (e.pointerType !== "touch") {
+			if (!c.open || !_) {
+				c.cancelPending();
+				return;
+			}
+			c.graceToward(() => v()?.getBoundingClientRect() ?? null, () => u?.getBoundingClientRect() ?? null, () => (u?.matches(":hover") ?? !1) || (v()?.matches(":hover") ?? !1), e.nativeEvent);
+		}
+	}, T = (e) => {
+		c.disabled || c.suppressFocusOpen.current || e.target.matches(":focus-visible") && (y(), c.toggle(!0, "keyboard", e.nativeEvent));
+	}, E = (e) => {
+		if (c.suppressFocusOpen.current = !1, !c.open || !_) return;
+		let t = e.relatedTarget;
+		t instanceof Node && v()?.contains(t) || c.toggle(!1, "blur", e.nativeEvent);
+	}, D = (e) => {
+		if (!c.navigable || !c.open || !_ || e.key !== "Tab" || e.shiftKey) return;
+		let t = s.contentNode;
+		if (t === null) return;
+		let [n] = o(t);
+		n !== void 0 && (e.preventDefault(), n.focus());
+	}, O = (e) => {
+		g.current = e.pointerType === "touch";
+	}, k = (e) => {
+		g.current && (g.current = !1, !(c.disabled || c.open && _) && (e.preventDefault(), y(), c.toggle(!0, "pointer", e.nativeEvent)));
+	}, A = l((e) => {
+		h(e), w(e, t);
+	}, [t]), j = c.open && _, M = a({
+		...r,
+		children: e,
+		"data-ui": "hover-card",
+		"data-part": "root",
+		...j ? { "data-open": "" } : {},
+		...c.navigable ? {
+			"aria-controls": j ? s.contentId : void 0,
+			"aria-expanded": j,
+			"aria-haspopup": "dialog"
+		} : {},
+		onBlur: C(r.onBlur, E),
+		onClick: C(r.onClick, k),
+		onFocus: C(r.onFocus, T),
+		onKeyDown: C(r.onKeyDown, D),
+		onPointerDown: C(r.onPointerDown, O),
+		onPointerEnter: C(r.onPointerEnter, b),
+		onPointerLeave: C(r.onPointerLeave, x)
+	});
+	return n === void 0 ? /* @__PURE__ */ m("a", {
+		...M,
+		ref: A
+	}) : n({
+		...M,
+		ref: A
+	});
+}
+function O({ children: t, ...i }) {
+	let a = S();
+	return /* @__PURE__ */ h(n, {
+		onPointerEnter: (e) => {
+			e.pointerType !== "touch" && a.cancelPending();
+		},
+		onPointerLeave: (e) => {
+			e.pointerType !== "touch" && a.closeAfterDelay(e.nativeEvent);
+		},
+		children: [/* @__PURE__ */ m(e, {
+			role: a.navigable ? "dialog" : "presentation",
+			...i,
+			children: t
+		}), /* @__PURE__ */ m(r, {})]
+	});
+}
+//#endregion
+export { _ as a, S as i, O as n, b as o, D as r, y as s, E as t };

package/dist/hover-card.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./hover-card-CSDbA6zd.js";
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./hover-card-aadyPXzF.js";
 export { e as HOVER_CARD_FALLBACK, o as HoverCard, n as HoverCardContent, r as HoverCardDefaultsProvider, i as HoverCardTrigger, t as useHoverCard, a as useHoverCardDefaults };

package/dist/icon-DjqSEQ-o.js

@@ -0,0 +1,75 @@
+import { withSelectorKey as e } from "@slotted/core/selector-key";
+import { useId as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { GLYPHS as i, GLYPH_VIEW_BOX as a } from "@slotted/core/glyph";
+//#region src/icon/glyph.tsx
+function o({ name: o, solid: s = !1, ...c }) {
+	let l = i[o], [u, d] = l.offset, f = `sl-glyph-${t().replace(/[^a-zA-Z0-9_-]/g, "")}`, p = {
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: l.strokeWidth
+	}, m = l.paint === "fill" ? { fill: "currentColor" } : {
+		fill: "none",
+		stroke: "currentColor",
+		...p
+	}, [h, ...g] = l.paths;
+	return /* @__PURE__ */ r("svg", {
+		"aria-hidden": "true",
+		focusable: "false",
+		viewBox: a,
+		...s ? {} : m,
+		...e(c, "part", "glyph"),
+		"data-glyph": o,
+		"data-solid": s ? "" : void 0,
+		children: [s ? /* @__PURE__ */ n("defs", { children: /* @__PURE__ */ r("mask", {
+			height: "28",
+			id: f,
+			maskUnits: "userSpaceOnUse",
+			width: "28",
+			x: "-2",
+			y: "-2",
+			children: [/* @__PURE__ */ n("rect", {
+				fill: "#fff",
+				height: "28",
+				width: "28",
+				x: "-2",
+				y: "-2"
+			}), /* @__PURE__ */ n("g", {
+				fill: "none",
+				stroke: "#000",
+				...p,
+				children: g.map((e, t) => /* @__PURE__ */ n("path", { d: e }, t))
+			})]
+		}) }) : null, /* @__PURE__ */ n("g", {
+			transform: u === 0 && d === 0 ? void 0 : `translate(${u} ${d})`,
+			children: s ? /* @__PURE__ */ n("path", {
+				d: h,
+				fill: "currentColor",
+				mask: `url(#${f})`,
+				stroke: "currentColor",
+				...p
+			}) : l.paths.map((e, t) => /* @__PURE__ */ n("path", { d: e }, t))
+		})]
+	});
+}
+//#endregion
+//#region src/icon/icon.tsx
+function s({ directional: e, label: t, size: r, tone: i, ...a }) {
+	let o = t !== void 0 || a["aria-label"] !== void 0 || a["aria-labelledby"] !== void 0;
+	return /* @__PURE__ */ n("span", {
+		...a,
+		...r === void 0 ? {} : { "data-size": r },
+		...i === void 0 || i === "inherit" ? {} : { "data-tone": i },
+		...e === !0 ? { "data-directional": "" } : {},
+		...o ? {
+			role: a.role ?? "img",
+			...t === void 0 ? {} : { "aria-label": t }
+		} : { "aria-hidden": !0 },
+		"data-part": "root",
+		"data-part-root": "",
+		"data-ui": "icon",
+		"data-ui-icon": ""
+	});
+}
+//#endregion
+export { o as n, s as t };

package/dist/icon-button-CRB218_z.js

@@ -0,0 +1,222 @@
+import { n as e } from "./button-defaults-DNq_DDJh.js";
+import { r as t } from "./i18n-DpW8lqJ1.js";
+/* empty css                 */
+/* empty css                */
+import { keyedProps as n, selectorKeyProps as r } from "@slotted/core/selector-key";
+import { createControllable as i } from "@slotted/core/state";
+import { useEffect as a, useState as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { buttonMessages as u } from "@slotted/core/i18n";
+//#region src/button/button-content.tsx
+function d({ children: e, end: t, indicator: n, start: r }) {
+	let i = n != null, a = i && r !== void 0, o = i && !a && t !== void 0;
+	return /* @__PURE__ */ l(s, { children: [
+		r === void 0 ? null : /* @__PURE__ */ l("span", {
+			"data-part": "start",
+			"data-part-start": "",
+			children: [r, a ? n : null]
+		}),
+		/* @__PURE__ */ c("span", {
+			"data-part": "label",
+			"data-part-label": "",
+			children: e
+		}),
+		t === void 0 ? null : /* @__PURE__ */ l("span", {
+			"data-part": "end",
+			"data-part-end": "",
+			children: [t, o ? n : null]
+		}),
+		i && !a && !o ? n : null
+	] });
+}
+//#endregion
+//#region src/button/button.constants.ts
+var f = {
+	tone: "accent",
+	variant: "solid",
+	size: "md"
+}, p = f, m = {
+	tone: "secondary",
+	variant: "ghost",
+	size: "md",
+	shape: "square"
+}, h = {
+	tone: "secondary",
+	variant: "outline",
+	size: "md"
+};
+//#endregion
+//#region src/button/button-root.ts
+function g(e) {
+	return {
+		"data-ui": "button",
+		...r("ui", "button"),
+		"data-part": "root",
+		...r("part", "root"),
+		"data-tone": e.tone,
+		"data-variant": e.variant,
+		"data-size": e.size,
+		"data-shape": e.shape,
+		"data-full-width": e.fullWidth ? "" : void 0,
+		"data-justify": e.justify,
+		"data-disabled": e.disabled ? "" : void 0,
+		"data-loading": e.loading ? "" : void 0,
+		"data-pressed": e.pressed ? "" : void 0
+	};
+}
+function _(t, n) {
+	let r = e();
+	return {
+		tone: t.tone ?? r.tone ?? n.tone,
+		variant: t.variant ?? r.variant ?? n.variant,
+		size: t.size ?? r.size ?? n.size
+	};
+}
+function v(e) {
+	e.preventDefault(), e.stopPropagation(), e.nativeEvent.stopImmediatePropagation?.();
+}
+function y({ disabled: e = !1, focusableWhenDisabled: t = !1, loading: n = !1 }) {
+	return {
+		refuses: e || n,
+		nativelyDisabled: e && !t,
+		ariaDisabled: e && t || n || void 0
+	};
+}
+function b(e) {
+	return e.detail === 0 ? "keyboard" : "pointer";
+}
+function x({ loading: e = !1, loadingDelay: t = 0 }) {
+	let [n, r] = o(!1);
+	return a(() => {
+		if (!e || t <= 0) {
+			r(!1);
+			return;
+		}
+		let n = setTimeout(() => r(!0), t);
+		return () => clearTimeout(n);
+	}, [e, t]), e && (t <= 0 || n);
+}
+function S({ defaultPressed: e = !1, onPressedChange: t, pressed: n }) {
+	let [r, a] = o(e), s = i({
+		controlled: n,
+		initial: r,
+		onRequest: (e) => t?.(e.value, e)
+	});
+	return {
+		pressed: s.value,
+		requestToggle(e) {
+			let t = !s.value;
+			s.request(t, b(e), e) && a(t);
+		}
+	};
+}
+function C({ defaultPressed: e, pressed: t }) {
+	return t !== void 0 || e !== void 0;
+}
+//#endregion
+//#region src/button/button-indicator.tsx
+function w({ label: e }) {
+	return /* @__PURE__ */ c("span", {
+		"aria-label": e,
+		"data-part": "indicator",
+		"data-part-indicator": "",
+		"data-ui": "spinner",
+		"data-ui-spinner": "",
+		role: "progressbar"
+	});
+}
+//#endregion
+//#region src/button/button.tsx
+function T({ children: e, disabled: r = !1, end: i, focusableWhenDisabled: a = !1, fullWidth: o = !1, justify: s = "center", loading: l = !1, loadingDelay: p = 0, messages: m, onClick: h, onClickCapture: b, render: S, size: C, start: T, tone: E, type: D = "button", variant: O, ...k }) {
+	let A = _({
+		size: C,
+		tone: E,
+		variant: O
+	}, f), j = y({
+		disabled: r,
+		focusableWhenDisabled: a,
+		loading: l
+	}), M = x({
+		loading: l,
+		loadingDelay: p
+	}), N = t(u, m), P = n({
+		...k,
+		...g({
+			disabled: r,
+			fullWidth: o,
+			justify: s,
+			loading: l,
+			...A
+		}),
+		"aria-disabled": j.ariaDisabled,
+		children: /* @__PURE__ */ c(d, {
+			end: i,
+			indicator: M ? /* @__PURE__ */ c(w, { label: N("loading") }) : null,
+			start: T,
+			children: e
+		}),
+		disabled: j.nativelyDisabled,
+		onClick: (e) => {
+			if (j.refuses) return v(e);
+			h?.(e);
+		},
+		onClickCapture: (e) => {
+			if (j.refuses) return v(e);
+			b?.(e);
+		},
+		type: D
+	});
+	return S === void 0 ? /* @__PURE__ */ c("button", { ...P }) : S(P);
+}
+//#endregion
+//#region src/button/icon-button.tsx
+function E({ children: e, defaultPressed: r, disabled: i = !1, focusableWhenDisabled: a = !1, loading: o = !1, loadingDelay: s = 0, messages: d, onClick: f, onClickCapture: p, onPressedChange: h, pressed: b, render: T, shape: E = m.shape, size: D, tone: O, type: k = "button", variant: A, ...j }) {
+	let M = _({
+		size: D,
+		tone: O,
+		variant: A
+	}, m), N = y({
+		disabled: i,
+		focusableWhenDisabled: a,
+		loading: o
+	}), P = x({
+		loading: o,
+		loadingDelay: s
+	}), F = t(u, d), I = C({
+		defaultPressed: r,
+		pressed: b
+	}), L = S({
+		defaultPressed: r,
+		onPressedChange: h,
+		pressed: b
+	}), R = n({
+		...j,
+		...g({
+			disabled: i,
+			loading: o,
+			pressed: I ? L.pressed : void 0,
+			shape: E,
+			...M
+		}),
+		"aria-disabled": N.ariaDisabled,
+		"aria-pressed": I ? L.pressed : void 0,
+		children: /* @__PURE__ */ l("span", {
+			"data-part": "icon",
+			"data-part-icon": "",
+			children: [e, P ? /* @__PURE__ */ c(w, { label: F("loading") }) : null]
+		}),
+		disabled: N.nativelyDisabled,
+		onClick: (e) => {
+			if (N.refuses) return v(e);
+			f?.(e), I && !e.defaultPrevented && L.requestToggle(e);
+		},
+		onClickCapture: (e) => {
+			if (N.refuses) return v(e);
+			p?.(e);
+		},
+		type: k
+	});
+	return T === void 0 ? /* @__PURE__ */ c("button", { ...R }) : T(R);
+}
+//#endregion
+export { y as a, x as c, h as d, d as f, v as i, S as l, T as n, g as o, w as r, _ as s, E as t, p as u };

package/dist/icon.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "./icon-T9Yt4tnm.js";
+import { n as e, t } from "./icon-DjqSEQ-o.js";
 export { e as Glyph, t as Icon };

package/dist/{image-DpDFrrXL.js → image-Ajqo38Uz.js}

@@ -1,9 +1,10 @@
-import { n as e, t } from "./icon-T9Yt4tnm.js";
-import { t as n } from "./aspect-ratio-C76l-aoY.js";
-import { createContext as r, useCallback as i, useContext as a, useState as o } from "react";
+import { n as e, t } from "./icon-DjqSEQ-o.js";
+import { t as n } from "./aspect-ratio-CLxOFJVH.js";
+import { keyedProps as r } from "@slotted/core/selector-key";
+import { createContext as i, useCallback as a, useContext as o, useState as ee } from "react";
 import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/image/image-defaults.tsx
-var u = r({
+var u = i({
 	bordered: !1,
 	decoding: "async",
 	fit: "cover",
@@ -14,7 +15,7 @@ var u = r({
 	radius: "none"
 });
 function d() {
-	return a(u);
+	return o(u);
 }
 function f({ children: e, ...t }) {
 	let n = d();
@@ -41,8 +42,8 @@ var p = /* @__PURE__ */ new Set([
 	"start",
 	"end"
 ]);
-function m({ alt: r, bordered: a, className: u, decoding: f, fallback: m, fallbackSrc: g, fetchPriority: _, fit: v, layout: y, loading: ee, onError: b, onLoad: x, onStatusChange: S, placeholder: C, placeholderContent: w, placeholderSrc: T, position: E, priority: D = !1, radius: O, ratio: k, ref: A, render: j, renderImage: M, sources: N, src: P, status: te, style: F, ...I }) {
-	let L = d(), [R, z] = o(() => ({
+function m({ alt: i, bordered: o, className: u, decoding: f, fallback: m, fallbackSrc: g, fetchPriority: _, fit: v, layout: y, loading: b, onError: x, onLoad: S, onStatusChange: C, placeholder: te, placeholderContent: w, placeholderSrc: T, position: E, priority: D = !1, radius: O, ratio: k, ref: A, render: j, renderImage: M, sources: N, src: P, status: ne, style: F, ...I }) {
+	let L = d(), [R, z] = ee(() => ({
 		attempt: "primary",
 		src: P,
 		status: h(P)
@@ -52,9 +53,9 @@ function m({ alt: r, bordered: a, className: u, decoding: f, fallback: m, fallba
 		src: P,
 		status: h(P)
 	});
-	let B = te ?? R.status, V = R.attempt === "fallback" ? g : P, H = i((e) => {
-		z((t) => t.src === e.src ? e : t), S?.(e.status);
-	}, [S]), U = i((e) => {
+	let B = ne ?? R.status, V = R.attempt === "fallback" ? g : P, H = a((e) => {
+		z((t) => t.src === e.src ? e : t), C?.(e.status);
+	}, [C]), U = a((e) => {
 		typeof A == "function" ? A(e) : A != null && (A.current = e), e !== null && e.complete && e.naturalWidth > 0 && R.status === "loading" && H({
 			attempt: R.attempt,
 			src: P,
@@ -66,13 +67,13 @@ function m({ alt: r, bordered: a, className: u, decoding: f, fallback: m, fallba
 		H,
 		P
 	]), W = (e) => {
-		x?.(e), R.status !== "loaded" && H({
+		S?.(e), R.status !== "loaded" && H({
 			attempt: R.attempt,
 			src: P,
 			status: "loaded"
 		});
 	}, G = (e) => {
-		if (b?.(e), R.attempt === "primary" && g !== void 0) {
+		if (x?.(e), R.attempt === "primary" && g !== void 0) {
 			z({
 				attempt: "fallback",
 				src: P,
@@ -85,19 +86,20 @@ function m({ alt: r, bordered: a, className: u, decoding: f, fallback: m, fallba
 			src: P,
 			status: "error"
 		});
-	}, K = y ?? (k === void 0 ? L.layout : "framed"), q = E ?? L.position, J = p.has(q) ? q : "custom", Y = C ?? L.placeholder, X = {
+	}, K = y ?? (k === void 0 ? L.layout : "framed"), q = E ?? L.position, J = p.has(q) ? q : "custom", Y = te ?? L.placeholder, X = r({
 		...I,
-		alt: r,
+		alt: i,
 		"data-part": "image",
 		decoding: f ?? L.decoding,
 		..._ === void 0 ? D ? { fetchPriority: "high" } : {} : { fetchPriority: _ },
-		loading: ee ?? (D ? "eager" : L.loading),
+		loading: b ?? (D ? "eager" : L.loading),
 		onError: G,
 		onLoad: W,
 		ref: U,
 		...V === void 0 ? {} : { src: V }
-	}, Z = M === void 0 ? /* @__PURE__ */ c("img", { ...X }) : M(X), ne = N === void 0 || N.length === 0 ? Z : /* @__PURE__ */ l("picture", {
+	}), Z = M === void 0 ? /* @__PURE__ */ c("img", { ...X }) : M(X), re = N === void 0 || N.length === 0 ? Z : /* @__PURE__ */ l("picture", {
 		"data-part": "picture",
+		"data-part-picture": "",
 		children: [N.map((e, t) => /* @__PURE__ */ c("source", {
 			...e.media === void 0 ? {} : { media: e.media },
 			...e.sizes === void 0 ? {} : { sizes: e.sizes },
@@ -105,10 +107,11 @@ function m({ alt: r, bordered: a, className: u, decoding: f, fallback: m, fallba
 			...e.type === void 0 ? {} : { type: e.type }
 		}, t)), Z]
 	}), Q = /* @__PURE__ */ l(s, { children: [
-		ne,
+		re,
 		/* @__PURE__ */ l("span", {
 			"aria-hidden": "true",
 			"data-part": "placeholder",
+			"data-part-placeholder": "",
 			children: [Y === "blur" && T !== void 0 ? /* @__PURE__ */ c("img", {
 				alt: "",
 				src: T
@@ -116,9 +119,10 @@ function m({ alt: r, bordered: a, className: u, decoding: f, fallback: m, fallba
 		}),
 		/* @__PURE__ */ c("span", {
 			"data-part": "fallback",
+			"data-part-fallback": "",
 			children: m ?? /* @__PURE__ */ c(t, { children: /* @__PURE__ */ c(e, { name: "image-off" }) })
 		})
-	] }), $ = {
+	] }), $ = r({
 		children: k === void 0 ? Q : /* @__PURE__ */ c(n, {
 			ratio: k,
 			children: Q
@@ -132,12 +136,12 @@ function m({ alt: r, bordered: a, className: u, decoding: f, fallback: m, fallba
 		"data-radius": O ?? L.radius,
 		"data-status": B,
 		"data-ui": "image",
-		...a ?? L.bordered ? { "data-bordered": "" } : {},
+		...o ?? L.bordered ? { "data-bordered": "" } : {},
 		style: J === "custom" ? {
 			...F,
 			"--slotted-image-position": q
 		} : F
-	};
+	});
 	return j === void 0 ? /* @__PURE__ */ c("div", { ...$ }) : j($);
 }
 function h(e) {

package/dist/image.js

@@ -1,2 +1,2 @@
-import { n as e, r as t, t as n } from "./image-DpDFrrXL.js";
+import { n as e, r as t, t as n } from "./image-Ajqo38Uz.js";
 export { n as Image, e as ImageDefaultsProvider, t as useImageDefaults };