Package Exports

@jungherz-de/glasskit-elements

Readme

🧊 GlassKit Elements

Drop-in Web Components for GlassKit CSS
29 vanilla JavaScript custom elements wrapping GlassKit's glassmorphism components.
Shadow DOM · Native form participation · Zero dependencies.

🌐 Live Demo · 📖 Documentation · 🧊 GlassKit CSS

✨ What is GlassKit Elements?

GlassKit Elements is a companion library to GlassKit CSS. It provides 29 Web Components (incl. the iOS 26-style floating Tab-Bar + Accessory) that encapsulate the verbose HTML markup required by GlassKit into simple, declarative custom elements.

<!-- Before: 5 elements, 6 classes -->
<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">Dark Mode</span>
</label>

<!-- After: 1 element, 0 classes -->
<glk-toggle label="Dark Mode" checked></glk-toggle>

🎯 Why GlassKit Elements?

Feature	Details
🔌 Shadow DOM	Style encapsulation via `adoptedStyleSheets` — no CSS leaking
🧩 29 Components	Buttons, cards, toggles, modals, accordions, lists, popovers, tab bars (incl. floating + accessory), and more
🪶 Lightweight	117 KB raw / 92 KB minified / 15 KB gzipped (IIFE bundle), no external dependencies
📦 Three bundle formats	IIFE for `<script>`, minified IIFE for production, ESM for bundlers & tree-shaking
🎛️ Form Participation	Input, toggle, checkbox, radio, select — all work natively with `<form>` via `ElementInternals`
🌗 Theme Sync	Automatic dark/light mode sync via `data-theme` on `<html>`
📱 Mobile-first	Inherits GlassKit's mobile-optimized design with `safe-area-inset` support

📥 Installation

CDN (quickest)

<!-- 1. GlassKit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.6/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

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

🚀 Quick Start

<!DOCTYPE html>
<html data-theme="dark">
<head>
  <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>
</head>
<body>
  <glk-button variant="primary">Click me</glk-button>
  <glk-toggle label="Notifications" checked></glk-toggle>
  <glk-card glow>Hello GlassKit!</glk-card>
</body>
</html>

🧩 Components

Component	Description	Key Attributes
`<glk-nav>`	Horizontal navigation bar	—
`<glk-pill>`	Circular icon button (46×46px)	`label`, `disabled`
`<glk-tab-bar>`	Bottom tab bar navigation	`static`, `floating`
`<glk-tab-item>`	Tab bar item	`label`, `active`, `badge`
`<glk-tab-dock>`	Wrapper for floating tab bar + optional accessory	`accessory-left`
`<glk-tab-accessory>`	Standalone glass capsule (search, compose…)	`label`, `variant` (accent, success, error), `disabled`

Content

Component	Description	Key Attributes
`<glk-card>`	Glass-effect content card	`glow`
`<glk-badge>`	Inline status badge	`variant` (primary, success, error)
`<glk-avatar>`	Circular avatar	`size` (sm, lg), `src`
`<glk-title>`	Styled heading	—
`<glk-divider>`	Horizontal divider	—
`<glk-status>`	Status notice	`message`

Buttons

Component	Description	Key Attributes
`<glk-button>`	Glass-styled button	`variant` (primary, secondary, tertiary), `size` (sm, md, lg, auto), `disabled`, `type`

Form Elements

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

Component	Description	Key Attributes
`<glk-input>`	Text input with label & hint	`label`, `type`, `placeholder`, `hint`, `error`, `required`
`<glk-textarea>`	Multi-line text input	`label`, `rows`, `placeholder`
`<glk-select>`	Dropdown select	`label` (children: `<option>`)
`<glk-search>`	Search input with icon	`placeholder`
`<glk-toggle>`	Switch toggle	`label`, `checked`, `disabled`
`<glk-checkbox>`	Checkbox	`label`, `checked`, `disabled`
`<glk-radio>`	Radio button	`label`, `name`, `value`, `checked`
`<glk-range>`	Range slider	`label`, `min`, `max`, `value`, `step`

Feedback & Notifications

Component	Description	Key Attributes
`<glk-progress>`	Progress bar	`value`, `label`, `variant` (success, error), `size` (sm, lg)
`<glk-modal>`	Modal dialog	`open`, `title`
`<glk-toast>`	Auto-dismissing notification	`message`, `variant` (success, error, warning), `duration`
`<glk-popover>`	Anchored dropdown / menu	`open`, `placement` (top, bottom, start, end)

Containers

Component	Description	Key Attributes
`<glk-accordion>`	Accordion container	—
`<glk-accordion-item>`	Collapsible section	`title`, `open`
`<glk-list>`	iOS-style grouped list	`flush`, `bare`
`<glk-list-item>`	List row (icon + title + subtitle + trailing)	`title`, `subtitle`, `interactive`, `center`

🌗 Theming

Set data-theme on the <html> element — all components sync automatically:

<html data-theme="dark">  <!-- or "light" -->

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

🛠️ Architecture

Shadow DOM with adoptedStyleSheets — GlassKit's glassSheet is shared across all component instances
Theme wrapper with display: contents — layout-transparent <div> for data-theme CSS selectors
Global MutationObserver — single observer watches data-theme changes and syncs all instances
GlkElement base class — handles Shadow DOM setup, theme sync, attribute reflection
GlkFormElement extends GlkElement — adds ElementInternals for native form participation

📁 Project Structure

glasskit-elements/
  src/
    index.js              # Registers all components
    base.js               # GlkElement + GlkFormElement
    components/
      navigation/         # glk-nav, glk-pill, glk-tab-bar, glk-tab-item, glk-tab-dock, glk-tab-accessory
      content/            # glk-card, glk-badge, glk-avatar, glk-title, ...
      buttons/            # glk-button
      forms/              # glk-input, glk-toggle, glk-checkbox, ...
      feedback/           # glk-progress, glk-modal, glk-toast, glk-popover
      containers/         # glk-accordion, glk-accordion-item, glk-list, glk-list-item
  dist/
    glasskit-elements.js      # IIFE bundle (117 KB raw / 18 KB gzipped)
    glasskit-elements.min.js  # IIFE minified (92 KB raw / 15 KB gzipped)
    glasskit-elements.esm.js  # ES module bundle (112 KB raw / 17 KB gzipped)
  index.html                  # Landing page
  docs.html                   # Documentation
  showcase.html               # Interactive showcase
  de/                         # German translations

🌐 Browser Compatibility

Browser	Support
Chrome	90+
Edge	90+
Safari	16.4+
Firefox	103+

Requires adoptedStyleSheets, ElementInternals, and customElements v1.

🤖 AI / LLM Reference

SKILL.md is a tag-based, machine-readable reference for LLMs and AI copilots. It contains copy-paste-ready HTML for all 29 elements, attribute / slot / event tables, composition patterns, and a common-mistakes section. It is the companion to the class-based SKILL.md in GlassKit CSS — use both together for complete coverage of the glass stack.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the repository
Create your feature branch (git checkout -b feature/new-component)
Commit your changes (git commit -m 'Add new component')
Push to the branch (git push origin feature/new-component)
Open a Pull Request

📄 License

📋 Changelog

See CHANGELOG.md for a detailed list of changes.

_{Built on 🧊 GlassKit CSS by Jungherz GmbH with lots of ❤️ for detail.}

JSPM

@jungherz-de/glasskit-elements