@jungherz-de/glasskit-elements 1.13.0 → 1.15.0

package/README.md

@@ -3,9 +3,9 @@
 <p align="center">
   <a href="https://www.npmjs.com/package/@jungherz-de/glasskit-elements"><img src="https://img.shields.io/npm/v/@jungherz-de/glasskit-elements?style=flat-square&color=f5a623&label=version" alt="Version"></a>
   <a href="#"><img src="https://img.shields.io/badge/vanilla_JS-no_dependencies-44cc11?style=flat-square" alt="Vanilla JS"></a>
-  <a href="#"><img src="https://img.shields.io/badge/components-29-7ec8e3?style=flat-square" alt="29 Components"></a>
+  <a href="#"><img src="https://img.shields.io/badge/components-33-7ec8e3?style=flat-square" alt="33 Components"></a>
   <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue?style=flat-square" alt="MIT License"></a>
-  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.13.0-lightgrey?style=flat-square" alt="Changelog"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.15.0-lightgrey?style=flat-square" alt="Changelog"></a>
   <a href="https://www.npmjs.com/package/@jungherz-de/glasskit-elements"><img src="https://img.shields.io/badge/npm-%40jungherz--de%2Fglasskit--elements-cb3837?style=flat-square&logo=npm" alt="npm"></a>
 </p>
 
@@ -51,7 +51,7 @@ It is the **app layer** of the GlassKit family — three layers, one design lang
 | 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 |
+| 🧩 **33 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` |
@@ -66,7 +66,7 @@ It is the **app layer** of the GlassKit family — three layers, one design lang
 
 ```html
 <!-- 1. GlassKit CSS -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.12/glasskit.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.15/glasskit.min.css">
 
 <!-- 2. GlassKit Elements -->
 <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit-elements/dist/glasskit-elements.min.js"></script>
@@ -89,8 +89,13 @@ import '@jungherz-de/glasskit-elements';
 // Only import what you need
 import '@jungherz-de/glasskit-elements/components/glk-button.js';
 import '@jungherz-de/glasskit-elements/components/glk-toggle.js';
+
+// The base classes, for elements of your own (same module the components use)
+import { GlkElement, GlkFormElement } from '@jungherz-de/glasskit-elements/base.js';
 ```
 
+The per-component files leave `@jungherz-de/glasskit/glasskit-styles.js` as an external import, so the GlassKit stylesheet exists once — a bundler resolves it from `node_modules`; a build-free project adds it to its import map next to the elements entries. Do not mix the `<script>` bundle with `base.js`: the bundle carries its own copy of the classes, so `instanceof` would fail across the two. With the bundle, take the class from it — `GlassKitElements.GlkElement`, or `import { GlkElement } from '@jungherz-de/glasskit-elements'` for the ESM bundle.
+
 ---
 
 ## 🚀 Quick Start
@@ -99,7 +104,7 @@ import '@jungherz-de/glasskit-elements/components/glk-toggle.js';
 <!DOCTYPE html>
 <html data-theme="dark">
 <head>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.12/glasskit.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.15/glasskit.min.css">
   <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit-elements/dist/glasskit-elements.min.js"></script>
 </head>
 <body>
@@ -124,6 +129,7 @@ import '@jungherz-de/glasskit-elements/components/glk-toggle.js';
 | `<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` |
+| `<glk-steps>` | Progress through a short flow | `steps`, `current`, `label` |
 
 ### Content
 
@@ -135,6 +141,7 @@ import '@jungherz-de/glasskit-elements/components/glk-toggle.js';
 | `<glk-title>` | Styled heading | — |
 | `<glk-divider>` | Horizontal divider | — |
 | `<glk-status>` | Status notice | `message` |
+| `<glk-empty>` | Empty state: icon, title, text, one action | `title`, `text` |
 
 ### Buttons
 
@@ -156,6 +163,7 @@ All form components support `name`, `value`, `disabled` and participate in nativ
 | `<glk-checkbox>` | Checkbox | `label`, `checked`, `disabled` |
 | `<glk-radio>` | Radio button | `label`, `name`, `value`, `checked` |
 | `<glk-range>` | Range slider | `label`, `min`, `max`, `value`, `step` |
+| `<glk-segmented>` | Small exclusive choice as one control; form-associated | `options` (JSON), `value`, `full`, `label`, `name` |
 
 ### Feedback & Notifications
 
@@ -165,6 +173,7 @@ All form components support `name`, `value`, `disabled` and participate in nativ
 | `<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) |
+| `<glk-sheet>` | Bottom sheet, the mobile sibling of the modal | `open`, `inline`, `title` |
 
 ### Containers
 
@@ -237,6 +246,33 @@ pages that never load `glasskit.css` still work and your brand file always wins.
 - **`GlkElement`** base class — handles Shadow DOM setup, theme sync, attribute reflection
 - **`GlkFormElement`** extends `GlkElement` — adds `ElementInternals` for native form participation
 
+### 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`, 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()`.
+
 ---
 
 ## 📁 Project Structure
@@ -257,6 +293,7 @@ glasskit-elements/
     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)
+    components/               # one ESM file per element + base.js (GlkElement, GlkFormElement)
   index.html                  # Landing page
   docs.html                   # Documentation
   showcase.html               # Interactive showcase
@@ -280,7 +317,7 @@ Requires `adoptedStyleSheets`, `ElementInternals`, and `customElements` v1.
 
 ## 🤖 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 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](https://github.com/JUNGHERZ/GlassKit) — use both together for complete coverage of the glass stack.
+[`SKILL.md`](SKILL.md) is a tag-based, machine-readable reference for LLMs and AI copilots. It contains copy-paste-ready HTML for all 33 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.
 
 ---
 

package/dist/components/base.js

@@ -0,0 +1,253 @@
+import { tokensCss, componentsSheet } from '@jungherz-de/glasskit/glasskit-styles.js';
+
+// ── Design Tokens ──
+// The shadow roots deliberately adopt the *components* sheet only. Adopting
+// the full GlassKit sheet would bring its [data-theme] blocks along, and those
+// match the .glk-wrapper below — the tokens would then be re-declared inside
+// every shadow root, where a matching rule always beats an inherited value.
+// A project's own `:root { --gl-color-primary: … }` would never arrive.
+//
+// So the token defaults go on the document once, and every shadow root
+// inherits them like any other custom property. They are wrapped in a cascade
+// layer so an ordinary (unlayered) brand stylesheet wins over them, no matter
+// whether it loads before or after this module.
+
+const TOKENS_INJECTED = '__glkDefaultTokensInjected';
+
+function injectDefaultTokens() {
+  if (typeof document === 'undefined') return;              // SSR / non-DOM
+  if (globalThis[TOKENS_INJECTED]) return;                   // another bundle copy did it
+  globalThis[TOKENS_INJECTED] = true;
+
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(`@layer glasskit-defaults { ${tokensCss} }`);
+  // Append — never assign — so an app's own adopted sheets survive.
+  document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+}
+
+injectDefaultTokens();
+
+// ── Global Theme Sync ──
+// Single MutationObserver that watches data-theme on <html>
+// and notifies all GlkElement instances.
+
+const instances = new Set();
+
+function getCurrentTheme() {
+  return document.documentElement.getAttribute('data-theme') || 'dark';
+}
+
+function syncAllThemes() {
+  const theme = getCurrentTheme();
+  for (const instance of instances) {
+    instance._syncTheme(theme);
+  }
+}
+
+if (typeof window !== 'undefined' && typeof MutationObserver !== 'undefined') {
+  const observer = new MutationObserver(syncAllThemes);
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['data-theme']
+  });
+}
+
+// ── Host Stylesheet ──
+// Sets display:block on all custom elements by default.
+// Inline components (badge, avatar) override this.
+
+const hostSheet = new CSSStyleSheet();
+hostSheet.replaceSync(`
+  :host { display: block; }
+  :host([hidden]) { display: none; }
+  .glk-wrapper { display: contents; }
+`);
+
+const inlineHostSheet = new CSSStyleSheet();
+inlineHostSheet.replaceSync(`
+  :host { display: inline-block; }
+  :host([hidden]) { display: none; }
+  .glk-wrapper { display: contents; }
+`);
+
+// ── Base Class ──
+
+class GlkElement extends HTMLElement {
+
+  /** Override in subclass to use inline-block display */
+  static get displayInline() { return false; }
+
+  /**
+   * Optional CSSStyleSheet with component-specific host rules, adopted after
+   * the shared sheets. Keeps per-component selectors out of the shared sheet
+   * so an attribute like [fill] only means something where it is documented.
+   */
+  static get hostStyles() { return null; }
+
+  /**
+   * Opt in when the component copies light-DOM children into its shadow tree.
+   * A MutationObserver then calls projectLightDom() again whenever those
+   * children change, so a framework that swaps them keeps the rendered element
+   * in step. Without it the copy is made once and silently goes stale.
+   */
+  static get observesLightDom() { return false; }
+
+  static get observedAttributes() {
+    return [];
+  }
+
+  constructor() {
+    super();
+    this._initialized = false;
+    this._shadow = this.attachShadow({ mode: 'open' });
+    const displaySheet = this.constructor.displayInline ? inlineHostSheet : hostSheet;
+    const sheets = [componentsSheet, displaySheet];
+    const extra = this.constructor.hostStyles;
+    if (extra) sheets.push(extra);
+    this._shadow.adoptedStyleSheets = sheets;
+  }
+
+  connectedCallback() {
+    if (!this._initialized) {
+      this._initialized = true;
+
+      // Create theme wrapper (display:contents makes it layout-transparent)
+      this._wrapper = document.createElement('div');
+      this._wrapper.className = 'glk-wrapper';
+      this._wrapper.setAttribute('data-theme', getCurrentTheme());
+      this._shadow.appendChild(this._wrapper);
+
+      this.render();
+    }
+
+    // Everything below runs on every connect, not just the first. Moving an
+    // element in the DOM disconnects and reconnects it, and disconnectedCallback
+    // tears all of this down — without re-arming it here a moved element would
+    // keep its markup but silently stop reacting.
+    this.setupEvents();
+    instances.add(this);
+
+    if (this.constructor.observesLightDom) {
+      this._lightDomObserver ??= new MutationObserver(records => this.projectLightDom(records));
+      this._lightDomObserver.observe(this, {
+        childList: true, subtree: true, characterData: true
+      });
+    }
+  }
+
+  disconnectedCallback() {
+    instances.delete(this);
+    this._lightDomObserver?.disconnect();
+    this.teardownEvents();
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (!this._initialized) return;
+    if (oldValue === newValue) return;
+    this.onAttributeChanged(name, oldValue, newValue);
+  }
+
+  _syncTheme(theme) {
+    if (this._wrapper) {
+      this._wrapper.setAttribute('data-theme', theme);
+    }
+  }
+
+  /** Subclasses override to build inner DOM inside this._wrapper. */
+  render() {}
+
+  /** Subclasses override to attach event listeners. */
+  setupEvents() {}
+
+  /** Subclasses override to remove event listeners. */
+  teardownEvents() {}
+
+  /** Subclasses override to react to attribute changes. */
+  onAttributeChanged(name, oldValue, newValue) {}
+
+  /**
+   * Subclasses that set observesLightDom override this to (re-)copy their
+   * light-DOM children into the shadow tree. Runs on every change to those
+   * children, so it has to be safe to call repeatedly.
+   */
+  projectLightDom() {}
+
+  /**
+   * Escape hatch: re-copy the light-DOM children now. The observer covers the
+   * ordinary cases; this is for the ones it cannot see, so nobody has to reach
+   * into element.shadowRoot.
+   */
+  refresh() { this.projectLightDom(); }
+
+  // ── Utility Methods ──
+
+  getBoolAttr(name) {
+    return this.hasAttribute(name);
+  }
+
+  setBoolAttr(name, value) {
+    if (value) {
+      this.setAttribute(name, '');
+    } else {
+      this.removeAttribute(name);
+    }
+  }
+
+  createElement(tag, classes = [], attrs = {}) {
+    const el = document.createElement(tag);
+    if (classes.length) el.classList.add(...classes);
+    for (const [key, val] of Object.entries(attrs)) {
+      el.setAttribute(key, val);
+    }
+    return el;
+  }
+
+  emit(eventName, detail = null) {
+    this.dispatchEvent(new CustomEvent(eventName, {
+      bubbles: true,
+      composed: true,
+      detail
+    }));
+  }
+}
+
+// ── Form-Associated Base Class ──
+
+class GlkFormElement extends GlkElement {
+
+  static formAssociated = true;
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+  }
+
+  get form() { return this._internals.form; }
+  get validationMessage() { return this._internals.validationMessage; }
+  get validity() { return this._internals.validity; }
+
+  checkValidity() { return this._internals.checkValidity(); }
+  reportValidity() { return this._internals.reportValidity(); }
+
+  formResetCallback() {
+    this.resetValue();
+  }
+
+  formStateRestoreCallback(state, mode) {
+    this.restoreValue(state);
+  }
+
+  /** Subclasses override. */
+  resetValue() {}
+  restoreValue(state) {}
+
+  setFormValue(value) {
+    this._internals.setFormValue(value);
+  }
+
+  setValidity(flags, message, anchor) {
+    this._internals.setValidity(flags, message, anchor);
+  }
+}
+
+export { GlkElement, GlkFormElement };

package/dist/components/glk-accordion-item.js

@@ -1,4 +1,5 @@
-import { G as GlkElement } from './shared/base-ClsXgLON.js';
+import { GlkElement } from './base.js';
+import '@jungherz-de/glasskit/glasskit-styles.js';
 
 const CHEVRON_SVG = `<span class="glass-accordion__trigger-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><polyline points="6 9 12 15 18 9"/></svg></span>`;
 

package/dist/components/glk-accordion.js

@@ -1,4 +1,5 @@
-import { G as GlkElement } from './shared/base-ClsXgLON.js';
+import { GlkElement } from './base.js';
+import '@jungherz-de/glasskit/glasskit-styles.js';
 
 class GlkAccordion extends GlkElement {
   render() {

package/dist/components/glk-avatar.js

@@ -1,4 +1,5 @@
-import { G as GlkElement } from './shared/base-ClsXgLON.js';
+import { GlkElement } from './base.js';
+import '@jungherz-de/glasskit/glasskit-styles.js';
 
 const SIZES = ['sm', 'lg'];
 

package/dist/components/glk-badge.js

@@ -1,4 +1,5 @@
-import { G as GlkElement } from './shared/base-ClsXgLON.js';
+import { GlkElement } from './base.js';
+import '@jungherz-de/glasskit/glasskit-styles.js';
 
 const VARIANTS = ['primary', 'success', 'error'];
 

package/dist/components/glk-button.js

@@ -1,4 +1,5 @@
-import { G as GlkElement } from './shared/base-ClsXgLON.js';
+import { GlkElement } from './base.js';
+import '@jungherz-de/glasskit/glasskit-styles.js';
 
 const VARIANTS = ['primary', 'secondary', 'tertiary'];
 const SIZES = ['sm', 'md', 'lg', 'auto'];

package/dist/components/glk-card.js

@@ -1,4 +1,5 @@
-import { G as GlkElement } from './shared/base-ClsXgLON.js';
+import { GlkElement } from './base.js';
+import '@jungherz-de/glasskit/glasskit-styles.js';
 
 // <glk-card fill> stretches the visible card to the height of its grid or flex
 // cell. The host must become a grid for this: it is stretched by the outer

package/dist/components/glk-checkbox.js

@@ -1,4 +1,5 @@
-import { a as GlkFormElement } from './shared/base-ClsXgLON.js';
+import { GlkFormElement } from './base.js';
+import '@jungherz-de/glasskit/glasskit-styles.js';
 
 const CHECKMARK_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`;
 

package/dist/components/glk-divider.js

@@ -1,4 +1,5 @@
-import { G as GlkElement } from './shared/base-ClsXgLON.js';
+import { GlkElement } from './base.js';
+import '@jungherz-de/glasskit/glasskit-styles.js';
 
 class GlkDivider extends GlkElement {
   render() {

package/dist/components/glk-empty.js

@@ -0,0 +1,53 @@
+import { GlkElement } from './base.js';
+import '@jungherz-de/glasskit/glasskit-styles.js';
+
+// Empty state for lists and result pages. Came back from EhrenPfoten in 1.15.0.
+//
+// Attributes: title, text — an empty one hides its element instead of
+//             leaving an empty paragraph
+// Slots:      default (icon, with a plain circle as slot fallback), action
+// Parts:      empty, icon, title, text, action
+
+const FALLBACK_ICON = '<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M8 12h8"/></svg>';
+
+class GlkEmpty extends GlkElement {
+  static get observedAttributes() { return ['title', 'text']; }
+
+  render() {
+    const root = this.createElement('div', ['glass-empty'], { part: 'empty' });
+    const icon = this.createElement('span', ['glass-empty__icon'], { part: 'icon' });
+    const iconSlot = document.createElement('slot');
+    iconSlot.innerHTML = FALLBACK_ICON;
+    icon.appendChild(iconSlot);
+    this._titleEl = this.createElement('p', ['glass-empty__title'], { part: 'title' });
+    this._textEl = this.createElement('p', ['glass-empty__text'], { part: 'text' });
+    const action = this.createElement('div', ['glass-empty__action'], { part: 'action' });
+    action.appendChild(this.createElement('slot', [], { name: 'action' }));
+    root.append(icon, this._titleEl, this._textEl, action);
+    this._wrapper.appendChild(root);
+    this._update();
+  }
+
+  _update() {
+    const title = this.getAttribute('title') || '';
+    const text = this.getAttribute('text') || '';
+    this._titleEl.textContent = title;
+    this._titleEl.hidden = !title;
+    this._textEl.textContent = text;
+    this._textEl.hidden = !text;
+  }
+
+  onAttributeChanged() {
+    if (this._titleEl) this._update();
+  }
+
+  get text() { return this.getAttribute('text') || ''; }
+  set text(v) {
+    if (v) this.setAttribute('text', v);
+    else this.removeAttribute('text');
+  }
+}
+
+customElements.define('glk-empty', GlkEmpty);
+
+export { GlkEmpty };

package/dist/components/glk-input.js

@@ -1,4 +1,5 @@
-import { a as GlkFormElement } from './shared/base-ClsXgLON.js';
+import { GlkFormElement } from './base.js';
+import '@jungherz-de/glasskit/glasskit-styles.js';
 
 class GlkInput extends GlkFormElement {
   static get observedAttributes() {

package/dist/components/glk-list-item.js

@@ -1,4 +1,5 @@
-import { G as GlkElement } from './shared/base-ClsXgLON.js';
+import { GlkElement } from './base.js';
+import '@jungherz-de/glasskit/glasskit-styles.js';
 
 // Module-level override sheet — shared by all instances.
 // Suppresses the auto-divider when glk-list marks this item as the

package/dist/components/glk-list.js

@@ -1,4 +1,5 @@
-import { G as GlkElement } from './shared/base-ClsXgLON.js';
+import { GlkElement } from './base.js';
+import '@jungherz-de/glasskit/glasskit-styles.js';
 
 class GlkList extends GlkElement {
   static get observedAttributes() {

package/dist/components/glk-modal.js

@@ -1,4 +1,5 @@
-import { G as GlkElement } from './shared/base-ClsXgLON.js';
+import { GlkElement } from './base.js';
+import '@jungherz-de/glasskit/glasskit-styles.js';
 
 class GlkModal extends GlkElement {
   static get observedAttributes() {

package/dist/components/glk-nav.js

@@ -1,4 +1,5 @@
-import { G as GlkElement } from './shared/base-ClsXgLON.js';
+import { GlkElement } from './base.js';
+import '@jungherz-de/glasskit/glasskit-styles.js';
 
 class GlkNav extends GlkElement {
   render() {

package/dist/components/glk-pill.js

@@ -1,4 +1,5 @@
-import { G as GlkElement } from './shared/base-ClsXgLON.js';
+import { GlkElement } from './base.js';
+import '@jungherz-de/glasskit/glasskit-styles.js';
 
 class GlkPill extends GlkElement {
   static get observedAttributes() {

package/dist/components/glk-popover.js

@@ -1,4 +1,5 @@
-import { G as GlkElement } from './shared/base-ClsXgLON.js';
+import { GlkElement } from './base.js';
+import '@jungherz-de/glasskit/glasskit-styles.js';
 
 const PLACEMENTS = ['top', 'bottom', 'start', 'end'];
 

package/dist/components/glk-progress.js

@@ -1,4 +1,5 @@
-import { G as GlkElement } from './shared/base-ClsXgLON.js';
+import { GlkElement } from './base.js';
+import '@jungherz-de/glasskit/glasskit-styles.js';
 
 const VARIANTS = ['success', 'error'];
 const SIZES = ['sm', 'lg'];

package/dist/components/glk-radio.js

@@ -1,4 +1,5 @@
-import { a as GlkFormElement } from './shared/base-ClsXgLON.js';
+import { GlkFormElement } from './base.js';
+import '@jungherz-de/glasskit/glasskit-styles.js';
 
 // ── Grouping ──
 // Every <glk-radio> keeps its <input type="radio"> in its own shadow root, and

package/dist/components/glk-range.js

@@ -1,4 +1,5 @@
-import { a as GlkFormElement } from './shared/base-ClsXgLON.js';
+import { GlkFormElement } from './base.js';
+import '@jungherz-de/glasskit/glasskit-styles.js';
 
 class GlkRange extends GlkFormElement {
   static get observedAttributes() {

package/dist/components/glk-search.js

@@ -1,4 +1,5 @@
-import { a as GlkFormElement } from './shared/base-ClsXgLON.js';
+import { GlkFormElement } from './base.js';
+import '@jungherz-de/glasskit/glasskit-styles.js';
 
 const SEARCH_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>`;