🧊 GlassKit Elements

` for `data-theme` and `data-density` CSS selectors - **Global `MutationObserver`** — single observer watches `data-theme` and `data-density` 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, delegates focus to its field and reports the field's validity - **Native semantics** — labels tied to their fields, the toggle's `role="switch"` on its native checkbox, `` a native `

`, `aria-expanded` on accordion and popover triggers ### Build your own element Since 1.14.0 both base classes are exported, so a project element inherits the whole setup — open shadow root with GlassKit's stylesheet adopted (`.glass-*` classes work inside), theme wrapper following `data-theme` and `data-density`, listeners re-armed when the element moves, `emit()` for bubbling, composed events: ```js import { GlkElement } from '@jungherz-de/glasskit-elements'; // or '…/base.js', or GlassKitElements.GlkElement from the CDN bundle class DemoCounter extends GlkElement { static get observedAttributes() { return ['count']; } render() { this._btn = this.createElement('button', ['glass-btn', 'glass-btn--secondary', 'glass-btn--sm', 'glass-btn--auto']); this._wrapper.appendChild(this._btn); } setupEvents() { this._onClick = () => { this.count += 1; this.emit('demo-count', { count: this.count }); }; this._btn.addEventListener('click', this._onClick); } teardownEvents() { this._btn?.removeEventListener('click', this._onClick); } onAttributeChanged() { this._btn.textContent = `Clicked ${this.count}×`; } get count() { return Number(this.getAttribute('count')) || 0; } set count(v) { this.setAttribute('count', v); } } customElements.define('demo-counter', DemoCounter); ``` Hooks: `render()` builds into `this._wrapper`, `setupEvents()` / `teardownEvents()` run on every connect / disconnect, `onAttributeChanged(name, old, value)` after the first render. `static get displayInline()` → `true` for inline elements; `static get observesLightDom()` → `true` re-runs `projectLightDom()` whenever light-DOM children change. `GlkFormElement` adds `setFormValue()`, `setValidity()`, `resetValue()` / `restoreValue()`; since 1.20.0 it delegates focus (`static get delegatesFocus()`) and, when `get _validityField()` returns your native field, reports that field's validity on the host after every `setFormValue()` and attribute change. --- ## 📁 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 (229 KB raw / 46 KB gzipped) glasskit-elements.min.js # IIFE minified (156 KB raw / 28 KB gzipped) glasskit-elements.esm.js # ES module bundle (221 KB raw / 45 KB gzipped) components/ # one ESM file per element + base.js (GlkElement, GlkFormElement) index.html # Landing page docs.html # Documentation showcase.html # Interactive showcase de/ # German translations ``` --- ## 🌐 Browser Compatibility | Browser | Support | |---|---| | Chrome | 111+ | | Edge | 111+ | | Safari | 16.4+ | | Firefox | 113+ | The floor is GlassKit's: its tokens are derived with `color-mix()`. The elements also need constructable stylesheets, `ElementInternals`, `delegatesFocus`, `

` and `inert` — all inside that floor. A few refinements come later and fall back quietly: first-line alignment of toggle, checkbox and radio (`lh`, Firefox 120), the divider of list rows without icon (`:has()`, Firefox 121), right-to-left mirroring of select chevron, toggle thumb and progress fill (`:dir()`, Chrome 120). --- ## 🤖 AI / LLM Reference [`SKILL.md`](SKILL.md) is a tag-based, machine-readable reference for LLMs and AI copilots. It contains copy-paste-ready HTML for all 36 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](https://github.com/JUNGHERZ/GlassKit) — use both together for complete coverage of the glass stack. --- ## 🤝 Contributing Contributions are welcome! Please feel free to submit a Pull Request. 1. Fork the repository 2. Create your feature branch (`git checkout -b feature/new-component`) 3. Commit your changes (`git commit -m 'Add new component'`) 4. Push to the branch (`git push origin feature/new-component`) 5. Open a Pull Request --- ## 📄 License [MIT](LICENSE) — Copyright (c) 2026 Jungherz GmbH --- ## 📋 Changelog See [CHANGELOG.md](CHANGELOG.md) for a detailed list of changes. ---

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