Carbon Components Svelte

https://svelte.carbondesignsystem.com/
Admin
Carbon Components Svelte is a library of reusable UI components built with Svelte, implementing the...
Tokens:160,708
Snippets:852
Trust Score:9.8
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Carbon Components Svelte via Bun

Source: https://svelte.carbondesignsystem.com/index

Installs the Carbon Components Svelte library using the Bun package manager. This is a newer alternative method for adding the library to your Svelte project.

```bash
bun add carbon-components-svelte
```

--------------------------------

### InlineLoading: UX Example with Interaction

Source: https://svelte.carbondesignsystem.com/components/InlineLoading

An example showing the InlineLoading component integrated with buttons for a user interaction flow. It manages states like 'dormant', 'active', 'finished', and 'inactive' using Svelte's reactivity and timers. Requires importing InlineLoading, Button, ButtonSet, and Svelte's onDestroy.

```svelte
<script>
  import { Button, ButtonSet, InlineLoading } from "carbon-components-svelte";
  import { onDestroy } from "svelte";

  const descriptionMap = {
    active: "Submitting...",
    finished: "Success",
    inactive: "Cancelling...",
  };

  const stateMap = {
    active: "finished",
    inactive: "dormant",
    finished: "dormant",
  };

  let timeout = undefined;
  let state = "dormant"; // "dormant" | "active" | "finished" | "inactive"

  function reset(incomingState) {
    if (typeof timeout === "number") {
      clearTimeout(timeout);
    }

    if (incomingState) {
      timeout = setTimeout(() => {
        state = incomingState;
      }, 2000);
    }
  }

  onDestroy(reset);

  $: reset(stateMap[state]);
</script>

<ButtonSet>
  <Button
    kind="ghost"
    disabled={state === "dormant" || state === "finished"}
    on:click={() => (state = "inactive")}
  >
    Cancel
  </Button>
  {#if state !== "dormant"}
    <InlineLoading status={state} description={descriptionMap[state]} />
  {:else}
    <Button on:click={() => (state = "active")}>Submit</Button>
  {/if}
</ButtonSet>

```

--------------------------------

### Example: Radio Groups

Source: https://svelte.carbondesignsystem.com/components/ContextMenu

Demonstrates organizing options and creating radio selections using ContextMenuGroup and ContextMenuRadioGroup.

```APIDOC
## Radio groups

Use `ContextMenuGroup` and `ContextMenuRadioGroup` to organize related options and create radio button selections.

```html
<script>
  import {
    ContextMenu,
    ContextMenuDivider,
    ContextMenuOption,
    ContextMenuRadioGroup,
  } from "carbon-components-svelte";

  let selectedId = "0";

  $: console.log("selectedId", selectedId);
</script>

<ContextMenu>
  <ContextMenuOption indented labelText="Open" />
  <ContextMenuDivider />
  <ContextMenuRadioGroup bind:selectedId labelText="Radio group">
    <ContextMenuOption id="0" labelText="Set as foreground" />
    <ContextMenuOption id="1" labelText="Set as background" />
  </ContextMenuRadioGroup>
  <ContextMenuDivider />
  <ContextMenuOption selectable labelText="Lock layer" />
</ContextMenu>

<div>
  <p>Right click anywhere on this page</p>
</div>

<style>
  div {
    position: absolute;
    width: calc(100% - var(--cds-spacing-05));
    height: calc(100% - var(--cds-spacing-06));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cds-text-02);
  }
</style>
```
```

--------------------------------

### InlineLoading Component API

Source: https://svelte.carbondesignsystem.com/components/InlineLoading

API documentation for the InlineLoading component, including its props, events, and usage examples.

```APIDOC
## Component API: InlineLoading

API documentation auto-generated by sveld.
Source code: src/InlineLoading/InlineLoading.svelte

### Props

*   **status** (string, optional): Set the loading status. Accepts values: `"active"`, `"inactive"`, `"finished"`, `"error"`. Defaults to `"active"`.
*   **description** (string, optional): Set the loading description. Defaults to `undefined`.
*   **iconDescription** (string, optional): Specify a description for the loading icon. Defaults to the `status` prop for "error" and "finished" states, otherwise `undefined`.
*   **successDelay** (number, optional): Specify the timeout delay (ms) after `status` is set to "success". Defaults to `1500`.

### Slots

No slots are available for this component.

### Forwarded Events

*   `on:click`
*   `on:mouseover`
*   `on:mouseenter`
*   `on:mouseleave`

### Dispatched Events

*   **on:success**: Dispatched with `null` detail when the loading state transitions to "success".

### $$restProps

`InlineLoading` spreads `$$restProps` to the `div` element.

### Examples

**Default Usage:**
```svelte
<script>
  import { InlineLoading } from "carbon-components-svelte";
</script>

<InlineLoading />
```

**With Description:**
```svelte
<script>
  import { InlineLoading } from "carbon-components-svelte";
</script>

<InlineLoading description="Loading metrics..." />
```

**Status States:**
```svelte
<script>
  import { InlineLoading } from "carbon-components-svelte";
</script>

<InlineLoading status="active" description="Submitting..." />
<InlineLoading status="inactive" description="Cancelling..." />
<InlineLoading status="finished" description="Success" />
<InlineLoading status="error" description="An error occurred" />
```

**UX Example (Integration):**
```svelte
<script>
  import { Button, ButtonSet, InlineLoading } from "carbon-components-svelte";
  import { onDestroy } from "svelte";

  const descriptionMap = {
    active: "Submitting...",
    finished: "Success",
    inactive: "Cancelling...",
  };

  const stateMap = {
    active: "finished",
    inactive: "dormant",
    finished: "dormant",
  };

  let timeout = undefined;
  let state = "dormant"; // "dormant" | "active" | "finished" | "inactive"

  function reset(incomingState) {
    if (typeof timeout === "number") {
      clearTimeout(timeout);
    }

    if (incomingState) {
      timeout = setTimeout(() => {
        state = incomingState;
      }, 2000);
    }
  }

  onDestroy(reset);

  $: reset(stateMap[state]);
</script>

<ButtonSet>
  <Button
    kind="ghost"
    disabled={state === "dormant" || state === "finished"}
    on:click={() => (state = "inactive")}
  >
    Cancel
  </Button>
  {#if state !== "dormant"}
    <InlineLoading status={state} description={descriptionMap[state]} />
  {:else}
    <Button on:click={() => (state = "active")}>Submit</Button>
  {/if}
</ButtonSet>
```
```

--------------------------------

### PaginationNav - Reactive Example

Source: https://svelte.carbondesignsystem.com/components/PaginationNav

Demonstrates how to make the PaginationNav reactive by binding to the 'page' prop.

```APIDOC
## PaginationNav - Reactive Example

### Description

Allows the current page number to be controlled and updated reactively by binding to the `page` prop.

### Method

N/A (Component Usage)

### Endpoint

N/A (Component Usage)

### Parameters

#### Path Parameters

N/A

#### Query Parameters

N/A

#### Request Body

N/A

### Request Example

```svelte
<script>
  import { PaginationNav, Button } from "carbon-components-svelte";

  let page = 2;
</script>

<PaginationNav bind:page />

<div style="margin: var(--cds-layout-01) 0">
  <Button on:click={() => (page = 1)} disabled={page === 0}>
    Set page to 1
  </Button>
</div>

<strong>page:</strong>
{page}
```

### Response

N/A (Component Rendering)

#### Success Response (200)

N/A

#### Response Example

N/A
```

--------------------------------

### Default ComboBox Example in Svelte

Source: https://svelte.carbondesignsystem.com/components/ComboBox

Demonstrates the basic usage of the ComboBox component with a title and placeholder. Each item requires a unique 'id' and 'text'.

```html
<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" },
  ]}
/>

```

--------------------------------

### Default CodeSnippet for npm installation

Source: https://svelte.carbondesignsystem.com/components/CodeSnippet

Demonstrates the default usage of the CodeSnippet component to display a single line of code, typically for package installation commands. It uses the native Clipboard API for copying.

```bash
npm i carbon-components-svelte
```

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

<CodeSnippet code="npm i carbon-components-svelte" />

```

--------------------------------

### Install Carbon Components Svelte via pnpm

Source: https://svelte.carbondesignsystem.com/index

Installs the Carbon Components Svelte library using the pnpm package manager. This is an alternative method for adding the library to your Svelte project.

```bash
pnpm i carbon-components-svelte
```

--------------------------------

### Default UnorderedList Example

Source: https://svelte.carbondesignsystem.com/components/UnorderedList

Create a basic unordered list with ListItem components.

```html
<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>
```

--------------------------------

### Install Carbon Components Svelte via NPM

Source: https://svelte.carbondesignsystem.com/index

Installs the Carbon Components Svelte library using the npm package manager. This is the primary method for adding the library to your Svelte project.

```bash
npm i carbon-components-svelte
```

--------------------------------

### Pagination Skeleton Loader

Source: https://svelte.carbondesignsystem.com/components/Pagination

Provides an example of using `PaginationSkeleton` to display a placeholder loading state. This is useful for indicating that data is being fetched and the pagination controls are not yet ready to be interacted with.

```javascript
import { PaginationSkeleton } from "carbon-components-svelte";

<PaginationSkeleton />
```

--------------------------------

### Svelte ToastNotification Low Contrast Examples

Source: https://svelte.carbondesignsystem.com/components/ToastNotification

Showcases the low contrast variants of the ToastNotification component for less prominent notifications. Includes examples for error, info, info-square, success, warning, and warning-alt kinds, all utilizing the `lowContrast` prop. This code relies on 'carbon-components-svelte'.

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

<ToastNotification
  lowContrast
  kind="error"
  title="Error"
  subtitle="An internal server error occurred."
  caption={new Date().toLocaleString()}
/>
<ToastNotification
  lowContrast
  kind="info"
  title="New updates"
  subtitle="Restart to get the latest updates."
  caption={new Date().toLocaleString()}
/>
<ToastNotification
  lowContrast
  kind="info-square"
  title="New updates"
  subtitle="Restart to get the latest updates."
  caption={new Date().toLocaleString()}
/>
<ToastNotification
  lowContrast
  kind="success"
  title="Success"
  subtitle="Your settings have been saved."
  caption={new Date().toLocaleString()}
/>
<ToastNotification
  lowContrast
  kind="warning"
  title="Scheduled maintenance"
  subtitle="Maintenance will last 2-4 hours."
  caption={new Date().toLocaleString()}
/>
<ToastNotification
  lowContrast
  kind="warning-alt"
  title="Scheduled maintenance"
  subtitle="Maintenance will last 2-4 hours."
  caption={new Date().toLocaleString()}
/>

```

--------------------------------

### Install Carbon Components Svelte via Yarn

Source: https://svelte.carbondesignsystem.com/index

Installs the Carbon Components Svelte library using the Yarn package manager. This is another alternative method for adding the library to your Svelte project.

```bash
yarn add carbon-components-svelte
```

--------------------------------

### Reactive Storage Example

Source: https://svelte.carbondesignsystem.com/components/LocalStorage

Demonstrates how to use the LocalStorage component to persist a 'dark-mode' toggle state across page reloads.

```APIDOC
## Reactive Storage Example

### Description
This example shows how the `LocalStorage` component maintains state across page reloads. Toggling the switch and refreshing the page persists the state.

### Component Usage

```svelte
<script>
  import { LocalStorage, Toggle } from "carbon-components-svelte";

  let toggled = false;
  let events = [];

  $: document.documentElement.setAttribute("theme", toggled ? "g100" : "white");
</script>

<LocalStorage
  key="dark-mode"
  bind:value={toggled}
  on:save={() => {
    events = [...events, { event: "on:save" }];
  }}
  on:update={({ detail }) => {
    events = [...events, { event: "on:update", detail }];
  }}
/>

<Toggle size="sm" labelText="Dark mode" bind:toggled />

<pre>{JSON.stringify(events, null, 2)}</pre>
```

### Key Features
- Persists the `toggled` state using the `dark-mode` key.
- Updates the document's theme based on the `toggled` state.
- Logs save and update events.
```

--------------------------------

### TimePicker Default Example - Svelte

Source: https://svelte.carbondesignsystem.com/components/TimePicker

Demonstrates the default TimePicker component with AM/PM and timezone selectors. It includes necessary imports from 'carbon-components-svelte'.

```svelte
<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>
```

--------------------------------

### Multi-line CodeSnippet example

Source: https://svelte.carbondesignsystem.com/components/CodeSnippet

Shows how to display multiple lines of code with expand/collapse functionality using `type="multi"` for the CodeSnippet component.

```javascript
// 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;
}

```

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

<CodeSnippet type="multi" {code} />

```

--------------------------------

### Light variant of SelectableTile (Svelte)

Source: https://svelte.carbondesignsystem.com/components/SelectableTile

Shows how to use the `light` variant of the SelectableTile component, suitable for light backgrounds. This example applies the `light` prop to `SelectableTile` components.

```html
<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>
```

--------------------------------

### Managing Multiple ComboBoxes in Svelte

Source: https://svelte.carbondesignsystem.com/components/ComboBox

Provides an example of how to manage the state and selections of multiple ComboBox components within a Svelte application.

```html
<script>
  import { ComboBox } from "carbon-components-svelte";

  const items = [
    { id: "0", text: "Slack" },
    { id: "1", text: "Email" },
    { id: "2", text: "Fax" },
  ];

  let comboBox1_selectedId = undefined;
  let comboBox2_selectedId = undefined;

  const formatSelected = (id) =>
    items.find((item) => item.id === id)?.text ?? "N/A";

  $: primary = formatSelected(comboBox1_selectedId);
  $: secondary = formatSelected(comboBox2_selectedId);
</script>

<ComboBox
  bind:selectedId={comboBox1_selectedId}
  titleText="Primary contact"
  placeholder="Select primary contact method"
  {items}
/>

<div>Primary: {primary}</div>

<ComboBox
  bind:selectedId={comboBox2_selectedId}
  titleText="Secondary contact"
  placeholder="Select secondary contact method"
  {items}
/>

<div>Secondary: {secondary}</div>

<style>
  div {
    margin: var(--cds-layout-01) 0 var(--cds-layout-03);
  }
</style>

```

--------------------------------

### Multi-selectable tiles using SelectableTile (Svelte)

Source: https://svelte.carbondesignsystem.com/components/SelectableTile

Demonstrates how to group multiple SelectableTile components for multi-selection scenarios. This example utilizes the `SelectableTile` component from `carbon-components-svelte` and groups them within a `div` with appropriate ARIA attributes.

```html
<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>
```

--------------------------------

### Skeleton loader for Svelte Buttons

Source: https://svelte.carbondesignsystem.com/components/Button

Demonstrates how to display a loading state for buttons by setting the `skeleton` prop. Examples are shown for various sizes.

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

<Button size="xl" skeleton />
<Button size="lg" skeleton />
<Button skeleton />
<Button skeleton size="field" />
<Button skeleton size="small" />

```

--------------------------------

### Svelte InlineNotification Examples

Source: https://svelte.carbondesignsystem.com/components/InlineNotification

Demonstrates the usage of the Svelte InlineNotification component with different 'kind' props and the 'lowContrast' option to display various types of notifications.

```Svelte
<script>
  import { InlineNotification } from "carbon-components-svelte";
</script>

<InlineNotification
  lowContrast
  kind="error"
  title="Error:"
  subtitle="An internal server error occurred."
/>
<InlineNotification
  lowContrast
  kind="info"
  title="New updates:"
  subtitle="Restart to get the latest updates."
/>
<InlineNotification
  lowContrast
  kind="info-square"
  title="New updates:"
  subtitle="Restart to get the latest updates."
/>
<InlineNotification
  lowContrast
  kind="success"
  title="Success:"
  subtitle="Your settings have been saved."
/>
<InlineNotification
  lowContrast
  kind="warning"
  title="Scheduled maintenance:"
  subtitle="Maintenance will last 2-4 hours."
/>
<InlineNotification
  lowContrast
  kind="warning-alt"
  title="Scheduled maintenance:"
  subtitle="Maintenance will last 2-4 hours."
/>
```

--------------------------------

### Clearing Stored Data Example

Source: https://svelte.carbondesignsystem.com/components/LocalStorage

Demonstrates how to use the `clearItem` and `clearAll` methods of the LocalStorage component to manage stored data.

```APIDOC
## Clearing Stored Data Example

### Description
This example shows how to clear stored data using the `clearAll` method. It also illustrates accessing component methods via `bind:this`.

### Component Usage

```svelte
<script>
  import { LocalStorage, Toggle, Button } from "carbon-components-svelte";

  let storage;
  let toggled = false;

  $: document.documentElement.setAttribute("theme", toggled ? "g100" : "white");
</script>

<LocalStorage bind:this={storage} bind:value={toggled} />

<Toggle size="sm" labelText="Dark mode" bind:toggled />

<Button size="small" on:click={storage.clearAll}>Clear storage</Button>
```

### Key Features
- Uses `bind:this={storage}` to get a reference to the `LocalStorage` component instance.
- The `clearAll` method is called on button click to remove all data from local storage.
- The `toggled` state is still managed by `LocalStorage`.
```

--------------------------------

### Svelte: Stack Multiple Modals with Carbon Design System

Source: https://svelte.carbondesignsystem.com/components/Modal

This example shows how to stack multiple modals for complex workflows. Each modal manages its own state and focus. It utilizes the Button and Modal components from 'carbon-components-svelte'.

```html
<script>
  import { Button, Modal } from "carbon-components-svelte";

  let openCreate = false;
  let openDelete = false;
</script>

<Button on:click={() => (openCreate = true)}>Create database</Button>
<Button kind="danger-tertiary" on:click={() => (openDelete = true)}>
  Delete database
</Button>

<Modal
  bind:open={openCreate}
  modalHeading="Create database"
  primaryButtonText="Confirm"
  secondaryButtonText="Cancel"
  on:click:button--secondary={() => (openCreate = false)}
  on:open
  on:close
  on:submit
>
  <p>Create a new Cloudant database in the US South region.</p>
</Modal>

<Modal
  danger
  bind:open={openDelete}
  modalHeading="Delete database"
  primaryButtonText="Delete"
  secondaryButtonText="Cancel"
  on:click:button--secondary={() => (openDelete = false)}
  on:open
  on:close
  on:submit
>
  <p>This is a permanent action and cannot be undone.</p>
</Modal>

```

--------------------------------

### Svelte: Small Modal (Carbon Design System)

Source: https://svelte.carbondesignsystem.com/components/Modal

This example demonstrates using the small size for a modal by setting the `size` prop to 'sm' in the Svelte Carbon Design System. This provides a more focused dialog for simple confirmations.

```html
<script>
  import { Button, Modal } from "carbon-components-svelte";

  let open = false;
</script>

<Button on:click={() => (open = true)}>Create database</Button>

<Modal
  size="sm"
  bind: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>

```

--------------------------------

### DatePicker: With Helper Text

Source: https://svelte.carbondesignsystem.com/components/DatePicker

Adds helper text to the DatePickerInput to provide additional context or formatting guidance. This example uses 'carbon-components-svelte' and showcases the `helperText` prop.

```javascript
<script>
  import { DatePicker, DatePickerInput } from "carbon-components-svelte";
</script>

<DatePicker>
  <DatePickerInput
    labelText="Date of birth"
    helperText="Example: 01/12/1990"
    placeholder="mm/dd/yyyy"
  />
</DatePicker>
```

--------------------------------

### Basic Fluid Form Layout with Svelte

Source: https://svelte.carbondesignsystem.com/components/FluidForm

Demonstrates creating a basic fluid-width form using the FluidForm, TextInput, and PasswordInput components from carbon-components-svelte. This example showcases a simple login form structure.

```svelte
<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>
```

--------------------------------

### Default Breadcrumb Example

Source: https://svelte.carbondesignsystem.com/components/Breadcrumb

Demonstrates a basic hierarchical navigation trail with slashes between items. The current page is marked using the 'isCurrentPage' prop.

```html
<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>
```

--------------------------------

### Inline CodeSnippet example

Source: https://svelte.carbondesignsystem.com/components/CodeSnippet

Demonstrates the inline display of code using the `type="inline"` prop for code snippets that appear within regular text.

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

<CodeSnippet type="inline" code="rm -rf node_modules/" />

```

--------------------------------

### Default ContextMenu Example

Source: https://svelte.carbondesignsystem.com/components/ContextMenu

Demonstrates the default ContextMenu functionality where the menu appears on a right-click anywhere within the window. It utilizes ContextMenuOption for items and ContextMenuDivider for separators, with support for nested groups and icons.

```html
<script>
  import {
    ContextMenu,
    ContextMenuDivider,
    ContextMenuGroup,
    ContextMenuOption,
  } from "carbon-components-svelte";
  import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte";
  import Cut from "carbon-icons-svelte/lib/Cut.svelte";

  let selectedIds = [];

  $: console.log("selectedIds", selectedIds);
</script>

<ContextMenu>
  <ContextMenuOption
    indented
    labelText="Copy"
    shortcutText="⌘C"
    icon={CopyFile}
  />
  <ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon={Cut} />
  <ContextMenuDivider />
  <ContextMenuOption indented labelText="Export as">
    <ContextMenuGroup labelText="Export options" bind:selectedIds>
      <ContextMenuOption id="pdf" labelText="PDF" />
      <ContextMenuOption id="txt" labelText="TXT" />
      <ContextMenuOption id="mp3" labelText="MP3" />
    </ContextMenuGroup>
  </ContextMenuOption>
  <ContextMenuDivider />
  <ContextMenuOption selectable labelText="Remove metadata" />
  <ContextMenuDivider />
  <ContextMenuGroup labelText="Style options">
    <ContextMenuOption id="0" labelText="Font smoothing" selected />
    <ContextMenuOption id="1" labelText="Reduce noise" />
    <ContextMenuOption id="2" labelText="Auto-sharpen" />
  </ContextMenuGroup>
  <ContextMenuDivider />
  <ContextMenuOption indented kind="danger" labelText="Delete" />
</ContextMenu>

<div>
  <p>Right click anywhere on this page</p>
</div>

<style>
  div {
    position: absolute;
    width: calc(100% - var(--cds-spacing-05));
    height: calc(100% - var(--cds-spacing-06));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cds-text-02);
  }
</style>

```

--------------------------------

### Svelte ToastNotification Examples

Source: https://svelte.carbondesignsystem.com/components/ToastNotification

Demonstrates different kinds of ToastNotifications including error, info, info-square, success, warning, and warning-alt. Each notification displays a title, subtitle, and a timestamp. This code uses the 'carbon-components-svelte' library.

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

<ToastNotification
  kind="error"
  title="Error"
  subtitle="An internal server error occurred."
  caption={new Date().toLocaleString()}
/>
<ToastNotification
  kind="info"
  title="New updates"
  subtitle="Restart to get the latest updates."
  caption={new Date().toLocaleString()}
/>
<ToastNotification
  kind="info-square"
  title="New updates"
  subtitle="Restart to get the latest updates."
  caption={new Date().toLocaleString()}
/>
<ToastNotification
  kind="success"
  title="Success"
  subtitle="Your settings have been saved."
  caption={new Date().toLocaleString()}
/>
<ToastNotification
  kind="warning"
  title="Scheduled maintenance"
  subtitle="Maintenance will last 2-4 hours."
  caption={new Date().toLocaleString()}
/>
<ToastNotification
  kind="warning-alt"
  title="Scheduled maintenance"
  subtitle="Maintenance will last 2-4 hours."
  caption={new Date().toLocaleString()}
/>

```

--------------------------------

### Create a basic TextArea

Source: https://svelte.carbondesignsystem.com/components/TextArea

Demonstrates the creation of a basic textarea with a label and placeholder text using the `TextArea` component.

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

<TextArea labelText="App description" placeholder="Enter a description..." />

```

--------------------------------

### Link size variants

Source: https://svelte.carbondesignsystem.com/components/Link

Provides examples of using the 'size' prop to control the visual size of the Link component. It demonstrates the 'lg' (large), default, and 'sm' (small) size variants.

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

<Link size="lg" href="https://www.carbondesignsystem.com/">Large link</Link>
<br />
<Link href="https://www.carbondesignsystem.com/">Default link</Link>
<br />
<Link size="sm" href="https://www.carbondesignsystem.com/">Small link</Link>

```

--------------------------------

### Custom Target ContextMenu Example

Source: https://svelte.carbondesignsystem.com/components/ContextMenu

Illustrates how to specify a custom HTML element to trigger the context menu using the `target` prop. This allows the context menu to be bound to a specific element instead of the entire window.

```html
<script>
  import {
    ContextMenu,
    ContextMenuDivider,
    ContextMenuGroup,
    ContextMenuOption,
  } from "carbon-components-svelte";
  import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte";
  import Cut from "carbon-icons-svelte/lib/Cut.svelte";

  let target;
</script>

<ContextMenu {target} on:open={(e) => console.log(e.detail)}>
  <ContextMenuOption
    indented
    labelText="Copy"
    shortcutText="⌘C"
    icon={CopyFile}
  />
  <ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon={Cut} />
  <ContextMenuDivider />
  <ContextMenuOption indented labelText="Export as">
    <ContextMenuGroup labelText="Export options">
      <ContextMenuOption id="pdf" labelText="PDF" />
      <ContextMenuOption id="txt" labelText="TXT" />
      <ContextMenuOption id="mp3" labelText="MP3" />
    </ContextMenuGroup>
  </ContextMenuOption>
  <ContextMenuDivider />
  <ContextMenuOption selectable labelText="Remove metadata" />
  <ContextMenuDivider />
  <ContextMenuGroup labelText="Style options">
    <ContextMenuOption id="0" labelText="Font smoothing" selected />
    <ContextMenuOption id="1" labelText="Reduce noise" />
    <ContextMenuOption id="2" labelText="Auto-sharpen" />
  </ContextMenuGroup>
  <ContextMenuDivider />
  <ContextMenuOption indented kind="danger" labelText="Delete" />
</ContextMenu>

<div>
  <p bind:this={target}>Right click this element</p>
</div>

<style>
  div {
    position: absolute;
    width: calc(100% - var(--cds-spacing-05));
    height: calc(100% - var(--cds-spacing-06));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cds-text-02);
  }

  p {
    outline: 1px solid var(--cds-interactive-01);
  }
</style>

```

--------------------------------

### Basic Pagination with Total Items and Page Sizes

Source: https://svelte.carbondesignsystem.com/components/Pagination

Demonstrates the basic setup of the Pagination component, specifying the total number of items and an array of available page sizes. This controls how many items are displayed per page and the total number of items to paginate.

```javascript
import { Pagination } from "carbon-components-svelte";

<Pagination totalItems={100_000} pageSizes={[10, 15, 20]} />
```

--------------------------------

### Reactive RadioButtonGroup Example

Source: https://svelte.carbondesignsystem.com/components/RadioButton

Demonstrates how to bind the selected value of a RadioButtonGroup to a Svelte variable, allowing for programmatic updates and displaying the current selection. This example uses a loop to generate radio buttons and buttons to change the selection. It requires importing Button, RadioButtonGroup, and RadioButton from 'carbon-components-svelte'.

```html
<script>
  import {
    Button,
    RadioButtonGroup,
    RadioButton,
  } from "carbon-components-svelte";

  const plans = ["Free (1 GB)", "Standard (10 GB)", "Pro (128 GB)"];

  let plan = plans[1];
</script>

<RadioButtonGroup
  legendText="Storage tier (disk)"
  name="plan"
  bind:selected={plan}
>
  {#each plans as value (value)}
    <RadioButton labelText={value} {value} />
  {/each}
</RadioButtonGroup>

<div style="margin: var(--cds-layout-03) 0">
  {#each plans as value (value)}
    <Button
      size="small"
      kind="secondary"
      disabled={plan === value}
      on:click={() => (plan = value)}
    >
      Select "{value}"
    </Button>
  {/each}
</div>

Selected plan:
<strong>{plan}</strong>
```

--------------------------------

### FileUploaderSkeleton

Source: https://svelte.carbondesignsystem.com/components/FileUploader

Shows how to use the `FileUploaderSkeleton` component to display a loading state.

```APIDOC
## FileUploaderSkeleton

### Description
Display a loading state using the `FileUploaderSkeleton` component. This provides visual feedback while the file uploader content is being loaded.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
N/A

### Request Example
```html
<script>
  import { FileUploaderSkeleton } from "carbon-components-svelte";
</script>

<FileUploaderSkeleton />
```

### Response
#### Success Response (200)
N/A (Component Usage)

#### Response Example
N/A (Component Usage)
```

--------------------------------

### UnorderedList with Links Example

Source: https://svelte.carbondesignsystem.com/components/UnorderedList

Add links to list items by wrapping them in Link components.

```html
<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>
```

--------------------------------

### Svelte Header with Multiple Switchers and Custom Tooltips

Source: https://svelte.carbondesignsystem.com/components/UIShell

This Svelte component demonstrates a Carbon Design System header featuring multiple user actions represented by switchers. It shows how to bind the open state of panels, customize tooltip descriptions and alignments, and provide custom text for actions. The example also includes basic layout with SkipToContent, Content, Grid, Row, and Column components.

```html
<script>
  import {
    Header,
    HeaderUtilities,
    HeaderAction,
    HeaderPanelLinks,
    HeaderPanelDivider,
    HeaderPanelLink,
    SkipToContent,
    Content,
    Grid,
    Row,
    Column,
  } from "carbon-components-svelte";
  import SettingsAdjust from "carbon-icons-svelte/lib/SettingsAdjust.svelte";
  import UserAvatarFilledAlt from "carbon-icons-svelte/lib/UserAvatarFilledAlt.svelte";

  let isOpen1 = false;
  let isOpen2 = false;
  let isOpen3 = false;
</script>

<Header company="IBM" platformName="Carbon Svelte" isSideNavOpen>
  <svelte:fragment slot="skip-to-content">
    <SkipToContent />
  </svelte:fragment>
  <HeaderUtilities>
    <HeaderAction
      bind:isOpen={isOpen1}
      iconDescription="Settings"
      tooltipAlignment="start"
      icon={SettingsAdjust}
      on:open={() => {
        isOpen2 = false;
        isOpen3 = false;
      }}
    >
      <HeaderPanelLinks>
        <HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
        <HeaderPanelLink>Switcher item 1</HeaderPanelLink>
        <HeaderPanelDivider>Switcher subject 2</HeaderPanelDivider>
        <HeaderPanelLink>Switcher item 1</HeaderPanelLink>
      </HeaderPanelLinks>
    </HeaderAction>
    <HeaderAction
      bind:isOpen={isOpen2}
      iconDescription="Profile"
      icon={UserAvatarFilledAlt}
      on:open={() => {
        isOpen1 = false;
        isOpen3 = false;
      }}
    >
      <HeaderPanelLinks>
        <HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
        <HeaderPanelLink>Switcher item 1</HeaderPanelLink>
        <HeaderPanelDivider>Switcher subject 2</HeaderPanelDivider>
        <HeaderPanelLink>Switcher item 1</HeaderPanelLink>
      </HeaderPanelLinks>
    </HeaderAction>
    <HeaderAction
      bind:isOpen={isOpen3}
      text="Switcher text"
      on:open={() => {
        isOpen1 = false;
        isOpen2 = false;
      }}
    >
      <HeaderPanelLinks>
        <HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
        <HeaderPanelLink>Switcher item 1</HeaderPanelLink>
      </HeaderPanelLinks>
    </HeaderAction>
  </HeaderUtilities>
</Header>

<Content>
  <Grid>
    <Row>
      <Column>
        <h1>Welcome</h1>
      </Column>
    </Row>
  </Grid>
</Content>

```

--------------------------------

### Expressive UnorderedList Example

Source: https://svelte.carbondesignsystem.com/components/UnorderedList

Use Carbon's expressive typesetting by setting `expressive` to `true`.

```html
<script>
  import { UnorderedList, ListItem, Link } from "carbon-components-svelte";
</script>

<UnorderedList expressive>
  <ListItem><Link size="lg" href="#">Unordered list item</Link></ListItem>
  <ListItem>Unordered list item</ListItem>
  <ListItem>Unordered list item</ListItem>
</UnorderedList>
```

--------------------------------

### Loading Component Usage

Source: https://svelte.carbondesignsystem.com/components/Loading

Demonstrates how to use the Loading component for various scenarios, including default, no overlay, and small size variations.

```APIDOC
## Loading Component API

### Description
Provides a full-screen or inline loading indicator for showing progress during page loads or data fetching operations.

### Props

- **small** (boolean) - Optional - Set to `true` to use the small variant. Default: `false`
- **active** (boolean) - Optional - Set to `false` to disable the active state. Default: `true`
- **withOverlay** (boolean) - Optional - Set to `false` to disable the overlay. Default: `true`
- **description** (string) - Optional - Specify the description to describe the loading state. Default: `"loading"`

### Slots

No slots available.

### Events

No dispatched events available.

### Usage Examples

**Default Loading Indicator:**
```svelte
<script>
  import { Loading } from "carbon-components-svelte";
</script>

<Loading />
```

**Loading Indicator without Overlay:**
```svelte
<script>
  import { Loading } from "carbon-components-svelte";
</script>

<Loading withOverlay={false} />
```

**Small Loading Indicator without Overlay:**
```svelte
<script>
  import { Loading } from "carbon-components-svelte";
</script>

<Loading withOverlay={false} small />
```
```

--------------------------------

### Nested UnorderedList Example

Source: https://svelte.carbondesignsystem.com/components/UnorderedList

Create nested lists by setting `nested` to `true` on child `UnorderedList` components.

```html
<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>
```

--------------------------------

### Create basic header with UIShell components

Source: https://svelte.carbondesignsystem.com/components/UIShell

This snippet shows how to create a basic header using the `Header`, `HeaderNav`, and `HeaderNavItem` components from `carbon-components-svelte`. It includes a navigation menu and a main content area.

```javascript
<script>
  import {
    Header,
    HeaderNav,
    HeaderNavItem,
    HeaderNavMenu,
    SkipToContent,
    Content,
    Grid,
    Row,
    Column,
  } from "carbon-components-svelte";

  let isSideNavOpen = false;
</script>

<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
  <svelte:fragment slot="skip-to-content">
    <SkipToContent />
  </svelte:fragment>
  <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>

<Content>
  <Grid>
    <Row>
      <Column>
        <h1>Welcome</h1>
      </Column>
    </Row>
  </Grid>
</Content>

```

--------------------------------

### Svelte Select with Helper Text

Source: https://svelte.carbondesignsystem.com/components/Select

Illustrates adding descriptive helper text below the Svelte Select component using the `helperText` prop. This provides additional context or instructions to the user.

```svelte
<script>
  import { Select, SelectItem } from "carbon-components-svelte";
</script>

<Select
  helperText="Carbon offers 4 themes (2 light, 3 dark)"
  labelText="Carbon theme"
  selected="g10">
  <SelectItem value="white" text="White" />
  <SelectItem value="g10" text="Gray 10" />
  <SelectItem value="g80" text="Gray 80" />
  <SelectItem value="g90" text="Gray 90" />
  <SelectItem value="g100" text="Gray 100" />
</Select>
```

--------------------------------

### AspectRatio with Custom Ratio (9x16)

Source: https://svelte.carbondesignsystem.com/components/AspectRatio

Example of using the AspectRatio component with a 9x16 aspect ratio.

```APIDOC
## AspectRatio with Ratio 9x16

### Description

Displays a container with a 9x16 aspect ratio using the `ratio` prop.

### Method

N/A (Component Usage)

### Endpoint

N/A (Component Usage)

### Parameters

#### Query Parameters

- **ratio** (string) - Optional - Set to `"9x16"` to define the aspect ratio.

### Request Example

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

<AspectRatio ratio="9x16">9x16</AspectRatio>
```

### Response

N/A (Component Usage)

### Response Example

N/A (Component Usage)
```

--------------------------------

### AspectRatio with Custom Ratio (1x1)

Source: https://svelte.carbondesignsystem.com/components/AspectRatio

Example of using the AspectRatio component with a 1x1 aspect ratio.

```APIDOC
## AspectRatio with Ratio 1x1

### Description

Displays a container with a 1x1 aspect ratio using the `ratio` prop.

### Method

N/A (Component Usage)

### Endpoint

N/A (Component Usage)

### Parameters

#### Query Parameters

- **ratio** (string) - Optional - Set to `"1x1"` to define the aspect ratio.

### Request Example

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

<AspectRatio ratio="1x1">1x1</AspectRatio>
```

### Response

N/A (Component Usage)

### Response Example

N/A (Component Usage)
```

--------------------------------

### Svelte: Basic Tile Container

Source: https://svelte.carbondesignsystem.com/components/Tile

Creates a basic Tile container for displaying content. It imports the Tile component from 'carbon-components-svelte' and renders it with content.

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

<Tile>Content</Tile>

```

--------------------------------

### Reactive Toggle Example

Source: https://svelte.carbondesignsystem.com/components/Toggle

Demonstrates controlling the toggle's state programmatically using two-way binding.

```APIDOC
## Reactive Toggle Example

### Description
Demonstrates controlling the toggle's state programmatically using two-way binding with the `bind:toggled` directive.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```svelte
<script>
  import { Toggle, Button } from "carbon-components-svelte";

  let toggled = true;
</script>

<Toggle labelText="Push notifications" bind:toggled />

<div>
  <Button size="small" on:click={() => (toggled = !toggled)}>
    Toggle
    {toggled ? "off" : "on"}
  </Button>
</div>

<div>Toggled: {toggled}</div>

<style>
  div {
    margin-top: var(--cds-spacing-05);
  }
</style>
```

### Response
#### Success Response (200)
N/A (Component Usage)

#### Response Example
N/A (Component Usage)
```
Tokens:
Raw