acai-ui 1.65.5

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

@@ -0,0 +1,378 @@
+<template>
+  <q-btn
+    v-bind="qBtnProps"
+    :class="classes"
+    :aria-label="ariaLabelFinal"
+    unelevated
+    no-caps
+    no-wrap
+    @click="emit('click', $event)"
+  >
+    <slot />
+    <!-- Tooltip opcional: `#tooltip` (conteúdo custom) tem precedência sobre a
+         prop `tooltip` (texto simples). Ambos usam o AcaiUiTooltip. -->
+    <acai-ui-tooltip
+      v-if="$slots.tooltip || props.tooltip"
+      :position="props.tooltipPosition"
+    >
+      <slot name="tooltip">{{ props.tooltip }}</slot>
+    </acai-ui-tooltip>
+  </q-btn>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import AcaiUiTooltip from "../tooltip/acai-ui-tooltip.vue";
+import type { ButtonProps } from "./acai-ui-button-interface";
+
+const props = withDefaults(defineProps<ButtonProps>(), {
+  color: "primary",
+  size: "md",
+  fullWidth: false,
+  tooltipPosition: "top",
+});
+
+// Botão icon-only (sem label) sem ariaLabel explícito: usa o texto do tooltip
+// como nome acessível (eMAG 4.2). Com label visível, não sobrescreve.
+const ariaLabelFinal = computed(
+  () => props.ariaLabel || (!props.label ? props.tooltip : undefined),
+);
+
+const emit = defineEmits<{
+  click: [event: Event];
+}>();
+
+const variant = computed(() => {
+  if (props.flat) return "flat";
+  if (props.outline) return "outlined";
+  return "filled";
+});
+
+const classes = computed(() => [
+  "botao",
+  `botao--${variant.value}`,
+  `botao--${props.color}`,
+  `botao--${props.size}`,
+  {
+    "botao--full-width": props.fullWidth,
+    "botao--icon-only": props.icon && !props.label,
+  },
+]);
+
+const coresDS = ["primary", "negative", "positive", "accent"] as const;
+const ehCorDS = computed(() =>
+  coresDS.includes(props.color as (typeof coresDS)[number]),
+);
+
+const qBtnProps = computed(() => ({
+  color: ehCorDS.value ? undefined : props.color,
+  flat: ehCorDS.value ? undefined : props.flat,
+  outline: ehCorDS.value ? undefined : props.outline,
+  label: props.label,
+  icon: props.icon,
+  iconRight: props.iconRight,
+  disable: props.disable,
+  loading: props.loading,
+  round: props.round,
+  rounded: props.rounded,
+  dense: props.dense,
+  to: props.to,
+  href: props.href,
+  target: props.target,
+  type: props.type,
+  tabindex: props.tabindex,
+  ripple: props.ripple,
+}));
+</script>
+
+<style lang="scss" scoped>
+// Import explícito porque consumidores via source (docs, sandbox, etc.) não
+// têm o additionalData do vite.config.ts da lib — esse só funciona pro build interno.
+@import '../../scss/controls';
+
+.botao {
+  // Reset base + tipografia comum a todos os controles tipo "botão" da lib.
+  &.q-btn {
+    @include control-base;
+    min-height: unset;
+    padding: 0;
+  }
+
+  // ========================
+  // Tamanhos — herdam dos mixins centralizados em scss/_controls.scss.
+  // Mudou em _controls.scss → muda em Button + Dropdown + outros consumidores.
+  // ========================
+  &--sm.q-btn {
+    @include control-sm;
+  }
+
+  &--md.q-btn {
+    @include control-md;
+  }
+
+  &--lg.q-btn {
+    @include control-lg;
+  }
+
+  &--full-width {
+    width: 100%;
+  }
+
+  &--icon-only {
+    &.botao--sm.q-btn {
+      @include control-icon-only-sm;
+    }
+
+    &.botao--md.q-btn {
+      @include control-icon-only-md;
+    }
+
+    &.botao--lg.q-btn {
+      @include control-icon-only-lg;
+    }
+  }
+
+  // ========================
+  // Filled
+  // ========================
+  // Cor base via `var(--q-*)` → recolore no modo daltônico (chips/badges já faziam;
+  // agora o botão colorido acompanha). Hover/active via `color-mix(... #000 N%)`
+  // DERIVAM o tom escuro da cor atual — então funcionam pra qualquer cor CVD sem
+  // shade hardcoded. No modo normal o resultado é ~idêntico aos tons DETRAN de antes.
+  &--filled.q-btn {
+    color: $color-white-100;
+
+    &.botao--primary {
+      background: var(--q-primary, #{$primary});
+      border-color: var(--q-primary, #{$primary});
+
+      &:hover:not(.disabled) {
+        background: color-mix(in srgb, var(--q-primary, #{$primary}), #000 13%);
+        border-color: color-mix(in srgb, var(--q-primary, #{$primary}), #000 13%);
+      }
+
+      &:active:not(.disabled) {
+        background: color-mix(in srgb, var(--q-primary, #{$primary}), #000 28%);
+        border-color: color-mix(in srgb, var(--q-primary, #{$primary}), #000 28%);
+      }
+    }
+
+    &.botao--negative {
+      background: var(--q-negative, #{$negative});
+      border-color: var(--q-negative, #{$negative});
+
+      &:hover:not(.disabled) {
+        background: color-mix(in srgb, var(--q-negative, #{$negative}), #000 13%);
+        border-color: color-mix(in srgb, var(--q-negative, #{$negative}), #000 13%);
+      }
+
+      &:active:not(.disabled) {
+        background: color-mix(in srgb, var(--q-negative, #{$negative}), #000 28%);
+        border-color: color-mix(in srgb, var(--q-negative, #{$negative}), #000 28%);
+      }
+    }
+
+    &.botao--positive {
+      background: var(--q-positive, #{$positive});
+      border-color: var(--q-positive, #{$positive});
+
+      &:hover:not(.disabled) {
+        background: color-mix(in srgb, var(--q-positive, #{$positive}), #000 13%);
+        border-color: color-mix(in srgb, var(--q-positive, #{$positive}), #000 13%);
+      }
+
+      &:active:not(.disabled) {
+        background: color-mix(in srgb, var(--q-positive, #{$positive}), #000 28%);
+        border-color: color-mix(in srgb, var(--q-positive, #{$positive}), #000 28%);
+      }
+    }
+
+    &.botao--accent {
+      background: var(--q-accent, #{$accent});
+      border-color: var(--q-accent, #{$accent});
+
+      &:hover:not(.disabled) {
+        background: color-mix(in srgb, var(--q-accent, #{$accent}), #000 13%);
+        border-color: color-mix(in srgb, var(--q-accent, #{$accent}), #000 13%);
+      }
+
+      &:active:not(.disabled) {
+        background: color-mix(in srgb, var(--q-accent, #{$accent}), #000 28%);
+        border-color: color-mix(in srgb, var(--q-accent, #{$accent}), #000 28%);
+      }
+    }
+  }
+
+  // ========================
+  // Outlined
+  // ========================
+  &--outlined.q-btn {
+    background: transparent;
+
+    &.botao--primary {
+      border-color: var(--q-primary, #{$primary});
+      color: var(--q-primary, #{$primary});
+
+      &:hover:not(.disabled) {
+        background: color-mix(in srgb, var(--q-primary, #{$primary}) 6%, transparent);
+      }
+
+      &:active:not(.disabled) {
+        background: color-mix(in srgb, var(--q-primary, #{$primary}) 12%, transparent);
+      }
+    }
+
+    // Outlined = borda e texto SOBRE a superfície → usa a tinta (`--acai-negative`),
+    // que clareia no escuro. O fundo continua transparente.
+    &.botao--negative {
+      border-color: var(--acai-negative, #{$negative});
+      color: var(--acai-negative, #{$negative});
+
+      &:hover:not(.disabled) {
+        background: color-mix(in srgb, var(--acai-negative, #{$negative}) 6%, transparent);
+      }
+
+      &:active:not(.disabled) {
+        background: color-mix(in srgb, var(--acai-negative, #{$negative}) 12%, transparent);
+      }
+    }
+
+    // Outline/flat pintam a COR NO TEXTO E NA BORDA — é tinta, não fundo. Segue
+    // o `--acai-positive`, que clareia no escuro; o botão PREENCHIDO acima
+    // continua no `--q-positive` porque lá a cor é fundo com texto branco.
+    &.botao--positive {
+      border-color: var(--acai-positive, #{$positive});
+      color: var(--acai-positive, #{$positive});
+
+      &:hover:not(.disabled) {
+        background: color-mix(in srgb, var(--acai-positive, #{$positive}) 6%, transparent);
+      }
+
+      &:active:not(.disabled) {
+        background: color-mix(in srgb, var(--acai-positive, #{$positive}) 12%, transparent);
+      }
+    }
+
+    &.botao--accent {
+      border-color: var(--q-accent, #{$accent});
+      color: var(--q-accent, #{$accent});
+
+      &:hover:not(.disabled) {
+        background: color-mix(in srgb, var(--q-accent, #{$accent}) 6%, transparent);
+      }
+
+      &:active:not(.disabled) {
+        background: color-mix(in srgb, var(--q-accent, #{$accent}) 12%, transparent);
+      }
+    }
+  }
+
+  // ========================
+  // Flat
+  // ========================
+  &--flat.q-btn {
+    background: transparent;
+    border-color: transparent;
+
+    &.botao--primary {
+      color: var(--q-primary, #{$primary});
+
+      &:hover:not(.disabled) {
+        background: color-mix(in srgb, var(--q-primary, #{$primary}) 6%, transparent);
+      }
+
+      &:active:not(.disabled) {
+        background: color-mix(in srgb, var(--q-primary, #{$primary}) 12%, transparent);
+      }
+    }
+
+    // Flat = texto sobre a superfície → mesma tinta do outlined.
+    &.botao--negative {
+      color: var(--acai-negative, #{$negative});
+
+      &:hover:not(.disabled) {
+        background: color-mix(in srgb, var(--acai-negative, #{$negative}) 6%, transparent);
+      }
+
+      &:active:not(.disabled) {
+        background: color-mix(in srgb, var(--acai-negative, #{$negative}) 12%, transparent);
+      }
+    }
+
+    &.botao--positive {
+      color: var(--acai-positive, #{$positive});
+
+      &:hover:not(.disabled) {
+        background: color-mix(in srgb, var(--acai-positive, #{$positive}) 6%, transparent);
+      }
+
+      &:active:not(.disabled) {
+        background: color-mix(in srgb, var(--acai-positive, #{$positive}) 12%, transparent);
+      }
+    }
+
+    &.botao--accent {
+      color: var(--q-accent, #{$accent});
+
+      &:hover:not(.disabled) {
+        background: color-mix(in srgb, var(--q-accent, #{$accent}) 6%, transparent);
+      }
+
+      &:active:not(.disabled) {
+        background: color-mix(in srgb, var(--q-accent, #{$accent}) 12%, transparent);
+      }
+    }
+  }
+
+  // ========================
+  // Disabled
+  // ========================
+  &.q-btn.disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  // ========================
+  // Focus
+  // ========================
+  // O anel de foco sai de `--acai-control-on` (navy no claro, azul legível no
+  // escuro, cor CVD no daltônico) — igual ao de async-select, toggle e
+  // user-menu. Antes era `$color-primary-400` cravado: #7a76de, um ROXO da rampa
+  // que não é a marca de ninguém, aparecendo em todo botão de todo app, e imune
+  // ao tema (seguia roxo no escuro e no alto contraste).
+  &.q-btn:focus-visible {
+    outline: 2px solid var(--acai-control-on, #{$primary});
+    outline-offset: 2px;
+  }
+
+  // Reset Quasar hover overlay
+  :deep(.q-focus-helper) {
+    display: none;
+  }
+}
+
+// ========================
+// Tema escuro — outlined/flat com cor navy/escura (ex.: primary #0e2a50) somem no
+// fundo escuro. Clareia borda/texto pra versões legíveis e usa hover translúcido.
+// ========================
+// `negative` saiu daqui: virou o token `--acai-negative` (definido em `_themes.scss`),
+// que já clareia no escuro E recolore no daltônico — o hardcode `#e0707d` travava a
+// cor CVD e divergia do `#e06070` que o dialog usava. As demais seguem hardcoded.
+.body--dark {
+  .botao--outlined,
+  .botao--flat {
+    &.botao--primary { color: #6aa5e8; }
+    &.botao--positive { color: #6cc47e; }
+    &.botao--accent { color: #c471e0; }
+
+    &:hover:not(.disabled) { background: rgba(255, 255, 255, 0.07); }
+    &:active:not(.disabled) { background: rgba(255, 255, 255, 0.12); }
+  }
+
+  .botao--outlined {
+    &.botao--primary { border-color: #6aa5e8; }
+    &.botao--positive { border-color: #6cc47e; }
+    &.botao--accent { border-color: #c471e0; }
+  }
+}
+</style>

package/src/components/card/acai-ui-card-interface.ts

@@ -0,0 +1,14 @@
+import type { HeadingLevel } from '../container/acai-ui-container-interface'
+
+export interface CardProps {
+  title?: string
+  cardClass?: string
+  hideSeparator?: boolean
+  contador?: number
+  hoverColor?: string
+  clickable?: boolean
+  /** Eleva o card com leve movimento + sombra ao passar o mouse (estilo tile). */
+  hover?: boolean
+  /** Nível de heading semântico para o título do card (eMAG 1.3). Default 2. */
+  headingLevel?: HeadingLevel
+}

package/src/components/card/acai-ui-card-styles.scss

@@ -0,0 +1,94 @@
+@import '../../scss/breakpoints';
+
+.container-card {
+  padding: $spacing-lg;
+  border-radius: $radius-lg;
+  background: var(--acai-surface, #{$color-white-100});
+  // Elevação dark-aware: navy suave no claro, anel de luz + profundidade no
+  // escuro (token único em _themes.scss). O q-card `bordered` vem sem sombra.
+  box-shadow: var(--acai-elevation);
+  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
+
+  // Prop `hover`: eleva + intensifica a sombra ao passar o mouse. Opt-in.
+  &--hover:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 4px 10px rgba(14, 42, 80, 0.09), 0 14px 32px rgba(14, 42, 80, 0.12);
+  }
+
+  &--hoverable {
+    cursor: pointer;
+  }
+
+  .card-container-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    // Estilo do título do card via classe pra permitir tag de heading dinâmica (eMAG 1.3).
+    .card-container-header__title {
+      font-size: 1.7rem;
+      font-weight: bold;
+      color: var(--acai-heading, #{$primary});
+      line-height: 1.2;
+      letter-spacing: normal;
+      margin: 0;
+    }
+  }
+
+  .separador {
+    margin: $spacing-md 0 $spacing-md 0;
+  }
+
+  // A linha separadora é um q-separator SEM prop `dark` → o Quasar deixa
+  // rgba(0,0,0,.12) (escura, some no navy). No escuro vira uma linha CLARA sutil
+  // (o inverso da linha clara do tema claro).
+  .body--dark & .separador {
+    background: var(--acai-border);
+  }
+
+  .doc-section__description {
+    font-size: 0.875rem;
+    color: var(--acai-text-muted, #{$color-gray-600});
+    margin-top: $spacing-md;
+    line-height: 1.6;
+  }
+
+
+  .card-footer {
+    padding-top: 14px;
+    border-top: 1px solid var(--acai-border-subtle, rgba(20, 20, 20, 0.08));
+    background: rgba(0, 0, 0, 0.02);
+  }
+}
+
+// Tema escuro: a linha do `bordered` (Quasar) fica dura/grosseira sobre o navy.
+// A elevação (anel de luz + profundidade) já vem do --acai-elevation; aqui só
+// removemos a borda dura e ajustamos o footer.
+.body--dark .container-card {
+  border-color: transparent;
+
+  // Footer: o tint preto (rgba(0,0,0,.02)) do modo claro ESCURECE sobre o navy,
+  // em vez de diferenciar a seção. No escuro, um leve realce claro separa o
+  // footer da superfície do card. Light mode fica idêntico (fora do body--dark).
+  .card-footer {
+    background: rgba(255, 255, 255, 0.03);
+  }
+}
+
+@include ate-mobile {
+  .container-card {
+    padding: $spacing-md;
+
+    .card-container-header {
+      // Título e ações do card disputam a mesma linha via `space-between`. Em
+      // 360px um título de duas palavras já encosta nos botões — o wrap deixa
+      // as ações caírem pra linha de baixo em vez de espremerem o título.
+      flex-wrap: wrap;
+      gap: $spacing-sm;
+
+      .card-container-header__title {
+        font-size: $font-size-lg;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,148 @@
+<template>
+  <q-card
+    :id="autoId"
+    :class="[cardClass, { 'container-card--hoverable': hoverColor || clickable, 'container-card--hover': hover }]"
+    :style="hoverStyle"
+    bordered
+    class="container-card"
+    @click="onClick"
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+  >
+    <template v-if="title">
+      <header class="card-container-header">
+        <div class="flex items-center">
+          <div v-if="contador !== undefined && contador !== null" class="q-mr-sm">
+            <q-badge :label="contador" class="text-subtitle2" />
+          </div>
+
+          <component :is="headingTag" class="card-container-header__title">{{ title }}</component>
+        </div>
+
+        <!-- No celular estas ações recolhem num dropdown (ver
+             <acai-ui-actions>): título e botões disputam a mesma linha do
+             cabeçalho, e em 360px um título de duas palavras já não deixa
+             espaço pra dois rótulos. -->
+        <!-- `v-if` OBRIGATÓRIO. Antes isto era uma `div` sempre presente com um
+             slot vazio dentro — inofensivo. Agora o conteúdo é um dropdown, e
+             sem a guarda todo card com título ganhava um botão "Ações" vazio no
+             cabeçalho do celular. -->
+        <div v-if="$slots.actions" class="card-container-header__acoes">
+          <acai-ui-actions :label="actionsLabel" :collapse="collapseActions" dense>
+            <slot name="actions" />
+          </acai-ui-actions>
+        </div>
+      </header>
+      <q-separator v-if="!hideSeparator" class="separador" />
+    </template>
+    <!-- q--avoid-card-border: o QCard zera as bordas de todo <div> filho direto
+         (comportamento de "emendar seções" do Quasar) e a regra vence a classe
+         do consumidor por especificidade — a borda declarada some sem erro.
+         O wrapper protege o conteúdo do slot: os <div> do consumidor viram
+         netos e mantêm as bordas que declararem. -->
+    <div class="container-card__content q--avoid-card-border">
+      <slot />
+    </div>
+    <!-- `$slots.footer` lido AQUI, dentro do render, de propósito: o objeto de
+         slots não é reativo (createInternalObject), então um `computed` que lê
+         `slots.footer` cacheia o primeiro render pra sempre e um slot
+         condicional do consumidor (<template v-if="cond" #footer>) nunca mais
+         aparece. O render reavalia a cada atualização, que é o que se quer. -->
+    <footer v-if="$slots.footer" class="card-footer">
+      <slot name="footer" />
+    </footer>
+  </q-card>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import AcaiUiActions from '../actions/acai-ui-actions.vue'
+
+defineOptions({ inheritAttrs: false })
+
+// Props definidas INLINE (em vez de `defineProps<CardProps>()`).
+// Vue SFC compiler não consegue resolver tipos importados de outro arquivo
+// quando o tipo da prop usa outro alias importado (ex.: HeadingLevel) —
+// resultado: prop não é registrada e o default do withDefaults não aplica.
+const props = withDefaults(
+  defineProps<{
+    title?: string
+    cardClass?: string
+    hideSeparator?: boolean
+    contador?: number
+    hoverColor?: string
+    clickable?: boolean
+    /** Eleva o card com leve movimento + sombra ao passar o mouse (estilo tile). */
+    hover?: boolean
+    /** Nível de heading semântico para o título do card (eMAG 1.3). Default 2. */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
+    /**
+     * Rótulo do botão que agrupa o slot `#actions` **no celular** (≤600px),
+     * onde as ações recolhem pra não brigar com o título pela mesma linha.
+     * Default `'Ações'`. No desktop não aparece.
+     */
+    actionsLabel?: string
+    /**
+     * Recolher o slot `#actions` num dropdown no celular. Default `true`.
+     *
+     * Passe `false` quando as ações forem **só de ícone**: elas já cabem na
+     * linha mesmo em 360px e, dentro do menu, perdem o tooltip que as
+     * explicava — viram desenhos sem rótulo.
+     */
+    collapseActions?: boolean
+  }>(),
+  {
+    hideSeparator: false,
+    clickable: false,
+    hover: false,
+    headingLevel: 2,
+    actionsLabel: 'Ações',
+    collapseActions: true,
+  },
+)
+
+const headingTag = computed(() => `h${props.headingLevel ?? 2}`)
+
+const emit = defineEmits<{
+  click: [event: Event]
+}>()
+
+// Gerar id automaticamente do title
+const autoId = computed(() => {
+  if (!props.title) return undefined
+  return props.title
+    .toLowerCase()
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .replace(/[^a-z0-9\s-]/g, '')
+    .replace(/\s+/g, '-')
+    .replace(/-+/g, '-')
+    .trim()
+})
+
+const hovering = ref(false)
+
+const hoverStyle = computed(() => {
+  if (!props.hoverColor || !hovering.value) return {}
+  return {
+    borderColor: props.hoverColor,
+    // `color-mix` em vez de concatenar o alpha `33` no fim da cor: aquilo só
+    // funcionava se `hoverColor` fosse um hex de 6 dígitos. Com um token
+    // dark-aware — `var(--acai-primary)`, que é o que a lib recomenda hoje —
+    // saía `var(--acai-primary)33`, declaração inválida, e a sombra sumia sem
+    // aviso. Os 20% são o mesmo `33` (51/255).
+    boxShadow: `0 4px 16px color-mix(in srgb, ${props.hoverColor} 20%, transparent)`,
+    transform: 'translateY(-3px)',
+  }
+})
+
+function onClick(event: Event): void {
+  if (props.clickable) {
+    emit('click', event)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './acai-ui-card-styles.scss';
+</style>