@jungherz-de/glasskit-elements 0.8.0

package/src/components/content/glk-card.js

@@ -0,0 +1,33 @@
+import { GlkElement } from '../../base.js';
+
+class GlkCard extends GlkElement {
+  static get observedAttributes() {
+    return ['glow'];
+  }
+
+  render() {
+    this._card = this.createElement('div', this._computeClasses());
+    this._card.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(this._card);
+  }
+
+  onAttributeChanged(name) {
+    if (name === 'glow' && this._card) {
+      this._card.className = this._computeClasses().join(' ');
+    }
+  }
+
+  _computeClasses() {
+    const classes = ['glass-card'];
+    if (this.getBoolAttr('glow')) {
+      classes.push('glass-card--glow');
+    }
+    return classes;
+  }
+
+  get glow() { return this.getBoolAttr('glow'); }
+  set glow(v) { this.setBoolAttr('glow', v); }
+}
+
+customElements.define('glk-card', GlkCard);
+export { GlkCard };

package/src/components/content/glk-divider.js

@@ -0,0 +1,11 @@
+import { GlkElement } from '../../base.js';
+
+class GlkDivider extends GlkElement {
+  render() {
+    const hr = this.createElement('div', ['glass-divider']);
+    this._wrapper.appendChild(hr);
+  }
+}
+
+customElements.define('glk-divider', GlkDivider);
+export { GlkDivider };

package/src/components/content/glk-status.js

@@ -0,0 +1,35 @@
+import { GlkElement } from '../../base.js';
+
+class GlkStatus extends GlkElement {
+  static get observedAttributes() {
+    return ['message'];
+  }
+
+  render() {
+    this._container = this.createElement('div', ['glass-status']);
+
+    // Icon via slot
+    this._iconSlot = this.createElement('span', []);
+    this._iconSlot.appendChild(this.createElement('slot', [], { name: 'icon' }));
+
+    // Message
+    this._messageEl = this.createElement('p', []);
+    this._messageEl.textContent = this.getAttribute('message') || '';
+
+    this._container.appendChild(this._iconSlot);
+    this._container.appendChild(this._messageEl);
+    this._wrapper.appendChild(this._container);
+  }
+
+  onAttributeChanged(name) {
+    if (name === 'message' && this._messageEl) {
+      this._messageEl.textContent = this.getAttribute('message') || '';
+    }
+  }
+
+  get message() { return this.getAttribute('message'); }
+  set message(v) { this.setAttribute('message', v); }
+}
+
+customElements.define('glk-status', GlkStatus);
+export { GlkStatus };

package/src/components/content/glk-title.js

@@ -0,0 +1,16 @@
+import { GlkElement } from '../../base.js';
+
+class GlkTitle extends GlkElement {
+  static get observedAttributes() {
+    return [];
+  }
+
+  render() {
+    const el = this.createElement('div', ['glass-title']);
+    el.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(el);
+  }
+}
+
+customElements.define('glk-title', GlkTitle);
+export { GlkTitle };

package/src/components/feedback/glk-modal.js

@@ -0,0 +1,98 @@
+import { GlkElement } from '../../base.js';
+
+class GlkModal extends GlkElement {
+  static get observedAttributes() {
+    return ['open', 'title'];
+  }
+
+  render() {
+    this._overlay = this.createElement('div', ['glass-modal-overlay']);
+
+    const modal = this.createElement('div', ['glass-modal']);
+
+    // Header
+    const header = this.createElement('div', ['glass-modal__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']);
+    body.appendChild(document.createElement('slot'));
+
+    // Footer — clone action buttons from light DOM into shadow DOM
+    this._footer = this.createElement('div', ['glass-modal__footer']);
+    this._populateFooter();
+
+    modal.appendChild(header);
+    modal.appendChild(body);
+    modal.appendChild(this._footer);
+
+    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/src/components/feedback/glk-progress.js

@@ -0,0 +1,77 @@
+import { GlkElement } from '../../base.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 };

package/src/components/feedback/glk-toast.js

@@ -0,0 +1,104 @@
+import { GlkElement } from '../../base.js';
+
+const VARIANTS = ['success', 'error', 'warning'];
+
+const ICONS = {
+  success: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>`,
+  error: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>`,
+  warning: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>`
+};
+
+class GlkToast extends GlkElement {
+  static get observedAttributes() {
+    return ['message', 'variant', 'duration', 'visible'];
+  }
+
+  render() {
+    this._toast = this.createElement('div', this._computeClasses());
+
+    this._iconEl = this.createElement('span', ['glass-toast__icon']);
+    this._textEl = this.createElement('span', ['glass-toast__text']);
+    this._textEl.textContent = this.getAttribute('message') || '';
+
+    this._updateIcon();
+
+    this._toast.appendChild(this._iconEl);
+    this._toast.appendChild(this._textEl);
+    this._wrapper.appendChild(this._toast);
+
+    if (this.getBoolAttr('visible')) {
+      this._show();
+    }
+  }
+
+  onAttributeChanged(name) {
+    if (!this._toast) return;
+    switch (name) {
+      case 'message':
+        this._textEl.textContent = this.getAttribute('message') || '';
+        break;
+      case 'variant':
+        this._toast.className = this._computeClasses().join(' ');
+        this._updateIcon();
+        break;
+      case 'visible':
+        if (this.getBoolAttr('visible')) {
+          this._show();
+        } else {
+          this._hide();
+        }
+        break;
+    }
+  }
+
+  _computeClasses() {
+    const classes = ['glass-toast'];
+    const variant = this.getAttribute('variant');
+    if (variant && VARIANTS.includes(variant)) {
+      classes.push(`glass-toast--${variant}`);
+    }
+    return classes;
+  }
+
+  _updateIcon() {
+    const variant = this.getAttribute('variant');
+    this._iconEl.innerHTML = ICONS[variant] || ICONS.success;
+  }
+
+  _show() {
+    this._toast.classList.add('is-visible');
+    const duration = parseInt(this.getAttribute('duration') || '3000', 10);
+    if (duration > 0) {
+      clearTimeout(this._timer);
+      this._timer = setTimeout(() => {
+        this.removeAttribute('visible');
+        this.emit('glk-dismiss');
+      }, duration);
+    }
+  }
+
+  _hide() {
+    this._toast.classList.remove('is-visible');
+    clearTimeout(this._timer);
+  }
+
+  /** Programmatic show */
+  show(message, variant, duration) {
+    if (message) this.setAttribute('message', message);
+    if (variant) this.setAttribute('variant', variant);
+    if (duration) this.setAttribute('duration', String(duration));
+    this.setAttribute('visible', '');
+  }
+
+  dismiss() {
+    this.removeAttribute('visible');
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    clearTimeout(this._timer);
+  }
+}
+
+customElements.define('glk-toast', GlkToast);
+export { GlkToast };

package/src/components/forms/glk-checkbox.js

@@ -0,0 +1,103 @@
+import { GlkFormElement } from '../../base.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>`;
+
+class GlkCheckbox extends GlkFormElement {
+  static get observedAttributes() {
+    return ['checked', 'disabled', 'label', 'name', 'value'];
+  }
+
+  render() {
+    const label = this.createElement('label', ['glass-checkbox']);
+
+    this._input = this.createElement('input', ['glass-checkbox__input'], {
+      type: 'checkbox'
+    });
+
+    const name = this.getAttribute('name');
+    if (name) this._input.setAttribute('name', name);
+
+    const box = this.createElement('span', ['glass-checkbox__box']);
+    box.innerHTML = CHECKMARK_SVG;
+
+    this._labelEl = this.createElement('span', ['glass-checkbox__label']);
+    this._labelEl.textContent = this.getAttribute('label') || '';
+
+    label.appendChild(this._input);
+    label.appendChild(box);
+    label.appendChild(this._labelEl);
+
+    if (this.getBoolAttr('checked')) this._input.checked = true;
+    if (this.getBoolAttr('disabled')) this._input.disabled = true;
+
+    this._defaultChecked = this.getBoolAttr('checked');
+    this._wrapper.appendChild(label);
+    this._syncFormValue();
+  }
+
+  setupEvents() {
+    this._onChange = () => {
+      this._syncing = true;
+      this.setBoolAttr('checked', this._input.checked);
+      this._syncing = false;
+      this._syncFormValue();
+      this.emit('glk-change', { checked: this._input.checked });
+      this.dispatchEvent(new Event('change', { bubbles: true }));
+    };
+    this._input.addEventListener('change', this._onChange);
+  }
+
+  teardownEvents() {
+    this._input?.removeEventListener('change', this._onChange);
+  }
+
+  onAttributeChanged(name) {
+    if (this._syncing) return;
+    if (!this._input) return;
+    switch (name) {
+      case 'checked':
+        this._input.checked = this.getBoolAttr('checked');
+        this._syncFormValue();
+        break;
+      case 'disabled':
+        this._input.disabled = this.getBoolAttr('disabled');
+        break;
+      case 'label':
+        this._labelEl.textContent = this.getAttribute('label') || '';
+        break;
+      case 'name':
+        this._input.setAttribute('name', this.getAttribute('name') || '');
+        break;
+    }
+  }
+
+  _syncFormValue() {
+    const val = this.getAttribute('value') || 'on';
+    this.setFormValue(this._input.checked ? val : null);
+  }
+
+  resetValue() {
+    this._input.checked = this._defaultChecked;
+    this.setBoolAttr('checked', this._defaultChecked);
+    this._syncFormValue();
+  }
+
+  get checked() { return this._input?.checked ?? false; }
+  set checked(v) {
+    if (this._input) this._input.checked = v;
+    this.setBoolAttr('checked', v);
+    this._syncFormValue();
+  }
+
+  get disabled() { return this.getBoolAttr('disabled'); }
+  set disabled(v) { this.setBoolAttr('disabled', v); }
+
+  get name() { return this.getAttribute('name'); }
+  set name(v) { this.setAttribute('name', v); }
+
+  get value() { return this.getAttribute('value') || 'on'; }
+  set value(v) { this.setAttribute('value', v); }
+}
+
+customElements.define('glk-checkbox', GlkCheckbox);
+export { GlkCheckbox };

package/src/components/forms/glk-input.js

@@ -0,0 +1,138 @@
+import { GlkFormElement } from '../../base.js';
+
+class GlkInput extends GlkFormElement {
+  static get observedAttributes() {
+    return ['label', 'type', 'placeholder', 'error', 'hint', 'disabled', 'name', 'value', 'required'];
+  }
+
+  render() {
+    const group = this.createElement('div', ['glass-input-group']);
+
+    // Label
+    this._labelEl = this.createElement('label', ['glass-label']);
+    this._labelEl.textContent = this.getAttribute('label') || '';
+
+    // Input
+    this._input = this.createElement('input', this._computeInputClasses(), {
+      type: this.getAttribute('type') || 'text'
+    });
+
+    const placeholder = this.getAttribute('placeholder');
+    if (placeholder) this._input.setAttribute('placeholder', placeholder);
+
+    const name = this.getAttribute('name');
+    if (name) this._input.setAttribute('name', name);
+
+    const value = this.getAttribute('value');
+    if (value) this._input.value = value;
+
+    if (this.getBoolAttr('disabled')) this._input.disabled = true;
+    if (this.getBoolAttr('required')) this._input.required = true;
+
+    // Hint
+    this._hintEl = this.createElement('span', this._computeHintClasses());
+    this._hintEl.textContent = this.getAttribute('hint') || '';
+
+    group.appendChild(this._labelEl);
+    group.appendChild(this._input);
+    if (this.getAttribute('hint')) group.appendChild(this._hintEl);
+
+    this._group = group;
+    this._wrapper.appendChild(group);
+
+    this._syncFormValue();
+  }
+
+  setupEvents() {
+    this._onInput = () => {
+      this._syncFormValue();
+      this.emit('glk-input', { value: this._input.value });
+      this.dispatchEvent(new Event('input', { bubbles: true }));
+    };
+    this._onChangeNative = () => {
+      this.emit('glk-change', { value: this._input.value });
+      this.dispatchEvent(new Event('change', { bubbles: true }));
+    };
+    this._input.addEventListener('input', this._onInput);
+    this._input.addEventListener('change', this._onChangeNative);
+  }
+
+  teardownEvents() {
+    this._input?.removeEventListener('input', this._onInput);
+    this._input?.removeEventListener('change', this._onChangeNative);
+  }
+
+  onAttributeChanged(name) {
+    if (!this._input) return;
+    switch (name) {
+      case 'label':
+        this._labelEl.textContent = this.getAttribute('label') || '';
+        break;
+      case 'type':
+        this._input.setAttribute('type', this.getAttribute('type') || 'text');
+        break;
+      case 'placeholder':
+        this._input.setAttribute('placeholder', this.getAttribute('placeholder') || '');
+        break;
+      case 'error':
+        this._input.className = this._computeInputClasses().join(' ');
+        this._hintEl.className = this._computeHintClasses().join(' ');
+        break;
+      case 'hint':
+        this._hintEl.textContent = this.getAttribute('hint') || '';
+        if (this.getAttribute('hint') && !this._hintEl.parentNode) {
+          this._group.appendChild(this._hintEl);
+        }
+        break;
+      case 'disabled':
+        this._input.disabled = this.getBoolAttr('disabled');
+        break;
+      case 'name':
+        this._input.setAttribute('name', this.getAttribute('name') || '');
+        break;
+      case 'value':
+        this._input.value = this.getAttribute('value') || '';
+        this._syncFormValue();
+        break;
+      case 'required':
+        this._input.required = this.getBoolAttr('required');
+        break;
+    }
+  }
+
+  _computeInputClasses() {
+    const classes = ['glass-input'];
+    if (this.getBoolAttr('error')) classes.push('glass-input--error');
+    return classes;
+  }
+
+  _computeHintClasses() {
+    const classes = ['glass-hint'];
+    if (this.getBoolAttr('error')) classes.push('glass-hint--error');
+    return classes;
+  }
+
+  _syncFormValue() {
+    this.setFormValue(this._input.value);
+  }
+
+  resetValue() {
+    this._input.value = this.getAttribute('value') || '';
+    this._syncFormValue();
+  }
+
+  get value() { return this._input?.value ?? ''; }
+  set value(v) {
+    if (this._input) this._input.value = v;
+    this._syncFormValue();
+  }
+
+  get disabled() { return this.getBoolAttr('disabled'); }
+  set disabled(v) { this.setBoolAttr('disabled', v); }
+
+  get name() { return this.getAttribute('name'); }
+  set name(v) { this.setAttribute('name', v); }
+}
+
+customElements.define('glk-input', GlkInput);
+export { GlkInput };