Add $slot widget examples and document the $depth parameter (#7446)

* Added $slot widget examples and documented the $depth parameter

* Fixed quotes and added named parameter

editions/tw5.com/tiddlers/widgets/FillWidget.tid

@@ -1,6 +1,6 @@
 caption: fill
 created: 20220909111836951
-modified: 20230419103154328
+modified: 20230511123456782
 tags: Widgets
 title: FillWidget
 type: text/vnd.tiddlywiki
@@ -9,7 +9,7 @@ type: text/vnd.tiddlywiki
 
 <<.from-version "5.3.0">> The <<.wlink FillWidget>> widget is used within a <<.wlink TranscludeWidget>> widget to specify the content that should be copied to the named "slot". Slots are defined by the <<.wlink SlotWidget>> widget within the transcluded content.
 
-See the <<.wlink TranscludeWidget>> widget for details.
+See the <<.wlink TranscludeWidget>> widget for details and an example. More examples can be found in the <<.wlink SlotWidget>> widget documentation.
 
 ! Attributes
 

editions/tw5.com/tiddlers/widgets/SlotWidget.tid

@@ -1,6 +1,6 @@
 caption: slot
 created: 20220909111836951
-modified: 20230419103154329
+modified: 20230511123922283
 tags: Widgets
 title: SlotWidget
 type: text/vnd.tiddlywiki
@@ -17,3 +17,59 @@ The content of the <<.wlink SlotWidget>> widget is used as a fallback for the sl
 
 |!Attribute |!Description |
 |$name |The name of the slot being defined |
+|$depth |Optional number indicating how deep the <<.wlink SlotWidget>> widget is compared to the matching <<.wlink FillWidget>> widget as measured by the number of nested transclude widgets (defaults to 1) |
+
+! Examples
+
+!! Quoted content
+When content contains quotes, passing it through attributes and parameters can be challenging. However, passing the content using the <<.wlink FillWidget>> widget content eliminates the need to wrap it in quotes, making the process easier.
+
+<$let bold_slot='<b>
+<$slot $name="body"/>
+</b>
+'>
+
+If a variable named <<.var bold_slot>> contains the following <<.wlink SlotWidget>> definition:
+<$codeblock code={{{[[bold_slot]getvariable[]]}}}/>
+
+then the slot can be filled using this variable transclusion:
+
+<<wikitext-example-without-html src:'<$transclude $variable=bold_slot>
+<$fill $name=body>
+
+"""
+some text
+using [[Hard Linebreaks in WikiText]]
+syntax
+"""
+</$fill>
+</$transclude>
+'>>
+</$let>
+
+!! Depth
+
+<$let table_slot="|!depth|!slot1|!slot2|
+|1|<$slot $name=slot1/>|<$slot $name=slot2/>|
+|2|<$slot $name=slot1 $depth=2>missing</$slot>|<$slot $name=slot2 $depth=2>missing</$slot>|
+"
+table_fill="""<$transclude $variable=table_slot  $mode=block>
+  <$fill $name=slot1>outer1</$fill>
+  <$fill $name=slot2>outer2
+    <$transclude $variable=table_slot $mode=block>
+      <$fill $name=slot1>inner1</$fill>
+      <$fill $name=slot2>inner2</$fill>
+    </$transclude>
+  </$fill>
+</$transclude>
+""">
+
+If a variable named <<.var table_slot>> contains the following <<.wlink SlotWidget>> definition:
+
+<$codeblock code={{{[[table_slot]getvariable[]]}}}/>
+
+then the slot values can be filled at different transclusion depths:
+
+<$transclude $variable="wikitext-example-without-html" src=<<table_fill>>/>
+
+The <<.var slot1>> slot is filled at both depths with a simple string (outer1 and outer2). For <<.var slot2>>, the outer instance is a simple string but the inner instance recursively transcludes the same <<.var table_slot>> variable again. The recursion ends at the third transclusion call since both "inner" slots are filled with simple strings.

editions/tw5.com/tiddlers/widgets/TranscludeWidget.tid

@@ -1,6 +1,6 @@
 caption: transclude
 created: 20130824142500000
-modified: 20230419103154329
+modified: 20230511022612458
 tags: Widgets
 title: TranscludeWidget
 type: text/vnd.tiddlywiki
@@ -145,7 +145,7 @@ The output will be equivalent to:
   </li>
 </ol>
 ```
-
+See <<.wlink SlotWidget>> for more examples.
 
 ! Missing Transclusion Targets