@marimo-team/islands 0.25.2-dev27 → 0.25.2-dev30

package/src/plugins/impl/__tests__/widget-labels.test.tsx

@@ -0,0 +1,122 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { initialModeAtom } from "@/core/mode";
+import { store } from "@/core/state/jotai";
+import { DatePickerPlugin } from "../DatePickerPlugin";
+import { DateRangePickerPlugin } from "../DateRangePlugin";
+import { DateTimePickerPlugin } from "../DateTimePickerPlugin";
+
+const sharedProps = () => ({
+  host: document.createElement("div"),
+  setValue: vi.fn(),
+  functions: {},
+});
+
+const widgets = [
+  {
+    name: "date",
+    role: "group",
+    fallback: "date picker",
+    render: (label: string | null, disabled = false) =>
+      new DatePickerPlugin().render({
+        ...sharedProps(),
+        value: "2026-10-02",
+        data: {
+          label,
+          disabled,
+          start: "2026-01-01",
+          stop: "2026-12-31",
+          fullWidth: false,
+        },
+      }),
+  },
+  {
+    name: "datetime",
+    role: "group",
+    fallback: "date time picker",
+    render: (label: string | null, disabled = false) =>
+      new DateTimePickerPlugin().render({
+        ...sharedProps(),
+        value: "2026-10-02T12:00:00",
+        data: {
+          label,
+          disabled,
+          start: "2026-01-01T00:00:00",
+          stop: "2026-12-31T23:59:59",
+          precision: "minute",
+          fullWidth: false,
+        },
+      }),
+  },
+  {
+    name: "date range",
+    role: "group",
+    fallback: "date range picker",
+    render: (label: string | null, disabled = false) =>
+      new DateRangePickerPlugin().render({
+        ...sharedProps(),
+        value: ["2026-10-02", "2026-10-03"],
+        data: {
+          label,
+          disabled,
+          start: "2026-01-01",
+          stop: "2026-12-31",
+          fullWidth: false,
+        },
+      }),
+  },
+];
+
+beforeEach(() => store.set(initialModeAtom, "edit"));
+
+describe.each(widgets)("$name accessible labels", (widget) => {
+  it("uses rendered formatting and decoded entities, and follows label updates", () => {
+    const { getByRole, rerender } = render(
+      widget.render("<span>Visit <strong>date</strong> &amp; time</span>"),
+    );
+    expect(getByRole(widget.role, { name: "Visit date & time" })).toBeTruthy();
+    rerender(widget.render("<span>Updated <em>label</em></span>"));
+    expect(getByRole(widget.role, { name: "Updated label" })).toBeTruthy();
+    rerender(widget.render(null));
+    expect(getByRole(widget.role, { name: widget.fallback })).toBeTruthy();
+  });
+
+  it.each([null, ""])("uses the fallback when label is %s", (label) => {
+    const { getByRole } = render(widget.render(label));
+    expect(getByRole(widget.role, { name: widget.fallback })).toBeTruthy();
+  });
+
+  it("names the calendar button and every editable segment", () => {
+    const { getByRole, getAllByRole } = render(
+      widget.render("<strong>Visit</strong> &amp; time"),
+    );
+    expect(getByRole("button", { name: "Calendar Visit & time" })).toBeTruthy();
+    for (const segment of getAllByRole("spinbutton")) {
+      expect(segment).toHaveAccessibleName(/Visit & time/);
+    }
+  });
+
+  it("preserves disabled controls with a formatted label", () => {
+    const { getByRole, getAllByRole } = render(
+      widget.render("<strong>Visit</strong>", true),
+    );
+    expect(getByRole("button", { name: "Calendar Visit" })).toBeDisabled();
+    for (const segment of getAllByRole("spinbutton")) {
+      expect(segment).toHaveAttribute("aria-disabled", "true");
+    }
+  });
+
+  it("keeps labels distinct for multiple widgets", () => {
+    const { getByRole } = render(
+      <>
+        {widget.render("First")}
+        {widget.render("Second")}
+      </>,
+    );
+    expect(getByRole(widget.role, { name: "First" })).not.toBe(
+      getByRole(widget.role, { name: "Second" }),
+    );
+  });
+});

package/src/plugins/impl/chat/ChatPlugin.tsx

@@ -27,7 +27,7 @@ const messageSchema = z.array(
     role: z.enum(["system", "user", "assistant"]),
     content: z.string().nullable(),
     parts: z.array(z.any()),
-    metadata: z.any().nullable(),
+    metadata: z.any().optional(),
   }),
 );
 

package/src/plugins/impl/common/labeled.tsx

@@ -9,7 +9,8 @@ interface Props {
   label: string | null | undefined;
   className?: string;
   labelClassName?: string;
-  id?: string;
+  labelId?: string;
+  controlId?: string;
   fullWidth?: boolean;
   /**
    * Align the label to the top, left, or right of the component.
@@ -27,8 +28,9 @@ export const Labeled: React.FC<PropsWithChildren<Props>> = ({
   align = "left",
   className,
   labelClassName,
+  labelId,
   fullWidth,
-  id,
+  controlId,
 }) => {
   // If fullWidth is true, force align to be "top"
   if (fullWidth) {
@@ -45,7 +47,11 @@ export const Labeled: React.FC<PropsWithChildren<Props>> = ({
 
   const labelElement = (
     <div part="label" className="inline-flex items-center m-0 p-0">
-      <Label htmlFor={id} className={cn("font-prose", labelClassName)}>
+      <Label
+        id={labelId}
+        htmlFor={controlId}
+        className={cn("font-prose", labelClassName)}
+      >
         {renderHTML({ html: label })}
       </Label>
     </div>

package/dist/classDiagram-ZZMXUADV-BwYhrSEX.js

@@ -1,30 +0,0 @@
-import "./chunk-75Z2AOVW-C4AOleKf.js";
-import "./src-CA_m4ONl.js";
-import { n as e } from "./chunk-Y2CYZVJY-DKKS1VyV.js";
-import "./chunk-DU6HZSFF-1TwWR6gh.js";
-import "./chunk-P2QGCYS3-0TAWai9C.js";
-import "./chunk-PWAF6VOD-lNxB9k8z.js";
-import "./chunk-GMAD6QVW-vStrMz2P.js";
-import "./chunk-4HAMMTFA-BPTTOOC5.js";
-import "./chunk-GVQU2GXP-2HwWgs4u.js";
-import "./chunk-L3NEJ4N5-RhC7i0I2.js";
-import "./chunk-OSK3NFVY-CZV09N-U.js";
-import "./mermaid-Dfvntf3s.js";
-import "./chunk-F27PBJKO-DMI1PBe4.js";
-import "./chunk-XXDRQBXY-Dnl5VBqG.js";
-import "./chunk-POPQ4Y6H-Cc3_56GX.js";
-import { i as t, n, r, t as i } from "./chunk-TICWLB2K-DB6hjNOL.js";
-//#region ../node_modules/.pnpm/mermaid@11.17.2/node_modules/mermaid/dist/chunks/mermaid.core/classDiagram-ZZMXUADV.mjs
-var a = {
-	parser: n,
-	get db() {
-		return new i();
-	},
-	renderer: r,
-	styles: t,
-	init: /* @__PURE__ */ e((e) => {
-		e.class ||= {}, e.class.arrowMarkerAbsolute = e.arrowMarkerAbsolute;
-	}, "init")
-};
-//#endregion
-export { a as diagram };

package/dist/classDiagram-v2-VYDZK3BY-HecM04TM.js

@@ -1,30 +0,0 @@
-import "./chunk-75Z2AOVW-C4AOleKf.js";
-import "./src-CA_m4ONl.js";
-import { n as e } from "./chunk-Y2CYZVJY-DKKS1VyV.js";
-import "./chunk-DU6HZSFF-1TwWR6gh.js";
-import "./chunk-P2QGCYS3-0TAWai9C.js";
-import "./chunk-PWAF6VOD-lNxB9k8z.js";
-import "./chunk-GMAD6QVW-vStrMz2P.js";
-import "./chunk-4HAMMTFA-BPTTOOC5.js";
-import "./chunk-GVQU2GXP-2HwWgs4u.js";
-import "./chunk-L3NEJ4N5-RhC7i0I2.js";
-import "./chunk-OSK3NFVY-CZV09N-U.js";
-import "./mermaid-Dfvntf3s.js";
-import "./chunk-F27PBJKO-DMI1PBe4.js";
-import "./chunk-XXDRQBXY-Dnl5VBqG.js";
-import "./chunk-POPQ4Y6H-Cc3_56GX.js";
-import { i as t, n, r, t as i } from "./chunk-TICWLB2K-DB6hjNOL.js";
-//#region ../node_modules/.pnpm/mermaid@11.17.2/node_modules/mermaid/dist/chunks/mermaid.core/classDiagram-v2-VYDZK3BY.mjs
-var a = {
-	parser: n,
-	get db() {
-		return new i();
-	},
-	renderer: r,
-	styles: t,
-	init: /* @__PURE__ */ e((e) => {
-		e.class ||= {}, e.class.arrowMarkerAbsolute = e.arrowMarkerAbsolute;
-	}, "init")
-};
-//#endregion
-export { a as diagram };

package/dist/flowDiagram-HODETNUW-DgcjSdPV.js

@@ -1,16 +0,0 @@
-import "./chunk-75Z2AOVW-C4AOleKf.js";
-import "./src-CA_m4ONl.js";
-import "./chunk-DU6HZSFF-1TwWR6gh.js";
-import "./chunk-P2QGCYS3-0TAWai9C.js";
-import "./chunk-PWAF6VOD-lNxB9k8z.js";
-import "./chunk-GMAD6QVW-vStrMz2P.js";
-import "./chunk-4HAMMTFA-BPTTOOC5.js";
-import "./chunk-GVQU2GXP-2HwWgs4u.js";
-import "./chunk-L3NEJ4N5-RhC7i0I2.js";
-import "./chunk-OSK3NFVY-CZV09N-U.js";
-import "./mermaid-Dfvntf3s.js";
-import "./chunk-F27PBJKO-DMI1PBe4.js";
-import "./chunk-XXDRQBXY-Dnl5VBqG.js";
-import "./chunk-POPQ4Y6H-Cc3_56GX.js";
-import { n as e } from "./chunk-SHT3W25Y-DedDYSP5.js";
-export { e as diagram };