teqo-backup/docs/plans/omnibox-limpar-mobile-ui-design.html

702 lines
29 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="pt-BR" data-theme="campaign">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<title>Design — C221 · Limpar do omnibox no mobile</title>
<style type="text/tailwindcss">
@theme inline {
--font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-sidebar: var(--sidebar);
--color-sidebar-border: var(--sidebar-border);
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
}
[data-theme='campaign'] {
--background: #ffffff;
--foreground: #1c1917;
--card: #ffffff;
--card-foreground: #1c1917;
--primary: #c51414;
--primary-foreground: #ffffff;
--secondary: #f5f5f4;
--secondary-foreground: #292524;
--muted: #f4f4f5;
--muted-foreground: #6b7280;
--border: rgb(28 25 23 / 12%);
--input: rgb(28 25 23 / 16%);
--ring: #c51414;
--sidebar: #fafaf9;
--sidebar-border: rgb(28 25 23 / 12%);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}
button,
input {
font: inherit;
}
.grid-bg {
background-color: #efeeec;
background-image: radial-gradient(rgb(28 25 23 / 8%) 0.7px, transparent 0.7px);
background-size: 16px 16px;
}
.frame {
box-shadow: 0 18px 54px rgb(28 25 23 / 11%);
}
.icon {
width: 1rem;
height: 1rem;
stroke-width: 2;
}
.icon-sm {
width: 0.875rem;
height: 0.875rem;
stroke-width: 2;
}
.mobile-frame {
width: 390px;
overflow: hidden;
border: 1px solid var(--border);
border-radius: 28px;
background: var(--background);
}
.mobile-topbar {
height: 56px;
background: var(--primary);
color: var(--primary-foreground);
}
.mobile-sticky {
border-bottom: 1px solid var(--border);
background: var(--background);
padding: 4px 16px 0;
}
/* C221 craft target: one dense line below md. The 44px end reserve is
36px for the touch target plus 8px of content breathing room. */
.mobile-field {
position: relative;
display: flex;
min-height: 40px;
width: 100%;
align-items: center;
gap: 6px;
padding: 0 44px 0 8px;
border: 0;
border-radius: 8px;
background: transparent;
}
.mobile-chip {
display: inline-flex;
max-width: 168px;
min-width: 0;
flex: 0 1 auto;
align-items: center;
gap: 4px;
border-radius: 6px;
background: var(--muted);
padding: 4px 8px;
color: var(--foreground);
font-size: 12px;
font-weight: 600;
line-height: 20px;
white-space: nowrap;
}
.mobile-chip-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mobile-input {
min-height: 40px;
min-width: 128px;
flex: 1 1 128px;
border: 0;
background: transparent;
color: var(--foreground);
font-size: 16px;
outline: none;
}
.mobile-input::placeholder {
color: var(--muted-foreground);
}
.clear-mobile {
position: absolute;
top: 50%;
right: 0;
display: inline-flex;
width: 36px;
height: 36px;
transform: translateY(-50%);
align-items: center;
justify-content: center;
border: 0;
border-radius: 9999px;
background: transparent;
}
.clear-mobile-core {
display: flex;
width: 24px;
height: 24px;
align-items: center;
justify-content: center;
border-radius: 9999px;
background: var(--muted);
color: var(--muted-foreground);
}
.clear-mobile.is-invisible {
visibility: hidden;
pointer-events: none;
}
.mode-control {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border-radius: 8px;
background: var(--muted);
padding: 4px;
font-size: 14px;
}
.mode-active {
border: 1px solid var(--input);
border-radius: 6px;
background: var(--background);
padding: 10px 8px;
font-weight: 600;
box-shadow: 0 1px 2px rgb(28 25 23 / 8%);
}
.mode-idle {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 8px;
color: var(--muted-foreground);
font-weight: 500;
}
.spec {
border-left: 3px solid rgb(197 20 20 / 24%);
padding-left: 12px;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation: none !important;
transition: none !important;
}
}
</style>
</head>
<body class="grid-bg min-h-screen bg-stone-100 text-foreground antialiased">
<!-- Lucide-compatible symbols used by the real surface. -->
<svg class="absolute size-0 overflow-hidden" aria-hidden="true">
<symbol id="i-x" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M18 6 6 18M6 6l12 12" />
</symbol>
<symbol id="i-sparkles" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="m12 3-1.7 4.6L6 9.3l4.3 1.7 1.7 4.7 1.7-4.7L18 9.3l-4.3-1.7L12 3Z" />
<path d="m19 14-.9 2.1L16 17l2.1.9L19 20l.9-2.1L22 17l-2.1-.9L19 14Z" />
</symbol>
<symbol id="i-bell" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M10.3 21h3.4M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9" />
</symbol>
<symbol id="i-filter" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M4 5h16l-6 7v5l-4 2v-7z" />
</symbol>
<symbol id="i-chevron-down" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="m6 9 6 6 6-6" />
</symbol>
</svg>
<main class="mx-auto flex max-w-[1480px] flex-col gap-14 px-4 py-10 md:px-8">
<header class="max-w-3xl">
<div class="flex flex-wrap gap-2">
<span class="rounded-full bg-primary px-2.5 py-1 text-xs font-semibold text-white">
C221 · gate hi-fi
</span>
<span class="rounded-full border border-border bg-white px-2.5 py-1 text-xs font-medium">
Campanha · omnibox compartilhado
</span>
</div>
<h1 class="mt-4 text-3xl font-semibold tracking-tight">O “Limpar” fica preso ao campo</h1>
<p class="mt-2 text-sm leading-6 text-muted-foreground">
Referência do encaixe abaixo de <strong>md</strong>: o chip pode truncar, mas o alvo de
limpar não desce sozinho nem cria uma faixa vazia antes do seletor de busca.
</p>
</header>
<section aria-labelledby="mobile-scenes-title">
<p class="text-xs font-semibold text-primary">CENAS 01–03 · VIEWPORT 390</p>
<h2 id="mobile-scenes-title" class="mt-1 text-xl font-semibold">
Barra aderida sob o top bar · três estados críticos
</h2>
<p class="mt-2 max-w-3xl text-sm leading-6 text-muted-foreground">
A linha sob o seletor é a separação do formulário sticky. O campo continua borderless; no
toque, o caret é o indicador de foco. As três cenas preservam a altura da barra.
</p>
<div class="mt-5 grid items-start gap-8 xl:grid-cols-3">
<!-- Scene 01: long chip -->
<article>
<div class="mb-3 flex w-[390px] items-start justify-between gap-3">
<div>
<p class="text-sm font-semibold">01 · Chip longo</p>
<p class="text-xs text-muted-foreground">alvo principal do fix</p>
</div>
<span
class="rounded-full bg-white px-2 py-1 text-[11px] font-semibold ring-1 ring-border"
>
46px
</span>
</div>
<div class="mobile-frame frame min-h-[408px]">
<header class="mobile-topbar flex items-center justify-between px-4">
<div class="min-w-0">
<p class="truncate text-sm font-semibold">Acervo de falas</p>
<p class="truncate text-xs text-white/85">
Busque nas falas da Câmara ou nas gravações da equipe
</p>
</div>
<div class="relative ml-3 grid size-9 shrink-0 place-items-center rounded-full">
<svg class="icon"><use href="#i-bell" /></svg>
<span
class="absolute right-0 top-0 rounded-full bg-white px-1 text-[9px] font-bold text-primary"
>3</span
>
</div>
</header>
<div class="mobile-sticky">
<div class="mobile-field" aria-label="Buscar e filtrar falas">
<span class="mobile-chip" title="Busca: saúde da mulher e atenção materna">
<span class="mobile-chip-label">Busca: saúde da mulher e atenção materna</span>
<span
class="grid size-5 shrink-0 place-items-center rounded-sm text-muted-foreground"
aria-hidden="true"
>
<svg class="size-3.5"><use href="#i-x" /></svg>
</span>
</span>
<span class="mobile-input" aria-hidden="true"></span>
<button class="clear-mobile" type="button" aria-label="Limpar">
<span class="clear-mobile-core"
><svg class="icon-sm" aria-hidden="true"><use href="#i-x" /></svg
></span>
</button>
</div>
<div class="mode-control mt-1.5 mb-2">
<div class="mode-active text-center">Termo exato</div>
<div class="mode-idle">
<svg class="icon-sm"><use href="#i-sparkles" /></svg>Por tema
</div>
</div>
</div>
<div class="px-4 pt-3">
<div class="flex gap-2 overflow-hidden" aria-hidden="true">
<span
class="inline-flex h-9 shrink-0 items-center gap-2 rounded-full border border-border px-3 text-xs text-muted-foreground"
><svg class="size-3.5"><use href="#i-filter" /></svg>Ano<svg class="size-3">
<use href="#i-chevron-down" /></svg
></span>
<span
class="inline-flex h-9 shrink-0 items-center gap-2 rounded-full border border-border px-3 text-xs text-muted-foreground"
><svg class="size-3.5"><use href="#i-filter" /></svg>Tema<svg class="size-3">
<use href="#i-chevron-down" /></svg
></span>
<span
class="inline-flex h-9 shrink-0 items-center gap-2 rounded-full border border-border px-3 text-xs text-muted-foreground"
><svg class="size-3.5"><use href="#i-filter" /></svg>Alcance<svg class="size-3">
<use href="#i-chevron-down" /></svg
></span>
</div>
<div class="mt-5 rounded-xl border border-dashed border-border p-5 text-center">
<p class="text-sm font-semibold">Resultados da busca</p>
<p class="mt-1 text-xs text-muted-foreground">
A lista começa sem uma faixa vazia intermediária.
</p>
</div>
</div>
</div>
<div class="spec mt-4 w-[390px] text-xs leading-5 text-muted-foreground">
<strong class="text-foreground">Decisão:</strong> chip com cap de 168px e ellipsis. O
filtro continua identificável; o input conserva seu mínimo e o X ocupa a mesma faixa.
</div>
</article>
<!-- Scene 02: short chip and typed query -->
<article>
<div class="mb-3 flex w-[390px] items-start justify-between gap-3">
<div>
<p class="text-sm font-semibold">02 · Chip curto + digitado</p>
<p class="text-xs text-muted-foreground">folga não rouba o input</p>
</div>
<span
class="rounded-full bg-white px-2 py-1 text-[11px] font-semibold ring-1 ring-border"
>
46px
</span>
</div>
<div class="mobile-frame frame min-h-[408px]">
<header class="mobile-topbar flex items-center justify-between px-4">
<div class="min-w-0">
<p class="truncate text-sm font-semibold">Acervo de falas</p>
<p class="truncate text-xs text-white/85">
Busque nas falas da Câmara ou nas gravações da equipe
</p>
</div>
<div class="relative ml-3 grid size-9 shrink-0 place-items-center rounded-full">
<svg class="icon"><use href="#i-bell" /></svg>
<span
class="absolute right-0 top-0 rounded-full bg-white px-1 text-[9px] font-bold text-primary"
>3</span
>
</div>
</header>
<div class="mobile-sticky">
<div class="mobile-field" aria-label="Buscar e filtrar falas">
<span class="mobile-chip">
<span class="mobile-chip-label">Busca: saúde</span>
<span
class="grid size-5 shrink-0 place-items-center rounded-sm text-muted-foreground"
aria-hidden="true"
>
<svg class="size-3.5"><use href="#i-x" /></svg>
</span>
</span>
<span class="mobile-input flex items-center truncate">mulher</span>
<button class="clear-mobile" type="button" aria-label="Limpar">
<span class="clear-mobile-core"
><svg class="icon-sm" aria-hidden="true"><use href="#i-x" /></svg
></span>
</button>
</div>
<div class="mode-control mt-1.5 mb-2">
<div class="mode-active text-center">Termo exato</div>
<div class="mode-idle">
<svg class="icon-sm"><use href="#i-sparkles" /></svg>Por tema
</div>
</div>
</div>
<div class="px-4 pt-3">
<div class="flex gap-2 overflow-hidden" aria-hidden="true">
<span
class="inline-flex h-9 shrink-0 items-center gap-2 rounded-full border border-border px-3 text-xs text-muted-foreground"
><svg class="size-3.5"><use href="#i-filter" /></svg>Ano<svg class="size-3">
<use href="#i-chevron-down" /></svg
></span>
<span
class="inline-flex h-9 shrink-0 items-center gap-2 rounded-full border border-border px-3 text-xs text-muted-foreground"
><svg class="size-3.5"><use href="#i-filter" /></svg>Tema<svg class="size-3">
<use href="#i-chevron-down" /></svg
></span>
<span
class="inline-flex h-9 shrink-0 items-center gap-2 rounded-full border border-border px-3 text-xs text-muted-foreground"
><svg class="size-3.5"><use href="#i-filter" /></svg>Alcance<svg class="size-3">
<use href="#i-chevron-down" /></svg
></span>
</div>
<div class="mt-5 rounded-xl border border-border p-4">
<div class="h-3 w-2/3 rounded bg-muted"></div>
<div class="mt-3 h-2.5 w-full rounded bg-muted"></div>
<div class="mt-2 h-2.5 w-4/5 rounded bg-muted"></div>
</div>
</div>
</div>
<div class="spec mt-4 w-[390px] text-xs leading-5 text-muted-foreground">
<strong class="text-foreground">Decisão:</strong> a reserva final é fixa, não um
espaçador no fluxo. Depois do chip curto ainda há uma área legível para “mulher”.
</div>
</article>
<!-- Scene 03: empty -->
<article>
<div class="mb-3 flex w-[390px] items-start justify-between gap-3">
<div>
<p class="text-sm font-semibold">03 · Vazio</p>
<p class="text-xs text-muted-foreground">geometria estável</p>
</div>
<span
class="rounded-full bg-white px-2 py-1 text-[11px] font-semibold ring-1 ring-border"
>
46px
</span>
</div>
<div class="mobile-frame frame min-h-[408px]">
<header class="mobile-topbar flex items-center justify-between px-4">
<div class="min-w-0">
<p class="truncate text-sm font-semibold">Acervo de falas</p>
<p class="truncate text-xs text-white/85">
Busque nas falas da Câmara ou nas gravações da equipe
</p>
</div>
<div class="relative ml-3 grid size-9 shrink-0 place-items-center rounded-full">
<svg class="icon"><use href="#i-bell" /></svg>
<span
class="absolute right-0 top-0 rounded-full bg-white px-1 text-[9px] font-bold text-primary"
>3</span
>
</div>
</header>
<div class="mobile-sticky">
<div class="mobile-field" aria-label="Buscar e filtrar falas">
<input
class="mobile-input"
aria-label="Buscar e filtrar falas"
placeholder="Busque por assunto, tema, município ou palavra-chave…"
readonly
/>
<button
class="clear-mobile is-invisible"
type="button"
aria-label="Limpar"
tabindex="-1"
>
<span class="clear-mobile-core"
><svg class="icon-sm" aria-hidden="true"><use href="#i-x" /></svg
></span>
</button>
</div>
<div class="mode-control mt-1.5 mb-2">
<div class="mode-active text-center">Termo exato</div>
<div class="mode-idle">
<svg class="icon-sm"><use href="#i-sparkles" /></svg>Por tema
</div>
</div>
</div>
<div class="px-4 pt-3">
<div class="flex gap-2 overflow-hidden" aria-hidden="true">
<span
class="inline-flex h-9 shrink-0 items-center gap-2 rounded-full border border-border px-3 text-xs text-muted-foreground"
><svg class="size-3.5"><use href="#i-filter" /></svg>Ano<svg class="size-3">
<use href="#i-chevron-down" /></svg
></span>
<span
class="inline-flex h-9 shrink-0 items-center gap-2 rounded-full border border-border px-3 text-xs text-muted-foreground"
><svg class="size-3.5"><use href="#i-filter" /></svg>Tema<svg class="size-3">
<use href="#i-chevron-down" /></svg
></span>
<span
class="inline-flex h-9 shrink-0 items-center gap-2 rounded-full border border-border px-3 text-xs text-muted-foreground"
><svg class="size-3.5"><use href="#i-filter" /></svg>Alcance<svg class="size-3">
<use href="#i-chevron-down" /></svg
></span>
</div>
<div class="mt-5 rounded-xl border border-border p-4">
<div class="h-3 w-1/2 rounded bg-muted"></div>
<div class="mt-3 h-2.5 w-full rounded bg-muted"></div>
<div class="mt-2 h-2.5 w-3/4 rounded bg-muted"></div>
</div>
</div>
</div>
<div class="spec mt-4 w-[390px] text-xs leading-5 text-muted-foreground">
<strong class="text-foreground">Decisão:</strong> o X continua no mesmo lugar, mas
<code>invisible</code>, sem presença visual nem foco. A barra não salta ao digitar.
</div>
</article>
</div>
</section>
<section aria-labelledby="desktop-title">
<p class="text-xs font-semibold text-primary">CENA 04 · VIEWPORT 1280</p>
<h2 id="desktop-title" class="mt-1 text-xl font-semibold">Desktop preservado</h2>
<p class="mt-2 max-w-3xl text-sm leading-6 text-muted-foreground">
O ajuste móvel não atravessa <strong>md</strong>: label, campo emoldurado, ring de foco e
“Limpar” textual continuam no vocabulário atual.
</p>
<div class="frame mt-5 w-[1280px] overflow-hidden rounded-xl border border-border bg-white">
<div class="flex min-h-[520px]">
<aside
class="flex w-60 shrink-0 flex-col border-r border-sidebar-border bg-sidebar p-3"
>
<div class="flex h-12 items-center gap-2 px-2">
<div
class="grid size-8 place-items-center rounded-lg bg-primary font-bold text-white"
>
S
</div>
<div>
<p class="text-sm font-semibold">Solla</p>
<p class="text-xs text-muted-foreground">Campanha</p>
</div>
</div>
<nav class="mt-4 space-y-1 text-sm">
<div class="rounded-md px-3 py-2 text-muted-foreground">Início</div>
<div class="rounded-md px-3 py-2 text-muted-foreground">Municípios</div>
<div class="rounded-lg bg-secondary p-1">
<div class="px-2 py-2 font-medium">Comunicação</div>
<div class="ml-4 border-l border-border pl-3">
<div
class="rounded-md bg-white px-2 py-2 font-medium text-primary ring-1 ring-border"
>
Acervo de falas
</div>
<div class="px-2 py-2 text-muted-foreground">Biblioteca de cortes</div>
</div>
</div>
</nav>
</aside>
<div class="min-w-0 flex-1">
<header class="flex h-16 items-center border-b border-border px-8">
<div>
<p class="font-semibold">Acervo de falas</p>
<p class="text-xs text-muted-foreground">Comunicação</p>
</div>
</header>
<div class="mx-auto max-w-[940px] px-8 py-7">
<div>
<h3 class="text-xl font-semibold">Falas da Câmara</h3>
<p class="mt-1 text-sm text-muted-foreground">
Busque nas falas, filtre o acervo e abra o trecho certo.
</p>
</div>
<div class="mt-6 flex items-start gap-3">
<div class="min-w-0 flex-1">
<label class="mb-1.5 block text-sm font-medium">Buscar e filtrar falas</label>
<div
class="flex min-h-11 flex-wrap items-center gap-1.5 rounded-lg border border-ring bg-white px-2 py-1.5 shadow-xs ring-3 ring-ring/15"
>
<span
class="inline-flex max-w-full items-center gap-1 rounded-md bg-muted px-2 py-1 text-xs font-medium"
>
<span class="truncate">Busca: saúde da mulher e atenção materna</span>
<span
class="grid size-5 shrink-0 place-items-center rounded-sm text-muted-foreground"
><svg class="size-3.5"><use href="#i-x" /></svg
></span>
</span>
<span class="min-h-10 min-w-32 flex-1"></span>
</div>
</div>
<div class="flex shrink-0 items-center gap-2 pt-7">
<button
class="inline-flex min-h-11 items-center rounded-lg px-3 text-sm font-semibold"
>
Limpar
</button>
</div>
</div>
<div class="mt-3 grid grid-cols-2 rounded-lg bg-muted p-1 text-sm">
<div
class="rounded-md border border-input bg-white py-2.5 text-center font-semibold shadow-sm"
>
Termo exato
</div>
<div
class="flex items-center justify-center gap-2 py-2.5 font-medium text-muted-foreground"
>
<svg class="icon-sm"><use href="#i-sparkles" /></svg>Por tema
</div>
</div>
<div class="mt-3 flex gap-2">
<span
class="inline-flex h-9 items-center gap-2 rounded-full border border-border px-3 text-xs text-muted-foreground"
><svg class="size-3.5"><use href="#i-filter" /></svg>Ano<svg class="size-3">
<use href="#i-chevron-down" /></svg
></span>
<span
class="inline-flex h-9 items-center gap-2 rounded-full border border-border px-3 text-xs text-muted-foreground"
><svg class="size-3.5"><use href="#i-filter" /></svg>Tema<svg class="size-3">
<use href="#i-chevron-down" /></svg
></span>
<span
class="inline-flex h-9 items-center gap-2 rounded-full border border-border px-3 text-xs text-muted-foreground"
><svg class="size-3.5"><use href="#i-filter" /></svg>Alcance<svg class="size-3">
<use href="#i-chevron-down" /></svg
></span>
</div>
<div class="mt-7 grid grid-cols-2 gap-3">
<div class="rounded-xl border border-border p-4">
<div class="h-3 w-1/2 rounded bg-muted"></div>
<div class="mt-3 h-2.5 w-full rounded bg-muted"></div>
<div class="mt-2 h-2.5 w-4/5 rounded bg-muted"></div>
</div>
<div class="rounded-xl border border-border p-4">
<div class="h-3 w-2/3 rounded bg-muted"></div>
<div class="mt-3 h-2.5 w-full rounded bg-muted"></div>
<div class="mt-2 h-2.5 w-3/4 rounded bg-muted"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section
aria-labelledby="spec-title"
class="rounded-xl border border-border bg-white p-6 shadow-sm"
>
<p class="text-xs font-semibold text-primary">PORT CONTRACT</p>
<h2 id="spec-title" class="mt-1 text-lg font-semibold">Medidas aprováveis</h2>
<div class="mt-4 grid gap-5 text-sm leading-6 md:grid-cols-4">
<div>
<p class="font-semibold">Folga final</p>
<p class="text-muted-foreground">44px abaixo de md: alvo de 36px + 8px de respiro.</p>
</div>
<div>
<p class="font-semibold">Ancoragem</p>
<p class="text-muted-foreground">
X a 0px da direita, centrado verticalmente no campo de 40px.
</p>
</div>
<div>
<p class="font-semibold">Chip longo</p>
<p class="text-muted-foreground">
Cap de 168px, uma linha, ellipsis; sem aumentar a barra.
</p>
</div>
<div>
<p class="font-semibold">Acessibilidade</p>
<p class="text-muted-foreground">
Alvo <code>size-9</code>, miolo <code>size-6</code>, <code>aria-label="Limpar"</code>;
vazio invisível.
</p>
</div>
</div>
</section>
</main>
</body>
</html>