@e280/shiny 0.1.0-10 → 0.1.0-12

package/x/components/drawer/showcase.js

@@ -0,0 +1,87 @@
+import { css, html } from "lit";
+import { lipsum } from "../../demo/lipsum.js";
+import { Showcase } from "../../demo/views/showcase/view.js";
+const lip1 = lipsum();
+const lip2 = lipsum();
+const lip3 = lipsum();
+const cssSnippet = `
+	shiny-drawer {
+		--button-size: 2em;
+		--anim-duration: 200ms;
+		--slate-hidden-opacity: 1;
+		--blanket-backdrop-filter: blur(0.5em);
+		--blanket-bg: color-mix(
+			in oklab,
+			transparent,
+			var(--bg)
+		);
+	}
+`;
+const makeExhibit = (side) => ({
+    label: side,
+    explain: html `<p>slide-out panel. button optional.</p>`,
+    snippets: [
+        { label: "html", code: `
+			<shiny-drawer button side=${side}>
+				<header>example</header>
+				<section slot=plate>lorem kettlebell..</section>
+			</shiny-drawer>
+		` },
+        { label: "view", code: `
+			ShinyDrawer
+				.props({button: true, side: "${side}"})
+				.children(html\`
+					<header>example</header>
+					<section slot=plate>lorem kettlebell..</section>
+				\`)
+				.render()
+		` },
+        { label: "css", code: cssSnippet },
+    ],
+    style: css ``,
+    presentation: views => html `
+		${views.ShinyDrawer
+        .props({ button: true, side })
+        .children(html `
+				<header>
+					<h2>example drawer</h2>
+					<p>you can put any content in here.</p>
+					<p class=lipsum>${lip1}</p>
+				</header>
+				<section slot=plate>
+					<p class=lipsum>${lip2}</p>
+					<p class=lipsum>${lip3}</p>
+				</section>
+			`)
+        .render()}
+	`,
+});
+export const drawerShowcase = () => Showcase({
+    name: "drawer",
+    style: css `
+		.box sly-view {
+			border-radius: 0.5em;
+			overflow: hidden;
+			--button-size: 3em;
+
+			header {
+				> * + * { margin-top: 0.5em; }
+			}
+
+			section {
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				min-height: 100%;
+				padding: 1em;
+				padding-top: 3em;
+				> * + * { margin-top: 0.5em; }
+			}
+		}
+	`,
+    exhibits: [
+        makeExhibit("left"),
+        makeExhibit("right"),
+    ],
+});
+//# sourceMappingURL=showcase.js.map

package/x/components/drawer/showcase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"showcase.js","sourceRoot":"","sources":["../../../s/components/drawer/showcase.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,MAAM,EAAC,MAAM,sBAAsB,CAAA;AAC3C,OAAO,EAAC,QAAQ,EAAC,MAAM,mCAAmC,CAAA;AAG1D,MAAM,IAAI,GAAG,MAAM,EAAE,CAAA;AACrB,MAAM,IAAI,GAAG,MAAM,EAAE,CAAA;AACrB,MAAM,IAAI,GAAG,MAAM,EAAE,CAAA;AAErB,MAAM,UAAU,GAAG;;;;;;;;;;;;CAYlB,CAAA;AAED,MAAM,WAAW,GAAG,CAAC,IAAsB,EAAiB,EAAE,CAAC,CAAC;IAC/D,KAAK,EAAE,IAAI;IACX,OAAO,EAAE,IAAI,CAAA,0CAA0C;IACvD,QAAQ,EAAE;QACT,EAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE;+BACO,IAAI;;;;GAIhC,EAAC;QACF,EAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE;;mCAEW,IAAI;;;;;;GAMpC,EAAC;QACF,EAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,EAAC;KAChC;IACD,KAAK,EAAE,GAAG,CAAA,EAAE;IACZ,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAA;IACxB,KAAK,CAAC,WAAW;SACjB,KAAK,CAAC,EAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAC,CAAC;SAC3B,QAAQ,CAAC,IAAI,CAAA;;;;uBAIM,IAAI;;;uBAGJ,IAAI;uBACJ,IAAI;;IAEvB,CAAC;SACD,MAAM,EAAE;EACV;CACD,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC;IAC5C,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;EAoBT;IACD,QAAQ,EAAE;QACT,WAAW,CAAC,MAAM,CAAC;QACnB,WAAW,CAAC,OAAO,CAAC;KACpB;CACD,CAAC,CAAA"}

package/x/components/drawer/style.css.js

@@ -6,8 +6,8 @@ export default css `@layer view {
 	width: 100%;
 	height: 100%;
 	--button-size: 2em;
-	--anim-duration: 200ms;
 	--blanket-backdrop-filter: blur(0.5em);
+	--slate-hidden-opacity: 1;
 	--blanket-bg: color-mix(in oklab, transparent, var(--bg));
 }
 
@@ -51,12 +51,15 @@ export default css `@layer view {
 		height: auto;
 		max-height: 100%;
 
-		opacity: 1;
 		transform: translateX(-100%);
 		will-change: opacity, transform;
 		transition: all var(--anim-duration) ease;
 
-		> slot {
+		> [part="slate"] {
+			opacity: var(--slate-hidden-opacity);
+			will-change: opacity;
+			transition: opacity var(--anim-duration) ease;
+
 			display: block;
 			height: 100%;
 			overflow-y: auto;
@@ -109,8 +112,10 @@ export default css `@layer view {
 			opacity: 1;
 		}
 		[part="tray"] {
-			opacity: 1;
 			transform: translateX(0%);
+			> [part="slate"] {
+				opacity: 1;
+			}
 		}
 	}
 }

package/x/components/drawer/style.css.js.map

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

package/x/components/example/component.d.ts

@@ -5,7 +5,7 @@ declare const ShinyExample_base: import("@e280/sly").ComponentClass<{
             start: NumberConstructor;
         }>;
         context: ShinyContext;
-        #private: any;
+        "__#private@#private": any;
         readonly shadow: ShadowRoot;
         createShadow(): ShadowRoot;
         render(_use: import("@e280/sly").Use): import("@e280/sly").Content;

package/x/components/raw-components.d.ts

@@ -1,8 +1,10 @@
+import { ShinyButton } from "./button/component.js";
 import { ShinyCopy } from "./copy/component.js";
 import { ShinyDrawer } from "./drawer/component.js";
 import { ShinyExample } from "./example/component.js";
 import { ShinyTabs } from "./tabs/component.js";
 export declare const rawComponents: {
+    ShinyButton: typeof ShinyButton;
     ShinyCopy: typeof ShinyCopy;
     ShinyDrawer: typeof ShinyDrawer;
     ShinyExample: typeof ShinyExample;

package/x/components/raw-components.js

@@ -1,8 +1,10 @@
+import { ShinyButton } from "./button/component.js";
 import { ShinyCopy } from "./copy/component.js";
 import { ShinyDrawer } from "./drawer/component.js";
 import { ShinyExample } from "./example/component.js";
 import { ShinyTabs } from "./tabs/component.js";
 export const rawComponents = {
+    ShinyButton,
     ShinyCopy,
     ShinyDrawer,
     ShinyExample,

package/x/components/raw-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"raw-components.js","sourceRoot":"","sources":["../../s/components/raw-components.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,SAAS,EAAC,MAAM,qBAAqB,CAAA;AAC7C,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAA;AACjD,OAAO,EAAC,YAAY,EAAC,MAAM,wBAAwB,CAAA;AACnD,OAAO,EAAC,SAAS,EAAC,MAAM,qBAAqB,CAAA;AAE7C,MAAM,CAAC,MAAM,aAAa,GAAG;IAC5B,SAAS;IACT,WAAW;IACX,YAAY;IACZ,SAAS;CACT,CAAA"}
+{"version":3,"file":"raw-components.js","sourceRoot":"","sources":["../../s/components/raw-components.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAA;AACjD,OAAO,EAAC,SAAS,EAAC,MAAM,qBAAqB,CAAA;AAC7C,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAA;AACjD,OAAO,EAAC,YAAY,EAAC,MAAM,wBAAwB,CAAA;AACnD,OAAO,EAAC,SAAS,EAAC,MAAM,qBAAqB,CAAA;AAE7C,MAAM,CAAC,MAAM,aAAa,GAAG;IAC5B,WAAW;IACX,SAAS;IACT,WAAW;IACX,YAAY;IACZ,SAAS;CACT,CAAA"}

package/x/components/tabs/component.d.ts

@@ -8,7 +8,7 @@ declare const ShinyTabs_base: import("@e280/sly").ComponentClass<{
         setIndex: (index: number) => Promise<number>;
         shimmy: (delta: number) => Promise<number>;
         context: ShinyContext;
-        #private: any;
+        "__#private@#private": any;
         readonly shadow: ShadowRoot;
         createShadow(): ShadowRoot;
         render(_use: import("@e280/sly").Use): import("@e280/sly").Content;

package/x/components/tabs/component.js

@@ -21,10 +21,21 @@ export class ShinyTabs extends (view(use => (context, controlOption) => {
     }
     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 active = (index === control.index);
-        dom.attrs(tab).booleans.active = active;
-        dom.attrs(tab).booleans.disabled = active;
+        const tabAttrs = dom.attrs(tab);
+        tabAttrs.booleans.disabled = active;
+        tabAttrs.booleans["data-active"] = active;
+        tabAttrs.booleans["data-first"] = (index === 0);
+        tabAttrs.booleans["data-last"] = (index === (control.length - 1));
+        tabAttrs.booleans["data-next-is-active"] = isNeighborActive(index, 1);
+        tabAttrs.booleans["data-previous-is-active"] = isNeighborActive(index, -1);
         tab.onclick = () => control.setIndex(index);
     }
     for (const [index, tab] of $panels().entries()) {

package/x/components/tabs/component.js.map

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

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

@@ -1,8 +1,8 @@
 export declare class TabControl {
-    #private;
     length: number;
     $index: import("@e280/strata").SignalFn<number>;
     constructor(start?: number);
+    clamp(index: number): number;
     get index(): number;
     setIndex(index: number): Promise<number>;
     shimmy(delta: number): Promise<number>;

package/x/components/tabs/control.js

@@ -5,19 +5,19 @@ export class TabControl {
     constructor(start = 0) {
         this.$index.value = start;
     }
-    #clamp(index) {
+    clamp(index) {
         index = Math.min(index, this.length - 1);
         index = Math.max(index, 0);
         return index;
     }
     get index() {
-        return this.#clamp(this.$index.get());
+        return this.clamp(this.$index.get());
     }
     async setIndex(index) {
         return this.$index.set(index);
     }
     async shimmy(delta) {
-        const index = this.#clamp(this.index + delta);
+        const index = this.clamp(this.index + delta);
         return this.setIndex(index);
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"control.js","sourceRoot":"","sources":["../../../s/components/tabs/control.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAA;AAEnC,MAAM,OAAO,UAAU;IACtB,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,MAAM,CAAC,KAAa;QACnB,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,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,CAAA;IACtC,CAAC;IAED,KAAK,CAAC,QAAQ,CAAC,KAAa;QAC3B,OAAO,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;IAC9B,CAAC;IAED,KAAK,CAAC,MAAM,CAAC,KAAa;QACzB,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,CAAA;QAC7C,OAAO,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC5B,CAAC;CACD"}
+{"version":3,"file":"control.js","sourceRoot":"","sources":["../../../s/components/tabs/control.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAA;AAEnC,MAAM,OAAO,UAAU;IACtB,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,CAAC,GAAG,EAAE,CAAC,CAAA;IACrC,CAAC;IAED,KAAK,CAAC,QAAQ,CAAC,KAAa;QAC3B,OAAO,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;IAC9B,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/components/tabs/showcase.d.ts

@@ -0,0 +1 @@
+export declare const tabsShowcase: () => import("lit-html/directive.js").DirectiveResult<import("lit-html/directive.js").DirectiveClass>;

package/x/components/tabs/showcase.js

@@ -0,0 +1,69 @@
+import { css, html } from "lit";
+import { lipsum } from "../../demo/lipsum.js";
+import { Showcase } from "../../demo/views/showcase/view.js";
+const lip1 = lipsum();
+const lip2 = lipsum();
+const lip3 = lipsum();
+const cssSnippet = `
+	shiny-tabs {
+		&::part(tabs) {}
+		&::part(panels) {}
+		> shiny-button {}
+	}
+`;
+export const tabsShowcase = () => Showcase({
+    name: "tabs",
+    style: css `
+		.box {
+			place-content: start start;
+			p { margin-top: 0.5em; }
+		}
+	`,
+    exhibits: [
+        {
+            label: "tabs",
+            explain: html `<p>button bar. panels optional.</p>`,
+            snippets: [
+                { label: "html", code: `
+					<shiny-tabs>
+						<shiny-button>tab1</shiny-button>
+						<shiny-button>tab2</shiny-button>
+						<shiny-button>tab3</shiny-button>
+						<div slot=panel>panel1</div>
+						<div slot=panel>panel2</div>
+						<div slot=panel>panel3</div>
+					</shiny-tabs>
+				` },
+                { label: "view", code: `
+					ShinyTabs
+						.props()
+						.children(html\`
+							\${ShinyButton.props().children("tab1").render()}
+							\${ShinyButton.props().children("tab2").render()}
+							\${ShinyButton.props().children("tab3").render()}
+							<div slot=panel>panel1</div>
+							<div slot=panel>panel2</div>
+							<div slot=panel>panel3</div>
+						\`)
+						.render()
+				` },
+                { label: "css", code: cssSnippet },
+            ],
+            style: css ``,
+            presentation: views => html `
+				${views.ShinyTabs
+                .props()
+                .children(html `
+						${views.ShinyButton.props().children("tab1").render()}
+						${views.ShinyButton.props().children("tab2").render()}
+						${views.ShinyButton.props().children("tab3").render()}
+						<p slot=panel class=lipsum>${lip1}</p>
+						<p slot=panel class=lipsum>${lip2}</p>
+						<p slot=panel class=lipsum>${lip3}</p>
+					`)
+                .render()}
+			`,
+        },
+    ],
+});
+//# sourceMappingURL=showcase.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"showcase.js","sourceRoot":"","sources":["../../../s/components/tabs/showcase.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,MAAM,EAAC,MAAM,sBAAsB,CAAA;AAC3C,OAAO,EAAC,QAAQ,EAAC,MAAM,mCAAmC,CAAA;AAE1D,MAAM,IAAI,GAAG,MAAM,EAAE,CAAA;AACrB,MAAM,IAAI,GAAG,MAAM,EAAE,CAAA;AACrB,MAAM,IAAI,GAAG,MAAM,EAAE,CAAA;AAErB,MAAM,UAAU,GAAG;;;;;;CAMlB,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC;IAC1C,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,GAAG,CAAA;;;;;EAKT;IACD,QAAQ,EAAE;QACT;YACC,KAAK,EAAE,MAAM;YACb,OAAO,EAAE,IAAI,CAAA,qCAAqC;YAClD,QAAQ,EAAE;gBACT,EAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE;;;;;;;;;KASrB,EAAC;gBACF,EAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE;;;;;;;;;;;;KAYrB,EAAC;gBACF,EAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,EAAC;aAChC;YACD,KAAK,EAAE,GAAG,CAAA,EAAE;YACZ,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAA;MACxB,KAAK,CAAC,SAAS;iBACf,KAAK,EAAE;iBACP,QAAQ,CAAC,IAAI,CAAA;QACX,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE;QACnD,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE;QACnD,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE;mCACxB,IAAI;mCACJ,IAAI;mCACJ,IAAI;MACjC,CAAC;iBACD,MAAM,EAAE;IACV;SACD;KACD;CACD,CAAC,CAAA"}

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

@@ -1,5 +1,42 @@
 import { css } from "lit";
 export default css `@layer view {
 
-}`;
+:host {
+	display: inline-flex;
+	flex-direction: column;
+}
+
+slot[part="tabs"] {
+	display: flex;
+
+	&::slotted(*) {
+		border-radius: 0.3em;
+	}
+
+	&::slotted([data-active]) {
+		opacity: 1;
+		color: currentColor;
+		text-decoration: underline;
+	}
+
+	&::slotted(:not([data-last], [data-next-is-active])) {
+		border-right: none;
+	}
+
+	&::slotted([data-active]: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/components/tabs/style.css.js.map

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

package/x/demo/demo.bundle.js

@@ -1,22 +1,10 @@
-import { css, html } from "lit";
+import { css } from "lit";
 import { dom, view } from "@e280/sly";
-import { shiny } from "../shiny.js";
-import { auraViews } from "./aura-views.js";
-import { plain } from "../themes/plain.css.js";
-import { makeLipsumDispenser } from "./utils/lipsum.js";
-import { TabControl } from "../components/tabs/control.js";
-import { Demonstration } from "./views/demonstration/view.js";
-const viewsets = [
-    { label: "aura", views: auraViews },
-    { label: "plain", views: shiny({ theme: plain }).views },
-];
-const labels = {
-    html: { button: "html", text: "html web component" },
-    view: { button: "view", text: "sly view" },
-    css: { button: "css", text: "custom css" },
-};
-const dispenser = makeLipsumDispenser();
-const lipsum = () => dispenser.takeFirst();
+import { lipsumDispenser } from "./lipsum.js";
+import { copyShowcase } from "../components/copy/showcase.js";
+import { tabsShowcase } from "../components/tabs/showcase.js";
+import { buttonShowcase } from "../components/button/showcase.js";
+import { drawerShowcase } from "../components/drawer/showcase.js";
 dom.register({ ShinyDemo: view.component(use => {
         use.styles(css `
 		:host {
@@ -37,185 +25,18 @@ dom.register({ ShinyDemo: view.component(use => {
 				font-style: italic;
 			}
 
-			[view="shiny-tabs"] {
+			[view="demo-tabs"] {
 				display: flex;
 			}
 		}
 	`);
-        const tabControl = use.once(() => new TabControl(0));
-        const $viewset = use.derived(() => viewsets.at(tabControl.$index()));
-        const views = $viewset().views;
-        dispenser.takeAll();
-        const demonstrations = [
-            Demonstration({
-                name: "shiny-copy",
-                explain: html `
-				<p>click-to-copy text button.</p>
-			`,
-                snippets: [
-                    [labels.html, `
-					<shiny-copy text="hello world"></shiny-copy>
-				`],
-                    [labels.view, `
-					ShinyCopy("hello world")
-				`],
-                    [labels.css, `
-					shiny-copy {
-						font-size: 1em;
-						--happy: #0fa;
-						--angry: #f50;
-						--lame: #8888;
-						--inactive-opacity: 0.5;
-					}
-				`],
-                ],
-                content: views.ShinyCopy("hello world"),
-                style: css `
-				.content sly-view {
-					font-size: 4em;
-				}
-			`,
-            }),
-            Demonstration({
-                name: "shiny-drawer",
-                explain: html `
-				<p>slide-out panel. button optional.</p>
-			`,
-                snippets: [
-                    [labels.html, `
-					<shiny-drawer button side=left>
-						<header>example</header>
-						<section slot=plate>
-							lorem kettlebell..
-						</section>
-					</shiny-drawer>
-				`],
-                    [labels.view, `
-					ShinyDrawer
-						.props({button: true, side: "left"})
-						.children(html\`
-							<header>example</header>
-							<section slot=plate>
-								lorem kettlebell..
-							</section>
-						\`)
-						.render()
-				`],
-                    [labels.css, `
-					shiny-drawer {
-						--button-size: 2em;
-						--anim-duration: 200ms;
-						--blanket-backdrop-filter: blur(0.5em);
-						--blanket-bg: color-mix(
-							in oklab,
-							transparent,
-							var(--bg)
-						);
-					}
-				`],
-                ],
-                content: views.ShinyDrawer
-                    .props({ button: true })
-                    .children(html `
-					<header>
-						<h2>example drawer</h2>
-						<p>you can put any content in here.</p>
-						<p class=lipsum>${lipsum()}</p>
-					</header>
-					<section slot=plate>
-						<p class=lipsum>${lipsum()}</p>
-						<p class=lipsum>${lipsum()}</p>
-					</section>
-				`)
-                    .render(),
-                style: css `
-				.content sly-view {
-					border-radius: 0.5em;
-					overflow: hidden;
-					--button-size: 3em;
-
-					header {
-						> * + * { margin-top: 0.5em; }
-					}
-
-					section {
-						display: flex;
-						flex-direction: column;
-						justify-content: center;
-						min-height: 100%;
-						padding: 1em;
-						padding-top: 3em;
-						> * + * { margin-top: 0.5em; }
-					}
-				}
-			`,
-            }),
-            Demonstration({
-                name: "shiny-tabs",
-                explain: html `
-				<p>button bar. panels optional.</p>
-			`,
-                snippets: [
-                    [labels.html, `
-					<shiny-tabs>
-						<button>tab1</button>
-						<button>tab2</button>
-						<button>tab3</button>
-						<div slot=panel>panel1</div>
-						<div slot=panel>panel2</div>
-						<div slot=panel>panel3</div>
-					</shiny-tabs>
-				`],
-                    [labels.view, `
-					ShinyTabs
-						.props()
-						.children(html\`
-							<button>tab1</button>
-							<button>tab2</button>
-							<button>tab3</button>
-							<div slot=panel>panel1</div>
-							<div slot=panel>panel2</div>
-							<div slot=panel>panel3</div>
-						\`)
-						.render()
-				`],
-                    [labels.css, `
-					shiny-tabs::part(tabs) {}
-					shiny-tabs::part(panels) {}
-				`],
-                ],
-                content: views.ShinyTabs
-                    .props()
-                    .children(html `
-					<button>tab1</button>
-					<button>tab2</button>
-					<button>tab3</button>
-					<p slot=panel class=lipsum>${lipsum()}</p>
-					<p slot=panel class=lipsum>${lipsum()}</p>
-					<p slot=panel class=lipsum>${lipsum()}</p>
-				`)
-                    .render(),
-                style: css `
-				.content {
-					justify-content: start;
-					p { margin-top: 0.5em; }
-				}
-			`,
-            }),
+        lipsumDispenser.takeAll();
+        return [
+            buttonShowcase(),
+            copyShowcase(),
+            drawerShowcase(),
+            tabsShowcase(),
         ];
-        return html `
-		<div class=themes>
-			<span>theme</span>
-			${auraViews.ShinyTabs
-            .props(tabControl)
-            .children(viewsets.map(viewset => html `
-					<button>${viewset.label}</button>
-				`))
-            .render()}
-		</div>
-
-		${demonstrations}
-	`;
     }) });
-console.log("✨shiny");
+console.log("✨shiny✨");
 //# sourceMappingURL=demo.bundle.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"demo.bundle.js","sourceRoot":"","sources":["../../s/demo/demo.bundle.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"demo.bundle.js","sourceRoot":"","sources":["../../s/demo/demo.bundle.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,WAAW,CAAA;AACnC,OAAO,EAAC,eAAe,EAAC,MAAM,aAAa,CAAA;AAC3C,OAAO,EAAC,YAAY,EAAC,MAAM,gCAAgC,CAAA;AAC3D,OAAO,EAAC,YAAY,EAAC,MAAM,gCAAgC,CAAA;AAC3D,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAA;AAC/D,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAA;AAE/D,GAAG,CAAC,QAAQ,CAAC,EAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE;QAC7C,GAAG,CAAC,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;EAuBb,CAAC,CAAA;QAEF,eAAe,CAAC,OAAO,EAAE,CAAA;QAEzB,OAAO;YACN,cAAc,EAAE;YAChB,YAAY,EAAE;YACd,cAAc,EAAE;YAChB,YAAY,EAAE;SACd,CAAA;IACF,CAAC,CAAC,EAAC,CAAC,CAAA;AAEJ,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA"}