@jungherz-de/glasskit-elements 1.6.2 → 1.8.0

package/dist/components/glk-radio.js

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

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

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

@@ -0,0 +1,97 @@
+import { a as GlkFormElement } from './shared/base-Bm9Z714o.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;
+
+    group.appendChild(this._labelEl);
+    group.appendChild(this._select);
+
+    this._wrapper.appendChild(group);
+
+    // Defer option copying — children may not be parsed yet in connectedCallback
+    requestAnimationFrame(() => {
+      this._moveOptions();
+      const value = this.getAttribute('value');
+      if (value) this._select.value = value;
+      this._syncFormValue();
+    });
+  }
+
+  _moveOptions() {
+    this._select.innerHTML = '';
+    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/dist/components/glk-status.js

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

@@ -0,0 +1,66 @@
+import { G as GlkElement } from './shared/base-Bm9Z714o.js';
+
+const VARIANTS = ['accent', 'success', 'error'];
+
+class GlkTabAccessory extends GlkElement {
+  static get observedAttributes() {
+    return ['label', 'disabled', 'variant'];
+  }
+
+  render() {
+    this._btn = this.createElement('button', ['glass-tab-bar__accessory']);
+
+    if (this.getBoolAttr('disabled')) this._btn.disabled = true;
+
+    const ariaLabel = this.getAttribute('label');
+    if (ariaLabel) this._btn.setAttribute('aria-label', ariaLabel);
+
+    this._applyVariant();
+
+    this._btn.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(this._btn);
+  }
+
+  _applyVariant() {
+    if (!this._btn) return;
+    for (const v of VARIANTS) {
+      this._btn.classList.remove(`glass-tab-bar__accessory--${v}`);
+    }
+    const variant = this.getAttribute('variant');
+    if (variant && VARIANTS.includes(variant)) {
+      this._btn.classList.add(`glass-tab-bar__accessory--${variant}`);
+    }
+  }
+
+  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;
+      case 'variant':
+        this._applyVariant();
+        break;
+    }
+  }
+}
+
+customElements.define('glk-tab-accessory', GlkTabAccessory);
+
+export { GlkTabAccessory };

package/dist/components/glk-tab-bar.js

@@ -0,0 +1,59 @@
+import { G as GlkElement } from './shared/base-Bm9Z714o.js';
+
+class GlkTabBar extends GlkElement {
+  static get observedAttributes() {
+    return ['static', 'floating'];
+  }
+
+  render() {
+    const nav = this.createElement('nav', ['glass-tab-bar']);
+    nav.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(nav);
+    this._nav = nav;
+
+    if (this.getBoolAttr('floating')) {
+      nav.classList.add('glass-tab-bar--floating');
+    }
+
+    if (this.getBoolAttr('static')) {
+      this._applyStatic();
+    }
+  }
+
+  onAttributeChanged(name) {
+    if (!this._nav) return;
+    if (name === 'static') {
+      this._applyStatic();
+    } else if (name === 'floating') {
+      this._nav.classList.toggle('glass-tab-bar--floating', this.getBoolAttr('floating'));
+    }
+  }
+
+  _applyStatic() {
+    this._nav.style.position = 'relative';
+    this._nav.style.borderRadius = '16px';
+  }
+
+  setupEvents() {
+    // Listen for tab selection events from child glk-tab-item elements
+    this._onTabSelect = (e) => {
+      // Deactivate all other tabs
+      const items = this.querySelectorAll('glk-tab-item');
+      items.forEach(item => {
+        if (item !== e.target) {
+          item.removeAttribute('active');
+        }
+      });
+      this.emit('glk-tab-change', { tab: e.target });
+    };
+    this.addEventListener('glk-tab-select', this._onTabSelect);
+  }
+
+  teardownEvents() {
+    this.removeEventListener('glk-tab-select', this._onTabSelect);
+  }
+}
+
+customElements.define('glk-tab-bar', GlkTabBar);
+
+export { GlkTabBar };

package/dist/components/glk-tab-dock.js

@@ -0,0 +1,52 @@
+import { G as GlkElement } from './shared/base-Bm9Z714o.js';
+
+class GlkTabDock extends GlkElement {
+  static get observedAttributes() {
+    return ['accessory-left', 'static'];
+  }
+
+  render() {
+    this._dock = this.createElement('div', ['glass-tab-bar-dock']);
+    if (this.getBoolAttr('accessory-left')) {
+      this._dock.classList.add('glass-tab-bar-dock--accessory-left');
+    }
+    this._dock.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(this._dock);
+
+    if (this.getBoolAttr('static')) {
+      this._applyStatic();
+    }
+  }
+
+  onAttributeChanged(name) {
+    if (!this._dock) return;
+    if (name === 'accessory-left') {
+      this._dock.classList.toggle(
+        'glass-tab-bar-dock--accessory-left',
+        this.getBoolAttr('accessory-left')
+      );
+    } else if (name === 'static') {
+      this._applyStatic();
+    }
+  }
+
+  _applyStatic() {
+    if (this.getBoolAttr('static')) {
+      this._dock.style.position = 'relative';
+      this._dock.style.left = 'auto';
+      this._dock.style.bottom = 'auto';
+      this._dock.style.transform = 'none';
+      this._dock.style.justifyContent = 'center';
+    } else {
+      this._dock.style.position = '';
+      this._dock.style.left = '';
+      this._dock.style.bottom = '';
+      this._dock.style.transform = '';
+      this._dock.style.justifyContent = '';
+    }
+  }
+}
+
+customElements.define('glk-tab-dock', GlkTabDock);
+
+export { GlkTabDock };