@abrasileirado/dsgovbr-bootstraped 0.8.0 → 0.10.0

package/package.json

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

@@ -349,3 +349,31 @@ $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

@@ -139,3 +139,16 @@ $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
+
+// Sombras grandes: vendor/govbr-ds-core/src/partial/scss/configs/_elevation.scss
+// ($shadow-lg e $shadow-lg-up: offset-lg / offset-lg-n, blur-lg, secondary-09 a opacity-xs).
+$govbr-shadow-lg: 0 6px 6px rgba(0, 0, 0, 0.16) !default;     // skiplink
+$govbr-shadow-lg-up: 0 -6px 6px rgba(0, 0, 0, 0.16) !default; // cookiebar

package/src/scss/components/_button.scss

@@ -68,3 +68,44 @@
 .btn-link.rounded-circle:hover {
   @include govbr-hover;
 }
+
+// Sign-in do GOV.BR DS (vendor/govbr-ds-core/src/components/signin): .btn-light
+// vira a pílula de fundo cinza-claro (--gray-2) com texto e ícone na cor
+// interativa, 16px de respiro lateral e imagem de até 20px ("Entrar com
+// gov.br"). No modo escuro, fundo --background-dark e texto --interactive-dark.
+.btn-light {
+  --#{$prefix}btn-bg: #{$govbr-gray-2};
+  --#{$prefix}btn-color: #{$govbr-interactive};
+  --#{$prefix}btn-border-color: transparent;
+  --#{$prefix}btn-hover-bg: #{$govbr-gray-2};
+  --#{$prefix}btn-hover-color: #{$govbr-interactive};
+  --#{$prefix}btn-hover-border-color: transparent;
+  --#{$prefix}btn-active-bg: #{$govbr-gray-2};
+  --#{$prefix}btn-active-color: #{$govbr-active};
+  --#{$prefix}btn-active-border-color: transparent;
+  --#{$prefix}btn-padding-x: 16px;
+  gap: 8px;
+  padding-top: 0;
+  padding-bottom: 0;
+
+  &:hover {
+    @include govbr-hover;
+  }
+
+  img {
+    max-height: 20px;
+  }
+}
+
+[data-bs-theme="dark"] .btn-light {
+  --#{$prefix}btn-bg: #{$govbr-background-dark};
+  --#{$prefix}btn-color: #{$govbr-interactive-dark};
+  --#{$prefix}btn-hover-bg: #{$govbr-background-dark};
+  --#{$prefix}btn-hover-color: #{$govbr-interactive-dark};
+  --#{$prefix}btn-active-bg: #{$govbr-background-dark};
+  --#{$prefix}btn-active-color: #{$govbr-color-dark};
+
+  &:hover {
+    @include govbr-hover($govbr-interactive-dark);
+  }
+}

package/src/scss/components/_cookiebar.scss

@@ -0,0 +1,7 @@
+// Cookiebar do GOV.BR DS (vendor/govbr-ds-core/src/components/cookiebar):
+// composição com .offcanvas-bottom (ver componentes/auxiliares.html). O
+// painel inferior ganha a sombra para cima do cookiebar no lugar da borda.
+.offcanvas-bottom {
+  border-top: 0;
+  box-shadow: $govbr-shadow-lg-up;
+}

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/_navbar.scss

@@ -77,24 +77,7 @@
   @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;
-  }
-}
+// O "Entrar" (.btn-light) vem de components/_button.scss (Sign-in).
 
 // 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.

package/src/scss/components/_skiplink.scss

@@ -0,0 +1,25 @@
+// Skiplink do GOV.BR DS (vendor/govbr-ds-core/src/components/skiplink):
+// .visually-hidden-focusable, ao receber foco, aparece fixo no topo, a 16px
+// da esquerda, com fundo, sombra grande, largura mínima de 300px e itens de
+// 56px. Um <nav class="visually-hidden-focusable"> com vários links aparece
+// inteiro, em linha (variante "full" do GOV.BR DS).
+.visually-hidden-focusable:focus,
+.visually-hidden-focusable:focus-within {
+  position: fixed;
+  top: 0;
+  left: 16px; // --skiplink-margin
+  z-index: $zindex-toast + 10;
+  display: inline-flex;
+  min-width: 300px; // --skiplink-min-width
+  background-color: var(--#{$prefix}body-bg);
+  box-shadow: $govbr-shadow-lg;
+}
+
+a.visually-hidden-focusable,
+.visually-hidden-focusable a {
+  display: inline-flex;
+  align-items: center;
+  min-height: 56px;
+  padding: 8px 16px;
+  white-space: nowrap;
+}

package/src/scss/index.scss

@@ -40,4 +40,6 @@
 @import "components/navbar";
 @import "components/menu";
 @import "components/footer";
+@import "components/skiplink";
+@import "components/cookiebar";
 @import "components/dark";