@jungherz-de/glasskit-elements 1.6.2 → 1.8.0

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

@@ -0,0 +1,188 @@
+import { G as GlkElement } from './shared/base-Bm9Z714o.js';
+
+// Module-level override sheet — shared by all instances.
+// Suppresses the auto-divider when glk-list marks this item as the
+// last-of-type via [data-last]. The default divider is rendered by
+// glasskit.css thanks to the sentinel sibling in the shadow tree.
+const lastChildOverrideSheet = new CSSStyleSheet();
+lastChildOverrideSheet.replaceSync(`
+  :host([data-last]) .glass-list__item::after { content: none; }
+`);
+
+const VARIANTS = ['danger', 'accent'];
+
+class GlkListItem extends GlkElement {
+  static get observedAttributes() {
+    return ['title', 'subtitle', 'interactive', 'center', 'leading-lg', 'wrap', 'detail', 'variant', 'data-last'];
+  }
+
+  constructor() {
+    super();
+    this._shadow.adoptedStyleSheets = [
+      ...this._shadow.adoptedStyleSheets,
+      lastChildOverrideSheet
+    ];
+  }
+
+  render() {
+    // display:contents wrapper — transparent to layout.
+    const wrap = this.createElement('div');
+    wrap.style.display = 'contents';
+
+    this._item = this.createElement('li', ['glass-list__item']);
+    if (this.getBoolAttr('interactive')) this._item.classList.add('glass-list__item--interactive');
+    if (this.getBoolAttr('center')) this._item.classList.add('glass-list__item--center');
+    const initialVariant = this.getAttribute('variant');
+    if (initialVariant && VARIANTS.includes(initialVariant)) {
+      this._item.classList.add(`glass-list__item--${initialVariant}`);
+    }
+
+    // Leading slot — hidden until a child with slot="leading" appears.
+    this._leading = this.createElement('span', ['glass-list__leading']);
+    if (this.getBoolAttr('leading-lg')) this._leading.classList.add('glass-list__leading--lg');
+    this._leadingSlot = document.createElement('slot');
+    this._leadingSlot.setAttribute('name', 'leading');
+    this._leading.appendChild(this._leadingSlot);
+    this._leading.hidden = true;
+
+    // Content — title + optional subtitle.
+    this._content = this.createElement('div', ['glass-list__content']);
+    this._titleEl = this.createElement('div', ['glass-list__title']);
+    this._titleEl.textContent = this.getAttribute('title') || '';
+    this._subtitleEl = this.createElement('div', ['glass-list__subtitle']);
+    if (this.getBoolAttr('wrap')) this._subtitleEl.classList.add('glass-list__subtitle--wrap');
+    const initialSubtitle = this.getAttribute('subtitle') || '';
+    this._subtitleEl.textContent = initialSubtitle;
+    this._subtitleEl.hidden = !initialSubtitle;
+    this._content.appendChild(this._titleEl);
+    this._content.appendChild(this._subtitleEl);
+
+    // Trailing — value span + slot for icons/badges.
+    this._trailing = this.createElement('div', ['glass-list__trailing']);
+    this._valueEl = this.createElement('span', ['glass-list__value']);
+    const initialDetail = this.getAttribute('detail') || '';
+    this._valueEl.textContent = initialDetail;
+    this._valueEl.hidden = !initialDetail;
+    this._trailing.appendChild(this._valueEl);
+    this._trailingSlot = document.createElement('slot');
+    this._trailingSlot.setAttribute('name', 'trailing');
+    this._trailing.appendChild(this._trailingSlot);
+    this._trailing.hidden = !initialDetail; // also revealed by slotchange
+
+    this._item.appendChild(this._leading);
+    this._item.appendChild(this._content);
+    this._item.appendChild(this._trailing);
+
+    // Sentinel sibling so the <li> is never :last-child inside its shadow
+    // parent — keeps the glasskit.css ::after divider rule matching.
+    const sentinel = this.createElement('span');
+    sentinel.hidden = true;
+    sentinel.setAttribute('aria-hidden', 'true');
+
+    wrap.appendChild(this._item);
+    wrap.appendChild(sentinel);
+    this._wrapper.appendChild(wrap);
+  }
+
+  setupEvents() {
+    // Reveal leading/trailing wrappers only when slotted content exists.
+    this._onLeadingSlotChange = () => {
+      this._leading.hidden = this._leadingSlot.assignedNodes().length === 0;
+    };
+    this._onTrailingSlotChange = () => {
+      const hasSlotted = this._trailingSlot.assignedNodes().length > 0;
+      const hasDetail = !this._valueEl.hidden;
+      this._trailing.hidden = !hasSlotted && !hasDetail;
+    };
+    this._leadingSlot.addEventListener('slotchange', this._onLeadingSlotChange);
+    this._trailingSlot.addEventListener('slotchange', this._onTrailingSlotChange);
+    this._onLeadingSlotChange();
+    this._onTrailingSlotChange();
+
+    // Forward clicks as glk-click — only for interactive items.
+    this._onClick = () => {
+      if (this.getBoolAttr('interactive')) {
+        this.emit('glk-click');
+      }
+    };
+    this._item.addEventListener('click', this._onClick);
+  }
+
+  teardownEvents() {
+    this._leadingSlot?.removeEventListener('slotchange', this._onLeadingSlotChange);
+    this._trailingSlot?.removeEventListener('slotchange', this._onTrailingSlotChange);
+    this._item?.removeEventListener('click', this._onClick);
+  }
+
+  onAttributeChanged(name) {
+    if (!this._item) return;
+    switch (name) {
+      case 'title':
+        this._titleEl.textContent = this.getAttribute('title') || '';
+        break;
+      case 'subtitle': {
+        const value = this.getAttribute('subtitle') || '';
+        this._subtitleEl.textContent = value;
+        this._subtitleEl.hidden = !value;
+        break;
+      }
+      case 'interactive':
+        this._item.classList.toggle('glass-list__item--interactive', this.getBoolAttr('interactive'));
+        break;
+      case 'center':
+        this._item.classList.toggle('glass-list__item--center', this.getBoolAttr('center'));
+        break;
+      case 'leading-lg':
+        this._leading.classList.toggle('glass-list__leading--lg', this.getBoolAttr('leading-lg'));
+        break;
+      case 'wrap':
+        this._subtitleEl.classList.toggle('glass-list__subtitle--wrap', this.getBoolAttr('wrap'));
+        break;
+      case 'detail': {
+        const detail = this.getAttribute('detail') || '';
+        this._valueEl.textContent = detail;
+        this._valueEl.hidden = !detail;
+        // Re-evaluate trailing visibility.
+        if (this._onTrailingSlotChange) this._onTrailingSlotChange();
+        break;
+      }
+      case 'variant': {
+        // Remove previous variant, add new one.
+        VARIANTS.forEach(v => this._item.classList.remove(`glass-list__item--${v}`));
+        const variant = this.getAttribute('variant');
+        if (variant && VARIANTS.includes(variant)) {
+          this._item.classList.add(`glass-list__item--${variant}`);
+        }
+        break;
+      }
+    }
+  }
+
+  get interactive() { return this.getBoolAttr('interactive'); }
+  set interactive(v) { this.setBoolAttr('interactive', v); }
+
+  get center() { return this.getBoolAttr('center'); }
+  set center(v) { this.setBoolAttr('center', v); }
+
+  get leadingLg() { return this.getBoolAttr('leading-lg'); }
+  set leadingLg(v) { this.setBoolAttr('leading-lg', v); }
+
+  get wrap() { return this.getBoolAttr('wrap'); }
+  set wrap(v) { this.setBoolAttr('wrap', v); }
+
+  get detail() { return this.getAttribute('detail') || ''; }
+  set detail(v) {
+    if (v) this.setAttribute('detail', v);
+    else this.removeAttribute('detail');
+  }
+
+  get variant() { return this.getAttribute('variant') || ''; }
+  set variant(v) {
+    if (v && VARIANTS.includes(v)) this.setAttribute('variant', v);
+    else this.removeAttribute('variant');
+  }
+}
+
+customElements.define('glk-list-item', GlkListItem);
+
+export { GlkListItem };

package/dist/components/glk-list.js

@@ -0,0 +1,75 @@
+import { G as GlkElement } from './shared/base-Bm9Z714o.js';
+
+class GlkList extends GlkElement {
+  static get observedAttributes() {
+    return ['flush', 'bare', 'header'];
+  }
+
+  render() {
+    // Optional section header — sits before the <ul>.
+    this._header = this.createElement('div', ['glass-list__section-header'], { part: 'header' });
+    const initialHeader = this.getAttribute('header') || '';
+    this._header.textContent = initialHeader;
+    this._header.hidden = !initialHeader;
+    this._wrapper.appendChild(this._header);
+
+    this._ul = this.createElement('ul', ['glass-list'], { part: 'list' });
+    if (this.getBoolAttr('flush')) this._ul.classList.add('glass-list--flush');
+    if (this.getBoolAttr('bare')) this._ul.classList.add('glass-list--bare');
+    this._ul.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(this._ul);
+  }
+
+  setupEvents() {
+    this._syncLast();
+    this._mutObserver = new MutationObserver(() => this._syncLast());
+    this._mutObserver.observe(this, { childList: true });
+  }
+
+  teardownEvents() {
+    this._mutObserver?.disconnect();
+  }
+
+  _syncLast() {
+    const items = this.querySelectorAll(':scope > glk-list-item');
+    const lastIndex = items.length - 1;
+    items.forEach((item, i) => {
+      if (i === lastIndex) item.setAttribute('data-last', '');
+      else item.removeAttribute('data-last');
+    });
+  }
+
+  onAttributeChanged(name) {
+    if (!this._ul) return;
+    switch (name) {
+      case 'flush':
+        this._ul.classList.toggle('glass-list--flush', this.getBoolAttr('flush'));
+        break;
+      case 'bare':
+        this._ul.classList.toggle('glass-list--bare', this.getBoolAttr('bare'));
+        break;
+      case 'header': {
+        const value = this.getAttribute('header') || '';
+        this._header.textContent = value;
+        this._header.hidden = !value;
+        break;
+      }
+    }
+  }
+
+  get flush() { return this.getBoolAttr('flush'); }
+  set flush(v) { this.setBoolAttr('flush', v); }
+
+  get bare() { return this.getBoolAttr('bare'); }
+  set bare(v) { this.setBoolAttr('bare', v); }
+
+  get header() { return this.getAttribute('header') || ''; }
+  set header(v) {
+    if (v) this.setAttribute('header', v);
+    else this.removeAttribute('header');
+  }
+}
+
+customElements.define('glk-list', GlkList);
+
+export { GlkList };

package/dist/components/glk-modal.js

@@ -0,0 +1,101 @@
+import { G as GlkElement } from './shared/base-Bm9Z714o.js';
+
+class GlkModal extends GlkElement {
+  static get observedAttributes() {
+    return ['open', 'title'];
+  }
+
+  render() {
+    this._overlay = this.createElement('div', ['glass-modal-overlay'], { part: 'overlay' });
+
+    const modal = this.createElement('div', ['glass-modal'], { part: 'modal' });
+
+    // Header
+    const header = this.createElement('div', ['glass-modal__header'], { part: 'header' });
+    this._titleEl = this.createElement('h2', ['glass-modal__title']);
+    this._titleEl.textContent = this.getAttribute('title') || '';
+    header.appendChild(this._titleEl);
+
+    // Body
+    const body = this.createElement('div', ['glass-modal__body'], { part: 'body' });
+    body.appendChild(document.createElement('slot'));
+
+    // Footer — clone action buttons from light DOM into shadow DOM
+    this._footer = this.createElement('div', ['glass-modal__footer'], { part: 'footer' });
+
+    modal.appendChild(header);
+    modal.appendChild(body);
+    modal.appendChild(this._footer);
+
+    // Defer footer population — children may not be parsed yet
+    requestAnimationFrame(() => this._populateFooter());
+
+    this._overlay.appendChild(modal);
+    this._wrapper.appendChild(this._overlay);
+
+    if (this.getBoolAttr('open')) {
+      this._overlay.classList.add('is-active');
+    }
+  }
+
+  _populateFooter() {
+    this._footer.innerHTML = '';
+    const actionsSlot = this.querySelector('[slot="actions"]');
+    if (actionsSlot) {
+      const buttons = actionsSlot.querySelectorAll('button');
+      buttons.forEach(btn => {
+        const clone = btn.cloneNode(true);
+        // Forward click events to the original button
+        clone.addEventListener('click', () => btn.click());
+        this._footer.appendChild(clone);
+      });
+    }
+  }
+
+  setupEvents() {
+    // Close on overlay click (outside modal)
+    this._onOverlayClick = (e) => {
+      if (e.target === this._overlay) {
+        this.removeAttribute('open');
+        this.emit('glk-close');
+      }
+    };
+    this._overlay.addEventListener('click', this._onOverlayClick);
+
+    // Close on Escape
+    this._onKeydown = (e) => {
+      if (e.key === 'Escape' && this.getBoolAttr('open')) {
+        this.removeAttribute('open');
+        this.emit('glk-close');
+      }
+    };
+    document.addEventListener('keydown', this._onKeydown);
+  }
+
+  teardownEvents() {
+    this._overlay?.removeEventListener('click', this._onOverlayClick);
+    document.removeEventListener('keydown', this._onKeydown);
+  }
+
+  onAttributeChanged(name) {
+    if (!this._overlay) return;
+    switch (name) {
+      case 'open':
+        this._overlay.classList.toggle('is-active', this.getBoolAttr('open'));
+        break;
+      case 'title':
+        this._titleEl.textContent = this.getAttribute('title') || '';
+        break;
+    }
+  }
+
+  show() { this.setAttribute('open', ''); }
+  close() { this.removeAttribute('open'); }
+
+  get open() { return this.getBoolAttr('open'); }
+  set open(v) { this.setBoolAttr('open', v); }
+}
+
+customElements.define('glk-modal', GlkModal);
+
+export { GlkModal };

package/dist/components/glk-nav.js

@@ -0,0 +1,13 @@
+import { G as GlkElement } from './shared/base-Bm9Z714o.js';
+
+class GlkNav extends GlkElement {
+  render() {
+    const nav = this.createElement('nav', ['glass-nav']);
+    nav.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(nav);
+  }
+}
+
+customElements.define('glk-nav', GlkNav);
+
+export { GlkNav };

package/dist/components/glk-pill.js

@@ -0,0 +1,49 @@
+import { G as GlkElement } from './shared/base-Bm9Z714o.js';
+
+class GlkPill extends GlkElement {
+  static get observedAttributes() {
+    return ['label', 'disabled'];
+  }
+
+  render() {
+    this._btn = this.createElement('button', ['glass-pill']);
+
+    if (this.getBoolAttr('disabled')) this._btn.disabled = true;
+
+    const ariaLabel = this.getAttribute('label');
+    if (ariaLabel) this._btn.setAttribute('aria-label', ariaLabel);
+
+    // Slotted content (SVG icons, text)
+    this._btn.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(this._btn);
+  }
+
+  setupEvents() {
+    this._onClick = () => {
+      if (!this.getBoolAttr('disabled')) {
+        this.emit('glk-click');
+      }
+    };
+    this._btn.addEventListener('click', this._onClick);
+  }
+
+  teardownEvents() {
+    this._btn?.removeEventListener('click', this._onClick);
+  }
+
+  onAttributeChanged(name) {
+    if (!this._btn) return;
+    switch (name) {
+      case 'label':
+        this._btn.setAttribute('aria-label', this.getAttribute('label') || '');
+        break;
+      case 'disabled':
+        this._btn.disabled = this.getBoolAttr('disabled');
+        break;
+    }
+  }
+}
+
+customElements.define('glk-pill', GlkPill);
+
+export { GlkPill };

package/dist/components/glk-popover.js

@@ -0,0 +1,109 @@
+import { G as GlkElement } from './shared/base-Bm9Z714o.js';
+
+const PLACEMENTS = ['top', 'bottom', 'start', 'end'];
+
+class GlkPopover extends GlkElement {
+  static get observedAttributes() {
+    return ['open', 'placement'];
+  }
+
+  render() {
+    this._anchor = this.createElement('div', ['glass-popover-anchor']);
+
+    const triggerSlot = document.createElement('slot');
+    triggerSlot.setAttribute('name', 'trigger');
+    this._anchor.appendChild(triggerSlot);
+
+    this._popover = this.createElement('div', ['glass-popover']);
+    this._applyPlacement();
+    if (this.getBoolAttr('open')) {
+      this._popover.classList.add('is-open');
+    }
+
+    const contentSlot = document.createElement('slot');
+    this._popover.appendChild(contentSlot);
+
+    this._anchor.appendChild(this._popover);
+    this._wrapper.appendChild(this._anchor);
+  }
+
+  _applyPlacement() {
+    if (!this._popover) return;
+    PLACEMENTS.forEach(p => this._popover.classList.remove(`glass-popover--${p}`));
+    const placement = this.getAttribute('placement') || 'bottom';
+    if (placement !== 'bottom' && PLACEMENTS.includes(placement)) {
+      this._popover.classList.add(`glass-popover--${placement}`);
+    }
+  }
+
+  setupEvents() {
+    // Toggle when the slotted trigger is clicked.
+    this._onTriggerClick = (e) => {
+      const path = e.composedPath();
+      const hitTrigger = path.some(node => {
+        return node instanceof Element && node.getAttribute && node.getAttribute('slot') === 'trigger';
+      });
+      if (!hitTrigger) return;
+      e.stopPropagation();
+      this.toggle();
+    };
+    this.addEventListener('click', this._onTriggerClick);
+
+    // Close on outside click.
+    this._onDocClick = (e) => {
+      if (!this.getBoolAttr('open')) return;
+      const path = e.composedPath();
+      if (path.includes(this)) return;
+      this.close();
+    };
+    document.addEventListener('click', this._onDocClick);
+
+    // Close on Escape.
+    this._onKeydown = (e) => {
+      if (e.key === 'Escape' && this.getBoolAttr('open')) {
+        this.close();
+      }
+    };
+    document.addEventListener('keydown', this._onKeydown);
+  }
+
+  teardownEvents() {
+    this.removeEventListener('click', this._onTriggerClick);
+    document.removeEventListener('click', this._onDocClick);
+    document.removeEventListener('keydown', this._onKeydown);
+  }
+
+  onAttributeChanged(name) {
+    if (!this._popover) return;
+    switch (name) {
+      case 'open': {
+        const isOpen = this.getBoolAttr('open');
+        this._popover.classList.toggle('is-open', isOpen);
+        this.emit(isOpen ? 'glk-open' : 'glk-close');
+        break;
+      }
+      case 'placement':
+        this._applyPlacement();
+        break;
+    }
+  }
+
+  show() { this.setAttribute('open', ''); }
+  close() { this.removeAttribute('open'); }
+  toggle() {
+    if (this.getBoolAttr('open')) this.close();
+    else this.show();
+  }
+
+  get open() { return this.getBoolAttr('open'); }
+  set open(v) { this.setBoolAttr('open', v); }
+
+  get placement() { return this.getAttribute('placement') || 'bottom'; }
+  set placement(v) {
+    if (PLACEMENTS.includes(v)) this.setAttribute('placement', v);
+  }
+}
+
+customElements.define('glk-popover', GlkPopover);
+
+export { GlkPopover };

package/dist/components/glk-progress.js

@@ -0,0 +1,78 @@
+import { G as GlkElement } from './shared/base-Bm9Z714o.js';
+
+const VARIANTS = ['success', 'error'];
+const SIZES = ['sm', 'lg'];
+
+class GlkProgress extends GlkElement {
+  static get observedAttributes() {
+    return ['value', 'label', 'variant', 'size'];
+  }
+
+  render() {
+    this._container = this.createElement('div', this._computeClasses());
+
+    // Header
+    const header = this.createElement('div', ['glass-progress__header']);
+    this._labelEl = this.createElement('span', ['glass-progress__label']);
+    this._labelEl.textContent = this.getAttribute('label') || '';
+    this._valueEl = this.createElement('span', ['glass-progress__value']);
+
+    header.appendChild(this._labelEl);
+    header.appendChild(this._valueEl);
+
+    // Track
+    const track = this.createElement('div', ['glass-progress__track']);
+    this._fill = this.createElement('div', ['glass-progress__fill']);
+
+    track.appendChild(this._fill);
+
+    this._container.appendChild(header);
+    this._container.appendChild(track);
+
+    this._updateValue();
+
+    this._wrapper.appendChild(this._container);
+  }
+
+  onAttributeChanged(name) {
+    if (!this._container) return;
+    switch (name) {
+      case 'value':
+        this._updateValue();
+        break;
+      case 'label':
+        this._labelEl.textContent = this.getAttribute('label') || '';
+        break;
+      case 'variant':
+      case 'size':
+        this._container.className = this._computeClasses().join(' ');
+        break;
+    }
+  }
+
+  _updateValue() {
+    const val = Math.min(100, Math.max(0, parseInt(this.getAttribute('value') || '0', 10)));
+    this._fill.style.width = `${val}%`;
+    this._valueEl.textContent = `${val}%`;
+  }
+
+  _computeClasses() {
+    const classes = ['glass-progress'];
+    const variant = this.getAttribute('variant');
+    if (variant && VARIANTS.includes(variant)) {
+      classes.push(`glass-progress--${variant}`);
+    }
+    const size = this.getAttribute('size');
+    if (size && SIZES.includes(size)) {
+      classes.push(`glass-progress--${size}`);
+    }
+    return classes;
+  }
+
+  get value() { return this.getAttribute('value'); }
+  set value(v) { this.setAttribute('value', String(v)); }
+}
+
+customElements.define('glk-progress', GlkProgress);
+
+export { GlkProgress };