@abrasileirado/dsgovbr-bootstraped 0.2.1 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abrasileirado/dsgovbr-bootstraped",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Camada de compatibilidade visual não oficial entre o Bootstrap 5 e o Design System GOV.BR (DSGovBR)",
   "license": "MIT",
   "author": "Kelson da Costa Medeiros",
@@ -23,12 +23,19 @@
   "scripts": {
     "build:css": "sass src/scss/index.scss:dist/dsgovbr-bootstraped.css --style=expanded --source-map",
     "build:css:min": "sass src/scss/index.scss:dist/dsgovbr-bootstraped.min.css --style=compressed --no-source-map",
-    "build:docs-assets": "node -e \"require('fs').mkdirSync('docs/assets/css',{recursive:true});require('fs').copyFileSync('dist/dsgovbr-bootstraped.min.css','docs/assets/css/dsgovbr-bootstraped.css')\"",
+    "build:docs-assets": "node scripts/build-docs-assets.js",
     "build:site": "node scripts/build-site.js",
     "build": "npm run build:css && npm run build:css:min && npm run build:docs-assets && npm run build:site",
-    "test": "node scripts/test-package.js"
+    "test": "npm run test:unit && npm run test:package",
+    "test:unit": "node --test \"tests/**/*.test.js\"",
+    "test:package": "node scripts/test-package.js",
+    "test:browser": "playwright test",
+    "serve": "node scripts/serve.js",
+    "test:visual:update": "node scripts/test-visual-update.js"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.14.0",
+    "@playwright/test": "1.64.1",
     "sass": "^1.80.0"
   }
 }

package/src/scss/_bootstrap-settings.scss

@@ -59,10 +59,9 @@ $btn-padding-x: 1.5rem !default; // 24px
 $btn-padding-x-sm: 1rem !default; // 16px
 $btn-padding-x-lg: 2rem !default; // 32px
 
-// Padding vertical ajustado para aproximar as alturas de referência do
-// GOV.BR DS (32/40/48px — ver _tokens.scss). É uma aproximação deliberada,
-// não paridade de pixel: a matriz de compatibilidade (docs/requisitos.md §6)
-// não exige identidade exata, só declarar a aproximação.
+// A altura exata (32/40/48px — ver _tokens.scss) vem de min-height em
+// components/_button.scss. Este padding vertical só dá respiro quando o
+// rótulo quebra de linha (aí o botão cresce além do mínimo).
 $btn-padding-y: 0.5rem !default;     // ~40px de altura total (padrão)
 $btn-padding-y-sm: 0.375rem !default; // ~32px de altura total
 $btn-padding-y-lg: 0.625rem !default; // ~48px de altura total
@@ -110,6 +109,11 @@ $form-check-input-width: 24px !default;
 // sobrescrevemos o resultado final também: 24px (caixa) + 8px (espaçamento,
 // spacing-scale-base do GOV.BR DS) = 32px.
 $form-check-padding-start: 2rem !default;
+// Linha do GOV.BR DS: altura da caixa (24px) e 8px entre linhas
+// (spacing-scale-base). Os padrões do Bootstrap (21px e .125rem) são menores
+// que a caixa, e as caixas de linhas seguidas quase se tocavam.
+$form-check-min-height: 24px !default;
+$form-check-margin-bottom: 0.5rem !default;
 $form-check-input-border-radius: $govbr-radius-sm !default; // 4px (só a caixa do checkbox)
 $form-check-label-cursor: pointer !default;
 

package/src/scss/_tokens.scss

@@ -30,6 +30,12 @@ $govbr-warning: #ffcd07 !default;
 // vendor/govbr-ds-core/.../configs/colors/_red-vivid.scss
 $govbr-danger: #e52207 !default;
 
+// Texto amarelo legível: o amarelo do tema (#ffcd07) como TEXTO sobre fundo
+// claro dá contraste 1.5:1 (WCAG 1.4.3 exige 4.5:1). Usado só em
+// .btn-outline-warning (components/_button.scss). yellow-vivid-60 dá ~6:1.
+// vendor/govbr-ds-core/.../configs/colors/_yellow-vivid.scss
+$govbr-warning-text: #776017 !default;
+
 // --- Neutros ---
 // vendor/govbr-ds-core/.../configs/colors/_gray.scss
 $govbr-gray-90: #1b1b1b !default; // tom mais escuro (usado como $dark)
@@ -53,6 +59,19 @@ $govbr-font-weight-semibold: 600 !default;
 // vendor/govbr-ds-core/.../configs/colors/_gray.scss
 $govbr-gray-40: #888 !default;
 
+// --- Foco (issue #30) ---
+// --focus: var(--focus-color) = var(--focus-color-light) = var(--gold-vivid-40)
+// vendor/govbr-ds-core/src/partial/scss/_tokens.scss (bloco :root)
+// vendor/govbr-ds-core/.../configs/colors/_gold-vivid.scss
+$govbr-focus: #c2850c !default;
+// --focus-width: var(--surface-width-lg) (contorno do botão)
+// vendor/govbr-ds-core/src/partial/scss/configs/_surface.scss ($width-lg)
+$govbr-focus-width: 4px !default;
+// focus-soft (campos): box-shadow 0 0 0 var(--surface-width-md) ($width-md)
+$govbr-focus-ring-width: 2px !default;
+// --focus-offset: var(--spacing-scale-half) = $spacer * 0.5
+$govbr-focus-offset: 4px !default;
+
 // --- Superfície (raio de borda) ---
 // vendor/govbr-ds-core/src/partial/scss/configs/_surface.scss ($rounder-sm)
 $govbr-radius-sm: 4px !default;

package/src/scss/components/_alert.scss

@@ -0,0 +1,50 @@
+// Ícone de severidade do alerta (GOV.BR DS: elemento .icon dentro de .message,
+// com Font Awesome: check-circle, times-circle, info-circle e
+// exclamation-triangle). O GOV.BR DS não redistribui nem dependemos do Font
+// Awesome (DP-05), então aqui são formas SVG PRÓPRIAS (autoria deste
+// projeto), aplicadas por ::before com mask-image: sem markup novo (RF-03), e
+// a cor vem de CSS (um data-URI não enxerga custom properties; a máscara sim).
+//
+// O ícone é decorativo: a severidade continua no texto e no role="alert".
+// Só nas quatro severidades do GOV.BR DS; alert-primary/secondary/light/dark
+// são extensões (DP-06) e ficam sem ícone.
+
+$govbr-alert-icons: (
+  // círculo com check
+  "success": escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zM11.35 5.35L7 9.7 4.65 7.35l-1 1L7 11.7l5.35-5.35-1-1z'/></svg>")),
+  // círculo com X
+  "danger": escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zM5.2 4.2L8 7l2.8-2.8 1 1L9 8l2.8 2.8-1 1L8 9l-2.8 2.8-1-1L7 8 4.2 5.2z'/></svg>")),
+  // círculo com "i"
+  "info": escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zM7.1 3.6h1.8v1.8H7.1zM7.1 6.8h1.8v5.6H7.1z'/></svg>")),
+  // triângulo com "!"
+  "warning": escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M8 .8l7.7 14H.3zM7.1 5.8h1.8v4.9H7.1zM7.1 11.6h1.8v1.8H7.1z'/></svg>"))
+);
+
+// success/danger/info usam a cor da severidade; o aviso usa o texto escuro
+// (no GOV.BR DS o ícone do aviso herda --color, não o amarelo).
+$govbr-alert-icon-colors: (
+  "success": var(--bs-success),
+  "danger": var(--bs-danger),
+  "info": var(--bs-info),
+  "warning": var(--bs-body-color)
+);
+
+@each $nome, $icone in $govbr-alert-icons {
+  .alert-#{$nome} {
+    // abre espaço à esquerda: ícone (1.25rem) + respiro (.75rem)
+    padding-left: calc(var(--bs-alert-padding-x) + 1.25rem + 0.75rem);
+
+    &::before {
+      content: "";
+      position: absolute;
+      // centraliza o ícone (20px) na primeira linha do texto (21px)
+      top: calc(var(--bs-alert-padding-y) + 0.03125rem);
+      left: var(--bs-alert-padding-x);
+      width: 1.25rem;
+      height: 1.25rem;
+      background-color: map-get($govbr-alert-icon-colors, $nome);
+      -webkit-mask: $icone center / contain no-repeat;
+      mask: $icone center / contain no-repeat;
+    }
+  }
+}

package/src/scss/components/_button.scss

@@ -0,0 +1,48 @@
+// Contraste (WCAG 1.4.3): o Bootstrap usa a cor do tema como texto do
+// .btn-outline-warning; com o amarelo do GOV.BR DS (#ffcd07) sobre fundo claro
+// são 1.5:1 (mínimo 4.5:1). Escurecemos só o texto; a borda e o estado hover
+// (fundo amarelo com texto preto) continuam os do tema. Variante que não
+// existe no GOV.BR DS (extensão — DP-06), mas não pode ficar ilegível.
+.btn-outline-warning {
+  --bs-btn-color: #{$govbr-warning-text};
+}
+
+// Forma do botão do GOV.BR DS (vendor/govbr-ds-core/.../button/_mixins.scss):
+// sem borda nas variantes preenchidas e altura FIXA por tamanho (32/40/48px),
+// conteúdo centralizado. Usamos min-height (não height) para um rótulo que
+// quebre linha fazer o botão crescer em vez de transbordar. O padding vertical
+// de _bootstrap-settings.scss deixa de definir a altura; só dá respiro se quebrar.
+.btn {
+  --bs-btn-border-width: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: $govbr-button-height-medium;
+}
+
+.btn-sm,
+.btn-group-sm > .btn {
+  min-height: $govbr-button-height-small;
+}
+
+.btn-lg,
+.btn-group-lg > .btn {
+  min-height: $govbr-button-height-large;
+}
+
+// No GOV.BR DS só a ênfase "secondary" tem borda (1px). Aqui: as variantes
+// outline do Bootstrap (extensão, exceto outline-primary — ver DP-06).
+[class*="btn-outline-"] {
+  --bs-btn-border-width: 1px;
+}
+
+// Foco por teclado do GOV.BR DS (mixin focus em partial/scss/mixins/_focus.scss):
+// contorno tracejado dourado, afastado do botão, no lugar do anel azul
+// translúcido (box-shadow) do Bootstrap. Contraste do dourado sobre branco
+// ~3,2:1 (WCAG 1.4.11 pede 3:1 para componentes de interface).
+.btn:focus-visible,
+.btn-check:focus-visible + .btn {
+  outline: $govbr-focus-width dashed $govbr-focus;
+  outline-offset: $govbr-focus-offset;
+  box-shadow: none;
+}

package/src/scss/components/_form.scss

@@ -0,0 +1,38 @@
+// Foco dos campos de texto (mixin focus-soft do GOV.BR DS): borda dourada mais
+// um anel de 2px, no lugar do anel azul translúcido do Bootstrap.
+// !important como no GOV.BR DS: o foco vence a cor de borda e o anel dos
+// estados de validação (.is-valid/.is-invalid), que têm especificidade maior.
+.form-control:focus,
+.form-select:focus {
+  border-color: $govbr-focus !important;
+  box-shadow: 0 0 0 $govbr-focus-ring-width $govbr-focus !important;
+  outline: 0;
+}
+
+// Estados de validação: o GOV.BR DS engrossa a borda do campo para 2px na cor
+// do estado (input-states: border-width: 2px). Engrossar a borda aqui mudaria
+// a altura (e exigiria compensar o padding em cada tamanho), então os 2px
+// visuais saem de 1px de borda (a cor do estado já vem do Bootstrap) + 1px de
+// sombra interna na mesma cor: mesmo desenho, layout intocado. Em :focus a
+// regra acima (dourada, !important) prevalece, como no GOV.BR DS.
+.form-control.is-valid,
+.form-select.is-valid,
+.was-validated .form-control:valid,
+.was-validated .form-select:valid {
+  box-shadow: inset 0 0 0 1px var(--bs-form-valid-border-color);
+}
+
+.form-control.is-invalid,
+.form-select.is-invalid,
+.was-validated .form-control:invalid,
+.was-validated .form-select:invalid {
+  box-shadow: inset 0 0 0 1px var(--bs-form-invalid-border-color);
+}
+
+// Centraliza a caixa na primeira linha do rótulo. O Bootstrap faz
+// ($line-height-base - $form-check-input-width) * .5, que só funciona com a
+// largura em em (1.5 - 1em); com a caixa de 24px vira 1.5 - 24px = -11.25px e
+// a caixa sobe ~10px. Aqui: (altura da linha - 24px) / 2 = -1.5px.
+.form-check-input {
+  margin-top: calc((var(--bs-body-line-height) * 1em - #{$form-check-input-width}) / 2);
+}

package/src/scss/index.scss

@@ -16,4 +16,7 @@
 
 // Ajustes que as variáveis de tema, sozinhas, não resolvem — um adaptador
 // por componente (ver docs/desenvolvimento.md).
+@import "components/alert";
+@import "components/button";
 @import "components/card";
+@import "components/form";