penguinui is now in the root dir in penguinui-components/

penguinui-components/badge/animating-notification-badge.html

@@ -0,0 +1,36 @@
+<!-- primary Badge -->
+<span class="flex size-3 items-center justify-center rounded-full bg-primary dark:bg-primary-dark" aria-label="notification">
+    <span class="size-3 animate-ping rounded-full bg-primary motion-reduce:animate-none dark:bg-primary-dark">
+    </span>
+</span>
+
+<!-- secondary Badge -->
+<span class="flex size-3 items-center justify-center rounded-full bg-secondary dark:bg-secondary-dark" aria-label="notification">
+    <span class="size-3 animate-ping rounded-full bg-secondary motion-reduce:animate-none dark:bg-secondary-dark">
+    </span>
+</span>
+
+<!-- info Badge -->
+<span class="flex size-3 items-center justify-center rounded-full bg-info dark:bg-info" aria-label="notification">
+    <span class="size-3 animate-ping rounded-full bg-info motion-reduce:animate-none dark:bg-info">
+    </span>
+</span>
+
+<!-- success Badge -->
+<span class="flex size-3 items-center justify-center rounded-full bg-success dark:bg-success" aria-label="notification">
+    <span class="size-3 animate-ping rounded-full bg-success motion-reduce:animate-none dark:bg-success">
+    </span>
+</span>
+
+<!-- warning Badge -->
+<span class="flex size-3 items-center justify-center rounded-full bg-warning dark:bg-warning" aria-label="notification">
+    <span class="size-3 animate-ping rounded-full bg-warning motion-reduce:animate-none dark:bg-warning">
+    </span>
+</span>
+
+<!-- danger Badge -->
+<span class="flex size-3 items-center justify-center rounded-full bg-danger dark:bg-danger" aria-label="notification">
+    <span class="size-3 animate-ping rounded-full bg-danger motion-reduce:animate-none dark:bg-danger">
+    </span>
+</span>
+