@benev/web 0.1.0-2

package/x/dom/menu/utils/on-keypress.d.ts

@@ -0,0 +1 @@
+export declare function onKeypress(keys: string[], fn: () => void): () => () => void;

package/x/dom/menu/utils/on-keypress.js

@@ -0,0 +1,18 @@
+import { ev } from "@e280/stz";
+export function onKeypress(keys, fn) {
+    return () => ev(window, {
+        keydown: (event) => {
+            const target = event.target;
+            const typing = (target instanceof HTMLInputElement ||
+                target instanceof HTMLTextAreaElement ||
+                target.isContentEditable);
+            if (typing)
+                return;
+            if (keys.includes(event.code)) {
+                event.preventDefault();
+                fn();
+            }
+        },
+    });
+}
+//# sourceMappingURL=on-keypress.js.map

package/x/dom/menu/utils/on-keypress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"on-keypress.js","sourceRoot":"","sources":["../../../../s/dom/menu/utils/on-keypress.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,EAAE,EAAC,MAAM,WAAW,CAAA;AAE5B,MAAM,UAAU,UAAU,CAAC,IAAc,EAAE,EAAc;IACxD,OAAO,GAAG,EAAE,CAAC,EAAE,CAAC,MAAM,EAAE;QACvB,OAAO,EAAE,CAAC,KAAoB,EAAE,EAAE;YACjC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAA;YAC1C,MAAM,MAAM,GAAG,CACd,MAAM,YAAY,gBAAgB;gBAClC,MAAM,YAAY,mBAAmB;gBACrC,MAAM,CAAC,iBAAiB,CACxB,CAAA;YACD,IAAI,MAAM;gBACT,OAAM;YACP,IAAI,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC;gBAC/B,KAAK,CAAC,cAAc,EAAE,CAAA;gBACtB,EAAE,EAAE,CAAA;YACL,CAAC;QACF,CAAC;KACD,CAAC,CAAA;AACH,CAAC"}

package/x/dom/menu/utils/use-after-first-render.d.ts

@@ -0,0 +1 @@
+export declare function useAfterFirstRender(fn: (shadow: ShadowRoot) => void): void;

package/x/dom/menu/utils/use-after-first-render.js

@@ -0,0 +1,7 @@
+import { useRendered, useShadow, useWake } from "@e280/sly";
+export function useAfterFirstRender(fn) {
+    const shadow = useShadow();
+    const rendered = useRendered();
+    useWake(() => rendered.then(() => fn(shadow)));
+}
+//# sourceMappingURL=use-after-first-render.js.map

package/x/dom/menu/utils/use-after-first-render.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-after-first-render.js","sourceRoot":"","sources":["../../../../s/dom/menu/utils/use-after-first-render.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,WAAW,EAAE,SAAS,EAAE,OAAO,EAAC,MAAM,WAAW,CAAA;AAEzD,MAAM,UAAU,mBAAmB,CAAC,EAAgC;IACnE,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAA;IAC9B,OAAO,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;AAC/C,CAAC"}

package/x/dom/menu/view.d.ts

@@ -0,0 +1,2 @@
+import { Shell } from "../../vitals/shell.js";
+export declare const menuComponent: (shell: Shell) => new () => HTMLElement;

package/x/dom/menu/view.js

@@ -0,0 +1,27 @@
+import { html } from "lit";
+import { dom, shadowElement, useCss, useMount } from "@e280/sly";
+import styleCss from "./style.css.js";
+import { HeaderView } from "../header/view.js";
+import { themeCss } from "../../css/theme.css.js";
+import { onKeypress } from "./utils/on-keypress.js";
+import { clickBackdrop } from "./utils/click-backdrop.js";
+import { useAfterFirstRender } from "./utils/use-after-first-render.js";
+export const menuComponent = (shell) => shadowElement(() => {
+    useCss(themeCss, styleCss);
+    useAfterFirstRender(shadow => shell.attach(dom("dialog", shadow)));
+    useMount(onKeypress(["KeyB", "Escape"], () => shell.toggle()));
+    const click = clickBackdrop(() => shell.toggle(false));
+    const renderMenuContent = () => html `<slot></slot>`;
+    return html `
+		<dialog @click=${click}>
+			<section class=plate autofocus tabindex="-1">
+				${shell.dialog?.open
+        ? renderMenuContent()
+        : null}
+			</section>
+
+			${HeaderView(shell)}
+		</dialog>
+	`;
+});
+//# sourceMappingURL=view.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"view.js","sourceRoot":"","sources":["../../../s/dom/menu/view.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAC,GAAG,EAAE,aAAa,EAAE,MAAM,EAAE,QAAQ,EAAC,MAAM,WAAW,CAAA;AAC9D,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AAErC,OAAO,EAAC,UAAU,EAAC,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAC,QAAQ,EAAC,MAAM,wBAAwB,CAAA;AAC/C,OAAO,EAAC,UAAU,EAAC,MAAM,wBAAwB,CAAA;AACjD,OAAO,EAAC,aAAa,EAAC,MAAM,2BAA2B,CAAA;AACvD,OAAO,EAAC,mBAAmB,EAAC,MAAM,mCAAmC,CAAA;AAErE,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAY,EAAE,EAAE,CAAC,aAAa,CAAC,GAAG,EAAE;IACjE,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;IAC1B,mBAAmB,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,CAAA;IAClE,QAAQ,CAAC,UAAU,CAAC,CAAC,MAAM,EAAE,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,CAAA;IAE9D,MAAM,KAAK,GAAG,aAAa,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAA;IACtD,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA,eAAe,CAAA;IAEnD,OAAO,IAAI,CAAA;mBACO,KAAK;;MAElB,KAAK,CAAC,MAAM,EAAE,IAAI;QACnB,CAAC,CAAC,iBAAiB,EAAE;QACrB,CAAC,CAAC,IAAI;;;KAGN,UAAU,CAAC,KAAK,CAAC;;EAEpB,CAAA;AACF,CAAC,CAAC,CAAA"}

package/x/index-ssg.d.ts

@@ -0,0 +1 @@
+export * from "./css/benev.csstext.js";

package/x/index-ssg.js

@@ -0,0 +1,2 @@
+export * from "./css/benev.csstext.js";
+//# sourceMappingURL=index-ssg.js.map

package/x/index-ssg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-ssg.js","sourceRoot":"","sources":["../s/index-ssg.ts"],"names":[],"mappings":"AACA,cAAc,wBAAwB,CAAA"}

package/x/index.d.ts

@@ -0,0 +1,9 @@
+export * from "./vitals/shell.js";
+export * from "./vitals/setup.js";
+export * from "./css/benev.csstext.js";
+export * from "./css/theme.css.js";
+export * from "./dom/header/view.js";
+export * from "./dom/loader/view.js";
+export * from "./dom/loader/loader.js";
+export * from "./dom/menu/view.js";
+export * from "./consts.js";

package/x/index.html

@@ -0,0 +1,368 @@
+<!doctype html>
+<html benev>
+	<head>
+		<meta charset="utf-8"/>
+		<meta name="viewport" content="width=device-width,initial-scale=1"/>
+		<meta name="darkreader-lock"/>
+
+		<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=cabc9d18d6c4"></script>
+		<style>
+			@layer benev, demo;
+
+
+@layer
+benev.vars,
+benev.core,
+benev.common,
+benev.page;
+
+@layer benev.vars {
+[benev], :host {
+
+
+--benev-font-size: 18px;
+--benev-site-width: 62em;
+--benev-copy-width: 70ch;
+--benev-headroom: 2.5em;
+
+--benev-bg: #111;
+--benev-prime: #ebb935;
+--benev-tray: #453e2ca8;
+--benev-text: color-mix(in oklch, var(--benev-prime), #fffc 90%);
+--benev-intense: white;
+--benev-focus: 2px solid cyan;
+--benev-link: aqua;
+--benev-b-size: 1.5em;
+--benev-code: #0f0;
+
+--benev-select-bg: #f60;
+--benev-select-color: #ff8;
+
+--benev-line: #ebb93588;
+--benev-thin: 1px;
+--benev-thick: 3px;
+--benev-border: var(--benev-thin) solid color-mix(in oklch, transparent, var(--benev-line) 50%);
+
+--benev-pad: 0.5em;
+--benev-space: 1em;
+--benev-anim: 300ms;
+--benev-round: 0.5em;
+--benev-blur: blur(1em);
+--benev-backdrop: #0008;
+
+--benev-box-shadow: 0 0.5em 2em #0008;
+--benev-text-shadow: 0.04em 0.08em 0.1em #0008;
+
+
+}
+}
+
+@layer benev.core {
+[benev], :host {
+
+
+&, *, ::before, ::after {
+margin: 0;
+padding: 0;
+box-sizing: border-box;
+scrollbar-width: thin;
+}
+
+:focus-visible {
+outline: var(--benev-focus);
+outline-offset: 0.2em;
+}
+
+::selection {
+color: var(--benev-select-color);
+background: var(--benev-select-bg);
+}
+
+a {
+color: var(--benev-link);
+text-decoration: none;
+
+&:visited {
+	color: var(--benev-link);
+}
+
+&:hover, &:focus-visible {
+	color: color-mix(in srgb, var(--benev-link), white 15%);
+	text-decoration: underline;
+}
+
+&:active {
+	color: color-mix(in srgb, var(--benev-link), white 50%);
+}
+
+&[benev-cardlink] {
+	color: inherit;
+
+	&:hover, &:focus-visible {
+		color: inherit;
+		text-decoration: none;
+		filter: brightness(105%);
+	}
+
+	&:active {
+		color: inherit;
+		filter: brightness(95%);
+	}
+}
+}
+
+
+}
+}
+
+@layer benev.common {
+[benev], :host {
+
+
+button, [benev-button] {
+font: inherit;
+text-decoration: none;
+
+display: inline-flex;
+align-items: center;
+flex-wrap: wrap;
+padding: var(--benev-pad) var(--benev-space);
+
+font-weight: bold;
+text-transform: uppercase;
+color: var(--benev-prime);
+background: oklch(from var(--benev-bg) l c h / 50%);
+backdrop-filter: var(--benev-blur);
+box-shadow: var(--benev-box-shadow);
+border: var(--benev-thick) solid currentColor;
+border-radius: var(--benev-round);
+
+&[disabled] {
+	opacity: 0.3;
+}
+
+&:not([disabled]) {
+	cursor: pointer;
+	transform: scale(100%);
+	transition: all var(--benev-anim) ease;
+	&:hover, &:focus-visible { transform: scale(105%); filter: brightness(120%); }
+	&:active { transform: scale(100%); filter: brightness(100%); }
+}
+
+&[benev-button="naked"] {
+	color: inherit;
+	background: transparent;
+	backdrop-filter: none;
+	box-shadow: none;
+	padding: 0;
+	border-radius: 0;
+	border: none;
+	text-transform: unset;
+	font-weight: inherit;
+	text-transform: inherit;
+}
+
+&[benev-button="juicy"] {
+	opacity: 1;
+	color: black;
+	border: var(--benev-thick) solid var(--benev-prime);
+	background: linear-gradient(
+		to bottom,
+		oklch(from var(--benev-prime) calc(l * 1.5) c h),
+		oklch(from var(--benev-prime) l calc(c * 1.5) h)
+	);
+	&:is(:hover, :focus-visible) {
+		box-shadow: 0 0 2em color-mix(in oklch, transparent, var(--benev-prime));
+	}
+}
+}
+
+[benev-slice] {
+width: 100%;
+max-width: var(--benev-site-width);
+margin-left: auto;
+margin-right: auto;
+}
+
+benev-menu:not(:defined) {
+display: none;
+}
+
+benev-header {
+display: flex;
+justify-content: end;
+align-items: center;
+width: 100%;
+max-width: var(--benev-site-width);
+margin: 0 auto;
+
+&:not(:defined) {
+	padding: var(--benev-pad);
+	gap: var(--benev-space);
+
+	&::before {
+		content: "";
+		display: inline-block;
+		margin-right: auto;
+		width: var(--benev-b-size);
+		height: var(--benev-b-size);
+	}
+}
+}
+
+[benev-prose] {
+display: flex;
+flex-direction: column;
+gap: var(--benev-pad);
+
+h1 {
+	font-size: 2.5em;
+	color: var(--benev-intense);
+	a { color: inherit; }
+}
+
+h2 {
+	font-size: 1.5em;
+	color: var(--benev-prime);
+}
+
+h3, h4, h5, h6 {
+	color: var(--benev-prime);
+}
+
+h1, h2, h3, h4, h5, h6 {
+	margin-top: var(--benev-space);
+}
+
+p {
+	max-width: var(--benev-copy-width);
+}
+
+p:has(> img) {
+	max-width: 100%;
+}
+
+ul, ol {
+	padding-left: 1.5em;
+}
+
+img {
+	max-width: 100%;
+	background: #0004;
+	border-radius: var(--benev-round);
+	box-shadow: var(--benev-box-shadow);
+}
+
+blockquote {
+	color: oklch(from currentColor l 0 h / 50%);
+	padding-left: var(--benev-pad);
+	margin-left: var(--benev-pad);
+	font-style: italic;
+	border-left: var(--benev-thick) solid currentColor;
+}
+
+hr {
+	border: none;
+	display: block;
+	height: var(--benev-thick);
+	background: oklch(from var(--benev-text) l c h / 25%);
+	margin: var(--benev-space) 0;
+}
+
+code {
+	font-size: 0.8em;
+
+	display: block;
+	width: 100%;
+	overflow: auto;
+
+	padding: var(--benev-space);
+	color: var(--benev-code);
+	background: var(--benev-backdrop);
+	border-radius: var(--benev-round);
+	border: var(--benev-border);
+	border-color: oklch(from var(--benev-code) l c h / 33%);
+	box-shadow: var(--benev-box-shadow);
+}
+}
+
+
+}
+}
+
+@layer benev.page {
+[benev], :host {
+
+
+color-scheme: dark;
+
+&:is(html) {
+font-family: sans-serif;
+font-size: var(--benev-font-size);
+
+scrollbar-gutter: stable;
+scrollbar-width: thin;
+
+color: var(--benev-text);
+background: var(--benev-bg);
+text-shadow: var(--benev-text-shadow);
+}
+
+body {
+min-height: 100dvh;
+}
+
+
+}
+}
+
+
+
+@layer demo {
+benev-header {
+	z-index: 2;
+	position: absolute;
+	inset: 0 0 auto;
+}
+
+benev-loader {
+	position: absolute;
+	inset: 0;
+}
+
+main {
+	padding: var(--benev-pad);
+	padding-top: var(--benev-headroom);
+}
+}
+
+
+		</style>
+
+
+<meta property="og:type" content="website"/>
+<meta property="og:title" content="@benev/web"/>
+<meta property="og:description" content="benev web ui library"/>
+<meta property="og:site_name" content="@benev/web"/>
+<meta name="theme-color" content="#ffdd22"/>
+
+
+
+	</head>
+	<body>
+		<benev-menu></benev-menu>
+
+		<benev-header>
+			<a href="https://benev.gg/">benev.gg</a>
+		</benev-header>
+
+		<benev-loader>
+			<main benev-slice>
+				<h1>benev</h1>
+				<button class=testloader>test loader</button>
+			</main>
+		</benev-loader>
+	</body>
+</html>

package/x/index.html.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("@e280/scute").TemplateFn;
+export default _default;

package/x/index.html.js

@@ -0,0 +1,43 @@
+import { template, html, socialCard, dataSvgEmoji } from "@e280/scute";
+import { benevCssText } from "./css/benev.csstext.js";
+export default template(import.meta.url, async (orb) => html `
+	<!doctype html>
+	<html benev>
+		<head>
+			<meta charset="utf-8"/>
+			<meta name="viewport" content="width=device-width,initial-scale=1"/>
+			<meta name="darkreader-lock"/>
+
+			<title>@benev/web</title>
+			<link rel="icon" href="${dataSvgEmoji("😇")}"/>
+			<script type="module" src="${orb.hashurl("main.bundle.min.js")}"></script>
+			<style>
+				@layer benev, demo;
+				${html.raw(benevCssText)}
+				${orb.inject("css/demo.css")}
+			</style>
+
+			${socialCard({
+    themeColor: "#ffdd22",
+    siteName: "@benev/web",
+    title: "@benev/web",
+    description: "benev web ui library",
+})}
+		</head>
+		<body>
+			<benev-menu></benev-menu>
+
+			<benev-header>
+				<a href="https://benev.gg/">benev.gg</a>
+			</benev-header>
+
+			<benev-loader>
+				<main benev-slice>
+					<h1>benev</h1>
+					<button class=testloader>test loader</button>
+				</main>
+			</benev-loader>
+		</body>
+	</html>
+`);
+//# sourceMappingURL=index.html.js.map

package/x/index.html.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.html.js","sourceRoot":"","sources":["../s/index.html.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,YAAY,EAAC,MAAM,aAAa,CAAA;AACpE,OAAO,EAAC,YAAY,EAAC,MAAM,wBAAwB,CAAA;AAEnD,eAAe,QAAQ,CAAC,OAAO,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,GAAG,EAAC,EAAE,CAAC,IAAI,CAAA;;;;;;;;;4BAS9B,YAAY,CAAC,IAAI,CAAC;gCACd,GAAG,CAAC,OAAO,CAAC,oBAAoB,CAAC;;;MAG3D,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC;MACtB,GAAG,CAAC,MAAM,CAAC,cAAc,CAAC;;;KAG3B,UAAU,CAAC;IACZ,UAAU,EAAE,SAAS;IACrB,QAAQ,EAAE,YAAY;IACtB,KAAK,EAAE,YAAY;IACnB,WAAW,EAAE,sBAAsB;CACnC,CAAC;;;;;;;;;;;;;;;;;CAiBJ,CAAC,CAAA"}

package/x/index.js

@@ -0,0 +1,10 @@
+export * from "./vitals/shell.js";
+export * from "./vitals/setup.js";
+export * from "./css/benev.csstext.js";
+export * from "./css/theme.css.js";
+export * from "./dom/header/view.js";
+export * from "./dom/loader/view.js";
+export * from "./dom/loader/loader.js";
+export * from "./dom/menu/view.js";
+export * from "./consts.js";
+//# sourceMappingURL=index.js.map

package/x/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../s/index.ts"],"names":[],"mappings":"AACA,cAAc,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA;AAEjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAElC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAElC,cAAc,aAAa,CAAA"}

package/x/main.bundle.d.ts

@@ -0,0 +1 @@
+export {};

package/x/main.bundle.js

@@ -0,0 +1,12 @@
+import { html } from "lit";
+import { dom } from "@e280/sly";
+import { nap } from "@e280/stz";
+import { setupBenev } from "./vitals/setup.js";
+import { Loader } from "./dom/loader/loader.js";
+const { elements } = await setupBenev();
+dom.register(elements);
+const loader = new Loader(dom("benev-loader"));
+dom(".testloader").onclick = async () => {
+    await loader.load(() => "loading...", async () => nap(1000).then(() => html `<main benev-slice>new content</main>`));
+};
+//# sourceMappingURL=main.bundle.js.map

package/x/main.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.bundle.js","sourceRoot":"","sources":["../s/main.bundle.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAC,GAAG,EAAC,MAAM,WAAW,CAAA;AAC7B,OAAO,EAAC,GAAG,EAAC,MAAM,WAAW,CAAA;AAC7B,OAAO,EAAC,UAAU,EAAC,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAC,MAAM,EAAC,MAAM,wBAAwB,CAAA;AAE7C,MAAM,EAAC,QAAQ,EAAC,GAAG,MAAM,UAAU,EAAE,CAAA;AACrC,GAAG,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAA;AAEtB,MAAM,MAAM,GAAG,IAAI,MAAM,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC,CAAA;AAE9C,GAAG,CAAC,aAAa,CAAC,CAAC,OAAO,GAAG,KAAK,IAAG,EAAE;IACtC,MAAM,MAAM,CAAC,IAAI,CAChB,GAAG,EAAE,CAAC,YAAY,EAClB,KAAK,IAAG,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAA,sCAAsC,CAAC,CAC3E,CAAA;AACF,CAAC,CAAA"}