@e280/shiny 0.1.0-10 → 0.1.0-12

package/s/index.html.ts

@@ -1,23 +1,20 @@
 
 import {ssg, html} from "@e280/scute"
 
-const title = "shiny"
-const description = "✨ web ui components"
-const domain = "shiny.e280.org"
 const favicon = "/assets/favicon.png"
 
 export default ssg.page(import.meta.url, async orb => ({
-	title,
+	title: "shiny",
 	js: "demo/demo.bundle.min.js",
 	css: "demo/demo.css",
 	favicon,
 	dark: true,
 	socialCard: {
 		themeColor: "#d068ff",
-		title,
-		description,
 		siteName: "@e280/shiny",
-		image: "https://" + domain + favicon,
+		title: "✨shiny✨",
+		description: "web ui components",
+		image: "https://shiny.e280.org" + favicon,
 	},
 
 	body: html`

package/s/themes/aura.css.ts

@@ -4,17 +4,63 @@ import {defaultCssVars, renderCssVars} from "./infra/css-vars.js"
 export const aura = css`@layer overlay {
 
 :host {
-	display: block;
-
 	${renderCssVars({
 		...defaultCssVars(),
 	})}
 }
 
-:host([view="shiny-drawer"]) {
+:host([view="shiny-button"]:not([plain])) {
+	position: relative;
+
+	--buttoncolor: var(--calm);
+	--padding: 0.3em 0.7em;
+
+	color: white;
+	border-radius: 2em;
+	background: var(--buttoncolor);
+	border: none;
+
+	font-weight: medium;
+	text-shadow: 0.1em 0.1em 0.1em #0004;
+	box-shadow: 0.1em 0.2em 0.3em #0002;
+}
+
+:host([view="shiny-button"][lame]) { --buttoncolor: var(--lame); }
+:host([view="shiny-button"][angry]) { --buttoncolor: var(--angry); }
+:host([view="shiny-button"][zesty]) { --buttoncolor: var(--zesty); }
+:host([view="shiny-button"][happy]) { --buttoncolor: var(--happy); }
+:host([view="shiny-button"][calm]) { --buttoncolor: var(--calm); }
+:host([view="shiny-button"][sad]) { --buttoncolor: var(--sad); }
+:host([view="shiny-button"][quirky]) { --buttoncolor: var(--quirky); }
+
+:host([view="shiny-button"][gradient]:not([plain])) {
+	border: none;
+	background: linear-gradient(
+		to bottom right,
+		color-mix(in oklab, var(--buttoncolor), white 40%),
+		color-mix(in oklab, var(--buttoncolor), black 20%)
+	);
+
+	&::before {
+		content: "";
+		display: block;
+		position: absolute;
+		z-index: 0;
+		inset: 0.15em;
+		border-radius: inherit;
+		background: color-mix(in oklab, var(--buttoncolor), #0004 50%);
+	}
+
+	> * {
+		position: relative;
+		z-index: 1;
+	}
+}
+
+:host([view="shiny-drawer"]:not([plain])) {
 	display: block;
 
-	&::part(tray) {
+	&::part(slate) {
 		padding: 1em;
 		background: linear-gradient(
 			to top right,
@@ -25,24 +71,16 @@ 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;
 	}
 }
 
-:host([view="shiny-tabs"]) {
-	display: block;
-
-	&::part(tabs) {
-		display: flex;
-	}
-}
-
 }`
 

package/s/themes/infra/css-vars.ts

@@ -4,22 +4,35 @@ import {unsafeCSS} from "lit"
 export type CssVars = {
 	"bg": string
 	"alpha": string
-	"happy": string
-	"sad": string
-	"angry": string
 	"lame": string
+
+	// normative color vibes
+	"angry": string // red
+	"zesty": string // yellow
+	"happy": string // green
+	"calm": string // cyan
+	"sad": string // blue
+	"quirky": string // magenta
+
 	"inactive-opacity": string
+	"anim-duration": string
 }
 
 export function defaultCssVars(): CssVars {
 	return {
 		"bg": "#111",
-		"alpha": "#afa",
+		"alpha": "#def",
+
+		"lame": "#8888",
+		"angry": "#f50",
+		"zesty": "#cf0",
 		"happy": "#0fa",
+		"calm": "#0af",
 		"sad": "#74f",
-		"angry": "#f50",
-		"lame": "#8888",
+		"quirky": "#f49",
+
 		"inactive-opacity": "0.5",
+		"anim-duration": "300ms",
 	}
 }
 

package/s/themes/plain.css.ts

@@ -4,7 +4,6 @@ import {defaultCssVars, renderCssVars} from "./infra/css-vars.js"
 export const plain = css`@layer overlay {
 
 :host {
-	display: block;
 	${renderCssVars(defaultCssVars())}
 }
 

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

@@ -0,0 +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, content?: Content]>;
+export declare class ShinyButton extends ShinyButton_base {
+}
+export {};

package/x/components/button/component.js

@@ -0,0 +1,25 @@
+import { html } from "lit";
+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, content) => {
+    use.name("shiny-button");
+    use.styles(foundationCss, context.theme, styleCss);
+    const attrs = use.attrs.spec({
+        disabled: Boolean,
+        hidden: Boolean,
+    });
+    return html `
+			<button
+				part=button
+				?disabled="${attrs.disabled}"
+				?hidden="${attrs.hidden}">
+					<slot>${content}</slot>
+			</button>
+		`;
+})
+    .component(ShinyElement)
+    .props(el => [el.context])) {
+}
+//# sourceMappingURL=component.js.map

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

@@ -0,0 +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,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.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

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

@@ -0,0 +1,62 @@
+import { css } from "lit";
+export default css `@layer view {
+
+:host {
+	opacity: 0.8;
+	display: inline-flex;
+	width: max-content;
+	height: max-content;
+
+	--padding: 0.3em;
+	border-radius: 0.2em;
+	border: 0.1em solid currentColor;
+
+	cursor: pointer;
+	background: transparent;
+	user-select: none;
+}
+
+:host(:not([disabled]):is(:hover, :focus-visible)) { opacity: 1; }
+:host(:not([disabled]):active) { opacity: 0.6; }
+
+:host([disabled]) {
+	cursor: default;
+	color: var(--lame);
+}
+
+:host([hidden]) {
+	display: none !important;
+}
+
+:host([lame]) { color: var(--lame); }
+:host([angry]) { color: var(--angry); }
+:host([zesty]) { color: var(--zesty); }
+:host([happy]) { color: var(--happy); }
+:host([calm]) { color: var(--calm); }
+:host([sad]) { color: var(--sad); }
+:host([quirky]) { color: var(--quirky); }
+
+button {
+	background: transparent;
+	border: none;
+
+	font: inherit;
+	color: inherit;
+	cursor: inherit;
+	text-shadow: inherit;
+
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+
+	width: 100%;
+	height: 100%;
+	padding: var(--padding);
+}
+
+slot {
+	display: contents;
+}
+
+}`;
+//# sourceMappingURL=style.css.js.map

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

@@ -0,0 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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>;