feat(playground): added character counter example

themes/aurelia-theme/layouts/playground/single.html

@@ -6,7 +6,7 @@
 <section class="pb-16 bg-white text-gray-900 pt-16">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
     <div class="grid grid-cols-1 gap-8">
-      <!-- Todo Example -->
+      <!-- Hello world Example -->
       <article class="p-6 rounded-2xl bg-white shadow-sm hover:shadow-md transition-shadow border border-gray-100">
         <div class="mb-4">
           <h2 class="text-2xl font-semibold text-gray-900">Hello, world!</h2>
@@ -22,6 +22,22 @@ <h2 class="text-2xl font-semibold text-gray-900">Hello, world!</h2>
         </div>
       </article>
 
+      <!-- Character Counter Example -->
+      <article class="p-6 rounded-2xl bg-white shadow-sm hover:shadow-md transition-shadow border border-gray-100">
+        <div class="mb-4">
+          <h2 class="text-2xl font-semibold text-gray-900">Character Counter</h2>
+          <p>The character counter is defined in the <code>src/character-counter.ts</code> file and then rendered in the <code>src/character-counter.html</code> file. Showcasing the use of form element binding, computed getters, and UI rendering.</p>
+        </div>
+        <div class="aspect-video">
+          <iframe src="https://codesandbox.io/p/devbox/62n9p2?embed=1&file=%2Fsrc%2Fcharacter-counter.ts"
+                  class="w-full h-full rounded-xl"
+                  title="Aurelia Hello, world! Example"
+                  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+                  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts">
+          </iframe>
+        </div>
+      </article>
+
       <!-- Simple Counter Example -->
       <article class="p-6 rounded-2xl bg-white shadow-sm hover:shadow-md transition-shadow border border-gray-100">
         <div class="mb-4">