box diagram

docs/guide/events.md

@@ -1,5 +1,11 @@
 ## Events
 
+- What are events
+- Handling events
+- Auto calling base classes
+- Event bubbling
+- Posting / emitting events
+
 <div class="excalidraw">
 --8<-- "docs/images/test.excalidraw.svg"
 </div>

docs/guide/reactivity.md

@@ -1 +1,8 @@
 # Reactivity
+
+- What is reactivity
+- Reactive variables
+  - Demo
+  - repaint vs layout
+- Validation
+- Watch methods

docs/guide/screens.md

@@ -1 +1,10 @@
 # Screens
+
+- Explanation of screens
+- Screens API
+  - Install screen
+  - Uninstall screen
+  - Push screen
+  - Pop screen
+  - Switch Screen
+- Screens example

docs/guide/styles.md

@@ -1,3 +1,13 @@
 # Styles
 
-TODO: discussion of box model
+- What are styles
+- Styles object on widgets / app
+- Setting styles via CSS
+- Box model
+- Color / Background
+- Borders / Outline
+
+
+<div class="excalidraw">
+--8<-- "docs/images/styles/box.excalidraw.svg"
+</div>

docs/guide/widgets.md

@@ -1 +1,9 @@
 # Widgets
+
+- What is a widget
+- Defining a basic widget
+  - Base classes Widget or Static
+  - Text widgets
+  - Rich renderable widgets
+- Complete widget
+- Render line widget API

mkdocs.yml

@@ -8,8 +8,8 @@ nav:
   - Guide:
     - "guide/devtools.md"
     - "guide/app.md"
-    - "guide/CSS.md"
     - "guide/styles.md"
+    - "guide/CSS.md"
     - "guide/layout.md"
     - "guide/events.md"
     - "guide/actions.md"