01The four variants

Two independent axes on the .formdots: data-variant (mobile / desktop) × data-sport (football / basket, default football). The table below is the data-variantaxis; the sport's difference is in 3B.

02Anatomy & geometry

The geometry is shared across both variants — it is written once.

02bSize — data-size new in 1.5.0

A third, independent axis — just like data-sport. Any variant can be compact; this is not «the mobile variant is smaller».

03Result colours

04Data contract

The normal input: data-fm JSON on every played bubble.

v1.5.0 — scorer. Each event in e may carry a fourth element, the player: [34,"g","us","Γκάκπο"]. The chip in the modal shows the player and the tooltip adds the team. Optional and backward compatible — without it the team name shows, as before. Send it: a minute plus a team alone tells the reader nothing they did not already know.

ON THE .formdots

ON THE ? BUBBLE · AND LEGACY

05API

One global: window.FormBubbles. The init() is idempotent since v1.3.1: each bubble binds once (data-fb-bound) and the modal listener binds once per root+mount (root.__fbModalBound).

Before v1.3.1 this did not fully hold. Only the per-dot binds were guarded; the initModal binds a delegated listener on the root, so a second init() opened two .fdmodal overlays on one tap, and the ✕ closed only its own — which read as «the modal does not close». Check: document.querySelectorAll('.fdmodal').length after a single tap must be 1. If your project carries a copy ≤ v1.3.0, call init() exactly once, or take v1.3.1.

// μετά το markup, μία φορά
FormBubbles.init();

// ή με ρητό mount point (π.χ. μέσα σε device frame)
FormBubbles.init({ root: document.querySelector('.page'), mount: document.querySelector('.phone') });

06States

07Design tokens

The component declares no tokens — it only consumes them. Source: tokens/tokens.css.

08Accessibility

• Every .fd has tabindex="0" — reachable from the keyboard.
• The popover has role="tooltip"; the modal's close button aria-label="Κλείσιμο".
• prefers-reduced-motion disables the transition.

ACCEPTED WCAG DEBT — MEASURED 2026-07-29

The letters are 12px/700. Bold 12px is not not «large text» under WCAG, so the threshold that applies is 4.5:1.

09Markup — copy/paste

MOBILE — STANDINGS (5 MATCHES)

<div class="formdots" data-variant="mobile"
     data-team="Ολυμπιακός" data-crest="/img/teams/olympiacos.svg">
  <span class="fd fw"  data-fm='{"v":"H","o":"ΑΕΚ","dt":"24 Αυγ","gf":2,"ga":0,"r":"W","y":0,"rd":0,"e":[[23,"g","us","Σίμονς"],[71,"g","us","Βέγκχορστ"]]}'>Ν</span>
  <span class="fd fw"  data-fm='{"v":"A","o":"ΠΑΟΚ","dt":"31 Αυγ","gf":3,"ga":1,"r":"W","y":1,"rd":0,"e":[]}'>Ν</span>
  <span class="fd fdr" data-fm='{"v":"H","o":"Παναθηναϊκός","dt":"14 Σεπ","gf":1,"ga":1,"r":"D","y":2,"rd":0,"e":[]}'>Ι</span>
  <span class="fd fw"  data-fm='{"v":"A","o":"Άρης","dt":"21 Σεπ","gf":2,"ga":1,"r":"W","y":1,"rd":0,"e":[]}'>Ν</span>
  <span class="fd fl"  data-fm='{"v":"H","o":"ΟΦΗ","dt":"28 Σεπ","gf":0,"ga":1,"r":"L","y":1,"rd":1,"e":[]}'>Η</span>
</div>

DESKTOP — HERO, WITH NEXT FIXTURE

<div class="formdots" data-variant="desktop" data-team="Ολλανδία">
  <span class="fd fw" data-fm='{"v":"H","o":"Αυστρία","dt":"25 Μαρ","gf":3,"ga":0,"r":"W","y":1,"rd":0,"e":[[12,"g","us","Γκάκπο"]]}'>Ν</span>
  <span class="fd fq" data-fmnext="Επόμενος: vs Ιαπωνία · Σάβ 14 Ιουν 23:00">?</span>
</div>

A CONTAINER THAT CLIPS THE POPOVER

<!-- ΚΑΘΕ γονιός με overflow hidden/auto/scroll κόβει το popover.
     Βάλε data-fb-scroll στο wrapper και το .fpop γίνεται position:fixed
     ώστε να ξεφύγει. Ισχύει για πίνακες με scroll ΚΑΙ για κάρτες με
     overflow:hidden — π.χ. τα demo αυτής της σελίδας. -->
<div class="standwrap" data-fb-scroll> <table>…</table> </div>

3AMobile modal — row expansion out of MVP

The modal opens with every row closed, in both sports. Tapping a row gives it .is-open and reveals the detail underneath; tapping another moves it, tapping the same one closes it. A row is expandable only if it has data: q for basketball, e for football.

FOOTBALL — GOAL & CARD TIMELINE ref 2b

3BBasketball — data-sport="basket" Q1–Q4 out of MVP

Same bubbles, same geometry, same interaction pattern. The only thing that changes is the sport's detail . Basketball has no draw, so only .fw / .fl (Ν / Η) appear — never .fdr.

EXTRA FIELDS ON THE data-fm

THE REST IS DERIVED — DO NOT SEND IT

DESKTOP — NO QUARTER BREAKDOWN

The popover shows venue · opponent, score, result + margin and the top player — and nothing else. There is no quarter breakdown: the .fpop-tl (football's 0–90′ timeline) simply has no basketball equivalent. It keeps the normal width 196px. The per-quarter information exists only in the mobile modal.

MOBILE — QUARTER BREAKDOWN IN THE MODAL

The modal opens with every row closed — just the list of 5 matches. Tapping a row gives it .is-open and reveals underneath it .fdacc-res (dot + «Νίκη +2 · 2/4 περίοδοι · Εντός · player») and .fdacc-q with four .fdq: a margin chip, a pair of bars, the quarter score, a Q label. Tapping another row moves the breakdown; tapping the same one closes it.

10What is NOT included

11Build checklist

• Copy component.css and component.js. No dependency, no asset.
• Make sure the --win / --err / --errdark exist in the tokens.
• Every .formdots must to declare data-variant.
• Give data-team (and data-crest if you have it) on every team — otherwise the modal header drops to the fallback.
• The backend emits data-fm JSON. Do not author new data-tip.
• data-fb-scroll on every wrapper that clips the popover — overflow hidden, auto or scroll. If the popover does not show, this is what is missing.
• Call FormBubbles.init() after render and again after AJAX — idempotent since v1.3.1 (on older copies: one call and one only — see §05).
• MVP: the per-match click inside the mobile modals is not required. The modal plus the 5 matches is enough. If you drop it, do not send e / q in data-fm — a row becomes expandable only when it has data, so it stops opening by itself. No component change is needed.
• Check: the underline on the last played match, in both cases (with and without ?).