@e280/shiny 0.1.0-17 → 0.1.0-19

package/README.md

@@ -65,7 +65,7 @@
         --shiny-quirky: #f49;
 
         --shiny-inactive-opacity: 0.5;
-        --shiny-anim-duration: 300ms;
+        --shiny-anim-duration: 150ms;
       }
     </style>
     ```

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@e280/shiny",
-	"version": "0.1.0-17",
+	"version": "0.1.0-19",
 	"description": "✨ web ui library",
 	"license": "MIT",
 	"type": "module",
@@ -29,7 +29,7 @@
 		"prismjs": "^1.30.0"
 	},
 	"devDependencies": {
-		"@e280/hottie": "^0.1.0-3",
+		"@e280/hottie": "^0.1.0-4",
 		"@e280/octo": "^0.1.0-12",
 		"@e280/science": "^0.1.8",
 		"@e280/scute": "^0.3.0-1",

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

@@ -13,6 +13,7 @@ export default css`@layer view {
 	flex-direction: column;
 	background: #0003;
 	border-radius: var(--rounded);
+	backdrop-filter: blur(0.5em);
 }
 
 header {
@@ -35,8 +36,9 @@ header {
 code {
 	padding: calc(var(--padding) / 4) var(--padding);
 	color: var(--code);
-	white-space: pre-wrap;
+	white-space: pre;
 	tab-size: 2;
+	overflow-x: auto;
 }
 
 }`

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

@@ -4,19 +4,15 @@ export default css`@layer view {
 
 section.showcase {
 	position: relative;
-
 	display: flex;
 	flex-direction: column;
-
 	padding: 1em;
-	border-radius: var(--rounded);
 	gap: var(--padding);
 
 	background: linear-gradient(to right top, #252dd985, #aa6affbd);
-	backdrop-filter: blur(0.5em);
-
 	box-shadow: 0 0 5em #5d1fadaa;
 	border-top: 2px solid #fff4;
+	border-radius: var(--rounded);
 
 	&::before {
 		z-index: 0;
@@ -56,8 +52,8 @@ header {
 
 	> * {
 		flex: 1 1 0;
+		min-width: 0;
 	}
-
 }
 
 .codezone {

package/s/theme/parts/vars.ts

@@ -25,7 +25,7 @@ export const varsString = css`@layer vars {
 		"quirky": "#f49",
 
 		"inactive-opacity": "0.5",
-		"anim-duration": "300ms",
+		"anim-duration": "150ms",
 	})}
 }
 

package/s/views/button/view.ts

@@ -7,6 +7,7 @@ import {themeCss} from "../../theme/theme.css.js"
 
 export const ShinyButton = shadow((content?: Content, options: {
 		vibe?: "calm" | "lame" | "happy" | "sad" | "angry" | "zesty" | "quirky"
+		onClick?: (event: PointerEvent) => void
 	} = {}) => {
 
 	useName("shiny-button")
@@ -22,7 +23,8 @@ export const ShinyButton = shadow((content?: Content, options: {
 			part=button
 			data-vibe="${options.vibe ?? "calm"}"
 			?disabled="${attrs.disabled}"
-			?hidden="${attrs.hidden}">
+			?hidden="${attrs.hidden}"
+			@click="${options.onClick}">
 			<slot>${content}</slot>
 		</button>
 	`

package/s/views/copy/style.css.ts

@@ -10,15 +10,20 @@ button {
 
 button {
 	opacity: var(--inactive-opacity);
-	cursor: pointer;
-	cursor: copy;
+	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"] {

package/s/views/copy/view.ts

@@ -34,23 +34,25 @@ export const ShinyCopy = shadow((
 	}
 
 	return html`
-		<button data-status="${copier.status}" @click="${click}">
-			${(() => {switch (copier.status) {
-				case "neutral":
-					return clipboardSvg
+		<button data-status="${copier.status}" @click="${click}" part=button>
+			<span part=icon>
+				${(() => {switch (copier.status) {
+					case "neutral":
+						return clipboardSvg
 
-				case "invalid":
-					return clipboardSvg
+					case "invalid":
+						return clipboardSvg
 
-				case "good":
-					return clipboardCheckFilledSvg
+					case "good":
+						return clipboardCheckFilledSvg
 
-				case "bad":
-					return clipboardXFilledSvg
+					case "bad":
+						return clipboardXFilledSvg
 
-				default:
-					throw new Error(`unknown copy status`)
-			}})()}
+					default:
+						throw new Error(`unknown copy status`)
+				}})()}
+			</span>
 			<slot></slot>
 		</button>
 	`

package/s/views/tabs/showcase.ts

@@ -22,7 +22,7 @@ export const tabsShowcase = () => Showcase("ShinyTabs", [
 			`,
 		}),
 		styleboxCss: css`
-			[view="shiny-button"] { font-size: 1.5em; }
+			[view="shiny-button"] { font-size: 1.2em; }
 			p { margin-top: var(--padding); }
 		`,
 		js: `

package/x/demo/main.bundle.min.js

@@ -37,15 +37,20 @@ button {
 
 button {
 	opacity: var(--inactive-opacity);
-	cursor: pointer;
-	cursor: copy;
+	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"] {
@@ -102,7 +107,7 @@ a {
 }`;var rs=lt`@layer vars {
 
 :is(:root, :host) {
-	${ho({bg:"#111",alpha:"#def",rounded:"0.5em",padding:"0.5em",prime:"#d068ff",code:"#3f1",link:"cyan",selection:"white","selection-bg":"#f70",lame:"#8888",angry:"#f50",zesty:"#cf0",happy:"#0fa",calm:"#0af",sad:"#74f",quirky:"#f49","inactive-opacity":"0.5","anim-duration":"300ms"})}
+	${ho({bg:"#111",alpha:"#def",rounded:"0.5em",padding:"0.5em",prime:"#d068ff",code:"#3f1",link:"cyan",selection:"white","selection-bg":"#f70",lame:"#8888",angry:"#f50",zesty:"#cf0",happy:"#0fa",calm:"#0af",sad:"#74f",quirky:"#f49","inactive-opacity":"0.5","anim-duration":"150ms"})}
 }
 
 }`;function po([r,t]){return`--${r}: var(--shiny-${r}, ${t});`}function ho(r){return Object.entries(r).map(po).join(`
@@ -131,27 +136,25 @@ ${ss}
 ${es}
 
 `;var N=new CSSStyleSheet;N.replaceSync(os);var te=j((r,t={})=>{D("shiny-copy"),I(N,Kr);let e=ts(r,t.ms??1e3);async function s(){if(r!==void 0)try{if(t.fail)throw new Error("copy failed on purpose for testing purposes");await navigator.clipboard.writeText(r),await e.flash("good")}catch(o){console.error(o),await e.flash("bad")}}return C`
-		<button data-status="${e.status}" @click="${s}">
-			${(()=>{switch(e.status){case"neutral":return pr;case"invalid":return pr;case"good":return Qr;case"bad":return Yr;default:throw new Error("unknown copy status")}})()}
+		<button data-status="${e.status}" @click="${s}" part=button>
+			<span part=icon>
+				${(()=>{switch(e.status){case"neutral":return pr;case"invalid":return pr;case"good":return Qr;case"bad":return Yr;default:throw new Error("unknown copy status")}})()}
+			</span>
 			<slot></slot>
 		</button>
 	`});var G=r=>r;var ns=S`@layer view {
 
 section.showcase {
 	position: relative;
-
 	display: flex;
 	flex-direction: column;
-
 	padding: 1em;
-	border-radius: var(--rounded);
 	gap: var(--padding);
 
 	background: linear-gradient(to right top, #252dd985, #aa6affbd);
-	backdrop-filter: blur(0.5em);
-
 	box-shadow: 0 0 5em #5d1fadaa;
 	border-top: 2px solid #fff4;
+	border-radius: var(--rounded);
 
 	&::before {
 		z-index: 0;
@@ -191,8 +194,8 @@ header {
 
 	> * {
 		flex: 1 1 0;
+		min-width: 0;
 	}
-
 }
 
 .codezone {
@@ -228,6 +231,7 @@ header {
 	flex-direction: column;
 	background: #0003;
 	border-radius: var(--rounded);
+	backdrop-filter: blur(0.5em);
 }
 
 header {
@@ -250,8 +254,9 @@ header {
 code {
 	padding: calc(var(--padding) / 4) var(--padding);
 	color: var(--code);
-	white-space: pre-wrap;
+	white-space: pre;
 	tab-size: 2;
+	overflow-x: auto;
 }
 
 }`;function ls(){return F(()=>{let r=document.head.querySelector("[data-prism]");if(!r)throw new Error("failed to find [data-prism] stylesheet");let t=new CSSStyleSheet;return t.replaceSync(r.textContent),t})}var ee=class extends zt{constructor(t){if(super(t),this.it=R,t.type!==Le.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===R||t==null)return this._t=void 0,this.it=t;if(t===rt)return t;if(typeof t!="string")throw Error(this.constructor.directiveName+"() called with a non-string value");if(t===this.it)return this._t;this.it=t;let e=[t];return e.raw=e,this._t={_$litType$:this.constructor.resultType,strings:e,values:[]}}};ee.directiveName="unsafeHTML",ee.resultType=1;var cs=Pt(ee);var dr=j((r,t,e)=>{let s=ls();I(N,s,as),e=qr(e).trim();let o=Ue.default.highlight(e,t==="js"?Ue.default.languages.javascript:Ue.default.languages.css,t);return C`
@@ -423,7 +428,8 @@ button {
 			part=button
 			data-vibe="${t.vibe??"calm"}"
 			?disabled="${e.disabled}"
-			?hidden="${e.hidden}">
+			?hidden="${e.hidden}"
+			@click="${t.onClick}">
 			<slot>${r}</slot>
 		</button>
 	`});var ht=j((r,t)=>{D("showcase"),I(N,ns);let e=F(()=>new Dt),s=t.at(e.index);return C`
@@ -486,7 +492,7 @@ button {
 				<p slot=panel>${V.takeFirst()}</p>
 				<p slot=panel>${V.takeFirst()}</p>
 			`}),styleboxCss:S`
-			[view="shiny-button"] { font-size: 1.5em; }
+			[view="shiny-button"] { font-size: 1.2em; }
 			p { margin-top: var(--padding); }
 		`,js:`
 			ShinyTabs.with({