@abrasileirado/dsgovbr-bootstraped 0.6.0 → 0.7.0

package/package.json

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

@@ -176,3 +176,135 @@ $card-cap-bg: transparent !default;
 // definir suas variáveis (mesmo motivo do $btn-border-radius acima). 1rem é
 // o próprio valor padrão de $spacer no Bootstrap.
 $card-cap-padding-y: 1rem !default; // GOV.BR DS usa o spacer inteiro (16px), não a metade
+
+// --- Issue #43: componentes do catálogo (referências em src/scss/components/) ---
+
+// Foco: o anel translúcido (box-shadow) do Bootstrap sai destes componentes;
+// o contorno tracejado dourado vem de components/_focus.scss.
+$accordion-button-focus-box-shadow: none !default;
+$nav-link-focus-box-shadow: none !default;
+$btn-close-focus-shadow: none !default;
+$navbar-toggler-focus-width: 0 !default;
+
+// Accordion (GOV.BR DS: Accordion) — cabeçalho sem fundo, texto e ícone no
+// azul interativo, divisores cinza entre os itens, sem raio.
+$accordion-border-color: $govbr-gray-20 !default;
+$accordion-border-radius: 0 !default;
+$accordion-inner-border-radius: 0 !default;
+$accordion-button-padding-y: 16px !default;     // spacing-scale-2x
+$accordion-button-padding-x: 12px !default;     // margem do ícone: spacing-scale-baseh
+$accordion-button-color: $govbr-interactive !default;
+$accordion-button-bg: transparent !default;
+$accordion-button-active-color: $govbr-interactive !default;
+$accordion-button-active-bg: transparent !default;
+$accordion-icon-color: $govbr-interactive !default;
+$accordion-icon-active-color: $govbr-interactive !default;
+
+// Breadcrumb (GOV.BR DS: Breadcrumb) — fonte menor, peso médio, chevron cinza.
+$breadcrumb-font-size: $govbr-font-size-down-01 !default;
+$breadcrumb-divider: quote("\203A") !default;
+$breadcrumb-divider-color: $govbr-gray-40 !default;
+$breadcrumb-active-color: $govbr-gray-80 !default;
+$breadcrumb-item-padding-x: 8px !default;      // spacing-scale-base
+
+// Botão de fechar (GOV.BR DS: Button circular, ícone interativo, 40px).
+$btn-close-width: 16px !default;
+$btn-close-height: 16px !default;
+$btn-close-padding-x: 12px !default;           // 16 + 2 x 12 = 40px
+$btn-close-padding-y: 12px !default;
+$btn-close-color: $govbr-interactive !default;
+$btn-close-opacity: 1 !default;
+$btn-close-hover-opacity: 1 !default;
+$btn-close-disabled-opacity: 0.45 !default;    // --disabled do GOV.BR DS
+
+// List group (GOV.BR DS: List/Item) — itens sem moldura, divisores, selecionado.
+$list-group-border-color: $govbr-gray-20 !default;
+$list-group-border-radius: 0 !default;
+$list-group-item-padding-y: 8px !default;      // --item-padding-y
+$list-group-item-padding-x: 16px !default;     // --item-padding-x
+$list-group-active-bg: $govbr-selected !default;
+$list-group-active-border-color: $govbr-selected !default;
+$list-group-hover-bg: transparent !default;
+$list-group-action-color: $govbr-gray-80 !default;
+$list-group-action-hover-color: $govbr-gray-80 !default;
+$list-group-action-active-bg: transparent !default;
+
+// Dropdown (GOV.BR DS: dropdown + List) — sem borda, sombra, itens de 8px.
+$dropdown-border-width: 0 !default;
+$dropdown-border-radius: 0 !default;
+$dropdown-box-shadow: $govbr-shadow-sm !default;
+$dropdown-padding-y: 0 !default;
+$dropdown-item-padding-y: 8px !default;
+$dropdown-item-padding-x: 16px !default;
+$dropdown-link-color: $govbr-gray-80 !default;
+$dropdown-link-hover-bg: transparent !default;
+$dropdown-link-active-bg: $govbr-selected !default;
+$dropdown-divider-bg: $govbr-gray-20 !default;
+$dropdown-divider-margin-y: 0 !default;
+
+// Tooltip (GOV.BR DS: Tooltip) — fundo azul informativo, texto branco.
+$tooltip-bg: $govbr-info !default;
+$tooltip-color: $govbr-background !default;
+$tooltip-border-radius: $govbr-radius-sm !default;
+$tooltip-font-size: $govbr-font-size-down-01 !default;
+$tooltip-padding-y: 16px !default;             // spacing-scale-2x
+$tooltip-padding-x: 16px !default;
+$tooltip-max-width: $govbr-tooltip-max-width !default;
+$tooltip-opacity: 1 !default;
+
+// Popover (GOV.BR DS: Tooltip com conteúdo rico, até 320px).
+$popover-bg: $govbr-info !default;
+$popover-border-width: 0 !default;
+$popover-border-radius: $govbr-radius-sm !default;
+$popover-box-shadow: $govbr-tooltip-shadow !default;
+$popover-max-width: 320px !default;
+$popover-header-bg: $govbr-info !default;
+$popover-header-color: $govbr-background !default;
+$popover-header-padding-y: 16px !default;
+$popover-header-padding-x: 16px !default;
+$popover-body-color: $govbr-background !default;
+$popover-body-padding-y: 16px !default;
+$popover-body-padding-x: 16px !default;
+
+// Spinner (GOV.BR DS: Loading indeterminado) — 44px/4px e 24px/2px.
+$spinner-width: $govbr-loading-md !default;
+$spinner-height: $govbr-loading-md !default;
+$spinner-border-width: 4px !default;
+$spinner-width-sm: $govbr-loading-sm !default;
+$spinner-height-sm: $govbr-loading-sm !default;
+$spinner-border-width-sm: 2px !default;
+
+// Progress (sem equivalente linear) — trilho cinza do Loading determinado.
+$progress-bg: $govbr-gray-20 !default;
+$progress-border-radius: 0 !default;
+
+// Toast (GOV.BR DS: Message toast) — opaco, sem borda, com sombra.
+$toast-background-color: $govbr-background !default;
+$toast-border-width: 0 !default;
+$toast-border-radius: 0 !default;
+$toast-box-shadow: $govbr-shadow-sm !default;
+$toast-header-background-color: $govbr-background !default;
+$toast-header-color: $govbr-gray-80 !default;
+$toast-header-border-color: $govbr-gray-20 !default;
+
+// Modal e offcanvas (GOV.BR DS: Modal + Scrim).
+$modal-md: $govbr-modal-width !default;
+$modal-content-border-width: 0 !default;
+$modal-content-border-radius: 0 !default;
+$modal-content-box-shadow-xs: $govbr-shadow-sm !default;
+$modal-content-box-shadow-sm-up: $govbr-shadow-sm !default;
+$modal-header-border-width: 0 !default;
+$modal-footer-border-width: 0 !default;
+$modal-header-padding: 16px 16px 0 !default;
+$modal-inner-padding: 16px !default;
+$modal-backdrop-bg: #000 !default;
+$modal-backdrop-opacity: $govbr-scrim-opacity !default;
+$modal-title-line-height: 1.25 !default;
+$offcanvas-border-width: 0 !default;
+$offcanvas-box-shadow: $govbr-shadow-sm !default;
+
+// Carousel (GOV.BR DS: Carousel) — indicadores em ponto.
+$carousel-indicator-width: 8px !default;
+$carousel-indicator-height: 8px !default;
+$carousel-indicator-spacer: 4px !default;
+$carousel-indicator-opacity: 0.45 !default;

package/src/scss/_mixins.scss

@@ -0,0 +1,18 @@
+// Mixins de estado do GOV.BR DS reaproveitados pelos adaptadores.
+
+// Hover: camada da cor interativa a 16% sobre o fundo
+// (vendor/govbr-ds-core/src/partial/scss/mixins/_hover.scss).
+@mixin govbr-hover($color: $govbr-interactive) {
+  background-image: linear-gradient(rgba($color, $govbr-hover-opacity), rgba($color, $govbr-hover-opacity));
+}
+
+// Foco por teclado: contorno tracejado dourado
+// (vendor/govbr-ds-core/src/partial/scss/mixins/_focus.scss). Elementos que
+// ocupam a largura toda (itens de lista, abas, cabeçalho do accordion) usam
+// deslocamento negativo, como a Tab do GOV.BR DS, para o contorno não invadir
+// o vizinho.
+@mixin govbr-focus($offset: $govbr-focus-offset) {
+  outline: $govbr-focus-width dashed $govbr-focus;
+  outline-offset: $offset;
+  box-shadow: none;
+}

package/src/scss/_tokens.scss

@@ -105,3 +105,31 @@ $govbr-button-height-small: 32px !default;    // --button-small
 $govbr-button-height-medium: 40px !default;   // --button-medium (padrão)
 $govbr-button-height-large: 48px !default;    // --button-large
 $govbr-button-padding-x: 24px !default;       // padding: 0 var(--spacing-scale-3x)
+
+// --- Issue #43: componentes do catálogo ---
+
+// --selected: var(--blue-warm-vivid-50) — item selecionado (List/Item, dropdown)
+// vendor/govbr-ds-core/.../configs/colors/_blue-warm-vivid.scss
+$govbr-selected: #2670e8 !default;
+
+// Escala tipográfica: vendor/govbr-ds-core/src/partial/scss/configs/_typography.scss
+// ($font-size-scale-base * 0.833 / 1.2 / 1.44, com a base de 14px)
+$govbr-font-size-down-01: 11.662px !default;
+$govbr-font-size-up-01: 16.8px !default;
+$govbr-font-size-up-02: 20.16px !default;
+$govbr-font-weight-bold: 700 !default; // $font-weight-bold
+
+// Scrim (fundo de modal e menu): $overlay-scrim = secondary-09 (#000) a
+// $opacity-md — vendor/govbr-ds-core/src/partial/scss/configs/_elevation.scss
+$govbr-scrim-opacity: 0.45 !default;
+
+// Tooltip: vendor/govbr-ds-core/src/components/tooltip/_mixins.scss (tooltip-configs)
+$govbr-tooltip-shadow: 0 3px 6px rgba(0, 0, 0, 0.16) !default;
+$govbr-tooltip-max-width: 240px !default;
+
+// Loading indeterminado: vendor/govbr-ds-core/src/components/loading/_mixins.scss
+$govbr-loading-sm: 24px !default; // --loading-indetermined-diameter-sm (borda 2px)
+$govbr-loading-md: 44px !default; // --loading-indetermined-diameter-md (borda 4px)
+
+// Modal: vendor/govbr-ds-core/src/components/modal/_mixins.scss (--modal-medium)
+$govbr-modal-width: 500px !default;

package/src/scss/components/_accordion.scss

@@ -0,0 +1,33 @@
+// Accordion do GOV.BR DS (vendor/govbr-ds-core/src/components/accordion/_accordion.scss):
+// só divisores horizontais, cabeçalho sem fundo em azul interativo e 16,8px,
+// ícone à esquerda do título, item aberto em semi-bold, hover em camada azul.
+.accordion-item {
+  border-left: 0;
+  border-right: 0;
+}
+
+.accordion-button {
+  font-size: $govbr-font-size-up-01;
+
+  // a seta do Bootstrap é um ::after; order: -1 a leva para antes do texto
+  &::after {
+    order: -1;
+    margin-left: 0;
+    margin-right: 16px; // spacing-scale-2x
+  }
+
+  &:not(.collapsed) {
+    font-weight: $govbr-font-weight-semibold;
+    box-shadow: none;
+  }
+
+  &:hover {
+    @include govbr-hover;
+  }
+}
+
+.accordion-body {
+  // .content: margem de spacing-scale-base e padding 8px 64px 16px
+  padding: 8px 64px 16px;
+  margin: 0 8px;
+}

package/src/scss/components/_breadcrumb.scss

@@ -0,0 +1,18 @@
+// Breadcrumb do GOV.BR DS (vendor/govbr-ds-core/src/components/breadcrumb/_mixins.scss):
+// peso médio, chevron como divisor e ícone de casa no primeiro nível. O ícone
+// é uma máscara SVG (sem fonte de ícones), na cor do link.
+.breadcrumb {
+  font-weight: $govbr-font-weight-medium;
+  align-items: center;
+}
+
+.breadcrumb-item:first-child > a::before {
+  content: "";
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  margin-right: 4px;
+  vertical-align: -0.125em;
+  background-color: currentcolor;
+  mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cpath d=%22M8 1.5 1 7.25V8h1.5v6.5h4.25V10h2.5v4.5h4.25V8H15v-.75z%22/%3E%3C/svg%3E") center / contain no-repeat;
+}

package/src/scss/components/_carousel.scss

@@ -0,0 +1,16 @@
+// Carousel do GOV.BR DS: indicadores em ponto e controles em círculo de 40px
+// sobre fundo escurecido (Scrim), para ficarem visíveis sobre qualquer imagem.
+.carousel-indicators [data-bs-target] {
+  border-radius: 50%;
+  border-top: 0;
+  border-bottom: 0;
+}
+
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, $govbr-scrim-opacity);
+  background-size: 16px;
+}

package/src/scss/components/_close.scss

@@ -0,0 +1,9 @@
+// Botão de fechar como o Button circular do GOV.BR DS: 40px (16px de ícone +
+// 12px de padding), ícone azul interativo, hover em camada azul.
+.btn-close {
+  border-radius: 50%;
+
+  &:hover:not(:disabled) {
+    background-color: rgba($govbr-interactive, $govbr-hover-opacity);
+  }
+}

package/src/scss/components/_dropdown.scss

@@ -0,0 +1,9 @@
+// Dropdown como a List do GOV.BR DS: sombra suave sem borda, itens de 8px x
+// 16px, hover em camada azul, selecionado em --selected.
+.dropdown-menu {
+  box-shadow: $govbr-shadow-sm;
+}
+
+.dropdown-item:hover:not(.active):not(.disabled):not(:disabled) {
+  @include govbr-hover;
+}

package/src/scss/components/_focus.scss

@@ -0,0 +1,23 @@
+// Foco tracejado dourado do GOV.BR DS em todos os componentes focáveis que
+// não têm adaptador próprio (botão, campos e paginação já tratam o foco).
+// Mesma especificidade das regras :focus do Bootstrap, declaradas depois,
+// então estas vencem sem !important.
+a:focus-visible,
+.btn-close:focus-visible,
+.navbar-toggler:focus-visible,
+.navbar-brand:focus-visible,
+.carousel-control-prev:focus-visible,
+.carousel-control-next:focus-visible,
+.carousel-indicators [data-bs-target]:focus-visible,
+[tabindex]:not(.form-control):not(.form-select):not(.form-check-input):focus-visible {
+  @include govbr-focus;
+}
+
+.accordion-button:focus-visible,
+.nav-link:focus-visible,
+.list-group-item-action:focus-visible,
+.dropdown-item:focus-visible {
+  @include govbr-focus(-$govbr-focus-width);
+  position: relative;
+  z-index: 3;
+}

package/src/scss/components/_list-group.scss

@@ -0,0 +1,15 @@
+// List/Item do GOV.BR DS (vendor/govbr-ds-core/src/components/item, list):
+// itens sem moldura lateral, separados por divisor, texto padrão, hover em
+// camada azul e item selecionado em --selected.
+.list-group:not(.list-group-horizontal) > .list-group-item {
+  border-left: 0;
+  border-right: 0;
+}
+
+.list-group-item-action {
+  color: $govbr-gray-80;
+
+  &:hover:not(.active):not(:disabled):not(.disabled) {
+    @include govbr-hover;
+  }
+}

package/src/scss/components/_modal.scss

@@ -0,0 +1,24 @@
+// Modal e offcanvas do GOV.BR DS (vendor/govbr-ds-core/src/components/modal):
+// sem raio nem borda, sombra suave, título de 16,8px em negrito, ações
+// alinhadas à direita sem divisor, fundo escurecido como o Scrim (preto a 45%).
+.modal-title,
+.offcanvas-title {
+  font-size: $govbr-font-size-up-01 !important; // vence utilitários .fs-* no título
+  font-weight: $govbr-font-weight-bold;
+}
+
+.modal-header + .modal-body {
+  padding-top: 8px;
+}
+
+.modal-footer {
+  gap: 16px;
+
+  > * {
+    margin: 0;
+  }
+}
+
+.offcanvas {
+  box-shadow: $govbr-shadow-sm;
+}

package/src/scss/components/_nav.scss

@@ -0,0 +1,46 @@
+// Tab do GOV.BR DS (vendor/govbr-ds-core/src/components/tab/_mixins.scss):
+// sem moldura, linha de 1px sob a lista, aba de 20,16px em peso médio com
+// sublinhado de 4px; a ativa fica em --active. Vale para .nav-tabs e .nav-underline.
+.nav-tabs,
+.nav-underline {
+  --bs-nav-tabs-border-radius: 0;
+  --bs-nav-underline-gap: 0;
+  border-bottom: 1px solid $govbr-gray-20;
+  gap: 0;
+
+  .nav-link {
+    border: 0;
+    border-bottom: 4px solid transparent;
+    border-radius: 0;
+    margin-bottom: -1px;
+    padding: 16px 24px; // --tab-medium / --tab-padding
+    color: $govbr-gray-80;
+    font-size: $govbr-font-size-up-02;
+    font-weight: $govbr-font-weight-medium;
+    line-height: 1;
+    background-color: transparent;
+
+    &:hover:not(.active):not(:disabled):not(.disabled) {
+      @include govbr-hover($govbr-gray-80);
+      border-bottom-color: transparent;
+    }
+
+    &.disabled,
+    &:disabled {
+      color: $govbr-gray-40;
+    }
+  }
+
+  .nav-link.active,
+  .nav-item.show .nav-link {
+    color: $govbr-active;
+    background-color: transparent;
+    border-bottom-color: $govbr-active;
+    font-weight: $govbr-font-weight-medium;
+  }
+}
+
+// Pílulas não existem no GOV.BR DS (extensão): hover em camada azul.
+.nav-pills .nav-link:hover:not(.active) {
+  @include govbr-hover;
+}

package/src/scss/components/_spinner.scss

@@ -0,0 +1,12 @@
+// Loading indeterminado do GOV.BR DS: arco azul interativo (44px/4px e
+// 24px/2px, ver _bootstrap-settings.scss). Dentro de botões o spinner segue a
+// cor do texto do botão, como no Bootstrap.
+.spinner-border,
+.spinner-grow {
+  color: $govbr-interactive;
+}
+
+.btn .spinner-border,
+.btn .spinner-grow {
+  color: inherit;
+}

package/src/scss/components/_toast.scss

@@ -0,0 +1,5 @@
+// Toast como a Message do GOV.BR DS: superfície opaca com sombra (variáveis
+// em _bootstrap-settings.scss) e título do cabeçalho em semi-bold.
+.toast-header strong {
+  font-weight: $govbr-font-weight-semibold;
+}

package/src/scss/components/_tooltip.scss

@@ -0,0 +1,16 @@
+// Tooltip e popover do GOV.BR DS (vendor/govbr-ds-core/src/components/tooltip):
+// fundo azul informativo, texto branco em peso médio, raio 4px e sombra.
+.tooltip-inner {
+  font-weight: $govbr-font-weight-medium;
+  box-shadow: $govbr-tooltip-shadow;
+  text-align: left;
+}
+
+.popover-header {
+  font-weight: $govbr-font-weight-semibold;
+  padding-bottom: 0;
+}
+
+.popover-body {
+  font-weight: $govbr-font-weight-medium;
+}

package/src/scss/index.scss

@@ -16,9 +16,23 @@
 
 // Ajustes que as variáveis de tema, sozinhas, não resolvem — um adaptador
 // por componente (ver docs/desenvolvimento.md).
+@import "mixins";
+
 @import "components/alert";
 @import "components/badge";
 @import "components/pagination";
 @import "components/button";
 @import "components/card";
 @import "components/form";
+@import "components/focus";
+@import "components/accordion";
+@import "components/breadcrumb";
+@import "components/close";
+@import "components/list-group";
+@import "components/nav";
+@import "components/dropdown";
+@import "components/tooltip";
+@import "components/spinner";
+@import "components/toast";
+@import "components/modal";
+@import "components/carousel";