@jungherz-de/glasskit-elements 1.21.2 → 1.22.0

package/package.json

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

package/src/base.js

@@ -225,6 +225,9 @@ export class GlkElement extends HTMLElement {
 
   connectedCallback() {
     if (!this._initialized) {
+      // Before _initialized: setters that set attributes must not reach
+      // onAttributeChanged yet — render() reads the attributes anyway.
+      this._upgradeProperties();
       this._initialized = true;
 
       // Create theme wrapper (display:contents makes it layout-transparent)
@@ -259,6 +262,30 @@ export class GlkElement extends HTMLElement {
     }
   }
 
+  /**
+   * A property set on the element before its class was defined — markup a
+   * framework fills before the bundle has loaded — lands on the instance
+   * and hides the class's accessor: the setter never ran, and the value was
+   * lost (a glk-select kept its first option, a glk-progress stayed at 0).
+   * Such a value is taken off the instance and set again through the
+   * setter, which keeps what it cannot apply before render().
+   */
+  _upgradeProperties() {
+    for (const key of Object.keys(this)) {
+      let proto = Object.getPrototypeOf(this);
+      let setter = null;
+      while (proto && proto !== HTMLElement.prototype) {
+        const desc = Object.getOwnPropertyDescriptor(proto, key);
+        if (desc) { setter = desc.set; break; }
+        proto = Object.getPrototypeOf(proto);
+      }
+      if (!setter) continue;
+      const value = this[key];
+      delete this[key];
+      this[key] = value;
+    }
+  }
+
   disconnectedCallback() {
     instances.delete(this);
     this._lightDomObserver?.disconnect();

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

@@ -92,11 +92,12 @@ class GlkCheckbox extends GlkFormElement {
     this._syncFormValue();
   }
 
-  get checked() { return this._input?.checked ?? false; }
+  // Before render() the attribute carries the state: render() reads it.
+  get checked() { return this._input ? this._input.checked : this.getBoolAttr('checked'); }
   set checked(v) {
     if (this._input) this._input.checked = v;
     this.setBoolAttr('checked', v);
-    this._syncFormValue();
+    if (this._input) this._syncFormValue();
   }
 
   get disabled() { return this.getBoolAttr('disabled'); }

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

@@ -6,11 +6,26 @@ import { GlkFormElement } from '../../base.js';
 // 1.17.0 — before, a date field with min still offered every past day).
 const FORWARDED = ['min', 'max', 'step', 'minlength', 'maxlength', 'pattern', 'autocomplete', 'inputmode'];
 
+// Prefix and suffix (since 1.22.0): two slots inside the field's box, on
+// GlassKit's .glass-input-wrap. An affix shows only while something is
+// slotted into it, and its width is measured, so the text keeps clear of a
+// unit of any length. GlassKit lets clicks through an affix to the field;
+// slotted elements take them here instead — a button or a link inside
+// works — and a click on slotted text or an icon still lands in the field,
+// because the shadow root delegates focus to it.
+const affixSheet = new CSSStyleSheet();
+affixSheet.replaceSync(`
+  .glass-input-wrap__prefix ::slotted(*),
+  .glass-input-wrap__suffix ::slotted(*) { pointer-events: auto; }
+`);
+
 class GlkInput extends GlkFormElement {
   static get observedAttributes() {
-    return ['label', 'type', 'placeholder', 'error', 'hint', 'disabled', 'name', 'value', 'required', ...FORWARDED];
+    return ['label', 'type', 'placeholder', 'error', 'hint', 'disabled', 'readonly', 'name', 'value', 'required', ...FORWARDED];
   }
 
+  static get hostStyles() { return affixSheet; }
+
   render() {
     const group = this.createElement('div', ['glass-input-group']);
 
@@ -32,19 +47,28 @@ class GlkInput extends GlkFormElement {
     const name = this.getAttribute('name');
     if (name) this._input.setAttribute('name', name);
 
-    const value = this.getAttribute('value');
+    // A value set as a property before render() has waited for it.
+    const value = this._pendingValue ?? this.getAttribute('value');
+    this._pendingValue = undefined;
     if (value) this._input.value = value;
 
     if (this.getBoolAttr('disabled')) this._input.disabled = true;
+    if (this.getBoolAttr('readonly')) this._input.readOnly = true;
     if (this.getBoolAttr('required')) this._input.required = true;
     for (const attr of FORWARDED) this._forward(attr);
 
+    // The field's box: the input, a prefix and a suffix slot on top of it
+    this._box = this.createElement('div', ['glass-input-wrap'], { part: 'box' });
+    this._prefix = this._createAffix('prefix');
+    this._suffix = this._createAffix('suffix');
+    this._box.append(this._prefix, this._input, this._suffix);
+
     // Hint — read out with the field as its description
     this._hintEl = this.createElement('span', this._computeHintClasses(), { id: 'hint' });
     this._hintEl.textContent = this.getAttribute('hint') || '';
 
     group.appendChild(this._labelEl);
-    group.appendChild(this._input);
+    group.appendChild(this._box);
     if (this.getAttribute('hint')) group.appendChild(this._hintEl);
 
     this._group = group;
@@ -54,6 +78,12 @@ class GlkInput extends GlkFormElement {
     this._syncFormValue();
   }
 
+  _createAffix(name) {
+    const affix = this.createElement('span', [`glass-input-wrap__${name}`], { id: name, part: name, hidden: '' });
+    affix.appendChild(this.createElement('slot', [], { name }));
+    return affix;
+  }
+
   setupEvents() {
     this._onInput = () => {
       this._syncFormValue();
@@ -66,11 +96,26 @@ class GlkInput extends GlkFormElement {
     };
     this._input.addEventListener('input', this._onInput);
     this._input.addEventListener('change', this._onChangeNative);
+
+    // Affixes: shown while something is slotted, measured while shown.
+    this._onSlotChange = () => this._applyAffixes();
+    this._box.addEventListener('slotchange', this._onSlotChange);
+    this._affixObserver = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        const size = entry.borderBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;
+        this._box.style.setProperty(`--gl-input-${entry.target.id}-size`, `${size}px`);
+      }
+    });
+    this._affixObserver.observe(this._prefix);
+    this._affixObserver.observe(this._suffix);
+    this._applyAffixes();
   }
 
   teardownEvents() {
     this._input?.removeEventListener('input', this._onInput);
     this._input?.removeEventListener('change', this._onChangeNative);
+    this._box?.removeEventListener('slotchange', this._onSlotChange);
+    this._affixObserver?.disconnect();
   }
 
   onAttributeChanged(name) {
@@ -100,6 +145,9 @@ class GlkInput extends GlkFormElement {
       case 'disabled':
         this._input.disabled = this.getBoolAttr('disabled');
         break;
+      case 'readonly':
+        this._input.readOnly = this.getBoolAttr('readonly');
+        break;
       case 'name':
         this._input.setAttribute('name', this.getAttribute('name') || '');
         break;
@@ -115,14 +163,27 @@ class GlkInput extends GlkFormElement {
     }
   }
 
+  /** An affix shows, and makes room in the field, only while something is slotted. */
+  _applyAffixes() {
+    for (const affix of [this._prefix, this._suffix]) {
+      const filled = affix.firstElementChild.assignedNodes().length > 0;
+      affix.hidden = !filled;
+      this._box.classList.toggle(`glass-input-wrap--${affix.id}`, filled);
+    }
+    this._applyDescription();
+  }
+
   /**
-   * The hint describes the field; with `error` set it is the error message
-   * and the field is marked invalid. Server-side errors arrive this way, so
-   * `error` stays a marker for assistive technology and does not block the
-   * form — only the field's own constraints (required, pattern …) do.
+   * Prefix, suffix and hint describe the field — a unit belongs to the value
+   * it stands next to. With `error` set the hint is the error message and the
+   * field is marked invalid. Server-side errors arrive this way, so `error`
+   * stays a marker for assistive technology and does not block the form —
+   * only the field's own constraints (required, pattern …) do.
    */
   _applyDescription() {
-    if (this.getAttribute('hint')) this._input.setAttribute('aria-describedby', 'hint');
+    const ids = [this._prefix, this._suffix].filter(affix => affix && !affix.hidden).map(affix => affix.id);
+    if (this.getAttribute('hint')) ids.push('hint');
+    if (ids.length) this._input.setAttribute('aria-describedby', ids.join(' '));
     else this._input.removeAttribute('aria-describedby');
     if (this.getBoolAttr('error')) this._input.setAttribute('aria-invalid', 'true');
     else this._input.removeAttribute('aria-invalid');
@@ -157,15 +218,22 @@ class GlkInput extends GlkFormElement {
     this._syncFormValue();
   }
 
-  get value() { return this._input?.value ?? ''; }
+  get value() { return this._input ? this._input.value : (this._pendingValue ?? this.getAttribute('value') ?? ''); }
   set value(v) {
-    if (this._input) this._input.value = v;
+    const value = v == null ? '' : String(v);
+    // Frameworks set properties right after creating the element. Before
+    // render() the value waits for it — it used to throw.
+    if (!this._input) { this._pendingValue = value; return; }
+    this._input.value = value;
     this._syncFormValue();
   }
 
   get disabled() { return this.getBoolAttr('disabled'); }
   set disabled(v) { this.setBoolAttr('disabled', v); }
 
+  get readOnly() { return this.getBoolAttr('readonly'); }
+  set readOnly(v) { this.setBoolAttr('readonly', v); }
+
   get name() { return this.getAttribute('name'); }
   set name(v) { this.setAttribute('name', v); }
 }

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

@@ -189,14 +189,15 @@ class GlkRadio extends GlkFormElement {
     syncGroupTabIndex(this._group());
   }
 
-  get checked() { return this._input?.checked ?? false; }
+  // Before render() the attribute carries the state: render() reads it.
+  get checked() { return this._input ? this._input.checked : this.getBoolAttr('checked'); }
   set checked(v) {
     if (this._input) this._input.checked = v;
     // Also covers the case where the attribute is already present, so
     // setBoolAttr stays silent and onAttributeChanged never runs.
     if (v) this._uncheckPeers();
     this.setBoolAttr('checked', v);
-    this._syncFormValue();
+    if (this._input) this._syncFormValue();
     syncGroupTabIndex(this._group());
   }
 

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

@@ -35,13 +35,17 @@ class GlkRange extends GlkFormElement {
 
     if (this.getBoolAttr('disabled')) this._input.disabled = true;
 
+    // The reset value is the attribute's; a value set as a property before
+    // render() has waited for it and comes on top.
+    this._defaultValue = this._input.value;
+    if (this._pendingValue !== undefined) this._input.value = this._pendingValue;
+    this._pendingValue = undefined;
     this._updateValueDisplay();
 
     group.appendChild(header);
     group.appendChild(this._input);
 
     this._wrapper.appendChild(group);
-    this._defaultValue = this._input.value;
     this._syncFormValue();
   }
 
@@ -102,9 +106,13 @@ class GlkRange extends GlkFormElement {
     this._syncFormValue();
   }
 
-  get value() { return this._input?.value ?? ''; }
+  get value() { return this._input ? this._input.value : (this._pendingValue ?? this.getAttribute('value') ?? '50'); }
   set value(v) {
-    if (this._input) this._input.value = v;
+    const value = v == null ? '' : String(v);
+    // Frameworks set properties right after creating the element. Before
+    // render() the value waits for it — it used to throw.
+    if (!this._input) { this._pendingValue = value; return; }
+    this._input.value = value;
     this._updateValueDisplay();
     this._syncFormValue();
   }

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

@@ -27,7 +27,9 @@ class GlkSearch extends GlkFormElement {
     const name = this.getAttribute('name');
     if (name) this._input.setAttribute('name', name);
 
-    const value = this.getAttribute('value');
+    // A value set as a property before render() has waited for it.
+    const value = this._pendingValue ?? this.getAttribute('value');
+    this._pendingValue = undefined;
     if (value) this._input.value = value;
 
     if (this.getBoolAttr('disabled')) this._input.disabled = true;
@@ -89,9 +91,13 @@ class GlkSearch extends GlkFormElement {
     this._syncFormValue();
   }
 
-  get value() { return this._input?.value ?? ''; }
+  get value() { return this._input ? this._input.value : (this._pendingValue ?? this.getAttribute('value') ?? ''); }
   set value(v) {
-    if (this._input) this._input.value = v;
+    const value = v == null ? '' : String(v);
+    // Frameworks set properties right after creating the element. Before
+    // render() the value waits for it — it used to throw.
+    if (!this._input) { this._pendingValue = value; return; }
+    this._input.value = value;
     this._syncFormValue();
   }
 }

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

@@ -1,5 +1,15 @@
 import { GlkFormElement } from '../../base.js';
 
+// The wanted value. A select can show a value only once an option carries it,
+// and the options arrive late: they are copied in a frame after connecting,
+// and a framework may add them later still — while it sets `value` as a
+// property right after creating the element. So the value the attribute or
+// the property asks for is kept as wanted until an option carries it; a
+// choice of the user replaces it. Before 1.22.0 only the attribute was kept:
+// a property set before connecting threw, and one set before the options
+// were copied was lost — the select showed its first option while the app
+// held the other value.
+
 class GlkSelect extends GlkFormElement {
   static get observedAttributes() {
     return ['label', 'disabled', 'name', 'value', 'required'];
@@ -15,6 +25,8 @@ class GlkSelect extends GlkFormElement {
     this._labelEl.textContent = this.getAttribute('label') || '';
 
     this._select = this.createElement('select', ['glass-select'], { id: 'field' });
+    // A value set as a property before render() is wanted already.
+    if (this._wanted === undefined) this._wanted = this.getAttribute('value');
 
     const name = this.getAttribute('name');
     if (name) this._select.setAttribute('name', name);
@@ -46,10 +58,10 @@ class GlkSelect extends GlkFormElement {
 
     this._moveOptions();
 
-    // Keep the live selection when it survived the rebuild; otherwise fall back
-    // to the value attribute. Without this the selection jumps back to the first
-    // entry every time the list is updated.
-    if (!this._applyValue(previous)) this._applyValue(this.getAttribute('value'));
+    // The wanted value first, then the live selection if it survived the
+    // rebuild — without that, the selection would jump back to the first entry
+    // every time the list is updated.
+    if (!this._applyValue(this._wanted)) this._applyValue(previous);
     this._syncFormValue();
   }
 
@@ -75,6 +87,7 @@ class GlkSelect extends GlkFormElement {
 
   setupEvents() {
     this._onChange = () => {
+      this._wanted = null;            // the user's choice replaces it
       this._syncFormValue();
       this.emit('glk-change', { value: this._select.value });
       this.dispatchEvent(new Event('change', { bubbles: true }));
@@ -99,7 +112,8 @@ class GlkSelect extends GlkFormElement {
         this._select.setAttribute('name', this.getAttribute('name') || '');
         break;
       case 'value':
-        this._applyValue(this.getAttribute('value'));
+        this._wanted = this.getAttribute('value');
+        this._applyValue(this._wanted);
         this._syncFormValue();
         break;
       case 'required':
@@ -115,13 +129,22 @@ class GlkSelect extends GlkFormElement {
   }
 
   resetValue() {
-    this._select.selectedIndex = 0;
+    // Back to what the markup asked for, else the first option.
+    this._wanted = this.getAttribute('value');
+    if (!this._applyValue(this._wanted)) this._select.selectedIndex = 0;
     this._syncFormValue();
   }
 
-  get value() { return this._select?.value ?? ''; }
+  get value() {
+    // Until options are there, the wanted value is the answer: a framework
+    // reads back what it has just set.
+    if (!this._select?.options.length) return this._wanted ?? this.getAttribute('value') ?? '';
+    return this._select.value;
+  }
   set value(v) {
-    if (this._select) this._select.value = v;
+    this._wanted = v == null ? '' : String(v);
+    if (!this._select) return;        // render() takes it from here
+    this._applyValue(this._wanted);
     this._syncFormValue();
   }
 

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

@@ -2,7 +2,7 @@ import { GlkFormElement } from '../../base.js';
 
 class GlkTextarea extends GlkFormElement {
   static get observedAttributes() {
-    return ['label', 'placeholder', 'rows', 'disabled', 'name', 'value', 'required'];
+    return ['label', 'placeholder', 'rows', 'disabled', 'readonly', 'name', 'value', 'required'];
   }
 
   render() {
@@ -22,10 +22,13 @@ class GlkTextarea extends GlkFormElement {
     const name = this.getAttribute('name');
     if (name) this._textarea.setAttribute('name', name);
 
-    const value = this.getAttribute('value');
+    // A value set as a property before render() has waited for it.
+    const value = this._pendingValue ?? this.getAttribute('value');
+    this._pendingValue = undefined;
     if (value) this._textarea.value = value;
 
     if (this.getBoolAttr('disabled')) this._textarea.disabled = true;
+    if (this.getBoolAttr('readonly')) this._textarea.readOnly = true;
     if (this.getBoolAttr('required')) this._textarea.required = true;
 
     group.appendChild(this._labelEl);
@@ -63,6 +66,9 @@ class GlkTextarea extends GlkFormElement {
       case 'disabled':
         this._textarea.disabled = this.getBoolAttr('disabled');
         break;
+      case 'readonly':
+        this._textarea.readOnly = this.getBoolAttr('readonly');
+        break;
       case 'name':
         this._textarea.setAttribute('name', this.getAttribute('name') || '');
         break;
@@ -87,14 +93,21 @@ class GlkTextarea extends GlkFormElement {
     this._syncFormValue();
   }
 
-  get value() { return this._textarea?.value ?? ''; }
+  get value() { return this._textarea ? this._textarea.value : (this._pendingValue ?? this.getAttribute('value') ?? ''); }
   set value(v) {
-    if (this._textarea) this._textarea.value = v;
+    const value = v == null ? '' : String(v);
+    // Frameworks set properties right after creating the element. Before
+    // render() the value waits for it — it used to throw.
+    if (!this._textarea) { this._pendingValue = value; return; }
+    this._textarea.value = value;
     this._syncFormValue();
   }
 
   get disabled() { return this.getBoolAttr('disabled'); }
   set disabled(v) { this.setBoolAttr('disabled', v); }
+
+  get readOnly() { return this.getBoolAttr('readonly'); }
+  set readOnly(v) { this.setBoolAttr('readonly', v); }
 }
 
 customElements.define('glk-textarea', GlkTextarea);

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

@@ -104,11 +104,12 @@ class GlkToggle extends GlkFormElement {
     }
   }
 
-  get checked() { return this._input?.checked ?? false; }
+  // Before render() the attribute carries the state: render() reads it.
+  get checked() { return this._input ? this._input.checked : this.getBoolAttr('checked'); }
   set checked(v) {
     if (this._input) this._input.checked = v;
     this.setBoolAttr('checked', v);
-    this._syncFormValue();
+    if (this._input) this._syncFormValue();
   }
 
   get disabled() { return this.getBoolAttr('disabled'); }