From f049ad5ca6f8ae8e0329e4c94595774a2c06ae65 Mon Sep 17 00:00:00 2001
From: daedalus <44623501+ComfortablyCoding@users.noreply.github.com>
Date: Mon, 15 Jun 2026 12:00:04 -0400
Subject: [PATCH] Fix broken markup in interfaces guide

---
 content/guides/01.data-model/3.interfaces.md | 94 ++++++++++++--------
 1 file changed, 57 insertions(+), 37 deletions(-)

diff --git a/content/guides/01.data-model/3.interfaces.md b/content/guides/01.data-model/3.interfaces.md
index 4f0bf13a..c49fdcec 100644
--- a/content/guides/01.data-model/3.interfaces.md
+++ b/content/guides/01.data-model/3.interfaces.md
@@ -296,45 +296,65 @@ Nested tree of checkboxes that can be expanded or collapsed.
 
 ::callout{icon="i-lucide-info"}
 **Understanding Value Combining Options**
+
 In a Checkboxes (Tree) interface, checkboxes can exist within a parent checkbox. Value combining determines the final value when selecting items in a tree.
 
-- `All` returns all checked values.
-  :::collapsible{name="examples" class="mt-2"}
-  | Selection | Final Value |
-  | ------------------------------------------------------------------------------------------------------------------------ | -------------------------- |
-  | :icon{name="material-symbols:check-box-outline"} `parent`<br>&emsp; :icon{name="material-symbols:check-box"} `child1`<br>&emsp; :icon{name="material-symbols:check-box-outline"} `child2` | `[child1]` |
-  | :icon{name="material-symbols:check-box"} `parent`<br>&emsp; :icon{name="material-symbols:check-box"} `child1`<br>&emsp; :icon{name="material-symbols:check-box"} `child2` | `[child1, child2, parent]` |
-  :::
-- `Branch` returns the top-most values that are selected.
-  :::collapsible{name="examples" class="mt-2"}
-  | Selection | Final Value |
-  | ------------------------------------------------------------------------------------------------------------------------ | ----------- |
-  | :icon{name="material-symbols:check-box-outline"} `parent`<br>&emsp; :icon{name="material-symbols:check-box"} `child1`<br>&emsp; :icon{name="material-symbols:check-box-outline"} `child2` | `[child1]` |
-  | :icon{name="material-symbols:check-box"} `parent`<br>&emsp; :icon{name="material-symbols:check-box"} `child1`<br>&emsp; :icon{name="material-symbols:check-box"} `child2` | `[parent]` |
-  :::
-- `Leaf` returns the deepest values that are selected
-  :::collapsible{name="examples" class="mt-2"}
-  | Selection | Final Value |
-  | ------------------------------------------------------------------------------------------------------------------------ | ------------------ |
-  | :icon{name="material-symbols:check-box-outline"} `parent`<br>&emsp; :icon{name="material-symbols:check-box"} `child1`<br>&emsp; :icon{name="material-symbols:check-box-outline"} `child2` | `[child1]` |
-  | :icon{name="material-symbols:check-box"} `parent`<br>&emsp; :icon{name="material-symbols:check-box"} `child1`<br>&emsp; :icon{name="material-symbols:check-box"} `child2` | `[child1, child2]` |
-  :::
-- `Indeterminate` returns checked items, and always returns a parent when one or more children are selected.
-  :::collapsible{name="examples" class="mt-2"}
-  | Selection | Final Value |
-  | ------------------------------------------------------------------------------------------------------------------------ | -------------------------- |
-  | :icon{name="material-symbols:check-box-outline"} `parent`<br>&emsp; :icon{name="material-symbols:check-box"} `child1`<br>&emsp; :icon{name="material-symbols:check-box-outline"} `child2` | `[child1, parent]` |
-  | :icon{name="material-symbols:check-box"} `parent`<br>&emsp; :icon{name="material-symbols:check-box"} `child1`<br>&emsp; :icon{name="material-symbols:check-box"} `child2` | `[child1, child2, parent]` |
-  :::
-- `Exclusive` returns either the parent or child elements, but not both.
-  :::collapsible{name="examples" class="mt-2"}
-  | Selection | Final Value |
-  | ------------------------------------------------------------------------------------------------------------------------ | ------------------ |
-  | :icon{name="material-symbols:check-box"} `parent`<br>&emsp; :icon{name="material-symbols:check-box-outline"} `child1`<br>&emsp; :icon{name="material-symbols:check-box-outline"} `child2` | `[parent]` |
-  | :icon{name="material-symbols:check-box-outline"} `parent`<br>&emsp; :icon{name="material-symbols:check-box"} `child1`<br>&emsp; :icon{name="material-symbols:check-box-outline"} `child2` | `[child1]` |
-  | :icon{name="material-symbols:check-box-outline"} `parent`<br>&emsp; :icon{name="material-symbols:check-box"} `child1`<br>&emsp; :icon{name="material-symbols:check-box"} `child2` | `[child1, child2]` |
-  :::
-  ::
+**`All`** returns all checked values.
+
+:::collapsible{name="examples" class="mt-2"}
+
+| Selection                                                                                                                                                                                 | Final Value                |
+| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- |
+| :icon{name="material-symbols:check-box-outline"} `parent`<br>&emsp; :icon{name="material-symbols:check-box"} `child1`<br>&emsp; :icon{name="material-symbols:check-box-outline"} `child2` | `[child1]`                 |
+| :icon{name="material-symbols:check-box"} `parent`<br>&emsp; :icon{name="material-symbols:check-box"} `child1`<br>&emsp; :icon{name="material-symbols:check-box"} `child2`                 | `[child1, child2, parent]` |
+
+:::
+
+**`Branch`** returns the top-most values that are selected.
+
+:::collapsible{name="examples" class="mt-2"}
+
+| Selection                                                                                                                                                                                 | Final Value |
+| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| :icon{name="material-symbols:check-box-outline"} `parent`<br>&emsp; :icon{name="material-symbols:check-box"} `child1`<br>&emsp; :icon{name="material-symbols:check-box-outline"} `child2` | `[child1]`  |
+| :icon{name="material-symbols:check-box"} `parent`<br>&emsp; :icon{name="material-symbols:check-box"} `child1`<br>&emsp; :icon{name="material-symbols:check-box"} `child2`                 | `[parent]`  |
+
+:::
+
+**`Leaf`** returns the deepest values that are selected.
+
+:::collapsible{name="examples" class="mt-2"}
+
+| Selection                                                                                                                                                                                 | Final Value        |
+| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
+| :icon{name="material-symbols:check-box-outline"} `parent`<br>&emsp; :icon{name="material-symbols:check-box"} `child1`<br>&emsp; :icon{name="material-symbols:check-box-outline"} `child2` | `[child1]`         |
+| :icon{name="material-symbols:check-box"} `parent`<br>&emsp; :icon{name="material-symbols:check-box"} `child1`<br>&emsp; :icon{name="material-symbols:check-box"} `child2`                 | `[child1, child2]` |
+
+:::
+
+**`Indeterminate`** returns checked items, and always returns a parent when one or more children are selected.
+
+:::collapsible{name="examples" class="mt-2"}
+
+| Selection                                                                                                                                                                                 | Final Value                |
+| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- |
+| :icon{name="material-symbols:check-box-outline"} `parent`<br>&emsp; :icon{name="material-symbols:check-box"} `child1`<br>&emsp; :icon{name="material-symbols:check-box-outline"} `child2` | `[child1, parent]`         |
+| :icon{name="material-symbols:check-box"} `parent`<br>&emsp; :icon{name="material-symbols:check-box"} `child1`<br>&emsp; :icon{name="material-symbols:check-box"} `child2`                 | `[child1, child2, parent]` |
+
+:::
+
+**`Exclusive`** returns either the parent or child elements, but not both.
+
+:::collapsible{name="examples" class="mt-2"}
+
+| Selection                                                                                                                                                                                 | Final Value        |
+| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
+| :icon{name="material-symbols:check-box"} `parent`<br>&emsp; :icon{name="material-symbols:check-box-outline"} `child1`<br>&emsp; :icon{name="material-symbols:check-box-outline"} `child2` | `[parent]`         |
+| :icon{name="material-symbols:check-box-outline"} `parent`<br>&emsp; :icon{name="material-symbols:check-box"} `child1`<br>&emsp; :icon{name="material-symbols:check-box-outline"} `child2` | `[child1]`         |
+| :icon{name="material-symbols:check-box-outline"} `parent`<br>&emsp; :icon{name="material-symbols:check-box"} `child1`<br>&emsp; :icon{name="material-symbols:check-box"} `child2`         | `[child1, child2]` |
+
+:::
+::
 
 ### Radio Buttons