GlassKit Elements

<glk-title>

Gestaltete Überschrift mit Textschatten.

<glk-badge>

Inline-Status-Badge mit Farbvarianten — und mit interactive ein Filter-Chip.

interactive rendert den Badge als echten <button> — Zeiger, Hover-Tönung, Fokusring, per Tastatur bedienbar — und lässt ihn glk-click senden. selected markiert den aktiven Chip und wird nach aria-pressed gespiegelt. Probier die Zeile aus: sie verschiebt selected bei glk-click.

Events: glk-click, wenn interactive gesetzt ist.

<glk-avatar>

Kreisförmiger Avatar mit Initialen oder Bild.

<glk-card>

Inhaltskarte mit Glaseffekt.

<glk-divider>

<glk-status>

Statushinweis mit Nachricht.

<glk-empty>

Leerzustand für Listen und Ergebnisseiten: Icon-Fläche, Titel, kurzer Text und eine Aktion. Ein leerer title oder text blendet sein Element aus.

Slots: Standard (ein <svg>-Icon; ein Kreis als Rückfall), action. Parts: empty, icon, title, text, action.

<glk-button>

Glas-gestalteter Button mit drei Varianten und Größenoptionen.

Events: glk-click

type="submit" sendet das Formular ab, in dem das Element steht, type="reset" setzt es zurück — erst wenn der Klick fertig aufgestiegen ist, sodass ein Listener mit preventDefault() auf dem Klick es verhindert, wie bei einem nativen Button. Ein Formular mit ungültigen Feldern sendet nicht und zeigt die Meldung des Browsers. Das submit-Event nennt das Element als submitter; .form ist sein Formular, und element.click() wirkt wie ein Klick. aria-expanded, aria-haspopup und aria-pressed am Element werden an den nativen Button im Inneren weitergereicht, den Screenreader lesen (seit 1.20.0).

<glk-pill>

Kleiner kreisförmiger Icon-Button (46x46px).

aria-expanded, aria-haspopup und aria-pressed werden an den nativen Button im Inneren weitergereicht (seit 1.20.0) — <glk-popover> setzt aria-expanded an seinem Trigger.

<glk-input>

Textfeld mit Label, Hinweis und Fehlerzustand.

Events: glk-input, glk-change

Slots (seit 1.22.0): prefix und suffix setzen ein Icon, eine Währung, eine Einheit oder einen Button in den Kasten des Feldes, an seinen Anfang und sein Ende — von rechts nach links tauschen sie die Seiten. Jeder erscheint nur, solange etwas darin steckt; seine Breite wird gemessen, und der Text hält Abstand. Ein Klick auf Text, ein Icon oder ein deaktiviertes Bedienelement im Slot geht durch ins Feld; aktive Bedienelemente, <glk-button> und <glk-select> eingeschlossen, Links und Elemente mit tabindex nehmen ihren eigenen (seit 1.22.2 — vorher nahm jedes Element im Slot den Klick). Das Bedienelement selbst in den Slot setzen: steckt es in einem anderen Element, braucht es pointer-events: auto von der Seite. Ein Container, der mit pointer-events: none sperrt, hält ein Bedienelement nicht; ihn mit inert sperren oder das Bedienelement deaktivieren. Ihr Text wird als Beschreibung des Feldes vorgelesen. Der Kasten ist der Part box, die Affixe sind prefix und suffix.

<glk-textarea>

Attribute: label, rows, placeholder, required, readonly (seit 1.22.0), name, value, disabled. Das Label benennt das Feld.

<glk-select>

Kinder: native <option>-Elemente. Mit required und einer leeren ersten Option (value="") sendet das Formular erst, wenn gewählt wurde (seit 1.20.0). Das Label benennt das Feld. Ein value — als Attribut oder Property —, für den es noch keine Option gibt, bleibt erhalten und wird gewählt, sobald seine Option kommt, bis der Nutzer etwas anderes wählt (seit 1.22.0; vorher ging ein als Property gesetzter Wert verloren, wenn die Optionen noch nicht kopiert waren). Ein Formular-Reset kehrt zum value-Attribut zurück.

<glk-search>

Das Suchfeld hat kein sichtbares Label; label benennt es für Screenreader (seit 1.20.0) — ohne bleibt ihnen nur der Platzhalter.

<glk-toggle>

Schalter-Toggle mit Formular-Teilnahme.

Events: glk-change → { checked: boolean }

Der Schalter ist die native Checkbox im Inneren, mit role="switch": ein Bedienelement für Screenreader, benannt durch label, sein Zustand kommt von der Checkbox. Seit 1.20.0 trägt das Element selbst kein role, aria-checked oder aria-disabled mehr — Styles und Selektoren auf [checked] und [disabled]. element.click() und ein <label> um das Element oder mit Verweis darauf schalten es um, wie bei einer nativen Checkbox; das gilt auch für <glk-checkbox> und <glk-radio>. Ohne label ist das Element genau so groß wie seine Spur, 52 × 30 px.

<glk-checkbox>

required hält das Formular vom Absenden ab, bis das Kästchen angehakt ist (seit 1.20.0).

<glk-radio>

required an einem Radio der Gruppe macht die Gruppe zur Pflicht; jedes gewählte Radio erfüllt sie, wie bei nativen Radios (seit 1.20.0).

<glk-range>

<glk-segmented>

Eine kleine, exklusive Auswahl als ein Bedienelement. Rendert je Option einen <button>, der gewählte trägt aria-pressed="true"; eine Wertänderung setzt nur dieses Attribut neu, der Fokus bleibt, wo er war. Formular-assoziiert: ein umschließendes <form> erhält name=value, Reset stellt den Anfangswert wieder her. Probier es: Tab auf einen Knopf, Leertaste. Mehr Optionen als Platz: overflow="scroll" hält eine Zeile, die seitwärts scrollt, und die gewählte Option im Blick, overflow="wrap" bricht sie um.

Events: glk-change { value } — nur bei einer Änderung durch den Nutzer. Part: group.

<glk-calendar>

Ein Monat mit einem Tag zum Wählen. Die Tage sind Knöpfe in einer role="group", der gewählte trägt aria-pressed="true", jeder ist mit seinem vollen Datum benannt; Monatstitel, Wochentagsnamen und der erste Wochentag kommen aus Intl für die locale (week-start übersteuert). Ein Tab-Stopp: Pfeiltasten wandern um einen Tag oder eine Woche, Pos1/Ende an die Enden der Woche, Bild auf/ab um einen Monat — über die Monatsgrenze hinaus zeigt der Kalender diesen Monat und sendet glk-month. Pfeiltasten bewegen nur den Fokus; Enter oder Leertaste wählt, damit ein Kalender, der bei jeder Wahl ein Sheet öffnet, beim Umschauen still bleibt. Tage außerhalb von min/max sind aria-disabled: im Pfeilpfad, angesagt, nie gewählt. Formularfähig wie <glk-segmented>. Probier es: Mit Tab ins Raster, Pfeiltasten, Enter.

Ereignisse: glk-change { value } bei einer Wahl durch den Nutzer; glk-month { month } wenn der Nutzer zu einem anderen Monat wechselt. Eigenschaften: month, value, marks, locale, label, disabled. Parts: calendar, head, title, grid.

<glk-image-picker>

Ein Bild mit Vorschau, auf dem Client verkleinert, bevor es irgendwohin geht. Auswählen öffnet den Dateidialog aus einem echten Knopf; die Datei wird mit createImageBitmap dekodiert, die EXIF-Drehung eines Handyfotos angewendet, auf ein Canvas nicht größer als max gezeichnet und als Data-URL in glk-change übergeben. Die Eigenschaft src hält sie und wird nicht reflektiert, damit eine Data-URL von Megabytes nie im DOM landet. Eine Datei, die der Browser nicht dekodieren kann — Chrome und HEIC, eine kaputte Datei — sendet glk-error, statt still zu scheitern. Nicht formularfähig: auf glk-change hören und hochladen. Probier es mit einem Foto vom Handy.

Ereignisse: glk-change { dataUrl, width, height, size } nach einer Wahl, beim Entfernen mit leerer dataUrl und Nullen; glk-error { message, name } wenn die Datei nicht dekodiert werden kann. Eigenschaft: src (nicht reflektiert). Parts: picker, preview, meta, label, hint, actions.

<glk-nav> + <glk-pill>

Horizontale Navigationsleiste mit runden Icon-Buttons.

<glk-tab-bar> + <glk-tab-item>

Tab-Leiste fuer die Navigation am unteren Bildschirmrand.

Events: glk-tab-change → { tab: Element }

<glk-tab-dock> + <glk-tab-bar floating> + <glk-tab-accessory>

Pillenfoermige, mittig schwebende Tab-Leiste im Stil von iOS 26 Liquid Glass. Optional kombinierbar mit einer <glk-tab-accessory>-Kapsel (z.B. Suche, Verfassen). Der aktive Tab erhaelt einen weichen radialen Spotlight-Halo statt der Unterstrich-Markierung. Verwende .glass-bg--has-tab-bar-floating auf dem aeusseren Hintergrund.

Events: <glk-tab-accessory> sendet glk-click beim Klick (unterdrueckt im disabled-Zustand).

Tipp: Nutze .glass-bg--has-tab-bar-floating auf dem aeusseren .glass-bg statt --has-tab-bar, damit das Padding zur schwebenden Variante passt.

<glk-steps>

Fortschritt durch einen kurzen Ablauf, rein darstellend: der aktuelle Schritt trägt aria-current="step", erledigte zeigen einen SVG-Haken. Die Verengung in schmalen Rahmen macht die Container-Query des CSS-Blocks (unter 360 px bleibt nur das aktuelle Label) — das Element weiß nichts davon.

Eigenschaft current spiegelt das Attribut; steps nimmt ein Array oder kommagetrennten Text. Part: steps.

<glk-date-strip>

Eine Reihe von Tages-Chips, die seitwärts scrollt — ein Buchungshorizont, die Tage um heute. Die Chips sind Knöpfe in einer role="group", der gewählte trägt aria-pressed="true", jeder ist mit seinem vollen Datum benannt. Ein Tab-Stopp: Pfeiltasten wandern zwischen den Chips, Pos1/Ende springen an die Enden, Enter oder Leertaste wählt. Der gewählte Chip wird nach dem ersten Layout und bei jeder Wertänderung in die Mitte des Streifens gescrollt — nur der Streifen scrollt, nie die Seite. Wochentagsnamen kommen aus Intl für die locale. Probier es: Der Streifen unten beginnt mit dem 20. Tag gewählt.

Ereignisse: glk-change { value } — nur bei einer Änderung durch den Nutzer. Eigenschaften: value, marks (Objekt oder JSON-Text), locale, label. Part: strip.

<glk-progress>

<glk-modal>

Modaler Dialog mit Titel, Inhalt und Aktions-Buttons. Seit 1.20.0 ist er ein natives <dialog>, geöffnet mit showModal(): Er liegt über allem anderen, die Seite dahinter ist für Zeiger, Tastatur und Screenreader inert, der Fokus wandert hinein und beim Schließen dorthin zurück, wo er herkam, und der Inhalt ist außer Reichweite, solange er geschlossen ist. Der Titel benennt den Dialog.

Methods: .show(), .close()   Events: glk-close

Welches Element beim Öffnen den Fokus bekommt, entscheiden die Browser verschieden — Chrome nimmt das erste Feld des Inhalts, Safari die erste Aktion. Ein autofocus im Inhalt oder an einer Aktion legt es fest. Escape und ein Klick auf die abgedunkelte Fläche schließen das Modal mit Blende und senden glk-close; .close() sendet nichts. Solange es offen ist, ist alles außerhalb inert — ein <glk-toast>, der dann erscheint, ist weder anklickbar noch wird er vorgelesen. Rückmeldungen gehören deshalb ins Modal, oder es schließt zuerst.

<glk-toast>

Benachrichtigung am oberen Rand, die sich selbst ausblendet — und seit 1.19.0 eine, die etwas anbietet: Mit action-label (oder show(message, { action })) bekommt sie einen Knopf und ein × und bleibt stehen, bis eines davon benutzt wird, es sei denn, eine Dauer ist gesetzt. Die Aktion sendet glk-action und schließt den Toast — außer ein Listener ruft preventDefault() auf oder zeigt die nächste Nachricht; × und Escape senden glk-close. Solange Zeiger oder Fokus darauf liegen, läuft er nicht ab. Er ist eine höfliche Live-Region, die Nachricht wird also angesagt.

Methoden: .show(message, variant, duration), .show(message, { variant, duration, action: { label, value }, dismissible }), .dismiss(). Slot: icon — ersetzt das eingebaute Symbol; ohne eigenen Stroke nimmt es die Variantenfarbe an. Ereignisse: glk-action { action, label } (abbrechbar), glk-close (× oder Escape), glk-dismiss (abgelaufen).

<glk-popover>

Anchored Dropdown- / Menü-Container. Wrappt ein Trigger-Element (via slot="trigger") und dessen Floating-Inhalt. Das Element verwaltet .is-open-Toggle, Outside-Click-Dismiss und Escape-Key-Close intern — kein manuelles Klassen-Umschalten nötig.

Events: glk-open, glk-close

Methoden: .show(), .close(), .toggle()

Achtung: die Methode heißt bewusst .toggle() — nicht .togglePopover(), da dies mit der nativen HTMLElement.togglePopover()-API kollidiert.

Der Trigger sagt, ob der Popover offen ist: Er bekommt aria-expanded, auch nachdem er ausgetauscht wurde (seit 1.20.0). <glk-button> und <glk-pill> reichen es an ihren nativen Button weiter.

<glk-sheet>

Bottom-Sheet — das mobile Geschwister von <glk-modal>. Öffnen und Schließen animiert GlassKits .glass-sheet-Block; das Overlay wird erst nach transitionend versteckt, damit keine Blur-Schicht hinter der Seite stehen bleibt, und unter prefers-reduced-motion schaltet es sofort. Scrim-Klick und Escape schließen und senden glk-close; show() / close() nicht. inline bettet das Panel ohne Overlay ein.

Methoden: show(), close(). Slots: Standard (Inhalt), actions. Events: glk-close — nur beim Schließen durch den Nutzer (Scrim, Escape). Parts: overlay, sheet, title, body, actions.

<glk-accordion> + <glk-accordion-item>

Einklappbare Akkordeon-Abschnitte.

Events: glk-toggle → { open: boolean }

Der Trigger trägt aria-expanded und aria-controls; ein geschlossener Abschnitt ist inert, seine Links und Felder sind also aus der Tab-Reihenfolge und aus dem Accessibility-Baum, bis er sich öffnet (seit 1.20.0).

<glk-list> + <glk-list-item>

iOS-Style gruppierte Einstellungsliste. Items tragen ein führendes Icon, Titel + optionalen Untertitel und ein nachgelagertes Element. Divider zwischen den Items werden automatisch gezeichnet — niemals <hr>-Markup zwischen Items einfügen. Unterstützt Sektions-Header, große Icons, mehrzeilige Untertitel, Trailing-Werte und semantische Varianten.

Events: glk-click auf <glk-list-item>, sobald interactive gesetzt ist.

Framework-sicher: beide Elemente nutzen pures Shadow DOM mit Slot-Projection — kein Clonen von Kinder-Knoten — und komponieren sauber in lit-html-Templates, HybridsJS, React, Vue und Svelte.