BliP DS

https://github.com/takenet/blip-ds
Admin
BliP DS is a Design System for Blip, built with Web Components using StencilJS, providing a...
Tokens:39,714
Snippets:389
Trust Score:8.5
License:MIT
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install Sass

Source: https://github.com/takenet/blip-ds/blob/main/src/pages/installation/installation.mdx

Install the Sass package to enhance the utilization of the Design System.

```bash
npm install sass
```

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

### Install blip-ds Components

Source: https://github.com/takenet/blip-ds/blob/main/src/pages/installation/installation.mdx

Use npm to install the blip-ds component library.

```bash
npm install blip-ds
```

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

### Theme Provider Usage Example

Source: https://github.com/takenet/blip-ds/blob/main/src/components/theme-provider/readme.md

Illustrates how the bds-theme-provider is utilized by other components in the system.

```mermaid
graph TD;
  bds-carousel-item --> bds-theme-provider
  bds-test-component --> bds-theme-provider
  style bds-theme-provider fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Nav Tree Group Properties Example

Source: https://github.com/takenet/blip-ds/blob/main/src/components/nav-tree/nav-tree-group.mdx

Displays the properties available for the Nav Tree Group component.

```javascript
import { Canvas, Controls, Meta, Source } from '@storybook/blocks';
import * as NavTreeGroupStories from './nav-tree-group.stories';

# Nav Tree Group

[Design e Acessibilidade](https://www.figma.com/design/2bBnJVKkG09JPWCFBIcD1y/%5BDS%5D-Components?m=auto&node-id=19230-2459&t=TyXNmrAZbhl7DmWw-1)


<br></br>
## Estrutura

O componente NavTree é utilizado para um agrupamento de sub-opções de navegação. 

<Canvas of={NavTreeGroupStories.Properties}></Canvas>

<Meta isTemplate />

<br></br>
## Propriedades

As propriedades a seguir são compartilhadas pelo Nav Tree Group.

<Controls />

<br></br>
## Usando em React

<Source of={NavTreeGroupStories.FrameworkReact} />
```

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

### Chip Tag Basic Usage

Source: https://github.com/takenet/blip-ds/blob/main/src/components/chip-tag/readme.md

Demonstrates the basic usage of the chip tag component. No specific setup is required beyond including the component.

```html
<bds-chip-tag>Chip Tag</bds-chip-tag>
```

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

### Install and Configure Blip DS in React JS

Source: https://github.com/takenet/blip-ds/blob/main/src/pages/ds-react/ds-react.mdx

This snippet shows the necessary imports and configurations in index.js to apply polyfills and define custom elements for Blip DS components in a React application.

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.scss';
import App from './App';

import { applyPolyfills, defineCustomElements } from 'blip-ds/loader';

// Renderizando o componente App no root
ReactDOM.render(<App />, document.getElementById('root'));

// Aplicando os polyfills e definindo os elementos personalizados do Blip DS
applyPolyfills().then(() => {
  defineCustomElements(window);
});
```

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

### Accordion Usage in React

Source: https://github.com/takenet/blip-ds/blob/main/src/components/accordion/accordion.mdx

Provides an example of how to integrate and use the Accordion component within a React application.

```javascript
import { Story, Canvas, Controls, Meta, Source } from '@storybook/blocks';
import * as AccordionStories from './accordion.stories';

<Source of={AccordionStories.FrameworkReact} />
```

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

### Angular Application Setup with Blip DS

Source: https://github.com/takenet/blip-ds/blob/main/src/pages/ds-angular/ds-angular.mdx

Boilerplate code for setting up an Angular application to use Blip DS components. Includes enabling production mode and bootstrapping the application module. Ensure the loader import path is correctly configured.

```typescript
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

// Note: loader import location set using "esmLoaderPath" within the output target confg
import { applyPolyfills, defineCustomElements } from 'blip-ds/loader';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));
applyPolyfills().then(() => {
  defineCustomElements(window)
})
```

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

### Button Usage in React

Source: https://github.com/takenet/blip-ds/blob/main/src/components/button/button.mdx

This snippet provides an example of how to use the Button component within a React application. It demonstrates the integration of the button component in a React context.

```javascript
<Source of={ButtonStories.FrameworkReact} />
```

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

### get()

Source: https://github.com/takenet/blip-ds/blob/main/src/components/input-chips/readme.md

Retrieves all chips currently present in the input chips component. This operation is asynchronous and returns a promise that resolves with an array of strings, where each string is the value of a chip.

```APIDOC
## get()

### Description
Returns the chips.

### Method
`get`

### Returns
Type: `Promise<string[]>`
```

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

### Button Properties Example

Source: https://github.com/takenet/blip-ds/blob/main/src/components/button/button.mdx

This snippet showcases the properties available for the Button component. Use these controls to customize the button's appearance and behavior.

```javascript
import { Canvas, Meta, Controls, Source } from '@storybook/blocks';
import * as ButtonStories from './button.stories';

<Canvas of={ButtonStories.Properties}></Canvas>

<Meta isTemplate />
```

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

### Button Events Example

Source: https://github.com/takenet/blip-ds/blob/main/src/components/button/button.mdx

This snippet demonstrates how to handle events for the Button component. The 'bdsClick' event is emitted when the button is clicked.

```html
<table>
  <thead>
    <tr>
      <th>Evento</th>
      <th>Descrição</th>
      <th>Tipo</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>bdsClick</td>
      <td>Evento emitido quando é executado um click no componente.</td>
      <td>CustomEvent&lt;any&gt;</td>
    </tr>
  </tbody>
</table>

<Source of={ButtonStories.Events} />
```

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

### Avatar Group Usage in React

Source: https://github.com/takenet/blip-ds/blob/main/src/components/avatar/avatar-group.mdx

Provides an example of how to implement and use the Avatar Group component within a React application.

```javascript
import { Source } from '@storybook/blocks';
import * as AvatarGroupStories from './avatar-group.stories';

<Source of={AvatarGroupStories.FrameworkReact} />
```

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

### UAI Design System Input and Button Components

Source: https://github.com/takenet/blip-ds/blob/main/src/pages/integration/cypress.mdx

Example JSX code for UAI Design System's input fields (email and password) and a submit button, demonstrating the use of `id` and `data-test` attributes for Cypress interaction.

```jsx
<bds-input
  id="4328-mail"
  data-test="input-email"
  placeholder="Insira aqui seu e-mail"
  label="E-mail"
></bds-input>
<bds-input
  id="4328-password"
  data-test="input-password"
  placeholder="Insira aqui sua senha"
  label="Senha"
></bds-input>
<bds-button id="4328-submit" data-test="send-log">
  Entrar
</bds-button>
```

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

### Angular Component Template with Blip DS Components

Source: https://github.com/takenet/blip-ds/blob/main/src/pages/ds-angular/ds-angular.mdx

Example of an Angular component's HTML template using Blip DS components like `bds-typo`, `bds-button`, and `bds-input`. Demonstrates event binding for buttons and input changes.

```html
<div>
  <div class="container-count">
    <bds-typo variant="fs-16">{{ count }}</bds-typo>
    <bds-button (click)="addCount()">+</bds-button>
    <bds-button (click)="subCount()">-</bds-button>
    <bds-input value={{count}} (bdsChange)="onChange($event)"></bds-input>
  </div>
</div>
```

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

### create()

Source: https://github.com/takenet/blip-ds/blob/main/src/components/toast/readme.md

Opens a toast with customizable content and behavior. This method can be used externally to trigger a toast.

```APIDOC
## create(options)

### Description
Opens a toast with customizable content and behavior. This method can be used externally to trigger a toast.

### Method
`create({ actionType, buttonAction, buttonText, icon, toastText, toastTitle, variant, duration })`

### Parameters
#### Options Object
- **actionType** (string) - Optional - Type of action for the button.
- **buttonAction** (function) - Optional - Action to be executed when the button is clicked.
- **buttonText** (string) - Optional - Text to be displayed on the button.
- **icon** (string) - Optional - Icon to be displayed in the toast.
- **toastText** (string) - Required - The main text content of the toast.
- **toastTitle** (string) - Optional - The title of the toast.
- **variant** (string) - Optional - The visual variant of the toast (e.g., 'success', 'error', 'info').
- **duration** (number) - Optional - The duration in milliseconds the toast should be visible.

### Returns
Type: `Promise<void>`
```

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

### bds-step Component Dependencies

Source: https://github.com/takenet/blip-ds/blob/main/src/components/stepper/step/readme.md

Illustrates the component dependencies for bds-step, showing its relationship with bds-icon and bds-typo.

```mermaid
graph TD;
  bds-step --> bds-icon
  bds-step --> bds-typo
  style bds-step fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Estilizar via CSS-in-JS

Source: https://github.com/takenet/blip-ds/blob/main/src/pages/ds-react/styling-project.mdx

Utilize a prop 'style' para aplicar estilos CSS-in-JS diretamente em componentes React. Esta é uma prática comum no framework.

```jsx
import React from "react";

const teste = {
  width: '500px',
  margin: 'auto',
  marginTop: '36px',
  padding: '32px',
}

export default class Test extends React.Component {
  render() {
    return (
        <bds-paper style={teste}>
          <bds-typo>Teste de uma prop para estilizar esse componente css-in-js</bds-typo>
        </bds-paper>
    );
  }
}
```

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

### Menu Avatar Dependencies Graph

Source: https://github.com/takenet/blip-ds/blob/main/src/components/menu/menu-exibition/readme.md

Visualizes the dependency graph of the bds-menu-exibition component, showing its reliance on bds-avatar and bds-typo.

```mermaid
graph TD;
  bds-menu-exibition --> bds-avatar
  bds-menu-exibition --> bds-typo
  bds-avatar --> bds-typo
  bds-avatar --> bds-icon
  style bds-menu-exibition fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Testing Input Component with CustomEventMock

Source: https://github.com/takenet/blip-ds/blob/main/src/pages/integration/jest.mdx

Example of using the CustomEventMock function to test the 'change' event on a BdsInput component. It renders the input, creates a mock event, and dispatches it using fireEvent.

```jsx
import { render, fireEvent, screen } from '@testing-library/react';
import { CustomEventMock } from '../../../utils/scripts';
import Input from '.';

describe('Input', () => {
  it('should render correctly', async () => {
    render(<Input />);
    const emptyValue = '';
    const input = screen.getByTestId<HTMLBdsInputElement>('5498-input');
    const ev = CustomEventMock('bdsInput', emptyValue);
    fireEvent(input, ev);
  });
});
```

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

### activateButton Method

Source: https://github.com/takenet/blip-ds/blob/main/src/components/button/readme.md

Activates a button at a specific index.

```APIDOC
## Methods

### `activateButton(index: number) => Promise<void>`

#### Returns

Type: `Promise<void>`
```

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

### Using bds-input with Custom Events in AngularJS

Source: https://github.com/takenet/blip-ds/blob/main/src/pages/ds-angular/ds-angular.mdx

Example of using the bds-input component in AngularJS with a custom event listener. The `custom-events` directive expects an array of event objects, each with an event name and a callback function.

```html
<bds-input
  value="{{ $ctrl.typedTenantName }}"
  custom-events="[{ event:'bdsChange', cb: $ctrl.onInputChangeCustom }]">
</bds-input>
```

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

### Loading Spinner Properties

Source: https://github.com/takenet/blip-ds/blob/main/src/components/loading-spinner/readme.md

Demonstrates the available properties for customizing the loading spinner, including color, size, and variant.

```html
<bds-loading-spinner 
  color="white"
  size="small"
  variant="secondary"
></bds-loading-spinner>
```

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

### Cypress Test for Login Flow

Source: https://github.com/takenet/blip-ds/blob/main/src/pages/integration/cypress.mdx

Simulates a user login process by visiting the login page, filling in email and password fields, submitting the form, and verifying redirection to the home page. Uses `cy.visit`, `cy.get`, `.shadow()`, `.find()`, `.should()`, `.type()`, and `.click()` commands.

```typescript
describe('Sing In', () => {
  it('should fill form to sing the user and ridurect to home', () => {
    // Aviso para acessar a página de login
    cy.visit('http://localhost:3000/login')


    // Procuramos por um elemento e digitamos
    cy.get('#4328-mail').shadow().find('[data-test="input-email"]').should("be.enabled").type("teste@mail.com", { force: true })
    cy.get('#4328-password').shadow().find('[data-test="input-password"]').should("be.enabled").type("teste123", { force: true })


    // Clicar para submeter login
    cy.get('#4328-submit').shadow().find('[data-test="send-log"]').click()


    // verificamos se a url é de fato o que esperamos
    cy.url().should('eq', 'http://localhost:3000/')
  })
})
```

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

### Estilizar via className no SCSS (Arquivo .scss)

Source: https://github.com/takenet/blip-ds/blob/main/src/pages/ds-react/styling-project.mdx

Este snippet define os estilos para a classe 'teste' utilizada em arquivos .jsx para estilização via SCSS.

```scss
.teste {
  width: 500px;
  margin: 36px auto;
  padding: 32px;
}
```

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

### Basic CSS Styling

Source: https://github.com/takenet/blip-ds/blob/main/src/index.html

Applies background color, margin, height, and flexbox properties for centering content.

```css
body {
  background: var(--color-surface-3, #f5f8f9);
  /* background: var(--color-background-2, #0a0f1a); */
  margin: 0;
  height: 100vh;
  justify-content: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
```

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

### Aplicar Variáveis de Cores Sass

Source: https://github.com/takenet/blip-ds/blob/main/src/pages/styles/config-styles.mdx

Aplique as variáveis de cores importadas (`$color-brand`, `$color-primary`, `$color-success`) às propriedades de cor dos seus elementos.

```sass
@import "~blip-ds/dist/collection/styles/_colors.scss"

.text1 {
  color: $color-brand;
}
.text2 {
  color: $color-primary;
}
.text3 {
  color: $color-success;
}
```

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

### Importar Variáveis de Cores Sass

Source: https://github.com/takenet/blip-ds/blob/main/src/pages/styles/config-styles.mdx

Importe as variáveis de cores do Design System no seu arquivo SCSS para utilizá-las.

```sass
@import "~blip-ds/dist/collection/styles/_colors.scss"
```

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

### Estilizar via className no SCSS (Arquivo .jsx)

Source: https://github.com/takenet/blip-ds/blob/main/src/pages/ds-react/styling-project.mdx

Para estilizar elementos em tela, a forma mais apropriada é via className. Este snippet mostra o arquivo .jsx que aplica uma classe SCSS.

```jsx
import React from "react";

export default class Test extends React.Component {
  render() {
    return (
        <bds-paper class="teste">
          <bds-typo>teste de estilização via SCSS</bds-typo>
        </bds-paper>
    );
  }
}
```

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

### Nav Tree Item Dependencies

Source: https://github.com/takenet/blip-ds/blob/main/src/components/nav-tree/readme.md

Illustrates the component dependencies for bds-nav-tree-item, showing its relationship with bds-loading-spinner, bds-icon, and bds-typo.

```mermaid
graph TD;
  bds-nav-tree-item --> bds-loading-spinner
  bds-nav-tree-item --> bds-icon
  bds-nav-tree-item --> bds-typo
  style bds-nav-tree-item fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Using BdsSelect Component in React JS

Source: https://github.com/takenet/blip-ds/blob/main/src/pages/ds-react/ds-react.mdx

Demonstrates how to import and use the BdsSelect component from blip-ds-react in a React application, passing options as a JSON string.

```jsx
import React from 'react';
import './App.scss';
import { BdsSelect } from 'blip-ds/dist/blip-ds-react/components';
 
const App = () => {
  const options = '[{"value": "Cat", "label": "Meow"}, {"value": "Dog", "label": "Woof"}]'
  return (
    <>
    <BdsSelect options={options}> </BdsSelect>
    </>
  );
}
export default App;

```

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

### Chip Selected Component Dependencies

Source: https://github.com/takenet/blip-ds/blob/main/src/components/chip-selected/readme.md

The chip-selected component relies on bds-icon for icon integration and bds-typo for text styling. Ensure these components are available in your project.

```mermaid
graph TD;
  bds-chip-selected --> bds-icon
  bds-chip-selected --> bds-typo
  style bds-chip-selected fill:#f9f,stroke:#333,stroke-width:4px
```

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

### bds-card-color Component Dependencies

Source: https://github.com/takenet/blip-ds/blob/main/src/components/card-color/readme.md

Illustrates the component dependencies using a Mermaid graph. This is useful for understanding the relationship between bds-card-color and other components in the Blip DS library.

```mermaid
graph TD;
  bds-card-color --> bds-paper
  bds-card-color --> bds-grid
  bds-card-color --> bds-typo
  style bds-card-color fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Grid Component Dependencies Graph

Source: https://github.com/takenet/blip-ds/blob/main/src/components/grid/readme.md

This Mermaid graph visualizes the dependencies of various Blip Design System components on the Grid component. It helps understand how different UI elements rely on the grid structure.

```mermaid
graph TD;
  bds-breadcrumb --> bds-grid
  bds-button-group --> bds-grid
  bds-card --> bds-grid
  bds-card-body --> bds-grid
  bds-card-color --> bds-grid
  bds-card-footer --> bds-grid
  bds-card-header --> bds-grid
  bds-carousel --> bds-grid
  bds-datepicker --> bds-grid
  bds-list-item-content --> bds-grid
  bds-pagination --> bds-grid
  bds-rich-text --> bds-grid
  bds-skeleton --> bds-grid
  bds-tab-group --> bds-grid
  bds-test-component --> bds-grid
  style bds-grid fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Skeleton Component Dependency Graph

Source: https://github.com/takenet/blip-ds/blob/main/src/components/skeleton/readme.md

Visualizes the dependencies of the bds-skeleton component, showing its relationship with bds-grid and other components that use it.

```mermaid
graph TD;
  bds-skeleton --> bds-grid
  bds-carousel --> bds-skeleton
  bds-image --> bds-skeleton
  style bds-skeleton fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Alert Header Dependencies Graph

Source: https://github.com/takenet/blip-ds/blob/main/src/components/alert/alert-header/readme.md

Visualizes the dependencies of the alert-header component on other components like bds-icon and bds-typo.

```mermaid
graph TD;
  bds-alert-header --> bds-icon
  bds-alert-header --> bds-typo
  style bds-alert-header fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Select Chips Dependency Graph

Source: https://github.com/takenet/blip-ds/blob/main/src/components/selects/select-chips/readme.md

Visual representation of the dependencies for the Select Chips component within the Blip Design System.

```mermaid
graph TD;
  bds-select-chips --> bds-chip-clickable
  bds-select-chips --> bds-tooltip
  bds-select-chips --> bds-icon
  bds-select-chips --> bds-typo
  bds-select-chips --> bds-select-option
  bds-chip-clickable --> bds-icon
  bds-chip-clickable --> bds-avatar
  bds-chip-clickable --> bds-typo
  bds-avatar --> bds-typo
  bds-avatar --> bds-icon
  bds-tooltip --> bds-typo
  bds-select-option --> bds-typo
  bds-select-option --> bds-checkbox
  bds-checkbox --> bds-icon
  bds-checkbox --> bds-typo
  style bds-select-chips fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Image Component Methods

Source: https://github.com/takenet/blip-ds/blob/main/src/components/image/readme.md

This section describes the available methods for the bds-img component, including how to load images.

```APIDOC
## Image Component Methods

This section describes the available methods for the bds-img component, including how to load images.

### `loadImage()`

Loads the image.

#### Returns

Type: `Promise<void>`
```

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

### Accordion Header Dependencies

Source: https://github.com/takenet/blip-ds/blob/main/src/components/accordion/readme.md

Illustrates the component dependencies for the bds-accordion-header, showing its relationship with other components like bds-avatar, bds-icon, and bds-typo.

```mermaid
graph TD;
  bds-accordion-header --> bds-avatar
  bds-accordion-header --> bds-icon
  bds-accordion-header --> bds-typo
  bds-avatar --> bds-typo
  bds-avatar --> bds-icon
  style bds-accordion-header fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Select Option Methods

Source: https://github.com/takenet/blip-ds/blob/main/src/components/select-option/readme.md

This section describes the available methods for programmatically interacting with the bds-select-option component.

```APIDOC
## Methods

### `markOff() => Promise<void>`

#### Returns

Type: `Promise<void>`

### `toMark() => Promise<void>`

#### Returns

Type: `Promise<void>`

### `toggle() => Promise<void>`

#### Returns

Type: `Promise<void>`
```

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

### Select Component Dependency Graph

Source: https://github.com/takenet/blip-ds/blob/main/src/components/selects/select/readme.md

Visual representation of the Select component's dependencies on other bds-ds components.

```mermaid
graph TD;
  bds-select --> bds-icon
  bds-select --> bds-typo
  bds-select --> bds-select-option
  bds-select-option --> bds-typo
  bds-select-option --> bds-checkbox
  bds-checkbox --> bds-icon
  bds-checkbox --> bds-typo
  bds-pagination --> bds-select
  style bds-select fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Autocomplete Component Dependencies Graph

Source: https://github.com/takenet/blip-ds/blob/main/src/components/autocomplete/readme.md

Visual representation of the Autocomplete component's dependencies on other Blip Design System components. Useful for understanding the component's integration and required sub-components.

```mermaid
graph TD;
  bds-autocomplete --> bds-icon
  bds-autocomplete --> bds-typo
  bds-autocomplete --> bds-loading-spinner
  bds-autocomplete --> bds-checkbox
  bds-autocomplete --> bds-select-option
  bds-checkbox --> bds-icon
  bds-checkbox --> bds-typo
  bds-select-option --> bds-typo
  bds-select-option --> bds-checkbox
  style bds-autocomplete fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Menu Item Dependencies Graph

Source: https://github.com/takenet/blip-ds/blob/main/src/components/menu/menu-action/readme.md

This Mermaid graph illustrates the dependencies of the bds-menu-action component on bds-icon and bds-typo.

```mermaid
graph TD;
  bds-menu-action --> bds-icon
  bds-menu-action --> bds-typo
  style bds-menu-action fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Apply Polyfills and Define Custom Elements

Source: https://github.com/takenet/blip-ds/blob/main/src/pages/ds-angular/ds-angular.mdx

Apply polyfills and define custom elements for Blip DS components. This is typically done once when your application initializes.

```javascript
import { applyPolyfills, defineCustomElements } from 'blip-ds/loader';

// applying blip-ds custom elements
applyPolyfills().then(() => {
  defineCustomElements(window);
});
```

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

### Card Footer Dependency Graph

Source: https://github.com/takenet/blip-ds/blob/main/src/components/card/card-footer/readme.md

Visualizes the dependency of the bds-card-footer component on the bds-grid component.

```mermaid
graph TD;
  bds-card-footer --> bds-grid
  style bds-card-footer fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Toast Properties

Source: https://github.com/takenet/blip-ds/blob/main/src/components/toast/readme.md

Configure the appearance and behavior of the toast notification.

```APIDOC
## Toast Properties

### toastText

- **Description**: The text content of the component.
- **Type**: `string`
- **Default**: `undefined`

### toastTitle

- **Description**: The title of the component.
- **Type**: `string`
- **Default**: `undefined`

### variant

- **Description**: Variant. Defines the color of the toast. Can be one of: 'system', 'error', 'success', 'warning', 'undo', 'redo'.
- **Type**: `"error" | "notification" | "redo" | "success" | "system" | "undo" | "warning"`
- **Default**: `'system'`
```

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

### Input Chips Dependency Graph

Source: https://github.com/takenet/blip-ds/blob/main/src/components/input-chips/readme.md

This Mermaid graph illustrates the dependencies of the bds-input-chips component on other components within the design system.

```mermaid
graph TD;
  bds-input-chips --> bds-chip-clickable
  bds-input-chips --> bds-tooltip
  bds-input-chips --> bds-icon
  bds-input-chips --> bds-typo
  bds-input-chips --> bds-counter-text
  bds-chip-clickable --> bds-icon
  bds-chip-clickable --> bds-avatar
  bds-chip-clickable --> bds-typo
  bds-avatar --> bds-typo
  bds-avatar --> bds-icon
  bds-tooltip --> bds-typo
  bds-counter-text --> bds-typo
  style bds-input-chips fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Icon Component Properties

Source: https://github.com/takenet/blip-ds/blob/main/src/components/icon/readme.md

This section details the available properties for the Icon component, including their attributes, descriptions, types, and default values.

```APIDOC
## Icon Component Properties

### Description
Details the available properties for the Icon component, including their attributes, descriptions, types, and default values.

### Properties

#### `ariaLabel`
*   **Attribute**: `aria-label`
*   **Description**: Specifies the label to use for accessibility. Defaults to the icon name.
*   **Type**: `string`
*   **Default**: `undefined`

#### `color`
*   **Attribute**: `color`
*   **Description**: Specifies the color to use. The default is svg.
*   **Type**: `string`
*   **Default**: `undefined`

#### `dataTest`
*   **Attribute**: `data-test`
*   **Description**: Data test is the prop to specifically test the component action object.
*   **Type**: `string`
*   **Default**: `null`

#### `flipRtl`
*   **Attribute**: `flip-rtl`
*   **Description**: Specifies whether the icon should horizontally flip when `dir` is `"rtl"`.
*   **Type**: `boolean`
*   **Default**: `undefined`

#### `icon`
*   **Attribute**: `icon`
*   **Description**: A combination of both `name` and `src`. If a `src` url is detected it will set the `src` property. Otherwise it assumes it's a built-in named SVG and set the `name` property.
*   **Type**: `any`
*   **Default**: `undefined`

#### `lazy`
*   **Attribute**: `lazy`
*   **Description**: If enabled, ion-icon will be loaded lazily when it's visible in the viewport.
*   **Type**: `boolean`
*   **Default**: `false`

#### `name`
*   **Attribute**: `name`
*   **Description**: Specifies which icon to use from the built-in set of icons.
*   **Type**: `string`
*   **Default**: `undefined`

#### `size`
*   **Attribute**: `size`
*   **Description**: Icon size. Entered as one of the icon size design tokens. Can be one of: "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "brand".
*   **Type**: `"brand" | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "xxx-small"`
*   **Default**: `'medium'`

#### `src`
*   **Attribute**: `src`
*   **Description**: Specifies the exact `src` of an SVG file to use.
*   **Type**: `string`
*   **Default**: `undefined`

#### `theme`
*   **Attribute**: `theme`
*   **Description**: Specifies the theme to use outline or solid icons. Defaults to outline.
*   **Type**: `"outline" | "solid"`
*   **Default**: `'outline'`

#### `type`
*   **Attribute**: `type`
*   **Description**: Specifies the type of icon. If type is set to emoji, it will be able to set only emoji names on the name property.
*   **Type**: `"emoji" | "icon" | "logo"`
*   **Default**: `'icon'`
```

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

### Menu List Item Dependency Graph

Source: https://github.com/takenet/blip-ds/blob/main/src/components/menu-list-item/readme.md

Visualizes the dependencies of the bds-menu-list-item component on other components like bds-icon and bds-typo.

```mermaid
graph TD;
bds-menu-list-item --> bds-icon
bds-menu-list-item --> bds-typo
style bds-menu-list-item fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Expansion Panel Header Component Graph

Source: https://github.com/takenet/blip-ds/blob/main/src/components/expansion-panel/expansion-panel-header/readme.md

Visual representation of the Expansion Panel Header's dependency on the Blip Typography component.

```mermaid
graph TD;
  bds-expansion-panel-header --> bds-typo
  style bds-expansion-panel-header fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Avatar Group Dependencies

Source: https://github.com/takenet/blip-ds/blob/main/src/components/avatar-group/readme.md

Visualizes the dependency graph of the Avatar Group component, showing its relationship with other components like Avatar, Typo, and Icon.

```mermaid
graph TD;
  bds-avatar-group --> bds-avatar
  bds-avatar --> bds-typo
  bds-avatar --> bds-icon
  style bds-avatar-group fill:#f9f,stroke:#333,stroke-width:4px
```

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

### JavaScript to Create and Display a System Toast

Source: https://github.com/takenet/blip-ds/blob/main/src/view_components/toast/index.html

Adds an event listener to a button to create a new 'bds-toast' element. This toast is configured with system variant, a title, text, and a cancel button action. It uses a duration of 0, meaning it won't auto-dismiss.

```javascript
const botao = document.querySelector("#toast1");
botao.addEventListener("click", async () => {
  const newtoast = document.createElement('bds-toast');
  document.body.appendChild(newtoast);
  await newtoast.create({
    buttonText: 'cancelar',
    actionType: 'icon',
    buttonAction: 'close',
    toastText: 'ola alerta',
    toastTitle: 'titulo',
    variant: 'system',
    duration: 0
  });
});
```

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

### BDS Test Component Dependencies Graph

Source: https://github.com/takenet/blip-ds/blob/main/src/components/test-component/readme.md

This Mermaid graph visualizes the dependencies of the bds-test-component on other BDS components.

```mermaid
graph TD;
  bds-test-component --> bds-grid
  bds-test-component --> bds-typo
  bds-test-component --> bds-theme-provider
  bds-test-component --> bds-paper
  style bds-test-component fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Input Editable Dependency Graph

Source: https://github.com/takenet/blip-ds/blob/main/src/components/input-editable/readme.md

This Mermaid graph illustrates the dependencies of the bds-input-editable component on other Blip Design System components.

```mermaid
graph TD;
  bds-input-editable --> bds-icon
  bds-input-editable --> bds-typo
  style bds-input-editable fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Accordion Header Methods

Source: https://github.com/takenet/blip-ds/blob/main/src/components/accordion/readme.md

Provides methods to programmatically control the state of the accordion header, such as opening, closing, or toggling it.

```APIDOC
## Methods

### `close() => Promise<void>`

#### Returns

Type: `Promise<void>`

### `open() => Promise<void>`

#### Returns

Type: `Promise<void>`

### `toggle() => Promise<void>`

#### Returns

Type: `Promise<void>`
```

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

### Datepicker Dependency Graph

Source: https://github.com/takenet/blip-ds/blob/main/src/components/datepicker/readme.md

Visualizes the dependencies of the bds-datepicker component on other Blip DS components. This graph helps understand the component's architecture and integration points.

```mermaid
graph TD;
  bds-datepicker --> bds-input
  bds-datepicker --> bds-grid
  bds-datepicker --> bds-banner
  bds-datepicker --> bds-datepicker-single
  bds-datepicker --> bds-datepicker-period
  bds-datepicker --> bds-button
  bds-input --> bds-icon
  bds-input --> bds-typo
  bds-input --> bds-counter-text
  bds-counter-text --> bds-typo
  bds-banner --> bds-icon
  bds-banner --> bds-button-icon
  bds-button-icon --> bds-icon
  bds-datepicker-single --> bds-typo
  bds-datepicker-single --> bds-icon
  bds-datepicker-single --> bds-select-option
  bds-select-option --> bds-typo
  bds-select-option --> bds-checkbox
  bds-checkbox --> bds-icon
  bds-checkbox --> bds-typo
  bds-datepicker-period --> bds-typo
  bds-datepicker-period --> bds-icon
  bds-datepicker-period --> bds-select-option
  bds-button --> bds-loading-spinner
  bds-button --> bds-icon
  bds-button --> bds-typo
  style bds-datepicker fill:#f9f,stroke:#333,stroke-width:4px
```

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

### bds-table-row Component Dependencies

Source: https://github.com/takenet/blip-ds/blob/main/src/components/table/table-row/readme.md

Visualizes the dependency graph of the bds-table-row component, showing its relationship with bds-table-cell and bds-icon.

```mermaid
graph TD;
  bds-table-row --> bds-table-cell
  bds-table-row --> bds-icon
  bds-table-cell --> bds-typo
  style bds-table-row fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Typography Component Dependencies Graph

Source: https://github.com/takenet/blip-ds/blob/main/src/components/typo/readme.md

This Mermaid graph visualizes how the bds-typo component is utilized by numerous other components within the system. It helps understand the hierarchical relationships and dependencies.

```mermaid
graph TD;
  bds-accordion-header --> bds-typo
  bds-alert-body --> bds-typo
  bds-alert-header --> bds-typo
  bds-autocomplete --> bds-typo
  bds-avatar --> bds-typo
  bds-badge --> bds-typo
  bds-breadcrumb --> bds-typo
  bds-button --> bds-typo
  bds-card-color --> bds-typo
  bds-card-subtitle --> bds-typo
  bds-card-title --> bds-typo
  bds-checkbox --> bds-typo
  bds-chip-clickable --> bds-typo
  bds-chip-selected --> bds-typo
  bds-chip-tag --> bds-typo
  bds-counter-text --> bds-typo
  bds-data-table --> bds-typo
  bds-datepicker-period --> bds-typo
  bds-datepicker-single --> bds-typo
  bds-expansion-panel-header --> bds-typo
  bds-input --> bds-typo
  bds-input-chips --> bds-typo
  bds-input-editable --> bds-typo
  bds-input-password --> bds-typo
  bds-input-phone-number --> bds-typo
  bds-list-item --> bds-typo
  bds-menu-action --> bds-typo
  bds-menu-exibition --> bds-typo
  bds-menu-list-item --> bds-typo
  bds-menu-separation --> bds-typo
  bds-nav-tree --> bds-typo
  bds-nav-tree-item --> bds-typo
  bds-pagination --> bds-typo
  bds-progress-bar --> bds-typo
  bds-radio --> bds-typo
  bds-select --> bds-typo
  bds-select-chips --> bds-typo
  bds-select-option --> bds-typo
  bds-slider --> bds-typo
  bds-step --> bds-typo
  bds-tab --> bds-typo
  bds-tab-group --> bds-typo
  bds-table-cell --> bds-typo
  bds-table-th --> bds-typo
  bds-test-component --> bds-typo
  bds-toast --> bds-typo
  bds-tooltip --> bds-typo
  bds-upload --> bds-typo
  bds-warning --> bds-typo
  style bds-typo fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Select Component Properties

Source: https://github.com/takenet/blip-ds/blob/main/src/components/selects/select/readme.md

Properties that can be set on the Select component to configure its behavior and appearance.

```APIDOC
## Select Component Properties

### Description
Properties that can be set on the Select component to configure its behavior and appearance.

### Properties

- **successMessage** (string) - Optional - Indicated to pass an feedback to user.
- **value** (any) - Optional - The value of the select.
```

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

### Customizar Fonte Global CSS

Source: https://github.com/takenet/blip-ds/blob/main/src/pages/styles/config-styles.mdx

Indique a fonte desejada no CSS global do projeto para substituir a fonte padrão (Nunito Sans) do Design System.

```css
* {
  padding: 0;
  margin: 0;
}
```

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

### Accordion Methods

Source: https://github.com/takenet/blip-ds/blob/main/src/components/accordion/accordion.mdx

Lists the methods available for controlling the Accordion component's state.

```html
<table>
  <thead>
    <tr>
      <th>Método</th>
      <th>Descrição</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>toggle()</code></td>
      <td>Usado para alterar o estado do accordion, aberto ou fechado.</td>
    </tr>
    <tr>
      <td><code>open()</code></td>
      <td>Usado para abrir o accordion.</td>
    </tr>
    <tr>
      <td><code>close()</code></td>
      <td>Usado para fechar o accordion.</td>
    </tr>
    <tr>
      <td><code>notStart()</code></td>
      <td>Usado para iniciar o accordion fechado.</td>
    </tr>
  </tbody>
</table>
```

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

### Customizar Cores Globais CSS

Source: https://github.com/takenet/blip-ds/blob/main/src/pages/styles/config-styles.mdx

Substitua os valores das variáveis de cor padrão do Design System definindo-as em um arquivo CSS global.

```css
:root {
    --color-brand: indique a cor escolhida;
    --color-primary: indique a cor escolhida;
    --color-secondary: indique a cor escolhida;
}
```

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

### Referenciar Classes de Elementos

Source: https://github.com/takenet/blip-ds/blob/main/src/pages/styles/config-styles.mdx

Utilize as classes `text1`, `text2`, `text3` em elementos como `bds-typo` para aplicar estilos.

```html
<bds-grid>
  <bds-typo class="text1">Brand</bds-typo>
  <bds-typo class="text2">Secondary</bds-typo>
  <bds-typo class="text3">Success</bds-typo>
</bds-grid>
```

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

### Toast Events

Source: https://github.com/takenet/blip-ds/blob/main/src/components/toast/readme.md

Handle user interactions with the toast component.

```APIDOC
## Toast Events

### toastButtonClick

- **Description**: Event used to execute some action when the action button on the toast is clicked.
- **Type**: `CustomEvent<any>`
```

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

### Tab Group Dependencies Graph

Source: https://github.com/takenet/blip-ds/blob/main/src/components/tabs/readme.md

This Mermaid graph illustrates the dependencies of the bds-tab-group component on other bds components like bds-icon, bds-grid, bds-badge, bds-button-icon, and bds-typo. It also shows dependencies of sub-components.

```mermaid
graph TD;
  bds-tab-group --> bds-icon
  bds-tab-group --> bds-grid
  bds-tab-group --> bds-badge
  bds-tab-group --> bds-button-icon
  bds-tab-group --> bds-typo
  bds-badge --> bds-icon
  bds-badge --> bds-typo
  bds-button-icon --> bds-icon
  style bds-tab-group fill:#f9f,stroke:#333,stroke-width:4px
```

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

### visible()

Source: https://github.com/takenet/blip-ds/blob/main/src/components/tooltip/readme.md

Method for change the visibility of tooltip.

```APIDOC
## visible()

### Description
Method for change the visibility of tooltip.

### Method
`visible() => Promise<void>`

### Returns
Type: `Promise<void>`
```

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

### BDS Icon Component Dependency Graph

Source: https://github.com/takenet/blip-ds/blob/main/src/components/icon/readme.md

This Mermaid graph illustrates how various Blip Design System components depend on the BDS Icon component. It's useful for understanding the icon's central role in the system's architecture.

```mermaid
graph TD;
  bds-accordion-header --> bds-icon
  bds-alert-header --> bds-icon
  bds-autocomplete --> bds-icon
  bds-avatar --> bds-icon
  bds-badge --> bds-icon
  bds-banner --> bds-icon
  bds-breadcrumb --> bds-icon
  bds-button --> bds-icon
  bds-button-icon --> bds-icon
  bds-checkbox --> bds-icon
  bds-chip --> bds-icon
  bds-chip-clickable --> bds-icon
  bds-chip-selected --> bds-icon
  bds-chip-tag --> bds-icon
  bds-data-table --> bds-icon
  bds-datepicker-period --> bds-icon
  bds-datepicker-single --> bds-icon
  bds-input --> bds-icon
  bds-input-chips --> bds-icon
  bds-input-editable --> bds-icon
  bds-input-password --> bds-icon
  bds-input-phone-number --> bds-icon
  bds-list-item --> bds-icon
  bds-menu-action --> bds-icon
  bds-menu-list-item --> bds-icon
  bds-modal --> bds-icon
  bds-modal-close-button --> bds-icon
  bds-nav-tree --> bds-icon
  bds-nav-tree-item --> bds-icon
  bds-select --> bds-icon
  bds-select-chips --> bds-icon
  bds-step --> bds-icon
  bds-tab-group --> bds-icon
  bds-table-row --> bds-icon
  bds-table-th --> bds-icon
  bds-toast --> bds-icon
  bds-upload --> bds-icon
  bds-warning --> bds-icon
  style bds-icon fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Tab Component Properties and Events

Source: https://github.com/takenet/blip-ds/blob/main/src/components/tabs/tab (depreciated)/readme.md

This snippet details the configurable properties and emitted events for the Tab component.

```APIDOC
## Tab Component

### Description

Provides a tabbed interface for organizing content. Users can switch between different tab panels.

### Properties

#### `align` (string)

- **align** (string) - Optional - Specifies the alignment of the tabs. Can be one of: "center", "left", or "right". Defaults to 'center'.

### Events

#### `bdsTabInit`

- **Description**: Fired when the tab component is initialized.
- **Type**: `CustomEvent<any>`

#### `scrollButtonClick`

- **Description**: Fired when a scroll button is clicked.
- **Type**: `CustomEvent<Overflow>`

### Dependencies

- **bds-button-icon**: This component depends on the `bds-button-icon` component.
```

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

### Card Subtitle Dependencies

Source: https://github.com/takenet/blip-ds/blob/main/src/components/card/card-subtitle/readme.md

Illustrates the dependency of the bds-card-subtitle component on the bds-typo component for text styling.

```mermaid
graph TD;
  bds-card-subtitle --> bds-typo
  style bds-card-subtitle fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Banner Methods

Source: https://github.com/takenet/blip-ds/blob/main/src/components/banner/readme.md

This section describes the available methods for the BDS Banner component.

```APIDOC
## Methods

### `toggle() => Promise<void>`

#### Returns

Type: `Promise<void>`
```

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

### setFocus()

Source: https://github.com/takenet/blip-ds/blob/main/src/components/input-chips/readme.md

Sets focus to the input chips component. This operation is asynchronous and returns a promise that resolves when focus has been successfully applied.

```APIDOC
## setFocus()

### Description
Sets focus to the input chips component.

### Method
`setFocus`

### Returns
Type: `Promise<void>`
```

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

### Rich Text Editor Dependencies

Source: https://github.com/takenet/blip-ds/blob/main/src/components/rict-text/readme.md

The bds-rich-text component relies on bds-grid, bds-tooltip, bds-button, bds-dropdown, and bds-input. Ensure these dependencies are available in your project.

```mermaid
graph TD;
  bds-rich-text --> bds-grid
  bds-rich-text --> bds-tooltip
  bds-rich-text --> bds-button
  bds-rich-text --> bds-dropdown
  bds-rich-text --> bds-input
  bds-tooltip --> bds-typo
  bds-button --> bds-loading-spinner
  bds-button --> bds-icon
  bds-button --> bds-typo
  bds-input --> bds-icon
  bds-input --> bds-typo
  bds-input --> bds-counter-text
  bds-counter-text --> bds-typo
  style bds-rich-text fill:#f9f,stroke:#333,stroke-width:4px
```

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

### bds-counter-text Component Dependency Graph

Source: https://github.com/takenet/blip-ds/blob/main/src/components/counter-text/readme.md

This Mermaid graph illustrates the dependencies of the bds-counter-text component, showing its relationship with bds-typo and the components that utilize it (bds-input, bds-input-chips).

```mermaid
graph TD;
  bds-counter-text --> bds-typo
  bds-input --> bds-counter-text
  bds-input-chips --> bds-counter-text
  style bds-counter-text fill:#f9f,stroke:#333,stroke-width:4px
```

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

### bds-table-th Component Dependency Graph

Source: https://github.com/takenet/blip-ds/blob/main/src/components/table/table-header-cell/readme.md

Visualizes the dependencies of the bds-table-th component on bds-typo and bds-icon. This is automatically generated.

```mermaid
graph TD;
  bds-table-th --> bds-typo
  bds-table-th --> bds-icon
  style bds-table-th fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Dropdown Methods

Source: https://github.com/takenet/blip-ds/blob/main/src/components/dropdown/readme.md

These methods allow programmatic control over the bds-dropdown component's state.

```APIDOC
## Dropdown Methods

### Description
Methods available to control the bds-dropdown component programmatically.

### Methods
- **setClose()** - Closes the dropdown. Returns a Promise<void>.
- **setOpen()** - Opens the dropdown. Returns a Promise<void>.
- **toggle()** - Toggles the open/closed state of the dropdown. Returns a Promise<void>.
```

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

### toggle()

Source: https://github.com/takenet/blip-ds/blob/main/src/components/modal/readme.md

A method to programmatically toggle the open/closed state of the modal.

```APIDOC
## toggle()

### Description

Can be used outside to open/close the modal.

### Method

`toggle() => Promise<void>`

### Returns

Type: `Promise<void>`
```
Tokens:
Raw