GlassKit Elements

Installation

CDN (schnellste Variante)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.6/glasskit.min.css">  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit-elements/dist/glasskit-elements.min.js"></script>

npm

npm install @jungherz-de/glasskit-elements @jungherz-de/glasskit

import '@jungherz-de/glasskit/glasskit.css'; import '@jungherz-de/glasskit-elements';

Selektiver Import

Importieren Sie nur, was Sie benötigen, für kleinere Bundles:

import '@jungherz-de/glasskit-elements/components/glk-button.js'; import '@jungherz-de/glasskit-elements/components/glk-toggle.js';

Theming

Setzen Sie data-theme auf dem <html>-Element. Alle Komponenten synchronisieren sich automatisch über einen gemeinsamen MutationObserver.

<html data-theme="dark">  <script> // Toggle theme const theme = document.documentElement.getAttribute('data-theme'); document.documentElement.setAttribute('data-theme', theme === 'dark' ? 'light' : 'dark'); </script>

Formular-Integration

Alle Formular-Komponenten nehmen über ElementInternals an nativen Formularen teil.

<form id="settings"> <glk-input name="username" label="Username"></glk-input> <glk-toggle name="notify" label="Notifications" checked></glk-toggle> <glk-button variant="primary" type="submit">Save</glk-button> </form> <script> document.getElementById('settings').addEventListener('submit', (e) => { e.preventDefault(); const data = new FormData(e.target); console.log(Object.fromEntries(data)); // { username: "...", notify: "on" } }); </script>

Inhalts-Komponenten

`<glk-title>`

Gestaltete Überschrift mit Textschatten.

Page Heading

<glk-title>Page Heading</glk-title>

`<glk-badge>`

Inline-Status-Badge mit Farbvarianten.

Default

Primary

Success

Error

<glk-badge variant="success">Active</glk-badge>

Attribute	Type	Values
`variant`	String	`primary` \| `success` \| `error`

`<glk-avatar>`

Kreisförmiger Avatar mit Initialen oder Bild.

S

MD

LG

<glk-avatar size="lg">JD</glk-avatar> <glk-avatar src="photo.jpg"></glk-avatar>

Attribute	Type	Values
`size`	String	`sm` \| (default) \| `lg`
`src`	String	Image URL

`<glk-card>`

Inhaltskarte mit Glaseffekt.

Card content here.

<glk-card glow>Highlighted content</glk-card>

Attribute	Type	Description
`glow`	Boolean	Adds gradient glow effect

`<glk-divider>`

<glk-divider></glk-divider>

`<glk-status>`

Statushinweis mit Nachricht.

<glk-status message="No results found"></glk-status>

Buttons

`<glk-button>`

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

Primary

Secondary

Tertiary

<glk-button variant="primary" size="auto">Save</glk-button>

Attribute	Type	Values
`variant`	String	`primary` \| `secondary` \| `tertiary`
`size`	String	`sm` \| `md` \| `lg` \| `auto`
`disabled`	Boolean	Disables the button
`type`	String	`button` \| `submit` \| `reset`

Events: glk-click

`<glk-pill>`

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

<glk-pill label="Menu"> <svg viewBox="0 0 24 24">...</svg> </glk-pill>

Attribute	Type	Description
`label`	String	Accessible aria-label
`disabled`	Boolean	Disables the button

Formular-Komponenten

Alle Formular-Komponenten unterstützen name, value, disabled und nehmen an der nativen <form>-Übermittlung teil.

`<glk-input>`

Textfeld mit Label, Hinweis und Fehlerzustand.

<glk-input label="Email" type="email" placeholder="you@example.com" hint="Required" error name="email"></glk-input>

Attribute	Type	Description
`label`	String	Input label
`type`	String	text, email, password, ...
`placeholder`	String	Placeholder text
`hint`	String	Helper text
`error`	Boolean	Error styling
`required`	Boolean	Required field

Events: glk-input, glk-change

`<glk-textarea>`

<glk-textarea label="Message" rows="4"></glk-textarea>

`<glk-select>`

<glk-select label="Plan" name="plan"> <option value="free">Free</option> <option value="pro">Pro</option> </glk-select>

`<glk-search>`

<glk-search placeholder="Search..."></glk-search>

`<glk-toggle>`

Schalter-Toggle mit Formular-Teilnahme.

<glk-toggle label="Notifications" name="notify" checked></glk-toggle>

Attribute	Type	Description
`label`	String	Toggle label
`checked`	Boolean	Checked state
`disabled`	Boolean	Disabled state

Events: glk-change → { checked: boolean }

`<glk-checkbox>`

<glk-checkbox label="I agree" name="terms" checked></glk-checkbox>

`<glk-radio>`

<glk-radio name="plan" label="Free" value="free" checked></glk-radio> <glk-radio name="plan" label="Pro" value="pro"></glk-radio>

`<glk-range>`

<glk-range label="Volume" min="0" max="100" value="65"></glk-range>

Attribute	Type	Description
`min`	Number	Minimum (default: 0)
`max`	Number	Maximum (default: 100)
`value`	Number	Current value
`step`	Number	Step increment

Navigation

`<glk-nav>` + `<glk-pill>`

Horizontale Navigationsleiste mit runden Icon-Buttons.

<glk-nav> <glk-pill label="Back"><svg>...</svg></glk-pill> <glk-pill label="Settings"><svg>...</svg></glk-pill> </glk-nav>

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

Tab-Leiste fuer die Navigation am unteren Bildschirmrand.

<glk-tab-bar> <glk-tab-item label="Home" active><svg>...</svg></glk-tab-item> <glk-tab-item label="Profile" badge="3"><svg>...</svg></glk-tab-item> </glk-tab-bar>

Attribute	Component	Description
`label`	glk-tab-item	Tab label
`active`	glk-tab-item	Active state
`badge`	glk-tab-item	Badge count

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.

<glk-tab-dock> <glk-tab-bar floating> <glk-tab-item label="Home" active><svg>...</svg></glk-tab-item>  </glk-tab-bar> <glk-tab-accessory variant="accent" label="Verfassen"> <svg>...</svg> </glk-tab-accessory> </glk-tab-dock>

Attribut	Komponente	Beschreibung
`floating`	glk-tab-bar	Pillenfoermige Liquid-Glass-Variante — Spotlight-Halo am aktiven Item
`accessory-left`	glk-tab-dock	Accessory links statt rechts neben der Bar
`label`	glk-tab-accessory	aria-label fuer Barrierefreiheit
`variant`	glk-tab-accessory	`accent` \| `success` \| `error` — gefuellte farbige Kapsel mit weissem Icon
`disabled`	glk-tab-accessory	Deaktiviert

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.

Feedback

`<glk-progress>`

<glk-progress label="Upload" value="75" variant="success"></glk-progress>

Attribute	Type	Values
`value`	Number	0 – 100
`variant`	String	`success` \| `error`
`size`	String	`sm` \| (default) \| `lg`

`<glk-modal>`

Modaler Dialog mit Titel, Inhalt und Aktions-Buttons.

Modal oeffnen

<glk-modal title="Confirm" id="my-modal"> <p>Are you sure?</p> <div slot="actions"> <button class="glass-modal__action">Cancel</button> <button class="glass-modal__action glass-modal__action--primary">OK</button> </div> </glk-modal> // Methods document.getElementById('my-modal').show(); document.getElementById('my-modal').close();

Attribute	Type	Description
`open`	Boolean	Show/hide
`title`	String	Header title

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

`<glk-toast>`

Automatisch ausblendende Benachrichtigung.

Erfolg

Fehler

<glk-toast id="toast"></glk-toast> // Show programmatically document.getElementById('toast').show('Saved!', 'success', 3000);

Attribute	Type	Values
`variant`	String	`success` \| `error` \| `warning`
`duration`	Number	ms (default: 3000)

Methods: .show(message, variant, duration), .dismiss()

`<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.

Menü öffnen

<glk-popover placement="end"> <glk-button slot="trigger" variant="secondary">Menü öffnen</glk-button> <glk-list bare> <glk-list-item title="Teilen" interactive></glk-list-item> <glk-list-item title="Löschen" variant="danger" interactive></glk-list-item> </glk-list> </glk-popover> // Imperative API document.querySelector('glk-popover').show(); document.querySelector('glk-popover').close(); document.querySelector('glk-popover').toggle();

Attribute	Typ	Default	Beschreibung
`open`	Boolean	`false`	Sichtbarkeitsstatus (wird als `.is-open` auf die innere Fläche gespiegelt)
`placement`	String	`bottom`	`top` \| `bottom` \| `start` \| `end`

Slot	Zweck
`trigger`	Element, das den Popover beim Klick toggelt
(default)	Floating-Inhalt, der im offenen Zustand angezeigt wird

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.

Container

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

Einklappbare Akkordeon-Abschnitte.

Content for section 1.

Content for section 2.

<glk-accordion> <glk-accordion-item title="FAQ" open> Answer here. </glk-accordion-item> </glk-accordion>

Attribute	Component	Description
`title`	glk-accordion-item	Trigger text
`open`	glk-accordion-item	Expanded state

Events: glk-toggle → { open: boolean }

`<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.

<glk-list header="Empfehlungen"> <glk-list-item title="Medien prüfen" subtitle="Bis zu 1,38 GB." leading-lg wrap interactive> <svg slot="leading">...</svg> <svg slot="trailing">...</svg> </glk-list-item> <glk-list-item title="App" leading-lg detail="24 MB" interactive>...</glk-list-item> <glk-list-item title="Löschen" variant="danger" center interactive></glk-list-item> <glk-list-item title="Alle anzeigen" variant="accent" center interactive></glk-list-item> </glk-list>

Attribute	Komponente	Beschreibung
`header`	glk-list	Sektions-Header — Großbuchstaben-Label über der Liste
`flush`	glk-list	Edge-to-Edge-Variante — entfernt seitlichen Rand und Radius
`bare`	glk-list	Entfernt Hintergrund, Border, Shadow — für Einbettung in `<glk-popover>` oder `<glk-card>`
`title`	glk-list-item	Haupttext
`subtitle`	glk-list-item	Sekundärtext (muted, optional)
`interactive`	glk-list-item	Hover- / Focus- / Active-States + feuert `glk-click`
`center`	glk-list-item	Zentrierte Single-Text-Variante (z.B. für Aktionszeilen)
`leading-lg`	glk-list-item	Großes 40×40 Leading-Icon mit abgerundeten Ecken (für App-Icons)
`wrap`	glk-list-item	Mehrzeiliger Untertitel (bis 3 Zeilen mit Ellipsis)
`detail`	glk-list-item	Muted Trailing-Wert (z.B. Dateigröße, Version)
`variant`	glk-list-item	`danger` (rote Destruktiv-Aktion) oder `accent` (Primärfarbe)

Slot	Komponente	Zweck
`leading`	glk-list-item	Icon-Slot (24×24 SVG, oder 32×32 mit `leading-lg`)
`trailing`	glk-list-item	Chevron, Badge oder Button (gerendert nach `detail`-Wert)

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.

Installation

CDN (schnellste Variante)

npm

Selektiver Import

Theming

Formular-Integration

Inhalts-Komponenten

<glk-title>

<glk-badge>

<glk-avatar>

<glk-card>

<glk-divider>

<glk-status>

Buttons

<glk-button>

<glk-pill>

Formular-Komponenten

<glk-input>

<glk-textarea>

<glk-select>

<glk-search>

<glk-toggle>

<glk-checkbox>

<glk-radio>

<glk-range>