@e280/shiny 0.1.0-1 → 0.1.0-11

package/s/index.ts

@@ -1,7 +1,19 @@
 
 export * from "./themes/index.js"
-export * from "./ui/example/component.js"
-export * from "./ui/copy/component.js"
-export * from "./ui/themers.js"
-export * from "./ui/components.js"
+
+export * from "./components/copy/component.js"
+
+export * from "./components/drawer/component.js"
+export * from "./components/drawer/control.js"
+
+export * from "./components/example/component.js"
+
+export * from "./components/tabs/component.js"
+export * from "./components/tabs/control.js"
+
+export * from "./components/foundation.css.js"
+export * from "./components/framework.js"
+export * from "./components/raw-components.js"
+
+export * from "./shiny.js"
 

package/s/install/aura.bundle.ts

@@ -0,0 +1,9 @@
+
+import {dom} from "@e280/sly"
+import {shiny} from "../shiny.js"
+import {aura} from "../themes/aura.css.js"
+
+dom.register(
+	shiny({theme: aura}).components
+)
+

package/s/install/plain.bundle.ts

@@ -0,0 +1,9 @@
+
+import {dom} from "@e280/sly"
+import {shiny} from "../shiny.js"
+import {plain} from "../themes/plain.css.js"
+
+dom.register(
+	shiny({theme: plain}).components
+)
+

package/s/shiny.ts

@@ -0,0 +1,15 @@
+
+import {contextualizeComponents, getViews} from "@e280/sly"
+import {ShinyContext} from "./components/framework.js"
+import {rawComponents} from "./components/raw-components.js"
+
+export function shiny(context: ShinyContext) {
+	const components = contextualizeComponents(context, rawComponents)
+	const views = getViews(components)
+	return {components, views}
+}
+
+export type Shiny = ReturnType<typeof shiny>
+export type ShinyViews = Shiny["views"]
+export type ShinyComponents = Shiny["components"]
+

package/s/themes/aura.css.ts

@@ -0,0 +1,86 @@
+
+import {css} from "lit"
+import {defaultCssVars, renderCssVars} from "./infra/css-vars.js"
+export const aura = css`@layer overlay {
+
+:host {
+	${renderCssVars({
+		...defaultCssVars(),
+	})}
+}
+
+: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"]) {
+	display: block;
+
+	&::part(tray) {
+		padding: 1em;
+		background: linear-gradient(
+			to top right,
+			#00a9dd69,
+			#70ffd77a
+		);
+	}
+}
+
+:host([view="shiny-drawer"]:state(left)) {
+	&::part(tray) {
+		border-bottom-right-radius: 0.5em;
+	}
+}
+
+:host([view="shiny-drawer"]:state(right)) {
+	&::part(tray) {
+		border-bottom-left-radius: 0.5em;
+	}
+}
+
+}`
+

package/s/themes/index.barrel.ts

@@ -1,3 +1,4 @@
 
-export * from "./basic.css.js"
+export * from "./plain.css.js"
+export * from "./aura.css.js"
 

package/s/themes/index.ts

@@ -1,3 +1,4 @@
 
 export * as themes from "./index.barrel.js"
+export type * from "./index.barrel.js"
 

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

@@ -0,0 +1,41 @@
+
+import {unsafeCSS} from "lit"
+
+export type CssVars = {
+	"bg": string
+	"alpha": string
+	"lame": string
+	"inactive-opacity": string
+
+	// normative color vibes
+	"angry": string // red
+	"zesty": string // yellow
+	"happy": string // green
+	"calm": string // cyan
+	"sad": string // blue
+	"quirky": string // magenta
+}
+
+export function defaultCssVars(): CssVars {
+	return {
+		"bg": "#111",
+		"alpha": "#def",
+		"inactive-opacity": "0.5",
+		"lame": "#8888",
+		"angry": "#f50",
+		"zesty": "#cf0",
+		"happy": "#0fa",
+		"calm": "#0af",
+		"sad": "#74f",
+		"quirky": "#f49",
+	}
+}
+
+export function renderCssVars(vars: CssVars) {
+	return unsafeCSS(
+		Object.entries(vars)
+			.map(([key, value]) => `--${key}: var(--shiny-${key}, ${value});`)
+			.join("\n")
+	)
+}
+

package/s/themes/plain.css.ts

@@ -0,0 +1,11 @@
+
+import {css} from "lit"
+import {defaultCssVars, renderCssVars} from "./infra/css-vars.js"
+export const plain = css`@layer overlay {
+
+:host {
+	${renderCssVars(defaultCssVars())}
+}
+
+}`
+

package/s/utils/states.ts

@@ -0,0 +1,15 @@
+
+export class States {
+	#states: Set<string>
+
+	constructor(element: HTMLElement) {
+		this.#states = element.attachInternals().states as any
+	}
+
+	assign(...states: string[]) {
+		this.#states.forEach(s => this.#states.delete(s))
+		for (const s of states) this.#states.add(s)
+		return this
+	}
+}
+

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

@@ -0,0 +1,5 @@
+import { ShinyContext, ShinyElement } from "../framework.js";
+declare const ShinyButton_base: import("@e280/sly").ComponentClass<typeof ShinyElement, [context: ShinyContext]>;
+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) => {
+    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></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,EAAC,IAAI,EAAC,MAAM,WAAW,CAAA;AAC9B,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,EAAE;IACrC,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;;;GAGxB,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/style.css.js

@@ -0,0 +1,63 @@
+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;
+	outline: 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4DhB,CAAA"}

package/x/{ui → components}/copy/component.d.ts

@@ -1,11 +1,15 @@
-import { CSSResult } from "lit";
+import { ShinyContext } from "../framework.js";
 declare const ShinyCopy_base: import("@e280/sly").ComponentClass<{
     new (): {
-        attrs: import("@e280/sly").AttrTypes<{
+        #attrs: import("@e280/sly").AttrTypes<{
             text: StringConstructor;
             ms: NumberConstructor;
         }>;
-        theme: CSSResult;
+        get text(): string | undefined;
+        set text(v: string | undefined);
+        get ms(): number | undefined;
+        set ms(v: number | undefined);
+        context: ShinyContext;
         #private: any;
         readonly shadow: ShadowRoot;
         createShadow(): ShadowRoot;
@@ -366,7 +370,7 @@ declare const ShinyCopy_base: import("@e280/sly").ComponentClass<{
         focus(options?: FocusOptions): void;
     };
     styles: import("lit").CSSResultGroup | undefined;
-}, [theme: CSSResult, text: string | undefined, ms?: any]>;
+}, [context: ShinyContext, text: string | undefined, ms?: any]>;
 export declare class ShinyCopy extends ShinyCopy_base {
 }
 export {};

package/x/{ui → components}/copy/component.js

@@ -1,14 +1,15 @@
+import { html } from "lit";
 import { debounce } from "@e280/stz";
 import { dom, view } from "@e280/sly";
-import { html } from "lit";
 import styleCss from "./style.css.js";
+import { foundationCss } from "../foundation.css.js";
 import { ShinyElement } from "../framework.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";
-export class ShinyCopy extends (view(use => (theme, text, ms = 1000) => {
+export class ShinyCopy extends (view(use => (context, text, ms = 1000) => {
     use.name("shiny-copy");
-    use.styles(theme, styleCss);
+    use.styles(foundationCss, context.theme, styleCss);
     const baseStatus = () => (text === undefined
         ? "invalid"
         : "neutral");
@@ -46,11 +47,15 @@ export class ShinyCopy extends (view(use => (theme, text, ms = 1000) => {
 		`;
 })
     .component(class extends ShinyElement {
-    attrs = dom.attrs(this).spec({
+    #attrs = dom.attrs(this).spec({
         text: String,
         ms: Number,
     });
+    get text() { return this.#attrs.text; }
+    set text(v) { this.#attrs.text = v; }
+    get ms() { return this.#attrs.ms; }
+    set ms(v) { this.#attrs.ms = v; }
 })
-    .props(el => [el.theme, el.attrs.text, el.attrs.ms])) {
+    .props(el => [el.context, el.text, el.ms])) {
 }
 //# sourceMappingURL=component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../s/components/copy/component.ts"],"names":[],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import { css } from "lit";
-export default css `
+export default css `@layer view {
 
 button {
 	background: transparent;
@@ -8,7 +8,7 @@ button {
 }
 
 button {
-	opacity: 0.5;
+	opacity: var(--inactive-opacity);
 	cursor: pointer;
 	cursor: copy;
 
@@ -21,18 +21,18 @@ button {
 }
 
 [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 +41,5 @@ svg {
 	height: 1em;
 }
 
-`;
+}`;
 //# sourceMappingURL=style.css.js.map

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

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