smoothly 1.0.0-alpha.21 → 1.0.0-alpha.211

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

@@ -1,47 +1,58 @@
 smoothly-app {
+	--header-height: 5rem;
 	display: block;
-	scrollbar-width: none;
 }
+
+smoothly-app main {
+	height: calc(100dvh - var(--header-height));
+
+}
+
 smoothly-app[hidden] {
 	display: none;
 }
-smoothly-app > smoothly-notifier{
+
+smoothly-app>smoothly-notifier {
+	height: 100%;
 	background: none;
 }
-smoothly-app > smoothly-notifier > header{
-	background: rgba(var(--smoothly-color));
-	color: rgba(var(--smoothly-color-contrast));
-}
-smoothly-app > smoothly-notifier > header {
-	position: fixed;
+
+smoothly-app>smoothly-notifier>header {
+	position: sticky;
 	top: 0;
-	left: 0;
-	width: 100%;
 	z-index: 5;
-	height: 5rem;
+	width: 100%;
+	height: var(--header-height);
 	display: flex;
 	justify-content: space-between;
+	box-sizing: border-box;
 	align-items: center;
 	box-shadow: 0 2px 5px 0 rgba(var(--smoothly-dark-shadow));
 	border-bottom: 1px solid rgba(var(--smoothly-dark-color));
+	background: rgba(var(--smoothly-color));
+	color: rgba(var(--smoothly-color-contrast));
 }
-smoothly-app > smoothly-notifier > header > nav {
+
+smoothly-app>smoothly-notifier>header>nav {
 	width: 100%;
 	flex-shrink: 2;
+	height: 100%;
 }
 
-smoothly-app > smoothly-notifier > header > nav,
-smoothly-app > smoothly-notifier > header > nav > ul {
+smoothly-app>smoothly-notifier>header>nav,
+smoothly-app>smoothly-notifier>header>nav>ul {
 	display: flex;
-	height: 100%;
 	margin: 0;
 }
-smoothly-app > smoothly-notifier > header > h1 {
-	margin-left: 3.8rem;
+
+smoothly-app>smoothly-notifier>header>h1 {
+	margin-left: 1rem;
+	margin-bottom: 0.8em;
 	display: flex;
 	height: 100%;
 }
-smoothly-app > smoothly-notifier > header > h1 > a {
+
+smoothly-app>smoothly-notifier>header>h1>a {
 	display: inline-block;
 	align-self: center;
 	size: 100%;
@@ -49,49 +60,103 @@ smoothly-app > smoothly-notifier > header > h1 > a {
 	text-decoration: none;
 	white-space: nowrap;
 }
-smoothly-app > smoothly-notifier > header > nav > ul  li a {
+
+smoothly-app>smoothly-notifier>header>nav>ul li a {
 	line-height: 1.6cm;
 }
-smoothly-app > smoothly-notifier > header > nav > ul  li a {
+
+smoothly-app>smoothly-notifier>header>nav>ul li a {
 	line-height: 1.6cm;
 }
-smoothly-app > smoothly-notifier > header > nav > ul {
+
+smoothly-app>smoothly-notifier>header>nav>ul {
 	width: 100%;
 }
-smoothly-app > smoothly-notifier > header > nav > ul li a {
+
+smoothly-app>smoothly-notifier>header>nav>ul>div.nav-start-container {
+	display: flex;
+	align-items: center;
+	height: 100%;
+}
+
+smoothly-app>smoothly-notifier>header>nav>ul>div.nav-end-container {
+	display: flex;
+	gap: 1rem;
+	align-items: center;
+	height: 100%;
+	margin-left: auto;
+	margin-right: 1rem;
+}
+
+smoothly-app>smoothly-notifier>header>nav>ul>[slot="nav-end"] {
+	width: fit-content;
+	gap: 0.5em;
+	align-self: center;
+	height: fit-content;
+	margin-left: 10rem;
+}
+
+smoothly-app>smoothly-notifier>header>nav>ul li a {
 	display: flex;
 	height: 2.3rem;
-	margin: 0 0.4cm;
 	text-decoration: none;
 	align-items: center;
 	align-self: center;
 }
-smoothly-app > smoothly-notifier > main {
-	position: relative;
-	top: 5rem;
-}
 
 @media screen and (max-width: 900px) {
-  smoothly-app > smoothly-notifier > header > nav,
-  smoothly-app > smoothly-notifier > header > nav > ul {
-		width: 10em;
-		top: 2.5rem;
+	smoothly-app>smoothly-notifier>header>nav {
+		width: 50dvw;
+		max-width: 15rem;
+		top: 100%;
 		position: absolute;
+		max-height: calc(100dvh - var(--header-height));
+		overflow-y: scroll;
 		right: 0;
-    flex-direction: column;
-  }
-  smoothly-app > smoothly-notifier > header > nav > ul  li {
-    margin-right: 0;
-    margin-bottom: 1em;
+		height: auto;
+	}
+
+	smoothly-app>smoothly-notifier>header>nav,
+	smoothly-app>smoothly-notifier>header>nav>ul {
+		flex-direction: column;
 		background-color: rgba(var(--smoothly-color));
+	}
+
+	smoothly-app>smoothly-notifier>header>nav>ul {
+		padding: 1.5rem;
+		box-sizing: border-box;
+	}
+
+	smoothly-app>smoothly-notifier>header>nav>ul li {
+		margin-right: 0;
+		margin-bottom: 1em;
 		width: 100%;
-  }
-	smoothly-app > smoothly-notifier > header > nav > ul smoothly-burger{
+	}
+
+	smoothly-app>smoothly-notifier>header>smoothly-burger {
 		position: absolute;
 		top: 0;
 		right: 0;
 	}
+
+	smoothly-app>smoothly-notifier>header>nav>ul>[slot="nav-start"] {
+		display: none;
+	}
+
+	smoothly-app>smoothly-notifier>header>nav>ul>div.nav-start-container,
+	smoothly-app>smoothly-notifier>header>nav>ul>div.nav-end-container {
+		flex-direction: column;
+		margin: 0;
+		align-items: start;
+		justify-content: center;
+		gap: 1em;
+	}
+
+	smoothly-app>smoothly-notifier>header>nav>ul>div.nav-start-container>*:last-child {
+		margin-bottom: 1em;
+	}
 }
-.true:not([menuOpen]) > * {
+
+smoothly-app>smoothly-notifier>header>nav:not(.menu-open) {
 	display: none;
 }

package/dist/collection/components/app-demo/index.js

@@ -4,7 +4,7 @@ export class SmoothlyAppDemo {
     this.baseUrl = undefined;
   }
   render() {
-    return (h("smoothly-app", { color: "medium", label: "Smoothly Demo" }, h("smoothly-app-room", { path: "/links", label: "Links" }, h("smoothly-input", { type: "text" }, "Default"), h("div", { style: { padding: "1em", maxWidth: "12em" } }, h("smoothly-button", { fill: "solid", color: "danger", link: "https://google.com" }, "open"), h("smoothly-button", { fill: "solid", color: "danger", link: "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf", download: true }, "download"), h("smoothly-button", { fill: "solid", color: "danger", onClick: () => alert("clicked") }, "action"), h("smoothly-button", { disabled: true, fill: "solid", color: "danger", onClick: () => alert("clicked") }, "action"), h("smoothly-button", { type: "link", fill: "clear", color: "danger", onClick: () => alert("clicked") }, "action link"))), h("smoothly-app-room", { path: "/input", label: "Input" }, h("smoothly-input-demo", null)), h("smoothly-app-room", { path: "/button", label: "Button" }, h("smoothly-button-demo", null)), h("smoothly-app-room", { path: "/dialog", label: "Dialog" }, h("smoothly-dialog-demo", null)), h("smoothly-app-room", { path: "/display", label: "Display", icon: "eye-outline" }, h("smoothly-display-demo", null)), h("smoothly-app-room", { path: "/table", label: "Table" }, h("smoothly-table-demo", null)), h("smoothly-app-room", { path: "/select", label: "Select" }, h("smoothly-select-demo", null)), h("smoothly-app-room", { path: "/icon", label: "Icon" }, h("smoothly-icon-demo", null)), h("smoothly-app-room", { path: "/old", label: "Old", to: "select" })));
+    return (h("smoothly-app", { color: "dark", label: "Smoothly Demo", home: "/root", ref: e => (this.app = e) }, h("smoothly-trigger", { slot: "nav-start", type: "link", name: "logout" }, h("smoothly-icon", { toolTip: "Log out", name: "log-out", size: "medium" })), h("smoothly-app-room", { path: "/root", label: "root" }, h("h2", null, "Theme"), h("smoothly-theme-picker", null, h("smoothly-item", { value: "assets/style/smoothly.css" }, "Smoothly"), h("smoothly-item", { value: "https://app.issuefab.com/assets/style/index.css" }, "Issuefab"), h("smoothly-item", { value: "https://app.proquse.com/assets/style/index.css" }, "Proquse"), h("smoothly-item", { value: "https://app.weekmeter.com/assets/style/index.css" }, "Weekmeter"), h("smoothly-item", { value: "https://dash.pax2pay.app/p2pdash.css" }, "Pax2Pay Dashboard"), h("smoothly-item", { value: "https://ui.pax2pay.app/assets/style/pax2pay.css" }, "Pax2Pay Portal"), h("smoothly-item", { value: "https://theme.payfunc.com/intergiro/index.css" }, "Intergiro Monitor"), h("smoothly-item", { value: "https://theme.payfunc.com/light/index.css" }, "Payfunc Light"), h("smoothly-item", { value: "https://theme.payfunc.com/dark/index.css" }, "Payfunc Dark")), h("smoothly-theme-colors", null), h("smoothly-button", { type: "link", link: "/redirect" }, "To redirect"), h("smoothly-button", { type: "link", link: "/redirect" }, "To /redirect"), h("smoothly-button", { type: "link", link: new URL("/redirect", window.location.origin).href }, "To new URL(\"redirect\")"), h("smoothly-button", { type: "link", link: "redirect/nested" }, "To redirect nested")), h("smoothly-app-room", { path: "/links", label: "Links" }, h("smoothly-input", { type: "text" }, "Default"), h("div", { style: { padding: "1em", maxWidth: "12em" } }, h("smoothly-button", { fill: "solid", color: "danger", link: "https://google.com" }, "open"), h("smoothly-button", { fill: "solid", color: "danger", link: "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf", type: "download" }, "download"), h("smoothly-button", { fill: "solid", color: "danger", onClick: () => alert("clicked") }, "action"), h("smoothly-button", { disabled: true, fill: "solid", color: "danger", onClick: () => alert("clicked") }, "action"), h("smoothly-button", { type: "link", fill: "clear", color: "danger", onClick: () => alert("clicked") }, "action link"))), h("smoothly-app-room", { path: "/input", label: "Input" }, h("smoothly-input-demo", null)), h("smoothly-app-room", { path: "/button", label: "Button" }, h("smoothly-button-demo", null)), h("smoothly-app-room", { path: "/dialog", label: "Dialog" }, h("smoothly-dialog-demo", null)), h("smoothly-app-room", { path: "/display", label: "Display", icon: "eye-outline" }, h("smoothly-display-demo", null)), h("smoothly-app-room", { path: "/table", label: "Table" }, h("smoothly-table-demo", null)), h("smoothly-app-room", { path: "/select", label: "Select" }, h("smoothly-select-demo", null)), h("smoothly-app-room", { path: "/icon", label: "Icon", content: h("smoothly-icon-demo", null) }), h("smoothly-app-room", { path: "/old", label: "Old", to: "select" }), h("smoothly-app-room", { path: "/redirect", label: "Redirect" }, h("smoothly-button", { type: "link", link: "/input" }, "To input"), h("smoothly-button", { type: "link", link: "../button" }, "To button"), h("smoothly-button", { type: "link", link: new URL("/hidden", window.location.origin).href }, "To hidden"), h("smoothly-button", { type: "link", link: "/redirect" }, "To redirect"), h("smoothly-button", { type: "link", link: "nested" }, "To redirect nested, relative path")), h("smoothly-app-room", { path: "/hidden" }, h("p", null, "hello world!")), h("smoothly-app-room", { path: "/redirect/nested" }, "this is a nested room")));
   }
   static get is() { return "smoothly-app-demo"; }
   static get properties() {

package/dist/collection/components/app-demo/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/app-demo/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAKlD,MAAM,OAAO,eAAe;;;;EAE3B,MAAM;IACL,OAAO,CACN,oBAAc,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAC,eAAe;MACjD,yBAAmB,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,OAAO;QAC7C,sBAAgB,IAAI,EAAC,MAAM,cAAyB;QACpD,WAAK,KAAK,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE;UAC/C,uBAAiB,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,oBAAoB,WAEpD;UAClB,uBACC,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,yEAAyE,EAC9E,QAAQ,EAAE,IAAI,eAEG;UAClB,uBAAiB,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,aAE1D;UAClB,uBAAiB,QAAQ,QAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,aAEnE;UAClB,uBAAiB,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,kBAEtE,CACb,CACa;MACpB,yBAAmB,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,OAAO;QAC7C,8BAAuB,CACJ;MACpB,yBAAmB,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ;QAC/C,+BAAwB,CACL;MACpB,yBAAmB,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ;QAC/C,+BAAwB,CACL;MACpB,yBAAmB,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,aAAa;QACpE,gCAAyB,CACN;MACpB,yBAAmB,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,OAAO;QAC7C,8BAAuB,CACJ;MACpB,yBAAmB,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ;QAC/C,+BAAwB,CACL;MACpB,yBAAmB,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,MAAM;QAC3C,6BAAsB,CACH;MACpB,yBAAmB,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,KAAK,EAAC,EAAE,EAAC,QAAQ,GAAqB,CAC7D,CACf,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-app-demo\",\n})\nexport class SmoothlyAppDemo {\n\t@Prop() baseUrl: string\n\trender() {\n\t\treturn (\n\t\t\t<smoothly-app color=\"medium\" label=\"Smoothly Demo\">\n\t\t\t\t<smoothly-app-room path=\"/links\" label=\"Links\">\n\t\t\t\t\t<smoothly-input type=\"text\">Default</smoothly-input>\n\t\t\t\t\t<div style={{ padding: \"1em\", maxWidth: \"12em\" }}>\n\t\t\t\t\t\t<smoothly-button fill=\"solid\" color=\"danger\" link=\"https://google.com\">\n\t\t\t\t\t\t\topen\n\t\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t\t<smoothly-button\n\t\t\t\t\t\t\tfill=\"solid\"\n\t\t\t\t\t\t\tcolor=\"danger\"\n\t\t\t\t\t\t\tlink=\"https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf\"\n\t\t\t\t\t\t\tdownload={true}>\n\t\t\t\t\t\t\tdownload\n\t\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t\t<smoothly-button fill=\"solid\" color=\"danger\" onClick={() => alert(\"clicked\")}>\n\t\t\t\t\t\t\taction\n\t\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t\t<smoothly-button disabled fill=\"solid\" color=\"danger\" onClick={() => alert(\"clicked\")}>\n\t\t\t\t\t\t\taction\n\t\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t\t<smoothly-button type=\"link\" fill=\"clear\" color=\"danger\" onClick={() => alert(\"clicked\")}>\n\t\t\t\t\t\t\taction link\n\t\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t</div>\n\t\t\t\t</smoothly-app-room>\n\t\t\t\t<smoothly-app-room path=\"/input\" label=\"Input\">\n\t\t\t\t\t<smoothly-input-demo />\n\t\t\t\t</smoothly-app-room>\n\t\t\t\t<smoothly-app-room path=\"/button\" label=\"Button\">\n\t\t\t\t\t<smoothly-button-demo />\n\t\t\t\t</smoothly-app-room>\n\t\t\t\t<smoothly-app-room path=\"/dialog\" label=\"Dialog\">\n\t\t\t\t\t<smoothly-dialog-demo />\n\t\t\t\t</smoothly-app-room>\n\t\t\t\t<smoothly-app-room path=\"/display\" label=\"Display\" icon=\"eye-outline\">\n\t\t\t\t\t<smoothly-display-demo />\n\t\t\t\t</smoothly-app-room>\n\t\t\t\t<smoothly-app-room path=\"/table\" label=\"Table\">\n\t\t\t\t\t<smoothly-table-demo />\n\t\t\t\t</smoothly-app-room>\n\t\t\t\t<smoothly-app-room path=\"/select\" label=\"Select\">\n\t\t\t\t\t<smoothly-select-demo />\n\t\t\t\t</smoothly-app-room>\n\t\t\t\t<smoothly-app-room path=\"/icon\" label=\"Icon\">\n\t\t\t\t\t<smoothly-icon-demo />\n\t\t\t\t</smoothly-app-room>\n\t\t\t\t<smoothly-app-room path=\"/old\" label=\"Old\" to=\"select\"></smoothly-app-room>\n\t\t\t</smoothly-app>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/app-demo/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-app-demo\",\n})\nexport class SmoothlyAppDemo {\n\t@Prop() baseUrl: string\n\tapp?: HTMLSmoothlyAppElement\n\trender() {\n\t\treturn (\n\t\t\t<smoothly-app color=\"dark\" label=\"Smoothly Demo\" home=\"/root\" ref={e => (this.app = e)}>\n\t\t\t\t<smoothly-trigger slot=\"nav-start\" type=\"link\" name=\"logout\">\n\t\t\t\t\t<smoothly-icon toolTip={\"Log out\"} name=\"log-out\" size=\"medium\"></smoothly-icon>\n\t\t\t\t</smoothly-trigger>\n\t\t\t\t<smoothly-app-room path=\"/root\" label=\"root\">\n\t\t\t\t\t<h2>Theme</h2>\n\t\t\t\t\t<smoothly-theme-picker>\n\t\t\t\t\t\t<smoothly-item value=\"assets/style/smoothly.css\">Smoothly</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"https://app.issuefab.com/assets/style/index.css\">Issuefab</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"https://app.proquse.com/assets/style/index.css\">Proquse</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"https://app.weekmeter.com/assets/style/index.css\">Weekmeter</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"https://dash.pax2pay.app/p2pdash.css\">Pax2Pay Dashboard</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"https://ui.pax2pay.app/assets/style/pax2pay.css\">Pax2Pay Portal</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"https://theme.payfunc.com/intergiro/index.css\">Intergiro Monitor</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"https://theme.payfunc.com/light/index.css\">Payfunc Light</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"https://theme.payfunc.com/dark/index.css\">Payfunc Dark</smoothly-item>\n\t\t\t\t\t</smoothly-theme-picker>\n\t\t\t\t\t<smoothly-theme-colors></smoothly-theme-colors>\n\t\t\t\t\t<smoothly-button type=\"link\" link=\"/redirect\">\n\t\t\t\t\t\tTo redirect\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button type=\"link\" link=\"/redirect\">\n\t\t\t\t\t\tTo /redirect\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button type=\"link\" link={new URL(\"/redirect\", window.location.origin).href}>\n\t\t\t\t\t\tTo new URL(\"redirect\")\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button type=\"link\" link=\"redirect/nested\">\n\t\t\t\t\t\tTo redirect nested\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t</smoothly-app-room>\n\t\t\t\t<smoothly-app-room path=\"/links\" label=\"Links\">\n\t\t\t\t\t<smoothly-input type=\"text\">Default</smoothly-input>\n\t\t\t\t\t<div style={{ padding: \"1em\", maxWidth: \"12em\" }}>\n\t\t\t\t\t\t<smoothly-button fill=\"solid\" color=\"danger\" link=\"https://google.com\">\n\t\t\t\t\t\t\topen\n\t\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t\t<smoothly-button\n\t\t\t\t\t\t\tfill=\"solid\"\n\t\t\t\t\t\t\tcolor=\"danger\"\n\t\t\t\t\t\t\tlink=\"https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf\"\n\t\t\t\t\t\t\ttype=\"download\">\n\t\t\t\t\t\t\tdownload\n\t\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t\t<smoothly-button fill=\"solid\" color=\"danger\" onClick={() => alert(\"clicked\")}>\n\t\t\t\t\t\t\taction\n\t\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t\t<smoothly-button disabled fill=\"solid\" color=\"danger\" onClick={() => alert(\"clicked\")}>\n\t\t\t\t\t\t\taction\n\t\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t\t<smoothly-button type=\"link\" fill=\"clear\" color=\"danger\" onClick={() => alert(\"clicked\")}>\n\t\t\t\t\t\t\taction link\n\t\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t</div>\n\t\t\t\t</smoothly-app-room>\n\t\t\t\t<smoothly-app-room path=\"/input\" label=\"Input\">\n\t\t\t\t\t<smoothly-input-demo />\n\t\t\t\t</smoothly-app-room>\n\t\t\t\t<smoothly-app-room path=\"/button\" label=\"Button\">\n\t\t\t\t\t<smoothly-button-demo />\n\t\t\t\t</smoothly-app-room>\n\t\t\t\t<smoothly-app-room path=\"/dialog\" label=\"Dialog\">\n\t\t\t\t\t<smoothly-dialog-demo />\n\t\t\t\t</smoothly-app-room>\n\t\t\t\t<smoothly-app-room path=\"/display\" label=\"Display\" icon=\"eye-outline\">\n\t\t\t\t\t<smoothly-display-demo />\n\t\t\t\t</smoothly-app-room>\n\t\t\t\t<smoothly-app-room path=\"/table\" label=\"Table\">\n\t\t\t\t\t<smoothly-table-demo />\n\t\t\t\t</smoothly-app-room>\n\t\t\t\t<smoothly-app-room path=\"/select\" label=\"Select\">\n\t\t\t\t\t<smoothly-select-demo />\n\t\t\t\t</smoothly-app-room>\n\t\t\t\t<smoothly-app-room path=\"/icon\" label=\"Icon\" content={<smoothly-icon-demo />}></smoothly-app-room>\n\t\t\t\t<smoothly-app-room path=\"/old\" label=\"Old\" to=\"select\"></smoothly-app-room>\n\t\t\t\t<smoothly-app-room path=\"/redirect\" label=\"Redirect\">\n\t\t\t\t\t<smoothly-button type=\"link\" link=\"/input\">\n\t\t\t\t\t\tTo input\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button type=\"link\" link=\"../button\">\n\t\t\t\t\t\tTo button\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button type=\"link\" link={new URL(\"/hidden\", window.location.origin).href}>\n\t\t\t\t\t\tTo hidden\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button type=\"link\" link=\"/redirect\">\n\t\t\t\t\t\tTo redirect\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button type=\"link\" link=\"nested\">\n\t\t\t\t\t\tTo redirect nested, relative path\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t</smoothly-app-room>\n\t\t\t\t<smoothly-app-room path=\"/hidden\">\n\t\t\t\t\t<p>hello world!</p>\n\t\t\t\t</smoothly-app-room>\n\t\t\t\t<smoothly-app-room path=\"/redirect/nested\">this is a nested room</smoothly-app-room>\n\t\t\t</smoothly-app>\n\t\t)\n\t}\n}\n"]}

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

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-export class SmoothlyBacktotop {
+export class SmoothlyBackToTop {
   constructor() {
     this.opacity = "0.5";
     this.bottom = "1rem";
@@ -22,9 +22,9 @@ export class SmoothlyBacktotop {
         top: 0,
         left: 0,
         behavior: "smooth",
-      }) }, h("smoothly-icon", { name: "chevron-up-outline" })));
+      }) }, h("smoothly-icon", { name: "caret-up-outline" })));
   }
-  static get is() { return "smoothly-backtotop"; }
+  static get is() { return "smoothly-back-to-top"; }
   static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/backtotop/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAO/D,MAAM,OAAO,iBAAiB;;mBACX,KAAK;kBACN,MAAM;iBACP,MAAM;;;EAEtB,iBAAiB;IAChB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;MACtC,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,IAAI,QAAQ,CAAC,eAAe,CAAC,SAAS,GAAG,EAAE,CAAA;IACvF,CAAC,CAAC,CAAA;EACH,CAAC;EACD,MAAM;IACL,MAAM,YAAY,GAAG;MACpB,WAAW,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;MAC9C,kBAAkB,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;MAClD,UAAU,EAAE,IAAI,CAAC,MAAM;MACvB,SAAS,EAAE,IAAI,CAAC,KAAK;KACrB,CAAA;IACD,OAAO,CACN,EAAC,IAAI,IACJ,KAAK,EAAE,YAAY,EACnB,OAAO,EAAE,GAAG,EAAE,CACb,MAAM,CAAC,QAAQ,CAAC;QACf,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,QAAQ,EAAE,QAAQ;OAClB,CAAC;MAEH,qBAAe,IAAI,EAAC,oBAAoB,GAAiB,CACnD,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Host, Prop, State } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-backtotop\",\n\tstyleUrl: \"style.scss\",\n\tscoped: true,\n})\nexport class SmoothlyBacktotop {\n\t@Prop() opacity = \"0.5\"\n\t@Prop() bottom = \"1rem\"\n\t@Prop() right = \"1rem\"\n\t@State() visible: boolean\n\tcomponentWillLoad() {\n\t\twindow.addEventListener(\"scroll\", () => {\n\t\t\tthis.visible = document.body.scrollTop > 20 || document.documentElement.scrollTop > 20\n\t\t})\n\t}\n\trender() {\n\t\tconst cssVariables = {\n\t\t\t\"--opacity\": this.visible ? this.opacity : \"0\",\n\t\t\t\"--pointer-events\": this.visible ? \"auto\" : \"none\",\n\t\t\t\"--bottom\": this.bottom,\n\t\t\t\"--right\": this.right,\n\t\t}\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tstyle={cssVariables}\n\t\t\t\tonClick={() =>\n\t\t\t\t\twindow.scrollTo({\n\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\tbehavior: \"smooth\",\n\t\t\t\t\t})\n\t\t\t\t}>\n\t\t\t\t<smoothly-icon name=\"chevron-up-outline\"></smoothly-icon>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/backtotop/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAO/D,MAAM,OAAO,iBAAiB;;mBACX,KAAK;kBACN,MAAM;iBACP,MAAM;;;EAEtB,iBAAiB;IAChB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;MACtC,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,IAAI,QAAQ,CAAC,eAAe,CAAC,SAAS,GAAG,EAAE,CAAA;IACvF,CAAC,CAAC,CAAA;EACH,CAAC;EACD,MAAM;IACL,MAAM,YAAY,GAAG;MACpB,WAAW,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;MAC9C,kBAAkB,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;MAClD,UAAU,EAAE,IAAI,CAAC,MAAM;MACvB,SAAS,EAAE,IAAI,CAAC,KAAK;KACrB,CAAA;IACD,OAAO,CACN,EAAC,IAAI,IACJ,KAAK,EAAE,YAAY,EACnB,OAAO,EAAE,GAAG,EAAE,CACb,MAAM,CAAC,QAAQ,CAAC;QACf,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,QAAQ,EAAE,QAAQ;OAClB,CAAC;MAEH,qBAAe,IAAI,EAAC,kBAAkB,GAAiB,CACjD,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Host, Prop, State } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-back-to-top\",\n\tstyleUrl: \"style.scss\",\n\tscoped: true,\n})\nexport class SmoothlyBackToTop {\n\t@Prop() opacity = \"0.5\"\n\t@Prop() bottom = \"1rem\"\n\t@Prop() right = \"1rem\"\n\t@State() visible: boolean\n\tcomponentWillLoad() {\n\t\twindow.addEventListener(\"scroll\", () => {\n\t\t\tthis.visible = document.body.scrollTop > 20 || document.documentElement.scrollTop > 20\n\t\t})\n\t}\n\trender() {\n\t\tconst cssVariables = {\n\t\t\t\"--opacity\": this.visible ? this.opacity : \"0\",\n\t\t\t\"--pointer-events\": this.visible ? \"auto\" : \"none\",\n\t\t\t\"--bottom\": this.bottom,\n\t\t\t\"--right\": this.right,\n\t\t}\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tstyle={cssVariables}\n\t\t\t\tonClick={() =>\n\t\t\t\t\twindow.scrollTo({\n\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\tbehavior: \"smooth\",\n\t\t\t\t\t})\n\t\t\t\t}>\n\t\t\t\t<smoothly-icon name=\"caret-up-outline\"></smoothly-icon>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -4,23 +4,42 @@ export class SmoothlyBurger {
     this.visible = undefined;
     this.open = false;
     this.mediaQuery = "(max-width: 900px)";
+    this.history = undefined;
   }
-  closedHandler() {
-    this.burgerStatus.emit(this.open);
+  componentWillLoad() {
+    this.history = window.matchMedia(this.mediaQuery).matches;
+    if (!window.matchMedia(this.mediaQuery).matches)
+      this.visible = false;
+    else
+      this.visible = true;
+    this.smoothlyNavStatus.emit(!this.visible);
+    this.smoothlyVisibleStatus.emit(this.visible);
+  }
+  openChanged() {
+    this.smoothlyNavStatus.emit(this.open);
+  }
+  clickHandler(event) {
+    if (this.visible)
+      this.open = !this.open;
   }
   resizeHandler() {
-    const reduced = window.matchMedia(this.mediaQuery).matches;
-    if (reduced) {
-      this.visible = true;
-      this.open = true;
-    }
-    else {
-      this.visible = false;
-      this.open = false;
+    const result = window.matchMedia(this.mediaQuery).matches;
+    if (result != this.history) {
+      if (result) {
+        this.visible = true;
+        this.open = false;
+      }
+      else {
+        this.visible = false;
+        this.open = false;
+      }
+      this.smoothlyVisibleStatus.emit(this.visible);
+      this.smoothlyNavStatus.emit(!this.visible);
     }
+    this.history = result;
   }
   render() {
-    return (h(Host, null, h("span", { class: "burger", onClick: () => (this.open = !this.open) }, h("smoothly-icon", { name: "menu" }, " "))));
+    return (h(Host, null, h("span", { class: "burger" }, h("smoothly-icon", { name: "menu" }))));
   }
   static get is() { return "smoothly-burger"; }
   static get encapsulation() { return "scoped"; }
@@ -91,10 +110,30 @@ export class SmoothlyBurger {
       }
     };
   }
+  static get states() {
+    return {
+      "history": {}
+    };
+  }
   static get events() {
     return [{
-        "method": "burgerStatus",
-        "name": "burgerStatus",
+        "method": "smoothlyNavStatus",
+        "name": "smoothlyNavStatus",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "smoothlyVisibleStatus",
+        "name": "smoothlyVisibleStatus",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -109,14 +148,21 @@ export class SmoothlyBurger {
         }
       }];
   }
+  static get elementRef() { return "element"; }
   static get watchers() {
     return [{
         "propName": "open",
-        "methodName": "closedHandler"
+        "methodName": "openChanged"
       }];
   }
   static get listeners() {
     return [{
+        "name": "click",
+        "method": "clickHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
         "name": "resize",
         "method": "resizeHandler",
         "target": "window",

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/burger/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAO5F,MAAM,OAAO,cAAc;;;gBAEqB,KAAK;sBACd,oBAAoB;;EAI1D,aAAa;IACZ,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;EAClC,CAAC;EAGD,aAAa;IACZ,MAAM,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO,CAAA;IAC1D,IAAI,OAAO,EAAE;MACZ,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;MACnB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;KAChB;SAAM;MACN,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;MACpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAA;KACjB;EACF,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,IAAI;MACJ,YAAM,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QAC3D,qBAAe,IAAI,EAAC,MAAM,QAAkB,CACtC,CACD,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Event, EventEmitter, h, Host, Listen, Prop, Watch } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-burger\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyBurger {\n\t@Prop({ mutable: true, reflect: true }) visible: boolean\n\t@Prop({ mutable: true, reflect: true }) open = false\n\t@Prop({ reflect: true }) mediaQuery = \"(max-width: 900px)\"\n\t@Event() burgerStatus: EventEmitter<boolean>\n\n\t@Watch(\"open\")\n\tclosedHandler() {\n\t\tthis.burgerStatus.emit(this.open)\n\t}\n\n\t@Listen(\"resize\", { target: \"window\" })\n\tresizeHandler() {\n\t\tconst reduced = window.matchMedia(this.mediaQuery).matches\n\t\tif (reduced) {\n\t\t\tthis.visible = true\n\t\t\tthis.open = true\n\t\t} else {\n\t\t\tthis.visible = false\n\t\t\tthis.open = false\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<span class=\"burger\" onClick={() => (this.open = !this.open)}>\n\t\t\t\t\t<smoothly-icon name=\"menu\"> </smoothly-icon>\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/burger/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAO5G,MAAM,OAAO,cAAc;;;gBAGqB,KAAK;sBACd,oBAAoB;;;EAK1D,iBAAiB;IAChB,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO,CAAA;IACzD,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO;MAC9C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;;MAEpB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;IACpB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;IAC1C,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;EAC9C,CAAC;EAGD,WAAW;IACV,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;EACvC,CAAC;EAGD,YAAY,CAAC,KAAiB;IAC7B,IAAI,IAAI,CAAC,OAAO;MACf,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAA;EACxB,CAAC;EAGD,aAAa;IACZ,MAAM,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO,CAAA;IACzD,IAAI,MAAM,IAAI,IAAI,CAAC,OAAO,EAAE;MAC3B,IAAI,MAAM,EAAE;QACX,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;QACnB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAA;OACjB;WAAM;QACN,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;QACpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAA;OACjB;MACD,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;MAC7C,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;KAC1C;IACD,IAAI,CAAC,OAAO,GAAG,MAAM,CAAA;EACtB,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,IAAI;MACJ,YAAM,KAAK,EAAC,QAAQ;QACnB,qBAAe,IAAI,EAAC,MAAM,GAAG,CACvB,CACD,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-burger\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyBurger {\n\t@Element() element: HTMLSmoothlyBurgerElement\n\t@Prop({ mutable: true, reflect: true }) visible: boolean\n\t@Prop({ mutable: true, reflect: true }) open = false\n\t@Prop({ reflect: true }) mediaQuery = \"(max-width: 900px)\"\n\t@State() history: boolean\n\t@Event() smoothlyNavStatus: EventEmitter<boolean>\n\t@Event() smoothlyVisibleStatus: EventEmitter<boolean>\n\n\tcomponentWillLoad() {\n\t\tthis.history = window.matchMedia(this.mediaQuery).matches\n\t\tif (!window.matchMedia(this.mediaQuery).matches)\n\t\t\tthis.visible = false\n\t\telse\n\t\t\tthis.visible = true\n\t\tthis.smoothlyNavStatus.emit(!this.visible)\n\t\tthis.smoothlyVisibleStatus.emit(this.visible)\n\t}\n\n\t@Watch(\"open\")\n\topenChanged() {\n\t\tthis.smoothlyNavStatus.emit(this.open)\n\t}\n\n\t@Listen(\"click\")\n\tclickHandler(event: MouseEvent) {\n\t\tif (this.visible)\n\t\t\tthis.open = !this.open\n\t}\n\n\t@Listen(\"resize\", { target: \"window\" })\n\tresizeHandler() {\n\t\tconst result = window.matchMedia(this.mediaQuery).matches\n\t\tif (result != this.history) {\n\t\t\tif (result) {\n\t\t\t\tthis.visible = true\n\t\t\t\tthis.open = false\n\t\t\t} else {\n\t\t\t\tthis.visible = false\n\t\t\t\tthis.open = false\n\t\t\t}\n\t\t\tthis.smoothlyVisibleStatus.emit(this.visible)\n\t\t\tthis.smoothlyNavStatus.emit(!this.visible)\n\t\t}\n\t\tthis.history = result\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<span class=\"burger\">\n\t\t\t\t\t<smoothly-icon name=\"menu\" />\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -12,11 +12,11 @@ height: 100%;
 :host:not([visible]){
 	display: none;
 }
-:host([open]) smoothly-icon{
+:host:not([open]) smoothly-icon{
 	transform: rotate(0deg);
 	transition: transform 100ms ease-in-out;
 }
-:host:not([open]) smoothly-icon{
+:host([open]) smoothly-icon{
 	transform: rotate(-90deg);
 	transition: transform 100ms ease-in-out;
 }

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

@@ -10,13 +10,12 @@ export class SmoothlyButton {
     this.size = undefined;
     this.shape = undefined;
     this.link = undefined;
-    this.download = undefined;
   }
   render() {
-    return h(Button, { disabled: this.disabled, type: this.type, link: this.link, download: this.download });
+    return (h(Button, { disabled: this.disabled, type: this.type, link: this.link }, h("slot", null)));
   }
   static get is() { return "smoothly-button"; }
-  static get encapsulation() { return "shadow"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
       "$": ["../button/style.css"]
@@ -112,9 +111,14 @@ export class SmoothlyButton {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"link\" | \"button\"",
-          "resolved": "\"button\" | \"link\"",
-          "references": {}
+          "original": "Button.Properties[\"type\"]",
+          "resolved": "\"button\" | \"download\" | \"link\"",
+          "references": {
+            "Button": {
+              "location": "import",
+              "path": "../Button"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -176,23 +180,6 @@ export class SmoothlyButton {
         },
         "attribute": "link",
         "reflect": false
-      },
-      "download": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "download",
-        "reflect": false
       }
     };
   }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAElD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAOlC,MAAM,OAAO,cAAc;;;;;oBAIU,KAAK;gBACU,QAAQ;;;;;;EAM3D,MAAM;IACL,OAAO,EAAC,MAAM,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAW,CAAA;EAC7G,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\"\nimport { Color, Fill } from \"../../model\"\nimport { Button } from \"../Button\"\n\n@Component({\n\ttag: \"smoothly-button\",\n\tstyleUrl: \"../button/style.css\",\n\tshadow: true,\n})\nexport class SmoothlyButton {\n\t@Prop({ reflect: true }) color?: Color\n\t@Prop({ reflect: true }) expand?: \"block\" | \"full\"\n\t@Prop({ reflect: true }) fill?: Fill\n\t@Prop({ reflect: true }) disabled = false\n\t@Prop({ reflect: true }) type: \"link\" | \"button\" = \"button\"\n\t@Prop({ reflect: true }) size: \"small\" | \"large\" | \"icon\" | \"flexible\"\n\t@Prop({ reflect: true }) shape?: \"rounded\"\n\t@Prop() link?: string\n\t@Prop() download?: boolean\n\n\trender() {\n\t\treturn <Button disabled={this.disabled} type={this.type} link={this.link} download={this.download}></Button>\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAElD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAOlC,MAAM,OAAO,cAAc;;;;;oBAIU,KAAK;gBACkB,QAAQ;;;;;EAKnE,MAAM;IACL,OAAO,CACN,EAAC,MAAM,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI;MAChE,eAAQ,CACA,CACT,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\"\nimport { Color, Fill } from \"../../model\"\nimport { Button } from \"../Button\"\n\n@Component({\n\ttag: \"smoothly-button\",\n\tstyleUrl: \"../button/style.css\",\n\tscoped: true,\n})\nexport class SmoothlyButton {\n\t@Prop({ reflect: true }) color?: Color\n\t@Prop({ reflect: true }) expand?: \"block\" | \"full\"\n\t@Prop({ reflect: true }) fill?: Fill\n\t@Prop({ reflect: true }) disabled = false\n\t@Prop({ reflect: true }) type: Button.Properties[\"type\"] = \"button\"\n\t@Prop({ reflect: true }) size: \"small\" | \"large\" | \"icon\" | \"flexible\"\n\t@Prop({ reflect: true }) shape?: \"rounded\"\n\t@Prop() link?: string\n\n\trender() {\n\t\treturn (\n\t\t\t<Button disabled={this.disabled} type={this.type} link={this.link}>\n\t\t\t\t<slot />\n\t\t\t</Button>\n\t\t)\n\t}\n}\n"]}