chnages to sidenav

.eslintrc.json

@@ -3,6 +3,7 @@
   "env": {
     "es6": true,
     "browser": true,
+    "node": true,
     "jest": true
   },
   "parserOptions": {
@@ -16,5 +17,5 @@
       "processor": "svelte3/svelte3"
     }
   ],
-  "ignorePatterns": ["*.snap"]
+  "ignorePatterns": ["docs", "*.snap"]
 }

.prettierignore

@@ -0,0 +1 @@
+README.md

CHANGELOG.md

@@ -5,6 +5,17 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.2.1](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.2.1) - 2020-01-08
+
+- Check if `l10n.en` is defined in `DatePicker` component to resolve Svelte REPL compilation
+
+## [0.2.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.2.0) - 2020-01-08
+
+- Include `src` in files published to npm to resolve Svelte module entry
+  ([#102](https://github.com/IBM/carbon-components-svelte/issues/102))
+
+- Support most Carbon components (See the [GitHub project](https://github.com/IBM/carbon-components-svelte/projects/1))
+
 ## [0.1.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.1.0) - 2019-12-15
 
 - Initial release

CONTRIBUTING.md

@@ -57,7 +57,7 @@ This project uses Storybook for UI development and "live" documentation.
 Run the following command to start the Storybook:
 
 ```bash
-yarn start -p 9090
+yarn start
 ```
 
 #### Component Format

README.md

@@ -1,131 +1,39 @@
 # carbon-components-svelte
 
-> 🚧 UNDER CONSTRUCTION
+[![NPM][npm]][npm-url]
+[![Build][build]][build-badge]
 
-> Svelte implementation of the Carbon Design System
+> Svelte implementation of the [Carbon Design System](https://github.com/carbon-design-system)
 
-Currently, this project is under active development. See the [ongoing project](https://github.com/IBM/carbon-components-svelte/projects/1) for the anticipated v1.0.0 release.
+**NOTE**: Currently, this project is under active development. See the [issue tracker](https://github.com/IBM/carbon-components-svelte/projects/1) for the anticipated v1.0.0 release.
 
-## [Storybook](https://ibm.github.io/carbon-components-svelte)
+## [Storybook](https://ibm.github.io/carbon-components-svelte) · [CodeSandbox](https://codesandbox.io/s/carbon-components-svelte021-lhvc4)
 
-## Supported Components
+## Getting Started
 
-Currently, the following components are supported:
+`carbon-components-svelte` can be installed as a development dependency.
 
-- Accordion
+```bash
-- AccordionItem
+yarn add -D carbon-components-svelte
-  - AccordionSkeleton
+```
-- Breadcrumb
+
-- BreadcrumbItem
+## Usage
-  - BreadcrumbSkeleton
+
-- Button
+```html
-  - ButtonSkeleton
+<script>
-- Checkbox
+  import { Button } from 'carbon-components-svelte';
-  - CheckboxSkeleton
+</script>
-- CodeSnippet
+
-  - CodeSnippetSkeleton
+<svelte:head>
-- ComposedModal
+  <link
-  - ModalHeader
+    rel="stylesheet"
-  - ModalBody
+    href="https://unpkg.com/carbon-components@10.9.0/css/carbon-components.min.css" />
-  - ModalFooter
+</svelte:head>
-- ContentSwitcher
+
-  - Switch
+<Button>Primary</Button>
-- Copy
+```
-- CopyButton
+
-- DataTableSkeleton
+Try it in the [CodeSandbox](https://codesandbox.io/s/carbon-components-svelte021-lhvc4).
-- DatePicker
-  - DatePickerInput
-- FileUploader
-  - FileUploaderButton
-  - FileUploaderItem
-  - FileUploaderDropContainer
-  - Filename
-- Form
-- FormGroup
-- FormItem
-- FormLabel
-- Icon
-  - IconSkeleton
-- InlineLoading
-- Link
-- ListBox
-  - ListBoxField
-  - ListBoxMenu
-  - ListBoxMenuIcon
-  - ListBoxMenuItem
-  - ListBoxSelection
-- ListItem
-- Loading
-- Modal
-- Notification
-  - ToastNotification
-  - InlineNotification
-  - NotificationActionButton
-  - NotificationButton
-  - NotificationIcon
-  - NotificationTextDetails
-- NumberInput
-  - NumberInputSkeleton
-- OrderedList
-- OverflowMenu
-  - OverflowMenuItem
-- Pagination
-  - PaginationSkeleton
-- ProgressIndicator
-  - ProgressIndicatorSkeleton
-  - ProgressStep
-- RadioButton
-  - RadioButtonSkeleton
-- RadioButtonGroup
-- Search
-  - SearchSkeleton
-- Select
-  - SelectSkeleton
-  - SelectItem
-  - SelectItemGroup
-- SkeletonPlaceholder
-- SkeletonText
-- Slider
-  - SliderSkeleton
-- StructuredList
-  - StructuredListSkeleton
-  - StructuredListBody
-  - StructuredListHead
-  - StructuredListCell
-  - StructuredListRow
-  - StructuredListInput
-  - StructuredListWrapper
-- Tabs
-  - Tab
-  - TabContent
-  - TabsSkeleton
-- Tag
-  - TagSkeleton
-- TextArea
-  - TextAreaSkeleton
-- TextInput
-  - TextInputSkeleton
-  - PasswordInput
-- Tile
-  - ClickableTile
-  - SelectableTile
-  - ExpandableTile
-    - TileAboveTheFoldContent
-    - TileBelowTheFoldContent
-  - RadioTile
-  - Tile
-  - TileGroup
-    - RadioTile
-- TimePicker
-  - TimePickerSelect
-- Toggle
-  - ToggleSkeleton
-- ToggleSmall
-  - ToggleSmallSkeleton
-- Tooltip
-- TooltipDefinition
-- TooltipIcon
-- UnorderedList
 
 ## Contributing
 
@@ -136,3 +44,8 @@ Refer to the [Contributing guidelines](CONTRIBUTING.md).
 ## License
 
 [Apache 2.0](LICENSE)
+
+[npm]: https://img.shields.io/npm/v/carbon-components-svelte.svg?color=blue
+[npm-url]: https://npmjs.com/package/carbon-components-svelte
+[build]: https://travis-ci.com/ibm/carbon-components-svelte.svg?branch=master
+[build-badge]: https://travis-ci.com/ibm/carbon-components-svelte

docs/iframe.html

@@ -70,4 +70,4 @@
   }</script><style>#root[hidden],
       #docs-root[hidden] {
         display: none !important;
-      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.e9585d931aedb4990ba2.bundle.js"></script><script src="vendors~main.e9585d931aedb4990ba2.bundle.js"></script><script src="main.e9585d931aedb4990ba2.bundle.js"></script></body></html>
+      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.627d5f000ff75700853f.bundle.js"></script><script src="vendors~main.627d5f000ff75700853f.bundle.js"></script><script src="main.627d5f000ff75700853f.bundle.js"></script></body></html>

docs/index.html

@@ -17,4 +17,4 @@
   }</script><style>#root[hidden],
       #docs-root[hidden] {
         display: none !important;
-      }</style></head><body><div id="root"></div><div id="docs-root"></div><script>window['DOCS_MODE'] = false;</script><script src="runtime~main.67b3c42af12dc2b7ac9d.bundle.js"></script><script src="vendors~main.de76cb4d691ff902e1d8.bundle.js"></script><script src="main.d19aceecbf99f4b72fa7.bundle.js"></script></body></html>
+      }</style></head><body><div id="root"></div><div id="docs-root"></div><script>window['DOCS_MODE'] = false;</script><script src="runtime~main.67b3c42af12dc2b7ac9d.bundle.js"></script><script src="vendors~main.90220ada78163e544ba9.bundle.js"></script><script src="main.e7e683d3c4fc3d92da31.bundle.js"></script></body></html>

docs/main.627d5f000ff75700853f.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.627d5f000ff75700853f.bundle.js","sources":["webpack:///main.627d5f000ff75700853f.bundle.js"],"mappings":"AAAA","sourceRoot":""}

docs/main.d19aceecbf99f4b72fa7.bundle.js

@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{415:function(n,o,c){c(416),c(529),n.exports=c(878)},438:function(n,o){},529:function(n,o,c){"use strict";c.r(o);c(530),c(850)}},[[415,1,2]]]);

docs/main.e7e683d3c4fc3d92da31.bundle.js

@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{0:function(n,o,c){c(417),c(529),n.exports=c(878)},1:function(n,o){},529:function(n,o,c){"use strict";c.r(o);c(530),c(850)}},[[0,1,2]]]);

docs/main.e9585d931aedb4990ba2.bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"main.e9585d931aedb4990ba2.bundle.js","sources":["webpack:///main.e9585d931aedb4990ba2.bundle.js"],"mappings":"AAAA","sourceRoot":""}

docs/runtime~main.627d5f000ff75700853f.bundle.js

@@ -1,2 +1,2 @@
 !function(modules){function webpackJsonpCallback(data){for(var moduleId,chunkId,chunkIds=data[0],moreModules=data[1],executeModules=data[2],i=0,resolves=[];i<chunkIds.length;i++)chunkId=chunkIds[i],Object.prototype.hasOwnProperty.call(installedChunks,chunkId)&&installedChunks[chunkId]&&resolves.push(installedChunks[chunkId][0]),installedChunks[chunkId]=0;for(moduleId in moreModules)Object.prototype.hasOwnProperty.call(moreModules,moduleId)&&(modules[moduleId]=moreModules[moduleId]);for(parentJsonpFunction&&parentJsonpFunction(data);resolves.length;)resolves.shift()();return deferredModules.push.apply(deferredModules,executeModules||[]),checkDeferredModules()}function checkDeferredModules(){for(var result,i=0;i<deferredModules.length;i++){for(var deferredModule=deferredModules[i],fulfilled=!0,j=1;j<deferredModule.length;j++){var depId=deferredModule[j];0!==installedChunks[depId]&&(fulfilled=!1)}fulfilled&&(deferredModules.splice(i--,1),result=__webpack_require__(__webpack_require__.s=deferredModule[0]))}return result}var installedModules={},installedChunks={1:0},deferredModules=[];function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}__webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.d=function(exports,name,getter){__webpack_require__.o(exports,name)||Object.defineProperty(exports,name,{enumerable:!0,get:getter})},__webpack_require__.r=function(exports){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.t=function(value,mode){if(1&mode&&(value=__webpack_require__(value)),8&mode)return value;if(4&mode&&"object"==typeof value&&value&&value.__esModule)return value;var ns=Object.create(null);if(__webpack_require__.r(ns),Object.defineProperty(ns,"default",{enumerable:!0,value:value}),2&mode&&"string"!=typeof value)for(var key in value)__webpack_require__.d(ns,key,function(key){return value[key]}.bind(null,key));return ns},__webpack_require__.n=function(module){var getter=module&&module.__esModule?function getDefault(){return module.default}:function getModuleExports(){return module};return __webpack_require__.d(getter,"a",getter),getter},__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)},__webpack_require__.p="";var jsonpArray=window.webpackJsonp=window.webpackJsonp||[],oldJsonpFunction=jsonpArray.push.bind(jsonpArray);jsonpArray.push=webpackJsonpCallback,jsonpArray=jsonpArray.slice();for(var i=0;i<jsonpArray.length;i++)webpackJsonpCallback(jsonpArray[i]);var parentJsonpFunction=oldJsonpFunction;checkDeferredModules()}([]);
-//# sourceMappingURL=runtime~main.e9585d931aedb4990ba2.bundle.js.map
+//# sourceMappingURL=runtime~main.627d5f000ff75700853f.bundle.js.map

docs/runtime~main.627d5f000ff75700853f.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"runtime~main.627d5f000ff75700853f.bundle.js","sources":["webpack:///runtime~main.627d5f000ff75700853f.bundle.js"],"mappings":"AAAA","sourceRoot":""}

docs/runtime~main.e9585d931aedb4990ba2.bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"runtime~main.e9585d931aedb4990ba2.bundle.js","sources":["webpack:///runtime~main.3fc22874a0adf047f1de.bundle.js"],"mappings":"AAAA","sourceRoot":""}

docs/vendors~main.627d5f000ff75700853f.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vendors~main.627d5f000ff75700853f.bundle.js","sources":["webpack:///vendors~main.627d5f000ff75700853f.bundle.js"],"mappings":"AAAA;;;;;;;;;;;;;;AAiqNA;;;;;AA2taA;;AA48BA;;;;;;;;;;;;;;AAmBA;;;;;AA0iQA;;;;;AAkkEA;;;;;;;;;AAukBA;;;AA8odA;;;;;;;;AAg/BA;;;;;;;;AAqEA;;;;;;;;AAkTA;;;;;;;AAyrDA;;;;;;;AAy7CA;;;;;;;AAsdA;;;;;;;AAfA","sourceRoot":""}

docs/vendors~main.e9585d931aedb4990ba2.bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vendors~main.e9585d931aedb4990ba2.bundle.js","sources":["webpack:///vendors~main.e9585d931aedb4990ba2.bundle.js"],"mappings":"AAAA;;;;;;;;;;;;;;AAmmPA;;;;;AAq7XA;;AAu8BA;;;;;;;;;;;;;;AAmBA;;;;;AA68NA;;;;;AAkkEA;;;;;;;;;AAukBA;;;AA8odA;;;;;;;;AAg/BA;;;;;;;;AAqEA;;;;;;;;AAkTA;;;;;;;AAyrDA;;;;;;;AAy7CA;;;;;;;AA+cA;;;;;;;AAfA","sourceRoot":""}

package.json

@@ -1,13 +1,13 @@
 {
   "name": "carbon-components-svelte",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "license": "Apache-2.0",
   "description": "Svelte implementation of the Carbon Design System",
   "svelte": "src/index.js",
   "main": "lib/index.js",
   "module": "lib/index.mjs",
   "scripts": {
-    "start": "start-storybook",
+    "start": "start-storybook -p 9090",
     "build": "rollup -c",
     "build:storybook": "build-storybook -o docs",
     "test": "jest --coverage",
@@ -19,6 +19,10 @@
     "carbon-icons-svelte": "^10.8.1",
     "flatpickr": "^4.6.3"
   },
+  "peerDependencies": {
+    "carbon-components": "^10.9.0",
+    "carbon-icons-svelte": "^10.8.2"
+  },
   "devDependencies": {
     "@babel/core": "^7.8.0",
     "@babel/preset-env": "^7.8.0",
@@ -57,6 +61,7 @@
       "email": "eric.young.liu@ibm.com"
     }
   ],
+  "sideEffects": false,
   "engines": {
     "node": ">=10",
     "yarn": ">=1"
@@ -69,7 +74,7 @@
   },
   "lint-staged": {
     "*.{js,svelte}": [
-      "eslint --fix 'src/**'",
+      "eslint --fix",
       "git add"
     ]
   },
@@ -93,6 +98,9 @@
       "js",
       "svelte"
     ],
+    "moduleNameMapper": {
+      "^carbon-icons-svelte*": "<rootDir>src/internal/Icon.stub.svelte"
+    },
     "setupFilesAfterEnv": [
       "regenerator-runtime/runtime",
       "@testing-library/jest-dom/extend-expect"
@@ -117,7 +125,8 @@
     "svelte"
   ],
   "files": [
-    "lib"
+    "lib",
+    "src"
   ],
   "bugs": "https://github.com/ibm/carbon-components-svelte/issues"
 }

palimpsest/.gitignore

@@ -0,0 +1,5 @@
+/node_modules
+/build
+.DS_Store
+yarn-debug.log*
+yarn-error.log*

palimpsest/README.md

@@ -0,0 +1,41 @@
+# palimpsest
+
+> pa·​limp·​sest
+
+> writing material used one or more times after earlier writing has been erased – Merriam-Webster
+
+The purpose of this app is to document and illustrate real world consumption of `carbon-components-svelte`.
+
+## Getting Started
+
+This app uses a linked copy of `carbon-components-svelte` to expedite local development.
+
+First, run the following commands at the root of `carbon-components-svelte/`:
+
+```bash
+yarn build
+yarn link
+```
+
+Next, link the library to this folder.
+
+```bash
+cd palimpsest
+yarn link "carbon-components-svelte"
+```
+
+Finally, install this app's dependencies.
+
+```bash
+yarn install
+```
+
+## Available Scripts
+
+### `yarn start`
+
+Runs the app in development mode with livereload enabled. Visit [http://localhost:8080](http://localhost:8080).
+
+### `yarn build`
+
+Builds the app in production mode.

palimpsest/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "palimpsest",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "start": "webpack-dev-server",
+    "build": "NODE_ENV=production webpack"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.7.7",
+    "@babel/preset-env": "^7.7.7",
+    "autoprefixer": "^9.7.3",
+    "carbon-components": "^10.9.0",
+    "carbon-components-svelte": "../",
+    "clean-webpack-plugin": "^3.0.0",
+    "clipboard-copy": "^3.1.0",
+    "copy-webpack-plugin": "^5.0.5",
+    "css-loader": "^3.2.0",
+    "file-loader": "^5.0.2",
+    "fuse.js": "^3.4.6",
+    "html-webpack-plugin": "^3.2.0",
+    "mini-css-extract-plugin": "^0.8.0",
+    "node-sass": "^4.13.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "postcss-loader": "^3.0.0",
+    "sass-loader": "^8.0.0",
+    "style-loader": "^1.0.0",
+    "svelte": "^3.12.1",
+    "svelte-loader": "2.13.6",
+    "svelte-spa-router": "^2.0.0",
+    "webpack": "^4.41.2",
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.9.0"
+  },
+  "babel": {
+    "presets": [
+      "@babel/preset-env"
+    ]
+  }
+}

palimpsest/public/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <link rel="icon" href="./favicon.png" />
+    <title>Carbon Components Svelte</title>
+  </head>
+  <body></body>
+</html>

palimpsest/src/App.svelte

@@ -0,0 +1,11 @@
+<script>
+  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>
+
+<Header />
+<SideNav />
+<Router routes={{ '/': Home, '/c': Component, '/c/*': Component }} />

palimpsest/src/components/ButtonTile.svelte

@@ -0,0 +1,109 @@
+<script>
+  export let href = undefined;
+  export let kind = 'launch';
+  export let iconLeft = undefined;
+  export let iconRight = Launch20;
+
+  import Launch20 from 'carbon-icons-svelte/lib/Launch20';
+  import ArrowRight20 from 'carbon-icons-svelte/lib/ArrowRight20';
+
+  $: iconRight = kind === 'link' ? ArrowRight20 : Launch20;
+</script>
+
+<style>
+  .link {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 1rem;
+    cursor: pointer;
+    border-right: 1px solid transparent;
+    border-bottom: 1px solid transparent;
+  }
+
+  @media screen and (max-width: 671px) {
+    .link {
+      border-right: 0;
+    }
+  }
+
+  .link:focus {
+    outline: 2px solid var(--cds-focus, #0f62fe);
+    outline-offset: -2px;
+  }
+
+  .icon {
+    position: absolute;
+    bottom: 1rem;
+    fill: var(--cds-ui-05);
+  }
+
+  .icon--left {
+    left: 1rem;
+  }
+
+  .icon--right {
+    right: 1rem;
+  }
+
+  .bg {
+    position: absolute;
+    z-index: -1;
+    right: 1px;
+    bottom: 1px;
+    width: calc(100% - 1px);
+    height: calc(100% - 1px);
+    transition: 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
+    background-color: var(--cds-ui-01);
+  }
+
+  .button-tile:hover .bg {
+    background-color: var(--cds-ui-03);
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+</style>
+
+<div class="button-tile bx--aspect-ratio bx--aspect-ratio--2x1">
+  <div class="bx--aspect-ratio--object">
+    {#if href}
+      <a
+        class="link"
+        on:click
+        target={kind === 'launch' ? '_blank' : undefined}
+        rel={kind === 'launch' ? 'noopener noreferrer' : undefined}
+        {href}>
+        <div>
+          <slot />
+        </div>
+        {#if iconLeft}
+          <div class="icon icon--left">
+            <svelte:component this={iconLeft} />
+          </div>
+        {/if}
+        <div class="icon icon--right">
+          <svelte:component this={iconRight} />
+        </div>
+      </a>
+    {:else}
+      <div role="button" tabindex="0" class="link" on:click {href}>
+        <div>
+          <slot />
+        </div>
+        {#if iconLeft}
+          <div class="icon icon--left">
+            <svelte:component this={iconLeft} />
+          </div>
+        {/if}
+        <div class="icon icon--right">
+          <svelte:component this={iconRight} />
+        </div>
+      </div>
+    {/if}
+    <div class="bg" />
+  </div>
+</div>

palimpsest/src/components/Component/Component.svelte

@@ -0,0 +1,111 @@
+<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: 5rem;
+    padding-left: 12rem;
+    padding-bottom: 2.5rem;
+  }
+
+  @media screen and (max-width: 768px) {
+    main {
+      padding-left: 0;
+    }
+  }
+
+  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">
+        <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 disabled 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,110 @@
+<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);
+  }
+
+  .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-top: 2rem;
+    margin-bottom: 1.5rem;
+    font-size: 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,23 @@
+<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'
+  };
+
+  $: tabName = params.tab || 'Preview';
+  $: tab = paramMap[tabName];
+  $: {
+    set(params.name);
+    document.title = `${params.name} · ${tabName}`;
+  }
+</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/Header.svelte

@@ -0,0 +1,142 @@
+<script>
+  import { link } from 'svelte-spa-router';
+  import { Icon } from 'carbon-components-svelte';
+  import AppSwitcher20 from 'carbon-icons-svelte/lib/AppSwitcher20';
+  import Menu20 from 'carbon-icons-svelte/lib/Menu20';
+  import Close20 from 'carbon-icons-svelte/lib/Close20';
+  import ThemePicker from '../components/ThemePicker.svelte';
+  import { sideNavToggled, appSwitcherToggled } from '../store';
+</script>
+
+<style>
+  header {
+    position: fixed;
+    z-index: 9999;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 2.5rem;
+    padding: 0 1rem;
+    background-color: var(--cds-ui-01);
+    border-bottom: 1px solid var(--cds-ui-03);
+  }
+
+  .app-switcher {
+    position: fixed;
+    z-index: 9999;
+    top: 2.5rem;
+    right: 0;
+    width: 16rem;
+    height: calc(100% - 2.5rem);
+    padding: 1rem;
+    background-color: var(--cds-ui-01);
+    transform: translateX(100%);
+  }
+
+  @media screen and (max-width: 768px) {
+    .app-switcher {
+      will-change: transform;
+    }
+
+    .app-switcher.toggled {
+      transform: translateX(0);
+      transition: transform 110ms cubic-bezier(0.2, 0, 1, 0.9);
+      will-change: auto;
+    }
+  }
+
+  .menu {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    height: 2.5rem;
+    width: 2.5rem;
+    margin-left: -1rem;
+    margin-right: 0.5rem;
+    background: none;
+    border: 0;
+    fill: var(--cds-ui-05);
+    cursor: pointer;
+  }
+
+  .menu--right {
+    margin-left: auto;
+    margin-right: -1rem;
+  }
+
+  .menu:focus {
+    outline: 2px solid var(--cds-focus, #0f62fe);
+    outline-offset: -2px;
+  }
+
+  nav {
+    display: flex;
+    align-items: center;
+  }
+
+  .bx--link {
+    font-size: 1rem;
+    color: var(--cds-text-01);
+    white-space: nowrap;
+  }
+
+  .bx--link:hover {
+    color: var(--cds-text-01);
+    text-decoration: none;
+  }
+
+  @media screen and (max-width: 768px) {
+    .menu {
+      display: flex;
+    }
+
+    .theme {
+      display: none;
+    }
+  }
+</style>
+
+<header>
+  <nav>
+    <button
+      class="menu"
+      on:click={() => {
+        sideNavToggled.set(!$sideNavToggled);
+        appSwitcherToggled.set(false);
+      }}>
+      <Icon render={$sideNavToggled ? Close20 : Menu20} />
+    </button>
+    <a
+      class="bx--link"
+      href="/"
+      use:link
+      on:click={() => {
+        if ($sideNavToggled || $appSwitcherToggled) {
+          sideNavToggled.set(false);
+          appSwitcherToggled.set(false);
+        }
+        window.scrollTo(0, 0);
+      }}>
+      Carbon Components
+      <strong>Svelte</strong>
+    </a>
+  </nav>
+  <div class="theme">
+    <ThemePicker inline />
+  </div>
+  <button
+    class="menu menu--right"
+    on:click={() => {
+      appSwitcherToggled.set(!$appSwitcherToggled);
+      sideNavToggled.set(false);
+    }}>
+    <Icon render={$appSwitcherToggled ? Close20 : AppSwitcher20} />
+  </button>
+</header>
+
+<div class="app-switcher" class:toggled={$appSwitcherToggled}>
+  <ThemePicker />
+</div>

palimpsest/src/components/Home.svelte

@@ -0,0 +1,92 @@
+<script>
+  import LogoGithub32 from 'carbon-icons-svelte/lib/LogoGithub32';
+  import Logo from '../assets/logo.png';
+  import ButtonTile from './ButtonTile.svelte';
+
+  $: {
+    document.title = `Carbon Components Svelte`;
+  }
+</script>
+
+<style>
+  main {
+    margin-top: 5rem;
+    padding-left: 12rem;
+    padding-bottom: 2.5rem;
+  }
+
+  @media screen and (max-width: 768px) {
+    main {
+      padding-left: 0;
+    }
+  }
+
+  .bx--grid {
+    max-width: 66rem;
+  }
+
+  .logo {
+    max-width: 4rem;
+    margin-bottom: 0.5rem;
+  }
+
+  h1 {
+    margin-bottom: 2rem;
+    font-size: 2rem;
+    line-height: 1.2;
+  }
+
+  h1 span {
+    display: block;
+  }
+
+  h3 {
+    margin-top: 4rem;
+    margin-bottom: 1.5rem;
+    font-size: 1.5rem;
+  }
+</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>
+        <p>The Carbon Design System implemented in Svelte</p>
+      </div>
+    </div>
+    <div class="bx--row">
+      <div class="bx--col">
+        <h3>Packages</h3>
+      </div>
+    </div>
+    <div class="bx--row bx--no-gutter">
+      <div class="bx--no-gutter-sm bx--col-md-4 bx--col-lg-4">
+        <ButtonTile iconLeft={LogoGithub32} href="https://github.com/IBM/carbon-components-svelte">
+          Carbon Components Svelte
+        </ButtonTile>
+      </div>
+      <div class="bx--no-gutter-sm bx--col-md-4 bx--col-lg-4">
+        <ButtonTile iconLeft={LogoGithub32} href="https://github.com/IBM/carbon-icons-svelte">
+          Carbon Icons Svelte
+        </ButtonTile>
+      </div>
+    </div>
+    <div class="bx--row">
+      <div class="bx--col">
+        <h3>Components</h3>
+      </div>
+    </div>
+  </div>
+</main>

palimpsest/src/components/SideNav.svelte

@@ -0,0 +1,142 @@
+<script>
+  import { link, location } from 'svelte-spa-router';
+  import { Search } from 'carbon-components-svelte';
+  import Fuse from 'fuse.js';
+  import components from '../data/component-registry';
+  import { sideNavToggled, appSwitcherToggled } from '../store';
+
+  const fuse = new Fuse(components, { shouldSort: false, threshold: 0.33, keys: ['name'] });
+
+  let value = '';
+
+  $: results = value.length > 1 ? fuse.search(value) : components;
+
+  $: {
+    if ($sideNavToggled || $appSwitcherToggled) {
+      document.body.classList.add('hidden');
+    } else {
+      document.body.classList.remove('hidden');
+    }
+  }
+</script>
+
+<style>
+  :global(body.hidden) {
+    overflow-y: hidden;
+  }
+
+  nav {
+    position: fixed;
+    z-index: 9999;
+    top: 2.5rem;
+    left: 0;
+    width: 12rem;
+    height: calc(100% - 2.5rem);
+    background-color: var(--cds-ui-01);
+    overflow-y: scroll;
+  }
+
+  @media screen and (max-width: 768px) {
+    nav {
+      transform: translateX(-100%);
+      will-change: transform;
+    }
+
+    nav.toggled {
+      transform: translateX(0);
+      transition: transform 110ms cubic-bezier(0.2, 0, 1, 0.9);
+      will-change: auto;
+    }
+  }
+
+  .overlay {
+    position: fixed;
+    z-index: 9998;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--cds-overlay-01);
+  }
+
+  ul {
+    padding: 0.5rem 0;
+  }
+
+  li {
+    display: flex;
+  }
+
+  .bx--link {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    padding: 0.375rem 1rem;
+    color: var(--cds-text-01);
+    text-decoration: none;
+  }
+
+  .bx--link:focus {
+    z-index: 1;
+  }
+
+  .bx--link:hover {
+    background-color: var(--cds-ui-03);
+    color: var(--cds-text-01);
+  }
+
+  .bx--link.current {
+    background-color: var(--cds-ui-03);
+    font-weight: 600;
+  }
+
+  .bx--link.current:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0.25rem;
+    height: 100%;
+    background-color: var(--cds-interactive-01);
+  }
+</style>
+
+<svelte:window
+  on:resize={() => {
+    if (($sideNavToggled || $appSwitcherToggled) && window.matchMedia('(min-width: 768px)').matches) {
+      sideNavToggled.set(false);
+      appSwitcherToggled.set(false);
+    }
+  }} />
+
+<nav class:toggled={$sideNavToggled}>
+  <Search small id="search-components" labelText="Components" bind:value />
+  <ul>
+    {#each results as { name }, i (name)}
+      <li>
+        <a
+          on:click={() => {
+            if ($sideNavToggled) {
+              sideNavToggled.set(false);
+              window.scrollTo(0, 0);
+            }
+          }}
+          class="bx--link"
+          class:current={$location.includes(`/c/${name}`)}
+          href={`/c/${name}`}
+          use:link>
+          {name}
+        </a>
+      </li>
+    {/each}
+  </ul>
+</nav>
+
+{#if $sideNavToggled || $appSwitcherToggled}
+  <div
+    class="overlay"
+    on:click={() => {
+      sideNavToggled.set(false);
+      appSwitcherToggled.set(false);
+    }} />
+{/if}

palimpsest/src/components/ThemePicker.svelte

@@ -0,0 +1,23 @@
+<script>
+  export let inline = false;
+
+  import { Select, SelectItem } from 'carbon-components-svelte';
+  import { theme } from '../store';
+
+  $: {
+    document.documentElement.setAttribute('carbon-theme', $theme);
+  }
+</script>
+
+<Select
+  {inline}
+  labelText="Theme"
+  selected={$theme}
+  on:change={({ detail }) => {
+    theme.set(detail);
+  }}>
+  <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/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

@@ -0,0 +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: '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/index.js

@@ -0,0 +1,6 @@
+import './style.scss';
+import App from './App.svelte';
+
+const app = new App({ target: document.body });
+
+export default app;

palimpsest/src/store/index.js

@@ -0,0 +1,5 @@
+import { writable } from 'svelte/store';
+
+export const sideNavToggled = writable(false);
+export const appSwitcherToggled = writable(false);
+export const theme = writable('g10');

palimpsest/src/style.scss

@@ -0,0 +1,37 @@
+$feature-flags: (
+  enable-css-custom-properties: true
+);
+
+@import 'carbon-components/scss/globals/scss/_css--helpers.scss';
+@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/_mixins.scss';
+
+:root {
+  @include carbon--theme($carbon--theme--white, true);
+}
+
+:root[carbon-theme='g10'] {
+  @include carbon--theme($carbon--theme--g10, true);
+}
+
+:root[carbon-theme='g90'] {
+  @include carbon--theme($carbon--theme--g90, true);
+}
+
+:root[carbon-theme='g100'] {
+  @include carbon--theme($carbon--theme--g100, true);
+}
+
+$css--font-face: true;
+$css--helpers: true;
+$css--body: true;
+$css--use-layer: true;
+$css--reset: true;
+$css--default-type: true;
+$css--plex: true;
+
+@import 'carbon-components/scss/globals/scss/_css--reset.scss';
+@import 'carbon-components/scss/globals/scss/_css--font-face.scss';
+@import 'carbon-components/scss/globals/scss/_css--helpers.scss';
+@import 'carbon-components/scss/globals/scss/_css--body.scss';
+@import 'carbon-components/scss/globals/grid/_grid.scss';
+@import 'carbon-components/scss/globals/scss/styles.scss';

palimpsest/webpack.config.js

@@ -0,0 +1,78 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const path = require('path');
+const CopyPlugin = require('copy-webpack-plugin');
+
+const NODE_ENV = process.env.NODE_ENV || 'development';
+const IS_PROD = NODE_ENV === 'production';
+
+module.exports = {
+  stats: 'errors-only',
+  devtool: IS_PROD ? false : 'cheap-eval-source-map',
+  entry: { bundle: ['./src/index.js'] },
+  resolve: {
+    alias: { svelte: path.resolve('node_modules', 'svelte') },
+    extensions: ['.mjs', '.js', '.svelte'],
+    mainFields: ['svelte', 'browser', 'module', 'main']
+  },
+  output: { path: path.resolve(__dirname, 'build'), filename: '[name].[chunkhash].js' },
+  module: {
+    rules: [
+      {
+        test: /\.svelte$/,
+        use: { loader: 'svelte-loader', options: { emitCss: true, hotReload: true } }
+      },
+      {
+        test: [/\.s[ac]ss$/i, /\.css$/],
+        use: [
+          IS_PROD ? MiniCssExtractPlugin.loader : 'style-loader',
+          'css-loader',
+          {
+            loader: 'postcss-loader',
+            options: {
+              plugins: [
+                require('autoprefixer')({
+                  overrideBrowserslist: ['last 1 version', 'ie >= 11']
+                })
+              ]
+            }
+          },
+          'sass-loader'
+        ]
+      },
+      {
+        test: /\.(png|jpe?g|svg)$/i,
+        use: [{ loader: 'file-loader' }]
+      }
+    ]
+  },
+  mode: NODE_ENV,
+  plugins: [
+    new CleanWebpackPlugin(),
+    new CopyPlugin([{ from: 'public' }]),
+    new MiniCssExtractPlugin({ filename: '[name].[chunkhash].css' }),
+    new OptimizeCssAssetsPlugin({}),
+    new HtmlWebpackPlugin(
+      Object.assign(
+        {},
+        { inject: true, template: 'public/index.html' },
+        IS_PROD
+          ? {
+              minify: {
+                removeComments: true,
+                collapseWhitespace: true,
+                useShortDoctype: true,
+                removeEmptyElements: true,
+                removeEmptyAttributes: true,
+                removeStyleLinkTypeAttributes: true,
+                keepClosingSlash: true,
+                minifyURLs: true
+              }
+            }
+          : undefined
+      )
+    )
+  ]
+};

src/components/Accordion/Accordion.Skeleton.svelte

@@ -1,8 +1,8 @@
 <script>
   let className = undefined;
   export { className as class };
-  export let open = true;
   export let count = 4;
+  export let open = true;
   export let style = undefined;
 
   import ChevronRight16 from 'carbon-icons-svelte/lib/ChevronRight16';

src/components/Accordion/Accordion.svelte

@@ -3,9 +3,26 @@
   export { className as class };
   export let style = undefined;
 
+  export let skeleton = false;
+  export let count = 4;
+  export let open = true;
+
   import { cx } from '../../lib';
+  import AccordionSkeleton from './Accordion.Skeleton.svelte';
 </script>
 
-<ul on:click on:mouseover on:mouseenter on:mouseleave class={cx('--accordion', className)} {style}>
+{#if skeleton}
+  <AccordionSkeleton {count} {open} class={className} {style} />
+{/if}
+
+{#if !skeleton}
+  <ul
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+    class={cx('--accordion', className)}
+    {style}>
     <slot />
   </ul>
+{/if}

src/components/Accordion/AccordionItem.svelte

@@ -1,10 +1,10 @@
 <script>
   let className = undefined;
   export { className as class };
-  export let title = undefined;
   export let iconDescription = 'Expand/Collapse';
   export let open = false;
   export let style = undefined;
+  export let title = undefined;
 
   import ChevronRight16 from 'carbon-icons-svelte/lib/ChevronRight16';
   import { cx } from '../../lib';

src/components/Button/Button.Skeleton.svelte

@@ -1,8 +1,8 @@
 <script>
   let className = undefined;
   export { className as class };
-  export let small = false;
   export let href = undefined;
+  export let small = false;
   export let style = undefined;
 
   import { cx } from '../../lib';

src/components/Button/Button.svelte

@@ -3,16 +3,16 @@
   export { className as class };
   export let as = undefined;
   export let disabled = false;
-  export let size = 'default';
-  export let kind = 'primary';
   export let href = undefined;
-  export let tabindex = '0';
-  export let type = 'button';
   export let icon = undefined;
   export let iconDescription = undefined;
-  export let tooltipPosition = undefined;
+  export let kind = 'primary';
-  export let tooltipAlignment = undefined;
+  export let size = 'default';
   export let style = undefined;
+  export let tabindex = '0';
+  export let tooltipAlignment = undefined;
+  export let tooltipPosition = undefined;
+  export let type = 'button';
 
   import { getContext } from 'svelte';
   import { cx } from '../../lib';

src/components/Checkbox/Checkbox.stories.js

@@ -9,7 +9,7 @@ export const Checked = () => ({
     labelText: text('Label text (labelText)', 'Checkbox label'),
     indeterminate: boolean('Intermediate (indeterminate)', false),
     disabled: boolean('Disabled (disabled)', false),
-    hideLabel: boolean('No label (hideLabel)', false)
+    hideLabel: boolean('Hide label (hideLabel)', false)
   }
 });
 
@@ -20,7 +20,7 @@ export const Unchecked = () => ({
     labelText: text('Label text (labelText)', 'Checkbox label'),
     indeterminate: boolean('Intermediate (indeterminate)', false),
     disabled: boolean('Disabled (disabled)', false),
-    hideLabel: boolean('No label (hideLabel)', false)
+    hideLabel: boolean('Hide label (hideLabel)', false)
   }
 });
 

src/components/Checkbox/Checkbox.svelte

@@ -2,13 +2,15 @@
   let className = undefined;
   export { className as class };
   export let checked = false;
-  export let indeterminate = false;
   export let disabled = false;
-  export let id = Math.random();
-  export let labelText = undefined;
   export let hideLabel = false;
-  export let title = '';
+  export let id = Math.random();
+  export let indeterminate = false;
+  export let labelText = '';
+  export let name = '';
+  export let readonly = false;
   export let style = undefined;
+  export let title = '';
 
   import { createEventDispatcher } from 'svelte';
   import { cx } from '../../lib';
@@ -37,7 +39,9 @@
     {indeterminate}
     {disabled}
     {checked}
-    {id} />
+    {name}
+    {id}
+    {readonly} />
   <label class={cx('--checkbox-label')} for={id} title={title || undefined}>
     <span class={cx('--checkbox-label-text', hideLabel && '--visually-hidden')}>{labelText}</span>
   </label>

src/components/CodeSnippet/CodeSnippet.Skeleton.svelte

@@ -1,8 +1,8 @@
 <script>
   let className = undefined;
   export { className as class };
-  export let type = 'single';
   export let style = undefined;
+  export let type = 'single';
 
   import { cx } from '../../lib';
 </script>

src/components/CodeSnippet/CodeSnippet.svelte

@@ -1,15 +1,18 @@
 <script>
   let className = undefined;
   export { className as class };
-  export let type = 'single';
+  export let code = undefined;
-  export let feedback = undefined;
-  export let feedbackTimeout = undefined;
   export let copyButtonDescription = undefined;
   export let copyLabel = undefined;
-  export let showMoreText = 'Show more';
+  export let feedback = undefined;
-  export let showLessText = 'Show less';
+  export let feedbackTimeout = undefined;
+  export let id = Math.random();
   export let light = false;
+  export let showLessText = 'Show less';
+  export let showMoreText = 'Show more';
+  export let skeleton = false;
   export let style = undefined;
+  export let type = 'single';
 
   import { afterUpdate } from 'svelte';
   import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
@@ -17,38 +20,44 @@
   import Button from '../Button';
   import Copy from '../Copy';
   import CopyButton from '../CopyButton';
+  import CodeSnippetSkeleton from './CodeSnippet.Skeleton.svelte';
 
-  const id = Math.random();
   let codeRef = undefined;
   let expanded = false;
   let showMoreLess = false;
 
   afterUpdate(() => {
-    showMoreLess = type === 'multi' && codeRef.getBoundingClientRect().height > 255;
+    if (type === 'multi' && codeRef) {
+      showMoreLess = codeRef.getBoundingClientRect().height > 255;
+    }
   });
 
   $: expandText = expanded ? showLessText : showMoreText;
 </script>
 
+{#if skeleton}
+  <CodeSnippetSkeleton class={className} {type} {style} />
+{/if}
+
+{#if !skeleton}
   {#if type === 'inline'}
     <Copy
       aria-label={$$props['aria-label'] || copyLabel}
       aria-describedby={id}
+      class={cx('--snippet', type && `--snippet--${type}`, type === 'inline' && '--btn--copy', expanded && '--snippet--expand', light && '--snippet--light', className)}
       on:click
       on:mouseover
       on:mouseenter
       on:mouseleave
-    class={cx('--snippet', type && `--snippet--${type}`, type === 'inline' && '--btn--copy', expanded && '--snippet--expand', light && '--snippet--light', className)}
       {feedback}
       {feedbackTimeout}
       {style}>
       <code {id}>
-      <slot />
+        <slot>{code}</slot>
       </code>
     </Copy>
   {:else}
     <div
-    on:click
       on:mouseover
       on:mouseenter
       on:mouseleave
@@ -61,16 +70,16 @@
         aria-label={$$props['aria-label'] || copyLabel || 'code-snippet'}>
         <code>
           <pre bind:this={codeRef}>
-          <slot />
+            <slot>{code}</slot>
           </pre>
         </code>
       </div>
       <CopyButton
-      on:click
+        iconDescription={copyButtonDescription}
         class={cx('--snippet-button')}
+        on:click
         {feedback}
-      {feedbackTimeout}
+        {feedbackTimeout} />
-      iconDescription={copyButtonDescription} />
       {#if showMoreLess}
         <Button
           kind="ghost"
@@ -87,3 +96,4 @@
       {/if}
     </div>
   {/if}
+{/if}

src/components/ComboBox/ComboBox.Story.svelte

@@ -0,0 +1,53 @@
+<script>
+  import Layout from '../../internal/ui/Layout.svelte';
+  import ToggleSmall from '../ToggleSmall';
+  import Button from '../Button';
+  import ComboBox from './ComboBox.svelte';
+
+  let items = [
+    { id: 'option-0', text: 'Option 1' },
+    { id: 'option-1', text: 'Option 2' },
+    { id: 'option-2', text: 'Option 3' },
+    { id: 'option-3', text: 'Option 4' },
+    {
+      id: 'option-4',
+      text: 'An example option that is really long to show what should be done to handle long text'
+    }
+  ];
+
+  let toggled = false;
+  let value = undefined;
+  let selectedIndex = -1;
+
+  function shouldFilterItem(item, value) {
+    if (!toggled || !value) {
+      return true;
+    }
+
+    return item.text.toLowerCase().includes(value.toLowerCase());
+  }
+</script>
+
+<Layout>
+  <p>Currently, this component does not support items as slots.</p>
+  <p>
+    <code>items</code>
+    must be an array of objects; mandatory fields are `id` and `text`.
+  </p>
+  <pre style="margin-top: 1rem;">
+    <code>{'items = Array<{ id: string; text: string; }>'}</code>
+  </pre>
+  <div style="margin-top: 2rem;">
+    <ToggleSmall labelText="Enable filtering" bind:toggled />
+    <Button
+      size="small"
+      on:click={() => {
+        selectedIndex = 1;
+      }}>
+      Set item to 'Option 2'
+    </Button>
+  </div>
+  <div style="width: 300px; margin-top: 2rem;">
+    <ComboBox {...$$props} id="combobox" bind:value bind:selectedIndex {items} {shouldFilterItem} />
+  </div>
+</Layout>

src/components/ComboBox/ComboBox.stories.js

@@ -0,0 +1,24 @@
+import { withKnobs, select, boolean, text } from '@storybook/addon-knobs';
+import Component from './ComboBox.Story.svelte';
+
+export default { title: 'ComboBox', decorators: [withKnobs] };
+
+const sizes = {
+  'Extra large size (xl)': 'xl',
+  'Regular size (lg)': '',
+  'Small size (sm)': 'sm'
+};
+
+export const Default = () => ({
+  Component,
+  props: {
+    size: select('Field size (size)', sizes, ''),
+    placeholder: text('Placeholder text (placeholder)', 'Filter...'),
+    titleText: text('Title (titleText)', 'Combobox title'),
+    helperText: text('Helper text (helperText)', 'Optional helper text here'),
+    light: boolean('Light (light)', false),
+    disabled: boolean('Disabled (disabled)', false),
+    invalid: boolean('Invalid (invalid)', false),
+    invalidText: text('Invalid text (invalidText)', 'A valid value is required')
+  }
+});

src/components/ComboBox/ComboBox.svelte

@@ -0,0 +1,188 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let disabled = false;
+  export let helperText = '';
+  export let id = Math.random();
+  export let invalid = false;
+  export let invalidText = '';
+  export let items = [];
+  export let itemToString = item => item.text || item.id;
+  export let light = false;
+  export let open = false;
+  export let placeholder = '';
+  export let selectedIndex = -1;
+  export let shouldFilterItem = () => true;
+  export let size = undefined;
+  export let style = undefined;
+  export let titleText = '';
+  export let translateWithId = undefined;
+  export let value = '';
+
+  import { afterUpdate } from 'svelte';
+  import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
+  import { cx } from '../../lib';
+  import ListBox, {
+    ListBoxField,
+    ListBoxMenu,
+    ListBoxMenuIcon,
+    ListBoxMenuItem,
+    ListBoxSelection
+  } from '../ListBox';
+
+  let selectedId = undefined;
+  let inputRef = undefined;
+  let inputValue = '';
+  let highlightedIndex = -1;
+
+  function change(direction) {
+    let index = highlightedIndex + direction;
+
+    if (index < 0) {
+      index = items.length - 1;
+    } else if (index >= items.length) {
+      index = 0;
+    }
+
+    highlightedIndex = index;
+  }
+
+  afterUpdate(() => {
+    if (open) {
+      inputRef.focus();
+      filteredItems = items.filter(item => shouldFilterItem(item, value));
+    } else {
+      highlightedIndex = -1;
+      inputValue = selectedItem ? selectedItem.text : '';
+    }
+  });
+
+  $: ariaLabel = $$props['aria-label'] || 'Choose an item';
+  $: menuId = `menu-${id}`;
+  $: comboId = `combo-${id}`;
+  $: highlightedId = items[highlightedIndex] ? items[highlightedIndex].id : undefined;
+  $: filteredItems = items.filter(item => shouldFilterItem(item, value));
+  $: selectedItem = items[selectedIndex];
+  $: inputValue = selectedItem ? selectedItem.text : undefined;
+  $: value = inputValue;
+</script>
+
+<svelte:body
+  on:click={({ target }) => {
+    if (open && inputRef && !inputRef.contains(target)) {
+      open = false;
+    }
+  }} />
+
+<div class={cx('--list-box__wrapper', className)} {style}>
+  {#if titleText}
+    <label class={cx('--label', disabled && '--label--disabled')} for={id}>{titleText}</label>
+  {/if}
+  {#if helperText}
+    <div class={cx('--form__helper-text', disabled && '--form__helper-text--disabled')}>
+      {helperText}
+    </div>
+  {/if}
+  <ListBox
+    class={cx('--combo-box')}
+    id={comboId}
+    aria-label={ariaLabel}
+    {disabled}
+    {invalid}
+    {invalidText}
+    {open}
+    {light}
+    {size}>
+    <ListBoxField
+      role="button"
+      aria-expanded={open}
+      on:click={() => {
+        open = true;
+      }}
+      {id}
+      {disabled}
+      {translateWithId}>
+      <input
+        bind:this={inputRef}
+        tabindex="0"
+        autocomplete="off"
+        aria-autocomplete="list"
+        aria-expanded={open}
+        aria-activedescendant={highlightedId}
+        aria-labelledby={comboId}
+        aria-disabled={disabled}
+        aria-controls={open ? menuId : undefined}
+        aria-owns={open ? menuId : undefined}
+        class={cx('--text-input', inputValue === '' && '--text-input--empty')}
+        on:input={({ target }) => {
+          inputValue = target.value;
+        }}
+        on:keydown
+        on:keydown|stopPropagation={({ key }) => {
+          if (key === 'Enter') {
+            open = !open;
+            if (highlightedIndex > -1 && highlightedIndex !== selectedIndex) {
+              selectedIndex = highlightedIndex;
+              open = false;
+            }
+          } else if (key === 'Tab') {
+            open = false;
+          } else if (key === 'ArrowDown') {
+            change(1);
+          } else if (key === 'ArrowUp') {
+            change(-1);
+          }
+        }}
+        on:focus
+        on:blur
+        on:blur={({ relatedTarget }) => {
+          if (relatedTarget && relatedTarget.getAttribute('role') !== 'button') {
+            inputRef.focus();
+          }
+        }}
+        {disabled}
+        {placeholder}
+        {id}
+        value={inputValue} />
+      {#if invalid}
+        <WarningFilled16 class={cx('--list-box__invalid-icon')} />
+      {/if}
+      {#if inputValue}
+        <ListBoxSelection
+          on:clear={() => {
+            selectedIndex = -1;
+            open = false;
+          }}
+          {translateWithId}
+          {disabled}
+          {open} />
+      {/if}
+      <ListBoxMenuIcon
+        on:click={() => {
+          open = !open;
+        }}
+        {translateWithId}
+        {open} />
+    </ListBoxField>
+    {#if open}
+      <ListBoxMenu aria-label={ariaLabel} {id}>
+        {#each filteredItems as item, i (item.id || i)}
+          <ListBoxMenuItem
+            id={item.id}
+            active={selectedIndex === i || selectedId === item.id}
+            highlighted={highlightedIndex === i || selectedIndex === i}
+            on:click={() => {
+              selectedId = item.id;
+              selectedIndex = items.map(({ id }) => id).indexOf(filteredItems[i].id);
+              open = false;
+            }}
+            on:mouseenter={() => {
+              highlightedIndex = i;
+            }}>
+            {itemToString(item)}
+          </ListBoxMenuItem>
+        {/each}
+      </ListBoxMenu>
+    {/if}
+  </ListBox>
+</div>

src/components/ComboBox/index.js

@@ -0,0 +1,3 @@
+import ComboBox from './ComboBox.svelte';
+
+export default ComboBox;

src/components/ComposedModal/ComposedModal.svelte

@@ -2,8 +2,8 @@
   let className = undefined;
   export { className as class };
   export let containerClass = undefined;
-  export let open = false;
   export let danger = false;
+  export let open = false;
   export let selectorPrimaryFocus = '[data-modal-primary-focus]';
   export let size = undefined;
   export let style = undefined;

src/components/ContentSwitcher/ContentSwitcher.svelte

@@ -9,6 +9,7 @@
   import { cx } from '../../lib';
 
   const dispatch = createEventDispatcher();
+
   let currentId = writable(null);
   let currentIndex = selectedIndex;
   let switches = [];

src/components/CopyButton/CopyButton.svelte

@@ -1,9 +1,9 @@
 <script>
   let className = undefined;
   export { className as class };
-  export let iconDescription = 'Copy to clipboard';
   export let feedback = 'Copied!';
   export let feedbackTimeout = 2000;
+  export let iconDescription = 'Copy to clipboard';
   export let style = undefined;
 
   import { afterUpdate, onDestroy } from 'svelte';

src/components/DataTable/DataTable.Story.svelte

@@ -0,0 +1,152 @@
+<script>
+  export let story = undefined;
+
+  import Layout from '../../internal/ui/Layout.svelte';
+  import DataTable from './DataTable.svelte';
+  import Table from './Table.svelte';
+  import TableBody from './TableBody.svelte';
+  import TableCell from './TableCell.svelte';
+  import TableContainer from './TableContainer.svelte';
+  import TableHead from './TableHead.svelte';
+  import TableHeader from './TableHeader.svelte';
+  import TableRow from './TableRow.svelte';
+
+  let rows = [
+    {
+      id: 'a',
+      name: 'Load Balancer 3',
+      protocol: 'HTTP',
+      port: 3000,
+      rule: 'Round robin',
+      attached_groups: 'Kevins VM Groups',
+      status: 'Disabled'
+    },
+    {
+      id: 'b',
+      name: 'Load Balancer 1',
+      protocol: 'HTTP',
+      port: 443,
+      rule: 'Round robin',
+      attached_groups: 'Maureens VM Groups',
+      status: 'Starting'
+    },
+    {
+      id: 'c',
+      name: 'Load Balancer 2',
+      protocol: 'HTTP',
+      port: 80,
+      rule: 'DNS delegation',
+      attached_groups: 'Andrews VM Groups',
+      status: 'Active'
+    },
+    {
+      id: 'd',
+      name: 'Load Balancer 6',
+      protocol: 'HTTP',
+      port: 3000,
+      rule: 'Round robin',
+      attached_groups: 'Marcs VM Groups',
+      status: 'Disabled'
+    },
+    {
+      id: 'e',
+      name: 'Load Balancer 4',
+      protocol: 'HTTP',
+      port: 443,
+      rule: 'Round robin',
+      attached_groups: 'Mels VM Groups',
+      status: 'Starting'
+    },
+    {
+      id: 'f',
+      name: 'Load Balancer 5',
+      protocol: 'HTTP',
+      port: 80,
+      rule: 'DNS delegation',
+      attached_groups: 'Ronjas VM Groups',
+      status: 'Active'
+    }
+  ];
+  let headers = [
+    { key: 'name', value: 'Name' },
+    { key: 'protocol', value: 'Protocol' },
+    { key: 'port', value: 'Port' },
+    { key: 'rule', value: 'Rule' },
+    { key: 'attached_groups', value: 'Attached Groups' },
+    { key: 'status', value: 'Status' }
+  ];
+  let sortable = true;
+</script>
+
+<Layout>
+  {#if story === 'composed'}
+    <DataTable {...$$props} {rows} {headers} let:props>
+      <TableContainer
+        title="DataTable"
+        description="With default options"
+        {...props.getTableContainerProps()}>
+        <Table {...props.getTableProps()}>
+          <TableHead>
+            <TableRow>
+              {#each props.headers as header, i (header.key)}
+                <TableHeader {...props.getHeaderProps({ header })}>{header.header}</TableHeader>
+              {/each}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {#each props.rows as row, i}
+              <TableRow {...props.getRowProps({ row })}>
+                {#each row.cells as cell, j}
+                  <TableCell>{cell.value}</TableCell>
+                {/each}
+              </TableRow>
+            {/each}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </DataTable>
+  {:else if story === 'sortable'}
+    <DataTable
+      bind:sortable
+      title={$$props.title}
+      description={$$props.description}
+      zebra={$$props.zebra}
+      size={$$props.size}
+      stickyHeader={$$props.stickyHeader}
+      on:click={({ detail }) => {
+        console.log('on:click', detail);
+      }}
+      on:click:header={({ detail }) => {
+        console.log('on:click:header', detail);
+      }}
+      on:click:row={({ detail }) => {
+        console.log('on:click:row', detail);
+      }}
+      on:click:cell={({ detail }) => {
+        console.log('on:click:cell', detail);
+      }}
+      {rows}
+      {headers} />
+  {:else}
+    <DataTable
+      title={$$props.title}
+      description={$$props.description}
+      zebra={$$props.zebra}
+      size={$$props.size}
+      stickyHeader={$$props.stickyHeader}
+      on:click={({ detail }) => {
+        console.log('on:click', detail);
+      }}
+      on:click:header={({ detail }) => {
+        console.log('on:click:header', detail);
+      }}
+      on:click:row={({ detail }) => {
+        console.log('on:click:row', detail);
+      }}
+      on:click:cell={({ detail }) => {
+        console.log('on:click:cell', detail);
+      }}
+      {rows}
+      {headers} />
+  {/if}
+</Layout>

src/components/DataTable/DataTable.stories.js

@@ -0,0 +1,35 @@
+import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
+import Component from './DataTable.Story.svelte';
+
+export default { title: 'DataTable', decorators: [withKnobs] };
+
+export const Default = () => ({
+  Component,
+  props: {
+    title: text('Optional DataTable title (title)', ''),
+    description: text('Optional DataTable description (description)', ''),
+    zebra: boolean('Zebra row styles (zebra)', false),
+    size: select(
+      'Row height (size)',
+      { compact: 'compact', short: 'short', tall: 'tall', none: null },
+      null
+    ),
+    stickyHeader: boolean('Sticky header (experimental)', false)
+  }
+});
+
+export const Sortable = () => ({
+  Component,
+  props: {
+    story: 'sortable',
+    title: text('Optional DataTable title (title)', ''),
+    description: text('Optional DataTable description (description)', ''),
+    zebra: boolean('Zebra row styles (zebra)', false),
+    size: select(
+      'Row height (size)',
+      { compact: 'compact', short: 'short', tall: 'tall', none: null },
+      null
+    ),
+    stickyHeader: boolean('Sticky header (experimental)', false)
+  }
+});

src/components/DataTable/DataTable.svelte

@@ -0,0 +1,118 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let title = '';
+  export let description = '';
+  export let zebra = false;
+  export let rows = [];
+  export let headers = [];
+  export let stickyHeader = false;
+  export let size = undefined;
+  export let sortable = false;
+  export let style = undefined;
+
+  import { createEventDispatcher, setContext } from 'svelte';
+  import { writable, derived } from 'svelte/store';
+  import Table from './Table.svelte';
+  import TableBody from './TableBody.svelte';
+  import TableCell from './TableCell.svelte';
+  import TableContainer from './TableContainer.svelte';
+  import TableHead from './TableHead.svelte';
+  import TableHeader from './TableHeader.svelte';
+  import TableRow from './TableRow.svelte';
+
+  const dispatch = createEventDispatcher();
+  const sortDirectionMap = { none: 'ascending', ascending: 'descending', descending: 'none' };
+
+  let tableSortable = writable(sortable);
+  let sortHeader = writable({ id: null, key: null, sortDirection: 'none' });
+  let headerItems = writable([]);
+  let thKeys = derived(headerItems, () =>
+    headers
+      .map(({ key }, i) => ({ key, id: $headerItems[i] }))
+      .reduce((a, c) => ({ ...a, [c.key]: c.id }), {})
+  );
+
+  setContext('DataTable', {
+    sortHeader,
+    tableSortable,
+    add: id => {
+      headerItems.update(_ => [..._, id]);
+    }
+  });
+
+  $: tableSortable.set(sortable);
+  $: headerKeys = headers.map(({ key }) => key);
+  $: rows = rows.map(row => ({ ...row, cells: headerKeys.map(key => ({ key, value: row[key] })) }));
+  $: sortedRows = rows;
+  $: ascending = $sortHeader.sortDirection === 'ascending';
+  $: sortKey = $sortHeader.key;
+  $: sorting = sortable && sortKey != null;
+  $: if (sorting) {
+    if ($sortHeader.sortDirection === 'none') {
+      sortedRows = rows;
+    } else {
+      sortedRows = [...rows].sort((a, b) => {
+        const itemA = ascending ? a[sortKey] : b[sortKey];
+        const itemB = ascending ? b[sortKey] : a[sortKey];
+
+        if (typeof itemA === 'number' && typeof itemB === 'number') {
+          return itemA - itemB;
+        }
+
+        return itemA.toString().localeCompare(itemB.toString(), 'en', { numeric: true });
+      });
+    }
+  }
+  $: props = {
+    headers,
+    rows
+  };
+</script>
+
+<slot {props}>
+  <TableContainer class={className} {title} {description} {style}>
+    <Table {zebra} {size} {stickyHeader} {sortable}>
+      <TableHead>
+        <TableRow>
+          {#each headers as header, i (header.key)}
+            <TableHeader
+              on:click={() => {
+                dispatch('click', { header });
+                dispatch('click:header', header);
+                let active = header.key === $sortHeader.key;
+                let currentSortDirection = active ? $sortHeader.sortDirection : 'none';
+                let sortDirection = sortDirectionMap[currentSortDirection];
+                sortHeader.set({
+                  id: sortDirection === 'none' ? null : $thKeys[header.key],
+                  key: header.key,
+                  sortDirection
+                });
+              }}>
+              {header.value}
+            </TableHeader>
+          {/each}
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {#each sorting ? sortedRows : rows as row, i (row.id)}
+          <TableRow
+            on:click={() => {
+              dispatch('click', { row });
+              dispatch('click:row', row);
+            }}>
+            {#each row.cells as cell, j (cell.key)}
+              <TableCell
+                on:click={() => {
+                  dispatch('click', { row, cell });
+                  dispatch('click:cell', cell);
+                }}>
+                {cell.value}
+              </TableCell>
+            {/each}
+          </TableRow>
+        {/each}
+      </TableBody>
+    </Table>
+  </TableContainer>
+</slot>

src/components/DataTable/Table.svelte

@@ -0,0 +1,28 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let zebra = false;
+  export let size = undefined;
+  export let useStaticWidth = false;
+  export let shouldShowBorder = false;
+  export let sortable = false;
+  export let stickyHeader = false;
+  export let style = undefined;
+
+  import { cx } from '../../lib';
+</script>
+
+{#if stickyHeader}
+  <section class={cx('--data-table_inner-container', className)} {style}>
+    <table
+      class={cx('--data-table', size === 'compact' && '--data-table--compact', size === 'short' && '--data-table--short', size === 'tall' && '--data-table--tall', sortable && '--data-table--sort', zebra && '--data-table--zebra', useStaticWidth && '--data-table--static', !shouldShowBorder && '--data-table--no-border', stickyHeader && '--data-table--sticky-header')}>
+      <slot />
+    </table>
+  </section>
+{:else}
+  <table
+    class={cx('--data-table', size === 'compact' && '--data-table--compact', size === 'short' && '--data-table--short', size === 'tall' && '--data-table--tall', sortable && '--data-table--sort', zebra && '--data-table--zebra', useStaticWidth && '--data-table--static', !shouldShowBorder && '--data-table--no-border', stickyHeader && '--data-table--sticky-header', className)}
+    {style}>
+    <slot />
+  </table>
+{/if}

src/components/DataTable/TableBody.svelte

@@ -0,0 +1,9 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let style = undefined;
+</script>
+
+<tbody aria-live={$$props['aria-live'] || 'polite'} class={className} {style}>
+  <slot />
+</tbody>

src/components/DataTable/TableCell.svelte

@@ -0,0 +1,9 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let style = undefined;
+</script>
+
+<td on:click on:mouseover on:mouseenter on:mouseleave class={className} {style}>
+  <slot />
+</td>

src/components/DataTable/TableContainer.svelte

@@ -0,0 +1,22 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let stickyHeader = false;
+  export let title = '';
+  export let description = '';
+  export let style = undefined;
+
+  import { cx } from '../../lib';
+</script>
+
+<div
+  class={cx('--data-table-container', stickyHeader && '--data-table--max-width', className)}
+  {style}>
+  {#if title}
+    <div class={cx('--data-table-header')}>
+      <h4 class={cx('--data-table-header__title')}>{title}</h4>
+      <p class={cx('--data-table-header__description')}>{description}</p>
+    </div>
+  {/if}
+  <slot />
+</div>

src/components/DataTable/TableHead.svelte

@@ -0,0 +1,9 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let style = undefined;
+</script>
+
+<thead on:click on:mouseover on:mouseenter on:mouseleave class={className} {style}>
+  <slot />
+</thead>

src/components/DataTable/TableHeader.svelte

@@ -0,0 +1,47 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let scope = 'col';
+  export let translateWithId = () => '';
+  export let style = undefined;
+
+  import { getContext } from 'svelte';
+  import ArrowUp20 from 'carbon-icons-svelte/lib/ArrowUp20';
+  import ArrowsVertical20 from 'carbon-icons-svelte/lib/ArrowsVertical20';
+  import { cx } from '../../lib';
+
+  const id = Math.random();
+  const { sortHeader, tableSortable, add } = getContext('DataTable');
+
+  add(id);
+
+  $: active = $sortHeader.id === id;
+  // TODO: translate with id
+  $: ariaLabel = translateWithId();
+</script>
+
+{#if $tableSortable}
+  <th
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+    class={className}
+    aria-sort={active ? $sortHeader.sortDirection : 'none'}
+    {scope}>
+    <button
+      class={cx('--table-sort', active && '--table-sort--active', active && $sortHeader.sortDirection === 'descending' && '--table-sort--ascending')}
+      on:click>
+      <span class={cx('--table-header-label')}>
+        <slot />
+      </span>
+      <ArrowUp20 class={cx('--table-sort__icon')} aria-label={ariaLabel} />
+      <ArrowsVertical20 class={cx('--table-sort__icon-unsorted')} aria-label={ariaLabel} />
+    </button>
+  </th>
+{:else}
+  <th on:click on:mouseover on:mouseenter on:mouseleave class={className} {style} {scope}>
+    <span class={cx('--table-header-label')}>
+      <slot />
+    </span>
+  </th>
+{/if}

src/components/DataTable/TableRow.svelte

@@ -1,17 +1,20 @@
 <script>
   let className = undefined;
   export { className as class };
+  export let isSelected = false;
   export let style = undefined;
 
   import { cx } from '../../lib';
+
+  // TODO: include ariaLabel, onExpand, isExpanded, isSelected
 </script>
 
-<span
+<tr
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
-  class={cx('--tile-content__above-the-fold', className)}
+  class={cx(isSelected && '--data-table--selected', className)}
   {style}>
   <slot />
-</span>
+</tr>

src/components/DataTable/index.js

@@ -0,0 +1,3 @@
+import DataTable from './DataTable.svelte';
+
+export default DataTable;

src/components/DataTableSkeleton/DataTableSkeleton.svelte

@@ -1,12 +1,12 @@
 <script>
   let className = undefined;
   export { className as class };
-  export let zebra = false;
+  export let columns = 5;
   export let compact = false;
   export let headers = [];
   export let rows = 5;
-  export let columns = 5;
   export let style = undefined;
+  export let zebra = false;
 
   import { cx, fillArray } from '../../lib';
 

src/components/DatePicker/DatePicker.Story.svelte

@@ -3,8 +3,8 @@
 
   import Layout from '../../internal/ui/Layout.svelte';
   import DatePicker from './DatePicker.svelte';
-  import DatePickerSkeleton from './DatePicker.Skeleton.svelte';
   import DatePickerInput from './DatePickerInput.svelte';
+  import DatePickerSkeleton from './DatePicker.Skeleton.svelte';
 
   let datePickerType = 'simple';
   let value = '';

src/components/DatePicker/DatePicker.svelte

@@ -1,21 +1,21 @@
 <script>
   let className = undefined;
   export { className as class };
-  export let id = Math.random();
-  export let short = false;
-  export let datePickerType = 'simple';
-  export let dateFormat = 'm/d/Y';
-  export let locale = 'en';
-  export let value = '';
   export let appendTo = document.body;
-  export let minDate = null;
+  export let dateFormat = 'm/d/Y';
-  export let maxDate = null;
+  export let datePickerType = 'simple';
+  export let id = Math.random();
   export let light = false;
+  export let locale = 'en';
+  export let maxDate = null;
+  export let minDate = null;
+  export let short = false;
   export let style = undefined;
+  export let value = '';
 
   import { createEventDispatcher, setContext, afterUpdate, onDestroy } from 'svelte';
   import { writable, derived } from 'svelte/store';
-  import { createCalendar } from './flatpickr';
+  import { createCalendar } from './createCalendar';
   import { cx } from '../../lib';
 
   const dispatch = createEventDispatcher();

src/components/DatePicker/DatePickerInput.svelte

@@ -1,17 +1,17 @@
 <script>
   let className = undefined;
   export { className as class };
-  export let id = Math.random();
-  export let iconDescription = '';
-  export let labelText = '';
-  export let hideLabel = false;
-  export let pattern = '\\d{1,2}\\/\\d{1,2}\\/\\d{4}';
-  export let type = 'text';
-  export let placeholder = '';
   export let disabled = false;
+  export let hideLabel = false;
+  export let iconDescription = '';
+  export let id = Math.random();
   export let invalid = false;
   export let invalidText = '';
+  export let labelText = '';
+  export let pattern = '\\d{1,2}\\/\\d{1,2}\\/\\d{4}';
+  export let placeholder = '';
   export let style = undefined;
+  export let type = 'text';
 
   import { getContext, onMount } from 'svelte';
   import Calendar16 from 'carbon-icons-svelte/lib/Calendar16';

src/components/DatePicker/createCalendar.js

@@ -1,12 +1,14 @@
 import flatpickr from 'flatpickr';
-import l10n from 'flatpickr/dist/l10n';
+import l10n from 'flatpickr/dist/l10n/index.js';
 import rangePlugin from 'flatpickr/dist/plugins/rangePlugin';
 import { cx } from '../../lib';
 
+if (l10n.en) {
   l10n.en.weekdays.shorthand.forEach((_, index) => {
     const shorthand = _.slice(0, 2);
     l10n.en.weekdays.shorthand[index] = shorthand === 'Th' ? 'Th' : shorthand.charAt(0);
   });
+}
 
 function updateClasses(instance) {
   const { calendarContainer, days, daysContainer, weekdayContainer, selectedDates } = instance;

src/components/Dropdown/Dropdown.Skeleton.svelte

@@ -0,0 +1,20 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let inline = false;
+  export let style = undefined;
+
+  import { cx } from '../../lib';
+</script>
+
+<div
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  class={cx('--skeleton', '--dropdown-v2', '--list-box', '--form-item', inline && '--list-box--inline', className)}
+  {style}>
+  <div role="button" class={cx('--list-box__field')}>
+    <span class={cx('--list-box__label')} />
+  </div>
+</div>

src/components/Dropdown/Dropdown.Story.svelte

@@ -0,0 +1,49 @@
+<script>
+  export let story = undefined;
+
+  import Layout from '../../internal/ui/Layout.svelte';
+  import Button from '../Button';
+  import Dropdown from './Dropdown.svelte';
+  import DropdownSkeleton from './Dropdown.Skeleton.svelte';
+
+  let items = [
+    { id: 'option-0', text: 'Option 1' },
+    { id: 'option-1', text: 'Option 2' },
+    { id: 'option-2', text: 'Option 3' },
+    { id: 'option-3', text: 'Option 4' }
+  ];
+
+  let selectedIndex = -1;
+</script>
+
+<Layout>
+
+  {#if story === 'skeleton'}
+    <div style="width: 300px">
+      <DropdownSkeleton />
+      &nbsp;
+      <DropdownSkeleton inline />
+    </div>
+  {:else}
+    <p>Currently, this component does not support items as slots.</p>
+    <p>
+      <code>items</code>
+      must be an array of objects; mandatory fields are `id` and `text`.
+    </p>
+    <pre style="margin-top: 1rem;">
+      <code>{'items = Array<{ id: string; text: string; }>'}</code>
+    </pre>
+    <div style="margin-top: 2rem; margin-bottom: 2rem;">
+      <Button
+        size="small"
+        on:click={() => {
+          selectedIndex = selectedIndex > -1 ? -1 : 1;
+        }}>
+        {selectedIndex > -1 ? 'Clear selected item' : "Set item to 'Option 2'"}
+      </Button>
+    </div>
+    <div style="width: 300px">
+      <Dropdown {...$$props} bind:selectedIndex {items} />
+    </div>
+  {/if}
+</Layout>

src/components/Dropdown/Dropdown.stories.js

@@ -0,0 +1,34 @@
+import { withKnobs, select, text, boolean } from '@storybook/addon-knobs';
+import Component from './Dropdown.Story.svelte';
+
+export default { title: 'Dropdown', decorators: [withKnobs] };
+
+const types = {
+  'Default (default)': 'default',
+  'Inline (inline)': 'inline'
+};
+
+const sizes = {
+  'Extra large size (xl)': 'xl',
+  'Regular size (lg)': '',
+  'Small size (sm)': 'sm'
+};
+
+export const Default = () => ({
+  Component,
+  props: {
+    id: text('Dropdown ID (id)', 'carbon-dropdown-example'),
+    type: select('Dropdown type (type)', types, 'default'),
+    size: select('Field size (size)', sizes, '') || undefined,
+    label: text('Label (label)', 'Dropdown menu options'),
+    'aria-label': text('Aria Label (aria-label)', 'Dropdown'),
+    disabled: boolean('Disabled (disabled)', false),
+    light: boolean('Light variant (light)', false),
+    titleText: text('Title (titleText)', 'This is not a dropdown title.'),
+    helperText: text('Helper text (helperText)', 'This is not some helper text.'),
+    invalid: boolean('Show form validation UI (invalid)', false),
+    invalidText: text('Form validation UI content (invalidText)', 'A valid value is required')
+  }
+});
+
+export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });

src/components/Dropdown/Dropdown.svelte

@@ -0,0 +1,144 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let disabled = false;
+  export let helperText = '';
+  export let id = Math.random();
+  export let inline = false;
+  export let invalid = false;
+  export let invalidText = '';
+  export let items = [];
+  export let itemToString = item => item.text || item.id;
+  export let label = undefined;
+  export let light = false;
+  export let open = false;
+  export let selectedIndex = -1;
+  export let size = undefined;
+  export let style = undefined;
+  export let titleText = '';
+  export let translateWithId = undefined;
+  export let type = 'default';
+
+  import { setContext } from 'svelte';
+  import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
+  import { cx } from '../../lib';
+  import ListBox, { ListBoxField, ListBoxMenu, ListBoxMenuIcon, ListBoxMenuItem } from '../ListBox';
+
+  let selectedId = undefined;
+  let fieldRef = undefined;
+  let highlightedIndex = -1;
+
+  setContext('Dropdown', {
+    declareRef: ({ ref }) => {
+      fieldRef = ref;
+    }
+  });
+
+  function change(direction) {
+    let index = highlightedIndex + direction;
+
+    if (index < 0) {
+      index = items.length - 1;
+    } else if (index >= items.length) {
+      index = 0;
+    }
+
+    highlightedIndex = index;
+  }
+
+  $: inline = type === 'inline';
+  $: selectedItem = items[selectedIndex];
+  $: if (!open) {
+    highlightedIndex = -1;
+  }
+</script>
+
+<svelte:body
+  on:click={({ target }) => {
+    if (open && fieldRef && !fieldRef.contains(target)) {
+      open = false;
+    }
+  }} />
+
+<div
+  class={cx('--dropdown__wrapper', '--list-box__wrapper', inline && '--dropdown__wrapper--inline', inline && '--list-box__wrapper--inline', inline && invalid && '--dropdown__wrapper--inline--invalid', inline && invalid && '--list-box__wrapper--inline--invalid', className)}
+  {style}>
+  {#if titleText}
+    <label for={id} class={cx('--label', disabled && '--label--disabled')}>{titleText}</label>
+  {/if}
+  {#if !inline && helperText}
+    <div class={cx('--form__helper-text', disabled && '--form__helper-text--disabled')}>
+      {helperText}
+    </div>
+  {/if}
+  <ListBox
+    {type}
+    {size}
+    {id}
+    aria-label={$$props['aria-label']}
+    class={cx('--dropdown', invalid && '--dropdown--invalid', open && '--dropdown--open', inline && '--dropdown--inline', disabled && '--dropdown--disabled', light && '--dropdown--light')}
+    on:click={({ target }) => {
+      open = fieldRef.contains(target) ? !open : false;
+    }}
+    {disabled}
+    {open}
+    {invalid}
+    {invalidText}
+    {light}>
+    {#if invalid}
+      <WarningFilled16 class={cx('--list-box__invalid-icon')} />
+    {/if}
+    <ListBoxField
+      tabindex="0"
+      role="button"
+      aria-expanded={open}
+      on:keydown={({ key }) => {
+        if (key === 'Enter') {
+          open = !open;
+          if (highlightedIndex > -1 && highlightedIndex !== selectedIndex) {
+            selectedIndex = highlightedIndex;
+            open = false;
+          }
+        } else if (key === 'Tab') {
+          open = false;
+          fieldRef.blur();
+        } else if (key === 'ArrowDown') {
+          change(1);
+        } else if (key === 'ArrowUp') {
+          change(-1);
+        }
+      }}
+      on:blur={({ relatedTarget }) => {
+        if (relatedTarget) {
+          fieldRef.focus();
+        }
+      }}
+      {disabled}
+      {translateWithId}
+      {id}>
+      <span class={cx('--list-box__label')}>
+        {#if selectedItem}{itemToString(selectedItem)}{:else}{label}{/if}
+      </span>
+      <ListBoxMenuIcon {open} {translateWithId} />
+    </ListBoxField>
+    {#if open}
+      <ListBoxMenu aria-labelledby={id} {id}>
+        {#each items as item, i (item.id || i)}
+          <ListBoxMenuItem
+            id={item.id}
+            active={selectedIndex === i || selectedId === item.id}
+            highlighted={highlightedIndex === i || selectedIndex === i}
+            on:click={() => {
+              selectedId = item.id;
+              selectedIndex = i;
+            }}
+            on:mouseenter={() => {
+              highlightedIndex = i;
+            }}>
+            {itemToString(item)}
+          </ListBoxMenuItem>
+        {/each}
+      </ListBoxMenu>
+    {/if}
+  </ListBox>
+</div>

src/components/Dropdown/index.js

@@ -0,0 +1,4 @@
+import Dropdown from './Dropdown.svelte';
+
+export default Dropdown;
+export { default as DropdownSkeleton } from './Dropdown.Skeleton.svelte';

src/components/FileUploader/FileUploader.Skeleton.svelte

@@ -4,8 +4,8 @@
   export let style = undefined;
 
   import { cx } from '../../lib';
-  import SkeletonText from '../SkeletonText';
   import { ButtonSkeleton } from '../Button';
+  import SkeletonText from '../SkeletonText';
 </script>
 
 <div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>

src/components/FileUploader/FileUploader.Story.svelte

@@ -6,8 +6,8 @@
   import Button from '../Button';
   import FileUploader from './FileUploader.svelte';
   import FileUploaderButton from './FileUploaderButton.svelte';
-  import FileUploaderItem from './FileUploaderItem.svelte';
   import FileUploaderDropContainer from './FileUploaderDropContainer.svelte';
+  import FileUploaderItem from './FileUploaderItem.svelte';
   import FileUploaderSkeleton from './FileUploader.Skeleton.svelte';
 
   let fileUploader = undefined;

src/components/FileUploader/FileUploader.svelte

@@ -1,17 +1,17 @@
 <script>
   let className = undefined;
   export { className as class };
-  export let files = [];
   export const clearFiles = () => (files = []);
-  export let name = '';
+  export let accept = [];
+  export let buttonLabel = '';
+  export let files = [];
+  export let iconDescription = 'Provide icon description';
+  export let kind = 'primary';
   export let labelDescription = '';
   export let labelTitle = '';
-  export let iconDescription = 'Provide icon description';
-  export let status = 'uploading';
-  export let buttonLabel = '';
-  export let kind = 'primary';
   export let multiple = false;
-  export let accept = [];
+  export let name = '';
+  export let status = 'uploading';
   export let style = undefined;
 
   import { createEventDispatcher, afterUpdate } from 'svelte';

src/components/FileUploader/FileUploaderButton.svelte

@@ -1,17 +1,17 @@
 <script>
   let className = undefined;
   export { className as class };
+  export let accept = [];
+  export let disabled = false;
   export let disableLabelChanges = false;
   export let id = Math.random();
+  export let kind = 'primary';
   export let labelText = 'Add file';
   export let multiple = false;
   export let name = '';
   export let role = 'button';
-  export let tabindex = '0';
-  export let kind = 'primary';
-  export let accept = [];
-  export let disabled = false;
   export let style = undefined;
+  export let tabindex = '0';
 
   import { cx } from '../../lib';
 

src/components/FileUploader/FileUploaderDropContainer.svelte

@@ -1,16 +1,16 @@
 <script>
   let className = undefined;
   export { className as class };
-  export let name = '';
+  export let accept = [];
-  export let role = 'button';
-  export let id = Math.random();
   export let disabled = false;
-  export let tabindex = '0';
+  export let id = Math.random();
   export let labelText = 'Add file';
   export let multiple = false;
-  export let accept = [];
+  export let name = '';
-  export let validateFiles = files => files;
+  export let role = 'button';
   export let style = undefined;
+  export let tabindex = '0';
+  export let validateFiles = files => files;
 
   import { createEventDispatcher } from 'svelte';
   import { cx } from '../../lib';

src/components/FileUploader/FileUploaderItem.svelte

@@ -1,13 +1,13 @@
 <script>
   let className = undefined;
   export { className as class };
-  export let id = Math.random();
-  export let status = 'uploading';
-  export let iconDescription = '';
-  export let name = '';
-  export let invalid = false;
-  export let errorSubject = '';
   export let errorBody = '';
+  export let errorSubject = '';
+  export let iconDescription = '';
+  export let id = Math.random();
+  export let invalid = false;
+  export let name = '';
+  export let status = 'uploading';
   export let style = undefined;
 
   import { createEventDispatcher } from 'svelte';

src/components/FileUploader/Filename.svelte

@@ -1,11 +1,11 @@
 <script>
   let className = undefined;
   export { className as class };
-  export let status = 'uploading';
   export let iconDescription = '';
   export let invalid = false;
-  export let tabindex = '0';
+  export let status = 'uploading';
   export let style = undefined;
+  export let tabindex = '0';
 
   import Close16 from 'carbon-icons-svelte/lib/Close16';
   import CheckmarkFilled16 from 'carbon-icons-svelte/lib/CheckmarkFilled16';

src/components/Form/Form.Story.svelte

@@ -0,0 +1,74 @@
+<script>
+  import Layout from '../../internal/ui/Layout.svelte';
+  import Checkbox from '../Checkbox';
+  import FormGroup from '../FormGroup';
+  import FileUploader from '../FileUploader';
+  import NumberInput from '../NumberInput';
+  import RadioButton from '../RadioButton';
+  import RadioButtonGroup from '../RadioButtonGroup';
+  import Button from '../Button';
+  import Search from '../Search';
+  import Select, { SelectItem } from '../Select';
+  import TextArea from '../TextArea';
+  import TextInput from '../TextInput';
+  import Toggle from '../Toggle';
+  import Form from './Form.svelte';
+</script>
+
+<Layout>
+  <Form
+    on:submit={event => {
+      console.log('on:submit', event);
+    }}>
+    <FormGroup {...$$props}>
+      <Checkbox id="checkbox-0" labelText="Checkbox Label" checked />
+      <Checkbox id="checkbox-1" labelText="Checkbox Label" />
+      <Checkbox id="checkbox-2" labelText="Checkbox Label" disabled />
+    </FormGroup>
+    <NumberInput id="number-input-1" label="Number Input" min={0} max={100} value={50} step={10} />
+    <FormGroup legendText="Toggle heading">
+      <Toggle id="toggle-1" />
+      <Toggle id="toggle-2" disabled />
+    </FormGroup>
+    <FormGroup legendText="File Uploader">
+      <FileUploader id="file-1" buttonLabel="Add files" labelDescription="Choose Files..." />
+    </FormGroup>
+    <FormGroup legendText="Radio Button heading">
+      <RadioButtonGroup name="radio-button-group" defaultSelected="default-selected">
+        <RadioButton id="radio-1" value="standard" labelText="Standard Radio Button" />
+        <RadioButton
+          id="radio-2"
+          value="default-selected"
+          labelText="Default Selected Radio Button" />
+        <RadioButton id="radio-3" value="blue" labelText="Standard Radio Button" />
+        <RadioButton id="radio-4" value="disabled" labelText="Disabled Radio Button" disabled />
+      </RadioButtonGroup>
+    </FormGroup>
+    <FormGroup legendText="Search">
+      <Search id="search-1" labelText="Search" placeholder="Search" />
+    </FormGroup>
+    <Select id="select-1" defaultValue="placeholder-item">
+      <SelectItem disabled hidden value="placeholder-item" text="Choose an option" />
+      <SelectItem value="option-1" text="Option 1" />
+      <SelectItem value="option-2" text="Option 2" />
+      <SelectItem value="option-3" text="Option 3" />
+    </Select>
+    <TextInput id="text-input-1" labelText="Text Input label" placeholder="Placeholder text" />
+    <TextInput id="text-input-2" type="password" labelText="Password" required />
+    <TextInput
+      id="text-input-3"
+      type="password"
+      labelText="Password"
+      invalidText="Your password must be at least 6 characters as well as contain at least one
+      uppercase, one lowercase, and one number."
+      required
+      invalid />
+    <TextArea
+      id="text-area"
+      labelText="Text Area label"
+      placeholder="Placeholder text"
+      rows={4}
+      cols={50} />
+    <Button type="submit">Submit</Button>
+  </Form>
+</Layout>

src/components/Form/Form.stories.js

@@ -0,0 +1,14 @@
+import { withKnobs, text, boolean } from '@storybook/addon-knobs';
+import Component from './Form.Story.svelte';
+
+export default { title: 'Form', decorators: [withKnobs] };
+
+export const Default = () => ({
+  Component,
+  props: {
+    legendText: text('Text in <legend> (legendText)', 'Checkbox heading'),
+    message: boolean('Show form requirement (message)', false),
+    messageText: text('Form requirement text (messageText)', ''),
+    invalid: boolean('Mark as invalid (invalid)', false)
+  }
+});

src/components/Form/Form.svelte

@@ -6,6 +6,13 @@
   import { cx } from '../../lib';
 </script>
 
-<form on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form', className)} {style}>
+<form
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  on:submit|preventDefault
+  class={cx('--form', className)}
+  {style}>
   <slot />
 </form>