@jungherz-de/glasskit-elements

v1.6.0

Published

a month ago

Vanilla JavaScript Web Components wrapping the GlassKit CSS glassmorphism library

Downloads

0High
0Medium
0Low

fluxuiert

web-components custom-elements glassmorphism glasskit ui-components vanilla-js

✨ 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/[email protected]/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/[email protected]/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

Navigation & Layout

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