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/pagination-breadcrumbs.html DELETED Viewed

@@ -1,92 +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 - Pagination & Breadcrumbs</title>
-    <!-- STYLES IMPORT -->
-    <link rel="stylesheet" href="../../dist/css/fonts.css">
-    <link rel="stylesheet" href="../../dist/css/components.css">
-    <link rel="stylesheet" href="../../dist/css/helpers.css">
-    <style>
-        .theme-panel {
-            padding: 24px;
-            background-color: var(--fs-color-subtle);
-        }
-        html[data-theme="dark"] .theme-panel {
-            color: var(--fs-color-text);
-            background-color: var(--fs-color-surface);
-        }
-    </style>
-    <link rel="stylesheet" href="../assets/example-theme.css">
-    <script src="../assets/example-theme.js"></script>
-</head>
-<body>
-<div class="theme-panel">
-        <ol class="fs-breadcrumb fs-u-mb-3">
-            <li class="fs-breadcrumb-item"><a href="#">Início</a></li>
-            <li class="fs-breadcrumb-item"><a href="#">Categoria</a></li>
-            <li class="fs-breadcrumb-item is-active">Produto atual</li>
-        </ol>
-        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-2">Avançado: truncamento com tooltip + colapso em telas pequenas (redimensione a janela para ver o item "…" com dropdown)</p>
-        <ol class="fs-breadcrumb fs-u-mb-3" data-fs="breadcrumb" data-max-items="3">
-            <li class="fs-breadcrumb-item"><a href="#">Início</a></li>
-            <li class="fs-breadcrumb-item"><a href="#">Categoria de produtos muito específica</a></li>
-            <li class="fs-breadcrumb-item"><a href="#">Subcategoria</a></li>
-            <li class="fs-breadcrumb-item"><a href="#">Marca</a></li>
-            <li class="fs-breadcrumb-item is-active">Produto atual com nome bem longo para truncar</li>
-        </ol>
-        <ul class="fs-pagination">
-            <li class="fs-page-item is-disabled"><a href="#" class="fs-page-link" aria-label="Anterior"><svg class="fs-icon" aria-hidden="true" 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 18-6-6 6-6"/></svg></a></li>
-            <li class="fs-page-item"><a href="#" class="fs-page-link">1</a></li>
-            <li class="fs-page-item is-active"><a href="#" class="fs-page-link">2</a></li>
-            <li class="fs-page-item"><a href="#" class="fs-page-link">3</a></li>
-            <li class="fs-page-item"><a href="#" class="fs-page-link">4</a></li>
-            <li class="fs-page-item"><a href="#" class="fs-page-link" aria-label="Próxima"><svg class="fs-icon" aria-hidden="true" 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 18 6-6-6-6"/></svg></a></li>
-        </ul>
-        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-2">Bordered (itens colados) + compacta (sm) / lg</p>
-        <ul class="fs-pagination fs-pagination-bordered fs-pagination-sm fs-u-mb-2">
-            <li class="fs-page-item is-disabled"><a href="#" class="fs-page-link" aria-label="Anterior"><svg class="fs-icon" aria-hidden="true" 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 18-6-6 6-6"/></svg></a></li>
-            <li class="fs-page-item"><a href="#" class="fs-page-link">1</a></li>
-            <li class="fs-page-item is-active"><a href="#" class="fs-page-link">2</a></li>
-            <li class="fs-page-item"><a href="#" class="fs-page-link">3</a></li>
-            <li class="fs-page-item"><a href="#" class="fs-page-link" aria-label="Próxima"><svg class="fs-icon" aria-hidden="true" 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 18 6-6-6-6"/></svg></a></li>
-        </ul>
-        <ul class="fs-pagination fs-pagination-bordered fs-pagination-lg">
-            <li class="fs-page-item is-disabled"><a href="#" class="fs-page-link" aria-label="Anterior"><svg class="fs-icon" aria-hidden="true" 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 18-6-6 6-6"/></svg></a></li>
-            <li class="fs-page-item"><a href="#" class="fs-page-link">1</a></li>
-            <li class="fs-page-item is-active"><a href="#" class="fs-page-link">2</a></li>
-            <li class="fs-page-item"><a href="#" class="fs-page-link">3</a></li>
-            <li class="fs-page-item"><a href="#" class="fs-page-link" aria-label="Próxima"><svg class="fs-icon" aria-hidden="true" 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 18 6-6-6-6"/></svg></a></li>
-        </ul>
-        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-2">Prev/next descritivo</p>
-        <ul class="fs-pagination fs-u-mb-2">
-            <li class="fs-page-item"><a href="#" class="fs-page-link fs-page-link-text"><svg class="fs-icon" aria-hidden="true" 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 18-6-6 6-6"/></svg>Anterior</a></li>
-            <li class="fs-page-item"><a href="#" class="fs-page-link">1</a></li>
-            <li class="fs-page-item is-active"><a href="#" class="fs-page-link">2</a></li>
-            <li class="fs-page-item"><a href="#" class="fs-page-link">3</a></li>
-            <li class="fs-page-item"><a href="#" class="fs-page-link fs-page-link-text">Próxima<svg class="fs-icon" aria-hidden="true" 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 18 6-6-6-6"/></svg></a></li>
-        </ul>
-        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-2">Reticências (intervalo de páginas omitido)</p>
-        <ul class="fs-pagination">
-            <li class="fs-page-item"><a href="#" class="fs-page-link">1</a></li>
-            <li class="fs-page-item"><a href="#" class="fs-page-link">2</a></li>
-            <li class="fs-page-item"><a href="#" class="fs-page-link">3</a></li>
-            <li class="fs-page-item is-disabled" aria-hidden="true"><span class="fs-page-link"><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="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg></span></li>
-            <li class="fs-page-item"><a href="#" class="fs-page-link">8</a></li>
-            <li class="fs-page-item"><a href="#" class="fs-page-link">9</a></li>
-            <li class="fs-page-item is-active"><a href="#" class="fs-page-link">10</a></li>
-        </ul>
-    </div>
-    <script src="../../dist/js/fokus.js"></script>
-</body>
-</html>

package/mockup/examples/range.html DELETED Viewed

@@ -1,69 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Mockup - Range/Slider</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);
-        }
-        .range-row {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            max-width: 320px;
-            margin-bottom: 16px;
-        }
-        .range-row .fs-form-range {
-            flex: 1;
-        }
-    </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">Padrão</p>
-        <label for="volume" class="fs-form-label">Volume</label>
-        <input type="range" class="fs-form-range" id="volume" min="0" max="100" value="40">
-        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-2">Com valor visível (data-fs="range")</p>
-        <div class="range-row">
-            <input type="range" class="fs-form-range" id="brilho" min="0" max="100" value="65"
-                aria-label="Brilho" data-fs="range" data-fs-target="#brilho-output">
-            <output class="fs-range-output" id="brilho-output" for="brilho">65</output>
-        </div>
-        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-2">Com marcações (datalist)</p>
-        <input type="range" class="fs-form-range" min="0" max="100" step="25" value="50" list="marcas-claro" aria-label="Nível (com marcações)">
-        <datalist id="marcas-claro">
-            <option value="0"></option>
-            <option value="25"></option>
-            <option value="50"></option>
-            <option value="75"></option>
-            <option value="100"></option>
-        </datalist>
-        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-2">Desabilitado</p>
-        <input type="range" class="fs-form-range" min="0" max="100" value="30" aria-label="Controle desabilitado" disabled>
-    </div>
-    <script src="../../dist/js/fokus.js"></script>
-</body>
-</html>

package/mockup/examples/rating.html DELETED Viewed

@@ -1,103 +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 - Rating / Stars</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;
-            align-items: flex-start;
-            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">Sem seleção</p>
-        <div class="fs-rating">
-            <input type="radio" name="r1" id="r1-5" value="5" class="fs-rating-input">
-            <label for="r1-5" class="fs-rating-star" aria-label="5 estrelas"><svg class="fs-icon" aria-hidden="true" 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></label>
-            <input type="radio" name="r1" id="r1-4" value="4" class="fs-rating-input">
-            <label for="r1-4" class="fs-rating-star" aria-label="4 estrelas"><svg class="fs-icon" aria-hidden="true" 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></label>
-            <input type="radio" name="r1" id="r1-3" value="3" class="fs-rating-input">
-            <label for="r1-3" class="fs-rating-star" aria-label="3 estrelas"><svg class="fs-icon" aria-hidden="true" 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></label>
-            <input type="radio" name="r1" id="r1-2" value="2" class="fs-rating-input">
-            <label for="r1-2" class="fs-rating-star" aria-label="2 estrelas"><svg class="fs-icon" aria-hidden="true" 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></label>
-            <input type="radio" name="r1" id="r1-1" value="1" class="fs-rating-input">
-            <label for="r1-1" class="fs-rating-star" aria-label="1 estrela"><svg class="fs-icon" aria-hidden="true" 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></label>
-        </div>
-        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-0">3 de 5 selecionado</p>
-        <div class="fs-rating">
-            <input type="radio" name="r2" id="r2-5" value="5" class="fs-rating-input">
-            <label for="r2-5" class="fs-rating-star" aria-label="5 estrelas"><svg class="fs-icon" aria-hidden="true" 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></label>
-            <input type="radio" name="r2" id="r2-4" value="4" class="fs-rating-input">
-            <label for="r2-4" class="fs-rating-star" aria-label="4 estrelas"><svg class="fs-icon" aria-hidden="true" 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></label>
-            <input type="radio" name="r2" id="r2-3" value="3" class="fs-rating-input" checked>
-            <label for="r2-3" class="fs-rating-star" aria-label="3 estrelas"><svg class="fs-icon" aria-hidden="true" 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></label>
-            <input type="radio" name="r2" id="r2-2" value="2" class="fs-rating-input">
-            <label for="r2-2" class="fs-rating-star" aria-label="2 estrelas"><svg class="fs-icon" aria-hidden="true" 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></label>
-            <input type="radio" name="r2" id="r2-1" value="1" class="fs-rating-input">
-            <label for="r2-1" class="fs-rating-star" aria-label="1 estrela"><svg class="fs-icon" aria-hidden="true" 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></label>
-        </div>
-        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-0">Tamanhos (sm / padrão / lg)</p>
-        <div class="fs-rating fs-rating-sm">
-            <input type="radio" name="r3" id="r3-5" value="5" class="fs-rating-input">
-            <label for="r3-5" class="fs-rating-star" aria-label="5 estrelas"><svg class="fs-icon" aria-hidden="true" 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></label>
-            <input type="radio" name="r3" id="r3-4" value="4" class="fs-rating-input" checked>
-            <label for="r3-4" class="fs-rating-star" aria-label="4 estrelas"><svg class="fs-icon" aria-hidden="true" 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></label>
-            <input type="radio" name="r3" id="r3-3" value="3" class="fs-rating-input">
-            <label for="r3-3" class="fs-rating-star" aria-label="3 estrelas"><svg class="fs-icon" aria-hidden="true" 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></label>
-            <input type="radio" name="r3" id="r3-2" value="2" class="fs-rating-input">
-            <label for="r3-2" class="fs-rating-star" aria-label="2 estrelas"><svg class="fs-icon" aria-hidden="true" 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></label>
-            <input type="radio" name="r3" id="r3-1" value="1" class="fs-rating-input">
-            <label for="r3-1" class="fs-rating-star" aria-label="1 estrela"><svg class="fs-icon" aria-hidden="true" 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></label>
-        </div>
-        <div class="fs-rating fs-rating-lg">
-            <input type="radio" name="r4" id="r4-5" value="5" class="fs-rating-input" checked>
-            <label for="r4-5" class="fs-rating-star" aria-label="5 estrelas"><svg class="fs-icon" aria-hidden="true" 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></label>
-            <input type="radio" name="r4" id="r4-4" value="4" class="fs-rating-input">
-            <label for="r4-4" class="fs-rating-star" aria-label="4 estrelas"><svg class="fs-icon" aria-hidden="true" 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></label>
-            <input type="radio" name="r4" id="r4-3" value="3" class="fs-rating-input">
-            <label for="r4-3" class="fs-rating-star" aria-label="3 estrelas"><svg class="fs-icon" aria-hidden="true" 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></label>
-            <input type="radio" name="r4" id="r4-2" value="2" class="fs-rating-input">
-            <label for="r4-2" class="fs-rating-star" aria-label="2 estrelas"><svg class="fs-icon" aria-hidden="true" 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></label>
-            <input type="radio" name="r4" id="r4-1" value="1" class="fs-rating-input">
-            <label for="r4-1" class="fs-rating-star" aria-label="1 estrela"><svg class="fs-icon" aria-hidden="true" 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></label>
-        </div>
-        <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-0">Desabilitado (2 de 5)</p>
-        <div class="fs-rating">
-            <input type="radio" name="r5" id="r5-5" value="5" class="fs-rating-input" disabled>
-            <label for="r5-5" class="fs-rating-star" aria-label="5 estrelas"><svg class="fs-icon" aria-hidden="true" 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></label>
-            <input type="radio" name="r5" id="r5-4" value="4" class="fs-rating-input" disabled>
-            <label for="r5-4" class="fs-rating-star" aria-label="4 estrelas"><svg class="fs-icon" aria-hidden="true" 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></label>
-            <input type="radio" name="r5" id="r5-3" value="3" class="fs-rating-input" disabled>
-            <label for="r5-3" class="fs-rating-star" aria-label="3 estrelas"><svg class="fs-icon" aria-hidden="true" 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></label>
-            <input type="radio" name="r5" id="r5-2" value="2" class="fs-rating-input" checked disabled>
-            <label for="r5-2" class="fs-rating-star" aria-label="2 estrelas"><svg class="fs-icon" aria-hidden="true" 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></label>
-            <input type="radio" name="r5" id="r5-1" value="1" class="fs-rating-input" disabled>
-            <label for="r5-1" class="fs-rating-star" aria-label="1 estrela"><svg class="fs-icon" aria-hidden="true" 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></label>
-        </div>
-    </div>
-</body>
-</html>

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>