### Install Dependencies and Generate Types

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/CONTRIBUTING.md

Run the setup script to install root and docs dependencies and generate TypeScript definitions and API JSON.

```sh
bun setup
```

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

### Install carbon-preprocess-svelte

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/content/overview.md

Install carbon-preprocess-svelte as a development dependency for optimizing imports and CSS.

```bash
npm i -D carbon-preprocess-svelte

# pnpm
pnpm i -D carbon-preprocess-svelte

# Yarn
yarn add -D carbon-preprocess-svelte

# Bun
bun add -D carbon-preprocess-svelte
```

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

### Install Carbon Preprocess Svelte

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/README.md

Install the optional carbon-preprocess-svelte as a development dependency.

```sh
# npm
npm i -D carbon-preprocess-svelte

# pnpm
pnpm i -D carbon-preprocess-svelte
```

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

### Install Carbon Components Svelte

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/content/overview.md

Install the Carbon Components Svelte library using your preferred package manager.

```sh
# npm
npm i carbon-components-svelte

# pnpm
pnpm i carbon-components-svelte

# Yarn
yarn add carbon-components-svelte

# Bun
bun add carbon-components-svelte
```

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

### Multiple Dropdowns Example

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/Dropdown.svx

Illustrates how to implement and manage multiple dropdowns that interact with each other.

```svelte
<FileSource src="/framed/Dropdown/MultipleDropdown" />
```

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

### Install carbon-preprocess-svelte with Bun

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/README.md

Use this command to add the package as a development dependency using Bun.

```bash
bun add -D carbon-preprocess-svelte
```

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

### Complete Toolbar Example

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/Toolbar.svx

Combine `ToolbarSearch`, `ToolbarMenu`, and `Button` components for a comprehensive toolbar with search, actions, and an overflow menu.

```svelte
<script>
  import { Toolbar, ToolbarContent, ToolbarSearch, ToolbarMenu, ToolbarMenuItem, Button } from "carbon-components-svelte";
</script>

<Toolbar>
  <ToolbarContent>
    <ToolbarSearch />
    <ToolbarMenu>
      <ToolbarMenuItem primaryFocus>Restart all</ToolbarMenuItem>
      <ToolbarMenuItem href="https://cloud.ibm.com/docs/loadbalancer-service">
        API documentation
      </ToolbarMenuItem>
      <ToolbarMenuItem hasDivider danger>Stop all</ToolbarMenuItem>
    </ToolbarMenu>
    <Button>Create balancer</Button>
  </ToolbarContent>
</Toolbar>
```

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

### Run Docs Development Server

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/CONTRIBUTING.md

Navigate to the docs directory and start the local development server to preview the documentation site.

```sh
cd docs
bun dev
```

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

### Button Component Example

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/CONTRIBUTING.md

Example of using the Button component with a secondary kind.

```svelte
<script>
  import Button from "./Button.svelte";
</script>

<Button kind="secondary">Secondary action</Button>
```

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

### Number Input with Step Start Value

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/NumberInput.svx

Configures a starting point for stepping when the input is empty or zero using `stepStartValue`. This is useful when zero is not a sensible default or outside the min/max range.

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

<NumberInput stepStartValue={2026} allowEmpty min={2026} max={2100} labelText="Year" />
```

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

### Custom Styles Patching Example

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/CONTRIBUTING.md

Illustrates how to apply custom SCSS patches for themeable styles.

```scss
// css/patches.scss
// Example: Patching a Carbon v10 style
.bx--btn--primary {
  // Custom styles here
  border-radius: 0.25rem;
}
```

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

### Reactive ComboBox Example

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/ComboBox.svx

Demonstrates how the combobox component reacts to user input and selection changes.

```svelte
<FileSource src="/framed/ComboBox/ReactiveComboBox" />
```

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

### Install carbon-preprocess-svelte with Yarn

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/README.md

Use this command to add the package as a development dependency using Yarn.

```bash
yarn add -D carbon-preprocess-svelte
```

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

### Basic FloatingPortal Example

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/FloatingPortal.svx

Renders floating content below an anchor element. Click the button to toggle visibility.

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

  let open = false;
</script>

<Button on:click={() => (open = !open)}>Toggle Floating Content</Button>

<FloatingPortal bind:open>
  <div class="bx--popover-content">
    <p>This is floating content.</p>
  </div>
</FloatingPortal>
```

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

### Conventional Commit Subject Examples

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/CONTRIBUTING.md

Provides examples of concise and descriptive subject lines for conventional commit messages. These examples demonstrate the use of type and scope for different types of changes.

```text
fix(combo-box): close dropdown on outside click
docs(tree-view): fix slottable inline editing example
chore(deps-dev): bump vitest, svelte-check
```

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

### Basic Session Storage Example

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/SessionStorage.svx

Demonstrates basic state persistence within a browser session. State is maintained across refreshes but cleared when the tab is closed.

```javascript
<script>
  import SessionStorage from "$lib/SessionStorage/SessionStorage.svelte";

  let value;
  let enabled;
</script>

<SessionStorage bind:value="{enabled}" key="basic-example" />

<Toggle bind:checked="{enabled}" label="Enable feature" />

<p>Refresh the page to see the persisted state.</p>
<p>Close the tab to clear the state.</p>
```

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

### Default Accordion Example

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/Accordion.svx

Demonstrates the basic usage of Accordion and AccordionItem components with default right-aligned chevrons.

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

<Accordion>
  <AccordionItem title="Natural Language Classifier">
   <p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
   </p>
  </AccordionItem>
  <AccordionItem title="Natural Language Understanding">
    <p>Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.</p>
  </AccordionItem>
  <AccordionItem title="Language Translator">
    <p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
  </AccordionItem>
</Accordion>
```

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

### Conventional Commit Message with Body Example

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/CONTRIBUTING.md

Demonstrates a conventional commit message that includes an optional body for additional context. This example shows how to explain the changes and reference related issues.

```text
fix(data-table): associate cells with column headers

Cells now set aria-labelledby to their column header id.
Fixes #3162
```

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

### Composed Modal Example

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/ComposedModal.svx

A basic example of a composed modal with a header, body, and footer. This component is used for focused interactions requiring user attention or input.

```svelte
<script>
  import { ComposedModal, ModalHeader, ModalBody, ModalFooter } from "carbon-components-svelte";
  let open = false;
</script>

<button class="bx--btn bx--btn--primary" on:click={() => (open = true)}>Open composed modal</button>

<ComposedModal bind:open size="sm">
  <ModalHeader title="Modal title" />
  <ModalBody>
    <p>This is the modal body content.</p>
  </ModalBody>
  <ModalFooter />
</ComposedModal>
```

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

### Multiple MultiSelect Dropdowns Example

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/MultiSelect.svx

Illustrates how to manage the state of multiple MultiSelect dropdowns within a form, ensuring coordinated behavior.

```svelte
<script>
  import FileSource from "./FileSource.svelte"; // Assuming FileSource is available
</script>

<FileSource src="/framed/MultiSelect/MultipleMultiSelect" />
```

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

### Number Input Stepper Events Example

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/NumberInput.svx

Demonstrates various stepper events for NumberInput, including clicks and blur events on stepper buttons.

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

<NumberInput
  on:click:stepper={(e) => {
    console.log('Stepper clicked:', e.detail.direction, e.detail.value);
  }}
  on:blur:stepper={(e) => {
    console.log('Stepper blurred:', e.detail.direction, e.detail.value);
  }}
/>
```

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

### Export New Component from Index

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/CONTRIBUTING.md

Example of adding a new component export to the main index file. This makes the component available for import by consumers.

```diff
export { CopyButton } from "./CopyButton";
export { ComboBox } from "./ComboBox";
+ export { FixedComboBox } from "./FixedComboBox";
export {
  ComposedModal,
  ModalHeader,
  ModalBody,
  ModalFooter,
} from "./ComposedModal";
```

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

### Basic Theme Component

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/Theme.svx

Create a basic theme component that can be controlled programmatically. This snippet demonstrates the fundamental setup for the Theme component.

```svelte
<script>
  import Theme from "carbon-components-svelte/src/Theme/Theme.svelte";
</script>

<Theme />
```

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

### Progress Modal Example

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/ComposedModal.svx

Combines a composed modal with a progress indicator for multi-step flows. The modal footer can render Cancel, Previous, and Next buttons, with labels updating on the final step.

```svelte
<script>
  import { ComposedModal, ModalHeader, ModalBody, ModalFooter } from "carbon-components-svelte";
  import ProgressIndicator from "./ProgressIndicator.svelte"; // Assuming ProgressIndicator is a local component
  let open = false;
  let currentStep = 0;
  const steps = ['Step 1', 'Step 2', 'Step 3'];
</script>

<button class="bx--btn bx--btn--primary" on:click={() => (open = true)}>Open progress modal</button>

<ComposedModal bind:open size="lg">
  <ModalHeader title="Progress modal title" />
  <ModalBody>
    <ProgressIndicator steps={steps} currentIndex={currentStep} />
    {#if currentStep === 0}
      <p>Content for step 1.</p>
    {:else if currentStep === 1}
      <p>Content for step 2.</p>
    {:else}
      <p>Content for step 3.</p>
    {/if}
  </ModalBody>
  <ModalFooter
    cancelText="Cancel"
    primaryText={currentStep === steps.length - 1 ? 'Finish' : 'Next'}
    secondaryText="Previous"
    on:click:secondary={() => (currentStep -= 1)}
    on:click:primary={() => {
      if (currentStep === steps.length - 1) {
        open = false;
      } else {
        currentStep += 1;
      }
    }}
  />
</ComposedModal>
```

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

### Basic DataTable Example

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/DataTable.svx

Use this for displaying structured data in a tabular format. Ensure 'headers' objects have unique 'key' properties and 'rows' objects have unique 'id' properties.

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

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

### ContentSwitcher with Custom Switch Slot

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/ContentSwitcher.svx

Demonstrates customizing the appearance of individual switches by using slots. This example includes icons alongside text for each switch.

```svelte
<script>
  import { ContentSwitcher, Switch, Stack } from "carbon-components-svelte";
  import Bullhorn from "carbon-icons-svelte/lib/Bullhorn.svelte";
  import Analytics from "carbon-icons-svelte/lib/Analytics.svelte";
</script>

<ContentSwitcher>
  <Switch>
    <Stack orientation="horizontal" gap={3}>
      <Bullhorn /> Latest news
    </Stack>
  </Switch>
  <Switch>
    <Stack orientation="horizontal" gap={3}>
      <Analytics /> Trending
    </Stack>
  </Switch>
</ContentSwitcher>
```

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

### Full File Uploader with Multiple Files and Status

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/FileUploader.svx

Combines a button trigger with a list of uploaded files. This example accepts multiple JPEG files and displays them in a completed state.

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

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

### Create a Form with Various Controls

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/Form.svx

Use the Form and FormGroup components to structure related form elements. This example includes checkboxes, radio buttons, and a select menu.

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

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

### FloatingPortal Slot Direction Example

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/FloatingPortal.svx

Demonstrates how to use the `direction` slot prop to read the actual rendered direction after auto-flipping. This is useful for conditional logic and styling.

```svelte
<script>
  import { FloatingPortal } from "carbon-components-svelte";
  let open = false;
  let direction = undefined;
</script>

<button
  on:click={() => {
    open = !open;
  }}
  use:FloatingPortal
  bind:direction
>
  Toggle portal
</button>

{#if open}
  <div class="bx--tooltip" style="padding: 0.5rem;">
    <p>This is a tooltip.</p>
    <p>Rendered direction: {direction}</p>
  </div>
{/if}
```

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

### Display multi-line code with expand/collapse

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/CodeSnippet.svx

Use `type="multi"` to display longer code blocks that can be expanded or collapsed. This improves readability for extensive code examples.

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

<CodeSnippet type="multi" code="// Multi-line code example\nfunction greet(name) {\n  console.log(`Hello, ${name}!`);\n}

greet('World');" />
```

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

### Default Inline Loading

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/InlineLoading.svx

Displays a basic loading indicator with the default configuration. No specific setup is required beyond importing the component.

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

<InlineLoading />
```

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

### Basic Notification Queue Usage

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/NotificationQueue.svx

Use `bind:this` to get a reference to the queue instance, then call `add()` to show notifications. The queue automatically manages positioning and removes notifications when they timeout or are closed.

```svelte
<script>
  import { NotificationQueue } from "carbon-components-svelte";
  import { Notification } from "carbon-components-svelte";

  let queue;

  function showNotification() {
    queue.add(Notification, {
      title: "Success!",
      description: "Your changes have been saved.",
      kind: "success",
      timeout: 5000,
    });
  }
</script>

<NotificationQueue bind:this={queue} />
<button on:click={showNotification}>Show Notification</button>
```

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

### FloatingPortal Custom Target Example

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/FloatingPortal.svx

Illustrates how to use the `target` prop to mount floating content into a specific DOM element instead of the default `document.body`. Positioning is always driven by the anchor.

```svelte
<script>
  import { FloatingPortal } from "carbon-components-svelte";
  let open = false;
  let targetElement;
</script>

<div bind:this={targetElement} style="height: 100px; width: 100px; border: 1px solid red;">
  Target Element
</div>

<button
  on:click={() => {
    open = !open;
  }}
  use:FloatingPortal={{ target: targetElement }}
>
  Toggle portal
</button>

{#if open}
  <div class="bx--tooltip" style="padding: 0.5rem;">
    This content is portalled to the red div.
  </div>
{/if}
```

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

### Custom Starting Heading Level

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/Heading.svx

Use the 'level' prop on the Section component to specify a custom starting heading level. Child sections will increment from this custom level.

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

<Section level={5}>
  <Heading>Starts at Heading 5</Heading>
  <Section>
    <Heading>Heading 6</Heading>
  </Section>
</Section>
```

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

### Dynamic Theming with 'all.css'

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/README.md

Import 'all.css' and set the 'theme' attribute on the html element to switch themes programmatically.

```js
import "carbon-components-svelte/css/all.css";
```

```html
<!doctype html>
<html lang="en" theme="g10">
  <body>
    ...
  </body>
</html>
```

```html
<script>
  let theme = "white"; // "white" | "g10" | "g80" | "g90" | "g100"

  $: document.documentElement.setAttribute("theme", theme);
</script>
```

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

### Serve Built Fixtures Locally

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/CONTRIBUTING.md

Serves the statically built fixtures using Vite's preview server. This command is used after building the fixtures to replicate the CI serving environment.

```sh
bunx vite preview --config e2e/vite.config.ts
```

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

### Dynamic Theming with all.css

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/content/overview.md

Import 'all.css' for dynamic, client-side theming. Programmatically switch themes by setting the 'theme' attribute on the HTML element.

```svelte
<script>
  let theme = "white"; // "white" | "g10" | "g80" | "g90" | "g100"

  $: document.documentElement.setAttribute("theme", theme);
</script>
```

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

### Enable Batch Expansion in DataTable

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/DataTable.svx

Set `batchExpansion` to `true` to allow users to expand and collapse all rows simultaneously. This example demonstrates a basic DataTable with batch expansion enabled.

```svelte
<DataTable batchExpansion
  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"
    },
  ]}"
>
  <svelte:fragment slot="expandedRow" let:row>
    <pre>{JSON.stringify(row, null, 2)}</pre>
  </svelte:fragment>
</DataTable>
```

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

### Installing Svelte 3 and Svelte 4 Compatibility Dependencies

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/CONTRIBUTING.md

Before running compatibility tests for Svelte 3 or Svelte 4, install the specific workspace dependencies. This ensures the tests run against the correct Svelte version and avoids falling back to the Svelte 5 harness.

```shell
cd tests-svelte3 && bun install
cd ../tests-svelte4 && bun install
```

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

### FloatingPortal Inside Native Dialog Example

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/FloatingPortal.svx

Shows how floating content is automatically mounted into a native dialog when the anchor is inside it. This ensures the content remains visible and interactive within the dialog's top layer.

```svelte
<script>
  import { FloatingPortal } from "carbon-components-svelte";
  let open = false;
  let dialogRef;
</script>

<button on:click={() => dialogRef.showModal()}>Open Dialog</button>

<dialog bind:this={dialogRef}>
  <p>Dialog content</p>
  <button
    on:click={() => {
      open = !open;
    }}
    use:FloatingPortal
  >
    Toggle portal
  </button>
  {#if open}
    <div class="bx--tooltip" style="padding: 0.5rem;">
      This content is portalled into the dialog.
    </div>
  {/if}
  <button on:click={() => dialogRef.close()}>Close</button>
</dialog>
```

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

### Disabled File Uploader Example

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/FileUploader.svx

Disable the file uploader by setting the `disabled` prop to `true`.

```svelte
<FileUploader disabled multiple labelTitle="Upload files" buttonLabel="Add files" labelDescription="Only JPEG files are accepted." accept="{{['.jpg', '.jpeg']}}" status="complete" />
```

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

### Responsive Column Sizing

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/Grid.svx

Demonstrates how to create responsive layouts by adjusting column spans across different breakpoints (sm, md, lg). Ensure column spans are scaled proportionally to the total columns at each breakpoint.

```svelte
<Column sm={4} md={8} lg={16} />
```

```svelte
<Column sm={2} md={4} lg={8} />
<Column sm={2} md={4} lg={8} />
```

```svelte
<Column sm={4} md={6} lg={11} />
<Column sm={4} md={2} lg={5} />
```

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

### Create a Basic Tile Container

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/Tile.svx

Use the default Tile component to create a basic container for your content.

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

<Tile>Content</Tile>
```

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

### Importing All CSS for Theming

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/Theme.svx

Ensure you import the `all.css` stylesheet to enable dynamic theming using CSS variables.

```css
import "carbon-components-svelte/css/all.css";
```

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

### Vertical Stack Align Start

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/Stack.svx

Aligns items to the left in a vertical stack. Uses a gap of 2.

```svelte
<Stack orientation="vertical" align="start" gap={2}>
  <div  style="width: 80px">Narrow</div>
  <div  style="width: 150px">Wider item</div>
  <div  style="width: 100px">Medium</div>
</Stack>
```

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

### Clearing Local Storage Items

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/LocalStorage.svx

Demonstrates how to use the `clearItem` and `clearAll` methods to manage stored data. Access these methods using `bind:this`.

```svelte
<script>
  import LocalStorage from "$lib/LocalStorage.svelte";

  let value = "";
  let localStorageComponent;
</script>

<LocalStorage bind:this="{localStorageComponent}" bind:value="{value}" key="clear-example" />

<label>
  <input type="checkbox" bind:checked={value} />
  Persist this value
</label>

<button on:click={() => localStorageComponent.clearItem("clear-example")}>Clear Item</button>
<button on:click={() => localStorageComponent.clearAll()}>Clear All</button>

<p>Value: {value}</p>
```

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

### Tooltip Alignment

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/Tooltip.svx

Align the tooltip content using the `align` prop. Options include 'start', 'end', and 'center'.

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

<Tooltip triggerText="Start" align="start"><p>Start</p></Tooltip>
<Tooltip triggerText="End" align="end"><p>End</p></Tooltip>
<Tooltip triggerText="Center" align="center"><p>Center</p></Tooltip>
```

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

### Multiple Modals

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/Modal.svx

Demonstrates stacking multiple modals for complex workflows, where each modal maintains its own state and focus management.

```svelte
<script>
  import Modal from "$lib/components/Modal/Modal.svelte";
  import Button from "$lib/components/Button/Button.svelte";

  let open1 = false;
  let open2 = false;
</script>

<Button on:click={() => (open1 = true)}>Show first modal</Button>

<Modal bind:open={open1} title="First Modal">
  <p>Content for the first modal.</p>
  <svelte:fragment slot="footer">
    <Button kind="secondary" on:click={() => (open1 = false)}>Close</Button>
    <Button on:click={() => (open2 = true)}>Open Second Modal</Button>
  </svelte:fragment>
</Modal>

<Modal bind:open={open2} title="Second Modal">
  <p>Content for the second modal.</p>
  <svelte:fragment slot="footer">
    <Button kind="secondary" on:click={() => (open2 = false)}>Close</Button>
  </svelte:fragment>
</Modal>
```

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

### Horizontal Stack Align Start

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/Stack.svx

Aligns items to the top in a horizontal stack with a height of 120px. Uses a gap of 2.

```svelte
<Stack orientation="horizontal" align="start" gap={2} style="height: 120px">
  <div  style="height: 40px">Short</div>
  <div  style="height: 80px">Taller item</div>
  <div  style="height: 50px">Short</div>
</Stack>
```

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

### TreeView Show Node with Options

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/TreeView.svx

Configures the behavior of the `showNode()` method using optional parameters. By default, it expands, selects, and focuses a node. Options allow disabling any combination of these actions, such as expanding without selecting.

```svelte
<script>
  import TreeView from "$lib/components/TreeView/TreeView.svelte";
  import "$lib/components/TreeView/styles.scss";

  const data = [
    {
      id: "root",
      label: "Root",
      children: [
        {
          id: "child1",
          label: "Child 1",
          children: [
            { id: "grandchild1", label: "Grandchild 1" },
            { id: "grandchild2", label: "Grandchild 2" },
          ],
        },
        { id: "child2", label: "Child 2" },
      ],
    },
  ];

  let treeviewInstance;
</script>

<TreeView bind:this={treeviewInstance} data={data} />
<button on:click={() => treeviewInstance.showNode('grandchild1', { expand: false, select: true, focus: true })}>Select and Focus Grandchild 1 (no expand)</button>
<button on:click={() => treeviewInstance.showNode('grandchild1', { expand: true, select: false, focus: true })}>Expand and Focus Grandchild 1 (no select)</button>
```

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

### Left-Aligned Chevron Accordion

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/Accordion.svx

Shows how to align the chevron icon to the left of the accordion item by setting the `align` prop to 'start'.

```svelte
<Accordion align="start">
  <AccordionItem title="Natural Language Classifier">
   <p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
   </p>
  </AccordionItem>
  <AccordionItem title="Natural Language Understanding">
    <p>Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.</p>
  </AccordionItem>
  <AccordionItem title="Language Translator">
    <p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
  </AccordionItem>
</Accordion>
```

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

### Header with Toast Notification

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/UIShell.svx

Integrate toasts with the UI Shell. This example triggers a toast, which appears in the top right corner, below the header.

```svelte
<script>
  import { Header, HeaderUtilities, ToastNotification } from 'carbon-components-svelte';
  import { createEventDispatcher } from 'svelte';

  const dispatch = createEventDispatcher();

  function showToast() {
    dispatch('show-toast', {
      title: 'Success',
      message: 'Your action was successful.',
      kind: 'success',
      lowContrast: false,
      hideCloseButton: false,
      timeout: 5000
    });
  }
</script>

<Header>
  <HeaderUtilities>
    <button on:click={showToast}>Show Toast</button>
  </HeaderUtilities>
</Header>

<ToastNotification
  kind="success"
  title="Success"
  message="Your action was successful."
  timeout={5000}
  on:close={() => { /* handle close */ }}
/>
```

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

### Tabs with Icons

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/Tabs.svx

Demonstrates how to use icons with container type tabs. Ensure icons are imported and passed to the `icon` prop.

```svelte
<Tabs type="container">
  <Tab label="Calendar" icon={Calendar} />
  <Tab label="Information" icon={Information} />
  <Tab label="Settings" icon={Settings} disabled />
  <svelte:fragment slot="content">
    <TabContent>Calendar content</TabContent>
    <TabContent>Information content</TabContent>
    <TabContent>Settings content</TabContent>
  </svelte:fragment>
</Tabs>
```

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

### Horizontal Stack Justify Space Between

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/Stack.svx

Distributes items evenly with the first item at the start and the last item at the end in a horizontal stack.

```svelte
<Stack orientation="horizontal" justify="space-between">
  <div >Item 1</div>
  <div >Item 2</div>
  <div >Item 3</div>
</Stack>
```

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

### FloatingPortal with Intrinsic Alignment

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/FloatingPortal.svx

Positions the floating box along the anchor when intrinsicWidth is true. Supports 'start', 'center', and 'end' alignment.

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

  let open = false;
</script>

<Button on:click={() => (open = !open)}>Toggle Floating Content</Button>

<FloatingPortal bind:open intrinsicWidth={true} intrinsicAlign="start">
  <div class="bx--popover-content">
    <p>This is floating content.</p>
  </div>
</FloatingPortal>
```

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

### Bind to Breakpoint Size

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/Breakpoint.svx

Bind to the `size` prop to get the current breakpoint. The `on:change` event fires when the size is determined and when it changes.

```svelte
<script>
  import Breakpoint from "$lib/components/Breakpoint/Breakpoint.svelte";

  let currentSize;
  function handleChange(event) {
    currentSize = event.detail.size;
  }
</script>

<Breakpoint on:change={handleChange} />

<p>Current breakpoint: {currentSize}</p>

```

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

### Toolbar Menu with Primary Focus

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/Toolbar.svx

Set `primaryFocus` on a `ToolbarMenuItem` to ensure it receives focus when the menu is opened, guiding user interaction.

```svelte
<script>
  import { Toolbar, ToolbarContent, ToolbarMenu, ToolbarMenuItem } from "carbon-components-svelte";
</script>

<Toolbar>
  <ToolbarContent>
    <ToolbarMenu>
      <ToolbarMenuItem>Restart all</ToolbarMenuItem>
      <ToolbarMenuItem href="https://cloud.ibm.com/docs">API documentation</ToolbarMenuItem>
      <ToolbarMenuItem primaryFocus hasDivider danger>Stop all</ToolbarMenuItem>
    </ToolbarMenu>
  </ToolbarContent>
</Toolbar>
```

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

### Clone the Repository

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/CONTRIBUTING.md

Clone your fork of the repository and navigate into the project directory.

```sh
git clone <YOUR_FORK>
cd carbon-components-svelte
```

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

### JSDoc for Component Prop Type

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/CONTRIBUTING.md

Example of using JSDoc to specify the type for a component prop. This is read by sveld for generating API documentation.

```js
/**
 * Specify the size of the component
 * @type {"sm" | "default" | "lg"}
 */
export let size = "default";
```

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

### Basic Header

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/UIShell.svx

Create a basic header using the Header component.

```svelte
<script>
  import { Header, HeaderUtilities } from 'carbon-components-svelte';
</script>

<Header>
  <HeaderUtilities>
    <!-- Header content goes here -->
  </HeaderUtilities>
</Header>
```

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

### Number Input with Custom Step Value

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/NumberInput.svx

Controls the increment/decrement step size using the `step` prop. This example demonstrates a step of 0.1.

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

<NumberInput value="{1}" helperText="Step of 0.1" step={0.1} labelText="Clusters" />
```

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

### Reactive Key for User Preferences

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/LocalStorage.svx

Shows how to use a reactive `key` prop to manage separate storage entries, ideal for per-user settings. Switching keys hydrates `value` but does not dispatch an `on:update` event.

```svelte
<script>
  import LocalStorage from "$lib/LocalStorage.svelte";

  let user = "user1";
  let theme = "light";
</script>

<LocalStorage bind:value="{theme}" key="{user}-theme" />

<label>
  User:
  <select bind:value={user}>
    <option value="user1">User 1</option>
    <option value="user2">User 2</option>
  </select>
</label>

<label>
  Theme:
  <select bind:value={theme}>
    <option value="light">Light</option>
    <option value="dark">Dark</option>
  </select>
</label>

<p>Current user: {user}, Theme: {theme}</p>
```

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

### Basic Portal Usage

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/Portal.svx

Renders content directly into the document body. Useful for modals, tooltips, and menus that need to escape parent containers.

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

<Portal>
  <div>
    This content is rendered in a portal.
  </div>
</Portal>
```

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

### Non-English Locale (German)

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/DatePicker.svx

Use a non-English locale by importing the corresponding module from `flatpickr/dist/l10n/` and passing it to the `locale` prop. This example uses German.

```svelte
<script>
  import { DatePicker, DatePickerInput } from "carbon-components-svelte";
  import German from "flatpickr/dist/l10n/de";

  let dateValue;
</script>

<DatePicker
  bind:value={dateValue}
  locale={German}
/>
<DatePickerInput
  bind:value={dateValue}
  id="date-picker-non-english-locale"
  labelText="Date"
/>
```

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

### Create a basic PaginationNav

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/PaginationNav.svx

Use the default PaginationNav component for a basic pagination interface. No additional props are required for default functionality.

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

<PaginationNav />
```

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

### ContentSwitcher with Initial Selection

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/ContentSwitcher.svx

Sets the initially selected switch using the 'selectedIndex' prop. This example pre-selects the second switch (index 1).

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

<ContentSwitcher selectedIndex={1}>
  <Switch text="Latest news" />
  <Switch text="Trending" />
  <Switch text="Recommended" />
</ContentSwitcher>
```

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

### Tooltip Definition Alignment

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/TooltipDefinition.svx

Align the tooltip content horizontally relative to the anchor using the `align` prop. Options are 'start', 'center', and 'end'.

```svelte
<TooltipDefinition align="start" tooltipText="Start">
Start
</TooltipDefinition>
<TooltipDefinition align="center" tooltipText="Center">
Center
</TooltipDefinition>
<TooltipDefinition align="end" tooltipText="End">
End
</TooltipDefinition>
```

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

### Number Input with Helper Text

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/NumberInput.svx

Includes descriptive text below the input field using the `helperText` prop to guide users on expected input.

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

<NumberInput labelText="Clusters" value={0} helperText="Clusters provisioned in your region" />
```

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

### Basic Context Menu

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/ContextMenu.svx

Displays a basic context menu that appears on right-click. Use ContextMenuItem for menu items and ContextMenuDivider for visual separation. Ensure the root element has a meaningful label for accessibility.

```svelte
<script>
  import ContextMenu from "$lib/components/ContextMenu.svelte";
  import ContextMenuItem from "$lib/components/ContextMenu/ContextMenu.svelte";
  import ContextMenuDivider from "$lib/components/ContextMenu/ContextMenuDivider.svelte";
</script>

<ContextMenu labelText="Actions">
  <ContextMenu.Item labelText="Action 1" />
  <ContextMenu.Item labelText="Action 2" />
  <ContextMenuDivider />
  <ContextMenu.Item labelText="Danger action" kind="danger" />
</ContextMenu>
```

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

### Default Grid Layout

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/Grid.svx

Creates a basic grid layout with equally sized columns. Use this for standard content structuring.

```svelte
<script>
  import { Grid, Row, Column } from "carbon-components-svelte";
</script>

<Grid>
  <Row>
    <Column sm={4} md={4} lg={4}>Column 1</Column>
    <Column sm={4} md={4} lg={4}>Column 2</Column>
    <Column sm={4} md={4} lg={4}>Column 3</Column>
    <Column sm={4} md={4} lg={4}>Column 4</Column>
  </Row>
</Grid>
```

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

### Typeahead ComboBox with Custom Filter

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/ComboBox.svx

Override the default typeahead filtering logic with a custom 'shouldFilterItem' function. This example implements a simple fuzzy filter.

```svelte
<FileSource src="/framed/ComboBox/TypeaheadCustomFilter" />
```

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

### Select Small Size

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/Select.svx

Use the small size variant (`size="sm"`) for compact layouts.

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

<Select size="sm" labelText="Carbon theme" selected="g10" >
  <SelectItem value="white" text="White" />
  <SelectItem value="g10" text="Gray 10" />
  <SelectItem value="g80" text="Gray 80" />
  <SelectItem value="g90" text="Gray 90" />
  <SelectItem value="g100" text="Gray 100" />
</Select>
```

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

### Flatpickr Options: Show Months

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/DatePicker.svx

Pass additional Flatpickr options via `flatpickrProps`. This example sets `showMonths` to display two months side-by-side.

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

  let dateValue;
</script>

<DatePicker
  bind:value={dateValue}
  flatpickrProps={{
    showMonths: 2,
  }}
/>
<DatePickerInput
  bind:value={dateValue}
  id="date-picker-flatpickr-props"
  labelText="Date"
/>
```

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

### Display a single-line code snippet

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/CodeSnippet.svx

Use the default CodeSnippet component to display a single line of code. This is useful for commands or short code examples.

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

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

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

### Override Copy Functionality

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/CopyButton.svx

Provide a custom function to the `copy` prop to replace the default Clipboard API behavior. This example uses the 'clipboard-copy' package.

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

<FileSource src="/framed/CopyButton/CopyButtonOverride" />
```

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

### File Uploader with Prepend File Ordering

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/FileUploader.svx

Set `orderFiles` to 'prepend' to show the newest uploads first instead of appending them to the end.

```svelte
<script>
  import FileUploader from "$lib/components/FileUploader.svelte";
</script>

<FileUploader
  orderFiles="prepend"
  labelTitle="Upload files"
  buttonLabel="Add files"
  {...$$props}
/>
```

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

### Header with Utilities

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/UIShell.svx

Include utility components in the header using `HeaderUtilities`.

```svelte
<script>
  import { Header, HeaderUtilities, HeaderAction } from 'carbon-components-svelte';
  import Search20 from '@carbon/icons-svelte/lib/search/20';
  import Notification20 from '@carbon/icons-svelte/lib/notification/20';
</script>

<Header>
  <HeaderUtilities>
    <HeaderAction
      aria-label="Search"
      tooltip="Search"
      bind:expanded
    >
      <svelte:fragment slot="icon">
        <Search20 />
      </svelte:fragment>
    </HeaderAction>
    <HeaderAction
      aria-label="Notifications"
      tooltip="View notifications"
      bind:expanded
    >
      <svelte:fragment slot="icon">
        <Notification20 />
      </svelte:fragment>
    </HeaderAction>
  </HeaderUtilities>
</Header>
```

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

### Multiple Independent Portals

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/Portal.svx

Demonstrates how multiple Portal instances can be used independently. Each instance creates its own element in the document body and is automatically cleaned up when removed.

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

<Portal>
  <div>Portal 1</div>
</Portal>
<Portal>
  <div>Portal 2</div>
</Portal>
```

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

### Skeleton Accordion with Left-Aligned Chevron

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/Accordion.svx

The skeleton state can be combined with the left-aligned chevron style by setting both the `skeleton` and `align="start"` props.

```svelte
<Accordion skeleton align="start" />
```

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

### Initial Selected Items in MultiSelect

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/MultiSelect.svx

Pre-select items in the multi-select dropdown by providing an array of item IDs to the `selectedIds` prop. This example pre-selects 'Slack' and 'Email'.

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

<MultiSelect selectedIds="{[\"0\", \"1\"]}" labelText="Contact" label="Select contact methods..."
    items="{[{id: \"0\", text: \"Slack\"},
    {id: \"1\", text: \"Email\"},
    {id: \"2\", text: \"Fax\"}]}" 
  />
```

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

### Small Toolbar

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/Toolbar.svx

Configure a compact toolbar using the `size="sm"` prop. This is useful for space-constrained interfaces.

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

<Toolbar size="sm">
  <ToolbarContent>
    <Button size="small">Create</Button>
  </ToolbarContent>
</Toolbar>
```

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

### Inline Loading with Description

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/InlineLoading.svx

Add descriptive text to provide context about the loading operation. This helps users understand what is happening.

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

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

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

### Custom Locale Object

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/DatePicker.svx

Customize weekday labels by passing a `CustomLocale` object to the `locale` prop. This example restores flatpickr's default English shorthands.

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

  let dateValue;

  const customLocale = {
    weekdays: {
      shorthand: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
      longhand: [
        "Sunday",
        "Monday",
        "Tuesday",
        "Wednesday",
        "Thursday",
        "Friday",
        "Saturday",
      ],
    },
  };
</script>

<DatePicker
  bind:value={dateValue}
  locale={customLocale}
/>
<DatePickerInput
  bind:value={dateValue}
  id="date-picker-locale"
  labelText="Date"
/>
```

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

### Pagination Skeleton Loader

Source: https://github.com/carbon-design-system/carbon-components-svelte/blob/master/docs/src/pages/components/Pagination.svx

Use the `PaginationSkeleton` component to display a loading state for the pagination controls. This is useful while data is being fetched.

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

<PaginationSkeleton />
```