smoothly 1.2.1-alpha.34 → 1.2.1-alpha.36

package/dist/components/p-ccb21ce6.js

@@ -0,0 +1,82 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-f765921a.js';
+import { d as defineCustomElement$7 } from './p-306f9cb3.js';
+import { d as defineCustomElement$6 } from './p-ca7d6987.js';
+import { d as defineCustomElement$5 } from './p-2d60ab95.js';
+import { d as defineCustomElement$4 } from './p-c63db1c1.js';
+import { d as defineCustomElement$3 } from './p-a5ada613.js';
+import { d as defineCustomElement$2 } from './p-cc863bad.js';
+import { d as defineCustomElement$1 } from './p-bfd34443.js';
+
+const styleCss = ".sc-smoothly-dialog-demo-h>smoothly-button.sc-smoothly-dialog-demo{display:block;margin-block:2rem}";
+const SmoothlyDialogDemoStyle0 = styleCss;
+
+const SmoothlyDialogDemo = proxyCustomElement(class SmoothlyDialogDemo extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.openModal = false;
+        this.openTallModal = false;
+        this.showFrame = false;
+    }
+    render() {
+        return (h(Host, { key: '6f23592546df981ab328a997d491fc38dd018cd9' }, h("smoothly-button", { key: '10c77679cf0d56bc2a6f72a811af6a8565c8a089', fill: "solid", color: "light", onClick: () => (this.openModal = true) }, "Open Modal"), h("smoothly-button", { key: '3ac4824da8c88e874ef3ce1fd074c14eb03b564c', fill: "solid", color: "light", onClick: () => (this.openTallModal = true) }, "Open Modal with long text and top-aligned."), h("smoothly-button", { key: '90b57556f3c083e437e6adf978ca5985d2dcbdac', fill: "solid", color: "light", onClick: () => (this.showFrame = !this.showFrame) }, "Show Frame"), h("smoothly-modal", { key: 'd3302307ea096a2f80305f2d5ef18fa5e97a723e', closable: true, open: this.openModal, onSmoothlyModalChange: e => (this.openModal = e.detail) }, h("h2", { key: '7659aef15bb808a8057ecf1be592d3a98c84000c', slot: "header" }, "Modal"), h("span", { key: '68eec929d76adaf9abb535220d7fbe7a7fcf8b0a' }, "Are you sure you want to confirm this action?"), h("smoothly-button", { key: '85963882f77a2d5d05076a873dc612a9dbb1d735', slot: "actions", color: "success" }, "Confirm"), h("smoothly-button", { key: 'a106ae037ea3c9ec9bbcc33f6a00324220b07b61', slot: "actions", color: "light", fill: "outline", onClick: () => (this.openModal = false) }, "Cancel")), h("smoothly-modal", { key: '9d91b3f59755964920ae0a9dba277b7de4795d09', closable: true, open: this.openTallModal, onSmoothlyModalChange: e => (this.openTallModal = e.detail), align: "top" }, h("h2", { key: 'b8f58b34e93ea54fdb83880b6a132aedd530d69b', slot: "header" }, "Modal"), h("smoothly-summary", { key: '454a5f57522f0dbb0e2eb56365d62968a07b8f8c' }, h("div", { key: '17607ba2a7b918eed58e4f827697aaccc1a3849b', slot: "summary" }, "Lorem ipsum"), h("div", { key: 'fda1929764661b8ceee7fff0de965716590d04fb', slot: "content" }, Array.from({ length: 10 }).map(() => (h("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."))))), h("smoothly-button", { key: 'c176e661ec34df09bde9beffdf502264851a9548', slot: "actions", color: "light", fill: "outline", onClick: () => (this.openTallModal = false) }, "Cancel")), this.showFrame && (h("smoothly-dialog", { key: '0596a4eba8b82b63d6711cb8f9e840eebf537072', closable: true }, h("smoothly-frame", { key: '1a027bc120e983af8790e4b03d47195b092deaa4', url: "https://www.wikipedia.org/", name: "parent", style: { height: "80vh" } })))));
+    }
+    static get style() { return SmoothlyDialogDemoStyle0; }
+}, [2, "smoothly-dialog-demo", {
+        "openModal": [32],
+        "openTallModal": [32],
+        "showFrame": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["smoothly-dialog-demo", "smoothly-button", "smoothly-dialog", "smoothly-frame", "smoothly-icon", "smoothly-modal", "smoothly-summary", "smoothly-trigger"];
+    components.forEach(tagName => { switch (tagName) {
+        case "smoothly-dialog-demo":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SmoothlyDialogDemo);
+            }
+            break;
+        case "smoothly-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "smoothly-dialog":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "smoothly-frame":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "smoothly-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "smoothly-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "smoothly-summary":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "smoothly-trigger":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { SmoothlyDialogDemo as S, defineCustomElement as d };
+
+//# sourceMappingURL=p-ccb21ce6.js.map

package/dist/components/p-ccb21ce6.js.map

@@ -0,0 +1 @@
+{"file":"p-ccb21ce6.js","mappings":";;;;;;;;;AAAA,MAAM,QAAQ,GAAG,qGAAqG,CAAC;AACvH,iCAAe,QAAQ;;MCMV,kBAAkB;;;;yBACT,KAAK;6BACD,KAAK;yBACT,KAAK;;IAE1B,MAAM;QACL,QACC,EAAC,IAAI,uDACJ,wEAAiB,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,iBAEhE,EAClB,wEAAiB,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,OAAO,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,iDAEpE,EAClB,wEAAiB,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,iBAE3E,EAElB,uEAAgB,QAAQ,QAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,qBAAqB,EAAE,CAAC,KAAK,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,MAAM,CAAC,IACrG,2DAAI,IAAI,EAAC,QAAQ,YAAW,EAC5B,+GAA0D,EAC1D,wEAAiB,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,SAAS,cAE7B,EAClB,wEAAiB,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,SAAS,EAAC,OAAO,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,aAElF,CACF,EAEjB,uEACC,QAAQ,QACR,IAAI,EAAE,IAAI,CAAC,aAAa,EACxB,qBAAqB,EAAE,CAAC,KAAK,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,MAAM,CAAC,EAC3D,KAAK,EAAC,KAAK,IACX,2DAAI,IAAI,EAAC,QAAQ,YAAW,EAC5B,2EACC,4DAAK,IAAI,EAAC,SAAS,kBAAkB,EACrC,4DAAK,IAAI,EAAC,SAAS,IACjB,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,OAC/B,6cAMI,CACJ,CAAC,CACG,CACY,EACnB,wEAAiB,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,SAAS,EAAC,OAAO,EAAE,OAAO,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,aAEtF,CACF,EAEhB,IAAI,CAAC,SAAS,KACd,wEAAiB,QAAQ,UACxB,uEAAgB,GAAG,EAAC,4BAA4B,EAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,GAAI,CAC3E,CAClB,CACK,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/dialog/demo/style.css?tag=smoothly-dialog-demo&encapsulation=scoped","src/components/dialog/demo/index.tsx"],"sourcesContent":["\n:host > smoothly-button {\n\tdisplay: block;\n\tmargin-block: 2rem;\n}\n","import { Component, h, Host, State } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-dialog-demo\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyDialogDemo {\n\t@State() openModal = false\n\t@State() openTallModal = false\n\t@State() showFrame = false\n\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<smoothly-button fill=\"solid\" color=\"light\" onClick={() => (this.openModal = true)}>\n\t\t\t\t\tOpen Modal\n\t\t\t\t</smoothly-button>\n\t\t\t\t<smoothly-button fill=\"solid\" color=\"light\" onClick={() => (this.openTallModal = true)}>\n\t\t\t\t\tOpen Modal with long text and top-aligned.\n\t\t\t\t</smoothly-button>\n\t\t\t\t<smoothly-button fill=\"solid\" color=\"light\" onClick={() => (this.showFrame = !this.showFrame)}>\n\t\t\t\t\tShow Frame\n\t\t\t\t</smoothly-button>\n\n\t\t\t\t<smoothly-modal closable open={this.openModal} onSmoothlyModalChange={e => (this.openModal = e.detail)}>\n\t\t\t\t\t<h2 slot=\"header\">Modal</h2>\n\t\t\t\t\t<span>Are you sure you want to confirm this action?</span>\n\t\t\t\t\t<smoothly-button slot=\"actions\" color=\"success\">\n\t\t\t\t\t\tConfirm\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button slot=\"actions\" color=\"light\" fill=\"outline\" onClick={() => (this.openModal = false)}>\n\t\t\t\t\t\tCancel\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t</smoothly-modal>\n\n\t\t\t\t<smoothly-modal\n\t\t\t\t\tclosable\n\t\t\t\t\topen={this.openTallModal}\n\t\t\t\t\tonSmoothlyModalChange={e => (this.openTallModal = e.detail)}\n\t\t\t\t\talign=\"top\">\n\t\t\t\t\t<h2 slot=\"header\">Modal</h2>\n\t\t\t\t\t<smoothly-summary>\n\t\t\t\t\t\t<div slot=\"summary\">Lorem ipsum</div>\n\t\t\t\t\t\t<div slot=\"content\">\n\t\t\t\t\t\t\t{Array.from({ length: 10 }).map(() => (\n\t\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et\n\t\t\t\t\t\t\t\t\tdolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n\t\t\t\t\t\t\t\t\taliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum\n\t\t\t\t\t\t\t\t\tdolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui\n\t\t\t\t\t\t\t\t\tofficia deserunt mollit anim id est laborum.\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</smoothly-summary>\n\t\t\t\t\t<smoothly-button slot=\"actions\" color=\"light\" fill=\"outline\" onClick={() => (this.openTallModal = false)}>\n\t\t\t\t\t\tCancel\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t</smoothly-modal>\n\n\t\t\t\t{this.showFrame && (\n\t\t\t\t\t<smoothly-dialog closable>\n\t\t\t\t\t\t<smoothly-frame url=\"https://www.wikipedia.org/\" name=\"parent\" style={{ height: \"80vh\" }} />\n\t\t\t\t\t</smoothly-dialog>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/components/{p-0deda363.js → p-cd07fedf.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-f765921a.js';
-import { d as defineCustomElement$1 } from './p-b5bca419.js';
+import { d as defineCustomElement$1 } from './p-c63db1c1.js';
 
 const styleCss = ".sc-smoothly-table-expandable-cell-h{display:table-cell;padding:0.3rem 0.5rem 0.3rem 0.2rem;cursor:pointer;line-height:1.5rem}.sc-smoothly-table-expandable-cell-h:not([open]){box-shadow:0 1px 0 0 rgb(var(--smoothly-color-shade)), 0 1px 0 0 rgb(var(--smoothly-color-shade)) inset}[open].sc-smoothly-table-expandable-cell-h{position:relative;z-index:3;background-color:rgb(var(--smoothly-color));box-shadow:1px 0 0 0 rgb(var(--smoothly-color-shade)) inset, -1px 0 0 0 rgb(var(--smoothly-color-shade)) inset, 0 1px 0 0 rgb(var(--smoothly-color-shade)) inset}.sc-smoothly-table-expandable-cell-h>div.sc-smoothly-table-expandable-cell>smoothly-icon.sc-smoothly-table-expandable-cell{width:1em;padding-right:0.3rem;transition:transform 0.2s, opacity 0.1s;display:flex;height:auto;aspect-ratio:1 / 1;align-self:center;opacity:0.3}.sc-smoothly-table-expandable-cell-h:hover>div.sc-smoothly-table-expandable-cell>smoothly-icon.sc-smoothly-table-expandable-cell{opacity:1}[open].sc-smoothly-table-expandable-cell-h>div.sc-smoothly-table-expandable-cell>smoothly-icon.sc-smoothly-table-expandable-cell{transform:rotate(90deg) translateX(3px)}.sc-smoothly-table-expandable-cell-h>div.sc-smoothly-table-expandable-cell{display:grid;grid-template-columns:auto 1fr;align-items:center}.sc-smoothly-table-expandable-cell-h:not([open])>tr.sc-smoothly-table-expandable-cell>td.sc-smoothly-table-expandable-cell{display:none}smoothly-table-row>tr>td.sc-smoothly-table-expandable-cell-s>*{--expansion-width:1.5rem;--expansion-border-width:3px;position:relative;background-color:rgb(var(--smoothly-color));width:calc(100% + 3rem - 1px);top:1px;left:calc(-1 * var(--expansion-width) + 1px);box-sizing:border-box;padding:0.5rem calc(var(--expansion-width) - 1px);border-bottom:1px solid rgb(var(--smoothly-color-shade))}smoothly-table-row>tr.spotlight>td.sc-smoothly-table-expandable-cell-s>*{box-shadow:calc(var(--expansion-border-width)) 0 0 0 rgb(var(--smoothly-tertiary-color)) inset}smoothly-table-row>tr:not(.spotlight)>td.sc-smoothly-table-expandable-cell-s>*{box-shadow:-1px 0 0 0 rgb(var(--smoothly-tertiary-color)), 1px 0 0 0 rgb(var(--smoothly-tertiary-color))}smoothly-table-row>tr>td.sc-smoothly-table-expandable-cell-s>*::before{content:\"\";position:absolute;display:flex;top:-1px;bottom:0;left:-1px;width:calc(var(--expansion-width) + 1px);border-top:1px solid rgb(var(--smoothly-color-shade))}smoothly-table-row>tr>td.sc-smoothly-table-expandable-cell-s>*::after{content:\"\";position:absolute;display:flex;top:-1px;bottom:0;right:0;width:calc(var(--expansion-width) - 1px);border-top:1px solid rgb(var(--smoothly-color-shade));border-right:1px solid rgb(var(--smoothly-color-shade))}smoothly-table[align=bottom] .sc-smoothly-table-expandable-cell-h{vertical-align:bottom}smoothly-table[align=middle] .sc-smoothly-table-expandable-cell-h{vertical-align:middle}smoothly-table[align=top] .sc-smoothly-table-expandable-cell-h{vertical-align:top}";
 const SmoothlyTableExpandableCellStyle0 = styleCss;
@@ -47,7 +47,7 @@ const TableExpandableCell = proxyCustomElement(class TableExpandableCell extends
         event.detail(this.element);
     }
     render() {
-        return (h(Host, { key: 'fae816857a7a1e11ceaf6e68ec3235bcce42752c' }, h("div", { key: 'a5d7d227c773060d3362e6fcbffededb5479ce92' }, h("smoothly-icon", { key: '77e05e11dec65bba4ecfe55ef8909d78345369d5', name: "caret-forward-outline" }), h("slot", { key: '4b037932f5955cc06f4ce4c0c5335fc5a42fdfcb' })), h("tr", { key: '8db6015b46df85bf1398c66c17e442dc6e4857ee', class: { spotlight: this.spotlight }, ref: e => (this.expansionElement = e) }, h("td", { key: 'a1cf80115cacbdf58ea26247eb3ef2ea37f3b4e4', colSpan: 999 }, h("slot", { key: 'da8fc38933a283d75c589e63a9083e34e031e1b8', name: "detail" })))));
+        return (h(Host, { key: 'c18073e79ed648b097932f65afc57b1a086d2aef' }, h("div", { key: '7b1ca3f50b8c2c1e2ccd009188a883d606f8f89d' }, h("smoothly-icon", { key: '38e25d23939f163e58e61541d5456d30842fc237', name: "caret-forward-outline" }), h("slot", { key: '6a6854a144d228579fd929a6454778e70c54a48b' })), h("tr", { key: '76832340657756d93f8257c7089ff4ec7a0c5b56', class: { spotlight: this.spotlight }, ref: e => (this.expansionElement = e) }, h("td", { key: 'e786ee682b26589bf7d66ef358f042111eb63749', colSpan: 999 }, h("slot", { key: 'fc7df9a42bd8b719fe1c486cd0d47e730401b195', name: "detail" })))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -85,4 +85,4 @@ defineCustomElement();
 
 export { TableExpandableCell as T, defineCustomElement as d };
 
-//# sourceMappingURL=p-0deda363.js.map
+//# sourceMappingURL=p-cd07fedf.js.map

package/dist/components/{p-0deda363.js.map → p-cd07fedf.js.map}

@@ -1 +1 @@
-{"file":"p-0deda363.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,y3FAAy3F,CAAC;AAC34F,0CAAe,QAAQ;;MCkBV,mBAAmB;;;;;;;;8BAIL,IAAI;yBACT,IAAI;;;IAOzB,WAAW,CAAC,KAAc;QACzB,IAAI,IAAI,CAAC,gBAAgB;YACxB,IAAI,KAAK;gBACR,IAAI,CAAC,SAAS,GAAG,IAAI,CAAA;;gBAErB,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;QAC5C,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC7C;IAGD,eAAe;QACd,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,cAAc,CAAA;KACjD;IACD,iBAAiB;QAChB,IAAI,CAAC,qBAAqB,CAAC,IAAI,EAAE,CAAA;QACjC,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC;YAChC,cAAc,EAAE,CAAC,OAAgB,MAAM,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC;SACrE,CAAC,CAAA;KACF;IACD,kBAAkB;QACjB,IAAI,IAAI,CAAC,SAAS,EAAE;YACnB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAA;YACtB,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;SACtD;KACD;IAED,OAAO;QACN,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAA;KACtB;IAED,iBAAiB,CAAC,KAAgD;QACjE,KAAK,CAAC,eAAe,EAAE,CAAA;QACvB,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;KAC1B;IACD,MAAM;QACL,QACC,EAAC,IAAI,uDACJ,8DACC,sEAAe,IAAI,EAAC,uBAAuB,GAAiB,EAC5D,8DAAa,CACR,EACN,2DAAI,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,IAC9E,2DAAI,OAAO,EAAE,GAAG,IACf,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACD,CACC,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/table/expandable/cell/style.css?tag=smoothly-table-expandable-cell&encapsulation=scoped","src/components/table/expandable/cell/index.tsx"],"sourcesContent":[":host {\n\tdisplay: table-cell;\n\tpadding: 0.3rem 0.5rem 0.3rem 0.2rem;\n\tcursor: pointer;\n\tline-height: 1.5rem;\n}\n:host:not([open]) {\n\tbox-shadow: 0 1px 0 0 rgb(var(--smoothly-color-shade)), 0 1px 0 0 rgb(var(--smoothly-color-shade)) inset;\n}\n:host[open] {\n\tposition: relative;\n\tz-index: 3;\n\tbackground-color: rgb(var(--smoothly-color));\n\tbox-shadow: 1px 0 0 0 rgb(var(--smoothly-color-shade)) inset, -1px 0 0 0 rgb(var(--smoothly-color-shade)) inset, 0 1px 0 0 rgb(var(--smoothly-color-shade)) inset;\n}\n:host > div > smoothly-icon {\n\twidth: 1em;\n\tpadding-right: 0.3rem;\n\ttransition: transform 0.2s, opacity 0.1s;\n\tdisplay: flex;\n\theight: auto;\n\taspect-ratio: 1 / 1;\n\talign-self: center;\n\topacity: 0.3;\n}\n:host:hover > div > smoothly-icon {\n\topacity: 1;\n}\n:host[open] > div > smoothly-icon {\n\ttransform: rotate(90deg) translateX(3px);\n}\n:host > div {\n\tdisplay: grid;\n\tgrid-template-columns: auto 1fr;\n\talign-items: center;\n}\n:host:not([open]) > tr > td {\n\tdisplay: none;\n}\nsmoothly-table-row > tr > td::slotted(*) {\n\t--expansion-width: 1.5rem;\n\t--expansion-border-width: 3px;\n\tposition: relative;\n\tbackground-color: rgb(var(--smoothly-color));\n\twidth: calc(100% + 3rem - 1px);\n\ttop: 1px;\n\tleft: calc(-1 * var(--expansion-width) + 1px);\n\tbox-sizing: border-box;\n\tpadding: 0.5rem calc(var(--expansion-width) - 1px);\n\tborder-bottom: 1px solid rgb(var(--smoothly-color-shade));\n}\nsmoothly-table-row > tr.spotlight > td::slotted(*) {\n\tbox-shadow: calc(var(--expansion-border-width)) 0 0 0 rgb(var(--smoothly-tertiary-color)) inset;\n}\nsmoothly-table-row > tr:not(.spotlight) > td::slotted(*) {\n\tbox-shadow: -1px 0 0 0 rgb(var(--smoothly-tertiary-color)), 1px 0 0 0 rgb(var(--smoothly-tertiary-color));\n}\nsmoothly-table-row > tr > td::slotted(*)::before {\n\tcontent: \"\";\n\tposition: absolute;\n\tdisplay: flex;\n\ttop: -1px;\n\tbottom: 0;\n\tleft: -1px;\n\twidth: calc(var(--expansion-width) + 1px);\n\tborder-top: 1px solid rgb(var(--smoothly-color-shade));\n}\nsmoothly-table-row > tr > td::slotted(*)::after {\n\tcontent: \"\";\n\tposition: absolute;\n\tdisplay: flex;\n\ttop: -1px;\n\tbottom: 0;\n\tright: 0;\n\twidth: calc(var(--expansion-width) - 1px);\n\tborder-top: 1px solid rgb(var(--smoothly-color-shade));\n\tborder-right: 1px solid rgb(var(--smoothly-color-shade));\n}\n\nsmoothly-table[align=bottom] :host {\n\tvertical-align: bottom;\n}\nsmoothly-table[align=middle] :host {\n\tvertical-align: middle;\n}\nsmoothly-table[align=top] :host {\n\tvertical-align: top;\n}\n","import {\n\tComponent,\n\tComponentWillLoad,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tProp,\n\tState,\n\tWatch,\n} from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-table-expandable-cell\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class TableExpandableCell implements ComponentWillLoad {\n\tprivate expansionElement?: HTMLTableRowElement\n\tprivate beginOpen: boolean\n\t@Element() element: HTMLSmoothlyTableExpandableCellElement\n\t@State() allowSpotlight = true\n\t@State() spotlight = true\n\t@Prop({ mutable: true, reflect: true }) open: boolean\n\t@Event() smoothlyExpansionOpen: EventEmitter<HTMLElement>\n\t@Event() smoothlyExpansionLoad: EventEmitter<void>\n\t@Event() smoothlyExpandableChange: EventEmitter<boolean>\n\t@Event() smoothlyExpandableLoad: EventEmitter<{ allowSpotlight: (allowed: boolean) => void }>\n\t@Watch(\"open\")\n\topenChanged(value: boolean) {\n\t\tif (this.expansionElement)\n\t\t\tif (value)\n\t\t\t\tthis.beginOpen = true\n\t\t\telse\n\t\t\t\tthis.element.append(this.expansionElement)\n\t\tthis.smoothlyExpandableChange.emit(this.open)\n\t}\n\t@Watch(\"open\")\n\t@Watch(\"allowSpotlight\")\n\thandleSpotlight() {\n\t\tthis.spotlight = this.open && this.allowSpotlight\n\t}\n\tcomponentWillLoad(): void {\n\t\tthis.smoothlyExpansionLoad.emit()\n\t\tthis.smoothlyExpandableLoad.emit({\n\t\t\tallowSpotlight: (allowed: boolean) => (this.allowSpotlight = allowed),\n\t\t})\n\t}\n\tcomponentDidRender(): void {\n\t\tif (this.beginOpen) {\n\t\t\tthis.beginOpen = false\n\t\t\tthis.smoothlyExpansionOpen.emit(this.expansionElement)\n\t\t}\n\t}\n\t@Listen(\"click\")\n\tonClick() {\n\t\tthis.open = !this.open\n\t}\n\t@Listen(\"smoothlyTableLoad\")\n\thandleTableLoaded(event: CustomEvent<(owner: EventTarget) => void>) {\n\t\tevent.stopPropagation()\n\t\tevent.detail(this.element)\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div>\n\t\t\t\t\t<smoothly-icon name=\"caret-forward-outline\"></smoothly-icon>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\t\t\t\t<tr class={{ spotlight: this.spotlight }} ref={e => (this.expansionElement = e)}>\n\t\t\t\t\t<td colSpan={999}>\n\t\t\t\t\t\t<slot name=\"detail\"></slot>\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
+{"file":"p-cd07fedf.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,y3FAAy3F,CAAC;AAC34F,0CAAe,QAAQ;;MCkBV,mBAAmB;;;;;;;;8BAIL,IAAI;yBACT,IAAI;;;IAOzB,WAAW,CAAC,KAAc;QACzB,IAAI,IAAI,CAAC,gBAAgB;YACxB,IAAI,KAAK;gBACR,IAAI,CAAC,SAAS,GAAG,IAAI,CAAA;;gBAErB,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;QAC5C,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC7C;IAGD,eAAe;QACd,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,cAAc,CAAA;KACjD;IACD,iBAAiB;QAChB,IAAI,CAAC,qBAAqB,CAAC,IAAI,EAAE,CAAA;QACjC,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC;YAChC,cAAc,EAAE,CAAC,OAAgB,MAAM,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC;SACrE,CAAC,CAAA;KACF;IACD,kBAAkB;QACjB,IAAI,IAAI,CAAC,SAAS,EAAE;YACnB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAA;YACtB,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;SACtD;KACD;IAED,OAAO;QACN,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAA;KACtB;IAED,iBAAiB,CAAC,KAAgD;QACjE,KAAK,CAAC,eAAe,EAAE,CAAA;QACvB,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;KAC1B;IACD,MAAM;QACL,QACC,EAAC,IAAI,uDACJ,8DACC,sEAAe,IAAI,EAAC,uBAAuB,GAAiB,EAC5D,8DAAa,CACR,EACN,2DAAI,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,IAC9E,2DAAI,OAAO,EAAE,GAAG,IACf,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACD,CACC,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/table/expandable/cell/style.css?tag=smoothly-table-expandable-cell&encapsulation=scoped","src/components/table/expandable/cell/index.tsx"],"sourcesContent":[":host {\n\tdisplay: table-cell;\n\tpadding: 0.3rem 0.5rem 0.3rem 0.2rem;\n\tcursor: pointer;\n\tline-height: 1.5rem;\n}\n:host:not([open]) {\n\tbox-shadow: 0 1px 0 0 rgb(var(--smoothly-color-shade)), 0 1px 0 0 rgb(var(--smoothly-color-shade)) inset;\n}\n:host[open] {\n\tposition: relative;\n\tz-index: 3;\n\tbackground-color: rgb(var(--smoothly-color));\n\tbox-shadow: 1px 0 0 0 rgb(var(--smoothly-color-shade)) inset, -1px 0 0 0 rgb(var(--smoothly-color-shade)) inset, 0 1px 0 0 rgb(var(--smoothly-color-shade)) inset;\n}\n:host > div > smoothly-icon {\n\twidth: 1em;\n\tpadding-right: 0.3rem;\n\ttransition: transform 0.2s, opacity 0.1s;\n\tdisplay: flex;\n\theight: auto;\n\taspect-ratio: 1 / 1;\n\talign-self: center;\n\topacity: 0.3;\n}\n:host:hover > div > smoothly-icon {\n\topacity: 1;\n}\n:host[open] > div > smoothly-icon {\n\ttransform: rotate(90deg) translateX(3px);\n}\n:host > div {\n\tdisplay: grid;\n\tgrid-template-columns: auto 1fr;\n\talign-items: center;\n}\n:host:not([open]) > tr > td {\n\tdisplay: none;\n}\nsmoothly-table-row > tr > td::slotted(*) {\n\t--expansion-width: 1.5rem;\n\t--expansion-border-width: 3px;\n\tposition: relative;\n\tbackground-color: rgb(var(--smoothly-color));\n\twidth: calc(100% + 3rem - 1px);\n\ttop: 1px;\n\tleft: calc(-1 * var(--expansion-width) + 1px);\n\tbox-sizing: border-box;\n\tpadding: 0.5rem calc(var(--expansion-width) - 1px);\n\tborder-bottom: 1px solid rgb(var(--smoothly-color-shade));\n}\nsmoothly-table-row > tr.spotlight > td::slotted(*) {\n\tbox-shadow: calc(var(--expansion-border-width)) 0 0 0 rgb(var(--smoothly-tertiary-color)) inset;\n}\nsmoothly-table-row > tr:not(.spotlight) > td::slotted(*) {\n\tbox-shadow: -1px 0 0 0 rgb(var(--smoothly-tertiary-color)), 1px 0 0 0 rgb(var(--smoothly-tertiary-color));\n}\nsmoothly-table-row > tr > td::slotted(*)::before {\n\tcontent: \"\";\n\tposition: absolute;\n\tdisplay: flex;\n\ttop: -1px;\n\tbottom: 0;\n\tleft: -1px;\n\twidth: calc(var(--expansion-width) + 1px);\n\tborder-top: 1px solid rgb(var(--smoothly-color-shade));\n}\nsmoothly-table-row > tr > td::slotted(*)::after {\n\tcontent: \"\";\n\tposition: absolute;\n\tdisplay: flex;\n\ttop: -1px;\n\tbottom: 0;\n\tright: 0;\n\twidth: calc(var(--expansion-width) - 1px);\n\tborder-top: 1px solid rgb(var(--smoothly-color-shade));\n\tborder-right: 1px solid rgb(var(--smoothly-color-shade));\n}\n\nsmoothly-table[align=bottom] :host {\n\tvertical-align: bottom;\n}\nsmoothly-table[align=middle] :host {\n\tvertical-align: middle;\n}\nsmoothly-table[align=top] :host {\n\tvertical-align: top;\n}\n","import {\n\tComponent,\n\tComponentWillLoad,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tProp,\n\tState,\n\tWatch,\n} from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-table-expandable-cell\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class TableExpandableCell implements ComponentWillLoad {\n\tprivate expansionElement?: HTMLTableRowElement\n\tprivate beginOpen: boolean\n\t@Element() element: HTMLSmoothlyTableExpandableCellElement\n\t@State() allowSpotlight = true\n\t@State() spotlight = true\n\t@Prop({ mutable: true, reflect: true }) open: boolean\n\t@Event() smoothlyExpansionOpen: EventEmitter<HTMLElement>\n\t@Event() smoothlyExpansionLoad: EventEmitter<void>\n\t@Event() smoothlyExpandableChange: EventEmitter<boolean>\n\t@Event() smoothlyExpandableLoad: EventEmitter<{ allowSpotlight: (allowed: boolean) => void }>\n\t@Watch(\"open\")\n\topenChanged(value: boolean) {\n\t\tif (this.expansionElement)\n\t\t\tif (value)\n\t\t\t\tthis.beginOpen = true\n\t\t\telse\n\t\t\t\tthis.element.append(this.expansionElement)\n\t\tthis.smoothlyExpandableChange.emit(this.open)\n\t}\n\t@Watch(\"open\")\n\t@Watch(\"allowSpotlight\")\n\thandleSpotlight() {\n\t\tthis.spotlight = this.open && this.allowSpotlight\n\t}\n\tcomponentWillLoad(): void {\n\t\tthis.smoothlyExpansionLoad.emit()\n\t\tthis.smoothlyExpandableLoad.emit({\n\t\t\tallowSpotlight: (allowed: boolean) => (this.allowSpotlight = allowed),\n\t\t})\n\t}\n\tcomponentDidRender(): void {\n\t\tif (this.beginOpen) {\n\t\t\tthis.beginOpen = false\n\t\t\tthis.smoothlyExpansionOpen.emit(this.expansionElement)\n\t\t}\n\t}\n\t@Listen(\"click\")\n\tonClick() {\n\t\tthis.open = !this.open\n\t}\n\t@Listen(\"smoothlyTableLoad\")\n\thandleTableLoaded(event: CustomEvent<(owner: EventTarget) => void>) {\n\t\tevent.stopPropagation()\n\t\tevent.detail(this.element)\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div>\n\t\t\t\t\t<smoothly-icon name=\"caret-forward-outline\"></smoothly-icon>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\t\t\t\t<tr class={{ spotlight: this.spotlight }} ref={e => (this.expansionElement = e)}>\n\t\t\t\t\t<td colSpan={999}>\n\t\t\t\t\t\t<slot name=\"detail\"></slot>\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/components/{p-2e8d8347.js → p-ce0f05d1.js}

@@ -4,18 +4,18 @@ import { o as object } from './p-d471066b.js';
 import { f as fromIs } from './p-8e1e509d.js';
 import { N as Notice } from './p-ef01331e.js';
 import './p-47ea6b68.js';
-import { d as defineCustomElement$c } from './p-be6d380e.js';
-import { d as defineCustomElement$b } from './p-e5bd19b5.js';
-import { d as defineCustomElement$a } from './p-76514c29.js';
-import { d as defineCustomElement$9 } from './p-061353e6.js';
-import { d as defineCustomElement$8 } from './p-b5bca419.js';
-import { d as defineCustomElement$7 } from './p-51d51732.js';
-import { d as defineCustomElement$6 } from './p-bfb63e71.js';
-import { d as defineCustomElement$5 } from './p-4380feb9.js';
-import { d as defineCustomElement$4 } from './p-f47eb337.js';
-import { d as defineCustomElement$3 } from './p-9702b067.js';
-import { d as defineCustomElement$2 } from './p-5bbf4b7e.js';
-import { d as defineCustomElement$1 } from './p-0cfd31a4.js';
+import { d as defineCustomElement$c } from './p-306f9cb3.js';
+import { d as defineCustomElement$b } from './p-686ec006.js';
+import { d as defineCustomElement$a } from './p-5b16ff97.js';
+import { d as defineCustomElement$9 } from './p-ca69a0ef.js';
+import { d as defineCustomElement$8 } from './p-c63db1c1.js';
+import { d as defineCustomElement$7 } from './p-0b16cab5.js';
+import { d as defineCustomElement$6 } from './p-f2fc107c.js';
+import { d as defineCustomElement$5 } from './p-b20e3206.js';
+import { d as defineCustomElement$4 } from './p-083143a9.js';
+import { d as defineCustomElement$3 } from './p-631148b4.js';
+import { d as defineCustomElement$2 } from './p-edcdcc51.js';
+import { d as defineCustomElement$1 } from './p-c77944e7.js';
 
 const styleCss = ".sc-smoothly-form-demo-date-h{display:block}";
 const SmoothlyFormDemoDateStyle0 = styleCss;
@@ -42,7 +42,7 @@ const SmoothlyFormDemoDate = proxyCustomElement(class SmoothlyFormDemoDate exten
         event.detail.result(false);
     }
     render() {
-        return (h(Host, { key: 'c756ecd2158fcea20c5492fee29e06ae8eff5d77' }, h("h2", { key: '25aa4d7a8bc6a47adae135515ce9441074971ea4' }, "Date input"), h("smoothly-form", { key: 'bf965cf2ad3d3288fef0f8c393b6fd3c2775dad2', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, h("smoothly-input-date", { key: 'c1cbf84459eb2b330d8398277a3b101bcffe5a59', name: "date" }, "Date"), h("smoothly-input-submit", { key: '01557b861392e3e3d1d88525bde50007567c20e3', slot: "submit" }, h("smoothly-icon", { key: 'f77aacee0b4f0e1fcb158152c317897641ec493b', name: "checkmark-outline" })))));
+        return (h(Host, { key: 'aa19ebb22d681b287b2ec81202c01482e4a83f60' }, h("h2", { key: '88cf2ed5415dee5bf3a122b2a1a8abe20babe925' }, "Date input"), h("smoothly-form", { key: 'd8d010a2cc02a94b0f2f277c530d2cf3ca1a697f', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, h("smoothly-input-date", { key: 'cd3a8896484802bea38f330d3cce6cd1f369b6cf', name: "date" }, "Date"), h("smoothly-input-submit", { key: '370b34543bbef943c67d46ca46df7e5216e2759a', slot: "submit" }, h("smoothly-icon", { key: '0be6193b0a290537c1d2579b22a4d962aa200296', name: "checkmark-outline" })))));
     }
     static get style() { return SmoothlyFormDemoDateStyle0; }
 }, [2, "smoothly-form-demo-date"]);
@@ -123,4 +123,4 @@ defineCustomElement();
 
 export { SmoothlyFormDemoDate as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-2e8d8347.js.map
+//# sourceMappingURL=p-ce0f05d1.js.map

package/dist/components/{p-2e8d8347.js.map → p-ce0f05d1.js.map}

@@ -1 +1 @@
-{"file":"p-2e8d8347.js","mappings":";;;;;;;;;;;;;;;;;;;AAAA,MAAM,QAAQ,GAAG,8CAA8C,CAAC;AAChE,mCAAe,QAAQ;;MCSV,oBAAoB;IALjC;;;;QAOS,cAAS,GAAGA,MAAW,CAAuB;YACrD,IAAI,EAAEC,MAAW,CAAC,YAAY,EAAEC,IAAU,CAAC,EAAE,CAAC;SAC9C,CAAC,CAAA;KA6BF;IA5BA,MAAM,aAAa,CAAC,KAA0B;QAC7C,KAAK,CAAC,eAAe,EAAE,CAAA;QACvB,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE;YAC3C,OAAO,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAA;YACpC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,CAAA;SACtD;aAAM;YACN,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC,CAAA;YACvD,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;SACzB;QACD,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;KAC1B;IACD,MAAM;QACL,QACC,EAAC,IAAI,uDACJ,0EAAmB,EACnB,sEACC,KAAK,EAAE,QAAQ,EACf,IAAI,EAAE,QAAQ,EACd,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,oBAAoB,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAChD,4EAAqB,IAAI,EAAE,MAAM,IAAG,MAAM,CAAuB,EACjE,8EAAuB,IAAI,EAAE,QAAQ,IACpC,sEAAe,IAAI,EAAE,mBAAmB,GAAI,CACrB,CACT,CACV,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["isly.object","isly.fromIs","isoly.Date"],"sources":["src/components/form/demo/date/style.css?tag=smoothly-form-demo-date&encapsulation=scoped","src/components/form/demo/date/index.tsx"],"sourcesContent":[":host {\n\tdisplay: block;\n}\n","import { Component, Event, EventEmitter, h, Host, VNode } from \"@stencil/core\"\nimport { isoly } from \"isoly\"\nimport { isly } from \"isly\"\nimport { Notice, Submit } from \"../../../../model\"\n\n@Component({\n\ttag: \"smoothly-form-demo-date\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyFormDemoDate {\n\t@Event() notice: EventEmitter<Notice>\n\tprivate validator = isly.object<{ date: isoly.Date }>({\n\t\tdate: isly.fromIs(\"isoly.Date\", isoly.Date.is),\n\t})\n\tasync submitHandler(event: CustomEvent<Submit>): Promise<void> {\n\t\tevent.stopPropagation()\n\t\tif (!this.validator.is(event.detail.value)) {\n\t\t\tconsole.error(`Type is incomplete.`)\n\t\t\tthis.notice.emit(Notice.failed(`Type is incomplete.`))\n\t\t} else {\n\t\t\tthis.notice.emit(Notice.succeeded(`Type is complete!`))\n\t\t\tevent.detail.result(true)\n\t\t}\n\t\tevent.detail.result(false)\n\t}\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<h2>Date input</h2>\n\t\t\t\t<smoothly-form\n\t\t\t\t\tlooks={\"border\"}\n\t\t\t\t\ttype={\"create\"}\n\t\t\t\t\tvalidator={this.validator}\n\t\t\t\t\tonSmoothlyFormSubmit={e => this.submitHandler(e)}>\n\t\t\t\t\t<smoothly-input-date name={\"date\"}>{\"Date\"}</smoothly-input-date>\n\t\t\t\t\t<smoothly-input-submit slot={\"submit\"}>\n\t\t\t\t\t\t<smoothly-icon name={\"checkmark-outline\"} />\n\t\t\t\t\t</smoothly-input-submit>\n\t\t\t\t</smoothly-form>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
+{"file":"p-ce0f05d1.js","mappings":";;;;;;;;;;;;;;;;;;;AAAA,MAAM,QAAQ,GAAG,8CAA8C,CAAC;AAChE,mCAAe,QAAQ;;MCSV,oBAAoB;IALjC;;;;QAOS,cAAS,GAAGA,MAAW,CAAuB;YACrD,IAAI,EAAEC,MAAW,CAAC,YAAY,EAAEC,IAAU,CAAC,EAAE,CAAC;SAC9C,CAAC,CAAA;KA6BF;IA5BA,MAAM,aAAa,CAAC,KAA0B;QAC7C,KAAK,CAAC,eAAe,EAAE,CAAA;QACvB,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE;YAC3C,OAAO,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAA;YACpC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,CAAA;SACtD;aAAM;YACN,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC,CAAA;YACvD,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;SACzB;QACD,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;KAC1B;IACD,MAAM;QACL,QACC,EAAC,IAAI,uDACJ,0EAAmB,EACnB,sEACC,KAAK,EAAE,QAAQ,EACf,IAAI,EAAE,QAAQ,EACd,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,oBAAoB,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAChD,4EAAqB,IAAI,EAAE,MAAM,IAAG,MAAM,CAAuB,EACjE,8EAAuB,IAAI,EAAE,QAAQ,IACpC,sEAAe,IAAI,EAAE,mBAAmB,GAAI,CACrB,CACT,CACV,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["isly.object","isly.fromIs","isoly.Date"],"sources":["src/components/form/demo/date/style.css?tag=smoothly-form-demo-date&encapsulation=scoped","src/components/form/demo/date/index.tsx"],"sourcesContent":[":host {\n\tdisplay: block;\n}\n","import { Component, Event, EventEmitter, h, Host, VNode } from \"@stencil/core\"\nimport { isoly } from \"isoly\"\nimport { isly } from \"isly\"\nimport { Notice, Submit } from \"../../../../model\"\n\n@Component({\n\ttag: \"smoothly-form-demo-date\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyFormDemoDate {\n\t@Event() notice: EventEmitter<Notice>\n\tprivate validator = isly.object<{ date: isoly.Date }>({\n\t\tdate: isly.fromIs(\"isoly.Date\", isoly.Date.is),\n\t})\n\tasync submitHandler(event: CustomEvent<Submit>): Promise<void> {\n\t\tevent.stopPropagation()\n\t\tif (!this.validator.is(event.detail.value)) {\n\t\t\tconsole.error(`Type is incomplete.`)\n\t\t\tthis.notice.emit(Notice.failed(`Type is incomplete.`))\n\t\t} else {\n\t\t\tthis.notice.emit(Notice.succeeded(`Type is complete!`))\n\t\t\tevent.detail.result(true)\n\t\t}\n\t\tevent.detail.result(false)\n\t}\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<h2>Date input</h2>\n\t\t\t\t<smoothly-form\n\t\t\t\t\tlooks={\"border\"}\n\t\t\t\t\ttype={\"create\"}\n\t\t\t\t\tvalidator={this.validator}\n\t\t\t\t\tonSmoothlyFormSubmit={e => this.submitHandler(e)}>\n\t\t\t\t\t<smoothly-input-date name={\"date\"}>{\"Date\"}</smoothly-input-date>\n\t\t\t\t\t<smoothly-input-submit slot={\"submit\"}>\n\t\t\t\t\t\t<smoothly-icon name={\"checkmark-outline\"} />\n\t\t\t\t\t</smoothly-input-submit>\n\t\t\t\t</smoothly-form>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/components/{p-7301def9.js → p-d1daa4a3.js}

@@ -1,14 +1,14 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-f765921a.js';
-import { d as defineCustomElement$a } from './p-be6d380e.js';
-import { d as defineCustomElement$9 } from './p-f9770ff7.js';
-import { d as defineCustomElement$8 } from './p-7c5243b2.js';
-import { d as defineCustomElement$7 } from './p-6ead1a42.js';
-import { d as defineCustomElement$6 } from './p-2020cb82.js';
-import { d as defineCustomElement$5 } from './p-b4bb3e74.js';
-import { d as defineCustomElement$4 } from './p-b5bca419.js';
-import { d as defineCustomElement$3 } from './p-51d51732.js';
-import { d as defineCustomElement$2 } from './p-7ee3f874.js';
-import { d as defineCustomElement$1 } from './p-0cd742cf.js';
+import { d as defineCustomElement$a } from './p-306f9cb3.js';
+import { d as defineCustomElement$9 } from './p-4f80c811.js';
+import { d as defineCustomElement$8 } from './p-f770567b.js';
+import { d as defineCustomElement$7 } from './p-96acfe2c.js';
+import { d as defineCustomElement$6 } from './p-f46dd8e4.js';
+import { d as defineCustomElement$5 } from './p-4c6fe645.js';
+import { d as defineCustomElement$4 } from './p-c63db1c1.js';
+import { d as defineCustomElement$3 } from './p-0b16cab5.js';
+import { d as defineCustomElement$2 } from './p-09934532.js';
+import { d as defineCustomElement$1 } from './p-4c8ef04f.js';
 
 const SmoothlyInputRangeDemo = proxyCustomElement(class SmoothlyInputRangeDemo extends H {
     constructor() {
@@ -16,7 +16,7 @@ const SmoothlyInputRangeDemo = proxyCustomElement(class SmoothlyInputRangeDemo e
         this.__registerHost();
     }
     render() {
-        return (h(Host, { key: 'c812675343d64f3315f190ad1c908d10ace2c62c' }, h("h2", { key: '7638d925da134a917c195e141e9f5cc0ab501322' }, "Range"), h("h3", { key: '64ea67fce5489026de55211b6de6e5d181de30e1' }, "Phone Number"), h("smoothly-input-range", { key: '932e86e4c6df5b5ce4e64b31db597740628f5113', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), h("h3", { key: 'ccb928822f4f87d9069863cc195febea279b58a0' }, "Stars out of ten"), h("smoothly-input-range", { key: '7232e44dd5a8be19b3fd91232b548a090bd100be', max: 10, step: 1, label: "Stars" }), h("h3", { key: 'a8d2891ea79f41a2374030da6c8988b4d63dba2d' }, "Percent"), h("smoothly-input-range", { key: '4f9558319cf15a5926e4abe175af9abf8727e5f8', type: "percent", max: 1, step: 0.01, label: "Percent" }), h("h3", { key: '2b939b4330ceead0aa93bb2932baa0ceca932961' }, "With icon at start and clear button"), h("smoothly-input-range", { key: '7000d532a0a3086942c05676c3a200c8b942d4a9', step: 1, name: "range2", label: "Select" }, h("smoothly-icon", { key: '9ab62a9e0238046064533134ae9e251d10837c98', name: "checkmark-circle", slot: "start" }), h("smoothly-input-clear", { key: 'e97a0579668dd6dc631e23b58606882b9955bb6b', size: "icon", slot: "end" }))));
+        return (h(Host, { key: '4051df0b6e7e3616d4003fbf6041d7114e42bca5' }, h("h2", { key: '1bc9976be3dd1bdd9cafb957804721bfc2d35e8f' }, "Range"), h("h3", { key: 'c2d36a50622ab5aa5a91e7d07128710042ead62b' }, "Phone Number"), h("smoothly-input-range", { key: '9e3df23e6f60dee8edcb2dca05ff8fabc3f3f0b6', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), h("h3", { key: '30124f483876140e0b75fbbeea412e34430c00ee' }, "Stars out of ten"), h("smoothly-input-range", { key: 'd4aa30a14fea1abe86520faa74db9671397c75c9', max: 10, step: 1, label: "Stars" }), h("h3", { key: '855cdcf0cf5968c42dc038d3cb636a4aa0c4c75c' }, "Percent"), h("smoothly-input-range", { key: '78a4f0ddb5615947071bcc05cd2bdd6e14c83a96', type: "percent", max: 1, step: 0.01, label: "Percent" }), h("h3", { key: '3ccd439f2d386f40d87d92d22b5e9539bb7a2b9c' }, "With icon at start and clear button"), h("smoothly-input-range", { key: '3c1aa4fa46ac4c7e73fdf9df8628bf2459b354e5', step: 1, name: "range2", label: "Select" }, h("smoothly-icon", { key: '989b64f1e98a59d34e710eff806cdf7a2fec2e9b', name: "checkmark-circle", slot: "start" }), h("smoothly-input-clear", { key: '3cfabb3409c3ba4a3bb1ecd63dd51c2b79277552', size: "icon", slot: "end" }))));
     }
 }, [0, "smoothly-input-range-demo"]);
 function defineCustomElement() {
@@ -86,4 +86,4 @@ defineCustomElement();
 
 export { SmoothlyInputRangeDemo as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-7301def9.js.map
+//# sourceMappingURL=p-d1daa4a3.js.map

package/dist/components/{p-7301def9.js.map → p-d1daa4a3.js.map}

@@ -1 +1 @@
-{"file":"p-7301def9.js","mappings":";;;;;;;;;;;;MAKa,sBAAsB;;;;;IAClC,MAAM;QACL,QACC,EAAC,IAAI,uDACJ,qEAAc,EACd,4EAAqB,EACrB,6EAAsB,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,cAAc,GAAI,EACxF,gFAAyB,EACzB,6EAAsB,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,GAAI,EAC1D,uEAAgB,EAChB,6EAAsB,IAAI,EAAC,SAAS,EAAC,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,GAAI,EAC7E,mGAA4C,EAC5C,6EAAsB,IAAI,EAAE,CAAC,EAAE,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,IAC1D,sEAAe,IAAI,EAAC,kBAAkB,EAAC,IAAI,EAAC,OAAO,GAAG,EACtD,6EAAsB,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,KAAK,GAAG,CACzB,CACjB,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/input/range/demo/index.tsx"],"sourcesContent":["import { Component, h, Host } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-input-range-demo\",\n})\nexport class SmoothlyInputRangeDemo {\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<h2>Range</h2>\n\t\t\t\t<h3>Phone Number</h3>\n\t\t\t\t<smoothly-input-range min={700000000} max={799999999} step={1} label={\"Phone Number\"} />\n\t\t\t\t<h3>Stars out of ten</h3>\n\t\t\t\t<smoothly-input-range max={10} step={1} label={\"Stars\"} />\n\t\t\t\t<h3>Percent</h3>\n\t\t\t\t<smoothly-input-range type=\"percent\" max={1} step={0.01} label={\"Percent\"} />\n\t\t\t\t<h3>With icon at start and clear button</h3>\n\t\t\t\t<smoothly-input-range step={1} name=\"range2\" label=\"Select\">\n\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"start\" />\n\t\t\t\t\t<smoothly-input-clear size=\"icon\" slot=\"end\" />\n\t\t\t\t</smoothly-input-range>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
+{"file":"p-d1daa4a3.js","mappings":";;;;;;;;;;;;MAKa,sBAAsB;;;;;IAClC,MAAM;QACL,QACC,EAAC,IAAI,uDACJ,qEAAc,EACd,4EAAqB,EACrB,6EAAsB,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,cAAc,GAAI,EACxF,gFAAyB,EACzB,6EAAsB,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,GAAI,EAC1D,uEAAgB,EAChB,6EAAsB,IAAI,EAAC,SAAS,EAAC,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,GAAI,EAC7E,mGAA4C,EAC5C,6EAAsB,IAAI,EAAE,CAAC,EAAE,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,IAC1D,sEAAe,IAAI,EAAC,kBAAkB,EAAC,IAAI,EAAC,OAAO,GAAG,EACtD,6EAAsB,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,KAAK,GAAG,CACzB,CACjB,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/input/range/demo/index.tsx"],"sourcesContent":["import { Component, h, Host } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-input-range-demo\",\n})\nexport class SmoothlyInputRangeDemo {\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<h2>Range</h2>\n\t\t\t\t<h3>Phone Number</h3>\n\t\t\t\t<smoothly-input-range min={700000000} max={799999999} step={1} label={\"Phone Number\"} />\n\t\t\t\t<h3>Stars out of ten</h3>\n\t\t\t\t<smoothly-input-range max={10} step={1} label={\"Stars\"} />\n\t\t\t\t<h3>Percent</h3>\n\t\t\t\t<smoothly-input-range type=\"percent\" max={1} step={0.01} label={\"Percent\"} />\n\t\t\t\t<h3>With icon at start and clear button</h3>\n\t\t\t\t<smoothly-input-range step={1} name=\"range2\" label=\"Select\">\n\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"start\" />\n\t\t\t\t\t<smoothly-input-clear size=\"icon\" slot=\"end\" />\n\t\t\t\t</smoothly-input-range>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/components/{p-8f3652f7.js → p-d2d74dcd.js}

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-f765921a.js';
-import { d as defineCustomElement$5 } from './p-f9770ff7.js';
-import { d as defineCustomElement$4 } from './p-7c5243b2.js';
-import { d as defineCustomElement$3 } from './p-6ead1a42.js';
-import { d as defineCustomElement$2 } from './p-2020cb82.js';
-import { d as defineCustomElement$1 } from './p-b4bb3e74.js';
+import { d as defineCustomElement$5 } from './p-4f80c811.js';
+import { d as defineCustomElement$4 } from './p-f770567b.js';
+import { d as defineCustomElement$3 } from './p-96acfe2c.js';
+import { d as defineCustomElement$2 } from './p-f46dd8e4.js';
+import { d as defineCustomElement$1 } from './p-4c6fe645.js';
 
 const SmoothlyDisplayDemoJson = proxyCustomElement(class SmoothlyDisplayDemoJson extends H {
     constructor() {
@@ -11,7 +11,7 @@ const SmoothlyDisplayDemoJson = proxyCustomElement(class SmoothlyDisplayDemoJson
         this.__registerHost();
     }
     render() {
-        return (h(Host, { key: '67b8c263dfe7d72e1072ba3d630ea74f0a05788a' }, [0, 1, 3, undefined].map(colapseDepth => [
+        return (h(Host, { key: 'a3e2a042bff06a25da98b43e95705b303a4e2d7c' }, [0, 1, 3, undefined].map(colapseDepth => [
             h("div", null, "collapseDepth=", colapseDepth !== null && colapseDepth !== void 0 ? colapseDepth : "undefined"),
             h("div", null, h("smoothly-display", { type: "json", value: json, collapseDepth: colapseDepth })),
         ])));
@@ -73,4 +73,4 @@ defineCustomElement();
 
 export { SmoothlyDisplayDemoJson as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-8f3652f7.js.map
+//# sourceMappingURL=p-d2d74dcd.js.map

package/dist/components/{p-8f3652f7.js.map → p-d2d74dcd.js.map}

@@ -1 +1 @@
-{"file":"p-8f3652f7.js","mappings":";;;;;;;MAKa,uBAAuB;;;;;IACnC,MAAM;QACL,QACC,EAAC,IAAI,uDACH,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,SAAS,CAAC,CAAC,GAAG,CAAC,YAAY,IAAI;YACzC,iCAAoB,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,WAAW,CAAO;YACtD,eACC,wBAAkB,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,EAAE,aAAa,EAAE,YAAY,GAAI,CACrE;SACN,CAAC,CACI,EACP;KACD;;AAGF,MAAM,IAAI,GAAG;IACZ,IAAI,EAAE,SAAS;IACf,MAAM,EAAE;QACP,GAAG,EAAE,GAAG;QACR,KAAK,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;QAChD,WAAW,EAAE,EAAE;QACf,UAAU,EAAE,EAAE;QACd,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,KAAK;QACZ,IAAI,EAAE,IAAI;QACV,UAAU,EAAE,SAAS;QACrB,UAAU,EACT,4hDAA4hD;KAC7hD;CACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/display/demo/json/index.tsx"],"sourcesContent":["import { Component, h, Host } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-display-demo-json\",\n})\nexport class SmoothlyDisplayDemoJson {\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{[0, 1, 3, undefined].map(colapseDepth => [\n\t\t\t\t\t<div>collapseDepth={colapseDepth ?? \"undefined\"}</div>,\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<smoothly-display type=\"json\" value={json} collapseDepth={colapseDepth} />\n\t\t\t\t\t</div>,\n\t\t\t\t])}\n\t\t\t</Host>\n\t\t)\n\t}\n}\n\nconst json = {\n\tname: \"stringy\",\n\tnested: {\n\t\tage: 109,\n\t\tarray: [\"one\", \"two\", \"three\", { name: \"four\" }],\n\t\temptyObject: {},\n\t\temptyArray: [],\n\t\ttruthy: true,\n\t\tfalsy: false,\n\t\tnull: null,\n\t\tnotDefined: undefined,\n\t\tlongString:\n\t\t\t\"pepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakor\",\n\t},\n}\n"],"version":3}
+{"file":"p-d2d74dcd.js","mappings":";;;;;;;MAKa,uBAAuB;;;;;IACnC,MAAM;QACL,QACC,EAAC,IAAI,uDACH,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,SAAS,CAAC,CAAC,GAAG,CAAC,YAAY,IAAI;YACzC,iCAAoB,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,WAAW,CAAO;YACtD,eACC,wBAAkB,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,EAAE,aAAa,EAAE,YAAY,GAAI,CACrE;SACN,CAAC,CACI,EACP;KACD;;AAGF,MAAM,IAAI,GAAG;IACZ,IAAI,EAAE,SAAS;IACf,MAAM,EAAE;QACP,GAAG,EAAE,GAAG;QACR,KAAK,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;QAChD,WAAW,EAAE,EAAE;QACf,UAAU,EAAE,EAAE;QACd,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,KAAK;QACZ,IAAI,EAAE,IAAI;QACV,UAAU,EAAE,SAAS;QACrB,UAAU,EACT,4hDAA4hD;KAC7hD;CACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/display/demo/json/index.tsx"],"sourcesContent":["import { Component, h, Host } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-display-demo-json\",\n})\nexport class SmoothlyDisplayDemoJson {\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{[0, 1, 3, undefined].map(colapseDepth => [\n\t\t\t\t\t<div>collapseDepth={colapseDepth ?? \"undefined\"}</div>,\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<smoothly-display type=\"json\" value={json} collapseDepth={colapseDepth} />\n\t\t\t\t\t</div>,\n\t\t\t\t])}\n\t\t\t</Host>\n\t\t)\n\t}\n}\n\nconst json = {\n\tname: \"stringy\",\n\tnested: {\n\t\tage: 109,\n\t\tarray: [\"one\", \"two\", \"three\", { name: \"four\" }],\n\t\temptyObject: {},\n\t\temptyArray: [],\n\t\ttruthy: true,\n\t\tfalsy: false,\n\t\tnull: null,\n\t\tnotDefined: undefined,\n\t\tlongString:\n\t\t\t\"pepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakorpepparkakor\",\n\t},\n}\n"],"version":3}

package/dist/components/{p-ceaca6de.js → p-d30b90e7.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-f765921a.js';
-import { d as defineCustomElement$2 } from './p-b5bca419.js';
-import { d as defineCustomElement$1 } from './p-9658ae2c.js';
+import { d as defineCustomElement$2 } from './p-c63db1c1.js';
+import { d as defineCustomElement$1 } from './p-bfd34443.js';
 
 const styleCss = ".sc-smoothly-notification-h{display:block;position:relative;min-width:30em;min-height:3em;border-radius:5px;margin:0.5em}.sc-smoothly-notification-h>span.icon.sc-smoothly-notification>smoothly-icon.sc-smoothly-notification,.sc-smoothly-notification-h>span.clean.sc-smoothly-notification{display:flex;justify-content:center;align-self:center}.sc-smoothly-notification-h>span.sc-smoothly-notification{margin:0 2rem 0 1rem}.sc-smoothly-notification-h>span.icon.sc-smoothly-notification{display:flex;width:100%;justify-content:center}.sc-smoothly-notification-h>span.icon.sc-smoothly-notification>p.sc-smoothly-notification{padding-right:1em}.sc-smoothly-notification-h>span.sc-smoothly-notification>p.sc-smoothly-notification{text-align:left}[hidden].sc-smoothly-notification-h{display:none}.sc-smoothly-notification-h>span.icon.sc-smoothly-notification>smoothly-icon.sc-smoothly-notification{margin:0 0.5rem}.sc-smoothly-notification-h>smoothly-trigger.sc-smoothly-notification{font-size:0.7em;position:absolute;right:0}";
 const SmoothlyNotificationStyle0 = styleCss;
@@ -58,7 +58,7 @@ const Notification = proxyCustomElement(class Notification extends H {
         this.onUpdatedNotice(this.notice);
     }
     render() {
-        return (h(Host, { key: '15fad780b09899bf3eec930c4f44b94d8e3449e8', color: this.properties[0], fill: "solid" }, this.closable && (h("smoothly-trigger", { key: 'f018119de7c61bed2319a34d42c5f593d8777df5', fill: "clear", name: "close" }, h("smoothly-icon", { key: '73e160b47cca733860abb5461eea1bae7620445f', name: "close-circle-outline" }))), h("span", { key: '0f1ff04d65d618b841083fb0b6f72cb6e844cd63', class: this.icon ? "icon" : "clean" }, this.icon && h("smoothly-icon", { key: 'dca125d726d704c241481d1e706d696f0e996716', name: this.properties[1] }), h("p", { key: '8e32aee5e45a331ce7210b746c01fc3de3f23651' }, this.notice.message))));
+        return (h(Host, { key: '43a3c3b3102412e3025e89cbb42b766e726ac713', color: this.properties[0], fill: "solid" }, this.closable && (h("smoothly-trigger", { key: '7f642488fb4104d4150de311d08205fc2af23d48', fill: "clear", name: "close" }, h("smoothly-icon", { key: '58ed12291f9fa6316e83beb67469ecc7186aa79d', name: "close-circle-outline" }))), h("span", { key: '5a402e3a00398560ec1eda603a1492b4f1a6a3c8', class: this.icon ? "icon" : "clean" }, this.icon && h("smoothly-icon", { key: 'b0d92f719da18df0ebab3075a278d0a468e73dc3', name: this.properties[1] }), h("p", { key: '5a488d2493680c97d67f5f94eb2a05d4a09e069f' }, this.notice.message))));
     }
     static get watchers() { return {
         "notice": ["onUpdatedNotice"]
@@ -99,4 +99,4 @@ defineCustomElement();
 
 export { Notification as N, defineCustomElement as d };
 
-//# sourceMappingURL=p-ceaca6de.js.map
+//# sourceMappingURL=p-d30b90e7.js.map

package/dist/components/{p-ceaca6de.js.map → p-d30b90e7.js.map}

@@ -1 +1 @@
-{"file":"p-ceaca6de.js","mappings":";;;;AAAA,MAAM,QAAQ,GAAG,4/BAA4/B,CAAC;AAC9gC,mCAAe,QAAQ;;MCSV,YAAY;;;;;QAMhB,aAAQ,GAAoB,MAAM;YACzC,IAAI,MAAM,CAAC,KAAK,IAAI,QAAQ;gBAC3B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;;gBAExB,IAAI,CAAC,IAAI,GAAG,EAAE,CAAA;SACf,CAAA;;wBATkB,IAAI;;oBAEP,EAAE;;IAQlB,IAAY,UAAU;QACrB,IAAI,MAAiC,CAAA;QACrC,QAAQ,IAAI,CAAC,MAAM,CAAC,KAAK;YACxB,KAAK,SAAS,CAAC;YACf,KAAK,SAAS;gBACb,MAAM,GAAG,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAA;gBACvC,MAAK;YACN,KAAK,SAAS;gBACb,MAAM,GAAG,CAAC,SAAS,EAAE,kBAAkB,CAAC,CAAA;gBACxC,MAAK;YACN,KAAK,WAAW;gBACf,MAAM,GAAG,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAA;gBACvC,MAAK;YACN,KAAK,QAAQ;gBACZ,MAAM,GAAG,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAA;gBACnC,MAAK;YACN;gBACC,MAAM,GAAG,CAAC,OAAO,EAAE,SAAS,CAAC,CAAA;gBAC7B,MAAK;SACN;QACD,OAAO,MAAM,CAAA;KACb;IAGD,SAAS,CAAC,KAA2B;QACpC,IAAI,KAAK,CAAC,MAAM,CAAC,IAAI,IAAI,OAAO,EAAE;YACjC,KAAK,CAAC,eAAe,EAAE,CAAA;YACvB,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAA;SACnB;KACD;IAGD,eAAe,CAAC,QAAgB,EAAE,QAAiB;QAClD,IAAI,QAAQ;YACX,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;QACjC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;KAC9B;IACD,gBAAgB;QACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;KACjC;IAED,MAAM;QACL,QACC,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,IAAI,EAAC,OAAO,IAC3C,IAAI,CAAC,QAAQ,KACb,yEAAkB,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAC1C,sEAAe,IAAI,EAAC,sBAAsB,GAAiB,CACzC,CACnB,EACD,6DAAM,KAAK,EAAE,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,IACvC,IAAI,CAAC,IAAI,IAAI,sEAAe,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,GAAkB,EACvE,4DAAI,IAAI,CAAC,MAAM,CAAC,OAAO,CAAK,CACtB,CACD,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/notification/style.css?tag=smoothly-notification&encapsulation=scoped","src/components/notification/index.tsx"],"sourcesContent":[":host {\n\tdisplay: block;\n\tposition: relative;\n\tmin-width: 30em;\n\tmin-height: 3em;\n\tborder-radius: 5px;\n\tmargin: 0.5em;\n}\n:host > span.icon > smoothly-icon,\n:host > span.clean {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-self: center;\n}\n:host > span {\n\tmargin: 0 2rem 0 1rem;\n}\n:host > span.icon {\n\tdisplay: flex;\n\twidth: 100%;\n\tjustify-content: center;\n}\n:host > span.icon > p {\n\tpadding-right: 1em;\n}\n:host > span > p {\n\ttext-align: left;\n}\n:host[hidden] {\n\tdisplay: none;\n}\n:host > span.icon > smoothly-icon {\n\tmargin: 0 0.5rem;\n}\n:host > smoothly-trigger {\n\tfont-size: 0.7em;\n\tposition: absolute;\n\tright: 0;\n}\n","// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { Component, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from \"@stencil/core\"\nimport { Color, Notice, Trigger } from \"../../model\"\nimport { Icon } from \"../../model\"\n\n@Component({\n\ttag: \"smoothly-notification\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class Notification {\n\t@Prop() notice: Notice\n\t@Prop() closable = true\n\t@Prop() icon: boolean\n\t@State() tick = {}\n\t@Event() remove: EventEmitter<Notice>\n\tprivate listener: Notice.Listener = notice => {\n\t\tif (notice.state == \"closed\")\n\t\t\tthis.remove.emit(notice)\n\t\telse\n\t\t\tthis.tick = {}\n\t}\n\tprivate get properties(): [Color, Icon | undefined] {\n\t\tlet result: [Color, Icon | undefined]\n\t\tswitch (this.notice.state) {\n\t\t\tcase \"delayed\":\n\t\t\tcase \"warning\":\n\t\t\t\tresult = [\"warning\", \"warning-outline\"]\n\t\t\t\tbreak\n\t\t\tcase \"success\":\n\t\t\t\tresult = [\"success\", \"checkmark-circle\"]\n\t\t\t\tbreak\n\t\t\tcase \"executing\":\n\t\t\t\tresult = [\"light\", \"hourglass-outline\"]\n\t\t\t\tbreak\n\t\t\tcase \"failed\":\n\t\t\t\tresult = [\"danger\", \"alert-circle\"]\n\t\t\t\tbreak\n\t\t\tdefault:\n\t\t\t\tresult = [\"light\", undefined]\n\t\t\t\tbreak\n\t\t}\n\t\treturn result\n\t}\n\n\t@Listen(\"trigger\")\n\tonTrigger(event: CustomEvent<Trigger>) {\n\t\tif (event.detail.name == \"close\") {\n\t\t\tevent.stopPropagation()\n\t\t\tthis.notice.close()\n\t\t}\n\t}\n\n\t@Watch(\"notice\")\n\tonUpdatedNotice(newValue: Notice, oldValue?: Notice) {\n\t\tif (oldValue)\n\t\t\toldValue.unlisten(this.listener)\n\t\tnewValue.listen(this.listener)\n\t}\n\tcomponentDidLoad() {\n\t\tthis.onUpdatedNotice(this.notice)\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host color={this.properties[0]} fill=\"solid\">\n\t\t\t\t{this.closable && (\n\t\t\t\t\t<smoothly-trigger fill=\"clear\" name=\"close\">\n\t\t\t\t\t\t<smoothly-icon name=\"close-circle-outline\"></smoothly-icon>\n\t\t\t\t\t</smoothly-trigger>\n\t\t\t\t)}\n\t\t\t\t<span class={this.icon ? \"icon\" : \"clean\"}>\n\t\t\t\t\t{this.icon && <smoothly-icon name={this.properties[1]}></smoothly-icon>}\n\t\t\t\t\t<p>{this.notice.message}</p>\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
+{"file":"p-d30b90e7.js","mappings":";;;;AAAA,MAAM,QAAQ,GAAG,4/BAA4/B,CAAC;AAC9gC,mCAAe,QAAQ;;MCSV,YAAY;;;;;QAMhB,aAAQ,GAAoB,MAAM;YACzC,IAAI,MAAM,CAAC,KAAK,IAAI,QAAQ;gBAC3B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;;gBAExB,IAAI,CAAC,IAAI,GAAG,EAAE,CAAA;SACf,CAAA;;wBATkB,IAAI;;oBAEP,EAAE;;IAQlB,IAAY,UAAU;QACrB,IAAI,MAAiC,CAAA;QACrC,QAAQ,IAAI,CAAC,MAAM,CAAC,KAAK;YACxB,KAAK,SAAS,CAAC;YACf,KAAK,SAAS;gBACb,MAAM,GAAG,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAA;gBACvC,MAAK;YACN,KAAK,SAAS;gBACb,MAAM,GAAG,CAAC,SAAS,EAAE,kBAAkB,CAAC,CAAA;gBACxC,MAAK;YACN,KAAK,WAAW;gBACf,MAAM,GAAG,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAA;gBACvC,MAAK;YACN,KAAK,QAAQ;gBACZ,MAAM,GAAG,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAA;gBACnC,MAAK;YACN;gBACC,MAAM,GAAG,CAAC,OAAO,EAAE,SAAS,CAAC,CAAA;gBAC7B,MAAK;SACN;QACD,OAAO,MAAM,CAAA;KACb;IAGD,SAAS,CAAC,KAA2B;QACpC,IAAI,KAAK,CAAC,MAAM,CAAC,IAAI,IAAI,OAAO,EAAE;YACjC,KAAK,CAAC,eAAe,EAAE,CAAA;YACvB,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAA;SACnB;KACD;IAGD,eAAe,CAAC,QAAgB,EAAE,QAAiB;QAClD,IAAI,QAAQ;YACX,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;QACjC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;KAC9B;IACD,gBAAgB;QACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;KACjC;IAED,MAAM;QACL,QACC,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,IAAI,EAAC,OAAO,IAC3C,IAAI,CAAC,QAAQ,KACb,yEAAkB,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAC1C,sEAAe,IAAI,EAAC,sBAAsB,GAAiB,CACzC,CACnB,EACD,6DAAM,KAAK,EAAE,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,IACvC,IAAI,CAAC,IAAI,IAAI,sEAAe,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,GAAkB,EACvE,4DAAI,IAAI,CAAC,MAAM,CAAC,OAAO,CAAK,CACtB,CACD,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/notification/style.css?tag=smoothly-notification&encapsulation=scoped","src/components/notification/index.tsx"],"sourcesContent":[":host {\n\tdisplay: block;\n\tposition: relative;\n\tmin-width: 30em;\n\tmin-height: 3em;\n\tborder-radius: 5px;\n\tmargin: 0.5em;\n}\n:host > span.icon > smoothly-icon,\n:host > span.clean {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-self: center;\n}\n:host > span {\n\tmargin: 0 2rem 0 1rem;\n}\n:host > span.icon {\n\tdisplay: flex;\n\twidth: 100%;\n\tjustify-content: center;\n}\n:host > span.icon > p {\n\tpadding-right: 1em;\n}\n:host > span > p {\n\ttext-align: left;\n}\n:host[hidden] {\n\tdisplay: none;\n}\n:host > span.icon > smoothly-icon {\n\tmargin: 0 0.5rem;\n}\n:host > smoothly-trigger {\n\tfont-size: 0.7em;\n\tposition: absolute;\n\tright: 0;\n}\n","// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { Component, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from \"@stencil/core\"\nimport { Color, Notice, Trigger } from \"../../model\"\nimport { Icon } from \"../../model\"\n\n@Component({\n\ttag: \"smoothly-notification\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class Notification {\n\t@Prop() notice: Notice\n\t@Prop() closable = true\n\t@Prop() icon: boolean\n\t@State() tick = {}\n\t@Event() remove: EventEmitter<Notice>\n\tprivate listener: Notice.Listener = notice => {\n\t\tif (notice.state == \"closed\")\n\t\t\tthis.remove.emit(notice)\n\t\telse\n\t\t\tthis.tick = {}\n\t}\n\tprivate get properties(): [Color, Icon | undefined] {\n\t\tlet result: [Color, Icon | undefined]\n\t\tswitch (this.notice.state) {\n\t\t\tcase \"delayed\":\n\t\t\tcase \"warning\":\n\t\t\t\tresult = [\"warning\", \"warning-outline\"]\n\t\t\t\tbreak\n\t\t\tcase \"success\":\n\t\t\t\tresult = [\"success\", \"checkmark-circle\"]\n\t\t\t\tbreak\n\t\t\tcase \"executing\":\n\t\t\t\tresult = [\"light\", \"hourglass-outline\"]\n\t\t\t\tbreak\n\t\t\tcase \"failed\":\n\t\t\t\tresult = [\"danger\", \"alert-circle\"]\n\t\t\t\tbreak\n\t\t\tdefault:\n\t\t\t\tresult = [\"light\", undefined]\n\t\t\t\tbreak\n\t\t}\n\t\treturn result\n\t}\n\n\t@Listen(\"trigger\")\n\tonTrigger(event: CustomEvent<Trigger>) {\n\t\tif (event.detail.name == \"close\") {\n\t\t\tevent.stopPropagation()\n\t\t\tthis.notice.close()\n\t\t}\n\t}\n\n\t@Watch(\"notice\")\n\tonUpdatedNotice(newValue: Notice, oldValue?: Notice) {\n\t\tif (oldValue)\n\t\t\toldValue.unlisten(this.listener)\n\t\tnewValue.listen(this.listener)\n\t}\n\tcomponentDidLoad() {\n\t\tthis.onUpdatedNotice(this.notice)\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host color={this.properties[0]} fill=\"solid\">\n\t\t\t\t{this.closable && (\n\t\t\t\t\t<smoothly-trigger fill=\"clear\" name=\"close\">\n\t\t\t\t\t\t<smoothly-icon name=\"close-circle-outline\"></smoothly-icon>\n\t\t\t\t\t</smoothly-trigger>\n\t\t\t\t)}\n\t\t\t\t<span class={this.icon ? \"icon\" : \"clean\"}>\n\t\t\t\t\t{this.icon && <smoothly-icon name={this.properties[1]}></smoothly-icon>}\n\t\t\t\t\t<p>{this.notice.message}</p>\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/components/{p-c9c44bdd.js → p-d84d93f2.js}

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-f765921a.js';
 import { C as Currency } from './p-390767c7.js';
-import { d as defineCustomElement$4 } from './p-b5bca419.js';
-import { d as defineCustomElement$3 } from './p-51d51732.js';
-import { d as defineCustomElement$2 } from './p-133d18ac.js';
-import { d as defineCustomElement$1 } from './p-f14627ff.js';
+import { d as defineCustomElement$4 } from './p-c63db1c1.js';
+import { d as defineCustomElement$3 } from './p-0b16cab5.js';
+import { d as defineCustomElement$2 } from './p-79474a9a.js';
+import { d as defineCustomElement$1 } from './p-a071eaed.js';
 
 const styleCss = ".sc-smoothly-input-price-demo-h{display:block}";
 const SmoothlyInputPriceDemoStyle0 = styleCss;
@@ -16,7 +16,7 @@ const SmoothlyInputPriceDemo = proxyCustomElement(class SmoothlyInputPriceDemo e
         this.currency = "USD";
     }
     render() {
-        return (h(Host, { key: 'e4342c6db7e1e4c6281497cd786e4d499257c504' }, h("h2", { key: '26aa0c16aa87d5dea4bb092e7104a31e2fb26d36' }, "State demo on smoothly-input"), h("p", { key: '163708f05a50f636cc0b9c71d45a692ebac5805f' }, "This demo/test the internal state of the smoothly-input component."), h("p", { key: '7799fc8b8d38da3dc473c2a65fa51d0521db7ea7' }, "The currency of the price should update when switching between the currencies."), h("smoothly-input-radio", { key: 'f55a75be6fa0090e8e55f6ea342bcd157167f0fb', name: "currency", onSmoothlyInput: e => (this.currency = 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: '6a6e28e0695faddf47599305fc6941fd5dd2e690', type: "price", currency: this.currency }, "price")));
+        return (h(Host, { key: 'e0130489f4c93fd3d843f2462b2c5149f157b3fe' }, h("h2", { key: '1995cbab87f15c67f143d463564ea7f36daae94f' }, "State demo on smoothly-input"), h("p", { key: '125ab5ad3c3edd286fdeec42a751412dd0f48fd8' }, "This demo/test the internal state of the smoothly-input component."), h("p", { key: 'f7cb859f06e3e22661346c8784ab639410b72aaf' }, "The currency of the price should update when switching between the currencies."), h("smoothly-input-radio", { key: '0cf33db6e4b836c71a5847e5a1ae084a75774b13', name: "currency", onSmoothlyInput: e => (this.currency = 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: '51f7e92ad5e05e7f0272859aa80fe65c01eb5874', type: "price", currency: this.currency }, "price")));
     }
     static get style() { return SmoothlyInputPriceDemoStyle0; }
 }, [2, "smoothly-input-price-demo", {
@@ -60,4 +60,4 @@ defineCustomElement();
 
 export { SmoothlyInputPriceDemo as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-c9c44bdd.js.map
+//# sourceMappingURL=p-d84d93f2.js.map

package/dist/components/{p-c9c44bdd.js.map → p-d84d93f2.js.map}

@@ -1 +1 @@
-{"file":"p-c9c44bdd.js","mappings":";;;;;;;AAAA,MAAM,QAAQ,GAAG,gDAAgD,CAAC;AAClE,qCAAe,QAAQ;;MCOV,sBAAsB;;;;0BACM,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;wBACxB,KAAK;;IAE1C,MAAM;QACL,QACC,EAAC,IAAI,uDACJ,4FAAqC,EACrC,iIAAyE,EACzE,6IAAqF,EACrF,6EACC,IAAI,EAAE,UAAU,EAChB,eAAe,EAAE,CAAC,KAAK,IAAI,CAAC,QAAQ,GAAGA,QAAc,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,QAAQ,GAAG,SAAS,CAAC,IAC3G,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,QAAQ,KAC5B,iCAA2B,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,QAAQ,IAC5F,QAAQ,CACkB,CAC5B,CAAC,CACoB,EACvB,uEAAgB,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,YAErC,CACX,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["isoly.Currency"],"sources":["src/components/input/demo/price/style.css?tag=smoothly-input-price-demo&encapsulation=scoped","src/components/input/demo/price/index.tsx"],"sourcesContent":[":host {\n\tdisplay: block;\n}\n","import { Component, h, Host, State, VNode } from \"@stencil/core\"\nimport { isoly } from \"isoly\"\n\n@Component({\n\ttag: \"smoothly-input-price-demo\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputPriceDemo {\n\t@State() currencies: isoly.Currency[] = [\"EUR\", \"USD\", \"GBP\"]\n\t@State() currency?: isoly.Currency = \"USD\"\n\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<h2>State demo on smoothly-input</h2>\n\t\t\t\t<p>This demo/test the internal state of the smoothly-input component.</p>\n\t\t\t\t<p>The currency of the price should update when switching between the currencies.</p>\n\t\t\t\t<smoothly-input-radio\n\t\t\t\t\tname={\"currency\"}\n\t\t\t\t\tonSmoothlyInput={e => (this.currency = isoly.Currency.is(e.detail.currency) ? e.detail.currency : undefined)}>\n\t\t\t\t\t{this.currencies.map(currency => (\n\t\t\t\t\t\t<smoothly-input-radio-item key={currency} selected={currency == this.currency} value={currency}>\n\t\t\t\t\t\t\t{currency}\n\t\t\t\t\t\t</smoothly-input-radio-item>\n\t\t\t\t\t))}\n\t\t\t\t</smoothly-input-radio>\n\t\t\t\t<smoothly-input type={\"price\"} currency={this.currency}>\n\t\t\t\t\tprice\n\t\t\t\t</smoothly-input>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
+{"file":"p-d84d93f2.js","mappings":";;;;;;;AAAA,MAAM,QAAQ,GAAG,gDAAgD,CAAC;AAClE,qCAAe,QAAQ;;MCOV,sBAAsB;;;;0BACM,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;wBACxB,KAAK;;IAE1C,MAAM;QACL,QACC,EAAC,IAAI,uDACJ,4FAAqC,EACrC,iIAAyE,EACzE,6IAAqF,EACrF,6EACC,IAAI,EAAE,UAAU,EAChB,eAAe,EAAE,CAAC,KAAK,IAAI,CAAC,QAAQ,GAAGA,QAAc,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,QAAQ,GAAG,SAAS,CAAC,IAC3G,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,QAAQ,KAC5B,iCAA2B,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,QAAQ,IAC5F,QAAQ,CACkB,CAC5B,CAAC,CACoB,EACvB,uEAAgB,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,YAErC,CACX,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["isoly.Currency"],"sources":["src/components/input/demo/price/style.css?tag=smoothly-input-price-demo&encapsulation=scoped","src/components/input/demo/price/index.tsx"],"sourcesContent":[":host {\n\tdisplay: block;\n}\n","import { Component, h, Host, State, VNode } from \"@stencil/core\"\nimport { isoly } from \"isoly\"\n\n@Component({\n\ttag: \"smoothly-input-price-demo\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputPriceDemo {\n\t@State() currencies: isoly.Currency[] = [\"EUR\", \"USD\", \"GBP\"]\n\t@State() currency?: isoly.Currency = \"USD\"\n\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<h2>State demo on smoothly-input</h2>\n\t\t\t\t<p>This demo/test the internal state of the smoothly-input component.</p>\n\t\t\t\t<p>The currency of the price should update when switching between the currencies.</p>\n\t\t\t\t<smoothly-input-radio\n\t\t\t\t\tname={\"currency\"}\n\t\t\t\t\tonSmoothlyInput={e => (this.currency = isoly.Currency.is(e.detail.currency) ? e.detail.currency : undefined)}>\n\t\t\t\t\t{this.currencies.map(currency => (\n\t\t\t\t\t\t<smoothly-input-radio-item key={currency} selected={currency == this.currency} value={currency}>\n\t\t\t\t\t\t\t{currency}\n\t\t\t\t\t\t</smoothly-input-radio-item>\n\t\t\t\t\t))}\n\t\t\t\t</smoothly-input-radio>\n\t\t\t\t<smoothly-input type={\"price\"} currency={this.currency}>\n\t\t\t\t\tprice\n\t\t\t\t</smoothly-input>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/components/{p-6c22a95a.js → p-e29ce583.js}

@@ -1,37 +1,37 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-f765921a.js';
-import { d as defineCustomElement$x } from './p-f9770ff7.js';
-import { d as defineCustomElement$w } from './p-7c5243b2.js';
-import { d as defineCustomElement$v } from './p-6ead1a42.js';
-import { d as defineCustomElement$u } from './p-2020cb82.js';
-import { d as defineCustomElement$t } from './p-b4bb3e74.js';
-import { d as defineCustomElement$s } from './p-06e94eb0.js';
-import { d as defineCustomElement$r } from './p-482b7713.js';
-import { d as defineCustomElement$q } from './p-53ef7cd2.js';
-import { d as defineCustomElement$p } from './p-6dfe2edb.js';
-import { d as defineCustomElement$o } from './p-bdfcae2a.js';
-import { d as defineCustomElement$n } from './p-061353e6.js';
-import { d as defineCustomElement$m } from './p-b5bca419.js';
-import { d as defineCustomElement$l } from './p-51d51732.js';
-import { d as defineCustomElement$k } from './p-f47eb337.js';
-import { d as defineCustomElement$j } from './p-5bbf4b7e.js';
-import { d as defineCustomElement$i } from './p-f5e15f8c.js';
-import { d as defineCustomElement$h } from './p-cc15c25a.js';
-import { d as defineCustomElement$g } from './p-6000a56c.js';
-import { d as defineCustomElement$f } from './p-6bce4d32.js';
-import { d as defineCustomElement$e } from './p-95d3df21.js';
-import { d as defineCustomElement$d } from './p-4d3cdc01.js';
-import { d as defineCustomElement$c } from './p-17e815cf.js';
-import { d as defineCustomElement$b } from './p-fcc5ab02.js';
-import { d as defineCustomElement$a } from './p-86d3b8ad.js';
-import { d as defineCustomElement$9 } from './p-0168449e.js';
-import { d as defineCustomElement$8 } from './p-b6dda896.js';
-import { d as defineCustomElement$7 } from './p-d35746af.js';
-import { d as defineCustomElement$6 } from './p-478e2d25.js';
-import { d as defineCustomElement$5 } from './p-d41d7830.js';
-import { d as defineCustomElement$4 } from './p-a6c3baf1.js';
-import { d as defineCustomElement$3 } from './p-d2d048b2.js';
-import { d as defineCustomElement$2 } from './p-e07ca0d2.js';
-import { d as defineCustomElement$1 } from './p-0cfd31a4.js';
+import { d as defineCustomElement$x } from './p-4f80c811.js';
+import { d as defineCustomElement$w } from './p-f770567b.js';
+import { d as defineCustomElement$v } from './p-96acfe2c.js';
+import { d as defineCustomElement$u } from './p-f46dd8e4.js';
+import { d as defineCustomElement$t } from './p-4c6fe645.js';
+import { d as defineCustomElement$s } from './p-991bc1b1.js';
+import { d as defineCustomElement$r } from './p-8120c99f.js';
+import { d as defineCustomElement$q } from './p-f6149a35.js';
+import { d as defineCustomElement$p } from './p-1c62f140.js';
+import { d as defineCustomElement$o } from './p-5aa92290.js';
+import { d as defineCustomElement$n } from './p-ca69a0ef.js';
+import { d as defineCustomElement$m } from './p-c63db1c1.js';
+import { d as defineCustomElement$l } from './p-0b16cab5.js';
+import { d as defineCustomElement$k } from './p-083143a9.js';
+import { d as defineCustomElement$j } from './p-edcdcc51.js';
+import { d as defineCustomElement$i } from './p-405b7f06.js';
+import { d as defineCustomElement$h } from './p-ab4f6f94.js';
+import { d as defineCustomElement$g } from './p-878c6ba2.js';
+import { d as defineCustomElement$f } from './p-82b00748.js';
+import { d as defineCustomElement$e } from './p-9a91c77c.js';
+import { d as defineCustomElement$d } from './p-4338ac8d.js';
+import { d as defineCustomElement$c } from './p-13f400dc.js';
+import { d as defineCustomElement$b } from './p-e8d7c6da.js';
+import { d as defineCustomElement$a } from './p-08159d78.js';
+import { d as defineCustomElement$9 } from './p-f64b103b.js';
+import { d as defineCustomElement$8 } from './p-05eefe3c.js';
+import { d as defineCustomElement$7 } from './p-a560de93.js';
+import { d as defineCustomElement$6 } from './p-04e1a322.js';
+import { d as defineCustomElement$5 } from './p-4d44c37a.js';
+import { d as defineCustomElement$4 } from './p-3e30f0e3.js';
+import { d as defineCustomElement$3 } from './p-07ed0ebd.js';
+import { d as defineCustomElement$2 } from './p-550a71dc.js';
+import { d as defineCustomElement$1 } from './p-c77944e7.js';
 
 const styleCss = ".sc-smoothly-next-demo-h{display:grid;gap:5rem;box-sizing:border-box;max-width:80rem;width:100%;margin:auto;padding:2rem}";
 const SmoothlyNextDemoStyle0 = styleCss;
@@ -42,7 +42,7 @@ const SmoothlyNextDemo = proxyCustomElement(class SmoothlyNextDemo extends H {
         this.__registerHost();
     }
     render() {
-        return (h(Host, { key: 'd68c0979b5132c5dcb0764454ace4fc8f4b64983' }, h("smoothly-next-demo-group", { key: '846702fef150fe18cfdd909b1a1c2d64c1ff5242' }), h("smoothly-next-demo-colspan", { key: '244cebea8a6e51b398ba7c2af2cfc41da80e5121' }), h("smoothly-next-demo-simple", { key: 'fda034e25449569e6543e12cb1836d9421a9285f' }), h("smoothly-next-demo-nested", { key: 'c00ed11e4fdd08c2478153ce3bd5391fcef86440' }), h("smoothly-next-table-demo-filtered", { key: 'd058bfb651c724b5497eb49b93a90480790daf7d' })));
+        return (h(Host, { key: '623ee286c870010d07f78c86d65a5e0acfddc0fb' }, h("smoothly-next-demo-group", { key: 'ead07b554223bc4c8a178aaad2b933e6fcf6be29' }), h("smoothly-next-demo-colspan", { key: 'd5da62f2f5c67b5ba2e2524050b631e927487a71' }), h("smoothly-next-demo-simple", { key: '50eaaaf73bbf68eff78068eaeace5eb793b7a979' }), h("smoothly-next-demo-nested", { key: 'a695bb7ff0dcb529866b9484c01e33a5da5dc894' }), h("smoothly-next-table-demo-filtered", { key: '05246c90e3650d4e12279639e63b93944885e4a3' })));
     }
     static get style() { return SmoothlyNextDemoStyle0; }
 }, [2, "smoothly-next-demo"]);
@@ -228,4 +228,4 @@ defineCustomElement();
 
 export { SmoothlyNextDemo as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-6c22a95a.js.map
+//# sourceMappingURL=p-e29ce583.js.map

package/dist/components/{p-6c22a95a.js.map → p-e29ce583.js.map}

@@ -1 +1 @@
-{"file":"p-6c22a95a.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,QAAQ,GAAG,2HAA2H,CAAC;AAC7I,+BAAe,QAAQ;;MCMV,gBAAgB;;;;;IAC5B,MAAM;QACL,QACC,EAAC,IAAI,uDACJ,kFAA4B,EAC5B,oFAA8B,EAC9B,mFAA6B,EAC7B,mFAA6B,EAC7B,2FAAqC,CAC/B,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/next/demo/style.css?tag=smoothly-next-demo&encapsulation=scoped","src/components/next/demo/index.tsx"],"sourcesContent":[":host {\n\tdisplay: grid;\n\tgap: 5rem;\n\tbox-sizing: border-box;\n\tmax-width: 80rem;\n\twidth: 100%;\n\tmargin: auto;\n\tpadding: 2rem;\n}\n","import { Component, h, Host, VNode } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-next-demo\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyNextDemo {\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<smoothly-next-demo-group />\n\t\t\t\t<smoothly-next-demo-colspan />\n\t\t\t\t<smoothly-next-demo-simple />\n\t\t\t\t<smoothly-next-demo-nested />\n\t\t\t\t<smoothly-next-table-demo-filtered />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
+{"file":"p-e29ce583.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,QAAQ,GAAG,2HAA2H,CAAC;AAC7I,+BAAe,QAAQ;;MCMV,gBAAgB;;;;;IAC5B,MAAM;QACL,QACC,EAAC,IAAI,uDACJ,kFAA4B,EAC5B,oFAA8B,EAC9B,mFAA6B,EAC7B,mFAA6B,EAC7B,2FAAqC,CAC/B,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/next/demo/style.css?tag=smoothly-next-demo&encapsulation=scoped","src/components/next/demo/index.tsx"],"sourcesContent":[":host {\n\tdisplay: grid;\n\tgap: 5rem;\n\tbox-sizing: border-box;\n\tmax-width: 80rem;\n\twidth: 100%;\n\tmargin: auto;\n\tpadding: 2rem;\n}\n","import { Component, h, Host, VNode } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-next-demo\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyNextDemo {\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<smoothly-next-demo-group />\n\t\t\t\t<smoothly-next-demo-colspan />\n\t\t\t\t<smoothly-next-demo-simple />\n\t\t\t\t<smoothly-next-demo-nested />\n\t\t\t\t<smoothly-next-table-demo-filtered />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/components/{p-afffe85e.js → p-e3d11a1b.js}

@@ -3,19 +3,19 @@ import { n as number, A as Alpha2, D as Date } from './p-390767c7.js';
 import { f as from } from './p-e057cdb7.js';
 import { o as object, s as string } from './p-d471066b.js';
 import { f as fromIs } from './p-8e1e509d.js';
-import { d as defineCustomElement$d } from './p-be6d380e.js';
-import { d as defineCustomElement$c } from './p-e5bd19b5.js';
-import { d as defineCustomElement$b } from './p-76514c29.js';
-import { d as defineCustomElement$a } from './p-061353e6.js';
-import { d as defineCustomElement$9 } from './p-b5bca419.js';
-import { d as defineCustomElement$8 } from './p-51d51732.js';
-import { d as defineCustomElement$7 } from './p-bfb63e71.js';
-import { d as defineCustomElement$6 } from './p-4380feb9.js';
-import { d as defineCustomElement$5 } from './p-4713a48e.js';
-import { d as defineCustomElement$4 } from './p-f47eb337.js';
-import { d as defineCustomElement$3 } from './p-9702b067.js';
-import { d as defineCustomElement$2 } from './p-5bbf4b7e.js';
-import { d as defineCustomElement$1 } from './p-0cfd31a4.js';
+import { d as defineCustomElement$d } from './p-306f9cb3.js';
+import { d as defineCustomElement$c } from './p-686ec006.js';
+import { d as defineCustomElement$b } from './p-5b16ff97.js';
+import { d as defineCustomElement$a } from './p-ca69a0ef.js';
+import { d as defineCustomElement$9 } from './p-c63db1c1.js';
+import { d as defineCustomElement$8 } from './p-0b16cab5.js';
+import { d as defineCustomElement$7 } from './p-f2fc107c.js';
+import { d as defineCustomElement$6 } from './p-b20e3206.js';
+import { d as defineCustomElement$5 } from './p-2738b430.js';
+import { d as defineCustomElement$4 } from './p-083143a9.js';
+import { d as defineCustomElement$3 } from './p-631148b4.js';
+import { d as defineCustomElement$2 } from './p-edcdcc51.js';
+import { d as defineCustomElement$1 } from './p-c77944e7.js';
 
 var Contact;
 (function (Contact) {
@@ -36,7 +36,7 @@ const SmoothlyFormDemoTyped = proxyCustomElement(class SmoothlyFormDemoTyped ext
         this.__registerHost();
     }
     render() {
-        return (h(Host, { key: 'c36986840edf41c6d2d85faea312ec1e6daa067d' }, h("h2", { key: 'ed664931573e0897f527e6513dc5e882e3bb63f5' }, "Typed Contact"), h("smoothly-form", { key: '37f8b0cefc578efed3de873e2dffc5edb388cee8', validator: Contact.type }, h("smoothly-input", { key: '651ac5c0e1e39548ead31e5ac104afda01c7ec65', name: "name.first" }, "First Name"), h("smoothly-input", { key: '685ef1e7b14ab5d26c1663832f4f695e5d000047', name: "name.middle" }, "Middle Name (optional)"), h("smoothly-input", { key: 'b2ac420d440c286498bddd275ac2f66228f16d07', name: "name.last" }, "Last Name"), h("smoothly-input", { key: '310185b6677ebb761a81eb2f96fd1b5b2aa605f1', name: "age", type: "integer" }, "Age (18-120)"), h("smoothly-input-select", { key: 'b1292c78e537a0470392717463e72f5263a9fcdb', name: "country" }, h("span", { key: '5e7543f35219050cf2278c1675e239360bb02cb2', slot: "label" }, "Country"), Alpha2.values.map(country => (h("smoothly-item", { value: country }, from(country))))), h("smoothly-input-date", { key: '90a7bf1deb04d2a5b3069120c8f739c2e3ff353c', name: "birthday" }, "Date of birth"), h("smoothly-input-reset", { key: 'a4def9e7f5490c60a551615648f0150c662542b7', slot: "reset", type: "form", size: "icon", color: "warning" }), h("smoothly-input-submit", { key: 'cfe2f21d200097b1ecb65e680c179a5602c95b5b', slot: "submit", size: "icon", color: "success" }))));
+        return (h(Host, { key: '4ed477f128d5b098d3310aaa266c4af1922832a1' }, h("h2", { key: '1e8f3c9b75144462366853f9f6cf5a1c5f0faf65' }, "Typed Contact"), h("smoothly-form", { key: 'a519b7dbafb502af88cbf9a5ba47901ef4be0cb6', validator: Contact.type }, h("smoothly-input", { key: 'f147113ea3704978efcd40cba1cc37f0ca0eb9bf', name: "name.first" }, "First Name"), h("smoothly-input", { key: 'a9a36af0fa69a2a05e96d8de774f5c688c9c1bfd', name: "name.middle" }, "Middle Name (optional)"), h("smoothly-input", { key: '0717cf0ca06d930b20c9462b8d0b1e14ff6d82a1', name: "name.last" }, "Last Name"), h("smoothly-input", { key: '57afba493b35c43327790befeb1269cdec67b605', name: "age", type: "integer" }, "Age (18-120)"), h("smoothly-input-select", { key: 'd01d7aa69d6f1e24e3790580867cdccfeeb5fc50', name: "country" }, h("span", { key: '41d0cc36d65c3661101f9a17d37c037f76904a59', slot: "label" }, "Country"), Alpha2.values.map(country => (h("smoothly-item", { value: country }, from(country))))), h("smoothly-input-date", { key: '7e169ca0ec70c91d19b54c1b7a982947d40dcaee', name: "birthday" }, "Date of birth"), h("smoothly-input-reset", { key: 'b051e825afa1f684438e9190c8c26de4036473c9', slot: "reset", type: "form", size: "icon", color: "warning" }), h("smoothly-input-submit", { key: '02c15203368038bd7692528587764d27cc36b8e3', slot: "submit", size: "icon", color: "success" }))));
     }
     static get style() { return SmoothlyFormDemoTypedStyle0; }
 }, [2, "smoothly-form-demo-typed"]);
@@ -122,4 +122,4 @@ defineCustomElement();
 
 export { SmoothlyFormDemoTyped as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-afffe85e.js.map
+//# sourceMappingURL=p-e3d11a1b.js.map