acai-ui 1.65.5

package/src/components/async-select/acai-ui-async-select.vue

@@ -0,0 +1,409 @@
+<template>
+  <div class="acai-ui-async-select">
+    <acai-ui-input
+      ref="inputRef"
+      v-model="texto"
+      v-bind="inputProps"
+      :loading="carregando || Boolean(loading)"
+      :error="Boolean(erroExibido)"
+      :error-message="erroExibido || ''"
+      @clear="aoLimpar"
+    >
+      <!-- Lupa CLICÁVEL no #append do próprio AcaiUiInput (mesmo lugar do
+           `icon-right`, então o campo fica idêntico ao input padrão). Clicar dispara
+           a busca imediatamente (útil se o auto-search por digitação falhar). -->
+      <template #append>
+        <acai-ui-icon
+          :name="iconeBusca"
+          class="acai-ui-async-select__lupa"
+          role="button"
+          tabindex="0"
+          aria-label="Buscar"
+          @click="pesquisarAgora"
+          @keydown="onLupaKeydown"
+        />
+      </template>
+    </acai-ui-input>
+
+    <q-menu
+      v-if="menuTarget"
+      v-model="menuAberto"
+      :target="menuTarget"
+      :class="[classeMenu, 'acai-ui-async-select-popup']"
+      anchor="bottom left"
+      self="top left"
+      fit
+      no-parent-event
+      no-focus
+      @show="aoMostrarMenu"
+      @hide="aoEsconderMenu"
+    >
+      <q-list
+        separator
+        class="acai-ui-async-select-lista"
+        :style="{ maxHeight: popupMaxHeight, overflowY: 'auto' }"
+      >
+        <template v-if="resultados.length === 0">
+          <!-- Estado vazio: slot pra ação (ex.: "Cadastrar"); fallback = texto simples. -->
+          <slot name="empty" :term="texto.trim()">
+            <q-item dense>
+              <q-item-section class="acai-ui-async-select__empty">
+                {{ emptyLabel }}
+              </q-item-section>
+            </q-item>
+          </slot>
+        </template>
+
+        <q-item
+          v-for="(item, index) in resultados"
+          :key="chaveItem(item, index)"
+          clickable
+          @click="selecionar(item)"
+        >
+          <q-item-section>
+            <!-- Render de cada item: slot #item; fallback = optionLabel + optionCaption. -->
+            <slot name="item" :item="item" :index="index">
+              <q-item-label class="acai-ui-async-select__label">{{ rotulo(item) }}</q-item-label>
+              <q-item-label v-if="optionCaption" caption>{{ legenda(item) }}</q-item-label>
+            </slot>
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-menu>
+  </div>
+</template>
+
+<script setup lang="ts" generic="T extends Record<string, unknown> = Record<string, unknown>">
+import { computed, getCurrentInstance, nextTick, onBeforeUnmount, ref, useSlots, watch } from 'vue'
+import type { Ref } from 'vue'
+import type { MaterialIconValues } from '../../constants/lista-icons'
+import type { AsyncSelectProps, OptionAccessor } from './acai-ui-async-select-interface'
+import AcaiUiInput from '../input/acai-ui-input.vue'
+// Import EXPLÍCITO (todos os componentes da lib fazem assim): sem ele o
+// `<acai-ui-icon>` do template só resolve para quem registrou tudo globalmente
+// via `app.use(AcaiUI)`. Quem importa componente a componente — caminho oficial
+// para projeto existente — ficava sem a lupa e com warning no console.
+import AcaiUiIcon from '../icon/acai-ui-icon.vue'
+
+const props = withDefaults(defineProps<AsyncSelectProps<T>>(), {
+  iconRight: 'search',
+  debounce: 500,
+  minChars: 1,
+  autoSelectSingle: false,
+  emptyLabel: 'Nenhum resultado',
+  popupMaxHeight: '260px',
+  // Espelha o default do AcaiUiInput (`filled: true`). SEM isto, o boolean-casting do
+  // Vue faz a prop ausente virar `false`, e passaríamos `filled: false` pro input —
+  // ele ficava borderless em vez de idêntico ao input padrão (filled). As demais
+  // booleanas (disable/readonly/dense/clearable/required) têm default `false` no input,
+  // então o `false` do casting é inócuo.
+  filled: true,
+  outlined: false,
+})
+
+/**
+ * Ícone da lupa. O `?? 'search'` NÃO é redundante com o `withDefaults` acima:
+ * em componente GENÉRICO (`AsyncSelectProps<T>`) o TS não estreita o tipo pelos
+ * defaults, e `props.iconRight` continua `MaterialIconValues | undefined` mesmo
+ * com o default definido. Em runtime já chega 'search'; isto satisfaz o tipo.
+ */
+const iconeBusca = computed<MaterialIconValues>(() => props.iconRight ?? 'search')
+
+/** v-model = o OBJETO INTEIRO do item selecionado (não só um id). */
+const model = defineModel<T | null>({ default: null })
+
+const emit = defineEmits<{
+  select: [item: T]
+  error: [erro: unknown]
+}>()
+
+const slots = useSlots()
+
+const texto = ref('')
+const resultados = ref<T[]>([]) as Ref<T[]>
+const menuAberto = ref(false)
+const carregando = ref(false)
+const erroInterno = ref<string | null>(null)
+// Trava o watcher de digitação enquanto aplicamos o rótulo programaticamente
+// (seleção / valor inicial) — senão dispararia uma busca desnecessária.
+const bloqueiaPesquisa = ref(false)
+const inputRef = ref<InstanceType<typeof AcaiUiInput> | null>(null)
+
+// Classe única por instância: o `class` do q-menu cai no elemento PORTALIZADO
+// (`.q-menu`, fora da árvore do componente). Precisamos de um seletor determinístico
+// pra pinar a largura.
+const classeMenu = `acai-ui-async-select-menu--${getCurrentInstance()?.uid ?? 0}`
+
+const erroExibido = computed(() => props.errorMessage || erroInterno.value || null)
+
+// Passthrough pro AcaiUiInput via spread CONDICIONAL: com `exactOptionalPropertyTypes`
+// não se pode passar `undefined` explícito numa prop opcional (só omitir). Cada chave
+// só entra no objeto quando definida.
+const inputProps = computed(() => ({
+  // iconRight NÃO entra aqui: a lupa é renderizada via slot #append (clicável).
+  ...(props.label !== undefined && { label: props.label }),
+  ...(props.placeholder !== undefined && { placeholder: props.placeholder }),
+  ...(props.hint !== undefined && { hint: props.hint }),
+  ...(props.disable !== undefined && { disable: props.disable }),
+  ...(props.readonly !== undefined && { readonly: props.readonly }),
+  ...(props.dense !== undefined && { dense: props.dense }),
+  ...(props.outlined !== undefined && { outlined: props.outlined }),
+  ...(props.filled !== undefined && { filled: props.filled }),
+  ...(props.clearable !== undefined && { clearable: props.clearable }),
+  ...(props.required !== undefined && { required: props.required }),
+}))
+
+// ---- Acessores (chave do objeto ou função) ----
+function aplicarAcessor(item: T, acessor: OptionAccessor<T> | undefined): string {
+  if (acessor == null) return ''
+  if (typeof acessor === 'function') return acessor(item)
+  const valor = item[acessor]
+  return valor == null ? '' : String(valor)
+}
+function rotulo(item: T): string {
+  return aplicarAcessor(item, props.optionLabel)
+}
+function legenda(item: T): string {
+  return aplicarAcessor(item, props.optionCaption)
+}
+function chaveItem(item: T, index: number): string | number {
+  if (props.optionKey) return aplicarAcessor(item, props.optionKey) || index
+  const id = (item as Record<string, unknown>).id
+  return typeof id === 'string' || typeof id === 'number' ? id : index
+}
+
+// ---- Popup: âncora, largura, scroll ----
+// Âncora = `.q-field__control` (a CAIXA do input), NÃO o `$el` do acai-ui-input — que
+// é o `.q-field` inteiro e inclui o `.q-field__bottom` (hint/erro). Ancorando no `$el`,
+// o popup nascia abaixo do HINT, "descolado" do campo.
+const menuTarget = computed<HTMLElement | null>(() => {
+  const raiz = (inputRef.value?.$el ?? null) as HTMLElement | null
+  if (!raiz) return null
+  return raiz.querySelector<HTMLElement>('.q-field__control') ?? raiz
+})
+
+// O `fit` do q-menu só garante MIN-width — o position-engine do Quasar alarga o popup
+// conforme o conteúdo. Pinamos width/min/max na abertura pra casar EXATO com o campo.
+function pinarLarguraMenu(): void {
+  void nextTick(() => {
+    const alvo = menuTarget.value
+    const menu = document.querySelector<HTMLElement>(`.${classeMenu}`)
+    if (!alvo || !menu) return
+    const largura = `${alvo.getBoundingClientRect().width}px`
+    menu.style.width = largura
+    menu.style.minWidth = largura
+    menu.style.maxWidth = largura
+  })
+}
+
+function fecharMenu(e?: Event): void {
+  // Não fecha se o scroll veio de DENTRO do popup (rolar a própria lista de
+  // resultados). Só fecha no scroll de um ANCESTRAL do campo (página / corpo do
+  // modal) — que é quando o q-menu "descolaria".
+  const alvo = e?.target
+  if (alvo instanceof Node) {
+    const menu = document.querySelector(`.${classeMenu}`)
+    if (menu?.contains(alvo)) return
+  }
+  menuAberto.value = false
+}
+
+// No scroll o q-menu REPOSICIONA (é o que faz ele "descolar" do campo). Em vez disso,
+// fechamos. `capture: true` porque o scroll NÃO borbulha — mas é capturável, então
+// pegamos o scroll de QUALQUER ancestral (ex.: o corpo de um modal).
+function aoMostrarMenu(): void {
+  pinarLarguraMenu()
+  window.addEventListener('scroll', fecharMenu, { capture: true, passive: true })
+}
+function aoEsconderMenu(): void {
+  window.removeEventListener('scroll', fecharMenu, { capture: true })
+}
+
+// ---- Debounce ----
+let timer: ReturnType<typeof setTimeout> | null = null
+function cancelarAgendada(): void {
+  if (timer !== null) {
+    clearTimeout(timer)
+    timer = null
+  }
+}
+function agendarPesquisa(): void {
+  cancelarAgendada()
+  timer = setTimeout(() => {
+    timer = null
+    void pesquisar()
+  }, props.debounce)
+}
+
+// Busca IMEDIATA (clique/enter na lupa) — ignora o debounce. Segunda forma de
+// disparar, além do auto-search por digitação.
+function pesquisarAgora(): void {
+  cancelarAgendada()
+  void pesquisar()
+}
+function onLupaKeydown(e: KeyboardEvent): void {
+  if (e.key === 'Enter' || e.key === ' ') {
+    e.preventDefault()
+    pesquisarAgora()
+  }
+}
+
+onBeforeUnmount(() => {
+  cancelarAgendada()
+  window.removeEventListener('scroll', fecharMenu, { capture: true })
+})
+
+// ---- Busca ----
+async function pesquisar(): Promise<void> {
+  const termo = texto.value.trim()
+  if (termo.length < props.minChars) {
+    resultados.value = []
+    menuAberto.value = false
+    return
+  }
+  erroInterno.value = null
+  carregando.value = true
+  try {
+    const lista = await props.search(termo)
+    resultados.value = Array.isArray(lista) ? lista : []
+    if (props.autoSelectSingle && resultados.value.length === 1 && resultados.value[0]) {
+      selecionar(resultados.value[0])
+      return
+    }
+    // Abre sempre (mostra resultados OU o estado vazio / slot de ação).
+    menuAberto.value = true
+  } catch (e) {
+    resultados.value = []
+    menuAberto.value = Boolean(slots.empty)
+    erroInterno.value = 'Erro ao buscar. Tente novamente.'
+    emit('error', e)
+  } finally {
+    carregando.value = false
+  }
+}
+
+// ---- Seleção / limpeza ----
+function selecionar(item: T): void {
+  cancelarAgendada()
+  bloqueiaPesquisa.value = true
+  model.value = item
+  texto.value = rotulo(item)
+  menuAberto.value = false
+  emit('select', item)
+  void nextTick(() => {
+    bloqueiaPesquisa.value = false
+  })
+}
+
+function aoLimpar(): void {
+  model.value = null
+  resultados.value = []
+  menuAberto.value = false
+  erroInterno.value = null
+}
+
+// ---- Watchers ----
+// Digitação → agenda busca (com debounce). Vazio → limpa seleção.
+watch(texto, (valor) => {
+  if (bloqueiaPesquisa.value) return
+  cancelarAgendada()
+  if (!valor || !valor.trim()) {
+    model.value = null
+    resultados.value = []
+    menuAberto.value = false
+    erroInterno.value = null
+    return
+  }
+  // Texto ainda casa com o item já selecionado → não re-busca.
+  if (model.value && rotulo(model.value) === valor) return
+  agendarPesquisa()
+})
+
+// Valor inicial / externo (v-model setado de fora) → exibe o rótulo SEM buscar.
+watch(
+  model,
+  (item) => {
+    if (!item) return
+    const label = rotulo(item)
+    if (label && label !== texto.value) {
+      bloqueiaPesquisa.value = true
+      texto.value = label
+      void nextTick(() => {
+        bloqueiaPesquisa.value = false
+      })
+    }
+  },
+  { immediate: true },
+)
+</script>
+
+<style lang="scss" scoped>
+.acai-ui-async-select {
+  width: 100%;
+
+  // Lupa clicável: mesmo visual do ícone padrão do input, mas com affordance de
+  // clique. `var()` com fallback hex literal (sem SCSS var) pra compilar também via
+  // condition `vue` (consumidor sem o additionalData da lib).
+  .acai-ui-async-select__lupa {
+    cursor: pointer;
+
+    &:hover {
+      color: var(--acai-control-on, #0e2a50);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--acai-control-on, #0e2a50);
+      outline-offset: 2px;
+      border-radius: 4px;
+    }
+  }
+}
+</style>
+
+<!--
+  NÃO-scoped de propósito: o q-menu é PORTALIZADO pro <body>, fora da árvore (e do
+  `data-v`) deste componente — estilo scoped não o alcança. A LARGURA é pinada em JS
+  (o position-engine do Quasar sobrescreve estilo declarativo).
+-->
+<style lang="scss">
+.acai-ui-async-select-popup.q-menu {
+  // Dark-aware via tokens: o q-menu portalizado fica sob `body.body--dark`, então os
+  // `--acai-*` resolvem pros valores de dark. Sem isto, o menu do Quasar nasce BRANCO
+  // no escuro (o `$q.dark` não ativa — o dark vem do `.body--dark`).
+  background: var(--acai-surface, #fff);
+  color: var(--acai-text, #1f1f1f);
+  border: 1px solid var(--acai-border, #e0e0e0);
+  box-shadow: var(--acai-elevation, 0 6px 24px rgba(14, 42, 80, 0.12));
+
+  .acai-ui-async-select-lista {
+    padding: 4px 0;
+  }
+
+  .q-item {
+    color: var(--acai-text, #1f1f1f);
+    min-height: 44px; // alvo de clique confortável (eMAG 2.1)
+
+    .q-item__label--caption {
+      color: var(--acai-text-muted, #707070);
+    }
+
+    &:hover {
+      background: var(--acai-surface-hover, #f2f2f2);
+    }
+  }
+
+  // Separador entre itens do q-list (herda a borda-sutil do tema)
+  .q-separator {
+    background: var(--acai-border-subtle, #e4e8f1);
+  }
+
+  .acai-ui-async-select__empty {
+    color: var(--acai-text-muted, #707070);
+    font-size: 0.85rem;
+  }
+
+  .acai-ui-async-select__label {
+    font-weight: 500;
+  }
+}
+</style>

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

@@ -0,0 +1,19 @@
+export interface BadgeProps {
+  /** Texto do badge. Se omitido e `status` presente, usa o rótulo do mapa de status. */
+  label?: string
+  /**
+   * Cor Quasar (ex.: `'positive'`, `'negative'`, `'warning'`, `'info'`, `'primary'`,
+   * `'orange-10'`, `'grey'`). Sobrescreve a cor derivada do `status`.
+   */
+  color?: string
+  /**
+   * Valor de status resolvido pelo mapa padrão COMPARTILHADO com o atalho `.badge` do
+   * AcaiUiTable (`statusBadge`): define cor + rótulo. Aceita string (UPPER_SNAKE do
+   * backend), boolean (ATIVO/DESATIVADO) ou null (—).
+   */
+  status?: string | boolean | null
+  /** Contorno em vez de preenchido. */
+  outline?: boolean
+  /** Texto em maiúsculas. Default: `true`. */
+  uppercase?: boolean
+}

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

@@ -0,0 +1,40 @@
+<template>
+  <q-badge
+    class="acai-ui-badge"
+    :class="{ 'text-uppercase': uppercase }"
+    :color="corResolvida"
+    :label="rotuloResolvido"
+    :outline="outline"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { BadgeProps } from './acai-ui-badge-interface'
+import { statusBadge } from '../../constants/status-badge'
+
+const props = withDefaults(defineProps<BadgeProps>(), {
+  uppercase: true,
+  outline: false,
+})
+
+// Modo status: resolve cor + rótulo pelo mapa compartilhado (mesmo do `.badge` do
+// table). `color`/`label` explícitos sempre têm prioridade sobre o derivado.
+const resolvido = computed(() =>
+  props.status !== undefined ? statusBadge(props.status) : null,
+)
+const corResolvida = computed(() => props.color ?? resolvido.value?.color ?? 'primary')
+const rotuloResolvido = computed(() => props.label ?? resolvido.value?.label ?? '')
+</script>
+
+<style lang="scss" scoped>
+.acai-ui-badge {
+  // Mesmo visual do atalho `.badge` do table, mas SELF-CONTAINED (não depende do
+  // `.badge` global, que só existe pra quem importa `scss/tokens`). Assim o badge
+  // chega estilizado no dist pra qualquer consumidor. A cor (`bg-*`) vem do q-badge
+  // via `color=`, então recolore no daltônico junto com chips/botões.
+  font-size: 0.875rem;
+  font-weight: bold;
+  padding: 0.5rem;
+}
+</style>

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

@@ -0,0 +1,17 @@
+import type { MaterialIconValues } from '../../constants/lista-icons'
+
+/** Variantes visuais do banner. Cada uma define cor de fundo/texto e ícone default. */
+export type BannerType = 'info' | 'warning' | 'error' | 'success'
+
+export interface BannerProps {
+  /** Variante visual (define cores + ícone default). Default: 'info'. */
+  type?: BannerType
+  /** Título em negrito acima do conteúdo (opcional). */
+  title?: string
+  /** Sobrescreve o ícone default da variante (lista curada da lib). */
+  icon?: MaterialIconValues
+  /** Esconde o ícone à esquerda. */
+  hideIcon?: boolean
+  /** Exibe um "X" que fecha o banner (emite `dismiss`). */
+  dismissible?: boolean
+}

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

@@ -0,0 +1,47 @@
+.acai-ui-banner {
+  border-radius: $radius-md;
+  font-size: 0.875rem;
+  line-height: 1.5;
+
+  .acai-ui-banner__title {
+    font-weight: 700;
+    margin-bottom: 2px;
+  }
+
+  .acai-ui-banner__fechar {
+    color: inherit;
+  }
+
+  // O slot #avatar do q-banner vem com a classe `self-start` (align-self:flex-start),
+  // colando o ícone no topo — fica torto em banner de 1 linha. Centraliza junto ao
+  // texto. O pai `.q-banner` já é `items-center`, então em banner multi-linha o ícone
+  // fica centrado no bloco (comportamento esperado da maioria dos design systems).
+  // `!important` porque o `.self-start` do Quasar também usa `!important`.
+  :deep(.q-banner__avatar) {
+    align-self: center !important;
+  }
+
+  // Cores de status via vars da camada de tema (_themes.scss): o par fundo/texto
+  // muda sozinho conforme tema escuro e modo daltônico (paleta CVD-safe), cobrindo
+  // as combinações. Fallback = par fundo-50 / texto-900 (contraste ≥ 4.5:1, eMAG 4.1).
+  // Ícone + texto garantem que a info não depende só da cor (eMAG 4.2).
+  &--info {
+    background: var(--acai-status-info-bg, #{$color-blue-50});
+    color: var(--acai-status-info-fg, #{$color-blue-900});
+  }
+
+  &--warning {
+    background: var(--acai-status-warning-bg, #{$color-yellow-50});
+    color: var(--acai-status-warning-fg, #{$color-yellow-900});
+  }
+
+  &--error {
+    background: var(--acai-status-error-bg, #{$color-red-50});
+    color: var(--acai-status-error-fg, #{$color-red-900});
+  }
+
+  &--success {
+    background: var(--acai-status-success-bg, #{$color-green-50});
+    color: var(--acai-status-success-fg, #{$color-green-900});
+  }
+}

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

@@ -0,0 +1,85 @@
+<template>
+  <q-banner
+    v-if="visivel"
+    :class="['acai-ui-banner', `acai-ui-banner--${type}`]"
+    :inline-actions="dismissible"
+    :role="role"
+    rounded
+  >
+    <template v-if="!hideIcon" #avatar>
+      <acai-ui-icon :name="iconeExibido" size="md" />
+    </template>
+
+    <div v-if="title" class="acai-ui-banner__title">{{ title }}</div>
+    <slot />
+
+    <template v-if="dismissible" #action>
+      <q-btn
+        aria-label="Fechar aviso"
+        class="acai-ui-banner__fechar"
+        dense
+        flat
+        round
+        @click="fechar"
+      >
+        <acai-ui-icon name="close" size="sm" />
+      </q-btn>
+    </template>
+  </q-banner>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type { MaterialIconValues } from '../../constants/lista-icons'
+import type { BannerType } from './acai-ui-banner-interface'
+import AcaiUiIcon from '../icon/acai-ui-icon.vue'
+
+// Props definidas INLINE (mesmo quirk do AcaiUiCard): o compilador do Vue não
+// resolve defaults quando a interface importada usa outro alias importado.
+const props = withDefaults(
+  defineProps<{
+    /** Variante visual (define cores + ícone default). */
+    type?: BannerType
+    /** Título em negrito acima do conteúdo. */
+    title?: string
+    /** Sobrescreve o ícone default da variante. */
+    icon?: MaterialIconValues
+    /** Esconde o ícone à esquerda. */
+    hideIcon?: boolean
+    /** Exibe um "X" que fecha o banner (emite `dismiss`). */
+    dismissible?: boolean
+  }>(),
+  {
+    type: 'info',
+    hideIcon: false,
+    dismissible: false,
+  },
+)
+
+const emit = defineEmits<{
+  dismiss: []
+}>()
+
+const visivel = ref(true)
+
+const ICONE_POR_TIPO: Record<BannerType, MaterialIconValues> = {
+  info: 'info',
+  warning: 'warning_amber',
+  error: 'error',
+  success: 'check_circle',
+}
+
+const iconeExibido = computed<MaterialIconValues>(() => props.icon ?? ICONE_POR_TIPO[props.type])
+
+// Leitores de tela: avisos urgentes interrompem (alert), informativos não (status).
+const role = computed(() => (props.type === 'warning' || props.type === 'error' ? 'alert' : 'status'))
+
+function fechar(): void {
+  visivel.value = false
+  emit('dismiss')
+}
+</script>
+
+<style lang="scss" scoped>
+@import './acai-ui-banner-styles.scss';
+</style>

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

@@ -0,0 +1,21 @@
+import type { QBtnProps } from 'quasar'
+import type { MaterialIconValues } from '../../constants/lista-icons'
+import type { MedidasKeys } from '../../constants/medidas-espacos'
+import type { TooltipPosition } from '../tooltip/acai-ui-tooltip-interface'
+
+export interface ButtonProps extends Omit<QBtnProps, 'icon' | 'iconRight' | 'size'> {
+  icon?: MaterialIconValues
+  iconRight?: MaterialIconValues
+  size?: MedidasKeys
+  fullWidth?: boolean
+  /** Rótulo acessível. Obrigatório em botões icon-only (eMAG 4.2). */
+  ariaLabel?: string
+  /**
+   * Texto do tooltip. Quando informado, renderiza um `AcaiUiTooltip` ancorado
+   * no botão. Se o botão for icon-only (sem `label`) e não houver `ariaLabel`,
+   * o texto do tooltip também vira o nome acessível (eMAG 4.2).
+   */
+  tooltip?: string
+  /** Posição do tooltip. @default 'top' */
+  tooltipPosition?: TooltipPosition
+}