@marimo-team/islands 0.25.2-dev64 → 0.25.2-dev66

package/dist/{ErrorBoundary-mbMvc-EB.js → ErrorBoundary-BHvUXPtK.js}

@@ -135,7 +135,7 @@ function F(e) {
 }
 //#endregion
 //#region src/components/editor/boundary/ErrorBoundary.tsx
-var I = (0, T.lazy)(() => import("./feedback-button-Ehj96tA4.js").then((e) => ({ default: e.FeedbackModal }))), L = (e) => {
+var I = (0, T.lazy)(() => import("./feedback-button-C_dzhSZo.js").then((e) => ({ default: e.FeedbackModal }))), L = (e) => {
 	let t = (0, w.c)(2), n;
 	return t[0] === e.children ? n = t[1] : (n = /* @__PURE__ */ (0, j.jsx)(O, {
 		FallbackComponent: R,

package/dist/{code-visibility-DwRnMyBy.js → code-visibility-a6v4Kwtn.js}

@@ -18,7 +18,7 @@ function x() {
 		return e.warn("Failed to get version from mount config"), null;
 	}
 }
-var S = x() || "0.25.2-dev64", C = u(S), w = u(!0);
+var S = x() || "0.25.2-dev66", C = u(S), w = u(!0);
 u(null);
 //#endregion
 //#region src/core/wasm/state.ts

package/dist/{common-D1NEOSXA.js → common-Lbz4UoEr.js}

@@ -12,7 +12,7 @@ import { t as ct } from "./check-CNP79M3A.js";
 import { A as lt, C as ut, M as dt, O as ft, S as pt, _ as mt, b as ht, c as gt, d as _t, g as vt, h as yt, i as bt, l as xt, m as St, n as Ct, p as wt, s as Tt, t as Et, u as Dt, v as Ot, y as kt } from "./select-Bs-nmvm6.js";
 import { $ as At, $t as jt, A as Mt, At as Nt, B as Pt, Bt as Ft, Ct as It, D as Lt, Dt as Rt, E as zt, Et as Bt, F as Vt, Ft as Ht, G as Ut, Gt as Wt, H as Gt, Ht as Kt, I as qt, It as Jt, J as Yt, Jt as Xt, Kt as Zt, L as Qt, Lt as $t, M as en, Mt as tn, N as nn, Nt as rn, O as an, Ot as on, P as sn, Pt as cn, Q as ln, Qt as un, R as dn, Rt as fn, S as pn, St as mn, T as hn, Tt as gn, U as _n, Ut as vn, V as yn, Vt as bn, W as xn, Wt as Sn, X as Cn, Xt as wn, Y as Tn, Yt as En, Z as Dn, Zt as On, _ as kn, _n as An, _t as jn, a as Mn, at as Nn, b as Pn, bt as Fn, cn as In, ct as Ln, d as Rn, dn as zn, dt as Bn, et as Vn, f as Hn, fn as Un, ft as Wn, gn as Gn, gt as Kn, h as qn, hn as Jn, ht as Yn, i as Xn, in as Zn, it as Qn, j as $n, jt as er, k as tr, kt as nr, l as rr, lt as ir, mn as ar, mt as or, n as sr, nn as cr, nt as lr, o as ur, on as dr, ot as fr, pn as pr, pt as mr, qt as hr, rn as gr, rt as _r, s as vr, sn as yr, st as br, t as xr, tn as Sr, tt as Cr, u as wr, un as Tr, vn as Er, vt as Dr, w as Or, wt as kr, x as Ar, xt as jr, y as Mr, yt as Nr, z as Pr, zt as Fr } from "./dropdown-menu-Cz4TdOJh.js";
 import { C as Ir, a as Lr, b as Rr, c as zr, d as Br, i as Vr, n as Hr, o as Ur, p as Wr, r as Gr, s as Kr, t as qr, x as Jr } from "./toDate-vEi5kTfY.js";
-import { n as Yr, t as Xr } from "./ErrorBoundary-mbMvc-EB.js";
+import { n as Yr, t as Xr } from "./ErrorBoundary-BHvUXPtK.js";
 import { t as Zr } from "./clsx-CoeGtWvn.js";
 import { t as Qr } from "./react-dom-BUgJ-ab_.js";
 import { t as $r } from "./jsx-runtime-DgDPJV9S.js";

package/dist/{data-grid-overlay-editor-DXQCTVEU.js → data-grid-overlay-editor-C7u6VQ9U.js}

@@ -2,7 +2,7 @@ import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
 import { t } from "./react-ofJbxM4x.js";
 import { t as n } from "./react-dom-BUgJ-ab_.js";
 import { c as r, l as i, u as a } from "./data-grid-types-BucVmDDp.js";
-import { a as o, i as s, n as c, r as l } from "./glide-data-editor-DfRNtZdm.js";
+import { a as o, i as s, n as c, r as l } from "./glide-data-editor-CQKpxgZb.js";
 //#region ../node_modules/.pnpm/@glideapps+glide-data-grid@6.0.4-alpha24_lodash@4.17.21_marked@15.0.12_react-dom@19.2.8_b9e6aec46d952f631ce71b0585d2a8e5/node_modules/@glideapps/glide-data-grid/dist/esm/internal/data-grid-overlay-editor/data-grid-overlay-editor-style.js
 var u = /* @__PURE__ */ e(t(), 1), d = /* @__PURE__ */ e(n(), 1), f = /*#__PURE__*/ o("div")({
 	name: "DataGridOverlayEditorStyle",

package/dist/{feedback-button-Ehj96tA4.js → feedback-button-C_dzhSZo.js}

@@ -5,12 +5,12 @@ import { t as i } from "./compiler-runtime-Cj8ZWiNS.js";
 import { t as a } from "./copy-icon-BY7jgcaV.js";
 import { Ct as o, Ft as s, H as c, L as l, Lt as u, V as d, d as f, un as p } from "./cells-DzqPprAQ.js";
 import { b as m } from "./select-Bs-nmvm6.js";
-import { n as h, t as ee } from "./globals-BdFfEsOJ.js";
+import { n as h, t as ee } from "./globals-B0wv8u9V.js";
 import { t as g } from "./jsx-runtime-DgDPJV9S.js";
 import { C as _, _ as te, i as v } from "./useTheme-BwSgeAFb.js";
 import { a as ne, i as re, n as ie, r as ae } from "./dialog-CmExhUDI.js";
 import { t as oe } from "./useAsyncData-rkAlR_vh.js";
-import { t as se } from "./code-visibility-DwRnMyBy.js";
+import { t as se } from "./code-visibility-a6v4Kwtn.js";
 import { i as ce, n as le } from "./error-entries-CdgPvJVz.js";
 //#region src/components/ui/skeleton.tsx
 var y = /* @__PURE__ */ e(r(), 1), b = i(), x = g(), ue = (e) => {

package/dist/{glide-data-editor-DfRNtZdm.js → glide-data-editor-CQKpxgZb.js}

@@ -6,7 +6,7 @@ import { i as s, n as c, r as l } from "./copy-icon-BY7jgcaV.js";
 import { C as u, c as d, i as f, n as p, s as m, t as h, x as g } from "./select-Bs-nmvm6.js";
 import { d as _, h as v, i as y, l as b, n as x, o as S, s as C, t as w, u as T } from "./dropdown-menu-Cz4TdOJh.js";
 import { c as E, d as D, l as O, n as k, o as A, s as ee, t as j, u as te } from "./glide-utils-BVJ4fkxX.js";
-import { n as ne, t as re } from "./ErrorBoundary-mbMvc-EB.js";
+import { n as ne, t as re } from "./ErrorBoundary-BHvUXPtK.js";
 import { t as M } from "./react-dom-BUgJ-ab_.js";
 import { t as N } from "./jsx-runtime-DgDPJV9S.js";
 import { t as ie } from "./label-DQO1jFjf.js";
@@ -7062,7 +7062,7 @@ function rs(e, t, n, r, i) {
 }
 //#endregion
 //#region ../node_modules/.pnpm/@glideapps+glide-data-grid@6.0.4-alpha24_lodash@4.17.21_marked@15.0.12_react-dom@19.2.8_b9e6aec46d952f631ce71b0585d2a8e5/node_modules/@glideapps/glide-data-grid/dist/esm/data-editor/data-editor.js
-var is = /* @__PURE__ */ e(_r(), 1), as = /* @__PURE__ */ e(xr(), 1), os = K.lazy(async () => await import("./data-grid-overlay-editor-DXQCTVEU.js")), ss = 0;
+var is = /* @__PURE__ */ e(_r(), 1), as = /* @__PURE__ */ e(xr(), 1), os = K.lazy(async () => await import("./data-grid-overlay-editor-C7u6VQ9U.js")), ss = 0;
 function cs(e) {
 	return (0, is.default)((0, as.default)((0, as.default)(e).filter((e) => e.span !== void 0).map((e) => (0, Za.default)((e.span?.[0] ?? 0) + 1, (e.span?.[1] ?? 0) + 1))));
 }
@@ -9293,7 +9293,7 @@ function Vs(e, t, n, r, i) {
 }
 //#endregion
 //#region ../node_modules/.pnpm/@glideapps+glide-data-grid@6.0.4-alpha24_lodash@4.17.21_marked@15.0.12_react-dom@19.2.8_b9e6aec46d952f631ce71b0585d2a8e5/node_modules/@glideapps/glide-data-grid/dist/esm/cells/number-cell.js
-var Hs = K.lazy(async () => await import("./number-overlay-editor-CbVbYCai.js")), Us = {
+var Hs = K.lazy(async () => await import("./number-overlay-editor-BfWfXUbU.js")), Us = {
 	getAccessibilityString: (e) => e.data?.toString() ?? "",
 	kind: W.Number,
 	needsHover: (e) => e.hoverEffect === !0,

package/dist/{globals-BdFfEsOJ.js → globals-B0wv8u9V.js}

@@ -1,6 +1,6 @@
 import { h as e } from "./tooltip-CuNWg2ay.js";
 import { _ as t } from "./useTheme-BwSgeAFb.js";
-import { r as n } from "./code-visibility-DwRnMyBy.js";
+import { r as n } from "./code-visibility-a6v4Kwtn.js";
 var r = e("triangle-alert", [
 	["path", {
 		d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3",

package/dist/main.js

@@ -7,7 +7,7 @@ import { C as w, F as T, G as E, I as D, J as O, K as k, L as A, P as j, R as M,
 import { a as oe, d as se, f as ce, h as V, i as le, n as ue, o as de, r as fe, t as pe } from "./tooltip-CuNWg2ay.js";
 import { $ as me, $t as he, B as ge, Bt as _e, C as ve, Ct as ye, D as be, Dt as xe, Et as Se, F as Ce, G as we, Gt as Te, Ht as Ee, I as De, J as Oe, Jt as ke, Kt as Ae, L as je, O as Me, Ot as Ne, P as Pe, Pt as Fe, Q as Ie, Qt as Le, Rt as Re, S as ze, St as Be, T as Ve, Tt as He, U as Ue, W as We, Wt as Ge, bt as Ke, c as qe, cn as Je, ct as Ye, d as Xe, dn as Ze, dt as Qe, en as $e, f as et, fn as tt, ft as nt, g as rt, gt as it, h as at, hn as ot, k as st, l as ct, ln as lt, m as ut, mn as dt, n as ft, o as pt, on as mt, ot as ht, p as gt, q as _t, qt as vt, r as yt, rn as bt, rt as xt, sn as St, st as Ct, tn as wt, u as Tt, v as Et, w as Dt, wt as Ot, zt as kt } from "./cells-DzqPprAQ.js";
 import { D as At, E as jt, O as Mt, S as Nt, T as Pt, _ as Ft, a as It, c as Lt, d as Rt, f as zt, g as Bt, h as Vt, i as Ht, l as Ut, m as Wt, n as Gt, o as Kt, p as qt, r as Jt, s as Yt, t as Xt, u as Zt, v as Qt, w as $t, x as en, y as tn } from "./spec-DVsoMvYT.js";
-import { $t as nn, A as rn, At as an, B as on, Bt as sn, C as cn, Ct as ln, D as un, Dt as dn, E as fn, Et as pn, F as mn, Ft as hn, G as gn, Gt as _n, H as vn, Ht as yn, I as bn, It as xn, J as Sn, Jt as Cn, K as wn, Kt as Tn, L as En, Lt as Dn, M as On, Mt as kn, N as An, Nt as jn, O as Mn, Ot as Nn, P as Pn, Pt as Fn, Qt as In, R as Ln, Rt as Rn, S as zn, St as Bn, T as Vn, Tt as Hn, U as Un, Ut as Wn, V as Gn, Vt as Kn, W as qn, Wt as Jn, X as Yn, Xt as Xn, Y as Zn, Yt as Qn, Zt as $n, _ as er, _t as tr, an as nr, at as rr, b as ir, c as ar, cn as or, ct as sr, d as cr, dn as lr, dt as ur, en as dr, et as fr, f as pr, fn as mr, ft as hr, g as gr, gt as _r, h as vr, hn as yr, ht as br, in as xr, it as Sr, j as Cr, jt as wr, k as Tr, kt as Er, ln as Dr, lt as Or, m as kr, mn as Ar, mt as jr, nn as Mr, nt as Nr, ot as Pr, p as Fr, pn as Ir, pt as Lr, q as Rr, qt as zr, r as Br, rn as Vr, rt as Hr, sn as Ur, st as Wr, t as Gr, tn as Kr, tt as qr, u as Jr, un as Yr, ut as Xr, v as Zr, vt as Qr, w as $r, wt as ei, x as ti, y as ni, yt as ri, z as ii, zt as ai } from "./common-D1NEOSXA.js";
+import { $t as nn, A as rn, At as an, B as on, Bt as sn, C as cn, Ct as ln, D as un, Dt as dn, E as fn, Et as pn, F as mn, Ft as hn, G as gn, Gt as _n, H as vn, Ht as yn, I as bn, It as xn, J as Sn, Jt as Cn, K as wn, Kt as Tn, L as En, Lt as Dn, M as On, Mt as kn, N as An, Nt as jn, O as Mn, Ot as Nn, P as Pn, Pt as Fn, Qt as In, R as Ln, Rt as Rn, S as zn, St as Bn, T as Vn, Tt as Hn, U as Un, Ut as Wn, V as Gn, Vt as Kn, W as qn, Wt as Jn, X as Yn, Xt as Xn, Y as Zn, Yt as Qn, Zt as $n, _ as er, _t as tr, an as nr, at as rr, b as ir, c as ar, cn as or, ct as sr, d as cr, dn as lr, dt as ur, en as dr, et as fr, f as pr, fn as mr, ft as hr, g as gr, gt as _r, h as vr, hn as yr, ht as br, in as xr, it as Sr, j as Cr, jt as wr, k as Tr, kt as Er, ln as Dr, lt as Or, m as kr, mn as Ar, mt as jr, nn as Mr, nt as Nr, ot as Pr, p as Fr, pn as Ir, pt as Lr, q as Rr, qt as zr, r as Br, rn as Vr, rt as Hr, sn as Ur, st as Wr, t as Gr, tn as Kr, tt as qr, u as Jr, un as Yr, ut as Xr, v as Zr, vt as Qr, w as $r, wt as ei, x as ti, y as ni, yt as ri, z as ii, zt as ai } from "./common-Lbz4UoEr.js";
 import { c as oi, i as si, n as ci, o as li, t as ui } from "./useLifecycle-B68iY077.js";
 import { t as di } from "./check-CNP79M3A.js";
 import { A as fi, C as pi, D as mi, E as hi, M as gi, O as _i, S as vi, T as yi, a as bi, b as xi, c as Si, i as Ci, k as wi, l as Ti, n as Ei, o as Di, r as Oi, s as ki, t as Ai, w as ji, x as Mi } from "./select-Bs-nmvm6.js";
@@ -15,8 +15,8 @@ import { $ as Ni, C as Pi, Et as Fi, J as Ii, K as Li, R as Ri, S as zi, U as Bi
 import { C as ua, S as da, T as fa, _ as pa, c as ma, d as ha, f as ga, g as _a, h as va, m as ya, u as ba, x as xa, y as Sa } from "./toDate-vEi5kTfY.js";
 import { a as Ca, c as wa, d as Ta, f as Ea, i as Da, l as Oa, n as ka, o as Aa, r as ja, s as Ma, t as Na } from "./process-output-CdDN3Pdp.js";
 import { a as Pa, c as Fa, d as Ia, i as La, l as Ra, r as za, u as Ba } from "./glide-utils-BVJ4fkxX.js";
-import { n as Va, t as Ha } from "./ErrorBoundary-mbMvc-EB.js";
-import { n as Ua, t as Wa } from "./globals-BdFfEsOJ.js";
+import { n as Va, t as Ha } from "./ErrorBoundary-BHvUXPtK.js";
+import { n as Ua, t as Wa } from "./globals-B0wv8u9V.js";
 import { t as Ga } from "./react-dom-BUgJ-ab_.js";
 import { t as Ka } from "./jsx-runtime-DgDPJV9S.js";
 import { B as qa, C as H, Ct as Ja, D as Ya, E as Xa, F as U, G as Za, H as Qa, I as $a, L as eo, M as W, N as to, O as no, P as ro, Q as io, R as ao, S as G, St as oo, Tt as so, U as co, W as lo, Y as uo, Z as fo, _ as po, _t as mo, a as ho, b as go, bt as _o, c as vo, d as yo, f as bo, g as xo, h as So, ht as Co, i as wo, j as K, k as To, l as Eo, m as Do, n as Oo, o as ko, p as Ao, r as jo, s as Mo, u as No, ut as Po, v as Fo, vt as Io, w as Lo, wt as Ro, x as zo, xt as Bo, y as Vo, yt as Ho } from "./use-restore-focus-kmgwrL8q.js";
@@ -39,7 +39,7 @@ import { t as Ms } from "./useAsyncData-rkAlR_vh.js";
 import { i as Ns, n as Ps, r as Fs } from "./formats-DhhbdyAH.js";
 import { M as Is, N as Ls } from "./vega-loader.browser-DNST6uVf.js";
 import { a as Rs, n as zs } from "./loader-Cm-ATtou.js";
-import { c as Bs, d as Vs, i as Hs, l as Us, o as Ws, s as Gs, t as Ks, u as qs } from "./code-visibility-DwRnMyBy.js";
+import { c as Bs, d as Vs, i as Hs, l as Us, o as Ws, s as Gs, t as Ks, u as qs } from "./code-visibility-a6v4Kwtn.js";
 import { t as Js } from "./useDeepCompareMemoize-BlHFBj5_.js";
 import { t as Ys } from "./esm-D2gTsXEV.js";
 //#region ../node_modules/.pnpm/iconify-icon@2.3.0/node_modules/iconify-icon/dist/iconify-icon.mjs
@@ -10514,7 +10514,7 @@ function VC(e, t) {
 }
 //#endregion
 //#region src/plugins/impl/DataEditorPlugin.tsx
-var HC = J.lazy(() => import("./glide-data-editor-DfRNtZdm.js").then((e) => e.t)), UC = wS("marimo-data-editor", { cssStyles: [qS] }).withData(W({
+var HC = J.lazy(() => import("./glide-data-editor-CQKpxgZb.js").then((e) => e.t)), UC = wS("marimo-data-editor", { cssStyles: [qS] }).withData(W({
 	initialValue: W({ edits: G(W({
 		rowIdx: K(),
 		columnId: U(),
@@ -21572,92 +21572,98 @@ var Jj = class {
 		});
 	}
 }, Yj = (e) => {
-	let t = (0, X.c)(57), n;
-	t[0] !== e.maxLength || t[1] !== e.value ? (n = e.maxLength ? /* @__PURE__ */ (0, Y.jsxs)("span", {
+	let t = (0, X.c)(63), n = (0, J.useId)(), r;
+	t[0] !== e.maxLength || t[1] !== e.value ? (r = e.maxLength ? /* @__PURE__ */ (0, Y.jsxs)("span", {
 		className: "text-muted-foreground text-xs font-medium",
 		children: [
 			e.value.length,
 			"/",
 			e.maxLength
 		]
-	}) : null, t[0] = e.maxLength, t[1] = e.value, t[2] = n) : n = t[2];
-	let r = n;
+	}) : null, t[0] = e.maxLength, t[1] = e.value, t[2] = r) : r = t[2];
+	let i = r;
 	if (e.debounce === !0) {
-		let n = e.label, i = e.fullWidth, a;
-		t[3] === e.fullWidth ? a = t[4] : (a = c("font-code", { "w-full": e.fullWidth }), t[3] = e.fullWidth, t[4] = a);
-		let o = e.minLength != null && e.minLength > 0, s;
-		t[5] !== r || t[6] !== e.disabled || t[7] !== e.maxLength || t[8] !== e.minLength || t[9] !== e.placeholder || t[10] !== e.rows || t[11] !== e.setValue || t[12] !== e.value || t[13] !== a || t[14] !== o ? (s = /* @__PURE__ */ (0, Y.jsx)(Ph, {
-			className: a,
+		let r = e.label, a = e.fullWidth, o;
+		t[3] === e.fullWidth ? o = t[4] : (o = c("font-code", { "w-full": e.fullWidth }), t[3] = e.fullWidth, t[4] = o);
+		let s = e.minLength != null && e.minLength > 0, l;
+		t[5] !== i || t[6] !== e.disabled || t[7] !== e.maxLength || t[8] !== e.minLength || t[9] !== e.placeholder || t[10] !== e.rows || t[11] !== e.setValue || t[12] !== e.value || t[13] !== o || t[14] !== s || t[15] !== n ? (l = /* @__PURE__ */ (0, Y.jsx)(Ph, {
+			id: n,
+			className: o,
 			rows: e.rows,
 			cols: 33,
 			maxLength: e.maxLength,
 			minLength: e.minLength,
-			required: o,
+			required: s,
 			disabled: e.disabled,
-			bottomAdornment: r,
+			bottomAdornment: i,
 			value: e.value,
 			onValueChange: e.setValue,
 			placeholder: e.placeholder
-		}), t[5] = r, t[6] = e.disabled, t[7] = e.maxLength, t[8] = e.minLength, t[9] = e.placeholder, t[10] = e.rows, t[11] = e.setValue, t[12] = e.value, t[13] = a, t[14] = o, t[15] = s) : s = t[15];
-		let l;
-		return t[16] !== e.fullWidth || t[17] !== e.label || t[18] !== s ? (l = /* @__PURE__ */ (0, Y.jsx)(LS, {
-			label: n,
+		}), t[5] = i, t[6] = e.disabled, t[7] = e.maxLength, t[8] = e.minLength, t[9] = e.placeholder, t[10] = e.rows, t[11] = e.setValue, t[12] = e.value, t[13] = o, t[14] = s, t[15] = n, t[16] = l) : l = t[16];
+		let u;
+		return t[17] !== e.fullWidth || t[18] !== e.label || t[19] !== l || t[20] !== n ? (u = /* @__PURE__ */ (0, Y.jsx)(LS, {
+			controlId: n,
+			label: r,
 			align: "top",
-			fullWidth: i,
-			children: s
-		}), t[16] = e.fullWidth, t[17] = e.label, t[18] = s, t[19] = l) : l = t[19], l;
+			fullWidth: a,
+			children: l
+		}), t[17] = e.fullWidth, t[18] = e.label, t[19] = l, t[20] = n, t[21] = u) : u = t[21], u;
 	}
 	if (typeof e.debounce == "number") {
-		let n = e.label, i = e.fullWidth, a;
-		t[20] === e.fullWidth ? a = t[21] : (a = c("font-code", { "w-full": e.fullWidth }), t[20] = e.fullWidth, t[21] = a);
-		let o = e.minLength != null && e.minLength > 0, s;
-		t[22] !== r || t[23] !== e.debounce || t[24] !== e.disabled || t[25] !== e.maxLength || t[26] !== e.minLength || t[27] !== e.placeholder || t[28] !== e.rows || t[29] !== e.setValue || t[30] !== e.value || t[31] !== a || t[32] !== o ? (s = /* @__PURE__ */ (0, Y.jsx)(Nh, {
-			className: a,
+		let r = e.label, a = e.fullWidth, o;
+		t[22] === e.fullWidth ? o = t[23] : (o = c("font-code", { "w-full": e.fullWidth }), t[22] = e.fullWidth, t[23] = o);
+		let s = e.minLength != null && e.minLength > 0, l;
+		t[24] !== i || t[25] !== e.debounce || t[26] !== e.disabled || t[27] !== e.maxLength || t[28] !== e.minLength || t[29] !== e.placeholder || t[30] !== e.rows || t[31] !== e.setValue || t[32] !== e.value || t[33] !== o || t[34] !== s || t[35] !== n ? (l = /* @__PURE__ */ (0, Y.jsx)(Nh, {
+			id: n,
+			className: o,
 			rows: e.rows,
 			cols: 33,
 			maxLength: e.maxLength,
 			minLength: e.minLength,
-			required: o,
+			required: s,
 			disabled: e.disabled,
-			bottomAdornment: r,
+			bottomAdornment: i,
 			value: e.value,
 			onValueChange: e.setValue,
 			placeholder: e.placeholder,
 			delay: e.debounce
-		}), t[22] = r, t[23] = e.debounce, t[24] = e.disabled, t[25] = e.maxLength, t[26] = e.minLength, t[27] = e.placeholder, t[28] = e.rows, t[29] = e.setValue, t[30] = e.value, t[31] = a, t[32] = o, t[33] = s) : s = t[33];
-		let l;
-		return t[34] !== e.fullWidth || t[35] !== e.label || t[36] !== s ? (l = /* @__PURE__ */ (0, Y.jsx)(LS, {
-			label: n,
+		}), t[24] = i, t[25] = e.debounce, t[26] = e.disabled, t[27] = e.maxLength, t[28] = e.minLength, t[29] = e.placeholder, t[30] = e.rows, t[31] = e.setValue, t[32] = e.value, t[33] = o, t[34] = s, t[35] = n, t[36] = l) : l = t[36];
+		let u;
+		return t[37] !== e.fullWidth || t[38] !== e.label || t[39] !== l || t[40] !== n ? (u = /* @__PURE__ */ (0, Y.jsx)(LS, {
+			controlId: n,
+			label: r,
 			align: "top",
-			fullWidth: i,
-			children: s
-		}), t[34] = e.fullWidth, t[35] = e.label, t[36] = s, t[37] = l) : l = t[37], l;
+			fullWidth: a,
+			children: l
+		}), t[37] = e.fullWidth, t[38] = e.label, t[39] = l, t[40] = n, t[41] = u) : u = t[41], u;
 	}
-	let i = e.label, a = e.fullWidth, o;
-	t[38] === e.fullWidth ? o = t[39] : (o = c("font-code", { "w-full": e.fullWidth }), t[38] = e.fullWidth, t[39] = o);
-	let s = e.minLength != null && e.minLength > 0, l;
-	t[40] === e ? l = t[41] : (l = (t) => e.setValue(t.target.value), t[40] = e, t[41] = l);
-	let u;
-	t[42] !== r || t[43] !== e.disabled || t[44] !== e.maxLength || t[45] !== e.minLength || t[46] !== e.placeholder || t[47] !== e.rows || t[48] !== e.value || t[49] !== o || t[50] !== s || t[51] !== l ? (u = /* @__PURE__ */ (0, Y.jsx)(Mh, {
-		className: o,
+	let a = e.label, o = e.fullWidth, s;
+	t[42] === e.fullWidth ? s = t[43] : (s = c("font-code", { "w-full": e.fullWidth }), t[42] = e.fullWidth, t[43] = s);
+	let l = e.minLength != null && e.minLength > 0, u;
+	t[44] === e ? u = t[45] : (u = (t) => e.setValue(t.target.value), t[44] = e, t[45] = u);
+	let d;
+	t[46] !== i || t[47] !== e.disabled || t[48] !== e.maxLength || t[49] !== e.minLength || t[50] !== e.placeholder || t[51] !== e.rows || t[52] !== e.value || t[53] !== s || t[54] !== l || t[55] !== u || t[56] !== n ? (d = /* @__PURE__ */ (0, Y.jsx)(Mh, {
+		id: n,
+		className: s,
 		rows: e.rows,
 		cols: 33,
 		maxLength: e.maxLength,
 		minLength: e.minLength,
-		required: s,
+		required: l,
 		disabled: e.disabled,
-		bottomAdornment: r,
+		bottomAdornment: i,
 		value: e.value,
-		onInput: l,
+		onInput: u,
 		placeholder: e.placeholder
-	}), t[42] = r, t[43] = e.disabled, t[44] = e.maxLength, t[45] = e.minLength, t[46] = e.placeholder, t[47] = e.rows, t[48] = e.value, t[49] = o, t[50] = s, t[51] = l, t[52] = u) : u = t[52];
-	let d;
-	return t[53] !== e.fullWidth || t[54] !== e.label || t[55] !== u ? (d = /* @__PURE__ */ (0, Y.jsx)(LS, {
-		label: i,
+	}), t[46] = i, t[47] = e.disabled, t[48] = e.maxLength, t[49] = e.minLength, t[50] = e.placeholder, t[51] = e.rows, t[52] = e.value, t[53] = s, t[54] = l, t[55] = u, t[56] = n, t[57] = d) : d = t[57];
+	let f;
+	return t[58] !== e.fullWidth || t[59] !== e.label || t[60] !== d || t[61] !== n ? (f = /* @__PURE__ */ (0, Y.jsx)(LS, {
+		controlId: n,
+		label: a,
 		align: "top",
-		fullWidth: a,
-		children: u
-	}), t[53] = e.fullWidth, t[54] = e.label, t[55] = u, t[56] = d) : d = t[56], d;
+		fullWidth: o,
+		children: d
+	}), t[58] = e.fullWidth, t[59] = e.label, t[60] = d, t[61] = n, t[62] = f) : f = t[62], f;
 }, Xj = "••••••••", Zj = class {
 	tagName = "marimo-text";
 	validator = W({
@@ -21686,105 +21692,109 @@ var Jj = class {
 		}, t ?? void 0);
 	}
 }, Qj = (e) => {
-	let t = (0, X.c)(63), n = e.kind === "password" && e.passwordHasValue === !0, [r, i] = (0, J.useState)(n), a = (0, J.useRef)(!1), o = r ? "" : e.value, s = r ? Xj : e.placeholder, l;
-	t[0] !== r || t[1] !== e ? (l = r ? (t) => {
-		a.current && (i(!1), e.setValue(t));
-	} : e.setValue, t[0] = r, t[1] = e, t[2] = l) : l = t[2];
-	let u = l, d;
-	t[3] === r ? d = t[4] : (d = r ? () => {
-		a.current = !0;
-	} : void 0, t[3] = r, t[4] = d);
-	let f = d, [p, m] = (0, J.useState)(e.value), h = p ?? o, g;
-	t[5] !== e.kind || t[6] !== h ? (g = $j(e.kind, h), t[5] = e.kind, t[6] = h, t[7] = g) : g = t[7];
-	let _ = g, v;
-	t[8] === Symbol.for("react.memo_cache_sentinel") ? (v = {
+	let t = (0, X.c)(67), n = (0, J.useId)(), r = e.kind === "password" && e.passwordHasValue === !0, [i, a] = (0, J.useState)(r), o = (0, J.useRef)(!1), s = i ? "" : e.value, l = i ? Xj : e.placeholder, u;
+	t[0] !== i || t[1] !== e ? (u = i ? (t) => {
+		o.current && (a(!1), e.setValue(t));
+	} : e.setValue, t[0] = i, t[1] = e, t[2] = u) : u = t[2];
+	let d = u, f;
+	t[3] === i ? f = t[4] : (f = i ? () => {
+		o.current = !0;
+	} : void 0, t[3] = i, t[4] = f);
+	let p = f, [m, h] = (0, J.useState)(e.value), g = m ?? s, _;
+	t[5] !== e.kind || t[6] !== g ? (_ = $j(e.kind, g), t[5] = e.kind, t[6] = g, t[7] = _) : _ = t[7];
+	let v = _, y;
+	t[8] === Symbol.for("react.memo_cache_sentinel") ? (y = {
 		text: null,
 		password: /* @__PURE__ */ (0, Y.jsx)(qu, { size: 16 }),
 		email: /* @__PURE__ */ (0, Y.jsx)(Ou, { size: 16 }),
 		url: /* @__PURE__ */ (0, Y.jsx)(Wu, { size: 16 })
-	}, t[8] = v) : v = t[8];
-	let y = v, b;
-	t[9] !== e.maxLength || t[10] !== o ? (b = e.maxLength ? /* @__PURE__ */ (0, Y.jsxs)("span", {
+	}, t[8] = y) : y = t[8];
+	let b = y, x;
+	t[9] !== e.maxLength || t[10] !== s ? (x = e.maxLength ? /* @__PURE__ */ (0, Y.jsxs)("span", {
 		className: "text-muted-foreground text-xs font-medium",
 		children: [
-			o.length,
+			s.length,
 			"/",
 			e.maxLength
 		]
-	}) : null, t[9] = e.maxLength, t[10] = o, t[11] = b) : b = t[11];
-	let x = b, S = !_, C;
-	t[12] !== e.fullWidth || t[13] !== S ? (C = c({
-		"border-destructive": S,
+	}) : null, t[9] = e.maxLength, t[10] = s, t[11] = x) : x = t[11];
+	let S = x, C = !v, w;
+	t[12] !== e.fullWidth || t[13] !== C ? (w = c({
+		"border-destructive": C,
 		"w-full": e.fullWidth
-	}), t[12] = e.fullWidth, t[13] = S, t[14] = C) : C = t[14];
-	let w = C, T;
+	}), t[12] = e.fullWidth, t[13] = C, t[14] = w) : w = t[14];
+	let T = w, E;
 	if (e.debounce === !0) {
-		let n = y[e.kind], r = e.minLength != null && e.minLength > 0, i;
-		t[15] !== x || t[16] !== w || t[17] !== f || t[18] !== s || t[19] !== e.disabled || t[20] !== e.kind || t[21] !== e.maxLength || t[22] !== e.minLength || t[23] !== u || t[24] !== n || t[25] !== r || t[26] !== o ? (i = /* @__PURE__ */ (0, Y.jsx)(qi, {
+		let r = b[e.kind], i = e.minLength != null && e.minLength > 0, a;
+		t[15] !== S || t[16] !== T || t[17] !== n || t[18] !== p || t[19] !== l || t[20] !== e.disabled || t[21] !== e.kind || t[22] !== e.maxLength || t[23] !== e.minLength || t[24] !== d || t[25] !== r || t[26] !== i || t[27] !== s ? (a = /* @__PURE__ */ (0, Y.jsx)(qi, {
+			id: n,
 			"data-testid": "marimo-plugin-text-input",
 			type: e.kind,
-			icon: n,
-			placeholder: s,
+			icon: r,
+			placeholder: l,
 			maxLength: e.maxLength,
 			minLength: e.minLength,
-			required: r,
+			required: i,
 			disabled: e.disabled,
-			className: w,
-			endAdornment: x,
-			value: o,
-			onValueChange: u,
-			onInputCapture: f
-		}), t[15] = x, t[16] = w, t[17] = f, t[18] = s, t[19] = e.disabled, t[20] = e.kind, t[21] = e.maxLength, t[22] = e.minLength, t[23] = u, t[24] = n, t[25] = r, t[26] = o, t[27] = i) : i = t[27], T = i;
+			className: T,
+			endAdornment: S,
+			value: s,
+			onValueChange: d,
+			onInputCapture: p
+		}), t[15] = S, t[16] = T, t[17] = n, t[18] = p, t[19] = l, t[20] = e.disabled, t[21] = e.kind, t[22] = e.maxLength, t[23] = e.minLength, t[24] = d, t[25] = r, t[26] = i, t[27] = s, t[28] = a) : a = t[28], E = a;
 	} else if (typeof e.debounce == "number") {
-		let n = y[e.kind], r = e.minLength != null && e.minLength > 0, i;
-		t[28] === Symbol.for("react.memo_cache_sentinel") ? (i = (e) => m(e.currentTarget.value), t[28] = i) : i = t[28];
-		let a;
-		t[29] !== x || t[30] !== w || t[31] !== f || t[32] !== s || t[33] !== e.debounce || t[34] !== e.disabled || t[35] !== e.kind || t[36] !== e.maxLength || t[37] !== e.minLength || t[38] !== u || t[39] !== n || t[40] !== r || t[41] !== o ? (a = /* @__PURE__ */ (0, Y.jsx)(ea, {
+		let r = b[e.kind], i = e.minLength != null && e.minLength > 0, a;
+		t[29] === Symbol.for("react.memo_cache_sentinel") ? (a = (e) => h(e.currentTarget.value), t[29] = a) : a = t[29];
+		let o;
+		t[30] !== S || t[31] !== T || t[32] !== n || t[33] !== p || t[34] !== l || t[35] !== e.debounce || t[36] !== e.disabled || t[37] !== e.kind || t[38] !== e.maxLength || t[39] !== e.minLength || t[40] !== d || t[41] !== r || t[42] !== i || t[43] !== s ? (o = /* @__PURE__ */ (0, Y.jsx)(ea, {
+			id: n,
 			"data-testid": "marimo-plugin-text-input",
 			type: e.kind,
-			icon: n,
-			placeholder: s,
+			icon: r,
+			placeholder: l,
 			maxLength: e.maxLength,
 			minLength: e.minLength,
-			required: r,
+			required: i,
 			disabled: e.disabled,
-			className: w,
-			endAdornment: x,
-			value: o,
-			onValueChange: u,
-			onBlur: i,
+			className: T,
+			endAdornment: S,
+			value: s,
+			onValueChange: d,
+			onBlur: a,
 			delay: e.debounce,
-			onInputCapture: f
-		}), t[29] = x, t[30] = w, t[31] = f, t[32] = s, t[33] = e.debounce, t[34] = e.disabled, t[35] = e.kind, t[36] = e.maxLength, t[37] = e.minLength, t[38] = u, t[39] = n, t[40] = r, t[41] = o, t[42] = a) : a = t[42], T = a;
+			onInputCapture: p
+		}), t[30] = S, t[31] = T, t[32] = n, t[33] = p, t[34] = l, t[35] = e.debounce, t[36] = e.disabled, t[37] = e.kind, t[38] = e.maxLength, t[39] = e.minLength, t[40] = d, t[41] = r, t[42] = i, t[43] = s, t[44] = o) : o = t[44], E = o;
 	} else {
-		let n = y[e.kind], r = e.minLength != null && e.minLength > 0, i;
-		t[43] === u ? i = t[44] : (i = (e) => u(e.currentTarget.value), t[43] = u, t[44] = i);
-		let a;
-		t[45] === Symbol.for("react.memo_cache_sentinel") ? (a = (e) => m(e.currentTarget.value), t[45] = a) : a = t[45];
+		let r = b[e.kind], i = e.minLength != null && e.minLength > 0, a;
+		t[45] === d ? a = t[46] : (a = (e) => d(e.currentTarget.value), t[45] = d, t[46] = a);
+		let o;
+		t[47] === Symbol.for("react.memo_cache_sentinel") ? (o = (e) => h(e.currentTarget.value), t[47] = o) : o = t[47];
 		let c;
-		t[46] !== x || t[47] !== w || t[48] !== f || t[49] !== s || t[50] !== e.disabled || t[51] !== e.kind || t[52] !== e.maxLength || t[53] !== e.minLength || t[54] !== n || t[55] !== r || t[56] !== i || t[57] !== o ? (c = /* @__PURE__ */ (0, Y.jsx)(Ji, {
+		t[48] !== S || t[49] !== T || t[50] !== n || t[51] !== p || t[52] !== l || t[53] !== e.disabled || t[54] !== e.kind || t[55] !== e.maxLength || t[56] !== e.minLength || t[57] !== r || t[58] !== i || t[59] !== a || t[60] !== s ? (c = /* @__PURE__ */ (0, Y.jsx)(Ji, {
+			id: n,
 			"data-testid": "marimo-plugin-text-input",
 			type: e.kind,
-			icon: n,
-			placeholder: s,
+			icon: r,
+			placeholder: l,
 			maxLength: e.maxLength,
 			minLength: e.minLength,
-			required: r,
+			required: i,
 			disabled: e.disabled,
-			className: w,
-			endAdornment: x,
-			value: o,
-			onInput: i,
-			onBlur: a,
-			onInputCapture: f
-		}), t[46] = x, t[47] = w, t[48] = f, t[49] = s, t[50] = e.disabled, t[51] = e.kind, t[52] = e.maxLength, t[53] = e.minLength, t[54] = n, t[55] = r, t[56] = i, t[57] = o, t[58] = c) : c = t[58], T = c;
+			className: T,
+			endAdornment: S,
+			value: s,
+			onInput: a,
+			onBlur: o,
+			onInputCapture: p
+		}), t[48] = S, t[49] = T, t[50] = n, t[51] = p, t[52] = l, t[53] = e.disabled, t[54] = e.kind, t[55] = e.maxLength, t[56] = e.minLength, t[57] = r, t[58] = i, t[59] = a, t[60] = s, t[61] = c) : c = t[61], E = c;
 	}
-	let E;
-	return t[59] !== T || t[60] !== e.fullWidth || t[61] !== e.label ? (E = /* @__PURE__ */ (0, Y.jsx)(LS, {
+	let D;
+	return t[62] !== E || t[63] !== n || t[64] !== e.fullWidth || t[65] !== e.label ? (D = /* @__PURE__ */ (0, Y.jsx)(LS, {
+		controlId: n,
 		label: e.label,
 		fullWidth: e.fullWidth,
-		children: T
-	}), t[59] = T, t[60] = e.fullWidth, t[61] = e.label, t[62] = E) : E = t[62], E;
+		children: E
+	}), t[62] = E, t[63] = n, t[64] = e.fullWidth, t[65] = e.label, t[66] = D) : D = t[66], D;
 };
 function $j(e, t) {
 	if (!t) return !0;
@@ -30070,7 +30080,7 @@ function OR(e) {
 }
 //#endregion
 //#region src/components/editor/renderers/slides-layout/slides-layout.tsx
-var kR = J.lazy(() => import("./reveal-component-GZhn88mZ.js")), AR = (e) => {
+var kR = J.lazy(() => import("./reveal-component-D2i9ey2a.js")), AR = (e) => {
 	let t = (0, X.c)(33), { layout: n, setLayout: r, cells: i, mode: a } = e, o = ns(Sa), s = a === "read" || o, c = ns(gt) > 1, [l, u] = (0, J.useState)(null), d;
 	t[0] !== i || t[1] !== n ? (d = EP(i, n), t[0] = i, t[1] = n, t[2] = d) : d = t[2];
 	let { slideCells: f, skippedIds: p, noOutputIds: m, slideTypes: h, startCellIndex: g } = d, _;

package/dist/{number-overlay-editor-CbVbYCai.js → number-overlay-editor-BfWfXUbU.js}

@@ -1,6 +1,6 @@
 import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
 import { t } from "./react-ofJbxM4x.js";
-import { a as n } from "./glide-data-editor-DfRNtZdm.js";
+import { a as n } from "./glide-data-editor-CQKpxgZb.js";
 //#region ../node_modules/.pnpm/@glideapps+glide-data-grid@6.0.4-alpha24_lodash@4.17.21_marked@15.0.12_react-dom@19.2.8_b9e6aec46d952f631ce71b0585d2a8e5/node_modules/@glideapps/glide-data-grid/dist/esm/internal/data-grid-overlay-editor/private/number-overlay-editor-style.js
 var r = /* @__PURE__ */ e(t()), i = /*#__PURE__*/ n("div")({
 	name: "NumberOverlayEditorStyle",

package/dist/{reveal-component-GZhn88mZ.js → reveal-component-D2i9ey2a.js}

@@ -4,14 +4,14 @@ import { t as o } from "./react-ofJbxM4x.js";
 import { t as s } from "./compiler-runtime-Cj8ZWiNS.js";
 import { h as c, t as l } from "./tooltip-CuNWg2ay.js";
 import { w as u } from "./cells-DzqPprAQ.js";
-import { $ as d, Q as f, Z as p, an as m, i as h, l as g, ln as _, n as v, on as y, r as b, t as x, u as S } from "./common-D1NEOSXA.js";
+import { $ as d, Q as f, Z as p, an as m, i as h, l as g, ln as _, n as v, on as y, r as b, t as x, u as S } from "./common-Lbz4UoEr.js";
 import { M as C } from "./select-Bs-nmvm6.js";
 import { q as ee } from "./dropdown-menu-Cz4TdOJh.js";
 import { y as w } from "./toDate-vEi5kTfY.js";
 import { t as T } from "./jsx-runtime-DgDPJV9S.js";
 import { q as te } from "./use-restore-focus-kmgwrL8q.js";
 import { A as E, C as D, b as O } from "./useTheme-BwSgeAFb.js";
-import { a as k, n as ne, t as re } from "./code-visibility-DwRnMyBy.js";
+import { a as k, n as ne, t as re } from "./code-visibility-a6v4Kwtn.js";
 /* empty css                */
 var A = c("sticky-note", [["path", {
 	d: "M21 9a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 15 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2z",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.25.2-dev64",
+  "version": "0.25.2-dev66",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/plugins/impl/TextAreaPlugin.tsx

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import type { JSX } from "react";
+import { type JSX, useId } from "react";
 import { z } from "zod";
 import { cn } from "@/utils/cn";
 import {
@@ -56,6 +56,7 @@ interface TextAreaComponentProps extends Data {
 }
 
 const TextAreaComponent = (props: TextAreaComponentProps) => {
+  const textareaId = useId();
   const bottomAdornment = props.maxLength ? (
     <span className="text-muted-foreground text-xs font-medium">
       {props.value.length}/{props.maxLength}
@@ -64,8 +65,14 @@ const TextAreaComponent = (props: TextAreaComponentProps) => {
 
   if (props.debounce === true) {
     return (
-      <Labeled label={props.label} align="top" fullWidth={props.fullWidth}>
+      <Labeled
+        controlId={textareaId}
+        label={props.label}
+        align="top"
+        fullWidth={props.fullWidth}
+      >
         <OnBlurredTextarea
+          id={textareaId}
           className={cn("font-code", {
             "w-full": props.fullWidth,
           })}
@@ -86,8 +93,14 @@ const TextAreaComponent = (props: TextAreaComponentProps) => {
 
   if (typeof props.debounce === "number") {
     return (
-      <Labeled label={props.label} align="top" fullWidth={props.fullWidth}>
+      <Labeled
+        controlId={textareaId}
+        label={props.label}
+        align="top"
+        fullWidth={props.fullWidth}
+      >
         <DebouncedTextarea
+          id={textareaId}
           className={cn("font-code", {
             "w-full": props.fullWidth,
           })}
@@ -108,8 +121,14 @@ const TextAreaComponent = (props: TextAreaComponentProps) => {
   }
 
   return (
-    <Labeled label={props.label} align="top" fullWidth={props.fullWidth}>
+    <Labeled
+      controlId={textareaId}
+      label={props.label}
+      align="top"
+      fullWidth={props.fullWidth}
+    >
       <Textarea
+        id={textareaId}
         className={cn("font-code", {
           "w-full": props.fullWidth,
         })}

package/src/plugins/impl/TextInputPlugin.tsx

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { AtSignIcon, GlobeIcon, LockIcon } from "lucide-react";
-import { type JSX, useRef, useState } from "react";
+import { type JSX, useId, useRef, useState } from "react";
 import { z } from "zod";
 import {
   DebouncedInput,
@@ -73,6 +73,7 @@ interface TextComponentProps extends Data {
 }
 
 const TextComponent = (props: TextComponentProps) => {
+  const inputId = useId();
   // Before first real keystroke: show masked placeholder, suppress setValue.
   // After first keystroke: normal password field.
   const initiallyMasked =
@@ -125,6 +126,7 @@ const TextComponent = (props: TextComponentProps) => {
   if (props.debounce === true) {
     input = (
       <OnBlurredInput
+        id={inputId}
         data-testid="marimo-plugin-text-input"
         type={props.kind}
         icon={icon[props.kind]}
@@ -143,6 +145,7 @@ const TextComponent = (props: TextComponentProps) => {
   } else if (typeof props.debounce === "number") {
     input = (
       <DebouncedInput
+        id={inputId}
         data-testid="marimo-plugin-text-input"
         type={props.kind}
         icon={icon[props.kind]}
@@ -163,6 +166,7 @@ const TextComponent = (props: TextComponentProps) => {
   } else {
     input = (
       <Input
+        id={inputId}
         data-testid="marimo-plugin-text-input"
         type={props.kind}
         icon={icon[props.kind]}
@@ -182,7 +186,11 @@ const TextComponent = (props: TextComponentProps) => {
   }
 
   return (
-    <Labeled label={props.label} fullWidth={props.fullWidth}>
+    <Labeled
+      controlId={inputId}
+      label={props.label}
+      fullWidth={props.fullWidth}
+    >
       {input}
     </Labeled>
   );

package/src/plugins/impl/__test__/text-labels.test.tsx

@@ -0,0 +1,141 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { expect, test, vi } from "vitest";
+import type { IPlugin } from "../../types";
+import { TextInputPlugin } from "../TextInputPlugin";
+import { TextAreaPlugin } from "../TextAreaPlugin";
+
+function testLabelBehavior<D extends { label: string | null }>(
+  plugin: IPlugin<string, D>,
+) {
+  for (const debounce of [false, true, 200]) {
+    test(`${plugin.tagName} associates formatted label with debounce=${debounce}`, () => {
+      const setValue = vi.fn();
+      const props = {
+        host: document.createElement("div"),
+        value: "",
+        setValue,
+        functions: {},
+        data: plugin.validator.parse({
+          initialValue: "",
+          placeholder: "",
+          label: "<strong>Notes &amp; details</strong>",
+          debounce,
+        }),
+      };
+      const { rerender } = render(plugin.render(props));
+      const control = screen.getByLabelText("Notes & details");
+      expect(control).toHaveAccessibleName("Notes & details");
+      const id = control.id;
+      rerender(
+        plugin.render({
+          ...props,
+          data: { ...props.data, label: "Updated notes" },
+        }),
+      );
+      expect(screen.getByLabelText("Updated notes").id).toBe(id);
+      rerender(
+        plugin.render({ ...props, data: { ...props.data, label: null } }),
+      );
+      expect(control).toHaveAccessibleName("");
+    });
+    test(`${plugin.tagName} preserves commit timing with debounce=${debounce}`, () => {
+      vi.useFakeTimers();
+      try {
+        const setValue = vi.fn();
+        const props = {
+          host: document.createElement("div"),
+          value: "",
+          setValue,
+          functions: {},
+          data: plugin.validator.parse({
+            initialValue: "",
+            placeholder: "",
+            label: "Notes",
+            debounce,
+          }),
+        };
+        render(plugin.render(props));
+        const control = screen.getByLabelText("Notes");
+        if (debounce === false) {
+          fireEvent.input(control, { target: { value: "hello" } });
+        } else {
+          fireEvent.change(control, { target: { value: "hello" } });
+        }
+        const immediateCalls = debounce === false ? 1 : 0;
+        expect(setValue).toHaveBeenCalledTimes(immediateCalls);
+        act(() => vi.advanceTimersByTime(199));
+        expect(setValue).toHaveBeenCalledTimes(immediateCalls);
+        if (debounce === true) {
+          fireEvent.blur(control);
+        } else if (typeof debounce === "number") {
+          act(() => vi.advanceTimersByTime(1));
+        }
+        expect(setValue).toHaveBeenCalledWith("hello");
+      } finally {
+        vi.useRealTimers();
+      }
+    });
+  }
+}
+
+for (const kind of ["text", "password", "email", "url"] as const) {
+  test(`native association preserves ${kind} input attributes`, () => {
+    const plugin = new TextInputPlugin();
+    render(
+      plugin.render({
+        host: document.createElement("div"),
+        value: "",
+        setValue: vi.fn(),
+        functions: {},
+        data: plugin.validator.parse({
+          initialValue: "",
+          placeholder: "",
+          label: "Account",
+          kind,
+          disabled: true,
+          minLength: 2,
+          maxLength: 30,
+        }),
+      }),
+    );
+    const control = screen.getByLabelText("Account");
+    expect(control).toHaveAttribute("type", kind);
+    expect(control).toBeDisabled();
+    expect(control).toBeRequired();
+    expect(control).toHaveAttribute("minlength", "2");
+    expect(control).toHaveAttribute("maxlength", "30");
+  });
+}
+
+function testMultipleInstances<D>(plugin: IPlugin<string, D>) {
+  test(`${plugin.tagName} keeps repeated labels independently associated`, () => {
+    const props = {
+      host: document.createElement("div"),
+      value: "",
+      setValue: vi.fn(),
+      functions: {},
+      data: plugin.validator.parse({
+        initialValue: "",
+        placeholder: "",
+        label: "Notes",
+      }),
+    };
+    render(
+      <>
+        {plugin.render(props)}
+        {plugin.render(props)}
+      </>,
+    );
+    const controls = screen.getAllByLabelText("Notes");
+    expect(controls).toHaveLength(2);
+    expect(controls[0].id).not.toBe(controls[1].id);
+    expect(controls[0]).toHaveAccessibleName("Notes");
+    expect(controls[1]).toHaveAccessibleName("Notes");
+  });
+}
+
+testLabelBehavior(new TextInputPlugin());
+testLabelBehavior(new TextAreaPlugin());
+testMultipleInstances(new TextInputPlugin());
+testMultipleInstances(new TextAreaPlugin());