acai-ui 1.65.5

package/dist/index99.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index99.cjs","sources":["../src/hooks/use-tamanho-elemento.ts"],"sourcesContent":["import { onBeforeUnmount, onMounted, ref, type Ref } from 'vue'\n\n/**\n * Mede a caixa de um elemento e mantém a medida atualizada.\n *\n * Existe pro gráfico renderizar 1:1 em vez de esticar o `viewBox`. Esticar\n * escalaria o TEXTO junto: a mesma folha em 380px e em 1400px teria rótulo de\n * 8px e de 20px — abaixo do legível num caso, e ignorando a preferência de\n * tamanho de fonte do usuário (`html { font-size: X% }`) no outro.\n *\n * SSR-safe: nada toca o DOM fora do `onMounted`, e cada observador é criado só\n * se existir no ambiente.\n */\nexport interface TamanhoElemento {\n  largura: Ref<number>\n  altura: Ref<number>\n  /** `false` até a primeira medição real. Quem desenha usa o padrão nesse meio-tempo. */\n  medido: Ref<boolean>\n  /** Força uma releitura (troca de aba, fim de animação, mudança de fonte). */\n  remedir: () => void\n}\n\nexport interface PadraoTamanho {\n  largura?: number\n  altura?: number\n}\n\nexport function useTamanhoElemento(\n  alvo: Ref<HTMLElement | null | undefined>,\n  padrao: PadraoTamanho = {},\n): TamanhoElemento {\n  // Antes de medir, renderizar no padrão em vez de esconder: dá HTML válido em\n  // SSR (bom pra impressão) e evita o salto de layout do \"aparece do nada\".\n  const largura = ref(padrao.largura ?? 640)\n  const altura = ref(padrao.altura ?? 320)\n  const medido = ref(false)\n\n  let observadorTamanho: ResizeObserver | null = null\n  let observadorVisibilidade: IntersectionObserver | null = null\n  let agendado = 0\n\n  function medir(): void {\n    const el = alvo.value\n    if (!el) return\n    const caixa = el.getBoundingClientRect()\n    // Caixa zerada = ainda sem layout (montado escondido). Manter o padrão é\n    // melhor do que gravar 0 e desenhar um SVG vazio.\n    if (caixa.width <= 0 && caixa.height <= 0) return\n\n    if (caixa.width > 0) largura.value = caixa.width\n    if (caixa.height > 0) altura.value = caixa.height\n    medido.value = true\n  }\n\n  /**\n   * Agenda a medição para o próximo frame.\n   *\n   * Medir SÍNCRONO dentro do callback do ResizeObserver dispara o aviso\n   * \"ResizeObserver loop completed with undelivered notifications\" — e aqui é\n   * garantido, porque o próprio gráfico muda a altura do container que está\n   * sendo observado (`autoHeight`).\n   */\n  function remedir(): void {\n    if (typeof requestAnimationFrame === 'undefined') {\n      medir()\n      return\n    }\n    if (agendado) return\n    agendado = requestAnimationFrame(() => {\n      agendado = 0\n      medir()\n    })\n  }\n\n  onMounted(() => {\n    medir()\n    // No frame do mount a fonte pode não ter sido diagramada ainda.\n    remedir()\n\n    const el = alvo.value\n    if (!el) return\n\n    if (typeof ResizeObserver !== 'undefined') {\n      observadorTamanho = new ResizeObserver(remedir)\n      observadorTamanho.observe(el)\n    }\n\n    // Gráfico montado dentro de aba/expansion/modal fechado nasce com caixa 0 e\n    // só ganha layout ao aparecer — e aí a CAIXA não muda, então o\n    // ResizeObserver nunca dispara e o gráfico fica no tamanho padrão pra\n    // sempre. Mesma armadilha já documentada no acai-ui-table-justificativa.\n    if (typeof IntersectionObserver !== 'undefined') {\n      observadorVisibilidade = new IntersectionObserver((entradas) => {\n        if (entradas.some((e) => e.isIntersecting)) remedir()\n      })\n      observadorVisibilidade.observe(el)\n    }\n  })\n\n  onBeforeUnmount(() => {\n    observadorTamanho?.disconnect()\n    observadorVisibilidade?.disconnect()\n    if (agendado && typeof cancelAnimationFrame !== 'undefined') cancelAnimationFrame(agendado)\n  })\n\n  return { largura, altura, medido, remedir }\n}\n"],"names":["ref","onMounted","onBeforeUnmount"],"mappings":";;;AA2BO,SAAS,mBACd,MACA,SAAwB,IACP;AAGjB,QAAM,UAAUA,IAAAA,IAAI,OAAO,WAAW,GAAG;AACzC,QAAM,SAASA,IAAAA,IAAI,OAAO,UAAU,GAAG;AACvC,QAAM,SAASA,IAAAA,IAAI,KAAK;AAExB,MAAI,oBAA2C;AAC/C,MAAI,yBAAsD;AAC1D,MAAI,WAAW;AAEf,WAAS,QAAc;AACrB,UAAM,KAAK,KAAK;AAChB,QAAI,CAAC,GAAI;AACT,UAAM,QAAQ,GAAG,sBAAA;AAGjB,QAAI,MAAM,SAAS,KAAK,MAAM,UAAU,EAAG;AAE3C,QAAI,MAAM,QAAQ,EAAG,SAAQ,QAAQ,MAAM;AAC3C,QAAI,MAAM,SAAS,EAAG,QAAO,QAAQ,MAAM;AAC3C,WAAO,QAAQ;AAAA,EACjB;AAUA,WAAS,UAAgB;AACvB,QAAI,OAAO,0BAA0B,aAAa;AAChD,YAAA;AACA;AAAA,IACF;AACA,QAAI,SAAU;AACd,eAAW,sBAAsB,MAAM;AACrC,iBAAW;AACX,YAAA;AAAA,IACF,CAAC;AAAA,EACH;AAEAC,MAAAA,UAAU,MAAM;AACd,UAAA;AAEA,YAAA;AAEA,UAAM,KAAK,KAAK;AAChB,QAAI,CAAC,GAAI;AAET,QAAI,OAAO,mBAAmB,aAAa;AACzC,0BAAoB,IAAI,eAAe,OAAO;AAC9C,wBAAkB,QAAQ,EAAE;AAAA,IAC9B;AAMA,QAAI,OAAO,yBAAyB,aAAa;AAC/C,+BAAyB,IAAI,qBAAqB,CAAC,aAAa;AAC9D,YAAI,SAAS,KAAK,CAAC,MAAM,EAAE,cAAc,EAAG,SAAA;AAAA,MAC9C,CAAC;AACD,6BAAuB,QAAQ,EAAE;AAAA,IACnC;AAAA,EACF,CAAC;AAEDC,MAAAA,gBAAgB,MAAM;AACpB,2DAAmB;AACnB,qEAAwB;AACxB,QAAI,YAAY,OAAO,yBAAyB,kCAAkC,QAAQ;AAAA,EAC5F,CAAC;AAED,SAAO,EAAE,SAAS,QAAQ,QAAQ,QAAA;AACpC;;"}

package/dist/index99.mjs

@@ -0,0 +1,55 @@
+import { ref, onMounted, onBeforeUnmount } from "vue";
+function useTamanhoElemento(alvo, padrao = {}) {
+  const largura = ref(padrao.largura ?? 640);
+  const altura = ref(padrao.altura ?? 320);
+  const medido = ref(false);
+  let observadorTamanho = null;
+  let observadorVisibilidade = null;
+  let agendado = 0;
+  function medir() {
+    const el = alvo.value;
+    if (!el) return;
+    const caixa = el.getBoundingClientRect();
+    if (caixa.width <= 0 && caixa.height <= 0) return;
+    if (caixa.width > 0) largura.value = caixa.width;
+    if (caixa.height > 0) altura.value = caixa.height;
+    medido.value = true;
+  }
+  function remedir() {
+    if (typeof requestAnimationFrame === "undefined") {
+      medir();
+      return;
+    }
+    if (agendado) return;
+    agendado = requestAnimationFrame(() => {
+      agendado = 0;
+      medir();
+    });
+  }
+  onMounted(() => {
+    medir();
+    remedir();
+    const el = alvo.value;
+    if (!el) return;
+    if (typeof ResizeObserver !== "undefined") {
+      observadorTamanho = new ResizeObserver(remedir);
+      observadorTamanho.observe(el);
+    }
+    if (typeof IntersectionObserver !== "undefined") {
+      observadorVisibilidade = new IntersectionObserver((entradas) => {
+        if (entradas.some((e) => e.isIntersecting)) remedir();
+      });
+      observadorVisibilidade.observe(el);
+    }
+  });
+  onBeforeUnmount(() => {
+    observadorTamanho == null ? void 0 : observadorTamanho.disconnect();
+    observadorVisibilidade == null ? void 0 : observadorVisibilidade.disconnect();
+    if (agendado && typeof cancelAnimationFrame !== "undefined") cancelAnimationFrame(agendado);
+  });
+  return { largura, altura, medido, remedir };
+}
+export {
+  useTamanhoElemento
+};
+//# sourceMappingURL=index99.mjs.map

package/dist/index99.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index99.mjs","sources":["../src/hooks/use-tamanho-elemento.ts"],"sourcesContent":["import { onBeforeUnmount, onMounted, ref, type Ref } from 'vue'\n\n/**\n * Mede a caixa de um elemento e mantém a medida atualizada.\n *\n * Existe pro gráfico renderizar 1:1 em vez de esticar o `viewBox`. Esticar\n * escalaria o TEXTO junto: a mesma folha em 380px e em 1400px teria rótulo de\n * 8px e de 20px — abaixo do legível num caso, e ignorando a preferência de\n * tamanho de fonte do usuário (`html { font-size: X% }`) no outro.\n *\n * SSR-safe: nada toca o DOM fora do `onMounted`, e cada observador é criado só\n * se existir no ambiente.\n */\nexport interface TamanhoElemento {\n  largura: Ref<number>\n  altura: Ref<number>\n  /** `false` até a primeira medição real. Quem desenha usa o padrão nesse meio-tempo. */\n  medido: Ref<boolean>\n  /** Força uma releitura (troca de aba, fim de animação, mudança de fonte). */\n  remedir: () => void\n}\n\nexport interface PadraoTamanho {\n  largura?: number\n  altura?: number\n}\n\nexport function useTamanhoElemento(\n  alvo: Ref<HTMLElement | null | undefined>,\n  padrao: PadraoTamanho = {},\n): TamanhoElemento {\n  // Antes de medir, renderizar no padrão em vez de esconder: dá HTML válido em\n  // SSR (bom pra impressão) e evita o salto de layout do \"aparece do nada\".\n  const largura = ref(padrao.largura ?? 640)\n  const altura = ref(padrao.altura ?? 320)\n  const medido = ref(false)\n\n  let observadorTamanho: ResizeObserver | null = null\n  let observadorVisibilidade: IntersectionObserver | null = null\n  let agendado = 0\n\n  function medir(): void {\n    const el = alvo.value\n    if (!el) return\n    const caixa = el.getBoundingClientRect()\n    // Caixa zerada = ainda sem layout (montado escondido). Manter o padrão é\n    // melhor do que gravar 0 e desenhar um SVG vazio.\n    if (caixa.width <= 0 && caixa.height <= 0) return\n\n    if (caixa.width > 0) largura.value = caixa.width\n    if (caixa.height > 0) altura.value = caixa.height\n    medido.value = true\n  }\n\n  /**\n   * Agenda a medição para o próximo frame.\n   *\n   * Medir SÍNCRONO dentro do callback do ResizeObserver dispara o aviso\n   * \"ResizeObserver loop completed with undelivered notifications\" — e aqui é\n   * garantido, porque o próprio gráfico muda a altura do container que está\n   * sendo observado (`autoHeight`).\n   */\n  function remedir(): void {\n    if (typeof requestAnimationFrame === 'undefined') {\n      medir()\n      return\n    }\n    if (agendado) return\n    agendado = requestAnimationFrame(() => {\n      agendado = 0\n      medir()\n    })\n  }\n\n  onMounted(() => {\n    medir()\n    // No frame do mount a fonte pode não ter sido diagramada ainda.\n    remedir()\n\n    const el = alvo.value\n    if (!el) return\n\n    if (typeof ResizeObserver !== 'undefined') {\n      observadorTamanho = new ResizeObserver(remedir)\n      observadorTamanho.observe(el)\n    }\n\n    // Gráfico montado dentro de aba/expansion/modal fechado nasce com caixa 0 e\n    // só ganha layout ao aparecer — e aí a CAIXA não muda, então o\n    // ResizeObserver nunca dispara e o gráfico fica no tamanho padrão pra\n    // sempre. Mesma armadilha já documentada no acai-ui-table-justificativa.\n    if (typeof IntersectionObserver !== 'undefined') {\n      observadorVisibilidade = new IntersectionObserver((entradas) => {\n        if (entradas.some((e) => e.isIntersecting)) remedir()\n      })\n      observadorVisibilidade.observe(el)\n    }\n  })\n\n  onBeforeUnmount(() => {\n    observadorTamanho?.disconnect()\n    observadorVisibilidade?.disconnect()\n    if (agendado && typeof cancelAnimationFrame !== 'undefined') cancelAnimationFrame(agendado)\n  })\n\n  return { largura, altura, medido, remedir }\n}\n"],"names":[],"mappings":";AA2BO,SAAS,mBACd,MACA,SAAwB,IACP;AAGjB,QAAM,UAAU,IAAI,OAAO,WAAW,GAAG;AACzC,QAAM,SAAS,IAAI,OAAO,UAAU,GAAG;AACvC,QAAM,SAAS,IAAI,KAAK;AAExB,MAAI,oBAA2C;AAC/C,MAAI,yBAAsD;AAC1D,MAAI,WAAW;AAEf,WAAS,QAAc;AACrB,UAAM,KAAK,KAAK;AAChB,QAAI,CAAC,GAAI;AACT,UAAM,QAAQ,GAAG,sBAAA;AAGjB,QAAI,MAAM,SAAS,KAAK,MAAM,UAAU,EAAG;AAE3C,QAAI,MAAM,QAAQ,EAAG,SAAQ,QAAQ,MAAM;AAC3C,QAAI,MAAM,SAAS,EAAG,QAAO,QAAQ,MAAM;AAC3C,WAAO,QAAQ;AAAA,EACjB;AAUA,WAAS,UAAgB;AACvB,QAAI,OAAO,0BAA0B,aAAa;AAChD,YAAA;AACA;AAAA,IACF;AACA,QAAI,SAAU;AACd,eAAW,sBAAsB,MAAM;AACrC,iBAAW;AACX,YAAA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,YAAU,MAAM;AACd,UAAA;AAEA,YAAA;AAEA,UAAM,KAAK,KAAK;AAChB,QAAI,CAAC,GAAI;AAET,QAAI,OAAO,mBAAmB,aAAa;AACzC,0BAAoB,IAAI,eAAe,OAAO;AAC9C,wBAAkB,QAAQ,EAAE;AAAA,IAC9B;AAMA,QAAI,OAAO,yBAAyB,aAAa;AAC/C,+BAAyB,IAAI,qBAAqB,CAAC,aAAa;AAC9D,YAAI,SAAS,KAAK,CAAC,MAAM,EAAE,cAAc,EAAG,SAAA;AAAA,MAC9C,CAAC;AACD,6BAAuB,QAAQ,EAAE;AAAA,IACnC;AAAA,EACF,CAAC;AAED,kBAAgB,MAAM;AACpB,2DAAmB;AACnB,qEAAwB;AACxB,QAAI,YAAY,OAAO,yBAAyB,kCAAkC,QAAQ;AAAA,EAC5F,CAAC;AAED,SAAO,EAAE,SAAS,QAAQ,QAAQ,QAAA;AACpC;"}

package/dist/plugin.d.ts

@@ -0,0 +1,37 @@
+import { App, InjectionKey, Ref } from 'vue';
+import { BreadcrumbItem } from './components/container/acai-ui-container-interface';
+/**
+ * Resultado esperado de um composable de breadcrumbs registrado no plugin.
+ * O projeto consumidor implementa `useBreadcrumbs` e a lib invoca o
+ * composable dentro do setup do AcaiUiContainer.
+ */
+export interface BreadcrumbsResolverResult {
+    trilha: Ref<BreadcrumbItem[]> | {
+        value: BreadcrumbItem[];
+    };
+    exibirBreadcrumbs?: Ref<boolean> | {
+        value: boolean;
+    };
+}
+export type BreadcrumbsResolver = (title: string) => BreadcrumbsResolverResult;
+export interface AcaiUIOptions {
+    /**
+     * Composable que recebe o `title` da página atual e retorna a trilha
+     * de breadcrumbs. Registrado no setup global da aplicação, é invocado
+     * automaticamente pelo `<acai-ui-container>` quando o consumidor não
+     * passa `breadcrumbs` por prop.
+     *
+     * Exemplo:
+     *   import { useBreadcrumbs } from 'src/hooks/use-breadcrumbs'
+     *   app.use(AcaiUI, { useBreadcrumbs })
+     */
+    useBreadcrumbs?: BreadcrumbsResolver;
+}
+export interface AcaiUIConfig {
+    useBreadcrumbs: BreadcrumbsResolver | null;
+}
+export declare const ACAI_UI_CONFIG: InjectionKey<AcaiUIConfig>;
+export declare const AcaiUI: {
+    install(app: App, options?: AcaiUIOptions): void;
+};
+//# sourceMappingURL=plugin.d.ts.map

package/dist/plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAa,YAAY,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC5D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oDAAoD,CAAA;AA4CxF;;;;GAIG;AACH,MAAM,WAAW,yBAAyB;IACxC,MAAM,EAAE,GAAG,CAAC,cAAc,EAAE,CAAC,GAAG;QAAE,KAAK,EAAE,cAAc,EAAE,CAAA;KAAE,CAAA;IAC3D,iBAAiB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,GAAG;QAAE,KAAK,EAAE,OAAO,CAAA;KAAE,CAAA;CACtD;AAED,MAAM,MAAM,mBAAmB,GAAG,CAAC,KAAK,EAAE,MAAM,KAAK,yBAAyB,CAAA;AAE9E,MAAM,WAAW,aAAa;IAC5B;;;;;;;;;OASG;IACH,cAAc,CAAC,EAAE,mBAAmB,CAAA;CACrC;AAED,MAAM,WAAW,YAAY;IAC3B,cAAc,EAAE,mBAAmB,GAAG,IAAI,CAAA;CAC3C;AAQD,eAAO,MAAM,cAAc,EAAoC,YAAY,CAAC,YAAY,CAAC,CAAA;AAEzF,eAAO,MAAM,MAAM;iBACJ,GAAG,YAAW,aAAa;CAiDzC,CAAA"}

package/dist/scss/_badge.scss

@@ -0,0 +1,12 @@
+// Açaí UI — Badge global
+//
+// Estilo padrão para badges/etiquetas usadas em todos os componentes
+// (Tabela, Drawer, Chip de status, etc.). Alinhado com a paleta DETRAN-PA.
+//
+// Uso: aplicar a classe `.badge` em qualquer <q-badge>.
+
+.badge {
+  font-size: 0.875rem;
+  font-weight: bold;
+  padding: 0.5rem; // 8px em todos os lados
+}

package/dist/scss/_breakpoints.scss

@@ -0,0 +1,102 @@
+// Açaí UI — Escala de breakpoints
+//
+// ÚNICA fonte de verdade pra "onde a lib muda de forma". Antes disto cada
+// componente inventava o próprio número — form 999/1299, modal 900, tabs 1600,
+// drawer 1080, swagger 620/1100 — e nada conversava entre si: o mesmo app
+// mudava de layout em cinco larguras diferentes conforme o componente.
+//
+// A escala é a MESMA do Quasar (`$q.screen`, classes `lt-*`/`gt-*`). Isso é o
+// que faz um `@include ate-tablet` aqui dentro e um `v-if="$q.screen.lt.md"` no
+// consumidor virarem na mesma largura, em vez de brigarem por 24px.
+//
+//   xs   <  600px    celular
+//   sm   >= 600px    celular grande / tablet retrato
+//   md   >= 1024px   tablet paisagem / laptop
+//   lg   >= 1440px   desktop
+//   xl   >= 1920px   desktop grande
+//
+// Uso (o @import é OBRIGATÓRIO — ver CLAUDE.md §6: consumidores via condition
+// `vue` compilam o source sem o additionalData da lib):
+//
+//   @import '../../scss/breakpoints';
+//
+//   .foo {
+//     padding: 24px;
+//     @include ate-mobile { padding: 8px; }
+//   }
+
+$bp-sm: 600px;
+$bp-md: 1024px;
+$bp-lg: 1440px;
+$bp-xl: 1920px;
+
+// O -0.02px existe pra não deixar "terra de ninguém": numa tela fracionária ou
+// com zoom do navegador a largura pode ser 599.5px, que não casaria nem com
+// `max-width: 599px` nem com `min-width: 600px` — e o elemento ficaria sem
+// nenhuma das duas regras. É a mesma técnica do Bootstrap.
+$bp-sm-max: $bp-sm - 0.02;
+$bp-md-max: $bp-md - 0.02;
+$bp-lg-max: $bp-lg - 0.02;
+
+// ========================================
+// "Deste tamanho pra baixo" — o caso comum (a lib nasceu desktop-first)
+// ========================================
+@mixin ate-mobile {
+  @media (max-width: $bp-sm-max) {
+    @content;
+  }
+}
+
+@mixin ate-tablet {
+  @media (max-width: $bp-md-max) {
+    @content;
+  }
+}
+
+@mixin ate-laptop {
+  @media (max-width: $bp-lg-max) {
+    @content;
+  }
+}
+
+// ========================================
+// "Deste tamanho pra cima"
+// ========================================
+@mixin de-tablet {
+  @media (min-width: $bp-sm) {
+    @content;
+  }
+}
+
+@mixin de-laptop {
+  @media (min-width: $bp-md) {
+    @content;
+  }
+}
+
+@mixin de-desktop {
+  @media (min-width: $bp-lg) {
+    @content;
+  }
+}
+
+// ========================================
+// Faixa fechada
+// ========================================
+@mixin so-tablet {
+  @media (min-width: $bp-sm) and (max-width: $bp-md-max) {
+    @content;
+  }
+}
+
+// ========================================
+// Ponteiro grosso (dedo) — NÃO é largura
+// ========================================
+// Alvo de toque de 44px (WCAG 2.5.5 / eMAG) é sobre COMO se aponta, não sobre
+// quanto cabe: um tablet de 1024px com touch precisa, um laptop de 1024px com
+// mouse não. Por isso mora numa media feature própria, e não num breakpoint.
+@mixin toque {
+  @media (pointer: coarse) {
+    @content;
+  }
+}

package/dist/scss/_color-utilities.scss

@@ -0,0 +1,105 @@
+// Açaí UI — Color utility classes
+//
+// Gera `.bg-{token}` e `.text-{token}` para todos os tokens de cor da lib.
+// Permite usar qualquer cor da lib em <q-badge :color>, <q-chip>, classes inline, etc.
+//
+// IMPORTANTE: não gera para as 6 cores semânticas (primary/positive/negative/warning/info/accent)
+// porque o Quasar já gera essas classes via sassVariables (vite.config.ts).
+//
+// Uso:
+//   <q-badge color="color-primary-900" />   → aplica .bg-color-primary-900
+//   <q-badge class="bg-color-yellow-700 text-color-yellow-50" />
+//   <span class="text-color-red-600">erro</span>
+
+$color-tokens: (
+  // Primary scale
+  color-primary-25: $color-primary-25,
+  color-primary-50: $color-primary-50,
+  color-primary-100: $color-primary-100,
+  color-primary-200: $color-primary-200,
+  color-primary-300: $color-primary-300,
+  color-primary-400: $color-primary-400,
+  color-primary-500: $color-primary-500,
+  color-primary-600: $color-primary-600,
+  color-primary-700: $color-primary-700,
+  color-primary-800: $color-primary-800,
+  color-primary-900: $color-primary-900,
+
+  // Gray scale
+  color-gray-5: $color-gray-5,
+  color-gray-10: $color-gray-10,
+  color-gray-50: $color-gray-50,
+  color-gray-100: $color-gray-100,
+  color-gray-200: $color-gray-200,
+  color-gray-300: $color-gray-300,
+  color-gray-400: $color-gray-400,
+  color-gray-500: $color-gray-500,
+  color-gray-600: $color-gray-600,
+  color-gray-700: $color-gray-700,
+  color-gray-800: $color-gray-800,
+  color-gray-900: $color-gray-900,
+  color-gray-disabled-700: $color-gray-disabled-700,
+  color-white-100: $color-white-100,
+
+  // Red scale
+  color-red-50: $color-red-50,
+  color-red-100: $color-red-100,
+  color-red-200: $color-red-200,
+  color-red-300: $color-red-300,
+  color-red-400: $color-red-400,
+  color-red-500: $color-red-500,
+  color-red-600: $color-red-600,
+  color-red-700: $color-red-700,
+  color-red-800: $color-red-800,
+  color-red-900: $color-red-900,
+
+  // Yellow scale
+  color-yellow-50: $color-yellow-50,
+  color-yellow-100: $color-yellow-100,
+  color-yellow-200: $color-yellow-200,
+  color-yellow-300: $color-yellow-300,
+  color-yellow-400: $color-yellow-400,
+  color-yellow-500: $color-yellow-500,
+  color-yellow-600: $color-yellow-600,
+  color-yellow-700: $color-yellow-700,
+  color-yellow-800: $color-yellow-800,
+  color-yellow-900: $color-yellow-900,
+
+  // Green scale
+  color-green-50: $color-green-50,
+  color-green-100: $color-green-100,
+  color-green-200: $color-green-200,
+  color-green-300: $color-green-300,
+  color-green-400: $color-green-400,
+  color-green-500: $color-green-500,
+  color-green-600: $color-green-600,
+  color-green-700: $color-green-700,
+  color-green-800: $color-green-800,
+  color-green-900: $color-green-900,
+
+  // Blue scale
+  color-blue-50: $color-blue-50,
+  color-blue-100: $color-blue-100,
+  color-blue-200: $color-blue-200,
+  color-blue-300: $color-blue-300,
+  color-blue-400: $color-blue-400,
+  color-blue-500: $color-blue-500,
+  color-blue-600: $color-blue-600,
+  color-blue-700: $color-blue-700,
+  color-blue-800: $color-blue-800,
+  color-blue-900: $color-blue-900,
+
+  // Dark
+  dark-page: $dark-page,
+);
+
+@each $name, $color in $color-tokens {
+  .bg-#{$name} {
+    background-color: $color !important;
+    color: white;
+  }
+
+  .text-#{$name} {
+    color: $color !important;
+  }
+}

package/dist/scss/_controls.scss

@@ -0,0 +1,135 @@
+// Açaí UI — Tokens de "controles" (botão, dropdown, etc.)
+//
+// Centraliza padding/min-height/font-size dos elementos clicáveis tipo botão.
+// Mudou aqui → muda em todos os componentes que herdam (Button, Dropdown, ...).
+//
+// Uso:
+//   @include control-base;          // reset comum + reset Quasar + alvo de toque
+//   @include control-md;             // tamanho médio
+//   @include control-icon-only-md;   // botão só com ícone, md
+
+@import 'breakpoints';
+
+// ========================================
+// Alvo de toque (WCAG 2.5.5 / eMAG)
+// ========================================
+//
+// A recomendação pede 44×44 e mede o ALVO, não o desenho. Estes controles saem
+// bem abaixo disso — `control-md` dá ~28px de altura, `control-icon-only-sm` dá
+// 32px — mas simplesmente esticá-los pra 44 engordaria toda a interface no
+// desktop, onde 28px com mouse é confortável e correto.
+//
+// Então a área clicável cresce numa camada invisível e o desenho fica igual.
+//
+// `::after` e NÃO `::before`: o Quasar já usa `.q-btn:before` pra sombra do
+// botão (conferido no `quasar.css`) — sobrescrever apagaria a elevação. O
+// `:after` está livre (zero ocorrências no CSS do Quasar).
+//
+// Só sob `pointer: coarse`: é sobre COMO se aponta, não sobre quanto cabe. Um
+// tablet de 1024px com dedo precisa; um laptop de 1024px com mouse não. Por
+// isso não é breakpoint de largura.
+//
+// A caixa é centrada e usa `min-width/min-height`, então acompanha um controle
+// que já seja maior que 44 em vez de encolhê-lo.
+@mixin alvo-toque($minimo: 44px) {
+  @include toque {
+    // `.q-btn` já é `position: relative` (base do Quasar), mas quem incluir
+    // isto num elemento solto precisa da âncora — daí a garantia explícita.
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 100%;
+      height: 100%;
+      min-width: $minimo;
+      min-height: $minimo;
+    }
+  }
+}
+
+// ========================================
+// Base — reset Quasar + tipografia comum
+// ========================================
+@mixin control-base {
+  border-radius: $radius-lg;
+  font-weight: 600;
+  font-family: inherit;
+  line-height: 1;
+  border: 2px solid transparent;
+  transition: all 0.2s ease;
+  box-shadow: none;
+  text-transform: none;
+  letter-spacing: normal;
+
+  // Todo controle que passa por aqui ganha o alvo de 44px no toque. Fica na
+  // base, e não em cada tamanho, porque a regra vale pros três igualmente.
+  @include alvo-toque;
+}
+
+// ========================================
+// Tamanhos
+// !important necessário para vencer regras default do Quasar (.q-btn / .q-btn-dropdown).
+// ========================================
+//
+// 🔴 ALTURA FIXA POR TAMANHO — e não altura pelo conteúdo.
+//
+// Os componentes zeram o `min-height` do Quasar (`min-height: unset`), então a
+// altura passava a sair do conteúdo. E o ícone é mais alto que a linha de texto:
+// 24px contra os 14px de um rótulo `md`. Resultado medido no navegador:
+//
+//     md sem ícone   32px          md com ícone   42px
+//     sm sem ícone   28px          lg sem ícone   44px
+//
+// Ou seja, dois botões lado a lado na mesma linha — "Ações" e "Pesquisar" —
+// saíam com 6 a 10px de diferença de altura, só porque um tinha ícone. Numa
+// barra de ações isso lê como desalinhamento, não como variação de tamanho.
+//
+// O piso é a altura COM ícone, que é a maior: assim pôr ou tirar um ícone não
+// mexe na caixa, e o default já nasce no tamanho certo sem o dev configurar
+// nada. A conta é `ícone (24) + padding vertical + borda (2+2)`.
+$control-altura-sm: 40px; // 24 + 6+6 + 4
+$control-altura-md: 42px; // 24 + 7+7 + 4
+$control-altura-lg: 52px; // 24 + 12+12 + 4
+
+@mixin control-sm {
+  padding: 6px 12px !important;
+  font-size: 0.75rem;
+  min-height: $control-altura-sm !important;
+}
+
+@mixin control-md {
+  padding: 7px 15px !important;
+  font-size: 0.875rem;
+  min-height: $control-altura-md !important;
+}
+
+@mixin control-lg {
+  padding: 12px 24px !important;
+  font-size: 1rem;
+  min-height: $control-altura-lg !important;
+}
+
+// ========================================
+// Variantes icon-only (quadrado, sem padding horizontal extra)
+// ========================================
+// Quadrados de verdade: a largura mínima passa a ser a MESMA altura do tamanho
+// correspondente. Antes eram 32/36/44 contra alturas de 40/42/52 — o botão só
+// de ícone saía retangular e mais baixo que o vizinho com rótulo.
+@mixin control-icon-only-sm {
+  padding: 6px !important;
+  min-width: $control-altura-sm;
+}
+
+@mixin control-icon-only-md {
+  padding: 7px !important;
+  min-width: $control-altura-md;
+}
+
+@mixin control-icon-only-lg {
+  padding: 12px !important;
+  min-width: $control-altura-lg;
+}