docs(expandable-tile): add "With interactive content" example (#1465)

* style(docs): apply `code-01` styles to component api type, default value

* docs(expandable-tile): add "With interactive content" example (#1464)

* docs(overflow-menu): do not open flipped example by default

docs/src/components/ComponentApi.svelte

@@ -95,16 +95,18 @@
                       {type}
                     </OutboundLink>
                   {:else if type in typeMap}
-                    <code>{typeMap[type]}</code>
+                    <code class="code-01">{typeMap[type]}</code>
                   {:else if type.startsWith("(")}
-                    <code>{type}</code>
+                    <code class="code-01">{type}</code>
                   {:else}
                     <InlineSnippet code="{type}" />
                   {/if}
                 </div>
               {/each}
             </StructuredListCell>
-            <StructuredListCell><code>{prop.value}</code></StructuredListCell>
+            <StructuredListCell
+              ><code class="code-01">{prop.value}</code></StructuredListCell
+            >
             <StructuredListCell>
               {#if prop.description}
                 {#each prop.description.split("\n") as line}

docs/src/global.css

@@ -177,6 +177,13 @@ html[theme="g90"] .code-override {
   overflow-y: auto;
 }
 
+.code-01 {
+  font-size: var(--cds-code-01-font-size);
+  font-weight: var(--cds-code-01-font-weight);
+  letter-spacing: var(--cds-code-01-letter-spacing);
+  line-height: var(--cds-code-01-line-height);
+}
+
 .body-short-01 {
   font-size: var(--cds-body-short-01-font-size);
   font-weight: var(--cds-body-short-01-font-weight);

docs/src/pages/_layout.svelte

@@ -50,8 +50,9 @@
     </svelte:fragment>
 
     <span slot="platform" class="platform-name">
-      Carbon Components Svelte
-      <code>v{process.env.VERSION || ""}</code>
+      Carbon Components Svelte &nbsp;<code class="code-01"
+        >v{process.env.VERSION || ""}</code
+      >
     </span>
 
     <HeaderUtilities>
@@ -135,15 +136,6 @@
     align-items: baseline;
   }
 
-  .platform-name code {
-    margin-left: var(--cds-spacing-02);
-    font-size: var(--cds-code-01-font-size);
-    font-weight: var(--cds-code-01-font-weight);
-    letter-spacing: var(--cds-code-01-letter-spacing);
-    line-height: var(--cds-code-01-line-height);
-    color: #c6c6c6;
-  }
-
   @media (max-width: 580px) {
     .platform-name code {
       display: none;

docs/src/pages/components/ExpandableTile.svx

@@ -3,7 +3,7 @@ source: Tile/ExpandableTile.svelte
 ---
 
 <script>
-  import { ExpandableTile } from "carbon-components-svelte";
+  import { ExpandableTile, Button } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
@@ -33,4 +33,24 @@ source: Tile/ExpandableTile.svelte
 <ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more">
   <div slot="above" style="height: 10rem">Above the fold content here</div>
   <div slot="below" style="height: 10rem">Below the fold content here</div>
-</ExpandableTile>
+</ExpandableTile>
+
+## With interactive content
+
+For tiles containing interactive content, use `stopPropagation` to prevent the tile from toggling.
+
+<ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more">
+  <div slot="above" style="height: 10rem">
+    <a href="/" on:click|preventDefault|stopPropagation={() => console.log("Hello world")}>
+      Native element
+    </a>
+    <br /><br />
+    <Button on:click={e => {
+      e.stopPropagation();
+      console.log("Hello world");
+    }}>
+      Svelte component
+    </Button>
+  </div>
+  <div slot="below" style="height: 10rem">Below the fold content here</div>
+</ExpandableTile>

docs/src/pages/components/OverflowMenu.svx

@@ -18,7 +18,9 @@ components: ["OverflowMenu", "OverflowMenuItem"]
 
 ## Flipped
 
-<OverflowMenu open flipped>
+Set `flipped` to `true` for the menu to be positioned to the left of the button.
+
+<OverflowMenu flipped>
   <OverflowMenuItem text="Manage credentials" />
   <OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
   <OverflowMenuItem danger text="Delete service" />