docs(palimpsest): add static side nav with components

palimpsest/src/App.svelte

@@ -1,37 +1,11 @@
 <script>
-  import ComponentLayout from './components/ComponentLayout.svelte';
-  import ComponentSearch from './containers/ComponentSearch.svelte';
-  import Header from './containers/Header.svelte';
-  import Logo from './assets/logo.png';
   import Router from 'svelte-spa-router';
+  import Component from './components/Component';
+  import Header from './components/Header.svelte';
+  import Home from './components/Home.svelte';
+  import SideNav from './components/SideNav.svelte';
 </script>
 
-<style>
-  nav {
-    position: fixed;
-    top: 2.5rem;
-    left: 0;
-    width: 14rem;
-    height: calc(100% - 2.5rem);
-    background-color: var(--cds-ui-01);
-  }
-
-  header {
-    margin-top: 2.5rem;
-    padding-left: 16rem;
-  }
-</style>
-
-<Router routes={{ '/c/:name': ComponentLayout }} />
-
 <Header />
-
-<nav>
-  <ComponentSearch />
-</nav>
-
-<header class="bx--grid">
-  <div class="bx--row">
-    <img src={Logo} alt="Logo" style="width: 4rem;" />
-  </div>
-</header>
+<SideNav />
+<Router routes={{ '/': Home, '/c': Component, '/c/*': Component }} />

palimpsest/src/components/Component/Component.svelte

@@ -0,0 +1,105 @@
+<script context="module">
+  import Accordion from '../carbon-components/Accordion';
+  import CodeSnippet from '../carbon-components/CodeSnippet';
+
+  export const components = {
+    Accordion,
+    CodeSnippet
+  };
+</script>
+
+<script>
+  import { afterUpdate, setContext } from 'svelte';
+  import { Tabs, Tab } from 'carbon-components-svelte';
+  import { push, location } from 'svelte-spa-router';
+  import Router from 'svelte-spa-router';
+  import ComponentTab from './ComponentTab.svelte';
+
+  const prefix = '/c';
+  const urls = [{ path: '' }, { path: '/API' }, { path: '/kitchen-sink' }];
+
+  let selected = 0;
+  let component = undefined;
+  let prevComponent = undefined;
+
+  setContext('Component', {
+    set: name => {
+      component = name;
+    }
+  });
+
+  afterUpdate(() => {
+    if (component !== prevComponent && prevComponent !== undefined) {
+      window.scrollTo(0, 0);
+    }
+
+    prevComponent = component;
+  });
+
+  $: baseUrl = component ? `#${prefix}/${component}` : $location;
+  $: {
+    switch (
+      $location
+        .split('/')
+        .pop()
+        .toLowerCase()
+    ) {
+      case 'api':
+        selected = 1;
+        break;
+      case 'kitchen-sink':
+        selected = 2;
+        break;
+      default:
+        selected = 0;
+        break;
+    }
+  }
+</script>
+
+<style>
+  main {
+    margin-top: 5.5rem;
+    padding-left: 12rem;
+    padding-bottom: 2.5rem;
+  }
+
+  h1 {
+    margin-bottom: 1.5rem;
+  }
+
+  .bx--grid {
+    max-width: 66rem;
+  }
+
+  :global(body) {
+    overflow-y: scroll;
+  }
+</style>
+
+<main>
+  <div class="bx--grid">
+    <header class="bx--row">
+      <div class="bx--col">
+        <h1>{component}</h1>
+      </div>
+    </header>
+    <div class="bx--row">
+      <div class="bx--col bx--no-gutter--left">
+        <Tabs
+          type="container"
+          bind:selected
+          on:change={({ detail }) => {
+            push(`${prefix}/${component}${urls[detail].path}`);
+          }}>
+          <Tab label="Preview" href={baseUrl} />
+          <Tab label="API" href={`${baseUrl}/API`} />
+          <Tab label="Kitchen Sink" href={`${baseUrl}/kitchen-sink`} />
+        </Tabs>
+      </div>
+    </div>
+  </div>
+  <section class="bx--grid">
+    <Router {prefix} routes={{ '/:name': ComponentTab, '/:name/:tab': ComponentTab }} />
+  </section>
+</main>

palimpsest/src/components/Component/ComponentAPI.svelte

@@ -0,0 +1,96 @@
+<script>
+  export let props = [];
+
+  import {
+    StructuredList,
+    StructuredListBody,
+    StructuredListHead,
+    StructuredListRow,
+    StructuredListCell,
+    Tag,
+    CodeSnippet
+  } from 'carbon-components-svelte';
+  import copy from 'clipboard-copy';
+
+  const propTypeColor = {
+    string: 'green',
+    number: 'blue',
+    boolean: 'purple'
+  };
+
+  function formatValue(value) {
+    return typeof value === 'string' ? `"${value}"` : value;
+  }
+</script>
+
+<style>
+  .bx--row {
+    margin-top: 1rem;
+  }
+
+  .values {
+    display: flex;
+  }
+
+  :global(.value) {
+    margin-right: 0.5rem;
+  }
+
+  :global(.value:not(:first-of-type)) {
+    margin-left: 0.5rem;
+  }
+
+  .separator {
+    color: var(--cds-text-03);
+  }
+</style>
+
+<div class="bx--row">
+  <StructuredList>
+    <StructuredListHead>
+      <StructuredListRow head>
+        <StructuredListCell head>Prop</StructuredListCell>
+        <StructuredListCell head>Type</StructuredListCell>
+        <StructuredListCell head>Value</StructuredListCell>
+        <StructuredListCell head>Description</StructuredListCell>
+      </StructuredListRow>
+    </StructuredListHead>
+    <StructuredListBody>
+      {#each props as prop, i (prop.name)}
+        <StructuredListRow>
+          <StructuredListCell noWrap>{prop.name}</StructuredListCell>
+          <StructuredListCell noWrap>
+            <Tag type={propTypeColor[prop.type]}>
+              <code>{prop.type}</code>
+            </Tag>
+          </StructuredListCell>
+          <StructuredListCell>
+            <div class="values">
+              {#each prop.value as value, j (value)}
+                <CodeSnippet
+                  class="value"
+                  type="inline"
+                  code={formatValue(value)}
+                  on:click={() => {
+                    copy(formatValue(value));
+                  }} />
+                {#if j < prop.value.length - 1}
+                  <span class="separator">|</span>
+                {/if}
+              {/each}
+            </div>
+            {#if prop.defaultValue}
+              <div style="margin-top: .75rem">
+                <strong>Default:</strong>
+                <code>{formatValue(prop.defaultValue.value)}</code>
+              </div>
+            {/if}
+          </StructuredListCell>
+          <StructuredListCell>
+            {@html prop.description}
+          </StructuredListCell>
+        </StructuredListRow>
+      {/each}
+    </StructuredListBody>
+  </StructuredList>
+</div>

palimpsest/src/components/Component/ComponentPreview.svelte

@@ -0,0 +1,109 @@
+<script>
+  export let minHeight = '11.5rem';
+  export let light = false;
+  export let code = '';
+
+  import copy from 'clipboard-copy';
+  import { CodeSnippet } from 'carbon-components-svelte';
+  import { theme } from '../../store';
+
+  $: code = code.trim().replace(/< \//g, '</');
+  $: light = light && ['white', 'g10'].includes($theme);
+</script>
+
+<style>
+  .preview {
+    position: relative;
+    z-index: 1;
+    border: 1px solid var(--cds-ui-03);
+    margin-bottom: 2rem;
+  }
+
+  .preview.light {
+    background-color: var(--cds-ui-01);
+  }
+
+  .grid {
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .grid--row {
+    display: flex;
+    height: 100%;
+  }
+
+  .grid--col:not(:last-of-type) {
+    border-right: 1px dashed var(--cds-ui-03);
+  }
+
+  .grid--col.light {
+    background-color: var(--cds-ui-01);
+  }
+
+  .grid--col--outer {
+    display: flex;
+    height: 100%;
+  }
+
+  .grid--col--inner {
+    flex: 1;
+    background-color: var(--cds-ui-background);
+  }
+
+  .grid--col--inner {
+    border-left: 1px dashed var(--cds-ui-03);
+    border-right: 1px dashed var(--cds-ui-03);
+  }
+
+  .grid--col--inner.light {
+    background-color: var(--cds-ui-01);
+  }
+
+  h3 {
+    margin-bottom: 1.5rem;
+  }
+
+  .wrapper {
+    display: inline-flex;
+    flex: 1;
+    width: 100%;
+    min-height: 9rem;
+    padding: 2rem 0 2rem 1rem;
+  }
+</style>
+
+<div class="preview bx--row" class:light>
+  <div class="grid">
+    <div class="grid--row">
+      {#each Array.from({ length: 8 }, (_, i) => i) as item, i (item)}
+        <div class="grid--col bx--col" class:light>
+          <div class="grid--col--outer">
+            <div class="grid--col--inner" class:light />
+          </div>
+        </div>
+      {/each}
+    </div>
+  </div>
+  <div class="bx--col bx--no-gutter--left">
+    <div class="wrapper" style={`min-height: ${minHeight}`}>
+      <slot />
+    </div>
+  </div>
+</div>
+
+<div class="bx--row">
+  <div class="bx--col-lg-4">
+    <h3>Props</h3>
+    <slot name="props" />
+  </div>
+  <div class="bx--col">
+    <h3>Code</h3>
+    <CodeSnippet type="multi" on:click={() => copy(code)} {code} />
+    <slot name="code" />
+  </div>
+</div>

palimpsest/src/components/Component/ComponentTab.svelte

@@ -0,0 +1,21 @@
+<script>
+  export let params = {};
+
+  import { getContext } from 'svelte';
+  import { components } from './Component.svelte';
+
+  const { set } = getContext('Component');
+
+  const paramMap = {
+    Preview: 'Preview',
+    API: 'API',
+    'kitchen-sink': 'KitchenSink'
+  };
+
+  $: tab = paramMap[params.tab || 'Preview'];
+  $: {
+    set(params.name);
+  }
+</script>
+
+<svelte:component this={components[params.name][tab]} />

palimpsest/src/components/Component/index.js

@@ -0,0 +1,5 @@
+import Component from './Component.svelte';
+
+export default Component;
+export { default as ComponentPreview } from './ComponentPreview.svelte';
+export { default as ComponentAPI } from './ComponentAPI.svelte';

palimpsest/src/components/ComponentLayout.svelte

@@ -1,49 +0,0 @@
-<script>
-  export let params = {};
-
-  import { Tabs, Tab } from 'carbon-components-svelte';
-  import CodeSnippet from './carbon-components/CodeSnippet.svelte';
-
-  const registry = {
-    CodeSnippet
-  };
-
-  let selected = 0;
-</script>
-
-<style>
-  main {
-    margin-top: 2.5rem;
-    padding-top: 3rem;
-  }
-
-  header {
-    border-bottom: 1px solid var(--cds-ui-03);
-  }
-
-  h1 {
-    margin-bottom: 1.5rem;
-  }
-
-  .bx--grid {
-    padding-left: 16rem;
-  }
-</style>
-
-<main>
-  <div class="bx--grid">
-    <header class="bx--row">
-      <div class="bx--col">
-        <h1>{params.name}</h1>
-      </div>
-      <Tabs type="container" bind:selected>
-        <Tab label="Overview" />
-        <Tab label="API" />
-        <Tab label="Kitchen Sink" />
-      </Tabs>
-    </header>
-  </div>
-  <section class="bx--grid">
-    <svelte:component this={registry[params.name]} {selected} />
-  </section>
-</main>

palimpsest/src/components/Header.svelte

@@ -1,11 +1,12 @@
 <script>
-  import { Link } from 'carbon-components-svelte';
+  import { link } from 'svelte-spa-router';
   import ThemePicker from '../components/ThemePicker.svelte';
 </script>
 
 <style>
   header {
     position: fixed;
+    z-index: 9;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -28,6 +29,11 @@
     color: var(--cds-text-01);
   }
 
+  .bx--link:hover {
+    color: var(--cds-text-01);
+    text-decoration: none;
+  }
+
   .version {
     font-size: 0.75rem;
     color: var(--cds-text-02);
@@ -38,12 +44,11 @@
 
 <header>
   <nav>
-    <a class="bx--link" href="/">
+    <a class="bx--link" href="/" use:link>
       Carbon Components
       <strong>Svelte</strong>
     </a>
     <span class="version">v0.2.1</span>
-    <Link href="https://github.com/IBM/carbon-components-svelte">GitHub</Link>
   </nav>
   <div>
     <ThemePicker />

palimpsest/src/components/Home.svelte

@@ -0,0 +1,53 @@
+<script>
+  import Logo from '../assets/logo.png';
+</script>
+
+<style>
+  main {
+    margin-top: 5.5rem;
+    padding-left: 12rem;
+    padding-bottom: 2.5rem;
+  }
+
+  .bx--grid {
+    max-width: 66rem;
+  }
+
+  .logo {
+    max-width: 4.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  h1 {
+    margin-bottom: 2rem;
+  }
+
+  h1 span {
+    display: block;
+  }
+</style>
+
+<main>
+  <div class="bx--grid">
+    <div class="bx--row">
+      <div class="bx--col">
+        <img src={Logo} alt="Logo" class="logo" />
+        <h1>
+          <span>
+            <strong>Carbon</strong>
+          </span>
+          <span>
+            <strong>Components</strong>
+          </span>
+          <span>
+            <strong>Svelte</strong>
+          </span>
+        </h1>
+        <h3>The Carbon Design System implemented in Svelte</h3>
+      </div>
+    </div>
+    <div class="bx--row">
+      <div class="bx--col">1</div>
+    </div>
+  </div>
+</main>

palimpsest/src/components/SideNav.svelte

@@ -4,7 +4,7 @@
   import Fuse from 'fuse.js';
   import components from '../data/component-registry';
 
-  const fuse = new Fuse(components, { shouldSort: false, keys: ['name'] });
+  const fuse = new Fuse(components, { shouldSort: false, threshold: 0.33, keys: ['name'] });
 
   let value = '';
 
@@ -12,6 +12,16 @@
 </script>
 
 <style>
+  nav {
+    position: fixed;
+    top: 2.5rem;
+    left: 0;
+    width: 12rem;
+    height: calc(100% - 2.5rem);
+    background-color: var(--cds-ui-01);
+    overflow-y: scroll;
+  }
+
   ul {
     padding: 0.5rem 0;
   }
@@ -54,13 +64,19 @@
   }
 </style>
 
-<Search small id="search-components" labelText="Components" bind:value />
-<ul>
+<nav>
+  <Search small id="search-components" labelText="Components" bind:value />
+  <ul>
     {#each results as { name }, i (name)}
       <li>
-      <a class="bx--link" class:current={$location === `/c/${name}`} href={`/c/${name}`} use:link>
+        <a
+          class="bx--link"
+          class:current={$location.includes(`/c/${name}`)}
+          href={`/c/${name}`}
+          use:link>
           {name}
         </a>
       </li>
     {/each}
-</ul>
+  </ul>
+</nav>

palimpsest/src/components/ThemePicker.svelte

@@ -1,16 +1,18 @@
 <script>
   import { Select, SelectItem } from 'carbon-components-svelte';
+  import { theme } from '../store';
 
-  let selected = 'g100';
+  let selected = 'g10';
 
   $: {
+    theme.set(selected);
     document.documentElement.setAttribute('carbon-theme', selected);
   }
 </script>
 
 <Select inline labelText="Theme" bind:selected>
-  <SelectItem value="white" text="White (light)" />
-  <SelectItem value="g10" text="Gray 10 (light)" />
-  <SelectItem value="g90" text="Gray 90 (dark)" />
-  <SelectItem value="g100" text="Gray 100 (dark)" />
+  <SelectItem value="white" text="White" />
+  <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g90" text="Gray 90" />
+  <SelectItem value="g100" text="Gray 100" />
 </Select>

palimpsest/src/components/carbon-components/Accordion/API.svelte

@@ -0,0 +1,40 @@
+<script>
+  import { ComponentAPI } from '../../Component';
+
+  const props = [
+    {
+      name: 'type',
+      type: 'string',
+      required: true,
+      value: ['inline', 'single', 'multi'],
+      defaultValue: { value: 'single' },
+      description: `
+      <div>
+        <strong>Inline</strong> An inline <code>CodeSnippet</code> contains
+        </div>
+      `
+    },
+    {
+      name: 'light',
+      type: 'boolean',
+      required: false,
+      value: [],
+      defaultValue: { value: false },
+      description: `
+        <div>Light variant</div>
+      `
+    },
+    {
+      name: 'code',
+      type: 'string',
+      required: true,
+      value: [],
+      defaultValue: { value: undefined },
+      description: `
+        <div>Light variant</div>
+      `
+    }
+  ];
+</script>
+
+<ComponentAPI {props} />

palimpsest/src/components/carbon-components/Accordion/Preview.svelte

@@ -0,0 +1,61 @@
+<script>
+  import {
+    Accordion,
+    AccordionItem,
+    ToggleSmall,
+    NumberInput,
+    FormGroup
+  } from 'carbon-components-svelte';
+  import { ComponentPreview } from '../../Component';
+
+  $: items = [1, 2, 3, 4].map(id => ({ id, open: false }));
+
+  $: props = {
+    count: 4,
+    open: false,
+    skeleton: false
+  };
+
+  $: if (props.skeleton) {
+    items = items.map(_ => ({ ..._, open: false }));
+  }
+
+  $: code = `
+<script>
+  import { Accordion, AccordionItem } from 'carbon-components-svelte';
+< /script>
+
+<Accordion${props.skeleton ? ' skeleton' : ''}${props.skeleton ? ` count={${props.count}}` : ''}${
+    props.open ? ` open` : ''
+  }>
+${items
+  .map(item => {
+    return `  <AccordionItem title="Item ${item.id}"${item.open ? ' open' : ''}>Item ${
+      item.id
+    } content</AccordionItem>`;
+  })
+  .join('\n')}
+</Accordion>
+  `;
+</script>
+
+<ComponentPreview {code} minHeight="16rem">
+  <Accordion {...props}>
+    {#each items as { id }, i (id)}
+      <AccordionItem title={`Item ${id}`} bind:open={items[i].open}>
+        Item {id} content
+      </AccordionItem>
+    {/each}
+  </Accordion>
+  <div slot="props">
+    <FormGroup legendText="Skeleton">
+      <ToggleSmall id="toggle-skeleton" bind:toggled={props.skeleton} />
+    </FormGroup>
+    <FormGroup legendText="Skeleton row count">
+      <NumberInput disabled={!props.skeleton} bind:value={props.count} />
+    </FormGroup>
+    <FormGroup legendText="Skeleton first item open">
+      <ToggleSmall id="toggle-open" disabled={!props.skeleton} bind:toggled={props.open} />
+    </FormGroup>
+  </div>
+</ComponentPreview>

palimpsest/src/components/carbon-components/Accordion/index.js

@@ -0,0 +1,11 @@
+import Preview from './Preview.svelte';
+import API from './API.svelte';
+import KitchenSink from './KitchenSink.svelte';
+
+const tabs = {
+  Preview,
+  API,
+  KitchenSink
+};
+
+export default tabs;

palimpsest/src/components/carbon-components/CodeSnippet.svelte

@@ -1,64 +0,0 @@
-<script>
-  export let selected = 0;
-
-  import copy from 'clipboard-copy';
-  import {
-    ToggleSmall,
-    CodeSnippet,
-    FormGroup,
-    RadioButtonGroup,
-    RadioButton
-  } from 'carbon-components-svelte';
-
-  $: code = `
-    <CodeSnippet />
-  `.trim();
-
-  $: props = {
-    light: false,
-    type: 'single'
-  };
-</script>
-
-<style>
-  .bx--row {
-    background-color: var(--cds-ui-01);
-  }
-
-  .wrapper {
-    background-color: var(--cds-ui-background);
-    border-left: 1px solid var(--cds-ui-03);
-    border-right: 1px solid var(--cds-ui-03);
-    border-bottom: 1px solid var(--cds-ui-03);
-    flex: 1;
-    display: inline-flex;
-    min-height: 11.5rem;
-    padding: 2.5rem 0.9375rem;
-  }
-</style>
-
-{#if selected === 0}
-  <div class="bx--row">
-    <div class="wrapper">
-      <div>
-        <CodeSnippet {...props} on:click={() => copy(code)} {code} />
-      </div>
-    </div>
-  </div>
-
-  <div class="bx--row">
-    <div class="bx--col">
-      <h4 style="padding: 1rem 0;">Props</h4>
-      <FormGroup legendText="Light variant (light)">
-        <ToggleSmall id="toggle-light" bind:toggled={props.light} />
-      </FormGroup>
-      <FormGroup legendText="Type (type)">
-        <RadioButtonGroup orientation="vertical" legend="Group Legend" bind:selected={props.type}>
-          <RadioButton value="inline" id="inline" labelText="inline" />
-          <RadioButton value="single" id="single" labelText="single" />
-          <RadioButton value="multi" id="multi" labelText="multi" />
-        </RadioButtonGroup>
-      </FormGroup>
-    </div>
-  </div>
-{/if}

palimpsest/src/components/carbon-components/CodeSnippet/API.svelte

@@ -0,0 +1,40 @@
+<script>
+  import { ComponentAPI } from '../../Component';
+
+  const props = [
+    {
+      name: 'type',
+      type: 'string',
+      required: true,
+      value: ['inline', 'single', 'multi'],
+      defaultValue: { value: 'single' },
+      description: `
+      <div>
+        <strong>Inline</strong> An inline <code>CodeSnippet</code> contains
+        </div>
+      `
+    },
+    {
+      name: 'light',
+      type: 'boolean',
+      required: false,
+      value: [],
+      defaultValue: { value: false },
+      description: `
+        <div>Light variant</div>
+      `
+    },
+    {
+      name: 'code',
+      type: 'string',
+      required: true,
+      value: [],
+      defaultValue: { value: undefined },
+      description: `
+        <div>Light variant</div>
+      `
+    }
+  ];
+</script>
+
+<ComponentAPI {props} />

palimpsest/src/components/carbon-components/CodeSnippet/Preview.svelte

@@ -0,0 +1,72 @@
+<script>
+  import {
+    TextArea,
+    TextInput,
+    ToggleSmall,
+    CodeSnippet,
+    FormGroup,
+    RadioButtonGroup,
+    RadioButton
+  } from 'carbon-components-svelte';
+  import { ComponentPreview } from '../../Component';
+
+  $: props = {
+    code: `
+      This is a <CodeSnippet />
+    `.trim(),
+    light: false,
+    type: 'single',
+    skeleton: false,
+    feedback: 'Copied!'
+  };
+
+  $: code = `
+<script>
+  import { CodeSnippet } from 'carbon-components-svelte';
+
+  $: code = \`${props.code}\`;
+< /script>
+
+<CodeSnippet type="${props.type}"${props.light ? ' light' : ''} {code}${
+    props.skeleton ? ' skeleton' : ''
+  } feedback="${props.feedback}" />
+  `;
+
+  $: if (props.type === 'inline') {
+    props.skeleton = false;
+  }
+</script>
+
+<ComponentPreview light={props.light} {code}>
+  <div>
+    <CodeSnippet {...props} />
+  </div>
+  <div slot="props">
+    <FormGroup legendText="Type">
+      <RadioButtonGroup legend="Type" bind:selected={props.type}>
+        <RadioButton value="inline" id="inline" labelText="inline" />
+        <RadioButton value="single" id="single" labelText="single" />
+        <RadioButton value="multi" id="multi" labelText="multi" />
+      </RadioButtonGroup>
+    </FormGroup>
+    <FormGroup legendText="Light variant">
+      <ToggleSmall id="toggle-light" bind:toggled={props.light} />
+    </FormGroup>
+    <FormGroup legendText="Code">
+      {#if props.type === 'multi'}
+        <TextArea bind:value={props.code} />
+      {:else}
+        <TextInput bind:value={props.code} />
+      {/if}
+    </FormGroup>
+    <FormGroup legendText="Skeleton">
+      <ToggleSmall
+        id="toggle-skeleton"
+        disabled={props.type === 'inline'}
+        bind:toggled={props.skeleton} />
+    </FormGroup>
+    <FormGroup legendText="Feedback text">
+      <TextInput placeholder="Enter text" bind:value={props.feedback} />
+    </FormGroup>
+  </div>
+</ComponentPreview>

palimpsest/src/components/carbon-components/CodeSnippet/index.js

@@ -0,0 +1,11 @@
+import Preview from './Preview.svelte';
+import API from './API.svelte';
+import KitchenSink from './KitchenSink.svelte';
+
+const tabs = {
+  Preview,
+  API,
+  KitchenSink
+};
+
+export default tabs;

palimpsest/src/data/component-registry.js

@@ -1,8 +1,50 @@
 const components = [
+  { name: 'Accordion' },
+  { name: 'Breadcrumb' },
+  { name: 'Button' },
+  { name: 'Checkbox' },
   { name: 'CodeSnippet' },
+  { name: 'ComboBox' },
+  { name: 'ComposedModal' },
+  { name: 'ContentSwitcher' },
+  { name: 'CopyButton' },
   { name: 'DataTable' },
+  { name: 'DatePicker' },
   { name: 'Dropdown' },
-  { name: 'MultiSelect' }
+  { name: 'FileUploader' },
+  { name: 'Form' },
+  { name: 'Icon' },
+  { name: 'InlineLoading' },
+  { name: 'Link' },
+  { name: 'Loading' },
+  { name: 'Modal' },
+  { name: 'MultiSelect' },
+  { name: 'Notification' },
+  { name: 'NumberInput' },
+  { name: 'OrderedList' },
+  { name: 'OverflowMenu' },
+  { name: 'Pagination' },
+  { name: 'ProgressIndicator' },
+  { name: 'RadioButton' },
+  { name: 'RadioButtonGroup' },
+  { name: 'Search' },
+  { name: 'Select' },
+  { name: 'SkeletonPlaceholder' },
+  { name: 'SkeletonText' },
+  { name: 'Slider' },
+  { name: 'StructuredList' },
+  { name: 'Tabs' },
+  { name: 'Tag' },
+  { name: 'TextArea' },
+  { name: 'TextInput' },
+  { name: 'Tile' },
+  { name: 'TimePicker' },
+  { name: 'Toggle' },
+  { name: 'ToggleSmall' },
+  { name: 'Tooltip' },
+  { name: 'TooltipDefinition' },
+  { name: 'TooltipIcon' },
+  { name: 'UnorderedList' }
 ];
 
 export default components;

palimpsest/src/store/index.js

@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const theme = writable();