### Install Dependencies

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/vscode-snippets-extension/SETUP.md

Navigate to the extension's directory and install project dependencies using Yarn.

```bash
cd packages/vscode-snippets-extension
yarn install
```

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

### Install Dependencies

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/react/src/components/ExampleButton/__stories__/ExampleButton.mdx

Install the necessary Carbon React and ExampleButton packages using yarn.

```bash
yarn add @carbon/react
yarn add @carbon/labs/react-example-button
```

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

### Install @carbon-labs/react-ui-shell with npm

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/react/src/components/UIShell/README.md

Install the package using npm. Ensure @carbon/react is also installed.

```bash
npm install -S @carbon-labs/react-ui-shell @carbon/react
```

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

### Install @carbon-labs/primitives

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/primitives/README.md

Install the package using npm or yarn.

```bash
npm install @carbon-labs/primitives
# or
yarn add @carbon-labs/primitives
```

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

### Install @carbon-labs/react-ui-shell with Yarn

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/react/src/components/UIShell/README.md

Install the package using Yarn. Ensure @carbon/react is also installed.

```bash
yarn add @carbon-labs/react-ui-shell @carbon/react
```

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

### Install All Project Dependencies

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/docs/developing.md

Run this command to install all dependencies for every package in the project. This also enables linking between developing packages.

```bash
yarn install

```

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

### Start Storybook for Web Components

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/AGENTS.md

Navigate to the `packages/web-components` directory and run `yarn storybook` to start the Storybook development server for web components.

```bash
cd packages/web-components
yarn storybook
```

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

### Install Resizer Component

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/react/src/components/Resizer/__stories__/Resizer.mdx

Install the Resizer component and its dependencies using yarn.

```bash
yarn add @carbon/react
yarn add @carbon-labs/react-resizer
```

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

### Install StylePicker Component

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/react/src/components/StylePicker/__stories__/StylePicker.mdx

Install the necessary packages for the StylePicker component using yarn.

```bash
yarn add @carbon/react
yarn add @carbon-labs/react-style-picker
```

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

### Install Theme Settings Packages

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/react/src/components/ThemeSettings/__stories__/ThemeSettings.mdx

Install the necessary packages for Theme Settings using yarn.

```bash
yarn add @carbon/react
yarn add @carbon-labs/react-theme-settings
```

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

### Start Storybook for React Components

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/AGENTS.md

Navigate to the `packages/react` directory and run `yarn storybook` to start the Storybook development server for React components.

```bash
cd packages/react
yarn storybook
```

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

### Install DISPLAY_NAME Packages

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/react/tasks/generate/templates/__stories__/DISPLAY_NAME.mdx

Install the necessary packages for DISPLAY_NAME using yarn.

```bash
yarn add @carbon/react
yarn add @carbon-labs/react-STYLE_NAME
```

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

### Install UI Shell and Carbon React

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/react/src/components/UIShell/__stories__/UIShell.mdx

Install the necessary packages for the UI Shell using npm or Yarn.

```bash
npm install -S @carbon/labs-react-ui-shell @carbon/react
```

```bash
yarn add @carbon/labs-react-ui-shell @carbon/react
```

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

### Basic UI Shell Composition with React

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/react/src/components/UIShell/README.md

Import and compose components from both @carbon/react and @carbon-labs/react-ui-shell to build the UI Shell. This example shows a basic Header and SideNav setup.

```jsx
import { SideNav } from '@carbon-labs/react-ui-shell';
import { Header } from '@carbon/react';

function MyComponent() {
  return (
    <Header>
      <SideNav>...</SideNav>>
    </Header>
  );
}
```

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

### Migration Guide

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/react/src/v12/components/DatePicker/__stories__/date-picker-react.mdx

Instructions on how to migrate to the new DatePicker implementation.

```APIDOC
## Migration

No migration needed. Existing code continues to work without modifications. Simply update your import path:

```tsx
// Before (Carbon React v11)
import { DatePicker, DatePickerInput } from '@carbon/react';

// After (Carbon Labs)
import { DatePicker, DatePickerInput } from '@carbon-labs/react/date-picker';
```
```

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

### Audio Card Examples

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/web-components/src/components/chat/components/cardElement/_stories-dont-show_/docs.mdx

Shows the format for audio cards, containing title, description, and a link to the audio file.

```javascript
[
  {
    title: 'Second Hungarian Rhapsody',
    description: 'By Franz Liszt',
    link: 'https://upload.wikimedia.org/wikipedia/commons/2/20/Franz_Liszt_-_Second_Hungarian_Rhapsody.ogg',
  },
  {
    title: 'Quintet No. 1 in Bb major, movement 2',
    description: 'By Giovanni Giuseppe Cambini',
    link: 'https://upload.wikimedia.org/wikipedia/commons/f/f5/Giovanni_Giuseppe_Cambini_-_Quintet_No._1_in_Bb_major%2C_movement_2.ogg',
  },
  {
    title: 'Klavierkonzert d-moll- 3. Allegro',
    description: 'By Johann Sebastian Bach',
    link: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Johann_Sebastian_Bach_-_Klavierkonzert_d-moll_-_3._Allegro.ogg',
  },
]
```

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

### Install Calendar Package

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/react/src/components/Calendar/__stories__/Calendar.mdx

Install the Carbon React and Carbon Labs Calendar packages using yarn.

```bash
yarn add @carbon/react
yarn add @carbon/labs-react-calendar
```

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

### Install Processing Component

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/react/src/components/Processing/__stories__/Processing.mdx

Install the Processing component and its dependencies using yarn.

```bash
yarn add @carbon/react
yarn add @carbon-labs/react-processing
```

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

### Complete PlaneStack3D Example

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/react/src/components/PlaneStack3D/__stories__/PlaneStack3D.mdx

A comprehensive example showcasing all layers, foundation configuration, and event handlers for PlaneStack3D.

```jsx
import {
  PlaneStack3D,
  BLOCK_SIZES,
  FOUNDATION_RACK_STATES,
} from '@carbon-labs/react-plane-stack-3d';

function CompleteVisualization() {
  const primaryLayer = [
    {
      id: 'block-1',
      label: 'Service A',
      hoverLabel: 'Service A - Active',
      columnIndex: 0,
      size: BLOCK_SIZES.md,
      color: 'blue',
    },
    {
      id: 'block-2',
      label: 'Service B',
      hoverLabel: 'Service B - Healthy',
      columnIndex: 1,
      size: BLOCK_SIZES.lg,
      color: 'green',
    },
    // ... more blocks
  ];

  const coreLayer = [
    {
      id: 'core-1',
      label: 'Database',
      hoverLabel: 'Shared Database Service',
      size: BLOCK_SIZES.lg,
    },
  ];

  const foundationConfig = {
    id: 'foundation',
    label: 'Infrastructure',
    racks: [
      {
        id: 'rack-1',
        slots: 4,
        variant: FOUNDATION_RACK_STATES.open,
        status: 'green',
      },
      {
        id: 'rack-2',
        slots: 4,
        variant: FOUNDATION_RACK_STATES.open,
        status: 'green',
      },
    ],
  };

  const textBracket = {
    title: 'System Architecture',
    sections: [
      'Multi-tier application stack',
      'Responsive column layout',
      'Interactive 3D visualization',
    ],
  };

  const handleBlockClick = (blockId) => {
    console.log('Block clicked:', blockId);
  };

  return (
    <PlaneStack3D
      primaryLayer={primaryLayer}
      coreLayer={coreLayer}
      foundationConfig={foundationConfig}
      textBracket={textBracket}
      theme="dark"
      lockColumnCount={false}
      enablePrimaryLayerCarousel={true}
      onBlockClick={handleBlockClick}
      enableA11y={true}
    />
  );
}

```

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

### Include Example Button Styles

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/web-components/src/components/example-button/__stories__/example-button.mdx

Import the necessary theming tokens from `@carbon/styles` to ensure the Example Button component is styled correctly. This can be done via npm or CDN helpers.

```javascript
cdnJs({ components: ['tag'] }, packageJson)
```

```javascript
cdnCss()
```

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

### Install WhatsNew Package with npm

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/react/src/components/WhatsNew/README.md

Install the WhatsNew package along with its peer dependencies using npm.

```bash
npm install -S @carbon/react @carbon/ibm-products @carbon-labs/react-whats-new
```

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

### Package Extension Locally

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/vscode-snippets-extension/SETUP.md

Create a .vsix file for local installation and testing of the VSCode extension.

```bash
yarn package
```

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

### Install WhatsNew Package with Yarn

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/react/src/components/WhatsNew/README.md

Install the WhatsNew package along with its peer dependencies using Yarn.

```bash
yarn add @carbon/react @carbon/ibm-products @carbon-labs/react-whats-new
```

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

### Build All Package Files

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/docs/developing.md

Execute this command to build all package files after installing dependencies. This ensures that components do not fail during development.

```bash
yarn build

```

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

### Run Storybook for React

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/docs/developing.md

Navigate to the react package directory and run this command to start the Storybook development server for React components.

```bash
cd packages/react
yarn storybook

```

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

### Install and Convert Video to Optimized GIF with Gifski

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/vscode-snippets-extension/demo.gif.md

Use Gifski for the best quality and smallest file size when converting videos to GIFs. Ensure Gifski is installed for your operating system before running the command.

```bash
# Install gifski first
# Mac: brew install gifski
# Windows: Download from https://gif.ski/
# Linux: cargo install gifski

# Convert video to optimized GIF (produces smallest files)
gifski -o demo-optimized.gif demo.mov --fps 10 --width 800 --quality 80
```

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

### Install ovsx CLI

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/vscode-snippets-extension/PUBLISHING.md

Install the Open VSX CLI globally using npm. This command is required before you can publish extensions.

```bash
npm install -g ovsx
```

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

### AnimatedHeader Component Example Usage

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/react/src/components/AnimatedHeader/__stories__/AnimatedHeader.mdx

An example demonstrating the AnimatedHeader component with all prop types enabled, including configurations for product name, description, welcome text, user name, ARIA labels, animations, tiles, workspace selector, tasks controller, content switcher, and header actions.

```jsx
<AnimatedHeader
  productName="[Product name]"
  description="Connect, monitor, and manage data."
  welcomeText="Welcome"
  userName="Drew"
  ariaLabels={ariaLabels as AriaLabels}
  headerAnimation={watsonXAnimatedLight}
  headerStatic={watsonXStaticLight}
  allTileGroups={tiles}
  selectedTileGroup={selectedTile}
  workspaceSelectorConfig={workspaceSelectorConfig}
  tasksControllerConfig={tasksControllerConfigDropdown as TasksControllerConfig}
  contentSwitcherConfig={contentSwitcherConfig}
  headerActionConfig={headerActionGhostConfig}
  isLoading={false}
  tileClickHandler={handleTileClicks}
/>
```

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

### Import Global Header Component

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/web-components/src/components/global-header/__stories__/global-header.mdx

Import the global header web component for use in your project. This is the initial setup step.

```javascript
import '@carbon-labs/wc-global-header';
```

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

### File Card Examples

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/web-components/src/components/chat/components/cardElement/_stories-dont-show_/docs.mdx

Illustrates the data structure for file cards, including title, link, and shortened URL.

```javascript
[
  {
    title: 'Arxiv_ai_papers.csv',
    link: 'https://arxiv.org/pdf/2312.05688.pdf',
    shortenedUrl: 'arxiv.org',
  },
  {
    title: 'Airports.csv',
    link: 'https://github.com/vega/vega-datasets/blob/main/data/airports.csv',
    shortenedUrl: 'github.com/vega',
  },
  {
    title: 'A Literature Survey of Recent Advances in Chatbots',
    link: 'https://arxiv.org/pdf/2201.06657.pdf',
    shortenedUrl: 'arxiv.org',
  },
]
```

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

### URL Card Examples

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/web-components/src/components/chat/components/cardElement/_stories-dont-show_/docs.mdx

Demonstrates the structure for URL cards, including title, link, shortened URL, image URL, and description.

```javascript
[
  {
    title: 'United States',
    link: 'https://en.wikipedia.org/wiki/United_States',
    shortenedUrl: 'wikipedia.org',
    imageUrl:
      'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Flag_of_the_United_States_%28DoS_ECA_Color_Standard%29.svg/250px-Flag_of_the_United_States_%28DoS_ECA_Color_Standard%29.svg.png',
    description:
      'The United States of America (USA or U.S.A.), commonly known as the United States (US or U.S.) or America, is a country primarily located in North America, between Canada and Mexico. It is a federation of 50 states, a federal capital district (Washington, D.C.),',
  },
  {
    title: 'Instagram',
    link: 'https://www.instagram.com',
    shortenedUrl: 'instagram.com',
    imageUrl:
      'https://socialsharepreview.com/api/image-proxy?url=https%3A%2F%2Fstatic.cdninstagram.com%2Frsrc.php%2Fv3%2FyR%2Fr%2FhexDR1NOpRC.png',
    description:
      'Instagram: A simple, fun & creative way to capture, edit and share your pictures',
  },
  {
    title: 'The New York Times - Breaking News, US News, World News and Videos',
    link: 'https://www.nyt.com',
    shortenedUrl: 'nyt.com',
    imageUrl:
      'https://socialsharepreview.com/api/image-proxy?url=https%3A%2F%2Fstatic01.nyt.com%2Fnewsgraphics%2Fimages%2Ficons%2FdefaultPromoCrop.png',
    description:
      'Live news, investigations, opinion, photos and video by the journalists of The New York T...',
  },
]
```

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

### Include Video Demo in README

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/vscode-snippets-extension/demo.gif.md

Use a video file (MP4) for a higher quality and smaller-sized demo. Host the video on GitHub or YouTube and link to it in the README.

```markdown
## Demo

https://user-images.githubusercontent.com/YOUR_ID/video.mp4

_Type `theme`, `type`, or `$spacing` to see snippets in action_
```

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

### Preview creation steps without changes

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/tools/create/README.md

Use the `--dry-run` flag to see all the steps the creation process would take without actually making any changes to your project.

```bash
npx @carbon-labs/create@latest MyWidget --dry-run
```

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

### Load Empty State Component via CDN

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/examples/web-components/empty-state/cdn.html

Include this script tag in your HTML to load the empty state web component from a CDN. This is the simplest way to get started.

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@carbon-labs/web-components@latest/dist/custom-elements/index.esm.js"></script>
```

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

### CDN Import for Style Picker

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/web-components/src/components/style-picker/__stories__/style-picker.single.mdx

Import the Style Picker component and its dependencies using CDN links. This is an alternative to npm installation, useful for quick setups or environments without a package manager.

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@carbon-labs/web-components@latest/es/index.js"></script>
```

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

### Date Picker Actions Example

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/primitives/src/date-picker/README.md

Shows an action for the RANGE_END_SELECT event that updates the context with the selected end date and formats the date range string. It also handles swapping dates if the end date is before the start date.

```typescript
// Example: Update context when range end is selected
{
  RANGE_END_SELECT: (context, event) => {
    const endDate = event.payload?.date;
    const { startDate } = context;

    // Swap if needed
    if (endDate < startDate) {
      return {
        startDate: endDate,
        endDate: startDate,
        value: `${formatDate(endDate)}/${formatDate(startDate)}`,
      };
    }

    return {
      endDate,
      value: `${formatDate(startDate)}/${formatDate(endDate)}`,
    };
  };
}
```

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

### Usage Example for WhatsNew Components

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/react/src/components/WhatsNew/README.md

Demonstrates how to import and compose components from @carbon-labs/react-whats-new, @carbon/react, and @carbon/ibm-products to create the 'What's New' pattern.

```jsx
import React, { useCallback, useRef, useState } from 'react';

import {
  Toc,
  TocList,
  TocItem,
  TocSections,
  TocSection,
  Bubble,
  BubbleHeader,
  ViewStack,
  View,
} from '@carbon-labs/react-whats-new/es/index';
import { Tearsheet } from '@carbon/ibm-products';

function App() {
  return (
    <>
      {/* Tier 2 - release notification pattern */}
      <Bubble>
        <BubbleHeader>...</BubbleHeader>
        <ViewStack>
          <View>...</View>
        </ViewStack>
        ...
      </Bubble>

      {/* Tier 1 - what's new center pattern */}
      <Toc ref={tocRef}>
        <Tearsheet
          influencer={
            <TocList>
              <TocItem>Feature 1</TocItem>
              <TocItem>Feature 2</TocItem>
            </TocList>
          }>
          <TocSections threshold={0.2}>
            <TocSection as="div">...</TocSection>
            ...
          </TocSections>
        </Tearsheet>
      </Toc>
    </>
  );
}

export default App;
```

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

### Install PlaneStack3D Component

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/react/src/components/PlaneStack3D/__stories__/PlaneStack3D.mdx

Install the PlaneStack3D component and its dependencies using yarn.

```bash
yarn add @carbon/react
yarn add @carbon-labs/react-plane-stack-3d
```

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

### Preview Component Creation Process

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/AGENTS.md

Use the `--dry-run` flag to preview the component creation process without making any actual changes to the files. This is useful for understanding the steps involved before committing to the creation.

```bash
npx @carbon-labs/create@latest <ComponentName> --dry-run
```

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

### Basic Resizer HTML Structure

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/web-components/src/components/resizer/__stories__/resizer.mdx

Example of setting up a basic resizable layout using `clabs-resizer-grid`, `clabs-resizer-panel`, and `clabs-resizer-handle`. This demonstrates the declarative usage.

```html
<clabs-resizer-grid>
  <clabs-resizer-panel>
    <div>Panel 1 content</div>
  </clabs-resizer-panel>
  <clabs-resizer-handle></clabs-resizer-handle>
  <clabs-resizer-panel>
    <div>Panel 2 content</div>
  </clabs-resizer-panel>
</clabs-resizer-grid>
```

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

### Import ExampleButton SCSS

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/react/src/components/ExampleButton/__stories__/ExampleButton.mdx

Import the necessary SCSS files for the ExampleButton component into your styles.

```scss
@use '@carbon/react';
@use '@carbon/labs/react-example-button/scss/example-button';
```

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

### Install AnimatedHeader Component

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/react/src/components/AnimatedHeader/__stories__/AnimatedHeader.mdx

Install the necessary packages for the AnimatedHeader component using yarn.

```bash
yarn add @carbon/react
yarn add @carbon-labs/react-animated-header
```

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

### Run Repository Local Prep Command

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/AGENTS.md

Execute this command before opening a PR to add copyright headers, format code, deduplicate dependencies, and lint licenses.

```bash
yarn prep
```

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

### Create Open VSX Namespace and Publish

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/vscode-snippets-extension/PUBLISHING.md

For first-time publishers, create a namespace on Open VSX using `ovsx create-namespace`. Subsequent publishes can then be done without specifying the VSIX file if it's in the current directory.

```bash
# Create namespace (first time only)
npx ovsx create-namespace lee-chase -p YOUR_ACCESS_TOKEN

# Publish
npx ovsx publish -p YOUR_ACCESS_TOKEN
```

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

### Publish Extension to Open VSX

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/vscode-snippets-extension/PUBLISHING.md

Build and package your extension, then publish it to the Open VSX Registry using the `ovsx publish` command with your access token. Ensure you have built and packaged the extension first.

```bash
# Build the extension first
yarn build
yarn package

# Publish to Open VSX
npx ovsx publish carbon-token-snippets-0.1.0.vsix -p YOUR_ACCESS_TOKEN
```

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

### Run create-carbon-labs from local workspace

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/tools/create/README.md

Execute the create-carbon-labs binary directly from the tool's workspace within your Carbon Labs fork.

```bash
yarn workspace @carbon-labs/create create-carbon-labs my-component
```

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

### Install TextHighlighter Dependencies

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/react/src/components/TextHighlighter/__stories__/TextHighlighter.mdx

Install the necessary Carbon React and TextHighlighter packages using yarn.

```bash
yarn add @carbon/react
yarn add @carbon-labs/react-text-highlighter
```

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

### HTML Structure for Pictogram Options

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/web-components/src/components/style-picker/__stories__/style-picker.single.mdx

Example demonstrating how to set up the Style Picker for pictogram selection. This includes a trigger and a section with categorized pictogram options.

```html
<clabs-style-picker
  .align="right"
  ?open=${false}
  heading="Choose pictogram">
  <cds-icon-button
    slot="trigger"
    kind="ghost"
    @click=${toggleButton}>
    ${ColorPalette16({ slot: 'icon' })}
    <span slot="tooltip-content">Pictogram list</span>
  </cds-icon-button>
  <clabs-style-picker-section size="lg">
    ${pictograms.map(
      (group) =>
        html`<clabs-style-picker-group heading=${group.label}>
          ${group.items.map(
            (item) => html`
              <clabs-style-picker-option
                value=${item.value}
                label=${item.label}
                ?selected=${item.label === 'Bangalore'}
                @clabs-style-picker-option-select=${(ev) =>
                  changePictogram(ev)}>
                ${renderCarbonPictogram({
                  ...item.pictogram,
                  attrs: {
                    ...item.pictogram.attrs,
                    width: '3rem',
                    height: '3rem',
                    'aria-label': item.label,
                  },
                })}
              </clabs-style-picker-option>
            `
          )}
        </clabs-style-picker-group> `
    )}
  </clabs-style-picker-section>
</clabs-style-picker>
```

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

### Development commands for @carbon-labs/create

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/tools/create/README.md

Install dependencies, run tests with Vitest, or use watch mode for continuous testing during development of the create tool.

```bash
cd tools/create
yarn install
yarn test           # vitest run
yarn test:watch     # vitest watch mode
```

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

### Horizontal Toolbar Example

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/web-components/src/components/toolbar/__stories__/toolbar.mdx

Displays a horizontal layout of the toolbar component. This example is rendered using Storybook's Canvas component.

```javascript
import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/addon-docs/blocks';
import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
import meta from './toolbar.stories';
import * as ToolbarStories from './toolbar.stories';

<Meta of={meta} />

# Toolbar

- **Initiative owner(s):** Carbon for IBM Products
- **Status:** Draft
- **Target library:** TBD
- **Target library maintainer(s) / PR Reviewer(s):** N/A
- **Support channel:** `#carbon-labs`

> 💡 Check our
> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-labs/tree/main/examples/web-components/toolbar)
> example implementation.

[![Edit carbon-labs](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-labs/tree/main/examples/web-components/toolbar)

## Overview

The toolbar pattern. made with carbon design system's web components.

[Pattern Guidance](https://carbondesignsystem.com/patterns/text-toolbar-pattern/)

To build this pattern, we recommend including the following components:

- [cds-stack](https://web-components.carbondesignsystem.com/?path=/docs/layout-stack)
- [cds-icon-button](https://web-components.carbondesignsystem.com/?path=/docs/components-icon-button)
- [cds-dropdown](https://web-components.carbondesignsystem.com/?path=/docs/components-dropdown)
- [cds-overflow-menu](https://web-components.carbondesignsystem.com/?path=/docs/components-overflow-menu)

These components are used within an `clabs-toolbar` wrapper component provided
as an example to handle state management and some pattern specific behaviors.

#### Horizontal Example

<Canvas of={ToolbarStories.Horizontal} />

#### Vertical Example

<Canvas of={ToolbarStories.Vertical} />

```

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

### Import Example Button Component

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/web-components/src/components/example-button/__stories__/example-button.mdx

Import the Example Button component using a JavaScript import statement. This is necessary to register the custom element with the browser.

```javascript
import '@carbon-labs/wc-example-button/es/index.js';
```

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

### Render Example Button in HTML

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/web-components/src/components/example-button/__stories__/example-button.mdx

Use the custom HTML tag `<clabs-example-button>` to render the Example Button component in your application. The content within the tag will be the button's label.

```html
<clabs-example-button> Example button </clabs-example-button>
```

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

### Prepare Component for PR Review

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/README.md

Run this command when your component is ready for Pull Request review. It formats the repository, dedupes dependencies, validates license headers, and ensures copyright headers are present in source files.

```bash
yarn prep
```

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

### Date Picker State Machine Example

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/primitives/src/date-picker/README.md

Demonstrates initializing the Date Picker state machine in range mode and performing a sequence of actions to select a date range. Shows state transitions and context updates.

```typescript
// Range mode
const machine = new DatePickerStateMachine({
  mode: 'range',
  closeOnSelect: true,
});

// Open calendar
machine.send(DatePickerEvent.CALENDAR_OPEN);
// State: CALENDAR_OPEN

// Select start date
machine.send(DatePickerEvent.RANGE_START_SELECT, {
  date: new Date('2024-01-15'),
});
// State: SELECTING_END
// Context: { startDate: 2024-01-15, endDate: null }

// Select end date
machine.send(DatePickerEvent.RANGE_END_SELECT, {
  date: new Date('2024-01-20'),
});
// State: DATE_SELECTED
// Context: { startDate: 2024-01-15, endDate: 2024-01-20, value: '2024-01-15/2024-01-20' }
// Calendar closes automatically
```

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

### Install VSCode Snippets Package

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/vscode-snippets/README.md

Installs the Carbon Design System SCSS snippets package using npm or yarn. The package automatically adds snippet files to your project's .vscode folder.

```bash
npm install @carbon-labs/vscode-snippets
```

```bash
yarn add @carbon-labs/vscode-snippets
```

```bash
npm install @carbon-labs/vscode-snippets --foreground-scripts
```

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

### Install Link List Component Styles (CDN)

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/web-components/src/components/chat/components/linkListElement/_stories-dont-show_/docs.mdx

Import the necessary theming tokens and styles for the chat components from the CDN. This ensures proper visual styling.

```javascript
import { Markdown, Meta } from '@storybook/blocks';
import { cdnJs, cdnCss } from '../../../../../globals/internal/storybook-cdn';
import * as linkListElementStories from './linkListElement.stories';
import packageJson from '../../../package.json';

<Meta of={linkListElementStories} />

<Markdown>{`${cdnJs({ components: ['chat'] }, packageJson)}`}</Markdown>
<Markdown>{`${cdnCss()}`}</Markdown>
```

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

### Range Date Picker with Calendar

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/react/src/v12/components/DatePicker/__stories__/date-picker-react.mdx

Enable users to select a start and end date together using a range date picker. The first input serves as the start date and the second as the end date.

```jsx
<Canvas of={DatePickerStories.RangeWithCalendar} />
```

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

### Tag Input with Initial Tags

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/react/src/components/TagInput/__stories__/TagInput.mdx

Shows how to initialize the Tag Input with a predefined set of tags.

```javascript
import { TagInput } from "@carbon/react";

<TagInput initialTags={['tag1', 'tag2']} />
```

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

### Nested Panels - Before SplitPanel

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/react/src/components/SplitPanel/DEPRECATION-plan.md

Example of nested SplitPanel components for complex layouts.

```jsx
<SplitPanel
  orientation="horizontal"
  defaultSplitValue={25}
  childrenBeforeSplit={
    <SplitPanel
      orientation="vertical"
      defaultSplitValue={25}
      childrenBeforeSplit={<div>Top Left</div>}
      childrenAfterSplit={<div>Bottom Left</div>}
    />
  }
  childrenAfterSplit={<div>Right</div>}
/>
```

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

### Minimal PlaneStack3D Example

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/react/src/components/PlaneStack3D/__stories__/PlaneStack3D.mdx

A minimal configuration for PlaneStack3D, using only the primary layer blocks.

```jsx
import { PlaneStack3D, BLOCK_SIZES } from '@carbon-labs/react-plane-stack-3d';

function MinimalVisualization() {
  const primaryLayer = [
    { id: '1', label: 'Block 1', size: BLOCK_SIZES.md },
    { id: '2', label: 'Block 2', size: BLOCK_SIZES.md },
    { id: '3', label: 'Block 3', size: BLOCK_SIZES.md },
  ];

  return <PlaneStack3D primaryLayer={primaryLayer} theme="dark" />;
}

```

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

### Basic HTML Structure for First-time Orientation

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/web-components/src/components/first-time-orientation/__stories__/first-time-orientation.mdx

This snippet shows the fundamental HTML structure for implementing the first-time orientation pattern using the c4p-interstitial-screen component. It includes placeholders for header, body, and footer, along with event listeners for opening and closing.

```html
<c4p-interstitial-screen
  ?open=${true}
  @c4p-interstitial-opened=${(e) => {
    console.log('event initialize', e.detail);
  }}
  @c4p-interstitial-closed=${this.handleClose}
>
  <style>
    c4p-interstitial-screen-body {
      block-size: 28rem;
      display: flex;
    }
  </style>

  <c4p-interstitial-screen-header
    header-title="Use case-specific title"
    header-subtitle="Use case-specific sub title"
  ></c4p-interstitial-screen-header>

  <c4p-interstitial-screen-body>
    <c4p-interstitial-screen-body-item stepTitle="Welcome" id="${1}">
      <welcome-interstitial />
    </c4p-interstitial-screen-body-item>

    <c4p-interstitial-screen-body-item stepTitle="Tailor your experience" id="${2}">
      <personalization-interstitial />
    </c4p-interstitial-screen-body-item>
  </c4p-interstitial-screen-body>

  <c4p-interstitial-screen-footer></c4p-interstitial-screen-footer>
</c4p-interstitial-screen>
```

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

### Basic PlaneStack3D Usage

Source: https://github.com/carbon-design-system/carbon-labs/blob/main/packages/react/src/components/PlaneStack3D/__stories__/PlaneStack3D.mdx

Demonstrates the basic setup for the PlaneStack3D component with a single primary layer.

```jsx
import { PlaneStack3D, BLOCK_SIZES } from '@carbon-labs/react-plane-stack-3d';

function App() {
  const primaryLayer = [
    {
      id: 'block-1',
      label: 'Service A',
      size: BLOCK_SIZES.md,
      color: 'blue',
    },
  ];

  return <PlaneStack3D primaryLayer={primaryLayer} theme="dark" />;
}

export default App;
```