Merge pull request #244 from IBM/precompiled-css

build pre-compiled CSS from Carbon themes
2025-09-15 10:21:05 +00:00 · 2020-09-13 13:52:53 -07:00 · 2020-09-13 13:52:53 -07:00 · 54f591961e
commit 54f591961e
parent 33704fd5a9 5cad8ad749
82 changed files with 16324 additions and 141 deletions
--- a/.gitignore
+++ b/.gitignore
@ -2,6 +2,7 @@
 /lib
 /node_modules
 /storybook-static
+/css
 .DS_Store
 yarn-debug.log*
 yarn-error.log*
--- a/.storybook/config.js
+++ b/.storybook/config.js
@ -1,3 +1,4 @@
 import { configure } from "@storybook/svelte";
+import "../css/g10.css";

 configure(require.context("../src", true, /\.stories\.js$/), module);
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@ -1,4 +0,0 @@
-<link
-  rel="stylesheet"
-  href="https://unpkg.com/carbon-components/css/carbon-components.min.css"
-/>
--- a/README.md
+++ b/README.md
@ -5,38 +5,116 @@

 > Svelte implementation of the [Carbon Design System](https://github.com/carbon-design-system)

-## Getting Started
+## Getting started

-`carbon-components-svelte` can be installed as a development dependency.
+Install `carbon-components-svelte` as a development dependency.

 ```bash
 yarn add -D carbon-components-svelte
+# OR
+npm -i -D carbon-components-svelte
 ```

 ## Usage

+The quickest way to get started is to customize a template from the [examples](examples/) folder.
+
+Example set-ups demonstrate usage with popular application bundlers and frameworks. They feature a mix of Singe-page Applications (SPA), Server-side rendering (SSR) and statically exported approaches.
+
+- **[rollup](examples/rollup/)**: SPA bundled using [Rollup](https://github.com/rollup/rollup)
+- **[rollup-typescript](examples/rollup-typescript/)**: SPA bundled using [Rollup](https://github.com/rollup/rollup) with TypeScript support
+- **[routify](examples/routify/)**: SPA + static export using [Routify](https://github.com/roxiness/routify)
+- **[sapper](examples/sapper/)**: SSR + static export using [Sapper](https://github.com/sveltejs/sapper)
+- **[svite](examples/svite/)**: SPA developed with Svite, bundled with [Rollup](https://github.com/rollup/rollup)
+- **[webpack](examples/webpack/)**: SPA bundled with [webpack](https://github.com/webpack/webpack)
+
+### Scaffolding
+
+Each example is published in a dedicated branch of the same name.
+
+Use [degit](https://github.com/Rich-Harris/degit) to scaffold a new project:
+
+For example, to use the `svite` template, run the following commands:
+
+```sh
+npx degit ibm/carbon-components-svelte#svite svelte-app
+cd svelte-app
+yarn install
+```
+
+### Importing components
+
+Import components from `carbon-components-svelte` in the `script` tag of your Svelte file.
+
 ```html
+<!-- App.svelte -->
 <script>
-  import { Button } from "carbon-components-svelte";
+  import { Accordion, AccordionItem } from "carbon-components-svelte";
 </script>

-<svelte:head>
-  <link
-    rel="stylesheet"
-    href="https://unpkg.com/carbon-components/css/carbon-components.min.css"
-  />
-</svelte:head>
-
-<Button>Primary</Button>
+<Accordion>
+  <AccordionItem title="Section 1" open> Content 1 </AccordionItem>
+  <AccordionItem title="Section 2"> Content 2 </AccordionItem>
+  <AccordionItem title="Section 3"> Content 3 </AccordionItem>
+</Accordion>
 ```

+**Refer to [COMPONENT_INDEX.md](COMPONENT_INDEX.md) for component API documentation.**
+
+### Precompiled CSS StyleSheets
+
+`carbon-components-svelte` includes precompiled CSS StyleSheets for each Carbon theme:
+
+- **white.css**: Default Carbon theme (light)
+- **g10.css**: Gray 10 theme (light)
+- **g90.css**: Gray 90 theme (dark)
+- **g100.css**: Gray 100 theme (dark)
+- **all.css**: All themes (White, Gray 10, Gray 90, Gray 100) using CSS variables
+
+Each StyleSheet is [generated](scripts/build-css.js) from the flagship [carbon-components](https://github.com/carbon-design-system/carbon/tree/master/packages/components) library.
+
+The [examples](examples/) use `all.css` for dynamic theming through CSS variables.
+
+Because the CSS is precompiled, it includes all Carbon design styles. One method to optimize the CSS is to ship only the CSS that is used. This can be accomplished using [PurgeCSS](https://github.com/FullHuman/purgecss) with a Carbon style extractor (WIP).
+
+#### Usage
+
+##### `svelte-preprocess`
+
+The easiest way to import a StyleSheet is with [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess).
+
+```js
+const svelteOptions = {
+  preprocess: require("svelte-preprocess")(),
+};
+```
+
+```html
+<!-- App.svelte -->
+<style global>
+  /** Gray 10 theme **/
+  @import "carbon-components-svelte/css/g10";
+</style>
+```
+
+##### JavaScript import
+
+Importing a CSS file in a JavaScript file will require the appropriate file loader(s).
+
+```js
+import "carbon-components-svelte/css/all.css";
+import App from "./App.svelte";
+
+const app = new App({ target: document.body });
+
+export default app;
+```
+
+See [webpack.config.js](examples/webpack/webpack.config.js) in [examples/webpack](examples/webpack).
+
 ### TypeScript support

-This library ships with TypeScript definitions ([types/index.d.ts](types/index.d.ts)).
-
-## Components
-
-Refer to [COMPONENT_INDEX.md](COMPONENT_INDEX.md) for component documentation.
+The component library ships with TypeScript definitions ([types/index.d.ts](types/index.d.ts)).

 ## Contributing

--- a/examples/rollup-typescript/README.md
+++ b/examples/rollup-typescript/README.md
@ -2,9 +2,17 @@

 > Example Rollup/TypeScript set-up scaffolded from the official [Svelte template](https://github.com/sveltejs/template).

-This example project is used to validate the TypeScript definitions of `carbon-components-svelte`.
+## Getting started

-## Available Scripts
+Scaffold a new project using [degit](https://github.com/Rich-Harris/degit):
+
+```sh
+npx degit ibm/carbon-components-svelte#rollup-typescript svelte-app
+cd svelte-app
+yarn install
+```
+
+## Available scripts

 ### `yarn dev`

@ -13,7 +21,3 @@ Starts the app in development mode.
 ### `yarn build`

 Builds the app for production.
-
-### `yarn validate`
-
-Runs [svelte-check](https://github.com/sveltejs/language-tools#svelte-check) from the Svelte [Language Tools](https://github.com/sveltejs/language-tools) which type checks the app code.
--- a/examples/rollup-typescript/package.json
+++ b/examples/rollup-typescript/package.json
@ -1,22 +1,25 @@
 {
-  "name": "rollup-typescript",
-  "version": "0.0.1",
+  "version": "0.1.0",
  "private": true,
  "scripts": {
+    "dev": "rollup -cw",
    "build": "rollup -c",
-    "dev": "rollup -c -w",
+    "start": "sirv public",
    "validate": "svelte-check"
  },
+  "dependencies": {
+    "sirv-cli": "^1.0.0"
+  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^14.0.0",
    "@rollup/plugin-node-resolve": "^8.0.0",
-    "@rollup/plugin-typescript": "^4.0.0",
+    "@rollup/plugin-typescript": "^6.0.0",
    "@tsconfig/svelte": "^1.0.0",
-    "carbon-components-svelte": "^0.9.5",
+    "carbon-components-svelte": "^0.11.0",
    "rollup": "^2.3.4",
-    "rollup-plugin-livereload": "^1.0.0",
-    "rollup-plugin-svelte": "^5.0.3",
-    "rollup-plugin-terser": "^6.0.0",
+    "rollup-plugin-livereload": "^2.0.0",
+    "rollup-plugin-svelte": "^6.0.0",
+    "rollup-plugin-terser": "^7.0.0",
    "svelte": "^3.0.0",
    "svelte-check": "^1.0.0",
    "svelte-preprocess": "^4.0.0",
--- a/examples/rollup-typescript/rollup.config.js
+++ b/examples/rollup-typescript/rollup.config.js
@ -34,7 +34,7 @@ function serve() {
 }

 export default {
-  input: "src/main.ts",
+  input: "src/index.ts",
  output: {
    sourcemap: true,
    format: "iife",
@ -43,41 +43,18 @@ export default {
  },
  plugins: [
    svelte({
-      // enable run-time checks when not in production
      dev: !production,
-      // we'll extract any component CSS out into
-      // a separate file - better for performance
-      css: (css) => {
-        css.write("public/build/bundle.css");
-      },
      preprocess: sveltePreprocess(),
+      css: (css) => {
+        css.write("bundle.css");
+      },
    }),
-
-    // If you have external dependencies installed from
-    // npm, you'll most likely need these plugins. In
-    // some cases you'll need additional configuration -
-    // consult the documentation for details:
-    // https://github.com/rollup/plugins/tree/master/packages/commonjs
-    resolve({
-      browser: true,
-      dedupe: ["svelte"],
-    }),
+    resolve({ browser: true, dedupe: ["svelte"] }),
    commonjs(),
-    typescript({ sourceMap: !production }),
-
-    // In dev mode, call `npm run start` once
-    // the bundle has been generated
+    typescript({ sourceMap: !production, inlineSources: !production }),
    !production && serve(),
-
-    // Watch the `public` directory and refresh the
-    // browser on changes when not in production
    !production && livereload("public"),
-
-    // If we're building for production (npm run build
-    // instead of npm run dev), minify
    production && terser(),
  ],
-  watch: {
-    clearScreen: false,
-  },
+  watch: { clearScreen: false },
 };
--- a/examples/rollup-typescript/src/App.svelte
+++ b/examples/rollup-typescript/src/App.svelte
@ -1,15 +1,96 @@
 <script lang="ts">
-  import { Button, TooltipDefinition } from "carbon-components-svelte";
+  import {
+    Content,
+    Breadcrumb,
+    BreadcrumbItem,
+    Grid,
+    Row,
+    Column,
+    Tabs,
+    TabContent,
+    Tab,
+    Select,
+    SelectItem,
+  } from "carbon-components-svelte";
+  import Header from "./components/Header.svelte";
+  import Theme from "./components/Theme.svelte";
+
+  let theme: "g10" = "g10";
 </script>

-<Button
-  kind="primary"
-  on:click="{() => {
-    console.log('click');
-  }}">
-  Primary button
-</Button>
+<style lang="scss" global>
+  @import "carbon-components-svelte/css/all";
+</style>

-<TooltipDefinition tooltipText="Tooltip text">
-  Tooltip content
-</TooltipDefinition>
+<Theme persist bind:theme>
+  <Header />
+  <Content style="background: none; padding: 1rem">
+    <Grid>
+      <Row>
+        <Column lg="{16}">
+          <Breadcrumb noTrailingSlash aria-label="Page navigation">
+            <BreadcrumbItem href="/">Getting started</BreadcrumbItem>
+          </Breadcrumb>
+          <h1 style="margin-bottom: 1.5rem">Design &amp; build with Carbon</h1>
+        </Column>
+      </Row>
+
+      <Row>
+        <Column noGutter>
+          <Tabs aria-label="Tab navigation">
+            <Tab label="About" />
+            <Tab label="Design" />
+            <Tab label="Develop" />
+            <div slot="content" class="tabbed-content">
+              <Grid as fullWidth let:props>
+                <TabContent {...props}>
+                  <Row>
+                    <Column md="{4}" lg="{7}">
+                      <Select
+                        labelText="Carbon theme"
+                        bind:selected="{theme}"
+                        style="margin-bottom: 1rem">
+                        <SelectItem value="white" text="White" />
+                        <SelectItem value="g10" text="Gray 10" />
+                        <SelectItem value="g90" text="Gray 90" />
+                        <SelectItem value="g100" text="Gray 100" />
+                      </Select>
+                      <p>
+                        Carbon is IBM’s open-source design system for digital
+                        products and experiences. With the IBM Design Language
+                        as its foundation, the system consists of working code,
+                        design tools and resources, human interface guidelines,
+                        and a vibrant community of contributors.
+                      </p>
+                    </Column>
+                  </Row>
+                </TabContent>
+                <TabContent {...props}>
+                  <Row>
+                    <Column md="{4}" lg="{7}">
+                      <p>
+                        Rapidly build beautiful and accessible experiences. The
+                        Carbon kit contains all resources you need to get
+                        started.
+                      </p>
+                    </Column>
+                  </Row>
+                </TabContent>
+                <TabContent {...props}>
+                  <Row>
+                    <Column md="{4}" lg="{7}">
+                      <p>
+                        Carbon provides styles and components in Vanilla, React,
+                        Angular, Vue and Svelte for anyone building on the web.
+                      </p>
+                    </Column>
+                  </Row>
+                </TabContent>
+              </Grid>
+            </div>
+          </Tabs>
+        </Column>
+      </Row>
+    </Grid>
+  </Content>
+</Theme>
--- a/examples/rollup-typescript/src/components/Header.svelte
+++ b/examples/rollup-typescript/src/components/Header.svelte
@ -0,0 +1,35 @@
+<script lang="ts">
+  import {
+    SkipToContent,
+    Header,
+    HeaderUtilities,
+    HeaderGlobalAction,
+  } from "carbon-components-svelte";
+  import Notification20 from "carbon-icons-svelte/lib/Notification20";
+  import UserAvatar20 from "carbon-icons-svelte/lib/UserAvatar20";
+  import AppSwitcher20 from "carbon-icons-svelte/lib/AppSwitcher20";
+  import { getContext } from "svelte";
+
+  const ctx: { dark: any; light: any; updateVar: any } = getContext("Theme");
+
+  $: if (ctx) {
+    ctx.dark.subscribe((value) => {
+      console.log("dark mode?", value);
+    });
+    ctx.light.subscribe((value) => {
+      console.log("light mode?", value);
+    });
+    ctx.updateVar("--cds-productive-heading-06-font-size", "4rem");
+  }
+</script>
+
+<Header company="IBM" platformName="Carbon Components Svelte" href="/">
+  <div slot="skip-to-content">
+    <SkipToContent />
+  </div>
+  <HeaderUtilities>
+    <HeaderGlobalAction aria-label="Notifications" icon="{Notification20}" />
+    <HeaderGlobalAction aria-label="User Avatar" icon="{UserAvatar20}" />
+    <HeaderGlobalAction aria-label="App Switcher" icon="{AppSwitcher20}" />
+  </HeaderUtilities>
+</Header>
--- a/examples/rollup-typescript/src/components/Theme.svelte
+++ b/examples/rollup-typescript/src/components/Theme.svelte
@ -0,0 +1,57 @@
+<script lang="ts">
+  type Theme = "white" | "g10" | "g90" | "g100";
+
+  export let persist: boolean = false;
+  export let persistKey: string = "theme";
+  export let theme: Theme = "white";
+  export const themes: Theme[] = ["white", "g10", "g90", "g100"];
+
+  import { onMount, afterUpdate, setContext } from "svelte";
+  import { writable, derived } from "svelte/store";
+
+  const isValidTheme = (value) => themes.includes(value);
+  const isDark = (value) =>
+    isValidTheme(value) && (value === "g90" || value === "g100");
+
+  const dark = writable(isDark(theme));
+  const light = derived(dark, (_) => !_);
+
+  setContext("Theme", {
+    updateVar: (name: string, value: string) => {
+      document.documentElement.style.setProperty(name, value);
+    },
+    dark,
+    light,
+  });
+
+  onMount(() => {
+    try {
+      const persisted_theme = localStorage.getItem(persistKey);
+
+      if (isValidTheme(persisted_theme)) {
+        theme = persisted_theme as Theme;
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  });
+
+  afterUpdate(() => {
+    if (isValidTheme(theme)) {
+      document.documentElement.setAttribute("theme", theme);
+      if (persist) {
+        localStorage.setItem(persistKey, theme);
+      }
+    } else {
+      console.warn(
+        `"${theme}" is not a valid Carbon theme. Choose from available themes: ${JSON.stringify(
+          themes
+        )}`
+      );
+    }
+  });
+
+  $: dark.set(isDark(theme));
+</script>
+
+<slot />
--- a/examples/rollup-typescript/src/index.ts
+++ b/examples/rollup-typescript/src/index.ts
--- a/examples/rollup-typescript/yarn.lock
+++ b/examples/rollup-typescript/yarn.lock
@ -2,7 +2,7 @@
 # yarn lockfile v1


-"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.8.3":
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4":
  version "7.10.4"
  resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
  integrity sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==
@ -28,6 +28,11 @@
  resolved "https://registry.npmjs.org/@emmetio/extract-abbreviation/-/extract-abbreviation-0.1.6.tgz#e4a9856c1057f0aff7d443b8536477c243abe28c"
  integrity sha512-Ce3xE2JvTSEbASFbRbA1gAIcMcZWdS2yUYRaQbeM0nbOzaZrUYfa3ePtcriYRZOZmr+CkKA+zbjhvTpIOAYVcw==

+"@polka/url@^1.0.0-next.9":
+  version "1.0.0-next.11"
+  resolved "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.11.tgz#aeb16f50649a91af79dbe36574b66d0f9e4d9f71"
+  integrity sha512-3NsZsJIA/22P3QUyrEDNA2D133H4j224twJrdipXN38dpnIOzAbUDtOwkcJ5pXmn75w7LSQDjA4tO9dm1XlqlA==
+
 "@rollup/plugin-commonjs@^14.0.0":
  version "14.0.0"
  resolved "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-14.0.0.tgz#4285f9ec2db686a31129e5a2b415c94aa1f836f0"
@ -54,15 +59,15 @@
    is-module "^1.0.0"
    resolve "^1.17.0"

-"@rollup/plugin-typescript@^4.0.0":
-  version "4.1.2"
-  resolved "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-4.1.2.tgz#6f910430276ae3e53a47a12ad65820627e7b6ad9"
-  integrity sha512-+7UlGat/99e2JbmGNnIauxwEhYLwrL7adO/tSJxUN57xrrS3Ps+ZzYpLCDGPZJ57j+ZJTZLLN89KXW9JMEB+jg==
+"@rollup/plugin-typescript@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-6.0.0.tgz#08635d9d04dc3a099ef0150c289ba5735200bc63"
+  integrity sha512-Y5U2L4eaF3wUSgCZRMdvNmuzWkKMyN3OwvhAdbzAi5sUqedaBk/XbzO4T7RlViDJ78MOPhwAIv2FtId/jhMtbg==
  dependencies:
-    "@rollup/pluginutils" "^3.0.1"
-    resolve "^1.14.1"
+    "@rollup/pluginutils" "^3.1.0"
+    resolve "^1.17.0"

-"@rollup/pluginutils@^3.0.1", "@rollup/pluginutils@^3.0.8", "@rollup/pluginutils@^3.1.0":
+"@rollup/pluginutils@^3.0.8", "@rollup/pluginutils@^3.1.0":
  version "3.1.0"
  resolved "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b"
  integrity sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==
@ -188,18 +193,18 @@ callsites@^3.0.0:
  resolved "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
  integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==

-carbon-components-svelte@^0.9.5:
-  version "0.9.5"
-  resolved "https://registry.npmjs.org/carbon-components-svelte/-/carbon-components-svelte-0.9.5.tgz#064f35adb2ca96180c26cf93604eb4b2104e5653"
-  integrity sha512-G7zAnq9bdebHvyR4so1EDmj6bM2ENFEvMvNrOrXpE8SbrCZ1Aqn/E5gy3Lk2ZiTuUlqNK5Zs4R2mRSAuippWyA==
+carbon-components-svelte@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.npmjs.org/carbon-components-svelte/-/carbon-components-svelte-0.11.0.tgz#3fd824f2cf605aef9d62baf519aa998fe5172d94"
+  integrity sha512-Ie41yTcvi7l2GC3nHLHt2upgWp/k5hlvv4wh1yRxpy/r8B+WqJHonqB222z89axzayE41dgAF3+Ke2p9dretbQ==
  dependencies:
-    carbon-icons-svelte "^10.14.0"
+    carbon-icons-svelte "^10.15.0"
    flatpickr "4.6.3"

-carbon-icons-svelte@^10.14.0:
-  version "10.15.0"
-  resolved "https://registry.npmjs.org/carbon-icons-svelte/-/carbon-icons-svelte-10.15.0.tgz#2e4a7f7e8c71c260239c8210d0506d023efc824f"
-  integrity sha512-8J9+EHA+r1gp/8upFC8PD/mpreIvC61vkqhkOgxnCVVFixidd8XK8SIaMSlUJeovjImAh2Zj4AB4aMPsl/Xubg==
+carbon-icons-svelte@^10.15.0:
+  version "10.17.0"
+  resolved "https://registry.npmjs.org/carbon-icons-svelte/-/carbon-icons-svelte-10.17.0.tgz#f7559f58be9c789097ea4035e52dbc4c12691d45"
+  integrity sha512-as1RN87YLvF7iepGAGWQOk2oleyb4w17BoHSYyQgE3MceOla04YdSWASK5c22XZZnmMJbbrT17Z34Cl70niz0Q==

 chalk@^2.0.0:
  version "2.4.2"
@ -272,6 +277,11 @@ concat-map@0.0.1:
  resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
  integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=

+console-clear@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/console-clear/-/console-clear-1.1.1.tgz#995e20cbfbf14dd792b672cde387bd128d674bf7"
+  integrity sha512-pMD+MVR538ipqkG5JXeOEbKWS5um1H4LUUccUQG68qpeqBYbzYy79Gh55jkd2TtPdRfUaLWdv6LPP//5Zt0aPQ==
+
 cosmiconfig@^6.0.0:
  version "6.0.0"
  resolved "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz#da4fee853c52f6b1e6935f41c1a2fc50bd4a9982"
@ -352,6 +362,11 @@ fsevents@~2.1.2:
  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e"
  integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==

+get-port@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.npmjs.org/get-port/-/get-port-3.2.0.tgz#dd7ce7de187c06c8bf353796ac71e099f0980ebc"
+  integrity sha1-3Xzn3hh8Bsi/NTeWrHHgmfCYDrw=
+
 glob-parent@~5.1.0:
  version "5.1.1"
  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz#b6c1ef417c4e5663ea498f1c45afac6916bbc229"
@ -443,7 +458,7 @@ is-reference@^1.1.2:
  dependencies:
    "@types/estree" "*"

-jest-worker@^26.0.0:
+jest-worker@^26.2.1:
  version "26.3.0"
  resolved "https://registry.npmjs.org/jest-worker/-/jest-worker-26.3.0.tgz#7c8a97e4f4364b4f05ed8bca8ca0c24de091871f"
  integrity sha512-Vmpn2F6IASefL+DVBhPzI2J9/GJUsqzomdeN+P+dK8/jKxbh8R3BtFnx3FIta7wYlPU62cpJMJQo4kuOowcMnw==
@ -467,6 +482,11 @@ jsonc-parser@^1.0.0:
  resolved "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-1.0.3.tgz#1d53d7160e401a783dbceabaad82473f80e6ad7e"
  integrity sha512-hk/69oAeaIzchq/v3lS50PXuzn5O2ynldopMC+SWBql7J2WtdptfB9dy8Y7+Og5rPkTCpn83zTiO8FMcqlXJ/g==

+kleur@^3.0.0:
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
+  integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
+
 lines-and-columns@^1.1.6:
  version "1.1.6"
  resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
@ -487,6 +507,11 @@ livereload@^0.9.1:
    opts ">= 1.2.0"
    ws "^6.2.1"

+local-access@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/local-access/-/local-access-1.0.1.tgz#5121258146d64e869046c642ea4f1dd39ff942bb"
+  integrity sha512-ykt2pgN0aqIy6KQC1CqdWTWkmUwNgaOS6dcpHVjyBJONA+Xi7AtSB1vuxC/U/0tjIP3wcRudwQk1YYzUvzk2bA==
+
 lodash@^4.17.19:
  version "4.17.20"
  resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
@ -511,6 +536,11 @@ merge-stream@^2.0.0:
  resolved "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
  integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==

+mime@^2.3.1:
+  version "2.4.6"
+  resolved "https://registry.npmjs.org/mime/-/mime-2.4.6.tgz#e5b407c90db442f2beb5b162373d07b69affa4d1"
+  integrity sha512-RZKhC3EmpBchfTGBVb8fb+RL2cWyw/32lshnsETttkBAyAUXSGHxbEJWWRXc751DrIxG1q04b8QwMbAwkRPpUA==
+
 min-indent@^1.0.0:
  version "1.0.1"
  resolved "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
@ -528,6 +558,11 @@ minimist@^1.2.5:
  resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==

+mri@^1.1.0:
+  version "1.1.6"
+  resolved "https://registry.npmjs.org/mri/-/mri-1.1.6.tgz#49952e1044db21dbf90f6cd92bc9c9a777d415a6"
+  integrity sha512-oi1b3MfbyGa7FJMP9GmLTttni5JoICpYBRlq+x5V16fZbLsnL9N3wFqqIm/nIG43FjUFkFh9Epzp/kzUGUnJxQ==
+
 no-case@^3.0.3:
  version "3.0.3"
  resolved "https://registry.npmjs.org/no-case/-/no-case-3.0.3.tgz#c21b434c1ffe48b39087e86cfb4d2582e9df18f8"
@ -632,38 +667,38 @@ resolve-from@^4.0.0:
  resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
  integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==

-resolve@^1.11.0, resolve@^1.14.1, resolve@^1.17.0:
+resolve@^1.11.0, resolve@^1.17.0:
  version "1.17.0"
  resolved "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
  integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==
  dependencies:
    path-parse "^1.0.6"

-rollup-plugin-livereload@^1.0.0:
-  version "1.3.0"
-  resolved "https://registry.npmjs.org/rollup-plugin-livereload/-/rollup-plugin-livereload-1.3.0.tgz#8da90df13df6502b9d982997d6ac871092f15fdd"
-  integrity sha512-abyqXaB21+nFHo+vJULBqfzNx6zXABC19UyvqgDfdoxR/8pFAd041GO+GIUe8ZYC2DbuMUmioh1Lvbk14YLZgw==
+rollup-plugin-livereload@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/rollup-plugin-livereload/-/rollup-plugin-livereload-2.0.0.tgz#d3928d74e8cf2ae4286c5dd46b770fd3f3b82313"
+  integrity sha512-oC/8NqumGYuphkqrfszOHUUIwzKsaHBICw6QRwT5uD07gvePTS+HW+GFwu6f9K8W02CUuTvtIM9AWJrbj4wE1A==
  dependencies:
    livereload "^0.9.1"

-rollup-plugin-svelte@^5.0.3:
-  version "5.2.3"
-  resolved "https://registry.npmjs.org/rollup-plugin-svelte/-/rollup-plugin-svelte-5.2.3.tgz#efdc15e3e3fdd9b9f1100fdc14a8532b4e587bc8"
-  integrity sha512-513vOht9A93OV7fvmpIq8mD1JFgTZ5LidmpULKM2Od9P1l8oI5KwvO32fwCnASuVJS1EkRfvCnS7vKQ8DF4srg==
+rollup-plugin-svelte@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.npmjs.org/rollup-plugin-svelte/-/rollup-plugin-svelte-6.0.1.tgz#a4fc9c19c5c4277e6dbf8e79185c4cbd6b4383bf"
+  integrity sha512-kS9/JZMBNgpKTqVKlwV8mhmGwxu8NiNf6+n5ZzdZ8yDp3+ADqjf8Au+JNEpoOn6kLlh1hLS2Gsa76k9RP57HDQ==
  dependencies:
    require-relative "^0.8.7"
    rollup-pluginutils "^2.8.2"
    sourcemap-codec "^1.4.8"

-rollup-plugin-terser@^6.0.0:
-  version "6.1.0"
-  resolved "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-6.1.0.tgz#071866585aea104bfbb9dd1019ac523e63c81e45"
-  integrity sha512-4fB3M9nuoWxrwm39habpd4hvrbrde2W2GG4zEGPQg1YITNkM3Tqur5jSuXlWNzbv/2aMLJ+dZJaySc3GCD8oDw==
+rollup-plugin-terser@^7.0.0:
+  version "7.0.2"
+  resolved "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz#e8fbba4869981b2dc35ae7e8a502d5c6c04d324d"
+  integrity sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==
  dependencies:
-    "@babel/code-frame" "^7.8.3"
-    jest-worker "^26.0.0"
-    serialize-javascript "^3.0.0"
-    terser "^4.7.0"
+    "@babel/code-frame" "^7.10.4"
+    jest-worker "^26.2.1"
+    serialize-javascript "^4.0.0"
+    terser "^5.0.0"

 rollup-pluginutils@^2.8.2:
  version "2.8.2"
@ -679,18 +714,53 @@ rollup@^2.3.4:
  optionalDependencies:
    fsevents "~2.1.2"

+sade@^1.6.0:
+  version "1.7.3"
+  resolved "https://registry.npmjs.org/sade/-/sade-1.7.3.tgz#a217ccc4fb4abb2d271648bf48f6628b2636fa1b"
+  integrity sha512-m4BctppMvJ60W1dXnHq7jMmFe3hPJZDAH85kQ3ACTo7XZNVUuTItCQ+2HfyaMeV5cKrbw7l4vD/6We3GBxvdJw==
+  dependencies:
+    mri "^1.1.0"
+
 safe-buffer@^5.1.0:
  version "5.2.1"
  resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==

-serialize-javascript@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-3.1.0.tgz#8bf3a9170712664ef2561b44b691eafe399214ea"
-  integrity sha512-JIJT1DGiWmIKhzRsG91aS6Ze4sFUrYbltlkg2onR5OrnNM02Kl/hnY/T4FN2omvyeBbQmMJv+K4cPOpGzOTFBg==
+semiver@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/semiver/-/semiver-1.1.0.tgz#9c97fb02c21c7ce4fcf1b73e2c7a24324bdddd5f"
+  integrity sha512-QNI2ChmuioGC1/xjyYwyZYADILWyW6AmS1UH6gDj/SFUUUS4MBAWs/7mxnkRPc/F4iHezDP+O8t0dO8WHiEOdg==
+
+serialize-javascript@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa"
+  integrity sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==
  dependencies:
    randombytes "^2.1.0"

+sirv-cli@^1.0.0:
+  version "1.0.6"
+  resolved "https://registry.npmjs.org/sirv-cli/-/sirv-cli-1.0.6.tgz#a4924254d965b23a518512f70010e710185de2f1"
+  integrity sha512-K/iY1OHG7hTw4GzLoqMhwzKCbgWmx5joYAAF2+CwyiamWCpVzAgNVWgAc0JmSA2Gf3wseov05il2QbFTGTZMVg==
+  dependencies:
+    console-clear "^1.1.0"
+    get-port "^3.2.0"
+    kleur "^3.0.0"
+    local-access "^1.0.1"
+    sade "^1.6.0"
+    semiver "^1.0.0"
+    sirv "^1.0.6"
+    tinydate "^1.0.0"
+
+sirv@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.npmjs.org/sirv/-/sirv-1.0.6.tgz#178c13bffccc0dea715a0e50894cf3a6c74a715e"
+  integrity sha512-LRGu7Op4Xl9hhigOy2kcB53zAYTjNDdpooey49dIU0cMdpOv9ithVf7nstk3jvs8EhMiT/VORoyazZYGgw4vnA==
+  dependencies:
+    "@polka/url" "^1.0.0-next.9"
+    mime "^2.3.1"
+    totalist "^1.0.0"
+
 source-map-support@~0.5.12:
  version "0.5.19"
  resolved "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
@ -811,15 +881,20 @@ svelte@^3.0.0:
  resolved "https://registry.npmjs.org/svelte/-/svelte-3.24.1.tgz#aca364937dd1df27fe131e2a4c234acb6061db4b"
  integrity sha512-OX/IBVUJSFo1rnznXdwf9rv6LReJ3qQ0PwRjj76vfUWyTfbHbR9OXqJBnUrpjyis2dwYcbT2Zm1DFjOOF1ZbbQ==

-terser@^4.7.0:
-  version "4.8.0"
-  resolved "https://registry.npmjs.org/terser/-/terser-4.8.0.tgz#63056343d7c70bb29f3af665865a46fe03a0df17"
-  integrity sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==
+terser@^5.0.0:
+  version "5.3.1"
+  resolved "https://registry.npmjs.org/terser/-/terser-5.3.1.tgz#f50fe20ab48b15234fe9bdd86b10148ad5fca787"
+  integrity sha512-yD80f4hdwCWTH5mojzxe1q8bN1oJbsK/vfJGLcPZM/fl+/jItIVNKhFIHqqR71OipFWMLgj3Kc+GIp6CeIqfnA==
  dependencies:
    commander "^2.20.0"
    source-map "~0.6.1"
    source-map-support "~0.5.12"

+tinydate@^1.0.0:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/tinydate/-/tinydate-1.3.0.tgz#e6ca8e5a22b51bb4ea1c3a2a4fd1352dbd4c57fb"
+  integrity sha512-7cR8rLy2QhYHpsBDBVYnnWXm8uRTr38RoZakFSW7Bs7PzfMPNZthuMLkwqZv7MTu8lhQ91cOFYS5a7iFj2oR3w==
+
 to-regex-range@^5.0.1:
  version "5.0.1"
  resolved "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
@ -827,6 +902,11 @@ to-regex-range@^5.0.1:
  dependencies:
    is-number "^7.0.0"

+totalist@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/totalist/-/totalist-1.1.0.tgz#a4d65a3e546517701e3e5c37a47a70ac97fe56df"
+  integrity sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==
+
 tslib@^1.10.0:
  version "1.13.0"
  resolved "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"
--- a/examples/rollup/.gitignore
+++ b/examples/rollup/.gitignore
@ -0,0 +1,4 @@
+/node_modules
+/public/build
+yarn-debug.log*
+yarn-error.log*
--- a/examples/rollup/README.md
+++ b/examples/rollup/README.md
@ -0,0 +1,23 @@
+# rollup
+
+> Example set-up using [Rollup](https://github.com/rollup/rollup).
+
+## Getting started
+
+Scaffold a new project using [degit](https://github.com/Rich-Harris/degit):
+
+```sh
+npx degit ibm/carbon-components-svelte#rollup svelte-app
+cd svelte-app
+yarn install
+```
+
+## Available scripts
+
+### `yarn dev`
+
+Starts the app in development mode.
+
+### `yarn build`
+
+Builds the app for production.
--- a/examples/rollup/package.json
+++ b/examples/rollup/package.json
@ -0,0 +1,21 @@
+{
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "rollup -cw",
+    "build": "rimraf public/build && rollup -c"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^15.0.0",
+    "@rollup/plugin-node-resolve": "^9.0.0",
+    "carbon-components-svelte": "^0.11.0",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.23.0",
+    "rollup-plugin-livereload": "^2.0.0",
+    "rollup-plugin-serve": "^1.0.3",
+    "rollup-plugin-svelte": "^6.0.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "svelte": "^3.24.0",
+    "svelte-preprocess": "^4.0.9"
+  }
+}
--- a/examples/rollup/public/favicon.ico
+++ b/examples/rollup/public/favicon.ico
--- a/examples/rollup/public/index.html
+++ b/examples/rollup/public/index.html
@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="/favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <title>rollup</title>
+    <link rel="stylesheet" href="/build/bundle.css" />
+    <script defer src="/build/bundle.js"></script>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+  </body>
+</html>
--- a/examples/rollup/rollup.config.js
+++ b/examples/rollup/rollup.config.js
@ -0,0 +1,32 @@
+import { terser } from "rollup-plugin-terser";
+import commonjs from "@rollup/plugin-commonjs";
+import resolve from "@rollup/plugin-node-resolve";
+import serve from "rollup-plugin-serve";
+import svelte from "rollup-plugin-svelte";
+import livereload from "rollup-plugin-livereload";
+import sveltePreprocess from "svelte-preprocess";
+
+const PORT = process.env.PORT || 3000;
+const PROD = !process.env.ROLLUP_WATCH;
+
+export default {
+  input: "src/index.js",
+  output: {
+    sourcemap: !PROD,
+    format: "iife",
+    name: "app",
+    file: "public/build/bundle.js",
+  },
+  plugins: [
+    svelte({
+      dev: !PROD,
+      preprocess: sveltePreprocess(),
+      css: (css) => css.write("bundle.css", !PROD),
+    }),
+    resolve({ browser: true, dedupe: ["svelte"] }),
+    commonjs(),
+    !PROD && serve({ contentBase: ["public"], port: PORT }),
+    !PROD && livereload("public"),
+    PROD && terser(),
+  ],
+};
--- a/examples/rollup/src/App.svelte
+++ b/examples/rollup/src/App.svelte
@ -0,0 +1,96 @@
+<script>
+  import {
+    Content,
+    Breadcrumb,
+    BreadcrumbItem,
+    Grid,
+    Row,
+    Column,
+    Tabs,
+    TabContent,
+    Tab,
+    Select,
+    SelectItem,
+  } from "carbon-components-svelte";
+  import Header from "./components/Header.svelte";
+  import Theme from "./components/Theme.svelte";
+
+  let theme = "g10";
+</script>
+
+<style lang="scss" global>
+  @import "carbon-components-svelte/css/all";
+</style>
+
+<Theme persist bind:theme>
+  <Header />
+  <Content style="background: none; padding: 1rem">
+    <Grid>
+      <Row>
+        <Column lg="{16}">
+          <Breadcrumb noTrailingSlash aria-label="Page navigation">
+            <BreadcrumbItem href="/">Getting started</BreadcrumbItem>
+          </Breadcrumb>
+          <h1 style="margin-bottom: 1.5rem">Design &amp; build with Carbon</h1>
+        </Column>
+      </Row>
+
+      <Row>
+        <Column noGutter>
+          <Tabs aria-label="Tab navigation">
+            <Tab label="About" />
+            <Tab label="Design" />
+            <Tab label="Develop" />
+            <div slot="content" class="tabbed-content">
+              <Grid as fullWidth let:props>
+                <TabContent {...props}>
+                  <Row>
+                    <Column md="{4}" lg="{7}">
+                      <Select
+                        labelText="Carbon theme"
+                        bind:selected="{theme}"
+                        style="margin-bottom: 1rem">
+                        <SelectItem value="white" text="White" />
+                        <SelectItem value="g10" text="Gray 10" />
+                        <SelectItem value="g90" text="Gray 90" />
+                        <SelectItem value="g100" text="Gray 100" />
+                      </Select>
+                      <p>
+                        Carbon is IBM’s open-source design system for digital
+                        products and experiences. With the IBM Design Language
+                        as its foundation, the system consists of working code,
+                        design tools and resources, human interface guidelines,
+                        and a vibrant community of contributors.
+                      </p>
+                    </Column>
+                  </Row>
+                </TabContent>
+                <TabContent {...props}>
+                  <Row>
+                    <Column md="{4}" lg="{7}">
+                      <p>
+                        Rapidly build beautiful and accessible experiences. The
+                        Carbon kit contains all resources you need to get
+                        started.
+                      </p>
+                    </Column>
+                  </Row>
+                </TabContent>
+                <TabContent {...props}>
+                  <Row>
+                    <Column md="{4}" lg="{7}">
+                      <p>
+                        Carbon provides styles and components in Vanilla, React,
+                        Angular, Vue and Svelte for anyone building on the web.
+                      </p>
+                    </Column>
+                  </Row>
+                </TabContent>
+              </Grid>
+            </div>
+          </Tabs>
+        </Column>
+      </Row>
+    </Grid>
+  </Content>
+</Theme>
--- a/examples/rollup/src/components/Header.svelte
+++ b/examples/rollup/src/components/Header.svelte
@ -0,0 +1,35 @@
+<script>
+  import {
+    SkipToContent,
+    Header,
+    HeaderUtilities,
+    HeaderGlobalAction,
+  } from "carbon-components-svelte";
+  import Notification20 from "carbon-icons-svelte/lib/Notification20";
+  import UserAvatar20 from "carbon-icons-svelte/lib/UserAvatar20";
+  import AppSwitcher20 from "carbon-icons-svelte/lib/AppSwitcher20";
+  import { getContext } from "svelte";
+
+  const ctx = getContext("Theme");
+
+  $: if (ctx) {
+    ctx.dark.subscribe((value) => {
+      console.log("dark mode?", value);
+    });
+    ctx.light.subscribe((value) => {
+      console.log("light mode?", value);
+    });
+    ctx.updateVar("--cds-productive-heading-06-font-size", "4rem");
+  }
+</script>
+
+<Header company="IBM" platformName="Carbon Components Svelte" href="/">
+  <div slot="skip-to-content">
+    <SkipToContent />
+  </div>
+  <HeaderUtilities>
+    <HeaderGlobalAction aria-label="Notifications" icon="{Notification20}" />
+    <HeaderGlobalAction aria-label="User Avatar" icon="{UserAvatar20}" />
+    <HeaderGlobalAction aria-label="App Switcher" icon="{AppSwitcher20}" />
+  </HeaderUtilities>
+</Header>
--- a/examples/rollup/src/components/Theme.svelte
+++ b/examples/rollup/src/components/Theme.svelte
@ -0,0 +1,55 @@
+<script>
+  export let persist = false;
+  export let persistKey = "theme";
+  export let theme = "white";
+  export const themes = ["white", "g10", "g90", "g100"];
+
+  import { onMount, afterUpdate, setContext } from "svelte";
+  import { writable, derived } from "svelte/store";
+
+  const isValidTheme = (value) => themes.includes(value);
+  const isDark = (value) =>
+    isValidTheme(value) && (value === "g90" || value === "g100");
+
+  const dark = writable(isDark(theme));
+  const light = derived(dark, (_) => !_);
+
+  setContext("Theme", {
+    updateVar: (name, value) => {
+      document.documentElement.style.setProperty(name, value);
+    },
+    dark,
+    light,
+  });
+
+  onMount(() => {
+    try {
+      const persisted_theme = localStorage.getItem(persistKey);
+
+      if (isValidTheme(persisted_theme)) {
+        theme = persisted_theme;
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  });
+
+  afterUpdate(() => {
+    if (isValidTheme(theme)) {
+      document.documentElement.setAttribute("theme", theme);
+      if (persist) {
+        localStorage.setItem(persistKey, theme);
+      }
+    } else {
+      console.warn(
+        `"${theme}" is not a valid Carbon theme. Choose from available themes: ${JSON.stringify(
+          themes
+        )}`
+      );
+    }
+  });
+
+  $: dark.set(isDark(theme));
+</script>
+
+<slot />
--- a/examples/rollup/src/index.js
+++ b/examples/rollup/src/index.js
@ -0,0 +1,5 @@
+import App from "./App.svelte";
+
+const app = new App({ target: document.body });
+
+export default app;
--- a/examples/rollup/yarn.lock
+++ b/examples/rollup/yarn.lock
@ -0,0 +1,611 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@babel/code-frame@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
+  integrity sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==
+  dependencies:
+    "@babel/highlight" "^7.10.4"
+
+"@babel/helper-validator-identifier@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2"
+  integrity sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==
+
+"@babel/highlight@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz#7d1bdfd65753538fabe6c38596cdb76d9ac60143"
+  integrity sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.10.4"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
+"@rollup/plugin-commonjs@^15.0.0":
+  version "15.0.0"
+  resolved "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-15.0.0.tgz#690d15a9d54ba829db93555bff9b98ff34e08574"
+  integrity sha512-8uAdikHqVyrT32w1zB9VhW6uGwGjhKgnDNP4pQJsjdnyF4FgCj6/bmv24c7v2CuKhq32CcyCwRzMPEElaKkn0w==
+  dependencies:
+    "@rollup/pluginutils" "^3.1.0"
+    commondir "^1.0.1"
+    estree-walker "^2.0.1"
+    glob "^7.1.6"
+    is-reference "^1.2.1"
+    magic-string "^0.25.7"
+    resolve "^1.17.0"
+
+"@rollup/plugin-node-resolve@^9.0.0":
+  version "9.0.0"
+  resolved "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-9.0.0.tgz#39bd0034ce9126b39c1699695f440b4b7d2b62e6"
+  integrity sha512-gPz+utFHLRrd41WMP13Jq5mqqzHL3OXrfj3/MkSyB6UBIcuNt9j60GCbarzMzdf1VHFpOxfQh/ez7wyadLMqkg==
+  dependencies:
+    "@rollup/pluginutils" "^3.1.0"
+    "@types/resolve" "1.17.1"
+    builtin-modules "^3.1.0"
+    deepmerge "^4.2.2"
+    is-module "^1.0.0"
+    resolve "^1.17.0"
+
+"@rollup/pluginutils@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b"
+  integrity sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==
+  dependencies:
+    "@types/estree" "0.0.39"
+    estree-walker "^1.0.1"
+    picomatch "^2.2.2"
+
+"@types/estree@*":
+  version "0.0.45"
+  resolved "https://registry.npmjs.org/@types/estree/-/estree-0.0.45.tgz#e9387572998e5ecdac221950dab3e8c3b16af884"
+  integrity sha512-jnqIUKDUqJbDIUxm0Uj7bnlMnRm1T/eZ9N+AVMqhPgzrba2GhGG5o/jCTwmdPK709nEZsGoMzXEDUjcXHa3W0g==
+
+"@types/estree@0.0.39":
+  version "0.0.39"
+  resolved "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
+  integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
+
+"@types/node@*":
+  version "14.6.4"
+  resolved "https://registry.npmjs.org/@types/node/-/node-14.6.4.tgz#a145cc0bb14ef9c4777361b7bbafa5cf8e3acb5a"
+  integrity sha512-Wk7nG1JSaMfMpoMJDKUsWYugliB2Vy55pdjLpmLixeyMi7HizW2I/9QoxsPCkXl3dO+ZOVqPumKaDUv5zJu2uQ==
+
+"@types/pug@^2.0.4":
+  version "2.0.4"
+  resolved "https://registry.npmjs.org/@types/pug/-/pug-2.0.4.tgz#8772fcd0418e3cd2cc171555d73007415051f4b2"
+  integrity sha1-h3L80EGOPNLMFxVV1zAHQVBR9LI=
+
+"@types/resolve@1.17.1":
+  version "1.17.1"
+  resolved "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz#3afd6ad8967c77e4376c598a82ddd58f46ec45d6"
+  integrity sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==
+  dependencies:
+    "@types/node" "*"
+
+"@types/sass@^1.16.0":
+  version "1.16.0"
+  resolved "https://registry.npmjs.org/@types/sass/-/sass-1.16.0.tgz#b41ac1c17fa68ffb57d43e2360486ef526b3d57d"
+  integrity sha512-2XZovu4NwcqmtZtsBR5XYLw18T8cBCnU2USFHTnYLLHz9fkhnoEMoDsqShJIOFsFhn5aJHjweiUUdTrDGujegA==
+  dependencies:
+    "@types/node" "*"
+
+ansi-styles@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
+  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
+  dependencies:
+    color-convert "^1.9.0"
+
+anymatch@~3.1.1:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz#c55ecf02185e2469259399310c173ce31233b142"
+  integrity sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
+async-limiter@~1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
+  integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
+
+balanced-match@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
+  integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
+
+binary-extensions@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz#30fa40c9e7fe07dbc895678cd287024dea241dd9"
+  integrity sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==
+
+brace-expansion@^1.1.7:
+  version "1.1.11"
+  resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+braces@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
+  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+  dependencies:
+    fill-range "^7.0.1"
+
+buffer-from@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
+  integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
+
+builtin-modules@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.1.0.tgz#aad97c15131eb76b65b50ef208e7584cd76a7484"
+  integrity sha512-k0KL0aWZuBt2lrxrcASWDfwOLMnodeQjodT/1SxEQAXsHANgo6ZC/VEaSEHCXt7aSTZ4/4H5LKa+tBXmW7Vtvw==
+
+carbon-components-svelte@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.npmjs.org/carbon-components-svelte/-/carbon-components-svelte-0.11.0.tgz#3fd824f2cf605aef9d62baf519aa998fe5172d94"
+  integrity sha512-Ie41yTcvi7l2GC3nHLHt2upgWp/k5hlvv4wh1yRxpy/r8B+WqJHonqB222z89axzayE41dgAF3+Ke2p9dretbQ==
+  dependencies:
+    carbon-icons-svelte "^10.15.0"
+    flatpickr "4.6.3"
+
+carbon-icons-svelte@^10.15.0:
+  version "10.17.0"
+  resolved "https://registry.npmjs.org/carbon-icons-svelte/-/carbon-icons-svelte-10.17.0.tgz#f7559f58be9c789097ea4035e52dbc4c12691d45"
+  integrity sha512-as1RN87YLvF7iepGAGWQOk2oleyb4w17BoHSYyQgE3MceOla04YdSWASK5c22XZZnmMJbbrT17Z34Cl70niz0Q==
+
+chalk@^2.0.0:
+  version "2.4.2"
+  resolved "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
+  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
+chokidar@^3.3.0:
+  version "3.4.2"
+  resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.4.2.tgz#38dc8e658dec3809741eb3ef7bb0a47fe424232d"
+  integrity sha512-IZHaDeBeI+sZJRX7lGcXsdzgvZqKv6sECqsbErJA4mHWfpRrD8B97kSFN4cQz6nGBGiuFia1MKR4d6c1o8Cv7A==
+  dependencies:
+    anymatch "~3.1.1"
+    braces "~3.0.2"
+    glob-parent "~5.1.0"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.4.0"
+  optionalDependencies:
+    fsevents "~2.1.2"
+
+color-convert@^1.9.0:
+  version "1.9.3"
+  resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
+  dependencies:
+    color-name "1.1.3"
+
+color-name@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
+
+commander@^2.20.0:
+  version "2.20.3"
+  resolved "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
+
+commondir@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
+  integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+  integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
+
+deepmerge@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
+  integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
+
+detect-indent@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/detect-indent/-/detect-indent-6.0.0.tgz#0abd0f549f69fc6659a254fe96786186b6f528fd"
+  integrity sha512-oSyFlqaTHCItVRGK5RmrmjB+CmaMOW7IaNA/kdxqhoa6d17j/5ce9O9eWXmV/KEdRwqpQA+Vqe8a8Bsybu4YnA==
+
+escape-string-regexp@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+  integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
+
+estree-walker@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362"
+  integrity sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==
+
+estree-walker@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz#31bc5d612c96b704106b477e6dd5d8aa138cb700"
+  integrity sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==
+
+estree-walker@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.1.tgz#f8e030fb21cefa183b44b7ad516b747434e7a3e0"
+  integrity sha512-tF0hv+Yi2Ot1cwj9eYHtxC0jB9bmjacjQs6ZBTj82H8JwUywFuc+7E83NWfNMwHXZc11mjfFcVXPe9gEP4B8dg==
+
+fill-range@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
+  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+flatpickr@4.6.3:
+  version "4.6.3"
+  resolved "https://registry.npmjs.org/flatpickr/-/flatpickr-4.6.3.tgz#15a8b76b6e34e3a072861250503a5995b9d3bc60"
+  integrity sha512-007VucCkqNOMMb9ggRLNuJowwaJcyOh4sKAFcdGfahfGc7JQbf94zSzjdBq/wVyHWUEs5o3+idhFZ0wbZMRmVQ==
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+  integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
+
+fsevents@~2.1.2:
+  version "2.1.3"
+  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e"
+  integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==
+
+glob-parent@~5.1.0:
+  version "5.1.1"
+  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz#b6c1ef417c4e5663ea498f1c45afac6916bbc229"
+  integrity sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==
+  dependencies:
+    is-glob "^4.0.1"
+
+glob@^7.1.3, glob@^7.1.6:
+  version "7.1.6"
+  resolved "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
+  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+has-flag@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+  integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
+
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2:
+  version "2.0.4"
+  resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
+is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
+
+is-glob@^4.0.1, is-glob@~4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
+  integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
+  integrity sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+is-reference@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz#8b2dac0b371f4bc994fdeaba9eb542d03002d0b7"
+  integrity sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==
+  dependencies:
+    "@types/estree" "*"
+
+jest-worker@^26.2.1:
+  version "26.3.0"
+  resolved "https://registry.npmjs.org/jest-worker/-/jest-worker-26.3.0.tgz#7c8a97e4f4364b4f05ed8bca8ca0c24de091871f"
+  integrity sha512-Vmpn2F6IASefL+DVBhPzI2J9/GJUsqzomdeN+P+dK8/jKxbh8R3BtFnx3FIta7wYlPU62cpJMJQo4kuOowcMnw==
+  dependencies:
+    "@types/node" "*"
+    merge-stream "^2.0.0"
+    supports-color "^7.0.0"
+
+js-tokens@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
+livereload-js@^3.1.0:
+  version "3.3.1"
+  resolved "https://registry.npmjs.org/livereload-js/-/livereload-js-3.3.1.tgz#61f887468086762e61fb2987412cf9d1dda99202"
+  integrity sha512-CBu1gTEfzVhlOK1WASKAAJ9Qx1fHECTq0SUB67sfxwQssopTyvzqTlgl+c0h9pZ6V+Fzd2rc510ppuNusg9teQ==
+
+livereload@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.npmjs.org/livereload/-/livereload-0.9.1.tgz#65125dabdf2db4fd3f1169e953fe56e3bcc6f477"
+  integrity sha512-9g7sua11kkyZNo2hLRCG3LuZZwqexoyEyecSlV8cAsfAVVCZqLzVir6XDqmH0r+Vzgnd5LrdHDMyjtFnJQLAYw==
+  dependencies:
+    chokidar "^3.3.0"
+    livereload-js "^3.1.0"
+    opts ">= 1.2.0"
+    ws "^6.2.1"
+
+magic-string@^0.25.7:
+  version "0.25.7"
+  resolved "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"
+  integrity sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==
+  dependencies:
+    sourcemap-codec "^1.4.4"
+
+merge-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
+  integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
+
+mime@>=2.4.6:
+  version "2.4.6"
+  resolved "https://registry.npmjs.org/mime/-/mime-2.4.6.tgz#e5b407c90db442f2beb5b162373d07b69affa4d1"
+  integrity sha512-RZKhC3EmpBchfTGBVb8fb+RL2cWyw/32lshnsETttkBAyAUXSGHxbEJWWRXc751DrIxG1q04b8QwMbAwkRPpUA==
+
+min-indent@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
+  integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
+
+minimatch@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
+  integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+normalize-path@^3.0.0, normalize-path@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
+  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
+
+once@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
+  dependencies:
+    wrappy "1"
+
+opener@1:
+  version "1.5.2"
+  resolved "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz#5d37e1f35077b9dcac4301372271afdeb2a13598"
+  integrity sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==
+
+"opts@>= 1.2.0":
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/opts/-/opts-2.0.2.tgz#a17e189fbbfee171da559edd8a42423bc5993ce1"
+  integrity sha512-k41FwbcLnlgnFh69f4qdUfvDQ+5vaSDnVPFI/y5XuhKRq97EnVVneO9F1ESVCdiVu4fCS2L8usX3mU331hB7pg==
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
+
+path-parse@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
+  integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
+
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
+  integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
+
+randombytes@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
+  integrity sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==
+  dependencies:
+    safe-buffer "^5.1.0"
+
+readdirp@~3.4.0:
+  version "3.4.0"
+  resolved "https://registry.npmjs.org/readdirp/-/readdirp-3.4.0.tgz#9fdccdf9e9155805449221ac645e8303ab5b9ada"
+  integrity sha512-0xe001vZBnJEK+uKcj8qOhyAKPzIT+gStxWr3LCB0DwcXR5NZJ3IaC+yGnHCYzB/S7ov3m3EEbZI2zeNvX+hGQ==
+  dependencies:
+    picomatch "^2.2.1"
+
+require-relative@^0.8.7:
+  version "0.8.7"
+  resolved "https://registry.npmjs.org/require-relative/-/require-relative-0.8.7.tgz#7999539fc9e047a37928fa196f8e1563dabd36de"
+  integrity sha1-eZlTn8ngR6N5KPoZb44VY9q9Nt4=
+
+resolve@^1.17.0:
+  version "1.17.0"
+  resolved "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
+  integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==
+  dependencies:
+    path-parse "^1.0.6"
+
+rimraf@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
+  dependencies:
+    glob "^7.1.3"
+
+rollup-plugin-livereload@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/rollup-plugin-livereload/-/rollup-plugin-livereload-2.0.0.tgz#d3928d74e8cf2ae4286c5dd46b770fd3f3b82313"
+  integrity sha512-oC/8NqumGYuphkqrfszOHUUIwzKsaHBICw6QRwT5uD07gvePTS+HW+GFwu6f9K8W02CUuTvtIM9AWJrbj4wE1A==
+  dependencies:
+    livereload "^0.9.1"
+
+rollup-plugin-serve@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/rollup-plugin-serve/-/rollup-plugin-serve-1.0.4.tgz#17665974185f9007ecaeb0835c4e89612e04d234"
+  integrity sha512-74Gh47+dGKhmy04MIu9deXwn8VGlWsk93HcGIbO+NCdZ9roRXVO7y4l/9MLAAujuYpzsWCopHHZT8/6PSRzGLg==
+  dependencies:
+    mime ">=2.4.6"
+    opener "1"
+
+rollup-plugin-svelte@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/rollup-plugin-svelte/-/rollup-plugin-svelte-6.0.0.tgz#a5b15354371ec17fe67bd4def4d4ea1b915f74cb"
+  integrity sha512-y9qtWa+iNYwXdOZqaEqz3i6k3gzofC9JXzv+WVKDOt0DLiJxJaSrlKKf4YkKG91RzTK5Lo+0fW8in9QH/DxEhA==
+  dependencies:
+    require-relative "^0.8.7"
+    rollup-pluginutils "^2.8.2"
+    sourcemap-codec "^1.4.8"
+
+rollup-plugin-terser@^7.0.2:
+  version "7.0.2"
+  resolved "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz#e8fbba4869981b2dc35ae7e8a502d5c6c04d324d"
+  integrity sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    jest-worker "^26.2.1"
+    serialize-javascript "^4.0.0"
+    terser "^5.0.0"
+
+rollup-pluginutils@^2.8.2:
+  version "2.8.2"
+  resolved "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"
+  integrity sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==
+  dependencies:
+    estree-walker "^0.6.1"
+
+rollup@^2.23.0:
+  version "2.26.10"
+  resolved "https://registry.npmjs.org/rollup/-/rollup-2.26.10.tgz#0ffe0390d35f07af850382f22f1b8525c7f57f07"
+  integrity sha512-dUnjCWOA0h9qNX6qtcHidyatz8FAFZxVxt1dbcGtKdlJkpSxGK3G9+DLCYvtZr9v94D129ij9zUhG+xbRoqepw==
+  optionalDependencies:
+    fsevents "~2.1.2"
+
+safe-buffer@^5.1.0:
+  version "5.2.1"
+  resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
+serialize-javascript@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa"
+  integrity sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==
+  dependencies:
+    randombytes "^2.1.0"
+
+source-map-support@~0.5.12:
+  version "0.5.19"
+  resolved "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
+  integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
+source-map@^0.6.0, source-map@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
+sourcemap-codec@^1.4.4, sourcemap-codec@^1.4.8:
+  version "1.4.8"
+  resolved "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
+  integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
+
+strip-indent@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001"
+  integrity sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==
+  dependencies:
+    min-indent "^1.0.0"
+
+supports-color@^5.3.0:
+  version "5.5.0"
+  resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
+  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
+  dependencies:
+    has-flag "^3.0.0"
+
+supports-color@^7.0.0:
+  version "7.2.0"
+  resolved "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
+svelte-preprocess@^4.0.9:
+  version "4.2.1"
+  resolved "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.2.1.tgz#46a936ade6e7b14f407167bff3318df4528484d3"
+  integrity sha512-iagQGcKgCwlSKcKJ2GA3SznjWKwz4Q4yAkYdVMvgE8hQ+vTlvjjRcpCo/9P7u+otr5DLG16PPMwgVQZ3h51cKQ==
+  dependencies:
+    "@types/pug" "^2.0.4"
+    "@types/sass" "^1.16.0"
+    detect-indent "^6.0.0"
+    strip-indent "^3.0.0"
+
+svelte@^3.24.0:
+  version "3.24.1"
+  resolved "https://registry.npmjs.org/svelte/-/svelte-3.24.1.tgz#aca364937dd1df27fe131e2a4c234acb6061db4b"
+  integrity sha512-OX/IBVUJSFo1rnznXdwf9rv6LReJ3qQ0PwRjj76vfUWyTfbHbR9OXqJBnUrpjyis2dwYcbT2Zm1DFjOOF1ZbbQ==
+
+terser@^5.0.0:
+  version "5.3.0"
+  resolved "https://registry.npmjs.org/terser/-/terser-5.3.0.tgz#c481f4afecdcc182d5e2bdd2ff2dc61555161e81"
+  integrity sha512-XTT3D3AwxC54KywJijmY2mxZ8nJiEjBHVYzq8l9OaYuRFWeQNBwvipuzzYEP4e+/AVcd1hqG/CqgsdIRyT45Fg==
+  dependencies:
+    commander "^2.20.0"
+    source-map "~0.6.1"
+    source-map-support "~0.5.12"
+
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
+
+ws@^6.2.1:
+  version "6.2.1"
+  resolved "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz#442fdf0a47ed64f59b6a5d8ff130f4748ed524fb"
+  integrity sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==
+  dependencies:
+    async-limiter "~1.0.0"
--- a/examples/routify/.gitignore
+++ b/examples/routify/.gitignore
@ -0,0 +1,6 @@
+/node_modules
+/dist
+.DS_Store
+.routify
+yarn-debug.log*
+yarn-error.log*
--- a/examples/routify/README.md
+++ b/examples/routify/README.md
@ -0,0 +1,23 @@
+# routify
+
+> Example set-up using [Routify](https://github.com/roxiness/routify).
+
+## Getting started
+
+Scaffold a new project using [degit](https://github.com/Rich-Harris/degit):
+
+```sh
+npx degit ibm/carbon-components-svelte#routify svelte-app
+cd svelte-app
+yarn install
+```
+
+## Available scripts
+
+### `yarn dev`
+
+Starts the app in development mode.
+
+### `yarn build`
+
+Builds the app for production.
--- a/examples/routify/package.json
+++ b/examples/routify/package.json
@ -0,0 +1,39 @@
+{
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "run-p dev:*",
+    "dev:rollup": "rollup -cw",
+    "dev:routify": "routify",
+    "build": "routify -b && rollup -c && routify export"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^13.0.0",
+    "@rollup/plugin-node-resolve": "^8.1.0",
+    "@rollup/plugin-replace": "^2.3.3",
+    "@sveltech/routify": "^1.9.1",
+    "carbon-components-svelte": "^0.11.0",
+    "marked": "^1.1.1",
+    "mdsvex": "^0.8.2",
+    "npm-run-all": "^4.1.5",
+    "remark-slug": "^6.0.0",
+    "rollup": "^2.18.1",
+    "rollup-plugin-copy": "^3.3.0",
+    "rollup-plugin-livereload": "^2.0.0",
+    "rollup-plugin-svelte": "^5.2.3",
+    "rollup-plugin-svelte-hot": "^0.9.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "routify-plugin-frontmatter": "^1.0.1",
+    "spassr": "^1.1.2",
+    "svelte": "^3.23.2",
+    "svelte-preprocess": "^4.2.1"
+  },
+  "routify": {
+    "extensions": "svelte,md",
+    "routifyDir": ".routify",
+    "dynamicImports": true,
+    "plugins": {
+      "routify-plugin-frontmatter": {}
+    }
+  }
+}
--- a/examples/routify/rollup.config.js
+++ b/examples/routify/rollup.config.js
@ -0,0 +1,28 @@
+import { createRollupConfigs } from "./scripts/base.config.js";
+import slug from "remark-slug";
+import { mdsvex } from "mdsvex";
+import autoPreprocess from "svelte-preprocess";
+
+const production = !process.env.ROLLUP_WATCH;
+
+export const config = {
+  staticDir: "static",
+  distDir: "dist",
+  buildDir: "dist/build",
+  serve: !production,
+  production,
+  rollupWrapper: (cfg) => cfg,
+  svelteWrapper: (svelte) => {
+    svelte.preprocess = [
+      autoPreprocess(),
+      mdsvex({ remarkPlugins: [slug], extension: "md" }),
+    ];
+    svelte.extensions = [".svelte", ".md"];
+    return svelte;
+  },
+  swWrapper: (cfg) => cfg,
+};
+
+const configs = createRollupConfigs(config);
+
+export default configs;
--- a/examples/routify/scripts/base.config.js
+++ b/examples/routify/scripts/base.config.js
@ -0,0 +1,93 @@
+import svelte from "rollup-plugin-svelte-hot";
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import livereload from "rollup-plugin-livereload";
+import { terser } from "rollup-plugin-terser";
+import copy from "rollup-plugin-copy";
+import fs from "fs";
+import replace from "@rollup/plugin-replace";
+import { spassr } from "spassr";
+import { version } from "../package.json";
+
+export function createRollupConfigs(config) {
+  const { production, serve, distDir } = config;
+  const useDynamicImports = process.env.BUNDLING === "dynamic" || !!production;
+
+  fs.rmdirSync(distDir, { recursive: true });
+
+  if (serve) spassr({ serveSpa: true, serveSsr: true, silent: false });
+
+  return [
+    baseConfig(config, { dynamicImports: false }),
+    useDynamicImports && baseConfig(config, { dynamicImports: true }),
+  ].filter(Boolean);
+}
+
+function baseConfig(config, ctx) {
+  const { dynamicImports } = ctx;
+  const {
+    staticDir,
+    distDir,
+    production,
+    buildDir,
+    svelteWrapper,
+    rollupWrapper,
+  } = config;
+
+  const outputConfig = !!dynamicImports
+    ? { format: "esm", dir: buildDir }
+    : { format: "iife", file: `${buildDir}/bundle.js` };
+
+  const svelteConfig = {
+    dev: !production,
+    css: (css) => css.write(`${buildDir}/bundle.css`, !production),
+    hot: false,
+  };
+
+  const rollupConfig = {
+    inlineDynamicImports: !dynamicImports,
+    input: "src/main.js",
+    output: { name: "routify_app", sourcemap: !production, ...outputConfig },
+    plugins: [
+      copy({
+        targets: [
+          { src: [`${staticDir}/*`, "!*/(__index.html)"], dest: distDir },
+          {
+            src: [`${staticDir}/__index.html`],
+            dest: distDir,
+            rename: "__app.html",
+            transform,
+          },
+        ],
+        copyOnce: true,
+        flatten: false,
+      }),
+      replace({ "process.env.VERSION": JSON.stringify(version) }),
+      svelte(svelteWrapper(svelteConfig, ctx)),
+      resolve({
+        browser: true,
+        dedupe: (importee) => !!importee.match(/svelte(\/|$)/),
+      }),
+      commonjs(),
+      production && terser(),
+      !production && livereload(distDir),
+    ],
+    watch: {
+      clearScreen: false,
+      buildDelay: 100,
+    },
+  };
+
+  return rollupWrapper(rollupConfig, ctx);
+
+  function transform(contents) {
+    const scriptTag =
+      typeof config.scriptTag != "undefined"
+        ? config.scriptTag
+        : '<script type="module" defer src="/build/main.js"></script>';
+    const bundleTag = '<script defer src="/build/bundle.js"></script>';
+    return contents
+      .toString()
+      .replace("__SCRIPT__", dynamicImports ? scriptTag : bundleTag);
+  }
+}
--- a/examples/routify/src/App.svelte
+++ b/examples/routify/src/App.svelte
@ -0,0 +1,6 @@
+<script>
+  import { Router } from "@sveltech/routify";
+  import { routes } from "../.routify/routes";
+</script>
+
+<Router routes="{routes}" />
--- a/examples/routify/src/components/Theme.svelte
+++ b/examples/routify/src/components/Theme.svelte
@ -0,0 +1,66 @@
+<script>
+  export let persist = false;
+  export let persistKey = "theme";
+  export let theme = "white";
+  export const themes = ["white", "g10", "g90", "g100"];
+
+  import { onMount, afterUpdate, setContext } from "svelte";
+  import { writable, derived } from "svelte/store";
+
+  const isValidTheme = (value) => themes.includes(value);
+  const isDark = (value) =>
+    isValidTheme(value) && (value === "g90" || value === "g100");
+
+  const carbon_theme = writable(theme);
+  const dark = writable(isDark(theme));
+  const light = derived(dark, (_) => !_);
+
+  const unsubscribe = carbon_theme.subscribe((value) => {
+    theme = value;
+  });
+
+  setContext("Theme", {
+    updateVar: (name, value) => {
+      document.documentElement.style.setProperty(name, value);
+    },
+    carbon_theme,
+    dark,
+    light,
+  });
+
+  onMount(() => {
+    try {
+      const persisted_theme = localStorage.getItem(persistKey);
+
+      if (isValidTheme(persisted_theme)) {
+        carbon_theme.set(persisted_theme);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+
+    return () => {
+      unsubscribe();
+    };
+  });
+
+  afterUpdate(() => {
+    if (isValidTheme(theme)) {
+      document.documentElement.setAttribute("theme", theme);
+
+      if (persist) {
+        localStorage.setItem(persistKey, theme);
+      }
+    } else {
+      console.warn(
+        `"${theme}" is not a valid Carbon theme. Choose from available themes: ${JSON.stringify(
+          themes
+        )}`
+      );
+    }
+  });
+
+  $: dark.set(isDark(theme));
+</script>
+
+<slot />
--- a/examples/routify/src/main.js
+++ b/examples/routify/src/main.js
@ -0,0 +1,6 @@
+import HMR from "@sveltech/routify/hmr";
+import App from "./App.svelte";
+
+const app = HMR(App, { target: document.body }, "routify-app");
+
+export default app;
--- a/examples/routify/src/pages/_fallback.svelte
+++ b/examples/routify/src/pages/_fallback.svelte
@ -0,0 +1,14 @@
+<script>
+  import { url } from "@sveltech/routify";
+  import { Row, Column, Link } from "carbon-components-svelte";
+</script>
+
+<Row>
+  <Column lg="{16}">
+    <h1>404</h1>
+    <div>
+      Page not found.
+      <Link inline href="{$url('..')}">Return home</Link>
+    </div>
+  </Column>
+</Row>
--- a/examples/routify/src/pages/_layout.svelte
+++ b/examples/routify/src/pages/_layout.svelte
@ -0,0 +1,19 @@
+<script>
+  import { metatags, page } from "@sveltech/routify";
+  import { Content, Grid } from "carbon-components-svelte";
+  import Navigation from "./_navigation.svelte";
+  import Theme from "../components/Theme.svelte";
+</script>
+
+<style lang="scss" global>
+  @import "carbon-components-svelte/css/all";
+</style>
+
+<Theme persist theme="g10">
+  <Navigation />
+  <Content style="background: none; padding: 1rem">
+    <Grid>
+      <slot />
+    </Grid>
+  </Content>
+</Theme>
--- a/examples/routify/src/pages/_navigation.svelte
+++ b/examples/routify/src/pages/_navigation.svelte
@ -0,0 +1,35 @@
+<script>
+  import {
+    SkipToContent,
+    Header,
+    HeaderUtilities,
+    HeaderGlobalAction,
+  } from "carbon-components-svelte";
+  import Notification20 from "carbon-icons-svelte/lib/Notification20";
+  import UserAvatar20 from "carbon-icons-svelte/lib/UserAvatar20";
+  import AppSwitcher20 from "carbon-icons-svelte/lib/AppSwitcher20";
+  import { getContext } from "svelte";
+
+  const ctx = getContext("Theme");
+
+  $: if (ctx) {
+    ctx.dark.subscribe((value) => {
+      console.log("dark mode?", value);
+    });
+    ctx.light.subscribe((value) => {
+      console.log("light mode?", value);
+    });
+    ctx.updateVar("--cds-productive-heading-06-font-size", "4rem");
+  }
+</script>
+
+<Header company="IBM" platformName="Carbon Components Svelte" href="/">
+  <div slot="skip-to-content">
+    <SkipToContent />
+  </div>
+  <HeaderUtilities>
+    <HeaderGlobalAction aria-label="Notifications" icon="{Notification20}" />
+    <HeaderGlobalAction aria-label="User Avatar" icon="{UserAvatar20}" />
+    <HeaderGlobalAction aria-label="App Switcher" icon="{AppSwitcher20}" />
+  </HeaderUtilities>
+</Header>
--- a/examples/routify/src/pages/index.svelte
+++ b/examples/routify/src/pages/index.svelte
@ -0,0 +1,83 @@
+<script>
+  import {
+    Breadcrumb,
+    BreadcrumbItem,
+    Grid,
+    Row,
+    Column,
+    Tabs,
+    TabContent,
+    Tab,
+    Select,
+    SelectItem,
+  } from "carbon-components-svelte";
+
+  import { getContext } from "svelte";
+
+  const { carbon_theme } = getContext("Theme");
+</script>
+
+<Row>
+  <Column lg="{16}">
+    <Breadcrumb noTrailingSlash aria-label="Page navigation">
+      <BreadcrumbItem href="/">Getting started</BreadcrumbItem>
+    </Breadcrumb>
+    <h1 style="margin-bottom: 1.5rem">Design &amp; build with Carbon</h1>
+  </Column>
+</Row>
+
+<Row>
+  <Column noGutter>
+    <Tabs aria-label="Tab navigation">
+      <Tab label="About" />
+      <Tab label="Design" />
+      <Tab label="Develop" />
+      <div slot="content" class="tabbed-content">
+        <Grid as fullWidth let:props>
+          <TabContent {...props}>
+            <Row>
+              <Column md="{4}" lg="{7}">
+                <Select
+                  labelText="Carbon theme"
+                  bind:selected="{$carbon_theme}"
+                  style="margin-bottom: 1rem">
+                  <SelectItem value="white" text="White" />
+                  <SelectItem value="g10" text="Gray 10" />
+                  <SelectItem value="g90" text="Gray 90" />
+                  <SelectItem value="g100" text="Gray 100" />
+                </Select>
+                <p>
+                  Carbon is IBM’s open-source design system for digital products
+                  and experiences. With the IBM Design Language as its
+                  foundation, the system consists of working code, design tools
+                  and resources, human interface guidelines, and a vibrant
+                  community of contributors.
+                </p>
+              </Column>
+            </Row>
+          </TabContent>
+          <TabContent {...props}>
+            <Row>
+              <Column md="{4}" lg="{7}">
+                <p>
+                  Rapidly build beautiful and accessible experiences. The Carbon
+                  kit contains all resources you need to get started.
+                </p>
+              </Column>
+            </Row>
+          </TabContent>
+          <TabContent {...props}>
+            <Row>
+              <Column md="{4}" lg="{7}">
+                <p>
+                  Carbon provides styles and components in Vanilla, React,
+                  Angular, Vue and Svelte for anyone building on the web.
+                </p>
+              </Column>
+            </Row>
+          </TabContent>
+        </Grid>
+      </div>
+    </Tabs>
+  </Column>
+</Row>
--- a/examples/routify/static/__index.html
+++ b/examples/routify/static/__index.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="/favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <title>routify</title>
+    <link rel="stylesheet" href="/build/bundle.css" />
+    __SCRIPT__
+  </head>
+  <body></body>
+</html>
--- a/examples/routify/static/favicon.ico
+++ b/examples/routify/static/favicon.ico
--- a/examples/routify/static/robots.txt
+++ b/examples/routify/static/robots.txt
@ -0,0 +1,2 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
--- a/examples/routify/yarn.lock
+++ b/examples/routify/yarn.lock
--- a/examples/sapper/.gitignore
+++ b/examples/sapper/.gitignore
@ -0,0 +1,5 @@
+.DS_Store
+/node_modules/
+/src/node_modules/@sapper/
+yarn-error.log
+/__sapper__/
--- a/examples/sapper/README.md
+++ b/examples/sapper/README.md
@ -0,0 +1,33 @@
+# svite
+
+> Example set-up using [Sapper](https://github.com/sveltejs/sapper).
+
+## Getting started
+
+Scaffold a new project using [degit](https://github.com/Rich-Harris/degit):
+
+```sh
+npx degit ibm/carbon-components-svelte#sapper svelte-app
+cd svelte-app
+yarn install
+```
+
+## Available scripts
+
+### `yarn dev`
+
+Runs the app in development mode.
+
+### `yarn build`
+
+Builds the app for production (SSR).
+
+### `yarn export`
+
+Builds the app for production and statically exports the app.
+
+### `yarn start`
+
+Runs the app in production (`yarn build` must be run first).
+
+
--- a/examples/sapper/package.json
+++ b/examples/sapper/package.json
@ -0,0 +1,34 @@
+{
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "sapper dev",
+    "build": "sapper build --legacy",
+    "export": "sapper export --legacy",
+    "start": "node __sapper__/build"
+  },
+  "dependencies": {
+    "compression": "^1.7.1",
+    "polka": "next",
+    "sirv": "^1.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+    "@babel/plugin-transform-runtime": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/runtime": "^7.0.0",
+    "@rollup/plugin-babel": "^5.0.0",
+    "@rollup/plugin-commonjs": "^14.0.0",
+    "@rollup/plugin-node-resolve": "^8.0.0",
+    "@rollup/plugin-replace": "^2.2.0",
+    "carbon-components-svelte": "^0.11.0",
+    "npm-run-all": "^4.1.5",
+    "rollup": "^2.3.4",
+    "rollup-plugin-svelte": "^6.0.0",
+    "rollup-plugin-terser": "^7.0.0",
+    "sapper": "^0.28.0",
+    "svelte": "^3.17.3",
+    "svelte-preprocess": "^4.2.1"
+  }
+}
--- a/examples/sapper/rollup.config.js
+++ b/examples/sapper/rollup.config.js
@ -0,0 +1,118 @@
+import resolve from "@rollup/plugin-node-resolve";
+import replace from "@rollup/plugin-replace";
+import commonjs from "@rollup/plugin-commonjs";
+import svelte from "rollup-plugin-svelte";
+import babel from "@rollup/plugin-babel";
+import { terser } from "rollup-plugin-terser";
+import sveltePreprocess from "svelte-preprocess";
+import config from "sapper/config/rollup.js";
+import pkg from "./package.json";
+
+const mode = process.env.NODE_ENV;
+const dev = mode === "development";
+const legacy = !!process.env.SAPPER_LEGACY_BUILD;
+
+const onwarn = (warning, onwarn) =>
+  (warning.code === "MISSING_EXPORT" && /'preload'/.test(warning.message)) ||
+  (warning.code === "CIRCULAR_DEPENDENCY" &&
+    /[/\\]@sapper[/\\]/.test(warning.message)) ||
+  onwarn(warning);
+
+export default {
+  client: {
+    input: config.client.input(),
+    output: config.client.output(),
+    plugins: [
+      replace({
+        "process.browser": true,
+        "process.env.NODE_ENV": JSON.stringify(mode),
+      }),
+      svelte({
+        dev,
+        hydratable: true,
+        emitCss: true,
+        preprocess: sveltePreprocess(),
+      }),
+      resolve({
+        browser: true,
+        dedupe: ["svelte"],
+      }),
+      commonjs(),
+
+      legacy &&
+        babel({
+          extensions: [".js", ".mjs", ".html", ".svelte"],
+          babelHelpers: "runtime",
+          exclude: ["node_modules/@babel/**"],
+          presets: [
+            [
+              "@babel/preset-env",
+              {
+                targets: "> 0.25%, not dead",
+              },
+            ],
+          ],
+          plugins: [
+            "@babel/plugin-syntax-dynamic-import",
+            [
+              "@babel/plugin-transform-runtime",
+              {
+                useESModules: true,
+              },
+            ],
+          ],
+        }),
+
+      !dev &&
+        terser({
+          module: true,
+        }),
+    ],
+
+    preserveEntrySignatures: false,
+    onwarn,
+  },
+
+  server: {
+    input: config.server.input(),
+    output: config.server.output(),
+    plugins: [
+      replace({
+        "process.browser": false,
+        "process.env.NODE_ENV": JSON.stringify(mode),
+      }),
+      svelte({
+        generate: "ssr",
+        hydratable: true,
+        dev,
+      }),
+      resolve({
+        dedupe: ["svelte"],
+      }),
+      commonjs(),
+    ],
+    external: Object.keys(pkg.dependencies).concat(
+      require("module").builtinModules
+    ),
+
+    preserveEntrySignatures: "strict",
+    onwarn,
+  },
+
+  serviceworker: {
+    input: config.serviceworker.input(),
+    output: config.serviceworker.output(),
+    plugins: [
+      resolve(),
+      replace({
+        "process.browser": true,
+        "process.env.NODE_ENV": JSON.stringify(mode),
+      }),
+      commonjs(),
+      !dev && terser(),
+    ],
+
+    preserveEntrySignatures: false,
+    onwarn,
+  },
+};
--- a/examples/sapper/src/client.js
+++ b/examples/sapper/src/client.js
@ -0,0 +1,3 @@
+import * as sapper from "@sapper/app";
+
+sapper.start({ target: document.querySelector("#sapper") });
--- a/examples/sapper/src/components/Header.svelte
+++ b/examples/sapper/src/components/Header.svelte
@ -0,0 +1,37 @@
+<script>
+  export let segment = undefined;
+
+  import {
+    SkipToContent,
+    Header,
+    HeaderUtilities,
+    HeaderGlobalAction,
+  } from "carbon-components-svelte";
+  import Notification20 from "carbon-icons-svelte/lib/Notification20";
+  import UserAvatar20 from "carbon-icons-svelte/lib/UserAvatar20";
+  import AppSwitcher20 from "carbon-icons-svelte/lib/AppSwitcher20";
+  import { getContext } from "svelte";
+
+  const ctx = getContext("Theme");
+
+  $: if (ctx) {
+    ctx.dark.subscribe((value) => {
+      console.log("dark mode?", value);
+    });
+    ctx.light.subscribe((value) => {
+      console.log("light mode?", value);
+    });
+    ctx.updateVar("--cds-productive-heading-06-font-size", "4rem");
+  }
+</script>
+
+<Header company="IBM" platformName="Carbon Components Svelte" href="/">
+  <div slot="skip-to-content">
+    <SkipToContent />
+  </div>
+  <HeaderUtilities>
+    <HeaderGlobalAction aria-label="Notifications" icon="{Notification20}" />
+    <HeaderGlobalAction aria-label="User Avatar" icon="{UserAvatar20}" />
+    <HeaderGlobalAction aria-label="App Switcher" icon="{AppSwitcher20}" />
+  </HeaderUtilities>
+</Header>
--- a/examples/sapper/src/components/Nav.svelte
+++ b/examples/sapper/src/components/Nav.svelte
@ -0,0 +1,73 @@
+<script>
+  export let segment;
+</script>
+
+<style>
+  nav {
+    border-bottom: 1px solid rgba(255, 62, 0, 0.1);
+    font-weight: 300;
+    padding: 0 1em;
+  }
+
+  ul {
+    margin: 0;
+    padding: 0;
+  }
+
+  /* clearfix */
+  ul::after {
+    content: "";
+    display: block;
+    clear: both;
+  }
+
+  li {
+    display: block;
+    float: left;
+  }
+
+  [aria-current] {
+    position: relative;
+    display: inline-block;
+  }
+
+  [aria-current]::after {
+    position: absolute;
+    content: "";
+    width: calc(100% - 1em);
+    height: 2px;
+    background-color: rgb(255, 62, 0);
+    display: block;
+    bottom: -1px;
+  }
+
+  a {
+    text-decoration: none;
+    padding: 1em 0.5em;
+    display: block;
+  }
+</style>
+
+<nav>
+  <ul>
+    <li>
+      <a
+        aria-current="{segment === undefined ? 'page' : undefined}"
+        href=".">home</a>
+    </li>
+    <li>
+      <a
+        aria-current="{segment === 'about' ? 'page' : undefined}"
+        href="about">about</a>
+    </li>
+
+    <!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
+		     the blog data when we hover over the link or tap it on a touchscreen -->
+    <li>
+      <a
+        rel="prefetch"
+        aria-current="{segment === 'blog' ? 'page' : undefined}"
+        href="blog">blog</a>
+    </li>
+  </ul>
+</nav>
--- a/examples/sapper/src/components/Theme.svelte
+++ b/examples/sapper/src/components/Theme.svelte
@ -0,0 +1,74 @@
+<script>
+  export let persist = false;
+  export let persistKey = "theme";
+  export let theme = "white";
+  export const themes = ["white", "g10", "g90", "g100"];
+
+  import { onMount, afterUpdate, setContext } from "svelte";
+  import { writable, derived } from "svelte/store";
+
+  const isValidTheme = (value) => themes.includes(value);
+  const isDark = (value) =>
+    isValidTheme(value) && (value === "g90" || value === "g100");
+
+  const carbon_theme = writable(theme);
+  const dark = writable(isDark(theme));
+  const light = derived(dark, (_) => !_);
+
+  const unsubscribe = carbon_theme.subscribe((value) => {
+    theme = value;
+  });
+
+  let _document = null;
+
+  setContext("Theme", {
+    updateVar: (name, value) => {
+      if (_document != null) {
+        _document.documentElement.style.setProperty(name, value);
+      }
+    },
+    carbon_theme,
+    dark,
+    light,
+  });
+
+  onMount(() => {
+    _document = window.document;
+
+    try {
+      const persisted_theme = localStorage.getItem(persistKey);
+
+      if (isValidTheme(persisted_theme)) {
+        carbon_theme.set(persisted_theme);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+
+    return () => {
+      unsubscribe();
+    };
+  });
+
+  afterUpdate(() => {
+    if (isValidTheme(theme)) {
+      if (_document != null) {
+        _document.documentElement.setAttribute("theme", theme);
+      }
+
+      if (persist) {
+        localStorage.setItem(persistKey, theme);
+      }
+    } else {
+      console.warn(
+        `"${theme}" is not a valid Carbon theme. Choose from available themes: ${JSON.stringify(
+          themes
+        )}`
+      );
+    }
+  });
+
+  $: dark.set(isDark(theme));
+</script>
+
+<slot />
--- a/examples/sapper/src/routes/_error.svelte
+++ b/examples/sapper/src/routes/_error.svelte
@ -0,0 +1,23 @@
+<script>
+  export let status;
+  export let error;
+
+  import { Row, Column, Link } from "carbon-components-svelte";
+
+  const dev = process.env.NODE_ENV === "development";
+</script>
+
+<Row>
+  <Column lg="{16}">
+    <h1>{status}</h1>
+    <div>
+      {error.message}
+      <Link inline href="/">Return home</Link>
+    </div>
+    {#if dev && error.stack}
+      <div>
+        <pre>{error.stack}</pre>
+      </div>
+    {/if}
+  </Column>
+</Row>
--- a/examples/sapper/src/routes/_layout.svelte
+++ b/examples/sapper/src/routes/_layout.svelte
@ -0,0 +1,32 @@
+<script>
+  export let segment = undefined;
+
+  import {
+    Content,
+    Breadcrumb,
+    BreadcrumbItem,
+    Grid,
+    Row,
+    Column,
+    Tabs,
+    TabContent,
+    Tab,
+    Select,
+    SelectItem,
+  } from "carbon-components-svelte";
+  import Header from "../components/Header.svelte";
+  import Theme from "../components/Theme.svelte";
+</script>
+
+<style lang="scss" global>
+  @import "carbon-components-svelte/css/all";
+</style>
+
+<Theme persist theme="g10">
+  <Header segment="{segment}" />
+  <Content style="background: none; padding: 1rem">
+    <Grid>
+      <slot />
+    </Grid>
+  </Content>
+</Theme>
--- a/examples/sapper/src/routes/index.svelte
+++ b/examples/sapper/src/routes/index.svelte
@ -0,0 +1,84 @@
+<script>
+  import {
+    Content,
+    Breadcrumb,
+    BreadcrumbItem,
+    Grid,
+    Row,
+    Column,
+    Tabs,
+    TabContent,
+    Tab,
+    Select,
+    SelectItem,
+  } from "carbon-components-svelte";
+
+  import { getContext } from "svelte";
+
+  const { carbon_theme } = getContext("Theme");
+</script>
+
+<Row>
+  <Column lg="{16}">
+    <Breadcrumb noTrailingSlash aria-label="Page navigation">
+      <BreadcrumbItem href="/">Getting started</BreadcrumbItem>
+    </Breadcrumb>
+    <h1 style="margin-bottom: 1.5rem">Design &amp; build with Carbon</h1>
+  </Column>
+</Row>
+
+<Row>
+  <Column noGutter>
+    <Tabs aria-label="Tab navigation">
+      <Tab label="About" />
+      <Tab label="Design" />
+      <Tab label="Develop" />
+      <div slot="content" class="tabbed-content">
+        <Grid as fullWidth let:props>
+          <TabContent {...props}>
+            <Row>
+              <Column md="{4}" lg="{7}">
+                <Select
+                  labelText="Carbon theme"
+                  bind:selected="{$carbon_theme}"
+                  style="margin-bottom: 1rem">
+                  <SelectItem value="white" text="White" />
+                  <SelectItem value="g10" text="Gray 10" />
+                  <SelectItem value="g90" text="Gray 90" />
+                  <SelectItem value="g100" text="Gray 100" />
+                </Select>
+                <p>
+                  Carbon is IBM’s open-source design system for digital products
+                  and experiences. With the IBM Design Language as its
+                  foundation, the system consists of working code, design tools
+                  and resources, human interface guidelines, and a vibrant
+                  community of contributors.
+                </p>
+              </Column>
+            </Row>
+          </TabContent>
+          <TabContent {...props}>
+            <Row>
+              <Column md="{4}" lg="{7}">
+                <p>
+                  Rapidly build beautiful and accessible experiences. The Carbon
+                  kit contains all resources you need to get started.
+                </p>
+              </Column>
+            </Row>
+          </TabContent>
+          <TabContent {...props}>
+            <Row>
+              <Column md="{4}" lg="{7}">
+                <p>
+                  Carbon provides styles and components in Vanilla, React,
+                  Angular, Vue and Svelte for anyone building on the web.
+                </p>
+              </Column>
+            </Row>
+          </TabContent>
+        </Grid>
+      </div>
+    </Tabs>
+  </Column>
+</Row>
--- a/examples/sapper/src/server.js
+++ b/examples/sapper/src/server.js
@ -0,0 +1,16 @@
+import sirv from "sirv";
+import polka from "polka";
+import compression from "compression";
+import * as sapper from "@sapper/server";
+
+const { PORT, NODE_ENV } = process.env;
+
+polka()
+  .use(
+    compression({ threshold: 0 }),
+    sirv("static", { dev: NODE_ENV === "development" }),
+    sapper.middleware()
+  )
+  .listen(PORT, (err) => {
+    if (err) console.log("error", err);
+  });
--- a/examples/sapper/src/service-worker.js
+++ b/examples/sapper/src/service-worker.js
@ -0,0 +1,82 @@
+import { timestamp, files, shell, routes } from '@sapper/service-worker';
+
+const ASSETS = `cache${timestamp}`;
+
+// `shell` is an array of all the files generated by the bundler,
+// `files` is an array of everything in the `static` directory
+const to_cache = shell.concat(files);
+const cached = new Set(to_cache);
+
+self.addEventListener('install', event => {
+	event.waitUntil(
+		caches
+			.open(ASSETS)
+			.then(cache => cache.addAll(to_cache))
+			.then(() => {
+				self.skipWaiting();
+			})
+	);
+});
+
+self.addEventListener('activate', event => {
+	event.waitUntil(
+		caches.keys().then(async keys => {
+			// delete old caches
+			for (const key of keys) {
+				if (key !== ASSETS) await caches.delete(key);
+			}
+
+			self.clients.claim();
+		})
+	);
+});
+
+self.addEventListener('fetch', event => {
+	if (event.request.method !== 'GET' || event.request.headers.has('range')) return;
+
+	const url = new URL(event.request.url);
+
+	// don't try to handle e.g. data: URIs
+	if (!url.protocol.startsWith('http')) return;
+
+	// ignore dev server requests
+	if (url.hostname === self.location.hostname && url.port !== self.location.port) return;
+
+	// always serve static files and bundler-generated assets from cache
+	if (url.host === self.location.host && cached.has(url.pathname)) {
+		event.respondWith(caches.match(event.request));
+		return;
+	}
+
+	// for pages, you might want to serve a shell `service-worker-index.html` file,
+	// which Sapper has generated for you. It's not right for every
+	// app, but if it's right for yours then uncomment this section
+	/*
+	if (url.origin === self.origin && routes.find(route => route.pattern.test(url.pathname))) {
+		event.respondWith(caches.match('/service-worker-index.html'));
+		return;
+	}
+	*/
+
+	if (event.request.cache === 'only-if-cached') return;
+
+	// for everything else, try the network first, falling back to
+	// cache if the user is offline. (If the pages never change, you
+	// might prefer a cache-first approach to a network-first one.)
+	event.respondWith(
+		caches
+			.open(`offline${timestamp}`)
+			.then(async cache => {
+				try {
+					const response = await fetch(event.request);
+					cache.put(event.request, response.clone());
+					return response;
+				} catch(err) {
+					const response = await cache.match(event.request);
+					if (response) return response;
+
+					throw err;
+				}
+			})
+	);
+});
--- a/examples/sapper/src/template.html
+++ b/examples/sapper/src/template.html
@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="/favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <title>sapper</title>
+
+    %sapper.base%
+
+    <!-- Sapper creates a <script> tag containing `src/client.js`
+	     and anything else it needs to hydrate the app and
+	     initialise the router -->
+    %sapper.scripts%
+
+    <!-- Sapper generates a <style> tag containing critical CSS
+	     for the current page. CSS for the rest of the app is
+	     lazily loaded when it precaches secondary pages -->
+    %sapper.styles%
+
+    <!-- This contains the contents of the <svelte:head> component, if
+	     the current page has one -->
+    %sapper.head%
+  </head>
+  <body>
+    <!-- The application will be rendered inside this element,
+	     because `src/client.js` references it -->
+    <div id="sapper">%sapper.html%</div>
+  </body>
+</html>
--- a/examples/sapper/static/favicon.ico
+++ b/examples/sapper/static/favicon.ico
--- a/examples/sapper/yarn.lock
+++ b/examples/sapper/yarn.lock
--- a/examples/svite/.gitignore
+++ b/examples/svite/.gitignore
@ -0,0 +1,2 @@
+/dist
+/node_modules
--- a/examples/svite/README.md
+++ b/examples/svite/README.md
@ -0,0 +1,23 @@
+# svite
+
+> Example set-up using [svite](https://github.com/dominikg/svite).
+
+## Getting started
+
+Scaffold a new project using [degit](https://github.com/Rich-Harris/degit):
+
+```sh
+npx degit ibm/carbon-components-svelte#svite svelte-app
+cd svelte-app
+yarn install
+```
+
+## Available scripts
+
+### `yarn dev`
+
+Runs the app in development mode.
+
+### `yarn build`
+
+Builds the app for production.
--- a/examples/svite/index.html
+++ b/examples/svite/index.html
@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="/favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <title>svite</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <script type="module" src="/src/index.js"></script>
+  </body>
+</html>
--- a/examples/svite/package.json
+++ b/examples/svite/package.json
@ -0,0 +1,15 @@
+{
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "svite",
+    "build": "svite build"
+  },
+  "devDependencies": {
+    "carbon-components-svelte": "^0.11.0",
+    "svelte": "^3.24.1",
+    "svelte-hmr": "^0.10.2",
+    "svelte-preprocess": "^4.2.1",
+    "svite": "^0.6.0"
+  }
+}
--- a/examples/svite/public/favicon.ico
+++ b/examples/svite/public/favicon.ico
--- a/examples/svite/src/App.svelte
+++ b/examples/svite/src/App.svelte
@ -0,0 +1,91 @@
+<script>
+  import { Content } from "carbon-components-svelte/src/UIShell";
+  import {
+    Breadcrumb,
+    BreadcrumbItem,
+  } from "carbon-components-svelte/src/Breadcrumb";
+  import { Grid, Row, Column } from "carbon-components-svelte/src/Grid";
+  import { Tabs, TabContent, Tab } from "carbon-components-svelte/src/Tabs";
+  import { Select, SelectItem } from "carbon-components-svelte/src/Select";
+  import Header from "./components/Header.svelte";
+  import Theme from "./components/Theme.svelte";
+
+  let theme = "g10";
+</script>
+
+<style global>
+  @import "carbon-components-svelte/css/all";
+</style>
+
+<Theme persist bind:theme>
+  <Header />
+  <Content style="background: none; padding: 1rem">
+    <Grid>
+      <Row>
+        <Column lg="{16}">
+          <Breadcrumb noTrailingSlash aria-label="Page navigation">
+            <BreadcrumbItem href="/">Getting started</BreadcrumbItem>
+          </Breadcrumb>
+          <h1 style="margin-bottom: 1.5rem">Design &amp; build with Carbon</h1>
+        </Column>
+      </Row>
+
+      <Row>
+        <Column noGutter>
+          <Tabs aria-label="Tab navigation">
+            <Tab label="About" />
+            <Tab label="Design" />
+            <Tab label="Develop" />
+            <div slot="content" class="tabbed-content">
+              <Grid as fullWidth let:props>
+                <TabContent {...props}>
+                  <Row>
+                    <Column md="{4}" lg="{7}">
+                      <Select
+                        labelText="Carbon theme"
+                        bind:selected="{theme}"
+                        style="margin-bottom: 1rem">
+                        <SelectItem value="white" text="White" />
+                        <SelectItem value="g10" text="Gray 10" />
+                        <SelectItem value="g90" text="Gray 90" />
+                        <SelectItem value="g100" text="Gray 100" />
+                      </Select>
+                      <p>
+                        Carbon is IBM’s open-source design system for digital
+                        products and experiences. With the IBM Design Language
+                        as its foundation, the system consists of working code,
+                        design tools and resources, human interface guidelines,
+                        and a vibrant community of contributors.
+                      </p>
+                    </Column>
+                  </Row>
+                </TabContent>
+                <TabContent {...props}>
+                  <Row>
+                    <Column md="{4}" lg="{7}">
+                      <p>
+                        Rapidly build beautiful and accessible experiences. The
+                        Carbon kit contains all resources you need to get
+                        started.
+                      </p>
+                    </Column>
+                  </Row>
+                </TabContent>
+                <TabContent {...props}>
+                  <Row>
+                    <Column md="{4}" lg="{7}">
+                      <p>
+                        Carbon provides styles and components in Vanilla, React,
+                        Angular, Vue and Svelte for anyone building on the web.
+                      </p>
+                    </Column>
+                  </Row>
+                </TabContent>
+              </Grid>
+            </div>
+          </Tabs>
+        </Column>
+      </Row>
+    </Grid>
+  </Content>
+</Theme>
--- a/examples/svite/src/components/Header.svelte
+++ b/examples/svite/src/components/Header.svelte
@ -0,0 +1,35 @@
+<script>
+  import {
+    SkipToContent,
+    Header,
+    HeaderUtilities,
+    HeaderGlobalAction,
+  } from "carbon-components-svelte/src/UIShell";
+  import Notification20 from "carbon-icons-svelte/lib/Notification20";
+  import UserAvatar20 from "carbon-icons-svelte/lib/UserAvatar20";
+  import AppSwitcher20 from "carbon-icons-svelte/lib/AppSwitcher20";
+  import { getContext } from "svelte";
+
+  const ctx = getContext("Theme");
+
+  $: if (ctx) {
+    ctx.dark.subscribe((value) => {
+      console.log("dark mode?", value);
+    });
+    ctx.light.subscribe((value) => {
+      console.log("light mode?", value);
+    });
+    ctx.updateVar("--cds-productive-heading-06-font-size", "4rem");
+  }
+</script>
+
+<Header company="IBM" platformName="Carbon Components Svelte" href="/">
+  <div slot="skip-to-content">
+    <SkipToContent />
+  </div>
+  <HeaderUtilities>
+    <HeaderGlobalAction aria-label="Notifications" icon="{Notification20}" />
+    <HeaderGlobalAction aria-label="User Avatar" icon="{UserAvatar20}" />
+    <HeaderGlobalAction aria-label="App Switcher" icon="{AppSwitcher20}" />
+  </HeaderUtilities>
+</Header>
--- a/examples/svite/src/components/Theme.svelte
+++ b/examples/svite/src/components/Theme.svelte
@ -0,0 +1,55 @@
+<script>
+  export let persist = false;
+  export let persistKey = "theme";
+  export let theme = "white";
+  export const themes = ["white", "g10", "g90", "g100"];
+
+  import { onMount, afterUpdate, setContext } from "svelte";
+  import { writable, derived } from "svelte/store";
+
+  const isValidTheme = (value) => themes.includes(value);
+  const isDark = (value) =>
+    isValidTheme(value) && (value === "g90" || value === "g100");
+
+  const dark = writable(isDark(theme));
+  const light = derived(dark, (_) => !_);
+
+  setContext("Theme", {
+    updateVar: (name, value) => {
+      document.documentElement.style.setProperty(name, value);
+    },
+    dark,
+    light,
+  });
+
+  onMount(() => {
+    try {
+      const persisted_theme = localStorage.getItem(persistKey);
+
+      if (isValidTheme(persisted_theme)) {
+        theme = persisted_theme;
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  });
+
+  afterUpdate(() => {
+    if (isValidTheme(theme)) {
+      document.documentElement.setAttribute("theme", theme);
+      if (persist) {
+        localStorage.setItem(persistKey, theme);
+      }
+    } else {
+      console.warn(
+        `"${theme}" is not a valid Carbon theme. Choose from available themes: ${JSON.stringify(
+          themes
+        )}`
+      );
+    }
+  });
+
+  $: dark.set(isDark(theme));
+</script>
+
+<slot />
--- a/examples/svite/src/index.js
+++ b/examples/svite/src/index.js
@ -0,0 +1,5 @@
+import App from "./App.svelte";
+
+const app = new App({ target: document.body });
+
+export default app;
--- a/examples/svite/svelte.config.js
+++ b/examples/svite/svelte.config.js
@ -0,0 +1 @@
+module.exports = { preprocess: [require("svelte-preprocess")()] };
--- a/examples/svite/yarn.lock
+++ b/examples/svite/yarn.lock
--- a/examples/webpack/.gitignore
+++ b/examples/webpack/.gitignore
@ -0,0 +1,5 @@
+.DS_Store
+/build
+/node_modules
+yarn-debug.log*
+yarn-error.log*
--- a/examples/webpack/README.md
+++ b/examples/webpack/README.md
@ -0,0 +1,23 @@
+# webpack
+
+> Example set-up using [webpack](https://github.com/webpack/webpack).
+
+## Getting started
+
+Scaffold a new project using [degit](https://github.com/Rich-Harris/degit):
+
+```sh
+npx degit ibm/carbon-components-svelte#webpack svelte-app
+cd svelte-app
+yarn install
+```
+
+## Available scripts
+
+### `yarn dev`
+
+Starts the app in development mode.
+
+### `yarn build`
+
+Builds the app for production.
--- a/examples/webpack/package.json
+++ b/examples/webpack/package.json
@ -0,0 +1,22 @@
+{
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "webpack-dev-server",
+    "build": "NODE_ENV=production webpack"
+  },
+  "devDependencies": {
+    "carbon-components-svelte": "^0.11.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^6.1.0",
+    "css-loader": "^4.2.2",
+    "html-webpack-plugin": "^4.4.1",
+    "mini-css-extract-plugin": "~0.9.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.4",
+    "svelte": "^3.24.1",
+    "svelte-loader": "^2.13.6",
+    "webpack": "^4.44.1",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0"
+  }
+}
--- a/examples/webpack/public/favicon.ico
+++ b/examples/webpack/public/favicon.ico
--- a/examples/webpack/public/index.html
+++ b/examples/webpack/public/index.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <title>webpack</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+  </body>
+</html>
--- a/examples/webpack/src/App.svelte
+++ b/examples/webpack/src/App.svelte
@ -0,0 +1,92 @@
+<script>
+  import {
+    Content,
+    Breadcrumb,
+    BreadcrumbItem,
+    Grid,
+    Row,
+    Column,
+    Tabs,
+    TabContent,
+    Tab,
+    Select,
+    SelectItem,
+  } from "carbon-components-svelte";
+  import Header from "./components/Header.svelte";
+  import Theme from "./components/Theme.svelte";
+
+  let theme = "g10";
+</script>
+
+<Theme persist bind:theme>
+  <Header />
+  <Content style="background: none; padding: 1rem">
+    <Grid>
+      <Row>
+        <Column lg="{16}">
+          <Breadcrumb noTrailingSlash aria-label="Page navigation">
+            <BreadcrumbItem href="/">Getting started</BreadcrumbItem>
+          </Breadcrumb>
+          <h1 style="margin-bottom: 1.5rem">Design &amp; build with Carbon</h1>
+        </Column>
+      </Row>
+
+      <Row>
+        <Column noGutter>
+          <Tabs aria-label="Tab navigation">
+            <Tab label="About" />
+            <Tab label="Design" />
+            <Tab label="Develop" />
+            <div slot="content" class="tabbed-content">
+              <Grid as fullWidth let:props>
+                <TabContent {...props}>
+                  <Row>
+                    <Column md="{4}" lg="{7}">
+                      <Select
+                        labelText="Carbon theme"
+                        bind:selected="{theme}"
+                        style="margin-bottom: 1rem">
+                        <SelectItem value="white" text="White" />
+                        <SelectItem value="g10" text="Gray 10" />
+                        <SelectItem value="g90" text="Gray 90" />
+                        <SelectItem value="g100" text="Gray 100" />
+                      </Select>
+                      <p>
+                        Carbon is IBM’s open-source design system for digital
+                        products and experiences. With the IBM Design Language
+                        as its foundation, the system consists of working code,
+                        design tools and resources, human interface guidelines,
+                        and a vibrant community of contributors.
+                      </p>
+                    </Column>
+                  </Row>
+                </TabContent>
+                <TabContent {...props}>
+                  <Row>
+                    <Column md="{4}" lg="{7}">
+                      <p>
+                        Rapidly build beautiful and accessible experiences. The
+                        Carbon kit contains all resources you need to get
+                        started.
+                      </p>
+                    </Column>
+                  </Row>
+                </TabContent>
+                <TabContent {...props}>
+                  <Row>
+                    <Column md="{4}" lg="{7}">
+                      <p>
+                        Carbon provides styles and components in Vanilla, React,
+                        Angular, Vue and Svelte for anyone building on the web.
+                      </p>
+                    </Column>
+                  </Row>
+                </TabContent>
+              </Grid>
+            </div>
+          </Tabs>
+        </Column>
+      </Row>
+    </Grid>
+  </Content>
+</Theme>
--- a/examples/webpack/src/components/Header.svelte
+++ b/examples/webpack/src/components/Header.svelte
@ -0,0 +1,35 @@
+<script>
+  import {
+    SkipToContent,
+    Header,
+    HeaderUtilities,
+    HeaderGlobalAction,
+  } from "carbon-components-svelte";
+  import Notification20 from "carbon-icons-svelte/lib/Notification20";
+  import UserAvatar20 from "carbon-icons-svelte/lib/UserAvatar20";
+  import AppSwitcher20 from "carbon-icons-svelte/lib/AppSwitcher20";
+  import { getContext } from "svelte";
+
+  const ctx = getContext("Theme");
+
+  $: if (ctx) {
+    ctx.dark.subscribe((value) => {
+      console.log("dark mode?", value);
+    });
+    ctx.light.subscribe((value) => {
+      console.log("light mode?", value);
+    });
+    ctx.updateVar("--cds-productive-heading-06-font-size", "4rem");
+  }
+</script>
+
+<Header company="IBM" platformName="Carbon Components Svelte" href="/">
+  <div slot="skip-to-content">
+    <SkipToContent />
+  </div>
+  <HeaderUtilities>
+    <HeaderGlobalAction aria-label="Notifications" icon="{Notification20}" />
+    <HeaderGlobalAction aria-label="User Avatar" icon="{UserAvatar20}" />
+    <HeaderGlobalAction aria-label="App Switcher" icon="{AppSwitcher20}" />
+  </HeaderUtilities>
+</Header>
--- a/examples/webpack/src/components/Theme.svelte
+++ b/examples/webpack/src/components/Theme.svelte
@ -0,0 +1,55 @@
+<script>
+  export let persist = false;
+  export let persistKey = "theme";
+  export let theme = "white";
+  export const themes = ["white", "g10", "g90", "g100"];
+
+  import { onMount, afterUpdate, setContext } from "svelte";
+  import { writable, derived } from "svelte/store";
+
+  const isValidTheme = (value) => themes.includes(value);
+  const isDark = (value) =>
+    isValidTheme(value) && (value === "g90" || value === "g100");
+
+  const dark = writable(isDark(theme));
+  const light = derived(dark, (_) => !_);
+
+  setContext("Theme", {
+    updateVar: (name, value) => {
+      document.documentElement.style.setProperty(name, value);
+    },
+    dark,
+    light,
+  });
+
+  onMount(() => {
+    try {
+      const persisted_theme = localStorage.getItem(persistKey);
+
+      if (isValidTheme(persisted_theme)) {
+        theme = persisted_theme;
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  });
+
+  afterUpdate(() => {
+    if (isValidTheme(theme)) {
+      document.documentElement.setAttribute("theme", theme);
+      if (persist) {
+        localStorage.setItem(persistKey, theme);
+      }
+    } else {
+      console.warn(
+        `"${theme}" is not a valid Carbon theme. Choose from available themes: ${JSON.stringify(
+          themes
+        )}`
+      );
+    }
+  });
+
+  $: dark.set(isDark(theme));
+</script>
+
+<slot />
--- a/examples/webpack/src/index.js
+++ b/examples/webpack/src/index.js
@ -0,0 +1,6 @@
+import "carbon-components-svelte/css/all.css";
+import App from "./App.svelte";
+
+const app = new App({ target: document.body });
+
+export default app;
--- a/examples/webpack/webpack.config.js
+++ b/examples/webpack/webpack.config.js
@ -0,0 +1,52 @@
+const webpack = require("webpack");
+const path = require("path");
+const CopyPlugin = require("copy-webpack-plugin");
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+const NODE_ENV = process.env.NODE_ENV || "development";
+const PROD = NODE_ENV === "production";
+
+module.exports = {
+  stats: "errors-only",
+  mode: NODE_ENV,
+  devtool: PROD ? false : "cheap-eval-source-map",
+  devServer: { historyApiFallback: true },
+  entry: { bundle: ["./src/index.js"] },
+  resolve: {
+    alias: { svelte: path.resolve("node_modules", "svelte") },
+    extensions: [".mjs", ".js", ".svelte"],
+    mainFields: ["svelte", "browser", "module", "main"],
+  },
+  output: { path: `${__dirname}/build`, filename: "[name].[chunkhash].js" },
+  module: {
+    rules: [
+      {
+        test: /\.(svelte)$/,
+        use: {
+          loader: "svelte-loader",
+          options: { emitCss: true, hotReload: true },
+        },
+      },
+      {
+        test: /\.css$/,
+        sideEffects: true,
+        use: [
+          { loader: MiniCssExtractPlugin.loader, options: { hmr: !PROD } },
+          "css-loader",
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new CleanWebpackPlugin(),
+    new CopyPlugin({ patterns: [{ from: "public" }] }),
+    new MiniCssExtractPlugin({
+      filename: PROD ? "[name].[chunkhash].css" : "[name].css",
+    }),
+    new OptimizeCssAssetsPlugin({}),
+    new HtmlWebpackPlugin({ template: "public/index.html" }),
+  ],
+};
--- a/examples/webpack/yarn.lock
+++ b/examples/webpack/yarn.lock
--- a/package.json
+++ b/package.json
@ -11,7 +11,7 @@
    "start": "start-storybook -p 9090",
    "build": "build-storybook",
    "prettier": "prettier --write './**/*.svelte'",
-    "prepack": "rollup -c"
+    "prepack": "node scripts/build-css && rollup -c"
  },
  "sideEffects": false,
  "dependencies": {
@ -21,6 +21,7 @@
  "devDependencies": {
    "@babel/core": "^7.10.5",
    "@babel/preset-env": "^7.10.4",
+    "@carbon/themes": "^10.18.0",
    "@rollup/plugin-commonjs": "^15.0.0",
    "@rollup/plugin-node-resolve": "^9.0.0",
    "@storybook/addon-knobs": "^5.3.19",
@ -28,8 +29,14 @@
    "@storybook/cli": "^5.3.19",
    "@storybook/svelte": "^5.3.19",
    "@tsconfig/svelte": "^1.0.10",
+    "autoprefixer": "^9.8.6",
    "babel-loader": "^8.0.6",
+    "carbon-components-10.18": "npm:carbon-components@10.18",
+    "carbon-components-10.19": "npm:carbon-components@10.19",
    "comment-parser": "^0.7.5",
+    "gh-pages": "^3.1.0",
+    "node-sass": "^4.14.1",
+    "postcss": "^7.0.32",
    "prettier": "^2.1.1",
    "prettier-plugin-svelte": "^1.2.1",
    "rollup": "^2.26.10",
@ -60,7 +67,8 @@
  "files": [
    "lib",
    "src",
-    "types"
+    "types",
+    "css"
  ],
  "contributors": [
    {
--- a/scripts/build-css.js
+++ b/scripts/build-css.js
@ -0,0 +1,150 @@
+const fs = require("fs");
+const sass = require("node-sass");
+const autoprefixer = require("autoprefixer");
+const postcss = require("postcss");
+const path = require("path");
+const { promisify } = require("util");
+
+const writeFile = promisify(fs.writeFile);
+const sassRender = promisify(sass.render);
+
+const shared = {
+  globals: `
+    $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 "node_modules/carbon-components-10.19/scss/globals/scss/_css--reset.scss";
+    @import "node_modules/carbon-components-10.19/scss/globals/scss/_css--font-face.scss";
+    @import "node_modules/carbon-components-10.19/scss/globals/scss/_css--helpers.scss";
+    @import "node_modules/carbon-components-10.19/scss/globals/scss/_css--body.scss";
+    @import "node_modules/carbon-components-10.19/scss/globals/grid/_grid.scss";
+  `,
+  components: `
+    @import "node_modules/carbon-components-10.19/scss/components/accordion/accordion";
+    @import "node_modules/carbon-components-10.19/scss/components/breadcrumb/breadcrumb";
+    @import "node_modules/carbon-components-10.19/scss/components/button/button";
+    @import "node_modules/carbon-components-10.19/scss/components/checkbox/checkbox";
+    @import "node_modules/carbon-components-10.19/scss/components/code-snippet/code-snippet";
+    @import "node_modules/carbon-components-10.19/scss/components/combo-box/combo-box";
+    @import "node_modules/carbon-components-10.19/scss/components/content-switcher/content-switcher";
+    @import "node_modules/carbon-components-10.19/scss/components/copy-button/copy-button";
+    @import "node_modules/carbon-components-10.19/scss/components/data-table/data-table";
+    @import "node_modules/carbon-components-10.19/scss/components/date-picker/date-picker";
+    @import "node_modules/carbon-components-10.19/scss/components/dropdown/dropdown";
+    @import "node_modules/carbon-components-10.19/scss/components/file-uploader/file-uploader";
+    @import "node_modules/carbon-components-10.19/scss/components/form/form";
+    @import "node_modules/carbon-components-10.19/scss/components/inline-loading/inline-loading";
+    @import "node_modules/carbon-components-10.19/scss/components/link/link";
+    @import "node_modules/carbon-components-10.19/scss/components/list/list";
+    @import "node_modules/carbon-components-10.19/scss/components/list-box/list-box";
+    @import "node_modules/carbon-components-10.19/scss/components/loading/loading";
+    @import "node_modules/carbon-components-10.19/scss/components/modal/modal";
+    @import "node_modules/carbon-components-10.19/scss/components/multi-select/multi-select";
+    @import "node_modules/carbon-components-10.19/scss/components/notification/inline-notification";
+    @import "node_modules/carbon-components-10.19/scss/components/notification/toast-notification";
+    @import "node_modules/carbon-components-10.19/scss/components/number-input/number-input";
+    @import "node_modules/carbon-components-10.19/scss/components/overflow-menu/overflow-menu";
+    @import "node_modules/carbon-components-10.19/scss/components/pagination/pagination";
+    @import "node_modules/carbon-components-10.19/scss/components/pagination-nav/pagination-nav";
+    @import "node_modules/carbon-components-10.19/scss/components/progress-indicator/progress-indicator";
+    @import "node_modules/carbon-components-10.19/scss/components/radio-button/radio-button";
+    @import "node_modules/carbon-components-10.19/scss/components/search/search";
+    @import "node_modules/carbon-components-10.19/scss/components/select/select";
+    @import "node_modules/carbon-components-10.19/scss/components/skeleton/skeleton";
+    @import "node_modules/carbon-components-10.19/scss/components/slider/slider";
+    @import "node_modules/carbon-components-10.19/scss/components/structured-list/structured-list";
+    @import "node_modules/carbon-components-10.19/scss/components/tag/tag";
+    @import "node_modules/carbon-components-10.19/scss/components/text-area/text-area";
+    @import "node_modules/carbon-components-10.19/scss/components/text-input/text-input";
+    @import "node_modules/carbon-components-10.19/scss/components/tile/tile";
+    @import "node_modules/carbon-components-10.19/scss/components/time-picker/time-picker";
+    @import "node_modules/carbon-components-10.19/scss/components/toggle/toggle";
+    @import "node_modules/carbon-components-10.19/scss/components/toolbar/toolbar";
+    @import "node_modules/carbon-components-10.19/scss/components/tooltip/tooltip";
+    @import "node_modules/carbon-components-10.19/scss/components/ui-shell/ui-shell";
+
+    @import "node_modules/carbon-components-10.18/scss/components/tabs/tabs";
+  `,
+};
+
+const themes = {
+  white: `
+    $carbon--theme: $carbon--theme--white;
+    @include carbon--theme();
+  `,
+  g10: `
+    $carbon--theme: $carbon--theme--g10;
+    @include carbon--theme();
+  `,
+  g90: `
+    $carbon--theme: $carbon--theme--g90;
+    @include carbon--theme();
+  `,
+  g100: `
+    $carbon--theme: $carbon--theme--g100;
+    @include carbon--theme();
+  `,
+  all: `
+    :root[theme="white"] {
+      @include carbon--theme($carbon--theme--white, true);
+    }
+    
+    :root {
+      @include carbon--theme($carbon--theme--g10, true);
+    }
+    
+    :root[theme="g90"] {
+      @include carbon--theme($carbon--theme--g90, true);
+    }
+    
+    :root[theme="g100"] {
+      @include carbon--theme($carbon--theme--g100, true);
+    }
+  `,
+};
+
+/**
+ * Generate pre-compiled CSS for each Carbon theme.
+ */
+async function buildCss() {
+  fs.rmdirSync(path.resolve("css"), { recursive: true });
+  fs.mkdirSync(path.resolve("css"));
+
+  Object.keys(themes).forEach(async (theme) => {
+    try {
+      const outFile = path.resolve("css", theme + ".css");
+      const { css } = await sassRender({
+        data: `
+          $feature-flags: (
+            enable-css-custom-properties: ${theme === "all"},
+            grid-columns-16: true,
+          );
+          @import "node_modules/@carbon/themes/scss/themes";
+          ${themes[theme]}
+          ${shared.globals}
+          ${shared.components}
+        `,
+        outFile,
+        outputStyle: "compact",
+        omitSourceMapUrl: true,
+      });
+
+      const prefixed = await postcss([
+        autoprefixer({
+          overrideBrowserslist: ["last 1 version", "ie >= 11", "Firefox ESR"],
+        }),
+      ]).process(css, { from: undefined });
+
+      await writeFile(outFile, prefixed.css);
+    } catch (e) {
+      console.log(e);
+    }
+  });
+}
+
+buildCss();
--- a/scripts/publish-examples.js
+++ b/scripts/publish-examples.js
@ -0,0 +1,31 @@
+const ghpages = require("gh-pages");
+const fs = require("fs");
+const path = require("path");
+const { promisify } = require("util");
+
+const ghPublish = promisify(ghpages.publish);
+
+async function publishExample(name) {
+  ghpages.clean();
+
+  try {
+    const folder_path = path.join("examples", name);
+    await ghPublish(folder_path, {
+      branch: name,
+      dotfiles: true,
+      history: false,
+    });
+    console.log("Published example:", name);
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+(async () => {
+  await publishExample("rollup");
+  await publishExample("rollup-typescript");
+  await publishExample("routify");
+  await publishExample("sapper");
+  await publishExample("svite");
+  await publishExample("webpack");
+})();
--- a/yarn.lock
+++ b/yarn.lock
				`@ -0,0 +1 @@`
				`module.exports = { preprocess: [require("svelte-preprocess")()] };`