Update example language

Author: bvaughn

.prettierignore

@@ -3,4 +3,6 @@
 /generated
 /public
 
+src/routes/examples/*.html
+
 integrations/next/.next

public/generated/examples/GroupAndPanelElements.json

@@ -1,3 +1,3 @@
 {
-  "html": "<div><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">data-group</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"</span><span class=\"tok-propertyName\">overflow</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-atom\">visible</span><span class=\"tok-string\">\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">  </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">data-panel</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"</span><span class=\"tok-propertyName\">overflow</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-atom\">visible</span><span class=\"tok-string\">\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">    </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"</span><span class=\"tok-propertyName\">overflow</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-atom\">auto</span><span class=\"tok-string\">\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">      </span><span class=\"tok-comment\">&#60;!-- Panel content --&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">    </span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">  </span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span></div>"
+  "html": "<div><span class=\"tok-comment\">&#60;!-- &#9883;️ Group --&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">data-group</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"</span><span class=\"tok-propertyName\">overflow</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-atom\">visible</span><span class=\"tok-string\">\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div>&nbsp;</div>\n<div><span class=\"\">  </span><span class=\"tok-comment\">&#60;!-- &#9883;️ Panel --&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">  </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">data-panel</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"</span><span class=\"tok-propertyName\">overflow</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-atom\">visible</span><span class=\"tok-string\">\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">    </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"</span><span class=\"tok-propertyName\">overflow</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-atom\">auto</span><span class=\"tok-string\">\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div>&nbsp;</div>\n<div><span class=\"\">      </span><span class=\"tok-comment\">&#60;!-- &#9883;️ Your code --&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">    </span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">  </span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span></div>"
 }

src/routes/OverflowRoute.tsx

@@ -19,16 +19,17 @@ export default function OverflowRoute() {
     <Box direction="column" gap={4}>
       <Header section="Examples" title="Overflow" />
       <div>
-        Groups and panels use the{" "}
+        Groups and Panels set the{" "}
         <ExternalLink href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/overflow">
           overflow
         </ExternalLink>{" "}
-        styles shown below.
+        styles shown below:
       </div>
       <Code html={GroupAndPanelElementsHTML} />
       <div>
-        This combination of styles allows overflow content to be scrolled while
-        also supporting visual styles like shadows.
+        This combination of styles allows overflow content to be scrollable
+        while also allowing Panels to have visual styles like shadows or
+        outlines.
       </div>
       <div>
         For example, this group of panels demonstrate drop-shadow style.

src/routes/examples/GroupAndPanelElements.html

@@ -1,7 +1,11 @@
+<!-- ⚛️ Group -->
 <div data-group style="overflow: visible">
+
+  <!-- ⚛️ Panel -->
   <div data-panel style="overflow: visible">
     <div style="overflow: auto">
-      <!-- Panel content -->
+
+      <!-- ⚛️ Your code -->
     </div>
   </div>
 </div>