;; 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: bind (44 tests — 0 runnable)"
    (p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream bind tests. 0 of 44 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-reactivity))"
        :style "color:#7c3aed" "reactivity"))
    (div :style "display:flex;flex-direction:column"
      (~hyperscript/hs-test-card
  :name "syncs variable and input value in both directions"
  :html "<input type=\"text\" id=\"name-input\" value=\"Alice\" /><span _=\"bind $name and #name-input.value end
			          when $name changes put it into me\"></span>"
  :action "evaluate({...}); await run(\"set $name to '"
  :check "toHaveText('Alice'); toHaveText('Bob')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "syncs variable and attribute in both directions"
  :html "<div _=\"bind $theme and @data-theme\"></div>"
  :action "await run(\"set $theme to '; await run(\"set $theme to '"
  :check "toHaveAttribute('data-theme', 'light'); toHaveAttribute('data-theme', 'dark')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "dedup prevents infinite loop in two-way bind"
  :html "<div _=\"bind $color and @data-color\"></div>"
  :action "await run(\"set $color to '; await run(\"set $color to '"
  :check "toHaveAttribute('data-color', 'red'); toHaveAttribute('data-color', 'blue')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "\"with\" is a synonym for \"and\""
  :html "<input type=\"text\" id=\"city-input\" value=\"Paris\" /><span _=\"bind $city to #city-input.value end
			          when $city changes put it into me\"></span>"
  :action "await run(\"set $city to '"
  :check "toHaveText('Paris')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "shorthand on text input binds to value"
  :html "<input type=\"text\" value=\"hello\"
			        _=\"bind $greeting to me end
			           when $greeting changes put it into next <span/>\"></input><span></span>"
  :action "find('input').fill('goodbye'); await run(\"set $greeting to '"
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "shorthand on checkbox binds to checked"
  :html "<input type=\"checkbox\" _=\"bind $isDarkMode to me\" /><span _=\"when $isDarkMode changes put it into me\"></span>"
  :action "await run(\"set $isDarkMode to false\"; await run(\"set $isDarkMode to false\""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "shorthand on textarea binds to value"
  :html "<textarea _=\"bind $bio to me\">Hello world</textarea><span _=\"when $bio changes put it into me\"></span>"
  :action "find('textarea').fill('New bio')"
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "shorthand on select binds to value"
  :html "<select _=\"bind $country to me\">
			   <option value=\"us\">United States</option>
			   <option value=\"uk\">United Kingdom</option>
			   <option value=\"fr\">France</option>
			 </select><span _=\"when $country changes put it into me\"></span>"
  :action ""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "unsupported element: bind to plain div errors"
  :html ""
  :action ""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "shorthand on type=number preserves number type"
  :html "<input type=\"number\" _=\"bind $price to me\" /><span _=\"when $price changes put it into me\"></span>"
  :action "await run(\"set $price to 42\""
  :check "toHaveText('42')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "boolean bind to attribute uses presence/absence"
  :html "<div _=\"bind $isEnabled and @data-active\"></div>"
  :action "await run(\"set $isEnabled to true\"; await run(\"set $isEnabled to false\""
  :check "toHaveAttribute('data-active', '')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "boolean bind to aria-* attribute uses \"true\"/\"false\" strings"
  :html "<div _=\"bind $isHidden and @aria-hidden\"></div>"
  :action "await run(\"set $isHidden to true\"; await run(\"set $isHidden to false\""
  :check "toHaveAttribute('aria-hidden', 'true'); toHaveAttribute('aria-hidden', 'false')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "style bind is one-way: variable drives style, not vice versa"
  :html "<div _=\"bind $opacity and *opacity\">visible</div>"
  :action "await run(\"set $opacity to 1\"; await run(\"set $opacity to 0.3\""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "same value does not re-set input (prevents cursor jump)"
  :html "<input type=\"text\" value=\"hello\" _=\"bind $message to me\" />"
  :action ""
  :check "toBe(false)"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "external JS property write does not sync (known limitation)"
  :html "<input type=\"text\" value=\"original\" _=\"bind $searchTerm to me\" /><span _=\"when $searchTerm changes put it into me\"></span>"
  :action "evaluate({...})"
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "form.reset() syncs variable back to default value"
  :html "<form id=\"test-form\">  <input type=\"text\" value=\"default\" _=\"bind $formField to me\" /></form><span _=\"when $formField changes put it into me\"></span>"
  :action "find('input').fill('user typed this')"
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "clicking a radio sets the variable to its value"
  :html "<input type=\"radio\" name=\"color\" value=\"red\" _=\"bind $color to me\" /><input type=\"radio\" name=\"color\" value=\"blue\" _=\"bind $color to me\" /><input type=\"radio\" name=\"color\" value=\"green\" _=\"bind $color to me\" /><span _=\"when $color changes put it into me\"></span>"
  :action "find('input[value=\"blue\"]').click(); find('input[value=\"green\"]').click(); await run(\"set $color to '"
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "setting variable programmatically checks the matching radio"
  :html "<input type=\"radio\" name=\"size\" value=\"small\" _=\"bind $size to me\" /><input type=\"radio\" name=\"size\" value=\"medium\" _=\"bind $size to me\" /><input type=\"radio\" name=\"size\" value=\"large\" _=\"bind $size to me\" />"
  :action "await run(\"set $size to '; await run(\"set $size to '"
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "initial value checks the correct radio on load"
  :html "<input type=\"radio\" name=\"fruit\" value=\"apple\" _=\"bind $fruit to me\" /><input type=\"radio\" name=\"fruit\" value=\"banana\" _=\"bind $fruit to me\" /><input type=\"radio\" name=\"fruit\" value=\"cherry\" _=\"bind $fruit to me\" />"
  :action "await run(\"set $fruit to '"
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "variable drives class: setting variable adds/removes class"
  :html "<div _=\"bind .dark and $darkMode\">test</div>"
  :action "await run(\"set $darkMode to false\"; await run(\"set $darkMode to true\"; await run(\"set $darkMode to false\""
  :check "toHaveClass('dark')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "external class change syncs back to variable"
  :html "<div _=\"bind .dark and $darkMode\">test</div>"
  :action "await run(\"set $darkMode to false\""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "right side wins on class init"
  :html "<div _=\"bind .highlight to $highlighted\">test</div>"
  :action "await run(\"set $highlighted to true\""
  :check "toHaveClass('highlight')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "init: right side wins — input value (Y) overwrites variable (X)"
  :html "<input type=\"text\" value=\"Bob\" _=\"bind $name to my value\" />"
  :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 "init: right side wins — variable (Y) overwrites input value (X)"
  :html "<input type=\"text\" value=\"Bob\" _=\"bind my value to $name\" />"
  :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 "init: right side wins — attribute (Y) initializes variable (X)"
  :html "<div data-color=\"red\" _=\"bind $color to @data-color\"></div>"
  :action ""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "init: right side wins — variable (Y) initializes attribute (X)"
  :html "<div _=\"bind @data-theme to $theme\"></div>"
  :action "await run(\"set $theme to '"
  :check "toHaveAttribute('data-theme', 'dark')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "init: right side wins — variable (Y) drives class (X)"
  :html "<div _=\"bind .dark to $isDark\"></div>"
  :action "await run(\"set $isDark to true\""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "init: right side wins — class (Y) drives variable (X)"
  :html "<div class=\"dark\" _=\"bind $isDark to .dark\"></div>"
  :action "await run(\"set $isDark to false\""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "possessive property: bind $var to my value"
  :html "<input type=\"text\" value=\"hello\" _=\"bind $myVal to my value\" />"
  :action "find('input').fill('world')"
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "possessive attribute: bind $var and my @data-label"
  :html "<div _=\"bind $label and my @data-label\"></div>"
  :action "await run(\"set $label to '; await run(\"set $label to '"
  :check "toHaveAttribute('data-label', 'important')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "of-expression: bind $var to value of #input"
  :html "<input type=\"text\" id=\"of-input\" value=\"initial\" /><div _=\"bind $search to value of #of-input\"></div>"
  :action ""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "class bound to another element checkbox"
  :html "<input type=\"checkbox\" id=\"dark-toggle\" /><div _=\"bind .dark and #dark-toggle's checked\">test</div>"
  :action ""
  :check "toHaveClass('dark')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "attribute bound to another element input value"
  :html "<input type=\"text\" id=\"title-input\" value=\"Hello\" /><h1 _=\"bind @data-title and #title-input's value\"></h1>"
  :action "find('#title-input').fill('World')"
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "two inputs synced via bind"
  :html "<input type=\"range\" id=\"slider\" value=\"50\" /><input type=\"number\" _=\"bind my value and #slider's value\" />"
  :action "evaluate({...})"
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "bind variable to element by id auto-detects value"
  :html "<input type=\"text\" id=\"name-field\" value=\"\" /><div _=\"bind $name to #name-field\"></div>"
  :action "evaluate({...}); await run(\"set $name to '"
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "bind variable to checkbox by id auto-detects checked"
  :html "<input type=\"checkbox\" id=\"agree-cb\" /><div _=\"bind $agreed to #agree-cb\"></div>"
  :action "await run(\"set $agreed to false\"; await run(\"set $agreed to true\""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "bind variable to number input by id auto-detects valueAsNumber"
  :html "<input type=\"number\" id=\"qty-input\" /><div _=\"bind $qty to #qty-input\"></div>"
  :action "await run(\"set $qty to 5\""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "bind element to element: both sides auto-detect"
  :html "<input type=\"range\" id=\"range-slider\" value=\"50\" /><input type=\"number\" _=\"bind me to #range-slider\" />"
  :action "evaluate({...})"
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "right side wins on init: variable (Y) initializes input (X)"
  :html "<input type=\"text\" value=\"Bob\" _=\"bind me to $name\" />"
  :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 "right side wins on init: input (Y) initializes variable (X)"
  :html "<input type=\"text\" value=\"Bob\" _=\"bind $name to me\" />"
  :action ""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "bind to contenteditable element auto-detects textContent"
  :html "<div contenteditable=\"true\" _=\"bind $text to me\">initial</div>"
  :action "await run(\"set $text to '"
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "bind to custom element with value property auto-detects value"
  :html "<test-input _=\"bind $custom to me\"></test-input>"
  :action "evaluate({...}); await run(\"set $custom to '"
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "radio change listener is removed on cleanup"
  :html "<input type=\"radio\" name=\"color\" value=\"red\" _=\"bind $color to me\" checked /><input type=\"radio\" name=\"color\" value=\"blue\" _=\"bind $color to me\" />"
  :action "evaluate({...}); evaluate({...}); await run(\"set $color to '; await run(\"$color\""
  :check "toBe('red')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "form reset listener is removed on cleanup"
  :html "<form><input type=\"text\" id=\"binput\" value=\"initial\" _=\"bind $val to me\" /><button type=\"reset\">Reset</button></form>"
  :action "await run(\"set $val to '; await run(\"set $val to '; await run(\"$val\""
  :check "toBe('changed')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
