npm - fokus-styles - Versions diffs - 2.5.0 → 2.6.1 - Mend

fokus-styles 2.5.0 → 2.6.1

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 (181) hide show

package/README.md +20 -2
package/package.json +19 -16
package/packages/fokus-cli/README.md +5 -0
package/packages/fokus-icons/README.md +5 -0
package/packages/fokus-react/README.md +5 -0
package/CHANGELOG.md +0 -940
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 -104
package/docs/components/avatar.md +0 -13
package/docs/components/badge.md +0 -101
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 -110
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 -118
package/docs/components/progress.md +0 -126
package/docs/components/radio.md +0 -80
package/docs/components/range.md +0 -83
package/docs/components/rating.md +0 -91
package/docs/components/ratio.md +0 -13
package/docs/components/responsive.md +0 -19
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 -97
package/docs/components/table.md +0 -90
package/docs/components/tabs.md +0 -104
package/docs/components/tag.md +0 -144
package/docs/components/tile.md +0 -112
package/docs/components/timeline.md +0 -78
package/docs/components/toast.md +0 -108
package/docs/components/tooltip.md +0 -113
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 -109
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 -54
package/docs/reference/definitions.md +0 -868
package/docs/reference/design-tokens.md +0 -208
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 -19
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 -115
package/mockup/examples/badges-alerts.html +0 -109
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 -620
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/popover.html +0 -81
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 -115
package/mockup/examples/theming.html +0 -68
package/mockup/examples/tile.html +0 -107
package/mockup/examples/timeline.html +0 -108
package/mockup/examples/toast.html +0 -113
package/mockup/examples/tooltip.html +0 -68
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/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>

package/mockup/examples/datatable.html DELETED Viewed

@@ -1,113 +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 - DataTable</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: 560px;
-            margin-bottom: 24px;
-        }
-        .demo-actions {
-            display: flex;
-            gap: 8px;
-            margin-top: 12px;
-        }
-    </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">DataTable — ordene por coluna, filtre e pagine (5 linhas/página)</p>
-            <div class="fs-datatable" id="datatable-claro" data-fs="datatable" data-fs-page-size="5">
-                <div class="fs-datatable-toolbar">
-                    <input type="search" class="fs-form-control" data-fs-datatable-filter placeholder="Filtrar por nome ou framework…">
-                </div>
-                <table class="fs-table fs-table-striped fs-table-hover">
-                    <thead>
-                        <tr>
-                            <th scope="col" data-fs-sort="name">Nome</th>
-                            <th scope="col" data-fs-sort="framework">Framework</th>
-                            <th scope="col" data-fs-sort="year">Lançamento</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr><td>Ana</td><td>Fokus Styles</td><td>2026</td></tr>
-                        <tr><td>Bruno</td><td>Cirrus UI</td><td>2018</td></tr>
-                        <tr><td>Carla</td><td>UIkit</td><td>2013</td></tr>
-                        <tr><td>Diego</td><td>Bulma</td><td>2016</td></tr>
-                        <tr><td>Elisa</td><td>Foundation</td><td>2011</td></tr>
-                        <tr><td>Fábio</td><td>Materialize</td><td>2014</td></tr>
-                        <tr><td>Giulia</td><td>Pure.css</td><td>2013</td></tr>
-                        <tr><td>Hugo</td><td>Milligram</td><td>2015</td></tr>
-                        <tr><td>Iris</td><td>Spectre.css</td><td>2017</td></tr>
-                        <tr><td>João</td><td>Tachyons</td><td>2014</td></tr>
-                        <tr><td>Karina</td><td>Picnic CSS</td><td>2016</td></tr>
-                        <tr><td>Lucas</td><td>Almost Flat</td><td>2013</td></tr>
-                    </tbody>
-                </table>
-                <div class="fs-empty-state" data-fs-datatable-empty hidden>
-                    <div class="fs-empty-state-icon" aria-hidden="true"><svg class="fs-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg></div>
-                    <p class="fs-empty-state-title">Nenhum resultado encontrado.</p>
-                </div>
-                <div class="fs-datatable-loading" data-fs-datatable-loading hidden>
-                    <div class="fs-skeleton fs-skeleton-text" style="width: 100%; height: 20px; margin-bottom: 8px;"></div>
-                    <div class="fs-skeleton fs-skeleton-text" style="width: 100%; height: 20px; margin-bottom: 8px;"></div>
-                    <div class="fs-skeleton fs-skeleton-text" style="width: 100%; height: 20px;"></div>
-                </div>
-                <div class="fs-empty-state" data-fs-datatable-error hidden>
-                    <div class="fs-empty-state-icon" aria-hidden="true"><svg class="fs-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg></div>
-                    <p class="fs-empty-state-title">Falha ao carregar dados</p>
-                    <p class="fs-empty-state-text" data-fs-datatable-error-message></p>
-                </div>
-            </div>
-            <div class="demo-actions">
-                <button type="button" class="fs-btn fs-btn-sm" data-demo-action="loading" data-demo-target="datatable-claro">Simular carregando</button>
-                <button type="button" class="fs-btn fs-btn-sm" data-demo-action="error" data-demo-target="datatable-claro">Simular erro</button>
-                <button type="button" class="fs-btn fs-btn-sm" data-demo-action="reset" data-demo-target="datatable-claro">Normal</button>
-            </div>
-        </section>
-    </div>
-    <!-- SCRIPTS IMPORT -->
-    <script src="../../dist/js/fokus.js"></script>
-    <script>
-        // Só pro mockup: os botões abaixo demonstram setLoading()/setError(),
-        // que na vida real seriam chamados ao redor de uma requisição real.
-        document.querySelectorAll("[data-demo-action]").forEach((btn) => {
-            btn.addEventListener("click", () => {
-                const instance = FokusStyles.DataTable.getInstance(document.getElementById(btn.dataset.demoTarget));
-                if (btn.dataset.demoAction === "loading") instance.setLoading(true);
-                else if (btn.dataset.demoAction === "error") instance.setError("Não foi possível conectar ao servidor.");
-                else {
-                    instance.setLoading(false);
-                    instance.setError(null);
-                }
-            });
-        });
-    </script>
-</body>
-</html>

package/mockup/examples/datepicker.html DELETED Viewed

@@ -1,62 +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 - Datepicker &amp; Timepicker</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">Datepicker — calendário customizado (JS)</p>
-            <label for="datepicker-claro" class="fs-form-label">Data de entrega</label>
-            <div class="fs-datepicker">
-                <input type="text" class="fs-form-control" id="datepicker-claro" data-fs="datepicker" data-fs-target="#datepicker-claro-panel" placeholder="dd/mm/aaaa" value="15/07/2026">
-            </div>
-            <div id="datepicker-claro-panel"></div>
-        </section>
-        <section>
-            <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-1">Date nativo — <code>&lt;input type="date"&gt;</code> estilizado (CSS-only)</p>
-            <label for="native-date-claro" class="fs-form-label">Data de nascimento</label>
-            <input type="date" class="fs-form-control" id="native-date-claro">
-        </section>
-        <section>
-            <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-1">Time nativo — <code>&lt;input type="time"&gt;</code> estilizado (CSS-only)</p>
-            <label for="native-time-claro" class="fs-form-label">Horário preferido</label>
-            <input type="time" class="fs-form-control" id="native-time-claro">
-        </section>
-    </div>
-    <!-- SCRIPTS IMPORT -->
-    <script src="../../dist/js/fokus.js"></script>
-</body>
-</html>

package/mockup/examples/divider.html DELETED Viewed

@@ -1,45 +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 - Divider</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;
-            background-color: var(--fs-color-subtle);
-        }
-        html[data-theme="dark"] .theme-panel {
-            color: var(--fs-color-text);
-            background-color: var(--fs-color-surface);
-        }
-        .theme-panel {
-            max-width: 360px;
-        }
-    </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-mb-0">Texto acima do divisor simples.</p>
-        <hr class="fs-divider">
-        <p class="fs-u-mb-0">Texto abaixo.</p>
-        <div class="fs-divider"><span class="fs-divider-label">ou</span></div>
-        <p class="fs-u-mb-0">Continue com e-mail e senha.</p>
-        <div class="fs-divider"><span class="fs-divider-label">Seção 3</span></div>
-    </div>
-</body>
-</html>

package/mockup/examples/dropdown-tooltip.html DELETED Viewed

@@ -1,77 +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 - Dropdown &amp; Tooltip</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 {
-            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-mt-3 fs-u-mb-1">Dropdown — auto-init via data-fs, posicionamento, foco e teclado (setas, Escape, clique fora)</p>
-            <p class="fs-u-fs-xs fs-u-mb-2">Alinhamento padrão (<code class="fs-u-font-mono">data-align="start"</code>, borda esquerda do menu = borda esquerda do botão):</p>
-            <div class="fs-dropdown fs-u-mr-4">
-                <button type="button" class="fs-btn fs-btn-primary fs-dropdown-toggle" data-fs="dropdown" data-fs-target="#menu-claro">
-                    Opções
-                </button>
-                <div class="fs-dropdown-menu" id="menu-claro">
-                    <span class="fs-dropdown-header">Conta</span>
-                    <a href="#" class="fs-dropdown-item">Perfil</a>
-                    <a href="#" class="fs-dropdown-item">Configurações</a>
-                    <div class="fs-dropdown-divider"></div>
-                    <a href="#" class="fs-dropdown-item is-disabled">Item desabilitado</a>
-                    <button type="button" class="fs-dropdown-item">Sair</button>
-                </div>
-            </div>
-            <p class="fs-u-fs-xs fs-u-mb-2 fs-u-mt-3"><code class="fs-u-font-mono">data-align="end"</code> (borda direita do menu = borda direita do botão):</p>
-            <div class="fs-dropdown" style="margin-left: 300px;">
-                <button type="button" class="fs-btn fs-btn-primary fs-dropdown-toggle" data-fs="dropdown" data-fs-target="#menu-claro-end" data-align="end">
-                    Opções (end)
-                </button>
-                <div class="fs-dropdown-menu" id="menu-claro-end">
-                    <a href="#" class="fs-dropdown-item">Perfil</a>
-                    <a href="#" class="fs-dropdown-item">Configurações</a>
-                    <button type="button" class="fs-dropdown-item">Sair</button>
-                </div>
-            </div>
-        </section>
-        <section>
-            <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-1">Tooltip — auto-init via data-fs, show/hide por hover/foco, 4 posicionamentos</p>
-            <button type="button" class="fs-btn fs-u-mr-2" data-fs="tooltip" data-placement="top" title="Tooltip no topo">Top</button>
-            <button type="button" class="fs-btn fs-u-mr-2" data-fs="tooltip" data-placement="bottom" title="Tooltip embaixo">Bottom</button>
-            <button type="button" class="fs-btn fs-u-mr-2" data-fs="tooltip" data-placement="left" title="Tooltip à esquerda">Left</button>
-            <button type="button" class="fs-btn" data-fs="tooltip" data-placement="right" title="Tooltip à direita">Right</button>
-        </section>
-    </div>
-    <!-- SCRIPTS IMPORT -->
-    <script src="../../dist/js/fokus.js"></script>
-</body>
-</html>

package/mockup/examples/empty-state.html DELETED Viewed

@@ -1,56 +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 - Empty State</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 {
-            display: flex;
-            gap: 24px;
-            padding: 24px;
-            background-color: var(--fs-color-subtle);
-        }
-        html[data-theme="dark"] .theme-panel {
-            color: var(--fs-color-text);
-            background-color: var(--fs-color-surface);
-        }
-        .card-like {
-            width: 320px;
-            background-color: var(--fs-color-surface);
-            border-radius: var(--fs-radius-md);
-        }
-    </style>
-    <link rel="stylesheet" href="../assets/example-theme.css">
-    <script src="../assets/example-theme.js"></script>
-</head>
-<body>
-<div class="theme-panel">
-        <div class="card-like">
-            <div class="fs-empty-state">
-                <div class="fs-empty-state-icon" aria-hidden="true"><svg class="fs-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg></div>
-                <h3 class="fs-empty-state-title">Nenhum resultado encontrado</h3>
-                <p class="fs-empty-state-text">Tente ajustar os filtros ou buscar por outro termo.</p>
-                <button type="button" class="fs-btn fs-btn-primary">Limpar filtros</button>
-            </div>
-        </div>
-        <div class="card-like">
-            <div class="fs-empty-state">
-                <div class="fs-empty-state-icon" aria-hidden="true"><svg class="fs-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg></div>
-                <h3 class="fs-empty-state-title">Caixa de entrada vazia</h3>
-                <p class="fs-empty-state-text">Novas mensagens aparecerão aqui.</p>
-            </div>
-        </div>
-    </div>
-</body>
-</html>

package/mockup/examples/file-drop.html DELETED Viewed

@@ -1,74 +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 - File Input Drag-and-Drop</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;
-            background-color: var(--fs-color-subtle);
-        }
-        html[data-theme="dark"] .theme-panel {
-            color: var(--fs-color-text);
-            background-color: var(--fs-color-surface);
-        }
-        .theme-panel > div {
-            max-width: 360px;
-        }
-        #resultado {
-            font-size: 0.85rem;
-            color: var(--fs-color-muted);
-        }
-    </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">Arraste um arquivo para a área abaixo (ou clique)</p>
-        <div class="fs-file-upload">
-            <input type="file" class="fs-file-input" id="arquivo-1">
-            <label for="arquivo-1" class="fs-file-label fs-file-label-dropzone" data-fs="file-drop">
-                <span>Arraste um arquivo aqui</span>
-                <span class="fs-file-dropzone-hint">ou clique para escolher</span>
-            </label>
-        </div>
-        <p id="resultado">Nenhum arquivo selecionado.</p>
-        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-0">Botão padrão (mesma funcionalidade, sem o visual de dropzone)</p>
-        <div class="fs-file-upload">
-            <input type="file" class="fs-file-input" id="arquivo-2">
-            <label for="arquivo-2" class="fs-file-label" data-fs="file-drop">Escolher arquivo</label>
-        </div>
-        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-0">Desabilitado</p>
-        <div class="fs-file-upload">
-            <input type="file" class="fs-file-input" id="arquivo-3" disabled>
-            <label for="arquivo-3" class="fs-file-label fs-file-label-dropzone" data-fs="file-drop">
-                <span>Desabilitado</span>
-            </label>
-        </div>
-    </div>
-    <script src="../../dist/js/fokus.js"></script>
-    <script>
-        document.getElementById("arquivo-1").addEventListener("change", (event) => {
-            const file = event.target.files[0];
-            document.getElementById("resultado").textContent = file ? `Selecionado: ${file.name}` : "Nenhum arquivo selecionado.";
-        });
-    </script>
-</body>
-</html>