@e280/shiny 0.1.0-11 → 0.1.0-12

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

@@ -1,5 +1,6 @@
+import { Content } from "@e280/sly";
 import { ShinyContext, ShinyElement } from "../framework.js";
-declare const ShinyButton_base: import("@e280/sly").ComponentClass<typeof ShinyElement, [context: ShinyContext]>;
+declare const ShinyButton_base: import("@e280/sly").ComponentClass<typeof ShinyElement, [context: ShinyContext, content?: Content]>;
 export declare class ShinyButton extends ShinyButton_base {
 }
 export {};

package/x/components/button/component.js

@@ -3,7 +3,7 @@ import { view } from "@e280/sly";
 import styleCss from "./style.css.js";
 import { foundationCss } from "../foundation.css.js";
 import { ShinyElement } from "../framework.js";
-export class ShinyButton extends (view(use => (context) => {
+export class ShinyButton extends (view(use => (context, content) => {
     use.name("shiny-button");
     use.styles(foundationCss, context.theme, styleCss);
     const attrs = use.attrs.spec({
@@ -15,7 +15,7 @@ export class ShinyButton extends (view(use => (context) => {
 				part=button
 				?disabled="${attrs.disabled}"
 				?hidden="${attrs.hidden}">
-					<slot></slot>
+					<slot>${content}</slot>
 			</button>
 		`;
 })

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

@@ -1 +1 @@
-{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../s/components/button/component.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAA;AAC9B,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AACrC,OAAO,EAAC,aAAa,EAAC,MAAM,sBAAsB,CAAA;AAClD,OAAO,EAAe,YAAY,EAAC,MAAM,iBAAiB,CAAA;AAE1D,MAAM,OAAO,WAAY,SAAQ,CAChC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,OAAqB,EAAE,EAAE;IACrC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,CAAA;IACxB,GAAG,CAAC,MAAM,CAAC,aAAa,EAAE,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;IAElD,MAAM,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC;QAC5B,QAAQ,EAAE,OAAO;QACjB,MAAM,EAAE,OAAO;KACf,CAAC,CAAA;IAEF,OAAO,IAAI,CAAA;;;iBAGI,KAAK,CAAC,QAAQ;eAChB,KAAK,CAAC,MAAM;;;GAGxB,CAAA;AACF,CAAC,CAAC;KACD,SAAS,CAAC,YAAY,CAAC;KACvB,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,OAAO,CAAU,CAAC,CACnC;CAAG"}
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../s/components/button/component.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAU,IAAI,EAAC,MAAM,WAAW,CAAA;AACvC,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AACrC,OAAO,EAAC,aAAa,EAAC,MAAM,sBAAsB,CAAA;AAClD,OAAO,EAAe,YAAY,EAAC,MAAM,iBAAiB,CAAA;AAE1D,MAAM,OAAO,WAAY,SAAQ,CAChC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,OAAqB,EAAE,OAAiB,EAAE,EAAE;IACxD,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,CAAA;IACxB,GAAG,CAAC,MAAM,CAAC,aAAa,EAAE,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;IAElD,MAAM,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC;QAC5B,QAAQ,EAAE,OAAO;QACjB,MAAM,EAAE,OAAO;KACf,CAAC,CAAA;IAEF,OAAO,IAAI,CAAA;;;iBAGI,KAAK,CAAC,QAAQ;eAChB,KAAK,CAAC,MAAM;aACd,OAAO;;GAEjB,CAAA;AACF,CAAC,CAAC;KACD,SAAS,CAAC,YAAY,CAAC;KACvB,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,OAAO,CAAU,CAAC,CACnC;CAAG"}

package/x/components/button/showcase.d.ts

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

package/x/components/button/showcase.js

@@ -0,0 +1,116 @@
+import { css, html } from "lit";
+import { Showcase } from "../../demo/views/showcase/view.js";
+const cssSnippet = `
+	shiny-button {
+		--padding: 0.3em;
+		font-size: 1em;
+		color: currentColor;
+		background: transparent;
+	}
+`;
+export const buttonShowcase = () => Showcase({
+    name: "button",
+    style: css `
+		.box {
+			> * { font-size: 1.5em; }
+		}
+	`,
+    exhibits: [
+        {
+            label: "basic",
+            explain: html `<p>clicky-clacky pressy button.</p>`,
+            snippets: [
+                { label: "html", code: `<shiny-button>button</shiny-button>` },
+                { label: "view", code: `ShinyButton("button")` },
+                { label: "css", code: cssSnippet },
+            ],
+            style: css ``,
+            presentation: views => html `
+				${views.ShinyButton.props().children("button").render()}
+			`,
+        },
+        {
+            label: "gradient",
+            explain: html `<p>added <code>gradient</code> attribute.</p>`,
+            snippets: [
+                { label: "html", code: `<shiny-button gradient>button</shiny-button>` },
+                { label: "view", code: `
+					ShinyButton
+						.props("button")
+						.attr("gradient")
+						.render()
+				` },
+                { label: "css", code: cssSnippet },
+            ],
+            style: css ``,
+            presentation: views => html `
+				${views.ShinyButton.props().attr("gradient").children("button").render()}
+			`,
+        },
+        {
+            label: "catalog",
+            explain: html `<p>clicky-clacky pressy buttons.</p>`,
+            snippets: [
+                { label: "html", code: `
+					<shiny-button calm gradient>calm</shiny-button>
+					<shiny-button angry gradient>angry</shiny-button>
+					<shiny-button happy gradient>happy</shiny-button>
+					<shiny-button zesty gradient>zesty</shiny-button>
+					<shiny-button sad gradient>sad</shiny-button>
+					<shiny-button quirky gradient>quirky</shiny-button>
+					<shiny-button plain gradient>plain</shiny-button>
+				` },
+                { label: "view", code: `
+					[
+						ShinyButton.props().attr("calm").attr("gradient").children("calm").render(),
+						ShinyButton.props().attr("angry").attr("gradient").children("angry").render(),
+						ShinyButton.props().attr("happy").attr("gradient").children("happy").render(),
+						ShinyButton.props().attr("zesty").attr("gradient").children("zesty").render(),
+						ShinyButton.props().attr("sad").attr("gradient").children("sad").render(),
+						ShinyButton.props().attr("quirky").attr("gradient").children("quirky").render(),
+						ShinyButton.props().attr("plain").children("plain").render(),
+					]
+				` },
+                { label: "css", code: cssSnippet },
+            ],
+            style: css ``,
+            presentation: views => [
+                views.ShinyButton.props()
+                    .attr("calm")
+                    .attr("gradient")
+                    .children("calm")
+                    .render(),
+                views.ShinyButton.props()
+                    .attr("angry")
+                    .attr("gradient")
+                    .children("angry")
+                    .render(),
+                views.ShinyButton.props()
+                    .attr("happy")
+                    .attr("gradient")
+                    .children("happy")
+                    .render(),
+                views.ShinyButton.props()
+                    .attr("zesty")
+                    .attr("gradient")
+                    .children("zesty")
+                    .render(),
+                views.ShinyButton.props()
+                    .attr("sad")
+                    .attr("gradient")
+                    .children("sad")
+                    .render(),
+                views.ShinyButton.props()
+                    .attr("quirky")
+                    .attr("gradient")
+                    .children("quirky")
+                    .render(),
+                views.ShinyButton.props()
+                    .attr("plain")
+                    .children("plain")
+                    .render(),
+            ],
+        },
+    ],
+});
+//# sourceMappingURL=showcase.js.map

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

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

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

@@ -43,7 +43,6 @@ button {
 	font: inherit;
 	color: inherit;
 	cursor: inherit;
-	outline: inherit;
 	text-shadow: inherit;
 
 	display: inline-flex;

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

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

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

@@ -1,7 +1,7 @@
 import { ShinyContext } from "../framework.js";
 declare const ShinyCopy_base: import("@e280/sly").ComponentClass<{
     new (): {
-        #attrs: import("@e280/sly").AttrTypes<{
+        "__#private@#attrs": import("@e280/sly").AttrTypes<{
             text: StringConstructor;
             ms: NumberConstructor;
         }>;
@@ -10,7 +10,7 @@ declare const ShinyCopy_base: import("@e280/sly").ComponentClass<{
         get ms(): number | undefined;
         set ms(v: number | undefined);
         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/copy/component.js

@@ -23,6 +23,8 @@ export class ShinyCopy extends (view(use => (context, text, ms = 1000) => {
         if (text === undefined)
             return;
         try {
+            if (use.attrs.booleans.fail)
+                throw new Error("copy failed on purpose for testing purposes");
             await navigator.clipboard.writeText(text);
             await statusFlash("good");
         }
@@ -37,7 +39,7 @@ export class ShinyCopy extends (view(use => (context, text, ms = 1000) => {
             case "invalid": return clipboardSvg;
             case "good": return clipboardCheckFilledSvg;
             case "bad": return clipboardXFilledSvg;
-            default: throw new Error(`invalid copy status`);
+            default: throw new Error(`unknown copy status`);
         }
     })();
     return html `

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

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

package/x/components/copy/showcase.d.ts

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

package/x/components/copy/showcase.js

@@ -0,0 +1,48 @@
+import { css, html } from "lit";
+import { Showcase } from "../../demo/views/showcase/view.js";
+const cssSnippet = `
+	shiny-copy {
+		font-size: 1em;
+		--happy: #0fa;
+		--angry: #f50;
+		--lame: #8888;
+		--inactive-opacity: 0.5;
+	}
+`;
+export const copyShowcase = () => Showcase({
+    name: "copy",
+    style: css `
+		.box {
+			> * { font-size: 4em; }
+		}
+	`,
+    exhibits: [
+        {
+            label: "succeed",
+            explain: html `<p>click-to-copy text button.</p>`,
+            snippets: [
+                { label: "html", code: `<shiny-copy text="hello world"></shiny-button>` },
+                { label: "view", code: `ShinyCopy("hello world")` },
+                { label: "css", code: cssSnippet },
+            ],
+            style: css ``,
+            presentation: views => html `
+				${views.ShinyCopy("hello world")}
+			`,
+        },
+        {
+            label: "fail",
+            explain: html `<p>copy text button, deliberately fails so you can see.</p>`,
+            snippets: [
+                { label: "html", code: `<shiny-copy fail></shiny-button>` },
+                { label: "view", code: `ShinyCopy.props("").attr("fail").render()` },
+                { label: "css", code: cssSnippet },
+            ],
+            style: css ``,
+            presentation: views => html `
+				${views.ShinyCopy.props("").attr("fail").render()}
+			`,
+        },
+    ],
+});
+//# sourceMappingURL=showcase.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"showcase.js","sourceRoot":"","sources":["../../../s/components/copy/showcase.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,QAAQ,EAAC,MAAM,mCAAmC,CAAA;AAE1D,MAAM,UAAU,GAAG;;;;;;;;CAQlB,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC;IAC1C,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,GAAG,CAAA;;;;EAIT;IACD,QAAQ,EAAE;QACT;YACC,KAAK,EAAE,SAAS;YAChB,OAAO,EAAE,IAAI,CAAA,mCAAmC;YAChD,QAAQ,EAAE;gBACT,EAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,gDAAgD,EAAC;gBACvE,EAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,0BAA0B,EAAC;gBACjD,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,CAAC,aAAa,CAAC;IAChC;SACD;QACD;YACC,KAAK,EAAE,MAAM;YACb,OAAO,EAAE,IAAI,CAAA,6DAA6D;YAC1E,QAAQ,EAAE;gBACT,EAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,kCAAkC,EAAC;gBACzD,EAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,2CAA2C,EAAC;gBAClE,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,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE;IACjD;SACD;KACD;CACD,CAAC,CAAA"}

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

@@ -2,7 +2,7 @@ import { DrawerControl } from "./control.js";
 import { ShinyContext } from "../framework.js";
 declare const ShinyDrawer_base: import("@e280/sly").ComponentClass<{
     new (): {
-        #attrs: import("@e280/sly").AttrTypes<{
+        "__#private@#attrs": import("@e280/sly").AttrTypes<{
             open: BooleanConstructor;
             button: BooleanConstructor;
             side: StringConstructor;
@@ -17,7 +17,7 @@ declare const ShinyDrawer_base: import("@e280/sly").ComponentClass<{
         get open(): () => Promise<void>;
         get close(): () => Promise<void>;
         context: ShinyContext;
-        #private: any;
+        "__#private@#private": any;
         readonly shadow: ShadowRoot;
         createShadow(): ShadowRoot;
         render(_use: import("@e280/sly").Use): import("@e280/sly").Content;
@@ -378,7 +378,7 @@ declare const ShinyDrawer_base: import("@e280/sly").ComponentClass<{
     };
     styles: import("lit").CSSResultGroup | undefined;
 }, [context: ShinyContext, options: {
-    button: boolean;
+    button?: boolean;
     side?: "left" | "right";
     control?: DrawerControl;
 }]>;

package/x/components/drawer/component.js

@@ -11,41 +11,42 @@ export class ShinyDrawer extends (view(use => (context, options) => {
     use.name("shiny-drawer");
     use.styles(foundationCss, context.theme, styleCss);
     const states = use.once(() => new States(use.element));
-    const side = options.side ?? "left";
-    const drawer = use.once(() => (options.control ?? new DrawerControl()));
+    const button = options.button ?? use.attrs.booleans.button;
+    const side = options.side ?? (use.attrs.strings.side === "right" ? "right" : "left");
+    const control = use.once(() => (options.control ?? new DrawerControl()));
     states.assign(side);
     use.mount(() => dom.events(window, { keydown: (event) => {
             if (event.code === "Escape")
-                drawer.close();
+                control.close();
         } }));
-    dom.attrs(use.element).booleans.open = drawer.isOpen;
+    dom.attrs(use.element).booleans.open = control.isOpen;
+    function renderButton() {
+        return html `
+				<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="${drawer.isOpen}" data-side="${side}">
-				<slot name=plate ?inert="${drawer.isOpen}"></slot>
+			<div class=shell ?data-open="${control.isOpen}" data-side="${side}">
+				<slot name=plate ?inert="${control.isOpen}"></slot>
 
 				<div class=clipper>
-					<div part=blanket @click="${drawer.close}" ?inert="${!drawer.isOpen}"></div>
+					<div part=blanket @click="${control.close}" ?inert="${!control.isOpen}"></div>
 
 					<div part=tray>
-						<slot ?inert="${!drawer.isOpen}"></slot>
-
-						${options.button
-        ? html `
-								<button @click="${drawer.toggle}">
-									${drawer.isOpen
-            ? html `
-											<slot name=button-x>
-												${xSvg}
-											</slot>
-										`
-            : html `
-											<slot name=button>
-												${menu2Svg}
-											</slot>
-										`}
-								</button>
-							`
-        : null}
+						<slot part=slate ?inert="${!control.isOpen}"></slot>
+						${button ? renderButton() : null}
 					</div>
 				</div>
 			</div>
@@ -67,10 +68,6 @@ export class ShinyDrawer extends (view(use => (context, options) => {
     get open() { return this.control.open; }
     get close() { return this.control.close; }
 })
-    .props(el => [el.context, {
-        control: el.control,
-        button: el.button,
-        side: el.side,
-    }])) {
+    .props(el => [el.context, { control: el.control }])) {
 }
 //# sourceMappingURL=component.js.map

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

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

package/x/components/drawer/showcase.d.ts

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

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/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/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"}