diff --git a/docs/src/components/layout/custom-search-dialog.tsx b/docs/src/components/layout/custom-search-dialog.tsx
index 8c6127b30..b1a49cafd 100644
--- a/docs/src/components/layout/custom-search-dialog.tsx
+++ b/docs/src/components/layout/custom-search-dialog.tsx
@@ -300,7 +300,7 @@ export function CustomSearchDialog({ open, onOpenChange }: CustomSearchDialogPro
             <button
               onClick={() => setDropdownOpen(!dropdownOpen)}
               className={cn(
-                "text-xs px-3 py-1.5 rounded-md transition-colors flex items-center gap-2",
+                "text-xs px-3 py-1.5 rounded-md flex items-center gap-2",
                 dropdownOpen ? "bg-fd-primary text-fd-primary-foreground" : "bg-fd-muted text-fd-muted-foreground hover:bg-fd-muted/80"
               )}
             >
@@ -326,7 +326,7 @@ export function CustomSearchDialog({ open, onOpenChange }: CustomSearchDialogPro
                       setDropdownOpen(false);
                     }}
                     className={cn(
-                      "w-full text-left px-3 py-2 text-xs hover:bg-fd-muted transition-colors flex items-center gap-2",
+                      "w-full text-left px-3 py-2 text-xs hover:bg-fd-muted flex items-center gap-2",
                       selectedPlatformFilter === platform && "bg-fd-primary/10 text-fd-primary"
                     )}
                   >
@@ -344,7 +344,7 @@ export function CustomSearchDialog({ open, onOpenChange }: CustomSearchDialogPro
           </div>
           <button
             onClick={() => onOpenChange(false)}
-            className="ml-3 p-1 hover:bg-fd-muted rounded-md transition-colors"
+            className="ml-3 p-1 hover:bg-fd-muted rounded-md"
           >
             <X className="w-4 h-4 text-fd-muted-foreground" />
           </button>
diff --git a/docs/src/components/layout/sidebar.tsx b/docs/src/components/layout/sidebar.tsx
index a2d7673b0..d324bbca6 100644
--- a/docs/src/components/layout/sidebar.tsx
+++ b/docs/src/components/layout/sidebar.tsx
@@ -73,7 +73,7 @@ const itemVariants = cva(
       active: {
         true: 'bg-fd-primary/10 text-fd-primary font-medium shadow-sm',
         false:
-          'text-fd-muted-foreground transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80',
+          'text-fd-muted-foreground hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80',
       },
     },
   },
@@ -345,7 +345,7 @@ export function SidebarFolderTrigger({
       <ChevronDown
         data-icon
         className={cn(
-          'ms-auto transition-transform duration-200 opacity-70 group-hover:opacity-100',
+          'ms-auto',
           !open && '-rotate-90'
         )}
       />
@@ -393,7 +393,7 @@ export function SidebarFolderLink(props: LinkProps) {
       <ChevronDown
         data-icon
         className={cn(
-          'ms-auto transition-transform duration-200 opacity-70 group-hover:opacity-100',
+          'ms-auto',
           !open && '-rotate-90'
         )}
       />
@@ -442,7 +442,7 @@ export function SidebarCollapseTrigger(props: ComponentProps<'button'>) {
       data-collapsed={collapsed}
       {...props}
       className={cn(
-        'transition-all hover:scale-105 active:scale-95 bg-fd-card rounded-full p-1.5 shadow-sm',
+        'hover:scale-105 active:scale-95 bg-fd-card rounded-full p-1.5 shadow-sm',
         props.className
       )}
       onClick={() => {
diff --git a/docs/src/components/layouts/api/api-sidebar.tsx b/docs/src/components/layouts/api/api-sidebar.tsx
index 19b52643a..d2c21fddd 100644
--- a/docs/src/components/layouts/api/api-sidebar.tsx
+++ b/docs/src/components/layouts/api/api-sidebar.tsx
@@ -76,7 +76,7 @@ function ApiSidebarLink({
   return (
     <Link
       href={href}
-      className={`flex items-center gap-2 px-2 py-1.5 rounded-md text-xs transition-colors ${
+      className={`flex items-center gap-2 px-2 py-1.5 rounded-md text-xs ${
         isActive
           ? 'bg-fd-primary/10 text-fd-primary font-medium'
           : 'text-fd-muted-foreground hover:text-fd-foreground hover:bg-fd-muted/50'
@@ -120,7 +120,7 @@ function CollapsibleSection({
     <div className="space-y-1">
       <button
         onClick={() => setIsOpen(!isOpen)}
-        className="flex items-center gap-2 w-full text-left px-2 py-1.5 text-sm font-medium text-fd-muted-foreground hover:text-fd-foreground transition-colors"
+        className="flex items-center gap-2 w-full text-left px-2 py-1.5 text-sm font-medium text-fd-muted-foreground hover:text-fd-foreground"
       >
         {isOpen ? (
           <ChevronDown className="h-3 w-3" />
@@ -237,7 +237,7 @@ export function ApiSidebarContent({ pages = [] }: { pages?: PageData[] }) {
         <ScrollViewport className="p-4 space-y-1">
           <Link
             href="/docs"
-            className="flex items-center gap-2 px-2 py-1.5 mb-2 text-sm text-fd-muted-foreground hover:text-fd-foreground transition-colors"
+            className="flex items-center gap-2 px-2 py-1.5 mb-2 text-sm text-fd-muted-foreground hover:text-fd-foreground"
           >
             <ArrowLeft className="h-3 w-3" />
             Back to docs
diff --git a/docs/src/components/mdx/sdk-components.tsx b/docs/src/components/mdx/sdk-components.tsx
index 999d1acf4..602d9c5ea 100644
--- a/docs/src/components/mdx/sdk-components.tsx
+++ b/docs/src/components/mdx/sdk-components.tsx
@@ -47,7 +47,7 @@ function ClickableCodeblock({
   useEffect(() => {
     const savedLightTheme = localStorage.getItem('stack-docs-light-theme');
     const savedDarkTheme = localStorage.getItem('stack-docs-dark-theme');
-    
+
     if (savedLightTheme) {
       setSelectedLightTheme(savedLightTheme);
     }
@@ -159,12 +159,12 @@ function ClickableCodeblock({
     const updateHighlightedCode = async () => {
       try {
         // Detect if we're in dark mode by checking CSS custom properties or document class
-        const isDarkMode = document.documentElement.classList.contains('dark') || 
+        const isDarkMode = document.documentElement.classList.contains('dark') ||
                           getComputedStyle(document.documentElement).getPropertyValue('--fd-background').includes('0 0% 3.9%');
-        
+
         // Use selected themes instead of hardcoded ones
         const themeToUse = isDarkMode ? selectedDarkTheme : selectedLightTheme;
-        
+
         const html = await codeToHtml(code, {
           lang: language,
           theme: themeToUse,
@@ -233,7 +233,7 @@ function ClickableCodeblock({
             <div className="relative">
               <button
                 onClick={() => setIsThemeSwitcherOpen(!isThemeSwitcherOpen)}
-                className="p-1.5 rounded-md bg-fd-muted/80 hover:bg-fd-muted text-fd-muted-foreground hover:text-fd-foreground transition-colors border border-fd-border/50 group"
+                className="p-1.5 rounded-md bg-fd-muted/80 hover:bg-fd-muted text-fd-muted-foreground hover:text-fd-foreground border border-fd-border/50 group"
                 title="Choose code syntax highlighting theme for better readability and accessibility"
                 aria-label="Code theme selector for accessibility"
               >
@@ -251,7 +251,6 @@ function ClickableCodeblock({
                     <div className="text-xs font-medium text-fd-foreground mb-2 pb-1 border-b border-fd-border/30">
                       Code Theme
                     </div>
-                    
                     {/* Current mode indicator */}
                     <div>
                       <div className="flex items-center gap-1.5 text-xs text-fd-muted-foreground mb-1.5">
@@ -272,8 +271,8 @@ function ClickableCodeblock({
                                 setIsThemeSwitcherOpen(false);
                               }}
                               className={`w-full flex items-center justify-between px-2 py-1 rounded text-xs transition-all duration-150 ${
-                                isSelected 
-                                  ? 'bg-fd-primary text-fd-primary-foreground font-medium' 
+                                isSelected
+                                  ? 'bg-fd-primary text-fd-primary-foreground font-medium'
                                   : 'hover:bg-fd-accent hover:text-fd-accent-foreground text-fd-foreground'
                               }`}
                               style={{ height: '24px' }}
@@ -487,7 +486,7 @@ export function ParamField({
 export function Accordion({ title, children }: { title: React.ReactNode, children: React.ReactNode }) {
   return (
     <details className="group mb-3 border border-fd-border/30 rounded-lg bg-fd-card/20">
-      <summary className="flex items-center justify-between px-3 py-2 cursor-pointer text-fd-foreground hover:bg-fd-accent/30 rounded-lg list-none [&::-webkit-details-marker]:hidden transition-colors">
+      <summary className="flex items-center justify-between px-3 py-2 cursor-pointer text-fd-foreground hover:bg-fd-accent/30 rounded-lg list-none [&::-webkit-details-marker]:hidden">
         <span className="text-sm font-medium">{title}</span>
         <svg
           className="w-4 h-4 transition-transform group-open:rotate-180 text-fd-muted-foreground"
diff --git a/docs/src/components/ui/method-layout.tsx b/docs/src/components/ui/method-layout.tsx
index 0e5efbd84..c7b124c1b 100644
--- a/docs/src/components/ui/method-layout.tsx
+++ b/docs/src/components/ui/method-layout.tsx
@@ -43,7 +43,7 @@ export function MethodSection({
       {title && (
         <button
           onClick={() => setIsOpen(!isOpen)}
-          className="w-full flex items-center justify-between px-3 py-0.5 text-left hover:bg-fd-accent/5 transition-colors rounded-t-lg"
+          className="w-full flex items-center justify-between px-3 py-0.5 text-left hover:bg-fd-accent/5 rounded-t-lg"
         >
           <span className="font-medium text-fd-foreground text-sm leading-none">{title}</span>
           {isOpen ? (
@@ -251,7 +251,8 @@ export function CollapsibleMethodSection({
       )}>
       <button
         onClick={() => setIsOpen(!isOpen)}
-        className="w-full flex items-center justify-between px-3 py-2 text-left hover:bg-fd-accent/5 transition-colors rounded-t-lg"
+        className="w-full flex items-center justify-between px-3 py-0.5 text-left hover:bg-fd-accent/5 rounded-t-lg"
+        data-testid="collapsible-method-trigger"
       >
         <div className="flex items-center gap-1.5">
           <div id={anchorId} className="text-m font-medium text-fd-foreground font-mono scroll-mt-20 leading-none">
@@ -388,7 +389,8 @@ export function CollapsibleTypesSection({
       )}>
         <button
           onClick={() => setIsOpen(!isOpen)}
-          className="w-full flex items-center justify-between px-3 py-2 text-left hover:bg-fd-accent/5 transition-colors rounded-t-lg"
+          className="w-full flex items-center justify-between px-3 py-2 text-left hover:bg-fd-accent/5 rounded-t-lg"
+          data-testid="collapsible-method-trigger"
         >
           <div className="flex items-center gap-1.5">
             <div id={anchorId} className="text-m font-medium text-fd-foreground font-mono scroll-mt-20 leading-none">