@jungherz-de/glasskit-elements 1.16.0 → 1.16.1

package/README.md

@@ -5,7 +5,7 @@
   <a href="#"><img src="https://img.shields.io/badge/vanilla_JS-no_dependencies-44cc11?style=flat-square" alt="Vanilla JS"></a>
   <a href="#"><img src="https://img.shields.io/badge/components-33-7ec8e3?style=flat-square" alt="33 Components"></a>
   <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue?style=flat-square" alt="MIT License"></a>
-  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.16.0-lightgrey?style=flat-square" alt="Changelog"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.16.1-lightgrey?style=flat-square" alt="Changelog"></a>
   <a href="https://www.npmjs.com/package/@jungherz-de/glasskit-elements"><img src="https://img.shields.io/badge/npm-%40jungherz--de%2Fglasskit--elements-cb3837?style=flat-square&logo=npm" alt="npm"></a>
 </p>
 

package/dist/components/base.js

@@ -181,6 +181,24 @@ class GlkElement extends HTMLElement {
 
   // ── Utility Methods ──
 
+  /**
+   * For elements whose heading arrives as `title`. That is also the global
+   * HTML attribute, and a title on the host shows as a browser tooltip — the
+   * sheet's heading floating over its form. So the value is read into
+   * this._title and the attribute is taken off the host; a later
+   * setAttribute('title') comes through attributeChangedCallback, is taken
+   * the same way and removed again, and the element's `title` accessor
+   * answers from this._title. The removal fires the callback with null,
+   * which is ignored here — only an empty string clears the heading.
+   * Returns whether a value was taken.
+   */
+  takeTitle(value = this.getAttribute('title')) {
+    if (value === null) return false;
+    this._title = value;
+    this.removeAttribute('title');
+    return true;
+  }
+
   getBoolAttr(name) {
     return this.hasAttribute(name);
   }

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

@@ -14,7 +14,8 @@ class GlkAccordionItem extends GlkElement {
 
     // Trigger button
     this._trigger = this.createElement('button', ['glass-accordion__trigger']);
-    this._triggerText = document.createTextNode(this.getAttribute('title') || '');
+    this.takeTitle();
+    this._triggerText = document.createTextNode(this._title || '');
     this._trigger.appendChild(this._triggerText);
     this._trigger.insertAdjacentHTML('beforeend', CHEVRON_SVG);
 
@@ -42,18 +43,29 @@ class GlkAccordionItem extends GlkElement {
     this._trigger?.removeEventListener('click', this._onClick);
   }
 
-  onAttributeChanged(name) {
+  onAttributeChanged(name, _old, value) {
     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') || '';
+        if (this.takeTitle(value)) this._applyTitle();
         break;
     }
   }
 
+  _applyTitle() {
+    if (this._triggerText) this._triggerText.textContent = this._title || '';
+  }
+
+  // `title` is the heading, never a tooltip — see GlkElement.takeTitle().
+  get title() { return this._title ?? ''; }
+  set title(v) {
+    this._title = v == null ? '' : String(v);
+    this._applyTitle();
+  }
+
   get open() { return this.getBoolAttr('open'); }
   set open(v) { this.setBoolAttr('open', v); }
 }

package/dist/components/glk-empty.js

@@ -25,11 +25,12 @@ class GlkEmpty extends GlkElement {
     action.appendChild(this.createElement('slot', [], { name: 'action' }));
     root.append(icon, this._titleEl, this._textEl, action);
     this._wrapper.appendChild(root);
+    this.takeTitle();
     this._update();
   }
 
   _update() {
-    const title = this.getAttribute('title') || '';
+    const title = this._title || '';
     const text = this.getAttribute('text') || '';
     this._titleEl.textContent = title;
     this._titleEl.hidden = !title;
@@ -37,10 +38,22 @@ class GlkEmpty extends GlkElement {
     this._textEl.hidden = !text;
   }
 
-  onAttributeChanged() {
+  onAttributeChanged(name, _old, value) {
+    if (name === 'title' && !this.takeTitle(value)) return;
     if (this._titleEl) this._update();
   }
 
+  _applyTitle() {
+    if (this._titleEl) this._update();
+  }
+
+  // `title` is the heading, never a tooltip — see GlkElement.takeTitle().
+  get title() { return this._title ?? ''; }
+  set title(v) {
+    this._title = v == null ? '' : String(v);
+    this._applyTitle();
+  }
+
   get text() { return this.getAttribute('text') || ''; }
   set text(v) {
     if (v) this.setAttribute('text', v);

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

@@ -49,7 +49,8 @@ class GlkListItem extends GlkElement {
     // Content — title + optional subtitle.
     this._content = this.createElement('div', ['glass-list__content']);
     this._titleEl = this.createElement('div', ['glass-list__title']);
-    this._titleEl.textContent = this.getAttribute('title') || '';
+    this.takeTitle();
+    this._titleEl.textContent = this._title || '';
     this._subtitleEl = this.createElement('div', ['glass-list__subtitle']);
     if (this.getBoolAttr('wrap')) this._subtitleEl.classList.add('glass-list__subtitle--wrap');
     const initialSubtitle = this.getAttribute('subtitle') || '';
@@ -115,11 +116,11 @@ class GlkListItem extends GlkElement {
     this._item?.removeEventListener('click', this._onClick);
   }
 
-  onAttributeChanged(name) {
+  onAttributeChanged(name, _old, value) {
     if (!this._item) return;
     switch (name) {
       case 'title':
-        this._titleEl.textContent = this.getAttribute('title') || '';
+        if (this.takeTitle(value)) this._applyTitle();
         break;
       case 'subtitle': {
         const value = this.getAttribute('subtitle') || '';
@@ -159,6 +160,17 @@ class GlkListItem extends GlkElement {
     }
   }
 
+  _applyTitle() {
+    if (this._titleEl) this._titleEl.textContent = this._title || '';
+  }
+
+  // `title` is the heading, never a tooltip — see GlkElement.takeTitle().
+  get title() { return this._title ?? ''; }
+  set title(v) {
+    this._title = v == null ? '' : String(v);
+    this._applyTitle();
+  }
+
   get interactive() { return this.getBoolAttr('interactive'); }
   set interactive(v) { this.setBoolAttr('interactive', v); }
 

package/dist/components/glk-modal.js

@@ -16,7 +16,8 @@ class GlkModal extends GlkElement {
     // Header
     const header = this.createElement('div', ['glass-modal__header'], { part: 'header' });
     this._titleEl = this.createElement('h2', ['glass-modal__title']);
-    this._titleEl.textContent = this.getAttribute('title') || '';
+    this.takeTitle();
+    this._applyTitle();
     header.appendChild(this._titleEl);
 
     // Body
@@ -85,14 +86,14 @@ class GlkModal extends GlkElement {
     document.removeEventListener('keydown', this._onKeydown);
   }
 
-  onAttributeChanged(name) {
+  onAttributeChanged(name, _old, value) {
     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') || '';
+        if (this.takeTitle(value)) this._applyTitle();
         break;
     }
   }
@@ -100,6 +101,17 @@ class GlkModal extends GlkElement {
   show() { this.setAttribute('open', ''); }
   close() { this.removeAttribute('open'); }
 
+  _applyTitle() {
+    if (this._titleEl) this._titleEl.textContent = this._title || '';
+  }
+
+  // `title` is the heading, never a tooltip — see GlkElement.takeTitle().
+  get title() { return this._title ?? ''; }
+  set title(v) {
+    this._title = v == null ? '' : String(v);
+    this._applyTitle();
+  }
+
   get open() { return this.getBoolAttr('open'); }
   set open(v) { this.setBoolAttr('open', v); }
 }

package/dist/components/glk-sheet.js

@@ -38,12 +38,14 @@ class GlkSheet extends GlkElement {
     this._panel.append(this._titleEl, body, actions);
     this._overlay.appendChild(this._panel);
     this._wrapper.appendChild(this._overlay);
+    this.takeTitle();
     this._applyTitle();
     this._applyMode();
   }
 
   _applyTitle() {
-    const title = this.getAttribute('title') || '';
+    if (!this._titleEl) return;
+    const title = this._title || '';
     this._titleEl.textContent = title;
     this._titleEl.hidden = !title;
     if (title) this._panel.setAttribute('aria-label', title);
@@ -113,7 +115,7 @@ class GlkSheet extends GlkElement {
     document.removeEventListener('keydown', this._onKeydown);
   }
 
-  onAttributeChanged(name) {
+  onAttributeChanged(name, _old, value) {
     if (!this._overlay) return;
     switch (name) {
       case 'open':
@@ -122,13 +124,20 @@ class GlkSheet extends GlkElement {
         else this._hide();
         break;
       case 'inline': this._applyMode(); break;
-      case 'title': this._applyTitle(); break;
+      case 'title': if (this.takeTitle(value)) this._applyTitle(); break;
     }
   }
 
   show() { this.setAttribute('open', ''); }
   close() { this.removeAttribute('open'); }
 
+  // `title` is the heading, never a tooltip — see GlkElement.takeTitle().
+  get title() { return this._title ?? ''; }
+  set title(v) {
+    this._title = v == null ? '' : String(v);
+    this._applyTitle();
+  }
+
   get open() { return this.getBoolAttr('open'); }
   set open(v) { this.setBoolAttr('open', v); }
 

package/dist/glasskit-elements.esm.js

@@ -201,6 +201,24 @@ class GlkElement extends HTMLElement {
 
   // ── Utility Methods ──
 
+  /**
+   * For elements whose heading arrives as `title`. That is also the global
+   * HTML attribute, and a title on the host shows as a browser tooltip — the
+   * sheet's heading floating over its form. So the value is read into
+   * this._title and the attribute is taken off the host; a later
+   * setAttribute('title') comes through attributeChangedCallback, is taken
+   * the same way and removed again, and the element's `title` accessor
+   * answers from this._title. The removal fires the callback with null,
+   * which is ignored here — only an empty string clears the heading.
+   * Returns whether a value was taken.
+   */
+  takeTitle(value = this.getAttribute('title')) {
+    if (value === null) return false;
+    this._title = value;
+    this.removeAttribute('title');
+    return true;
+  }
+
   getBoolAttr(name) {
     return this.hasAttribute(name);
   }
@@ -1201,11 +1219,12 @@ class GlkEmpty extends GlkElement {
     action.appendChild(this.createElement('slot', [], { name: 'action' }));
     root.append(icon, this._titleEl, this._textEl, action);
     this._wrapper.appendChild(root);
+    this.takeTitle();
     this._update();
   }
 
   _update() {
-    const title = this.getAttribute('title') || '';
+    const title = this._title || '';
     const text = this.getAttribute('text') || '';
     this._titleEl.textContent = title;
     this._titleEl.hidden = !title;
@@ -1213,10 +1232,22 @@ class GlkEmpty extends GlkElement {
     this._textEl.hidden = !text;
   }
 
-  onAttributeChanged() {
+  onAttributeChanged(name, _old, value) {
+    if (name === 'title' && !this.takeTitle(value)) return;
+    if (this._titleEl) this._update();
+  }
+
+  _applyTitle() {
     if (this._titleEl) this._update();
   }
 
+  // `title` is the heading, never a tooltip — see GlkElement.takeTitle().
+  get title() { return this._title ?? ''; }
+  set title(v) {
+    this._title = v == null ? '' : String(v);
+    this._applyTitle();
+  }
+
   get text() { return this.getAttribute('text') || ''; }
   set text(v) {
     if (v) this.setAttribute('text', v);
@@ -2898,7 +2929,8 @@ class GlkModal extends GlkElement {
     // Header
     const header = this.createElement('div', ['glass-modal__header'], { part: 'header' });
     this._titleEl = this.createElement('h2', ['glass-modal__title']);
-    this._titleEl.textContent = this.getAttribute('title') || '';
+    this.takeTitle();
+    this._applyTitle();
     header.appendChild(this._titleEl);
 
     // Body
@@ -2967,14 +2999,14 @@ class GlkModal extends GlkElement {
     document.removeEventListener('keydown', this._onKeydown);
   }
 
-  onAttributeChanged(name) {
+  onAttributeChanged(name, _old, value) {
     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') || '';
+        if (this.takeTitle(value)) this._applyTitle();
         break;
     }
   }
@@ -2982,6 +3014,17 @@ class GlkModal extends GlkElement {
   show() { this.setAttribute('open', ''); }
   close() { this.removeAttribute('open'); }
 
+  _applyTitle() {
+    if (this._titleEl) this._titleEl.textContent = this._title || '';
+  }
+
+  // `title` is the heading, never a tooltip — see GlkElement.takeTitle().
+  get title() { return this._title ?? ''; }
+  set title(v) {
+    this._title = v == null ? '' : String(v);
+    this._applyTitle();
+  }
+
   get open() { return this.getBoolAttr('open'); }
   set open(v) { this.setBoolAttr('open', v); }
 }
@@ -3233,12 +3276,14 @@ class GlkSheet extends GlkElement {
     this._panel.append(this._titleEl, body, actions);
     this._overlay.appendChild(this._panel);
     this._wrapper.appendChild(this._overlay);
+    this.takeTitle();
     this._applyTitle();
     this._applyMode();
   }
 
   _applyTitle() {
-    const title = this.getAttribute('title') || '';
+    if (!this._titleEl) return;
+    const title = this._title || '';
     this._titleEl.textContent = title;
     this._titleEl.hidden = !title;
     if (title) this._panel.setAttribute('aria-label', title);
@@ -3308,7 +3353,7 @@ class GlkSheet extends GlkElement {
     document.removeEventListener('keydown', this._onKeydown);
   }
 
-  onAttributeChanged(name) {
+  onAttributeChanged(name, _old, value) {
     if (!this._overlay) return;
     switch (name) {
       case 'open':
@@ -3317,13 +3362,20 @@ class GlkSheet extends GlkElement {
         else this._hide();
         break;
       case 'inline': this._applyMode(); break;
-      case 'title': this._applyTitle(); break;
+      case 'title': if (this.takeTitle(value)) this._applyTitle(); break;
     }
   }
 
   show() { this.setAttribute('open', ''); }
   close() { this.removeAttribute('open'); }
 
+  // `title` is the heading, never a tooltip — see GlkElement.takeTitle().
+  get title() { return this._title ?? ''; }
+  set title(v) {
+    this._title = v == null ? '' : String(v);
+    this._applyTitle();
+  }
+
   get open() { return this.getBoolAttr('open'); }
   set open(v) { this.setBoolAttr('open', v); }
 
@@ -3356,7 +3408,8 @@ class GlkAccordionItem extends GlkElement {
 
     // Trigger button
     this._trigger = this.createElement('button', ['glass-accordion__trigger']);
-    this._triggerText = document.createTextNode(this.getAttribute('title') || '');
+    this.takeTitle();
+    this._triggerText = document.createTextNode(this._title || '');
     this._trigger.appendChild(this._triggerText);
     this._trigger.insertAdjacentHTML('beforeend', CHEVRON_SVG);
 
@@ -3384,18 +3437,29 @@ class GlkAccordionItem extends GlkElement {
     this._trigger?.removeEventListener('click', this._onClick);
   }
 
-  onAttributeChanged(name) {
+  onAttributeChanged(name, _old, value) {
     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') || '';
+        if (this.takeTitle(value)) this._applyTitle();
         break;
     }
   }
 
+  _applyTitle() {
+    if (this._triggerText) this._triggerText.textContent = this._title || '';
+  }
+
+  // `title` is the heading, never a tooltip — see GlkElement.takeTitle().
+  get title() { return this._title ?? ''; }
+  set title(v) {
+    this._title = v == null ? '' : String(v);
+    this._applyTitle();
+  }
+
   get open() { return this.getBoolAttr('open'); }
   set open(v) { this.setBoolAttr('open', v); }
 }
@@ -3522,7 +3586,8 @@ class GlkListItem extends GlkElement {
     // Content — title + optional subtitle.
     this._content = this.createElement('div', ['glass-list__content']);
     this._titleEl = this.createElement('div', ['glass-list__title']);
-    this._titleEl.textContent = this.getAttribute('title') || '';
+    this.takeTitle();
+    this._titleEl.textContent = this._title || '';
     this._subtitleEl = this.createElement('div', ['glass-list__subtitle']);
     if (this.getBoolAttr('wrap')) this._subtitleEl.classList.add('glass-list__subtitle--wrap');
     const initialSubtitle = this.getAttribute('subtitle') || '';
@@ -3588,11 +3653,11 @@ class GlkListItem extends GlkElement {
     this._item?.removeEventListener('click', this._onClick);
   }
 
-  onAttributeChanged(name) {
+  onAttributeChanged(name, _old, value) {
     if (!this._item) return;
     switch (name) {
       case 'title':
-        this._titleEl.textContent = this.getAttribute('title') || '';
+        if (this.takeTitle(value)) this._applyTitle();
         break;
       case 'subtitle': {
         const value = this.getAttribute('subtitle') || '';
@@ -3632,6 +3697,17 @@ class GlkListItem extends GlkElement {
     }
   }
 
+  _applyTitle() {
+    if (this._titleEl) this._titleEl.textContent = this._title || '';
+  }
+
+  // `title` is the heading, never a tooltip — see GlkElement.takeTitle().
+  get title() { return this._title ?? ''; }
+  set title(v) {
+    this._title = v == null ? '' : String(v);
+    this._applyTitle();
+  }
+
   get interactive() { return this.getBoolAttr('interactive'); }
   set interactive(v) { this.setBoolAttr('interactive', v); }