@e280/shiny 0.1.0-10 → 0.1.0-11

package/README.md

@@ -92,13 +92,16 @@
     ```html
     <style>
       html {
-	      --shiny-bg: #111;
-	      --shiny-alpha: #afa;
-	      --shiny-happy: #0fa;
-	      --shiny-sad: #74f;
-	      --shiny-angry: #f50;
-	      --shiny-lame: #8888;
-	      --shiny-inactive-opacity: 0.5;
+        --shiny-bg: #111;
+        --shiny-alpha: #def;
+        --shiny-lame: #8888;
+        --shiny-inactive-opacity: 0.5;
+        --shiny-angry: #f50;
+        --shiny-zesty: #cf0;
+        --shiny-happy: #0fa;
+        --shiny-calm: #0af;
+        --shiny-sad: #74f;
+        --shiny-quirky: #f49;
       }
     </style>
     ```

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@e280/shiny",
-	"version": "0.1.0-10",
+	"version": "0.1.0-11",
 	"description": "✨ web ui components",
 	"license": "MIT",
 	"type": "module",

package/s/components/button/component.ts

@@ -0,0 +1,30 @@
+
+import {html} from "lit"
+import {view} from "@e280/sly"
+import styleCss from "./style.css.js"
+import {foundationCss} from "../foundation.css.js"
+import {ShinyContext, ShinyElement} from "../framework.js"
+
+export class ShinyButton extends (
+	view(use => (context: ShinyContext) => {
+		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] as const)
+) {}
+

package/s/components/button/style.css.ts

@@ -0,0 +1,64 @@
+
+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;
+}
+
+}`
+

package/s/components/raw-components.ts

@@ -1,10 +1,12 @@
 
+import {ShinyButton} from "./button/component.js"
 import {ShinyCopy} from "./copy/component.js"
 import {ShinyDrawer} from "./drawer/component.js"
 import {ShinyExample} from "./example/component.js"
 import {ShinyTabs} from "./tabs/component.js"
 
 export const rawComponents = {
+	ShinyButton,
 	ShinyCopy,
 	ShinyDrawer,
 	ShinyExample,

package/s/components/tabs/component.ts

@@ -29,10 +29,21 @@ export class ShinyTabs extends (
 		attrs.index = control.$index()
 		control.length = $tabs().length
 
+		function isNeighborActive(index: number, delta: number) {
+			const nextIndex = control.clamp(index + delta)
+			if (nextIndex === index) return false
+			return (nextIndex === control.index)
+		}
+
 		for (const [index, tab] of $tabs().entries()) {
 			const active = (index === control.index)
-			dom.attrs(tab).booleans.active = active
-			dom.attrs(tab).booleans.disabled = active
+			const tabAttrs = dom.attrs(tab)
+			tabAttrs.booleans.disabled = active
+			tabAttrs.booleans["data-active"] = active
+			tabAttrs.booleans["data-first"] = (index === 0)
+			tabAttrs.booleans["data-last"] = (index === (control.length - 1))
+			tabAttrs.booleans["data-next-is-active"] = isNeighborActive(index, 1)
+			tabAttrs.booleans["data-previous-is-active"] = isNeighborActive(index, -1)
 			tab.onclick = () => control.setIndex(index)
 		}
 

package/s/components/tabs/control.ts

@@ -9,14 +9,14 @@ export class TabControl {
 		this.$index.value = start
 	}
 
-	#clamp(index: number) {
+	clamp(index: number) {
 		index = Math.min(index, this.length - 1)
 		index = Math.max(index, 0)
 		return index
 	}
 
 	get index() {
-		return this.#clamp(this.$index.get())
+		return this.clamp(this.$index.get())
 	}
 
 	async setIndex(index: number) {
@@ -24,7 +24,7 @@ export class TabControl {
 	}
 
 	async shimmy(delta: number) {
-		const index = this.#clamp(this.index + delta)
+		const index = this.clamp(this.index + delta)
 		return this.setIndex(index)
 	}
 }

package/s/components/tabs/style.css.ts

@@ -2,5 +2,42 @@
 import {css} from "lit"
 export default css`@layer view {
 
-}`
+:host {
+	display: inline-flex;
+	flex-direction: column;
+}
+
+slot[part="tabs"] {
+	display: flex;
+
+	&::slotted(*) {
+		border-radius: 0.3em;
+	}
+
+	&::slotted([data-active]) {
+		opacity: 1;
+		color: currentColor;
+		text-decoration: underline;
+	}
+
+	&::slotted(:not([data-last], [data-next-is-active])) {
+		border-right: none;
+	}
+
+	&::slotted([data-active]:not([data-first])) {
+		border-left: none;
+	}
+
+	&::slotted(:not([data-last])) {
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+	}
+
+	&::slotted(:not([data-first])) {
+		border-top-left-radius: 0;
+		border-bottom-left-radius: 0;
+	}
+}
+
+} `
 

package/s/demo/demo.bundle.ts

@@ -42,7 +42,7 @@ dom.register({ShinyDemo: view.component(use => {
 				font-style: italic;
 			}
 
-			[view="shiny-tabs"] {
+			[view="demo-tabs"] {
 				display: flex;
 			}
 		}
@@ -55,7 +55,143 @@ dom.register({ShinyDemo: view.component(use => {
 
 	const demonstrations = [
 		Demonstration({
-			name: "shiny-copy",
+			name: "button",
+			explain: html`
+				<p>clicky-clacky pressy button.</p>
+			`,
+			snippets: [
+				[labels.html, `
+					<shiny-button>hello</shiny-button>
+				`],
+				[labels.view, `
+					ShinyButton
+						.props()
+						.children("hello")
+						.render()
+				`],
+				[labels.css, `
+					shiny-button {
+						font-size: 1em;
+						--happy: #0fa;
+						--angry: #f50;
+						--lame: #8888;
+						--inactive-opacity: 0.5;
+					}
+				`],
+			],
+			content: [
+				views.ShinyButton.props()
+					.children("button")
+					.render(),
+				views.ShinyButton.props()
+					.attr("gradient", true)
+					.children("gradient")
+					.render(),
+				views.ShinyButton.props()
+					.attr("angry", true)
+					.attr("gradient", true)
+					.children("angry")
+					.render(),
+				views.ShinyButton.props()
+					.attr("happy", true)
+					.attr("gradient", true)
+					.children("happy")
+					.render(),
+				views.ShinyButton.props()
+					.attr("zesty", true)
+					.attr("gradient", true)
+					.children("zesty")
+					.render(),
+				views.ShinyButton.props()
+					.attr("sad", true)
+					.attr("gradient", true)
+					.children("sad")
+					.render(),
+				views.ShinyButton.props()
+					.attr("quirky", true)
+					.attr("gradient", true)
+					.children("quirky")
+					.render(),
+				views.ShinyButton.props()
+					.attr("plain", true)
+					.children("plain")
+					.render(),
+			],
+			style: css`
+				.content {
+					flex-direction: row;
+					flex-wrap: wrap;
+					align-content: center;
+					gap: 0.5em;
+
+					sly-view {
+						font-size: 1.2em;
+					}
+				}
+			`,
+		}),
+
+		Demonstration({
+			name: "tabs",
+			explain: html`
+				<p>button bar. panels optional.</p>
+			`,
+			snippets: [
+				[labels.html, `
+					<shiny-tabs>
+						<shiny-button>tab1</shiny-button>
+						<shiny-button>tab2</shiny-button>
+						<shiny-button>tab3</shiny-button>
+						<div slot=panel>panel1</div>
+						<div slot=panel>panel2</div>
+						<div slot=panel>panel3</div>
+					</shiny-tabs>
+				`],
+				[labels.view, `
+					ShinyTabs
+						.props()
+						.children(html\`
+							\${ShinyButton.props()
+								.children("tab1").render()}
+							\${ShinyButton.props()
+								.children("tab2").render()}
+							\${ShinyButton.props()
+								.children("tab3").render()}
+							<div slot=panel>panel1</div>
+							<div slot=panel>panel2</div>
+							<div slot=panel>panel3</div>
+						\`)
+						.render()
+				`],
+				[labels.css, `
+					shiny-tabs {
+						&::part(tabs) {}
+						&::part(panels) {}
+						> shiny-button {}
+					}
+				`],
+			],
+			content: views.ShinyTabs
+				.props()
+				.children(html`
+					${views.ShinyButton.props().children("tab1").render()}
+					${views.ShinyButton.props().children("tab2").render()}
+					${views.ShinyButton.props().children("tab3").render()}
+					<p slot=panel class=lipsum>${lipsum()}</p>
+					<p slot=panel class=lipsum>${lipsum()}</p>
+					<p slot=panel class=lipsum>${lipsum()}</p>
+				`)
+				.render(),
+			style: css`
+				.content {
+					justify-content: start;
+					p { margin-top: 0.5em; }
+				}
+			`,
+		}),
+
+		Demonstration({
+			name: "copy",
 			explain: html`
 				<p>click-to-copy text button.</p>
 			`,
@@ -85,7 +221,7 @@ dom.register({ShinyDemo: view.component(use => {
 		}),
 
 		Demonstration({
-			name: "shiny-drawer",
+			name: "drawer",
 			explain: html`
 				<p>slide-out panel. button optional.</p>
 			`,
@@ -158,59 +294,6 @@ dom.register({ShinyDemo: view.component(use => {
 				}
 			`,
 		}),
-
-		Demonstration({
-			name: "shiny-tabs",
-			explain: html`
-				<p>button bar. panels optional.</p>
-			`,
-			snippets: [
-				[labels.html, `
-					<shiny-tabs>
-						<button>tab1</button>
-						<button>tab2</button>
-						<button>tab3</button>
-						<div slot=panel>panel1</div>
-						<div slot=panel>panel2</div>
-						<div slot=panel>panel3</div>
-					</shiny-tabs>
-				`],
-				[labels.view, `
-					ShinyTabs
-						.props()
-						.children(html\`
-							<button>tab1</button>
-							<button>tab2</button>
-							<button>tab3</button>
-							<div slot=panel>panel1</div>
-							<div slot=panel>panel2</div>
-							<div slot=panel>panel3</div>
-						\`)
-						.render()
-				`],
-				[labels.css, `
-					shiny-tabs::part(tabs) {}
-					shiny-tabs::part(panels) {}
-				`],
-			],
-			content: views.ShinyTabs
-				.props()
-				.children(html`
-					<button>tab1</button>
-					<button>tab2</button>
-					<button>tab3</button>
-					<p slot=panel class=lipsum>${lipsum()}</p>
-					<p slot=panel class=lipsum>${lipsum()}</p>
-					<p slot=panel class=lipsum>${lipsum()}</p>
-				`)
-				.render(),
-			style: css`
-				.content {
-					justify-content: start;
-					p { margin-top: 0.5em; }
-				}
-			`,
-		}),
 	]
 
 	return html`
@@ -219,7 +302,7 @@ dom.register({ShinyDemo: view.component(use => {
 			${auraViews.ShinyTabs
 				.props(tabControl)
 				.children(viewsets.map(viewset => html`
-					<button>${viewset.label}</button>
+					${auraViews.ShinyButton.props().children(viewset.label).render()}
 				`))
 				.render()}
 		</div>

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

@@ -53,6 +53,14 @@ p.lipsum {
 		color: var(--prime);
 	}
 
+	[view="shiny-tabs"] {
+		gap: 0.5em;
+		&::part(tabs) {
+			font-size: 0.8em;
+			opacity: 0.8;
+		}
+	}
+
 	.codes {
 		display: flex;
 		flex-direction: column;

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

@@ -14,7 +14,7 @@ export const Demonstration = view(use => (options: {
 		style: CSSResultGroup
 	}) => {
 
-	use.name(options.name)
+	use.name(`demo-${options.name}`)
 	use.styles(foundationCss, styleCss, options.style)
 
 	function codeblock(heading: string, code: string) {
@@ -32,14 +32,18 @@ export const Demonstration = view(use => (options: {
 
 	return html`
 		<div class=meta>
-			<h2>✨ ${options.name}</h2>
+			<h2>✨ shiny-${options.name}</h2>
 			<div class=explain>${options.explain}</div>
 			${auraViews.ShinyTabs
 				.props()
 				.children(html`
-					${options.snippets.map(([label]) => html`
-						<button>${label.button}</button>
-					`)}
+					${options.snippets.map(([label]) => (
+						auraViews.ShinyButton
+							.props()
+							.attr("plain", true)
+							.children(label.button)
+							.render()
+					))}
 					${options.snippets.map(([label, code]) => codeblock(label.text, code))}
 				`)
 				.render()}

package/s/themes/aura.css.ts

@@ -4,13 +4,59 @@ import {defaultCssVars, renderCssVars} from "./infra/css-vars.js"
 export const aura = css`@layer overlay {
 
 :host {
-	display: block;
-
 	${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;
 
@@ -36,13 +82,5 @@ export const aura = css`@layer overlay {
 	}
 }
 
-:host([view="shiny-tabs"]) {
-	display: block;
-
-	&::part(tabs) {
-		display: flex;
-	}
-}
-
 }`
 

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

@@ -4,22 +4,30 @@ import {unsafeCSS} from "lit"
 export type CssVars = {
 	"bg": string
 	"alpha": string
-	"happy": string
-	"sad": string
-	"angry": 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": "#afa",
+		"alpha": "#def",
+		"inactive-opacity": "0.5",
+		"lame": "#8888",
+		"angry": "#f50",
+		"zesty": "#cf0",
 		"happy": "#0fa",
+		"calm": "#0af",
 		"sad": "#74f",
-		"angry": "#f50",
-		"lame": "#8888",
-		"inactive-opacity": "0.5",
+		"quirky": "#f49",
 	}
 }
 

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

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