acai-ui 1.65.5

package/src/components/user-menu/acai-ui-user-menu.vue

@@ -0,0 +1,139 @@
+<template>
+  <!-- Bloco inteiro clicável (flat): avatar + textos + seta abrem o menu.
+       <button> nativo → focável e acionável por teclado (Enter/Espaço). -->
+  <button
+    :aria-expanded="menuAberto ? 'true' : 'false'"
+    :aria-label="`Menu do usuário: ${nomeExibido}`"
+    aria-haspopup="menu"
+    class="acai-ui-user-menu"
+    type="button"
+  >
+    <q-avatar :color="avatarColor" size="36px" text-color="white">
+      <acai-ui-icon v-if="ehDocumento" name="person" size="20px" />
+      <span v-else class="acai-ui-user-menu__ini">{{ iniciais }}</span>
+    </q-avatar>
+
+    <span class="acai-ui-user-menu__txt">
+      <span class="acai-ui-user-menu__nome">{{ nomeExibido }}</span>
+      <span v-if="role" class="acai-ui-user-menu__papel">{{ role }}</span>
+    </span>
+
+    <acai-ui-icon
+      :class="['acai-ui-user-menu__seta', { 'acai-ui-user-menu__seta--aberta': menuAberto }]"
+      name="expand_more"
+      size="20px"
+    />
+
+    <!-- Menu ancorado no botão pai: clicar em qualquer parte do bloco abre.
+         Itens vêm por slot — use <acai-ui-dropdown-item> (já fecha ao clicar).
+         Estilo do popup é global (classe `acaiuser-pop`), pois o q-menu é
+         teleportado pro body e estilo scoped não o alcança. -->
+    <q-menu v-model="menuAberto" anchor="bottom right" self="top right" class="acaiuser-pop">
+      <div v-if="nomeExibido" class="acaiuser-pop__cab">
+        <div class="acaiuser-pop__nome">{{ nomeExibido }}</div>
+        <div v-if="role" class="acaiuser-pop__papel">{{ role }}</div>
+      </div>
+      <q-list class="acaiuser-pop__itens">
+        <slot />
+      </q-list>
+    </q-menu>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import AcaiUiIcon from '../icon/acai-ui-icon.vue'
+
+// Props INLINE (quirk do compilador Vue com interface importada + alias).
+const props = withDefaults(
+  defineProps<{
+    name: string
+    role?: string
+    avatarColor?: string
+  }>(),
+  {
+    avatarColor: 'primary',
+  },
+)
+
+const menuAberto = ref(false)
+
+// --- Detecção adaptativa nome / CPF / CNPJ ---
+const digitos = computed(() => (props.name ?? '').replace(/\D/g, ''))
+const ehDocumento = computed(
+  () =>
+    /^[\d.\-/\s]+$/.test(props.name ?? '') &&
+    (digitos.value.length === 11 || digitos.value.length === 14),
+)
+const ehCnpj = computed(() => ehDocumento.value && digitos.value.length === 14)
+
+const nomeExibido = computed(() => {
+  if (!ehDocumento.value) return props.name
+  return ehCnpj.value
+    ? digitos.value.replace(/(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})/, '$1.$2.$3/$4-$5')
+    : digitos.value.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3-$4')
+})
+
+/**
+ * Iniciais do nome: 1ª letra do primeiro + 1ª letra do último termo.
+ * Quebra por espaço OU ponto — "Michel Silva Amorim" → "MA", "michel.silva" → "MS".
+ */
+const iniciais = computed(() => {
+  const partes = (props.name ?? '').trim().split(/[\s.]+/).filter(Boolean)
+  if (!partes.length) return '?'
+  const primeira = partes[0]?.charAt(0) ?? ''
+  const ultima = partes.length > 1 ? (partes[partes.length - 1]?.charAt(0) ?? '') : ''
+  return (primeira + ultima).toUpperCase()
+})
+</script>
+
+<style lang="scss" scoped>
+@import './acai-ui-user-menu-styles.scss';
+</style>
+
+<!-- NÃO scoped: o q-menu é teleportado pro body. Estilo do popup do usuário —
+     grande, arredondado e legível (mesmo padrão do conceito). -->
+<style lang="scss">
+.q-menu.acaiuser-pop {
+  min-width: 224px;
+  padding: 6px;
+  border-radius: 14px;
+  // Superfície do popup via token — sem isto o q-menu cai no branco padrão do
+  // Quasar e fica ilegível no dark. Fallback #fff preserva o claro.
+  background: var(--acai-surface, #fff);
+  color: var(--acai-text, #15203a);
+  border: 1px solid var(--acai-border-subtle, #e4e8f1);
+  box-shadow: 0 12px 40px rgba(14, 42, 80, 0.16);
+}
+
+.acaiuser-pop__cab {
+  padding: 8px 10px 10px;
+  border-bottom: 1px solid var(--acai-border-subtle, #eef1f7);
+  margin-bottom: 4px;
+}
+
+.acaiuser-pop__nome {
+  font-size: 0.86rem;
+  font-weight: 700;
+  color: var(--acai-heading, #15203a);
+}
+
+.acaiuser-pop__papel {
+  font-size: 0.74rem;
+  color: var(--acai-text-muted, #64708a);
+}
+
+.acaiuser-pop__itens {
+  padding: 0;
+}
+
+// Itens (AcaiUiDropdownItem) legíveis e arredondados, não mais compactos.
+// Cor via token (ícone+label herdam o currentColor) pra ficar legível no escuro.
+.acaiuser-pop .ds-dropdown__item {
+  min-height: unset;
+  padding: 9px 10px;
+  border-radius: 8px;
+  font-size: 0.86rem;
+  color: var(--acai-text, #15203a);
+}
+</style>

package/src/components/validation/acai-ui-validation.vue

@@ -0,0 +1,236 @@
+<template>
+  <q-dialog v-model="aberto">
+    <div class="validacao-panel">
+      <div class="validacao-panel__header">
+        <acai-ui-icon name="warning_amber" size="md" color="white" />
+        <span class="validacao-panel__titulo"
+          >Campos com preenchimento incorreto</span
+        >
+        <q-space />
+      </div>
+
+      <div class="validacao-panel__corpo">
+        <p class="validacao-panel__mensagem">
+          Existem <strong>{{ totalErros }}</strong> campo(s) que precisam ser
+          corrigido(s) antes de prosseguir.
+        </p>
+
+        <div
+          v-for="(secoes, aba) in errosAgrupados"
+          :key="aba"
+          class="validacao-panel__aba"
+        >
+          <div class="validacao-panel__aba-title">
+            <acai-ui-icon name="tab" size="sm" />
+            {{ aba }}
+          </div>
+
+          <div
+            v-for="(campos, secao) in secoes"
+            :key="secao"
+            class="validacao-panel__secao"
+          >
+            <span class="validacao-panel__secao-title">{{ secao }}</span>
+            <ul class="validacao-panel__lista">
+              <li v-for="campo in campos" :key="campo.label">
+                <button
+                  type="button"
+                  class="validacao-panel__item"
+                  :aria-label="`Ir para ${campo.label} na seção ${secao}${aba ? ` (aba ${aba})` : ''}`"
+                  @click="irParaCampo(campo)"
+                >
+                  <span class="validacao-panel__item-label">{{
+                    campo.label
+                  }}</span>
+                  <acai-ui-icon
+                    name="arrow_forward"
+                    size="14px"
+                    class="validacao-panel__item-icon"
+                    decorative
+                  />
+                </button>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import type { ErroValidacao } from "../../hooks/use-validacao-visual";
+import AcaiUiIcon from "../icon/acai-ui-icon.vue";
+
+const props = defineProps<{
+  campos: ErroValidacao[];
+  labelAbas?: Record<string, string>;
+}>();
+
+const emit = defineEmits<{
+  (e: "navegar", campo: ErroValidacao): void;
+}>();
+
+const aberto = defineModel<boolean>({ required: true });
+
+const totalErros = computed(() => props.campos.length);
+
+const errosAgrupados = computed(() => {
+  const grupos: Record<string, Record<string, ErroValidacao[]>> = {};
+  const labelsAbas = props.labelAbas ?? {};
+
+  for (const campo of props.campos) {
+    const abaLabel = labelsAbas[campo.aba] ?? campo.aba;
+    if (!grupos[abaLabel]) grupos[abaLabel] = {};
+    if (!grupos[abaLabel]![campo.secao]) grupos[abaLabel]![campo.secao] = [];
+    grupos[abaLabel]![campo.secao]!.push(campo);
+  }
+
+  return grupos;
+});
+
+function irParaCampo(campo: ErroValidacao): void {
+  emit("navegar", campo);
+  aberto.value = false;
+}
+</script>
+
+<style scoped lang="scss">
+.validacao-panel {
+  width: 100%;
+  max-width: 800px;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+  background: var(--acai-surface, #fff);
+
+  &__header {
+    display: flex;
+    align-items: center;
+    // Ícone + título + fechar. Sem wrap, título longo empurra o fechar pra fora
+    // da faixa colorida e o usuário fica sem saída visível do painel.
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 10px 8px 10px 16px;
+    background: var(--q-warning, #{$warning});
+    color: white;
+  }
+
+  &__titulo {
+    font-weight: 600;
+    font-size: 0.9rem;
+  }
+
+  &__corpo {
+    padding: 16px;
+    // `vh` só como fallback: no Chrome/Safari mobile ele mede a viewport GRANDE
+    // (barra de endereço recolhida), então 60vh pode passar da tela real e
+    // empurrar os botões pra fora. `dvh` acompanha a barra; navegador que não
+    // entende ignora a linha e fica com a de cima.
+    max-height: 60vh;
+    max-height: 60dvh;
+    overflow-y: auto;
+  }
+
+  &__mensagem {
+    margin: 0 0 12px;
+    color: var(--acai-text, #333);
+    font-size: 0.9rem;
+    line-height: 1.55;
+  }
+
+  &__aba {
+    margin-bottom: 14px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &__aba-title {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-weight: 700;
+    font-size: 0.9rem;
+    color: var(--acai-heading, #{$primary});
+    padding-bottom: 4px;
+    border-bottom: 1px solid var(--acai-border-subtle, rgba(0, 0, 0, 0.08));
+    margin-bottom: 8px;
+  }
+
+  &__secao {
+    margin-bottom: 6px;
+    margin-left: 8px;
+  }
+
+  &__secao-title {
+    font-weight: 600;
+    font-size: 0.82rem;
+    color: var(--acai-text-muted, #555);
+  }
+
+  &__lista {
+    margin: 2px 0 0;
+    padding-left: 16px;
+    list-style: none;
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    // Mensagem de erro à esquerda, nome do campo/ação à direita. A mensagem é
+    // texto livre do consumidor e pode ser longa; sem wrap ela é comprimida a
+    // ponto de quebrar palavra por palavra numa coluna de poucos caracteres.
+    flex-wrap: wrap;
+    width: 100%;
+    font-size: 0.82rem;
+    color: var(--acai-text-muted, #777);
+    line-height: 1.5;
+    padding: 3px 8px 3px 4px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+    background: transparent;
+    border: 0;
+    font-family: inherit;
+    text-align: left;
+
+    &:hover {
+      background-color: var(--acai-surface-hover, #{rgba($primary, 0.06)});
+      color: var(--acai-item-hover-text, #{$primary});
+
+      .validacao-panel__item-icon {
+        opacity: 1;
+      }
+    }
+
+    &:focus-visible {
+      // control-on = navy no claro (idêntico) e azul legível no escuro — o navy
+      // cru sumia sobre a surface escura do modal (eMAG 4.3: foco sempre visível).
+      outline: 2px solid var(--acai-control-on, #{$primary});
+      outline-offset: 1px;
+      background-color: var(--acai-surface-hover, #{rgba($primary, 0.06)});
+      color: var(--acai-item-hover-text, #{$primary});
+
+      .validacao-panel__item-icon {
+        opacity: 1;
+      }
+    }
+  }
+
+  &__item-label {
+    flex: 1;
+  }
+
+  &__item-icon {
+    opacity: 0;
+    transition: opacity 0.15s ease;
+    // Acompanha a cor de hover do item (label) — navy fixo ficava com baixo
+    // contraste na superfície escura. Fallback $primary preserva o claro.
+    color: var(--acai-item-hover-text, #{$primary});
+  }
+}
+</style>

package/src/constants/chart-paleta.ts

@@ -0,0 +1,162 @@
+// Paleta CATEGÓRICA de gráfico — fonte de verdade em TS.
+//
+// Os valores que o navegador usa vivem em `scss/_themes.scss` (custom properties
+// `--acai-chart-*`, que retingem sozinhas no escuro / daltônico / alto contraste).
+// Este arquivo existe por dois motivos:
+//   1. testes — medir contraste e separação sem rodar navegador;
+//   2. render HEADLESS (ex.: gerar PNG de gráfico pra dentro de um PDF), onde não
+//      há CSS custom property pra resolver.
+// O spec `chart-paleta.spec.ts` garante que os dois lados não divergem: todo hex
+// daqui precisa aparecer no `_themes.scss`.
+//
+// ⚠️ Regra de cor da lib: componente NUNCA hardcoda hex daqui. Use `corDaSerie()`,
+// que devolve `var(--acai-chart-N)`. Os hexes são só pra teste e headless.
+
+/**
+ * Quantidade de slots categóricos. Da 6ª categoria em diante o gráfico agrupa
+ * em "Outros" — 5 séries já é o teto do que se distingue num gráfico, e é
+ * também o limite do que a tabela de cores da lib cobre nos DOIS temas
+ * (o `accent` é a única cor de marca sem rampa, então não há 6º tom claro
+ * pro tema escuro). Precisando de 6, o caminho certo é criar a rampa
+ * `$color-purple-*` completa — não um hex avulso.
+ */
+export const SLOTS_PALETA_GRAFICO = 5
+
+/** Modos de daltonismo que a lib suporta (espelha `usePreferencias`). */
+export type ModoDaltonismoGrafico = 'deuteranopia' | 'protanopia' | 'tritanopia' | 'acromatopsia'
+
+export interface PaletaGrafico {
+  /** Slots categóricos, na ordem de uso. Pares ADJACENTES são os que mais precisam se distinguir. */
+  readonly series: readonly string[]
+  /** 6ª categoria em diante, agrupada. Neutro por definição. */
+  readonly outros: string
+}
+
+/** Superfície sobre a qual a paleta é medida em cada tema (vale pro teste de contraste). */
+export const SUPERFICIE_GRAFICO = {
+  claro: '#ffffff',
+  escuro: '#171f2e',
+} as const
+
+// ── Modo normal ────────────────────────────────────────────────────────────
+// 100% da tabela de cores da lib (`_variables.scss`) — nenhum hex inventado.
+// No escuro vale a convenção que o `_themes.scss` JÁ usa pros status: sobe pro
+// tom 300 da própria rampa, então a família de cor continua reconhecível.
+
+/** Claro: blue-400, yellow-700, primary-700, red-600 (=$negative), green-500. */
+export const PALETA_GRAFICO_CLARO: PaletaGrafico = {
+  series: ['#3a80d0', '#b37800', '#4944b3', '#941c2a', '#43a858'],
+  outros: '#707070', // $color-gray-600
+}
+
+/**
+ * Escuro: o tom 300 de cada rampa do claro.
+ *
+ * ⚠️ Slot 1 (#6aa0e0, azul claro) e slot 3 (#9f9ce8, violeta claro) são vizinhos
+ * em matiz. Eles NÃO são adjacentes na ordem, então barra/linha (que só precisam
+ * separar pares consecutivos) ficam bem. Em PIZZA, onde toda fatia encosta em
+ * toda fatia, prefira no máximo 4 fatias + "Outros" no escuro.
+ */
+export const PALETA_GRAFICO_ESCURO: PaletaGrafico = {
+  series: ['#6aa0e0', '#f5cb66', '#9f9ce8', '#e06070', '#7fcd8e'],
+  outros: '#c7c7c7', // $color-gray-200
+}
+
+// ── Daltonismo ─────────────────────────────────────────────────────────────
+// Reaproveita os hexes que o `_themes.scss` JÁ escolheu e justificou pra cada
+// tipo de CVD (Okabe-Ito em deuteranopia/protanopia, Paul Tol em tritanopia,
+// luminância monotônica em acromatopsia). Duas diferenças em relação ao uso
+// como STATUS, e as duas têm motivo:
+//
+//   1. Os âmbares/laranjas foram ESCURECIDOS. Como status eles vivem sobre um
+//      fundo próprio (badge, banner); como série eles PREENCHEM área sobre a
+//      superfície, e a versão canônica não passa 3:1 sobre branco — o Okabe-Ito
+//      #e69f00 dá 2,25:1 e o #f0b000 do protanopia dá 1,92:1.
+//   2. A ORDEM não é a mesma do modo normal. Ela foi escolhida por busca
+//      exaustiva nas 120 permutações, maximizando a menor distância entre
+//      pares ADJACENTES sob a própria dicromacia. Por isso o slot 1 não é
+//      sempre azul: forçar isso derrubava o tritanopia escuro de 26,4 pra 6,8.
+//      Precedente da lib: no deuteranopia o `positive` já é AZUL, não verde —
+//      quem liga o modo aceita que a cor muda de papel.
+//
+// ⚠️ Estes números valem para pares ADJACENTES, que é o que barra e linha
+// encostam. Em PIZZA toda fatia toca todas: aí só 2 a 4 cores se separam,
+// dependendo do modo. Pizza NÃO pode depender de cor — precisa de rótulo
+// direto na fatia como canal primário.
+
+export const PALETA_GRAFICO_CVD: Readonly<
+  Record<ModoDaltonismoGrafico, { claro: PaletaGrafico; escuro: PaletaGrafico }>
+> = {
+  // Okabe-Ito. O verde-azulado (#009e73) vem do bloco de tritanopia da lib;
+  // o âmbar é o $color-yellow-700 da tabela (o #e69f00 canônico é claro demais).
+  deuteranopia: {
+    claro: {
+      series: ['#b37800', '#0072b2', '#d55e00', '#7a52a0', '#009e73'],
+      outros: '#707070',
+    },
+    escuro: {
+      // #4fd1a5 é o verde-água claro que a lib já usa no tritanopia escuro.
+      series: ['#4fd1a5', '#b18ad4', '#f0b840', '#5fb0e8', '#f0853f'],
+      outros: '#c7c7c7',
+    },
+  },
+
+  // Okabe-Ito com vermelho mais alaranjado (protanopes leem vermelho puro escuro).
+  protanopia: {
+    claro: {
+      series: ['#b37800', '#0072b2', '#e8590c', '#7a52a0', '#009e73'],
+      outros: '#707070',
+    },
+    escuro: {
+      series: ['#4fd1a5', '#b18ad4', '#f5c542', '#5fb0e8', '#f5904a'],
+      outros: '#c7c7c7',
+    },
+  },
+
+  // Paul Tol. O laranja #ee7733 do bloco de status virou #cc6600 pelo mesmo
+  // motivo do âmbar acima (2,87:1 sobre branco, abaixo do piso).
+  tritanopia: {
+    claro: {
+      series: ['#cc6600', '#0077bb', '#cc3311', '#009e73', '#a83768'],
+      outros: '#707070',
+    },
+    escuro: {
+      // #e07aa0 é o único tom novo desta leva: o magenta #a83768 não tem versão
+      // clara em lugar nenhum da lib, e some sobre #171f2e no valor escuro.
+      series: ['#f5a05e', '#5fb4e8', '#f4795e', '#4fd1a5', '#e07aa0'],
+      outros: '#c7c7c7',
+    },
+  },
+
+  // Sem percepção de cor: a única pista de cor é a LUMINÂNCIA, e ela não separa
+  // 5 séries com folga dentro da faixa que ainda passa 3:1 sobre a superfície.
+  // É por isso que neste modo o componente liga HACHURA obrigatoriamente — o
+  // padrão é que distingue, o cinza só ordena. No escuro a escala INVERTE
+  // (mesma lógica que o `_themes.scss` já aplica aos status).
+  acromatopsia: {
+    claro: {
+      series: ['#1f1f1f', '#3d3d3d', '#565656', '#6b6b6b', '#808080'],
+      outros: '#949494', // 3.03:1 sobre branco — no piso, mas o padrão carrega a distinção
+    },
+    escuro: {
+      series: ['#f0f0f0', '#d6d6d6', '#b8b8b8', '#9e9e9e', '#8c8c8c'],
+      outros: '#6f6f6f',
+    },
+  },
+}
+
+/**
+ * Cor do slot `indice` (0-based) como CSS custom property — é o que os
+ * componentes usam, pra o valor retingir sozinho nos 3 eixos de preferência.
+ * Do 6º em diante devolve o slot "Outros".
+ *
+ * @param paletaCustom sobrescreve a paleta da lib (prop `palette` do componente).
+ *   Aceita qualquer valor CSS; passando hex cru você PERDE o dark/daltônico.
+ */
+export function corDaSerie(indice: number, paletaCustom?: readonly string[]): string {
+  if (paletaCustom && paletaCustom.length > 0) {
+    return paletaCustom[indice % paletaCustom.length] as string
+  }
+  if (indice < 0 || indice >= SLOTS_PALETA_GRAFICO) return 'var(--acai-chart-other)'
+  return `var(--acai-chart-${indice + 1})`
+}

package/src/constants/efeitos.ts

@@ -0,0 +1,24 @@
+export const Shadows = {
+  xs: '0 1px 2px rgba(0, 0, 0, 0.05)',
+  sm: '0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)',
+  md: '0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06)',
+  lg: '0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05)',
+  xl: '0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04)',
+  '2xl': '0 25px 50px rgba(0, 0, 0, 0.25)',
+  inner: 'inset 0 2px 4px rgba(0, 0, 0, 0.1)',
+  inset: 'inset 0 4px 8px rgba(0, 0, 0, 0.15)',
+} as const
+
+export type ShadowKeys = keyof typeof Shadows
+export type ShadowValues = (typeof Shadows)[ShadowKeys]
+
+export const Blurs = {
+  xs: '2px',
+  sm: '4px',
+  md: '8px',
+  lg: '16px',
+  xl: '24px',
+} as const
+
+export type BlurKeys = keyof typeof Blurs
+export type BlurValues = (typeof Blurs)[BlurKeys]

package/src/constants/index.ts

@@ -0,0 +1,24 @@
+export { MaterialIconsEnum } from './lista-icons'
+export type { MaterialIconKeys, MaterialIconValues } from './lista-icons'
+
+export { MAPA_STATUS_PADRAO, statusBadge } from './status-badge'
+export type { BadgeStatus } from './status-badge'
+
+export { Medidas } from './medidas-espacos'
+export type { MedidasKeys, MedidasValor } from './medidas-espacos'
+
+export { Radius } from './radius'
+export type { RadiusKeys, RadiusValues } from './radius'
+
+export { Shadows, Blurs } from './efeitos'
+export type { ShadowKeys, ShadowValues, BlurKeys, BlurValues } from './efeitos'
+
+export {
+  SLOTS_PALETA_GRAFICO,
+  SUPERFICIE_GRAFICO,
+  PALETA_GRAFICO_CLARO,
+  PALETA_GRAFICO_ESCURO,
+  PALETA_GRAFICO_CVD,
+  corDaSerie,
+} from './chart-paleta'
+export type { PaletaGrafico, ModoDaltonismoGrafico } from './chart-paleta'