@e280/shiny 0.1.0-2 → 0.1.0-21

package/x/views/drawer/view.js

@@ -0,0 +1,60 @@
+import { html } from "lit";
+import { dom, shadow, useAttrs, useCss, useHost, useMount, useName, useOnce } from "@e280/sly";
+import styleCss from "./style.css.js";
+import { themeCss } from "../../theme/theme.css.js";
+import { DrawerControl } from "./control.js";
+import { States } from "../../utils/states.js";
+import xSvg from "../../icons/tabler/x.svg.js";
+import menu2Svg from "../../icons/tabler/menu-2.svg.js";
+export const ShinyDrawer = shadow((options = {}) => {
+    useName("shiny-drawer");
+    useCss(themeCss, styleCss);
+    const host = useHost();
+    const states = useOnce(() => new States(host));
+    const control = useOnce(() => (options.control ?? new DrawerControl()));
+    const attrs = useAttrs({
+        side: String,
+        button: Boolean,
+        open: Boolean,
+    });
+    attrs.open = control.isOpen;
+    const button = options.button ?? attrs.button;
+    const side = options.side ?? (attrs.side === "right" ? "right" : "left");
+    states.assign(side, control.isOpen ? "opened" : "closed");
+    useMount(() => dom.events(window, { keydown: (event) => {
+            if (event.code === "Escape")
+                control.close();
+        } }));
+    function renderButton() {
+        return html `
+			<button part=button @click="${control.toggle}">
+				${control.isOpen
+            ? html `
+						<slot name=button-x>
+							${xSvg}
+						</slot>
+					`
+            : html `
+						<slot name=button>
+							${menu2Svg}
+						</slot>
+					`}
+			</button>
+		`;
+    }
+    return html `
+		<div class=shell ?data-open="${control.isOpen}" data-side="${side}">
+			<slot name=plate ?inert="${control.isOpen}"></slot>
+
+			<div class=clipper>
+				<div part=blanket @click="${control.close}" ?inert="${!control.isOpen}"></div>
+
+				<div part=tray>
+					<slot part=slate ?inert="${!control.isOpen}"></slot>
+					${button ? renderButton() : null}
+				</div>
+			</div>
+		</div>
+	`;
+});
+//# sourceMappingURL=view.js.map

package/x/views/drawer/view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view.js","sourceRoot":"","sources":["../../../s/views/drawer/view.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAC,MAAM,WAAW,CAAA;AAE5F,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AAErC,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAA;AACjD,OAAO,EAAC,aAAa,EAAC,MAAM,cAAc,CAAA;AAC1C,OAAO,EAAC,MAAM,EAAC,MAAM,uBAAuB,CAAA;AAC5C,OAAO,IAAI,MAAM,6BAA6B,CAAA;AAC9C,OAAO,QAAQ,MAAM,kCAAkC,CAAA;AAEvD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,UAI9B,EAAE,EAAE,EAAE;IAEV,OAAO,CAAC,cAAc,CAAC,CAAA;IACvB,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;IAE1B,MAAM,IAAI,GAAG,OAAO,EAAE,CAAA;IACtB,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAA;IAC9C,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,IAAI,IAAI,aAAa,EAAE,CAAC,CAAC,CAAA;IAEvE,MAAM,KAAK,GAAG,QAAQ,CAAC;QACtB,IAAI,EAAE,MAAM;QACZ,MAAM,EAAE,OAAO;QACf,IAAI,EAAE,OAAO;KACb,CAAC,CAAA;IAEF,KAAK,CAAC,IAAI,GAAG,OAAO,CAAC,MAAM,CAAA;IAE3B,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,IAAI,KAAK,CAAC,MAAM,CAAA;IAC7C,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;IACxE,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAA;IAEzD,QAAQ,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,EAAC,OAAO,EAAE,CAAC,KAAoB,EAAE,EAAE;YACpE,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ;gBAC1B,OAAO,CAAC,KAAK,EAAE,CAAA;QACjB,CAAC,EAAC,CAAC,CAAC,CAAA;IAEJ,SAAS,YAAY;QACpB,OAAO,IAAI,CAAA;iCACoB,OAAO,CAAC,MAAM;MACzC,OAAO,CAAC,MAAM;YACf,CAAC,CAAC,IAAI,CAAA;;SAEF,IAAI;;MAEP;YACD,CAAC,CAAC,IAAI,CAAA;;SAEF,QAAQ;;MAEX;;GAEH,CAAA;IACF,CAAC;IAED,OAAO,IAAI,CAAA;iCACqB,OAAO,CAAC,MAAM,gBAAgB,IAAI;8BACrC,OAAO,CAAC,MAAM;;;gCAGZ,OAAO,CAAC,KAAK,aAAa,CAAC,OAAO,CAAC,MAAM;;;gCAGzC,CAAC,OAAO,CAAC,MAAM;OACxC,MAAM,CAAC,CAAC,CAAA,YAAY,EAAE,CAAC,CAAC,CAAA,IAAI;;;;EAIjC,CAAA;AACF,CAAC,CAAC,CAAA"}

package/x/views/tabs/control.d.ts

@@ -0,0 +1,9 @@
+export declare class TabsControl {
+    length: number;
+    $index: import("@e280/strata").Signal<number>;
+    constructor(start?: number);
+    clamp(index: number): number;
+    get index(): number;
+    setIndex(index: number): Promise<number>;
+    shimmy(delta: number): Promise<number>;
+}

package/x/views/tabs/control.js

@@ -0,0 +1,24 @@
+import { signal } from "@e280/strata";
+export class TabsControl {
+    length = 1;
+    $index = signal(0);
+    constructor(start = 0) {
+        this.$index.value = start;
+    }
+    clamp(index) {
+        index = Math.min(index, this.length - 1);
+        index = Math.max(index, 0);
+        return index;
+    }
+    get index() {
+        return this.clamp(this.$index());
+    }
+    async setIndex(index) {
+        return this.$index(index);
+    }
+    async shimmy(delta) {
+        const index = this.clamp(this.index + delta);
+        return this.setIndex(index);
+    }
+}
+//# sourceMappingURL=control.js.map

package/x/views/tabs/control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"control.js","sourceRoot":"","sources":["../../../s/views/tabs/control.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAA;AAEnC,MAAM,OAAO,WAAW;IACvB,MAAM,GAAG,CAAC,CAAA;IACV,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;IAElB,YAAY,KAAK,GAAG,CAAC;QACpB,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,KAAK,CAAA;IAC1B,CAAC;IAED,KAAK,CAAC,KAAa;QAClB,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA;QACxC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;QAC1B,OAAO,KAAK,CAAA;IACb,CAAC;IAED,IAAI,KAAK;QACR,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAA;IACjC,CAAC;IAED,KAAK,CAAC,QAAQ,CAAC,KAAa;QAC3B,OAAO,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;IAC1B,CAAC;IAED,KAAK,CAAC,MAAM,CAAC,KAAa;QACzB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,CAAA;QAC5C,OAAO,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC5B,CAAC;CACD"}

package/x/views/tabs/showcase.d.ts

@@ -0,0 +1 @@
+export declare const tabsShowcase: () => import("@e280/sly").Content;

package/x/views/tabs/showcase.js

@@ -0,0 +1,86 @@
+import { css, html } from "lit";
+import { ShinyTabs } from "./view.js";
+import { ShinyButton } from "../button/view.js";
+import { lipsum } from "../../demo/utils/lipsum.js";
+import { exhibit } from "../../demo/parts/exhibit.js";
+import { Showcase } from "../../demo/views/showcase/view.js";
+export const tabsShowcase = () => Showcase("ShinyTabs", [
+    exhibit({
+        name: "shiny",
+        explain: "a button-bar of mutually-exclusive tabs. panels are optional.",
+        render: () => ShinyTabs.with({
+            props: [{ snug: true }],
+            children: html `
+				${ShinyButton("alpha")}
+				${ShinyButton("bravo")}
+				${ShinyButton("charlie")}
+				<p slot=panel>${lipsum.takeFirst()}</p>
+				<p slot=panel>${lipsum.takeFirst()}</p>
+				<p slot=panel>${lipsum.takeFirst()}</p>
+			`,
+        }),
+        styleboxCss: css `
+			[view="shiny-button"] { font-size: 1.2em; }
+			p { margin-top: var(--padding); }
+		`,
+        js: `
+			ShinyTabs.with({
+				props: [{snug: true}],
+				children: html\`
+					\${ShinyButton("alpha")}
+					\${ShinyButton("bravo")}
+					\${ShinyButton("charlie")}
+					<p slot=panel>lorem kettlebell..</p>
+					<p slot=panel>lorem protein..</p>
+					<p slot=panel>lorem caffeine..</p>
+				\`,
+			})
+		`,
+        css: css `
+			[view="shiny-tabs"] {
+				--shiny-rounded: 0.5em;
+			}
+		`,
+    }),
+    exhibit({
+        name: "plain",
+        explain: "a button-bar of mutually-exclusive tabs. panels are optional.",
+        render: () => ShinyTabs.with({
+            props: [{ snug: true }],
+            children: html `
+				<button>alpha</button>
+				<button>bravo</button>
+				<button>charlie</button>
+				<p slot=panel>${lipsum.takeFirst()}</p>
+				<p slot=panel>${lipsum.takeFirst()}</p>
+				<p slot=panel>${lipsum.takeFirst()}</p>
+			`,
+        }),
+        styleboxCss: css `
+			p { margin-top: var(--padding); }
+			button {
+				font-size: 1.5em;
+				padding: calc(var(--padding) / 2);
+			}
+		`,
+        js: `
+			ShinyTabs.with({
+				props: [{snug: true}],
+				children: html\`
+					<button>alpha</button>
+					<button>bravo</button>
+					<button>charlie</button>
+					<p slot=panel>lorem kettlebell..</p>
+					<p slot=panel>lorem protein..</p>
+					<p slot=panel>lorem caffeine..</p>
+				\`,
+			})
+		`,
+        css: css `
+			[view="shiny-tabs"] {
+				--shiny-rounded: 0.5em;
+			}
+		`,
+    }),
+]);
+//# sourceMappingURL=showcase.js.map

package/x/views/tabs/showcase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"showcase.js","sourceRoot":"","sources":["../../../s/views/tabs/showcase.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,SAAS,EAAC,MAAM,WAAW,CAAA;AACnC,OAAO,EAAC,WAAW,EAAC,MAAM,mBAAmB,CAAA;AAC7C,OAAO,EAAC,MAAM,EAAC,MAAM,4BAA4B,CAAA;AACjD,OAAO,EAAC,OAAO,EAAC,MAAM,6BAA6B,CAAA;AACnD,OAAO,EAAC,QAAQ,EAAC,MAAM,mCAAmC,CAAA;AAE1D,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,WAAW,EAAE;IACvD,OAAO,CAAC;QACP,IAAI,EAAE,OAAO;QACb,OAAO,EAAE,+DAA+D;QACxE,MAAM,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC;YAC5B,KAAK,EAAE,CAAC,EAAC,IAAI,EAAE,IAAI,EAAC,CAAC;YACrB,QAAQ,EAAE,IAAI,CAAA;MACX,WAAW,CAAC,OAAO,CAAC;MACpB,WAAW,CAAC,OAAO,CAAC;MACpB,WAAW,CAAC,SAAS,CAAC;oBACR,MAAM,CAAC,SAAS,EAAE;oBAClB,MAAM,CAAC,SAAS,EAAE;oBAClB,MAAM,CAAC,SAAS,EAAE;IAClC;SACD,CAAC;QACF,WAAW,EAAE,GAAG,CAAA;;;GAGf;QACD,EAAE,EAAE;;;;;;;;;;;;GAYH;QACD,GAAG,EAAE,GAAG,CAAA;;;;GAIP;KACD,CAAC;IAEF,OAAO,CAAC;QACP,IAAI,EAAE,OAAO;QACb,OAAO,EAAE,+DAA+D;QACxE,MAAM,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC;YAC5B,KAAK,EAAE,CAAC,EAAC,IAAI,EAAE,IAAI,EAAC,CAAC;YACrB,QAAQ,EAAE,IAAI,CAAA;;;;oBAIG,MAAM,CAAC,SAAS,EAAE;oBAClB,MAAM,CAAC,SAAS,EAAE;oBAClB,MAAM,CAAC,SAAS,EAAE;IAClC;SACD,CAAC;QACF,WAAW,EAAE,GAAG,CAAA;;;;;;GAMf;QACD,EAAE,EAAE;;;;;;;;;;;;GAYH;QACD,GAAG,EAAE,GAAG,CAAA;;;;GAIP;KACD,CAAC;CACF,CAAC,CAAA"}

package/x/views/tabs/style.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/x/views/tabs/style.css.js

@@ -0,0 +1,45 @@
+import { css } from "lit";
+export default css `@layer view {
+
+:host {
+	display: inline-flex;
+	flex-direction: column;
+}
+
+slot[part="tabs"] {
+	display: flex;
+	flex-wrap: wrap;
+
+	&::slotted([data-tabbed]) {
+		opacity: 1;
+		color: currentColor;
+		text-decoration: underline;
+	}
+}
+
+slot[part="tabs"][data-snug] {
+	&::slotted(*) {
+		border-radius: var(--rounded);
+	}
+
+	&::slotted(:not([data-last], [data-next-is-tabbed])) {
+		border-right: none;
+	}
+
+	&::slotted([data-tabbed]:not([data-first])) {
+		border-left: none;
+	}
+
+	&::slotted(:not([data-last])) {
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+	}
+
+	&::slotted(:not([data-first])) {
+		border-top-left-radius: 0;
+		border-bottom-left-radius: 0;
+	}
+}
+
+} `;
+//# sourceMappingURL=style.css.js.map

package/x/views/tabs/style.css.js.map

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

package/x/views/tabs/view.d.ts

@@ -0,0 +1,5 @@
+import { TabsControl } from "./control.js";
+export declare const ShinyTabs: import("@e280/sly").ShadowView<[options?: {
+    snug?: boolean;
+    control?: TabsControl;
+} | undefined]>;

package/x/views/tabs/view.js

@@ -0,0 +1,52 @@
+import { html } from "lit";
+import { dom, shadow, useHost, useName, useOnce, useSignal, useStyles } from "@e280/sly";
+import styleCss from "./style.css.js";
+import { TabsControl } from "./control.js";
+import { themeCss } from "../../theme/theme.css.js";
+export const ShinyTabs = shadow((options = {}) => {
+    useName("shiny-tabs");
+    useStyles(themeCss, styleCss);
+    const host = useHost();
+    const attrs = useOnce(() => dom.attrs(host).spec({ index: Number }));
+    const control = useOnce(() => options.control ?? new TabsControl(attrs.index ?? 0));
+    const $tabs = useSignal([]);
+    const $panels = useSignal([]);
+    async function tabchange(event) {
+        const slot = event.currentTarget;
+        await $tabs.set(slot.assignedElements());
+    }
+    async function panelchange(event) {
+        const slot = event.currentTarget;
+        await $panels.set(slot.assignedElements());
+    }
+    attrs.index = control.$index();
+    control.length = $tabs().length;
+    function isNeighborActive(index, delta) {
+        const nextIndex = control.clamp(index + delta);
+        if (nextIndex === index)
+            return false;
+        return (nextIndex === control.index);
+    }
+    for (const [index, tab] of $tabs().entries()) {
+        const tabbed = (index === control.index);
+        const tabAttrs = dom.attrs(tab);
+        tabAttrs.booleans.disabled = tabbed;
+        tabAttrs.booleans["data-snug"] = options.snug;
+        tabAttrs.booleans["data-tabbed"] = tabbed;
+        tabAttrs.booleans["data-first"] = (index === 0);
+        tabAttrs.booleans["data-last"] = (index === (control.length - 1));
+        tabAttrs.booleans["data-next-is-tabbed"] = isNeighborActive(index, 1);
+        tabAttrs.booleans["data-previous-is-tabbed"] = isNeighborActive(index, -1);
+        tab.onclick = () => control.setIndex(index);
+    }
+    for (const [index, panel] of $panels().entries()) {
+        const tabbed = (index === control.index);
+        dom.attrs(panel).booleans["data-tabbed"] = tabbed;
+        dom.attrs(panel).booleans["hidden"] = !tabbed;
+    }
+    return html `
+		<slot part=tabs ?data-snug="${options.snug}" @slotchange="${tabchange}"></slot>
+		<slot part=panels name=panel @slotchange="${panelchange}"></slot>
+	`;
+});
+//# sourceMappingURL=view.js.map

package/x/views/tabs/view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view.js","sourceRoot":"","sources":["../../../s/views/tabs/view.ts"],"names":[],"mappings":"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"}

package/s/demo/demo.bundle.ts

@@ -1,42 +0,0 @@
-
-import {css, html} from "lit"
-import {dom, view} from "@e280/sly"
-import {shiny} from "../shiny.js"
-import {basic} from "../themes/basic.css.js"
-import {Demonstration} from "./views/demonstration/view.js"
-
-const {views} = shiny({theme: basic})
-
-dom.register({ShinyDemo: view.component(use => {
-	use.styles(css`
-		:host {
-			display: flex;
-			flex-direction: column;
-			gap: 1em;
-		}
-
-		[view="shiny-copy"]::part(content) {
-			font-size: 4em;
-		}
-	`)
-
-	return [
-		Demonstration({
-			views,
-			name: "shiny-copy",
-			explain: html`
-				<p>button for click-to-copy text</p>
-			`,
-			exampleComponent: `
-				<shiny-copy text="hello world"></shiny-copy>
-			`,
-			exampleView: `
-				ShinyCopy("hello world")
-			`,
-			content: views.ShinyCopy("hello world"),
-		}),
-	]
-})})
-
-console.log("✨shiny")
-

package/s/demo/views/demonstration/style.css.ts

@@ -1,108 +0,0 @@
-
-import {css} from "lit"
-export default css`
-
-:host {
-	position: relative;
-
-	display: flex;
-	flex-wrap: wrap;
-
-	padding: 1em;
-	border-radius: 0.5em;
-	gap: 1em;
-
-	background: linear-gradient(to right top, #252dd985, #aa6affbd);
-	backdrop-filter: blur(0.5em);
-
-	box-shadow: 0 0 5em #5d1fadaa;
-	border-top: 2px solid #fff4;
-
-	&::before {
-		content: "";
-		display: block;
-		position: absolute;
-		inset: 0;
-		border-radius: 0.5em;
-		background: #0007;
-		width: calc(100% - 0.3em);
-		height: calc(100% - 0.3em);
-		margin: auto;
-		z-index: 0;
-	}
-
-	> * {
-		position: relative;
-		z-index: 1;
-	}
-}
-
-.meta {
-	flex: 1 1 10em;
-	display: flex;
-	flex-direction: column;
-	gap: 0.5em;
-
-	h2 {
-		color: var(--prime);
-	}
-
-	.codes {
-		display: flex;
-		flex-direction: column;
-		gap: 0.2em;
-	}
-
-	.codeblock {
-		display: flex;
-		background: #0002;
-		border-radius: 0.3em;
-		border-bottom: 1px solid #fff2;
-		box-shadow: inset 0.2em 0.3em 2em #0004;
-
-		.zone {
-			flex: 1 1 auto;
-			display: flex;
-			flex-direction: column;
-			padding: 0.5em;
-
-			h3 {
-				opacity: 0.4;
-				font-size: 0.7em;
-				font-weight: normal;
-				font-style: italic;
-			}
-
-			code {
-				display: block;
-				white-space: pre;
-				text-wrap: wrap;
-				tab-size: 2;
-
-				font-size: 0.8em;
-				font-family: monospace;
-				color: #8f8;
-			}
-		}
-
-		[view="shiny-copy"] {
-			flex: 0 0 0;
-			padding: 0.2em;
-		}
-	}
-}
-
-.content {
-	flex: 1 1 10rem;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-
-	padding: 1rem;
-	border-radius: 0.5rem;
-	border: 1px dashed #fff4;
-}
-
-`
-

package/s/demo/views/demonstration/view.ts

@@ -1,49 +0,0 @@
-
-import {html} from "lit"
-import {untab} from "@e280/stz"
-import {Content, view} from "@e280/sly"
-import styleCss from "./style.css.js"
-import {ShinyViews} from "../../../shiny.js"
-import {basic} from "../../../themes/basic.css.js"
-
-export const Demonstration = view(use => (options: {
-		name: string
-		explain: Content
-		views: ShinyViews
-		exampleComponent: string
-		exampleView: string
-		content: Content
-	}) => {
-
-	use.name(options.name)
-	use.styles(basic, styleCss)
-
-	function codeblock(heading: string, code: string) {
-		const cleanCode = untab(code).trim()
-		return html`
-			<div class=codeblock>
-				<div class=zone>
-					<h3>${heading}</h3>
-					<code>${cleanCode}</code>
-				</div>
-				${options.views.ShinyCopy(cleanCode)}
-			</div>
-		`
-	}
-
-	return html`
-		<div class=meta>
-			<h2>✨ ${options.name}</h2>
-			<div class=explain>${options.explain}</div>
-			<div class=codes>
-				${codeblock("html web component", options.exampleComponent)}
-				${codeblock("sly view", options.exampleView)}
-			</div>
-		</div>
-
-		<div class=content part=content>
-			${options.content}
-		</div>
-	`
-})
-

package/s/install.bundle.ts

@@ -1,9 +0,0 @@
-
-import {dom} from "@e280/sly"
-import {shiny} from "./shiny.js"
-import {basic} from "./themes/basic.css.js"
-
-dom.register(
-	shiny({theme: basic}).components
-)
-

package/s/themes/basic.css.ts

@@ -1,18 +0,0 @@
-
-import {css} from "lit"
-import {cssReset} from "@e280/sly"
-export const basic = css`
-
-${cssReset}
-
-:host {
-	display: block;
-	--bg: var(--shiny-bg, #111);
-	--alpha: var(--shiny-alpha, #afa);
-	--good: var(--shiny-good, #0f4);
-	--bad: var(--shiny-bad, #f40);
-	--invalid: var(--shiny-invalid, #8888);
-}
-
-`
-

package/s/themes/index.barrel.ts

@@ -1,3 +0,0 @@
-
-export * from "./basic.css.js"
-

package/s/ui/raw-components.ts

@@ -1,9 +0,0 @@
-
-import {ShinyCopy} from "./copy/component.js"
-import {ShinyExample} from "./example/component.js"
-
-export const rawComponents = {
-	ShinyCopy,
-	ShinyExample,
-}
-

package/x/demo/demo.bundle.js

@@ -1,37 +0,0 @@
-import { css, html } from "lit";
-import { dom, view } from "@e280/sly";
-import { shiny } from "../shiny.js";
-import { basic } from "../themes/basic.css.js";
-import { Demonstration } from "./views/demonstration/view.js";
-const { views } = shiny({ theme: basic });
-dom.register({ ShinyDemo: view.component(use => {
-        use.styles(css `
-		:host {
-			display: flex;
-			flex-direction: column;
-			gap: 1em;
-		}
-
-		[view="shiny-copy"]::part(content) {
-			font-size: 4em;
-		}
-	`);
-        return [
-            Demonstration({
-                views,
-                name: "shiny-copy",
-                explain: html `
-				<p>button for click-to-copy text</p>
-			`,
-                exampleComponent: `
-				<shiny-copy text="hello world"></shiny-copy>
-			`,
-                exampleView: `
-				ShinyCopy("hello world")
-			`,
-                content: views.ShinyCopy("hello world"),
-            }),
-        ];
-    }) });
-console.log("✨shiny");
-//# sourceMappingURL=demo.bundle.js.map

package/x/demo/demo.bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"demo.bundle.js","sourceRoot":"","sources":["../../s/demo/demo.bundle.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,WAAW,CAAA;AACnC,OAAO,EAAC,KAAK,EAAC,MAAM,aAAa,CAAA;AACjC,OAAO,EAAC,KAAK,EAAC,MAAM,wBAAwB,CAAA;AAC5C,OAAO,EAAC,aAAa,EAAC,MAAM,+BAA+B,CAAA;AAE3D,MAAM,EAAC,KAAK,EAAC,GAAG,KAAK,CAAC,EAAC,KAAK,EAAE,KAAK,EAAC,CAAC,CAAA;AAErC,GAAG,CAAC,QAAQ,CAAC,EAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE;QAC7C,GAAG,CAAC,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;EAUb,CAAC,CAAA;QAEF,OAAO;YACN,aAAa,CAAC;gBACb,KAAK;gBACL,IAAI,EAAE,YAAY;gBAClB,OAAO,EAAE,IAAI,CAAA;;IAEZ;gBACD,gBAAgB,EAAE;;IAEjB;gBACD,WAAW,EAAE;;IAEZ;gBACD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;aACvC,CAAC;SACF,CAAA;IACF,CAAC,CAAC,EAAC,CAAC,CAAA;AAEJ,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA"}