@skirbi/sugar 0.1.6 → 0.1.8

package/Changes

@@ -1,5 +1,16 @@
 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.
+  * Add keywords to dist.toml/package.json
+  * Add tests for aliases
+
 0.1.6       2026-06-08 01:05:36Z
 
   * Add attributeChangedCallback hook system

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/htmlelement.mjs

@@ -511,5 +511,19 @@ export class HTMLElementSugar extends HTMLElement {
     this._morphElement(this, frag);
   }
 
+  /**
+   * Move named slot children into the rendered target.
+   *
+   * @param {string} name
+   * @param {Element} target
+   * @returns {void}
+   */
+  moveSlot(name, target) {
+    for (const node of [...this.$$(`[slot="${name}"]`)]) {
+      node.removeAttribute('slot');
+      target.appendChild(node);
+    }
+  }
+
 }
 

package/lib/index.mjs

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

package/package.json

@@ -35,7 +35,10 @@
     "semantic",
     "htmlelementsugar",
     "html",
-    "authoring"
+    "authoring",
+    "light dom",
+    "progressive enhancement",
+    "design system"
   ],
   "license": "MIT",
   "name": "@skirbi/sugar",
@@ -53,5 +56,5 @@
   },
   "sideEffects": true,
   "type": "module",
-  "version": "0.1.6"
+  "version": "0.1.8"
 }