{
"version": "3.8.8",
"generatedAt": "2026-07-24T12:57:48.680Z",
"components": [
{
"name": "Accordion",
"tag": "ctt-accordion",
"category": "Data Display",
"description": "## Visão Geral\nO Accordion permite aos utilizadores alternar a visibilidade de conteúdo, expandindo ou recolhendo secções.\n\n\nQuando usar
\n- Para organizar grandes quantidades de informação em espaço reduzido.\n- Para divulgar progressivamente informações (divulgação progressiva).\n- Para secções de Perguntas Frequentes (FAQ).\n \n\n\nQuando não usar
\n- Quando o conteúdo for crucial e precisar de estar sempre visível.\n- Se houver pouca informação para esconder (prefira listas ou texto corrido).\n \n\n\nAcessibilidade
\n- Use títulos de secção claros e informativos.\n- Garanta navegação por teclado e estado expandido recolhido programaticamente.\n \n\n\nComponentes relacionados
\n- SidePanel para agrupamento de secções de navegação.\n- Modal para conteúdos que exigem foco exclusivo.\n \n\n\nDocumentação relacionada
\n- [Patterns / Flows / Multi-Step Flow](?path=/docs/padrões-fluxos-fluxo-multi-etapa--docs)\n- [Guias / Acessibilidade](?path=/docs/guias-acessibilidade--docs)\n ",
"whenToUse": "- Para organizar grandes quantidades de informação em espaço reduzido.\n- Para divulgar progressivamente informações (divulgação progressiva).\n- Para secções de Perguntas Frequentes (FAQ).",
"whenNotToUse": "- Quando o conteúdo for crucial e precisar de estar sempre visível.\n- Se houver pouca informação para esconder (prefira listas ou texto corrido).",
"properties": [
{
"name": "title",
"type": "string",
"defaultValue": ""
},
{
"name": "description",
"type": "string",
"defaultValue": ""
},
{
"name": "show-description",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "open",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "aria-label",
"type": "string",
"defaultValue": ""
}
],
"events": [
{
"name": "toggle",
"description": "Custom event: toggle"
}
],
"examples": [],
"accessibility": "ARIA attributes support"
},
{
"name": "Breadcrumbs",
"tag": "ctt-breadcrumbs",
"category": "Navigation",
"description": "## Visão Geral\nOs Breadcrumbs (ou \"migalhas de pão\") indicam a localização do utilizador na hierarquia do site ou aplicação.\n\n\nQuando usar
\n- Para mostrar a estrutura hierárquica do site.\n- Para permitir navegação rápida para páginas de nível superior.\n- Em sites com mais de 2 níveis de profundidade.\n \n\n\nQuando não usar
\n- Em estruturas de navegação planas (basta o Menu principal).\n- Para mostrar o histórico de visitas (se não corresponder à hierarquia do site).\n \n\n\nAcessibilidade
\n- Defina aria-label claro para a navegação de breadcrumbs.\n- O último item deve representar o estado atual e não ser acionável.\n \n\n\nComponentes relacionados
\n- SidePanel para navegação estrutural lateral.\n- Pagination para navegação entre páginas de dados.\n \n\n\nDocumentação relacionada
\n- [Patterns / Flows / Multi-Step Flow](?path=/docs/patterns-flows-multi-step-flow--docs)\n- [Glossário de Documentação](?path=/docs/guias-glossário-de-documentação--docs)\n ",
"whenToUse": "- Para mostrar a estrutura hierárquica do site.\n- Para permitir navegação rápida para páginas de nível superior.\n- Em sites com mais de 2 níveis de profundidade.",
"whenNotToUse": "- Em estruturas de navegação planas (basta o Menu principal).\n- Para mostrar o histórico de visitas (se não corresponder à hierarquia do site).",
"properties": [
{
"name": "items",
"type": "BreadcrumbItem[]",
"defaultValue": "[]"
},
{
"name": "aria-label",
"type": "string",
"defaultValue": "Breadcrumb navigation"
},
{
"name": "role",
"type": "string",
"defaultValue": "navigation"
}
],
"events": [
{
"name": "navigate",
"description": "Custom event: navigate"
}
],
"examples": [],
"accessibility": "ARIA attributes support"
},
{
"name": "Button",
"tag": "ctt-button",
"category": "Actions",
"description": "## Visão geral\nOs botões permitem que os utilizadores realizem ações e façam escolhas com um único toque ou clique.\n\n\nQuando usar
\n\n- Para ações principais (Submeter, Guardar, Continuar).\n- Para navegação em fluxos (Voltar, Seguinte).\n- Para ações secundárias ou de cancelamento.\n \n\n\nQuando não usar
\n\n- Como links de navegação simples (use o componente Link).\n- Para agrupar demasiadas ações (considere um Menu ou Dropdown).\n \n\n\nAcessibilidade
\n\n- Em botões iconOnly, forneça sempre ariaLabel.\n- Evite múltiplos botões primários no mesmo contexto visual.\n \n\n\nComponentes relacionados
\n\n- [ButtonDropdown](?path=/docs/componentes-ações-dropdown-de-botão-buttondropdown--docs) para ações com menu.\n- [ButtonSwitch](?path=/docs/componentes-ações-alternador-de-botão-buttonswitch--docs) para alternar opções mutuamente exclusivas.\n- [Chip](?path=/docs/componentes-visualização-etiqueta-interativa-chip--docs) para ações de filtragem ou seleção.\n- [Tag](?path=/docs/componentes-visualização-etiqueta-tag--docs) para rótulos estáticos (não interativos).\n \n\n\nDocumentação relacionada
\n\n- [Guia de Acessibilidade](?path=/docs/guias-acessibilidade--docs)\n- [Glossário de Documentação](?path=/docs/guias-glossário-de-documentação--docs)\n ",
"whenToUse": "- Para ações principais (Submeter, Guardar, Continuar).\n- Para navegação em fluxos (Voltar, Seguinte).\n- Para ações secundárias ou de cancelamento.",
"whenNotToUse": "- Como links de navegação simples (use o componente Link).\n- Para agrupar demasiadas ações (considere um Menu ou Dropdown).",
"properties": [
{
"name": "variant",
"type": "primary | secondary | tertiary | basic | plain | negative | loading",
"options": [
"primary",
"secondary",
"tertiary",
"basic",
"plain",
"negative",
"loading"
],
"defaultValue": "primary"
},
{
"name": "size",
"type": "small | medium | large",
"options": [
"small",
"medium",
"large"
],
"defaultValue": "medium"
},
{
"name": "label",
"type": "string",
"defaultValue": ""
},
{
"name": "icon-left",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "icon-left-name",
"type": "CttIconName",
"defaultValue": "person"
},
{
"name": "icon-right",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "icon-right-name",
"type": "CttIconName",
"defaultValue": "person"
},
{
"name": "icon-only",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "icon-name",
"type": "CttIconName",
"defaultValue": "person"
},
{
"name": "border-radius",
"type": "none | pill | small | extraSmall",
"options": [
"none",
"pill",
"small",
"extraSmall"
],
"defaultValue": "pill"
},
{
"name": "disabled",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "ariaLabel",
"type": "string",
"defaultValue": ""
},
{
"name": "id",
"type": "string",
"defaultValue": ""
},
{
"name": "type",
"type": "string",
"defaultValue": ""
},
{
"name": "skin",
"type": "neutral | primary | negative",
"options": [
"neutral",
"primary",
"negative"
],
"defaultValue": "neutral"
},
{
"name": "icon-animation",
"type": "rotate | pulse",
"options": [
"rotate",
"pulse"
],
"defaultValue": ""
},
{
"name": "loading",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "fluid",
"type": "boolean",
"defaultValue": "false"
}
],
"events": [
{
"name": "submit",
"description": "Custom event: submit"
},
{
"name": "click",
"description": "Custom event: click"
}
],
"examples": [],
"accessibility": "ARIA attributes support"
},
{
"name": "ButtonDropdown",
"tag": "ctt-button-dropdown",
"category": "Actions",
"description": "## Visão Geral\nUm componente que combina um botão com um menu suspenso (dropdown), permitindo aos utilizadores selecionar uma opção de uma lista.\n\n\nQuando usar
\n- Quando houver múltiplas ações ou opções relacionadas que ocupariam demasiado espaço se fossem botões individuais.\n- Para filtros ou menus de seleção simples.\n\n \n\n\nQuando não usar
\n- Quando as opções são vitais e devem estar sempre visíveis (use botões separados ou Radio buttons).\n- Para navegação complexa (use um Menu dedicado).\n \n\n\nAcessibilidade
\n- Garanta labels claros para botão e opções.\n- Evite listas muito longas sem agrupamento semântico.\n \n\n\nComponentes relacionados
\n- Button para ação única e prioritária.\n- DropdownInput para seleção de valor em formulários.\n \n\n\nDocumentação relacionada
\n- [Patterns / Forms / Form Validation](?path=/docs/patterns-forms-form-validation--docs)\n- [Glossário de Documentação](?path=/docs/guias-glossário-de-documentação--docs)\n ",
"whenToUse": "- Quando houver múltiplas ações ou opções relacionadas que ocupariam demasiado espaço se fossem botões individuais.\n- Para filtros ou menus de seleção simples.",
"whenNotToUse": "- Quando as opções são vitais e devem estar sempre visíveis (use botões separados ou Radio buttons).\n- Para navegação complexa (use um Menu dedicado).",
"properties": [
{
"name": "buttonVariant",
"type": "primary | secondary | tertiary | basic | ghost",
"options": [
"primary",
"secondary",
"tertiary",
"basic",
"ghost"
],
"defaultValue": "primary"
},
{
"name": "size",
"type": "small | medium | large",
"options": [
"small",
"medium",
"large"
],
"defaultValue": "medium"
},
{
"name": "label",
"type": "string",
"defaultValue": ""
},
{
"name": "options",
"type": "T[]",
"defaultValue": "[]"
},
{
"name": "disabled",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "has-description",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "update-label-on-select",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "showChevron",
"type": "boolean",
"defaultValue": "true"
},
{
"name": "icon-left",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "icon-left-name",
"type": "CttIconName",
"defaultValue": "person"
},
{
"name": "borderRadius",
"type": "none | pill | small | extraSmall",
"options": [
"none",
"pill",
"small",
"extraSmall"
],
"defaultValue": "extraSmall"
},
{
"name": "loading",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "open",
"type": "any"
}
],
"events": [
{
"name": "change",
"description": "Custom event: change"
}
],
"examples": []
},
{
"name": "ButtonSwitch",
"tag": "ctt-button-switch",
"category": "Actions",
"description": "## Visão Geral\nUm componente que permite aos utilizadores alternar entre múltiplos estados mutuamente exclusivos.\n\n\nQuando usar
\n- Para alternar entre diferentes modos de visualização (ex: Lista vs Grelha).\n- Para opções de configuração limitadas e mutuamente exclusivas que beneficiam de seleção imediata.\n- Como alternativa visualmente mais rica aos botões de rádio tradicionais.\n \n\n\nQuando não usar
\n- Para seleções múltiplas (use Checkboxes).\n- Quando existem demasiadas opções (use um Select ou Dropdown).\n- Para ações imediatas que não sejam de seleção de estado (use Buttons).\n \n\n\nAcessibilidade
\n- Use labels curtos e inequívocos por opção.\n- Mantenha contraste suficiente para estado selecionado.\n \n\n\nComponentes relacionados
\n- RadioButton para escolhas mutuamente exclusivas em formulários.\n- ToggleSwitch para estados binários simples.\n \n\n\nDocumentação relacionada
\n- [Patterns / Forms / Form Validation](?path=/docs/patterns-forms-form-validation--docs)\n- [Guias / Acessibilidade](?path=/docs/guias-acessibilidade--docs)\n ",
"whenToUse": "- Para alternar entre diferentes modos de visualização (ex: Lista vs Grelha).\n- Para opções de configuração limitadas e mutuamente exclusivas que beneficiam de seleção imediata.\n- Como alternativa visualmente mais rica aos botões de rádio tradicionais.",
"whenNotToUse": "- Para seleções múltiplas (use Checkboxes).\n- Quando existem demasiadas opções (use um Select ou Dropdown).\n- Para ações imediatas que não sejam de seleção de estado (use Buttons).",
"properties": [
{
"name": "items",
"type": "ButtonSwitchItem[]",
"defaultValue": "[]"
},
{
"name": "value",
"type": "string",
"defaultValue": ""
},
{
"name": "label",
"type": "string",
"defaultValue": ""
},
{
"name": "variant",
"type": "primary | secondary",
"options": [
"primary",
"secondary"
],
"defaultValue": "primary"
},
{
"name": "size",
"type": "s | m | l",
"options": [
"s",
"m",
"l"
],
"defaultValue": "m"
},
{
"name": "defaultValue",
"type": "string",
"defaultValue": ""
},
{
"name": "showTextAllDevices",
"type": "boolean",
"defaultValue": "true"
},
{
"name": "disabled",
"type": "boolean",
"defaultValue": "false"
}
],
"events": [
{
"name": "change",
"description": "Custom event: change"
}
],
"examples": [],
"accessibility": "ARIA attributes support"
},
{
"name": "Card",
"tag": "ctt-card",
"category": "Data Display",
"description": "## Overview\nO componente Card é um contentor flexível usado para agrupar conteúdo e ações relacionados num único tópico.\n\n\nQuando usar
\n\n- Para agrupar informações relacionadas (ex: detalhes de um produto, perfil de utilizador).\n- Para criar listas de itens clicáveis ou selecionáveis.\n- Para dashboards e layouts de grelha.\n \n\n\nQuando não usar
\n\n- Para exibir apenas uma imagem sem contexto (use Image).\n- Para diálogos ou avisos modais (use Modal).\n- Para contentores de layout genéricos invisíveis (use divs ou CSS Grid).\n \n\n\n⚡ Interatividade: onClick vs Eventos de Seleção
\n\n**1. Quando usar \\",
"whenToUse": "- Para agrupar informações relacionadas (ex: detalhes de um produto, perfil de utilizador).\n- Para criar listas de itens clicáveis ou selecionáveis.\n- Para dashboards e layouts de grelha.",
"whenNotToUse": "- Para exibir apenas uma imagem sem contexto (use Image).\n- Para diálogos ou avisos modais (use Modal).\n- Para contentores de layout genéricos invisíveis (use divs ou CSS Grid).",
"properties": [
{
"name": "title",
"type": "string",
"defaultValue": ""
},
{
"name": "selected",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "disabled",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "selectable",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "error",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "size",
"type": "default | small",
"options": [
"default",
"small"
],
"defaultValue": "default"
},
{
"name": "variant",
"type": "primary | secondary | highlighted",
"options": [
"primary",
"secondary",
"highlighted"
],
"defaultValue": "primary"
},
{
"name": "max-width",
"type": "string",
"defaultValue": ""
},
{
"name": "aria-label",
"type": "string",
"defaultValue": ""
},
{
"name": "iconName",
"type": "string",
"defaultValue": ""
},
{
"name": "full-height",
"type": "boolean",
"defaultValue": "false"
}
],
"events": [
{
"name": "card-before-select",
"description": "Custom event: card-before-select"
},
{
"name": "card-select",
"description": "Custom event: card-select"
}
],
"examples": [],
"accessibility": "ARIA attributes support"
},
{
"name": "Checkbox",
"tag": "ctt-checkbox",
"category": "Form Inputs",
"description": "## Visão Geral\nO componente Checkbox permite ao utilizador selecionar uma ou mais opções de um conjunto.\n\n\nQuando usar
\n- Para selecionar uma ou mais opções independentes numa lista.\n- Para ativar ou desativar uma única opção (ex: \"Aceito os termos\").\n- Quando as opções não são mutuamente exclusivas e o utilizador pode selecionar qualquer combinação.\n \n\n\nQuando não usar
\n- Para opções mutuamente exclusivas onde apenas uma seleção é permitida (use **Radio Button** ou **Button Switch**).\n- Para iniciar uma ação imediata (use **Button**).\n \n\n\nAcessibilidade
\n- Use labels claros e descritivos por opção.\n- Garanta feedback textual quando em estado de erro.\n \n\n\nComponentes relacionados
\n- RadioButton para escolhas mutuamente exclusivas.\n- ToggleSwitch para alternância binária de estado.\n \n\n\nDocumentação relacionada
\n- [Patterns / Forms / Form Validation](?path=/docs/patterns-forms-form-validation--docs)\n- [Component Documentation Template](?path=/docs/guias-template-de-documentação-de-componentes--docs)\n ",
"whenToUse": "- Para selecionar uma ou mais opções independentes numa lista.\n- Para ativar ou desativar uma única opção (ex: \"Aceito os termos\").\n- Quando as opções não são mutuamente exclusivas e o utilizador pode selecionar qualquer combinação.",
"whenNotToUse": "- Para opções mutuamente exclusivas onde apenas uma seleção é permitida (use **Radio Button** ou **Button Switch**).\n- Para iniciar uma ação imediata (use **Button**).",
"properties": [
{
"name": "label",
"type": "string",
"defaultValue": ""
},
{
"name": "name",
"type": "string",
"defaultValue": ""
},
{
"name": "value",
"type": "string",
"defaultValue": ""
},
{
"name": "disabled",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "required",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "error",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "id",
"type": "string",
"defaultValue": "`ctt-checkbox-${Math.random().toString(36).substring(2, 9)}`"
},
{
"name": "size",
"type": "small | medium | large",
"options": [
"small",
"medium",
"large"
],
"defaultValue": "medium"
},
{
"name": "className",
"type": "string",
"defaultValue": ""
},
{
"name": "aria-label",
"type": "string | null",
"defaultValue": "null"
},
{
"name": "aria-labelledby",
"type": "string | null",
"defaultValue": "null"
},
{
"name": "checked",
"type": "any"
},
{
"name": "error-text",
"type": "string",
"defaultValue": ""
}
],
"events": [
{
"name": "change",
"description": "Custom event: change"
}
],
"examples": [],
"accessibility": "ARIA attributes support"
},
{
"name": "Chip",
"tag": "ctt-chip",
"category": "Form Inputs",
"description": "## Visão Geral\nAs Chips são etiquetas compactas que representam um atributo, texto, entidade ou ação. Permitem aos utilizadores filtrar conteúdo, selecionar opções ou desencadear ações.\n\n\nQuando usar
\n- Para filtrar conteúdo por categoria ou tag.\n- Para mostrar atributos de um item (ex: estado, etiqueta).\n- Para seleções de múltipla escolha compactas.\n- Como input de dados (ex: adicionar contactos).\n \n\n\nQuando não usar
\n- Para botões de ação principais (use Button).\n- Para mensagens de estado ou alertas (use Tag ou Badge).\n- Para links longos ou navegação principal.\n \n\n\nAcessibilidade
\n- Garanta texto legível e objetivo dentro da chip.\n- Em chips removíveis, forneça contexto de ação para leitores de ecrã.\n \n\n\nComponentes relacionados
\n- Tag para sinalização semântica de estado.\n- Button para ações primárias.\n \n\n\nDocumentação relacionada
\n- [Patterns / Feedback / Empty and Error States](?path=/docs/patterns-feedback-empty-and-error-states--docs)\n- [Glossário de Documentação](?path=/docs/guias-glossário-de-documentação--docs)\n ",
"whenToUse": "- Para filtrar conteúdo por categoria ou tag.\n- Para mostrar atributos de um item (ex: estado, etiqueta).\n- Para seleções de múltipla escolha compactas.\n- Como input de dados (ex: adicionar contactos).",
"whenNotToUse": "- Para botões de ação principais (use Button).\n- Para mensagens de estado ou alertas (use Tag ou Badge).\n- Para links longos ou navegação principal.",
"properties": [
{
"name": "size",
"type": "s | m | l",
"options": [
"s",
"m",
"l"
],
"defaultValue": "m"
},
{
"name": "shape",
"type": "none | xs | s | pill",
"options": [
"none",
"xs",
"s",
"pill"
],
"defaultValue": "pill"
},
{
"name": "removable",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "disabled",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "selected",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "href",
"type": "string | undefined",
"defaultValue": "undefined"
},
{
"name": "icon",
"type": "CttIconName | undefined",
"defaultValue": "undefined"
},
{
"name": "avatarSrc",
"type": "string | undefined",
"defaultValue": "undefined"
},
{
"name": "aria-label",
"type": "string",
"defaultValue": ""
}
],
"events": [
{
"name": "ctt-toggle",
"description": "Custom event: ctt-toggle"
},
{
"name": "ctt-remove",
"description": "Custom event: ctt-remove"
}
],
"examples": [],
"accessibility": "ARIA attributes support"
},
{
"name": "DropdownInput",
"tag": "ctt-dropdown-input",
"category": "Form Inputs",
"description": "## Visão Geral\nO componente Dropdown permite aos utilizadores selecionar uma ou mais opções de uma lista. É uma alternativa compacta aos Radio Buttons ou Checkboxes quando o espaço é limitado ou o número de opções é grande.\n\n\nQuando usar
\n\n- Para selecionar um valor de uma lista predefinida (7-15+ opções).\n- Quando o espaço no ecrã é limitado.\n- Para formulários onde a validação de entrada é necessária.\n \n\n\nQuando não usar
\n\n- Para menos de 3 opções (use **Radio Buttons** ou **Button Switch**).\n- Quando as opções precisam de ser comparadas lado a lado.\n \n\n\n🪟 Portal Rendering & Overflow Strategy
\n\nPor omissão, o dropdown usa **portal rendering** para garantir que a lista de opções nunca é cortada por \\",
"whenToUse": "- Para selecionar um valor de uma lista predefinida (7-15+ opções).\n- Quando o espaço no ecrã é limitado.\n- Para formulários onde a validação de entrada é necessária.",
"whenNotToUse": "- Para menos de 3 opções (use **Radio Buttons** ou **Button Switch**).\n- Quando as opções precisam de ser comparadas lado a lado.",
"properties": [
{
"name": "label",
"type": "string",
"defaultValue": ""
},
{
"name": "name",
"type": "string",
"defaultValue": ""
},
{
"name": "hint",
"type": "string",
"defaultValue": ""
},
{
"name": "placeholder",
"type": "string",
"defaultValue": ""
},
{
"name": "options",
"type": "T[]",
"defaultValue": "[]"
},
{
"name": "multiple",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "checkbox",
"type": "boolean",
"defaultValue": "true"
},
{
"name": "max-visible-tags",
"type": "number",
"defaultValue": "0"
},
{
"name": "disabled",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "required",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "size",
"type": "small | medium | large",
"options": [
"small",
"medium",
"large"
],
"defaultValue": "== large) {\n return large"
},
{
"name": "has-description",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "overflow-strategy",
"type": "escape | clip",
"options": [
"escape",
"clip"
],
"defaultValue": "escape"
},
{
"name": "searchable",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "error",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "error-text",
"type": "string",
"defaultValue": ""
}
],
"events": [
{
"name": "change",
"description": "Custom event: change"
},
{
"name": "ctt-change",
"description": "Custom event: ctt-change"
},
{
"name": "focus",
"description": "Custom event: focus"
},
{
"name": "blur",
"description": "Custom event: blur"
}
],
"examples": [],
"accessibility": "ARIA attributes support"
},
{
"name": "ErrorPage",
"tag": "ctt-error-page",
"category": "Feedback",
"description": "## Visão Geral\nO componente **ErrorPage** é utilizado para mostrar páginas de erro padrão (ex: 404, 500) ou estados de manutenção.\nEle vem pré-configurado com textos para os erros mais comuns, mas permite personalização do título, mensagem e imagem.\n\n\nWhen to use
\n- Para estados de erro de rota, rede ou disponibilidade de serviço.\n- Para páginas de manutenção com guidance de recuperação.\n \n\n\nWhen not to use
\n- Para feedback temporário de ação (use ToasterAlert).\n- Para validações inline de formulários (use estados de erro nos próprios inputs).\n \n\n\nAccessibility
\n- Forneça texto alternativo adequado para ilustrações de erro.\n- Mensagens devem ser claras, diretas e com próxima ação explícita.\n \n\n\nComponentes Relacionados
\n- ToasterAlert para erros não bloqueantes.\n- Modal para confirmação ou interrupção localizada de fluxo.\n \n\n\nDocumentação Relacionada
\n- [Patterns / Feedback / Empty and Error States](?path=/docs/patterns-feedback-empty-and-error-states--docs)\n- [Guias / Acessibilidade](?path=/docs/guias-acessibilidade--docs)\n ",
"properties": [
{
"name": "type",
"type": "ErrorPageType",
"defaultValue": "404"
},
{
"name": "image-src",
"type": "string",
"defaultValue": ""
},
{
"name": "image-alt",
"type": "string",
"defaultValue": "Erro"
},
{
"name": "title-text",
"type": "string",
"defaultValue": ""
},
{
"name": "message-text",
"type": "string",
"defaultValue": ""
},
{
"name": "button-label",
"type": "string",
"defaultValue": "Voltar à homepage"
}
],
"events": [
{
"name": "ctt-action-click",
"description": "Custom event: ctt-action-click"
}
],
"examples": []
},
{
"name": "IbanInput",
"tag": "ctt-iban-input",
"category": "Form Inputs",
"description": "## Visão Geral\nUm componente de input especializado para validação e formatação de IBAN (International Bank Account Number).\n\n\nQuando usar
\n- Para capturar contas bancárias em formulários de pagamento ou cadastro.\n- Quando precisar de validação robusta de IBAN em tempo real (validação SEPA).\n- Em fluxos financeiros que exigem precisão nos dados bancários.\n \n\n\nQuando não usar
\n- Para números de conta que não seguem o padrão IBAN (contas internacionais fora da SEPA).\n- Como um input de texto genérico (use \\",
"whenToUse": "- Para capturar contas bancárias em formulários de pagamento ou cadastro.\n- Quando precisar de validação robusta de IBAN em tempo real (validação SEPA).\n- Em fluxos financeiros que exigem precisão nos dados bancários.",
"whenNotToUse": "- Para números de conta que não seguem o padrão IBAN (contas internacionais fora da SEPA).\n- Como um input de texto genérico (use \\",
"properties": [
{
"name": "label",
"type": "string",
"defaultValue": ""
},
{
"name": "placeholder",
"type": "string",
"defaultValue": ""
},
{
"name": "hint",
"type": "string",
"defaultValue": ""
},
{
"name": "value",
"type": "string",
"defaultValue": ""
},
{
"name": "name",
"type": "string",
"defaultValue": ""
},
{
"name": "disabled",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "required",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "readonly",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "size",
"type": "small | medium | large",
"options": [
"small",
"medium",
"large"
],
"defaultValue": "medium"
},
{
"name": "country",
"type": "string | null",
"defaultValue": "null"
},
{
"name": "id",
"type": "string",
"defaultValue": ""
},
{
"name": "aria-describedby",
"type": "string | null",
"defaultValue": "null"
},
{
"name": "error-message-required",
"type": "string",
"defaultValue": "IBAN is required"
},
{
"name": "error-message-invalid",
"type": "string",
"defaultValue": "Invalid IBAN format"
},
{
"name": "error-message-invalid-country",
"type": "string",
"defaultValue": "Invalid IBAN for {country}"
},
{
"name": "error",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "error-text",
"type": "string",
"defaultValue": ""
}
],
"events": [
{
"name": "input",
"description": "Custom event: input"
},
{
"name": "ctt-input",
"description": "Custom event: ctt-input"
},
{
"name": "change",
"description": "Custom event: change"
},
{
"name": "ctt-change",
"description": "Custom event: ctt-change"
},
{
"name": "focus",
"description": "Custom event: focus"
},
{
"name": "blur",
"description": "Custom event: blur"
}
],
"examples": [],
"accessibility": "ARIA attributes support"
},
{
"name": "Icon",
"tag": "ctt-icon",
"category": "Data Display",
"description": "## Visão Geral\nO componente Icon centraliza o uso da fonte de ícones do sistema, garantindo consistência visual e facilidade de uso em todas as aplicações.\n\n\nQuando usar
\n- Para representar ações, estados ou objetos de forma visual e compacta.\n- Para reforçar o significado de textos ou botões.\n- Em menus, navegações e indicadores de status.\n \n\n\nQuando não usar
\n- Como elemento apenas decorativo sem significado (se necessário, use \\",
"whenToUse": "- Para representar ações, estados ou objetos de forma visual e compacta.\n- Para reforçar o significado de textos ou botões.\n- Em menus, navegações e indicadores de status.",
"whenNotToUse": "- Como elemento apenas decorativo sem significado (se necessário, use \\",
"properties": [
{
"name": "name",
"type": "CttIconName",
"defaultValue": "person"
},
{
"name": "size",
"type": "string",
"defaultValue": "16"
},
{
"name": "color",
"type": "string",
"defaultValue": ""
},
{
"name": "interactive",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "aria-label",
"type": "string",
"defaultValue": ""
},
{
"name": "aria-hidden",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "animation",
"type": "rotate | pulse",
"options": [
"rotate",
"pulse"
],
"defaultValue": ""
}
],
"events": [],
"examples": [],
"accessibility": "ARIA attributes support"
},
{
"name": "InputCounter",
"tag": "ctt-input-counter",
"category": "Form Inputs",
"description": "## Visão Geral\nUm componente de entrada numérica que permite ao utilizador incrementar ou decrementar valores usando botões ou entrada direta.\n\n\nQuando usar
\n- Para quantidades específicas (ex: número de produtos, passageiros).\n- Quando ajustes de valor passo a passo são comuns.\n- Para valores numéricos dentro de um intervalo definido.\n \n\n\nQuando não usar
\n- Para dados não numéricos.\n- Para intervalos de valores muito grandes onde o incremento manual é ineficiente (ex: ano de nascimento 1900-2024), a menos que a entrada direta seja o método principal.\n- Quando a precião decimal arbitrária é necessária e botões de passo não fazem sentido.\n \n\n\nAcessibilidade
\n- Garanta indicação clara de valor mínimo e máximo.\n- Mantenha feedback de erro textual além de estilo visual.\n \n\n\nComponentes relacionados
\n- InputMoney para montantes com formatação monetária.\n- InputText para números livres sem botões incrementais.\n \n\n\nDocumentação relacionada
\n- [Patterns / Forms / Form Validation](?path=/docs/patterns-forms-form-validation--docs)\n- [Glossário de Documentação](?path=/docs/guias-glossário-de-documentação--docs)\n ",
"whenToUse": "- Para quantidades específicas (ex: número de produtos, passageiros).\n- Quando ajustes de valor passo a passo são comuns.\n- Para valores numéricos dentro de um intervalo definido.",
"whenNotToUse": "- Para dados não numéricos.\n- Para intervalos de valores muito grandes onde o incremento manual é ineficiente (ex: ano de nascimento 1900-2024), a menos que a entrada direta seja o método principal.\n- Quando a precião decimal arbitrária é necessária e botões de passo não fazem sentido.",
"properties": [
{
"name": "label",
"type": "string",
"defaultValue": ""
},
{
"name": "value",
"type": "number",
"defaultValue": "1"
},
{
"name": "min",
"type": "number | null",
"defaultValue": "null"
},
{
"name": "max",
"type": "number | null",
"defaultValue": "null"
},
{
"name": "step",
"type": "number",
"defaultValue": "1"
},
{
"name": "decimal-places",
"type": "number",
"defaultValue": "0"
},
{
"name": "max-length",
"type": "number | null",
"defaultValue": "null"
},
{
"name": "disabled",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "required",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "size",
"type": "small | medium | large",
"options": [
"small",
"medium",
"large"
],
"defaultValue": "medium"
},
{
"name": "id",
"type": "string",
"defaultValue": ""
},
{
"name": "name",
"type": "string",
"defaultValue": ""
},
{
"name": "aria-label",
"type": "string",
"defaultValue": ""
},
{
"name": "strict",
"type": "boolean",
"defaultValue": "true"
},
{
"name": "error",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "error-text",
"type": "string",
"defaultValue": ""
},
{
"name": "hint",
"type": "string",
"defaultValue": ""
}
],
"events": [
{
"name": "change",
"description": "Custom event: change"
},
{
"name": "value-change",
"description": "Custom event: value-change"
},
{
"name": "ctt-change",
"description": "Custom event: ctt-change"
}
],
"examples": [],
"accessibility": "ARIA attributes support"
},
{
"name": "InputMoney",
"tag": "ctt-input-money",
"category": "Form Inputs",
"description": "## Visão Geral\nComponente de entrada monetária com formatação de moeda Euro e direção de texto da direita para a esquerda (RTL).\nFornece formatação automática de números, validação, tratamento de erros e recursos de acessibilidade.\n\n\nQuando usar
\n- Para valores monetários em Euros.\n- Quando é necessária formatação automática (1234.56 -> \"1.234,56\").\n- Para garantir precisão em dados financeiros.\n \n\n\nQuando não usar
\n- Para números decimais genéricos que não são moeda.\n- Para outras moedas que não o Euro (neste momento).\n- Quando a entrada de texto livre é necessária sem formatação.\n \n\n\nAcessibilidade
\n- Associe sempre label claro e mensagem de erro objetiva.\n- Comunique limites de min e max quando aplicáveis.\n \n\n\nComponentes relacionados
\n- InputText para números sem máscara monetária.\n- InputCounter para ajustes incrementais.\n \n\n\nDocumentação relacionada
\n- [Patterns / Forms / Form Validation](?path=/docs/patterns-forms-form-validation--docs)\n- [Engenharia / Hub de Integração](?path=/docs/engenharia-hub-de-integração--docs)\n ",
"whenToUse": "- Para valores monetários em Euros.\n- Quando é necessária formatação automática (1234.56 -> \"1.234,56\").\n- Para garantir precisão em dados financeiros.",
"whenNotToUse": "- Para números decimais genéricos que não são moeda.\n- Para outras moedas que não o Euro (neste momento).\n- Quando a entrada de texto livre é necessária sem formatação.",
"properties": [
{
"name": "label",
"type": "string",
"defaultValue": ""
},
{
"name": "name",
"type": "string",
"defaultValue": ""
},
{
"name": "placeholder",
"type": "string",
"defaultValue": ""
},
{
"name": "disabled",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "required",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "readonly",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "size",
"type": "small | medium | large",
"options": [
"small",
"medium",
"large"
],
"defaultValue": "medium"
},
{
"name": "min",
"type": "number",
"defaultValue": "0"
},
{
"name": "max",
"type": "number",
"defaultValue": "99999999999.99"
},
{
"name": "step",
"type": "number",
"defaultValue": "0.01"
},
{
"name": "hint",
"type": "string",
"defaultValue": ""
},
{
"name": "id",
"type": "string",
"defaultValue": ""
},
{
"name": "aria-describedby",
"type": "string | null",
"defaultValue": "null"
},
{
"name": "value",
"type": "any"
},
{
"name": "error",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "error-text",
"type": "string",
"defaultValue": ""
}
],
"events": [
{
"name": "input",
"description": "Custom event: input"
},
{
"name": "ctt-input",
"description": "Custom event: ctt-input"
},
{
"name": "change",
"description": "Custom event: change"
},
{
"name": "ctt-change",
"description": "Custom event: ctt-change"
},
{
"name": "focus",
"description": "Custom event: focus"
},
{
"name": "blur",
"description": "Custom event: blur"
}
],
"examples": [],
"accessibility": "ARIA attributes support"
},
{
"name": "InputText",
"tag": "ctt-input-text",
"category": "Form Inputs",
"description": "## Visão Geral\nComponente de entrada de texto flexível que suporta vários tipos, validações e tamanhos.\n\n\nQuando usar
\n- Para capturar dados textuais simples (nome, email, telefone).\n- Quando é necessária validação integrada.\n- Para formulários que requerem consistência visual.\n \n\n\nQuando não usar
\n- Para entradas de texto longas (use TextareaInput).\n- Para seleção de opções pré-definidas (use Select ou Dropdown).\n- Para datas (use componente específico de data se disponível).\n \n\n\nAcessibilidade
\n- Associe sempre um label descritivo ao campo.\n- Em contexto de erro, forneça errorText objetivo e acionável.\n \n\n\nComponentes relacionados
\n- [TextareaInput](?path=/docs/componentes-formulários-área-de-texto-textareainput--docs) para entradas de texto longo/multilinha.\n- [DropdownInput](?path=/docs/componentes-formulários-campo-de-dropdown--docs) para seleções de opções pré-definidas.\n- [InputCounter](?path=/docs/componentes-formulários-contador-inputcounter--docs) para valores numéricos com incrementadores.\n- [InputMoney](?path=/docs/componentes-formulários-campo-de-moeda-inputmoney--docs) para valores monetários formatados.\n \n\n\nDocumentação relacionada
\n- [Guia de Acessibilidade](?path=/docs/guias-acessibilidade--docs)\n- [Glossário de Documentação](?path=/docs/guias-glossário-de-documentação--docs)\n ",
"whenToUse": "- Para capturar dados textuais simples (nome, email, telefone).\n- Quando é necessária validação integrada.\n- Para formulários que requerem consistência visual.",
"whenNotToUse": "- Para entradas de texto longas (use TextareaInput).\n- Para seleção de opções pré-definidas (use Select ou Dropdown).\n- Para datas (use componente específico de data se disponível).",
"properties": [
{
"name": "label",
"type": "string",
"defaultValue": ""
},
{
"name": "value",
"type": "string",
"defaultValue": ""
},
{
"name": "name",
"type": "string",
"defaultValue": ""
},
{
"name": "type",
"type": "string",
"defaultValue": "text"
},
{
"name": "placeholder",
"type": "string",
"defaultValue": ""
},
{
"name": "disabled",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "required",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "size",
"type": "small | medium | large",
"options": [
"small",
"medium",
"large"
],
"defaultValue": "medium"
},
{
"name": "id",
"type": "string",
"defaultValue": ""
},
{
"name": "aria-describedby",
"type": "string | null",
"defaultValue": "null"
},
{
"name": "aria-label",
"type": "string",
"defaultValue": ""
},
{
"name": "aria-labelledby",
"type": "string",
"defaultValue": ""
},
{
"name": "aria-expanded",
"type": "string | null",
"defaultValue": "null"
},
{
"name": "aria-controls",
"type": "string | null",
"defaultValue": "null"
},
{
"name": "aria-haspopup",
"type": "string | null",
"defaultValue": "null"
},
{
"name": "aria-autocomplete",
"type": "string | null",
"defaultValue": "null"
},
{
"name": "icon",
"type": "string",
"defaultValue": ""
},
{
"name": "icon-align",
"type": "left | right",
"options": [
"left",
"right"
],
"defaultValue": "left"
},
{
"name": "hint",
"type": "string",
"defaultValue": ""
},
{
"name": "readonly",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "cursor",
"type": "text | pointer | default",
"options": [
"text",
"pointer",
"default"
]
},
{
"name": "min",
"type": "string",
"defaultValue": ""
},
{
"name": "max",
"type": "string",
"defaultValue": ""
},
{
"name": "step",
"type": "string",
"defaultValue": ""
},
{
"name": "minlength",
"type": "number | null",
"defaultValue": "null"
},
{
"name": "maxlength",
"type": "number | null",
"defaultValue": "null"
},
{
"name": "pattern",
"type": "string",
"defaultValue": ""
},
{
"name": "error",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "error-text",
"type": "string",
"defaultValue": ""
}
],
"events": [
{
"name": "input",
"description": "Custom event: input"
},
{
"name": "ctt-input",
"description": "Custom event: ctt-input"
},
{
"name": "change",
"description": "Custom event: change"
},
{
"name": "ctt-change",
"description": "Custom event: ctt-change"
},
{
"name": "focus",
"description": "Custom event: focus"
},
{
"name": "blur",
"description": "Custom event: blur"
}
],
"examples": [],
"accessibility": "ARIA attributes support"
},
{
"name": "Loading",
"tag": "ctt-loading",
"category": "Feedback",
"description": "## Visão Geral\nO componente Loading indica visualmente que um processo está a decorrer (carregamento de dados, envio de formulário, etc.).\n\n\nQuando usar
\n- Para indicar que o sistema está a processar uma ação ou a carregar conteúdo.\n- Em processos que demoram mais de 1 segundo.\n- Para fornecer feedback visual de progresso (com percentagem) em operações longas (uploads, downloads).\n \n\n\nQuando não usar
\n- Para processos extremamente rápidos (< 300ms) onde o \"flash\" do loader seria distrativo.\n- Como placeholder de conteúdo (nestes casos, considere usar um *Skeleton Loader*).\n \n\n\nAcessibilidade
\n- Forneça texto de contexto claro para leituras assistivas.\n- Evite loaders infinitos sem mensagem de estado ou timeout.\n \n\n\nComponentes relacionados
\n- ToasterAlert para feedback de resultado.\n- Modal para bloqueio de interação em operações críticas.\n \n\n\nDocumentação relacionada
\n- [Patterns / Feedback / Empty and Error States](?path=/docs/patterns-feedback-empty-and-error-states--docs)\n- [Guias / Acessibilidade](?path=/docs/guias-acessibilidade--docs)\n ",
"whenToUse": "- Para indicar que o sistema está a processar uma ação ou a carregar conteúdo.\n- Em processos que demoram mais de 1 segundo.\n- Para fornecer feedback visual de progresso (com percentagem) em operações longas (uploads, downloads).",
"whenNotToUse": "- Para processos extremamente rápidos (< 300ms) onde o \"flash\" do loader seria distrativo.\n- Como placeholder de conteúdo (nestes casos, considere usar um *Skeleton Loader*).",
"properties": [
{
"name": "size",
"type": "small | medium | large",
"options": [
"small",
"medium",
"large"
],
"defaultValue": "medium"
},
{
"name": "variant",
"type": "primary | secondary | default",
"options": [
"primary",
"secondary",
"default"
],
"defaultValue": "primary"
},
{
"name": "title",
"type": "string",
"defaultValue": ""
},
{
"name": "description",
"type": "string",
"defaultValue": ""
},
{
"name": "counter",
"type": "number",
"defaultValue": "0"
},
{
"name": "show-spinner",
"type": "boolean",
"defaultValue": "true"
},
{
"name": "show-counter",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "counter-layout",
"type": "side | below",
"options": [
"side",
"below"
],
"defaultValue": "side"
},
{
"name": "aria-label",
"type": "string",
"defaultValue": "Loading"
}
],
"events": [
{
"name": "progress-start",
"description": "Custom event: progress-start"
},
{
"name": "progress-complete",
"description": "Custom event: progress-complete"
},
{
"name": "progress-reset",
"description": "Custom event: progress-reset"
}
],
"examples": [],
"accessibility": "ARIA attributes support"
},
{
"name": "Modal",
"tag": "ctt-modal",
"category": "Feedback",
"description": "## Visão Geral\nO componente Modal apresenta conteúdo numa camada superior à página atual, focando a atenção do utilizador numa tarefa ou mensagem específica.\n\n\nQuando usar
\n- Para confirmar ações importantes ou deletérias (\"Tem a certeza que deseja apagar?\").\n- Para apresentar informação crítica que requer reconhecimento do utilizador.\n- Para fluxos secundários curtos (formulários simples) sem perder o contexto da página principal.\n \n\n\nQuando não usar
\n- Para mensagens de feedback passivo (use \\",
"whenToUse": "- Para confirmar ações importantes ou deletérias (\"Tem a certeza que deseja apagar?\").\n- Para apresentar informação crítica que requer reconhecimento do utilizador.\n- Para fluxos secundários curtos (formulários simples) sem perder o contexto da página principal.",
"whenNotToUse": "- Para mensagens de feedback passivo (use \\",
"properties": [
{
"name": "open",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "size",
"type": "sm | md | lg | full-screen",
"options": [
"sm",
"md",
"lg",
"full-screen"
],
"defaultValue": "md"
},
{
"name": "dismissable",
"type": "boolean",
"defaultValue": "true"
},
{
"name": "eyebrow",
"type": "string",
"defaultValue": "Title Eyebrow Text"
},
{
"name": "aria-describedby",
"type": "string",
"defaultValue": "`modal-description-${Math.random().toString(36).substr(2, 9)}`"
}
],
"events": [
{
"name": "ctt-modal-open",
"description": "Custom event: ctt-modal-open"
},
{
"name": "ctt-modal-close",
"description": "Custom event: ctt-modal-close"
},
{
"name": "ctt-modal-dismiss",
"description": "Custom event: ctt-modal-dismiss"
},
{
"name": "ctt-modal-overlay-click",
"description": "Custom event: ctt-modal-overlay-click"
}
],
"examples": [],
"accessibility": "ARIA attributes support"
},
{
"name": "Pagination",
"tag": "ctt-pagination",
"category": "Navigation",
"description": "## Visão Geral\nUm componente de paginação abrangente para navegar através de grandes conjuntos de dados.\n\n\nQuando usar
\n- Para dividir listas longas de dados em páginas menores e mais geríveis.\n- Quando o desempenho é afetado pelo carregamento de todos os dados de uma vez.\n- Para permitir ao utilizador navegar diretamente para secções específicas dos dados.\n\n \n\n\nQuando não usar
\n- Para listas curtas onde o scroll infinito ou \"Carregar mais\" seria uma melhor experiência.\n- Quando a quantidade total de dados é desconhecida ou dinâmica (streaming).\n\n \n\n\nAcessibilidade
\n- Garanta labels claros para navegação entre páginas.\n- Mantenha feedback de página atual visível e programaticamente disponível.\n \n\n\nComponentes relacionados
\n- Table para datasets tabulares com ordenação e filtro.\n- Button para ações de navegação contextual.\n \n\n\nDocumentação relacionada
\n- [Patterns / Data / Table Filtering](?path=/docs/patterns-data-table-filtering--docs)\n- [Glossário de Documentação](?path=/docs/guias-glossário-de-documentação--docs)\n ",
"whenToUse": "- Para dividir listas longas de dados em páginas menores e mais geríveis.\n- Quando o desempenho é afetado pelo carregamento de todos os dados de uma vez.\n- Para permitir ao utilizador navegar diretamente para secções específicas dos dados.",
"whenNotToUse": "- Para listas curtas onde o scroll infinito ou \"Carregar mais\" seria uma melhor experiência.\n- Quando a quantidade total de dados é desconhecida ou dinâmica (streaming).",
"properties": [
{
"name": "currentPage",
"type": "number",
"defaultValue": "1"
},
{
"name": "totalPages",
"type": "number",
"defaultValue": "1"
},
{
"name": "items-per-page",
"type": "number",
"defaultValue": "10"
},
{
"name": "total-items",
"type": "number",
"defaultValue": "0"
},
{
"name": "items-per-page-options",
"type": "Array<{ label: string",
"defaultValue": "[\n { label: 10, value: 10 },\n { label: 20, value: 20 },\n { label: 50, value: 50 }\n ]"
},
{
"name": "max-number-of-buttons",
"type": "number",
"defaultValue": "3"
},
{
"name": "first-page-label",
"type": "string",
"defaultValue": "Primeira página"
},
{
"name": "previous-page-label",
"type": "string",
"defaultValue": "Página anterior"
},
{
"name": "next-page-label",
"type": "string",
"defaultValue": "Página seguinte"
},
{
"name": "last-page-label",
"type": "string",
"defaultValue": "Última página"
},
{
"name": "page-label",
"type": "string",
"defaultValue": "Página"
},
{
"name": "items-per-page-label",
"type": "string",
"defaultValue": "Resultados por página"
}
],
"events": [
{
"name": "page-size-change",
"description": "Custom event: page-size-change"
},
{
"name": "page-change",
"description": "Custom event: page-change"
}
],
"examples": [],
"accessibility": "ARIA attributes support"
},
{
"name": "PhoneInput",
"tag": "ctt-phone-input",
"category": "Form Inputs",
"description": "## Visão Geral\nComponente de entrada de número de telefone completo que combina seleção de país com entrada de número e validação.\n\n\nQuando Usar
\n- Para capturar números de telefone internacionais.\n- Quando é necessária validação específica por país.\n- Para formatar automaticamente números de telefone.\n \n\n\nQuando não usar
\n- Para entradas numéricas genéricas (use InputText com type=\"number\").\n- Quando não é necessário o código do país (embora o componente suporte, pode ser excessivo).\n \n\n\nAcessibilidade
\n- Forneça label claro e contexto de formato esperado.\n- Comunique erros de formato de forma acionável.\n \n\n\nComponentes Relacionados
\n- InputText para dados de contacto sem máscara internacional.\n- DropdownInput para seleção de país quando separada do campo de número.\n \n\n\nDocumentação Relacionada
\n- [Patterns / Forms / Form Validation](?path=/docs/patterns-forms-form-validation--docs)\n- [Engenharia / Hub de Integração](?path=/docs/engenharia-hub-de-integração--docs)\n \n\n\nAcessibilidade
\n- Forneça label claro e contexto de formato esperado.\n- Comunique erros de formato de forma acionável.\n \n\n\nComponentes Relacionados
\n- InputText para dados de contacto sem máscara internacional.\n- DropdownInput para seleção de país quando separada do campo de número.\n \n\n\nDocumentação Relacionada
\n- [Patterns / Forms / Form Validation](?path=/docs/patterns-forms-form-validation--docs)\n- [Engenharia / Hub de Integração](?path=/docs/engenharia-hub-de-integração--docs)\n ",
"whenToUse": "- Para capturar números de telefone internacionais.\n- Quando é necessária validação específica por país.\n- Para formatar automaticamente números de telefone.",
"whenNotToUse": "- Para entradas numéricas genéricas (use InputText com type=\"number\").\n- Quando não é necessário o código do país (embora o componente suporte, pode ser excessivo).",
"properties": [
{
"name": "label",
"type": "string",
"defaultValue": ""
},
{
"name": "placeholder",
"type": "string",
"defaultValue": ""
},
{
"name": "hint",
"type": "string",
"defaultValue": ""
},
{
"name": "country",
"type": "string",
"defaultValue": "pt"
},
{
"name": "disabled",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "required",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "readonly",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "size",
"type": "small | medium | large",
"options": [
"small",
"medium",
"large"
],
"defaultValue": "medium"
},
{
"name": "fixed-country",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "name",
"type": "string"
},
{
"name": "allowed-countries",
"type": "string[]",
"defaultValue": "[]"
},
{
"name": "value",
"type": "any"
},
{
"name": "error",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "error-text",
"type": "string",
"defaultValue": ""
}
],
"events": [
{
"name": "change",
"description": "Custom event: change"
},
{
"name": "ctt-change",
"description": "Custom event: ctt-change"
},
{
"name": "input",
"description": "Custom event: input"
},
{
"name": "ctt-input",
"description": "Custom event: ctt-input"
},
{
"name": "countrychange",
"description": "Custom event: countrychange"
}
],
"examples": []
},
{
"name": "RadioButton",
"tag": "ctt-radio-button",
"category": "Form Inputs",
"description": "## Visão Geral\nComponente de seleção única que permite ao utilizador escolher uma opção de um conjunto.\n\n\nQuando Usar
\n- Para selecionar exatamente uma opção de uma lista.\n- Quando as opções devem estar visíveis lado a lado ou em lista.\n- Para escolhas que se excluem mutuamente.\n \n\n\nQuando não usar
\n- Para múltiplas seleções (use Checkbox).\n- Quando há muitas opções (use DropdownInput ou Select).\n- Para ações imediatas (use Button).\n \n\n\nAcessibilidade
\n- Agrupe opções relacionadas com labels de grupo claros.\n- Garanta foco e navegação por teclado previsíveis.\n \n\n\nComponentes Relacionados
\n- Checkbox para seleção múltipla.\n- DropdownInput para listas extensas.\n \n\n\nDocumentação Relacionada
\n- [Patterns / Forms / Form Validation](?path=/docs/patterns-forms-form-validation--docs)\n- [Glossário de Documentação](?path=/docs/guias-glossário-de-documentação--docs)\n ",
"whenToUse": "- Para selecionar exatamente uma opção de uma lista.\n- Quando as opções devem estar visíveis lado a lado ou em lista.\n- Para escolhas que se excluem mutuamente.",
"whenNotToUse": "- Para múltiplas seleções (use Checkbox).\n- Quando há muitas opções (use DropdownInput ou Select).\n- Para ações imediatas (use Button).",
"properties": [
{
"name": "label",
"type": "string",
"defaultValue": ""
},
{
"name": "name",
"type": "string",
"defaultValue": ""
},
{
"name": "value",
"type": "string",
"defaultValue": ""
},
{
"name": "disabled",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "required",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "error",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "id",
"type": "string",
"defaultValue": "`ctt-radio-button-${Math.random().toString(36).substring(2, 9)}`"
},
{
"name": "className",
"type": "string",
"defaultValue": ""
},
{
"name": "aria-label",
"type": "string | null",
"defaultValue": "null"
},
{
"name": "aria-labelledby",
"type": "string | null",
"defaultValue": "null"
},
{
"name": "size",
"type": "small | medium | large",
"options": [
"small",
"medium",
"large"
],
"defaultValue": "medium"
},
{
"name": "checked",
"type": "any"
},
{
"name": "error-text",
"type": "string",
"defaultValue": ""
}
],
"events": [
{
"name": "change",
"description": "Custom event: change"
}
],
"examples": [],
"accessibility": "ARIA attributes support"
},
{
"name": "SidePanel",
"tag": "ctt-side-panel",
"category": "Navigation",
"description": "## Visão Geral\nUm painel lateral flexível para a navegação e organização de conteúdo no Design System da CTT.\n\n\nQuando Usar
\n- Para menus de navegação principais ou secundários.\n- Para filtros de pesquisa complexos.\n- Para exibir detalhes de um item selecionado sem sair do contexto (ex: lista mestre-detalhe).\n- Para configurações ou ferramentas contextuais.\n \n\n\nQuando não usar
\n- Para avisos simples (use \\",
"whenToUse": "- Para menus de navegação principais ou secundários.\n- Para filtros de pesquisa complexos.\n- Para exibir detalhes de um item selecionado sem sair do contexto (ex: lista mestre-detalhe).\n- Para configurações ou ferramentas contextuais.",
"whenNotToUse": "- Para avisos simples (use \\",
"properties": [
{
"name": "width",
"type": "string",
"defaultValue": "360px"
},
{
"name": "collapsible",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "collapsed",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "aria-label",
"type": "string",
"defaultValue": "Side panel"
}
],
"events": [
{
"name": "toggle",
"description": "Custom event: toggle"
}
],
"examples": [],
"accessibility": "ARIA attributes support"
},
{
"name": "Table",
"tag": "ctt-table",
"category": "Data Display",
"description": "## Visão Geral\nUma tabela de dados completa e poderosa com suporte para busca, filtros, classificação, paginação e seleção de linhas.\n\n\nQuando Usar
\n- Para datasets com necessidade de ordenação, pesquisa e paginação.\n- Para cenários com filtros combinados e seleção de linhas.\n \n\n\nQuando não usar
\n- Para listas pequenas sem necessidade de estrutura tabular.\n- Para layouts puramente visuais sem relação linha-coluna.\n \n\n\nCaracterísticas Principais
\n\n- ✅ **Colunas Dinâmicas** - Defina colunas com propriedades customizáveis\n- ✅ **Filtros Avançados** - Suporte para texto, números, datas, ranges e select\n- ✅ **Busca Global** - Busque em colunas específicas ou todas\n- ✅ **Classificação** - Ordene dados por coluna (crescente/decrescente)\n- ✅ **Paginação** - Controle de itens por página\n- ✅ **Seleção de Linhas** - Seleção única ou múltipla\n- ✅ **Tokens CSS** - Totalmente personalizável com design tokens\n- ✅ **Acessibilidade** - ARIA labels e suporte a navegação por teclado\n \n\n\nAcessibilidade
\n- Defina labels claros em colunas, filtros e controlos de paginação.\n- Garanta estados de foco visíveis e ordem de navegação por teclado previsível.\n \n\n\nComponentes Relacionados
\n- [Pagination](?path=/docs/componentes-navegação-paginação-pagination--docs) para controlo de paginação autónomo.\n- [DropdownInput](?path=/docs/componentes-formulários-campo-de-dropdown--docs) para filtros com seleção assistida.\n- [Card](?path=/docs/componentes-visualização-cartão-card--docs) para apresentação de informação estruturada alternativa.\n \n\n\nDocumentação Relacionada
\n- [Patterns / Data / Table Filtering](?path=/docs/patterns-data-table-filtering--docs)\n- [Guia de Acessibilidade](?path=/docs/guias-acessibilidade--docs)\n- [Glossário de Documentação](?path=/docs/guias-glossário-de-documentação--docs)\n \n\n\nAtributos Principais
\n\n| Atributo | Tipo | Padrão | Descrição |\n|----------|------|--------|-----------|\n| \\",
"whenToUse": "- Para datasets com necessidade de ordenação, pesquisa e paginação.\n- Para cenários com filtros combinados e seleção de linhas.",
"whenNotToUse": "- Para listas pequenas sem necessidade de estrutura tabular.\n- Para layouts puramente visuais sem relação linha-coluna.",
"properties": [
{
"name": "columns",
"type": "ColumnDefinition[]",
"defaultValue": "[]"
},
{
"name": "rows",
"type": "TableRow[]",
"defaultValue": "[]"
},
{
"name": "allow-row-selection",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "allow-multi-select",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "loading",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "empty-message",
"type": "string",
"defaultValue": "No data available"
},
{
"name": "error-message",
"type": "string",
"defaultValue": "An error occurred loading data"
},
{
"name": "hasError",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "enable-pagination",
"type": "boolean",
"defaultValue": "true"
},
{
"name": "items-per-page",
"type": "number",
"defaultValue": "10"
},
{
"name": "items-per-page-options",
"type": "Array<{ label: string",
"defaultValue": "[\n { label: 10, value: 10 },\n { label: 25, value: 25 },\n { label: 50, value: 50 }\n ]"
},
{
"name": "enable-sorting",
"type": "boolean",
"defaultValue": "true"
},
{
"name": "enable-search",
"type": "boolean",
"defaultValue": "true"
},
{
"name": "filters",
"type": "FilterDefinition[]",
"defaultValue": "[]"
},
{
"name": "aria-label",
"type": "string",
"defaultValue": "Data table"
},
{
"name": "show-calendar-toggle",
"type": "boolean",
"defaultValue": "false"
}
],
"events": [
{
"name": "table-selection-change",
"description": "Custom event: table-selection-change"
},
{
"name": "table-sort",
"description": "Custom event: table-sort"
},
{
"name": "table-page-change",
"description": "Custom event: table-page-change"
},
{
"name": "table-page-size-change",
"description": "Custom event: table-page-size-change"
},
{
"name": "table-search",
"description": "Custom event: table-search"
},
{
"name": "table-filter",
"description": "Custom event: table-filter"
}
],
"examples": [],
"accessibility": "ARIA attributes support"
},
{
"name": "Tag",
"tag": "ctt-tag",
"category": "Form Inputs",
"description": "## Visão Geral\nUm componente de etiqueta compacto usado para categorização, marcação ou seleção. Suporta ícones, diferentes cores semânticas e funcionalidade de fechar/dispensar.\n\n\nFeatures
\n\n- **Tipos Semânticos**: Sucesso, aviso, perigo, informação, destaque e neutro.\n- **Variantes de Tamanho**: Pequeno, Médio, Grande.\n- **Variantes Visuais**: Soft (fundo claro) ou Outline (fundo transparente).\n- **Suporte a Ícones**: Posicionamento à esquerda ou direita.\n- **Dispensável**: Botão de fechar opcional com suporte a teclado.\n- **Acessível**: Roles ARIA e navegação por teclado.\n \n\n\nQuando usar
\n\n- Para exibir o estado de um item (ex: \"Entregue\", \"Pendente\").\n- Para categorizar conteúdo (ex: blog posts, produtos).\n- Para filtros aplicados em uma lista.\n- Para exibir metadados compactos.\n \n\n\nQuando não usar
\n\n- Para ações principais de fluxo (use Button).\n- Para mensagens longas ou com interação complexa (use Modal ou SidePanel).\n \n\n\nAcessibilidade
\n\n- Use contraste suficiente entre texto e fundo da tag.\n- Em tags dispensáveis, garanta anúncio claro da ação de remoção.\n \n\n\nComponentes Relacionados
\n- Chip para interação selecionável compacta.\n- ToasterAlert para feedback temporal e contextual.\n \n\n\nDocumentação Relacionada
\n\n- [Patterns / Feedback / Empty and Error States](?path=/docs/patterns-feedback-empty-and-error-states--docs)\n- [Guias / Acessibilidade](?path=/docs/guias-acessibilidade--docs)\n ",
"whenToUse": "- Para exibir o estado de um item (ex: \"Entregue\", \"Pendente\").\n- Para categorizar conteúdo (ex: blog posts, produtos).\n- Para filtros aplicados em uma lista.\n- Para exibir metadados compactos.",
"whenNotToUse": "- Para ações principais de fluxo (use Button).\n- Para mensagens longas ou com interação complexa (use Modal ou SidePanel).",
"properties": [
{
"name": "type",
"type": "TagType",
"defaultValue": "neutral"
},
{
"name": "size",
"type": "TagSize",
"defaultValue": "m"
},
{
"name": "icon",
"type": "CttIconName | ''",
"defaultValue": ""
},
{
"name": "icon-position",
"type": "TagIconPosition",
"defaultValue": "left"
},
{
"name": "disabled",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "aria-label",
"type": "string",
"defaultValue": ""
},
{
"name": "variant",
"type": "TagVariant",
"defaultValue": "soft"
},
{
"name": "dismissible",
"type": "boolean",
"defaultValue": "false"
}
],
"events": [
{
"name": "ctt-dismiss",
"description": "Custom event: ctt-dismiss"
}
],
"examples": [],
"accessibility": "ARIA attributes support"
},
{
"name": "TextareaInput",
"tag": "ctt-textarea-input",
"category": "Form Inputs",
"description": "## Visão Geral\nComponente de entrada de texto multilinha flexível que suporta validações, redimensionamento automático e contagem de caracteres.\n\n\nQuando Usar
\n- Para capturar textos longos (comentários, descrições, feedback).\n- Quando a entrada excede uma única linha.\n \n\n\nQuando não usar
\n- Para entradas de texto curtas (use InputText).\n- Para edição de texto rico (use um editor WYSIWYG específico).\n \n\n\nAcessibilidade
\n- Associe label, helper text e error text de forma clara.\n- Configure limites de caracteres quando o contexto exigir.\n \n\n\nComponentes Relacionados
\n- InputText para mensagens curtas.\n- ToasterAlert para feedback pós-submissão.\n \n\n\nDocumentação Relacionada
\n- [Patterns / Forms / Form Validation](?path=/docs/patterns-forms-form-validation--docs)\n- [Glossário de Documentação](?path=/docs/guias-glossário-de-documentação--docs)~\n ",
"whenToUse": "- Para capturar textos longos (comentários, descrições, feedback).\n- Quando a entrada excede uma única linha.",
"whenNotToUse": "- Para entradas de texto curtas (use InputText).\n- Para edição de texto rico (use um editor WYSIWYG específico).",
"properties": [
{
"name": "label",
"type": "string",
"defaultValue": ""
},
{
"name": "name",
"type": "string",
"defaultValue": ""
},
{
"name": "placeholder",
"type": "string",
"defaultValue": ""
},
{
"name": "disabled",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "required",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "readonly",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "rows",
"type": "number",
"defaultValue": "3"
},
{
"name": "cols",
"type": "number",
"defaultValue": "0"
},
{
"name": "maxlength",
"type": "number",
"defaultValue": "0"
},
{
"name": "minlength",
"type": "number",
"defaultValue": "0"
},
{
"name": "auto-resize",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "show-count",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "hint",
"type": "string",
"defaultValue": ""
},
{
"name": "id",
"type": "string",
"defaultValue": "`ctt-textarea-${Math.random().toString(36).substring(2, 9)}`"
},
{
"name": "className",
"type": "string",
"defaultValue": ""
},
{
"name": "aria-label",
"type": "string | null",
"defaultValue": "null"
},
{
"name": "aria-labelledby",
"type": "string | null",
"defaultValue": "null"
},
{
"name": "resize",
"type": "none | both | horizontal | vertical",
"options": [
"none",
"both",
"horizontal",
"vertical"
],
"defaultValue": "vertical"
},
{
"name": "size",
"type": "small | medium | large",
"options": [
"small",
"medium",
"large"
],
"defaultValue": "medium"
},
{
"name": "value",
"type": "any"
},
{
"name": "error",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "error-text",
"type": "string",
"defaultValue": ""
}
],
"events": [
{
"name": "input",
"description": "Custom event: input"
},
{
"name": "ctt-input",
"description": "Custom event: ctt-input"
},
{
"name": "change",
"description": "Custom event: change"
},
{
"name": "ctt-change",
"description": "Custom event: ctt-change"
},
{
"name": "focus",
"description": "Custom event: focus"
},
{
"name": "blur",
"description": "Custom event: blur"
}
],
"examples": [],
"accessibility": "ARIA attributes support"
},
{
"name": "ToasterAlert",
"tag": "ctt-toaster-alert",
"category": "Feedback",
"description": "## Visão Geral\nComponente versátil para notificações e alertas, podendo ser exibido inline (Alert) ou flutuante (Toaster).\n\n\nQuando usar
\n\n- Para feedback de ações do sistema (Sucesso, Erro, Aviso).\n- Para informações contextuais que não interrompem o fluxo do usuário.\n- Para mensagens que podem desaparecer automaticamente.\n\n \n\n\nQuando não usar
\n- Para erros críticos que bloqueiam o sistema (use Modal).\n- Para conteúdo extenso ou interativo (use Modal ou SidePanel).\n \n\n\nAcessibilidade
\n\n- Mensagens devem ser curtas, objetivas e semanticamente claras.\n- Evite depender apenas de cor para diferenciar tipos de alerta.\n\n \n\n\nComponentes Relacionados
\n\n- Modal para comunicação bloqueante.\n- SidePanel para conteúdos longos e interação aprofundada.\n \n\n\nDocumentação Relacionada
\n- [Patterns / Feedback / Empty and Error States](?path=/docs/patterns-feedback-empty-and-error-states--docs)\n- [Guias / Acessibilidade](?path=/docs/guias-acessibilidade--docs)\n ",
"whenToUse": "- Para feedback de ações do sistema (Sucesso, Erro, Aviso).\n- Para informações contextuais que não interrompem o fluxo do usuário.\n- Para mensagens que podem desaparecer automaticamente.",
"whenNotToUse": "- Para erros críticos que bloqueiam o sistema (use Modal).\n- Para conteúdo extenso ou interativo (use Modal ou SidePanel).",
"properties": [
{
"name": "type",
"type": "toaster | alert",
"options": [
"toaster",
"alert"
],
"defaultValue": "alert"
},
{
"name": "variant",
"type": "info | warning | error | success | highlight",
"options": [
"info",
"warning",
"error",
"success",
"highlight"
],
"defaultValue": "info"
},
{
"name": "headline",
"type": "string",
"defaultValue": ""
},
{
"name": "message",
"type": "string",
"defaultValue": ""
},
{
"name": "dismissable",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "visible",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "position",
"type": "top | bottom | top-right | top-center | top-left | bottom-right | bottom-center | bottom-left",
"options": [
"top",
"bottom",
"top-right",
"top-center",
"top-left",
"bottom-right",
"bottom-center",
"bottom-left"
],
"defaultValue": "top"
},
{
"name": "width",
"type": "full | half | third | quarter | auto",
"options": [
"full",
"half",
"third",
"quarter",
"auto"
],
"defaultValue": "auto"
},
{
"name": "is-proxy",
"type": "boolean",
"defaultValue": "false"
}
],
"events": [
{
"name": "ctt-toaster-close",
"description": "Custom event: ctt-toaster-close"
}
],
"examples": [],
"accessibility": "ARIA attributes support"
},
{
"name": "ToggleSwitch",
"tag": "ctt-toggle-switch",
"category": "Form Inputs",
"description": "## Visão Geral\nO componente ToggleSwitch permite ao utilizador alternar entre dois estados opostos (ligado/desligado).\n\n\nQuando Usar
\n- Para ativar ou desativar uma funcionalidade ou preferência específica.\n- Quando a ação tem efeito imediato (sem necessidade de submeter formulário), embora também possa ser usado em formulários.\n- Como alternativa visualmente distinta a um Checkbox único para estados binários.\n \n\n\nQuando não usar
\n\n- Para selecionar múltiplas opções de uma lista (use Checkbox).\n- Para opções mutuamente exclusivas que não são apenas \"ligado/desligado\" (use RadioButton).\n\n \n\n\nAcessibilidade
\n\n- Inclua label textual mesmo quando o contexto visual parece óbvio.\n- Não dependa apenas da posição do switch para comunicar estado.\n \n\n\nComponentes Relacionados
\n\n- Checkbox para seleção simples em formulário.\n- RadioButton para escolhas mutuamente exclusivas.\n\n \n\n\nDocumentação Relacionada
\n\n- [Patterns / Forms / Form Validation](?path=/docs/patterns-forms-form-validation--docs)\n- [Guias / Acessibilidade](?path=/docs/guias-acessibilidade--docs)\n ",
"whenToUse": "- Para ativar ou desativar uma funcionalidade ou preferência específica.\n- Quando a ação tem efeito imediato (sem necessidade de submeter formulário), embora também possa ser usado em formulários.\n- Como alternativa visualmente distinta a um Checkbox único para estados binários.",
"whenNotToUse": "- Para selecionar múltiplas opções de uma lista (use Checkbox).\n- Para opções mutuamente exclusivas que não são apenas \"ligado/desligado\" (use RadioButton).",
"properties": [
{
"name": "checked",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "disabled",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "label",
"type": "string",
"defaultValue": ""
},
{
"name": "show-label",
"type": "boolean",
"defaultValue": "true"
},
{
"name": "size",
"type": "s | m | l",
"options": [
"s",
"m",
"l"
],
"defaultValue": "m"
},
{
"name": "aria-label",
"type": "string",
"defaultValue": ""
},
{
"name": "aria-labelledby",
"type": "string",
"defaultValue": ""
},
{
"name": "name",
"type": "string",
"defaultValue": ""
},
{
"name": "role",
"type": "string",
"defaultValue": ""
}
],
"events": [
{
"name": "toggle-change",
"description": "Custom event: toggle-change"
}
],
"examples": [],
"accessibility": "ARIA attributes support"
},
{
"name": "Tooltip",
"tag": "ctt-tooltip",
"category": "Feedback",
"description": "## Visão geral\nComponente de tooltip flexível que apresenta informação contextual ao passar o rato ou ao focar.\n\n\nQuando usar
\n\n- Para explicar ações, ícones ou estados sem ocupar espaço permanente.\n- Para fornecer ajuda contextual breve junto ao elemento alvo.\n \n\n\nQuando não usar
\n\n- Para conteúdo extenso, estruturado ou com ações múltiplas (use Modal ou SidePanel).\n- Para informação crítica que não pode depender de hover/focus para ser vista.\n \n\n\nAcessibilidade
\n\n- O conteúdo deve ser curto, claro e complementar ao elemento acionador.\n- Garanta acesso por teclado (focus/blur) e labels apropriados no trigger.\n \n\n\nComponentes relacionados
\n\n- ToasterAlert para feedback contextual persistente.\n- Modal para explicações detalhadas e ações bloqueantes.\n \n\n\nDocumentação relacionada
\n\n- [Guias / Acessibilidade](?path=/docs/guias-acessibilidade--docs)\n- [Padrões / Feedback / Estados vazios e de erro](?path=/docs/patterns-feedback-empty-and-error-states--docs)\n ",
"whenToUse": "- Para explicar ações, ícones ou estados sem ocupar espaço permanente.\n- Para fornecer ajuda contextual breve junto ao elemento alvo.",
"whenNotToUse": "- Para conteúdo extenso, estruturado ou com ações múltiplas (use Modal ou SidePanel).\n- Para informação crítica que não pode depender de hover/focus para ser vista.",
"properties": [
{
"name": "text",
"type": "string",
"defaultValue": "Tooltip text"
},
{
"name": "id",
"type": "string",
"defaultValue": ""
},
{
"name": "size",
"type": "small | medium | large",
"options": [
"small",
"medium",
"large"
],
"defaultValue": "medium"
},
{
"name": "position",
"type": "top | bottom | left | right",
"options": [
"top",
"bottom",
"left",
"right"
],
"defaultValue": "top"
},
{
"name": "arrow-position",
"type": "start | middle | end",
"options": [
"start",
"middle",
"end"
],
"defaultValue": "middle"
},
{
"name": "aria-label",
"type": "string",
"defaultValue": ""
},
{
"name": "disabled",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "text-align",
"type": "start | center | end",
"options": [
"start",
"center",
"end"
],
"defaultValue": "center"
}
],
"events": [
{
"name": "tooltip-visibility-change",
"description": "Custom event: tooltip-visibility-change"
}
],
"examples": [],
"accessibility": "ARIA attributes support"
},
{
"name": "ZipCodeInput",
"tag": "ctt-zip-code-input",
"category": "Form Inputs",
"description": "## Visão Geral\nComponente para captura de códigos postais com formatação e validação específica por país.\n\n\nQuando usar
\n- Para formulários de morada que requerem validação de código postal.\n- Quando se suporta múltiplos formatos internacionais (PT, ES, UK).\n- Quando se deseja dividir automaticamente código postal e localidade (ex: preenchimento automático).\n \n\n\nQuando não usar
\n- Para códigos postais genéricos sem validação (use InputText).\n- Quando apenas o código postal é necessário sem a localidade (use InputText com máscara).\n \n\n\nAcessibilidade
\n- Use labels descritivos para código postal e localidade.\n- Forneça mensagens de erro diferentes para zip e localidade quando necessário.\n \n\n\nComponentes Relacionados
\n- InputText para campos de morada complementares.\n- DropdownInput para seleção assistida de região/localidade.\n \n\n\nDocumentação Relacionada
\n- [Patterns / Forms / Form Validation](?path=/docs/patterns-forms-form-validation--docs)\n- [Guias / Acessibilidade](?path=/docs/guias-acessibilidade--docs)\n ",
"whenToUse": "- Para formulários de morada que requerem validação de código postal.\n- Quando se suporta múltiplos formatos internacionais (PT, ES, UK).\n- Quando se deseja dividir automaticamente código postal e localidade (ex: preenchimento automático).",
"whenNotToUse": "- Para códigos postais genéricos sem validação (use InputText).\n- Quando apenas o código postal é necessário sem a localidade (use InputText com máscara).",
"properties": [
{
"name": "label",
"type": "string",
"defaultValue": "Código Postal"
},
{
"name": "zipCode",
"type": "string",
"defaultValue": ""
},
{
"name": "hint",
"type": "string",
"defaultValue": ""
},
{
"name": "locality",
"type": "string",
"defaultValue": ""
},
{
"name": "country",
"type": "pt | es | en",
"options": [
"pt",
"es",
"en"
],
"defaultValue": "pt"
},
{
"name": "zip-placeholder",
"type": "string",
"defaultValue": "undefined as unknown as string"
},
{
"name": "locality-placeholder",
"type": "string",
"defaultValue": "undefined as unknown as string"
},
{
"name": "disabled",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "disable-locality",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "locality-error",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "required",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "size",
"type": "s | m | l",
"options": [
"s",
"m",
"l"
],
"defaultValue": "m"
},
{
"name": "id",
"type": "string",
"defaultValue": ""
},
{
"name": "error",
"type": "boolean",
"defaultValue": "false"
},
{
"name": "error-text",
"type": "string",
"defaultValue": ""
}
],
"events": [
{
"name": "input",
"description": "Custom event: input"
},
{
"name": "ctt-input",
"description": "Custom event: ctt-input"
},
{
"name": "change",
"description": "Custom event: change"
},
{
"name": "ctt-change",
"description": "Custom event: ctt-change"
},
{
"name": "zip-code-change",
"description": "Custom event: zip-code-change"
},
{
"name": "locality-change",
"description": "Custom event: locality-change"
},
{
"name": "zip-code-focus",
"description": "Custom event: zip-code-focus"
},
{
"name": "ctt-focus",
"description": "Custom event: ctt-focus"
},
{
"name": "zip-code-blur",
"description": "Custom event: zip-code-blur"
},
{
"name": "ctt-blur",
"description": "Custom event: ctt-blur"
},
{
"name": "locality-focus",
"description": "Custom event: locality-focus"
},
{
"name": "locality-blur",
"description": "Custom event: locality-blur"
}
],
"examples": [],
"accessibility": "ARIA attributes support"
}
]
}