@e280/shiny 0.1.0-2 → 0.1.0-21

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

@@ -0,0 +1,109 @@
+import { css } from "lit";
+export default css `@layer view {
+
+:host {
+	display: inline-flex;
+	width: max-content;
+	height: max-content;
+
+	cursor: pointer;
+	background: transparent;
+	user-select: none;
+
+	--button-padding: 0.3em 0.7em;
+	--button-color: var(--calm);
+}
+
+slot {
+	z-index: 1;
+	position: relative;
+	display: block;
+}
+
+button {
+	opacity: 0.8;
+	position: relative;
+
+	font: inherit;
+	cursor: inherit;
+	text-shadow: inherit;
+	font-weight: medium;
+
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+
+	width: 100%;
+	height: 100%;
+	padding: var(--button-padding);
+
+	border-radius: 2em;
+	background: var(--button-color);
+	text-shadow: 0.1em 0.1em 0.1em #0004;
+	box-shadow: 0.1em 0.2em 0.3em #0002;
+
+	color: white;
+	border: none;
+	background: linear-gradient(
+		to bottom right,
+		color-mix(in oklab, var(--button-color), white 40%),
+		color-mix(in oklab, var(--button-color), black 20%)
+	);
+
+	&::before {
+		content: "";
+		display: block;
+		position: absolute;
+		z-index: 0;
+		inset: 0.15em;
+		border-radius: inherit;
+		background: color-mix(in oklab, var(--button-color), #0004 50%);
+	}
+
+	&:not([disabled]):is(:hover, :focus-visible) { opacity: 1; }
+	&:not([disabled]):active { opacity: 0.6; }
+
+	&[data-vibe="lame"] { --button-color: var(--lame); }
+	&[data-vibe="angry"] { --button-color: var(--angry); }
+	&[data-vibe="zesty"] { --button-color: var(--zesty); }
+	&[data-vibe="happy"] { --button-color: var(--happy); }
+	&[data-vibe="calm"] { --button-color: var(--calm); }
+	&[data-vibe="sad"] { --button-color: var(--sad); }
+	&[data-vibe="quirky"] { --button-color: var(--quirky); }
+	&[data-vibe="tabbed"] { --button-color: var(--tabbed); }
+
+	> * {
+		position: relative;
+		z-index: 1;
+	}
+
+	&[disabled] {
+		cursor: default;
+	}
+
+	&[hidden] {
+		display: none !important;
+	}
+}
+
+:host([data-tabbed]) > button {
+	opacity: 1;
+	filter: brightness(120%);
+}
+
+:host(:not([data-tabbed])) > button[disabled] {
+	--button-color: var(--lame);
+}
+
+:host([data-snug]:not([data-last])) > button {
+	border-top-right-radius: 0;
+	border-bottom-right-radius: 0;
+}
+
+:host([data-snug]:not([data-first])) > button {
+	border-top-left-radius: 0;
+	border-bottom-left-radius: 0;
+}
+
+}`;
+//# sourceMappingURL=style.css.js.map

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

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

package/x/views/button/view.d.ts

@@ -0,0 +1,5 @@
+import { Content } from "@e280/sly";
+export declare const ShinyButton: import("@e280/sly").ShadowView<[content?: Content, options?: {
+    vibe?: "calm" | "lame" | "happy" | "sad" | "angry" | "zesty" | "quirky";
+    onClick?: (event: PointerEvent) => void;
+} | undefined]>;

package/x/views/button/view.js

@@ -0,0 +1,23 @@
+import { html } from "lit";
+import { shadow, useCss, useName, useAttrs } from "@e280/sly";
+import styleCss from "./style.css.js";
+import { themeCss } from "../../theme/theme.css.js";
+export const ShinyButton = shadow((content, options = {}) => {
+    useName("shiny-button");
+    useCss(themeCss, styleCss);
+    const attrs = useAttrs({
+        hidden: Boolean,
+        disabled: Boolean,
+    });
+    return html `
+		<button
+			part=button
+			data-vibe="${options.vibe ?? "calm"}"
+			?disabled="${attrs.disabled}"
+			?hidden="${attrs.hidden}"
+			@click="${options.onClick}">
+			<slot>${content}</slot>
+		</button>
+	`;
+});
+//# sourceMappingURL=view.js.map

package/x/views/button/view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view.js","sourceRoot":"","sources":["../../../s/views/button/view.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAU,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAC,MAAM,WAAW,CAAA;AAEpE,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AACrC,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAA;AAEjD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,OAAiB,EAAE,UAGjD,EAAE,EAAE,EAAE;IAEV,OAAO,CAAC,cAAc,CAAC,CAAA;IACvB,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;IAE1B,MAAM,KAAK,GAAG,QAAQ,CAAC;QACtB,MAAM,EAAE,OAAO;QACf,QAAQ,EAAE,OAAO;KACjB,CAAC,CAAA;IAEF,OAAO,IAAI,CAAA;;;gBAGI,OAAO,CAAC,IAAI,IAAI,MAAM;gBACtB,KAAK,CAAC,QAAQ;cAChB,KAAK,CAAC,MAAM;aACb,OAAO,CAAC,OAAO;WACjB,OAAO;;EAEhB,CAAA;AACF,CAAC,CAAC,CAAA"}

package/x/views/copy/parts/copy-status.d.ts

@@ -0,0 +1 @@
+export type CopyStatus = "neutral" | "good" | "bad" | "invalid";

package/x/views/copy/parts/copy-status.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=copy-status.js.map

package/x/views/copy/parts/copy-status.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-status.js","sourceRoot":"","sources":["../../../../s/views/copy/parts/copy-status.ts"],"names":[],"mappings":""}

package/x/views/copy/parts/determine-base-status.d.ts

@@ -0,0 +1 @@
+export declare function determineBaseStatus(text: string | undefined): "neutral" | "invalid";

package/x/views/copy/parts/determine-base-status.js

@@ -0,0 +1,6 @@
+export function determineBaseStatus(text) {
+    return text === undefined
+        ? "invalid"
+        : "neutral";
+}
+//# sourceMappingURL=determine-base-status.js.map

package/x/views/copy/parts/determine-base-status.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"determine-base-status.js","sourceRoot":"","sources":["../../../../s/views/copy/parts/determine-base-status.ts"],"names":[],"mappings":"AACA,MAAM,UAAU,mBAAmB,CAAC,IAAwB;IAC3D,OAAO,IAAI,KAAK,SAAS;QACxB,CAAC,CAAC,SAAS;QACX,CAAC,CAAC,SAAS,CAAA;AACb,CAAC"}

package/x/views/copy/parts/use-copier.d.ts

@@ -0,0 +1,6 @@
+import { CopyStatus } from "./copy-status.js";
+export declare function useCopier(text: string | undefined, ms: number): {
+    reset: import("@e280/stz").DebounceReturn<() => Promise<CopyStatus>>;
+    flash: (status: CopyStatus) => Promise<void>;
+    status: CopyStatus;
+};

package/x/views/copy/parts/use-copier.js

@@ -0,0 +1,13 @@
+import { debounce } from "@e280/stz";
+import { useOnce, useSignal } from "@e280/sly";
+import { determineBaseStatus } from "./determine-base-status.js";
+export function useCopier(text, ms) {
+    const $status = useSignal(determineBaseStatus(text));
+    const reset = useOnce(() => debounce(ms, () => $status.set(determineBaseStatus(text))));
+    const flash = useOnce(() => async (status) => {
+        await $status.set(status);
+        await reset();
+    });
+    return { reset, flash, status: $status() };
+}
+//# sourceMappingURL=use-copier.js.map

package/x/views/copy/parts/use-copier.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-copier.js","sourceRoot":"","sources":["../../../../s/views/copy/parts/use-copier.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAC,MAAM,WAAW,CAAA;AAClC,OAAO,EAAC,OAAO,EAAE,SAAS,EAAC,MAAM,WAAW,CAAA;AAG5C,OAAO,EAAC,mBAAmB,EAAC,MAAM,4BAA4B,CAAA;AAE9D,MAAM,UAAU,SAAS,CAAC,IAAwB,EAAE,EAAU;IAC7D,MAAM,OAAO,GAAG,SAAS,CAAa,mBAAmB,CAAC,IAAI,CAAC,CAAC,CAAA;IAEhE,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAA;IAEvF,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,KAAK,EAAC,MAAkB,EAAE,EAAE;QACvD,MAAM,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;QACzB,MAAM,KAAK,EAAE,CAAA;IACd,CAAC,CAAC,CAAA;IAEF,OAAO,EAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,EAAC,CAAA;AACzC,CAAC"}

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

@@ -0,0 +1 @@
+export declare const copyShowcase: () => import("@e280/sly").Content;

package/x/views/copy/showcase.js

@@ -0,0 +1,51 @@
+import { css, html } from "lit";
+import { ShinyCopy } from "./view.js";
+import { exhibit } from "../../demo/parts/exhibit.js";
+import { Showcase } from "../../demo/views/showcase/view.js";
+export const copyShowcase = () => Showcase("ShinyCopy", [
+    exhibit({
+        name: "normal",
+        explain: "click-to-copy button.",
+        render: () => ShinyCopy("hello world"),
+        styleboxCss: css `
+			:host {
+				font-size: 5em;
+			}
+		`,
+        js: `
+			ShinyCopy("hello world")
+		`,
+        css: css `
+			[view="shiny-copy"] {
+				--shiny-happy: #0fa;
+				--shiny-angry: #f50;
+				--shiny-lame: #8888;
+				--shiny-inactive-opacity: 0.5;
+			}
+		`,
+    }),
+    exhibit({
+        name: "fail",
+        explain: html `
+			<p>click-to-copy button. <em>deliberately fails so you can see.</em></p>
+		`,
+        render: () => ShinyCopy("hello world", { fail: true }),
+        styleboxCss: css `
+			:host {
+				font-size: 4em;
+			}
+		`,
+        js: `
+			ShinyCopy("hello world", {fail: true})
+		`,
+        css: css `
+			[view="shiny-copy"] {
+				--shiny-happy: #0fa;
+				--shiny-angry: #f50;
+				--shiny-lame: #8888;
+				--shiny-inactive-opacity: 0.5;
+			}
+		`,
+    }),
+]);
+//# sourceMappingURL=showcase.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"showcase.js","sourceRoot":"","sources":["../../../s/views/copy/showcase.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,SAAS,EAAC,MAAM,WAAW,CAAA;AACnC,OAAO,EAAC,OAAO,EAAC,MAAM,6BAA6B,CAAA;AACnD,OAAO,EAAC,QAAQ,EAAC,MAAM,mCAAmC,CAAA;AAE1D,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,WAAW,EAAE;IACvD,OAAO,CAAC;QACP,IAAI,EAAE,QAAQ;QACd,OAAO,EAAE,uBAAuB;QAChC,MAAM,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,aAAa,CAAC;QACtC,WAAW,EAAE,GAAG,CAAA;;;;GAIf;QACD,EAAE,EAAE;;GAEH;QACD,GAAG,EAAE,GAAG,CAAA;;;;;;;GAOP;KACD,CAAC;IAEF,OAAO,CAAC;QACP,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,IAAI,CAAA;;GAEZ;QACD,MAAM,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,aAAa,EAAE,EAAC,IAAI,EAAE,IAAI,EAAC,CAAC;QACpD,WAAW,EAAE,GAAG,CAAA;;;;GAIf;QACD,EAAE,EAAE;;GAEH;QACD,GAAG,EAAE,GAAG,CAAA;;;;;;;GAOP;KACD,CAAC;CACF,CAAC,CAAA"}

package/x/views/copy/style.css.d.ts

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

package/x/{ui → views}/copy/style.css.js

@@ -1,5 +1,5 @@
 import { css } from "lit";
-export default css `
+export default css `@layer view {
 
 button {
 	background: transparent;
@@ -8,31 +8,36 @@ button {
 }
 
 button {
-	opacity: 0.5;
-	cursor: pointer;
-	cursor: copy;
+	opacity: var(--inactive-opacity);
+	display: flex;
+	align-items: center;
 
+	cursor: copy;
 	color: inherit;
-	transition: all 300ms linear;
+	transition: all var(--anim-duration) linear;
 
 	&:is(:hover, :focus-visible) {
 		opacity: 1;
 	}
+
+	> span {
+		display: flex;
+	}
 }
 
 [data-status="invalid"] {
-	color: var(--invalid);
+	color: var(--lame);
 }
 
 [data-status="good"] {
 	opacity: 1;
-	color: var(--good);
+	color: var(--happy);
 	filter: drop-shadow(0 0 0.3em color-mix(in oklab, transparent, currentColor 50%));
 }
 
 [data-status="bad"] {
 	opacity: 1;
-	color: var(--bad);
+	color: var(--angry);
 	filter: drop-shadow(0 0 0.3em color-mix(in oklab, transparent, currentColor 50%));
 }
 
@@ -41,5 +46,5 @@ svg {
 	height: 1em;
 }
 
-`;
+}`;
 //# sourceMappingURL=style.css.js.map

package/x/views/copy/style.css.js.map

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

package/x/views/copy/view.d.ts

@@ -0,0 +1,4 @@
+export declare const ShinyCopy: import("@e280/sly").ShadowView<[text: string | undefined, options?: {
+    ms?: number;
+    fail?: boolean;
+} | undefined]>;

package/x/views/copy/view.js

@@ -0,0 +1,49 @@
+import { html } from "lit";
+import { shadow, useCss, useName } from "@e280/sly";
+import styleCss from "./style.css.js";
+import clipboardSvg from "../../icons/tabler/clipboard.svg.js";
+import clipboardXFilledSvg from "../../icons/tabler/clipboard-x-filled.svg.js";
+import clipboardCheckFilledSvg from "../../icons/tabler/clipboard-check-filled.svg.js";
+import { useCopier } from "./parts/use-copier.js";
+import { themeCss } from "../../theme/theme.css.js";
+export const ShinyCopy = shadow((text, options = {}) => {
+    useName("shiny-copy");
+    useCss(themeCss, styleCss);
+    const copier = useCopier(text, options.ms ?? 1000);
+    async function click() {
+        if (text === undefined)
+            return;
+        try {
+            if (options.fail)
+                throw new Error("copy failed on purpose for testing purposes");
+            await navigator.clipboard.writeText(text);
+            await copier.flash("good");
+        }
+        catch (error) {
+            console.error(error);
+            await copier.flash("bad");
+        }
+    }
+    return html `
+		<button data-status="${copier.status}" @click="${click}" part=button>
+			<span part=icon>
+				${(() => {
+        switch (copier.status) {
+            case "neutral":
+                return clipboardSvg;
+            case "invalid":
+                return clipboardSvg;
+            case "good":
+                return clipboardCheckFilledSvg;
+            case "bad":
+                return clipboardXFilledSvg;
+            default:
+                throw new Error(`unknown copy status`);
+        }
+    })()}
+			</span>
+			<slot></slot>
+		</button>
+	`;
+});
+//# sourceMappingURL=view.js.map

package/x/views/copy/view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view.js","sourceRoot":"","sources":["../../../s/views/copy/view.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAC,MAAM,WAAW,CAAA;AAEjD,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AACrC,OAAO,YAAY,MAAM,qCAAqC,CAAA;AAC9D,OAAO,mBAAmB,MAAM,8CAA8C,CAAA;AAC9E,OAAO,uBAAuB,MAAM,kDAAkD,CAAA;AAEtF,OAAO,EAAC,SAAS,EAAC,MAAM,uBAAuB,CAAA;AAC/C,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAA;AAEjD,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,CAC9B,IAAwB,EACxB,UAAyC,EAAE,EAC1C,EAAE;IAEJ,OAAO,CAAC,YAAY,CAAC,CAAA;IACrB,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;IAC1B,MAAM,MAAM,GAAG,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,EAAE,IAAI,IAAI,CAAC,CAAA;IAElD,KAAK,UAAU,KAAK;QACnB,IAAI,IAAI,KAAK,SAAS;YAAE,OAAM;QAC9B,IAAI,CAAC;YACJ,IAAI,OAAO,CAAC,IAAI;gBACf,MAAM,IAAI,KAAK,CAAC,6CAA6C,CAAC,CAAA;YAC/D,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;YACzC,MAAM,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;QAC3B,CAAC;QACD,OAAO,KAAK,EAAE,CAAC;YACd,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;YACpB,MAAM,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QAC1B,CAAC;IACF,CAAC;IAED,OAAO,IAAI,CAAA;yBACa,MAAM,CAAC,MAAM,aAAa,KAAK;;MAElD,CAAC,GAAG,EAAE;QAAE,QAAQ,MAAM,CAAC,MAAM,EAAE,CAAC;YACjC,KAAK,SAAS;gBACb,OAAO,YAAY,CAAA;YAEpB,KAAK,SAAS;gBACb,OAAO,YAAY,CAAA;YAEpB,KAAK,MAAM;gBACV,OAAO,uBAAuB,CAAA;YAE/B,KAAK,KAAK;gBACT,OAAO,mBAAmB,CAAA;YAE3B;gBACC,MAAM,IAAI,KAAK,CAAC,qBAAqB,CAAC,CAAA;QACxC,CAAC;IAAA,CAAC,CAAC,EAAE;;;;EAIP,CAAA;AACF,CAAC,CAAC,CAAA"}

package/x/views/drawer/control.d.ts

@@ -0,0 +1,9 @@
+export declare class DrawerControl {
+    $open: import("@e280/strata").Signal<boolean>;
+    constructor(startOpen?: boolean);
+    get isOpen(): boolean;
+    setOpen(value: boolean): Promise<boolean>;
+    open: () => Promise<void>;
+    close: () => Promise<void>;
+    toggle: () => Promise<boolean>;
+}

package/x/views/drawer/control.js

@@ -0,0 +1,24 @@
+import { signal } from "@e280/strata";
+export class DrawerControl {
+    $open = signal(false);
+    constructor(startOpen = false) {
+        if (startOpen)
+            this.$open.set(true);
+    }
+    get isOpen() {
+        return this.$open.get();
+    }
+    async setOpen(value) {
+        return this.$open.set(value);
+    }
+    open = async () => {
+        await this.setOpen(true);
+    };
+    close = async () => {
+        await this.setOpen(false);
+    };
+    toggle = async () => {
+        return this.setOpen(!this.isOpen);
+    };
+}
+//# sourceMappingURL=control.js.map

package/x/views/drawer/control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"control.js","sourceRoot":"","sources":["../../../s/views/drawer/control.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAA;AAEnC,MAAM,OAAO,aAAa;IACzB,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAErB,YAAY,SAAS,GAAG,KAAK;QAC5B,IAAI,SAAS;YAAE,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;IACpC,CAAC;IAED,IAAI,MAAM;QACT,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAA;IACxB,CAAC;IAED,KAAK,CAAC,OAAO,CAAC,KAAc;QAC3B,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;IAC7B,CAAC;IAED,IAAI,GAAG,KAAK,IAAG,EAAE;QAChB,MAAM,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;IACzB,CAAC,CAAA;IAED,KAAK,GAAG,KAAK,IAAG,EAAE;QACjB,MAAM,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;IAC1B,CAAC,CAAA;IAED,MAAM,GAAG,KAAK,IAAG,EAAE;QAClB,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IAClC,CAAC,CAAA;CACD"}

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

@@ -0,0 +1 @@
+export declare const drawerShowcase: () => import("@e280/sly").Content;

package/x/views/drawer/showcase.js

@@ -0,0 +1,75 @@
+import { css, html } from "lit";
+import { ShinyDrawer } from "./view.js";
+import { lipsum } from "../../demo/utils/lipsum.js";
+import { exhibit } from "../../demo/parts/exhibit.js";
+import { Showcase } from "../../demo/views/showcase/view.js";
+const styleboxCss = css `
+	:host {
+		font-size: 1em;
+		width: 100%;
+		min-height: 100%;
+	}
+	p + p {
+		margin-top: var(--padding);
+	}
+`;
+const customCss = css `
+	[slot=plate] { padding-top: 2em; }
+	[view="shiny-drawer"] {
+		--slate-bg: color-mix(in oklch, var(--calm), #444);
+		&::part(slate) { padding: 1em; }
+		&:state(left)::part(slate) { border-bottom-right-radius: 0.5em; }
+		&:state(right)::part(slate) { border-bottom-left-radius: 0.5em; }
+	}
+`;
+const render = (side) => (ShinyDrawer.with({
+    props: [{ button: true, side }],
+    children: html `
+			<header>${lipsum.takeFirst()}</header>
+			<section slot=plate>
+				<p>${lipsum.takeFirst()}</p>
+				<p>${lipsum.takeFirst()}</p>
+			</section>
+		`,
+}));
+export const drawerShowcase = () => Showcase("ShinyDrawer", [
+    exhibit({
+        name: "left",
+        explain: "slide-out panel. button optional.",
+        styleboxCss,
+        css: customCss,
+        render: () => render("left"),
+        js: `
+			ShinyDrawer.with({
+				props: [{button: true, side: "left"}],
+				children: html\`
+					<header>lorem kettlebell..</header>
+					<section slot=plate>
+						<p>lorem protein..</p>
+						<p>lorem caffeine..</p>
+					</section>
+				\`,
+			})
+		`,
+    }),
+    exhibit({
+        name: "right",
+        explain: "slide-out panel. button optional.",
+        styleboxCss,
+        css: customCss,
+        render: () => render("right"),
+        js: `
+			ShinyDrawer.with({
+				props: [{button: true, side: "right"}],
+				children: html\`
+					<header>lorem kettlebell..</header>
+					<section slot=plate>
+						<p>lorem protein..</p>
+						<p>lorem caffeine..</p>
+					</section>
+				\`,
+			})
+		`,
+    }),
+]);
+//# sourceMappingURL=showcase.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"showcase.js","sourceRoot":"","sources":["../../../s/views/drawer/showcase.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,WAAW,EAAC,MAAM,WAAW,CAAA;AACrC,OAAO,EAAC,MAAM,EAAC,MAAM,4BAA4B,CAAA;AACjD,OAAO,EAAC,OAAO,EAAC,MAAM,6BAA6B,CAAA;AACnD,OAAO,EAAC,QAAQ,EAAC,MAAM,mCAAmC,CAAA;AAE1D,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;CAStB,CAAA;AAED,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;;;CAQpB,CAAA;AAED,MAAM,MAAM,GAAG,CAAC,IAAsB,EAAE,EAAE,CAAC,CAC1C,WAAW,CAAC,IAAI,CAAC;IAChB,KAAK,EAAE,CAAC,EAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAC,CAAC;IAC7B,QAAQ,EAAE,IAAI,CAAA;aACH,MAAM,CAAC,SAAS,EAAE;;SAEtB,MAAM,CAAC,SAAS,EAAE;SAClB,MAAM,CAAC,SAAS,EAAE;;GAExB;CACD,CAAC,CACF,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,aAAa,EAAE;IAC3D,OAAO,CAAC;QACP,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,mCAAmC;QAC5C,WAAW;QACX,GAAG,EAAE,SAAS;QACd,MAAM,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC;QAC5B,EAAE,EAAE;;;;;;;;;;;GAWH;KACD,CAAC;IAEF,OAAO,CAAC;QACP,IAAI,EAAE,OAAO;QACb,OAAO,EAAE,mCAAmC;QAC5C,WAAW;QACX,GAAG,EAAE,SAAS;QACd,MAAM,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC;QAC7B,EAAE,EAAE;;;;;;;;;;;GAWH;KACD,CAAC;CACF,CAAC,CAAA"}

package/x/views/drawer/style.css.d.ts

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

package/x/views/drawer/style.css.js

@@ -0,0 +1,127 @@
+import { css } from "lit";
+export default css `@layer view {
+
+:host {
+	display: block;
+	width: 100%;
+	height: 100%;
+
+	--slate-bg: transparent;
+	--button-size: 2em;
+	--blanket-backdrop-filter: blur(0.5em);
+	--slate-hidden-opacity: 1;
+	--blanket-bg: color-mix(in oklab, transparent, var(--bg));
+}
+
+.shell {
+	position: relative;
+	width: 100%;
+	height: 100%;
+
+	[part="blanket"] {
+		opacity: 0;
+
+		content: "";
+		display: block;
+		position: absolute;
+		inset: 0;
+
+		background: var(--blanket-bg);
+		backdrop-filter: var(--blanket-backdrop-filter);
+
+		will-change: opacity;
+		transition: all var(--anim-duration) ease;
+	}
+
+	.clipper {
+		pointer-events: none;
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		> * { pointer-events: all; }
+	}
+
+	[part="tray"] {
+		position: absolute;
+		top: 0;
+		width: calc(100% - var(--button-size));
+
+		display: flex;
+		flex-direction: column;
+		height: auto;
+		max-height: 100%;
+
+		transform: translateX(-100%);
+		will-change: opacity, transform;
+		transition: all var(--anim-duration) ease;
+
+		> [part="slate"] {
+			opacity: var(--slate-hidden-opacity);
+			will-change: opacity;
+			transition: opacity var(--anim-duration) ease;
+
+			display: block;
+			height: 100%;
+			overflow-y: auto;
+			background: var(--slate-bg);
+		}
+
+		> button {
+			position: absolute;
+			top: 0;
+			left: 100%;
+
+			opacity: var(--inactive-opacity);
+			background: transparent;
+			border: none;
+			cursor: pointer;
+
+			&:is(:hover, :focus-visible) {
+				opacity: 1;
+			}
+
+			> slot {
+				display: contents;
+			}
+
+			svg {
+				width: var(--button-size);
+				height: var(--button-size);
+			}
+		}
+	}
+
+	&[data-side="right"] {
+		[part="tray"] {
+			right: 0;
+			transform: translateX(100%);
+			> button {
+				left: unset;
+				right: 100%;
+			}
+		}
+	}
+
+	slot[name="plate"] {
+		display: block;
+		width: 100%;
+		height: 100%;
+	}
+
+	&[data-open] {
+		[part="blanket"] {
+			opacity: 1;
+		}
+		[part="tray"] {
+			transform: translateX(0%);
+			> [part="slate"] {
+				opacity: 1;
+			}
+		}
+	}
+}
+
+}`;
+//# sourceMappingURL=style.css.js.map

package/x/views/drawer/style.css.js.map

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

package/x/views/drawer/view.d.ts

@@ -0,0 +1,6 @@
+import { DrawerControl } from "./control.js";
+export declare const ShinyDrawer: import("@e280/sly").ShadowView<[options?: {
+    button?: boolean;
+    side?: "left" | "right";
+    control?: DrawerControl;
+} | undefined]>;