tweak: counter view layout

Author: chase-moskal

s/demo/demo.bundle.ts

@@ -6,7 +6,7 @@ import {CounterView} from "./views/counter.js"
 $.render($(".demo"), DemoView())
 
 $.register({
-	DemoCounter: CounterView.component(100),
+	DemoCounter: CounterView.component(1),
 })
 
 console.log("🦝 sly")

s/demo/views/counter.ts

@@ -21,6 +21,7 @@ export const CounterView = view(use => (initial: number) => {
 	const increment = () => count(count() + 1)
 
 	return html`
+		<slot></slot>
 		<div>
 			<span>${seconds()}</span>
 		</div>
@@ -34,9 +35,12 @@ export const CounterView = view(use => (initial: number) => {
 const styles = css`
 :host {
 	display: flex;
-	flex-direction: column;
 	justify-content: center;
-	text-align: center;
+	gap: 1em;
+}
+
+button {
+	padding: 0.2em 0.5em;
 }
 `
 

s/demo/views/demo.ts

@@ -10,7 +10,7 @@ export const DemoView = view(use => () => {
 	use.styles(cssReset, styles)
 
 	return html`
-		${CounterView(10)}
+		${CounterView.children("view")(2)}
 		${LoadersView()}
 	`
 })

s/index.html.ts

@@ -29,7 +29,7 @@ export default ssg.page(import.meta.url, async orb => ({
 		<h1>sly testing page</h1>
 		<p><a href="https://github.com/e280/sly">github.com/e280/sly</a></p>
 		<p class=lil>v${orb.packageVersion()}</p>
-		<demo-counter></demo-counter>
+		<demo-counter>component</demo-counter>
 		<div class=demo></div>
 	`,
 }))