Wzorzec 05

Natywny dialog zamiast diva

Modale budowane na divach wymagają ręcznego zarządzania fokusem, klawiszem Escape i blokadą przewijania, a każda z tych rzeczy psuje się po cichu. Natywny element dialog załatwia to w przeglądarce, a scrollbar-gutter: stable rezerwuje miejsce na pasek przewijania, więc blokada scrolla nie szarpie layoutem.

Modal zaproszenia na natywnym elemencie dialog

Escape zamyka, fokus krąży w środku, tło przyciemnia ::backdrop. Zero bibliotek, zero nasłuchiwania klawiszy.

Reguły

Modal to element dialog otwierany przez showModal(), nie div z z-index.
Fokus, Escape i tło ::backdrop pochodzą z przeglądarki, nie z biblioteki.
html ma scrollbar-gutter: stable, więc zniknięcie paska przewijania nie zmienia szerokości treści.
Po zamknięciu fokus wraca do elementu, który modal otworzył.

Wzorzec w kodzie

showModal daje fokus, Escape i backdrop, method dialog zamyka bez JS

const dialog = useRef<HTMLDialogElement>(null);

<Button onClick={() => dialog.current?.showModal()}>
  Zaproś do projektu
</Button>

<dialog ref={dialog} className="m-auto rounded-2xl backdrop:bg-black/70">
  <form method="dialog">
    <Input label="Adres e-mail" />
    <Button type="submit">Wyślij</Button>
  </form>
</dialog>

Rezerwa na pasek przewijania, blokada scrolla nie zmienia szerokości

html {
  scrollbar-gutter: stable;
}

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 „Natywny dialog zamiast diva" z metodologii Liquid Design.

Element dialog daje pułapkę fokusu, Escape i warstwę za darmo, a scrollbar-gutter pilnuje, żeby otwarcie nie przesunęło strony.

Wymagania:
- Modal to element dialog otwierany przez showModal(), nie div z z-index.
- Fokus, Escape i tło ::backdrop pochodzą z przeglądarki, nie z biblioteki.
- html ma scrollbar-gutter: stable, więc zniknięcie paska przewijania nie zmienia szerokości treści.
- Po zamknięciu fokus wraca do elementu, który modal otworzył.

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/dialog-natywny