@e280/shiny 0.1.0-14 → 0.1.0-16

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,4 @@
+import { Content } from "@e280/sly";
+export declare const ShinyButton: import("@e280/sly").ShadowView<[content?: Content, options?: {
+    vibe?: "calm" | "lame" | "happy" | "sad" | "angry" | "zesty" | "quirky";
+} | undefined]>;

package/x/views/button/view.js

@@ -0,0 +1,22 @@
+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}">
+			<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,UAEjD,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;WACf,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.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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0ChB,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,47 @@
+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}">
+			${(() => {
+        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`);
+        }
+    })()}
+			<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;KACnD,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;;;EAGN,CAAA;AACF,CAAC,CAAC,CAAA"}

package/x/{components → views}/drawer/control.d.ts

@@ -1,5 +1,5 @@
 export declare class DrawerControl {
-    $open: import("@e280/strata").SignalFn<boolean>;
+    $open: import("@e280/strata").Signal<boolean>;
     constructor(startOpen?: boolean);
     get isOpen(): boolean;
     setOpen(value: boolean): Promise<boolean>;

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/{components → views}/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);

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]>;

package/x/views/drawer/view.js

@@ -0,0 +1,60 @@
+import { html } from "lit";
+import { dom, shadow, useAttrs, useCss, useHost, useMount, useName, useOnce } from "@e280/sly";
+import styleCss from "./style.css.js";
+import { themeCss } from "../../theme/theme.css.js";
+import { DrawerControl } from "./control.js";
+import { States } from "../../utils/states.js";
+import xSvg from "../../icons/tabler/x.svg.js";
+import menu2Svg from "../../icons/tabler/menu-2.svg.js";
+export const ShinyDrawer = shadow((options = {}) => {
+    useName("shiny-drawer");
+    useCss(themeCss, styleCss);
+    const host = useHost();
+    const states = useOnce(() => new States(host));
+    const control = useOnce(() => (options.control ?? new DrawerControl()));
+    const attrs = useAttrs({
+        side: String,
+        button: Boolean,
+        open: Boolean,
+    });
+    attrs.open = control.isOpen;
+    const button = options.button ?? attrs.button;
+    const side = options.side ?? (attrs.side === "right" ? "right" : "left");
+    states.assign(side, control.isOpen ? "opened" : "closed");
+    useMount(() => dom.events(window, { keydown: (event) => {
+            if (event.code === "Escape")
+                control.close();
+        } }));
+    function renderButton() {
+        return html `
+			<button part=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="${control.isOpen}" data-side="${side}">
+			<slot name=plate ?inert="${control.isOpen}"></slot>
+
+			<div class=clipper>
+				<div part=blanket @click="${control.close}" ?inert="${!control.isOpen}"></div>
+
+				<div part=tray>
+					<slot part=slate ?inert="${!control.isOpen}"></slot>
+					${button ? renderButton() : null}
+				</div>
+			</div>
+		</div>
+	`;
+});
+//# sourceMappingURL=view.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"view.js","sourceRoot":"","sources":["../../../s/views/drawer/view.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAC,MAAM,WAAW,CAAA;AAE5F,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AAErC,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAA;AACjD,OAAO,EAAC,aAAa,EAAC,MAAM,cAAc,CAAA;AAC1C,OAAO,EAAC,MAAM,EAAC,MAAM,uBAAuB,CAAA;AAC5C,OAAO,IAAI,MAAM,6BAA6B,CAAA;AAC9C,OAAO,QAAQ,MAAM,kCAAkC,CAAA;AAEvD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,UAI9B,EAAE,EAAE,EAAE;IAEV,OAAO,CAAC,cAAc,CAAC,CAAA;IACvB,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;IAE1B,MAAM,IAAI,GAAG,OAAO,EAAE,CAAA;IACtB,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAA;IAC9C,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,IAAI,IAAI,aAAa,EAAE,CAAC,CAAC,CAAA;IAEvE,MAAM,KAAK,GAAG,QAAQ,CAAC;QACtB,IAAI,EAAE,MAAM;QACZ,MAAM,EAAE,OAAO;QACf,IAAI,EAAE,OAAO;KACb,CAAC,CAAA;IAEF,KAAK,CAAC,IAAI,GAAG,OAAO,CAAC,MAAM,CAAA;IAE3B,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,IAAI,KAAK,CAAC,MAAM,CAAA;IAC7C,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;IACxE,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAA;IAEzD,QAAQ,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,EAAC,OAAO,EAAE,CAAC,KAAoB,EAAE,EAAE;YACpE,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ;gBAC1B,OAAO,CAAC,KAAK,EAAE,CAAA;QACjB,CAAC,EAAC,CAAC,CAAC,CAAA;IAEJ,SAAS,YAAY;QACpB,OAAO,IAAI,CAAA;iCACoB,OAAO,CAAC,MAAM;MACzC,OAAO,CAAC,MAAM;YACf,CAAC,CAAC,IAAI,CAAA;;SAEF,IAAI;;MAEP;YACD,CAAC,CAAC,IAAI,CAAA;;SAEF,QAAQ;;MAEX;;GAEH,CAAA;IACF,CAAC;IAED,OAAO,IAAI,CAAA;iCACqB,OAAO,CAAC,MAAM,gBAAgB,IAAI;8BACrC,OAAO,CAAC,MAAM;;;gCAGZ,OAAO,CAAC,KAAK,aAAa,CAAC,OAAO,CAAC,MAAM;;;gCAGzC,CAAC,OAAO,CAAC,MAAM;OACxC,MAAM,CAAC,CAAC,CAAA,YAAY,EAAE,CAAC,CAAC,CAAA,IAAI;;;;EAIjC,CAAA;AACF,CAAC,CAAC,CAAA"}

package/x/{components → views}/tabs/control.d.ts

@@ -1,6 +1,6 @@
-export declare class TabControl {
+export declare class TabsControl {
     length: number;
-    $index: import("@e280/strata").SignalFn<number>;
+    $index: import("@e280/strata").Signal<number>;
     constructor(start?: number);
     clamp(index: number): number;
     get index(): number;

package/x/{components → views}/tabs/control.js

@@ -1,5 +1,5 @@
 import { signal } from "@e280/strata";
-export class TabControl {
+export class TabsControl {
     length = 1;
     $index = signal(0);
     constructor(start = 0) {
@@ -11,10 +11,10 @@ export class TabControl {
         return index;
     }
     get index() {
-        return this.clamp(this.$index.get());
+        return this.clamp(this.$index());
     }
     async setIndex(index) {
-        return this.$index.set(index);
+        return this.$index(index);
     }
     async shimmy(delta) {
         const index = this.clamp(this.index + delta);

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

@@ -0,0 +1 @@
+{"version":3,"file":"control.js","sourceRoot":"","sources":["../../../s/views/tabs/control.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAA;AAEnC,MAAM,OAAO,WAAW;IACvB,MAAM,GAAG,CAAC,CAAA;IACV,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;IAElB,YAAY,KAAK,GAAG,CAAC;QACpB,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,KAAK,CAAA;IAC1B,CAAC;IAED,KAAK,CAAC,KAAa;QAClB,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA;QACxC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;QAC1B,OAAO,KAAK,CAAA;IACb,CAAC;IAED,IAAI,KAAK;QACR,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAA;IACjC,CAAC;IAED,KAAK,CAAC,QAAQ,CAAC,KAAa;QAC3B,OAAO,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;IAC1B,CAAC;IAED,KAAK,CAAC,MAAM,CAAC,KAAa;QACzB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,CAAA;QAC5C,OAAO,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC5B,CAAC;CACD"}

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

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

package/x/views/tabs/showcase.js

@@ -0,0 +1,86 @@
+import { css, html } from "lit";
+import { ShinyTabs } from "./view.js";
+import { ShinyButton } from "../button/view.js";
+import { lipsum } from "../../demo/utils/lipsum.js";
+import { exhibit } from "../../demo/parts/exhibit.js";
+import { Showcase } from "../../demo/views/showcase/view.js";
+export const tabsShowcase = () => Showcase("ShinyTabs", [
+    exhibit({
+        name: "shiny",
+        explain: "a button-bar of mutually-exclusive tabs. panels are optional.",
+        render: () => ShinyTabs.with({
+            props: [{ snug: true }],
+            children: html `
+				${ShinyButton("alpha")}
+				${ShinyButton("bravo")}
+				${ShinyButton("charlie")}
+				<p slot=panel>${lipsum.takeFirst()}</p>
+				<p slot=panel>${lipsum.takeFirst()}</p>
+				<p slot=panel>${lipsum.takeFirst()}</p>
+			`,
+        }),
+        styleboxCss: css `
+			[view="shiny-button"] { font-size: 1.5em; }
+			p { margin-top: var(--padding); }
+		`,
+        js: `
+			ShinyTabs.with({
+				props: [{snug: true}],
+				children: html\`
+					\${ShinyButton("alpha")}
+					\${ShinyButton("bravo")}
+					\${ShinyButton("charlie")}
+					<p slot=panel>lorem kettlebell..</p>
+					<p slot=panel>lorem protein..</p>
+					<p slot=panel>lorem caffeine..</p>
+				\`,
+			})
+		`,
+        css: css `
+			[view="shiny-tabs"] {
+				--shiny-rounded: 0.5em;
+			}
+		`,
+    }),
+    exhibit({
+        name: "plain",
+        explain: "a button-bar of mutually-exclusive tabs. panels are optional.",
+        render: () => ShinyTabs.with({
+            props: [{ snug: true }],
+            children: html `
+				<button>alpha</button>
+				<button>bravo</button>
+				<button>charlie</button>
+				<p slot=panel>${lipsum.takeFirst()}</p>
+				<p slot=panel>${lipsum.takeFirst()}</p>
+				<p slot=panel>${lipsum.takeFirst()}</p>
+			`,
+        }),
+        styleboxCss: css `
+			p { margin-top: var(--padding); }
+			button {
+				font-size: 1.5em;
+				padding: calc(var(--padding) / 2);
+			}
+		`,
+        js: `
+			ShinyTabs.with({
+				props: [{snug: true}],
+				children: html\`
+					<button>alpha</button>
+					<button>bravo</button>
+					<button>charlie</button>
+					<p slot=panel>lorem kettlebell..</p>
+					<p slot=panel>lorem protein..</p>
+					<p slot=panel>lorem caffeine..</p>
+				\`,
+			})
+		`,
+        css: css `
+			[view="shiny-tabs"] {
+				--shiny-rounded: 0.5em;
+			}
+		`,
+    }),
+]);
+//# sourceMappingURL=showcase.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"showcase.js","sourceRoot":"","sources":["../../../s/views/tabs/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,WAAW,EAAC,MAAM,mBAAmB,CAAA;AAC7C,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,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,WAAW,EAAE;IACvD,OAAO,CAAC;QACP,IAAI,EAAE,OAAO;QACb,OAAO,EAAE,+DAA+D;QACxE,MAAM,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC;YAC5B,KAAK,EAAE,CAAC,EAAC,IAAI,EAAE,IAAI,EAAC,CAAC;YACrB,QAAQ,EAAE,IAAI,CAAA;MACX,WAAW,CAAC,OAAO,CAAC;MACpB,WAAW,CAAC,OAAO,CAAC;MACpB,WAAW,CAAC,SAAS,CAAC;oBACR,MAAM,CAAC,SAAS,EAAE;oBAClB,MAAM,CAAC,SAAS,EAAE;oBAClB,MAAM,CAAC,SAAS,EAAE;IAClC;SACD,CAAC;QACF,WAAW,EAAE,GAAG,CAAA;;;GAGf;QACD,EAAE,EAAE;;;;;;;;;;;;GAYH;QACD,GAAG,EAAE,GAAG,CAAA;;;;GAIP;KACD,CAAC;IAEF,OAAO,CAAC;QACP,IAAI,EAAE,OAAO;QACb,OAAO,EAAE,+DAA+D;QACxE,MAAM,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC;YAC5B,KAAK,EAAE,CAAC,EAAC,IAAI,EAAE,IAAI,EAAC,CAAC;YACrB,QAAQ,EAAE,IAAI,CAAA;;;;oBAIG,MAAM,CAAC,SAAS,EAAE;oBAClB,MAAM,CAAC,SAAS,EAAE;oBAClB,MAAM,CAAC,SAAS,EAAE;IAClC;SACD,CAAC;QACF,WAAW,EAAE,GAAG,CAAA;;;;;;GAMf;QACD,EAAE,EAAE;;;;;;;;;;;;GAYH;QACD,GAAG,EAAE,GAAG,CAAA;;;;GAIP;KACD,CAAC;CACF,CAAC,CAAA"}