@e280/shiny 0.1.0-15 → 0.1.0-17

package/x/demo/main.css

@@ -0,0 +1,71 @@
+
+@layer view {
+	:root {
+		height: 100%;
+		font-size: 16px;
+		font-family: sans-serif;
+
+		color-scheme: dark;
+		scrollbar-gutter: stable;
+
+		color: var(--alpha);
+		background: var(--bg);
+
+		--tint: #070429aa;
+		background:
+			linear-gradient(0deg, var(--tint), var(--tint)),
+			#141519 url("/assets/bg.webp") center 80% / cover no-repeat;
+
+		background-attachment: fixed, fixed;
+
+		text-shadow: 0.1em 0.1em 0.2em #0008;
+	}
+
+	body {
+		width: 100%;
+		min-height: 100%;
+		max-width: 60em;
+		margin: auto;
+		padding: 1em;
+		padding-bottom: 6em;
+
+		display: flex;
+		flex-direction: column;
+		gap: 1em;
+	}
+
+	h1 {
+		font-size: 1.5em;
+		display: flex;
+		flex-direction: column;
+		text-align: center;
+
+		strong {
+			font-size: 1.5em;
+			color: var(--prime);
+			color: color-mix(in oklab, white, var(--prime) 20%);
+			text-shadow: 0 0 0.8em color-mix(in oklab, white, var(--prime) 50%);
+		}
+
+		small {
+			opacity: 0.6;
+			font-size: 0.7em;
+			font-weight: normal;
+		}
+	}
+
+	body > section {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		margin-bottom: calc(var(--padding) * 2);
+	}
+
+	.gallery {
+		display: flex;
+		flex-direction: column;
+		gap: calc(var(--padding) * 2);
+	}
+}
+

package/x/demo/parts/exhibit.d.ts

@@ -0,0 +1,11 @@
+import { Content } from "@e280/sly";
+import { CSSResult } from "lit";
+export type Exhibit = {
+    name: string;
+    explain: Content;
+    render: () => Content;
+    js: string;
+    css?: CSSResult;
+    styleboxCss: CSSResult;
+};
+export declare const exhibit: (e: Exhibit) => Exhibit;

package/x/demo/parts/exhibit.js

@@ -0,0 +1,2 @@
+export const exhibit = (e) => e;
+//# sourceMappingURL=exhibit.js.map

package/x/demo/parts/exhibit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"exhibit.js","sourceRoot":"","sources":["../../../s/demo/parts/exhibit.ts"],"names":[],"mappings":"AAaA,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,CAAU,EAAE,EAAE,CAAC,CAAC,CAAA"}

package/x/demo/utils/lipsum.d.ts

@@ -1,2 +1,2 @@
 import { Dispenser } from "@e280/stz";
-export declare const makeLipsumDispenser: () => Dispenser<string>;
+export declare const lipsum: Dispenser<string>;

package/x/demo/utils/lipsum.js

@@ -1,5 +1,5 @@
 import { Dispenser } from "@e280/stz";
-export const makeLipsumDispenser = () => new Dispenser(() => [
+export const lipsum = new Dispenser(() => [
     `lorem kettlebell dolor sit amet, mountain squats consectetur trail-running. adipiscing deadlift elit, sed do 45lb turkish get-up eiusmod tempor incididunt ut hike magna aliqua. ut enim ad minim clean & press, quis nostrud exercitation lunges ullamco kettlebell snatch trailhead nisi ut aliquip ex dolore summit irure dolor.`,
     `lorem protein dolor sit amet, creatine scoop elit shaker bottle tempor. grilled steak magna keto-fasting culpa, carb-loading perspiciatis cheat day. whey isolate dolor sit macros elit, intermittent fasting tempor electrolyte magna; barefoot shoes culpa, liver perspiciatis ancestral squat rack gospel. lorem bulking dolor sit cut elit, tdee tracker tempor calorie deficit magna; chicken breast culpa gatorade perspiciatis meal prep.`,
     `lorem caffeine dolor sit amet, double espresso elit cold brew tempor jitter. adderall magna focus culpa, lion’s mane perspiciatis nootropic. nicotine gum dolor sit vape elit, dopamine hit tempor buzz magna; lsd microdosing culpa, productivity perspiciatis agile sprint. lorem latte dolor sit drip elit, french press tempor aeropress magna; insomnia culpa, circadian rhythm perspiciatis blue light filter.`,

package/x/demo/utils/lipsum.js.map

@@ -1 +1 @@
-{"version":3,"file":"lipsum.js","sourceRoot":"","sources":["../../../s/demo/utils/lipsum.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,SAAS,EAAC,MAAM,WAAW,CAAA;AAEnC,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,IAAI,SAAS,CAAC,GAAG,EAAE,CAAC;IAC5D,qUAAqU;IAErU,kbAAkb;IAElb,sZAAsZ;IAEtZ,yNAAyN;IAEzN,6TAA6T;IAE7T,ycAAyc;IAEzc,8bAA8b;CAC9b,CAAC,CAAA"}
+{"version":3,"file":"lipsum.js","sourceRoot":"","sources":["../../../s/demo/utils/lipsum.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,SAAS,EAAC,MAAM,WAAW,CAAA;AAEnC,MAAM,CAAC,MAAM,MAAM,GAAG,IAAI,SAAS,CAAC,GAAG,EAAE,CAAC;IACzC,qUAAqU;IAErU,kbAAkb;IAElb,sZAAsZ;IAEtZ,yNAAyN;IAEzN,6TAA6T;IAE7T,ycAAyc;IAEzc,8bAA8b;CAC9b,CAAC,CAAA"}

package/x/demo/views/codebox/style.css.js

@@ -0,0 +1,42 @@
+import { css } from "lit";
+export default css `@layer view {
+
+:host {
+	display: flex;
+	flex-direction: column;
+}
+
+.box {
+	flex: 1 1 auto;
+	display: flex;
+	flex-direction: column;
+	background: #0003;
+	border-radius: var(--rounded);
+}
+
+header {
+	display: flex;
+	justify-content: space-between;
+	padding: calc(var(--padding) / 4) var(--padding);
+
+	.title {
+		opacity: 0.4;
+		font-size: 1em;
+		font-weight: normal;
+	}
+
+	.buttons {
+		display: flex;
+		font-size: 1.2em;
+	}
+}
+
+code {
+	padding: calc(var(--padding) / 4) var(--padding);
+	color: var(--code);
+	white-space: pre-wrap;
+	tab-size: 2;
+}
+
+}`;
+//# sourceMappingURL=style.css.js.map

package/x/demo/views/codebox/style.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.css.js","sourceRoot":"","sources":["../../../../s/demo/views/codebox/style.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuChB,CAAA"}

package/x/demo/views/codebox/use-prism-styles.d.ts

@@ -0,0 +1 @@
+export declare function usePrismStyles(): CSSStyleSheet;

package/x/demo/views/codebox/use-prism-styles.js

@@ -0,0 +1,12 @@
+import { useOnce } from "@e280/sly";
+export function usePrismStyles() {
+    return useOnce(() => {
+        const tag = document.head.querySelector("[data-prism]");
+        if (!tag)
+            throw new Error("failed to find [data-prism] stylesheet");
+        const style = new CSSStyleSheet();
+        style.replaceSync(tag.textContent);
+        return style;
+    });
+}
+//# sourceMappingURL=use-prism-styles.js.map

package/x/demo/views/codebox/use-prism-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-prism-styles.js","sourceRoot":"","sources":["../../../../s/demo/views/codebox/use-prism-styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAA;AAEjC,MAAM,UAAU,cAAc;IAC7B,OAAO,OAAO,CAAC,GAAG,EAAE;QACnB,MAAM,GAAG,GAAG,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,CAAA;QACvD,IAAI,CAAC,GAAG;YAAE,MAAM,IAAI,KAAK,CAAC,wCAAwC,CAAC,CAAA;QACnE,MAAM,KAAK,GAAG,IAAI,aAAa,EAAE,CAAA;QACjC,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;QAClC,OAAO,KAAK,CAAA;IACb,CAAC,CAAC,CAAA;AACH,CAAC"}

package/x/demo/views/codebox/view.d.ts

@@ -0,0 +1,2 @@
+import "prismjs/components/prism-js-templates";
+export declare const Codebox: import("@e280/sly").ShadowView<[title: string, lang: "js" | "css", code: string]>;

package/x/demo/views/codebox/view.js

@@ -0,0 +1,29 @@
+import Prism from "prismjs";
+import "prismjs/components/prism-js-templates";
+import { html } from "lit";
+import { untab } from "@e280/stz";
+import { shadow, useCss } from "@e280/sly";
+import styleCss from "./style.css.js";
+import { usePrismStyles } from "./use-prism-styles.js";
+import { themeCss } from "../../../theme/theme.css.js";
+import { ShinyCopy } from "../../../views/copy/view.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+export const Codebox = shadow((title, lang, code) => {
+    const prismStyles = usePrismStyles();
+    useCss(themeCss, prismStyles, styleCss);
+    code = untab(code).trim();
+    const higlighted = Prism.highlight(code, lang === "js"
+        ? Prism.languages.javascript
+        : Prism.languages.css, lang);
+    return html `
+		<div class=box>
+			<header>
+				<h3 class=title>${title}</h3>
+				<div class=buttons>${ShinyCopy(code)}</div>
+			</header>
+
+			<code>${unsafeHTML(higlighted)}</code>
+		</div>
+	`;
+});
+//# sourceMappingURL=view.js.map

package/x/demo/views/codebox/view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view.js","sourceRoot":"","sources":["../../../../s/demo/views/codebox/view.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,SAAS,CAAA;AAC3B,OAAO,uCAAuC,CAAA;AAE9C,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAC,KAAK,EAAC,MAAM,WAAW,CAAA;AAC/B,OAAO,EAAC,MAAM,EAAE,MAAM,EAAC,MAAM,WAAW,CAAA;AAExC,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AACrC,OAAO,EAAC,cAAc,EAAC,MAAM,uBAAuB,CAAA;AACpD,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAA;AACpD,OAAO,EAAC,SAAS,EAAC,MAAM,6BAA6B,CAAA;AACrD,OAAO,EAAC,UAAU,EAAC,MAAM,+BAA+B,CAAA;AAExD,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,KAAa,EAAE,IAAkB,EAAE,IAAY,EAAE,EAAE;IACjF,MAAM,WAAW,GAAG,cAAc,EAAE,CAAA;IACpC,MAAM,CAAC,QAAQ,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAA;IAEvC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,CAAA;IACzB,MAAM,UAAU,GAAG,KAAK,CAAC,SAAS,CACjC,IAAI,EACJ,IAAI,KAAK,IAAI;QACZ,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,UAAU;QAC5B,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,EACtB,IAAI,CACJ,CAAA;IAED,OAAO,IAAI,CAAA;;;sBAGU,KAAK;yBACF,SAAS,CAAC,IAAI,CAAC;;;WAG7B,UAAU,CAAC,UAAU,CAAC;;EAE/B,CAAA;AACF,CAAC,CAAC,CAAA"}

package/x/demo/views/showcase/style.css.js

@@ -1,15 +1,15 @@
 import { css } from "lit";
 export default css `@layer view {
 
-:host {
+section.showcase {
 	position: relative;
 
 	display: flex;
 	flex-direction: column;
 
 	padding: 1em;
-	border-radius: 0.5em;
-	gap: 1em;
+	border-radius: var(--rounded);
+	gap: var(--padding);
 
 	background: linear-gradient(to right top, #252dd985, #aa6affbd);
 	backdrop-filter: blur(0.5em);
@@ -18,29 +18,29 @@ export default css `@layer view {
 	border-top: 2px solid #fff4;
 
 	&::before {
+		z-index: 0;
 		content: "";
 		display: block;
 		position: absolute;
 		inset: 0;
-		border-radius: 0.5em;
-		background: #0007;
-		width: calc(100% - 0.3em);
-		height: calc(100% - 0.3em);
+		border-radius: var(--rounded);
+		background: #0006;
+		width: calc(100% - var(--padding));
+		height: calc(100% - var(--padding));
 		margin: auto;
-		z-index: 0;
 	}
 
 	> * {
-		position: relative;
 		z-index: 1;
+		position: relative;
 	}
 }
 
 header {
 	display: flex;
 	flex-wrap: wrap;
-	place-content: center center;
-	gap: 0.5em;
+	place-content: center;
+	gap: var(--padding);
 
 	h2 {
 		flex: 1 1 auto;
@@ -48,5 +48,36 @@ header {
 	}
 }
 
+.sides {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--padding);
+
+	> * {
+		flex: 1 1 0;
+	}
+
+}
+
+.codezone {
+	display: flex;
+	flex-direction: column;
+	gap: var(--padding);
+
+	> * {
+		flex: 1 1 auto;
+	}
+}
+
+.stage {
+	display: flex;
+	flex-direction: column;
+	justify-content: start;
+	align-items: center;
+	padding: calc(var(--padding) * 2) var(--padding);
+	border: 1px dashed color-mix(in oklch, transparent, currentColor 50%);
+	border-radius: var(--rounded);
+}
+
 }`;
 //# sourceMappingURL=style.css.js.map

package/x/demo/views/showcase/style.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.css.js","sourceRoot":"","sources":["../../../../s/demo/views/showcase/style.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiDhB,CAAA"}
+{"version":3,"file":"style.css.js","sourceRoot":"","sources":["../../../../s/demo/views/showcase/style.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgFhB,CAAA"}

package/x/demo/views/showcase/view.d.ts

@@ -1,7 +1,2 @@
-import { CSSResultGroup } from "lit";
-import { ExhibitParams } from "../exhibit/view.js";
-export declare const Showcase: import("@e280/sly").View<[options: {
-    name: string;
-    style: CSSResultGroup;
-    exhibits: ExhibitParams[];
-}]>;
+import { Exhibit } from "../../parts/exhibit.js";
+export declare const Showcase: import("@e280/sly").ShadowView<[title: string, exhibits: Exhibit[]]>;

package/x/demo/views/showcase/view.js

@@ -1,40 +1,44 @@
-import { view } from "@e280/sly";
-import { html } from "lit";
-import styleCss from "./style.css.js";
-import { auraViews, viewsets } from "../../viewsets.js";
-import { Exhibit } from "../exhibit/view.js";
-import { TabControl } from "../../../components/tabs/control.js";
-import { foundationCss } from "../../../components/foundation.css.js";
-export const Showcase = view(use => (options) => {
-    use.name(`showcase-${options.name}`);
-    use.styles(foundationCss, styleCss);
-    const exhibitTabControl = use.once(() => new TabControl());
-    const themeTabControl = use.once(() => new TabControl());
-    const exhibitViews = viewsets.at(themeTabControl.index)[1];
-    const exhibit = options.exhibits.at(exhibitTabControl.index);
+import { css, html } from "lit";
+import { shadow, useCss, useName, useOnce } from "@e280/sly";
+import showcaseCss from "./style.css.js";
+import { Codebox } from "../codebox/view.js";
+import { Stylebox } from "../stylebox/view.js";
+import { themeCss } from "../../../theme/theme.css.js";
+import { ShinyTabs } from "../../../views/tabs/view.js";
+import { ShinyButton } from "../../../views/button/view.js";
+import { TabsControl } from "../../../views/tabs/control.js";
+export const Showcase = shadow((title, exhibits) => {
+    useName("showcase");
+    useCss(themeCss, showcaseCss);
+    const control = useOnce(() => new TabsControl());
+    const exhibit = exhibits.at(control.index);
     return html `
-		<header>
-			<h2>✨shiny-${options.name}✨</h2>
-			${auraViews.ShinyTabs
-        .props(exhibitTabControl)
-        .attr("snug")
-        .children(options.exhibits.map(p => auraViews.ShinyButton
-        .props()
-        .attr("sad")
-        .children(p.label)
-        .render()))
-        .render()}
-			${auraViews.ShinyTabs
-        .props(themeTabControl)
-        .attr("snug")
-        .children(viewsets.map(([theme]) => auraViews.ShinyButton
-        .props()
-        .children(theme)
-        .render()))
-        .render()}
-		</header>
+		<section class=showcase>
+			<header>
+				<h2>✨${title}✨</h2>
+				<nav>
+					${ShinyTabs.with({
+        props: [{ control, snug: true }],
+        children: exhibits.map(exhibit => ShinyButton(exhibit.name)),
+    })}
+				</nav>
+			</header>
 
-		${Exhibit(exhibit, exhibitViews, options.style)}
+			${exhibit && html `
+				<div class=explain>${exhibit.explain}</div>
+
+				<div class=sides>
+					<div class=codezone>
+						${Codebox("lit-html", "js", exhibit.js)}
+						${exhibit.css && Codebox("css", "css", exhibit.css.toString())}
+					</div>
+
+					<div class=stage>
+						${Stylebox(exhibit.styleboxCss, exhibit.css ?? css ``, exhibit.render())}
+					</div>
+				</div>
+			`}
+		</section>
 	`;
 });
 //# sourceMappingURL=view.js.map

package/x/demo/views/showcase/view.js.map

@@ -1 +1 @@
-{"version":3,"file":"view.js","sourceRoot":"","sources":["../../../../s/demo/views/showcase/view.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAA;AAC9B,OAAO,EAAiB,IAAI,EAAC,MAAM,KAAK,CAAA;AACxC,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AACrC,OAAO,EAAC,SAAS,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAA;AACrD,OAAO,EAAC,OAAO,EAAgB,MAAM,oBAAoB,CAAA;AACzD,OAAO,EAAC,UAAU,EAAC,MAAM,qCAAqC,CAAA;AAC9D,OAAO,EAAC,aAAa,EAAC,MAAM,uCAAuC,CAAA;AAEnE,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,OAInC,EAAE,EAAE;IAEL,GAAG,CAAC,IAAI,CAAC,YAAY,OAAO,CAAC,IAAI,EAAE,CAAC,CAAA;IACpC,GAAG,CAAC,MAAM,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAA;IAEnC,MAAM,iBAAiB,GAAG,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,UAAU,EAAE,CAAC,CAAA;IAC1D,MAAM,eAAe,GAAG,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,UAAU,EAAE,CAAC,CAAA;IAExD,MAAM,YAAY,GAAG,QAAQ,CAAC,EAAE,CAAC,eAAe,CAAC,KAAK,CAAE,CAAC,CAAC,CAAC,CAAA;IAC3D,MAAM,OAAO,GAAG,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAE,CAAA;IAE7D,OAAO,IAAI,CAAA;;gBAEI,OAAO,CAAC,IAAI;KACvB,SAAS,CAAC,SAAS;SACnB,KAAK,CAAC,iBAAiB,CAAC;SACxB,IAAI,CAAC,MAAM,CAAC;SACZ,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAClC,SAAS,CAAC,WAAW;SACnB,KAAK,EAAE;SACP,IAAI,CAAC,KAAK,CAAC;SACX,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;SACjB,MAAM,EAAE,CACV,CAAC;SACD,MAAM,EAAE;KACR,SAAS,CAAC,SAAS;SACnB,KAAK,CAAC,eAAe,CAAC;SACtB,IAAI,CAAC,MAAM,CAAC;SACZ,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE,CAClC,SAAS,CAAC,WAAW;SACnB,KAAK,EAAE;SACP,QAAQ,CAAC,KAAK,CAAC;SACf,MAAM,EAAE,CACV,CAAC;SACD,MAAM,EAAE;;;IAGT,OAAO,CAAC,OAAO,EAAE,YAAY,EAAE,OAAO,CAAC,KAAK,CAAC;EAC/C,CAAA;AACF,CAAC,CAAC,CAAA"}
+{"version":3,"file":"view.js","sourceRoot":"","sources":["../../../../s/demo/views/showcase/view.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAC,MAAM,WAAW,CAAA;AAE1D,OAAO,WAAW,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAC,OAAO,EAAC,MAAM,oBAAoB,CAAA;AAC1C,OAAO,EAAC,QAAQ,EAAC,MAAM,qBAAqB,CAAA;AAE5C,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAA;AACpD,OAAO,EAAC,SAAS,EAAC,MAAM,6BAA6B,CAAA;AACrD,OAAO,EAAC,WAAW,EAAC,MAAM,+BAA+B,CAAA;AACzD,OAAO,EAAC,WAAW,EAAC,MAAM,gCAAgC,CAAA;AAE1D,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,CAAC,KAAa,EAAE,QAAmB,EAAE,EAAE;IACrE,OAAO,CAAC,UAAU,CAAC,CAAA;IACnB,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAA;IAE7B,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,WAAW,EAAE,CAAC,CAAA;IAChD,MAAM,OAAO,GAAG,QAAQ,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;IAE1C,OAAO,IAAI,CAAA;;;WAGD,KAAK;;OAET,SAAS,CAAC,IAAI,CAAC;QAChB,KAAK,EAAE,CAAC,EAAC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAC,CAAC;QAC9B,QAAQ,EAAE,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;KAC5D,CAAC;;;;KAIF,OAAO,IAAI,IAAI,CAAA;yBACK,OAAO,CAAC,OAAO;;;;QAIhC,OAAO,CAAC,UAAU,EAAE,IAAI,EAAE,OAAO,CAAC,EAAE,CAAC;QACrC,OAAO,CAAC,GAAG,IAAI,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;;;;QAI5D,QAAQ,CAAC,OAAO,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,IAAI,GAAG,CAAA,EAAE,EAAE,OAAO,CAAC,MAAM,EAAE,CAAC;;;IAGzE;;EAEF,CAAA;AACF,CAAC,CAAC,CAAA"}

package/x/demo/views/stylebox/view.d.ts

@@ -0,0 +1,3 @@
+import { CSSResult } from "lit";
+import { Content } from "@e280/sly";
+export declare const Stylebox: import("@e280/sly").ShadowView<[styleboxCss: CSSResult, styles: CSSResult, content?: Content]>;

package/x/demo/views/stylebox/view.js

@@ -0,0 +1,13 @@
+import { html, unsafeCSS } from "lit";
+import { shadow, useCss, useName } from "@e280/sly";
+import { themeCss } from "../../../theme/theme.css.js";
+export const Stylebox = shadow((styleboxCss, styles, content) => {
+    useName("stylebox");
+    useCss(themeCss, styleboxCss, styles);
+    return html `
+		<style>${unsafeCSS(styleboxCss)}</style>
+		<style>${unsafeCSS(styles)}</style>
+		${content}
+	`;
+});
+//# sourceMappingURL=view.js.map

package/x/demo/views/stylebox/view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view.js","sourceRoot":"","sources":["../../../../s/demo/views/stylebox/view.ts"],"names":[],"mappings":"AACA,OAAO,EAAY,IAAI,EAAE,SAAS,EAAC,MAAM,KAAK,CAAA;AAC9C,OAAO,EAAU,MAAM,EAAE,MAAM,EAAE,OAAO,EAAC,MAAM,WAAW,CAAA;AAC1D,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAA;AAEpD,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,CAC7B,WAAsB,EACtB,MAAiB,EACjB,OAAgB,EACf,EAAE;IAEJ,OAAO,CAAC,UAAU,CAAC,CAAA;IACnB,MAAM,CAAC,QAAQ,EAAE,WAAW,EAAE,MAAM,CAAC,CAAA;IAErC,OAAO,IAAI,CAAA;WACD,SAAS,CAAC,WAAW,CAAC;WACtB,SAAS,CAAC,MAAM,CAAC;IACxB,OAAO;EACT,CAAA;AACF,CAAC,CAAC,CAAA"}

package/x/index.d.ts

@@ -1,11 +1 @@
-export * from "./themes/index.js";
-export * from "./components/copy/component.js";
-export * from "./components/drawer/component.js";
-export * from "./components/drawer/control.js";
-export * from "./components/example/component.js";
-export * from "./components/tabs/component.js";
-export * from "./components/tabs/control.js";
-export * from "./components/foundation.css.js";
-export * from "./components/framework.js";
-export * from "./components/raw-components.js";
-export * from "./shiny.js";
+export * from "./views/copy/view.js";