smoothly 1.101.0 → 1.102.0

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

@@ -24,14 +24,14 @@ smoothly-app.smoothly-mobile-mode>smoothly-notifier>header:has(smoothly-burger)>
 smoothly-app>smoothly-notifier>header {
 	position: sticky;
 	top: 0;
-	z-index: 5;
+	z-index: 20;
 	width: 100%;
 	height: var(--header-height);
 	display: flex;
 	justify-content: space-between;
 	box-sizing: border-box;
 	align-items: center;
-	box-shadow: 0 1px 0 0 rgb(var(--smoothly-color-shade));
+	box-shadow: 0 1px 0 0 rgb(var(--smoothly-color-shade)) inset;
 }
 
 smoothly-app>smoothly-notifier>header>nav {

package/dist/components/{p-360f959f.js → p-71fa6386.js}

@@ -5,7 +5,7 @@ import { d as defineCustomElement$3 } from './p-4f0ce21b.js';
 import { d as defineCustomElement$2 } from './p-97e22dc3.js';
 import { d as defineCustomElement$1 } from './p-6f96e7ef.js';
 
-const styleCss = "smoothly-app{--header-height:5rem;display:block}smoothly-app>smoothly-notifier>main{height:calc(100dvh - var(--header-height))}smoothly-app[hidden]{display:none}smoothly-app>smoothly-notifier{height:100%;background:none}smoothly-app.smoothly-mobile-mode>smoothly-notifier>header:has(smoothly-burger)>nav>ul smoothly-app-room{width:100%;height:4em}smoothly-app>smoothly-notifier>header{position:sticky;top:0;z-index:5;width:100%;height:var(--header-height);display:flex;justify-content:space-between;box-sizing:border-box;align-items:center;box-shadow:0 1px 0 0 rgb(var(--smoothly-color-shade))}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{display:flex;margin:0}smoothly-app:not([label])>smoothly-notifier>header>h1{display:none}smoothly-app>smoothly-notifier>header>h1{margin-left:1rem;margin-bottom:0.8em;display:flex;height:100%}smoothly-app>smoothly-notifier>header>h1>a{display:inline-block;align-self:center;size:100%;background-position-y:center;text-decoration:none;white-space:nowrap}smoothly-app>smoothly-notifier>header>nav>ul{width:100%}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;align-items:center;height:100%;margin-left:auto;margin-right:1rem}smoothly-app>smoothly-notifier>header>nav>ul>[slot=\"nav-end\"]{width:fit-content;align-self:center;height:fit-content;margin-left:10rem}smoothly-app>smoothly-notifier>header>nav>ul li a{display:flex;height:2.3rem;text-decoration:none;align-items:center;align-self:center}smoothly-app.smoothly-mobile-mode:not([menu-open])>smoothly-notifier>header>nav{display:none}smoothly-app>smoothly-notifier>main>div{overflow-y:scroll;height:100%}smoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav{width:fit-content;max-width:100%;top:100%;position:absolute;max-height:calc(100dvh - var(--header-height));overflow-y:scroll;right:0;height:auto}smoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav,smoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav>ul{flex-direction:column;background-color:rgba(var(--smoothly-color))}smoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav>ul{padding:1.5rem;box-sizing:border-box}smoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav>ul li{margin-right:0;width:100%}smoothly-app:not(.smoothly-mobile-mode)>smoothly-notifier>header>smoothly-burger{display:none}smoothly-app.smoothly-mobile-mode>smoothly-notifier>header>smoothly-burger{position:absolute;top:0;right:0}smoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav>ul>[slot=\"nav-start\"]{display:none}smoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav>ul>div.nav-start-container,smoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav>ul>div.nav-end-container{flex-direction:column;margin:0;align-items:start;justify-content:center}smoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav>ul>div.nav-start-container>*:last-child{margin-bottom:1em}";
+const styleCss = "smoothly-app{--header-height:5rem;display:block}smoothly-app>smoothly-notifier>main{height:calc(100dvh - var(--header-height))}smoothly-app[hidden]{display:none}smoothly-app>smoothly-notifier{height:100%;background:none}smoothly-app.smoothly-mobile-mode>smoothly-notifier>header:has(smoothly-burger)>nav>ul smoothly-app-room{width:100%;height:4em}smoothly-app>smoothly-notifier>header{position:sticky;top:0;z-index:20;width:100%;height:var(--header-height);display:flex;justify-content:space-between;box-sizing:border-box;align-items:center;box-shadow:0 1px 0 0 rgb(var(--smoothly-color-shade)) inset}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{display:flex;margin:0}smoothly-app:not([label])>smoothly-notifier>header>h1{display:none}smoothly-app>smoothly-notifier>header>h1{margin-left:1rem;margin-bottom:0.8em;display:flex;height:100%}smoothly-app>smoothly-notifier>header>h1>a{display:inline-block;align-self:center;size:100%;background-position-y:center;text-decoration:none;white-space:nowrap}smoothly-app>smoothly-notifier>header>nav>ul{width:100%}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;align-items:center;height:100%;margin-left:auto;margin-right:1rem}smoothly-app>smoothly-notifier>header>nav>ul>[slot=\"nav-end\"]{width:fit-content;align-self:center;height:fit-content;margin-left:10rem}smoothly-app>smoothly-notifier>header>nav>ul li a{display:flex;height:2.3rem;text-decoration:none;align-items:center;align-self:center}smoothly-app.smoothly-mobile-mode:not([menu-open])>smoothly-notifier>header>nav{display:none}smoothly-app>smoothly-notifier>main>div{overflow-y:scroll;height:100%}smoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav{width:fit-content;max-width:100%;top:100%;position:absolute;max-height:calc(100dvh - var(--header-height));overflow-y:scroll;right:0;height:auto}smoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav,smoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav>ul{flex-direction:column;background-color:rgba(var(--smoothly-color))}smoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav>ul{padding:1.5rem;box-sizing:border-box}smoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav>ul li{margin-right:0;width:100%}smoothly-app:not(.smoothly-mobile-mode)>smoothly-notifier>header>smoothly-burger{display:none}smoothly-app.smoothly-mobile-mode>smoothly-notifier>header>smoothly-burger{position:absolute;top:0;right:0}smoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav>ul>[slot=\"nav-start\"]{display:none}smoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav>ul>div.nav-start-container,smoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav>ul>div.nav-end-container{flex-direction:column;margin:0;align-items:start;justify-content:center}smoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav>ul>div.nav-start-container>*:last-child{margin-bottom:1em}";
 const SmoothlyAppStyle0 = styleCss;
 
 const SmoothlyApp = proxyCustomElement(class SmoothlyApp extends H {
@@ -144,4 +144,4 @@ defineCustomElement();
 
 export { SmoothlyApp as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-360f959f.js.map
+//# sourceMappingURL=p-71fa6386.js.map

package/dist/components/p-71fa6386.js.map

@@ -0,0 +1 @@
+{"file":"p-71fa6386.js","mappings":"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","names":[],"sources":["src/components/app/style.css?tag=smoothly-app","src/components/app/index.tsx"],"sourcesContent":["smoothly-app {\n\t--header-height: 5rem;\n\tdisplay: block;\n}\n\nsmoothly-app>smoothly-notifier>main {\n\theight: calc(100dvh - var(--header-height));\n}\n\nsmoothly-app[hidden] {\n\tdisplay: none;\n}\n\nsmoothly-app>smoothly-notifier {\n\theight: 100%;\n\tbackground: none;\n}\n\nsmoothly-app.smoothly-mobile-mode>smoothly-notifier>header:has(smoothly-burger)>nav>ul smoothly-app-room {\n\twidth: 100%;\n\theight: 4em;\n}\n\nsmoothly-app>smoothly-notifier>header {\n\tposition: sticky;\n\ttop: 0;\n\tz-index: 20;\n\twidth: 100%;\n\theight: var(--header-height);\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tbox-sizing: border-box;\n\talign-items: center;\n\tbox-shadow: 0 1px 0 0 rgb(var(--smoothly-color-shade)) inset;\n}\n\nsmoothly-app>smoothly-notifier>header>nav {\n\twidth: 100%;\n\tflex-shrink: 2;\n\theight: 100%;\n}\n\nsmoothly-app>smoothly-notifier>header>nav,\nsmoothly-app>smoothly-notifier>header>nav>ul {\n\tdisplay: flex;\n\tmargin: 0;\n}\n\nsmoothly-app:not([label])>smoothly-notifier>header>h1 {\n\tdisplay: none;\n}\nsmoothly-app>smoothly-notifier>header>h1 {\n\tmargin-left: 1rem;\n\tmargin-bottom: 0.8em;\n\tdisplay: flex;\n\theight: 100%;\n}\n\nsmoothly-app>smoothly-notifier>header>h1>a {\n\tdisplay: inline-block;\n\talign-self: center;\n\tsize: 100%;\n\tbackground-position-y: center;\n\ttext-decoration: none;\n\twhite-space: nowrap;\n}\n\nsmoothly-app>smoothly-notifier>header>nav>ul {\n\twidth: 100%;\n}\n\nsmoothly-app>smoothly-notifier>header>nav>ul>div.nav-start-container {\n\tdisplay: flex;\n\talign-items: center;\n\theight: 100%;\n}\n\nsmoothly-app>smoothly-notifier>header>nav>ul>div.nav-end-container {\n\tdisplay: flex;\n\talign-items: center;\n\theight: 100%;\n\tmargin-left: auto;\n\tmargin-right: 1rem;\n}\n\nsmoothly-app>smoothly-notifier>header>nav>ul>[slot=\"nav-end\"] {\n\twidth: fit-content;\n\talign-self: center;\n\theight: fit-content;\n\tmargin-left: 10rem;\n}\n\nsmoothly-app>smoothly-notifier>header>nav>ul li a {\n\tdisplay: flex;\n\theight: 2.3rem;\n\ttext-decoration: none;\n\talign-items: center;\n\talign-self: center;\n}\n\nsmoothly-app.smoothly-mobile-mode:not([menu-open])>smoothly-notifier>header>nav {\n\tdisplay: none;\n}\n\nsmoothly-app>smoothly-notifier>main>div {\n\toverflow-y: scroll;\n\theight: 100%;\n}\n\n/* Mobile mode */\nsmoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav {\n\twidth: fit-content;\n\tmax-width: 100%;\n\ttop: 100%;\n\tposition: absolute;\n\tmax-height: calc(100dvh - var(--header-height));\n\toverflow-y: scroll;\n\tright: 0;\n\theight: auto;\n}\n\nsmoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav,\nsmoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav>ul {\n\tflex-direction: column;\n\tbackground-color: rgba(var(--smoothly-color));\n}\n\nsmoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav>ul {\n\tpadding: 1.5rem;\n\tbox-sizing: border-box;\n}\n\nsmoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav>ul li {\n\tmargin-right: 0;\n\twidth: 100%;\n}\nsmoothly-app:not(.smoothly-mobile-mode)>smoothly-notifier>header>smoothly-burger {\n\tdisplay: none;\n}\nsmoothly-app.smoothly-mobile-mode>smoothly-notifier>header>smoothly-burger {\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n}\n\nsmoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav>ul>[slot=\"nav-start\"] {\n\tdisplay: none;\n}\n\nsmoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav>ul>div.nav-start-container,\nsmoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav>ul>div.nav-end-container {\n\tflex-direction: column;\n\tmargin: 0;\n\talign-items: start;\n\tjustify-content: center;\n}\n\nsmoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav>ul>div.nav-start-container>*:last-child {\n\tmargin-bottom: 1em;\n}\n\n","import { Component, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\"\nimport { SmoothlyAppRoomCustomEvent } from \"../../components\"\nimport { Color } from \"../../model\"\n\ntype Room = {\n\telement: HTMLSmoothlyAppRoomElement\n}\n@Component({\n\ttag: \"smoothly-app\",\n\tstyleUrl: \"style.css\",\n\tscoped: false,\n})\nexport class SmoothlyApp {\n\t@Prop({ reflect: true }) label?: string\n\t@Prop() color: Color\n\t@Prop() home?: string\n\t@Prop({ mutable: true, reflect: true }) menuOpen = false\n\t@Prop({ reflect: true }) navBreakpoint: `${number}${\"px\" | \"em\" | \"rem\"}` = \"48rem\"\n\t@State() mobileMode = false\n\t@State() selected?: Room\n\t@Event() smoothlyUrlChange: EventEmitter<string>\n\tprivate burgerElement?: HTMLSmoothlyBurgerElement\n\tprivate navElement?: HTMLElement\n\tmainElement?: HTMLElement\n\trooms: Record<string, Room | undefined> = {}\n\n\tcomponentWillLoad() {\n\t\tconst mediaQuery = window.matchMedia(`(max-width: ${this.navBreakpoint})`)\n\t\tthis.mobileMode = mediaQuery.matches\n\t\tmediaQuery.addEventListener(\"change\", e => this.updateMobileMode(e.matches))\n\t}\n\tcomponentDidLoad() {\n\t\tthis.updateMobileMode(this.mobileMode)\n\t}\n\tupdateMobileMode(mobileMode: boolean) {\n\t\tthis.mobileMode = mobileMode\n\t\tObject.values(this.rooms).forEach(room => room?.element.setMobileMode(mobileMode))\n\t\tif (!mobileMode)\n\t\t\tthis.menuOpen = false\n\t}\n\n\tasync componentDidRender() {\n\t\tif (!this.selected && !window.location.search)\n\t\t\t(this.home && this.rooms[this.home]\n\t\t\t\t? this.rooms[this.home]\n\t\t\t\t: Object.values(this.rooms).find(room => !room?.element.disabled)\n\t\t\t)?.element.setSelected(true)\n\t}\n\t@Method()\n\tasync selectRoom(path: string) {\n\t\tthis.rooms[path]?.element.setSelected(true)\n\t}\n\t@Watch(\"selected\")\n\tasync selectedChanged() {\n\t\tObject.values(this.rooms).forEach(\n\t\t\troom => room?.element.path != this.selected?.element.path && room?.element.setSelected(false)\n\t\t)\n\t\tconst content = await this.selected?.element.getContent()\n\t\trequestAnimationFrame(() => {\n\t\t\tif (this.mainElement && content)\n\t\t\t\tthis.mainElement.replaceChildren(content)\n\t\t})\n\t}\n\t@Listen(\"popstate\", { target: \"window\" })\n\tasync locationChangeHandler(event: PopStateEvent) {\n\t\tthis.rooms[event.state.smoothlyPath]?.element.setSelected(true, { history: true })\n\t\tthis.smoothlyUrlChange.emit(window.location.href)\n\t}\n\t@Listen(\"smoothlyRoomSelect\")\n\troomSelectedHandler(event: SmoothlyAppRoomCustomEvent<{ history: boolean; query?: string }>) {\n\t\tthis.selected = { element: event.target }\n\t\tif (this.mobileMode)\n\t\t\tthis.menuOpen = false\n\t\tif (!event.detail.history) {\n\t\t\tconst path = this.selected.element.path.toString()\n\t\t\tconst location = new URL(window.location.pathname == path ? window.location.href : window.location.origin)\n\t\t\tlocation.pathname = path\n\t\t\tlocation.search = event.detail.query ? `?${event.detail.query}` : \"\"\n\t\t\twindow.history.pushState({ smoothlyPath: path, smoothlyQuery: event.detail.query || \"\" }, \"\", location.href)\n\t\t}\n\t}\n\t@Listen(\"smoothlyRoomLoad\")\n\troomLoadedHandler(event: SmoothlyAppRoomCustomEvent<{ selected: boolean }>) {\n\t\tconst room = (this.rooms[event.target.path.toString()] = { element: event.target })\n\t\tif (room.element.selected) {\n\t\t\tthis.selected = room\n\t\t}\n\t}\n\t@Listen(\"click\", { target: \"window\" })\n\tclickHandler(event: MouseEvent) {\n\t\tif (this.mobileMode && !event.composedPath().some(e => e == this.burgerElement || e == this.navElement))\n\t\t\tthis.menuOpen = false\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host class={{ \"smoothly-mobile-mode\": this.mobileMode }}>\n\t\t\t\t<smoothly-notifier>\n\t\t\t\t\t<header color={this.color}>\n\t\t\t\t\t\t<h1>\n\t\t\t\t\t\t\t<a href={\"\"}>{this.label}</a>\n\t\t\t\t\t\t</h1>\n\t\t\t\t\t\t<slot name=\"header\" />\n\t\t\t\t\t\t<nav ref={e => (this.navElement = e)}>\n\t\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t<div class={\"nav-start-container\"}>\n\t\t\t\t\t\t\t\t\t<slot name=\"nav-start\" />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t\t\t<div class={\"nav-end-container\"}>\n\t\t\t\t\t\t\t\t\t<slot name=\"nav-end\" />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t</nav>\n\t\t\t\t\t\t<smoothly-burger\n\t\t\t\t\t\t\tref={e => (this.burgerElement = e)}\n\t\t\t\t\t\t\topen={this.menuOpen}\n\t\t\t\t\t\t\tonSmoothlyNavStatus={e => (e.stopPropagation(), (this.menuOpen = e.detail))}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</header>\n\t\t\t\t\t<main ref={e => (this.mainElement = e)} />\n\t\t\t\t</smoothly-notifier>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/components/smoothly-app-demo.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h } from './p-f765921a.js';
-import { d as defineCustomElement$1D } from './p-360f959f.js';
+import { d as defineCustomElement$1D } from './p-71fa6386.js';
 import { d as defineCustomElement$1C } from './p-211c0f22.js';
 import { d as defineCustomElement$1B } from './p-b7fe2252.js';
 import { d as defineCustomElement$1A } from './p-378e6dda.js';

package/dist/components/smoothly-app.js

@@ -1,4 +1,4 @@
-import { S as SmoothlyApp$1, d as defineCustomElement$1 } from './p-360f959f.js';
+import { S as SmoothlyApp$1, d as defineCustomElement$1 } from './p-71fa6386.js';
 
 const SmoothlyApp = SmoothlyApp$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/esm/smoothly-app_103.entry.js

@@ -19,7 +19,7 @@ function getLocale() {
     return Locale.is(result) ? result : Language.is(result) ? Locale.toLocale(result) : undefined;
 }
 
-const styleCss$1p = "smoothly-app{--header-height:5rem;display:block}smoothly-app>smoothly-notifier>main{height:calc(100dvh - var(--header-height))}smoothly-app[hidden]{display:none}smoothly-app>smoothly-notifier{height:100%;background:none}smoothly-app.smoothly-mobile-mode>smoothly-notifier>header:has(smoothly-burger)>nav>ul smoothly-app-room{width:100%;height:4em}smoothly-app>smoothly-notifier>header{position:sticky;top:0;z-index:5;width:100%;height:var(--header-height);display:flex;justify-content:space-between;box-sizing:border-box;align-items:center;box-shadow:0 1px 0 0 rgb(var(--smoothly-color-shade))}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{display:flex;margin:0}smoothly-app:not([label])>smoothly-notifier>header>h1{display:none}smoothly-app>smoothly-notifier>header>h1{margin-left:1rem;margin-bottom:0.8em;display:flex;height:100%}smoothly-app>smoothly-notifier>header>h1>a{display:inline-block;align-self:center;size:100%;background-position-y:center;text-decoration:none;white-space:nowrap}smoothly-app>smoothly-notifier>header>nav>ul{width:100%}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;align-items:center;height:100%;margin-left:auto;margin-right:1rem}smoothly-app>smoothly-notifier>header>nav>ul>[slot=\"nav-end\"]{width:fit-content;align-self:center;height:fit-content;margin-left:10rem}smoothly-app>smoothly-notifier>header>nav>ul li a{display:flex;height:2.3rem;text-decoration:none;align-items:center;align-self:center}smoothly-app.smoothly-mobile-mode:not([menu-open])>smoothly-notifier>header>nav{display:none}smoothly-app>smoothly-notifier>main>div{overflow-y:scroll;height:100%}smoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav{width:fit-content;max-width:100%;top:100%;position:absolute;max-height:calc(100dvh - var(--header-height));overflow-y:scroll;right:0;height:auto}smoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav,smoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav>ul{flex-direction:column;background-color:rgba(var(--smoothly-color))}smoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav>ul{padding:1.5rem;box-sizing:border-box}smoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav>ul li{margin-right:0;width:100%}smoothly-app:not(.smoothly-mobile-mode)>smoothly-notifier>header>smoothly-burger{display:none}smoothly-app.smoothly-mobile-mode>smoothly-notifier>header>smoothly-burger{position:absolute;top:0;right:0}smoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav>ul>[slot=\"nav-start\"]{display:none}smoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav>ul>div.nav-start-container,smoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav>ul>div.nav-end-container{flex-direction:column;margin:0;align-items:start;justify-content:center}smoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav>ul>div.nav-start-container>*:last-child{margin-bottom:1em}";
+const styleCss$1p = "smoothly-app{--header-height:5rem;display:block}smoothly-app>smoothly-notifier>main{height:calc(100dvh - var(--header-height))}smoothly-app[hidden]{display:none}smoothly-app>smoothly-notifier{height:100%;background:none}smoothly-app.smoothly-mobile-mode>smoothly-notifier>header:has(smoothly-burger)>nav>ul smoothly-app-room{width:100%;height:4em}smoothly-app>smoothly-notifier>header{position:sticky;top:0;z-index:20;width:100%;height:var(--header-height);display:flex;justify-content:space-between;box-sizing:border-box;align-items:center;box-shadow:0 1px 0 0 rgb(var(--smoothly-color-shade)) inset}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{display:flex;margin:0}smoothly-app:not([label])>smoothly-notifier>header>h1{display:none}smoothly-app>smoothly-notifier>header>h1{margin-left:1rem;margin-bottom:0.8em;display:flex;height:100%}smoothly-app>smoothly-notifier>header>h1>a{display:inline-block;align-self:center;size:100%;background-position-y:center;text-decoration:none;white-space:nowrap}smoothly-app>smoothly-notifier>header>nav>ul{width:100%}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;align-items:center;height:100%;margin-left:auto;margin-right:1rem}smoothly-app>smoothly-notifier>header>nav>ul>[slot=\"nav-end\"]{width:fit-content;align-self:center;height:fit-content;margin-left:10rem}smoothly-app>smoothly-notifier>header>nav>ul li a{display:flex;height:2.3rem;text-decoration:none;align-items:center;align-self:center}smoothly-app.smoothly-mobile-mode:not([menu-open])>smoothly-notifier>header>nav{display:none}smoothly-app>smoothly-notifier>main>div{overflow-y:scroll;height:100%}smoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav{width:fit-content;max-width:100%;top:100%;position:absolute;max-height:calc(100dvh - var(--header-height));overflow-y:scroll;right:0;height:auto}smoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav,smoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav>ul{flex-direction:column;background-color:rgba(var(--smoothly-color))}smoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav>ul{padding:1.5rem;box-sizing:border-box}smoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav>ul li{margin-right:0;width:100%}smoothly-app:not(.smoothly-mobile-mode)>smoothly-notifier>header>smoothly-burger{display:none}smoothly-app.smoothly-mobile-mode>smoothly-notifier>header>smoothly-burger{position:absolute;top:0;right:0}smoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav>ul>[slot=\"nav-start\"]{display:none}smoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav>ul>div.nav-start-container,smoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav>ul>div.nav-end-container{flex-direction:column;margin:0;align-items:start;justify-content:center}smoothly-app.smoothly-mobile-mode>smoothly-notifier>header>nav>ul>div.nav-start-container>*:last-child{margin-bottom:1em}";
 const SmoothlyAppStyle0 = styleCss$1p;
 
 const SmoothlyApp = class {