Installation

Eine CSS-Datei einbinden – fertig. Optional ein Theme-Override für andere Markenfarben.

<link rel="stylesheet" href="glasskit.css">  <link rel="stylesheet" href="theme-override.css">  <html data-theme="dark">  <html data-theme="light">

Design Tokens

Alle visuellen Werte werden über CSS Custom Properties gesteuert.

Farbpalette

Token	Dark-Wert	Verwendung
`--gl-color-primary`	#f5a623	Primärfarbe, Buttons, aktive Elemente
`--gl-color-primary-dark`	#d4692a	Gradient-Endwert
`--gl-color-text`	#ffffff	Standard-Textfarbe
`--gl-color-text-muted`	rgba(255,255,255,0.60)	Sekundärer Text
`--gl-color-success`	#34c759	Erfolg-Status
`--gl-color-error`	#ff3b30	Fehler-Status
`--gl-color-warning`	#ffcc00	Warn-Status
`--gl-color-{state}-surface`, `-border`, `-on-surface`	color-mix(…)	Getönte Fläche, Rand und Schrift eines Status-Badges, abgeleitet von der Statusfarbe — für `success`, `error` und seit 1.18.0 `warning`

Glasflächen

Token	Wert	Verwendung
`--gl-surface-1`	rgba(…, 0.08)	Subtilste Fläche (Status)
`--gl-surface-2`	rgba(…, 0.10)	Standard (Inputs, Cards)
`--gl-surface-3`	rgba(…, 0.14)	Nav-Pills, Badges
`--gl-surface-4`	rgba(…, 0.16)	Hover-States
`--gl-surface-5`	rgba(…, 0.22)	Starker Hover
`--gl-surface-milk-strong`	rgba(…, 0.75)	Secondary Button

Spacing & Radii

Token	Wert	Token	Wert
`--gl-space-2xs`	4px	`--gl-radius-xs`	8px
`--gl-space-xs`	8px	`--gl-radius-sm`	12px
`--gl-space-sm`	12px	`--gl-radius-input`	14px
`--gl-space-md`	16px	`--gl-radius-btn`	16px
`--gl-space-lg`	20px	`--gl-radius-card`	24px
`--gl-space-xl`	24px	`--gl-radius-full`	9999px
`--gl-space-2xl`	32px	`--gl-radius-pill`	50%

Theming (Light / Dark)

Das Theme wird über data-theme am <html>-Element gesteuert.

// Theme per JavaScript wechseln: function toggleTheme() { const html = document.documentElement; const current = html.getAttribute('data-theme'); html.setAttribute('data-theme', current === 'dark' ? 'light' : 'dark' ); }

Hintergrund

Der Glaseffekt braucht einen farbigen Hintergrund.

Klasse	Beschreibung
`.glass-bg`	Vollständiger Hintergrund mit Aurora-Lichteffekten
`.glass-bg--has-tab-bar`	Modifier: Padding unten für Tab-Bar
`.glass-bg--has-tab-bar-floating`	Modifier: Padding unten für Floating-Tab-Bar + Accessory

Navigation Bar

Pill-Buttons

Runde Icon-Buttons für Navigation und Aktionen.

Klasse	Beschreibung
`.glass-pill`	Standard Glas-Kreis (46×46px)
`.glass-theme-toggle`	Pill mit Mond/Sonne-Icon-Switch

Tab-Bar

Fixierte Bottom-Navigation mit Glas-Hintergrund und optionalem Badge.

<nav class="glass-tab-bar"> <button class="glass-tab-bar__item is-active"> <span class="glass-tab-bar__icon"></span> <span class="glass-tab-bar__label">Start</span> </button> <button class="glass-tab-bar__item"> <span class="glass-tab-bar__icon">  <span class="glass-tab-bar__badge">3</span> </span> <span class="glass-tab-bar__label">Verträge</span> </button> </nav>

Tab-Bar – Floating

Pillenförmige, zentrierte, schwebende Variante im iOS-26-Liquid-Glass-Stil. Optional mit einer eigenständigen .glass-tab-bar__accessory-Kapsel daneben (z. B. Suche, Erstellen) – mit eigenem Glasmaterial. Der aktive Tab erhält einen weichen radialen Spotlight-Halo statt des Punkt-Underlines.

<div class="glass-tab-bar-dock"> <nav class="glass-tab-bar glass-tab-bar--floating"> <button class="glass-tab-bar__item is-active"> <span class="glass-tab-bar__icon"></span> <span class="glass-tab-bar__label">Start</span> </button>  </nav> <button class="glass-tab-bar__accessory" aria-label="Suche">  </button> </div>

Akzent-Varianten für das Accessory

Mit --accent, --success oder --error wird das Accessory farbig untermalt (gefüllter Hintergrund, weißes Icon).

Klasse	Beschreibung
`.glass-tab-bar-dock`	Wrapper: fest unten zentriert, hält Tab-Bar + Accessory
`.glass-tab-bar-dock--accessory-left`	Modifier: Accessory links statt rechts
`.glass-tab-bar--floating`	Modifier auf `.glass-tab-bar`: Pillenform, max-content-Breite
`.glass-tab-bar__accessory`	Eigenständige Glas-Kapsel neben der Tab-Bar
`.glass-tab-bar__accessory--accent`	Gefüllt mit Primärfarbe
`.glass-tab-bar__accessory--success`	Gefüllt mit Success-Farbe
`.glass-tab-bar__accessory--error`	Gefüllt mit Error-Farbe
`.glass-bg--has-tab-bar-floating`	Background-Padding-Helper für die Floating-Variante

Titel

Verträge aufnehmen
& hochladen

<h1 class="glass-title">Seitentitel</h1>

Card

Vertrag fotografieren, Kanten prüfen und gesammelt hochladen.

Klasse	Beschreibung
`.glass-card`	Basis-Glasfläche
`.glass-card--glow`	Hell → milchig Verlauf + Lichtstreifen
`.glass-card__icon`	Zentrierter Icon-Wrapper
`.glass-card__text`	Beschreibungstext

Buttons

Klasse	Beschreibung
`.glass-btn`	Basis (56px, volle Breite)
`--primary`	Farbiger Gradient
`--secondary`	Milchig-weiß
`--tertiary`	Subtiles Glas
`--sm`	44px Höhe
`--lg`	64px Höhe
`--auto`	Auto-Breite
`svg.glass-icon--fill`	Bewusst gefülltes Icon (z. B. Brand-Logos)

Badge

Standard Aktiv Fertig Offen Fehler

<span class="glass-badge glass-badge--primary">Aktiv</span>

Varianten: --primary, --success, --warning (seit 1.18.0) und --error. Jede nimmt Fläche, Rand und Schrift aus den Token -surface, -border und -on-surface ihrer Statusfarbe — wer die Statusfarbe umfärbt, färbt das ganze Badge um.

Chips

Ein Badge dient auch als Filter-Chip. --interactive macht ihn anfassbar — Zeiger, Hover-Tönung, Fokusring — und --selected zeigt, welcher Chip aktiv ist. Nimm einen echten <button> und leg den Zustand in aria-pressed, damit die Zeile per Tastatur bedienbar ist und als Umschalter angesagt wird.

--selected vertieft die Farbe, die der Badge schon hat, statt sie zu übergehen — ein Status-Chip bleibt beim Auswählen also in seiner eigenen Farbe.

<button class="glass-badge glass-badge--interactive glass-badge--selected" aria-pressed="true">aktiv</button> <button class="glass-badge glass-badge--interactive" aria-pressed="false">beworben</button>

Klasse	Beschreibung
`--interactive`	Anklickbar: Zeiger, Hover-Tönung, Fokusring, Druck-Rückmeldung
`--selected`	Der aktive Chip — vertieft die eigene Farbe des Badges
`--gl-badge-accent`	Die Farbe, die beide Zustände vertiefen. Pro Badge setzbar, wenn ein Chip eine eigene Farbe bekommen soll.

Avatar

S

M

L

Divider

Status-Hinweis

Noch keine Verträge vorhanden.

<div class="glass-status"> <svg viewBox="0 0 24 24"></svg> <p>Noch keine Verträge vorhanden.</p> </div>

Liste

Gruppierter Settings-Container für gestapelte Zeilen. Items unterstützen ein führendes Icon, Titel + optionalen Untertitel sowie ein Trailing-Element (Chevron, Wert, Button). Trennlinien zwischen Items werden automatisch gezeichnet — kein zusätzliches Markup nötig.

Settings-Stil (Icon + Titel + Untertitel + Trailing)

iOS 26.4 Update

2,1 GB · Jetzt verfügbar
Apple One

Familie — verlängert sich am 28. Apr.

22,95 €
Mitteilungen
Alle Abos anzeigen

<ul class="glass-list"> <li class="glass-list__item glass-list__item--interactive"> <span class="glass-list__leading"><svg>...</svg></span> <div class="glass-list__content"> <div class="glass-list__title">iOS 26.4 Update</div> <div class="glass-list__subtitle">2,1 GB · Jetzt verfügbar</div> </div> <div class="glass-list__trailing"><svg>...</svg></div> </li>  <li class="glass-list__item glass-list__item--center">Alle anzeigen</li> </ul>

Kompaktes Menü (zentrierter Text, ohne Icons)

Vertrag teilen
Duplizieren
Löschen

<ul class="glass-list"> <li class="glass-list__item glass-list__item--center glass-list__item--interactive">Vertrag teilen</li> <li class="glass-list__item glass-list__item--center glass-list__item--interactive">Duplizieren</li> <li class="glass-list__item glass-list__item--center glass-list__item--interactive glass-list__item--danger">Löschen</li> </ul>

Gruppierte Sektionen mit großen Icons

Empfehlungen

Geladene Medien prüfen

Spare bis zu 1,38 GB ein. Prüfe alle auf deinem Gerät geladenen Videos und Audiodateien und entferne sie bei Bedarf.
AusweisApp Bund

Version 2.5.1

24 MB

Hörbücher

Der Geist aus der Maschine

Teilweise angesehen

237,1 MB
Alle Downloads anzeigen

<div class="glass-list__section-header">Empfehlungen</div> <ul class="glass-list"> <li class="glass-list__item glass-list__item--interactive"> <span class="glass-list__leading glass-list__leading--lg"><svg>...</svg></span> <div class="glass-list__content"> <div class="glass-list__title">Geladene Medien prüfen</div> <div class="glass-list__subtitle glass-list__subtitle--wrap">Mehrzeilige Beschreibung...</div> </div> <div class="glass-list__trailing"> <span class="glass-list__value">24 MB</span> <svg>...</svg> </div> </li> <li class="glass-list__item glass-list__item--accent glass-list__item--center">Alle anzeigen</li> </ul>

Klassen-Referenz

Klasse	Beschreibung
`.glass-list`	Gruppierter Surface-Container
`.glass-list--flush`	Edge-to-Edge-Variante (kein seitlicher Margin / Radius). Setzt voraus, dass der Eltern-Container `--gl-space-lg` Padding hat.
`.glass-list--bare`	Entfernt Hintergrund, Border & Shadow — für die Einbettung in `.glass-popover` oder `.glass-card`.
`.glass-list__item`	Listenzeile (als `<li>`, `<a>` oder `<button>`)
`.glass-list__section-header`	Sektionslabel oberhalb einer `.glass-list` — Uppercase, klein, gedämpft
`.glass-list__item--interactive`	Fügt Hover- / Focus- / Active-States hinzu
`.glass-list__item--center`	Zentrierte Single-Text-Variante mit Ellipsis-Truncation
`.glass-list__item--danger`	Roter Text für destruktive Aktionen
`.glass-list__item--accent`	Primärfarbener Text für Akzent-Aktionen
`.glass-list__leading`	Leading-Slot (28×28, enthält ein Icon-SVG)
`.glass-list__leading--lg`	Großer Leading-Slot (40×40, abgerundetes Quadrat, unterstützt `<img>`)
`.glass-list__content`	Flexibler mittlerer Slot — nimmt verbleibende Breite, ermöglicht Truncation
`.glass-list__title`	Primärer Text (medium weight, ellipsis)
`.glass-list__subtitle`	Sekundärer Text (klein, gedämpft, ellipsis)
`.glass-list__subtitle--wrap`	Mehrzeiliger Subtitle (bis 3 Zeilen, mit Ellipsis-Clamp)
`.glass-list__trailing`	Trailing-Slot — Chevron, Wert, Button, Badge
`.glass-list__value`	Gedämpfter Text in `.glass-list__trailing` (z.B. Dateigröße)

Trennlinien zwischen Zeilen werden automatisch via ::after gerendert. Items mit Leading-Icon erhalten einen icon-aligned Inset; Items ohne bekommen ein normales Padding-Inset. Das letzte Item hat nie eine Trennlinie. SVG-Icon-Konvention: 24px für Leading, 18px für Trailing, stroke: currentColor, stroke-width: 2.

Modal

Zentrierter Dialog mit Blur-Overlay. Sichtbarkeit wird über die .is-active-Klasse auf dem Overlay-Element gesteuert — das Umschalten benötigt etwas JavaScript.

<div class="glass-modal-overlay" id="my-modal"> <div class="glass-modal"> <div class="glass-modal__header"> <h2 class="glass-modal__title">Vertrag löschen?</h2> </div> <div class="glass-modal__body"> <p>Dieser Vorgang kann nicht rückgängig gemacht werden.</p> </div> <div class="glass-modal__footer"> <button class="glass-modal__action" onclick="closeModal()">Abbrechen</button> <button class="glass-modal__action glass-modal__action--danger">Löschen</button> </div> </div> </div> <script> // Öffnen / Schließen via .is-active auf dem Overlay (NICHT auf .glass-modal) function openModal() { document.getElementById('my-modal').classList.add('is-active'); } function closeModal() { document.getElementById('my-modal').classList.remove('is-active'); } </script>

Klassen-Referenz

Klasse	Beschreibung
`.glass-modal-overlay`	Fullscreen Blur-Overlay
`.glass-modal-overlay.is-active`	Sichtbar + animiert
`.glass-modal`	Dialog-Container (max-width 340px)
`__header / __title`	Titel-Bereich
`__body`	Inhaltsbereich
`__footer / __action`	Aktionsleiste
`__action--primary`	Primäre Aktion
`__action--danger`	Gefährliche Aktion

Hinweis: die .is-active-Klasse gehört auf das .glass-modal-overlay, nicht auf .glass-modal selbst. Das Overlay übernimmt den Fullscreen-Backdrop, und sein :is-active-Zustand triggert sowohl das Backdrop-Fade-In als auch die Scale-Up-Animation des inneren Dialogs.

Toast

Sichtbar via .is-visible. Varianten: --success, --error, --warning.

Mit Aktion (seit 1.19.0): __action ist eine kleine Pille im Ton des Toasts — primär beim schlichten Toast, in der Statusfarbe bei einer Variante — und __close das × am Ende; es braucht ein aria-label. Beide haben eine Trefferfläche von 44 px. Ein Toast mit Aktion darf bis 480 px breit werden, der Text bricht um, die Knöpfe schrumpfen nie; er sollte stehen bleiben, bis einer davon benutzt wird. Der Toast sitzt --gl-toast-top vom oberen Rand (56 px, wenn nicht gesetzt) — setz ihn unter deine Kopfzeile und nimm bei viewport-fit=cover env(safe-area-inset-top) dazu. Er bleibt auch mit Aktion oben: ein Ort für jeden Toast.

Dokument erfolgreich hochgeladen!

Neue Version verfügbar

<div class="glass-toast glass-toast--success"> <svg class="glass-toast__icon">...</svg> <span class="glass-toast__text">Erfolgreich!</span> </div>  <div class="glass-toast is-visible" role="status"> <svg class="glass-toast__icon">...</svg> <span class="glass-toast__text">Neue Version verfügbar</span> <button class="glass-toast__action">Neu laden</button> <button class="glass-toast__close" aria-label="Schließen"></button> </div>

Klasse	Beschreibung
`.glass-toast`, `.is-visible`	Oben fixiert, sichtbar eingeblendet
`--success`, `--error`, `--warning`	Färben das Symbol; tönen die Aktion in der Statusfarbe
`__icon`, `__text`	22-px-Symbol, Nachricht (bricht um, gibt nach)
`__action`	Eine Aktion: Pille im Ton des Toasts, 44 px Trefferfläche, schrumpft nie (seit 1.19.0)
`__close`	Das ×, 28 px mit 44 px Trefferfläche (seit 1.19.0)
`--gl-toast-top`	Abstand vom oberen Rand, Vorgabe `var(--gl-space-4xl)` (seit 1.19.0)

Popover

Verankertes Dropdown- / Menü-Container. Trigger und .glass-popover in einem .glass-popover-anchor verschachteln. Sichtbarkeit wird über die .is-open-Klasse gesteuert — das Umschalten benötigt ein bisschen JavaScript.

<div class="glass-popover-anchor"> <button class="glass-btn glass-btn--secondary" onclick="togglePop(this)">Menü öffnen</button> <div class="glass-popover"> <ul class="glass-list glass-list--bare"> <li class="glass-list__item glass-list__item--interactive">Teilen</li> <li class="glass-list__item glass-list__item--interactive">Löschen</li> </ul> </div> </div> <script> // Hinweis: NICHT `togglePopover` benennen — kollidiert mit der nativen // HTMLElement.togglePopover()-API-Methode. function togglePop(btn) { btn.nextElementSibling.classList.toggle('is-open'); } </script>

Klassen-Referenz

Klasse	Beschreibung
`.glass-popover-anchor`	Positionierungs-Kontext für den Popover (umschließt Trigger + Popover)
`.glass-popover`	Floating Glass-Surface, ausgeblendet bis `.is-open`
`.glass-popover.is-open`	Sichtbarer Zustand — Fade- + Scale-Animation
`.glass-popover--top`	Öffnet nach oben (über dem Trigger)
`.glass-popover--start`	Linke Kante am Trigger ausrichten
`.glass-popover--end`	Rechte Kante am Trigger ausrichten

Hinweis: die Toggle-Funktion darf nicht togglePopover heißen — dieser Name kollidiert mit der nativen HTMLElement.togglePopover()-Methode der HTML Popover API, und Inline-onclick-Handler werfen einen NotSupportedError.

Input

Vertragsname

Fehler-Zustand Bitte gültige E-Mail angeben

Von

Bis

Datums- und Zeitfelder — type="date", time, datetime-local, month — nehmen dieselbe Klasse. Sie verzichten auf das native Aussehen (seit 1.17.0): iOS zeichnete sie breiter als ihre Spalte, ein leeres schmaler als ein gefülltes, den Wert mittig. Jetzt sitzen sie wie jedes andere Feld in ihrer Spalte, der Wert am Anfang; der native Picker öffnet weiter.

<div class="glass-input-group"> <label class="glass-label">Label</label> <input class="glass-input" type="text"> <span class="glass-hint">Hilfetext</span> </div>

Textarea

Select

<select class="glass-select"> <option>Bitte wählen…</option> </select>

Suchfeld

Toggle Switch

Aktiviert Deaktiviert

<label class="glass-toggle"> <input class="glass-toggle__input" type="checkbox"> <span class="glass-toggle__track"> <span class="glass-toggle__thumb"></span> </span> <span class="glass-toggle__label">Label</span> </label>

Checkbox

Ausgewählt Nicht ausgewählt

Radio Button

Option A Option B

Range Slider

Bildqualität 75%

Progress Bar

Klasse	Beschreibung
`.glass-progress`	Basis-Container
`--sm / --lg`	Track-Höhe: 4px / 12px
`--success / --error`	Farb-Varianten

Accordion

Die ausführliche Antwort auf diese Frage.

Die Antwort auf Frage zwei.

Skeleton

Ladeplatzhalter: schimmernde Zeilen stehen für Text, der noch nicht da ist. Die Breite jeder Zeile setzt der Aufrufer; der Schimmer folgt dem Theme und steht unter prefers-reduced-motion still. Den Bereich mit aria-busy="true" markieren, damit Hilfstechnik das Laden erkennt.

Klasse	Beschreibung
`.glass-skeleton`	Stapel aus Zeilen, 10px Abstand
`.glass-skeleton__line`	Eine Schimmerzeile (12px); Breite per Inline-Style
`.glass-skeleton__line--title`	Höhere Zeile (18px) für eine Überschrift

Tabelle

Eine gewöhnliche <table> auf Glas: Haarlinien zwischen den Zeilen, gedämpfter Kopf, Zahlen rechtsbündig in Tabellenziffern. Der Wrapper .glass-table-wrap scrollt seitlich, wo die Spalten nicht passen. Die Klasse gehört auf die Tabelle selbst — aus einem Shadow Root erreicht ::slotted() die Zellen nicht, deshalb ist das bewusst Dokument-CSS.

Datum	Posten	Betrag
2026-09-18	Rechnung 1042	1.240,00
2026-09-19	Erstattung	−80,00
2026-09-20	Offen	–

<div class="glass-table-wrap"> <table class="glass-table"> <thead><tr><th>Datum</th><th class="glass-table__num">Betrag</th></tr></thead> <tbody><tr><td>2026-09-18</td><td class="glass-table__num">1.240,00</td></tr></tbody> </table> </div>

Klasse	Beschreibung
`.glass-table-wrap`	Optionaler Container mit seitlichem Scrollen
`.glass-table`	Die Tabelle: Haarlinien, Hover-Hervorhebung
`.glass-table__num`	Rechtsbündig, Tabellenziffern — auf `th` und `td`
`.glass-table__muted`	Sekundäre Textfarbe für eine Zelle

Fließtext

Fließtext, den die App nicht von Hand geschrieben hat — gerendertes Markdown, Hilfe- und Infoseiten. Eine Klasse auf dem Container stylt Überschriften, Absätze, Listen, Links, Code, Zitate, Bilder und Tabellen. Bewusst Dokument-CSS: der Inhalt ist Light DOM, und ::slotted() endet auf der ersten Ebene.

Erste Schritte

glasskit.css einbinden, data-theme auf <html> setzen, fertig. Alles Weitere ist optional — siehe die Design-Tokens.

Dark Mode ist der Standard
Light Mode über data-theme="light"

Der Glaseffekt braucht einen farbigen Hintergrund, um sichtbar zu sein.

Segmentwahl

Eine kleine, exklusive Auswahl als ein Bedienelement — Ampel, Vormittag / Nachmittag, Modus. Knöpfe in einer role="group"; der gewählte trägt aria-pressed="true", und genau an diesem Attribut hängt das Styling, damit Zustand und Semantik nicht auseinanderlaufen. Die Ton-Modifier setzen einen Punkt in einer Zustandsfarbe vor die Beschriftung. Probier es: Klick oder Tab auf einen Knopf und Leertaste. Mehr Optionen als Platz? Ohne Modifier bleibt die Zeile einzeilig und läuft über den Rand; --scroll lässt sie seitwärts scrollen, --wrap bricht sie um. Beide lassen sich mit --full kombinieren.

<div class="glass-segmented glass-segmented--full" role="group" aria-label="Status"> <button class="glass-segmented__item glass-segmented__item--success" aria-pressed="true"> <span class="glass-segmented__dot"></span>Grün </button> <button class="glass-segmented__item" aria-pressed="false">Hilfeseite</button> </div>

Klasse	Beschreibung
`.glass-segmented`	Die Gruppe: eingelassene Glas-Schiene, Knöpfe darin
`--full`	Knöpfe teilen sich die Breite
`--scroll`	Eine Zeile, die seitwärts scrollt, wenn die Optionen nicht passen; Scrollbar versteckt (seit 1.17.0)
`--wrap`	Bricht die Zeile um, wenn die Optionen nicht passen (seit 1.17.0)
`__item`	Eine Option; `aria-pressed="true"` markiert die gewählte, `disabled` dämpft
`__item--success` / `--warning` / `--error`	Ton: setzt `--gl-segmented-tone` für den Punkt
`__dot`	Der Punkt vor der Beschriftung, in der Tonfarbe

Schrittanzeige

Fortschritt durch einen kurzen Ablauf: nummerierte Kreise mit Haarlinien dazwischen, erledigte auf der Erfolgsfläche (mit SVG-Haken), der aktuelle in der Primärfarbe und mit aria-current="step".

Tag
Fenster
3Hund
4Bestätigen

Die Liste ist ein Größen-Container: unter 360 px behält nur der aktuelle Schritt seine Beschriftung, die anderen zeigen ihre Nummer; davor kürzen Beschriftungen mit Ellipse. Maßgeblich ist die Breite des Blocks, nicht des Viewports — hier in einem 300-px-Rahmen:

Tag
2Zeitfenster wählen
3Hund
4Bestätigen

<ol class="glass-steps"> <li class="glass-steps__item glass-steps__item--done"> <span class="glass-steps__num"></span><span class="glass-steps__label">Tag</span> </li> <li class="glass-steps__line" aria-hidden="true"></li> <li class="glass-steps__item glass-steps__item--current" aria-current="step"> <span class="glass-steps__num">2</span><span class="glass-steps__label">Fenster</span> </li> </ol>

Klasse	Beschreibung
`.glass-steps`	Die Liste; ein Größen-Container, in einer Flex-Zeile also mit Breite versehen
`__item`, `__item--done`, `__item--current`	Ein Schritt und seine Zustände
`__num`	Der Kreis: Nummer, oder ein SVG-Haken wenn erledigt
`__label`	Die Beschriftung; unter 360 px ausgeblendet, außer am aktuellen Schritt
`__line`	Haarlinie zwischen den Schritten

Bottom-Sheet

Das Bottom-Sheet ist das mobile Geschwister des Modals: ein Overlay, das einblendet, und ein Panel, das von der Unterkante hochfährt, nur oben gerundet, mit Griff und Safe-Area-Abstand. Eigener Block statt Modal-Modifier, weil Layout, Einfahrbewegung und Geste verschieden sind. --inline bettet das Panel ohne Overlay in den Fluss ein; die Overlay-Form braucht ein wenig JavaScript, unten gezeigt und in GlassKit Elements als <glk-sheet> umgesetzt.

Umbuchen auf …

Inhalt des Sheets: Liste, Text, Formular. Dieses hier ist eingebettet.

<div class="glass-sheet-overlay" hidden> <div class="glass-sheet" role="dialog" aria-modal="true"> <div class="glass-sheet__grip"></div> <h2 class="glass-sheet__title">Umbuchen auf …</h2> <div class="glass-sheet__body">…</div> <div class="glass-sheet__actions">…</div> </div> </div> // öffnen: hidden entfernen, Reflow erzwingen, im nächsten Frame .is-active setzen // schließen: .is-active entfernen, hidden nach transitionend (Sicherheitsnetz 400 ms)

Klasse	Beschreibung
`.glass-sheet-overlay`	Fixiertes Overlay: Scrim, Blur, Panel an der Unterkante; startet bei Opacity 0
`.is-active`	Overlay sichtbar, Panel hochgefahren — per Skript geschaltet
`.glass-sheet`	Das Panel: Milchglas, oben gerundet, unten Safe-Area-Abstand
`--inline`	Im Fluss, ohne Overlay, rundum gerundet
`__grip`, `__title`, `__body`, `__actions`	Griff, Überschrift, Inhalt, Aktionsspalte

Leerzustand

Für leere Listen und Ergebnisseiten: eine zentrierte Spalte mit runder Icon-Fläche, Titel, kurzem gedämpftem Text und Platz für eine oder mehrere Aktionen nebeneinander.

Noch keine Buchungen

Such dir einen Tag und einen Hund aus — das Team freut sich.

<div class="glass-empty"> <span class="glass-empty__icon"></span> <p class="glass-empty__title">Noch keine Buchungen</p> <p class="glass-empty__text">…</p> <div class="glass-empty__action">…</div> </div>

Klasse	Beschreibung
`.glass-empty`	Zentrierte Spalte
`__icon`	48-px-Kreisfläche, darin ein 24-px-Strich-Icon (`::slotted(svg)`-Zwilling für Elements)
`__title`, `__text`	Überschrift und gedämpfter Text (max. 38 Zeichen breit)
`__action`	Platz für eine oder mehrere Aktionen: nebeneinander mit 8 px Abstand, umbrechend und zentriert, wenn es eng wird (seit 1.17.0)

Wochenstreifen

Eine Reihe von Tages-Chips, die seitwärts scrollt — ein Buchungshorizont, die Tage um heute. Jeder Chip ist ein <button> mit Wochentag, Tageszahl und einem Punkt, den ein Ton-Modifier einfärbt; ohne Ton bleibt der Punkt transparent, damit Chips mit und ohne Markierung gleich hoch sind. Der gewählte Chip trägt aria-pressed="true" wie in der Segmentwahl; :disabled oder aria-disabled="true" dimmt einen Tag, der nicht wählbar ist. Die Scrollbar ist versteckt. Gib jedem Knopf ein aria-label mit dem vollen Datum — das sichtbare „Di 22“ ist kein Name. <glk-date-strip> in GlassKit Elements baut das aus Daten, mit Pfeiltasten und zentriertem gewähltem Chip.

Klasse	Beschreibung
`.glass-date-strip`	Scrollende Reihe; versteckte Scrollbar; 4 px Innenabstand, damit der eigene Überlauf den Fokusring nicht beschneidet
`__day`	Chip-Knopf, mindestens 44 px; `[aria-pressed="true"]` gewählt, `:disabled` / `[aria-disabled="true"]` gedimmt
`__day--today`	Unterstreicht die Zahl
`__wd`, `__num`	Wochentag in Versalien, Tageszahl
`__mark`	6-px-Punkt; ohne Ton transparent
`__mark--primary`, `--success`, `--warning`, `--error`	Ton des Punkts über `--gl-date-strip-tone`; auf dem gewählten Chip wird jeder Ton zur Schriftfarbe auf Primär (`--gl-date-strip-ink`)

Monatskalender

Ein Monat: Titel zwischen zwei runden Navigationsknöpfen, Wochentagszeile und 42 quadratische Tages-Knöpfe mit bis zu drei Punkten unter der Zahl. Der gewählte Tag trägt aria-pressed="true", --today zeichnet einen warmen Rahmen, --other dimmt einen Tag des Nachbarmonats, :disabled oder aria-disabled="true" dimmt einen Tag außerhalb des erlaubten Bereichs — die zweite Form bleibt für Pfeiltasten fokussierbar. Der Block ist eine role="group" aus Knöpfen mit dem vollen Datum als Namen, kein role="grid". <glk-calendar> in GlassKit Elements baut ihn, mit Tastaturnavigation und Namen aus Intl.

September 2026

<div class="glass-calendar"> <div class="glass-calendar__head"> <button class="glass-calendar__nav" aria-label="Previous month"></button> <div class="glass-calendar__title">September 2026</div> <button class="glass-calendar__nav" aria-label="Next month">…</button> </div> <div class="glass-calendar__grid" role="group" aria-label="Pick a day"> <span class="glass-calendar__wd" aria-hidden="true">Mo</span>  <button class="glass-calendar__day glass-calendar__day--other" aria-pressed="false" aria-label="Monday, 31 August 2026"> <span>31</span><span class="glass-calendar__marks"></span> </button> <button class="glass-calendar__day glass-calendar__day--today" aria-pressed="true" aria-label="…"> <span>22</span><span class="glass-calendar__marks"><span class="glass-calendar__mark glass-calendar__mark--warning"></span></span> </button>  </div> </div>

Klasse	Beschreibung
`.glass-calendar`	Block; `__head` mit `__title` (Ellipse, wenn es eng wird) und zwei `__nav`-Knöpfen, 32 px rund, mit SVG-Chevron
`__grid`	Sieben Spalten, 4 px Abstand
`__wd`	Wochentags-Kopfzelle, gedämpfte Versalien
`__day`	Quadratischer Tages-Knopf; `[aria-pressed="true"]` gewählt, `--today` warmer Rahmen, `--other` gedimmter Nachbarmonat, `:disabled` / `[aria-disabled="true"]` gedimmt und nicht wählbar
`__marks`, `__mark`	5-px-Punkte unter der Zahl, bis zu drei; `__mark--primary` / `--success` / `--warning` / `--error` über `--gl-calendar-tone`, die Schriftfarbe auf dem gewählten Tag über `--gl-calendar-ink`

Bildauswahl

Ein Bild wählen, mit Vorschau: eine 72-px-Fläche — das Bild mit object-fit: cover oder ein Platzhalter-Icon — und eine Spalte mit Beschriftung, Hinweis und Aktionen, die gewöhnliche .glass-btn-Knöpfe sind; der Block bringt keine eigene Knopfoptik mit. --round macht die Fläche rund für Avatare; eine lange Beschriftung bricht um und drückt die Fläche nie zusammen. Jedes Bild, nicht nur Fotos. <glk-image-picker> in GlassKit Elements ergänzt Dateidialog, EXIF-Drehung und Verkleinerung.

Foto des Hundes JPG oder PNG · wird vor dem Hochladen auf 1024 px verkleinert

Profilfoto

<div class="glass-image-picker" role="group" aria-labelledby="photo-label"> <div class="glass-image-picker__preview glass-image-picker__preview--round"><img src="…" alt=""></div> <div class="glass-image-picker__meta"> <span class="glass-image-picker__label" id="photo-label">Profile photo</span> <span class="glass-image-picker__hint">JPG or PNG</span> <div class="glass-image-picker__actions"> <button class="glass-btn glass-btn--secondary glass-btn--sm glass-btn--auto">Change</button> <button class="glass-btn glass-btn--tertiary glass-btn--sm glass-btn--auto">Remove</button> </div> </div> </div>

Klasse	Beschreibung
`.glass-image-picker`	Zeile: Fläche links, Spalte rechts, 14 px Abstand
`__preview`	72-px-Fläche; `img` füllt sie, `svg` ist der 28-px-Platzhalter in der gedämpften Icon-Farbe
`__preview--round`	Kreis, für Avatare
`__meta`	Spalte, die nachgibt (`min-width: 0`)
`__label`, `__hint`	Beschriftung im Look von `.glass-label`, bricht überall um; kleiner gedämpfter Hinweis
`__actions`	Umbrechende Reihe aus `.glass-btn`-Knöpfen

Utilities

Stack (vertikal)

.gl-stack .gl-stack--xs (8px) .gl-stack--sm (12px) .gl-stack--md (16px) .gl-stack--lg (20px) .gl-stack--xl (24px)

Row (horizontal)

.gl-row .gl-row--xs (8px) .gl-row--sm (12px) .gl-row--md (16px)

Margin Top

.gl-mt-sm (12px) .gl-mt-md (16px) .gl-mt-lg (20px) .gl-mt-xl (24px)

Margin Bottom

.gl-mb-sm (12px) .gl-mb-md (16px) .gl-mb-lg (20px) .gl-mb-xl (24px)

Text

.gl-text-center .gl-text-muted .gl-text-sm

Layout

.gl-px (padding horizontal) .gl-w-full (width: 100%) .gl-flex-1 (flex: 1)

📋 Alle Klassen auf einen Blick

Komponente	Klassen	Modifier / States
Hintergrund	`.glass-bg`	`--has-tab-bar`
Navigation	`.glass-nav`	–
Pill-Button	`.glass-pill`	–
Theme-Toggle	`.glass-theme-toggle`	–
Titel	`.glass-title`	–
Card	`.glass-card`	`--glow`
Button	`.glass-btn`	`--primary`, `--secondary`, `--tertiary`, `--sm`, `--lg`, `--auto`
Badge	`.glass-badge`	`--primary`, `--success`, `--warning`, `--error`, `--interactive`, `--selected`
Avatar	`.glass-avatar`	`--sm`, `--lg`
Divider	`.glass-divider`	–
Status	`.glass-status`	–
Liste	`.glass-list`	`--flush`, `--bare`, `__item--interactive`, `__item--center`, `__item--danger`, `__item--accent`, `__leading--lg`, `__subtitle--wrap`, `__value`, `__section-header`
Skeleton	`.glass-skeleton`	`__line`, `__line--title`
Tabelle	`.glass-table`	`-wrap`, `__num`, `__muted`
Fließtext	`.glass-prose`	–
Segmentwahl	`.glass-segmented`	`--full`, `--scroll`, `--wrap`, `__item`, `__item--success`/`--warning`/`--error`, `__dot`, `[aria-pressed]`
Schrittanzeige	`.glass-steps`	`__item`, `__item--done`, `__item--current`, `__num`, `__label`, `__line`
Bottom-Sheet	`.glass-sheet-overlay` + `.glass-sheet`	`.is-active`, `--inline`, `__grip`, `__title`, `__body`, `__actions`
Leerzustand	`.glass-empty`	`__icon`, `__title`, `__text`, `__action`
Wochenstreifen	`.glass-date-strip`	`__day`, `__day--today`, `__wd`, `__num`, `__mark`, `__mark--primary`/`--success`/`--warning`/`--error`, `[aria-pressed]`, `:disabled`
Monatskalender	`.glass-calendar`	`__head`, `__title`, `__nav`, `__grid`, `__wd`, `__day`, `__day--today`, `__day--other`, `__marks`, `__mark--primary`/`--success`/`--warning`/`--error`, `[aria-pressed]`, `[aria-disabled]`
Bildauswahl	`.glass-image-picker`	`__preview`, `__preview--round`, `__meta`, `__label`, `__hint`, `__actions`
Popover	`.glass-popover`	`--top`, `--start`, `--end`, `.is-open`
Input	`.glass-input`	`--error`, `:disabled`
Textarea	`.glass-textarea`	–
Select	`.glass-select`	–
Suchfeld	`.glass-search`	–
Toggle	`.glass-toggle`	`:checked`
Checkbox	`.glass-checkbox`	`:checked`
Radio	`.glass-radio`	`:checked`
Range	`.glass-range`	–
Progress	`.glass-progress`	`--sm`, `--lg`, `--success`, `--error`
Modal	`.glass-modal-overlay`	`.is-active`
Toast	`.glass-toast`	`--success`, `--error`, `--warning`, `.is-visible`, `__action`, `__close`
Tab-Bar	`.glass-tab-bar`	`.is-active` auf Items
Tab-Bar Floating	`.glass-tab-bar-dock` + `.glass-tab-bar--floating`	`__accessory`, `__accessory--accent`/`--success`/`--error`, `--accessory-left`
Accordion	`.glass-accordion`	`.is-open` auf Items

🤖 KI / LLM-Referenz

GlassKit liefert eine SKILL.md mit – eine strukturierte, maschinenlesbare Komponenten-Referenz für KI-Assistenten, LLMs und Code-Generierungs-Tools.

Feature	Beschreibung
Copy-Paste HTML	Alle 31 Komponenten mit exakter Verschachtelung und BEM-Hierarchie
Design-Token-Tabellen	Farben, Surfaces, Blur, Radii, Spacing, Shadows, Typography
State-Klassen-Mapping	`is-active`, `is-open`, `is-visible`, `:checked` – wo was hingehört
Composition Patterns	6 fertige Seiten-Layouts: Login, Dashboard, Formular, Modal, Einstellungen, Fortschritt
Häufige Fehler	Typische Fehler und deren Korrekturen

Anhängen oder referenzieren Sie SKILL.md, wenn Sie eine KI bitten, GlassKit-HTML zu generieren – für produktionsreife Ergebnisse.

# Dateipfad glasskit/SKILL.md # Auch im npm-Paket enthalten npm install @jungherz-de/glasskit node_modules/@jungherz-de/glasskit/SKILL.md

🧩 Die GlassKit-Familie

GlassKit ist das CSS-Fundament einer dreischichtigen Familie – drei Schichten, eine Designsprache. Für alles jenseits einzelner Komponenten sind die Schwesterprojekte der vorgesehene Weg.

Schicht	Projekt	Einsatz
CSS-Fundament	🧊 GlassKit (Sie sind hier)	Die Designsprache: Pure-CSS-Komponenten, Design Tokens, Dark & Light.
App-Schicht	GlassKit Elements	Drop-in Web Components (`glk-button`, `glk-card`, …) für App-UIs.
Website-Schicht	GlassKit Web	Eine komplette Website bauen – das offizielle Astro-Template mit Sections, i18n und SEO auf dem GlassKit-Fundament.

Installation

Design Tokens

Farbpalette

Glasflächen

Spacing & Radii

Theming (Light / Dark)

Hintergrund

Navigation Bar

Pill-Buttons

Tab-Bar

Tab-Bar – Floating

Akzent-Varianten für das Accessory

Titel

Verträge aufnehmen& hochladen

Card

Buttons

Badge

Chips

Avatar

Divider

Status-Hinweis

Liste

Settings-Stil (Icon + Titel + Untertitel + Trailing)

Kompaktes Menü (zentrierter Text, ohne Icons)

Gruppierte Sektionen mit großen Icons

Klassen-Referenz

Modal

Vertrag löschen?

Klassen-Referenz

Toast

Popover

Klassen-Referenz

Input

Textarea

Select

Suchfeld

Toggle Switch

Checkbox

Radio Button

Range Slider

Progress Bar

Accordion

Skeleton

Tabelle

Fließtext

Erste Schritte

Segmentwahl

Schrittanzeige

Bottom-Sheet

Umbuchen auf …

Leerzustand

Wochenstreifen

Monatskalender

Bildauswahl

Utilities

Stack (vertikal)

Row (horizontal)

Margin Top

Margin Bottom

Text

Layout

📋 Alle Klassen auf einen Blick

🤖 KI / LLM-Referenz

🧩 Die GlassKit-Familie

Verträge aufnehmen
& hochladen