🇩🇪 DE

GlassKit Elements

Complete reference for all 24 web components – built by Jungherz GmbH. Vanilla JS, Shadow DOM, native form participation.

v0.8.2 Shadow DOM 24 Components Vanilla JS

Installation

CDN (quickest)

<!-- 1. GlassKit CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.3/glasskit.min.css"> <!-- 2. GlassKit Elements --> <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"> <!-- or "light" --> <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>
AttributeTypeValues
variantStringprimary | 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>
AttributeTypeValues
sizeStringsm | (default) | lg
srcStringImage URL

<glk-card>

Glass-effect content card.

Card content here.
<glk-card glow>Highlighted content</glk-card>
AttributeTypeDescription
glowBooleanAdds 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>
AttributeTypeValues
variantStringprimary | secondary | tertiary
sizeStringsm | md | lg | auto
disabledBooleanDisables the button
typeStringbutton | 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>
AttributeTypeDescription
labelStringAccessible aria-label
disabledBooleanDisables 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>
AttributeTypeDescription
labelStringInput label
typeStringtext, email, password, ...
placeholderStringPlaceholder text
hintStringHelper text
errorBooleanError styling
requiredBooleanRequired 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-toggle>

Switch toggle with form participation.

<glk-toggle label="Notifications" name="notify" checked></glk-toggle>
AttributeTypeDescription
labelStringToggle label
checkedBooleanChecked state
disabledBooleanDisabled 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>
AttributeTypeDescription
minNumberMinimum (default: 0)
maxNumberMaximum (default: 100)
valueNumberCurrent value
stepNumberStep 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>
AttributeComponentDescription
labelglk-tab-itemTab label
activeglk-tab-itemActive state
badgeglk-tab-itemBadge count

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

Feedback

<glk-progress>

<glk-progress label="Upload" value="75" variant="success"></glk-progress>
AttributeTypeValues
valueNumber0 – 100
variantStringsuccess | error
sizeStringsm | (default) | lg

<glk-modal>

Modal dialog with title, body, and action buttons.

Open Modal

Are you sure you want to proceed?
<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();
AttributeTypeDescription
openBooleanShow/hide
titleStringHeader 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);
AttributeTypeValues
variantStringsuccess | error | warning
durationNumberms (default: 3000)

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

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>
AttributeComponentDescription
titleglk-accordion-itemTrigger text
openglk-accordion-itemExpanded state

Events: glk-toggle → { open: boolean }