### Development Quick Start Commands

Source: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/packages/gitlab-ui/README.md

Commands to clone the repository, install dependencies, and build/launch Storybook for local development.

```sh
# Clone the project
git clone git@gitlab.com:gitlab-org/gitlab-services/design.gitlab.com.git

# Navigate to the root of the project
cd design.gitlab.com/packages/gitlab-ui

# Install all the dependencies of the project
yarn # or yarn install

# Build and launch storybook to see the components in the browser
yarn storybook
```

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

### Install Dependencies and Start Development Server

Source: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/README.md

Install project dependencies using Yarn and start the development server for live building and watching changes.

```bash
yarn install
yarn start
```

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

### Registering Component for Examples

Source: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/doc/component-examples.md

This Markdown frontmatter example shows how to register a Vue component, such as `GlBroadcastMessage`, to enable its examples to load in the documentation's **Implementation** tab. This step is mandatory for examples to be displayed.

```markdown
---
name: Broadcast message
vueComponents:
  - GlBroadcastMessage
---

```

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

### Example of a valid release notes description line

Source: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/contents/get-started/uik-contributing.md

Use this format to add a single line describing a change. Start with an action verb.

```markdown
- Adds multiple-choice icon
```

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

### Start Development Server with Yarn

Source: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/packages/tailwind-documentation/README.md

Run this command to start the development server.

```sh
yarn dev
```

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

### GlPopover Documentation Example

Source: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/contents/components/popover.md

This story viewer is used to display documentation and examples for the GlPopover component in docs view mode.

```html
<story-viewer component="base-popover" title="GlPopover" view-mode="docs"></story-viewer>
```

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

### Start Local Development Server

Source: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/packages/gitlab-svgs/README.md

Execute this command to start a local server for previewing SVG changes. The preview will be available at http://localhost:3333/.

```bash
# Starts a local server to preview your changes
yarn run dev
```

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

### Basic GlIntersperse Example

Source: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/contents/components/utility-intersperse.md

A basic example demonstrating the GlIntersperse component with multiple child elements.

```html
<gl-intersperse>
  <span>Foo</span>
  <span>Bar</span>
  <span>Baz</span>
  <span>Qaz</span>
</gl-intersperse>
```

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

### Start Local Development Server

Source: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/packages/gitlab-svgs/README.md

Execute this command to start a local server for previewing your SVG changes at http://localhost:3333/.

```bash
yarn run dev
```

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

### GlFormGroup Documentation Example

Source: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/contents/components/form-group.md

This is a documentation example of the GlFormGroup component.

```html
<story-viewer component="base-form-form-group" title="GlFormGroup" view-mode="docs"></story-viewer>
```

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

### Embedding Component Examples in Docs

Source: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/doc/component-examples.md

This is an example of how to use the `<example-display>` component in Markdown to embed a specific component example into a documentation page. Replace `<component_id>` with the actual ID defined in the `index.js` file.

```html
<example-display example-name="my-component-default"></example-display>
```

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

### GlFormGroup Example

Source: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/contents/components/form-group.md

This is an example of how to use the GlFormGroup component.

```html
<story-viewer component="base-form-form-group" title="GlFormGroup"></story-viewer>
```

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

### Start Storybook for Development

Source: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/packages/gitlab-ui/doc/contributing/accessibility_testing.md

Run this command to start Storybook locally for immediate feedback on accessibility violations during development.

```shell
yarn storybook
```

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

### Install Dependencies with Yarn

Source: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/packages/tailwind-documentation/README.md

Use this command to install project dependencies.

```sh
yarn install
```

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

### Basic b-tooltip Usage Examples

Source: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/packages/gitlab-ui/src/vendor/bootstrap-vue/src/components/tooltip/README.md

Demonstrates how to use the b-tooltip component with different methods of targeting elements and providing content. Includes examples for text titles and HTML content.

```html
<b-container fluid>
  <b-row>
    <b-col md="4" class="py-4">
      <b-button id="button-1" variant="outline-success">Live chat</b-button>
    </b-col>
    <b-col md="4" class="py-4">
      <b-button id="button-2" variant="outline-success">Html chat</b-button>
    </b-col>
    <b-col md="4" class="py-4">
      <b-button ref="button-3" variant="outline-success">Alternative chat</b-button>
    </b-col>
  </b-row>

  <!-- Tooltip title specified via prop title -->
  <b-tooltip target="button-1" title="Online!"></b-tooltip>

  <!-- HTML title specified via default slot -->
  <b-tooltip target="button-2" placement="bottom">
    Hello <strong>World!</strong>
  </b-tooltip>

  <!-- Tooltip for an element identified by ref -->
  <b-tooltip :target="() => $refs['button-3']" title="Alternative!"></b-tooltip>
</b-container>

<!-- b-tooltip-component.vue -->
```

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

### GlSorting Implementation Example

Source: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/contents/components/sorting.md

A complete example demonstrating how to implement the GlSorting component. It includes setting up sort options, handling sortBy and sortDirectionChange events, and a placeholder for the actual data sorting logic.

```html
<!-- live-example -->
<script>
  export default {
    data() {
      const sortOptions = [
        {
          value: 'name',
          text: 'Name',
        },
        {
          value: 'date',
          text: 'Date',
        },
        {
          value: 'relevant',
          text: 'Most relevant',
          directionToggleDisabled: true,
        },
      ];

      return {
        isAscending: false,
        sortBy: sortOptions[0].value,
        sortOptions,
      };
    },
    methods: {
      onSortByChange(value) {
        this.sortBy = value;
        this.sortMyData(this.sortBy, this.isAscending);
      },
      onDirectionChange(isAscending) {
        this.isAscending = isAscending;
        this.sortMyData(this.sortBy, this.isAscending);
      },
      sortMyData(sortBy, isAscending) {
        // Use sortBy and direction to sort your data
      },
    },
  };
</script>

<template>
  <gl-sorting
    :sort-options="sortOptions"
    :sort-by="sortBy"
    :is-ascending="isAscending"
    @sortByChange="onSortByChange"
    @sortDirectionChange="onDirectionChange"
  />
</template>
```

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

### Registering Component Examples

Source: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/doc/component-examples.md

This JavaScript code demonstrates how to import and register Vue component examples in an index.js file. It organizes examples into named groups with unique IDs and names, linking them to their respective component files.

```javascript
import MyComponentDefaultExample from './my_component.default.example.vue';

export default [
  {
    // The example group's name, you can add more groups to better organize examples
    name: 'Basic',

    items: [
      {
        // Give your example an ID. Keep this unique across all examples
        id: 'my-component-default',

        // The name will appear in the examples selector in the Implementation tab
        name: 'Default',

        // The example component as imported at the top
        component: MyComponentDefaultExample,
      },
    ],
  },
];
```

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

### Basic Attribute List Example

Source: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/contents/components/attribute-list.md

This example demonstrates a basic attribute list with several items, each featuring an icon, label, and text value. It's suitable for displaying read-only metadata.

```html
<gl-attribute-list
  :items="[
    { icon: 'calendar', label: 'Created', text: 'Feb 9, 2026' },
    { icon: 'clock', label: 'Run started', text: '2:30 PM' },
    { icon: 'hourglass', label: 'Runtime', text: '5 minutes 42 seconds' },
    { icon: 'status-health', label: 'Health', text: 'Healthy' }
  ]"
></gl-attribute-list>
```

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

### Complete BootstrapVue Table Example

Source: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/packages/gitlab-ui/src/vendor/bootstrap-vue/src/components/table/README.md

This example showcases a fully functional table with sorting, filtering, pagination, and custom row details. It includes UI controls for managing these features.

```html
<template>
  <b-container fluid>
    <!-- User Interface controls -->
    <b-row>
      <b-col lg="6" class="my-1">
        <b-form-group
          label="Sort"
          label-for="sort-by-select"
          label-cols-sm="3"
          label-align-sm="right"
          label-size="sm"
          class="mb-0"
          v-slot="{ ariaDescribedby }"
        >
          <b-input-group size="sm">
            <b-form-select
              id="sort-by-select"
              v-model="sortBy"
              :options="sortOptions"
              :aria-describedby="ariaDescribedby"
              class="w-75"
            >
              <template #first>
                <option value="">-- none --</option>
              </template>
            </b-form-select>

            <b-form-select
              v-model="sortDesc"
              :disabled="!sortBy"
              :aria-describedby="ariaDescribedby"
              size="sm"
              class="w-25"
            >
              <option :value="false">Asc</option>
              <option :value="true">Desc</option>
            </b-form-select>
          </b-input-group>
        </b-form-group>
      </b-col>

      <b-col lg="6" class="my-1">
        <b-form-group
          label="Initial sort"
          label-for="initial-sort-select"
          label-cols-sm="3"
          label-align-sm="right"
          label-size="sm"
          class="mb-0"
        >
          <b-form-select
            id="initial-sort-select"
            v-model="sortDirection"
            :options="['asc', 'desc', 'last']"
            size="sm"
          ></b-form-select>
        </b-form-group>
      </b-col>

      <b-col lg="6" class="my-1">
        <b-form-group
          label="Filter"
          label-for="filter-input"
          label-cols-sm="3"
          label-align-sm="right"
          label-size="sm"
          class="mb-0"
        >
          <b-input-group size="sm">
            <b-form-input
              id="filter-input"
              v-model="filter"
              type="search"
              placeholder="Type to Search"
            ></b-form-input>

            <b-input-group-append>
              <b-button :disabled="!filter" @click="filter = ''">Clear</b-button>
            </b-input-group-append>
          </b-input-group>
        </b-form-group>
      </b-col>

      <b-col lg="6" class="my-1">
        <b-form-group
          v-model="sortDirection"
          label="Filter On"
          description="Leave all unchecked to filter on all data"
          label-cols-sm="3"
          label-align-sm="right"
          label-size="sm"
          class="mb-0"
          v-slot="{ ariaDescribedby }"
        >
          <b-form-checkbox-group
            v-model="filterOn"
            :aria-describedby="ariaDescribedby"
            class="mt-1"
          >
            <b-form-checkbox value="name">Name</b-form-checkbox>
            <b-form-checkbox value="age">Age</b-form-checkbox>
            <b-form-checkbox value="isActive">Active</b-form-checkbox>
          </b-form-checkbox-group>
        </b-form-group>
      </b-col>

      <b-col sm="5" md="6" class="my-1">
        <b-form-group
          label="Per page"
          label-for="per-page-select"
          label-cols-sm="6"
          label-cols-md="4"
          label-cols-lg="3"
          label-align-sm="right"
          label-size="sm"
          class="mb-0"
        >
          <b-form-select
            id="per-page-select"
            v-model="perPage"
            :options="pageOptions"
            size="sm"
          ></b-form-select>
        </b-form-group>
      </b-col>

      <b-col sm="7" md="6" class="my-1">
        <b-pagination
          v-model="currentPage"
          :total-rows="totalRows"
          :per-page="perPage"
          align="fill"
          size="sm"
          class="my-0"
        ></b-pagination>
      </b-col>
    </b-row>

    <!-- Main table element -->
    <b-table
      :items="items"
      :fields="fields"
      :current-page="currentPage"
      :per-page="perPage"
      :filter="filter"
      :filter-included-fields="filterOn"
      :sort-by.sync="sortBy"
      :sort-desc.sync="sortDesc"
      :sort-direction="sortDirection"
      stacked="md"
      show-empty
      small
      @filtered="onFiltered"
    >
      <template #cell(name)="row">
        {{ row.value.first }} {{ row.value.last }}
      </template>

      <template #cell(actions)="row">
        <b-button size="sm" @click="info(row.item, row.index, $event.target)" class="mr-1">
          Info modal
        </b-button>
        <b-button size="sm" @click="row.toggleDetails">
          {{ row.detailsShowing ? 'Hide' : 'Show' }} Details
        </b-button>
      </template>

      <template #row-details="row">
        <b-card>
          <ul>
            <li v-for="(value, key) in row.item" :key="key">{{ key }}: {{ value }}</li>
          </ul>
        </b-card>
      </template>
    </b-table>

    <!-- Info modal -->
  </b-container>
</template>
```

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

### GlTable Implementation Example

Source: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/contents/components/table.md

Example demonstrating how to use the GlTable component with custom fields and slots for header and cell content. Ensure fields are passed as an array of objects for internationalization.

```html
<script>
  export default {
    fields: [
      {
        key: 'column_one',
        label: __('First column'),
        thClass: 'w-60p',
        tdClass: 'table-col d-flex'
      },
      {
        key: 'col_2',
        label: __('Second column'),
        thClass: 'w-15p',
        tdClass: 'table-col d-flex'
      },
    ]
  }
</script>
<template>
  <gl-table :items="items" :fields="$options.fields">
    <template #head(column_one)> 
      <div>First column</div>
      <!-- This is the column head for the first object in `fields` -->
    </template>

    <template #cell(column_one)> 
      This is the template for column data belonging to the first object
    </template>
  </gl-table>
</template>
```

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

### Example Major Version Bump Changeset

Source: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/doc/changesets.md

This changeset example demonstrates a major version bump, including a description of breaking changes and guidance for users on how to adapt.

```markdown
---
'@gitlab/ui': major
---

GlFoo: Removed component.

Use the GlBar component instead.
```

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

### Example of an invalid release notes description line

Source: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/contents/get-started/uik-contributing.md

Avoid informal language and ensure descriptions start with an action verb.

```markdown
- Hey can you take a look at this? I added a new icon
```

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

### Start Full Development Mode

Source: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/README.md

Starts the documentation site and GitLab UI's Storybook. Automatically links the documentation site to use your local Storybook instance for live component stories. Useful for developing GitLab UI components.

```bash
yarn start:full
```

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

### Example of a multi-line release notes description

Source: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/contents/get-started/uik-contributing.md

Provide additional details after the first line. Subsequent lines do not need to start with action verbs.

```markdown
- Removes header property from Modal
- Header property is not optional in GitLab UI
- Updates instances to have realistic content
```

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

### GlMultiStepFormTemplate Usage Example

Source: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/contents/components/form-multi-step.md

Demonstrates how to use the GlMultiStepFormTemplate component, typically wrapped in a form element. This setup places submit and cancel buttons outside the template for standard form behavior.

```html
<form>
  <gl-multi-step-form-template
    :current-step="1"
    :total-steps="3"
  >
    <template #default>
      <!-- Step content -->
      <p>This is step 1 content.</p>
    </template>

    <template #back>
      <gl-button>Back</gl-button>
    </template>

    <template #next>
      <gl-button variant="confirm">Next</gl-button>
    </template>

    <template #footer>
      <!-- Optional footer content -->
      <gl-button>Cancel</gl-button>
    </template>
  </gl-multi-step-form-template>
</form>
```

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

### b-table-simple with Stacked Mode

Source: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/packages/gitlab-ui/src/vendor/bootstrap-vue/src/components/table/README.md

Example of a b-table-simple configured for stacked mode, demonstrating the use of the 'stacked-heading' prop on table cells to generate headings for stacked views. This setup is crucial for accessibility and proper display on smaller screens.

```html
<div>
  <b-table-simple hover small caption-top stacked>
    <caption>Items sold in August, grouped by Country and City:</caption>
    <colgroup><col><col></colgroup>
    <colgroup><col><col><col></colgroup>
    <colgroup><col><col></colgroup>
    <b-thead head-variant="dark">
      <b-tr>
        <b-th colspan="2">Region</b-th>
        <b-th colspan="3">Clothes</b-th>
        <b-th colspan="2">Accessories</b-th>
      </b-tr>
      <b-tr>
        <b-th>Country</b-th>
        <b-th>City</b-th>
        <b-th>Trousers</b-th>
        <b-th>Skirts</b-th>
        <b-th>Dresses</b-th>
        <b-th>Bracelets</b-th>
        <b-th>Rings</b-th>
      </b-tr>
    </b-thead>
    <b-tbody>
      <b-tr>
        <b-th rowspan="3" class="text-center">Belgium (3 Cities)</b-th>
        <b-th stacked-heading="City" class="text-left">Antwerp</b-th>
        <b-td stacked-heading="Clothes: Trousers">56</b-td>
        <b-td stacked-heading="Clothes: Skirts">22</b-td>
        <b-td stacked-heading="Clothes: Dresses">43</b-td>
        <b-td stacked-heading="Accessories: Bracelets" variant="success">72</b-td>
        <b-td stacked-heading="Accessories: Rings">23</b-td>
      </b-tr>
      <b-tr>
        <b-th stacked-heading="City">Gent</b-th>
        <b-td stacked-heading="Clothes: Trousers">46</b-td>
        <b-td stacked-heading="Clothes: Skirts" variant="warning">18</b-td>
        <b-td stacked-heading="Clothes: Dresses">50</b-td>
        <b-td stacked-heading="Accessories: Bracelets">61</b-td>
        <b-td stacked-heading="Accessories: Rings" variant="danger">15</b-td>
      </b-tr>
      <b-tr>
        <b-th stacked-heading="City">Brussels</b-th>
        <b-td stacked-heading="Clothes: Trousers">51</b-td>
        <b-td stacked-heading="Clothes: Skirts">27</b-td>
        <b-td stacked-heading="Clothes: Dresses">38</b-td>
        <b-td stacked-heading="Accessories: Bracelets">69</b-td>
        <b-td stacked-heading="Accessories: Rings">28</b-td>
      </b-tr>
      <b-tr>
        <b-th rowspan="2" class="text-center">The Netherlands (2 Cities)</b-th>
        <b-th stacked-heading="City">Amsterdam</b-th>
        <b-td stacked-heading="Clothes: Trousers" variant="success">89</b-td>
        <b-td stacked-heading="Clothes: Skirts">34</b-td>
        <b-td stacked-heading="Clothes: Dresses">69</b-td>
        <b-td stacked-heading="Accessories: Bracelets">85</b-td>
        <b-td stacked-heading="Accessories: Rings">38</b-td>
      </b-tr>
      <b-tr>
        <b-th stacked-heading="City">Utrecht</b-th>
        <b-td stacked-heading="Clothes: Trousers">80</b-td>
        <b-td stacked-heading="Clothes: Skirts" variant="danger">12</b-td>
        <b-td stacked-heading="Clothes: Dresses">43</b-td>
        <b-td stacked-heading="Accessories: Bracelets">36</b-td>
        <b-td stacked-heading="Accessories: Rings" variant="warning">19</b-td>
      </b-tr>
    </b-tbody>
    <b-tfoot>
      <b-tr>
        <b-td colspan="7" variant="secondary" class="text-right">
          Total Rows: <b>5</b>
        </b-td>
      </b-tr>
    </b-tfoot>
  </b-table-simple>
</div>

<!-- b-table-simple-stacked.vue -->
```

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

### BootstrapVue msgBoxOk Example

Source: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/packages/gitlab-ui/src/vendor/bootstrap-vue/src/components/modal/README.md

Demonstrates how to trigger a simple OK message box and one with custom options. The return value indicates user interaction.

```html
<template>
  <div>
    <div class="mb-2">
     <b-button @click="showMsgBoxOne">Simple msgBoxOk</b-button>
     Return value: {{ String(boxOne) }}
    </div>
    <div class="mb-1">
     <b-button @click="showMsgBoxTwo">msgBoxOk with options</b-button>
     Return value: {{ String(boxTwo) }}
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        boxOne: '',
        boxTwo: ''
      }
    },
    methods: {
      showMsgBoxOne() {
        this.boxOne = ''
        this.$bvModal.msgBoxOk('Action completed')
          .then(value => {
            this.boxOne = value
          })
          .catch(err => {
            // An error occurred
          })
      },
      showMsgBoxTwo() {
        this.boxTwo = ''
        this.$bvModal.msgBoxOk('Data was submitted successfully', {
          title: 'Confirmation',
          size: 'sm',
          buttonSize: 'sm',
          okVariant: 'success',
          headerClass: 'p-2 border-bottom-0',
          footerClass: 'p-2 border-top-0',
          centered: true
        })
          .then(value => {
            this.boxTwo = value
          })
          .catch(err => {
            // An error occurred
          })
      }
    }
  }
</script>

<!-- b-modal-msg-box-ok.vue -->
```

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

### Listening to Dropdown Show Event

Source: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/packages/gitlab-ui/src/vendor/bootstrap-vue/src/components/dropdown/README.md

Example of how to listen for dropdown opening events globally using `$root.$on`. This allows you to react when any dropdown is about to be shown.

```javascript
export default {
  mounted() {
    this.$root.$on('bv::dropdown::show', bvEvent => {
      console.log('Dropdown is about to be shown', bvEvent)
    })
  }
}
```

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

### Basic Form Example with BootstrapVue

Source: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/packages/gitlab-ui/src/vendor/bootstrap-vue/src/components/form/README.md

Demonstrates a complete form structure using b-form, b-form-group, b-form-input, b-form-select, b-form-checkbox-group, and b-button. Includes submission and reset handlers.

```html
<template>
  <div>
    <b-form @submit="onSubmit" @reset="onReset" v-if="show">
      <b-form-group
        id="input-group-1"
        label="Email address:"
        label-for="input-1"
        description="We'll never share your email with anyone else."
      >
        <b-form-input
          id="input-1"
          v-model="form.email"
          type="email"
          placeholder="Enter email"
          required
        ></b-form-input>
      </b-form-group>

      <b-form-group id="input-group-2" label="Your Name:" label-for="input-2">
        <b-form-input
          id="input-2"
          v-model="form.name"
          placeholder="Enter name"
          required
        ></b-form-input>
      </b-form-group>

      <b-form-group id="input-group-3" label="Food:" label-for="input-3">
        <b-form-select
          id="input-3"
          v-model="form.food"
          :options="foods"
          required
        ></b-form-select>
      </b-form-group>

      <b-form-group id="input-group-4" v-slot="{ ariaDescribedby }">
        <b-form-checkbox-group
          v-model="form.checked"
          id="checkboxes-4"
          :aria-describedby="ariaDescribedby"
        >
          <b-form-checkbox value="me">Check me out</b-form-checkbox>
          <b-form-checkbox value="that">Check that out</b-form-checkbox>
        </b-form-checkbox-group>
      </b-form-group>

      <b-button type="submit" variant="primary">Submit</b-button>
      <b-button type="reset" variant="danger">Reset</b-button>
    </b-form>
    <b-card class="mt-3" header="Form Data Result">
      <pre class="m-0">{{ form }}</pre>
    </b-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          email: '',
          name: '',
          food: null,
          checked: []
        },
        foods: [{ text: 'Select One', value: null }, 'Carrots', 'Beans', 'Tomatoes', 'Corn'],
        show: true
      }
    },
    methods: {
      onSubmit(event) {
        event.preventDefault()
        alert(JSON.stringify(this.form))
      },
      onReset(event) {
        event.preventDefault()
        // Reset our form values
        this.form.email = ''
        this.form.name = ''
        this.form.food = null
        this.form.checked = []
        // Trick to reset/clear native browser form validation state
        this.show = false
        this.$nextTick(() => {
          this.show = true
        })
      }
    }
  }
</script>

<!-- b-form.vue -->
```

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

### Basic GlFormSelect Example

Source: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/contents/components/select.md

A basic example of the GlFormSelect component with a default empty option.

```html
<gl-form-select
  value=""
  :options="[
    { value: '', text: 'Please select an option', disabled: true },
    { value: 'pizza', text: 'Pizza' },
    { value: 'burger', text: 'Burger' },
    { value: 'pasta', text: 'Pasta' }
  ]"
/>
```

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

### Listening to Tooltip Show Event

Source: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/packages/gitlab-ui/src/vendor/bootstrap-vue/src/components/tooltip/README.md

Sets up a listener on the `$root` instance for the `bv::tooltip::show` event. This allows you to react when any tooltip is shown, receiving event details.

```javascript
export default {
  mounted() {
    this.$root.$on('bv::tooltip::show', bvEvent => {
      console.log('bvEvent:', bvEvent)
    })
  }
}
```

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

### Generate Static Output

Source: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/packages/gitlab-svgs/README.md

Use this command to generate the static output for the preview application, which will be placed in the `public` folder.

```bash
yarn run generate
```

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

### Basic GlLabel Example

Source: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/contents/components/label.md

A basic example of the GlLabel component with a background color, title, and target URL.

```html
<gl-label
  background-color="#D9C2EE"
  title="Label title"
  target="#"
/>
```

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

### Basic Popover Example

Source: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/contents/components/popover.md

This is a basic example of a popover component. It is typically triggered by a click event on an associated element.

```html
<story-viewer component="base-popover" title="Popover"></story-viewer>
```

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

### Live Example: Custom Toggle with Avatar

Source: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/contents/components/dropdown-combobox.md

A live example of GlCollapsibleListbox using a custom toggle. The toggle displays an avatar and uses accessibility attributes, including a bound ID for screen reader text. This example requires Vue.js and the GlAvatar component.

```html
<script>
  export default {
    data() {
      return {
        items: [
          { value: 'jane-doe', text: 'Jane Doe' },
          { value: 'christine-calamary', text: 'Christine Calamary' },
          { value: 'spenser-griffin', text: 'Spenser Griffin' },
        ],
        selected: 'jane-doe',
      };
    },
  };
</script>

<template>
  <div style="min-height: 12rem;">
    <gl-collapsible-listbox :items="items" v-model="selected">
      <template #toggle="{ accessibilityAttributes: { id, ...accessibilityAttributes } }">
        <button
          class="gl-rounded-action gl-border-none gl-bg-strong gl-p-2"
          v-bind="accessibilityAttributes"
        >
          <span class="gl-sr-only" :id="id"> {{selected}} </span>
          <gl-avatar :size="32" :entity-name="selected" />
        </button>
      </template>
    </gl-collapsible-listbox>
  </div>
</template>
```

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

### Basic Table Styles Example

Source: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/packages/gitlab-ui/src/vendor/bootstrap-vue/src/components/table/README.md

Demonstrates how to dynamically control various table styling options using checkboxes and radio buttons. This example allows users to toggle features like striped rows, borders, hover effects, and header variants.

```html
<template>
  <div>
    <b-form-group label="Table Options" label-cols-lg="2" v-slot="{ ariaDescribedby }">
      <b-form-checkbox v-model="striped" :aria-describedby="ariaDescribedby" inline>Striped</b-form-checkbox>
      <b-form-checkbox v-model="bordered" :aria-describedby="ariaDescribedby" inline>Bordered</b-form-checkbox>
      <b-form-checkbox v-model="borderless" :aria-describedby="ariaDescribedby" inline>Borderless</b-form-checkbox>
      <b-form-checkbox v-model="outlined" :aria-describedby="ariaDescribedby" inline>Outlined</b-form-checkbox>
      <b-form-checkbox v-model="small" :aria-describedby="ariaDescribedby" inline>Small</b-form-checkbox>
      <b-form-checkbox v-model="hover" :aria-describedby="ariaDescribedby" inline>Hover</b-form-checkbox>
      <b-form-checkbox v-model="dark" :aria-describedby="ariaDescribedby" inline>Dark</b-form-checkbox>
      <b-form-checkbox v-model="fixed" :aria-describedby="ariaDescribedby" inline>Fixed</b-form-checkbox>
      <b-form-checkbox v-model="footClone" :aria-describedby="ariaDescribedby" inline>Foot Clone</b-form-checkbox>
      <b-form-checkbox v-model="noCollapse" :aria-describedby="ariaDescribedby" inline>No border collapse</b-form-checkbox>
    </b-form-group>

    <b-form-group label="Head Variant" label-cols-lg="2" v-slot="{ ariaDescribedby }">
      <b-form-radio-group
        v-model="headVariant"
        :aria-describedby="ariaDescribedby"
        class="mt-lg-2"
      >
        <b-form-radio :value="null" inline>None</b-form-radio>
        <b-form-radio value="light" inline>Light</b-form-radio>
        <b-form-radio value="dark" inline>Dark</b-form-radio>
      </b-form-radio-group>

```

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

### Simple Table with Sticky Columns

Source: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/packages/gitlab-ui/src/vendor/bootstrap-vue/src/components/table/README.md

Demonstrates how to create a simple table with sticky columns using `<b-table-simple>` and the `sticky-column` prop on individual cells. Ensure the `responsive` prop is set for proper behavior.

```html
<b-table-simple responsive>
  <b-thead>
    <b-tr>
      <b-th sticky-column>Sticky Column Header</b-th>
      <b-th>Heading 1</b-th>
      <b-th>Heading 2</b-th>
      <b-th>Heading 3</b-th>
      <b-th>Heading 4</b-th>
    </b-tr>
  </b-thead>
  <b-tbody>
    <b-tr>
      <b-th sticky-column>Sticky Column Row Header</b-th>
      <b-td>Cell</b-td>
      <b-td>Cell</b-td>
      <b-td>Cell</b-td>
      <b-td>Cell</b-td>
    </b-tr>
    <b-tr>
      <b-th sticky-column>Sticky Column Row Header</b-th>
      <b-td>Cell</b-td>
      <b-td>Cell</b-td>
      <b-td>Cell</b-td>
      <b-td>Cell</b-td>
    </b-tr>
  </b-tbody>
  <b-tfoot>
    <b-tr>
      <b-th sticky-column>Sticky Column Footer</b-th>
      <b-th>Heading 1</b-th>
      <b-th>Heading 2</b-th>
      <b-th>Heading 3</b-th>
      <b-th>Heading 4</b-th>
    </b-tr>
  </b-tfoot>
</b-table-simple>
```

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

### Default Card Example

Source: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/contents/components/card.md

A basic example of a GlCard component with custom header, default slot content, and custom footer.

```html
<!-- live-example -->
<gl-card>
  <template #header>
    <h3 class="gl-heading-scale-500 gl-mb-0">This is a custom header</h3>
  </template>
  <template #default>
    Hello World
  </template>
  <template #footer>
    This is a custom footer
  </template>
</gl-card>
```

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

### Popover with Close Button Example

Source: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/contents/components/popover.md

This example demonstrates a popover that includes a close button for explicit dismissal. It is configured to open on click.

```html
<story-viewer component="base-popover" story="with-close-button" args-triggers="click" title="With close"></story-viewer>
```

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

### BootstrapVue msgBoxConfirm Example

Source: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/packages/gitlab-ui/src/vendor/bootstrap-vue/src/components/modal/README.md

Shows how to use msgBoxConfirm for user confirmation, both with default settings and custom options. The promise resolves with a boolean indicating the user's choice.

```html
<template>
  <div>
    <div class="mb-2">
     <b-button @click="showMsgBoxOne">Simple msgBoxConfirm</b-button>
     Return value: {{ String(boxOne) }}
    </div>
    <div class="mb-1">
     <b-button @click="showMsgBoxTwo">msgBoxConfirm with options</b-button>
     Return value: {{ String(boxTwo) }}
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        boxOne: '',
        boxTwo: ''
      }
    },
    methods: {
      showMsgBoxOne() {
        this.boxOne = ''
        this.$bvModal.msgBoxConfirm('Are you sure?')
          .then(value => {
            this.boxOne = value
          })
          .catch(err => {
            // An error occurred
          })
      },
      showMsgBoxTwo() {
        this.boxTwo = ''
        this.$bvModal.msgBoxConfirm('Please confirm that you want to delete everything.', {
          title: 'Please Confirm',
          size: 'sm',
          buttonSize: 'sm',
          okVariant: 'danger',
          okTitle: 'YES',
          cancelTitle: 'NO',
          footerClass: 'p-2',
          hideHeaderClose: false,
          centered: true
        })
          .then(value => {
            this.boxTwo = value
          })
          .catch(err => {
            // An error occurred
          })
      }
    }
  }
</script>

<!-- b-modal-msg-box-confirm.vue -->
```

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

### Install GitLab UI Package

Source: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/packages/gitlab-ui/README.md

Add GitLab UI as a dependency to your project using Yarn. Ensure peer dependencies are also installed.

```sh
yarn add @gitlab/ui
```