diff --git a/docs/components/sandbox/signal-counter.css b/docs/components/sandbox/signal-counter.css
new file mode 100644
index 00000000..e4993039
--- /dev/null
+++ b/docs/components/sandbox/signal-counter.css
@@ -0,0 +1,19 @@
+:host,
+:root {
+ text-align: center;
+}
+
+.heading {
+ display: block;
+ text-decoration: underline;
+}
+
+.even {
+ color: green;
+ display: block;
+}
+
+.odd {
+ color: red;
+ display: block;
+}
diff --git a/docs/components/sandbox/signal-counter.tsx b/docs/components/sandbox/signal-counter.tsx
new file mode 100644
index 00000000..af8b687d
--- /dev/null
+++ b/docs/components/sandbox/signal-counter.tsx
@@ -0,0 +1,62 @@
+import sheet from './signal-counter.css' with { type: 'css' };
+
+export const inferredObservability = true;
+
+export default class SignalCounter extends HTMLElement {
+ count;
+ parity;
+ isLarge;
+
+ constructor() {
+ super();
+ this.count = new Signal.State(0);
+ this.parity = new Signal.Computed(() => (this.count.get() % 2 === 0 ? 'even' : 'odd'));
+ this.isLarge = new Signal.Computed(() =>
+ this.count.get() >= 100 ? 'Wow!!!' : 'Keep Going...',
+ );
+ }
+
+ connectedCallback() {
+ if (!this.shadowRoot) {
+ this.attachShadow({
+ mode: 'open',
+ });
+ this.render();
+ }
+
+ this.shadowRoot.adoptedStyleSheets = [sheet];
+ }
+
+ increment() {
+ this.count.set(this.count.get() + 1);
+ }
+
+ decrement() {
+ this.count.set(this.count.get() - 1);
+ }
+
+ double() {
+ this.count.set(this.count.get() * 2);
+ }
+
+ render() {
+ const { count, parity, isLarge } = this;
+
+ return (
+
+
My Signal Counter
+
+
+ {/* TODO: inline version breaks with effects */}
+ {/*
*/}
+
+
+ The count is {count.get()} ({parity.get()})
+
+
({isLarge.get()})
+
WCC Sandbox
- Light DOM (no JS)
+ JSX + inferredObservability
+
+
+
+
+
+
+
+
+ <sb-signal-counter-jsx></sb-signal-counter-jsx>
+
+
+ <sb-signal-counter-jsx
+ count="3"
+ ></sb-signal-counter-jsx>
+
+
+