### CvModal Script Setup

Source: https://context7.com/carbon-design-system/carbon-components-vue/llms.txt

The script setup for the CvModal examples, including necessary imports from '@carbon/vue' and ref definitions for managing modal visibility and form data. Handles save, delete, and processing logic.

```javascript
import { ref } from 'vue';
import { CvModal, CvButton, CvTextInput, CvTextArea, CvInlineLoading } from '@carbon/vue';

const showBasicModal = ref(false);
const showDangerModal = ref(false);
const showControlledModal = ref(false);
const showLargeModal = ref(false);
const processing = ref(false);
const profileName = ref('John Doe');
const profileBio = ref('');

function handleSave() {
  console.log('Saving profile:', profileName.value);
  showBasicModal.value = false;
}

function handleDelete() {
  console.log('Deleting account...');
  showDangerModal.value = false;
}

function handleHideRequest({ 'cv:reason': reason }) {
  console.log('Hide requested:', reason);
  // Control when modal closes
  if (!processing.value) {
    showControlledModal.value = false;
  }
}

async function processAndClose() {
  processing.value = true;
  await new Promise(resolve => setTimeout(resolve, 2000));
  processing.value = false;
  showControlledModal.value = false;
}
```

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

### Install and Register @carbon/vue

Source: https://context7.com/carbon-design-system/carbon-components-vue/llms.txt

Install the library via npm or yarn. Register all components globally or specific components using `app.use()` in your main Vue application file.

```javascript
// Install via npm
// npm add @carbon/vue

// Install via yarn
// yarn add @carbon/vue

// src/main.js - Register all components globally
import { createApp } from 'vue';
import CarbonVue3 from '@carbon/vue';
import App from './App.vue';

const app = createApp(App);
app.use(CarbonVue3);
app.mount('#app');

// Or register specific components only
app.use(CarbonVue3, ['CvButton', 'CvModal', 'CvDataTable']);
```

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

### Default CvTile Example

Source: https://github.com/carbon-design-system/carbon-components-vue/blob/main/src/components/CvTile/CvTile.stories.mdx

Basic usage of the CvTile component. No specific setup or imports are required beyond the component itself.

```vue
<cv-tile>Hello!</cv-tile>
```

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

### Importing Component States

Source: https://github.com/carbon-design-system/carbon-components-vue/blob/main/src/components/CvInlineLoading/CvInlineLoading.stories.mdx

Example of how to import and use the available component states.

```javascript
import { STATES } from "@/components/CvInlineLoading";
```

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

### Build and publish commands

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

Commands for building individual packages or starting the local storybook server.

```shell
yarn build --scope @carbon/vue
```

```shell
yarn build --scope storybook
```

```shell
yarn start
```

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

### Storybook Setup for CvDropdown

Source: https://github.com/carbon-design-system/carbon-components-vue/blob/main/src/components/CvDropdown/CvDropdown.stories.mdx

Configuration for Storybook to render the CvDropdown component. It includes importing necessary components and defining a template function with setup logic.

```javascript
import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { sbCompPrefix } from '../../global/storybook-utils';
import CvDropdown from './CvDropdown.vue';
import CvDropdownItem from './CvDropdownItem.vue';
import CvDropdownSkeleton from './CvDropdownSkeleton.vue';
import { action } from '@storybook/addon-actions';
import { ref } from 'vue';
const myValue = ref('baby-yoda');

<Meta title="${sbCompPrefix}/CvDropdown" component={CvDropdown} />

export const Template = args => ({
  // Components used in your story `template` are defined in the `components` object
  components: {
    CvDropdown,
    CvDropdownItem,
    CvDropdownSkeleton,
  },
  // The story's `args` need to be mapped into the template through the `setup()` method
  setup() {
    return {
      ...args,
      props: args.props,
      light: args.light,
      placeholder: args.placeholder,
      value: args.value,
      label: args.label,
      up: args.up,
      inline: args.inline,
      helperText: args.helperText,
      hideSelected: args.hideSelected,
      warningMessage: args.warningMessage,
      invalidMessage: args.invalidMessage,
      disabled: args.disabled,
      size: args.size,
      items: args.items,
      onChange: action('change'),
      myValue: myValue,
      slotInvalidText: args.slotInvalidText,
      slotWarningText: args.slotWarningText,
      slotHelperText: args.slotHelperText,
      slotInternalCaption: args.slotInternalCaption,
    };
  },
  template: args.template,
});

```

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

### Install Carbon Vue library

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

Commands to add the @carbon/vue package to your project using npm or yarn.

```shell
npm add @carbon/vue
```

```shell
$ yarn add @carbon/vue
```

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

### Expandable CvTile Example

Source: https://github.com/carbon-design-system/carbon-components-vue/blob/main/src/components/CvTile/CvTile.stories.mdx

Demonstrates an expandable CvTile. It utilizes the 'expandable' kind and listens for the 'expanded' event. Ensure the 'onExpanded' action is defined.

```vue
<cv-tile kind="expandable" @expanded="onExpanded">Hello expandable!<template #below><h1>More Content</h1><p>Expanded</p></template></cv-tile>
```

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

### CvHeader with Switcher and Skip to Content

Source: https://github.com/carbon-design-system/carbon-components-vue/blob/main/src/components/CvUIShell/CvUIShell.stories.mdx

Example of CvHeader including a switcher item and a skip to content link.

```html
<cv-header aria-label="Carbon header">
  <cv-header-panel id="header-panel" slot="left-panels">
    <cv-switcher aria-label="User switching menu">
      <cv-switcher-item href="javascript:void(0)">App 1</cv-switcher-item>
      <cv-switcher-item href="javascript:void(0)">App 2</cv-switcher-item>
      <cv-switcher-item href="javascript:void(0)">Yet another app</cv-switcher-item>
    </cv-switcher>
  </cv-header-panel>
</cv-header>
<cv-content>
  <h1>Main Content</h1>
  <p>This is the main content area that the skip link targets.</p>
</cv-content>

```

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

### Run Storybook Locally

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

Commands to install dependencies and run the Storybook for the Carbon Design System Vue components. This involves installing dependencies at the root and within the storybook directory, then serving the Storybook.

```shell
yarn install
cd storybook
yarn serve
```

```shell
yarn install
yarn serve:storybook
```

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

### Grid with Column Start and End

Source: https://github.com/carbon-design-system/carbon-components-vue/blob/main/src/components/CvGrid/GvGrid.stories.mdx

Illustrates using `start` and `end` props on `cv-column` to precisely position columns within the grid. This provides fine-grained control over column placement.

```vue
<cv-grid>
  <cv-row>
    <cv-column :sm="{ span: 1, start: 4 }"><div>span 1, start 4</div></cv-column>
    <cv-column :sm="{ span: 2, end: 5 }"><div>span 2, end 5</div></cv-column>
    <cv-column :sm="{ start: 1, end: 4 }"><div>start 1, end 5</div></cv-column>
  </cv-row>
</cv-grid>
```

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

### CvMultiSelect Storybook Setup

Source: https://github.com/carbon-design-system/carbon-components-vue/blob/main/src/components/CvMultiSelect/CvMultiSelect.stories.mdx

Sets up the Storybook meta information and template for the CvMultiSelect component. Includes component registration and argument mapping for stories.

```javascript
import { Canvas, Meta, Story } from '@storybook/addon-docs';
import CvMultiSelect from './CvMultiSelect.vue';
import { tagKinds } from '../CvTag/consts';
import { sbCompPrefix } from '../../global/storybook-utils';
import { DIRECTIONS, selectionFeedbackOptions } from './consts';
import { action } from '@storybook/addon-actions';
import { ref } from 'vue';
const myValue = ref(['iran_deckard']);
const pkdCharacters = [
  'Rick Deckard',
  'Garland',
  'Rachael Rosen',
  'Roy Batty',
  'Harry Bryant',
  'Hannibal Chew',
  'Dave Holden',
  'Leon Kowalski',
  'Taffey Lewis',
  'Pris Stratton',
  'J.F. Sebastian',
  'Dr. Eldon Rosen',
  'Zhora Salome',
  'John "J.R." Isidore',
  'Iran Deckard',
  'Wilbur Mercer',
  'Buster Friendly',
  'Phil Resch',
];
const pkdOptions = pkdCharacters.map(item => {
  const nameVal = item.replace(/\W+/g, '_').toLowerCase();
  return {
    name: nameVal,
    label: item,
    value: nameVal,
    disabled: false,
  };
});
const pkdValues = pkdOptions.map(item => item.value);

<Meta title={`${sbCompPrefix}/CvMultiSelect`} component={CvMultiSelect} />

export const Template = args => ({
  // Components used in your story `template` are defined in the `components` object
  components: {
    CvMultiSelect,
  },
  // The story's `args` need to be mapped into the template through the `setup()` method
  setup() {
    return {
      options: args.options,
      autoFilter: args.autoFilter,
      autoHighlight: args.autoHighlight,
      disabled: args.disabled,
      filterTagKind: args.filterTagKind,
      inline: args.inline,
      invalidMessage: args.invalidMessage,
      helperText: args.helperText,
      title: args.title,
      label: args.label,
      highlight: args.highlight,
      modelValue: args.modelValue,
      selectionFeedback: args.selectionFeedback,
      filterable: args.filterable,
      light: args.light,
      direction: args.direction,
      warningMessage: args.warningMessage,
      slotInvalidText: args.slotInvalidText,
      slotWarningText: args.slotWarningText,
      slotHelperText: args.slotHelperText,
      myValue: myValue,
      onChange: action('change'),
      onFilter: action('filter'),
      onVmodel: action('update:modelValue'),
    };
  },
  template: args.template,
});
```

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

### Basic CvDataTable Example

Source: https://context7.com/carbon-design-system/carbon-components-vue/llms.txt

Renders a basic data table with columns and data. Use this for simple data display.

```vue
<template>
  <div>
    <!-- Basic data table -->
    <cv-data-table
      :columns="columns"
      :data="tableData"
      title="User Management"
      helper-text="Manage system users and their roles"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CvDataTable } from '@carbon/vue';

const columns = ['Name', 'Email', 'Department'];
const tableData = ref([
  ['Alice Smith', 'alice@example.com', 'Engineering'],
  ['Bob Johnson', 'bob@example.com', 'Marketing'],
  ['Carol Williams', 'carol@example.com', 'Sales']
]);
</script>
```

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

### CvFileUploader Setup and Template

Source: https://github.com/carbon-design-system/carbon-components-vue/blob/main/src/components/CvFileUploader/CvFileUploader.stories.mdx

Sets up the CvFileUploader component within a Storybook template. It includes logic for handling component methods like clear, remove, setInvalidMessage, and setState, and manages file state reactivity.

```javascript
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
import { sbCompPrefix } from '../../global/storybook-utils';
import { CvFileUploader, CvFileUploaderSkeleton } from '.';
import { KINDS, STATES } from './const';
import { action } from '@storybook/addon-actions';
import { nextTick, ref, watch, onMounted } from 'vue';
import { Add16 } from '@carbon/icons-vue';
import { buttonKinds, buttonSizes } from '../CvButton/consts';

<Meta title={`${sbCompPrefix}/CvFileUploader`} component={CvFileUploader} />

export const Template = args => ({
  components: {
    CvFileUploader,
    CvFileUploaderSkeleton,
    Add16
  },
  setup() {
    const fileUploader = ref(null);
    const files = ref(storage.files);
    // exposed methods handlers
    function clear() {
      if (args.clear && args.clear > storage.clearCount) {
        storage.clearCount = args.clear;
        fileUploader.value.clear();
        action('cv-file-uploader clear')()
      }
    }
    function remove() {
      if (args.remove && args.remove > storage.removeCount && files.value.length > 0) {
        const randomIndex = Math.floor(Math.random() * files.value.length);
        storage.removeCount = args.remove;
        fileUploader.value.remove(randomIndex);
        action('cv-file-uploader remove')(randomIndex)
      }
    }
    function setInvalidMessage(index) {
      if (files.value[index].invalidMessage !== args.setInvalidMessage) {
        fileUploader.value.setInvalidMessage(index, args.setInvalidMessage);
        action('cv-file-uploader setInvalidMessage')(index, args.setInvalidMessage);
      }
    }
    function setState(index) {
      const newState = setStateOptionMap[args.setState];
      if (files.value[index].state !== newState) {
        fileUploader.value.setState(index, newState);
        action('cv-file-uploader setState')(index, newState);
      }
    }
    // exposed methods setState & setInvalidMessage handler
    function changeFiles() {
      const callbacks = [
        typeof args.setState === 'string' ? setState : null,
        typeof args.setInvalidMessage === 'string' ? setInvalidMessage : null,
      ];
      files.value.forEach((_, index) => callbacks.forEach(callback => callback && callback(index)));
    }
    watch(() => files.value, (newValue) => {
      storage.files = newValue;
      changeFiles();
    }, { deep: true });
    onMounted(() => {
      clear();
      remove();
      changeFiles();
    });
    return {
      fileUploader,
      files,
      slotContent: args.slot,
      args: {
        ...args,
        template: undefined,
      },
    };
  },
  template: args.template,
});
const storage = {
  files: [],
  clearCount: 0,
  removeCount: 0,
};
const setStateOptionMap = {
  [`Set files status to: None`]: STATES.NONE,
  [`Set files status to: Complete (${STATES.COMPLETE})`]: STATES.COMPLETE,
  [`Set files status to: Uploading (${STATES.UPLOADING})`]: STATES.UPLOADING,
};
const defaultTemplate = "
  <div style=\"display: inline-flex; align-items: flex-start;">
    <cv-file-uploader v-bind=\"args" ref=\"fileUploader" v-model=\"files" />
  </div>
";
const slotTemplate = "
  <div style=\"display: inline-flex; align-items: flex-start;">
    <cv-file-uploader v-bind=\"args">
      <template v-slot:drop-target>
        <Add16 />
        <span>File Drop</span>
        <Add16 />
      </template>
    </cv-file-uploader>
  </div>
";
const skeletonTemplate = "
  <div style=\"display: inline-flex; align-items: flex-start;">
    <cv-file-uploader-skeleton />
  </div>
";

export const argTypes = {
  // attributes
  multiple: {
    type: 'boolean',
    defaultValue: true,
    table: {
      type: { summary: 'boolean' },
      category: 'props',
    },
    description: 'standard input attribute for file type, allow multiple files to be added in a single prompt',
  },
  // props
  accept: {
    type: 'string',
    defaultValue: '.jpg,.png',
    table: {
      type: { summary: 'string' },
      category: 'props',
    },
    description: 'standard input attribute for file type',
  },
  buttonKind: {
    control: 'select',
    options: buttonKinds,
    defaultValue: 'primary',
    table: {
      type: { summary: 'string' },
      category: 'props',
      defaultValue: { summary: 'primary' },
    },
    description: 'Button kind',
  },
  buttonLabel: {
    type: 'string',
    deprecated: true,
    table: {
      type: { summary: 'string' },
      category: 'props',
    },
    description: '`button-label` prop deprecated in favour of drop-target-label',
  },
  buttonSize: {
    control: 'select',
    options: buttonSizes,
    defaultValue: '',
    table: {
      type: { summary: 'string' },
      category: 'props',
      defaultValue: { summary: '' },
    },
    description: 'Button size',
  },
  clearOnReselect: {
    type: 'boolean',
    table: {
      type: { summary: 'boolean' },
      category: 'props',
    },
    description: 'Reset file list when files are added',
  },
  disabled: {
    type: 'boolean',

```

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

### Configure flatpickr options

Source: https://github.com/carbon-design-system/carbon-components-vue/blob/main/src/components/CvDatePicker/CvDatePicker-notes.md

Example object for configuring the cal-options property.

```javascript
{ dateFormat: 'd/m/Y', defaultDate: '01/01/2019' }
```

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

### Time Picker with Timezone Example

Source: https://github.com/carbon-design-system/carbon-components-vue/blob/main/src/components/CvTimePicker/CvTimePicker.stories.mdx

This example demonstrates how to include timezone options in the Time Picker component. Ensure the `timezones` prop is an array of objects, each with a `value` and `label`.

```javascript
{
  light: false,
  template: timezoneTemplate,
  timezones: [
    { value: 'America/New_York', label: 'America/New York' },
    { value: 'Europe/Berlin', label: 'Europe/Berlin' },
    { value: 'Asia/Dubai', label: 'Asia/Dubai' },
    { value: 'Asia/Calcutta', label: 'Indian Standard Time' },
    { value: 'Asia/Shanghai', label: 'China Standard Time' },
    { value: 'Moon/Tranquility_Base', label: 'Moon Standard Time' },
  ],
}
```

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

### CvDataTable Storybook Template Setup

Source: https://github.com/carbon-design-system/carbon-components-vue/blob/main/src/components/CvDataTable/CvDataTable.stories.mdx

Configures the Storybook template for CvDataTable, including component imports, event handlers, and argument mappings. This setup allows for interactive testing of the component's features.

```javascript
import { Meta, Story } from '@storybook/addon-docs';
import { CvDataTable } from '.';
import CvDataTableHeading from './CvDataTableHeading.vue';
import CvDataTableRow from "./CvDataTableRow.vue";
import CvDataTableCell from "./CvDataTableCell.vue";
import CvDataTableAction from "./CvDataTableAction.vue";
import CvDataTableSkeleton from "./CvDataTableSkeleton.vue";
import CvButton from '../CvButton/CvButton.vue'
import { sbCompPrefix, storySourceCode } from '../../global/storybook-utils';
import { action } from '@storybook/addon-actions';
import { Terminal16 as CompileIcon, Debug16 as DebugIcon, Chip16 as EmbedIcon,
  TrashCan16 as TrashCanIcon} from '@carbon/icons-vue'

<Meta title="${sbCompPrefix}/CvDataTable" component={CvDataTable} />

export const Template = args => ({
// Components used in your story `template` are defined in the `components` object
components: {
  CvDataTable,
  CvDataTableHeading,
  CvDataTableRow,
  CvDataTableCell,
  CvDataTableAction,
  CompileIcon,
  DebugIcon,
  EmbedIcon,
  CvButton,
  CvDataTableSkeleton,
},
// The story's `args` need to be mapped into the template through the `setup()` method
setup() {
  return {
    args: {...args,
      useActions: undefined,
      useBatchActions: undefined,
      useHelperTextSlot: undefined,
      template: undefined},
    trashIcon: TrashCanIcon,
    onSort: sortTestData,
    onSearch: searchTestData,
    onRowSelectChange: action('row-select-change'),
    onRowSelectChanges: action('row-select-changes'),
    onOverflowMenuClick: action('overflow-menu-click'),
    onVmodel: action('v-model'),
    onRowExpanded: action('row-expanded'),
    onPagination: action('pagination'),
    onAction1: action('compile'),
    onAction2: action('debug'),
    onAction3: action('firmware'),
    onDelete: action('delete'),
    useActions: args.useActions,
    useBatchActions: args.useBatchActions,
    useHelperTextSlot: args.useHelperTextSlot,
    usePagination: args.usePagination,
    skeletonRows: args.skeletonRows,
    skeletonCols: args.skeletonCols,
    skeletonTitle: args.title,
    skeletonHelper: args.helperText,
  }
}
});

```

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

### Clickable CvTile Example

Source: https://github.com/carbon-design-system/carbon-components-vue/blob/main/src/components/CvTile/CvTile.stories.mdx

Shows a clickable CvTile. This kind is used for navigation and requires a 'to' prop for routing. It also listens for a 'click' event.

```vue
<cv-tile kind="clickable" @click="onClick" to="{name: 'something'}">Hello clickable!</cv-tile>
```

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

### Storybook Setup for CvModal

Source: https://github.com/carbon-design-system/carbon-components-vue/blob/main/src/components/CvModal/CvModal.stories.mdx

Sets up the Storybook environment for the CvModal component, defining props, actions, and template rendering logic. Requires Vue's nextTick for managing visibility.

```javascript
import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { sbCompPrefix } from '../../global/storybook-utils';
import CvModal from './CvModal.vue';
import { action } from '@storybook/addon-actions';
import { nextTick, ref } from 'vue';

<Meta title={`${sbCompPrefix}/CvModal`} component={CvModal} />

export const Template = args => ({
  // Components used in your story `template` are defined in the `components` object
  components: {
    CvModal,
  },
  // The story's `args` need to be mapped into the template through the `setup()` method
  setup() {
    const visible = ref(false);
    const visible3btn = ref(false);
    return {
      ...args,
      props: args.props,
      onModalHidden: action('modal-hidden'),
      onModalHideRequest: action('modal-hide-request'),
      onModalShown: action('modal-shown'),
      onOtherBtnClick: action('other-btn-click'),
      onPrimaryClick: action('primary-click'),
      onSecondaryClick: action('secondary-click'),
      visible,
      visible3btn,
      kind: args.kind,
      size: args.size,
      autoHideOff: args.autoHideOff,
      primaryButtonDisabled: args.primaryButtonDisabled,
      disableTeleport: args.disableTeleport,
      show: () => {
        if (visible3btn.value) visible3btn.value = false;
        if (visible.value) visible.value = false;
        nextTick(() => {
          visible.value = true;
        }).catch(() => console.warn('cannot show'));
      },
      show3btn: () => {
        if (visible.value) visible.value = false;
        if (visible3btn.value) visible3btn.value = false;
        nextTick(() => {
          visible3btn.value = true;
        }).catch(() => console.warn('cannot show'));
      },
      onAfterModalHidden() {
        action('after-modal-hidden')();
        visible.value = false;
        visible3btn.value = false;
      },
    };
  },
  // And then the `args` are bound to your component with `v-bind="args"`
  template: args.template,
});
```

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

### Vue Example of CvLoading and CvInlineLoading

Source: https://context7.com/carbon-design-system/carbon-components-vue/llms.txt

Demonstrates the usage of CvLoading for full-page overlays and CvInlineLoading for inline states (loading, loaded, error). Also shows CvInlineLoading within a CvButton to indicate submission progress. Imports necessary components from '@carbon/vue'.

```vue
<template>
  <div>
    <!-- Full-page loading overlay -->
    <cv-loading v-if="isPageLoading" />

    <!-- Inline loading states -->
    <cv-inline-loading
      v-if="loadingState === 'loading'"
      description="Loading data..."
    />

    <cv-inline-loading
      v-if="loadingState === 'loaded'"
      state="loaded"
      description="Data loaded"
    />

    <cv-inline-loading
      v-if="loadingState === 'error'"
      state="error"
      description="Error loading data"
    />

    <!-- Button with loading state -->
    <cv-button @click="submitForm" :disabled="isSubmitting">
      <cv-inline-loading v-if="isSubmitting" description="Submitting..." />
      <span v-else>Submit</span>
    </cv-button>

    <!-- Small loading spinner -->
    <cv-loading small />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CvLoading, CvInlineLoading, CvButton } from '@carbon/vue';

const isPageLoading = ref(false);
const loadingState = ref('loading'); // 'loading', 'loaded', 'error'
const isSubmitting = ref(false);

async function submitForm() {
  isSubmitting.value = true;
  try {
    await new Promise(resolve => setTimeout(resolve, 2000));
    loadingState.value = 'loaded';
  } catch {
    loadingState.value = 'error';
  } finally {
    isSubmitting.value = false;
  }
}
</script>
```

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

### CvProgress Storybook Template Setup

Source: https://github.com/carbon-design-system/carbon-components-vue/blob/main/src/components/CvProgress/CvProgress.stories.mdx

Configures the Storybook template for CvProgress, mapping component arguments and reactive state to the template.

```javascript
import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { CvProgress, CvProgressStep, CvProgressSkeleton } from '.';
import { Time20 as TimeIcon } from '@carbon/icons-vue';
// noinspection ES6PreferShortImport
import { sbCompPrefix } from '../../global/storybook-utils';
import { action } from '@storybook/addon-actions';
import {ref } from "vue";
const step3Invalid = ref(false)
const step4Disable = ref(false)
const step5Complete = ref(false)
function onStep4Disable() {
  step4Disable.value = !step4Disable.value
}
function onStep3Invalid() {
  step3Invalid.value = !step3Invalid.value
}
function onStep5Complete() {
  step5Complete.value = !step5Complete.value
}

<Meta title={`${sbCompPrefix}/CvProgress`} component={CvProgress} />

export const Template = args => ({
  // Components used in your story `template` are defined in the `components` object
  components: {
    CvProgress,
    CvProgressStep,
    TimeIcon,
    CvProgressSkeleton
  },
  // The story's `args` need to be mapped into the template through the `setup()` method
  setup() {
    return {
      initialStep: args.initialStep,
      steps: args.steps,
      vertical: args.vertical,
      spaceEqually: args.spaceEqually,
      step1: args.step1,
      step2: args.step2,
      step3: args.step3,
      step4: args.step4,
      step5: args.step5,
      completeIds: args.completeIds,
      invalidIds: args.invalidIds,
      disabledIds: args.disabledIds,
      onStepClicked: action('step-clicked'),
      step3Invalid,
      onStep3Invalid,
      step4Disable,
      onStep4Disable,
      step5Complete,
      onStep5Complete,
    };
  },
  // And then the `args` are bound to your component with `v-bind="args"`
  template: args.template,
});
```

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

### CvDataTable Data and Sorting Setup

Source: https://github.com/carbon-design-system/carbon-components-vue/blob/main/src/components/CvDataTable/CvDataTable.stories.mdx

Initializes test data and sorting options for CvDataTable. The sortTestData function handles sorting logic based on provided options.

```javascript
import { ref } from 'vue';

const testData = ref([
  { index:"0", name:"Java", year:1995, oo:"Yes", purpose:"Applications", standard:"Java Language Specification", desc: "As of September 2022, Java 19 is the latest version, while Java 17, 11 and 8 are the current long-term support (LTS) versions." },
  { index:"1", name:"COBOL", year:1959, oo:"Yes", purpose:"Business applications", standard:"COBOL 2014", desc: "COBOL statements have an English-like syntax, which was designed to be self-documenting and highly readable." },
  { index:"2", name:"Pascal", year:1970, oo:"No", purpose:"Applications", standard:"None", desc: "Pascal was developed on the pattern of the ALGOL 60 language." },
  { index:"3", name:"Ada", year:1980, oo:"Yes", purpose:"US DoD projects", standard:"Ada 2012 TC1", desc: "Ada was named after Ada Lovelace (1815–1852), who has been credited as the first computer programmer." },
  { index:"4", name:"BASIC", year:1964, oo:"No", purpose:"Education", standard:"ANSI", desc: "BASIC declined in popularity in the 1990s" },
  { index:"5", name:"C++", year:1985, oo:"Yes", purpose:"Systems programming", standard:"ISO/IEC 2017", desc: "C++ is standardized by the International Organization for Standardization (ISO), with the latest standard version ratified and published by ISO in December 2020 as ISO/IEC 14882:2020 (informally known as C++20)." },
  { index:"6", name:"Fortran", year:1957, oo:"No", purpose:"Engineering applications", standard:"ANSI", desc: "Fortran was originally developed by IBM in the 1950s for scientific and engineering applications, and subsequently came to dominate scientific computing." },
  { index:"7", name:"Go", year:2009, oo:"Maybe", purpose:"Networked applications", standard:"Go Spec", desc: "Go's designers were primarily motivated by their shared dislike of C++." },
]);
const sortOpts = ref({index: "0", order: "none", name: "name"})

function sortTestData(opts) {
  action('sort')(opts)
  sortOpts.value = opts
  if (opts.order === 'none')
    return testData.value.sort((a, b) => a.index.localeCompare(b.index, 'en', { sensitivity: 'base' }));
  let direction = 1
  if (opts.order === 'descending') direction = -1
  if (opts.name === 'name')
    return testData.value.sort((a, b) => direction * a.name.localeCompare(b.name, 'en', { sensitivity: 'base' }));
  else if (opts.name === 'year')
    return testData.value.sort((a, b) => direction * (a.year - b.year));
}
```

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

### Default CvForm Example

Source: https://github.com/carbon-design-system/carbon-components-vue/blob/main/src/components/CvForm/CvForm.stories.mdx

Demonstrates a basic form structure using CvForm with text input, text area, and a submit button. Use this for standard form layouts.

```vue
<cv-form @submit.prevent="onSubmit">
    <cv-text-input
      label="Text input label"
      placeholder="Optional placeholder text"
      helperText="Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)"
    />
    <cv-text-area
      label="Text area label"
      placeholder="Optional placeholder text"
      helperText="Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)"
    />
    <cv-button>Submit</cv-button>
  </cv-form>
```

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

### CvSelect Component Examples - Carbon Vue

Source: https://context7.com/carbon-design-system/carbon-components-vue/llms.txt

Demonstrates various configurations of the CvSelect component, including basic usage, option groups, helper text, validation, and inline styling. Ensure necessary components are imported.

```vue
<template>
  <div>
    <!-- Basic select with v-model -->
    <cv-select v-model="selectedValue" label="Choose an option">
      <cv-select-option value="">Select...</cv-select-option>
      <cv-select-option value="option1">Option 1</cv-select-option>
      <cv-select-option value="option2">Option 2</cv-select-option>
      <cv-select-option value="option3">Option 3</cv-select-option>
    </cv-select>

    <!-- Select with option groups -->
    <cv-select v-model="selectedFruit" label="Select a fruit">
      <cv-select-optgroup label="Citrus">
        <cv-select-option value="orange">Orange</cv-select-option>
        <cv-select-option value="lemon">Lemon</cv-select-option>
        <cv-select-option value="lime">Lime</cv-select-option>
      </cv-select-optgroup>
      <cv-select-optgroup label="Berries">
        <cv-select-option value="strawberry">Strawberry</cv-select-option>
        <cv-select-option value="blueberry">Blueberry</cv-select-option>
      </cv-select-optgroup>
    </cv-select>

    <!-- Select with helper text -->
    <cv-select
      v-model="timezone"
      label="Timezone"
      helper-text="Select your local timezone"
    >
      <cv-select-option value="utc">UTC</cv-select-option>
      <cv-select-option value="est">Eastern Time</cv-select-option>
      <cv-select-option value="pst">Pacific Time</cv-select-option>
    </cv-select>

    <!-- Select with validation -->
    <cv-select
      v-model="requiredField"
      label="Required Field"
      invalid-message="Please select an option"
    >
      <cv-select-option value="">Choose...</cv-select-option>
      <cv-select-option value="a">Option A</cv-select-option>
      <cv-select-option value="b">Option B</cv-select-option>
    </cv-select>

    <!-- Inline select -->
    <cv-select v-model="sortOrder" label="Sort by" inline size="sm">
      <cv-select-option value="name">Name</cv-select-option>
      <cv-select-option value="date">Date</cv-select-option>
    </cv-select>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CvSelect, CvSelectOption, CvSelectOptgroup } from '@carbon/vue';

const selectedValue = ref('');
const selectedFruit = ref('');
const timezone = ref('utc');
const requiredField = ref('');
const sortOrder = ref('name');
</script>
```

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

### Define Storybook Template for CvInlineLoading

Source: https://github.com/carbon-design-system/carbon-components-vue/blob/main/src/components/CvInlineLoading/CvInlineLoading.stories.mdx

Defines the component template and setup function for Storybook stories.

```javascript
export const Template = args => ({
  // Components used in your story `template` are defined in the `components` object
  components: {
    CvInlineLoading,
  },
  // The story's `args` need to be mapped into the template through the `setup()` method
  setup() {
    return {
      description: args.description,
      errorText: args.errorText,
      endingText: args.endingText,
      loadingText: args.loadingText,
      loadedText: args.loadedText,
      state: args.state,
    };
  },
  template: args.template,
});
```

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

### CvFormItem Example

Source: https://github.com/carbon-design-system/carbon-components-vue/blob/main/src/components/CvForm/CvForm.stories.mdx

Shows a simple CvFormItem for basic form element styling. This snippet includes a label and an input field, demonstrating how to structure individual form items.

```vue
<cv-form-item>
    <label for="text-input-3" class="bx--label">Text Input label</label>
    <input id="text-input-3" type="text" class="bx--text-input" placeholder="Optional placeholder text" />
  </cv-form-item>
```

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

### CvContentSwitcher Basic Usage

Source: https://github.com/carbon-design-system/carbon-components-vue/blob/main/src/components/CvContentSwitcher/CvContentSwitcher.stories.mdx

Demonstrates the basic setup of CvContentSwitcher with internal content. Ensure each CvContentSwitcherButton has a unique owner-id that matches a CvContentSwitcherContent owner-id.

```vue
<div>
  <cv-content-switcher aria-label='Choose content' v-bind='args' @selected="onSelected">
    <cv-content-switcher-button owner-id="csb-1" :selected="selectedIndex === 0">Button Name 1</cv-content-switcher-button>
    <cv-content-switcher-button owner-id="csb-2" :selected="selectedIndex === 1">Button Name 2</cv-content-switcher-button>
    <cv-content-switcher-button :icon="iconSample" owner-id="csb-3" :selected="selectedIndex === 2">Button Name 3</cv-content-switcher-button>
  </cv-content-switcher>
  <section style="margin: 10px 0;">
    <cv-content-switcher-content owner-id="csb-1">
      <p>This is the content for option 1</p>
    </cv-content-switcher-content>
    <cv-content-switcher-content owner-id="csb-2">
      <p>This is the content for option 2</p>
    </cv-content-switcher-content>
    <cv-content-switcher-content owner-id="csb-2" >
      <p>This is more content for option 2</p>
    </cv-content-switcher-content>
    <cv-content-switcher-content owner-id="csb-3">
      <p>This is the content for option 3</p>
  </cv-content-switcher-content>
  </section>
</div>

```

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

### Selectable CvTile Example

Source: https://github.com/carbon-design-system/carbon-components-vue/blob/main/src/components/CvTile/CvTile.stories.mdx

Illustrates a selectable CvTile. This type is used for selection purposes and emits a 'change' event with a value. Ensure the 'onChange' action is defined.

```vue
<cv-tile kind="selectable" value="my-selection" @change="onChange">Hello selectable! </cv-tile>
```

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

### CvCheckbox Component Examples

Source: https://context7.com/carbon-design-system/carbon-components-vue/llms.txt

Demonstrates various configurations of the CvCheckbox component, including basic usage with v-model, checkbox groups, inline display, and hidden labels for accessibility.

```vue
<template>
  <div>
    <!-- Basic checkbox with v-model -->
    <cv-checkbox
      v-model="termsAccepted"
      value="terms"
      label="I accept the terms and conditions"
    />

    <!-- Checkbox group -->
    <cv-checkbox
      v-model="selectedOptions"
      value="option1"
      label="Option 1"
    />
    <cv-checkbox
      v-model="selectedOptions"
      value="option2"
      label="Option 2"
    />
    <cv-checkbox
      v-model="selectedOptions"
      value="option3"
      label="Option 3"
      disabled
    />

    <!-- Inline checkboxes -->
    <cv-checkbox
      v-model="inlineChecked"
      value="inline1"
      label="Inline checkbox"
      inline
    />

    <!-- Hidden label (accessible) -->
    <cv-checkbox
      v-model="hiddenLabel"
      value="hidden"
      label="Select all"
      hide-label
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CvCheckbox } from '@carbon/vue';

const termsAccepted = ref(false);
const selectedOptions = ref(['option1']);
const inlineChecked = ref(false);
const hiddenLabel = ref(false);
</script>
```

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

### CvButton Component Examples

Source: https://context7.com/carbon-design-system/carbon-components-vue/llms.txt

Demonstrates various configurations of the CvButton component, including different kinds, sizes, icons, disabled states, skeleton loading, and icon-only buttons. Ensure necessary icons are imported from '@carbon/icons-vue'.

```vue
<template>
  <div>
    <!-- Primary button -->
    <cv-button kind="primary" @click="handleClick">
      Submit Form
    </cv-button>

    <!-- Secondary button with icon -->
    <cv-button kind="secondary" :icon="AddIcon">
      Add Item
    </cv-button>

    <!-- Danger button (disabled) -->
    <cv-button kind="danger" disabled>
      Delete Account
    </cv-button>

    <!-- Ghost button with custom size -->
    <cv-button kind="ghost" size="sm">
      Cancel
    </cv-button>

    <!-- Skeleton loading state -->
    <cv-button skeleton />

    <!-- Icon-only button -->
    <cv-icon-button
      kind="primary"
      :icon="SettingsIcon"
      label="Settings"
      tip-position="bottom"
    />
  </div>
</template>

<script setup>
import { CvButton, CvIconButton } from '@carbon/vue';
import Add16 from '@carbon/icons-vue/es/add/16';
import Settings16 from '@carbon/icons-vue/es/settings/16';

const AddIcon = Add16;
const SettingsIcon = Settings16;

function handleClick(event) {
  console.log('Button clicked', event);
}
</script>
```

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

### CvDropdown Component Examples

Source: https://context7.com/carbon-design-system/carbon-components-vue/llms.txt

Illustrates the usage of the CvDropdown component with different configurations, including v-model binding, populating items from an array, helper text, validation messages, and inline/disabled states.

```vue
<template>
  <div>
    <!-- Basic dropdown with v-model -->
    <cv-dropdown
      v-model="selectedCountry"
      label="Country"
      placeholder="Select a country"
    >
      <cv-dropdown-item value="us">United States</cv-dropdown-item>
      <cv-dropdown-item value="uk">United Kingdom</cv-dropdown-item>
      <cv-dropdown-item value="ca">Canada</cv-dropdown-item>
      <cv-dropdown-item value="de">Germany</cv-dropdown-item>
    </cv-dropdown>

    <!-- Dropdown with items array -->
    <cv-dropdown
      v-model="selectedSize"
      label="Size"
      :items="['Small', 'Medium', 'Large', 'X-Large']"
    />

    <!-- Dropdown with helper text -->
    <cv-dropdown
      v-model="selectedPlan"
      label="Subscription Plan"
      helper-text="Choose the plan that fits your needs"
    >
      <cv-dropdown-item value="free">Free Tier</cv-dropdown-item>
      <cv-dropdown-item value="pro">Professional</cv-dropdown-item>
      <cv-dropdown-item value="enterprise">Enterprise</cv-dropdown-item>
    </cv-dropdown>

    <!-- Dropdown with validation error -->
    <cv-dropdown
      v-model="selectedRequired"
      label="Required Field"
      invalid-message="This field is required"
    >
      <cv-dropdown-item value="a">Option A</cv-dropdown-item>
      <cv-dropdown-item value="b">Option B</cv-dropdown-item>
    </cv-dropdown>

    <!-- Inline dropdown -->
    <cv-dropdown
      v-model="inlineSelection"
      label="Sort by"
      inline
    >
      <cv-dropdown-item value="name">Name</cv-dropdown-item>
      <cv-dropdown-item value="date">Date</cv-dropdown-item>
      <cv-dropdown-item value="size">Size</cv-dropdown-item>
    </cv-dropdown>

    <!-- Disabled dropdown -->
    <cv-dropdown
      v-model="disabledValue"
      label="Disabled Dropdown"
      disabled
    >
      <cv-dropdown-item value="none">Not available</cv-dropdown-item>
    </cv-dropdown>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CvDropdown, CvDropdownItem } from '@carbon/vue';

const selectedCountry = ref('');
const selectedSize = ref('Medium');
const selectedPlan = ref('');
const selectedRequired = ref('');
const inlineSelection = ref('name');
const disabledValue = ref('none');
</script>
```

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

### CvInlineNotification examples

Source: https://context7.com/carbon-design-system/carbon-components-vue/llms.txt

Shows various configurations for CvInlineNotification, including different kinds (error, warning, info, success), titles, subtitles, action buttons, and low-contrast mode. The `hide-close-button` prop is also demonstrated.

```vue
<template>
  <div>
    <!-- Inline notifications -->
    <cv-inline-notification
      kind="error"
      title="Error:"
      sub-title="Something went wrong. Please try again."
      @close="handleClose"
    />

    <cv-inline-notification
      kind="warning"
      title="Warning:"
      sub-title="Your session will expire in 5 minutes."
      action-label="Extend Session"
      @action="extendSession"
      @close="handleClose"
    />

    <cv-inline-notification
      kind="info"
      title="Information:"
      sub-title="New features are available. Check the changelog."
      low-contrast
    />

    <cv-inline-notification
      kind="success"
      title="Success!"
      sub-title="Your changes have been saved."
      :hide-close-button="true"
    />
  </div>
</template>

<script setup>
import { CvInlineNotification } from '@carbon/vue';

function handleClose() {
  console.log('Notification closed');
}

function extendSession() {
  console.log('Extending session...');
}
</script>
```

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

### CvToastNotification examples

Source: https://context7.com/carbon-design-system/carbon-components-vue/llms.txt

Illustrates the use of CvToastNotification with different kinds (error, success), titles, subtitles, captions, and low-contrast mode. Includes examples of closing toast notifications.

```vue
<template>
  <div>
    <!-- Toast notifications -->
    <cv-toast-notification
      kind="error"
      title="Connection Error"
      sub-title="Unable to connect to the server."
      caption="Occurred at 10:45 AM"
      @close="handleToastClose"
    />

    <cv-toast-notification
      kind="success"
      title="File Uploaded"
      sub-title="document.pdf uploaded successfully."
      caption="Just now"
      low-contrast
    />
  </div>
</template>

<script setup>
import { CvToastNotification } from '@carbon/vue';

function handleToastClose() {
  console.log('Toast closed');
}
</script>
```

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

### Auto Close Accordion Example

Source: https://github.com/carbon-design-system/carbon-components-vue/blob/main/src/components/CvAccordion/CvAccordion.stories.mdx

This example demonstrates how to create an auto-closing accordion behavior where opening one section automatically closes others. It requires a Vue 2 compatible component and uses a ref to manage the open state of each accordion item.

```javascript
// example auto close
// <cv-accordion @change="onAutoClose">
const open = ref({
  accItem1: false,
  accItem2: false,
  accItem3: false,
  accItem4: false,
});
function autoClose(ev) {
  if (ev.change.open) {
    for (let state in open.value) {
      if (state !== ev.change.id) open.value[state] = false;
    }
  }
}
```

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

### CvSelect with Options and Optgroups

Source: https://github.com/carbon-design-system/carbon-components-vue/blob/main/src/components/CvSelect/CvSelect.stories.mdx

Demonstrates the basic structure of CvSelect with options and grouped options using CvSelectOption and CvSelectOptgroup. Includes a placeholder option.

```vue
<div>
  <cv-select
      @change="onChange"
      :label="label"
      :size="size"
      :inline="inline"
      :invalidMessage="invalidMessage"
      :warningMessage="warningMessage"
      :helperText="helperText"
      :hideLabel="hideLabel"
      :light="light"
      :disabled="disabled"
      >
      <cv-select-option disabled selected hidden value="placeholder-item">Choose an option</cv-select-option>
      <cv-select-option value="so-long">A much longer cv-select-option that is worth having around to check how text flows</cv-select-option>
      <cv-select-optgroup label="Category 1">
        <cv-select-option value="cv-select-option1">cv-select-option 1</cv-select-option>
        <cv-select-option value="cv-select-option2">cv-select-option 2</cv-select-option>
      </cv-select-optgroup>
      <cv-select-optgroup label="Category 2">
        <cv-select-option value="cv-select-option3">cv-select-option 3</cv-select-option>
        <cv-select-option value="cv-select-option4">cv-select-option 4</cv-select-option>
      </cv-select-optgroup>
  </cv-select>
</div>
```