@skirbi/sugar 0.0.21 → 0.0.23

package/Changes

@@ -1,5 +1,13 @@
 Revision history for @skirbi/sugar
 
+0.0.23       2026-05-28 03:53:52Z
+
+  * Make htmlelementsugar-select easier to override/extend
+
+0.0.22       2026-05-28 03:45:56Z
+
+  * Fix htmlelementsugar-select for using native options
+
 0.0.21       2026-05-10 02:05:46Z
 
   * Add `$()` and `$$()` selector helpers to HTMLElementSugar.

package/lib/htmlelement-select.mjs

@@ -98,29 +98,8 @@ export class HTMLElementSugarSelect extends HTMLElementSugarInput {
     this._rendered = true;
 
     const frag = this.renderFromTemplate();
-    const cfg = this.getConfig();
 
-    const searchEl = frag.querySelector('[skirbi-search]');
-    const select = this.enhanceControl(frag);
-
-    const hasEndpoint = !!cfg.endpoint;
-    const rawOptions = cfg.options || cfg['data-options'] || '';
-    const hasStatic = !!rawOptions;
-
-    // Only show a search box if asked and there's something to search.
-    if (!(cfg.searchable && (hasEndpoint || hasStatic))) {
-      searchEl?.remove();
-    }
-
-    if (hasStatic) {
-      this._setOptionsFromOptions(select, rawOptions, cfg);
-      if (searchEl) this._setupLocalSearch(select, searchEl);
-    } else if (hasEndpoint) {
-      this._setupRemote(select, searchEl, cfg);
-    }
-
-    // Apply initial value after options exist.
-    if (cfg.value != null && cfg.value !== '') select.value = String(cfg.value);
+    this.setupSelectControl(frag);
 
     this.replaceChildren(frag);
   }
@@ -153,6 +132,47 @@ export class HTMLElementSugarSelect extends HTMLElementSugarInput {
     }
   }
 
+  setupSelectControl(frag, cfg = this.getConfig()) {
+    const searchEl = frag.querySelector('[skirbi-search]');
+    const select = this.enhanceControl(frag);
+
+    const hasEndpoint = !!cfg.endpoint;
+    const rawOptions = cfg.options || cfg['data-options'] || '';
+    const hasStatic = !!rawOptions;
+
+    const authoredOptions = Array.from(this.children)
+      .filter((node) => node.matches?.('option,optgroup'));
+
+    const hasAuthored = authoredOptions.length > 0;
+
+    if (!(cfg.searchable && (hasEndpoint || hasStatic || hasAuthored))) {
+      searchEl?.remove();
+    }
+
+    if (hasStatic) {
+      this._setOptionsFromOptions(select, rawOptions, cfg);
+      if (searchEl) this._setupLocalSearch(select, searchEl);
+    }
+    else if (hasEndpoint) {
+      this._setupRemote(select, searchEl, cfg);
+    }
+    else {
+      if (cfg.placeholder) this._addPlaceholder(select, cfg.placeholder);
+
+      for (const option of authoredOptions) {
+        select.appendChild(option);
+      }
+
+      if (searchEl) this._setupLocalSearch(select, searchEl);
+    }
+
+    if (cfg.value != null && cfg.value !== '') {
+      select.value = String(cfg.value);
+    }
+
+    return select;
+  }
+
   // TODO: getByPath(x, json) might want to return a console.warn when it
   // returns undefined. This would help developers spot mistakes? Yes/no/maybe?
 
@@ -221,7 +241,7 @@ export class HTMLElementSugarSelect extends HTMLElementSugarInput {
       const json = await res.json();
       const items = this._itemsFromJson(json, cfg);
       const opts = items.map((it) => this._mapItemToOption(it, cfg));
-      this._setOptions(select, opts);
+      this._setOptions(select, opts, cfg);
 
       // search-min: hide the search UI for small results.
       if (searchEl && cfg['search-min'] > 0) {

package/lib/index.mjs

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

package/package.json

@@ -52,5 +52,5 @@
   },
   "sideEffects": false,
   "type": "module",
-  "version": "0.0.21"
+  "version": "0.0.23"
 }