From 89af6ce0ec4d4aed65a04c29129b81fda4228930 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Fri, 2 Oct 2020 20:43:57 -0700 Subject: [PATCH] Updates --- 404.html | 15 -- _config.yml | 2 +- components/Accordion/index.html | 64 ------ components/Breadcrumb/index.html | 36 --- components/Button/index.html | 97 -------- components/ButtonSet/index.html | 30 --- components/Checkbox/index.html | 44 ---- components/ClickableTile/index.html | 28 --- components/CodeSnippet/index.html | 71 ------ components/ComboBox/index.html | 63 ------ components/ComposedModal/index.html | 33 --- components/ContentSwitcher/index.html | 54 ----- components/CopyButton/index.html | 24 -- components/DataTable/index.html | 83 ------- components/DatePicker/index.html | 100 --------- components/Dropdown/index.html | 58 ----- components/ExpandableTile/index.html | 38 ---- components/FileUploader/index.html | 59 ----- components/FluidForm/index.html | 31 --- components/Form/index.html | 68 ------ components/Grid/index.html | 154 ------------- components/Icon/index.html | 38 ---- components/InlineLoading/index.html | 32 --- components/InlineNotification/index.html | 74 ------ components/Link/index.html | 44 ---- components/Loading/index.html | 29 --- components/Modal/index.html | 137 ------------ components/MultiSelect/index.html | 54 ----- components/NumberInput/index.html | 84 ------- components/OrderedList/index.html | 61 ----- components/OverflowMenu/index.html | 85 ------- components/Pagination/index.html | 39 ---- components/PaginationNav/index.html | 24 -- components/PasswordInput/index.html | 64 ------ components/ProgressIndicator/index.html | 79 ------- components/RadioButton/index.html | 89 -------- components/RadioTile/index.html | 32 --- components/Search/index.html | 44 ---- components/Select/index.html | 78 ------- components/SelectableTile/index.html | 32 --- components/SkeletonPlaceholder/index.html | 24 -- components/SkeletonText/index.html | 39 ---- components/Slider/index.html | 65 ------ components/StructuredList/index.html | 137 ------------ components/Tabs/index.html | 47 ---- components/Tag/index.html | 44 ---- components/TextArea/index.html | 84 ------- components/TextInput/index.html | 78 ------- components/Tile/index.html | 24 -- components/TimePicker/index.html | 68 ------ components/ToastNotification/index.html | 61 ----- components/Toggle/index.html | 39 ---- components/ToggleSmall/index.html | 39 ---- components/Tooltip/index.html | 71 ------ components/TooltipDefinition/index.html | 34 --- components/TooltipIcon/index.html | 39 ---- components/UIShell/index.html | 211 ------------------ components/UnorderedList/index.html | 61 ----- framed/Grid/AspectRatioColumns/index.html | 14 -- framed/Grid/CondensedGrid/index.html | 14 -- framed/Grid/FullWidthGrid/index.html | 14 -- framed/Grid/Grid/index.html | 14 -- framed/Grid/NarrowGrid/index.html | 14 -- framed/Grid/OffsetColumns/index.html | 14 -- framed/Grid/ResponsiveGrid/index.html | 14 -- framed/Loading/Loading/index.html | 14 -- framed/Modal/ComposedModal/index.html | 14 -- framed/Modal/DangerModal/index.html | 14 -- framed/Modal/Modal/index.html | 14 -- framed/Modal/ModalExtraSmall/index.html | 14 -- framed/Modal/ModalLarge/index.html | 14 -- .../Modal/ModalPreventOutsideClick/index.html | 14 -- framed/Modal/ModalSmall/index.html | 14 -- framed/Modal/PassiveModal/index.html | 15 -- framed/UIShell/HeaderNav/index.html | 14 -- framed/UIShell/HeaderSwitcher/index.html | 14 -- framed/UIShell/HeaderUtilities/index.html | 14 -- index.html | 27 +-- 78 files changed, 12 insertions(+), 3718 deletions(-) delete mode 100644 404.html delete mode 100644 components/Accordion/index.html delete mode 100644 components/Breadcrumb/index.html delete mode 100644 components/Button/index.html delete mode 100644 components/ButtonSet/index.html delete mode 100644 components/Checkbox/index.html delete mode 100644 components/ClickableTile/index.html delete mode 100644 components/CodeSnippet/index.html delete mode 100644 components/ComboBox/index.html delete mode 100644 components/ComposedModal/index.html delete mode 100644 components/ContentSwitcher/index.html delete mode 100644 components/CopyButton/index.html delete mode 100644 components/DataTable/index.html delete mode 100644 components/DatePicker/index.html delete mode 100644 components/Dropdown/index.html delete mode 100644 components/ExpandableTile/index.html delete mode 100644 components/FileUploader/index.html delete mode 100644 components/FluidForm/index.html delete mode 100644 components/Form/index.html delete mode 100644 components/Grid/index.html delete mode 100644 components/Icon/index.html delete mode 100644 components/InlineLoading/index.html delete mode 100644 components/InlineNotification/index.html delete mode 100644 components/Link/index.html delete mode 100644 components/Loading/index.html delete mode 100644 components/Modal/index.html delete mode 100644 components/MultiSelect/index.html delete mode 100644 components/NumberInput/index.html delete mode 100644 components/OrderedList/index.html delete mode 100644 components/OverflowMenu/index.html delete mode 100644 components/Pagination/index.html delete mode 100644 components/PaginationNav/index.html delete mode 100644 components/PasswordInput/index.html delete mode 100644 components/ProgressIndicator/index.html delete mode 100644 components/RadioButton/index.html delete mode 100644 components/RadioTile/index.html delete mode 100644 components/Search/index.html delete mode 100644 components/Select/index.html delete mode 100644 components/SelectableTile/index.html delete mode 100644 components/SkeletonPlaceholder/index.html delete mode 100644 components/SkeletonText/index.html delete mode 100644 components/Slider/index.html delete mode 100644 components/StructuredList/index.html delete mode 100644 components/Tabs/index.html delete mode 100644 components/Tag/index.html delete mode 100644 components/TextArea/index.html delete mode 100644 components/TextInput/index.html delete mode 100644 components/Tile/index.html delete mode 100644 components/TimePicker/index.html delete mode 100644 components/ToastNotification/index.html delete mode 100644 components/Toggle/index.html delete mode 100644 components/ToggleSmall/index.html delete mode 100644 components/Tooltip/index.html delete mode 100644 components/TooltipDefinition/index.html delete mode 100644 components/TooltipIcon/index.html delete mode 100644 components/UIShell/index.html delete mode 100644 components/UnorderedList/index.html delete mode 100644 framed/Grid/AspectRatioColumns/index.html delete mode 100644 framed/Grid/CondensedGrid/index.html delete mode 100644 framed/Grid/FullWidthGrid/index.html delete mode 100644 framed/Grid/Grid/index.html delete mode 100644 framed/Grid/NarrowGrid/index.html delete mode 100644 framed/Grid/OffsetColumns/index.html delete mode 100644 framed/Grid/ResponsiveGrid/index.html delete mode 100644 framed/Loading/Loading/index.html delete mode 100644 framed/Modal/ComposedModal/index.html delete mode 100644 framed/Modal/DangerModal/index.html delete mode 100644 framed/Modal/Modal/index.html delete mode 100644 framed/Modal/ModalExtraSmall/index.html delete mode 100644 framed/Modal/ModalLarge/index.html delete mode 100644 framed/Modal/ModalPreventOutsideClick/index.html delete mode 100644 framed/Modal/ModalSmall/index.html delete mode 100644 framed/Modal/PassiveModal/index.html delete mode 100644 framed/UIShell/HeaderNav/index.html delete mode 100644 framed/UIShell/HeaderSwitcher/index.html delete mode 100644 framed/UIShell/HeaderUtilities/index.html diff --git a/404.html b/404.html deleted file mode 100644 index e81d0504..00000000 --- a/404.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - 404 - - - -

404

Page not found. - Return home
- - - - - \ No newline at end of file diff --git a/_config.yml b/_config.yml index 5f054c82..a016990c 100644 --- a/_config.yml +++ b/_config.yml @@ -3,4 +3,4 @@ include: - _*.js - assets - assets/*_.js - - assets/*.js + - assets/*.js \ No newline at end of file diff --git a/components/Accordion/index.html b/components/Accordion/index.html deleted file mode 100644 index a2a33f38..00000000 --- a/components/Accordion/index.html +++ /dev/null @@ -1,64 +0,0 @@ - - - - - Accordion - - - -

Accordion

Source code
Table of Contents

Usage

Default

  • Content 1
  • Content 2
  • Content 3
<script>
-  import { Accordion, AccordionItem } from "carbon-components-svelte";
-</script>
-
-<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

  • Content 1
  • Content 2
  • Content 3
<script>
-  import { Accordion, AccordionItem } from "carbon-components-svelte";
-</script>
-
-<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

  • - Content 1
  • Content 2
  • Content 3
<script>
-  import { Accordion, AccordionItem } from "carbon-components-svelte";
-</script>
-
-<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

  • Content 1
  • Content 2
  • Content 3
<script>
-  import { Accordion, AccordionItem } from "carbon-components-svelte";
-</script>
-
-<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

  •  

<script>
-  import { Accordion } from "carbon-components-svelte";
-</script>
-
-<Accordion skeleton count={3} />
-

Skeleton (closed)

  •  

<script>
-  import { Accordion } from "carbon-components-svelte";
-</script>
-
-<Accordion skeleton open={false} count={3} />
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/Breadcrumb/index.html b/components/Breadcrumb/index.html deleted file mode 100644 index f8acd882..00000000 --- a/components/Breadcrumb/index.html +++ /dev/null @@ -1,36 +0,0 @@ - - - - - Breadcrumb - - - -

Breadcrumb

Source code
Table of Contents

Usage

Default

<script>
-  import { Breadcrumb, BreadcrumbItem } from "carbon-components-svelte";
-</script>
-
-<Breadcrumb>
-  <BreadcrumbItem href="/">Dashboard</BreadcrumbItem>
-  <BreadcrumbItem href="/reports">Annual reports</BreadcrumbItem>
-  <BreadcrumbItem href="/reports/2019" isCurrentPage>2019</BreadcrumbItem>
-</Breadcrumb>
-

No trailing slash

<script>
-  import { Breadcrumb, BreadcrumbItem } from "carbon-components-svelte";
-</script>
-
-<Breadcrumb noTrailingSlash>
-  <BreadcrumbItem href="/">Home</BreadcrumbItem>
-  <BreadcrumbItem href="/profile" isCurrentPage>Profile</BreadcrumbItem>
-</Breadcrumb>
-

Skeleton

 
 
  
<script>
-  import { Breadcrumb } from "carbon-components-svelte";
-</script>
-
-<Breadcrumb skeleton count={3} />
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/Button/index.html b/components/Button/index.html deleted file mode 100644 index 03155407..00000000 --- a/components/Button/index.html +++ /dev/null @@ -1,97 +0,0 @@ - - - - - Button - - - -

Button

Source code
Table of Contents

Usage

Primary button

<script>
-  import { Button } from "carbon-components-svelte";
-</script>
-
-<Button>Primary button</Button>
-

Secondary button

<script>
-  import { Button } from "carbon-components-svelte";
-</script>
-
-<Button kind="secondary">Secondary button</Button>
-

Tertiary button

<script>
-  import { Button } from "carbon-components-svelte";
-</script>
-
-<Button kind="tertiary">Tertiary button</Button>
-

Ghost button

<script>
-  import { Button } from "carbon-components-svelte";
-</script>
-
-<Button kind="ghost">Ghost button</Button>
-

Danger button

<script>
-  import { Button } from "carbon-components-svelte";
-</script>
-
-<Button kind="danger">Danger button</Button>
-

Button with icon

<script>
-  import { Button } from "carbon-components-svelte";
-  import Add16 from "carbon-icons-svelte/lib/Add16";
-</script>
-
-<Button icon={Add16}>With icon</Button>
-

Icon-only button

<script>
-  import { Button } from "carbon-components-svelte";
-  import Add16 from "carbon-icons-svelte/lib/Add16";
-</script>
-
-<Button
-  icon={Add16}
-  hasIconOnly
-  tooltipPosition="bottom"
-  tooltipAlignment="center"
-  iconDescription="Tooltip text"
-/>
-
Link button 
<script>
-  import { Button } from "carbon-components-svelte";
-</script>
-
-<Button href="#">Link button</Button>
-

Custom element

Custom element

<script>
-  import { Button } from "carbon-components-svelte";
-</script>
-
-<Button as let:props>
-  <p {...props}>Custom element</p>
-</Button>
-

Field button

<script>
-  import { Button } from "carbon-components-svelte";
-</script>
-
-<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

<script>
-  import { Button } from "carbon-components-svelte";
-</script>
-
-<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

<script>
-  import { Button } from "carbon-components-svelte";
-</script>
-
-<Button disabled>Disabled button</Button>
-

Skeleton

<script>
-  import { Button } from "carbon-components-svelte";
-</script>
-
-<Button skeleton />
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/ButtonSet/index.html b/components/ButtonSet/index.html deleted file mode 100644 index e6ff815d..00000000 --- a/components/ButtonSet/index.html +++ /dev/null @@ -1,30 +0,0 @@ - - - - - ButtonSet - - - -

ButtonSet

Source code
Table of Contents

Usage

Default (juxtaposed)

<script>
-  import { ButtonSet, Button } from "carbon-components-svelte";
-</script>
-
-<ButtonSet>
-  <Button kind="secondary">Cancel</Button>
-  <Button>Submit</Button>
-</ButtonSet>
-

Stacked

<script>
-  import { ButtonSet, Button } from "carbon-components-svelte";
-</script>
-
-<ButtonSet stacked>
-  <Button>Login</Button>
-  <Button kind="ghost">Sign up</Button>
-</ButtonSet>
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/Checkbox/index.html b/components/Checkbox/index.html deleted file mode 100644 index af1dff24..00000000 --- a/components/Checkbox/index.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - - Checkbox - - - -

Checkbox

Source code
Table of Contents

Usage

Default (unchecked)

<script>
-  import { Checkbox } from "carbon-components-svelte";
-</script>
-
-<Checkbox labelText="Label text" />
-

Checked

<script>
-  import { Checkbox } from "carbon-components-svelte";
-</script>
-
-<Checkbox labelText="Label text" checked />
-

Indeterminate

<script>
-  import { Checkbox } from "carbon-components-svelte";
-</script>
-
-<Checkbox labelText="Label text" indeterminate />
-

Hidden label

<script>
-  import { Checkbox } from "carbon-components-svelte";
-</script>
-
-<Checkbox labelText="Label text" hideLabel />
-

Disabled

<script>
-  import { Checkbox } from "carbon-components-svelte";
-</script>
-
-<Checkbox labelText="Label text" disabled />
-

Skeleton

<script>
-  import { Checkbox } from "carbon-components-svelte";
-</script>
-
-<Checkbox skeleton />
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/ClickableTile/index.html b/components/ClickableTile/index.html deleted file mode 100644 index 8ba01977..00000000 --- a/components/ClickableTile/index.html +++ /dev/null @@ -1,28 +0,0 @@ - - - - - ClickableTile - - - -

ClickableTile

Source code
Table of Contents

Usage

Default

Carbon Design System
<script>
-  import { ClickableTile } from "carbon-components-svelte";
-</script>
-
-<ClickableTile href="https://www.carbondesignsystem.com/">
-  Carbon Design System
-</ClickableTile>
-

Light variant

Carbon Design System
<script>
-  import { ClickableTile } from "carbon-components-svelte";
-</script>
-
-<ClickableTile light href="https://www.carbondesignsystem.com/">
-  Carbon Design System
-</ClickableTile>
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/CodeSnippet/index.html b/components/CodeSnippet/index.html deleted file mode 100644 index a3aabb07..00000000 --- a/components/CodeSnippet/index.html +++ /dev/null @@ -1,71 +0,0 @@ - - - - - CodeSnippet - - - -

CodeSnippet

Source code
Table of Contents

Usage

Default (single-line)

yarn add -D carbon-components-svelte
<script>
-  import { CodeSnippet } from "carbon-components-svelte";
-</script>
-
-<CodeSnippet>yarn add -D carbon-components-svelte</CodeSnippet>
-

Inline

<script>
-  import { CodeSnippet } from "carbon-components-svelte";
-</script>
-
-<CodeSnippet type="inline">rm -rf node_modules/</CodeSnippet>
-

Multi-line

// 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>
-  import { CodeSnippet } from "carbon-components-svelte";
-</script>
-
-<CodeSnippet type="multi" {code} />
-

Hidden copy button

// 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>
-  import { CodeSnippet } from "carbon-components-svelte";
-</script>
-
-<CodeSnippet type="multi" {code} hideCopyButton />
-

Skeleton

<script>
-  import { CodeSnippet } from "carbon-components-svelte";
-</script>
-
-<CodeSnippet skeleton />
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/ComboBox/index.html b/components/ComboBox/index.html deleted file mode 100644 index 5071f5d2..00000000 --- a/components/ComboBox/index.html +++ /dev/null @@ -1,63 +0,0 @@ - - - - - ComboBox - - - -

ComboBox

Source code
Table of Contents

Usage

Default

<script>
-  import { ComboBox } from "carbon-components-svelte";
-</script>
-
-<ComboBox
-  titleText="Contact"
-  placeholder="Select contact method"
-  items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
-/>
-

Selected index

<script>
-  import { ComboBox } from "carbon-components-svelte";
-</script>
-
-<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

<script>
-  import { ComboBox } from "carbon-components-svelte";
-</script>
-
-<ComboBox
-  titleText="Contact"
-  placeholder="Select contact method"
-  size="xl"
-  items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
-/>
-

Small size

<script>
-  import { ComboBox } from "carbon-components-svelte";
-</script>
-
-<ComboBox
-  titleText="Contact"
-  placeholder="Select contact method"
-  size="sm"
-  items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
-/>
-

Disabled

<script>
-  import { ComboBox } from "carbon-components-svelte";
-</script>
-
-<ComboBox
-  titleText="Contact"
-  placeholder="Select contact method"
-  disabled
-  items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
-/>
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/ComposedModal/index.html b/components/ComposedModal/index.html deleted file mode 100644 index ce752e83..00000000 --- a/components/ComposedModal/index.html +++ /dev/null @@ -1,33 +0,0 @@ - - - - - ComposedModal - - - -

ComposedModal

Source code
Table of Contents

Usage

Composed modal

Open in new tab 
<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>
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/ContentSwitcher/index.html b/components/ContentSwitcher/index.html deleted file mode 100644 index 6ce83cb2..00000000 --- a/components/ContentSwitcher/index.html +++ /dev/null @@ -1,54 +0,0 @@ - - - - - ContentSwitcher - - - -

ContentSwitcher

Source code
Table of Contents

Usage

Default

<script>
-  import { ContentSwitcher, Switch } from "carbon-components-svelte";
-</script>
-
-<ContentSwitcher>
-  <Switch text="Switch 1" />
-  <Switch text="Switch 2" />
-  <Switch text="Switch 3" />
-</ContentSwitcher>
-

Light variant

<script>
-  import { ContentSwitcher, Switch } from "carbon-components-svelte";
-</script>
-
-<ContentSwitcher light>
-  <Switch text="Switch 1" />
-  <Switch text="Switch 2" />
-  <Switch text="Switch 3" />
-</ContentSwitcher>
-

Custom switch slot

<script>
-  import { ContentSwitcher, Switch } from "carbon-components-svelte";
-  import Add16 from "carbon-icons-svelte/lib/Add16";
-</script>
-
-<ContentSwitcher>
-  <Switch>
-    <div style="display: flex; align-items: center;">
-      Third section
-      <Add16 style="margin-left: .25rem;" />
-    </div>
-  </Switch>
-  <Switch text="Switch 2" />
-</ContentSwitcher>
-

Disabled

<script>
-  import { ContentSwitcher, Switch } from "carbon-components-svelte";
-</script>
-
-<ContentSwitcher>
-  <Switch text="Switch 1" disabled />
-  <Switch text="Switch 2" disabled />
-</ContentSwitcher>
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/CopyButton/index.html b/components/CopyButton/index.html deleted file mode 100644 index 8a697f7c..00000000 --- a/components/CopyButton/index.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - - CopyButton - - - -

CopyButton

Source code
Table of Contents

Usage

Default

<script>
-  import { CopyButton } from "carbon-components-svelte";
-</script>
-
-<CopyButton on:click />
-

Custom feedback

<script>
-  import { CopyButton } from "carbon-components-svelte";
-</script>
-
-<CopyButton on:click feedback="Copied to clipboard" />
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/DataTable/index.html b/components/DataTable/index.html deleted file mode 100644 index c53c16f3..00000000 --- a/components/DataTable/index.html +++ /dev/null @@ -1,83 +0,0 @@ - - - - - DataTable - - - -

DataTable

Source code
Table of Contents

Usage

Default

Name Protocol Port Rule
Load Balancer 3HTTP3000Round robin
Load Balancer 1HTTP443Round robin
Load Balancer 2HTTP80DNS delegation
Load Balancer 6HTTP3000Round robin
Load Balancer 4HTTP443Round robin
Load Balancer 5HTTP80DNS delegation 
<script>
-  import { DataTable } from "carbon-components-svelte";
-</script>
-
-<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

Load balancers

Your organization's active load balancers.

Name Protocol Port Rule
Load Balancer 3HTTP3000Round robin
Load Balancer 1HTTP443Round robin
Load Balancer 2HTTP80DNS delegation
Load Balancer 6HTTP3000Round robin
Load Balancer 4HTTP443Round robin
Load Balancer 5HTTP80DNS delegation 
<script>
-  import { DataTable } from "carbon-components-svelte";
-</script>
-
-<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

Name Protocol Port Rule
Load Balancer 3HTTP3000Round robin
Load Balancer 1HTTP443Round robin
Load Balancer 2HTTP80DNS delegation
Load Balancer 6HTTP3000Round robin
Load Balancer 4HTTP443Round robin
Load Balancer 5HTTP80DNS delegation 
<script>
-  import { DataTable } from "carbon-components-svelte";
-</script>
-
-<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

Name Protocol Port Rule
Load Balancer 3HTTP3000Round robin
Load Balancer 1HTTP443Round robin
Load Balancer 2HTTP80DNS delegation
Load Balancer 6HTTP3000Round robin
Load Balancer 4HTTP443Round robin
Load Balancer 5HTTP80DNS delegation 
<script>
-  import { DataTable } from "carbon-components-svelte";
-</script>
-
-<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

Name Protocol Port Rule
Load Balancer 3HTTP3000Round robin
Load Balancer 1HTTP443Round robin
Load Balancer 2HTTP80DNS delegation
Load Balancer 6HTTP3000Round robin
Load Balancer 4HTTP443Round robin
Load Balancer 5HTTP80DNS delegation 
<script>
-  import { DataTable } from "carbon-components-svelte";
-</script>
-
-<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
Load Balancer 3HTTP3000Round robin
Load Balancer 1HTTP443Round robin
Load Balancer 2HTTP80DNS delegation
Load Balancer 6HTTP3000Round robin
Load Balancer 4HTTP443Round robin
Load Balancer 5HTTP80DNS delegation 
<script>
-  import { DataTable } from "carbon-components-svelte";
-</script>
-
-<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

 
<script>
-  import { DataTableSkeleton } from "carbon-components-svelte";
-</script>
-
-<DataTableSkeleton />
-

Skeleton with headers, row count

NameProtocolPortRule
 
<script>
-  import { DataTableSkeleton } from "carbon-components-svelte";
-</script>
-
-<DataTableSkeleton headers={['Name', 'Protocol', 'Port', 'Rule']} rows={10} />
-

Skeleton without header, toolbar

 
<script>
-  import { DataTableSkeleton } from "carbon-components-svelte";
-</script>
-
-<DataTableSkeleton showHeader={false} showToolbar={false} />
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/DatePicker/index.html b/components/DatePicker/index.html deleted file mode 100644 index 4bbf830e..00000000 --- a/components/DatePicker/index.html +++ /dev/null @@ -1,100 +0,0 @@ - - - - - DatePicker - - - -

DatePicker

Source code
Table of Contents

Usage

Default (simple)

<script>
-  import { DatePicker, DatePickerInput } from "carbon-components-svelte";
-</script>
-
-<DatePicker>
-  <DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
-</DatePicker>
-

Hidden label

<script>
-  import { DatePicker, DatePickerInput } from "carbon-components-svelte";
-</script>
-
-<DatePicker>
-  <DatePickerInput
-    hideLabel
-    labelText="Date of birth"
-    placeholder="mm/dd/yyyy"
-  />
-</DatePicker>
-

Light variant

<script>
-  import { DatePicker, DatePickerInput } from "carbon-components-svelte";
-</script>
-
-<DatePicker light>
-  <DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
-</DatePicker>
-

Extra-large size

<script>
-  import { DatePicker, DatePickerInput } from "carbon-components-svelte";
-</script>
-
-<DatePicker>
-  <DatePickerInput
-    size="xl"
-    labelText="Date of birth"
-    placeholder="mm/dd/yyyy"
-  />
-</DatePicker>
-

Small size

<script>
-  import { DatePicker, DatePickerInput } from "carbon-components-svelte";
-</script>
-
-<DatePicker>
-  <DatePickerInput
-    size="sm"
-    labelText="Date of birth"
-    placeholder="mm/dd/yyyy"
-  />
-</DatePicker>
-

Invalid state

Invalid date
<script>
-  import { DatePicker, DatePickerInput } from "carbon-components-svelte";
-</script>
-
-<DatePicker>
-  <DatePickerInput
-    invalid
-    invalidText="Invalid date"
-    labelText="Date of birth"
-    placeholder="mm/dd/yyyy"
-  />
-</DatePicker>
-

Disabled state

<script>
-  import { DatePicker, DatePickerInput } from "carbon-components-svelte";
-</script>
-
-<DatePicker>
-  <DatePickerInput
-    disabled
-    labelText="Date of birth"
-    placeholder="mm/dd/yyyy"
-  />
-</DatePicker>
-

Single

<script>
-  import { DatePicker, DatePickerInput } from "carbon-components-svelte";
-</script>
-
-<DatePicker datePickerType="single">
-  <DatePickerInput labelText="Schedule a meeting" placeholder="mm/dd/yyyy" />
-</DatePicker>
-

Skeleton

<script>
-  import { DatePickerSkeleton } from "carbon-components-svelte";
-</script>
-
-<DatePickerSkeleton />
-
Table of Contents
- - - - -
- - SunMonTueWedThuFriSat - -
27282930123456789101112131415161718192021222324252627282930311234567
\ No newline at end of file diff --git a/components/Dropdown/index.html b/components/Dropdown/index.html deleted file mode 100644 index 9b45ff4a..00000000 --- a/components/Dropdown/index.html +++ /dev/null @@ -1,58 +0,0 @@ - - - - - Dropdown - - - -

Dropdown

Source code
Table of Contents

Usage

Default

<script>
-  import { Dropdown } from "carbon-components-svelte";
-</script>
-
-<Dropdown
-  titleText="Contact"
-  selectedIndex={0}
-  items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
-/>
-

Light variant

<script>
-  import { Dropdown } from "carbon-components-svelte";
-</script>
-
-<Dropdown
-  light
-  titleText="Contact"
-  selectedIndex={0}
-  items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
-/>
-

Inline type

<script>
-  import { Dropdown } from "carbon-components-svelte";
-</script>
-
-<Dropdown
-  type="inline"
-  titleText="Contact"
-  selectedIndex={0}
-  items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
-/>
-

Disabled state

<script>
-  import { Dropdown } from "carbon-components-svelte";
-</script>
-
-<Dropdown
-  disabled
-  titleText="Contact"
-  selectedIndex={0}
-  items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
-/>
-

Skeleton

<script>
-  import { DropdownSkeleton } from "carbon-components-svelte";
-</script>
-
-<DropdownSkeleton />
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/ExpandableTile/index.html b/components/ExpandableTile/index.html deleted file mode 100644 index 455d34a8..00000000 --- a/components/ExpandableTile/index.html +++ /dev/null @@ -1,38 +0,0 @@ - - - - - ExpandableTile - - - -

ExpandableTile

Source code
Table of Contents

Usage

Default (unexpanded)

Above the fold content here
Below the fold content here
<script>
-  import { ExpandableTile } from "carbon-components-svelte";
-</script>
-
-<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

Above the fold content here
Below the fold content here
<script>
-  import { ExpandableTile } from "carbon-components-svelte";
-</script>
-
-<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

Above the fold content here
Below the fold content here
<script>
-  import { ExpandableTile } from "carbon-components-svelte";
-</script>
-
-<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>
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/FileUploader/index.html b/components/FileUploader/index.html deleted file mode 100644 index 8f3850ad..00000000 --- a/components/FileUploader/index.html +++ /dev/null @@ -1,59 +0,0 @@ - - - - - FileUploader - - - -

FileUploader

Source code
Table of Contents

Usage

File uploader (button-only)

<script>
-  import { FileUploaderButton } from "carbon-components-svelte";
-</script>
-
-<FileUploaderButton labelText="Add files" />
-

File uploader

Upload files

Only JPEG files are accepted.

<script>
-  import { FileUploader } from "carbon-components-svelte";
-</script>
-
-<FileUploader
-  multiple
-  labelTitle="Upload files"
-  buttonLabel="Add files"
-  labelDescription="Only JPEG files are accepted."
-  accept={['.jpg', '.jpeg']}
-  status="complete"
-/>
-

Item (uploading)

README.md

 
<script>
-  import { FileUploaderItem } from "carbon-components-svelte";
-</script>
-
-<FileUploaderItem name="README.md" status="uploading" />
-

Item (complete)

README.md

<script>
-  import { FileUploaderItem } from "carbon-components-svelte";
-</script>
-
-<FileUploaderItem name="README.md" status="complete" />
-

Item (invalid)

README.md

<script>
-  import { FileUploaderItem } from "carbon-components-svelte";
-</script>
-
-<FileUploaderItem invalid name="README.md" status="edit" />
-

Drop container

<script>
-  import { FileUploaderDropContainer } from "carbon-components-svelte";
-</script>
-
-<FileUploaderDropContainer
-  labelText="Drag and drop files here or click to upload"
-  multiple
-/>
-

Skeleton

<script>
-  import { FileUploaderSkeleton } from "carbon-components-svelte";
-</script>
-
-<FileUploaderSkeleton />
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/FluidForm/index.html b/components/FluidForm/index.html deleted file mode 100644 index 9cebc5ee..00000000 --- a/components/FluidForm/index.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - - FluidForm - - - -

FluidForm

Source code
Table of Contents

Usage

Fluid form

<script>
-  import {
-    FluidForm,
-    TextInput,
-    PasswordInput,
-  } from "carbon-components-svelte";
-</script>
-
-<FluidForm>
-  <TextInput labelText="User name" placeholder="Enter user name..." required />
-  <PasswordInput
-    required
-    type="password"
-    labelText="Password"
-    placeholder="Enter password..."
-  />
-</FluidForm>
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/Form/index.html b/components/Form/index.html deleted file mode 100644 index 1872f2bc..00000000 --- a/components/Form/index.html +++ /dev/null @@ -1,68 +0,0 @@ - - - - - Form - - - -

Form

Source code
Table of Contents

Usage

Form

Checkboxes
Radio buttons 
<script>
-  import {
-    Form,
-    FormGroup,
-    Checkbox,
-    RadioButtonGroup,
-    RadioButton,
-    Select,
-    SelectItem,
-    Button,
-  } from "carbon-components-svelte";
-</script>
-
-<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>
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/Grid/index.html b/components/Grid/index.html deleted file mode 100644 index 452857d6..00000000 --- a/components/Grid/index.html +++ /dev/null @@ -1,154 +0,0 @@ - - - - - Grid - - - -

Grid

Source code
Table of Contents

Usage

Default

Open in new tab 
<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>
-

Full width

Open in new tab 
<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>
-

Narrow

Open in new tab 
<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>
-

Condensed

Open in new tab 
<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>
-

Responsive

Open in new tab 
<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>
-

Offset columns

Open in new tab 
<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>
-

Aspect ratio columns

Open in new tab 
<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>
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/Icon/index.html b/components/Icon/index.html deleted file mode 100644 index 9c0d1b29..00000000 --- a/components/Icon/index.html +++ /dev/null @@ -1,38 +0,0 @@ - - - - - Icon - - - -

Icon

Source code
Table of Contents

Usage

Default

<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";
-</script>
-
-<Icon render={Add16} />
-<Icon render={Add20} />
-<Icon render={Add24} />
-<Icon render={Add32} />
-

Skeleton

<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";
-</script>
-
-<Icon skeleton render={Add16} />
-<Icon skeleton size={20} render={Add20} />
-<Icon skeleton size={24} render={Add24} />
-<Icon skeleton size={32} render={Add32} />
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/InlineLoading/index.html b/components/InlineLoading/index.html deleted file mode 100644 index 8e0d6550..00000000 --- a/components/InlineLoading/index.html +++ /dev/null @@ -1,32 +0,0 @@ - - - - - InlineLoading - - - -

InlineLoading

Source code
Table of Contents

Usage

Default

Active loading indicator
<script>
-  import { InlineLoading } from "carbon-components-svelte";
-</script>
-
-<InlineLoading />
-

With description

Active loading indicator
Loading metrics...
<script>
-  import { InlineLoading } from "carbon-components-svelte";
-</script>
-
-<InlineLoading description="Loading metrics..." />
-

Status states

Active loading indicator
Active loading indicator
<script>
-  import { InlineLoading } from "carbon-components-svelte";
-</script>
-
-<InlineLoading status="active" />
-<InlineLoading status="inactive" />
-<InlineLoading status="finished" />
-<InlineLoading status="error" />
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/InlineNotification/index.html b/components/InlineNotification/index.html deleted file mode 100644 index 9c8d9a1d..00000000 --- a/components/InlineNotification/index.html +++ /dev/null @@ -1,74 +0,0 @@ - - - - - InlineNotification - - - -

InlineNotification

Source code
Table of Contents

Usage

Default (error)

<script>
-  import { InlineNotification } from "carbon-components-svelte";
-</script>
-
-<InlineNotification on:close />
-

Hidden close button

<script>
-  import { InlineNotification } from "carbon-components-svelte";
-</script>
-
-<InlineNotification
-  hideCloseButton
-  kind="warning"
-  title="Upcoming scheduled maintenance"
-/>
-

With actions

<script>
-  import {
-    InlineNotification,
-    NotificationActionButton,
-  } from "carbon-components-svelte";
-</script>
-
-<InlineNotification kind="warning" title="Upcoming scheduled maintenance">
-  <div slot="actions">
-    <NotificationActionButton>Learn more</NotificationActionButton>
-  </div>
-</InlineNotification>
-

Notification variants

<script>
-  import { InlineNotification } from "carbon-components-svelte";
-</script>
-
-<InlineNotification kind="error" />
-<InlineNotification kind="info" />
-<InlineNotification kind="info-square" />
-<InlineNotification kind="success" />
-<InlineNotification kind="warning" />
-<InlineNotification kind="warning-alt" />
-

Low contrast

<script>
-  import { InlineNotification } from "carbon-components-svelte";
-</script>
-
-<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" />
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/Link/index.html b/components/Link/index.html deleted file mode 100644 index 19846a60..00000000 --- a/components/Link/index.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - - Link - - - -

Link

Source code
Table of Contents

Usage

Default

Carbon Design System
<script>
-  import { Link } from "carbon-components-svelte";
-</script>
-
-<Link href="https://www.carbondesignsystem.com/">Carbon Design System</Link>
-

Inline variant

<script>
-  import { Link } from "carbon-components-svelte";
-</script>
-
-<div>
-  Visit the
-  <Link inline href="https://www.carbondesignsystem.com/">
-    Carbon Design System
-  </Link>.
-</div>
-

Disabled

Carbon Design System

<script>
-  import { Link } from "carbon-components-svelte";
-</script>
-
-<Link disabled href="https://www.carbondesignsystem.com/">
-  Carbon Design System
-</Link>
-

Visited styles

Carbon Design System
<script>
-  import { Link } from "carbon-components-svelte";
-</script>
-
-<Link visited href="https://www.carbondesignsystem.com/">
-  Carbon Design System
-</Link>
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/Loading/index.html b/components/Loading/index.html deleted file mode 100644 index cf9a9c7a..00000000 --- a/components/Loading/index.html +++ /dev/null @@ -1,29 +0,0 @@ - - - - - Loading - - - -

Loading

Source code
Table of Contents

Usage

Default (with overlay)

Open in new tab 
<script>
-  import { Loading } from "carbon-components-svelte";
-</script>
-
-<Loading />
-

No overlay

Active loading indicator
<script>
-  import { Loading } from "carbon-components-svelte";
-</script>
-
-<Loading withOverlay={false} />
-

Small size

Active loading indicator
<script>
-  import { Loading } from "carbon-components-svelte";
-</script>
-
-<Loading withOverlay={false} small />
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/Modal/index.html b/components/Modal/index.html deleted file mode 100644 index 2b3a38ab..00000000 --- a/components/Modal/index.html +++ /dev/null @@ -1,137 +0,0 @@ - - - - - Modal - - - -

Modal

Source code
Table of Contents

Usage

Default (transactional)

Open in new tab 
<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>
-

Danger modal

Open in new tab 
<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>
-

Passive modal

Open in new tab 
<script>
-  import { Button, Modal } from "carbon-components-svelte";
-
-  let open = false;
-</script>
-
-<Button kind="tertiary" on:click={() => (open = true)}>Learn more</Button>
-
-<Modal passiveModal bind:open modalHeading="IBM Cloudant" on:open on:close>
-  <p>
-    IBM Cloudant is a distributed, secure database with global availability and
-    zero vendor lock-in used to build web and mobile apps at scale.
-  </p>
-</Modal>
-

Extra-small size

Open in new tab 
<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>
-

Small size

Open in new tab 
<script>
-  import { Modal } from "carbon-components-svelte";
-</script>
-
-<Modal
-  size="sm"
-  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>
-

Large size

Open in new tab 
<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>
-

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.

Open in new tab 
<script>
-  import { Modal } from "carbon-components-svelte";
-</script>
-
-<Modal
-  preventCloseOnClickOutside
-  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>
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/MultiSelect/index.html b/components/MultiSelect/index.html deleted file mode 100644 index f1666ab5..00000000 --- a/components/MultiSelect/index.html +++ /dev/null @@ -1,54 +0,0 @@ - - - - - MultiSelect - - - -

MultiSelect

Source code
Table of Contents

Usage

Default

<script>
-  import { MultiSelect } from "carbon-components-svelte";
-</script>
-
-<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

<script>
-  import { MultiSelect } from "carbon-components-svelte";
-</script>
-
-<MultiSelect
-  light
-  titleText="Contact"
-  label="Select contact methods..."
-  items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
-/>
-

Inline type

<script>
-  import { MultiSelect } from "carbon-components-svelte";
-</script>
-
-<MultiSelect
-  type="inline"
-  titleText="Contact"
-  label="Select contact methods..."
-  items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
-/>
-

Filterable

<script>
-  import { MultiSelect } from "carbon-components-svelte";
-</script>
-
-<MultiSelect
-  filterable
-  titleText="Contact"
-  placeholder="Filter contact methods..."
-  items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
-/>
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/NumberInput/index.html b/components/NumberInput/index.html deleted file mode 100644 index 757e1ff3..00000000 --- a/components/NumberInput/index.html +++ /dev/null @@ -1,84 +0,0 @@ - - - - - NumberInput - - - -

NumberInput

Source code
Table of Contents

Usage

Default

<script>
-  import { NumberInput } from "carbon-components-svelte";
-</script>
-
-<NumberInput label="Clusters" />
-

With helper text

Clusters provisioned in your region
<script>
-  import { NumberInput } from "carbon-components-svelte";
-</script>
-
-<NumberInput
-  label="Clusters"
-  helperText="Clusters provisioned in your region"
-/>
-

Minimum and maximum values

Clusters provisioned in your region
<script>
-  import { NumberInput } from "carbon-components-svelte";
-</script>
-
-<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

<script>
-  import { NumberInput } from "carbon-components-svelte";
-</script>
-
-<NumberInput hideLabel label="Clusters" />
-

Light variant

<script>
-  import { NumberInput } from "carbon-components-svelte";
-</script>
-
-<NumberInput light label="Clusters" />
-

Mobile variant

<script>
-  import { NumberInput } from "carbon-components-svelte";
-</script>
-
-<NumberInput mobile label="Clusters" />
-

Extra-large size

<script>
-  import { NumberInput } from "carbon-components-svelte";
-</script>
-
-<NumberInput size="xl" label="Clusters" />
-

Small size

<script>
-  import { NumberInput } from "carbon-components-svelte";
-</script>
-
-<NumberInput size="sm" label="Clusters" />
-

Invalid state

An error occurred
<script>
-  import { NumberInput } from "carbon-components-svelte";
-</script>
-
-<NumberInput invalid invalidText="An error occurred" label="Clusters" />
-

Disabled state

<script>
-  import { NumberInput } from "carbon-components-svelte";
-</script>
-
-<NumberInput disabled label="Clusters" />
-

Skeleton

<script>
-  import { NumberInputSkeleton } from "carbon-components-svelte";
-</script>
-
-<NumberInputSkeleton />
-

Skeleton without label

<script>
-  import { NumberInputSkeleton } from "carbon-components-svelte";
-</script>
-
-<NumberInputSkeleton hideLabel />
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/OrderedList/index.html b/components/OrderedList/index.html deleted file mode 100644 index c3f374f6..00000000 --- a/components/OrderedList/index.html +++ /dev/null @@ -1,61 +0,0 @@ - - - - - OrderedList - - - -

OrderedList

Source code
Table of Contents

Usage

Default

  1. Ordered list item
  2. Ordered list item
  3. Ordered list item
<script>
-  import { OrderedList, ListItem } from "carbon-components-svelte";
-</script>
-
-<OrderedList>
-  <ListItem>Ordered list item</ListItem>
-  <ListItem>Ordered list item</ListItem>
-  <ListItem>Ordered list item</ListItem>
-</OrderedList>
-
  1. Ordered list item
  2. Ordered list item
  3. Ordered list item
<script>
-  import { OrderedList, ListItem, Link } from "carbon-components-svelte";
-</script>
-
-<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

  1. Ordered list level 1 -
    1. Ordered list level 2
    2. Ordered list level 3 -
      1. Ordered list level 3
      2. Ordered list level 3
  2. Ordered list level 1
  3. Ordered list level 1
<script>
-  import { OrderedList, ListItem } from "carbon-components-svelte";
-</script>
-
-<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>
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/OverflowMenu/index.html b/components/OverflowMenu/index.html deleted file mode 100644 index 51310313..00000000 --- a/components/OverflowMenu/index.html +++ /dev/null @@ -1,85 +0,0 @@ - - - - - OverflowMenu - - - -

OverflowMenu

Source code
Table of Contents

Usage

Default

<script>
-  import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";
-</script>
-
-<OverflowMenu>
-  <OverflowMenuItem text="Manage credentials" />
-  <OverflowMenuItem
-    href="https://cloud.ibm.com/docs/api-gateway/"
-    text="API documentation"
-  />
-  <OverflowMenuItem danger text="Delete service" />
-</OverflowMenu>
-

Flipped

<script>
-  import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";
-</script>
-
-<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>
-
<script>
-  import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";
-</script>
-
-<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.

<script>
-  import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";
-</script>
-
-<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

<script>
-  import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";
-</script>
-
-<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>
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/Pagination/index.html b/components/Pagination/index.html deleted file mode 100644 index ec536d65..00000000 --- a/components/Pagination/index.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - - Pagination - - - -

Pagination

Source code
Table of Contents

Usage

Default

1–10 of 102 items
of 11 pages 
<script>
-  import { Pagination } from "carbon-components-svelte";
-</script>
-
-<Pagination totalItems={102} pageSizes={[10, 15, 20]} />
-

Current page

31–40 of 102 items
of 11 pages 
<script>
-  import { Pagination } from "carbon-components-svelte";
-</script>
-
-<Pagination totalItems={102} page={4} />
-

Custom page sizes

1–36 of 102 items
of 3 pages 
<script>
-  import { Pagination } from "carbon-components-svelte";
-</script>
-
-<Pagination totalItems={102} pageSizes={[16, 36, 99]} pageSize={36} />
-

Hidden page input

1–10 of 102 items
<script>
-  import { Pagination } from "carbon-components-svelte";
-</script>
-
-<Pagination totalItems={102} pageInputDisabled />
-

Skeleton

<script>
-  import { PaginationSkeleton } from "carbon-components-svelte";
-</script>
-
-<PaginationSkeleton />
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/PaginationNav/index.html b/components/PaginationNav/index.html deleted file mode 100644 index 79f69f80..00000000 --- a/components/PaginationNav/index.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - - PaginationNav - - - -

PaginationNav

Source code
Table of Contents

Usage

Default

<script>
-  import { PaginationNav } from "carbon-components-svelte";
-</script>
-
-<PaginationNav />
-

Loopable

<script>
-  import { PaginationNav } from "carbon-components-svelte";
-</script>
-
-<PaginationNav total={3} loop />
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/PasswordInput/index.html b/components/PasswordInput/index.html deleted file mode 100644 index 590df05d..00000000 --- a/components/PasswordInput/index.html +++ /dev/null @@ -1,64 +0,0 @@ - - - - - PasswordInput - - - -

PasswordInput

Source code
Table of Contents

Usage

Default

<script>
-  import { PasswordInput } from "carbon-components-svelte";
-</script>
-
-<PasswordInput labelText="Password" placeholder="Enter password..." />
-

Password is visible

Set prop type to "text" to toggle password visibility.

<script>
-  import { PasswordInput } from "carbon-components-svelte";
-</script>
-
-<PasswordInput
-  labelText="Password"
-  type="text"
-  placeholder="Enter password..."
-  value="as_lta0890sdfpo__!9901"
-/>
-

Hidden label

<script>
-  import { PasswordInput } from "carbon-components-svelte";
-</script>
-
-<PasswordInput hideLabel labelText="Password" placeholder="Enter password..." />
-

Light variant

<script>
-  import { PasswordInput } from "carbon-components-svelte";
-</script>
-
-<PasswordInput light labelText="Password" placeholder="Enter password..." />
-

Extra-large size

<script>
-  import { PasswordInput } from "carbon-components-svelte";
-</script>
-
-<PasswordInput size="xl" labelText="Password" placeholder="Enter password..." />
-

Small size

<script>
-  import { PasswordInput } from "carbon-components-svelte";
-</script>
-
-<PasswordInput size="sm" labelText="Password" placeholder="Enter password..." />
-

Invalid state

Incorrect user name or password.
<script>
-  import { PasswordInput } from "carbon-components-svelte";
-</script>
-
-<PasswordInput
-  invalid
-  invalidText="Incorrect user name or password."
-  labelText="Password"
-  placeholder="Enter password..."
-/>
-

Disabled state

<script>
-  import { PasswordInput } from "carbon-components-svelte";
-</script>
-
-<PasswordInput disabled labelText="Password" placeholder="Enter password..." />
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/ProgressIndicator/index.html b/components/ProgressIndicator/index.html deleted file mode 100644 index b292ba4b..00000000 --- a/components/ProgressIndicator/index.html +++ /dev/null @@ -1,79 +0,0 @@ - - - - - ProgressIndicator - - - -

ProgressIndicator

Source code
Table of Contents

Usage

Default (horizontal)

<script>
-  import { ProgressIndicator, ProgressStep } from "carbon-components-svelte";
-</script>
-
-<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

<script>
-  import { ProgressIndicator, ProgressStep } from "carbon-components-svelte";
-</script>
-
-<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

<script>
-  import { ProgressIndicator, ProgressStep } from "carbon-components-svelte";
-</script>
-
-<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

<script>
-  import { ProgressIndicatorSkeleton } from "carbon-components-svelte";
-</script>
-
-<ProgressIndicatorSkeleton />
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/RadioButton/index.html b/components/RadioButton/index.html deleted file mode 100644 index c61623c1..00000000 --- a/components/RadioButton/index.html +++ /dev/null @@ -1,89 +0,0 @@ - - - - - RadioButton - - - -

RadioButton

Source code
Table of Contents

Usage

Default

Storage tier (disk) 
<script>
-  import {
-    FormGroup,
-    RadioButtonGroup,
-    RadioButton,
-  } from "carbon-components-svelte";
-</script>
-
-<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

Storage tier (disk) 
<script>
-  import {
-    FormGroup,
-    RadioButtonGroup,
-    RadioButton,
-  } from "carbon-components-svelte";
-</script>
-
-<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

Storage tier (disk) 
<script>
-  import {
-    FormGroup,
-    RadioButtonGroup,
-    RadioButton,
-  } from "carbon-components-svelte";
-</script>
-
-<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

Storage tier (disk) 
<script>
-  import {
-    FormGroup,
-    RadioButtonGroup,
-    RadioButtonSkeleton,
-  } from "carbon-components-svelte";
-</script>
-
-<FormGroup legendText="Storage tier (disk)">
-  <RadioButtonGroup>
-    <RadioButtonSkeleton />
-    <RadioButtonSkeleton />
-    <RadioButtonSkeleton />
-  </RadioButtonGroup>
-</FormGroup>
-

Skeleton (vertical orientation)

Storage tier (disk) 
<script>
-  import {
-    FormGroup,
-    RadioButtonGroup,
-    RadioButtonSkeleton,
-  } from "carbon-components-svelte";
-</script>
-
-<FormGroup legendText="Storage tier (disk)">
-  <RadioButtonGroup orientation="vertical">
-    <RadioButtonSkeleton />
-    <RadioButtonSkeleton />
-    <RadioButtonSkeleton />
-  </RadioButtonGroup>
-</FormGroup>
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/RadioTile/index.html b/components/RadioTile/index.html deleted file mode 100644 index 065475b2..00000000 --- a/components/RadioTile/index.html +++ /dev/null @@ -1,32 +0,0 @@ - - - - - RadioTile - - - -

RadioTile

Source code
Table of Contents

Usage

Default

Service pricing tiers 
<script>
-  import { TileGroup, RadioTile } from "carbon-components-svelte";
-</script>
-
-<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

Service pricing tiers 
<script>
-  import { TileGroup, RadioTile } from "carbon-components-svelte";
-</script>
-
-<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>
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/Search/index.html b/components/Search/index.html deleted file mode 100644 index 2ed89622..00000000 --- a/components/Search/index.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - - Search - - - -

Search

Source code
Table of Contents

Usage

Default

<script>
-  import { Search } from "carbon-components-svelte";
-</script>
-
-<Search />
-

Default value

<script>
-  import { Search } from "carbon-components-svelte";
-</script>
-
-<Search placeholder="Search catalog..." value="Cloud functions" />
-

Light variant

<script>
-  import { Search } from "carbon-components-svelte";
-</script>
-
-<Search light />
-

Large size

<script>
-  import { Search } from "carbon-components-svelte";
-</script>
-
-<Search size="lg" />
-

Small size

<script>
-  import { Search } from "carbon-components-svelte";
-</script>
-
-<Search size="sm" />
-

Skeleton

<script>
-  import { Search } from "carbon-components-svelte";
-</script>
-
-<Search skeleton />
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/Select/index.html b/components/Select/index.html deleted file mode 100644 index 38f65ede..00000000 --- a/components/Select/index.html +++ /dev/null @@ -1,78 +0,0 @@ - - - - - Select - - - -

Select

Source code
Table of Contents

Usage

Default

<script>
-  import { Select, SelectItem } from "carbon-components-svelte";
-</script>
-
-<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

<script>
-  import {
-    Select,
-    SelectItem,
-    SelectItemGroup,
-  } from "carbon-components-svelte";
-</script>
-
-<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

<script>
-  import { Select, SelectItem } from "carbon-components-svelte";
-</script>
-
-<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

<script>
-  import { Select, SelectItem } from "carbon-components-svelte";
-</script>
-
-<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

<script>
-  import { Select, SelectItem } from "carbon-components-svelte";
-</script>
-
-<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

<script>
-  import { SelectSkeleton } from "carbon-components-svelte";
-</script>
-
-<SelectSkeleton />
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/SelectableTile/index.html b/components/SelectableTile/index.html deleted file mode 100644 index bf8544a1..00000000 --- a/components/SelectableTile/index.html +++ /dev/null @@ -1,32 +0,0 @@ - - - - - SelectableTile - - - -

SelectableTile

Source code
Table of Contents

Usage

Multi-selectable tiles

<script>
-  import { SelectableTile } from "carbon-components-svelte";
-</script>
-
-<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

<script>
-  import { SelectableTile } from "carbon-components-svelte";
-</script>
-
-<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>
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/SkeletonPlaceholder/index.html b/components/SkeletonPlaceholder/index.html deleted file mode 100644 index caea754c..00000000 --- a/components/SkeletonPlaceholder/index.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - - SkeletonPlaceholder - - - -

SkeletonPlaceholder

Source code
Table of Contents

Usage

Default

<script>
-  import { SkeletonPlaceholder } from "carbon-components-svelte";
-</script>
-
-<SkeletonPlaceholder />
-

Custom size

<script>
-  import { SkeletonPlaceholder } from "carbon-components-svelte";
-</script>
-
-<SkeletonPlaceholder style="height: 12rem; width: 12rem;" />
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/SkeletonText/index.html b/components/SkeletonText/index.html deleted file mode 100644 index fc55a295..00000000 --- a/components/SkeletonText/index.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - - SkeletonText - - - -

SkeletonText

Source code
Table of Contents

Usage

Default

<script>
-  import { SkeletonText } from "carbon-components-svelte";
-</script>
-
-<SkeletonText />
-

Heading variant

<script>
-  import { SkeletonText } from "carbon-components-svelte";
-</script>
-
-<SkeletonText heading />
-

Heading variant

<script>
-  import { SkeletonText } from "carbon-components-svelte";
-</script>
-
-<SkeletonText heading />
-

Paragraph variant

<script>
-  import { SkeletonText } from "carbon-components-svelte";
-</script>
-
-<SkeletonText paragraph />
-

Paragraph with max width

<script>
-  import { SkeletonText } from "carbon-components-svelte";
-</script>
-
-<SkeletonText paragraph width="50%" />
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/Slider/index.html b/components/Slider/index.html deleted file mode 100644 index 459493d7..00000000 --- a/components/Slider/index.html +++ /dev/null @@ -1,65 +0,0 @@ - - - - - Slider - - - -

Slider

Source code
Table of Contents

Usage

Default

0 100 
<script>
-  import { Slider } from "carbon-components-svelte";
-</script>
-
-<Slider />
-

Custom minimum, maximum values

10 990 MB 
<script>
-  import { Slider } from "carbon-components-svelte";
-</script>
-
-<Slider
-  labelText="Runtime memory (MB)"
-  min={10}
-  max={990}
-  maxLabel="990 MB"
-  value={100}
-/>
-

Custom step value

10 990 MB 
<script>
-  import { Slider } from "carbon-components-svelte";
-</script>
-
-<Slider
-  labelText="Runtime memory (MB)"
-  min={10}
-  max={990}
-  maxLabel="990 MB"
-  value={100}
-  step={10}
-/>
-

Light variant

10 990 MB 
<script>
-  import { Slider } from "carbon-components-svelte";
-</script>
-
-<Slider
-  light
-  labelText="Runtime memory (MB)"
-  min={10}
-  max={990}
-  maxLabel="990 MB"
-  value={100}
-  step={10}
-/>
-

Skeleton

<script>
-  import { SliderSkeleton } from "carbon-components-svelte";
-</script>
-
-<SliderSkeleton />
-

Skeleton (hidden label)

<script>
-  import { SliderSkeleton } from "carbon-components-svelte";
-</script>
-
-<SliderSkeleton hideLabel />
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/StructuredList/index.html b/components/StructuredList/index.html deleted file mode 100644 index 099fc227..00000000 --- a/components/StructuredList/index.html +++ /dev/null @@ -1,137 +0,0 @@ - - - - - StructuredList - - - -

StructuredList

Source code
Table of Contents

Usage

Default (read-only)

Column A
Column B
Column C
Row 1
Row 1
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.
Row 2
Row 2
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.
Row 3
Row 3
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.
<script>
-  import {
-    StructuredList,
-    StructuredListHead,
-    StructuredListRow,
-    StructuredListCell,
-    StructuredListBody,
-  } from "carbon-components-svelte";
-</script>
-
-<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

ColumnA
ColumnB
ColumnC
<script>
-  import {
-    StructuredList,
-    StructuredListHead,
-    StructuredListRow,
-    StructuredListCell,
-    StructuredListBody,
-    StructuredListInput,
-  } from "carbon-components-svelte";
-  import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
-</script>
-
-<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

<script>
-  import { StructuredListSkeleton } from "carbon-components-svelte";
-</script>
-
-<StructuredListSkeleton rows={3} />
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/Tabs/index.html b/components/Tabs/index.html deleted file mode 100644 index 28b206fb..00000000 --- a/components/Tabs/index.html +++ /dev/null @@ -1,47 +0,0 @@ - - - - - Tabs - - - -

Tabs

Source code
Table of Contents

Usage

Default

Content 1
<script>
-  import { Tabs, Tab, TabContent } from "carbon-components-svelte";
-</script>
-
-<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

Content 1
<script>
-  import { Tabs, Tab, TabContent } from "carbon-components-svelte";
-</script>
-
-<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

 
  •  
  •  
  •  
<script>
-  import { TabsSkeleton } from "carbon-components-svelte";
-</script>
-
-<TabsSkeleton count={3} />
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/Tag/index.html b/components/Tag/index.html deleted file mode 100644 index 83961533..00000000 --- a/components/Tag/index.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - - Tag - - - -

Tag

Source code
Table of Contents

Usage

Default

IBM Cloud
<script>
-  import { Tag } from "carbon-components-svelte";
-</script>
-
-<Tag>IBM Cloud</Tag>
-

Tag types

red magenta purple blue cyan teal green gray cool-gray warm-gray high-contrast
<script>
-  import { Tag } from "carbon-components-svelte";
-</script>
-
-<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

Filterable 
<script>
-  import { Tag } from "carbon-components-svelte";
-</script>
-
-<Tag filter on:click>Filterable</Tag>
-

Skeleton

<script>
-  import { Tag } from "carbon-components-svelte";
-</script>
-
-<Tag skeleton />
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/TextArea/index.html b/components/TextArea/index.html deleted file mode 100644 index d7b7fca2..00000000 --- a/components/TextArea/index.html +++ /dev/null @@ -1,84 +0,0 @@ - - - - - TextArea - - - -

TextArea

Source code
Table of Contents

Usage

Default

<script>
-  import { TextArea } from "carbon-components-svelte";
-</script>
-
-<TextArea labelText="App description" placeholder="Enter a description..." />
-

With helper text

A rich description helps us better recommend related products and services
<script>
-  import { TextArea } from "carbon-components-svelte";
-</script>
-
-<TextArea
-  labelText="App description"
-  helperText="A rich description helps us better recommend related products and services"
-  placeholder="Enter a description..."
-/>
-

Hidden label

<script>
-  import { TextArea } from "carbon-components-svelte";
-</script>
-
-<TextArea
-  hideLabel
-  labelText="App description"
-  placeholder="Enter a description..."
-/>
-

Light variant

<script>
-  import { TextArea } from "carbon-components-svelte";
-</script>
-
-<TextArea
-  light
-  labelText="App description"
-  placeholder="Enter a description..."
-/>
-

Custom rows

<script>
-  import { TextArea } from "carbon-components-svelte";
-</script>
-
-<TextArea
-  rows={10}
-  labelText="App description"
-  placeholder="Enter a description..."
-/>
-

Invalid state

Only plain text characters are allowed
<script>
-  import { TextArea } from "carbon-components-svelte";
-</script>
-
-<TextArea
-  invalid
-  invalidText="Only plain text characters are allowed"
-  labelText="App description"
-  placeholder="Enter a description..."
-/>
-

Disabled state

<script>
-  import { TextArea } from "carbon-components-svelte";
-</script>
-
-<TextArea
-  disabled
-  labelText="App description"
-  placeholder="Enter a description..."
-/>
-

Skeleton

<script>
-  import { TextAreaSkeleton } from "carbon-components-svelte";
-</script>
-
-<TextAreaSkeleton />
-

Skeleton without label

<script>
-  import { TextAreaSkeleton } from "carbon-components-svelte";
-</script>
-
-<TextAreaSkeleton hideLabel />
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/TextInput/index.html b/components/TextInput/index.html deleted file mode 100644 index c6a8b577..00000000 --- a/components/TextInput/index.html +++ /dev/null @@ -1,78 +0,0 @@ - - - - - TextInput - - - -

TextInput

Source code
Table of Contents

Usage

Default

<script>
-  import { TextInput } from "carbon-components-svelte";
-</script>
-
-<TextInput labelText="User name" placeholder="Enter user name..." />
-

With helper text

Your user name is associated with your email
<script>
-  import { TextInput } from "carbon-components-svelte";
-</script>
-
-<TextInput
-  labelText="User name"
-  helperText="Your user name is associated with your email"
-  placeholder="Enter user name..."
-/>
-

Hidden label

<script>
-  import { TextInput } from "carbon-components-svelte";
-</script>
-
-<TextInput hideLabel labelText="User name" placeholder="Enter user name..." />
-

Light variant

<script>
-  import { TextInput } from "carbon-components-svelte";
-</script>
-
-<TextInput light labelText="User name" placeholder="Enter user name..." />
-

Inline

<script>
-  import { TextInput } from "carbon-components-svelte";
-</script>
-
-<TextInput inline labelText="User name" placeholder="Enter user name..." />
-

Extra-large size

<script>
-  import { TextInput } from "carbon-components-svelte";
-</script>
-
-<TextInput size="xl" labelText="User name" placeholder="Enter user name..." />
-

Small size

<script>
-  import { TextInput } from "carbon-components-svelte";
-</script>
-
-<TextInput size="sm" labelText="User name" placeholder="Enter user name..." />
-

Invalid state

User name is already taken. Please try another.
<script>
-  import { TextInput } from "carbon-components-svelte";
-</script>
-
-<TextInput
-  invalid
-  invalidText="User name is already taken. Please try another."
-  labelText="User name"
-  placeholder="Enter user name..."
-/>
-

Disabled state

<script>
-  import { TextInput } from "carbon-components-svelte";
-</script>
-
-<TextInput disabled labelText="User name" placeholder="Enter user name..." />
-

Skeleton

<script>
-  import { TextInputSkeleton } from "carbon-components-svelte";
-</script>
-
-<TextInputSkeleton />
-

Skeleton without label

<script>
-  import { TextInputSkeleton } from "carbon-components-svelte";
-</script>
-
-<TextInputSkeleton hideLabel />
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/Tile/index.html b/components/Tile/index.html deleted file mode 100644 index 735f6c7e..00000000 --- a/components/Tile/index.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - - Tile - - - -

Tile

Source code
Table of Contents

Usage

Default

Content
<script>
-  import { Tile } from "carbon-components-svelte";
-</script>
-
-<Tile>Content</Tile>
-

Light variant

Content
<script>
-  import { Tile } from "carbon-components-svelte";
-</script>
-
-<Tile light>Content</Tile>
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/TimePicker/index.html b/components/TimePicker/index.html deleted file mode 100644 index 3a200d42..00000000 --- a/components/TimePicker/index.html +++ /dev/null @@ -1,68 +0,0 @@ - - - - - TimePicker - - - -

TimePicker

Source code
Table of Contents

Usage

Default

Open list of options
Open list of options
<script>
-  import {
-    TimePicker,
-    TimePickerSelect,
-    SelectItem,
-  } from "carbon-components-svelte";
-</script>
-
-<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

Open list of options
Open list of options
<script>
-  import {
-    TimePicker,
-    TimePickerSelect,
-    SelectItem,
-  } from "carbon-components-svelte";
-</script>
-
-<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

Open list of options
Open list of options
<script>
-  import {
-    TimePicker,
-    TimePickerSelect,
-    SelectItem,
-  } from "carbon-components-svelte";
-</script>
-
-<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>
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/ToastNotification/index.html b/components/ToastNotification/index.html deleted file mode 100644 index 2c96c708..00000000 --- a/components/ToastNotification/index.html +++ /dev/null @@ -1,61 +0,0 @@ - - - - - ToastNotification - - - -

ToastNotification

Source code
Table of Contents

Usage

Default (error)

<script>
-  import { ToastNotification } from "carbon-components-svelte";
-</script>
-
-<ToastNotification />
-

Hidden close button

<script>
-  import { ToastNotification } from "carbon-components-svelte";
-</script>
-
-<ToastNotification
-  hideCloseButton
-  kind="warning"
-  title="Upcoming scheduled maintenance"
-/>
-

Notification variants

<script>
-  import { ToastNotification } from "carbon-components-svelte";
-</script>
-
-<ToastNotification kind="error" />
-<ToastNotification kind="info" />
-<ToastNotification kind="info-square" />
-<ToastNotification kind="success" />
-<ToastNotification kind="warning" />
-<ToastNotification kind="warning-alt" />
-

Low contrast

<script>
-  import { ToastNotification } from "carbon-components-svelte";
-</script>
-
-<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" />
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/Toggle/index.html b/components/Toggle/index.html deleted file mode 100644 index 6a5e5e13..00000000 --- a/components/Toggle/index.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - - Toggle - - - -

Toggle

Source code
Table of Contents

Usage

Default (untoggled)

<script>
-  import { Toggle } from "carbon-components-svelte";
-</script>
-
-<Toggle labelText="Push notifications" />
-

Toggled

<script>
-  import { Toggle } from "carbon-components-svelte";
-</script>
-
-<Toggle labelText="Push notifications" toggled />
-

Custom labels

<script>
-  import { Toggle } from "carbon-components-svelte";
-</script>
-
-<Toggle labelText="Push notifications" labelA="No" labelB="Yes" />
-

Disabled

<script>
-  import { Toggle } from "carbon-components-svelte";
-</script>
-
-<Toggle labelText="Push notifications" disabled />
-

Skeleton

<script>
-  import { ToggleSkeleton } from "carbon-components-svelte";
-</script>
-
-<ToggleSkeleton />
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/ToggleSmall/index.html b/components/ToggleSmall/index.html deleted file mode 100644 index 4f29ea8e..00000000 --- a/components/ToggleSmall/index.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - - ToggleSmall - - - -

ToggleSmall

Source code
Table of Contents

Usage

Default (untoggled)

<script>
-  import { ToggleSmall } from "carbon-components-svelte";
-</script>
-
-<ToggleSmall labelText="Push notifications" />
-

Toggled

<script>
-  import { ToggleSmall } from "carbon-components-svelte";
-</script>
-
-<ToggleSmall labelText="Push notifications" toggled />
-

Custom labels

<script>
-  import { ToggleSmall } from "carbon-components-svelte";
-</script>
-
-<ToggleSmall labelText="Push notifications" labelA="No" labelB="Yes" />
-

Disabled

<script>
-  import { ToggleSmall } from "carbon-components-svelte";
-</script>
-
-<ToggleSmall labelText="Push notifications" disabled />
-

Skeleton

<script>
-  import { ToggleSmallSkeleton } from "carbon-components-svelte";
-</script>
-
-<ToggleSmallSkeleton />
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/Tooltip/index.html b/components/Tooltip/index.html deleted file mode 100644 index 1e6f2d2d..00000000 --- a/components/Tooltip/index.html +++ /dev/null @@ -1,71 +0,0 @@ - - - - - Tooltip - - - -

Tooltip

Source code
Table of Contents

Usage

Default (icon-only, “bottom” direction)

<script>
-  import { Tooltip } from "carbon-components-svelte";
-</script>
-
-<Tooltip>
-  <p>Resources are provisioned based on your account's organization.</p>
-</Tooltip>
-

With trigger text

Resource list 
<script>
-  import { Tooltip } from "carbon-components-svelte";
-</script>
-
-<Tooltip triggerText="Resource list">
-  <p>Resources are provisioned based on your account's organization.</p>
-</Tooltip>
-

Directions

Top
Right
Bottom
Left 
<script>
-  import { Tooltip } from "carbon-components-svelte";
-</script>
-
-<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

Resource list 
<script>
-  import { Tooltip, Link, Button } from "carbon-components-svelte";
-</script>
-
-<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)

Resource list 
<script>
-  import { Tooltip } from "carbon-components-svelte";
-  import Catalog16 from "carbon-icons-svelte/lib/Catalog16";
-</script>
-
-<Tooltip triggerText="Resource list" icon={Catalog16}>
-  <p>Resources are provisioned based on your account's organization.</p>
-</Tooltip>
-

Custom icon (slot)

Resource list 
<script>
-  import { Tooltip } from "carbon-components-svelte";
-</script>
-
-<Tooltip triggerText="Resource list">
-  <div slot="icon" style="width: 1rem; height: 1rem; outline: 1px solid red;" />
-  <p>Resources are provisioned based on your account's organization.</p>
-</Tooltip>
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/TooltipDefinition/index.html b/components/TooltipDefinition/index.html deleted file mode 100644 index 4038dbf7..00000000 --- a/components/TooltipDefinition/index.html +++ /dev/null @@ -1,34 +0,0 @@ - - - - - TooltipDefinition - - - -

TooltipDefinition

Source code
Table of Contents

Usage

Default (“bottom” direction, “center” aligned)

<script>
-  import { TooltipDefinition } from "carbon-components-svelte";
-</script>
-
-<TooltipDefinition
-  tooltipText="IBM Corporate Headquarters is based in Armonk, New York."
->
-  Armonk
-</TooltipDefinition>
-

Custom direction, alignment

<script>
-  import { TooltipDefinition } from "carbon-components-svelte";
-</script>
-
-<TooltipDefinition
-  direction="top"
-  align="start"
-  tooltipText="IBM Corporate Headquarters is based in Armonk, New York."
->
-  Armonk
-</TooltipDefinition>
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/TooltipIcon/index.html b/components/TooltipIcon/index.html deleted file mode 100644 index e029257b..00000000 --- a/components/TooltipIcon/index.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - - TooltipIcon - - - -

TooltipIcon

Source code
Table of Contents

Usage

Default (“bottom” direction, “center” aligned)

<script>
-  import { TooltipIcon } from "carbon-components-svelte";
-  import Carbon24 from "carbon-icons-svelte/lib/Carbon24";
-</script>
-
-<TooltipIcon tooltipText="Carbon is an open source design system by IBM.">
-  <Carbon24 />
-</TooltipIcon>
-

Directions

<script>
-  import { TooltipIcon } from "carbon-components-svelte";
-  import Filter20 from "carbon-icons-svelte/lib/Filter20";
-</script>
-
-<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>
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/UIShell/index.html b/components/UIShell/index.html deleted file mode 100644 index 3612215c..00000000 --- a/components/UIShell/index.html +++ /dev/null @@ -1,211 +0,0 @@ - - - - - UIShell - - - -

UIShell

Source code
Table of Contents

Usage

Header with side navigation

Open in new tab 
<script>
-  import {
-    Header,
-    HeaderNav,
-    HeaderNavItem,
-    HeaderNavMenu,
-    SideNav,
-    SideNavItems,
-    SideNavMenu,
-    SideNavMenuItem,
-    SideNavLink,
-    SkipToContent,
-    Content,
-    Grid,
-    Row,
-    Column,
-  } from "carbon-components-svelte";
-
-  let isSideNavOpen = false;
-</script>
-
-<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
-  <div slot="skip-to-content">
-    <SkipToContent />
-  </div>
-
-  <HeaderNav>
-    <HeaderNavItem href="/" text="Link 1" />
-    <HeaderNavItem href="/" text="Link 2" />
-    <HeaderNavItem href="/" text="Link 3" />
-    <HeaderNavMenu text="Menu">
-      <HeaderNavItem href="/" text="Link 1" />
-      <HeaderNavItem href="/" text="Link 2" />
-      <HeaderNavItem href="/" text="Link 3" />
-    </HeaderNavMenu>
-  </HeaderNav>
-</Header>
-
-<SideNav bind:isOpen={isSideNavOpen}>
-  <SideNavItems>
-    <SideNavLink text="Link 1" />
-    <SideNavLink text="Link 2" />
-    <SideNavLink text="Link 3" />
-    <SideNavMenu text="Menu">
-      <SideNavMenuItem href="/" text="Link 1" />
-      <SideNavMenuItem href="/" text="Link 2" />
-      <SideNavMenuItem href="/" text="Link 3" />
-    </SideNavMenu>
-  </SideNavItems>
-</SideNav>
-
-<Content>
-  <Grid>
-    <Row>
-      <Column>
-        <h1>Welcome</h1>
-      </Column>
-    </Row>
-  </Grid>
-</Content>
-

Header with app switcher

Open in new tab 
<script>
-  import {
-    Header,
-    HeaderUtilities,
-    HeaderAction,
-    HeaderPanelLinks,
-    HeaderPanelDivider,
-    HeaderPanelLink,
-    SideNav,
-    SideNavItems,
-    SideNavMenu,
-    SideNavMenuItem,
-    SideNavLink,
-    SkipToContent,
-    Content,
-    Grid,
-    Row,
-    Column,
-  } from "carbon-components-svelte";
-
-  let isSideNavOpen = false;
-  let isOpen = false;
-</script>
-
-<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
-  <div slot="skip-to-content">
-    <SkipToContent />
-  </div>
-  <HeaderUtilities>
-    <HeaderAction bind:isOpen>
-      <HeaderPanelLinks>
-        <HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
-        <HeaderPanelLink>Switcher item 1</HeaderPanelLink>
-        <HeaderPanelDivider>Switcher subject 2</HeaderPanelDivider>
-        <HeaderPanelLink>Switcher item 1</HeaderPanelLink>
-        <HeaderPanelLink>Switcher item 2</HeaderPanelLink>
-        <HeaderPanelLink>Switcher item 3</HeaderPanelLink>
-        <HeaderPanelLink>Switcher item 4</HeaderPanelLink>
-        <HeaderPanelLink>Switcher item 5</HeaderPanelLink>
-      </HeaderPanelLinks>
-    </HeaderAction>
-  </HeaderUtilities>
-</Header>
-
-<SideNav bind:isOpen={isSideNavOpen}>
-  <SideNavItems>
-    <SideNavLink text="Link 1" />
-    <SideNavLink text="Link 2" />
-    <SideNavLink text="Link 3" />
-    <SideNavMenu text="Menu">
-      <SideNavMenuItem href="/" text="Link 1" />
-      <SideNavMenuItem href="/" text="Link 2" />
-      <SideNavMenuItem href="/" text="Link 3" />
-    </SideNavMenu>
-  </SideNavItems>
-</SideNav>
-
-<Content>
-  <Grid>
-    <Row>
-      <Column>
-        <h1>Welcome</h1>
-      </Column>
-    </Row>
-  </Grid>
-</Content>
-

Header with utilities

Open in new tab 
<script>
-  import {
-    Header,
-    HeaderUtilities,
-    HeaderAction,
-    HeaderActionSearch,
-    HeaderGlobalAction,
-    HeaderPanelLinks,
-    HeaderPanelDivider,
-    HeaderPanelLink,
-    SideNav,
-    SideNavItems,
-    SideNavMenu,
-    SideNavMenuItem,
-    SideNavLink,
-    SkipToContent,
-    Content,
-    Grid,
-    Row,
-    Column,
-  } from "carbon-components-svelte";
-  import SettingsAdjust20 from "carbon-icons-svelte/lib/SettingsAdjust20";
-
-  let isSideNavOpen = false;
-  let isOpen = false;
-</script>
-
-<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
-  <div slot="skip-to-content">
-    <SkipToContent />
-  </div>
-  <HeaderUtilities>
-    <HeaderActionSearch />
-    <HeaderGlobalAction aria-label="Settings" icon={SettingsAdjust20} />
-    <HeaderAction bind:isOpen>
-      <HeaderPanelLinks>
-        <HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
-        <HeaderPanelLink>Switcher item 1</HeaderPanelLink>
-        <HeaderPanelDivider>Switcher subject 2</HeaderPanelDivider>
-        <HeaderPanelLink>Switcher item 1</HeaderPanelLink>
-        <HeaderPanelLink>Switcher item 2</HeaderPanelLink>
-        <HeaderPanelLink>Switcher item 3</HeaderPanelLink>
-        <HeaderPanelLink>Switcher item 4</HeaderPanelLink>
-        <HeaderPanelLink>Switcher item 5</HeaderPanelLink>
-      </HeaderPanelLinks>
-    </HeaderAction>
-  </HeaderUtilities>
-</Header>
-
-<SideNav bind:isOpen={isSideNavOpen}>
-  <SideNavItems>
-    <SideNavLink text="Link 1" />
-    <SideNavLink text="Link 2" />
-    <SideNavLink text="Link 3" />
-    <SideNavMenu text="Menu">
-      <SideNavMenuItem href="/" text="Link 1" />
-      <SideNavMenuItem href="/" text="Link 2" />
-      <SideNavMenuItem href="/" text="Link 3" />
-    </SideNavMenu>
-  </SideNavItems>
-</SideNav>
-
-<Content>
-  <Grid>
-    <Row>
-      <Column>
-        <h1>Welcome</h1>
-      </Column>
-    </Row>
-  </Grid>
-</Content>
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/components/UnorderedList/index.html b/components/UnorderedList/index.html deleted file mode 100644 index 33c16ff2..00000000 --- a/components/UnorderedList/index.html +++ /dev/null @@ -1,61 +0,0 @@ - - - - - UnorderedList - - - -

UnorderedList

Source code
Table of Contents

Usage

Default

  • Unordered list item
  • Unordered list item
  • Unordered list item
<script>
-  import { UnorderedList, ListItem } from "carbon-components-svelte";
-</script>
-
-<UnorderedList>
-  <ListItem>Unordered list item</ListItem>
-  <ListItem>Unordered list item</ListItem>
-  <ListItem>Unordered list item</ListItem>
-</UnorderedList>
-
<script>
-  import { UnorderedList, ListItem, Link } from "carbon-components-svelte";
-</script>
-
-<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

  • Unordered list level 1 -
    • Unordered list level 2
    • Unordered list level 3 -
      • Unordered list level 3
      • Unordered list level 3
  • Unordered list level 1
  • Unordered list level 1
<script>
-  import { UnorderedList, ListItem } from "carbon-components-svelte";
-</script>
-
-<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>
-
Table of Contents
- - - - - \ No newline at end of file diff --git a/framed/Grid/AspectRatioColumns/index.html b/framed/Grid/AspectRatioColumns/index.html deleted file mode 100644 index 7974da10..00000000 --- a/framed/Grid/AspectRatioColumns/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - Carbon Components Svelte - - - -
2x1
2x1
- - - - - \ No newline at end of file diff --git a/framed/Grid/CondensedGrid/index.html b/framed/Grid/CondensedGrid/index.html deleted file mode 100644 index d3ffb8f6..00000000 --- a/framed/Grid/CondensedGrid/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - Carbon Components Svelte - - - -
Column
Column
Column
Column
- - - - - \ No newline at end of file diff --git a/framed/Grid/FullWidthGrid/index.html b/framed/Grid/FullWidthGrid/index.html deleted file mode 100644 index 1dedfd10..00000000 --- a/framed/Grid/FullWidthGrid/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - Carbon Components Svelte - - - -
Column
Column
Column
Column
- - - - - \ No newline at end of file diff --git a/framed/Grid/Grid/index.html b/framed/Grid/Grid/index.html deleted file mode 100644 index 9e590f47..00000000 --- a/framed/Grid/Grid/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - Carbon Components Svelte - - - -
Column
Column
Column
Column
- - - - - \ No newline at end of file diff --git a/framed/Grid/NarrowGrid/index.html b/framed/Grid/NarrowGrid/index.html deleted file mode 100644 index 43afa8b5..00000000 --- a/framed/Grid/NarrowGrid/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - Carbon Components Svelte - - - -
Column
Column
Column
Column
- - - - - \ No newline at end of file diff --git a/framed/Grid/OffsetColumns/index.html b/framed/Grid/OffsetColumns/index.html deleted file mode 100644 index 8f301989..00000000 --- a/framed/Grid/OffsetColumns/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - Carbon Components Svelte - - - -
Offset 3
Offset 2
Offset 1
Offset 0
- - - - - \ No newline at end of file diff --git a/framed/Grid/ResponsiveGrid/index.html b/framed/Grid/ResponsiveGrid/index.html deleted file mode 100644 index 0b481f99..00000000 --- a/framed/Grid/ResponsiveGrid/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - Carbon Components Svelte - - - -
sm: 1, md: 4, lg: 8
sm: 1, md: 2, lg: 2
sm: 1, md: 1, lg: 1
sm: 1, md: 1, lg: 1
- - - - - \ No newline at end of file diff --git a/framed/Loading/Loading/index.html b/framed/Loading/Loading/index.html deleted file mode 100644 index 0f61397a..00000000 --- a/framed/Loading/Loading/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - Carbon Components Svelte - - - -
Active loading indicator
- - - - - \ No newline at end of file diff --git a/framed/Modal/ComposedModal/index.html b/framed/Modal/ComposedModal/index.html deleted file mode 100644 index 05c57376..00000000 --- a/framed/Modal/ComposedModal/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - Carbon Components Svelte - - - -
- - - - - \ No newline at end of file diff --git a/framed/Modal/DangerModal/index.html b/framed/Modal/DangerModal/index.html deleted file mode 100644 index 44d4962f..00000000 --- a/framed/Modal/DangerModal/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - Carbon Components Svelte - - - -
- - - - - \ No newline at end of file diff --git a/framed/Modal/Modal/index.html b/framed/Modal/Modal/index.html deleted file mode 100644 index 3b3f1f79..00000000 --- a/framed/Modal/Modal/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - Carbon Components Svelte - - - -
- - - - - \ No newline at end of file diff --git a/framed/Modal/ModalExtraSmall/index.html b/framed/Modal/ModalExtraSmall/index.html deleted file mode 100644 index c2d71f8c..00000000 --- a/framed/Modal/ModalExtraSmall/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - Carbon Components Svelte - - - -
- - - - - \ No newline at end of file diff --git a/framed/Modal/ModalLarge/index.html b/framed/Modal/ModalLarge/index.html deleted file mode 100644 index fa44ee3d..00000000 --- a/framed/Modal/ModalLarge/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - Carbon Components Svelte - - - -
- - - - - \ No newline at end of file diff --git a/framed/Modal/ModalPreventOutsideClick/index.html b/framed/Modal/ModalPreventOutsideClick/index.html deleted file mode 100644 index f79b27fe..00000000 --- a/framed/Modal/ModalPreventOutsideClick/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - Carbon Components Svelte - - - -
- - - - - \ No newline at end of file diff --git a/framed/Modal/ModalSmall/index.html b/framed/Modal/ModalSmall/index.html deleted file mode 100644 index 0ecff1c1..00000000 --- a/framed/Modal/ModalSmall/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - Carbon Components Svelte - - - -
- - - - - \ No newline at end of file diff --git a/framed/Modal/PassiveModal/index.html b/framed/Modal/PassiveModal/index.html deleted file mode 100644 index c485c790..00000000 --- a/framed/Modal/PassiveModal/index.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - Carbon Components Svelte - - - -
- - - - - \ No newline at end of file diff --git a/framed/UIShell/HeaderNav/index.html b/framed/UIShell/HeaderNav/index.html deleted file mode 100644 index a8b53f81..00000000 --- a/framed/UIShell/HeaderNav/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - Carbon Components Svelte - - - -

Welcome

- - - - - \ No newline at end of file diff --git a/framed/UIShell/HeaderSwitcher/index.html b/framed/UIShell/HeaderSwitcher/index.html deleted file mode 100644 index 0c865f19..00000000 --- a/framed/UIShell/HeaderSwitcher/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - Carbon Components Svelte - - - -

Welcome

- - - - - \ No newline at end of file diff --git a/framed/UIShell/HeaderUtilities/index.html b/framed/UIShell/HeaderUtilities/index.html deleted file mode 100644 index 7bdb7728..00000000 --- a/framed/UIShell/HeaderUtilities/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - Carbon Components Svelte - - - -

Welcome

- - - - - \ No newline at end of file diff --git a/index.html b/index.html index a877a035..031d5fdf 100644 --- a/index.html +++ b/index.html @@ -1,20 +1,15 @@ - - - - + + + + + + Carbon Components Svelte - - -

Carbon Components Svelte

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.

Install

yarn add -D carbon-components-svelte

Portfolio

The broader Carbon Svelte effort extends to the icons, pictograms, and - data visualization libraries.

Carbon Components Svelte
100+ components
Carbon Icons Svelte
5000+ icons
Carbon Pictograms Svelte
600+ pictograms
Carbon Charts Svelte
13 chart types, powered by d3
+ + +
- - - \ No newline at end of file + +