Wzorzec 17

Dymek przy swojej kotwicy

Dropdowny i tooltipy budowane na bibliotekach liczą pozycję skryptem, spóźniają się o klatkę i gubią przy scrollu. Atrybut popover otwiera warstwę nad wszystkim z wbudowanym zamykaniem, a anchor positioning przykleja ją do elementu wyzwalającego czystym CSS, razem z planem awaryjnym przy krawędzi ekranu.

Menu i podpowiedź bez biblioteki pozycjonującej

Otwórz oba dymki, przewiń stronę i klikaj obok. Warstwę, zamykanie i pozycję daje przeglądarka: popover otwiera top layer, anchor positioning trzyma dymek przy przycisku.

Atlas Rebranding

Status projektu liczy się z ostatniej aktywności w repozytorium i w pliku Figmy. Aktualizuje się co godzinę.

Reguły

Dymek to atrybut popover z popovertarget, nie div z z-index i globalnym nasłuchem kliknięć.
Pozycję zadaje position-anchor z position-area, nie JavaScript przeliczający getBoundingClientRect.
position-try-fallbacks odwraca dymek przy krawędzi viewportu, zanim zdąży się przyciąć.
Top layer nie uczestniczy w layoucie strony, więc otwarcie niczego nie przesuwa.

Wzorzec w kodzie

Popover otwiera top layer, zamykanie i Escape daje przeglądarka

<button popovertarget="menu-akcji" className="kotwica">
  Akcje ⌄
</button>

<div id="menu-akcji" popover="auto" className="menu">
  <button>Duplikuj projekt</button>
  <button>Archiwizuj</button>
</div>

Kotwica w CSS zamiast getBoundingClientRect w skrypcie

.kotwica { anchor-name: --akcje; }

.menu {
  position-anchor: --akcje;
  position-area: block-end span-inline-start;
  position-try-fallbacks: flip-block, flip-inline;
  inset: auto;
  margin: 0.5rem 0;
}

Prompt dla Claude

Wklej do Claude Code w swoim projekcie. Prompt niesie komplet reguł tej lekcji i ogólne zasady Liquid Design, więc implementacja trafia w metodologię bez tłumaczenia jej od zera.

Prompt do wklejenia

Zaimplementuj w moim projekcie wzorzec „Dymek przy swojej kotwicy" z metodologii Liquid Design.

Popover API otwiera menu i podpowiedzi w top layer, a CSS anchor positioning trzyma je przy przycisku bez skryptu liczącego współrzędne.

Wymagania:
- Dymek to atrybut popover z popovertarget, nie div z z-index i globalnym nasłuchem kliknięć.
- Pozycję zadaje position-anchor z position-area, nie JavaScript przeliczający getBoundingClientRect.
- position-try-fallbacks odwraca dymek przy krawędzi viewportu, zanim zdąży się przyciąć.
- Top layer nie uczestniczy w layoucie strony, więc otwarcie niczego nie przesuwa.

Ogólne reguły Liquid Design, których implementacja nie może złamać:
- HTML jest semantyczny: button, a, nav, form, label, dialog, details, ul, dl i nagłówki h1-h6 zamiast div z onClick i ARIA dopisywanym ręcznie. div i span służą wyłącznie do layoutu, nigdy do interakcji ani struktury treści.
- Layout jest umową: treść, która dociera później, ma miejsce zarezerwowane od pierwszego renderu. Nic nie skacze.
- Stany ładowania, pustki, błędu i treści dzielą jeden layout.
- Typografia pochodzi z nazwanej, płynnej skali opartej o clamp(), nie z gołych rozmiarów.
- Animacje dotyczą wyłącznie transform i opacity, a prefers-reduced-motion redukuje je do natychmiastowej zmiany stanu.
- Breakpoint jest ostatecznością: najpierw container queries i repeat(auto-fit, minmax(...)).

Sposób pracy – zanim napiszesz pierwszą linię kodu:
- Sprawdź w plikach projektu, jak stylowane są komponenty (Tailwind, CSS Modules, vanilla-extract, styled-components, Sass, czysty CSS...) i pisz wyłącznie w tej konwencji. Niczego nie zakładaj z góry i nie dodawaj nowych zależności.
- Wymagania powyżej opisują właściwości CSS i atrybuty HTML, nie klasy narzędziowe. Przełóż je na system stylowania zastany w projekcie.
- Sprawdź framework komponentów, wersję i konwencje nazewnictwa, zamiast zakładać konkretny stack.
- Używaj istniejących tokenów projektu (kolory, typografia, odstępy). Jeśli czegoś brakuje, zaproponuj minimalne uzupełnienie w duchu istniejącego kodu, nie osobny system.
- Nie używaj klas, tokenów ani API, których nie znalazłeś w tym projekcie.

Pełny opis z żywym demo i kodem: https://liquid-design.website/wzorce/dymki-zakotwiczone