@benev/web 0.1.0-4 → 0.1.0-5

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@benev/web",
-	"version": "0.1.0-4",
+	"version": "0.1.0-5",
 	"description": "✨ benev web sdk",
 	"license": "MIT",
 	"type": "module",

package/s/css/parts/common.csstext.ts

@@ -95,8 +95,7 @@ benev-header {
 	a {
 		position: relative;
 		color: var(--benev-prime);
-		padding: 0.2em;
-		font-size: 1.2em;
+		font-size: 1em;
 
 		&[data-active] {
 			text-shadow: 0 0 0.5em currentColor;
@@ -105,7 +104,7 @@ benev-header {
 				content: "•";
 				display: block;
 				position: absolute;
-				top: 90%;
+				top: 100%;
 				left: 0;
 				right: 0;
 				line-height: 0;

package/s/dom/account/view.ts

@@ -10,7 +10,7 @@ export const makeBenevAccount = (_account: Account) => shadowElement(() => {
 	useCss(themeCss, styleCss)
 
 	return html`
-		<benev-auth>Sign in</benev-auth>
+		<benev-auth>sign in</benev-auth>
 	`
 })
 

package/s/dom/loader/style.css.ts

@@ -7,41 +7,48 @@ export default css`@layer benev.view {
 	position: relative;
 }
 
-.veil {
+.veil, .scalar {
 	position: absolute;
 	inset: 0;
-	background: var(--benev-bg);
-	pointer-events: none;
-
-	opacity: 1;
-	transform: scale(100%);
-	visibility: visible;
-
 	transition:
 		opacity var(--benev-anim) linear,
 		transform var(--benev-anim) ease,
 		visiblity 0ms linear allow-discrete;
-}
 
-:host(:not([loading])) .veil {
-	opacity: 0;
-	transform: scale(0%);
-	visiblity: hidden;
-}
-
-.veil {
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
 	gap: var(--benev-space);
+}
 
-	> img {
+.veil {
+	pointer-events: all;
+	background: var(--benev-bg);
+
+	opacity: 1;
+	visibility: visible;
+
+	.scalar {
+		transform: scale(100%);
+	}
+
+	.logo {
 		width: 100%;
 		max-width: 10em;
 		aspect-ratio: 1 / 1;
 	}
 }
 
+:host(:not([loading])) .veil {
+	pointer-events: none;
+	opacity: 0;
+	visiblity: hidden;
+
+	.scalar {
+		transform: scale(0%);
+	}
+}
+
 }`
 

package/s/dom/loader/view.ts

@@ -13,8 +13,10 @@ export const BenevLoader = shadowElement(() => {
 		<slot></slot>
 
 		<div class=veil>
-			<img src="${bDataPng}" alt="" draggable="false"/>
-			<slot name=loading></slot>
+			<div class=scalar>
+				<img class=logo src="${bDataPng}" alt="" draggable="false"/>
+				<slot name=loading></slot>
+			</div>
 		</div>
 	`
 })

package/s/ssg/top-nav.ts

@@ -1,7 +1,7 @@
 
 import {html} from "@e280/scute"
 import {Zone} from "../types.js"
-import { bconfig } from "../bconfig.js"
+import {bconfig} from "../bconfig.js"
 
 export function topNav(currentZone: Zone) {
 	return html`

package/x/css/parts/common.csstext.js

@@ -94,8 +94,7 @@ benev-header {
 	a {
 		position: relative;
 		color: var(--benev-prime);
-		padding: 0.2em;
-		font-size: 1.2em;
+		font-size: 1em;
 
 		&[data-active] {
 			text-shadow: 0 0 0.5em currentColor;
@@ -104,7 +103,7 @@ benev-header {
 				content: "•";
 				display: block;
 				position: absolute;
-				top: 90%;
+				top: 100%;
 				left: 0;
 				right: 0;
 				line-height: 0;

package/x/css/parts/common.csstext.js.map

@@ -1 +1 @@
-{"version":3,"file":"common.csstext.js","sourceRoot":"","sources":["../../../s/css/parts/common.csstext.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,cAAc,IAAI,GAAG,EAAC,MAAM,WAAW,CAAA;AAC/C,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+MjB,CAAA"}
+{"version":3,"file":"common.csstext.js","sourceRoot":"","sources":["../../../s/css/parts/common.csstext.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,cAAc,IAAI,GAAG,EAAC,MAAM,WAAW,CAAA;AAC/C,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8MjB,CAAA"}

package/x/dom/account/view.js

@@ -5,7 +5,7 @@ import { themeCss } from "../../css/theme.css.js";
 export const makeBenevAccount = (_account) => shadowElement(() => {
     useCss(themeCss, styleCss);
     return html `
-		<benev-auth>Sign in</benev-auth>
+		<benev-auth>sign in</benev-auth>
 	`;
 });
 //# sourceMappingURL=view.js.map

package/x/dom/loader/style.css.js

@@ -6,41 +6,48 @@ export default css `@layer benev.view {
 	position: relative;
 }
 
-.veil {
+.veil, .scalar {
 	position: absolute;
 	inset: 0;
-	background: var(--benev-bg);
-	pointer-events: none;
-
-	opacity: 1;
-	transform: scale(100%);
-	visibility: visible;
-
 	transition:
 		opacity var(--benev-anim) linear,
 		transform var(--benev-anim) ease,
 		visiblity 0ms linear allow-discrete;
-}
 
-:host(:not([loading])) .veil {
-	opacity: 0;
-	transform: scale(0%);
-	visiblity: hidden;
-}
-
-.veil {
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
 	gap: var(--benev-space);
+}
 
-	> img {
+.veil {
+	pointer-events: all;
+	background: var(--benev-bg);
+
+	opacity: 1;
+	visibility: visible;
+
+	.scalar {
+		transform: scale(100%);
+	}
+
+	.logo {
 		width: 100%;
 		max-width: 10em;
 		aspect-ratio: 1 / 1;
 	}
 }
 
+:host(:not([loading])) .veil {
+	pointer-events: none;
+	opacity: 0;
+	visiblity: hidden;
+
+	.scalar {
+		transform: scale(0%);
+	}
+}
+
 }`;
 //# sourceMappingURL=style.css.js.map

package/x/dom/loader/style.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.css.js","sourceRoot":"","sources":["../../../s/dom/loader/style.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2ChB,CAAA"}
+{"version":3,"file":"style.css.js","sourceRoot":"","sources":["../../../s/dom/loader/style.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkDhB,CAAA"}

package/x/dom/loader/view.js

@@ -9,8 +9,10 @@ export const BenevLoader = shadowElement(() => {
 		<slot></slot>
 
 		<div class=veil>
-			<img src="${bDataPng}" alt="" draggable="false"/>
-			<slot name=loading></slot>
+			<div class=scalar>
+				<img class=logo src="${bDataPng}" alt="" draggable="false"/>
+				<slot name=loading></slot>
+			</div>
 		</div>
 	`;
 });

package/x/dom/loader/view.js.map

@@ -1 +1 @@
-{"version":3,"file":"view.js","sourceRoot":"","sources":["../../../s/dom/loader/view.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAC,aAAa,EAAE,MAAM,EAAC,MAAM,WAAW,CAAA;AAE/C,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AACrC,OAAO,EAAC,QAAQ,EAAC,MAAM,wBAAwB,CAAA;AAC/C,OAAO,EAAC,QAAQ,EAAC,MAAM,uBAAuB,CAAA;AAE9C,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAC,GAAG,EAAE;IAC7C,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;IAE1B,OAAO,IAAI,CAAA;;;;eAIG,QAAQ;;;EAGrB,CAAA;AACF,CAAC,CAAC,CAAA"}
+{"version":3,"file":"view.js","sourceRoot":"","sources":["../../../s/dom/loader/view.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAC,aAAa,EAAE,MAAM,EAAC,MAAM,WAAW,CAAA;AAE/C,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AACrC,OAAO,EAAC,QAAQ,EAAC,MAAM,wBAAwB,CAAA;AAC/C,OAAO,EAAC,QAAQ,EAAC,MAAM,uBAAuB,CAAA;AAE9C,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAC,GAAG,EAAE;IAC7C,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;IAE1B,OAAO,IAAI,CAAA;;;;;2BAKe,QAAQ;;;;EAIjC,CAAA;AACF,CAAC,CAAC,CAAA"}

package/x/index.html

@@ -7,7 +7,7 @@
 
 		<title>@benev/web</title>
 		<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='0.9em' font-size='90'>😇</text></svg>"/>
-		<script type="module" src="main.bundle.min.js?v=f851e552e906"></script>
+		<script type="module" src="main.bundle.min.js?v=ff95a7dd9b79"></script>
 		<style>
 			@layer benev, demo;
 
@@ -214,8 +214,7 @@ margin: 0 auto;
 a {
 	position: relative;
 	color: var(--benev-prime);
-	padding: 0.2em;
-	font-size: 1.2em;
+	font-size: 1em;
 
 	&[data-active] {
 		text-shadow: 0 0 0.5em currentColor;
@@ -224,7 +223,7 @@ a {
 			content: "•";
 			display: block;
 			position: absolute;
-			top: 90%;
+			top: 100%;
 			left: 0;
 			right: 0;
 			line-height: 0;

package/x/main.bundle.min.js

@@ -302,42 +302,49 @@ button {
 	position: relative;
 }
 
-.veil {
+.veil, .scalar {
 	position: absolute;
 	inset: 0;
-	background: var(--benev-bg);
-	pointer-events: none;
-
-	opacity: 1;
-	transform: scale(100%);
-	visibility: visible;
-
 	transition:
 		opacity var(--benev-anim) linear,
 		transform var(--benev-anim) ease,
 		visiblity 0ms linear allow-discrete;
-}
 
-:host(:not([loading])) .veil {
-	opacity: 0;
-	transform: scale(0%);
-	visiblity: hidden;
-}
-
-.veil {
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
 	gap: var(--benev-space);
+}
 
-	> img {
+.veil {
+	pointer-events: all;
+	background: var(--benev-bg);
+
+	opacity: 1;
+	visibility: visible;
+
+	.scalar {
+		transform: scale(100%);
+	}
+
+	.logo {
 		width: 100%;
 		max-width: 10em;
 		aspect-ratio: 1 / 1;
 	}
 }
 
+:host(:not([loading])) .veil {
+	pointer-events: none;
+	opacity: 0;
+	visiblity: hidden;
+
+	.scalar {
+		transform: scale(0%);
+	}
+}
+
 }`;var uI=Ut`
 
 --benev-font-size: 18px;
@@ -540,8 +547,7 @@ benev-header {
 	a {
 		position: relative;
 		color: var(--benev-prime);
-		padding: 0.2em;
-		font-size: 1.2em;
+		font-size: 1em;
 
 		&[data-active] {
 			text-shadow: 0 0 0.5em currentColor;
@@ -550,7 +556,7 @@ benev-header {
 				content: "•";
 				display: block;
 				position: absolute;
-				top: 90%;
+				top: 100%;
 				left: 0;
 				right: 0;
 				line-height: 0;
@@ -688,8 +694,10 @@ benev-footer {
 		<slot></slot>
 
 		<div class=veil>
-			<img src="${hr}" alt="" draggable="false"/>
-			<slot name=loading></slot>
+			<div class=scalar>
+				<img class=logo src="${hr}" alt="" draggable="false"/>
+				<slot name=loading></slot>
+			</div>
 		</div>
 	`));var mI=ht`@layer benev.view {
 
@@ -833,7 +841,7 @@ slot {
 }`;var[Jm,UI]=wr("benev-footer",()=>(Lt(De,NI),mt`<slot></slot>`));var LI=ht`@layer benev.view {
 
 }`;var RI=e=>ae(()=>(Lt(De,LI),mt`
-		<benev-auth>Sign in</benev-auth>
+		<benev-auth>sign in</benev-auth>
 	`));async function KI(){let e=new fr,t=new Cr,A=new Er(t),o={BenevLoader:yI,BenevFooter:UI(),BenevMenu:GI(e),BenevHeader:xI(e),BenevAccount:RI(A),BenevAuth:hI(A.auth)};return await t.remember(),{account:A,shell:e,elements:o}}var ur=class{element;anim;original;#t;#e;#A=0;constructor(t,A=uA.anim){this.element=t,this.anim=A,this.original=document.createElement("template"),this.original.innerHTML=t.innerHTML,this.#t=document.createElement("div"),this.#t.style.display="contents",this.#t.slot="loading",this.#e=document.createElement("div"),this.#e.style.display="contents",wt.render(this.#e,Array.from(t.childNodes)),this.element.replaceChildren(),this.element.append(this.#t,this.#e)}async load(t,A){this.#A+=1;let o=this.#A,r=()=>this.#A===o;this.element.inert=!0,this.element.toggleAttribute("loading",!0),wt.render(this.#t,t());try{let[i]=await Promise.all([A(),Vt(this.anim*2)]);r()&&(this.element.toggleAttribute("loading",!1),this.element.inert=!1,wt.render(this.#e,i),await Vt(this.anim))}finally{r()&&(this.element.toggleAttribute("loading",!1),this.element.inert=!1,wt.render(this.#t,null))}}};var{elements:LB}=await KI();wt.register(LB);var RB=new ur(wt("benev-loader"));wt(".testloader").onclick=async()=>{await RB.load(()=>"loading...",async()=>Vt(1e3).then(()=>mt`<main benev-slice>new content</main>`))};
 /*! For license information please see main.bundle.min.js.LEGAL.txt */
 //# sourceMappingURL=main.bundle.min.js.map