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/file-upload-advanced.html DELETED Viewed

@@ -1,68 +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 - Upload avançado</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/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);
-        }
-        .upload-demo {
-            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">
-<div class="fs-file-upload upload-demo" data-fs="file-upload-advanced" id="upload-claro">
-            <input type="file" class="fs-file-input" id="anexos-claro" multiple>
-            <label for="anexos-claro" class="fs-file-label fs-file-label-dropzone" data-fs="file-drop">
-                Arraste arquivos ou clique para escolher
-                <span class="fs-file-dropzone-hint">Vários arquivos, até 5MB cada</span>
-            </label>
-        </div>
-        <button type="button" class="fs-btn fs-u-mt-2" data-simulate="upload-claro">Simular progresso do 1º arquivo</button>
-    </div>
-    <script src="../../dist/js/fokus.js"></script>
-    <script>
-        // Demonstra a API `setProgress`/`setError` sem depender de um backend
-        // real — um `setInterval` simula um upload progressivo no 1º arquivo
-        // selecionado, só pra exercitar a barra de progresso do mockup.
-        document.querySelectorAll("[data-simulate]").forEach((button) => {
-            button.addEventListener("click", () => {
-                const rootEl = document.getElementById(button.getAttribute("data-simulate"));
-                const upload = FokusStyles.FileUploadAdvanced.getInstance(rootEl);
-                const firstItem = rootEl.querySelector(".fs-file-upload-item");
-                if (!firstItem) return;
-                const id = firstItem.getAttribute("data-file-id");
-                let progress = 0;
-                const interval = setInterval(() => {
-                    progress += 20;
-                    upload.setProgress(id, progress);
-                    if (progress >= 100) clearInterval(interval);
-                }, 200);
-            });
-        });
-    </script>
-</body>
-</html>

package/mockup/examples/forms-advanced.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 - Formulários Avançados</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 {
-            padding: 24px;
-        }
-        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-mt-3 fs-u-mb-1">Validação - .is-valid / .is-invalid</p>
-        <div class="fs-form-row fs-u-gap-x-2">
-            <div class="fs-form-col">
-                <label for="input-valid" class="fs-form-label fs-form-size-md">E-mail</label>
-                <input type="email" class="fs-form-control fs-form-size-xxl is-valid" id="input-valid" value="jorge@fokus.dev">
-                <span class="fs-valid-feedback fs-form-size-xxl">E-mail válido.</span>
-            </div>
-            <div class="fs-form-col">
-                <label for="input-invalid" class="fs-form-label fs-form-size-md">E-mail</label>
-                <input type="email" class="fs-form-control fs-form-size-xxl is-invalid" id="input-invalid" value="jorge@fokus">
-                <span class="fs-invalid-feedback fs-form-size-xxl">Informe um e-mail válido.</span>
-            </div>
-        </div>
-        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-1">Upload de arquivo estilizado</p>
-        <div class="fs-form-row fs-u-gap-x-2">
-            <div class="fs-form-col">
-                <span class="fs-form-label fs-form-size-md">Padrão</span>
-                <div class="fs-file-upload">
-                    <input type="file" class="fs-file-input" id="file-default">
-                    <label for="file-default" class="fs-file-label">Escolher arquivo</label>
-                </div>
-            </div>
-            <div class="fs-form-col">
-                <span class="fs-form-label fs-form-size-md">Tamanhos</span>
-                <div class="fs-form-row fs-u-gap-x-2">
-                    <div class="fs-file-upload">
-                        <input type="file" class="fs-file-input" id="file-sm">
-                        <label for="file-sm" class="fs-file-label fs-file-label-sm">Small</label>
-                    </div>
-                    <div class="fs-file-upload">
-                        <input type="file" class="fs-file-input" id="file-lg">
-                        <label for="file-lg" class="fs-file-label fs-file-label-lg">Large</label>
-                    </div>
-                </div>
-            </div>
-            <div class="fs-form-col">
-                <span class="fs-form-label fs-form-size-md">Desabilitado</span>
-                <div class="fs-file-upload">
-                    <input type="file" class="fs-file-input" id="file-disabled" disabled>
-                    <label for="file-disabled" class="fs-file-label">Escolher arquivo</label>
-                </div>
-            </div>
-        </div>
-    </div>
-</body>
-</html>

package/mockup/examples/hover-card.html DELETED Viewed

@@ -1,86 +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 - Hover Card</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: 48px 24px;
-        }
-        html[data-theme="dark"] .theme-panel {
-            color: var(--fs-color-text);
-            background-color: var(--fs-color-surface);
-        }
-        .avatar {
-            display: flex;
-            flex-shrink: 0;
-            align-items: center;
-            justify-content: center;
-            width: 40px;
-            height: 40px;
-            border-radius: 50%;
-            color: var(--fs-color-surface);
-            background-color: var(--fs-color-primary);
-            font-size: 0.85rem;
-            font-weight: 600;
-        }
-        .fs-hover-card-name {
-            margin: 0;
-            font-weight: 600;
-        }
-        .fs-hover-card-handle {
-            margin: 0 0 4px;
-            color: var(--fs-color-muted);
-            font-size: 0.75rem;
-        }
-        .fs-hover-card-bio {
-            margin: 4px 0 0;
-            font-size: 0.8rem;
-        }
-        .hover-card-trigger {
-            color: var(--fs-alert-primary-text);
-            font-weight: 600;
-        }
-    </style>
-    <link rel="stylesheet" href="../assets/example-theme.css">
-    <script src="../assets/example-theme.js"></script>
-</head>
-<body>
-    <div class="theme-panel">
-<p>
-            Passe o mouse sobre
-            <a href="#" class="hover-card-trigger" data-fs="popover" data-fs-target="#hover-card-claro" data-trigger="hover" data-placement="bottom">@jorgewreis</a>
-            para ver o cartão.
-        </p>
-        <div class="fs-popover fs-popover-hover-card" id="hover-card-claro">
-            <div class="fs-popover-arrow"></div>
-            <div class="fs-popover-body">
-                <div class="avatar">JR</div>
-                <div>
-                    <p class="fs-hover-card-name">Jorge Reis</p>
-                    <p class="fs-hover-card-handle">@jorgewreis</p>
-                    <p class="fs-hover-card-bio">Autor do Fokus Styles — framework híbrido, zero dependências em runtime.</p>
-                </div>
-            </div>
-        </div>
-    </div>
-    <script src="../../dist/js/fokus.js"></script>
-</body>
-</html>

package/mockup/examples/icons.html DELETED Viewed

@@ -1,157 +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 - Icons</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);
-        }
-        .icon-grid {
-            display: grid;
-            grid-template-columns: repeat(6, 1fr);
-            gap: 16px;
-            max-width: 480px;
-            margin-bottom: 24px;
-        }
-        .icon-grid figure {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 4px;
-            margin: 0;
-            font-size: 11px;
-            text-align: center;
-        }
-        .icon-sizes {
-            display: flex;
-            align-items: flex-end;
-            gap: 16px;
-            margin-bottom: 24px;
-        }
-        .usage-row {
-            display: flex;
-            flex-wrap: wrap;
-            align-items: center;
-            gap: 16px;
-            margin-bottom: 16px;
-        }
-        .usage-row .fs-alert,
-        .usage-row .fs-input-group {
-            max-width: 280px;
-        }
-    </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-1">Grade — pacote fokus-styles/icons (Lucide), classe .fs-icon</p>
-        <div class="icon-grid">
-            <figure><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>check</figure>
-            <figure><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="M18 6 6 18"/><path d="m6 6 12 12"/></svg>x</figure>
-            <figure><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="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>home</figure>
-            <figure><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>search</figure>
-            <figure><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="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></svg>settings</figure>
-            <figure><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="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>user</figure>
-            <figure><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="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"/><rect x="2" y="4" width="20" height="16" rx="2"/></svg>mail</figure>
-            <figure><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="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>bell</figure>
-            <figure><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="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>calendar</figure>
-            <figure><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="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>download</figure>
-            <figure><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="M12 3v12"/><path d="m17 8-5-5-5 5"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/></svg>upload</figure>
-            <figure><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="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>trash-2</figure>
-            <figure><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.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg>pencil</figure>
-            <figure><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="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/></svg>star</figure>
-            <figure><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="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"/></svg>heart</figure>
-            <figure><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"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>lock</figure>
-            <figure><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"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 9.9-1"/></svg>unlock</figure>
-            <figure><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"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>sun</figure>
-            <figure><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.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"/></svg>moon</figure>
-            <figure><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="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>arrow-right</figure>
-            <figure><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="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>arrow-left</figure>
-            <figure><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="m6 9 6 6 6-6"/></svg>chevron-down</figure>
-            <figure><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="M5 12h14"/><path d="M12 5v14"/></svg>plus</figure>
-            <figure><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="M5 12h14"/></svg>minus</figure>
-        </div>
-        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-1">Tamanhos — .fs-icon-xs/sm/(padrão)/lg/xl</p>
-        <div class="icon-sizes">
-            <svg class="fs-icon fs-icon-xs" 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"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
-            <svg class="fs-icon fs-icon-sm" 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"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
-            <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"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
-            <svg class="fs-icon fs-icon-lg" 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"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
-            <svg class="fs-icon fs-icon-xl" 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"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
-        </div>
-        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-1">Uso em componentes reais — o ícone é conteúdo comum, colado onde o componente já aceita qualquer HTML</p>
-        <div class="usage-row">
-            <button type="button" class="fs-btn fs-btn-primary">
-                <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="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>
-                Baixar
-            </button>
-            <span class="fs-badge fs-badge-warning">
-                <svg class="fs-icon fs-icon-xs" 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="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/></svg>
-                Destaque
-            </span>
-        </div>
-        <div class="usage-row">
-            <div class="fs-alert fs-alert-danger">
-                <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>
-                Falha ao salvar as alterações.
-            </div>
-            <div class="fs-input-group">
-                <span class="fs-input-group-text">
-                    <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>
-                </span>
-                <input type="search" class="fs-form-control" placeholder="Buscar…" aria-label="Buscar">
-            </div>
-        </div>
-        <nav aria-label="breadcrumb">
-            <ol class="fs-breadcrumb">
-                <li class="fs-breadcrumb-item">
-                    <a href="#">
-                        <svg class="fs-icon fs-icon-sm" 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="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>
-                        Início
-                    </a>
-                </li>
-                <li class="fs-breadcrumb-item"><a href="#">Configurações</a></li>
-                <li class="fs-breadcrumb-item is-active">Perfil</li>
-            </ol>
-        </nav>
-        <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 — o slot de ícone do Empty State aceita qualquer SVG, incluindo os do fokus-styles/icons.</p>
-        </div>
-    </div>
-</body>
-</html>

package/mockup/examples/input-group.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 - Input Group</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/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);
-        }
-        .theme-panel > div {
-            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-fs-sm fs-u-fw-medium fs-u-mb-0">Sufixo</p>
-        <div class="fs-input-group">
-            <input type="text" class="fs-form-control" placeholder="usuario">
-            <span class="fs-input-group-text">@fokus.dev</span>
-        </div>
-        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-0">Prefixo</p>
-        <div class="fs-input-group">
-            <span class="fs-input-group-text">R$</span>
-            <input type="text" class="fs-form-control" placeholder="0,00">
-        </div>
-        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-0">Prefixo + sufixo, com botão</p>
-        <div class="fs-input-group">
-            <span class="fs-input-group-text">https://</span>
-            <input type="text" class="fs-form-control" placeholder="seusite.com">
-            <button type="button" class="fs-btn">Verificar</button>
-        </div>
-        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-0">Tamanhos (sm / padrão / lg)</p>
-        <div class="fs-input-group fs-input-group-sm">
-            <span class="fs-input-group-text">R$</span>
-            <input type="text" class="fs-form-control" placeholder="0,00">
-        </div>
-        <div class="fs-input-group fs-input-group-lg">
-            <span class="fs-input-group-text">R$</span>
-            <input type="text" class="fs-form-control" placeholder="0,00">
-        </div>
-        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-0">Desabilitado</p>
-        <div class="fs-input-group">
-            <span class="fs-input-group-text">R$</span>
-            <input type="text" class="fs-form-control" placeholder="0,00" disabled>
-        </div>
-    </div>
-</body>
-</html>