smoothly 0.2.3 → 0.2.6

package/dist/custom-elements/index.js

@@ -47831,12 +47831,15 @@ const SmoothlyMenuOptions$1 = class extends HTMLElement {
     super();
     this.__registerHost();
     this.__attachShadow();
+    this.menuEmpty = createEvent(this, "menuEmpty", 7);
     this.filteredOptions = [];
     this.highlightIndex = 0;
     this.emptyMenuLabel = "No Options";
+    this.newOptionLabel = "Add:";
     this.order = false;
     this.options = [];
     this.resetHighlightOnOptionsChange = true;
+    this.mutable = false;
   }
   optionsChangeHandler(newOptions) {
     this.highlightIndex = this.resetHighlightOnOptionsChange ? 0 : this.highlightIndex;
@@ -47875,6 +47878,7 @@ const SmoothlyMenuOptions$1 = class extends HTMLElement {
     return result;
   }
   async filterOptions(keyword, excludeValues = []) {
+    this.keyword = keyword;
     const keywordLowercase = keyword.toLowerCase();
     this.filteredOptions = [];
     for (const option of this.options) {
@@ -47882,6 +47886,7 @@ const SmoothlyMenuOptions$1 = class extends HTMLElement {
       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);
   }
   sortOptions(keyword) {
@@ -47918,7 +47923,7 @@ 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)))) : (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, 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))));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -48011,7 +48016,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))}";
+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 SmoothlyOption$1 = class extends HTMLElement {
   constructor() {
@@ -48020,6 +48025,7 @@ const SmoothlyOption$1 = class extends HTMLElement {
     this.__attachShadow();
     this.optionHover = createEvent(this, "optionHover", 7);
     this.optionSelect = createEvent(this, "optionSelect", 7);
+    this.optionAdd = createEvent(this, "optionAdd", 7);
     this.dataHighlight = false;
     this.divider = false;
   }
@@ -48028,7 +48034,9 @@ const SmoothlyOption$1 = class extends HTMLElement {
   }
   onSelect(event) {
     if (this.value)
-      this.optionSelect.emit({ name: this.name, value: this.value });
+      this.new
+        ? this.optionAdd.emit({ name: this.name, value: this.value })
+        : this.optionSelect.emit({ name: this.name, value: this.value });
     else
       throw `smoothly-option ${this.element.innerHTML} lacks value-property and can therefore not be selected`;
   }
@@ -48047,16 +48055,20 @@ const SmoothlyPicker$1 = class extends HTMLElement {
     this.__registerHost();
     this.__attachShadow();
     this.menuClose = createEvent(this, "menuClose", 7);
+    this.notice = createEvent(this, "notice", 7);
     this.keepFocusOnReRender = false;
     this.emptyMenuLabel = "No Options";
     this.multiple = false;
+    this.mutable = false;
     this.options = [];
     this.selections = [];
     this.selectNoneName = "Select None";
     this.selectAllName = "Select All";
     this.selectionName = "items selected";
+    this.newOptionLabel = "Add:";
+    this.valueValidator = _ => [true, undefined];
   }
-  isOpenChangeHander() {
+  isOpenChangeHandler() {
     if (this.isOpen == false) {
       this.menuClose.emit(this.selections);
     }
@@ -48068,10 +48080,26 @@ const SmoothlyPicker$1 = class extends HTMLElement {
       this.keepFocusOnReRender = false;
     }
   }
-  optionSelectHander(event) {
+  optionSelectHandler(event) {
     this.toggle(event.detail);
     event.stopPropagation();
   }
+  optionAddHandler(event) {
+    if (this.mutable) {
+      const [status, notice] = this.valueValidator(event.detail.value);
+      if (status) {
+        const option = Object.assign({}, event.detail);
+        this.options = [...this.options, option];
+        this.select(option);
+      }
+      notice && this.notice.emit(notice);
+    }
+    event.stopPropagation();
+  }
+  emptyHandler(event) {
+    this.empty = event.detail;
+    event.stopPropagation();
+  }
   toggle(option) {
     option.value == "select-none"
       ? this.toggleAll()
@@ -48106,9 +48134,19 @@ const SmoothlyPicker$1 = class extends HTMLElement {
   }
   toggleHighlighted() {
     var _a;
-    (_a = this.menuElement) === null || _a === void 0 ? void 0 : _a.getHighlighted().then((result) => {
-      result && this.toggle(result);
-    });
+    if (this.mutable && this.empty) {
+      const [status, notice] = this.valueValidator(this.inputElement.value);
+      if (status) {
+        const option = { name: this.inputElement.value, value: this.inputElement.value };
+        this.options = [...this.options, option];
+        this.select(option);
+      }
+      notice && this.notice.emit(notice);
+    }
+    else
+      (_a = this.menuElement) === null || _a === void 0 ? void 0 : _a.getHighlighted().then((result) => {
+        result && this.toggle(result);
+      });
   }
   highlightDefault() {
     var _a;
@@ -48180,12 +48218,12 @@ const SmoothlyPicker$1 = class extends HTMLElement {
     ];
     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", { class: "search", name: "search-outline", size: "tiny" }), h("label", null, this.label), h("input", { 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", { class: "down", name: "chevron-down", size: "tiny" }), h("smoothly-icon", { class: "up", name: "chevron-up", size: "tiny" })), h("smoothly-menu-options", { style: { width: "100%" }, optionStyle: Object.assign({}, this.optionStyle), order: false, emptyMenuLabel: this.emptyMenuLabel, "max-menu-height": this.maxMenuHeight, 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", { class: "down", name: "chevron-down", size: "tiny" }), h("smoothly-icon", { class: "up", name: "chevron-up", size: "tiny" })), h("smoothly-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 })));
   }
   get element() { return this; }
   static get watchers() { return {
-    "selections": ["isOpenChangeHander"],
-    "isOpen": ["isOpenChangeHander"]
+    "selections": ["isOpenChangeHandler"],
+    "isOpen": ["isOpenChangeHandler"]
   }; }
   static get style() { return styleCss$o; }
 };
@@ -48450,7 +48488,7 @@ const SmoothlySelectDemo$1 = class extends HTMLElement {
           { name: "Scary Kraken", value: "kraken" },
         ] }),
       h("br", null),
-      h("smoothly-picker", { label: "", "empty-menu-label": "Sorry, we're out of options.", "max-height": "58px", multiple: true, options: [
+      h("smoothly-picker", { label: "Multiple", "empty-menu-label": "Sorry, we're out of options.", "max-height": "58px", multiple: true, options: [
           { name: "Big Dog", value: "dog", aliases: ["WOFF"] },
           { name: "Cat Stevens", value: "cat", aliases: ["moew"] },
           { name: "Noble Pig", value: "pig" },
@@ -48464,6 +48502,13 @@ const SmoothlySelectDemo$1 = class extends HTMLElement {
           { name: "Scary Kraken", value: "kraken" },
         ] }),
       h("br", null),
+      h("smoothly-picker", { label: "Multiple mutable", "max-height": "58px", multiple: true, mutable: true, newOptionLabel: "Invite:", options: [
+          { name: "john@example.com", value: "john@example.com" },
+          { name: "jane@example.com", value: "jane@example.com" },
+          { name: "james@example.com", value: "james@example.com" },
+          { name: "jessie@example.com", value: "jessie@example.com" },
+        ], 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: "Cat", value: "cat", aliases: ["moew"] },
@@ -48724,7 +48769,7 @@ const SmoothlySvg$1 = class extends HTMLElement {
   static get style() { return styleCss$c; }
 };
 
-const styleCss$b = ".sc-smoothly-tab-h:not([open])>label.sc-smoothly-tab{background-color:rgb(var(--smoothly-dark-shade))}.hide.sc-smoothly-tab{display:none}label.sc-smoothly-tab{display:block;padding:1em;background-color:rgb(var(--smoothly-default-shade));border-top-left-radius:0.3rem;border-top-right-radius:0.3rem;width:6.25rem}div.sc-smoothly-tab{background-color:rgb(var(--smoothly-default-shade));padding:1em}";
+const styleCss$b = "[open].sc-smoothly-tab-h{border-bottom:3px solid rgb(var(--smoothly-primary-color));box-sizing:border-box;margin-bottom:-3px}.hide.sc-smoothly-tab{display:none}label.sc-smoothly-tab{display:block;padding:.5rem;background-color:transparent;width:auto}";
 
 const SmoothlyTab$1 = class extends HTMLElement {
   constructor() {
@@ -48755,7 +48800,7 @@ const SmoothlyTab$1 = class extends HTMLElement {
   static get style() { return styleCss$b; }
 };
 
-const styleCss$a = ".sc-smoothly-tab-switch-h{display:flex;flex-direction:row;margin:1em 1em 0em 0em}";
+const styleCss$a = ".sc-smoothly-tab-switch-h{display:flex;flex-direction:row;justify-content:space-around;border-bottom:3px solid rgb(var(--smoothly-default-shade))}";
 
 const SmoothlyTabSwitch$1 = class extends HTMLElement {
   constructor() {
@@ -48782,7 +48827,7 @@ const SmoothlyTabSwitch$1 = class extends HTMLElement {
   static get style() { return styleCss$a; }
 };
 
-const styleCss$9 = ".sc-smoothly-table-h{display:table;text-align:left;border:1px solid rgb(var(--smoothly-dark-color));width:80%;box-sizing:border-box;background-color:rgb(var(--smoothly-default-color));margin:1rem 9.5%;padding-bottom:0.5rem}.slot-detail.sc-smoothly-table>div.sc-smoothly-table{padding:10rem 0;margin-left:10rem}";
+const styleCss$9 = ".sc-smoothly-table-h{display:table;border-collapse:collapse;border:1px solid rgb(var(--smoothly-dark-color));width:var(--table-width, 80%);box-sizing:border-box;background-color:rgb(var(--smoothly-default-color));margin:auto}";
 
 const Table = class extends HTMLElement {
   constructor() {
@@ -48800,7 +48845,7 @@ const Table = class extends HTMLElement {
   static get style() { return styleCss$9; }
 };
 
-const styleCss$8 = ".sc-smoothly-table-cell-h{display:table-cell;vertical-align:middle;line-height:1.5rem;padding:0.2rem 0 0.2rem 1rem}";
+const styleCss$8 = ".sc-smoothly-table-cell-h{display:table-cell;line-height:1.5rem;white-space:nowrap;padding:0.3rem 0 0.3rem 1rem}";
 
 const TableCell = class extends HTMLElement {
   constructor() {
@@ -48822,14 +48867,14 @@ const TableDemo = class extends HTMLElement {
   }
   render() {
     return [
-      h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, "Header A"), h("smoothly-table-header", null, "Header B"), h("smoothly-table-header", null, "Header C"), h("smoothly-table-header", null, "Header D"), h("smoothly-table-header", null)), h("smoothly-table-row", null, h("smoothly-table-expandable-cell", null, "normal row (exp.cell)", h("div", { slot: "detail" }, "expandable cell 1 content")), h("smoothly-table-expandable-cell", null, "expandable cell", h("div", { slot: "detail" }, "expandable cell 2 content")), h("smoothly-table-expandable-cell", null, "expandable cell", h("div", { slot: "detail" }, "expandable cell 3 content")), h("smoothly-table-expandable-cell", null, "expandable cell", h("div", { slot: "detail" }, "expandable cell 4 content"))), h("smoothly-table-row", null, h("smoothly-table-cell", null, "normal row (nor.cell)\""), h("smoothly-table-cell", null, "normal cell"), h("smoothly-table-expandable-cell", null, "expandable cell", h("div", { slot: "detail" }, "expandable cell details.")), h("smoothly-table-expandable-cell", null, "expandable cell", h("div", { slot: "detail" }, "expandable cell details."))), h("smoothly-table-expandable-row", null, h("smoothly-table-cell", null, "expandable row (nor.cell)"), h("smoothly-table-cell", null, "Normal cell"), h("smoothly-table-cell", null, "normal cell"), h("smoothly-table-cell", null, "Normal cell"), h("div", { slot: "detail" }, "expandable row content"))),
-      h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, "Header A"), h("smoothly-table-header", null)), h("smoothly-table-expandable-row", null, "A Content", h("div", { slot: "detail" }, h("smoothly-tab-switch", null, h("smoothly-tab", { label: "1", open: true }, h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, "Header B"), h("smoothly-table-header", null)), h("smoothly-table-expandable-row", null, h("smoothly-table-cell", null, "B Content")))))))),
+      h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, "Header A"), h("smoothly-table-header", null, "Header B"), h("smoothly-table-header", null, "Header C"), h("smoothly-table-header", null, "Header D")), h("smoothly-table-row", null, h("smoothly-table-expandable-cell", null, "normal row (exp.cell)", h("div", { slot: "detail" }, "expandable cell 1 content")), h("smoothly-table-expandable-cell", null, "expandable cell", h("div", { slot: "detail" }, "expandable cell 2 content")), h("smoothly-table-expandable-cell", null, "expandable cell", h("div", { slot: "detail" }, "expandable cell 3 content")), h("smoothly-table-expandable-cell", null, "expandable cell", h("div", { slot: "detail" }, "expandable cell 4 content"))), h("smoothly-table-row", null, h("smoothly-table-cell", null, "normal row (nor.cell)\""), h("smoothly-table-cell", null, "normal cell"), h("smoothly-table-expandable-cell", null, "expandable cell", h("div", { slot: "detail" }, "expandable cell details.")), h("smoothly-table-expandable-cell", null, "expandable cell", h("div", { slot: "detail" }, "expandable cell details."))), h("smoothly-table-expandable-row", null, h("smoothly-table-cell", null, "expandable row (nor.cell)"), h("smoothly-table-cell", null, "Normal cell"), h("smoothly-table-cell", null, "normal cell"), h("smoothly-table-cell", null, "Normal cell"), h("div", { slot: "detail" }, "expandable row content"))),
+      h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, "Header A")), h("smoothly-table-expandable-row", null, h("smoothly-table-cell", null, "A Content"), h("div", { slot: "detail" }, h("smoothly-tab-switch", null, h("smoothly-tab", { label: "innertable 1", open: true }, h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, "Header B")), h("smoothly-table-expandable-row", null, "B Content"))), h("smoothly-tab", { label: "innertable 2" }, h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, "Header C")), h("smoothly-table-expandable-row", null, h("smoothly-table-cell", null, "C Content")))))))),
     ];
   }
   static get style() { return styleCss$7; }
 };
 
-const styleCss$6 = ".sc-smoothly-table-expandable-cell-h{display:table-cell;vertical-align:middle;line-height:1.5em;cursor:pointer;padding:0.2em 0 0.2em;border-style:solid solid none solid;border-width:2px;border-color:rgb(var(--smoothly-default-color))}.hide.sc-smoothly-table-expandable-cell{display:none}[open].sc-smoothly-table-expandable-cell-h{position:relative;z-index:3;background-color:rgb(var(--smoothly-default-color));border-style:solid solid none solid;border-width:2px;border-color:rgb(var(--smoothly-dark-color))}.slot-detail.sc-smoothly-table-expandable-cell{position:relative;background-color:rgb(var(--smoothly-default-color));width:104%;left:-2%;border-left-style:solid;border-left-color:rgb(var(--smoothly-tertiary-color));box-shadow:0px 0px 5px 4px rgb(var(--smoothly-dark-color), 0.5);box-sizing:border-box;padding:0.5rem 2%}.sc-smoothly-table-expandable-cell-h smoothly-icon.sc-smoothly-table-expandable-cell{width:0.6rem;height:1rem;float:left;padding-left:0.2rem;padding-right:0.2rem;padding-bottom:0.5rem;transition:transform 0.2s}[open].sc-smoothly-table-expandable-cell-h smoothly-icon.sc-smoothly-table-expandable-cell{transform:rotate(90deg)}";
+const styleCss$6 = ".sc-smoothly-table-expandable-cell-h{display:table-cell;padding:0.3rem 0 0.3rem 0;cursor:pointer;line-height:1.5rem}[open].sc-smoothly-table-expandable-cell-h{position:relative;z-index:3;background-color:rgb(var(--smoothly-default-color));border:2px solid rgb(var(--smoothly-dark-color));border-bottom:none}.sc-smoothly-table-expandable-cell-h smoothly-icon.sc-smoothly-table-expandable-cell{width:0.6rem;float:left;padding:0 0.3rem;transition:transform 0.2s}[open].sc-smoothly-table-expandable-cell-h smoothly-icon.sc-smoothly-table-expandable-cell{transform:rotate(90deg)}aside.sc-smoothly-table-expandable-cell{display:flex}.hide.sc-smoothly-table-expandable-cell{display:none}.slot-detail.sc-smoothly-table-expandable-cell{position:relative;background-color:rgb(var(--smoothly-default-color));width:104%;left:-2%;border-left:2px solid rgb(var(--smoothly-tertiary-color));box-shadow:0px 0px 5px 4px rgb(var(--smoothly-dark-color), 0.5);box-sizing:border-box;padding:0.5rem 2%}";
 
 const TableExpandableCell = class extends HTMLElement {
   constructor() {
@@ -48859,7 +48904,7 @@ const TableExpandableCell = class extends HTMLElement {
     }
   }
   render() {
-    return (h(Host, { style: { textAlign: this.align } }, h("slot", null), h("smoothly-icon", { name: "chevron-forward", size: "tiny" }), h("tr", { ref: e => (this.expansionElement = e) }, h("td", { colSpan: 999, class: !this.open ? "hide" : "" }, h("div", { class: "slot-detail" }, h("slot", { name: "detail" }))))));
+    return (h(Host, { style: { textAlign: this.align } }, h("aside", null, h("smoothly-icon", { name: "chevron-forward", size: "tiny" }), h("slot", null)), h("tr", { ref: e => (this.expansionElement = e) }, h("td", { colSpan: 999, class: !this.open ? "hide" : "" }, h("div", { class: "slot-detail" }, h("slot", { name: "detail" }))))));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -48868,7 +48913,7 @@ const TableExpandableCell = class extends HTMLElement {
   static get style() { return styleCss$6; }
 };
 
-const styleCss$5 = ".sc-smoothly-table-expandable-row-h{display:table-row;border:1px solid rgb(var(--smoothly-default-color));cursor:pointer;box-sizing:border-box}.hide.sc-smoothly-table-expandable-row{display:none}.slot-detail.sc-smoothly-table-expandable-row{position:relative;background-color:rgb(var(--smoothly-default-color));width:104%;left:-2%;border-left-style:solid;border-left-color:rgb(var(--smoothly-tertiary-color));box-shadow:0px 0px 5px 2px rgb(var(--smoothly-dark-color), 0.5);box-sizing:border-box;padding:0.5rem 2%}.sc-smoothly-table-expandable-row-h smoothly-icon.sc-smoothly-table-expandable-row{width:0.6rem;height:1rem;float:left;padding-left:0.2rem;padding-right:0.2rem;padding-bottom:0.5rem;transition:transform 0.2s}[open].sc-smoothly-table-expandable-row-h smoothly-icon.sc-smoothly-table-expandable-row{transform:rotate(90deg)}[open].sc-smoothly-table-expandable-row-h smoothly-table-cell.sc-smoothly-table-expandable-row{padding-bottom:0.5rem}[open].sc-smoothly-table-expandable-row-h{position:relative;z-index:3;background-color:rgb(var(--smoothly-default-color));border-style:solid;border-width:5px;box-shadow:inset 2px 0px 0px 0px rgb(var(--smoothly-dark-color)), inset 0px 2px 0px 0px rgb(var(--smoothly-dark-color)), inset -2px 0px 0px 0px rgb(var(--smoothly-dark-color)), inset 0px 0px 0px 2px rgb(var(--smoothly-default-color))}";
+const styleCss$5 = ".sc-smoothly-table-expandable-row-h{display:table-row;cursor:pointer;line-height:1.5rem}[open].sc-smoothly-table-expandable-row-h{position:relative;z-index:3;background-color:rgb(var(--smoothly-default-color));border:2px solid rgb(var(--smoothly-dark-color));border-bottom:none}.sc-smoothly-table-expandable-row-h smoothly-icon.sc-smoothly-table-expandable-row{width:0.6rem;height:1rem;margin-top:-1rem;margin-left:-1rem;transition:transform 0.2s}[open].sc-smoothly-table-expandable-row-h smoothly-icon.sc-smoothly-table-expandable-row{transform:rotate(90deg)}.hide.sc-smoothly-table-expandable-row{display:none}.slot-detail.sc-smoothly-table-expandable-row{position:relative;background-color:rgb(var(--smoothly-default-color));width:104%;left:-2%;border-left-style:solid;border-left-color:rgb(var(--smoothly-tertiary-color));box-shadow:0px 0px 4px 2px rgb(var(--smoothly-dark-color));box-sizing:border-box;padding:0.5rem 2%}";
 
 const TableExpandableRow = class extends HTMLElement {
   constructor() {
@@ -48891,7 +48936,7 @@ const TableExpandableRow = class extends HTMLElement {
       this.element.after(this.expansionElement);
   }
   render() {
-    return (h(Host, { style: { textAlign: this.align } }, h("slot", null), h("smoothly-table-cell", null, h("smoothly-icon", { name: "chevron-forward", size: "tiny" })), h("tr", { ref: e => (this.expansionElement = e) }, h("td", { colSpan: 999, class: !this.open ? "hide" : "" }, h("div", { class: "slot-detail" }, h("slot", { name: "detail" }))))));
+    return (h(Host, { style: { textAlign: this.align } }, h("slot", null), h("smoothly-icon", { name: "chevron-forward", size: "tiny" }), h("tr", { ref: e => (this.expansionElement = e) }, h("td", { colSpan: 999, class: !this.open ? "hide" : "" }, h("div", { class: "slot-detail" }, h("slot", { name: "detail" }))))));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -48900,7 +48945,7 @@ const TableExpandableRow = class extends HTMLElement {
   static get style() { return styleCss$5; }
 };
 
-const styleCss$4 = ".sc-smoothly-table-header-h{display:table-cell;line-height:2.5rem;background-color:rgb(var(--smoothly-color-shade));border-bottom:1px solid rgb(var(--smoothly-dark-color));padding-left:1rem;font-weight:bold;margin-bottom:5rem}";
+const styleCss$4 = ".sc-smoothly-table-header-h{display:table-cell;line-height:2.5rem;background-color:rgb(var(--smoothly-color-shade));border-bottom:1px solid rgb(var(--smoothly-dark-color));padding-left:1rem;font-weight:bold}";
 
 const TableHeader = class extends HTMLElement {
   constructor() {
@@ -48913,7 +48958,7 @@ const TableHeader = class extends HTMLElement {
   static get style() { return styleCss$4; }
 };
 
-const styleCss$3 = ".sc-smoothly-table-row-h{display:table-row;border:1px solid rgb(var(--smoothly-dark-color), 0.5);cursor:default}.hide.sc-smoothly-table-row{display:none}";
+const styleCss$3 = ".sc-smoothly-table-row-h{display:table-row;cursor:default;line-height:1.5rem}.hide.sc-smoothly-table-row{display:none}";
 
 const TableRow = class extends HTMLElement {
   constructor() {
@@ -49065,11 +49110,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"],"maxMenuHeight":[1,"max-menu-height"],"order":[4],"optionStyle":[8,"option-style"],"options":[1040],"resetHighlightOnOptionsChange":[1028,"reset-highlight-on-options-change"],"filteredOptions":[32],"highlightIndex":[32]},[[0,"optionHover","optionHoverHandler"]]]);
+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 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]}]);
-const SmoothlyPicker = /*@__PURE__*/proxyCustomElement(SmoothlyPicker$1, [1,"smoothly-picker",{"maxMenuHeight":[1,"max-menu-height"],"maxHeight":[1,"max-height"],"emptyMenuLabel":[1025,"empty-menu-label"],"multiple":[516],"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"],"isOpen":[32]},[[0,"optionSelect","optionSelectHander"]]]);
+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",{"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 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"]}]);

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-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_51",[[0,"smoothly-app-demo",{"baseUrl":[1,"base-url"]}],[0,"smoothly-input-demo"],[2,"smoothly-select-demo",null,[[0,"selectionChanged","handleSelectionChanged"]]],[0,"smoothly-display-demo"],[2,"smoothly-table-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",{"maxMenuHeight":[1,"max-menu-height"],"maxHeight":[1,"max-height"],"emptyMenuLabel":[1025,"empty-menu-label"],"multiple":[516],"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"],"isOpen":[32]},[[0,"optionSelect","optionSelectHander"]]],[6,"smoothly-dialog",{"color":[513],"open":[1540],"closable":[516],"header":[513]},[[0,"trigger","TriggerListener"]]],[6,"smoothly-table-expandable-row",{"align":[1],"open":[1540]},[[0,"click","onClick"]]],[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"]]],[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]}],[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]}],[2,"smoothly-svg",{"url":[513],"size":[513],"color":[1]}],[6,"smoothly-table",null,[[0,"expansionLoad","handleEvents"],[0,"expansionOpen","handleEvents"]]],[6,"smoothly-table-header",{"name":[1]}],[6,"smoothly-table-row",null,[[0,"expansionLoad","onExpansionLoad"],[0,"expansionOpen","onExpansionOpen"]]],[6,"smoothly-input-date",{"value":[1025],"open":[1028],"max":[1025],"min":[1025],"disabled":[1028]},[[0,"dateSet","dateSetHandler"]]],[2,"smoothly-notification",{"notice":[16],"tick":[32]},[[0,"trigger","onTrigger"]]],[1,"smoothly-menu-options",{"emptyMenuLabel":[1025,"empty-menu-label"],"maxMenuHeight":[1,"max-menu-height"],"order":[4],"optionStyle":[8,"option-style"],"options":[1040],"resetHighlightOnOptionsChange":[1028,"reset-highlight-on-options-change"],"filteredOptions":[32],"highlightIndex":[32],"moveHighlight":[64],"setHighlight":[64],"getHighlighted":[64],"filterOptions":[64]},[[0,"optionHover","optionHoverHandler"]]],[2,"smoothly-display-date-time",{"datetime":[1]}],[6,"smoothly-tab",{"label":[1],"open":[1540]},[[0,"click","onClick"]]],[6,"smoothly-tab-switch",{"selectedElement":[32]},[[0,"expansionOpen","openChanged"]]],[6,"smoothly-table-cell"],[0,"smoothly-tuple",{"tuple":[16]}],[1,"smoothly-option",{"aliases":[513],"dataHighlight":[1540,"data-highlight"],"name":[1537],"value":[1537],"divider":[1540]}],[2,"smoothly-spinner",{"active":[516],"size":[513]}],[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-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_51",[[0,"smoothly-app-demo",{"baseUrl":[1,"base-url"]}],[0,"smoothly-input-demo"],[2,"smoothly-select-demo",null,[[0,"selectionChanged","handleSelectionChanged"]]],[0,"smoothly-display-demo"],[2,"smoothly-table-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",{"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]}],[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]}],[2,"smoothly-svg",{"url":[513],"size":[513],"color":[1]}],[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",{"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]}],[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-spinner",{"active":[516],"size":[513]}],[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);
   });
 };