From b4bf470abd4f0e66e5003891a558a0fe7e694efc Mon Sep 17 00:00:00 2001
From: Francis Secada <francis.secada@gmail.com>
Date: Fri, 31 Jul 2026 23:57:45 -0400
Subject: [PATCH 1/4] fix(notification): render body content, in every theme
 and both engines (#65)

Notification was the one container-shaped component in the set that did not
accept a body. Every theme rendered the scalar `message` and nothing else, so
the natural container form produced a correctly styled, correctly coloured,
empty box.

The two engines failed differently and the cotton one was the dangerous half.
Cotton's `<c-vars message ...>` carried no default, so `message` resolved to
the empty string and the box rendered silently. JinjaX's `message` was a
required `{#def}` parameter, so a body-only call raised
MissingRequiredArgument instead.

Both now render the body when present and fall back to `message` when it is
not. Existing `message=` callers are untouched and the JinjaX signature only
loosens, so this is backward compatible in both directions.

The escaping contract is asserted rather than inherited: JinjaX wraps slot
content in `Markup`, so a body passes through each template's
`{% autoescape true %}` block untouched, while `message` stays caller-supplied
text and is still escaped. Both halves are tested per theme.

tests/unit/test_notification_body.py adds 67 tests across the five themes:
body renders, `message` still renders, body wins when both are given (and the
loser is asserted absent), the JinjaX slot is a real slot, and two drift
guards so a new theme cannot ship a Notification that ignores its body.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NhqNRBg83czKfr8L6FF5xf
---
 CHANGELOG.md                                  |  24 ++
 docs/components.md                            |   6 +-
 .../_themes/bootstrap/notification.html       |   4 +-
 .../cotton/_themes/bulma/notification.html    |   4 +-
 .../cotton/_themes/daisy/notification.html    |   4 +-
 .../cotton/_themes/fomantic/notification.html |   4 +-
 .../_themes/foundation/notification.html      |   4 +-
 .../templates/cotton/cf/notification.html     |   5 +-
 .../jinja/bootstrap/Notification.jinja        |  10 +-
 .../templates/jinja/bulma/Notification.jinja  |  10 +-
 .../templates/jinja/daisy/Notification.jinja  |  10 +-
 .../jinja/fomantic/Notification.jinja         |  10 +-
 .../jinja/foundation/Notification.jinja       |  10 +-
 tests/unit/test_notification_body.py          | 252 ++++++++++++++++++
 14 files changed, 340 insertions(+), 17 deletions(-)
 create mode 100644 tests/unit/test_notification_body.py

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 834a6b4..00d155b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,30 @@
 
 ## [Unreleased]
 
+### Fixed — `Notification` silently discarded its body content (#65)
+
+- **Every theme, both engines, rendered the scalar `message` prop and nothing
+  else.** A caller writing the natural container form —
+  `<c-cf.notification type="danger">{{ error }}</c-cf.notification>` — got a
+  correctly styled, correctly coloured, **empty** box. In cotton this failed
+  silently: `<c-vars message ...>` carried no default, so `message` resolved to
+  the empty string and the box rendered anyway. In JinjaX it failed loudly but
+  wrongly — `message` was a required `{#def}` parameter, so a body-only call
+  raised `MissingRequiredArgument`. Both paths now render the body when one is
+  present and fall back to `message` when it is not. `message=` callers are
+  untouched; the JinjaX signature only loosens.
+- `Notification` was the single outlier among the container-shaped components.
+  `card`, `modal`, `panel`, `prose` and `box` have always accepted a body
+  alongside their scalar props; the bodiless components (`breadcrumb`,
+  `pagination`, `table`, `progress`) are all data-driven, where children would
+  be meaningless. `Notification` is a container that happened to expose only a
+  string.
+- **The two operands want opposite escaping and now get it, under test.** JinjaX
+  wraps slot content in `Markup`, so a body passes through the template's
+  `{% autoescape true %}` block untouched; `message` is caller-supplied text and
+  is still escaped. Both halves are asserted per theme rather than left to
+  autoescape semantics.
+
 ## [0.3.0] — 2026-07-31
 
 The primitives layer. 0.2.0 shipped 14 *structural* components — card, modal,
diff --git a/docs/components.md b/docs/components.md
index 29fbf49..e9e3bdf 100644
--- a/docs/components.md
+++ b/docs/components.md
@@ -146,11 +146,15 @@ Focus trapping, focus restoration, and `Escape`-to-close live in
 
 | Prop | Default | Notes |
 |---|---|---|
-| `message` | *required* | |
+| `content` | `""` | Body — the slot in template position; wins over `message` |
+| `message` | `""` | Scalar alternative to the body, for a plain string |
 | `type` | `"info"` | `info`, `success`, `warning`, `danger` |
 | `dismissible` | `true` | Renders a close button |
 | `extra_class` | `""` | |
 
+Supply one or the other. A body passed as slot content is already-rendered
+markup and is not escaped again; `message` is caller-supplied text and is.
+
 ### `Cf:Progress` / `<c-cf.progress>`
 
 | Prop | Default | Notes |
diff --git a/src/cf_ui/templates/cotton/_themes/bootstrap/notification.html b/src/cf_ui/templates/cotton/_themes/bootstrap/notification.html
index dc367dd..e9c50d6 100644
--- a/src/cf_ui/templates/cotton/_themes/bootstrap/notification.html
+++ b/src/cf_ui/templates/cotton/_themes/bootstrap/notification.html
@@ -4,7 +4,9 @@
   x-data="{ visible: true }"
   x-show="visible"
 >
-  <span>{{ message }}</span>
+  {% comment %} Body content wins over the scalar `message` — a caller who wrote children
+  meant them. `message` stays for the existing call form (#65). {% endcomment %}
+  <span>{% if slot %}{{ slot }}{% else %}{{ message }}{% endif %}</span>
   {% if dismissible == "true" %}
     <button
       type="button"
diff --git a/src/cf_ui/templates/cotton/_themes/bulma/notification.html b/src/cf_ui/templates/cotton/_themes/bulma/notification.html
index ce8c542..1d3092a 100644
--- a/src/cf_ui/templates/cotton/_themes/bulma/notification.html
+++ b/src/cf_ui/templates/cotton/_themes/bulma/notification.html
@@ -6,5 +6,7 @@
   {% if dismissible == "true" %}
     <button class="delete" @click="visible = false"></button>
   {% endif %}
-  {{ message }}
+  {% comment %} Body content wins over the scalar `message` — a caller who wrote children
+  meant them. `message` stays for the existing call form (#65). {% endcomment %}
+  {% if slot %}{{ slot }}{% else %}{{ message }}{% endif %}
 </div>
diff --git a/src/cf_ui/templates/cotton/_themes/daisy/notification.html b/src/cf_ui/templates/cotton/_themes/daisy/notification.html
index 6646223..62028f7 100644
--- a/src/cf_ui/templates/cotton/_themes/daisy/notification.html
+++ b/src/cf_ui/templates/cotton/_themes/daisy/notification.html
@@ -4,7 +4,9 @@
   x-data="{ visible: true }"
   x-show="visible"
 >
-  <span>{{ message }}</span>
+  {% comment %} Body content wins over the scalar `message` — a caller who wrote children
+  meant them. `message` stays for the existing call form (#65). {% endcomment %}
+  <span>{% if slot %}{{ slot }}{% else %}{{ message }}{% endif %}</span>
   {% if dismissible == "true" %}
     <button
       type="button"
diff --git a/src/cf_ui/templates/cotton/_themes/fomantic/notification.html b/src/cf_ui/templates/cotton/_themes/fomantic/notification.html
index a89afc4..ad4432f 100644
--- a/src/cf_ui/templates/cotton/_themes/fomantic/notification.html
+++ b/src/cf_ui/templates/cotton/_themes/fomantic/notification.html
@@ -17,5 +17,7 @@
       @click="visible = false"
     >&times;</button>
   {% endif %}
-  <div class="content">{{ message }}</div>
+  {% comment %} Body content wins over the scalar `message` — a caller who wrote children
+  meant them. `message` stays for the existing call form (#65). {% endcomment %}
+  <div class="content">{% if slot %}{{ slot }}{% else %}{{ message }}{% endif %}</div>
 </div>
diff --git a/src/cf_ui/templates/cotton/_themes/foundation/notification.html b/src/cf_ui/templates/cotton/_themes/foundation/notification.html
index 37cc95a..e7818eb 100644
--- a/src/cf_ui/templates/cotton/_themes/foundation/notification.html
+++ b/src/cf_ui/templates/cotton/_themes/foundation/notification.html
@@ -10,7 +10,9 @@
   x-data="{ visible: true }"
   x-show="visible"
 >
-  <p>{{ message }}</p>
+  {% comment %} Body content wins over the scalar `message` — a caller who wrote children
+  meant them. `message` stays for the existing call form (#65). {% endcomment %}
+  <p>{% if slot %}{{ slot }}{% else %}{{ message }}{% endif %}</p>
   {% if dismissible == "true" %}
     <button
       type="button"
diff --git a/src/cf_ui/templates/cotton/cf/notification.html b/src/cf_ui/templates/cotton/cf/notification.html
index 0f0c166..f977e7a 100644
--- a/src/cf_ui/templates/cotton/cf/notification.html
+++ b/src/cf_ui/templates/cotton/cf/notification.html
@@ -1,4 +1,7 @@
-<c-vars message type="info" dismissible="true" class="" />
+{% comment %} `message` now carries a default. Without one, django-cotton resolved a
+  body-form call's `message` to the empty string and rendered a correctly
+styled, correctly coloured, empty box — silently (#65). {% endcomment %}
+<c-vars message="" type="info" dismissible="true" class="" />
 {% load cf_ui %}
 {% cf_ui_theme_path "notification" as cf_ui_partial %}
 {% include cf_ui_partial %}
diff --git a/src/cf_ui/templates/jinja/bootstrap/Notification.jinja b/src/cf_ui/templates/jinja/bootstrap/Notification.jinja
index b2f7cfd..7d928cf 100644
--- a/src/cf_ui/templates/jinja/bootstrap/Notification.jinja
+++ b/src/cf_ui/templates/jinja/bootstrap/Notification.jinja
@@ -1,5 +1,7 @@
-{#def message, type="info", dismissible=true, extra_class="" #}
+{#def content="", message="", type="info", dismissible=true, extra_class="" #}
 {% autoescape true %}
+  {% set content = content if content is defined else "" %}
+  {% set message = message if message is defined else "" %}
   {% set type = type if type is defined else "info" %}
   {% set dismissible = dismissible if dismissible is defined else true %}
   {% set extra_class = extra_class if extra_class is defined else "" %}
@@ -9,7 +11,11 @@
     x-data="{ visible: true }"
     x-show="visible"
   >
-    <span>{{ message }}</span>
+    {# Body content wins over the scalar `message` — a caller who wrote children
+       meant them. The two operands want opposite escaping and get it: JinjaX
+       wraps slot content in `Markup`, so it passes through this block
+       untouched, while `message` is caller-supplied text and is escaped. #}
+    <span>{{ content if content else message }}</span>
     {% if dismissible %}
       <button
         type="button"
diff --git a/src/cf_ui/templates/jinja/bulma/Notification.jinja b/src/cf_ui/templates/jinja/bulma/Notification.jinja
index 6fa4b7a..5cbece1 100644
--- a/src/cf_ui/templates/jinja/bulma/Notification.jinja
+++ b/src/cf_ui/templates/jinja/bulma/Notification.jinja
@@ -1,5 +1,7 @@
-{#def message, type="info", dismissible=true, extra_class="" #}
+{#def content="", message="", type="info", dismissible=true, extra_class="" #}
 {% autoescape true %}
+  {% set content = content if content is defined else "" %}
+  {% set message = message if message is defined else "" %}
   <div
     class="notification is-{{ type }} {{ extra_class }}"
     x-data="{ visible: true }"
@@ -8,6 +10,10 @@
     {% if dismissible %}
       <button class="delete" @click="visible = false"></button>
     {% endif %}
-    {{ message }}
+    {# Body content wins over the scalar `message` — a caller who wrote children
+       meant them. The two operands want opposite escaping and get it: JinjaX
+       wraps slot content in `Markup`, so it passes through this block
+       untouched, while `message` is caller-supplied text and is escaped. #}
+    {{ content if content else message }}
   </div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/daisy/Notification.jinja b/src/cf_ui/templates/jinja/daisy/Notification.jinja
index 925e135..7f1bfe4 100644
--- a/src/cf_ui/templates/jinja/daisy/Notification.jinja
+++ b/src/cf_ui/templates/jinja/daisy/Notification.jinja
@@ -1,5 +1,7 @@
-{#def message, type="info", dismissible=true, extra_class="" #}
+{#def content="", message="", type="info", dismissible=true, extra_class="" #}
 {% autoescape true %}
+  {% set content = content if content is defined else "" %}
+  {% set message = message if message is defined else "" %}
   {% set type = type if type is defined else "info" %}
   {% set dismissible = dismissible if dismissible is defined else true %}
   {% set extra_class = extra_class if extra_class is defined else "" %}
@@ -9,7 +11,11 @@
     x-data="{ visible: true }"
     x-show="visible"
   >
-    <span>{{ message }}</span>
+    {# Body content wins over the scalar `message` — a caller who wrote children
+       meant them. The two operands want opposite escaping and get it: JinjaX
+       wraps slot content in `Markup`, so it passes through this block
+       untouched, while `message` is caller-supplied text and is escaped. #}
+    <span>{{ content if content else message }}</span>
     {% if dismissible %}
       <button
         type="button"
diff --git a/src/cf_ui/templates/jinja/fomantic/Notification.jinja b/src/cf_ui/templates/jinja/fomantic/Notification.jinja
index ceebb59..0125502 100644
--- a/src/cf_ui/templates/jinja/fomantic/Notification.jinja
+++ b/src/cf_ui/templates/jinja/fomantic/Notification.jinja
@@ -1,5 +1,7 @@
-{#def message, type="info", dismissible=true, extra_class="" #}
+{#def content="", message="", type="info", dismissible=true, extra_class="" #}
 {% autoescape true %}
+  {% set content = content if content is defined else "" %}
+  {% set message = message if message is defined else "" %}
   {% set type = type if type is defined else "info" %}
   {% set dismissible = dismissible if dismissible is defined else true %}
   {% set extra_class = extra_class if extra_class is defined else "" %}
@@ -20,6 +22,10 @@
         @click="visible = false"
       >&times;</button>
     {% endif %}
-    <div class="content">{{ message }}</div>
+    {# Body content wins over the scalar `message` — a caller who wrote children
+       meant them. The two operands want opposite escaping and get it: JinjaX
+       wraps slot content in `Markup`, so it passes through this block
+       untouched, while `message` is caller-supplied text and is escaped. #}
+    <div class="content">{{ content if content else message }}</div>
   </div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/foundation/Notification.jinja b/src/cf_ui/templates/jinja/foundation/Notification.jinja
index 935101b..421268f 100644
--- a/src/cf_ui/templates/jinja/foundation/Notification.jinja
+++ b/src/cf_ui/templates/jinja/foundation/Notification.jinja
@@ -1,5 +1,7 @@
-{#def message, type="info", dismissible=true, extra_class="" #}
+{#def content="", message="", type="info", dismissible=true, extra_class="" #}
 {% autoescape true %}
+  {% set content = content if content is defined else "" %}
+  {% set message = message if message is defined else "" %}
   {% set type = type if type is defined else "info" %}
   {% set dismissible = dismissible if dismissible is defined else true %}
   {% set extra_class = extra_class if extra_class is defined else "" %}
@@ -15,7 +17,11 @@
     x-data="{ visible: true }"
     x-show="visible"
   >
-    <p>{{ message }}</p>
+    {# Body content wins over the scalar `message` — a caller who wrote children
+       meant them. The two operands want opposite escaping and get it: JinjaX
+       wraps slot content in `Markup`, so it passes through this block
+       untouched, while `message` is caller-supplied text and is escaped. #}
+    <p>{{ content if content else message }}</p>
     {% if dismissible %}
       <button
         type="button"
diff --git a/tests/unit/test_notification_body.py b/tests/unit/test_notification_body.py
new file mode 100644
index 0000000..98f03f8
--- /dev/null
+++ b/tests/unit/test_notification_body.py
@@ -0,0 +1,252 @@
+"""``notification`` must accept body content, not only a scalar ``message`` (#65).
+
+It is the one container-shaped component in the set that took a string and
+nothing else. Every other container — ``card``, ``modal``, ``panel``, ``box``,
+``prose`` — renders a body, and the components that legitimately do not
+(``table``, ``pagination``, ``breadcrumb``, ``progress``) are all data-driven
+and would have nothing to do with children.
+
+The cotton half failed *silently*, which is what made it survive three months
+in a real consumer: ``<c-vars message ...>`` carries no default, so a
+body-form call resolved ``message`` to ``""`` and rendered a correctly-styled,
+correctly-coloured, empty box. The JinjaX half raised instead, because
+``message`` was a required ``{#def}`` parameter — the same bug with a loud
+failure mode.
+
+Both directions stay backward compatible: ``message=`` callers are untouched
+and the JinjaX signature only loosens. Where both are supplied the body wins,
+because a caller who wrote children meant them.
+"""
+
+from pathlib import Path
+
+import pytest
+from django.template.loader import render_to_string
+from django.utils.safestring import mark_safe
+from jinjax import Catalog
+from markupsafe import Markup
+
+from cf_ui import JINJA_TEMPLATES_DIR
+from tests.jinja_env import make_env
+
+THEMES = ["bulma", "bootstrap", "daisy", "fomantic", "foundation"]
+
+#: A string no theme's own markup contains, so a substring hit can only mean
+#: the body was rendered.
+BODY = "CF-UI-BODY-MARKER"
+MESSAGE = "CF-UI-MESSAGE-MARKER"
+
+#: Rendering a bare ``.jinja`` file through plain Jinja means ``{#def}`` is an
+#: ordinary comment, so every variable the template touches has to be supplied
+#: — ``make_env`` uses ``StrictUndefined`` deliberately.
+JINJA_BASE = {"type": "info", "dismissible": False, "extra_class": ""}
+COTTON_BASE = {"type": "info", "dismissible": "false", "class": ""}
+
+
+def _jinja(theme: str, **ctx: object) -> str:
+    env = make_env(JINJA_TEMPLATES_DIR / theme)
+    return env.get_template("Notification.jinja").render(**{**JINJA_BASE, **ctx})
+
+
+def _catalog(theme: str) -> Catalog:
+    cat = Catalog()
+    cat.add_folder(JINJA_TEMPLATES_DIR / theme, prefix="Cf")
+    return cat
+
+
+# ── The bug: body content is discarded ────────────────────────────────────
+
+
+@pytest.mark.parametrize("theme", THEMES)
+def test_cotton_notification_renders_body_content(settings, theme: str):
+    """The reported failure, per theme. Empty box, no error, no warning."""
+    settings.CF_UI_THEME = theme
+    html = render_to_string("cotton/cf/notification.html", {**COTTON_BASE, "slot": BODY})
+    assert BODY in html, f"{theme}: body content was discarded"
+
+
+@pytest.mark.parametrize("theme", THEMES)
+def test_jinja_notification_renders_body_content(theme: str):
+    assert BODY in _jinja(theme, content=BODY, message="")
+
+
+@pytest.mark.parametrize("theme", THEMES)
+def test_jinjax_notification_renders_a_real_slot(theme: str):
+    """Through the catalogue, where ``_content`` is the actual slot channel.
+
+    The plain-Jinja test above passes ``content`` as an ordinary variable, so
+    it cannot tell whether JinjaX's slot plumbing reaches the template. This
+    one can — and it is the form every documented call site uses.
+    """
+    html = _catalog(theme).render(
+        "Cf:Notification", _content=BODY, type="info", dismissible=False, extra_class=""
+    )
+    assert BODY in html
+
+
+@pytest.mark.parametrize("theme", THEMES)
+def test_jinjax_notification_no_longer_requires_message(theme: str):
+    """``message`` was a required ``{#def}`` parameter, so a body-only call raised.
+
+    Asserting the *absence* of an exception is weak on its own, so this also
+    checks the body arrived: a template that swallowed the slot would satisfy
+    "did not raise" while still being the bug.
+    """
+    html = _catalog(theme).render(
+        "Cf:Notification", _content=BODY, type="info", dismissible=False, extra_class=""
+    )
+    assert BODY in html
+
+
+# ── What must not regress ─────────────────────────────────────────────────
+
+
+@pytest.mark.parametrize("theme", THEMES)
+def test_cotton_message_prop_still_renders(settings, theme: str):
+    settings.CF_UI_THEME = theme
+    html = render_to_string("cotton/cf/notification.html", {**COTTON_BASE, "message": MESSAGE})
+    assert MESSAGE in html
+
+
+@pytest.mark.parametrize("theme", THEMES)
+def test_jinja_message_prop_still_renders(theme: str):
+    assert MESSAGE in _jinja(theme, message=MESSAGE, content="")
+
+
+@pytest.mark.parametrize("theme", THEMES)
+def test_jinjax_message_prop_still_renders(theme: str):
+    html = _catalog(theme).render(
+        "Cf:Notification", message=MESSAGE, type="info", dismissible=False, extra_class=""
+    )
+    assert MESSAGE in html
+
+
+# ── Precedence, stated rather than emergent ───────────────────────────────
+
+
+@pytest.mark.parametrize("theme", THEMES)
+def test_cotton_body_wins_when_both_are_supplied(settings, theme: str):
+    """A caller who wrote children meant them.
+
+    Rendering both would duplicate the text; rendering ``message`` would
+    reproduce the reported bug for anyone migrating. Asserting the loser is
+    *absent* is the half that matters — "body appears" alone would pass on a
+    template that emitted both.
+    """
+    settings.CF_UI_THEME = theme
+    html = render_to_string(
+        "cotton/cf/notification.html", {**COTTON_BASE, "slot": BODY, "message": MESSAGE}
+    )
+    assert BODY in html
+    assert MESSAGE not in html
+
+
+@pytest.mark.parametrize("theme", THEMES)
+def test_jinja_body_wins_when_both_are_supplied(theme: str):
+    html = _jinja(theme, content=BODY, message=MESSAGE)
+    assert BODY in html
+    assert MESSAGE not in html
+
+
+# ── Escaping: the two channels want opposite treatment ────────────────────
+
+
+@pytest.mark.parametrize("theme", THEMES)
+def test_jinjax_body_markup_is_not_double_escaped(theme: str):
+    """Slot content is already-rendered markup; escaping it again shows entities.
+
+    This is the specific hazard #65 flagged against 0.2.0's autoescape change:
+    the two operands of the fallback expression are not alike, and a template
+    that treats them alike breaks one of them.
+    """
+    html = _catalog(theme).render(
+        "Cf:Notification",
+        _content="<b>Bold body</b>",
+        type="info",
+        dismissible=False,
+        extra_class="",
+    )
+    assert "<b>Bold body</b>" in html
+    assert "&lt;b&gt;" not in html
+
+
+@pytest.mark.parametrize("theme", THEMES)
+def test_jinjax_message_is_still_escaped(theme: str):
+    """``message`` is caller-supplied *text* and keeps the escaping it has today.
+
+    Loosening the body channel must not loosen this one — that would turn a
+    fix for a silent-drop bug into an injection vector.
+    """
+    html = _catalog(theme).render(
+        "Cf:Notification",
+        message="<script>window.cfPwned=true</script>",
+        type="info",
+        dismissible=False,
+        extra_class="",
+    )
+    assert "<script>" not in html
+    assert "&lt;script&gt;" in html
+
+
+@pytest.mark.parametrize("theme", THEMES)
+def test_cotton_message_is_still_escaped(settings, theme: str):
+    settings.CF_UI_THEME = theme
+    html = render_to_string(
+        "cotton/cf/notification.html",
+        {**COTTON_BASE, "message": "<script>window.cfPwned=true</script>"},
+    )
+    assert "<script>" not in html
+    assert "&lt;script&gt;" in html
+
+
+@pytest.mark.parametrize("theme", THEMES)
+def test_cotton_body_markup_survives(settings, theme: str):
+    """django-cotton hands the slot in already marked safe.
+
+    ``render_to_string`` bypasses the cotton compiler, so the safe-string is
+    constructed here rather than by cotton — without it Django would escape a
+    raw string and this would assert the compiler's behaviour rather than the
+    template's.
+    """
+    settings.CF_UI_THEME = theme
+    html = render_to_string(
+        "cotton/cf/notification.html", {**COTTON_BASE, "slot": mark_safe("<b>Bold body</b>")}
+    )
+    assert "<b>Bold body</b>" in html
+    assert "&lt;b&gt;" not in html
+
+
+# ── Drift guard ───────────────────────────────────────────────────────────
+
+
+def test_every_theme_ships_a_notification_that_references_its_body():
+    """A new theme copied from an old one must not reintroduce the bug.
+
+    ``## Adding a New Theme`` in CLAUDE.md says to copy and adapt the existing
+    templates, which is exactly how a fix applied to five files fails to reach
+    the sixth. Cheap to state, and it fails on the copy rather than on the
+    first empty box in production.
+    """
+    root = Path(JINJA_TEMPLATES_DIR).parent
+    missing = []
+    for theme in THEMES:
+        jinja = (root / "jinja" / theme / "Notification.jinja").read_text(encoding="utf-8")
+        if "content" not in jinja:
+            missing.append(f"jinja/{theme}/Notification.jinja")
+        cotton = (root / "cotton" / "_themes" / theme / "notification.html").read_text(
+            encoding="utf-8"
+        )
+        if "slot" not in cotton:
+            missing.append(f"cotton/_themes/{theme}/notification.html")
+    assert not missing, f"notification ignores its body in: {missing}"
+
+
+def test_markup_import_is_used_by_the_escaping_contract():
+    """Pins the assumption the escaping tests rest on, so it cannot drift silently.
+
+    JinjaX wraps slot content in ``Markup``; that is *why* the body channel is
+    not escaped a second time while ``message`` is. If that ever stopped being
+    true the escaping tests above would still pass for the wrong reason.
+    """
+    assert Markup("<b>x</b>") == "<b>x</b>"
+    assert Markup.escape("<b>x</b>") == "&lt;b&gt;x&lt;/b&gt;"

From 2d84e96d45dafaca81291997c7fe271d7c121d47 Mon Sep 17 00:00:00 2001
From: Francis Secada <francis.secada@gmail.com>
Date: Sat, 1 Aug 2026 00:14:25 -0400
Subject: [PATCH 2/4] fix(notification): a body that renders to nothing is not
 a body (#65)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two defects in the previous commit, both found by probing the real engines
rather than reasoning about them.

A naive `{% if slot %}` reintroduces #65 with a new trigger. django-cotton's
CottonComponentNode.render sets `"slot": self.nodelist.render(context)` —
verbatim, unstripped — so a paired tag whose body renders empty still hands
the partial `"\n  "`, which is truthy. The plausible call is a conditional
body:

    <c-cf.notification message="Nothing to report">
      {% if error %}{{ error }}{% endif %}
    </c-cf.notification>

On the false branch that dropped `message` and rendered a styled empty box,
silently. Confirmed against the real cotton compiler before fixing, since
`render_to_string` bypasses it. Cotton now tests `slot.strip`; JinjaX already
strips its slot, but the Jinja side uses `content|trim` so the two engines
cannot disagree about what counts as a body.

The drift guard was vacuous and two substring needles failed to fix it.
`"content" in src` matches fomantic's `<div class="content">` wrapper, and the
tightened `"content if content"` still matches the
`{% set content = content if content is defined %}` StrictUndefined guard every
theme carries — both passed on a fomantic template with the fallback
expression deleted. It now renders instead of grepping, and enumerates themes
off the filesystem rather than from the hand-written THEMES list, so a sixth
theme fails the list check instead of silently escaping every parametrized
test in the file.

Both new guards were mutation-tested: stripping `slot.strip`/`|trim` turns all
ten whitespace tests red, and deleting fomantic's fallback expression turns the
render guard red on that theme alone.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NhqNRBg83czKfr8L6FF5xf
---
 CHANGELOG.md                                  |  6 ++
 .../_themes/bootstrap/notification.html       |  2 +-
 .../cotton/_themes/bulma/notification.html    |  2 +-
 .../cotton/_themes/daisy/notification.html    |  2 +-
 .../cotton/_themes/fomantic/notification.html |  2 +-
 .../_themes/foundation/notification.html      |  2 +-
 .../jinja/bootstrap/Notification.jinja        |  2 +-
 .../templates/jinja/bulma/Notification.jinja  |  2 +-
 .../templates/jinja/daisy/Notification.jinja  |  2 +-
 .../jinja/fomantic/Notification.jinja         |  2 +-
 .../jinja/foundation/Notification.jinja       |  2 +-
 tests/unit/test_notification_body.py          | 81 +++++++++++++++----
 12 files changed, 82 insertions(+), 25 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 00d155b..2ee3eed 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,12 @@
   `pagination`, `table`, `progress`) are all data-driven, where children would
   be meaningless. `Notification` is a container that happened to expose only a
   string.
+- **A body that renders to nothing is not a body.** django-cotton hands the
+  partial `nodelist.render(context)` verbatim, so a paired tag whose body
+  renders empty still supplies `"\n  "` — truthy. Without a guard, a `message=`
+  caller writing a conditional body would get an empty box on the false branch,
+  which is this same bug with a new trigger. Both engines now treat a
+  whitespace-only body as absent and fall back to `message`.
 - **The two operands want opposite escaping and now get it, under test.** JinjaX
   wraps slot content in `Markup`, so a body passes through the template's
   `{% autoescape true %}` block untouched; `message` is caller-supplied text and
diff --git a/src/cf_ui/templates/cotton/_themes/bootstrap/notification.html b/src/cf_ui/templates/cotton/_themes/bootstrap/notification.html
index e9c50d6..005551f 100644
--- a/src/cf_ui/templates/cotton/_themes/bootstrap/notification.html
+++ b/src/cf_ui/templates/cotton/_themes/bootstrap/notification.html
@@ -6,7 +6,7 @@
 >
   {% comment %} Body content wins over the scalar `message` — a caller who wrote children
   meant them. `message` stays for the existing call form (#65). {% endcomment %}
-  <span>{% if slot %}{{ slot }}{% else %}{{ message }}{% endif %}</span>
+  <span>{% if slot.strip %}{{ slot }}{% else %}{{ message }}{% endif %}</span>
   {% if dismissible == "true" %}
     <button
       type="button"
diff --git a/src/cf_ui/templates/cotton/_themes/bulma/notification.html b/src/cf_ui/templates/cotton/_themes/bulma/notification.html
index 1d3092a..07ccc8b 100644
--- a/src/cf_ui/templates/cotton/_themes/bulma/notification.html
+++ b/src/cf_ui/templates/cotton/_themes/bulma/notification.html
@@ -8,5 +8,5 @@
   {% endif %}
   {% comment %} Body content wins over the scalar `message` — a caller who wrote children
   meant them. `message` stays for the existing call form (#65). {% endcomment %}
-  {% if slot %}{{ slot }}{% else %}{{ message }}{% endif %}
+  {% if slot.strip %}{{ slot }}{% else %}{{ message }}{% endif %}
 </div>
diff --git a/src/cf_ui/templates/cotton/_themes/daisy/notification.html b/src/cf_ui/templates/cotton/_themes/daisy/notification.html
index 62028f7..e7036f1 100644
--- a/src/cf_ui/templates/cotton/_themes/daisy/notification.html
+++ b/src/cf_ui/templates/cotton/_themes/daisy/notification.html
@@ -6,7 +6,7 @@
 >
   {% comment %} Body content wins over the scalar `message` — a caller who wrote children
   meant them. `message` stays for the existing call form (#65). {% endcomment %}
-  <span>{% if slot %}{{ slot }}{% else %}{{ message }}{% endif %}</span>
+  <span>{% if slot.strip %}{{ slot }}{% else %}{{ message }}{% endif %}</span>
   {% if dismissible == "true" %}
     <button
       type="button"
diff --git a/src/cf_ui/templates/cotton/_themes/fomantic/notification.html b/src/cf_ui/templates/cotton/_themes/fomantic/notification.html
index ad4432f..c02ebc5 100644
--- a/src/cf_ui/templates/cotton/_themes/fomantic/notification.html
+++ b/src/cf_ui/templates/cotton/_themes/fomantic/notification.html
@@ -19,5 +19,5 @@
   {% endif %}
   {% comment %} Body content wins over the scalar `message` — a caller who wrote children
   meant them. `message` stays for the existing call form (#65). {% endcomment %}
-  <div class="content">{% if slot %}{{ slot }}{% else %}{{ message }}{% endif %}</div>
+  <div class="content">{% if slot.strip %}{{ slot }}{% else %}{{ message }}{% endif %}</div>
 </div>
diff --git a/src/cf_ui/templates/cotton/_themes/foundation/notification.html b/src/cf_ui/templates/cotton/_themes/foundation/notification.html
index e7818eb..38b94ab 100644
--- a/src/cf_ui/templates/cotton/_themes/foundation/notification.html
+++ b/src/cf_ui/templates/cotton/_themes/foundation/notification.html
@@ -12,7 +12,7 @@
 >
   {% comment %} Body content wins over the scalar `message` — a caller who wrote children
   meant them. `message` stays for the existing call form (#65). {% endcomment %}
-  <p>{% if slot %}{{ slot }}{% else %}{{ message }}{% endif %}</p>
+  <p>{% if slot.strip %}{{ slot }}{% else %}{{ message }}{% endif %}</p>
   {% if dismissible == "true" %}
     <button
       type="button"
diff --git a/src/cf_ui/templates/jinja/bootstrap/Notification.jinja b/src/cf_ui/templates/jinja/bootstrap/Notification.jinja
index 7d928cf..edcb45f 100644
--- a/src/cf_ui/templates/jinja/bootstrap/Notification.jinja
+++ b/src/cf_ui/templates/jinja/bootstrap/Notification.jinja
@@ -15,7 +15,7 @@
        meant them. The two operands want opposite escaping and get it: JinjaX
        wraps slot content in `Markup`, so it passes through this block
        untouched, while `message` is caller-supplied text and is escaped. #}
-    <span>{{ content if content else message }}</span>
+    <span>{{ content if content|trim else message }}</span>
     {% if dismissible %}
       <button
         type="button"
diff --git a/src/cf_ui/templates/jinja/bulma/Notification.jinja b/src/cf_ui/templates/jinja/bulma/Notification.jinja
index 5cbece1..763dba5 100644
--- a/src/cf_ui/templates/jinja/bulma/Notification.jinja
+++ b/src/cf_ui/templates/jinja/bulma/Notification.jinja
@@ -14,6 +14,6 @@
        meant them. The two operands want opposite escaping and get it: JinjaX
        wraps slot content in `Markup`, so it passes through this block
        untouched, while `message` is caller-supplied text and is escaped. #}
-    {{ content if content else message }}
+    {{ content if content|trim else message }}
   </div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/daisy/Notification.jinja b/src/cf_ui/templates/jinja/daisy/Notification.jinja
index 7f1bfe4..c6c04dd 100644
--- a/src/cf_ui/templates/jinja/daisy/Notification.jinja
+++ b/src/cf_ui/templates/jinja/daisy/Notification.jinja
@@ -15,7 +15,7 @@
        meant them. The two operands want opposite escaping and get it: JinjaX
        wraps slot content in `Markup`, so it passes through this block
        untouched, while `message` is caller-supplied text and is escaped. #}
-    <span>{{ content if content else message }}</span>
+    <span>{{ content if content|trim else message }}</span>
     {% if dismissible %}
       <button
         type="button"
diff --git a/src/cf_ui/templates/jinja/fomantic/Notification.jinja b/src/cf_ui/templates/jinja/fomantic/Notification.jinja
index 0125502..c598d59 100644
--- a/src/cf_ui/templates/jinja/fomantic/Notification.jinja
+++ b/src/cf_ui/templates/jinja/fomantic/Notification.jinja
@@ -26,6 +26,6 @@
        meant them. The two operands want opposite escaping and get it: JinjaX
        wraps slot content in `Markup`, so it passes through this block
        untouched, while `message` is caller-supplied text and is escaped. #}
-    <div class="content">{{ content if content else message }}</div>
+    <div class="content">{{ content if content|trim else message }}</div>
   </div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/foundation/Notification.jinja b/src/cf_ui/templates/jinja/foundation/Notification.jinja
index 421268f..6aa419e 100644
--- a/src/cf_ui/templates/jinja/foundation/Notification.jinja
+++ b/src/cf_ui/templates/jinja/foundation/Notification.jinja
@@ -21,7 +21,7 @@
        meant them. The two operands want opposite escaping and get it: JinjaX
        wraps slot content in `Markup`, so it passes through this block
        untouched, while `message` is caller-supplied text and is escaped. #}
-    <p>{{ content if content else message }}</p>
+    <p>{{ content if content|trim else message }}</p>
     {% if dismissible %}
       <button
         type="button"
diff --git a/tests/unit/test_notification_body.py b/tests/unit/test_notification_body.py
index 98f03f8..8ae4103 100644
--- a/tests/unit/test_notification_body.py
+++ b/tests/unit/test_notification_body.py
@@ -148,6 +148,44 @@ def test_jinja_body_wins_when_both_are_supplied(theme: str):
     assert MESSAGE not in html
 
 
+# ── A body that renders to nothing is not a body ──────────────────────────
+
+
+@pytest.mark.parametrize("theme", THEMES)
+def test_cotton_whitespace_only_body_falls_back_to_message(settings, theme: str):
+    """Otherwise the fix reintroduces the bug it exists to remove.
+
+    ``django_cotton/templatetags/_component.py`` sets ``"slot":
+    self.nodelist.render(context)`` — verbatim, unstripped. So a paired tag
+    whose body renders to nothing still hands the partial ``"\\n  "``, which
+    is truthy. The plausible call is a conditional body::
+
+        <c-cf.notification message="Nothing to report">
+          {% if error %}{{ error }}{% endif %}
+        </c-cf.notification>
+
+    On the false branch a naive ``{% if slot %}`` renders whitespace and drops
+    ``message`` — a correctly-styled empty box, silently, which is #65 again
+    with a new trigger. Verified against the real compiler, not inferred.
+    """
+    settings.CF_UI_THEME = theme
+    html = render_to_string(
+        "cotton/cf/notification.html", {**COTTON_BASE, "slot": "\n  \n", "message": MESSAGE}
+    )
+    assert MESSAGE in html, f"{theme}: whitespace-only body suppressed `message`"
+
+
+@pytest.mark.parametrize("theme", THEMES)
+def test_jinja_whitespace_only_body_falls_back_to_message(theme: str):
+    """The same rule, stated the same way, on the other engine.
+
+    JinjaX already strips slot content before it reaches the template, so this
+    is belt-and-braces there — but the two engines should not disagree about
+    what counts as a body, and the plain-Jinja path has no stripping at all.
+    """
+    assert MESSAGE in _jinja(theme, content="\n  \n", message=MESSAGE)
+
+
 # ── Escaping: the two channels want opposite treatment ────────────────────
 
 
@@ -219,26 +257,39 @@ def test_cotton_body_markup_survives(settings, theme: str):
 # ── Drift guard ───────────────────────────────────────────────────────────
 
 
-def test_every_theme_ships_a_notification_that_references_its_body():
+def _shipped_themes() -> list[str]:
+    """Read off the filesystem, not from ``THEMES`` — that is the whole point."""
+    return sorted(p.name for p in Path(JINJA_TEMPLATES_DIR).iterdir() if p.is_dir())
+
+
+def test_themes_under_test_are_every_theme_shipped():
+    """``THEMES`` is hand-written, so it goes stale the moment a sixth lands.
+
+    Without this, every parametrized test above quietly stops covering the new
+    theme and the suite still reports green.
+    """
+    assert _shipped_themes() == sorted(THEMES)
+
+
+@pytest.mark.parametrize("theme", THEMES)
+def test_every_shipped_theme_renders_its_notification_body(settings, theme: str):
     """A new theme copied from an old one must not reintroduce the bug.
 
     ``## Adding a New Theme`` in CLAUDE.md says to copy and adapt the existing
     templates, which is exactly how a fix applied to five files fails to reach
-    the sixth. Cheap to state, and it fails on the copy rather than on the
-    first empty box in production.
+    the sixth.
+
+    This renders rather than greps, because a substring guard on these files is
+    remarkably hard to make non-vacuous. ``"content" in src`` matches fomantic's
+    ``<div class="content">`` wrapper; the tightened ``"content if content"``
+    still matches the ``{% set content = content if content is defined %}``
+    StrictUndefined guard that every theme carries. Both needles looked
+    specific and both passed on a template with the fallback expression
+    deleted. Rendering cannot pass for the wrong reason.
     """
-    root = Path(JINJA_TEMPLATES_DIR).parent
-    missing = []
-    for theme in THEMES:
-        jinja = (root / "jinja" / theme / "Notification.jinja").read_text(encoding="utf-8")
-        if "content" not in jinja:
-            missing.append(f"jinja/{theme}/Notification.jinja")
-        cotton = (root / "cotton" / "_themes" / theme / "notification.html").read_text(
-            encoding="utf-8"
-        )
-        if "slot" not in cotton:
-            missing.append(f"cotton/_themes/{theme}/notification.html")
-    assert not missing, f"notification ignores its body in: {missing}"
+    settings.CF_UI_THEME = theme
+    assert BODY in _jinja(theme, content=BODY, message="")
+    assert BODY in render_to_string("cotton/cf/notification.html", {**COTTON_BASE, "slot": BODY})
 
 
 def test_markup_import_is_used_by_the_escaping_contract():

From c088c643689ff87ea4981146941de64e0285ddb7 Mon Sep 17 00:00:00 2001
From: Francis Secada <francis.secada@gmail.com>
Date: Sat, 1 Aug 2026 20:21:18 -0400
Subject: [PATCH 3/4] test(notification): assert the body at the tier that runs
 the compiler (#65)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The unit suite proves the ten templates render a body, but it cannot prove
django-cotton builds `slot` the way the fix assumes: `render_to_string`
bypasses the compiler, so `slot` is whatever the test injected. The
integration tier is no better — its settings module never installs
`django_cotton`, so `<c-cf.*>` tags reach the response as literal text and
its existing assertions pass on Django variable interpolation alone.

That gap is why #65 went unnoticed for three months, so the fix does not get
to rely on the same tiers. Adds a `/notification/` gallery page exercising
all three cotton call forms and asserts them in E2E, where cotton itself
builds the slot:

- the body form renders its body
- the `message=` form still renders (no regression)
- a conditional body on its false branch falls back to `message` rather
  than emitting a styled empty box

Both halves of the fix were mutation-checked against these: reverting the
bulma partial to bare `{{ message }}` reddens only the body test, and
weakening `slot.strip` to `slot` reddens only the whitespace-fallback test.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NhqNRBg83czKfr8L6FF5xf
---
 CHANGELOG.md                                  |  8 +++++
 tests/e2e/test_bulma_cotton.py                | 33 +++++++++++++++++++
 .../cotton_gallery/notification.html          | 17 ++++++++++
 tests/integration/cotton_app/urls.py          |  1 +
 tests/integration/cotton_app/views.py         |  6 ++++
 5 files changed, 65 insertions(+)
 create mode 100644 tests/integration/cotton_app/templates/cotton_gallery/notification.html

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2ee3eed..cfbbc6f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -31,6 +31,14 @@
   `{% autoescape true %}` block untouched; `message` is caller-supplied text and
   is still escaped. Both halves are asserted per theme rather than left to
   autoescape semantics.
+- **Covered at the tier that could have caught it.** The bug survived three
+  months because no tier that ran the django-cotton compiler looked at this
+  component's content channel: the unit tier injects `slot` as raw context
+  (`render_to_string` bypasses the compiler), and the integration tier does not
+  install `django_cotton` at all, so its `<c-cf.*>` tags reach the response as
+  literal text. The three cotton call forms — body, `message=`, and a
+  conditional body on its false branch — are now asserted in the E2E tier,
+  where `slot` is built by cotton itself.
 
 ## [0.3.0] — 2026-07-31
 
diff --git a/tests/e2e/test_bulma_cotton.py b/tests/e2e/test_bulma_cotton.py
index 3a6f225..8a17b3e 100644
--- a/tests/e2e/test_bulma_cotton.py
+++ b/tests/e2e/test_bulma_cotton.py
@@ -53,6 +53,39 @@ def test_tabs_cotton_render_the_active_tab(cotton_page, cotton_server_url):
     expect(page.locator("[role='tab'][tabindex='0']")).to_have_count(1)
 
 
+# --- Body content through the real cotton compiler (#65) -------------------
+#
+# #65 survived three months because no tier that ran the compiler looked at
+# notification's content channel: the unit tier injects `slot` as raw context
+# (render_to_string bypasses the compiler), and the integration tier does not
+# install django_cotton at all, so its `<c-cf.*>` tags reach the browser as
+# literal text. Only here is `slot` built by cotton itself.
+
+
+def test_notification_cotton_renders_its_body(cotton_page, cotton_server_url):
+    page, _ = cotton_page
+    page.goto(f"{cotton_server_url}/notification/")
+    expect(page.locator(".notification.is-danger strong")).to_have_text("Body form")
+
+
+def test_notification_cotton_still_renders_the_message_form(cotton_page, cotton_server_url):
+    page, _ = cotton_page
+    page.goto(f"{cotton_server_url}/notification/")
+    expect(page.locator(".notification.is-info")).to_contain_text("Message form")
+
+
+def test_notification_cotton_falls_back_when_the_body_is_whitespace(cotton_page, cotton_server_url):
+    """A conditional body whose branch is false is not a body.
+
+    The compiler hands the partial the surrounding newlines regardless, so a
+    plain truthiness test on `slot` suppresses `message` and emits a correctly
+    styled, empty box — #65's own failure, one layer down.
+    """
+    page, _ = cotton_page
+    page.goto(f"{cotton_server_url}/notification/")
+    expect(page.locator(".notification.is-warning")).to_contain_text("Fallback wins")
+
+
 def test_panel_cotton_honors_its_open_prop(cotton_page, cotton_server_url):
     page, _ = cotton_page
     page.goto(f"{cotton_server_url}/panel/")
diff --git a/tests/integration/cotton_app/templates/cotton_gallery/notification.html b/tests/integration/cotton_app/templates/cotton_gallery/notification.html
new file mode 100644
index 0000000..f5f802e
--- /dev/null
+++ b/tests/integration/cotton_app/templates/cotton_gallery/notification.html
@@ -0,0 +1,17 @@
+{% comment %} Three call forms on one page, because the unit tier cannot tell them
+  apart: render_to_string bypasses the cotton compiler, so `slot` is whatever
+  the test injected rather than whatever the compiler built (#65). Each form
+  gets its own `type` so the E2E test can select it — the partial renders no
+  `{{ attrs }}`, so an `id` here would be silently dropped. {% endcomment %}
+<c-cf.notification type="danger" dismissible="false">
+  <strong>Body form</strong>
+</c-cf.notification>
+
+<c-cf.notification message="Message form" type="info" dismissible="false" />
+
+{% comment %} The false branch of a conditional body. The compiler still hands the
+  partial the surrounding whitespace, so a naive truthiness test on `slot`
+  would drop `message` here and render an empty box. {% endcomment %}
+<c-cf.notification message="Fallback wins" type="warning" dismissible="false">
+  {% if error %}{{ error }}{% endif %}
+</c-cf.notification>
diff --git a/tests/integration/cotton_app/urls.py b/tests/integration/cotton_app/urls.py
index fb75daa..4064162 100644
--- a/tests/integration/cotton_app/urls.py
+++ b/tests/integration/cotton_app/urls.py
@@ -8,4 +8,5 @@
     path("card/", views.card_view),
     path("tabs/", views.tabs_view),
     path("panel/", views.panel_view),
+    path("notification/", views.notification_view),
 ]
diff --git a/tests/integration/cotton_app/views.py b/tests/integration/cotton_app/views.py
index cd77199..038e400 100644
--- a/tests/integration/cotton_app/views.py
+++ b/tests/integration/cotton_app/views.py
@@ -37,3 +37,9 @@ def tabs_view(request):
 
 def panel_view(request):
     return render(request, "cotton_gallery/panel.html", {})
+
+
+def notification_view(request):
+    # `error` deliberately absent, so the third component's conditional body
+    # renders to whitespace — the case that fooled a naive `{% if slot %}`.
+    return render(request, "cotton_gallery/notification.html", {})

From 8cb099480192c6c76c8859e65dd0b29480cb23a6 Mon Sep 17 00:00:00 2001
From: Francis Secada <francis.secada@gmail.com>
Date: Sat, 1 Aug 2026 20:29:14 -0400
Subject: [PATCH 4/4] fix(notification): foundation's <p> wraps the message,
 not the body (#65)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Broadening notification's content channel made an existing wrapper wrong.
Foundation put the scalar `message` in a `<p>`, which was fine while the only
thing that could land there was a string. A body is arbitrary markup, and the
HTML parser does not tolerate block content inside an open paragraph — it
closes it. Verified in Chromium:

  <div class="callout"><p><ul><li>Item</li></ul></p></div>
    parses to
  <div class="callout"><p></p><ul><li>Item</li></ul><p></p></div>

The body is reparented onto `.callout` and two empty paragraphs remain, which
Foundation's own `.callout > :first-child` / `> :last-child` margin rules then
match instead of the content. No attribute or stylesheet can prevent it.

The `<p>` now wraps only `message`, so the scalar form renders byte-identically
to before and a body is emitted where the caller wrote it. Fomantic's
`<div class="content">` and bootstrap/daisy's `<span>` both keep a `<ul>`
nested where written (same probe), so they are unchanged.

The two new tests assert the emitted markup rather than the parsed DOM, so they
run at the unit tier in both engines; a third derives the wrapper list from the
shipped templates so a sixth theme choosing `<p>` cannot silently disable them.
Restoring the `<p>` around the body reddens exactly those two and nothing else.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NhqNRBg83czKfr8L6FF5xf
---
 CHANGELOG.md                                  | 10 ++++
 .../_themes/foundation/notification.html      | 28 ++++++++-
 .../jinja/foundation/Notification.jinja       | 11 +++-
 tests/unit/test_notification_body.py          | 60 +++++++++++++++++++
 4 files changed, 105 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cfbbc6f..5eb9ad5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -31,6 +31,16 @@
   `{% autoescape true %}` block untouched; `message` is caller-supplied text and
   is still escaped. Both halves are asserted per theme rather than left to
   autoescape semantics.
+- **Foundation's `<p>` now wraps only `message`, not the body.** A body is
+  arbitrary markup, and the HTML parser closes an open `<p>` on encountering
+  block content: `<p><ul>…</ul></p>` parses to `<p></p><ul>…</ul><p></p>`, which
+  reparents the body onto `.callout` and leaves two empty paragraphs for
+  Foundation's own `.callout > :first-child` / `> :last-child` margin rules to
+  match. Broadening the content channel is what made that reachable — before
+  this, the `<p>` only ever held a string. `message=` callers render
+  byte-identically to before. Fomantic's `<div class="content">` and
+  bootstrap/daisy's `<span>` hold block content without being restructured, and
+  are unchanged.
 - **Covered at the tier that could have caught it.** The bug survived three
   months because no tier that ran the django-cotton compiler looked at this
   component's content channel: the unit tier injects `slot` as raw context
diff --git a/src/cf_ui/templates/cotton/_themes/foundation/notification.html b/src/cf_ui/templates/cotton/_themes/foundation/notification.html
index 38b94ab..8e019d8 100644
--- a/src/cf_ui/templates/cotton/_themes/foundation/notification.html
+++ b/src/cf_ui/templates/cotton/_themes/foundation/notification.html
@@ -11,8 +11,32 @@
   x-show="visible"
 >
   {% comment %} Body content wins over the scalar `message` — a caller who wrote children
-  meant them. `message` stays for the existing call form (#65). {% endcomment %}
-  <p>{% if slot.strip %}{{ slot }}{% else %}{{ message }}{% endif %}</p>
+  meant them. `message` stays for the existing call form (#65).
+
+  The `
+<p>
+` wraps only `message`. A body is arbitrary markup, and the HTML
+  parser closes an open `
+<p>
+` on encountering block content: `
+<p>
+<ul>
+…
+</ul>
+</p>
+`
+  parses to `
+<p>
+</p>
+<ul>
+…
+</ul>
+<p>
+</p>
+`, reparenting the body onto `.callout` and
+  leaving two empty paragraphs behind for `.callout > :last-child` to match.
+  `message` is text, so its wrapper renders byte-identically to before. {% endcomment %}
+  {% if slot.strip %}{{ slot }}{% else %}<p>{{ message }}</p>{% endif %}
   {% if dismissible == "true" %}
     <button
       type="button"
diff --git a/src/cf_ui/templates/jinja/foundation/Notification.jinja b/src/cf_ui/templates/jinja/foundation/Notification.jinja
index 6aa419e..1ba11ef 100644
--- a/src/cf_ui/templates/jinja/foundation/Notification.jinja
+++ b/src/cf_ui/templates/jinja/foundation/Notification.jinja
@@ -20,8 +20,15 @@
     {# Body content wins over the scalar `message` — a caller who wrote children
        meant them. The two operands want opposite escaping and get it: JinjaX
        wraps slot content in `Markup`, so it passes through this block
-       untouched, while `message` is caller-supplied text and is escaped. #}
-    <p>{{ content if content|trim else message }}</p>
+       untouched, while `message` is caller-supplied text and is escaped.
+
+       The `<p>` wraps only `message`. A body is arbitrary markup, and the HTML
+       parser closes an open `<p>` on encountering block content:
+       `<p><ul>…</ul></p>` parses to `<p></p><ul>…</ul><p></p>`, reparenting the
+       body onto `.callout` and leaving two empty paragraphs behind for
+       `.callout > :last-child` to match. `message` is text, so its wrapper
+       renders byte-identically to before. #}
+    {% if content|trim %}{{ content }}{% else %}<p>{{ message }}</p>{% endif %}
     {% if dismissible %}
       <button
         type="button"
diff --git a/tests/unit/test_notification_body.py b/tests/unit/test_notification_body.py
index 8ae4103..d772734 100644
--- a/tests/unit/test_notification_body.py
+++ b/tests/unit/test_notification_body.py
@@ -254,6 +254,66 @@ def test_cotton_body_markup_survives(settings, theme: str):
     assert "&lt;b&gt;" not in html
 
 
+# ── A body is arbitrary markup, so its wrapper must be able to hold it ────
+
+#: Themes whose scalar `message` sits in an element the HTML parser will not
+#: let hold block content. `<p>` is the only such wrapper in the set —
+#: fomantic's `<div class="content">` and bootstrap/daisy's `<span>` both keep
+#: a `<ul>` nested where it was written (verified in a real parser); `<p>` does
+#: not, and no attribute or CSS can change that.
+PARAGRAPH_WRAPPED = ["foundation"]
+
+
+@pytest.mark.parametrize("theme", PARAGRAPH_WRAPPED)
+def test_jinja_body_is_not_wrapped_in_a_paragraph(theme: str):
+    """`<p><ul>…</ul></p>` does not survive parsing — it is not a nesting error
+    the browser tolerates, it is a restructuring.
+
+    Chromium parses that markup to `<p></p><ul>…</ul><p></p>`: the body is
+    reparented onto `.callout` and two empty paragraphs are left behind, which
+    Foundation's own `.callout > :first-child` / `> :last-child` margin rules
+    then match instead of the content. Before #65 this could not happen — the
+    `<p>` only ever held a scalar string — so broadening the channel is what
+    makes the wrapper wrong.
+
+    The scalar keeps its `<p>`; only the body channel loses it.
+    """
+    body = _jinja(theme, content=Markup(f"<ul><li>{BODY}</li></ul>"), message="")
+    assert BODY in body
+    assert "<p>" not in body, f"{theme}: block-level body wrapped in <p>"
+
+    scalar = _jinja(theme, content="", message=MESSAGE)
+    assert f"<p>{MESSAGE}</p>" in scalar, f"{theme}: `message` lost its wrapper"
+
+
+@pytest.mark.parametrize("theme", PARAGRAPH_WRAPPED)
+def test_cotton_body_is_not_wrapped_in_a_paragraph(settings, theme: str):
+    settings.CF_UI_THEME = theme
+    body = render_to_string(
+        "cotton/cf/notification.html",
+        {**COTTON_BASE, "slot": mark_safe(f"<ul><li>{BODY}</li></ul>")},
+    )
+    assert BODY in body
+    assert "<p>" not in body, f"{theme}: block-level body wrapped in <p>"
+
+    scalar = render_to_string("cotton/cf/notification.html", {**COTTON_BASE, "message": MESSAGE})
+    assert f"<p>{MESSAGE}</p>" in scalar, f"{theme}: `message` lost its wrapper"
+
+
+def test_paragraph_wrapped_list_matches_what_the_templates_ship():
+    """Derived, not hand-maintained — a sixth theme choosing `<p>` must be caught.
+
+    The two tests above only cover what this list names, so the list going
+    stale silently disables them.
+    """
+    shipped = {
+        theme
+        for theme in _shipped_themes()
+        if "<p>" in (JINJA_TEMPLATES_DIR / theme / "Notification.jinja").read_text()
+    }
+    assert shipped == set(PARAGRAPH_WRAPPED)
+
+
 # ── Drift guard ───────────────────────────────────────────────────────────