Merge branch 'master' into patch-1

.github/workflows/ci.yml

@@ -0,0 +1,14 @@
+name: CI
+on: [push, pull_request]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install dependencies and build the library
+        run: |
+          yarn
+          yarn build:api
+          yarn build:lib
+      - name: Run unit tests and validate TypeScript definitions
+        run: yarn test

.travis.yml

@@ -1,6 +0,0 @@
-language: node_js
-node_js: 12
-cache: yarn
-script:
-  - yarn prepack
-  - yarn test

CODEOWNERS

@@ -1,2 +0,0 @@
-* @metonym
-* @josefaidt

CONTRIBUTING.md

@@ -1,6 +1,6 @@
 # Contributing
 
-Before submitting a pull request (PR), consider [filing an issue](https://github.com/IBM/carbon-components-svelte/issues) to gain clarity and direction.
+Before submitting a pull request (PR), consider [filing an issue](https://github.com/carbon-design-system/carbon-components-svelte/issues) to gain clarity and direction.
 
 ## Prerequisites
 
@@ -105,7 +105,7 @@ export let size = "default";
 
 ### Creating a component
 
-First, [submit an issue](https://github.com/IBM/carbon-components-svelte/issues).
+First, [submit an issue](https://github.com/carbon-design-system/carbon-components-svelte/issues).
 
 If creating a new component, don't forget it from `src/index.js`:
 

MAINTAINERS.md

@@ -1,5 +1 @@
 # Maintainers
-
-[Eric Liu](https://github.com/metonym) - eric.young.liu@ibm.com
-
-[Josef Aidt](https://github.com/josefaidt) - josef.aidt@gmail.com

README.md

@@ -3,7 +3,6 @@
 [![NPM][npm]][npm-url]
 ![GitHub](https://img.shields.io/github/license/ibm/carbon-components-svelte?color=262626&style=for-the-badge)
 ![npm downloads to date](https://img.shields.io/npm/dt/carbon-components-svelte?color=262626&style=for-the-badge)
-[![Build][build]][build-badge]
 
 Carbon Components Svelte is a [Svelte](https://github.com/sveltejs/svelte) component library that implements the [Carbon Design System](https://github.com/carbon-design-system), an open source design system by IBM.
 
@@ -11,64 +10,160 @@ Design systems facilitate design and development through reuse, consistency, and
 
 The Carbon Svelte portfolio also includes:
 
-- **[Carbon Icons Svelte](https://github.com/IBM/carbon-icons-svelte)**: 6000+ Carbon icons as Svelte components
+- **[Carbon Icons Svelte](https://github.com/carbon-design-system/carbon-icons-svelte)**: 7000+ Carbon icons as Svelte components
-- **[Carbon Pictograms Svelte](https://github.com/IBM/carbon-pictograms-svelte)**: 700+ Carbon pictograms as Svelte components
+- **[Carbon Pictograms Svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)**: 700+ Carbon pictograms as Svelte components
-- **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 16 chart types, powered by d3
+- **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 20+ charts, powered by d3
+- **[Carbon Preprocess Svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte)**: Collection of Svelte preprocessors for Carbon
 
-## [Documentation](http://ibm.biz/carbon-svelte)
+## [Documentation](https://carbon-components-svelte.onrender.com)
 
-<a href="https://www.vercel.com?utm_source=carbon-components-svelte&utm_campaign=oss" target="_blank"><img height="34px" src="./docs/public/powered-by-vercel.svg" alt="Deploys by Vercel" /></a>
+The documentation site is deployed to [Render](https://render.com) as a Static Site. See [render.yaml](render.yaml) for details.
 
-The [documentation website](http://ibm.biz/carbon-svelte) contains live demos and examples.
+[![Deploy to Render](https://render.com/images/deploy-to-render-button.svg)](https://render.com/deploy?repo=https://github.com/carbon-design-system/carbon-components-svelte)
 
 Other forms of documentation are auto-generated:
 
 - **[TypeScript definitions](types)**: Component TypeScript definitions
-- **[Component Index](COMPONENT_INDEX.md)**: Markdown file documenting component props, slots, and events
+- **[Component Index](COMPONENT_INDEX.md)**: Component API in Markdown format
-- **[Component API](docs/src/COMPONENT_API.json)**: Component API metadata in JSON format
+- **[Component API](docs/src/COMPONENT_API.json)**: Component API in JSON format
 
-## Getting started
+## Installation
 
 Install `carbon-components-svelte` as a development dependency.
 
+**Yarn**
+
 ```sh
 yarn add -D carbon-components-svelte
-# OR
+```
+
+**NPM**
+
+```sh
 npm i -D carbon-components-svelte
-# OR
+```
+
+**pnpm**
+
+```sh
 pnpm i -D carbon-components-svelte
 ```
 
 ## Usage
 
-The quickest way to get started is to customize a template from the [examples](examples/) folder.
+### Styling
 
-Example set-ups demonstrate usage with popular application bundlers and frameworks. They include a mix of client-side rendering (CSR) and server-side rendering (SSR) approaches.
+Before importing components, you will need to first apply Carbon component styles. The Carbon Design System supports five themes (2 light, 3 dark).
 
-- **[examples/rollup](examples/rollup/)**: SPA bundled using [Rollup](https://github.com/rollup/rollup)
+- **white.css**: Default Carbon theme (light)
-- **[examples/rollup-typescript](examples/rollup-typescript/)**: SPA bundled using [Rollup](https://github.com/rollup/rollup) with TypeScript support
+- **g10.css**: Gray 10 theme (light)
-- **[examples/routify](examples/routify/)**: SPA + static export using [Routify](https://github.com/roxiness/routify)
+- **g80.css**: Gray 80 theme (dark)
-- **[examples/sapper](examples/sapper/)**: SSR + static export using [Sapper](https://github.com/sveltejs/sapper)
+- **g90.css**: Gray 90 theme (dark)
-- **[examples/svite](examples/svite/)**: SPA developed with Svite, bundled with [Rollup](https://github.com/rollup/rollup)
+- **g100.css**: Gray 100 theme (dark)
-- **[examples/webpack](examples/webpack/)**: SPA bundled with [webpack](https://github.com/webpack/webpack)
+- **all.css**: All themes (White, Gray 10, Gray 90, Gray 100) using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
 
-### Scaffolding
+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.
 
-Each example is published in a dedicated branch of the same name.
+The compiled CSS is generated from the following `.scss` files:
 
-Use [degit](https://github.com/Rich-Harris/degit) to scaffold a new project:
+- [css/white.scss](css/white.scss)
+- [css/g10.scss](css/g10.scss)
+- [css/g80.scss](css/g80.scss)
+- [css/g90.scss](css/g90.scss)
+- [css/g100.scss](css/g100.scss)
+- [css/all.scss](css/all.scss)
 
-For example, to use the `svite` template, run the following commands:
+#### CSS StyleSheet
 
-```sh
+```js
-npx degit ibm/carbon-components-svelte#svite svelte-app
+// White theme
-cd svelte-app
+import "carbon-components-svelte/css/white.css";
-yarn install
+
+// Gray 10 theme
+import "carbon-components-svelte/css/g10.css";
+
+// Gray 80 theme
+import "carbon-components-svelte/css/g80.css";
+
+// Gray 90 theme
+import "carbon-components-svelte/css/g90.css";
+
+// Gray 100 theme
+import "carbon-components-svelte/css/g100.css";
+
+// All themes
+import "carbon-components-svelte/css/all.css";
+```
+
+#### CDN
+
+An alternative to loading styles is to link an external StyleSheet from a Content Delivery Network (CDN) like [unpkg.com](https://unpkg.com/).
+
+This is best suited for rapid prototyping.
+
+##### HTML
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/carbon-components-svelte/css/white.css"
+    />
+  </head>
+</html>
+```
+
+##### `svelte:head`
+
+```html
+<svelte:head>
+  <link
+    rel="stylesheet"
+    href="https://unpkg.com/carbon-components-svelte/css/white.css"
+  />
+</svelte:head>
+```
+
+### SCSS
+
+The most performant method to load styles is to import SCSS directly from carbon-components. Although it requires more set up, you can reduce the size of the bundle CSS by importing individual component styles instead of a pre-compiled CSS StyleSheet.
+
+Refer to the [official Carbon guide on SASS](https://github.com/carbon-design-system/carbon/blob/main/docs/guides/sass.md) for documentation.
+
+### Dynamic theming
+
+Use the "all.css" StyleSheet for dynamic, client-side theming.
+
+```js
+import "carbon-components-svelte/css/all.css";
+```
+
+Update the theme by setting the `theme` attribute on the `html` element. The default `theme` is `"white"`.
+
+```html
+<!DOCTYPE html>
+<html lang="en" theme="g10">
+  <body>
+    ...
+  </body>
+</html>
+```
+
+Programmatically switch between each of the five Carbon themes by setting the "theme" attribute on the HTML element.
+
+```html
+<script>
+  let theme = "white"; // "white" | "g10" | "g80" | "g90" | "g100"
+
+  $: document.documentElement.setAttribute("theme", theme);
+</script>
 ```
 
 ### Importing components
 
-Import components from `carbon-components-svelte` in the `script` tag of your Svelte file.
+Import components from `carbon-components-svelte` in the `script` tag of your Svelte file. Visit the [documentation site](https://carbon-components-svelte.onrender.com) for examples.
 
 ```html
 <!-- App.svelte -->
@@ -85,163 +180,66 @@ Import components from `carbon-components-svelte` in the `script` tag of your Sv
 
 **Refer to [COMPONENT_INDEX.md](COMPONENT_INDEX.md) for component API documentation.**
 
-### Pre-compiled CSS StyleSheets
+## Preprocessors
 
-`carbon-components-svelte` includes pre-compiled CSS StyleSheets for each Carbon theme:
+[carbon-preprocess-svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte) is a collection of Svelte preprocessors for Carbon.
 
-- **white.css**: Default Carbon theme (light)
+**Yarn**
-- **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](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
 
-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.
+```sh
+yarn add -D carbon-preprocess-svelte
+```
 
-The compiled CSS is generated from the following `.scss` files:
+**NPM**
 
-- [css/white.scss](css/white.scss)
+```sh
-- [css/g10.scss](css/g10.scss)
+npm i -D carbon-preprocess-svelte
-- [css/g90.scss](css/g90.scss)
+```
-- [css/g100.scss](css/g100.scss)
+
-- [css/all.scss](css/all.scss)
+### `optimizeImports`
+
+`optimizeImports` is a script preprocessor that rewrites base imports from Carbon components/icons/pictograms packages to their source Svelte code paths. This can greatly speed up compile times during development while preserving typeahead and autocompletion hinting offered by integrated development environments (IDE) like VSCode.
+
+The preprocessor optimizes imports from the following packages:
+
+- [carbon-components-svelte](https://github.com/carbon-design-system/carbon-components-svelte)
+- [carbon-icons-svelte](https://github.com/carbon-design-system/carbon-icons-svelte)
+- [carbon-pictograms-svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)
+
+**Example**
+
+```diff
+- import { Button } from "carbon-components-svelte";
+- import { Add16 } from "carbon-icons-svelte";
+- import { Airplane } from "carbon-pictograms-svelte";
++ import Button from "carbon-components-svelte/Button/Button.svelte";
++ import Add16 from "carbon-icons-svelte/lib/Add16/Add16.svelte";
++ import Airplane from "carbon-pictograms-svelte/lib/Airplane/Airplane.svelte";
+```
 
 #### 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 lang="scss" 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).
-
-#### Dynamic theming
-
-Use `carbon-components-svelte/css/all.css` for dynamic, client-side styling.
-
-Update the theme by setting the `theme` attribute on the `html` element. The default `theme` is `"white"`.
-
-```html
-<!DOCTYPE html>
-<html lang="en" theme="g10">
-  <body>
-    ...
-  </body>
-</html>
-```
-
-Using JavaScript:
-
-```svelte
-<script>
-  /** @type {"white" | "g10" | "g90" | "g100"} */
-  let theme = "white";
-
-  $: document.documentElement.setAttribute("theme", theme);
-</script>
-
-<button on:click="{() => (theme = 'g90')}">Update theme</button>
-```
-
-## Preprocessors
-
-### optimizeCarbonImports
-
-`optimizeCarbonImports` is a Svelte preprocessor that optimizes base imports inside the `script` block of a Svelte file from the following libraries:
-
-- carbon-components-svelte
-- carbon-icons-svelte
-- carbon-pictograms-svelte
-
-The preprocessor rewrites base imports to directly import the source Svelte file. This may lead to faster complile times **during development**.
-
-Example:
-
-**Before**
-
-```js
-import { Button, Header } from "carbon-components-svelte";
-import { Notification20 } from "carbon-icons-svelte";
-import { Airplane } from "carbon-pictograms-svelte";
-```
-
-**After**
-
-```js
-import Button from "carbon-components-svelte/Button/Button.svelte";
-import Header from "carbon-components-svelte/UIShell/GlobalHeader/Header.svelte";
-import Notification20 from "carbon-icons-svelte/lib/Notification20/Notification20.svelte";
-import Airplane from "carbon-pictograms-svelte/lib/Airplane/Airplane.svelte";
-```
-
-#### svelte.config.js
-
 ```js
 // svelte.config.js
-const {
+import { optimizeImports } from "carbon-preprocess-svelte";
-  optimizeCarbonImports,
-} = require("carbon-components-svelte/preprocess");
 
-module.exports = {
+export default {
-  preprocess: [optimizeCarbonImports()],
+  preprocess: [optimizeImports()],
 };
 ```
 
-#### svelte-loader
+## Examples
 
-```js
+- [examples/rollup](examples/rollup/)
-// webpack.config.js
+- [examples/sapper](examples/sapper/)
-const {
+- [examples/snowpack](examples/snowpack/)
-  optimizeCarbonImports,
+- [examples/sveltekit](examples/sveltekit/)
-} = require("carbon-components-svelte/preprocess");
+- [examples/vite](examples/vite/)
-
+- [examples/webpack](examples/webpack/)
-module.exports = {
-  // ...
-  module: {
-    rules: [
-      {
-        test: /\.svelte$/,
-        use: {
-          loader: "svelte-loader",
-          options: {
-            hotReload: true,
-            preprocess: [optimizeCarbonImports()],
-          },
-        },
-      },
-    ],
-  },
-};
-```
 
 ## TypeScript support
 
-[TypeScript definitions](types) are generated by [sveld](https://github.com/IBM/sveld).
+[TypeScript definitions](types) are generated by [sveld](https://github.com/carbon-design-system/sveld).
 
 ## Contributing
 
@@ -255,5 +253,3 @@ Refer to the [Contributing guidelines](CONTRIBUTING.md).
 
 [npm]: https://img.shields.io/npm/v/carbon-components-svelte.svg?color=262626&style=for-the-badge
 [npm-url]: https://npmjs.com/package/carbon-components-svelte
-[build]: https://img.shields.io/travis/com/ibm/carbon-components-svelte?color=24a148&style=for-the-badge
-[build-badge]: https://travis-ci.com/ibm/carbon-components-svelte

css/all.scss

@@ -40,6 +40,15 @@ $css--plex: true;
   }
 }
 
+// Set the <html> theme attribute to "g80" to use the Gray 80 theme
+// <html theme="g80">
+:root[theme="g80"] {
+  @include carbon--theme($carbon--theme--g80, true) {
+    @include emit-component-tokens($tag-colors);
+    @include emit-component-tokens($notification-colors);
+  }
+}
+
 // Set the <html> theme attribute to "g90" to use the Gray 90 theme
 // <html theme="g90">
 :root[theme="g90"] {
@@ -68,4 +77,4 @@ $css--plex: true;
 @import "carbon-components/scss/globals/grid/grid";
 
 // Import all component styles
-@import "carbon-components/scss/globals/scss/styles";
+@import "carbon-components/scss/globals/scss/styles";

css/g80.scss

@@ -0,0 +1,32 @@
+$feature-flags: (
+  ui-shell: true,
+  grid-columns-16: true
+);
+
+$css--font-face: true;
+$css--helpers: true;
+$css--body: true;
+$css--use-layer: true;
+$css--reset: true;
+$css--default-type: true;
+$css--plex: true;
+
+// Use the "g80" (Gray 80) Carbon theme
+@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
+@import "carbon-components/scss/globals/scss/component-tokens";
+@import "carbon-components/src/components/tag/tag";
+@import "carbon-components/src/components/notification/inline-notification";
+@import "carbon-components/src/components/notification/toast-notification";
+
+$carbon--theme: $carbon--theme--g80;
+@include carbon--theme();
+
+@import "carbon-components/scss/globals/scss/_css--reset";
+@import "carbon-components/scss/globals/scss/_css--font-face";
+@import "carbon-components/scss/globals/scss/_css--helpers";
+@import "carbon-components/scss/globals/scss/_css--body";
+@import "carbon-components/scss/globals/grid/grid";
+
+// Import all component styles
+@import "carbon-components/scss/globals/scss/styles";
+

docs/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" theme="white">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="/favicon.ico" />

docs/package.json

@@ -11,8 +11,9 @@
   "devDependencies": {
     "@sveltech/routify": "^1.9.9",
     "autoprefixer": "^10.2.3",
-    "carbon-components": "10.32.1",
+    "carbon-components": "10.44.0",
     "carbon-components-svelte": "../",
+    "clipboard-copy": "^4.0.1",
     "mdsvex": "^0.8.8",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.2.4",
@@ -21,7 +22,7 @@
     "prism-svelte": "^0.4.7",
     "prismjs": "^1.21.0",
     "remark-slug": "^6.0.0",
-    "sass": "^1.32.5",
+    "sass": "^1.42.1",
     "svelte": "3.29.0",
     "svelte-hmr": "0.11.1",
     "svelte-preprocess": "^4.3.2",

docs/public/powered-by-vercel.svg

@@ -1 +0,0 @@
-<svg width="212" height="44" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="212" height="44" rx="8" fill="#000"/><path d="M60.438 15.227V26.5h1.406v-4.023h2.836c2.117 0 3.625-1.493 3.625-3.602 0-2.148-1.477-3.648-3.61-3.648h-4.257zm1.406 1.25h2.484c1.633 0 2.531.851 2.531 2.398 0 1.492-.93 2.352-2.53 2.352h-2.485v-4.75zm11.5 10.171c2.399 0 3.883-1.656 3.883-4.359 0-2.71-1.484-4.36-3.883-4.36-2.398 0-3.883 1.65-3.883 4.36 0 2.703 1.485 4.36 3.883 4.36zm0-1.21c-1.594 0-2.492-1.157-2.492-3.149 0-2 .898-3.148 2.492-3.148 1.594 0 2.492 1.148 2.492 3.148 0 1.992-.898 3.148-2.492 3.148zm15.954-7.36h-1.352l-1.656 6.735h-.125l-1.883-6.735h-1.29l-1.882 6.735h-.125l-1.656-6.735h-1.36l2.36 8.422h1.36l1.874-6.516h.125l1.883 6.516h1.367l2.36-8.422zm4.523 1.04c1.336 0 2.227.984 2.258 2.476h-4.64c.101-1.492 1.039-2.477 2.382-2.477zm2.219 5.202c-.352.742-1.086 1.14-2.172 1.14-1.43 0-2.36-1.054-2.43-2.718v-.062h6.055v-.516c0-2.617-1.383-4.234-3.656-4.234-2.313 0-3.797 1.718-3.797 4.367 0 2.664 1.46 4.351 3.797 4.351 1.844 0 3.156-.89 3.547-2.328H96.04zm3.242 2.18h1.344v-5.219c0-1.187.93-2.047 2.211-2.047.266 0 .75.047.86.078V17.97a5.77 5.77 0 00-.672-.04c-1.117 0-2.086.579-2.336 1.4h-.125v-1.25h-1.281V26.5zm8.899-7.383c1.336 0 2.227.985 2.258 2.477h-4.641c.102-1.492 1.04-2.477 2.383-2.477zm2.219 5.203c-.352.742-1.086 1.14-2.172 1.14-1.43 0-2.359-1.054-2.43-2.718v-.062h6.055v-.516c0-2.617-1.383-4.234-3.656-4.234-2.313 0-3.797 1.718-3.797 4.367 0 2.664 1.461 4.351 3.797 4.351 1.844 0 3.156-.89 3.547-2.328H110.4zm6.36 2.328c1.164 0 2.164-.554 2.695-1.492h.125V26.5h1.281V14.734h-1.343v4.672h-.118c-.476-.922-1.468-1.476-2.64-1.476-2.141 0-3.539 1.718-3.539 4.36 0 2.648 1.382 4.358 3.539 4.358zm.312-7.507c1.524 0 2.477 1.218 2.477 3.148 0 1.945-.946 3.148-2.477 3.148-1.539 0-2.461-1.18-2.461-3.148 0-1.96.93-3.148 2.461-3.148zm14.462 7.507c2.133 0 3.531-1.726 3.531-4.359 0-2.648-1.391-4.36-3.531-4.36-1.156 0-2.18.571-2.641 1.477h-.125v-4.672h-1.344V26.5h1.282v-1.344h.125c.531.938 1.531 1.492 2.703 1.492zm-.313-7.507c1.539 0 2.453 1.18 2.453 3.148 0 1.969-.914 3.148-2.453 3.148-1.531 0-2.484-1.203-2.484-3.148s.953-3.148 2.484-3.148zm6.04 10.406c1.492 0 2.164-.578 2.882-2.531l3.29-8.938h-1.43l-2.305 6.93h-.125l-2.312-6.93h-1.453l3.117 8.43-.157.5c-.351 1.015-.773 1.383-1.546 1.383-.188 0-.399-.008-.563-.04V29.5c.188.031.422.047.602.047zm17.391-3.047l3.898-11.273h-2.148l-2.813 8.921h-.132l-2.836-8.921h-2.227l3.938 11.273h2.32zm8.016-7.18c1.164 0 1.93.813 1.969 2.078h-4.024c.086-1.25.899-2.078 2.055-2.078zm1.984 4.828c-.281.633-.945.985-1.906.985-1.273 0-2.094-.89-2.141-2.313v-.101h5.969v-.625c0-2.696-1.461-4.313-3.898-4.313-2.477 0-4.016 1.727-4.016 4.477s1.516 4.414 4.031 4.414c2.016 0 3.446-.969 3.797-2.524h-1.836zm3.547 2.352h1.938v-4.938c0-1.195.875-1.976 2.133-1.976.328 0 .843.055.992.11v-1.798c-.18-.054-.524-.085-.805-.085-1.101 0-2.023.625-2.258 1.468h-.132v-1.328h-1.868V26.5zm13.501-5.672c-.203-1.797-1.532-3.047-3.727-3.047-2.57 0-4.078 1.649-4.078 4.422 0 2.813 1.516 4.469 4.086 4.469 2.164 0 3.508-1.203 3.719-2.992h-1.844c-.203.89-.875 1.367-1.883 1.367-1.32 0-2.117-1.047-2.117-2.844 0-1.773.789-2.797 2.117-2.797 1.063 0 1.703.594 1.883 1.422h1.844zm5.117-1.508c1.164 0 1.93.813 1.969 2.078h-4.024c.086-1.25.899-2.078 2.055-2.078zm1.985 4.828c-.282.633-.946.985-1.907.985-1.273 0-2.093-.89-2.14-2.313v-.101h5.968v-.625c0-2.696-1.461-4.313-3.898-4.313-2.477 0-4.016 1.727-4.016 4.477s1.516 4.414 4.032 4.414c2.015 0 3.445-.969 3.796-2.524h-1.835zm3.625 2.352h1.937V14.648h-1.937V26.5zM23.325 13l9.325 16H14l9.325-16z" fill="#fff"/><path stroke="#5E5E5E" d="M43.5 0v44"/></svg>

docs/src/App.svelte

@@ -48,6 +48,15 @@
     }
   }
 
+  // Set the <html> theme attribute to "g80" to use the Gray 90 theme
+  // <html theme="g80">
+  :root[theme="g80"] {
+    @include carbon--theme($carbon--theme--g80, true) {
+      @include emit-component-tokens($tag-colors);
+      @include emit-component-tokens($notification-colors);
+    }
+  }
+
   // Set the <html> theme attribute to "g90" to use the Gray 90 theme
   // <html theme="g90">
   :root[theme="g90"] {
@@ -75,6 +84,8 @@
   @import "carbon-components/scss/globals/scss/_css--body";
   @import "carbon-components/scss/globals/grid/grid";
 
+  @import "carbon-components/src/components/treeview/treeview";
+
   // Import all component styles
   @import "carbon-components/scss/globals/scss/styles";
 </style>

docs/src/components/ComponentApi.svelte

@@ -4,10 +4,12 @@
     slots: [],
     events: [],
     rest_props: undefined,
+    typedefs: [],
   };
 
   import {
     Link,
+    OutboundLink,
     StructuredList,
     StructuredListHead,
     StructuredListRow,
@@ -17,6 +19,7 @@
     UnorderedList,
     ListItem,
     Tag,
+    CodeSnippet,
   } from "carbon-components-svelte";
   import InlineSnippet from "./InlineSnippet.svelte";
   import Launch16 from "carbon-icons-svelte/lib/Launch16";
@@ -30,7 +33,7 @@
     Date: "JavaScript Date",
   };
 
-  $: source = `https://github.com/IBM/carbon-components-svelte/tree/master/${component.filePath}`;
+  $: source = `https://github.com/carbon-design-system/carbon-components-svelte/tree/master/${component.filePath}`;
   $: forwarded_events = component.events.filter(
     (event) => event.type === "forwarded"
   );
@@ -40,20 +43,17 @@
 </script>
 
 <p style="margin-bottom: var(--cds-layout-02)">
-  Component source code:
+  Source code:
-  <Link inline size="lg" href="{source}" target="_blank">
+  <OutboundLink size="lg" inline href="{source}">
     {component.filePath}
-    <Launch16 />
+  </OutboundLink>
-  </Link>
 </p>
 
 <h3 id="props">Props</h3>
 
 {#if component.props.length > 0}
   <div class="overflow">
-    <StructuredList
+    <StructuredList flush condensed>
-      style="margin-left: calc(-1 * var(--cds-spacing-05)); margin-right: calc(-1 * var(--cds-spacing-05))"
-    >
       <StructuredListHead>
         <StructuredListRow head>
           <StructuredListCell head>Prop name</StructuredListCell>
@@ -71,17 +71,19 @@
               <InlineSnippet code="{prop.name}" />
               {#if prop.reactive}
                 <div
-                  style="white-space: nowrap; margin-top: var(--cds-spacing-03)"
+                  style="white-space: nowrap; margin-top: var(--cds-spacing-03); margin-bottom: var(--cds-spacing-03)"
                 >
-                  <Tag type="cyan">Reactive</Tag>
+                  <Tag style="margin-left: 0" size="sm" type="cyan">
+                    Reactive
+                  </Tag>
                 </div>
               {/if}
             </StructuredListCell>
             <StructuredListCell>
-              {#each prop.type.split(" | ") as type, i (type)}
+              {#each (prop.type || "").split(" | ") as type, i (type)}
                 <div
                   class="cell"
-                  style="z-index: {prop.type.split(' | ').length - i}"
+                  style="z-index: {(prop.type || '').split(' | ').length - i}"
                 >
                   {#if type.startsWith("typeof")}
                     <TooltipDefinition
@@ -92,14 +94,12 @@
                       Carbon Svelte icon
                     </TooltipDefinition>
                   {:else if type.startsWith("HTML")}
-                    <Link
+                    <OutboundLink
                       href="{mdn_api}{type}"
-                      target="_blank"
                       style="white-space: nowrap"
                     >
                       {type}
-                      <Launch16 />
+                    </OutboundLink>
-                    </Link>
                   {:else if type in typeMap}
                     <code>{typeMap[type]}</code>
                   {:else if type.startsWith("(")}
@@ -133,6 +133,20 @@
 {:else}
   <p class="my-layout-01-03">No props.</p>
 {/if}
+
+<h3 id="typedefs">Typedefs</h3>
+
+{#if component.typedefs.length > 0}
+  <CodeSnippet
+    style="margin-top: var(--cds-spacing-08)"
+    class="my-layout-01-03"
+    type="multi"
+    code="{component.typedefs.map((t) => t.ts).join(';\n\n')};"
+  />
+{:else}
+  <p class="my-layout-01-03">No typedefs.</p>
+{/if}
+
 <h3 id="slots">Slots</h3>
 {#if component.slots.length > 0}
   <UnorderedList class="my-layout-01-03">
@@ -207,4 +221,8 @@
   code {
     word-break: break-word;
   }
+
+  :global(.cell .bx--snippet--inline code, .bx--snippet--single pre) {
+    white-space: pre-wrap !important;
+  }
 </style>

docs/src/components/Footer.svelte

@@ -1,28 +1,11 @@
 <script>
-  import { Content, Grid, Row, Column, Link } from "carbon-components-svelte";
+  import { Grid, Row, Column } from "carbon-components-svelte";
 </script>
 
 <footer class="bx--content">
   <Grid>
     <Row>
-      <Column>
+      <Column />
-        <Link
-          href="https://www.vercel.com?utm_source=carbon-components-svelte&utm_campaign=oss"
-          target="_blank"
-        >
-          <img
-            height="36px"
-            src="/powered-by-vercel.svg"
-            alt="Deploys by Vercel"
-          />
-        </Link>
-      </Column>
     </Row>
   </Grid>
 </footer>
-
-<style>
-  footer {
-    background: var(--cds-ui-01);
-  }
-</style>

docs/src/components/InlineSnippet.svelte

@@ -1,15 +1,16 @@
 <script>
   export let code = "";
 
+  import copy from "clipboard-copy";
   import { CodeSnippet } from "carbon-components-svelte";
 </script>
 
 <div>
-  <CodeSnippet code="{code}" type="inline" />
+  <CodeSnippet code="{code}" type="inline" copy="{(text) => copy(text)}" />
 </div>
 
 <style>
   div {
-    margin-bottom: var(--cds-spacing-04);
+    margin-bottom: var(--cds-spacing-03);
   }
 </style>

docs/src/components/Preview.svelte

@@ -4,6 +4,7 @@
   export let src = "";
   export let framed = false;
 
+  import copy from "clipboard-copy";
   import { CodeSnippet, Button } from "carbon-components-svelte";
   import Launch16 from "carbon-icons-svelte/lib/Launch16";
   import { url } from "@sveltech/routify";
@@ -40,7 +41,7 @@
     {/if}
   </div>
   <div class="code-override">
-    <CodeSnippet type="multi" code="{codeRaw}">
+    <CodeSnippet type="multi" code="{codeRaw}" copy="{(text) => copy(text)}">
       {@html code}
     </CodeSnippet>
   </div>

docs/src/components/Theme.svelte

@@ -1,7 +1,7 @@
 <script>
   export let persist = false;
   export let persistKey = "carbon-theme";
-  export const themes = ["white", "g10", "g90", "g100"];
+  export const themes = ["white", "g10", "g80", "g90", "g100"];
 
   import { onMount, afterUpdate } from "svelte";
   import { theme } from "../store";

docs/src/layouts/ComponentLayout.svelte

@@ -37,13 +37,13 @@
   onMount(() => {
     const currentTheme = window.location.search.split("?theme=")[1];
 
-    if (["white", "g10", "g90", "g100"].includes(currentTheme)) {
+    if (["white", "g10", "g80", "g90", "g100"].includes(currentTheme)) {
       theme.set(currentTheme);
     }
   });
 
   // TODO: [refactor] read from package.json value
-  $: sourceCode = `https://github.com/IBM/carbon-components-svelte/tree/master/src/${
+  $: sourceCode = `https://github.com/carbon-design-system/carbon-components-svelte/tree/master/src/${
     source || `${$page.title}/${$page.title}.svelte`
   }`;
 </script>
@@ -62,6 +62,7 @@
           >
             <SelectItem value="white" text="White" />
             <SelectItem value="g10" text="Gray 10" />
+            <SelectItem value="g80" text="Gray 80" />
             <SelectItem value="g90" text="Gray 90" />
             <SelectItem value="g100" text="Gray 100" />
           </Select>
@@ -107,7 +108,11 @@
         <h2 id="component-api">Component API</h2>
         <p>
           API documentation is
-          <Link inline href="https://github.com/IBM/sveld" target="_blank">
+          <Link
+            inline
+            href="https://github.com/carbon-design-system/sveld"
+            target="_blank"
+          >
             auto-generated by sveld.
           </Link>
         </p>
@@ -157,6 +162,7 @@
 
   .prose > p > .bx--link {
     font-size: inherit;
+    text-decoration: underline;
   }
 
   .prose .toc {
@@ -216,4 +222,8 @@
   [data-outline] {
     position: relative;
   }
+
+  [data-outline] ~ [data-outline] {
+    margin-top: var(--cds-spacing-08);
+  }
 </style>

docs/src/pages/_layout.svelte

@@ -20,7 +20,7 @@
   import Footer from "../components/Footer.svelte";
 
   const deprecated = ["ToggleSmall", "Icon"];
-  const new_components = ["Popover", "ContextMenu"];
+  const new_components = [];
 
   let isOpen = false;
   let isSideNavOpen = true;
@@ -60,17 +60,19 @@
     <HeaderUtilities>
       <HeaderActionLink
         icon="{LogoGithub20}"
-        href="https://github.com/IBM/carbon-components-svelte"
+        href="https://github.com/carbon-design-system/carbon-components-svelte"
         target="_blank"
       />
       <HeaderAction transition="{false}" bind:isOpen>
         <HeaderPanelLinks>
           <HeaderPanelDivider>Carbon Svelte portfolio</HeaderPanelDivider>
-          <HeaderPanelLink href="https://github.com/IBM/carbon-icons-svelte">
+          <HeaderPanelLink
+            href="https://github.com/carbon-design-system/carbon-icons-svelte"
+          >
             Carbon Icons Svelte
           </HeaderPanelLink>
           <HeaderPanelLink
-            href="https://github.com/IBM/carbon-pictograms-svelte"
+            href="https://github.com/carbon-design-system/carbon-pictograms-svelte"
           >
             Carbon Pictograms Svelte
           </HeaderPanelLink>
@@ -79,6 +81,11 @@
           >
             Carbon Charts Svelte
           </HeaderPanelLink>
+          <HeaderPanelLink
+            href="https://github.com/carbon-design-system/carbon-preprocess-svelte"
+          >
+            Carbon Preprocess Svelte
+          </HeaderPanelLink>
           <HeaderPanelDivider>Resources</HeaderPanelDivider>
           <HeaderPanelLink href="https://www.carbondesignsystem.com/">
             Carbon Design System
@@ -264,6 +271,6 @@
   }
 
   .bx--side-nav__submenu[aria-expanded="true"] + .bx--side-nav__menu {
-    max-height: 124rem;
+    max-height: 144rem;
   }
 </style>

docs/src/pages/components/AspectRatio.svx

@@ -5,7 +5,7 @@
 
 The `AspectRatio` component is useful for constraining fluid content within an aspect ratio. To demo this, resize your browser for the examples below.
 
-Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"9x16"` and `"1x2"`.
+Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"3x2"`, `"9x16"` and `"1x2"`.
 
 ### Default (2x1)
 
@@ -37,6 +37,12 @@ Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"
   3x4
 </AspectRatio>
 
+### Ratio 3x2
+
+<AspectRatio ratio="3x2">
+  3x2
+</AspectRatio>
+
 ### Ratio 9x16
 
 <AspectRatio ratio="9x16">

docs/src/pages/components/Breakpoint.svx

@@ -0,0 +1,27 @@
+
+<script>
+  import {
+    Breakpoint, UnorderedList, ListItem
+  } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+The [Carbon Design System grid implementation](https://carbondesignsystem.com/guidelines/2x-grid/implementation#responsive-options) defines five responsive breakpoints:
+
+<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
+  <ListItem><strong>Small</strong>: less than 672px</ListItem>
+  <ListItem><strong>Medium</strong>: 672 - 1056px</ListItem>
+  <ListItem><strong>Large</strong>: 1056 - 1312px</ListItem>
+  <ListItem><strong>X-Large</strong>: 1312 - 1584px</ListItem>
+  <ListItem><strong>Max</strong>: greater than 1584px</ListItem>
+</UnorderedList>
+
+This utility component uses the [Window.matchMedia API](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) to declaratively determine the current Carbon breakpoint size.
+
+### Default
+
+Bind to the `size` prop to determine the current breakpoint size. Possible values include: `"sm" | "md" | "lg" | "xlg" | "max"`.
+
+The `"on:match"` event will fire only when a breakpoint change event occurs (e.g., the browser width is resized).
+
+<FileSource src="/framed/Breakpoint/Breakpoint" />

docs/src/pages/components/Button.svx

@@ -1,10 +1,11 @@
 <script>
-  import { Button } from "carbon-components-svelte";
+  import { InlineNotification, Button } from "carbon-components-svelte";
   import Add16 from "carbon-icons-svelte/lib/Add16";
   import TrashCan16 from "carbon-icons-svelte/lib/TrashCan16";
   import TextBold16 from "carbon-icons-svelte/lib/TextBold16";
   import TextItalic16 from "carbon-icons-svelte/lib/TextItalic16";
   import TextUnderline16 from "carbon-icons-svelte/lib/TextUnderline16";
+  import Login16 from "carbon-icons-svelte/lib/Login16";
   import Preview from "../../components/Preview.svelte";
 
   let index = 1;
@@ -36,7 +37,11 @@
 
 ### Danger tertiary, icon-only button
 
-**Note:** you must provide an `iconDescription` for the button tooltip.
+<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+  <div class="body-short-01">
+    You must provide an `iconDescription` for the button tooltip.
+  </div>
+</InlineNotification>
 
 <Button kind="danger-tertiary"iconDescription="Delete" icon={TrashCan16} />
 
@@ -50,10 +55,18 @@
 
 ### Icon-only button
 
-**Note:** you must provide an `iconDescription` for the button tooltip.
+<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+  <div class="body-short-01">
+    You must provide an `iconDescription` for the button tooltip.
+  </div>
+</InlineNotification>
 
 <Button iconDescription="Tooltip text" icon={Add16} />
 
+### Icon-only, link button
+
+<Button iconDescription="Login" icon={Login16} href="#" />
+
 ### Icon-only button (custom tooltip position)
 
 The tooltip position and alignment can be controlled by `tooltipPosition` and `tooltipAlignment`.
@@ -78,7 +91,7 @@ If an `href` value is specified, the component will render an [anchor element](h
   <p {...props}>Custom element</p>
 </Button>
 
-### Field button
+### Field size
 
 <Button size="field">Primary</Button>
 <Button size="field" kind="secondary">Secondary</Button>
@@ -86,7 +99,7 @@ If an `href` value is specified, the component will render an [anchor element](h
 <Button size="field" kind="ghost">Ghost</Button>
 <Button size="field" kind="danger">Danger</Button>
 
-### Small button
+### Small size
 
 <Button size="small">Primary</Button>
 <Button size="small" kind="secondary">Secondary</Button>
@@ -94,12 +107,58 @@ If an `href` value is specified, the component will render an [anchor element](h
 <Button size="small" kind="ghost">Ghost</Button>
 <Button size="small" kind="danger">Danger</Button>
 
+### Large size
+
+<Button size="lg">Primary</Button>
+<Button size="lg" kind="secondary">Secondary</Button>
+<Button size="lg" kind="tertiary">Tertiary</Button>
+<Button size="lg" kind="ghost">Ghost</Button>
+<Button size="lg" kind="danger">Danger</Button>
+
+### Extra-large size
+
+<Button size="xl">Primary</Button>
+<Button size="xl" kind="secondary">Secondary</Button>
+<Button size="xl" kind="tertiary">Tertiary</Button>
+<Button size="xl" kind="ghost">Ghost</Button>
+<Button size="xl" kind="danger">Danger</Button>
+
 ### Disabled button
 
 <Button disabled>Disabled button</Button>
 
+### Expressive styles
+
+Set `expressive` to `true` to use Carbon's expressive typesetting.
+
+<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+  <div class="body-short-01">
+    Expressive styles only work with the default, `"lg"`, and `"xl"` button sizes.
+  </div>
+</InlineNotification>
+
+<Button expressive size="xl">Primary</Button>
+<Button expressive size="xl" kind="secondary">Secondary</Button>
+<Button expressive size="xl" kind="tertiary">Tertiary</Button>
+<Button expressive size="xl" kind="ghost">Ghost</Button>
+<Button expressive size="xl" kind="danger">Danger</Button>
+<br /><br />
+<Button expressive size="lg">Primary</Button>
+<Button expressive size="lg" kind="secondary">Secondary</Button>
+<Button expressive size="lg" kind="tertiary">Tertiary</Button>
+<Button expressive size="lg" kind="ghost">Ghost</Button>
+<Button expressive size="lg" kind="danger">Danger</Button>
+<br /><br />
+<Button expressive>Primary</Button>
+<Button expressive kind="secondary">Secondary</Button>
+<Button expressive kind="tertiary">Tertiary</Button>
+<Button expressive kind="ghost">Ghost</Button>
+<Button expressive kind="danger">Danger</Button>
+
 ### Skeleton
 
+<Button size="xl" skeleton />
+<Button size="lg" skeleton />
 <Button skeleton />
 <Button skeleton size="field" />
 <Button skeleton size="small" />

docs/src/pages/components/ClickableTile.svx

@@ -14,3 +14,7 @@ source: Tile/ClickableTile.svelte
 ### Light variant
 
 <ClickableTile light href="https://www.carbondesignsystem.com/">Carbon Design System</ClickableTile>
+
+### Disabled state
+
+<ClickableTile disabled href="https://www.carbondesignsystem.com/">Carbon Design System</ClickableTile>

docs/src/pages/components/CodeSnippet.svx

@@ -1,5 +1,5 @@
 <script>
-  import { CodeSnippet, InlineNotification, Link } from "carbon-components-svelte";
+  import { CodeSnippet } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 
   let code = `// helpers.js
@@ -27,14 +27,31 @@ let comment = `
 `
 </script>
 
-<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+This component uses the native, asynchronous [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to copy text.
-  <div class="body-short-01">As of version 0.32, the CodeSnippet will copy the provided `code` text when clicking the copy button.</div>
+
-</InlineNotification>
+Please note that the `clipboard.writeText` API is not supported in [IE 11 nor Safari iOS version 13.3  or lower](https://caniuse.com/mdn-api_clipboard_writetext).
+
+You can override the default copy functionality with your own implementation. See [Overriding copy functionality](#overriding-copy-functionality).
+
 
 ### Default (single-line)
 
 <CodeSnippet code="yarn add -D carbon-components-svelte" />
 
+### Overriding copy functionality
+
+To override the default copy behavior, pass a custom function to the `copy` prop.
+
+In this example, we use the open source module [clipboard-copy](https://github.com/feross/clipboard-copy) to copy the text instead of the default Clipboard API.
+
+<FileSource src="/framed/CodeSnippet/CodeSnippetOverride" />
+
+### Preventing copy functionality
+
+To prevent text from being copied entirely, pass a no-op function to the `copy` prop.
+
+<CodeSnippet code="yarn add -D carbon-components-svelte" copy={() => {}} />
+
 ### Inline
 
 <CodeSnippet type="inline" code="rm -rf node_modules/" />

docs/src/pages/components/ComboBox.svx

@@ -1,6 +1,9 @@
 <script>
   import { ComboBox } from "carbon-components-svelte";
+  import { Button } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
+  let comboboxComponent
+
 </script>
 
 ### Default
@@ -22,6 +25,17 @@ items={[
   {id: "2", text: "Fax"}
   ]}  />
 
+### Clear selection
+<ComboBox titleText="Contact" placeholder="Select contact method"
+bind:this={comboboxComponent} 
+items={[
+  {id: "0", text: "Slack"},
+  {id: "1", text: "Email"},
+  {id: "2", text: "Fax"}
+  ]}  />
+<br>
+<Button on:click={comboboxComponent.clear}>Clear</Button>
+
 ### Multiple combo boxes
 
 <FileSource src="/framed/ComboBox/MultipleComboBox" />

docs/src/pages/components/ComposedModal.svx

@@ -9,3 +9,9 @@ components: ["ComposedModal", "ModalHeader", "ModalBody", "ModalFooter"]
 ### Composed modal
 
 <FileSource src="/framed/Modal/ComposedModal" />
+
+### Multiple secondary buttons
+
+Use the `secondaryButtons` prop in `ModalFooter` to render two secondary buttons for a "3-button modal". The prop is a 2-tuple type that supersedes `secondaryButtonText`.
+
+<FileSource src="/framed/Modal/3ButtonComposedModal" />

docs/src/pages/components/CopyButton.svx

@@ -1,11 +1,13 @@
 <script>
-  import { CopyButton, InlineNotification, Link } from "carbon-components-svelte";
+  import { CopyButton } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
-<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+This component uses the native, asynchronous [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to copy text.
-  <div class="body-short-01">As of version 0.32, this component will copy the provided `code` text when clicking the button.</div>
+
-</InlineNotification>
+Please note that the `clipboard.writeText` API is not supported in [IE 11 nor Safari iOS version 13.3  or lower](https://caniuse.com/mdn-api_clipboard_writetext).
+
+You can override the default copy functionality with your own implementation. See [Overriding copy functionality](#overriding-copy-functionality).
 
 ### Default
 
@@ -13,4 +15,18 @@
 
 ### Custom feedback text
 
-<CopyButton text="Carbon svelte" feedback="Copied to clipboard" />
+<CopyButton text="Carbon svelte" feedback="Copied to clipboard" />
+
+### Overriding copy functionality
+
+To override the default copy behavior, pass a custom function to the `copy` prop.
+
+In this example, we use the open source module [clipboard-copy](https://github.com/feross/clipboard-copy) to copy the text instead of the default Clipboard API.
+
+<FileSource src="/framed/CopyButton/CopyButtonOverride" />
+
+### Preventing copy functionality
+
+To prevent text from being copied entirely, pass a no-op function to the `copy` prop.
+
+<CopyButton text="This text should not be copied" copy={() => {}} />

docs/src/pages/components/DataTable.svx

@@ -3,14 +3,22 @@ components: ["DataTable", "Toolbar", "ToolbarContent", "ToolbarSearch", "Toolbar
 ---
 
 <script>
-  import { DataTable, DataTableSkeleton, Toolbar, ToolbarContent, ToolbarSearch, ToolbarMenu, ToolbarMenuItem, Button, Link } from "carbon-components-svelte";
+  import { InlineNotification, DataTable, DataTableSkeleton, Toolbar, ToolbarContent, ToolbarSearch, ToolbarMenu, ToolbarMenuItem, Button, Link } from "carbon-components-svelte";
   import Launch16 from "carbon-icons-svelte/lib/Launch16";
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default
+`DataTable` is keyed for both rendering and sorting purposes.
 
-The `DataTable` is keyed for both rendering and sorting. You must define a "key" value per object in the `headers` property and an "id" value in `rows`.
+<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+  <div class="body-short-01">Every <code>headers</code> object must have a unique "key" property.</div>
+</InlineNotification>
+
+<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+  <div class="body-short-01">Every <code>rows</code> object must have a unique "id" property.</div>
+</InlineNotification>
+
+### Default
 
 <DataTable
   headers="{[
@@ -132,7 +140,7 @@ The slot name for the table header cells is `"cell-header"`.
   </span>
   <span slot="cell" let:row let:cell>
     {#if cell.key === 'rule' && cell.value === 'Round robin'}
-      <Link inline href="https://en.wikipedia.org/wiki/Round-robin_DNS" target="_blank">{cell.value} <Launch16 /></Link>
+      <Link icon={Launch16} href="https://en.wikipedia.org/wiki/Round-robin_DNS" target="_blank">{cell.value}</Link>
     {:else}
       {cell.value}
     {/if}
@@ -194,6 +202,126 @@ The slot name for the table header cells is `"cell-header"`.
   ]}"
 />
 
+### Slottable title, description
+
+The `title` and `description` props are slottable.
+
+<DataTable
+  headers="{[
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" }
+  ]}"
+  rows="{[
+    {
+      id: "a",
+      name: "Load Balancer 3",
+      protocol: "HTTP",
+      port: 3000,
+      rule: "Round robin"
+    },
+    {
+      id: "b",
+      name: "Load Balancer 1",
+      protocol: "HTTP",
+      port: 443,
+      rule: "Round robin"
+    },
+    {
+      id: "c",
+      name: "Load Balancer 2",
+      protocol: "HTTP",
+      port: 80,
+      rule: "DNS delegation"
+    },
+    {
+      id: "d",
+      name: "Load Balancer 6",
+      protocol: "HTTP",
+      port: 3000,
+      rule: "Round robin"
+    },
+    {
+      id: "e",
+      name: "Load Balancer 4",
+      protocol: "HTTP",
+      port: 443,
+      rule: "Round robin"
+    },
+    {
+      id: "f",
+      name: "Load Balancer 5",
+      protocol: "HTTP",
+      port: 80,
+      rule: "DNS delegation"
+    },
+  ]}"
+>
+    <strong slot="title">Load balancers</strong>
+    <span slot="description" style="font-size: 1rem">
+      Your organization's active load balancers.
+    </span>
+</DataTable>
+
+### Static width
+
+Set `useStaticWidth` to `true` to render the table with a width of "auto" instead of "100%".
+
+<DataTable useStaticWidth
+title="Load balancers" description="Your organization's active load balancers."
+  headers="{[
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" }
+  ]}"
+  rows="{[
+    {
+      id: "a",
+      name: "Load Balancer 3",
+      protocol: "HTTP",
+      port: 3000,
+      rule: "Round robin"
+    },
+    {
+      id: "b",
+      name: "Load Balancer 1",
+      protocol: "HTTP",
+      port: 443,
+      rule: "Round robin"
+    },
+    {
+      id: "c",
+      name: "Load Balancer 2",
+      protocol: "HTTP",
+      port: 80,
+      rule: "DNS delegation"
+    },
+    {
+      id: "d",
+      name: "Load Balancer 6",
+      protocol: "HTTP",
+      port: 3000,
+      rule: "Round robin"
+    },
+    {
+      id: "e",
+      name: "Load Balancer 4",
+      protocol: "HTTP",
+      port: 443,
+      rule: "Round robin"
+    },
+    {
+      id: "f",
+      name: "Load Balancer 5",
+      protocol: "HTTP",
+      port: 80,
+      rule: "DNS delegation"
+    },
+  ]}"
+/>
+
 ### With toolbar
 
 <DataTable title="Load balancers" description="Your organization's active load balancers."
@@ -438,6 +566,61 @@ The slot name for the table header cells is `"cell-header"`.
   ]}"
 />
 
+### Medium rows
+
+<DataTable size="medium"
+  headers="{[
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" }
+  ]}"
+  rows="{[
+    {
+      id: "a",
+      name: "Load Balancer 3",
+      protocol: "HTTP",
+      port: 3000,
+      rule: "Round robin"
+    },
+    {
+      id: "b",
+      name: "Load Balancer 1",
+      protocol: "HTTP",
+      port: 443,
+      rule: "Round robin"
+    },
+    {
+      id: "c",
+      name: "Load Balancer 2",
+      protocol: "HTTP",
+      port: 80,
+      rule: "DNS delegation"
+    },
+    {
+      id: "d",
+      name: "Load Balancer 6",
+      protocol: "HTTP",
+      port: 3000,
+      rule: "Round robin"
+    },
+    {
+      id: "e",
+      name: "Load Balancer 4",
+      protocol: "HTTP",
+      port: 443,
+      rule: "Round robin"
+    },
+    {
+      id: "f",
+      name: "Load Balancer 5",
+      protocol: "HTTP",
+      port: 80,
+      rule: "DNS delegation"
+    },
+  ]}"
+/>
+
 ### Short rows
 
 <DataTable size="short"

docs/src/pages/components/DatePicker.svx

@@ -13,6 +13,12 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
   <DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
 </DatePicker>
 
+### With helper text
+
+<DatePicker>
+  <DatePickerInput labelText="Date of birth" helperText="Example: 01/12/1990" placeholder="mm/dd/yyyy" />
+</DatePicker>
+
 ### Hidden label
 
 <DatePicker>
@@ -57,9 +63,11 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
 
 ### Single
 
-<DatePicker datePickerType="single">
+<FileSource src="/framed/DatePicker/DatePickerSingle" />
-  <DatePickerInput labelText="Schedule a meeting" placeholder="mm/dd/yyyy" />
+
-</DatePicker>
+### Range
+
+<FileSource src="/framed/DatePicker/DatePickerRange" />
 
 ### Skeleton
 

docs/src/pages/components/Dropdown.svx

@@ -47,7 +47,7 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input.
   {id: "1", text: "Email"},
   {id: "2", text: "Fax"}]}" />
 
-### Inline type
+### Inline variant
 
 <Dropdown type="inline" titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
   {id: "1", text: "Email"},

docs/src/pages/components/FileUploader.svx

@@ -27,6 +27,14 @@ components: ["FileUploaderButton", "FileUploader", "FileUploaderDropContainer",
 
 <FileUploaderItem invalid name="README.md" status="edit" />
 
+### Item sizes
+
+The default `FileUploaderItem` size is "default".
+
+<FileUploaderItem size="default" name="README.md" status="uploading" />
+<FileUploaderItem size="field" name="README.md" status="uploading" />
+<FileUploaderItem size="small" name="README.md" status="uploading" />
+
 ### Drop container
 
 <FileUploaderDropContainer labelText="Drag and drop files here or click to upload" multiple />

docs/src/pages/components/Icon.svx

@@ -9,7 +9,7 @@
 
 <InlineNotification svx-ignore title="Deprecation warning" kind="warning" hideCloseButton>
   <div>
-    This component will be removed in the next major release. Use icons from <OutboundLink href="https://github.com/IBM/carbon-icons-svelte">carbon-icons-svelte</OutboundLink> instead.
+    This component will be removed in the next major release. Use icons from <OutboundLink href="https://github.com/carbon-design-system/carbon-icons-svelte">carbon-icons-svelte</OutboundLink> instead.
   </div>
 </InlineNotification>
 

docs/src/pages/components/ImageLoader.svx

@@ -28,7 +28,7 @@ Use the "loading" and "error" named slots to render an element when the image is
 
 If `ratio` is set, this component uses the [AspectRatio](/components/AspectRatio) to constrain the image.
 
-Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"9x16"` and `"1x2"`.
+Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"3x2"`, `"9x16"` and `"1x2"`.
   
 <ImageLoader ratio="16x9" src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg" />
 

docs/src/pages/components/Link.svx

@@ -4,6 +4,7 @@ components: ["Link", "OutboundLink"]
 
 <script>
   import { Link, OutboundLink } from "carbon-components-svelte";
+  import Carbon16 from "carbon-icons-svelte/lib/Carbon16"
   import Preview from "../../components/Preview.svelte";
 </script>
 
@@ -32,6 +33,15 @@ An alternative to manually setting `target` to `"_blank"` is to use the `Outboun
   <Link inline href="https://www.carbondesignsystem.com/">Carbon Design System</Link>.
 </div>
 
+### Link with icon
+
+Note that `inline` must be `false` when rendering a link with an icon.
+
+<div>
+  Visit the
+  <Link href="https://www.carbondesignsystem.com/" icon={Carbon16}>Carbon Design System</Link>.
+</div>
+
 ### Large size
 
 <Link size="lg" href="https://www.carbondesignsystem.com/">Carbon Design System</Link>

docs/src/pages/components/LocalStorage.svx

@@ -5,5 +5,19 @@
 This utility component wraps the [Window.localStorage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) and is useful for persisting ephemeral data (e.g., color theme) at the browser level.
   
 ### Reactive example
+
+In the example below, toggle the switch and reload the page. The updated theme should be persisted locally.
   
-<FileSource src="/framed/LocalStorage/LocalStorage" />
+<FileSource src="/framed/LocalStorage/LocalStorage" />
+
+### Clear item, clear all
+
+Use the `bind:this` directive to access the `clearItem` and `clearAll` methods.
+
+Invoking `clearItem` will remove the persisted key value from the browser's local storage.
+
+Invoking `clearAll` will remove all key values.
+
+In the following example, toggle the switch and reload the page. Then, click the "Clear storage" button. Refresh the page; the theme should be reset to the untoggled state.
+
+<FileSource src="/framed/LocalStorage/LocalStorageClear" />

docs/src/pages/components/Modal.svx

@@ -14,6 +14,12 @@
 
 <FileSource src="/framed/Modal/PassiveModal" />
 
+### Multiple secondary buttons
+
+Use the `secondaryButtons` prop to render two secondary buttons for a "3-button modal". The prop is a 2-tuple type that supersedes `secondaryButtonText`.
+
+<FileSource src="/framed/Modal/3ButtonModal" />
+
 ### Extra-small size
 
 <FileSource src="/framed/Modal/ModalExtraSmall" />

docs/src/pages/components/MultiSelect.svx

@@ -79,7 +79,7 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input.
     {id: "2", text: "Fax"}]}"
   />
 
-### Inline type
+### Inline variant
 
 <MultiSelect type="inline" titleText="Contact" label="Select contact methods..."
     items="{[{id: "0", text: "Slack"},

docs/src/pages/components/NumberInput.svx

@@ -23,10 +23,18 @@ components: ["NumberInput", "NumberInputSkeleton"]
 
 <NumberInput hideLabel label="Clusters" />
 
+### Hidden steppers
+
+<NumberInput hideSteppers label="Clusters" />
+
 ### Light variant
 
 <NumberInput light label="Clusters" />
 
+### Read-only variant
+
+<NumberInput readonly label="Clusters" />
+
 ### Extra-large size
 
 <NumberInput size="xl" label="Clusters" />

docs/src/pages/components/OrderedList.svx

@@ -3,10 +3,16 @@ components: ["OrderedList", "ListItem"]
 ---
 
 <script>
-  import { OrderedList, ListItem, Link } from "carbon-components-svelte";
+  import { InlineNotification, OrderedList, ListItem, Link } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
+<InlineNotification svx-ignore title="Tip:" kind="info" hideCloseButton>
+  <div class="body-short-01">
+    Consider using the <Link href="/components/RecursiveList#ordered">RecursiveList</Link> component for rendering tree structured data.
+   </div>
+</InlineNotification>
+
 ### Default
 
 <OrderedList>
@@ -69,4 +75,14 @@ Use the `native` attribute to enable default browser list styles. This is useful
   </ListItem>
   <ListItem>Ordered list level 1</ListItem>
   <ListItem>Ordered list level 1</ListItem>
+</OrderedList>
+
+### Expressive styles
+
+Set `expressive` to `true` to use Carbon's expressive typesetting.
+
+<OrderedList expressive>
+  <ListItem><Link size="lg" href="#">Ordered list item</Link></ListItem>
+  <ListItem>Ordered list item</ListItem>
+  <ListItem>Ordered list item</ListItem>
 </OrderedList>

docs/src/pages/components/PasswordInput.svx

@@ -27,6 +27,10 @@ Set prop `type` to `"text"` to toggle password visibility.
 
 <PasswordInput light labelText="Password" placeholder="Enter password..." />
 
+### Inline
+
+<PasswordInput inline labelText="Password" placeholder="Enter password..." />
+
 ### Extra-large size
 
 <PasswordInput size="xl" labelText="Password" placeholder="Enter password..." />
@@ -39,6 +43,10 @@ Set prop `type` to `"text"` to toggle password visibility.
 
 <PasswordInput invalid invalidText="Incorrect user name or password." labelText="Password" placeholder="Enter password..." />
 
+### Warning state
+
+<PasswordInput warn warnText="Password has been reset." labelText="Password" placeholder="Enter password..." />
+
 ### Disabled state
 
 <PasswordInput disabled labelText="Password" placeholder="Enter password..." />

docs/src/pages/components/Popover.svx

@@ -36,6 +36,79 @@ Set `closeOnOutsideClick` to set `open` to `false` when clicking outside of the
     </Popover>
 </div>
 
+### Popover alignment
+
+Customize the popover alignment using the `align` prop. Valid values include: `"top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-bottom" | "left-top" | "right" | "right-bottom" | "right-top"`.
+
+The default `align` value is `"top"`.
+
+<div data-outline>
+    Parent
+    <Popover open align="top-left">
+        <div style="padding: var(--cds-spacing-05)">top-left</div>
+    </Popover>
+</div>
+<div data-outline>
+    Parent
+    <Popover open align="top-right">
+        <div style="padding: var(--cds-spacing-05)">top-right</div>
+    </Popover>
+</div>
+<div data-outline>
+    Parent
+    <Popover open align="bottom">
+        <div style="padding: var(--cds-spacing-05)">bottom</div>
+    </Popover>
+</div>
+<div data-outline>
+    Parent
+    <Popover open align="bottom-left">
+        <div style="padding: var(--cds-spacing-05)">bottom-left</div>
+    </Popover>
+</div>
+<div data-outline>
+    Parent
+    <Popover open align="bottom-right">
+        <div style="padding: var(--cds-spacing-05)">bottom-right</div>
+    </Popover>
+</div>
+<div data-outline>
+    Parent
+    <Popover open align="left">
+        <div style="padding: var(--cds-spacing-05)">left</div>
+    </Popover>
+</div>
+<div data-outline>
+    Parent
+    <Popover open align="left-bottom">
+        <div style="padding: var(--cds-spacing-05)">left-bottom</div>
+    </Popover>
+</div>
+<div data-outline>
+    Parent
+    <Popover open align="left-right">
+        <div style="padding: var(--cds-spacing-05)">left-right</div>
+    </Popover>
+</div>
+<div data-outline>
+    Parent
+    <Popover open align="right">
+        <div style="padding: var(--cds-spacing-05)">right</div>
+    </Popover>
+</div>
+<div data-outline>
+    Parent
+    <Popover open align="right-bottom">
+        <div style="padding: var(--cds-spacing-05)">right-bottom</div>
+    </Popover>
+</div>
+<div data-outline>
+    Parent
+    <Popover open align="right-top">
+        <div style="padding: var(--cds-spacing-05)">right-top</div>
+    </Popover>
+</div>
+
 ### With caret
 
 <div data-outline>

docs/src/pages/components/ProgressBar.svx

@@ -0,0 +1,30 @@
+<script>
+  import { ProgressBar } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default
+
+Without a specified `value` prop, the progress bar is indeterminate.
+
+<ProgressBar helperText="Loading..." />
+
+### Percentage
+
+<ProgressBar value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
+
+### Custom max value
+
+The default `max` value is `100`.
+
+<ProgressBar value={40} max={200} labelText="Upload status" helperText="40 MB of 200 MB" />
+
+### Hidden label
+
+<ProgressBar hideLabel value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
+
+### UX example
+
+This example shows how to animate the progress bar from 0 to 100% with start and end states.
+
+<FileSource src="/framed/ProgressBar/ProgressBarUx" />

docs/src/pages/components/RecursiveList.svx

@@ -0,0 +1,34 @@
+<script>
+  import { InlineNotification, RecursiveList } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+This component uses the [svelte:self API](https://svelte.dev/docs#svelte_self) to render the [UnorderedList](/components/UnorderedList) and [OrderedList](/components/OrderedList) components with tree structured data.
+
+A child node can render text, a link, HTML content, and other children.
+
+<InlineNotification svx-ignore title="Warning:" kind="warning" hideCloseButton>
+  <div class="body-short-01">
+    HTML content provided via the <code>html</code> prop is not sanitized.
+  </div>
+</InlineNotification>
+
+### Unordered
+
+The `children` prop accepts an array of child nodes.
+
+By default, the list type is unordered.
+
+<FileSource src="/framed/RecursiveList/RecursiveList" />
+
+### Ordered
+
+Set `type` to `"ordered"` to use the ordered list variant.
+
+<FileSource src="/framed/RecursiveList/RecursiveListOrdered" />
+
+### Ordered (native styles)
+
+Set `type` to `"ordered-native"` to use the native styles for an ordered list.
+
+<FileSource src="/framed/RecursiveList/RecursiveListOrderedNative" />

docs/src/pages/components/Search.svx

@@ -1,4 +1,5 @@
 <script>
+  import Query16 from "carbon-icons-svelte/lib/Query16";
   import { Search } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
@@ -23,6 +24,10 @@ The "clear" event is dispatched when clicking the "X" button in the search input
 
 <Search value="Cloud functions" on:clear={() => console.log('clear')}/>
 
+### Expandable variant
+
+<Search expandable on:expand on:collapse />
+
 ### Light variant
 
 <Search light />
@@ -35,10 +40,14 @@ The "clear" event is dispatched when clicking the "X" button in the search input
 
 <Search size="sm" />
 
-### Disabled
+### Disabled state
 
 <Search disabled />
 
+### Custom search icon
+
+<Search icon={Query16} />
+
 ### Skeleton
 
 <Search skeleton />

docs/src/pages/components/Select.svx

@@ -12,15 +12,17 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
 <Select labelText="Carbon theme" selected="g10" >
   <SelectItem value="white" text="White" />
   <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g80" text="Gray 80" />
   <SelectItem value="g90" text="Gray 90" />
   <SelectItem value="g100" text="Gray 100" />
 </Select>
 
 ### Helper text
 
-<Select helperText="Carbon offers 4 themes (2 light, 2 dark)" labelText="Carbon theme" selected="g10" >
+<Select helperText="Carbon offers 4 themes (2 light, 3 dark)" labelText="Carbon theme" selected="g10" >
   <SelectItem value="white" text="White" />
   <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g80" text="Gray 80" />
   <SelectItem value="g90" text="Gray 90" />
   <SelectItem value="g100" text="Gray 100" />
 </Select>
@@ -30,6 +32,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
 <Select hideLabel labelText="Carbon theme" selected="g10" >
   <SelectItem value="white" text="White" />
   <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g80" text="Gray 80" />
   <SelectItem value="g90" text="Gray 90" />
   <SelectItem value="g100" text="Gray 100" />
 </Select>
@@ -43,6 +46,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
     <SelectItem value="g10" text="Gray 10" />
   </SelectItemGroup>
   <SelectItemGroup label="Dark theme">
+    <SelectItem value="g80" text="Gray 80" />
     <SelectItem value="g90" text="Gray 90" />
     <SelectItem value="g100" text="Gray 100" />
   </SelectItemGroup>
@@ -53,15 +57,17 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
 <Select light labelText="Carbon theme" selected="g10" >
   <SelectItem value="white" text="White" />
   <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g80" text="Gray 80" />
   <SelectItem value="g90" text="Gray 90" />
   <SelectItem value="g100" text="Gray 100" />
 </Select>
 
-### Inline type
+### Inline variant
 
 <Select inline labelText="Carbon theme" selected="g10" >
   <SelectItem value="white" text="White" />
   <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g80" text="Gray 80" />
   <SelectItem value="g90" text="Gray 90" />
   <SelectItem value="g100" text="Gray 100" />
 </Select>
@@ -71,6 +77,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
 <Select size="xl" labelText="Carbon theme" selected="g10" >
   <SelectItem value="white" text="White" />
   <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g80" text="Gray 80" />
   <SelectItem value="g90" text="Gray 90" />
   <SelectItem value="g100" text="Gray 100" />
 </Select>
@@ -80,6 +87,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
 <Select size="sm" labelText="Carbon theme" selected="g10" >
   <SelectItem value="white" text="White" />
   <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g80" text="Gray 80" />
   <SelectItem value="g90" text="Gray 90" />
   <SelectItem value="g100" text="Gray 100" />
 </Select>
@@ -89,6 +97,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
 <Select invalid invalidText="Theme must be a dark variant" labelText="Carbon theme" selected="g10" >
   <SelectItem value="white" text="White" />
   <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g80" text="Gray 80" />
   <SelectItem value="g90" text="Gray 90" />
   <SelectItem value="g100" text="Gray 100" />
 </Select>
@@ -98,6 +107,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
 <Select warn warnText="The selected theme will not be persisted" labelText="Carbon theme" selected="g10" >
   <SelectItem value="white" text="White" />
   <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g80" text="Gray 80" />
   <SelectItem value="g90" text="Gray 90" />
   <SelectItem value="g100" text="Gray 100" />
 </Select>
@@ -107,6 +117,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
 <Select disabled labelText="Carbon theme" selected="g10" >
   <SelectItem value="white" text="White" />
   <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g80" text="Gray 80" />
   <SelectItem value="g90" text="Gray 90" />
   <SelectItem value="g100" text="Gray 100" />
 </Select>

docs/src/pages/components/StructuredList.svx

@@ -52,6 +52,94 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
   </StructuredListBody>
 </StructuredList>
 
+### Condensed variant
+
+<StructuredList condensed>
+  <StructuredListHead>
+    <StructuredListRow head>
+      <StructuredListCell head>Column A</StructuredListCell>
+      <StructuredListCell head>Column B</StructuredListCell>
+      <StructuredListCell head>Column C</StructuredListCell>
+    </StructuredListRow>
+  </StructuredListHead>
+  <StructuredListBody>
+    <StructuredListRow>
+      <StructuredListCell noWrap>Row 1</StructuredListCell>
+      <StructuredListCell>Row 1</StructuredListCell>
+      <StructuredListCell>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+        magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
+        sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
+        vulputate nisl a porttitor interdum.
+      </StructuredListCell>
+    </StructuredListRow>
+    <StructuredListRow>
+      <StructuredListCell noWrap>Row 2</StructuredListCell>
+      <StructuredListCell>Row 2</StructuredListCell>
+      <StructuredListCell>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+        magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
+        sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
+        vulputate nisl a porttitor interdum.
+      </StructuredListCell>
+    </StructuredListRow>
+    <StructuredListRow>
+      <StructuredListCell noWrap>Row 3</StructuredListCell>
+      <StructuredListCell>Row 3</StructuredListCell>
+      <StructuredListCell>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+        magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
+        sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
+        vulputate nisl a porttitor interdum.
+      </StructuredListCell>
+    </StructuredListRow>
+  </StructuredListBody>
+</StructuredList>
+
+### Flush
+
+<StructuredList flush>
+  <StructuredListHead>
+    <StructuredListRow head>
+      <StructuredListCell head>Column A</StructuredListCell>
+      <StructuredListCell head>Column B</StructuredListCell>
+      <StructuredListCell head>Column C</StructuredListCell>
+    </StructuredListRow>
+  </StructuredListHead>
+  <StructuredListBody>
+    <StructuredListRow>
+      <StructuredListCell noWrap>Row 1</StructuredListCell>
+      <StructuredListCell>Row 1</StructuredListCell>
+      <StructuredListCell>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+        magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
+        sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
+        vulputate nisl a porttitor interdum.
+      </StructuredListCell>
+    </StructuredListRow>
+    <StructuredListRow>
+      <StructuredListCell noWrap>Row 2</StructuredListCell>
+      <StructuredListCell>Row 2</StructuredListCell>
+      <StructuredListCell>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+        magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
+        sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
+        vulputate nisl a porttitor interdum.
+      </StructuredListCell>
+    </StructuredListRow>
+    <StructuredListRow>
+      <StructuredListCell noWrap>Row 3</StructuredListCell>
+      <StructuredListCell>Row 3</StructuredListCell>
+      <StructuredListCell>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+        magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
+        sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
+        vulputate nisl a porttitor interdum.
+      </StructuredListCell>
+    </StructuredListRow>
+  </StructuredListBody>
+</StructuredList>
+
 ### Selectable rows
 
 <StructuredList selection selected="row-1-value">

docs/src/pages/components/Tag.svx

@@ -49,6 +49,12 @@ Note: rendering a custom icon cannnot be used with the filterable variant.
 Set `interactive` to `true` to render a `button` element instead of a `div`.
 
 <Tag interactive>Machine learning</Tag>
+
+### Disabled
+
+The filterable and interactive tag variants have a disabled state.
+
+<Tag filter disabled>Machine learning</Tag>
 <Tag interactive disabled>Machine learning</Tag>
 
 ### Skeleton

docs/src/pages/components/TextInput.svx

@@ -23,10 +23,14 @@ components: ["TextInput", "TextInputSkeleton"]
 
 <TextInput light labelText="User name" placeholder="Enter user name..." />
 
-### Inline
+### Inline variant
 
 <TextInput inline labelText="User name" placeholder="Enter user name..." />
 
+### Read-only variant
+
+<TextInput readonly labelText="User name" value="IBM" />
+
 ### Extra-large size
 
 <TextInput size="xl" labelText="User name" placeholder="Enter user name..." />

docs/src/pages/components/Theme.svx

@@ -0,0 +1,46 @@
+<script>
+  import { Theme } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+This utility component dynamically updates the Carbon theme on the client-side using CSS variables.
+
+### Default
+
+<FileSource src="/framed/Theme/Theme" />
+
+### Persist locally
+
+Set `persist` to `true` to persist the theme locally using the [Window.localStorage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).
+
+<FileSource src="/framed/Theme/ThemePersist" />
+
+### Custom theme
+
+Define keys and values in the `tokens` prop that override default Carbon theme tokens. Refer to the [Carbon website](https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme) for guidance on customizing a theme using token values.
+
+<FileSource src="/framed/Theme/ThemeTokens" />
+
+### Theme toggle
+
+Set `render` to `"toggle"` to render a toggle switch to control the theme.
+
+<FileSource src="/framed/Theme/ThemeToggle" />
+
+### Theme toggle (custom)
+
+Customize the toggle using the `toggle` prop.
+
+<FileSource src="/framed/Theme/ThemeToggleCustom" />
+
+### Theme select
+
+Set `render` to `"select"` to render a select dropdown to control the theme.
+
+<FileSource src="/framed/Theme/ThemeSelect" />
+
+### Theme select (custom)
+
+Customize the select using the `select` prop.
+
+<FileSource src="/framed/Theme/ThemeSelectCustom" />

docs/src/pages/components/TooltipIcon.svx

@@ -7,22 +7,23 @@
 
 ### Default ("bottom" direction, "center" aligned)
 
-<TooltipIcon tooltipText="Carbon is an open source design system by IBM.">
+<TooltipIcon tooltipText="Carbon is an open source design system by IBM." icon={Carbon24} />
-  <Carbon24 />
-</TooltipIcon>
 
 ### Directions
 
-<TooltipIcon tooltipText="Top start" direction="top" align="start"><Filter20 /></TooltipIcon>
+<TooltipIcon tooltipText="Top start" direction="top" align="start" icon={Filter20} />
-<TooltipIcon tooltipText="Right end" direction="right" align="end"><Filter20 /></TooltipIcon>
+<TooltipIcon tooltipText="Right end" direction="right" align="end" icon={Filter20} />
-<TooltipIcon tooltipText="Bottom start" direction="bottom" align="start"><Filter20 /></TooltipIcon>
+<TooltipIcon tooltipText="Bottom start" direction="bottom" align="start" icon={Filter20} />
-<TooltipIcon tooltipText="Left start" direction="left" align="start"><Filter20 /></TooltipIcon>
+<TooltipIcon tooltipText="Left start" direction="left" align="start" icon={Filter20} />
 
 ### Custom tooltip text
 
 Use the "text" slot to customize the tooltip text.
 
-<TooltipIcon>
+<TooltipIcon icon={Carbon24}>
   <span slot="tooltipText" style="color: red">Carbon is an open source design system by IBM.</span>
-  <Carbon24 />
+</TooltipIcon>
-</TooltipIcon>
+
+### Disabled
+
+<TooltipIcon disabled tooltipText="Carbon is an open source design system by IBM." icon={Carbon24} />

docs/src/pages/components/TreeView.svx

@@ -0,0 +1,48 @@
+<script>
+  import { InlineNotification } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default
+
+The `children` prop accepts an array of child nodes. Each node should contain `id` and `text` properties.
+
+Optional properties include `disabled`, `expanded`, `icon`, and `children`.
+
+A parent node contains `children` while a leaf node does not.
+
+<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+  <div class="body-short-01">Every node must have a unique id.</div>
+</InlineNotification>
+
+<FileSource src="/framed/TreeView/TreeView" />
+
+### Initial active node
+
+The active node can be set through `activeId`.
+
+<FileSource src="/framed/TreeView/TreeViewActive" />
+
+### Compact size
+
+Set `size` to `"compact"` to use the compact variant.
+
+<FileSource src="/framed/TreeView/TreeViewCompact" />
+
+### With icons
+
+To render a node with an icon, define an `icon` property with a Carbon Svelte icon as its value.
+
+<FileSource src="/framed/TreeView/TreeViewIcons" />
+
+### Initial expanded nodes
+
+Expanded nodes can be set using `expandedIds`.
+
+<FileSource src="/framed/TreeView/TreeViewExpanded" />
+
+### Initial multiple selected nodes
+
+Initial multiple selected nodes can be set using `selectedIds`.
+
+<FileSource src="/framed/TreeView/TreeViewMultiselect" />

docs/src/pages/components/UIShell.svx

@@ -36,6 +36,12 @@ The hamburger menu will automatically be rendered if the `SideNav` component is
 
 <FileSource src="/framed/UIShell/HeaderNav" />
 
+### Header with side navigation (rail)
+
+Set `rail` to `true` on `SideNav` to use the rail variant.
+
+<FileSource src="/framed/UIShell/HeaderNavRail" />
+
 ### Header with app switcher
 
 The `HeaderAction` component uses the [transition:slide API](https://svelte.dev/docs#slide); you can customize the transition duration, delay, and easing with the `transition` prop.

docs/src/pages/components/UnorderedList.svx

@@ -3,10 +3,16 @@ components: ["UnorderedList", "ListItem"]
 ---
 
 <script>
-  import { UnorderedList, ListItem, Link } from "carbon-components-svelte";
+  import { InlineNotification, UnorderedList, ListItem, Link } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
+<InlineNotification svx-ignore title="Tip:" kind="info" hideCloseButton>
+  <div class="body-short-01">
+   Consider using the <Link href="/components/RecursiveList#unordered">RecursiveList</Link> component for rendering tree structured data.
+  </div>
+</InlineNotification>
+
 ### Default
 
 <UnorderedList>
@@ -47,4 +53,14 @@ components: ["UnorderedList", "ListItem"]
   </ListItem>
   <ListItem>Unordered list level 1</ListItem>
   <ListItem>Unordered list level 1</ListItem>
+</UnorderedList>
+
+### Expressive styles
+
+Set `expressive` to `true` to use Carbon's expressive typesetting.
+
+<UnorderedList expressive>
+  <ListItem><Link size="lg" href="#">Unordered list item</Link></ListItem>
+  <ListItem>Unordered list item</ListItem>
+  <ListItem>Unordered list item</ListItem>
 </UnorderedList>

docs/src/pages/framed/Breakpoint/Breakpoint.svelte

@@ -0,0 +1,28 @@
+<script>
+  import { Breakpoint } from "carbon-components-svelte";
+
+  let size;
+  let events = [];
+</script>
+
+<Breakpoint bind:size on:match="{(e) => (events = [...events, e.detail])}" />
+
+<p>Resize the width of your browser.</p>
+<h6>Breakpoint size</h6>
+<h1>{size}</h1>
+
+<h6>on:match</h6>
+<pre>
+  {JSON.stringify(events,null, 2)}
+</pre>
+
+<style>
+  p,
+  h1 {
+    margin-bottom: var(--cds-spacing-08);
+  }
+
+  h6 {
+    margin-bottom: var(--cds-spacing-03);
+  }
+</style>

docs/src/pages/framed/CodeSnippet/CodeSnippetOverride.svelte

@@ -0,0 +1,9 @@
+<script>
+  import copy from "clipboard-copy";
+  import { CodeSnippet } from "carbon-components-svelte";
+</script>
+
+<CodeSnippet
+  code="yarn add -D carbon-components-svelte"
+  copy="{(text) => copy(text)}"
+/>

docs/src/pages/framed/ContextMenu/ContextMenu.svelte

@@ -45,3 +45,19 @@
   <ContextMenuDivider />
   <ContextMenuOption indented kind="danger" labelText="Delete" />
 </ContextMenu>
+
+<div>
+  <p>Right click anywhere on this page</p>
+</div>
+
+<style>
+  div {
+    position: absolute;
+    width: calc(100% - var(--cds-spacing-05));
+    height: calc(100% - var(--cds-spacing-06));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--cds-text-02);
+  }
+</style>

docs/src/pages/framed/ContextMenu/ContextMenuGroups.svelte

@@ -21,3 +21,19 @@
   <ContextMenuDivider />
   <ContextMenuOption selectable labelText="Lock layer" />
 </ContextMenu>
+
+<div>
+  <p>Right click anywhere on this page</p>
+</div>
+
+<style>
+  div {
+    position: absolute;
+    width: calc(100% - var(--cds-spacing-05));
+    height: calc(100% - var(--cds-spacing-06));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--cds-text-02);
+  }
+</style>

docs/src/pages/framed/CopyButton/CopyButtonOverride.svelte

@@ -0,0 +1,6 @@
+<script>
+  import copy from "clipboard-copy";
+  import { CopyButton } from "carbon-components-svelte";
+</script>
+
+<CopyButton text="Carbon svelte" copy="{(text) => copy(text)}" />

docs/src/pages/framed/DatePicker/DatePickerRange.svelte

@@ -0,0 +1,8 @@
+<script>
+  import { DatePicker, DatePickerInput } from "carbon-components-svelte";
+</script>
+
+<DatePicker datePickerType="range" on:change>
+  <DatePickerInput labelText="Start date" placeholder="mm/dd/yyyy" />
+  <DatePickerInput labelText="End date" placeholder="mm/dd/yyyy" />
+</DatePicker>

docs/src/pages/framed/DatePicker/DatePickerSingle.svelte

@@ -0,0 +1,7 @@
+<script>
+  import { DatePicker, DatePickerInput } from "carbon-components-svelte";
+</script>
+
+<DatePicker datePickerType="single" on:change>
+  <DatePickerInput labelText="Meeting date" placeholder="mm/dd/yyyy" />
+</DatePicker>

docs/src/pages/framed/LocalStorage/LocalStorage.svelte

@@ -1,7 +1,6 @@
 <script>
-  import { LocalStorage, Toggle, Button } from "carbon-components-svelte";
+  import { LocalStorage, Toggle } from "carbon-components-svelte";
 
-  let storage;
   let toggled = false;
   let events = [];
 
@@ -9,7 +8,6 @@
 </script>
 
 <LocalStorage
-  bind:this="{storage}"
   key="dark-mode"
   bind:value="{toggled}"
   on:save="{() => {

docs/src/pages/framed/LocalStorage/LocalStorageClear.svelte

@@ -0,0 +1,17 @@
+<script>
+  import { LocalStorage, Toggle, Button } from "carbon-components-svelte";
+
+  let storage;
+  let toggled = false;
+
+  $: document.documentElement.setAttribute("theme", toggled ? "g100" : "white");
+</script>
+
+<LocalStorage bind:this="{storage}" bind:value="{toggled}" />
+
+<Toggle size="sm" labelText="Dark mode" bind:toggled />
+
+<br />
+<br />
+
+<Button size="small" on:click="{storage.clearAll}">Clear storage</Button>

docs/src/pages/framed/Modal/3ButtonComposedModal.svelte

@@ -0,0 +1,31 @@
+<script>
+  import {
+    Button,
+    ComposedModal,
+    ModalHeader,
+    ModalBody,
+    ModalFooter,
+    Checkbox,
+  } from "carbon-components-svelte";
+
+  let open = true;
+  let checked = false;
+</script>
+
+<Button on:click="{() => (open = true)}">Review changes</Button>
+
+<ComposedModal bind:open on:submit="{() => (open = false)}">
+  <ModalHeader label="Changes" title="Confirm changes" />
+  <ModalBody hasForm>
+    <Checkbox labelText="I have reviewed the changes" bind:checked />
+  </ModalBody>
+  <ModalFooter
+    primaryButtonText="Proceed"
+    primaryButtonDisabled="{!checked}"
+    secondaryButtons="{[{ text: 'Cancel' }, { text: 'Review' }]}"
+    on:click:button--secondary="{({ detail }) => {
+      if (detail.text === 'Cancel') open = false;
+      if (detail.text === 'Review') console.log('Review');
+    }}"
+  />
+</ComposedModal>

docs/src/pages/framed/Modal/3ButtonModal.svelte

@@ -0,0 +1,23 @@
+<script>
+  import { Button, Modal } from "carbon-components-svelte";
+
+  let open = false;
+</script>
+
+<Button on:click="{() => (open = true)}">Create database</Button>
+
+<Modal
+  bind:open
+  modalHeading="Create database"
+  primaryButtonText="Confirm"
+  secondaryButtons="{[{ text: 'Cancel' }, { text: 'Edit' }]}"
+  on:click:button--secondary="{({ detail }) => {
+    if (detail.text === 'Cancel') open = false;
+    if (detail.text === 'Edit') console.log('Edit');
+  }}"
+  on:open
+  on:close
+  on:submit
+>
+  <p>Create a new Cloudant database in the US South region.</p>
+</Modal>

docs/src/pages/framed/ProgressBar/ProgressBarUx.svelte

@@ -0,0 +1,44 @@
+<script>
+  import { ProgressBar, ButtonSet, Button } from "carbon-components-svelte";
+
+  let max = 328;
+  let value = 0;
+
+  $: helperText =
+    value > 0 ? value.toFixed(0) + "MB of " + max + "MB" : "Press start";
+  $: if (value === max) helperText = "Done";
+</script>
+
+<ProgressBar
+  labelText="Upload status"
+  value="{value}"
+  max="{max}"
+  helperText="{helperText}"
+/>
+
+<ButtonSet style="margin-top: var(--cds-spacing-08)">
+  <Button
+    disabled="{value > 0}"
+    on:click="{() => {
+      const interval = setInterval(() => {
+        const delta = Math.random() * 10;
+
+        if (value + delta < max) {
+          value += delta;
+        } else {
+          value = max;
+          clearInterval(interval);
+        }
+      }, 30);
+    }}"
+  >
+    Start
+  </Button>
+  <Button
+    kind="tertiary"
+    disabled="{value !== max}"
+    on:click="{() => (value = 0)}"
+  >
+    Reset
+  </Button>
+</ButtonSet>

docs/src/pages/framed/RecursiveList/RecursiveList.svelte

@@ -0,0 +1,32 @@
+<script>
+  import { RecursiveList } from "carbon-components-svelte";
+
+  const children = [
+    {
+      text: "Item 1",
+      children: [
+        {
+          text: "Item 1a",
+          children: [{ html: "<h5>HTML content</h5>" }],
+        },
+      ],
+    },
+    {
+      text: "Item 2",
+      children: [
+        {
+          href: "https://svelte.dev/",
+        },
+        {
+          href: "https://svelte.dev/",
+          text: "Link with custom text",
+        },
+      ],
+    },
+    {
+      text: "Item 3",
+    },
+  ];
+</script>
+
+<RecursiveList children="{children}" />

docs/src/pages/framed/RecursiveList/RecursiveListOrdered.svelte

@@ -0,0 +1,32 @@
+<script>
+  import { RecursiveList } from "carbon-components-svelte";
+
+  const children = [
+    {
+      text: "Item 1",
+      children: [
+        {
+          text: "Item 1a",
+          children: [{ html: "<h5>HTML content</h5>" }],
+        },
+      ],
+    },
+    {
+      text: "Item 2",
+      children: [
+        {
+          href: "https://svelte.dev/",
+        },
+        {
+          href: "https://svelte.dev/",
+          text: "Link with custom text",
+        },
+      ],
+    },
+    {
+      text: "Item 3",
+    },
+  ];
+</script>
+
+<RecursiveList type="ordered" children="{children}" />

docs/src/pages/framed/RecursiveList/RecursiveListOrderedNative.svelte

@@ -0,0 +1,32 @@
+<script>
+  import { RecursiveList } from "carbon-components-svelte";
+
+  const children = [
+    {
+      text: "Item 1",
+      children: [
+        {
+          text: "Item 1a",
+          children: [{ html: "<h5>HTML content</h5>" }],
+        },
+      ],
+    },
+    {
+      text: "Item 2",
+      children: [
+        {
+          href: "https://svelte.dev/",
+        },
+        {
+          href: "https://svelte.dev/",
+          text: "Link with custom text",
+        },
+      ],
+    },
+    {
+      text: "Item 3",
+    },
+  ];
+</script>
+
+<RecursiveList type="ordered-native" children="{children}" />

docs/src/pages/framed/Theme/Theme.svelte

@@ -0,0 +1,17 @@
+<script>
+  import {
+    Theme,
+    RadioButtonGroup,
+    RadioButton,
+  } from "carbon-components-svelte";
+
+  let theme = "g90";
+</script>
+
+<Theme bind:theme />
+
+<RadioButtonGroup legendText="Carbon theme" bind:selected="{theme}">
+  {#each ["white", "g10", "g80", "g90", "g100"] as value}
+    <RadioButton labelText="{value}" value="{value}" />
+  {/each}
+</RadioButtonGroup>

docs/src/pages/framed/Theme/ThemePersist.svelte

@@ -0,0 +1,17 @@
+<script>
+  import {
+    Theme,
+    RadioButtonGroup,
+    RadioButton,
+  } from "carbon-components-svelte";
+
+  let theme = "g90";
+</script>
+
+<Theme bind:theme persist persistKey="__carbon-theme" />
+
+<RadioButtonGroup legendText="Carbon theme" bind:selected="{theme}">
+  {#each ["white", "g10", "g80", "g90", "g100"] as value}
+    <RadioButton labelText="{value}" value="{value}" />
+  {/each}
+</RadioButtonGroup>

docs/src/pages/framed/Theme/ThemeSelect.svelte

@@ -0,0 +1,5 @@
+<script>
+  import { Theme } from "carbon-components-svelte";
+</script>
+
+<Theme render="select" />

docs/src/pages/framed/Theme/ThemeSelectCustom.svelte

@@ -0,0 +1,12 @@
+<script>
+  import { Theme } from "carbon-components-svelte";
+</script>
+
+<Theme
+  render="select"
+  select="{{
+    themes: ['white', 'g90', 'g100'],
+    labelText: 'Select a theme',
+    inline: true,
+  }}"
+/>

docs/src/pages/framed/Theme/ThemeToggle.svelte

@@ -0,0 +1,5 @@
+<script>
+  import { Theme } from "carbon-components-svelte";
+</script>
+
+<Theme render="toggle" />

docs/src/pages/framed/Theme/ThemeToggleCustom.svelte

@@ -0,0 +1,14 @@
+<script>
+  import { Theme } from "carbon-components-svelte";
+</script>
+
+<Theme
+  render="toggle"
+  toggle="{{
+    themes: ['g10', 'g80'],
+    labelA: 'Enable dark mode',
+    labelB: 'Enable dark mode',
+    hideLabel: true,
+    size: 'sm',
+  }}"
+/>

docs/src/pages/framed/Theme/ThemeTokens.svelte

@@ -0,0 +1,14 @@
+<script>
+  import { Theme, Button } from "carbon-components-svelte";
+</script>
+
+<Theme
+  theme="g90"
+  tokens="{{
+    'interactive-01': '#d02670',
+    'hover-primary': '#ee5396',
+    'active-primary': '#9f1853',
+  }}"
+/>
+
+<Button>Primary button</Button>

docs/src/pages/framed/TreeView/TreeView.svelte

@@ -0,0 +1,65 @@
+<script>
+  import { TreeView } from "carbon-components-svelte";
+
+  let activeId = "";
+  let selectedIds = [];
+  let children = [
+    { id: 0, text: "AI / Machine learning" },
+    {
+      id: 1,
+      text: "Analytics",
+      children: [
+        {
+          id: 2,
+          text: "IBM Analytics Engine",
+          children: [
+            { id: 3, text: "Apache Spark" },
+            { id: 4, text: "Hadoop" },
+          ],
+        },
+        { id: 5, text: "IBM Cloud SQL Query" },
+        { id: 6, text: "IBM Db2 Warehouse on Cloud" },
+      ],
+    },
+    {
+      id: 7,
+      text: "Blockchain",
+      children: [{ id: 8, text: "IBM Blockchain Platform" }],
+    },
+    {
+      id: 9,
+      text: "Databases",
+      children: [
+        { id: 10, text: "IBM Cloud Databases for Elasticsearch" },
+        { id: 11, text: "IBM Cloud Databases for Enterprise DB" },
+        { id: 12, text: "IBM Cloud Databases for MongoDB" },
+        { id: 13, text: "IBM Cloud Databases for PostgreSQL" },
+      ],
+    },
+    {
+      id: 14,
+      text: "Integration",
+      disabled: true,
+      children: [{ id: 15, text: "IBM API Connect", disabled: true }],
+    },
+  ];
+</script>
+
+<TreeView
+  labelText="Cloud Products"
+  children="{children}"
+  bind:activeId
+  bind:selectedIds
+  on:select="{({ detail }) => console.log('select', detail)}"
+  on:toggle="{({ detail }) => console.log('toggle', detail)}"
+  on:focus="{({ detail }) => console.log('focus', detail)}"
+/>
+
+<div>Active node id: {activeId}</div>
+<div>Selected ids: {JSON.stringify(selectedIds)}</div>
+
+<style>
+  div {
+    margin-top: var(--cds-spacing-05);
+  }
+</style>

docs/src/pages/framed/TreeView/TreeViewActive.svelte

@@ -0,0 +1,65 @@
+<script>
+  import { TreeView } from "carbon-components-svelte";
+
+  let activeId = 0;
+  let selectedIds = [];
+  let children = [
+    { id: 0, text: "AI / Machine learning" },
+    {
+      id: 1,
+      text: "Analytics",
+      children: [
+        {
+          id: 2,
+          text: "IBM Analytics Engine",
+          children: [
+            { id: 3, text: "Apache Spark" },
+            { id: 4, text: "Hadoop" },
+          ],
+        },
+        { id: 5, text: "IBM Cloud SQL Query" },
+        { id: 6, text: "IBM Db2 Warehouse on Cloud" },
+      ],
+    },
+    {
+      id: 7,
+      text: "Blockchain",
+      children: [{ id: 8, text: "IBM Blockchain Platform" }],
+    },
+    {
+      id: 9,
+      text: "Databases",
+      children: [
+        { id: 10, text: "IBM Cloud Databases for Elasticsearch" },
+        { id: 11, text: "IBM Cloud Databases for Enterprise DB" },
+        { id: 12, text: "IBM Cloud Databases for MongoDB" },
+        { id: 13, text: "IBM Cloud Databases for PostgreSQL" },
+      ],
+    },
+    {
+      id: 14,
+      text: "Integration",
+      disabled: true,
+      children: [{ id: 15, text: "IBM API Connect", disabled: true }],
+    },
+  ];
+</script>
+
+<TreeView
+  labelText="Cloud Products"
+  children="{children}"
+  bind:activeId
+  bind:selectedIds
+  on:select="{({ detail }) => console.log('select', detail)}"
+  on:toggle="{({ detail }) => console.log('toggle', detail)}"
+  on:focus="{({ detail }) => console.log('focus', detail)}"
+/>
+
+<div>Active node id: {activeId}</div>
+<div>Selected ids: {JSON.stringify(selectedIds)}</div>
+
+<style>
+  div {
+    margin-top: var(--cds-spacing-05);
+  }
+</style>

docs/src/pages/framed/TreeView/TreeViewCompact.svelte

@@ -0,0 +1,66 @@
+<script>
+  import { TreeView } from "carbon-components-svelte";
+
+  let activeId = 0;
+  let selectedIds = [];
+  let children = [
+    { id: 0, text: "AI / Machine learning" },
+    {
+      id: 1,
+      text: "Analytics",
+      children: [
+        {
+          id: 2,
+          text: "IBM Analytics Engine",
+          children: [
+            { id: 3, text: "Apache Spark" },
+            { id: 4, text: "Hadoop" },
+          ],
+        },
+        { id: 5, text: "IBM Cloud SQL Query" },
+        { id: 6, text: "IBM Db2 Warehouse on Cloud" },
+      ],
+    },
+    {
+      id: 7,
+      text: "Blockchain",
+      children: [{ id: 8, text: "IBM Blockchain Platform" }],
+    },
+    {
+      id: 9,
+      text: "Databases",
+      children: [
+        { id: 10, text: "IBM Cloud Databases for Elasticsearch" },
+        { id: 11, text: "IBM Cloud Databases for Enterprise DB" },
+        { id: 12, text: "IBM Cloud Databases for MongoDB" },
+        { id: 13, text: "IBM Cloud Databases for PostgreSQL" },
+      ],
+    },
+    {
+      id: 14,
+      text: "Integration",
+      disabled: true,
+      children: [{ id: 15, text: "IBM API Connect", disabled: true }],
+    },
+  ];
+</script>
+
+<TreeView
+  size="compact"
+  labelText="Cloud Products"
+  children="{children}"
+  bind:activeId
+  bind:selectedIds
+  on:select="{({ detail }) => console.log('select', detail)}"
+  on:toggle="{({ detail }) => console.log('toggle', detail)}"
+  on:focus="{({ detail }) => console.log('focus', detail)}"
+/>
+
+<div>Active node id: {activeId}</div>
+<div>Selected ids: {JSON.stringify(selectedIds)}</div>
+
+<style>
+  div {
+    margin-top: var(--cds-spacing-05);
+  }
+</style>

docs/src/pages/framed/TreeView/TreeViewExpanded.svelte

@@ -0,0 +1,68 @@
+<script>
+  import { TreeView } from "carbon-components-svelte";
+
+  let activeId = 1;
+  let selectedIds = [];
+  let expandedIds = [1, 2, 14];
+  let children = [
+    { id: 0, text: "AI / Machine learning" },
+    {
+      id: 1,
+      text: "Analytics",
+      children: [
+        {
+          id: 2,
+          text: "IBM Analytics Engine",
+          children: [
+            { id: 3, text: "Apache Spark" },
+            { id: 4, text: "Hadoop" },
+          ],
+        },
+        { id: 5, text: "IBM Cloud SQL Query" },
+        { id: 6, text: "IBM Db2 Warehouse on Cloud" },
+      ],
+    },
+    {
+      id: 7,
+      text: "Blockchain",
+      children: [{ id: 8, text: "IBM Blockchain Platform" }],
+    },
+    {
+      id: 9,
+      text: "Databases",
+      children: [
+        { id: 10, text: "IBM Cloud Databases for Elasticsearch" },
+        { id: 11, text: "IBM Cloud Databases for Enterprise DB" },
+        { id: 12, text: "IBM Cloud Databases for MongoDB" },
+        { id: 13, text: "IBM Cloud Databases for PostgreSQL" },
+      ],
+    },
+    {
+      id: 14,
+      text: "Integration",
+      disabled: true,
+      children: [{ id: 15, text: "IBM API Connect", disabled: true }],
+    },
+  ];
+</script>
+
+<TreeView
+  labelText="Cloud Products"
+  children="{children}"
+  bind:activeId
+  bind:selectedIds
+  bind:expandedIds
+  on:select="{({ detail }) => console.log('select', detail)}"
+  on:toggle="{({ detail }) => console.log('toggle', detail)}"
+  on:focus="{({ detail }) => console.log('focus', detail)}"
+/>
+
+<div>Active node id: {activeId}</div>
+<div>Selected ids: {JSON.stringify(selectedIds)}</div>
+<div>Expanded ids: {JSON.stringify(expandedIds)}</div>
+
+<style>
+  div {
+    margin-top: var(--cds-spacing-05);
+  }
+</style>

docs/src/pages/framed/TreeView/TreeViewIcons.svelte

@@ -0,0 +1,98 @@
+<script>
+  import { TreeView } from "carbon-components-svelte";
+  import WatsonMachineLearning16 from "carbon-icons-svelte/lib/WatsonMachineLearning16";
+  import Analytics16 from "carbon-icons-svelte/lib/Analytics16";
+  import Blockchain16 from "carbon-icons-svelte/lib/Blockchain16";
+  import DataBase16 from "carbon-icons-svelte/lib/DataBase16";
+  import SignalStrength16 from "carbon-icons-svelte/lib/SignalStrength16";
+
+  let activeId = 1;
+  let selectedIds = [];
+  let children = [
+    { id: 0, text: "AI / Machine learning", icon: WatsonMachineLearning16 },
+    {
+      id: 1,
+      text: "Analytics",
+      icon: Analytics16,
+      expanded: true,
+      children: [
+        {
+          id: 2,
+          text: "IBM Analytics Engine",
+          icon: Analytics16,
+          expanded: true,
+          children: [
+            { id: 3, text: "Apache Spark", icon: Analytics16 },
+            { id: 4, text: "Hadoop", icon: Analytics16 },
+          ],
+        },
+        { id: 5, text: "IBM Cloud SQL Query", icon: Analytics16 },
+        { id: 6, text: "IBM Db2 Warehouse on Cloud", icon: Analytics16 },
+      ],
+    },
+    {
+      id: 7,
+      text: "Blockchain",
+      icon: Blockchain16,
+      children: [
+        { id: 8, text: "IBM Blockchain Platform", icon: Blockchain16 },
+      ],
+    },
+    {
+      id: 9,
+      text: "Databases",
+      icon: DataBase16,
+      children: [
+        {
+          id: 10,
+          text: "IBM Cloud Databases for Elasticsearch",
+          icon: DataBase16,
+        },
+        {
+          id: 11,
+          text: "IBM Cloud Databases for Enterprise DB",
+          icon: DataBase16,
+        },
+        { id: 12, text: "IBM Cloud Databases for MongoDB", icon: DataBase16 },
+        {
+          id: 13,
+          text: "IBM Cloud Databases for PostgreSQL",
+          icon: DataBase16,
+        },
+      ],
+    },
+    {
+      id: 14,
+      text: "Integration",
+      icon: SignalStrength16,
+      disabled: true,
+      children: [
+        {
+          id: 15,
+          text: "IBM API Connect",
+          icon: SignalStrength16,
+          disabled: true,
+        },
+      ],
+    },
+  ];
+</script>
+
+<TreeView
+  labelText="Cloud Products"
+  children="{children}"
+  bind:activeId
+  bind:selectedIds
+  on:select="{({ detail }) => console.log('select', detail)}"
+  on:toggle="{({ detail }) => console.log('toggle', detail)}"
+  on:focus="{({ detail }) => console.log('focus', detail)}"
+/>
+
+<div>Active node id: {activeId}</div>
+<div>Selected ids: {JSON.stringify(selectedIds)}</div>
+
+<style>
+  div {
+    margin-top: var(--cds-spacing-05);
+  }
+</style>

docs/src/pages/framed/TreeView/TreeViewMultiselect.svelte

@@ -0,0 +1,65 @@
+<script>
+  import { TreeView } from "carbon-components-svelte";
+
+  let activeId = 0;
+  let selectedIds = [0, 7, 9];
+  let children = [
+    { id: 0, text: "AI / Machine learning" },
+    {
+      id: 1,
+      text: "Analytics",
+      children: [
+        {
+          id: 2,
+          text: "IBM Analytics Engine",
+          children: [
+            { id: 3, text: "Apache Spark" },
+            { id: 4, text: "Hadoop" },
+          ],
+        },
+        { id: 5, text: "IBM Cloud SQL Query" },
+        { id: 6, text: "IBM Db2 Warehouse on Cloud" },
+      ],
+    },
+    {
+      id: 7,
+      text: "Blockchain",
+      children: [{ id: 8, text: "IBM Blockchain Platform" }],
+    },
+    {
+      id: 9,
+      text: "Databases",
+      children: [
+        { id: 10, text: "IBM Cloud Databases for Elasticsearch" },
+        { id: 11, text: "IBM Cloud Databases for Enterprise DB" },
+        { id: 12, text: "IBM Cloud Databases for MongoDB" },
+        { id: 13, text: "IBM Cloud Databases for PostgreSQL" },
+      ],
+    },
+    {
+      id: 14,
+      text: "Integration",
+      disabled: true,
+      children: [{ id: 15, text: "IBM API Connect", disabled: true }],
+    },
+  ];
+</script>
+
+<TreeView
+  labelText="Cloud Products"
+  children="{children}"
+  bind:activeId
+  bind:selectedIds
+  on:select="{({ detail }) => console.log('select', detail)}"
+  on:toggle="{({ detail }) => console.log('toggle', detail)}"
+  on:focus="{({ detail }) => console.log('focus', detail)}"
+/>
+
+<div>Active node id: {activeId}</div>
+<div>Selected ids: {JSON.stringify(selectedIds)}</div>
+
+<style>
+  div {
+    margin-top: var(--cds-spacing-05);
+  }
+</style>

docs/src/pages/framed/UIShell/HeaderNavRail.svelte

@@ -0,0 +1,65 @@
+<script>
+  import {
+    Header,
+    HeaderNav,
+    HeaderNavItem,
+    HeaderNavMenu,
+    SideNav,
+    SideNavItems,
+    SideNavMenu,
+    SideNavMenuItem,
+    SideNavLink,
+    SideNavDivider,
+    SkipToContent,
+    Content,
+    Grid,
+    Row,
+    Column,
+  } from "carbon-components-svelte";
+  import Fade16 from "carbon-icons-svelte/lib/Fade16";
+
+  let isSideNavOpen = false;
+</script>
+
+<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
+  <div slot="skip-to-content">
+    <SkipToContent />
+  </div>
+
+  <HeaderNav>
+    <HeaderNavItem href="/" text="Link 1" />
+    <HeaderNavItem href="/" text="Link 2" />
+    <HeaderNavItem href="/" text="Link 3" />
+    <HeaderNavMenu text="Menu">
+      <HeaderNavItem href="/" text="Link 1" />
+      <HeaderNavItem href="/" text="Link 2" />
+      <HeaderNavItem href="/" text="Link 3" />
+    </HeaderNavMenu>
+    <HeaderNavItem href="/" text="Link 4" />
+  </HeaderNav>
+
+  <SideNav bind:isOpen="{isSideNavOpen}" rail>
+    <SideNavItems>
+      <SideNavLink icon="{Fade16}" text="Link 1" href="/" isSelected />
+      <SideNavLink icon="{Fade16}" text="Link 2" href="/" />
+      <SideNavLink icon="{Fade16}" text="Link 3" href="/" />
+      <SideNavMenu icon="{Fade16}" text="Menu">
+        <SideNavMenuItem href="/" text="Link 1" />
+        <SideNavMenuItem href="/" text="Link 2" />
+        <SideNavMenuItem href="/" text="Link 3" />
+      </SideNavMenu>
+      <SideNavDivider />
+      <SideNavLink icon="{Fade16}" text="Link 4" href="/" />
+    </SideNavItems>
+  </SideNav>
+</Header>
+
+<Content>
+  <Grid>
+    <Row>
+      <Column>
+        <h1>Welcome</h1>
+      </Column>
+    </Row>
+  </Grid>
+</Content>

docs/src/pages/index.svelte

@@ -6,8 +6,15 @@
     Column,
     CodeSnippet,
     Link,
+    Tabs,
+    Tab,
+    TabContent,
+    OutboundLink,
+    RadioButtonGroup,
+    RadioButton,
   } from "carbon-components-svelte";
   import TileCard from "../components/TileCard.svelte";
+  import { theme } from "../store";
   import { metatags } from "@sveltech/routify";
 
   metatags.title = "Carbon Components Svelte";
@@ -16,6 +23,39 @@
 
   const installYarn = "yarn add -D carbon-components-svelte";
   const installNpm = "npm i -D carbon-components-svelte";
+  const themes = {
+    white: "White",
+    g10: "Gray 10",
+    g80: "Gray 80",
+    g90: "Gray 90",
+    g100: "Gray 100",
+    all: "All",
+  };
+
+  const cssImportAll = `import "carbon-components-svelte/css/all.css";`;
+  const cssThemeToggle = `<script>
+  let theme = "${$theme}"; // "white" | "g10" | "g80" | "g90" | "g100"
+
+  $: document.documentElement.setAttribute("theme", theme);
+<\/script>
+`;
+
+  $: cssImport = `import "carbon-components-svelte/css/${$theme}.css";`;
+  $: cssCdn = `<!DOCTYPE html>
+<html>
+  <head>
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/carbon-components-svelte/css/${$theme}.css"
+    />
+  </head>
+</html>`;
+  $: cssCdnSvelteHead = `<svelte:head>
+  <link
+    rel="stylesheet"
+    href="https://unpkg.com/carbon-components-svelte/css/${$theme}.css"
+  />
+</svelte:head>`;
 </script>
 
 <Content>
@@ -32,15 +72,14 @@
           >
             Svelte
           </Link>
-          component library that implements the Carbon Design System, an
+          component library that implements the
           <Link
             inline
             class="big-link"
             href="https://www.carbondesignsystem.com/"
           >
-            open source design system
+            Carbon Design System
-          </Link>
+          </Link>, an open source design system by IBM.
-          by IBM.
         </p>
         <p>
           Design systems facilitate design and development through reuse,
@@ -50,19 +89,154 @@
     </Row>
     <Row style="margin-bottom: var(--cds-layout-02)">
       <Column>
-        <h3>Install</h3>
+        <h3>Installation</h3>
-        <h4>Installing with yarn:</h4>
+        <h4>Using Yarn:</h4>
-        <CodeSnippet code="{installYarn}" />
+        <Row noGutter>
-        <h4>Using npm:</h4>
+          <CodeSnippet code="{installYarn}" />
-        <CodeSnippet code="{installNpm}" />
+        </Row>
+        <h4>Using NPM:</h4>
+        <Row noGutter>
+          <CodeSnippet code="{installNpm}" />
+        </Row>
       </Column>
     </Row>
+    <Row style="margin-bottom: var(--cds-layout-04)">
+      <Column>
+        <h3>Styling</h3>
+        <p>
+          Before importing components, you will need to first apply Carbon
+          component styles. The Carbon Design System supports five themes (2
+          light, 3 dark).
+        </p>
+        <RadioButtonGroup
+          style="margin-top: var(--cds-spacing-08)"
+          legendText="Carbon themes"
+          bind:selected="{$theme}"
+        >
+          {#each ["white", "g10", "g80", "g90", "g100"] as value}
+            <RadioButton labelText="{themes[value]}" value="{value}" />
+          {/each}
+        </RadioButtonGroup>
+      </Column>
+    </Row>
+
     <Row>
+      <Column max="{10}" xlg="{10}" noGutter>
+        <Tabs>
+          <Tab label="CSS StyleSheet" />
+          <Tab label="CDN" />
+          <Tab label="SCSS" />
+          <div slot="content">
+            <TabContent>
+              <p>
+                This library ships with six pre-compiled CSS StyleSheets built
+                from
+                <OutboundLink
+                  inline
+                  size="lg"
+                  href="https://github.com/carbon-design-system/carbon/tree/main/packages/components"
+                >
+                  carbon-components
+                </OutboundLink>.
+              </p>
+              <Row padding noGutter>
+                <Column>
+                  <p>
+                    <CodeSnippet type="single" code="{cssImport}" />
+                  </p>
+                </Column>
+              </Row>
+            </TabContent>
+            <TabContent>
+              <p>
+                An alternative to loading styles is to link an external
+                StyleSheet from a Content Delivery Network (CDN) like
+                <OutboundLink inline size="lg" href="https://unpkg.com/">
+                  unpkg.com
+                </OutboundLink>.
+              </p>
+              <p>This is best suited for rapid prototyping.</p>
+              <h5>HTML</h5>
+              <Row padding noGutter>
+                <Column>
+                  <p>
+                    <CodeSnippet type="multi" code="{cssCdn}" />
+                  </p>
+                </Column>
+              </Row>
+              <h5>svelte:head</h5>
+              <Row padding noGutter>
+                <Column>
+                  <p>
+                    <CodeSnippet type="multi" code="{cssCdnSvelteHead}" />
+                  </p>
+                </Column>
+              </Row>
+            </TabContent>
+            <TabContent>
+              <p>
+                The most performant method to load styles is to import SCSS
+                directly from
+                <code>carbon-components</code>. Although it requires more set
+                up, you can reduce the size of the bundle CSS by importing
+                individual component styles instead of a pre-compiled CSS
+                StyleSheet.
+              </p>
+              <p>
+                Refer to the
+                <OutboundLink
+                  inline
+                  size="lg"
+                  href="https://github.com/carbon-design-system/carbon/blob/main/docs/guides/sass.md"
+                >
+                  official Carbon guide on SASS
+                </OutboundLink>
+                for documentation.
+              </p>
+            </TabContent>
+          </div>
+        </Tabs>
+      </Column>
+    </Row>
+
+    <Row style="margin-bottom: var(--cds-layout-02)">
+      <Column>
+        <h3>Dynamic theming</h3>
+        <p>Use the "all.css" StyleSheet for dynamic, client-side theming.</p>
+        <Row padding noGutter>
+          <Column>
+            <p>
+              <CodeSnippet type="single" code="{cssImportAll}" />
+            </p>
+          </Column>
+        </Row>
+        <p>
+          Programmatically switch between each of the five Carbon themes by
+          setting the "theme" attribute on the HTML element.
+        </p>
+        <Row padding noGutter>
+          <Column>
+            <p>
+              <CodeSnippet type="multi" code="{cssThemeToggle}" />
+            </p>
+          </Column>
+        </Row>
+        <p>
+          You can use the
+          <Link inline size="lg" href="/components/Theme">
+            Theme utility component
+          </Link>
+          to update the theme at runtime.
+        </p>
+      </Column>
+    </Row>
+
+    <Row style="margin-bottom: var(--cds-layout-02)">
       <Column>
         <h3>Portfolio</h3>
         <p>
-          The broader Carbon Svelte effort includes libraries for icons,
+          The Carbon Svelte portfolio includes packages for icons, pictograms,
-          pictograms, and data visualization.
+          and data visualization.
         </p>
       </Column>
     </Row>
@@ -74,37 +248,55 @@
           title="Carbon Components Svelte"
           subtitle="50+ components"
           target="_blank"
-          href="https://github.com/IBM/carbon-components-svelte"
+          href="https://github.com/carbon-design-system/carbon-components-svelte"
         />
       </Column>
       <Column xlg="{5}" lg="{8}" md="{4}">
         <TileCard
           borderBottom
           title="Carbon Icons Svelte"
-          subtitle="6000+ icons"
+          subtitle="7000+ icons"
           target="_blank"
-          href="https://github.com/IBM/carbon-icons-svelte"
+          href="https://github.com/carbon-design-system/carbon-icons-svelte"
         />
       </Column>
     </Row>
     <Row noGutter>
       <Column xlg="{5}" lg="{8}" md="{4}">
         <TileCard
+          borderBottom
           borderRight
           title="Carbon Pictograms Svelte"
           subtitle="700+ pictograms"
           target="_blank"
-          href="https://github.com/IBM/carbon-pictograms-svelte"
+          href="https://github.com/carbon-design-system/carbon-pictograms-svelte"
         />
       </Column>
       <Column xlg="{5}" lg="{8}" md="{4}">
         <TileCard
+          borderBottom
           title="Carbon Charts Svelte"
-          subtitle="16 chart types, powered by d3"
+          subtitle="20+ charts, powered by d3"
           target="_blank"
           href="https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte"
         />
       </Column>
     </Row>
+    <Row noGutter>
+      <Column xlg="{5}" lg="{8}" md="{4}">
+        <TileCard
+          title="Carbon Preprocess Svelte"
+          subtitle="Collection of Carbon Svelte preprocessors"
+          target="_blank"
+          href="https://github.com/carbon-design-system/carbon-preprocess-svelte"
+        />
+      </Column>
+    </Row>
   </Grid>
 </Content>
+
+<style>
+  p {
+    margin-bottom: var(--cds-spacing-05);
+  }
+</style>

docs/src/store.js

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

docs/svelte.config.js

@@ -68,6 +68,7 @@ function plugin() {
       const formattedCode = format(scriptBlock + node.value, {
         parser: "svelte",
         svelteBracketNewLine: true,
+        svelteSortOrder: "scripts-markup-styles",
       });
       const highlightedCode = Prism.highlight(
         formattedCode,
@@ -238,6 +239,9 @@ module.exports = {
                       <li class="bx--list__item">
                         <a class="bx--link" href="#props">Props</a>
                       </li>
+                      <li class="bx--list__item">
+                        <a class="bx--link" href="#typedefs">Typedefs</a>
+                      </li>
                       <li class="bx--list__item">
                         <a class="bx--link" href="#slots">Slots</a>
                       </li>

docs/vercel.json

@@ -1,7 +0,0 @@
-{
-  "version": 2,
-  "routes": [
-    { "handle": "filesystem" },
-    { "src": "/.*", "dest": "/index.html" }
-  ]
-}

docs/vite.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   optimizeDeps: {
-    include: ["clipboard-copy"],
+    include: ["clipboard-copy", "flatpickr/dist/plugins/rangePlugin"],
     exclude: ["@sveltech/routify"],
   },
 };

docs/yarn.lock

@@ -602,6 +602,14 @@ anymatch@~3.1.1:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
+anymatch@~3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
+  integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
 argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@@ -837,26 +845,25 @@ caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001178:
   integrity sha512-n8JVqXuZMVSPKiPiypjFtDTXc4jWIdjxull0f92WLo7e1MSi3uJ3NvveakSh/aCl1QKFAvIz3vIj0v+0K+FrXw==
 
 carbon-components-svelte@../:
-  version "0.32.1"
+  version "0.44.2"
   dependencies:
-    carbon-icons-svelte "^10.27.0"
+    carbon-icons-svelte "^10.36.0"
-    clipboard-copy "3.2.0"
     flatpickr "4.6.9"
 
-carbon-components@10.32.1:
+carbon-components@10.44.0:
-  version "10.32.1"
+  version "10.44.0"
-  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.32.1.tgz#064d4504daafafa379ee2fbc5b2997204fb2e5eb"
+  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.44.0.tgz#80a68e71798c6f1272af41aed0d54da1bef62f9a"
-  integrity sha512-m9Q9y1NSsXcLINSYmRmOOuxwvSNrXqC2FIN3ykg+WO3+WrmozbPsgFSyMs0gd/RUgNXP6edt8k0Op//oks01gA==
+  integrity sha512-GUxr8vLWBieQtyTJprCUDMhPLbsZectQUs9JsQCFaBy5UYQqSSEw/9VgzH+5iiCp6wQIZCCg6NnTofGgoBBhYw==
   dependencies:
     "@carbon/telemetry" "0.0.0-alpha.6"
     flatpickr "4.6.1"
     lodash.debounce "^4.0.8"
     warning "^3.0.0"
 
-carbon-icons-svelte@^10.27.0:
+carbon-icons-svelte@^10.36.0:
-  version "10.28.0"
+  version "10.36.0"
-  resolved "https://registry.yarnpkg.com/carbon-icons-svelte/-/carbon-icons-svelte-10.28.0.tgz#812a6eae858d0c9e043067c714910fcfb6249cd2"
+  resolved "https://registry.yarnpkg.com/carbon-icons-svelte/-/carbon-icons-svelte-10.36.0.tgz#3f269f2c52520d14fcd42161a633afbb7c68b4bf"
-  integrity sha512-C3K+U2PRy63WHFZme1HQNju89rhVIQmUkfgBrZzcezdutkhXbSPOY+o/MI0B2mDcQ7G9gfhEpqsXET8gBTWfJQ==
+  integrity sha512-YlrHtjdRqMFiptNVpQ4M+gMvpYDoKQydBY5A82thAXIHk9JrbrVLzq6RgJugTijHT8yzMS1zXaw6YYhqL8Qzqw==
 
 caseless@~0.12.0:
   version "0.12.0"
@@ -893,20 +900,20 @@ cheap-watch@^1.0.2:
   resolved "https://registry.npmjs.org/cheap-watch/-/cheap-watch-1.0.2.tgz#bfa648aea6bcd15e9fe4dce4ac760ab81cd0133c"
   integrity sha512-jp82t+kZAW+ZVnuYuHZEGZqDaUg28uAyOhC915BcKBSYL55fpTyuJ56cYYXZG0JkCPQT80MjRD6q2KqebaPwCw==
 
-"chokidar@>=2.0.0 <4.0.0":
+"chokidar@>=3.0.0 <4.0.0":
-  version "3.5.1"
+  version "3.5.2"
-  resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75"
-  integrity sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==
+  integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==
   dependencies:
-    anymatch "~3.1.1"
+    anymatch "~3.1.2"
     braces "~3.0.2"
-    glob-parent "~5.1.0"
+    glob-parent "~5.1.2"
     is-binary-path "~2.1.0"
     is-glob "~4.0.1"
     normalize-path "~3.0.0"
-    readdirp "~3.5.0"
+    readdirp "~3.6.0"
   optionalDependencies:
-    fsevents "~2.3.1"
+    fsevents "~2.3.2"
 
 chokidar@^3.0.0, chokidar@^3.3.1:
   version "3.4.2"
@@ -947,10 +954,10 @@ cli-spinners@^2.2.0:
   resolved "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.4.0.tgz#c6256db216b878cfba4720e719cec7cf72685d7f"
   integrity sha512-sJAofoarcm76ZGpuooaO0eDy8saEy+YoZBLjC4h8srt4jeBnkYeOgqxgsJQTpyt2LjI5PTfLJHSL+41Yu4fEJA==
 
-clipboard-copy@3.2.0:
+clipboard-copy@^4.0.1:
-  version "3.2.0"
+  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/clipboard-copy/-/clipboard-copy-3.2.0.tgz#3c5b8651d3512dcfad295d77a9eb09e7fac8d5fb"
+  resolved "https://registry.yarnpkg.com/clipboard-copy/-/clipboard-copy-4.0.1.tgz#326ef9726d4ffe72d9a82a7bbe19379de692017d"
-  integrity sha512-vooFaGFL6ulEP1liiaWFBmmfuPm3cY3y7T9eB83ZTnYc/oFeAKsq3NcDrOkBC8XaauEE8zHQwI7k0+JSYiVQSQ==
+  integrity sha512-wOlqdqziE/NNTUJsfSgXmBMIrYmfd5V0HCGsR8uAKHcg+h9NENWINcfRjtWGU77wDHC8B8ijV4hMTGYbrKovng==
 
 clipboard@^2.0.0:
   version "2.0.6"
@@ -1835,10 +1842,10 @@ fsevents@~2.1.2:
   resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e"
   integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==
 
-fsevents@~2.3.1:
+fsevents@~2.3.2:
-  version "2.3.1"
+  version "2.3.2"
-  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.1.tgz#b209ab14c61012636c8863507edf7fb68cc54e9f"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
-  integrity sha512-YR47Eg4hChJGAB1O3yEAOkGO+rlzutoICGqGo9EZ4lKWokzZRSyIW1QmTzqjtw8MJdj9srP869CuWw/hyzSiBw==
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
 
 function-bind@^1.1.1:
   version "1.1.1"
@@ -1885,6 +1892,13 @@ glob-parent@^5.1.0, glob-parent@~5.1.0:
   dependencies:
     is-glob "^4.0.1"
 
+glob-parent@~5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
 glob@^7.1.2:
   version "7.1.6"
   resolved "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
@@ -3408,10 +3422,10 @@ readdirp@^3.3.0, readdirp@~3.4.0:
   dependencies:
     picomatch "^2.2.1"
 
-readdirp@~3.5.0:
+readdirp@~3.6.0:
-  version "3.5.0"
+  version "3.6.0"
-  resolved "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz#9ba74c019b15d365278d2e91bb8c48d7b4d42c9e"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
-  integrity sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
   dependencies:
     picomatch "^2.2.1"
 
@@ -3631,12 +3645,12 @@ safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.2, safe-buffer@~5.2.0:
   resolved "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
-sass@^1.32.5:
+sass@^1.42.1:
-  version "1.32.5"
+  version "1.42.1"
-  resolved "https://registry.npmjs.org/sass/-/sass-1.32.5.tgz#2882d22ad5748c05fa9bff6c3b0ffbc4f4b9e1dc"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.42.1.tgz#5ab17bebc1cb1881ad2e0c9a932c66ad64e441e2"
-  integrity sha512-kU1yJ5zUAmPxr7f3q0YXTAd1oZjSR1g3tYyv+xu0HZSl5JiNOaE987eiz7wCUvbm4I9fGWGU2TgApTtcP4GMNQ==
+  integrity sha512-/zvGoN8B7dspKc5mC6HlaygyCBRvnyzzgD5khiaCfglWztY99cYoiTUksVx11NlnemrcfH5CEaCpsUKoW0cQqg==
   dependencies:
-    chokidar ">=2.0.0 <4.0.0"
+    chokidar ">=3.0.0 <4.0.0"
 
 saxes@^5.0.0:
   version "5.0.1"

examples/rollup-typescript/.gitignore

@@ -1,4 +0,0 @@
-/node_modules/
-/public/build/
-.vscode
-.DS_Store

examples/rollup-typescript/README.md

@@ -1,23 +0,0 @@
-# rollup-typescript
-
-> Example Rollup/TypeScript set-up scaffolded from the official [Svelte template](https://github.com/sveltejs/template).
-
-## Getting started
-
-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`
-
-Starts the app in development mode.
-
-### `yarn build`
-
-Builds the app for production.

examples/rollup-typescript/package.json

@@ -1,29 +0,0 @@
-{
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "rollup -cw",
-    "build": "rollup -c",
-    "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": "^6.0.0",
-    "@tsconfig/svelte": "^1.0.0",
-    "carbon-components-svelte": "^0.12.0",
-    "rollup": "^2.3.4",
-    "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.3.2",
-    "tslib": "^2.0.0",
-    "typescript": "^3.9.3"
-  }
-}

examples/rollup-typescript/public/index.html

@@ -1,21 +0,0 @@
-<!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-typescript</title>
-    <link
-      rel="stylesheet"
-      href="https://unpkg.com/carbon-components-svelte@0.14.0/css/all.css"
-    />
-    <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>

examples/rollup-typescript/rollup.config.js

@@ -1,60 +0,0 @@
-import svelte from "rollup-plugin-svelte";
-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 sveltePreprocess from "svelte-preprocess";
-import typescript from "@rollup/plugin-typescript";
-
-const production = !process.env.ROLLUP_WATCH;
-
-function serve() {
-  let server;
-
-  function toExit() {
-    if (server) server.kill(0);
-  }
-
-  return {
-    writeBundle() {
-      if (server) return;
-      server = require("child_process").spawn(
-        "npm",
-        ["run", "start", "--", "--dev"],
-        {
-          stdio: ["ignore", "inherit", "inherit"],
-          shell: true,
-        }
-      );
-
-      process.on("SIGTERM", toExit);
-      process.on("exit", toExit);
-    },
-  };
-}
-
-export default {
-  input: "src/index.ts",
-  output: {
-    sourcemap: true,
-    format: "iife",
-    name: "app",
-    file: "public/build/bundle.js",
-  },
-  plugins: [
-    svelte({
-      dev: !production,
-      preprocess: sveltePreprocess(),
-      css: (css) => {
-        css.write("bundle.css");
-      },
-    }),
-    resolve({ browser: true, dedupe: ["svelte"] }),
-    commonjs(),
-    typescript({ sourceMap: !production, inlineSources: !production }),
-    !production && serve(),
-    !production && livereload("public"),
-    production && terser(),
-  ],
-  watch: { clearScreen: false },
-};

examples/rollup-typescript/src/App.svelte

@@ -1,93 +0,0 @@
-<script lang="ts">
-  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>
-
-<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>

examples/rollup-typescript/src/components/Header.svelte

@@ -1,35 +0,0 @@
-<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>

examples/rollup-typescript/src/components/Theme.svelte

@@ -1,57 +0,0 @@
-<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 />