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

fokus-styles 2.4.0 → 2.6.0

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

Files changed (212) hide show

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

package/mockup/examples/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>

package/mockup/examples/js-foundation.html DELETED Viewed

@@ -1,215 +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 - Infraestrutura JS (Fase 7)</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>
-        body {
-            padding: 24px;
-        }
-        section {
-            margin-bottom: 320px;
-        }
-        /* Harness manual desta fase: ainda não existe .fs-dropdown-menu (Fase 8)
-           nem .fs-modal (Fase 9), então o painel flutuante e o painel com focus
-           trap usam estilo inline sobre os tokens já existentes. */
-        .floating-panel {
-            width: 220px;
-            padding: 12px 16px;
-            border: 1px solid var(--fs-color-border);
-            border-radius: var(--fs-radius-md);
-            color: var(--fs-color-text);
-            background-color: var(--fs-color-surface);
-            box-shadow: var(--fs-shadow-md);
-        }
-        .trap-panel {
-            display: none;
-            position: fixed;
-            inset: 0;
-            align-items: center;
-            justify-content: center;
-            background-color: rgb(0 0 0 / 45%);
-        }
-        .trap-panel.is-open {
-            display: flex;
-        }
-        .trap-panel-body {
-            width: 320px;
-            padding: 20px;
-            border-radius: var(--fs-radius-md);
-            color: var(--fs-color-text);
-            background-color: var(--fs-color-surface);
-            box-shadow: var(--fs-shadow-lg);
-        }
-        .collapse-panel {
-            padding: 12px 16px;
-            border: 1px solid var(--fs-color-border);
-            border-top: none;
-            border-radius: 0 0 var(--fs-radius-md) var(--fs-radius-md);
-            color: var(--fs-color-text);
-        }
-        .collapse-trigger {
-            border-radius: var(--fs-radius-md) var(--fs-radius-md) 0 0;
-        }
-    </style>
-    <link rel="stylesheet" href="../assets/example-theme.css">
-    <script src="../assets/example-theme.js"></script>
-</head>
-<body>
-    <h1 class="fs-u-fs-lg fs-u-fw-medium fs-u-mb-3">Fase 7 — Infraestrutura JS compartilhada</h1>
-    <section>
-        <h2 class="fs-u-fs-md fs-u-fw-medium fs-u-mb-2">1. Posicionamento (FokusStyles.core.computePosition)</h2>
-        <p class="fs-u-fs-sm fs-u-mb-3">O painel reposiciona (com flip) relativo ao botão. Role a página para testar o flip perto das bordas.</p>
-        <button type="button" class="fs-btn fs-btn-primary" id="positioning-trigger">Alternar painel posicionado</button>
-        <div class="floating-panel" id="positioning-panel" style="display: none;">
-            Painel posicionado via <code class="fs-u-font-mono">computePosition()</code>, com flip automático quando não cabe no viewport.
-        </div>
-    </section>
-    <section>
-        <h2 class="fs-u-fs-md fs-u-fw-medium fs-u-mb-2">4. API declarativa 2.3</h2>
-        <p class="fs-u-fs-sm fs-u-mb-3">Theme, validação e eventos comuns usam os exports vanilla sem dependências externas.</p>
-        <div class="fs-form-row">
-            <button type="button" class="fs-btn" id="theme-toggle">Alternar tema com FokusStyles.Theme</button>
-            <form class="fs-form-col" data-fs="form-validation" id="api-form" novalidate>
-                <label class="fs-form-label" for="api-required">Campo obrigatório</label>
-                <input class="fs-form-control" id="api-required" required aria-describedby="api-feedback">
-                <div class="fs-invalid-feedback" id="api-feedback">Informe um valor para continuar.</div>
-                <button class="fs-btn fs-btn-primary" type="submit">Validar formulário</button>
-            </form>
-        </div>
-        <p class="fs-u-fs-xs fs-u-mt-2" id="api-status" role="status" aria-live="polite"></p>
-    </section>
-    <section>
-        <h2 class="fs-u-fs-md fs-u-fw-medium fs-u-mb-2">2. Foco, teclado e overlay (FokusStyles.core.createFocusTrap / onEscapeKey / lockScroll / onClickOutside)</h2>
-        <p class="fs-u-fs-sm fs-u-mb-3">Abre um painel com scroll da página bloqueado, foco preso via Tab/Shift+Tab, fecha com Escape ou clique fora.</p>
-        <button type="button" class="fs-btn fs-btn-primary" id="trap-trigger">Abrir painel com focus trap</button>
-        <div class="trap-panel" id="trap-panel">
-            <div class="trap-panel-body" id="trap-panel-body">
-                <p class="fs-u-fs-md fs-u-fw-medium fs-u-mb-2">Painel com focus trap</p>
-                <p class="fs-u-fs-sm fs-u-mb-3">Tab/Shift+Tab ciclam apenas entre estes três controles. Escape ou clique fora fecha.</p>
-                <input type="text" class="fs-form-control fs-u-mb-2" placeholder="Campo de teste">
-                <button type="button" class="fs-btn fs-u-mr-2">Ação secundária</button>
-                <button type="button" class="fs-btn fs-btn-primary" id="trap-close">Fechar</button>
-            </div>
-        </div>
-    </section>
-    <section>
-        <h2 class="fs-u-fs-md fs-u-fw-medium fs-u-mb-2">3. Transição / collapse (FokusStyles.core.collapse / expand)</h2>
-        <p class="fs-u-fs-sm fs-u-mb-3">Expande/recolhe com transição de altura (respeita <code class="fs-u-font-mono">prefers-reduced-motion</code>).</p>
-        <button type="button" class="fs-btn fs-btn-primary collapse-trigger" id="collapse-trigger" aria-expanded="false">Alternar painel</button>
-        <div class="collapse-panel" id="collapse-panel" style="display: none;">
-            Conteúdo revelado via <code class="fs-u-font-mono">expand()</code>/<code class="fs-u-font-mono">collapse()</code>, animando a altura com <code class="fs-u-font-mono">transitionend</code>.
-        </div>
-    </section>
-    <!-- SCRIPTS IMPORT -->
-    <script src="../../dist/js/fokus.js"></script>
-    <script>
-        const { core } = FokusStyles;
-        // 1. Posicionamento
-        const positioningTrigger = document.getElementById("positioning-trigger");
-        const positioningPanel = document.getElementById("positioning-panel");
-        let positioningOpen = false;
-        positioningTrigger.addEventListener("click", () => {
-            positioningOpen = !positioningOpen;
-            if (positioningOpen) {
-                positioningPanel.style.display = "block";
-                const position = core.computePosition(positioningTrigger, positioningPanel, { placement: "bottom", offset: 8 });
-                core.applyPosition(positioningPanel, position);
-            } else {
-                positioningPanel.style.display = "none";
-            }
-        });
-        window.addEventListener("resize", () => {
-            if (!positioningOpen) return;
-            const position = core.computePosition(positioningTrigger, positioningPanel, { placement: "bottom", offset: 8 });
-            core.applyPosition(positioningPanel, position);
-        });
-        // 2. Foco, teclado e overlay
-        const trapTrigger = document.getElementById("trap-trigger");
-        const trapPanel = document.getElementById("trap-panel");
-        const trapPanelBody = document.getElementById("trap-panel-body");
-        const trapClose = document.getElementById("trap-close");
-        let focusTrap = null;
-        let removeEscapeListener = null;
-        let removeClickOutsideListener = null;
-        function openTrapPanel() {
-            trapPanel.classList.add("is-open");
-            core.lockScroll();
-            focusTrap = core.createFocusTrap(trapPanelBody);
-            focusTrap.activate();
-            removeEscapeListener = core.onEscapeKey(closeTrapPanel);
-            removeClickOutsideListener = core.onClickOutside(trapPanelBody, closeTrapPanel);
-        }
-        function closeTrapPanel() {
-            trapPanel.classList.remove("is-open");
-            core.unlockScroll();
-            focusTrap?.deactivate();
-            removeEscapeListener?.();
-            removeClickOutsideListener?.();
-            trapTrigger.focus();
-        }
-        trapTrigger.addEventListener("click", openTrapPanel);
-        trapClose.addEventListener("click", closeTrapPanel);
-        // 3. Transição / collapse
-        const collapseTrigger = document.getElementById("collapse-trigger");
-        const collapsePanel = document.getElementById("collapse-panel");
-        let collapseOpen = false;
-        collapseTrigger.addEventListener("click", () => {
-            collapseOpen = !collapseOpen;
-            collapseTrigger.setAttribute("aria-expanded", String(collapseOpen));
-            if (collapseOpen) {
-                core.expand(collapsePanel);
-            } else {
-                core.collapse(collapsePanel);
-            }
-        });
-        const apiStatus = document.getElementById("api-status");
-        document.getElementById("theme-toggle").addEventListener("click", () => {
-            const next = FokusStyles.Theme.getOrCreateInstance().get() === "dark" ? "light" : "dark";
-            FokusStyles.Theme.set(next);
-            apiStatus.textContent = `Tema ${next} aplicado.`;
-        });
-        document.getElementById("api-form").addEventListener("fs:form:validated", (event) => {
-            apiStatus.textContent = event.detail.valid ? "Formulário válido." : "Formulário precisa de atenção.";
-        });
-    </script>
-</body>
-</html>