@e280/shiny 0.1.0-12 → 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-12",
+	"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"] {}
 	}
 `
 
@@ -21,15 +26,16 @@ export const tabsShowcase = () => Showcase({
 		.box {
 			place-content: start start;
 			p { margin-top: 0.5em; }
+			button { padding: 1em; }
 		}
 	`,
 	exhibits: [
 		{
-			label: "tabs",
+			label: "shiny snug",
 			explain: html`<p>button bar. panels optional.</p>`,
 			snippets: [
 				{label: "html", code: `
-					<shiny-tabs>
+					<shiny-tabs snug>
 						<shiny-button>tab1</shiny-button>
 						<shiny-button>tab2</shiny-button>
 						<shiny-button>tab3</shiny-button>
@@ -41,6 +47,7 @@ export const tabsShowcase = () => Showcase({
 				{label: "view", code: `
 					ShinyTabs
 						.props()
+						.attr("snug")
 						.children(html\`
 							\${ShinyButton.props().children("tab1").render()}
 							\${ShinyButton.props().children("tab2").render()}
@@ -57,6 +64,7 @@ export const tabsShowcase = () => Showcase({
 			presentation: views => html`
 				${views.ShinyTabs
 					.props()
+					.attr("snug")
 					.children(html`
 						${views.ShinyButton.props().children("tab1").render()}
 						${views.ShinyButton.props().children("tab2").render()}
@@ -68,6 +76,96 @@ export const tabsShowcase = () => Showcase({
 					.render()}
 			`,
 		},
+		{
+			label: "regular",
+			explain: html`<p>button bar. panels optional.</p>`,
+			snippets: [
+				{label: "html", code: `
+					<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>
+				`},
+				{label: "view", code: `
+					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()
+				`},
+				{label: "css", code: cssSnippet},
+			],
+			style: css``,
+			presentation: views => html`
+				${views.ShinyTabs
+					.props()
+					.children(html`
+						<button>tab1</button>
+						<button>tab2</button>
+						<button>tab3</button>
+						<p slot=panel class=lipsum>${lip1}</p>
+						<p slot=panel class=lipsum>${lip2}</p>
+						<p slot=panel class=lipsum>${lip3}</p>
+					`)
+					.render()}
+			`,
+		},
+		{
+			label: "regular snug",
+			explain: html`<p>button bar. panels optional.</p>`,
+			snippets: [
+				{label: "html", code: `
+					<shiny-tabs snug>
+						<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>
+				`},
+				{label: "view", code: `
+					ShinyTabs
+						.props()
+						.attr("snug")
+						.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()
+				`},
+				{label: "css", code: cssSnippet},
+			],
+			style: css``,
+			presentation: views => html`
+				${views.ShinyTabs
+					.props()
+					.attr("snug")
+					.children(html`
+						<button>tab1</button>
+						<button>tab2</button>
+						<button>tab3</button>
+						<p slot=panel class=lipsum>${lip1}</p>
+						<p slot=panel class=lipsum>${lip2}</p>
+						<p slot=panel class=lipsum>${lip3}</p>
+					`)
+					.render()}
+			`,
+		},
 	],
 })
 

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

@@ -9,16 +9,19 @@ export default css`@layer view {
 
 slot[part="tabs"] {
 	display: flex;
-
-	&::slotted(*) {
-		border-radius: 0.3em;
-	}
+	flex-wrap: wrap;
 
 	&::slotted([data-active]) {
 		opacity: 1;
 		color: currentColor;
 		text-decoration: underline;
 	}
+}
+
+:host([snug]) slot[part="tabs"] {
+	&::slotted(*) {
+		border-radius: 0.3em;
+	}
 
 	&::slotted(:not([data-last], [data-next-is-active])) {
 		border-right: none;

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

@@ -8,7 +8,7 @@ export default css`@layer view {
 	gap: 0.5em;
 
 	> * {
-		flex: 1 1 0;
+		flex: 1 1 10em;
 		min-width: 0;
 	}
 }

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

@@ -36,7 +36,9 @@ export const Exhibit = view(use => (
 
 			<div class=snippet>
 				<header>
-					${auraViews.ShinyTabs.props(snippetControl)
+					${auraViews.ShinyTabs
+						.props(snippetControl)
+						.attr("snug")
 						.children(exhibit.snippets.map(s =>
 							auraViews.ShinyButton
 								.props()

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

@@ -39,6 +39,9 @@ export default css`@layer view {
 
 header {
 	display: flex;
+	flex-wrap: wrap;
+	place-content: center center;
+	gap: 0.5em;
 
 	h2 {
 		flex: 1 1 auto;

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

@@ -25,27 +25,27 @@ export const Showcase = view(use => (options: {
 	return html`
 		<header>
 			<h2>✨shiny-${options.name}✨</h2>
-			<nav>
-				${auraViews.ShinyTabs
-					.props(exhibitTabControl)
-					.children(options.exhibits.map(p =>
-						auraViews.ShinyButton
-							.props()
-							.attr("sad")
-							.children(p.label)
-							.render()
-					))
-					.render()}
-				${auraViews.ShinyTabs
-					.props(themeTabControl)
-					.children(viewsets.map(([theme]) =>
-						auraViews.ShinyButton
-							.props()
-							.children(theme)
-							.render()
-					))
-					.render()}
-			</nav>
+			${auraViews.ShinyTabs
+				.props(exhibitTabControl)
+				.attr("snug")
+				.children(options.exhibits.map(p =>
+					auraViews.ShinyButton
+						.props()
+						.attr("sad")
+						.children(p.label)
+						.render()
+				))
+				.render()}
+			${auraViews.ShinyTabs
+				.props(themeTabControl)
+				.attr("snug")
+				.children(viewsets.map(([theme]) =>
+					auraViews.ShinyButton
+						.props()
+						.children(theme)
+						.render()
+				))
+				.render()}
 		</header>
 
 		${Exhibit(exhibit, exhibitViews, options.style)}

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