smoothly 1.0.0-alpha.99 → 1.0.0

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\tclear: () => 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\tclear: () => {\n\t\t\t\tconst backend = Array.from(this.backend.entries())\n\t\t\t\tbackend.filter(([key]) => this.created.has(key)).forEach(([, option]) => option.set.selected(false))\n\t\t\t\tthis.backend = new Map(backend.filter(([key]) => !this.created.has(key)))\n\t\t\t\tthis.options = new Map(Array.from(this.options.entries()).filter(([key]) => !this.created.has(key)))\n\t\t\t\tthis.created = new Map()\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\tonSmoothlyInputLoad={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;
 }

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

@@ -17,18 +17,25 @@ export class SmoothlyPickerOption {
     this.visible = true;
     this.value = undefined;
     this.search = [];
+    this.position = -1;
+    this.required = false;
     this.readonly = false;
     this.slotted = [];
   }
   get option() {
+    var _a;
     return {
       element: this.element,
       selected: this.selected,
       readonly: this.readonly,
+      required: this.required,
       visible: this.visible,
       search: this.search,
       value: this.value,
       slotted: this.slotted,
+      position: this.position >= 0 || !((_a = this.element.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement)
+        ? this.position
+        : Array.from(this.element.parentElement.parentElement.children).indexOf(this.element.parentElement),
       set: {
         selected: selected => (this.selected = selected),
         readonly: readonly => (this.readonly = readonly),
@@ -43,6 +50,8 @@ export class SmoothlyPickerOption {
       this.smoothlyPickerOptionChange.emit(this.option);
   }
   componentWillLoad() {
+    if (this.required)
+      this.selected = true;
     this.smoothlyPickerOptionLoad.emit(((_a) => {
       var { slotted } = _a, option = __rest(_a, ["slotted"]);
       return option;
@@ -56,11 +65,11 @@ export class SmoothlyPickerOption {
     this.slotted = event.detail;
   }
   async clickHandler() {
-    if (!this.readonly)
+    if (!this.readonly && !this.required)
       this.selected = !this.selected;
   }
   render() {
-    return (h(Host, { class: { visible: this.visible }, onClick: () => this.clickHandler() }, h("div", { class: "display" }, h("slot", { name: "display" })), h("div", { class: "content" }, h("smoothly-slotted-elements", { onSmoothlySlottedChange: e => this.slottedChangeHandler(e), clone: true }, h("slot", null)), h("slot", { name: "label" })), h("button", { type: "button" }, h("smoothly-icon", { name: this.selected ? "checkbox-outline" : "square-outline" }))));
+    return (h(Host, { class: { visible: this.visible }, onClick: () => this.clickHandler() }, h("div", { part: "display", class: "display" }, h("slot", { name: "display" })), h("div", { part: "content", class: "content" }, h("smoothly-slotted-elements", { onSmoothlySlottedChange: e => this.slottedChangeHandler(e), clone: true }, h("slot", null)), h("slot", { name: "label" })), h("button", { type: "button" }, h("smoothly-icon", { name: this.selected ? "checkbox-outline" : "square-outline" }))));
   }
   static get is() { return "smoothly-picker-option"; }
   static get encapsulation() { return "shadow"; }
@@ -144,6 +153,42 @@ export class SmoothlyPickerOption {
           "text": ""
         },
         "defaultValue": "[]"
+      },
+      "position": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "position",
+        "reflect": true,
+        "defaultValue": "-1"
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "required",
+        "reflect": true,
+        "defaultValue": "false"
       }
     };
   }
@@ -166,7 +211,7 @@ export class SmoothlyPickerOption {
         },
         "complexType": {
           "original": "Option.Load",
-          "resolved": "{ value: any; selected: boolean; readonly: boolean; element: HTMLSmoothlyPickerOptionElement; search: string[]; visible: boolean; set: { selected: (selected: boolean) => void; visible: (visible: boolean) => void; readonly: (readonly: boolean) => void; search: (search: string[]) => void; value: (value: any) => void; }; }",
+          "resolved": "{ value: any; selected: boolean; required: boolean; readonly: boolean; element: HTMLSmoothlyPickerOptionElement; search: string[]; visible: boolean; position: number; set: { selected: (selected: boolean) => void; visible: (visible: boolean) => void; readonly: (readonly: boolean) => void; search: (search: string[]) => void; value: (value: any) => void; }; }",
           "references": {
             "Option": {
               "location": "import",
@@ -239,6 +284,9 @@ export class SmoothlyPickerOption {
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{
+        "propName": "position",
+        "methodName": "emitChange"
+      }, {
         "propName": "selected",
         "methodName": "emitChange"
       }, {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/picker/option/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from \"@stencil/core\"\nimport { Option } from \"../../../model\"\n@Component({\n\ttag: \"smoothly-picker-option\",\n\tstyleUrl: \"style.css\",\n\tshadow: true,\n})\nexport class SmoothlyPickerOption {\n\t@Element() element: HTMLSmoothlyPickerOptionElement\n\t@Prop({ mutable: true, reflect: true }) selected = false\n\t@Prop({ mutable: true, reflect: true }) visible = true\n\t@Prop({ mutable: true }) value: any\n\t@Prop({ mutable: true }) search: string[] = []\n\t@State() readonly = false\n\t@State() slotted: Node[] = []\n\t@Event() smoothlyPickerOptionLoad: EventEmitter<Option.Load>\n\t@Event() smoothlyPickerOptionLoaded: EventEmitter<Option>\n\t@Event() smoothlyPickerOptionChange: EventEmitter<Option>\n\tget option(): Option {\n\t\treturn {\n\t\t\telement: this.element,\n\t\t\tselected: this.selected,\n\t\t\treadonly: this.readonly,\n\t\t\tvisible: this.visible,\n\t\t\tsearch: this.search,\n\t\t\tvalue: this.value,\n\t\t\tslotted: this.slotted,\n\t\t\tset: {\n\t\t\t\tselected: selected => (this.selected = selected),\n\t\t\t\treadonly: readonly => (this.readonly = readonly),\n\t\t\t\tvisible: visible => (this.visible = visible),\n\t\t\t\tsearch: search => (this.search = search),\n\t\t\t\tvalue: value => (this.value = value),\n\t\t\t},\n\t\t}\n\t}\n\t@Watch(\"selected\")\n\t@Watch(\"slotted\")\n\temitChange() {\n\t\tif (this.element.parentElement)\n\t\t\tthis.smoothlyPickerOptionChange.emit(this.option)\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.smoothlyPickerOptionLoad.emit((({ slotted, ...option }) => option)(this.option))\n\t}\n\tcomponentDidLoad() {\n\t\tthis.smoothlyPickerOptionLoaded.emit(this.option)\n\t}\n\tslottedChangeHandler(event: CustomEvent<Node[]>) {\n\t\tevent.stopPropagation()\n\t\tthis.slotted = event.detail\n\t}\n\t@Method()\n\tasync clickHandler() {\n\t\tif (!this.readonly)\n\t\t\tthis.selected = !this.selected\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={{ visible: this.visible }} onClick={() => this.clickHandler()}>\n\t\t\t\t<div class={\"display\"}>\n\t\t\t\t\t<slot name=\"display\" />\n\t\t\t\t</div>\n\t\t\t\t<div class={\"content\"}>\n\t\t\t\t\t<smoothly-slotted-elements onSmoothlySlottedChange={e => this.slottedChangeHandler(e)} clone>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</smoothly-slotted-elements>\n\t\t\t\t\t<slot name={\"label\"} />\n\t\t\t\t</div>\n\t\t\t\t<button type={\"button\"}>\n\t\t\t\t\t<smoothly-icon name={this.selected ? \"checkbox-outline\" : \"square-outline\"} />\n\t\t\t\t</button>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/picker/option/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from \"@stencil/core\"\nimport { Option } from \"../../../model\"\n@Component({\n\ttag: \"smoothly-picker-option\",\n\tstyleUrl: \"style.css\",\n\tshadow: true,\n})\nexport class SmoothlyPickerOption {\n\t@Element() element: HTMLSmoothlyPickerOptionElement\n\t@Prop({ mutable: true, reflect: true }) selected = false\n\t@Prop({ mutable: true, reflect: true }) visible = true\n\t@Prop({ mutable: true }) value: any\n\t@Prop({ mutable: true }) search: string[] = []\n\t@Prop({ reflect: true }) position = -1\n\t@Prop({ reflect: true }) required = false\n\t@State() readonly = false\n\t@State() slotted: Node[] = []\n\t@Event() smoothlyPickerOptionLoad: EventEmitter<Option.Load>\n\t@Event() smoothlyPickerOptionLoaded: EventEmitter<Option>\n\t@Event() smoothlyPickerOptionChange: EventEmitter<Option>\n\n\tget option(): Option {\n\t\treturn {\n\t\t\telement: this.element,\n\t\t\tselected: this.selected,\n\t\t\treadonly: this.readonly,\n\t\t\trequired: this.required,\n\t\t\tvisible: this.visible,\n\t\t\tsearch: this.search,\n\t\t\tvalue: this.value,\n\t\t\tslotted: this.slotted,\n\t\t\tposition:\n\t\t\t\tthis.position >= 0 || !this.element.parentElement?.parentElement\n\t\t\t\t\t? this.position\n\t\t\t\t\t: Array.from(this.element.parentElement.parentElement.children).indexOf(this.element.parentElement),\n\t\t\tset: {\n\t\t\t\tselected: selected => (this.selected = selected),\n\t\t\t\treadonly: readonly => (this.readonly = readonly),\n\t\t\t\tvisible: visible => (this.visible = visible),\n\t\t\t\tsearch: search => (this.search = search),\n\t\t\t\tvalue: value => (this.value = value),\n\t\t\t},\n\t\t}\n\t}\n\t@Watch(\"position\")\n\t@Watch(\"selected\")\n\t@Watch(\"slotted\")\n\temitChange() {\n\t\tif (this.element.parentElement)\n\t\t\tthis.smoothlyPickerOptionChange.emit(this.option)\n\t}\n\n\tcomponentWillLoad() {\n\t\tif (this.required)\n\t\t\tthis.selected = true\n\t\tthis.smoothlyPickerOptionLoad.emit((({ slotted, ...option }) => option)(this.option))\n\t}\n\tcomponentDidLoad() {\n\t\tthis.smoothlyPickerOptionLoaded.emit(this.option)\n\t}\n\tslottedChangeHandler(event: CustomEvent<Node[]>) {\n\t\tevent.stopPropagation()\n\t\tthis.slotted = event.detail\n\t}\n\t@Method()\n\tasync clickHandler() {\n\t\tif (!this.readonly && !this.required)\n\t\t\tthis.selected = !this.selected\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={{ visible: this.visible }} onClick={() => this.clickHandler()}>\n\t\t\t\t<div part=\"display\" class={\"display\"}>\n\t\t\t\t\t<slot name=\"display\" />\n\t\t\t\t</div>\n\t\t\t\t<div part=\"content\" class={\"content\"}>\n\t\t\t\t\t<smoothly-slotted-elements onSmoothlySlottedChange={e => this.slottedChangeHandler(e)} clone>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</smoothly-slotted-elements>\n\t\t\t\t\t<slot name={\"label\"} />\n\t\t\t\t</div>\n\t\t\t\t<button type={\"button\"}>\n\t\t\t\t\t<smoothly-icon name={this.selected ? \"checkbox-outline\" : \"square-outline\"} />\n\t\t\t\t</button>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -8,18 +8,23 @@
 	cursor: pointer;
 	padding: 0.25ch 0.5rem
 }
-.display {
+:host .display {
 	padding-left: 0;
 }
-button {
+:host button {
 	color: unset;
 	background-color: inherit;
 	border: none;
 	padding-right: 0;
 }
-.content {
+:host .content {
 	display: flex;
 	column-gap: 1rem;
-	flex-wrap: wrap;
 	justify-content: space-between;
 }
+:host([required]) > * {
+	cursor: default;
+}
+:host([required]) button {
+	opacity: 0.65;
+}

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

@@ -5,25 +5,48 @@
 :host[looks="border"] {
 	border: rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px;
 }
+:host[looks="border"][readonly]{
+	border: rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px;
+}
 :host[looks="line"]::slotted(smoothly-picker-menu smoothly-input),
 :host[looks="line"] {
 	border-bottom: rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px;
 }
+:host[looks="line"][readonly]{
+	border-bottom: rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px;
+}
 :host[looks="grid"]::slotted(smoothly-picker-menu smoothly-input),
 :host[looks="grid"] {
 	border: rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px;
 }
+:host[looks="grid"][readonly]{
+	border: rgba(var(--text-color, var(--smoothly-color-contrast)), .2) solid .5px;
+}
+:host[looks="transparent"] {
+	border: none;
+}
+:host[looks="transparent"]:not(:focus-within) {
+	background-color: transparent;
+}
+:host[looks="transparent"]:not(:focus-within) input {
+	background: transparent;
+}
+:host[looks="transparent"]:focus-within {
+	outline: 1px solid rgb(var(--smoothly-color-contrast));
+
+}
 
 
 :host {
 	display: flex;
 	position: relative;
 	width: max-content;
-	padding: 1.2em 0.7em 0.2em 0.8em;
+	padding: 1em 0.7em 0.2em 0.8em;
 	background-color: rgb(var(--background-color, var(--smoothly-color-shade)));
 }
-:host:not([open]) smoothly-picker-menu {
-	display: none;
+:host div.element {
+	display: flex;
+	background-color: inherit;
 }
 smoothly-slot-elements {
 	white-space: nowrap;
@@ -45,6 +68,8 @@ smoothly-slot-elements {
 	bottom: 0;
 	right: 0;
 	width: 2ch;
+}
+:host:not([looks=transparent]) .selected::after {
 	background: linear-gradient(90deg, rgba(var(--background-color, var(--smoothly-color-shade)), 0) 0%, rgba(var(--background-color, var(--smoothly-color-shade)), 1) 100%);
 }
 .selected * {

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

@@ -8,20 +8,20 @@ export class SmoothlyPopup {
   onClick() {
     var _a, _b, _c, _d, _e, _f;
     if (this.visible == false) {
-      (_a = this.aside) === null || _a === void 0 ? void 0 : _a.style.setProperty("display", "block");
+      (_a = this.popupElement) === null || _a === void 0 ? void 0 : _a.style.setProperty("display", "block");
       this.cssVariables =
-        ((_c = (_b = this.aside) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().right) !== null && _c !== void 0 ? _c : 0) >= window.innerWidth
+        ((_c = (_b = this.popupElement) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().right) !== null && _c !== void 0 ? _c : 0) >= window.innerWidth
           ? { "--right": "0.1em" }
-          : ((_e = (_d = this.aside) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect().left) !== null && _e !== void 0 ? _e : 0) < 0
+          : ((_e = (_d = this.popupElement) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect().left) !== null && _e !== void 0 ? _e : 0) < 0
             ? { "--left": "0.1em" }
             : this.cssVariables;
-      (_f = this.aside) === null || _f === void 0 ? void 0 : _f.style.removeProperty("display");
+      (_f = this.popupElement) === null || _f === void 0 ? void 0 : _f.style.removeProperty("display");
     }
     this.visible = !this.visible;
     this.popup.emit(this.visible);
   }
   render() {
-    return (h(Host, { style: Object.assign({}, this.cssVariables) }, h("content", { class: "pointer", onClick: () => this.onClick() }, h("slot", null)), h("div", { class: "background", onClick: () => this.onClick() }), h("div", { class: "arrow", onClick: () => this.onClick() }), h("aside", { ref: el => (this.aside = el) }, h("slot", { name: "popup" }))));
+    return (h(Host, { style: Object.assign({}, this.cssVariables) }, h("div", { class: "pointer", onClick: () => this.onClick() }, h("slot", null)), h("div", { class: "background", onClick: () => this.onClick() }), h("div", { class: "arrow", onClick: () => this.onClick() }), h("div", { class: "popup", ref: el => (this.popupElement = el) }, h("slot", { name: "popup" }))));
   }
   static get is() { return "smoothly-popup"; }
   static get encapsulation() { return "scoped"; }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/popup/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAOpF,MAAM,OAAO,aAAa;;mBACyB,KAAK;qBACY,MAAM;wBACN,EAAE,QAAQ,EAAE,OAAO,EAAE;;EAIhF,OAAO;;IACd,IAAI,IAAI,CAAC,OAAO,IAAI,KAAK,EAAE;MAC1B,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,CAAC,WAAW,CAAC,SAAS,EAAE,OAAO,CAAC,CAAA;MACjD,IAAI,CAAC,YAAY;QAChB,CAAC,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,qBAAqB,GAAG,KAAK,mCAAI,CAAC,CAAC,IAAI,MAAM,CAAC,UAAU;UACpE,CAAC,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE;UACxB,CAAC,CAAC,CAAC,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,qBAAqB,GAAG,IAAI,mCAAI,CAAC,CAAC,GAAG,CAAC;YACrD,CAAC,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE;YACvB,CAAC,CAAC,IAAI,CAAC,YAAY,CAAA;MACrB,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAA;KAC3C;IACD,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAA;IAC5B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;EAC9B,CAAC;EACD,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,oBAAO,IAAI,CAAC,YAAY;MAClC,eAAS,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE;QACrD,eAAa,CACJ;MACV,WAAK,KAAK,EAAC,YAAY,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,GAAQ;MAC7D,WAAK,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,GAAQ;MACxD,aAAO,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAClC,YAAM,IAAI,EAAC,OAAO,GAAQ,CACnB,CACF,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { Component, Event, EventEmitter, h, Host, Prop, State } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-popup\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyPopup {\n\t@Prop({ mutable: true, reflect: true }) visible = false\n\t@Prop({ mutable: true, reflect: true }) direction: \"up\" | \"down\" = \"down\"\n\t@State() cssVariables: { \"--left\"?: string; \"--right\"?: string } = { \"--left\": \"0.1em\" }\n\t@Event() popup: EventEmitter<boolean>\n\tprivate aside: HTMLElement | undefined\n\n\tprivate onClick() {\n\t\tif (this.visible == false) {\n\t\t\tthis.aside?.style.setProperty(\"display\", \"block\")\n\t\t\tthis.cssVariables =\n\t\t\t\t(this.aside?.getBoundingClientRect().right ?? 0) >= window.innerWidth\n\t\t\t\t\t? { \"--right\": \"0.1em\" }\n\t\t\t\t\t: (this.aside?.getBoundingClientRect().left ?? 0) < 0\n\t\t\t\t\t? { \"--left\": \"0.1em\" }\n\t\t\t\t\t: this.cssVariables\n\t\t\tthis.aside?.style.removeProperty(\"display\")\n\t\t}\n\t\tthis.visible = !this.visible\n\t\tthis.popup.emit(this.visible)\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host style={{ ...this.cssVariables }}>\n\t\t\t\t<content class=\"pointer\" onClick={() => this.onClick()}>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</content>\n\t\t\t\t<div class=\"background\" onClick={() => this.onClick()}></div>\n\t\t\t\t<div class=\"arrow\" onClick={() => this.onClick()}></div>\n\t\t\t\t<aside ref={el => (this.aside = el)}>\n\t\t\t\t\t<slot name=\"popup\"></slot>\n\t\t\t\t</aside>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/popup/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAOpF,MAAM,OAAO,aAAa;;mBACyB,KAAK;qBACY,MAAM;wBACN,EAAE,QAAQ,EAAE,OAAO,EAAE;;EAIhF,OAAO;;IACd,IAAI,IAAI,CAAC,OAAO,IAAI,KAAK,EAAE;MAC1B,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,CAAC,WAAW,CAAC,SAAS,EAAE,OAAO,CAAC,CAAA;MACxD,IAAI,CAAC,YAAY;QAChB,CAAC,MAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,qBAAqB,GAAG,KAAK,mCAAI,CAAC,CAAC,IAAI,MAAM,CAAC,UAAU;UAC3E,CAAC,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE;UACxB,CAAC,CAAC,CAAC,MAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,qBAAqB,GAAG,IAAI,mCAAI,CAAC,CAAC,GAAG,CAAC;YAC5D,CAAC,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE;YACvB,CAAC,CAAC,IAAI,CAAC,YAAY,CAAA;MACrB,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAA;KAClD;IACD,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAA;IAC5B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;EAC9B,CAAC;EACD,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,oBAAO,IAAI,CAAC,YAAY;MAClC,WAAK,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE;QACjD,eAAa,CACR;MACN,WAAK,KAAK,EAAC,YAAY,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,GAAQ;MAC7D,WAAK,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,GAAQ;MACxD,WAAK,KAAK,EAAC,OAAO,EAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;QACrD,YAAM,IAAI,EAAC,OAAO,GAAQ,CACrB,CACA,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { Component, Event, EventEmitter, h, Host, Prop, State } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-popup\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyPopup {\n\t@Prop({ mutable: true, reflect: true }) visible = false\n\t@Prop({ mutable: true, reflect: true }) direction: \"up\" | \"down\" = \"down\"\n\t@State() cssVariables: { \"--left\"?: string; \"--right\"?: string } = { \"--left\": \"0.1em\" }\n\t@Event() popup: EventEmitter<boolean>\n\tprivate popupElement: HTMLElement | undefined\n\n\tprivate onClick() {\n\t\tif (this.visible == false) {\n\t\t\tthis.popupElement?.style.setProperty(\"display\", \"block\")\n\t\t\tthis.cssVariables =\n\t\t\t\t(this.popupElement?.getBoundingClientRect().right ?? 0) >= window.innerWidth\n\t\t\t\t\t? { \"--right\": \"0.1em\" }\n\t\t\t\t\t: (this.popupElement?.getBoundingClientRect().left ?? 0) < 0\n\t\t\t\t\t? { \"--left\": \"0.1em\" }\n\t\t\t\t\t: this.cssVariables\n\t\t\tthis.popupElement?.style.removeProperty(\"display\")\n\t\t}\n\t\tthis.visible = !this.visible\n\t\tthis.popup.emit(this.visible)\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host style={{ ...this.cssVariables }}>\n\t\t\t\t<div class=\"pointer\" onClick={() => this.onClick()}>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"background\" onClick={() => this.onClick()}></div>\n\t\t\t\t<div class=\"arrow\" onClick={() => this.onClick()}></div>\n\t\t\t\t<div class=\"popup\" ref={el => (this.popupElement = el)}>\n\t\t\t\t\t<slot name=\"popup\"></slot>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/popup/style.css

@@ -5,10 +5,10 @@
 :host[hidden] {
 	display: none;
 }
-:host:not([visible]) aside {
+:host:not([visible]) .popup {
 	display: none;
 }
-:host aside {
+:host .popup {
 	display: inline;
 	position: absolute;
 	padding: 0.3em;
@@ -21,11 +21,11 @@
 	border-radius: 0.6em;
 	z-index: 3;
 }
-:host[direction=down] aside {
+:host[direction=down] .popup {
 	top: 2.2em;
 	box-shadow: 6px 5px 9px -9px black, 5px 6px 9px -9px black;
 }
-:host[direction=up] aside {
+:host[direction=up] .popup {
 	bottom: 2.2em;
 	box-shadow: -6px -5px 9px -9px black, -5px -6px 9px -9px black;
 }

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

@@ -194,21 +194,6 @@ export class SmoothlySubmit {
   }
   static get events() {
     return [{
-        "method": "smoothlySubmit",
-        "name": "smoothlySubmit",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
         "method": "smoothlyInputLoad",
         "name": "smoothlyInputLoad",
         "bubbles": true,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/submit/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAE/E,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAOlD,MAAM,OAAO,cAAc;;iBACe,SAAS;;;oBAGd,KAAK;gBACU,QAAQ;;;mBAGzC,IAAI;;EAKtB,KAAK,CAAC,iBAAiB;IACtB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;MACpC,IAAI,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE;QAC3B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;OACpB;IACF,CAAC,CAAC,CAAA;EACH,CAAC;EAGD,YAAY;;IACX,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,EAAE,CAAA;EACtB,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,MAAM,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI;MAC/C,eAAQ,CACA,CACT,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Event, EventEmitter, h, Listen, Prop } from \"@stencil/core\"\nimport { Color, Fill } from \"../../model\"\nimport { Button } from \"../Button\"\nimport { Submittable } from \"../input/Submittable\"\n\n@Component({\n\ttag: \"smoothly-submit\",\n\tstyleUrl: \"./style.css\",\n\tscoped: true,\n})\nexport class SmoothlySubmit {\n\t@Prop({ reflect: true }) color?: Color = \"success\"\n\t@Prop({ reflect: true }) expand?: \"block\" | \"full\"\n\t@Prop({ reflect: true }) fill?: Fill\n\t@Prop({ reflect: true }) disabled = false\n\t@Prop({ reflect: true }) type: \"link\" | \"button\" = \"button\"\n\t@Prop({ reflect: true }) size: \"flexible\" | \"small\" | \"large\" | \"icon\"\n\t@Prop({ reflect: true }) shape?: \"rounded\"\n\t@Prop() prevent = true\n\t@Event() smoothlySubmit: EventEmitter\n\tprivate parent?: Submittable\n\t@Event() smoothlyInputLoad: EventEmitter<(parent: HTMLElement) => void>\n\n\tasync componentWillLoad() {\n\t\tthis.smoothlyInputLoad.emit(parent => {\n\t\t\tif (Submittable.is(parent)) {\n\t\t\t\tthis.parent = parent\n\t\t\t}\n\t\t})\n\t}\n\n\t@Listen(\"click\")\n\tclickHandler() {\n\t\tthis.parent?.submit()\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Button disabled={this.disabled} type={this.type}>\n\t\t\t\t<slot />\n\t\t\t</Button>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/submit/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAE/E,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAOlD,MAAM,OAAO,cAAc;;iBACe,SAAS;;;oBAGd,KAAK;gBACU,QAAQ;;;mBAGzC,IAAI;;EAItB,KAAK,CAAC,iBAAiB;IACtB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;MACpC,IAAI,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE;QAC3B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;OACpB;IACF,CAAC,CAAC,CAAA;EACH,CAAC;EAGD,YAAY;;IACX,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,EAAE,CAAA;EACtB,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,MAAM,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI;MAC/C,eAAQ,CACA,CACT,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Event, EventEmitter, h, Listen, Prop } from \"@stencil/core\"\nimport { Color, Fill } from \"../../model\"\nimport { Button } from \"../Button\"\nimport { Submittable } from \"../input/Submittable\"\n\n@Component({\n\ttag: \"smoothly-submit\",\n\tstyleUrl: \"./style.css\",\n\tscoped: true,\n})\nexport class SmoothlySubmit {\n\t@Prop({ reflect: true }) color?: Color = \"success\"\n\t@Prop({ reflect: true }) expand?: \"block\" | \"full\"\n\t@Prop({ reflect: true }) fill?: Fill\n\t@Prop({ reflect: true }) disabled = false\n\t@Prop({ reflect: true }) type: \"link\" | \"button\" = \"button\"\n\t@Prop({ reflect: true }) size: \"flexible\" | \"small\" | \"large\" | \"icon\"\n\t@Prop({ reflect: true }) shape?: \"rounded\"\n\t@Prop() prevent = true\n\tprivate parent?: Submittable\n\t@Event() smoothlyInputLoad: EventEmitter<(parent: HTMLElement) => void>\n\n\tasync componentWillLoad() {\n\t\tthis.smoothlyInputLoad.emit(parent => {\n\t\t\tif (Submittable.is(parent)) {\n\t\t\t\tthis.parent = parent\n\t\t\t}\n\t\t})\n\t}\n\n\t@Listen(\"click\")\n\tclickHandler() {\n\t\tthis.parent?.submit()\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Button disabled={this.disabled} type={this.type}>\n\t\t\t\t<slot />\n\t\t\t</Button>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/submit/style.css

@@ -71,22 +71,22 @@
 
 :host{
 	display: inline-block;
-	margin: 1em;
 	box-sizing: border-box;
 	border-radius: 0.5rem;
 	border: solid 1px;
 	transition: background 150ms ease-in-out;
+	cursor: pointer;
 }
-:host([type=link]){
+:host([type=link]) {
 	display: inline;
 	border: none;
 }
-:host([disabled]){
+:host([disabled]) {
 	opacity: 0.5;
 	pointer-events: none;
 }
 a,
-button{
+button {
 	font-size: 110%;
 	font-weight: 400;
 	border: none;
@@ -100,17 +100,20 @@ button {
 	height: 100%;
 	width: 100%;
 	border-radius: 0.5rem;
-	min-width: 8em;
 	align-items: center;
 }
-:host(:not([size=icon])) > button {
+:host(:not([size=icon]):not([size=flexible])) > button {
 	padding: 0.8em;
+	min-width: 8em;
+}
+:host(:not([size=icon]):not([size=flexible])):has(smoothly-icon) > button {
+	padding: 0.6em;
 }
-:host([size=icon]) > button{
+:host([size=icon]) > button {
 	padding: 0.5em;
 }
 :host([shape=rounded]) > button,
-:host([shape=rounded]){
+:host([shape=rounded]) {
 	border-radius: 2rem;
 }
 :host([type=button]) > a {
@@ -118,13 +121,13 @@ button {
 	text-decoration: inherit;
 	width: calc(100% - 0.6em);
 }
-:host([size=small]) > button{
+:host([size=small]) > button {
 	font-size: 100%;
 }
-:host([size=large]) > button{
+:host([size=large]) > button {
 	font-size: 130%;
 }
-:host(:not([size=icon])){
+:host(:not([size=icon])) {
 	min-width: 8em;
 }
 :host([size=flexible]) {
@@ -150,12 +153,12 @@ button {
 	border-radius: 0;
 }
 :host([shape=rounded]) > button,
-:host([shape=rounded]){
+:host([shape=rounded]) {
 	border-radius: 2rem;
 }
 :host(:not([fill=clear]):hover),
 :host(:not([fill=clear]):focus),	
-:host(:not([fill=clear]):active){
+:host(:not([fill=clear]):active) {
 	border-color: rgb(var(--smoothly-color-tint)) !important;
 	background: rgb(var(--smoothly-color-tint)) !important;
 }
@@ -164,19 +167,19 @@ button {
 :host(:not([fill=clear]):active) > button,
 :host(:not([fill=clear]):hover) ::slotted(smoothly-icon),
 :host(:not([fill=clear]):focus) ::slotted(smoothly-icon),
-:host(:not([fill=clear]):active) ::slotted(smoothly-icon){
+:host(:not([fill=clear]):active) ::slotted(smoothly-icon) {
 	color: rgb(var(--smoothly-color-contrast)) !important;
 	stroke: rgb(var(--smoothly-color-contrast)) !important;
 	fill: rgb(var(--smoothly-color-contrast)) !important;
 }
 :host([fill=clear]:hover) > button,
 :host([fill=clear]:focus) > button,
-:host([fill=clear]:active) > button{
+:host([fill=clear]:active) > button {
 	color: rgb(var(--smoothly-color-tint)) !important;
 	stroke: rgb(var(--smoothly-color-tint)) !important;
 	fill: rgb(var(--smoothly-color-tint)) !important;
 }
-:host([disabled]){
+:host([disabled]) {
 	opacity: 0.5;
 	pointer-events: none;
 }
@@ -190,13 +193,13 @@ button {
 	border-color: rgb(var(--smoothly-color));
 }
 :host([fill=solid]) > button,
-:host([fill=default]) > button{
+:host([fill=default]) > button {
 	stroke: rgb(var(--smoothly-color-contrast));
 	fill: rgb(var(--smoothly-color-contrast));
 	color: rgb(var(--smoothly-color-contrast));
 }
 :host([fill=outline]) > button,
-:host([fill=clear]) > button{
+:host([fill=clear]) > button {
 	stroke: rgb(var(--smoothly-color));
 	fill: rgb(var(--smoothly-color));
 	color: rgb(var(--smoothly-color));
@@ -210,10 +213,10 @@ button {
 	border-color: transparent;
 }
 ::slotted(smoothly-icon[slot=start]),
-::slotted(smoothly-icon[slot=end]){
+::slotted(smoothly-icon[slot=end]) {
 	font-size: 0.65em;
 }
-:host([hidden]){
+:host([hidden]) {
 	display: none;
 }
 

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

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 export class SmoothlySummary {
   constructor() {
     this.open = false;
-    this.color = "primary";
+    this.color = undefined;
     this.fill = "solid";
     this.size = "tiny";
   }
@@ -67,8 +67,7 @@ export class SmoothlySummary {
           "text": ""
         },
         "attribute": "color",
-        "reflect": false,
-        "defaultValue": "\"primary\""
+        "reflect": false
       },
       "fill": {
         "type": "string",