fix(html-examples): make progress click-driven

Remove interval auto-ticking from the progress example, render visible percentage text next to the native progress element, and update smoke coverage to assert explicit click behavior.

req: htmx_equivalents/001

req: examples/001

req: test/006

examples/html_examples/README.md

@@ -39,7 +39,7 @@ Status legend:
 | `inline-validation` | implemented | A generated form reports field failure with `validate_email_form.error(...)`, focuses the field, and updates status text. | `templates/gallery.heml`, `gallery_handlers::validate_email` |
 | `infinite-scroll` | implemented | A revealed sentinel form posts to the same server-owned loading model and replaces generated keyed rows. | `gallery_handlers::infinite_scroll`, `data-hemx-revealed`, `infinite_row` |
 | `active-search` | implemented | The search form posts a query; the server derives result rows and reconciles generated keyed partials by removing filtered-out keys, replacing retained keys, and appending newly visible keys. | `gallery_handlers::search`, `SearchResult` |
-| `progress-bar` | implemented | `data-hemx-interval` ticks a server-owned progress value and replaces a generated progress partial. | `gallery_handlers::tick_progress`, `ProgressMeter` |
+| `progress-bar` | implemented | The Tick progress button advances server-owned progress and replaces a generated progress partial with visible percentage text. | `gallery_handlers::tick_progress`, `ProgressMeter` |
 | `value-select` | implemented | The first select posts a generated form; the server derives and replaces generated option rows for the second select. | `gallery_handlers::choose_category`, `ValueOption` |
 | `animations` | integration-owned | CSS transitions are presentation policy around generated replacements; hemx should only preserve stable DOM boundaries. | Use keyed partials and app CSS; no core animation framework. |
 | `file-upload` | integration-owned | Upload transport, size limits, progress, storage, and security are app/integration policy. | Needs product-owned upload route before becoming copyable. |

examples/html_examples/src/main.rs

@@ -179,8 +179,8 @@ impl Hemplate for ProgressMeter {
         use std::fmt::Write as _;
         write!(
             out,
-            "<progress value=\"{}\" max=\"100\">{}% complete</progress>",
-            self.percent, self.percent
+            "<progress value=\"{}\" max=\"100\" aria-label=\"{}% complete\"></progress> <span>{}% complete</span>",
+            self.percent, self.percent, self.percent
         )
         .expect("write to String cannot fail");
         Ok(())
@@ -815,7 +815,8 @@ mod tests {
         assert!(html.contains("data-hemx-form=\"validate_email\""));
         assert!(html.contains("data-hemx-revealed=\"true\""));
         assert!(html.contains("data-hemx-handle=\"tick_progress\""));
-        assert!(html.contains("data-hemx-interval=\"1000\""));
+        assert!(!html.contains("data-hemx-interval=\"1000\""));
+        assert!(html.contains("0% complete"));
         assert!(html.contains("data-hemx-slot=\"loaded_row\""));
         assert!(html.contains("data-hemx-slot=\"infinite_row\""));
         assert!(html.contains("data-hemx-slot=\"value_option\""));
@@ -921,7 +922,7 @@ mod tests {
                 .unwrap()
                 .batch,
         );
-        assert!(progress.payload_contains("<progress value=\"25\" max=\"100\">25% complete</progress>"));
+        assert!(progress.payload_contains("<span>25% complete</span>"));
 
         let values = inspect_batch(
             InteractionRequest::from(form(gallery::choose_category, &[("category", "numbers")]))

examples/html_examples/templates/gallery.heml

@@ -78,7 +78,7 @@
 
   <section id="progress-bar" data-htmx-example="progress-bar" aria-labelledby="progress-heading">
     <h2 id="progress-heading">progress-bar</h2>
-    <form data-hemx-handle="tick_progress" data-hemx-form="tick_progress" data-hemx-interval="1000">
+    <form data-hemx-handle="tick_progress" data-hemx-form="tick_progress">
       <input type="hidden" name="request" value="tick">
       <button type="submit">Tick progress</button>
     </form>