@e280/shiny 0.1.0-13 → 0.1.0-14

package/README.md

@@ -45,29 +45,33 @@
     ```ts
     const {components, views} = shiny({theme: themes.aura})
     ```
-    - `aura` — (default) cosmic dreamy seaside nebula vibes
-    - `plain` — bare-bones spartan theme, buttons look lame
 - (optional) register the components
     ```ts
     dom.register(components)
     ```
     - or use views instead of components
-- time to go shopping at https://shiny.e280.org/
+- go shopping at https://shiny.e280.org/
+
+
+
+<br/><br/>
+
+## 🎨 themes
+
+- **`aura`** — cosmic dreamy seaside nebula vibes
+- `plain` — bare-bones spartan theme, for diy, buttons look lame
 
 
 
 <br/><br/>
 
 ## 😎 views are for the cool kids
-- hey, remember those `views` you got from the install snippet?
-    ```ts
-    const {components, views} = shiny({theme: themes.aura})
-    ```
+- hey, remember those `views` you got from the web app install snippet?
 - well you can yoink out a view you wanna use
     ```ts
     const {ShinyCopy} = views
     ```
-- then you can render it directly in your lit templates
+- then you can use 'em directly in your lit templates
     ```ts
     import {html} from "lit"
     import {dom, view} from "@e280/sly"

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@e280/shiny",
-	"version": "0.1.0-13",
+	"version": "0.1.0-14",
 	"description": "✨ web ui components",
 	"license": "MIT",
 	"type": "module",

package/s/components/button/showcase.ts

@@ -3,7 +3,7 @@ import {css, html} from "lit"
 import {Showcase} from "../../demo/views/showcase/view.js"
 
 const cssSnippet = `
-	shiny-button {
+	[view="shiny-button"] {
 		--padding: 0.3em;
 		font-size: 1em;
 		color: currentColor;

package/s/components/copy/showcase.ts

@@ -3,7 +3,7 @@ import {css, html} from "lit"
 import {Showcase} from "../../demo/views/showcase/view.js"
 
 const cssSnippet = `
-	shiny-copy {
+	[view="shiny-copy"] {
 		font-size: 1em;
 		--happy: #0fa;
 		--angry: #f50;

package/s/components/drawer/showcase.ts

@@ -9,7 +9,7 @@ const lip2 = lipsum()
 const lip3 = lipsum()
 
 const cssSnippet = `
-	shiny-drawer {
+	[view="shiny-drawer"] {
 		--button-size: 2em;
 		--anim-duration: 200ms;
 		--slate-hidden-opacity: 1;
@@ -19,6 +19,11 @@ const cssSnippet = `
 			transparent,
 			var(--bg)
 		);
+		--slate-bg: linear-gradient(
+			to top right,
+			color-mix(in oklab, var(--calm), #222 50%),
+			color-mix(in oklab, var(--calm), #888 50%)
+		);
 	}
 `
 

package/s/components/drawer/style.css.ts

@@ -6,6 +6,7 @@ export default css`@layer view {
 	display: block;
 	width: 100%;
 	height: 100%;
+	--slate-bg: transparent;
 	--button-size: 2em;
 	--blanket-backdrop-filter: blur(0.5em);
 	--slate-hidden-opacity: 1;
@@ -64,6 +65,7 @@ export default css`@layer view {
 			display: block;
 			height: 100%;
 			overflow-y: auto;
+			background: var(--slate-bg);
 		}
 
 		> button {

package/s/components/example/component.ts

@@ -6,7 +6,7 @@ import {foundationCss} from "../foundation.css.js"
 import {ShinyContext, ShinyElement} from "../framework.js"
 
 export class ShinyExample extends (
-	view(use => (context: ShinyContext, start: number) => {
+	view(use => (context: ShinyContext, start = 1) => {
 		use.name("shiny-example")
 		use.styles(foundationCss, context.theme, styleCss)
 
@@ -22,6 +22,6 @@ export class ShinyExample extends (
 	.component(class extends ShinyElement {
 		attrs = dom.attrs(this).spec({start: Number})
 	})
-	.props(el => [el.context, el.attrs.start ?? 1] as const)
+	.props(el => [el.context, el.attrs.start] as const)
 ) {}
 

package/s/components/example/showcase.ts

@@ -0,0 +1,32 @@
+
+import {css, html} from "lit"
+import {Showcase} from "../../demo/views/showcase/view.js"
+
+export const drawerShowcase = () => Showcase({
+	name: "drawer",
+	style: css`
+		.box {}
+	`,
+	exhibits: [
+		{
+			label: "example",
+			explain: html`<p>example component.</p>`,
+			snippets: [
+				{label: "html", code: `
+					<shiny-example></shiny-example>
+				`},
+				{label: "view", code: `
+					ShinyExample()
+				`},
+				{label: "css", code: `
+					[view="shiny-example"] {}
+				`},
+			],
+			style: css``,
+			presentation: views => html`
+				${views.ShinyExample()}
+			`,
+		},
+	],
+})
+

package/s/components/tabs/showcase.ts

@@ -8,10 +8,15 @@ const lip2 = lipsum()
 const lip3 = lipsum()
 
 const cssSnippet = `
-	shiny-tabs {
+	[view="shiny-tabs"] {
 		&::part(tabs) {}
 		&::part(panels) {}
-		> shiny-button {}
+
+		/* buttons */
+		> :not([slot="panel"]) {}
+
+		/* panels */
+		> [slot="panel"] {}
 	}
 `
 

package/s/themes/aura.css.ts

@@ -59,14 +59,14 @@ export const aura = css`@layer overlay {
 
 :host([view="shiny-drawer"]:not([plain])) {
 	display: block;
+	--slate-bg: linear-gradient(
+		to top right,
+		color-mix(in oklab, var(--calm), #222 50%),
+		color-mix(in oklab, var(--calm), #888 50%)
+	);
 
 	&::part(slate) {
 		padding: 1em;
-		background: linear-gradient(
-			to top right,
-			#00a9dd69,
-			#70ffd77a
-		);
 	}
 }
 

package/x/components/button/showcase.js

@@ -1,7 +1,7 @@
 import { css, html } from "lit";
 import { Showcase } from "../../demo/views/showcase/view.js";
 const cssSnippet = `
-	shiny-button {
+	[view="shiny-button"] {
 		--padding: 0.3em;
 		font-size: 1em;
 		color: currentColor;

package/x/components/copy/showcase.js

@@ -1,7 +1,7 @@
 import { css, html } from "lit";
 import { Showcase } from "../../demo/views/showcase/view.js";
 const cssSnippet = `
-	shiny-copy {
+	[view="shiny-copy"] {
 		font-size: 1em;
 		--happy: #0fa;
 		--angry: #f50;

package/x/components/drawer/showcase.js

@@ -5,7 +5,7 @@ const lip1 = lipsum();
 const lip2 = lipsum();
 const lip3 = lipsum();
 const cssSnippet = `
-	shiny-drawer {
+	[view="shiny-drawer"] {
 		--button-size: 2em;
 		--anim-duration: 200ms;
 		--slate-hidden-opacity: 1;
@@ -15,6 +15,11 @@ const cssSnippet = `
 			transparent,
 			var(--bg)
 		);
+		--slate-bg: linear-gradient(
+			to top right,
+			color-mix(in oklab, var(--calm), #222 50%),
+			color-mix(in oklab, var(--calm), #888 50%)
+		);
 	}
 `;
 const makeExhibit = (side) => ({

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

@@ -1 +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"}
+{"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;;;;;;;;;;;;;;;;;CAiBlB,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

@@ -5,6 +5,7 @@ export default css `@layer view {
 	display: block;
 	width: 100%;
 	height: 100%;
+	--slate-bg: transparent;
 	--button-size: 2em;
 	--blanket-backdrop-filter: blur(0.5em);
 	--slate-hidden-opacity: 1;
@@ -63,6 +64,7 @@ export default css `@layer view {
 			display: block;
 			height: 100%;
 			overflow-y: auto;
+			background: var(--slate-bg);
 		}
 
 		> button {

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyHhB,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2HhB,CAAA"}

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

@@ -365,7 +365,7 @@ declare const ShinyExample_base: import("@e280/sly").ComponentClass<{
         focus(options?: FocusOptions): void;
     };
     styles: import("lit").CSSResultGroup | undefined;
-}, [context: ShinyContext, start: number]>;
+}, [context: ShinyContext, start?: any]>;
 export declare class ShinyExample extends ShinyExample_base {
 }
 export {};

package/x/components/example/component.js

@@ -3,7 +3,7 @@ import { dom, view } from "@e280/sly";
 import styleCss from "./style.css.js";
 import { foundationCss } from "../foundation.css.js";
 import { ShinyElement } from "../framework.js";
-export class ShinyExample extends (view(use => (context, start) => {
+export class ShinyExample extends (view(use => (context, start = 1) => {
     use.name("shiny-example");
     use.styles(foundationCss, context.theme, styleCss);
     const $count = use.signal(start);
@@ -17,6 +17,6 @@ export class ShinyExample extends (view(use => (context, start) => {
     .component(class extends ShinyElement {
     attrs = dom.attrs(this).spec({ start: Number });
 })
-    .props(el => [el.context, el.attrs.start ?? 1])) {
+    .props(el => [el.context, el.attrs.start])) {
 }
 //# sourceMappingURL=component.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../s/components/example/component.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,WAAW,CAAA;AACnC,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AACrC,OAAO,EAAC,aAAa,EAAC,MAAM,sBAAsB,CAAA;AAClD,OAAO,EAAe,YAAY,EAAC,MAAM,iBAAiB,CAAA;AAE1D,MAAM,OAAO,YAAa,SAAQ,CACjC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,OAAqB,EAAE,KAAa,EAAE,EAAE;IACpD,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC,CAAA;IACzB,GAAG,CAAC,MAAM,CAAC,aAAa,EAAE,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;IAElD,MAAM,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;IAChC,MAAM,SAAS,GAAG,GAAG,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,CAAA,CAAC,CAAC,CAAA;IAE1C,OAAO,IAAI,CAAA;qBACQ,SAAS;MACxB,MAAM,EAAE;;GAEX,CAAA;AACF,CAAC,CAAC;KACD,SAAS,CAAC,KAAM,SAAQ,YAAY;IACpC,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,MAAM,EAAC,CAAC,CAAA;CAC7C,CAAC;KACD,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC,CAAU,CAAC,CACxD;CAAG"}
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../s/components/example/component.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,WAAW,CAAA;AACnC,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AACrC,OAAO,EAAC,aAAa,EAAC,MAAM,sBAAsB,CAAA;AAClD,OAAO,EAAe,YAAY,EAAC,MAAM,iBAAiB,CAAA;AAE1D,MAAM,OAAO,YAAa,SAAQ,CACjC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,OAAqB,EAAE,KAAK,GAAG,CAAC,EAAE,EAAE;IAChD,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC,CAAA;IACzB,GAAG,CAAC,MAAM,CAAC,aAAa,EAAE,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;IAElD,MAAM,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;IAChC,MAAM,SAAS,GAAG,GAAG,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,CAAA,CAAC,CAAC,CAAA;IAE1C,OAAO,IAAI,CAAA;qBACQ,SAAS;MACxB,MAAM,EAAE;;GAEX,CAAA;AACF,CAAC,CAAC;KACD,SAAS,CAAC,KAAM,SAAQ,YAAY;IACpC,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,MAAM,EAAC,CAAC,CAAA;CAC7C,CAAC;KACD,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAU,CAAC,CACnD;CAAG"}

package/x/components/example/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/example/showcase.js

@@ -0,0 +1,30 @@
+import { css, html } from "lit";
+import { Showcase } from "../../demo/views/showcase/view.js";
+export const drawerShowcase = () => Showcase({
+    name: "drawer",
+    style: css `
+		.box {}
+	`,
+    exhibits: [
+        {
+            label: "example",
+            explain: html `<p>example component.</p>`,
+            snippets: [
+                { label: "html", code: `
+					<shiny-example></shiny-example>
+				` },
+                { label: "view", code: `
+					ShinyExample()
+				` },
+                { label: "css", code: `
+					[view="shiny-example"] {}
+				` },
+            ],
+            style: css ``,
+            presentation: views => html `
+				${views.ShinyExample()}
+			`,
+        },
+    ],
+});
+//# sourceMappingURL=showcase.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"showcase.js","sourceRoot":"","sources":["../../../s/components/example/showcase.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,QAAQ,EAAC,MAAM,mCAAmC,CAAA;AAE1D,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC;IAC5C,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,GAAG,CAAA;;EAET;IACD,QAAQ,EAAE;QACT;YACC,KAAK,EAAE,SAAS;YAChB,OAAO,EAAE,IAAI,CAAA,2BAA2B;YACxC,QAAQ,EAAE;gBACT,EAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE;;KAErB,EAAC;gBACF,EAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE;;KAErB,EAAC;gBACF,EAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE;;KAEpB,EAAC;aACF;YACD,KAAK,EAAE,GAAG,CAAA,EAAE;YACZ,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAA;MACxB,KAAK,CAAC,YAAY,EAAE;IACtB;SACD;KACD;CACD,CAAC,CAAA"}

package/x/components/tabs/showcase.js

@@ -5,10 +5,15 @@ const lip1 = lipsum();
 const lip2 = lipsum();
 const lip3 = lipsum();
 const cssSnippet = `
-	shiny-tabs {
+	[view="shiny-tabs"] {
 		&::part(tabs) {}
 		&::part(panels) {}
-		> shiny-button {}
+
+		/* buttons */
+		> :not([slot="panel"]) {}
+
+		/* panels */
+		> [slot="panel"] {}
 	}
 `;
 export const tabsShowcase = () => Showcase({

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

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

package/x/demo/demo.bundle.min.js

@@ -134,14 +134,14 @@ header {
 
 :host([view="shiny-drawer"]:not([plain])) {
 	display: block;
+	--slate-bg: linear-gradient(
+		to top right,
+		color-mix(in oklab, var(--calm), #222 50%),
+		color-mix(in oklab, var(--calm), #888 50%)
+	);
 
 	&::part(slate) {
 		padding: 1em;
-		background: linear-gradient(
-			to top right,
-			#00a9dd69,
-			#70ffd77a
-		);
 	}
 }
 
@@ -291,6 +291,7 @@ svg {
 	display: block;
 	width: 100%;
 	height: 100%;
+	--slate-bg: transparent;
 	--button-size: 2em;
 	--blanket-backdrop-filter: blur(0.5em);
 	--slate-hidden-opacity: 1;
@@ -349,6 +350,7 @@ svg {
 			display: block;
 			height: 100%;
 			overflow-y: auto;
+			background: var(--slate-bg);
 		}
 
 		> button {
@@ -438,11 +440,11 @@ button {
 	min-width: 4em;
 }
 
-}`;var re=class extends f(t=>(e,s)=>{t.name("shiny-example"),t.styles(A,e.theme,xr);let o=t.signal(s);return h`
+}`;var re=class extends f(t=>(e,s=1)=>{t.name("shiny-example"),t.styles(A,e.theme,xr);let o=t.signal(s);return h`
 			<button @click="${()=>{o.value++}}">
 				${o()}
 			</button>
-		`}).component(class extends S{attrs=d.attrs(this).spec({start:Number})}).props(t=>[t.context,t.attrs.start??1]){};var vr=c`@layer view {
+		`}).component(class extends S{attrs=d.attrs(this).spec({start:Number})}).props(t=>[t.context,t.attrs.start]){};var vr=c`@layer view {
 
 :host {
 	display: inline-flex;
@@ -590,7 +592,7 @@ slot[part="tabs"] {
 
 		${_r(n,o,t.style)}
 	`});var Ar=`
-	shiny-copy {
+	[view="shiny-copy"] {
 		font-size: 1em;
 		--happy: #0fa;
 		--angry: #f50;
@@ -606,10 +608,15 @@ slot[part="tabs"] {
 			`},{label:"fail",explain:h`<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:Ar}],style:c``,presentation:r=>h`
 				${r.ShinyCopy.props("").attr("fail").render()}
 			`}]});var we=N(),$e=N(),_e=N(),Ae=`
-	shiny-tabs {
+	[view="shiny-tabs"] {
 		&::part(tabs) {}
 		&::part(panels) {}
-		> shiny-button {}
+
+		/* buttons */
+		> :not([slot="panel"]) {}
+
+		/* panels */
+		> [slot="panel"] {}
 	}
 `,kr=()=>H({name:"tabs",style:c`
 		.box {
@@ -710,7 +717,7 @@ slot[part="tabs"] {
 						<p slot=panel class=lipsum>${_e}</p>
 					`).render()}
 			`}]});var Se=`
-	shiny-button {
+	[view="shiny-button"] {
 		--padding: 0.3em;
 		font-size: 1em;
 		color: currentColor;
@@ -748,7 +755,7 @@ slot[part="tabs"] {
 						ShinyButton.props().attr("plain").children("plain").render(),
 					]
 				`},{label:"css",code:Se}],style:c``,presentation:r=>[r.ShinyButton.props().attr("calm").attr("gradient").children("calm").render(),r.ShinyButton.props().attr("angry").attr("gradient").children("angry").render(),r.ShinyButton.props().attr("happy").attr("gradient").children("happy").render(),r.ShinyButton.props().attr("zesty").attr("gradient").children("zesty").render(),r.ShinyButton.props().attr("sad").attr("gradient").children("sad").render(),r.ShinyButton.props().attr("quirky").attr("gradient").children("quirky").render(),r.ShinyButton.props().attr("plain").children("plain").render()]}]});var ns=N(),is=N(),as=N(),ls=`
-	shiny-drawer {
+	[view="shiny-drawer"] {
 		--button-size: 2em;
 		--anim-duration: 200ms;
 		--slate-hidden-opacity: 1;
@@ -758,6 +765,11 @@ slot[part="tabs"] {
 			transparent,
 			var(--bg)
 		);
+		--slate-bg: linear-gradient(
+			to top right,
+			color-mix(in oklab, var(--calm), #222 50%),
+			color-mix(in oklab, var(--calm), #888 50%)
+		);
 	}
 `,Er=r=>({label:r,explain:h`<p>slide-out panel. button optional.</p>`,snippets:[{label:"html",code:`
 			<shiny-drawer button side=${r}>