@marimo-team/frontend 0.23.16-dev76 → 0.23.16-dev9

package/src/css/admonition.css

@@ -1,32 +1,53 @@
 @reference "../css/globals.css";
 
+/*
+ * Flat, GitHub-style admonitions.
+ *
+ * Icons are lucide (https://lucide.dev/icons/) data URIs applied as masks so
+ * they render in currentColor.
+ */
+
 .admonition {
-  --admonition-bg: var(--blue-2);
-  --admonition-border: var(--blue-8);
   --admonition-heading-color: var(--blue-11);
+  --admonition-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>');
 
   display: flex;
-  position: relative;
   flex-direction: column;
-  padding: 1rem;
-  padding-left: 3rem;
-  border-left: 4px solid;
+  padding: 0.5rem 1rem;
+  border-left: 0.25rem solid var(--admonition-heading-color);
   margin-bottom: 1rem;
-  background-color: var(--admonition-bg);
-  border-color: var(--admonition-border);
 
-  &::before {
-    position: absolute;
-    margin-top: 0.35rem;
-    margin-left: -2rem;
+  /* Tighten the gap between the title and body (md.css gives paragraphs a
+     1rem block margin; flex children don't collapse margins). */
+  & > .paragraph,
+  & > p {
+    margin-block: 0.375rem;
+  }
+
+  /* The paragraph right after the title hugs it, matching callouts, whose
+     body is nested in a wrapper and gets the md.css :first-child treatment. */
+  & > .admonition-title + .paragraph,
+  & > .admonition-title + p {
+    margin-block-start: 0;
   }
 }
 
 .admonition-title {
-  font-weight: bold;
+  display: block;
+  margin-bottom: 0.25rem;
+  font-weight: 600;
   color: var(--admonition-heading-color);
 
-  @apply tracking-wide;
+  &::before {
+    content: "";
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+    vertical-align: -0.125rem;
+    background-color: currentcolor;
+    mask: var(--admonition-icon) no-repeat center / contain;
+  }
 
   > .paragraph {
     margin: 0;
@@ -38,90 +59,50 @@
   }
 }
 
-/* Icons from https://lucide.dev/icons/ */
-
 .admonition.info,
 .admonition.note {
-  --admonition-bg: var(--blue-2);
-  --admonition-border: var(--blue-8);
   --admonition-heading-color: var(--blue-11);
-
-  &::before {
-    content: light-dark(
-      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="admonition-icon lucide lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>'),
-      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="admonition-icon lucide lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>')
-    );
-  }
+  --admonition-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>');
 }
 
 .admonition.danger,
 .admonition.caution,
 .admonition.error {
-  --admonition-bg: var(--red-2);
-  --admonition-border: var(--red-8);
   --admonition-heading-color: var(--red-11);
-
-  &::before {
-    content: light-dark(
-      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-octagon-alert"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>'),
-      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-octagon-alert"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>')
-    );
-  }
+  --admonition-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-octagon-alert"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>');
 }
 
 .admonition.attention,
 .admonition.warning {
-  --admonition-bg: var(--yellow-2);
-  --admonition-border: var(--yellow-8);
   --admonition-heading-color: var(--yellow-11);
-
-  &::before {
-    content: light-dark(
-      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-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"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>'),
-      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-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"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>')
-    );
-  }
+  --admonition-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-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"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>');
 }
 
 .admonition.hint {
-  --admonition-bg: var(--gray-2);
-  --admonition-border: var(--gray-8);
   --admonition-heading-color: var(--gray-11);
-
-  .dark & {
-    --admonition-bg: var(--gray-3);
-  }
-
-  &::before {
-    content: light-dark(
-      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>'),
-      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>')
-    );
-  }
+  --admonition-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>');
 }
 
 .admonition.important {
-  --admonition-bg: var(--cyan-2);
-  --admonition-border: var(--cyan-8);
   --admonition-heading-color: var(--cyan-11);
+  --admonition-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-square-warning"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="M12 7v2"/><path d="M12 13h.01"/></svg>');
+}
 
-  &::before {
-    content: light-dark(
-      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-square-warning"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="M12 7v2"/><path d="M12 13h.01"/></svg>'),
-      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-square-warning"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="M12 7v2"/><path d="M12 13h.01"/></svg>')
-    );
-  }
+.admonition.success {
+  --admonition-heading-color: var(--grass-11);
+  --admonition-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>');
 }
 
 .admonition.tip {
-  --admonition-bg: var(--grass-2);
-  --admonition-border: var(--grass-8);
   --admonition-heading-color: var(--grass-11);
+  --admonition-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lightbulb"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg>');
+}
 
-  &::before {
-    content: light-dark(
-      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lightbulb"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg>'),
-      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lightbulb"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg>')
-    );
+/* Quiet, icon-less variant used by neutral callouts. */
+.admonition.neutral {
+  --admonition-heading-color: var(--gray-11);
+
+  .admonition-title::before {
+    content: none;
   }
 }

package/src/plugins/impl/FormPlugin.tsx

@@ -148,7 +148,7 @@ export const FormWrapper = <T,>({
           if (evt.key === "Enter" && (evt.ctrlKey || evt.metaKey)) {
             evt.preventDefault();
             evt.stopPropagation();
-            setValue(newValue);
+            formDiv.current?.requestSubmit();
           }
         }}
       >

package/src/plugins/impl/__tests__/FormPlugin.test.tsx

@@ -0,0 +1,162 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { FormWrapper } from "../FormPlugin";
+
+describe("FormPlugin", () => {
+  it("submits the form on Ctrl+Enter and calls setValue", async () => {
+    const setValue = vi.fn();
+    const validate = vi.fn().mockResolvedValue(null);
+
+    render(
+      <FormWrapper
+        currentValue="old-val"
+        newValue="new-val"
+        setValue={setValue}
+        validate={validate}
+        shouldValidate={false}
+        clearOnSubmit={false}
+        submitButtonLabel="Submit"
+        bordered={true}
+        loading={false}
+        submitButtonDisabled={false}
+        showClearButton={false}
+        clearButtonLabel="Clear"
+        label={null}
+      >
+        <input data-testid="input" />
+      </FormWrapper>,
+    );
+
+    const input = screen.getByTestId("input");
+
+    // Simulate Ctrl+Enter on input
+    fireEvent.keyDown(input, { key: "Enter", ctrlKey: true });
+
+    await waitFor(() => {
+      expect(setValue).toHaveBeenCalledWith("new-val");
+    });
+  });
+
+  it("submits the form on Ctrl+Enter and runs validation when shouldValidate is true", async () => {
+    const setValue = vi.fn();
+    const validate = vi.fn().mockResolvedValue("Validation failed message");
+
+    render(
+      <FormWrapper
+        currentValue="old-val"
+        newValue="new-val"
+        setValue={setValue}
+        validate={validate}
+        shouldValidate={true}
+        clearOnSubmit={false}
+        submitButtonLabel="Submit"
+        bordered={true}
+        loading={false}
+        submitButtonDisabled={false}
+        showClearButton={false}
+        clearButtonLabel="Clear"
+        label={null}
+      >
+        <input data-testid="input" />
+      </FormWrapper>,
+    );
+
+    const input = screen.getByTestId("input");
+
+    // Simulate Ctrl+Enter on input
+    fireEvent.keyDown(input, { key: "Enter", ctrlKey: true });
+
+    await waitFor(() => {
+      expect(validate).toHaveBeenCalledWith({ value: "new-val" });
+      // should not submit (setValue not called) due to validation failure
+      expect(setValue).not.toHaveBeenCalled();
+      // error message displayed
+      expect(screen.getByText("Validation failed message")).toBeInTheDocument();
+    });
+  });
+
+  it("clears inputs on submission when clearOnSubmit is true", async () => {
+    const setValue = vi.fn();
+    const validate = vi.fn().mockResolvedValue(null);
+
+    let mockUIElement: (HTMLElement & { reset?: () => void }) | null = null;
+    const mockReset = vi.fn();
+
+    render(
+      <FormWrapper
+        currentValue="old-val"
+        newValue="new-val"
+        setValue={setValue}
+        validate={validate}
+        shouldValidate={false}
+        clearOnSubmit={true}
+        submitButtonLabel="Submit"
+        bordered={true}
+        loading={false}
+        submitButtonDisabled={false}
+        showClearButton={false}
+        clearButtonLabel="Clear"
+        label={null}
+      >
+        <div
+          ref={(el) => {
+            if (el && !mockUIElement) {
+              mockUIElement = document.createElement("marimo-ui-element");
+              mockUIElement.setAttribute("data-testid", "mock-ui-element");
+              mockUIElement.reset = mockReset;
+              const inputEl = document.createElement("input");
+              inputEl.type = "text";
+              mockUIElement.appendChild(inputEl);
+              el.appendChild(mockUIElement);
+            }
+          }}
+        />
+      </FormWrapper>,
+    );
+
+    const input = screen.getByRole("textbox");
+
+    // Simulate Ctrl+Enter on input
+    fireEvent.keyDown(input, { key: "Enter", ctrlKey: true });
+
+    await waitFor(() => {
+      expect(setValue).toHaveBeenCalledWith("new-val");
+      expect(mockReset).toHaveBeenCalled();
+    });
+  });
+
+  it("does not submit on Shift+Enter", async () => {
+    const setValue = vi.fn();
+    const validate = vi.fn().mockResolvedValue(null);
+
+    render(
+      <FormWrapper
+        currentValue="old-val"
+        newValue="new-val"
+        setValue={setValue}
+        validate={validate}
+        shouldValidate={false}
+        clearOnSubmit={false}
+        submitButtonLabel="Submit"
+        bordered={true}
+        loading={false}
+        submitButtonDisabled={false}
+        showClearButton={false}
+        clearButtonLabel="Clear"
+        label={null}
+      >
+        <input data-testid="input" />
+      </FormWrapper>,
+    );
+
+    const input = screen.getByTestId("input");
+
+    // Simulate Shift+Enter on input
+    fireEvent.keyDown(input, { key: "Enter", shiftKey: true });
+
+    expect(setValue).not.toHaveBeenCalled();
+    expect(validate).not.toHaveBeenCalled();
+  });
+});

package/src/plugins/layout/CalloutPlugin.tsx

@@ -18,6 +18,10 @@ interface Data {
    * The kind of callout
    */
   kind: Intent;
+  /**
+   * An optional bold title line
+   */
+  title?: string;
 }
 
 export class CalloutPlugin implements IStatelessPlugin<Data> {
@@ -26,9 +30,12 @@ export class CalloutPlugin implements IStatelessPlugin<Data> {
   validator = z.object({
     html: z.string(),
     kind: zodIntent,
+    title: z.string().optional(),
   });
 
   render({ data }: IStatelessPluginProps<Data>): JSX.Element {
-    return <CalloutOutput html={data.html} kind={data.kind} />;
+    return (
+      <CalloutOutput html={data.html} kind={data.kind} title={data.title} />
+    );
   }
 }

package/src/stories/callout.stories.tsx

@@ -71,3 +71,15 @@ export const Success = {
 
   name: "success",
 };
+
+export const WithTitle = {
+  render: () => (
+    <CalloutOutput
+      html="<p>CalloutOutput with a title and <strong>HTML</strong></p>"
+      kind="warn"
+      title="Watch out"
+    />
+  ),
+
+  name: "with title",
+};