From 3f3093d1566d38339fa5973f812aaa57e9e44962 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Thu, 15 Oct 2020 17:15:27 -0700
Subject: [PATCH 1/9] docs: set min height on .bx--content

---
 docs/src/pages/_layout.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/src/pages/_layout.svelte b/docs/src/pages/_layout.svelte
index 4aa38814..854942f8 100644
--- a/docs/src/pages/_layout.svelte
+++ b/docs/src/pages/_layout.svelte
@@ -112,6 +112,7 @@
 
   main.bx--content {
     background: none;
+    min-height: calc(100vh - 3rem - 3rem);
   }
 
   @media (max-width: 1056px) {

From b0dbcb8f0686b2e901ddee7f7e3597e2f66b0095 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Thu, 15 Oct 2020 17:21:46 -0700
Subject: [PATCH 2/9] docs: use AspectRatio from library

---
 docs/src/components/AspectRatio.svelte | 16 ----------------
 docs/src/components/TileCard.svelte    |  3 +--
 2 files changed, 1 insertion(+), 18 deletions(-)
 delete mode 100644 docs/src/components/AspectRatio.svelte

diff --git a/docs/src/components/AspectRatio.svelte b/docs/src/components/AspectRatio.svelte
deleted file mode 100644
index 592ed2f4..00000000
--- a/docs/src/components/AspectRatio.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script>
-  /**
-   * @type {"2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2"}
-   */
-  export let ratio = "2x1";
-</script>
-
-<div
-  {...$$restProps}
-  class:bx--aspect-ratio="{true}"
-  class="bx--aspect-ratio--{ratio} {$$restProps.class}"
->
-  <div class:bx--aspect-ratio--object="{true}">
-    <slot />
-  </div>
-</div>
diff --git a/docs/src/components/TileCard.svelte b/docs/src/components/TileCard.svelte
index 5cf099ef..eadaae87 100644
--- a/docs/src/components/TileCard.svelte
+++ b/docs/src/components/TileCard.svelte
@@ -5,8 +5,7 @@
   export let borderRight = false;
   export let borderBottom = false;
 
-  import { ClickableTile, Tile } from "carbon-components-svelte";
-  import AspectRatio from "./AspectRatio.svelte";
+  import { AspectRatio, ClickableTile, Tile } from "carbon-components-svelte";
   import LogoGithub32 from "carbon-icons-svelte/lib/LogoGithub32";
   import Launch20 from "carbon-icons-svelte/lib/Launch20";
 

From a02be58ac82e1a2ea0e24ca46037c242513f3495 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Thu, 15 Oct 2020 17:27:06 -0700
Subject: [PATCH 3/9] docs(framed): add min height, padding to framed
 components

---
 docs/src/pages/framed/_reset.svelte | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/docs/src/pages/framed/_reset.svelte b/docs/src/pages/framed/_reset.svelte
index fa10613a..8366e4ea 100644
--- a/docs/src/pages/framed/_reset.svelte
+++ b/docs/src/pages/framed/_reset.svelte
@@ -4,4 +4,12 @@
   $: document.documentElement.setAttribute("theme", currentTheme);
 </script>
 
+<style>
+  :global(body) {
+    min-height: 100vh;
+    width: 100%;
+    padding: var(--cds-spacing-06) var(--cds-spacing-05);
+  }
+</style>
+
 <slot />

From 7345cc1b839576ac827fbd7c9efa5903b9ad4842 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Thu, 15 Oct 2020 17:27:27 -0700
Subject: [PATCH 4/9] docs(preview): move inline loader above preview

---
 docs/src/components/Preview.svelte | 25 +++++++------------------
 1 file changed, 7 insertions(+), 18 deletions(-)

diff --git a/docs/src/components/Preview.svelte b/docs/src/components/Preview.svelte
index acbef287..c412b82d 100644
--- a/docs/src/components/Preview.svelte
+++ b/docs/src/components/Preview.svelte
@@ -107,11 +107,12 @@
   }
 
   .preview-viewer.framed {
-    min-height: 22rem;
+    min-height: 20rem;
   }
 
   .framed-header {
     display: flex;
+    align-items: center;
   }
 
   iframe {
@@ -121,23 +122,16 @@
     width: 100%;
     height: 100%;
   }
-
-  .loader {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
 </style>
 
 <div class="preview">
   {#if framed}
     <div class="framed-header">
-      <div></div>
+      <div style="margin-left: var(--cds-spacing-03)">
+        {#if framed && !success}
+          <InlineLoading description="Loading..." />
+        {/if}
+      </div>
       <Button
         style="margin-left: auto;"
         kind="ghost"
@@ -151,11 +145,6 @@
     </div>
   {/if}
   <div class="preview-viewer" class:framed>
-    {#if framed && !success}
-      <div class="loader">
-        <InlineLoading />
-      </div>
-    {/if}
     {#if framed}
       <iframe
         on:load="{() => {

From e94227082bf7bd36f3a452e1d2d53ccd50f516e6 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Thu, 15 Oct 2020 17:33:53 -0700
Subject: [PATCH 5/9] docs: add npm install command

---
 docs/src/pages/index.svelte | 35 +++++++++++++++++++++++++++++------
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/docs/src/pages/index.svelte b/docs/src/pages/index.svelte
index 2c0fa946..71600532 100644
--- a/docs/src/pages/index.svelte
+++ b/docs/src/pages/index.svelte
@@ -6,6 +6,9 @@
     Column,
     CodeSnippet,
     Link,
+    Tabs,
+    Tab,
+    TabContent,
   } from "carbon-components-svelte";
   import TileCard from "../components/TileCard.svelte";
   import { metatags } from "@sveltech/routify";
@@ -16,6 +19,7 @@
     "The Svelte implementation of the Carbon Design System featuring UI components, icons, pictograms, and charts.";
 
   const installYarn = "yarn add -D carbon-components-svelte";
+  const installNpm = "npm i -D carbon-components-svelte";
 </script>
 
 <Content>
@@ -51,12 +55,31 @@
     </Row>
     <Row noGutter style="margin-bottom: var(--cds-layout-02)">
       <Column>
-        <CodeSnippet
-          code="{installYarn}"
-          on:click="{() => {
-            copy(installYarn);
-          }}"
-        />
+        <Tabs>
+          <Tab label="Yarn" />
+          <Tab label="npm" />
+          <div
+            slot="content"
+            style="margin-left: calc(-1 * var(--cds-spacing-05)); margin-right: calc(-1 * var(--cds-spacing-05));"
+          >
+            <TabContent>
+              <CodeSnippet
+                code="{installYarn}"
+                on:click="{() => {
+                  copy(installYarn);
+                }}"
+              />
+            </TabContent>
+            <TabContent>
+              <CodeSnippet
+                code="{installNpm}"
+                on:click="{() => {
+                  copy(installNpm);
+                }}"
+              />
+            </TabContent>
+          </div>
+        </Tabs>
       </Column>
     </Row>
     <Row>

From 7c865a6e1f838187e6265ffd0aa493ea95040884 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Thu, 15 Oct 2020 17:53:30 -0700
Subject: [PATCH 6/9] docs(routify): output single JS bundle

---
 docs/src/pages/_layout.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/src/pages/_layout.svelte b/docs/src/pages/_layout.svelte
index 854942f8..b12b13a8 100644
--- a/docs/src/pages/_layout.svelte
+++ b/docs/src/pages/_layout.svelte
@@ -159,6 +159,7 @@
   }
 </style>
 
+<!-- routify:options bundle=true -->
 <svelte:window bind:innerWidth />
 
 <Theme persist>

From 170d9993f476255ca22833cfb7020c5ecb2a21cc Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Thu, 15 Oct 2020 17:59:11 -0700
Subject: [PATCH 7/9] docs: support theme setting through window search params

---
 docs/src/layouts/ComponentLayout.svelte | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/docs/src/layouts/ComponentLayout.svelte b/docs/src/layouts/ComponentLayout.svelte
index 74a67da3..96b75171 100644
--- a/docs/src/layouts/ComponentLayout.svelte
+++ b/docs/src/layouts/ComponentLayout.svelte
@@ -10,6 +10,7 @@
   } from "carbon-components-svelte";
   import Code16 from "carbon-icons-svelte/lib/Code16";
   import { page, metatags } from "@sveltech/routify";
+  import { onMount } from "svelte";
   import { theme } from "../store";
 
   export let component = $page.title;
@@ -17,6 +18,14 @@
 
   metatags.title = $page.title;
 
+  onMount(() => {
+    const currentTheme = window.location.search.split("?theme=")[1];
+
+    if (["white", "g10", "g90", "g100"].includes(currentTheme)) {
+      theme.set(currentTheme);
+    }
+  });
+
   // TODO: [refactor] read from package.json value
   $: sourceCode = `https://github.com/IBM/carbon-components-svelte/tree/master/src/${
     source || `${$page.title}/${$page.title}.svelte`

From 9956cd5e8a14b70408ecd4067cb76ff7ddbcc95a Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Thu, 15 Oct 2020 18:24:17 -0700
Subject: [PATCH 8/9] docs: fix leaky body styles for framed content

---
 docs/src/pages/framed/_reset.svelte | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/docs/src/pages/framed/_reset.svelte b/docs/src/pages/framed/_reset.svelte
index 8366e4ea..19716f73 100644
--- a/docs/src/pages/framed/_reset.svelte
+++ b/docs/src/pages/framed/_reset.svelte
@@ -1,11 +1,20 @@
 <script>
+  import { onMount } from "svelte";
+
+  onMount(() => {
+    document.body.classList.add("framed");
+    return () => {
+      document.body.classList.remove("framed");
+    };
+  });
+
   // TODO: [refactor] parse search parameters more reliably
   $: currentTheme = window.location.search.split("?theme=")[1];
   $: document.documentElement.setAttribute("theme", currentTheme);
 </script>
 
 <style>
-  :global(body) {
+  :global(body.framed) {
     min-height: 100vh;
     width: 100%;
     padding: var(--cds-spacing-06) var(--cds-spacing-05);

From bf8b45b96aab7a67231b23a378beb891d2d7d213 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Thu, 15 Oct 2020 18:32:52 -0700
Subject: [PATCH 9/9] docs(button-set): use correct grammar for "Log in"

---
 docs/src/pages/components/ButtonSet.svx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/docs/src/pages/components/ButtonSet.svx b/docs/src/pages/components/ButtonSet.svx
index 7494cfc5..702d154c 100644
--- a/docs/src/pages/components/ButtonSet.svx
+++ b/docs/src/pages/components/ButtonSet.svx
@@ -4,6 +4,7 @@ source: Button/ButtonSet.svelte
 
 <script>
   import { Button, ButtonSet } from "carbon-components-svelte";
+  import Login16 from "carbon-icons-svelte/lib/Login16";
   import Preview from "../../components/Preview.svelte";
 </script>
 
@@ -17,6 +18,6 @@ source: Button/ButtonSet.svelte
 ### Stacked
 
 <ButtonSet stacked>
-  <Button>Login</Button>
+  <Button icon={Login16}>Log in</Button>
   <Button kind="ghost">Sign up</Button>
 </ButtonSet>
\ No newline at end of file