docs: add new component docs

.prettierignore

@@ -8,3 +8,4 @@
 /**/client
 /**/build
 .storybook
+*.svx

README.md

@@ -5,6 +5,12 @@
 
 > Svelte implementation of the [Carbon Design System](https://github.com/carbon-design-system)
 
+`carbon-components-svelte` is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
+
+A design system can facilitate frontend development and prototyping because it is encourages reuse, consistency, and extensibility.
+
+## [Documentation](https://carbon-components-svelte.mybluemix.net/)
+
 ## Getting started
 
 Install `carbon-components-svelte` as a development dependency.

docs/.cfignore

@@ -1,3 +1,3 @@
 *
 !Staticfile
-!public
+!dist

docs/.gitignore

@@ -1,9 +1,3 @@
-.DS_Store
+/node_modules
-/public/
+/dist
-/node_modules/
+/.routify
-/src/node_modules/@sapper/
-yarn-error.log
-/cypress/screenshots/
-/cypress/fixtures/
-/__sapper__/
-static/style.css

docs/README.md

@@ -1,81 +0,0 @@
-# docs
-
-This application was scaffolded using the default webpack [Sapper](https://github.com/sveltejs/sapper) template.
-
-**Purpose**
-
-- Write integration/end-to-end tests using Cypress
-- Serve as an alternative component development environment to Storybook
-- Build components in a Server-side Rendering (SSR) environment
-
-## Getting Started
-
-`carbon-components-svelte` must be linked in order to reflect live updates during component development.
-
-In the root folder of this project, run the following:
-
-```sh
-# carbon-components-svelte/
-yarn link
-```
-
-Then, in this folder, link the package and install the dependencies:
-
-```sh
-cd docs
-
-# carbon-components-svelte/docs/
-yarn link "carbon-components-svelte"
-yarn install
-```
-
-Before starting development, you will need to build the Carbon-themed CSS StyleSheet once.
-
-```sh
-node scripts/carbon-theme
-```
-
-A file containing the four Carbon themes will be outputted to `static/style.css`. Do not check this file into source control.
-
-## Available Scripts
-
-### `yarn dev`
-
-Runs the Sapper app in development mode.
-
-### `yarn build`
-
-Builds the app for production (static export only).
-
-### `yarn test`
-
-Runs Cypress integration tests in a headless browser (i.e. CLI only).
-
-### `yarn:test:tdd`
-
-Runs Cypress tests in the Cypress GUI. This is helpful when authoring new tests.
-
-## Deploying to IBM Cloud
-
-Deploy to IBM Cloud using the Staticfile buildpack.
-
-### Log in
-
-Log in using the IBM Cloud CLI:
-
-```sh
-ibmcloud login
-
-# or if using Single-Sign On (SSO):
-ibmcloud login --sso
-```
-
-### Deploy
-
-Build and deploy the app:
-
-```sh
-yarn build
-ibmcloud target --cf
-ibmcloud cf push
-```

docs/Staticfile

@@ -1,3 +1,2 @@
-root: public
+root: dist
-location_include: includes/*.conf
 force_https: true

docs/cypress.json

@@ -1,5 +0,0 @@
-{
-  "baseUrl": "http://localhost:3000",
-  "video": false,
-  "defaultCommandTimeout": 20
-}

docs/cypress/integration/Button.js

@@ -1,21 +0,0 @@
-describe("Button", () => {
-  beforeEach(() => {
-    cy.examples("Button");
-  });
-
-  it("clicks", () => {
-    cy.get(".bx--btn--primary").first().as("btn").contains("Primary button");
-
-    cy.get("@btn").trigger("click");
-    cy.get("@log").should("be.calledWith", "click");
-
-    cy.get("@btn").trigger("mouseover");
-    cy.get("@log").should("be.calledWith", "mouseover");
-
-    cy.get("@btn").trigger("mouseenter");
-    cy.get("@log").should("be.calledWith", "mouseenter");
-
-    cy.get("@btn").trigger("mouseleave");
-    cy.get("@log").should("be.calledWith", "mouseleave");
-  });
-});

docs/cypress/plugins/index.js

@@ -1,21 +0,0 @@
-/// <reference types="cypress" />
-// ***********************************************************
-// This example plugins/index.js can be used to load plugins
-//
-// You can change the location of this file or turn off loading
-// the plugins file with the 'pluginsFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/plugins-guide
-// ***********************************************************
-
-// This function is called when a project is opened or re-opened (e.g. due to
-// the project's config changing)
-
-/**
- * @type {Cypress.PluginConfig}
- */
-module.exports = (on, config) => {
-  // `on` is used to hook into various events Cypress emits
-  // `config` is the resolved Cypress config
-};

docs/cypress/support/commands.js

@@ -1,7 +0,0 @@
-Cypress.Commands.add("examples", (component) => {
-  cy.visit(`/examples/${component}`, {
-    onBeforeLoad(win) {
-      cy.stub(win.console, "log").as("log");
-    },
-  });
-});

docs/cypress/support/index.js

@@ -1 +0,0 @@
-import "./commands";

docs/includes/header.conf

@@ -1,5 +0,0 @@
-location ~* ((service-worker)\.js)$ {
-  add_header 'Cache-Control' 'no-store';
-  expires off;
-  proxy_no_cache 1;
-}

docs/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Carbon Components Svelte</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/index.js"></script>
+  </body>
+</html>

docs/manifest.yml

@@ -1,7 +1,7 @@
 ---
 applications:
-  - name: carbon-svelte
+  - name: carbon-components-svelte
-    memory: 32M
+    memory: 64M
-    disk_quota: 32M
+    disk_quota: 64M
     buildpacks:
       - https://github.com/cloudfoundry/staticfile-buildpack.git

docs/package.json

@@ -1,33 +1,43 @@
 {
   "private": true,
   "scripts": {
-    "dev": "sapper dev",
+    "dev": "run-p dev:*",
-    "build": "shx rm -rf public && sapper export && shx mv __sapper__/export public",
+    "dev:routify": "NODE_ENV=development routify run",
-    "cy:run": "cypress run",
+    "dev:svite": "svite",
-    "cy:open": "cypress open",
+    "build": "run-s build:*",
-    "test": "run-p --race dev cy:run",
+    "build:routify": "routify run -b",
-    "test:tdd": "run-p --race dev cy:open"
+    "build:svite": "svite build --assetsDir=assets",
-  },
+    "postbuild": "node scripts/postbuild",
-  "dependencies": {
+    "deploy": "npx gh-pages -d dist"
-    "polka": "next",
-    "sirv": "^1.0.1"
   },
   "devDependencies": {
-    "autoprefixer": "^9.8.5",
+    "@sveltech/routify": "^1.9.9",
-    "carbon-components": "^10.17.0",
     "carbon-components-svelte": "../",
     "clipboard-copy": "^3.1.0",
-    "cypress": "^4.10.0",
+    "fs-extra": "^9.0.1",
+    "mdsvex": "^0.8.8",
     "node-sass": "^4.14.1",
     "npm-run-all": "^4.1.5",
-    "postcss": "^7.0.32",
+    "playwright": "^1.4.2",
-    "sapper": "^0.27.16",
+    "polka": "^0.5.2",
-    "shx": "^0.3.2",
+    "posthtml": "^0.13.3",
-    "svelte": "^3.24.0",
+    "prettier": "^2.1.2",
-    "svelte-loader": "^2.9.0",
+    "prettier-plugin-svelte": "^1.4.0",
-    "webpack": "^4.7.0"
+    "prism-svelte": "^0.4.7",
+    "prismjs": "^1.21.0",
+    "remark-slug": "^6.0.0",
+    "sirv": "^1.0.6",
+    "svelte": "3.29.0",
+    "svelte-hmr": "0.11.1",
+    "svelte-preprocess": "^4.3.2",
+    "svite": "0.7.2"
   },
-  "resolutions": {
+  "routify": {
-    "**/lodash": ">=4.17.19 "
+    "routifyDir": ".routify",
+    "dynamicImports": true,
+    "extensions": [
+      "svelte",
+      "svx"
+    ]
   }
 }

docs/scripts/carbon-theme.js

@@ -1,55 +0,0 @@
-const fs = require("fs");
-const sass = require("node-sass");
-const autoprefixer = require("autoprefixer");
-const postcss = require("postcss");
-const { promisify } = require("util");
-
-const writeFile = promisify(fs.writeFile);
-const outFile = "./static/style.css";
-
-async function generateCss() {
-  sass.render(
-    {
-      outFile,
-      omitSourceMapUrl: true,
-      data: `
-        $feature-flags: (
-          enable-css-custom-properties: true,
-          grid-columns-16: true,
-        );
-        
-        @import "node_modules/carbon-components/scss/globals/scss/_css--helpers.scss";
-        @import "node_modules/carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/_mixins.scss";
-        
-        :root[carbon-theme="white"] { @include carbon--theme($carbon--theme--white, true); }
-        :root { @include carbon--theme($carbon--theme--g10, true); }
-        :root[carbon-theme="g90"] { @include carbon--theme($carbon--theme--g90, true); }
-        :root[carbon-theme="g100"] { @include carbon--theme($carbon--theme--g100, true); }
-        
-        $css--font-face: true;
-        $css--helpers: true;
-        $css--body: true;
-        $css--use-layer: true;
-        $css--reset: true;
-        $css--default-type: true;
-        $css--plex: true;
-        
-        @import "node_modules/carbon-components/scss/globals/scss/_css--reset.scss";
-        @import "node_modules/carbon-components/scss/globals/scss/_css--font-face.scss";
-        @import "node_modules/carbon-components/scss/globals/scss/_css--helpers.scss";
-        @import "node_modules/carbon-components/scss/globals/scss/_css--body.scss";
-        @import "node_modules/carbon-components/scss/globals/grid/_grid.scss";
-        @import "node_modules/carbon-components/scss/globals/scss/styles.scss";`,
-    },
-    async (error, result) => {
-      if (!error) {
-        const prefixed = await postcss([autoprefixer]).process(result.css, {
-          from: undefined,
-        });
-        await writeFile(outFile, prefixed.css);
-      }
-    }
-  );
-}
-
-generateCss();

docs/scripts/postbuild.js

@@ -0,0 +1,145 @@
+const sirv = require("sirv");
+const polka = require("polka");
+const { chromium } = require("playwright");
+const fs = require("fs-extra");
+const posthtml = require("posthtml");
+const path = require("path");
+
+const PORT = process.env.PORT || 3000;
+const OUT_DIR = "dist";
+
+async function scrape(page, url = "") {
+  await page.goto(`http://localhost:${PORT}/${url}`);
+  await page.waitForLoadState("networkidle");
+  const $html = await page.$("html");
+  const html = await page.evaluate(([html]) => html.innerHTML, [$html]);
+  await $html.dispose();
+  return html;
+}
+
+function relativePaths(depth = 0) {
+  const asset_extension = new RegExp(/.(js|css|ico)$/);
+  let relative_path =
+    depth > 0
+      ? Array.from({ length: depth }, (_, i) => "../")
+          .join("")
+          .slice(0, -1)
+      : ".";
+
+  return (tree) => {
+    tree.match(
+      [
+        { attrs: { href: asset_extension } },
+        { attrs: { src: asset_extension } },
+      ],
+      (node) => {
+        if ("href" in node.attrs) {
+          node.attrs.href = relative_path + node.attrs.href;
+        }
+
+        if ("src" in node.attrs) {
+          node.attrs.src = relative_path + node.attrs.src;
+        }
+
+        return node;
+      }
+    );
+
+    tree.match({ attrs: { id: "__routify_iframes" } }, (node) => {});
+  };
+}
+
+async function processHtml(html, { dir, outfilePath, depth }) {
+  const processed = await posthtml().use(relativePaths(depth)).process(html);
+  if (dir) {
+    await fs.ensureDir(outfilePath);
+    await fs.writeFile(
+      path.join(outfilePath, "index.html"),
+      await `<!DOCTYPE html><html lang="en">${processed.html}</html>`
+    );
+  } else {
+    await fs.writeFile(
+      path.join(outfilePath),
+      await `<!DOCTYPE html><html lang="en">${processed.html}</html>`
+    );
+  }
+
+  console.log("Prerendered:", outfilePath);
+}
+
+const app = polka()
+  .use(sirv("dist", { single: true }))
+  .listen(PORT, async (error) => {
+    if (error) {
+      console.log(error);
+      process.exit(1);
+    }
+
+    const browser = await chromium.launch();
+    const context = await browser.newContext();
+    const page = await context.newPage();
+
+    const components = await fs.readdir("src/pages/components");
+
+    for await (const component of components) {
+      const [file] = component.split(".svx");
+      const filePath = `components/${file}`;
+      const result = await scrape(page, filePath);
+
+      await processHtml(result, {
+        dir: true,
+        outfilePath: `${OUT_DIR}/${filePath}`,
+        depth: 2,
+      });
+    }
+
+    await fs.ensureDir(`${OUT_DIR}/framed/`);
+    await fs.ensureDir(`${OUT_DIR}/framed/Grid`);
+
+    const framed = [
+      {
+        folder: "Grid",
+        paths: fs.readdirSync("src/pages/framed/Grid"),
+      },
+      {
+        folder: "Loading",
+        paths: fs.readdirSync("src/pages/framed/Loading"),
+      },
+      {
+        folder: "Modal",
+        paths: fs.readdirSync("src/pages/framed/Modal"),
+      },
+      {
+        folder: "UIShell",
+        paths: fs.readdirSync("src/pages/framed/UIShell"),
+      },
+    ];
+
+    for await (const frame of framed) {
+      const { folder, paths } = frame;
+
+      for await (framePath of paths) {
+        const { name } = path.parse(framePath);
+        await fs.ensureDir(`${OUT_DIR}/framed/${folder}/${name}`);
+
+        const filePath = `framed/${folder}/${name}`;
+        const result = await scrape(page, filePath);
+
+        await processHtml(result, {
+          dir: true,
+          outfilePath: `${OUT_DIR}/${filePath}`,
+          depth: 3,
+        });
+      }
+    }
+
+    const __404 = await scrape(page, "404");
+    await processHtml(__404, { outfilePath: `${OUT_DIR}/404.html` });
+
+    const __index = await scrape(page);
+    await processHtml(__index, { outfilePath: `${OUT_DIR}/index.html` });
+
+    await browser.close();
+    await app.server.close();
+    process.exit(0);
+  });

docs/src/App.svelte

@@ -0,0 +1,10 @@
+<script>
+  import { Router } from "@sveltech/routify";
+  import { routes } from "../.routify/routes";
+</script>
+
+<style lang="scss" global>
+  @import "carbon-components-svelte/css/all";
+</style>
+
+<Router routes="{routes}" />

docs/src/client.js

@@ -1,3 +0,0 @@
-import * as sapper from "@sapper/app";
-
-sapper.start({ target: document.querySelector("#sapper") });

docs/src/components/AspectRatio.svelte

@@ -0,0 +1,16 @@
+<script>
+  /**
+   * @type {"2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2"}
+   */
+  export let ratio = "2x1";
+</script>
+
+<div
+  {...$$restProps}
+  class:bx--aspect-ratio="{true}"
+  class="bx--aspect-ratio--{ratio} {$$restProps.class}"
+>
+  <div class:bx--aspect-ratio--object="{true}">
+    <slot />
+  </div>
+</div>

docs/src/components/CopyableCodeSnippet.svelte

@@ -1,14 +0,0 @@
-<script>
-  export let code = "";
-
-  import copy from "clipboard-copy";
-  import { CodeSnippet } from "carbon-components-svelte";
-</script>
-
-<CodeSnippet
-  {...$$restProps}
-  code="{code}"
-  on:click="{() => {
-    copy(code);
-  }}"
-/>

docs/src/components/GlobalHeader.svelte

@@ -1,35 +0,0 @@
-<script>
-  export let segment = undefined;
-
-  import {
-    SkipToContent,
-    Header,
-    HeaderNav,
-    HeaderNavItem,
-    HeaderUtilities,
-    HeaderActionLink,
-  } from "carbon-components-svelte";
-  import Theme from "./Theme.svelte";
-</script>
-
-<Header
-  company="Carbon"
-  platformName="Components Svelte"
-  href="."
-  rel="prefetch"
-  aria-current="{segment === undefined ? 'page' : undefined}"
->
-  <SkipToContent />
-  <!-- <HeaderNav>
-    <HeaderNavItem
-      rel="prefetch"
-      href="about"
-      text="About"
-      aria-current={segment === 'about' ? 'page' : undefined} />
-    <HeaderNavItem
-      rel="prefetch"
-      href="components"
-      text="Components"
-      aria-current={segment === 'components' ? 'page' : undefined} />
-  </HeaderNav> -->
-</Header>

docs/src/components/Portfolio.svelte

@@ -1,227 +0,0 @@
-<script>
-  import * as Carbon from "carbon-components-svelte";
-  import Add16 from "carbon-icons-svelte/lib/Add16";
-  import TileCard from "./TileCard.svelte";
-
-  let skeleton = false;
-  let accordionItemOpen = false;
-</script>
-
-<style>
-  :global(.component-grid) {
-    margin-top: 1.5rem;
-  }
-
-  :global(.component-grid .scope:first-of-type) {
-    border-top: 1px solid var(--cds-ui-03);
-  }
-
-  :global(.scope) {
-    border-left: 1px solid var(--cds-ui-03);
-  }
-
-  :global(.scope > .bx--col) {
-    border-bottom: 1px solid var(--cds-ui-03);
-    border-right: 1px solid var(--cds-ui-03);
-  }
-</style>
-
-<Carbon.Row>
-  <Carbon.Column>
-    <Carbon.ToggleSmall bind:toggled="{skeleton}" labelText="Skeleton state" />
-  </Carbon.Column>
-</Carbon.Row>
-
-<div class="component-grid">
-  <Carbon.Row class="scope">
-    <Carbon.Column noGutter>
-      <TileCard title="Accordion">
-        <Carbon.Accordion
-          count="{3}"
-          skeleton="{skeleton}"
-          open="{accordionItemOpen}"
-        >
-          <Carbon.AccordionItem title="Title 1" bind:open="{accordionItemOpen}">
-            Content 1
-          </Carbon.AccordionItem>
-          <Carbon.AccordionItem title="Title 2">Content 2</Carbon.AccordionItem>
-          <Carbon.AccordionItem title="Title 3">Content 3</Carbon.AccordionItem>
-        </Carbon.Accordion>
-      </TileCard>
-    </Carbon.Column>
-    <Carbon.Column noGutter>
-      <TileCard title="Breadcrumb">
-        <Carbon.Breadcrumb skeleton="{skeleton}">
-          <Carbon.BreadcrumbItem href="/">Breadcrumb 1</Carbon.BreadcrumbItem>
-          <Carbon.BreadcrumbItem href="/">Breadcrumb 2</Carbon.BreadcrumbItem>
-          <Carbon.BreadcrumbItem href="/">Breadcrumb 3</Carbon.BreadcrumbItem>
-        </Carbon.Breadcrumb>
-      </TileCard>
-    </Carbon.Column>
-  </Carbon.Row>
-
-  <Carbon.Row class="scope">
-    <Carbon.Column noGutter>
-      <TileCard title="Primary button">
-        <Carbon.Button skeleton="{skeleton}">Primary</Carbon.Button>
-      </TileCard>
-    </Carbon.Column>
-    <Carbon.Column noGutter>
-      <TileCard title="Secondary button">
-        <Carbon.Button kind="secondary" skeleton="{skeleton}">
-          Secondary
-        </Carbon.Button>
-      </TileCard>
-    </Carbon.Column>
-    <Carbon.Column noGutter>
-      <TileCard title="Tertiary button">
-        <Carbon.Button kind="tertiary" skeleton="{skeleton}">
-          Tertiary
-        </Carbon.Button>
-      </TileCard>
-    </Carbon.Column>
-    <Carbon.Column noGutter>
-      <TileCard title="Ghost button">
-        <Carbon.Button kind="ghost" skeleton="{skeleton}">Ghost</Carbon.Button>
-      </TileCard>
-    </Carbon.Column>
-    <Carbon.Column noGutter>
-      <TileCard title="Danger button">
-        <Carbon.Button kind="danger" skeleton="{skeleton}">
-          Danger
-        </Carbon.Button>
-      </TileCard>
-    </Carbon.Column>
-  </Carbon.Row>
-
-  <Carbon.Row class="scope">
-    <Carbon.Column noGutter>
-      <TileCard title="Primary button with icon">
-        <Carbon.Button icon="{Add16}" skeleton="{skeleton}">
-          With icon
-        </Carbon.Button>
-      </TileCard>
-    </Carbon.Column>
-    <Carbon.Column noGutter>
-      <TileCard title="Icon-only buttons">
-        <Carbon.Button
-          icon="{Add16}"
-          hasIconOnly
-          iconDescription="Primary"
-          tooltipPosition="bottom"
-          tooltipAlignment="center"
-          skeleton="{skeleton}"
-        />
-        <Carbon.Button
-          icon="{Add16}"
-          hasIconOnly
-          kind="secondary"
-          iconDescription="Secondary"
-          tooltipPosition="bottom"
-          tooltipAlignment="center"
-          skeleton="{skeleton}"
-        />
-        <Carbon.Button
-          icon="{Add16}"
-          hasIconOnly
-          kind="tertiary"
-          iconDescription="Tertiary"
-          tooltipPosition="bottom"
-          tooltipAlignment="center"
-          skeleton="{skeleton}"
-        />
-        <Carbon.Button
-          icon="{Add16}"
-          hasIconOnly
-          kind="ghost"
-          iconDescription="Ghost"
-          tooltipPosition="bottom"
-          tooltipAlignment="center"
-          skeleton="{skeleton}"
-        />
-        <Carbon.Button
-          icon="{Add16}"
-          hasIconOnly
-          kind="danger"
-          iconDescription="Danger"
-          tooltipPosition="bottom"
-          tooltipAlignment="center"
-          skeleton="{skeleton}"
-        />
-      </TileCard>
-    </Carbon.Column>
-  </Carbon.Row>
-
-  <Carbon.Row class="scope">
-    <Carbon.Column noGutter>
-      <TileCard title="Checkbox">
-        <fieldset class="bx--fieldset">
-          <legend class="bx--label">Checkbox heading</legend>
-          <Carbon.Checkbox skeleton="{skeleton}" labelText="Checkbox label" />
-          <Carbon.Checkbox skeleton="{skeleton}" labelText="Checkbox label" />
-          <Carbon.Checkbox skeleton="{skeleton}" labelText="Checkbox label" />
-        </fieldset>
-      </TileCard>
-    </Carbon.Column>
-    <Carbon.Column noGutter>
-      <TileCard title="Indeterminate Checkboox">
-        <fieldset class="bx--fieldset">
-          <legend class="bx--label">Checkbox heading</legend>
-          <Carbon.Checkbox
-            indeterminate
-            skeleton="{skeleton}"
-            labelText="Checkbox label"
-          />
-          <Carbon.Checkbox
-            indeterminate
-            skeleton="{skeleton}"
-            labelText="Checkbox label"
-          />
-        </fieldset>
-      </TileCard>
-    </Carbon.Column>
-  </Carbon.Row>
-
-  <Carbon.Row class="scope">
-    <Carbon.Column noGutter>
-      <TileCard title="Inline Code Snippet">
-        <Carbon.CodeSnippet type="inline" light skeleton="{skeleton}">
-          {`node -v`}
-        </Carbon.CodeSnippet>
-      </TileCard>
-    </Carbon.Column>
-    <Carbon.Column noGutter>
-      <TileCard title="Single-line Code Snippet">
-        <Carbon.CodeSnippet type="single" light skeleton="{skeleton}">
-          {`tsc -c tsconfig.json`}
-        </Carbon.CodeSnippet>
-      </TileCard>
-    </Carbon.Column>
-    <Carbon.Column lg="{8}" noGutter>
-      <TileCard title="Multi-line Code Snippet">
-        <Carbon.CodeSnippet type="multi" light skeleton="{skeleton}">
-          {`* {
-margin: 0;
-padding: 0;
-box-sizing: border-box;
-}
-
-body {
-font-family: "IBM Plex Sans";
-lin-height: 1.45;
-}
-
-h1 {
-font-size: 1rem;
-color: #171717; 
-}
-
-a {
-color: currentColor;
-text-decoration: underline;
-}`}
-        </Carbon.CodeSnippet>
-      </TileCard>
-    </Carbon.Column>
-  </Carbon.Row>
-</div>

docs/src/components/Preview.svelte

@@ -0,0 +1,176 @@
+<script>
+  export let code = "";
+  export let codeRaw = "";
+  export let src = "";
+  export let framed = false;
+
+  import { CodeSnippet, Button, InlineLoading } from "carbon-components-svelte";
+  import Launch16 from "carbon-icons-svelte/lib/Launch16";
+  import copy from "clipboard-copy";
+  import { url, beforeUrlChange } from "@sveltech/routify";
+  import { theme } from "../store";
+
+  let success = false;
+
+  $beforeUrlChange(() => {
+    if (success) success = false;
+    return true;
+  });
+</script>
+
+<style global>
+  .preview {
+    margin-bottom: var(--cds-layout-04);
+    margin-left: -1rem;
+    margin-right: -1rem;
+    max-width: 56rem;
+  }
+
+  .code-override .bx--copy-btn,
+  .code-override .bx--snippet,
+  .code-override button.bx--btn.bx--snippet-btn--expand {
+    background-color: #262626;
+    color: #f4f4f4;
+  }
+
+  .code-override .bx--copy-btn:hover,
+  .code-override button.bx--btn.bx--snippet-btn--expand:hover {
+    background-color: #393939;
+  }
+
+  .code-override .bx--snippet__icon {
+    fill: #f4f4f4;
+  }
+
+  .code-override .bx--snippet-container pre {
+    font-size: var(--cds-code-02-font-size);
+    line-height: var(--cds-code-02-line-height);
+    letter-spacing: var(--cds-code-02-letter-spacing);
+    cursor: text;
+  }
+
+  .code-override .bx--snippet--multi .bx--snippet-container pre {
+    overflow-x: auto;
+  }
+
+  .token.tag,
+  .token.operator {
+    color: #6ea6ff;
+  }
+
+  .token.attr-name {
+    color: #3ddbd9; /* teal 30 */
+  }
+
+  .token.token.language-javascript,
+  .token.attr-value {
+    color: #d4bbff; /* purple 30 */
+  }
+
+  .token.keyword {
+    color: #bb8eff;
+  }
+
+  .token.punctuation {
+    color: #a8a8a8; /* gray 40 */
+  }
+
+  .token.script .token.language-javascript {
+    color: #3ddbd9; /* teal 30 */
+  }
+
+  .token.string {
+    color: #fa75a6;
+  }
+
+  .token.boolean {
+    color: #bb8eff;
+  }
+
+  .code-override {
+    border: 1px solid #262626;
+  }
+
+  html[theme="g90"] .code-override {
+    border: 1px solid var(--cds-ui-03);
+  }
+
+  .preview-viewer {
+    border: 1px solid var(--cds-ui-03);
+    border-bottom: 0;
+    position: relative;
+    z-index: 1;
+  }
+
+  .preview-viewer:not(.framed) {
+    padding: var(--cds-spacing-06) var(--cds-spacing-05);
+  }
+
+  .preview-viewer.framed {
+    min-height: 22rem;
+  }
+
+  .framed-header {
+    display: flex;
+  }
+
+  iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .loader {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+</style>
+
+<div class="preview">
+  {#if framed}
+    <div class="framed-header">
+      <div></div>
+      <Button
+        style="margin-left: auto;"
+        kind="ghost"
+        target="_blank"
+        size="field"
+        href="{src}"
+        icon="{Launch16}"
+      >
+        Open in new tab
+      </Button>
+    </div>
+  {/if}
+  <div class="preview-viewer" class:framed>
+    {#if framed && !success}
+      <div class="loader">
+        <InlineLoading />
+      </div>
+    {/if}
+    {#if framed}
+      <iframe
+        on:load="{() => {
+          success = true;
+        }}"
+        title="{src.split('/').pop()}"
+        src="{$url(`${src}?theme=${$theme}`)}"
+      ></iframe>
+    {:else}
+      <slot />
+    {/if}
+  </div>
+  <div class="code-override">
+    <CodeSnippet type="multi" on:click="{() => copy(codeRaw)}">
+      {@html code}
+    </CodeSnippet>
+  </div>
+</div>

docs/src/components/Theme.svelte

@@ -1,29 +1,24 @@
 <script>
-  import { onMount } from "svelte";
+  export let persist = false;
-  import { Select, SelectItem } from "carbon-components-svelte";
+  export let persistKey = "carbon-theme";
+  export const themes = ["white", "g10", "g90", "g100"];
 
-  let theme = undefined;
+  import { onMount, afterUpdate } from "svelte";
+  import { theme } from "../store";
+
+  const isValidTheme = (value) => themes.includes(value);
 
   onMount(() => {
-    theme = localStorage.getItem("theme") || "g10";
+    const persisted_theme = localStorage.getItem(persistKey);
+    if (isValidTheme(persisted_theme)) theme.set(persisted_theme);
   });
 
-  $: if (theme) {
+  afterUpdate(() => {
-    localStorage.setItem("theme", theme);
+    if (isValidTheme($theme)) {
-    document.documentElement.setAttribute("carbon-theme", theme);
+      document.documentElement.setAttribute("theme", $theme);
+      if (persist) localStorage.setItem(persistKey, $theme);
     }
+  });
 </script>
 
-<style>
+<slot />
-  :global(.bx--select-input) {
-    width: auto;
-    min-width: 0;
-  }
-</style>
-
-<Select inline labelText="Theme" bind:selected="{theme}">
-  <SelectItem value="white" text="White" />
-  <SelectItem value="g10" text="Gray 10" />
-  <SelectItem value="g90" text="Gray 90" />
-  <SelectItem value="g100" text="Gray 100" />
-</Select>

docs/src/components/TileCard.svelte

@@ -1,63 +1,86 @@
 <script>
+  export let href = undefined;
   export let title = "";
+  export let subtitle = "";
+  export let borderRight = false;
+  export let borderBottom = false;
 
-  import { Tile, Button, ButtonSet } from "carbon-components-svelte";
+  import { ClickableTile, Tile } from "carbon-components-svelte";
-  import Code16 from "carbon-icons-svelte/lib/Code16";
+  import AspectRatio from "./AspectRatio.svelte";
+  import LogoGithub32 from "carbon-icons-svelte/lib/LogoGithub32";
+  import Launch20 from "carbon-icons-svelte/lib/Launch20";
+
+  $: tileComponent = href ? ClickableTile : Tile;
 </script>
 
 <style>
-  :global(.tile-card) {
+  .card-wrapper {
+    border-right: 1px solid transparent;
+    border-bottom: 1px solid transparent;
+  }
+
+  .borderRight {
+    border-right: 1px solid var(--cds-ui-03);
+  }
+
+  .borderBottom {
+    border-bottom: 1px solid var(--cds-ui-03);
+  }
+
+  .card {
     display: flex;
     flex-direction: column;
+    justify-content: space-between;
     height: 100%;
-    min-height: 12rem;
+  }
+
+  .card-footer {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
   }
 
   .title {
-    font-size: 0.75rem;
+    margin-top: calc(-1 * var(--cds-spacing-02));
+    margin-bottom: var(--cds-spacing-01);
   }
 
-  .tile-card__preview {
+  .subtitle {
-    flex: 1;
+    color: var(--cds-text-02);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 2rem 0;
   }
 
-  .tile-card__actions {
+  @media (max-width: 671px) {
-    display: flex;
+    .card-wrapper,
-    justify-content: flex-end;
+    .borderRight {
-    margin-right: -1rem;
+      border-right: 0;
-    margin-bottom: -1rem;
+      border-bottom: 1px solid var(--cds-ui-03);
+    }
   }
 </style>
 
-<Tile class="tile-card">
+<div class="card-wrapper" class:borderRight class:borderBottom>
-  <div class="title">{title}</div>
+  <AspectRatio>
-  <div class="tile-card__preview">
+    <svelte:component
-    <slot />
+      this="{tileComponent}"
-  </div>
+      href="{href}"
-  <div class="tile-card__actions">
+      {...$$restProps}
+      style="height: 100%;"
+    >
+      <div class="card">
         <div>
-      <Button
+          <h5 class="title">{title}</h5>
-        hasIconOnly
+          {#if subtitle}
-        kind="ghost"
+            <div class="subtitle">{subtitle}</div>
-        size="small"
+          {/if}
-        icon="{Code16}"
+        </div>
-        iconDescription="Usage"
+        <div class="card-footer">
-        tooltipAlignment="center"
+          <svelte:component
-        tooltipPosition="top"
+            this="{LogoGithub32}"
-      />
+            style="fill: var(--cds-icon-01)"
-      <Button
-        hasIconOnly
-        kind="ghost"
-        size="small"
-        icon="{Code16}"
-        iconDescription="Usage"
-        tooltipAlignment="center"
-        tooltipPosition="top"
           />
+          <Launch20 style="fill: var(--cds-icon-01)" />
         </div>
       </div>
-</Tile>
+    </svelte:component>
+  </AspectRatio>
+</div>

docs/src/index.js

@@ -0,0 +1,8 @@
+import App from "./App.svelte";
+
+const app = new App({
+  target: document.getElementById("app"),
+  hydrate: process.env.NODE_ENV === "production",
+});
+
+export default app;

docs/src/layouts/ComponentLayout.svelte

@@ -0,0 +1,133 @@
+<script>
+  import {
+    Grid,
+    Row,
+    Column,
+    Content,
+    Button,
+    Select,
+    SelectItem,
+  } from "carbon-components-svelte";
+  import Code16 from "carbon-icons-svelte/lib/Code16";
+  import { page, metatags } from "@sveltech/routify";
+  import { theme } from "../store";
+
+  export let component = $page.title;
+  export let source = "";
+
+  metatags.title = $page.title;
+
+  // TODO: [refactor] read from package.json value
+  $: sourceCode = `https://github.com/IBM/carbon-components-svelte/tree/master/src/${
+    source || `${$page.title}/${$page.title}.svelte`
+  }`;
+</script>
+
+<style global>
+  #select-theme {
+    width: auto;
+  }
+
+  .prose > p > .bx--link {
+    font-size: inherit;
+  }
+
+  .prose .toc {
+    margin-bottom: var(--cds-layout-01);
+  }
+
+  .table {
+    position: sticky;
+    max-height: calc(100vh - 3rem);
+    top: 3rem;
+    padding-top: var(--cds-spacing-05);
+    padding-bottom: var(--cds-spacing-05);
+    padding-left: var(--cds-spacing-08);
+    overflow-y: auto;
+  }
+
+  .bar {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: var(--cds-layout-02);
+    border-bottom: 1px solid var(--cds-ui-03);
+  }
+
+  [data-components] {
+    z-index: 2;
+    position: relative;
+    display: flex;
+  }
+
+  [data-components] .bx--grid {
+    width: 100%;
+  }
+
+  .toc h5 {
+    margin-bottom: var(--cds-spacing-03);
+  }
+
+  .toc.mobile {
+    display: none;
+  }
+
+  @media (max-width: 1056px) {
+    .table {
+      display: none;
+    }
+
+    .toc.mobile {
+      display: block;
+    }
+  }
+</style>
+
+<Content data-components>
+  <Grid>
+    <Row>
+      <Column>
+        <h1>{component}</h1>
+        <div class="bar">
+          <Select
+            id="select-theme"
+            inline
+            labelText="Theme"
+            bind:selected="{$theme}"
+          >
+            <SelectItem value="white" text="White" />
+            <SelectItem value="g10" text="Gray 10" />
+            <SelectItem value="g90" text="Gray 90" />
+            <SelectItem value="g100" text="Gray 100" />
+          </Select>
+          <Button
+            kind="ghost"
+            target="_blank"
+            size="field"
+            href="{sourceCode}"
+            icon="{Code16}"
+          >
+            Source code
+          </Button>
+        </div>
+      </Column>
+    </Row>
+
+    <Row>
+      <Column class="prose">
+        <div class="toc mobile">
+          <h5>Table of Contents</h5>
+          <slot name="aside" />
+        </div>
+        <h2 id="usage">Usage</h2>
+        <slot />
+      </Column>
+    </Row>
+  </Grid>
+
+  <Column class="table" xlg="{4}" lg="{5}">
+    <div class="toc">
+      <h5>Table of Contents</h5>
+      <slot name="aside" />
+    </div>
+  </Column>
+</Content>

docs/src/pages/_fallback.svelte

@@ -0,0 +1,20 @@
+<script>
+  import { Content, Grid, Row, Column, Link } from "carbon-components-svelte";
+  import { url, metatags } from "@sveltech/routify";
+
+  metatags.title = "404";
+</script>
+
+<Content>
+  <Grid>
+    <Row>
+      <Column>
+        <h1>404</h1>
+        <div>
+          Page not found.
+          <Link href="{$url('/')}">Return home</Link>
+        </div>
+      </Column>
+    </Row>
+  </Grid>
+</Content>

docs/src/pages/_layout.svelte

@@ -0,0 +1,243 @@
+<script context="module">
+  const fetched = new Set();
+</script>
+
+<script>
+  import { isActive, url, layout, beforeUrlChange } from "@sveltech/routify";
+  import {
+    Header,
+    HeaderUtilities,
+    HeaderAction,
+    HeaderActionLink,
+    HeaderPanelLinks,
+    HeaderPanelLink,
+    HeaderPanelDivider,
+    SkipToContent,
+    SideNav,
+    SideNavItems,
+    SideNavMenu,
+    SideNavMenuItem,
+    SideNavLink,
+  } from "carbon-components-svelte";
+  import LogoGithub20 from "carbon-icons-svelte/lib/LogoGithub20";
+  import Theme from "../components/Theme.svelte";
+
+  let isOpen = false;
+  let isSideNavOpen = true;
+  let innerWidth = 2048;
+
+  $: isMobile = innerWidth < 1056;
+  $: components = $layout.children.filter(
+    (child) => child.title === "components"
+  )[0];
+
+  $beforeUrlChange(() => {
+    if (isMobile) isSideNavOpen = false;
+    return true;
+  });
+</script>
+
+<style global>
+  .bx--col > h1 {
+    font-size: var(--cds-productive-heading-07-font-size);
+    font-weight: var(--cds-productive-heading-07-font-weight);
+    letter-spacing: var(--cds-productive-heading-07-letter-spacing);
+    line-height: var(--cds-productive-heading-07-line-height);
+    margin-bottom: var(--cds-layout-01);
+  }
+
+  .big-paragraph {
+    font-size: 1.5rem;
+    font-weight: var(--cds-productive-heading-03-font-weight);
+    letter-spacing: var(--cds-productive-heading-03-letter-spacing);
+    line-height: var(--cds-productive-heading-03-line-height);
+    margin-top: var(--cds-layout-03);
+    margin-bottom: var(--cds-layout-05);
+  }
+
+  .bx--col > .big-paragraph > code {
+    font-size: var(--cds-productive-heading-03-font-size);
+    font-weight: var(--cds-productive-heading-03-font-weight);
+    letter-spacing: var(--cds-productive-heading-03-letter-spacing);
+    line-height: var(--cds-productive-heading-03-line-height);
+  }
+
+  .big-link {
+    font-size: 1.5rem;
+    font-weight: var(--cds-productive-heading-03-font-weight);
+    letter-spacing: var(--cds-productive-heading-03-letter-spacing);
+    line-height: var(--cds-productive-heading-03-line-height);
+  }
+
+  .bx--col > p {
+    max-width: 44rem;
+  }
+
+  .bx--col > p > code {
+    font-size: var(--cds-code-02-font-size);
+    font-weight: var(--cds-code-02-font-weight);
+    line-height: var(--cds-code-02-line-height);
+    letter-spacing: var(--cds-code-02-letter-spacing);
+    background-color: var(--cds-ui-03);
+    border-radius: 0.25rem;
+    padding: 0 var(--cds-spacing-02);
+  }
+
+  .bx--col > h2 {
+    font-size: var(--cds-productive-heading-06-font-size);
+    font-weight: var(--cds-productive-heading-06-font-weight);
+    letter-spacing: var(--cds-productive-heading-06-letter-spacing);
+    line-height: var(--cds-productive-heading-06-line-height);
+    padding-top: var(--cds-layout-03);
+    margin-bottom: var(--cds-layout-01);
+  }
+
+  .bx--col > h3 {
+    font-size: var(--cds-productive-heading-04-font-size);
+    font-weight: var(--cds-productive-heading-04-font-weight);
+    letter-spacing: var(--cds-productive-heading-04-letter-spacing);
+    line-height: var(--cds-productive-heading-04-line-height);
+    padding-top: var(--cds-layout-03);
+    margin-bottom: var(--cds-layout-02);
+  }
+
+  .bx--col > h4 {
+    font-size: var(--cds-productive-heading-02-font-size);
+    font-weight: var(--cds-productive-heading-02-font-weight);
+    letter-spacing: var(--cds-productive-heading-02-letter-spacing);
+    line-height: var(--cds-productive-heading-02-line-height);
+    padding-top: var(--cds-layout-04);
+    margin-bottom: var(--cds-layout-01);
+  }
+
+  .bx--col > p {
+    margin-bottom: var(--cds-layout-02);
+  }
+
+  .bx--content {
+    background: none;
+  }
+
+  @media (max-width: 1056px) {
+    .bx--side-nav ~ .bx--content {
+      margin-left: 0;
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
+
+    .bx--side-nav--expanded ~ .bx--content {
+      white-space: nowrap;
+      min-width: 28rem;
+    }
+  }
+
+  .platform-name {
+    display: flex;
+    align-items: baseline;
+  }
+
+  .platform-name code {
+    margin-left: var(--cds-spacing-02);
+    font-size: var(--cds-code-01-font-size);
+    font-weight: var(--cds-code-01-font-weight);
+    letter-spacing: var(--cds-code-01-letter-spacing);
+    line-height: var(--cds-code-01-line-height);
+    color: #c6c6c6;
+  }
+
+  @media (max-width: 580px) {
+    .platform-name code {
+      display: none;
+    }
+  }
+
+  @media (min-width: 1057px) {
+    .bx--side-nav__navigation {
+      z-index: 1;
+    }
+  }
+
+  .bx--side-nav__submenu[aria-expanded="true"] + .bx--side-nav__menu {
+    max-height: 120rem;
+  }
+</style>
+
+<svelte:body
+  on:mouseover="{async (e) => {
+    return;
+    if (process.env.NODE_ENV === 'development') return;
+    if (!e.target.href || !e.target
+        .getAttribute('class')
+        .includes('bx--side-nav__link')) return;
+    if (fetched.has(e.target.href)) return;
+    fetched.add(e.target.href);
+    await fetch(e.target.href);
+  }}" />
+
+<svelte:window bind:innerWidth />
+
+<Theme persist>
+  <Header
+    aria-label="Navigation"
+    href="/"
+    expandedByDefault="{true}"
+    bind:isSideNavOpen
+  >
+    <div slot="skip-to-content">
+      <SkipToContent />
+    </div>
+
+    <span slot="platform" class="platform-name">
+      Carbon Components Svelte <code>v{process.env.VERSION || ''}</code>
+    </span>
+
+    <HeaderUtilities>
+      <HeaderActionLink
+        icon="{{ render: LogoGithub20 }}"
+        href="https://github.com/IBM/carbon-components-svelte"
+        target="_blank"
+        rel="noopener"
+      />
+      <HeaderAction bind:isOpen>
+        <HeaderPanelLinks>
+          <HeaderPanelDivider>Carbon Svelte portfolio</HeaderPanelDivider>
+          <HeaderPanelLink href="https://github.com/IBM/carbon-icons-svelte">
+            Carbon Icons Svelte
+          </HeaderPanelLink>
+          <HeaderPanelLink
+            href="https://github.com/IBM/carbon-pictograms-svelte"
+          >
+            Carbon Pictograms Svelte
+          </HeaderPanelLink>
+          <HeaderPanelLink
+            href="https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte"
+          >
+            Carbon Charts Svelte
+          </HeaderPanelLink>
+          <HeaderPanelDivider>Resources</HeaderPanelDivider>
+          <HeaderPanelLink href="https://www.carbondesignsystem.com/">
+            Carbon Design System
+          </HeaderPanelLink>
+          <HeaderPanelLink href="https://www.ibm.com/design/language/">
+            IBM Design Language
+          </HeaderPanelLink>
+        </HeaderPanelLinks>
+      </HeaderAction>
+    </HeaderUtilities>
+  </Header>
+
+  <SideNav bind:isOpen="{isSideNavOpen}">
+    <SideNavItems>
+      <SideNavMenu expanded text="Components">
+        {#each components.children as child, i (child.path)}
+          <SideNavMenuItem
+            text="{child.title}"
+            href="{$url(child.path)}"
+            isSelected="{$isActive($url(child.path))}"
+          />
+        {/each}
+      </SideNavMenu>
+    </SideNavItems>
+  </SideNav>
+  <slot />
+</Theme>

docs/src/pages/components/Accordion.svx

@@ -0,0 +1,72 @@
+<script>
+  import {
+    Accordion,
+    AccordionItem,
+  } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default
+
+<Accordion>
+  <AccordionItem title="Title 1">
+    Content 1
+  </AccordionItem>
+  <AccordionItem title="Title 2">
+    Content 2
+  </AccordionItem>
+  <AccordionItem title="Title 3">
+    Content 3
+  </AccordionItem>
+</Accordion>
+
+### Chevron aligned left
+
+<Accordion align="start">
+  <AccordionItem title="Title 1">
+    Content 1
+  </AccordionItem>
+  <AccordionItem title="Title 2">
+    Content 2
+  </AccordionItem>
+  <AccordionItem title="Title 3">
+    Content 3
+  </AccordionItem>
+</Accordion>
+
+### Custom title slot
+
+<Accordion>
+  <AccordionItem>
+    <h5 slot="title" style="color: red;">Custom title slot</h5>
+    Content 1
+  </AccordionItem>
+  <AccordionItem title="Title 2">
+    Content 2
+  </AccordionItem>
+  <AccordionItem title="Title 3">
+    Content 3
+  </AccordionItem>
+</Accordion>
+
+### First item open
+
+<Accordion>
+  <AccordionItem title="Title 1" open>
+    Content 1
+  </AccordionItem>
+  <AccordionItem title="Title 2">
+    Content 2
+  </AccordionItem>
+  <AccordionItem title="Title 3">
+    Content 3
+  </AccordionItem>
+</Accordion>
+
+### Skeleton
+
+<Accordion skeleton count={3} />
+
+### Skeleton (closed)
+
+<Accordion skeleton open={false} count={3} />

docs/src/pages/components/Breadcrumb.svx

@@ -0,0 +1,26 @@
+<script>
+  import {
+    Breadcrumb,
+    BreadcrumbItem,
+  } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default
+
+<Breadcrumb>
+  <BreadcrumbItem href="/">Dashboard</BreadcrumbItem>
+  <BreadcrumbItem href="/reports">Annual reports</BreadcrumbItem>
+  <BreadcrumbItem href="/reports/2019" isCurrentPage>2019</BreadcrumbItem>
+</Breadcrumb>
+
+### No trailing slash
+
+<Breadcrumb noTrailingSlash>
+  <BreadcrumbItem href="/">Home</BreadcrumbItem>
+  <BreadcrumbItem href="/profile" isCurrentPage>Profile</BreadcrumbItem>
+</Breadcrumb>
+
+### Skeleton
+
+<Breadcrumb skeleton count={3} />

docs/src/pages/components/Button.svx

@@ -0,0 +1,71 @@
+---
+description: High-level description
+---
+
+<script>
+  import { Button } from "carbon-components-svelte";
+  import Add16 from "carbon-icons-svelte/lib/Add16";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Primary button
+
+<Button>Primary button</Button>
+
+### Secondary button
+
+<Button kind="secondary">Secondary button</Button>
+
+### Tertiary button
+
+<Button kind="tertiary">Tertiary button</Button>
+
+### Ghost button
+
+<Button kind="ghost">Ghost button</Button>
+
+### Danger button
+
+<Button kind="danger">Danger button</Button>
+
+### Button with icon
+
+<Button icon={Add16}>With icon</Button>
+
+### Icon-only button
+
+<Button icon={Add16} hasIconOnly tooltipPosition="bottom" tooltipAlignment="center" iconDescription="Tooltip text" />
+
+### Link button
+
+<Button href="#">Link button</Button>
+
+### Custom element
+
+<Button as let:props>
+  <p {...props}>Custom element</p>
+</Button>
+
+### Field button
+
+<Button size="field">Primary</Button>
+<Button size="field" kind="secondary">Secondary</Button>
+<Button size="field" kind="tertiary">Tertiary</Button>
+<Button size="field" kind="ghost">Ghost</Button>
+<Button size="field" kind="danger">Danger</Button>
+
+### Small button
+
+<Button size="small">Primary</Button>
+<Button size="small" kind="secondary">Secondary</Button>
+<Button size="small" kind="tertiary">Tertiary</Button>
+<Button size="small" kind="ghost">Ghost</Button>
+<Button size="small" kind="danger">Danger</Button>
+
+### Disabled button
+
+<Button disabled>Disabled button</Button>
+
+### Skeleton
+
+<Button skeleton />

docs/src/pages/components/ButtonSet.svx

@@ -0,0 +1,22 @@
+---
+source: Button/ButtonSet.svelte
+---
+
+<script>
+  import { Button, ButtonSet } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default (juxtaposed)
+
+<ButtonSet>
+  <Button kind="secondary">Cancel</Button>
+  <Button>Submit</Button>
+</ButtonSet>
+
+### Stacked
+
+<ButtonSet stacked>
+  <Button>Login</Button>
+  <Button kind="ghost">Sign up</Button>
+</ButtonSet>

docs/src/pages/components/Checkbox.svx

@@ -0,0 +1,28 @@
+<script>
+  import { Checkbox } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default (unchecked)
+
+<Checkbox labelText="Label text" />
+
+### Checked
+
+<Checkbox labelText="Label text" checked />
+
+### Indeterminate
+
+<Checkbox labelText="Label text" indeterminate />
+
+### Hidden label
+
+<Checkbox labelText="Label text" hideLabel />
+
+### Disabled
+
+<Checkbox labelText="Label text" disabled />
+
+### Skeleton
+
+<Checkbox skeleton />

docs/src/pages/components/ClickableTile.svx

@@ -0,0 +1,16 @@
+---
+source: Tile/ClickableTile.svelte
+---
+
+<script>
+  import { ClickableTile } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default
+
+<ClickableTile href="https://www.carbondesignsystem.com/">Carbon Design System</ClickableTile>
+
+### Light variant
+
+<ClickableTile light href="https://www.carbondesignsystem.com/">Carbon Design System</ClickableTile>

docs/src/pages/components/CodeSnippet.svx

@@ -0,0 +1,44 @@
+<script>
+  import { CodeSnippet, InlineNotification } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+
+  let code = `// helpers.js
+  
+export function multiply(a: number, b: number) {
+  return a * b;
+}
+
+export function divide(a: number, b: number) {
+  return a / b;
+}
+
+export function add(a: number, b: number) {
+  return a + b;
+}
+
+export function subtract(a: number, b: number) {
+  return a - b;
+}`;
+</script>
+
+<InlineNotification svx-ignore lowContrast title="Note:" subtitle="By design, the copy button does not copy text to the clipboard. You will need to write your own logic." kind="info" hideCloseButton />
+
+### Default (single-line)
+
+<CodeSnippet>yarn add -D carbon-components-svelte</CodeSnippet>
+
+### Inline
+
+<CodeSnippet type="inline">rm -rf node_modules/</CodeSnippet>
+
+### Multi-line
+
+<CodeSnippet type="multi" {code} />
+
+### Hidden copy button
+
+<CodeSnippet type="multi" {code} hideCopyButton />
+
+### Skeleton
+
+<CodeSnippet skeleton />

docs/src/pages/components/ComboBox.svx

@@ -0,0 +1,53 @@
+<script>
+  import { ComboBox } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default
+
+<ComboBox titleText="Contact" placeholder="Select contact method"
+items={[
+  {id: "0", text: "Slack"},
+  {id: "1", text: "Email"},
+  {id: "2", text: "Fax"}
+  ]}  />
+
+### Selected index
+
+<ComboBox titleText="Contact" placeholder="Select contact method"
+selectedIndex={1}
+items={[
+  {id: "0", text: "Slack"},
+  {id: "1", text: "Email"},
+  {id: "2", text: "Fax"}
+  ]}  />
+
+### Extra-large size
+
+<ComboBox titleText="Contact" placeholder="Select contact method"
+size="xl"
+items={[
+  {id: "0", text: "Slack"},
+  {id: "1", text: "Email"},
+  {id: "2", text: "Fax"}
+  ]}  />
+
+### Small size
+
+<ComboBox titleText="Contact" placeholder="Select contact method"
+size="sm"
+items={[
+  {id: "0", text: "Slack"},
+  {id: "1", text: "Email"},
+  {id: "2", text: "Fax"}
+  ]}  />
+
+### Disabled
+
+<ComboBox titleText="Contact" placeholder="Select contact method"
+disabled
+items={[
+  {id: "0", text: "Slack"},
+  {id: "1", text: "Email"},
+  {id: "2", text: "Fax"}
+  ]}  />

docs/src/pages/components/ComposedModal.svx

@@ -0,0 +1,7 @@
+<script>
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Composed modal
+
+<FileSource src="/framed/Modal/ComposedModal" />

docs/src/pages/components/ContentSwitcher.svx

@@ -0,0 +1,39 @@
+<script>
+  import { ContentSwitcher, Switch } from "carbon-components-svelte";
+  import Add16 from "carbon-icons-svelte/lib/Add16";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default
+
+<ContentSwitcher>
+  <Switch text="Switch 1" />
+  <Switch text="Switch 2" />
+  <Switch text="Switch 3" />
+</ContentSwitcher>
+
+### Light variant
+
+<ContentSwitcher light>
+  <Switch text="Switch 1" />
+  <Switch text="Switch 2" />
+  <Switch text="Switch 3" />
+</ContentSwitcher>
+
+### Custom switch slot
+
+<ContentSwitcher>
+  <Switch>
+    <div style="display: flex; align-items: center;">
+        Third section <Add16 style="margin-left: .25rem;" />
+     </div>
+  </Switch>
+  <Switch text="Switch 2" />
+</ContentSwitcher>
+
+### Disabled
+
+<ContentSwitcher>
+  <Switch text="Switch 1" disabled />
+  <Switch text="Switch 2" disabled />
+</ContentSwitcher>

docs/src/pages/components/CopyButton.svx

@@ -0,0 +1,14 @@
+<script>
+  import { CopyButton, InlineNotification } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+<InlineNotification svx-ignore lowContrast title="Note:" subtitle="By design, the copy button does not copy text to the clipboard. You will need to write your own logic." kind="info" hideCloseButton />
+
+### Default
+
+<CopyButton on:click />
+
+### Custom feedback
+
+<CopyButton on:click feedback="Copied to clipboard" />

docs/src/pages/components/DataTable.svx

@@ -0,0 +1,346 @@
+<script>
+  import { DataTable, DataTableSkeleton } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default
+
+<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"
+    },
+  ]}"
+/>
+
+### With title, description
+
+<DataTable 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"
+    },
+  ]}"
+/>
+
+### Zebra stripes
+
+<DataTable zebra
+  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"
+  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"
+    },
+  ]}"
+/>
+
+### Compact rows
+
+<DataTable size="compact"
+  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"
+    },
+  ]}"
+/>
+
+### Sortable
+
+<DataTable sortable
+  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"
+    },
+  ]}"
+/>
+
+### Skeleton
+
+<DataTableSkeleton />
+
+### Skeleton with headers, row count
+
+<DataTableSkeleton headers={["Name", "Protocol", "Port", "Rule"]} rows={10} />
+
+### Skeleton without header, toolbar
+
+<DataTableSkeleton showHeader={false} showToolbar={false} />

docs/src/pages/components/DatePicker.svx

@@ -0,0 +1,56 @@
+<script>
+  import { DatePicker, DatePickerSkeleton, DatePickerInput } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default (simple)
+
+<DatePicker>
+  <DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
+</DatePicker>
+
+### Hidden label
+
+<DatePicker>
+  <DatePickerInput hideLabel labelText="Date of birth" placeholder="mm/dd/yyyy" />
+</DatePicker>
+
+### Light variant
+
+<DatePicker light>
+  <DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
+</DatePicker>
+
+### Extra-large size
+
+<DatePicker>
+  <DatePickerInput size="xl" labelText="Date of birth" placeholder="mm/dd/yyyy" />
+</DatePicker>
+
+### Small size
+
+<DatePicker>
+  <DatePickerInput size="sm" labelText="Date of birth" placeholder="mm/dd/yyyy" />
+</DatePicker>
+
+### Invalid state
+
+<DatePicker>
+  <DatePickerInput invalid invalidText="Invalid date" labelText="Date of birth" placeholder="mm/dd/yyyy" />
+</DatePicker>
+
+### Disabled state
+
+<DatePicker>
+  <DatePickerInput disabled labelText="Date of birth" placeholder="mm/dd/yyyy" />
+</DatePicker>
+
+### Single
+
+<DatePicker datePickerType="single">
+  <DatePickerInput labelText="Schedule a meeting" placeholder="mm/dd/yyyy" />
+</DatePicker>
+
+### Skeleton
+
+<DatePickerSkeleton />

docs/src/pages/components/Dropdown.svx

@@ -0,0 +1,32 @@
+<script>
+  import { Dropdown, DropdownSkeleton } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default
+
+<Dropdown titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
+  {id: "1", text: "Email"},
+  {id: "2", text: "Fax"}]}" />
+
+### Light variant
+
+<Dropdown light titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
+  {id: "1", text: "Email"},
+  {id: "2", text: "Fax"}]}" />
+
+### Inline type
+
+<Dropdown type="inline" titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
+  {id: "1", text: "Email"},
+  {id: "2", text: "Fax"}]}" />
+
+### Disabled state
+
+<Dropdown disabled titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
+  {id: "1", text: "Email"},
+  {id: "2", text: "Fax"}]}" />
+
+### Skeleton
+
+<DropdownSkeleton />

docs/src/pages/components/ExpandableTile.svx

@@ -0,0 +1,29 @@
+---
+source: Tile/ExpandableTile.svelte
+---
+
+<script>
+  import { ExpandableTile } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default (unexpanded)
+
+<ExpandableTile>
+  <div slot="above" style="height: 10rem">Above the fold content here</div>
+  <div slot="below" style="height: 10rem">Below the fold content here</div>
+</ExpandableTile>
+
+### Expanded
+
+<ExpandableTile expanded>
+  <div slot="above" style="height: 10rem">Above the fold content here</div>
+  <div slot="below" style="height: 10rem">Below the fold content here</div>
+</ExpandableTile>
+
+### Light variant
+
+<ExpandableTile light>
+  <div slot="above" style="height: 10rem">Above the fold content here</div>
+  <div slot="below" style="height: 10rem">Below the fold content here</div>
+</ExpandableTile>

docs/src/pages/components/FileUploader.svx

@@ -0,0 +1,32 @@
+<script>
+  import { FileUploaderButton, FileUploader, FileUploaderDropContainer, FileUploaderItem, FileUploaderSkeleton } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### File uploader (button-only)
+
+<FileUploaderButton labelText="Add files" />
+
+### File uploader
+
+<FileUploader multiple labelTitle="Upload files" buttonLabel="Add files" labelDescription="Only JPEG files are accepted." accept="{['.jpg', '.jpeg']}" status="complete" />
+
+### Item (uploading)
+
+<FileUploaderItem name="README.md" status="uploading" />
+
+### Item (complete)
+
+<FileUploaderItem name="README.md" status="complete" />
+
+### Item (invalid)
+
+<FileUploaderItem invalid name="README.md" status="edit" />
+
+### Drop container
+
+<FileUploaderDropContainer labelText="Drag and drop files here or click to upload" multiple />
+
+### Skeleton
+
+<FileUploaderSkeleton />

docs/src/pages/components/FluidForm.svx

@@ -0,0 +1,19 @@
+<script>
+  import { FluidForm, FormGroup, TextInput, PasswordInput, Button,} from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Fluid form
+
+<FluidForm>
+  <TextInput
+    labelText="User name"
+    placeholder="Enter user name..."
+    required />
+  <PasswordInput
+    required
+    type="password"
+    labelText="Password"
+    placeholder="Enter password..."
+  />
+</FluidForm>

docs/src/pages/components/Form.svx

@@ -0,0 +1,58 @@
+<script>
+  import { Form,
+    FormGroup,
+    Checkbox,
+    RadioButtonGroup,
+    RadioButton,
+    Select,
+    SelectItem,
+    Button,} from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Form
+
+<Form on:submit>
+  <FormGroup legendText="Checkboxes">
+    <Checkbox id="checkbox-0" labelText="Checkbox Label" checked />
+    <Checkbox id="checkbox-1" labelText="Checkbox Label" />
+    <Checkbox id="checkbox-2" labelText="Checkbox Label" disabled />
+  </FormGroup>
+  <FormGroup legendText="Radio buttons">
+    <RadioButtonGroup
+      name="radio-button-group"
+      selected="default-selected"
+    >
+      <RadioButton
+        id="radio-1"
+        value="standard"
+        labelText="Standard Radio Button"
+      />
+      <RadioButton
+        id="radio-2"
+        value="default-selected"
+        labelText="Default Selected Radio Button"
+      />
+      <RadioButton
+        id="radio-4"
+        value="disabled"
+        labelText="Disabled Radio Button"
+        disabled
+      />
+    </RadioButtonGroup>
+  </FormGroup>
+  <FormGroup>
+  <Select id="select-1" labelText="Select menu" value="placeholder-item">
+    <SelectItem
+      disabled
+      hidden
+      value="placeholder-item"
+      text="Choose an option"
+    />
+    <SelectItem value="option-1" text="Option 1" />
+    <SelectItem value="option-2" text="Option 2" />
+    <SelectItem value="option-3" text="Option 3" />
+  </Select>
+  </FormGroup>
+  <Button type="submit">Submit</Button>
+</Form>

docs/src/pages/components/Grid.svx

@@ -0,0 +1,31 @@
+<script>
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default
+
+<FileSource src="/framed/Grid/Grid" />
+
+### Full width
+
+<FileSource src="/framed/Grid/FullWidthGrid" />
+
+### Narrow
+
+<FileSource src="/framed/Grid/NarrowGrid" />
+
+### Condensed
+
+<FileSource src="/framed/Grid/CondensedGrid" />
+
+### Responsive
+
+<FileSource src="/framed/Grid/ResponsiveGrid" />
+
+### Offset columns
+
+<FileSource src="/framed/Grid/OffsetColumns" />
+
+### Aspect ratio columns
+
+<FileSource src="/framed/Grid/AspectRatioColumns" />

docs/src/pages/components/Icon.svx

@@ -0,0 +1,22 @@
+<script>
+  import { Icon } from "carbon-components-svelte";
+  import Add16 from "carbon-icons-svelte/lib/Add16";
+  import Add20 from "carbon-icons-svelte/lib/Add20";
+  import Add24 from "carbon-icons-svelte/lib/Add24";
+  import Add32 from "carbon-icons-svelte/lib/Add32";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default
+
+<Icon render={Add16} />
+<Icon render={Add20} />
+<Icon render={Add24} />
+<Icon render={Add32} />
+
+### Skeleton
+
+<Icon skeleton render={Add16} />
+<Icon skeleton size={20} render={Add20} />
+<Icon skeleton size={24} render={Add24} />
+<Icon skeleton size={32} render={Add32} />

docs/src/pages/components/InlineLoading.svx

@@ -0,0 +1,19 @@
+<script>
+  import { InlineLoading } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default
+
+<InlineLoading />
+
+### With description
+
+<InlineLoading description="Loading metrics..." />
+
+### Status states
+
+<InlineLoading status="active" />
+<InlineLoading status="inactive" />
+<InlineLoading status="finished" />
+<InlineLoading status="error" />

docs/src/pages/components/InlineNotification.svx

@@ -0,0 +1,42 @@
+---
+source: Notification/InlineNotification.svelte
+---
+
+<script>
+  import { InlineNotification, NotificationActionButton } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default (error)
+
+<InlineNotification on:close />
+
+### Hidden close button
+
+<InlineNotification hideCloseButton kind="warning" title="Upcoming scheduled maintenance" />
+
+### With actions
+
+<InlineNotification kind="warning" title="Upcoming scheduled maintenance">
+  <div slot="actions">
+    <NotificationActionButton>Learn more</NotificationActionButton>
+  </div>
+</InlineNotification>
+
+### Notification variants
+
+<InlineNotification kind="error" />
+<InlineNotification kind="info" />
+<InlineNotification kind="info-square" />
+<InlineNotification kind="success" />
+<InlineNotification kind="warning" />
+<InlineNotification kind="warning-alt" />
+
+### Low contrast
+
+<InlineNotification lowContrast kind="error" />
+<InlineNotification lowContrast kind="info" />
+<InlineNotification lowContrast kind="info-square" />
+<InlineNotification lowContrast kind="success" />
+<InlineNotification lowContrast kind="warning" />
+<InlineNotification lowContrast kind="warning-alt" />

docs/src/pages/components/Link.svx

@@ -0,0 +1,23 @@
+<script>
+  import { Link } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default
+
+<Link href="https://www.carbondesignsystem.com/">Carbon Design System</Link>
+
+### Inline variant
+
+<div>
+  Visit the
+  <Link inline href="https://www.carbondesignsystem.com/">Carbon Design System</Link>.
+</div>
+
+### Disabled
+
+<Link disabled href="https://www.carbondesignsystem.com/">Carbon Design System</Link>
+
+### Visited styles
+
+<Link visited href="https://www.carbondesignsystem.com/">Carbon Design System</Link>

docs/src/pages/components/Loading.svx

@@ -0,0 +1,16 @@
+<script>
+  import { Loading } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default (with overlay)
+
+<FileSource src="/framed/Loading/Loading" />
+
+### No overlay
+
+<Loading withOverlay={false} />
+
+### Small size
+
+<Loading withOverlay={false} small />

docs/src/pages/components/Modal.svx

@@ -0,0 +1,34 @@
+<script>
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default (transactional)
+
+<FileSource src="/framed/Modal/Modal" />
+
+### Danger modal
+
+<FileSource src="/framed/Modal/DangerModal" />
+
+### Passive modal
+
+<FileSource src="/framed/Modal/PassiveModal" />
+
+### Extra-small size
+
+<FileSource src="/framed/Modal/ModalExtraSmall" />
+
+### Small size
+
+<FileSource src="/framed/Modal/ModalSmall" />
+
+### Large size
+
+<FileSource src="/framed/Modal/ModalLarge" />
+
+### Prevent close on outside click
+
+`preventCloseOnClickOutside` prevents the modal from being closed when clicking outside of an open modal. This prop is intended to be used for transactional modals.
+
+<FileSource src="/framed/Modal/ModalPreventOutsideClick" />
+

docs/src/pages/components/MultiSelect.svx

@@ -0,0 +1,36 @@
+<script>
+  import { MultiSelect } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default
+
+<MultiSelect titleText="Contact" label="Select contact methods..."
+    items="{[{id: "0", text: "Slack"},
+    {id: "1", text: "Email"},
+    {id: "2", text: "Fax"}]}" selectedIds="{["0", "1"]}"
+  />
+
+### Light variant
+
+<MultiSelect light titleText="Contact" label="Select contact methods..."
+    items="{[{id: "0", text: "Slack"},
+    {id: "1", text: "Email"},
+    {id: "2", text: "Fax"}]}"
+  />
+
+### Inline type
+
+<MultiSelect type="inline" titleText="Contact" label="Select contact methods..."
+    items="{[{id: "0", text: "Slack"},
+    {id: "1", text: "Email"},
+    {id: "2", text: "Fax"}]}"
+  />
+
+### Filterable
+
+<MultiSelect filterable titleText="Contact" placeholder="Filter contact methods..."
+    items="{[{id: "0", text: "Slack"},
+    {id: "1", text: "Email"},
+    {id: "2", text: "Fax"}]}"
+  />

docs/src/pages/components/NumberInput.svx

@@ -0,0 +1,52 @@
+<script>
+  import { NumberInput, NumberInputSkeleton } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default
+
+<NumberInput label="Clusters" />
+
+### With helper text
+
+<NumberInput label="Clusters" helperText="Clusters provisioned in your region" />
+
+### Minimum and maximum values
+
+<NumberInput min="{4}" max="{20}" value="{4}" invalidText="Number must be between 4 and 20." helperText="Clusters provisioned in your region" label="Clusters (4 min, 20 max)" />
+
+### Hidden label
+
+<NumberInput hideLabel label="Clusters" />
+
+### Light variant
+
+<NumberInput light label="Clusters" />
+
+### Mobile variant
+
+<NumberInput mobile label="Clusters" />
+
+### Extra-large size
+
+<NumberInput size="xl" label="Clusters" />
+
+### Small size
+
+<NumberInput size="sm" label="Clusters" />
+
+### Invalid state
+
+<NumberInput invalid invalidText="An error occurred" label="Clusters" />
+
+### Disabled state
+
+<NumberInput disabled label="Clusters" />
+
+### Skeleton
+
+<NumberInputSkeleton />
+
+### Skeleton without label
+
+<NumberInputSkeleton hideLabel />

docs/src/pages/components/OrderedList.svx

@@ -0,0 +1,46 @@
+<script>
+  import { OrderedList, ListItem, Link } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default
+
+<OrderedList>
+  <ListItem>Ordered list item</ListItem>
+  <ListItem>Ordered list item</ListItem>
+  <ListItem>Ordered list item</ListItem>
+</OrderedList>
+
+### With links
+
+<OrderedList>
+  <ListItem>
+    <Link href="#">Ordered list item</Link>
+  </ListItem>
+  <ListItem>
+    <Link href="#">Ordered list item</Link>
+  </ListItem>
+  <ListItem>
+    <Link href="#">Ordered list item</Link>
+  </ListItem>
+</OrderedList>
+
+### Nested
+
+<OrderedList>
+  <ListItem>
+    Ordered list level 1
+    <OrderedList nested>
+      <ListItem>Ordered list level 2</ListItem>
+      <ListItem>
+        Ordered list level 3
+        <OrderedList nested>
+          <ListItem>Ordered list level 3</ListItem>
+          <ListItem>Ordered list level 3</ListItem>
+        </OrderedList>
+      </ListItem>
+    </OrderedList>
+  </ListItem>
+  <ListItem>Ordered list level 1</ListItem>
+  <ListItem>Ordered list level 1</ListItem>
+</OrderedList>

docs/src/pages/components/OverflowMenu.svx

@@ -0,0 +1,47 @@
+<script>
+  import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default
+
+<OverflowMenu>
+  <OverflowMenuItem text="Manage credentials" />
+  <OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
+  <OverflowMenuItem danger text="Delete service" />
+</OverflowMenu>
+
+### Flipped
+
+<OverflowMenu open flipped>
+  <OverflowMenuItem text="Manage credentials" />
+  <OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
+  <OverflowMenuItem danger text="Delete service" />
+</OverflowMenu>
+
+### Menu direction top
+
+<OverflowMenu flipped direction="top">
+  <OverflowMenuItem text="Manage credentials" />
+  <OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
+  <OverflowMenuItem danger text="Delete service" />
+</OverflowMenu>
+
+### Custom primary focus
+
+By default, the first overflow menu item is focused when opening the dropdown.
+
+<OverflowMenu>
+  <OverflowMenuItem text="Manage credentials" />
+  <OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
+  <OverflowMenuItem primaryFocus danger text="Delete service" />
+</OverflowMenu>
+
+### Custom trigger slot
+
+<OverflowMenu style="width: auto;">
+  <div slot="menu" style="padding: 1rem; color: red;">Custom trigger</div>
+  <OverflowMenuItem text="Manage credentials" />
+  <OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
+  <OverflowMenuItem danger text="Delete service" />
+</OverflowMenu>

docs/src/pages/components/Pagination.svx

@@ -0,0 +1,24 @@
+<script>
+  import { Pagination, PaginationSkeleton } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default
+
+<Pagination totalItems={102} pageSizes="{[10, 15, 20]}" />
+
+### Current page
+
+<Pagination totalItems={102} page={4} />
+
+### Custom page sizes
+
+<Pagination totalItems={102} pageSizes="{[16, 36, 99]}" pageSize="{36}" />
+
+### Hidden page input
+
+<Pagination totalItems={102} pageInputDisabled />
+
+### Skeleton
+
+<PaginationSkeleton />

docs/src/pages/components/PaginationNav.svx

@@ -0,0 +1,12 @@
+<script>
+  import { PaginationNav } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default
+
+<PaginationNav />
+
+### Loopable
+
+<PaginationNav total={3} loop />

docs/src/pages/components/PasswordInput.svx

@@ -0,0 +1,38 @@
+<script>
+  import { PasswordInput } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default
+
+<PasswordInput labelText="Password" placeholder="Enter password..." />
+
+### Password is visible
+
+Set prop `type` to `"text"` to toggle password visibility.
+
+<PasswordInput labelText="Password" type="text" placeholder="Enter password..." value="as_lta0890sdfpo__!9901" />
+
+### Hidden label
+
+<PasswordInput hideLabel labelText="Password" placeholder="Enter password..." />
+
+### Light variant
+
+<PasswordInput light labelText="Password" placeholder="Enter password..." />
+
+### Extra-large size
+
+<PasswordInput size="xl" labelText="Password" placeholder="Enter password..." />
+
+### Small size
+
+<PasswordInput size="sm" labelText="Password" placeholder="Enter password..." />
+
+### Invalid state
+
+<PasswordInput invalid invalidText="Incorrect user name or password." labelText="Password" placeholder="Enter password..." />
+
+### Disabled state
+
+<PasswordInput disabled labelText="Password" placeholder="Enter password..." />

docs/src/pages/components/ProgressIndicator.svx

@@ -0,0 +1,59 @@
+<script>
+  import { ProgressIndicator, ProgressStep, ProgressIndicatorSkeleton } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default (horizontal)
+
+<ProgressIndicator>
+  <ProgressStep
+    label="Really long label"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+  <ProgressStep
+    label="Really long label"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+  <ProgressStep
+    label="Really long label"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+</ProgressIndicator>
+
+### Spaced-equally
+
+<ProgressIndicator spaceEqually>
+  <ProgressStep
+    label="Really long label"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+  <ProgressStep
+    label="Really long label"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+  <ProgressStep
+    label="Really long label"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+</ProgressIndicator>
+
+### Vertical
+
+<ProgressIndicator vertical>
+  <ProgressStep
+    label="Really long label"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+  <ProgressStep
+    label="Really long label"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+  <ProgressStep
+    label="Really long label"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+</ProgressIndicator>
+
+### Skeleton
+
+<ProgressIndicatorSkeleton />

docs/src/pages/components/RadioButton.svx

@@ -0,0 +1,54 @@
+<script>
+  import { FormGroup, RadioButton, RadioButtonSkeleton, RadioButtonGroup } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default
+
+<FormGroup legendText="Storage tier (disk)">
+  <RadioButtonGroup selected="standard">
+    <RadioButton labelText="Free (1 GB)" value="free" />
+    <RadioButton labelText="Standard (10 GB)" value="standard" />
+    <RadioButton labelText="Pro (128 GB)" value="pro" />
+  </RadioButtonGroup>
+</FormGroup>
+
+### Label text aligned left
+
+<FormGroup legendText="Storage tier (disk)">
+  <RadioButtonGroup labelPosition="left" selected="standard">
+    <RadioButton labelText="Free (1 GB)" value="free" />
+    <RadioButton labelText="Standard (10 GB)" value="standard" />
+    <RadioButton labelText="Pro (128 GB)" value="pro" />
+  </RadioButtonGroup>
+</FormGroup>
+
+### Vertical orientation
+
+<FormGroup legendText="Storage tier (disk)">
+  <RadioButtonGroup orientation="vertical" selected="standard">
+    <RadioButton labelText="Free (1 GB)" value="free" />
+    <RadioButton labelText="Standard (10 GB)" value="standard" />
+    <RadioButton labelText="Pro (128 GB)" value="pro" />
+  </RadioButtonGroup>
+</FormGroup>
+
+### Skeleton
+
+<FormGroup legendText="Storage tier (disk)">
+  <RadioButtonGroup>
+    <RadioButtonSkeleton />
+    <RadioButtonSkeleton />
+    <RadioButtonSkeleton />
+  </RadioButtonGroup>
+</FormGroup>
+
+### Skeleton (vertical orientation)
+
+<FormGroup legendText="Storage tier (disk)">
+  <RadioButtonGroup orientation="vertical">
+    <RadioButtonSkeleton />
+    <RadioButtonSkeleton />
+    <RadioButtonSkeleton />
+  </RadioButtonGroup>
+</FormGroup>

docs/src/pages/components/RadioTile.svx

@@ -0,0 +1,32 @@
+<script>
+  import { TileGroup, RadioTile } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default
+
+<TileGroup legend="Service pricing tiers">
+  <RadioTile value="0" checked>
+    Lite plan
+  </RadioTile>
+  <RadioTile value="1">
+    Standard plan
+  </RadioTile>
+  <RadioTile value="2">
+    Plus plan
+  </RadioTile>
+</TileGroup>
+
+### Light variant
+
+<TileGroup legend="Service pricing tiers">
+  <RadioTile value="0" checked>
+    Lite plan
+  </RadioTile>
+  <RadioTile value="1">
+    Standard plan
+  </RadioTile>
+  <RadioTile value="2">
+    Plus plan
+  </RadioTile>
+</TileGroup>

docs/src/pages/components/Search.svx

@@ -0,0 +1,28 @@
+<script>
+  import { Search } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default
+
+<Search />
+
+### Default value
+
+<Search placeholder="Search catalog..." value="Cloud functions" />
+
+### Light variant
+
+<Search light />
+
+### Large size
+
+<Search size="lg" />
+
+### Small size
+
+<Search size="sm" />
+
+### Skeleton
+
+<Search skeleton />

docs/src/pages/components/Select.svx

@@ -0,0 +1,58 @@
+<script>
+  import { Select, SelectItem, SelectItemGroup, SelectSkeleton } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default
+
+<Select labelText="Carbon theme" selected="g10" >
+  <SelectItem value="white" text="White" />
+  <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g90" text="Gray 90" />
+  <SelectItem value="g100" text="Gray 100" />
+</Select>
+
+### Item groups
+
+<Select labelText="Carbon theme" selected="g10" >
+  <SelectItem value="0" text="Select a theme" disabled hidden />
+  <SelectItemGroup label="Light theme">
+    <SelectItem value="white" text="White" />
+    <SelectItem value="g10" text="Gray 10" />
+  </SelectItemGroup>
+  <SelectItemGroup label="Dark theme">
+    <SelectItem value="g90" text="Gray 90" />
+    <SelectItem value="g100" text="Gray 100" />
+  </SelectItemGroup>
+</Select>
+
+### Light variant
+
+<Select light labelText="Carbon theme" selected="g10" >
+  <SelectItem value="white" text="White" />
+  <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g90" text="Gray 90" />
+  <SelectItem value="g100" text="Gray 100" />
+</Select>
+
+### Inline type
+
+<Select inline labelText="Carbon theme" selected="g10" >
+  <SelectItem value="white" text="White" />
+  <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g90" text="Gray 90" />
+  <SelectItem value="g100" text="Gray 100" />
+</Select>
+
+### Disabled
+
+<Select disabled labelText="Carbon theme" selected="g10" >
+  <SelectItem value="white" text="White" />
+  <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g90" text="Gray 90" />
+  <SelectItem value="g100" text="Gray 100" />
+</Select>
+
+### Skeleton
+
+<SelectSkeleton />

docs/src/pages/components/SelectableTile.svx

@@ -0,0 +1,32 @@
+<script>
+  import { TileGroup, SelectableTile } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Multi-selectable tiles
+
+<div role="group" aria-label="selectable tiles">
+  <SelectableTile selected>
+    Multi-select Tile
+  </SelectableTile>
+  <SelectableTile selected>
+    Multi-select Tile
+  </SelectableTile>
+  <SelectableTile>
+    Multi-select Tile
+  </SelectableTile>
+</div>
+
+### Light variant
+
+<div role="group" aria-label="selectable tiles">
+  <SelectableTile light selected>
+    Multi-select Tile
+  </SelectableTile>
+  <SelectableTile light selected>
+    Multi-select Tile
+  </SelectableTile>
+  <SelectableTile light>
+    Multi-select Tile
+  </SelectableTile>
+</div>

docs/src/pages/components/SkeletonPlaceholder.svx

@@ -0,0 +1,12 @@
+<script>
+  import { SkeletonPlaceholder } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default
+
+<SkeletonPlaceholder />
+
+### Custom size
+
+<SkeletonPlaceholder style="height: 12rem; width: 12rem;" />

docs/src/pages/components/SkeletonText.svx

@@ -0,0 +1,24 @@
+<script>
+  import { SkeletonText } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default
+
+<SkeletonText />
+
+### Heading variant
+
+<SkeletonText heading />
+
+### Heading variant
+
+<SkeletonText heading />
+
+### Paragraph variant
+
+<SkeletonText paragraph />
+
+### Paragraph with max width
+
+<SkeletonText paragraph width="50%" />

docs/src/pages/components/Slider.svx

@@ -0,0 +1,28 @@
+<script>
+  import { Slider, SliderSkeleton } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default
+
+<Slider />
+
+### Custom minimum, maximum values
+
+<Slider labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100} />
+
+### Custom step value
+
+<Slider labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100} step={10} />
+
+### Light variant
+
+<Slider light labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100}  step={10} />
+
+### Skeleton
+
+<SliderSkeleton />
+
+### Skeleton (hidden label)
+
+<SliderSkeleton hideLabel />

docs/src/pages/components/StructuredList.svx

@@ -0,0 +1,93 @@
+<script>
+  import { StructuredList, StructuredListSkeleton, StructuredListBody, StructuredListHead, StructuredListCell ,StructuredListRow, StructuredListInput } from "carbon-components-svelte";
+  import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default (read-only)
+
+<StructuredList>
+  <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">
+  <StructuredListHead>
+    <StructuredListRow head>
+      <StructuredListCell head>ColumnA</StructuredListCell>
+      <StructuredListCell head>ColumnB</StructuredListCell>
+      <StructuredListCell head>ColumnC</StructuredListCell>
+      <StructuredListCell head>{''}</StructuredListCell>
+    </StructuredListRow>
+  </StructuredListHead>
+  <StructuredListBody>
+    {#each [1, 2, 3] as item}
+      <StructuredListRow label for="row-{item}">
+        <StructuredListCell>Row {item}</StructuredListCell>
+        <StructuredListCell>Row {item}</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>
+        <StructuredListInput
+          id="row-{item}"
+          value="row-{item}-value"
+          title="row-{item}-title"
+          name="row-{item}-name"
+        />
+        <StructuredListCell>
+          <CheckmarkFilled16
+            class="bx--structured-list-svg"
+            aria-label="select an option"
+            title="select an option"
+          />
+        </StructuredListCell>
+      </StructuredListRow>
+    {/each}
+  </StructuredListBody>
+</StructuredList>
+
+### Skeleton
+
+<StructuredListSkeleton rows={3} />

docs/src/pages/components/Tabs.svx

@@ -0,0 +1,34 @@
+<script>
+  import { Tabs, Tab, TabContent, TabsSkeleton } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default
+
+<Tabs>
+  <Tab label="Tab label 1" />
+  <Tab label="Tab label 2" />
+  <Tab label="Tab label 3" />
+  <div slot="content">
+    <TabContent>Content 1</TabContent>
+    <TabContent>Content 2</TabContent>
+    <TabContent>Content 3</TabContent>
+  </div>
+</Tabs>
+
+### Container type
+
+<Tabs type="container">
+  <Tab label="Tab label 1" />
+  <Tab label="Tab label 2" />
+  <Tab label="Tab label 3" />
+  <div slot="content">
+    <TabContent>Content 1</TabContent>
+    <TabContent>Content 2</TabContent>
+    <TabContent>Content 3</TabContent>
+  </div>
+</Tabs>
+
+### Skeleton
+
+<TabsSkeleton count={3} />

docs/src/pages/components/Tag.svx

@@ -0,0 +1,30 @@
+<script>
+  import { Tag } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default
+
+<Tag>IBM Cloud</Tag>
+
+### Tag types
+
+<Tag type="red">red</Tag>
+<Tag type="magenta">magenta</Tag>
+<Tag type="purple">purple</Tag>
+<Tag type="blue">blue</Tag>
+<Tag type="cyan">cyan</Tag>
+<Tag type="teal">teal</Tag>
+<Tag type="green">green</Tag>
+<Tag type="gray">gray</Tag>
+<Tag type="cool-gray">cool-gray</Tag>
+<Tag type="warm-gray">warm-gray</Tag>
+<Tag type="high-contrast">high-contrast</Tag>
+
+### Filterable
+
+<Tag filter on:click>Filterable</Tag>
+
+### Skeleton
+
+<Tag skeleton />

docs/src/pages/components/TextArea.svx

@@ -0,0 +1,40 @@
+<script>
+  import { TextArea, TextAreaSkeleton } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default
+
+<TextArea labelText="App description" placeholder="Enter a description..." />
+
+### With helper text
+
+<TextArea labelText="App description" helperText="A rich description helps us better recommend related products and services" placeholder="Enter a description..." />
+
+### Hidden label
+
+<TextArea hideLabel labelText="App description" placeholder="Enter a description..." />
+
+### Light variant
+
+<TextArea light labelText="App description" placeholder="Enter a description..." />
+
+### Custom rows
+
+<TextArea rows={10} labelText="App description" placeholder="Enter a description..." />
+
+### Invalid state
+
+<TextArea invalid invalidText="Only plain text characters are allowed" labelText="App description" placeholder="Enter a description..." />
+
+### Disabled state
+
+<TextArea disabled labelText="App description" placeholder="Enter a description..." />
+
+### Skeleton
+
+<TextAreaSkeleton />
+
+### Skeleton without label
+
+<TextAreaSkeleton hideLabel />

docs/src/pages/components/TextInput.svx

@@ -0,0 +1,48 @@
+<script>
+  import { TextInput, TextInputSkeleton } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default
+
+<TextInput labelText="User name" placeholder="Enter user name..." />
+
+### With helper text
+
+<TextInput labelText="User name" helperText="Your user name is associated with your email" placeholder="Enter user name..." />
+
+### Hidden label
+
+<TextInput hideLabel labelText="User name" placeholder="Enter user name..." />
+
+### Light variant
+
+<TextInput light labelText="User name" placeholder="Enter user name..." />
+
+### Inline
+
+<TextInput inline labelText="User name" placeholder="Enter user name..." />
+
+### Extra-large size
+
+<TextInput size="xl" labelText="User name" placeholder="Enter user name..." />
+
+### Small size
+
+<TextInput size="sm" labelText="User name" placeholder="Enter user name..." />
+
+### Invalid state
+
+<TextInput invalid invalidText="User name is already taken. Please try another." labelText="User name" placeholder="Enter user name..." />
+
+### Disabled state
+
+<TextInput disabled labelText="User name" placeholder="Enter user name..." />
+
+### Skeleton
+
+<TextInputSkeleton />
+
+### Skeleton without label
+
+<TextInputSkeleton hideLabel />

docs/src/pages/components/Tile.svx

@@ -0,0 +1,16 @@
+---
+source: Tile/Tile.svelte
+---
+
+<script>
+  import { Tile } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default
+
+<Tile>Content</Tile>
+
+### Light variant
+
+<Tile light>Content</Tile>

docs/src/pages/components/TimePicker.svx

@@ -0,0 +1,43 @@
+<script>
+  import { TimePicker, TimePickerSelect, SelectItem } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default
+
+<TimePicker labelText="Cron job" placeholder="hh:mm">
+  <TimePickerSelect value="PM">
+    <SelectItem value="am" text="AM" />
+    <SelectItem value="pm" text="PM" />
+  </TimePickerSelect>
+  <TimePickerSelect value="PDT">
+    <SelectItem value="pdt" text="PDT" />
+    <SelectItem value="gmt" text="GMT" />
+  </TimePickerSelect>
+</TimePicker>
+
+### Light variant
+
+<TimePicker light labelText="Cron job" placeholder="hh:mm">
+  <TimePickerSelect value="PM">
+    <SelectItem value="am" text="AM" />
+    <SelectItem value="pm" text="PM" />
+  </TimePickerSelect>
+  <TimePickerSelect value="PDT">
+    <SelectItem value="pdt" text="PDT" />
+    <SelectItem value="gmt" text="GMT" />
+  </TimePickerSelect>
+</TimePicker>
+
+### Disabled
+
+<TimePicker labelText="Cron job" placeholder="hh:mm" disabled>
+  <TimePickerSelect value="PM" disabled>
+    <SelectItem value="am" text="AM" />
+    <SelectItem value="pm" text="PM" />
+  </TimePickerSelect>
+  <TimePickerSelect value="PDT" disabled>
+    <SelectItem value="pdt" text="PDT" />
+    <SelectItem value="gmt" text="GMT" />
+  </TimePickerSelect>
+</TimePicker>

docs/src/pages/components/ToastNotification.svx

@@ -0,0 +1,34 @@
+---
+source: Notification/ToastNotification.svelte
+---
+
+<script>
+  import { ToastNotification } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default (error)
+
+<ToastNotification />
+
+### Hidden close button
+
+<ToastNotification hideCloseButton kind="warning" title="Upcoming scheduled maintenance" />
+
+### Notification variants
+
+<ToastNotification kind="error" />
+<ToastNotification kind="info" />
+<ToastNotification kind="info-square" />
+<ToastNotification kind="success" />
+<ToastNotification kind="warning" />
+<ToastNotification kind="warning-alt" />
+
+### Low contrast
+
+<ToastNotification lowContrast kind="error" />
+<ToastNotification lowContrast kind="info" />
+<ToastNotification lowContrast kind="info-square" />
+<ToastNotification lowContrast kind="success" />
+<ToastNotification lowContrast kind="warning" />
+<ToastNotification lowContrast kind="warning-alt" />

docs/src/pages/components/Toggle.svx

@@ -0,0 +1,24 @@
+<script>
+  import { Toggle, ToggleSkeleton } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default (untoggled)
+
+<Toggle labelText="Push notifications" />
+
+### Toggled
+
+<Toggle labelText="Push notifications" toggled />
+
+### Custom labels
+
+<Toggle labelText="Push notifications" labelA="No" labelB="Yes" />
+
+### Disabled
+
+<Toggle labelText="Push notifications" disabled />
+
+### Skeleton
+
+<ToggleSkeleton />

docs/src/pages/components/ToggleSmall.svx

@@ -0,0 +1,24 @@
+<script>
+  import { ToggleSmall, ToggleSmallSkeleton } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default (untoggled)
+
+<ToggleSmall labelText="Push notifications" />
+
+### Toggled
+
+<ToggleSmall labelText="Push notifications" toggled />
+
+### Custom labels
+
+<ToggleSmall labelText="Push notifications" labelA="No" labelB="Yes" />
+
+### Disabled
+
+<ToggleSmall labelText="Push notifications" disabled />
+
+### Skeleton
+
+<ToggleSmallSkeleton />

docs/src/pages/components/Tooltip.svx

@@ -0,0 +1,57 @@
+<script>
+  import { Tooltip, Link, Button } from "carbon-components-svelte";
+  import Catalog16 from "carbon-icons-svelte/lib/Catalog16";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default (icon-only, "bottom" direction)
+
+<Tooltip>
+  <p>
+    Resources are provisioned based on your account's organization.
+  </p>
+</Tooltip>
+
+### With trigger text
+
+<Tooltip triggerText="Resource list">
+  <p>
+    Resources are provisioned based on your account's organization.
+  </p>
+</Tooltip>
+
+### Directions
+
+<Tooltip triggerText="Top" direction="top"><p>Top</p></Tooltip>
+<Tooltip triggerText="Right" direction="right"><p>Right</p></Tooltip>
+<Tooltip triggerText="Bottom" direction="bottom"><p>Bottom</p></Tooltip>
+<Tooltip triggerText="Left" direction="left"><p>Left</p></Tooltip>
+
+### Interactive
+
+<Tooltip triggerText="Resource list">
+  <p>
+    Resources are provisioned based on your account's organization.
+  </p>
+  <div class="bx--tooltip__footer">
+    <Link href="/">Learn more</Link>
+    <Button size="small">Manage</Button>
+  </div>
+</Tooltip>
+
+### Custom icon (component)
+
+<Tooltip triggerText="Resource list" icon={Catalog16}>
+  <p>
+    Resources are provisioned based on your account's organization.
+  </p>
+</Tooltip>
+
+### Custom icon (slot)
+
+<Tooltip triggerText="Resource list">
+  <div slot="icon" style="width: 1rem; height: 1rem; outline: 1px solid red;"></div>
+  <p>
+    Resources are provisioned based on your account's organization.
+  </p>
+</Tooltip>

docs/src/pages/components/TooltipDefinition.svx

@@ -0,0 +1,16 @@
+<script>
+  import { TooltipDefinition } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default ("bottom" direction, "center" aligned)
+
+<TooltipDefinition tooltipText="IBM Corporate Headquarters is based in Armonk, New York.">
+  Armonk
+</TooltipDefinition>
+
+### Custom direction, alignment
+
+<TooltipDefinition direction="top" align="start" tooltipText="IBM Corporate Headquarters is based in Armonk, New York.">
+  Armonk
+</TooltipDefinition>

docs/src/pages/components/TooltipIcon.svx

@@ -0,0 +1,19 @@
+<script>
+  import { TooltipIcon } from "carbon-components-svelte";
+  import Carbon24 from "carbon-icons-svelte/lib/Carbon24";
+  import Filter20 from "carbon-icons-svelte/lib/Filter20";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default ("bottom" direction, "center" aligned)
+
+<TooltipIcon tooltipText="Carbon is an open source design system by IBM.">
+  <Carbon24 />
+</TooltipIcon>
+
+### Directions
+
+<TooltipIcon tooltipText="Top start" direction="top" align="start"><Filter20 /></TooltipIcon>
+<TooltipIcon tooltipText="Right end" direction="right" align="end"><Filter20 /></TooltipIcon>
+<TooltipIcon tooltipText="Bottom start" direction="bottom" align="start"><Filter20 /></TooltipIcon>
+<TooltipIcon tooltipText="Left start" direction="left" align="start"><Filter20 /></TooltipIcon>

docs/src/pages/components/UIShell.svx

@@ -0,0 +1,15 @@
+<script>
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Header with side navigation
+
+<FileSource src="/framed/UIShell/HeaderNav" />
+
+### Header with app switcher
+
+<FileSource src="/framed/UIShell/HeaderSwitcher" />
+
+### Header with utilities
+
+<FileSource src="/framed/UIShell/HeaderUtilities" />

docs/src/pages/components/UnorderedList.svx

@@ -0,0 +1,46 @@
+<script>
+  import { UnorderedList, ListItem, Link } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default
+
+<UnorderedList>
+  <ListItem>Unordered list item</ListItem>
+  <ListItem>Unordered list item</ListItem>
+  <ListItem>Unordered list item</ListItem>
+</UnorderedList>
+
+### With links
+
+<UnorderedList>
+  <ListItem>
+    <Link href="#">Unordered list item</Link>
+  </ListItem>
+  <ListItem>
+    <Link href="#">Unordered list item</Link>
+  </ListItem>
+  <ListItem>
+    <Link href="#">Unordered list item</Link>
+  </ListItem>
+</UnorderedList>
+
+### Nested
+
+<UnorderedList>
+  <ListItem>
+    Unordered list level 1
+    <UnorderedList nested>
+      <ListItem>Unordered list level 2</ListItem>
+      <ListItem>
+        Unordered list level 3
+        <UnorderedList nested>
+          <ListItem>Unordered list level 3</ListItem>
+          <ListItem>Unordered list level 3</ListItem>
+        </UnorderedList>
+      </ListItem>
+    </UnorderedList>
+  </ListItem>
+  <ListItem>Unordered list level 1</ListItem>
+  <ListItem>Unordered list level 1</ListItem>
+</UnorderedList>

docs/src/pages/framed/Grid/AspectRatioColumns.svelte

@@ -0,0 +1,20 @@
+<script>
+  import { Grid, Row, Column } from "carbon-components-svelte";
+</script>
+
+<Grid>
+  <Row>
+    <Column
+      aspectRatio="2x1"
+      style="outline: 1px solid var(--cds-interactive-04)"
+    >
+      2x1
+    </Column>
+    <Column
+      aspectRatio="2x1"
+      style="outline: 1px solid var(--cds-interactive-04)"
+    >
+      2x1
+    </Column>
+  </Row>
+</Grid>

docs/src/pages/framed/Grid/CondensedGrid.svelte

@@ -0,0 +1,12 @@
+<script>
+  import { Grid, Row, Column } from "carbon-components-svelte";
+</script>
+
+<Grid condensed>
+  <Row>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+  </Row>
+</Grid>

docs/src/pages/framed/Grid/FullWidthGrid.svelte

@@ -0,0 +1,12 @@
+<script>
+  import { Grid, Row, Column } from "carbon-components-svelte";
+</script>
+
+<Grid fullWidth>
+  <Row>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+  </Row>
+</Grid>

docs/src/pages/framed/Grid/Grid.svelte

@@ -0,0 +1,12 @@
+<script>
+  import { Grid, Row, Column } from "carbon-components-svelte";
+</script>
+
+<Grid>
+  <Row>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+  </Row>
+</Grid>

docs/src/pages/framed/Grid/NarrowGrid.svelte

@@ -0,0 +1,12 @@
+<script>
+  import { Grid, Row, Column } from "carbon-components-svelte";
+</script>
+
+<Grid narrow>
+  <Row>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+  </Row>
+</Grid>

docs/src/pages/framed/Grid/OffsetColumns.svelte

@@ -0,0 +1,32 @@
+<script>
+  import { Grid, Row, Column } from "carbon-components-svelte";
+</script>
+
+<Grid>
+  <Row>
+    <Column
+      sm="{{ span: 1, offset: 3 }}"
+      style="outline: 1px solid var(--cds-interactive-04)"
+    >
+      Offset 3
+    </Column>
+    <Column
+      sm="{{ span: 2, offset: 2 }}"
+      style="outline: 1px solid var(--cds-interactive-04)"
+    >
+      Offset 2
+    </Column>
+    <Column
+      sm="{{ span: 3, offset: 1 }}"
+      style="outline: 1px solid var(--cds-interactive-04)"
+    >
+      Offset 1
+    </Column>
+    <Column
+      sm="{{ span: 4, offset: 0 }}"
+      style="outline: 1px solid var(--cds-interactive-04)"
+    >
+      Offset 0
+    </Column>
+  </Row>
+</Grid>

docs/src/pages/framed/Grid/ResponsiveGrid.svelte

@@ -0,0 +1,40 @@
+<script>
+  import { Grid, Row, Column } from "carbon-components-svelte";
+</script>
+
+<Grid>
+  <Row>
+    <Column
+      sm="{1}"
+      md="{4}"
+      lg="{8}"
+      style="outline: 1px solid var(--cds-interactive-04)"
+    >
+      sm: 1, md: 4, lg: 8
+    </Column>
+    <Column
+      sm="{1}"
+      md="{2}"
+      lg="{2}"
+      style="outline: 1px solid var(--cds-interactive-04)"
+    >
+      sm: 1, md: 2, lg: 2
+    </Column>
+    <Column
+      sm="{1}"
+      md="{1}"
+      lg="{1}"
+      style="outline: 1px solid var(--cds-interactive-04)"
+    >
+      sm: 1, md: 1, lg: 1
+    </Column>
+    <Column
+      sm="{1}"
+      md="{1}"
+      lg="{1}"
+      style="outline: 1px solid var(--cds-interactive-04)"
+    >
+      sm: 1, md: 1, lg: 1
+    </Column>
+  </Row>
+</Grid>

docs/src/pages/framed/Loading/Loading.svelte

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

docs/src/pages/framed/Modal/ComposedModal.svelte

@@ -0,0 +1,19 @@
+<script>
+  import {
+    ComposedModal,
+    ModalHeader,
+    ModalBody,
+    ModalFooter,
+    Checkbox,
+  } from "carbon-components-svelte";
+
+  let checked = false;
+</script>
+
+<ComposedModal open>
+  <ModalHeader title="Confirm changes" />
+  <ModalBody hasForm>
+    <Checkbox labelText="I have reviewed the changes" bind:checked />
+  </ModalBody>
+  <ModalFooter primaryButtonText="Proceed" primaryButtonDisabled="{!checked}" />
+</ComposedModal>

docs/src/pages/framed/Modal/DangerModal.svelte

@@ -0,0 +1,21 @@
+<script>
+  import { Button, Modal } from "carbon-components-svelte";
+
+  let open = false;
+</script>
+
+<Button kind="danger" on:click="{() => (open = true)}">Delete all</Button>
+
+<Modal
+  danger
+  bind:open
+  modalHeading="Delete all instances"
+  primaryButtonText="Delete"
+  secondaryButtonText="Cancel"
+  on:click:button--secondary="{() => (open = false)}"
+  on:open
+  on:close
+  on:submit
+>
+  <p>This is a permanent action and cannot be undone.</p>
+</Modal>

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

@@ -0,0 +1,20 @@
+<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"
+  secondaryButtonText="Cancel"
+  on:click:button--secondary="{() => (open = false)}"
+  on:open
+  on:close
+  on:submit
+>
+  <p>Create a new Cloudant database in the US South region.</p>
+</Modal>

docs/src/pages/framed/Modal/ModalExtraSmall.svelte

@@ -0,0 +1,17 @@
+<script>
+  import { Modal } from "carbon-components-svelte";
+</script>
+
+<Modal
+  size="xs"
+  open
+  modalHeading="Create database"
+  primaryButtonText="Confirm"
+  secondaryButtonText="Cancel"
+  on:click:button--secondary
+  on:open
+  on:close
+  on:submit
+>
+  <p>Create a new Cloudant database in the US South region.</p>
+</Modal>

docs/src/pages/framed/Modal/ModalLarge.svelte

@@ -0,0 +1,17 @@
+<script>
+  import { Modal } from "carbon-components-svelte";
+</script>
+
+<Modal
+  size="lg"
+  open
+  modalHeading="Create database"
+  primaryButtonText="Confirm"
+  secondaryButtonText="Cancel"
+  on:click:button--secondary
+  on:open
+  on:close
+  on:submit
+>
+  <p>Create a new Cloudant database in the US South region.</p>
+</Modal>