Add a password strength meter (#3054)

screenshots/pages/password-strength.astro

@@ -0,0 +1,28 @@
+---
+// Password strength meter in its natural place: the password field of a sign-up
+// card. The field carries a value, so tabler.js rates it on load and the meter
+// shows a filled state with its label instead of an empty bar.
+import ScreenshotLayout from '../layouts/ScreenshotLayout.astro'
+import Card from '@ui/Card.astro'
+import CardBody from '@ui/CardBody.astro'
+import CardTitle from '@ui/CardTitle.astro'
+import FormGroup from '@ui/FormGroup.astro'
+import Strength from '@ui/Strength.astro'
+import Button from '@ui/Button.astro'
+---
+
+<ScreenshotLayout title="Password strength" columns={1.6}>
+  <Card>
+    <CardBody class="p-4">
+      <CardTitle class="mb-3">Create your account</CardTitle>
+      <FormGroup label="Email address" for="shot-email">
+        <input type="email" id="shot-email" class="form-control" value="paweł@tabler.io" autocomplete="email" />
+      </FormGroup>
+      <FormGroup label="Password" for="shot-password" class="mb-4">
+        <input type="password" id="shot-password" class="form-control" value="Tabler2026!" autocomplete="new-password" />
+        <Strength>Use 8 to 20 characters, with letters and numbers.</Strength>
+      </FormGroup>
+      <Button text="Create account" color="primary" block />
+    </CardBody>
+  </Card>
+</ScreenshotLayout>