Rename data-ss-tpl attribute to data-ss-template

Spell out the abbreviation in the template marker attribute too, matching the
complete-words convention applied to the variables.

https://claude.ai/code/session_01XzhXvMvw42CQGc9kmin3GS

common/components/search_select.py

@@ -131,11 +131,11 @@ def _label_slot(text: str, *, extra_class: str = "") -> SafeText:
 
 
 def _template(name: str, node: SafeText) -> SafeText:
-    """Wrap a prototype row/pill in an inert ``<template data-ss-tpl=name>`` that
+    """Wrap a prototype row/pill in an inert ``<template data-ss-template=name>`` that
     the JS clones. Rendering the prototype with the real component keeps the JS
     free of any markup or class strings."""
     return Component(
-        tag_name="template", attributes=[("data-ss-tpl", name)], children=[node]
+        tag_name="template", attributes=[("data-ss-template", name)], children=[node]
     )
 
 

games/static/js/search_select.js

@@ -79,7 +79,7 @@
     // ── Clone a server-rendered <template> prototype by name. The server emits
     //    the mode-appropriate prototypes, so the JS never names a class. ──
     function cloneTemplate(name) {
-      var template = container.querySelector('template[data-ss-tpl="' + name + '"]');
+      var template = container.querySelector('template[data-ss-template="' + name + '"]');
       return template
         ? template.content.firstElementChild.cloneNode(true)
         : null;

tests/test_search_select.py

@@ -107,16 +107,16 @@ class SearchSelectComponentTest(unittest.TestCase):
         )
         # No pre-rendered rows in the live panel; the row prototype lives only in
         # the cloneable <template>.
-        panel = html.split("data-ss-tpl")[0]
+        panel = html.split("data-ss-template")[0]
         self.assertNotIn('data-ss-option=""', panel)
-        self.assertIn('data-ss-tpl="row"', html)
+        self.assertIn('data-ss-template="row"', html)
 
     def test_templates_carry_label_slot_for_js_cloning(self):
         # The dynamic shapes the JS clones expose a [data-ss-label] slot so the JS
         # only fills text — classes/structure stay server-side.
         html = SearchSelect(name="t", search_url="/api/games/search", multi_select=True)
-        self.assertIn('data-ss-tpl="row"', html)
+        self.assertIn('data-ss-template="row"', html)
-        self.assertIn('data-ss-tpl="pill"', html)
+        self.assertIn('data-ss-template="pill"', html)
         self.assertIn("data-ss-label", html)
 
     def test_shell_region_order_pills_search_options(self):
@@ -190,7 +190,7 @@ class FilterSelectComponentTest(unittest.TestCase):
         # The lone modifier pill is shown; include/exclude pills are suppressed.
         # (Scope the check to the live pills region — the cloneable pill <template>s
         # legitimately contain data-ss-type.)
-        pills_region = html.split("data-ss-tpl")[0]
+        pills_region = html.split("data-ss-template")[0]
         self.assertIn('data-ss-modifier="IS_NULL"', html)
         self.assertIn("(None)", html)
         self.assertNotIn('data-ss-type="include"', pills_region)
@@ -205,9 +205,9 @@ class FilterSelectComponentTest(unittest.TestCase):
         )
         # No value rows in the live panel (they're fetched); the row prototype
         # lives only in a <template>.
-        panel = html.split("data-ss-tpl")[0]
+        panel = html.split("data-ss-template")[0]
         self.assertNotIn('data-ss-option=""', panel)
-        self.assertIn('data-ss-tpl="row"', html)
+        self.assertIn('data-ss-template="row"', html)
         self.assertIn('data-ss-modifier-option="NOT_NULL"', html)  # still pinned
         self.assertIn('data-prefetch="20"', html)