;; AUTO-GENERATED from spec/tests/hyperscript-upstream-tests.json
;; DO NOT EDIT — regenerate with:
;;   python3 tests/playwright/generate-sx-tests.py --emit-pages

(defcomp ()
  (~docs/page :title "Hyperscript: component (19 tests — 0 runnable)"
    (p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream component tests. 0 of 19 are reproducible in-browser; the remainder show their source for reference.")
    (p :style "color:#78716c;font-size:0.875rem;margin-bottom:1rem"
      "Theme: " (a :href "/sx/(applications.(hyperscript.gallery-language))"
        :style "color:#7c3aed" "language"))
    (div :style "display:flex;flex-direction:column"
      (~hyperscript/hs-test-card
  :name "registers a custom element from a template"
  :html "
			<template component=\"test-hello\">
				<span>Hello World</span>
			</template>
			<test-hello></test-hello>
		"
  :action ""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "renders template expressions"
  :html "
			<template component=\"test-greet\">
				<span>Hello ${\"\\x24\"}{$name}!</span>
			</template>
			<test-greet></test-greet>
		"
  :action "await run(\"set $name to '"
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "applies _ hyperscript to component instance"
  :html "
			<template component=\"test-init\" _=\"init set ^msg to 'initialized'\">
				<span>${\"\\x24\"}{^msg}</span>
			</template>
			<test-init></test-init>
		"
  :action ""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "processes _ on inner elements"
  :html "
			<template component=\"test-inner\" _=\"init set ^count to 0\">
				<button _=\"on click increment ^count then put ^count into the next <span/>\">+</button>
				<span>0</span>
			</template>
			<test-inner></test-inner>
		"
  :action "find('test-inner button').click()"
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "reactively updates template expressions"
  :html "
			<template component=\"test-reactive\" _=\"init set ^count to 0\">
				<button _=\"on click increment ^count\">+</button>
				<span>Count: ${\"\\x24\"}{^count}</span>
			</template>
			<test-reactive></test-reactive>
		"
  :action "find('test-reactive button').click()"
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "supports multiple independent instances"
  :html "
			<template component=\"test-multi\" _=\"init set ^count to 0\">
				<button _=\"on click increment ^count then put ^count into the next <span/>\">+</button>
				<span>0</span>
			</template>
			<test-multi id=\"a\"></test-multi>
			<test-multi id=\"b\"></test-multi>
		"
  :action "find('#a button').click()"
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "reads attributes via @"
  :html "
			<template component=\"test-attrs\" _=\"init set ^val to @data-start as Int\">
				<span>${\"\\x24\"}{^val}</span>
			</template>
			<test-attrs data-start=\"42\"></test-attrs>
		"
  :action ""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "supports #for loops in template"
  :html "
			<template component=\"test-loop\" _=\"init set ^items to ['a', 'b', 'c']\">
				<ul>
				#for item in ^items
					<li>${\"\\x24\"}{item}</li>
				#end
				</ul>
			</template>
			<test-loop></test-loop>
		"
  :action ""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "supports #if conditionals in template"
  :html "
			<template component=\"test-cond\" _=\"init set ^show to true\">
				#if ^show
					<span>visible</span>
				#end
			</template>
			<test-cond></test-cond>
		"
  :action ""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "substitutes slot content into template"
  :html "
			<template component=\"test-card\">
				<div class=\"card\"><slot/></div>
			</template>
			<test-card><p>Hello from slot</p></test-card>
		"
  :action ""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "blocks processing of inner hyperscript until render"
  :html "
			<template component=\"test-block\" _=\"init set ^msg to 'ready'\">
				<span _=\"on click put ^msg into me\">click me</span>
			</template>
			<test-block></test-block>
		"
  :action "find('test-block span').click()"
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "supports named slots"
  :html "
			<template component=\"test-named-slot\">
				<header><slot name=\"title\"></slot></header>
				<main><slot/></main>
				<footer><slot name=\"footer\"></slot></footer>
			</template>
			<test-named-slot>
				<h1 slot=\"title\">My Title</h1>
				<p>Default content</p>
				<span slot=\"footer\">Footer text</span>
			</test-named-slot>
		"
  :action ""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "does not process slotted _ attributes prematurely"
  :html "
			<div _=\"init set ^x to 42\">
				<template component=\"test-slot-hs\">
					<div class=\"wrap\"><slot/></div>
				</template>
				<test-slot-hs>
					<span _=\"on click put ^x into me\">before</span>
				</test-slot-hs>
			</div>
		"
  :action "find('test-slot-hs span').click()"
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "slotted content resolves ^var from outer scope, not component scope"
  :html "
			<div _=\"init set ^outer to 'from-outside'\">
				<template component=\"test-scope-slot\" _=\"init set ^outer to 'from-component'\">
					<div class=\"inner\"><slot/></div>
				</template>
				<test-scope-slot>
					<span _=\"init put ^outer into me\">waiting</span>
				</test-scope-slot>
			</div>
		"
  :action ""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "component isolation prevents ^var leaking inward"
  :html "
			<div _=\"init set ^leaked to 'should-not-see'\">
				<template component=\"test-isolated\" _=\"init set ^internal to 'component-only'\">
					<span _=\"init if ^leaked is not undefined put 'leaked!' into me else put ^internal into me\">waiting</span>
				</template>
				<test-isolated></test-isolated>
			</div>
		"
  :action ""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "bind keeps ^var in sync with attribute changes"
  :html "
			<template component=\"test-bind-attr\" _=\"bind ^count to @data-count\">
				<span>${\"\\x24\"}{^count}</span>
			</template>
			<test-bind-attr data-count=\"5\"></test-bind-attr>
		"
  :action ""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "attrs evaluates attribute as hyperscript in parent scope"
  :html "
			<template component=\"test-args\" _=\"init set ^list to attrs.items\">
				<ul>
				#for item in ^list
					<li>${\"\\x24\"}{item}</li>
				#end
				</ul>
			</template>
			<test-args items=\"$stuff\"></test-args>
		"
  :action "await run(\"set $stuff to ['"
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "attrs works with bind for reactive pass-through"
  :html "
			<template component=\"test-args-bind\" _=\"bind ^val to attrs.count\">
				<span>${\"\\x24\"}{^val}</span>
			</template>
			<test-args-bind count=\"$count\"></test-args-bind>
			<button _=\"on click increment $count\">+</button>
		"
  :action "find('button').click(); await run(\"set $count to 10\""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "attrs bind is bidirectional — inner changes flow outward"
  :html "
			<template component=\"test-args-bidir\" _=\"bind ^count to attrs.count\">
				<span>${\"\\x24\"}{^count}</span>
				<button _=\"on click increment ^count\">+</button>
			</template>
			<test-args-bidir count=\"$count\"></test-args-bidir>
			<p _=\"live put $count into me\"></p>
		"
  :action "find('test-args-bidir button').click(); await run(\"set $count to 10\""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
