smoothly 1.4.0 → 1.6.0

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

@@ -164,7 +164,7 @@ export class SmoothlyForm {
         await Promise.all([...this.inputs.values()].map(input => Editable.Element.type.is(input) && input.setInitialValue()));
     }
     render() {
-        return (h(Host, { key: '544cb7ab781d344afba275f3e363a7ca5e615c2e' }, h("smoothly-spinner", { key: 'ffc3e23544446c744aec87941e1f7e137e71d83e', overlay: true, hidden: !this.processing }), h("form", { key: 'ee0a5b140641775c1d55c961db46e3e630b666a8', onSubmit: !this.prevent ? undefined : e => e.preventDefault(), name: this.name }, h("fieldset", { key: 'dc7509953049315094ba44369d7c56ee22c2e511' }, h("slot", { key: 'b510be19fca9b78c6ecb3b84648f75a21fb40d97' })), h("div", { key: '985fd0b35f3664135c09bdd03f6156399a4d3d58' }, h("slot", { key: '014fd2d642d29332f9fc28298b0cdbf2d5b7956a', name: "clear" }), h("slot", { key: '55d2fd1d90b303f56e9578704780fc78b9bc9e17', name: "edit" }), h("slot", { key: '2af69ee44488e47a52cf7dff75138c16c1883ef8', name: "reset" }), h("slot", { key: 'f35a976b66dada2670d5a280d310aac518eedc75', name: "delete" }), h("slot", { key: '90b1dfac51e438c663d93218fb114a491495864f', name: "submit" })))));
+        return (h(Host, { key: 'e2c17b7337acbcfe72ffb863c85e60faede5235e' }, h("smoothly-spinner", { key: 'd7662186f79ee0f5d4405016a35047f11ffcdc34', overlay: true, hidden: !this.processing }), h("form", { key: '632d61643ff5ebb0a76385ef491dc53fc1dd14d5', onSubmit: !this.prevent ? undefined : e => e.preventDefault(), name: this.name }, h("fieldset", { key: '75dda536071a876101b3f74810d234db35552ef4' }, h("slot", { key: '167a59eb0712168bc65779d6218b0c0cddb1233f' })), h("div", { key: 'be5617bf40a0f232bce860be106557b28d8356aa' }, h("slot", { key: '2fa4643245d138a6f2c249b38249451c9f3d077d', name: "clear" }), h("slot", { key: '93a446c4e11d622a7c02c27681cdcb579e1ce5db', name: "edit" }), h("slot", { key: '18a353c56f4dd2919f7ebd4aae3c10d8c505ceb0', name: "reset" }), h("slot", { key: '5a5712ab3ae35fecbad7e62750d8461cebbaaf71', name: "delete" }), h("slot", { key: '6f0467383249a488f44b5a276b2d6686afe18d97', name: "submit" })))));
     }
     static get is() { return "smoothly-form"; }
     static get originalStyleUrls() {

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

@@ -7,7 +7,7 @@ export class SmoothlyIconDemo {
         this.props = {};
     }
     render() {
-        return (h(Host, { key: '62708f079ddee486734d33e49e50ae2558cc52d7' }, h("h2", { key: '9daf63fea24f813509180b6da99d1989aad4448b' }, "Filter and Variants"), h("smoothly-form", { key: '6ae13747e710a0e95782f87fc202ccda48db3824', onSmoothlyFormInput: e => (this.display = e.detail) }, h("smoothly-input", { key: '4d206c676a1a629331aa1492254c766566135ede', name: "filter" }, "Filter"), h("smoothly-input-select", { key: '1dc08cd1e052453d4aa7e27fba2d65609a49f866', name: "variant" }, h("span", { key: '646c1e579d8cb2e679c77a8835f620cb5e7dcaa9', slot: "label" }, "Variant"), h("smoothly-item", { key: 'cddbecdb6a46aa56e29a70179003e92afdf21ef4', value: "outline" }, "outline"), h("smoothly-item", { key: '3121ff8590e82394c3bbf2c352e56fd7f0c3e048', value: "sharp" }, "sharp"), h("smoothly-input-clear", { key: 'affa09805a787591ad55073219a04e1083a70848', slot: "end" }))), h("h2", { key: 'da00f6dafde8079b44e962bd4a51fab57b5769cf' }, "Props"), h("smoothly-form", { key: '420c4c62dc31e8606475afd0754f535f7ae550c2', onSmoothlyFormInput: e => (this.props = e.detail) }, h("smoothly-input-select", { key: '5843a6d6eeeced970126d5f602693fa365c2492f', name: "color" }, h("span", { key: '770f177f71499fa8274523241b97f4162a4bafb2', slot: "label" }, "Color"), Color.values.map(color => (h("smoothly-item", { value: color, color: color }, color))), h("smoothly-input-clear", { key: 'c2ce6484987455f4a9db213c9737489e86283a33', slot: "end" })), h("smoothly-input-select", { key: 'c5b32eb509f543b213845dca10df50df9f04e8e8', name: "fill" }, h("span", { key: '3d94614bc074a46b2f687f934377b31f727c7917', slot: "label" }, "Fill"), Fill.values.map(fill => (h("smoothly-item", { value: fill }, fill))), h("smoothly-input-clear", { key: '40957b700c25fb1a27402667666bafe0cd0cc182', slot: "end" })), h("smoothly-input-select", { key: 'cbef37a017be99621df6698d57eddd3b6975df0c', name: "flip" }, h("span", { key: 'd384e098cb6b58c141e98fbb37e28f00669e7884', slot: "label" }, "Flip"), h("smoothly-item", { key: '3990c09061387a8aea7753103db56e08fb5c4f20', value: "x" }, "x"), h("smoothly-item", { key: 'a8e48ae9700a50c1340bbb05706386335441de24', value: "y" }, "y"), h("smoothly-input-clear", { key: '984009c27202699fb8bfe6aad99886087afddfcb', slot: "end" })), h("smoothly-input-select", { key: 'b192607f8615cac74df64ed1afda16ca5a88c884', name: "size" }, h("span", { key: '899b2324d9993983766fb24ee175d8bfa758dbe5', slot: "label" }, "Size"), h("smoothly-item", { key: '56e975109e10df35375eee193081e96c58d104fa', value: "tiny" }, "tiny"), h("smoothly-item", { key: '9d9d204e20db7f1447f38947dd30521bcd68f5f0', value: "small" }, "small"), h("smoothly-item", { key: '9d1216f79b2ab0f66cfc395eebddf8d88be3f6f5', value: "medium" }, "medium"), h("smoothly-item", { key: '67e4f4bc0df6baa70ee927eaa0a275fdd3aef8d7', value: "large" }, "large"), h("smoothly-item", { key: '42580e58183e763f425e375c42940d8613f0946a', value: "xlarge" }, "xlarge"), h("smoothly-input-clear", { key: '11188b6cb463578b0253d694b097a13af0e842c5', slot: "end" })), h("smoothly-input-range", { key: '250cb6caf4a697ab7a7c4af16e0611858a0cdec8', name: "rotate", step: 1, min: -180, max: 180, value: 0 }, "Rotate", h("smoothly-input-clear", { key: '01eef0ab611eaec82527f731f7423ad023af7507', slot: "end" }))), h("h1", { key: '69996c44ed040941e07bad3191edbf8f65d321a0' }, "Icons"), h("div", { key: 'c66af90970b454464bef605bc942ee1ea9796ec5', class: "icons" }, [
+        return (h(Host, { key: 'a0706709d49ae4e3beea0bb5a592cce83dbdfc50' }, h("h2", { key: 'c4058a68fd71e6c1a659f997815902225772e0ce' }, "Filter and Variants"), h("smoothly-form", { key: '2a7206c94f5bd868954ef2bbab2c16ba5ec701be', onSmoothlyFormInput: e => (this.display = e.detail) }, h("smoothly-input", { key: 'c81c786a01c0c9101c4c2669dde4891fcc8d79bd', name: "filter" }, "Filter"), h("smoothly-input-select", { key: '21d064354e488eedaf0f4d837324d6473edffd99', name: "variant" }, h("span", { key: '8e770299b884f6920949df5386e8eb2a1b68c057', slot: "label" }, "Variant"), h("smoothly-item", { key: 'b29db45415e020b3170d75a5b114c826e9d88454', value: "outline" }, "outline"), h("smoothly-item", { key: '9d032a3f19743194c46b68b5e9ee58e4d13d15dc', value: "sharp" }, "sharp"), h("smoothly-input-clear", { key: '32adc83b75e1cba0af54469866681129265c108d', slot: "end" }))), h("h2", { key: 'b7261752dc07d9859f217cdd79769e490b950ee0' }, "Props"), h("smoothly-form", { key: '3e34648bfa6bf8628974bbda25db0132bef60982', onSmoothlyFormInput: e => (this.props = e.detail) }, h("smoothly-input-select", { key: 'fe612d11a476b67e7ac7535df7a06eed6676545b', name: "color" }, h("span", { key: 'a8774f195af193c7bf455e3f1ee746c83393de2d', slot: "label" }, "Color"), Color.values.map(color => (h("smoothly-item", { value: color, color: color }, color))), h("smoothly-input-clear", { key: 'cb96ef4ea25111b19a8a32f61ebda4d48aed061f', slot: "end" })), h("smoothly-input-select", { key: '8be80163691b4843d40152e228ccf837b28d902c', name: "fill" }, h("span", { key: '7a4ad5ab5d75fdb994d7dd51e27fe0f3048024cf', slot: "label" }, "Fill"), Fill.values.map(fill => (h("smoothly-item", { value: fill }, fill))), h("smoothly-input-clear", { key: '6e945d2ce1769e1b97b4f28cfb52aa4f5c288e01', slot: "end" })), h("smoothly-input-select", { key: '3cb368e15af0312dfa6cb64ddea95b06d1f8aa7f', name: "flip" }, h("span", { key: '8622114e3082f040179d53ea261d17f585a29c5b', slot: "label" }, "Flip"), h("smoothly-item", { key: '41940930aed4abfafb6b50713dc133f2cd34c9c5', value: "x" }, "x"), h("smoothly-item", { key: '9d151f226cf4aa1bcf82415b74341259f9f78b24', value: "y" }, "y"), h("smoothly-input-clear", { key: '72975515ddf54f1fd7dab600ef080ee8498c07bb', slot: "end" })), h("smoothly-input-select", { key: '4ba83461e4023c99ef94fcf0c351ac98e70e0cea', name: "size" }, h("span", { key: 'ea31df439d850779406fa35094e68c590e3c8add', slot: "label" }, "Size"), h("smoothly-item", { key: 'b27300ba82640e5ee2e78b712417aa96c7bb6093', value: "tiny" }, "tiny"), h("smoothly-item", { key: '0e5de1cc80c0a336c4dfc1b77e21f6593483fe44', value: "small" }, "small"), h("smoothly-item", { key: '2d71100ccd666e7e53c40ad9dcb24094d6316ba6', value: "medium" }, "medium"), h("smoothly-item", { key: 'b5dc3ca6278d607f91df771c39c67f2b73ee0a86', value: "large" }, "large"), h("smoothly-item", { key: '9dfba645effcec688557c2bed05c44698dd0159b', value: "xlarge" }, "xlarge"), h("smoothly-input-clear", { key: 'e23d58562e554d6096a44feabaf4365c800c82f3', slot: "end" })), h("smoothly-input-range", { key: 'e6076caecd252d6185fc88c8f5dd13b544d115e9', name: "rotate", step: 1, min: -180, max: 180, value: 0 }, "Rotate", h("smoothly-input-clear", { key: '47d878d21777308baffba2529d08aa1a7a85954c', slot: "end" }))), h("h1", { key: '8f9791fe61a60dcb595332f08387d297caf25d9a' }, "Icons"), h("div", { key: 'b85cbd6ffe7d5a3cdacba67227114ffc6ecd641b', class: "icons" }, [
             ...Icon.Name.values
                 .filter(name => !this.display.filter || name.includes(this.display.filter))
                 .map((name) => (this.display.variant ? `${name}-${this.display.variant}` : name)),

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

@@ -41,7 +41,7 @@ export class SmoothlyIcon {
     }
     render() {
         var _a;
-        return h(Host, { key: '0cd1bf1fd47bb75db4addbb772c8ebf7420a9f76', innerHTML: this.document, style: { ["--rotation"]: `${(_a = this.rotate) !== null && _a !== void 0 ? _a : 0}deg` } });
+        return h(Host, { key: '6131214e72ce045ae0f9402ce58de3f26aeac91d', innerHTML: this.document, style: { ["--rotation"]: `${(_a = this.rotate) !== null && _a !== void 0 ? _a : 0}deg` } });
     }
     static get is() { return "smoothly-icon"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/checkbox/demo/index.js

@@ -2,7 +2,7 @@ import { h, Host } from "@stencil/core";
 import { isoly } from "isoly";
 export class SmoothlyInputCheckboxDemo {
     render() {
-        return (h(Host, { key: '2104cc384387df5aeb2753f3751f8950bf11a26d' }, h("h2", { key: '6ecc167f4ae3d4daf2c7ea9015ffe78ef6d9ff5b' }, "All inputs"), h("smoothly-form", { key: 'ce7012e838f4b6ee4b825d81e2e44c47ac20b55d', looks: "grid", readonly: true, action: "https://api.toiletapi.com/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, h("smoothly-input", { key: '4041036e9c3ec44f2405c11668e8087b03e69866', readonly: true, name: "First Name", value: "John" }, "First name"), h("smoothly-input", { key: 'eeca4b5952fddcea3c4f6d230473faf4fe63af49', name: "Last name", value: "Doe" }, "Last name", h("smoothly-input-clear", { key: '68b79758a8ca25d63cc4e7b638b092280959d5ca', size: "icon", slot: "end" })), h("smoothly-input", { key: 'e90a5ac6f5383fc8417129f58ebba4287d6df90d', type: "phone", name: "Phone", value: "777888999" }, "Phone", h("smoothly-input-reset", { key: 'a4aed7fd6afb4c119e2c132700a3e321a9710156', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: '0a3bcea2e33c055893d0ef3dbae9809d1777c88b', clearable: true, name: "radioFirstInput" }, h("p", { key: 'fed958855b194dcdda3a8f86ef134e9684653dc9', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: '210eec31d9d4329cf3b40570981e1e009ce0a5c8', slot: "options", value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: 'd39285d1c9f9ad48304562c857f3bbb9b80cec6a', selected: true, slot: "options", value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: 'bedd301d6fd275c5e4d89e342b210c89833a2b84', slot: "options", value: "third" }, "Label 3")), h("smoothly-input-color", { key: '11efb4e2d3cc6aec4e94826d22a03fb1fd740c8d', name: "color", value: "#479f56", output: "rgb" }, "Color"), h("smoothly-input-select", { key: 'cf8eaacdb68bfff8c54e4aacbfc9fd10f84efe7c', menuHeight: "7.5items", placeholder: "Select...", multiple: true, name: "select-month" }, h("label", { key: 'd70be0e1b897dfe09f06d9b440b961a37f40b6ec', slot: "label" }, "Month"), h("smoothly-item", { key: 'fb552cea8aa152b5085f68cba8fe035a9e7d5121', value: "1" }, "January"), h("smoothly-item", { key: '40b8727e5f0fb06ae255060bf84aa20e27ec0675', value: "2" }, "February"), h("smoothly-item", { key: '48b59616458a0e1f32282fd04c43bb603a03d886', value: "3" }, "March"), h("smoothly-item", { key: '9ef6bd978a48b22058ba112bedd974cacd456b25', value: "4" }, "April"), h("smoothly-item", { key: '622c6300416a964ac4d5938ea375f20f5a4936f9', value: "5" }, "May"), h("smoothly-item", { key: 'fcc0a248253b936088ef8904d0c8ac4d1d6ec470', value: "6" }, "June"), h("smoothly-item", { key: '0708bc7c8ad4996ca531ff8a14e8e37a142ca2f0', value: "7" }, "July"), h("smoothly-item", { key: '71a766d163e841a551a5332b11324212c6a5ed03', value: "8" }, "August"), h("smoothly-item", { key: 'e9cfeda4ea89db8c2363876771bdd52114391f1f', value: "9" }, "September"), h("smoothly-item", { key: 'cf8b7d36d4b043baa35534f3d85c8110f74ff9bf', value: "10" }, "October"), h("smoothly-item", { key: '5c5fff4bf7b21f89484a2271aa9da180459a9ab9', value: "11" }, "November"), h("smoothly-item", { key: '288a15439fc1eb9de06f2d2bd7d7f2ff8c8d2369', value: "12" }, "December"), h("smoothly-input-clear", { key: '94b95ec2f190476eed3b704c8b56a3cc6cf3bccc', size: "icon", slot: "end" })), h("smoothly-input-select", { key: 'aa77f2bbb9ee5ce2a02017ed8b237f299f046e41', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: '353cfa8d150c67e55ea6cb792540ab4b48c7955c', value: "folder", selected: true }, h("smoothly-icon", { key: 'e081afa0ba1810cdbd150cb44728379ab62d0bd9', size: "small", name: "folder-outline" })), h("smoothly-item", { key: 'f79ee7115182f38778a53e5ec89cabc964cb9e73', value: "camera" }, h("smoothly-icon", { key: 'aa9197729a619ffa5f3adfe61c23cbc0dccc2e64', size: "small", name: "camera-outline" }))), h("smoothly-input-checkbox", { key: '5243e00fa3aae53a671ce6d8f3c984c5aa814147', name: "checkbox" }, "Check the box"), h("smoothly-input-checkbox", { key: '984f98932af3edeaf2188ad4fea15232d2f9faab', name: "checkbox2", checked: true }, "Check the box 2"), h("smoothly-input-date-range", { key: 'c9af1b41f0dabe3154f56d9338a103be67a4d8e0', start: isoly.Date.now(), end: isoly.Date.now() }), h("smoothly-input-date", { key: '6152350ce38d0d9580c9146ac4f76b1fcb2fb171', name: "date" }, "Date", h("smoothly-input-clear", { key: '4fbc4cc41a6ed474a37847ea6f1e28b0eff00033', slot: "end" })), h("smoothly-input-range", { key: '1d5848a587da50aeac940bf32f4a2b438b9c46e2', step: 1, name: "range3", value: 20000 }, "Select"), h("smoothly-input", { key: '5c20d409be0fdd4d65c2617af5c7f8c61429656d', name: "pets.0.name" }, "First Pet's Name"), h("smoothly-input-range", { key: '2f0d2d5a7a37b55bcf008722f17931eb7d67c26c', name: "pets.0.age", max: 100, step: 1 }, "First Pet's Age"), h("smoothly-input", { key: 'f84c95cc8d4fec6dbfb00ce4d8ef032fdf316155', name: "pets.1.name" }, "Second Pet's Name"), h("smoothly-input-range", { key: '0a12f7f97c74cd8d3bed06f51e68f2e7a77ffaaf', name: "pets.1.age", max: 100, step: 1 }, "Second Pet's Age"), h("smoothly-input", { key: '02fb9f389eaa885aba5e76c4374ce6a9985d98bb', name: "pets.2.name" }, "Third Pet's Name"), h("smoothly-input-range", { key: '513bd956bd1717e360e4288f3fcd568880911aef', name: "pets.2.age", max: 100, step: 1 }, "Third Pet's Age"), h("smoothly-input-file", { key: '07a7fefa248053dcef8fe1e15a3a3d488ad9b40f', name: "profile", placeholder: "Click or drag your profile picture here..." }, h("span", { key: 'd4196ebeb8f4f96d2e5ff77ebb879b7f613a085a', slot: "label" }, "Profile"), h("smoothly-icon", { key: 'f254f54ae84f49d9a4e2f636cdbaa48a2caa9bbf', slot: "button", name: "person-circle-outline", size: "tiny", fill: "default" })), h("smoothly-input-clear", { key: '5d811e2e74179fa435a82c9f77b55e40f45cd5d9', fill: "default", type: "form", color: "warning", slot: "clear", size: "icon", shape: "rounded" }), h("smoothly-input-edit", { key: '01c64692413e871b9b67c3edf66609c447ec3d27', fill: "default", type: "form", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), h("smoothly-input-reset", { key: '26b4998ca1fead557f9a75775c450e5a075b5788', fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { key: '7e879ef3257c9cfa8e48d1ff3b46b2cb2ba954bc', delete: true, slot: "delete", color: "danger", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { key: '6bfb8554a53ecfff486c3c07d74d39938d372b3f', fill: "default", color: "success", slot: "submit", size: "icon", shape: "rounded" }))));
+        return (h(Host, { key: '91aae95177fd66ee9dc504cb57d386fa64ca7040' }, h("h2", { key: '547a7c8dc8708b0c08462a9f094a4d00c13be893' }, "All inputs"), h("smoothly-form", { key: '545379cf0d32f3d8df9d4252defb8b03367e1152', looks: "grid", readonly: true, action: "https://api.toiletapi.com/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, h("smoothly-input", { key: 'dd85a0e169803a854c9b87deebc38b0bcb8fdd03', readonly: true, name: "First Name", value: "John" }, "First name"), h("smoothly-input", { key: 'b6e0a378f7a6ebb3b5954c75009bf62c2f726d8b', name: "Last name", value: "Doe" }, "Last name", h("smoothly-input-clear", { key: 'f8640634f0dbce9a7c1658ebda0b0ca565f9ae71', size: "icon", slot: "end" })), h("smoothly-input", { key: '844dd7e60dc606b2fec43f09a33a92d75ca81551', type: "phone", name: "Phone", value: "777888999" }, "Phone", h("smoothly-input-reset", { key: 'ee73bc11318cc9a3104b6de348283317366f3026', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: '71f68a1faff55301c55d9b55411a4a3b46b33f5d', clearable: true, name: "radioFirstInput" }, h("p", { key: 'e43c3414f050d967beb80c674f727dbf334f521f', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: '979c3266c584360d348b1df32e183f4639fd21fa', slot: "options", value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '1b57765ee6f4d76ba4f954c4ac027f46fac88cd4', selected: true, slot: "options", value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '461f02a8de919a4a170902e03efd20170e3c8292', slot: "options", value: "third" }, "Label 3")), h("smoothly-input-color", { key: '4b00fc5b50ff3e395ebbf337c6384f59cc6e30a6', name: "color", value: "#479f56", output: "rgb" }, "Color"), h("smoothly-input-select", { key: 'f750afb8e0c685341d32dfed36a6d148500e3c51', menuHeight: "7.5items", placeholder: "Select...", multiple: true, name: "select-month" }, h("label", { key: 'f8d4ce6c694403434040a0fb57c776197c6a9f7c', slot: "label" }, "Month"), h("smoothly-item", { key: '6c5ee08a2fceb2ef7d53bb4dfbc683af05f232b8', value: "1" }, "January"), h("smoothly-item", { key: 'aeb84ed01dab144064d2b7e3bd73472957bd55d5', value: "2" }, "February"), h("smoothly-item", { key: 'c2d1acd2d5fd87d7dbfd919ae2436bc203782f3c', value: "3" }, "March"), h("smoothly-item", { key: '656defac4961f91f8ba929d9e1dd61d5b1678371', value: "4" }, "April"), h("smoothly-item", { key: '6c42b3107d92018c4d76ed644e73746121457c75', value: "5" }, "May"), h("smoothly-item", { key: 'dfe2c31b55df3d489f4a3d867c7d0c4f4355f4d2', value: "6" }, "June"), h("smoothly-item", { key: '0501cf1ae04a6091cddb9648bb9efe0be01b13c2', value: "7" }, "July"), h("smoothly-item", { key: '40924977dae0a1c7a8b3a1c009da7030cbacbd46', value: "8" }, "August"), h("smoothly-item", { key: '3fb03182f8cfec98a323b2f0479c300efa69d1cd', value: "9" }, "September"), h("smoothly-item", { key: 'cfd122f81a69e9bd553b3f348c824a65ba1d4a26', value: "10" }, "October"), h("smoothly-item", { key: '798f2cdfe7a10d7c84fe98050dfbfe1253b77455', value: "11" }, "November"), h("smoothly-item", { key: '6405f3a207aa6007a1f09faa3f123ae963b9c668', value: "12" }, "December"), h("smoothly-input-clear", { key: 'a7932851dc2b636fe60a5b0f19e4d3f6d56b550a', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '24a486638f146e93ada5a565213cad60522ae9d8', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: '80ff1a66b7b223df530461c76e8796bcaa1c0ca5', value: "folder", selected: true }, h("smoothly-icon", { key: '98ec06c58f59573e7d103b358b7bc76e7fd13842', size: "small", name: "folder-outline" })), h("smoothly-item", { key: '45c37d51acc6ed792235dde20061c8dbb0a85a90', value: "camera" }, h("smoothly-icon", { key: '96e067296ec269ebdad600d7f20ff3d49ac8ee14', size: "small", name: "camera-outline" }))), h("smoothly-input-checkbox", { key: '8094ad4c5a0430bdb12eb24884fa8c97a765ae0d', name: "checkbox" }, "Check the box"), h("smoothly-input-checkbox", { key: '584f5ea10a0d2f35f32b74cecedb3a747e688ab6', name: "checkbox2", checked: true }, "Check the box 2"), h("smoothly-input-date-range", { key: 'd3b9c0e9eac0dba1315431fbd2ad38baf37b816c', start: isoly.Date.now(), end: isoly.Date.now() }), h("smoothly-input-date", { key: '9ecbafb403dd2515af8a13853779874847b94abf', name: "date" }, "Date", h("smoothly-input-clear", { key: '5872d15da2f85bbdacbb498ed93d9973cb342151', slot: "end" })), h("smoothly-input-range", { key: '47182ac0465fbc3f367902ef29c7c12bb3eb141f', step: 1, name: "range3", value: 20000 }, "Select"), h("smoothly-input", { key: '768f9ce146e78d7f746fae5691e61291272df971', name: "pets.0.name" }, "First Pet's Name"), h("smoothly-input-range", { key: 'b9bcdc0ad7807b1ebc32fe576b1ad71ace42f16a', name: "pets.0.age", max: 100, step: 1 }, "First Pet's Age"), h("smoothly-input", { key: '9d294d8afebdc66a09334bfcabac1645aaf6064b', name: "pets.1.name" }, "Second Pet's Name"), h("smoothly-input-range", { key: 'e9f7f610645eff1bdc7fec78a2a520962a06501a', name: "pets.1.age", max: 100, step: 1 }, "Second Pet's Age"), h("smoothly-input", { key: '8582f324a887225c858b4c625441fa582119f5b2', name: "pets.2.name" }, "Third Pet's Name"), h("smoothly-input-range", { key: 'f8dded9f292f22968029d5a279087fc2c68fc630', name: "pets.2.age", max: 100, step: 1 }, "Third Pet's Age"), h("smoothly-input-file", { key: 'b9feb7d182e47fd3116165f9c6da7632465e2624', name: "profile", placeholder: "Click or drag your profile picture here..." }, h("span", { key: 'ad92fc48130c51c722dded0a4c8496233fc3fc47', slot: "label" }, "Profile"), h("smoothly-icon", { key: 'a907b28bd000235eb96bc744cb874a12b4fff3f0', slot: "button", name: "person-circle-outline", size: "tiny", fill: "default" })), h("smoothly-input-clear", { key: '9c1c365c9d595640400f21fd250fb6f6f02ee99c', fill: "default", type: "form", color: "warning", slot: "clear", size: "icon", shape: "rounded" }), h("smoothly-input-edit", { key: 'f2cb34fec34d9f7066371604366a97aaf8fe1a01', fill: "default", type: "form", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), h("smoothly-input-reset", { key: '7c205877ee9ddba670e62b047d422a2449334053', fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { key: 'f75c093be0a6c7b868138f4e5c2fc0a86ed02466', delete: true, slot: "delete", color: "danger", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { key: '85e5bced4e5b2036a06fd7364346f015c2462b5a', fill: "default", color: "success", slot: "submit", size: "icon", shape: "rounded" }))));
     }
     static get is() { return "smoothly-input-checkbox-demo"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/checkbox/index.js

@@ -60,7 +60,7 @@ export class SmoothlyInputCheckbox {
         !this.disabled && !this.readonly && (this.checked = !this.checked);
     }
     render() {
-        return (h(Host, { key: '833609164edc11403d0abf37581eae241ade4022', onMouseDown: (e) => (this.mouseDownPosition = { x: e.clientX, y: e.clientY }), onMouseUp: (e) => { var _a; return ((_a = this.mouseDownPosition) === null || _a === void 0 ? void 0 : _a.x) == e.clientX && this.mouseDownPosition.y == e.clientY && this.click(); } }, h("input", { key: '0a1383f71f2da86ca8f5145b673cc363464c2307', type: "checkbox", checked: this.checked }), this.checked && h("smoothly-icon", { key: '0b1a207721e0374dd79a0be0bea78c7a5ac9d3e2', name: "checkmark-outline", size: "tiny" }), h("label", { key: '656867d69e3cf8554df686764a76d8d4ff55dac8' }, h("slot", { key: '536b8f6429d82b7ead0746f8f78918844d74942a' }))));
+        return (h(Host, { key: '45c1c7beef37896ee98099088ddd736986615840', onMouseDown: (e) => (this.mouseDownPosition = { x: e.clientX, y: e.clientY }), onMouseUp: (e) => { var _a; return ((_a = this.mouseDownPosition) === null || _a === void 0 ? void 0 : _a.x) == e.clientX && this.mouseDownPosition.y == e.clientY && this.click(); } }, h("input", { key: '4283cbb2f152ef92e627b277121cda8de1b573ed', type: "checkbox", checked: this.checked }), this.checked && h("smoothly-icon", { key: '6384fd5ad97ea238b71fed6cc1ed9f4d84f9dfaa', name: "checkmark-outline", size: "tiny" }), h("label", { key: '053cd3b9ff5f9c80cac0fb8663d08a38769f31b2' }, h("slot", { key: 'efad1d448b746b765ce6e8a6a17c6c2e9a9658f5' }))));
     }
     static get is() { return "smoothly-input-checkbox"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/clear/index.js

@@ -39,7 +39,7 @@ export class SmoothlyInputClear {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'cd3f880e2bbbf7e76336ad2ecf759e8534978141', title: this.tooltip }, h("smoothly-button", { key: '04f616c6342c64cb53bb8bf2e296b81a4a131b2a', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, h("slot", { key: '19abfef9437763a04dda38a4db19972274375b04' }), h("smoothly-icon", { key: '69e46b20ee1c15268aec5e710ae52b6d6038c444', name: "close", size: "tiny" }))));
+        return (h(Host, { key: '1c44261b3920fc4afef44e592c57d4edce43cfa2', title: this.tooltip }, h("smoothly-button", { key: '5640b6d34c7d6910a21a8e87f60b365521eb55e1', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, h("slot", { key: '9c3fd0bfd5edf45d75f11639f569db85a71e6070' }), h("smoothly-icon", { key: '624113149ddac310bc350ea3a6bb73e73216e10c', name: "close", size: "tiny" }))));
     }
     static get is() { return "smoothly-input-clear"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/color/demo/index.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SmoothlyInputColorDemo {
     render() {
-        return (h(Host, { key: '425472ef4f686d52c44e4d3a929be66d78823b26' }, h("h2", { key: '621c263cd20e5e1e31b26e184c9691b7b16ad282' }, "Color"), h("smoothly-input-color", { key: '2aece7d05a7fa18b83ca8830096a78bb105c8f85', name: "color" }, "Choose color")));
+        return (h(Host, { key: '6c0f77709d1ab40676d2214ec1a0e1545baf1e5b' }, h("h2", { key: 'a5840477e827a305d2441f157a67936afe48397f' }, "Color"), h("smoothly-input-color", { key: 'b4c59fbfcaacd9c2561264ca5bad49a5c15d2c1f', name: "color" }, "Choose color")));
     }
     static get is() { return "smoothly-input-color-demo"; }
     static get styles() { return "style.css"; }

package/dist/collection/components/input/color/index.js

@@ -138,7 +138,7 @@ export class SmoothlyInputColor {
     }
     render() {
         var _a, _b, _c, _d, _e, _f;
-        return (h(Host, { key: '2f1a28996b592d69882975831576e63be86cda4c', style: {
+        return (h(Host, { key: 'da2e8d3b9d34a34700e56943bf46f97952c82c8f', style: {
                 "--hexCode": this.value,
                 "--rgb-r": `${Math.round((_a = this.rgb.r) !== null && _a !== void 0 ? _a : 0)}`,
                 "--rgb-g": `${Math.round((_b = this.rgb.g) !== null && _b !== void 0 ? _b : 0)}`,
@@ -147,7 +147,7 @@ export class SmoothlyInputColor {
                 "--hsl-s": `${Math.round((_e = this.hsl.s) !== null && _e !== void 0 ? _e : 0)}%`,
                 "--hsl-l": `${Math.round((_f = this.hsl.l) !== null && _f !== void 0 ? _f : 0)}%`,
                 "--element-height": `${this.element.clientHeight}px`,
-            } }, h("smoothly-input", { key: '6cfaa6fc460579212c82e23f576b614a8ec939e7', value: this.value, name: this.name, looks: undefined, color: this.color, type: "hex-color", showLabel: this.showLabel, readonly: this.readonly, onSmoothlyInput: event => (event === null || event === void 0 ? void 0 : event.stopPropagation(), this.hexInputHandler(event.detail[this.name])) }, h("slot", { key: '9876c7a6a6f94e6971240e59340b2ddc45fe011e' })), h("div", { key: '303fe59863a8eadb230b775393776214891c458c', class: "color-sample" }), h("smoothly-icon", { key: '7166e064dfc8e3bee8fbc96e174b978a39313fe6', color: this.color, name: "options-outline", size: "small", onClick: () => !this.readonly && this.openDropdown() }), h("div", { key: '38b7b41c4dde97ede1b72df696555f71acf19c13' }, h("slot", { key: '9fb68c9faeae04a02761a0cda7c70d226546fa9c', name: "end" })), this.open && !this.readonly && (h("div", { key: '67c5708df458d961f2bbba5970d39a04e6709c13', class: "rgb-sliders" }, h("smoothly-toggle-switch", { key: '025476f000074e93fc6ce82c314a92bed9a100d7', title: `${this.sliderMode === "rgb" ? "To HSL" : "To RGB"}`, onSmoothlyToggleSwitchChange: event => this.handleSwitchMode(event), size: "tiny", checkmark: false, selected: this.sliderMode === "hsl" }), Object.entries(this.rgb).map(([key, value]) => (h("smoothly-input-range", { style: this.sliderMode != "rgb" ? { display: "none" } : {}, name: key, min: 0, max: 255, color: undefined, type: "text", value: value, step: 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), label: key.toUpperCase() }))), Object.entries(this.hsl).map(([key, value]) => (h("smoothly-input-range", { style: this.sliderMode != "hsl" ? { display: "none" } : {}, name: key, min: 0, max: key === "h" ? 359 : 1, color: undefined, type: key === "s" || key === "l" ? "percent" : "text", value: (key === "s" || key === "l") && value ? value / 100 : value, step: key === "s" || key === "l" ? 0.01 : 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), label: key.toUpperCase() })))))));
+            } }, h("smoothly-input", { key: '0811b9e8b343160a8767b07ddfbc8124cfa9ee6d', value: this.value, name: this.name, looks: undefined, color: this.color, type: "hex-color", showLabel: this.showLabel, readonly: this.readonly, onSmoothlyInput: event => (event === null || event === void 0 ? void 0 : event.stopPropagation(), this.hexInputHandler(event.detail[this.name])) }, h("slot", { key: 'c20ff101d416406ea67da7d9cb5aa0aa0b3c4f43' })), h("div", { key: '554cc3985ec8bb9737c94b65031a34a86f4de6cc', class: "color-sample" }), h("smoothly-icon", { key: '27ec92c81e1da06171dc03ee0fc1a4d801c25811', color: this.color, name: "options-outline", size: "small", onClick: () => !this.readonly && this.openDropdown() }), h("div", { key: '9c3069fbd41e47041145877424504858eec0f5c0' }, h("slot", { key: '4b5a81761af0eaa45b80ff291c78a1662d62a5c4', name: "end" })), this.open && !this.readonly && (h("div", { key: '71642c17b0531a61f0f3032ec189f337094b589b', class: "rgb-sliders" }, h("smoothly-toggle-switch", { key: 'a3a1500be0748165ed5ba43fd0671744b6fc801d', title: `${this.sliderMode === "rgb" ? "To HSL" : "To RGB"}`, onSmoothlyToggleSwitchChange: event => this.handleSwitchMode(event), size: "tiny", checkmark: false, selected: this.sliderMode === "hsl" }), Object.entries(this.rgb).map(([key, value]) => (h("smoothly-input-range", { style: this.sliderMode != "rgb" ? { display: "none" } : {}, name: key, min: 0, max: 255, color: undefined, type: "text", value: value, step: 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), label: key.toUpperCase() }))), Object.entries(this.hsl).map(([key, value]) => (h("smoothly-input-range", { style: this.sliderMode != "hsl" ? { display: "none" } : {}, name: key, min: 0, max: key === "h" ? 359 : 1, color: undefined, type: key === "s" || key === "l" ? "percent" : "text", value: (key === "s" || key === "l") && value ? value / 100 : value, step: key === "s" || key === "l" ? 0.01 : 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), label: key.toUpperCase() })))))));
     }
     static get is() { return "smoothly-input-color"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/date/index.js

@@ -79,13 +79,13 @@ export class SmoothlyInputDate {
         event.stopPropagation();
     }
     render() {
-        return (h(Host, { key: '9db0c63036aa6f0207fce78ffd6f802b7deeb5ad' }, h("smoothly-input", { key: 'a6db19ef7beb77e6a0beee10b274373f3f2a732d', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: this.name, onFocus: () => !this.readonly && (this.open = !this.open), onClick: () => !this.readonly && (this.open = !this.open), readonly: this.readonly, errorMessage: this.errorMessage, invalid: this.invalid, type: "date", value: this.value, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
+        return (h(Host, { key: 'a755134a252d7a353d9a77367c6850ec0e7bb2fa' }, h("smoothly-input", { key: 'c84f19abf9b612265662c923924bb9e27e4470dd', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: this.name, onFocus: () => !this.readonly && (this.open = !this.open), onClick: () => !this.readonly && (this.open = !this.open), readonly: this.readonly, errorMessage: this.errorMessage, invalid: this.invalid, type: "date", value: this.value, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
                 e.stopPropagation();
                 this.value = e.detail[this.name];
-            } }, h("slot", { key: '2e6e4e4151da614f0de08159c5b0e37a3404b120' })), h("span", { key: '686e082fc080a78bc2af6eac16f1cf352db9b68b', class: "icons" }, h("slot", { key: '037c3e5ecfb313d705aa23317cf9eeb793769f48', name: "end" })), this.open && !this.readonly && (h("nav", { key: '63a91d7dfd85ea9d3731e47e4b68bbb49bf67db1' }, h("smoothly-calendar", { key: 'e121009669154791ed3df7981a540bfa6cb12fc1', doubleInput: false, value: this.value, onSmoothlyValueChange: event => {
+            } }, h("slot", { key: '76957a67776b6e114a134ad8e381fccab3b3bcdb' })), h("span", { key: '913e4d85afb432d619a8b97b9498aca63fb65524', class: "icons" }, h("slot", { key: 'e3241b7fcad13b265db309d1893b235a8ddef397', name: "end" })), this.open && !this.readonly && (h("nav", { key: '7e930465a1ad3354480a4089bc9a041b3fffcc93' }, h("smoothly-calendar", { key: '207d73550c0b0274990b5a6afe6bcf2b96840055', doubleInput: false, value: this.value, onSmoothlyValueChange: event => {
                 this.value = event.detail;
                 event.stopPropagation();
-            }, max: this.max, min: this.min }, h("div", { key: 'c42e755a2c39062bd185905db9502c55ab3e30ae', slot: "year-label" }, h("slot", { key: '101b37555fb0c8922cc3989455eeff39eeecbc34', name: "year-label" })), h("div", { key: 'cd14ec9baed6b289de558f03ac04d63d1fc40115', slot: "month-label" }, h("slot", { key: 'd7eee5fdb8a0191e411f1be6fd22c997bddc18ca', name: "month-label" })))))));
+            }, max: this.max, min: this.min }, h("div", { key: 'bf152dd3b3de42c90569c7d484748181c5ca4fa3', slot: "year-label" }, h("slot", { key: '6a2fc92cbd7f61f12ceb21ce9d2844d713053b0c', name: "year-label" })), h("div", { key: '87a13f22c38aa9004483f4d197b7eddafe96941a', slot: "month-label" }, h("slot", { key: '11c277001bc28bcb4525d7f3fd120e8b643810b9', name: "month-label" })))))));
     }
     static get is() { return "smoothly-input-date"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/date/range/index.js

@@ -91,12 +91,12 @@ export class SmoothlyInputDateRange {
     }
     render() {
         const locale = navigator.language;
-        return (h(Host, { key: '9264a1feea92e3151f9eb3a7ed4a33ba8d70d2b0', tabindex: 0 }, h("section", { key: '683a4226bec41fe455f53000a52b2de7e3299030', onClick: () => !this.readonly && (this.open = !this.open) }, h("smoothly-input", { key: 'c6b5c3d154cd6ebc651b4fa187b2808bd5f9dae2', type: "text", name: "dateRangeInput", readonly: this.readonly, value: this.start && this.end
+        return (h(Host, { key: '0a06894b9e72b93df447ff82ad27d2a6779f8031', tabindex: 0 }, h("section", { key: '2d13b0592a766e768cf858150513475fd4522b59', onClick: () => !this.readonly && (this.open = !this.open) }, h("smoothly-input", { key: 'be576244d7b348ae617ccc719ffcd81418ff0b75', type: "text", name: "dateRangeInput", readonly: this.readonly, value: this.start && this.end
                 ? `${tidily.format(this.start, "date", locale)} — ${tidily.format(this.end, "date", locale)}`
                 : undefined, invalid: this.invalid, placeholder: this.placeholder, showLabel: this.showLabel, onSmoothlyInput: e => {
                 e.stopPropagation();
                 this.inputHandler(e.detail);
-            } }, h("slot", { key: '9e32996babca0c1ad197d91a1d7db1e9e0dd553b' }))), h("span", { key: 'a1bffd73159766ed93c979e8d434802b095716f3', class: "icons" }, h("slot", { key: '2257c8ebd21da97cc917b66c0fc2799c66402f20', name: "end" })), this.open && (h("nav", { key: '112d3614de43a24f357b3846b207cdd7851d1452' }, h("smoothly-calendar", { key: '0b8d5227c5f066d32c9b0ba83bcce0201564bbd9', doubleInput: true, onSmoothlyValueChange: e => e.stopPropagation(), onSmoothlyStartChange: e => {
+            } }, h("slot", { key: '80adf2bd502c516457c9870c05fc4bc2b6275c3b' }))), h("span", { key: '5c95250e283bc5bada2daa574d21112e43a37492', class: "icons" }, h("slot", { key: '0389d3bd80370d6fae95fe7f32bb9f8a19a6ba06', name: "end" })), this.open && (h("nav", { key: '62bc92246212b47307de1180c9c1267825693d86' }, h("smoothly-calendar", { key: '735dd9ca6c84394d666fd71d2d831007e50a0574', doubleInput: true, onSmoothlyValueChange: e => e.stopPropagation(), onSmoothlyStartChange: e => {
                 e.stopPropagation();
                 this.start = e.detail;
             }, onSmoothlyEndChange: e => {

package/dist/collection/components/input/date/time/index.js

@@ -106,22 +106,22 @@ export class SmoothlyInputDateTime {
         this.changed = false;
     }
     render() {
-        return (h(Host, { key: 'f685671f7623581876d377217bc42b9486e4a179' }, h("smoothly-input", { key: 'a31204db327a688869ee1c5275db78b871afa268', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: "date", onFocus: () => !this.readonly && (this.open = !this.open), onClick: () => !this.readonly && (this.open = !this.open), readonly: this.readonly, type: "date", value: this.date, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
+        return (h(Host, { key: '1f7d50b47ec60aeb9bf5527be3e993dd988e8873' }, h("smoothly-input", { key: 'a7539f5cbb2f0845e7ad900b0402572388f19e8b', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: "date", onFocus: () => !this.readonly && (this.open = !this.open), onClick: () => !this.readonly && (this.open = !this.open), readonly: this.readonly, type: "date", value: this.date, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
                 e.stopPropagation();
                 this.date = e.detail.date;
-            } }, h("slot", { key: '1a08c1994f7d59f58349d7896de61f1e58be148f' })), h("smoothly-input", { key: '5714b1a043d1fbaef8d9ffe74d31789b46c603e1', name: "hour", type: "integer", max: 23, value: this.hour, placeholder: "hh", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
+            } }, h("slot", { key: 'be6a15ab70967423d3d307d52a02373842cdc12a' })), h("smoothly-input", { key: '1706bd3e02d205c8cfed03abeb9f5ae900f1c6ff', name: "hour", type: "integer", max: 23, value: this.hour, placeholder: "hh", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
                 e.stopPropagation();
                 this.hour = e.detail.hour;
-            } }), h("span", { key: '22de8e550b339963d907a6acb7352abf1bcb4672', class: "colon" }, ":"), h("smoothly-input", { key: 'f990c4c4fe93b57a1dd8b1959ef5a5cd734322f8', name: "minute", type: "integer", max: 59, value: this.minute, placeholder: "mm", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
+            } }), h("span", { key: 'ae7ab41ec2918f480e0b4347346f2975aa23d0d1', class: "colon" }, ":"), h("smoothly-input", { key: '3e5d9221987f2cdb7c47c01abe4e2453655bbd3f', name: "minute", type: "integer", max: 59, value: this.minute, placeholder: "mm", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
                 e.stopPropagation();
                 this.minute = e.detail.minute;
-            } }), h("span", { key: '03f9d327ff1f3e8e85f130174de8cf6bb973b68a', class: "icons" }, h("smoothly-icon", { key: '8ab24a69f37c9f91e7eae091b5e1e0a234f5603e', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage }), h("slot", { key: 'aa179179ebb4e651983ef043f7c3681874c3fec2', name: "end" })), this.open && !this.readonly && (h("nav", { key: '79d2319fdeb0324acbac5b3372104a46433366b7' }, h("smoothly-calendar", { key: 'c3e4d0a7f52b6d9a1d5226fd5d8156ccbb61148e', doubleInput: false, value: this.value, min: this.min ? isoly.DateTime.getDate(this.min) : undefined, max: this.max ? isoly.DateTime.getDate(this.max) : undefined, onSmoothlyValueChange: e => {
+            } }), h("span", { key: 'fe9259b03b623b96e3ba20c342b94e3f43e9f68c', class: "icons" }, h("smoothly-icon", { key: '81f9e8da653d36eb8e450294dc2dc4264fb76122', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage }), h("slot", { key: 'e70b4a872aa43692c8f1a5e8f7d8a6bf7dc0aa28', name: "end" })), this.open && !this.readonly && (h("nav", { key: '312657e918b72f06eb76187e064fdf7113960499' }, h("smoothly-calendar", { key: 'bc461b9606b3f0a05a788b7ae72ac5d96231ab9b', doubleInput: false, value: this.value, min: this.min ? isoly.DateTime.getDate(this.min) : undefined, max: this.max ? isoly.DateTime.getDate(this.max) : undefined, onSmoothlyValueChange: e => {
                 this.date = e.detail;
                 e.stopPropagation();
             }, onSmoothlyDateSet: e => {
                 this.open = false;
                 e.stopPropagation();
-            } }, h("div", { key: 'f8b4da09f4e35f8e15a1947ce2925d20a2bffca5', slot: "year-label" }, h("slot", { key: 'e2eb5db558c1d6065a4eb335e0b28b14643e75d9', name: "year-label" })), h("div", { key: '9b03608816d7c7c1f16314f694d540587b142e92', slot: "month-label" }, h("slot", { key: 'c7c67e09c8a4cd5171bc6d3cea431ac6d41e06de', name: "month-label" })))))));
+            } }, h("div", { key: 'bd29e39875d5afe6acaaca8351156ed2c9784b50', slot: "year-label" }, h("slot", { key: '47b5e7d5621164f66ee939cda905e2d8cc8595ba', name: "year-label" })), h("div", { key: 'f65988215e183bfae36378932401dfb656e1acba', slot: "month-label" }, h("slot", { key: 'f9bfa7c085e9de6c255b5782595d41f3242e8e90', name: "month-label" })))))));
     }
     static get is() { return "smoothly-input-date-time"; }
     static get encapsulation() { return "scoped"; }

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

@@ -6,14 +6,14 @@ export class SmoothlyInputDemo {
         this.alphanumeric = "!@##";
     }
     render() {
-        return (h(Host, { key: '6b76ad9238bac8081314e4837ebd98307de38dad' }, h("smoothly-input-demo-standard", { key: 'f01eea6d5242a634b41ad706f4e071e5d18ab0d0' }), h("div", { key: '19c7dfa3c020b0367552a7254eabe5914895df3d', class: "inputs" }, h("h2", { key: 'bc28b9077ccf104566263415792fcc17adaabf48' }, "Calendar"), h("smoothly-input-date", { key: '927f509aeea74a8c71192de2da1e9a94cac8ba25', name: "some-date" }, "Calendar"), h("smoothly-input-date-time", { key: '51dfd1f872fc354689d6b50cb09b50af29397d92', name: "someDateTime" }, "DateTime"), h("h2", { key: 'd6c4206b9cd37968ddb31a729421426b8155a684' }, "Date Range"), h("smoothly-input-date-range", { key: '0a0b797d687900af6153056f1aa2e6b036977e8f', name: "testing", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-01", max: "2025-01-31" }), h("smoothly-input-date-range", { key: '692a39e6f84cb8fef83b6f5e45669d39212f40ee', name: "testing", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2024-12-30" }, h("smoothly-input-reset", { key: '31c69e1203027ef28a57ff0f9444aa6ea008d596', slot: "end", size: "icon" })), h("smoothly-input-date-range", { key: 'c0f0c89f1651ec73d40bc4b90b3ad420c11b175d', looks: "grid", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
+        return (h(Host, { key: 'f391bd78c0251dabd6f1ff36b039dbb88dd6f36b' }, h("smoothly-input-demo-standard", { key: '6ec0721055230720b20f5e7d4ead62c430a57caa' }), h("div", { key: '5fc44c0c8fdadf263692766ce0ecdbe8e8facd6b', class: "inputs" }, h("h2", { key: '5c0b67d96c5c5e9ec56cf4cd7135cb844c3034e0' }, "Calendar"), h("smoothly-input-date", { key: '7110f32cb9d5c3451595a70b08232848c9d4b465', name: "some-date" }, "Calendar"), h("smoothly-input-date-time", { key: '840b983439402d95ddc6ed9ea03d1edc82d1bbbf', name: "someDateTime" }, "DateTime"), h("h2", { key: 'd5db1f5c8ae18f67bc0cdb61273043f647675a89' }, "Date Range"), h("smoothly-input-date-range", { key: '2b6a94b1f56c5eec888ec19ac95af52255caf1b4', name: "testing", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-01", max: "2025-01-31" }), h("smoothly-input-date-range", { key: '8e86b0a98a3abd79fdf625aed83dfb278fb3470b', name: "testing", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2024-12-30" }, h("smoothly-input-reset", { key: 'ac33be124dcf125eeae6f56c8fcf77dee2e9e09b', slot: "end", size: "icon" })), h("smoothly-input-date-range", { key: 'ddff97927d04e2ccec654cbe9687889e2ac915e6', looks: "grid", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
                 "--smoothly-input-border-radius": "0.5rem",
-            } }, h("smoothly-input-clear", { key: '71919ae4a599a69a4d22b64a0df7cf14fbb90fb1', slot: "end", size: "icon" })), h("h2", { key: '876ef70c63a70873047b2248ea9f6d4213f81f19' }, "Date"), h("smoothly-input-date", { key: '1f8ca07a67bafed4f51eae08e17d0b4d7bc8db42' }, "Date"), h("smoothly-input-date", { key: '49455625eb71c6f7d6d1b690aedcd42a3d79a67b', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), h("smoothly-input-date", { key: '136f7e38566b2542b9961124eb688da89a229d0f', value: "2021-10-28" }, "Date", h("smoothly-input-reset", { key: '74300b814beda57a74c4b22375b4c2c77fc3ef85', slot: "end", size: "icon" })), h("smoothly-input-date", { key: 'a95b8bd4c1de2703992ce072047013e9a30f458d', value: "2021-10-28" }, "Date", h("smoothly-input-clear", { key: '279e6b6abcc5cb81e59338dcc27508f1f3d9ba11', slot: "end", size: "icon" })), h("h2", { key: '0f0d51fe5f32942c087c9e7a8773c7654d205a58' }, "Select"), h("div", { key: '0b8402098b70e7faa9d2e4764c5925b7a828d0a0', class: "select-div" }, h("smoothly-input-select", { key: '961ac8725d3405ba3f3765cfe5a0878d6fe7a071', name: "select-dessert", looks: "border" }, h("label", { key: '7bf194639e6ee9ff96b62a15ed9e00f88621b3b7', slot: "label" }, "Select with clear button"), h("smoothly-item", { key: 'b1bc6e49f1cc78d8e289f89c8604f40edfda62aa', value: "1" }, "Ice cream"), h("smoothly-item", { key: '29b0128fdaf49a260d619b830736f6d35614114b', value: "2" }, "Sponge cake"), h("smoothly-item", { key: '91d62568b8f072b4d00f58315b0553fb6edafbe7', value: "3", disabled: true }, "Disabled Item"), h("smoothly-item", { key: '0b058b8d63dd1e13551274ec665ccb686ef6be07', value: "4" }, "Cookie"), h("smoothly-item", { key: '72d8ab4c88bd951e9b49bb149074231b71052b85', value: "5" }, "Croissant"), h("smoothly-item", { key: '8edd5911789eb1263b327f61c620dfbe609e6b24', value: "6" }, "Chocolate fondue"), h("smoothly-input-clear", { key: 'f220a43c7476375dfbfbefa7cdb167fac3ef0b41', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '22ce7d332e32a112d9fe82927687c2f4ebe2e536', multiple: true, name: "select-dessert-multiple", looks: "border" }, h("label", { key: 'e5e50901992e8f08a703cafb997a9684507cfd78', slot: "label" }, "Select multiple with reset button"), h("smoothly-item", { key: '4fa5eb62bacee098d016122c0a669db50dc82f26', value: "ice cream" }, "Ice cream"), h("smoothly-item", { key: '8298d237826158bb5b21dd34c2844b745175e804', value: "sponge cake" }, "Sponge cake"), h("smoothly-item", { key: '5d5a5dd8ca97227d2ffe3cfcf6ad2e538a4d41f6', selected: true, value: "cookie" }, "Cookie"), h("smoothly-item", { key: '9b9f7784c4ed671d64a958b4723344f600ac50f0', value: "croissant" }, "Croissant"), h("smoothly-item", { key: 'd12a6181d71bb6525009cee933871861c076335e', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), h("smoothly-input-reset", { key: 'f41010be4b6b0f872b7322992720ce208a56d32b', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '2a39d303bafa529d36a86326e419e2df9c1d9f8e', name: "spirit-animals", looks: "border", mutable: true }, h("label", { key: '11814867e9393040169f40ba26cdb139b175e3ca', slot: "label" }, "Select or add new options"), h("smoothly-item", { key: '971b0682de76f47bafbab665a577f7b908f2c1ae', value: "manatee" }, "Manatee"), h("smoothly-item", { key: '10f6203ce57f262f73e22a76cd8da6c051912b40', selected: true, value: "cthulu" }, "Cthulu")), h("smoothly-input-select", { key: '7cf1347aaf5443c4a131e8524a0a2d2e56a2a449', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: '4aa469f9a2181273191b157a83c731acf8d8d0e2', value: "folder", selected: true }, h("smoothly-icon", { key: '0b842c2b5fbce95c5e10ea142479c2cab4c30a59', size: "small", name: "folder-outline" })), h("smoothly-item", { key: 'eaf8e46883d3fc6c8f2e6d10de8505c4431d386f', value: "camera" }, h("smoothly-icon", { key: 'c7d8a64c45ecc10fac807228eda7ea3d0e04bf1a', size: "small", name: "camera-outline" }))), h("smoothly-input-select", { key: '5885ee3fba0c90739172588b81a3986d0b0ffa22', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: 'b7bc9954f3626c31107ab0396f93ce144c77076d', slot: "label" }, "Alphabet ordered select"), Array.from({ length: 26 })
+            } }, h("smoothly-input-clear", { key: 'f5f998abd40b9403ccebafe27ba14493fa8f19ca', slot: "end", size: "icon" })), h("h2", { key: '7d173c425b81aa7deb4cd89edb3c89a2ff528a3b' }, "Date"), h("smoothly-input-date", { key: '0b811e8dd45367c464a7f6edb1b4a33b627adeba' }, "Date"), h("smoothly-input-date", { key: 'bf8581823bc434be491ebc5fafdba71061a14101', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), h("smoothly-input-date", { key: '88e7ffea5182215229db30af9afe6f4e7ce57146', value: "2021-10-28" }, "Date", h("smoothly-input-reset", { key: '172b1c34e6cd4b67f78625b75ff471c303fb12d4', slot: "end", size: "icon" })), h("smoothly-input-date", { key: '30968f8dcc79a0321afca68cf79e2ea31b8735fc', value: "2021-10-28" }, "Date", h("smoothly-input-clear", { key: '0bbdf2875ce1621de5ed65128569f2e20846f85a', slot: "end", size: "icon" })), h("h2", { key: 'a9eb917e3d429438514b7ad091b5cd84fd872889' }, "Select"), h("div", { key: 'ff41a3d04e75f1d6509c6c986dc88e4becad3721', class: "select-div" }, h("smoothly-input-select", { key: 'e2dd73ead13a60e47494d3cd025c34a805f5e4ee', name: "select-dessert", looks: "border" }, h("label", { key: '75e7c9ff86ce84ac3eda4bb40af16d6e9b16e434', slot: "label" }, "Select with clear button"), h("smoothly-item", { key: '577f76315b49efcef1f260362b93ff6112004b47', value: "1" }, "Ice cream"), h("smoothly-item", { key: 'ed71f3d6e83f8fa10811c952bb1ab5f7b9baa97b', value: "2" }, "Sponge cake"), h("smoothly-item", { key: 'e4885a3b9170974878d5c9882d0239fe944c11f2', value: "3", disabled: true }, "Disabled Item"), h("smoothly-item", { key: '8bcc76448c631fbf793f91947af4c0e17c60a858', value: "4" }, "Cookie"), h("smoothly-item", { key: 'a72d1e10c4b69da2584f2e15d4215c08c5f92fdb', value: "5" }, "Croissant"), h("smoothly-item", { key: '6f5653a3a0e7caa778b40eccbc4069f324fd25cb', value: "6" }, "Chocolate fondue"), h("smoothly-input-clear", { key: 'ddc17cfc7f7c3146518ad4827f8d674b165db328', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '0404ede6b67ed2840409c725d0d2863f0d306c30', multiple: true, name: "select-dessert-multiple", looks: "border" }, h("label", { key: '16b514b69567d48eb36e14812c700e8658e95ea0', slot: "label" }, "Select multiple with reset button"), h("smoothly-item", { key: '6e2dbeee5a47c7f8c2e1a1c6c4d079ff31f200e4', value: "ice cream" }, "Ice cream"), h("smoothly-item", { key: '915a599dcbe877f1513ead46fda81150c7781a03', value: "sponge cake" }, "Sponge cake"), h("smoothly-item", { key: '2664f2bcd62e4f27fb49f46652fa9e69516c8e57', selected: true, value: "cookie" }, "Cookie"), h("smoothly-item", { key: 'd1cf93f393ecff22c4ac6fcc007ab6c09a534b8e', value: "croissant" }, "Croissant"), h("smoothly-item", { key: '0b7dd82efb700709a66ced995a3dc4d18be30ff6', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), h("smoothly-input-reset", { key: '9866a5e80c446f5b4ca2c2ff8f711ab039912b87', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '775756976b9654150ee7670be56f7b44bacc09a2', name: "spirit-animals", looks: "border", mutable: true }, h("label", { key: '2543c280d67278c8215a0f1c40060d1a650551c9', slot: "label" }, "Select or add new options"), h("smoothly-item", { key: '99670894167dd333c93ddeb166ce6d6677bfa7db', value: "manatee" }, "Manatee"), h("smoothly-item", { key: '8523895743bb77d41829b97a82b34b1b8c13de85', selected: true, value: "cthulu" }, "Cthulu")), h("smoothly-input-select", { key: '2b77ced15c1efccc0c963ea0190a108aaf7ff254', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: 'ec88105457f95ec7582b95a0cd6174a96fa4691f', value: "folder", selected: true }, h("smoothly-icon", { key: 'a8420b94eedd11f7a27bb589ea15e0fe8ad28eed', size: "small", name: "folder-outline" })), h("smoothly-item", { key: 'a0a2524ccf06e777498a0612bfc755fbdb3c26da', value: "camera" }, h("smoothly-icon", { key: 'd6a08b892a58f56187b5921cff2b55646a2fd1fb', size: "small", name: "camera-outline" }))), h("smoothly-input-select", { key: 'fba2c8857f72aa30927a76faa5005a8f629f7432', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: 'c469cb86e393ca8567e4f306074f6b1822da1f4c', slot: "label" }, "Alphabet ordered select"), Array.from({ length: 26 })
             .map((_, i) => String.fromCharCode(i + 65))
-            .map(char => (h("smoothly-item", { value: char, selected: char == "H" }, char)))), h("smoothly-input-select", { key: 'c4aa7cffaaf167f14aa0c64d892884cbde68e5be', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: '545276bfb714dfd58c6154782ee8ae211b95cec6', slot: "label" }, "Month multiple select"), h("smoothly-item", { key: '7e65f5dc15cae37de91517e7faf6ac6e5399bce9', value: "1" }, "January"), h("smoothly-item", { key: 'c30435464dc59d081fcc3027a0559cc2ed651263', value: "2" }, "February"), h("smoothly-item", { key: '2369d8e036dd55c75e7c38650a2cd84477302b26', value: "3" }, "March"), h("smoothly-item", { key: '70deb72243f26d8e44aefd45ad8934616162bbcb', value: "4" }, "April"), h("smoothly-item", { key: '3746936d4ff064b7c4c102e1b12ab0fc9e032063', value: "5" }, "May"), h("smoothly-item", { key: '7070e74bd89c6f8257617c69e9f86898b7276b6d', value: "6" }, "June"), h("smoothly-item", { key: '6e7ce9026ab57b2504ba7cb66c6581a29cd3c719', value: "7" }, "July"), h("smoothly-item", { key: 'bd26f3aed9824a9badfe1c76e284d231bdcef74d', value: "8" }, "August"), h("smoothly-item", { key: 'fb68e06412265f8abd9d48b5e632b9703c4ac928', value: "9" }, "September"), h("smoothly-item", { key: '8d665cb2ff2f3485fe78aba07b8f9de7a911251e', value: "10" }, "October"), h("smoothly-item", { key: '2daee790fe6fb3b1ba06189a8a5b70af75f78a6a', value: "11" }, "November"), h("smoothly-item", { key: '51c4c70fd8256d5aa2a609c3560f5a596d545e8f', value: "12" }, "December"))), h("h2", { key: 'fb225955c7e4944055c2f5dbabce570a1a471aae' }, "Duration"), h("smoothly-input", { key: 'f44446650cd88ad8d99ded00c6bc6ab5449cbd92', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => (this.duration = e.detail.duration) }, "Duration"), h("smoothly-input", { key: '11f884760d1597ea12a14a6cafa9038a6588f725', name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
+            .map(char => (h("smoothly-item", { value: char, selected: char == "H" }, char)))), h("smoothly-input-select", { key: 'e3bf61ef393d38a27d457c34dd0c6e1725581cd7', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: '6f378b22b5f5e65b7a806ae68675131d6e024d00', slot: "label" }, "Month multiple select"), h("smoothly-item", { key: '7d1f5110fe52b497edd86a5e4397914cd1636eb3', value: "1" }, "January"), h("smoothly-item", { key: 'a5217ec2aa7daf0992a53392724d3de162f1b7c3', value: "2" }, "February"), h("smoothly-item", { key: 'e97d698810ba4cc74fbf9235fb1f3c8fd2c3c3d4', value: "3" }, "March"), h("smoothly-item", { key: 'b379faa9da4b684ba555c949c6b6ddccc4c116b8', value: "4" }, "April"), h("smoothly-item", { key: '97de95e971a0c07e462aea3e935536a59df7e89a', value: "5" }, "May"), h("smoothly-item", { key: '684e39a859bfd80078bee12230cbaebdc2ed6fb9', value: "6" }, "June"), h("smoothly-item", { key: '84ceedba22aaed9a7c9dc866131deb3da7cb637f', value: "7" }, "July"), h("smoothly-item", { key: '1c310541498a90e74471932e7d5236466c9b61a5', value: "8" }, "August"), h("smoothly-item", { key: '5779cad53606a81b4b8741748f7dff06f4c1d53b', value: "9" }, "September"), h("smoothly-item", { key: '4f77e5f150de94e40fa44ad9a18c62e946583b1e', value: "10" }, "October"), h("smoothly-item", { key: '0721ac6d8ad7b08bbf3f37e6000ae21d39cff10a', value: "11" }, "November"), h("smoothly-item", { key: '786168eff22dd2df98369268f734f3382e5f0144', value: "12" }, "December"))), h("h2", { key: 'a0fb40b3246b9810fc8c628947e34e8e7861edc8' }, "Duration"), h("smoothly-input", { key: '6e8dc2d9bb81905f9b361e3d86fc5bde907d9a08', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => (this.duration = e.detail.duration) }, "Duration"), h("smoothly-input", { key: '9e7b6a937a25da6e1b54e3936a349899a82f444d', name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
                 const duration = e.detail.duration;
                 this.duration = duration;
-            } }, "Duration"), h("h2", { key: '4c7492e9714e8fb6ed7cf3d9ed4ea96adb985130' }, "Integer with Min/Max"), h("smoothly-input", { key: 'b20b1b15b55f7b70f6242516efe1582b209a26d4', name: "days", type: "integer", min: 0, max: 365 }, "Days per year (0-365)"), h("smoothly-input", { key: 'c906c1f3899f68a55f8be01c02eec8a1555475a0', name: "hour", type: "integer", min: 0, max: 23 }, "Hours per day (0-23)"), h("smoothly-input", { key: '86ee548b052dde32fcfdc56bf3fc87b3523a4af8', name: "minute", type: "integer", min: 0, max: 59 }, "Minutes per hour (0-59)"), h("smoothly-input", { key: '66e657e487efa82de5f1fc0263b43019bdac2cbd', name: "minute", type: "integer", min: 18, max: 120 }, "Age (18-120)"), h("h2", { key: 'cda6e85e77f12cfd3ef7726b6441044708f8fdf6' }, "Invalid text with warning icon and tooltip"), h("smoothly-input", { key: 'c46bdd16248a0abd4719c60b2214e3d0a76be91f', name: "alphanumeric", invalid: !/^[a-zA-Z0-9]+$/.test(this.alphanumeric), errorMessage: "Only alphanumeric allowed", value: this.alphanumeric, onSmoothlyInput: e => (this.alphanumeric = e.detail.alphanumeric) }, "Alphanumeric"), h("h2", { key: '8b9ac9caaee89b0f0311b3b07cff22a642dd0e91' }, "Identifiers"), h("smoothly-input", { key: 'a86d2727f6403d4f0abf68523b64cf87d41e920e', type: "identifier-code" }, "Code"), h("smoothly-input", { key: '0c1074b72c4f43c4154384d40b3d57544a368b5c', type: "identifier-attribute" }, "Attribute"), h("smoothly-input", { key: '8daee7413012f41575269d5d1544bd55163a6224', type: "identifier-snake" }, "Snake"), h("smoothly-input", { key: '853d8e4ca927c3fb4795a8c22a074ac70e3221cb', type: "identifier-pascal" }, "Pascal"), h("smoothly-input", { key: '47d002602d7b06b9200425dea97832e2f2af166e', type: "identifier-camel" }, "Camel"), h("h2", { key: '90d5bc2db3b3a24e7811f235150be80dda8b99e1' }, "Input Alternatives"), h("smoothly-input", { key: '45f7215c2e1a24efe1e9d57a17cabc61baeb0111', type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, h("smoothly-icon", { key: '52329d58edb2c7339ca9cfe141caeb0fc293d0bb', name: "checkmark-circle", slot: "start" }), "First Name"), h("smoothly-input", { key: '38bab99ffee2515d50a6ffe8ccd4e84e3dc9f886', type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", h("smoothly-icon", { key: 'e9f274e1ef1f3c3b8bfe745ca96d5869b3dab037', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: '6fd7aa7c4d8efc4c4c4df1b59795242841591688', type: "text", name: "name.first", placeholder: "Smith", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", h("smoothly-icon", { key: '89710a2b183a786dc6a3d4b8d74f16e112ff8f5e', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: '2a89776d8fb9d51d67349f98dcf8664bcc998a57', placeholder: "test" }), h("smoothly-input-submit", { key: '5556f4dfce7aa8ccaa7c2c31854bdc1834309b34', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), h("h4", { key: 'fbecb4027ca619c48dbaf4959a7a37e67727af67' }, "Smoothly checkboxes"), h("div", { key: '32412e16e082f5a1ccd1baa209058d7cdd9a4e91', class: "checkbox-group" }, h("smoothly-input-checkbox", { key: '9abd96ea1d8a91bbb24e9ce02e72a7266df75799', disabled: true, name: "first-checkbox" }, h("smoothly-icon", { key: '1223e51c9b85cff662d82d510094dee740c2ee77', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), h("smoothly-input-checkbox", { key: '31bf44e0df0221c42adf3fe58463cff04e8cc4bc', name: "second-checkbox", checked: true }, h("smoothly-icon", { key: 'f11474c5b4f4ac1267aa3497bf234d4cdc50f130', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", h("smoothly-input-clear", { key: '9d54145cfe1114a9cabc02ed57535da3e11f375b', size: "icon", slot: "end" })), h("smoothly-input-checkbox", { key: 'b638676c431660d910eed5792faa0cfc87500412', name: "third-checkbox" }, "3rd")), h("h4", { key: '22a945c153157b3896913bac81f8c4314b8451d6' }, "Smoothly Radio Buttons"), h("smoothly-input-radio", { key: '35ed33aa765ba3fb0817e039fcf90fcebf3cd6c2', clearable: true, name: "radioFirstInput" }, h("smoothly-icon", { key: 'be8659761a6623b0e7fa12a0d0fa535edaaedcc2', name: "checkmark-circle", slot: "start" }), h("label", { key: 'a0e5f61e0a27a4f4dca21298671aec752a1d407c', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: 'd1a85abe8267d8970d5ef498abe8dcf5f76d6a84', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: 'af7eca3580a8dfbc8fbd918a0bef5d3ca5c9ce80', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: 'a0b23474026cb3bf08b5b8cdc709db8e3a3afcb6', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '8f6f0c21cfdf282fb6768239ae410197bbfd3a14', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: 'b0838be43e328f4cb185f61ac8b51ef94db28a1b', name: "radioSecondInput" }, h("label", { key: 'f8d216209a405c137fc5b806feb041806844eace', slot: "label" }, "Not clearable"), h("smoothly-input-radio-item", { key: '6930abf2cfe2911c03446c3ab08e7be7a3a87728', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '54ce3c3bff3fd64d0aa19ca134fb375bf9f34ddc', value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: 'fc864e57e7cab32ca10c26416f60cdce45c2fac5', value: "third" }, "Label 3"), h("smoothly-input-radio-item", { key: '130e9a9d0c0357cdcbcd0074ecb74ccaa9306c01', value: "fourth" }, "Label 4"), h("smoothly-input-radio-item", { key: 'e7016eea8f86a0639de1b062ad4a7d81750ee6cd', value: "fifth" }, "Label 5"), h("smoothly-input-radio-item", { key: '8a52b7c1c44cffb63cd877eda812806caae059a8', value: "sixth" }, "Label 6")), h("smoothly-input-range-demo", { key: 'd0b867c8b63f616ae7a1eacba91d08df641f0db2' }), h("smoothly-input-color-demo", { key: 'c3dc25177603e7c31df0a00c1a624e87532233e0' }), h("smoothly-input-price-demo", { key: '0ca0b6ae79ecf4db86c5597e8f0ac84e0f57094a' }), h("smoothly-back-to-top", { key: 'ea8d2cc631f98ec5f49d56f7ad4fe3596578090b' }))));
+            } }, "Duration"), h("h2", { key: '31b7b747b3aaaf845ad1aed49ab45ba9523a2fc3' }, "Integer with Min/Max"), h("smoothly-input", { key: 'c81811ff2d335ea60df070a960524ff16ede8489', name: "days", type: "integer", min: 0, max: 365 }, "Days per year (0-365)"), h("smoothly-input", { key: '86aeb498c9731e91de63412a11a79f29292adcd0', name: "hour", type: "integer", min: 0, max: 23 }, "Hours per day (0-23)"), h("smoothly-input", { key: '4802f8b96a9aab4828c3327de3eb2b531edcddfd', name: "minute", type: "integer", min: 0, max: 59 }, "Minutes per hour (0-59)"), h("smoothly-input", { key: '3737eab0df9fd0706175be8a971593ab3bb9343d', name: "minute", type: "integer", min: 18, max: 120 }, "Age (18-120)"), h("h2", { key: '6b2f5d91faf5bf0d3bc074e859d88445a80b5667' }, "Invalid text with warning icon and tooltip"), h("smoothly-input", { key: '95410c2f81a47ca003616bd40d89f7885b634f37', name: "alphanumeric", invalid: !/^[a-zA-Z0-9]+$/.test(this.alphanumeric), errorMessage: "Only alphanumeric allowed", value: this.alphanumeric, onSmoothlyInput: e => (this.alphanumeric = e.detail.alphanumeric) }, "Alphanumeric"), h("h2", { key: 'ad449776079245f9531bd8ce3f51efe3411e5e7e' }, "Identifiers"), h("smoothly-input", { key: 'b3325535a6ac61fd0476d6a075693c7e2fca5ef6', type: "identifier-code" }, "Code"), h("smoothly-input", { key: '28e66d1f923f9807252c3cc72fe4a788240aba1d', type: "identifier-attribute" }, "Attribute"), h("smoothly-input", { key: '491387109239d78a481aa0a4c9058a2cdb2a4c65', type: "identifier-snake" }, "Snake"), h("smoothly-input", { key: '35fce4f6c948209470cd2ad28f8d9621ee6b5321', type: "identifier-pascal" }, "Pascal"), h("smoothly-input", { key: 'dd534f14f8e8943f7ddef74992dd46c318347ae8', type: "identifier-camel" }, "Camel"), h("h2", { key: '38685f41f8810a5795834ca27905b2f2afc27eac' }, "Input Alternatives"), h("smoothly-input", { key: '59043422556d04cc56c186714e91dc64f0816ed7', type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, h("smoothly-icon", { key: '213e727678e743ec88cdd54a979ce8935c541340', name: "checkmark-circle", slot: "start" }), "First Name"), h("smoothly-input", { key: '51f32ad9c0b4c9b7a8204bc63c441f8fa167b611', type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", h("smoothly-icon", { key: '46aa75ade3df2db1b151e01096a197f2e2fd8af9', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: 'b1293dfab17cf01887cbf5841db05e04dd3a1464', type: "text", name: "name.first", placeholder: "Smith", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", h("smoothly-icon", { key: 'b284306b4866a605add8c5ef598dc40f1282ec43', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: '24ec4d180f050b371e9af2f002b7116a99b88cf4', placeholder: "test" }), h("smoothly-input-submit", { key: 'd55d4fff97828924002492d9016bd73eef46eba7', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), h("h4", { key: 'f45625069ac93259c0631c1137df1f0275ac0a57' }, "Smoothly checkboxes"), h("div", { key: '0b987f4c368c8d50dbb6f49055ba0cff33835427', class: "checkbox-group" }, h("smoothly-input-checkbox", { key: '315c00eb4677344a3877d819a6a90882a97da7b9', disabled: true, name: "first-checkbox" }, h("smoothly-icon", { key: '24b845e4451277aac8e6c945aaa7536e481b523e', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), h("smoothly-input-checkbox", { key: 'c7e4398c49e7299b6b235b5ff5572d7f59998c5c', name: "second-checkbox", checked: true }, h("smoothly-icon", { key: '3c59195cd3e5de2a5ca0db1ef7e67fdac4b20773', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", h("smoothly-input-clear", { key: 'b353f63610a38744c63f5a98827a8be376f24689', size: "icon", slot: "end" })), h("smoothly-input-checkbox", { key: '594f7ec3d3f3be405aaf885621eb718e3fbf0a35', name: "third-checkbox" }, "3rd")), h("h4", { key: 'cf0b6447f28184077a82ebd6fa338531484442fb' }, "Smoothly Radio Buttons"), h("smoothly-input-radio", { key: '2dd5ceb1a1ff1b080616ec88e9480c53750ded4c', clearable: true, name: "radioFirstInput" }, h("smoothly-icon", { key: '79cf63ff3aac8acaa1511e77fe27d993270913c3', name: "checkmark-circle", slot: "start" }), h("label", { key: 'b794b9b61a60fd655a906db0ff400785d8dfb970', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: '7344467bc0580b1efd378925eb4af010967a0276', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: 'bd8afddd7a86f9853f3c01b1121c9164140a8418', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: 'eac077c9f5c7c480b00806bc59dd7bc0e5747399', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: 'e87f205103c7dd86c240a63d6f944c5c8775f693', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: 'f4fa9eda695df9d7dcc4d3f68fe060a781cc20d6', name: "radioSecondInput" }, h("label", { key: 'd0a413214b688e493d73951747eba6bba204d85e', slot: "label" }, "Not clearable"), h("smoothly-input-radio-item", { key: 'ddb690ff8501c50743bc0d0e11e1c26ce5c5bb23', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: 'bb5db85ec9f091bb62dd89c3ad0c8f749b85db8f', value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '0a16abf56b4f3f77407d64fe2969b512b8444582', value: "third" }, "Label 3"), h("smoothly-input-radio-item", { key: 'e67deaa29b84a99dff1332357144fc7e9055400f', value: "fourth" }, "Label 4"), h("smoothly-input-radio-item", { key: '96e014e32102387364e1bfd5bf2288c3b1c028db', value: "fifth" }, "Label 5"), h("smoothly-input-radio-item", { key: '73cc1861839ecfe97fa494dd5544780a794abb5b', value: "sixth" }, "Label 6")), h("smoothly-input-range-demo", { key: '70d2d8f0df0397e64de5a5406431a26819438d21' }), h("smoothly-input-color-demo", { key: '2f34171560df93381803026b34d678474403bb7a' }), h("smoothly-input-price-demo", { key: '10fa39ce18a471a2ca132cc95a68ece4d04f78b9' }), h("smoothly-back-to-top", { key: '646557d1c7a1ab4d661562591f77c4107527af08' }))));
     }
     static get is() { return "smoothly-input-demo"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/demo/price/index.js

@@ -6,7 +6,7 @@ export class SmoothlyInputPriceDemo {
         this.currency = "USD";
     }
     render() {
-        return (h(Host, { key: '79d2b4b0522cd90b751e7da7f2630289a204411e' }, h("h2", { key: '4a50850a8cea3d8ac1535e3e7ba247986ead7bdb' }, "State demo on smoothly-input"), h("p", { key: '1d60b9f3086fe2d6aef0406d4e88aec87b4cd9f9' }, "This demo/test the internal state of the smoothly-input component."), h("p", { key: '0e8c90bc64628754392262b590aef28a46c8113f' }, "The currency of the price should update when switching between the currencies."), h("smoothly-input-radio", { key: '485449050be389b7b101328dca5478cf739afaf4', name: "currency", onSmoothlyInput: e => (this.currency = isoly.Currency.is(e.detail.currency) ? e.detail.currency : undefined) }, this.currencies.map(currency => (h("smoothly-input-radio-item", { key: currency, selected: currency == this.currency, value: currency }, currency)))), h("smoothly-input", { key: '9920d32947730f631e72072bb22b4f82d940cd73', type: "price", currency: this.currency }, "price")));
+        return (h(Host, { key: 'edcdc1ceec7f4019e08498066b88c74d9579f4aa' }, h("h2", { key: '46d387d433f70510f8520cd48d6b097c18df46a9' }, "State demo on smoothly-input"), h("p", { key: '782e65c8fb7c8e5b17d1df4590241db5d346f33a' }, "This demo/test the internal state of the smoothly-input component."), h("p", { key: '630705dfad5ac3e9990f78f6de3452553e501854' }, "The currency of the price should update when switching between the currencies."), h("smoothly-input-radio", { key: 'ad933b980ccd259935b5faf994565c6937ddb1fd', name: "currency", onSmoothlyInput: e => (this.currency = isoly.Currency.is(e.detail.currency) ? e.detail.currency : undefined) }, this.currencies.map(currency => (h("smoothly-input-radio-item", { key: currency, selected: currency == this.currency, value: currency }, currency)))), h("smoothly-input", { key: '714f78af7e19b0651eaebb5d4669d17b5cdc8d70', type: "price", currency: this.currency }, "price")));
     }
     static get is() { return "smoothly-input-price-demo"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/demo/standard/index.js

@@ -21,7 +21,7 @@ export class SmoothlyInputDemoStandard {
     }
     render() {
         const placeholder = this.options.placeholder ? "placeholder" : undefined;
-        return (h(Host, { key: '14f3997d5443f2e76fd46941eba1d63d3154b97c', class: { vertical: !!this.options.vertical } }, h("div", { key: 'd546f2bcbdf79cf259c0643f2d1c7b752a32d855', class: "description" }, h("h2", { key: '5eba4de9ad8e9d25a74b9c37e74dd96d8945f754' }, "Input Standard"), h("p", { key: '711ee8f5c5fb7ad1d59bdcb254d16b7adf778766' }, "Height of input should be ", h("code", { key: '3685a00cb89ee68f0086edbb9017ae8aa9cead62' }, "3rem"), " including border. This is should result in a 48 pixel height at 100% zoom, assuming a root font-size of 16 pixels."), h("smoothly-form", { key: '27dfad971615ab7bc9ffd0f44be0165e67dd62d9', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, h("smoothly-input-select", { key: 'aef29635c1ec10565093e49a5acbabb93cc33efe', name: "looks" }, h("span", { key: 'c6489fe16be3e9e6790eec65fa6dd05f1dcf4093', slot: "label" }, "Looks"), Looks.values.map(l => (h("smoothly-item", { value: l }, l)))), h("smoothly-input-checkbox", { key: '47648eb64993a231fcd229b60dc7d96d91868c4f', name: "readonly" }, "Readonly"), h("smoothly-input-select", { key: '382c46535ac9a515cac68c02ffb875d25db36d6a', name: "color" }, h("span", { key: '5b81d2cbbf12c6b7a0edb935cccc1e168c3f288e', slot: "label" }, "Color"), Color.values.map(c => (h("smoothly-item", { value: c }, h("span", { color: c }, c)))), h("smoothly-input-clear", { key: '52f8eefbd4340e6a29a56c8f0cd0b74e20a100f6', slot: "end" })), h("smoothly-input-checkbox", { key: '6a9cefbb724d4505f6071177d5cac39e6bc9132d', name: "vertical" }, "Vertical Layout"), h("smoothly-input-checkbox", { key: '19ee4c2294b35122fb8cfc635afd521d14a52f86', name: "showLabel", checked: true }, "Show Label"), h("smoothly-input-checkbox", { key: '7f7eb514020c2a3fbcb4aa2ebd26d54db17f1e2b', name: "placeholder" }, "Placeholder"), h("smoothly-input-checkbox", { key: '1b46418e59527440485f41d08ec7fbd1d7eb98e0', name: "invalid" }, "Invalid"), h("smoothly-input", { key: 'ab089629619a331cf101cf1b0fd8d99591625162', name: "errorMessage", value: "This is not a valid value" }, "Error Message"), h("smoothly-input-range", { key: '8049224f96f3f89c0524c1add0c84fbf39f1b7cc', label: "Border Radius (rem)", name: "borderRadius", min: 0, max: 2, step: 0.25 }))), h("div", { key: 'cad9cb051bf5c2d831c1144861f0d321dabc89c8', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, h("div", { key: '531cf00988eb45c201f98bf0068cde80271f4d76', class: "width" }, "100%"), h("div", { key: '9ffb19f9a5cbe3cf2a1abedba6bdeb4e436ede27', class: "left-padding" }, "0.5rem - left padding"), h("smoothly-input", { key: '0aa816550e207f2486b36938e09b300a07d514eb', name: "text", looks: this.options.looks, placeholder: placeholder, invalid: this.options.invalid, errorMessage: this.options.errorMessage, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: 'a17dba081f48d638910ab56877c94d3a29dd1a03' }, "Text"), h("smoothly-input-clear", { key: 'fb8c295bd08bcabd77d6892a255d3e62fe90da22', slot: "end" })), h("div", { key: 'd138de3fe84ad220c32913e5f3088ba4789b32dd', class: "height" }), h("smoothly-input-select", { key: '1cb41795811d6dae4f918d60352e4a3069e1e0bf', name: "month", looks: this.options.looks, placeholder: placeholder, invalid: this.options.invalid, errorMessage: this.options.errorMessage, readonly: this.options.readonly, color: this.options.color }, this.options.showLabel && h("label", { key: '954f7ab810fafd0e97ba9aae2a8d6cced6287e14', slot: "label" }, "Select"), h("smoothly-item", { key: '3ca96142851f51cb9534225b8e666949d2c21b26', value: "1" }, "January"), h("smoothly-item", { key: '347345a2874ba4d69a12fc6f0ec63e153c45abad', value: "2" }, "February"), h("smoothly-item", { key: '47ae3f0baa1c43fd3822b0211e39028e5a2bd913', value: "3" }, "March"), h("smoothly-item", { key: 'ba9e6f827429953aac90063eaecaa62bc4c827b8', value: "4" }, "April"), h("smoothly-item", { key: '19c5129b5d01e402dd1590442b38c4e391955787', value: "5" }, "May"), h("smoothly-item", { key: 'c098e0163dd1072cceb3cda351e58b8174f29550', value: "6" }, "June"), h("smoothly-item", { key: 'c024c4f46a4842a4166fae8e94982935a94f1c52', value: "7" }, "July"), h("smoothly-item", { key: '4ea99fc760fa7ca2e2a198072f8f97afcee27611', value: "8" }, "August"), h("smoothly-item", { key: 'e1d0fed7a17667950ad1412864b8ac451ed1bce7', value: "9" }, "September"), h("smoothly-item", { key: 'ed048d75a54a0857e1f837e3bdf64135e9cac385', value: "10" }, "October"), h("smoothly-item", { key: '61adb3f944994a3a7de21bbc86af2c597db13afb', value: "11" }, "November"), h("smoothly-item", { key: '50d1ee703328a10c7a24914b4018a880251ca8e1', value: "12" }, "December"), h("smoothly-input-clear", { key: '6d043e427de3b06c96688a5ed9ec81980cc683ad', slot: "end" })), h("div", { key: '9c72f92e10878960773f7e35e941125c18602165', class: "height" }), h("smoothly-input-checkbox", { key: '170fa03ac2b2b687e2adbd3e76c742aee945db49', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, "Check"), h("div", { key: '6032900febc8c4f19eec5de4c836ad789af6c51f', class: "height" }), h("smoothly-input-radio", { key: '8371012b68b5b5ec8142e458ad263a8bbe5c1974', name: "radio", clearable: true, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("label", { key: '3d745c001e8eb4a7e7c111d5633ebe67aa959b1e', slot: "label" }, "Radio"), h("smoothly-input-radio-item", { key: '241b15c2fc477fbf223ce4278fc920f78af4404a', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: 'c1a9b31d82df396edee4b138c91b3cb7554c3dce', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '5ce18fbd44df0a140689fb319a218fcbb4345112', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '1543c4db8d51d2ac474e7fc64ac08148fe686c6f', slot: "end" })), h("div", { key: '9164f57828a874e7ac265525add448b9cef6499f', class: "height" }), h("smoothly-input-file", { key: '998832500189a8048b61c0d088ebf6091936de83', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: 'f7042552073f536c32221a76a0c15c6456d9a651', slot: "label" }, "File"), h("smoothly-input-clear", { key: '0f6aafb859e647da06d3780ff368799dba535d26', slot: "end" })), h("div", { key: '148c9d320a09e57a70d5c3f055a8b8968e37fa98', class: "height" }), h("smoothly-input-range", { key: '7dfb09485f2e8cd990bb99cce68e9330f5588cad', name: "range", label: this.options.showLabel ? "Range" : undefined, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, h("smoothly-input-clear", { key: '55688ff7c249e1448e7c0982ad3600324b8154de', slot: "end" })), h("div", { key: '17118e5f9818d7394bd1d48c8cdecb56027896a3', class: "height" }), h("smoothly-input-color", { key: '74d74bc522829d74ef66d7bcdae1d036d52fdea6', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '739954a57951a1a8a5a43d86dc18ec36ef01122d' }, "Color"), h("smoothly-input-clear", { key: 'c1945bc7985ca512c4676e41ded665b30153e51d', slot: "end" })), h("div", { key: '95dac85925a2456d07c959331a16ccc35856f740', class: "height" }), h("smoothly-input-date", { key: 'c1ce4940545188b1666a2714c3f2ceffc0bda60a', looks: this.options.looks, readonly: this.options.readonly, invalid: this.options.invalid, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: 'c2bae1b862f1d02201d03b6a5ab2acdb1d1cb045' }, "Date"), h("smoothly-input-clear", { key: '7f03d5653485e61c14f0fddcf2fab6d2c6d47499', slot: "end" })), h("div", { key: 'abea3ee074a0bd8a936f8893ecabed881a820e15', class: "height" }), h("smoothly-input-date-time", { key: '4027287369d494864485f48074171903d67a8f6e', looks: this.options.looks, readonly: this.options.readonly, invalid: this.options.invalid, errorMessage: this.options.errorMessage, color: this.options.color, showLabel: this.options.showLabel }, "DateTime", h("smoothly-input-clear", { key: '12c698ba807f45233aea2ff29e527cee700f452e', slot: "end" })), h("div", { key: 'dd08b676e93e76c9105022784d3cbefdfae667c6', class: "height" }), h("smoothly-input-date-range", { key: '927589ec6d706d73b1553da6d6cf03191c688b3c', looks: this.options.looks, readonly: this.options.readonly, invalid: this.options.invalid, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: 'e679284c2b91b9b231071bc6444b73dee31e2bc5' }, "Date Range"), h("smoothly-input-clear", { key: '33d186198e131bfba24b0b1dece79ee3fe36878c', slot: "end" })), h("div", { key: '14c03e80bada19f0635da1a85b7f2cbfadd989ec', class: "height" }), h("div", { key: '3a4fd556ccccfbf566a8c27eb3c74760dffa6893', class: { "guide-lines": true, "show-label": !!this.options.showLabel } }, this.options.showLabel ? "Aligned labels & values" : "Center values"))));
+        return (h(Host, { key: '951d8e936755153c60dfb5e9c4fa714f6c2cfcbb', class: { vertical: !!this.options.vertical } }, h("div", { key: 'af5cd56f01a657adc81a7c1952fc0fa99c983cca', class: "description" }, h("h2", { key: '000ead60500d3ecb23f0925490c470bfa12b1b17' }, "Input Standard"), h("p", { key: 'e8e0ac8ac447a507a8ff84a82910ccfb28eb108b' }, "Height of input should be ", h("code", { key: '3442836222d91b57b578154201b379c01984a44b' }, "3rem"), " including border. This is should result in a 48 pixel height at 100% zoom, assuming a root font-size of 16 pixels."), h("smoothly-form", { key: 'b6c4e839e5a281c96c774a54e2b23907fedab94a', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, h("smoothly-input-select", { key: '052325bf03d817a341eea65d6b5f8937faa9f5a9', name: "looks" }, h("span", { key: '4e9ef448481c3ee611c93a27de4cb8faa6bbdb8b', slot: "label" }, "Looks"), Looks.values.map(l => (h("smoothly-item", { value: l }, l)))), h("smoothly-input-checkbox", { key: 'c7aef46d0c10a1f270d6f4989ff5f28dc54eaa46', name: "readonly" }, "Readonly"), h("smoothly-input-select", { key: '8c66e722864389166198e6dc2ed088054a7b52ae', name: "color" }, h("span", { key: 'c099222e90e71c652685f2e6b7ec3be644fe1128', slot: "label" }, "Color"), Color.values.map(c => (h("smoothly-item", { value: c }, h("span", { color: c }, c)))), h("smoothly-input-clear", { key: '9be13aef6903d2d1278b65c7ef42d44037ba3db2', slot: "end" })), h("smoothly-input-checkbox", { key: 'a6c41ffa70909296a000349ae4b69aac2b68cacb', name: "vertical" }, "Vertical Layout"), h("smoothly-input-checkbox", { key: 'd2220c0c8f405eb2b9f53be947ca125587b4d0eb', name: "showLabel", checked: true }, "Show Label"), h("smoothly-input-checkbox", { key: '155e50f789e3d357ec1dfcecace74599a7807f64', name: "placeholder" }, "Placeholder"), h("smoothly-input-checkbox", { key: '36aad13274e6ef7cdb86c87d2085932653381f37', name: "invalid" }, "Invalid"), h("smoothly-input", { key: '130deb857bd5d3e73d875f34b8ee0d50e1f16039', name: "errorMessage", value: "This is not a valid value" }, "Error Message"), h("smoothly-input-range", { key: 'abac1a46412e0c3ee5f79a43b183ef90d3e435b0', label: "Border Radius (rem)", name: "borderRadius", min: 0, max: 2, step: 0.25 }))), h("div", { key: 'b286d517da6cd031b9c7590e792e75a417440d4f', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, h("div", { key: '0e7c535d8aca6532806ae5f7fea57a22b5d32f1c', class: "width" }, "100%"), h("div", { key: 'a2a835349a7f2dd5cf2fc407ffb6ba43e5ff9bb5', class: "left-padding" }, "0.5rem - left padding"), h("smoothly-input", { key: '2f266438ea51914cfcce08f22139c752e721498e', name: "text", looks: this.options.looks, placeholder: placeholder, invalid: this.options.invalid, errorMessage: this.options.errorMessage, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '96e2acaa65f5ac445dae13fce8b1ab6f0cb64091' }, "Text"), h("smoothly-input-clear", { key: 'bac98746bafdee5e2af488b9dd1c881a2fd41abb', slot: "end" })), h("div", { key: '3b7dbf2d82b62247f85cac4f9c1b1a7c4f7e3101', class: "height" }), h("smoothly-input-select", { key: 'b837f6e96996b1a9f1a2d3fa4e188050abd69ba6', name: "month", looks: this.options.looks, placeholder: placeholder, invalid: this.options.invalid, errorMessage: this.options.errorMessage, readonly: this.options.readonly, color: this.options.color }, this.options.showLabel && h("label", { key: '489c682c94902d5bf104a32462239429be1208c0', slot: "label" }, "Select"), h("smoothly-item", { key: '846be873419369ca5b3a3bb7ec1763790847f548', value: "1" }, "January"), h("smoothly-item", { key: '78f330e0329eb2c63171e78d35680509e8e172a5', value: "2" }, "February"), h("smoothly-item", { key: '69179c3218be846bb33c018abc37a9bf2f379416', value: "3" }, "March"), h("smoothly-item", { key: 'a5594f65d0320457c0edb516d760dcb6bd5ee7b1', value: "4" }, "April"), h("smoothly-item", { key: '4377a009490a3636f3b8fcea6fd55c5a2c1577f9', value: "5" }, "May"), h("smoothly-item", { key: '74acc707028b86f5266a365614e7bdeb6da67a25', value: "6" }, "June"), h("smoothly-item", { key: '5767cc4323d227293c27934cfcd7ca146a3e71df', value: "7" }, "July"), h("smoothly-item", { key: '51d3e6cc6c9dc142c30e63ac1bb2df2cd3f7422c', value: "8" }, "August"), h("smoothly-item", { key: '58d40956906a3a9d59fbd9b59db8f99990ec04b7', value: "9" }, "September"), h("smoothly-item", { key: 'd78a4d9eb90e73cdf69610dded70dcb30b76119e', value: "10" }, "October"), h("smoothly-item", { key: 'b8867b2bbcf65f519455c8b501120c61368cc9cd', value: "11" }, "November"), h("smoothly-item", { key: '9f30a2ca954a2a47ff166c9eab312df2d03c3fca', value: "12" }, "December"), h("smoothly-input-clear", { key: 'd5e610c5a85b7d5e44dd0128aab00339a02a3210', slot: "end" })), h("div", { key: 'cbe1ff70d9410549cae2db26afe2328f7664fa50', class: "height" }), h("smoothly-input-checkbox", { key: '74a4ca779d60ee6eeed471e50a02b5da4ab1ec18', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, "Check"), h("div", { key: '00c58e9df1e81eeefd02e504b4d8b801c2023694', class: "height" }), h("smoothly-input-radio", { key: 'ed80d56631c1d6e34345a2b0abb0f5708e420779', name: "radio", clearable: true, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("label", { key: 'f22e8e2408d8dc2b3d835ec65d031381ee9c81b1', slot: "label" }, "Radio"), h("smoothly-input-radio-item", { key: 'e6b40167ec1c4bdb1ec801bd86c5a936dcfac2d1', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '975d48ee804f99f041ab0e1d9775831fac38a893', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '47cb61faeca4e7538bae225bcfecb8417c26cbca', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '60cf6f95ad009845e7f6e319d952c1f270f966aa', slot: "end" })), h("div", { key: 'a9405a9b52e859ca553dd19560fa86610183024f', class: "height" }), h("smoothly-input-file", { key: '401a22707d76d8ed5d34abe448814cf4959a1fa8', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '89ab3c037ef0696c2dff55013406f6b427497cae', slot: "label" }, "File"), h("smoothly-input-clear", { key: 'b43d75694fb277232384c2976be6321795062b96', slot: "end" })), h("div", { key: 'bd9d687f9b59e41e8dcb4302e2422a7a27e63677', class: "height" }), h("smoothly-input-range", { key: '1394a573bf3c1c0a833e4f02335a3303b9edf10a', name: "range", label: this.options.showLabel ? "Range" : undefined, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, h("smoothly-input-clear", { key: '49f3b4028cd51409e1cbc5fdfeaef81ec27188f5', slot: "end" })), h("div", { key: '17f16df032bc1927129da013189f3c274d767c5d', class: "height" }), h("smoothly-input-color", { key: '5383ee49642c9b85e015535762abc344a559c6fc', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '8d749e5c39d9b1f70ed423b1258f31115912d02f' }, "Color"), h("smoothly-input-clear", { key: '47cc64ea251de5c33e05482de258667c8cb825ef', slot: "end" })), h("div", { key: '1a95e6d7d34d525420537abb68455514a8acaac3', class: "height" }), h("smoothly-input-date", { key: '48dbc96f309f9bb57d39acaf040524db9b4a28ad', looks: this.options.looks, readonly: this.options.readonly, invalid: this.options.invalid, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '0c14d8bceffe8a9e420850302525165679c508ad' }, "Date"), h("smoothly-input-clear", { key: '019d0c408379cf2b0bc265e920025d649ddd8777', slot: "end" })), h("div", { key: '3d67ba7e9f382f769f787b51e70c7f5cf7d3fe4b', class: "height" }), h("smoothly-input-date-time", { key: '96cbf433bc0b3c569d15103236e7a4fb8c63b21c', looks: this.options.looks, readonly: this.options.readonly, invalid: this.options.invalid, errorMessage: this.options.errorMessage, color: this.options.color, showLabel: this.options.showLabel }, "DateTime", h("smoothly-input-clear", { key: 'a631f516a994b86df2aa9ec3f4651f2314ea8dd2', slot: "end" })), h("div", { key: '97fe1c5b932289b2e42e9c634289725418b348c5', class: "height" }), h("smoothly-input-date-range", { key: 'b58568c51c8b45ae135450ec3686929732255fc7', looks: this.options.looks, readonly: this.options.readonly, invalid: this.options.invalid, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '41efbed231e88d909bd6f28162979f7ddb758e18' }, "Date Range"), h("smoothly-input-clear", { key: '9a2f23707a48fe56b6a37c7d035cc4b84ee85bd0', slot: "end" })), h("div", { key: '4c7ecea506ec437fe67337d65edd8f55d6947972', class: "height" }), h("div", { key: '3b365c0068e208b0f5c8f3f7b52853b169d92c54', class: { "guide-lines": true, "show-label": !!this.options.showLabel } }, this.options.showLabel ? "Aligned labels & values" : "Center values"))));
     }
     static get is() { return "smoothly-input-demo-standard"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/edit/index.js

@@ -28,7 +28,7 @@ export class SmoothlyInputEdit {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'f4b88c08f34277a915cfec6bce48fedbc10eae07', title: this.toolTip }, h("smoothly-button", { key: '1cd4dd7d49d1dc11bc1661477fa814849b8a3e1f', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, h("slot", { key: 'a0fa979725be9d57c13754e1fa7d01f9b1f5b8d1' }), h("smoothly-icon", { key: '328075c5444edb7ce7a967f16579c7ec7edc742e', class: "default", name: "create-outline", size: "tiny" }))));
+        return (h(Host, { key: 'e479bc4e0e7151a26964d30ef6cab245d4ecf48c', title: this.toolTip }, h("smoothly-button", { key: '784668d63e1d5945c8fd74517950badd23a25271', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, h("slot", { key: 'ae09bd22cf4d54255c16d1fc2e99059417a10ec0' }), h("smoothly-icon", { key: '32511b0a5744aeead31e1c00e3ee756299c4ec1c', class: "default", name: "create-outline", size: "tiny" }))));
     }
     static get is() { return "smoothly-input-edit"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/file/index.js

@@ -101,7 +101,7 @@ export class SmoothlyInputFile {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: 'fd024c3fb839f3d9b444b09c3b55dcd96c4139df', class: { dragging: this.dragging, "has-value": !!this.value }, tabindex: 0, onClick: (e) => this.clickHandler(e), onDragOver: (e) => this.dragOverHandler(e), onDragEnter: (e) => this.dragEnterHandler(e) }, h("label", { key: '636345d960e05bc6e7299c1c306cfd763ad78c32' }, h("slot", { key: '911d9215654b918bdb843269c5392523c97337a8', name: "label" })), h("div", { key: 'f54718991c82336e4fe2f3a6f8a84cc52da635b8', class: "input" }, h("smoothly-button", { key: '55c379187cf9d59ffee497075bb8ee6576d99740', type: "button", color: this.color, fill: "clear", size: "flexible" }, h("slot", { key: '3b6ab18c1ab0fb76a4c7151054415b95815876b9', name: "button" })), h("span", { key: '7901e7c5cd0b8344474e18746288bc14f103ee04' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), h("div", { key: '4c435365bee82aac9459a6d86b201225065ec3a4', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, h("smoothly-icon", { key: '83c7cfdd671c04e48f6b95cac4b9ab1429a07caf', name: "document-attach-outline" })), h("input", { key: 'cfc2bafb8d4b9b5af6d6b9f1f17d1312b3dfea68', ref: element => (this.input = element), type: "file", capture: this.camera == "back" ? "environment" : "user", accept: (_c = this.accept) !== null && _c !== void 0 ? _c : (!this.camera ? undefined : "image/jpeg"), files: this.files, onInput: e => this.inputHandler(e) })), h("div", { key: '4d125c84153bf6f60d40de857043bc6a53932361', class: "end", onClick: (e) => e.stopPropagation() }, h("slot", { key: '4d59248a3b753b10e785cebe9dc77fbd79b01ac0', name: "end" }))));
+        return (h(Host, { key: '4e378111db0e10663f7a66d87cae73136fef9bb2', class: { dragging: this.dragging, "has-value": !!this.value }, tabindex: 0, onClick: (e) => this.clickHandler(e), onDragOver: (e) => this.dragOverHandler(e), onDragEnter: (e) => this.dragEnterHandler(e) }, h("label", { key: '32b422053ae2c0f784e253b201f54a9c234e23d2' }, h("slot", { key: '2e8353bacb424ae6e9e80c7de566baadc0e4cd4a', name: "label" })), h("div", { key: '6802b6824a3434f972ed760e61122582eef6c2a1', class: "input" }, h("smoothly-button", { key: '7b4edbef075ce51a50b3d61ebd0df858ce25afee', type: "button", color: this.color, fill: "clear", size: "flexible" }, h("slot", { key: '35dc27313c8e9d7463e4cc1a924dcdc3a5414fd8', name: "button" })), h("span", { key: '113ccb707f133856df9a6f2c707db99adcf9af42' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), h("div", { key: 'a128670edafc51b44e0bfb1d092f0d6a8eb20dea', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, h("smoothly-icon", { key: '24c5da9c87f099c6998c911a01a6e2c150a71795', name: "document-attach-outline" })), h("input", { key: '896fe0eba364441816f4f16b2a6585baba195ced', ref: element => (this.input = element), type: "file", capture: this.camera == "back" ? "environment" : "user", accept: (_c = this.accept) !== null && _c !== void 0 ? _c : (!this.camera ? undefined : "image/jpeg"), files: this.files, onInput: e => this.inputHandler(e) })), h("div", { key: 'd8a0d4950ce1846166cf16166437c166839ef201', class: "end", onClick: (e) => e.stopPropagation() }, h("slot", { key: '06bb474570c901cc3fe00e2de5404c3d37cb836c', name: "end" }))));
     }
     static get is() { return "smoothly-input-file"; }
     static get encapsulation() { return "scoped"; }

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

@@ -131,7 +131,7 @@ export class SmoothlyInput {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        return (h(Host, { key: '0046874130373d440f019048c4605836bab13866', class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, h("slot", { key: '62543fd9baa1a180154a070946790ce5af1141c0', name: "start" }), h("div", { key: '00e17a078ec4fa127467d44d3e32b6eb7c559800', class: "smoothly-input-container" }, h("div", { key: '6dda805d5c3f0f064e16c56eb03cc17f28d83bc9', class: "ghost" }, h("div", { key: '17bb1306fe1d35949ba6e45512cd3e99c6484ba5', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), h("div", { key: 'f7e84112afdfa56381042b721d39aa0d30ece6d3', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), h("input", { key: '8356c125ce07feb88d40f7503b7b1da1a0447dbb', ref: (el) => (this.inputElement = el), color: this.color, name: this.name, type: (_e = this.state) === null || _e === void 0 ? void 0 : _e.type, inputmode: (_f = this.state) === null || _f === void 0 ? void 0 : _f.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: (_g = this.autocomplete) !== null && _g !== void 0 ? _g : (_h = this.state) === null || _h === void 0 ? void 0 : _h.autocomplete, disabled: this.disabled, readOnly: this.readonly, pattern: ((_j = this.state) === null || _j === void 0 ? void 0 : _j.pattern) && ((_k = this.state) === null || _k === void 0 ? void 0 : _k.pattern.source), onKeyDown: event => {
+        return (h(Host, { key: '872dc829ab3ad7ae0a89d5bb33b6873a8bcfcd63', class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, h("slot", { key: '30df6acf4cb3acb717a486ac0ad75da1522927a7', name: "start" }), h("div", { key: '1250557b67717ca57b08c2b6424a7896f432e11a', class: "smoothly-input-container" }, h("div", { key: 'fef92aa30c0c0107f45c6818267dc20221f2cc30', class: "ghost" }, h("div", { key: 'bad4d7ea96ba8e4da99271223e127ce5f062330f', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), h("div", { key: 'b17df2280f81d15afc29f5402341e85e50beb5ba', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), h("input", { key: 'c96649c35f2c06dfdf3630b5c497523d0248d9b4', ref: (el) => (this.inputElement = el), color: this.color, name: this.name, type: (_e = this.state) === null || _e === void 0 ? void 0 : _e.type, inputmode: (_f = this.state) === null || _f === void 0 ? void 0 : _f.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: (_g = this.autocomplete) !== null && _g !== void 0 ? _g : (_h = this.state) === null || _h === void 0 ? void 0 : _h.autocomplete, disabled: this.disabled, readOnly: this.readonly, pattern: ((_j = this.state) === null || _j === void 0 ? void 0 : _j.pattern) && ((_k = this.state) === null || _k === void 0 ? void 0 : _k.pattern.source), onKeyDown: event => {
                 this.state = this.stateHandler.onKeyDown(event, this.state);
                 if (!this.readonly && !this.disabled)
                     this.smoothlyKeydown.emit(Key.create(this.name, event));
@@ -144,7 +144,7 @@ export class SmoothlyInput {
                     if (Deep.notEqual(lastValue, this.stateHandler.getValue(this.state)))
                         this.smoothlyChange.emit({ [this.name]: this.stateHandler.getValue(this.state) });
                 }
-            } }), h("label", { key: '8d17e6b68b32b37e299ee896697bac07205acc4d', class: "label float-on-focus", htmlFor: this.name }, h("slot", { key: '07feb99cc38b31c7b1ca9a212799b1d9cfc7f58b' }))), h("smoothly-icon", { key: 'fae4b45c6cf93493ddc0cefb4e9d639294f466d5', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage }), h("slot", { key: 'b998ad53b86d558c0b73e5c3f1ad40210d692420', name: "end" })));
+            } }), h("label", { key: 'c59ccd5a649873efc5bc0feefc722d5c85068b2d', class: "label float-on-focus", htmlFor: this.name }, h("slot", { key: '73aa7a5bb5448bf7bd37f5102c8d53ebda0a2b62' }))), h("smoothly-icon", { key: '8145ef6bdfcf30cc9402916e0880a425d6dad9d4', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage }), h("slot", { key: '5313f26d26dc2141b84194f9965ea67b324af575', name: "end" })));
     }
     static get is() { return "smoothly-input"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/month/index.js

@@ -106,9 +106,9 @@ export class SmoothlyInputMonth {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: 'e3b78671189b4799aa6420870caac62bbe2e3206' }, h("smoothly-icon", { key: 'edd56db8506d2348f45d0e451dc6343b2ac1c40f', name: "caret-back-outline", size: "tiny", color: this.color, fill: "default", class: {
+        return (h(Host, { key: 'b1f87fae87e6203e9ef74b7221281e037a830b9b' }, h("smoothly-icon", { key: 'dd4fe8e284f87807fbb31617ae79060bf0a59ee7', name: "caret-back-outline", size: "tiny", color: this.color, fill: "default", class: {
                 disabled: this.readonly || !this.allowPreviousMonth,
-            }, onClick: () => this.allowPreviousMonth && this.adjustMonth(-1) }), h("smoothly-input-select", { key: '37537931c02522dff6b3a841aa2e6443a86db8e5', ref: e => (this.year = e), name: `${this.name}-year`, readonly: this.readonly, changed: this.changed, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, h("div", { key: 'c52efe9d16ac08f24545f337d7a89f1a7ad83af5', slot: "label" }, h("slot", { key: '8e0a0a023d413d1fef890639b213791320f73e66', name: "year-label" })), generate.years((_a = this.value) !== null && _a !== void 0 ? _a : isoly.Date.now(), this.min, this.max).map(year => (h("smoothly-item", { key: year.date, value: year.date, selected: year.selected || this.value == year.date }, year.name)))), h("smoothly-input-select", { key: '98147726f3b4e0f51ac8af4b6394cb581529f8e6', ref: e => (this.month = e), name: `${this.name}-month`, readonly: this.readonly, color: this.color, looks: this.looks, changed: this.changed, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, h("div", { key: '836cd43278fd86d0d810e817335367c6d8522df1', slot: "label" }, h("slot", { key: 'a370f8065bc60246a4b3128b71df92f3d469b717', name: "month-label" })), generate.months((_b = this.value) !== null && _b !== void 0 ? _b : isoly.Date.now()).map(month => (h("smoothly-item", { key: month.date, value: month.date, selected: month.selected || this.value == month.date }, month.name)))), h("smoothly-icon", { key: '186887cd04242aff455980704947aacfae63f640', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: {
+            }, onClick: () => this.allowPreviousMonth && this.adjustMonth(-1) }), h("smoothly-input-select", { key: 'ca65bfc738b814d4b9d7cfa1b9c10ab1ed2f478a', ref: e => (this.year = e), name: `${this.name}-year`, readonly: this.readonly, changed: this.changed, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, h("div", { key: 'bebf42ca61c711925077807fd39d590ad7c62b90', slot: "label" }, h("slot", { key: '4b21253002def35172963163cf0070f319321c68', name: "year-label" })), generate.years((_a = this.value) !== null && _a !== void 0 ? _a : isoly.Date.now(), this.min, this.max).map(year => (h("smoothly-item", { key: year.date, value: year.date, selected: year.selected || this.value == year.date }, year.name)))), h("smoothly-input-select", { key: 'b26c5f5d8395b4b656a29bdf1e8a5d73e4d27877', ref: e => (this.month = e), name: `${this.name}-month`, readonly: this.readonly, color: this.color, looks: this.looks, changed: this.changed, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, h("div", { key: 'cfa634dc871e83c96cdd49c7e65aeeaa347d9181', slot: "label" }, h("slot", { key: 'ae56d5cb8aadc9eab5f33da0fee54af46db7f3d2', name: "month-label" })), generate.months((_b = this.value) !== null && _b !== void 0 ? _b : isoly.Date.now()).map(month => (h("smoothly-item", { key: month.date, value: month.date, selected: month.selected || this.value == month.date }, month.name)))), h("smoothly-icon", { key: 'a56a322fadacacd62d1cbae348c0f650432bf3c3', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: {
                 disabled: this.readonly || !this.allowNextMonth,
             }, onClick: () => this.allowNextMonth && this.adjustMonth(1) })));
     }

package/dist/collection/components/input/radio/index.js

@@ -96,7 +96,7 @@ export class SmoothlyInputRadio {
         (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
     }
     render() {
-        return (h(Host, { key: '2683b527137fcd6362d031d734239dbeaf40189f', class: "floating-label" }, h("slot", { key: '2b7b2a76600ce44547604cde7c4bdc6b1c49f060', name: "start" }), h("div", { key: 'd5c326b86b585ec49fdb4a1f1b9b9035ba8bb0d2' }, h("slot", { key: '11f4e016acf166e44e5533666015fde2ffba09fa', name: "label" }), h("div", { key: 'd099fdeaa59227b67d3149d60c5a240dba9a14e1', class: "options" }, h("slot", { key: '0c871b481539804b6c51037ee1739e901a7f6628' }))), h("slot", { key: 'aee4f654185112600103bb644047584bb6e6d0c0', name: "end" })));
+        return (h(Host, { key: '9832f054f11d49d0c5f427bad59d7e71c3dfb2bb', class: "floating-label" }, h("slot", { key: 'bbb81a0d76656ee8b8b16d44d986a20a8a26229b', name: "start" }), h("div", { key: 'f89673a9f124e42216d39f5d09ea7445f0eb40d8' }, h("slot", { key: '1b9cb1c072213a19fa8b83d9f2dfe61792b9571f', name: "label" }), h("div", { key: 'a14d4813301823d8ef7108a36dbf6d6ab15bda30', class: "options" }, h("slot", { key: '3b34f630c9780413c4ee72d611c0298d04482bfe' }))), h("slot", { key: '90f11393598e9548125f758148c75a09af02a56b', name: "end" })));
     }
     static get is() { return "smoothly-input-radio"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/radio/item/index.js

@@ -14,7 +14,7 @@ export class SmoothlyInputRadioItem {
         this.smoothlySelect.emit({ value: this.value, selected: this.selected, select: s => (this.selected = s) });
     }
     render() {
-        return (h(Host, { key: 'accc7b7e7097677782604053aee9b48ed9349756', onClick: () => this.inputHandler() }, h("input", { key: '9bd4dd5bfdfd1e6eb23a02b8d4fdea14cd936802', name: this.name, type: "radio", checked: this.selected }), h("smoothly-icon", { key: 'fe0d24d61fd2b5a318542f68effa90c163abf5fe', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", fill: "outline", color: this.selected ? "success" : "medium", toolTip: "Select" }), h("label", { key: '0d6e257ed8300bacc23b6327d5c249e38cb51775' }, h("slot", { key: 'd380a71b8949a325493c98f60a933a6f82e5b1bb' }))));
+        return (h(Host, { key: 'bf596b71824dfc45cf982587f22ccad43580f29e', onClick: () => this.inputHandler() }, h("input", { key: 'b0d3c66f47add4e99b6b36eb5cbede2931c7b834', name: this.name, type: "radio", checked: this.selected }), h("smoothly-icon", { key: '9a9e1538061ef20eec2ff98f7684ce16d72c4efe', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", fill: "outline", color: this.selected ? "success" : "medium", toolTip: "Select" }), h("label", { key: 'e22dfa008729bf93d2bd09517651ce605db21b09' }, h("slot", { key: '9f36ea8d7085eb8d9f30dff91bbaa515113879af' }))));
     }
     static get is() { return "smoothly-input-radio-item"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/range/demo/index.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SmoothlyInputRangeDemo {
     render() {
-        return (h(Host, { key: 'd01c20bae43d1c4399040a27d06a8899e6c41d61' }, h("h2", { key: 'a4c84c71e44029a74fc896abb4f208d694188721' }, "Range"), h("h3", { key: 'a8c1e2e60e1c4dd2f5f7ef7e3dd2c25ffd2c9a95' }, "Phone Number"), h("smoothly-input-range", { key: 'f91c8f7c67d28b3dae1359da6a397a0db2896daf', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), h("h3", { key: '135e17f039d09a3cb3cd1317702cdcf19ca11f76' }, "Stars out of ten"), h("smoothly-input-range", { key: 'c7827f612a561e6237a69d5eef8d8c170bf3529b', max: 10, step: 1, label: "Stars" }), h("h3", { key: '8ca8c80a31bf68ef58dc4a47c72a64b946c98538' }, "Percent"), h("smoothly-input-range", { key: 'a134090aed032211a135d82ecb7de5040f56b18a', type: "percent", max: 1, step: 0.01, label: "Percent" }), h("h3", { key: '2377916ee7a4787eec2efff1eee6fb6c2029bbc7' }, "With icon at start and clear button"), h("smoothly-input-range", { key: '91c7c98d7654a14d4066fec7734d64d8ec9e2810', step: 1, name: "range2", label: "Select" }, h("smoothly-icon", { key: '47afc40b571788d84b564c7078dd5e797b36b33d', name: "checkmark-circle", slot: "start" }), h("smoothly-input-clear", { key: '5351d78c059982ab2b72264b97c662d828cca0cb', size: "icon", slot: "end" }))));
+        return (h(Host, { key: 'a65fa28c070c9c8622dace5fa9dfe6ae672ab68c' }, h("h2", { key: '36d30888a8055f706d3d43250c99d6c8882c2bd4' }, "Range"), h("h3", { key: '1e2f77ebc5c3c1df3fbd5d095e7c7ab7a86b2b2c' }, "Phone Number"), h("smoothly-input-range", { key: '5f50b12ee4a8579e21e67d4247e034541f0fa92e', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), h("h3", { key: '13db0164ed6b16703c502bd04575492cbbb14e57' }, "Stars out of ten"), h("smoothly-input-range", { key: 'd38b9df06cfbc0616aa870f9cef411356bedc319', max: 10, step: 1, label: "Stars" }), h("h3", { key: 'e159fcd4db7812bafacaa7c03fc4dfbc6ae5a40a' }, "Percent"), h("smoothly-input-range", { key: '0422cada1f51e4f879a8f39120e0534305ecbc44', type: "percent", max: 1, step: 0.01, label: "Percent" }), h("h3", { key: '1b316682a274d09ca05752ec36ebf62fa95c0f07' }, "With icon at start and clear button"), h("smoothly-input-range", { key: '07f1e67528c810002f0d73c8d98783c0c3e0ccf6', step: 1, name: "range2", label: "Select" }, h("smoothly-icon", { key: '3b84524cdcc3ad429bf78f6f79ea81960e0be18d', name: "checkmark-circle", slot: "start" }), h("smoothly-input-clear", { key: '63ab031dd53c1bfc4d2eb390fe35f5af8039da95', size: "icon", slot: "end" }))));
     }
     static get is() { return "smoothly-input-range-demo"; }
 }