@e280/shiny 0.1.0-17 → 0.1.0-18

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@e280/shiny",
-	"version": "0.1.0-17",
+	"version": "0.1.0-18",
 	"description": "✨ web ui library",
 	"license": "MIT",
 	"type": "module",

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/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/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

@@ -139,19 +139,15 @@ ${es}
 
 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 +187,8 @@ header {
 
 	> * {
 		flex: 1 1 0;
+		min-width: 0;
 	}
-
 }
 
 .codezone {
@@ -228,6 +224,7 @@ header {
 	flex-direction: column;
 	background: #0003;
 	border-radius: var(--rounded);
+	backdrop-filter: blur(0.5em);
 }
 
 header {
@@ -250,8 +247,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 +421,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 +485,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({