@jungherz-de/glasskit-elements 1.16.0 → 1.17.0

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.17.0-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>
 
@@ -66,7 +66,7 @@ It is the **app layer** of the GlassKit family — three layers, one design lang
 
 ```html
 <!-- 1. GlassKit CSS -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.16/glasskit.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.17/glasskit.min.css">
 
 <!-- 2. GlassKit Elements -->
 <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit-elements/dist/glasskit-elements.min.js"></script>
@@ -104,7 +104,7 @@ The per-component files leave `@jungherz-de/glasskit/glasskit-styles.js` as an e
 <!DOCTYPE html>
 <html data-theme="dark">
 <head>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.16/glasskit.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.17/glasskit.min.css">
   <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit-elements/dist/glasskit-elements.min.js"></script>
 </head>
 <body>
@@ -156,7 +156,7 @@ All form components support `name`, `value`, `disabled` and participate in nativ
 
 | Component | Description | Key Attributes |
 |---|---|---|
-| `<glk-input>` | Text input with label & hint | `label`, `type`, `placeholder`, `hint`, `error`, `required` |
+| `<glk-input>` | Text input with label & hint | `label`, `type`, `placeholder`, `hint`, `error`, `required`, `min`, `max`, `step`, `maxlength`, `pattern`, `autocomplete`, `inputmode` |
 | `<glk-textarea>` | Multi-line text input | `label`, `rows`, `placeholder` |
 | `<glk-select>` | Dropdown select | `label` (children: `<option>`) |
 | `<glk-search>` | Search input with icon | `placeholder` |
@@ -164,7 +164,7 @@ All form components support `name`, `value`, `disabled` and participate in nativ
 | `<glk-checkbox>` | Checkbox | `label`, `checked`, `disabled` |
 | `<glk-radio>` | Radio button | `label`, `name`, `value`, `checked` |
 | `<glk-range>` | Range slider | `label`, `min`, `max`, `value`, `step` |
-| `<glk-segmented>` | Small exclusive choice as one control; form-associated | `options` (JSON), `value`, `full`, `label`, `name` |
+| `<glk-segmented>` | Small exclusive choice as one control; form-associated | `options` (JSON), `value`, `full`, `overflow` (scroll, wrap), `label`, `name` |
 | `<glk-calendar>` | One month with a day to pick; keyboard navigation, `Intl` names; form-associated | `month`, `value`, `today`, `min`, `max`, `marks`, `locale`, `week-start`, `label`, `name` |
 | `<glk-image-picker>` | One image with preview, resized on the client, EXIF rotation applied; not form-associated | `src`, `label`, `hint`, `round`, `max`, `type`, `quality`, `accept` |
 

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-date-strip.js

@@ -1,5 +1,6 @@
 import { GlkElement } from './base.js';
 import { f as formatters, r as resolveLocale, b as parseJsonObject, p as parseIso, i as isoDate, c as addDays, w as weekdayShort, d as isTone } from './shared/dates-CNWaJf09.js';
+import { r as revealCentered } from './shared/reveal-CjjzoxTa.js';
 import '@jungherz-de/glasskit/glasskit-styles.js';
 
 // A row of day chips that scrolls sideways — a booking horizon, the days
@@ -85,24 +86,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/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-input.js

@@ -1,9 +1,15 @@
 import { GlkFormElement } from './base.js';
 import '@jungherz-de/glasskit/glasskit-styles.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() {
@@ -29,6 +35,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());
@@ -98,9 +105,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/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-segmented.js

@@ -1,20 +1,32 @@
 import { GlkFormElement } from './base.js';
+import { r as revealCentered } from './shared/reveal-CjjzoxTa.js';
 import '@jungherz-de/glasskit/glasskit-styles.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 {
@@ -26,14 +38,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();
   }
 
@@ -59,10 +71,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() {
@@ -80,11 +102,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) {
@@ -92,7 +119,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;
     }
   }
@@ -112,6 +140,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/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/components/shared/reveal-CjjzoxTa.js

@@ -0,0 +1,21 @@
+// 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.
+
+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;
+}
+
+export { revealCentered as r };