npm - fokus-styles - Versions diffs - 2.4.0 → 2.6.0 - Mend

fokus-styles 2.4.0 → 2.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (212) hide show

package/dist/css/components.css +561 -83
package/dist/css/components.min.css +1 -1
package/dist/css/fokus-components.css +561 -83
package/dist/css/fokus-components.min.css +1 -1
package/dist/css/fokus-rtl.css +697 -83
package/dist/css/fokus-rtl.min.css +1 -1
package/dist/css/fokus-utilities.css +136 -0
package/dist/css/fokus-utilities.min.css +1 -1
package/dist/css/fokus.css +996 -258
package/dist/css/fokus.min.css +1 -1
package/dist/css/forms.css +300 -176
package/dist/css/forms.min.css +1 -1
package/dist/css/helpers.css +136 -0
package/dist/css/helpers.min.css +1 -1
package/dist/js/fokus.js +270 -25
package/dist/js/fokus.min.js +18 -18
package/package.json +17 -15
package/packages/fokus-components/scss/components/_alerts.scss +128 -6
package/packages/fokus-components/scss/components/_badges.scss +26 -10
package/packages/fokus-components/scss/components/_index.scss +1 -0
package/packages/fokus-components/scss/components/_popover.scss +131 -21
package/packages/fokus-components/scss/components/_responsive.scss +23 -0
package/packages/fokus-components/scss/components/_tag.scss +37 -14
package/packages/fokus-components/scss/components/_toasts.scss +156 -11
package/packages/fokus-components/scss/components/_tooltips.scss +70 -18
package/packages/fokus-components/scss/forms/_check-radio-switch.scss +313 -215
package/packages/fokus-components/scss/forms/_forms.scss +16 -0
package/packages/fokus-js/js/carousel.d.ts +4 -0
package/packages/fokus-js/js/carousel.js +8 -0
package/packages/fokus-js/js/core/positioning.js +18 -9
package/packages/fokus-js/js/dropdown.d.ts +4 -0
package/packages/fokus-js/js/dropdown.js +7 -0
package/packages/fokus-js/js/popover.js +26 -1
package/packages/fokus-js/js/tabs.d.ts +3 -0
package/packages/fokus-js/js/tabs.js +5 -0
package/packages/fokus-js/js/tag.js +17 -0
package/packages/fokus-js/js/toast.js +77 -3
package/packages/fokus-js/js/tooltip.d.ts +8 -1
package/packages/fokus-js/js/tooltip.js +106 -13
package/packages/fokus-utilities/scss/utilities/_api.scss +48 -0
package/CHANGELOG.md +0 -910
package/dist/css/components.css.map +0 -1
package/dist/css/components.min.css.map +0 -1
package/dist/css/fokus-components.css.map +0 -1
package/dist/css/fokus-components.min.css.map +0 -1
package/dist/css/fokus-core.css.map +0 -1
package/dist/css/fokus-core.min.css.map +0 -1
package/dist/css/fokus-dark.css.map +0 -1
package/dist/css/fokus-dark.min.css.map +0 -1
package/dist/css/fokus-rtl.css.map +0 -1
package/dist/css/fokus-rtl.min.css.map +0 -1
package/dist/css/fokus-utilities.css.map +0 -1
package/dist/css/fokus-utilities.min.css.map +0 -1
package/dist/css/fokus.css.map +0 -1
package/dist/css/fokus.min.css.map +0 -1
package/dist/css/fonts.css.map +0 -1
package/dist/css/fonts.min.css.map +0 -1
package/dist/css/forms.css.map +0 -1
package/dist/css/forms.min.css.map +0 -1
package/dist/css/helpers.css.map +0 -1
package/dist/css/helpers.min.css.map +0 -1
package/dist/css/layout.css.map +0 -1
package/dist/css/layout.min.css.map +0 -1
package/dist/js/fokus.js.map +0 -7
package/dist/js/fokus.min.js.map +0 -7
package/docs/README.md +0 -86
package/docs/comparison.md +0 -124
package/docs/components/accordion.md +0 -104
package/docs/components/alert-dialog.md +0 -99
package/docs/components/alert.md +0 -59
package/docs/components/avatar.md +0 -13
package/docs/components/badge.md +0 -82
package/docs/components/breadcrumb.md +0 -93
package/docs/components/button-group.md +0 -13
package/docs/components/button.md +0 -98
package/docs/components/card.md +0 -111
package/docs/components/carousel.md +0 -167
package/docs/components/checkbox.md +0 -97
package/docs/components/close-button.md +0 -13
package/docs/components/code.md +0 -13
package/docs/components/collapse.md +0 -78
package/docs/components/combobox.md +0 -123
package/docs/components/command-palette.md +0 -131
package/docs/components/datatable.md +0 -173
package/docs/components/datepicker.md +0 -137
package/docs/components/divider.md +0 -57
package/docs/components/dropdown.md +0 -103
package/docs/components/empty-state.md +0 -65
package/docs/components/file-upload-advanced.md +0 -116
package/docs/components/file-upload.md +0 -93
package/docs/components/icon-link.md +0 -13
package/docs/components/input-group.md +0 -73
package/docs/components/input.md +0 -90
package/docs/components/list-group.md +0 -13
package/docs/components/modal.md +0 -120
package/docs/components/navbar.md +0 -74
package/docs/components/nested-menu.md +0 -90
package/docs/components/notification-center.md +0 -116
package/docs/components/offcanvas.md +0 -102
package/docs/components/pagination.md +0 -145
package/docs/components/placeholder.md +0 -13
package/docs/components/popover.md +0 -105
package/docs/components/progress.md +0 -126
package/docs/components/radio.md +0 -70
package/docs/components/range.md +0 -83
package/docs/components/rating.md +0 -91
package/docs/components/ratio.md +0 -13
package/docs/components/scrollspy.md +0 -13
package/docs/components/segmented-control.md +0 -82
package/docs/components/select.md +0 -89
package/docs/components/skeleton.md +0 -70
package/docs/components/stepper.md +0 -107
package/docs/components/switch.md +0 -75
package/docs/components/table.md +0 -90
package/docs/components/tabs.md +0 -104
package/docs/components/tag.md +0 -129
package/docs/components/tile.md +0 -112
package/docs/components/timeline.md +0 -78
package/docs/components/toast.md +0 -95
package/docs/components/tooltip.md +0 -77
package/docs/components/tree-view.md +0 -118
package/docs/contributing/contributing.md +0 -18
package/docs/getting-started/installation.md +0 -70
package/docs/getting-started/usage.md +0 -105
package/docs/guides/accessibility.md +0 -102
package/docs/guides/charts.md +0 -73
package/docs/guides/dark-mode.md +0 -90
package/docs/guides/icons.md +0 -99
package/docs/guides/javascript-api.md +0 -9
package/docs/guides/layout-advanced.md +0 -118
package/docs/guides/migration-clarus-to-fokus.md +0 -48
package/docs/guides/migration-external.md +0 -123
package/docs/guides/migration-v1.md +0 -63
package/docs/guides/print.md +0 -30
package/docs/guides/rtl-and-system-preferences.md +0 -28
package/docs/guides/theming.md +0 -140
package/docs/guides/utility-api.md +0 -9
package/docs/prompts/prompt-plan.md +0 -45
package/docs/reference/accessibility-matrix.md +0 -77
package/docs/reference/browser-support.md +0 -75
package/docs/reference/contrast-report.md +0 -50
package/docs/reference/definitions.md +0 -864
package/docs/reference/design-tokens.md +0 -194
package/docs/reference/scss-architecture.md +0 -227
package/docs/reference/size-baseline.json +0 -34
package/docs/reference/stability.md +0 -89
package/docs/showcase.md +0 -25
package/mockup/README.md +0 -41
package/mockup/assets/carousel-planning.png +0 -0
package/mockup/assets/carousel-workspace.png +0 -0
package/mockup/assets/example-theme.css +0 -8
package/mockup/assets/example-theme.js +0 -11
package/mockup/assets/showcase-contracts.js +0 -84
package/mockup/assets/showcase.css +0 -91
package/mockup/assets/showcase.js +0 -724
package/mockup/content-data.html +0 -9
package/mockup/examples/accordion-tabs-toast.html +0 -149
package/mockup/examples/alert-dialog.html +0 -84
package/mockup/examples/alerts.html +0 -41
package/mockup/examples/badges-alerts.html +0 -77
package/mockup/examples/buttons.html +0 -58
package/mockup/examples/cards.html +0 -132
package/mockup/examples/carousel.html +0 -126
package/mockup/examples/charts.html +0 -102
package/mockup/examples/check-radio-switch.html +0 -144
package/mockup/examples/collapse.html +0 -69
package/mockup/examples/combobox.html +0 -60
package/mockup/examples/command-palette.html +0 -64
package/mockup/examples/datatable.html +0 -113
package/mockup/examples/datepicker.html +0 -62
package/mockup/examples/divider.html +0 -45
package/mockup/examples/dropdown-tooltip.html +0 -77
package/mockup/examples/empty-state.html +0 -56
package/mockup/examples/file-drop.html +0 -74
package/mockup/examples/file-upload-advanced.html +0 -68
package/mockup/examples/forms-advanced.html +0 -77
package/mockup/examples/hover-card.html +0 -86
package/mockup/examples/icons.html +0 -157
package/mockup/examples/input-group.html +0 -74
package/mockup/examples/js-foundation.html +0 -215
package/mockup/examples/layout.html +0 -134
package/mockup/examples/modal-select.html +0 -127
package/mockup/examples/nested-menu.html +0 -73
package/mockup/examples/notification-center.html +0 -86
package/mockup/examples/offcanvas-popover.html +0 -133
package/mockup/examples/pagination-breadcrumbs.html +0 -92
package/mockup/examples/range.html +0 -69
package/mockup/examples/rating.html +0 -103
package/mockup/examples/segmented-control.html +0 -96
package/mockup/examples/skeletons.html +0 -82
package/mockup/examples/spinner-progress.html +0 -130
package/mockup/examples/stepper.html +0 -119
package/mockup/examples/tables-navbar.html +0 -89
package/mockup/examples/tag.html +0 -105
package/mockup/examples/theming.html +0 -68
package/mockup/examples/tile.html +0 -107
package/mockup/examples/timeline.html +0 -108
package/mockup/examples/tree-view.html +0 -68
package/mockup/feedback-actions.html +0 -9
package/mockup/forms.html +0 -13
package/mockup/foundations.html +0 -7
package/mockup/kitchen-sink.html +0 -696
package/mockup/navigation-disclosure.html +0 -11
package/mockup/overlays-commands.html +0 -12
package/mockup/templates/README.md +0 -20
package/mockup/templates/admin.html +0 -334
package/mockup/templates/auth.html +0 -234
package/mockup/templates/dashboard.html +0 -442
package/mockup/templates/landing.html +0 -397
package/packages/fokus-icons/package.json +0 -46
package/scripts/migrate-fokus-map.json +0 -1366
package/scripts/migrate-fokus.mjs +0 -97

package/mockup/examples/carousel.html DELETED Viewed

@@ -1,126 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Mockup - Carousel</title>
-    <!-- STYLES IMPORT -->
-    <link rel="stylesheet" href="../../dist/css/fonts.css">
-    <link rel="stylesheet" href="../../dist/css/components.css">
-    <link rel="stylesheet" href="../../dist/css/helpers.css">
-    <style>
-        .theme-panel {
-            padding: 24px;
-        }
-        html[data-theme="dark"] .theme-panel {
-            color: var(--fs-color-text);
-            background-color: var(--fs-color-surface);
-        }
-        .fs-carousel {
-            max-width: 560px;
-        }
-        .slide {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 240px;
-            color: #fff;
-            font-size: 2rem;
-            font-weight: 600;
-        }
-        .slide-1 { background: linear-gradient(135deg, #312e81, #4f46e5 54%, #818cf8); }
-        .slide-2 { background: linear-gradient(135deg, #047857, #1bc559 54%, #6ee7b7); }
-        .slide-3 { background: linear-gradient(135deg, #991b1b, #dc263e 54%, #fda4af); }
-    </style>
-    <link rel="stylesheet" href="../assets/example-theme.css">
-    <script src="../assets/example-theme.js"></script>
-</head>
-<body>
-    <div class="theme-panel">
-        <h2 class="fs-u-fs-lg fs-u-fw-medium">Claro — slide (padrão)</h2>
-        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-2">Conteúdo de produto com áreas seguras para controles e indicadores</p>
-        <div class="fs-carousel" data-fs="carousel" id="carousel-slide" aria-label="Destaques de produto">
-            <div class="fs-carousel-inner">
-                <div class="fs-carousel-item is-active">
-                    <div class="slide slide-1"></div>
-                    <div class="fs-carousel-caption"><h3 class="fs-u-fs-lg fs-u-fw-semibold">Fluxos mais claros</h3><p>Centralize tarefas recorrentes em uma experiência previsível.</p><a class="fs-btn" href="#">Conhecer recursos</a></div>
-                </div>
-                <div class="fs-carousel-item">
-                    <div class="slide slide-2"></div>
-                    <div class="fs-carousel-caption"><h3 class="fs-u-fs-lg fs-u-fw-semibold">Decisões compartilhadas</h3><p>Organize atualizações, responsáveis e próximos passos.</p><a class="fs-btn" href="#">Convidar equipe</a></div>
-                </div>
-                <div class="fs-carousel-item">
-                    <div class="slide slide-3"></div>
-                    <div class="fs-carousel-caption"><h3 class="fs-u-fs-lg fs-u-fw-semibold">Visibilidade para o time</h3><p>Transforme acompanhamento em ação com contexto suficiente.</p><a class="fs-btn" href="#">Abrir indicadores</a></div>
-                </div>
-            </div>
-            <button class="fs-carousel-control-prev" type="button" aria-label="Anterior"></button>
-            <button class="fs-carousel-control-next" type="button" aria-label="Próximo"></button>
-            <ol class="fs-carousel-indicators">
-                <li><button type="button" aria-label="Ir para o slide 1"></button></li>
-                <li><button type="button" aria-label="Ir para o slide 2"></button></li>
-                <li><button type="button" aria-label="Ir para o slide 3"></button></li>
-            </ol>
-        </div>
-        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-4 fs-u-mb-2">Autoplay sem mídia, com contador, progresso e arraste desativado</p>
-        <div class="fs-carousel fs-carousel-no-media fs-carousel-hide-indicators-two" data-fs="carousel" data-autoplay="true" data-interval="3000" data-drag="false" id="carousel-slide-autoplay" aria-label="Atualizações automáticas">
-            <div class="fs-carousel-inner">
-                <div class="fs-carousel-item is-active"><div class="fs-carousel-media-placeholder"><h3 class="fs-u-fs-lg fs-u-fw-semibold">Resumo semanal</h3><p>Atualizações importantes podem aparecer como painel de conteúdo, sem exigir imagem de fundo.</p><a class="fs-btn fs-btn-primary" href="#">Ver relatório</a></div></div>
-                <div class="fs-carousel-item"><div class="fs-carousel-media-placeholder"><h3 class="fs-u-fs-lg fs-u-fw-semibold">Próximo passo</h3><p>Use este formato quando o slide tiver ações interativas e não fizer sentido arrastá-lo.</p><a class="fs-btn fs-btn-primary" href="#">Revisar pendências</a></div></div>
-            </div>
-            <button class="fs-carousel-control-prev" type="button" aria-label="Anterior"></button>
-            <button class="fs-carousel-control-next" type="button" aria-label="Próximo"></button>
-            <button class="fs-carousel-control-toggle" type="button" data-fs-carousel-toggle></button>
-            <span class="fs-carousel-counter" data-fs-carousel-counter aria-hidden="true"></span>
-            <div class="fs-carousel-progress" data-fs-carousel-progress aria-hidden="true"><span></span></div>
-        </div>
-        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-4 fs-u-mb-2">Variante fade com legenda empilhada abaixo da mídia</p>
-        <div class="fs-carousel fs-carousel-fade fs-carousel-caption-stacked" data-fs="carousel" data-autoplay="true" data-interval="3000" id="carousel-fade" aria-label="Destaques em transição suave">
-            <div class="fs-carousel-inner">
-                <div class="fs-carousel-item is-active"><div class="slide slide-1">Fade 1</div><div class="fs-carousel-caption"><h3 class="fs-u-fs-lg fs-u-fw-semibold">Transição sem distração</h3><p>A legenda abaixo da mídia mantém textos longos completamente fora da área visual do slide.</p></div></div>
-                <div class="fs-carousel-item"><div class="slide slide-2">Fade 2</div><div class="fs-carousel-caption"><h3 class="fs-u-fs-lg fs-u-fw-semibold">Contexto sempre legível</h3><p>Esta variação é adequada quando a mídia não pode receber sobreposição.</p></div></div>
-                <div class="fs-carousel-item"><div class="slide slide-3">Fade 3</div><div class="fs-carousel-caption"><h3 class="fs-u-fs-lg fs-u-fw-semibold">Mesmo comportamento</h3><p>Teclado, autoplay e controles continuam disponíveis sem mudança de API.</p></div></div>
-            </div>
-            <button class="fs-carousel-control-prev" type="button" aria-label="Anterior"></button>
-            <button class="fs-carousel-control-next" type="button" aria-label="Próximo"></button>
-            <button class="fs-carousel-control-toggle" type="button" data-fs-carousel-toggle></button>
-            <ol class="fs-carousel-indicators">
-                <li><button type="button" aria-label="Ir para o slide 1"></button></li>
-                <li><button type="button" aria-label="Ir para o slide 2"></button></li>
-                <li><button type="button" aria-label="Ir para o slide 3"></button></li>
-            </ol>
-        </div>
-        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-4 fs-u-mb-2">Imagem de fundo com legenda lateral responsiva</p>
-        <div class="fs-carousel fs-carousel-caption-side" data-fs="carousel" data-autoplay="true" data-interval="5000" id="carousel-image" aria-label="Histórias da equipe">
-            <div class="fs-carousel-inner">
-                <div class="fs-carousel-item is-active">
-                    <div class="fs-carousel-media" aria-hidden="true" style="background-image: url('../assets/carousel-workspace.png'); background-position: center;"></div>
-                    <div class="fs-carousel-caption fs-carousel-caption-start"><h3 class="fs-u-fs-lg fs-u-fw-semibold">Legenda à esquerda</h3><p>Quando o assunto da foto estiver à direita, a legenda pode ocupar o lado oposto sem competir com a narrativa visual.</p><a class="fs-btn" href="#">Ler história</a></div>
-                </div>
-                <div class="fs-carousel-item">
-                    <div class="fs-carousel-media" aria-hidden="true" style="background-image: url('../assets/carousel-planning.png'); background-position: center;"></div>
-                    <div class="fs-carousel-caption"><h3 class="fs-u-fs-lg fs-u-fw-semibold">Legenda à direita</h3><p>Em outra composição, o conteúdo visual fica à esquerda e a mesma legenda lateral equilibra leitura e imagem.</p><a class="fs-btn" href="#">Ver iniciativas</a></div>
-                </div>
-            </div>
-            <button class="fs-carousel-control-prev" type="button" aria-label="Anterior"></button>
-            <button class="fs-carousel-control-next" type="button" aria-label="Próximo"></button>
-            <button class="fs-carousel-control-toggle" type="button" data-fs-carousel-toggle></button>
-            <span class="fs-carousel-counter" data-fs-carousel-counter aria-hidden="true"></span>
-        </div>
-    </div>
-    <script src="../../dist/js/fokus.js"></script>
-</body>
-</html>

package/mockup/examples/charts.html DELETED Viewed

@@ -1,102 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Mockup - Charts (tokens)</title>
-    <!-- STYLES IMPORT -->
-    <link rel="stylesheet" href="../../dist/css/fonts.css">
-    <link rel="stylesheet" href="../../dist/css/components.css">
-    <link rel="stylesheet" href="../../dist/css/helpers.css">
-    <style>
-        .theme-panel {
-            padding: 24px;
-        }
-        html[data-theme="dark"] .theme-panel {
-            color: var(--fs-color-text);
-            background-color: var(--fs-color-surface);
-        }
-        .chart-swatches {
-            display: flex;
-            gap: 8px;
-            flex-wrap: wrap;
-        }
-        .chart-swatch {
-            width: 64px;
-            height: 64px;
-            border-radius: var(--fs-radius-md);
-            display: flex;
-            align-items: flex-end;
-            padding: 4px;
-            font-size: 10px;
-            color: #fff;
-            text-shadow: 0 1px 1px rgb(0 0 0 / 40%);
-        }
-        .chart-demo {
-            display: flex;
-            align-items: flex-end;
-            gap: 8px;
-            height: 120px;
-            border-bottom: 2px solid var(--fs-chart-axis);
-            padding: 0 8px;
-            margin-top: 12px;
-        }
-        .chart-demo-bar {
-            width: 32px;
-            border-radius: 4px 4px 0 0;
-        }
-        .chart-demo-tooltip {
-            background-color: var(--fs-chart-tooltip-bg);
-            color: var(--fs-chart-tooltip-text);
-            padding: 4px 8px;
-            border-radius: var(--fs-radius-sm);
-            font-size: 12px;
-            display: inline-block;
-            margin-top: 12px;
-        }
-    </style>
-    <link rel="stylesheet" href="../assets/example-theme.css">
-    <script src="../assets/example-theme.js"></script>
-</head>
-<body>
-<!--
-  Não é um wrapper de biblioteca de gráficos (docs/guides/charts.md) — só
-  os tokens --fs-chart-* que qualquer lib pode consumir via
-  getComputedStyle. Este mockup só visualiza os tokens (swatches + barras
-  de CSS puro), sem carregar nenhuma lib de terceiro.
--->
-<div class="theme-panel">
-<p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-2">Séries (--fs-chart-series-1..6)</p>
-    <div class="chart-swatches">
-        <div class="chart-swatch" style="background-color: var(--fs-chart-series-1);">1</div>
-        <div class="chart-swatch" style="background-color: var(--fs-chart-series-2);">2</div>
-        <div class="chart-swatch" style="background-color: var(--fs-chart-series-3);">3</div>
-        <div class="chart-swatch" style="background-color: var(--fs-chart-series-4);">4</div>
-        <div class="chart-swatch" style="background-color: var(--fs-chart-series-5);">5</div>
-        <div class="chart-swatch" style="background-color: var(--fs-chart-series-6);">6</div>
-    </div>
-    <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-1">Barras de exemplo (grid/axis)</p>
-    <div class="chart-demo">
-        <div class="chart-demo-bar" style="height: 40%; background-color: var(--fs-chart-series-1);"></div>
-        <div class="chart-demo-bar" style="height: 70%; background-color: var(--fs-chart-series-2);"></div>
-        <div class="chart-demo-bar" style="height: 55%; background-color: var(--fs-chart-series-3);"></div>
-    </div>
-    <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-1">Tooltip (--fs-chart-tooltip-bg/text)</p>
-    <span class="chart-demo-tooltip">Jan: 120</span>
-</div>
-</body>
-</html>

package/mockup/examples/check-radio-switch.html DELETED Viewed

@@ -1,144 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Mockup - Checkbox / Radio / Switch</title>
-    <!-- STYLES IMPORT -->
-    <link rel="stylesheet" href="../../dist/css/fonts.css">
-    <link rel="stylesheet" href="../../dist/css/forms.css">
-    <link rel="stylesheet" href="../../dist/css/helpers.css">
-    <style>
-        .theme-panel {
-            display: flex;
-            flex-direction: column;
-            gap: 16px;
-            padding: 24px;
-        }
-        html[data-theme="dark"] .theme-panel {
-            color: var(--fs-color-text);
-            background-color: var(--fs-color-surface);
-        }
-        .control-row {
-            display: flex;
-            flex-wrap: wrap;
-            align-items: center;
-            gap: 20px;
-        }
-        .fs-check-invalid-demo {
-            display: grid;
-            gap: 4px;
-        }
-    </style>
-    <link rel="stylesheet" href="../assets/example-theme.css">
-    <script src="../assets/example-theme.js"></script>
-</head>
-<body>
-    <div class="theme-panel">
-<p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-0">Checkbox — estados</p>
-        <div class="control-row">
-            <div class="fs-check">
-                <input type="checkbox" class="fs-check-input" id="check-unchecked">
-                <label for="check-unchecked" class="fs-check-label">Não marcado</label>
-            </div>
-            <div class="fs-check">
-                <input type="checkbox" class="fs-check-input" id="check-checked" checked>
-                <label for="check-checked" class="fs-check-label">Marcado</label>
-            </div>
-            <div class="fs-check">
-                <input type="checkbox" class="fs-check-input" id="check-indeterminate">
-                <label for="check-indeterminate" class="fs-check-label">Indeterminado</label>
-            </div>
-            <div class="fs-check">
-                <input type="checkbox" class="fs-check-input" id="check-disabled" disabled>
-                <label for="check-disabled" class="fs-check-label">Desabilitado</label>
-            </div>
-            <div class="fs-check">
-                <input type="checkbox" class="fs-check-input" id="check-disabled-checked" checked disabled>
-                <label for="check-disabled-checked" class="fs-check-label">Desabilitado + marcado</label>
-            </div>
-        </div>
-        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-0">Checkbox — validação e tamanhos</p>
-        <div class="control-row">
-            <div class="fs-check fs-check-invalid-demo">
-                <input type="checkbox" class="fs-check-input is-invalid" id="check-invalid">
-                <label for="check-invalid" class="fs-check-label">Inválido</label>
-                <div class="fs-invalid-feedback">Selecione esta opção para continuar.</div>
-            </div>
-            <div class="fs-check fs-check-sm">
-                <input type="checkbox" class="fs-check-input" id="check-sm" checked>
-                <label for="check-sm" class="fs-check-label">sm</label>
-            </div>
-            <div class="fs-check">
-                <input type="checkbox" class="fs-check-input" id="check-md" checked>
-                <label for="check-md" class="fs-check-label">md (padrão)</label>
-            </div>
-            <div class="fs-check fs-check-lg">
-                <input type="checkbox" class="fs-check-input" id="check-lg" checked>
-                <label for="check-lg" class="fs-check-label">lg</label>
-            </div>
-        </div>
-        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-0">Radio — estados e tamanhos</p>
-        <div class="control-row">
-            <div class="fs-radio">
-                <input type="radio" name="radio-claro" class="fs-radio-input" id="radio-1" checked>
-                <label for="radio-1" class="fs-radio-label">Opção 1</label>
-            </div>
-            <div class="fs-radio">
-                <input type="radio" name="radio-claro" class="fs-radio-input" id="radio-2">
-                <label for="radio-2" class="fs-radio-label">Opção 2</label>
-            </div>
-            <div class="fs-radio">
-                <input type="radio" name="radio-claro-disabled" class="fs-radio-input" id="radio-disabled" disabled>
-                <label for="radio-disabled" class="fs-radio-label">Desabilitado</label>
-            </div>
-            <div class="fs-radio fs-radio-sm">
-                <input type="radio" name="radio-sm" class="fs-radio-input" id="radio-sm" checked>
-                <label for="radio-sm" class="fs-radio-label">sm</label>
-            </div>
-            <div class="fs-radio fs-radio-lg">
-                <input type="radio" name="radio-lg" class="fs-radio-input" id="radio-lg" checked>
-                <label for="radio-lg" class="fs-radio-label">lg</label>
-            </div>
-        </div>
-        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-0">Switch — estados e tamanhos (knob retangular arredondado)</p>
-        <div class="control-row">
-            <div class="fs-switch">
-                <input type="checkbox" class="fs-switch-input" id="switch-off">
-                <label for="switch-off" class="fs-switch-label">Desligado</label>
-            </div>
-            <div class="fs-switch">
-                <input type="checkbox" class="fs-switch-input" id="switch-on" checked>
-                <label for="switch-on" class="fs-switch-label">Ligado</label>
-            </div>
-            <div class="fs-switch">
-                <input type="checkbox" class="fs-switch-input" id="switch-disabled" disabled>
-                <label for="switch-disabled" class="fs-switch-label">Desabilitado</label>
-            </div>
-            <div class="fs-switch fs-switch-sm">
-                <input type="checkbox" class="fs-switch-input" id="switch-sm" checked>
-                <label for="switch-sm" class="fs-switch-label">sm</label>
-            </div>
-            <div class="fs-switch fs-switch-lg">
-                <input type="checkbox" class="fs-switch-input" id="switch-lg" checked>
-                <label for="switch-lg" class="fs-switch-label">lg</label>
-            </div>
-        </div>
-    </div>
-    <script src="../../dist/js/fokus.js"></script>
-    <script>
-        document.getElementById("check-indeterminate").indeterminate = true;
-    </script>
-</body>
-</html>

package/mockup/examples/collapse.html DELETED Viewed

@@ -1,69 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Mockup - Collapse</title>
-    <!-- STYLES IMPORT -->
-    <link rel="stylesheet" href="../../dist/css/fonts.css">
-    <link rel="stylesheet" href="../../dist/css/components.css">
-    <link rel="stylesheet" href="../../dist/css/helpers.css">
-    <style>
-        .theme-panel {
-            padding: 24px;
-        }
-        html[data-theme="dark"] .theme-panel {
-            color: var(--fs-color-text);
-            background-color: var(--fs-color-surface);
-        }
-        section {
-            max-width: 420px;
-            margin-bottom: 24px;
-        }
-        .collapse-body {
-            padding: 12px 16px;
-            margin-top: 8px;
-            background-color: var(--fs-color-subtle);
-            border-radius: var(--fs-radius-sm);
-        }
-    </style>
-    <link rel="stylesheet" href="../assets/example-theme.css">
-    <script src="../assets/example-theme.js"></script>
-</head>
-<body>
-    <div class="theme-panel">
-<section>
-            <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-2">Seção expansível independente (fechada por padrão)</p>
-            <button type="button" class="fs-btn" data-fs="collapse" data-fs-target="#collapse-detalhes">
-                Ver detalhes
-            </button>
-            <div class="fs-collapse" id="collapse-detalhes">
-                <div class="collapse-body">
-                    Conteúdo adicional, revelado/ocultado via <code class="fs-u-font-mono">FokusStyles.Collapse</code>,
-                    reaproveitando <code class="fs-u-font-mono">collapse()</code>/<code class="fs-u-font-mono">expand()</code>
-                    de <code class="fs-u-font-mono">js/core/transition.js</code> (mesma infraestrutura do Accordion).
-                </div>
-            </div>
-        </section>
-        <section>
-            <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-2">Iniciando aberto (aria-expanded="true")</p>
-            <button type="button" class="fs-btn" data-fs="collapse" data-fs-target="#collapse-aberto" aria-expanded="true">
-                Ocultar termos
-            </button>
-            <div class="fs-collapse" id="collapse-aberto">
-                <div class="collapse-body">Este painel começa visível porque o gatilho já tem <code class="fs-u-font-mono">aria-expanded="true"</code>.</div>
-            </div>
-        </section>
-    </div>
-    <script src="../../dist/js/fokus.js"></script>
-</body>
-</html>

package/mockup/examples/combobox.html DELETED Viewed

@@ -1,60 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Mockup - Combobox</title>
-    <!-- STYLES IMPORT -->
-    <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">
-    <style>
-        .theme-panel {
-            padding: 24px;
-        }
-        html[data-theme="dark"] .theme-panel {
-            color: var(--fs-color-text);
-            background-color: var(--fs-color-surface);
-        }
-        section {
-            max-width: 320px;
-            margin-bottom: 24px;
-        }
-    </style>
-    <link rel="stylesheet" href="../assets/example-theme.css">
-    <script src="../assets/example-theme.js"></script>
-</head>
-<body>
-    <div class="theme-panel">
-<section>
-            <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-1">Combobox — digite pra filtrar (ex.: "css")</p>
-            <label for="combobox-claro" class="fs-form-label">Framework CSS favorito</label>
-            <div class="fs-combobox">
-                <input type="text" class="fs-form-control" id="combobox-claro" data-fs="combobox" data-fs-target="#combobox-claro-listbox" placeholder="Buscar framework…">
-            </div>
-            <ul class="fs-dropdown-menu fs-combobox-listbox" id="combobox-claro-listbox">
-                <li class="fs-dropdown-item" data-value="bootstrap">Bootstrap</li>
-                <li class="fs-dropdown-item" data-value="tailwind">Tailwind CSS</li>
-                <li class="fs-dropdown-item" data-value="bulma">Bulma</li>
-                <li class="fs-dropdown-item" data-value="foundation">Foundation</li>
-                <li class="fs-dropdown-item" data-value="uikit">UIkit</li>
-                <li class="fs-dropdown-item" data-value="cirrus">Cirrus</li>
-                <li class="fs-dropdown-item" data-value="fokus">Fokus Styles</li>
-                <li class="fs-dropdown-item is-disabled" data-value="descontinuado">Framework descontinuado</li>
-                <li class="fs-dropdown-item is-disabled" data-fs-empty hidden>Nenhum resultado encontrado.</li>
-            </ul>
-        </section>
-    </div>
-    <!-- SCRIPTS IMPORT -->
-    <script src="../../dist/js/fokus.js"></script>
-</body>
-</html>

package/mockup/examples/command-palette.html DELETED Viewed

@@ -1,64 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Mockup - Command Palette</title>
-    <!-- STYLES IMPORT -->
-    <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">
-    <style>
-        .theme-panel {
-            padding: 24px;
-        }
-        html[data-theme="dark"] .theme-panel {
-            color: var(--fs-color-text);
-            background-color: var(--fs-color-surface);
-        }
-        section {
-            max-width: 320px;
-            margin-bottom: 24px;
-        }
-    </style>
-    <link rel="stylesheet" href="../assets/example-theme.css">
-    <script src="../assets/example-theme.js"></script>
-</head>
-<body>
-    <div class="theme-panel">
-<section>
-            <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-1">Command Palette — clique ou pressione Ctrl+K / Cmd+K</p>
-            <button type="button" class="fs-btn fs-btn-primary" data-fs="command-palette" data-fs-target="#paleta-claro" data-fs-shortcut="mod+k">
-                Comandos (Ctrl+K)
-            </button>
-            <div class="fs-command-palette" id="paleta-claro">
-                <div class="fs-command-palette-dialog">
-                    <input type="text" class="fs-command-palette-input" placeholder="Digite um comando…">
-                    <ul class="fs-command-palette-list">
-                        <li class="fs-dropdown-header">Arquivo</li>
-                        <li class="fs-dropdown-item" data-value="new-file">Novo arquivo</li>
-                        <li class="fs-dropdown-item" data-value="open-file">Abrir arquivo…</li>
-                        <li class="fs-dropdown-header">Ver</li>
-                        <li class="fs-dropdown-item" data-value="toggle-theme">Alternar tema claro/escuro</li>
-                        <li class="fs-dropdown-item" data-value="open-settings">Abrir configurações</li>
-                        <li class="fs-dropdown-item is-disabled" data-value="disabled">Comando indisponível</li>
-                        <li class="fs-dropdown-item is-disabled" data-fs-empty hidden>Nenhum comando encontrado.</li>
-                    </ul>
-                </div>
-            </div>
-        </section>
-    </div>
-    <!-- SCRIPTS IMPORT -->
-    <script src="../../dist/js/fokus.js"></script>
-</body>
-</html>