smoothly 1.0.0-alpha.111 → 1.0.0-alpha.113

package/dist/custom-elements/index.js

@@ -1345,6 +1345,32 @@ const smoothly = /*#__PURE__*/Object.freeze({
     get Cosmetic () { return Cosmetic; }
 });
 
+const observers = new WeakMap();
+var Observers$1;
+(function (Observers) {
+  function get(...parameters) {
+    return observers.get(...parameters);
+  }
+  Observers.get = get;
+  function set(...parameters) {
+    observers.set(...parameters);
+    return Observers;
+  }
+  Observers.set = set;
+  function remove(...parameters) {
+    return observers.delete(...parameters);
+  }
+  Observers.remove = remove;
+  function has(...parameters) {
+    return observers.has(...parameters);
+  }
+  Observers.has = has;
+})(Observers$1 || (Observers$1 = {}));
+
+function global$1 () {
+  return { Observers: Observers$1 };
+}
+
 const styleCss$16 = "smoothly-accordion-item.sc-smoothly-accordion{border:1px solid rgb(var(--smoothly-dark-color));border-bottom:none}smoothly-accordion-item.sc-smoothly-accordion:first-of-type{border-top-left-radius:4px;border-top-right-radius:4px;margin-top:0.4em}smoothly-accordion-item.sc-smoothly-accordion:last-of-type{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-bottom:1px solid rgb(var(--smoothly-dark-color));margin-bottom:0.6em}smoothly-accordion-item[open].sc-smoothly-accordion{border-color:rgb(var(--smoothly-primary-color));border-bottom:1px solid rgb(var(--smoothly-primary-color))}smoothly-accordion-item[open].sc-smoothly-accordion+smoothly-accordion-item.sc-smoothly-accordion{border-top:none}";
 
 const SmoothlyAccordion$1 = class extends HTMLElement {
@@ -53950,7 +53976,7 @@ const Notifier = class extends HTMLElement {
   static get style() { return styleCss$A; }
 };
 
-const styleCss$z = ".sc-smoothly-picker-h{box-sizing:border-box}.sc-smoothly-picker-h[looks=\"border\"].sc-smoothly-picker-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-picker-h{border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}.sc-smoothly-picker-h[looks=\"line\"].sc-smoothly-picker-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-picker-h{border-bottom:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}.sc-smoothly-picker-h[looks=\"grid\"].sc-smoothly-picker-s>smoothly-picker-menu smoothly-input,[looks=\"grid\"].sc-smoothly-picker-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px}.sc-smoothly-picker-h{display:flex;position:relative;width:max-content;padding:1.2em 0.7em 0.2em 0.8em;background-color:rgb(var(--background-color, var(--smoothly-color-shade)))}.sc-smoothly-picker-h:not([open]) smoothly-picker-menu.sc-smoothly-picker{display:none}smoothly-slot-elements.sc-smoothly-picker{white-space:nowrap}.selected.sc-smoothly-picker{position:relative;display:flex;align-items:center;gap:1rem;width:100%;overflow:hidden;text-overflow:ellipsis;margin-right:2px}.selected.sc-smoothly-picker::after{content:\"\";position:absolute;top:0;bottom:0;right:0;width:2ch;background:linear-gradient(90deg, rgba(var(--background-color, var(--smoothly-color-shade)), 0) 0%, rgba(var(--background-color, var(--smoothly-color-shade)), 1) 100%)}.selected.sc-smoothly-picker *.sc-smoothly-picker{display:none}.label.sc-smoothly-picker{position:absolute;left:0.4rem;top:0.6rem;color:rgb(var(--text-color, var(--smoothly-color-contrast)));opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.selected.sc-smoothly-picker:not(:empty)+.label.sc-smoothly-picker{top:0.4em;transform:scale(0.6)}";
+const styleCss$z = ".sc-smoothly-picker-h{box-sizing:border-box}.sc-smoothly-picker-h[looks=\"border\"].sc-smoothly-picker-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-picker-h{border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}.sc-smoothly-picker-h[looks=\"line\"].sc-smoothly-picker-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-picker-h{border-bottom:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}.sc-smoothly-picker-h[looks=\"grid\"].sc-smoothly-picker-s>smoothly-picker-menu smoothly-input,[looks=\"grid\"].sc-smoothly-picker-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px}.sc-smoothly-picker-h{display:flex;position:relative;width:max-content;padding:1.2em 0.7em 0.2em 0.8em;background-color:rgb(var(--background-color, var(--smoothly-color-shade)))}smoothly-slot-elements.sc-smoothly-picker{white-space:nowrap}.selected.sc-smoothly-picker{position:relative;display:flex;align-items:center;gap:1rem;width:100%;overflow:hidden;text-overflow:ellipsis;margin-right:2px}.selected.sc-smoothly-picker::after{content:\"\";position:absolute;top:0;bottom:0;right:0;width:2ch;background:linear-gradient(90deg, rgba(var(--background-color, var(--smoothly-color-shade)), 0) 0%, rgba(var(--background-color, var(--smoothly-color-shade)), 1) 100%)}.selected.sc-smoothly-picker *.sc-smoothly-picker{display:none}.label.sc-smoothly-picker{position:absolute;left:0.4rem;top:0.6rem;color:rgb(var(--text-color, var(--smoothly-color-contrast)));opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.selected.sc-smoothly-picker:not(:empty)+.label.sc-smoothly-picker{top:0.4em;transform:scale(0.6)}";
 
 const SmoothlyPicker$1 = class extends HTMLElement {
   constructor() {
@@ -54022,7 +54048,7 @@ const SmoothlyPicker$1 = class extends HTMLElement {
     this.selected.forEach(option => option.selected && option.element.clickHandler());
   }
   render() {
-    return (h(Host, null, h("smoothly-slot-elements", { class: "selected", nodes: this.display }), h("span", { class: "label" }, h("slot", { name: "label" })), h("button", { type: "button" }, h("smoothly-icon", { size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" })), h("smoothly-picker-menu", { looks: this.looks, onClick: e => e.stopPropagation(), multiple: this.multiple, mutable: this.mutable, readonly: this.readonly, validator: this.validator }, h("slot", { name: "search", slot: "search" }), h("slot", { name: "display", slot: "display" }), h("slot", null))));
+    return (h(Host, null, h("smoothly-slot-elements", { class: "selected", nodes: this.display }), h("span", { class: "label" }, h("slot", { name: "label" })), h("button", { type: "button" }, h("smoothly-icon", { size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" })), h("smoothly-picker-menu", { open: this.open, looks: this.looks, onClick: e => e.stopPropagation(), multiple: this.multiple, mutable: this.mutable, readonly: this.readonly, validator: this.validator }, h("slot", { name: "search", slot: "search" }), h("slot", { name: "display", slot: "display" }), h("slot", null))));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -54091,13 +54117,14 @@ const SmoothlyPickerDemo$1 = class extends HTMLElement {
     }), this.data.options.map(email => {
       var _a;
       return (h("smoothly-picker-option", { key: email, value: email, search: [(_a = this.users[email]) !== null && _a !== void 0 ? _a : []].flat() }, h("span", null, this.users[email]), h("span", { slot: "label" }, email), h("smoothly-icon", { size: "tiny", slot: "display", name: "person-outline" })));
-    })), h("smoothly-submit", { size: "icon", slot: "submit" }, h("smoothly-icon", { name: "checkmark-circle" })), h("smoothly-input-clear", { type: "form", color: "danger", fill: "solid", slot: "clear" }, "Clear")), h("h5", null, "uncontrolled inputs"), h("smoothly-form", { onSmoothlyFormSubmit: e => console.log("submitted", e.detail), looks: "line" }, h("smoothly-input", { name: "purpose", type: "text" }, "Purpose"), h("smoothly-picker", { multiple: true, mutable: true, name: "emails", validator: validateEmail }, h("span", { slot: "label" }, "Emails"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { value: "james@rocket.com" }, "james@rocket.com"), h("smoothly-picker-option", { selected: true, value: "jessie@rocket.com" }, "jessie@rocket.com"), h("smoothly-picker-option", { value: "giovanni@rocket.com" }, "giovanni@rocket.com")), h("smoothly-submit", { slot: "submit" }, "Submit"), h("smoothly-input-clear", { type: "form", color: "danger", fill: "solid", slot: "clear" }, "Clear"), h("smoothly-picker", { name: "shape" }, h("span", { slot: "label" }, "Shape"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { value: "circle" }, h("span", { slot: "label" }, "Circle"), h("smoothly-icon", { size: "tiny", name: "ellipse-outline" })), h("smoothly-picker-option", { value: "cube" }, h("span", { slot: "label" }, "Cube"), h("smoothly-icon", { size: "tiny", name: "cube-outline" })), h("smoothly-picker-option", { value: "square", selected: true }, h("span", { slot: "label" }, "Square"), h("smoothly-icon", { size: "tiny", name: "square-outline" }))), h("smoothly-picker", { multiple: true, readonly: true, name: "animals" }, h("span", { slot: "label" }, "Animals"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { selected: true, value: "cat" }, "Cat"), h("smoothly-picker-option", { value: "dog" }, "Dog"), h("smoothly-picker-option", { value: "fish" }, "Fish")))));
+    })), h("smoothly-submit", { size: "icon", slot: "submit" }, h("smoothly-icon", { name: "checkmark-circle" })), h("smoothly-input-clear", { type: "form", color: "danger", fill: "solid", slot: "clear" }, "Clear")), h("h5", null, "uncontrolled inputs"), h("smoothly-form", { onSmoothlyFormSubmit: e => console.log("submitted", e.detail), looks: "line" }, h("smoothly-input", { name: "purpose", type: "text" }, "Purpose"), h("smoothly-picker", { multiple: true, mutable: true, name: "emails", validator: validateEmail }, h("span", { slot: "label" }, "Emails"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { value: "james@rocket.com" }, "james@rocket.com"), h("smoothly-picker-option", { selected: true, value: "jessie@rocket.com" }, "jessie@rocket.com"), h("smoothly-picker-option", { value: "giovanni@rocket.com" }, "giovanni@rocket.com")), h("smoothly-submit", { slot: "submit" }, "Submit"), h("smoothly-input-clear", { type: "form", color: "danger", fill: "solid", slot: "clear" }, "Clear"), h("smoothly-picker", { name: "shape" }, h("span", { slot: "label" }, "Shape"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { value: "circle" }, h("span", { slot: "label" }, "Circle"), h("smoothly-icon", { size: "tiny", name: "ellipse-outline" })), h("smoothly-picker-option", { value: "cube" }, h("span", { slot: "label" }, "Cube"), h("smoothly-icon", { size: "tiny", name: "cube-outline" })), h("smoothly-picker-option", { value: "square", selected: true }, h("span", { slot: "label" }, "Square"), h("smoothly-icon", { size: "tiny", name: "square-outline" }))), h("smoothly-picker", { multiple: true, readonly: true, name: "animals" }, h("span", { slot: "label" }, "Animals"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { selected: true, value: "cat" }, "Cat"), h("smoothly-picker-option", { value: "dog" }, "Dog"), h("smoothly-picker-option", { value: "fish" }, "Fish"))), h("smoothly-picker", { looks: "border", name: "icon" }, h("span", { slot: "label" }, "Icon"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { value: "circle" }, h("span", { slot: "label" }, "Circle"), h("smoothly-icon", { size: "tiny", name: "ellipse-outline" })), h("smoothly-picker-option", { value: "cube" }, h("span", { slot: "label" }, "Cube"), h("smoothly-icon", { size: "tiny", name: "cube-outline" })), h("smoothly-picker-option", { value: "square", selected: true }, h("span", { slot: "label" }, "Square"), h("smoothly-icon", { size: "tiny", name: "square-outline" })), h("smoothly-picker-option", { value: "airplane" }, h("span", { slot: "label" }, "Airplane"), h("smoothly-icon", { size: "tiny", name: "airplane-outline" })), h("smoothly-picker-option", { value: "alarm" }, h("span", { slot: "label" }, "Alarm"), h("smoothly-icon", { size: "tiny", name: "alarm-outline" })), h("smoothly-picker-option", { value: "archive" }, h("span", { slot: "label" }, "Archive"), h("smoothly-icon", { size: "tiny", name: "archive-outline" })), h("smoothly-picker-option", { value: "bag" }, h("span", { slot: "label" }, "Bag"), h("smoothly-icon", { size: "tiny", name: "bag-outline" })), h("smoothly-picker-option", { value: "cafe" }, h("span", { slot: "label" }, "Cafe"), h("smoothly-icon", { size: "tiny", name: "cafe-outline" })), h("smoothly-picker-option", { value: "disc" }, h("span", { slot: "label" }, "Disc"), h("smoothly-icon", { size: "tiny", name: "disc-outline" })), h("smoothly-picker-option", { value: "earth" }, h("span", { slot: "label" }, "Earth"), h("smoothly-icon", { size: "tiny", name: "earth-outline" })), h("smoothly-picker-option", { value: "fast-food" }, h("span", { slot: "label" }, "Fast food"), h("smoothly-icon", { size: "tiny", name: "fast-food-outline" })))));
   }
   static get style() { return styleCss$y; }
 };
 
-const styleCss$x = ".sc-smoothly-picker-menu-h{display:flex;flex-direction:column;gap:0.5rem;position:absolute;z-index:4;top:100%;left:-1px;right:-1px;background-color:rgb(var(--background-color, var(--smoothly-color-shade)));padding:0.5rem;border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}.list.sc-smoothly-picker-menu{display:grid;grid-template-columns:auto 1fr auto;align-items:center;row-gap:0.5ch;overflow:auto;max-height:calc(1.75rem * 10 + 0.5ch * 9);padding-right:0.5rem}.hide.sc-smoothly-picker-menu{display:none}.controls.sc-smoothly-picker-menu{display:grid;grid-template-columns:1fr auto;gap:0.5rem;transition:grid-template-columns 200ms linear}.controls.sc-smoothly-picker-menu>button.sc-smoothly-picker-menu:disabled{opacity:0.3}";
+const styleCss$x = ".sc-smoothly-picker-menu-h{display:flex;flex-direction:column;gap:0.5rem;position:absolute;z-index:4;left:-1px;right:-1px;min-width:max-content;background-color:rgb(var(--background-color, var(--smoothly-color-shade)));padding:0.5rem;border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}.sc-smoothly-picker-menu-h:not(.flip){top:100%}.flip.sc-smoothly-picker-menu-h{bottom:100%}.sc-smoothly-picker-menu-h:not([open]){display:none}.sc-smoothly-picker-menu-h .list.sc-smoothly-picker-menu{display:grid;grid-template-columns:auto 1fr auto;align-items:center;row-gap:0.5ch;overflow-y:auto;max-height:calc(1.75rem * 10 + 0.5ch * 9);padding-right:0.5rem;padding-bottom:0.25rem}.sc-smoothly-picker-menu-h .hide.sc-smoothly-picker-menu{display:none}.sc-smoothly-picker-menu-h .controls.sc-smoothly-picker-menu{display:grid;grid-template-columns:1fr auto;gap:0.5rem;transition:grid-template-columns 200ms linear}.sc-smoothly-picker-menu-h .controls.sc-smoothly-picker-menu>button.sc-smoothly-picker-menu:disabled{opacity:0.3}";
 
+const Observers = global$1().Observers;
 function* chain(...iterables) {
   for (const iterable of iterables)
     yield* iterable;
@@ -54120,6 +54147,7 @@ const SmoothlyPickerMenu$1 = class extends HTMLElement {
     this.notice = createEvent(this, "notice", 7);
     this.smoothlyPickerMenuLoaded = createEvent(this, "smoothlyPickerMenuLoaded", 7);
     this.looks = undefined;
+    this.open = false;
     this.multiple = false;
     this.mutable = false;
     this.readonly = false;
@@ -54130,6 +54158,19 @@ const SmoothlyPickerMenu$1 = class extends HTMLElement {
     this.search = "";
     this.valid = false;
     this.display = undefined;
+    this.flip = false;
+    this.flipChecked = false;
+  }
+  componentWillLoad() {
+    if (!Observers.has(this.element)) {
+      const threshold = 0.4;
+      Observers.set(this.element, new IntersectionObserver(entries => {
+        var _a, _b;
+        return ((_b = (_a = entries.find(entry => entry.target == this.element)) === null || _a === void 0 ? void 0 : _a.intersectionRatio) !== null && _b !== void 0 ? _b : 0) < threshold &&
+          !this.flipChecked &&
+          ((this.flip = !this.flip), (this.flipChecked = true));
+      }, { threshold }));
+    }
   }
   componentDidLoad() {
     this.smoothlyPickerMenuLoaded.emit({
@@ -54159,10 +54200,27 @@ const SmoothlyPickerMenu$1 = class extends HTMLElement {
       },
     });
   }
+  disconnectedCallback() {
+    var _a;
+    if (!this.element.parentElement) {
+      (_a = Observers.get(this.element)) === null || _a === void 0 ? void 0 : _a.disconnect();
+      Observers.remove(this.element);
+    }
+  }
+  openChange() {
+    const observer = Observers.get(this.element);
+    if (this.open)
+      observer === null || observer === void 0 ? void 0 : observer.observe(this.element);
+    else
+      observer === null || observer === void 0 ? void 0 : observer.unobserve(this.element);
+  }
   readonlyChanged() {
     for (const option of chain(this.options.values(), this.backend.values()))
       option.set.readonly(this.readonly);
   }
+  scrollHandler() {
+    this.flipChecked = false;
+  }
   optionLoadHandler(event) {
     if (!this.listElement || !event.composedPath().includes(this.listElement)) {
       event.stopPropagation();
@@ -54247,16 +54305,19 @@ const SmoothlyPickerMenu$1 = class extends HTMLElement {
     event.detail.set.nodes(this.display);
   }
   render() {
-    return (h(Host, { class: { valid: this.valid } }, h("smoothly-slotted-elements", { class: "hide", onSmoothlySlottedChange: e => (this.display = e.detail) }, h("slot", { name: "display" })), h("div", { class: "hide" }, h("slot", null), Array.from(this.created.values(), option => (h("smoothly-picker-option", { key: option.value, value: option.value, selected: option.selected }, option.value, h("smoothly-slot-elements", { slot: "display", nodes: this.display }))))), h("div", { class: "controls" }, h("smoothly-input", { ref: e => (this.searchElement = e), name: "search", value: this.search, looks: this.looks, onKeyDown: e => this.keyDownHandler(e), onSmoothlyInput: e => this.inputHandler(e), onSmoothlyChange: e => e.stopPropagation(), onSmoothlyBlur: e => e.stopPropagation() }, h("slot", { name: "search" })), this.mutable && !this.readonly ? (h("button", { onClick: () => this.addHandler(), disabled: !this.valid, type: "button" }, h("smoothly-icon", { name: "add-outline" }))) : null), h("div", { class: "list", ref: e => (this.listElement = e) }, Array.from(this.backend.values()).map(option => (h("smoothly-slot-elements", { ref: e => restoreListener(e, option), clone: false, nodes: option.clone }))))));
+    return (h(Host, { class: { valid: this.valid, flip: this.flip } }, h("smoothly-slotted-elements", { class: "hide", onSmoothlySlottedChange: e => (this.display = e.detail) }, h("slot", { name: "display" })), h("div", { class: "hide" }, h("slot", null), Array.from(this.created.values(), option => (h("smoothly-picker-option", { key: option.value, value: option.value, selected: option.selected }, option.value, h("smoothly-slot-elements", { slot: "display", nodes: this.display }))))), h("div", { class: "controls" }, h("smoothly-input", { ref: e => (this.searchElement = e), name: "search", value: this.search, looks: this.looks, onKeyDown: e => this.keyDownHandler(e), onSmoothlyInput: e => this.inputHandler(e), onSmoothlyChange: e => e.stopPropagation(), onSmoothlyBlur: e => e.stopPropagation() }, h("slot", { name: "search" })), this.mutable && !this.readonly ? (h("button", { onClick: () => this.addHandler(), disabled: !this.valid, type: "button" }, h("smoothly-icon", { name: "add-outline" }))) : null), h("div", { class: "list", ref: e => (this.listElement = e) }, Array.from(this.backend.values())
+      .sort((a, b) => a.position - b.position)
+      .map(option => (h("smoothly-slot-elements", { ref: e => restoreListener(e, option), clone: false, nodes: option.clone }))))));
   }
   get element() { return this; }
   static get watchers() { return {
+    "open": ["openChange"],
     "readonly": ["readonlyChanged"]
   }; }
   static get style() { return styleCss$x; }
 };
 
-const styleCss$w = ":host{display:contents}:host(:not([visible])){display:none}:host>*{cursor:pointer;padding:0.25ch 0.5rem}.display{padding-left:0}button{color:unset;background-color:inherit;border:none;padding-right:0}.content{display:flex;column-gap:1rem;flex-wrap:wrap;justify-content:space-between}";
+const styleCss$w = ":host{display:contents}:host(:not([visible])){display:none}:host>*{cursor:pointer;padding:0.25ch 0.5rem}:host .display{padding-left:0}:host button{color:unset;background-color:inherit;border:none;padding-right:0}:host .content{display:flex;column-gap:1rem;justify-content:space-between}";
 
 var __rest = (undefined && undefined.__rest) || function (s, e) {
   var t = {};
@@ -54282,10 +54343,12 @@ const SmoothlyPickerOption$1 = class extends HTMLElement {
     this.visible = true;
     this.value = undefined;
     this.search = [];
+    this.position = -1;
     this.readonly = false;
     this.slotted = [];
   }
   get option() {
+    var _a;
     return {
       element: this.element,
       selected: this.selected,
@@ -54294,6 +54357,9 @@ const SmoothlyPickerOption$1 = class extends HTMLElement {
       search: this.search,
       value: this.value,
       slotted: this.slotted,
+      position: this.position >= 0 || !((_a = this.element.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement)
+        ? this.position
+        : Array.from(this.element.parentElement.parentElement.children).indexOf(this.element.parentElement),
       set: {
         selected: selected => (this.selected = selected),
         readonly: readonly => (this.readonly = readonly),
@@ -54325,10 +54391,11 @@ const SmoothlyPickerOption$1 = class extends HTMLElement {
       this.selected = !this.selected;
   }
   render() {
-    return (h(Host, { class: { visible: this.visible }, onClick: () => this.clickHandler() }, h("div", { class: "display" }, h("slot", { name: "display" })), h("div", { class: "content" }, h("smoothly-slotted-elements", { onSmoothlySlottedChange: e => this.slottedChangeHandler(e), clone: true }, h("slot", null)), h("slot", { name: "label" })), h("button", { type: "button" }, h("smoothly-icon", { name: this.selected ? "checkbox-outline" : "square-outline" }))));
+    return (h(Host, { class: { visible: this.visible }, onClick: () => this.clickHandler() }, h("div", { part: "display", class: "display" }, h("slot", { name: "display" })), h("div", { part: "content", class: "content" }, h("smoothly-slotted-elements", { onSmoothlySlottedChange: e => this.slottedChangeHandler(e), clone: true }, h("slot", null)), h("slot", { name: "label" })), h("button", { type: "button" }, h("smoothly-icon", { name: this.selected ? "checkbox-outline" : "square-outline" }))));
   }
   get element() { return this; }
   static get watchers() { return {
+    "position": ["emitChange"],
     "selected": ["emitChange"],
     "slotted": ["emitChange"]
   }; }
@@ -54945,7 +55012,7 @@ const TableDemo = class extends HTMLElement {
       h("h4", null, "Filtered & Checked Table"),
       h("smoothly-table-demo-filtered", null),
       h("smoothly-table-testing", null),
-      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", { expansionData: () => h("div", { slot: "detail" }, "function load content") }, "normal row (exp.cell)"), 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, "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")))))))),
       h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, "A"), h("smoothly-table-header", null, "B")), h("smoothly-table-expandable-row", null, h("smoothly-table-cell", null, "a row"), h("smoothly-table-cell", null, "b row"), h("div", { slot: "detail" }, h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, "C"), h("smoothly-table-header", null, "D")), h("smoothly-table-expandable-row", null, h("smoothly-table-cell", null, "c"), h("smoothly-table-cell", null, "d"), h("div", { slot: "detail" }, h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, "E"), h("smoothly-table-header", null, "F")), h("smoothly-table-expandable-row", null, h("smoothly-table-cell", null, "e row"), h("smoothly-table-cell", null, "f row"), h("div", { slot: "detail" }, "nested expandable row expansion e f")))))))), h("smoothly-table-expandable-row", null, h("smoothly-table-cell", null, h("span", null, "one"), h("span", null, "two"), h("span", null, "three")), h("smoothly-table-cell", null, "five", h("smoothly-icon", { name: "paper-plane-sharp", size: "small" })), h("div", { slot: "detail" }, "four")), h("smoothly-table-row", null, h("smoothly-table-expandable-cell", null, "a cell", h("div", { slot: "detail" }, h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, "E"), h("smoothly-table-header", null, "F")), h("smoothly-table-row", null, h("smoothly-table-expandable-cell", null, "e cell", h("div", { slot: "detail" }, h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, "G"), h("smoothly-table-header", null, "H")), h("smoothly-table-row", null, h("smoothly-table-expandable-cell", null, "g cell", h("div", { slot: "detail" }, "nested expandable cell expansion g")), h("smoothly-table-expandable-cell", null, "h cell", h("div", { slot: "detail" }, "nested expandable cell expansion h")))))), h("smoothly-table-expandable-cell", null, "f cell", h("div", { slot: "detail" }, "nested expandable cell expansion f")))))), h("smoothly-table-expandable-cell", null, "b cell", h("div", { slot: "detail" }, h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, "C"), h("smoothly-table-header", null, "D")), h("smoothly-table-row", null, h("smoothly-table-expandable-cell", null, "c cell", h("div", { slot: "detail" }, "nested expandable cell expansion c")), h("smoothly-table-expandable-cell", null, "d cell", h("div", { slot: "detail" }, "nested expandable cell expansion d")))))))),
       h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, "display"), h("smoothly-table-header", null, "contents")), h("smoothly-table-expandable-row", null, h("div", { class: "content" }, h("smoothly-table-cell", null, "A"), h("smoothly-table-cell", null, "B")), h("div", { slot: "detail" }, "expansion"))),
@@ -55044,7 +55111,6 @@ const TableExpandableCell = class extends HTMLElement {
     this.allowSpotlight = true;
     this.spotlight = true;
     this.align = "left";
-    this.expansionData = undefined;
     this.open = undefined;
   }
   openChanged(value) {
@@ -55078,8 +55144,7 @@ const TableExpandableCell = class extends HTMLElement {
     event.detail(this.element);
   }
   render() {
-    var _a;
-    return (h(Host, { style: { textAlign: this.align } }, h("aside", null, h("smoothly-icon", { name: "caret-forward-outline" }), h("slot", null)), h("tr", { class: { spotlight: this.spotlight }, ref: e => (this.expansionElement = e) }, h("td", { colSpan: 999, class: !this.open ? "hide" : "" }, this.open && ((_a = this.expansionData) === null || _a === void 0 ? void 0 : _a.call(this)), h("slot", { name: "detail" })))));
+    return (h(Host, { style: { textAlign: this.align } }, h("aside", null, h("smoothly-icon", { name: "caret-forward-outline" }), h("slot", null)), h("tr", { class: { spotlight: this.spotlight }, ref: e => (this.expansionElement = e) }, h("td", { colSpan: 999, class: !this.open ? "hide" : "" }, h("slot", { name: "detail" })))));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -55419,8 +55484,8 @@ const SmoothlyNotification = /*@__PURE__*/proxyCustomElement(Notification, [2,"s
 const SmoothlyNotifier = /*@__PURE__*/proxyCustomElement(Notifier, [6,"smoothly-notifier",{"notices":[32]},[[0,"notice","onNotice"],[0,"remove","onRemove"]]]);
 const SmoothlyPicker = /*@__PURE__*/proxyCustomElement(SmoothlyPicker$1, [6,"smoothly-picker",{"looks":[1537],"name":[513],"open":[1540],"mutable":[516],"multiple":[516],"readonly":[516],"validator":[16],"selected":[32],"display":[32]},[[0,"smoothlyInputLooks","smoothlyInputLooksHandler"],[0,"smoothlyPickerMenuLoaded","menuLoadedHandler"],[0,"smoothlyPickerOptionLoaded","optionLoadedHandler"],[0,"smoothlyPickerOptionChange","optionChangeHandler"],[8,"click","clickHandler"],[8,"focusin","focusHandler"]]]);
 const SmoothlyPickerDemo = /*@__PURE__*/proxyCustomElement(SmoothlyPickerDemo$1, [2,"smoothly-picker-demo",{"data":[32],"change":[32]},[[0,"smoothlyFormSubmit","submitHandler"]]]);
-const SmoothlyPickerMenu = /*@__PURE__*/proxyCustomElement(SmoothlyPickerMenu$1, [6,"smoothly-picker-menu",{"looks":[1],"multiple":[516],"mutable":[516],"readonly":[516],"validator":[16],"backend":[32],"options":[32],"created":[32],"search":[32],"valid":[32],"display":[32]},[[0,"smoothlyPickerOptionLoad","optionLoadHandler"],[0,"smoothlyPickerOptionLoaded","optionLoadedHandler"],[0,"smoothlyPickerOptionChange","optionChangeHandler"],[0,"smoothlySlotEmpty","emptyDisplayHandler"]]]);
-const SmoothlyPickerOption = /*@__PURE__*/proxyCustomElement(SmoothlyPickerOption$1, [1,"smoothly-picker-option",{"selected":[1540],"visible":[1540],"value":[1032],"search":[1040],"readonly":[32],"slotted":[32]}]);
+const SmoothlyPickerMenu = /*@__PURE__*/proxyCustomElement(SmoothlyPickerMenu$1, [6,"smoothly-picker-menu",{"looks":[1],"open":[516],"multiple":[516],"mutable":[516],"readonly":[516],"validator":[16],"backend":[32],"options":[32],"created":[32],"search":[32],"valid":[32],"display":[32],"flip":[32],"flipChecked":[32]},[[9,"scroll","scrollHandler"],[0,"smoothlyPickerOptionLoad","optionLoadHandler"],[0,"smoothlyPickerOptionLoaded","optionLoadedHandler"],[0,"smoothlyPickerOptionChange","optionChangeHandler"],[0,"smoothlySlotEmpty","emptyDisplayHandler"]]]);
+const SmoothlyPickerOption = /*@__PURE__*/proxyCustomElement(SmoothlyPickerOption$1, [1,"smoothly-picker-option",{"selected":[1540],"visible":[1540],"value":[1032],"search":[1040],"position":[514],"readonly":[32],"slotted":[32]}]);
 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],"tab":[2]}]);
@@ -55442,7 +55507,7 @@ const SmoothlyTable = /*@__PURE__*/proxyCustomElement(Table, [6,"smoothly-table"
 const SmoothlyTableCell = /*@__PURE__*/proxyCustomElement(TableCell, [6,"smoothly-table-cell"]);
 const SmoothlyTableDemo = /*@__PURE__*/proxyCustomElement(TableDemo, [2,"smoothly-table-demo"]);
 const SmoothlyTableDemoFiltered = /*@__PURE__*/proxyCustomElement(TableDemoFiltered, [2,"smoothly-table-demo-filtered",{"criteria":[32],"data":[32],"selector":[32]},[[0,"filters","onFilterUpdate"],[2,"smoothlyInput","smoothlyInputHandler"]]]);
-const SmoothlyTableExpandableCell = /*@__PURE__*/proxyCustomElement(TableExpandableCell, [6,"smoothly-table-expandable-cell",{"align":[1],"expansionData":[16],"open":[1540],"allowSpotlight":[32],"spotlight":[32]},[[0,"click","onClick"],[0,"smoothlyTableLoad","handleTableLoaded"]]]);
+const SmoothlyTableExpandableCell = /*@__PURE__*/proxyCustomElement(TableExpandableCell, [6,"smoothly-table-expandable-cell",{"align":[1],"open":[1540],"allowSpotlight":[32],"spotlight":[32]},[[0,"click","onClick"],[0,"smoothlyTableLoad","handleTableLoaded"]]]);
 const SmoothlyTableExpandableRow = /*@__PURE__*/proxyCustomElement(TableExpandableRow, [6,"smoothly-table-expandable-row",{"align":[1],"open":[1540],"allowSpotlight":[32],"spotlight":[32]},[[0,"smoothlyTableLoad","handleTableLoaded"]]]);
 const SmoothlyTableFooter = /*@__PURE__*/proxyCustomElement(TableFooter, [6,"smoothly-table-footer"]);
 const SmoothlyTableHeader = /*@__PURE__*/proxyCustomElement(TableHeader, [6,"smoothly-table-header",{"name":[1]}]);