@skirbi/sugar 0.1.7 → 0.1.8

package/Changes

@@ -1,5 +1,10 @@
 Revision history for @skirbi/sugar
 
+0.1.8       2026-06-08 22:43:46Z
+
+  * Forward value for htmlelement-input.mjs in all cases not just with
+    data-sync. Value is a special case for inputs.
+
 0.1.7       2026-06-08 10:59:27Z
 
   * Add moveSlot to sugar, multiple components start to create the same logic.

package/README.md

@@ -46,6 +46,18 @@ And to register them:
 MyNewElement.register();
 ```
 
+## Installation
+
+Just like any other npm package:
+
+```sh
+npm install @skirbi/sugar
+```
+
+It is however advised to use an override on your project for `@skirbi/sugar` if
+you either use `@skirbi/semtic`, `@skibri/dibuho` or `@skirbi/bolbe`. This will
+allow correct hoisting.
+
 ## Observable patterns
 
 You can define attributes to be observable:

package/lib/htmlelement-input.mjs

@@ -71,6 +71,37 @@ export class HTMLElementSugarInput extends HTMLElementSugar {
     return parseBoolean(raw);
   }
 
+  /**
+   * Find the wrapped form control.
+   *
+   * @returns {HTMLInputElement|HTMLSelectElement|HTMLTextAreaElement|null}
+   */
+  get control() {
+    return this.querySelector(this.constructor.controlSelector);
+  }
+
+  set value(value) {
+    this._value = value ?? '';
+    this._syncValueToControl();
+  }
+
+  get value() {
+    const control = this.control;
+    if (control && 'value' in control) return control.value;
+
+    return this._value ?? this.getAttribute('value') ?? '';
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback?.(name, oldValue, newValue);
+
+
+    if (name === 'value') {
+      this._value = newValue ?? '';
+      this._syncValueToControl();
+    }
+  }
+
   /**
    * Resolve the effective label position for form-control components.
    *
@@ -217,6 +248,18 @@ export class HTMLElementSugarInput extends HTMLElementSugar {
     this._attrObserver.observe(this, { attributes: true });
   }
 
+  /**
+   * Sync the host value attribute/property to the wrapped control property.
+   *
+   * @returns {void}
+   */
+  _syncValueToControl() {
+    const control = this.control;
+    if (!control || !('value' in control)) return;
+
+    control.value = this.getAttribute('value') ?? this._value ?? '';
+  }
+
   /**
    * One-liner for subclasses:
    * - find control in fragment
@@ -229,6 +272,10 @@ export class HTMLElementSugarInput extends HTMLElementSugar {
   enhanceControl(frag) {
     const control = this.findControl(frag);
 
+    if (this._value !== undefined) {
+      control.value = this._value;
+    }
+
     const deny = this.getForwardDenySet();
     const skip = this.getForwardSkipSet();
 

package/lib/index.mjs

@@ -2,7 +2,7 @@
 //
 // SPDX-License-Identifier: MIT
 
-const VERSION = "0.1.7";
+const VERSION = "0.1.8";
 
 export { HTMLElementSugar } from './htmlelement.mjs';
 export { HTMLElementSugarInput } from './htmlelement-input.mjs';

package/package.json

@@ -56,5 +56,5 @@
   },
   "sideEffects": true,
   "type": "module",
-  "version": "0.1.7"
+  "version": "0.1.8"
 }