@abrasileirado/dsgovbr-bootstraped 0.8.0 → 0.9.0

package/package.json

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

@@ -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,11 @@ $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/_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;
+  }
+}