@jungherz-de/glasskit-elements 1.16.0 → 1.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jungherz-de/glasskit-elements",
-  "version": "1.16.0",
+  "version": "1.17.0",
   "description": "Vanilla JavaScript Web Components wrapping the GlassKit CSS glassmorphism library",
   "license": "MIT",
   "homepage": "https://glasskit-elements.jungherz.com",
@@ -45,10 +45,10 @@
     "vanilla-js"
   ],
   "peerDependencies": {
-    "@jungherz-de/glasskit": ">=1.16.0"
+    "@jungherz-de/glasskit": ">=1.17.0"
   },
   "devDependencies": {
-    "@jungherz-de/glasskit": "^1.16.0",
+    "@jungherz-de/glasskit": "^1.17.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-terser": "^0.4.0",
     "rollup": "^4.0.0"

package/src/base.js

@@ -181,6 +181,24 @@ export 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/src/components/containers/glk-accordion-item.js

@@ -13,7 +13,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);
 
@@ -41,18 +42,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/src/components/containers/glk-list-item.js

@@ -48,7 +48,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') || '';
@@ -114,11 +115,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') || '';
@@ -162,6 +163,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/src/components/content/glk-empty.js

@@ -24,11 +24,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;
@@ -36,10 +37,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/src/components/feedback/glk-modal.js

@@ -15,7 +15,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
@@ -84,14 +85,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;
     }
   }
@@ -99,6 +100,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/src/components/feedback/glk-sheet.js

@@ -37,12 +37,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);
@@ -112,7 +114,7 @@ class GlkSheet extends GlkElement {
     document.removeEventListener('keydown', this._onKeydown);
   }
 
-  onAttributeChanged(name) {
+  onAttributeChanged(name, _old, value) {
     if (!this._overlay) return;
     switch (name) {
       case 'open':
@@ -121,13 +123,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/src/components/forms/glk-input.js

@@ -1,8 +1,14 @@
 import { GlkFormElement } from '../../base.js';
 
+// Attributes that belong to the inner <input> and are handed down unchanged:
+// the picker's range and step, the typing limits, the pattern, autofill and
+// the on-screen keyboard. Absent on the host means absent inside (since
+// 1.17.0 — before, a date field with min still offered every past day).
+const FORWARDED = ['min', 'max', 'step', 'minlength', 'maxlength', 'pattern', 'autocomplete', 'inputmode'];
+
 class GlkInput extends GlkFormElement {
   static get observedAttributes() {
-    return ['label', 'type', 'placeholder', 'error', 'hint', 'disabled', 'name', 'value', 'required'];
+    return ['label', 'type', 'placeholder', 'error', 'hint', 'disabled', 'name', 'value', 'required', ...FORWARDED];
   }
 
   render() {
@@ -28,6 +34,7 @@ class GlkInput extends GlkFormElement {
 
     if (this.getBoolAttr('disabled')) this._input.disabled = true;
     if (this.getBoolAttr('required')) this._input.required = true;
+    for (const attr of FORWARDED) this._forward(attr);
 
     // Hint
     this._hintEl = this.createElement('span', this._computeHintClasses());
@@ -97,9 +104,17 @@ class GlkInput extends GlkFormElement {
       case 'required':
         this._input.required = this.getBoolAttr('required');
         break;
+      default:
+        if (FORWARDED.includes(name)) this._forward(name);
     }
   }
 
+  _forward(attr) {
+    const value = this.getAttribute(attr);
+    if (value === null) this._input.removeAttribute(attr);
+    else this._input.setAttribute(attr, value);
+  }
+
   _computeInputClasses() {
     const classes = ['glass-input'];
     if (this.getBoolAttr('error')) classes.push('glass-input--error');

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

@@ -1,19 +1,31 @@
 import { GlkFormElement } from '../../base.js';
+import { revealCentered } from '../../reveal.js';
 
 // One button per option, the chosen one marked aria-pressed="true" — GlassKit
 // styles exactly that attribute. Came back from EhrenPfoten in 1.15.0.
 //
 // Attributes: options (JSON [{value,label,tone?,disabled?}]), value, full,
-//             label (aria-label of the group), name (form field name)
-// Properties: value, options (array or JSON text), full, label
+//             overflow ("scroll" | "wrap": what happens when the options
+//             do not fit — without it the row stays one line and runs past
+//             the edge), label (aria-label of the group), name (form field)
+// Properties: value, options (array or JSON text), full, overflow, label
 // Event:      glk-change { value } — only on a change made by the user
 // Part:       group
 //
 // Form-associated: a surrounding <form> receives name=value, reset restores
 // the initial value. A value change only re-sets aria-pressed, never rebuilds,
 // so focus stays on the button that was pressed.
+//
+// overflow="scroll" keeps the chosen option in view: it is centred in the
+// row after the first layout, on every value change and when the row's width
+// changes, through the row's own scrolling, so the page never moves (since
+// 1.17.0). The attribute is not called "scroll": that is a method of every
+// element, and a framework that sets a property whenever the element has one
+// (hybrids, Vue, React 19) would overwrite the method instead of setting the
+// attribute.
 
 const TONES = ['success', 'warning', 'error'];
+const OVERFLOWS = ['scroll', 'wrap'];
 
 function parseList(json) {
   try {
@@ -25,14 +37,14 @@ function parseList(json) {
 }
 
 class GlkSegmented extends GlkFormElement {
-  static get observedAttributes() { return ['options', 'value', 'full', 'label']; }
+  static get observedAttributes() { return ['options', 'value', 'full', 'overflow', 'label']; }
 
   render() {
     this._group = this.createElement('div', ['glass-segmented'], { role: 'group', part: 'group' });
     this._wrapper.appendChild(this._group);
     this._initialValue = this.value;
     this._build();
-    this._applyFull();
+    this._applyLayout();
     this._applyLabel();
   }
 
@@ -58,10 +70,20 @@ class GlkSegmented extends GlkFormElement {
       button.setAttribute('aria-pressed', String(button.dataset.value === value));
     }
     this.setFormValue(value);
+    this._reveal(this._revealedAt ? 'smooth' : 'instant');
   }
 
-  _applyFull() {
+  _applyLayout() {
+    const overflow = this.overflow;
     this._group.classList.toggle('glass-segmented--full', this.getBoolAttr('full'));
+    for (const mode of OVERFLOWS) this._group.classList.toggle(`glass-segmented--${mode}`, overflow === mode);
+    this._reveal('instant');
+  }
+
+  _reveal(behavior) {
+    if (this.overflow !== 'scroll') return;
+    const pressed = this._group.querySelector('[aria-pressed="true"]');
+    if (revealCentered(this._group, pressed, behavior === 'smooth')) this._revealedAt = this._group.clientWidth;
   }
 
   _applyLabel() {
@@ -79,11 +101,16 @@ class GlkSegmented extends GlkFormElement {
       this.value = value;
       this.emit('glk-change', { value });
     };
+    this._onResize = () => { if (this._group.clientWidth !== this._revealedAt) this._reveal('instant'); };
     this._group.addEventListener('click', this._onClick);
+    this._resizeObserver = new ResizeObserver(this._onResize);
+    this._resizeObserver.observe(this._group);
   }
 
   teardownEvents() {
     this._group?.removeEventListener('click', this._onClick);
+    this._resizeObserver?.disconnect();
+    this._resizeObserver = null;
   }
 
   onAttributeChanged(name) {
@@ -91,7 +118,8 @@ class GlkSegmented extends GlkFormElement {
     switch (name) {
       case 'value': this._syncValue(); break;
       case 'options': this._build(); break;
-      case 'full': this._applyFull(); break;
+      case 'full':
+      case 'overflow': this._applyLayout(); break;
       case 'label': this._applyLabel(); break;
     }
   }
@@ -111,6 +139,15 @@ class GlkSegmented extends GlkFormElement {
   get full() { return this.getBoolAttr('full'); }
   set full(v) { this.setBoolAttr('full', v); }
 
+  get overflow() {
+    const v = this.getAttribute('overflow');
+    return OVERFLOWS.includes(v) ? v : '';
+  }
+  set overflow(v) {
+    if (v) this.setAttribute('overflow', String(v));
+    else this.removeAttribute('overflow');
+  }
+
   get label() { return this.getAttribute('label') || ''; }
   set label(v) {
     if (v) this.setAttribute('label', v);

package/src/components/navigation/glk-date-strip.js

@@ -1,5 +1,6 @@
 import { GlkElement } from '../../base.js';
 import { isoDate, parseIso, addDays, parseJsonObject, resolveLocale, formatters, weekdayShort, isTone } from '../../dates.js';
+import { revealCentered } from '../../reveal.js';
 
 // A row of day chips that scrolls sideways — a booking horizon, the days
 // around today. Came back from EhrenPfoten in 1.16.0.
@@ -84,24 +85,15 @@ class GlkDateStrip extends GlkElement {
     for (const chip of this._chips()) chip.tabIndex = chip === target ? 0 : -1;
   }
 
-  // Scroll the chosen chip to the middle of the strip. Computed from client
-  // rects and applied to the strip's own scrollLeft, so the page never moves —
-  // scrollIntoView would scroll every ancestor. Before the first layout the
-  // strip has no width; the ResizeObserver in setupEvents centres then, and
-  // again whenever the strip's width changes — a parent that upgrades later
-  // and adds its padding, a window resize, a strip that starts out hidden. A
-  // value change glides unless the user asked for reduced motion; a size
-  // change snaps, so a settling layout never animates.
+  // Centre the chosen chip in the strip (see reveal.js). Before the first
+  // layout the strip has no width; the ResizeObserver in setupEvents centres
+  // then, and again whenever the strip's width changes — a parent that
+  // upgrades later and adds its padding, a window resize, a strip that
+  // starts out hidden. A value change glides; a size change snaps, so a
+  // settling layout never animates.
   _reveal(behavior = 'instant') {
     const chip = this._strip.querySelector('[aria-pressed="true"]');
-    const width = this._strip.clientWidth;
-    if (!chip || !width) return;
-    const strip = this._strip.getBoundingClientRect();
-    const box = chip.getBoundingClientRect();
-    const left = this._strip.scrollLeft + (box.left - strip.left) - (strip.width - box.width) / 2;
-    const smooth = behavior === 'smooth' && !matchMedia('(prefers-reduced-motion: reduce)').matches;
-    this._strip.scrollTo({ left: Math.max(0, left), behavior: smooth ? 'smooth' : 'instant' });
-    this._revealedAt = width;
+    if (revealCentered(this._strip, chip, behavior === 'smooth')) this._revealedAt = this._strip.clientWidth;
   }
 
   _applyLabel() {

package/src/reveal.js

@@ -0,0 +1,19 @@
+// Scroll an item to the middle of its scrolling row — shared by
+// <glk-date-strip> and <glk-segmented overflow="scroll">. Computed from
+// client rects and applied to the row alone, where scrollIntoView would move
+// every scrolling ancestor, the page included. A relative scrollBy works in
+// both writing directions: scrollLeft runs negative in RTL, the distance on
+// screen does not. Returns false while the row has no width — before the
+// first layout, or hidden — so the caller can try again from a
+// ResizeObserver. Pass smooth for a reveal that follows a value change, not
+// for one caused by layout; reduced motion wins over it.
+
+export function revealCentered(scroller, item, smooth) {
+  if (!item || !scroller.clientWidth) return false;
+  const port = scroller.getBoundingClientRect();
+  const box = item.getBoundingClientRect();
+  const delta = box.left + box.width / 2 - (port.left + scroller.clientLeft + scroller.clientWidth / 2);
+  const glide = smooth && !matchMedia('(prefers-reduced-motion: reduce)').matches;
+  scroller.scrollBy({ left: delta, behavior: glide ? 'smooth' : 'instant' });
+  return true;
+}