smoothly 0.3.59 → 0.3.61

package/dist/cjs/{Listenable-fcea5136.js → Listenable-e157f34c.js}

@@ -784,18 +784,19 @@ class Listenable {
   constructor() {
     _Listenable_listeners.set(this, {});
   }
-  listen(property, listener) {
+  listen(property, listener, options) {
     var _a, _b;
     (_b = (_a = __classPrivateFieldGet(this, _Listenable_listeners, "f")[property]) === null || _a === void 0 ? void 0 : _a.push(listener)) !== null && _b !== void 0 ? _b : (__classPrivateFieldGet(this, _Listenable_listeners, "f")[property] = [listener]);
-    listener(this[property]);
+    if (!(options === null || options === void 0 ? void 0 : options.lazy))
+      listener(this[property]);
   }
   unlisten(property, listener) {
     var _a, _b;
     const index = (_a = __classPrivateFieldGet(this, _Listenable_listeners, "f")[property]) === null || _a === void 0 ? void 0 : _a.indexOf(listener);
     index != undefined && index >= 0 && ((_b = __classPrivateFieldGet(this, _Listenable_listeners, "f")[property]) === null || _b === void 0 ? void 0 : _b.splice(index, 1));
   }
-  static load(backend, listenable) {
-    const result = listenable !== null && listenable !== void 0 ? listenable : new Listenable();
+  static load(backend) {
+    const result = backend.listenable;
     return Object.defineProperties(result, getProperties(backend));
     function getProperties(backend) {
       return Object.fromEntries(Object.entries(Object.assign(Object.assign({}, Object.getOwnPropertyDescriptors(backend)), Object.getOwnPropertyDescriptors(Object.getPrototypeOf(backend)))).map(([name, descriptor]) => [
@@ -819,7 +820,7 @@ class Listenable {
             }
             : {
               get() {
-                return backend[name].bind(backend);
+                return backend[name];
               },
             },
       ]));

package/dist/cjs/{index-8352a4e0.js → index-48630c3c.js}

@@ -2060,6 +2060,8 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
 const styles = /*@__PURE__*/ new Map();
 const win = typeof window !== 'undefined' ? window : {};
 const doc = win.document || { head: {} };
+const H = (win.HTMLElement || class {
+});
 const plt = {
     $flags$: 0,
     $resourcesUrl$: '',
@@ -2122,6 +2124,7 @@ const flush = () => {
 const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
 const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
+exports.H = H;
 exports.Host = Host;
 exports.bootstrapLazy = bootstrapLazy;
 exports.createEvent = createEvent;

package/dist/cjs/{index-679a68de.js → index-5c256daf.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-8352a4e0.js');
+const index = require('./index-48630c3c.js');
 
 const appendToMap = (map, propName, value) => {
     const items = map.get(propName);

package/dist/cjs/index.cjs.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-679a68de.js');
-const Listenable = require('./Listenable-fcea5136.js');
+const index = require('./index-5c256daf.js');
+const Listenable = require('./Listenable-e157f34c.js');
 const GoogleFont = require('./GoogleFont-6c4f0da1.js');
-require('./index-8352a4e0.js');
+require('./index-48630c3c.js');
 
 class ClientIdentifier {
   constructor() { }
@@ -19,6 +19,13 @@ class ClientIdentifier {
   }
 }
 
+class StateBase {
+  constructor(...parameters) {
+    this.listenable = new Listenable.Listenable();
+    this.client = parameters.length == 1 ? parameters[0] : undefined;
+  }
+}
+
 exports.App = index.App;
 Object.defineProperty(exports, 'Cosmetic', {
   enumerable: true,
@@ -44,3 +51,4 @@ Object.defineProperty(exports, 'GoogleFont', {
   }
 });
 exports.ClientIdentifier = ClientIdentifier;
+exports.StateBase = StateBase;

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8352a4e0.js');
+const index = require('./index-48630c3c.js');
 
 /*
  Stencil Client Patch Esm v2.22.3 | MIT Licensed | https://stenciljs.com

package/dist/cjs/smoothly-accordion_53.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8352a4e0.js');
-const index$1 = require('./index-679a68de.js');
-const Listenable = require('./Listenable-fcea5136.js');
+const index = require('./index-48630c3c.js');
+const index$1 = require('./index-5c256daf.js');
+const Listenable = require('./Listenable-e157f34c.js');
 require('./GoogleFont-6c4f0da1.js');
 const getLanguage = require('./getLanguage-7991c46a.js');
 
@@ -3082,14 +3082,22 @@ const SmoothlyMenuOptions = class {
     this.keyword = keyword;
     const keywordLowercase = keyword.toLowerCase();
     this.filteredOptions = [];
-    for (const option of this.options) {
-      const names = option.name + (option.aliases ? option.aliases.join(" ") : "");
-      const isVisible = names.toLowerCase().includes(keywordLowercase) && !excludeValues.includes(option.value);
-      isVisible && this.filteredOptions.push(option);
+    if (keywordLowercase == "") {
+      this.showAllOptions();
+    }
+    else {
+      for (const option of this.options) {
+        const names = option.name + (option.aliases ? option.aliases.join(" ") : "");
+        const isVisible = names.toLowerCase().includes(keywordLowercase) && !excludeValues.includes(option.value);
+        isVisible && this.filteredOptions.push(option);
+      }
     }
     this.menuEmpty.emit(!this.filteredOptions.length);
     this.order && this.sortOptions(keyword);
   }
+  showAllOptions() {
+    this.filteredOptions = [...this.options];
+  }
   sortOptions(keyword) {
     const keywordLowercase = keyword.toLowerCase();
     this.filteredOptions.sort((a, b) => {
@@ -3351,8 +3359,6 @@ const SmoothlyPicker = class {
     const isNewSelection = this.selections.reduce((acc, current) => acc && current.value != selection.value, true);
     if (isNewSelection)
       this.selections = this.multiple ? [...this.selections, selection] : [selection];
-    this.inputElement.value = "";
-    this.filterOptions();
     this.keepFocusOnReRender = true;
     this.isOpen = this.multiple;
   }
@@ -3396,7 +3402,6 @@ const SmoothlyPicker = class {
     else if (event.key == "Escape") {
       this.inputElement.value = "";
       this.isOpen = false;
-      this.filterOptions();
     }
     else if (event.key == " " && this.inputElement.value == "") {
       event.preventDefault();
@@ -3409,13 +3414,11 @@ const SmoothlyPicker = class {
       this.isOpen = !this.isOpen;
       this.inputElement.focus();
       this.highlightDefault();
-      this.filterOptions();
     }
   }
   onBlur() {
     this.inputElement.value = "";
     this.isOpen = false;
-    this.filterOptions();
   }
   render() {
     var _a, _b, _c;
@@ -3442,7 +3445,7 @@ const SmoothlyPicker = class {
         : []),
       ...((_c = this.options) !== null && _c !== void 0 ? _c : []),
     ];
-    return (index.h(index.Host, { style: cssVariables, "has-selection": this.selections.length > 0, "is-open": this.isOpen ? "" : undefined, onMouseDown: (e) => e.preventDefault(), onClick: () => this.onClick() }, index.h("div", null, index.h("smoothly-icon", { part: "search", class: "search", name: "search-outline", size: "tiny" }), index.h("label", { part: "label-element" }, this.label), index.h("input", { part: "input", disabled: this.disabled, readonly: this.readonly, type: "text", ref: (el) => (this.inputElement = el ? el : this.inputElement), onFocus: () => this.highlightDefault(), onBlur: () => this.onBlur(), placeholder: this.selections.length > 3
+    return (index.h(index.Host, { style: cssVariables, "has-selection": this.selections.length > 0, "is-open": this.isOpen ? "" : undefined, onMouseDown: (e) => e.preventDefault(), onClick: () => this.onClick() }, index.h("div", null, index.h("smoothly-icon", { part: "search", class: "search", name: "search-outline", size: "tiny" }), index.h("label", { part: "label-element" }, this.label), index.h("input", { part: "input", disabled: this.disabled, readonly: this.readonly, type: "text", ref: (el) => (this.inputElement = el ? el : this.inputElement), onBlur: () => this.onBlur(), placeholder: this.selections.length > 3
         ? this.selections.length.toString() + " " + this.selectionName
         : this.selections.map(selection => selection.name).join(", "), onKeyDown: e => this.onKeyDown(e), onInput: (e) => this.onInput(e) }), index.h("smoothly-icon", { part: "chevron", class: "down", name: "chevron-down", size: "tiny" }), index.h("smoothly-icon", { part: "chevron", class: "up", name: "chevron-up", size: "tiny" })), index.h("smoothly-menu-options", { part: "menu-options", style: { width: "100%" }, toggle: true, optionStyle: Object.assign({}, this.optionStyle), order: false, emptyMenuLabel: this.emptyMenuLabel, newOptionLabel: this.newOptionLabel, "max-menu-height": this.maxMenuHeight, mutable: this.mutable, ref: (el) => (this.menuElement = el !== null && el !== void 0 ? el : this.menuElement), onClick: e => e.stopPropagation(), resetHighlightOnOptionsChange: false, options: options })));
   }

package/dist/cjs/smoothly-country.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8352a4e0.js');
+const index = require('./index-48630c3c.js');
 const getLanguage = require('./getLanguage-7991c46a.js');
 
 function from$K(country) {

package/dist/cjs/smoothly-google-font.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8352a4e0.js');
+const index = require('./index-48630c3c.js');
 const GoogleFont = require('./GoogleFont-6c4f0da1.js');
 
 const SmoothlyGoogleFont = class {

package/dist/cjs/smoothly-radio-group.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8352a4e0.js');
+const index = require('./index-48630c3c.js');
 
 const styleCss = "smoothly-radio-group{display:flex;position:relative;color:none !important;background:none !important;margin:0.5em 0}smoothly-radio-group[hidden]{display:none}smoothly-radio-group[orientation=vertical] *:not(:first-of-type)>input[type=radio]~label{border-top:none}smoothly-radio-group:not([orientation=vertical]) *:not(:first-of-type)>input[type=radio]~label{border-left:none}smoothly-radio-group[orientation=vertical]{flex-direction:column}smoothly-radio-group[orientation=vertical] :first-of-type>input[type=radio]~label{border-radius:4px 4px 0 0}smoothly-radio-group[orientation=vertical] :last-of-type>input[type=radio]~label{border-radius:0 0 4px 4px}smoothly-radio-group:not([orientation=vertical]){flex-direction:row}smoothly-radio-group:not([orientation=vertical]) :first-of-type>input[type=radio]~label{border-radius:4px 0 0 4px}smoothly-radio-group:not([orientation=vertical]) :last-of-type>input[type=radio]~label{border-radius:0 4px 4px 0}";
 

package/dist/cjs/smoothly-reorder.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8352a4e0.js');
+const index = require('./index-48630c3c.js');
 
 const styleCss = "smoothly-reorder>*{cursor:move;transition:transform 0.3s}smoothly-reorder>*.dragging{transition:none;box-shadow:0 0 10px rgba(var(--smoothly-dark-color));z-index:1;user-select:none}";
 
@@ -16,9 +16,9 @@ const SmoothlyReorder = class {
     if (this.childrenCache)
       result = this.childrenCache;
     else {
-      for (let index = 0; index < this.element.children.length; index++) {
-        const element = this.element.children[index];
-        if (element instanceof HTMLElement) {
+      for (let index$1 = 0; index$1 < this.element.children.length; index$1++) {
+        const element = this.element.children[index$1];
+        if (element instanceof index.H) {
           const bounds = element.getBoundingClientRect();
           result.push({
             top: bounds.top,

package/dist/cjs/smoothly-trigger-sink.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8352a4e0.js');
-const Listenable = require('./Listenable-fcea5136.js');
+const index = require('./index-48630c3c.js');
+const Listenable = require('./Listenable-e157f34c.js');
 require('./GoogleFont-6c4f0da1.js');
 
 const styleCss = ".sc-smoothly-trigger-sink-h{display:block}[hidden].sc-smoothly-trigger-sink-h{display:none}";

package/dist/cjs/smoothly-trigger-source.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8352a4e0.js');
-const Listenable = require('./Listenable-fcea5136.js');
+const index = require('./index-48630c3c.js');
+const Listenable = require('./Listenable-e157f34c.js');
 require('./GoogleFont-6c4f0da1.js');
 
 const styleCss = ".sc-smoothly-trigger-source-h{display:block}[hidden].sc-smoothly-trigger-source-h{display:none}";

package/dist/cjs/smoothly.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8352a4e0.js');
+const index = require('./index-48630c3c.js');
 
 /*
  Stencil Client Patch Browser v2.22.3 | MIT Licensed | https://stenciljs.com

package/dist/collection/components/menu-options/index.js

@@ -55,14 +55,22 @@ export class SmoothlyMenuOptions {
     this.keyword = keyword;
     const keywordLowercase = keyword.toLowerCase();
     this.filteredOptions = [];
-    for (const option of this.options) {
-      const names = option.name + (option.aliases ? option.aliases.join(" ") : "");
-      const isVisible = names.toLowerCase().includes(keywordLowercase) && !excludeValues.includes(option.value);
-      isVisible && this.filteredOptions.push(option);
+    if (keywordLowercase == "") {
+      this.showAllOptions();
+    }
+    else {
+      for (const option of this.options) {
+        const names = option.name + (option.aliases ? option.aliases.join(" ") : "");
+        const isVisible = names.toLowerCase().includes(keywordLowercase) && !excludeValues.includes(option.value);
+        isVisible && this.filteredOptions.push(option);
+      }
     }
     this.menuEmpty.emit(!this.filteredOptions.length);
     this.order && this.sortOptions(keyword);
   }
+  showAllOptions() {
+    this.filteredOptions = [...this.options];
+  }
   sortOptions(keyword) {
     const keywordLowercase = keyword.toLowerCase();
     this.filteredOptions.sort((a, b) => {

package/dist/collection/components/picker/index.js

@@ -82,8 +82,6 @@ export class SmoothlyPicker {
     const isNewSelection = this.selections.reduce((acc, current) => acc && current.value != selection.value, true);
     if (isNewSelection)
       this.selections = this.multiple ? [...this.selections, selection] : [selection];
-    this.inputElement.value = "";
-    this.filterOptions();
     this.keepFocusOnReRender = true;
     this.isOpen = this.multiple;
   }
@@ -127,7 +125,6 @@ export class SmoothlyPicker {
     else if (event.key == "Escape") {
       this.inputElement.value = "";
       this.isOpen = false;
-      this.filterOptions();
     }
     else if (event.key == " " && this.inputElement.value == "") {
       event.preventDefault();
@@ -140,13 +137,11 @@ export class SmoothlyPicker {
       this.isOpen = !this.isOpen;
       this.inputElement.focus();
       this.highlightDefault();
-      this.filterOptions();
     }
   }
   onBlur() {
     this.inputElement.value = "";
     this.isOpen = false;
-    this.filterOptions();
   }
   render() {
     var _a, _b, _c;
@@ -173,7 +168,7 @@ export class SmoothlyPicker {
         : []),
       ...((_c = this.options) !== null && _c !== void 0 ? _c : []),
     ];
-    return (h(Host, { style: cssVariables, "has-selection": this.selections.length > 0, "is-open": this.isOpen ? "" : undefined, onMouseDown: (e) => e.preventDefault(), onClick: () => this.onClick() }, h("div", null, h("smoothly-icon", { part: "search", class: "search", name: "search-outline", size: "tiny" }), h("label", { part: "label-element" }, this.label), h("input", { part: "input", disabled: this.disabled, readonly: this.readonly, type: "text", ref: (el) => (this.inputElement = el ? el : this.inputElement), onFocus: () => this.highlightDefault(), onBlur: () => this.onBlur(), placeholder: this.selections.length > 3
+    return (h(Host, { style: cssVariables, "has-selection": this.selections.length > 0, "is-open": this.isOpen ? "" : undefined, onMouseDown: (e) => e.preventDefault(), onClick: () => this.onClick() }, h("div", null, h("smoothly-icon", { part: "search", class: "search", name: "search-outline", size: "tiny" }), h("label", { part: "label-element" }, this.label), h("input", { part: "input", disabled: this.disabled, readonly: this.readonly, type: "text", ref: (el) => (this.inputElement = el ? el : this.inputElement), onBlur: () => this.onBlur(), placeholder: this.selections.length > 3
         ? this.selections.length.toString() + " " + this.selectionName
         : this.selections.map(selection => selection.name).join(", "), onKeyDown: e => this.onKeyDown(e), onInput: (e) => this.onInput(e) }), h("smoothly-icon", { part: "chevron", class: "down", name: "chevron-down", size: "tiny" }), h("smoothly-icon", { part: "chevron", class: "up", name: "chevron-up", size: "tiny" })), h("smoothly-menu-options", { part: "menu-options", style: { width: "100%" }, toggle: true, optionStyle: Object.assign({}, this.optionStyle), order: false, emptyMenuLabel: this.emptyMenuLabel, newOptionLabel: this.newOptionLabel, "max-menu-height": this.maxMenuHeight, mutable: this.mutable, ref: (el) => (this.menuElement = el !== null && el !== void 0 ? el : this.menuElement), onClick: e => e.stopPropagation(), resetHighlightOnOptionsChange: false, options: options })));
   }

package/dist/collection/index.js

@@ -1,3 +1,3 @@
 export { App, redirect } from "./components/App";
-export { ClientIdentifier, GoogleFont, Icon, Message, Notice, Trigger, Listenable, } from "./model";
+export { ClientIdentifier, GoogleFont, Icon, Message, Notice, Trigger, StateBase, Listenable, } from "./model";
 export { Cosmetic } from "./utilities";

package/dist/collection/model/Listenable.js

@@ -10,18 +10,19 @@ export class Listenable {
   constructor() {
     _Listenable_listeners.set(this, {});
   }
-  listen(property, listener) {
+  listen(property, listener, options) {
     var _a, _b;
     (_b = (_a = __classPrivateFieldGet(this, _Listenable_listeners, "f")[property]) === null || _a === void 0 ? void 0 : _a.push(listener)) !== null && _b !== void 0 ? _b : (__classPrivateFieldGet(this, _Listenable_listeners, "f")[property] = [listener]);
-    listener(this[property]);
+    if (!(options === null || options === void 0 ? void 0 : options.lazy))
+      listener(this[property]);
   }
   unlisten(property, listener) {
     var _a, _b;
     const index = (_a = __classPrivateFieldGet(this, _Listenable_listeners, "f")[property]) === null || _a === void 0 ? void 0 : _a.indexOf(listener);
     index != undefined && index >= 0 && ((_b = __classPrivateFieldGet(this, _Listenable_listeners, "f")[property]) === null || _b === void 0 ? void 0 : _b.splice(index, 1));
   }
-  static load(backend, listenable) {
-    const result = listenable !== null && listenable !== void 0 ? listenable : new Listenable();
+  static load(backend) {
+    const result = backend.listenable;
     return Object.defineProperties(result, getProperties(backend));
     function getProperties(backend) {
       return Object.fromEntries(Object.entries(Object.assign(Object.assign({}, Object.getOwnPropertyDescriptors(backend)), Object.getOwnPropertyDescriptors(Object.getPrototypeOf(backend)))).map(([name, descriptor]) => [
@@ -45,7 +46,7 @@ export class Listenable {
             }
             : {
               get() {
-                return backend[name].bind(backend);
+                return backend[name];
               },
             },
       ]));

package/dist/collection/model/StateBase.js

@@ -0,0 +1,7 @@
+import { Listenable } from "./Listenable";
+export class StateBase {
+  constructor(...parameters) {
+    this.listenable = new Listenable();
+    this.client = parameters.length == 1 ? parameters[0] : undefined;
+  }
+}

package/dist/collection/model/index.js

@@ -5,3 +5,4 @@ export { Message } from "./Message";
 export { Notice } from "./Notice";
 export { Trigger } from "./Trigger";
 export { Listenable } from "./Listenable";
+export { StateBase } from "./StateBase";

package/dist/custom-elements/index.js

@@ -1309,18 +1309,19 @@ class Listenable {
   constructor() {
     _Listenable_listeners.set(this, {});
   }
-  listen(property, listener) {
+  listen(property, listener, options) {
     var _a, _b;
     (_b = (_a = __classPrivateFieldGet(this, _Listenable_listeners, "f")[property]) === null || _a === void 0 ? void 0 : _a.push(listener)) !== null && _b !== void 0 ? _b : (__classPrivateFieldGet(this, _Listenable_listeners, "f")[property] = [listener]);
-    listener(this[property]);
+    if (!(options === null || options === void 0 ? void 0 : options.lazy))
+      listener(this[property]);
   }
   unlisten(property, listener) {
     var _a, _b;
     const index = (_a = __classPrivateFieldGet(this, _Listenable_listeners, "f")[property]) === null || _a === void 0 ? void 0 : _a.indexOf(listener);
     index != undefined && index >= 0 && ((_b = __classPrivateFieldGet(this, _Listenable_listeners, "f")[property]) === null || _b === void 0 ? void 0 : _b.splice(index, 1));
   }
-  static load(backend, listenable) {
-    const result = listenable !== null && listenable !== void 0 ? listenable : new Listenable();
+  static load(backend) {
+    const result = backend.listenable;
     return Object.defineProperties(result, getProperties(backend));
     function getProperties(backend) {
       return Object.fromEntries(Object.entries(Object.assign(Object.assign({}, Object.getOwnPropertyDescriptors(backend)), Object.getOwnPropertyDescriptors(Object.getPrototypeOf(backend)))).map(([name, descriptor]) => [
@@ -1344,7 +1345,7 @@ class Listenable {
             }
             : {
               get() {
-                return backend[name].bind(backend);
+                return backend[name];
               },
             },
       ]));
@@ -1353,6 +1354,13 @@ class Listenable {
 }
 _Listenable_listeners = new WeakMap();
 
+class StateBase {
+  constructor(...parameters) {
+    this.listenable = new Listenable();
+    this.client = parameters.length == 1 ? parameters[0] : undefined;
+  }
+}
+
 var Hex;
 (function (Hex) {
   function is(value) {
@@ -22814,14 +22822,22 @@ const SmoothlyMenuOptions$1 = class extends HTMLElement {
     this.keyword = keyword;
     const keywordLowercase = keyword.toLowerCase();
     this.filteredOptions = [];
-    for (const option of this.options) {
-      const names = option.name + (option.aliases ? option.aliases.join(" ") : "");
-      const isVisible = names.toLowerCase().includes(keywordLowercase) && !excludeValues.includes(option.value);
-      isVisible && this.filteredOptions.push(option);
+    if (keywordLowercase == "") {
+      this.showAllOptions();
+    }
+    else {
+      for (const option of this.options) {
+        const names = option.name + (option.aliases ? option.aliases.join(" ") : "");
+        const isVisible = names.toLowerCase().includes(keywordLowercase) && !excludeValues.includes(option.value);
+        isVisible && this.filteredOptions.push(option);
+      }
     }
     this.menuEmpty.emit(!this.filteredOptions.length);
     this.order && this.sortOptions(keyword);
   }
+  showAllOptions() {
+    this.filteredOptions = [...this.options];
+  }
   sortOptions(keyword) {
     const keywordLowercase = keyword.toLowerCase();
     this.filteredOptions.sort((a, b) => {
@@ -23089,8 +23105,6 @@ const SmoothlyPicker$1 = class extends HTMLElement {
     const isNewSelection = this.selections.reduce((acc, current) => acc && current.value != selection.value, true);
     if (isNewSelection)
       this.selections = this.multiple ? [...this.selections, selection] : [selection];
-    this.inputElement.value = "";
-    this.filterOptions();
     this.keepFocusOnReRender = true;
     this.isOpen = this.multiple;
   }
@@ -23134,7 +23148,6 @@ const SmoothlyPicker$1 = class extends HTMLElement {
     else if (event.key == "Escape") {
       this.inputElement.value = "";
       this.isOpen = false;
-      this.filterOptions();
     }
     else if (event.key == " " && this.inputElement.value == "") {
       event.preventDefault();
@@ -23147,13 +23160,11 @@ const SmoothlyPicker$1 = class extends HTMLElement {
       this.isOpen = !this.isOpen;
       this.inputElement.focus();
       this.highlightDefault();
-      this.filterOptions();
     }
   }
   onBlur() {
     this.inputElement.value = "";
     this.isOpen = false;
-    this.filterOptions();
   }
   render() {
     var _a, _b, _c;
@@ -23180,7 +23191,7 @@ const SmoothlyPicker$1 = class extends HTMLElement {
         : []),
       ...((_c = this.options) !== null && _c !== void 0 ? _c : []),
     ];
-    return (h(Host, { style: cssVariables, "has-selection": this.selections.length > 0, "is-open": this.isOpen ? "" : undefined, onMouseDown: (e) => e.preventDefault(), onClick: () => this.onClick() }, h("div", null, h("smoothly-icon", { part: "search", class: "search", name: "search-outline", size: "tiny" }), h("label", { part: "label-element" }, this.label), h("input", { part: "input", disabled: this.disabled, readonly: this.readonly, type: "text", ref: (el) => (this.inputElement = el ? el : this.inputElement), onFocus: () => this.highlightDefault(), onBlur: () => this.onBlur(), placeholder: this.selections.length > 3
+    return (h(Host, { style: cssVariables, "has-selection": this.selections.length > 0, "is-open": this.isOpen ? "" : undefined, onMouseDown: (e) => e.preventDefault(), onClick: () => this.onClick() }, h("div", null, h("smoothly-icon", { part: "search", class: "search", name: "search-outline", size: "tiny" }), h("label", { part: "label-element" }, this.label), h("input", { part: "input", disabled: this.disabled, readonly: this.readonly, type: "text", ref: (el) => (this.inputElement = el ? el : this.inputElement), onBlur: () => this.onBlur(), placeholder: this.selections.length > 3
         ? this.selections.length.toString() + " " + this.selectionName
         : this.selections.map(selection => selection.name).join(", "), onKeyDown: e => this.onKeyDown(e), onInput: (e) => this.onInput(e) }), h("smoothly-icon", { part: "chevron", class: "down", name: "chevron-down", size: "tiny" }), h("smoothly-icon", { part: "chevron", class: "up", name: "chevron-up", size: "tiny" })), h("smoothly-menu-options", { part: "menu-options", style: { width: "100%" }, toggle: true, optionStyle: Object.assign({}, this.optionStyle), order: false, emptyMenuLabel: this.emptyMenuLabel, newOptionLabel: this.newOptionLabel, "max-menu-height": this.maxMenuHeight, mutable: this.mutable, ref: (el) => (this.menuElement = el !== null && el !== void 0 ? el : this.menuElement), onClick: e => e.stopPropagation(), resetHighlightOnOptionsChange: false, options: options })));
   }
@@ -24390,4 +24401,4 @@ const defineCustomElements = (opts) => {
   }
 };
 
-export { App, ClientIdentifier, Cosmetic, GoogleFont, Icon, Listenable, Message, Notice, SmoothlyAccordion, SmoothlyAccordionItem, SmoothlyApp, SmoothlyAppDemo, SmoothlyBacktotop, SmoothlyButton, SmoothlyCalendar, SmoothlyCheckbox, SmoothlyCountry, SmoothlyDialog, SmoothlyDialogDemo, SmoothlyDisplay, SmoothlyDisplayAmount, SmoothlyDisplayDateTime, SmoothlyDisplayDemo, SmoothlyFrame, SmoothlyGoogleFont, SmoothlyIcon, SmoothlyIconDemo, SmoothlyInput, SmoothlyInputDate, SmoothlyInputDateRange, SmoothlyInputDemo, SmoothlyInputMonth, SmoothlyItem, SmoothlyMenuOptions, SmoothlyNotification, SmoothlyNotifier, SmoothlyOption, SmoothlyPicker, SmoothlyPopup, SmoothlyQuiet, SmoothlyRadio, SmoothlyRadioButton, SmoothlyRadioButtonItem, SmoothlyRadioGroup, SmoothlyReorder, SmoothlyRoom, SmoothlySelect, SmoothlySelectDemo, SmoothlySelector, SmoothlySkeleton, SmoothlySpinner, SmoothlySubmit, SmoothlySvg, SmoothlyTab, SmoothlyTabSwitch, SmoothlyTable, SmoothlyTableCell, SmoothlyTableDemo, SmoothlyTableExpandableCell, SmoothlyTableExpandableRow, SmoothlyTableHeader, SmoothlyTableRow, SmoothlyTrigger, SmoothlyTriggerSink, SmoothlyTriggerSource, SmoothlyTuple, SmoothlyUrlencoded, Trigger, defineCustomElements, redirect };
+export { App, ClientIdentifier, Cosmetic, GoogleFont, Icon, Listenable, Message, Notice, SmoothlyAccordion, SmoothlyAccordionItem, SmoothlyApp, SmoothlyAppDemo, SmoothlyBacktotop, SmoothlyButton, SmoothlyCalendar, SmoothlyCheckbox, SmoothlyCountry, SmoothlyDialog, SmoothlyDialogDemo, SmoothlyDisplay, SmoothlyDisplayAmount, SmoothlyDisplayDateTime, SmoothlyDisplayDemo, SmoothlyFrame, SmoothlyGoogleFont, SmoothlyIcon, SmoothlyIconDemo, SmoothlyInput, SmoothlyInputDate, SmoothlyInputDateRange, SmoothlyInputDemo, SmoothlyInputMonth, SmoothlyItem, SmoothlyMenuOptions, SmoothlyNotification, SmoothlyNotifier, SmoothlyOption, SmoothlyPicker, SmoothlyPopup, SmoothlyQuiet, SmoothlyRadio, SmoothlyRadioButton, SmoothlyRadioButtonItem, SmoothlyRadioGroup, SmoothlyReorder, SmoothlyRoom, SmoothlySelect, SmoothlySelectDemo, SmoothlySelector, SmoothlySkeleton, SmoothlySpinner, SmoothlySubmit, SmoothlySvg, SmoothlyTab, SmoothlyTabSwitch, SmoothlyTable, SmoothlyTableCell, SmoothlyTableDemo, SmoothlyTableExpandableCell, SmoothlyTableExpandableRow, SmoothlyTableHeader, SmoothlyTableRow, SmoothlyTrigger, SmoothlyTriggerSink, SmoothlyTriggerSource, SmoothlyTuple, SmoothlyUrlencoded, StateBase, Trigger, defineCustomElements, redirect };

package/dist/esm/{Listenable-10f48463.js → Listenable-afd6cd7e.js}

@@ -782,18 +782,19 @@ class Listenable {
   constructor() {
     _Listenable_listeners.set(this, {});
   }
-  listen(property, listener) {
+  listen(property, listener, options) {
     var _a, _b;
     (_b = (_a = __classPrivateFieldGet(this, _Listenable_listeners, "f")[property]) === null || _a === void 0 ? void 0 : _a.push(listener)) !== null && _b !== void 0 ? _b : (__classPrivateFieldGet(this, _Listenable_listeners, "f")[property] = [listener]);
-    listener(this[property]);
+    if (!(options === null || options === void 0 ? void 0 : options.lazy))
+      listener(this[property]);
   }
   unlisten(property, listener) {
     var _a, _b;
     const index = (_a = __classPrivateFieldGet(this, _Listenable_listeners, "f")[property]) === null || _a === void 0 ? void 0 : _a.indexOf(listener);
     index != undefined && index >= 0 && ((_b = __classPrivateFieldGet(this, _Listenable_listeners, "f")[property]) === null || _b === void 0 ? void 0 : _b.splice(index, 1));
   }
-  static load(backend, listenable) {
-    const result = listenable !== null && listenable !== void 0 ? listenable : new Listenable();
+  static load(backend) {
+    const result = backend.listenable;
     return Object.defineProperties(result, getProperties(backend));
     function getProperties(backend) {
       return Object.fromEntries(Object.entries(Object.assign(Object.assign({}, Object.getOwnPropertyDescriptors(backend)), Object.getOwnPropertyDescriptors(Object.getPrototypeOf(backend)))).map(([name, descriptor]) => [
@@ -817,7 +818,7 @@ class Listenable {
             }
             : {
               get() {
-                return backend[name].bind(backend);
+                return backend[name];
               },
             },
       ]));

package/dist/esm/{index-990cc22d.js → index-62de77e7.js}

@@ -1,4 +1,4 @@
-import { g as getRenderingRef, f as forceUpdate, h } from './index-7b57a52c.js';
+import { g as getRenderingRef, f as forceUpdate, h } from './index-e9e4cadb.js';
 
 const appendToMap = (map, propName, value) => {
     const items = map.get(propName);

package/dist/esm/{index-7b57a52c.js → index-e9e4cadb.js}

@@ -2038,6 +2038,8 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
 const styles = /*@__PURE__*/ new Map();
 const win = typeof window !== 'undefined' ? window : {};
 const doc = win.document || { head: {} };
+const H = (win.HTMLElement || class {
+});
 const plt = {
     $flags$: 0,
     $resourcesUrl$: '',
@@ -2100,4 +2102,4 @@ const flush = () => {
 const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
 const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
-export { Host as H, getElement as a, bootstrapLazy as b, createEvent as c, forceUpdate as f, getRenderingRef as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
+export { Host as H, getElement as a, bootstrapLazy as b, createEvent as c, H as d, forceUpdate as f, getRenderingRef as g, h, promiseResolve as p, registerInstance as r, setNonce as s };

package/dist/esm/index.js

@@ -1,8 +1,8 @@
-export { A as App, C as Cosmetic, N as Notice, r as redirect } from './index-990cc22d.js';
-import { I as Identifier } from './Listenable-10f48463.js';
-export { a as Icon, L as Listenable, M as Message, T as Trigger } from './Listenable-10f48463.js';
+export { A as App, C as Cosmetic, N as Notice, r as redirect } from './index-62de77e7.js';
+import { I as Identifier, L as Listenable } from './Listenable-afd6cd7e.js';
+export { a as Icon, L as Listenable, M as Message, T as Trigger } from './Listenable-afd6cd7e.js';
 export { G as GoogleFont } from './GoogleFont-8474516b.js';
-import './index-7b57a52c.js';
+import './index-e9e4cadb.js';
 
 class ClientIdentifier {
   constructor() { }
@@ -16,4 +16,11 @@ class ClientIdentifier {
   }
 }
 
-export { ClientIdentifier };
+class StateBase {
+  constructor(...parameters) {
+    this.listenable = new Listenable();
+    this.client = parameters.length == 1 ? parameters[0] : undefined;
+  }
+}
+
+export { ClientIdentifier, StateBase };

package/dist/esm/loader.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-7b57a52c.js';
-export { s as setNonce } from './index-7b57a52c.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-e9e4cadb.js';
+export { s as setNonce } from './index-e9e4cadb.js';
 
 /*
  Stencil Client Patch Esm v2.22.3 | MIT Licensed | https://stenciljs.com