GlassKit Elements

Installation

CDN (quickest)

<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';

Selective Import

Import only what you need for smaller bundles:

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

Theming

Set data-theme on the <html> element. All components sync automatically via a shared 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>

Form Integration

All form components participate in native forms via ElementInternals.

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

Content Components

`<glk-title>`

Styled heading with text shadow.

Page Heading

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

`<glk-badge>`

Inline status badge with color variants.

Default

Primary

Success

Error

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

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

`<glk-avatar>`

Circular avatar with initials or image.

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

Glass-effect content card.

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

Status notice with message.

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

Buttons

`<glk-button>`

Glass-styled button with three variants and size options.

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

Small circular 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

Form Components

All form components support name, value, disabled and participate in native <form> submission.

`<glk-input>`

Text input with label, hint, and error state.

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

Switch toggle with form participation.

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

Horizontal navigation bar with circular 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>`

Bottom tab bar navigation.

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

Pill-shaped, centered, floating tab bar inspired by iOS 26 Liquid Glass. Pair with an optional <glk-tab-accessory> capsule (e.g. search, compose). The active tab gets a soft radial Spotlight halo instead of the underline dot. Use .glass-bg--has-tab-bar-floating on the outer background.

<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="Compose"> <svg>...</svg> </glk-tab-accessory> </glk-tab-dock>

Attribute	Component	Description
`floating`	glk-tab-bar	Pill-shaped Liquid Glass variant — Spotlight halo on the active item
`accessory-left`	glk-tab-dock	Place the accessory on the left of the bar (default is right)
`label`	glk-tab-accessory	aria-label for accessibility
`variant`	glk-tab-accessory	`accent` \| `success` \| `error` — filled colored capsule with white icon
`disabled`	glk-tab-accessory	Disabled state

Events: <glk-tab-accessory> emits glk-click when clicked (suppressed when disabled).

Tip: Use .glass-bg--has-tab-bar-floating on the outer .glass-bg instead of --has-tab-bar to reserve the right amount of bottom padding.

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

Modal dialog with title, body, and action buttons.

Open Modal

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

Auto-dismissing notification.

Success

Error

<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 / menu container. Wraps a trigger element (via slot="trigger") and its floating content. The element manages .is-open toggling, outside-click dismiss, and Escape-key close internally — no manual class toggling needed.

Open menu

<glk-popover placement="end"> <glk-button slot="trigger" variant="secondary">Open menu</glk-button> <glk-list bare> <glk-list-item title="Share" interactive></glk-list-item> <glk-list-item title="Delete" 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	Type	Default	Description
`open`	Boolean	`false`	Visibility state (reflected as `.is-open` on the inner surface)
`placement`	String	`bottom`	`top` \| `bottom` \| `start` \| `end`

Slot	Purpose
`trigger`	Element that toggles the popover when clicked
(default)	Floating content shown while open

Events: glk-open, glk-close

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

Heads-up: the method is deliberately called .toggle() — not .togglePopover(), which collides with the native HTMLElement.togglePopover() API.

Containers

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

Collapsible accordion sections.

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 grouped settings list. Items carry a leading icon, title + optional subtitle, and a trailing element. Dividers between items are drawn automatically — never add <hr> markup between items. Supports section headers, large icons, multi-line subtitles, trailing values, and semantic variants.

<glk-list header="Recommendations"> <glk-list-item title="Review media" subtitle="Save up to 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="Delete" variant="danger" center interactive></glk-list-item> <glk-list-item title="View all" variant="accent" center interactive></glk-list-item> </glk-list>

Attribute	Component	Description
`header`	glk-list	Section header text — uppercase label above the list
`flush`	glk-list	Edge-to-edge variant — removes side margin and radius
`bare`	glk-list	Strips background, border, shadow — for embedding inside `<glk-popover>` or `<glk-card>`
`title`	glk-list-item	Primary text
`subtitle`	glk-list-item	Secondary text (muted, optional)
`interactive`	glk-list-item	Hover / focus / active states + emits `glk-click`
`center`	glk-list-item	Centered single-text variant (e.g. for action rows)
`leading-lg`	glk-list-item	Large 40×40 leading icon with rounded corners (for app icons)
`wrap`	glk-list-item	Multi-line subtitle (up to 3 lines with ellipsis)
`detail`	glk-list-item	Muted trailing value text (e.g. file size, version)
`variant`	glk-list-item	`danger` (red destructive) or `accent` (primary color)

Slot	Component	Purpose
`leading`	glk-list-item	Icon slot (24×24 SVG, or 32×32 with `leading-lg`)
`trailing`	glk-list-item	Chevron, badge, or button (rendered after `detail` value)

Events: glk-click on <glk-list-item> when interactive is set.

Framework-safe: both elements use pure Shadow DOM with slot projection — no child node cloning — so they compose cleanly inside lit-html templates, HybridsJS, React, Vue, and Svelte.

Installation

CDN (quickest)

npm

Selective Import

Theming

Form Integration

Content Components

<glk-title>

<glk-badge>

<glk-avatar>

<glk-card>

<glk-divider>

<glk-status>

Buttons

<glk-button>

<glk-pill>

Form Components

<glk-input>

<glk-textarea>

<glk-select>

<glk-search>

<glk-toggle>

<glk-checkbox>

<glk-radio>

<glk-range>