Bottom Sheet Design System

Was macht Bottom Sheet Design System?

Zweck

Das Bottom Sheet Design System bietet ein standardisiertes, mobil-optimiertes Design-Framework für nach oben aufklappbare Bottom Sheets, Action Sheets und modale untere Drawer in Web-Oberflächen und progressiven Web-Apps (PWAs). Moderne Mobilgeräte mit großen Bildschirmseitenverhältnissen machen oben positionierte Overlays und zentierte modale Popups mit einer Hand schwer erreichbar. Bottom Sheets verankern interaktive Aufgaben, Kontextmenüs, Filtersteuerungen und detaillierte Unteransichten am unteren Bildschirmrand im natürlichen Reichweitenbereich des Daumens des Benutzers.

Die Entwicklung eines effektiven Bottom-Sheet-Systems erfordert die Festlegung von Einlasthöhen (Peek/komprimiert, teilweise/halbe Höhe, volle Höhe), Touch-Drag-Gesten (Griffleisten), Hintergrundabdunklung (Scrim/Backdrop), Mechanismen zur Sperrung des Hintergrund-Scrollens, Viewport-Safe-Area-Insets (env(safe-area-inset-bottom)) und eine nahtlose responsive Desktop-Transformation (Umwandlung von Bottom Sheets in zentrierte Modals oder Popovers auf breiteren Viewports).

Anwendungsfälle

• Mobile Produktoptionsauswahl: Präsentation von Größen-, Farb-, Mengen- und Abonnement-Auswahlen auf Produktdetailseiten im E-Commerce, ohne die PDP verlassen zu müssen.
• Mobile Filter- und Sortiersteuerungen: Bereitstellung von mehrdimensionalen Filteroptionen für E-Commerce-Katalogseiten oder SaaS-Suchansichten mit persistenten „Filter anwenden“-Aktionsleisten unten.
• Kontextbezogene Aktionsblätter: Auslösen von 1-Tipp-Schnellaktionen (Teilen, Lesezeichen, Zur Liste hinzufügen, Melden) in sozialen Feeds, Medienkarten oder Datentabellen.
• Standort- und Karten-Detailkarten: Anzeige von erweiterbaren Punkt-von-Interesse-Details oder Lieferverfolgungszeitleisten, die über Kartenansichten nach oben gleiten (Peek-Einrastpunkt bis volle Höhe).
• Mobile Mehrschritt-Unter-Workflows: Durchführung schneller Inline-Aufgaben wie Checkout-Zahlungsmethode, Adressauswahl oder kurzes Feedback.

Wann NICHT zu verwenden

• Globale Navigationsrouting: Für die primäre Anwendungsnavigation über Hauptbereiche hinweg bottom-navigation-system oder site-navigation-system verwenden.
• Destruktive Bestätigungswarnungen: Für kritische, irreversible Aktionen (z. B. „Konto löschen“) einen zentrierten overlay-and-dialog-system Modal-Dialog (role="alertdialog") verwenden, der eine explizite Bestätigung erfordert.
• Faltbare Inline-Inhalte: Zum Ein- und Ausklappen von erweiterbaren Inhalten innerhalb des Seitenflusses accordion-ui-system oder tab-ui-system verwenden.
• Breitbild-Desktop-Layouts (>1024px): Keine vollbreiten Bottom Sheets auf Desktop-Bildschirmen anzeigen. Passen Sie die UI an zentrierte modale Dialoge (overlay-and-dialog-system), seitliche Drawer (dashboard-layout-system) oder angebundene Popovers (tooltip-and-hint-system) an.

Eingaben

1. Aufgabentyp und -tiefe: Art des Inhalts (schnelle 1-Tipp-Aktionsliste vs. mehrfeldriges Formular vs. scrollbare Detailansicht).
2. Einrastkonfiguration: Wahl der Einlasthöhen (Einzel-Einrastpunkt: 100% volle Höhe; Doppel-Einrastpunkt: 50% halbe & 100% voll; Dreifach-Einrastpunkt: 20% Peek, 50% halb, 90% voll).
3. Auslösekontext: Element oder Benutzeraktion, die das Sheet auslöst (Tippen auf Schaltfläche, langes Drücken, Wischgeste oder Deep Link).
4. Design-Tokens: Oberflächenhintergrundfarben, Randradius, Abmessungen der Ziehgriffe, Elevationsschatten, Deckkraft des Hintergrunds und Schriftgrößenskala.
5. Desktop-Adaptionsstrategie: Gewählter Layout-Übergang für Viewports ≥1024px (in zentriertes Modal umwandeln, in angebundenen Popover umwandeln oder in ein seitlich einschiebbares Drawer umwandeln).

Ausgaben

1. Bottom Sheet Anatomie-Spezifikation: Layoutplan, der die Ziehgriffleiste, Kopfzeile (Titel + Schließen-Schaltfläche), scrollbaren Körper, fixierte Fußzeile (CTA-Leiste) und Safe-Area-Inset-Padding definiert.
2. Einlasthöhen- und Gesten-Token-Matrix: CSS-Variablen und Einrast-Schwellenwertdefinitionen (--sheet-detent-peek, --sheet-detent-half, --sheet-detent-full) mit Regeln zum Verwerfen durch Ziehgeschwindigkeit.
3. Hintergrund- und Elevationsspezifikation: Deckkraft-Token für Hintergrund, Einstellungen für Hintergrundunschärfefilter, z-Index-Hierarchie und Sperrregeln für das Scrollen des Body-Elements (overflow: hidden am body).
4. Tastatur- und Screenreader-ARIA-Zuordnung: role="dialog", aria-modal="true", aria-labelledby, Fokus-Fallen-Spezifikation und Definitionen des Escape-Tastenhandlers.
5. Responsive Desktop-Adaptionsplan: Media-Query-Breakpoints, die mobile Bottom Sheets in zentrierte modale Dialoge oder Popovers für Tablets und Desktops umwandeln.

---

Workflow

1. Sheet-Typ und Einraststruktur kategorisieren

Wählen Sie den geeigneten Einrastmodus basierend auf Inhaltsmenge und Interaktionshäufigkeit:

• Nicht-modales Aktionsblatt (Peek/Fit-Content): Größe passt sich automatisch an kurze Inhalte an (2–5 Menüaktionen). Höhen liegen typischerweise zwischen 180px und 320px. Wird durch Aktionsauswahl oder Tippen auf den Hintergrund geschlossen.
• Halbe Höhe / Doppel-Einrastpunkt-Sheet (50% & 90% Viewport): Für Aufgaben mittlerer Dichte wie Produktvariationsauswahl oder Sortierung. Öffnet auf 50% Höhe (50vh); Ziehen nach oben rastet bei 90% Höhe (90vh) ein.
• Vollhöhe / Erweiterbares Sheet (90%–100% Viewport): Für komplexe mobile Workflows wie mehrdimensionale Filter oder Checkout-Schritte. Bietet eine fixierte Kopf- und Fußzeile mit einem internen scrollbaren Bereich.

2. Visuelle Anatomie und räumliche Hierarchie definieren

Konstruieren Sie das Sheet mit fünf verschiedenen anatomischen Schichten:

• Hintergrund (Scrim): Fixiertes Overlay, das den gesamten Viewport abdeckt (background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); z-index: 1000;).
• Sheet-Container: Fixiertes Panel, das am unteren Bildschirmrand verankert ist (position: fixed; bottom: 0; left: 0; right: 0; border-radius: 16px 16px 0 0; background: var(--surface-bg); z-index: 1001;).
• Ziehgriffleiste (Affordanz): Oben zentrierte visuelle Pille (width: 36px; height: 5px; border-radius: 999px; background: var(--border-neutral); margin: 8px auto; cursor: grab;).
• Kopfzeilenschicht: Enthält Sheet-Titel (h2), optionalen Untertitel und explizite Schließen-Schaltfläche (<button aria-label="Sheet schließen">✕</button>).
• Scrollbarer Körper: Interner Inhaltscontainer konfiguriert mit overflow-y: auto; -webkit-overflow-scrolling: touch;.
• Fixierte Fußzeilen-CTA-Schicht: Unten verankerte Aktionsleiste mit primären/sekundären Schaltflächen und Safe-Area-Inset-Padding (padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px))).

3. Gesten, Einrasten und Schließmechanismen einrichten

Richten Sie sanfte Touch-Interaktionen für physisches Gesten-Feedback ein:

• Zieh-Interaktion: Ziehen nach unten auf dem Ziehgriff oder der Kopfzeile bewegt das Sheet sanft nach unten mit transform: translateY().
• Einrast-Schwellenwerte:
  • Wenn mehr als 30% der aktuellen Höhe nach unten gezogen oder mit einer Geschwindigkeit > 0.5px/ms nach unten gewischt wird, vollständiges Schließen auslösen.
  • Im Doppel-Einrastpunkt-Modus, wenn zwischen 30 % und 70 % gezogen wird, zum nächsten Einrastpunkt (50 % oder 90 %) einrasten.
• Kollision mit Scrollen: Beim Ziehen innerhalb des scrollbaren Körperbereichs ein Ziehen zum Schließen nur dann einleiten, wenn die Scrollposition des Körpers bei scrollTop === 0 liegt und der Benutzer nach unten wischt.
• Sperren des Body-Scrollens: Wenn das modale Bottom Sheet geöffnet ist, overflow: hidden auf document.body anwenden, um Hintergrund-Scrollen auf der Seite zu verhindern.

4. Viewport Safe Areas und Oberflächenkontrast implementieren

Stellen Sie die vollständige visuelle Integration mit mobilen Hardware-Display-Aussparungen sowie hellen/dunklen Modi sicher:

• Safe-Area-Inset-Handling: Immer padding-bottom: env(safe-area-inset-bottom, 16px) auf den Sheet-Container oder die fixierte Fußzeile anwenden, sodass Inhalt/Schaltflächen nicht von iOS-Startbildschirm-Indikatoren verdeckt werden.
• Maximale Höhenbegrenzung: Vollhöhen-Sheets bei max-height: calc(100vh - 48px) oder max-height: calc(100dvh - 48px) begrenzen, um oben einen sichtbaren 48px großen Ausschnitt des abgedunkelten übergeordneten Seitenkontexts zu lassen.
• Oberflächenelevation: Tiefe Elevationsschatten-Token verwenden (box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15)), um eine Trennung vom Hintergrundseiteninhalt zu schaffen.

5. Barrierefreiheit und Tastaturnavigation konfigurieren

Stellen Sie die vollständige Einhaltung der WCAG 2.1 / 2.2 AA-Standards sicher:

• ARIA-Rollen: Container muss role="dialog" oder role="region" (für nicht-modale Peeking-Sheets) verwenden, aria-modal="true" und aria-labelledby="sheet-title-id".
• Fokusverwaltung:
  • Beim Öffnen den Fokus programmatisch auf das erste fokussierbare Element im Sheet oder die Schließen-Schaltfläche setzen.
  • Eine Fokusfalle implementieren, die Tab oder Shift+Tab daran hindert, das Sheet in den inaktiven Hintergrund zu verlassen.
  • Beim Schließen den Fokus auf das Auslöseelement zurücksetzen, das das Sheet geöffnet hat.
• Tastatursteuerung: Drücken der Escape-Taste muss das Sheet sofort schließen.
• Screenreader-Ansagen: Dynamische Inhaltsänderungen im Sheet müssen aria-live="polite"-Regionen verwenden.

6. Responsive Desktop-Anpassung entwerfen

Bottom Sheets wirken unausgereift, wenn sie über Desktop-Monitore (≥1024px) in voller Breite gestreckt werden. Implementieren Sie explizite responsive Transformationsregeln:

• Desktop-Modal-Modus (Standard): Auf Viewports ≥1024px das Bottom Sheet in einen zentrierten modalen Dialog umwandeln (width: 100%; max-width: 540px; border-radius: 16px; margin: auto; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);).
• Desktop-Popover-Modus (Kontextmenüs): Für schnelle Aktionsblätter das Sheet in einen angebundenen Popover umwandeln, der neben der Auslöseschaltfläche positioniert ist.
• Desktop-Seitlicher-Drawer-Modus (Komplexe Formulare/Filter): Für tiefe mehrdimensionale Filter oder mehrschrittige Abläufe in einen rechtsbündig einschiebbaren Seiten-Drawer umwandeln (width: 400px; height: 100vh; top: 0; right: 0; border-radius: 16px 0 0 16px;).

---

Entscheidungsregeln

Einrastauswahl-Matrix

Sheet-Typ	Einrastkonfiguration	Inhaltsmenge	Idealer Anwendungsfall
Aktionsblatt	Fit-Content (Einzel-Einrastpunkt)	2–6 Aktionslinks / -elemente	Schnelles Teilen, Kontextmenü, einfache Optionsumschaltung.
Auswahlblatt	Doppel-Einrastpunkt (50vh initial, 90vh erweitert)	5–15 scrollbare Elemente	Produktgrößen-/Farbauswahl, Adressauswahl, Zahlungsmethode.
Interaktiver Drawer	Dreifach-Einrastpunkt (120px Peek, 50vh, 90vh)	Komplexe räumliche/Kartendaten	Lieferverfolgungskarten, Live-Haltestellen, Mitfahr-Details.
Vollablauf-Blatt	Einzel-Einrastpunkt (90vh - 100vh fixiert)	Mehrbereichs-Formular / Filter	Katalog-Mehrfachfilter, mobiler Checkout-Schritt, Umfrage-Workflow.

Desktop-Transformationsauswahl

• Zentriertes Modal verwenden: Wenn das Sheet strukturierte Formulare, Variationsauswahlen oder Checkout-Optionen enthält.
• Angebundenen Popover verwenden: Wenn das Sheet kurze kontextbezogene Aktionen (Teilen, Bearbeiten, Löschen) enthält.
• Seitlichen Drawer verwenden: Wenn das Sheet Filtersteuerungen oder Bearbeitungsfelder in Dashboards und Datentabellen enthält.

---

Einschränkungen

• Barrierefreiheit (WCAG 2.1 / 2.2 AA):
  • Muss explizite Fokusfallen bereitstellen, wenn aria-modal="true" aktiv ist.
  • Touch-Ziele für alle internen Elemente und Schließen-Schaltflächen müssen mindestens 44x44px messen (WCAG 2.5.8 / 2.5.5).
  • Hintergrundinhalt hinter modalen Bottom Sheets muss als inert markiert oder für assistive Technologien ausgeblendet sein.
• Touch- und Gestenabmessungen:
  • Der Trefferbereich des Ziehgriffs muss mit unsichtbarem Padding vergrößert werden (min-height: 24px, min-width: 60px), auch wenn der visuelle Griff 36x5px ist.
• Dynamische Viewport-Einheiten:
  • Wo unterstützt, dvh (dynamische Viewport-Höhe) verwenden (height: 90dvh), mit Fallback auf vh, um dynamische Erweiterungen und Zusammenklappungen der mobilen Adressleiste zu berücksichtigen.

---

Häufige Fehlermuster

• Fehlendes Safe-Area-Padding: Weglassen von env(safe-area-inset-bottom), was dazu führt, dass primäre Fußzeilen-Aktionsschaltflächen mit iOS-Gestenleisten überlappen.
• Auf voller Breite gestreckte Desktop-Sheets: Zulassen, dass sich ein mobiles Bottom Sheet auf 1920px Breite auf Desktop-Monitoren ausdehnt.
• Scroll-Hijacking-Blockade: Fehlende Trennung von Inhalts-Scrollen und Sheet-Zieh-Schließ-Gesten, was zum Zusammenklappen des Sheets führt, wenn der Benutzer versucht, durch Text zu scrollen.
• Fehlender Tastatur-Escape-Handler: Weglassen des Escape-Tasten-Ereignis-Listeners, wodurch Desktop-Tastaturbenutzer im modalen Sheet-Overlay eingeschlossen werden.
• Fokus-Leck in den Hintergrund: Hinterlassen von erreichbaren Hintergrundseitenelementen über die Tab-Taste, während ein modales Bottom Sheet geöffnet ist.

---

Validierungskriterien

• Sheet-Layout enthält explizite visuelle Zieh-Affordanz, Kopfzeile mit Titel, scrollbaren Körper und fixierte Fußzeile.
• Safe-Area-Inset (padding-bottom: env(safe-area-inset-bottom)) ist auf fixierter Fußzeile und Sheet-Container implementiert.
• Trefferbereich des Ziehgriffs erfüllt mindestens 44px Höhe für Touch-Barrierefreiheit.
• Sheet verwendet role="dialog", aria-modal="true", aria-labelledby und fängt den Fokus, während es aktiv ist.
• Drücken der Escape-Taste oder Tippen auf den Hintergrund schließt das modale Sheet und setzt den Fokus auf die Auslöseschaltfläche zurück.
• Scrollen des Hintergrund-Body-Elements ist gesperrt (overflow: hidden), wenn das modale Sheet geöffnet ist.
• Viewports ≥1024px wandeln das Bottom Sheet sauber in einen zentrierten modalen Dialog, Popover oder Seiten-Drawer um.