@jungherz-de/glasskit-elements 1.6.2 → 1.8.0

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

@@ -0,0 +1,62 @@
+import { G as GlkElement } from './shared/base-Bm9Z714o.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>`;
+
+class GlkAccordionItem extends GlkElement {
+  static get observedAttributes() {
+    return ['title', 'open'];
+  }
+
+  render() {
+    this._item = this.createElement('div', ['glass-accordion__item']);
+    if (this.getBoolAttr('open')) this._item.classList.add('is-open');
+
+    // Trigger button
+    this._trigger = this.createElement('button', ['glass-accordion__trigger']);
+    this._triggerText = document.createTextNode(this.getAttribute('title') || '');
+    this._trigger.appendChild(this._triggerText);
+    this._trigger.insertAdjacentHTML('beforeend', CHEVRON_SVG);
+
+    // Content
+    this._content = this.createElement('div', ['glass-accordion__content']);
+    const body = this.createElement('div', ['glass-accordion__body']);
+    body.appendChild(document.createElement('slot'));
+    this._content.appendChild(body);
+
+    this._item.appendChild(this._trigger);
+    this._item.appendChild(this._content);
+
+    this._wrapper.appendChild(this._item);
+  }
+
+  setupEvents() {
+    this._onClick = () => {
+      this.setBoolAttr('open', !this.getBoolAttr('open'));
+      this.emit('glk-toggle', { open: this.getBoolAttr('open') });
+    };
+    this._trigger.addEventListener('click', this._onClick);
+  }
+
+  teardownEvents() {
+    this._trigger?.removeEventListener('click', this._onClick);
+  }
+
+  onAttributeChanged(name) {
+    if (!this._item) return;
+    switch (name) {
+      case 'open':
+        this._item.classList.toggle('is-open', this.getBoolAttr('open'));
+        break;
+      case 'title':
+        this._triggerText.textContent = this.getAttribute('title') || '';
+        break;
+    }
+  }
+
+  get open() { return this.getBoolAttr('open'); }
+  set open(v) { this.setBoolAttr('open', v); }
+}
+
+customElements.define('glk-accordion-item', GlkAccordionItem);
+
+export { GlkAccordionItem };

package/dist/components/glk-accordion.js

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

package/dist/components/glk-avatar.js

@@ -0,0 +1,59 @@
+import { G as GlkElement } from './shared/base-Bm9Z714o.js';
+
+const SIZES = ['sm', 'lg'];
+
+class GlkAvatar extends GlkElement {
+  static get displayInline() { return true; }
+  static get observedAttributes() {
+    return ['size', 'src', 'alt'];
+  }
+
+  render() {
+    this._avatar = this.createElement('div', this._computeClasses());
+    this._updateContent();
+    this._wrapper.appendChild(this._avatar);
+  }
+
+  onAttributeChanged(name) {
+    if (!this._avatar) return;
+    if (name === 'size') {
+      this._avatar.className = this._computeClasses().join(' ');
+    } else if (name === 'src' || name === 'alt') {
+      this._updateContent();
+    }
+  }
+
+  _updateContent() {
+    const src = this.getAttribute('src');
+    this._avatar.innerHTML = '';
+    if (src) {
+      const img = this.createElement('img', [], {
+        src,
+        alt: this.getAttribute('alt') || ''
+      });
+      this._avatar.appendChild(img);
+    } else {
+      // Use slotted text content (initials)
+      this._avatar.appendChild(document.createElement('slot'));
+    }
+  }
+
+  _computeClasses() {
+    const classes = ['glass-avatar'];
+    const size = this.getAttribute('size');
+    if (size && SIZES.includes(size)) {
+      classes.push(`glass-avatar--${size}`);
+    }
+    return classes;
+  }
+
+  get size() { return this.getAttribute('size'); }
+  set size(v) { this.setAttribute('size', v); }
+
+  get src() { return this.getAttribute('src'); }
+  set src(v) { this.setAttribute('src', v); }
+}
+
+customElements.define('glk-avatar', GlkAvatar);
+
+export { GlkAvatar };

package/dist/components/glk-badge.js

@@ -0,0 +1,38 @@
+import { G as GlkElement } from './shared/base-Bm9Z714o.js';
+
+const VARIANTS = ['primary', 'success', 'error'];
+
+class GlkBadge extends GlkElement {
+  static get displayInline() { return true; }
+  static get observedAttributes() {
+    return ['variant'];
+  }
+
+  render() {
+    this._badge = this.createElement('span', this._computeClasses());
+    this._badge.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(this._badge);
+  }
+
+  onAttributeChanged(name) {
+    if (name === 'variant' && this._badge) {
+      this._badge.className = this._computeClasses().join(' ');
+    }
+  }
+
+  _computeClasses() {
+    const classes = ['glass-badge'];
+    const variant = this.getAttribute('variant');
+    if (variant && VARIANTS.includes(variant)) {
+      classes.push(`glass-badge--${variant}`);
+    }
+    return classes;
+  }
+
+  get variant() { return this.getAttribute('variant'); }
+  set variant(v) { this.setAttribute('variant', v); }
+}
+
+customElements.define('glk-badge', GlkBadge);
+
+export { GlkBadge };

package/dist/components/glk-button.js

@@ -0,0 +1,81 @@
+import { G as GlkElement } from './shared/base-Bm9Z714o.js';
+
+const VARIANTS = ['primary', 'secondary', 'tertiary'];
+const SIZES = ['sm', 'md', 'lg', 'auto'];
+
+class GlkButton extends GlkElement {
+  static get observedAttributes() {
+    return ['variant', 'size', 'disabled', 'type'];
+  }
+
+  render() {
+    this._btn = this.createElement('button', this._computeClasses(), {
+      type: this.getAttribute('type') || 'button'
+    });
+
+    if (this.getBoolAttr('disabled')) {
+      this._btn.disabled = true;
+    }
+
+    this._btn.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(this._btn);
+  }
+
+  setupEvents() {
+    this._onClick = (e) => {
+      if (this.getBoolAttr('disabled')) {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+      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 'variant':
+      case 'size':
+        this._btn.className = this._computeClasses().join(' ');
+        break;
+      case 'disabled':
+        this._btn.disabled = this.getBoolAttr('disabled');
+        break;
+      case 'type':
+        this._btn.setAttribute('type', this.getAttribute('type') || 'button');
+        break;
+    }
+  }
+
+  _computeClasses() {
+    const classes = ['glass-btn'];
+    const variant = this.getAttribute('variant');
+    if (variant && VARIANTS.includes(variant)) {
+      classes.push(`glass-btn--${variant}`);
+    }
+    const size = this.getAttribute('size');
+    if (size && SIZES.includes(size)) {
+      classes.push(`glass-btn--${size}`);
+    }
+    return classes;
+  }
+
+  get variant() { return this.getAttribute('variant'); }
+  set variant(v) { this.setAttribute('variant', v); }
+
+  get size() { return this.getAttribute('size'); }
+  set size(v) { this.setAttribute('size', v); }
+
+  get disabled() { return this.getBoolAttr('disabled'); }
+  set disabled(v) { this.setBoolAttr('disabled', v); }
+}
+
+customElements.define('glk-button', GlkButton);
+
+export { GlkButton };

package/dist/components/glk-card.js

@@ -0,0 +1,51 @@
+import { G as GlkElement } from './shared/base-Bm9Z714o.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
+// layout but keeps height:auto, so a percentage height on the inner card has
+// nothing definite to resolve against. Making the host a grid stretches its
+// single child instead, which needs no percentage at all. The card also becomes
+// a flex column so a footer can be pushed down with margin-top:auto.
+const fillSheet = new CSSStyleSheet();
+fillSheet.replaceSync(`
+  :host([fill]) { display: grid; }
+  :host([fill]) .glass-card { display: flex; flex-direction: column; }
+`);
+
+class GlkCard extends GlkElement {
+  static get observedAttributes() {
+    return ['glow', 'fill'];
+  }
+
+  static get hostStyles() { return fillSheet; }
+
+  render() {
+    this._card = this.createElement('div', this._computeClasses(), { part: 'card' });
+    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); }
+
+  get fill() { return this.getBoolAttr('fill'); }
+  set fill(v) { this.setBoolAttr('fill', v); }
+}
+
+customElements.define('glk-card', GlkCard);
+
+export { GlkCard };

package/dist/components/glk-checkbox.js

@@ -0,0 +1,104 @@
+import { a as GlkFormElement } from './shared/base-Bm9Z714o.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/dist/components/glk-divider.js

@@ -0,0 +1,12 @@
+import { G as GlkElement } from './shared/base-Bm9Z714o.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/dist/components/glk-input.js

@@ -0,0 +1,139 @@
+import { a as GlkFormElement } from './shared/base-Bm9Z714o.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 };