@jungherz-de/glasskit-elements 0.8.0

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

@@ -0,0 +1,109 @@
+import { GlkFormElement } from '../../base.js';
+
+class GlkRadio extends GlkFormElement {
+  static get observedAttributes() {
+    return ['checked', 'disabled', 'label', 'name', 'value'];
+  }
+
+  render() {
+    const label = this.createElement('label', ['glass-radio']);
+
+    this._input = this.createElement('input', ['glass-radio__input'], {
+      type: 'radio'
+    });
+
+    const name = this.getAttribute('name');
+    if (name) this._input.setAttribute('name', name);
+
+    const val = this.getAttribute('value');
+    if (val) this._input.setAttribute('value', val);
+
+    const circle = this.createElement('span', ['glass-radio__circle']);
+    const dot = this.createElement('span', ['glass-radio__dot']);
+    circle.appendChild(dot);
+
+    this._labelEl = this.createElement('span', ['glass-radio__label']);
+    this._labelEl.textContent = this.getAttribute('label') || '';
+
+    label.appendChild(this._input);
+    label.appendChild(circle);
+    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, value: this._input.value });
+      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;
+      case 'value':
+        this._input.setAttribute('value', this.getAttribute('value') || '');
+        this._syncFormValue();
+        break;
+    }
+  }
+
+  _syncFormValue() {
+    const val = this.getAttribute('value') || '';
+    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'); }
+  set value(v) { this.setAttribute('value', v); }
+}
+
+customElements.define('glk-radio', GlkRadio);
+export { GlkRadio };

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

@@ -0,0 +1,112 @@
+import { GlkFormElement } from '../../base.js';
+
+class GlkRange extends GlkFormElement {
+  static get observedAttributes() {
+    return ['label', 'min', 'max', 'value', 'step', 'name', 'disabled'];
+  }
+
+  render() {
+    const group = this.createElement('div', ['glass-range-group']);
+
+    const header = this.createElement('div', ['glass-range-header']);
+
+    this._labelEl = this.createElement('label', []);
+    this._labelEl.textContent = this.getAttribute('label') || '';
+
+    this._valueEl = this.createElement('span', ['glass-range-value']);
+
+    header.appendChild(this._labelEl);
+    header.appendChild(this._valueEl);
+
+    this._input = this.createElement('input', ['glass-range'], {
+      type: 'range',
+      min: this.getAttribute('min') || '0',
+      max: this.getAttribute('max') || '100',
+      value: this.getAttribute('value') || '50'
+    });
+
+    const step = this.getAttribute('step');
+    if (step) this._input.setAttribute('step', step);
+
+    const name = this.getAttribute('name');
+    if (name) this._input.setAttribute('name', name);
+
+    if (this.getBoolAttr('disabled')) this._input.disabled = true;
+
+    this._updateValueDisplay();
+
+    group.appendChild(header);
+    group.appendChild(this._input);
+
+    this._wrapper.appendChild(group);
+    this._defaultValue = this._input.value;
+    this._syncFormValue();
+  }
+
+  setupEvents() {
+    this._onInput = () => {
+      this._updateValueDisplay();
+      this._syncFormValue();
+      this.emit('glk-input', { value: this._input.value });
+      this.dispatchEvent(new Event('input', { bubbles: true }));
+    };
+    this._input.addEventListener('input', this._onInput);
+  }
+
+  teardownEvents() {
+    this._input?.removeEventListener('input', this._onInput);
+  }
+
+  onAttributeChanged(name) {
+    if (!this._input) return;
+    switch (name) {
+      case 'label':
+        this._labelEl.textContent = this.getAttribute('label') || '';
+        break;
+      case 'min':
+        this._input.min = this.getAttribute('min') || '0';
+        break;
+      case 'max':
+        this._input.max = this.getAttribute('max') || '100';
+        break;
+      case 'value':
+        this._input.value = this.getAttribute('value') || '50';
+        this._updateValueDisplay();
+        this._syncFormValue();
+        break;
+      case 'step':
+        this._input.step = this.getAttribute('step') || '';
+        break;
+      case 'name':
+        this._input.setAttribute('name', this.getAttribute('name') || '');
+        break;
+      case 'disabled':
+        this._input.disabled = this.getBoolAttr('disabled');
+        break;
+    }
+  }
+
+  _updateValueDisplay() {
+    this._valueEl.textContent = `${this._input.value}%`;
+  }
+
+  _syncFormValue() {
+    this.setFormValue(this._input.value);
+  }
+
+  resetValue() {
+    this._input.value = this._defaultValue;
+    this._updateValueDisplay();
+    this._syncFormValue();
+  }
+
+  get value() { return this._input?.value ?? ''; }
+  set value(v) {
+    if (this._input) this._input.value = v;
+    this._updateValueDisplay();
+    this._syncFormValue();
+  }
+}
+
+customElements.define('glk-range', GlkRange);
+export { GlkRange };

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

@@ -0,0 +1,87 @@
+import { GlkFormElement } from '../../base.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>`;
+
+class GlkSearch extends GlkFormElement {
+  static get observedAttributes() {
+    return ['placeholder', 'name', 'value', 'disabled'];
+  }
+
+  render() {
+    const container = this.createElement('div', ['glass-search']);
+
+    const icon = this.createElement('span', ['glass-search__icon']);
+    icon.innerHTML = SEARCH_SVG;
+
+    this._input = this.createElement('input', ['glass-input'], {
+      type: 'search'
+    });
+
+    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;
+
+    container.appendChild(icon);
+    container.appendChild(this._input);
+
+    this._wrapper.appendChild(container);
+    this._syncFormValue();
+  }
+
+  setupEvents() {
+    this._onInput = () => {
+      this._syncFormValue();
+      this.emit('glk-input', { value: this._input.value });
+      this.dispatchEvent(new Event('input', { bubbles: true }));
+    };
+    this._input.addEventListener('input', this._onInput);
+  }
+
+  teardownEvents() {
+    this._input?.removeEventListener('input', this._onInput);
+  }
+
+  onAttributeChanged(name) {
+    if (!this._input) return;
+    switch (name) {
+      case 'placeholder':
+        this._input.setAttribute('placeholder', this.getAttribute('placeholder') || '');
+        break;
+      case 'name':
+        this._input.setAttribute('name', this.getAttribute('name') || '');
+        break;
+      case 'value':
+        this._input.value = this.getAttribute('value') || '';
+        this._syncFormValue();
+        break;
+      case 'disabled':
+        this._input.disabled = this.getBoolAttr('disabled');
+        break;
+    }
+  }
+
+  _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();
+  }
+}
+
+customElements.define('glk-search', GlkSearch);
+export { GlkSearch };

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

@@ -0,0 +1,96 @@
+import { GlkFormElement } from '../../base.js';
+
+class GlkSelect extends GlkFormElement {
+  static get observedAttributes() {
+    return ['label', 'disabled', 'name', 'value', 'required'];
+  }
+
+  render() {
+    const group = this.createElement('div', ['glass-input-group']);
+
+    this._labelEl = this.createElement('label', ['glass-label']);
+    this._labelEl.textContent = this.getAttribute('label') || '';
+
+    this._select = this.createElement('select', ['glass-select']);
+
+    const name = this.getAttribute('name');
+    if (name) this._select.setAttribute('name', name);
+
+    if (this.getBoolAttr('disabled')) this._select.disabled = true;
+    if (this.getBoolAttr('required')) this._select.required = true;
+
+    // Move slotted <option> elements into the shadow select
+    this._moveOptions();
+
+    group.appendChild(this._labelEl);
+    group.appendChild(this._select);
+
+    this._wrapper.appendChild(group);
+
+    const value = this.getAttribute('value');
+    if (value) this._select.value = value;
+
+    this._syncFormValue();
+  }
+
+  _moveOptions() {
+    // Copy <option> children from the light DOM into the shadow <select>
+    const options = this.querySelectorAll('option');
+    options.forEach(opt => {
+      this._select.appendChild(opt.cloneNode(true));
+    });
+  }
+
+  setupEvents() {
+    this._onChange = () => {
+      this._syncFormValue();
+      this.emit('glk-change', { value: this._select.value });
+      this.dispatchEvent(new Event('change', { bubbles: true }));
+    };
+    this._select.addEventListener('change', this._onChange);
+  }
+
+  teardownEvents() {
+    this._select?.removeEventListener('change', this._onChange);
+  }
+
+  onAttributeChanged(name) {
+    if (!this._select) return;
+    switch (name) {
+      case 'label':
+        this._labelEl.textContent = this.getAttribute('label') || '';
+        break;
+      case 'disabled':
+        this._select.disabled = this.getBoolAttr('disabled');
+        break;
+      case 'name':
+        this._select.setAttribute('name', this.getAttribute('name') || '');
+        break;
+      case 'value':
+        this._select.value = this.getAttribute('value') || '';
+        this._syncFormValue();
+        break;
+    }
+  }
+
+  _syncFormValue() {
+    this.setFormValue(this._select.value);
+  }
+
+  resetValue() {
+    this._select.selectedIndex = 0;
+    this._syncFormValue();
+  }
+
+  get value() { return this._select?.value ?? ''; }
+  set value(v) {
+    if (this._select) this._select.value = v;
+    this._syncFormValue();
+  }
+
+  get disabled() { return this.getBoolAttr('disabled'); }
+  set disabled(v) { this.setBoolAttr('disabled', v); }
+}
+
+customElements.define('glk-select', GlkSelect);
+export { GlkSelect };

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

@@ -0,0 +1,95 @@
+import { GlkFormElement } from '../../base.js';
+
+class GlkTextarea extends GlkFormElement {
+  static get observedAttributes() {
+    return ['label', 'placeholder', 'rows', 'disabled', 'name', 'value', 'required'];
+  }
+
+  render() {
+    const group = this.createElement('div', ['glass-input-group']);
+
+    this._labelEl = this.createElement('label', ['glass-label']);
+    this._labelEl.textContent = this.getAttribute('label') || '';
+
+    this._textarea = this.createElement('textarea', ['glass-textarea']);
+    const placeholder = this.getAttribute('placeholder');
+    if (placeholder) this._textarea.setAttribute('placeholder', placeholder);
+
+    const rows = this.getAttribute('rows');
+    if (rows) this._textarea.setAttribute('rows', rows);
+
+    const name = this.getAttribute('name');
+    if (name) this._textarea.setAttribute('name', name);
+
+    const value = this.getAttribute('value');
+    if (value) this._textarea.value = value;
+
+    if (this.getBoolAttr('disabled')) this._textarea.disabled = true;
+    if (this.getBoolAttr('required')) this._textarea.required = true;
+
+    group.appendChild(this._labelEl);
+    group.appendChild(this._textarea);
+
+    this._wrapper.appendChild(group);
+    this._syncFormValue();
+  }
+
+  setupEvents() {
+    this._onInput = () => {
+      this._syncFormValue();
+      this.emit('glk-input', { value: this._textarea.value });
+      this.dispatchEvent(new Event('input', { bubbles: true }));
+    };
+    this._textarea.addEventListener('input', this._onInput);
+  }
+
+  teardownEvents() {
+    this._textarea?.removeEventListener('input', this._onInput);
+  }
+
+  onAttributeChanged(name) {
+    if (!this._textarea) return;
+    switch (name) {
+      case 'label':
+        this._labelEl.textContent = this.getAttribute('label') || '';
+        break;
+      case 'placeholder':
+        this._textarea.setAttribute('placeholder', this.getAttribute('placeholder') || '');
+        break;
+      case 'rows':
+        this._textarea.setAttribute('rows', this.getAttribute('rows') || '');
+        break;
+      case 'disabled':
+        this._textarea.disabled = this.getBoolAttr('disabled');
+        break;
+      case 'name':
+        this._textarea.setAttribute('name', this.getAttribute('name') || '');
+        break;
+      case 'value':
+        this._textarea.value = this.getAttribute('value') || '';
+        this._syncFormValue();
+        break;
+    }
+  }
+
+  _syncFormValue() {
+    this.setFormValue(this._textarea.value);
+  }
+
+  resetValue() {
+    this._textarea.value = this.getAttribute('value') || '';
+    this._syncFormValue();
+  }
+
+  get value() { return this._textarea?.value ?? ''; }
+  set value(v) {
+    if (this._textarea) this._textarea.value = v;
+    this._syncFormValue();
+  }
+
+  get disabled() { return this.getBoolAttr('disabled'); }
+  set disabled(v) { this.setBoolAttr('disabled', v); }
+}
+
+customElements.define('glk-textarea', GlkTextarea);
+export { GlkTextarea };

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

@@ -0,0 +1,121 @@
+import { GlkFormElement } from '../../base.js';
+
+class GlkToggle extends GlkFormElement {
+  static get observedAttributes() {
+    return ['checked', 'disabled', 'label', 'name', 'value'];
+  }
+
+  render() {
+    const label = this.createElement('label', ['glass-toggle']);
+
+    this._input = this.createElement('input', ['glass-toggle__input'], {
+      type: 'checkbox'
+    });
+
+    const name = this.getAttribute('name');
+    if (name) this._input.setAttribute('name', name);
+
+    const track = this.createElement('span', ['glass-toggle__track']);
+    const thumb = this.createElement('span', ['glass-toggle__thumb']);
+    track.appendChild(thumb);
+
+    this._labelEl = this.createElement('span', ['glass-toggle__label']);
+    this._labelEl.textContent = this.getAttribute('label') || '';
+
+    label.appendChild(this._input);
+    label.appendChild(track);
+    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();
+    this.setAttribute('role', 'switch');
+    this.setAttribute('aria-checked', String(this._input.checked));
+    if (this.getBoolAttr('disabled')) this.setAttribute('aria-disabled', 'true');
+  }
+
+  setupEvents() {
+    this._onChange = () => {
+      this._syncing = true;
+      this.setBoolAttr('checked', this._input.checked);
+      this._syncing = false;
+      this.setAttribute('aria-checked', String(this._input.checked));
+      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.setAttribute('aria-checked', String(this._input.checked));
+        this._syncFormValue();
+        break;
+      case 'disabled':
+        this._input.disabled = this.getBoolAttr('disabled');
+        this.setAttribute('aria-disabled', String(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.setAttribute('aria-checked', String(this._defaultChecked));
+    this._syncFormValue();
+  }
+
+  restoreValue(state) {
+    if (state) {
+      this._input.checked = true;
+      this.setBoolAttr('checked', true);
+    }
+  }
+
+  get checked() { return this._input?.checked ?? false; }
+  set checked(v) {
+    if (this._input) this._input.checked = v;
+    this.setBoolAttr('checked', v);
+    this.setAttribute('aria-checked', String(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); }
+
+  get label() { return this.getAttribute('label'); }
+  set label(v) { this.setAttribute('label', v); }
+}
+
+customElements.define('glk-toggle', GlkToggle);
+export { GlkToggle };

package/src/components/navigation/glk-nav.js

@@ -0,0 +1,12 @@
+import { GlkElement } from '../../base.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/src/components/navigation/glk-pill.js

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