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/segmented-control.html DELETED Viewed

@@ -1,96 +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 - Segmented Control</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;
-            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);
-        }
-    </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">Exclusivo (radio) — tamanhos</p>
-        <div class="fs-segmented-control fs-segmented-control-sm">
-            <div class="fs-segmented-item">
-                <input type="radio" name="periodo-sm" id="periodo-sm-dia" class="fs-segmented-input" checked>
-                <label for="periodo-sm-dia" class="fs-segmented-label">Dia</label>
-            </div>
-            <div class="fs-segmented-item">
-                <input type="radio" name="periodo-sm" id="periodo-sm-semana" class="fs-segmented-input">
-                <label for="periodo-sm-semana" class="fs-segmented-label">Semana</label>
-            </div>
-            <div class="fs-segmented-item">
-                <input type="radio" name="periodo-sm" id="periodo-sm-mes" class="fs-segmented-input">
-                <label for="periodo-sm-mes" class="fs-segmented-label">Mês</label>
-            </div>
-        </div>
-        <div class="fs-segmented-control">
-            <div class="fs-segmented-item">
-                <input type="radio" name="periodo" id="periodo-dia" class="fs-segmented-input">
-                <label for="periodo-dia" class="fs-segmented-label">Dia</label>
-            </div>
-            <div class="fs-segmented-item">
-                <input type="radio" name="periodo" id="periodo-semana" class="fs-segmented-input" checked>
-                <label for="periodo-semana" class="fs-segmented-label">Semana</label>
-            </div>
-            <div class="fs-segmented-item">
-                <input type="radio" name="periodo" id="periodo-mes" class="fs-segmented-input">
-                <label for="periodo-mes" class="fs-segmented-label">Mês</label>
-            </div>
-            <div class="fs-segmented-item">
-                <input type="radio" name="periodo" id="periodo-ano" class="fs-segmented-input" disabled>
-                <label for="periodo-ano" class="fs-segmented-label">Ano</label>
-            </div>
-        </div>
-        <div class="fs-segmented-control fs-segmented-control-lg">
-            <div class="fs-segmented-item">
-                <input type="radio" name="periodo-lg" id="periodo-lg-dia" class="fs-segmented-input" checked>
-                <label for="periodo-lg-dia" class="fs-segmented-label">Dia</label>
-            </div>
-            <div class="fs-segmented-item">
-                <input type="radio" name="periodo-lg" id="periodo-lg-semana" class="fs-segmented-input">
-                <label for="periodo-lg-semana" class="fs-segmented-label">Semana</label>
-            </div>
-        </div>
-        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-0">Inclusivo (checkbox) — múltipla seleção</p>
-        <div class="fs-segmented-control">
-            <div class="fs-segmented-item">
-                <input type="checkbox" id="filtro-negrito" class="fs-segmented-input" checked>
-                <label for="filtro-negrito" class="fs-segmented-label fs-u-fw-medium">B</label>
-            </div>
-            <div class="fs-segmented-item">
-                <input type="checkbox" id="filtro-italico" class="fs-segmented-input">
-                <label for="filtro-italico" class="fs-segmented-label">I</label>
-            </div>
-            <div class="fs-segmented-item">
-                <input type="checkbox" id="filtro-sublinhado" class="fs-segmented-input" checked>
-                <label for="filtro-sublinhado" class="fs-segmented-label">U</label>
-            </div>
-        </div>
-    </div>
-</body>
-</html>

package/mockup/examples/skeletons.html DELETED Viewed

@@ -1,82 +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 - Skeletons</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;
-            flex-wrap: wrap;
-            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-skeleton {
-            width: 220px;
-            padding: 16px;
-            background-color: var(--fs-color-surface);
-            border-radius: var(--fs-radius-md);
-        }
-        .avatar-row {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            width: 220px;
-            padding: 16px;
-            background-color: var(--fs-color-surface);
-            border-radius: var(--fs-radius-md);
-        }
-        .avatar-row .fs-skeleton-circle {
-            width: 40px;
-            height: 40px;
-        }
-        .avatar-row .fs-skeleton-text-group {
-            flex: 1;
-        }
-    </style>
-    <link rel="stylesheet" href="../assets/example-theme.css">
-    <script src="../assets/example-theme.js"></script>
-</head>
-<body>
-<div class="theme-panel">
-        <div class="avatar-row">
-            <div class="fs-skeleton fs-skeleton-circle"></div>
-            <div class="fs-skeleton-text-group">
-                <div class="fs-skeleton fs-skeleton-text" style="width: 60%;"></div>
-                <div class="fs-skeleton fs-skeleton-text" style="width: 40%;"></div>
-            </div>
-        </div>
-        <div class="card-skeleton">
-            <div class="fs-skeleton fs-skeleton-rect" style="height: 120px; margin-bottom: 12px;"></div>
-            <div class="fs-skeleton fs-skeleton-text"></div>
-            <div class="fs-skeleton fs-skeleton-text"></div>
-            <div class="fs-skeleton fs-skeleton-text"></div>
-        </div>
-        <div class="card-skeleton">
-            <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-2">Variante wave</p>
-            <div class="fs-skeleton fs-skeleton-rect fs-skeleton-wave" style="height: 60px; margin-bottom: 12px;"></div>
-            <div class="fs-skeleton fs-skeleton-text fs-skeleton-wave"></div>
-            <div class="fs-skeleton fs-skeleton-text fs-skeleton-wave"></div>
-        </div>
-    </div>
-</body>
-</html>

package/mockup/examples/spinner-progress.html DELETED Viewed

@@ -1,130 +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 - Spinner & Progress</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"] body {
-            color: var(--fs-color-text);
-            background-color: var(--fs-color-surface);
-        }
-        .fs-progress {
-            max-width: 480px;
-        }
-        .spinner-row {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 12px;
-            align-items: center;
-        }
-        .spinner-context {
-            display: inline-flex;
-            gap: 8px;
-            align-items: center;
-            color: var(--fs-color-muted);
-            font-size: var(--fs-font-size-sm);
-        }
-    </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-mt-3 fs-u-mb-1">Spinner - neutro e cores de estado</p>
-        <div class="spinner-row">
-            <span class="fs-spinner" role="status" aria-label="Carregando"></span>
-            <span class="fs-spinner fs-spinner-primary" role="status" aria-label="Carregando"></span>
-            <span class="fs-spinner fs-spinner-success" role="status" aria-label="Carregando"></span>
-            <span class="fs-spinner fs-spinner-warning" role="status" aria-label="Carregando"></span>
-            <span class="fs-spinner fs-spinner-danger" role="status" aria-label="Carregando"></span>
-            <span class="fs-spinner fs-spinner-info" role="status" aria-label="Carregando"></span>
-        </div>
-        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-1">Spinner - tamanhos</p>
-        <div class="spinner-row">
-            <span class="fs-spinner fs-spinner-primary fs-spinner-sm" role="status" aria-label="Carregando"></span>
-            <span class="fs-spinner fs-spinner-primary" role="status" aria-label="Carregando"></span>
-            <span class="fs-spinner fs-spinner-primary fs-spinner-lg" role="status" aria-label="Carregando"></span>
-        </div>
-        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-1">Spinner - em contexto</p>
-        <span class="spinner-context" role="status"><span class="fs-spinner fs-spinner-sm" aria-hidden="true"></span>Atualizando dados…</span>
-        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-1">Progress - valores</p>
-        <div class="fs-progress fs-u-mb-2" role="progressbar" aria-label="Progresso: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
-            <div class="fs-progress-bar" style="--fs-progress-value: 25"></div>
-        </div>
-        <div class="fs-progress fs-u-mb-2" role="progressbar" aria-label="Progresso: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
-            <div class="fs-progress-bar fs-progress-bar-success" style="--fs-progress-value: 50"></div>
-        </div>
-        <div class="fs-progress fs-u-mb-2" role="progressbar" aria-label="Progresso: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
-            <div class="fs-progress-bar fs-progress-bar-warning" style="--fs-progress-value: 75"></div>
-        </div>
-        <div class="fs-progress" role="progressbar" aria-label="Progresso: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
-            <div class="fs-progress-bar fs-progress-bar-danger" style="--fs-progress-value: 100"></div>
-        </div>
-        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-1">Progress - tamanhos</p>
-        <div class="fs-progress fs-progress-sm fs-u-mb-2" role="progressbar" aria-label="Progresso: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
-            <div class="fs-progress-bar fs-progress-bar-primary" style="--fs-progress-value: 60"></div>
-        </div>
-        <div class="fs-progress fs-u-mb-2" role="progressbar" aria-label="Progresso: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
-            <div class="fs-progress-bar fs-progress-bar-primary" style="--fs-progress-value: 60"></div>
-        </div>
-        <div class="fs-progress fs-progress-lg" role="progressbar" aria-label="Progresso: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
-            <div class="fs-progress-bar fs-progress-bar-primary" style="--fs-progress-value: 60">60%</div>
-        </div>
-        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-1">Progress - listrado e animado</p>
-        <div class="fs-progress" role="progressbar" aria-label="Progresso: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
-            <div class="fs-progress-bar fs-progress-bar-primary fs-progress-bar-striped fs-progress-bar-animated" style="--fs-progress-value: 70"></div>
-        </div>
-        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-1">Progress - rótulo externo</p>
-        <div class="fs-progress-meta"><span>Upload de anexos</span><span class="fs-progress-value">3 de 8 arquivos</span></div>
-        <div class="fs-progress" role="progressbar" aria-label="Upload de anexos" aria-valuetext="3 de 8 arquivos enviados" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100">
-            <div class="fs-progress-bar" style="--fs-progress-value: 38"></div>
-        </div>
-        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-1">Progress - indeterminado</p>
-        <div class="fs-progress fs-progress-indeterminate" role="progressbar" aria-label="Processando pagamento" aria-valuetext="Progresso indeterminado" aria-busy="true">
-            <div class="fs-progress-bar"></div>
-        </div>
-        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-1">Progress - concluído e erro</p>
-        <div class="fs-progress fs-progress-complete" role="progressbar" aria-label="Exportação concluída: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
-            <div class="fs-progress-bar" style="--fs-progress-value: 100"></div>
-        </div>
-        <span class="fs-progress-status"><span class="fs-progress-status-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="M20 6 9 17l-5-5"/></svg></span>Exportação concluída</span>
-        <div class="fs-progress fs-progress-error fs-u-mt-2" role="progressbar" aria-label="Envio interrompido: 62%" aria-valuenow="62" aria-valuemin="0" aria-valuemax="100">
-            <div class="fs-progress-bar" style="--fs-progress-value: 62"></div>
-        </div>
-        <span class="fs-progress-status fs-progress-status-danger">Envio interrompido. Tente novamente.</span>
-        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-1">Progress - meta e início perceptível</p>
-        <div class="fs-progress-meta"><span>Meta mensal</span><span class="fs-progress-value">42% · meta: 70%</span></div>
-        <div class="fs-progress" role="progressbar" aria-label="Meta mensal: 42%, meta de 70%" aria-valuenow="42" aria-valuemin="0" aria-valuemax="100">
-            <div class="fs-progress-bar" style="--fs-progress-value: 42"></div><span class="fs-progress-marker" style="--fs-progress-marker-value: 70" aria-hidden="true"></span>
-        </div>
-        <div class="fs-progress-meta fs-u-mt-2"><span>Preparando upload</span><span class="fs-progress-value">1%</span></div>
-        <div class="fs-progress fs-progress-minimum" role="progressbar" aria-label="Preparando upload: 1%" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100">
-            <div class="fs-progress-bar" style="--fs-progress-value: 1"></div>
-        </div>
-    </div>
-</body>
-</html>

package/mockup/examples/stepper.html DELETED Viewed

@@ -1,119 +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 - Stepper</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-stepper {
-            max-width: 600px;
-        }
-        .fs-step-panel {
-            padding: 16px;
-            border: 1px solid var(--fs-color-border);
-            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">
-<p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-2">Wizard horizontal — navegação next/prev, painéis e evento de validação</p>
-        <div class="fs-stepper" data-fs="stepper" id="stepper-wizard">
-            <ol class="fs-stepper-header">
-                <li class="fs-step fs-step-active">
-                    <span class="fs-step-indicator">1</span>
-                    <span class="fs-step-label">Conta</span>
-                </li>
-                <li class="fs-step">
-                    <span class="fs-step-indicator">2</span>
-                    <span class="fs-step-label">Perfil</span>
-                </li>
-                <li class="fs-step">
-                    <span class="fs-step-indicator">3</span>
-                    <span class="fs-step-label">Confirmação</span>
-                </li>
-            </ol>
-            <div class="fs-stepper-content">
-                <div class="fs-step-panel is-active">Passo 1 — dados da conta (e-mail e senha).</div>
-                <div class="fs-step-panel">Passo 2 — dados do perfil (nome e avatar).</div>
-                <div class="fs-step-panel">Passo 3 — revise e confirme os dados.</div>
-            </div>
-            <div class="fs-stepper-actions">
-                <button class="fs-btn" type="button" data-stepper="prev">Anterior</button>
-                <button class="fs-btn fs-btn-primary" type="button" data-stepper="next">Próximo</button>
-            </div>
-        </div>
-        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-4 fs-u-mb-2">Estados (estático): concluído, ativo, erro e pendente</p>
-        <div class="fs-stepper" id="stepper-states-claro">
-            <ol class="fs-stepper-header">
-                <li class="fs-step fs-step-completed">
-                    <span class="fs-step-indicator">1</span>
-                    <span class="fs-step-label">Concluído</span>
-                </li>
-                <li class="fs-step fs-step-active">
-                    <span class="fs-step-indicator">2</span>
-                    <span class="fs-step-label">Ativo</span>
-                </li>
-                <li class="fs-step fs-step-error">
-                    <span class="fs-step-indicator">3</span>
-                    <span class="fs-step-label">Erro</span>
-                </li>
-                <li class="fs-step">
-                    <span class="fs-step-indicator">4</span>
-                    <span class="fs-step-label">Pendente</span>
-                </li>
-            </ol>
-        </div>
-        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-4 fs-u-mb-2">Vertical</p>
-        <div class="fs-stepper fs-stepper-vertical" id="stepper-vertical-claro">
-            <ol class="fs-stepper-header">
-                <li class="fs-step fs-step-completed">
-                    <span class="fs-step-indicator">1</span>
-                    <span class="fs-step-content">
-                        <span class="fs-step-label">Pedido recebido</span>
-                        <span class="fs-step-description">Confirmado às 09:12</span>
-                    </span>
-                </li>
-                <li class="fs-step fs-step-active">
-                    <span class="fs-step-indicator">2</span>
-                    <span class="fs-step-content">
-                        <span class="fs-step-label">Em separação</span>
-                        <span class="fs-step-description">Preparando os itens</span>
-                    </span>
-                </li>
-                <li class="fs-step">
-                    <span class="fs-step-indicator">3</span>
-                    <span class="fs-step-content">
-                        <span class="fs-step-label">Enviado</span>
-                        <span class="fs-step-description">Aguardando transportadora</span>
-                    </span>
-                </li>
-            </ol>
-        </div>
-    </div>
-    <script src="../../dist/js/fokus.js"></script>
-</body>
-</html>

package/mockup/examples/tables-navbar.html DELETED Viewed

@@ -1,89 +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 - Tables & Navbar</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,
-        html[data-fs-theme="dark"] .theme-panel {
-            color: var(--fs-color-text);
-            background-color: var(--fs-color-surface);
-        }
-    </style>
-    <link rel="stylesheet" href="../assets/example-theme.css">
-    <script src="../assets/example-theme.js"></script>
-</head>
-<body>
-<div class="theme-panel">
-        <nav class="fs-navbar fs-u-mb-3" data-fs="navbar" aria-label="Navegação principal">
-            <a href="#" class="fs-navbar-brand">FokusStyles</a>
-            <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">
-            <table class="fs-table fs-table-striped fs-table-hover">
-                <thead>
-                    <tr>
-                        <th>Projeto</th>
-                        <th>Responsável</th>
-                        <th>Status</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>Landing page</td>
-                        <td>Jorge</td>
-                        <td>Em andamento</td>
-                    </tr>
-                    <tr class="fs-table-success">
-                        <td>API de pagamentos</td>
-                        <td>Equipe backend</td>
-                        <td>Concluído</td>
-                    </tr>
-                    <tr class="fs-table-danger">
-                        <td>Migração de banco</td>
-                        <td>Equipe infra</td>
-                        <td>Bloqueado</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-        <table class="fs-table fs-table-sm fs-table-bordered fs-u-mt-3">
-            <thead>
-                <tr>
-                    <th>Item</th>
-                    <th>Qtd.</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr>
-                    <td>table-sm + table-bordered</td>
-                    <td>1</td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-</body>
-</html>