docs: added more to the new quick guide section

Author: hperrin

packages/site/src/routes/+layout.svelte

@@ -241,8 +241,8 @@
       separator: true,
     },
     {
-      name: 'Introduction',
-      route: '/demo/introduction/',
+      name: 'Quick Guide',
+      route: '/demo/quick-guide/',
       indent: 0,
     },
     {

packages/site/src/routes/demo/introduction/+page.svelte renamed to packages/site/src/routes/demo/quick-guide/+page.svelte

@@ -1,17 +1,17 @@
 <svelte:head>
-  <title>Introduction - SMUI</title>
+  <title>Quick Guide - SMUI</title>
 </svelte:head>
 
 <section>
-  <h2>Introduction</h2>
+  <h2>Quick Guide</h2>
   <p>
     Some helpful guides for common use patterns in SMUI that are different than
     standard Svelte.
   </p>
 
   <Demo
     component={TargetingClasses}
-    file="introduction/_TargetingClasses.svelte"
+    file="quick-guide/_TargetingClasses.svelte"
   >
     Targeting Classes
     <svelte:fragment slot="subtitle">
@@ -22,19 +22,31 @@
 
   <Demo
     component={EventsAndModifiers}
-    file="introduction/_EventsAndModifiers.svelte"
+    file="quick-guide/_EventsAndModifiers.svelte"
   >
     Events and Modifiers
     <svelte:fragment slot="subtitle">
       SMUI supports listening to <strong>all</strong> events. You can also use modifiers
       with the "$" syntax.
     </svelte:fragment>
   </Demo>
+
+  <Demo
+    component={InnerElementProps}
+    file="quick-guide/_InnerElementProps.svelte"
+  >
+    Inner element props
+    <svelte:fragment slot="subtitle">
+      Many SMUI components have inner elements that can take props with a
+      prefix, like "input$" or "icon$".
+    </svelte:fragment>
+  </Demo>
 </section>
 
 <script lang="ts">
   import Demo from '$lib/Demo.svelte';
 
-  import TargetingClasses from '../introduction/_TargetingClasses.svelte';
-  import EventsAndModifiers from '../introduction/_EventsAndModifiers.svelte';
+  import TargetingClasses from './_TargetingClasses.svelte';
+  import EventsAndModifiers from './_EventsAndModifiers.svelte';
+  import InnerElementProps from './_InnerElementProps.svelte';
 </script>

packages/site/src/routes/demo/introduction/_EventsAndModifiers.svelte renamed to packages/site/src/routes/demo/quick-guide/_EventsAndModifiers.svelte

@@ -4,6 +4,7 @@
     on:mousedown={addEvent}
     on:mouseup={addEvent}
     on:mouseover={addEvent}
+    on:mousemove={addEvent}
     on:mouseout={addEvent}
     on:keypress={addEvent}
     on:keydown={addEvent}
@@ -12,14 +13,18 @@
     on:blur={addEvent}
     on:animationstart={addEvent}
     on:animationend={addEvent}
+    on:touchstart={addEvent}
+    on:touchend={addEvent}
+    on:touchmove={addEvent}
+    on:touchcancel={addEvent}
   >
     <Label>This Button has Event Listeners</Label>
   </Button>
 </div>
 
 <div class="event-output" bind:this={eventOutput}>
   {#each events as event}
-    <p>Caught {event.type}</p>
+    <p>Caught {event}</p>
   {:else}
     <p>No events yet.</p>
   {/each}
@@ -82,11 +87,22 @@
 
   let eventOutput: HTMLDivElement;
   let eventPhaseOutput: HTMLDivElement;
-  let events: Event[] = [];
+  let events: string[] = [];
   let eventPhases: [Event, string][] = [];
 
   function addEvent(event: Event) {
-    events.push(event);
+    if (
+      events.length &&
+      (events[events.length - 1] === event.type ||
+        events[events.length - 1].startsWith(event.type))
+    ) {
+      const current = parseInt(events[events.length - 1].replace(/\D/g, ''));
+      events[events.length - 1] = `${event.type} ×${
+        isNaN(current) ? 2 : current + 1
+      }`;
+    } else {
+      events.push(event.type);
+    }
     events = events;
     requestAnimationFrame(() => {
       eventOutput.scrollTop = eventOutput.scrollHeight;

packages/site/src/routes/demo/quick-guide/_InnerElementProps.svelte

@@ -0,0 +1,21 @@
+<div class="margins">
+  <Textfield
+    style="width: 100%; max-width: 300px;"
+    helperLine$style="width: 100%; max-width: 300px;"
+    input$autocomplete="name"
+    input$name="name"
+    bind:value
+    label="Name"
+  >
+    <HelperText slot="helper"
+      >This field should autocomplete with your name.</HelperText
+    >
+  </Textfield>
+</div>
+
+<script lang="ts">
+  import Textfield from '@smui/textfield';
+  import HelperText from '@smui/textfield/helper-text';
+
+  let value = '';
+</script>