@abrasileirado/dsgovbr-bootstraped 0.7.0 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abrasileirado/dsgovbr-bootstraped",
-  "version": "0.7.0",
+  "version": "0.9.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",

package/src/scss/_bootstrap-settings.scss

@@ -308,3 +308,72 @@ $carousel-indicator-width: 8px !default;
 $carousel-indicator-height: 8px !default;
 $carousel-indicator-spacer: 4px !default;
 $carousel-indicator-opacity: 0.45 !default;
+
+// --- Issue #45: header, menu e footer ---
+
+// Modo escuro (data-bs-theme="dark") no fundo escuro do GOV.BR DS
+// (--background-dark, --color-dark, --interactive-dark). É a superfície do
+// Footer e do Header escuro; use .bg-body nesses blocos.
+$body-bg-dark: $govbr-background-dark !default;
+$body-color-dark: $govbr-color-dark !default;
+$link-color-dark: $govbr-interactive-dark !default;
+$link-hover-color-dark: $govbr-interactive-dark !default;
+
+// Navbar como o Header do GOV.BR DS: 16px de respiro vertical, título de
+// 14px (20,16px a partir de sm) na cor do texto, links na cor interativa e acionador do menu
+// circular de 40px com o ícone na cor interativa.
+$navbar-padding-y: 16px !default;
+$navbar-brand-font-size: $govbr-font-size-base !default; // celular; sm e lg em components/_navbar.scss
+$navbar-brand-padding-y: 4px !default; // o cálculo do Bootstrap mistura rem e px
+$navbar-nav-link-padding-x: 16px !default;
+$navbar-toggler-padding-y: 8px !default;
+$navbar-toggler-padding-x: 8px !default;
+$navbar-toggler-font-size: 16px !default;
+$navbar-toggler-border-radius: 50% !default;
+$navbar-light-color: $govbr-interactive !default;
+$navbar-light-hover-color: $govbr-interactive !default;
+$navbar-light-active-color: $govbr-active !default;
+$navbar-light-disabled-color: $govbr-gray-40 !default;
+$navbar-light-icon-color: $govbr-interactive !default;
+$navbar-light-toggler-border-color: transparent !default;
+$navbar-light-brand-color: $govbr-gray-80 !default;
+$navbar-light-brand-hover-color: $govbr-gray-80 !default;
+$navbar-dark-color: $govbr-interactive-dark !default;
+$navbar-dark-hover-color: $govbr-interactive-dark !default;
+$navbar-dark-active-color: $govbr-color-dark !default;
+$navbar-dark-icon-color: $govbr-interactive-dark !default;
+$navbar-dark-toggler-border-color: transparent !default;
+$navbar-dark-brand-color: $govbr-color-dark !default;
+$navbar-dark-brand-hover-color: $govbr-color-dark !default;
+
+// Divider (GOV.BR DS: Divider) — <hr> opaco em --border-color.
+$hr-color: $govbr-gray-20 !default;
+$hr-opacity: 1 !default;
+
+// --- Issue #46: switch e select ---
+
+// Switch (GOV.BR DS: Switch, tamanho médio): trilho de 52x30px branco com
+// borda --border-color e botão de 22px a 4px da borda, cinza (--off) quando
+// desligado e azul (--on) quando ligado. O trilho não muda de cor ao ligar.
+// Altura, posição do botão e hover ficam em components/_form.scss.
+$form-switch-width: $govbr-switch-width !default;
+$form-switch-padding-start: $govbr-switch-width + 8px !default; // spacing-scale-base
+$form-switch-border-radius: 100em !default;
+$form-switch-transition: background-position 0.3s ease-in-out !default;
+$form-switch-color: $govbr-gray-20 !default;
+$form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-11 -11 22 22'><circle r='11' fill='#{$form-switch-color}'/></svg>") !default;
+$form-switch-focus-color: $govbr-gray-20 !default;
+$form-switch-focus-bg-image: $form-switch-bg-image !default;
+$form-switch-checked-color: $govbr-switch-on !default;
+$form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-11 -11 22 22'><circle r='11' fill='#{$form-switch-checked-color}'/></svg>") !default;
+$form-switch-checked-bg-position: right 3px center !default; // 4px da borda externa
+$form-switch-color-dark: $govbr-gray-20 !default;
+$form-switch-bg-image-dark: $form-switch-bg-image !default;
+
+// Select (GOV.BR DS: Select = Input + botão circular pequeno com seta na cor
+// interativa, 4px da borda, e 40px de respiro à direita): mesma superfície
+// dos campos de texto, seta na cor interativa centrada nos 32px do botão.
+$form-select-indicator-color: $govbr-interactive !default;
+$form-select-indicator-color-dark: $govbr-interactive-dark !default;
+$form-select-indicator-padding: 2.5rem !default; // 40px = --input-padding-button (spacing-scale-5x); rem porque o Bootstrap soma com $form-select-padding-x
+$form-select-bg-position: right 12px center !default; // 4px + (32px - 16px) / 2

package/src/scss/_tokens.scss

@@ -133,3 +133,17 @@ $govbr-loading-md: 44px !default; // --loading-indetermined-diameter-md (borda 4
 
 // Modal: vendor/govbr-ds-core/src/components/modal/_mixins.scss (--modal-medium)
 $govbr-modal-width: 500px !default;
+$govbr-font-size-up-03: 24.192px !default;
+$govbr-background-dark: #071d41 !default; // --background-dark (blue-warm-vivid-90)
+$govbr-color-dark: #fff !default;         // --color-dark (pure-0)
+$govbr-interactive-dark: #c5d4eb !default; // --interactive-dark (blue-warm-20)
+$govbr-focus-dark: #ffbe2e !default;      // --focus-color-dark (gold-vivid-20)
+$govbr-gray-2: #f8f8f8 !default;   // --menu-background-submenu, fundo do sign-in e da busca
+
+// Switch: vendor/govbr-ds-core/src/components/switch/_mixins.scss (switch-tokens,
+// tamanho médio) e --on (blue-warm-vivid-40) em partial/scss/_tokens.scss.
+// O desligado usa --off = gray-20 ($govbr-gray-20).
+$govbr-switch-on: #5992ed !default;    // --on (blue-warm-vivid-40)
+$govbr-switch-width: 52px !default;    // --switch-width-medium
+$govbr-switch-height: 30px !default;   // --switch-height-medium
+$govbr-switch-toggle: 22px !default;   // --switch-toggle-medium

package/src/scss/components/_button.scss

@@ -46,3 +46,25 @@
   outline-offset: $govbr-focus-offset;
   box-shadow: none;
 }
+
+// Button circular do GOV.BR DS (classe circle): .btn + .rounded-circle. Largura
+// igual à altura (32/40/48px), sem padding, ícone de 16,8px. Com .btn-link é a
+// ênfase baixa (sem fundo), usada nos ícones do Header, do Menu e do Footer.
+.btn.rounded-circle {
+  width: $govbr-button-height-medium;
+  padding: 0;
+  font-size: $govbr-font-size-up-01;
+  text-decoration: none;
+}
+
+.btn-sm.rounded-circle {
+  width: $govbr-button-height-small;
+}
+
+.btn-lg.rounded-circle {
+  width: $govbr-button-height-large;
+}
+
+.btn-link.rounded-circle:hover {
+  @include govbr-hover;
+}

package/src/scss/components/_dark.scss

@@ -0,0 +1,31 @@
+// Bloco em modo escuro herda a cor do texto do body (clara); o Bootstrap só
+// troca as variáveis. Aqui o texto do bloco passa a --color-dark.
+[data-bs-theme="dark"] {
+  color: var(--#{$prefix}body-color);
+}
+
+// Modo escuro do GOV.BR DS (mixin dark-mode em partial/scss/mixins/_states.scss):
+// o foco passa a --focus-color-dark (gold-vivid-20), que contrasta com o fundo
+// escuro. Declarado por último e com um atributo a mais que as regras de foco,
+// então vence sem !important.
+[data-bs-theme="dark"] :focus-visible,
+[data-bs-theme="dark"]:focus-visible {
+  outline-color: $govbr-focus-dark;
+}
+
+// Hover dos links de navegação no fundo escuro: camada clara em vez da azul.
+[data-bs-theme="dark"] .nav-link:hover:not(.active):not(.disabled),
+[data-bs-theme="dark"] .list-group-item-action:hover:not(.active) {
+  @include govbr-hover($govbr-interactive-dark);
+}
+
+// .btn-link (ênfase baixa) no fundo escuro: --interactive-dark.
+[data-bs-theme="dark"] .btn-link {
+  --#{$prefix}btn-color: #{$govbr-interactive-dark};
+  --#{$prefix}btn-hover-color: #{$govbr-interactive-dark};
+  --#{$prefix}btn-active-color: #{$govbr-color-dark};
+}
+
+[data-bs-theme="dark"] .btn-link.rounded-circle:hover {
+  @include govbr-hover($govbr-interactive-dark);
+}

package/src/scss/components/_divider.scss

@@ -0,0 +1,6 @@
+// Divider do GOV.BR DS (vendor/govbr-ds-core/src/components/divider): 1px
+// opaco em --border-color. <hr> recebe pelas variáveis $hr-color/$hr-opacity;
+// o .vr (divisor vertical do Header) usa a cor de fundo.
+.vr {
+  background-color: $govbr-gray-20;
+}

package/src/scss/components/_footer.scss

@@ -0,0 +1,28 @@
+// Footer do GOV.BR DS (vendor/govbr-ds-core/src/components/footer):
+// <footer data-bs-theme="dark" class="bg-body"> — fundo --background-dark (do
+// modo escuro), divisor no topo, 48px de respiro, títulos de categoria em
+// 11,66px negrito e caixa alta e itens de 56px (Item do GOV.BR DS: 8px de
+// respiro + 40px) com links em --interactive-dark.
+footer[data-bs-theme="dark"] {
+  padding-top: 48px;
+  border-top: 1px solid $govbr-gray-20;
+
+  h2 {
+    display: flex;
+    align-items: center;
+    min-height: 56px;
+    margin: 0;
+    padding: 8px 16px;
+    font-size: $govbr-font-size-down-01;
+    font-weight: $govbr-font-weight-bold;
+    color: $govbr-interactive-dark;
+    text-transform: uppercase;
+  }
+
+  .nav-link {
+    display: flex;
+    align-items: center;
+    min-height: 56px;
+    padding: 8px 16px;
+  }
+}

package/src/scss/components/_form.scss

@@ -36,3 +36,54 @@
 .form-check-input {
   margin-top: calc((var(--bs-body-line-height) * 1em - #{$form-check-input-width}) / 2);
 }
+
+// Switch (GOV.BR DS: Switch): trilho de 30px de altura, botão de 22px
+// (imagem de fundo) a 4px da borda e trilho branco também quando ligado.
+// background-origin é a caixa de padding, então 3px + 1px de borda = 4px.
+.form-switch {
+  min-height: $govbr-switch-height;
+
+  .form-check-input {
+    height: $govbr-switch-height;
+    margin-top: calc((var(--bs-body-line-height) * 1em - #{$govbr-switch-height}) / 2);
+    background-color: $govbr-background;
+    background-position: left 3px center;
+    background-size: $govbr-switch-toggle $govbr-switch-toggle;
+    border-color: $govbr-gray-20;
+
+    &:checked {
+      background-color: $govbr-background;
+      border-color: $govbr-gray-20;
+    }
+
+    // Hover e pressionado: camada na cor do botão (--off/--on) sobre o
+    // trilho, abaixo do botão (segunda imagem de fundo).
+    &:hover:not(:disabled) {
+      background-image: var(--#{$prefix}form-switch-bg), linear-gradient(rgba($govbr-gray-20, $govbr-hover-opacity), rgba($govbr-gray-20, $govbr-hover-opacity));
+      background-position: left 3px center, 0 0;
+      background-size: $govbr-switch-toggle $govbr-switch-toggle, 100% 100%;
+    }
+
+    &:checked:hover:not(:disabled) {
+      background-image: var(--#{$prefix}form-switch-bg), linear-gradient(rgba($govbr-switch-on, $govbr-hover-opacity), rgba($govbr-switch-on, $govbr-hover-opacity));
+      background-position: $form-switch-checked-bg-position, 0 0;
+    }
+
+    // Foco do GOV.BR DS (focus-soft), como nos campos de texto.
+    &:focus-visible {
+      border-color: $govbr-focus;
+      box-shadow: 0 0 0 $govbr-focus-ring-width $govbr-focus;
+    }
+
+    &:focus:not(:focus-visible) {
+      box-shadow: none;
+    }
+  }
+}
+
+[data-bs-theme="dark"] .form-switch .form-check-input {
+  &,
+  &:checked {
+    background-color: $govbr-background;
+  }
+}

package/src/scss/components/_menu.scss

@@ -0,0 +1,67 @@
+// Menu do GOV.BR DS (vendor/govbr-ds-core/src/components/menu) no offcanvas
+// lateral: cabeçalho de 8px com divisor, itens de 16px na cor interativa com
+// ícone de 24px, pastas (acionadas por Collapse) com seta que gira, subnível em
+// fundo cinza-claro recuado 40px e item ativo em --active.
+.offcanvas-start,
+.offcanvas-end {
+  .offcanvas-header {
+    padding: 8px 8px 8px 16px;
+    border-bottom: 1px solid $govbr-gray-20;
+  }
+
+  .list-group-item {
+    display: flex;
+    align-items: center;
+    padding: 16px;
+    color: $govbr-interactive;
+    text-align: left;
+    border-color: $govbr-gray-20;
+
+    > i {
+      flex: 0 0 24px;
+      margin-right: 16px;
+      text-align: center;
+    }
+
+    &.active {
+      color: $govbr-color-dark;
+      background-color: $govbr-active;
+      border-color: $govbr-gray-20;
+    }
+  }
+
+  // Pasta: seta para baixo à direita; gira quando aberta.
+  .list-group-item[data-bs-toggle="collapse"]::after {
+    flex: 0 0 16px;
+    height: 16px;
+    margin-left: auto;
+    content: "";
+    background-color: currentcolor;
+    mask: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>")) center / 16px no-repeat;
+    transition: transform 0.2s ease-in-out;
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  .list-group-item[data-bs-toggle="collapse"][aria-expanded="true"]::after {
+    transform: rotate(-180deg);
+  }
+
+  // Subnível (--menu-background-submenu): sem divisores entre os itens.
+  .collapse > .list-group,
+  .collapsing > .list-group {
+    background-color: $govbr-gray-2;
+
+    > .list-group-item {
+      padding-left: 40px;
+      background-color: transparent;
+      border-width: 0;
+
+      &.active {
+        background-color: $govbr-active;
+      }
+    }
+  }
+}

package/src/scss/components/_navbar.scss

@@ -0,0 +1,125 @@
+// Navbar como o Header do GOV.BR DS (vendor/govbr-ds-core/src/components/header).
+// A estrutura, os breakpoints e os plugins continuam os do Bootstrap; o Header
+// completo é uma composição (ver docs/exemplos/admin.html):
+//   linha de cima: logo, .vr e assinatura (.navbar-text); à direita, botões
+//     circulares (.btn.btn-link.rounded-circle) com dropdown e o "Entrar"
+//     (.btn.btn-light.btn-sm);
+//   linha de baixo: acionador do menu, título (.navbar-brand) com subtítulo
+//     (.navbar-text logo depois) e a busca (form[role="search"]).
+.navbar {
+  box-shadow: $govbr-shadow-sm;
+}
+
+// Título (--header-title-size): 14px no celular, 20,16px a partir de sm e
+// 24,19px a partir do lg do GOV.BR DS (1280px; aqui o xl do Bootstrap, 1200px).
+.navbar-brand {
+  font-weight: normal;
+}
+
+@include media-breakpoint-up(sm) {
+  .navbar-brand {
+    font-size: $govbr-font-size-up-02;
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .navbar-brand {
+    font-size: $govbr-font-size-up-03;
+  }
+}
+
+// Assinatura e subtítulo no texto padrão, não na cor dos links.
+.navbar-text {
+  color: var(--#{$prefix}body-color);
+}
+
+// Subtítulo (--header-subtitle-size): logo abaixo do título, em peso médio;
+// oculto no celular, 11,66px a partir de sm e 14px a partir do xl.
+.navbar-brand + .navbar-text {
+  display: none;
+  padding: 4px 0 0;
+  font-size: $govbr-font-size-down-01;
+  font-weight: $govbr-font-weight-medium;
+}
+
+@include media-breakpoint-up(sm) {
+  .navbar-brand + .navbar-text {
+    display: block;
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .navbar-brand + .navbar-text {
+    font-size: $govbr-font-size-base;
+  }
+}
+
+.navbar-toggler {
+  border: 0;
+}
+
+.navbar-nav .nav-link {
+  border-radius: $govbr-button-radius;
+
+  &.active {
+    font-weight: $govbr-font-weight-semibold;
+  }
+}
+
+.navbar-nav .nav-link:hover:not(.disabled),
+.navbar-toggler:hover {
+  @include govbr-hover;
+}
+
+[data-bs-theme="dark"] .navbar-nav .nav-link:hover:not(.disabled),
+[data-bs-theme="dark"] .navbar-toggler:hover,
+[data-bs-theme="dark"].navbar .navbar-toggler:hover {
+  @include govbr-hover($govbr-interactive-dark);
+}
+
+// "Entrar" (Sign-in do GOV.BR DS): pílula de fundo cinza-claro com texto e
+// ícone na cor interativa, 16,8px.
+.navbar .btn-light {
+  --#{$prefix}btn-bg: #{$govbr-gray-2};
+  --#{$prefix}btn-color: #{$govbr-interactive};
+  --#{$prefix}btn-hover-bg: #{$govbr-gray-2};
+  --#{$prefix}btn-hover-color: #{$govbr-interactive};
+  --#{$prefix}btn-active-bg: #{$govbr-gray-2};
+  --#{$prefix}btn-active-color: #{$govbr-active};
+  gap: 8px;
+  padding-top: 0;
+  padding-bottom: 0;
+  font-size: $govbr-font-size-up-01;
+
+  &:hover {
+    @include govbr-hover;
+  }
+}
+
+// Busca do Header: campo de 40px com fundo cinza-claro, sem borda visível e
+// espaço à direita para o botão circular de pesquisa.
+.navbar [role="search"] {
+  position: relative;
+
+  .form-control {
+    height: $govbr-button-height-medium;
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-right: $govbr-button-height-medium;
+    font-size: $govbr-font-size-up-01;
+    font-weight: $govbr-font-weight-medium;
+    background-color: $govbr-gray-2;
+    border-color: transparent;
+
+    &::placeholder {
+      font-style: italic;
+    }
+  }
+
+  .btn.rounded-circle {
+    position: absolute;
+    top: 50%;
+    right: 4px;
+    transform: translateY(-50%);
+  }
+}

package/src/scss/index.scss

@@ -36,3 +36,8 @@
 @import "components/toast";
 @import "components/modal";
 @import "components/carousel";
+@import "components/divider";
+@import "components/navbar";
+@import "components/menu";
+@import "components/footer";
+@import "components/dark";