smoothly 0.2.11 → 0.3.0

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

@@ -4,6 +4,7 @@ export class SmoothlyPicker {
     this.keepFocusOnReRender = false;
     this.disabled = false;
     this.readonly = false;
+    this.maxMenuHeight = "inherit";
     this.emptyMenuLabel = "No Options";
     this.multiple = false;
     this.mutable = false;
@@ -140,17 +141,14 @@ export class SmoothlyPicker {
     this.isOpen = false;
     this.filterOptions();
   }
-  getCheckHtml(checked) {
-    return checked ? (h("smoothly-icon", { name: "checkbox", size: "small" })) : (h("smoothly-icon", { name: "square-outline", size: "small" }));
-  }
   render() {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     const cssVariables = {
       "--max-height": (_a = this.maxHeight) !== null && _a !== void 0 ? _a : "inherit",
       "--label-display": this.labelSetting == "hide" ? "none" : "absolute",
     };
     (_b = this.options) === null || _b === void 0 ? void 0 : _b.forEach(o => {
-      o.left = this.getCheckHtml(this.selections.map(s => s.value).includes(o.value));
+      o.checked = this.selections.map(s => s.value).includes(o.value);
     });
     const options = [
       ...(this.multiple
@@ -158,12 +156,12 @@ export class SmoothlyPicker {
           {
             value: "select-none",
             name: this.selections.length == this.options.length ? this.selectNoneName : this.selectAllName,
-            left: this.getCheckHtml(this.selections.length == ((_c = this.options) === null || _c === void 0 ? void 0 : _c.length)),
+            checked: this.selections.length == this.options.length,
             divider: true,
           },
         ]
         : []),
-      ...((_d = this.options) !== null && _d !== void 0 ? _d : []),
+      ...((_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,
@@ -174,7 +172,7 @@ export class SmoothlyPicker {
             : 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%" }, 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 })));
+      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 })));
   }
   static get is() { return "smoothly-picker"; }
   static get encapsulation() { return "shadow"; }
@@ -225,8 +223,8 @@ export class SmoothlyPicker {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "\"inherit\"",
-        "resolved": "\"inherit\"",
+        "original": "string",
+        "resolved": "string",
         "references": {}
       },
       "required": false,
@@ -236,7 +234,8 @@ export class SmoothlyPicker {
         "text": ""
       },
       "attribute": "max-menu-height",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "\"inherit\""
     },
     "maxHeight": {
       "type": "string",
@@ -328,12 +327,12 @@ export class SmoothlyPicker {
     },
     "options": {
       "type": "unknown",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
-        "original": "OptionType[]",
-        "resolved": "OptionType[]",
+        "original": "(Option & { checked?: boolean })[]",
+        "resolved": "(Option & { checked?: boolean | undefined; })[]",
         "references": {
-          "OptionType": {
+          "Option": {
             "location": "import",
             "path": "../../model"
           }
@@ -385,10 +384,10 @@ export class SmoothlyPicker {
       "type": "unknown",
       "mutable": true,
       "complexType": {
-        "original": "OptionType[]",
-        "resolved": "OptionType[]",
+        "original": "Option[]",
+        "resolved": "Option[]",
         "references": {
-          "OptionType": {
+          "Option": {
             "location": "import",
             "path": "../../model"
           }
@@ -511,10 +510,10 @@ export class SmoothlyPicker {
         "text": ""
       },
       "complexType": {
-        "original": "OptionType[]",
-        "resolved": "OptionType[]",
+        "original": "Option[]",
+        "resolved": "Option[]",
         "references": {
-          "OptionType": {
+          "Option": {
             "location": "import",
             "path": "../../model"
           }
@@ -552,6 +551,12 @@ export class SmoothlyPicker {
       "target": undefined,
       "capture": false,
       "passive": false
+    }, {
+      "name": "optionUnselect",
+      "method": "optionSelectHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }, {
       "name": "optionAdd",
       "method": "optionAddHandler",

package/dist/collection/components/select-demo/index.js

@@ -50,11 +50,11 @@ export class SmoothlySelectDemo {
         h("smoothly-item", { value: "11" }, "November"),
         h("smoothly-item", { value: "12" }, "December")),
       h("button", { onClick: () => this.alertf() }, "press here"),
-      h("smoothly-picker", { label: "Filter", "empty-menu-label": "Sorry, we're out of options.", "max-height": "58px", multiple: true, options: [
+      h("smoothly-picker", { label: "Filter", "empty-menu-label": "Sorry, we're out of options.", "max-height": "58px", maxMenuHeight: "20rem", multiple: true, options: [
           { name: "Big Dog", value: "dog", aliases: ["WOFF"] },
-          { name: "Cat Stevens", value: "cat", aliases: ["moew"] },
+          { name: "Cat Stevens", value: "cat", aliases: ["moew"], hint: "moew" },
           { name: "Noble Pig", value: "pig" },
-          { name: "Turtle Wax", value: "turtle" },
+          { name: "Turtle Wax", value: "turtle", hint: "slow" },
           { name: "Spider Man", value: "spider" },
           { name: "Phoenix Order Long Wooord", value: "phoenix" },
           { name: "Horse Back", value: "horse" },
@@ -86,7 +86,7 @@ export class SmoothlySelectDemo {
         ], valueValidator: (email) => email.match(/^\w+@\w+/) ? [true, undefined] : [false, Notice.failed("Incorrectly formatted email")] }),
       h("br", null),
       h("smoothly-picker", { label: "Single select", multiple: false, "max-menu-height": "200px", options: [
-          { name: "Dog", value: "dog", aliases: ["WOFF"], right: "Woof 🐶" },
+          { name: "Dog", value: "dog", aliases: ["WOFF"], hint: "Woof 🐶" },
           { name: "Cat", value: "cat", aliases: ["moew"] },
           { name: "Pig", value: "pig" },
           { name: "Turtle", value: "turtle" },

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

@@ -40,7 +40,7 @@ export class SmoothlySkeleton {
     },
     "width": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",

package/dist/custom-elements/index.js

@@ -1716,16 +1716,16 @@ const SmoothlyAppDemo$1 = class extends HTMLElement {
         redirect("https://google.com");
       } }, "External")), h("smoothly-room", { path: /^\/routing\/\w+\/?/, label: "No effect" }, h("h2", null, "Regex routing")), h("smoothly-room", { path: "old", label: "Old", to: "select" }), h("span", { slot: "header", style: { width: "100%", maxWidth: "500px" } }, h("smoothly-picker", { label: "All Animals Selected", style: { minWidth: "100px" }, labelSetting: "hide", "empty-menu-label": "Sorry, we're out of options.", "max-height": "58px", multiple: true, "select-none-name": "Select All", options: [
         { name: "Big Dog", value: "dog", aliases: ["WOFF"] },
-        { name: "Cat Stevens", value: "cat", aliases: ["moew"], right: "🐈" },
-        { name: "Noble Pig", value: "pig", right: "🐷" },
-        { name: "Turtle Wax", value: "turtle", right: "" },
-        { name: "Spider Man", value: "spider", right: "" },
-        { name: "Phoenix Order Long Wooord", value: "phoenix", right: "" },
-        { name: "Horse Back", value: "horse", right: "" },
-        { name: "Unicorn Horn", value: "unicorn", right: "" },
-        { name: "Talking Parrot Parrot", value: "parrot", right: "" },
-        { name: "Hidden Dragon", value: "dragon", right: "" },
-        { name: "Scary Kraken", value: "kraken", right: "" },
+        { name: "Cat Stevens", value: "cat", aliases: ["moew"], hint: "moew 🐈" },
+        { name: "Noble Pig", value: "pig", hint: "🐷" },
+        { name: "Turtle Wax", value: "turtle" },
+        { name: "Spider Man", value: "spider" },
+        { name: "Phoenix Order Long Wooord", value: "phoenix" },
+        { name: "Horse Back", value: "horse" },
+        { name: "Unicorn Horn", value: "unicorn" },
+        { name: "Talking Parrot Parrot", value: "parrot" },
+        { name: "Hidden Dragon", value: "dragon" },
+        { name: "Scary Kraken", value: "kraken" },
       ] })), h("smoothly-trigger", { slot: "header", type: "link", name: "logout" }, h("smoothly-icon", { toolTip: "Log out", name: "log-out", size: "medium" }))));
   }
 };
@@ -35295,8 +35295,10 @@ const SmoothlyMenuOptions$1 = class extends HTMLElement {
     this.__registerHost();
     this.__attachShadow();
     this.menuEmpty = createEvent(this, "menuEmpty", 7);
+    this.optionElements = [];
     this.filteredOptions = [];
     this.highlightIndex = 0;
+    this.toggle = false;
     this.emptyMenuLabel = "No Options";
     this.newOptionLabel = "Add:";
     this.order = false;
@@ -35304,7 +35306,7 @@ const SmoothlyMenuOptions$1 = class extends HTMLElement {
     this.resetHighlightOnOptionsChange = true;
     this.mutable = false;
   }
-  optionsChangeHandler(newOptions) {
+  optionsChangeHandler() {
     this.highlightIndex = this.resetHighlightOnOptionsChange ? 0 : this.highlightIndex;
   }
   optionHoverHandler(event) {
@@ -35386,7 +35388,10 @@ const SmoothlyMenuOptions$1 = class extends HTMLElement {
     }
   }
   render() {
-    return (h(Host, { style: { "--max-menu-height": this.maxMenuHeight } }, this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (h("smoothly-option", { style: this.optionStyle, ref: el => index == 0 && (this.firstOptionsElement = el !== null && el !== void 0 ? el : this.firstOptionsElement), value: option.value, name: option.name, divider: option.divider, "data-highlight": this.highlightIndex == index }, option.left ? h("div", { slot: "left" }, option.left) : undefined, option.right ? h("div", { slot: "right" }, option.right) : undefined)))) : this.mutable ? (h("smoothly-option", { style: this.optionStyle, ref: el => (this.firstOptionsElement = el !== null && el !== void 0 ? el : this.firstOptionsElement), value: this.keyword, name: this.keyword, "data-highlight": 0, new: true }, h("div", { slot: "left" }, h("smoothly-icon", { name: "square-outline", size: "small" }), " ", this.newOptionLabel))) : (h("div", null, this.emptyMenuLabel))));
+    return (h(Host, { style: { "--max-menu-height": this.maxMenuHeight } }, this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (h("smoothly-option", { style: this.optionStyle, toggle: this.toggle, ref: el => {
+        index == 0 && (this.firstOptionsElement = el !== null && el !== void 0 ? el : this.firstOptionsElement);
+        el && (this.optionElements[index] = el);
+      }, checked: option.checked, value: option.value, name: option.name, divider: option.divider, "data-highlight": this.highlightIndex == index }, option.hint ? h("div", { slot: "hint" }, option.hint) : undefined)))) : this.mutable ? (h("smoothly-option", { style: this.optionStyle, value: this.keyword, name: this.keyword, "data-highlight": 0, new: true }, h("div", { slot: "left" }, h("smoothly-icon", { name: "square-outline", size: "small" }), " ", this.newOptionLabel))) : (h("div", null, this.emptyMenuLabel))));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -35479,7 +35484,7 @@ const Notifier = class extends HTMLElement {
   static get style() { return styleCss$q; }
 };
 
-const styleCss$p = ":host{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;padding:0.7em 1em;margin-left:1px;margin-right:1px;background-color:transparent;position:relative}:host([data-highlight]){background-color:rgb(var(--smoothly-default-shade))}:host>div.middle{padding-left:0.5em;flex-shrink:1;width:100%}:host([divider]){margin-bottom:0.5em}::slotted([slot=right]){font-style:italic;white-space:nowrap}:host([divider])::after{position:absolute;height:1px;width:100%;left:0;bottom:-0.25em;content:\"\";background-color:rgba(var(--smoothly-dark-color))}::slotted([slot=left]){display:flex;align-items:center;gap:1ch}";
+const styleCss$p = ":host{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;padding:0.7em 1em;margin-left:1px;margin-right:1px;background-color:transparent;position:relative}:host([data-highlight]){background-color:rgb(var(--smoothly-default-shade))}:host>div.name{padding-left:0.5em;flex-shrink:1;width:100%}:host([divider]){margin-bottom:0.5em}::slotted([slot=right]){font-style:italic;white-space:nowrap}:host([divider])::after{position:absolute;height:1px;width:100%;left:0;bottom:-0.25em;content:\"\";background-color:rgba(var(--smoothly-dark-color))}::slotted([slot=hint]){display:flex;align-items:center;gap:1ch;font-style:italic;white-space:nowrap}";
 
 const SmoothlyOption$1 = class extends HTMLElement {
   constructor() {
@@ -35488,23 +35493,30 @@ const SmoothlyOption$1 = class extends HTMLElement {
     this.__attachShadow();
     this.optionHover = createEvent(this, "optionHover", 7);
     this.optionSelect = createEvent(this, "optionSelect", 7);
+    this.optionUnselect = createEvent(this, "optionUnselect", 7);
     this.optionAdd = createEvent(this, "optionAdd", 7);
     this.dataHighlight = false;
     this.divider = false;
+    this.toggle = false;
+    this.checked = false;
   }
   onHover(event) {
     this.optionHover.emit({ name: this.name, value: this.value });
   }
   onSelect(event) {
-    if (this.value)
+    if (this.value) {
       this.new
         ? this.optionAdd.emit({ name: this.name, value: this.value })
-        : this.optionSelect.emit({ name: this.name, value: this.value });
+        : !this.toggle || (this.toggle && !this.checked)
+          ? this.optionSelect.emit({ name: this.name, value: this.value })
+          : this.optionUnselect.emit({ name: this.name, value: this.value });
+      this.toggle && (this.checked = !this.checked);
+    }
     else
       throw `smoothly-option ${this.element.innerHTML} lacks value-property and can therefore not be selected`;
   }
   render() {
-    return (h(Host, { onMouseDown: (e) => this.onSelect(e), onMouseOver: (e) => this.onHover(e) }, h("slot", { name: "left" }), h("div", { class: "middle" }, this.name), h("slot", { name: "right" })));
+    return (h(Host, { onMouseDown: (e) => this.onSelect(e), onMouseOver: (e) => this.onHover(e) }, this.toggle && h("smoothly-icon", { name: this.checked ? "checkbox" : "square-outline" }), h("div", { class: "name" }, this.name), h("smoothly-quiet", null, h("slot", { name: "hint" }))));
   }
   get element() { return this; }
   static get style() { return styleCss$p; }
@@ -35522,6 +35534,7 @@ const SmoothlyPicker$1 = class extends HTMLElement {
     this.keepFocusOnReRender = false;
     this.disabled = false;
     this.readonly = false;
+    this.maxMenuHeight = "inherit";
     this.emptyMenuLabel = "No Options";
     this.multiple = false;
     this.mutable = false;
@@ -35658,17 +35671,14 @@ const SmoothlyPicker$1 = class extends HTMLElement {
     this.isOpen = false;
     this.filterOptions();
   }
-  getCheckHtml(checked) {
-    return checked ? (h("smoothly-icon", { name: "checkbox", size: "small" })) : (h("smoothly-icon", { name: "square-outline", size: "small" }));
-  }
   render() {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     const cssVariables = {
       "--max-height": (_a = this.maxHeight) !== null && _a !== void 0 ? _a : "inherit",
       "--label-display": this.labelSetting == "hide" ? "none" : "absolute",
     };
     (_b = this.options) === null || _b === void 0 ? void 0 : _b.forEach(o => {
-      o.left = this.getCheckHtml(this.selections.map(s => s.value).includes(o.value));
+      o.checked = this.selections.map(s => s.value).includes(o.value);
     });
     const options = [
       ...(this.multiple
@@ -35676,16 +35686,16 @@ const SmoothlyPicker$1 = class extends HTMLElement {
           {
             value: "select-none",
             name: this.selections.length == this.options.length ? this.selectNoneName : this.selectAllName,
-            left: this.getCheckHtml(this.selections.length == ((_c = this.options) === null || _c === void 0 ? void 0 : _c.length)),
+            checked: this.selections.length == this.options.length,
             divider: true,
           },
         ]
         : []),
-      ...((_d = this.options) !== null && _d !== void 0 ? _d : []),
+      ...((_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
         ? 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%" }, 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 })));
+        : 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 })));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -35940,11 +35950,11 @@ const SmoothlySelectDemo$1 = class extends HTMLElement {
         } }),
       h("smoothly-selector", null, h("smoothly-item", { value: "1" }, "January"), h("smoothly-item", { value: "2" }, "February"), h("smoothly-item", { value: "3" }, "March"), h("smoothly-item", { value: "4" }, "April"), h("smoothly-item", { value: "5" }, "May"), h("smoothly-item", { value: "6" }, "June"), h("smoothly-item", { value: "7" }, "July"), h("smoothly-item", { value: "8" }, "August"), h("smoothly-item", { value: "9" }, "September"), h("smoothly-item", { value: "10" }, "October"), h("smoothly-item", { value: "11" }, "November"), h("smoothly-item", { value: "12" }, "December")),
       h("button", { onClick: () => this.alertf() }, "press here"),
-      h("smoothly-picker", { label: "Filter", "empty-menu-label": "Sorry, we're out of options.", "max-height": "58px", multiple: true, options: [
+      h("smoothly-picker", { label: "Filter", "empty-menu-label": "Sorry, we're out of options.", "max-height": "58px", maxMenuHeight: "20rem", multiple: true, options: [
           { name: "Big Dog", value: "dog", aliases: ["WOFF"] },
-          { name: "Cat Stevens", value: "cat", aliases: ["moew"] },
+          { name: "Cat Stevens", value: "cat", aliases: ["moew"], hint: "moew" },
           { name: "Noble Pig", value: "pig" },
-          { name: "Turtle Wax", value: "turtle" },
+          { name: "Turtle Wax", value: "turtle", hint: "slow" },
           { name: "Spider Man", value: "spider" },
           { name: "Phoenix Order Long Wooord", value: "phoenix" },
           { name: "Horse Back", value: "horse" },
@@ -35976,7 +35986,7 @@ const SmoothlySelectDemo$1 = class extends HTMLElement {
         ], valueValidator: (email) => email.match(/^\w+@\w+/) ? [true, undefined] : [false, Notice.failed("Incorrectly formatted email")] }),
       h("br", null),
       h("smoothly-picker", { label: "Single select", multiple: false, "max-menu-height": "200px", options: [
-          { name: "Dog", value: "dog", aliases: ["WOFF"], right: "Woof 🐶" },
+          { name: "Dog", value: "dog", aliases: ["WOFF"], hint: "Woof 🐶" },
           { name: "Cat", value: "cat", aliases: ["moew"] },
           { name: "Pig", value: "pig" },
           { name: "Turtle", value: "turtle" },
@@ -36592,11 +36602,11 @@ const SmoothlyInputDateRange = /*@__PURE__*/proxyCustomElement(InputDateRange, [
 const SmoothlyInputDemo = /*@__PURE__*/proxyCustomElement(SmoothlyInputDemo$1, [0,"smoothly-input-demo"]);
 const SmoothlyInputMonth = /*@__PURE__*/proxyCustomElement(MonthSelector, [2,"smoothly-input-month",{"value":[1025]}]);
 const SmoothlyItem = /*@__PURE__*/proxyCustomElement(Item, [6,"smoothly-item",{"value":[8],"selected":[1540]},[[0,"click","onClick"]]]);
-const SmoothlyMenuOptions = /*@__PURE__*/proxyCustomElement(SmoothlyMenuOptions$1, [1,"smoothly-menu-options",{"emptyMenuLabel":[1025,"empty-menu-label"],"newOptionLabel":[1,"new-option-label"],"maxMenuHeight":[1,"max-menu-height"],"order":[4],"optionStyle":[8,"option-style"],"options":[1040],"resetHighlightOnOptionsChange":[1028,"reset-highlight-on-options-change"],"mutable":[4],"filteredOptions":[32],"highlightIndex":[32],"keyword":[32]},[[0,"optionHover","optionHoverHandler"]]]);
+const SmoothlyMenuOptions = /*@__PURE__*/proxyCustomElement(SmoothlyMenuOptions$1, [1,"smoothly-menu-options",{"toggle":[4],"emptyMenuLabel":[1025,"empty-menu-label"],"newOptionLabel":[1,"new-option-label"],"maxMenuHeight":[1,"max-menu-height"],"order":[4],"optionStyle":[8,"option-style"],"options":[1040],"resetHighlightOnOptionsChange":[1028,"reset-highlight-on-options-change"],"mutable":[4],"filteredOptions":[32],"highlightIndex":[32],"keyword":[32]},[[0,"optionHover","optionHoverHandler"]]]);
 const SmoothlyNotification = /*@__PURE__*/proxyCustomElement(Notification, [2,"smoothly-notification",{"notice":[16],"tick":[32]},[[0,"trigger","onTrigger"]]]);
 const SmoothlyNotifier = /*@__PURE__*/proxyCustomElement(Notifier, [6,"smoothly-notifier",{"notices":[32]},[[0,"notice","onNotice"],[0,"remove","onRemove"]]]);
-const SmoothlyOption = /*@__PURE__*/proxyCustomElement(SmoothlyOption$1, [1,"smoothly-option",{"aliases":[513],"dataHighlight":[1540,"data-highlight"],"name":[1537],"value":[1537],"divider":[1540],"new":[4]}]);
-const SmoothlyPicker = /*@__PURE__*/proxyCustomElement(SmoothlyPicker$1, [1,"smoothly-picker",{"disabled":[516],"readonly":[516],"maxMenuHeight":[1,"max-menu-height"],"maxHeight":[1,"max-height"],"emptyMenuLabel":[1025,"empty-menu-label"],"multiple":[516],"mutable":[4],"optionStyle":[8,"option-style"],"options":[16],"labelSetting":[513,"label-setting"],"label":[513],"selections":[1040],"selectNoneName":[1025,"select-none-name"],"selectAllName":[1025,"select-all-name"],"selectionName":[1025,"selection-name"],"newOptionLabel":[1025,"new-option-label"],"valueValidator":[16],"isOpen":[32],"empty":[32]},[[0,"optionSelect","optionSelectHandler"],[0,"optionAdd","optionAddHandler"],[0,"menuEmpty","emptyHandler"]]]);
+const SmoothlyOption = /*@__PURE__*/proxyCustomElement(SmoothlyOption$1, [1,"smoothly-option",{"aliases":[513],"dataHighlight":[1540,"data-highlight"],"name":[1537],"value":[1537],"divider":[1540],"checkbox":[4],"new":[4],"toggle":[4],"checked":[1028]}]);
+const SmoothlyPicker = /*@__PURE__*/proxyCustomElement(SmoothlyPicker$1, [1,"smoothly-picker",{"disabled":[516],"readonly":[516],"maxMenuHeight":[1,"max-menu-height"],"maxHeight":[1,"max-height"],"emptyMenuLabel":[1025,"empty-menu-label"],"multiple":[516],"mutable":[4],"optionStyle":[8,"option-style"],"options":[1040],"labelSetting":[513,"label-setting"],"label":[513],"selections":[1040],"selectNoneName":[1025,"select-none-name"],"selectAllName":[1025,"select-all-name"],"selectionName":[1025,"selection-name"],"newOptionLabel":[1025,"new-option-label"],"valueValidator":[16],"isOpen":[32],"empty":[32]},[[0,"optionSelect","optionSelectHandler"],[0,"optionUnselect","optionSelectHandler"],[0,"optionAdd","optionAddHandler"],[0,"menuEmpty","emptyHandler"]]]);
 const SmoothlyPopup = /*@__PURE__*/proxyCustomElement(SmoothlyPopup$1, [6,"smoothly-popup",{"visible":[1540],"direction":[1537],"cssVariables":[32]}]);
 const SmoothlyQuiet = /*@__PURE__*/proxyCustomElement(SmoothlyQuiet$1, [6,"smoothly-quiet",{"color":[1]}]);
 const SmoothlyRadio = /*@__PURE__*/proxyCustomElement(SmoothlyRadio$1, [6,"smoothly-radio",{"name":[1],"value":[1],"checked":[1540],"tabIndex":[2,"tab-index"]}]);
@@ -36606,7 +36616,7 @@ const SmoothlyRoom = /*@__PURE__*/proxyCustomElement(SmoothlyRoom$1, [4,"smoothl
 const SmoothlySelect = /*@__PURE__*/proxyCustomElement(SmoothlySelect$1, [6,"smoothly-select",{"identifier":[1],"background":[513],"value":[1025]}]);
 const SmoothlySelectDemo = /*@__PURE__*/proxyCustomElement(SmoothlySelectDemo$1, [2,"smoothly-select-demo",null,[[0,"selectionChanged","handleSelectionChanged"]]]);
 const SmoothlySelector = /*@__PURE__*/proxyCustomElement(Selector, [6,"smoothly-selector",{"opened":[32],"selectedElement":[32],"missing":[32],"filter":[32]},[[0,"click","onClick"],[0,"itemSelected","onItemSelected"],[0,"keydown","onKeyDown"]]]);
-const SmoothlySkeleton = /*@__PURE__*/proxyCustomElement(SmoothlySkeleton$1, [2,"smoothly-skeleton",{"widths":[16],"width":[1],"color":[1],"period":[2],"distance":[1],"align":[513]}]);
+const SmoothlySkeleton = /*@__PURE__*/proxyCustomElement(SmoothlySkeleton$1, [2,"smoothly-skeleton",{"widths":[16],"width":[1025],"color":[1],"period":[2],"distance":[1],"align":[513]}]);
 const SmoothlySpinner = /*@__PURE__*/proxyCustomElement(SmoothlySpinner$1, [2,"smoothly-spinner",{"active":[516],"size":[513]}]);
 const SmoothlySubmit = /*@__PURE__*/proxyCustomElement(SmoothlySubmit$1, [6,"smoothly-submit",{"processing":[1540],"color":[513],"expand":[513],"fill":[513],"disabled":[516],"prevent":[4]},[[0,"click","handleSubmit"]]]);
 const SmoothlySvg = /*@__PURE__*/proxyCustomElement(SmoothlySvg$1, [2,"smoothly-svg",{"url":[513],"size":[513],"color":[1]}]);

package/dist/esm/loader.js

@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["smoothly-google-font",[[2,"smoothly-google-font",{"value":[1]}]]],["smoothly-radio-group",[[4,"smoothly-radio-group",{"orientation":[513]}]]],["smoothly-reorder",[[0,"smoothly-reorder"]]],["smoothly-svg",[[2,"smoothly-svg",{"url":[513],"size":[513],"color":[1]}]]],["smoothly-trigger-sink",[[6,"smoothly-trigger-sink",{"context":[16],"destination":[1],"filter":[1]},[[0,"trigger","TriggerListener"]]]]],["smoothly-trigger-source",[[6,"smoothly-trigger-source",{"listen":[1]}]]],["smoothly-accordion_50",[[0,"smoothly-app-demo",{"baseUrl":[1,"base-url"]}],[0,"smoothly-input-demo"],[2,"smoothly-select-demo",null,[[0,"selectionChanged","handleSelectionChanged"]]],[2,"smoothly-table-demo"],[0,"smoothly-display-demo"],[4,"smoothly-app",{"color":[1]}],[0,"smoothly-dialog-demo"],[2,"smoothly-icon-demo"],[6,"smoothly-button",{"color":[513],"expand":[513],"fill":[513],"disabled":[516],"type":[513],"link":[1],"download":[4]}],[4,"smoothly-room",{"label":[1],"icon":[1],"path":[1],"to":[1]}],[2,"smoothly-input-date-range",{"value":[1025],"start":[1025],"end":[1025],"max":[1025],"min":[1025],"open":[1028],"showLabel":[516,"show-label"]},[[0,"startChanged","onStartChanged"],[0,"endChanged","onEndChanged"],[0,"dateRangeSet","onDateRangeSet"]]],[6,"smoothly-notifier",{"notices":[32]},[[0,"notice","onNotice"],[0,"remove","onRemove"]]],[1,"smoothly-picker",{"disabled":[516],"readonly":[516],"maxMenuHeight":[1,"max-menu-height"],"maxHeight":[1,"max-height"],"emptyMenuLabel":[1025,"empty-menu-label"],"multiple":[516],"mutable":[4],"optionStyle":[8,"option-style"],"options":[16],"labelSetting":[513,"label-setting"],"label":[513],"selections":[1040],"selectNoneName":[1025,"select-none-name"],"selectAllName":[1025,"select-all-name"],"selectionName":[1025,"selection-name"],"newOptionLabel":[1025,"new-option-label"],"valueValidator":[16],"isOpen":[32],"empty":[32]},[[0,"optionSelect","optionSelectHandler"],[0,"optionAdd","optionAddHandler"],[0,"menuEmpty","emptyHandler"]]],[6,"smoothly-dialog",{"color":[513],"open":[1540],"closable":[516],"header":[513]},[[0,"trigger","TriggerListener"]]],[2,"smoothly-backtotop",{"opacity":[1],"bottom":[1],"right":[1],"visible":[32]}],[2,"smoothly-checkbox",{"selectAll":[4,"select-all"],"size":[1],"intermediate":[1540],"selected":[1540],"disabled":[1540],"t":[32]}],[6,"smoothly-submit",{"processing":[1540],"color":[513],"expand":[513],"fill":[513],"disabled":[516],"prevent":[4],"submit":[64]},[[0,"click","handleSubmit"]]],[6,"smoothly-table-expandable-cell",{"align":[1],"open":[1540]},[[0,"click","onClick"]]],[6,"smoothly-table-expandable-row",{"align":[1],"open":[1540]},[[0,"click","onClick"]]],[0,"smoothly-urlencoded",{"data":[1]}],[6,"smoothly-accordion",{"value":[1025]},[[0,"smoothlyOpen","handleOpenClose"],[0,"smoothlyClose","handleOpenClose"],[0,"smoothlyAccordionItemDidLoad","onAccordionItemDidLoad"],[0,"smoothlyAccordionItemDidUnload","onAccordionItemDidUnload"]]],[6,"smoothly-accordion-item",{"name":[1],"brand":[1],"open":[1540]}],[2,"smoothly-display",{"type":[1],"value":[8],"currency":[1],"country":[1],"format":[16]}],[2,"smoothly-display-amount",{"amount":[8],"currency":[1]}],[2,"smoothly-frame",{"url":[1],"name":[1],"origin":[1],"send":[64]}],[6,"smoothly-popup",{"visible":[1540],"direction":[1537],"cssVariables":[32]}],[6,"smoothly-quiet",{"color":[1]}],[6,"smoothly-radio",{"name":[1],"value":[1],"checked":[1540],"tabIndex":[2,"tab-index"]}],[6,"smoothly-select",{"identifier":[1],"background":[513],"value":[1025]}],[2,"smoothly-skeleton",{"widths":[16],"width":[1],"color":[1],"period":[2],"distance":[1],"align":[513]}],[6,"smoothly-table",null,[[0,"expansionLoad","handleEvents"],[0,"expansionOpen","handleEvents"]]],[6,"smoothly-table-cell"],[6,"smoothly-table-header",{"name":[1]}],[6,"smoothly-table-row",null,[[0,"expansionLoad","onExpansionLoad"],[0,"expansionOpen","onExpansionOpen"]]],[6,"smoothly-input-date",{"name":[513],"value":[1025],"open":[1028],"max":[1025],"min":[1025],"disabled":[1028]},[[0,"dateSet","dateSetHandler"]]],[1,"smoothly-menu-options",{"emptyMenuLabel":[1025,"empty-menu-label"],"newOptionLabel":[1,"new-option-label"],"maxMenuHeight":[1,"max-menu-height"],"order":[4],"optionStyle":[8,"option-style"],"options":[1040],"resetHighlightOnOptionsChange":[1028,"reset-highlight-on-options-change"],"mutable":[4],"filteredOptions":[32],"highlightIndex":[32],"keyword":[32],"moveHighlight":[64],"setHighlight":[64],"getHighlighted":[64],"filterOptions":[64]},[[0,"optionHover","optionHoverHandler"]]],[2,"smoothly-notification",{"notice":[16],"tick":[32]},[[0,"trigger","onTrigger"]]],[2,"smoothly-display-date-time",{"datetime":[1]}],[2,"smoothly-spinner",{"active":[516],"size":[513]}],[6,"smoothly-tab",{"label":[1],"open":[1540]},[[0,"click","onClick"]]],[6,"smoothly-tab-switch",{"selectedElement":[32]},[[0,"expansionOpen","openChanged"]]],[0,"smoothly-tuple",{"tuple":[16]}],[1,"smoothly-option",{"aliases":[513],"dataHighlight":[1540,"data-highlight"],"name":[1537],"value":[1537],"divider":[1540],"new":[4]}],[2,"smoothly-calendar",{"month":[1025],"value":[1025],"start":[1025],"end":[1025],"max":[1025],"min":[1025],"doubleInput":[516,"double-input"],"firstSelected":[32]}],[6,"smoothly-input",{"name":[513],"value":[1032],"type":[513],"required":[1540],"minLength":[1026,"min-length"],"showLabel":[516,"show-label"],"maxLength":[1026,"max-length"],"autocomplete":[1028],"pattern":[1040],"placeholder":[1025],"disabled":[1028],"readonly":[1028],"currency":[513],"initialValue":[32],"getFormData":[64],"setKeepFocusOnReRender":[64],"setSelectionRange":[64]}],[2,"smoothly-input-month",{"value":[1025]}],[6,"smoothly-selector",{"opened":[32],"selectedElement":[32],"missing":[32],"filter":[32]},[[0,"click","onClick"],[0,"itemSelected","onItemSelected"],[0,"keydown","onKeyDown"]]],[6,"smoothly-item",{"value":[8],"selected":[1540],"filter":[64]},[[0,"click","onClick"]]],[6,"smoothly-trigger",{"color":[513],"expand":[513],"fill":[513],"disabled":[516],"type":[513],"name":[1],"value":[8]},[[0,"click","onClick"]]],[2,"smoothly-icon",{"color":[513],"fill":[513],"name":[1],"size":[513],"toolTip":[1,"tool-tip"],"document":[32]}]]]], options);
+  return bootstrapLazy([["smoothly-google-font",[[2,"smoothly-google-font",{"value":[1]}]]],["smoothly-radio-group",[[4,"smoothly-radio-group",{"orientation":[513]}]]],["smoothly-reorder",[[0,"smoothly-reorder"]]],["smoothly-svg",[[2,"smoothly-svg",{"url":[513],"size":[513],"color":[1]}]]],["smoothly-trigger-sink",[[6,"smoothly-trigger-sink",{"context":[16],"destination":[1],"filter":[1]},[[0,"trigger","TriggerListener"]]]]],["smoothly-trigger-source",[[6,"smoothly-trigger-source",{"listen":[1]}]]],["smoothly-accordion_50",[[0,"smoothly-app-demo",{"baseUrl":[1,"base-url"]}],[0,"smoothly-input-demo"],[2,"smoothly-select-demo",null,[[0,"selectionChanged","handleSelectionChanged"]]],[2,"smoothly-table-demo"],[0,"smoothly-display-demo"],[4,"smoothly-app",{"color":[1]}],[0,"smoothly-dialog-demo"],[2,"smoothly-icon-demo"],[6,"smoothly-button",{"color":[513],"expand":[513],"fill":[513],"disabled":[516],"type":[513],"link":[1],"download":[4]}],[4,"smoothly-room",{"label":[1],"icon":[1],"path":[1],"to":[1]}],[2,"smoothly-input-date-range",{"value":[1025],"start":[1025],"end":[1025],"max":[1025],"min":[1025],"open":[1028],"showLabel":[516,"show-label"]},[[0,"startChanged","onStartChanged"],[0,"endChanged","onEndChanged"],[0,"dateRangeSet","onDateRangeSet"]]],[1,"smoothly-picker",{"disabled":[516],"readonly":[516],"maxMenuHeight":[1,"max-menu-height"],"maxHeight":[1,"max-height"],"emptyMenuLabel":[1025,"empty-menu-label"],"multiple":[516],"mutable":[4],"optionStyle":[8,"option-style"],"options":[1040],"labelSetting":[513,"label-setting"],"label":[513],"selections":[1040],"selectNoneName":[1025,"select-none-name"],"selectAllName":[1025,"select-all-name"],"selectionName":[1025,"selection-name"],"newOptionLabel":[1025,"new-option-label"],"valueValidator":[16],"isOpen":[32],"empty":[32]},[[0,"optionSelect","optionSelectHandler"],[0,"optionUnselect","optionSelectHandler"],[0,"optionAdd","optionAddHandler"],[0,"menuEmpty","emptyHandler"]]],[6,"smoothly-notifier",{"notices":[32]},[[0,"notice","onNotice"],[0,"remove","onRemove"]]],[6,"smoothly-dialog",{"color":[513],"open":[1540],"closable":[516],"header":[513]},[[0,"trigger","TriggerListener"]]],[2,"smoothly-backtotop",{"opacity":[1],"bottom":[1],"right":[1],"visible":[32]}],[2,"smoothly-checkbox",{"selectAll":[4,"select-all"],"size":[1],"intermediate":[1540],"selected":[1540],"disabled":[1540],"t":[32]}],[6,"smoothly-submit",{"processing":[1540],"color":[513],"expand":[513],"fill":[513],"disabled":[516],"prevent":[4],"submit":[64]},[[0,"click","handleSubmit"]]],[6,"smoothly-table-expandable-cell",{"align":[1],"open":[1540]},[[0,"click","onClick"]]],[6,"smoothly-table-expandable-row",{"align":[1],"open":[1540]},[[0,"click","onClick"]]],[0,"smoothly-urlencoded",{"data":[1]}],[6,"smoothly-accordion",{"value":[1025]},[[0,"smoothlyOpen","handleOpenClose"],[0,"smoothlyClose","handleOpenClose"],[0,"smoothlyAccordionItemDidLoad","onAccordionItemDidLoad"],[0,"smoothlyAccordionItemDidUnload","onAccordionItemDidUnload"]]],[6,"smoothly-accordion-item",{"name":[1],"brand":[1],"open":[1540]}],[2,"smoothly-display",{"type":[1],"value":[8],"currency":[1],"country":[1],"format":[16]}],[2,"smoothly-display-amount",{"amount":[8],"currency":[1]}],[2,"smoothly-frame",{"url":[1],"name":[1],"origin":[1],"send":[64]}],[6,"smoothly-popup",{"visible":[1540],"direction":[1537],"cssVariables":[32]}],[6,"smoothly-radio",{"name":[1],"value":[1],"checked":[1540],"tabIndex":[2,"tab-index"]}],[6,"smoothly-select",{"identifier":[1],"background":[513],"value":[1025]}],[2,"smoothly-skeleton",{"widths":[16],"width":[1025],"color":[1],"period":[2],"distance":[1],"align":[513]}],[6,"smoothly-table",null,[[0,"expansionLoad","handleEvents"],[0,"expansionOpen","handleEvents"]]],[6,"smoothly-table-cell"],[6,"smoothly-table-header",{"name":[1]}],[6,"smoothly-table-row",null,[[0,"expansionLoad","onExpansionLoad"],[0,"expansionOpen","onExpansionOpen"]]],[6,"smoothly-input-date",{"name":[513],"value":[1025],"open":[1028],"max":[1025],"min":[1025],"disabled":[1028]},[[0,"dateSet","dateSetHandler"]]],[1,"smoothly-menu-options",{"toggle":[4],"emptyMenuLabel":[1025,"empty-menu-label"],"newOptionLabel":[1,"new-option-label"],"maxMenuHeight":[1,"max-menu-height"],"order":[4],"optionStyle":[8,"option-style"],"options":[1040],"resetHighlightOnOptionsChange":[1028,"reset-highlight-on-options-change"],"mutable":[4],"filteredOptions":[32],"highlightIndex":[32],"keyword":[32],"moveHighlight":[64],"setHighlight":[64],"getHighlighted":[64],"filterOptions":[64]},[[0,"optionHover","optionHoverHandler"]]],[2,"smoothly-notification",{"notice":[16],"tick":[32]},[[0,"trigger","onTrigger"]]],[2,"smoothly-display-date-time",{"datetime":[1]}],[2,"smoothly-spinner",{"active":[516],"size":[513]}],[6,"smoothly-tab",{"label":[1],"open":[1540]},[[0,"click","onClick"]]],[6,"smoothly-tab-switch",{"selectedElement":[32]},[[0,"expansionOpen","openChanged"]]],[0,"smoothly-tuple",{"tuple":[16]}],[1,"smoothly-option",{"aliases":[513],"dataHighlight":[1540,"data-highlight"],"name":[1537],"value":[1537],"divider":[1540],"checkbox":[4],"new":[4],"toggle":[4],"checked":[1028]}],[2,"smoothly-calendar",{"month":[1025],"value":[1025],"start":[1025],"end":[1025],"max":[1025],"min":[1025],"doubleInput":[516,"double-input"],"firstSelected":[32]}],[6,"smoothly-input",{"name":[513],"value":[1032],"type":[513],"required":[1540],"minLength":[1026,"min-length"],"showLabel":[516,"show-label"],"maxLength":[1026,"max-length"],"autocomplete":[1028],"pattern":[1040],"placeholder":[1025],"disabled":[1028],"readonly":[1028],"currency":[513],"initialValue":[32],"getFormData":[64],"setKeepFocusOnReRender":[64],"setSelectionRange":[64]}],[2,"smoothly-input-month",{"value":[1025]}],[6,"smoothly-quiet",{"color":[1]}],[6,"smoothly-selector",{"opened":[32],"selectedElement":[32],"missing":[32],"filter":[32]},[[0,"click","onClick"],[0,"itemSelected","onItemSelected"],[0,"keydown","onKeyDown"]]],[6,"smoothly-item",{"value":[8],"selected":[1540],"filter":[64]},[[0,"click","onClick"]]],[6,"smoothly-trigger",{"color":[513],"expand":[513],"fill":[513],"disabled":[516],"type":[513],"name":[1],"value":[8]},[[0,"click","onClick"]]],[2,"smoothly-icon",{"color":[513],"fill":[513],"name":[1],"size":[513],"toolTip":[1,"tool-tip"],"document":[32]}]]]], options);
   });
 };
 

package/dist/esm/smoothly-accordion_50.entry.js

@@ -121,16 +121,16 @@ const SmoothlyAppDemo = class {
         redirect("https://google.com");
       } }, "External")), h("smoothly-room", { path: /^\/routing\/\w+\/?/, label: "No effect" }, h("h2", null, "Regex routing")), h("smoothly-room", { path: "old", label: "Old", to: "select" }), h("span", { slot: "header", style: { width: "100%", maxWidth: "500px" } }, h("smoothly-picker", { label: "All Animals Selected", style: { minWidth: "100px" }, labelSetting: "hide", "empty-menu-label": "Sorry, we're out of options.", "max-height": "58px", multiple: true, "select-none-name": "Select All", options: [
         { name: "Big Dog", value: "dog", aliases: ["WOFF"] },
-        { name: "Cat Stevens", value: "cat", aliases: ["moew"], right: "🐈" },
-        { name: "Noble Pig", value: "pig", right: "🐷" },
-        { name: "Turtle Wax", value: "turtle", right: "" },
-        { name: "Spider Man", value: "spider", right: "" },
-        { name: "Phoenix Order Long Wooord", value: "phoenix", right: "" },
-        { name: "Horse Back", value: "horse", right: "" },
-        { name: "Unicorn Horn", value: "unicorn", right: "" },
-        { name: "Talking Parrot Parrot", value: "parrot", right: "" },
-        { name: "Hidden Dragon", value: "dragon", right: "" },
-        { name: "Scary Kraken", value: "kraken", right: "" },
+        { name: "Cat Stevens", value: "cat", aliases: ["moew"], hint: "moew 🐈" },
+        { name: "Noble Pig", value: "pig", hint: "🐷" },
+        { name: "Turtle Wax", value: "turtle" },
+        { name: "Spider Man", value: "spider" },
+        { name: "Phoenix Order Long Wooord", value: "phoenix" },
+        { name: "Horse Back", value: "horse" },
+        { name: "Unicorn Horn", value: "unicorn" },
+        { name: "Talking Parrot Parrot", value: "parrot" },
+        { name: "Hidden Dragon", value: "dragon" },
+        { name: "Scary Kraken", value: "kraken" },
       ] })), h("smoothly-trigger", { slot: "header", type: "link", name: "logout" }, h("smoothly-icon", { toolTip: "Log out", name: "log-out", size: "medium" }))));
   }
 };
@@ -33669,8 +33669,10 @@ const SmoothlyMenuOptions = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.menuEmpty = createEvent(this, "menuEmpty", 7);
+    this.optionElements = [];
     this.filteredOptions = [];
     this.highlightIndex = 0;
+    this.toggle = false;
     this.emptyMenuLabel = "No Options";
     this.newOptionLabel = "Add:";
     this.order = false;
@@ -33678,7 +33680,7 @@ const SmoothlyMenuOptions = class {
     this.resetHighlightOnOptionsChange = true;
     this.mutable = false;
   }
-  optionsChangeHandler(newOptions) {
+  optionsChangeHandler() {
     this.highlightIndex = this.resetHighlightOnOptionsChange ? 0 : this.highlightIndex;
   }
   optionHoverHandler(event) {
@@ -33760,7 +33762,10 @@ const SmoothlyMenuOptions = class {
     }
   }
   render() {
-    return (h(Host, { style: { "--max-menu-height": this.maxMenuHeight } }, this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (h("smoothly-option", { style: this.optionStyle, ref: el => index == 0 && (this.firstOptionsElement = el !== null && el !== void 0 ? el : this.firstOptionsElement), value: option.value, name: option.name, divider: option.divider, "data-highlight": this.highlightIndex == index }, option.left ? h("div", { slot: "left" }, option.left) : undefined, option.right ? h("div", { slot: "right" }, option.right) : undefined)))) : this.mutable ? (h("smoothly-option", { style: this.optionStyle, ref: el => (this.firstOptionsElement = el !== null && el !== void 0 ? el : this.firstOptionsElement), value: this.keyword, name: this.keyword, "data-highlight": 0, new: true }, h("div", { slot: "left" }, h("smoothly-icon", { name: "square-outline", size: "small" }), " ", this.newOptionLabel))) : (h("div", null, this.emptyMenuLabel))));
+    return (h(Host, { style: { "--max-menu-height": this.maxMenuHeight } }, this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (h("smoothly-option", { style: this.optionStyle, toggle: this.toggle, ref: el => {
+        index == 0 && (this.firstOptionsElement = el !== null && el !== void 0 ? el : this.firstOptionsElement);
+        el && (this.optionElements[index] = el);
+      }, checked: option.checked, value: option.value, name: option.name, divider: option.divider, "data-highlight": this.highlightIndex == index }, option.hint ? h("div", { slot: "hint" }, option.hint) : undefined)))) : this.mutable ? (h("smoothly-option", { style: this.optionStyle, value: this.keyword, name: this.keyword, "data-highlight": 0, new: true }, h("div", { slot: "left" }, h("smoothly-icon", { name: "square-outline", size: "small" }), " ", this.newOptionLabel))) : (h("div", null, this.emptyMenuLabel))));
   }
   get element() { return getElement(this); }
   static get watchers() { return {
@@ -33851,30 +33856,37 @@ const Notifier = class {
 };
 Notifier.style = styleCss$l;
 
-const styleCss$k = ":host{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;padding:0.7em 1em;margin-left:1px;margin-right:1px;background-color:transparent;position:relative}:host([data-highlight]){background-color:rgb(var(--smoothly-default-shade))}:host>div.middle{padding-left:0.5em;flex-shrink:1;width:100%}:host([divider]){margin-bottom:0.5em}::slotted([slot=right]){font-style:italic;white-space:nowrap}:host([divider])::after{position:absolute;height:1px;width:100%;left:0;bottom:-0.25em;content:\"\";background-color:rgba(var(--smoothly-dark-color))}::slotted([slot=left]){display:flex;align-items:center;gap:1ch}";
+const styleCss$k = ":host{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;padding:0.7em 1em;margin-left:1px;margin-right:1px;background-color:transparent;position:relative}:host([data-highlight]){background-color:rgb(var(--smoothly-default-shade))}:host>div.name{padding-left:0.5em;flex-shrink:1;width:100%}:host([divider]){margin-bottom:0.5em}::slotted([slot=right]){font-style:italic;white-space:nowrap}:host([divider])::after{position:absolute;height:1px;width:100%;left:0;bottom:-0.25em;content:\"\";background-color:rgba(var(--smoothly-dark-color))}::slotted([slot=hint]){display:flex;align-items:center;gap:1ch;font-style:italic;white-space:nowrap}";
 
 const SmoothlyOption = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.optionHover = createEvent(this, "optionHover", 7);
     this.optionSelect = createEvent(this, "optionSelect", 7);
+    this.optionUnselect = createEvent(this, "optionUnselect", 7);
     this.optionAdd = createEvent(this, "optionAdd", 7);
     this.dataHighlight = false;
     this.divider = false;
+    this.toggle = false;
+    this.checked = false;
   }
   onHover(event) {
     this.optionHover.emit({ name: this.name, value: this.value });
   }
   onSelect(event) {
-    if (this.value)
+    if (this.value) {
       this.new
         ? this.optionAdd.emit({ name: this.name, value: this.value })
-        : this.optionSelect.emit({ name: this.name, value: this.value });
+        : !this.toggle || (this.toggle && !this.checked)
+          ? this.optionSelect.emit({ name: this.name, value: this.value })
+          : this.optionUnselect.emit({ name: this.name, value: this.value });
+      this.toggle && (this.checked = !this.checked);
+    }
     else
       throw `smoothly-option ${this.element.innerHTML} lacks value-property and can therefore not be selected`;
   }
   render() {
-    return (h(Host, { onMouseDown: (e) => this.onSelect(e), onMouseOver: (e) => this.onHover(e) }, h("slot", { name: "left" }), h("div", { class: "middle" }, this.name), h("slot", { name: "right" })));
+    return (h(Host, { onMouseDown: (e) => this.onSelect(e), onMouseOver: (e) => this.onHover(e) }, this.toggle && h("smoothly-icon", { name: this.checked ? "checkbox" : "square-outline" }), h("div", { class: "name" }, this.name), h("smoothly-quiet", null, h("slot", { name: "hint" }))));
   }
   get element() { return getElement(this); }
 };
@@ -33890,6 +33902,7 @@ const SmoothlyPicker = class {
     this.keepFocusOnReRender = false;
     this.disabled = false;
     this.readonly = false;
+    this.maxMenuHeight = "inherit";
     this.emptyMenuLabel = "No Options";
     this.multiple = false;
     this.mutable = false;
@@ -34026,17 +34039,14 @@ const SmoothlyPicker = class {
     this.isOpen = false;
     this.filterOptions();
   }
-  getCheckHtml(checked) {
-    return checked ? (h("smoothly-icon", { name: "checkbox", size: "small" })) : (h("smoothly-icon", { name: "square-outline", size: "small" }));
-  }
   render() {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     const cssVariables = {
       "--max-height": (_a = this.maxHeight) !== null && _a !== void 0 ? _a : "inherit",
       "--label-display": this.labelSetting == "hide" ? "none" : "absolute",
     };
     (_b = this.options) === null || _b === void 0 ? void 0 : _b.forEach(o => {
-      o.left = this.getCheckHtml(this.selections.map(s => s.value).includes(o.value));
+      o.checked = this.selections.map(s => s.value).includes(o.value);
     });
     const options = [
       ...(this.multiple
@@ -34044,16 +34054,16 @@ const SmoothlyPicker = class {
           {
             value: "select-none",
             name: this.selections.length == this.options.length ? this.selectNoneName : this.selectAllName,
-            left: this.getCheckHtml(this.selections.length == ((_c = this.options) === null || _c === void 0 ? void 0 : _c.length)),
+            checked: this.selections.length == this.options.length,
             divider: true,
           },
         ]
         : []),
-      ...((_d = this.options) !== null && _d !== void 0 ? _d : []),
+      ...((_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
         ? 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%" }, 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 })));
+        : 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 })));
   }
   get element() { return getElement(this); }
   static get watchers() { return {
@@ -34191,11 +34201,11 @@ const SmoothlySelectDemo = class {
         } }),
       h("smoothly-selector", null, h("smoothly-item", { value: "1" }, "January"), h("smoothly-item", { value: "2" }, "February"), h("smoothly-item", { value: "3" }, "March"), h("smoothly-item", { value: "4" }, "April"), h("smoothly-item", { value: "5" }, "May"), h("smoothly-item", { value: "6" }, "June"), h("smoothly-item", { value: "7" }, "July"), h("smoothly-item", { value: "8" }, "August"), h("smoothly-item", { value: "9" }, "September"), h("smoothly-item", { value: "10" }, "October"), h("smoothly-item", { value: "11" }, "November"), h("smoothly-item", { value: "12" }, "December")),
       h("button", { onClick: () => this.alertf() }, "press here"),
-      h("smoothly-picker", { label: "Filter", "empty-menu-label": "Sorry, we're out of options.", "max-height": "58px", multiple: true, options: [
+      h("smoothly-picker", { label: "Filter", "empty-menu-label": "Sorry, we're out of options.", "max-height": "58px", maxMenuHeight: "20rem", multiple: true, options: [
           { name: "Big Dog", value: "dog", aliases: ["WOFF"] },
-          { name: "Cat Stevens", value: "cat", aliases: ["moew"] },
+          { name: "Cat Stevens", value: "cat", aliases: ["moew"], hint: "moew" },
           { name: "Noble Pig", value: "pig" },
-          { name: "Turtle Wax", value: "turtle" },
+          { name: "Turtle Wax", value: "turtle", hint: "slow" },
           { name: "Spider Man", value: "spider" },
           { name: "Phoenix Order Long Wooord", value: "phoenix" },
           { name: "Horse Back", value: "horse" },
@@ -34227,7 +34237,7 @@ const SmoothlySelectDemo = class {
         ], valueValidator: (email) => email.match(/^\w+@\w+/) ? [true, undefined] : [false, Notice.failed("Incorrectly formatted email")] }),
       h("br", null),
       h("smoothly-picker", { label: "Single select", multiple: false, "max-menu-height": "200px", options: [
-          { name: "Dog", value: "dog", aliases: ["WOFF"], right: "Woof 🐶" },
+          { name: "Dog", value: "dog", aliases: ["WOFF"], hint: "Woof 🐶" },
           { name: "Cat", value: "cat", aliases: ["moew"] },
           { name: "Pig", value: "pig" },
           { name: "Turtle", value: "turtle" },