@jungherz-de/glasskit-elements 1.16.1 → 1.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jungherz-de/glasskit-elements",
-  "version": "1.16.1",
+  "version": "1.18.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.18.0"
   },
   "devDependencies": {
-    "@jungherz-de/glasskit": "^1.16.0",
+    "@jungherz-de/glasskit": "^1.18.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-terser": "^0.4.0",
     "rollup": "^4.0.0"

package/src/components/content/glk-badge.js

@@ -1,6 +1,8 @@
 import { GlkElement } from '../../base.js';
 
-const VARIANTS = ['primary', 'success', 'error'];
+// warning since 1.18.0 (needs GlassKit 1.18.0). Any other value falls back to
+// the neutral badge, as an unknown value of an enumerated attribute does.
+const VARIANTS = ['primary', 'success', 'warning', 'error'];
 
 class GlkBadge extends GlkElement {
   static get displayInline() { return true; }

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;
+}