@e280/shiny 0.1.0-11 → 0.1.0-13

package/x/shiny.d.ts

@@ -3,7 +3,7 @@ export declare function shiny(context: ShinyContext): {
     components: {
         ShinyButton: {
             new (): import("./components/button/component.js").ShinyButton;
-            view: import("@e280/sly").View<[]>;
+            view: import("@e280/sly").View<[content?: import("@e280/sly").Content]>;
         } & typeof import("./components/button/component.js").ShinyButton;
         ShinyCopy: {
             new (): import("./index.js").ShinyCopy;
@@ -12,7 +12,7 @@ export declare function shiny(context: ShinyContext): {
         ShinyDrawer: {
             new (): import("./index.js").ShinyDrawer;
             view: import("@e280/sly").View<[options: {
-                button: boolean;
+                button?: boolean;
                 side?: "left" | "right";
                 control?: import("./index.js").DrawerControl;
             }]>;
@@ -27,14 +27,14 @@ export declare function shiny(context: ShinyContext): {
         } & typeof import("./index.js").ShinyTabs;
     };
     views: {
-        ShinyButton: import("@e280/sly").View<[]> & import("@e280/sly").View<[context: ShinyContext]>;
+        ShinyButton: import("@e280/sly").View<[content?: import("@e280/sly").Content]> & import("@e280/sly").View<[context: ShinyContext, content?: import("@e280/sly").Content]>;
         ShinyCopy: import("@e280/sly").View<[text: string | undefined, ms?: any]> & import("@e280/sly").View<[context: ShinyContext, text: string | undefined, ms?: any]>;
         ShinyDrawer: import("@e280/sly").View<[options: {
-            button: boolean;
+            button?: boolean;
             side?: "left" | "right";
             control?: import("./index.js").DrawerControl;
         }]> & import("@e280/sly").View<[context: ShinyContext, options: {
-            button: boolean;
+            button?: boolean;
             side?: "left" | "right";
             control?: import("./index.js").DrawerControl;
         }]>;

package/x/themes/aura.css.js

@@ -56,10 +56,10 @@ export const aura = css `@layer overlay {
 	}
 }
 
-:host([view="shiny-drawer"]) {
+:host([view="shiny-drawer"]:not([plain])) {
 	display: block;
 
-	&::part(tray) {
+	&::part(slate) {
 		padding: 1em;
 		background: linear-gradient(
 			to top right,
@@ -70,13 +70,13 @@ export const aura = css `@layer overlay {
 }
 
 :host([view="shiny-drawer"]:state(left)) {
-	&::part(tray) {
+	&::part(slate) {
 		border-bottom-right-radius: 0.5em;
 	}
 }
 
 :host([view="shiny-drawer"]:state(right)) {
-	&::part(tray) {
+	&::part(slate) {
 		border-bottom-left-radius: 0.5em;
 	}
 }

package/x/themes/infra/css-vars.d.ts

@@ -2,13 +2,14 @@ export type CssVars = {
     "bg": string;
     "alpha": string;
     "lame": string;
-    "inactive-opacity": string;
     "angry": string;
     "zesty": string;
     "happy": string;
     "calm": string;
     "sad": string;
     "quirky": string;
+    "inactive-opacity": string;
+    "anim-duration": string;
 };
 export declare function defaultCssVars(): CssVars;
 export declare function renderCssVars(vars: CssVars): import("lit").CSSResult;

package/x/themes/infra/css-vars.js

@@ -3,7 +3,6 @@ export function defaultCssVars() {
     return {
         "bg": "#111",
         "alpha": "#def",
-        "inactive-opacity": "0.5",
         "lame": "#8888",
         "angry": "#f50",
         "zesty": "#cf0",
@@ -11,6 +10,8 @@ export function defaultCssVars() {
         "calm": "#0af",
         "sad": "#74f",
         "quirky": "#f49",
+        "inactive-opacity": "0.5",
+        "anim-duration": "300ms",
     };
 }
 export function renderCssVars(vars) {

package/x/themes/infra/css-vars.js.map

@@ -1 +1 @@
-{"version":3,"file":"css-vars.js","sourceRoot":"","sources":["../../../s/themes/infra/css-vars.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,SAAS,EAAC,MAAM,KAAK,CAAA;AAiB7B,MAAM,UAAU,cAAc;IAC7B,OAAO;QACN,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,MAAM;QACf,kBAAkB,EAAE,KAAK;QACzB,MAAM,EAAE,OAAO;QACf,OAAO,EAAE,MAAM;QACf,OAAO,EAAE,MAAM;QACf,OAAO,EAAE,MAAM;QACf,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,MAAM;KAChB,CAAA;AACF,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,IAAa;IAC1C,OAAO,SAAS,CACf,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC;SAClB,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,KAAK,GAAG,iBAAiB,GAAG,KAAK,KAAK,IAAI,CAAC;SACjE,IAAI,CAAC,IAAI,CAAC,CACZ,CAAA;AACF,CAAC"}
+{"version":3,"file":"css-vars.js","sourceRoot":"","sources":["../../../s/themes/infra/css-vars.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,SAAS,EAAC,MAAM,KAAK,CAAA;AAmB7B,MAAM,UAAU,cAAc;IAC7B,OAAO;QACN,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,MAAM;QAEf,MAAM,EAAE,OAAO;QACf,OAAO,EAAE,MAAM;QACf,OAAO,EAAE,MAAM;QACf,OAAO,EAAE,MAAM;QACf,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,MAAM;QAEhB,kBAAkB,EAAE,KAAK;QACzB,eAAe,EAAE,OAAO;KACxB,CAAA;AACF,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,IAAa;IAC1C,OAAO,SAAS,CACf,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC;SAClB,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,KAAK,GAAG,iBAAiB,GAAG,KAAK,KAAK,IAAI,CAAC;SACjE,IAAI,CAAC,IAAI,CAAC,CACZ,CAAA;AACF,CAAC"}

package/s/demo/aura-views.ts

@@ -1,6 +0,0 @@
-
-import {shiny} from "../shiny.js"
-import {aura} from "../themes/aura.css.js"
-
-export const auraViews = shiny({theme: aura}).views
-

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

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

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

@@ -1,57 +0,0 @@
-
-import {untab} from "@e280/stz"
-import {Content, view} from "@e280/sly"
-import {CSSResultGroup, html} from "lit"
-import styleCss from "./style.css.js"
-import {auraViews} from "../../aura-views.js"
-import {foundationCss} from "../../../components/foundation.css.js"
-
-export const Demonstration = view(use => (options: {
-		name: string
-		explain: Content
-		snippets: [label: {button: string, text: string}, code: string][]
-		content: Content
-		style: CSSResultGroup
-	}) => {
-
-	use.name(`demo-${options.name}`)
-	use.styles(foundationCss, styleCss, options.style)
-
-	function codeblock(heading: string, code: string) {
-		const cleanCode = untab(code).trim()
-		return html`
-			<div class=codeblock slot=panel>
-				<div class=zone>
-					<h3>${heading}</h3>
-					<code>${cleanCode}</code>
-				</div>
-				${auraViews.ShinyCopy(cleanCode)}
-			</div>
-		`
-	}
-
-	return html`
-		<div class=meta>
-			<h2>✨ shiny-${options.name}</h2>
-			<div class=explain>${options.explain}</div>
-			${auraViews.ShinyTabs
-				.props()
-				.children(html`
-					${options.snippets.map(([label]) => (
-						auraViews.ShinyButton
-							.props()
-							.attr("plain", true)
-							.children(label.button)
-							.render()
-					))}
-					${options.snippets.map(([label, code]) => codeblock(label.text, code))}
-				`)
-				.render()}
-		</div>
-
-		<div class=content part=content>
-			${options.content}
-		</div>
-	`
-})
-

package/x/demo/aura-views.js

@@ -1,4 +0,0 @@
-import { shiny } from "../shiny.js";
-import { aura } from "../themes/aura.css.js";
-export const auraViews = shiny({ theme: aura }).views;
-//# sourceMappingURL=aura-views.js.map

package/x/demo/aura-views.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"aura-views.js","sourceRoot":"","sources":["../../s/demo/aura-views.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,KAAK,EAAC,MAAM,aAAa,CAAA;AACjC,OAAO,EAAC,IAAI,EAAC,MAAM,uBAAuB,CAAA;AAE1C,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,CAAC,EAAC,KAAK,EAAE,IAAI,EAAC,CAAC,CAAC,KAAK,CAAA"}

package/x/demo/views/demonstration/style.css.js

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

package/x/demo/views/demonstration/style.css.js.map

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

package/x/demo/views/demonstration/view.d.ts

@@ -1,12 +0,0 @@
-import { Content } from "@e280/sly";
-import { CSSResultGroup } from "lit";
-export declare const Demonstration: import("@e280/sly").View<[options: {
-    name: string;
-    explain: Content;
-    snippets: [label: {
-        button: string;
-        text: string;
-    }, code: string][];
-    content: Content;
-    style: CSSResultGroup;
-}]>;

package/x/demo/views/demonstration/view.js

@@ -1,44 +0,0 @@
-import { untab } from "@e280/stz";
-import { view } from "@e280/sly";
-import { html } from "lit";
-import styleCss from "./style.css.js";
-import { auraViews } from "../../aura-views.js";
-import { foundationCss } from "../../../components/foundation.css.js";
-export const Demonstration = view(use => (options) => {
-    use.name(`demo-${options.name}`);
-    use.styles(foundationCss, styleCss, options.style);
-    function codeblock(heading, code) {
-        const cleanCode = untab(code).trim();
-        return html `
-			<div class=codeblock slot=panel>
-				<div class=zone>
-					<h3>${heading}</h3>
-					<code>${cleanCode}</code>
-				</div>
-				${auraViews.ShinyCopy(cleanCode)}
-			</div>
-		`;
-    }
-    return html `
-		<div class=meta>
-			<h2>✨ shiny-${options.name}</h2>
-			<div class=explain>${options.explain}</div>
-			${auraViews.ShinyTabs
-        .props()
-        .children(html `
-					${options.snippets.map(([label]) => (auraViews.ShinyButton
-        .props()
-        .attr("plain", true)
-        .children(label.button)
-        .render()))}
-					${options.snippets.map(([label, code]) => codeblock(label.text, code))}
-				`)
-        .render()}
-		</div>
-
-		<div class=content part=content>
-			${options.content}
-		</div>
-	`;
-});
-//# sourceMappingURL=view.js.map

package/x/demo/views/demonstration/view.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"view.js","sourceRoot":"","sources":["../../../../s/demo/views/demonstration/view.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,KAAK,EAAC,MAAM,WAAW,CAAA;AAC/B,OAAO,EAAU,IAAI,EAAC,MAAM,WAAW,CAAA;AACvC,OAAO,EAAiB,IAAI,EAAC,MAAM,KAAK,CAAA;AACxC,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AACrC,OAAO,EAAC,SAAS,EAAC,MAAM,qBAAqB,CAAA;AAC7C,OAAO,EAAC,aAAa,EAAC,MAAM,uCAAuC,CAAA;AAEnE,MAAM,CAAC,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,OAMxC,EAAE,EAAE;IAEL,GAAG,CAAC,IAAI,CAAC,QAAQ,OAAO,CAAC,IAAI,EAAE,CAAC,CAAA;IAChC,GAAG,CAAC,MAAM,CAAC,aAAa,EAAE,QAAQ,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;IAElD,SAAS,SAAS,CAAC,OAAe,EAAE,IAAY;QAC/C,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,CAAA;QACpC,OAAO,IAAI,CAAA;;;WAGF,OAAO;aACL,SAAS;;MAEhB,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC;;GAEjC,CAAA;IACF,CAAC;IAED,OAAO,IAAI,CAAA;;iBAEK,OAAO,CAAC,IAAI;wBACL,OAAO,CAAC,OAAO;KAClC,SAAS,CAAC,SAAS;SACnB,KAAK,EAAE;SACP,QAAQ,CAAC,IAAI,CAAA;OACX,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CACnC,SAAS,CAAC,WAAW;SACnB,KAAK,EAAE;SACP,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC;SACnB,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC;SACtB,MAAM,EAAE,CACV,CAAC;OACA,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;KACtE,CAAC;SACD,MAAM,EAAE;;;;KAIR,OAAO,CAAC,OAAO;;EAElB,CAAA;AACF,CAAC,CAAC,CAAA"}