Referência

Changelog

Histórico de mudanças do DiSco. Major para quebras de compatibilidade, minor para adições, patch para correções.

v1.5.0 Minor
Jun 2026
🧹Padronização de labels — classes ad-hoc de legenda (wl-label, stat-bar-label, profile-stat-label) substituídas por demo-label global em styles.css.
🧹result-label movida para styles.css — .result-label, .result-label.disco e .result-label.pessoa eram page-specific em buscar.html; agora são globais e reutilizáveis.
🧹carousel.html — classes genéricas .label e .sublabel renomeadas para .card-title e .card-subtitle para evitar colisão e tornar o escopo explícito.
🎨Card Feedback na home — ícone corrigido de vinil girando para representação fiel do Feedback Widget (painel lateral com estrelas).
🔍Revisão geral — todos os 45 atalhos da home verificados e confirmados; todas as seções auditadas para consistência de estrutura e labels.
v1.4.0 Minor
Jun 2026
✨Grid Cell — célula da coleção em modo grid; capa quadrada, tap duplo para curtir, badges de rating e comentário sobrepostos.
✨Grouped Feed Card — variante do feed card para adição em lote; grid 2×2 ou 3×3 de capas com overlay "+N".
✨Wishlist Button — botão de bookmark com animação de pop (scale bounce) ao adicionar à lista de desejos.
✨Milestone Sheet — celebração ao atingir marcos de coleção (10, 25, 50, 100, 250, 500, 1000 discos) com confetti e número gigante.
✨Stars — exibição read-only de estrelas; diferente do StarRating interativo, usado em listas e cards.
✨Splash Screen — tela de loading inicial com logo vinyl girando e "Spinando..." com pontos animados.
✨Onboarding — fluxo de boas-vindas em 3 slides animados + tela final de ação com 3 opções de início.
📐Perfil — padrão de layout de perfil com avatar, stats e tabs (Coleção / Listas / Atividades).
📐Buscar — padrão de layout de busca com search bar persistente, chips de filtro e resultados mistos.
📐Notificações — padrão de lista de notificações com 4 tipos (like, comment, follow, common_record).
📐Estatísticas — padrão de tela de insights com número hero, barras de distribuição por gênero e ranking de artistas.
📐Listas — padrão de grade de listas de usuário com collage de capas 2×2.
🎨Sidebar redesenhado — fundo #080808, itens com pill active lime, headers de grupo uppercase, separadores entre clusters, scrollbar invisível.
📱Phone frame em todos os componentes — seção Visão geral de todos os 17 componentes agora exibe o componente em contexto real dentro de um phone frame Spinlist.
v1.3.0 Minor
Jun 2026
✨Tabs — documentação do componente de abas usado em Disco Detalhe, com demo interativo, estados e Do/Don't.
✨Badge — dot e contagem posicionados sobre ícones do BottomNav; variantes dot, count e cap 99+.
✨Search Bar — campo de busca contextual com estados default/focused/digitando e demo interativo com Cancelar.
📐Layouts — Onboarding — 5º padrão de layout: Login, Cadastro e Boas-vindas sem BottomNav, logo centralizado e CTA fixo no rodapé.
🎨Iconografia — TOC navegável, seções por grupo e botão "Copiar SVG" em cada ícone.
v1.2.0 Minor
Jun 2026
🔍Busca global — modal ⌘K com índice de todos os componentes, padrões e páginas de fundação.
📋Copy buttons — todos os blocos de código ganham botão "Copiar" com feedback visual.
⚓Anchor links — cada seção ganha link direto (#id) ao passar o mouse no título.
📱Mobile navigation — sidebar vira drawer com hamburger no mobile.
🟡Status badges — componentes em beta ou depreciados são sinalizados no menu e na página.
📐Border Radius — padronizado em múltiplos de 8 px; mapeamento rounded-sm → 8 px, md → 16 px, lg → 24 px, xl → 32 px.
🃏Feed Card — variante story para posts de compartilhamento (proporção 9:16).
v1.1.0 Minor
Mar 2026
✨Componente Feedback — widget flutuante de coleta de opinião inline. Beta.
✨Skeleton — documentação da animação shimmer e variantes de bloco, texto e avatar.
✨Motion — durations, easings e princípios de animação do Spinlist.
✨WCAG — checklist de acessibilidade com níveis AA/AAA, tap target mínimo e uso de aria-label.
v1.0.0 Lançamento
Jan 2026
🚀Lançamento do DiSco — primeira versão pública do design system do Spinlist.
✅Fundação — Cores, Tipografia, Iconografia, Espaçamento, Elevação.
✅Componentes estáveis — Botão, Campo de Texto, Chip, Card, Header, Feed Card, Star Rating, Toast, Avatar, Bottom Sheet, Navegação.
✅Padrões — Estados, Estados Vazios, List Item.
✅Referência — Marca, Tokens W3C.