smoothly 1.0.0-alpha.99 → 1.0.0

package/dist/collection/components/app/room/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/app/room/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACrF,OAAO,qBAAqB,CAAA;AAQ5B,MAAM,OAAO,eAAe;;;;gBAGS,EAAE;;;;EAOtC,iBAAiB;IAChB,IAAI,CAAC,QAAQ,GAAG,CAAC,OAAO,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,IAAI,UAAU,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CACxG,MAAM,CAAC,QAAQ,CACf,CAAA;IACD,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAA;EAC1D,CAAC;EAGD,KAAK,CAAC,UAAU;IACf,OAAO,IAAI,CAAC,cAAc,CAAA;EAC3B,CAAC;EAED,KAAK,CAAC,WAAW,CAAC,QAAiB,EAAE,OAA+B;IACnE,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAA;IACxB,IAAI,QAAQ;MACX,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAA,EAAE,CAAC,CAAA;EACjE,CAAC;EAED,YAAY,CAAC,KAAiB;IAC7B,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,KAAK,IAAI,CAAC,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,EAAE;MAC9E,KAAK,CAAC,cAAc,EAAE,CAAA;MACtB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAA;KACtB;EACF,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,IAAI;MACJ;QACC,SAAG,IAAI,EAAE,OAAO,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IACxG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,qBAAe,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,GAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAC5F,CACA;MACL,YAAM,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC;QACxC,eAAa,CACP,CACD,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Event, EventEmitter, h, Host, Method, Prop } from \"@stencil/core\"\nimport \"urlpattern-polyfill\"\nimport { Icon } from \"../../icon/Icon\"\n\n@Component({\n\ttag: \"smoothly-app-room\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyAppRoom {\n\t@Prop({ reflect: true }) label?: string\n\t@Prop({ reflect: true }) icon?: Icon\n\t@Prop() path: string | URLPattern = \"\"\n\t@Prop() to?: string\n\t@Prop({ reflect: true, mutable: true }) selected?: boolean\n\t@Event() smoothlyRoomSelected: EventEmitter<{ history: boolean }>\n\t@Event() smoothlyRoomLoaded: EventEmitter<{ selected: boolean }>\n\tprivate contentElement?: HTMLElement\n\n\tcomponentWillLoad() {\n\t\tthis.selected = (typeof this.path == \"string\" ? new URLPattern({ pathname: this.path }) : this.path).test(\n\t\t\twindow.location\n\t\t)\n\t\tthis.smoothlyRoomLoaded.emit({ selected: this.selected })\n\t}\n\n\t@Method()\n\tasync getContent(): Promise<HTMLElement | undefined> {\n\t\treturn this.contentElement\n\t}\n\t@Method()\n\tasync setSelected(selected: boolean, options?: { history?: boolean }): Promise<void> {\n\t\tthis.selected = selected\n\t\tif (selected)\n\t\t\tthis.smoothlyRoomSelected.emit({ history: !!options?.history })\n\t}\n\n\tclickHandler(event: MouseEvent) {\n\t\tif (!event.metaKey && !event.ctrlKey && event.which != 2 && event.button != 1) {\n\t\t\tevent.preventDefault()\n\t\t\tthis.setSelected(true)\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<li>\n\t\t\t\t\t<a href={typeof this.path == \"string\" ? this.path : this.path.pathname} onClick={e => this.clickHandler(e)}>\n\t\t\t\t\t\t{this.icon ? <smoothly-icon name={this.icon} toolTip={this.label}></smoothly-icon> : this.label}\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t\t<main ref={e => (this.contentElement = e)}>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</main>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/app/room/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAqC,CAAC,EAAE,IAAI,EAAO,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAC/G,OAAO,qBAAqB,CAAA;AAQ5B,MAAM,OAAO,eAAe;;;;;gBAIS,EAAE;;;;;EAQtC,iBAAiB;IAChB,IAAI,CAAC,QAAQ,GAAG,CAAC,OAAO,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,IAAI,UAAU,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CACxG,MAAM,CAAC,QAAQ,CACf,CAAA;IACD,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAA;EAC1D,CAAC;EAGD,KAAK,CAAC,UAAU;IACf,OAAO,IAAI,CAAC,cAAc,CAAA;EAC3B,CAAC;EAED,KAAK,CAAC,WAAW,CAAC,QAAiB,EAAE,OAA+B;IACnE,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAA;IACxB,IAAI,QAAQ;MACX,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAA,EAAE,CAAC,CAAA;EACjE,CAAC;EAED,YAAY,CAAC,KAAiB;IAC7B,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,KAAK,IAAI,CAAC,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,EAAE;MAC9E,KAAK,CAAC,cAAc,EAAE,CAAA;MACtB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAA;KACtB;EACF,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,IAAI;MACJ;QACC,SAAG,IAAI,EAAE,OAAO,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IACxG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,qBAAe,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,GAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAC5F,CACA;MACL,YAAM,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC;QACvC,IAAI,CAAC,OAAO,IAAI,qBAAe,OAAO,EAAE,IAAI,CAAC,OAAO,GAAI;QACzD,eAAa,CACP,CACD,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Event, EventEmitter, FunctionalComponent, h, Host, JSX, Method, Prop } from \"@stencil/core\"\nimport \"urlpattern-polyfill\"\nimport { Icon } from \"../../../model\"\n\n@Component({\n\ttag: \"smoothly-app-room\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyAppRoom {\n\t@Prop({ reflect: true }) label?: string\n\t@Prop({ reflect: true }) icon?: Icon\n\t@Prop({ reflect: true }) disabled: boolean\n\t@Prop() path: string | URLPattern = \"\"\n\t@Prop() to?: string\n\t@Prop({ reflect: true, mutable: true }) selected?: boolean\n\t@Prop() content?: JSX.Element | FunctionalComponent\n\t@Event() smoothlyRoomSelected: EventEmitter<{ history: boolean }>\n\t@Event() smoothlyRoomLoaded: EventEmitter<{ selected: boolean }>\n\tprivate contentElement?: HTMLElement\n\n\tcomponentWillLoad() {\n\t\tthis.selected = (typeof this.path == \"string\" ? new URLPattern({ pathname: this.path }) : this.path).test(\n\t\t\twindow.location\n\t\t)\n\t\tthis.smoothlyRoomLoaded.emit({ selected: this.selected })\n\t}\n\n\t@Method()\n\tasync getContent(): Promise<HTMLElement | undefined> {\n\t\treturn this.contentElement\n\t}\n\t@Method()\n\tasync setSelected(selected: boolean, options?: { history?: boolean }): Promise<void> {\n\t\tthis.selected = selected\n\t\tif (selected)\n\t\t\tthis.smoothlyRoomSelected.emit({ history: !!options?.history })\n\t}\n\n\tclickHandler(event: MouseEvent) {\n\t\tif (!event.metaKey && !event.ctrlKey && event.which != 2 && event.button != 1) {\n\t\t\tevent.preventDefault()\n\t\t\tthis.setSelected(true)\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<li>\n\t\t\t\t\t<a href={typeof this.path == \"string\" ? this.path : this.path.pathname} onClick={e => this.clickHandler(e)}>\n\t\t\t\t\t\t{this.icon ? <smoothly-icon name={this.icon} toolTip={this.label}></smoothly-icon> : this.label}\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t\t<main ref={e => (this.contentElement = e)}>\n\t\t\t\t\t{this.content && <smoothly-lazy content={this.content} />}\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</main>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -4,39 +4,53 @@
 	text-align: center;
 	cursor: pointer;
 }
-:not(:host[label], :host[icon]) { 
+
+main {
+	overflow-y: auto;
+}
+
+:not(:host[label], :host[icon]),
+:host[disabled] {
 	display: none;
 }
-:host > main {
+
+:host>main {
 	display: none;
 }
-:host > li {
+
+:host>li {
 	height: 100%;
 	list-style: none;
 }
-:host > li > a {
+
+:host>li>a {
 	padding: 0 1.5em;
 	height: 100%;
 }
-:host[selected] > li > a {
+
+:host[selected]>li>a {
 	display: flex;
 	color: rgb(var(--smoothly-color-contrast));
 	background: rgb(var(--smoothly-color-shade));
 }
-:host:hover > li > a {
+
+:host:hover>li>a {
 	color: rgb(var(--smoothly-color-contrast));
 	background-color: rgb(var(--smoothly-color-tint));
 	transition: 0.2s;
 }
-:host > li > a > smoothly-icon {
+
+:host>li>a>smoothly-icon {
 	align-self: inherit;
 	margin-bottom: 1em;
 }
+
 @media screen and (max-width: 900px) {
-	:host > li > a {
+	:host>li>a {
 		padding: 0;
 	}
-	:host > li > a {
+
+	:host>li>a {
 		margin-left: -1.5rem;
 		margin-right: -1.5rem;
 		padding-left: 1.5rem;

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

@@ -1,49 +1,58 @@
 smoothly-app {
-	--margin: -0.5rem;
+	--header-height: 5rem;
 	display: block;
-	scrollbar-width: none;
-	margin-left: var(--margin);
-	margin-right: var(--margin);
-	margin-top: var(--margin);
 }
+
+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 {
+
+smoothly-app>smoothly-notifier>header {
 	position: sticky;
 	top: 0;
 	z-index: 5;
 	width: 100%;
-	height: 5rem;
+	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;
 	margin: 0;
 }
-smoothly-app > smoothly-notifier > header > h1 {
+
+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%;
@@ -51,21 +60,26 @@ 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 > div.nav-start-container {
+
+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 {
+
+smoothly-app>smoothly-notifier>header>nav>ul>div.nav-end-container {
 	display: flex;
 	gap: 1rem;
 	align-items: center;
@@ -73,14 +87,16 @@ smoothly-app > smoothly-notifier > header > nav > ul > div.nav-end-container {
 	margin-left: auto;
 	margin-right: 1rem;
 }
-smoothly-app > smoothly-notifier > header > nav > ul > [slot="nav-end"] {
+
+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 {
+
+smoothly-app>smoothly-notifier>header>nav>ul li a {
 	display: flex;
 	height: 2.3rem;
 	text-decoration: none;
@@ -89,49 +105,58 @@ smoothly-app > smoothly-notifier > header > nav > ul li a {
 }
 
 @media screen and (max-width: 900px) {
-	smoothly-app > smoothly-notifier > header > nav {
+	smoothly-app>smoothly-notifier>header>nav {
 		width: 50dvw;
 		max-width: 15rem;
-		top: 5rem;
+		top: 100%;
 		position: absolute;
+		max-height: calc(100dvh - var(--header-height));
+		overflow-y: scroll;
 		right: 0;
 		height: auto;
 	}
-	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 {
 		flex-direction: column;
 		background-color: rgba(var(--smoothly-color));
 	}
-	smoothly-app > smoothly-notifier > header > nav > ul {
+
+	smoothly-app>smoothly-notifier>header>nav>ul {
 		padding: 1.5rem;
 		box-sizing: border-box;
 	}
-	smoothly-app > smoothly-notifier > header > nav > ul li {
+
+	smoothly-app>smoothly-notifier>header>nav>ul li {
 		margin-right: 0;
 		margin-bottom: 1em;
 		width: 100%;
 	}
 
-	smoothly-app > smoothly-notifier > header > 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"] {
+
+	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 {
+
+	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 {
+
+	smoothly-app>smoothly-notifier>header>nav>ul>div.nav-start-container>*:last-child {
 		margin-bottom: 1em;
 	}
 }
-smoothly-app > smoothly-notifier > header > nav:not(.menu-open) {
+
+smoothly-app>smoothly-notifier>header>nav:not(.menu-open) {
 	display: none;
 }

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

@@ -1,11 +1,10 @@
 import { h } from "@stencil/core";
-import { redirect } from "../../model";
 export class SmoothlyAppDemo {
   constructor() {
     this.baseUrl = undefined;
   }
   render() {
-    return (h("smoothly-app", { color: "dark", label: "Smoothly Demo" }, 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: "/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" }), h("smoothly-app-room", { path: "/redirect", label: "Redirect" }, h("smoothly-button", { onClick: () => redirect("/input") }, "To input"), h("smoothly-button", { onClick: () => redirect("/button") }, "To button"), h("smoothly-button", { onClick: () => redirect("/hidden") }, "To hidden")), h("smoothly-app-room", { path: "/hidden" }, h("p", null, "hello world!"))));
+    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;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAKtC,MAAM,OAAO,eAAe;;;;EAG3B,MAAM;IACL,OAAO,CACN,oBAAc,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe;MAC/C,wBAAkB,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,QAAQ;QAC3D,qBAAe,OAAO,EAAE,SAAS,EAAE,IAAI,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,GAAiB,CAC9D;MACnB,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;MAC3E,yBAAmB,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,UAAU;QACnD,uBAAiB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,eAA4B;QAC9E,uBAAiB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,gBAA6B;QAChF,uBAAiB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,gBAA6B,CAC7D;MACpB,yBAAmB,IAAI,EAAC,SAAS;QAChC,4BAAmB,CACA,CACN,CACf,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\"\nimport { redirect } from \"../../model\"\n\n@Component({\n\ttag: \"smoothly-app-demo\",\n})\nexport class SmoothlyAppDemo {\n\t@Prop() baseUrl: string\n\n\trender() {\n\t\treturn (\n\t\t\t<smoothly-app color=\"dark\" label=\"Smoothly Demo\">\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=\"/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\t<smoothly-app-room path=\"/redirect\" label=\"Redirect\">\n\t\t\t\t\t<smoothly-button onClick={() => redirect(\"/input\")}>To input</smoothly-button>\n\t\t\t\t\t<smoothly-button onClick={() => redirect(\"/button\")}>To button</smoothly-button>\n\t\t\t\t\t<smoothly-button onClick={() => redirect(\"/hidden\")}>To hidden</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</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/burger/index.js

@@ -12,11 +12,11 @@ export class SmoothlyBurger {
       this.visible = false;
     else
       this.visible = true;
-    this.navStatus.emit(!this.visible);
-    this.visibleStatus.emit(this.visible);
+    this.smoothlyNavStatus.emit(!this.visible);
+    this.smoothlyVisibleStatus.emit(this.visible);
   }
   openChanged() {
-    this.navStatus.emit(this.open);
+    this.smoothlyNavStatus.emit(this.open);
   }
   clickHandler(event) {
     if (this.visible)
@@ -33,8 +33,8 @@ export class SmoothlyBurger {
         this.visible = false;
         this.open = false;
       }
-      this.visibleStatus.emit(this.visible);
-      this.navStatus.emit(!this.visible);
+      this.smoothlyVisibleStatus.emit(this.visible);
+      this.smoothlyNavStatus.emit(!this.visible);
     }
     this.history = result;
   }
@@ -117,8 +117,8 @@ export class SmoothlyBurger {
   }
   static get events() {
     return [{
-        "method": "navStatus",
-        "name": "navStatus",
+        "method": "smoothlyNavStatus",
+        "name": "smoothlyNavStatus",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -132,8 +132,8 @@ export class SmoothlyBurger {
           "references": {}
         }
       }, {
-        "method": "visibleStatus",
-        "name": "visibleStatus",
+        "method": "smoothlyVisibleStatus",
+        "name": "smoothlyVisibleStatus",
         "bubbles": true,
         "cancelable": true,
         "composed": true,

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,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,SAAS,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;IAClC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;EACtC,CAAC;EAGD,WAAW;IACV,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;EAC/B,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,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;MACrC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;KAClC;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() navStatus: EventEmitter<boolean>\n\t@Event() visibleStatus: 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.navStatus.emit(!this.visible)\n\t\tthis.visibleStatus.emit(this.visible)\n\t}\n\n\t@Watch(\"open\")\n\topenChanged() {\n\t\tthis.navStatus.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.visibleStatus.emit(this.visible)\n\t\t\tthis.navStatus.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"]}
+{"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/button/index.js

@@ -10,10 +10,9 @@ 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 }, h("slot", null)));
+    return h(Button, { disabled: this.disabled, type: this.type, link: this.link });
   }
   static get is() { return "smoothly-button"; }
   static get encapsulation() { return "scoped"; }
@@ -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,CACN,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;MACzF,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: \"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 (\n\t\t\t<Button disabled={this.disabled} type={this.type} link={this.link} download={this.download}>\n\t\t\t\t<slot />\n\t\t\t</Button>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/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,EAAC,MAAM,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAAA;EAC7E,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 <Button disabled={this.disabled} type={this.type} link={this.link} />\n\t}\n}\n"]}

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

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