@gyramais/gyra-design 0.2.59 → 0.2.61

package/dist/index.css

@@ -741,6 +741,9 @@ video {
 .max-w-full {
   max-width: 100%;
 }
+.flex-shrink {
+  flex-shrink: 1;
+}
 .shrink-0 {
   flex-shrink: 0;
 }
@@ -1244,6 +1247,10 @@ video {
   --status-neutral-text: var(--color-text-secondary);
   --status-neutral-bg:   rgba(142,142,147,0.18);
 
+  /* Texto das linhas do rodape do menu (Guide), o mesmo hex do Menubar.
+     Tema escuro: sobrescrever (as stories do Guide usam #AEAEB2). */
+  --gyramais-guide-nav-text: #4F5762;
+
   /* ---- Type ---------------------------------------------------------- */
   /* Inter = UI workhorse (tnum/cv11/ss01 for credit dashboards).
      Lexend = display/hero. IBM Plex Mono = CPF/CNPJ/IDs/inline values. */
@@ -6477,7 +6484,15 @@ h6 {
 /* Guide: "Primeiros passos" e "Novidades" no rodape do menu lateral, mais o
    bloco de lista curta (SiderList) e o corpo de escolha (GuideChoice).
 
-   Cores so por token: o componente acompanha o tema que o app definir. Escala
+   Linhas do rodape (GuideLauncher, SiderList) copiam a opcao do Menubar
+   (src/components/Menubar/index.css) como o toolbox a usa no menu lateral:
+   raio 4, padding 6, icone 18, rotulo 12 semibold em #4F5762, hover e ativo
+   em --dark-button-color com texto --primary-button-color. O hex do texto e
+   o mesmo do Menubar: sem token equivalente, repetir aqui e o que mantem as
+   duas familias identicas sem mexer no Menubar global. Um tema pode trocar
+   esse texto por `--gyramais-guide-nav-text`.
+
+   Demais cores so por token: o componente acompanha o tema do app. Escala
    da casa: 12 semibold nos itens do menu (como .menu-item-label do toolbox),
    13 nos titulos de item, 11 em meta e contadores; espacamento em multiplos
    de 2 e 4; raio 8 nos itens e 12 nos cartoes.
@@ -6529,6 +6544,13 @@ h6 {
   border-width: 2px;
   border-color: var(--color-border-focus);
 }
+.gyramais-guide-launcher:focus-visible::after,
+.gyramais-sider-list-item:focus-visible::after,
+.gyramais-sider-list-action:focus-visible::after,
+.gyramais-sider-list-collapsed-action:focus-visible::after,
+.gyramais-sider-list-more:focus-visible::after {
+  border-radius: 6px;
+}
 .gyramais-guide-choice-option:focus-visible::after {
   inset: -3px;
   border-radius: calc(var(--radius-lg) + 3px);
@@ -6540,25 +6562,25 @@ h6 {
   position: relative;
   margin: 0px;
   display: flex;
-  min-height: 32px;
+  min-height: 30px;
   width: 100%;
   cursor: pointer;
   align-items: center;
   gap: 0.5rem;
-  border-radius: var(--radius-md);
+  border-radius: 4px;
   border-width: 0px;
   background-color: transparent;
   padding: 6px;
   text-align: left;
-  color: var(--color-text-secondary);
+  color: var(--gyramais-guide-nav-text,#4F5762);
   transition:
-    background-color var(--duration-fast) var(--ease-default),
-    color var(--duration-fast) var(--ease-default);
+    background-color 300ms,
+    color 300ms;
 }
 .gyramais-guide-launcher:hover,
 .gyramais-guide-launcher.is-active {
-  background-color: var(--color-surface-active);
-  color: var(--color-text-primary);
+  background-color: var(--dark-button-color);
+  color: var(--primary-button-color);
 }
 .gyramais-guide-launcher.is-collapsed {
   justify-content: center;
@@ -6569,18 +6591,24 @@ h6 {
 .gyramais-guide-launcher-icon {
   position: relative;
   display: flex;
-  height: 1.25rem;
-  width: 1.25rem;
+  height: 18px;
+  width: 18px;
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  font-size: 20px;
+  font-size: 18px;
   line-height: 1;
 }
 .gyramais-guide-launcher-icon > svg {
   height: 18px;
   width: 18px;
 }
+/* Recolhido sem icone: a inicial do rotulo no lugar do icone. */
+.gyramais-guide-launcher-initial {
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
+}
 
 .gyramais-guide-launcher-label {
   min-width: 0px;
@@ -6597,11 +6625,11 @@ h6 {
   display: inline-flex;
   flex-shrink: 0;
   align-items: center;
-  gap: 5px;
+  gap: 0.25rem;
   font-size: 11px;
   font-weight: 500;
   line-height: 1rem;
-  color: var(--color-text-tertiary);
+  color: var(--color-text-secondary);
   font-variant-numeric: tabular-nums;
   font-feature-settings: "tnum";
 }
@@ -6612,6 +6640,17 @@ h6 {
 .gyramais-guide-ring {
   flex-shrink: 0;
 }
+/* 5/5: disco azul cheio com check, no lugar do anel fechado. */
+.gyramais-guide-ring-done circle {
+  fill: var(--gyra-blue);
+}
+.gyramais-guide-ring-done path {
+  fill: none;
+  stroke: var(--color-text-on-primary);
+  stroke-width: 1.6;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
 .gyramais-guide-ring-track {
   fill: none;
   stroke: var(--color-border-primary);
@@ -6643,38 +6682,18 @@ h6 {
   font-variant-numeric: tabular-nums;
 }
 
-/* Recolhido: indicador preso ao canto do icone, com um aro na cor do menu
-   para descolar do glifo. */
-.gyramais-guide-launcher-dot,
-.gyramais-guide-launcher-mini-count {
+/* Recolhido: ponto de 6px preso ao canto do icone (o numero fica so no
+   Tooltip), com um aro na cor do menu para descolar do glifo. */
+.gyramais-guide-launcher-dot {
   pointer-events: none;
   position: absolute;
-  box-shadow: 0 0 0 2px var(--color-surface-sidebar);
-}
-.gyramais-guide-launcher-dot {
-  top: 5px;
-  right: 5px;
-  height: 7px;
-  width: 7px;
-  border-radius: 9999px;
-  background-color: var(--gyra-blue);
-}
-.gyramais-guide-launcher-mini-count {
-  top: 1px;
-  right: 1px;
-  display: inline-flex;
-  height: 14px;
-  min-width: 14px;
-  align-items: center;
-  justify-content: center;
+  top: -2px;
+  right: -3px;
+  height: 6px;
+  width: 6px;
   border-radius: 9999px;
   background-color: var(--gyra-blue);
-  padding-left: 3px;
-  padding-right: 3px;
-  font-size: 9px;
-  font-weight: 600;
-  line-height: 1;
-  color: var(--color-text-on-primary);
+  box-shadow: 0 0 0 2px var(--color-surface-sidebar);
 }
 
 /* ---- Cartao base (checklist e novidades) ------------------------------- */
@@ -6712,6 +6731,9 @@ h6 {
   flex-direction: column;
   gap: 2px;
 }
+.gyramais-guide-news .gyramais-guide-card-header {
+  align-items: center;
+}
 .gyramais-guide-card-heading.is-inline {
   min-height: 24px;
   flex-direction: row;
@@ -6721,9 +6743,9 @@ h6 {
 .gyramais-guide-card-title {
   margin: 0px;
   white-space: normal;
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 600;
-  line-height: 18px;
+  line-height: 1.25rem;
   color: var(--color-text-primary);
   font-family: var(--font-display);
   letter-spacing: var(--tracking-normal);
@@ -6738,7 +6760,7 @@ h6 {
 }
 .gyramais-guide-card-actions {
   margin-right: -0.25rem;
-  margin-top: -3px;
+  margin-top: -0.25rem;
   display: flex;
   flex-shrink: 0;
   align-items: center;
@@ -6770,7 +6792,7 @@ h6 {
   border-width: 0px;
   background-color: transparent;
   padding: 0px;
-  color: var(--color-text-tertiary);
+  color: var(--color-text-secondary);
   transition:
     background-color var(--duration-fast) var(--ease-default),
     color var(--duration-fast) var(--ease-default);
@@ -6809,6 +6831,23 @@ h6 {
   border-radius: var(--radius-xs);
 }
 
+/* Gancho para quando o cartao mora dentro de um Popover do design system:
+   passe `className="gyramais-guide-popover"` no Popover. O conteudo do
+   Popover tem fundo, padding, largura fixa e sombra propria (com !important);
+   aqui ele vira so o posicionador e a sombra fica no cartao, uma vez so. */
+.gyramais-popover-content.gyramais-guide-popover {
+  width: auto;
+  border-width: 0px;
+  background-color: transparent;
+  padding: 0px;
+  --tw-shadow: 0 0 #0000 !important;
+  --tw-shadow-colored: 0 0 #0000 !important;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
+}
+.gyramais-guide-popover .gyramais-guide-card {
+  box-shadow: var(--shadow-drawer);
+}
+
 /* Menu "Mais opcoes": inline no cartao, sem portal, para herdar o tema. */
 .gyramais-guide-menu {
   position: relative;
@@ -6867,7 +6906,7 @@ h6 {
 .gyramais-guide-progress {
   display: flex;
   width: 100%;
-  gap: 3px;
+  gap: 0.25rem;
 }
 .gyramais-guide-progress-segment {
   height: 0.25rem;
@@ -6886,7 +6925,7 @@ h6 {
   font-size: 11px;
   font-weight: 400;
   line-height: 1rem;
-  color: var(--color-text-tertiary);
+  color: var(--color-text-secondary);
 }
 
 .gyramais-guide-items {
@@ -6948,7 +6987,7 @@ h6 {
   border-radius: 9999px;
   border-width: 1.5px;
   border-style: solid;
-  border-color: var(--color-border-strong);
+  border-color: var(--color-text-tertiary);
   color: var(--color-text-tertiary);
   transition:
     background-color var(--duration-normal) var(--ease-default),
@@ -7006,9 +7045,6 @@ h6 {
   line-height: 18px;
   color: var(--color-text-primary);
 }
-.gyramais-guide-item.is-next .gyramais-guide-item-title {
-  font-weight: 600;
-}
 .gyramais-guide-item-description {
   font-size: 12px;
   font-weight: 400;
@@ -7020,7 +7056,7 @@ h6 {
    animar da esquerda para a direita e acompanhar quebras de linha. */
 .gyramais-guide-item.is-done .gyramais-guide-item-title {
   font-weight: 400;
-  color: var(--color-text-tertiary);
+  color: var(--color-text-secondary);
 }
 .gyramais-guide-item.is-done .gyramais-guide-item-title-text {
   background-image: linear-gradient(currentColor, currentColor);
@@ -7036,7 +7072,7 @@ h6 {
   flex-shrink: 0;
   font-size: 11px;
   line-height: 1rem;
-  color: var(--color-text-tertiary);
+  color: var(--color-text-secondary);
   font-variant-numeric: tabular-nums;
 }
 .gyramais-guide-item-chevron {
@@ -7076,21 +7112,31 @@ h6 {
 .gyramais-guide-checklist-loading {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: 0.5rem;
+  padding-bottom: 6px;
+}
+.gyramais-guide-checklist-loading > .gyramais-guide-progress {
+  box-sizing: border-box;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
-  padding-bottom: 0.75rem;
 }
+/* Mesma grade dos itens: 5 linhas de 30px com 1px entre elas, para o
+   cartao nao pular de altura quando os passos chegam. */
 .gyramais-guide-skeleton-rows {
   display: flex;
   flex-direction: column;
-  gap: 14px;
+  gap: 1px;
+  padding-left: 6px;
+  padding-right: 6px;
   padding-top: 0.25rem;
 }
 .gyramais-guide-skeleton-row {
   display: flex;
+  height: 30px;
   align-items: center;
   gap: 10px;
+  padding-left: 6px;
+  padding-right: 6px;
 }
 
 /* ---- Estado vazio compartilhado ---------------------------------------- */
@@ -7128,7 +7174,7 @@ h6 {
   font-size: 12px;
   font-weight: 400;
   line-height: 1rem;
-  color: var(--color-text-tertiary);
+  color: var(--color-text-secondary);
 }
 .gyramais-guide-empty .gyramais-guide-empty-text {
   padding: 0px;
@@ -7136,21 +7182,6 @@ h6 {
 
 /* ---- GuideNewsList ----------------------------------------------------- */
 
-.gyramais-guide-news-count {
-  display: inline-flex;
-  height: 18px;
-  align-items: center;
-  white-space: nowrap;
-  border-radius: 9999px;
-  background-color: var(--gyra-blue-light);
-  padding-left: 6px;
-  padding-right: 6px;
-  font-size: 11px;
-  font-weight: 500;
-  line-height: 1;
-  color: var(--gyra-blue);
-}
-
 .gyramais-guide-news-items {
   margin: 0px;
   display: flex;
@@ -7162,8 +7193,16 @@ h6 {
   overscroll-behavior: contain;
   padding-left: 6px;
   padding-right: 6px;
-  padding-bottom: 6px;
+  padding-bottom: 1rem;
+  /* O fim da lista esmaece nos ultimos 16px (a folga de baixo): quando ha
+     rolagem, sugere que tem mais; quando nao ha, so apaga o padding. */
+  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
+  mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
   scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+.gyramais-guide-news-items:hover,
+.gyramais-guide-news-items:focus-within {
   scrollbar-color: var(--color-border-primary) transparent;
 }
 .gyramais-guide-news-items::-webkit-scrollbar {
@@ -7171,6 +7210,9 @@ h6 {
 }
 .gyramais-guide-news-items::-webkit-scrollbar-thumb {
   border-radius: 9999px;
+  background-color: transparent;
+}
+.gyramais-guide-news-items:hover::-webkit-scrollbar-thumb {
   background-color: var(--color-border-primary);
 }
 .gyramais-guide-news-items > li {
@@ -7264,7 +7306,7 @@ h6 {
   margin-top: 2px;
   font-size: 11px;
   line-height: 1rem;
-  color: var(--color-text-tertiary);
+  color: var(--color-text-secondary);
   font-variant-numeric: tabular-nums;
 }
 
@@ -7342,8 +7384,8 @@ h6 {
   border-style: solid;
   border-color: var(--color-border-secondary);
   background-color: var(--color-surface-primary);
-  padding-left: 14px;
-  padding-right: 14px;
+  padding-left: 1rem;
+  padding-right: 1rem;
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
   text-align: left;
@@ -7420,7 +7462,7 @@ h6 {
   color: var(--gyra-blue);
 }
 .gyramais-guide-choice-description {
-  font-size: 12.5px;
+  font-size: 13px;
   line-height: 18px;
   color: var(--color-text-secondary);
 }
@@ -7469,26 +7511,26 @@ h6 {
   text-transform: uppercase;
   line-height: 1rem;
   letter-spacing: 0.09em;
-  color: var(--color-text-tertiary);
+  color: var(--color-text-secondary);
 }
 
 .gyramais-sider-list-action {
   position: relative;
   margin: 0px;
   display: inline-flex;
-  height: 1.25rem;
-  width: 1.25rem;
+  height: 1.5rem;
+  width: 1.5rem;
   flex-shrink: 0;
   cursor: pointer;
   align-items: center;
   justify-content: center;
-  border-radius: var(--radius-sm);
+  border-radius: 4px;
   border-width: 0px;
   background-color: transparent;
   padding: 0px;
   font-size: 14px;
   line-height: 1;
-  color: var(--color-text-tertiary);
+  color: var(--color-text-secondary);
   transition:
     background-color var(--duration-fast) var(--ease-default),
     color var(--duration-fast) var(--ease-default);
@@ -7498,37 +7540,38 @@ h6 {
   width: 14px;
 }
 .gyramais-sider-list-action:hover {
-  background-color: var(--color-surface-active);
-  color: var(--color-text-primary);
-}
-.gyramais-sider-list-action:focus-visible::after {
-  border-radius: var(--radius-sm);
+  background-color: var(--dark-button-color);
+  color: var(--primary-button-color);
 }
 
+
 .gyramais-sider-list-collapsed-action {
   position: relative;
   margin: 0px;
   display: flex;
-  height: 2rem;
+  height: 30px;
   width: 100%;
   cursor: pointer;
   align-items: center;
   justify-content: center;
-  border-radius: var(--radius-md);
+  border-radius: 4px;
   border-width: 0px;
   background-color: transparent;
-  padding: 0px;
-  font-size: 20px;
+  padding: 6px;
+  font-size: 18px;
   line-height: 1;
-  color: var(--color-text-secondary);
+  color: var(--gyramais-guide-nav-text,#4F5762);
+  transition:
+    background-color 300ms,
+    color 300ms;
 }
 .gyramais-sider-list-collapsed-action > svg {
   height: 18px;
   width: 18px;
 }
 .gyramais-sider-list-collapsed-action:hover {
-  background-color: var(--color-surface-active);
-  color: var(--color-text-primary);
+  background-color: var(--dark-button-color);
+  color: var(--primary-button-color);
 }
 
 .gyramais-sider-list-items {
@@ -7536,7 +7579,7 @@ h6 {
   display: flex;
   list-style-type: none;
   flex-direction: column;
-  gap: 1px;
+  gap: 0.5rem;
   padding: 0px;
 }
 .gyramais-sider-list-items > li {
@@ -7548,29 +7591,25 @@ h6 {
   position: relative;
   margin: 0px;
   display: flex;
-  height: 1.75rem;
+  min-height: 30px;
   width: 100%;
   cursor: pointer;
   align-items: center;
   gap: 0.5rem;
-  border-radius: var(--radius-md);
+  border-radius: 4px;
   border-width: 0px;
   background-color: transparent;
-  padding-left: 6px;
-  padding-right: 6px;
+  padding: 6px;
   text-align: left;
-  color: var(--color-text-secondary);
+  color: var(--gyramais-guide-nav-text,#4F5762);
   transition:
-    background-color var(--duration-fast) var(--ease-default),
-    color var(--duration-fast) var(--ease-default);
-}
-.gyramais-sider-list-item:hover {
-  background-color: var(--color-surface-active);
-  color: var(--color-text-primary);
+    background-color 300ms,
+    color 300ms;
 }
+.gyramais-sider-list-item:hover,
 .gyramais-sider-list-item.is-active {
-  background-color: var(--color-surface-active);
-  color: var(--color-text-primary);
+  background-color: var(--dark-button-color);
+  color: var(--primary-button-color);
 }
 .gyramais-sider-list-item-icon {
   display: flex;
@@ -7581,7 +7620,7 @@ h6 {
   justify-content: center;
   font-size: 14px;
   line-height: 1;
-  color: var(--color-text-tertiary);
+  color: currentColor;
 }
 .gyramais-sider-list-item-icon > svg {
   height: 14px;
@@ -7593,25 +7632,25 @@ h6 {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 12.5px;
-  font-weight: 400;
+  font-size: 12px;
+  font-weight: 500;
   line-height: 1rem;
 }
 .gyramais-sider-list-item.is-active .gyramais-sider-list-item-label {
-  font-weight: 500;
+  font-weight: 600;
 }
 
 .gyramais-sider-list-more {
   position: relative;
   margin: 0px;
-  margin-top: 2px;
+  margin-top: 0.25rem;
   display: inline-flex;
   height: 1.5rem;
   cursor: pointer;
   align-items: center;
   gap: 0.25rem;
   align-self: flex-start;
-  border-radius: var(--radius-md);
+  border-radius: 4px;
   border-width: 0px;
   background-color: transparent;
   padding-left: 6px;
@@ -7619,21 +7658,24 @@ h6 {
   font-size: 12px;
   font-weight: 500;
   line-height: 1rem;
-  color: var(--color-text-tertiary);
+  color: var(--color-text-secondary);
   transition: color var(--duration-fast) var(--ease-default);
 }
 .gyramais-sider-list-more:hover {
-  color: var(--color-text-primary);
+  color: var(--primary-button-color);
 }
 
 .gyramais-sider-list-loading {
   display: flex;
   flex-direction: column;
-  gap: 18px;
+  gap: 0.5rem;
+}
+.gyramais-sider-list-skeleton {
+  display: flex;
+  height: 30px;
+  align-items: center;
   padding-left: 6px;
   padding-right: 6px;
-  padding-top: 9px;
-  padding-bottom: 9px;
 }
 .gyramais-sider-list-empty {
   margin: 0px;
@@ -7645,7 +7687,7 @@ h6 {
   font-size: 12px;
   font-weight: 400;
   line-height: 1rem;
-  color: var(--color-text-tertiary);
+  color: var(--color-text-secondary);
 }
 
 /* ---- Movimento --------------------------------------------------------- */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gyramais/gyra-design",
-  "version": "0.2.59",
+  "version": "0.2.61",
   "description": "Gyramais Design System",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",