fokus-styles 2.0.0 → 2.3.0

package/docs/components/accordion.md

@@ -55,6 +55,9 @@ força todos fechados).
 
 ## A11y
 
+Use `.fs-accordion-flush` para remover bordas externas. Com `data-fs-always-open="true"`,
+um painel aberto não pode ser fechado isoladamente.
+
 `aria-controls`/`aria-expanded` (botão) e `role="region"`/
 `aria-labelledby` (painel) aplicados automaticamente. Cada botão é um
 `<button>` nativo dentro de um heading (`<h3>`) — navegável por `Tab` e

package/docs/components/avatar.md

@@ -0,0 +1,13 @@
+# Avatar
+
+## Visão geral
+
+Use `.fs-avatar` para representar uma pessoa, equipe ou entidade com imagem ou iniciais.
+
+## Estados
+
+Combine `.fs-avatar-sm`, `.fs-avatar-lg` e `.fs-avatar-square` conforme o contexto.
+
+## A11y
+
+Imagens devem ter `alt` descritivo; iniciais devem ter um nome acessível com `aria-label`.

package/docs/components/button-group.md

@@ -0,0 +1,13 @@
+# Button group
+
+## Visão geral
+
+`.fs-button-group` agrupa ações relacionadas em uma unidade visual.
+
+## Estados
+
+Use `.fs-button-group-vertical` em barras verticais e mantenha apenas uma ação primária.
+
+## A11y
+
+Use `role="group"` e `aria-label` quando o agrupamento não tiver um título visível.

package/docs/components/close-button.md

@@ -0,0 +1,13 @@
+# Close button
+
+## Visão geral
+
+`.fs-close` fornece um controle compacto para fechar painéis, diálogos e toasts.
+
+## Estados
+
+O estado hover e o focus-visible são fornecidos pelo componente.
+
+## A11y
+
+Sempre informe `aria-label="Fechar"` e associe o controle ao conteúdo que ele fecha.

package/docs/components/code.md

@@ -0,0 +1,13 @@
+# Code
+
+## Visão geral
+
+`.fs-code` estiliza código inline e `.fs-pre` apresenta blocos pré-formatados.
+
+## Estados
+
+O bloco mantém rolagem horizontal para preservar linhas longas.
+
+## A11y
+
+Use `code` para trechos curtos e `pre` para blocos; não transmita informação somente por cor.

package/docs/components/icon-link.md

@@ -0,0 +1,13 @@
+# Icon link
+
+## Visão geral
+
+`.fs-icon-link` alinha um ícone a um link textual.
+
+## Estados
+
+O ícone acompanha o hover do link e respeita redução de movimento.
+
+## A11y
+
+O texto do link deve continuar presente; o ícone decorativo deve usar `aria-hidden="true"`.

package/docs/components/list-group.md

@@ -0,0 +1,13 @@
+# List group
+
+## Visão geral
+
+`.fs-list-group` e `.fs-list-group-item` compõem listas de navegação ou seleção.
+
+## Estados
+
+Use `.is-active` para o item atual e elementos `a` ou `button` para itens interativos.
+
+## A11y
+
+Escolha uma lista semântica e forneça nome ao grupo quando ele representar uma região.

package/docs/components/modal.md

@@ -61,6 +61,9 @@ explícito fecha. Use para fluxos que exigem uma decisão explícita.
 
 ## A11y
 
+Use `.fs-modal-sm`, `.fs-modal-lg`, `.fs-modal-xl`, `.fs-modal-fullscreen` e
+`.fs-modal-scrollable` conforme o fluxo. Em telas menores o diálogo respeita safe areas.
+
 Ao inicializar, o componente controla `aria-hidden` e, quando encontra
 `.fs-modal-title`, cria automaticamente o vínculo `aria-labelledby`. Um
 `id` existente no título é preservado.

package/docs/components/navbar.md

@@ -40,6 +40,9 @@ composição (o que vai dentro) que muda.
 
 ## A11y
 
+O padrão responsivo usa `.fs-navbar-toggler`, `.fs-navbar-collapse` e `data-fs-target`.
+Mantenha `aria-expanded` e um nome acessível no botão.
+
 - Use `<nav>` como elemento raiz (já no exemplo) — landmark de navegação
   pra leitores de tela.
 - Se houver mais de uma navbar na página, diferencie com

package/docs/components/pagination.md

@@ -98,6 +98,9 @@ de `aria-label` (`"Anterior"`/`"Próxima"`) já que o SVG é `aria-hidden`.
 
 ## A11y
 
+Envolva a paginação em `.fs-pagination-scroll` quando houver muitos itens. Use `nav`
+nomeado, `aria-current="page"` e desabilite controles sem destino real.
+
 - Envolva a lista num `<nav aria-label="Paginação">` — o elemento `<nav>`
   não é gerado pelo framework, adicione no seu HTML.
 - Marque a página atual com `aria-current="page"` no link ativo, além de

package/docs/components/placeholder.md

@@ -0,0 +1,13 @@
+# Placeholder
+
+## Visão geral
+
+`.fs-placeholder` representa conteúdo ainda carregando e é visualmente distinto de Skeleton.
+
+## Estados
+
+Use `.fs-placeholder-glow`, `.fs-placeholder-wave` ou `.fs-placeholder-btn` conforme o formato.
+
+## A11y
+
+Anuncie carregamento com `aria-busy="true"` no contêiner e uma região live quando necessário.

package/docs/components/ratio.md

@@ -0,0 +1,13 @@
+# Ratio
+
+## Visão geral
+
+`.fs-ratio` cria frames de mídia responsivos sem depender da altura do viewport.
+
+## Estados
+
+Escolha `.fs-ratio-1x1`, `.fs-ratio-4x3`, `.fs-ratio-16x9` ou `.fs-ratio-21x9`.
+
+## A11y
+
+Mantenha texto alternativo em imagens e legendas ou título acessível em mídia incorporada.

package/docs/components/scrollspy.md

@@ -0,0 +1,13 @@
+# Scrollspy
+
+## Visão geral
+
+`data-fs-scrollspy` destaca o link da seção atualmente visível e pode ser usado em navegação lateral.
+
+## Estados
+
+O módulo JS aplica `.is-active` e emite `fs:scrollspy:activate`.
+
+## A11y
+
+Use uma navegação nomeada, mantenha foco visível e não remova a indicação textual do destino.

package/docs/components/skeleton.md

@@ -38,6 +38,9 @@ dados reais chegarem.
 
 ## A11y
 
+As variantes `.fs-skeleton-card`, `.fs-skeleton-table` e `.fs-skeleton-avatar` são visuais;
+anuncie o carregamento no contêiner com `aria-busy="true"`.
+
 A animação para automaticamente sob `prefers-reduced-motion: reduce`
 (fica estática, sem pulso/varredura). Se o carregamento for anunciado a
 leitores de tela, envolva o conjunto de skeletons num contêiner com

package/docs/components/table.md

@@ -53,6 +53,9 @@ opcional que reusa `.fs-table`.
 
 ## A11y
 
+Use `.fs-table-responsive` para rolagem horizontal, `.fs-table-caption` para legenda e
+`.fs-table-empty` para estados sem dados. `.fs-table-priority` preserva colunas essenciais.
+
 - Use `<th scope="col">`/`<th scope="row">` conforme o cabeçalho for de
   coluna ou linha — não é aplicado automaticamente.
 - Para tabelas grandes/complexas, considere `<caption>` descrevendo o

package/docs/guides/javascript-api.md

@@ -0,0 +1,9 @@
+# API JavaScript
+
+Os módulos vanilla são SSR-safe quando importados e expõem instâncias idempotentes por
+`getOrCreateInstance`. Modal, Theme, Navbar, Scrollspy e FormValidation também oferecem
+destruição explícita com `dispose()`.
+
+Os eventos comuns são `fs:show`, `fs:shown`, `fs:hide` e `fs:hidden`. Atributos declarativos
+usam `data-fs-toggle`, `data-fs-target`, `data-fs-dismiss`, `data-fs-placement` e
+`data-fs-theme`.

package/docs/guides/utility-api.md

@@ -0,0 +1,9 @@
+# Utility API e configuração Sass
+
+O Fokus Styles oferece presets públicos em `fokus-styles/core`, `fokus-styles/components`,
+`fokus-styles/utilities` e `fokus-styles/themes`. O arquivo `fokus-styles/config` expõe o
+mapa `$fs-config` para entradas Sass customizadas.
+
+O mixin `fs-fluid-type()` usa `clamp()` para escalar valores entre dois limites sem exigir
+JavaScript. Classes utilitárias novas seguem o namespace `fs-u-*` e as classes existentes
+continuam válidas dentro da linha 2.x.

package/docs/reference/size-baseline.json

@@ -1,34 +1,34 @@
 {
-  "measuredAt": "2026-09-07T21:04:20.442Z",
+  "measuredAt": "2026-09-07T22:40:15.289Z",
   "unit": "bytes",
   "files": {
     "css/layout.min.css": {
-      "bytes": 21560,
-      "gzipBytes": 4809
+      "bytes": 28539,
+      "gzipBytes": 5951
     },
     "css/forms.min.css": {
-      "bytes": 30769,
-      "gzipBytes": 6476
+      "bytes": 33746,
+      "gzipBytes": 6986
     },
     "css/components.min.css": {
-      "bytes": 83375,
-      "gzipBytes": 14496
+      "bytes": 92904,
+      "gzipBytes": 16191
     },
     "css/helpers.min.css": {
-      "bytes": 53574,
-      "gzipBytes": 9104
+      "bytes": 61032,
+      "gzipBytes": 10609
     },
     "css/fonts.min.css": {
       "bytes": 1505,
       "gzipBytes": 409
     },
     "css/fokus.min.css": {
-      "bytes": 144930,
-      "gzipBytes": 22544
+      "bytes": 164376,
+      "gzipBytes": 25875
     },
     "js/fokus.min.js": {
-      "bytes": 98921,
-      "gzipBytes": 21196
+      "bytes": 107627,
+      "gzipBytes": 23063
     }
   }
 }

package/mockup/assets/example-theme.css

@@ -1,5 +1,7 @@
 html[data-theme="dark"],
-html[data-theme="dark"] body {
+html[data-fs-theme="dark"],
+html[data-theme="dark"] body,
+html[data-fs-theme="dark"] body {
   min-height: 100%;
   color: var(--fs-color-text);
   background-color: var(--fs-color-surface);

package/mockup/assets/example-theme.js

@@ -3,7 +3,9 @@
 const exampleTheme = new URLSearchParams(window.location.search).get("theme");
 
 if (exampleTheme === "dark") {
+  document.documentElement.setAttribute("data-fs-theme", "dark");
   document.documentElement.setAttribute("data-theme", "dark");
 } else {
+  document.documentElement.setAttribute("data-fs-theme", "light");
   document.documentElement.removeAttribute("data-theme");
 }

package/mockup/assets/showcase-contracts.js

@@ -7,7 +7,7 @@ window.showcaseContracts = {
   },
   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." }],
+    api: [{ label: "data-fs-theme=\"light|dark|auto\"", code: true, text: "controla o color mode canônico em html ou em um contêiner." }, { label: "data-theme=\"dark\"", code: true, text: "permanece como compatibilidade para consumidores existentes." }, { label: "data-fs-brand=\"violet|corporate|vibrant\"", code: true, text: "seleciona uma marca publicada; pode ser combinado com data-fs-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." }],
   },
@@ -62,7 +62,7 @@ window.showcaseContracts = {
   "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." }] },
+  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-toggle=\"navbar\" + data-fs-target", code: true, text: "ativa colapso no viewport compacto e mantém aria-expanded." }], 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." }] },

package/mockup/assets/showcase.css

@@ -4,7 +4,7 @@
   color-scheme: light;
 }
 
-html[data-theme="dark"] { color-scheme: dark; }
+html[data-theme="dark"], html[data-fs-theme="dark"] { color-scheme: dark; }
 
 * { box-sizing: border-box; }
 
@@ -65,7 +65,9 @@ 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); }
+html[data-theme="dark"] .showcase-detail-example,
+html[data-fs-theme="dark"] .showcase-token-example,
+html[data-fs-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; }

package/mockup/assets/showcase.js

@@ -482,6 +482,7 @@ const apiExtensions = {
 };
 
 if (new URLSearchParams(window.location.search).get("theme") === "dark") {
+  document.documentElement.setAttribute("data-fs-theme", "dark");
   document.documentElement.setAttribute("data-theme", "dark");
   if (themeButton) themeButton.textContent = "Usar tema claro";
 }
@@ -713,6 +714,7 @@ for (const item of catalog) {
 
 themeButton?.addEventListener("click", () => {
   const dark = document.documentElement.getAttribute("data-theme") !== "dark";
+  document.documentElement.setAttribute("data-fs-theme", dark ? "dark" : "light");
   document.documentElement.toggleAttribute("data-theme", dark);
   if (dark) document.documentElement.setAttribute("data-theme", "dark");
   themeButton.textContent = dark ? "Usar tema claro" : "Usar tema escuro";

package/mockup/examples/js-foundation.html

@@ -82,6 +82,21 @@
         </div>
     </section>
 
+    <section>
+        <h2 class="fs-u-fs-md fs-u-fw-medium fs-u-mb-2">4. API declarativa 2.3</h2>
+        <p class="fs-u-fs-sm fs-u-mb-3">Theme, validação e eventos comuns usam os exports vanilla sem dependências externas.</p>
+        <div class="fs-form-row">
+            <button type="button" class="fs-btn" id="theme-toggle">Alternar tema com FokusStyles.Theme</button>
+            <form class="fs-form-col" data-fs="form-validation" id="api-form" novalidate>
+                <label class="fs-form-label" for="api-required">Campo obrigatório</label>
+                <input class="fs-form-control" id="api-required" required aria-describedby="api-feedback">
+                <div class="fs-invalid-feedback" id="api-feedback">Informe um valor para continuar.</div>
+                <button class="fs-btn fs-btn-primary" type="submit">Validar formulário</button>
+            </form>
+        </div>
+        <p class="fs-u-fs-xs fs-u-mt-2" id="api-status" role="status" aria-live="polite"></p>
+    </section>
+
     <section>
         <h2 class="fs-u-fs-md fs-u-fw-medium fs-u-mb-2">2. Foco, teclado e overlay (FokusStyles.core.createFocusTrap / onEscapeKey / lockScroll / onClickOutside)</h2>
         <p class="fs-u-fs-sm fs-u-mb-3">Abre um painel com scroll da página bloqueado, foco preso via Tab/Shift+Tab, fecha com Escape ou clique fora.</p>
@@ -184,6 +199,16 @@
                 core.collapse(collapsePanel);
             }
         });
+
+        const apiStatus = document.getElementById("api-status");
+        document.getElementById("theme-toggle").addEventListener("click", () => {
+            const next = FokusStyles.Theme.getOrCreateInstance().get() === "dark" ? "light" : "dark";
+            FokusStyles.Theme.set(next);
+            apiStatus.textContent = `Tema ${next} aplicado.`;
+        });
+        document.getElementById("api-form").addEventListener("fs:form:validated", (event) => {
+            apiStatus.textContent = event.detail.valid ? "Formulário válido." : "Formulário precisa de atenção.";
+        });
     </script>
 
 </body>

package/mockup/examples/tables-navbar.html

@@ -15,7 +15,8 @@
             background-color: var(--fs-color-subtle);
         }
 
-        html[data-theme="dark"] .theme-panel {
+        html[data-theme="dark"] .theme-panel,
+        html[data-fs-theme="dark"] .theme-panel {
             color: var(--fs-color-text);
             background-color: var(--fs-color-surface);
         }
@@ -25,14 +26,17 @@
 </head>
 <body>
 <div class="theme-panel">
-        <nav class="fs-navbar fs-u-mb-3">
+        <nav class="fs-navbar fs-u-mb-3" data-fs="navbar" aria-label="Navegação principal">
             <a href="#" class="fs-navbar-brand">FokusStyles</a>
-            <ul class="fs-navbar-nav">
-                <li><a href="#" class="fs-nav-link is-active">Início</a></li>
-                <li><a href="#" class="fs-nav-link">Projetos <span class="fs-badge fs-badge-primary fs-badge-sm">3</span></a></li>
-                <li><a href="#" class="fs-nav-link is-disabled">Configurações</a></li>
-            </ul>
-            <button type="button" class="fs-btn fs-btn-primary fs-btn-sm">Entrar</button>
+            <button type="button" class="fs-navbar-toggler" data-fs-toggle="navbar" data-fs-target="#demo-navbar-menu" aria-controls="demo-navbar-menu" aria-expanded="false">Menu</button>
+            <div class="fs-navbar-collapse" id="demo-navbar-menu" hidden>
+                <ul class="fs-navbar-nav">
+                    <li><a href="#" class="fs-nav-link is-active" aria-current="page">Início</a></li>
+                    <li><a href="#" class="fs-nav-link">Projetos <span class="fs-badge fs-badge-primary fs-badge-sm">3</span></a></li>
+                    <li><a href="#" class="fs-nav-link is-disabled">Configurações</a></li>
+                </ul>
+                <button type="button" class="fs-btn fs-btn-primary fs-btn-sm">Entrar</button>
+            </div>
         </nav>
 
         <div class="fs-table-responsive">

package/mockup/examples/theming.html

@@ -17,7 +17,8 @@
             padding: 24px;
         }
 
-        html[data-theme="dark"] .theme-panel {
+        html[data-theme="dark"] .theme-panel,
+        html[data-fs-theme="dark"] .theme-panel {
             color: var(--fs-color-text);
             background-color: var(--fs-color-surface);
         }

package/mockup/foundations.html

@@ -1,7 +1,7 @@
 <!doctype html><html lang="pt-BR"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>FokusStyles — Fundamentos</title><link rel="stylesheet" href="../dist/css/fonts.css"><link rel="stylesheet" href="../dist/css/components.css"><link rel="stylesheet" href="../dist/css/forms.css"><link rel="stylesheet" href="../dist/css/helpers.css"><link rel="stylesheet" href="assets/showcase.css"></head><body><main class="showcase-shell"><header class="showcase-hero"><p class="showcase-eyebrow">Fokus Styles · laboratório</p><h1 class="showcase-title">Fundamentos e infraestrutura</h1><p class="showcase-lead">Tokens, layout, temas, ícones e utilitários JavaScript que sustentam os componentes. Cada preview é executável; o código mostrado é extraído do próprio exemplo.</p></header><div class="showcase-toolbar"><button class="fs-btn fs-btn-primary" type="button" data-showcase-theme>Usar tema escuro</button><a class="fs-btn" href="README.md">Índice dos laboratórios</a></div><nav class="showcase-nav" aria-label="Componentes desta página" data-showcase-navigation></nav><div data-showcase-sections></div></main><script id="showcase-catalog" type="application/json">[
 {"id":"layout","title":"Layout","description":"Estruturas de página, grid, containers e comportamento responsivo para compor interfaces previsíveis.","use":"Use como base de páginas e regiões; não use utilitários para substituir semântica HTML.","api":".fs-container, .fs-row, .fs-col-* e utilitários fs-u-*.","a11y":"Mantenha landmarks, ordem lógica de leitura e títulos hierárquicos.","states":"Breakpoints, densidade e regiões de conteúdo.","source":"examples/layout.html","height":900},
-{"id":"theming","title":"Temas e marcas","description":"Alternância de data-theme e data-fs-brand sobre os tokens semânticos do FokusStyles.","use":"Use para personalizar a aparência sem alterar markup de componentes.","api":"data-theme=dark e data-fs-brand; tokens --fs-*.","a11y":"Verifique contraste após qualquer marca personalizada.","states":"Claro, escuro e marcas alternativas.","source":"examples/theming.html","height":650},
+{"id":"theming","title":"Temas e marcas","description":"Alternância de data-fs-theme, compatibilidade data-theme e data-fs-brand sobre os tokens semânticos do FokusStyles.","use":"Use para personalizar a aparência sem alterar markup de componentes.","api":"data-fs-theme=light|dark|auto, data-theme e data-fs-brand; tokens --fs-*.","a11y":"Verifique contraste após qualquer marca personalizada.","states":"Claro, escuro, automático e marcas alternativas.","source":"examples/theming.html","height":650},
 {"id":"icons","title":"Ícones","description":"Catálogo e uso de ícones com rótulos acessíveis e alinhamento consistente.","use":"Use ícones para reforçar ações conhecidas; mantenha texto quando houver ambiguidade.","api":"Classes de ícone e utilitários de tamanho publicados.","a11y":"Ícones decorativos são ocultos; botões somente com ícone recebem nome acessível.","states":"Tamanhos, cores e ícones em controles.","source":"examples/icons.html","height":1200},
 {"id":"divider","title":"Divider","description":"Separadores visuais para organizar grupos relacionados sem substituir hierarquia de conteúdo.","use":"Separe blocos próximos em listas, painéis e formulários.","api":".fs-divider e modificadores de orientação.","a11y":"Não use o separador como único indicador de mudança de assunto.","states":"Horizontal, vertical e espaçamentos adjacentes.","source":"examples/divider.html","height":520},
-{"id":"js-foundation","title":"Infraestrutura JavaScript","description":"Posicionamento, foco, overlay e transições reutilizados pelos componentes interativos.","use":"Use as APIs públicas apenas quando montar comportamento avançado fora dos componentes prontos.","api":"FokusStyles.core.computePosition(), createFocusTrap(), collapse() e expand().","a11y":"Preserve foco, Escape, bloqueio de scroll e preferência por movimento reduzido.","states":"Flip de posicionamento, focus trap, clique externo e transições.","source":"examples/js-foundation.html","height":1100}
+{"id":"js-foundation","title":"Infraestrutura JavaScript","description":"Posicionamento, foco, overlays, temas, validação e transições reutilizados pelos componentes interativos.","use":"Use as APIs públicas apenas quando montar comportamento avançado fora dos componentes prontos.","api":"FokusStyles.core, Theme.set(), FormValidation, eventos fs:* e data-fs-toggle.","a11y":"Preserve foco, Escape, bloqueio de scroll, aria-invalid e preferência por movimento reduzido.","states":"Flip de posicionamento, focus trap, tema, validação, clique externo e transições.","source":"examples/js-foundation.html","height":1500}
 ]</script><script src="../dist/js/fokus.js"></script><script src="assets/showcase-contracts.js"></script><script src="assets/showcase.js"></script></body></html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fokus-styles",
-  "version": "2.0.0",
+  "version": "2.3.0",
   "description": "Fokus Styles is a complete CSS framework with components, utilities, vanilla JavaScript, icons, React wrappers, and a CLI.",
   "keywords": [
     "css",
@@ -48,6 +48,19 @@
     "./forms.css": "./dist/css/forms.css",
     "./components.css": "./dist/css/components.css",
     "./helpers.css": "./dist/css/helpers.css",
+    "./core": "./dist/css/fokus-core.css",
+    "./components": "./dist/css/fokus-components.css",
+    "./utilities": "./dist/css/fokus-utilities.css",
+    "./themes": "./dist/css/fokus-dark.css",
+    "./config": "./packages/fokus-core/scss/settings/_config.scss",
+    "./js/theme": {
+      "types": "./packages/fokus-js/js/theme.d.ts",
+      "default": "./packages/fokus-js/js/theme.js"
+    },
+    "./js/focus-trap": {
+      "types": "./packages/fokus-js/js/focus-trap.d.ts",
+      "default": "./packages/fokus-js/js/focus-trap.js"
+    },
     "./fonts.css": "./dist/css/fonts.css",
     "./js": {
       "types": "./packages/fokus-js/js/fokus.d.ts",

package/packages/fokus-cli/bin/fokus.mjs

@@ -10,6 +10,7 @@ const HELP = `fokus — CLI do Fokus Styles
 
 Uso:
   fokus build <entry.scss> -o <saida.css> [--minify]
+  fokus build <entry.scss> -o <saida.css> [--preset core|components|utilities|full]
   fokus theme <nome> --primary <#hex> [-o <saida.css>]
   fokus analyze <arquivo...>
 
@@ -40,6 +41,12 @@ function parseFlags(args) {
     } else if (arg === "--primary") {
       flags.primary = args[i + 1];
       i += 1;
+    } else if (arg === "--preset") {
+      flags.preset = args[i + 1];
+      i += 1;
+    } else if (arg === "--exclude") {
+      flags.exclude = args[i + 1]?.split(",").filter(Boolean) ?? [];
+      i += 1;
     } else {
       positional.push(arg);
     }
@@ -58,7 +65,17 @@ async function runBuild(args) {
     return;
   }
 
-  const { outPath } = await buildCss({ entry, out: flags.out, minify: Boolean(flags.minify) });
+  const presetEntries = { core: ["scss", "entries", "core-entry.scss"], components: ["scss", "entries", "components-entry.scss"], utilities: ["scss", "entries", "utilities-entry.scss"], full: ["scss", "fokus.scss"] };
+  const projectRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "../../..");
+  const resolvedEntry = flags.preset && presetEntries[flags.preset]
+    ? path.join(projectRoot, ...presetEntries[flags.preset])
+    : entry;
+  if (flags.preset && !presetEntries[flags.preset]) {
+    console.error(`Preset desconhecido: ${flags.preset}`);
+    process.exitCode = 1;
+    return;
+  }
+  const { outPath } = await buildCss({ entry: resolvedEntry, out: flags.out, minify: Boolean(flags.minify), exclude: flags.exclude ?? [] });
   console.log(`CSS compilado em ${outPath}`);
 }
 

package/packages/fokus-cli/lib/build.mjs

@@ -9,7 +9,7 @@ import cssnano from "cssnano";
 // `fokus-styles/scss` ou qualquer outro pacote Sass) usando o mesmo pipeline
 // do build interno do FokusStyles (sass -> autoprefixer -> cssnano opcional),
 // sem exigir que o consumidor monte a própria toolchain.
-export async function buildCss({ entry, out, minify = false, loadPaths = [] }) {
+export async function buildCss({ entry, out, minify = false, loadPaths = [], exclude = [] }) {
   const entryPath = path.resolve(entry);
   const outPath = path.resolve(out);
 
@@ -20,7 +20,17 @@ export async function buildCss({ entry, out, minify = false, loadPaths = [] }) {
     style: "expanded",
   });
 
-  const plugins = minify ? [autoprefixer, cssnano] : [autoprefixer];
+  const excluded = exclude.map((name) => String(name).replace(/^fs-/, "").trim()).filter(Boolean);
+  const excludePlugin = {
+    postcssPlugin: "fokus-exclude-components",
+    Once(root) {
+      if (excluded.length === 0) return;
+      root.walkRules((rule) => {
+        if (excluded.some((name) => rule.selector.includes(`.fs-${name}`) || rule.selector.includes(`[data-fs=\"${name}\"]`))) rule.remove();
+      });
+    },
+  };
+  const plugins = minify ? [excludePlugin, autoprefixer, cssnano] : [excludePlugin, autoprefixer];
   const result = await postcss(plugins).process(compiled.css, {
     from: entryPath,
     to: outPath,

package/packages/fokus-components/scss/components/_accordion.scss

@@ -27,6 +27,19 @@
     border-bottom-left-radius: var(--fs-radius-md);
   }
 
+  .fs-accordion-flush .fs-accordion-item {
+    border-inline: 0;
+    border-radius: 0;
+  }
+
+  .fs-accordion-flush .fs-accordion-item:first-child {
+    border-block-start: 0;
+  }
+
+  .fs-accordion-always-open .fs-accordion-button[aria-expanded="true"]::after {
+    transform: rotate(-135deg);
+  }
+
   .fs-accordion-header {
     margin: 0;
   }
@@ -79,4 +92,10 @@
     border-top: 1px solid var(--fs-color-border);
     background-color: var(--fs-color-surface-raised);
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .fs-accordion-button::after {
+      transition: none;
+    }
+  }
 }

package/packages/fokus-components/scss/components/_avatar.scss

@@ -0,0 +1,22 @@
+/* stylelint-disable declaration-block-single-line-max-declarations */
+@layer components {
+  .fs-avatar {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    overflow: hidden;
+    color: var(--fs-color-on-primary);
+    font-weight: 600;
+    background: var(--fs-color-primary);
+    border-radius: 50%;
+    object-fit: cover;
+  }
+
+  .fs-avatar-sm { width: 2rem; height: 2rem; font-size: .8125rem; }
+  .fs-avatar-lg { width: 3.5rem; height: 3.5rem; font-size: 1.25rem; }
+  .fs-avatar-square { border-radius: var(--fs-radius-md); }
+  .fs-avatar img { width: 100%; height: 100%; object-fit: cover; }
+}

package/packages/fokus-components/scss/components/_button-group.scss

@@ -0,0 +1,14 @@
+/* stylelint-disable declaration-block-single-line-max-declarations */
+@layer components {
+  .fs-button-group {
+    display: inline-flex;
+    vertical-align: middle;
+  }
+
+  .fs-button-group > .fs-btn { border-radius: 0; }
+  .fs-button-group > .fs-btn:first-child { border-start-start-radius: var(--fs-radius-sm); border-end-start-radius: var(--fs-radius-sm); }
+  .fs-button-group > .fs-btn:last-child { border-start-end-radius: var(--fs-radius-sm); border-end-end-radius: var(--fs-radius-sm); }
+  .fs-button-group > .fs-btn + .fs-btn { margin-inline-start: -1px; }
+  .fs-button-group-vertical { flex-direction: column; align-items: flex-start; }
+  .fs-button-group-vertical > .fs-btn { width: 100%; }
+}