@jungherz-de/glasskit-elements

v0.8.3

Published

4 days ago

Vanilla JavaScript Web Components wrapping the GlassKit CSS glassmorphism library

Downloads

425

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 24 Web Components 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 | | 🧩 24 Components | Buttons, cards, toggles, modals, accordions, tab bars, and more | | 🪶 Zero Dependencies | Pure vanilla JavaScript, works with React, Vue, Svelte, or plain HTML | | 🎛️ 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 | — | | <glk-tab-item> | Tab bar item | label, active, badge |

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 |

Containers

| Component | Description | Key Attributes | |---|---|---| | <glk-accordion> | Accordion container | — | | <glk-accordion-item> | Collapsible section | title, open |

🌗 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
      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
      containers/         # glk-accordion, glk-accordion-item
  dist/
    glasskit-elements.js      # IIFE bundle
    glasskit-elements.min.js  # IIFE minified (~71 KB)
    glasskit-elements.esm.js  # ES module bundle
  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.

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