fokus-styles 2.0.0

package/mockup/assets/showcase-contracts.js

@@ -0,0 +1,84 @@
+window.showcaseContracts = {
+  layout: {
+    use: [{ label: "Estrutura de página", text: "Use containers, grid e utilitários de espaçamento para organizar cabeçalho, conteúdo principal e colunas responsivas." }, { label: "Evite", text: "não use classes de grid para comunicar significado; a ordem do DOM deve continuar lógica em telas pequenas." }],
+    api: [{ label: ".fs-container / .fs-container-fluid", code: true, text: "limitam a largura de leitura ou ocupam toda a viewport." }, { label: ".fs-row / .fs-col-*", code: true, text: "criam linhas e colunas responsivas; combine os tamanhos por breakpoint." }, { label: ".fs-u-gap-* / .fs-u-p-* / .fs-u-m-*", code: true, text: "ajustam espaçamento sem criar CSS local." }],
+    a11y: [{ label: "Ordem", text: "mantenha a leitura e o foco no DOM na mesma sequência do conteúdo visual." }, { label: "Responsividade", text: "não esconda informação somente porque a grade mudou de coluna." }],
+    states: [{ label: "Breakpoints", text: "valide uma, duas e várias colunas nos limites de viewport." }, { label: "Densidade", text: "confira gutters, overflow horizontal e reflow de ações." }],
+  },
+  theming: {
+    use: [{ label: "Tema de produto", text: "Use para alternar claro/escuro ou aplicar uma marca sem sobrescrever cores de componentes isoladamente." }],
+    api: [{ label: "data-theme=\"dark\"", code: true, text: "aplicado em html ou em um contêiner, ativa aliases escuros dos tokens semânticos." }, { label: "data-fs-brand=\"violet|corporate|vibrant\"", code: true, text: "seleciona uma marca publicada; pode ser combinado com data-theme." }, { label: "--fs-color-*", code: true, text: "tokens semânticos consumidos pelos componentes; evite trocar cores literais em cada componente." }],
+    a11y: [{ label: "Contraste", text: "revalide contraste após criar marca ou sobrescrever token." }, { label: "Preferência", text: "não alterne tema sem controle explícito e persistência coerente para a pessoa usuária." }],
+    states: [{ label: "Claro e escuro", text: "teste superfície, texto, borda, foco e componentes sobrepostos em ambos." }],
+  },
+  icons: {
+    use: [{ label: "Ações reconhecíveis", text: "Use ícones para reforçar rótulos de ação ou economizar espaço em controles com nome acessível." }],
+    api: [{ label: ".fs-icon", code: true, text: "normaliza tamanho, alinhamento e currentColor para SVG inline." }, { label: "aria-hidden=\"true\"", code: true, text: "use em ícone decorativo acompanhado por texto." }, { label: "aria-label", code: true, text: "nomeia botão somente de ícone; não aplique no SVG e no botão ao mesmo tempo." }],
+    a11y: [{ label: "Nome", text: "um ícone que é a única pista da ação precisa de botão/link com nome acessível." }, { label: "Cor", text: "não use apenas cor ou forma do ícone para comunicar estado crítico." }],
+    states: [{ label: "Interação", text: "valide ícone em hover, focus-visible, disabled e cada tema." }],
+  },
+  divider: {
+    use: [{ label: "Separação sutil", text: "Use entre grupos relacionados de conteúdo, ações ou seções de formulário; não substitui heading." }],
+    api: [{ label: ".fs-divider", code: true, text: "divisor horizontal com cor e espaçamento do sistema." }, { label: ".fs-divider-vertical", code: true, text: "divisor vertical para grupos em uma mesma linha; teste o reflow em telas pequenas." }, { label: "role=\"separator\"", code: true, text: "use quando o separador tiver significado estrutural além de decoração." }],
+    a11y: [{ label: "Estrutura", text: "prefira headings e landmarks para separar seções semânticas." }],
+    states: [{ label: "Responsividade", text: "no layout empilhado, remova ou converta divisores verticais." }],
+  },
+  "js-foundation": {
+    use: [{ label: "Comportamento opcional", text: "Use data-fs para inicializar componentes FokusStyles sem framework e recupere instâncias apenas quando houver ação programática." }],
+    api: [{ label: "data-fs=\"nome\"", code: true, text: "ativa o auto-init do componente no elemento raiz indicado." }, { label: "FokusStyles.Nome.getInstance(el)", code: true, text: "recupera a instância já inicializada." }, { label: "dispose()", code: true, text: "remove listeners e referências quando o elemento sai da página." }],
+    a11y: [{ label: "Progressive enhancement", text: "o HTML precisa continuar compreensível quando JavaScript falhar ou estiver indisponível." }],
+    states: [{ label: "Ciclo de vida", text: "teste auto-init, interação, remoção e reinicialização sem listeners duplicados." }],
+  },
+  button: {
+    use: [{ label: "Ação", text: "Use button para salvar, confirmar, abrir painel ou executar operação; use link para navegação." }],
+    api: [{ label: ".fs-btn", code: true, text: "classe-base para botão ou link com aparência de botão." }, { label: ".fs-btn-primary|secondary|success|warning|danger|info", code: true, text: "define a intenção visual da ação." }, { label: ".fs-btn-outline-* / .fs-btn-sm / .fs-btn-lg / disabled", code: true, text: "cria contorno, ajusta densidade ou desabilita o controle." }],
+    a11y: [{ label: "Semântica", text: "use button nativo para ações e mantenha texto de ação específico." }, { label: "Desabilitado", text: "em links, aria-disabled não bloqueia clique sozinho; remova a ação programaticamente." }],
+    states: [{ label: "Validação", text: "teste hover, focus-visible, active, loading e disabled em claro e escuro." }],
+  },
+  badge: {
+    use: [{ label: "Status curto", text: "Use para categoria, contagem ou estado resumido próximo ao item que descreve." }],
+    api: [{ label: ".fs-badge", code: true, text: "rótulo-base compacto." }, { label: ".fs-badge-{primary|secondary|success|warning|danger|info}", code: true, text: "variante semântica de cor." }],
+    a11y: [{ label: "Texto", text: "não comunique estado apenas por cor; inclua rótulo como Ativo, Erro ou 3 notificações." }],
+    states: [{ label: "Contraste", text: "valide cada variante e números longos em ambos os temas." }],
+  },
+  alert: {
+    use: [{ label: "Feedback contextual", text: "Use para sucesso, aviso, erro ou informação persistente relacionada à região afetada." }],
+    api: [{ label: ".fs-alert", code: true, text: "contêiner-base da mensagem." }, { label: ".fs-alert-{primary|secondary|success|warning|danger|info}", code: true, text: "seleciona intenção visual." }, { label: ".fs-alert-heading / .fs-alert-link", code: true, text: "destacam título e ação contextual." }],
+    a11y: [{ label: "Urgência", text: "use role=alert somente para mensagem que precisa ser anunciada imediatamente." }],
+    states: [{ label: "Conteúdo", text: "teste mensagens com link, título, múltiplas linhas e ação de fechamento." }],
+  },
+  input: { use: [{ label: "Dado curto", text: "Use para texto, e-mail, senha ou número quando a pessoa deve digitar um valor identificável." }], api: [{ label: ".fs-form-control", code: true, text: "estiliza input e textarea nativos." }, { label: ".is-valid / .is-invalid", code: true, text: "aplicam feedback visual de validação." }, { label: "disabled / readonly / aria-describedby", code: true, text: "controlam disponibilidade, edição e associação com ajuda ou erro." }], a11y: [{ label: "Rótulo", text: "associe label ao id; placeholder não substitui o nome persistente." }, { label: "Erro", text: "conecte ajuda e mensagem de erro com aria-describedby." }], states: [{ label: "Validação", text: "teste foco, readonly, disabled, sucesso e erro com mensagem longa." }] },
+  select: { use: [{ label: "Opções conhecidas", text: "Use select nativo para listas curtas; use Combobox quando a busca reduzir esforço." }], api: [{ label: ".fs-select", code: true, text: "aplica acabamento FokusStyles ao select nativo." }, { label: "required / disabled / multiple", code: true, text: "mantêm comportamento nativo de obrigatoriedade, indisponibilidade e múltipla escolha." }], a11y: [{ label: "Nome", text: "forneça label visível e não simule select com div sem necessidade." }], states: [{ label: "Opções", text: "teste placeholder, selecionado, disabled, erro e teclado nativo." }] },
+  "input-group": { use: [{ label: "Entrada composta", text: "Use somente para prefixo, sufixo ou ação que pertença ao mesmo valor digitado." }], api: [{ label: ".fs-input-group", code: true, text: "alinha controle, addon e botão como uma única unidade visual." }, { label: ".fs-input-group-text", code: true, text: "prefixo ou sufixo textual/ícone não editável." }], a11y: [{ label: "Finalidade", text: "o campo continua precisando de label próprio; ícones de ação precisam de nome acessível." }], states: [{ label: "Integração", text: "teste foco e validação no controle, não no addon decorativo." }] },
+  "check-radio-switch": { use: [{ label: "Escolha", text: "Checkbox para opções independentes, radio para uma escolha e switch para preferência com efeito imediato." }], api: [{ label: ".fs-check / .fs-radio / .fs-switch", code: true, text: "estilizam controles nativos sem trocar sua semântica." }, { label: "checked / indeterminate / disabled", code: true, text: "estados nativos que a aparência acompanha." }], a11y: [{ label: "Grupo", text: "use fieldset e legend para opções relacionadas e label associado a cada controle." }], states: [{ label: "Seleção", text: "teste marcado, indeterminado, erro, disabled e ativação por Espaço." }] },
+  range: { use: [{ label: "Valor aproximado", text: "Use para faixa contínua quando arrastar é mais útil que digitar precisão absoluta." }], api: [{ label: "input[type=range]", code: true, text: "controle nativo estilizado; defina min, max, step e value." }, { label: "aria-valuetext", code: true, text: "fornece valor compreensível quando o número puro não basta." }], a11y: [{ label: "Valor", text: "inclua label, limites e resultado textual atualizado quando necessário." }], states: [{ label: "Extremos", text: "teste mínimo, máximo, step, teclado e disabled." }] },
+  "segmented-control": { use: [{ label: "Modo exclusivo", text: "Use para alternar rapidamente entre poucas visões ou modos relacionados." }], api: [{ label: ".fs-segmented-control", code: true, text: "contêiner visual das opções." }, { label: "input[type=radio]", code: true, text: "mantém exclusividade e estado nativos." }], a11y: [{ label: "Semântica", text: "use radio para modos exclusivos; use tabs apenas quando cada opção revela painel associado." }], states: [{ label: "Opções", text: "teste selecionado, foco, ícone e disabled." }] },
+  rating: { use: [{ label: "Escala familiar", text: "Use para avaliação ordinal curta, expondo também o valor textual." }], api: [{ label: ".fs-rating", code: true, text: "contêiner da escala." }, { label: "data-rating / input[type=radio]", code: true, text: "configuram valor inicial e escolha acessível." }], a11y: [{ label: "Instrução", text: "explique a escala e permita alteração por teclado; não dependa só das estrelas." }], states: [{ label: "Valor", text: "teste leitura, edição, meio valor quando suportado e disabled." }] },
+  datepicker: { use: [{ label: "Data e hora", text: "Prefira controles nativos para preservar suporte de plataforma e teclado." }], api: [{ label: "input[type=date] / input[type=time]", code: true, text: "campos nativos com acabamento FokusStyles." }, { label: "min / max / required / disabled", code: true, text: "restringem intervalo e disponibilidade." }], a11y: [{ label: "Formato", text: "mantenha label e descreva formato apenas quando necessário; não substitua teclado nativo." }], states: [{ label: "Limites", text: "teste valor inválido, mínimo, máximo, erro e disabled." }] },
+  combobox: { use: [{ label: "Busca em opções", text: "Use quando filtrar uma lista maior reduz o esforço sem perder uma escolha explícita." }], api: [{ label: ".fs-combobox + data-fs=\"combobox\"", code: true, text: "inicializa filtro, lista e seleção." }, { label: "data-fs-combobox-input / -listbox", code: true, text: "identificam campo e lista da composição." }], a11y: [{ label: "ARIA", text: "preserve role=combobox, aria-expanded, aria-controls e active descendant geridos pelo componente." }], states: [{ label: "Consulta", text: "teste fechado, aberto, filtrado, vazio, teclado e disabled." }] },
+  "file-upload": { use: [{ label: "Envio com feedback", text: "Use para fila, progresso, erro e remoção de arquivos; mantenha input nativo como base." }], api: [{ label: ".fs-file-upload", code: true, text: "contêiner do fluxo avançado." }, { label: "accept / multiple / data-fs", code: true, text: "restringem tipos, permitem múltiplos arquivos e inicializam comportamento." }], a11y: [{ label: "Status", text: "o input precisa ser alcançável e progresso, erro e remoção devem ser anunciados." }], states: [{ label: "Arquivo", text: "teste clique, drop, múltiplos, carregando, erro e remoção." }] },
+  "file-drop": { use: [{ label: "Envio simples", text: "Use para selecionar ou arrastar um único arquivo em formulários curtos." }], api: [{ label: ".fs-file-drop", code: true, text: "área visual de drop associada ao input[type=file]." }, { label: "accept", code: true, text: "sugere os formatos aceitos; valide o tipo também no servidor." }], a11y: [{ label: "Alternativa", text: "a área de drop não substitui o input acionável por teclado." }], states: [{ label: "Feedback", text: "teste arrastar, arquivo selecionado e erro de formato." }] },
+  tag: { use: [{ label: "Filtro ou seleção", text: "Use para itens discretos como categoria, filtro aplicado ou pessoa selecionada." }], api: [{ label: ".fs-tag", code: true, text: "estrutura-base da etiqueta." }, { label: ".fs-tag-{primary|secondary|success|warning|danger|info}", code: true, text: "variante semântica." }, { label: ".fs-tag-remove", code: true, text: "botão opcional de remoção." }], a11y: [{ label: "Remoção", text: "o botão precisa nomear a tag, por exemplo aria-label=\"Remover Design\"." }], states: [{ label: "Variações", text: "teste removível, disabled, rótulo longo e foco." }] },
+  "empty-state": { use: [{ label: "Sem conteúdo", text: "Use para primeira utilização, busca sem resultado ou região sem dados." }], api: [{ label: ".fs-empty-state", code: true, text: "contêiner centralizado." }, { label: ".fs-empty-state-icon / -title / -text / -action", code: true, text: "organizam ilustração, mensagem e CTA." }], a11y: [{ label: "Próximo passo", text: "título e ação devem explicar a situação fora do contexto visual." }], states: [{ label: "Cenário", text: "valide sem dados, sem resultados e carregamento concluído." }] },
+  skeleton: { use: [{ label: "Carregamento previsível", text: "Use para reservar espaço de conteúdo temporário e reduzir salto de layout." }], api: [{ label: ".fs-skeleton", code: true, text: "bloco-base." }, { label: ".fs-skeleton-text / -avatar / -button / -card", code: true, text: "formas prontas para estruturas comuns." }], a11y: [{ label: "Decoração", text: "oculte o skeleton de leitores de tela e anuncie carregamento na região adequada." }], states: [{ label: "Movimento", text: "teste animação reduzida, conteúdo lento e substituição pelo resultado." }] },
+  progress: { use: [{ label: "Operação em curso", text: "Use spinner para espera indeterminada e progress para avanço mensurável." }], api: [{ label: ".fs-spinner / .fs-spinner-sm / .fs-spinner-lg", code: true, text: "indicador indeterminado." }, { label: ".fs-progress > .fs-progress-bar", code: true, text: "trilha e preenchimento." }, { label: "role=\"progressbar\" + aria-valuenow/min/max", code: true, text: "expõe valor de progresso." }], a11y: [{ label: "Status", text: "informe o que está acontecendo e valor atual quando houver." }], states: [{ label: "Operação", text: "teste indeterminado, 0%, intermediário, concluído e erro." }] },
+  navbar: { use: [{ label: "Navegação global", text: "Use para destinos principais do produto, não para ações locais." }], api: [{ label: ".fs-navbar / .fs-navbar-brand / .fs-navbar-nav", code: true, text: "estrutura de marca e links." }, { label: ".fs-navbar-toggler + data-fs=\"navbar\"", code: true, text: "ativa colapso no viewport compacto." }], a11y: [{ label: "Destino atual", text: "use aria-current=\"page\" no link ativo e nomeie o nav." }], states: [{ label: "Compacto", text: "teste aberto, fechado, teclado e foco no menu móvel." }] },
+  breadcrumb: { use: [{ label: "Hierarquia", text: "Use para mostrar o caminho até a página atual em estruturas profundas." }], api: [{ label: ".fs-breadcrumb > .fs-breadcrumb-item", code: true, text: "lista de níveis; o último representa a página atual." }, { label: "aria-current=\"page\"", code: true, text: "marca o item atual sem link." }], a11y: [{ label: "Navegação", text: "envolva em nav com aria-label=\"Breadcrumb\"." }], states: [{ label: "Comprimento", text: "teste rótulos longos e reflow em telas pequenas." }] },
+  pagination: { use: [{ label: "Coleção paginada", text: "Use quando resultados são divididos em páginas e a pessoa precisa mudar de intervalo." }], api: [{ label: ".fs-pagination / .fs-page-item / .fs-page-link", code: true, text: "estrutura da lista de páginas." }, { label: ".is-active / .is-disabled", code: true, text: "página atual e limite indisponível." }], a11y: [{ label: "Nomes", text: "use aria-label no nav e aria-current=\"page\" na página atual." }], states: [{ label: "Limites", text: "teste primeira, última, ativa, disabled e foco." }] },
+  accordion: { use: [{ label: "Detalhe sob demanda", text: "Use para agrupar seções independentes e reduzir densidade inicial da página." }], api: [{ label: ".fs-accordion + data-fs=\"accordion\"", code: true, text: "contêiner que inicializa os painéis." }, { label: ".fs-accordion-button / .fs-accordion-collapse", code: true, text: "gatilho e região expansível de cada item." }, { label: "data-multiple=\"true\"", code: true, text: "permite vários painéis abertos; sem ele, abrir um fecha os demais." }], a11y: [{ label: "Semântica", text: "o componente sincroniza aria-expanded, aria-controls e região nomeada." }], states: [{ label: "Painel", text: "teste aberto inicial, exclusivo, múltiplo, teclado e movimento reduzido." }] },
+  tabs: { use: [{ label: "Visões pares", text: "Use para trocar painéis relacionados sem deixar a página; cada aba precisa de um conteúdo associado." }], api: [{ label: ".fs-tabs + data-fs=\"tabs\"", code: true, text: "lista de abas e auto-init." }, { label: ".fs-tab-button / .fs-tab-panel", code: true, text: "gatilho e painel correspondentes." }, { label: "data-fs-tab-target=\"#painel\"", code: true, text: "liga botão ao painel por id." }], a11y: [{ label: "Padrão Tabs", text: "roles tablist, tab e tabpanel, aria-selected e setas são sincronizados." }], states: [{ label: "Navegação", text: "teste ativa, foco, ArrowLeft/Right, Home/End e painel vazio." }] },
+  collapse: { use: [{ label: "Conteúdo adicional", text: "Use para mostrar mais detalhes de uma única região sem a semântica de grupo do Accordion." }], api: [{ label: "data-fs=\"collapse\" + data-fs-target=\"#id\"", code: true, text: "gatilho e destino da expansão." }, { label: ".fs-collapse", code: true, text: "painel com recorte necessário à animação." }, { label: "aria-expanded=\"true\"", code: true, text: "define o estado inicial aberto." }], a11y: [{ label: "Estado", text: "aria-expanded e aria-controls são atualizados automaticamente." }], states: [{ label: "Transição", text: "teste aberto, fechado, conteúdo alto e prefers-reduced-motion." }] },
+  stepper: { use: [{ label: "Progresso sequencial", text: "Use para comunicar etapas de um processo, não para navegar livremente entre conteúdos." }], api: [{ label: ".fs-stepper / .fs-step", code: true, text: "estrutura da sequência." }, { label: ".is-active / .is-completed / .is-error", code: true, text: "marcam etapa atual, concluída e com falha." }], a11y: [{ label: "Estado textual", text: "inclua rótulo e status compreensível; cor do marcador não basta." }], states: [{ label: "Fluxo", text: "teste pendente, atual, concluída, erro e reflow compacto." }] },
+  "nested-menu": { use: [{ label: "Navegação hierárquica", text: "Use para poucos níveis de destinos relacionados; não esconda arquitetura complexa em menus profundos." }], api: [{ label: ".fs-nested-menu + data-fs=\"nested-menu\"", code: true, text: "raiz e auto-init." }, { label: "[data-fs-nested-menu-toggle] / [data-fs-nested-menu-submenu]", code: true, text: "identificam gatilho e submenu." }], a11y: [{ label: "Expansão", text: "o toggle precisa de nome e aria-expanded atualizado; preserve Escape e foco." }], states: [{ label: "Subnível", text: "teste aberto, fechado, item ativo, teclado e clique externo." }] },
+  "tree-view": { use: [{ label: "Estrutura aninhada", text: "Use para arquivos, permissões ou categorias com relação pai-filho explícita." }], api: [{ label: ".fs-tree / .fs-tree-item", code: true, text: "lista e nó da árvore." }, { label: ".fs-tree-toggle / .fs-tree-children", code: true, text: "controle de expansão e grupo filho." }], a11y: [{ label: "Hierarquia", text: "mantenha rótulos, níveis e estado expandido disponíveis; controles precisam de nome." }], states: [{ label: "Nó", text: "teste expandido, recolhido, selecionado, foco e nomes longos." }] },
+  dropdown: { use: [{ label: "Ações contextuais", text: "Use para agrupar poucas ações secundárias ligadas a um gatilho." }], api: [{ label: "data-fs=\"dropdown\"", code: true, text: "inicializa o grupo." }, { label: "[data-fs-dropdown-toggle] / .fs-dropdown-menu", code: true, text: "gatilho e menu." }], a11y: [{ label: "Foco", text: "aria-expanded, Escape e retorno de foco são geridos; cada item precisa de texto claro." }], states: [{ label: "Menu", text: "teste aberto, fechado, teclado, borda de viewport e disabled." }] },
+  tooltip: { use: [{ label: "Dica curta", text: "Use para explicar ícone ou termo; não esconda instrução necessária exclusivamente no hover." }], api: [{ label: "data-fs=\"tooltip\" + title", code: true, text: "inicializa e fornece o texto da dica." }, { label: "data-fs-tooltip-placement", code: true, text: "define top, right, bottom ou left." }], a11y: [{ label: "Alternativa", text: "a dica deve aparecer por foco e não ser a única fonte de informação essencial." }], states: [{ label: "Posição", text: "teste hover, foco, Escape, viewport e conteúdo longo." }] },
+  "hover-card": { use: [{ label: "Prévia rica", text: "Use para contexto adicional associado a link ou botão, sem interromper a tarefa principal." }], api: [{ label: "data-fs=\"hover-card\"", code: true, text: "inicializa o gatilho." }, { label: "data-fs-hover-card-content / -placement", code: true, text: "define conteúdo e posição." }], a11y: [{ label: "Foco", text: "o conteúdo deve poder ser alcançado por foco quando contiver ações." }], states: [{ label: "Sobreposição", text: "teste hover, foco, atraso, Escape e limite da viewport." }] },
+  popover: { use: [{ label: "Informação ou ação curta", text: "Use para conteúdo acionado explicitamente; prefira Modal para tarefa extensa." }], api: [{ label: "data-fs=\"popover\"", code: true, text: "inicializa gatilho." }, { label: "data-fs-popover-content / -placement", code: true, text: "conteúdo e posição." }], a11y: [{ label: "Controle", text: "botão precisa de nome e aria-expanded; preserve fechamento por Escape." }], states: [{ label: "Visibilidade", text: "teste aberto, fechado, foco interno e clique externo." }] },
+  offcanvas: { use: [{ label: "Painel lateral", text: "Use para navegação, filtros ou contexto secundário sem abandonar a página." }], api: [{ label: "data-fs=\"offcanvas\" + data-fs-target=\"#id\"", code: true, text: "gatilho e painel." }, { label: ".fs-offcanvas / .fs-offcanvas-start|end", code: true, text: "estrutura e lado de entrada." }], a11y: [{ label: "Diálogo", text: "foco é contido no painel e Escape o fecha; título deve nomear o contexto." }], states: [{ label: "Painel", text: "teste aberto, backdrop, Escape, foco e viewport estreito." }] },
+  modal: { use: [{ label: "Tarefa concentrada", text: "Use para confirmação, formulário curto ou detalhe que exige atenção temporária." }], api: [{ label: "data-fs=\"modal\" + data-fs-target=\"#id\"", code: true, text: "gatilho e diálogo." }, { label: ".fs-modal / .fs-modal-dialog / .fs-modal-content", code: true, text: "camadas estruturais." }], a11y: [{ label: "Foco", text: "role=dialog, aria-modal, título e retorno de foco são essenciais." }], states: [{ label: "Diálogo", text: "teste abrir, fechar, backdrop, Escape, formulário e conteúdo alto." }] },
+  "alert-dialog": { use: [{ label: "Confirmação crítica", text: "Use antes de ação destrutiva ou irreversível; mantenha a consequência explícita." }], api: [{ label: "data-fs=\"alert-dialog\"", code: true, text: "inicializa o diálogo de alerta." }, { label: "data-fs-alert-dialog-confirm", code: true, text: "identifica a ação de confirmação." }], a11y: [{ label: "Urgência", text: "use role=alertdialog, texto descritivo e foco inicial na opção segura." }], states: [{ label: "Decisão", text: "teste confirmar, cancelar, Escape quando permitido e foco restaurado." }] },
+  "command-palette": { use: [{ label: "Atalho de comandos", text: "Use para navegação e ações frequentes de usuários avançados; mantenha alternativas visíveis." }], api: [{ label: "data-fs=\"command-palette\"", code: true, text: "inicializa gatilho e paleta." }, { label: "data-fs-command-palette-input / -list", code: true, text: "identificam busca e resultados." }], a11y: [{ label: "Diálogo", text: "foco, Escape, navegação por setas e anúncio de resultados devem ser preservados." }], states: [{ label: "Busca", text: "teste fechada, aberta, filtrada, vazia, teclado e comandos desabilitados." }] },
+  toast: { use: [{ label: "Feedback transitório", text: "Use para confirmação breve que não exige decisão imediata; erros críticos devem persistir em contexto." }], api: [{ label: ".fs-toast-container / .fs-toast", code: true, text: "região empilhada e mensagem." }, { label: "data-fs=\"toast\" / data-autohide", code: true, text: "inicializa e configura fechamento automático." }], a11y: [{ label: "Anúncio", text: "use região live apropriada e não mova foco para feedback não crítico." }], states: [{ label: "Tempo", text: "teste entrada, auto-fechamento, pausa por hover quando houver e fechamento manual." }] },
+  "notification-center": { use: [{ label: "Histórico de notificações", text: "Use quando mensagens precisam ser revisitadas, filtradas ou marcadas como lidas." }], api: [{ label: "data-fs=\"notification-center\"", code: true, text: "inicializa o painel." }, { label: "data-fs-notification-toggle / -list", code: true, text: "gatilho e lista de notificações." }], a11y: [{ label: "Contagem", text: "o botão deve expor contagem e estado expandido; itens precisam de ações nomeadas." }], states: [{ label: "Lista", text: "teste vazia, não lida, lida, aberta, teclado e marcação em lote." }] },
+};

package/mockup/assets/showcase.css

@@ -0,0 +1,89 @@
+:root {
+  color: var(--fs-color-text);
+  background: var(--fs-color-subtle);
+  color-scheme: light;
+}
+
+html[data-theme="dark"] { color-scheme: dark; }
+
+* { box-sizing: border-box; }
+
+body {
+  min-block-size: 100vh;
+  margin: 0;
+  color: var(--fs-color-text);
+  background: var(--fs-color-subtle);
+  font-family: var(--fs-font-sans, system-ui, sans-serif);
+  line-height: 1.5;
+}
+
+.showcase-shell { max-width: 1440px; margin: 0 auto; padding: 32px 24px 72px; }
+.showcase-hero { max-width: 820px; margin-bottom: 32px; }
+.showcase-eyebrow { margin: 0 0 8px; color: var(--fs-color-primary); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
+.showcase-title { margin: 0; font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.08; }
+.showcase-lead { max-width: 70ch; margin: 16px 0 0; font-size: 1.0625rem; }
+
+.showcase-toolbar, .showcase-nav { display: flex; flex-wrap: wrap; gap: 8px; }
+.showcase-toolbar { margin: 20px 0; }
+.showcase-nav { margin: 0 0 32px; padding: 16px 0; border-block: 1px solid var(--fs-color-border); }
+.showcase-nav a { padding: 6px 10px; border-radius: var(--fs-radius-sm); color: inherit; text-decoration: none; }
+.showcase-nav a:hover, .showcase-nav a:focus-visible { color: var(--fs-color-primary); background: var(--fs-color-surface-alt); outline: none; }
+
+.showcase-section { margin-top: 32px; padding: 24px; border: 1px solid var(--fs-color-border); border-radius: var(--fs-radius-lg); background: var(--fs-color-surface); box-shadow: var(--fs-shadow-sm); scroll-margin-top: 20px; }
+.showcase-section h2 { margin: 0; font-size: 1.5rem; }
+.showcase-description { max-width: 80ch; margin: 8px 0 18px; }
+.showcase-resources { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: -8px 0 18px; font-size: .8125rem; }
+.showcase-resources a { color: var(--fs-color-primary); font-weight: 600; }
+.showcase-details { margin: 0 0 20px; }
+.showcase-details .fs-accordion-button { padding: 10px 12px; font-size: .8125rem; }
+.showcase-detail-body { padding: 12px; font-size: .75rem; }
+.showcase-detail-heading { margin: 10px 0 5px; color: var(--fs-color-muted); font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
+.showcase-detail-heading:first-child { margin-top: 0; }
+.showcase-detail-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
+.showcase-detail-list li { line-height: 1.45; }
+.showcase-detail-list code { padding: 1px 4px; border-radius: 3px; background: var(--fs-color-surface); font: .6875rem/1.35 var(--fs-font-mono, ui-monospace, monospace); }
+.showcase-token { font-family: var(--fs-font-mono, ui-monospace, monospace); font-size: .92em; font-weight: 600; }
+.showcase-token-html { color: var(--fs-color-primary); }
+.showcase-token-css { color: var(--fs-color-danger); }
+.showcase-token-example { color: var(--fs-color-info); }
+.showcase-detail-example { color: var(--fs-color-info); }
+.showcase-detail-example .showcase-token { color: inherit; }
+.showcase-detail-body p { margin: 0; }
+.showcase-detail-body p + p { margin-top: 10px; }
+.showcase-detail-body p code { display: inline-block; margin: 2px 2px 0 0; padding: 1px 4px; border-radius: 3px; color: var(--fs-color-primary); background: var(--fs-color-surface); font: .6875rem/1.35 var(--fs-font-mono, ui-monospace, monospace); overflow-wrap: anywhere; }
+.showcase-detail-body a { color: var(--fs-color-primary); font-weight: 600; }
+
+/* Tokens de preenchimento mantêm contraste para texto claro em botões. Nos
+   laboratórios, onde eles aparecem como texto sobre superfícies escuras, use
+   os tokens textuais semânticos correspondentes. */
+html[data-theme="dark"] .showcase-eyebrow,
+html[data-theme="dark"] .showcase-resources a,
+html[data-theme="dark"] .showcase-nav a:hover,
+html[data-theme="dark"] .showcase-nav a:focus-visible,
+html[data-theme="dark"] .showcase-detail-body p code,
+html[data-theme="dark"] .showcase-detail-body a,
+html[data-theme="dark"] .showcase-token-html { color: var(--fs-alert-primary-text); }
+html[data-theme="dark"] .showcase-token-css { color: var(--fs-alert-danger-text); }
+html[data-theme="dark"] .showcase-token-example,
+html[data-theme="dark"] .showcase-detail-example { color: var(--fs-alert-info-text); }
+
+.showcase-preview { width: 100%; min-height: 560px; border: 1px solid var(--fs-color-border); border-radius: var(--fs-radius-md); background: var(--fs-color-subtle); }
+.showcase-code-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
+.showcase-code-header h3 { margin: 0; font-size: 1rem; }
+.showcase-minimal-header { margin-top: 16px; }
+.showcase-minimal-code { max-height: 190px; }
+.showcase-copy { min-height: 36px; padding: 6px 10px; border: 1px solid var(--fs-color-border); border-radius: var(--fs-radius-sm); color: var(--fs-color-text); background: var(--fs-color-surface-alt); cursor: pointer; }
+.showcase-copy:hover, .showcase-copy:focus-visible { border-color: var(--fs-color-primary); outline: 2px solid var(--fs-color-focus-ring); outline-offset: 2px; }
+.showcase-code { max-height: 420px; margin: 8px 0 0; padding: 16px; overflow: auto; border-radius: var(--fs-radius-md); color: var(--fs-color-text-inverse, #fff); background: var(--fs-color-code, #17202a); font: .8125rem/1.5 var(--fs-font-mono, ui-monospace, monospace); white-space: pre; }
+.showcase-status { min-height: 1.25rem; margin: 8px 0 0; font-size: .875rem; }
+
+@media (max-width: 720px) {
+  .showcase-shell { padding-inline: 16px; }
+  .showcase-section { padding: 16px; }
+  .showcase-preview { min-height: 480px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
+  .fs-spinner, .fs-progress-bar-animated, .fs-progress-indeterminate .fs-progress-bar { animation-duration: 1.5s !important; animation-iteration-count: infinite !important; }
+}