### Quick Start Installation and Setup

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/README.md

Follow these commands to clone the repository, install dependencies, and start the development servers for web components and the documentation site.

```bash
# 1) Clonar repositório\ngit clone https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc.git\ncd govbr-ds-wbc\n\n# 2) Instalar dependências\npnpm install\n\n# 3) Subir dev server dos web components\npnpm start\n\n# 4) Em outro terminal, subir site de docs\npnpm exec nx start site
```

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

### Setup Development Environment

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/CONTRIBUTING.md

Clone the repository, install dependencies, and start the development servers for web components and the documentation site.

```bash
git clone https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc.git
cd govbr-ds-wbc

pnpm install

pnpm exec nx run webcomponents:start

pnpm exec nx run site:start
```

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

### Install Dependencies and Start Project (Inside Container)

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/README.md

Installs dependencies using pnpm with a frozen lockfile and starts the project. These commands are run inside the development container.

```bash
pnpm install --frozen-lockfile
pnpm start
```

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

### Enter Development Container

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/README.md

Enters the development container. Once inside, you can install dependencies and start the project.

```bash
{docker/podman} compose -f compose.dev.yml exec dev bash
```

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

### Link Component - Default Example

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/docs/components/link.mdx

Demonstrates the default usage of the Link component. No specific setup is required beyond importing the component.

```html
<gcds-link href="#">Link</gcds-link>
```

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

### Configure Multi-File Examples

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/src/components/Playground/README.md

The `files` option allows specifying multiple files for a single framework target, including their content. This is useful for demonstrating complex component setups. You can mix multi-file and single-file examples.

```tsx
import angular_example_component_html from './angular/example_component_html.md';
import angular_example_component_ts from './angular/example_component_ts.md';

import react_main_tsx from './react/main_tsx.md';
import react_main_css from './react/main_css.md';

import vue from './vue.md';
import javascript from './javascript.md';

<Playground
  files={{
    angular: {
      'src/app/example.component.html': angular_example_component_html,
      'src/app/example.component.ts': angular_example_component_ts,
    },
    react: {
      files: {
        'src/main.tsx': react_main_tsx,
        'src/main.css': react_main_css,
      },
    },
    javascript,
    vue,
  }}
/>;
```

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

### Basic Card Example

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/docs/components/card/index.mdx

Demonstrates the default and basic usage of the Card component. No specific setup is required beyond including the component.

```html
<div class="card">
  <div class="card-header">
    <h3 class="card-title">Card Title</h3>
  </div>
  <div class="card-body">
    <p>This is the card body content. It can contain text, images, or other elements.</p>
  </div>
  <div class="card-footer">
    <button class="btn btn-primary">Learn More</button>
  </div>
</div>
```

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

### Start Local Development Server

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/README.md

Command to start the development server with hot-reloading for `@govbr-ds/webcomponents` and the site.

```bash
nx start site
```

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

### Install @govbr-ds/webcomponents-react

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/packages/react/README.md

Install the React wrapper using npm, pnpm, or yarn. Ensure your project has compatible versions of React, react-dom, and @govbr-ds/webcomponents installed as peer dependencies.

```bash
npm install @govbr-ds/webcomponents-react
# ou
pnpm add @govbr-ds/webcomponents-react
# ou
yarn add @govbr-ds/webcomponents-react
```

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

### Install @govbr-ds/webcomponents-angular

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/packages/angular/README.md

Install the Angular wrapper and its dependencies using npm, pnpm, or yarn.

```bash
npm install @govbr-ds/webcomponents-angular
# ou
pnpm add @govbr-ds/webcomponents-angular
# ou
yarn add @govbr-ds/webcomponents-angular
```

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

### Install and Run Danger Bot Locally

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/README.md

Install Danger gems, verify Dangerfile syntax, set GitLab API token and host, and run Danger against a specific merge request. Ensure Ruby 3.x and Bundler are installed.

```bash
gem install bundler danger
```

```bash
ruby -c Dangerfile
```

```bash
export DANGER_GITLAB_API_TOKEN="<seu_token_api>"
export DANGER_GITLAB_HOST="gitlab.com"
```

```bash
danger pr --help
```

```bash
danger pr https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/merge_requests/123
```

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

### Component File Structure Example

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/docs/PROJECT_STANDARDS.md

Standard directory structure for a new component. Use `pnpm plop` to create components and examples. Shared types go in `global.types.ts`; shared utilities in `src/shared/`.

```text
components/<nome>/
├── <nome>.tsx
├── <nome>.scss
├── <nome>.types.ts
├── _tests/
│   └── <nome>.e2e.tsx
├── sections/
└── readme.md
```

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

### Basic Pagination Example

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/docs/components/pagination/index.mdx

Demonstrates the default usage of the Pagination component.

```html
<div class="playground" src="/pagination/examples/default.html" size="xsmall"></div>
```

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

### Table Component Default Example

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/docs/components/table/index.mdx

Displays the default configuration of the Table component. This example shows how to render a basic table.

```html
<table class="table">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1.1</td>
      <td>Data 1.2</td>
      <td>Data 1.3</td>
    </tr>
    <tr>
      <td>Data 2.1</td>
      <td>Data 2.2</td>
      <td>Data 2.3</td>
    </tr>
    <tr>
      <td>Data 3.1</td>
      <td>Data 3.2</td>
      <td>Data 3.3</td>
    </tr>
  </tbody>
</table>
```

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

### Basic Notification Example

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/docs/components/notification/index.mdx

Demonstrates the default usage of the Notification component. This is a foundational example for displaying simple notifications.

```html
<div class="notification-container"></div>
```

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

### Install Web Components Package

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/packages/webcomponents/README.md

Install the core web components package for your project using npm, yarn, or pnpm.

```bash
npm install @govbr-ds/webcomponents
# ou
yarn add @govbr-ds/webcomponents
# ou
pnpm add @govbr-ds/webcomponents
```

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

### Basic Collapse Example

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/docs/components/collapse/index.mdx

Demonstrates the default usage of the Collapse component.

```html
<div class="collapse" id="collapseExample">
  <div class="collapse-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>
```

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

### Basic Tab Example

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/docs/components/tab/index.mdx

Demonstrates the default usage of the Tab component.

```html
<div class="playground" src="/tab/examples/default.html" size="small"></div>
```

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

### Default Datetime Picker Example

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/docs/components/datetime-picker/index.mdx

Demonstrates the default configuration and usage of the Datetime Picker component. This example is useful for understanding the basic appearance and functionality.

```html
<gcds-datetime-picker></gcds-datetime-picker>
```

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

### Pagination Density Example

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/docs/components/pagination/index.mdx

Illustrates different density options for the Pagination component.

```html
<div class="playground" src="/pagination/examples/density.html" size="small"></div>
```

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

### Divider Basic Example

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/docs/components/divider/index.mdx

Demonstrates the default usage of the Divider component.

```html
<div class="playground" data-src="/divider/examples/default.html" data-size="xsmall"></div>
```

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

### Contextual Pagination Example

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/docs/components/pagination/index.mdx

Shows how the Pagination component can be used in a contextualized manner.

```html
<div class="playground" src="/pagination/examples/contextual.html" size="small"></div>
```

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

### Basic Header Example

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/docs/components/header/index.mdx

Demonstrates the default and basic usage of the Header component.

```html
<header class="govbr-header">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <govbr-header
          title="Gov.br"
          subtitle="Plataforma e Serviços Digitais"
          logo="https://raw.githubusercontent.com/govbr/design-system/main/public/assets/logo.svg"
        ></govbr-header>
      </div>
    </div>
  </div>
</header>
```

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

### Basic Message Example

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/docs/components/message/index.mdx

Demonstrates the default usage of the Message component.

```html
<div class="message">
  <div class="message-header">
    <span class="message-title">Título da mensagem</span>
  </div>
  <div class="message-body">
    <p>Este é o corpo da mensagem.</p>
  </div>
</div>
```

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

### Cookiebar Default Example

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/docs/components/cookiebar/index.mdx

This example demonstrates the default opt-out pattern for the Cookiebar, where users can configure their cookie preferences individually. It is the recommended approach for managing user consent.

```html
<web-cookiebar></web-cookiebar>
```

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

### Start Development Environment

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/README.md

Starts the development environment using Docker Compose in detached mode. This command uses the compose.dev.yml file to define the services.

```bash
{docker/podman} compose -f compose.dev.yml up -d
```

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

### Wizard Horizontal Example

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/docs/components/wizard/index.mdx

Demonstrates the usage of the Wizard component in a horizontal layout. This example is intended for direct use in an HTML file.

```html
<div class="playground">
  <gcds-wizard
    label="Wizard"
    current-step="1"
    steps='[
      {"label": "Step 1", "description": "Informações iniciais"},
      {"label": "Step 2", "description": "Detalhes do processo"},
      {"label": "Step 3", "description": "Revisão e finalização"}
    ]'
  ></gcds-wizard>
</div>
```

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

### Install @govbr-ds/webcomponents-vue

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/packages/vue/README.md

Install the Vue wrapper for GovBR-DS Web Components using npm, pnpm, or yarn. Ensure your project meets the specified peer dependency versions for Vue and @govbr-ds/webcomponents.

```bash
npm install @govbr-ds/webcomponents-vue
# ou
pnpm add @govbr-ds/webcomponents-vue
# ou
yarn add @govbr-ds/webcomponents-vue
```

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

### Basic Slider Example

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/docs/components/slider/index.mdx

Demonstrates the default and most basic implementation of the Slider component.

```html
<Playground src="/slider/examples/default.html" size="xsmall" />
```

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

### Button State Examples

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/docs/components/button/index.mdx

Presents examples of different states for the Button component, such as active, disabled, or hover. Ensure users understand the button's current status.

```html
<div class="playground" data-src="/button/examples/state.html" data-size="xsmall"></div>
```

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

### Basic Select Example

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/docs/components/select/index.mdx

Demonstrates the default usage of the Select component for single item selection.

```html
<Playground src="/select/examples/default.html" size="small"/>
```

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

### Tab Density Example

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/docs/components/tab/index.mdx

Illustrates different density options for the Tab component.

```html
<div class="playground" src="/tab/examples/density.html" size="medium"></div>
```

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

### Tab Alignment Example

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/docs/components/tab/index.mdx

Shows how to control the alignment of the Tab component.

```html
<div class="playground" src="/tab/examples/alinhamento.html" size="medium"></div>
```

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

### Install and Run Triage Bot Locally

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/README.md

Install the gitlab-triage gem, verify YAML syntax for configuration files, set GitLab API tokens, and perform a dry-run or actual execution of the triage process for a group. Ruby 3.x is required.

```bash
gem install gitlab-triage
```

```bash
ruby -c .triage-custom.rb
```

```bash
ruby -e "require 'yaml'; YAML.load_file('.triage-policies.yml'); puts 'YAML syntax OK'"
```

```bash
export GITLAB_TOKEN="<seu_token_api>"
export TRIAGE_GITLAB_API_TOKEN="<seu_token_api>"
```

```bash
gitlab-triage --dry-run -r ./.triage-custom.rb --token "$GITLAB_TOKEN" --source groups --source-id govbr-ds/bibliotecas/wbc
```

```bash
gitlab-triage -r ./.triage-custom.rb --token "$GITLAB_TOKEN" --source groups --source-id govbr-ds/bibliotecas/wbc
```

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

### Checkbox Basic Example

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/docs/components/checkbox/index.mdx

Demonstrates the default usage of the Checkbox component.

```html
<div class="playground" data-src="/checkbox/examples/default.html" data-size="xsmall"></div>
```

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

### Divider Thickness Example

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/docs/components/divider/index.mdx

Illustrates how to control the thickness of the Divider component.

```html
<div class="playground" data-src="/divider/examples/thickness.html" data-size="small"></div>
```

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

### Dropdown Methods Example

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/packages/webcomponents/src/components/dropdown/readme.md

Illustrates how to programmatically control the dropdown using its 'hide', 'open', and 'setFocus' methods.

```javascript
const dropdown = document.querySelector('br-dropdown');

// To open the dropdown
await dropdown.open();

// To hide the dropdown
await dropdown.hide();

// To set focus on the dropdown's internal element
await dropdown.setFocus();
```

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

### Dropdown Events Example

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/packages/webcomponents/src/components/dropdown/readme.md

Shows how to listen for the 'brDidOpen' and 'brDropdownChange' events emitted by the dropdown component.

```javascript
const dropdown = document.querySelector('br-dropdown');

dropdown.addEventListener('brDidOpen', () => {
  console.log('Dropdown opened!');
});

dropdown.addEventListener('brDropdownChange', (event) => {
  console.log('Dropdown state changed:', event.detail.isOpen);
});
```

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

### Multiple Select Example

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/docs/components/select/index.mdx

Illustrates how to configure the Select component to allow multiple item selections.

```html
<Playground src="/select/examples/multiple.html" size="small"/>
```

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

### NgModule Usage Example

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/packages/angular/README.md

Import the WebcomponentsAngularModule using forRoot() in your application's module. Ensure core dependencies are installed.

```typescript
import { WebcomponentsAngularModule } from '@govbr-ds/webcomponents-angular'

@NgModule({
  imports: [WebcomponentsAngularModule.forRoot()],
})
export class AppModule {}
```

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

### Serve Production Build

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/README.md

Command to preview the production build of the site locally.

```bash
nx serve site
```

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

### Basic Checkgroup Usage

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/docs/components/checkgroup/index.mdx

Demonstrates the default and basic usage of the Checkgroup component. This example is useful for understanding the initial setup and appearance.

```html
<checkgroup>
  <checkgroup-item>
    <input type="checkbox" id="checkbox-1" name="checkbox-1" value="checkbox-1" />
    <label for="checkbox-1">Opção 1</label>
  </checkgroup-item>
  <checkgroup-item>
    <input type="checkbox" id="checkbox-2" name="checkbox-2" value="checkbox-2" />
    <label for="checkbox-2">Opção 2</label>
  </checkgroup-item>
  <checkgroup-item>
    <input type="checkbox" id="checkbox-3" name="checkbox-3" value="checkbox-3" />
    <label for="checkbox-3">Opção 3</label>
  </checkgroup-item>
</checkgroup>
```

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

### Vue Component Usage with v-model

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/packages/vue/README.md

Example of using a GovBR DS input component with v-model for two-way data binding in a Vue 3 setup script.

```vue
<script setup lang="ts">
import { ref } from 'vue'
const name = ref('Lorem ipsum')
</script>

<template>
  <h1>Olá {{ name }}</h1>
  <br-input name="name" placeholder="Seu nome" v-model="name" />
</template>
```

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

### Standalone Component Usage Example

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/packages/angular/README.md

Import individual components directly from the standalone subpath. This is suitable for applications using standalone components. Ensure core dependencies are installed.

```typescript
import { BrButton } from '@govbr-ds/webcomponents-angular/standalone'

@Component({
  standalone: true,
  imports: [BrButton],
})
export class AppComponent {}
```

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

### Compound Skip Link Example

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/docs/components/skip-link/index.mdx

Shows a more complex skip link setup, potentially involving multiple skip links or more intricate HTML structure. Use this when you need to offer more granular skipping options.

```html
<div class="playground">
  <gov-skip-link href="#main-content" label="Pular para o conteúdo principal"></gov-skip-link>
  <gov-skip-link href="#menu" label="Pular para o menu"></gov-skip-link>
</div>
```

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

### Switch Component Examples

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/docs/components/switch/index.mdx

Demonstrates different visual configurations of the Switch component, including density, icon usage, and state management.

```html
<div class="switch-density">
  <label class="label">Density</label>
  <div class="container-switch">
    <input type="checkbox" id="switch-density" class="input-switch" />
    <label for="switch-density" class="label-switch"></label>
  </div>
</div>

```

```html
<div class="switch-has-icon">
  <label class="label">Icon</label>
  <div class="container-switch">
    <input type="checkbox" id="switch-has-icon" class="input-switch" />
    <label for="switch-has-icon" class="label-switch"><span class="icon"></span></label>
  </div>
</div>

```

```html
<div class="switch-state">
  <label class="label">State</label>
  <div class="container-switch">
    <input type="checkbox" id="switch-state" class="input-switch" checked />
    <label for="switch-state" class="label-switch"></label>
  </div>
</div>

```

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

### Wizard Vertical Example

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/docs/components/wizard/index.mdx

Demonstrates the usage of the Wizard component in a vertical layout. This example is intended for direct use in an HTML file.

```html
<div class="playground">
  <gcds-wizard
    label="Wizard"
    current-step="1"
    orientation="vertical"
    steps='[
      {"label": "Step 1", "description": "Informações iniciais"},
      {"label": "Step 2", "description": "Detalhes do processo"},
      {"label": "Step 3", "description": "Revisão e finalização"}
    ]'
  ></gcds-wizard>
</div>
```

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

### Basic Modal Example

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/docs/components/modal/index.mdx

Demonstrates the default usage of the Modal component. This snippet shows how to render a basic modal window.

```html
<div class="modal-container">
  <div class="modal-content">
    <h2>Modal Title</h2>
    <p>This is the modal body.</p>
    <button class="close-button">Close</button>
  </div>
</div>
```

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

### Install Peer Dependencies

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/packages/webcomponents/README.md

Install required peer dependencies for components like br-datetime-picker and br-tooltip to function correctly. This ensures compatibility with floating UI, date utilities, and icon libraries.

```bash
npm install @floating-ui/dom date-fns iconify-icon
# ou
pnpm add @floating-ui/dom date-fns iconify-icon
```

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

### Menu Push Example

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/docs/components/menu/index.mdx

Demonstrates the 'Push' variation of the Menu component. This is typically used for navigation that slides in from the side.

```html
<Playground src="/menu/examples/push.html" size="medium"/>
```

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

### play

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/packages/webcomponents/src/components/carousel/readme.md

Programmatically starts or resumes the carousel's autoplay.

```APIDOC
## play

### Description
Starts or resumes the autoplay programmatically.

### Method
`play()`
```

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

### Build Web Components and React Wrapper

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/packages/react/README.md

Commands to generate Web Components and then compile the React wrapper. Ensure Web Components are built before the React wrapper.

```bash
nx build webcomponents
nx build react
```

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

### Selectable Item Example

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/docs/components/item/index.mdx

Shows how to implement a selectable Item component. This is useful for list items that users can choose or unchoose.

```html
<div class="item item--selectable">
  <div class="item-content">
    <p>Item Selecionável</p>
  </div>
</div>
```

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

### Image Avatar Example

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/docs/components/avatar/index.mdx

Demonstrates displaying a user's profile image as an avatar. Ensure the image source is correctly provided.

```html
<div class="avatar">
  <span class="avatar__content">
    <img class="avatar__img" src="https://unavatar.io/github/user" alt="Avatar do usuário">
  </span>
</div>
```

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

### Basic List Example

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/docs/components/list/index.mdx

Demonstrates the default usage of the List component. This snippet shows a standard vertical list layout.

```html
<list></list>
```

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

### Sign In Emphasis Example

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/docs/components/sign-in/index.mdx

Demonstrates the emphasis variant of the Sign In component. Use this to highlight the primary sign-in action.

```html
<div class="playground" data-src="/sign-in/examples/emphasis.html" data-size="xsmall"></div>
```

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

### Divider Color Example

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/docs/components/divider/index.mdx

Demonstrates how to set the color of the Divider component.

```html
<div class="playground" data-src="/divider/examples/color.html" data-size="small"></div>
```

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

### Button Density Examples

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/docs/components/button/index.mdx

Demonstrates different density options for the Button component. Use this to visualize how density affects the button's appearance.

```html
<div class="playground" data-src="/button/examples/density.html" data-size="xsmall"></div>
```

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

### Checkbox Indeterminate Example

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/docs/components/checkbox/index.mdx

Shows how to render a Checkbox in an indeterminate state.

```html
<div class="playground" data-src="/checkbox/examples/indeterminate.html" data-size="xsmall"></div>
```

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

### Dropdown Slots Example

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/packages/webcomponents/src/components/dropdown/readme.md

Demonstrates how to use the 'trigger' and 'target' slots to define the content that opens the dropdown and the content displayed within it.

```html
<br-dropdown>
  <span slot="trigger">Open Menu</span>
  <ul slot="target">
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</br-dropdown>
```

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

### Basic Footer Example

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/docs/components/footer/index.mdx

Renders the default footer component. Use this to quickly integrate the basic footer structure.

```html
<gcds-footer>
  <gcds-footer-column>
    <gcds-link href="#">Link 1</gcds-link>
    <gcds-link href="#">Link 2</gcds-link>
  </gcds-footer-column>
  <gcds-footer-column>
    <gcds-link href="#">Link 3</gcds-link>
    <gcds-link href="#">Link 4</gcds-link>
  </gcds-footer-column>
  <gcds-footer-column>
    <gcds-link href="#">Link 5</gcds-link>
    <gcds-link href="#">Link 6</gcds-link>
  </gcds-footer-column>
</gcds-footer>
```

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

### Sign In Shape Example

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/docs/components/sign-in/index.mdx

Illustrates different shape options for the Sign In component. Choose the shape that best fits your application's design.

```html
<div class="playground" data-src="/sign-in/examples/shape.html" data-size="small"></div>
```

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

### Vertical Slider Example

Source: https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/blob/next/apps/site/docs/components/slider/index.mdx

Illustrates the Slider component implemented in a vertical orientation.

```html
<Playground src="/slider/examples/vertical.html" size="small" />
```