Sufficit.Blazor.UI 1.27.0

.NET 9.0 This package targets .NET 9.0. The package is compatible with this framework or higher.
There is a newer version of this package available.
See the version list below for details. 
dotnet add package Sufficit.Blazor.UI --version 1.27.0
                    


                    

                
NuGet\Install-Package Sufficit.Blazor.UI -Version 1.27.0
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="Sufficit.Blazor.UI" Version="1.27.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="Sufficit.Blazor.UI" Version="1.27.0" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="Sufficit.Blazor.UI" />
                    


                            Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package. 
paket add Sufficit.Blazor.UI --version 1.27.0
                    


                    

                
#r "nuget: Sufficit.Blazor.UI, 1.27.0"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
#:package Sufficit.Blazor.UI@1.27.0
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package. 
#addin nuget:?package=Sufficit.Blazor.UI&version=1.27.0
                    


                            Install as a Cake Addin
                        

                    

                
#tool nuget:?package=Sufficit.Blazor.UI&version=1.27.0
                    


                            Install as a Cake Tool

Sufficit.Blazor.UI

Razor Class Library dos componentes Sufficit User Interface (SUI). A biblioteca usa Blazor puro, HTML, CSS e módulos JavaScript ES; não depende de nenhuma biblioteca visual de terceiros nem contém código-fonte vendorizado.

Compatibilidade e distribuição

  • Target frameworks: net9.0 e net10.0.
  • Package ID: Sufficit.Blazor.UI.
  • Distribuição: pacote NuGet e ProjectReference local.
  • Namespace dos componentes: Sufficit.Blazor.UI.Components.
  • Namespace de temas: Sufficit.Blazor.UI.Themes.

A série v1 mantém os dois TFMs. A v2 está planejada como net10-only, não antes do fim de suporte do .NET 9 em 2026-11-10 e condicionada à validação de todos os consumers conhecidos. Veja a política de versionamento e TFMs e o plano da v2.

O CI compila ambos os frameworks com warnings tratados como erros, gera o .nupkg, inspeciona seus assets e instala o pacote em RCLs e Blazor Web Apps temporárias net9.0 e net10.0. As apps são iniciadas na raiz e sob PathBase, validando markup SSR, CSS global/isolation e módulos. As dependências ASP.NET Core usam versões de servicing exatas; o Dependabot mantém a atualização semanal, evitando que dois restores do mesmo commit escolham versões diferentes.

Builds locais usam a versão não publicável 0.0.0-local. Uma release nasce somente de tag vMAJOR.MINOR.PATCH[-prerelease]; o pacote só é enviado ao NuGet.org depois dos gates multialvo, bUnit, Playwright/axe e validação do artefato exato. Veja o runbook de release e o changelog.

Uma varredura local encontra referências à biblioteca em 11 projetos de aplicação/biblioteca e em um projeto de testes. Dez caminhos de produção já resolvem a estrutura atual; o sufficit-checkout ainda usa o caminho legado e permanece como débito explícito do rollout de consumidores.

Instalação

Por pacote:

<PackageReference Include="Sufficit.Blazor.UI" Version="1.*" />

Durante desenvolvimento conjunto, um consumidor também pode apontar para src/Sufficit.Blazor.UI.csproj com ProjectReference.

Inclua no <head> tanto o entrypoint global da RCL quanto o bundle de CSS isolation gerado para a aplicação consumidora:

<link href="_content/Sufficit.Blazor.UI/sufficit-ui.css" rel="stylesheet" />
<link href="MinhaAplicacao.styles.css" rel="stylesheet" />

Substitua MinhaAplicacao pelo assembly do projeto host. O primeiro arquivo é gerado e minificado a partir de fontes modulares; sem @import em runtime, ele carrega tokens, primitives compartilhadas, portais e as regras globais ainda em migração; o segundo reúne os .razor.css da aplicação e das RCLs referenciadas. Carregar apenas um deles deixa parte dos componentes sem estilo. O entrypoint sufficit-ui.css permanece compatível durante a janela de migração dos consumidores.

Não inclua scripts SUI manualmente. Cada componente com interop importa seu módulo JavaScript colocalizado de forma assíncrona e remove listeners no descarte.

Desenvolvimento do CSS

Os fontes autorais ficam em src/styles: foundations, portals, regras globais de compatibilidade e o entrypoint de build. Depois de alterá-los, execute:

npm ci
npm run build:css
npm run check:css

O primeiro comando instala a versão travada do Lightning CSS; o segundo gera o único asset público src/wwwroot/sufficit-ui.css; o terceiro confirma que o artefato está atualizado e dentro dos budgets bruto, gzip e Brotli. O output é minificado, portanto diagnósticos devem ser rastreados aos arquivos autorais, não editados diretamente no arquivo gerado.

Registre os serviços no Program.cs:

using Sufficit.Blazor.UI;

builder.Services.AddSufficitUI();

E instale o provider uma única vez na raiz interativa da aplicação:

@using Sufficit.Blazor.UI.Themes

<SUIThemeProvider>
    <Routes />
</SUIThemeProvider>

Tema

O contrato público usa o casing real do código: ISUITheme, SUIPalette, SUITypography, SUILayout, DefaultSUITheme e SUIThemeProvider.

Uma aplicação pode fornecer seu tema pelo DI:

builder.Services.AddSufficitUI(options =>
    options.Theme = new IdentitySUITheme());

Ou diretamente no provider:

<SUIThemeProvider Theme="Theme">
    <Routes />
</SUIThemeProvider>

O provider publica os tokens --sui-* globalmente, inclusive color-scheme, para que menus, dialogs, tooltips e toasts anexados ao body recebam a mesma paleta. ISUITheme.IsDark seleciona o esquema; a paleta continua pertencendo ao tema consumidor. Sem configuração, DefaultSUITheme fornece o fallback claro azul.

Exemplos de tokens:

  • cores: --sui-color-primary, --sui-color-primary-contrast, --sui-color-primary-action, --sui-color-primary-action-contrast, --sui-surface, --sui-text-primary, --sui-border;
  • tipografia: --sui-font, --sui-fs-body, --sui-lh-body;
  • layout: --sui-space-*, --sui-radius-*, --sui-shadow-* e --sui-control-h-*.

Na SUIPalette, Primary continua sendo o acento de marca. Os campos opcionais PrimaryAction/PrimaryActionContrast permitem uma superfície própria para botões primários preenchidos; quando omitidos, o provider recua para Primary/PrimaryContrast e preserva temas existentes.

Catálogo de componentes

A referência por família, contratos de forms e páginas de Select, Tooltip, NavGroup, Dialog e ThemeProvider ficam em docs/components.

Todos os componentes públicos usam o prefixo SUI.

Família Componentes
Ações SUIButton, SUIIconButton, SUILoadingButton, SUILink
Formulários SUIAutocomplete, SUIChoiceCard<TValue>, SUIFormGrid, SUINumericField, SUISelect<T>, SUISelectItem, SUISwitch, SUISwitchButton, SUITextField
Layout SUIAppBar, SUICard, SUIContainer, SUIDivider, SUIDrawer, SUIGrid, SUILayout, SUIPageHeader, SUISpacer, SUIStack
Navegação SUIItem, SUIList, SUIListItem, SUINavGroup, SUINavLink, SUITabPanel, SUITabs
Exibição de dados SUIChip, SUIIcon, SUIStatusBadge, SUITable, SUITableEmpty, SUITd, SUIText, SUITh, SUITimeline, SUITimelineItem
Feedback SUIAlert, SUIEmptyState, SUIProgressLinear, SUISkeletonLoader, SUIStatusBanner, SUIToast
Overlays SUIConfirmDialog, SUIDialogHost, SUISnackbarHost, SUITooltip

Enums como SUIColor, SUIVariant, SUISize, SUIButtonType, SUIEdge, SUITypo, SUIAlign, SUIOrigin e SUITone evitam dependência de tipos visuais externos. Algumas APIs ainda aceitam valores legados por uma ponte de compatibilidade; código novo deve usar os enums SUI.

Exemplos

Ação e feedback

<SUIButton ColorValue="SUIColor.Primary" OnClick="SaveAsync">
    Salvar alterações
</SUIButton>

<SUIStatusBanner Tone="SUITone.Success"
                 Title="Runtime estável"
                 Description="Todos os workers responderam." />

Choice card

<SUIChoiceCard TValue="PaymentMethod"
               Value="PaymentMethod.Pix"
               SelectedValue="SelectedMethod"
               SelectedValueChanged="SelectMethod"
               Name="payment-method"
               Title="PIX"
               Description="Confirmação rápida, a qualquer hora"
               LeadingTone="SUITone.Success" />

Select

<SUISelect T="string"
           Label="Região"
           Value="SelectedRegion"
           ValueChanged="OnRegionChanged"
           MenuMaxWidth="36rem">
    <SUISelectItem T="string" Value="sudeste">Sudeste</SUISelectItem>
    <SUISelectItem T="string" Value="sul">Sul</SUISelectItem>
</SUISelect>

O menu do SUISelect usa a top layer quando disponível, reposiciona-se nas bordas da viewport e suporta ArrowUp, ArrowDown, Home, End, Enter, Space e Escape. Use <select> nativo quando postagem HTML ou o seletor do sistema operacional forem requisitos.

Tooltip

<SUITooltip Text="Armazenamento"
            Placement="SUITooltipPlacement.Right"
            MaxWidth="280">
    <SUIIconButton Icon="@Icons.Storage" AriaLabel="Armazenamento" />
</SUITooltip>

Testes

A suíte é dividida em três camadas. Todas rodam no CI e falham o build.

Camada Projeto/gate Cobre
Contrato de código tests/Sufficit.Blazor.UI.Tests bUnit (render, lifecycle, forward de atributos, acessibilidade de formulário), compatibilidade de API pública, convenções de nome e namespace, tamanho de arquivo, contrato de CSS, budgets de bytes e guarda anti-biblioteca-de-terceiros
Navegador tests/Sufficit.Blazor.UI.BrowserTests Playwright + axe em chromium/firefox/webkit: WCAG 2.2 AA em desktop/mobile e light/dark, teclado, foco visível, focus trap, forced-colors, RTL, zoom 200%, alvos de 44px, baselines visuais, budgets de runtime (requests, DOM, bytes, LCP, CLS)
Página completa job lighthouse eng/lighthouse-budget.json + scripts/check-lighthouse.mjs: categorias performance/accessibility/best-practices/SEO e métricas FCP, LCP, TBT, CLS, Speed Index 
dotnet test tests/Sufficit.Blazor.UI.Tests/Sufficit.Blazor.UI.Tests.csproj

# o catálogo precisa estar no ar para as camadas 2 e 3
dotnet run --project samples/Sufficit.Blazor.UI.Catalog/Sufficit.Blazor.UI.Catalog.csproj \
  -c Release --urls http://127.0.0.1:5180 &
BROWSER=chromium dotnet test tests/Sufficit.Blazor.UI.BrowserTests/Sufficit.Blazor.UI.BrowserTests.csproj
npx --yes lighthouse@12 http://127.0.0.1:5180 --preset=desktop --output=json \
  --output-path=artifacts/lighthouse/report.json --budget-path=eng/lighthouse-budget.json
node scripts/check-lighthouse.mjs artifacts/lighthouse/report.json

Budgets são teto, não meta móvel: quando um arquivo ou payload estoura, a correção é dividir ou reduzir. Os poucos casos herdados ficam congelados em listas de débito explícitas (FileSizeBudgetTests.Debt, NamingConventionTests.LegacyParameterNames) que só podem encolher.

Engenharia e documentação

A atividade registra a migração para organização por famílias, CSS híbrido, módulos JavaScript colocalizados, catálogo executável, testes de componentes, gates de acessibilidade, pacote final e validação nos consumidores.

Licença

MIT-0 — veja LICENSE.

Product Compatible and additional computed target framework versions.
.NET net9.0 is compatible.  net9.0-android was computed.  net9.0-browser was computed.  net9.0-ios was computed.  net9.0-maccatalyst was computed.  net9.0-macos was computed.  net9.0-tvos was computed.  net9.0-windows was computed.  net10.0 is compatible.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages (1)

Showing the top 1 NuGet packages that depend on Sufficit.Blazor.UI:

Package Downloads
Sufficit.Blazor

Package Description

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
1.28.0 186 8/17/2026
1.27.0 129 8/16/2026
1.26.814.1643 126 8/14/2026
1.26.812.2038 95 8/12/2026
1.26.812.1703 83 8/12/2026
1.26.812.1659 84 8/12/2026
1.26.812.1649 101 8/12/2026
1.26.812.1605 91 8/12/2026
1.26.812.1603 82 8/12/2026
1.26.812.1528 81 8/12/2026
1.26.812.808 109 8/12/2026
1.26.812.652 105 8/12/2026
1.26.812.620 96 8/12/2026
1.26.810.110 88 8/10/2026