@jungherz-de/glasskit-elements 1.6.2 → 1.8.0

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

@@ -0,0 +1,93 @@
+import { G as GlkElement } from './shared/base-Bm9Z714o.js';
+
+class GlkTabItem extends GlkElement {
+  static get observedAttributes() {
+    return ['label', 'active', 'badge'];
+  }
+
+  render() {
+    this._btn = this.createElement('button', ['glass-tab-bar__item']);
+    if (this.getBoolAttr('active')) this._btn.classList.add('is-active');
+
+    // Icon — clone SVG from light DOM into shadow DOM so GlassKit CSS applies
+    this._iconEl = this.createElement('span', ['glass-tab-bar__icon']);
+
+    // Label
+    this._labelEl = this.createElement('span', ['glass-tab-bar__label']);
+    this._labelEl.textContent = this.getAttribute('label') || '';
+
+    // Badge inside icon container (position: absolute relative to icon)
+    const badge = this.getAttribute('badge');
+    if (badge) {
+      this._badgeEl = this.createElement('span', ['glass-tab-bar__badge']);
+      this._badgeEl.textContent = badge;
+      this._iconEl.appendChild(this._badgeEl);
+    }
+
+    this._btn.appendChild(this._iconEl);
+    this._btn.appendChild(this._labelEl);
+
+    this._wrapper.appendChild(this._btn);
+
+    // Defer icon cloning — children may not be parsed yet
+    requestAnimationFrame(() => this._cloneIcon());
+  }
+
+  _cloneIcon() {
+    const svg = this.querySelector('svg');
+    if (svg) {
+      const clone = svg.cloneNode(true);
+      // Remove inline attributes that would override GlassKit styles
+      clone.removeAttribute('width');
+      clone.removeAttribute('height');
+      clone.removeAttribute('stroke');
+      clone.removeAttribute('stroke-width');
+      clone.removeAttribute('stroke-linecap');
+      clone.removeAttribute('stroke-linejoin');
+      clone.removeAttribute('fill');
+      this._iconEl.insertBefore(clone, this._iconEl.firstChild);
+    }
+  }
+
+  setupEvents() {
+    this._onClick = () => {
+      this.setAttribute('active', '');
+      this.emit('glk-tab-select');
+    };
+    this._btn.addEventListener('click', this._onClick);
+  }
+
+  teardownEvents() {
+    this._btn?.removeEventListener('click', this._onClick);
+  }
+
+  onAttributeChanged(name) {
+    if (!this._btn) return;
+    switch (name) {
+      case 'active':
+        this._btn.classList.toggle('is-active', this.getBoolAttr('active'));
+        break;
+      case 'label':
+        this._labelEl.textContent = this.getAttribute('label') || '';
+        break;
+      case 'badge': {
+        const badge = this.getAttribute('badge');
+        if (badge) {
+          if (!this._badgeEl) {
+            this._badgeEl = this.createElement('span', ['glass-tab-bar__badge']);
+            this._iconEl.appendChild(this._badgeEl);
+          }
+          this._badgeEl.textContent = badge;
+        } else if (this._badgeEl) {
+          this._badgeEl.remove();
+          this._badgeEl = null;
+        }
+        break;
+      }
+    }
+  }
+}
+
+customElements.define('glk-tab-item', GlkTabItem);
+
+export { GlkTabItem };

package/dist/components/glk-textarea.js

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

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

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

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