complete UI CSS ownership remediation

packages/ui/components/badge.wrn

@@ -1,3 +1,5 @@
+import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
+
 component Badge {
   outputs {
     dismiss(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
@@ -48,7 +50,7 @@ component Badge {
   view {
     <span
       {...attrs}
-      class="wire-next wire-next--badge-root {anchorLabel || anchorIcon ? 'wire-next--badge-anchored' : ''} {class}"
+      class="wire-component wire-next--badge-root {anchorLabel || anchorIcon ? 'wire-next--badge-anchored' : ''} {class}"
       data-wrn-badge
       data-placement="{placement}"
       data-show="visible"
@@ -99,9 +101,18 @@ component Badge {
         {/if}
       </span>
     </span>
+    <ComponentBaseStyles hidden />
   }
 
   style {
+    @keyframes wire-badge-ping {
+      75%,
+      100% {
+        opacity: 0;
+        transform: scale(1.45);
+      }
+    }
+
     /* --- Badge --------------------------------------------------------------- */
     .wire-next--badge-root {
       position: relative;