{
  "version": 1.1,
  "tags": [
    {
      "name": "cps-accordion",
      "description": "_Accordion_ é utilizado para expandir e contrair conteúdo de forma agrupada e organizada.\n\n\n---\n\n\n\n\n### **Events:**\n - **cps-show** - Emitido quando o _accordion_ de opções começa a ser exibida.\n- **cps-after-show** - Emitido após o _accordion_ de opções ser exibida e todas as animações terem sido concluídas.\n- **cps-hide** - Emitido quando o _accordion_ de opções começa a ser ocultada.\n- **cps-after-hide** - Emitido após o _accordion_ de opções ser ocultada e todas as animações terem sido concluídas.\n\n### **Methods:**\n - **show()** - Exibe o conteúdo associado a este _accordion_.\n- **hide()** - Oculta o conteúdo associado a este _accordion_.\n- **click()** - Simula um _click_ no cabeçalho.\n- **focus(options: _FocusOptions_)** - Coloca o foco no cabeçalho.\n- **blur()** - Remove o foco do cabeçalho.\n\n### **Slots:**\n - _default_ - O conteúdo interno do _accordion_.\n- **icon** - Um ícone opcional antes do título do _accordion_.\n\n### **CSS Parts:**\n - **base** - O elemento principal propriamente dito (um `<div>`).\n- **header** - O cabeçalho do _accordion_ (um `<button>`).\n- **content** - O painel de conteúdo interno do _accordion_ (um `<div>`).",
      "attributes": [
        {
          "name": "open",
          "description": "Indica se o _accordion_ está aberto, ou seja, se o seu conteúdo interno está sendo exibido. Você pode alternar este atributo, manualmente ou reativamente. Opcionalmente, pode utilizar os métodos `show()` e `hide()` se preferir uma abordagem imperativa, e este atributo refletirá o estado aberto do _accordion_ em tempo real.",
          "values": []
        },
        {
          "name": "subtitle",
          "description": "Um subtítulo opcional para o cabeçalho do _accordion_.",
          "values": []
        },
        {
          "name": "title",
          "description": "O título obrigatório do cabeçalho do _accordion_.",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "cps-accordion-group",
      "description": "Grupos de _accordions_ permitem automatizar expansão/contração exclusiva de múltiplos [_accordions_](/componentes/accordion).\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - O conteúdo do grupo, necessariamente um ou mais de `<cps-accordion>`.\n\n### **CSS Properties:**\n - **--gap** - O espaçamento entre _accordions_ dentro do grupo. Padrão: `var(--cps-spacing-3)`. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - O elemento principal propriamente dito (um `<div>`).",
      "attributes": [
        {
          "name": "multiple",
          "description": "Permite que múltiplos _accordions_ sejam abertos simultaneamente.",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "cps-avatar",
      "description": "Avatares são usados para iconograficamente representar uma pessoa ou objeto.\n\n\n---\n\n\n\n\n### **Slots:**\n - **badge** - O distintivo informativo atrelado a este avatar. Recomenda-se utilizar `<cps-badge>` como conteúdo.\n- **icon** - O ícone a ser usado quando nenhuma imagem ou iniciais estão presentes. Recomenda-se utilizar `<cps-icon>` como conteúdo.\n\n### **CSS Properties:**\n - **--size** - A medida de tamanho do avatar. Utilizada tanto como `width` quanto `height`, corresponde a `2em` quando o atributo `size` é igual a `inherit`. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - O elemento principal propriamente dito (um `<div>`).\n- **icon** - O elemento que embrulha a renderização do _slot_ `icon`.\n- **initials** - O elemento que embrulha a renderização das iniciais.\n- **image** - A imagem do avatar (um `<img>`). Exibido apenas quando o atributo `image` está presente.",
      "attributes": [
        {
          "name": "src",
          "description": "O caminho da imagem principal a ser utilizada como avatar.",
          "values": []
        },
        {
          "name": "srcset",
          "description": "O atributo `srcset` opcional do elemento `<img>`, para diferentes resoluções ou tamanhos de imagem.",
          "values": []
        },
        {
          "name": "label",
          "description": "Um rótulo que descreve a imagem, comumente o nome da entidade representada pelo avatar (por exemplo,\no nome de uma pessoa). Também é utilizado para geração de iniciais, caso `initials` seja `auto`.\nMesmo que não seja, considere como um atributo obrigatório, para acessibilidade apropriada do avatar.",
          "values": []
        },
        {
          "name": "initials",
          "description": "Quando vazio (o padrão), nenhuma inicial é exibida, e o _slot_ `icon` é utilizado.\nQuando `auto`, as iniciais são geradas automaticamente a partir do `label`.\nCaso contrário, as iniciais são definidas explicitamente neste atributo.",
          "values": [{ "name": "auto" }]
        },
        {
          "name": "loading",
          "description": "O atributo `loading` do elemento `<img>` que exibe a imagem do avatar.",
          "values": [{ "name": "eager" }, { "name": "lazy" }]
        },
        {
          "name": "shape",
          "description": "Define a forma do avatar, circular por padrão.",
          "values": [
            { "name": "circle" },
            { "name": "square" },
            { "name": "rounded" }
          ]
        },
        {
          "name": "color",
          "description": "Quando `auto` (o padrão), a cor de fundo do avatar é gerada automaticamente a partir do `label`.\nQuando `none`, nenhuma cor de fundo é exibida (usando então um cinza neutro intermediário).\nCaso contrário, a cor de fundo é definida explicitamente neste atributo.",
          "values": [{ "name": "auto" }, { "name": "none" }]
        },
        {
          "name": "no-tooltip",
          "description": "Se verdadeiro, desativa completamente a exibição de dica de ferramenta com o conteúdo do `label`.",
          "values": []
        },
        {
          "name": "size",
          "description": "O tamanho do avatar. Por padrão, o tamanho é calculado como o dobro do tamanho de fonte do elemento pai.",
          "values": [
            { "name": "" },
            { "name": "inherit" },
            { "name": "stamp" },
            { "name": "caption" },
            { "name": "label" },
            { "name": "body" },
            { "name": "body-emphasized" },
            { "name": "body-strong" },
            { "name": "body-large" },
            { "name": "subtitle" },
            { "name": "title" },
            { "name": "heading" },
            { "name": "display" }
          ]
        }
      ],
      "references": []
    },
    {
      "name": "cps-background",
      "description": "Componente utilizado para aplicar plano de fundo padrão à página.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - O conteúdo interno do plano de fundo.\n\n### **CSS Properties:**\n - **--background-image** - Uma imagem de fundo alternativa a ser exibida. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - O elemento principal propriamente dito (um `<div>`).\n- **content** - O conteúdo interno do plano de fundo.\n- **image** - O elemento que renderiza a imagem de fundo.",
      "attributes": [
        {
          "name": "variant",
          "description": "O tipo de variação visual do plano de fundo.",
          "values": [
            { "name": "base" },
            { "name": "acrylic" },
            { "name": "blurred" }
          ]
        },
        {
          "name": "centered",
          "description": "Automaticamente centraliza o conteúdo do plano de fundo.",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "cps-badge",
      "description": "Distintivos (_badges_) são usados para chamar atenção de forma sutil\ne não intrusiva, comumente para exibição de notificações de _status_,\nindicação de novo conteúdo ou contagens.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - O conteúdo do _badge_.\n\n### **CSS Parts:**\n - **base** - O elemento principal propriamente dito.",
      "attributes": [
        {
          "name": "variant",
          "description": "A variante temática do _badge_.",
          "values": [
            { "name": "neutral" },
            { "name": "informative" },
            { "name": "warning" },
            { "name": "critical" },
            { "name": "success" }
          ]
        },
        {
          "name": "icon",
          "description": "Exibe ícone automático de acordo com a variante, ao invés de permitir conteúdo arbitrário no _badge_.",
          "values": []
        },
        {
          "name": "square",
          "description": "Força o _badge_ a um formato retangular, sem arredondamento de bordas.",
          "values": []
        },
        {
          "name": "pulse",
          "description": "Efeito pulsante para chamar atenção extra.",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "cps-button",
      "description": "Botões representam ações que estão disponíveis ao usuário.\n\n\n---\n\n\n\n\n### **Events:**\n - **cps-blur** - Emitido quando o botão perde o foco.\n- **cps-focus** - Emitido quando o botão obtém o foco.\n- **cps-invalid** - Emitido quando o elemento de formulário foi checado sobre sua validade, e suas condições não foram satisfeitas.\n\n### **Methods:**\n - **click()** - Simula um _click_ no botão.\n- **focus(options: _FocusOptions_)** - Coloca o foco no botão.\n- **blur()** - Remove o foco do botão.\n- **checkValidity()** - Verifica a validade em um formulário, sem exibir uma mensagem de validação. Retorna `true` quando válido, e `false` quando inválido.\n- **getForm(): _HTMLFormElement | null_** - Obtém o formulário associado com este componente, se algum estiver.\n- **reportValidity()** - Verifica a validade em um formulário, e exibe as mensagem de validação do navegador caso o resultado seja inválido.\n- **setCustomValidity(message: _string_)** - Define uma mensagem de validação personalizada. Passar uma `string` vazia como argumento restaura a validade do elemento.\n\n### **Slots:**\n - _default_ - O texto interno do botão.\n- **prefix** - Um ícone ou elemento similar antes do conteúdo principal.\n- **suffix** - Um ícone ou elemento similar após o conteúdo principal.\n\n### **CSS Parts:**\n - **base** - O elemento principal propriamente dito (que pode ser `<button>` ou `<a>`).\n- **prefix** - O elemento que embrulha a renderização do _slot_ `prefix`.\n- **content** - O elemento que embrulha o conteúdo principal, normalmente o _label_ do botão.\n- **suffix** - O elemento que embrulha a renderização do _slot_ `suffix`.\n- **caret** - O elemento de sinalização de menu, normalmente um `<cps-icon>` com o ícone de circunflexo para baixo.",
      "attributes": [
        { "name": "title", "values": [] },
        {
          "name": "variant",
          "description": "A variante visual para apresentação do botão.",
          "values": [
            { "name": "default" },
            { "name": "accent" },
            { "name": "transparent" }
          ]
        },
        {
          "name": "size",
          "description": "O tamanho do botão.",
          "values": [
            { "name": "small" },
            { "name": "medium" },
            { "name": "large" }
          ]
        },
        {
          "name": "caret",
          "description": "Apresenta um sinalizador de menu ao final do botão. Usado para indicar que o botão dispara um menu de contexto ou algum comportamento similar.",
          "values": []
        },
        {
          "name": "disabled",
          "description": "Desabilita o botão.",
          "values": []
        },
        {
          "name": "waiting",
          "description": "Apresenta o botão em estado de carregamento.",
          "values": []
        },
        {
          "name": "rounded",
          "description": "Arredondamento dos cantos do botão, com o padrão sendo bordas arredondas em `4px`.",
          "values": [
            { "name": "default" },
            { "name": "corner" },
            { "name": "full" }
          ]
        },
        {
          "name": "type",
          "description": "O tipo do botão. Observe que o valor padrão é `button` ao invés de `submit`, o oposto de como um\n`<button>` nativo se comporta. Quando `submit`, o botão auto-submete o `<form>` em que estiver contido.",
          "values": [
            { "name": "button" },
            { "name": "submit" },
            { "name": "reset" }
          ]
        },
        {
          "name": "name",
          "description": "O nome do botão, submetido em par _name_/_value_ com os dados do formulário,\nsomente se este botão for o submissor. Ignorado quando `href` está presente.",
          "values": []
        },
        {
          "name": "value",
          "description": "O valor do botão, submetido em par _name_/_value_ com os dados do formulário,\nsomente se este botão for o submissor. Ignorado quando `href` está presente.",
          "values": []
        },
        {
          "name": "href",
          "description": "Quando definido, o botão será renderizado como um elemento `<a>` com este `href` definido, ao invés de um elemento `<button>`.",
          "values": []
        },
        {
          "name": "target",
          "description": "Informa o navegador qual o alvo de abertura do _link_. Usado somente se `href` estiver presente.",
          "values": [
            { "name": "_blank" },
            { "name": "_parent" },
            { "name": "_self" },
            { "name": "_top" }
          ]
        },
        {
          "name": "rel",
          "description": "Quando usando `href`, este atributo irá mapear o valor do atributo `rel` subjacente com o valor\npadrão `noreferrer noopener`, por questões de segurança. No entanto, se você estiver usando `target`\npara apontar para uma guia/janela específica, isso impedirá que ele funcione corretamente.\nPara este cenário específico, defina como vazio ou altere o valor de `rel` para outro valor.",
          "values": []
        },
        {
          "name": "download",
          "description": "Informa o navegador para baixar o arquivo vinculado, com o nome definido aqui. Usado somente se `href` estiver presente.",
          "values": []
        },
        {
          "name": "form",
          "description": "O formulário \"dono\" deste botão. Se não informado, o formulário mais próximo na hierarquia\naté este botão será utilizado. Se informado, o valor deve ser um `id` único de um formulário\nexistente no documento.",
          "values": []
        },
        {
          "name": "formaction",
          "description": "Usado para sobrescrever o atributo `action` do formulário \"dono\" deste botão.",
          "values": []
        },
        {
          "name": "formenctype",
          "description": "Usado para sobrescrever o atributo `enctype` do formulário \"dono\" deste botão.",
          "values": [
            { "name": "application/x-www-form-urlencoded" },
            { "name": "multipart/form-data" },
            { "name": "text/plain" }
          ]
        },
        {
          "name": "formmethod",
          "description": "Usado para sobrescrever o atributo `method` do formulário \"dono\" deste botão.",
          "values": [{ "name": "post" }, { "name": "get" }]
        },
        {
          "name": "formnovalidate",
          "description": "Usado para sobrescrever o atributo `novalidate` do formulário \"dono\" deste botão.",
          "values": []
        },
        {
          "name": "formtarget",
          "description": "Usado para sobrescrever o atributo `target` do formulário \"dono\" deste botão.",
          "values": [
            { "name": "_self" },
            { "name": "_blank" },
            { "name": "_parent" },
            { "name": "_top" }
          ]
        }
      ],
      "references": []
    },
    {
      "name": "cps-button-group",
      "description": "Grupos de botões podem ser usados para agrupar botões relacionados em seções.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - Um ou mais elementos `<cps-button>` a exibir dentro do grupo de botões.\n\n### **CSS Parts:**\n - **base** - O elemento base que embrulha o grupo.",
      "attributes": [
        {
          "name": "label",
          "description": "Um rótulo descritivo para o grupo de botões. Este não será exibido na interface, mas será anunciado\npor dispositivos de acessibilidade durante a interação com o controle, sendo fortemente recomendado.",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "cps-calendar",
      "description": "Calendários permitem aos usuários selecionar datas.\n\n\n---\n\n\n\n\n### **Events:**\n - **cps-change** - Emitido quando o valor selecionado muda ou quando o mês/ano visualizado é alterado.\n\n### **Methods:**\n - **previous()** - Navega para o mês, ano ou década anterior, dependendo da visualização atual.\n- **next()** - Navega para o próximo mês, ano ou década, dependendo da visualização atual.\n- **clear()** - Limpa a data selecionada no calendário.\n- **today()** - Define a data atual como a data selecionada no calendário.\n\n### **CSS Parts:**\n - **base** - O elemento base do calendário.\n- **header** - O cabeçalho do calendário.\n- **title** - O título do calendário.\n- **navigation** - O container dos botões de navegação.\n- **previous-button** - O botão para navegar para o anterior.\n- **next-button** - O botão para navegar para o próximo.\n- **grid** - O container da grade de células (dias, meses ou anos).\n- **weekday** - Uma célula de dia da semana.\n- **cell** - Uma célula do calendário.\n- **cell--today** - Aplicado na célula correspondente à data atual.\n- **cell--selected** - Aplicado na célula selecionada.\n- **cell--outside** - Aplicado em células fora do intervalo principal.\n- **cell--disabled** - Aplicado em células desabilitadas.\n- **footer** - O rodapé do calendário.\n- **clear-link** - O botão estilizado como link para limpar a data selecionada.\n- **today-link** - O botão estilizado como link para selecionar a data atual.",
      "attributes": [
        {
          "name": "value",
          "description": "A data selecionada no formato ISO 8601 (ex: \"2025-07-28\").\nQuando não definida, nenhuma data estará selecionada.",
          "values": []
        },
        {
          "name": "min",
          "description": "A data mínima selecionável no formato ISO 8601 (ex: \"2025-07-28\").\nDatas anteriores serão desabilitadas.",
          "values": []
        },
        {
          "name": "max",
          "description": "A data máxima selecionável no formato ISO 8601 (ex: \"2025-07-28\").\nDatas posteriores serão desabilitadas.",
          "values": []
        },
        {
          "name": "hide-footer",
          "description": "Determina se o rodapé do calendário deve ser ocultado.",
          "values": []
        },
        {
          "name": "hide-outside",
          "description": "Determina se células fora do intervalo principal (dias fora do mês ou anos fora da década) devem ser ocultadas.\nPor padrão, células fora do intervalo principal são exibidas.",
          "values": []
        },
        {
          "name": "first-day-of-week",
          "description": "Primeiro dia da semana no calendário, podendo ser: `'sunday'`, `'monday'`, `'tuesday'`, `'wednesday'`, `'thursday'`, `'friday'`, `'saturday'`.\nCaso não informado, o primeiro dia da semana será determinado automaticamente com base no idioma do usuário.",
          "values": [
            { "name": "sunday" },
            { "name": "monday" },
            { "name": "tuesday" },
            { "name": "wednesday" },
            { "name": "thursday" },
            { "name": "friday" },
            { "name": "saturday" }
          ]
        },
        {
          "name": "disable-weekdays",
          "description": "Dias da semana desabilitados no calendário, no formato `'sunday'`, `'monday'`, `'tuesday'`, `'wednesday'`, `'thursday'`, `'friday'`, `'saturday'`.\nAceita um único dia, ou uma lista de dias da semana separados por vírgula.",
          "values": []
        },
        {
          "name": "disable-dates",
          "description": "Datas específicas desabilitadas no calendário.\nAceita uma ou mais datas no formato ISO 8601 (YYYY-MM-DD), separadas por vírgula.\nExemplo: `disable-dates=\"2023-03-13,2023-03-14,2023-03-24\"` desabilita as datas 13, 14 e 24 de março de 2023.",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "cps-card",
      "description": "_Cards_ são utilizados para exibir informações de forma estruturada e destacada.\n\n\n---\n\n\n\n\n### **Methods:**\n - **click(event: _MouseEvent_)** - Simula um _click_ no elemento.\n- **focus(options: _FocusOptions_)** - Coloca o foco no elemento.\n- **blur()** - Remove o foco do elemento.\n\n### **CSS Properties:**\n - **--padding** - O espaçamento interno do _card_. Padrão: `var(--cps-spacing-6)`. _(default: undefined)_\n- **--border-radius** - O nível de arredondamento da borda do _card_. Padrão: `var(--cps-border-radius-large)`. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - O elemento principal propriamente dito (um `<div>`).\n- **content** - O conteúdo principal do _card_.\n- **header** - O cabeçalho (opcional) a ser exibido antes do conteúdo principal do _card_.\n- **footer** - O rodapé (opcional) a ser exibido após o conteúdo principal do _card_.",
      "attributes": [
        {
          "name": "elevation",
          "description": "Opcionalmente sobrescreve a elevação usada para projeção de sombra, mudando a aparência padrão definida pela variante.",
          "values": [
            { "name": "none" },
            { "name": "sm" },
            { "name": "md" },
            { "name": "lg" },
            { "name": "xl" },
            { "name": "2xl" }
          ]
        },
        {
          "name": "rounded",
          "description": "Define o padrão de arredondamento dos cantos do _card_.",
          "values": [
            { "name": "" },
            { "name": "none" },
            { "name": "full" },
            { "name": "start" },
            { "name": "end" },
            { "name": "top" },
            { "name": "bottom" },
            { "name": "top-start" },
            { "name": "top-end" },
            { "name": "bottom-start" },
            { "name": "bottom-end" }
          ]
        },
        {
          "name": "variant",
          "description": "O tipo de variação visual do _card_.",
          "values": [
            { "name": "primary" },
            { "name": "secondary" },
            { "name": "tertiary" },
            { "name": "on-blurred" }
          ]
        },
        {
          "name": "actionable",
          "description": "Indica se o _card_ é acionável pelo usuário (podendo ser interagido,\npor exemplo, com _mouse_ e teclado).",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "cps-checkbox",
      "description": "Caixas de seleção (_checkboxes_) permitem alternar entre estados marcado ou desmarcado.\n\n\n---\n\n\n\n\n### **Events:**\n - **cps-blur** - Emitido quando o controle perde o foco.\n- **cps-change** - Emitido quando a alteração do valor do controle é confirmada pelo usuário.\n- **cps-focus** - Emitido quando o controle obtém o foco.\n- **cps-input** - Emitido quando o controle recebe entrada de dados.\n- **cps-invalid** - Emitido quando o elemento de formulário foi checado sobre sua validade, e suas condições não foram satisfeitas.\n\n### **Methods:**\n - **click()** - Simula um _click_ no campo.\n- **focus(options: _FocusOptions_)** - Coloca o foco no campo.\n- **blur()** - Remove o foco do campo.\n- **checkValidity()** - Verifica a validade em um formulário, sem exibir uma mensagem de validação. Retorna `true` quando válido, e `false` quando inválido.\n- **getForm(): _HTMLFormElement | null_** - Obtém o formulário associado com este componente, se algum estiver.\n- **reportValidity()** - Verifica a validade em um formulário, e exibe as mensagem de validação do navegador caso o resultado seja inválido.\n- **setCustomValidity(message: _string_)** - Define uma mensagem de validação personalizada. Passar uma `string` vazia como argumento restaura a validade do elemento.\n\n### **Slots:**\n - _default_ - Rótulo informativo do campo. Caso a injeção de conteúdos complexos não seja necessária, alternativamente utilize apenas o atributo `label`.\n\n### **CSS Parts:**\n - **base** - O elemento base que embrulha o `<input>` e eventuais elementos de apoio para sua renderização.\n- **control** - O elemento quadrado que embrulha o estado checagem do campo.\n- **control--checked** - Obtém para estilização o elemento `control`, somente quando o campo está marcado.\n- **control--indeterminate** - Obtém para estilização o elemento `control`, somente quando o campo está em estado indeterminado.\n- **checked-icon** - O ícone de estado checado, um elemento `<cps-icon>`.\n- **indeterminate-icon** - O ícone de estado indeterminado, um elemento `<cps-icon>`.\n- **label** - O elemento que embrulha o rótulo do campo, um elemento `<label>`.",
      "attributes": [
        { "name": "title", "values": [] },
        {
          "name": "id",
          "description": "O identificador único do campo, usado como estratégia de vinculação ao rótulo e/ou texto de apoio anexado.\nSe não for fornecido, um UUID é gerado automaticamente.",
          "values": []
        },
        {
          "name": "name",
          "description": "O nome do campo, submetido em par _name_/_value_ com os dados do formulário.",
          "values": []
        },
        {
          "name": "value",
          "description": "O valor do campo, submetido em par _name_/_value_ com os dados do formulário.",
          "values": []
        },
        {
          "name": "label",
          "description": "O rótulo do campo. Se você precisar injetar HTML, use o _slot_ `label` em vez disso.",
          "values": []
        },
        {
          "name": "size",
          "description": "O tamanho do campo.",
          "values": [
            { "name": "small" },
            { "name": "medium" },
            { "name": "large" }
          ]
        },
        {
          "name": "disabled",
          "description": "Desabilita o campo.",
          "values": []
        },
        {
          "name": "checked",
          "description": "Determina o estado de checagem do campo, ou seja, quando presente, o campo encontra-se marcado.",
          "values": []
        },
        {
          "name": "indeterminate",
          "description": "Apresenta o campo em estado indeterminado.\nIsso é geralmente aplicado a caixas de seleção que representam o cabeçalho\nde um comportamento \"Selecionar todos/nenhum\", quando as caixas de seleção\nassociadas podem ter mistura de estados marcados e desmarcados.",
          "values": []
        },
        {
          "name": "form",
          "description": "O formulário \"dono\" deste controle de formulário. Se não informado, o formulário mais próximo na hierarquia\naté este elemento será utilizado. Se informado, o valor deve ser um `id` único de um formulário\nexistente no documento.",
          "values": []
        },
        {
          "name": "required",
          "description": "Torna o campo como sendo de preenchimento obrigatório.",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "cps-chip",
      "description": "_Chips_ são usados como etiquetas para organizar coisas ou para indicar uma seleção.\n\n\n---\n\n\n\n\n### **Events:**\n - **cps-remove** - Emitido quando o botão de remoção do _chip_ `removable` é acionado.\n\n### **Slots:**\n - _default_ - O conteúdo do _chip_.\n\n### **CSS Parts:**\n - **base** - O elemento principal propriamente dito (um `<span>`).\n- **content** - O `<slot>` de conteúdo interno do _chip_.\n- **remove-button** - O botão de remoção do _chip_ (um `<cps-icon-button>`).\n- **remove-button__base** - A parte `base` re-exportada do botão de remoção.\n- **remove-button__icon** - A parte `icon` re-exportada do botão de remoção.",
      "attributes": [
        {
          "name": "variant",
          "description": "A variante visual para apresentação do _chip_.",
          "values": [
            { "name": "neutral" },
            { "name": "informative" },
            { "name": "warning" },
            { "name": "critical" },
            { "name": "success" }
          ]
        },
        {
          "name": "size",
          "description": "O tamanho do _chip_.",
          "values": [
            { "name": "small" },
            { "name": "medium" },
            { "name": "large" }
          ]
        },
        {
          "name": "removable",
          "description": "Marca o _chip_ como removível, exibindo-se um botão de remoção junto ao conteúdo interno.",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "cps-dialog",
      "description": "Caixas de diálogo, às vezes chamadas de \"modais\", aparecem acima de outros elementos na página e requerem atenção imediata do usuário.\n\n\n---\n\n\n\n\n### **Events:**\n - **cps-show** - Emitido quando a caixa de diálogo começa a ser aberta.\n- **cps-after-show** - Emitido após a caixa de diálogo ser aberta e todas as animações serem concluídas.\n- **cps-close** - Emitido quando a caixa de diálogo começa a ser fechada.\n- **cps-after-close** - Emitido após a caixa de diálogo ser fechada e todas as animações serem concluídas.\n- **cps-initial-focus** - Emitido quando a caixa de diálogo é aberta e está pronta para receber foco. Chamar `event.preventDefault()` impedirá o foco e permitirá que você o defina em um elemento diferente, como um campo de entrada.\n- **cps-request-close** - Emitido quando o usuário tenta fechar a caixa de diálogo clicando no botão de fechar, clicando na sobreposição ou pressionando Escape. Chamar `event.preventDefault()` manterá a caixa de diálogo aberta. Evite usar isso a menos que fechar a caixa de diálogo resulte em comportamento destrutivo, como perda de dados.\n\n### **Methods:**\n - **show()** - Mostra a caixa de diálogo.\n- **close(returnValue: _string | boolean_)** - Fecha a caixa de diálogo, opcionalmente definindo um valor de retorno.\n\n### **Slots:**\n - _default_ - O conteúdo principal da caixa de diálogo.\n- **label** - O rótulo da caixa de diálogo. Alternativamente, você pode usar o atributo `label`.\n- **header-actions** - Ações opcionais para adicionar ao cabeçalho. Funciona melhor com `<cps-icon-button>`.\n- **footer** - O rodapé da caixa de diálogo, geralmente um ou mais botões representando várias opções.\n\n### **CSS Properties:**\n - **--width** - A largura preferida da caixa de diálogo. Observe que, ainda assim, a caixa de diálogo diminuirá para se acomodar em telas menores. _(default: undefined)_\n- **--header-spacing** - A quantidade de preenchimento a ser usada para o cabeçalho. _(default: undefined)_\n- **--body-spacing** - A quantidade de preenchimento a ser usada para o corpo. _(default: undefined)_\n- **--footer-spacing** - A quantidade de preenchimento a ser usada para o rodapé. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - O elemento base que envolve o componente.\n- **backdrop** - A sobreposição que cobre a tela por trás da caixa de diálogo.\n- **panel** - O painel da caixa de diálogo (onde a caixa de diálogo e seu conteúdo são renderizados).\n- **header** - O cabeçalho da caixa de diálogo. Este elemento envolve o título e ações do cabeçalho.\n- **header-actions** - Contêiner para ações opcionais do cabeçalho.\n- **title** - O título da caixa de diálogo.\n- **close-button** - O botão de fechar, um `<cps-icon-button>`.\n- **close-button__base** - A parte `base` exportada do botão de fechar.\n- **body** - O corpo da caixa de diálogo.\n- **footer** - O rodapé da caixa de diálogo.",
      "attributes": [
        {
          "name": "open",
          "description": "Indica se a caixa de diálogo está aberta ou não. Você pode alternar este atributo para mostrar e ocultar a caixa de diálogo, ou pode\nusar os métodos `show()` e `hide()` e este atributo refletirá o estado aberto da caixa de diálogo.",
          "values": []
        },
        {
          "name": "closable",
          "description": "Habilita a exibição de um botão de fechar no cabeçalho, como uma forma ainda mais evidente ao usuário de que a caixa de diálogo pode ser fechada.\nNão possui efeito caso não haja cabeçalho, ou seja, se não houver valor no atributo `label` e não houver conteúdo no _slot_ `label`.",
          "values": []
        },
        {
          "name": "label",
          "description": "O rótulo da caixa de diálogo exibido no cabeçalho. Você deve sempre incluir um rótulo relevante para\nacessibilidade adequada. Se você precisar exibir HTML, use o slot `label` em vez disso.",
          "values": []
        },
        {
          "name": "aria-label",
          "description": "O rótulo de acessibilidade para o diálogo. Se não for especificado, o atributo `label` será usado.\nÉ altamente recomendável definir este atributo, caso não haja um valor definido para o atributo `label`.",
          "values": []
        },
        {
          "name": "returnValue",
          "description": "O valor de retorno do diálogo, similar ao `returnValue` de um elemento de diálogo nativo.\nEste valor é definido quando o diálogo é fechado e pode ser usado para determinar qual ação\nfoi tomada pelo usuário.",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "cps-drawer",
      "description": "Gavetas de navegação (_drawers_) deslizam a partir de uma borda da tela para exibir informações ou ações complementares, causando uma mudança de foco imediata para o usuário.\n\n\n---\n\n\n\n\n### **Events:**\n - **cps-show** - Emitido quando a gaveta de navegação começa a ser aberta.\n- **cps-after-show** - Emitido após a gaveta de navegação ser aberta e todas as animações serem concluídas.\n- **cps-close** - Emitido quando a gaveta de navegação começa a ser fechada.\n- **cps-after-close** - Emitido após a gaveta de navegação ser fechada e todas as animações serem concluídas.\n- **cps-initial-focus** - Emitido quando a gaveta de navegação é aberta e está pronta para receber foco. Chamar `event.preventDefault()` impedirá o foco e permitirá que você o defina em um elemento diferente, como um campo de entrada.\n- **cps-request-close** - Emitido quando o usuário tenta fechar a gaveta de navegação clicando no botão de fechar, clicando na sobreposição ou pressionando Escape. Chamar `event.preventDefault()` manterá a gaveta de navegação aberta. Evite usar isso a menos que fechar a gaveta de navegação resulte em comportamento destrutivo, como perda de dados.\n\n### **Methods:**\n - **show()** - Mostra a gaveta de navegação.\n- **close()** - Fecha a gaveta de navegação.\n\n### **Slots:**\n - _default_ - O conteúdo principal da gaveta de navegação.\n- **label** - O rótulo da gaveta de navegação. Alternativamente, você pode usar o atributo `label`.\n- **header-actions** - Ações opcionais para adicionar ao cabeçalho. Funciona melhor com `<cps-icon-button>`.\n- **footer** - O rodapé da gaveta de navegação, geralmente um ou mais botões representando várias opções.\n\n### **CSS Properties:**\n - **--size** - O tamanho preferencial da gaveta de navegação. Será aplicado à largura ou altura dependendo do `placement`. _(default: undefined)_\n- **--header-spacing** - A quantidade de preenchimento a ser usada para o cabeçalho. _(default: undefined)_\n- **--body-spacing** - A quantidade de preenchimento a ser usada para o corpo. _(default: undefined)_\n- **--footer-spacing** - A quantidade de preenchimento a ser usada para o rodapé. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - O elemento base que envolve o componente.\n- **backdrop** - A sobreposição que cobre a tela por trás da gaveta de navegação.\n- **panel** - O painel da gaveta de navegação (onde a gaveta e seu conteúdo são renderizados).\n- **header** - O cabeçalho da gaveta de navegação. Este elemento envolve o título e ações do cabeçalho.\n- **header-actions** - Contêiner para ações opcionais do cabeçalho.\n- **title** - O título da gaveta de navegação.\n- **close-button** - O botão de fechar, um `<cps-icon-button>`.\n- **close-button__base** - A parte `base` exportada do botão de fechar.\n- **body** - O corpo da gaveta de navegação.\n- **footer** - O rodapé da gaveta de navegação.",
      "attributes": [
        {
          "name": "open",
          "description": "Indica se a gaveta de navegação está aberta ou não.",
          "values": []
        },
        {
          "name": "closable",
          "description": "Habilita a exibição de um botão de fechar no cabeçalho, como uma forma ainda mais evidente ao usuário de que a caixa de diálogo pode ser fechada.\nNão possui efeito caso não haja cabeçalho, ou seja, se não houver valor no atributo `label` e não houver conteúdo no _slot_ `label`.",
          "values": []
        },
        {
          "name": "label",
          "description": "O rótulo da caixa de diálogo exibido no cabeçalho. Você deve sempre incluir um rótulo relevante para\nacessibilidade adequada. Se você precisar exibir HTML, use o slot `label` em vez disso.",
          "values": []
        },
        {
          "name": "aria-label",
          "description": "O rótulo de acessibilidade para o diálogo. Se não for especificado, o atributo `label` será usado.\nÉ altamente recomendável definir este atributo, caso não haja um valor definido para o atributo `label`.",
          "values": []
        },
        {
          "name": "placement",
          "description": "Direção de onde a gaveta de navegação será exibida.",
          "values": [
            { "name": "top" },
            { "name": "end" },
            { "name": "bottom" },
            { "name": "start" }
          ]
        },
        {
          "name": "contained",
          "description": "Por padrão, a gaveta de navegação é uma sobreposição sobre toda a página.\nUsando este atributo, ela passa a ser contida dentro de seu elemento pai.",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "cps-dropdown",
      "description": "Botões _dropdown_ permitem escolher itens de um menu de opções predefinidas.\n\n\n---\n\n\n\n\n### **Events:**\n - **cps-change** - Emitido quando a alteração do valor do controle é confirmada pelo usuário.\n- **cps-clear** - Emitido quando o botão de limpar é ativado (caso `clearable` esteja em uso).\n- **cps-focus** - Emitido quando o controle obtém o foco.\n- **cps-blur** - Emitido quando o controle perde o foco.\n- **cps-show** - Emitido quando a lista suspensa de opções começa a ser exibida.\n- **cps-after-show** - Emitido após a lista suspensa de opções ser exibida e todas as animações terem sido concluídas.\n- **cps-hide** - Emitido quando a lista suspensa de opções começa a ser ocultada.\n- **cps-after-hide** - Emitido após a lista suspensa de opções ser ocultada e todas as animações terem sido concluídas.\n\n### **Methods:**\n - **show()** - Exibe o menu seletor de opções.\n- **hide()** - Oculta o menu seletor de opções.\n- **focus(options: _FocusOptions_)** - Coloca o foco no campo.\n- **blur()** - Remove o foco do campo.\n\n### **Slots:**\n - _default_ - As opções da lista suspensa. Cada opção deve ser um `<cps-option>`. Opcionalmente, também pode conter `<cps-separator>` e `<cps-label>` para agrupar itens visualmente.\n- **prefix** - Um ícone ou elemento similar antes do conteúdo principal.\n- **expand-icon** - Indicador que demonstra se o controle está expandido ou contraído (idealmente, um `<cps-icon>`). Se rotaciona de acordo com a abertura e o fechamento da lista suspensa.\n\n### **CSS Parts:**\n - **field** - O elemento base que embrulha o botão de ação, o ícone de expansão, e eventuais prefixo e botão de limpar.\n- **prefix** - O elemento que embrulha a renderização do _slot_ `prefix`.\n- **span** - A área textual interna (um `<span>`), a qual apresenta o texto da opção atualmente selecionada, ou um eventual _placeholder_.\n- **menu** - O elemento base que embrulha o menu contextual (um `<div>`), onde as opções injetadas são posicionadas.\n- **clear-button** - O botão de limpar o campo (caso `clearable` esteja em uso).\n- **clear-button__base** - A parte `base` re-exportada do botão de limpar.\n- **clear-button__icon** - A parte `icon` re-exportada do botão de limpar.\n- **expand-icon** - O elemento que embrulha a renderização do _slot_ `expand-icon`.",
      "attributes": [
        {
          "name": "id",
          "description": "O identificador único do campo, usado como estratégia de vinculação ao rótulo e/ou texto de apoio anexado.\nSe não for fornecido, um UUID é gerado automaticamente.",
          "values": []
        },
        {
          "name": "value",
          "description": "O valor do campo, permite recuperar ou definir uma opção selecionada.",
          "values": []
        },
        {
          "name": "size",
          "description": "O tamanho do campo.",
          "values": [
            { "name": "small" },
            { "name": "medium" },
            { "name": "large" }
          ]
        },
        {
          "name": "placeholder",
          "description": "Texto de espaço reservado para exibir uma dica quando o campo estiver vazio.",
          "values": []
        },
        {
          "name": "keep-placeholder",
          "description": "Define se o espaço reservado deve ser exibido permanentemente,\nindependentemente de uma opção estar selecionada.",
          "values": []
        },
        {
          "name": "disabled",
          "description": "Desabilita o campo.",
          "values": []
        },
        {
          "name": "clearable",
          "description": "Adiciona um botão de limpar exibido quando o campo não estiver vazio.",
          "values": []
        },
        {
          "name": "open",
          "description": "Indica se o menu de seleção de opções está aberto. Você pode alternar este atributo, manualmente ou reativamente, para mostrar e ocultar o menu. Opcionalmente, pode utilizar os métodos `show()` e `hide()` se preferir uma abordagem imperativa, e este atributo refletirá o estado aberto do menu em tempo real.",
          "values": []
        },
        {
          "name": "strategy",
          "description": "Estratégia a nível de CSS do posicionamento do menu. A estratégia `absolute` funciona bem na maioria dos casos, mas se rolagem externa causar o corte do menu (se um elemento pai for `overflow` igual a `auto` ou `scroll`), usar uma estratégia de posição `fixed` pode contornar o problema. Entretanto, posicionamento fixo pode não funcionar em todos os cenários, portanto deve ser habilitado apenas quando necessário, e testado com atenção.",
          "values": [{ "name": "absolute" }, { "name": "fixed" }]
        },
        {
          "name": "placement",
          "description": "O posicionamento preferido do menu de seleção em relação ao campo base. Observe que o posicionamento real poderá variar, se o posicionamento desejado não for viável, no intuito de manter o painel dentro da área de visualização.",
          "values": [{ "name": "top" }, { "name": "bottom" }]
        },
        {
          "name": "forget-selection",
          "description": "Indica se o menu de seleção de opções deve esquecer a seleção atual após o fechamento. Isso pode ser útil para menus que servem apenas como um seletor visual, mas com funcionalidade totalmente personalizada após a seleção.",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "cps-flyout",
      "description": "_Flyout_ é um utilitário que permite ancorar caixas flutuantes declarativamente a outro elemento.\n\n\n---\n\n\n\n\n### **Events:**\n - **cps-reposition** - Emitido quando o _flyout_ é reposicionado. Este evento pode disparar numerosas vezes, evite colocar operações custosas em seu _listener_, ou alternativamente considere usar uma estratégia de _debouce_ neste evento.\n\n### **Methods:**\n - **reposition()** - Força o _flyout_ a se recalcular e se reposicionar.\n\n### **Slots:**\n - _default_ - O conteúdo do _flyout_.\n- **anchor** - O elemento que o _flyout_ será ancorado. Se o elemento estiver fora da estrutura hierárquica do _flyout_, use o _slot_ `anchor` em vez disso.\n\n### **CSS Properties:**\n - **--arrow-size** - Tamanho da seta. Observe que independentemente desta variável, a seta não será exibida a menos que o atributo `arrow` seja utilizado. _(default: 7px)_\n- **--background-color** - A cor de fundo do _flyout_ e de sua eventual seta (caso esteja sendo exibido em estilo balão). _(default: var(--cps-palette-neutral-500))_\n- **--border-color** - A bordar externa contornando o _flyout_ e sua eventual seta (caso esteja sendo exibido em estilo balão). _(default: transparent)_\n- **--auto-size-available-width** - Uma variável somente leitura que determina a largura máxima que o _flyout_ pode ter antes de transbordar. Útil para posicionar elementos filhos que precisam se ajustar junto. Esta propriedade está disponível somente quando o atributo `auto-size` é utilizado. _(default: undefined)_\n- **--auto-size-available-height** - Uma variável somente leitura que determina a altura máxima que o _flyout_ pode ter antes de transbordar. Útil para posicionar elementos filhos que precisam se ajustar junto. Esta propriedade está disponível somente quando o atributo `auto-size` é utilizado. _(default: undefined)_\n\n### **CSS Parts:**\n - **arrow** - A seta do _flyout_, caso seja em estilo balão. Evite definir propriedades `top|bottom|left|right`, já que estes valores são atribuídos automaticamente conforme o )_flyout_ se move. Esta parte CSS é mais relevante para aplicar cores que combinam com seu _flyout_ personalizado, ou talvez bordas ou sombras diferenciadas.\n- **container** - O elemento base do _flyout_ (um element `<div>`). Esta parte CSS é útil para definir aparência personalizada ao corpo do _flyout_, como cor de fundo, sombras, etc.",
      "attributes": [
        {
          "name": "anchor",
          "description": "O elemento ao qual o _flyout_ será ancorado. Se o elemento estiver fora da estrutura hierárquica do _flyout_, você pode fornecer a esta propriedade o `id` deste elemento, uma instância direta dele no DOM, ou ainda um `VirtualElement`. Caso contrário, se a âncora pode ser contida junto à estrutura hierárquica do próprio _flyout_, use o _slot_ `anchor` em vez disso.",
          "values": [{ "name": "Element" }, { "name": "VirtualElement" }]
        },
        {
          "name": "active",
          "description": "Ativa a lógica de posicionamento e mostra o _flyout_.\nQuando este atributo é removido, a lógica de posicionamento é desativada e o _flyout_ será ocultado.",
          "values": []
        },
        {
          "name": "placement",
          "description": "O posicionamento preferido do _flyout_ em relação à âncora. Observe que o posicionamento real poderá variar, se o posicionamento desejado não for viável, no intuito de manter o painel dentro da área de visualização.",
          "values": [
            { "name": "" },
            { "name": "top" },
            { "name": "top-start" },
            { "name": "top-end" },
            { "name": "bottom" },
            { "name": "bottom-start" },
            { "name": "bottom-end" },
            { "name": "right" },
            { "name": "right-start" },
            { "name": "right-end" },
            { "name": "left" },
            { "name": "left-start" },
            { "name": "left-end" }
          ]
        },
        {
          "name": "strategy",
          "description": "Estratégia a nível de CSS do posicionamento do _flyout_. A estratégia `absolute` funciona bem na maioria dos casos, mas se rolagem externa causar o corte do _flyout_ (se um elemento pai for `overflow` igual a `auto` ou `scroll`), usar uma estratégia de posição `fixed` pode contornar o problema. Entretanto, posicionamento fixo pode não funcionar em todos os cenários, portanto deve ser habilitado apenas quando necessário, e testado com atenção.",
          "values": [{ "name": "absolute" }, { "name": "fixed" }]
        },
        {
          "name": "distance",
          "description": "A distância em pixels do _flyout_ em relação à sua âncora, para afastá-lo ou aproximá-lo da âncora.\nPor exemplo, se `placement` for `top` ou `bottom`, `distance` definirá a distância do _flyout_ no eixo vertical.",
          "values": []
        },
        {
          "name": "skidding",
          "description": "A distância em pixels do _flyout_ no eixo de deslocamento de sua âncora.\nPor exemplo, se `placement` for `top` ou `bottom`, `skidding` definirá a distância do _flyout_ no eixo horizontal.",
          "values": []
        },
        {
          "name": "arrow",
          "description": "Anexa uma seta ao _flyout_, para que apresente um estilo balão.\nO tamanho e a cor da seta podem ser personalizados usando as variáveis CSS `--arrow-size` e `--arrow-color`.\nPara personalizações adicionais, você também pode selecionar a seta para estilização\nusando `::part(arrow)` em sua folha de estilos.",
          "values": []
        },
        {
          "name": "arrow-placement",
          "description": "O posicionamento da seta.\nO padrão é `anchor`, que alinhará a seta o mais próximo possível do centro da âncora,\nconsiderando o espaço disponível e o `arrow-padding`.\nUm valor de `start`, `end` ou `center` alinhará a seta ao início, ao fim ou ao centro do _flyout_.",
          "values": [
            { "name": "start" },
            { "name": "end" },
            { "name": "center" },
            { "name": "anchor" }
          ]
        },
        {
          "name": "arrow-padding",
          "description": "A quantidade de espaço entre a seta e as bordas do _flyout_.\nSe o _flyout_ tiver um `border-radius`, por exemplo,\nisso evitará que a seta ultrapasse o início do arredondamento.",
          "values": []
        },
        {
          "name": "flip",
          "description": "Quando definido, o _flyout_ será girado automaticamente para caber no espaço disponível.\nVocê pode usar `flipFallbackPlacements` para configurar ainda mais como o posicionamento alternativo é determinado.",
          "values": []
        },
        {
          "name": "flip-fallback-placements",
          "description": "Se o posicionamento preferido não atender, o _flyout_ será testado nestes posicionamentos alternativos,\naté que um atenda. Deve ser uma `String` de qualquer número de posicionamentos separados por um espaço,\npor exemplo, `\"top bottom left\"`. Se nenhum posicionamento atender,\na estratégia de posicionamento alternativo será usada em vez disso.",
          "values": []
        },
        {
          "name": "flip-fallback-strategy",
          "description": "Quando nem o posicionamento preferido nem os posicionamentos alternativos se encaixam,\neste valor será usado para determinar se o _flyout_ deve ser posicionado usando o\nmelhor ajuste disponível com base no espaço disponível ou\ncomo foi inicialmente definido por seu `placement`.",
          "values": [{ "name": "best-fit" }, { "name": "initial" }]
        },
        {
          "name": "flipBoundary",
          "description": "A fronteira de giro descreve o(s) elemento(s) de colisão que serão verificados em casos de cortes,\nquando o _flyout_ precisar girar para se acomodar. Por padrão, a fronteira inclui ancestrais com rolagem\nque fariam com que o elemento fosse cortado. Se necessário, você pode alterar a fronteira passando uma\nreferência à instância de um ou mais elementos nesta propriedade.",
          "values": [{ "name": "Element" }, { "name": "Element[]" }]
        },
        {
          "name": "flip-padding",
          "description": "A quantidade de espaço, em pixels, a ser excedido antes que o comportamento de giro ocorra.",
          "values": []
        },
        {
          "name": "shift",
          "description": "Permite reposicionar o _flyout_ ao longo do seu eixo atual, para mantê-lo à vista quando cortado.\nPor exemplo, um `placement` de `top` farão que o _flyout_ esteja posicionado com seu eixo na horizontal.\nSe a posição do _flyout_ neste eixo transpassar possíveis áreas de corte,\nele se moverá para a esquerda ou para a direita, conforme necessário.",
          "values": []
        },
        {
          "name": "shiftBoundary",
          "description": "A fronteira de reposicionamento descreve o(s) elemento(s) de colisão que serão verificados em casos de cortes,\nquando o _flyout_ precisar ser reposicionado no seu eixo para se acomodar.\nPor padrão, a fronteira inclui ancestrais com rolagem que fariam com que o elemento fosse cortado.\nSe necessário, você pode alterar a fronteira passando uma referência à instância de\num ou mais elementos nesta propriedade.",
          "values": [{ "name": "Element" }, { "name": "Element[]" }]
        },
        {
          "name": "shift-padding",
          "description": "A quantidade de espaço, em pixels, a ser excedido antes que o reposicionamento no eixo ocorra.",
          "values": []
        },
        {
          "name": "auto-size",
          "description": "Quando definido, permite que o _flyout_ automaticamente se redimensione\npara prevenir seu transbordamento ou potenciais cortes por causa de ancestrais com rolagem.",
          "values": [
            { "name": "horizontal" },
            { "name": "vertical" },
            { "name": "both" }
          ]
        },
        {
          "name": "sync",
          "description": "Sincroniza a largura ou altura (ou ambos) do _flyout_ com a do seu elemento âncora.",
          "values": [
            { "name": "exact-width" },
            { "name": "min-width" },
            { "name": "exact-height" },
            { "name": "min-height" },
            { "name": "exact-both" },
            { "name": "min-both" }
          ]
        },
        {
          "name": "autoSizeBoundary",
          "description": "A fronteira de auto-dimensionamento descreve o(s) elemento(s) de colisão que serão verificados\nem casos de cortes, quando o _flyout_ precisar ser redimensionado para se acomodar.\nPor padrão, a fronteira inclui ancestrais com rolagem que fariam com que o elemento fosse cortado.\nSe necessário, você pode alterar a fronteira passando uma referência à instância de\num ou mais elementos nesta propriedade.",
          "values": [{ "name": "Element" }, { "name": "Element[]" }]
        },
        {
          "name": "auto-size-padding",
          "description": "A quantidade de espaço, em pixels, a ser excedido antes que o auto-dimensionamento ocorra.",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "cps-format-bytes",
      "description": "Formata um número como um valor em _bytes_ ou _bits_ legível por humanos.\n\n\n---\n\n\n",
      "attributes": [
        {
          "name": "value",
          "description": "O número (valor bruto em _bytes_ ou _bits_) a ser formatado.",
          "values": []
        },
        {
          "name": "unit",
          "description": "O tipo de unidade a ser considerado para as conversões de valores.",
          "values": [{ "name": "byte" }, { "name": "bit" }]
        },
        {
          "name": "display",
          "description": "Determina como formatar o resultado, por exemplo, \"100 bytes\", \"100 b\" ou \"100b\".",
          "values": [
            { "name": "long" },
            { "name": "short" },
            { "name": "narrow" }
          ]
        }
      ],
      "references": []
    },
    {
      "name": "cps-format-date",
      "description": "Formata uma data/hora usando o idioma e as opções especificadas.\n\n\n---\n\n\n",
      "attributes": [
        {
          "name": "date",
          "description": "A data/hora a ser formatada. Se não for definida, a data e hora atuais serão usadas.\nAo passar um texto, é altamente recomendado usar o formato ISO 8601 para garantir\nque os fusos horários sejam tratados corretamente. Para converter uma data para este\nformato em JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).",
          "values": [{ "name": "Date" }]
        },
        {
          "name": "weekday",
          "description": "O formato para exibir o dia da semana.",
          "values": [
            { "name": "narrow" },
            { "name": "short" },
            { "name": "long" }
          ]
        },
        {
          "name": "era",
          "description": "O formato para exibir a era.",
          "values": [
            { "name": "narrow" },
            { "name": "short" },
            { "name": "long" }
          ]
        },
        {
          "name": "year",
          "description": "O formato para exibir o ano.",
          "values": [{ "name": "numeric" }, { "name": "2-digit" }]
        },
        {
          "name": "month",
          "description": "O formato para exibir o mês.",
          "values": [
            { "name": "numeric" },
            { "name": "2-digit" },
            { "name": "narrow" },
            { "name": "short" },
            { "name": "long" }
          ]
        },
        {
          "name": "day",
          "description": "O formato para exibir o dia.",
          "values": [{ "name": "numeric" }, { "name": "2-digit" }]
        },
        {
          "name": "hour",
          "description": "O formato para exibir a hora.",
          "values": [{ "name": "numeric" }, { "name": "2-digit" }]
        },
        {
          "name": "minute",
          "description": "O formato para exibir os minutos.",
          "values": [{ "name": "numeric" }, { "name": "2-digit" }]
        },
        {
          "name": "second",
          "description": "O formato para exibir os segundos.",
          "values": [{ "name": "numeric" }, { "name": "2-digit" }]
        },
        {
          "name": "time-zone-name",
          "description": "O formato para exibir o nome do fuso horário.",
          "values": [{ "name": "short" }, { "name": "long" }]
        },
        {
          "name": "time-zone",
          "description": "O fuso horário no qual o horário será expresso.",
          "values": []
        },
        {
          "name": "hour-format",
          "description": "O formato para exibir a hora.",
          "values": [{ "name": "auto" }, { "name": "12" }, { "name": "24" }]
        }
      ],
      "references": []
    },
    {
      "name": "cps-format-number",
      "description": "Formata um número usando o idioma e as opções especificadas.\n\n\n---\n\n\n",
      "attributes": [
        {
          "name": "value",
          "description": "O número a ser formatado.",
          "values": []
        },
        {
          "name": "type",
          "description": "O estilo de formatação a ser utilizado.",
          "values": [
            { "name": "currency" },
            { "name": "decimal" },
            { "name": "percent" }
          ]
        },
        {
          "name": "no-grouping",
          "description": "Desativa os separadores de agrupamento.",
          "values": []
        },
        {
          "name": "currency",
          "description": "O código de moeda [ISO 4217](https://www.iso.org/iso-4217-currency-codes.html) a ser utilizado na formatação.",
          "values": []
        },
        {
          "name": "currency-display",
          "description": "Definição sobre como exibir a moeda.",
          "values": [
            { "name": "symbol" },
            { "name": "narrowSymbol" },
            { "name": "code" },
            { "name": "name" }
          ]
        },
        {
          "name": "minimum-integer-digits",
          "description": "O número mínimo de dígitos inteiros a ser utilizado. Valores possíveis são 1-21.",
          "values": []
        },
        {
          "name": "minimum-fraction-digits",
          "description": "O número mínimo de dígitos fracionários a ser utilizado. Valores possíveis de 0 a 100.",
          "values": []
        },
        {
          "name": "maximum-fraction-digits",
          "description": "O número máximo de dígitos fracionários a ser utilizado. Valores possíveis de 0 a 100.",
          "values": []
        },
        {
          "name": "minimum-significant-digits",
          "description": "O número mínimo de dígitos significativos a ser utilizado. Valores possíveis de 1 a 21.",
          "values": []
        },
        {
          "name": "maximum-significant-digits",
          "description": "O número máximo de dígitos significativos a ser utilizado. Valores possíveis de 1 a 21.",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "cps-format-relative-time",
      "description": "Exibe uma frase de tempo localizada relativamente à data e hora atuais.\n\n\n---\n\n\n",
      "attributes": [
        {
          "name": "date",
          "description": "A data a partir da qual calcular o tempo. Se não for definida, a data e hora atuais serão usadas.\nAo passar um texto, é altamente recomendado usar o formato ISO 8601 para garantir\nque os fusos horários sejam tratados corretamente. Para converter uma data para este\nformato em JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).",
          "values": [{ "name": "Date" }]
        },
        {
          "name": "format",
          "description": "O estilo de formatação a ser usado.\nAlguns idiomas exibem os mesmos valores entre os formatos, exatamente o caso do português.",
          "values": [
            { "name": "long" },
            { "name": "short" },
            { "name": "narrow" }
          ]
        },
        {
          "name": "numeric",
          "description": "Quando `false`, valores textuais, como \"ontem\" e \"amanhã\", serão usados quando possível.\nQuando `true`, somente números explícitos, como \"há 1 dia\" e \"em 1 dia\", serão usados.",
          "values": []
        },
        {
          "name": "sync",
          "description": "Mantém o valor exibido atualizado conforme o tempo passa.",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "cps-icon",
      "description": "Ícones são símbolos gráficos para representação de ações ou informações em uma interface.\n\n\n---\n\n\n\n\n### **Events:**\n - **cps-load** - Emitido quando o ícone foi carregado.\n- **cps-error** - Emitido quando o ícone falha para carregar devido a um erro.\n\n### **CSS Parts:**\n - **svg** - O elemento SVG renderizado.",
      "attributes": [
        {
          "name": "name",
          "description": "Nome do ícone a renderizar. Os nomes disponíveis dependem da biblioteca de ícones que está sendo utilizada.",
          "values": []
        },
        {
          "name": "src",
          "description": "URL de um arquivo SVG externo a carregar como ícone. Tenha certeza de confiar no conteúdo do arquivo que está\nincorporando, uma vez que seu código interno será executado pelo navegador, o que pode proporcionar ataques XSS\nse for carregado um arquivo malicioso.",
          "values": []
        },
        {
          "name": "label",
          "description": "Descrição alternativa para ferramentas de acessibilidade.\nSe omitido, será um ícone puramente visual, ignorado por tecnologias assistivas.",
          "values": []
        },
        {
          "name": "library",
          "description": "Nome da biblioteca previamente registrada, a ser utilizada para carregar este ícone,\natravés de seu `name`. Se omitido, a biblioteca `default` é utilizada.",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "cps-icon-button",
      "description": "Botões de ícone são simples, apenas um ícone dentro, normalmente para uso dentro de outros componentes.\n\n\n---\n\n\n\n\n### **Events:**\n - **cps-blur** - Emitido quando o botão perde o foco.\n- **cps-focus** - Emitido quando o botão obtém o foco.\n\n### **Methods:**\n - **click()** - Simula um _click_ no botão.\n- **focus(options: _FocusOptions_)** - Coloca o foco no botão.\n- **blur()** - Remove o foco do botão.\n\n### **CSS Parts:**\n - **base** - O elemento principal propriamente dito (que pode ser `<button>` ou `<a>`).\n- **icon** - O ícone do botão (um `<cps-icon>`).",
      "attributes": [
        {
          "name": "size",
          "description": "O tamanho do botão.",
          "values": [
            { "name": "small" },
            { "name": "medium" },
            { "name": "large" }
          ]
        },
        {
          "name": "label",
          "description": "Descrição alternativa para ferramentas de acessibilidade. Não omita este atributo,\npois botões são elementos de interação e, desta forma, precisam ser lidos apropriadamente\npor ferramentas de acessibilidade.",
          "values": []
        },
        {
          "name": "name",
          "description": "Nome do ícone a renderizar. Os nomes disponíveis dependem da biblioteca de ícones que está sendo utilizada.",
          "values": []
        },
        {
          "name": "library",
          "description": "Nome da biblioteca previamente registrada, a ser utilizada para carregar este ícone,\natravés de seu `name`. Se omitido, a biblioteca `default` é utilizada.",
          "values": []
        },
        {
          "name": "src",
          "description": "URL de um arquivo SVG externo a carregar como ícone. Tenha certeza de confiar no conteúdo do arquivo que está\nincorporando, uma vez que seu código interno será executado pelo navegador, o que pode proporcionar ataques XSS\nse for carregado um arquivo malicioso.",
          "values": []
        },
        {
          "name": "href",
          "description": "Quando definido, o botão será renderizado como um elemento `<a>` com este `href` definido, ao invés de um elemento `<button>`.",
          "values": []
        },
        {
          "name": "target",
          "description": "Informa o navegador qual o alvo de abertura do _link_. Usado somente se `href` estiver presente.",
          "values": [
            { "name": "_blank" },
            { "name": "_parent" },
            { "name": "_self" },
            { "name": "_top" }
          ]
        },
        {
          "name": "rel",
          "description": "Quando usando `href`, este atributo irá mapear o valor do atributo `rel` subjacente com o valor\npadrão `noreferrer noopener`, por questões de segurança. No entanto, se você estiver usando `target`\npara apontar para uma guia/janela específica, isso impedirá que ele funcione corretamente.\nPara este cenário específico, defina como vazio ou altere o valor de `rel` para outro valor.",
          "values": []
        },
        {
          "name": "download",
          "description": "Informa o navegador para baixar o arquivo vinculado, com o nome definido aqui. Usado somente se `href` estiver presente.",
          "values": []
        },
        {
          "name": "disabled",
          "description": "Desabilita o botão.",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "cps-include",
      "description": "Possibilita a inclusão de arquivos HTML externos diretamente no conteúdo da página.\n\n\n---\n\n\n\n\n### **Events:**\n - **cps-load** - Emitido quando o arquivo incluído foi carregado.\n- **cps-error** - Emitido quando o arquivo incluído falha durante o carregamento.",
      "attributes": [
        {
          "name": "src",
          "description": "A localização do arquivo HTML a ser incluído. Tenha certeza de que pode confiar no conteúdo\nque você está incluindo, já que será executado como código no navegador após o carregamento,\no que implica em possíveis ataques XSS.",
          "values": []
        },
        {
          "name": "mode",
          "description": "O modo _cross origin_ a ser utilizado para o carregamento do arquivo.",
          "values": [
            { "name": "cors" },
            { "name": "no-cors" },
            { "name": "same-origin" }
          ]
        },
        {
          "name": "allow-scripts",
          "description": "Permite que _scripts_ incluídos no HTML importado sejam executados. Tenha certeza de que pode\nconfiar no conteúdo que você está incluindo, já que será executado como código no navegador\napós o carregamento, o que implica em possíveis ataques XSS.",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "cps-input",
      "description": "Caixas de entrada (_inputs_) coletam dados preenchidos pelos usuários.\n\n\n---\n\n\n\n\n### **Events:**\n - **cps-blur** - Emitido quando o controle perde o foco.\n- **cps-change** - Emitido quando a alteração do valor do controle é confirmada pelo usuário.\n- **cps-clear** - Emitido quando o botão de limpar é ativado (caso `clearable` esteja em uso).\n- **cps-focus** - Emitido quando o controle obtém o foco.\n- **cps-input** - Emitido quando o controle recebe entrada de dados.\n- **cps-invalid** - Emitido quando o elemento de formulário foi checado sobre sua validade, e suas condições não foram satisfeitas.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Coloca o foco no campo.\n- **blur()** - Remove o foco do campo.\n- **select()** - Seleciona todo o texto existente no campo.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Define as posições de início e término da seleção de texto do campo (índices baseados em `0`).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Atualiza um intervalo de texto do campo com o novo valor informado (índices baseados em `0`).\n- **showPicker()** - Exibe o menu seletor de opções nativo do navegador, de acordo com o `type` do campo (funciona apenas se o navegador suportar um menu seletor para o tipo de entrada em questão).\n- **stepUp()** - Incrementa o valor de um campo numérico pelo valor do atributo `step` (somente se o `type` definido for `number`).\n- **stepDown()** - Decrementa o valor de um campo numérico pelo valor do atributo `step` (somente se o `type` definido for `number`).\n- **checkValidity()** - Verifica a validade em um formulário, sem exibir uma mensagem de validação. Retorna `true` quando válido, e `false` quando inválido.\n- **getForm(): _HTMLFormElement | null_** - Obtém o formulário associado com este componente, se algum estiver.\n- **reportValidity()** - Verifica a validade em um formulário, e exibe as mensagem de validação do navegador caso o resultado seja inválido.\n- **setCustomValidity(message: _string_)** - Define uma mensagem de validação personalizada. Passar uma `string` vazia como argumento restaura a validade do elemento.\n\n### **Slots:**\n - **label** - Rótulo informativo do campo. Caso a injeção de conteúdos complexos não seja necessária, alternativamente utilize apenas o atributo `label`.\n- **prefix** - Um ícone ou elemento similar antes do conteúdo principal.\n- **suffix** - Um ícone ou elemento similar após o conteúdo principal.\n- **help-text** - Texto de apoio para auxílio ao preenchimento do campo. Caso a injeção de conteúdos complexos não seja necessária, alternativamente utilize apenas o atributo `help-text`.\n\n### **CSS Parts:**\n - **form-control** - O agrupamento de controle de formulário que engloba todos os elementos, como rótulo, caixa de entrada, e texto de apoio.\n- **form-control-label** - Elemento que embrulha o rótulo do controle de formulário.\n- **form-control-input** - Elemento que embrulha o campo do controle de formulário.\n- **form-control-help-text** - Elemento que embrulha o texto de apoio do controle de formulário.\n- **base** - O elemento base que embrulha o `<input>` e eventuais prefixo e sufixo.\n- **input** - O controle `<input>` interno propriamente dito.\n- **prefix** - O elemento que embrulha a renderização do _slot_ `prefix`.\n- **suffix** - O elemento que embrulha a renderização do _slot_ `suffix`.\n- **clear-button** - O botão de limpar o campo (caso `clearable` esteja em uso).\n- **clear-button__base** - A parte `base` re-exportada do botão de limpar.\n- **clear-button__icon** - A parte `icon` re-exportada do botão de limpar.\n- **password-toggle-button** - O botão de alternar visibilidade de senha (caso `password-toggle` esteja em uso).\n- **password-toggle-button__base** - A parte `base` re-exportada do botão de visibilidade de senha.\n- **password-toggle-button__icon** - A parte `icon` re-exportada do botão de visibilidade de senha.",
      "attributes": [
        { "name": "title", "values": [] },
        {
          "name": "type",
          "description": "O tipo do campo. Funciona da mesma forma que um elemento `<input>` nativo,\nmas apenas um subconjunto de tipos é suportado. O padrão é `text`.",
          "values": [
            { "name": "date" },
            { "name": "datetime-local" },
            { "name": "email" },
            { "name": "hidden" },
            { "name": "number" },
            { "name": "password" },
            { "name": "search" },
            { "name": "tel" },
            { "name": "text" },
            { "name": "time" },
            { "name": "url" }
          ]
        },
        {
          "name": "id",
          "description": "O identificador único do campo, usado como estratégia de vinculação ao rótulo e/ou texto de apoio anexado.\nSe não for fornecido, um UUID é gerado automaticamente.",
          "values": []
        },
        {
          "name": "name",
          "description": "O nome do campo, submetido em par _name_/_value_ com os dados do formulário.",
          "values": []
        },
        {
          "name": "value",
          "description": "O valor do campo, submetido em par _name_/_value_ com os dados do formulário.",
          "values": []
        },
        {
          "name": "size",
          "description": "O tamanho do campo.",
          "values": [
            { "name": "small" },
            { "name": "medium" },
            { "name": "large" }
          ]
        },
        {
          "name": "label",
          "description": "O rótulo do campo. Se você precisar injetar HTML, use o _slot_ `label` em vez disso.",
          "values": []
        },
        {
          "name": "help-text",
          "description": "O texto de apoio do campo. Se você precisar injetar HTML, use o _slot_ `help-text` em vez disso.",
          "values": []
        },
        {
          "name": "clearable",
          "description": "Adiciona um botão de limpar exibido quando o campo não estiver vazio.",
          "values": []
        },
        {
          "name": "disabled",
          "description": "Desabilita o campo.",
          "values": []
        },
        {
          "name": "placeholder",
          "description": "Texto de espaço reservado para exibir uma dica quando o campo estiver vazio.",
          "values": []
        },
        {
          "name": "readonly",
          "description": "Torna o campo somente leitura.",
          "values": []
        },
        {
          "name": "password-toggle",
          "description": "Adiciona um botão de alternância de visibilidade de senha. Aplicável somente se `type` for `password`.",
          "values": []
        },
        {
          "name": "password-visible",
          "description": "Determina se uma senha em preenchimento está visível como texto plano neste momento. Aplicável somente se `type` for `password`.",
          "values": []
        },
        {
          "name": "no-spin-buttons",
          "description": "Força ocultar os botões de incremento/decremento nativos do navegador para entradas numéricas. Aplicável somente se `type` for `number`.",
          "values": []
        },
        {
          "name": "form",
          "description": "O formulário \"dono\" deste controle de formulário. Se não informado, o formulário mais próximo na hierarquia\naté este elemento será utilizado. Se informado, o valor deve ser um `id` único de um formulário\nexistente no documento.",
          "values": []
        },
        {
          "name": "required",
          "description": "Torna o campo como sendo de preenchimento obrigatório.",
          "values": []
        },
        {
          "name": "pattern",
          "description": "Uma expressão regular para validar a entrada do campo.",
          "values": []
        },
        {
          "name": "minlength",
          "description": "O tamanho mínimo de caracteres que serão considerados válidos.",
          "values": []
        },
        {
          "name": "maxlength",
          "description": "O tamanho máximo de caracteres que serão considerados válidos.",
          "values": []
        },
        {
          "name": "min",
          "description": "O valor mínimo que será considerado válido. Aplicável somente se `type` for `date` ou `number`.",
          "values": []
        },
        {
          "name": "max",
          "description": "O valor máximo que será considerado válido. Aplicável somente se `type` for `date` ou `number`.",
          "values": []
        },
        {
          "name": "step",
          "description": "Especifica a granularidade que o valor deve obedecer, ou o valor especial `any` que significa que nenhum passo é\nimplicado, permitindo qualquer valor numérico. Aplicável somente se `type` for `date` ou `number`.",
          "values": [{ "name": "any" }]
        },
        {
          "name": "autocapitalize",
          "description": "Controla se e como a entrada de texto é capitalizada enquanto inserida pelo usuário.",
          "values": [
            { "name": "off" },
            { "name": "none" },
            { "name": "on" },
            { "name": "sentences" },
            { "name": "words" },
            { "name": "characters" }
          ]
        },
        {
          "name": "autocorrect",
          "description": "Indica se o recurso de correção automática do navegador deve ser utilizado.",
          "values": [{ "name": "off" }, { "name": "on" }]
        },
        {
          "name": "autocomplete",
          "description": "Especifica quais permissões o navegador tem para fornecer assistência no preenchimento dos valores do campo.\nConsulte\n[esta documentação no MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) para a lista de valores disponíveis.",
          "values": []
        },
        {
          "name": "autofocus",
          "description": "Indica que o campo deve receber foco assim que a página for carregada.",
          "values": []
        },
        {
          "name": "enterkeyhint",
          "description": "Utilizado para definir a aparência e o comportamento da tela `Enter` em teclados virtuais.",
          "values": [
            { "name": "enter" },
            { "name": "done" },
            { "name": "go" },
            { "name": "next" },
            { "name": "previous" },
            { "name": "search" },
            { "name": "send" }
          ]
        },
        {
          "name": "spellcheck",
          "description": "Habilita correção ortográfica no campo.",
          "values": []
        },
        {
          "name": "inputmode",
          "description": "Informa o navegador qual o tipo de dados esperado para ser inserido pelo usuário. Isso permite que o navegador\napresente o teclado virtual apropriado para o tipo de dados em dispositivos móveis.",
          "values": [
            { "name": "none" },
            { "name": "text" },
            { "name": "decimal" },
            { "name": "numeric" },
            { "name": "tel" },
            { "name": "search" },
            { "name": "email" },
            { "name": "url" }
          ]
        }
      ],
      "references": []
    },
    {
      "name": "cps-label",
      "description": "Rótulos (_labels_) representam uma etiqueta textual para um item na interface.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - O conteúdo do _label_.\n\n### **CSS Parts:**\n - **base** - O elemento principal propriamente dito (por padrão um `<span>`, podendo ser modificado com o atributo `tag`).\n- **content** - O `<slot>` de conteúdo interno do _label_.",
      "attributes": [
        {
          "name": "variant",
          "description": "A variante temática do _label_.",
          "values": [
            { "name": "" },
            { "name": "primary" },
            { "name": "secondary" },
            { "name": "tertiary" },
            { "name": "disabled" },
            { "name": "brand-primary" },
            { "name": "brand-secondary" },
            { "name": "brand-tertiary" },
            { "name": "inverted-primary" },
            { "name": "inverted-secondary" },
            { "name": "inverted-disabled" }
          ]
        },
        {
          "name": "size",
          "description": "O tamanho do texto do _label_. Por padrão, o tamanho é herdado do elemento pai.",
          "values": [
            { "name": "" },
            { "name": "inherit" },
            { "name": "stamp" },
            { "name": "caption" },
            { "name": "label" },
            { "name": "body" },
            { "name": "body-emphasized" },
            { "name": "body-strong" },
            { "name": "body-large" },
            { "name": "subtitle" },
            { "name": "title" },
            { "name": "heading" },
            { "name": "display" }
          ]
        },
        {
          "name": "tag",
          "description": "O elemento HTML desejado para a renderização do _label_.",
          "values": [
            { "name": "span" },
            { "name": "small" },
            { "name": "i" },
            { "name": "b" },
            { "name": "em" },
            { "name": "strong" },
            { "name": "label" },
            { "name": "p" },
            { "name": "div" }
          ]
        }
      ],
      "references": []
    },
    {
      "name": "cps-link",
      "description": "_Links_ são usados para navegação entre páginas ou para abrir URLs externas.\n\n\n---\n\n\n\n\n### **Events:**\n - **cps-blur** - Emitido quando o _link_ perde o foco.\n- **cps-focus** - Emitido quando o _link_ obtém o foco.\n\n### **Methods:**\n - **click()** - Simula um _click_ no elemento.\n- **focus(options: _FocusOptions_)** - Coloca o foco no _link_.\n- **blur()** - Remove o foco do _link_.\n\n### **CSS Parts:**\n - **base** - O elemento principal propriamente dito (um `<a>`).\n- **prefix** - O elemento que embrulha a renderização do _slot_ `prefix`.\n- **content** - O elemento que embrulha o conteúdo principal, normalmente o texto do _link_.\n- **suffix** - O elemento que embrulha a renderização do _slot_ `suffix`.",
      "attributes": [
        {
          "name": "disabled",
          "description": "Desabilita o _link_.",
          "values": []
        },
        {
          "name": "href",
          "description": "O destino do _link_, podendo ser tanto um caminho relativo ao documento atual,\npara navegação interna, quanto um caminho absoluto para navegação externa.",
          "values": []
        },
        {
          "name": "size",
          "description": "O tamanho do texto do _link_. Por padrão, o tamanho é herdado do elemento pai.",
          "values": [
            { "name": "" },
            { "name": "inherit" },
            { "name": "stamp" },
            { "name": "caption" },
            { "name": "label" },
            { "name": "body" },
            { "name": "body-emphasized" },
            { "name": "body-strong" },
            { "name": "body-large" },
            { "name": "subtitle" },
            { "name": "title" },
            { "name": "heading" },
            { "name": "display" }
          ]
        },
        {
          "name": "target",
          "description": "O alvo do _link_, podendo ser `_self`, `_blank`, `_parent`, `_top`, ou um nome de janela ou _frame_ específico.",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "cps-logo",
      "description": "Logotipos (_logos_) representam tipografia e símbolos gráficos que identificam uma marca.\nNo contexto desta biblioteca, simplificam a inserção de alguns dos _logos_ comuns no ecossistema de aplicações internas do CPS.\n\n\n---\n\n\n",
      "attributes": [
        {
          "name": "type",
          "description": "O tipo de _logo_ a ser renderizado.",
          "values": [
            { "name": "" },
            { "name": "cps" },
            { "name": "cps-asscom" },
            { "name": "cps-cgtic" },
            { "name": "cps-sucar" },
            { "name": "elements" },
            { "name": "sp-horizontal" },
            { "name": "sp-vertical" }
          ]
        },
        {
          "name": "variant",
          "description": "A variante temática do _logo_.",
          "values": [
            { "name": "default" },
            { "name": "monochromatic" },
            { "name": "monochromatic-inverted" }
          ]
        }
      ],
      "references": []
    },
    {
      "name": "cps-menu",
      "description": "Menus oferecem uma lista de opções para o usuário escolher.\n\n\n---\n\n\n\n\n### **Events:**\n - **cps-select** - Emitido quando um item de menu interno é selecionado.\n\n### **Slots:**\n - _default_ - Conteúdo do menu, incluindo itens de menu, rótulos de menu e Separadores.",
      "attributes": [],
      "references": []
    },
    {
      "name": "cps-menu-item",
      "description": "Itens de menu fornecem opções para o usuário escolher em um menu.\n\n\n---\n\n\n\n\n### **Methods:**\n - **getTextLabel()** - Obtém o texto literal a partir do conteúdo do _slot_ padrão do item de menu.\n\n### **Slots:**\n - _default_ - O texto interno do item de menu.\n- **prefix** - Um ícone ou elemento similar antes do conteúdo principal.\n- **suffix** - Um ícone ou elemento similar após o conteúdo principal.\n\n### **CSS Parts:**\n - **base** - O elemento principal propriamente dito (um `<div>`).\n- **check** - O elemento que embrulha o ícone de checagem (caso o item de menu seja do tipo `checkbox`), visível apenas quando o item de menu está marcado.\n- **prefix** - O elemento que embrulha a renderização do _slot_ `prefix`.\n- **label** - O elemento que embrulha o conteúdo principal, normalmente um texto literal.\n- **suffix** - O elemento que embrulha a renderização do _slot_ `suffix`.",
      "attributes": [
        {
          "name": "type",
          "description": "O tipo de item de menu a ser renderizado. Para usar o estado `checked`, o valor deste atributo deve ter sido definido como `checkbox`.",
          "values": [{ "name": "normal" }, { "name": "checkbox" }]
        },
        {
          "name": "checked",
          "description": "Determina se o _checkbox_ do item de menu está selecionado (aplicável somente se o atributo `type` for `checked`).",
          "values": []
        },
        {
          "name": "value",
          "description": "Um valor único para identificar o item de menu, podendo programaticamente auxiliar na determinação de quando cada item de menu é selecionado, através do evento `cps-select` do `<cps-menu>` pai deste item.",
          "values": []
        },
        {
          "name": "disabled",
          "description": "Desabilita o item de menu.",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "cps-menu-label",
      "description": "Rótulos de menu são usados para descrever um grupo de itens de menu.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - O texto interno do rótulo de menu.\n\n### **CSS Parts:**\n - **base** - O elemento principal propriamente dito (um `<slot>`).",
      "attributes": [],
      "references": []
    },
    {
      "name": "cps-mutation-observer",
      "description": "O utilitário observador de mutação (_mutation observer_) oferece uma alternativa com sintaxe declarativa para a API nativa [`MutationObserver`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).\n\n\n---\n\n\n\n\n### **Events:**\n - **cps-mutation** - Emitido quando ocorre uma mutação.\n\n### **Slots:**\n - _default_ - O conteúdo a ser observado para mutações.",
      "attributes": [
        {
          "name": "attr",
          "description": "Observa alterações em atributos.\nPara observar todos os atributos, use `*`.\nPara atributos específicos, separe-os por vírgula, por exemplo, `attr=\"class,id,title\"`.",
          "values": []
        },
        {
          "name": "attr-old-value",
          "description": "Indica se o valor anterior do atributo deve ser registrado ao monitorar alterações.",
          "values": []
        },
        {
          "name": "char-data",
          "description": "Observa alterações nos dados de caracteres textuais contidos no nó.",
          "values": []
        },
        {
          "name": "char-data-old-value",
          "description": "Indica se o valor anterior do texto do nó deve ser registrado.",
          "values": []
        },
        {
          "name": "child-list",
          "description": "Observa a adição ou remoção de novos nós filhos.",
          "values": []
        },
        {
          "name": "disabled",
          "description": "Desativa o observador.",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "cps-notification",
      "description": "Notificações são usadas para exibir mensagens importantes de forma pontual, localmente ou como _toast_.\n\n\n---\n\n\n\n\n### **Events:**\n - **cps-show** - Emitido quando a notificação aparece.\n- **cps-after-show** - Emitido após a notificação aparecer e todas as animações terem sido completadas.\n- **cps-hide** - Emitido quando a notificação some.\n- **cps-after-hide** - Emitido após a notificação sumir e todas as animações terem sido completadas.\n\n### **Methods:**\n - **show()** - Exibe a notificação, no local onde foi definida através de seu HTML e CSS.\n- **hide()** - Oculta a notificação, caso esta esteja visível.\n- **toast()** - Exibe a notificação como um _toast_. Isto irá mover a notificação para fora de sua posição no DOM e, quando ocultada, ela será removida do DOM completamente. Ao armazenar uma referência à notificação, você pode reutilizá-la chamando este método novamente. Retorna uma `Promise`que será resolvida após a notificação ser ocultada.\n\n### **Slots:**\n - _default_ - O conteúdo principal da notificação, usualmente uma mensagem a ser exibida.\n- **icon** - Um ícone personalizado a ser exibido junto à notificação (utilize um `<cps-icon>` para melhor apresentação). Não possui efeito se o atributo `icon` estiver em uso.\n\n### **CSS Parts:**\n - **base** - O elemento principal propriamente dito (um `<div>`).\n- **icon** - O elemento que embrulha o ícone opcional (um `<div>`) no qual se aplica a cor de fundo de acordo com a variante da notificação, seja ele gerado automaticamente ou informado com _slot_.\n- **message** - O elemento que embrulha o conteúdo principal da notificação, usualmente contendo um ou mais elementos que definem a mensagem de exibição.\n- **close-button** - O botão de fechar a notificação (caso `closable` esteja em uso).\n- **close-button__base** - A parte `base` re-exportada do botão de fechar.\n- **close-button__icon** - A parte `icon` re-exportada do botão de fechar.",
      "attributes": [
        {
          "name": "open",
          "description": "Indica se a notificação está aberta. Você pode alternar este atributo, manualmente ou reativamente, para mostrar e ocultar a notificação. Opcionalmente, pode utilizar os métodos `show()` e `hide()` se preferir uma abordagem imperativa, e este atributo refletirá o estado aberto da notificação em tempo real.",
          "values": []
        },
        {
          "name": "closable",
          "description": "Habilita a exibição de um botão de fechar para que o usuário possa ocultar a notificação imediatamente.",
          "values": []
        },
        {
          "name": "variant",
          "description": "A variante visual para apresentação da notificação.",
          "values": [
            { "name": "neutral" },
            { "name": "informative" },
            { "name": "warning" },
            { "name": "critical" },
            { "name": "success" }
          ]
        },
        {
          "name": "icon",
          "description": "Exibe ícone automático de acordo com a variante, ao invés de utilizar o _slot_ `icon`.",
          "values": []
        },
        {
          "name": "duration",
          "description": "A duração, em milissegundos, que a notificação será exibida antes de se ocultar automaticamente. Caso o usuário interaja com a notificação antes dela se ocultar (por exemplo, movendo o _mouse_ sobre ela), o temporizador será reiniciado. O padrão `Infinity` significa que a notificação não se ocultará automaticamente.",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "cps-option",
      "description": "Opções definem os itens selecionáveis dentro de controles de formulário, como no [Select](/componentes/select).\n\n\n---\n\n\n\n\n### **Methods:**\n - **getTextLabel()** - Obtém o texto literal a partir do conteúdo do _slot_ padrão da opção.\n\n### **Slots:**\n - _default_ - O texto interno da opção.\n- **prefix** - Um ícone ou elemento similar antes do conteúdo principal.\n- **suffix** - Um ícone ou elemento similar após o conteúdo principal.\n\n### **CSS Parts:**\n - **base** - O elemento principal propriamente dito (um `<div>`).\n- **check** - O elemento que embrulha o ícone de checagem (caso a opção esteja dentro de uma caixa de seleção múltipla), visível apenas quando a opção está marcada.\n- **prefix** - O elemento que embrulha a renderização do _slot_ `prefix`.\n- **label** - O elemento que embrulha o conteúdo principal, normalmente um texto literal.\n- **suffix** - O elemento que embrulha a renderização do _slot_ `suffix`.",
      "attributes": [
        {
          "name": "value",
          "description": "Um valor único para identificar a opção. Quando é selecionada, o controle de formulário contendo a opção receberá este valor. O valor deve ser único dentre outras opções no mesmo controle. Os valores não podem conter espaços, pois espaços são usados como separadores em controles com seleção múltipla.",
          "values": []
        },
        {
          "name": "disabled",
          "description": "Desabilita a opção.",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "cps-progress",
      "description": "Barras de progresso (_progress_) são usadas para mostrar a situação de uma operação em andamento.\n\n\n---\n\n\n\n\n### **CSS Properties:**\n - **--indicator-height** - A altura do indicador. _(default: undefined)_\n- **--track-height** - A altura da trilha. _(default: undefined)_\n- **--indicator-color** - A cor do indicador, quando em estado padrão. _(default: undefined)_\n- **--indicator-pause-color** - A cor do indicador, quando em estado de pausa. _(default: undefined)_\n- **--indicator-success-color** - A cor do indicador, quando em estado de sucesso. _(default: undefined)_\n- **--indicator-error-color** - A cor do indicador, quando em estado de erro. _(default: undefined)_\n- **--track-color** - A cor da trilha. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - O elemento base do componente.\n- **indicator** - O indicador da barra de progresso.\n- **track** - A trilha de fundo da barra de progresso.",
      "attributes": [
        {
          "name": "value",
          "description": "O progresso atual como uma porcentagem, de `0` a `100`. Se não informado, considera-se que a barra de progresso está em estado `indeterminate`.",
          "values": []
        },
        {
          "name": "status",
          "description": "O estado de progresso, para coloração contextual da barra de progresso.",
          "values": [
            { "name": "default" },
            { "name": "pause" },
            { "name": "success" },
            { "name": "error" }
          ]
        },
        {
          "name": "label",
          "description": "Um rótulo descritivo para a barra de progresso. Este não será exibido na interface, mas será anunciado por dispositivos de acessibilidade durante a interação com o controle, sendo fortemente recomendado.",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "cps-radio",
      "description": "Campos de opção (_radio_) permitem que o usuário selecione uma única opção de um grupo.\n\n\n---\n\n\n\n\n### **Events:**\n - **cps-blur** - Emitido quando o controle perde o foco.\n- **cps-focus** - Emitido quando o controle obtém o foco.\n\n### **Slots:**\n - _default_ - Rótulo informativo do campo. Caso a injeção de conteúdos complexos não seja necessária, alternativamente utilize apenas o atributo `label`.\n\n### **CSS Parts:**\n - **base** - O elemento base que embrulha o `<input>` e eventuais elementos de apoio para sua renderização.\n- **control** - O elemento circular que embrulha o estado checagem do campo.\n- **control--checked** - Obtém para estilização o elemento `control`, somente quando o campo está marcado.\n- **checked-handle** - O identificador de estado checado, um elemento `<span>` com estilização circular.\n- **label** - O elemento que embrulha o rótulo do campo, um elemento `<label>`.",
      "attributes": [
        { "name": "title", "values": [] },
        {
          "name": "id",
          "description": "O identificador único do campo, usado como estratégia de vinculação ao rótulo e/ou texto de apoio anexado.\nSe não for fornecido, um UUID é gerado automaticamente.",
          "values": []
        },
        {
          "name": "value",
          "description": "O valor do campo, submetido em par _name_/_value_ com os dados do formulário.",
          "values": []
        },
        {
          "name": "name",
          "description": "O nome do campo, submetido em par _name_/_value_ com os dados do formulário.",
          "values": []
        },
        {
          "name": "label",
          "description": "O rótulo do campo. Se você precisar injetar HTML, use o _slot_ `label` em vez disso.",
          "values": []
        },
        {
          "name": "size",
          "description": "O tamanho do campo.",
          "values": [
            { "name": "small" },
            { "name": "medium" },
            { "name": "large" }
          ]
        },
        {
          "name": "disabled",
          "description": "Desabilita o campo.",
          "values": []
        },
        {
          "name": "checked",
          "description": "Determina o estado de checagem do campo, ou seja, quando presente, o campo encontra-se marcado.",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "cps-radio-group",
      "description": "Grupos de opções englobam múltiplos [Radio](/componentes/radio) ou [Toggle Button](/componentes/toggle-button) para que funcionem como um único controle.\n\n\n---\n\n\n\n\n### **Events:**\n - **cps-change** - Emitido quando a alteração do valor do controle é confirmada pelo usuário.\n- **cps-input** - Emitido quando o controle recebe entrada de dados.\n- **cps-invalid** - Emitido quando o elemento de formulário foi checado sobre sua validade, e suas condições não foram satisfeitas.\n\n### **Methods:**\n - **checkValidity()** - Verifica a validade em um formulário, sem exibir uma mensagem de validação. Retorna `true` quando válido, e `false` quando inválido.\n- **getForm(): _HTMLFormElement | null_** - Obtém o formulário associado com este componente, se algum estiver.\n- **reportValidity(): _boolean_** - Verifica a validade em um formulário, e exibe as mensagem de validação do navegador caso o resultado seja inválido.\n- **setCustomValidity(message)** - Define uma mensagem de validação personalizada. Passar uma `string` vazia como argumento restaura a validade do elemento.\n\n### **Slots:**\n - _default_ - O _slot_ padrão onde elementos `<cps-radio>` ou `<cps-toggle-button>` são colocados.\n- **label** - Rótulo informativo do campo. Obrigatório para acessibilidade adequada. Caso a injeção de conteúdos complexos não seja necessária, alternativamente utilize apenas o atributo `label`.\n- **help-text** - Texto de apoio para auxílio ao preenchimento do campo. Caso a injeção de conteúdos complexos não seja necessária, alternativamente utilize apenas o atributo `help-text`.\n\n### **CSS Parts:**\n - **form-control** - O agrupamento de controle de formulário que engloba todos os elementos, como rótulo, caixa de entrada, e texto de apoio.\n- **form-control-label** - Elemento que embrulha o rótulo do controle de formulário.\n- **form-control-input** - Elemento que embrulha o campo do controle de formulário.\n- **form-control-help-text** - Elemento que embrulha o texto de apoio do controle de formulário.\n- **button-group** - O componente de grupo de botões que embrulha botões alternáveis (um `<cps-button-group>`).\n- **button-group__base** - A parte `base` re-exportada do grupo de botões.",
      "attributes": [
        {
          "name": "id",
          "description": "O identificador único do campo, usado como estratégia de vinculação ao rótulo e/ou texto de apoio anexado.\nSe não for fornecido, um UUID é gerado automaticamente.",
          "values": []
        },
        {
          "name": "label",
          "description": "O rótulo do campo. Obrigatório para acessibilidade adequada. Se você precisar injetar HTML, use o _slot_ `label` em vez disso.",
          "values": []
        },
        {
          "name": "help-text",
          "description": "O texto de apoio do campo. Se você precisar injetar HTML, use o _slot_ `help-text` em vez disso.",
          "values": []
        },
        {
          "name": "name",
          "description": "O nome do campo, submetido em par _name_/_value_ com os dados do formulário.",
          "values": []
        },
        {
          "name": "value",
          "description": "O valor do campo, submetido em par _name_/_value_ com os dados do formulário.",
          "values": []
        },
        {
          "name": "size",
          "description": "O tamanho do campo. Este tamanho será aplicado a todos os elementos filhos `<cps-radio>` ou `<cps-toggle-button>`.",
          "values": [
            { "name": "small" },
            { "name": "medium" },
            { "name": "large" }
          ]
        },
        {
          "name": "form",
          "description": "O formulário \"dono\" deste controle de formulário. Se não informado, o formulário mais próximo na hierarquia\naté este elemento será utilizado. Se informado, o valor deve ser um `id` único de um formulário\nexistente no documento.",
          "values": []
        },
        {
          "name": "required",
          "description": "Torna o campo como sendo de preenchimento obrigatório, garantindo que um `<cps-radio>` ou um `<cps-toggle-button>` internos esteja marcado.",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "cps-range",
      "description": "Campos de intervalo (_range_) permitem selecionar um valor numérico dentro de um intervalo mínimo e máximo.\n\n\n---\n\n\n\n\n### **Events:**\n - **cps-change** - Emitido quando a alteração do valor do controle é confirmada.\n- **cps-focus** - Emitido quando o controle obtém o foco.\n- **cps-blur** - Emitido quando o controle perde o foco.\n- **cps-invalid** - Emitido quando o elemento de formulário foi checado sobre sua validade, e suas condições não foram satisfeitas.\n\n### **Methods:**\n - **checkValidity()** - Verifica a validade em um formulário, sem exibir uma mensagem de validação. Retorna `true` quando válido, e `false` quando inválido.\n- **getForm(): _HTMLFormElement | null_** - Obtém o formulário associado com este componente, se algum estiver.\n- **reportValidity()** - Verifica a validade em um formulário, e exibe as mensagem de validação do navegador caso o resultado seja inválido.\n- **setCustomValidity(message: _string_)** - Define uma mensagem de validação personalizada. Passar uma `string` vazia como argumento restaura a validade do elemento.\n- **focus(options: _FocusOptions_)** - Coloca o foco no campo.\n- **blur()** - Remove o foco do campo.\n\n### **Slots:**\n - **label** - Rótulo informativo do campo. Caso a injeção de conteúdos complexos não seja necessária, alternativamente utilize apenas o atributo `label`.\n- **help-text** - Texto de apoio para auxílio ao preenchimento do campo. Caso a injeção de conteúdos complexos não seja necessária, alternativamente utilize apenas o atributo `help-text`.\n\n### **CSS Parts:**\n - **form-control** - O agrupamento de controle de formulário que engloba todos os elementos, como rótulo, caixa de entrada, e texto de apoio.\n- **form-control-label** - Elemento que embrulha o rótulo do controle de formulário.\n- **form-control-input** - Elemento que embrulha o campo do controle de formulário.\n- **form-control-help-text** - Elemento que embrulha o texto de apoio do controle de formulário.\n- **base** - O elemento principal que envolve os símbolos de intervalo.",
      "attributes": [
        {
          "name": "label",
          "description": "O rótulo do campo. Se você precisar injetar HTML, use o _slot_ `label` em vez disso.",
          "values": []
        },
        {
          "name": "aria-label",
          "description": "O rótulo de acessibilidade para a intervalo. Necessário apenas se um `label` visual não for fornecido.",
          "values": []
        },
        {
          "name": "help-text",
          "description": "O texto de apoio do campo. Se você precisar injetar HTML, use o _slot_ `help-text` em vez disso.",
          "values": []
        },
        {
          "name": "name",
          "description": "O nome do campo, submetido em par _name_/_value_ com os dados do formulário.",
          "values": []
        },
        {
          "name": "value",
          "description": "O valor do campo, submetido em par _name_/_value_ com os dados do formulário. Deve ser um valor entre `min` e `max`.",
          "values": []
        },
        {
          "name": "size",
          "description": "O tamanho do campo.",
          "values": [
            { "name": "small" },
            { "name": "medium" },
            { "name": "large" }
          ]
        },
        {
          "name": "min",
          "description": "O valor mínimo do intervalo, por padrão `0`. Deve ser menor que `max`.",
          "values": []
        },
        {
          "name": "max",
          "description": "O valor máximo do intervalo, por padrão `100`. Deve ser maior que `min`.",
          "values": []
        },
        {
          "name": "step",
          "description": "A precisão para a qual arredondar, por padrão `1`. Altere para permitir intervalos decimais.",
          "values": []
        },
        {
          "name": "disabled",
          "description": "Desabilita o campo.",
          "values": []
        },
        {
          "name": "readonly",
          "description": "Torna o campo somente leitura.",
          "values": []
        },
        {
          "name": "required",
          "description": "Torna o campo como sendo de preenchimento obrigatório.",
          "values": []
        },
        {
          "name": "form",
          "description": "O formulário \"dono\" deste controle de formulário. Se não informado, o formulário mais próximo na hierarquia\naté este elemento será utilizado. Se informado, o valor deve ser um `id` único de um formulário\nexistente no documento.",
          "values": []
        },
        {
          "name": "no-tooltip",
          "description": "Se verdadeiro, desativa completamente a exibição de dica de ferramenta durante a interação com o campo.",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "cps-rating",
      "description": "Campos de classificação (_rating_) permitem aos usuários classificar um conteúdo.\n\n\n---\n\n\n\n\n### **Events:**\n - **cps-change** - Emitido quando a alteração do valor do controle é confirmada.\n- **cps-focus** - Emitido quando o controle obtém o foco.\n- **cps-blur** - Emitido quando o controle perde o foco.\n- **cps-invalid** - Emitido quando o elemento de formulário foi checado sobre sua validade, e suas condições não foram satisfeitas.\n\n### **Methods:**\n - **checkValidity()** - Verifica a validade em um formulário, sem exibir uma mensagem de validação. Retorna `true` quando válido, e `false` quando inválido.\n- **getForm(): _HTMLFormElement | null_** - Obtém o formulário associado com este componente, se algum estiver.\n- **reportValidity()** - Verifica a validade em um formulário, e exibe as mensagem de validação do navegador caso o resultado seja inválido.\n- **setCustomValidity(message: _string_)** - Define uma mensagem de validação personalizada. Passar uma `string` vazia como argumento restaura a validade do elemento.\n- **focus(options: _FocusOptions_)** - Coloca o foco no campo.\n- **blur()** - Remove o foco do campo.\n\n### **Slots:**\n - **label** - Rótulo informativo do campo. Caso a injeção de conteúdos complexos não seja necessária, alternativamente utilize apenas o atributo `label`.\n- **help-text** - Texto de apoio para auxílio ao preenchimento do campo. Caso a injeção de conteúdos complexos não seja necessária, alternativamente utilize apenas o atributo `help-text`.\n\n### **CSS Properties:**\n - **--symbol-color** - Cor do símbolo quando não está ativo. Por padrão, `var(--cps-color-text-secondary)`. _(default: undefined)_\n- **--symbol-color-active** - Cor do símbolo quando está ativo. Por padrão, `var(--cps-color-fill-accent)`. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - O agrupamento de controle de formulário que engloba todos os elementos, como rótulo, caixa de entrada, e texto de apoio.\n- **form-control-label** - Elemento que embrulha o rótulo do controle de formulário.\n- **form-control-input** - Elemento que embrulha o campo do controle de formulário.\n- **form-control-help-text** - Elemento que embrulha o texto de apoio do controle de formulário.\n- **base** - O elemento principal que envolve os símbolos de classificação.\n- **symbol** - O contêiner base envolvendo cada símbolo de classificação renderizado.\n- **symbol--active** - Aplicado a um símbolo quando ele está ativo (selecionado), ainda que parcialmente.",
      "attributes": [
        {
          "name": "label",
          "description": "O rótulo do campo. Se você precisar injetar HTML, use o _slot_ `label` em vez disso.",
          "values": []
        },
        {
          "name": "aria-label",
          "description": "O rótulo de acessibilidade para a classificação. Necessário apenas se um `label` visual não for fornecido.",
          "values": []
        },
        {
          "name": "help-text",
          "description": "O texto de apoio do campo. Se você precisar injetar HTML, use o _slot_ `help-text` em vez disso.",
          "values": []
        },
        {
          "name": "name",
          "description": "O nome do campo, submetido em par _name_/_value_ com os dados do formulário.",
          "values": []
        },
        {
          "name": "value",
          "description": "O valor do campo, submetido em par _name_/_value_ com os dados do formulário.",
          "values": []
        },
        {
          "name": "size",
          "description": "O tamanho do campo.",
          "values": [
            { "name": "small" },
            { "name": "medium" },
            { "name": "large" }
          ]
        },
        {
          "name": "max",
          "description": "O valor máximo da classificação, por padrão `5`. Deve ser no mínimo `1`.",
          "values": []
        },
        {
          "name": "step",
          "description": "A precisão para a qual arredondar, por padrão `1`. Para permitir meias estrelas, defina como `0.5`.",
          "values": []
        },
        {
          "name": "symbol",
          "description": "O símbolo usado para representar cada unidade de classificação.",
          "values": [{ "name": "star" }, { "name": "heart" }]
        },
        {
          "name": "disabled",
          "description": "Desabilita o campo.",
          "values": []
        },
        {
          "name": "readonly",
          "description": "Torna o campo somente leitura.",
          "values": []
        },
        {
          "name": "required",
          "description": "Torna o campo como sendo de preenchimento obrigatório.",
          "values": []
        },
        {
          "name": "form",
          "description": "O formulário \"dono\" deste controle de formulário. Se não informado, o formulário mais próximo na hierarquia\naté este elemento será utilizado. Se informado, o valor deve ser um `id` único de um formulário\nexistente no documento.",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "cps-resize-observer",
      "description": "O utilitário observador de redimensionamento (_resize observer_) oferece uma alternativa com sintaxe declarativa para a API nativa [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).\n\n\n---\n\n\n\n\n### **Events:**\n - **cps-resize** - Emitido quando um elemento é redimensionado.\n\n### **Slots:**\n - _default_ - Um ou mais elementos para observar redimensionamentos.",
      "attributes": [
        {
          "name": "disabled",
          "description": "Desativa o observador.",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "cps-select",
      "description": "Caixas de seleção permitem escolher itens de um menu de opções predefinidas.\n\n\n---\n\n\n\n\n### **Events:**\n - **cps-change** - Emitido quando a alteração do valor do controle é confirmada pelo usuário.\n- **cps-clear** - Emitido quando o botão de limpar é ativado (caso `clearable` esteja em uso).\n- **cps-input** - Emitido quando o controle recebe entrada de dados.\n- **cps-focus** - Emitido quando o controle obtém o foco.\n- **cps-blur** - Emitido quando o controle perde o foco.\n- **cps-show** - Emitido quando a lista suspensa de opções começa a ser exibida.\n- **cps-after-show** - Emitido após a lista suspensa de opções ser exibida e todas as animações terem sido concluídas.\n- **cps-hide** - Emitido quando a lista suspensa de opções começa a ser ocultada.\n- **cps-after-hide** - Emitido após a lista suspensa de opções ser ocultada e todas as animações terem sido concluídas.\n- **cps-invalid** - Emitido quando o elemento de formulário foi checado sobre sua validade, e suas condições não foram satisfeitas.\n\n### **Methods:**\n - **show()** - Exibe o menu seletor de opções.\n- **hide()** - Oculta o menu seletor de opções.\n- **checkValidity()** - Verifica a validade em um formulário, sem exibir uma mensagem de validação. Retorna `true` quando válido, e `false` quando inválido.\n- **getForm(): _HTMLFormElement | null_** - Obtém o formulário associado com este componente, se algum estiver.\n- **reportValidity()** - Verifica a validade em um formulário, e exibe as mensagem de validação do navegador caso o resultado seja inválido.\n- **setCustomValidity(message: _string_)** - Define uma mensagem de validação personalizada. Passar uma `string` vazia como argumento restaura a validade do elemento.\n- **focus(options: _FocusOptions_)** - Coloca o foco no campo.\n- **blur()** - Remove o foco do campo.\n\n### **Slots:**\n - _default_ - As opções da lista suspensa. Cada opção deve ser um `<cps-option>`. Opcionalmente, também pode conter `<cps-separator>` e `<cps-label>` para agrupar itens visualmente.\n- **label** - Rótulo informativo do campo. Caso a injeção de conteúdos complexos não seja necessária, alternativamente utilize apenas o atributo `label`.\n- **prefix** - Um ícone ou elemento similar antes do conteúdo principal.\n- **expand-icon** - Indicador que demonstra se o controle está expandido ou contraído (idealmente, um `<cps-icon>`). Se rotaciona de acordo com a abertura e o fechamento da lista suspensa.\n- **help-text** - Texto de apoio para auxílio ao preenchimento do campo. Caso a injeção de conteúdos complexos não seja necessária, alternativamente utilize apenas o atributo `help-text`.\n\n### **CSS Parts:**\n - **form-control** - O agrupamento de controle de formulário que engloba todos os elementos, como rótulo, caixa de entrada, e texto de apoio.\n- **form-control-label** - Elemento que embrulha o rótulo do controle de formulário.\n- **form-control-input** - Elemento que embrulha o campo do controle de formulário.\n- **form-control-help-text** - Elemento que embrulha o texto de apoio do controle de formulário.\n- **field** - O elemento base que embrulha o campo de entrada de dados, o ícone de expansão, e eventuais prefixo e botão de limpar.\n- **prefix** - O elemento que embrulha a renderização do _slot_ `prefix`.\n- **input** - O controle interno propriamente dito (um `<input>`), o qual apresenta o texto da opção atualmente selecionada, ou um eventual _placeholder_.\n- **menu** - O elemento base que embrulha o menu contextual (um `<div>`), onde as opções injetadas são posicionadas.\n- **chips** - O elemento que embrulha a lista de _chips_ (um `<div>`), renderizado no lugar da parte `input`, quando `multiple` está em uso.\n- **chip** - Cada etiqueta individual (um `<cps-chip>`), que representa uma opção selecionada, quando `multiple` está em uso.\n- **chip__base** - A parte `base` re-exportada de cada _chip_ de seleção múltipla.\n- **chip__content** - A parte `content` re-exportada de cada _chip_ de seleção múltipla.\n- **chip__remove-button** - O botão de remoção re-exportado de cada _chip_ de seleção múltipla.\n- **chip__remove-button__base** - A parte `base` re-exportada do botão de remoção de cada _chip_ de seleção múltipla.\n- **chip__remove-button__icon** - A parte `icon` re-exportada do botão de remoção de cada _chip_ de seleção múltipla.\n- **clear-button** - O botão de limpar o campo (caso `clearable` esteja em uso).\n- **clear-button__base** - A parte `base` re-exportada do botão de limpar.\n- **clear-button__icon** - A parte `icon` re-exportada do botão de limpar.\n- **expand-icon** - O elemento que embrulha a renderização do _slot_ `expand-icon`.",
      "attributes": [
        {
          "name": "id",
          "description": "O identificador único do campo, usado como estratégia de vinculação ao rótulo e/ou texto de apoio anexado.\nSe não for fornecido, um UUID é gerado automaticamente.",
          "values": []
        },
        {
          "name": "name",
          "description": "O nome do campo, submetido em par _name_/_value_ com os dados do formulário.",
          "values": []
        },
        {
          "name": "value",
          "description": "O valor do campo, submetido em par _name_/_value_ com os dados do formulário.\nQuando `multiple` é habilitado, o valor será uma lista de valores delimitados por espaço com base nas opções selecionadas.",
          "values": [{ "name": "string[]" }]
        },
        {
          "name": "size",
          "description": "O tamanho do campo.",
          "values": [
            { "name": "small" },
            { "name": "medium" },
            { "name": "large" }
          ]
        },
        {
          "name": "placeholder",
          "description": "Texto de espaço reservado para exibir uma dica quando o campo estiver vazio.",
          "values": []
        },
        {
          "name": "multiple",
          "description": "Habilita a possibilidade de selecionar mais de uma opção.",
          "values": []
        },
        {
          "name": "max-options-visible",
          "description": "O número máximo de opções selecionadas a serem exibidas no campo principal, quando `multiple` é usado.\nApós o limite, apresenta um _chip_ exibindo `+n` (sendo `n` o número de opções selecionadas mas não exibidas).\nO valor padrão é `0`, e significa nenhum limite (todas as opções selecionadas são exibidas).",
          "values": []
        },
        {
          "name": "disabled",
          "description": "Desabilita o campo.",
          "values": []
        },
        {
          "name": "clearable",
          "description": "Adiciona um botão de limpar exibido quando o campo não estiver vazio.",
          "values": []
        },
        {
          "name": "open",
          "description": "Indica se o menu de seleção de opções está aberto. Você pode alternar este atributo, manualmente ou reativamente, para mostrar e ocultar o menu. Opcionalmente, pode utilizar os métodos `show()` e `hide()` se preferir uma abordagem imperativa, e este atributo refletirá o estado aberto do menu em tempo real.",
          "values": []
        },
        {
          "name": "strategy",
          "description": "Estratégia a nível de CSS do posicionamento do menu. A estratégia `absolute` funciona bem na maioria dos casos, mas se rolagem externa causar o corte do menu (se um elemento pai for `overflow` igual a `auto` ou `scroll`), usar uma estratégia de posição `fixed` pode contornar o problema. Entretanto, posicionamento fixo pode não funcionar em todos os cenários, portanto deve ser habilitado apenas quando necessário, e testado com atenção.",
          "values": [{ "name": "absolute" }, { "name": "fixed" }]
        },
        {
          "name": "label",
          "description": "O rótulo do campo. Se você precisar injetar HTML, use o _slot_ `label` em vez disso.",
          "values": []
        },
        {
          "name": "placement",
          "description": "O posicionamento preferido do menu de seleção em relação ao campo base. Observe que o posicionamento real poderá variar, se o posicionamento desejado não for viável, no intuito de manter o painel dentro da área de visualização.",
          "values": [{ "name": "top" }, { "name": "bottom" }]
        },
        {
          "name": "help-text",
          "description": "O texto de apoio do campo. Se você precisar injetar HTML, use o _slot_ `help-text` em vez disso.",
          "values": []
        },
        {
          "name": "form",
          "description": "O formulário \"dono\" deste controle de formulário. Se não informado, o formulário mais próximo na hierarquia\naté este elemento será utilizado. Se informado, o valor deve ser um `id` único de um formulário\nexistente no documento.",
          "values": []
        },
        {
          "name": "required",
          "description": "Torna o campo como sendo de preenchimento obrigatório.",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "cps-separator",
      "description": "Separadores são usados para dividir ou agrupar elementos visualmente.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - O conteúdo interno do separador, recomendado um texto literal ou um `<cps-icon>`.\n\n### **CSS Properties:**\n - **--color** - A cor do separador. _(default: undefined)_\n- **--thickness** - A espessura do separador. _(default: undefined)_\n- **--spacing** - O espaçamento do separador em relação aos elementos à sua volta. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - O elemento principal propriamente dito (um `<div>`).",
      "attributes": [
        {
          "name": "vertical",
          "description": "Desenha o separador em uma orientação vertical, ao invés do padrão horizontal.",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "cps-skeleton",
      "description": "Indicador usado para apresentação visual de conteúdo que potencialmente ainda será exibido.\n\n\n---\n\n\n\n\n### **CSS Properties:**\n - **--color** - A cor base do indicador. _(default: undefined)_\n- **--accent-color** - A cor de destaque (ou brilho) a ser usada como efeito de carregamento. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - O elemento principal que sustenta o indicador (um `<div>`).\n- **indicator** - O elemento que representa o indicador em si, o qual recebe cor e animação.",
      "attributes": [
        {
          "name": "effect",
          "description": "Determina o efeito visual de carregamento do indicador.",
          "values": [
            { "name": "sheen" },
            { "name": "pulse" },
            { "name": "none" }
          ]
        },
        {
          "name": "rounded",
          "description": "Arredondamento dos cantos, com o padrão sendo bordas arredondas em `4px`.",
          "values": [
            { "name": "default" },
            { "name": "corner" },
            { "name": "full" },
            { "name": "none" }
          ]
        }
      ],
      "references": []
    },
    {
      "name": "cps-spinner",
      "description": "_Spinners_ são usados para exibir o andamento de uma operação de tempo indeterminado.\n\n\n---\n\n\n\n\n### **CSS Properties:**\n - **--track-width** - A espessura da linha de apresentação do indicador. _(default: undefined)_\n- **--track-color** - A cor da linha de caminho ao fundo do _spinner_. _(default: undefined)_\n- **--indicator-color** - A cor do indicador giratório do _spinner_. _(default: undefined)_\n- **--speed** - O tempo que leva para o indicador completa um ciclo de animação giratório. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - O elemento principal propriamente dito (um `<svg>`).",
      "attributes": [],
      "references": []
    },
    {
      "name": "cps-switch",
      "description": "Interruptores (_switches_) permitem alternar entre estados ligado e desligado.\n\n\n---\n\n\n\n\n### **Events:**\n - **cps-blur** - Emitido quando o controle perde o foco.\n- **cps-change** - Emitido quando a alteração do valor do controle é confirmada pelo usuário.\n- **cps-focus** - Emitido quando o controle obtém o foco.\n- **cps-input** - Emitido quando o controle recebe entrada de dados.\n- **cps-invalid** - Emitido quando o elemento de formulário foi checado sobre sua validade, e suas condições não foram satisfeitas.\n\n### **Methods:**\n - **click()** - Simula um _click_ no campo.\n- **focus(options: _FocusOptions_)** - Coloca o foco no campo.\n- **blur()** - Remove o foco do campo.\n- **checkValidity()** - Verifica a validade em um formulário, sem exibir uma mensagem de validação. Retorna `true` quando válido, e `false` quando inválido.\n- **getForm(): _HTMLFormElement | null_** - Obtém o formulário associado com este componente, se algum estiver.\n- **reportValidity()** - Verifica a validade em um formulário, e exibe as mensagem de validação do navegador caso o resultado seja inválido.\n- **setCustomValidity(message: _string_)** - Define uma mensagem de validação personalizada. Passar uma `string` vazia como argumento restaura a validade do elemento.\n\n### **Slots:**\n - _default_ - Rótulo informativo do campo. Caso a injeção de conteúdos complexos não seja necessária, alternativamente utilize apenas o atributo `label`.\n\n### **CSS Properties:**\n - **--border** - A espessura da borda do controle. Padrão: `1px`. _(default: undefined)_\n- **--padding** - Espaçamento horizontal entre o _knob_ e as extremidades internas do controle. Padrão: `2px`. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - O elemento base que embrulha o `<input>` e eventuais elementos de apoio para sua renderização.\n- **control** - O elemento arredondado que embrulha o estado de checagem do campo.\n- **control--checked** - Obtém para estilização o elemento `control`, somente quando o campo está marcado.\n- **knob** - O elemento circular que desliza sobre o controle dependendo do estado de checagem do campo.\n- **knob--checked** - Obtém para estilização o elemento `knob`, somente quando o campo está marcado.\n- **label** - O elemento que embrulha o rótulo do campo, um elemento `<label>`.",
      "attributes": [
        { "name": "title", "values": [] },
        {
          "name": "id",
          "description": "O identificador único do campo, usado como estratégia de vinculação ao rótulo e/ou texto de apoio anexado.\nSe não for fornecido, um UUID é gerado automaticamente.",
          "values": []
        },
        {
          "name": "name",
          "description": "O nome do campo, submetido em par _name_/_value_ com os dados do formulário.",
          "values": []
        },
        {
          "name": "value",
          "description": "O valor do campo, submetido em par _name_/_value_ com os dados do formulário.",
          "values": []
        },
        {
          "name": "label",
          "description": "O rótulo do campo. Se você precisar injetar HTML, use o _slot_ `label` em vez disso.",
          "values": []
        },
        {
          "name": "size",
          "description": "O tamanho do campo.",
          "values": [
            { "name": "small" },
            { "name": "medium" },
            { "name": "large" }
          ]
        },
        {
          "name": "disabled",
          "description": "Desabilita o campo.",
          "values": []
        },
        {
          "name": "checked",
          "description": "Determina o estado de checagem do campo, ou seja, quando presente, o campo encontra-se marcado.",
          "values": []
        },
        {
          "name": "form",
          "description": "O formulário \"dono\" deste controle de formulário. Se não informado, o formulário mais próximo na hierarquia\naté este elemento será utilizado. Se informado, o valor deve ser um `id` único de um formulário\nexistente no documento.",
          "values": []
        },
        {
          "name": "required",
          "description": "Torna o campo como sendo de preenchimento obrigatório.",
          "values": []
        },
        {
          "name": "fluid",
          "description": "Adiciona posicionamento fluido ao rótulo, permitindo que ocupe todo o espaço disponível à esquerda, automaticamente movendo o interruptor para a direita.",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "cps-tab-group",
      "description": "Grupos de abas organizam o conteúdo em um contêiner que mostra uma seção por vez.\n\n\n---\n\n\n\n\n### **Events:**\n - **cps-tab-show** - Emitido quando o painel de uma aba é exibido.\n- **cps-tab-hide** - Emitido quando o painel de uma aba é ocultado.\n\n### **Methods:**\n - **show(panel: _string_)** - Força a seleção da aba especificada, através do nome de seu painel.\n\n### **Slots:**\n - _default_ - Usado para agrupar painéis de abas dentro do grupo. Utilize apenas elementos `<cps-tab-panel>`.\n- **nav** - Usado para especificar as abas existentes dentro do grupo. Utilize apenas elementos `<cps-tab-item>`.\n\n### **CSS Properties:**\n - **--background-navigation** - A cor de fundo da área de navegação, onde as abas são dispostas. Padrão: `var(--cps-color-background-solid-primary)`. _(default: undefined)_\n- **--background-selection** - A cor de fundo das áreas selecionadas, ou seja, tanto a aba selecionada quanto o respectivo painel selecionado. Padrão: `var(--cps-color-background-solid-tertiary)`. _(default: undefined)_\n- **--border-color** - Cor de borda utilizada em todo o grupo, incluindo área de navegação, aba selecionada, e o respectivo painel selecionado. Padrão: `var(--cps-color-stroke-primary)`. _(default: undefined)_\n- **--border-width** - Espessura da borda da área de navegação. Padrão: `1px`. _(default: undefined)_\n- **--border-radius** - Arredondamento de bordas, incluindo área de navegação e painel selecionado. Padrão: `var(--cps-border-radius-large)`. _(default: undefined)_\n- **--indicator-color** - Cor do indicador de aba atualmente selecionada. Invisível por padrão. _(default: undefined)_\n- **--padding-navigation** - Espaçamentos internos da área de navegação. Padrão: `var(--cps-spacing-2)`. _(default: undefined)_\n- **--track-color** - Cor da área de posicionamento de indicador de seleção. Padrão: `var(--border-color)`. _(default: undefined)_\n- **--track-width** - Espessura da área de posicionamento de indicador de seleção. Padrão: `1px`. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - O elemento principal propriamente dito (um `<div>`).\n- **nav** - O contêiner da área de navegação (um `<div>`), o qual contém a lista de abas, e eventuais elementos auxiliares como os botões de rolagem automática.\n- **tabs** - O contêiner que embrulha as abas propriamente ditas (um `<div>`).\n- **active-tab-indicator** - O elemento indicativa de seleção atual, por padrão uma linha não apresentada visual, mas que pode ser ativada através da propriedade CSS `--indicator-color`.\n- **body** - O contêiner que embrulha o corpo do grupo, onde os painéis de abas são dispostos.\n- **scroll-button** - Seletor que intercepta tanto o botão de rolagem em direção ao início quanto em direção ao final da lista de abas (ambos `<cps-icon-button>`), exibidos quando existem abas transbordando, causando rolagem automática da lista de abas.\n- **scroll-button--start** - O botão de rolagem em direção ao início da lista de abas.\n- **scroll-button--start__base** - A parte `base` re-exportada do botão de rolagem em direção ao início da lista de abas.\n- **scroll-button--start__icon** - A parte `icon` re-exportada do botão de rolagem em direção ao início da lista de abas.\n- **scroll-button--end** - O botão de rolagem em direção ao final da lista de abas.\n- **scroll-button--end__base** - A parte `base` re-exportada do botão de rolagem em direção ao final da lista de abas.\n- **scroll-button--end__icon** - A parte `icon` re-exportada do botão de rolagem em direção ao final da lista de abas.",
      "attributes": [
        {
          "name": "placement",
          "description": "O posicionamento das abas dentro do grupo.",
          "values": [
            { "name": "top" },
            { "name": "bottom" },
            { "name": "start" },
            { "name": "end" }
          ]
        },
        {
          "name": "activation",
          "description": "Quando definido como `auto`, navegar pelas abas com as teclas de seta mostrará instantaneamente o painel de abas correspondente. Quando definido como `manual`, a aba receberá foco, mas não será exibida até que o usuário pressione a barra de espaço ou tecle `Enter`.",
          "values": [{ "name": "auto" }, { "name": "manual" }]
        },
        {
          "name": "no-scroll-controls",
          "description": "Desabilita as setas indicativas de rolagem automática quando as abas transbordarem em relação ao espaço disponível na área de navegação do grupo de abas.",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "cps-tab-item",
      "description": "Abas (_tab items_) são usadas dentro de [grupos de abas](/componentes/tab-group) para controlar a visibilidade de [painéis de abas](/components/tab-panel).\n\n\n---\n\n\n\n\n### **Events:**\n - **cps-close** - Emitido quando o botão de fechar da aba `closable` é acionado.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Coloca o foco na aba.\n- **blur()** - Remove o foco da aba.\n\n### **Slots:**\n - _default_ - O conteúdo da aba.\n- **prefix** - Um ícone ou elemento similar antes do conteúdo principal.\n\n### **CSS Properties:**\n - **--selected-background** - A cor de fundo da aba, quando ela está selecionada. Padrão: `var(--cps-color-background-solid-tertiary)`. Idealmente, se for personalizar, garanta que a cor aplicada é a mesma que a do painel de abas associado. _(default: undefined)_\n- **--selected-border** - A cor da borda da aba, quando ela está selecionada. Padrão: `var(--cps-color-stroke-primary)`. Idealmente, se for personalizar, garanta que a cor aplicada é a mesma que a do painel de abas associado. _(default: undefined)_\n- **--border-radius** - Arredondamento dos cantos da aba. Padrão: `var(--cps-spacing-1-5)`. _(default: undefined)_\n- **--inverse-rounded-corner-size** - Arredondamento invertido posicionado na base da aba, causando o efeito de uma curvatura para fora. Padrão: `8px`. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - O elemento principal propriamente dito (um `<div>`).\n- **prefix** - O elemento que embrulha a renderização do _slot_ `prefix`.\n- **content** - O elemento que embrulha o conteúdo principal, normalmente o _label_ do botão.\n- **close-button** - O botão de fechar a aba (caso `closable` esteja em uso).\n- **close-button__base** - A parte `base` re-exportada do botão de fechar.\n- **close-button__icon** - A parte `icon` re-exportada do botão de fechar.",
      "attributes": [
        {
          "name": "panel",
          "description": "Nome do painel de abas associado à aba. O painel deve estar no mesmo grupo de abas.",
          "values": []
        },
        {
          "name": "selected",
          "description": "Determinada que a aba está selecionada, representando que o painel atrelado a ela está marcado.",
          "values": []
        },
        {
          "name": "placement",
          "description": "O posicionamento da aba dentro de seu grupo, para a correta renderização de bordas nas posições ideais.",
          "values": [
            { "name": "top" },
            { "name": "bottom" },
            { "name": "start" },
            { "name": "end" }
          ]
        },
        {
          "name": "closable",
          "description": "Habilita a exibição de um botão de fechar para que o usuário possa remover a aba.",
          "values": []
        },
        {
          "name": "fluid",
          "description": "Força a aba a fluir através de seu contêiner.",
          "values": []
        },
        { "name": "disabled", "description": "Desabilita a aba.", "values": [] }
      ],
      "references": []
    },
    {
      "name": "cps-tab-panel",
      "description": "Painéis de abas (_tab panels_) são usados dentro de [grupos de abas](/componentes/tab-group) para exibir conteúdo em abas.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - O conteúdo do painel.\n\n### **CSS Properties:**\n - **--padding** - O espaçamento interno do painel. Padrão: `var(--cps-spacing-6)`. _(default: undefined)_\n- **--background** - A cor de fundo do painel. Padrão: `var(--cps-color-background-solid-tertiary)`. _(default: undefined)_\n- **--border-color** - A cor da borda do painel. Padrão: `var(--cps-color-stroke-primary)`. _(default: undefined)_\n- **--border-radius** - O arredondamento da borda do painel. Padrão: `var(--cps-border-radius-large)`. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - O elemento principal propriamente dito (um `<slot>`).",
      "attributes": [
        {
          "name": "name",
          "description": "O nome do painel, deve ser único dentro de um mesmo grupo de abas.",
          "values": []
        },
        {
          "name": "selected",
          "description": "Quando verdadeiro, o painel é exibido.",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "cps-textarea",
      "description": "Caixas de texto (_textareas_) coletam dados do usuário e permitem múltiplas linhas de texto.\n\n\n---\n\n\n\n\n### **Events:**\n - **cps-blur** - Emitido quando o controle perde o foco.\n- **cps-change** - Emitido quando a alteração do valor do controle é confirmada pelo usuário.\n- **cps-focus** - Emitido quando o controle obtém o foco.\n- **cps-input** - Emitido quando o controle recebe entrada de dados.\n- **cps-invalid** - Emitido quando o elemento de formulário foi checado sobre sua validade, e suas condições não foram satisfeitas.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Coloca o foco no campo.\n- **blur()** - Remove o foco do campo.\n- **select()** - Seleciona todo o texto existente no campo.\n- **scrollPosition(position: _{ top?: number; left?: number }_): _{ top: number; left: number } | undefined_** - Obtém ou atribui a posição de rolagem do campo.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Define as posições de início e término da seleção de texto do campo (índices baseados em `0`).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Atualiza um intervalo de texto do campo com o novo valor informado (índices baseados em `0`).\n- **checkValidity()** - Verifica a validade em um formulário, sem exibir uma mensagem de validação. Retorna `true` quando válido, e `false` quando inválido.\n- **getForm(): _HTMLFormElement | null_** - Obtém o formulário associado com este componente, se algum estiver.\n- **reportValidity()** - Verifica a validade em um formulário, e exibe as mensagem de validação do navegador caso o resultado seja inválido.\n- **setCustomValidity(message: _string_)** - Define uma mensagem de validação personalizada. Passar uma `string` vazia como argumento restaura a validade do elemento.\n\n### **Slots:**\n - **label** - Rótulo informativo do campo. Caso a injeção de conteúdos complexos não seja necessária, alternativamente utilize apenas o atributo `label`.\n- **help-text** - Texto de apoio para auxílio ao preenchimento do campo. Caso a injeção de conteúdos complexos não seja necessária, alternativamente utilize apenas o atributo `help-text`.\n\n### **CSS Parts:**\n - **form-control** - O agrupamento de controle de formulário que engloba todos os elementos, como rótulo, caixa de entrada, e texto de apoio.\n- **form-control-label** - Elemento que embrulha o rótulo do controle de formulário.\n- **form-control-input** - Elemento que embrulha o campo do controle de formulário.\n- **form-control-help-text** - Elemento que embrulha o texto de apoio do controle de formulário.\n- **base** - O elemento base que embrulha o `<textarea>`.\n- **textarea** - O controle `<textarea>` interno propriamente dito.",
      "attributes": [
        { "name": "title", "values": [] },
        {
          "name": "id",
          "description": "O identificador único do campo, usado como estratégia de vinculação ao rótulo e/ou texto de apoio anexado.\nSe não for fornecido, um UUID é gerado automaticamente.",
          "values": []
        },
        {
          "name": "name",
          "description": "O nome do campo, submetido em par _name_/_value_ com os dados do formulário.",
          "values": []
        },
        {
          "name": "value",
          "description": "O valor do campo, submetido em par _name_/_value_ com os dados do formulário.",
          "values": []
        },
        {
          "name": "size",
          "description": "O tamanho do campo.",
          "values": [
            { "name": "small" },
            { "name": "medium" },
            { "name": "large" }
          ]
        },
        {
          "name": "label",
          "description": "O rótulo do campo. Se você precisar injetar HTML, use o _slot_ `label` em vez disso.",
          "values": []
        },
        {
          "name": "help-text",
          "description": "O texto de apoio do campo. Se você precisar injetar HTML, use o _slot_ `help-text` em vez disso.",
          "values": []
        },
        {
          "name": "placeholder",
          "description": "Texto de espaço reservado para exibir uma dica quando o campo estiver vazio.",
          "values": []
        },
        {
          "name": "rows",
          "description": "O número de linhas para exibir por padrão.",
          "values": []
        },
        {
          "name": "resize",
          "description": "Controla como o campo pode ser redimensionado.",
          "values": [
            { "name": "none" },
            { "name": "vertical" },
            { "name": "auto" }
          ]
        },
        {
          "name": "disabled",
          "description": "Desabilita o campo.",
          "values": []
        },
        {
          "name": "readonly",
          "description": "Torna o campo somente leitura.",
          "values": []
        },
        {
          "name": "form",
          "description": "O formulário \"dono\" deste controle de formulário. Se não informado, o formulário mais próximo na hierarquia\naté este elemento será utilizado. Se informado, o valor deve ser um `id` único de um formulário\nexistente no documento.",
          "values": []
        },
        {
          "name": "required",
          "description": "Torna o campo como sendo de preenchimento obrigatório.",
          "values": []
        },
        {
          "name": "minlength",
          "description": "O tamanho mínimo de caracteres que serão considerados válidos.",
          "values": []
        },
        {
          "name": "maxlength",
          "description": "O tamanho máximo de caracteres que serão considerados válidos.",
          "values": []
        },
        {
          "name": "autocapitalize",
          "description": "Controla se e como a entrada de texto é capitalizada enquanto inserida pelo usuário.",
          "values": [
            { "name": "off" },
            { "name": "none" },
            { "name": "on" },
            { "name": "sentences" },
            { "name": "words" },
            { "name": "characters" }
          ]
        },
        {
          "name": "autocorrect",
          "description": "Indica se o recurso de correção automática do navegador deve ser utilizado.",
          "values": [{ "name": "off" }, { "name": "on" }]
        },
        {
          "name": "autocomplete",
          "description": "Especifica quais permissões o navegador tem para fornecer assistência no preenchimento dos valores do campo.\nConsulte\n[esta documentação no MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) para a lista de valores disponíveis.",
          "values": []
        },
        {
          "name": "autofocus",
          "description": "Indica que o campo deve receber foco assim que a página for carregada.",
          "values": []
        },
        {
          "name": "enterkeyhint",
          "description": "Utilizado para definir a aparência e o comportamento da tela `Enter` em teclados virtuais.",
          "values": [
            { "name": "enter" },
            { "name": "done" },
            { "name": "go" },
            { "name": "next" },
            { "name": "previous" },
            { "name": "search" },
            { "name": "send" }
          ]
        },
        {
          "name": "spellcheck",
          "description": "Habilita correção ortográfica no campo.",
          "values": []
        },
        {
          "name": "inputmode",
          "description": "Informa o navegador qual o tipo de dados esperado para ser inserido pelo usuário. Isso permite que o navegador\napresente o teclado virtual apropriado para o tipo de dados em dispositivos móveis.",
          "values": [
            { "name": "none" },
            { "name": "text" },
            { "name": "decimal" },
            { "name": "numeric" },
            { "name": "tel" },
            { "name": "search" },
            { "name": "email" },
            { "name": "url" }
          ]
        }
      ],
      "references": []
    },
    {
      "name": "cps-toggle-button",
      "description": "Botões alternáveis permitem marcar e desmarcar uma opção, individualmente ou como parte de um grupo.\n\n\n---\n\n\n\n\n### **Events:**\n - **cps-blur** - Emitido quando o botão perde o foco.\n- **cps-focus** - Emitido quando o botão obtém o foco.\n\n### **Methods:**\n - **click()** - Simula um _click_ no botão alternável.\n- **focus(options: _FocusOptions_)** - Coloca o foco no botão alternável.\n- **blur()** - Remove o foco do botão alternável.\n\n### **Slots:**\n - _default_ - O texto interno do botão.\n- **prefix** - Um ícone ou elemento similar antes do conteúdo principal.\n- **suffix** - Um ícone ou elemento similar após o conteúdo principal.\n\n### **CSS Parts:**\n - **base** - O elemento base que embrulha o botão (um `<div>`).\n- **button** - O elemento principal propriamente dito (um `<button>`).\n- **button--checked** - Obtém para estilização o elemento `button`, somente quando o este está marcado.\n- **prefix** - O elemento que embrulha a renderização do _slot_ `prefix`.\n- **content** - O elemento que embrulha o conteúdo principal, normalmente o _label_ do botão.\n- **suffix** - O elemento que embrulha a renderização do _slot_ `suffix`.",
      "attributes": [
        {
          "name": "checked",
          "description": "Determina o estado de checagem do campo, ou seja, quando presente, o campo encontra-se marcado.\n\nQuando utilizado dentro de um `RadioGroup`, o valor do grupo sobrepõe o estado de checagem individual do botão alternável, ou seja, não utilize este atributo quando o botão fizer parte de um _radio group_.",
          "values": []
        },
        {
          "name": "value",
          "description": "O valor do campo, submetido em par _name_/_value_ com os dados do formulário.\n\nQuando utilizado dentro de um `RadioGroup`, o valor é também utilizado como critério de marcação, mantendo-se o grupo e seus botões em sincronia. Desta forma, o valor deve ser único para cada botão alternável dentro do mesmo grupo.",
          "values": []
        },
        {
          "name": "disabled",
          "description": "Desabilita o botão alternável.",
          "values": []
        },
        {
          "name": "size",
          "description": "O tamanho do botão alternável.\n\nQuando usado dentro de um `RadioGroup`, o tamanho será determinado pelo tamanho do grupo, portanto, tipicamente esse atributo pode ser omitido.",
          "values": [
            { "name": "small" },
            { "name": "medium" },
            { "name": "large" }
          ]
        },
        {
          "name": "rounded",
          "description": "Arredondamento dos cantos do botão alternável, com o padrão sendo bordas arredondas em `4px`.",
          "values": [
            { "name": "default" },
            { "name": "corner" },
            { "name": "full" }
          ]
        }
      ],
      "references": []
    },
    {
      "name": "cps-tooltip",
      "description": "Dicas de ferramenta (_tooltips_) exibem informações adicionais contextuais.\n\n\n---\n\n\n\n\n### **Events:**\n - **cps-show** - Emitido quando a dica de ferramenta começa a ser exibida.\n- **cps-after-show** - Emitido após a dica de ferramenta ser exibida e todas as animações terem sido concluídas.\n- **cps-hide** - Emitido quando a dica de ferramenta começa a ser ocultada.\n- **cps-after-hide** - Emitido após a dica de ferramenta ser ocultada e todas as animações terem sido concluídas.\n\n### **Methods:**\n - **show()** - Força a exibição imediata da dica de ferramenta.\n- **hide()** - Força a ocultação imediata da dica de ferramenta.\n\n### **Slots:**\n - _default_ - O elemento alvo da dica de ferramenta. Evite ter mais de um elemento alvo na hierarquia, pois os subsequentes serão ignorados (neste caso, embrulhe os vários elementos em uma _tag_ principal, como `<span>` ou `<div>`).\n- **content** - O conteúdo a ser renderizado na dica de ferramenta. Alternativamente, você pode usar o atributo `content`.\n\n### **CSS Properties:**\n - **--max-width** - O tamanho máximo da dica de ferramenta, antes que seu conteúdo seja quebrado em outra linha. _(default: undefined)_\n- **--hide-delay** - A quantidade de tempo a esperar antes de ocultar a dica de ferramenta, ao tirar o ponteiro. _(default: undefined)_\n- **--show-delay** - A quantidade de tempo a esperar antes de exibir a dica de ferramenta, ao colocar o ponteiro sobre. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - O elemento base que embrulha o componente (um elemento `<cps-flyout>`).\n- **base__container** - A parte CSS `container` exportada do _flyout_ base. Use-a para atingir o contêiner do elemento `<cps-flyout>` base, para estilizações avançadas deste.\n- **base__container** - A parte CSS `arrow` exportada do _flyout_ base. Use-a para atingir a seta do elemento `<cps-flyout>` base, para estilizações avançadas desta.\n- **body** - O corpo da dica de ferramenta, onde seu conteúdo é renderizado.",
      "attributes": [
        {
          "name": "content",
          "description": "O conteúdo da dica de ferramenta. Se precisar exibir conteúdo HTML ao invés de texto simples, use o _slot_ `content` em vez deste atributo.",
          "values": []
        },
        {
          "name": "placement",
          "description": "O posicionamento preferido da dica de ferramenta.\nObserve que o posicionamento real pode variar conforme necessário,\npara manter a dica de ferramenta dentro da janela de visualização.",
          "values": [
            { "name": "" },
            { "name": "top" },
            { "name": "top-start" },
            { "name": "top-end" },
            { "name": "right" },
            { "name": "right-start" },
            { "name": "right-end" },
            { "name": "bottom" },
            { "name": "bottom-start" },
            { "name": "bottom-end" },
            { "name": "left" },
            { "name": "left-start" },
            { "name": "left-end" }
          ]
        },
        {
          "name": "disabled",
          "description": "Desabilita a dica de ferramenta, para que ela não seja exibida quando o elemento alvo é interagido.",
          "values": []
        },
        {
          "name": "distance",
          "description": "A distância em pixels do _flyout_ em relação à seu elemento alvo, para afastá-lo ou aproximá-lo deste.\nPor exemplo, se `placement` for `top` ou `bottom`, `distance` definirá a distância do _flyout_ no eixo vertical.",
          "values": []
        },
        {
          "name": "skidding",
          "description": "A distância em pixels do _flyout_ no eixo de deslocamento de seu elemento alvo.\nPor exemplo, se `placement` for `top` ou `bottom`, `skidding` definirá a distância do _flyout_ no eixo horizontal.",
          "values": []
        },
        {
          "name": "open",
          "description": "Indica se a dica de ferramenta está ou não visível atualmente.\nVocê pode usar isso declarativamente e reativamente, ao invés de precisar\nimperativamente dos métodos `show` e `hide`.",
          "values": []
        },
        {
          "name": "trigger",
          "description": "Controla como a dica de ferramenta é ativada. As opções possíveis incluem `click`, `hover`, `focus` e `manual`.\nMúltiplas opções podem ser passadas, separando-as com um espaço, exceto o valor `manual`.\nQuando `manual` é usado, a dica de ferramenta deve ser exclusivamente manipulada programaticamente.",
          "values": []
        },
        {
          "name": "hoist",
          "description": "Habilite esta opção para que a dica de ferramenta seja exibida em um contêiner de nível superior\n(usualmente, o `<body>`), ao invés de ser renderizado junto ao seu elemento alvo.\n\nIsso é útil quando você precisa exibir conteúdo que pode ser cortado por um contêiner pai que\ntenha `overflow` `hidden`, `scroll` ou `auto`, ou quando você precisa exibir a dica de ferramenta\nem um contêiner com um `z-index` menor que o do seu elemento alvo.\n\nIçar usa uma estratégia de posicionamento fixo que funciona em muitos cenários,\nmas não em todos, então teste com cautela se precisar habilitar.",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "cps-visually-hidden",
      "description": "O utilitário visualmente oculto (_visually hidden_) torna seu conteúdo acessível sem exibir na interface.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - O conteúdo a ser visualmente oculto.",
      "attributes": [],
      "references": []
    }
  ]
}