diff --git a/packages/components/alert-dialog/src/stories/AlertDialogDemo.vue b/packages/components/alert-dialog/src/stories/AlertDialogDemo.vue
index 88a5041f0..d316b063e 100644
--- a/packages/components/alert-dialog/src/stories/AlertDialogDemo.vue
+++ b/packages/components/alert-dialog/src/stories/AlertDialogDemo.vue
@@ -29,11 +29,11 @@ withDefaults(defineProps<OkuAlertDialogProps>(), {
 
 <style>
 /* Define CSS classes without using css() */
-.triggerClass {
-  /* Your styles here */
+.alert_dialog_triggerClass {
+  /* Your alert_dialog_styles here */
 }
 
-.overlayClass {
+.alert_dialog_overlayClass {
   position: fixed;
   top: 0;
   right: 0;
@@ -43,7 +43,7 @@ withDefaults(defineProps<OkuAlertDialogProps>(), {
   opacity: 0.2;
 }
 
-.contentClass {
+.alert_dialog_contentClass {
   position: fixed;
   top: 0;
   left: 0;
@@ -60,8 +60,8 @@ withDefaults(defineProps<OkuAlertDialogProps>(), {
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
 }
 
-.cancelClass {
-  /* Your styles here */
+.alert_dialog_cancelClass {
+  /* Your alert_dialog_styles here */
   appearance: none;
   padding: 10px;
   border: none;
@@ -70,8 +70,8 @@ withDefaults(defineProps<OkuAlertDialogProps>(), {
   margin-top: 15px;
 }
 
-.actionClass {
-  /* Your styles here */
+.alert_dialog_actionClass {
+  /* Your alert_dialog_styles here */
   appearance: none;
   padding: 10px;
   border: none;
@@ -81,11 +81,11 @@ withDefaults(defineProps<OkuAlertDialogProps>(), {
   margin-top: 15px;
 }
 
-.titleClass {}
+.alert_dialog_titleClass {}
 
-.descriptionClass {}
+.alert_dialog_descriptionClass {}
 
-.chromaticContentClass{
+.alert_dialog_chromaticContentClass{
     position: fixed;
   top: 0;
   left: 0;
@@ -106,8 +106,8 @@ withDefaults(defineProps<OkuAlertDialogProps>(), {
   min-height: auto;
 }
 
-/* Define styles object as standard CSS */
-.styles {
+/* Define alert_dialog_styles object as standard CSS */
+.alert_dialog_styles {
   background-color: rgba(0, 0, 255, 0.3);
   border: 2px solid blue;
   padding: 10px;
@@ -121,7 +121,7 @@ withDefaults(defineProps<OkuAlertDialogProps>(), {
   }
 }
 
-.contentAttrClass {
+.alert_dialog_contentAttrClass {
   position: fixed;
   top: 0;
   left: 0;
@@ -142,7 +142,7 @@ withDefaults(defineProps<OkuAlertDialogProps>(), {
   min-height: 150px;
 }
 
-.triggerAttrClass {
+.alert_dialog_triggerAttrClass {
   background-color: rgba(0, 0, 255, 0.3);
   border: 2px solid blue;
   padding: 10px;
@@ -156,7 +156,7 @@ withDefaults(defineProps<OkuAlertDialogProps>(), {
   }
 }
 
-.overlayAttrClass {
+.alert_dialog_overlayAttrClass {
   position: fixed;
   top: 0;
   right: 0;
@@ -178,7 +178,7 @@ withDefaults(defineProps<OkuAlertDialogProps>(), {
   }
 }
 
-.contentAttrClass {
+.alert_dialog_contentAttrClass {
   position: fixed;
   top: 0;
   left: 0;
@@ -211,7 +211,7 @@ withDefaults(defineProps<OkuAlertDialogProps>(), {
   }
 }
 
-.cancelAttrClass {
+.alert_dialog_cancelAttrClass {
   background-color: rgba(0, 0, 255, 0.3);
   border: 2px solid blue;
   padding: 10px;
@@ -225,7 +225,7 @@ withDefaults(defineProps<OkuAlertDialogProps>(), {
   }
 }
 
-.actionAttrClass {
+.alert_dialog_actionAttrClass {
   background-color: rgba(0, 0, 255, 0.3);
   border: 2px solid blue;
   padding: 10px;
@@ -239,7 +239,7 @@ withDefaults(defineProps<OkuAlertDialogProps>(), {
   }
 }
 
-.titleAttrClass {
+.alert_dialog_titleAttrClass {
   background-color: rgba(0, 0, 255, 0.3);
   border: 2px solid blue;
   padding: 10px;
@@ -253,7 +253,7 @@ withDefaults(defineProps<OkuAlertDialogProps>(), {
   }
 }
 
-.descriptionAttrClass {
+.alert_dialog_descriptionAttrClass {
   background-color: rgba(0, 0, 255, 0.3);
   border: 2px solid blue;
   padding: 10px;
diff --git a/packages/components/alert-dialog/src/stories/Chromatic.vue b/packages/components/alert-dialog/src/stories/Chromatic.vue
index a77ade9f1..39f9bf431 100644
--- a/packages/components/alert-dialog/src/stories/Chromatic.vue
+++ b/packages/components/alert-dialog/src/stories/Chromatic.vue
@@ -18,22 +18,22 @@ import {
       <h1>Uncontrolled</h1>
       <h2>Closed</h2>
       <OkuAlertDialog>
-        <OkuAlertDialogTrigger class="triggerClass">
+        <OkuAlertDialogTrigger class="alert_dialog_triggerClass">
           delete everything
         </OkuAlertDialogTrigger>
         <OkuAlertDialogPortal>
-          <OkuAlertDialogOverlay class="overlayClass" />
-          <OkuAlertDialogContent class="chromaticContentClass">
-            <OkuAlertDialogTitle class="titleClass">
+          <OkuAlertDialogOverlay class="alert_dialog_overlayClass" />
+          <OkuAlertDialogContent class="alert_dialog_chromaticContentClass">
+            <OkuAlertDialogTitle class="alert_dialog_titleClass">
               Title
             </OkuAlertDialogTitle>
-            <OkuAlertDialogDescription class="descriptionClass">
+            <OkuAlertDialogDescription class="alert_dialog_descriptionClass">
               Description
             </OkuAlertDialogDescription>
-            <OkuAlertDialogAction class="actionClass">
+            <OkuAlertDialogAction class="alert_dialog_actionClass">
               Confirm
             </OkuAlertDialogAction>
-            <OkuAlertDialogCancel class="cancelClass">
+            <OkuAlertDialogCancel class="alert_dialog_cancelClass">
               Cancel
             </OkuAlertDialogCancel>
           </OkuAlertDialogContent>
@@ -42,28 +42,28 @@ import {
 
       <h2>Open</h2>
       <OkuAlertDialog default-open>
-        <OkuAlertDialogTrigger class="triggerClass">
+        <OkuAlertDialogTrigger class="alert_dialog_triggerClass">
           delete everything
         </OkuAlertDialogTrigger>
         <OkuAlertDialogPortal>
           <OkuAlertDialogOverlay
-            class="overlayClass"
+            class="alert_dialog_overlayClass"
             :style="{ left: '0px', bottom: '50%', width: '25%' }"
           />
           <OkuAlertDialogContent
-            class="chromaticContentClass"
+            class="alert_dialog_chromaticContentClass"
             :style="{ top: '25%', left: '12%' }"
           >
-            <OkuAlertDialogTitle class="titleClass">
+            <OkuAlertDialogTitle class="alert_dialog_titleClass">
               Title
             </OkuAlertDialogTitle>
-            <OkuAlertDialogDescription class="descriptionClass">
+            <OkuAlertDialogDescription class="alert_dialog_descriptionClass">
               Description
             </OkuAlertDialogDescription>
-            <OkuAlertDialogAction class="actionClass">
+            <OkuAlertDialogAction class="alert_dialog_actionClass">
               Confirm
             </OkuAlertDialogAction>
-            <OkuAlertDialogCancel class="cancelClass">
+            <OkuAlertDialogCancel class="alert_dialog_cancelClass">
               Cancel
             </OkuAlertDialogCancel>
           </OkuAlertDialogContent>
@@ -76,23 +76,23 @@ import {
       <h2>Closed</h2>
       <OkuAlertDialog>
         <OkuAlertDialogPortal>
-          <OkuAlertDialogOverlay class="overlayClass" />
-          <OkuAlertDialogContent class="chromaticContentClass">
-            <OkuAlertDialogTitle class="titleClass">
+          <OkuAlertDialogOverlay class="alert_dialog_overlayClass" />
+          <OkuAlertDialogContent class="alert_dialog_chromaticContentClass">
+            <OkuAlertDialogTitle class="alert_dialog_titleClass">
               Title
             </OkuAlertDialogTitle>
-            <OkuAlertDialogDescription class="descriptionClass">
+            <OkuAlertDialogDescription class="alert_dialog_descriptionClass">
               Description
             </OkuAlertDialogDescription>
-            <OkuAlertDialogAction class="actionClass">
+            <OkuAlertDialogAction class="alert_dialog_actionClass">
               Confirm
             </OkuAlertDialogAction>
-            <OkuAlertDialogCancel class="cancelClass">
+            <OkuAlertDialogCancel class="alert_dialog_cancelClass">
               Cancel
             </OkuAlertDialogCancel>
           </OkuAlertDialogContent>
         </OkuAlertDialogPortal>
-        <OkuAlertDialogTrigger class="triggerClass">
+        <OkuAlertDialogTrigger class="alert_dialog_triggerClass">
           delete everything
         </OkuAlertDialogTrigger>
       </OkuAlertDialog>
@@ -101,23 +101,23 @@ import {
       <OkuAlertDialog default-open>
         <OkuAlertDialogPortal>
           <OkuAlertDialogOverlay
-            class="overlayClass"
+            class="alert_dialog_overlayClass"
             :style="{ left: '25%', bottom: '50%', width: '25%' }"
           />
           <OkuAlertDialogContent
-            class="chromaticContentClass"
+            class="alert_dialog_chromaticContentClass"
             :style="{ top: '25%', left: '37%' }"
           >
-            <OkuAlertDialogTitle class="titleClass">
+            <OkuAlertDialogTitle class="alert_dialog_titleClass">
               Title
             </OkuAlertDialogTitle>
-            <OkuAlertDialogDescription class="descriptionClass">
+            <OkuAlertDialogDescription class="alert_dialog_descriptionClass">
               Description
             </OkuAlertDialogDescription>
-            <OkuAlertDialogAction class="actionClass">
+            <OkuAlertDialogAction class="alert_dialog_actionClass">
               Confirm
             </OkuAlertDialogAction>
-            <OkuAlertDialogCancel class="cancelClass">
+            <OkuAlertDialogCancel class="alert_dialog_cancelClass">
               Cancel
             </OkuAlertDialogCancel>
           </OkuAlertDialogContent>
@@ -129,22 +129,22 @@ import {
       <h1>Controlled</h1>
       <h2>Closed</h2>
       <OkuAlertDialog :open="false">
-        <OkuAlertDialogTrigger class="triggerClass">
+        <OkuAlertDialogTrigger class="alert_dialog_triggerClass">
           delete everything
         </OkuAlertDialogTrigger>
         <OkuAlertDialogPortal>
-          <OkuAlertDialogOverlay class="overlayClass" />
-          <OkuAlertDialogContent class="chromaticContentClass">
-            <OkuAlertDialogTitle class="titleClass">
+          <OkuAlertDialogOverlay class="alert_dialog_overlayClass" />
+          <OkuAlertDialogContent class="alert_dialog_chromaticContentClass">
+            <OkuAlertDialogTitle class="alert_dialog_titleClass">
               Title
             </OkuAlertDialogTitle>
-            <OkuAlertDialogDescription class="descriptionClass">
+            <OkuAlertDialogDescription class="alert_dialog_descriptionClass">
               Description
             </OkuAlertDialogDescription>
-            <OkuAlertDialogAction class="actionClass">
+            <OkuAlertDialogAction class="alert_dialog_actionClass">
               Confirm
             </OkuAlertDialogAction>
-            <OkuAlertDialogCancel class="cancelClass">
+            <OkuAlertDialogCancel class="alert_dialog_cancelClass">
               Cancel
             </OkuAlertDialogCancel>
           </OkuAlertDialogContent>
@@ -153,28 +153,28 @@ import {
 
       <h2>Open</h2>
       <OkuAlertDialog open>
-        <OkuAlertDialogTrigger class="triggerClass">
+        <OkuAlertDialogTrigger class="alert_dialog_triggerClass">
           delete everything
         </OkuAlertDialogTrigger>
         <OkuAlertDialogPortal>
           <OkuAlertDialogOverlay
-            class="overlayClass"
+            class="alert_dialog_overlayClass"
             :style="{ left: '50%', bottom: '50%', width: '25%' }"
           />
           <OkuAlertDialogContent
-            class="chromaticContentClass"
+            class="alert_dialog_chromaticContentClass"
             :style="{ top: '25%', left: '62%' }"
           >
-            <OkuAlertDialogTitle class="titleClass">
+            <OkuAlertDialogTitle class="alert_dialog_titleClass">
               Title
             </OkuAlertDialogTitle>
-            <OkuAlertDialogDescription class="descriptionClass">
+            <OkuAlertDialogDescription class="alert_dialog_descriptionClass">
               Description
             </OkuAlertDialogDescription>
-            <OkuAlertDialogAction class="actionClass">
+            <OkuAlertDialogAction class="alert_dialog_actionClass">
               Confirm
             </OkuAlertDialogAction>
-            <OkuAlertDialogCancel class="cancelClass">
+            <OkuAlertDialogCancel class="alert_dialog_cancelClass">
               Cancel
             </OkuAlertDialogCancel>
           </OkuAlertDialogContent>
@@ -187,23 +187,23 @@ import {
       <h2>Closed</h2>
       <OkuAlertDialog :open="false">
         <OkuAlertDialogPortal>
-          <OkuAlertDialogOverlay class="overlayClass" />
-          <OkuAlertDialogContent class="chromaticContentClass">
-            <OkuAlertDialogTitle class="titleClass">
+          <OkuAlertDialogOverlay class="alert_dialog_overlayClass" />
+          <OkuAlertDialogContent class="alert_dialog_chromaticContentClass">
+            <OkuAlertDialogTitle class="alert_dialog_titleClass">
               Title
             </OkuAlertDialogTitle>
-            <OkuAlertDialogDescription class="descriptionClass">
+            <OkuAlertDialogDescription class="alert_dialog_descriptionClass">
               Description
             </OkuAlertDialogDescription>
-            <OkuAlertDialogAction class="actionClass">
+            <OkuAlertDialogAction class="alert_dialog_actionClass">
               Confirm
             </OkuAlertDialogAction>
-            <OkuAlertDialogCancel class="cancelClass">
+            <OkuAlertDialogCancel class="alert_dialog_cancelClass">
               Cancel
             </OkuAlertDialogCancel>
           </OkuAlertDialogContent>
         </OkuAlertDialogPortal>
-        <OkuAlertDialogTrigger class="triggerClass">
+        <OkuAlertDialogTrigger class="alert_dialog_triggerClass">
           delete everything
         </OkuAlertDialogTrigger>
       </OkuAlertDialog>
@@ -212,23 +212,23 @@ import {
       <OkuAlertDialog open>
         <OkuAlertDialogPortal>
           <OkuAlertDialogOverlay
-            class="overlayClass"
+            class="alert_dialog_overlayClass"
             :style="{ left: '75%', bottom: '50%', width: '25%' }"
           />
           <OkuAlertDialogContent
-            class="chromaticContentClass"
+            class="alert_dialog_chromaticContentClass"
             :style="{ top: '25%', left: '88%' }"
           >
-            <OkuAlertDialogTitle class="titleClass">
+            <OkuAlertDialogTitle class="alert_dialog_titleClass">
               Title
             </OkuAlertDialogTitle>
-            <OkuAlertDialogDescription class="descriptionClass">
+            <OkuAlertDialogDescription class="alert_dialog_descriptionClass">
               Description
             </OkuAlertDialogDescription>
-            <OkuAlertDialogAction class="actionClass">
+            <OkuAlertDialogAction class="alert_dialog_actionClass">
               Confirm
             </OkuAlertDialogAction>
-            <OkuAlertDialogCancel class="cancelClass">
+            <OkuAlertDialogCancel class="alert_dialog_cancelClass">
               Cancel
             </OkuAlertDialogCancel>
           </OkuAlertDialogContent>
@@ -241,22 +241,22 @@ import {
       <h2>Closed</h2>
 
       <OkuAlertDialog :open="false">
-        <OkuAlertDialogTrigger class="triggerAttrClass">
+        <OkuAlertDialogTrigger class="alert_dialog_triggerAttrClass">
           delete everything
         </OkuAlertDialogTrigger>
         <OkuAlertDialogPortal>
-          <OkuAlertDialogOverlay class="overlayAttrClass" />
-          <OkuAlertDialogContent class="contentAttrClass">
-            <OkuAlertDialogTitle class="titleAttrClass">
+          <OkuAlertDialogOverlay class="alert_dialog_overlayAttrClass" />
+          <OkuAlertDialogContent class="alert_dialog_contentAttrClass">
+            <OkuAlertDialogTitle class="alert_dialog_titleAttrClass">
               Title
             </OkuAlertDialogTitle>
-            <OkuAlertDialogDescription class="descriptionAttrClass">
+            <OkuAlertDialogDescription class="alert_dialog_descriptionAttrClass">
               Description
             </OkuAlertDialogDescription>
-            <OkuAlertDialogAction class="actionAttrClass">
+            <OkuAlertDialogAction class="alert_dialog_actionAttrClass">
               Confirm
             </OkuAlertDialogAction>
-            <OkuAlertDialogCancel class="cancelAttrClass">
+            <OkuAlertDialogCancel class="alert_dialog_cancelAttrClass">
               Cancel
             </OkuAlertDialogCancel>
           </OkuAlertDialogContent>
@@ -265,22 +265,22 @@ import {
 
       <h2>Open</h2>
       <OkuAlertDialog open>
-        <OkuAlertDialogTrigger class="triggerAttrClass">
+        <OkuAlertDialogTrigger class="alert_dialog_triggerAttrClass">
           delete everything
         </OkuAlertDialogTrigger>
         <OkuAlertDialogPortal>
-          <OkuAlertDialogOverlay class="overlayAttrClass" :style="{ top: '50%' }" />
-          <OkuAlertDialogContent class="contentAttrClass" :style="{ top: '75%' }">
-            <OkuAlertDialogTitle class="titleAttrClass">
+          <OkuAlertDialogOverlay class="alert_dialog_overlayAttrClass" :style="{ top: '50%' }" />
+          <OkuAlertDialogContent class="alert_dialog_contentAttrClass" :style="{ top: '75%' }">
+            <OkuAlertDialogTitle class="alert_dialog_titleAttrClass">
               Title
             </OkuAlertDialogTitle>
-            <OkuAlertDialogDescription class="descriptionAttrClass">
+            <OkuAlertDialogDescription class="alert_dialog_descriptionAttrClass">
               Description
             </OkuAlertDialogDescription>
-            <OkuAlertDialogAction class="actionAttrClass">
+            <OkuAlertDialogAction class="alert_dialog_actionAttrClass">
               Confirm
             </OkuAlertDialogAction>
-            <OkuAlertDialogCancel class="cancelAttrClass">
+            <OkuAlertDialogCancel class="alert_dialog_cancelAttrClass">
               Cancel
             </OkuAlertDialogCancel>
           </OkuAlertDialogContent>
diff --git a/packages/components/alert-dialog/src/stories/Controlled.vue b/packages/components/alert-dialog/src/stories/Controlled.vue
index 2bb33d9c9..5411bb045 100644
--- a/packages/components/alert-dialog/src/stories/Controlled.vue
+++ b/packages/components/alert-dialog/src/stories/Controlled.vue
@@ -19,7 +19,7 @@ const housePurchased = ref(false)
     </div>
     <OkuAlertDialog :open="open" @open-change="open = $event">
       <OkuAlertDialogTrigger
-        class="triggerClass"
+        class="alert_dialog_triggerClass"
         @click="(e) => {
           console.log('housePurchased', housePurchased)
           if (housePurchased) {
@@ -31,18 +31,18 @@ const housePurchased = ref(false)
         {{ housePurchased ? 'You bought the house! Sell it!' : 'Buy this house' }}
       </OkuAlertDialogTrigger>
       <OkuAlertDialogPortal>
-        <OkuAlertDialogOverlay class="overlayClass" />
-        <OkuAlertDialogContent class="contentClass">
-          <OkuAlertDialogTitle class="titleClass">
+        <OkuAlertDialogOverlay class="alert_dialog_overlayClass" />
+        <OkuAlertDialogContent class="alert_dialog_contentClass">
+          <OkuAlertDialogTitle class="alert_dialog_titleClass">
             Are you sure?
           </OkuAlertDialogTitle>
-          <OkuAlertDialogDescription class="descriptionClass">
+          <OkuAlertDialogDescription class="alert_dialog_descriptionClass">
             This will do a very dangerous thing. Thar be dragons!
           </OkuAlertDialogDescription>
-          <OkuAlertDialogAction class="actionClass" @click="housePurchased = true">
+          <OkuAlertDialogAction class="alert_dialog_actionClass" @click="housePurchased = true">
             yolo, do it
           </OkuAlertDialogAction>
-          <OkuAlertDialogCancel class="cancelClass">
+          <OkuAlertDialogCancel class="alert_dialog_cancelClass">
             maybe not
           </OkuAlertDialogCancel>
         </OkuAlertDialogContent>
diff --git a/packages/components/alert-dialog/src/stories/Styled.vue b/packages/components/alert-dialog/src/stories/Styled.vue
index 5752a9bf4..fc06b755d 100644
--- a/packages/components/alert-dialog/src/stories/Styled.vue
+++ b/packages/components/alert-dialog/src/stories/Styled.vue
@@ -8,22 +8,22 @@ import {
 <template>
   <div>
     <OkuAlertDialog>
-      <OkuAlertDialogTrigger class="triggerClass">
+      <OkuAlertDialogTrigger class="alert_dialog_triggerClass">
         delete everything
       </OkuAlertDialogTrigger>
       <OkuAlertDialogPortal>
-        <OkuAlertDialogOverlay class="overlayClass" />
-        <OkuAlertDialogContent class="contentClass">
-          <OkuAlertDialogTitle class="titleClass">
+        <OkuAlertDialogOverlay class="alert_dialog_overlayClass" />
+        <OkuAlertDialogContent class="alert_dialog_contentClass">
+          <OkuAlertDialogTitle class="alert_dialog_titleClass">
             Are you sure?
           </OkuAlertDialogTitle>
-          <OkuAlertDialogDescription class="descriptionClass">
+          <OkuAlertDialogDescription class="alert_dialog_descriptionClass">
             This will do a very dangerous thing. Thar be dragons!
           </OkuAlertDialogDescription>
-          <OkuAlertDialogAction class="actionClass">
+          <OkuAlertDialogAction class="alert_dialog_actionClass">
             yolo, do it
           </OkuAlertDialogAction>
-          <OkuAlertDialogCancel class="cancelClass">
+          <OkuAlertDialogCancel class="alert_dialog_cancelClass">
             maybe not
           </OkuAlertDialogCancel>
         </OkuAlertDialogContent>
diff --git a/packages/components/alert-dialog/tests/__snapshots__/alert-dialog.test.ts.snap b/packages/components/alert-dialog/tests/__snapshots__/alert-dialog.test.ts.snap
index 0c3db0ead..d4b55b643 100644
--- a/packages/components/alert-dialog/tests/__snapshots__/alert-dialog.test.ts.snap
+++ b/packages/components/alert-dialog/tests/__snapshots__/alert-dialog.test.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`OkuAlertDialog > Controlled > renders correctly 1`] = `
 "<div>
-  <div><img src=\\"https://images.unsplash.com/photo-1682686580224-cd46ea1a6950?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=80\\" alt=\\"a large white house with a red roof\\"></div><button type=\\"button\\" aria-haspopup=\\"dialog\\" aria-expanded=\\"true\\" aria-controls=\\"oku-15\\" data-state=\\"open\\" class=\\"triggerClass\\">Buy this house</button>
+  <div><img src=\\"https://images.unsplash.com/photo-1682686580224-cd46ea1a6950?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=80\\" alt=\\"a large white house with a red roof\\"></div><button type=\\"button\\" aria-haspopup=\\"dialog\\" aria-expanded=\\"true\\" aria-controls=\\"oku-15\\" data-state=\\"open\\" class=\\"alert_dialog_triggerClass\\">Buy this house</button>
   <!--teleport start-->
   <!--teleport end-->
   <!--teleport start-->
@@ -66,7 +66,7 @@ exports[`OkuAlertDialog > Controlled > should be able to close 1`] = `
         aria-controls="oku-21"
         aria-expanded="false"
         aria-haspopup="dialog"
-        class="triggerClass"
+        class="alert_dialog_triggerClass"
         data-state="closed"
         type="button"
       >
@@ -138,7 +138,7 @@ exports[`OkuAlertDialog > Controlled > should be able to open 1`] = `
         aria-controls="oku-18"
         aria-expanded="true"
         aria-haspopup="dialog"
-        class="triggerClass"
+        class="alert_dialog_triggerClass"
         data-state="open"
         type="button"
       >
@@ -156,7 +156,7 @@ exports[`OkuAlertDialog > Controlled > should be able to open 1`] = `
     </div>
   </div>
   <div
-    class="overlayClass"
+    class="alert_dialog_overlayClass"
     data-state="open"
     style="pointer-events: auto;"
   >
@@ -167,7 +167,7 @@ exports[`OkuAlertDialog > Controlled > should be able to open 1`] = `
   <div
     aria-describedby="oku-20"
     aria-labelledby="oku-19"
-    class="contentClass"
+    class="alert_dialog_contentClass"
     data-state="open"
     id="oku-18"
     role="alertdialog"
@@ -176,25 +176,25 @@ exports[`OkuAlertDialog > Controlled > should be able to open 1`] = `
   >
     
     <h2
-      class="titleClass"
+      class="alert_dialog_titleClass"
       id="oku-19"
     >
        Are you sure? 
     </h2>
     <p
-      class="descriptionClass"
+      class="alert_dialog_descriptionClass"
       id="oku-20"
     >
        This will do a very dangerous thing. Thar be dragons! 
     </p>
     <button
-      class="actionClass"
+      class="alert_dialog_actionClass"
       type="button"
     >
        yolo, do it 
     </button>
     <button
-      class="cancelClass"
+      class="alert_dialog_cancelClass"
       type="button"
     >
        maybe not 
@@ -237,7 +237,7 @@ exports[`OkuAlertDialog > OkuAlertDialogTitle renders correctly 1`] = `"\`OkuDia
 exports[`OkuAlertDialog > OkuAlertDialogTrigger renders correctly 1`] = `"\`OkuDialogTrigger\` must be used within \`OkuDialog\`"`;
 
 exports[`OkuAlertDialog > StyledVue > renders correctly 1`] = `
-"<div><button type=\\"button\\" aria-haspopup=\\"dialog\\" aria-expanded=\\"true\\" aria-controls=\\"oku-3\\" data-state=\\"open\\" class=\\"triggerClass\\"> delete everything </button>
+"<div><button type=\\"button\\" aria-haspopup=\\"dialog\\" aria-expanded=\\"true\\" aria-controls=\\"oku-3\\" data-state=\\"open\\" class=\\"alert_dialog_triggerClass\\"> delete everything </button>
   <!--teleport start-->
   <!--teleport end-->
   <!--teleport start-->
@@ -275,7 +275,7 @@ exports[`OkuAlertDialog > StyledVue > should be able to close 1`] = `
         aria-controls="oku-9"
         aria-expanded="false"
         aria-haspopup="dialog"
-        class="triggerClass"
+        class="alert_dialog_triggerClass"
         data-state="closed"
         type="button"
       >
@@ -321,7 +321,7 @@ exports[`OkuAlertDialog > StyledVue > should be able to open 1`] = `
         aria-controls="oku-6"
         aria-expanded="true"
         aria-haspopup="dialog"
-        class="triggerClass"
+        class="alert_dialog_triggerClass"
         data-state="open"
         type="button"
       >
@@ -339,7 +339,7 @@ exports[`OkuAlertDialog > StyledVue > should be able to open 1`] = `
     </div>
   </div>
   <div
-    class="overlayClass"
+    class="alert_dialog_overlayClass"
     data-state="open"
     style="pointer-events: auto;"
   >
@@ -350,7 +350,7 @@ exports[`OkuAlertDialog > StyledVue > should be able to open 1`] = `
   <div
     aria-describedby="oku-8"
     aria-labelledby="oku-7"
-    class="contentClass"
+    class="alert_dialog_contentClass"
     data-state="open"
     id="oku-6"
     role="alertdialog"
@@ -359,25 +359,25 @@ exports[`OkuAlertDialog > StyledVue > should be able to open 1`] = `
   >
     
     <h2
-      class="titleClass"
+      class="alert_dialog_titleClass"
       id="oku-7"
     >
        Are you sure? 
     </h2>
     <p
-      class="descriptionClass"
+      class="alert_dialog_descriptionClass"
       id="oku-8"
     >
        This will do a very dangerous thing. Thar be dragons! 
     </p>
     <button
-      class="actionClass"
+      class="alert_dialog_actionClass"
       type="button"
     >
        yolo, do it 
     </button>
     <button
-      class="cancelClass"
+      class="alert_dialog_cancelClass"
       type="button"
     >
        maybe not 
diff --git a/packages/components/alert-dialog/tests/alert-dialog.test.ts b/packages/components/alert-dialog/tests/alert-dialog.test.ts
index 05fa021ab..8e512c8cf 100644
--- a/packages/components/alert-dialog/tests/alert-dialog.test.ts
+++ b/packages/components/alert-dialog/tests/alert-dialog.test.ts
@@ -113,7 +113,7 @@ describe('OkuAlertDialog', () => {
         attachTo: document.body,
       })
 
-      await wrapper.find('[class="triggerClass"]').trigger('click')
+      await wrapper.find('[class="alert_dialog_triggerClass"]').trigger('click')
       await nextTick()
     })
 
@@ -133,7 +133,7 @@ describe('OkuAlertDialog', () => {
     })
 
     it('should be able to close', async () => {
-      await wrapper.find('[class="triggerClass"]').trigger('click')
+      await wrapper.find('[class="alert_dialog_triggerClass"]').trigger('click')
       await nextTick()
       expect(document.body).toMatchSnapshot()
     })
@@ -147,7 +147,7 @@ describe('OkuAlertDialog', () => {
         attachTo: document.body,
       })
 
-      await wrapper.find('[class="triggerClass"]').trigger('click')
+      await wrapper.find('[class="alert_dialog_triggerClass"]').trigger('click')
       await nextTick()
     })
 
@@ -168,7 +168,7 @@ describe('OkuAlertDialog', () => {
     })
 
     it('should be able to close', async () => {
-      await wrapper.find('[class="triggerClass"]').trigger('click')
+      await wrapper.find('[class="alert_dialog_triggerClass"]').trigger('click')
       await nextTick()
       expect(document.body).toMatchSnapshot()
     })
diff --git a/packages/components/checkbox/src/stories/CheckboxDemo.vue b/packages/components/checkbox/src/stories/CheckboxDemo.vue
index 47da4368f..56575e433 100644
--- a/packages/components/checkbox/src/stories/CheckboxDemo.vue
+++ b/packages/components/checkbox/src/stories/CheckboxDemo.vue
@@ -100,10 +100,10 @@ function updated(res: any) {
           id="checkbox"
           ref="refdd"
           :checked="data"
-          class="rootClass"
+          class="checkbox_rootClass"
           @checked-change="updated"
         >
-          <OkuCheckboxIndicator class="indicatorClass" />
+          <OkuCheckboxIndicator class="checkbox_indicatorClass" />
         </OkuCheckbox>
 
         <div>
@@ -118,9 +118,9 @@ function updated(res: any) {
           id="checkbox"
           ref="refdd"
           v-model="data"
-          class="rootClass"
+          class="checkbox_rootClass"
         >
-          <OkuCheckboxIndicator class="indicatorClass" />
+          <OkuCheckboxIndicator class="checkbox_indicatorClass" />
         </OkuCheckbox>
 
         <div>
@@ -148,7 +148,7 @@ function updated(res: any) {
   vertical-align: middle;
 }
 
-.rootClass {
+.checkbox_rootClass {
   border: 1px solid var(--gray300);
   width: 30px;
   height: 30px;
@@ -165,8 +165,8 @@ function updated(res: any) {
   }
 }
 
-/* indicatorClass */
-.indicatorClass {
+/* checkbox_indicatorClass */
+.checkbox_indicatorClass {
   background-color: var(--red);
   display: block;
   width: 20px;
@@ -178,8 +178,8 @@ function updated(res: any) {
   }
 }
 
-/* fadeIn and fadeOut keyframes */
-@keyframes fadeIn {
+/* checkbox_fadeIn and checkbox_fadeOut keyframes */
+@keyframes checkbox_fadeIn {
   from {
     opacity: 0;
   }
@@ -188,7 +188,7 @@ function updated(res: any) {
   }
 }
 
-@keyframes fadeOut {
+@keyframes checkbox_fadeOut {
   from {
     opacity: 1;
   }
@@ -197,21 +197,21 @@ function updated(res: any) {
   }
 }
 
-/* animatedIndicatorClass */
-.animatedIndicatorClass {
+/* checkbox_animatedIndicatorClass */
+.checkbox_animatedIndicatorClass {
   transition: height 300ms;
 
   &[data-state="checked"] {
-    animation: fadeIn 1000ms ease-out;
+    animation: checkbox_fadeIn 1000ms ease-out;
   }
 
   &[data-state="unchecked"] {
-    animation: fadeOut 1000ms ease-in;
+    animation: checkbox_fadeOut 1000ms ease-in;
   }
 }
 
 /* styles */
-.rootAttrClass {
+.checkbox_rootAttrClass {
   background-color: rgba(0, 0, 255, 0.3);
   border: 2px solid blue;
   padding: 10px;
@@ -237,7 +237,7 @@ function updated(res: any) {
   }
 }
 
-.indicatorAttrClass {
+.checkbox_indicatorAttrClass {
   background-color: rgba(0, 0, 255, 0.3);
   border: 2px solid blue;
   padding: 10px;
diff --git a/packages/components/collapsible/src/stories/CollapsibleDemo.vue b/packages/components/collapsible/src/stories/CollapsibleDemo.vue
index 8a3123eb1..1017dfd4a 100644
--- a/packages/components/collapsible/src/stories/CollapsibleDemo.vue
+++ b/packages/components/collapsible/src/stories/CollapsibleDemo.vue
@@ -16,8 +16,8 @@ const open = ref(true)
 <template>
   <div class="container">
     <div v-if="template === '#1' || allshow">
-      <OkuCollapsible v-model="open" class="root">
-        <OkuCollapsibleTrigger class="trigger">
+      <OkuCollapsible v-model="open" class="collapsible_root">
+        <OkuCollapsibleTrigger class="collapsible_trigger">
           {{ open ? 'close' : 'open' }}
         </OkuCollapsibleTrigger>
         <OkuCollapsibleContent class="content">
@@ -33,8 +33,8 @@ const open = ref(true)
       <h2 class="text-lg">
         Closed
       </h2>
-      <OkuCollapsible v-model="close" class="root">
-        <OkuCollapsibleTrigger class="trigger">
+      <OkuCollapsible v-model="close" class="collapsible_root">
+        <OkuCollapsibleTrigger class="collapsible_trigger">
           {{ close ? 'close' : 'open' }}
         </OkuCollapsibleTrigger>
         <OkuCollapsibleContent class="content">
@@ -44,8 +44,8 @@ const open = ref(true)
       <h2 class="text-lg">
         open
       </h2>
-      <OkuCollapsible v-model="open" class="root">
-        <OkuCollapsibleTrigger class="trigger">
+      <OkuCollapsible v-model="open" class="collapsible_root">
+        <OkuCollapsibleTrigger class="collapsible_trigger">
           {{ open ? 'close' : 'open' }}
         </OkuCollapsibleTrigger>
         <OkuCollapsibleContent class="content">
@@ -58,8 +58,8 @@ const open = ref(true)
       <h2 class="text-lg">
         Closed
       </h2>
-      <OkuCollapsible class="root" :open="false">
-        <OkuCollapsibleTrigger class="trigger">
+      <OkuCollapsible class="collapsible_root" :open="false">
+        <OkuCollapsibleTrigger class="collapsible_trigger">
           close
         </OkuCollapsibleTrigger>
         <OkuCollapsibleContent class="content">
@@ -69,8 +69,8 @@ const open = ref(true)
       <h2 class="text-lg">
         open
       </h2>
-      <OkuCollapsible class="root" :open="true">
-        <OkuCollapsibleTrigger class="trigger">
+      <OkuCollapsible class="collapsible_root" :open="true">
+        <OkuCollapsibleTrigger class="collapsible_trigger">
           open
         </OkuCollapsibleTrigger>
         <OkuCollapsibleContent class="content">
@@ -80,8 +80,8 @@ const open = ref(true)
       <h1 class="text-2xl">
         disabled
       </h1>
-      <OkuCollapsible class="root" :open="false" disabled>
-        <OkuCollapsibleTrigger class="trigger">
+      <OkuCollapsible class="collapsible_root" :open="false" disabled>
+        <OkuCollapsibleTrigger class="collapsible_trigger">
           close
         </OkuCollapsibleTrigger>
         <OkuCollapsibleContent class="content">
@@ -91,8 +91,8 @@ const open = ref(true)
     </div>
 
     <div v-if="template === '#3' || allshow">
-      <OkuCollapsible v-model="open" class="root">
-        <OkuCollapsibleTrigger class="trigger">
+      <OkuCollapsible v-model="open" class="collapsible_root">
+        <OkuCollapsibleTrigger class="collapsible_trigger">
           {{ open ? 'close' : 'open' }}
         </OkuCollapsibleTrigger>
         <OkuCollapsibleContent class="content" :transition="{ name: 'sx' }">
@@ -104,12 +104,12 @@ const open = ref(true)
 </template>
 
 <style>
-.root {
+.collapsible_root {
   max-width: 20em;
   font-family: sans-serif;
 }
 
-.trigger {
+.collapsible_trigger {
   width: 100%;
   text-align: inherit;
   box-sizing: border-box;
@@ -122,22 +122,22 @@ const open = ref(true)
   font-size: 1.2em;
 }
 
-.trigger:focus {
+.collapsible_trigger:focus {
   outline: none;
   box-shadow: inset 0 -5px 0 0 crimson;
   color: red;
 }
 
-.trigger[data-disabled] {
+.collapsible_trigger[data-disabled] {
   color: gray;
 }
 
-.trigger[data-state="open"] {
+.collapsible_trigger[data-state="open"] {
   background-color: red;
   color: white;
 }
 
-.trigger[data-state="open"]:focus {
+.collapsible_trigger[data-state="open"]:focus {
   color: black;
   box-shadow: inset 0 -5px 0 0 black;
 }
diff --git a/packages/components/dialog/src/stories/Animated.vue b/packages/components/dialog/src/stories/Animated.vue
index 90d92851f..5ca667e25 100644
--- a/packages/components/dialog/src/stories/Animated.vue
+++ b/packages/components/dialog/src/stories/Animated.vue
@@ -9,13 +9,13 @@ const open = ref(false)
 <template>
   <div>
     <OkuDialog v-model="open">
-      <OkuDialogTrigger class="triggerClass">
+      <OkuDialogTrigger class="dialog_triggerClass">
         open
       </OkuDialogTrigger>
       <OkuDialogPortal>
-        <OkuDialogOverlay class="animatedOverlayClass" />
+        <OkuDialogOverlay class="dialog_animatedOverlayClass" />
         <OkuDialogContent
-          class="animatedContentClass"
+          class="dialog_animatedContentClass"
         >
           <OkuDialogTitle>
             Title
diff --git a/packages/components/dialog/src/stories/Chromatic.vue b/packages/components/dialog/src/stories/Chromatic.vue
index e0fd5eb40..23c6d8092 100644
--- a/packages/components/dialog/src/stories/Chromatic.vue
+++ b/packages/components/dialog/src/stories/Chromatic.vue
@@ -14,19 +14,19 @@ import { OkuDialog, OkuDialogClose, OkuDialogContent, OkuDialogDescription, OkuD
         <h1>Uncontrolled</h1>
         <h2>Closed</h2>
         <OkuDialog>
-          <OkuDialogTrigger class="triggerClass">
+          <OkuDialogTrigger class="dialog_triggerClass">
             open
           </OkuDialogTrigger>
           <OkuDialogPortal>
-            <OkuDialogOverlay class="overlayClass" />
-            <OkuDialogContent class="chromaticContentClass">
+            <OkuDialogOverlay class="dialog_overlayClass" />
+            <OkuDialogContent class="dialog_chromaticContentClass">
               <OkuDialogTitle>
                 Title
               </OkuDialogTitle>
               <OkuDialogDescription>
                 Description
               </OkuDialogDescription>
-              <OkuDialogClose class="closeClass">
+              <OkuDialogClose class="dialog_closeClass">
                 close
               </OkuDialogClose>
             </OkuDialogContent>
@@ -35,22 +35,22 @@ import { OkuDialog, OkuDialogClose, OkuDialogContent, OkuDialogDescription, OkuD
 
         <h2>Open</h2>
         <OkuDialog :default-open="true">
-          <OkuDialogTrigger class="triggerClass">
+          <OkuDialogTrigger class="dialog_triggerClass">
             open
           </OkuDialogTrigger>
           <OkuDialogPortal>
             <OkuDialogOverlay
-              class="overlayClass" style=" left: 0; bottom: 50%; width: 25%
+              class="dialog_overlayClass" style=" left: 0; bottom: 50%; width: 25%
             ;"
             />
-            <OkuDialogContent class="chromaticContentClass" style="top: 25%; left:12%;">
+            <OkuDialogContent class="dialog_chromaticContentClass" style="top: 25%; left:12%;">
               <OkuDialogTitle>
                 Title
               </OkuDialogTitle>
               <OkuDialogDescription>
                 Description
               </OkuDialogDescription>
-              <OkuDialogClose class="closeClass">
+              <OkuDialogClose class="dialog_closeClass">
                 close
               </OkuDialogClose>
             </OkuDialogContent>
@@ -62,20 +62,20 @@ import { OkuDialog, OkuDialogClose, OkuDialogContent, OkuDialogDescription, OkuD
         <h2>Closed</h2>
         <OkuDialog>
           <OkuDialogPortal>
-            <OkuDialogOverlay class="overlayClass" />
-            <OkuDialogContent class="chromaticContentClass">
+            <OkuDialogOverlay class="dialog_overlayClass" />
+            <OkuDialogContent class="dialog_chromaticContentClass">
               <OkuDialogTitle>
                 Title
               </OkuDialogTitle>
               <OkuDialogDescription>
                 Description
               </OkuDialogDescription>
-              <OkuDialogClose class="closeClass">
+              <OkuDialogClose class="dialog_closeClass">
                 close
               </OkuDialogClose>
             </OkuDialogContent>
           </OkuDialogPortal>
-          <OkuDialogTrigger class="triggerClass">
+          <OkuDialogTrigger class="dialog_triggerClass">
             open
           </OkuDialogTrigger>
         </OkuDialog>
@@ -84,22 +84,22 @@ import { OkuDialog, OkuDialogClose, OkuDialogContent, OkuDialogDescription, OkuD
         <OkuDialog :default-open="true">
           <OkuDialogPortal>
             <OkuDialogOverlay
-              class="overlayClass" style=" left: 25%; bottom: 50%; width: 25%
+              class="dialog_overlayClass" style=" left: 25%; bottom: 50%; width: 25%
             ;"
             />
-            <OkuDialogContent class="chromaticContentClass" style="top: 25%; left:37%;">
+            <OkuDialogContent class="dialog_chromaticContentClass" style="top: 25%; left:37%;">
               <OkuDialogTitle>
                 Title
               </OkuDialogTitle>
               <OkuDialogDescription>
                 Description
               </OkuDialogDescription>
-              <OkuDialogClose class="closeClass">
+              <OkuDialogClose class="dialog_closeClass">
                 close
               </OkuDialogClose>
             </OkuDialogContent>
           </OkuDialogPortal>
-          <OkuDialogTrigger class="triggerClass">
+          <OkuDialogTrigger class="dialog_triggerClass">
             open
           </OkuDialogTrigger>
         </OkuDialog>
@@ -108,19 +108,19 @@ import { OkuDialog, OkuDialogClose, OkuDialogContent, OkuDialogDescription, OkuD
         <h1>Controlled</h1>
         <h2>Closed</h2>
         <OkuDialog :open="false">
-          <OkuDialogTrigger class="triggerClass">
+          <OkuDialogTrigger class="dialog_triggerClass">
             open
           </OkuDialogTrigger>
           <OkuDialogPortal>
-            <OkuDialogOverlay class="overlayClass" />
-            <OkuDialogContent class="chromaticContentClass">
+            <OkuDialogOverlay class="dialog_overlayClass" />
+            <OkuDialogContent class="dialog_chromaticContentClass">
               <OkuDialogTitle>
                 Title
               </OkuDialogTitle>
               <OkuDialogDescription>
                 Description
               </OkuDialogDescription>
-              <OkuDialogClose class="closeClass">
+              <OkuDialogClose class="dialog_closeClass">
                 close
               </OkuDialogClose>
             </OkuDialogContent>
@@ -129,22 +129,22 @@ import { OkuDialog, OkuDialogClose, OkuDialogContent, OkuDialogDescription, OkuD
 
         <h2>Open</h2>
         <OkuDialog :open="true">
-          <OkuDialogTrigger class="triggerClass">
+          <OkuDialogTrigger class="dialog_triggerClass">
             open
           </OkuDialogTrigger>
           <OkuDialogPortal>
             <OkuDialogOverlay
-              class="overlayClass" style=" left: 50%; bottom: 50%; width: 25%
+              class="dialog_overlayClass" style=" left: 50%; bottom: 50%; width: 25%
             ;"
             />
-            <OkuDialogContent class="chromaticContentClass" style="top: 25%; left:62%;">
+            <OkuDialogContent class="dialog_chromaticContentClass" style="top: 25%; left:62%;">
               <OkuDialogTitle>
                 Title
               </OkuDialogTitle>
               <OkuDialogDescription>
                 Description
               </OkuDialogDescription>
-              <OkuDialogClose class="closeClass">
+              <OkuDialogClose class="dialog_closeClass">
                 close
               </OkuDialogClose>
             </OkuDialogContent>
@@ -156,20 +156,20 @@ import { OkuDialog, OkuDialogClose, OkuDialogContent, OkuDialogDescription, OkuD
         <h2>Closed</h2>
         <OkuDialog :open="false">
           <OkuDialogPortal>
-            <OkuDialogOverlay class="overlayClass" />
-            <OkuDialogContent class="chromaticContentClass">
+            <OkuDialogOverlay class="dialog_overlayClass" />
+            <OkuDialogContent class="dialog_chromaticContentClass">
               <OkuDialogTitle>
                 Title
               </OkuDialogTitle>
               <OkuDialogDescription>
                 Description
               </OkuDialogDescription>
-              <OkuDialogClose class="closeClass">
+              <OkuDialogClose class="dialog_closeClass">
                 close
               </OkuDialogClose>
             </OkuDialogContent>
           </OkuDialogPortal>
-          <OkuDialogTrigger class="triggerClass">
+          <OkuDialogTrigger class="dialog_triggerClass">
             open
           </OkuDialogTrigger>
         </OkuDialog>
@@ -178,22 +178,22 @@ import { OkuDialog, OkuDialogClose, OkuDialogContent, OkuDialogDescription, OkuD
         <OkuDialog :open="true">
           <OkuDialogPortal>
             <OkuDialogOverlay
-              class="overlayClass" style=" left: 75%; bottom: 50%; width: 25%
+              class="dialog_overlayClass" style=" left: 75%; bottom: 50%; width: 25%
             ;"
             />
-            <OkuDialogContent class="chromaticContentClass" style="top: 25%; left:88%;">
+            <OkuDialogContent class="dialog_chromaticContentClass" style="top: 25%; left:88%;">
               <OkuDialogTitle>
                 Title
               </OkuDialogTitle>
               <OkuDialogDescription>
                 Description
               </OkuDialogDescription>
-              <OkuDialogClose class="closeClass">
+              <OkuDialogClose class="dialog_closeClass">
                 close
               </OkuDialogClose>
             </OkuDialogContent>
           </OkuDialogPortal>
-          <OkuDialogTrigger class="triggerClass">
+          <OkuDialogTrigger class="dialog_triggerClass">
             open
           </OkuDialogTrigger>
         </OkuDialog>
@@ -208,18 +208,18 @@ import { OkuDialog, OkuDialogClose, OkuDialogContent, OkuDialogDescription, OkuD
       <div>
         <h1>Forced mount</h1>
         <OkuDialog>
-          <OkuDialogTrigger class="triggerClass">
+          <OkuDialogTrigger class="dialog_triggerClass">
             open
           </OkuDialogTrigger>
           <OkuDialogPortal :force-mount="true">
             <OkuDialogOverlay
-              class="overlayClass" style="
+              class="dialog_overlayClass" style="
                 top: 50%;
                 background-color: rgba(0, 0, 0, 0.3);
               "
             />
             <OkuDialogContent
-              class="chromaticContentClass"
+              class="dialog_chromaticContentClass"
               style="left: 25%; top: 75%;"
             >
               <OkuDialogTitle>
@@ -228,7 +228,7 @@ import { OkuDialog, OkuDialogClose, OkuDialogContent, OkuDialogDescription, OkuD
               <OkuDialogDescription>
                 Description
               </OkuDialogDescription>
-              <OkuDialogClose class="closeClass">
+              <OkuDialogClose class="dialog_closeClass">
                 close
               </OkuDialogClose>
             </OkuDialogContent>
@@ -239,15 +239,15 @@ import { OkuDialog, OkuDialogClose, OkuDialogContent, OkuDialogDescription, OkuD
         <h1>State attributes</h1>
         <h2>Closed</h2>
         <OkuDialog>
-          <OkuDialogTrigger class="triggerAttrClass">
+          <OkuDialogTrigger class="dialog_triggerAttrClass">
             open
           </OkuDialogTrigger>
           <OkuDialogPortal>
             <OkuDialogOverlay
-              class="overlayAttrClass"
+              class="dialog_overlayAttrClass"
             />
             <OkuDialogContent
-              class="contentAttrClass"
+              class="dialog_contentAttrClass"
             >
               <OkuDialogTitle>
                 Title
@@ -255,7 +255,7 @@ import { OkuDialog, OkuDialogClose, OkuDialogContent, OkuDialogDescription, OkuD
               <OkuDialogDescription>
                 Description
               </OkuDialogDescription>
-              <OkuDialogClose class="closeAttrClass">
+              <OkuDialogClose class="dialog_closeAttrClass">
                 close
               </OkuDialogClose>
             </OkuDialogContent>
@@ -264,15 +264,15 @@ import { OkuDialog, OkuDialogClose, OkuDialogContent, OkuDialogDescription, OkuD
 
         <h2>Open</h2>
         <OkuDialog :default-open="true">
-          <OkuDialogTrigger class="triggerAttrClass">
+          <OkuDialogTrigger class="dialog_triggerAttrClass">
             open
           </OkuDialogTrigger>
           <OkuDialogPortal>
             <OkuDialogOverlay
-              class="overlayAttrClass" style="left: 50%;top: 50%;"
+              class="dialog_overlayAttrClass" style="left: 50%;top: 50%;"
             />
             <OkuDialogContent
-              class="contentAttrClass" style="left: 75%;top: 75%;"
+              class="dialog_contentAttrClass" style="left: 75%;top: 75%;"
             >
               <OkuDialogTitle>
                 Title
@@ -280,7 +280,7 @@ import { OkuDialog, OkuDialogClose, OkuDialogContent, OkuDialogDescription, OkuD
               <OkuDialogDescription>
                 Description
               </OkuDialogDescription>
-              <OkuDialogClose class="closeAttrClass">
+              <OkuDialogClose class="dialog_closeAttrClass">
                 close
               </OkuDialogClose>
             </OkuDialogContent>
diff --git a/packages/components/dialog/src/stories/Controlled.vue b/packages/components/dialog/src/stories/Controlled.vue
index 500230ed7..c93b7c460 100644
--- a/packages/components/dialog/src/stories/Controlled.vue
+++ b/packages/components/dialog/src/stories/Controlled.vue
@@ -7,12 +7,12 @@ const open = ref(false)
 
 <template>
   <OkuDialog v-model="open">
-    <OkuDialogTrigger class="triggerClass">
+    <OkuDialogTrigger class="dialog_triggerClass">
       {{ open ? 'close' : 'open' }}
     </OkuDialogTrigger>
     <OkuDialogPortal>
-      <OkuDialogOverlay class="overlayClass" />
-      <OkuDialogContent class="contentDefaultClass">
+      <OkuDialogOverlay class="dialog_overlayClass" />
+      <OkuDialogContent class="dialog_contentDefaultClass">
         <OkuDialogTitle>
           Title
         </OkuDialogTitle>
diff --git a/packages/components/dialog/src/stories/CustomFocus.vue b/packages/components/dialog/src/stories/CustomFocus.vue
index 81f41b5d6..ab9d7234f 100644
--- a/packages/components/dialog/src/stories/CustomFocus.vue
+++ b/packages/components/dialog/src/stories/CustomFocus.vue
@@ -24,13 +24,13 @@ function onCloseAutoFocus(event: any) {
 <template>
   <div>
     <OkuDialog v-model="open">
-      <OkuDialogTrigger class="triggerClass">
+      <OkuDialogTrigger class="dialog_triggerClass">
         open
       </OkuDialogTrigger>
       <OkuDialogPortal>
-        <OkuDialogOverlay class="overlayClass" />
+        <OkuDialogOverlay class="dialog_overlayClass" />
         <OkuDialogContent
-          class="contentDefaultClass"
+          class="dialog_contentDefaultClass"
           @open-auto-focus="onOpenAutoFocus"
           @close-auto-focus="onCloseAutoFocus"
         >
diff --git a/packages/components/dialog/src/stories/DialogDemo.vue b/packages/components/dialog/src/stories/DialogDemo.vue
index df8a8ebfe..12763699e 100644
--- a/packages/components/dialog/src/stories/DialogDemo.vue
+++ b/packages/components/dialog/src/stories/DialogDemo.vue
@@ -66,13 +66,13 @@ withDefaults(defineProps<OkuDialogProps>(), {
 </template>
 
 <style lang="postcss">
-.triggerClass {
+.dialog_triggerClass {
   position: fixed;
   top: 0;
   left: 0;
 }
 
-.overlayClass {
+.dialog_overlayClass {
    position: fixed;
   top: 0;
   right: 0;
@@ -81,7 +81,7 @@ withDefaults(defineProps<OkuDialogProps>(), {
   background-color: rgba(0, 0, 0, 0.2);
 }
 
-.scrollableOverlayClass {
+.dialog_scrollableOverlayClass {
   position: fixed;
   top: 0;
   right: 0;
@@ -96,7 +96,7 @@ withDefaults(defineProps<OkuDialogProps>(), {
   justify-content: center;
 }
 
-.contentStyles {
+.dialog_contentStyles {
   min-width: 300px;
   min-height: 150px;
   padding: 50px;
@@ -105,7 +105,7 @@ withDefaults(defineProps<OkuDialogProps>(), {
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
 }
 
-.contentDefaultClass {
+.dialog_contentDefaultClass {
   min-width: 300px;
   min-height: 150px;
   padding: 50px;
@@ -122,7 +122,7 @@ withDefaults(defineProps<OkuDialogProps>(), {
   transform: translate(-50%, -50%);
 }
 
-.contentScrollableClass {
+.dialog_contentScrollableClass {
   min-width: 300px;
   min-height: 150px;
   padding: 50px;
@@ -142,7 +142,7 @@ withDefaults(defineProps<OkuDialogProps>(), {
   max-height: 300px;
 }
 
-.contentInScrollableOverlayClass {
+.dialog_contentInScrollableOverlayClass {
   min-width: 300px;
   min-height: 150px;
   padding: 50px;
@@ -154,7 +154,7 @@ withDefaults(defineProps<OkuDialogProps>(), {
   margin-bottom: 50px;
 }
 
-.contentSheetClass {
+.dialog_contentSheetClass {
   min-width: 300px;
   min-height: 150px;
   padding: 50px;
@@ -174,9 +174,9 @@ withDefaults(defineProps<OkuDialogProps>(), {
   border-bottom-right-radius: 0;
 }
 
-.closeClass {}
+.dialog_closeClass {}
 
-@keyframes fadeIn {
+@keyframes dialog_fadeIn {
   from {
     opacity: 0;
   }
@@ -186,7 +186,7 @@ withDefaults(defineProps<OkuDialogProps>(), {
   }
 }
 
-@keyframes fadeOut {
+@keyframes dialog_fadeOut {
   from {
     opacity: 1;
   }
@@ -196,7 +196,7 @@ withDefaults(defineProps<OkuDialogProps>(), {
   }
 }
 
-@keyframes scaleIn {
+@keyframes dialog_scaleIn {
   from {
     transform: translate(-50%, -50%) scale(0.75);
   }
@@ -206,7 +206,7 @@ withDefaults(defineProps<OkuDialogProps>(), {
   }
 }
 
-.animatedOverlayClass {
+.dialog_animatedOverlayClass {
   position: fixed;
   top: 0;
   right: 0;
@@ -216,15 +216,15 @@ withDefaults(defineProps<OkuDialogProps>(), {
   background-color: rgba(0, 0, 0, 0.2);
 
   &[data-state="open"] {
-    animation: fadeIn 300ms ease-out;
+    animation: dialog_fadeIn 300ms ease-out;
   }
 
   &[data-state="closed"] {
-    animation: fadeOut 300ms ease-in;
+    animation: dialog_fadeOut 300ms ease-in;
   }
 }
 
-.animatedContentClass {
+.dialog_animatedContentClass {
   min-width: 300px;
   min-height: 150px;
   padding: 50px;
@@ -241,15 +241,15 @@ withDefaults(defineProps<OkuDialogProps>(), {
   transform: translate(-50%, -50%);
 
   &[data-state="open"] {
-    animation: fadeIn 150ms ease-out, scaleIn 200ms ease-out;
+    animation: dialog_fadeIn 150ms ease-out, dialog_scaleIn 200ms ease-out;
   }
 
   &[data-state="closed"] {
-    animation: fadeOut 300ms ease-in;
+    animation: dialog_fadeOut 300ms ease-in;
   }
 }
 
-.chromaticContentClass {
+.dialog_chromaticContentClass {
   min-width: 300px;
   min-height: 150px;
   padding: 50px;
@@ -269,7 +269,7 @@ withDefaults(defineProps<OkuDialogProps>(), {
   min-height: auto;
 }
 
-.triggerAttrClass {
+.dialog_triggerAttrClass {
   background-color: rgba(0, 0, 255, 0.3);
   border: 2px solid blue;
   padding: 10px;
@@ -283,7 +283,7 @@ withDefaults(defineProps<OkuDialogProps>(), {
   }
 }
 
-.overlayAttrClass {
+.dialog_overlayAttrClass {
   position: fixed;
   top: 0;
   right: 0;
@@ -305,7 +305,7 @@ withDefaults(defineProps<OkuDialogProps>(), {
   }
 }
 
-.contentAttrClass {
+.dialog_contentAttrClass {
   min-width: 300px;
   min-height: 150px;
   padding: 50px;
@@ -337,7 +337,7 @@ withDefaults(defineProps<OkuDialogProps>(), {
   }
 }
 
-.closeAttrClass {
+.dialog_closeAttrClass {
   background-color: rgba(0, 0, 255, 0.3);
   border: 2px solid blue;
   padding: 10px;
diff --git a/packages/components/dialog/src/stories/FocusTrap.vue b/packages/components/dialog/src/stories/FocusTrap.vue
index 1d39d44ae..ece7c25d9 100644
--- a/packages/components/dialog/src/stories/FocusTrap.vue
+++ b/packages/components/dialog/src/stories/FocusTrap.vue
@@ -8,12 +8,12 @@ const open = ref(false)
 <template>
   <div>
     <OkuDialog v-model="open">
-      <OkuDialogTrigger class="triggerClass">
+      <OkuDialogTrigger class="dialog_triggerClass">
         open
       </OkuDialogTrigger>
       <OkuDialogPortal>
-        <OkuDialogOverlay class="overlayClass" />
-        <OkuDialogContent class="contentDefaultClass">
+        <OkuDialogOverlay class="dialog_overlayClass" />
+        <OkuDialogContent class="dialog_contentDefaultClass">
           <OkuDialogClose>
             close
           </OkuDialogClose>
diff --git a/packages/components/dialog/src/stories/ForcedMount.vue b/packages/components/dialog/src/stories/ForcedMount.vue
index 686b61588..3e9d8fe6f 100644
--- a/packages/components/dialog/src/stories/ForcedMount.vue
+++ b/packages/components/dialog/src/stories/ForcedMount.vue
@@ -5,19 +5,19 @@ import { OkuDialog, OkuDialogClose, OkuDialogContent, OkuDialogDescription, OkuD
 <template>
   <div>
     <OkuDialog>
-      <OkuDialogTrigger class="triggerClass">
+      <OkuDialogTrigger class="dialog_triggerClass">
         open
       </OkuDialogTrigger>
       <OkuDialogPortal :force-mount="true">
-        <OkuDialogOverlay class="overlayClass" />
-        <OkuDialogContent class="contentDefaultClass">
+        <OkuDialogOverlay class="dialog_overlayClass" />
+        <OkuDialogContent class="dialog_contentDefaultClass">
           <OkuDialogTitle>
             Title
           </OkuDialogTitle>
           <OkuDialogDescription>
             Description
           </OkuDialogDescription>
-          <OkuDialogClose class="closeClass">
+          <OkuDialogClose class="dialog_closeClass">
             close
           </OkuDialogClose>
         </OkuDialogContent>
diff --git a/packages/components/dialog/src/stories/InnerScrollable.vue b/packages/components/dialog/src/stories/InnerScrollable.vue
index cb06b8008..fd5654fae 100644
--- a/packages/components/dialog/src/stories/InnerScrollable.vue
+++ b/packages/components/dialog/src/stories/InnerScrollable.vue
@@ -5,12 +5,12 @@ import { OkuDialog, OkuDialogClose, OkuDialogContent, OkuDialogDescription, OkuD
 <template>
   <div>
     <OkuDialog>
-      <OkuDialogTrigger class="triggerClass">
+      <OkuDialogTrigger class="dialog_triggerClass">
         open
       </OkuDialogTrigger>
       <OkuDialogPortal>
-        <OkuDialogOverlay class="overlayClass" />
-        <OkuDialogContent class="contentScrollableClass">
+        <OkuDialogOverlay class="dialog_overlayClass" />
+        <OkuDialogContent class="dialog_contentScrollableClass">
           <OkuDialogTitle>
             Booking info
           </OkuDialogTitle>
@@ -20,7 +20,7 @@ import { OkuDialog, OkuDialogClose, OkuDialogContent, OkuDialogDescription, OkuD
           <div
             style="background-color: #eee; height: 500px;"
           />
-          <OkuDialogClose class="closeClass">
+          <OkuDialogClose class="dialog_closeClass">
             close
           </OkuDialogClose>
         </OkuDialogContent>
diff --git a/packages/components/dialog/src/stories/NoEscapeDismiss.vue b/packages/components/dialog/src/stories/NoEscapeDismiss.vue
index 14a00b62a..e53e75ac8 100644
--- a/packages/components/dialog/src/stories/NoEscapeDismiss.vue
+++ b/packages/components/dialog/src/stories/NoEscapeDismiss.vue
@@ -12,13 +12,13 @@ function escapeKeyDown(event: any) {
 <template>
   <div>
     <OkuDialog v-model="open">
-      <OkuDialogTrigger class="triggerClass">
+      <OkuDialogTrigger class="dialog_triggerClass">
         open
       </OkuDialogTrigger>
       <OkuDialogPortal>
-        <OkuDialogOverlay class="overlayClass" />
+        <OkuDialogOverlay class="dialog_overlayClass" />
         <OkuDialogContent
-          class="contentDefaultClass"
+          class="dialog_contentDefaultClass"
           @escape-key-down="escapeKeyDown"
         >
           <OkuDialogTitle>
diff --git a/packages/components/dialog/src/stories/NoPointerDownOutsideDismiss.vue b/packages/components/dialog/src/stories/NoPointerDownOutsideDismiss.vue
index 8509dc14e..dee101b00 100644
--- a/packages/components/dialog/src/stories/NoPointerDownOutsideDismiss.vue
+++ b/packages/components/dialog/src/stories/NoPointerDownOutsideDismiss.vue
@@ -12,13 +12,13 @@ function pointerDown(event: any) {
 <template>
   <div>
     <OkuDialog v-model="open">
-      <OkuDialogTrigger class="triggerClass">
+      <OkuDialogTrigger class="dialog_triggerClass">
         open
       </OkuDialogTrigger>
       <OkuDialogPortal>
-        <OkuDialogOverlay class="overlayClass" />
+        <OkuDialogOverlay class="dialog_overlayClass" />
         <OkuDialogContent
-          class="contentDefaultClass"
+          class="dialog_contentDefaultClass"
           @pointerdown-outside="pointerDown"
         >
           <OkuDialogTitle>
diff --git a/packages/components/dialog/src/stories/NonModal.vue b/packages/components/dialog/src/stories/NonModal.vue
index 5c786074e..d28a18f4a 100644
--- a/packages/components/dialog/src/stories/NonModal.vue
+++ b/packages/components/dialog/src/stories/NonModal.vue
@@ -5,19 +5,19 @@ import { OkuDialog, OkuDialogClose, OkuDialogContent, OkuDialogDescription, OkuD
 <template>
   <div>
     <OkuDialog :modal="false">
-      <OkuDialogTrigger class="triggerClass">
+      <OkuDialogTrigger class="dialog_triggerClass">
         open (non-modal)
       </OkuDialogTrigger>
       <OkuDialogPortal>
-        <OkuDialogOverlay class="overlayClass" />
-        <OkuDialogContent class="contentSheetClass" :on-interact-outside="(event) => event.preventDefault()">
+        <OkuDialogOverlay class="dialog_overlayClass" />
+        <OkuDialogContent class="dialog_contentSheetClass" :on-interact-outside="(event) => event.preventDefault()">
           <OkuDialogTitle>
             Booking info
           </OkuDialogTitle>
           <OkuDialogDescription>
             Please enter the info for your booking below.
           </OkuDialogDescription>
-          <OkuDialogClose class="closeClass">
+          <OkuDialogClose class="dialog_closeClass">
             close
           </OkuDialogClose>
         </OkuDialogContent>
diff --git a/packages/components/dialog/src/stories/OuterScrollable.vue b/packages/components/dialog/src/stories/OuterScrollable.vue
index d2475c6aa..914761c8f 100644
--- a/packages/components/dialog/src/stories/OuterScrollable.vue
+++ b/packages/components/dialog/src/stories/OuterScrollable.vue
@@ -5,15 +5,15 @@ import { OkuDialog, OkuDialogClose, OkuDialogContent, OkuDialogDescription, OkuD
 <template>
   <div>
     <OkuDialog>
-      <OkuDialogTrigger class="triggerClass">
+      <OkuDialogTrigger class="dialog_triggerClass">
         open
       </OkuDialogTrigger>
       <div
         style="background-color: #eee;width:300px; height: 1000px;"
       />
       <OkuDialogPortal>
-        <OkuDialogOverlay class="scrollableOverlayClass" />
-        <OkuDialogContent class="contentInScrollableOverlayClass">
+        <OkuDialogOverlay class="dialog_scrollableOverlayClass" />
+        <OkuDialogContent class="dialog_contentInScrollableOverlayClass">
           <OkuDialogTitle>
             Booking info
           </OkuDialogTitle>
@@ -23,7 +23,7 @@ import { OkuDialog, OkuDialogClose, OkuDialogContent, OkuDialogDescription, OkuD
           <div
             style="background-color: #eee; height: 500px;"
           />
-          <OkuDialogClose class="closeClass">
+          <OkuDialogClose class="dialog_closeClass">
             close
           </OkuDialogClose>
         </OkuDialogContent>
diff --git a/packages/components/dialog/src/stories/Styled.vue b/packages/components/dialog/src/stories/Styled.vue
index 9cfae32e1..3098b0236 100644
--- a/packages/components/dialog/src/stories/Styled.vue
+++ b/packages/components/dialog/src/stories/Styled.vue
@@ -5,19 +5,19 @@ import { OkuDialog, OkuDialogClose, OkuDialogContent, OkuDialogDescription, OkuD
 <template>
   <div>
     <OkuDialog>
-      <OkuDialogTrigger class="triggerClass">
+      <OkuDialogTrigger class="dialog_triggerClass">
         open
       </OkuDialogTrigger>
       <OkuDialogPortal>
-        <OkuDialogOverlay class="overlayClass" />
-        <OkuDialogContent class="contentDefaultClass">
+        <OkuDialogOverlay class="dialog_overlayClass" />
+        <OkuDialogContent class="dialog_contentDefaultClass">
           <OkuDialogTitle>
             Booking info
           </OkuDialogTitle>
           <OkuDialogDescription>
             Please enter the info for your booking below.
           </OkuDialogDescription>
-          <OkuDialogClose class="closeClass">
+          <OkuDialogClose class="dialog_closeClass">
             close
           </OkuDialogClose>
         </OkuDialogContent>
diff --git a/packages/components/dialog/src/stories/WithPortalContainer.vue b/packages/components/dialog/src/stories/WithPortalContainer.vue
index 2666ab60c..daca6df9e 100644
--- a/packages/components/dialog/src/stories/WithPortalContainer.vue
+++ b/packages/components/dialog/src/stories/WithPortalContainer.vue
@@ -9,13 +9,13 @@ const portalContainer = ref<HTMLDivElement | null>(null)
 <template>
   <div>
     <OkuDialog v-model="open">
-      <OkuDialogTrigger class="triggerClass">
+      <OkuDialogTrigger class="dialog_triggerClass">
         open
       </OkuDialogTrigger>
       <OkuDialogPortal :container="portalContainer">
-        <OkuDialogOverlay class="overlayClass" />
+        <OkuDialogOverlay class="dialog_overlayClass" />
         <OkuDialogContent
-          class="contentDefaultClass"
+          class="dialog_contentDefaultClass"
         >
           <OkuDialogTitle>
             Title
diff --git a/packages/components/dismissable-layer/src/stories/DismissableLayerDemo.vue b/packages/components/dismissable-layer/src/stories/DismissableLayerDemo.vue
index 036392645..af99f5ee4 100644
--- a/packages/components/dismissable-layer/src/stories/DismissableLayerDemo.vue
+++ b/packages/components/dismissable-layer/src/stories/DismissableLayerDemo.vue
@@ -225,7 +225,7 @@ function handlePopupClick() {
       <h1 class="text-3xl font-bold mb-2">
         Dialog (fully modal example)
       </h1>
-      <ul :style="{ 'list-style': 'none', 'padding': 0, 'margin-bottom': 30 }">
+      <ul :style="{ 'dismissable_layer_list-style': 'none', 'padding': 0, 'margin-bottom': 30 }">
         <li>✅ focus should move inside `Dialog` when mounted</li>
         <li>✅ focus should be trapped inside `Dialog`</li>
         <li>✅ scrolling outside `Dialog` should be disabled</li>
@@ -297,7 +297,7 @@ function handlePopupClick() {
         Popover (semi-modal example)
       </h1>
 
-      <ul class="list">
+      <ul class="dismissable_layer_list">
         <li>✅ focus should move inside `Popover` when mounted</li>
         <li>✅ focus should be trapped inside `Popover`</li>
         <li>✅ scrolling outside `Popover` should be allowed</li>
@@ -350,7 +350,7 @@ function handlePopupClick() {
         Popover (non modal example)
       </h1>
 
-      <ul class="list">
+      <ul class="dismissable_layer_list">
         <li>✅ focus should move inside `Popover` when mounted</li>
         <li>
           ✅ focus should <span class="font-semibold">NOT</span> be trapped
@@ -412,7 +412,7 @@ function handlePopupClick() {
         Popover (semi-modal) in Dialog (fully modal)
       </h1>
 
-      <ul class="list">
+      <ul class="dismissable_layer_list">
         <li>
           ✅ dismissing `Popover` by pressing escape should{' '}
           <span class="font-semibold">NOT</span> dismiss `Dialog`
@@ -438,7 +438,7 @@ function handlePopupClick() {
       <h1 class="text-3xl font-bold mb-2">
         Popover (nested example)
       </h1>
-      <ul class="list">
+      <ul class="dismissable_layer_list">
         <li>
           ✅ dismissing a `Popover` by pressing escape should only dismiss that
           given `Popover`, not its parents
@@ -514,8 +514,8 @@ function handlePopupClick() {
 </template>
 
 <style lang="css">
-.list {
-  list-style: "none";
+.dismissable_layer_list {
+  dismissable_layer_list-style: "none";
   padding: 0px;
   margin-bottom: 30px;
 }
diff --git a/packages/components/hover-card/src/stories/Animated.vue b/packages/components/hover-card/src/stories/Animated.vue
index 94433673d..2d0d5aca5 100644
--- a/packages/components/hover-card/src/stories/Animated.vue
+++ b/packages/components/hover-card/src/stories/Animated.vue
@@ -12,12 +12,12 @@ import CardContentPlaceholder from './CardContentPlaceholder.vue'
 <template>
   <div style="padding: 50px; display: flex; justify-content: center">
     <OkuHoverCard>
-      <OkuHoverCardTrigger href="/" class="triggerClass">
+      <OkuHoverCardTrigger href="/" class="hover_card_triggerClass">
         trigger
       </OkuHoverCardTrigger>
       <OkuHoverCardPortal>
-        <OkuHoverCardContent class="animatedContentClass" :side-offset="10">
-          <OkuHoverCardArrow class="arrowClass" :width="20" :height="10" />
+        <OkuHoverCardContent class="hover_card_animatedContentClass" :side-offset="10">
+          <OkuHoverCardArrow class="hover_card_arrowClass" :width="20" :height="10" />
           <CardContentPlaceholder />
         </OkuHoverCardContent>
       </OkuHoverCardPortal>
diff --git a/packages/components/hover-card/src/stories/AsyncUpdate.vue b/packages/components/hover-card/src/stories/AsyncUpdate.vue
index 7bdaa6af2..e568b5829 100644
--- a/packages/components/hover-card/src/stories/AsyncUpdate.vue
+++ b/packages/components/hover-card/src/stories/AsyncUpdate.vue
@@ -36,12 +36,12 @@ onBeforeUnmount(() => {
 <template>
   <div style="padding: 50px; display: flex; justify-content: center">
     <OkuHoverCard v-model="open" @open-change="handleOpenChange(!open)">
-      <OkuHoverCardTrigger href="/" class="triggerClass">
+      <OkuHoverCardTrigger href="/" class="hover_card_triggerClass">
         trigger
       </OkuHoverCardTrigger>
       <OkuHoverCardPortal>
         <OkuHoverCardContent class="contentClass" :side-offset="5">
-          <OkuHoverCardArrow class="arrowClass" :width="20" :height="10" />
+          <OkuHoverCardArrow class="hover_card_arrowClass" :width="20" :height="10" />
           <template v-if="contentLoaded">
             <CardContentPlaceholder />
           </template>
diff --git a/packages/components/hover-card/src/stories/Basic.vue b/packages/components/hover-card/src/stories/Basic.vue
index 1bcce072b..95666fdc3 100644
--- a/packages/components/hover-card/src/stories/Basic.vue
+++ b/packages/components/hover-card/src/stories/Basic.vue
@@ -12,12 +12,12 @@ import CardContentPlaceholder from './CardContentPlaceholder.vue'
 <template>
   <div class="p-28 flex flex-center justify-center">
     <OkuHoverCard>
-      <OkuHoverCardTrigger href="/" class="triggerClass">
+      <OkuHoverCardTrigger href="/" class="hover_card_triggerClass">
         trigger
       </OkuHoverCardTrigger>
       <OkuHoverCardPortal>
         <OkuHoverCardContent class="contentClass" :side-offset="5">
-          <OkuHoverCardArrow class="arrowClass" :width="20" :height="10" />
+          <OkuHoverCardArrow class="hover_card_arrowClass" :width="20" :height="10" />
           <CardContentPlaceholder />
         </OkuHoverCardContent>
       </OkuHoverCardPortal>
diff --git a/packages/components/hover-card/src/stories/ContainTextSelection.vue b/packages/components/hover-card/src/stories/ContainTextSelection.vue
index 8d2a9a9dc..acd3d66c7 100644
--- a/packages/components/hover-card/src/stories/ContainTextSelection.vue
+++ b/packages/components/hover-card/src/stories/ContainTextSelection.vue
@@ -20,12 +20,12 @@ import {
   >
     <div style="display: flex; gap: 30px;">
       <OkuHoverCard>
-        <OkuHoverCardTrigger href="/" class="triggerClass">
+        <OkuHoverCardTrigger href="/" class="hover_card_triggerClass">
           single
         </OkuHoverCardTrigger>
         <OkuHoverCardPortal>
-          <OkuHoverCardContent class="animatedContentClass" :side-offset="5">
-            <OkuHoverCardArrow class="arrowClass" :width="20" :height="10" />
+          <OkuHoverCardContent class="hover_card_animatedContentClass" :side-offset="5">
+            <OkuHoverCardArrow class="hover_card_arrowClass" :width="20" :height="10" />
             <div style="max-width: 400px;">
               Text selections will be contained within the content. While a selection is active
               the content will not dismiss unless the selection is cleared or an outside
@@ -36,12 +36,12 @@ import {
       </OkuHoverCard>
 
       <OkuHoverCard>
-        <OkuHoverCardTrigger href="/" class="triggerClass">
+        <OkuHoverCardTrigger href="/" class="hover_card_triggerClass">
           nested
         </OkuHoverCardTrigger>
         <OkuHoverCardPortal>
-          <OkuHoverCardContent class="animatedContentClass" :side-offset="5">
-            <OkuHoverCardArrow class="arrowClass" :width="20" :height="10" />
+          <OkuHoverCardContent class="hover_card_animatedContentClass" :side-offset="5">
+            <OkuHoverCardArrow class="hover_card_arrowClass" :width="20" :height="10" />
             <div style="max-width: 400px;">
               Text selections will be contained within the content. While a selection is active
               the content will not dismiss unless the selection is cleared or an outside
@@ -49,12 +49,12 @@ import {
             </div>
 
             <OkuHoverCard>
-              <OkuHoverCardTrigger href="/" class="triggerClass">
+              <OkuHoverCardTrigger href="/" class="hover_card_triggerClass">
                 nested trigger
               </OkuHoverCardTrigger>
               <OkuHoverCardPortal>
-                <OkuHoverCardContent class="animatedContentClass" :side-offset="5" style="background-color: crimson">
-                  <OkuHoverCardArrow class="arrowClass" :width="20" :height="10" style="fill: crimson" />
+                <OkuHoverCardContent class="hover_card_animatedContentClass" :side-offset="5" style="background-color: crimson">
+                  <OkuHoverCardArrow class="hover_card_arrowClass" :width="20" :height="10" style="fill: crimson" />
                   <div style="max-width: 400px;">
                     Text selections will be contained within the content. While a selection is
                     active the content will not dismiss unless the selection is cleared or an
@@ -62,12 +62,12 @@ import {
                   </div>
 
                   <OkuHoverCard>
-                    <OkuHoverCardTrigger href="/" class="triggerClass">
+                    <OkuHoverCardTrigger href="/" class="hover_card_triggerClass">
                       nested trigger
                     </OkuHoverCardTrigger>
                     <OkuHoverCardPortal>
-                      <OkuHoverCardContent class="animatedContentClass" :side-offset="5" style="background-color: green">
-                        <OkuHoverCardArrow class="arrowClass" :width="20" :height="10" style="fill: green" />
+                      <OkuHoverCardContent class="hover_card_animatedContentClass" :side-offset="5" style="background-color: green">
+                        <OkuHoverCardArrow class="hover_card_arrowClass" :width="20" :height="10" style="fill: green" />
                         <div style="max-width: 400px;">
                           Text selections will be contained within the content. While a selection
                           is active the content will not dismiss unless the selection is cleared
diff --git a/packages/components/hover-card/src/stories/Controlled.vue b/packages/components/hover-card/src/stories/Controlled.vue
index a8e116d27..3fca7c93b 100644
--- a/packages/components/hover-card/src/stories/Controlled.vue
+++ b/packages/components/hover-card/src/stories/Controlled.vue
@@ -19,12 +19,12 @@ const open = ref(false)
 
   <div style="padding: 50px; display: flex; justify-content: center">
     <OkuHoverCard :open="open" @open-change="open = !open">
-      <OkuHoverCardTrigger href="/" class="triggerClass">
+      <OkuHoverCardTrigger href="/" class="hover_card_triggerClass">
         trigger
       </OkuHoverCardTrigger>
       <OkuHoverCardPortal>
         <OkuHoverCardContent class="contentClass">
-          <OkuHoverCardArrow class="arrowClass" :width="20" :height="10" />
+          <OkuHoverCardArrow class="hover_card_arrowClass" :width="20" :height="10" />
           <CardContentPlaceholder />
         </OkuHoverCardContent>
       </OkuHoverCardPortal>
diff --git a/packages/components/hover-card/src/stories/CustomDurations.vue b/packages/components/hover-card/src/stories/CustomDurations.vue
index e9e516598..e9e4867b0 100644
--- a/packages/components/hover-card/src/stories/CustomDurations.vue
+++ b/packages/components/hover-card/src/stories/CustomDurations.vue
@@ -18,7 +18,7 @@ import CardContentPlaceholder from './CardContentPlaceholder.vue'
     </h2>
 
     <OkuHoverCard>
-      <OkuHoverCardTrigger href="/" class="triggerClass underline">
+      <OkuHoverCardTrigger href="/" class="hover_card_triggerClass underline">
         trigger
       </OkuHoverCardTrigger>
       <OkuHoverCardPortal>
@@ -32,7 +32,7 @@ import CardContentPlaceholder from './CardContentPlaceholder.vue'
       Custom (instant, 0ms open, 0ms close)
     </h2>
     <OkuHoverCard :open-delay="0" :close-delay="0">
-      <OkuHoverCardTrigger href="/" class="triggerClass underline">
+      <OkuHoverCardTrigger href="/" class="hover_card_triggerClass underline">
         trigger
       </OkuHoverCardTrigger>
       <OkuHoverCardPortal>
@@ -47,7 +47,7 @@ import CardContentPlaceholder from './CardContentPlaceholder.vue'
     </h2>
 
     <OkuHoverCard :open-delay="300" :close-delay="100">
-      <OkuHoverCardTrigger href="/" class="triggerClass underline">
+      <OkuHoverCardTrigger href="/" class="hover_card_triggerClass underline">
         trigger
       </OkuHoverCardTrigger>
       <OkuHoverCardPortal>
diff --git a/packages/components/hover-card/src/stories/ForcedMount.vue b/packages/components/hover-card/src/stories/ForcedMount.vue
index af9662f83..740869c53 100644
--- a/packages/components/hover-card/src/stories/ForcedMount.vue
+++ b/packages/components/hover-card/src/stories/ForcedMount.vue
@@ -12,12 +12,12 @@ import CardContentPlaceholder from './CardContentPlaceholder.vue'
 <template>
   <div style="padding: 50px; display: flex; justify-content: center">
     <OkuHoverCard>
-      <OkuHoverCardTrigger href="/" class="triggerClass">
+      <OkuHoverCardTrigger href="/" class="hover_card_triggerClass">
         triggers
       </OkuHoverCardTrigger>
       <OkuHoverCardPortal force-mount>
         <OkuHoverCardContent class="contentClass" :side-offset="10">
-          <OkuHoverCardArrow class="arrowClass" :width="20" :height="10" />
+          <OkuHoverCardArrow class="hover_card_arrowClass" :width="20" :height="10" />
           <CardContentPlaceholder />
         </OkuHoverCardContent>
       </OkuHoverCardPortal>
diff --git a/packages/components/hover-card/src/stories/HoverCardDemo.vue b/packages/components/hover-card/src/stories/HoverCardDemo.vue
index 90ee84723..127e32954 100644
--- a/packages/components/hover-card/src/stories/HoverCardDemo.vue
+++ b/packages/components/hover-card/src/stories/HoverCardDemo.vue
@@ -67,7 +67,7 @@ const templateClass = 'flex flex-col justify-center'
 </template>
 
 <style lang="postcss">
-.triggerClass {}
+.hover_card_triggerClass {}
 
 .contentClass {
   transform-origin: var(--oku-hover-card-content-transform-origin);
@@ -76,11 +76,11 @@ const templateClass = 'flex flex-col justify-center'
   border-radius: 5px;
 }
 
-.arrowClass {
+.hover_card_arrowClass {
   fill: #f9fafb;
 }
 
-@keyframes fadeIn {
+@keyframes hover_card_fadeIn {
   from {
     transform: scale(0.9);
     opacity: 0;
@@ -91,7 +91,7 @@ const templateClass = 'flex flex-col justify-center'
   }
 }
 
-@keyframes fadeOut {
+@keyframes hover_card_fadeOut {
   from {
     transform: scale(1);
     opacity: 1;
@@ -102,20 +102,20 @@ const templateClass = 'flex flex-col justify-center'
   }
 }
 
-.animatedContentClass {
+.hover_card_animatedContentClass {
   transform-origin: var(--oku-hover-card-content-transform-origin);
   background-color: #f9fafb;
   padding: 20px;
   border-radius: 5px;
   &[data-state='open'] {
-    animation: fadeIn 250ms ease;
+    animation: hover_card_fadeIn 250ms ease;
   }
   &[data-state='closed'] {
-    animation: fadeOut 250ms ease;
+    animation: hover_card_fadeOut 250ms ease;
   }
 }
 
-.gridClass {
+.hover_card_gridClass {
   display: inline-grid;
   grid-template-columns: repeat(3, 50px);
   column-gap: 150px;
@@ -124,7 +124,7 @@ const templateClass = 'flex flex-col justify-center'
   border: 1px solid black;
 }
 
-.chromaticTriggerClass {
+.hover_card_chromaticTriggerClass {
   box-sizing: border-box;
   width: 30px;
   height: 30px;
@@ -132,7 +132,7 @@ const templateClass = 'flex flex-col justify-center'
   border: 1px solid rgba(0, 0, 0, 0.3);
 }
 
-.chromaticContentClass {
+.hover_card_chromaticContentClass {
   box-sizing: border-box;
   display: grid;
   place-content: center;
@@ -144,11 +144,11 @@ const templateClass = 'flex flex-col justify-center'
   border: 1px solid rgba(0, 0, 0, 0.3);
 }
 
-.chromaticArrowClass {
+.hover_card_chromaticArrowClass {
   fill: black;
 }
 
-.styles {
+.hover_card_styles {
   background-color: rgba(0, 0, 255, 0.3);
   border: 2px solid blue;
   padding: 10px;
@@ -160,7 +160,7 @@ const templateClass = 'flex flex-col justify-center'
   }
 }
 
-.triggerAttrClass {
+.hover_card_triggerAttrClass {
   background-color: rgba(0, 0, 255, 0.3);
   border: 2px solid blue;
   padding: 10px;
@@ -172,7 +172,7 @@ const templateClass = 'flex flex-col justify-center'
   }
 }
 
-.contentAttrClass {
+.hover_card_contentAttrClass {
   box-sizing: border-box;
   display: grid;
   place-content: center;
@@ -191,7 +191,7 @@ const templateClass = 'flex flex-col justify-center'
   }
 }
 
-.arrowAttrClass {
+.hover_card_arrowAttrClass {
   fill: black;
   background-color: rgba(0, 0, 255, 0.3);
   border: 2px solid blue;
diff --git a/packages/components/hover-card/src/stories/Layerable.vue b/packages/components/hover-card/src/stories/Layerable.vue
index 3d6974a85..eb5f66a47 100644
--- a/packages/components/hover-card/src/stories/Layerable.vue
+++ b/packages/components/hover-card/src/stories/Layerable.vue
@@ -36,12 +36,12 @@ import CardContentPlaceholder from './CardContentPlaceholder.vue'
         <OkuDialogTitle>Some dialog title</OkuDialogTitle>
         Some dialog content with a{' '}
         <OkuHoverCard>
-          <OkuHoverCardTrigger href="/" class="triggerClass">
+          <OkuHoverCardTrigger href="/" class="hover_card_triggerClass">
             trigger
           </OkuHoverCardTrigger>
           <OkuHoverCardPortal>
             <OkuHoverCardContent class="contentClass" :side-offset="5">
-              <OkuHoverCardArrow class="arrowClass" :width="20" :height="10" />
+              <OkuHoverCardArrow class="hover_card_arrowClass" :width="20" :height="10" />
               <CardContentPlaceholder />
             </OkuHoverCardContent>
           </OkuHoverCardPortal>
diff --git a/packages/components/hover-card/src/stories/Nested.vue b/packages/components/hover-card/src/stories/Nested.vue
index 9f210d0a0..d35df318f 100644
--- a/packages/components/hover-card/src/stories/Nested.vue
+++ b/packages/components/hover-card/src/stories/Nested.vue
@@ -10,7 +10,7 @@ import {
 
 <template>
   <OkuHoverCard>
-    <OkuHoverCardTrigger href="/" class="triggerClass">
+    <OkuHoverCardTrigger href="/" class="hover_card_triggerClass">
       trigger level 1
     </OkuHoverCardTrigger>
 
@@ -21,7 +21,7 @@ import {
         :style="{ backgroundColor: 'crimson' }"
       >
         <OkuHoverCard>
-          <OkuHoverCardTrigger href="/" class="triggerClass">
+          <OkuHoverCardTrigger href="/" class="hover_card_triggerClass">
             trigger level 2
           </OkuHoverCardTrigger>
           <OkuHoverCardPortal>
@@ -33,14 +33,14 @@ import {
               :style="{ backgroundColor: 'green' }"
             >
               <OkuHoverCardArrow
-                class="arrowClass"
+                class="hover_card_arrowClass"
                 :width="20"
                 :height="10"
                 :offset="20"
                 :style="{ fill: 'green' }"
               />
               <OkuHoverCard>
-                <OkuHoverCardTrigger href="/" class="triggerClass">
+                <OkuHoverCardTrigger href="/" class="hover_card_triggerClass">
                   trigger level 3
                 </OkuHoverCardTrigger>
                 <OkuHoverCardPortal>
@@ -52,7 +52,7 @@ import {
                     :style="{ backgroundColor: 'purple' }"
                   >
                     <OkuHoverCardArrow
-                      class="arrowClass"
+                      class="hover_card_arrowClass"
                       :width="20"
                       :height="10"
                       :offset="20"
@@ -67,7 +67,7 @@ import {
         </OkuHoverCard>
 
         <OkuHoverCardArrow
-          class="arrowClass"
+          class="hover_card_arrowClass"
           :width="20"
           :height="10"
           :offset="20"
diff --git a/packages/components/hover-card/src/stories/NonPortal.vue b/packages/components/hover-card/src/stories/NonPortal.vue
index 5651e8277..eab6e220b 100644
--- a/packages/components/hover-card/src/stories/NonPortal.vue
+++ b/packages/components/hover-card/src/stories/NonPortal.vue
@@ -12,11 +12,11 @@ import CardContentPlaceholder from './CardContentPlaceholder.vue'
   <div>
     <button>button</button>
     <OkuHoverCard>
-      <OkuHoverCardTrigger href="/" class="triggerClass">
+      <OkuHoverCardTrigger href="/" class="hover_card_triggerClass">
         trigger
       </OkuHoverCardTrigger>
       <OkuHoverCardContent class="contentClass" :side-offset="5">
-        <OkuHoverCardArrow class="arrowClass" :width="20" :height="10" :offset="10" />
+        <OkuHoverCardArrow class="hover_card_arrowClass" :width="20" :height="10" :offset="10" />
         <a href="#link">Should not be able to focus me</a>
         <CardContentPlaceholder />
       </OkuHoverCardContent>
diff --git a/packages/components/hover-card/src/stories/WithSlottedContent.vue b/packages/components/hover-card/src/stories/WithSlottedContent.vue
index fd19cba5b..12933d3a9 100644
--- a/packages/components/hover-card/src/stories/WithSlottedContent.vue
+++ b/packages/components/hover-card/src/stories/WithSlottedContent.vue
@@ -11,13 +11,13 @@ import CardContentPlaceholder from './CardContentPlaceholder.vue'
 
 <template>
   <OkuHoverCard>
-    <OkuHoverCardTrigger href="/" class="triggerClass">
+    <OkuHoverCardTrigger href="/" class="hover_card_triggerClass">
       trigger
     </OkuHoverCardTrigger>
     <OkuHoverCardPortal>
       <OkuHoverCardContent as-child :side-offset="5">
         <div class="contentClass">
-          <OkuHoverCardArrow class="arrowClass" :width="20" :height="10" :offset="10" />
+          <OkuHoverCardArrow class="hover_card_arrowClass" :width="20" :height="10" :offset="10" />
           <CardContentPlaceholder />
         </div>
       </OkuHoverCardContent>
diff --git a/packages/components/hover-card/src/stories/WithSlottedTrigger.vue b/packages/components/hover-card/src/stories/WithSlottedTrigger.vue
index e4b7ebeb2..815044788 100644
--- a/packages/components/hover-card/src/stories/WithSlottedTrigger.vue
+++ b/packages/components/hover-card/src/stories/WithSlottedTrigger.vue
@@ -12,13 +12,13 @@ import CardContentPlaceholder from './CardContentPlaceholder.vue'
 <template>
   <OkuHoverCard>
     <OkuHoverCardTrigger as-child>
-      <button class="triggerClass" @click="() => console.log('StyledTrigger click')">
+      <button class="hover_card_triggerClass" @click="() => console.log('StyledTrigger click')">
         trigger
       </button>
     </OkuHoverCardTrigger>
     <OkuHoverCardPortal>
       <OkuHoverCardContent class="contentClass" :side-offset="5">
-        <OkuHoverCardArrow class="arrowClass" :width="20" :height="10" :offset="10" />
+        <OkuHoverCardArrow class="hover_card_arrowClass" :width="20" :height="10" :offset="10" />
         <CardContentPlaceholder />
       </OkuHoverCardContent>
     </OkuHoverCardPortal>
diff --git a/packages/components/popover/src/stories/PopoverDemo.vue b/packages/components/popover/src/stories/PopoverDemo.vue
index 5646f36c4..7105a887b 100644
--- a/packages/components/popover/src/stories/PopoverDemo.vue
+++ b/packages/components/popover/src/stories/PopoverDemo.vue
@@ -22,15 +22,15 @@ withDefaults(defineProps<OkuPopoverProps>(), {
   <div v-if="template === '#1' || allshow" class="flex flex-col">
     <div>
       <OkuPopover>
-        <OkuPopoverTrigger class="triggerClass">
+        <OkuPopoverTrigger class="popover_triggerClass">
           open
         </OkuPopoverTrigger>
         <OkuPopoverPortal>
-          <OkuPopoverContent class="contentClass" :side-offset="15">
-            <OkuPopoverClose class="closeClass">
+          <OkuPopoverContent class="popover_contentClass" :side-offset="15">
+            <OkuPopoverClose class="popover_closeClass">
               close
             </OkuPopoverClose>
-            <OkuPopoverArrow class="arrowClass" :width="20" :height="10" />
+            <OkuPopoverArrow class="popover_arrowClass" :width="20" :height="10" />
           </OkuPopoverContent>
         </OkuPopoverPortal>
       </OkuPopover>
@@ -39,24 +39,24 @@ withDefaults(defineProps<OkuPopoverProps>(), {
 </template>
 
 <style>
-.triggerClass {
+.popover_triggerClass {
 
 }
 
-.contentClass {
+.popover_contentClass {
   transform-origin: var(--oku-popover-content-transform-origin);
   background-color: #e5e7eb;
   padding: 20px;
   border-radius: 5px;
 }
-.closeClass {
+.popover_closeClass {
 }
 
-.arrowClass {
+.popover_arrowClass {
   fill: #e5e7eb;
 }
 
-@keyframes fadeIn {
+@keyframes popover_fadeIn {
   from {
     opacity: 0;
   }
@@ -65,7 +65,7 @@ withDefaults(defineProps<OkuPopoverProps>(), {
   }
 }
 
-@keyframes fadeOut {
+@keyframes popover_fadeOut {
   from {
     opacity: 1;
   }
@@ -74,21 +74,21 @@ withDefaults(defineProps<OkuPopoverProps>(), {
   }
 }
 
-.animatedContentClass {
+.popover_animatedContentClass {
    transform-origin: var(--oku-popover-content-transform-origin);
   background-color: #e5e7eb;
   padding: 20px;
   border-radius: 5px;
 
   & [data-state='open'] {
-    animation: fadeIn 300ms ease-out;
+    animation: popover_fadeIn 300ms ease-out;
   }
   & [data-state='closed'] {
-    animation: fadeOut 300ms ease-in;
+    animation: popover_fadeOut 300ms ease-in;
   }
 }
 
-.gridClass {
+.popover_gridClass {
   display: inline-grid;
   grid-template-columns: repeat(3, 50px);
   column-gap: 150px;
@@ -97,7 +97,7 @@ withDefaults(defineProps<OkuPopoverProps>(), {
   border: 1px solid black;
 }
 
-.chromaticTriggerClass {
+.popover_chromaticTriggerClass {
   box-sizing: border-box;
   width: 30px;
   height: 30px;
@@ -105,7 +105,7 @@ withDefaults(defineProps<OkuPopoverProps>(), {
   border: 1px solid rgba(0, 0, 0, 0.3);
 }
 
-.chromaticContentClass {
+.popover_chromaticContentClass {
   box-sizing: border-box;
   display: grid;
   place-content: center;
@@ -117,11 +117,11 @@ withDefaults(defineProps<OkuPopoverProps>(), {
   border: 1px solid rgba(0, 0, 0, 0.3);
 }
 
-.chromaticArrowClass {
+.popover_chromaticArrowClass {
   fill: black;
 }
 
-.triggerAttrClass {
+.popover_triggerAttrClass {
   background-color: rgba(0, 0, 255, 0.3);
   border: 2px solid blue;
   padding: 10px;
@@ -134,7 +134,7 @@ withDefaults(defineProps<OkuPopoverProps>(), {
   }
 }
 
-.contentAttrClass {
+.popover_contentAttrClass {
   transform-origin: var(--oku-popover-content-transform-origin);
   background-color: #e5e7eb;
   padding: 20px;
@@ -151,7 +151,7 @@ withDefaults(defineProps<OkuPopoverProps>(), {
   }
 }
 
-.arrowAttrClass {
+.popover_arrowAttrClass {
   fill: #e5e7eb;
   background-color: rgba(0, 0, 255, 0.3);
   border: 2px solid blue;
@@ -165,7 +165,7 @@ withDefaults(defineProps<OkuPopoverProps>(), {
   }
 }
 
-.closeAttrClass {
+.popover_closeAttrClass {
   background-color: rgba(0, 0, 255, 0.3);
   border: 2px solid blue;
   padding: 10px;
diff --git a/packages/components/popper/src/stories/Animated.vue b/packages/components/popper/src/stories/Animated.vue
index e7beb8cba..70fdd39d3 100644
--- a/packages/components/popper/src/stories/Animated.vue
+++ b/packages/components/popper/src/stories/Animated.vue
@@ -15,16 +15,16 @@ const open = ref(false)
 <template>
   <Scrollable>
     <OkuPopper>
-      <OkuPopperAnchor class="anchorClass" @click="open = true">
+      <OkuPopperAnchor class="popper_anchorClass" @click="open = true">
         open
       </OkuPopperAnchor>
 
       <OkuPortal v-if="open" as-child>
-        <OkuPopperContent class="animatedContentClass" :side-offset="5">
+        <OkuPopperContent class="popper_animatedContentClass" :side-offset="5">
           <button @click="open = false">
             close
           </button>
-          <OkuPopperArrow class="arrowClass" :width="20" :height="10" :offset="25" />
+          <OkuPopperArrow class="popper_arrowClass" :width="20" :height="10" :offset="25" />
         </OkuPopperContent>
       </OkuPortal>
     </OkuPopper>
diff --git a/packages/components/popper/src/stories/Chromatic.vue b/packages/components/popper/src/stories/Chromatic.vue
index c56f44c71..e37886bfd 100644
--- a/packages/components/popper/src/stories/Chromatic.vue
+++ b/packages/components/popper/src/stories/Chromatic.vue
@@ -37,22 +37,22 @@ const scrollContainer2 = ref<HTMLDivElement | null>(null)
     >
       <h1>In fixed header</h1>
       <OkuPopper>
-        <OkuPopperAnchor class="anchorClass small">
+        <OkuPopperAnchor class="popper_anchorClass small">
           1
         </OkuPopperAnchor>
-        <OkuPopperContent class="contentClass small" :side-offset="5">
-          <OkuPopperArrow class="arrowClass" :width="10" :height="5" />
+        <OkuPopperContent class="popper_contentClass small" :side-offset="5">
+          <OkuPopperArrow class="popper_arrowClass" :width="10" :height="5" />
           1
         </OkuPopperContent>
       </OkuPopper>
 
       <OkuPopper>
-        <OkuPopperAnchor class="anchorClass small">
+        <OkuPopperAnchor class="popper_anchorClass small">
           2
         </OkuPopperAnchor>
         <OkuPortal>
-          <OkuPopperContent class="contentClass small" :side-offset="5">
-            <OkuPopperArrow class="arrowClass" :width="10" :height="5" />
+          <OkuPopperContent class="popper_contentClass small" :side-offset="5">
+            <OkuPopperArrow class="popper_arrowClass" :width="10" :height="5" />
             2 (portalled)
           </OkuPopperContent>
         </OkuPortal>
@@ -71,22 +71,22 @@ const scrollContainer2 = ref<HTMLDivElement | null>(null)
     >
       <h1>In normal page flow</h1>
       <OkuPopper>
-        <OkuPopperAnchor class="anchorClass small">
+        <OkuPopperAnchor class="popper_anchorClass small">
           3
         </OkuPopperAnchor>
-        <OkuPopperContent class="contentClass small" :side-offset="5">
-          <OkuPopperArrow class="arrowClass" :width="10" :height="5" />
+        <OkuPopperContent class="popper_contentClass small" :side-offset="5">
+          <OkuPopperArrow class="popper_arrowClass" :width="10" :height="5" />
           3
         </OkuPopperContent>
       </OkuPopper>
 
       <OkuPopper>
-        <OkuPopperAnchor class="anchorClass small">
+        <OkuPopperAnchor class="popper_anchorClass small">
           4
         </OkuPopperAnchor>
         <OkuPortal>
-          <OkuPopperContent class="contentClass small" :side-offset="5">
-            <OkuPopperArrow class="arrowClass" :width="10" :height="5" />
+          <OkuPopperContent class="popper_contentClass small" :side-offset="5">
+            <OkuPopperArrow class="popper_arrowClass" :width="10" :height="5" />
             4 (portalled)
           </OkuPopperContent>
         </OkuPortal>
@@ -106,22 +106,22 @@ const scrollContainer2 = ref<HTMLDivElement | null>(null)
     >
       <h1>In relative parent</h1>
       <OkuPopper>
-        <OkuPopperAnchor class="anchorClass small">
+        <OkuPopperAnchor class="popper_anchorClass small">
           5
         </OkuPopperAnchor>
-        <OkuPopperContent class="contentClass small" :side-offset="5">
-          <OkuPopperArrow class="arrowClass" :width="10" :height="5" />
+        <OkuPopperContent class="popper_contentClass small" :side-offset="5">
+          <OkuPopperArrow class="popper_arrowClass" :width="10" :height="5" />
           5
         </OkuPopperContent>
       </OkuPopper>
 
       <OkuPopper>
-        <OkuPopperAnchor class="anchorClass small">
+        <OkuPopperAnchor class="popper_anchorClass small">
           6
         </OkuPopperAnchor>
         <OkuPortal>
-          <OkuPopperContent class="contentClass small" :side-offset="5">
-            <OkuPopperArrow class="arrowClass" :width="10" :height="5" />
+          <OkuPopperContent class="popper_contentClass small" :side-offset="5">
+            <OkuPopperArrow class="popper_arrowClass" :width="10" :height="5" />
             6 (portalled)
           </OkuPopperContent>
         </OkuPortal>
@@ -141,22 +141,22 @@ const scrollContainer2 = ref<HTMLDivElement | null>(null)
     >
       <h1>In translated parent</h1>
       <OkuPopper>
-        <OkuPopperAnchor class="anchorClass small">
+        <OkuPopperAnchor class="popper_anchorClass small">
           7
         </OkuPopperAnchor>
-        <OkuPopperContent class="contentClass small" :side-offset="5">
-          <OkuPopperArrow class="arrowClass" :width="10" :height="5" />
+        <OkuPopperContent class="popper_contentClass small" :side-offset="5">
+          <OkuPopperArrow class="popper_arrowClass" :width="10" :height="5" />
           7
         </OkuPopperContent>
       </OkuPopper>
 
       <OkuPopper>
-        <OkuPopperAnchor class="anchorClass small">
+        <OkuPopperAnchor class="popper_anchorClass small">
           8
         </OkuPopperAnchor>
         <OkuPortal>
-          <OkuPopperContent class="contentClass small" :side-offset="5">
-            <OkuPopperArrow class="arrowClass" :width="10" :height="5" />
+          <OkuPopperContent class="popper_contentClass small" :side-offset="5">
+            <OkuPopperArrow class="popper_arrowClass" :width="10" :height="5" />
             8 (portalled)
           </OkuPopperContent>
         </OkuPortal>
@@ -197,32 +197,32 @@ const scrollContainer2 = ref<HTMLDivElement | null>(null)
               }"
             >
               <OkuPopper>
-                <OkuPopperAnchor class="anchorClass small">
+                <OkuPopperAnchor class="popper_anchorClass small">
                   9.{{ i + 1 }}
                 </OkuPopperAnchor>
                 <OkuPopperContent
-                  class="contentClass small"
+                  class="popper_contentClass small"
                   :side-offset="5"
                   hide-when-detached
                   :collision-boundary="scrollContainer1"
                 >
-                  <OkuPopperArrow class="arrowClass" :width="10" :height="5" />
+                  <OkuPopperArrow class="popper_arrowClass" :width="10" :height="5" />
                   9.{{ i + 1 }}
                 </OkuPopperContent>
               </OkuPopper>
 
               <OkuPopper>
-                <OkuPopperAnchor class="anchorClass small">
+                <OkuPopperAnchor class="popper_anchorClass small">
                   10.{{ i + 1 }}
                 </OkuPopperAnchor>
                 <OkuPortal>
                   <OkuPopperContent
-                    class="contentClass small"
+                    class="popper_contentClass small"
                     :side-offset="5"
                     hide-when-detached
                     :collision-boundary="scrollContainer1"
                   >
-                    <OkuPopperArrow class="arrowClass" :width="10" :height="5" />
+                    <OkuPopperArrow class="popper_arrowClass" :width="10" :height="5" />
                     10.{{ i + 1 }} (portalled)
                   </OkuPopperContent>
                 </OkuPortal>
@@ -262,32 +262,32 @@ const scrollContainer2 = ref<HTMLDivElement | null>(null)
               }"
             >
               <OkuPopper>
-                <OkuPopperAnchor class="anchorClass small">
+                <OkuPopperAnchor class="popper_anchorClass small">
                   9.{{ i + 1 }}
                 </OkuPopperAnchor>
                 <OkuPopperContent
-                  class="contentClass small"
+                  class="popper_contentClass small"
                   :side-offset="5"
                   hide-when-detached
                   :collision-boundary="scrollContainer2"
                 >
-                  <OkuPopperArrow class="arrowClass" :width="10" :height="5" />
+                  <OkuPopperArrow class="popper_arrowClass" :width="10" :height="5" />
                   9.{{ i + 1 }}
                 </OkuPopperContent>
               </OkuPopper>
 
               <OkuPopper>
-                <OkuPopperAnchor class="anchorClass small">
+                <OkuPopperAnchor class="popper_anchorClass small">
                   10.{{ i + 1 }}
                 </OkuPopperAnchor>
                 <OkuPortal>
                   <OkuPopperContent
-                    class="contentClass small"
+                    class="popper_contentClass small"
                     :side-offset="5"
                     hide-when-detached
                     :collision-boundary="scrollContainer2"
                   >
-                    <OkuPopperArrow class="arrowClass" :width="10" :height="5" />
+                    <OkuPopperArrow class="popper_arrowClass" :width="10" :height="5" />
                     10.{{ i + 1 }} (portalled)
                   </OkuPopperContent>
                 </OkuPortal>
@@ -310,22 +310,22 @@ const scrollContainer2 = ref<HTMLDivElement | null>(null)
     >
       <h1>Logical &quot;start&quot; alignment (LTR)</h1>
       <OkuPopper>
-        <OkuPopperAnchor class="anchorClass small">
+        <OkuPopperAnchor class="popper_anchorClass small">
           11
         </OkuPopperAnchor>
-        <OkuPopperContent class="contentClass small" :side-offset="5" align="start">
-          <OkuPopperArrow class="arrowClass" :width="10" :height="5" />
+        <OkuPopperContent class="popper_contentClass small" :side-offset="5" align="start">
+          <OkuPopperArrow class="popper_arrowClass" :width="10" :height="5" />
           11
         </OkuPopperContent>
       </OkuPopper>
 
       <OkuPopper>
-        <OkuPopperAnchor class="anchorClass small">
+        <OkuPopperAnchor class="popper_anchorClass small">
           12
         </OkuPopperAnchor>
         <OkuPortal>
-          <OkuPopperContent class="contentClass small" :side-offset="5" align="start">
-            <OkuPopperArrow class="arrowClass" :width="10" :height="5" />
+          <OkuPopperContent class="popper_contentClass small" :side-offset="5" align="start">
+            <OkuPopperArrow class="popper_arrowClass" :width="10" :height="5" />
             12 (portalled)
           </OkuPopperContent>
         </OkuPortal>
@@ -344,22 +344,22 @@ const scrollContainer2 = ref<HTMLDivElement | null>(null)
     >
       <h1>Logical &quot;start&quot; alignment (RTL)</h1>
       <OkuPopper>
-        <OkuPopperAnchor class="anchorClass small">
+        <OkuPopperAnchor class="popper_anchorClass small">
           13
         </OkuPopperAnchor>
-        <OkuPopperContent class="contentClass small" :side-offset="5" align="start" dir="rtl">
-          <OkuPopperArrow class="arrowClass" :width="10" :height="5" />
+        <OkuPopperContent class="popper_contentClass small" :side-offset="5" align="start" dir="rtl">
+          <OkuPopperArrow class="popper_arrowClass" :width="10" :height="5" />
           13
         </OkuPopperContent>
       </OkuPopper>
 
       <OkuPopper>
-        <OkuPopperAnchor class="anchorClass small">
+        <OkuPopperAnchor class="popper_anchorClass small">
           14
         </OkuPopperAnchor>
         <OkuPortal>
-          <OkuPopperContent class="contentClass small" :side-offset="5" align="start" dir="rtl">
-            <OkuPopperArrow class="arrowClass" :width="10" :height="5" />
+          <OkuPopperContent class="popper_contentClass small" :side-offset="5" align="start" dir="rtl">
+            <OkuPopperArrow class="popper_arrowClass" :width="10" :height="5" />
             14 (portalled)
           </OkuPopperContent>
         </OkuPortal>
diff --git a/packages/components/popper/src/stories/OneScroll.vue b/packages/components/popper/src/stories/OneScroll.vue
index b6341a7f3..1a017f24b 100644
--- a/packages/components/popper/src/stories/OneScroll.vue
+++ b/packages/components/popper/src/stories/OneScroll.vue
@@ -33,14 +33,14 @@ const scrollContainer1 = ref<HTMLDivElement | null>(null)
           }"
         >
           <OkuPopper>
-            <OkuPopperAnchor class="anchorClass small">
+            <OkuPopperAnchor class="popper_anchorClass small">
               9
             </OkuPopperAnchor>
             <OkuPopperContent
-              class="contentClass small" :side-offset="5" hide-when-detached
+              class="popper_contentClass small" :side-offset="5" hide-when-detached
               :collision-boundary="scrollContainer1"
             >
-              <OkuPopperArrow class="arrowClass" :width="10" :height="5" />
+              <OkuPopperArrow class="popper_arrowClass" :width="10" :height="5" />
               9
             </OkuPopperContent>
           </OkuPopper>
diff --git a/packages/components/popper/src/stories/PopperDemo.vue b/packages/components/popper/src/stories/PopperDemo.vue
index 50df9a737..74b92002a 100644
--- a/packages/components/popper/src/stories/PopperDemo.vue
+++ b/packages/components/popper/src/stories/PopperDemo.vue
@@ -70,7 +70,7 @@ withDefaults(defineProps<Props>(), {
 </template>
 
 <style>
-.contentClass {
+.popper_contentClass {
   transform-origin: var(--oku-popper-transform-origin);
   background-color: #f9fafb;
   padding: 10px;
@@ -97,7 +97,7 @@ withDefaults(defineProps<Props>(), {
   }
 }
 
-.anchorClass {
+.popper_anchorClass {
   background-color: hotpink;
   width: 100px;
   height: 100px;
@@ -118,11 +118,11 @@ withDefaults(defineProps<Props>(), {
   }
 }
 
-.arrowClass {
+.popper_arrowClass {
   fill: #f9fafb;
 }
 
-@keyframes rotateIn {
+@keyframes popper_rotateIn {
   0% {
     transform: scale(0) rotateZ(calc(var(--direction, 0) * 45deg));
   }
@@ -131,7 +131,7 @@ withDefaults(defineProps<Props>(), {
   }
 }
 
-.animatedContentClass {
+.popper_animatedContentClass {
   transform-origin: var(--oku-popper-transform-origin);
   background-color: #f9fafb;
   padding: 10px;
@@ -165,6 +165,6 @@ withDefaults(defineProps<Props>(), {
     --direction: -1;
   }
 
-  animation: rotateIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+  animation: popper_rotateIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
 }
 </style>
diff --git a/packages/components/popper/src/stories/Styled.vue b/packages/components/popper/src/stories/Styled.vue
index 023236b70..85fac6a24 100644
--- a/packages/components/popper/src/stories/Styled.vue
+++ b/packages/components/popper/src/stories/Styled.vue
@@ -14,15 +14,15 @@ const open = ref(false)
 <template>
   <Scrollable>
     <OkuPopper>
-      <OkuPopperAnchor class="anchorClass" @click="open = true">
+      <OkuPopperAnchor class="popper_anchorClass" @click="open = true">
         open
       </OkuPopperAnchor>
 
-      <OkuPopperContent v-if="open" class="contentClass" :side-offset="5">
+      <OkuPopperContent v-if="open" class="popper_contentClass" :side-offset="5">
         <button @click="open = false">
           close
         </button>
-        <OkuPopperArrow class="arrowClass" :width="20" :height="10" />
+        <OkuPopperArrow class="popper_arrowClass" :width="20" :height="10" />
       </OkuPopperContent>
     </OkuPopper>
   </Scrollable>
diff --git a/packages/components/popper/src/stories/Transition.vue b/packages/components/popper/src/stories/Transition.vue
index 0e006c757..5a998e9b9 100644
--- a/packages/components/popper/src/stories/Transition.vue
+++ b/packages/components/popper/src/stories/Transition.vue
@@ -12,7 +12,7 @@ const open = ref(false)
 
 <template>
   <OkuPopper>
-    <OkuPopperAnchor class="anchorClass" @click="open = true">
+    <OkuPopperAnchor class="popper_anchorClass" @click="open = true">
       Open
     </OkuPopperAnchor>
     <Teleport to="body">
@@ -22,12 +22,12 @@ const open = ref(false)
           :side-offset="5"
           side="right"
           align="start"
-          class="animatedContentClass"
+          class="popper_animatedContentClass"
         >
           <button @click="open = false">
             close
           </button>
-          <OkuPopperArrow class="arrowClass" :width="20" :height="10" :offset="25" />
+          <OkuPopperArrow class="popper_arrowClass" :width="20" :height="10" :offset="25" />
         </OkuPopperContent>
       </Transition>
     </Teleport>
diff --git a/packages/components/popper/src/stories/WithCustomArrow.vue b/packages/components/popper/src/stories/WithCustomArrow.vue
index e7bb8b5e2..59fafa3c3 100644
--- a/packages/components/popper/src/stories/WithCustomArrow.vue
+++ b/packages/components/popper/src/stories/WithCustomArrow.vue
@@ -15,11 +15,11 @@ const open = ref(false)
 <template>
   <Scrollable>
     <OkuPopper>
-      <OkuPopperAnchor class="anchorClass" @click="open = true">
+      <OkuPopperAnchor class="popper_anchorClass" @click="open = true">
         open
       </OkuPopperAnchor>
 
-      <OkuPopperContent v-if="open" class="contentClass" :side-offset="5" side="right">
+      <OkuPopperContent v-if="open" class="popper_contentClass" :side-offset="5" side="right">
         <button @click="open = false">
           close
         </button>
diff --git a/packages/components/popper/src/stories/WithPortal.vue b/packages/components/popper/src/stories/WithPortal.vue
index f0f5a3d8f..5bde1a44c 100644
--- a/packages/components/popper/src/stories/WithPortal.vue
+++ b/packages/components/popper/src/stories/WithPortal.vue
@@ -15,16 +15,16 @@ const open = ref(false)
 <template>
   <Scrollable>
     <OkuPopper>
-      <OkuPopperAnchor class="anchorClass" @click="open = true">
+      <OkuPopperAnchor class="popper_anchorClass" @click="open = true">
         open
       </OkuPopperAnchor>
 
       <OkuPortal v-if="open" as-child>
-        <OkuPopperContent class="contentClass" :side-offset="5">
+        <OkuPopperContent class="popper_contentClass" :side-offset="5">
           <button @click="open = false">
             close
           </button>
-          <OkuPopperArrow class="arrowClass" :width="20" :height="10" />
+          <OkuPopperArrow class="popper_arrowClass" :width="20" :height="10" />
         </OkuPopperContent>
       </OkuPortal>
     </OkuPopper>
diff --git a/packages/components/popper/src/stories/WithUpdatePositionStrategyAlways.vue b/packages/components/popper/src/stories/WithUpdatePositionStrategyAlways.vue
index b35276e83..2eb0af1af 100644
--- a/packages/components/popper/src/stories/WithUpdatePositionStrategyAlways.vue
+++ b/packages/components/popper/src/stories/WithUpdatePositionStrategyAlways.vue
@@ -38,7 +38,7 @@ onBeforeUnmount(() => {
   <Scrollable>
     <OkuPopper>
       <OkuPopperAnchor
-        class="anchorClass"
+        class="popper_anchorClass"
         :style="{
           marginLeft: `${left}px`,
         }"
@@ -49,14 +49,14 @@ onBeforeUnmount(() => {
 
       <OkuPortal v-if="open" as-child>
         <OkuPopperContent
-          class="contentClass"
+          class="popper_contentClass"
           :side-offset="5"
           update-position-strategy="always"
         >
           <button @click="open = false">
             close
           </button>
-          <OkuPopperArrow class="arrowClass" :width="20" :height="10" />
+          <OkuPopperArrow class="popper_arrowClass" :width="20" :height="10" />
         </OkuPopperContent>
       </OkuPortal>
     </OkuPopper>
diff --git a/packages/components/popper/tests/__snapshots__/popper.test.ts.snap b/packages/components/popper/tests/__snapshots__/popper.test.ts.snap
index 4d5d4c5a1..6d96ca9ce 100644
--- a/packages/components/popper/tests/__snapshots__/popper.test.ts.snap
+++ b/packages/components/popper/tests/__snapshots__/popper.test.ts.snap
@@ -1,59 +1,59 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`OkuPopper > Animated > document.body has correct html 1`] = `"<div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"><div style=\\"display: flex; align-items: center; justify-content: center; height: 200vh;\\" container=\\"[object HTMLBodyElement]\\"><div class=\\"anchorClass\\"> open </div><!--teleport start--><!--teleport end--></div></div><div data-oku-popper-content-wrapper=\\"\\" style=\\"position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content; --oku-popper-transform-origin:  ;\\"><div data-side=\\"bottom\\" data-align=\\"center\\" class=\\"animatedContentClass\\" style=\\"animation: none;\\"><button> close </button><span style=\\"position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;\\"><svg class=\\"arrowClass\\" offset=\\"25\\" style=\\"display: block;\\" width=\\"20\\" height=\\"10\\" viewBox=\\"0 0 30 10\\" preserveAspectRatio=\\"none\\"><polygon points=\\"0,0 30,0 15,10\\"></polygon></svg></span></div></div>"`;
+exports[`OkuPopper > Animated > document.body has correct html 1`] = `"<div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"><div style=\\"display: flex; align-items: center; justify-content: center; height: 200vh;\\" container=\\"[object HTMLBodyElement]\\"><div class=\\"popper_anchorClass\\"> open </div><!--teleport start--><!--teleport end--></div></div><div data-oku-popper-content-wrapper=\\"\\" style=\\"position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content; --oku-popper-transform-origin:  ;\\"><div data-side=\\"bottom\\" data-align=\\"center\\" class=\\"popper_animatedContentClass\\" style=\\"animation: none;\\"><button> close </button><span style=\\"position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;\\"><svg class=\\"popper_arrowClass\\" offset=\\"25\\" style=\\"display: block;\\" width=\\"20\\" height=\\"10\\" viewBox=\\"0 0 30 10\\" preserveAspectRatio=\\"none\\"><polygon points=\\"0,0 30,0 15,10\\"></polygon></svg></span></div></div>"`;
 
 exports[`OkuPopper > Animated > renders correctly 1`] = `
 "<div style=\\"display: flex; align-items: center; justify-content: center; height: 200vh;\\" container=\\"[object HTMLBodyElement]\\">
-  <div class=\\"anchorClass\\"> open </div>
+  <div class=\\"popper_anchorClass\\"> open </div>
   <!--teleport start-->
   <!--teleport end-->
 </div>"
 `;
 
-exports[`OkuPopper > Animated > should be able to close 1`] = `"<div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"><div style=\\"display: flex; align-items: center; justify-content: center; height: 200vh;\\" container=\\"[object HTMLBodyElement]\\"><div class=\\"anchorClass\\"> open </div><!--v-if--></div></div>"`;
+exports[`OkuPopper > Animated > should be able to close 1`] = `"<div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"><div style=\\"display: flex; align-items: center; justify-content: center; height: 200vh;\\" container=\\"[object HTMLBodyElement]\\"><div class=\\"popper_anchorClass\\"> open </div><!--v-if--></div></div>"`;
 
-exports[`OkuPopper > OneScroll > renders correctly 1`] = `"<div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"><div style=\\"display: flex; gap: 100px;\\"><div><h1>In scrolling container</h1><div style=\\"width: 400px; height: 600px; overflow: auto; border: 1px solid black;\\"><div style=\\"height: 2000px;\\"><div class=\\"anchorClass small\\"> 9 </div><div data-oku-popper-content-wrapper=\\"\\" style=\\"position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content; --oku-popper-transform-origin:  ;\\"><div data-side=\\"bottom\\" data-align=\\"center\\" class=\\"contentClass small\\" style=\\"animation: none;\\"><span style=\\"position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;\\"><svg class=\\"arrowClass\\" style=\\"display: block;\\" width=\\"10\\" height=\\"5\\" viewBox=\\"0 0 30 10\\" preserveAspectRatio=\\"none\\"><polygon points=\\"0,0 30,0 15,10\\"></polygon></svg></span> 9 </div></div></div></div></div></div></div>"`;
+exports[`OkuPopper > OneScroll > renders correctly 1`] = `"<div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"><div style=\\"display: flex; gap: 100px;\\"><div><h1>In scrolling container</h1><div style=\\"width: 400px; height: 600px; overflow: auto; border: 1px solid black;\\"><div style=\\"height: 2000px;\\"><div class=\\"popper_anchorClass small\\"> 9 </div><div data-oku-popper-content-wrapper=\\"\\" style=\\"position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content; --oku-popper-transform-origin:  ;\\"><div data-side=\\"bottom\\" data-align=\\"center\\" class=\\"popper_contentClass small\\" style=\\"animation: none;\\"><span style=\\"position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;\\"><svg class=\\"popper_arrowClass\\" style=\\"display: block;\\" width=\\"10\\" height=\\"5\\" viewBox=\\"0 0 30 10\\" preserveAspectRatio=\\"none\\"><polygon points=\\"0,0 30,0 15,10\\"></polygon></svg></span> 9 </div></div></div></div></div></div></div>"`;
 
-exports[`OkuPopper > OneScroll > should be able to close 1`] = `"<div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"><div style=\\"display: flex; gap: 100px;\\"><div><h1>In scrolling container</h1><div style=\\"width: 400px; height: 600px; overflow: auto; border: 1px solid black;\\"><div style=\\"height: 2000px;\\"><div class=\\"anchorClass small\\"> 9 </div><div data-oku-popper-content-wrapper=\\"\\" style=\\"position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content; --oku-popper-transform-origin:  ;\\"><div data-side=\\"bottom\\" data-align=\\"center\\" class=\\"contentClass small\\" style=\\"animation: none;\\"><span style=\\"position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;\\"><svg class=\\"arrowClass\\" style=\\"display: block;\\" width=\\"10\\" height=\\"5\\" viewBox=\\"0 0 30 10\\" preserveAspectRatio=\\"none\\"><polygon points=\\"0,0 30,0 15,10\\"></polygon></svg></span> 9 </div></div></div></div></div></div></div>"`;
+exports[`OkuPopper > OneScroll > should be able to close 1`] = `"<div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"><div style=\\"display: flex; gap: 100px;\\"><div><h1>In scrolling container</h1><div style=\\"width: 400px; height: 600px; overflow: auto; border: 1px solid black;\\"><div style=\\"height: 2000px;\\"><div class=\\"popper_anchorClass small\\"> 9 </div><div data-oku-popper-content-wrapper=\\"\\" style=\\"position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content; --oku-popper-transform-origin:  ;\\"><div data-side=\\"bottom\\" data-align=\\"center\\" class=\\"popper_contentClass small\\" style=\\"animation: none;\\"><span style=\\"position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;\\"><svg class=\\"popper_arrowClass\\" style=\\"display: block;\\" width=\\"10\\" height=\\"5\\" viewBox=\\"0 0 30 10\\" preserveAspectRatio=\\"none\\"><polygon points=\\"0,0 30,0 15,10\\"></polygon></svg></span> 9 </div></div></div></div></div></div></div>"`;
 
 exports[`OkuPopper > StyledVue > renders correctly 1`] = `
 "<div style=\\"display: flex; align-items: center; justify-content: center; height: 200vh;\\">
-  <div class=\\"anchorClass\\"> open </div>
+  <div class=\\"popper_anchorClass\\"> open </div>
   <div data-oku-popper-content-wrapper=\\"\\" style=\\"position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content; --oku-popper-transform-origin:  ;\\">
-    <div data-side=\\"bottom\\" data-align=\\"center\\" class=\\"contentClass\\" style=\\"animation: none;\\"><button> close </button><span style=\\"position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;\\"><svg class=\\"arrowClass\\" style=\\"display: block;\\" width=\\"20\\" height=\\"10\\" viewBox=\\"0 0 30 10\\" preserveAspectRatio=\\"none\\"><polygon points=\\"0,0 30,0 15,10\\"></polygon></svg></span></div>
+    <div data-side=\\"bottom\\" data-align=\\"center\\" class=\\"popper_contentClass\\" style=\\"animation: none;\\"><button> close </button><span style=\\"position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;\\"><svg class=\\"popper_arrowClass\\" style=\\"display: block;\\" width=\\"20\\" height=\\"10\\" viewBox=\\"0 0 30 10\\" preserveAspectRatio=\\"none\\"><polygon points=\\"0,0 30,0 15,10\\"></polygon></svg></span></div>
   </div>
 </div>"
 `;
 
 exports[`OkuPopper > StyledVue > should be able to close 1`] = `
 "<div style=\\"display: flex; align-items: center; justify-content: center; height: 200vh;\\">
-  <div class=\\"anchorClass\\"> open </div>
+  <div class=\\"popper_anchorClass\\"> open </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`OkuPopper > Transition > renders correctly 1`] = `
-"<div data-v-21f44795=\\"\\" class=\\"anchorClass\\"> Open </div>
+"<div data-v-21f44795=\\"\\" class=\\"popper_anchorClass\\"> Open </div>
 <!--teleport start-->
 <!--teleport end-->"
 `;
 
-exports[`OkuPopper > Transition > renders correctly 2`] = `"<div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"><div data-v-21f44795=\\"\\" class=\\"anchorClass\\"> Open </div><!--teleport start--><!--teleport end--></div><transition-stub data-v-21f44795=\\"\\" name=\\"fade\\" appear=\\"false\\" persisted=\\"true\\" css=\\"true\\"><div data-v-21f44795=\\"\\" data-oku-popper-content-wrapper=\\"\\" style=\\"position: fixed; left: 0px; top: 0px; transform: translate(5px, 0px); min-width: max-content; --oku-popper-transform-origin: 0px 0px; --oku-popper-available-width: -5px; --oku-popper-available-height: 0px; --oku-popper-anchor-width: 0px; --oku-popper-anchor-height: 0px;\\"><div data-side=\\"right\\" data-align=\\"start\\" class=\\"animatedContentClass\\" style=\\"\\"><button data-v-21f44795=\\"\\"> close </button><span data-v-21f44795=\\"\\" style=\\"position: absolute; left: 0px; transform-origin: 0 0; transform: translateY(50%) rotate(90deg) translateX(-50%);\\"><svg class=\\"arrowClass\\" offset=\\"25\\" style=\\"display: block;\\" width=\\"20\\" height=\\"10\\" viewBox=\\"0 0 30 10\\" preserveAspectRatio=\\"none\\"><polygon points=\\"0,0 30,0 15,10\\"></polygon></svg></span></div></div></transition-stub>"`;
+exports[`OkuPopper > Transition > renders correctly 2`] = `"<div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"><div data-v-21f44795=\\"\\" class=\\"popper_anchorClass\\"> Open </div><!--teleport start--><!--teleport end--></div><transition-stub data-v-21f44795=\\"\\" name=\\"fade\\" appear=\\"false\\" persisted=\\"true\\" css=\\"true\\"><div data-v-21f44795=\\"\\" data-oku-popper-content-wrapper=\\"\\" style=\\"position: fixed; left: 0px; top: 0px; transform: translate(5px, 0px); min-width: max-content; --oku-popper-transform-origin: 0px 0px; --oku-popper-available-width: -5px; --oku-popper-available-height: 0px; --oku-popper-anchor-width: 0px; --oku-popper-anchor-height: 0px;\\"><div data-side=\\"right\\" data-align=\\"start\\" class=\\"popper_animatedContentClass\\" style=\\"\\"><button data-v-21f44795=\\"\\"> close </button><span data-v-21f44795=\\"\\" style=\\"position: absolute; left: 0px; transform-origin: 0 0; transform: translateY(50%) rotate(90deg) translateX(-50%);\\"><svg class=\\"popper_arrowClass\\" offset=\\"25\\" style=\\"display: block;\\" width=\\"20\\" height=\\"10\\" viewBox=\\"0 0 30 10\\" preserveAspectRatio=\\"none\\"><polygon points=\\"0,0 30,0 15,10\\"></polygon></svg></span></div></div></transition-stub>"`;
 
-exports[`OkuPopper > Transition > should be able to close 1`] = `"<div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"><div data-v-21f44795=\\"\\" class=\\"anchorClass\\"> Open </div><!--teleport start--><!--teleport end--></div><transition-stub data-v-21f44795=\\"\\" name=\\"fade\\" appear=\\"false\\" persisted=\\"true\\" css=\\"true\\"><div data-v-21f44795=\\"\\" data-oku-popper-content-wrapper=\\"\\" style=\\"position: fixed; left: 0px; top: 0px; transform: translate(5px, 0px); min-width: max-content; --oku-popper-transform-origin: 0px 0px; --oku-popper-available-width: -5px; --oku-popper-available-height: 0px; --oku-popper-anchor-width: 0px; --oku-popper-anchor-height: 0px; display: none;\\"><div data-side=\\"right\\" data-align=\\"start\\" class=\\"animatedContentClass\\" style=\\"\\"><button data-v-21f44795=\\"\\"> close </button><span data-v-21f44795=\\"\\" style=\\"position: absolute; left: 0px; transform-origin: 0 0; transform: translateY(50%) rotate(90deg) translateX(-50%);\\"><svg class=\\"arrowClass\\" offset=\\"25\\" style=\\"display: block;\\" width=\\"20\\" height=\\"10\\" viewBox=\\"0 0 30 10\\" preserveAspectRatio=\\"none\\"><polygon points=\\"0,0 30,0 15,10\\"></polygon></svg></span></div></div></transition-stub>"`;
+exports[`OkuPopper > Transition > should be able to close 1`] = `"<div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"></div><div data-v-app=\\"\\"><div data-v-21f44795=\\"\\" class=\\"popper_anchorClass\\"> Open </div><!--teleport start--><!--teleport end--></div><transition-stub data-v-21f44795=\\"\\" name=\\"fade\\" appear=\\"false\\" persisted=\\"true\\" css=\\"true\\"><div data-v-21f44795=\\"\\" data-oku-popper-content-wrapper=\\"\\" style=\\"position: fixed; left: 0px; top: 0px; transform: translate(5px, 0px); min-width: max-content; --oku-popper-transform-origin: 0px 0px; --oku-popper-available-width: -5px; --oku-popper-available-height: 0px; --oku-popper-anchor-width: 0px; --oku-popper-anchor-height: 0px; display: none;\\"><div data-side=\\"right\\" data-align=\\"start\\" class=\\"popper_animatedContentClass\\" style=\\"\\"><button data-v-21f44795=\\"\\"> close </button><span data-v-21f44795=\\"\\" style=\\"position: absolute; left: 0px; transform-origin: 0 0; transform: translateY(50%) rotate(90deg) translateX(-50%);\\"><svg class=\\"popper_arrowClass\\" offset=\\"25\\" style=\\"display: block;\\" width=\\"20\\" height=\\"10\\" viewBox=\\"0 0 30 10\\" preserveAspectRatio=\\"none\\"><polygon points=\\"0,0 30,0 15,10\\"></polygon></svg></span></div></div></transition-stub>"`;
 
 exports[`OkuPopper > WithCustomArrow > renders correctly 1`] = `
 "<div style=\\"display: flex; align-items: center; justify-content: center; height: 200vh;\\">
-  <div class=\\"anchorClass\\"> open </div>
+  <div class=\\"popper_anchorClass\\"> open </div>
   <div data-oku-popper-content-wrapper=\\"\\" style=\\"position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content; --oku-popper-transform-origin:  ;\\">
-    <div data-side=\\"right\\" data-align=\\"center\\" class=\\"contentClass\\" style=\\"animation: none;\\"><button> close </button><span style=\\"position: absolute; left: 0px; transform-origin: 0 0; transform: translateY(50%) rotate(90deg) translateX(-50%); visibility: hidden;\\"><div style=\\"display: block; width: 20px; height: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background-color: tomato;\\" width=\\"10\\" height=\\"5\\" offset=\\"20\\" viewbox=\\"0 0 30 10\\" preserveaspectratio=\\"none\\"></div></span></div>
+    <div data-side=\\"right\\" data-align=\\"center\\" class=\\"popper_contentClass\\" style=\\"animation: none;\\"><button> close </button><span style=\\"position: absolute; left: 0px; transform-origin: 0 0; transform: translateY(50%) rotate(90deg) translateX(-50%); visibility: hidden;\\"><div style=\\"display: block; width: 20px; height: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background-color: tomato;\\" width=\\"10\\" height=\\"5\\" offset=\\"20\\" viewbox=\\"0 0 30 10\\" preserveaspectratio=\\"none\\"></div></span></div>
   </div>
 </div>"
 `;
 
 exports[`OkuPopper > WithPortal > renders correctly 1`] = `
 "<div style=\\"display: flex; align-items: center; justify-content: center; height: 200vh;\\">
-  <div class=\\"anchorClass\\"> open </div>
+  <div class=\\"popper_anchorClass\\"> open </div>
   <!--teleport start-->
   <!--teleport end-->
 </div>"
diff --git a/packages/components/popper/tests/popper.test.ts b/packages/components/popper/tests/popper.test.ts
index 73c4323bd..0a8e4ea01 100644
--- a/packages/components/popper/tests/popper.test.ts
+++ b/packages/components/popper/tests/popper.test.ts
@@ -60,7 +60,7 @@ describe('OkuPopper', () => {
         attachTo: document.body,
       })
 
-      await wrapper.find('[class="anchorClass"]').trigger('click')
+      await wrapper.find('[class="popper_anchorClass"]').trigger('click')
       await nextTick()
     })
 
@@ -94,7 +94,7 @@ describe('OkuPopper', () => {
         attachTo: document.body,
       })
 
-      await wrapper.find('[class="anchorClass"]').trigger('click')
+      await wrapper.find('[class="popper_anchorClass"]').trigger('click')
       await nextTick()
     })
 
@@ -128,7 +128,7 @@ describe('OkuPopper', () => {
       wrapper = mount(OneScroll, {
         attachTo: document.body,
       })
-      await wrapper.find('[class="anchorClass small"]').trigger('click')
+      await wrapper.find('[class="popper_anchorClass small"]').trigger('click')
     })
 
     /**
@@ -157,7 +157,7 @@ describe('OkuPopper', () => {
       wrapper = mount(Transition, {
         attachTo: document.body,
       })
-      await wrapper.find('[class="anchorClass"]').trigger('click')
+      await wrapper.find('[class="popper_anchorClass"]').trigger('click')
 
       await new Promise(resolve => setTimeout(resolve, 300))
       await nextTick()
@@ -194,7 +194,7 @@ describe('OkuPopper', () => {
       wrapper = mount(WithCustomArrow, {
         attachTo: document.body,
       })
-      await wrapper.find('[class="anchorClass"]').trigger('click')
+      await wrapper.find('[class="popper_anchorClass"]').trigger('click')
     })
 
     /**
@@ -217,7 +217,7 @@ describe('OkuPopper', () => {
         attachTo: document.body,
       })
 
-      await wrapper.find('[class="anchorClass"]').trigger('click')
+      await wrapper.find('[class="popper_anchorClass"]').trigger('click')
     })
 
     /**
diff --git a/packages/components/presence/src/stories/PresenceDemo.vue b/packages/components/presence/src/stories/PresenceDemo.vue
index 5f4d06279..2d2a0fde3 100644
--- a/packages/components/presence/src/stories/PresenceDemo.vue
+++ b/packages/components/presence/src/stories/PresenceDemo.vue
@@ -50,7 +50,7 @@ withDefaults(defineProps<OkuPresenceProps>(), {
 </template>
 
 <style>
-@keyframes fadeIn {
+@keyframes presence_fadeIn {
   from {
     opacity: 0;
   }
@@ -59,7 +59,7 @@ withDefaults(defineProps<OkuPresenceProps>(), {
   }
 }
 
-@keyframes fadeOut {
+@keyframes presence_fadeOut {
   from {
     opacity: 1;
   }
@@ -68,7 +68,7 @@ withDefaults(defineProps<OkuPresenceProps>(), {
   }
 }
 
-@keyframes slideUp {
+@keyframes presence_slideUp {
   from {
     transform: translateY(30px);
   }
@@ -77,7 +77,7 @@ withDefaults(defineProps<OkuPresenceProps>(), {
   }
 }
 
-@keyframes slideDown {
+@keyframes presence_slideDown {
   from {
     transform: translateY(0);
   }
@@ -86,35 +86,35 @@ withDefaults(defineProps<OkuPresenceProps>(), {
   }
 }
 
-.mountAnimationClass {
-  animation: fadeIn 3s ease-out;
+.presence_mountAnimationClass {
+  animation: presence_fadeIn 3s ease-out;
 }
 
-.unmountAnimationClass {
+.presence_unmountAnimationClass {
   &[data-state="closed"] {
-    animation: fadeOut 3s ease-in;
+    animation: presence_fadeOut 3s ease-in;
   }
 }
 
-.multipleMountAnimationsClass {
-  animation: fadeIn 6s cubic-bezier(0.22, 1, 0.36, 1), slideUp 6s cubic-bezier(0.22, 1, 0.36, 1);
+.presence_multipleMountAnimationsClass {
+  animation: presence_fadeIn 6s cubic-bezier(0.22, 1, 0.36, 1), presence_slideUp 6s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
-.openAndCloseAnimationClass {
+.presence_openAndCloseAnimationClass {
   &[data-state="open"] {
-    animation: fadeIn 3s ease-out;
+    animation: presence_fadeIn 3s ease-out;
   }
   &[data-state="closed"] {
-    animation: fadeOut 3s ease-in;
+    animation: presence_fadeOut 3s ease-in;
   }
 }
 
-.multipleOpenAndCloseAnimationsClass {
+.presence_multipleOpenAndCloseAnimationsClass {
   &[data-state="open"] {
-    animation: fadeIn 3s cubic-bezier(0.22, 1, 0.36, 1), slideUp 1s cubic-bezier(0.22, 1, 0.36, 1);
+    animation: presence_fadeIn 3s cubic-bezier(0.22, 1, 0.36, 1), presence_slideUp 1s cubic-bezier(0.22, 1, 0.36, 1);
   }
   &[data-state="closed"] {
-    animation: fadeOut 3s cubic-bezier(0.22, 1, 0.36, 1), slideDown 1s cubic-bezier(0.22, 1, 0.36, 1);
+    animation: presence_fadeOut 3s cubic-bezier(0.22, 1, 0.36, 1), presence_slideDown 1s cubic-bezier(0.22, 1, 0.36, 1);
   }
 }
 </style>
diff --git a/packages/components/presence/src/stories/Toggles.vue b/packages/components/presence/src/stories/Toggles.vue
index 0c271afc5..bfdc365a3 100644
--- a/packages/components/presence/src/stories/Toggles.vue
+++ b/packages/components/presence/src/stories/Toggles.vue
@@ -37,7 +37,7 @@ function handleToggleVisibility() {
 </template>
 
 <style scoped>
-button {
+/* button {
     appearance: auto;
     text-rendering: auto;
     color: buttontext;
@@ -86,5 +86,5 @@ fieldset {
     border-style: groove;
     border-color: rgb(192, 192, 192);
     border-image: initial;
-}
+} */
 </style>
diff --git a/packages/components/presence/src/stories/WithDeferredMountAnimation.vue b/packages/components/presence/src/stories/WithDeferredMountAnimation.vue
index b0ca4d3f9..44fd60a72 100644
--- a/packages/components/presence/src/stories/WithDeferredMountAnimation.vue
+++ b/packages/components/presence/src/stories/WithDeferredMountAnimation.vue
@@ -30,7 +30,7 @@ watch(open, () => {
   <OkuPresence :present="open">
     <div
       ref="elementRef"
-      :class="animate ? 'mountAnimationClass' : undefined"
+      :class="animate ? 'presence_mountAnimationClass' : undefined"
       :data-state="open ? 'open' : 'closed'"
     >
       Content
diff --git a/packages/components/presence/src/stories/WithMountAnimation.vue b/packages/components/presence/src/stories/WithMountAnimation.vue
index 910346c5b..eec1a6fbe 100644
--- a/packages/components/presence/src/stories/WithMountAnimation.vue
+++ b/packages/components/presence/src/stories/WithMountAnimation.vue
@@ -11,7 +11,7 @@ const elementRef = ref<VNodeRef>()
 <template>
   <Toggles v-model:open="open" :node-ref="elementRef" />
   <OkuPresence v-show="open" :present="open">
-    <div ref="elementRef" class="mountAnimationClass" :data-state="open ? 'open' : 'closed'">
+    <div ref="elementRef" class="presence_mountAnimationClass" :data-state="open ? 'open' : 'closed'">
       Content
     </div>
   </OkuPresence>
diff --git a/packages/components/presence/src/stories/WithMultipleMountAnimations.vue b/packages/components/presence/src/stories/WithMultipleMountAnimations.vue
index 6927d1017..69396dcfc 100644
--- a/packages/components/presence/src/stories/WithMultipleMountAnimations.vue
+++ b/packages/components/presence/src/stories/WithMultipleMountAnimations.vue
@@ -11,7 +11,7 @@ const elementRef = ref<VNodeRef>()
 <template>
   <Toggles v-model:open="open" :node-ref="elementRef" />
   <OkuPresence :present="open">
-    <div ref="elementRef" class="multipleMountAnimationsClass" :data-state="open ? 'open' : 'closed'">
+    <div ref="elementRef" class="presence_multipleMountAnimationsClass" :data-state="open ? 'open' : 'closed'">
       Content
     </div>
   </OkuPresence>
diff --git a/packages/components/presence/src/stories/WithMultipleOpenAndCloseAnimations.vue b/packages/components/presence/src/stories/WithMultipleOpenAndCloseAnimations.vue
index 4e9aa8851..57064a094 100644
--- a/packages/components/presence/src/stories/WithMultipleOpenAndCloseAnimations.vue
+++ b/packages/components/presence/src/stories/WithMultipleOpenAndCloseAnimations.vue
@@ -11,7 +11,7 @@ const elementRef = ref<VNodeRef>()
 <template>
   <Toggles v-model:open="open" :node-ref="elementRef" />
   <OkuPresence :present="open">
-    <div ref="elementRef" class="multipleOpenAndCloseAnimationsClass" :data-state="open ? 'open' : 'closed'">
+    <div ref="elementRef" class="presence_multipleOpenAndCloseAnimationsClass" :data-state="open ? 'open' : 'closed'">
       Content
     </div>
   </OkuPresence>
diff --git a/packages/components/presence/src/stories/WithOpenAndCloseAnimation.vue b/packages/components/presence/src/stories/WithOpenAndCloseAnimation.vue
index c2ebed7d3..72088cbe7 100644
--- a/packages/components/presence/src/stories/WithOpenAndCloseAnimation.vue
+++ b/packages/components/presence/src/stories/WithOpenAndCloseAnimation.vue
@@ -11,7 +11,7 @@ const elementRef = ref<VNodeRef>()
 <template>
   <Toggles v-model:open="open" :node-ref="elementRef" />
   <OkuPresence :present="open">
-    <div ref="elementRef" class="openAndCloseAnimationClass" :data-state="open ? 'open' : 'closed'">
+    <div ref="elementRef" class="presence_openAndCloseAnimationClass" :data-state="open ? 'open' : 'closed'">
       Content
     </div>
   </OkuPresence>
diff --git a/packages/components/presence/src/stories/WithUnmountAnimation.vue b/packages/components/presence/src/stories/WithUnmountAnimation.vue
index f2f9e94fa..3b00f8b23 100644
--- a/packages/components/presence/src/stories/WithUnmountAnimation.vue
+++ b/packages/components/presence/src/stories/WithUnmountAnimation.vue
@@ -11,7 +11,7 @@ const elementRef = ref<VNodeRef>()
 <template>
   <Toggles v-model:open="open" :node-ref="elementRef" />
   <OkuPresence :present="open">
-    <div ref="elementRef" class="unmountAnimationClass" :data-state="open ? 'open' : 'closed'">
+    <div ref="elementRef" class="presence_unmountAnimationClass" :data-state="open ? 'open' : 'closed'">
       Content
     </div>
   </OkuPresence>
diff --git a/packages/components/presence/tests/__snapshots__/presence.test.ts.snap b/packages/components/presence/tests/__snapshots__/presence.test.ts.snap
index 3b88cf8b3..cb0d57e31 100644
--- a/packages/components/presence/tests/__snapshots__/presence.test.ts.snap
+++ b/packages/components/presence/tests/__snapshots__/presence.test.ts.snap
@@ -103,7 +103,7 @@ exports[`OkuPresence > WithMountAnimation > should be able to mount click 1`] =
     <legend data-v-e3bd0491=\\"\\">Visibility (triggers cancel event)</legend><button data-v-e3bd0491=\\"\\" id=\\"button2\\" type=\\"button\\"> toggle </button>
   </fieldset>
 </form>
-<div class=\\"mountAnimationClass\\" data-state=\\"open\\"> Content </div>"
+<div class=\\"presence_mountAnimationClass\\" data-state=\\"open\\"> Content </div>"
 `;
 
 exports[`OkuPresence > WithMountAnimation > should be able to mount click 2`] = `
@@ -126,7 +126,7 @@ exports[`OkuPresence > WithMountAnimation > should be able to mount visibility 1
     <legend data-v-e3bd0491=\\"\\">Visibility (triggers cancel event)</legend><button data-v-e3bd0491=\\"\\" id=\\"button2\\" type=\\"button\\"> toggle </button>
   </fieldset>
 </form>
-<div class=\\"mountAnimationClass\\" data-state=\\"open\\"> Content </div>"
+<div class=\\"presence_mountAnimationClass\\" data-state=\\"open\\"> Content </div>"
 `;
 
 exports[`OkuPresence > WithMountAnimation > should be able to mount visibility 2`] = `
@@ -138,7 +138,7 @@ exports[`OkuPresence > WithMountAnimation > should be able to mount visibility 2
     <legend data-v-e3bd0491=\\"\\">Visibility (triggers cancel event)</legend><button data-v-e3bd0491=\\"\\" id=\\"button2\\" type=\\"button\\"> toggle </button>
   </fieldset>
 </form>
-<div class=\\"mountAnimationClass\\" data-state=\\"open\\" style=\\"display: none;\\"> Content </div>"
+<div class=\\"presence_mountAnimationClass\\" data-state=\\"open\\" style=\\"display: none;\\"> Content </div>"
 `;
 
 exports[`OkuPresence > WithMountAnimation > should be able to mount visibility 3`] = `
@@ -150,7 +150,7 @@ exports[`OkuPresence > WithMountAnimation > should be able to mount visibility 3
     <legend data-v-e3bd0491=\\"\\">Visibility (triggers cancel event)</legend><button data-v-e3bd0491=\\"\\" id=\\"button2\\" type=\\"button\\"> toggle </button>
   </fieldset>
 </form>
-<div class=\\"mountAnimationClass\\" data-state=\\"open\\" style=\\"display: block;\\"> Content </div>"
+<div class=\\"presence_mountAnimationClass\\" data-state=\\"open\\" style=\\"display: block;\\"> Content </div>"
 `;
 
 exports[`OkuPresence > WithMultipleMountAnimations > renders correctly 1`] = `
@@ -173,7 +173,7 @@ exports[`OkuPresence > WithMultipleMountAnimations > should be able to mount cli
     <legend data-v-e3bd0491=\\"\\">Visibility (triggers cancel event)</legend><button data-v-e3bd0491=\\"\\" id=\\"button2\\" type=\\"button\\"> toggle </button>
   </fieldset>
 </form>
-<div class=\\"multipleMountAnimationsClass\\" data-state=\\"open\\"> Content </div>"
+<div class=\\"presence_multipleMountAnimationsClass\\" data-state=\\"open\\"> Content </div>"
 `;
 
 exports[`OkuPresence > WithMultipleMountAnimations > should be able to mount click 2`] = `
@@ -196,7 +196,7 @@ exports[`OkuPresence > WithMultipleMountAnimations > should be able to mount vis
     <legend data-v-e3bd0491=\\"\\">Visibility (triggers cancel event)</legend><button data-v-e3bd0491=\\"\\" id=\\"button2\\" type=\\"button\\"> toggle </button>
   </fieldset>
 </form>
-<div class=\\"multipleMountAnimationsClass\\" data-state=\\"open\\"> Content </div>"
+<div class=\\"presence_multipleMountAnimationsClass\\" data-state=\\"open\\"> Content </div>"
 `;
 
 exports[`OkuPresence > WithMultipleMountAnimations > should be able to mount visibility 2`] = `
@@ -208,7 +208,7 @@ exports[`OkuPresence > WithMultipleMountAnimations > should be able to mount vis
     <legend data-v-e3bd0491=\\"\\">Visibility (triggers cancel event)</legend><button data-v-e3bd0491=\\"\\" id=\\"button2\\" type=\\"button\\"> toggle </button>
   </fieldset>
 </form>
-<div class=\\"multipleMountAnimationsClass\\" data-state=\\"open\\" style=\\"display: none;\\"> Content </div>"
+<div class=\\"presence_multipleMountAnimationsClass\\" data-state=\\"open\\" style=\\"display: none;\\"> Content </div>"
 `;
 
 exports[`OkuPresence > WithMultipleMountAnimations > should be able to mount visibility 3`] = `
@@ -220,7 +220,7 @@ exports[`OkuPresence > WithMultipleMountAnimations > should be able to mount vis
     <legend data-v-e3bd0491=\\"\\">Visibility (triggers cancel event)</legend><button data-v-e3bd0491=\\"\\" id=\\"button2\\" type=\\"button\\"> toggle </button>
   </fieldset>
 </form>
-<div class=\\"multipleMountAnimationsClass\\" data-state=\\"open\\" style=\\"display: block;\\"> Content </div>"
+<div class=\\"presence_multipleMountAnimationsClass\\" data-state=\\"open\\" style=\\"display: block;\\"> Content </div>"
 `;
 
 exports[`OkuPresence > WithMultipleOpenAndCloseAnimations > renders correctly 1`] = `
@@ -243,7 +243,7 @@ exports[`OkuPresence > WithMultipleOpenAndCloseAnimations > should be able to mo
     <legend data-v-e3bd0491=\\"\\">Visibility (triggers cancel event)</legend><button data-v-e3bd0491=\\"\\" id=\\"button2\\" type=\\"button\\"> toggle </button>
   </fieldset>
 </form>
-<div class=\\"multipleOpenAndCloseAnimationsClass\\" data-state=\\"open\\"> Content </div>"
+<div class=\\"presence_multipleOpenAndCloseAnimationsClass\\" data-state=\\"open\\"> Content </div>"
 `;
 
 exports[`OkuPresence > WithMultipleOpenAndCloseAnimations > should be able to mount click 2`] = `
@@ -266,7 +266,7 @@ exports[`OkuPresence > WithMultipleOpenAndCloseAnimations > should be able to mo
     <legend data-v-e3bd0491=\\"\\">Visibility (triggers cancel event)</legend><button data-v-e3bd0491=\\"\\" id=\\"button2\\" type=\\"button\\"> toggle </button>
   </fieldset>
 </form>
-<div class=\\"multipleOpenAndCloseAnimationsClass\\" data-state=\\"open\\"> Content </div>"
+<div class=\\"presence_multipleOpenAndCloseAnimationsClass\\" data-state=\\"open\\"> Content </div>"
 `;
 
 exports[`OkuPresence > WithMultipleOpenAndCloseAnimations > should be able to mount visibility 2`] = `
@@ -278,7 +278,7 @@ exports[`OkuPresence > WithMultipleOpenAndCloseAnimations > should be able to mo
     <legend data-v-e3bd0491=\\"\\">Visibility (triggers cancel event)</legend><button data-v-e3bd0491=\\"\\" id=\\"button2\\" type=\\"button\\"> toggle </button>
   </fieldset>
 </form>
-<div class=\\"multipleOpenAndCloseAnimationsClass\\" data-state=\\"open\\" style=\\"display: none;\\"> Content </div>"
+<div class=\\"presence_multipleOpenAndCloseAnimationsClass\\" data-state=\\"open\\" style=\\"display: none;\\"> Content </div>"
 `;
 
 exports[`OkuPresence > WithMultipleOpenAndCloseAnimations > should be able to mount visibility 3`] = `
@@ -290,7 +290,7 @@ exports[`OkuPresence > WithMultipleOpenAndCloseAnimations > should be able to mo
     <legend data-v-e3bd0491=\\"\\">Visibility (triggers cancel event)</legend><button data-v-e3bd0491=\\"\\" id=\\"button2\\" type=\\"button\\"> toggle </button>
   </fieldset>
 </form>
-<div class=\\"multipleOpenAndCloseAnimationsClass\\" data-state=\\"open\\" style=\\"display: block;\\"> Content </div>"
+<div class=\\"presence_multipleOpenAndCloseAnimationsClass\\" data-state=\\"open\\" style=\\"display: block;\\"> Content </div>"
 `;
 
 exports[`OkuPresence > WithOpenAndCloseAnimation > renders correctly 1`] = `
@@ -313,7 +313,7 @@ exports[`OkuPresence > WithOpenAndCloseAnimation > should be able to mount click
     <legend data-v-e3bd0491=\\"\\">Visibility (triggers cancel event)</legend><button data-v-e3bd0491=\\"\\" id=\\"button2\\" type=\\"button\\"> toggle </button>
   </fieldset>
 </form>
-<div class=\\"openAndCloseAnimationClass\\" data-state=\\"open\\"> Content </div>"
+<div class=\\"presence_openAndCloseAnimationClass\\" data-state=\\"open\\"> Content </div>"
 `;
 
 exports[`OkuPresence > WithOpenAndCloseAnimation > should be able to mount click 2`] = `
@@ -336,7 +336,7 @@ exports[`OkuPresence > WithOpenAndCloseAnimation > should be able to mount visib
     <legend data-v-e3bd0491=\\"\\">Visibility (triggers cancel event)</legend><button data-v-e3bd0491=\\"\\" id=\\"button2\\" type=\\"button\\"> toggle </button>
   </fieldset>
 </form>
-<div class=\\"openAndCloseAnimationClass\\" data-state=\\"open\\"> Content </div>"
+<div class=\\"presence_openAndCloseAnimationClass\\" data-state=\\"open\\"> Content </div>"
 `;
 
 exports[`OkuPresence > WithOpenAndCloseAnimation > should be able to mount visibility 2`] = `
@@ -348,7 +348,7 @@ exports[`OkuPresence > WithOpenAndCloseAnimation > should be able to mount visib
     <legend data-v-e3bd0491=\\"\\">Visibility (triggers cancel event)</legend><button data-v-e3bd0491=\\"\\" id=\\"button2\\" type=\\"button\\"> toggle </button>
   </fieldset>
 </form>
-<div class=\\"openAndCloseAnimationClass\\" data-state=\\"open\\" style=\\"display: none;\\"> Content </div>"
+<div class=\\"presence_openAndCloseAnimationClass\\" data-state=\\"open\\" style=\\"display: none;\\"> Content </div>"
 `;
 
 exports[`OkuPresence > WithOpenAndCloseAnimation > should be able to mount visibility 3`] = `
@@ -360,7 +360,7 @@ exports[`OkuPresence > WithOpenAndCloseAnimation > should be able to mount visib
     <legend data-v-e3bd0491=\\"\\">Visibility (triggers cancel event)</legend><button data-v-e3bd0491=\\"\\" id=\\"button2\\" type=\\"button\\"> toggle </button>
   </fieldset>
 </form>
-<div class=\\"openAndCloseAnimationClass\\" data-state=\\"open\\" style=\\"display: block;\\"> Content </div>"
+<div class=\\"presence_openAndCloseAnimationClass\\" data-state=\\"open\\" style=\\"display: block;\\"> Content </div>"
 `;
 
 exports[`OkuPresence > WithUnmountAnimation > renders correctly 1`] = `
@@ -383,7 +383,7 @@ exports[`OkuPresence > WithUnmountAnimation > should be able to mount click 1`]
     <legend data-v-e3bd0491=\\"\\">Visibility (triggers cancel event)</legend><button data-v-e3bd0491=\\"\\" id=\\"button2\\" type=\\"button\\"> toggle </button>
   </fieldset>
 </form>
-<div class=\\"unmountAnimationClass\\" data-state=\\"open\\"> Content </div>"
+<div class=\\"presence_unmountAnimationClass\\" data-state=\\"open\\"> Content </div>"
 `;
 
 exports[`OkuPresence > WithUnmountAnimation > should be able to mount click 2`] = `
@@ -406,7 +406,7 @@ exports[`OkuPresence > WithUnmountAnimation > should be able to mount visibility
     <legend data-v-e3bd0491=\\"\\">Visibility (triggers cancel event)</legend><button data-v-e3bd0491=\\"\\" id=\\"button2\\" type=\\"button\\"> toggle </button>
   </fieldset>
 </form>
-<div class=\\"unmountAnimationClass\\" data-state=\\"open\\"> Content </div>"
+<div class=\\"presence_unmountAnimationClass\\" data-state=\\"open\\"> Content </div>"
 `;
 
 exports[`OkuPresence > WithUnmountAnimation > should be able to mount visibility 2`] = `
@@ -418,7 +418,7 @@ exports[`OkuPresence > WithUnmountAnimation > should be able to mount visibility
     <legend data-v-e3bd0491=\\"\\">Visibility (triggers cancel event)</legend><button data-v-e3bd0491=\\"\\" id=\\"button2\\" type=\\"button\\"> toggle </button>
   </fieldset>
 </form>
-<div class=\\"unmountAnimationClass\\" data-state=\\"open\\" style=\\"display: none;\\"> Content </div>"
+<div class=\\"presence_unmountAnimationClass\\" data-state=\\"open\\" style=\\"display: none;\\"> Content </div>"
 `;
 
 exports[`OkuPresence > WithUnmountAnimation > should be able to mount visibility 3`] = `
@@ -430,7 +430,7 @@ exports[`OkuPresence > WithUnmountAnimation > should be able to mount visibility
     <legend data-v-e3bd0491=\\"\\">Visibility (triggers cancel event)</legend><button data-v-e3bd0491=\\"\\" id=\\"button2\\" type=\\"button\\"> toggle </button>
   </fieldset>
 </form>
-<div class=\\"unmountAnimationClass\\" data-state=\\"open\\" style=\\"display: block;\\"> Content </div>"
+<div class=\\"presence_unmountAnimationClass\\" data-state=\\"open\\" style=\\"display: block;\\"> Content </div>"
 `;
 
 exports[`OkuPresence > renders correctly 1`] = `""`;
diff --git a/packages/components/progress/src/stories/ProgressDemo.vue b/packages/components/progress/src/stories/ProgressDemo.vue
index 782d8c46a..a23a3e668 100644
--- a/packages/components/progress/src/stories/ProgressDemo.vue
+++ b/packages/components/progress/src/stories/ProgressDemo.vue
@@ -36,7 +36,7 @@ function toggleIndeterminate() {
     <div v-if="template === '#1' || allshow" class="flex flex-col">
       <OkuProgress :class="rootClass" :value="value" :max="max">
         <OkuProgressIndicator
-          class="indicator w-0 h-full transition duration-150 ease-out"
+          class="progress_indicator w-0 h-full transition duration-150 ease-out"
           :style="{ width: percentage != null ? `${percentage}%` : undefined }"
         />
       </OkuProgress>
@@ -47,70 +47,70 @@ function toggleIndeterminate() {
       </button>
       <input v-model.number="value" type="range" min="0" :max="max" :disabled="value === null">
     </div>
-    <!-- TODO: How to bind CSS styles with Element properties simply？ -->
+    <!-- TODO: How to bind CSS progress_styles with Element properties simply？ -->
     <div v-if="template === '#2' || allshow" class="flex flex-col">
       <h1>Loading (not started)</h1>
       0/100
       <OkuProgress :value="0" :class="rootClass">
-        <OkuProgressIndicator class="indicator" />
+        <OkuProgressIndicator class="progress_indicator" />
       </OkuProgress>
 
       <h1>Loading (started)</h1>
       30/100
       <OkuProgress :value="30" :class="rootClass">
-        <OkuProgressIndicator class="indicator" />
+        <OkuProgressIndicator class="progress_indicator" />
       </OkuProgress>
 
       <h1>Indeterminate</h1>
       /100
       <OkuProgress :value="null" :class="rootClass">
-        <OkuProgressIndicator class="indicator" />
+        <OkuProgressIndicator class="progress_indicator" />
       </OkuProgress>
 
       <h1>Complete</h1>
       100/100
       <OkuProgress :value="100" :class="rootClass">
-        <OkuProgressIndicator class="indicator" />
+        <OkuProgressIndicator class="progress_indicator" />
       </OkuProgress>
 
       <h1>State attributes</h1>
       <h2>Loading (started)</h2>
-      <OkuProgress :value="30" class="styledClass">
-        <OkuProgressIndicator class="styledClass" />
+      <OkuProgress :value="30" class="progress_styledClass">
+        <OkuProgressIndicator class="progress_styledClass" />
       </OkuProgress>
 
       <h2>Indeterminate</h2>
-      <OkuProgress :value="null" class="styledClass">
-        <OkuProgressIndicator class="styledClass" />
+      <OkuProgress :value="null" class="progress_styledClass">
+        <OkuProgressIndicator class="progress_styledClass" />
       </OkuProgress>
 
       <h2>Complete</h2>
-      <OkuProgress :value="100" class="styledClass">
-        <OkuProgressIndicator class="styledClass" />
+      <OkuProgress :value="100" class="progress_styledClass">
+        <OkuProgressIndicator class="progress_styledClass" />
       </OkuProgress>
     </div>
   </div>
 </template>
 
 <style scoped>
-.indicator[data-state="complete"] {
+.progress_indicator[data-state="complete"] {
   background-color: green;
 }
 
-.indicator[data-state="loading"] {
+.progress_indicator[data-state="loading"] {
   background-color: gray;
 }
-.styles[data-state="complete"] {
+.progress_styles[data-state="complete"] {
   border-color: green;
 }
 
-.styles[data-state="loading"] {
+.progress_styles[data-state="loading"] {
   border-color: red;
 }
-.styles[data-state="indeterminate"] {
+.progress_styles[data-state="indeterminate"] {
   border-color: purple;
 }
-.styledClass {
+.progress_styledClass {
   border: 2px solid blue;
   padding: 10px;
   background-color: #eee;
diff --git a/packages/components/radio-group/src/stories/RadioGroupDemo.vue b/packages/components/radio-group/src/stories/RadioGroupDemo.vue
index f721ba737..2dd643396 100644
--- a/packages/components/radio-group/src/stories/RadioGroupDemo.vue
+++ b/packages/components/radio-group/src/stories/RadioGroupDemo.vue
@@ -21,22 +21,22 @@ defineProps<ITabsProps>()
     <h1>Horizontal (automatic activation)</h1>
     <OkuLabel>
       Favourite pet
-      <OkuRadioGroup default-value="1" class="root-class">
+      <OkuRadioGroup default-value="1" class="radio_group_rootClass">
         <OkuLabel>
-          <OkuRadioGroupItem value="1" class="item-class">
-            <OkuRadioGroupIndicator class="indicator-class" />
+          <OkuRadioGroupItem value="1" class="radio_group_itemClass">
+            <OkuRadioGroupIndicator class="radio_group_indicatorClass" />
           </OkuRadioGroupItem>
           Cat
         </OkuLabel>
         <OkuLabel>
-          <OkuRadioGroupItem value="2" class="item-class">
-            <OkuRadioGroupIndicator class="indicator-class" />
+          <OkuRadioGroupItem value="2" class="radio_group_itemClass">
+            <OkuRadioGroupIndicator class="radio_group_indicatorClass" />
           </OkuRadioGroupItem>
           Dog
         </OkuLabel>
         <OkuLabel>
-          <OkuRadioGroupItem value="3" class="item-class">
-            <OkuRadioGroupIndicator class="indicator-class" />
+          <OkuRadioGroupItem value="3" class="radio_group_itemClass">
+            <OkuRadioGroupIndicator class="radio_group_indicatorClass" />
           </OkuRadioGroupItem>
           Rabbit
         </OkuLabel>
@@ -54,14 +54,14 @@ defineProps<ITabsProps>()
 }
 
 /* Root Class */
-.root-class {
+.radio_group_rootClass {
   display: inline-block;
   vertical-align: middle;
   cursor: default;
 }
 
 /* Radio Group Item */
-.item-class {
+.radio_group_itemClass {
   vertical-align: middle;
   width: 30px;
   height: 30px;
@@ -83,7 +83,7 @@ defineProps<ITabsProps>()
 }
 
 /* Indicator */
-.indicator-class {
+.radio_group_indicatorClass {
   width: 18px;
   height: 18px;
   background-color: var(--red);
@@ -93,16 +93,16 @@ defineProps<ITabsProps>()
   border-radius: inherit;
 
   &[data-state="checked"] {
-    animation: fadeIn 300ms ease-out;
+    animation: radio_group_fadeIn 300ms ease-out;
   }
 
   &[data-state="unchecked"] {
-    animation: fadeOut 300ms ease-in;
+    animation: radio_group_fadeOut 300ms ease-in;
   }
 }
 
 /* Animations */
-@keyframes fadeIn {
+@keyframes radio_group_fadeIn {
   from {
     opacity: 0;
   }
@@ -111,7 +111,7 @@ defineProps<ITabsProps>()
   }
 }
 
-@keyframes fadeOut {
+@keyframes radio_group_fadeOut {
   from {
     opacity: 1;
   }
@@ -121,7 +121,7 @@ defineProps<ITabsProps>()
 }
 
 /* Styles */
-.styles {
+.radio_group_styles {
   background-color: rgba(0, 0, 255, 0.3);
   border: 2px solid blue;
   padding: 10px;
diff --git a/packages/components/roving-focus/src/stories/RovingFocusDemo.vue b/packages/components/roving-focus/src/stories/RovingFocusDemo.vue
index e26e42bed..bf013bcda 100644
--- a/packages/components/roving-focus/src/stories/RovingFocusDemo.vue
+++ b/packages/components/roving-focus/src/stories/RovingFocusDemo.vue
@@ -272,12 +272,12 @@ h1 {
   font-weight: bold;
 }
 
-button {
+/* button {
   border: 1px solid black;
   border-radius: 4px;
   cursor: pointer;
   font-size: 14px;
   font-weight: 400;
   padding: 2px;
-}
+} */
 </style>
diff --git a/packages/components/slider/src/stories/OnValueCommit.vue b/packages/components/slider/src/stories/OnValueCommit.vue
index 9f8c12285..5cb2b54d8 100644
--- a/packages/components/slider/src/stories/OnValueCommit.vue
+++ b/packages/components/slider/src/stories/OnValueCommit.vue
@@ -5,169 +5,14 @@ import { OkuSlider, OkuSliderRange, OkuSliderThumb, OkuSliderTrack } from '@oku-
 <template>
   <div>
     <OkuSlider
-      class="rootSliderClass"
+      class="slider_rootSliderClass"
       :default-value="[20]"
       @value-commit="console.log"
     >
-      <OkuSliderTrack class="trackClass">
-        <OkuSliderRange class="rangeClass" />
+      <OkuSliderTrack class="slider_trackClass">
+        <OkuSliderRange class="slider_rangeClass" />
       </OkuSliderTrack>
-      <OkuSliderThumb class="thumbClassT" />
+      <OkuSliderThumb class="slider_thumbClassT" />
     </OkuSlider>
   </div>
 </template>
-
-<style>
-.rootSliderClass {
-  position: relative;
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  /* ensures no selection */
-  user-select: none;
-  /* disable browser handling of all panning and zooming gestures on touch devices */
-  touch-action: none;
-
-  &[data-orientation="horizontal"] {
-    height: 25px;
-  }
-  &[data-orientation="vertical"] {
-    flex-direction: column;
-    width: 25px;
-  }
-  &[data-disabled] {
-    opacity: 0.5;
-  }
-}
-
-.trackClass {
-  position: relative;
-  /* ensures full width in horizontal orientation, ignored in vertical orientation */
-  flex-grow: 1;
-
-  background: gainsboro;
-  border-radius: 4px;
-  &[data-orientation="horizontal"] {
-    height: 4px;
-  }
-  &[data-orientation="vertical"] {
-    width: 4px;
-    height: 300px;
-  }
-}
-
-.rangeClass {
-  position: absolute;
-  /* good default for both orientation (match track width/height respectively) */
-  &[data-orientation="horizontal"] {
-    height: 100%;
-  }
-  &[data-orientation="vertical"] {
-    width: 100%;
-  }
-
-  background: black;
-  border-radius: inherit;
-}
-
-.thumbClassT {
-  /* ensures the thumb is sizeable */
-  display: block;
-
-  /* Add recommended target size regardless of styled size */
-  &::before {
-    content: "";
-    position: absolute;
-    z-index: -1;
-    width: 44px;
-    height: 44px;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  border-radius: 25px;
-  width: 25px;
-  height: 25px;
-  background-color: black;
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px red;
-  }
-
-  display: inline-grid;
-  place-items: center;
-  &:after {
-    content: attr(aria-valuenow);
-    position: relative;
-    font-size: 10px;
-    color: white;
-  }
-}
-
-.rootAttrClass {
-  position: relative;
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  /* ensures no selection */
-  user-select: none;
-  /* disable browser handling of all panning and zooming gestures on touch devices */
-  touch-action: none;
-
-  background-color: rgba(0, 0, 255, 0.3);
-  border: 2px solid blue;
-  padding: 10px;
-
-  &[data-disabled] {
-    border-style: dashed;
-  }
-}
-
-.trackAttrClass {
-  position: relative;
-  /* ensures full width in horizontal orientation, ignored in vertical orientation */
-  flex-grow: 1;
-
-  background-color: rgba(0, 0, 255, 0.3);
-  border: 2px solid blue;
-  padding: 10px;
-}
-
-.rangeAttrClass {
-  position: absolute;
-
-  &[data-orientation="horizontal"] {
-    height: 100%;
-  }
-
-  &[data-orientation="vertical"] {
-    width: 100%;
-  }
-
-  background-color: rgba(0, 0, 255, 0.3);
-  border: 2px solid blue;
-  padding: 10px;
-}
-
-.thumbAttrClass {
-  /* ensures the thumb is sizeable */
-  display: block;
-
-  /* Add recommended target size regardless of styled size */
-  &::before {
-    content: "";
-    position: absolute;
-    z-index: -1;
-    width: 44px;
-    height: 44px;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  background-color: rgba(0, 0, 255, 0.3);
-  border: 2px solid blue;
-  padding: 10px;
-}
-</style>
diff --git a/packages/components/slider/src/stories/SliderDemo.vue b/packages/components/slider/src/stories/SliderDemo.vue
index a37d935e0..a54c13ac2 100644
--- a/packages/components/slider/src/stories/SliderDemo.vue
+++ b/packages/components/slider/src/stories/SliderDemo.vue
@@ -24,3 +24,166 @@ withDefaults(defineProps<OkuSliderProps>(), {
     <Vertical />
   </div>
 </template>
+
+<style>
+.slider_rootSliderClass {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  /* ensures no selection */
+  user-select: none;
+  /* disable browser handling of all panning and zooming gestures on touch devices */
+  touch-action: none;
+
+  &[data-orientation="horizontal"] {
+    height: 25px;
+  }
+
+  &[data-orientation="vertical"] {
+    flex-direction: column;
+    width: 25px;
+  }
+
+  &[data-disabled] {
+    opacity: 0.5;
+  }
+}
+
+.slider_trackClass {
+  position: relative;
+  /* ensures full width in horizontal orientation, ignored in vertical orientation */
+  flex-grow: 1;
+
+  background: gainsboro;
+  border-radius: 4px;
+
+  &[data-orientation="horizontal"] {
+    height: 4px;
+  }
+
+  &[data-orientation="vertical"] {
+    width: 4px;
+    height: 300px;
+  }
+}
+
+.slider_rangeClass {
+  position: absolute;
+
+  /* good default for both orientation (match track width/height respectively) */
+  &[data-orientation="horizontal"] {
+    height: 100%;
+  }
+
+  &[data-orientation="vertical"] {
+    width: 100%;
+  }
+
+  background: black;
+  border-radius: inherit;
+}
+
+.slider_thumbClassT {
+  /* ensures the thumb is sizeable */
+  display: block;
+
+  /* Add recommended target size regardless of styled size */
+  &::before {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    width: 44px;
+    height: 44px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  border-radius: 25px;
+  width: 25px;
+  height: 25px;
+  background-color: black;
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px red;
+  }
+
+  display: inline-grid;
+  place-items: center;
+
+  &:after {
+    content: attr(aria-valuenow);
+    position: relative;
+    font-size: 10px;
+    color: white;
+  }
+}
+
+.slider_rootAttrClass {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  /* ensures no selection */
+  user-select: none;
+  /* disable browser handling of all panning and zooming gestures on touch devices */
+  touch-action: none;
+
+  background-color: rgba(0, 0, 255, 0.3);
+  border: 2px solid blue;
+  padding: 10px;
+
+  &[data-disabled] {
+    border-style: dashed;
+  }
+}
+
+.slider_trackAttrClass {
+  position: relative;
+  /* ensures full width in horizontal orientation, ignored in vertical orientation */
+  flex-grow: 1;
+
+  background-color: rgba(0, 0, 255, 0.3);
+  border: 2px solid blue;
+  padding: 10px;
+}
+
+.slider_rangeAttrClass {
+  position: absolute;
+
+  &[data-orientation="horizontal"] {
+    height: 100%;
+  }
+
+  &[data-orientation="vertical"] {
+    width: 100%;
+  }
+
+  background-color: rgba(0, 0, 255, 0.3);
+  border: 2px solid blue;
+  padding: 10px;
+}
+
+.slider_thumbAttrClass {
+  /* ensures the thumb is sizeable */
+  display: block;
+
+  /* Add recommended target size regardless of styled size */
+  &::before {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    width: 44px;
+    height: 44px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  background-color: rgba(0, 0, 255, 0.3);
+  border: 2px solid blue;
+  padding: 10px;
+}
+</style>
diff --git a/packages/components/slider/src/stories/Styled.vue b/packages/components/slider/src/stories/Styled.vue
index f44c06d54..47e3a02e1 100644
--- a/packages/components/slider/src/stories/Styled.vue
+++ b/packages/components/slider/src/stories/Styled.vue
@@ -4,166 +4,11 @@ import { OkuSlider, OkuSliderRange, OkuSliderThumb, OkuSliderTrack } from '@oku-
 
 <template>
   <div>
-    <OkuSlider class="rootSliderClass">
-      <OkuSliderTrack class="trackClass">
-        <OkuSliderRange class="rangeClass" />
+    <OkuSlider class="slider_rootSliderClass">
+      <OkuSliderTrack class="slider_trackClass">
+        <OkuSliderRange class="slider_rangeClass" />
       </OkuSliderTrack>
-      <OkuSliderThumb class="thumbClassT" />
+      <OkuSliderThumb class="slider_thumbClassT" />
     </OkuSlider>
   </div>
 </template>
-
-<style>
-.rootSliderClass {
-  position: relative;
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  /* ensures no selection */
-  user-select: none;
-  /* disable browser handling of all panning and zooming gestures on touch devices */
-  touch-action: none;
-
-  &[data-orientation="horizontal"] {
-    height: 25px;
-  }
-  &[data-orientation="vertical"] {
-    flex-direction: column;
-    width: 25px;
-  }
-  &[data-disabled] {
-    opacity: 0.5;
-  }
-}
-
-.trackClass {
-  position: relative;
-  /* ensures full width in horizontal orientation, ignored in vertical orientation */
-  flex-grow: 1;
-
-  background: gainsboro;
-  border-radius: 4px;
-  &[data-orientation="horizontal"] {
-    height: 4px;
-  }
-  &[data-orientation="vertical"] {
-    width: 4px;
-    height: 300px;
-  }
-}
-
-.rangeClass {
-  position: absolute;
-  /* good default for both orientation (match track width/height respectively) */
-  &[data-orientation="horizontal"] {
-    height: 100%;
-  }
-  &[data-orientation="vertical"] {
-    width: 100%;
-  }
-
-  background: black;
-  border-radius: inherit;
-}
-
-.thumbClassT {
-  /* ensures the thumb is sizeable */
-  display: block;
-
-  /* Add recommended target size regardless of styled size */
-  &::before {
-    content: "";
-    position: absolute;
-    z-index: -1;
-    width: 44px;
-    height: 44px;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  border-radius: 25px;
-  width: 25px;
-  height: 25px;
-  background-color: black;
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px red;
-  }
-
-  display: inline-grid;
-  place-items: center;
-  &:after {
-    content: attr(aria-valuenow);
-    position: relative;
-    font-size: 10px;
-    color: white;
-  }
-}
-
-.rootAttrClass {
-  position: relative;
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  /* ensures no selection */
-  user-select: none;
-  /* disable browser handling of all panning and zooming gestures on touch devices */
-  touch-action: none;
-
-  background-color: rgba(0, 0, 255, 0.3);
-  border: 2px solid blue;
-  padding: 10px;
-
-  &[data-disabled] {
-    border-style: dashed;
-  }
-}
-
-.trackAttrClass {
-  position: relative;
-  /* ensures full width in horizontal orientation, ignored in vertical orientation */
-  flex-grow: 1;
-
-  background-color: rgba(0, 0, 255, 0.3);
-  border: 2px solid blue;
-  padding: 10px;
-}
-
-.rangeAttrClass {
-  position: absolute;
-
-  &[data-orientation="horizontal"] {
-    height: 100%;
-  }
-
-  &[data-orientation="vertical"] {
-    width: 100%;
-  }
-
-  background-color: rgba(0, 0, 255, 0.3);
-  border: 2px solid blue;
-  padding: 10px;
-}
-
-.thumbAttrClass {
-  /* ensures the thumb is sizeable */
-  display: block;
-
-  /* Add recommended target size regardless of styled size */
-  &::before {
-    content: "";
-    position: absolute;
-    z-index: -1;
-    width: 44px;
-    height: 44px;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  background-color: rgba(0, 0, 255, 0.3);
-  border: 2px solid blue;
-  padding: 10px;
-}
-</style>
diff --git a/packages/components/slider/src/stories/Vertical.vue b/packages/components/slider/src/stories/Vertical.vue
index fdefbb119..6c2f832ba 100644
--- a/packages/components/slider/src/stories/Vertical.vue
+++ b/packages/components/slider/src/stories/Vertical.vue
@@ -8,194 +8,39 @@ const test = ref()
 <template>
   <div class="flex gap-14">
     <OkuSlider
-      class="rootSliderClass"
+      class="slider_rootSliderClass"
       orientation="vertical"
     >
-      <OkuSliderTrack class="trackClass">
-        <OkuSliderRange class="rangeClass" />
+      <OkuSliderTrack class="slider_trackClass">
+        <OkuSliderRange class="slider_rangeClass" />
       </OkuSliderTrack>
-      <OkuSliderThumb class="thumbClassT" />
+      <OkuSliderThumb class="slider_thumbClassT" />
     </OkuSlider>
 
     <OkuSlider
       :default-value="[10, 50]"
-      class="rootSliderClass"
+      class="slider_rootSliderClass"
       orientation="vertical"
     >
-      <OkuSliderTrack class="trackClass">
-        <OkuSliderRange class="rangeClass" />
+      <OkuSliderTrack class="slider_trackClass">
+        <OkuSliderRange class="slider_rangeClass" />
       </OkuSliderTrack>
-      <OkuSliderThumb class="thumbClassT" />
-      <OkuSliderThumb class="thumbClassT" />
+      <OkuSliderThumb class="slider_thumbClassT" />
+      <OkuSliderThumb class="slider_thumbClassT" />
     </OkuSlider>
 
     <OkuSlider
       v-model="test"
       :default-value="[10, 50]"
-      class="rootSliderClass"
+      class="slider_rootSliderClass"
       orientation="vertical"
     >
-      <OkuSliderTrack class="trackClass">
-        <OkuSliderRange class="rangeClass" />
+      <OkuSliderTrack class="slider_trackClass">
+        <OkuSliderRange class="slider_rangeClass" />
       </OkuSliderTrack>
-      <OkuSliderThumb class="thumbClassT" />
-      <OkuSliderThumb class="thumbClassT" />
+      <OkuSliderThumb class="slider_thumbClassT" />
+      <OkuSliderThumb class="slider_thumbClassT" />
     </OkuSlider>
     {{ test }}
   </div>
 </template>
-
-<style>
-.rootSliderClass {
-  position: relative;
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  /* ensures no selection */
-  user-select: none;
-  /* disable browser handling of all panning and zooming gestures on touch devices */
-  touch-action: none;
-
-  &[data-orientation="horizontal"] {
-    height: 25px;
-  }
-  &[data-orientation="vertical"] {
-    flex-direction: column;
-    width: 25px;
-  }
-  &[data-disabled] {
-    opacity: 0.5;
-  }
-}
-
-.trackClass {
-  position: relative;
-  /* ensures full width in horizontal orientation, ignored in vertical orientation */
-  flex-grow: 1;
-
-  background: gainsboro;
-  border-radius: 4px;
-  &[data-orientation="horizontal"] {
-    height: 4px;
-  }
-  &[data-orientation="vertical"] {
-    width: 4px;
-    height: 300px;
-  }
-}
-
-.rangeClass {
-  position: absolute;
-  /* good default for both orientation (match track width/height respectively) */
-  &[data-orientation="horizontal"] {
-    height: 100%;
-  }
-  &[data-orientation="vertical"] {
-    width: 100%;
-  }
-
-  background: black;
-  border-radius: inherit;
-}
-
-.thumbClassT {
-  /* ensures the thumb is sizeable */
-  display: block;
-
-  /* Add recommended target size regardless of styled size */
-  &::before {
-    content: "";
-    position: absolute;
-    z-index: -1;
-    width: 44px;
-    height: 44px;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  border-radius: 25px;
-  width: 25px;
-  height: 25px;
-  background-color: black;
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px red;
-  }
-
-  display: inline-grid;
-  place-items: center;
-  &:after {
-    content: attr(aria-valuenow);
-    position: relative;
-    font-size: 10px;
-    color: white;
-  }
-}
-
-.rootAttrClass {
-  position: relative;
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  /* ensures no selection */
-  user-select: none;
-  /* disable browser handling of all panning and zooming gestures on touch devices */
-  touch-action: none;
-
-  background-color: rgba(0, 0, 255, 0.3);
-  border: 2px solid blue;
-  padding: 10px;
-
-  &[data-disabled] {
-    border-style: dashed;
-  }
-}
-
-.trackAttrClass {
-  position: relative;
-  /* ensures full width in horizontal orientation, ignored in vertical orientation */
-  flex-grow: 1;
-
-  background-color: rgba(0, 0, 255, 0.3);
-  border: 2px solid blue;
-  padding: 10px;
-}
-
-.rangeAttrClass {
-  position: absolute;
-
-  &[data-orientation="horizontal"] {
-    height: 100%;
-  }
-
-  &[data-orientation="vertical"] {
-    width: 100%;
-  }
-
-  background-color: rgba(0, 0, 255, 0.3);
-  border: 2px solid blue;
-  padding: 10px;
-}
-
-.thumbAttrClass {
-  /* ensures the thumb is sizeable */
-  display: block;
-
-  /* Add recommended target size regardless of styled size */
-  &::before {
-    content: "";
-    position: absolute;
-    z-index: -1;
-    width: 44px;
-    height: 44px;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  background-color: rgba(0, 0, 255, 0.3);
-  border: 2px solid blue;
-  padding: 10px;
-}
-</style>
diff --git a/packages/components/switch/src/stories/SwitchDemo.vue b/packages/components/switch/src/stories/SwitchDemo.vue
index 7186aba41..b4beed5ba 100644
--- a/packages/components/switch/src/stories/SwitchDemo.vue
+++ b/packages/components/switch/src/stories/SwitchDemo.vue
@@ -153,14 +153,6 @@ function sendForm(event: any) {
   -webkit-transition: 0.4s;
   transition: background-color 166ms ease-out;
 
-  &:focus {
-    @apply outline-none shadow-sm;
-  }
-
-  &[data-state="checked"] {
-    @apply bg-green-700 border-green-500;
-  }
-
   &[data-disabled] {
     opacity: 0.5;
   }
diff --git a/packages/components/tabs/src/stories/TabsDemo.vue b/packages/components/tabs/src/stories/TabsDemo.vue
index f2f6fc7c2..6a9f17860 100644
--- a/packages/components/tabs/src/stories/TabsDemo.vue
+++ b/packages/components/tabs/src/stories/TabsDemo.vue
@@ -17,27 +17,27 @@ defineProps<ITabsProps>()
 <template>
   <div v-if="template === '#1' || allshow">
     <h1>Horizontal (automatic activation)</h1>
-    <OkuTabs default-value="tab1" class="root-class">
-      <OkuTabsList aria-label="tabs example" class="list-class">
-        <OkuTabsTrigger value="tab1" class="trigger-class">
+    <OkuTabs default-value="tab1" class="tabs_rootClass">
+      <OkuTabsList aria-label="tabs example" class="tabs_listClass">
+        <OkuTabsTrigger value="tab1" class="tabs_triggerClass">
           Tab 1
         </OkuTabsTrigger>
-        <OkuTabsTrigger value="tab2" disabled class="trigger-class">
+        <OkuTabsTrigger value="tab2" disabled class="tabs_triggerClass">
           Tab 2
         </OkuTabsTrigger>
-        <OkuTabsTrigger value="tab3" class="trigger-class">
+        <OkuTabsTrigger value="tab3" class="tabs_triggerClass">
           Tab 3
         </OkuTabsTrigger>
       </OkuTabsList>
-      <OkuTabsContent value="tab1" class="content-class">
+      <OkuTabsContent value="tab1" class="tabs_contentClass">
         Dis metus rhoncus sit convallis sollicitudin vel cum, hac purus tincidunt eros sem himenaeos
         integer, faucibus varius nullam nostra bibendum consectetur mollis, gravida elementum
         pellentesque volutpat dictum ipsum.
       </OkuTabsContent>
-      <OkuTabsContent value="tab2" class="content-class">
+      <OkuTabsContent value="tab2" class="tabs_contentClass">
         You'll never find me!
       </OkuTabsContent>
-      <OkuTabsContent value="tab3" class="content-class">
+      <OkuTabsContent value="tab3" class="tabs_contentClass">
         Ut nisi elementum metus semper mauris dui fames accumsan aenean, maecenas ac sociis dolor
         quam tempus pretium.
       </OkuTabsContent>
@@ -183,7 +183,7 @@ defineProps<ITabsProps>()
 }
 
 /* Root Class */
-.root-class {
+.tabs_rootClass {
   display: flex;
   border: 1px solid #eee;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -195,7 +195,7 @@ defineProps<ITabsProps>()
 }
 
 /* List Class */
-.list-class {
+.tabs_listClass {
   flex-shrink: 0;
   display: flex;
   background-color: #eee;
@@ -206,7 +206,7 @@ defineProps<ITabsProps>()
 }
 
 /* Trigger Class */
-.trigger-class {
+.tabs_triggerClass {
 
   all: unset;
   flex-shrink: 0;
@@ -244,7 +244,7 @@ defineProps<ITabsProps>()
 }
 
 /* Content Class */
-.content-class {
+.tabs_contentClass {
   flex-grow: 1;
   padding: 1em;
   font-weight: 300;
@@ -260,12 +260,12 @@ defineProps<ITabsProps>()
   }
 
   &[data-state="active"] {
-    animation: show 400ms ease;
+    animation: tabs_show 400ms ease;
   }
 }
 
 /* Keyframes */
-@keyframes show {
+@keyframes tabs_show {
   from {
     opacity: 0;
     transform: translateY(10px);
@@ -277,7 +277,7 @@ defineProps<ITabsProps>()
 }
 
 /* Attribute Classes */
-.attr-class {
+.tabs_attrClass {
   background-color: rgba(0, 0, 255, 0.3);
   border: 2px solid blue;
   padding: 10px;
diff --git a/packages/components/toast/src/stories/Animated.vue b/packages/components/toast/src/stories/Animated.vue
index 72309f0dd..1851d0ea9 100644
--- a/packages/components/toast/src/stories/Animated.vue
+++ b/packages/components/toast/src/stories/Animated.vue
@@ -46,12 +46,12 @@ function handelAnimatedOpen() {
         Slide down
       </option>
     </select>
-    <OkuToast v-model="open" class="toast animated-toast">
+    <OkuToast v-model="open" class="animatedRootClass">
       <OkuToastDescription>Swipe me {{ swipeDirection }}</OkuToastDescription>
-      <OkuToastClose class="button">
+      <OkuToastClose class="buttonClass">
         Dismiss
       </OkuToastClose>
     </OkuToast>
-    <OkuToastViewport class="viewport" />
+    <OkuToastViewport class="toast_viewport" />
   </OkuToastProvider>
 </template>
diff --git a/packages/components/toast/src/stories/Chromatic.vue b/packages/components/toast/src/stories/Chromatic.vue
index 52ebedfd0..e4bd20fbe 100644
--- a/packages/components/toast/src/stories/Chromatic.vue
+++ b/packages/components/toast/src/stories/Chromatic.vue
@@ -35,212 +35,212 @@ const SNAPSHOT_DELAY = ref(300)
 <template>
   <h1>Order</h1>
   <OkuToastProvider :duration="Infinity">
-    <OkuToast class="toast">
-      <div class="header">
-        <OkuToastTitle class="title">
+    <OkuToast class="toast_toastClass">
+      <div class="toast_headerClass">
+        <OkuToastTitle class="toast_titleClass">
           Toast 1
         </OkuToastTitle>
         <OkuToastClose class="button close">
           ×
         </OkuToastClose>
       </div>
-      <OkuToastDescription class="description">
+      <OkuToastDescription class="toast_descriptionClass">
         Description
       </OkuToastDescription>
-      <OkuToastAction alt-text="alternative" class="button" :style="{ marginTop: '10px' }">
+      <OkuToastAction alt-text="alternative" class="buttonClass" :style="{ marginTop: '10px' }">
         Action
       </OkuToastAction>
     </OkuToast>
-    <OkuToast class="toast">
-      <div class="header">
-        <OkuToastTitle class="title">
+    <OkuToast class="toast_toastClass">
+      <div class="toast_headerClass">
+        <OkuToastTitle class="toast_titleClass">
           Toast 2
         </OkuToastTitle>
         <OkuToastClose class="button close">
           ×
         </OkuToastClose>
       </div>
-      <OkuToastDescription class="description">
+      <OkuToastDescription class="toast_descriptionClass">
         Description
       </OkuToastDescription>
-      <OkuToastAction alt-text="alternative" class="button" :style="{ marginTop: '10px' }">
+      <OkuToastAction alt-text="alternative" class="buttonClass" :style="{ marginTop: '10px' }">
         Action
       </OkuToastAction>
     </OkuToast>
-    <OkuToastViewport class="chromatic-viewport" />
+    <OkuToastViewport class="toast_chromatic_toast_viewport" />
   </OkuToastProvider>
 
   <h1>Uncontrolled</h1>
 
   <h2>Open</h2>
   <OkuToastProvider>
-    <OkuToast :duration="Infinity" class="toast">
-      <div class="header">
-        <OkuToastTitle class="title">
+    <OkuToast :duration="Infinity" class="toast_toastClass">
+      <div class="toast_headerClass">
+        <OkuToastTitle class="toast_titleClass">
           Toast
         </OkuToastTitle>
         <OkuToastClose class="button close">
           ×
         </OkuToastClose>
       </div>
-      <OkuToastDescription class="description">
+      <OkuToastDescription class="toast_descriptionClass">
         Description
       </OkuToastDescription>
-      <OkuToastAction alt-text="alternative" class="button" :style="{ marginTop: '10px' }">
+      <OkuToastAction alt-text="alternative" class="buttonClass" :style="{ marginTop: '10px' }">
         Action
       </OkuToastAction>
     </OkuToast>
-    <OkuToastViewport class="chromatic-viewport" />
+    <OkuToastViewport class="toast_chromatic_toast_viewport" />
   </OkuToastProvider>
 
   <h2>Closed</h2>
   <OkuToastProvider>
-    <OkuToast :open="false" :duration="Infinity" class="toast">
-      <div class="header">
-        <OkuToastTitle class="title">
+    <OkuToast :open="false" :duration="Infinity" class="toast_toastClass">
+      <div class="toast_headerClass">
+        <OkuToastTitle class="toast_titleClass">
           Title
         </OkuToastTitle>
         <OkuToastClose class="button close">
           ×
         </OkuToastClose>
       </div>
-      <OkuToastDescription class="description">
+      <OkuToastDescription class="toast_descriptionClass">
         Uncontrolled foreground closed
       </OkuToastDescription>
-      <OkuToastAction alt-text="alternative" class="button" :style="{ marginTop: '10px' }">
+      <OkuToastAction alt-text="alternative" class="buttonClass" :style="{ marginTop: '10px' }">
         Action
       </OkuToastAction>
     </OkuToast>
-    <OkuToastViewport class="chromatic-viewport" />
+    <OkuToastViewport class="toast_chromatic_toast_viewport" />
   </OkuToastProvider>
 
   <h1>Controlled</h1>
 
   <h2>Open</h2>
   <OkuToastProvider>
-    <OkuToast open :duration="Infinity" class="toast">
-      <div class="header">
-        <OkuToastTitle class="title">
+    <OkuToast open :duration="Infinity" class="toast_toastClass">
+      <div class="toast_headerClass">
+        <OkuToastTitle class="toast_titleClass">
           Toast
         </OkuToastTitle>
         <OkuToastClose class="button close">
           ×
         </OkuToastClose>
       </div>
-      <OkuToastDescription class="description">
+      <OkuToastDescription class="toast_descriptionClass">
         Description
       </OkuToastDescription>
-      <OkuToastAction alt-text="alternative" class="button" :style="{ marginTop: '10px' }">
+      <OkuToastAction alt-text="alternative" class="buttonClass" :style="{ marginTop: '10px' }">
         Action
       </OkuToastAction>
     </OkuToast>
-    <OkuToastViewport class="chromatic-viewport" />
+    <OkuToastViewport class="toast_chromatic_toast_viewport" />
   </OkuToastProvider>
 
   <h2>Closed</h2>
   <OkuToastProvider>
-    <OkuToast :open="false" :duration="Infinity" class="toast">
-      <div class="header">
-        <OkuToastTitle class="title">
+    <OkuToast :open="false" :duration="Infinity" class="toast_toastClass">
+      <div class="toast_headerClass">
+        <OkuToastTitle class="toast_titleClass">
           Toast
         </OkuToastTitle>
         <OkuToastClose class="button close">
           ×
         </OkuToastClose>
       </div>
-      <OkuToastDescription class="description">
+      <OkuToastDescription class="toast_descriptionClass">
         Description
       </OkuToastDescription>
-      <OkuToastAction alt-text="alternative" class="button" :style="{ marginTop: '10px' }">
+      <OkuToastAction alt-text="alternative" class="buttonClass" :style="{ marginTop: '10px' }">
         Action
       </OkuToastAction>
     </OkuToast>
-    <OkuToastViewport class="chromatic-viewport" />
+    <OkuToastViewport class="toast_chromatic_toast_viewport" />
   </OkuToastProvider>
 
   <h1>Dismissed</h1>
   <h2>Uncontrolled</h2>
   <OkuToastProvider>
-    <OkuToast :duration="SNAPSHOT_DELAY - 100" class="toast">
-      <div class="header">
-        <OkuToastTitle class="title">
+    <OkuToast :duration="SNAPSHOT_DELAY - 100" class="toast_toastClass">
+      <div class="toast_headerClass">
+        <OkuToastTitle class="toast_titleClass">
           Toast
         </OkuToastTitle>
         <OkuToastClose class="button close">
           ×
         </OkuToastClose>
       </div>
-      <OkuToastDescription class="description">
+      <OkuToastDescription class="toast_descriptionClass">
         Description
       </OkuToastDescription>
-      <OkuToastAction alt-text="alternative" class="button" :style="{ marginTop: '10px' }">
+      <OkuToastAction alt-text="alternative" class="buttonClass" :style="{ marginTop: '10px' }">
         Action
       </OkuToastAction>
     </OkuToast>
-    <OkuToastViewport class="chromatic-viewport" />
+    <OkuToastViewport class="toast_chromatic_toast_viewport" />
   </OkuToastProvider>
 
   <h2>Controlled</h2>
   <OkuToastProvider>
-    <OkuToast v-model="open" :duration="SNAPSHOT_DELAY - 100" :open="open" class="toast">
-      <div class="header">
-        <OkuToastTitle class="title">
+    <OkuToast v-model="open" :duration="SNAPSHOT_DELAY - 100" :open="open" class="toast_toastClass">
+      <div class="toast_headerClass">
+        <OkuToastTitle class="toast_titleClass">
           Toast
         </OkuToastTitle>
         <OkuToastClose class="button close">
           ×
         </OkuToastClose>
       </div>
-      <OkuToastDescription class="description">
+      <OkuToastDescription class="toast_descriptionClass">
         Description
       </OkuToastDescription>
-      <OkuToastAction alt-text="alternative" class="button" :style="{ marginTop: '10px' }">
+      <OkuToastAction alt-text="alternative" class="buttonClass" :style="{ marginTop: '10px' }">
         Action
       </OkuToastAction>
     </OkuToast>
-    <OkuToastViewport class="chromatic-viewport" />
+    <OkuToastViewport class="toast_chromatic_toast_viewport" />
   </OkuToastProvider>
 
   <h1>Provider</h1>
   <h2>Duration</h2>
   <OkuToastProvider :duration="SNAPSHOT_DELAY - 100">
-    <OkuToast class="toast">
-      <div class="header">
-        <OkuToastTitle class="title">
+    <OkuToast class="toast_toastClass">
+      <div class="toast_headerClass">
+        <OkuToastTitle class="toast_titleClass">
           Toast
         </OkuToastTitle>
         <OkuToastClose class="button close">
           ×
         </OkuToastClose>
       </div>
-      <OkuToastDescription class="description">
+      <OkuToastDescription class="toast_descriptionClass">
         Description
       </OkuToastDescription>
-      <OkuToastAction alt-text="alternative" class="button" :style="{ marginTop: '10px' }">
+      <OkuToastAction alt-text="alternative" class="buttonClass" :style="{ marginTop: '10px' }">
         Action
       </OkuToastAction>
     </OkuToast>
-    <OkuToastViewport class="chromatic-viewport" />
+    <OkuToastViewport class="toast_chromatic_toast_viewport" />
   </OkuToastProvider>
 
   <h2>Duration overidden</h2>
   <OkuToastProvider :duration="Infinity">
-    <OkuToast :duration="SNAPSHOT_DELAY - 100" class="toast">
-      <div class="header">
-        <OkuToastTitle class="title">
+    <OkuToast :duration="SNAPSHOT_DELAY - 100" class="toast_toastClass">
+      <div class="toast_headerClass">
+        <OkuToastTitle class="toast_titleClass">
           Toast
         </OkuToastTitle>
         <OkuToastClose class="button close">
           ×
         </OkuToastClose>
       </div>
-      <OkuToastDescription class="description">
+      <OkuToastDescription class="toast_descriptionClass">
         Description
       </OkuToastDescription>
-      <OkuToastAction alt-text="alternative" class="button" :style="{ marginTop: '10px' }">
+      <OkuToastAction alt-text="alternative" class="buttonClass" :style="{ marginTop: '10px' }">
         Action
       </OkuToastAction>
     </OkuToast>
-    <OkuToastViewport class="chromatic-viewport" />
+    <OkuToastViewport class="toast_chromatic_toast_viewport" />
   </OkuToastProvider>
 </template>
diff --git a/packages/components/toast/src/stories/Controlled.vue b/packages/components/toast/src/stories/Controlled.vue
index 774a64fbb..250b4ed01 100644
--- a/packages/components/toast/src/stories/Controlled.vue
+++ b/packages/components/toast/src/stories/Controlled.vue
@@ -39,20 +39,20 @@ watchEffect((onInvalidate) => {
     <ToastUpgradeAvailable v-model="hasUpgrade" />
     <ToastSubscribeSuccess v-model="isSubscribed" />
 
-    <OkuToast v-for="(_, index) in errorCount" :key="index" class="toast error-toast">
+    <OkuToast v-for="(_, index) in errorCount" :key="index" class="toast toast_errorToast">
       <OkuToastDescription>There was an error</OkuToastDescription>
       <OkuToastAction
-        class="button" alt-text="Resubmit the form to try again."
+        class="buttonClass" alt-text="Resubmit the form to try again."
         @click="console.log('try again')"
       >
         Try again
       </OkuToastAction>
     </OkuToast>
 
-    <OkuToast v-for="(_, index) in savedCount" :key="index" class="toast">
+    <OkuToast v-for="(_, index) in savedCount" :key="index" class="toast_toastClass">
       <OkuToastDescription>Successfully saved</OkuToastDescription>
     </OkuToast>
 
-    <OkuToastViewport class="viewport" />
+    <OkuToastViewport class="toast_viewport" />
   </OkuToastProvider>
 </template>
diff --git a/packages/components/toast/src/stories/Cypress.vue b/packages/components/toast/src/stories/Cypress.vue
index 4b16931e3..a7a20428c 100644
--- a/packages/components/toast/src/stories/Cypress.vue
+++ b/packages/components/toast/src/stories/Cypress.vue
@@ -14,38 +14,38 @@ const count = ref(0)
       :style="{ display: 'flex', justifyContent: 'space-between', maxWidth: '700px', margin: 'auto' }"
     >
       <button type="button" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-800 text-sm font-medium rounded-md">
-        Focusable before viewport
+        Focusable before toast_viewport
       </button>
 
       <OkuToast
         v-for="(_, index) in count"
         :key="index"
         open
-        class="toast"
+        class="toast_toastClass"
         :data-testid="`toast-${index + 1}`"
       >
-        <OkuToastTitle class="title">
+        <OkuToastTitle class="toast_titleClass">
           Toast {{ index + 1 }} title
         </OkuToastTitle>
-        <OkuToastDescription class="description">
+        <OkuToastDescription class="toast_descriptionClass">
           Toast {{ index + 1 }} description
         </OkuToastDescription>
 
-        <OkuToastClose class="button" aria-label="Close">
+        <OkuToastClose class="buttonClass" aria-label="Close">
           Toast button {{ index + 1 }}.1
         </OkuToastClose>
         <OkuToastAction
           alt-text="Go and perform an action"
-          class="button"
+          class="buttonClass"
           :style="{ marginTop: '10px' }"
         >
           Toast button {{ index + 1 }}.2
         </OkuToastAction>
       </OkuToast>
-      <OkuToastViewport class="viewport" />
+      <OkuToastViewport class="toast_viewport" />
 
       <button type="button" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-800 text-sm font-medium rounded-md">
-        Focusable after viewport
+        Focusable after toast_viewport
       </button>
     </div>
   </OkuToastProvider>
diff --git a/packages/components/toast/src/stories/FromDialog.vue b/packages/components/toast/src/stories/FromDialog.vue
index 6ee591176..835dd7595 100644
--- a/packages/components/toast/src/stories/FromDialog.vue
+++ b/packages/components/toast/src/stories/FromDialog.vue
@@ -28,16 +28,16 @@ const open = ref(false)
       </OkuDialogContent>
     </OkuDialog>
 
-    <OkuToast v-model="open" class="toast error-toast">
+    <OkuToast v-model="open" class="toast toast_errorToast">
       <OkuToastDescription>There was an error</OkuToastDescription>
       <OkuToastAction
-        class="button" alt-text="Resubmit the form to try again."
+        class="buttonClass" alt-text="Resubmit the form to try again."
         @click="console.log('try again')"
       >
         Try again
       </OkuToastAction>
     </OkuToast>
 
-    <OkuToastViewport class="viewport" />
+    <OkuToastViewport class="toast_viewport" />
   </OkuToastProvider>
 </template>
diff --git a/packages/components/toast/src/stories/KeyChange.vue b/packages/components/toast/src/stories/KeyChange.vue
index 7852bbc41..fe9df2645 100644
--- a/packages/components/toast/src/stories/KeyChange.vue
+++ b/packages/components/toast/src/stories/KeyChange.vue
@@ -15,14 +15,14 @@ const toastTwoCount = ref(0)
       Open toast two
     </button>
 
-    <OkuToast v-if="toastOneCount > 0" :key="`one-${String(toastOneCount)}`" class="toast">
+    <OkuToast v-if="toastOneCount > 0" :key="`one-${String(toastOneCount)}`" class="toast_toastClass">
       <OkuToastDescription>Toast one</OkuToastDescription>
     </OkuToast>
 
-    <OkuToast v-if="toastTwoCount > 0" :key="`two-${String(toastTwoCount)}`" class="toast">
+    <OkuToast v-if="toastTwoCount > 0" :key="`two-${String(toastTwoCount)}`" class="toast_toastClass">
       <OkuToastDescription>Toast two</OkuToastDescription>
     </OkuToast>
 
-    <OkuToastViewport class="viewport" />
+    <OkuToastViewport class="toast_viewport" />
   </OkuToastProvider>
 </template>
diff --git a/packages/components/toast/src/stories/PauseResumeProps.vue b/packages/components/toast/src/stories/PauseResumeProps.vue
index e1d0e402e..e134a7ba8 100644
--- a/packages/components/toast/src/stories/PauseResumeProps.vue
+++ b/packages/components/toast/src/stories/PauseResumeProps.vue
@@ -14,6 +14,6 @@ const toastCount = ref(0)
 
     <ToastWithProgress v-for="(_, index) in toastCount" :key="index" />
 
-    <OkuToastViewport class="viewport" />
+    <OkuToastViewport class="toast_viewport" />
   </OkuToastProvider>
 </template>
diff --git a/packages/components/toast/src/stories/Promise.vue b/packages/components/toast/src/stories/Promise.vue
index 35c3d02f1..33111b8f0 100644
--- a/packages/components/toast/src/stories/Promise.vue
+++ b/packages/components/toast/src/stories/Promise.vue
@@ -17,7 +17,7 @@ const saving = ref(false)
       <button type="submit" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-800 text-sm font-medium rounded-md">
         Save
       </button>
-      <OkuToast v-model="open" class="toast" :duration="saving ? Infinity : 2000">
+      <OkuToast v-model="open" class="toast_toastClass" :duration="saving ? Infinity : 2000">
         <OkuToastDescription v-if="saving">
           Saving&hellip;
         </OkuToastDescription>
@@ -27,6 +27,6 @@ const saving = ref(false)
       </OkuToast>
     </form>
 
-    <OkuToastViewport class="viewport" />
+    <OkuToastViewport class="toast_viewport" />
   </OkuToastProvider>
 </template>
diff --git a/packages/components/toast/src/stories/Styled.vue b/packages/components/toast/src/stories/Styled.vue
index a4433ee04..5cc00b44a 100644
--- a/packages/components/toast/src/stories/Styled.vue
+++ b/packages/components/toast/src/stories/Styled.vue
@@ -6,6 +6,6 @@ import ToastUpgradeAvailable from './ToastUpgradeAvailable.vue'
 <template>
   <OkuToastProvider>
     <ToastUpgradeAvailable open />
-    <OkuToastViewport class="viewport" />
+    <OkuToastViewport class="toast_viewport" />
   </OkuToastProvider>
 </template>
diff --git a/packages/components/toast/src/stories/ToastDemo.vue b/packages/components/toast/src/stories/ToastDemo.vue
index 047ca8691..eaba16b6f 100644
--- a/packages/components/toast/src/stories/ToastDemo.vue
+++ b/packages/components/toast/src/stories/ToastDemo.vue
@@ -58,7 +58,7 @@ export interface IToastProps {
 </template>
 
 <style>
-.viewport {
+.toast_viewport {
   position: fixed;
   top: 50%;
   left: 50%;
@@ -72,7 +72,7 @@ export interface IToastProps {
   list-style: none;
 }
 
-.toast {
+.toast_toastClass {
   position: relative;
   overflow: hidden;
   list-style: none;
@@ -84,7 +84,7 @@ export interface IToastProps {
   font-size: 12px;
 }
 
-.header {
+.toast_headerClass {
   padding: 5px 10px;
   margin: -10px -10px 10px;
   background: black;
@@ -95,28 +95,29 @@ export interface IToastProps {
   align-items: center;
 }
 
-.title {
+.toast_titleClass {
   font-size: inherit;
   font-weight: normal;
 }
 
-.description {
+.toast_descriptionClass {
   margin: 0;
 }
 
-.button {
+.buttonClass {
   border: 1px solid black;
   border-radius: 4px;
   background: gainsboro;
   font-family: inherit;
   padding: 2px 5px;
-}
 
-.button:hover,
-.button:focus {
-  background: royalblue;
-  border-color: darkblue;
-  color: white;
+  &:hover,
+  &:focus {
+    background: royalblue;
+    border-color: darkblue;
+    color: white;
+  }
+
 }
 
 .close {
@@ -129,7 +130,7 @@ export interface IToastProps {
   padding: 0;
 }
 
-@keyframes fadeIn {
+@keyframes toast_fadeIn {
   from {
     opacity: 0;
   }
@@ -139,7 +140,7 @@ export interface IToastProps {
   }
 }
 
-@keyframes fadeOut {
+@keyframes toast_fadeOut {
   from {
     opacity: 1;
   }
@@ -149,7 +150,7 @@ export interface IToastProps {
   }
 }
 
-@keyframes slideRight {
+@keyframes toast_slideRight {
   from {
     transform: translateX(var(--oku-toast-swipe-end-x));
   }
@@ -159,7 +160,7 @@ export interface IToastProps {
   }
 }
 
-@keyframes slideLeft {
+@keyframes toast_slideLeft {
   from {
     transform: translateX(var(--oku-toast-swipe-end-x));
   }
@@ -169,7 +170,7 @@ export interface IToastProps {
   }
 }
 
-@keyframes slideUp {
+@keyframes toast_slideUp {
   from {
     transform: translateY(var(--oku-toast-swipe-end-y));
   }
@@ -179,7 +180,7 @@ export interface IToastProps {
   }
 }
 
-@keyframes slideDown {
+@keyframes toast_slideDown {
   from {
     transform: translateY(var(--oku-toast-swipe-end-y));
   }
@@ -189,46 +190,53 @@ export interface IToastProps {
   }
 }
 
-.error-toast {
+.toast_errorToast {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
-[data-state="open"] {
-  animation: fadeIn 200ms ease-out;
-}
+.animatedRootClass {
+  &[data-state="open"] {
+    animation: toast_fadeIn 200ms ease-out;
+  }
 
-[data-state="closed"] {
-  animation: fadeOut 200ms ease-out;
-}
+  &[data-state="closed"] {
+    animation: toast_fadeOut 200ms ease-out;
+  }
 
-[data-swipe="move"] {
-  transform: translate(var(--oku-toast-swipe-move-x), var(--oku-toast-swipe-move-y));
-}
+  &[data-swipe="move"] {
+    transform: translate(var(--oku-toast-swipe-move-x), var(--oku-toast-swipe-move-y));
+  }
 
-[data-swipe="cancel"] {
-  transform: translate(0, 0);
-  transition: transform 200ms ease-out;
-}
+  &[data-swipe="cancel"] {
+    transform: translate(0, 0);
+    transition: transform 200ms ease-out;
+  }
 
-[data-swipe="end"][data-swipe-direction="right"] {
-  animation-name: slideRight;
-}
+  &[data-swipe="end"] {
+    animation-duration: 300ms;
+    animation-timing-function: ease-out;
 
-[data-swipe="end"][data-swipe-direction="left"] {
-  animation-name: slideLeft;
-}
+    &[data-swipe-direction="right"] {
+      animation-name: toast_slideRight;
+    }
 
-[data-swipe="end"][data-swipe-direction="up"] {
-  animation-name: slideUp;
-}
+    &[data-swipe-direction="left"] {
+      animation-name: toast_slideLeft;
+    }
 
-[data-swipe="end"][data-swipe-direction="down"] {
-  animation-name: slideDown;
+    &[data-swipe-direction="up"] {
+      animation-name: toast_slideUp;
+    }
+
+    &[data-swipe-direction="down"] {
+      animation-name: toast_slideDown;
+    }
+  }
 }
 
-.chromatic-viewport {
+.toast_chromatic_toast_viewport {
   display: inline-flex;
   border: 5px solid royalblue;
   flex-direction: column;
diff --git a/packages/components/toast/src/stories/ToastSubscribeSuccess.vue b/packages/components/toast/src/stories/ToastSubscribeSuccess.vue
index 56dbbe7d2..3f9efad4b 100644
--- a/packages/components/toast/src/stories/ToastSubscribeSuccess.vue
+++ b/packages/components/toast/src/stories/ToastSubscribeSuccess.vue
@@ -7,16 +7,16 @@ defineProps({
 </script>
 
 <template>
-  <OkuToast class="toast" :open="open">
+  <OkuToast class="toast_toastClass" :open="open">
     <div class="header success-header">
-      <OkuToastTitle class="title">
+      <OkuToastTitle class="toast_titleClass">
         Success!
       </OkuToastTitle>
       <OkuToastClose class="button close" aria-label="Close">
         <span aria-hidden>×</span>
       </OkuToastClose>
     </div>
-    <OkuToastDescription class="description">
+    <OkuToastDescription class="toast_descriptionClass">
       You have subscribed. We'll be in touch.
     </OkuToastDescription>
   </OkuToast>
diff --git a/packages/components/toast/src/stories/ToastUpgradeAvailable.vue b/packages/components/toast/src/stories/ToastUpgradeAvailable.vue
index 33ac01995..742e4052a 100644
--- a/packages/components/toast/src/stories/ToastUpgradeAvailable.vue
+++ b/packages/components/toast/src/stories/ToastUpgradeAvailable.vue
@@ -7,19 +7,19 @@ defineProps({
 </script>
 
 <template>
-  <OkuToast class="toast" :open="open">
-    <div class="header">
-      <OkuToastTitle class="title">
+  <OkuToast class="toast_toastClass" :open="open">
+    <div class="toast_headerClass">
+      <OkuToastTitle class="toast_titleClass">
         Upgrade available
       </OkuToastTitle>
       <OkuToastClose class="button close" aria-label="Close">
         <span aria-hidden>×</span>
       </OkuToastClose>
     </div>
-    <OkuToastDescription class="description">
+    <OkuToastDescription class="toast_descriptionClass">
       We've just released Oku version 1.0
     </OkuToastDescription>
-    <OkuToastAction alt-text="Goto account settings to upgrade" class="button" :style="{ marginTop: '10px' }">
+    <OkuToastAction alt-text="Goto account settings to upgrade" class="buttonClass" :style="{ marginTop: '10px' }">
       Upgrade
     </OkuToastAction>
   </OkuToast>
diff --git a/packages/components/toast/src/stories/ToastWithProgress.vue b/packages/components/toast/src/stories/ToastWithProgress.vue
index 6aea1a07f..c22edb808 100644
--- a/packages/components/toast/src/stories/ToastWithProgress.vue
+++ b/packages/components/toast/src/stories/ToastWithProgress.vue
@@ -8,7 +8,7 @@ const duration = ref(3000)
 
 <template>
   <OkuToast
-    class="toast"
+    class="toast_toastClass"
     :duration="duration"
     @pause="paused = true"
     @resume="paused = false"
diff --git a/packages/components/toast/src/stories/toast.css b/packages/components/toast/src/stories/toast.css
deleted file mode 100644
index f9a4bef3b..000000000
--- a/packages/components/toast/src/stories/toast.css
+++ /dev/null
@@ -1,177 +0,0 @@
-.viewport {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  border: 1px solid;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  padding: v-bind(VIEWPORT_PADDING);
-  gap: v-bind(VIEWPORT_PADDING);
-  list-style: none;
-}
-
-.toast {
-  position: relative;
-  overflow: hidden;
-  list-style: none;
-  width: 230px;
-  border-radius: 4px;
-  border: 1px solid black;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
-  padding: 10px;
-  font-size: 12px;
-}
-
-.header {
-  padding: 5px 10px;
-  margin: -10px -10px 10px;
-  background: black;
-  color: white;
-  position: relative;
-  height: 22px;
-  display: flex;
-  align-items: center;
-}
-
-.title {
-  font-size: inherit;
-  font-weight: normal;
-}
-
-.description {
-  margin: 0;
-}
-
-.button {
-  border: 1px solid black;
-  border-radius: 4px;
-  background: gainsboro;
-  font-family: inherit;
-  padding: 2px 5px;
-}
-
-.button:hover,
-.button:focus {
-  background: royalblue;
-  border-color: darkblue;
-  color: white;
-}
-
-.close {
-  position: absolute;
-  top: 50%;
-  right: 5px;
-  transform: translateY(-50%);
-  width: 18px;
-  height: 18px;
-  padding: 0;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-  }
-}
-
-@keyframes slideRight {
-  from {
-    transform: translateX(var(--oku-toast-swipe-end-x));
-  }
-
-  to {
-    transform: translateX(calc(100% + v-bind(VIEWPORT_PADDING)));
-  }
-}
-
-@keyframes slideLeft {
-  from {
-    transform: translateX(var(--oku-toast-swipe-end-x));
-  }
-
-  to {
-    transform: translateX(calc(-100% - v-bind(VIEWPORT_PADDING)));
-  }
-}
-
-@keyframes slideUp {
-  from {
-    transform: translateY(var(--oku-toast-swipe-end-y));
-  }
-
-  to {
-    transform: translateY(calc(-100% - v-bind(VIEWPORT_PADDING)));
-  }
-}
-
-@keyframes slideDown {
-  from {
-    transform: translateY(var(--oku-toast-swipe-end-y));
-  }
-
-  to {
-    transform: translateY(calc(100% + v-bind(VIEWPORT_PADDING)));
-  }
-}
-
-.error-toast {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-[data-state="open"] {
-  animation: fadeIn 200ms ease-out;
-}
-
-[data-state="closed"] {
-  animation: fadeOut 200ms ease-out;
-}
-
-[data-swipe="move"] {
-  transform: translate(var(--oku-toast-swipe-move-x), var(--oku-toast-swipe-move-y));
-}
-
-[data-swipe="cancel"] {
-  transform: translate(0, 0);
-  transition: transform 200ms ease-out;
-}
-
-[data-swipe="end"][data-swipe-direction="right"] {
-  animation-name: slideRight;
-}
-
-[data-swipe="end"][data-swipe-direction="left"] {
-  animation-name: slideLeft;
-}
-
-[data-swipe="end"][data-swipe-direction="up"] {
-  animation-name: slideUp;
-}
-
-[data-swipe="end"][data-swipe-direction="down"] {
-  animation-name: slideDown;
-}
-
-.chromatic-viewport {
-  display: inline-flex;
-  border: 5px solid royalblue;
-  flex-direction: column;
-  padding: v-bind(VIEWPORT_PADDING);
-  gap: v-bind(VIEWPORT_PADDING);
-}
diff --git a/packages/components/toggle-group/src/stories/ToggleGroupDemo.vue b/packages/components/toggle-group/src/stories/ToggleGroupDemo.vue
index bcf4fd1ca..680c25d9a 100644
--- a/packages/components/toggle-group/src/stories/ToggleGroupDemo.vue
+++ b/packages/components/toggle-group/src/stories/ToggleGroupDemo.vue
@@ -20,28 +20,28 @@ const arrayValue = ref()
   <div v-if="template === '#1' || allshow">
     {{ testValue }}
     <h1>Uncontrolled</h1>
-    <OkuToggleGroup v-model="testValue" type="single" class="root" aria-label="Options" @value-change="console.log">
-      <OkuToggleGroupItem value="1" class="item">
+    <OkuToggleGroup v-model="testValue" type="single" class="toggle_group_rootClass" aria-label="Options" @value-change="console.log">
+      <OkuToggleGroupItem value="1" class="toggle_group_itemClass">
         Option 1
       </OkuToggleGroupItem>
-      <OkuToggleGroupItem value="2" class="item">
+      <OkuToggleGroupItem value="2" class="toggle_group_itemClass">
         Option 2
       </OkuToggleGroupItem>
-      <OkuToggleGroupItem value="3" class="item">
+      <OkuToggleGroupItem value="3" class="toggle_group_itemClass">
         Option 3
       </OkuToggleGroupItem>
     </OkuToggleGroup>
 
     {{ arrayValue }}
     <h1>Group</h1>
-    <OkuToggleGroup v-model="arrayValue" type="multiple" class="root" aria-label="Options">
-      <OkuToggleGroupItem value="1" class="item">
+    <OkuToggleGroup v-model="arrayValue" type="multiple" class="toggle_group_rootClass" aria-label="Options">
+      <OkuToggleGroupItem value="1" class="toggle_group_itemClass">
         Option 1
       </OkuToggleGroupItem>
-      <OkuToggleGroupItem value="2" class="item">
+      <OkuToggleGroupItem value="2" class="toggle_group_itemClass">
         Option 2
       </OkuToggleGroupItem>
-      <OkuToggleGroupItem value="3" class="item">
+      <OkuToggleGroupItem value="3" class="toggle_group_itemClass">
         Option 3
       </OkuToggleGroupItem>
     </OkuToggleGroup>
@@ -49,7 +49,7 @@ const arrayValue = ref()
 </template>
 
 <style lang="postcss">
-.root {
+.toggle_group_rootClass {
   display: inline-flex;
   gap: 5px;
   padding: 5px;
@@ -58,7 +58,7 @@ const arrayValue = ref()
   }
 }
 
-.item {
+.toggle_group_itemClass {
   border: 1px solid black;
   border-radius: 6px;
   padding: 5px 10px;
@@ -81,7 +81,7 @@ const arrayValue = ref()
   }
 }
 
-.item-attr {
+.toggle_group_itemClass_attr {
   background-color: rgba(0, 0, 255, 0.3);
   border: 2px solid blue;
   padding: 10px;
diff --git a/packages/components/toolbar/src/stories/ToolbarDemo.vue b/packages/components/toolbar/src/stories/ToolbarDemo.vue
index 6b15bce7f..4adc28f7f 100644
--- a/packages/components/toolbar/src/stories/ToolbarDemo.vue
+++ b/packages/components/toolbar/src/stories/ToolbarDemo.vue
@@ -22,3 +22,157 @@ withDefaults(defineProps<OkuToolbarProps>(), {
     </div>
   </div>
 </template>
+
+<style>
+.toolbar_rootClass {
+  &[data-orientation="vertical"] {
+    flex-direction: column;
+  }
+
+  display: inline-flex;
+  box-sizing: border-box;
+  min-width: 130px;
+  background-color: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 6px;
+  padding: 5px;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  font-family: apple-system,
+  BlinkMacSystemFont,
+  helvetica,
+  arial,
+  sans-serif;
+  font-size: 13px;
+
+  &:focus-within {
+    border-color: #000;
+  }
+}
+
+.toolbar_separatorClass {
+  height: 1px;
+  margin: 5px;
+  background-color: #f0f0f0;
+
+  &[data-orientation="vertical"] {
+    width: 1px;
+    height: auto;
+  }
+}
+
+.toolbar_itemClass {
+  border: 1px solid #000;
+  border-radius: 6px;
+  background-color: transparent;
+  padding: 5px 10px;
+  font-family: apple-system, BlinkMacSystemFont, helvetica, arial, sans-serif;
+  font-size: 13px;
+
+  display: flex;
+  align-items: center;
+
+  &:focus,
+  &:focus-within {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);
+  }
+
+  &[data-disabled] {
+    opacity: 0.5;
+    user-select: none;
+  }
+}
+
+.toolbar_linkClass {
+  border: 1px solid #000;
+  border-radius: 6px;
+  background-color: transparent;
+  padding: 5px 10px;
+  font-family: apple-system, BlinkMacSystemFont, helvetica, arial, sans-serif;
+  font-size: 13px;
+
+  display: flex;
+  align-items: center;
+
+  &:focus,
+  &:focus-within {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);
+  }
+
+  &[data-disabled] {
+    opacity: 0.5;
+    user-select: none;
+  }
+
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  color: black;
+}
+
+.toolbar_toggleButtonClass {
+  border: 1px solid #000;
+  border-radius: 6px;
+  background-color: transparent;
+  padding: 5px 10px;
+  font-family: apple-system, BlinkMacSystemFont, helvetica, arial, sans-serif;
+  font-size: 13px;
+
+  display: flex;
+  align-items: center;
+
+  &:focus,
+  &:focus-within {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);
+  }
+
+  &[data-disabled] {
+    opacity: 0.5;
+    user-select: none;
+  }
+
+  &[data-state="on"] {
+    background: black;
+    color: white;
+  }
+}
+
+.toolbar_toggleGroupClass {
+  display: flex;
+  gap: 5px;
+
+  &[data-orientation="vertical"] {
+    flex-direction: column;
+  }
+}
+
+.toolbar_toggleItemClass {
+  border: 1px solid #000;
+  border-radius: 6px;
+  background-color: transparent;
+  padding: 5px 10px;
+  font-family: apple-system, BlinkMacSystemFont, helvetica, arial, sans-serif;
+  font-size: 13px;
+
+  display: flex;
+  align-items: center;
+
+  &:focus,
+  &:focus-within {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);
+  }
+
+  &[data-disabled] {
+    opacity: 0.5;
+    user-select: none;
+  }
+
+  &[data-state="on"] {
+    background: black;
+    color: white;
+  }
+}
+</style>
diff --git a/packages/components/toolbar/src/stories/ToolbarExample.vue b/packages/components/toolbar/src/stories/ToolbarExample.vue
index 7538aa97d..f342b7bc7 100644
--- a/packages/components/toolbar/src/stories/ToolbarExample.vue
+++ b/packages/components/toolbar/src/stories/ToolbarExample.vue
@@ -24,46 +24,46 @@ const props = defineProps<{
   <div>
     <h1>{{ props.title }}</h1>
     <OkuToolbar
-      class="toolbarClass"
+      class="toolbar_rootClass"
       :orientation="props.orientation"
       :loop="props.loop"
       :aria-label="`Toolbar ${props.title}`"
       :dir="props.dir"
     >
-      <OkuToolbarButton class="toolbarItemClass">
+      <OkuToolbarButton class="toolbar_itemClass">
         Button
       </OkuToolbarButton>
-      <OkuToolbarButton class="toolbarItemClass" disabled>
+      <OkuToolbarButton class="toolbar_itemClass" disabled>
         Button (disabled)
       </OkuToolbarButton>
-      <OkuToolbarSeparator class="toolbarSeparatorClass" />
+      <OkuToolbarSeparator class="toolbar_separatorClass" />
       <OkuToolbarLink
-        class="toolbarLinkClass"
+        class="toolbar_linkClass"
         href="https://www.w3.org/TR/2019/WD-wai-aria-practices-1.2-20191218/examples/toolbar/toolbar.html"
         target="_blank"
       >
         Link
       </OkuToolbarLink>
-      <OkuToolbarSeparator class="toolbarSeparatorClass" />
-      <OkuToolbarButton class="toolbarToggleButtonClass" as-child>
+      <OkuToolbarSeparator class="toolbar_separatorClass" />
+      <OkuToolbarButton class="toolbar_toggleButtonClass" as-child>
         <OkuToggle>Toggle</OkuToggle>a
       </OkuToolbarButton>
-      <OkuToolbarSeparator class="toolbarSeparatorClass" />
-      <OkuToolbarToggleGroup type="single" class="toolbarToggleGroupClass">
-        <OkuToolbarToggleItem value="left" class="toolbarToggleItemClass">
+      <OkuToolbarSeparator class="toolbar_separatorClass" />
+      <OkuToolbarToggleGroup type="single" class="toolbar_toggleGroupClass">
+        <OkuToolbarToggleItem value="left" class="toolbar_toggleItemClass">
           Left
         </OkuToolbarToggleItem>
-        <OkuToolbarToggleItem value="center" class="toolbarToggleItemClass">
+        <OkuToolbarToggleItem value="center" class="toolbar_toggleItemClass">
           Center
         </OkuToolbarToggleItem>
-        <OkuToolbarToggleItem value="right" class="toolbarToggleItemClass">
+        <OkuToolbarToggleItem value="right" class="toolbar_toggleItemClass">
           Right
         </OkuToolbarToggleItem>
       </OkuToolbarToggleGroup>
-      <OkuToolbarSeparator class="toolbarSeparatorClass" />
+      <OkuToolbarSeparator class="toolbar_separatorClass" />
       <!-- TODO: DropdownMenu issua: https://github.com/oku-ui/primitives/issues/10 -->
       <!-- <DropdownMenu.Root>
-        <OkuToolbarButton class="toolbarItemClass" as-child>
+        <OkuToolbarButton class="toolbar_itemClass" as-child>
           <DropdownMenu.Trigger>Menu</DropdownMenu.Trigger>
         </OkuToolbarButton>
         <DropdownMenu.Content class="dropdownMenuContentClass" side-offset="5}">
@@ -79,155 +79,3 @@ const props = defineProps<{
     </OkuToolbar>
   </div>
 </template>
-
-<style>
-.toolbarClass {
-  @apply flex gap-1;
-
-  &[data-orientation="vertical"] {
-    flex-direction: column;
-  }
-
-  display: inline-flex;
-  box-sizing: border-box;
-  min-width: 130px;
-  background-color: #fff;
-  border: 1px solid #f0f0f0;
-  border-radius: 6px;
-  padding: 5px;
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
-  font-family: apple-system, BlinkMacSystemFont, helvetica, arial, sans-serif;
-  font-size: 13px;
-
-  &:focus-within {
-    border-color: #000;
-  }
-}
-
-.toolbarSeparatorClass {
-  height: 1px;
-  margin: 5px;
-  background-color: #f0f0f0;
-
-  &[data-orientation="vertical"] {
-    width: 1px;
-    height: auto;
-  }
-}
-
-.toolbarItemClass {
-  border: 1px solid #000;
-  border-radius: 6px;
-  background-color: transparent;
-  padding: 5px 10px;
-  font-family: apple-system, BlinkMacSystemFont, helvetica, arial, sans-serif;
-  font-size: 13px;
-
-  display: flex;
-  align-items: center;
-
-  &:focus,
-  &:focus-within {
-    outline: none;
-    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);
-  }
-
-  &[data-disabled] {
-    opacity: 0.5;
-    user-select: none;
-  }
-}
-
-.toolbarLinkClass {
-  border: 1px solid #000;
-  border-radius: 6px;
-  background-color: transparent;
-  padding: 5px 10px;
-  font-family: apple-system, BlinkMacSystemFont, helvetica, arial, sans-serif;
-  font-size: 13px;
-
-  display: flex;
-  align-items: center;
-
-  &:focus,
-  &:focus-within {
-    outline: none;
-    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);
-  }
-
-  &[data-disabled] {
-    opacity: 0.5;
-    user-select: none;
-  }
-
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  color: black;
-}
-
-.toolbarToggleButtonClass {
-  border: 1px solid #000;
-  border-radius: 6px;
-  background-color: transparent;
-  padding: 5px 10px;
-  font-family: apple-system, BlinkMacSystemFont, helvetica, arial, sans-serif;
-  font-size: 13px;
-
-  display: flex;
-  align-items: center;
-
-  &:focus,
-  &:focus-within {
-    outline: none;
-    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);
-  }
-
-  &[data-disabled] {
-    opacity: 0.5;
-    user-select: none;
-  }
-
-  &[data-state="on"] {
-    background: black;
-    color: white;
-  }
-}
-
-.toolbarToggleGroupClass {
-  display: flex;
-  gap: 5px;
-
-  &[data-orientation="vertical"] {
-    flex-direction: column;
-  }
-}
-
-.toolbarToggleItemClass {
-    border: 1px solid #000;
-  border-radius: 6px;
-  background-color: transparent;
-  padding: 5px 10px;
-  font-family: apple-system, BlinkMacSystemFont, helvetica, arial, sans-serif;
-  font-size: 13px;
-
-  display: flex;
-  align-items: center;
-
-  &:focus,
-  &:focus-within {
-    outline: none;
-    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);
-  }
-
-  &[data-disabled] {
-    opacity: 0.5;
-    user-select: none;
-  }
-
-  &[data-state="on"] {
-    background: black;
-    color: white;
-  }
-}
-</style>
diff --git a/packages/components/tooltip/src/stories/Controlled.vue b/packages/components/tooltip/src/stories/Controlled.vue
index 5890bfd4f..4f3216000 100644
--- a/packages/components/tooltip/src/stories/Controlled.vue
+++ b/packages/components/tooltip/src/stories/Controlled.vue
@@ -15,13 +15,13 @@ const open = ref(true)
 <template>
   <OkuTooltipProvider>
     <OkuTooltip v-model="open">
-      <OkuTooltipTrigger class="triggerClass">
+      <OkuTooltipTrigger class="tooltip_triggerClass">
         I'm controlled, look I'm {{ open ? 'open' : 'closed' }}
       </OkuTooltipTrigger>
       <OkuTooltipPortal>
-        <OkuTooltipContent class="contentClass" :side-offset="5">
+        <OkuTooltipContent class="tooltip_contentClass" :side-offset="5">
           Nicely done!
-          <OkuTooltipArrow class="arrowClass" :offset="10" />
+          <OkuTooltipArrow class="tooltip_arrowClass" :offset="10" />
         </OkuTooltipContent>
       </OkuTooltipPortal>
     </OkuTooltip>
diff --git a/packages/components/tooltip/src/stories/CustomDurations.vue b/packages/components/tooltip/src/stories/CustomDurations.vue
index 3f820ef19..84f536840 100644
--- a/packages/components/tooltip/src/stories/CustomDurations.vue
+++ b/packages/components/tooltip/src/stories/CustomDurations.vue
@@ -18,29 +18,29 @@ import {
 
     <div style={{ display: 'flex', gap: 50 }}>
       <Tooltip.Root>
-        <Tooltip.Trigger className={triggerClass()}>Hover me</Tooltip.Trigger>
+        <Tooltip.Trigger className={tooltip_triggerClass()}>Hover me</Tooltip.Trigger>
         <Tooltip.Portal>
-          <Tooltip.Content className={contentClass()} sideOffset={5}>
+          <Tooltip.Content className={tooltip_contentClass()} sideOffset={5}>
             Nicely done!
-            <Tooltip.Arrow className={arrowClass()} offset={10} />
+            <Tooltip.Arrow className={tooltip_arrowClass()} offset={10} />
           </Tooltip.Content>
         </Tooltip.Portal>
       </Tooltip.Root>
       <Tooltip.Root>
-        <Tooltip.Trigger className={triggerClass()}>Hover me</Tooltip.Trigger>
+        <Tooltip.Trigger className={tooltip_triggerClass()}>Hover me</Tooltip.Trigger>
         <Tooltip.Portal>
-          <Tooltip.Content className={contentClass()} sideOffset={5}>
+          <Tooltip.Content className={tooltip_contentClass()} sideOffset={5}>
             Nicely done!
-            <Tooltip.Arrow className={arrowClass()} offset={10} />
+            <Tooltip.Arrow className={tooltip_arrowClass()} offset={10} />
           </Tooltip.Content>
         </Tooltip.Portal>
       </Tooltip.Root>
       <Tooltip.Root>
-        <Tooltip.Trigger className={triggerClass()}>Hover me</Tooltip.Trigger>
+        <Tooltip.Trigger className={tooltip_triggerClass()}>Hover me</Tooltip.Trigger>
         <Tooltip.Portal>
-          <Tooltip.Content className={contentClass()} sideOffset={5}>
+          <Tooltip.Content className={tooltip_contentClass()} sideOffset={5}>
             Nicely done!
-            <Tooltip.Arrow className={arrowClass()} offset={10} />
+            <Tooltip.Arrow className={tooltip_arrowClass()} offset={10} />
           </Tooltip.Content>
         </Tooltip.Portal>
       </Tooltip.Root>
@@ -50,29 +50,29 @@ import {
     <div style={{ display: 'flex', gap: 50 }}>
       <Tooltip.Provider delayDuration={0}>
         <Tooltip.Root>
-          <Tooltip.Trigger className={triggerClass()}>Hover me</Tooltip.Trigger>
+          <Tooltip.Trigger className={tooltip_triggerClass()}>Hover me</Tooltip.Trigger>
           <Tooltip.Portal>
-            <Tooltip.Content className={contentClass()} sideOffset={5}>
+            <Tooltip.Content className={tooltip_contentClass()} sideOffset={5}>
               Nicely done!
-              <Tooltip.Arrow className={arrowClass()} offset={10} />
+              <Tooltip.Arrow className={tooltip_arrowClass()} offset={10} />
             </Tooltip.Content>
           </Tooltip.Portal>
         </Tooltip.Root>
         <Tooltip.Root>
-          <Tooltip.Trigger className={triggerClass()}>Hover me</Tooltip.Trigger>
+          <Tooltip.Trigger className={tooltip_triggerClass()}>Hover me</Tooltip.Trigger>
           <Tooltip.Portal>
-            <Tooltip.Content className={contentClass()} sideOffset={5}>
+            <Tooltip.Content className={tooltip_contentClass()} sideOffset={5}>
               Nicely done!
-              <Tooltip.Arrow className={arrowClass()} offset={10} />
+              <Tooltip.Arrow className={tooltip_arrowClass()} offset={10} />
             </Tooltip.Content>
           </Tooltip.Portal>
         </Tooltip.Root>
         <Tooltip.Root>
-          <Tooltip.Trigger className={triggerClass()}>Hover me</Tooltip.Trigger>
+          <Tooltip.Trigger className={tooltip_triggerClass()}>Hover me</Tooltip.Trigger>
           <Tooltip.Portal>
-            <Tooltip.Content className={contentClass()} sideOffset={5}>
+            <Tooltip.Content className={tooltip_contentClass()} sideOffset={5}>
               Nicely done!
-              <Tooltip.Arrow className={arrowClass()} offset={10} />
+              <Tooltip.Arrow className={tooltip_arrowClass()} offset={10} />
             </Tooltip.Content>
           </Tooltip.Portal>
         </Tooltip.Root>
@@ -83,29 +83,29 @@ import {
 <div style={{ display: 'flex', gap: 50 }}>
       <Tooltip.Provider delayDuration={2000}>
         <Tooltip.Root>
-          <Tooltip.Trigger className={triggerClass()}>Hover me</Tooltip.Trigger>
+          <Tooltip.Trigger className={tooltip_triggerClass()}>Hover me</Tooltip.Trigger>
           <Tooltip.Portal>
-            <Tooltip.Content className={contentClass()} sideOffset={5}>
+            <Tooltip.Content className={tooltip_contentClass()} sideOffset={5}>
               Nicely done!
-              <Tooltip.Arrow className={arrowClass()} offset={10} />
+              <Tooltip.Arrow className={tooltip_arrowClass()} offset={10} />
             </Tooltip.Content>
           </Tooltip.Portal>
         </Tooltip.Root>
         <Tooltip.Root>
-          <Tooltip.Trigger className={triggerClass()}>Hover me</Tooltip.Trigger>
+          <Tooltip.Trigger className={tooltip_triggerClass()}>Hover me</Tooltip.Trigger>
           <Tooltip.Portal>
-            <Tooltip.Content className={contentClass()} sideOffset={5}>
+            <Tooltip.Content className={tooltip_contentClass()} sideOffset={5}>
               Nicely done!
-              <Tooltip.Arrow className={arrowClass()} offset={10} />
+              <Tooltip.Arrow className={tooltip_arrowClass()} offset={10} />
             </Tooltip.Content>
           </Tooltip.Portal>
         </Tooltip.Root>
         <Tooltip.Root>
-          <Tooltip.Trigger className={triggerClass()}>Hover me</Tooltip.Trigger>
+          <Tooltip.Trigger className={tooltip_triggerClass()}>Hover me</Tooltip.Trigger>
           <Tooltip.Portal>
-            <Tooltip.Content className={contentClass()} sideOffset={5}>
+            <Tooltip.Content className={tooltip_contentClass()} sideOffset={5}>
               Nicely done!
-              <Tooltip.Arrow className={arrowClass()} offset={10} />
+              <Tooltip.Arrow className={tooltip_arrowClass()} offset={10} />
             </Tooltip.Content>
           </Tooltip.Portal>
         </Tooltip.Root>
@@ -116,29 +116,29 @@ import {
 <h2>Default (300ms to move from one to another tooltip)</h2>
 <div style={{ display: 'flex', gap: 50 }}>
       <Tooltip.Root>
-        <Tooltip.Trigger className={triggerClass()}>Hover me</Tooltip.Trigger>
+        <Tooltip.Trigger className={tooltip_triggerClass()}>Hover me</Tooltip.Trigger>
         <Tooltip.Portal>
-          <Tooltip.Content className={contentClass()} sideOffset={5}>
+          <Tooltip.Content className={tooltip_contentClass()} sideOffset={5}>
             Nicely done!
-            <Tooltip.Arrow className={arrowClass()} offset={10} />
+            <Tooltip.Arrow className={tooltip_arrowClass()} offset={10} />
           </Tooltip.Content>
         </Tooltip.Portal>
       </Tooltip.Root>
       <Tooltip.Root>
-        <Tooltip.Trigger className={triggerClass()}>Hover me</Tooltip.Trigger>
+        <Tooltip.Trigger className={tooltip_triggerClass()}>Hover me</Tooltip.Trigger>
         <Tooltip.Portal>
-          <Tooltip.Content className={contentClass()} sideOffset={5}>
+          <Tooltip.Content className={tooltip_contentClass()} sideOffset={5}>
             Nicely done!
-            <Tooltip.Arrow className={arrowClass()} offset={10} />
+            <Tooltip.Arrow className={tooltip_arrowClass()} offset={10} />
           </Tooltip.Content>
         </Tooltip.Portal>
       </Tooltip.Root>
       <Tooltip.Root>
-        <Tooltip.Trigger className={triggerClass()}>Hover me</Tooltip.Trigger>
+        <Tooltip.Trigger className={tooltip_triggerClass()}>Hover me</Tooltip.Trigger>
         <Tooltip.Portal>
-          <Tooltip.Content className={contentClass()} sideOffset={5}>
+          <Tooltip.Content className={tooltip_contentClass()} sideOffset={5}>
             Nicely done!
-            <Tooltip.Arrow className={arrowClass()} offset={10} />
+            <Tooltip.Arrow className={tooltip_arrowClass()} offset={10} />
           </Tooltip.Content>
         </Tooltip.Portal>
       </Tooltip.Root>
@@ -148,29 +148,29 @@ import {
 <div style={{ display: 'flex', gap: 50 }}>
       <Tooltip.Provider skipDelayDuration={0}>
         <Tooltip.Root>
-          <Tooltip.Trigger className={triggerClass()}>Hover me</Tooltip.Trigger>
+          <Tooltip.Trigger className={tooltip_triggerClass()}>Hover me</Tooltip.Trigger>
           <Tooltip.Portal>
-            <Tooltip.Content className={contentClass()} sideOffset={5}>
+            <Tooltip.Content className={tooltip_contentClass()} sideOffset={5}>
               Nicely done!
-              <Tooltip.Arrow className={arrowClass()} offset={10} />
+              <Tooltip.Arrow className={tooltip_arrowClass()} offset={10} />
             </Tooltip.Content>
           </Tooltip.Portal>
         </Tooltip.Root>
         <Tooltip.Root>
-          <Tooltip.Trigger className={triggerClass()}>Hover me</Tooltip.Trigger>
+          <Tooltip.Trigger className={tooltip_triggerClass()}>Hover me</Tooltip.Trigger>
           <Tooltip.Portal>
-            <Tooltip.Content className={contentClass()} sideOffset={5}>
+            <Tooltip.Content className={tooltip_contentClass()} sideOffset={5}>
               Nicely done!
-              <Tooltip.Arrow className={arrowClass()} offset={10} />
+              <Tooltip.Arrow className={tooltip_arrowClass()} offset={10} />
             </Tooltip.Content>
           </Tooltip.Portal>
         </Tooltip.Root>
         <Tooltip.Root>
-          <Tooltip.Trigger className={triggerClass()}>Hover me</Tooltip.Trigger>
+          <Tooltip.Trigger className={tooltip_triggerClass()}>Hover me</Tooltip.Trigger>
           <Tooltip.Portal>
-            <Tooltip.Content className={contentClass()} sideOffset={5}>
+            <Tooltip.Content className={tooltip_contentClass()} sideOffset={5}>
               Nicely done!
-              <Tooltip.Arrow className={arrowClass()} offset={10} />
+              <Tooltip.Arrow className={tooltip_arrowClass()} offset={10} />
             </Tooltip.Content>
           </Tooltip.Portal>
         </Tooltip.Root>
@@ -181,29 +181,29 @@ import {
 <div style={{ display: 'flex', gap: 50 }}>
       <Tooltip.Provider skipDelayDuration={5000}>
         <Tooltip.Root>
-          <Tooltip.Trigger className={triggerClass()}>Hover me</Tooltip.Trigger>
+          <Tooltip.Trigger className={tooltip_triggerClass()}>Hover me</Tooltip.Trigger>
           <Tooltip.Portal>
-            <Tooltip.Content className={contentClass()} sideOffset={5}>
+            <Tooltip.Content className={tooltip_contentClass()} sideOffset={5}>
               Nicely done!
-              <Tooltip.Arrow className={arrowClass()} offset={10} />
+              <Tooltip.Arrow className={tooltip_arrowClass()} offset={10} />
             </Tooltip.Content>
           </Tooltip.Portal>
         </Tooltip.Root>
         <Tooltip.Root>
-          <Tooltip.Trigger className={triggerClass()}>Hover me</Tooltip.Trigger>
+          <Tooltip.Trigger className={tooltip_triggerClass()}>Hover me</Tooltip.Trigger>
           <Tooltip.Portal>
-            <Tooltip.Content className={contentClass()} sideOffset={5}>
+            <Tooltip.Content className={tooltip_contentClass()} sideOffset={5}>
               Nicely done!
-              <Tooltip.Arrow className={arrowClass()} offset={10} />
+              <Tooltip.Arrow className={tooltip_arrowClass()} offset={10} />
             </Tooltip.Content>
           </Tooltip.Portal>
         </Tooltip.Root>
         <Tooltip.Root>
-          <Tooltip.Trigger className={triggerClass()}>Hover me</Tooltip.Trigger>
+          <Tooltip.Trigger className={tooltip_triggerClass()}>Hover me</Tooltip.Trigger>
           <Tooltip.Portal>
-            <Tooltip.Content className={contentClass()} sideOffset={5}>
+            <Tooltip.Content className={tooltip_contentClass()} sideOffset={5}>
               Nicely done!
-              <Tooltip.Arrow className={arrowClass()} offset={10} />
+              <Tooltip.Arrow className={tooltip_arrowClass()} offset={10} />
             </Tooltip.Content>
           </Tooltip.Portal>
         </Tooltip.Root>
@@ -215,13 +215,13 @@ import {
 <template>
   <!-- <OkuTooltipProvider>
     <OkuTooltip v-model="open">
-      <OkuTooltipTrigger class="triggerClass">
+      <OkuTooltipTrigger class="tooltip_triggerClass">
         I'm controlled, look I'm {{ open ? 'open' : 'closed' }}
       </OkuTooltipTrigger>
       <OkuTooltipPortal>
-        <OkuTooltipContent class="contentClass" :side-offset="5">
+        <OkuTooltipContent class="tooltip_contentClass" :side-offset="5">
           Nicely done!
-          <OkuTooltipArrow class="arrowClass" :offset="10" />
+          <OkuTooltipArrow class="tooltip_arrowClass" :offset="10" />
         </OkuTooltipContent>
       </OkuTooltipPortal>
     </OkuTooltip>
@@ -242,35 +242,35 @@ import {
     }"
     >
       <OkuTooltip>
-        <OkuTooltipTrigger class="triggerClass">
+        <OkuTooltipTrigger class="tooltip_triggerClass">
           Hover me
         </OkuTooltipTrigger>
         <OkuTooltipPortal>
-          <OkuTooltipContent class="contentClass" :side-offset="5">
+          <OkuTooltipContent class="tooltip_contentClass" :side-offset="5">
             Nicely done!
-            <OkuTooltipArrow class="arrowClass" :offset="10" />
+            <OkuTooltipArrow class="tooltip_arrowClass" :offset="10" />
           </OkuTooltipContent>
         </OkuTooltipPortal>
       </OkuTooltip>
       <OkuTooltip>
-        <OkuTooltipTrigger class="triggerClass">
+        <OkuTooltipTrigger class="tooltip_triggerClass">
           Hover me
         </OkuTooltipTrigger>
         <OkuTooltipPortal>
-          <OkuTooltipContent class="contentClass" :side-offset="5">
+          <OkuTooltipContent class="tooltip_contentClass" :side-offset="5">
             Nicely done!
-            <OkuTooltipArrow class="arrowClass" :offset="10" />
+            <OkuTooltipArrow class="tooltip_arrowClass" :offset="10" />
           </OkuTooltipContent>
         </OkuTooltipPortal>
       </OkuTooltip>
       <OkuTooltip>
-        <OkuTooltipTrigger class="triggerClass">
+        <OkuTooltipTrigger class="tooltip_triggerClass">
           Hover me
         </OkuTooltipTrigger>
         <OkuTooltipPortal>
-          <OkuTooltipContent class="contentClass" :side-offset="5">
+          <OkuTooltipContent class="tooltip_contentClass" :side-offset="5">
             Nicely done!
-            <OkuTooltipArrow class="arrowClass" :offset="10" />
+            <OkuTooltipArrow class="tooltip_arrowClass" :offset="10" />
           </OkuTooltipContent>
         </OkuTooltipPortal>
       </OkuTooltip>
@@ -279,13 +279,13 @@ import {
 </template>
 
 <style lang="postcss" scoped>
-.positionButtonClass {
+.tooltip_positionButtonClass {
   margin: 5px;
   border: 1px solid black;
   background: transparent;
 }
 
-.contentClass {
+.tooltip_contentClass {
   transform-origin: var(--radix-tooltip-content-transform-origin);
   /* ensures content isn't selectable */
   /* this is just a detterent to people putting interactive content inside a `Tooltip.Root` */
@@ -298,11 +298,11 @@ import {
   max-width: 300px;
 }
 
-.arrowClass {
+.tooltip_arrowClass {
   fill: black;
 }
 
-@keyframes scaleIn {
+@keyframes tooltip_scaleIn {
   0% {
     opacity: 0;
     transform: scale(0);
@@ -314,7 +314,7 @@ import {
   }
 }
 
-@keyframes fadeIn {
+@keyframes tooltip_fadeIn {
   0% {
     opacity: 0;
   }
@@ -324,7 +324,7 @@ import {
   }
 }
 
-@keyframes fadeOut {
+@keyframes tooltip_fadeOut {
   0% {
     opacity: 1;
   }
@@ -334,21 +334,21 @@ import {
   }
 }
 
-.animatedContentClass {
+.tooltip_animatedContentClass {
   & [data-state='delayed-open'] {
-    animation: scaleIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+    animation: tooltip_scaleIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
   }
 
   & [data-state='instant-open'] {
-    animation: fadeIn 0.2s ease-out;
+    animation: tooltip_fadeIn 0.2s ease-out;
   }
 
   & [data-state='closed'] {
-    animation: fadeOut 0.2s ease-out;
+    animation: tooltip_fadeOut 0.2s ease-out;
   }
 }
 
-.gridClass {
+.tooltip_gridClass {
   display: inline-grid;
   grid-template-columns: repeat(3, 50px);
   column-gap: 150px;
@@ -357,7 +357,7 @@ import {
   border: 1px solid black;
 }
 
-.chromaticTriggerClass {
+.tooltip_chromaticTriggerClass {
   box-sizing: border-box;
   width: 30px;
   height: 30px;
@@ -365,7 +365,7 @@ import {
   border: 1px solid rgba(0, 0, 0, 0.3);
 }
 
-.chromaticContentClass {
+.tooltip_chromaticContentClass {
   box-sizing: border-box;
   display: grid;
   place-content: center;
@@ -377,11 +377,7 @@ import {
   border: 1px solid rgba(0, 0, 0, 0.3);
 }
 
-.chromaticArrowClass {
+.tooltip_chromaticArrowClass {
   fill: black;
 }
-
-button {
-  @apply inline-flex items-center mx-4 justify-center px-4 py-2 bg-blue-500;
-}
 </style>
diff --git a/packages/components/tooltip/src/stories/Styled.vue b/packages/components/tooltip/src/stories/Styled.vue
index 7711238dd..1ca606fb7 100644
--- a/packages/components/tooltip/src/stories/Styled.vue
+++ b/packages/components/tooltip/src/stories/Styled.vue
@@ -12,13 +12,13 @@ import {
 <template>
   <OkuTooltipProvider>
     <OkuTooltip>
-      <OkuTooltipTrigger class="triggerClass">
+      <OkuTooltipTrigger class="tooltip_triggerClass">
         Hover or Focus me
       </OkuTooltipTrigger>
       <OkuTooltipPortal>
-        <OkuTooltipContent class="contentClass" :side-offset="5">
+        <OkuTooltipContent class="tooltip_contentClass" :side-offset="5">
           Nicely done!
-          <OkuTooltipArrow class="arrowClass" :offset="10" />
+          <OkuTooltipArrow class="tooltip_arrowClass" :offset="10" />
         </OkuTooltipContent>
       </OkuTooltipPortal>
     </OkuTooltip>
diff --git a/packages/components/tooltip/src/stories/TooltipDemo.vue b/packages/components/tooltip/src/stories/TooltipDemo.vue
index 768d20918..19a7c2481 100644
--- a/packages/components/tooltip/src/stories/TooltipDemo.vue
+++ b/packages/components/tooltip/src/stories/TooltipDemo.vue
@@ -36,14 +36,14 @@ onMounted(() => {
 </template>
 
 <style>
-.triggerClass {}
-.positionButtonClass {
+.tooltip_triggerClass {}
+.tooltip_positionButtonClass {
   margin: 5px;
   border: 1px solid black;
   background: transparent;
 }
 
-.contentClass {
+.tooltip_contentClass {
   transform-origin: var(--radix-tooltip-content-transform-origin);
   /* ensures content isn't selectable */
   /* this is just a detterent to people putting interactive content inside a `Tooltip.Root` */
@@ -56,11 +56,11 @@ onMounted(() => {
   max-width: 300px;
 }
 
-.arrowClass {
+.tooltip_arrowClass {
   fill: black;
 }
 
-@keyframes scaleIn {
+@keyframes tooltip_scaleIn {
   0% {
     opacity: 0;
     transform: scale(0);
@@ -72,7 +72,7 @@ onMounted(() => {
   }
 }
 
-@keyframes fadeIn {
+@keyframes tooltip_fadeIn {
   0% {
     opacity: 0;
   }
@@ -82,7 +82,7 @@ onMounted(() => {
   }
 }
 
-@keyframes fadeOut {
+@keyframes tooltip_fadeOut {
   0% {
     opacity: 1;
   }
@@ -92,21 +92,21 @@ onMounted(() => {
   }
 }
 
-.animatedContentClass {
+.tooltip_animatedContentClass {
   & [data-state='delayed-open'] {
-    animation: scaleIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+    animation: tooltip_scaleIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
   }
 
   & [data-state='instant-open'] {
-    animation: fadeIn 0.2s ease-out;
+    animation: tooltip_fadeIn 0.2s ease-out;
   }
 
   & [data-state='closed'] {
-    animation: fadeOut 0.2s ease-out;
+    animation: tooltip_fadeOut 0.2s ease-out;
   }
 }
 
-.gridClass {
+.tooltip_gridClass {
   display: inline-grid;
   grid-template-columns: repeat(3, 50px);
   column-gap: 150px;
@@ -115,7 +115,7 @@ onMounted(() => {
   border: 1px solid black;
 }
 
-.chromaticTriggerClass {
+.tooltip_chromaticTriggerClass {
   box-sizing: border-box;
   width: 30px;
   height: 30px;
@@ -123,7 +123,7 @@ onMounted(() => {
   border: 1px solid rgba(0, 0, 0, 0.3);
 }
 
-.chromaticContentClass {
+.tooltip_chromaticContentClass {
   box-sizing: border-box;
   display: grid;
   place-content: center;
@@ -135,7 +135,7 @@ onMounted(() => {
   border: 1px solid rgba(0, 0, 0, 0.3);
 }
 
-.chromaticArrowClass {
+.tooltip_chromaticArrowClass {
   fill: black;
 }
 </style>