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

package/dist/cjs/smoothly.cjs.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6ae370b4.js');
+require('./Observers-6450f075.js');
 
 /*
  Stencil Client Patch Browser v2.22.3 | MIT Licensed | https://stenciljs.com
@@ -17,7 +18,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy(JSON.parse("[[\"smoothly-accordion_67.cjs\",[[0,\"smoothly-app-demo\",{\"baseUrl\":[1,\"base-url\"]}],[0,\"smoothly-input-demo\",null,[[0,\"selectionChanged\",\"handleSelectionChanged\"]]],[2,\"smoothly-table-demo\"],[0,\"smoothly-display-demo\"],[4,\"smoothly-app\",{\"label\":[1],\"color\":[1],\"menuOpen\":[1540,\"menu-open\"],\"selected\":[32]},[[8,\"popstate\",\"locationChangeHandler\"],[0,\"smoothlyRoomSelected\",\"roomSelectedHandler\"],[0,\"smoothlyRoomLoaded\",\"roomLoadedHandler\"],[8,\"click\",\"clickHandler\"]]],[0,\"smoothly-button-demo\"],[0,\"smoothly-dialog-demo\"],[2,\"smoothly-select-demo\"],[6,\"smoothly-app-room\",{\"label\":[513],\"icon\":[513],\"path\":[1],\"to\":[1],\"selected\":[1540],\"getContent\":[64],\"setSelected\":[64]}],[2,\"smoothly-icon-demo\"],[2,\"smoothly-table-testing\",{\"counter\":[32]}],[2,\"smoothly-picker-demo\",{\"data\":[32],\"change\":[32]},[[0,\"smoothlyFormSubmit\",\"submitHandler\"]]],[2,\"smoothly-table-demo-filtered\",{\"criteria\":[32],\"data\":[32],\"selector\":[32]},[[0,\"filters\",\"onFilterUpdate\"],[2,\"smoothlyInput\",\"smoothlyInputHandler\"]]],[6,\"smoothly-input-date\",{\"color\":[1537],\"looks\":[1537],\"name\":[513],\"value\":[1025],\"open\":[1028],\"max\":[1025],\"min\":[1025],\"showLabel\":[516,\"show-label\"],\"disabled\":[1028],\"clear\":[64]},[[0,\"smoothlyInput\",\"smoothlyInputHandler\"],[0,\"smoothlyInputLooks\",\"smoothlyInputLooksHandler\"],[0,\"dateSet\",\"dateSetHandler\"]]],[2,\"smoothly-input-date-range\",{\"color\":[1537],\"looks\":[1537],\"name\":[513],\"value\":[1025],\"start\":[1025],\"end\":[1025],\"max\":[1025],\"min\":[1025],\"open\":[1028],\"showLabel\":[516,\"show-label\"],\"labelStart\":[1,\"label-start\"],\"labelEnd\":[1,\"label-end\"],\"clear\":[64]},[[0,\"smoothlyInput\",\"smoothlyInputHandler\"],[0,\"smoothlyInputLooks\",\"smoothlyInputLooksHandler\"],[0,\"startChanged\",\"onStartChanged\"],[0,\"endChanged\",\"onEndChanged\"],[0,\"dateRangeSet\",\"onDateRangeSet\"]]],[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-burger\",{\"visible\":[1540],\"open\":[1540],\"mediaQuery\":[513,\"media-query\"],\"history\":[32]},[[0,\"click\",\"clickHandler\"],[9,\"resize\",\"resizeHandler\"]]],[6,\"smoothly-checkbox\",{\"size\":[1],\"checked\":[1540],\"intermediate\":[1540],\"name\":[1],\"value\":[8],\"disabled\":[516],\"t\":[32],\"toggle\":[64],\"clear\":[64]}],[6,\"smoothly-input-file\",{\"accept\":[1],\"color\":[1537],\"looks\":[1537],\"camera\":[513],\"name\":[513],\"showLabel\":[516,\"show-label\"],\"value\":[1040],\"placeholder\":[1537],\"dragging\":[32],\"clear\":[64]}],[6,\"smoothly-radio-button-item\",{\"value\":[8],\"selected\":[1540],\"color\":[513]}],[6,\"smoothly-summary\",{\"open\":[1540],\"color\":[1],\"fill\":[1],\"size\":[1]}],[1,\"smoothly-toggle-switch\",{\"selected\":[1540],\"disabled\":[516],\"size\":[513],\"name\":[1],\"value\":[8]}],[0,\"smoothly-urlencoded\",{\"data\":[1]}],[6,\"smoothly-accordion\",{\"value\":[1025],\"removeItem\":[64]},[[0,\"smoothlyOpen\",\"handleOpenClose\"],[0,\"smoothlyClose\",\"handleOpenClose\"],[0,\"smoothlyAccordionItemWillLoad\",\"onAccordionItemDidLoad\"]]],[6,\"smoothly-accordion-item\",{\"name\":[1],\"brand\":[1],\"open\":[1540]}],[2,\"smoothly-display-amount\",{\"amount\":[8],\"currency\":[1],\"toInteger\":[4,\"to-integer\"]}],[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],\"tab\":[2]}],[6,\"smoothly-radio-button\",{\"name\":[1],\"value\":[1032],\"deselectable\":[516],\"decoration\":[513]},[[2,\"radioItemSelectInternal\",\"radioSelectHandler\"]]],[2,\"smoothly-skeleton\",{\"widths\":[16],\"width\":[1025],\"color\":[1],\"period\":[2],\"distance\":[1],\"align\":[513]}],[2,\"smoothly-svg\",{\"url\":[513],\"size\":[513],\"color\":[1]}],[6,\"smoothly-toggle\",{\"selected\":[1540],\"shape\":[513],\"disabled\":[516],\"name\":[1],\"value\":[8]},[[0,\"click\",\"onClick\"]]],[1,\"smoothly-filter\",{\"placeholder\":[1025],\"criteria\":[1040],\"inputValue\":[1032,\"input-value\"],\"expanded\":[32],\"freeSearchValue\":[32],\"clear\":[64]},[[0,\"filter\",\"filterHandler\"]]],[6,\"smoothly-picker\",{\"looks\":[1537],\"name\":[513],\"open\":[1540],\"mutable\":[516],\"multiple\":[516],\"readonly\":[516],\"validator\":[16],\"selected\":[32],\"display\":[32],\"clear\":[64]},[[0,\"smoothlyInputLooks\",\"smoothlyInputLooksHandler\"],[0,\"smoothlyPickerMenuLoaded\",\"menuLoadedHandler\"],[0,\"smoothlyPickerOptionLoaded\",\"optionLoadedHandler\"],[0,\"smoothlyPickerOptionChange\",\"optionChangeHandler\"],[8,\"click\",\"clickHandler\"],[8,\"focusin\",\"focusHandler\"]]],[1,\"smoothly-filter-input\",{\"name\":[513],\"value\":[1025],\"type\":[513],\"required\":[1540],\"minLength\":[2,\"min-length\"],\"showLabel\":[516,\"show-label\"],\"maxLength\":[2,\"max-length\"],\"autocomplete\":[4],\"pattern\":[16],\"placeholder\":[1],\"disabled\":[4],\"readonly\":[516],\"currency\":[513],\"comparison\":[1],\"criteria\":[32],\"clear\":[64]}],[2,\"smoothly-back-to-top\",{\"opacity\":[1],\"bottom\":[1],\"right\":[1],\"visible\":[32]}],[6,\"smoothly-input-clear\",{\"color\":[513],\"expand\":[513],\"fill\":[513],\"disabled\":[1540],\"size\":[513],\"shape\":[513],\"display\":[1540],\"type\":[513]},[[0,\"click\",\"clickHandler\"]]],[6,\"smoothly-tab\",{\"label\":[1],\"open\":[1540]},[[0,\"click\",\"onClick\"]]],[6,\"smoothly-tab-switch\",{\"selectedElement\":[32]},[[0,\"expansionOpen\",\"openChanged\"]]],[6,\"smoothly-table-expandable-row\",{\"align\":[1],\"open\":[1540],\"allowSpotlight\":[32],\"spotlight\":[32]},[[0,\"smoothlyTableLoad\",\"handleTableLoaded\"]]],[6,\"smoothly-table-footer\"],[0,\"smoothly-tuple\",{\"tuple\":[16]}],[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\"]]],[2,\"smoothly-calendar\",{\"month\":[1025],\"value\":[1025],\"start\":[1025],\"end\":[1025],\"max\":[1025],\"min\":[1025],\"doubleInput\":[516,\"double-input\"],\"firstSelected\":[32]}],[6,\"smoothly-table-cell\"],[6,\"smoothly-table-expandable-cell\",{\"align\":[1],\"expansionData\":[16],\"open\":[1540],\"allowSpotlight\":[32],\"spotlight\":[32]},[[0,\"click\",\"onClick\"],[0,\"smoothlyTableLoad\",\"handleTableLoaded\"]]],[2,\"smoothly-display\",{\"type\":[1],\"value\":[8],\"currency\":[1],\"country\":[1],\"format\":[16]}],[6,\"smoothly-table\",{\"root\":[1540],\"color\":[1537],\"align\":[513],\"open\":[1540]},[[0,\"smoothlyExpandableLoad\",\"handleExpandableLoaded\"],[0,\"smoothlyExpandableChange\",\"handleExpandableState\"],[0,\"smoothlySpotlightChange\",\"handleSpotlightState\"],[0,\"smoothlyNestedTable\",\"handleNestedTable\"],[0,\"smoothlyExpansionLoad\",\"handleEvents\"],[0,\"smoothlyExpansionOpen\",\"handleEvents\"]]],[6,\"smoothly-table-header\",{\"name\":[1]}],[6,\"smoothly-table-row\",{\"open\":[1540]},[[0,\"smoothlyExpansionLoad\",\"onExpansionLoad\"],[0,\"smoothlyExpandableChange\",\"onExpansionChange\"],[0,\"smoothlyExpansionOpen\",\"onExpansionOpen\"]]],[2,\"smoothly-input-month\",{\"value\":[1025]}],[1,\"smoothly-picker-option\",{\"selected\":[1540],\"visible\":[1540],\"value\":[1032],\"search\":[1040],\"readonly\":[32],\"slotted\":[32],\"clickHandler\":[64]}],[6,\"smoothly-slot-elements\",{\"clone\":[4],\"nodes\":[1040]}],[6,\"smoothly-submit\",{\"color\":[513],\"expand\":[513],\"fill\":[513],\"disabled\":[516],\"type\":[513],\"size\":[513],\"shape\":[513],\"prevent\":[4]},[[0,\"click\",\"clickHandler\"]]],[6,\"smoothly-input-select\",{\"name\":[1],\"color\":[1537],\"looks\":[1537],\"type\":[1537],\"showSelected\":[1540,\"show-selected\"],\"initialPrompt\":[1,\"initial-prompt\"],\"initialValue\":[8,\"initial-value\"],\"opened\":[32],\"selectedElement\":[32],\"missing\":[32],\"filter\":[32],\"reset\":[64]},[[0,\"click\",\"onClick\"],[0,\"itemSelected\",\"onItemSelected\"],[0,\"keydown\",\"onKeyDown\"]]],[6,\"smoothly-item\",{\"value\":[8],\"selected\":[1540],\"marked\":[1540],\"filter\":[64]},[[0,\"click\",\"onClick\"]]],[6,\"smoothly-slotted-elements\",{\"clone\":[4]}],[4,\"smoothly-form\",{\"color\":[1537],\"value\":[1040],\"looks\":[513],\"name\":[1],\"method\":[1],\"action\":[1],\"processing\":[1540],\"prevent\":[4],\"changed\":[1540],\"notice\":[32],\"submit\":[64],\"clear\":[64]},[[0,\"smoothlyInputLooks\",\"smoothlyInputLooksHandler\"],[0,\"smoothlyInput\",\"smoothlyInputHandler\"],[0,\"smoothlySubmit\",\"smoothlySubmitHandler\"],[0,\"smoothlyInputLoad\",\"SmoothlyInputLoadHandler\"]]],[6,\"smoothly-button\",{\"color\":[513],\"expand\":[513],\"fill\":[513],\"disabled\":[516],\"type\":[513],\"size\":[513],\"shape\":[513],\"link\":[1]}],[2,\"smoothly-spinner\",{\"active\":[516],\"size\":[513]}],[2,\"smoothly-notification\",{\"notice\":[16],\"closable\":[4],\"icon\":[4],\"tick\":[32]},[[0,\"trigger\",\"onTrigger\"]]],[6,\"smoothly-trigger\",{\"color\":[513],\"fill\":[513],\"disabled\":[516],\"type\":[513],\"name\":[1],\"value\":[8]},[[0,\"click\",\"onClick\"]]],[6,\"smoothly-input\",{\"color\":[1537],\"looks\":[1537],\"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\":[1537],\"disabled\":[1028],\"readonly\":[1540],\"currency\":[513],\"changed\":[1540],\"initialValue\":[32],\"clear\":[64],\"getFormData\":[64],\"setKeepFocusOnReRender\":[64],\"setSelectionRange\":[64]},[[0,\"smoothlyInputLoad\",\"SmoothlyInputLoadHandler\"]]],[2,\"smoothly-icon\",{\"color\":[513],\"fill\":[513],\"name\":[513],\"size\":[513],\"toolTip\":[1,\"tool-tip\"],\"document\":[32]}]]],[\"smoothly-addresses.cjs\",[[2,\"smoothly-addresses\",{\"value\":[16],\"editable\":[16]}]]],[\"smoothly-color.cjs\",[[6,\"smoothly-color\",{\"color\":[513]}]]],[\"smoothly-country.cjs\",[[2,\"smoothly-country\",{\"value\":[1],\"text\":[1],\"language\":[32]}]]],[\"smoothly-display-date-time.cjs\",[[2,\"smoothly-display-date-time\",{\"datetime\":[1]}]]],[\"smoothly-google-font.cjs\",[[2,\"smoothly-google-font\",{\"value\":[1]}]]],[\"smoothly-radio-group.cjs\",[[4,\"smoothly-radio-group\",{\"orientation\":[513]}]]],[\"smoothly-reorder.cjs\",[[0,\"smoothly-reorder\"]]],[\"smoothly-trigger-sink.cjs\",[[6,\"smoothly-trigger-sink\",{\"context\":[16],\"destination\":[1],\"filter\":[1]},[[0,\"trigger\",\"TriggerListener\"]]]]],[\"smoothly-trigger-source.cjs\",[[6,\"smoothly-trigger-source\",{\"listen\":[1]}]]],[\"smoothly-address-display.cjs\",[[2,\"smoothly-address-display\",{\"value\":[16],\"editable\":[4]}]]],[\"smoothly-address.cjs\",[[2,\"smoothly-address\",{\"value\":[16],\"editable\":[4]}]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"smoothly-accordion_67.cjs\",[[0,\"smoothly-app-demo\",{\"baseUrl\":[1,\"base-url\"]}],[0,\"smoothly-input-demo\",null,[[0,\"selectionChanged\",\"handleSelectionChanged\"]]],[2,\"smoothly-table-demo\"],[0,\"smoothly-display-demo\"],[4,\"smoothly-app\",{\"label\":[1],\"color\":[1],\"menuOpen\":[1540,\"menu-open\"],\"selected\":[32]},[[8,\"popstate\",\"locationChangeHandler\"],[0,\"smoothlyRoomSelected\",\"roomSelectedHandler\"],[0,\"smoothlyRoomLoaded\",\"roomLoadedHandler\"],[8,\"click\",\"clickHandler\"]]],[0,\"smoothly-button-demo\"],[0,\"smoothly-dialog-demo\"],[2,\"smoothly-select-demo\"],[6,\"smoothly-app-room\",{\"label\":[513],\"icon\":[513],\"path\":[1],\"to\":[1],\"selected\":[1540],\"getContent\":[64],\"setSelected\":[64]}],[2,\"smoothly-icon-demo\"],[2,\"smoothly-table-testing\",{\"counter\":[32]}],[2,\"smoothly-picker-demo\",{\"data\":[32],\"change\":[32]},[[0,\"smoothlyFormSubmit\",\"submitHandler\"]]],[2,\"smoothly-table-demo-filtered\",{\"criteria\":[32],\"data\":[32],\"selector\":[32]},[[0,\"filters\",\"onFilterUpdate\"],[2,\"smoothlyInput\",\"smoothlyInputHandler\"]]],[6,\"smoothly-input-date\",{\"color\":[1537],\"looks\":[1537],\"name\":[513],\"value\":[1025],\"open\":[1028],\"max\":[1025],\"min\":[1025],\"showLabel\":[516,\"show-label\"],\"disabled\":[1028],\"clear\":[64]},[[0,\"smoothlyInput\",\"smoothlyInputHandler\"],[0,\"smoothlyInputLooks\",\"smoothlyInputLooksHandler\"],[0,\"dateSet\",\"dateSetHandler\"]]],[2,\"smoothly-input-date-range\",{\"color\":[1537],\"looks\":[1537],\"name\":[513],\"value\":[1025],\"start\":[1025],\"end\":[1025],\"max\":[1025],\"min\":[1025],\"open\":[1028],\"showLabel\":[516,\"show-label\"],\"labelStart\":[1,\"label-start\"],\"labelEnd\":[1,\"label-end\"],\"clear\":[64]},[[0,\"smoothlyInput\",\"smoothlyInputHandler\"],[0,\"smoothlyInputLooks\",\"smoothlyInputLooksHandler\"],[0,\"startChanged\",\"onStartChanged\"],[0,\"endChanged\",\"onEndChanged\"],[0,\"dateRangeSet\",\"onDateRangeSet\"]]],[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-burger\",{\"visible\":[1540],\"open\":[1540],\"mediaQuery\":[513,\"media-query\"],\"history\":[32]},[[0,\"click\",\"clickHandler\"],[9,\"resize\",\"resizeHandler\"]]],[6,\"smoothly-checkbox\",{\"size\":[1],\"checked\":[1540],\"intermediate\":[1540],\"name\":[1],\"value\":[8],\"disabled\":[516],\"t\":[32],\"toggle\":[64],\"clear\":[64]}],[6,\"smoothly-input-file\",{\"accept\":[1],\"color\":[1537],\"looks\":[1537],\"camera\":[513],\"name\":[513],\"showLabel\":[516,\"show-label\"],\"value\":[1040],\"placeholder\":[1537],\"dragging\":[32],\"clear\":[64]}],[6,\"smoothly-radio-button-item\",{\"value\":[8],\"selected\":[1540],\"color\":[513]}],[6,\"smoothly-summary\",{\"open\":[1540],\"color\":[1],\"fill\":[1],\"size\":[1]}],[1,\"smoothly-toggle-switch\",{\"selected\":[1540],\"disabled\":[516],\"size\":[513],\"name\":[1],\"value\":[8]}],[0,\"smoothly-urlencoded\",{\"data\":[1]}],[6,\"smoothly-accordion\",{\"value\":[1025],\"removeItem\":[64]},[[0,\"smoothlyOpen\",\"handleOpenClose\"],[0,\"smoothlyClose\",\"handleOpenClose\"],[0,\"smoothlyAccordionItemWillLoad\",\"onAccordionItemDidLoad\"]]],[6,\"smoothly-accordion-item\",{\"name\":[1],\"brand\":[1],\"open\":[1540]}],[2,\"smoothly-display-amount\",{\"amount\":[8],\"currency\":[1],\"toInteger\":[4,\"to-integer\"]}],[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],\"tab\":[2]}],[6,\"smoothly-radio-button\",{\"name\":[1],\"value\":[1032],\"deselectable\":[516],\"decoration\":[513]},[[2,\"radioItemSelectInternal\",\"radioSelectHandler\"]]],[2,\"smoothly-skeleton\",{\"widths\":[16],\"width\":[1025],\"color\":[1],\"period\":[2],\"distance\":[1],\"align\":[513]}],[2,\"smoothly-svg\",{\"url\":[513],\"size\":[513],\"color\":[1]}],[6,\"smoothly-toggle\",{\"selected\":[1540],\"shape\":[513],\"disabled\":[516],\"name\":[1],\"value\":[8]},[[0,\"click\",\"onClick\"]]],[1,\"smoothly-filter\",{\"placeholder\":[1025],\"criteria\":[1040],\"inputValue\":[1032,\"input-value\"],\"expanded\":[32],\"freeSearchValue\":[32],\"clear\":[64]},[[0,\"filter\",\"filterHandler\"]]],[6,\"smoothly-picker\",{\"looks\":[1537],\"name\":[513],\"open\":[1540],\"mutable\":[516],\"multiple\":[516],\"readonly\":[516],\"validator\":[16],\"selected\":[32],\"display\":[32],\"clear\":[64]},[[0,\"smoothlyInputLooks\",\"smoothlyInputLooksHandler\"],[0,\"smoothlyPickerMenuLoaded\",\"menuLoadedHandler\"],[0,\"smoothlyPickerOptionLoaded\",\"optionLoadedHandler\"],[0,\"smoothlyPickerOptionChange\",\"optionChangeHandler\"],[8,\"click\",\"clickHandler\"],[8,\"focusin\",\"focusHandler\"]]],[1,\"smoothly-filter-input\",{\"name\":[513],\"value\":[1025],\"type\":[513],\"required\":[1540],\"minLength\":[2,\"min-length\"],\"showLabel\":[516,\"show-label\"],\"maxLength\":[2,\"max-length\"],\"autocomplete\":[4],\"pattern\":[16],\"placeholder\":[1],\"disabled\":[4],\"readonly\":[516],\"currency\":[513],\"comparison\":[1],\"criteria\":[32],\"clear\":[64]}],[2,\"smoothly-back-to-top\",{\"opacity\":[1],\"bottom\":[1],\"right\":[1],\"visible\":[32]}],[6,\"smoothly-input-clear\",{\"color\":[513],\"expand\":[513],\"fill\":[513],\"disabled\":[1540],\"size\":[513],\"shape\":[513],\"display\":[1540],\"type\":[513]},[[0,\"click\",\"clickHandler\"]]],[6,\"smoothly-tab\",{\"label\":[1],\"open\":[1540]},[[0,\"click\",\"onClick\"]]],[6,\"smoothly-tab-switch\",{\"selectedElement\":[32]},[[0,\"expansionOpen\",\"openChanged\"]]],[6,\"smoothly-table-expandable-row\",{\"align\":[1],\"open\":[1540],\"allowSpotlight\":[32],\"spotlight\":[32]},[[0,\"smoothlyTableLoad\",\"handleTableLoaded\"]]],[6,\"smoothly-table-footer\"],[0,\"smoothly-tuple\",{\"tuple\":[16]}],[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\"]]],[2,\"smoothly-calendar\",{\"month\":[1025],\"value\":[1025],\"start\":[1025],\"end\":[1025],\"max\":[1025],\"min\":[1025],\"doubleInput\":[516,\"double-input\"],\"firstSelected\":[32]}],[6,\"smoothly-table-cell\"],[6,\"smoothly-table-expandable-cell\",{\"align\":[1],\"open\":[1540],\"allowSpotlight\":[32],\"spotlight\":[32]},[[0,\"click\",\"onClick\"],[0,\"smoothlyTableLoad\",\"handleTableLoaded\"]]],[2,\"smoothly-display\",{\"type\":[1],\"value\":[8],\"currency\":[1],\"country\":[1],\"format\":[16]}],[6,\"smoothly-table\",{\"root\":[1540],\"color\":[1537],\"align\":[513],\"open\":[1540]},[[0,\"smoothlyExpandableLoad\",\"handleExpandableLoaded\"],[0,\"smoothlyExpandableChange\",\"handleExpandableState\"],[0,\"smoothlySpotlightChange\",\"handleSpotlightState\"],[0,\"smoothlyNestedTable\",\"handleNestedTable\"],[0,\"smoothlyExpansionLoad\",\"handleEvents\"],[0,\"smoothlyExpansionOpen\",\"handleEvents\"]]],[6,\"smoothly-table-header\",{\"name\":[1]}],[6,\"smoothly-table-row\",{\"open\":[1540]},[[0,\"smoothlyExpansionLoad\",\"onExpansionLoad\"],[0,\"smoothlyExpandableChange\",\"onExpansionChange\"],[0,\"smoothlyExpansionOpen\",\"onExpansionOpen\"]]],[2,\"smoothly-input-month\",{\"value\":[1025]}],[1,\"smoothly-picker-option\",{\"selected\":[1540],\"visible\":[1540],\"value\":[1032],\"search\":[1040],\"position\":[514],\"readonly\":[32],\"slotted\":[32],\"clickHandler\":[64]}],[6,\"smoothly-slot-elements\",{\"clone\":[4],\"nodes\":[1040]}],[6,\"smoothly-submit\",{\"color\":[513],\"expand\":[513],\"fill\":[513],\"disabled\":[516],\"type\":[513],\"size\":[513],\"shape\":[513],\"prevent\":[4]},[[0,\"click\",\"clickHandler\"]]],[6,\"smoothly-input-select\",{\"name\":[1],\"color\":[1537],\"looks\":[1537],\"type\":[1537],\"showSelected\":[1540,\"show-selected\"],\"initialPrompt\":[1,\"initial-prompt\"],\"initialValue\":[8,\"initial-value\"],\"opened\":[32],\"selectedElement\":[32],\"missing\":[32],\"filter\":[32],\"reset\":[64]},[[0,\"click\",\"onClick\"],[0,\"itemSelected\",\"onItemSelected\"],[0,\"keydown\",\"onKeyDown\"]]],[6,\"smoothly-item\",{\"value\":[8],\"selected\":[1540],\"marked\":[1540],\"filter\":[64]},[[0,\"click\",\"onClick\"]]],[6,\"smoothly-slotted-elements\",{\"clone\":[4]}],[4,\"smoothly-form\",{\"color\":[1537],\"value\":[1040],\"looks\":[513],\"name\":[1],\"method\":[1],\"action\":[1],\"processing\":[1540],\"prevent\":[4],\"changed\":[1540],\"notice\":[32],\"submit\":[64],\"clear\":[64]},[[0,\"smoothlyInputLooks\",\"smoothlyInputLooksHandler\"],[0,\"smoothlyInput\",\"smoothlyInputHandler\"],[0,\"smoothlySubmit\",\"smoothlySubmitHandler\"],[0,\"smoothlyInputLoad\",\"SmoothlyInputLoadHandler\"]]],[6,\"smoothly-button\",{\"color\":[513],\"expand\":[513],\"fill\":[513],\"disabled\":[516],\"type\":[513],\"size\":[513],\"shape\":[513],\"link\":[1]}],[2,\"smoothly-spinner\",{\"active\":[516],\"size\":[513]}],[2,\"smoothly-notification\",{\"notice\":[16],\"closable\":[4],\"icon\":[4],\"tick\":[32]},[[0,\"trigger\",\"onTrigger\"]]],[6,\"smoothly-trigger\",{\"color\":[513],\"fill\":[513],\"disabled\":[516],\"type\":[513],\"name\":[1],\"value\":[8]},[[0,\"click\",\"onClick\"]]],[6,\"smoothly-input\",{\"color\":[1537],\"looks\":[1537],\"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\":[1537],\"disabled\":[1028],\"readonly\":[1540],\"currency\":[513],\"changed\":[1540],\"initialValue\":[32],\"clear\":[64],\"getFormData\":[64],\"setKeepFocusOnReRender\":[64],\"setSelectionRange\":[64]},[[0,\"smoothlyInputLoad\",\"SmoothlyInputLoadHandler\"]]],[2,\"smoothly-icon\",{\"color\":[513],\"fill\":[513],\"name\":[513],\"size\":[513],\"toolTip\":[1,\"tool-tip\"],\"document\":[32]}]]],[\"smoothly-addresses.cjs\",[[2,\"smoothly-addresses\",{\"value\":[16],\"editable\":[16]}]]],[\"smoothly-color.cjs\",[[6,\"smoothly-color\",{\"color\":[513]}]]],[\"smoothly-country.cjs\",[[2,\"smoothly-country\",{\"value\":[1],\"text\":[1],\"language\":[32]}]]],[\"smoothly-display-date-time.cjs\",[[2,\"smoothly-display-date-time\",{\"datetime\":[1]}]]],[\"smoothly-google-font.cjs\",[[2,\"smoothly-google-font\",{\"value\":[1]}]]],[\"smoothly-radio-group.cjs\",[[4,\"smoothly-radio-group\",{\"orientation\":[513]}]]],[\"smoothly-reorder.cjs\",[[0,\"smoothly-reorder\"]]],[\"smoothly-trigger-sink.cjs\",[[6,\"smoothly-trigger-sink\",{\"context\":[16],\"destination\":[1],\"filter\":[1]},[[0,\"trigger\",\"TriggerListener\"]]]]],[\"smoothly-trigger-source.cjs\",[[6,\"smoothly-trigger-source\",{\"listen\":[1]}]]],[\"smoothly-address-display.cjs\",[[2,\"smoothly-address-display\",{\"value\":[16],\"editable\":[4]}]]],[\"smoothly-address.cjs\",[[2,\"smoothly-address\",{\"value\":[16],\"editable\":[4]}]]]]"), options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/smoothly.cjs.js.map

@@ -1 +1 @@
-{"file":"smoothly.cjs.js","mappings":";;;;;;AAAA;AACA;AACA;AAgBA,MAAM,YAAY,GAAG,MAAM;AA6B3B,IAAI,MAAM,UAAU,GAAG,0MAAe,CAAC;AACvC,IAAI,MAAM,IAAI,GAAyD,EAAE,CAAC;AAe1E,IAAI,IAAuB,UAAU,KAAK,EAAE,EAAE;AAC9C,QAAQ,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AAC1D,KAWK;AACL,IAAI,OAAOA,oBAAc,CAAC,IAAI,CAAC,CAAC;AAChC,CAAC;;AC1ED,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI;AAE/B,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC;;;;","names":["promiseResolve","bootstrapLazy"],"sources":["./node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v2.22.3 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\n/**\n * Helper method for querying a `meta` tag that contains a nonce value\n * out of a DOM's head.\n *\n * @param doc The DOM containing the `head` to query against\n * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag\n * exists or the tag has no content.\n */\nfunction queryNonceMetaTagContent(doc) {\n    var _a, _b, _c;\n    return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name=\"csp-nonce\"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;\n}\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s|-/g, '_')}`;\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    if (BUILD.cssVarShim) {\n        // shim css vars\n        plt.$cssShim$ = win.__cssshim;\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    if (BUILD.profile && !performance.mark) {\n        // not all browsers support performance.mark/measure (Safari 10)\n        // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n        // simply stub the implementations out.\n        // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n        // @ts-ignore\n        performance.mark = performance.measure = () => {\n            /*noop*/\n        };\n        performance.getEntriesByName = () => [];\n    }\n    // @ts-ignore\n    const scriptElm = BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? scriptElm['data-opts'] || {} : {};\n    if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {\n        // Safari < v11 support: This IF is true if it's Safari below v11.\n        // This fn cannot use async/await since Safari didn't support it until v11,\n        // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n        // so both the ESM file and nomodule file would get downloaded. Only Safari\n        // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n        // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n        // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n        return {\n            then() {\n                /* promise noop */\n            },\n        };\n    }\n    if (!BUILD.safari10 && importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n    }\n    else if (BUILD.dynamicImportShim || BUILD.safari10) {\n        opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;\n        if (BUILD.dynamicImportShim) {\n            patchDynamicImport(opts.resourcesUrl, scriptElm);\n        }\n        if (BUILD.dynamicImportShim && !win.customElements) {\n            // module support, but no custom elements support (Old Edge)\n            // @ts-ignore\n            return import(/* webpackChunkName: \"polyfills-dom\" */ './dom.js').then(() => opts);\n        }\n    }\n    return promiseResolve(opts);\n};\nconst patchDynamicImport = (base, orgScriptElm) => {\n    const importFunctionName = getDynamicImportFunction(NAMESPACE);\n    try {\n        // test if this browser supports dynamic imports\n        // There is a caching issue in V8, that breaks using import() in Function\n        // By generating a random string, we can workaround it\n        // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n        win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n    }\n    catch (e) {\n        // this shim is specifically for browsers that do support \"esm\" imports\n        // however, they do NOT support \"dynamic\" imports\n        // basically this code is for old Edge, v18 and below\n        const moduleMap = new Map();\n        win[importFunctionName] = (src) => {\n            var _a;\n            const url = new URL(src, base).href;\n            let mod = moduleMap.get(url);\n            if (!mod) {\n                const script = doc.createElement('script');\n                script.type = 'module';\n                script.crossOrigin = orgScriptElm.crossOrigin;\n                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {\n                    type: 'application/javascript',\n                }));\n                // Apply CSP nonce to the script tag if it exists\n                const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);\n                if (nonce != null) {\n                    script.setAttribute('nonce', nonce);\n                }\n                mod = new Promise((resolve) => {\n                    script.onload = () => {\n                        resolve(win[importFunctionName].m);\n                        script.remove();\n                    };\n                });\n                moduleMap.set(url, mod);\n                doc.head.appendChild(script);\n            }\n            return mod;\n        };\n    }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"version":3}
+{"file":"smoothly.cjs.js","mappings":";;;;;;;AAAA;AACA;AACA;AAgBA,MAAM,YAAY,GAAG,MAAM;AA6B3B,IAAI,MAAM,UAAU,GAAG,0MAAe,CAAC;AACvC,IAAI,MAAM,IAAI,GAAyD,EAAE,CAAC;AAe1E,IAAI,IAAuB,UAAU,KAAK,EAAE,EAAE;AAC9C,QAAQ,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AAC1D,KAWK;AACL,IAAI,OAAOA,oBAAc,CAAC,IAAI,CAAC,CAAC;AAChC,CAAC;;AC1ED,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI;AAE/B,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC;;;;","names":["promiseResolve","bootstrapLazy"],"sources":["./node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v2.22.3 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\n/**\n * Helper method for querying a `meta` tag that contains a nonce value\n * out of a DOM's head.\n *\n * @param doc The DOM containing the `head` to query against\n * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag\n * exists or the tag has no content.\n */\nfunction queryNonceMetaTagContent(doc) {\n    var _a, _b, _c;\n    return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name=\"csp-nonce\"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;\n}\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s|-/g, '_')}`;\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    if (BUILD.cssVarShim) {\n        // shim css vars\n        plt.$cssShim$ = win.__cssshim;\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    if (BUILD.profile && !performance.mark) {\n        // not all browsers support performance.mark/measure (Safari 10)\n        // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n        // simply stub the implementations out.\n        // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n        // @ts-ignore\n        performance.mark = performance.measure = () => {\n            /*noop*/\n        };\n        performance.getEntriesByName = () => [];\n    }\n    // @ts-ignore\n    const scriptElm = BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? scriptElm['data-opts'] || {} : {};\n    if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {\n        // Safari < v11 support: This IF is true if it's Safari below v11.\n        // This fn cannot use async/await since Safari didn't support it until v11,\n        // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n        // so both the ESM file and nomodule file would get downloaded. Only Safari\n        // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n        // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n        // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n        return {\n            then() {\n                /* promise noop */\n            },\n        };\n    }\n    if (!BUILD.safari10 && importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n    }\n    else if (BUILD.dynamicImportShim || BUILD.safari10) {\n        opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;\n        if (BUILD.dynamicImportShim) {\n            patchDynamicImport(opts.resourcesUrl, scriptElm);\n        }\n        if (BUILD.dynamicImportShim && !win.customElements) {\n            // module support, but no custom elements support (Old Edge)\n            // @ts-ignore\n            return import(/* webpackChunkName: \"polyfills-dom\" */ './dom.js').then(() => opts);\n        }\n    }\n    return promiseResolve(opts);\n};\nconst patchDynamicImport = (base, orgScriptElm) => {\n    const importFunctionName = getDynamicImportFunction(NAMESPACE);\n    try {\n        // test if this browser supports dynamic imports\n        // There is a caching issue in V8, that breaks using import() in Function\n        // By generating a random string, we can workaround it\n        // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n        win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n    }\n    catch (e) {\n        // this shim is specifically for browsers that do support \"esm\" imports\n        // however, they do NOT support \"dynamic\" imports\n        // basically this code is for old Edge, v18 and below\n        const moduleMap = new Map();\n        win[importFunctionName] = (src) => {\n            var _a;\n            const url = new URL(src, base).href;\n            let mod = moduleMap.get(url);\n            if (!mod) {\n                const script = doc.createElement('script');\n                script.type = 'module';\n                script.crossOrigin = orgScriptElm.crossOrigin;\n                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {\n                    type: 'application/javascript',\n                }));\n                // Apply CSP nonce to the script tag if it exists\n                const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);\n                if (nonce != null) {\n                    script.setAttribute('nonce', nonce);\n                }\n                mod = new Promise((resolve) => {\n                    script.onload = () => {\n                        resolve(win[importFunctionName].m);\n                        script.remove();\n                    };\n                });\n                moduleMap.set(url, mod);\n                doc.head.appendChild(script);\n            }\n            return mod;\n        };\n    }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"version":3}

package/dist/collection/collection-manifest.json

@@ -85,5 +85,6 @@
     "typescriptVersion": "4.9.4"
   },
   "collections": [],
-  "bundles": []
+  "bundles": [],
+  "global": "./global/index.js"
 }

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

@@ -56,7 +56,7 @@ export class SmoothlyPickerDemo {
     }), 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 is() { return "smoothly-picker-demo"; }
   static get encapsulation() { return "scoped"; }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/picker/demo/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, Listen, State } from \"@stencil/core\"\nimport { Data, Notice } from \"../../../model\"\nimport { Controls } from \"../menu\"\n\nfunction validateEmail(email: string) {\n\treturn email.match(/^.+@.+/) ? true : { result: false, notice: Notice.failed(\"That is not an email\") }\n}\n\n@Component({\n\ttag: \"smoothly-picker-demo\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyPickerDemo {\n\tprivate controls?: Controls\n\tprivate users: Record<string, string | undefined> = {\n\t\t\"giovani@rocket.com\": \"giovani doe\",\n\t\t\"jessie@rocket.com\": \"jessie doe\",\n\t\t\"james@rocket.com\": \"james doe\",\n\t}\n\t@State() data = {\n\t\tmessage: \"hello world\",\n\t\temails: [\"jessie@rocket.com\", \"james@rocket.com\"],\n\t\toptions: [\n\t\t\t\"giovani@rocket.com\",\n\t\t\t\"john@example.com\",\n\t\t\t\"jane@example.com\",\n\t\t\t\"jack@example.com\",\n\t\t\t\"jessica@example.com\",\n\t\t\t\"julia@example.com\",\n\t\t\t\"jayden@example.com\",\n\t\t\t\"jake@example.com\",\n\t\t\t\"jamie@example.com\",\n\t\t\t\"jasmine@example.com\",\n\t\t],\n\t}\n\t@State() change?: SmoothlyPickerDemo[\"data\"]\n\tinputHandler(event: CustomEvent<Data>) {\n\t\tif (this.change) {\n\t\t\tthis.change = {\n\t\t\t\t...this.change,\n\t\t\t\t...event.detail,\n\t\t\t}\n\t\t\tconsole.log(\"demo input\", this.change)\n\t\t}\n\t}\n\t@Listen(\"smoothlyFormSubmit\")\n\tsubmitHandler(event: CustomEvent<Data>) {\n\t\tconsole.log(\"submitted\", event.detail)\n\t}\n\tclickHandler() {\n\t\tif (!this.change)\n\t\t\tthis.controls?.remember()\n\t\telse\n\t\t\tthis.controls?.restore()\n\t\tthis.change = this.change ? undefined : { ...this.data, emails: [...this.data.emails] }\n\t}\n\tloadedHandler(event: CustomEvent<Controls>) {\n\t\tthis.controls = event.detail\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<smoothly-button onClick={() => this.clickHandler()}>\n\t\t\t\t\t{!this.change ? \"start edit\" : \"end edit\"}\n\t\t\t\t</smoothly-button>\n\t\t\t\t<h5>Controlled input</h5>\n\t\t\t\t<smoothly-form looks=\"line\" onSmoothlyFormInput={e => this.inputHandler(e as any)}>\n\t\t\t\t\t<smoothly-input readonly={!this.change} name=\"message\" value={this.data.message}>\n\t\t\t\t\t\tMessage\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-picker\n\t\t\t\t\t\tname=\"emails\"\n\t\t\t\t\t\tmutable\n\t\t\t\t\t\tmultiple\n\t\t\t\t\t\treadonly={!this.change}\n\t\t\t\t\t\tvalidator={validateEmail}\n\t\t\t\t\t\tonSmoothlyPickerLoaded={e => this.loadedHandler(e)}>\n\t\t\t\t\t\t<span slot=\"label\">Emails</span>\n\t\t\t\t\t\t<span slot=\"search\">Search</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" slot=\"display\" name=\"person-add-outline\" />\n\t\t\t\t\t\t{(this.change?.emails ?? this.data.emails).map(email => (\n\t\t\t\t\t\t\t<smoothly-picker-option key={email} value={email} selected search={[this.users[email] ?? []].flat()}>\n\t\t\t\t\t\t\t\t<span>{this.users[email]}</span>\n\t\t\t\t\t\t\t\t<span slot=\"label\">{email}</span>\n\t\t\t\t\t\t\t\t<smoothly-icon size=\"tiny\" slot=\"display\" name=\"person-outline\" />\n\t\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t{this.data.options.map(email => (\n\t\t\t\t\t\t\t<smoothly-picker-option key={email} value={email} search={[this.users[email] ?? []].flat()}>\n\t\t\t\t\t\t\t\t<span>{this.users[email]}</span>\n\t\t\t\t\t\t\t\t<span slot=\"label\">{email}</span>\n\t\t\t\t\t\t\t\t<smoothly-icon size=\"tiny\" slot=\"display\" name=\"person-outline\" />\n\t\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</smoothly-picker>\n\t\t\t\t\t<smoothly-submit size=\"icon\" slot=\"submit\">\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" />\n\t\t\t\t\t</smoothly-submit>\n\t\t\t\t\t<smoothly-input-clear type=\"form\" color=\"danger\" fill=\"solid\" slot=\"clear\">\n\t\t\t\t\t\tClear\n\t\t\t\t\t</smoothly-input-clear>\n\t\t\t\t</smoothly-form>\n\t\t\t\t<h5>uncontrolled inputs</h5>\n\t\t\t\t<smoothly-form onSmoothlyFormSubmit={e => console.log(\"submitted\", e.detail)} looks=\"line\">\n\t\t\t\t\t<smoothly-input name=\"purpose\" type=\"text\">\n\t\t\t\t\t\tPurpose\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-picker multiple mutable name=\"emails\" validator={validateEmail}>\n\t\t\t\t\t\t<span slot=\"label\">Emails</span>\n\t\t\t\t\t\t<span slot=\"search\">Search</span>\n\t\t\t\t\t\t<smoothly-picker-option value={\"james@rocket.com\"}>james@rocket.com</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option selected value={\"jessie@rocket.com\"}>\n\t\t\t\t\t\t\tjessie@rocket.com\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option value={\"giovanni@rocket.com\"}>giovanni@rocket.com</smoothly-picker-option>\n\t\t\t\t\t</smoothly-picker>\n\t\t\t\t\t<smoothly-submit slot=\"submit\">Submit</smoothly-submit>\n\t\t\t\t\t<smoothly-input-clear type=\"form\" color=\"danger\" fill=\"solid\" slot=\"clear\">\n\t\t\t\t\t\tClear\n\t\t\t\t\t</smoothly-input-clear>\n\t\t\t\t\t<smoothly-picker name=\"shape\">\n\t\t\t\t\t\t<span slot=\"label\">Shape</span>\n\t\t\t\t\t\t<span slot=\"search\">Search</span>\n\t\t\t\t\t\t<smoothly-picker-option value={\"circle\"}>\n\t\t\t\t\t\t\t<span slot=\"label\">Circle</span>\n\t\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"ellipse-outline\" />\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option value={\"cube\"}>\n\t\t\t\t\t\t\t<span slot={\"label\"}>Cube</span>\n\t\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"cube-outline\" />\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option value={\"square\"} selected>\n\t\t\t\t\t\t\t<span slot={\"label\"}>Square</span>\n\t\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"square-outline\" />\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t</smoothly-picker>\n\t\t\t\t\t<smoothly-picker multiple readonly name=\"animals\">\n\t\t\t\t\t\t<span slot=\"label\">Animals</span>\n\t\t\t\t\t\t<span slot=\"search\">Search</span>\n\t\t\t\t\t\t<smoothly-picker-option selected value={\"cat\"}>\n\t\t\t\t\t\t\tCat\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option value={\"dog\"}>Dog</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option value={\"fish\"}>Fish</smoothly-picker-option>\n\t\t\t\t\t</smoothly-picker>\n\t\t\t\t</smoothly-form>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/picker/demo/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, Listen, State } from \"@stencil/core\"\nimport { Data, Notice } from \"../../../model\"\nimport { Controls } from \"../menu\"\n\nfunction validateEmail(email: string) {\n\treturn email.match(/^.+@.+/) ? true : { result: false, notice: Notice.failed(\"That is not an email\") }\n}\n\n@Component({\n\ttag: \"smoothly-picker-demo\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyPickerDemo {\n\tprivate controls?: Controls\n\tprivate users: Record<string, string | undefined> = {\n\t\t\"giovani@rocket.com\": \"giovani doe\",\n\t\t\"jessie@rocket.com\": \"jessie doe\",\n\t\t\"james@rocket.com\": \"james doe\",\n\t}\n\t@State() data = {\n\t\tmessage: \"hello world\",\n\t\temails: [\"jessie@rocket.com\", \"james@rocket.com\"],\n\t\toptions: [\n\t\t\t\"giovani@rocket.com\",\n\t\t\t\"john@example.com\",\n\t\t\t\"jane@example.com\",\n\t\t\t\"jack@example.com\",\n\t\t\t\"jessica@example.com\",\n\t\t\t\"julia@example.com\",\n\t\t\t\"jayden@example.com\",\n\t\t\t\"jake@example.com\",\n\t\t\t\"jamie@example.com\",\n\t\t\t\"jasmine@example.com\",\n\t\t],\n\t}\n\t@State() change?: SmoothlyPickerDemo[\"data\"]\n\tinputHandler(event: CustomEvent<Data>) {\n\t\tif (this.change) {\n\t\t\tthis.change = {\n\t\t\t\t...this.change,\n\t\t\t\t...event.detail,\n\t\t\t}\n\t\t\tconsole.log(\"demo input\", this.change)\n\t\t}\n\t}\n\t@Listen(\"smoothlyFormSubmit\")\n\tsubmitHandler(event: CustomEvent<Data>) {\n\t\tconsole.log(\"submitted\", event.detail)\n\t}\n\tclickHandler() {\n\t\tif (!this.change)\n\t\t\tthis.controls?.remember()\n\t\telse\n\t\t\tthis.controls?.restore()\n\t\tthis.change = this.change ? undefined : { ...this.data, emails: [...this.data.emails] }\n\t}\n\tloadedHandler(event: CustomEvent<Controls>) {\n\t\tthis.controls = event.detail\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<smoothly-button onClick={() => this.clickHandler()}>\n\t\t\t\t\t{!this.change ? \"start edit\" : \"end edit\"}\n\t\t\t\t</smoothly-button>\n\t\t\t\t<h5>Controlled input</h5>\n\t\t\t\t<smoothly-form looks=\"line\" onSmoothlyFormInput={e => this.inputHandler(e as any)}>\n\t\t\t\t\t<smoothly-input readonly={!this.change} name=\"message\" value={this.data.message}>\n\t\t\t\t\t\tMessage\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-picker\n\t\t\t\t\t\tname=\"emails\"\n\t\t\t\t\t\tmutable\n\t\t\t\t\t\tmultiple\n\t\t\t\t\t\treadonly={!this.change}\n\t\t\t\t\t\tvalidator={validateEmail}\n\t\t\t\t\t\tonSmoothlyPickerLoaded={e => this.loadedHandler(e)}>\n\t\t\t\t\t\t<span slot=\"label\">Emails</span>\n\t\t\t\t\t\t<span slot=\"search\">Search</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" slot=\"display\" name=\"person-add-outline\" />\n\t\t\t\t\t\t{(this.change?.emails ?? this.data.emails).map(email => (\n\t\t\t\t\t\t\t<smoothly-picker-option key={email} value={email} selected search={[this.users[email] ?? []].flat()}>\n\t\t\t\t\t\t\t\t<span>{this.users[email]}</span>\n\t\t\t\t\t\t\t\t<span slot=\"label\">{email}</span>\n\t\t\t\t\t\t\t\t<smoothly-icon size=\"tiny\" slot=\"display\" name=\"person-outline\" />\n\t\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t{this.data.options.map(email => (\n\t\t\t\t\t\t\t<smoothly-picker-option key={email} value={email} search={[this.users[email] ?? []].flat()}>\n\t\t\t\t\t\t\t\t<span>{this.users[email]}</span>\n\t\t\t\t\t\t\t\t<span slot=\"label\">{email}</span>\n\t\t\t\t\t\t\t\t<smoothly-icon size=\"tiny\" slot=\"display\" name=\"person-outline\" />\n\t\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</smoothly-picker>\n\t\t\t\t\t<smoothly-submit size=\"icon\" slot=\"submit\">\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" />\n\t\t\t\t\t</smoothly-submit>\n\t\t\t\t\t<smoothly-input-clear type=\"form\" color=\"danger\" fill=\"solid\" slot=\"clear\">\n\t\t\t\t\t\tClear\n\t\t\t\t\t</smoothly-input-clear>\n\t\t\t\t</smoothly-form>\n\t\t\t\t<h5>uncontrolled inputs</h5>\n\t\t\t\t<smoothly-form onSmoothlyFormSubmit={e => console.log(\"submitted\", e.detail)} looks=\"line\">\n\t\t\t\t\t<smoothly-input name=\"purpose\" type=\"text\">\n\t\t\t\t\t\tPurpose\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-picker multiple mutable name=\"emails\" validator={validateEmail}>\n\t\t\t\t\t\t<span slot=\"label\">Emails</span>\n\t\t\t\t\t\t<span slot=\"search\">Search</span>\n\t\t\t\t\t\t<smoothly-picker-option value={\"james@rocket.com\"}>james@rocket.com</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option selected value={\"jessie@rocket.com\"}>\n\t\t\t\t\t\t\tjessie@rocket.com\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option value={\"giovanni@rocket.com\"}>giovanni@rocket.com</smoothly-picker-option>\n\t\t\t\t\t</smoothly-picker>\n\t\t\t\t\t<smoothly-submit slot=\"submit\">Submit</smoothly-submit>\n\t\t\t\t\t<smoothly-input-clear type=\"form\" color=\"danger\" fill=\"solid\" slot=\"clear\">\n\t\t\t\t\t\tClear\n\t\t\t\t\t</smoothly-input-clear>\n\t\t\t\t\t<smoothly-picker name=\"shape\">\n\t\t\t\t\t\t<span slot=\"label\">Shape</span>\n\t\t\t\t\t\t<span slot=\"search\">Search</span>\n\t\t\t\t\t\t<smoothly-picker-option value={\"circle\"}>\n\t\t\t\t\t\t\t<span slot=\"label\">Circle</span>\n\t\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"ellipse-outline\" />\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option value={\"cube\"}>\n\t\t\t\t\t\t\t<span slot={\"label\"}>Cube</span>\n\t\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"cube-outline\" />\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option value={\"square\"} selected>\n\t\t\t\t\t\t\t<span slot={\"label\"}>Square</span>\n\t\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"square-outline\" />\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t</smoothly-picker>\n\t\t\t\t\t<smoothly-picker multiple readonly name=\"animals\">\n\t\t\t\t\t\t<span slot=\"label\">Animals</span>\n\t\t\t\t\t\t<span slot=\"search\">Search</span>\n\t\t\t\t\t\t<smoothly-picker-option selected value={\"cat\"}>\n\t\t\t\t\t\t\tCat\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option value={\"dog\"}>Dog</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option value={\"fish\"}>Fish</smoothly-picker-option>\n\t\t\t\t\t</smoothly-picker>\n\t\t\t\t</smoothly-form>\n\t\t\t\t<smoothly-picker looks=\"border\" name=\"icon\">\n\t\t\t\t\t<span slot=\"label\">Icon</span>\n\t\t\t\t\t<span slot=\"search\">Search</span>\n\t\t\t\t\t<smoothly-picker-option value={\"circle\"}>\n\t\t\t\t\t\t<span slot=\"label\">Circle</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"ellipse-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"cube\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Cube</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"cube-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"square\"} selected>\n\t\t\t\t\t\t<span slot={\"label\"}>Square</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"square-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"airplane\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Airplane</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"airplane-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"alarm\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Alarm</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"alarm-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"archive\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Archive</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"archive-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"bag\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Bag</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"bag-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"cafe\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Cafe</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"cafe-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"disc\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Disc</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"disc-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"earth\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Earth</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"earth-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"fast-food\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Fast food</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"fast-food-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t</smoothly-picker>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -63,7 +63,7 @@ export class SmoothlyPicker {
     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))));
   }
   static get is() { return "smoothly-picker"; }
   static get encapsulation() { return "scoped"; }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/picker/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\"\nimport { Notice, Option } from \"../../model\"\nimport { Clearable } from \"../input/Clearable\"\nimport { Input } from \"../input/Input\"\nimport { Looks } from \"../input/Looks\"\nimport { Controls } from \"./menu\"\n\n@Component({\n\ttag: \"smoothly-picker\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyPicker implements Clearable, Input {\n\t@Element() element: HTMLSmoothlyPickerElement\n\t@Prop({ reflect: true, mutable: true }) looks: Looks = \"plain\"\n\t@Prop({ reflect: true }) name: string\n\t@Prop({ reflect: true, mutable: true }) open = false\n\t@Prop({ reflect: true }) mutable = false\n\t@Prop({ reflect: true }) multiple = false\n\t@Prop({ reflect: true }) readonly = false\n\t@Prop() validator?: (value: string) => boolean | { result: boolean; notice: Notice }\n\t@State() selected = new Map<any, Option>()\n\t@State() display: Node[]\n\t@Event() smoothlyPickerLoaded: EventEmitter<Controls>\n\t@Event() smoothlyInput: EventEmitter<Record<string, any | any[]>> // multiple -> any[]\n\t@Event() smoothlyChange: EventEmitter<Record<string, any | any[]>> // multiple -> any[]\n\t@Event() smoothlyInputLooks: EventEmitter<(looks: Looks) => void>\n\tprivate controls?: Controls\n\n\tcomponentWillLoad() {\n\t\tthis.smoothlyInputLooks.emit(looks => (this.looks = looks))\n\t}\n\n\t@Watch(\"selected\")\n\tselectedChanged() {\n\t\tconst selected = Array.from(this.selected.values(), option => option.value)\n\t\tthis.smoothlyInput.emit({ [this.name]: this.multiple ? selected : selected.at(0) })\n\t\tthis.smoothlyChange.emit({ [this.name]: this.multiple ? selected : selected.at(0) })\n\t\tthis.display = Array.from(this.selected.values(), option => {\n\t\t\tconst span = document.createElement(\"span\")\n\t\t\toption.slotted.forEach(node => span.appendChild(node.cloneNode(true)))\n\t\t\treturn span\n\t\t})\n\t}\n\n\tcomponentDidLoad() {\n\t\tif (this.controls)\n\t\t\tthis.smoothlyPickerLoaded.emit(this.controls)\n\t}\n\t@Listen(\"smoothlyInputLooks\")\n\tsmoothlyInputLooksHandler(event: CustomEvent<(looks: Looks) => void>) {\n\t\tif (event.target != this.element)\n\t\t\tevent.stopPropagation()\n\t}\n\t@Listen(\"smoothlyPickerMenuLoaded\")\n\tmenuLoadedHandler(event: CustomEvent<Controls>) {\n\t\tthis.controls = event.detail\n\t}\n\t@Listen(\"smoothlyPickerOptionLoaded\")\n\toptionLoadedHandler(event: CustomEvent<Option>) {\n\t\tif (event.detail.selected)\n\t\t\tthis.selected = this.multiple\n\t\t\t\t? new Map(this.selected.set(event.detail.value, event.detail).entries())\n\t\t\t\t: new Map().set(event.detail.value, event.detail)\n\t}\n\n\t@Listen(\"smoothlyPickerOptionChange\")\n\toptionChangeHandler(event: CustomEvent<Option>) {\n\t\tif (!this.readonly)\n\t\t\tif (this.multiple)\n\t\t\t\tthis.selected = event.detail.selected\n\t\t\t\t\t? new Map(this.selected.set(event.detail.value, event.detail).entries())\n\t\t\t\t\t: !this.selected.delete(event.detail.value)\n\t\t\t\t\t? this.selected\n\t\t\t\t\t: new Map(this.selected.entries())\n\t\t\telse\n\t\t\t\tthis.selected = !event.detail.selected ? new Map() : new Map().set(event.detail.value, event.detail)\n\t}\n\t@Listen(\"click\", { target: \"window\" })\n\tclickHandler(event: MouseEvent) {\n\t\tthis.open = !event.composedPath().includes(this.element) ? false : !this.open\n\t}\n\t@Listen(\"focusin\", { target: \"window\" })\n\tfocusHandler(event: FocusEvent) {\n\t\tif (!event.composedPath().includes(this.element))\n\t\t\tthis.open = false\n\t}\n\t@Method()\n\tasync clear() {\n\t\tthis.selected.forEach(option => option.selected && option.element.clickHandler())\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<smoothly-slot-elements class={\"selected\"} nodes={this.display} />\n\t\t\t\t<span class={\"label\"}>\n\t\t\t\t\t<slot name={\"label\"} />\n\t\t\t\t</span>\n\t\t\t\t<button type=\"button\">\n\t\t\t\t\t<smoothly-icon size=\"tiny\" name={this.open ? \"caret-down-outline\" : \"caret-forward-outline\"} />\n\t\t\t\t</button>\n\t\t\t\t<smoothly-picker-menu\n\t\t\t\t\tlooks={this.looks}\n\t\t\t\t\tonClick={e => e.stopPropagation()}\n\t\t\t\t\tmultiple={this.multiple}\n\t\t\t\t\tmutable={this.mutable}\n\t\t\t\t\treadonly={this.readonly}\n\t\t\t\t\tvalidator={this.validator}>\n\t\t\t\t\t<slot name=\"search\" slot=\"search\" />\n\t\t\t\t\t<slot name=\"display\" slot=\"display\" />\n\t\t\t\t\t<slot />\n\t\t\t\t</smoothly-picker-menu>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/picker/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\"\nimport { Notice, Option } from \"../../model\"\nimport { Clearable } from \"../input/Clearable\"\nimport { Input } from \"../input/Input\"\nimport { Looks } from \"../input/Looks\"\nimport { Controls } from \"./menu\"\n\n@Component({\n\ttag: \"smoothly-picker\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyPicker implements Clearable, Input {\n\t@Element() element: HTMLSmoothlyPickerElement\n\t@Prop({ reflect: true, mutable: true }) looks: Looks = \"plain\"\n\t@Prop({ reflect: true }) name: string\n\t@Prop({ reflect: true, mutable: true }) open = false\n\t@Prop({ reflect: true }) mutable = false\n\t@Prop({ reflect: true }) multiple = false\n\t@Prop({ reflect: true }) readonly = false\n\t@Prop() validator?: (value: string) => boolean | { result: boolean; notice: Notice }\n\t@State() selected = new Map<any, Option>()\n\t@State() display: Node[]\n\t@Event() smoothlyPickerLoaded: EventEmitter<Controls>\n\t@Event() smoothlyInput: EventEmitter<Record<string, any | any[]>> // multiple -> any[]\n\t@Event() smoothlyChange: EventEmitter<Record<string, any | any[]>> // multiple -> any[]\n\t@Event() smoothlyInputLooks: EventEmitter<(looks: Looks) => void>\n\tprivate controls?: Controls\n\n\tcomponentWillLoad() {\n\t\tthis.smoothlyInputLooks.emit(looks => (this.looks = looks))\n\t}\n\n\t@Watch(\"selected\")\n\tselectedChanged() {\n\t\tconst selected = Array.from(this.selected.values(), option => option.value)\n\t\tthis.smoothlyInput.emit({ [this.name]: this.multiple ? selected : selected.at(0) })\n\t\tthis.smoothlyChange.emit({ [this.name]: this.multiple ? selected : selected.at(0) })\n\t\tthis.display = Array.from(this.selected.values(), option => {\n\t\t\tconst span = document.createElement(\"span\")\n\t\t\toption.slotted.forEach(node => span.appendChild(node.cloneNode(true)))\n\t\t\treturn span\n\t\t})\n\t}\n\n\tcomponentDidLoad() {\n\t\tif (this.controls)\n\t\t\tthis.smoothlyPickerLoaded.emit(this.controls)\n\t}\n\t@Listen(\"smoothlyInputLooks\")\n\tsmoothlyInputLooksHandler(event: CustomEvent<(looks: Looks) => void>) {\n\t\tif (event.target != this.element)\n\t\t\tevent.stopPropagation()\n\t}\n\t@Listen(\"smoothlyPickerMenuLoaded\")\n\tmenuLoadedHandler(event: CustomEvent<Controls>) {\n\t\tthis.controls = event.detail\n\t}\n\t@Listen(\"smoothlyPickerOptionLoaded\")\n\toptionLoadedHandler(event: CustomEvent<Option>) {\n\t\tif (event.detail.selected)\n\t\t\tthis.selected = this.multiple\n\t\t\t\t? new Map(this.selected.set(event.detail.value, event.detail).entries())\n\t\t\t\t: new Map().set(event.detail.value, event.detail)\n\t}\n\n\t@Listen(\"smoothlyPickerOptionChange\")\n\toptionChangeHandler(event: CustomEvent<Option>) {\n\t\tif (!this.readonly)\n\t\t\tif (this.multiple)\n\t\t\t\tthis.selected = event.detail.selected\n\t\t\t\t\t? new Map(this.selected.set(event.detail.value, event.detail).entries())\n\t\t\t\t\t: !this.selected.delete(event.detail.value)\n\t\t\t\t\t? this.selected\n\t\t\t\t\t: new Map(this.selected.entries())\n\t\t\telse\n\t\t\t\tthis.selected = !event.detail.selected ? new Map() : new Map().set(event.detail.value, event.detail)\n\t}\n\t@Listen(\"click\", { target: \"window\" })\n\tclickHandler(event: MouseEvent) {\n\t\tthis.open = !event.composedPath().includes(this.element) ? false : !this.open\n\t}\n\t@Listen(\"focusin\", { target: \"window\" })\n\tfocusHandler(event: FocusEvent) {\n\t\tif (!event.composedPath().includes(this.element))\n\t\t\tthis.open = false\n\t}\n\t@Method()\n\tasync clear() {\n\t\tthis.selected.forEach(option => option.selected && option.element.clickHandler())\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<smoothly-slot-elements class={\"selected\"} nodes={this.display} />\n\t\t\t\t<span class={\"label\"}>\n\t\t\t\t\t<slot name={\"label\"} />\n\t\t\t\t</span>\n\t\t\t\t<button type=\"button\">\n\t\t\t\t\t<smoothly-icon size=\"tiny\" name={this.open ? \"caret-down-outline\" : \"caret-forward-outline\"} />\n\t\t\t\t</button>\n\t\t\t\t<smoothly-picker-menu\n\t\t\t\t\topen={this.open}\n\t\t\t\t\tlooks={this.looks}\n\t\t\t\t\tonClick={e => e.stopPropagation()}\n\t\t\t\t\tmultiple={this.multiple}\n\t\t\t\t\tmutable={this.mutable}\n\t\t\t\t\treadonly={this.readonly}\n\t\t\t\t\tvalidator={this.validator}>\n\t\t\t\t\t<slot name=\"search\" slot=\"search\" />\n\t\t\t\t\t<slot name=\"display\" slot=\"display\" />\n\t\t\t\t\t<slot />\n\t\t\t\t</smoothly-picker-menu>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -1,4 +1,6 @@
 import { h, Host } from "@stencil/core";
+import global from "../../../global/index";
+const Observers = global().Observers;
 function* chain(...iterables) {
   for (const iterable of iterables)
     yield* iterable;
@@ -17,6 +19,7 @@ function restoreListener(ref, option) {
 export class SmoothlyPickerMenu {
   constructor() {
     this.looks = undefined;
+    this.open = false;
     this.multiple = false;
     this.mutable = false;
     this.readonly = false;
@@ -27,6 +30,19 @@ export class SmoothlyPickerMenu {
     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({
@@ -56,10 +72,27 @@ export class SmoothlyPickerMenu {
       },
     });
   }
+  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.element, option.set.readonly(this.readonly);
   }
+  scrollHandler() {
+    this.flipChecked = false;
+  }
   optionLoadHandler(event) {
     if (!this.listElement || !event.composedPath().includes(this.listElement)) {
       event.stopPropagation();
@@ -144,7 +177,9 @@ export class SmoothlyPickerMenu {
     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 }))))));
   }
   static get is() { return "smoothly-picker-menu"; }
   static get encapsulation() { return "scoped"; }
@@ -182,6 +217,24 @@ export class SmoothlyPickerMenu {
         "attribute": "looks",
         "reflect": false
       },
+      "open": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "open",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "multiple": {
         "type": "boolean",
         "mutable": false,
@@ -265,7 +318,9 @@ export class SmoothlyPickerMenu {
       "created": {},
       "search": {},
       "valid": {},
-      "display": {}
+      "display": {},
+      "flip": {},
+      "flipChecked": {}
     };
   }
   static get events() {
@@ -313,12 +368,21 @@ export class SmoothlyPickerMenu {
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{
+        "propName": "open",
+        "methodName": "openChange"
+      }, {
         "propName": "readonly",
         "methodName": "readonlyChanged"
       }];
   }
   static get listeners() {
     return [{
+        "name": "scroll",
+        "method": "scrollHandler",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }, {
         "name": "smoothlyPickerOptionLoad",
         "method": "optionLoadHandler",
         "target": undefined,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/picker/menu/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from \"@stencil/core\"\nimport { Notice, Option } from \"../../../model\"\nimport { Looks } from \"../../input/Looks\"\nimport { Slot } from \"../slot-elements\"\n\nfunction* chain<T>(...iterables: Iterable<T>[]): Iterable<T> {\n\tfor (const iterable of iterables)\n\t\tyield* iterable\n}\n\nfunction restore<T extends Option>(target: T | undefined, source: Option): T | undefined {\n\ttarget?.set.selected((target.selected = source.selected))\n\ttarget?.set.readonly((target.readonly = source.readonly))\n\ttarget?.set.visible((target.visible = source.visible))\n\ttarget?.set.value((target.value = source.value))\n\ttarget?.set.search((target.search = source.search))\n\treturn target\n}\n\nfunction restoreListener(ref: HTMLElement | undefined, option: Option) {\n\tref?.addEventListener(\"smoothlyPickerOptionLoad\", (e: CustomEvent<Option>) => restore(e.detail, option))\n}\nexport interface Controls {\n\tremember: () => void\n\trestore: () => void\n}\n@Component({\n\ttag: \"smoothly-picker-menu\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyPickerMenu {\n\t@Element() element: HTMLSmoothlyPickerMenuElement\n\t@Prop() looks: Looks\n\t@Prop({ reflect: true }) multiple = false\n\t@Prop({ reflect: true }) mutable = false\n\t@Prop({ reflect: true }) readonly = false\n\t@Prop() validator?: (value: string) => boolean | { result: boolean; notice: Notice }\n\t@State() backend = new Map<any, Option & { clone: Node }>() // value -> Option\n\t@State() options = new Map<any, Option>() // value -> Option\n\t@State() created = new Map<any, Option.Created>()\n\t@State() search = \"\"\n\t@State() valid = false\n\t@State() display: Node[]\n\t@Event() notice: EventEmitter<Notice>\n\t@Event() smoothlyPickerMenuLoaded: EventEmitter<Controls>\n\tprivate memory?: { backend: SmoothlyPickerMenu[\"backend\"]; options: SmoothlyPickerMenu[\"options\"] }\n\tprivate listElement?: HTMLElement\n\tprivate searchElement?: HTMLElement\n\n\tcomponentDidLoad() {\n\t\tthis.smoothlyPickerMenuLoaded.emit({\n\t\t\tremember: () => {\n\t\t\t\tthis.memory = {\n\t\t\t\t\tbackend: new Map(Array.from(this.backend.entries(), ([value, option]) => [value, { ...option }])),\n\t\t\t\t\toptions: new Map(Array.from(this.options.entries(), ([value, option]) => [value, { ...option }])),\n\t\t\t\t}\n\t\t\t},\n\t\t\trestore: () => {\n\t\t\t\tif (this.memory) {\n\t\t\t\t\tfor (const option of this.options.values()) {\n\t\t\t\t\t\tconst memory = this.memory.options.get(option.value)\n\t\t\t\t\t\tif (memory != undefined)\n\t\t\t\t\t\t\trestore(option, memory)\n\t\t\t\t\t\telse if (this.created.get(option.value))\n\t\t\t\t\t\t\toption.set.selected((option.selected = false))\n\t\t\t\t\t}\n\t\t\t\t\tfor (const option of this.backend.values()) {\n\t\t\t\t\t\tconst memory = this.memory.backend.get(option.value)\n\t\t\t\t\t\tif (memory != undefined)\n\t\t\t\t\t\t\trestore(option, memory)\n\t\t\t\t\t\telse if (this.created.get(option.value))\n\t\t\t\t\t\t\toption.set.selected((option.selected = false))\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t})\n\t}\n\n\t@Watch(\"readonly\")\n\treadonlyChanged() {\n\t\tfor (const option of chain(this.options.values(), this.backend.values()))\n\t\t\toption.element, option.set.readonly(this.readonly)\n\t}\n\t@Listen(\"smoothlyPickerOptionLoad\")\n\toptionLoadHandler(event: CustomEvent<Option.Load>) {\n\t\tif (!this.listElement || !event.composedPath().includes(this.listElement)) {\n\t\t\tevent.stopPropagation()\n\t\t\tevent.detail.set.readonly(this.readonly)\n\n\t\t\tconst current = this.options.get(event.detail.value)\n\t\t\tif (current)\n\t\t\t\tevent.detail.set.selected(current.element.selected)\n\t\t}\n\t}\n\t@Listen(\"smoothlyPickerOptionLoaded\")\n\toptionLoadedHandler(event: CustomEvent<Option>) {\n\t\tif (!this.listElement || !event.composedPath().includes(this.listElement)) {\n\t\t\tevent.stopPropagation()\n\t\t\tconst current = restore(this.backend.get(event.detail.value), event.detail)\n\t\t\tthis.backend = new Map(\n\t\t\t\tthis.backend\n\t\t\t\t\t.set(event.detail.value, {\n\t\t\t\t\t\t...event.detail,\n\t\t\t\t\t\tclone: current?.clone ?? event.detail.element.cloneNode(true),\n\t\t\t\t\t})\n\t\t\t\t\t.entries()\n\t\t\t)\n\t\t} else\n\t\t\tthis.options.set(event.detail.value, event.detail)\n\t}\n\t@Listen(\"smoothlyPickerOptionChange\")\n\toptionChangeHandler(event: CustomEvent<Option>) {\n\t\tif (!this.listElement || !event.composedPath().includes(this.listElement)) {\n\t\t\tevent.stopPropagation()\n\t\t\tthis.options.get(event.detail.value)?.set.selected(event.detail.selected)\n\t\t} else {\n\t\t\tconst current = this.backend.get(event.detail.value)\n\t\t\tif (current?.element.parentElement)\n\t\t\t\tcurrent?.set.selected(event.detail.selected)\n\t\t}\n\n\t\tif (!this.readonly && !this.multiple && event.detail.selected)\n\t\t\tfor (const option of chain(this.options.values(), this.backend.values()))\n\t\t\t\tif (option.value != event.detail.value)\n\t\t\t\t\toption.set.selected(false)\n\t}\n\tinputHandler(event: CustomEvent<Record<string, any>>) {\n\t\tevent.stopPropagation()\n\t\tthis.search = event.detail.search\n\t\tif (!this.search) {\n\t\t\tthis.valid = false\n\t\t\tfor (const option of chain(this.options.values(), this.backend.values()))\n\t\t\t\toption.set.visible(true)\n\t\t} else {\n\t\t\tthis.valid = !Array.from(this.options.values()).find(option => option.value == this.search)\n\t\t\tconst search = this.search.toLocaleLowerCase()\n\t\t\tfor (const option of chain(this.options.values(), this.backend.values())) {\n\t\t\t\tconst value = option.value.toString().toLocaleLowerCase().includes(search)\n\t\t\t\tconst searches = option.search.some(value => value.includes(search))\n\t\t\t\tconst result = value || searches\n\t\t\t\toption.set.visible(result)\n\t\t\t}\n\t\t}\n\t}\n\taddHandler() {\n\t\tconst validation = !this.validator ? true : this.validator(this.search)\n\t\tif (this.mutable) {\n\t\t\tif (typeof validation == \"object\" ? validation.result : validation) {\n\t\t\t\tif (!this.multiple)\n\t\t\t\t\tfor (const option of chain(this.options.values(), this.backend.values()))\n\t\t\t\t\t\toption.set.selected(false)\n\t\t\t\tthis.created = new Map(this.created.set(this.search, { value: this.search, selected: true }).entries())\n\t\t\t\tthis.search = \"\"\n\t\t\t\tthis.searchElement?.focus()\n\t\t\t\tthis.valid = false\n\t\t\t}\n\t\t\tif (typeof validation == \"object\")\n\t\t\t\tthis.notice.emit(validation.notice)\n\t\t}\n\t}\n\tkeyDownHandler(event: KeyboardEvent) {\n\t\tif (event.key == \"Enter\") {\n\t\t\tevent.preventDefault()\n\t\t\tthis.addHandler()\n\t\t}\n\t}\n\t@Listen(\"smoothlySlotEmpty\")\n\temptyDisplayHandler(event: CustomEvent<Slot>) {\n\t\tevent.stopPropagation()\n\t\tevent.detail.set.nodes(this.display)\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host class={{ valid: this.valid }}>\n\t\t\t\t<smoothly-slotted-elements class={\"hide\"} onSmoothlySlottedChange={e => (this.display = e.detail)}>\n\t\t\t\t\t<slot name=\"display\" />\n\t\t\t\t</smoothly-slotted-elements>\n\t\t\t\t<div class={\"hide\"}>\n\t\t\t\t\t<slot />\n\t\t\t\t\t{Array.from(this.created.values(), option => (\n\t\t\t\t\t\t<smoothly-picker-option key={option.value} value={option.value} selected={option.selected}>\n\t\t\t\t\t\t\t{option.value}\n\t\t\t\t\t\t\t<smoothly-slot-elements slot=\"display\" nodes={this.display} />\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t\t<div class={\"controls\"}>\n\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\tref={e => (this.searchElement = e)}\n\t\t\t\t\t\tname=\"search\"\n\t\t\t\t\t\tvalue={this.search}\n\t\t\t\t\t\tlooks={this.looks}\n\t\t\t\t\t\tonKeyDown={e => this.keyDownHandler(e)}\n\t\t\t\t\t\tonSmoothlyInput={e => this.inputHandler(e)}\n\t\t\t\t\t\tonSmoothlyChange={e => e.stopPropagation()}\n\t\t\t\t\t\tonSmoothlyBlur={e => e.stopPropagation()}>\n\t\t\t\t\t\t<slot name=\"search\" />\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t{this.mutable && !this.readonly ? (\n\t\t\t\t\t\t<button onClick={() => this.addHandler()} disabled={!this.valid} type={\"button\"}>\n\t\t\t\t\t\t\t<smoothly-icon name=\"add-outline\" />\n\t\t\t\t\t\t</button>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t\t<div class={\"list\"} ref={e => (this.listElement = e)}>\n\t\t\t\t\t{Array.from(this.backend.values()).map(option => (\n\t\t\t\t\t\t<smoothly-slot-elements ref={e => restoreListener(e, option)} clone={false} nodes={option.clone} />\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/picker/menu/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from \"@stencil/core\"\nimport global from \"../../../global/index\"\nimport { Notice, Option } from \"../../../model\"\nimport { Looks } from \"../../input/Looks\"\nimport { Slot } from \"../slot-elements\"\n\nconst Observers = global().Observers\n\nfunction* chain<T>(...iterables: Iterable<T>[]): Iterable<T> {\n\tfor (const iterable of iterables)\n\t\tyield* iterable\n}\n\nfunction restore<T extends Option>(target: T | undefined, source: Option): T | undefined {\n\ttarget?.set.selected((target.selected = source.selected))\n\ttarget?.set.readonly((target.readonly = source.readonly))\n\ttarget?.set.visible((target.visible = source.visible))\n\ttarget?.set.value((target.value = source.value))\n\ttarget?.set.search((target.search = source.search))\n\treturn target\n}\nfunction restoreListener(ref: HTMLElement | undefined, option: Option) {\n\tref?.addEventListener(\"smoothlyPickerOptionLoad\", (e: CustomEvent<Option>) => restore(e.detail, option))\n}\nexport interface Controls {\n\tremember: () => void\n\trestore: () => void\n}\n@Component({\n\ttag: \"smoothly-picker-menu\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyPickerMenu {\n\t@Element() element: HTMLSmoothlyPickerMenuElement\n\t@Prop() looks: Looks\n\t@Prop({ reflect: true }) open = false\n\t@Prop({ reflect: true }) multiple = false\n\t@Prop({ reflect: true }) mutable = false\n\t@Prop({ reflect: true }) readonly = false\n\t@Prop() validator?: (value: string) => boolean | { result: boolean; notice: Notice }\n\t@State() backend = new Map<any, Option & { clone: Node }>() // value -> Option\n\t@State() options = new Map<any, Option>() // value -> Option\n\t@State() created = new Map<any, Option.Created>()\n\t@State() search = \"\"\n\t@State() valid = false\n\t@State() display: Node[]\n\t@State() flip = false\n\t@State() flipChecked = false\n\t@Event() notice: EventEmitter<Notice>\n\t@Event() smoothlyPickerMenuLoaded: EventEmitter<Controls>\n\tprivate memory?: { backend: SmoothlyPickerMenu[\"backend\"]; options: SmoothlyPickerMenu[\"options\"] }\n\tprivate listElement?: HTMLElement\n\tprivate searchElement?: HTMLElement\n\n\tcomponentWillLoad() {\n\t\tif (!Observers.has(this.element)) {\n\t\t\tconst threshold = 0.4\n\t\t\tObservers.set(\n\t\t\t\tthis.element,\n\t\t\t\tnew IntersectionObserver(\n\t\t\t\t\tentries =>\n\t\t\t\t\t\t(entries.find(entry => entry.target == this.element)?.intersectionRatio ?? 0) < threshold &&\n\t\t\t\t\t\t!this.flipChecked &&\n\t\t\t\t\t\t((this.flip = !this.flip), (this.flipChecked = true)),\n\t\t\t\t\t{ threshold }\n\t\t\t\t)\n\t\t\t)\n\t\t}\n\t}\n\tcomponentDidLoad() {\n\t\tthis.smoothlyPickerMenuLoaded.emit({\n\t\t\tremember: () => {\n\t\t\t\tthis.memory = {\n\t\t\t\t\tbackend: new Map(Array.from(this.backend.entries(), ([value, option]) => [value, { ...option }])),\n\t\t\t\t\toptions: new Map(Array.from(this.options.entries(), ([value, option]) => [value, { ...option }])),\n\t\t\t\t}\n\t\t\t},\n\t\t\trestore: () => {\n\t\t\t\tif (this.memory) {\n\t\t\t\t\tfor (const option of this.options.values()) {\n\t\t\t\t\t\tconst memory = this.memory.options.get(option.value)\n\t\t\t\t\t\tif (memory != undefined)\n\t\t\t\t\t\t\trestore(option, memory)\n\t\t\t\t\t\telse if (this.created.get(option.value))\n\t\t\t\t\t\t\toption.set.selected((option.selected = false))\n\t\t\t\t\t}\n\t\t\t\t\tfor (const option of this.backend.values()) {\n\t\t\t\t\t\tconst memory = this.memory.backend.get(option.value)\n\t\t\t\t\t\tif (memory != undefined)\n\t\t\t\t\t\t\trestore(option, memory)\n\t\t\t\t\t\telse if (this.created.get(option.value))\n\t\t\t\t\t\t\toption.set.selected((option.selected = false))\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t})\n\t}\n\tdisconnectedCallback() {\n\t\tif (!this.element.parentElement) {\n\t\t\tObservers.get(this.element)?.disconnect()\n\t\t\tObservers.remove(this.element)\n\t\t}\n\t}\n\t@Watch(\"open\")\n\topenChange() {\n\t\tconst observer = Observers.get(this.element)\n\t\tif (this.open)\n\t\t\tobserver?.observe(this.element)\n\t\telse\n\t\t\tobserver?.unobserve(this.element)\n\t}\n\n\t@Watch(\"readonly\")\n\treadonlyChanged() {\n\t\tfor (const option of chain(this.options.values(), this.backend.values()))\n\t\t\toption.element, option.set.readonly(this.readonly)\n\t}\n\t@Listen(\"scroll\", { target: \"window\" })\n\tscrollHandler() {\n\t\tthis.flipChecked = false\n\t}\n\t@Listen(\"smoothlyPickerOptionLoad\")\n\toptionLoadHandler(event: CustomEvent<Option.Load>) {\n\t\tif (!this.listElement || !event.composedPath().includes(this.listElement)) {\n\t\t\tevent.stopPropagation()\n\t\t\tevent.detail.set.readonly(this.readonly)\n\n\t\t\tconst current = this.options.get(event.detail.value)\n\t\t\tif (current)\n\t\t\t\tevent.detail.set.selected(current.element.selected)\n\t\t}\n\t}\n\t@Listen(\"smoothlyPickerOptionLoaded\")\n\toptionLoadedHandler(event: CustomEvent<Option>) {\n\t\tif (!this.listElement || !event.composedPath().includes(this.listElement)) {\n\t\t\tevent.stopPropagation()\n\t\t\tconst current = restore(this.backend.get(event.detail.value), event.detail)\n\t\t\tthis.backend = new Map(\n\t\t\t\tthis.backend\n\t\t\t\t\t.set(event.detail.value, {\n\t\t\t\t\t\t...event.detail,\n\t\t\t\t\t\tclone: current?.clone ?? event.detail.element.cloneNode(true),\n\t\t\t\t\t})\n\t\t\t\t\t.entries()\n\t\t\t)\n\t\t} else\n\t\t\tthis.options.set(event.detail.value, event.detail)\n\t}\n\t@Listen(\"smoothlyPickerOptionChange\")\n\toptionChangeHandler(event: CustomEvent<Option>) {\n\t\tif (!this.listElement || !event.composedPath().includes(this.listElement)) {\n\t\t\tevent.stopPropagation()\n\t\t\tthis.options.get(event.detail.value)?.set.selected(event.detail.selected)\n\t\t} else {\n\t\t\tconst current = this.backend.get(event.detail.value)\n\t\t\tif (current?.element.parentElement)\n\t\t\t\tcurrent?.set.selected(event.detail.selected)\n\t\t}\n\n\t\tif (!this.readonly && !this.multiple && event.detail.selected)\n\t\t\tfor (const option of chain(this.options.values(), this.backend.values()))\n\t\t\t\tif (option.value != event.detail.value)\n\t\t\t\t\toption.set.selected(false)\n\t}\n\tinputHandler(event: CustomEvent<Record<string, any>>) {\n\t\tevent.stopPropagation()\n\t\tthis.search = event.detail.search\n\t\tif (!this.search) {\n\t\t\tthis.valid = false\n\t\t\tfor (const option of chain(this.options.values(), this.backend.values()))\n\t\t\t\toption.set.visible(true)\n\t\t} else {\n\t\t\tthis.valid = !Array.from(this.options.values()).find(option => option.value == this.search)\n\t\t\tconst search = this.search.toLocaleLowerCase()\n\t\t\tfor (const option of chain(this.options.values(), this.backend.values())) {\n\t\t\t\tconst value = option.value.toString().toLocaleLowerCase().includes(search)\n\t\t\t\tconst searches = option.search.some(value => value.includes(search))\n\t\t\t\tconst result = value || searches\n\t\t\t\toption.set.visible(result)\n\t\t\t}\n\t\t}\n\t}\n\taddHandler() {\n\t\tconst validation = !this.validator ? true : this.validator(this.search)\n\t\tif (this.mutable) {\n\t\t\tif (typeof validation == \"object\" ? validation.result : validation) {\n\t\t\t\tif (!this.multiple)\n\t\t\t\t\tfor (const option of chain(this.options.values(), this.backend.values()))\n\t\t\t\t\t\toption.set.selected(false)\n\t\t\t\tthis.created = new Map(this.created.set(this.search, { value: this.search, selected: true }).entries())\n\t\t\t\tthis.search = \"\"\n\t\t\t\tthis.searchElement?.focus()\n\t\t\t\tthis.valid = false\n\t\t\t}\n\t\t\tif (typeof validation == \"object\")\n\t\t\t\tthis.notice.emit(validation.notice)\n\t\t}\n\t}\n\tkeyDownHandler(event: KeyboardEvent) {\n\t\tif (event.key == \"Enter\") {\n\t\t\tevent.preventDefault()\n\t\t\tthis.addHandler()\n\t\t}\n\t}\n\t@Listen(\"smoothlySlotEmpty\")\n\temptyDisplayHandler(event: CustomEvent<Slot>) {\n\t\tevent.stopPropagation()\n\t\tevent.detail.set.nodes(this.display)\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host class={{ valid: this.valid, flip: this.flip }}>\n\t\t\t\t<smoothly-slotted-elements class={\"hide\"} onSmoothlySlottedChange={e => (this.display = e.detail)}>\n\t\t\t\t\t<slot name=\"display\" />\n\t\t\t\t</smoothly-slotted-elements>\n\t\t\t\t<div class={\"hide\"}>\n\t\t\t\t\t<slot />\n\t\t\t\t\t{Array.from(this.created.values(), option => (\n\t\t\t\t\t\t<smoothly-picker-option key={option.value} value={option.value} selected={option.selected}>\n\t\t\t\t\t\t\t{option.value}\n\t\t\t\t\t\t\t<smoothly-slot-elements slot=\"display\" nodes={this.display} />\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t\t<div class={\"controls\"}>\n\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\tref={e => (this.searchElement = e)}\n\t\t\t\t\t\tname=\"search\"\n\t\t\t\t\t\tvalue={this.search}\n\t\t\t\t\t\tlooks={this.looks}\n\t\t\t\t\t\tonKeyDown={e => this.keyDownHandler(e)}\n\t\t\t\t\t\tonSmoothlyInput={e => this.inputHandler(e)}\n\t\t\t\t\t\tonSmoothlyChange={e => e.stopPropagation()}\n\t\t\t\t\t\tonSmoothlyBlur={e => e.stopPropagation()}>\n\t\t\t\t\t\t<slot name=\"search\" />\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t{this.mutable && !this.readonly ? (\n\t\t\t\t\t\t<button onClick={() => this.addHandler()} disabled={!this.valid} type={\"button\"}>\n\t\t\t\t\t\t\t<smoothly-icon name=\"add-outline\" />\n\t\t\t\t\t\t</button>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t\t<div class={\"list\"} ref={e => (this.listElement = e)}>\n\t\t\t\t\t{Array.from(this.backend.values())\n\t\t\t\t\t\t.sort((a, b) => a.position - b.position)\n\t\t\t\t\t\t.map(option => (\n\t\t\t\t\t\t\t<smoothly-slot-elements ref={e => restoreListener(e, option)} clone={false} nodes={option.clone} />\n\t\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/picker/menu/style.css

@@ -4,31 +4,41 @@
 	gap: 0.5rem;
 	position: absolute;
 	z-index: 4;
-	top: 100%;
 	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;
 }
-.list {
+:host:not(.flip) {
+	top: 100%;
+}
+:host.flip {
+	bottom: 100%;
+}
+:host:not([open]) {
+	display: none;
+}
+:host .list {
 	display: grid;
 	grid-template-columns: auto 1fr auto;
 	align-items: center;
 	row-gap: 0.5ch;
-	overflow: auto;
+	overflow-y: auto;
 	max-height: calc(1.75rem * 10 + 0.5ch * 9);
 	padding-right: 0.5rem;
+	padding-bottom: 0.25rem;
 }
-.hide {
+:host .hide {
 	display: none;
 }
-.controls {
+:host .controls {
 	display: grid;
 	grid-template-columns: 1fr auto;
 	gap: 0.5rem;
 	transition: grid-template-columns 200ms linear;
 }
-.controls > button:disabled {
+:host .controls > button:disabled {
 	opacity: 0.3;
 }